/* StoryBloom Floral Bloom theme.
   Loaded site-wide, but only active when html[data-theme="floral"] is set.
   Reader typography/layout is intentionally left alone. */

html[data-theme="floral"] {
  --bg: #0b0e13;
  --surface: rgba(20, 24, 31, .94);
  --surface-2: rgba(29, 34, 42, .96);
  --text: #f7f4f8;
  --muted: #bdb4c4;
  --line: rgba(210, 176, 226, .20);
  --accent: #c99cf0;
  --accent-dark: #e5c9ff;
  --accent-soft: rgba(201, 156, 240, .15);
  --danger: #ee8299;
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --modern-accent: #c99cf0;
  --modern-accent-2: #9fcaaf;
  --modern-shadow: 0 24px 70px rgba(0, 0, 0, .36);
  --floral-petal: #cfa7f0;
  --floral-petal-2: #e2bdd7;
  --floral-leaf: #9fc8ae;
  --floral-leaf-deep: #668f76;
  --floral-cream: #f7efff;
}

html[data-theme="floral"] body {
  background:
    radial-gradient(circle at 14% 10%, rgba(201, 156, 240, .13), transparent 24%),
    radial-gradient(circle at 88% 17%, rgba(159, 200, 174, .11), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(100, 143, 118, .08), transparent 30%),
    linear-gradient(180deg, #090c11 0%, #0e1118 48%, #11141b 100%);
  color: var(--text);
}

html[data-theme="floral"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(244, 225, 255, .85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 31% 72%, rgba(197, 224, 206, .75) 0 1px, transparent 1.6px),
    radial-gradient(circle at 69% 28%, rgba(244, 225, 255, .78) 0 1px, transparent 1.6px),
    radial-gradient(circle at 89% 76%, rgba(197, 224, 206, .68) 0 1px, transparent 1.6px);
}

html[data-theme="floral"] .modern-main,
html[data-theme="floral"] .site-shell,
html[data-theme="floral"] .modern-footer,
html[data-theme="floral"] .modern-header {
  position: relative;
  z-index: 1;
}

html[data-theme="floral"] .modern-header,
html[data-theme="floral"] .site-header {
  background: rgba(10, 13, 19, .82);
  border-bottom-color: rgba(207, 167, 240, .18);
  backdrop-filter: blur(18px);
}

html[data-theme="floral"] .modern-footer {
  background:
    radial-gradient(circle at 10% 100%, rgba(159, 200, 174, .08), transparent 28%),
    linear-gradient(180deg, rgba(12, 15, 21, .55), rgba(8, 10, 15, .94));
  border-top-color: rgba(207, 167, 240, .16);
}

html[data-theme="floral"] .modern-brand-mark,
html[data-theme="floral"] .brand-mark {
  position: relative;
  overflow: visible;
  background: linear-gradient(145deg, #9b5ee0, #e05f9e);
  box-shadow: 0 12px 34px rgba(177, 100, 223, .30);
}

html[data-theme="floral"] .modern-brand-mark::after,
html[data-theme="floral"] .brand-mark::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  right: -5px;
  top: -5px;
  background:
    radial-gradient(circle at 50% 16%, var(--floral-petal) 0 24%, transparent 26%),
    radial-gradient(circle at 84% 50%, var(--floral-petal) 0 24%, transparent 26%),
    radial-gradient(circle at 50% 84%, var(--floral-petal) 0 24%, transparent 26%),
    radial-gradient(circle at 16% 50%, var(--floral-petal) 0 24%, transparent 26%),
    radial-gradient(circle at 50% 50%, var(--floral-cream) 0 13%, transparent 15%);
  filter: drop-shadow(0 0 6px rgba(207, 167, 240, .30));
}

html[data-theme="floral"] .modern-hero,
html[data-theme="floral"] .hybrid-hero,
html[data-theme="floral"] .signature-hero,
html[data-theme="floral"] .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 24%, rgba(207, 167, 240, .18), transparent 23%),
    radial-gradient(circle at 17% 18%, rgba(159, 200, 174, .13), transparent 25%),
    linear-gradient(145deg, rgba(10, 13, 20, .94), rgba(17, 20, 29, .98));
}

html[data-theme="floral"] .modern-hero::before,
html[data-theme="floral"] .hybrid-hero::before,
html[data-theme="floral"] .signature-hero::before,
html[data-theme="floral"] .hero::before {
  content: "";
  position: absolute;
  left: -38px;
  bottom: -48px;
  z-index: -1;
  width: 300px;
  height: 300px;
  opacity: .62;
  pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%239fc8ae' stroke-width='2.4' stroke-linecap='round' opacity='.82'%3E%3Cpath d='M24 278C86 227 103 158 178 72'/%3E%3Cpath d='M70 231c-30 2-46-15-47-32 28-3 47 9 47 32Z'/%3E%3Cpath d='M105 184c28-8 44-27 41-47-24 0-42 16-41 47Z'/%3E%3Cpath d='M134 139c-23-4-38-20-39-37 21-2 37 11 39 37Z'/%3E%3Cpath d='M158 100c22-7 36-21 35-38-20 0-34 13-35 38Z'/%3E%3C/g%3E%3Cg fill='%23cfa7f0' opacity='.82'%3E%3Ccircle cx='181' cy='69' r='10'/%3E%3Ccircle cx='197' cy='69' r='10'/%3E%3Ccircle cx='189' cy='55' r='10'/%3E%3Ccircle cx='189' cy='83' r='10'/%3E%3Ccircle cx='189' cy='69' r='6' fill='%23f7efff'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-theme="floral"] .modern-hero::after,
html[data-theme="floral"] .hybrid-hero::after,
html[data-theme="floral"] .signature-hero::after,
html[data-theme="floral"] .hero::after {
  content: "";
  position: absolute;
  right: -48px;
  top: -62px;
  z-index: -1;
  width: 260px;
  height: 260px;
  opacity: .48;
  pointer-events: none;
  transform: rotate(175deg);
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23cfa7f0' stroke-width='2.2' stroke-linecap='round' opacity='.72'%3E%3Cpath d='M25 255C83 209 97 145 165 70'/%3E%3Cpath d='M67 213c-27 2-42-14-43-29 25-2 42 8 43 29Z'/%3E%3Cpath d='M100 169c25-7 40-24 38-42-22 0-38 14-38 42Z'/%3E%3C/g%3E%3Cg fill='%239fc8ae' opacity='.7'%3E%3Ccircle cx='168' cy='68' r='8'/%3E%3Ccircle cx='182' cy='68' r='8'/%3E%3Ccircle cx='175' cy='56' r='8'/%3E%3Ccircle cx='175' cy='80' r='8'/%3E%3Ccircle cx='175' cy='68' r='5' fill='%23f7efff'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-theme="floral"] .cinematic-starry-hero {
  background:
    radial-gradient(circle at 82% 23%, rgba(207, 167, 240, .22), transparent 25%),
    radial-gradient(circle at 17% 20%, rgba(159, 200, 174, .15), transparent 28%),
    linear-gradient(145deg, #0a0d14, #111722 58%, #171321);
}

html[data-theme="floral"] .cinematic-starry-hero::before {
  opacity: .32;
}

html[data-theme="floral"] .modern-hero-copy h1 em,
html[data-theme="floral"] .cinematic-starry-hero h1 em {
  color: #d6b5f3;
}

html[data-theme="floral"] .hero-kicker,
html[data-theme="floral"] .eyebrow {
  color: #cdb8e0;
}

html[data-theme="floral"] .hero-kicker::before,
html[data-theme="floral"] .modern-section-title h2::before,
html[data-theme="floral"] .discovery-lane-intro h2::before,
html[data-theme="floral"] .settings-page-header h1::before {
  content: "❀";
  display: inline-block;
  margin-right: 8px;
  color: var(--floral-leaf);
  font-size: .68em;
  font-weight: 400;
  opacity: .88;
  transform: rotate(-8deg);
}

html[data-theme="floral"] .modern-feature-strip > a,
html[data-theme="floral"] .modern-story-card,
html[data-theme="floral"] .premium-story-card,
html[data-theme="floral"] .modern-filter-sidebar,
html[data-theme="floral"] .modern-trending,
html[data-theme="floral"] .settings-section-card,
html[data-theme="floral"] .modern-surface,
html[data-theme="floral"] .modern-empty-state,
html[data-theme="floral"] .library-sidebar,
html[data-theme="floral"] .profile-dropdown,
html[data-theme="floral"] .mobile-slide-nav,
html[data-theme="floral"] .theme-panel,
html[data-theme="floral"] .story-shell,
html[data-theme="floral"] .chapter-list article,
html[data-theme="floral"] .writer-story-table article,
html[data-theme="floral"] .revision-list article,
html[data-theme="floral"] .download-list article,
html[data-theme="floral"] .continuity-entry,
html[data-theme="floral"] .publishing-progress,
html[data-theme="floral"] .onboarding-card,
html[data-theme="floral"] .settings-card,
html[data-theme="floral"] .advanced-search-card,
html[data-theme="floral"] .floating-story-card {
  border-color: rgba(207, 167, 240, .18);
  background: rgba(18, 22, 29, .90);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

html[data-theme="floral"] .modern-feature-strip > a,
html[data-theme="floral"] .modern-story-card,
html[data-theme="floral"] .premium-story-card,
html[data-theme="floral"] .modern-filter-sidebar,
html[data-theme="floral"] .floating-story-card {
  position: relative;
}

html[data-theme="floral"] .modern-feature-strip > a::after,
html[data-theme="floral"] .modern-story-card::after,
html[data-theme="floral"] .premium-story-card::after,
html[data-theme="floral"] .modern-filter-sidebar::after,
html[data-theme="floral"] .floating-story-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 24px;
  right: 12px;
  top: 11px;
  opacity: .30;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 19%, var(--floral-petal) 0 20%, transparent 23%),
    radial-gradient(circle at 81% 50%, var(--floral-petal) 0 20%, transparent 23%),
    radial-gradient(circle at 50% 81%, var(--floral-petal) 0 20%, transparent 23%),
    radial-gradient(circle at 19% 50%, var(--floral-petal) 0 20%, transparent 23%),
    radial-gradient(circle at 50% 50%, var(--floral-leaf) 0 12%, transparent 14%);
}

html[data-theme="floral"] .modern-feature-strip > a:hover::after,
html[data-theme="floral"] .modern-story-card:hover::after,
html[data-theme="floral"] .premium-story-card:hover::after {
  opacity: .65;
}

html[data-theme="floral"] .modern-primary-cta,
html[data-theme="floral"] .modern-write-button,
html[data-theme="floral"] .button.primary {
  background: linear-gradient(145deg, #b687e2, #d86fa8);
  color: #140d18;
  box-shadow: 0 10px 30px rgba(190, 111, 209, .22);
}

html[data-theme="floral"] .modern-primary-cta::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50% 50% 50% 10%;
  background: var(--floral-leaf);
  transform: rotate(-28deg);
  opacity: .88;
}

html[data-theme="floral"] .modern-icon-button,
html[data-theme="floral"] .profile-menu-button,
html[data-theme="floral"] .round-button,
html[data-theme="floral"] .mobile-bottom-nav {
  background: rgba(16, 20, 27, .94);
  border-color: rgba(207, 167, 240, .18);
}

html[data-theme="floral"] input,
html[data-theme="floral"] textarea,
html[data-theme="floral"] select {
  background-color: rgba(11, 14, 20, .96);
  color: var(--text);
  border-color: rgba(207, 167, 240, .20);
}

html[data-theme="floral"] select option,
html[data-theme="floral"] select optgroup {
  background: #10141b;
  color: #f7f4f8;
}

html[data-theme="floral"] .mood-shortcuts a,
html[data-theme="floral"] .modern-tag-row a,
html[data-theme="floral"] .modern-pill-options span,
html[data-theme="floral"] .story-card-feeling-row a {
  border-color: rgba(207, 167, 240, .22);
  background: rgba(201, 156, 240, .10);
  color: #e6d6f2;
}

html[data-theme="floral"] .mood-shortcuts a:hover,
html[data-theme="floral"] .modern-tag-row a:hover {
  border-color: rgba(159, 200, 174, .55);
  background: rgba(159, 200, 174, .10);
  box-shadow: 0 0 0 3px rgba(159, 200, 174, .06);
}

html[data-theme="floral"] .modern-main-nav a:hover,
html[data-theme="floral"] .mobile-bottom-nav a:hover,
html[data-theme="floral"] .profile-dropdown a:hover,
html[data-theme="floral"] .profile-dropdown button:hover {
  background: rgba(201, 156, 240, .10);
}

html[data-theme="floral"] .mobile-slide-nav .mobile-bloom-link span,
html[data-theme="floral"] .mobile-bottom-nav .mobile-bloom-tab span {
  background: rgba(159, 200, 174, .16);
  color: #d8eddf;
}

html[data-theme="floral"] .modern-content-shell,
html[data-theme="floral"] .storybloom-discovery-lanes,
html[data-theme="floral"] .settings-page-shell {
  position: relative;
}

html[data-theme="floral"] .storybloom-discovery-lanes::before,
html[data-theme="floral"] .settings-page-shell::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 230px;
  left: -58px;
  top: 34px;
  opacity: .18;
  pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 240'%3E%3Cg fill='none' stroke='%239fc8ae' stroke-width='2'%3E%3Cpath d='M26 226c34-55 48-105 83-166'/%3E%3Cpath d='M55 170c-22 0-34-13-34-27 20-2 34 8 34 27Z'/%3E%3Cpath d='M81 124c20-5 32-18 31-33-18 0-30 11-31 33Z'/%3E%3C/g%3E%3Cg fill='%23cfa7f0' opacity='.85'%3E%3Ccircle cx='111' cy='57' r='7'/%3E%3Ccircle cx='123' cy='57' r='7'/%3E%3Ccircle cx='117' cy='47' r='7'/%3E%3Ccircle cx='117' cy='67' r='7'/%3E%3C/g%3E%3C/svg%3E");
}

.site-theme-choice.floral {
  --sample-a: #171321;
  --sample-b: #a66bd4;
}

.site-theme-choice.floral i {
  position: relative;
}

.site-theme-choice.floral i::after {
  content: "❀";
  position: absolute;
  right: -5px;
  top: -7px;
  color: #a9d2b7;
  font-size: 13px;
}

@media (max-width: 700px) {
  html[data-theme="floral"] .modern-hero::before,
  html[data-theme="floral"] .hybrid-hero::before,
  html[data-theme="floral"] .signature-hero::before,
  html[data-theme="floral"] .hero::before {
    width: 190px;
    height: 190px;
    left: -58px;
    bottom: -38px;
    opacity: .46;
  }

  html[data-theme="floral"] .modern-hero::after,
  html[data-theme="floral"] .hybrid-hero::after,
  html[data-theme="floral"] .signature-hero::after,
  html[data-theme="floral"] .hero::after {
    width: 170px;
    height: 170px;
    right: -62px;
    top: -38px;
    opacity: .34;
  }

  html[data-theme="floral"] .storybloom-discovery-lanes::before,
  html[data-theme="floral"] .settings-page-shell::before {
    opacity: .10;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="floral"] *,
  html[data-theme="floral"] *::before,
  html[data-theme="floral"] *::after {
    transition: none !important;
    animation: none !important;
  }
}
