/* =========================================================
   GidiReads — Design tokens & theme system (V14.0–V14.0.4)

   Every existing rule in this stylesheet already references
   these variable names (--ivory, --ink, --lilac, --plum, --white,
   --line), so redefining them per [data-theme] re-themes the
   entire site without touching component rules individually.
   New tokens (--success, --warning, --error, --nav-bg, --nav-text,
   --highlight, --echo-color, --input-bg) cover categories the
   original palette didn't yet name explicitly.
   ========================================================= */
:root {
  /* ---- Lilac / Ivory (default) ---- */
  --ivory: #FBF7F1;
  --ivory-deep: #F3EBE1;
  --ink: #1C1420;
  --ink-soft: #3A2E3F;
  --lilac: #B79FD1;
  --lilac-deep: #8E6FB0;
  --plum: #5C3A5E;
  --white: #FFFFFF;
  --line: rgba(28, 20, 32, 0.10);

  --highlight: var(--lilac);
  --echo-color: var(--lilac-deep);
  --input-bg: var(--white);
  --nav-bg: var(--ink);
  --nav-text: rgba(251, 247, 241, 0.85);

  --success: #3B7A4A;
  --warning: #B8860B;
  --error: #A13B3B;
  --verified: #2E7FE0;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --text-scale: 1;

  --max-width: 1180px;
  --radius: 3px;
}

/* ---- Forest ---- */
[data-site-theme="forest"] {
  --ivory: #F4F3EE;
  --ivory-deep: #E9E7DD;
  --ink: #1B2A20;
  --ink-soft: #3E5245;
  --lilac: #8FB79B;
  --lilac-deep: #3F6B4E;
  --plum: #2C4A38;
  --white: #FFFFFF;
  --line: rgba(27, 42, 32, 0.12);

  --highlight: var(--lilac);
  --echo-color: var(--lilac-deep);
  --input-bg: var(--white);
  --nav-bg: #16241B;
  --nav-text: rgba(244, 243, 238, 0.85);

  --success: #3B7A4A;
  --warning: #8A6A1E;
  --error: #A13B3B;
  --verified: #2E7FE0;
}

/* ---- Sunlit ---- */
[data-site-theme="sunlit"] {
  --ivory: #FBF5E8;
  --ivory-deep: #F2E7CE;
  --ink: #2E2612;
  --ink-soft: #5C4E2E;
  --lilac: #EBC873;
  --lilac-deep: #D8A63E;
  --plum: #8A5A2B;
  --white: #FFFFFF;
  --line: rgba(46, 38, 18, 0.12);

  --highlight: var(--lilac);
  --echo-color: var(--lilac-deep);
  --input-bg: var(--white);
  --nav-bg: #2E2612;
  --nav-text: rgba(251, 245, 232, 0.85);

  --success: #3B7A4A;
  --warning: #B8860B;
  --error: #A13B3B;
  --verified: #2E7FE0;
}

/* ---- Rose ---- */
[data-site-theme="rose"] {
  --ivory: #F7F0EF;
  --ivory-deep: #EEDEDB;
  --ink: #2B1E22;
  --ink-soft: #5A4247;
  --lilac: #D9A8AE;
  --lilac-deep: #B87A82;
  --plum: #7A3F49;
  --white: #FFFFFF;
  --line: rgba(43, 30, 34, 0.12);

  --highlight: var(--lilac);
  --echo-color: var(--lilac-deep);
  --input-bg: var(--white);
  --nav-bg: #2B1E22;
  --nav-text: rgba(247, 240, 239, 0.85);

  --success: #3B7A4A;
  --warning: #B8860B;
  --error: #A13B3B;
  --verified: #2E7FE0;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: calc(16px * var(--text-scale, 1));
}

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--lilac-deep);
  outline-offset: 3px;
}

.section-inner, .nav-inner, .footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}
.nav-inner {
  width: 100%;
  height: 88px;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  box-sizing: border-box;
}

.site-footer .footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 28px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.site-footer .footer-bottom p {
  margin: 0;
  white-space: nowrap;
}

.site-footer .footer-bottom span {
  white-space: nowrap;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 500;
  font-family: var(--font-body);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--ivory);
}
.btn-primary:hover { background: var(--plum); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--plum); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  border-color: var(--plum);
  color: var(--plum);
}

.btn-lg { padding: 14px 30px; font-size: 0.98rem; }
.btn-block { width: 100%; }

/* =========================================================
   Navigation
   ========================================================= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid rgba(183, 159, 209, 0.25);
}

/* =========================================================
   Site Navigation (injected by site-header.js)
   ========================================================= */
body.has-site-nav {
  padding-top: 88px;
}
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 0 0 14px 14px;
  height: 88px;
  padding: 0 24px;
  box-sizing: border-box;
  background: var(--nav-surface, var(--nav-bg, var(--ink)));
  backdrop-filter: none;
}
.brand { display: flex; align-items: center; }
.brand-mark {
  height: 54px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(183, 159, 209, 0.35));
}
.brand-mark.small { height: 32px; filter: none; }

/* =========================================================
   Universal Navigation Links — works for all nav variants
   ========================================================= */
.nav-links,
.home-desktop-links,
.explore-main-links,
.collection-nav-links {
  display: flex;
  gap: 34px;
  font-size: 0.95rem;
}

.nav-links a,
.home-desktop-links a,
.explore-main-links a,
.collection-nav-links a {
  color: rgba(251, 247, 241, 0.75);
  position: relative;
  text-decoration: none;
}
.nav-links a:hover,
.home-desktop-links a:hover,
.explore-main-links a:hover,
.collection-nav-links a:hover {
  color: var(--ivory);
}
.nav-links a::after,
.home-desktop-links a::after,
.explore-main-links a::after,
.collection-nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--lilac);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links a:hover::after,
.home-desktop-links a:hover::after,
.explore-main-links a:hover::after,
.collection-nav-links a:hover::after {
  transform: scaleX(1);
}

/* Active state */
.home-desktop-links a.is-active,
.explore-main-links a.active,
.collection-nav-links a.active,
.nav-links a.active {
  color: var(--ivory);
}
.home-desktop-links a.is-active::after,
.explore-main-links a.active::after,
.collection-nav-links a.active::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-nav .nav-actions .btn,
.site-nav .nav-actions a.btn,
.site-nav .nav-actions button.btn {
  border-radius: 10px;
}
.site-nav .nav-actions .btn[hidden],
.site-nav .nav-actions a[hidden],
.site-nav .nav-actions button[hidden] {
  display: none !important;
}
.site-nav .home-nav-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nav-text, rgba(251, 247, 241, 0.75));
  padding: 8px 12px;
  border: 1px solid var(--line-color, rgba(255,255,255,.12));
  border-radius: 999px;
  text-decoration: none;
}
.site-nav .home-nav-search:hover {
  color: var(--nav-accent, var(--lilac));
  border-color: var(--accent, rgba(185,155,218,.4));
}

.nav-search-btn {
  background: none;
  border: none;
  color: rgba(251, 247, 241, 0.75);
  display: flex;
  align-items: center;
  padding: 6px;
}
.nav-search-btn:hover { color: var(--lilac); }

.site-nav .btn-ghost {
  color: rgba(251, 247, 241, 0.85);
}
.site-nav .btn-ghost:hover { color: var(--lilac); }

.site-nav .btn-primary {
  background: var(--lilac);
  color: var(--ink);
}
.site-nav .btn-primary:hover { background: var(--lilac-deep); color: var(--ivory); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  padding: 96px 0 88px;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--lilac-deep);
  margin: 0 0 18px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  max-width: 14ch;
  color: var(--ink);
}

.hero-sub {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 36px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-glow {
  position: absolute;
  top: -140px;
  right: -160px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(183,159,209,0.35) 0%, rgba(183,159,209,0) 70%);
  z-index: 1;
  pointer-events: none;
}

/* =========================================================
   Sections (shared)
   ========================================================= */
.section { padding: 76px 0; }
.section + .section { border-top: 1px solid var(--line); }

.section-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.9rem;
  margin: 0 0 8px;
  position: relative;
  padding-left: 18px;
  border-left: 3px solid var(--lilac);
}

.genres { background: var(--ivory-deep); }
.new-voices { background: var(--white); }

.section-sub {
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 52ch;
}

/* =========================================================
   Empty states
   ========================================================= */
.featured-empty,
.empty-row {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius);
  padding: 44px;
  text-align: left;
}

.empty-kicker {
  font-size: 0.85rem;
  color: var(--lilac-deep);
  margin: 0 0 10px;
}

.empty-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  margin: 0 0 12px;
}

.empty-body {
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 24px;
}

.empty-row {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* =========================================================
   Trending list — editorial numbered list
   ========================================================= */
.trending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.trending-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.trending-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--lilac-deep);
  width: 2ch;
  flex-shrink: 0;
}

.trending-meta { flex: 1; }

.trending-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 4px;
}

.trending-author {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.trending-tag {
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* =========================================================
   Genres
   ========================================================= */
.genre-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.genre-chip {
  background: none;
  border: none;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.genre-chip:hover {
  color: var(--ink);
  border-color: var(--lilac-deep);
}

/* =========================================================
   New voices
   ========================================================= */
.voices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.voice-card {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
}

.voice-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.voice-meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* =========================================================
   Echo section
   ========================================================= */
.echo-section {
  background: var(--ink);
  color: var(--ivory);
}

.echo-inner { max-width: 640px; }

.echo-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 20px;
  color: var(--ivory);
}

.echo-body {
  color: rgba(251, 247, 241, 0.78);
  font-size: 1.05rem;
  max-width: 54ch;
}

/* =========================================================
   Author CTA
   ========================================================= */
.author-cta {
  background: var(--plum);
}

.author-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.8rem;
  margin: 0;
  max-width: 20ch;
  color: var(--ivory);
}

.author-cta .btn-primary {
  background: var(--lilac);
  color: var(--ink);
}
.author-cta .btn-primary:hover { background: var(--ivory); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--ivory-deep);
  border-top: 1px solid var(--line);
  padding: 24px 0 20px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-brand { max-width: 100%; width: 100%; flex: 0 0 100%; }
.footer-brand-lines {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: nowrap;
  margin-top: 14px;
}
.footer-brand-lines .footer-tagline,
.footer-brand-lines .footer-origin {
  margin: 0;
  white-space: nowrap;
}

.footer-tagline {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.footer-columns {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.footer-col h3 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.footer-col a {
  display: block;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 10px;
}

.footer-col a:hover { color: var(--plum); }

.footer-copy {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  margin: 56px 0 0;
  font-size: 0.95rem;
}

/* =========================================================
   Modals
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 20, 32, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-overlay[hidden] { display: none; }

.modal {
  position: relative;
  background: var(--ivory);
  border-radius: 6px;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-header {
  position: relative;
  background: var(--ink);
  padding: 36px 40px 28px;
  border-bottom: 3px solid var(--lilac);
}

.modal-body { padding: 32px 40px 40px; }

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(251, 247, 241, 0.7);
  padding: 4px;
}
.modal-close:hover { color: var(--lilac); }

.modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 8px;
  color: var(--ivory);
}

.modal-sub {
  color: rgba(251, 247, 241, 0.72);
  margin: 0;
  font-size: 0.95rem;
}

.modal-form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
.field span { color: var(--plum); font-weight: 600; }

.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; }

input, textarea, select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--lilac-deep);
  box-shadow: 0 0 0 3px rgba(183, 159, 209, 0.25);
  outline: none;
}

textarea { resize: vertical; }

.form-error {
  color: var(--error);
  font-size: 0.88rem;
  margin: 0;
}

.modal-switch {
  text-align: center;
  margin: 22px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.modal-switch button {
  background: none;
  border: none;
  color: var(--plum);
  font-weight: 600;
  margin-left: 6px;
}
.modal-switch button:hover { text-decoration: underline; }

/* =========================================================
   Explore page
   ========================================================= */
.nav-links a.active {
  color: var(--lilac);
}
.nav-links a.active::after {
  transform: scaleX(1);
}

.explore-header {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--line);
}

.explore-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0 0 32px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  max-width: 480px;
  color: var(--ink-soft);
}

.search-bar input {
  border: none;
  padding: 0;
  flex: 1;
  font-size: 1rem;
  background: transparent;
}
.search-bar input:focus { outline: none; box-shadow: none; }

.explore-filters {
  padding: 32px 0;
  background: var(--ivory-deep);
}

.genre-chip.active {
  color: var(--plum);
  border-color: var(--lilac-deep);
}

.explore-results { padding-top: 48px; }

.results-count {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0 0 24px;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

.story-card {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.story-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(28, 20, 32, 0.08);
}

.story-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 6px;
}

.story-card-author {
  font-size: 0.88rem;
  color: var(--plum);
  margin: 0 0 4px;
  font-weight: 600;
}

.story-card-genre {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.story-card-desc {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3.expanded {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* =========================================================
   My Stories page
   ========================================================= */
.my-story-card {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 24px;
}

.my-story-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.chapter-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border-top: 1px solid var(--line);
}

.chapter-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.add-chapter-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px dashed var(--line);
  padding-top: 20px;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.checkbox-field input { width: auto; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 760px) {
  .featured-card {
    flex-direction: column;
  }
  .featured-cover {
    display: flex;
    justify-content: center;
  }
  .featured-cover .cover-lg,
  .featured-cover .cover-placeholder {
    width: 140px;
  }
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--ivory);
  padding: 6px;
}

.mobile-nav-panel {
  display: none;
  flex-direction: column;
  background: var(--ink);
  border-bottom: 1px solid rgba(183, 159, 209, 0.25);
  padding: 8px 28px 20px;
}
.mobile-nav-panel.open { display: flex; }
.mobile-nav-panel a {
  color: rgba(251, 247, 241, 0.85);
  padding: 12px 0;
  border-bottom: 1px solid rgba(251, 247, 241, 0.08);
  font-size: 1rem;
}
.mobile-nav-panel a:last-child { border-bottom: none; }
.mobile-nav-panel a.active { color: var(--lilac); }
  .hero { padding: 64px 0 56px; }
  .section { padding: 56px 0; }
  .author-cta-inner { flex-direction: column; align-items: flex-start; }
  .field-row { flex-direction: column; }
  .footer-inner { flex-direction: column; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* =========================================================
   Covers, placeholders, avatars
   ========================================================= */
.cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lilac) 0%, var(--plum) 100%);
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 500;
  flex-shrink: 0;
}

.cover-lg {
  width: 180px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 16px 32px rgba(28, 20, 32, 0.18);
  font-size: 3rem;
}

.cover-md {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
  font-size: 2.2rem;
}

.cover-sm {
  width: 46px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.avatar-sm {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.avatar-lg {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 2.4rem;
  overflow: hidden;
}
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

.cover-preview {
  margin-top: 10px;
  width: 120px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4px;
}

/* =========================================================
   Featured story with cover
   ========================================================= */
.featured-card {
  display: flex;
  gap: 36px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 4px;
  padding: 36px;
}

.featured-text { flex: 1; min-width: 0; }

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-2.expanded {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

.read-more-btn {
  background: none;
  border: none;
  color: var(--plum);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0;
  margin-top: 8px;
}
.read-more-btn:hover { text-decoration: underline; }

/* =========================================================
   Story cards with covers (Explore grid)
   ========================================================= */
.story-grid .story-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.story-card-body { padding: 18px 20px 22px; }

/* =========================================================
   My Stories cards with covers
   ========================================================= */
.my-story-top {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}
.my-story-top .cover-md {
  width: 90px;
  flex-shrink: 0;
  border-radius: 4px;
}
.my-story-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.my-story-head .trending-tag { white-space: normal; }

/* =========================================================
   Tag picker
   ========================================================= */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 16px;
}

.tag-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.tag-checkbox input { width: auto; }
.tag-checkbox input:disabled + * { opacity: 0.4; }

/* =========================================================
   Wider modal (publish form has more fields now)
   ========================================================= */
.modal-wide { max-width: 560px; }

/* =========================================================
   Account page
   ========================================================= */
.account-form {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 8px;
}

.avatar-btn {
  position: relative;
  cursor: pointer;
}

.form-success {
  color: var(--success);
  font-size: 0.88rem;
  margin: 0;
}

/* =========================================================
   Fix: prevent horizontal overflow from long tag/genre lines
   ========================================================= */
html, body { overflow-x: hidden; max-width: 100%; }
.trending-tag, .story-card-genre {
  white-space: normal;
  word-break: break-word;
}

/* =========================================================
   Paper grain texture (subtle, applied over whole page)
   ========================================================= */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* =========================================================
   Bottom navigation bar (mobile) — replaces top nav-links on small screens
   ========================================================= */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  background: var(--ink);
  border-top: 1px solid rgba(183, 159, 209, 0.25);
  border-radius: 16px 16px 0 0;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  justify-content: space-between;
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: rgba(251, 247, 241, 0.6);
  font-size: 0.68rem;
  font-family: var(--font-body);
  padding: 4px 0;
}

.bottom-nav-item.active { color: var(--lilac); }

.bottom-nav-write {
  position: relative;
  top: -4px;
}

.write-fab {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(183, 159, 209, 0.4);
  flex-shrink: 0;
}

/* Bottom nav is now the single navigation system, on every screen size */
.bottom-nav { display: flex; max-width: 480px; width: 100%; margin: 0 auto; left: 0; right: 0; }
body { padding-bottom: 68px; }

/* =========================================================
   Write action sheet
   ========================================================= */
.write-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 20, 32, 0.55);
  z-index: 90;
  display: flex;
  align-items: flex-end;
}
.write-sheet-overlay[hidden] { display: none; }

.write-sheet {
  position: relative;
  background: var(--ivory);
  width: 100%;
  border-radius: 16px 16px 0 0;
  padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.write-sheet-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 6px;
}

.write-sheet-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--ink-soft);
}

.write-sheet-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.95rem;
  color: var(--ink);
  text-align: left;
}
.write-sheet-option:hover { border-color: var(--lilac-deep); color: var(--plum); }

/* =========================================================
   Toast
   ========================================================= */
.gr-toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--ink);
  color: var(--ivory);
  padding: 12px 22px;
  border-radius: 30px;
  font-size: 0.9rem;
  box-shadow: 0 10px 24px rgba(28, 20, 32, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 200;
  max-width: 90vw;
  text-align: center;
}
.gr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 761px) {
  .gr-toast { bottom: 24px; }
}

/* =========================================================
   Trending section — dark "Ink & Starlight" treatment
   ========================================================= */
.trending {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.trending .section-heading {
  color: var(--ivory);
  border-left-color: var(--lilac);
}

.trending-list { border-top-color: rgba(251, 247, 241, 0.15); }
.trending-row { border-bottom-color: rgba(251, 247, 241, 0.12); }
.trending-title { color: var(--ivory); }
.trending .trending-author,
.trending .trending-tag { color: rgba(251, 247, 241, 0.65); }
.trending .trending-num { color: var(--lilac); }

.trending::before,
.trending::after,
.echo-section::before,
.author-cta::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, rgba(183,159,209,0.8) 0%, rgba(183,159,209,0) 70%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: 0.5;
  pointer-events: none;
}
.trending::before { top: 14%; right: 8%; }
.trending::after { bottom: 18%; left: 6%; width: 9px; height: 9px; }
.echo-section::before { top: 20%; left: 10%; }
.author-cta::before { bottom: 20%; right: 12%; width: 10px; height: 10px; }

/* =========================================================
   Ivory-deep sections get a very faint serif watermark
   ========================================================= */
.genres { position: relative; overflow: hidden; }
.genres::before {
  content: 'G';
  position: absolute;
  top: -60px;
  right: -10px;
  font-family: var(--font-display);
  font-size: 320px;
  font-weight: 500;
  color: var(--plum);
  opacity: 0.04;
  pointer-events: none;
  line-height: 1;
}

/* =========================================================
   Preserve author's own formatting (line breaks, paragraphs)
   wherever their text is displayed — descriptions, bios, chapters
   ========================================================= */
.empty-body,
.story-card-desc,
.voice-meta,
.chapter-content-display {
  white-space: pre-wrap;
}

/* =========================================================
   Reader page
   ========================================================= */
.reader-body {
  background: var(--ivory);
  color: var(--ink);
  transition: background 0.25s ease, color 0.25s ease;
}
.reader-body[data-reader-theme="dark"] {
  background: #16101a;
  color: #EDE6F0;
}
.reader-body[data-reader-theme="lilac"] {
  background: #F3ECFA;
  color: #2E2033;
}

.reader-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: inherit;
  border-bottom: 1px solid var(--line);
}

.reader-icon-btn {
  background: none;
  border: none;
  color: inherit;
  display: flex;
  padding: 6px;
}

.reader-topbar-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  flex: 1;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-menu {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 50;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(28, 20, 32, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.theme-menu[hidden] { display: none; }
.theme-menu button {
  background: none;
  border: none;
  padding: 12px 20px;
  text-align: left;
  font-size: 0.9rem;
  color: var(--ink);
}
.theme-menu button:hover { background: var(--ivory-deep); }

.reader-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.reader-chapter-label {
  font-size: 0.85rem;
  color: var(--lilac-deep);
  margin: 0 0 6px;
}

.reader-chapter-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 28px;
}

.reader-content {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.85;
}

.reader-note {
  margin-top: 40px;
  padding: 20px;
  border-left: 3px solid var(--lilac-deep);
  background: rgba(183, 159, 209, 0.08);
  border-radius: 0 6px 6px 0;
}
.reader-note-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--lilac-deep);
  margin: 0 0 8px;
}
.reader-note-text {
  font-size: 0.95rem;
  white-space: pre-wrap;
  margin: 0;
}

.reader-nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  gap: 12px;
}
.reader-nav-buttons .btn { flex: 1; }
.reader-nav-buttons .btn:disabled { opacity: 0.35; }

/* Chapter drawer */
.chapter-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 20, 32, 0.5);
  z-index: 80;
  display: flex;
}
.chapter-drawer-overlay[hidden] { display: none; }

.chapter-drawer {
  background: var(--ivory);
  color: var(--ink);
  width: 84%;
  max-width: 340px;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.chapter-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.chapter-drawer-head h3 {
  font-family: var(--font-display);
  margin: 0;
}

.chapter-drawer-list { list-style: none; margin: 0; padding: 0; }
.chapter-drawer-item {
  display: block;
  padding: 12px 8px;
  font-size: 0.92rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.chapter-drawer-item.active { color: var(--plum); font-weight: 600; }

/* =========================================================
   Clickable story links (Featured, Trending, Explore)
   ========================================================= */
.featured-cover { display: block; }
.story-link { color: inherit; text-decoration: none; }
.story-link:hover { color: var(--plum); }

.trending-row-link {
  display: flex;
  align-items: baseline;
  gap: 24px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.trending-row { padding: 0; }
.trending-row-link { padding: 22px 0; }
.trending-row-link:hover .trending-title { color: var(--lilac); }

.story-card-link { display: block; color: inherit; text-decoration: none; }

.card-save-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(28, 20, 32, 0.55);
  border: none;
  color: var(--ivory);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.card-save-btn.saved { background: var(--lilac-deep); }
.story-grid .story-card { position: relative; }

/* =========================================================
   Library page
   ========================================================= */
.library-card {
  display: flex;
  gap: 16px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 14px;
  align-items: center;
}
.library-card-body { flex: 1; min-width: 0; }
.library-status {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lilac-deep);
  margin: 0 0 4px;
}
.library-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.library-remove-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.library-remove-btn:hover { color: var(--error); }

/* =========================================================
   Account page — quick link rows (Library, My Stories)
   ========================================================= */
.account-links {
  max-width: 480px;
  margin-bottom: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.account-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.account-link-row:last-child { border-bottom: none; }
.account-link-row:hover { background: var(--ivory-deep); color: var(--plum); }

/* =========================================================
   Reader page — theme-aware buttons (fixes invisible Prev/Next in dark mode)
   ========================================================= */
.reader-body[data-reader-theme="dark"] .btn-outline {
  color: #EDE6F0;
  border-color: rgba(237, 230, 240, 0.4);
}
.reader-body[data-reader-theme="dark"] .btn-outline:hover {
  border-color: var(--lilac);
  color: var(--lilac);
}
.reader-body[data-reader-theme="dark"] .theme-menu,
.reader-body[data-reader-theme="dark"] .chapter-drawer {
  background: #1F1723;
  color: #EDE6F0;
}
.reader-body[data-reader-theme="dark"] .theme-menu button {
  color: #EDE6F0;
}
.reader-body[data-reader-theme="dark"] .theme-menu button:hover {
  background: rgba(183, 159, 209, 0.15);
}
.reader-body[data-reader-theme="dark"] .chapter-drawer-item {
  color: #EDE6F0;
  border-bottom-color: rgba(237, 230, 240, 0.12);
}
.reader-body[data-reader-theme="dark"] .reader-icon-btn {
  color: #EDE6F0;
}

.reader-body[data-reader-theme="lilac"] .btn-outline {
  color: #2E2033;
  border-color: #2E2033;
}

/* =========================================================
   Top nav profile icon (Profile lives up top, per design spec)
   ========================================================= */
.top-profile-btn {
  display: flex;
  align-items: center;
  color: var(--ink);
  padding: 6px;
}
.site-nav .top-profile-btn { color: rgba(251, 247, 241, 0.85); }
.site-nav .top-profile-btn:hover { color: var(--lilac); }

/* =========================================================
   Echo button + star splash
   ========================================================= */
.echo-action {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.echo-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--lilac-deep);
  color: var(--lilac-deep);
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 0.92rem;
  font-weight: 500;
  overflow: visible;
}
.echo-btn.echoed {
  background: var(--lilac-deep);
  color: var(--ivory);
  border-color: var(--lilac-deep);
}

.echo-count {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.reader-body[data-reader-theme="dark"] .echo-count { color: rgba(237, 230, 240, 0.6); }
.reader-body[data-reader-theme="dark"] .echo-action { border-top-color: rgba(237, 230, 240, 0.12); }

.echo-star {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--lilac);
  font-size: 1rem;
  pointer-events: none;
  animation: echo-star-fly 0.7s ease-out forwards;
}

@keyframes echo-star-fly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2);
  }
}

/* =========================================================
   Story Detail page
   ========================================================= */
.story-detail-hero { padding: 40px 0; border-bottom: 1px solid var(--line); }
.story-detail-inner { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.story-detail-info { flex: 1; min-width: 200px; }
.story-detail-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.8rem;
  margin: 0 0 6px;
}
.story-detail-author { margin: 0 0 4px; font-size: 0.95rem; }
.story-detail-meta { color: var(--ink-soft); font-size: 0.88rem; margin: 0 0 14px; }
.story-detail-stats { display: flex; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.story-stat {
  font-size: 0.85rem;
  color: var(--plum);
  background: rgba(183, 159, 209, 0.12);
  padding: 5px 12px;
  border-radius: 20px;
}
.story-detail-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-disabled { opacity: 0.5; pointer-events: none; }

/* =========================================================
   Author profile page
   ========================================================= */
.author-profile-head {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

/* =========================================================
   Library tabs (Reading History / Saved)
   ========================================================= */
.library-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.library-tab {
  background: none;
  border: none;
  padding: 12px 4px;
  margin-right: 20px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
.library-tab.active {
  color: var(--plum);
  border-bottom-color: var(--plum);
  font-weight: 600;
}

/* =========================================================
   Preserve formatting on author bio too
   ========================================================= */
#authorBio { white-space: pre-wrap; }

/* =========================================================
   Story stat with icon (Reads)
   ========================================================= */
.story-stat-eye {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* =========================================================
   Edit buttons in My Stories
   ========================================================= */
.my-story-head { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.edit-story-btn { margin-top: 6px; }
.chapter-row { flex-wrap: wrap; gap: 8px; }

/* =========================================================
   Notification badge on bottom nav
   ========================================================= */
.nav-icon-wrap { position: relative; display: inline-flex; }
.nav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--error);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* =========================================================
   Notifications — editorial activity center v2
   ========================================================= */
.notifications-hero {
  padding: 54px 0 38px;
  background:
    radial-gradient(circle at 12% 20%, rgba(183,159,209,.20), transparent 34%),
    linear-gradient(180deg, rgba(183,159,209,.10), transparent 82%);
  border-bottom: 1px solid var(--line);
}
.notifications-head { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; }
.notifications-subtitle { max-width:610px; margin:10px 0 0; color:var(--ink-soft); line-height:1.65; }
.notifications-mark-all { display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(101,70,113,.22); background:rgba(255,255,255,.72); color:var(--plum); border-radius:999px; padding:10px 15px; font:600 .78rem var(--font-body); cursor:pointer; transition:.2s ease; white-space:nowrap; }
.notifications-mark-all svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.notifications-mark-all:hover { background:var(--plum); color:var(--ivory); border-color:var(--plum); transform:translateY(-1px); }
.notifications-mark-all:disabled { opacity:.55; cursor:default; transform:none; }
.notifications-section { padding-top:34px; padding-bottom:70px; }
.notification-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.notification-toolbar-label { margin:0 0 5px; color:var(--plum); font:600 .68rem var(--font-body); letter-spacing:.16em; text-transform:uppercase; }
.notification-toolbar h2 { margin:0; font-family:var(--font-display); font-size:1.55rem; font-weight:500; }
.notification-toolbar-note { margin:0; color:var(--ink-soft); font-size:.8rem; }
.notification-tabs { display:flex; gap:9px; overflow-x:auto; padding:4px 0 18px; scrollbar-width:none; }
.notification-tabs::-webkit-scrollbar { display:none; }
.notification-tab { position:relative; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--white); color:var(--ink-soft); border-radius:12px; padding:10px 12px; white-space:nowrap; cursor:pointer; font:500 .79rem var(--font-body); transition:.2s ease; }
.notification-tab:hover { border-color:rgba(101,70,113,.32); color:var(--plum); transform:translateY(-1px); }
.notification-tab.active { background:var(--plum); border-color:var(--plum); color:var(--ivory); box-shadow:0 7px 20px rgba(101,70,113,.13); }
.notification-tab-icon { width:18px; height:18px; display:grid; place-items:center; }
.notification-tab-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.notification-tab-count { min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:#b83b50; color:#fff; font-size:.67rem; line-height:1; font-weight:700; }
.notification-tab.active .notification-tab-count { background:#fff; color:#9c3145; }
.notification-row { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) 10px; align-items:center; gap:15px; padding:17px 18px; margin-bottom:10px; border:1px solid var(--line); border-radius:15px; background:var(--white); color:var(--ink); text-decoration:none; overflow:hidden; transition:transform .2s ease, border-color .2s ease, background .25s ease, box-shadow .3s ease; }
.notification-row::after { content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:2px; border-radius:999px; background:transparent; opacity:0; box-shadow:none; transition:opacity .35s ease, box-shadow .35s ease; }
.notification-row.is-unread { background:linear-gradient(90deg, rgba(183,159,209,.12), rgba(255,255,255,.98)); border-color:rgba(101,70,113,.24); box-shadow:0 7px 25px rgba(101,70,113,.07); }
.notification-row.is-unread::after { opacity:1; background:var(--plum); box-shadow:0 0 13px rgba(101,70,113,.48), 0 -2px 12px rgba(183,159,209,.22); }
.notification-row.is-read { opacity:.84; }
.notification-row:hover { transform:translateY(-1px); border-color:rgba(101,70,113,.34); }
.notification-row:hover.is-read { opacity:1; }
.notification-avatar-wrap { position:relative; width:52px; height:52px; }
.notification-avatar { width:52px; height:52px; display:block; object-fit:cover; border-radius:50%; border:1px solid rgba(101,70,113,.16); background:var(--ivory); }
.notification-avatar-fallback { display:grid; place-items:center; color:var(--plum); font-family:var(--font-display); font-size:1.15rem; background:linear-gradient(145deg, rgba(183,159,209,.32), rgba(250,247,242,.95)); }
.notification-avatar-system { object-fit:cover; padding:2px; background:#100a16; border:1px solid rgba(190,151,255,.48); box-shadow:0 0 12px rgba(166,111,230,.16); }
.notification-type-icon { position:absolute; right:-5px; bottom:-4px; width:24px; height:24px; display:grid; place-items:center; border:2px solid var(--white); border-radius:50%; background:var(--plum); color:#fff; box-shadow:0 3px 9px rgba(0,0,0,.12); }
.notification-type-icon svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.notification-type-echoes { background:#a67b2e; }
.notification-type-likes { background:#a23e57; }
.notification-type-reviews { background:#8a6a24; }
.notification-type-collections { background:#665074; }
.notification-type-system { background:#4e5267; }
.notification-body { min-width:0; display:flex; flex-direction:column; gap:3px; }
.notification-topline { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; line-height:1.25; }
.notification-topline strong { color:var(--plum); font-size:.89rem; font-weight:700; }
.notification-display-name { color:var(--ink-soft); font-size:.73rem; }
.notification-message { color:var(--ink); font-size:.9rem; line-height:1.45; }
.notification-time { margin-top:2px; color:var(--ink-soft); font-size:.72rem; }
.notification-unread-mark { width:8px; height:8px; border-radius:50%; background:#b83b50; box-shadow:0 0 0 4px rgba(184,59,80,.09); }
.notification-empty { text-align:center; padding:76px 20px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg, rgba(183,159,209,.06), rgba(255,255,255,.8)); color:var(--ink-soft); }
.notification-empty-mark { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 13px; border-radius:50%; background:rgba(183,159,209,.14); color:var(--plum); }
.notification-empty-mark svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.notification-empty h3 { margin:0 0 7px; color:var(--ink); font-family:var(--font-display); font-size:1.35rem; font-weight:500; }
.notification-empty p { margin:0; }
@media (max-width:700px) {
  .notifications-hero { padding:38px 0 28px; }
  .notifications-head { align-items:flex-start; flex-direction:column; }
  .notifications-mark-all { align-self:flex-start; }
  .notification-toolbar { align-items:flex-start; flex-direction:column; gap:6px; }
  .notification-toolbar-note { font-size:.76rem; }
  .notification-row { grid-template-columns:45px minmax(0,1fr) 8px; gap:12px; padding:15px 13px; border-radius:13px; }
  .notification-avatar-wrap, .notification-avatar { width:45px; height:45px; }
  .notification-type-icon { width:21px; height:21px; right:-4px; bottom:-3px; }
  .notification-type-icon svg { width:11px; height:11px; }
  .notification-row::after { left:13px; right:13px; }
}

/* =========================================================
   Forgot password link
   ========================================================= */
.forgot-password-link {
  background: none;
  border: none;
  color: var(--plum);
  font-size: 0.85rem;
  text-align: right;
  padding: 0;
  margin-top: -8px;
}
.forgot-password-link:hover { text-decoration: underline; }

/* =========================================================
   Follow button
   ========================================================= */
.btn-outline.following {
  background: var(--plum);
  color: var(--ivory);
  border-color: var(--plum);
}

/* =========================================================
   Echo credits label
   ========================================================= */
.echo-credits {
  font-size: 0.8rem;
  color: var(--lilac-deep);
  margin-left: auto;
}

/* =========================================================
   Comments section (Reader page)
   ========================================================= */
.comments-section {
  max-width: 640px;
  margin: 56px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

#newCommentForm { margin-bottom: 28px; }
#newCommentForm textarea { margin-bottom: 10px; }

.comment-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--white);
}
.comment-row.comment-reply {
  background: transparent;
  border: none;
  border-left: 2px solid var(--line);
  border-radius: 0;
  margin-bottom: 8px;
}
.comment-author { font-weight: 600; font-size: 0.88rem; margin: 0 0 4px; color: var(--plum); }
.comment-text { font-size: 0.92rem; margin: 0 0 8px; white-space: pre-wrap; }
.comment-actions { display: flex; gap: 16px; }
.comment-like-btn, .comment-reply-btn {
  background: none;
  border: none;
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding: 0;
}
.comment-like-btn.liked { color: var(--error); }
.comment-reply-btn:hover, .comment-like-btn:hover { color: var(--plum); }
.comment-reply-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.comment-replies { margin-top: 12px; padding-left: 14px; }

.reader-body[data-reader-theme="dark"] .comment-row {
  background: #1F1723;
  border-color: rgba(237, 230, 240, 0.12);
}
.reader-body[data-reader-theme="dark"] .comment-text { color: #EDE6F0; }
.reader-body[data-reader-theme="dark"] .comments-section { border-top-color: rgba(237, 230, 240, 0.12); }

/* =========================================================
   Ratings & Reviews (Story Detail page)
   ========================================================= */
.rating-summary { margin-bottom: 28px; }
.rating-overall {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--plum);
  margin-bottom: 10px;
}
.rating-count { font-size: 0.9rem; color: var(--ink-soft); font-family: var(--font-body); }
.rating-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.review-form-box {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px;
  background: var(--white);
  margin-bottom: 32px;
}

.star-picker { margin-bottom: 14px; }
.star-picker-label { display: block; font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 4px; }
.star-row { display: flex; gap: 4px; }
.star-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--line);
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.star-btn.filled { color: var(--lilac-deep); }

#reviewTextInput { margin-bottom: 14px; }

.reviews-subheading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 16px;
}

.review-row {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.review-author { font-weight: 600; font-size: 0.9rem; margin: 0 0 6px; }
.verified-badge {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--lilac-deep);
  background: rgba(183, 159, 209, 0.12);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
}
.review-text { font-size: 0.9rem; color: var(--ink-soft); margin: 0; white-space: pre-wrap; }

/* =========================================================
   Report links
   ========================================================= */
.report-link-btn, .comment-report-btn {
  background: none;
  border: none;
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding: 0;
}
.report-link-btn:hover, .comment-report-btn:hover { color: var(--error); }

/* =========================================================
   Official verified tick
   ========================================================= */
.verified-tick {
  color: var(--verified);
  font-size: 0.85em;
}

/* =========================================================
   Admin overview sections
   ========================================================= */
.admin-section-heading {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 28px 0 12px;
}
.admin-section-heading:first-child { margin-top: 0; }

/* =========================================================
   Chapter formatting toolbar
   ========================================================= */
.format-toolbar {
  display: flex;
  gap: 6px;
  margin: 4px 0;
}
.format-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 4px;
  font-weight: 700;
  color: var(--ink-soft);
}
.format-btn:hover { border-color: var(--lilac-deep); color: var(--plum); }
.format-btn[data-wrap="*"] { font-style: italic; }
.format-btn[data-wrap="__"] { text-decoration: underline; }

/* =========================================================
   Admin report investigation content box
   ========================================================= */
.reported-content-box {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
  background: var(--ivory-deep);
}
.reported-content-box .btn { margin-top: 10px; }

/* =========================================================
   Theme picker (V14.0.1)
   ========================================================= */
.theme-picker-wrap {
  max-width: 480px;
  margin-bottom: 32px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}
.theme-picker-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 4px;
}
.theme-swatch-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.theme-swatch.active {
  border-color: var(--lilac-deep);
  color: var(--ink);
  font-weight: 600;
}
.theme-swatch-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  background: linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%);
  border: 1px solid var(--line);
}

/* =========================================================
   Text size picker (V14.0.3)
   ========================================================= */
.text-size-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 24px 0 4px;
}
.text-size-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.text-size-btn {
  width: 44px;
  height: 44px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 600;
}
.text-size-btn:nth-child(1) { font-size: 0.85rem; }
.text-size-btn:nth-child(2) { font-size: 1.1rem; }
.text-size-btn:nth-child(3) { font-size: 1.35rem; }
.text-size-btn.active {
  border-color: var(--lilac-deep);
  color: var(--plum);
  background: rgba(183, 159, 209, 0.1);
}

/* =========================================================
   V14.1 — Design system: spacing scale, horizontal scroll,
   Section Header, and Story Card variants
   ========================================================= */
:root {
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
}

/* Reusable Section Header: title + optional "See all" */
.gr-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.gr-section-header .section-heading { margin: 0; }
.gr-see-all {
  font-size: 0.85rem;
  color: var(--plum);
  font-weight: 600;
  white-space: nowrap;
}
.gr-see-all:hover { text-decoration: underline; }

/* Home story/author sections — wrapped horizontal-to-vertical grid.
   This is the canonical homepage card footprint; Create Story previews should
   use the same portrait story-cover ratio later. */
.gr-home-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 28px;
  align-items: start;
}
.gr-home-card-grid > * {
  min-width: 0;
}

/* Toggle between horizontal/vertical display */
.gr-display-toggle {
  display: inline-flex;
  gap: 4px;
  margin-left: 12px;
}
.gr-display-toggle button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 30px;
  height: 30px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gr-display-toggle button.active { border-color: var(--lilac-deep); color: var(--plum); background: rgba(183,159,209,0.1); }

/* ---- Canonical homepage story card ---- */
.gr-story-card-compact {
  width: min(100%, 176px);
  display: block;
}
.gr-story-card-compact .cover-md,
.gr-story-card-compact .cover-placeholder {
  width: 100%;
  aspect-ratio: 5 / 8;
  height: auto;
  object-fit: contain;
  object-position: center center;
  border-radius: 6px;
}
.gr-story-card-compact .gr-card-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  margin: 9px 0 2px;
  line-height: 1.25;
  color: var(--ink);
}
.gr-story-card-compact .gr-card-author {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.gr-card-genre-chip {
  display: inline-block;
  font-size: 0.68rem;
  color: var(--plum);
  background: rgba(183,159,209,0.14);
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.gr-card-stats {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.gr-card-stats span { display: inline-flex; align-items: center; gap: 3px; }

/* Featured, Trending and other homepage story sections intentionally share
   the same card footprint. */
.gr-featured-card {
  width: min(100%, 176px);
  display: block;
}
.gr-featured-card .cover-md,
.gr-featured-card .cover-placeholder {
  width: 100%;
  aspect-ratio: 5 / 8;
  height: auto;
  object-fit: contain;
  object-position: center center;
  border-radius: 6px;
}
.gr-featured-card .gr-card-title { font-size: 0.98rem; }


/* ---- Personalized greeting header ---- */
.greeting-hero { padding: 40px 0 8px; }
.greeting-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  margin: 0 0 4px;
}
.greeting-hero-sub { color: var(--ink-soft); margin: 0 0 20px; }
.greeting-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--input-bg, var(--white));
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 12px 18px;
  max-width: 480px;
}
.greeting-search input { border: none; background: none; flex: 1; font-size: 0.95rem; }
.greeting-search input:focus { outline: none; box-shadow: none; }

@media (max-width: 900px) {
  .gr-home-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
  }
  .gr-story-card-compact,
  .gr-featured-card { width: min(100%, 168px); }
}

@media (max-width: 520px) {
  .gr-home-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
  }
  .gr-story-card-compact,
  .gr-featured-card { width: 100%; }
}

/* =========================================================
   Author Card (reusable design-system component)
   ========================================================= */
.gr-author-card {
  width: 140px;
  text-align: center;
  display: block;
  color: var(--ink);
}
.avatar-md {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 10px;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
img.avatar-md { display: block; }
.gr-author-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  margin: 0 0 4px;
}
.gr-author-bio {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 760px) {
  .gr-author-card { width: 110px; }
  .avatar-md { width: 60px; height: 60px; }
}

/* New Voices remains an author-card section; the grid controls its layout,
   while the author card keeps its own compact visual identity. */
.gr-home-author-grid .gr-author-card {
  width: 100%;
  max-width: 176px;
  justify-self: start;
}

@media (max-width: 520px) {
  .gr-home-author-grid .gr-author-card { max-width: 150px; }
}

/* =========================================================
   Admin — Featured for You controls
   ========================================================= */
.admin-section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.admin-featured-count {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--plum);
  background: var(--ivory-deep);
  font-size: 0.84rem;
}
.admin-featured-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 24px;
}
.admin-featured-item {
  display: grid;
  grid-template-columns: 28px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.admin-featured-number {
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-align: center;
}
.admin-featured-cover {
  width: 48px;
  aspect-ratio: 5 / 8;
  object-fit: contain;
  object-position: center;
  background: var(--ivory-deep);
  border-radius: 3px;
  display: block;
}
.admin-featured-cover-fallback {
  display: grid;
  place-items: center;
  color: var(--plum);
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.admin-featured-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.admin-featured-info strong {
  overflow-wrap: anywhere;
}
.admin-featured-info span {
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-transform: capitalize;
}
.admin-featured-add {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.admin-featured-add > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}
.admin-featured-add .field-row select {
  flex: 1;
  min-width: 0;
}
.admin-featured-add button:disabled,
.admin-featured-add select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
@media (max-width: 650px) {
  .admin-section-heading-row { gap: 12px; }
  .admin-featured-item {
    grid-template-columns: 24px 42px minmax(0, 1fr);
  }
  .admin-featured-cover { width: 42px; }
  .admin-featured-item .admin-remove-featured-btn {
    grid-column: 3;
    justify-self: start;
    padding: 8px 14px;
  }
}

/* =========================================================
   GidiReads Home Redesign 01
   Scoped to .home-page so the rest of the product can be
   redesigned separately without disturbing existing pages.
   ========================================================= */
.home-page {
  --home-bg: #100b14;
  --home-surface: #18111e;
  --home-surface-2: #21182a;
  --home-surface-3: #2a2034;
  --home-text: #f4eff8;
  --home-muted: #b9adbf;
  --home-faint: #82758a;
  --home-lilac: #b99bda;
  --home-lilac-bright: #d4bdf0;
  --home-gold: #c9a96a;
  --home-line: rgba(229, 216, 240, .11);
  --home-max: 1240px;
  background: var(--home-bg);
  color: var(--home-text);
}
.home-page .site-nav {
  height: 88px;
  background: var(--nav-surface, var(--nav-bg, var(--ink)));
  border-bottom: 1px solid var(--line-color);
  backdrop-filter: none;
}
body.has-site-nav.home-page {
  padding-top: 88px;
}
.home-page .nav-inner { height: 88px; }
.home-page .brand-mark { height: 54px; }
.home-page .nav-links { display: flex; gap: 34px; margin-left: 0; margin-right: 0; }
.home-page .nav-links a { color: var(--home-muted); font-size: 0.95rem; position: relative; padding: 0; }
.home-page .nav-links a:hover, .home-page .nav-links a.active { color: var(--home-text); }
.home-page .nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; border-radius: 0; background: var(--home-lilac); transform: scaleX(1); }
.home-page .nav-actions { gap: 14px; }
.home-page .home-nav-search { display: inline-flex; align-items: center; gap: 8px; color: var(--home-muted); padding: 8px 12px; border: 1px solid var(--home-line); border-radius: 999px; }
.home-page .home-nav-search:hover { color: var(--home-text); border-color: rgba(185,155,218,.4); }
.home-page .top-icon-btn, .home-page .top-profile-btn { color: var(--nav-text, var(--home-muted)); position: relative; }
.home-page .top-icon-btn:hover, .home-page .top-profile-btn:hover { color: var(--nav-accent, var(--home-lilac-bright)); }
.home-page .site-nav .btn-ghost { color: var(--nav-text, var(--home-text)); }
.home-page .site-nav .btn-ghost:hover { color: var(--nav-accent, var(--home-lilac-bright)); }
.home-nav-badge { position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%; background:#c65a5a; }

.home-page .home-main { overflow: hidden; }
.home-page .section-inner { max-width: var(--home-max); padding-left: 28px; padding-right: 28px; }
.home-hero { position: relative; min-height: 650px; display: flex; align-items: center; overflow: hidden; background: radial-gradient(circle at 76% 35%, rgba(116, 72, 151, .25), transparent 32%), linear-gradient(135deg, #100b14 0%, #140d19 48%, #0e0a12 100%); }
.home-hero::before { content:''; position:absolute; width:620px; height:620px; right:-210px; top:-210px; border-radius:50%; border:1px solid rgba(185,155,218,.1); box-shadow:0 0 0 90px rgba(185,155,218,.025),0 0 0 180px rgba(185,155,218,.018); }
.home-hero-inner { width:100%; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:60px; align-items:center; padding-top:72px; padding-bottom:84px; }
.home-hero-copy { position:relative; z-index:2; }
.home-kicker, .home-section-kicker { margin:0 0 10px; color:var(--home-lilac); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.home-hero h1 { margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(3.2rem,6.5vw,6.3rem); line-height:.96; letter-spacing:-.045em; color:var(--home-text); max-width:760px; }
.home-hero h1 em { color:var(--home-lilac-bright); font-style:italic; }
.home-hero-sub { color:var(--home-muted); font-size:1.05rem; max-width:48ch; margin:24px 0 28px; }
.home-search { width:min(100%,600px); display:flex; align-items:center; gap:10px; background:#f5f0f7; color:#21182a; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:6px 7px 6px 17px; box-shadow:0 18px 50px rgba(0,0,0,.2); }
.home-search svg { flex:none; opacity:.62; }
.home-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#21182a; font:inherit; font-size:.92rem; }
.home-search input::placeholder { color:#7d7183; }
.home-search button { border:0; border-radius:9px; padding:11px 18px; background:#21182a; color:#fff; font-weight:600; }
.home-search button:hover { background:#3a2945; }
.home-hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.home-primary-btn, .home-secondary-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:9px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.home-primary-btn { background:var(--home-lilac); color:#160e1b; border:1px solid var(--home-lilac); }
.home-primary-btn:hover { background:var(--home-lilac-bright); }
.home-secondary-btn { background:transparent; color:var(--home-text); border:1px solid var(--home-line); }
.home-secondary-btn:hover { border-color:rgba(212,189,240,.4); background:rgba(255,255,255,.035); }
.home-hero-art { position:relative; min-height:520px; display:flex; align-items:center; justify-content:center; }
.home-art-orbit { position:absolute; border:1px solid rgba(185,155,218,.12); border-radius:50%; pointer-events:none; }
.home-art-orbit-one { width:430px; height:430px; transform:rotate(-18deg) skewX(-4deg); }
.home-art-orbit-two { width:310px; height:450px; transform:rotate(25deg) skewX(-4deg); }
.home-art-note { position:absolute; top:34px; right:4px; width:205px; padding:15px 16px; border:1px solid var(--home-line); background:rgba(31,22,39,.76); backdrop-filter:blur(14px); border-radius:10px; transform:rotate(4deg); z-index:4; box-shadow:0 18px 40px rgba(0,0,0,.25); }
.home-art-note-label { display:block; font-size:.62rem; color:var(--home-gold); letter-spacing:.14em; font-weight:700; margin-bottom:6px; }
.home-art-note strong { display:block; font-family:var(--font-display); font-size:1.1rem; line-height:1.15; color:var(--home-text); }
.home-story-stack { position:relative; width:300px; height:390px; transform:rotate(-5deg); }
.home-stack-card { position:absolute; display:block; overflow:hidden; border-radius:8px; background:var(--home-surface-3); border:1px solid rgba(255,255,255,.12); box-shadow:0 28px 70px rgba(0,0,0,.42); text-decoration:none; }
.home-stack-card-back { width:230px; height:310px; right:0; top:25px; transform:rotate(13deg); opacity:.72; }
.home-stack-card-mid { width:250px; height:345px; left:5px; top:4px; transform:rotate(6deg); opacity:.9; }
.home-stack-card-front { width:265px; height:370px; left:18px; top:8px; z-index:3; transform:rotate(-1deg); }
.home-stack-cover { width:100%; height:100%; object-fit:cover; display:block; }
.home-stack-card span { position:absolute; left:12px; right:12px; bottom:10px; padding:8px 10px; border-radius:6px; background:rgba(11,8,14,.72); color:#fff; font-size:.72rem; backdrop-filter:blur(7px); }
.home-stack-placeholder { height:100%; display:grid; place-items:center; color:var(--home-faint); font-size:.8rem; }

.home-section { padding:74px 0; border-top:1px solid var(--home-line); background:var(--home-bg); }
.home-soft-section { background:#130e18; }
.home-continue { background:#0d0911; }
.home-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.home-section-head h2 { margin:0; color:var(--home-text); font-family:var(--font-display); font-size:clamp(1.75rem,3vw,2.35rem); font-weight:500; line-height:1.05; }
.home-section-head > a { color:var(--home-lilac); font-size:.82rem; font-weight:600; white-space:nowrap; }
.home-section-head > a:hover { color:var(--home-lilac-bright); }
.home-section-head > a span { display:inline-block; transition:transform .2s ease; }
.home-section-head > a:hover span { transform:translateX(3px); }
.home-story-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; }
.home-story-card { min-width:0; color:var(--home-text); display:block; transition:transform .22s ease; }
.home-story-card:hover { transform:translateY(-4px); }
.home-cover-wrap { position:relative; aspect-ratio:5/7.5; overflow:hidden; border-radius:8px; background:var(--home-surface-2); border:1px solid rgba(255,255,255,.08); }
.home-cover { width:100%; height:100%; object-fit:cover; display:block; }
.home-cover-wrap .cover-placeholder { width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(145deg,#33263e,#17101e); color:var(--home-lilac); font-family:var(--font-display); font-size:2rem; }
.home-card-badge { position:absolute; left:9px; top:9px; z-index:2; padding:4px 7px; border-radius:5px; background:rgba(13,9,17,.78); border:1px solid rgba(255,255,255,.12); color:var(--home-lilac-bright); font-size:.6rem; letter-spacing:.04em; font-weight:700; }
.home-story-card h3 { margin:11px 0 3px; color:var(--home-text); font-family:var(--font-display); font-size:1rem; font-weight:500; line-height:1.18; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.home-story-card > p { margin:0; color:var(--home-muted); font-size:.73rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-card-genre { display:inline-block; margin-top:7px; color:var(--home-lilac); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; }
.home-card-stats { display:flex; gap:8px; margin-top:7px; color:var(--home-faint); font-size:.62rem; flex-wrap:wrap; }
.home-progress { height:3px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; margin-top:8px; }
.home-progress span { display:block; height:100%; background:var(--home-lilac); border-radius:99px; }
.home-progress-text { display:block; margin-top:7px; color:var(--home-muted); font-size:.62rem; }
.home-empty, .home-loading-card { grid-column:1/-1; padding:34px; border:1px solid var(--home-line); border-radius:10px; background:var(--home-surface); color:var(--home-muted); font-size:.88rem; }

.home-featured { background:#100b14; }
.home-featured-grid { display:grid; gap:20px; }
.home-featured-card { display:grid; grid-template-columns:minmax(190px,280px) 1fr; min-height:340px; background:linear-gradient(125deg,#1a1221,#22172c); border:1px solid var(--home-line); border-radius:12px; overflow:hidden; }
.home-featured-cover { display:block; min-height:340px; background:#24182d; }
.home-featured-cover-img { width:100%; height:100%; object-fit:cover; display:block; }
.home-featured-copy { padding:36px 38px; display:flex; flex-direction:column; align-items:flex-start; }
.home-featured-copy .home-card-badge { position:static; display:inline-flex; margin-bottom:18px; }
.home-featured-genre { margin:0 0 8px; color:var(--home-lilac); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; }
.home-featured-copy h3 { margin:0; font-family:var(--font-display); font-size:clamp(2rem,4vw,3.1rem); line-height:1; font-weight:500; }
.home-featured-copy h3 a { color:var(--home-text); }
.home-featured-author { color:var(--home-muted); margin:8px 0 16px; font-size:.82rem; }
.home-featured-description { color:var(--home-muted); max-width:58ch; font-size:.9rem; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.home-featured-meta { display:flex; gap:16px; color:var(--home-faint); font-size:.7rem; margin-top:auto; padding-top:20px; }
.home-featured-link { margin-top:15px; color:var(--home-lilac-bright); font-size:.8rem; font-weight:600; }

.home-taxonomy-section { background:#160f1d; }
.home-taxonomy-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.home-taxonomy-card { min-height:82px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:16px; background:var(--home-surface); border:1px solid var(--home-line); border-radius:9px; color:var(--home-text); transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.home-taxonomy-card:hover { background:var(--home-surface-2); border-color:rgba(185,155,218,.32); transform:translateY(-2px); }
.home-taxonomy-card span { font-family:var(--font-display); font-size:1.05rem; }
.home-taxonomy-card b { color:var(--home-lilac); font-size:.9rem; }
.home-trope-grid { display:flex; flex-wrap:wrap; gap:9px; }
.home-trope-pill { display:inline-flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid var(--home-line); border-radius:999px; background:var(--home-surface); color:var(--home-text); }
.home-trope-pill:hover { border-color:rgba(185,155,218,.35); }
.home-trope-pill small { color:var(--home-faint); font-size:.62rem; }

.home-discovery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.home-discovery-card { min-height:190px; padding:22px; border-radius:10px; border:1px solid var(--home-line); background:var(--home-surface); display:flex; flex-direction:column; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.home-discovery-card:hover { transform:translateY(-3px); background:var(--home-surface-2); border-color:rgba(185,155,218,.3); }
.home-discovery-card span { color:var(--home-lilac); font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.home-discovery-card strong { margin-top:auto; color:var(--home-text); font-family:var(--font-display); font-size:1.35rem; line-height:1.05; font-weight:500; }
.home-discovery-card small { color:var(--home-muted); font-size:.72rem; line-height:1.45; margin-top:9px; }
.home-discovery-card b { margin-top:14px; color:var(--home-lilac-bright); font-size:.7rem; }

.home-echo-section { padding:78px 0; background:#0c080f; border-top:1px solid var(--home-line); }
.home-echo-inner { display:grid; grid-template-columns:100px 1fr; gap:26px; align-items:start; }
.home-echo-mark { width:72px; height:72px; display:grid; place-items:center; border:1px solid rgba(201,169,106,.35); border-radius:50%; color:var(--home-gold); font-size:1.4rem; }
.home-echo-inner h2 { margin:0 0 12px; font-family:var(--font-display); font-size:clamp(2rem,4vw,3.1rem); font-weight:500; }
.home-echo-inner p:not(.home-section-kicker) { max-width:62ch; color:var(--home-muted); margin:0 0 16px; font-size:.92rem; }
.home-echo-inner a { color:var(--home-gold); font-size:.8rem; font-weight:600; }

.home-author-cta { padding:68px 0; border-top:1px solid var(--home-line); background:#17101e; }
.home-author-cta-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.home-author-cta h2 { margin:0; font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:500; }
.home-author-cta p:not(.home-section-kicker) { color:var(--home-muted); margin:10px 0 0; }
.home-footer { background:#0a070c !important; color:var(--home-text); border-top:1px solid var(--home-line); }
.home-footer .footer-tagline, .home-footer .footer-col a, .home-footer .footer-copy { color:var(--home-muted); }
.home-footer .footer-col h3 { color:var(--home-text); }
.home-footer .footer-col a:hover { color:var(--home-lilac-bright); }
.home-footer .brand-mark.small { filter:drop-shadow(0 2px 10px rgba(185,155,218,.25)); }

.home-page .write-sheet { background:#17101e; color:var(--home-text); }
.home-page .write-sheet-option { background:var(--home-surface); color:var(--home-text); border-color:var(--home-line); }
.home-page .write-sheet-title { color:var(--home-text); }
.home-page .write-sheet-option:hover { border-color:rgba(185,155,218,.35); color:var(--home-lilac-bright); }
.home-page .modal { background:#18111e; color:var(--home-text); }
.home-page .modal-title, .home-page .field span { color:var(--home-text); }
.home-page .modal-sub, .home-page .modal-switch { color:var(--home-muted); }
.home-page .modal input { background:#0f0a13; color:var(--home-text); border-color:var(--home-line); }

@media (max-width: 1000px) {
  .home-page .nav-links { display:none; }
  .home-hero-inner { grid-template-columns:1fr .75fr; gap:30px; }
  .home-story-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .home-taxonomy-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-discovery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .home-page .site-nav { height:88px; }
  body.has-site-nav.home-page { padding-top:88px; }
  .home-page .nav-inner { height:88px; padding:0 18px; }
  .home-page .brand-mark { height:54px; }
  .home-page .home-nav-search span, .home-page .nav-actions .btn-ghost { display:none; }
  .home-page .home-nav-search { border:0; padding:7px; }
  .home-hero { min-height:auto; }
  .home-hero-inner { grid-template-columns:1fr; padding-top:54px; padding-bottom:52px; }
  .home-hero h1 { font-size:clamp(3rem,15vw,4.7rem); }
  .home-hero-sub { font-size:.94rem; }
  .home-hero-art { min-height:360px; margin-top:-10px; }
  .home-story-stack { transform:scale(.82) rotate(-5deg); }
  .home-art-note { right:8%; top:8px; transform:rotate(4deg) scale(.9); }
  .home-section { padding:58px 0; }
  .home-section-head { align-items:flex-end; margin-bottom:20px; }
  .home-section-head h2 { font-size:1.85rem; }
  .home-story-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 13px; }
  .home-featured-card { grid-template-columns:140px 1fr; min-height:245px; }
  .home-featured-cover { min-height:245px; }
  .home-featured-copy { padding:20px; }
  .home-featured-copy h3 { font-size:1.55rem; }
  .home-featured-description { -webkit-line-clamp:2; font-size:.78rem; }
  .home-featured-meta { margin-top:10px; padding-top:8px; }
  .home-taxonomy-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-taxonomy-card { min-height:70px; }
  .home-discovery-grid { grid-template-columns:1fr; }
  .home-echo-inner { grid-template-columns:1fr; }
  .home-author-cta-inner { flex-direction:column; align-items:flex-start; }
  .home-footer { padding-bottom:90px; }
}
@media (max-width: 480px) {
  .home-search { padding-left:13px; }
  .home-search button { padding:10px 13px; }
  .home-story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 14px; }
  .home-featured-card { grid-template-columns:112px 1fr; }
  .home-featured-cover { min-height:210px; }
  .home-featured-copy { padding:16px; }
  .home-featured-copy h3 { font-size:1.35rem; }
  .home-featured-author { font-size:.7rem; }
  .home-featured-description { display:none; }
  .home-featured-meta { font-size:.6rem; gap:9px; }
  .home-taxonomy-grid { gap:8px; }
  .home-taxonomy-card { padding:13px; }
  .home-taxonomy-card span { font-size:.94rem; }
  .home-art-note { width:180px; }
}

/* Homepage polish: auth visibility, hero atmosphere, Echo identity, and theme-ready tokens. */
.home-page .site-nav { z-index: 50; }
.home-page .site-nav .btn-ghost {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(212,189,240,.28);
  border-radius: 999px;
  background: rgba(185,155,218,.08);
  color: var(--home-text);
  box-shadow: 0 0 22px rgba(185,155,218,.05);
}
.home-page .site-nav .btn-ghost:hover { border-color: rgba(212,189,240,.5); background: rgba(185,155,218,.14); }
.home-page .home-hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 42%, rgba(126,82,163,.25), transparent 30%),
    radial-gradient(circle at 93% 90%, rgba(201,169,106,.07), transparent 25%),
    linear-gradient(135deg,#100b14 0%,#150d1b 48%,#0d0911 100%);
}
.home-page .home-hero::after {
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:34%;
  background:linear-gradient(to top,rgba(7,5,9,.48),transparent);
  pointer-events:none;
  z-index:-1;
}
.home-page .home-hero-art { overflow:visible; }
.home-page .home-art-orbit { opacity:.32; border-color:rgba(185,155,218,.16); }
.home-page .home-art-orbit-one { width:455px; height:455px; }
.home-page .home-art-orbit-two { width:340px; height:470px; }
.home-page .home-story-stack { transform:rotate(-4deg); filter:drop-shadow(0 28px 55px rgba(0,0,0,.48)); }
.home-page .home-stack-card-front {
  width:270px; height:378px; left:15px; top:7px; transform:rotate(-1deg);
  border-color:rgba(212,189,240,.25);
  box-shadow:0 30px 80px rgba(0,0,0,.48), 0 0 0 1px rgba(185,155,218,.06), 0 0 34px rgba(126,82,163,.14);
}
.home-page .home-stack-card-front::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 25%,transparent 72%,rgba(185,155,218,.08));
  mix-blend-mode:screen;
}
.home-page .home-stack-card span { background:rgba(11,8,14,.78); border:1px solid rgba(255,255,255,.08); }
.home-page .home-hero-petals { position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.home-page .home-petal {
  position:absolute; width:10px; height:6px; border-radius:80% 20% 80% 20%;
  background:linear-gradient(135deg,#b79ad0,#704b83); opacity:.62;
  box-shadow:0 0 10px rgba(185,155,218,.16);
  animation:homePetalFloat 9s ease-in-out infinite;
}
.home-page .petal-1{left:9%;top:14%;transform:rotate(18deg);animation-delay:-1s}.home-page .petal-2{left:22%;top:72%;transform:rotate(70deg);animation-delay:-6s}.home-page .petal-3{left:61%;top:10%;transform:rotate(110deg);animation-delay:-4s}.home-page .petal-4{left:82%;top:28%;transform:rotate(35deg);animation-delay:-7s}.home-page .petal-5{left:88%;top:70%;transform:rotate(140deg);animation-delay:-2s}.home-page .petal-6{left:51%;top:82%;transform:rotate(210deg);animation-delay:-5s}.home-page .petal-7{left:71%;top:54%;transform:rotate(245deg);animation-delay:-8s}.home-page .petal-8{left:35%;top:26%;transform:rotate(300deg);animation-delay:-3s}
@keyframes homePetalFloat { 0%,100%{translate:0 0;rotate:0deg} 50%{translate:14px 26px;rotate:18deg} }
.home-page .home-search {
  background:rgba(245,240,247,.97);
  box-shadow:0 18px 50px rgba(0,0,0,.24),0 0 0 4px rgba(185,155,218,.045);
}
.home-page .home-search input::placeholder { color:#6f6476; }
.home-page .home-search:focus-within { box-shadow:0 18px 50px rgba(0,0,0,.24),0 0 0 3px rgba(185,155,218,.24); }
.home-page .home-card-stats span:first-child { color:var(--home-lilac-bright); text-shadow:0 0 10px rgba(185,155,218,.34); }
.home-page .home-card-stats span:last-child { color:var(--home-gold); }
.home-page .home-featured-meta span:first-child { color:var(--home-lilac-bright); text-shadow:0 0 10px rgba(185,155,218,.28); }
.home-page .home-featured-meta span:last-child { color:var(--home-gold); }
.home-page .home-echo-mark { border-color:rgba(201,169,106,.42); background:rgba(201,169,106,.045); box-shadow:0 0 28px rgba(201,169,106,.09); }
.home-page .home-echo-mark svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.5; }
.home-page .home-footer .footer-origin { margin:9px 0 0; color:var(--home-faint); font-size:.72rem; line-height:1.5; }
.home-page .home-footer .footer-bottom { max-width:var(--home-max); margin:0 auto; padding:18px 28px 26px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--home-line); color:var(--home-faint); font-size:.68rem; }
.home-page .home-footer .footer-bottom p { margin:0; }
.home-page .home-footer .footer-bottom span { white-space:nowrap; }

@media (max-width:760px){
  .home-page .nav-actions { gap:5px; }
  .home-page .nav-actions .btn-ghost { display:inline-flex; min-height:34px; padding:0 10px; font-size:.7rem; }
  .home-page .top-profile-btn { display:inline-flex; }
  .home-page .home-nav-search span { display:none; }
  .home-page .home-nav-search { border:0; padding:7px; }
  .home-page .home-hero-petals { opacity:.8; }
  .home-page .home-stack-card-front { width:245px; height:342px; left:25px; }
  .home-page .home-footer .footer-bottom { padding-left:18px; padding-right:18px; flex-direction:column; gap:7px; }
}

/* Explore taxonomy browser: one discovery family at a time, not a taxonomy wall. */
.taxonomy-category-nav {
  display:flex; gap:8px; overflow-x:auto; padding:5px; margin-bottom:24px;
  scrollbar-width:none; border:1px solid rgba(229,216,240,.1); border-radius:12px;
  background:rgba(24,17,30,.72);
}
.taxonomy-category-nav::-webkit-scrollbar{display:none}
.taxonomy-category-btn {
  flex:0 0 auto; border:1px solid transparent; background:transparent; color:#a99bb0;
  padding:9px 13px; border-radius:8px; font:600 .76rem Inter,sans-serif; cursor:pointer; white-space:nowrap;
}
.taxonomy-category-btn:hover { color:#f4eff8; background:rgba(255,255,255,.035); }
.taxonomy-category-btn.active { color:#f4eff8; background:rgba(185,155,218,.12); border-color:rgba(185,155,218,.25); box-shadow:0 0 18px rgba(185,155,218,.05); }
.taxonomy-browser-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:15px; }
.taxonomy-browser-heading > span { color:#82758a; font-size:.76rem; text-align:right; max-width:35ch; }
.taxonomy-browser-kicker { margin:0 0 5px; color:#b99bda; font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.taxonomy-browser-group { padding:22px 0 4px; border-top:1px solid rgba(229,216,240,.09); }
.taxonomy-browser-title { color:#f4eff8; font-size:1.7rem; margin:0; }
.taxonomy-browser-group[hidden] { display:none; }
.taxonomy-browser .taxonomy-list { gap:8px; max-height:230px; overflow:auto; padding-right:5px; }
.taxonomy-browser .taxonomy-chip { border-color:rgba(229,216,240,.11); background:#18111e; color:#d8cfe0; padding:9px 12px; }
.taxonomy-browser .taxonomy-chip:hover { background:#21182a; border-color:rgba(185,155,218,.32); color:#f4eff8; }
.taxonomy-browser .taxonomy-chip.primary,.taxonomy-browser .taxonomy-chip.active { background:rgba(185,155,218,.13); border-color:rgba(185,155,218,.34); color:#d4bdf0; }
.taxonomy-browser .genre-list { display:flex; flex-wrap:wrap; gap:8px; max-height:230px; overflow:auto; padding-right:5px; }
.taxonomy-browser .genre-chip { border:1px solid rgba(229,216,240,.11); background:#18111e; color:#d8cfe0; border-radius:999px; padding:9px 12px; font-size:.78rem; cursor:pointer; }
.taxonomy-browser .genre-chip:hover,.taxonomy-browser .genre-chip.active { background:rgba(185,155,218,.13); border-color:rgba(185,155,218,.34); color:#d4bdf0; }
@media (max-width:760px){
  .taxonomy-category-nav { margin-left:-2px; margin-right:-2px; }
  .taxonomy-browser-heading { align-items:flex-start; flex-direction:column; gap:5px; }
  .taxonomy-browser-heading > span { text-align:left; }
  .taxonomy-browser-title { font-size:1.5rem; }
  .taxonomy-browser .taxonomy-list,.taxonomy-browser .genre-list { max-height:260px; }
}

/* Homepage visual refinement: galaxy hero, pink plum blossoms, and profile identity. */
.home-page .home-profile-avatar {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(212,189,240,.3);
  background: rgba(185,155,218,.09);
  color: var(--home-text);
  text-decoration: none;
  box-shadow: 0 0 18px rgba(185,155,218,.06);
}
.home-page .home-profile-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.home-page .home-profile-fallback { width:100%; height:100%; display:grid; place-items:center; font:700 .8rem Inter,sans-serif; letter-spacing:.03em; color:var(--home-text); background:linear-gradient(145deg,rgba(126,82,163,.45),rgba(47,27,55,.9)); }
.home-page .home-hero { background:
  radial-gradient(ellipse at 73% 44%, rgba(126,82,163,.34), transparent 29%),
  radial-gradient(ellipse at 83% 56%, rgba(70,34,111,.34), transparent 38%),
  radial-gradient(circle at 66% 25%, rgba(239,168,205,.08), transparent 16%),
  linear-gradient(135deg,#0c0711 0%,#160b20 45%,#09070e 100%); }
.home-page .home-galaxy {
  position:absolute; width:650px; height:650px; right:-45px; top:50%; transform:translateY(-50%);
  border-radius:50%; pointer-events:none; z-index:0; opacity:.92;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 2%, transparent 9%),
    radial-gradient(circle at 36% 33%, rgba(242,181,221,.18) 0 1.2%, transparent 3%),
    radial-gradient(circle at 68% 25%, rgba(181,146,236,.22) 0 1%, transparent 2.8%),
    radial-gradient(circle at 75% 64%, rgba(220,169,255,.18) 0 1%, transparent 3%),
    radial-gradient(circle at 26% 68%, rgba(160,111,220,.16) 0 1.2%, transparent 3%),
    conic-gradient(from 18deg at 50% 50%, transparent 0 12%, rgba(191,139,231,.11) 20%, transparent 31%, rgba(241,164,210,.10) 44%, transparent 56%, rgba(117,81,184,.13) 69%, transparent 81%, rgba(220,163,229,.08) 91%, transparent 100%),
    radial-gradient(ellipse at 50% 50%, rgba(113,68,160,.36), rgba(31,13,44,.22) 42%, transparent 72%);
  filter:blur(.1px);
  box-shadow:0 0 100px rgba(105,54,145,.28), inset 0 0 100px rgba(0,0,0,.32);
}
.home-page .home-galaxy::before {
  content:''; position:absolute; inset:8%; border-radius:50%;
  background:repeating-radial-gradient(circle at 52% 48%, transparent 0 12px, rgba(238,181,226,.025) 13px 14px, transparent 15px 28px);
  transform:rotate(-16deg) scaleX(1.15); filter:blur(1px);
}
.home-page .home-galaxy::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 19% 40%, #f7b7d7 0 1px, transparent 2px),
    radial-gradient(circle at 28% 20%, #cda8ef 0 1px, transparent 2px),
    radial-gradient(circle at 45% 14%, #f6d3ea 0 1px, transparent 2px),
    radial-gradient(circle at 61% 18%, #c6a1ed 0 1px, transparent 2px),
    radial-gradient(circle at 80% 37%, #f3b4d6 0 1px, transparent 2px),
    radial-gradient(circle at 72% 76%, #d5b4ef 0 1px, transparent 2px),
    radial-gradient(circle at 35% 78%, #f0a9d0 0 1px, transparent 2px),
    radial-gradient(circle at 52% 66%, #e9c6f0 0 1px, transparent 2px);
  opacity:.75;
}
.home-page .home-art-orbit { display:none; }
.home-page .home-hero-art { z-index:1; }
.home-page .home-story-stack { z-index:3; position:relative; transform:rotate(-3deg); }
.home-page .home-petal { background:linear-gradient(135deg,#ffd0e5,#ee8fbd 48%,#c95b93); opacity:.9; box-shadow:0 0 12px rgba(239,143,189,.28); }
.home-page .petal-1{left:5%;top:11%}.home-page .petal-2{left:18%;top:75%}.home-page .petal-3{left:61%;top:8%}.home-page .petal-4{left:86%;top:24%}.home-page .petal-5{left:91%;top:71%}.home-page .petal-6{left:49%;top:86%}.home-page .petal-7{left:73%;top:55%}.home-page .petal-8{left:32%;top:21%}
.home-page .home-card-stats .home-echo-stat,
.home-page .home-featured-meta .home-echo-stat { display:inline-flex; align-items:center; gap:5px; color:var(--home-gold); }
.home-page .home-echo-stat svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-linejoin:round; stroke-linecap:round; }
.home-page .home-featured-meta .home-echo-stat svg { width:15px; height:15px; }
@media (max-width:760px){
  .home-page .home-galaxy { width:480px; height:480px; right:-100px; top:62%; }
  .home-page .home-profile-avatar { width:32px; height:32px; }
}

/* =========================================================
   Explore redesign 08 — cinematic discovery + original character layer
   ========================================================= */
.explore-page{background:#0b0710;color:#f3edf7;--ex-bg:#0b0710;--ex-surface:#15101b;--ex-surface2:#1c1425;--ex-line:rgba(230,214,241,.1);--ex-lilac:#c6a9e5;--ex-soft:#9d8ca8;--ex-gold:#d3b778;--ex-pink:#f09bc5}
.explore-page .site-nav{background:var(--nav-surface) !important;border-bottom:1px solid var(--line-color) !important;backdrop-filter:none}
.explore-main-links{display:flex;gap:8px;margin-left:24px}.explore-main-links a{padding:9px 12px;color:#9e91a7;text-decoration:none;font-size:.78rem;border-radius:8px}.explore-main-links a:hover,.explore-main-links a.active{color:#f5eff8;background:rgba(198,169,229,.1)}
.explore-nav-icon{color:#bbaac7;text-decoration:none;padding:6px}.explore-profile{width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:50%;overflow:hidden;border:1px solid rgba(198,169,229,.28);background:#1b1323;color:#e9dcf4;text-decoration:none}.explore-profile img{width:100%;height:100%;object-fit:cover}.explore-profile-fallback{font-weight:700;font-size:.8rem}
.site-nav.explore-nav{height:88px;background:var(--nav-surface, var(--nav-bg, var(--ink)));backdrop-filter:none}
.explore-hero{position:relative;min-height:620px;overflow:hidden;border-bottom:1px solid var(--ex-line);background:radial-gradient(circle at 76% 48%,rgba(101,62,145,.32),transparent 25%),radial-gradient(circle at 45% 70%,rgba(205,83,143,.08),transparent 30%),#0b0710}.explore-hero-inner{position:relative;z-index:3;min-height:620px;display:flex;align-items:center}.explore-hero-copy{width:min(690px,62%);padding:70px 0 85px}.explore-kicker,.explore-section-kicker{margin:0 0 10px;color:var(--ex-lilac);font-size:.64rem;font-weight:700;letter-spacing:.18em}.explore-hero-copy h1{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(2.6rem,5.4vw,5rem);line-height:.98;letter-spacing:-.035em;max-width:700px}.explore-hero-copy h1 em{color:#f0b4d4;font-style:italic}.explore-hero-copy>p{max-width:530px;margin:22px 0 28px;color:#a99bad;line-height:1.7;font-size:.94rem}.explore-search{display:flex;align-items:center;gap:12px;width:min(600px,100%);padding:7px 8px 7px 17px;border:1px solid rgba(214,190,234,.18);background:rgba(18,12,25,.8);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.25)}.explore-search svg{color:#a98bbf;flex:0 0 auto}.explore-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#f4eff7;font:500 .88rem Inter,sans-serif}.explore-search input::placeholder{color:#766a7d}.explore-search button{border:0;background:#c6a9e5;color:#140c1b;border-radius:8px;padding:11px 17px;font:700 .76rem Inter,sans-serif;cursor:pointer}.explore-search button:hover{background:#dec8f2}.explore-hero-caption{position:absolute;left:0;bottom:25px;display:flex;gap:14px;color:#5f5367;font-size:.6rem;letter-spacing:.15em}.explore-hero-caption span+span{padding-left:14px;border-left:1px solid #30243a;letter-spacing:.04em;text-transform:none}
.explore-hero-stars{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(237,213,255,.8) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(240,155,197,.55) 0 1px,transparent 1.5px);background-size:120px 120px,190px 190px;background-position:20px 30px,80px 90px;opacity:.22;animation:exploreStars 18s linear infinite}.explore-hero-glow{position:absolute;right:16%;top:13%;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(180,132,231,.25),transparent 65%);filter:blur(10px);animation:explorePulse 6s ease-in-out infinite}.explore-character-scene{position:absolute;z-index:2;right:7%;bottom:-8px;width:min(520px,44vw);height:590px}.explore-character-aura{position:absolute;inset:80px 70px 40px;background:radial-gradient(ellipse,rgba(164,111,213,.24),rgba(242,132,184,.05) 42%,transparent 70%);filter:blur(18px)}.explore-character-shadow{position:absolute;bottom:35px;left:20%;width:60%;height:28px;border-radius:50%;background:#030206;filter:blur(12px)}.explore-character{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 20px 32px rgba(0,0,0,.35));animation:characterFloat 5.5s ease-in-out infinite;transform-origin:50% 80%}.explore-character-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0710 0%,transparent 24%,transparent 100%);pointer-events:none}
.explore-discovery-bar{position:sticky;top:0;z-index:20;padding:12px 0;background:rgba(11,7,16,.88);border-bottom:1px solid var(--ex-line);backdrop-filter:blur(16px)}.explore-discovery-bar .section-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}.explore-tabs{display:flex;gap:6px;overflow:auto;scrollbar-width:none}.explore-tabs::-webkit-scrollbar{display:none}.explore-tab{white-space:nowrap;border:1px solid transparent;background:transparent;color:#8e8098;padding:9px 12px;border-radius:8px;font:600 .73rem Inter,sans-serif;cursor:pointer}.explore-tab:hover{color:#eee6f4;background:rgba(255,255,255,.035)}.explore-tab.active{color:#f3eaf8;background:rgba(198,169,229,.12);border-color:rgba(198,169,229,.2)}.explore-filter-btn{display:flex;align-items:center;gap:7px;flex:0 0 auto;border:1px solid rgba(198,169,229,.24);background:#17101f;color:#d9cbe2;border-radius:8px;padding:9px 13px;font:600 .73rem Inter,sans-serif;cursor:pointer}.explore-filter-btn:hover{background:#21162c}.explore-filter-btn b{display:grid;place-items:center;min-width:18px;height:18px;border-radius:50%;background:var(--ex-lilac);color:#150d1c;font-size:.62rem}
.explore-section{padding:62px 0}.explore-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:23px}.explore-section-heading h2{margin:0;color:#f4edf8;font-family:var(--font-display);font-weight:500;font-size:clamp(1.55rem,2.8vw,2.2rem)}.explore-see-all{border:0;background:transparent;color:#b99bda;font:600 .74rem Inter,sans-serif;cursor:pointer;padding:6px}.explore-see-all:hover{color:#f2dfff}.explore-featured-section{background:linear-gradient(180deg,#100a16,#0b0710)}.explore-featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.explore-featured-card{display:grid;grid-template-columns:190px 1fr;min-height:275px;overflow:hidden;border:1px solid var(--ex-line);border-radius:14px;background:linear-gradient(135deg,#191120,#100b15);box-shadow:0 20px 55px rgba(0,0,0,.18)}.featured-art{display:block;min-height:100%;background:#0c0810}.explore-featured-cover{width:100%;height:100%;min-height:275px;object-fit:cover;display:block}.featured-copy{padding:25px 25px 22px}.explore-badge{position:absolute;left:10px;top:10px;padding:6px 8px;border-radius:6px;background:rgba(11,7,16,.84);border:1px solid rgba(240,155,197,.3);color:#f2b8d5;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.explore-badge.static{position:static;display:inline-block}.featured-genre{margin:16px 0 6px;color:#aa91bd;font-size:.67rem;text-transform:uppercase;letter-spacing:.1em}.featured-copy h3{margin:0;color:#f6eef9;font-family:var(--font-display);font-size:1.55rem;font-weight:500}.featured-author{margin:7px 0 14px;color:#b29fb9;font-size:.75rem}.featured-copy>p:not(.featured-genre):not(.featured-author){color:#8e8296;font-size:.78rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.featured-stats{display:flex;gap:16px;color:#8d7b98;font-size:.67rem;margin-top:16px}.featured-read{display:inline-block;margin-top:15px;color:#d1b7e7;text-decoration:none;font-size:.72rem;font-weight:700}.featured-read:hover{color:#f1d9ff}
.explore-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.explore-story-card{position:relative;min-width:0;border:1px solid var(--ex-line);border-radius:12px;background:#120c18;overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.explore-story-card:hover{transform:translateY(-4px);border-color:rgba(198,169,229,.25);box-shadow:0 18px 45px rgba(0,0,0,.24)}.explore-card-cover{position:relative;display:block;aspect-ratio:2/3;background:#1a1121;overflow:hidden}.explore-cover{width:100%;height:100%;object-fit:cover;display:block}.explore-card-copy{padding:14px 15px 16px}.explore-card-copy h3{margin:0;color:#f2eaf6;font-family:var(--font-display);font-size:1.03rem;font-weight:500;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.explore-card-copy>p{margin:6px 0 11px;color:#9b8ca4;font-size:.71rem}.explore-card-meta{display:flex;justify-content:space-between;gap:8px;color:#75697c;font-size:.61rem}.explore-card-meta span:first-child{color:#aa94b9;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.explore-card-echo{display:flex;align-items:center;gap:6px;margin-top:12px;color:var(--ex-gold);font-size:.63rem}.explore-card-echo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.35}.explore-save{position:absolute;z-index:3;right:9px;top:9px;width:31px;height:31px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(10,7,14,.75);color:#d9cde0;cursor:pointer}.explore-save svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}.explore-save.saved{color:#f0c9e0;border-color:rgba(240,155,197,.45)}.explore-save.saved svg{fill:currentColor}.explore-empty,.explore-loading{grid-column:1/-1;padding:42px;border:1px dashed rgba(198,169,229,.13);border-radius:12px;color:#82758b;text-align:center;background:#100a15}.explore-badge{z-index:2}
.compact-section{background:#0e0913}.explore-discovery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.explore-discovery-grid button{position:relative;min-height:105px;padding:17px;border:1px solid var(--ex-line);border-radius:10px;background:#15101b;color:#eee7f2;text-align:left;cursor:pointer;overflow:hidden}.explore-discovery-grid button:before{content:"";position:absolute;width:100px;height:100px;right:-45px;bottom:-55px;border-radius:50%;background:radial-gradient(circle,rgba(198,169,229,.15),transparent 68%)}.explore-discovery-grid button:hover{border-color:rgba(198,169,229,.3);transform:translateY(-2px)}.explore-discovery-grid span,.explore-discovery-grid small{display:block}.explore-discovery-grid span{font-family:var(--font-display);font-size:1.05rem}.explore-discovery-grid small{margin-top:7px;color:#83768d;font-size:.64rem}.explore-discovery-grid i{position:absolute;right:14px;bottom:13px;color:#b99bda;font-style:normal}.taxonomy-showcase{background:linear-gradient(180deg,#0b0710,#100a15)}.explore-taxonomy-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.explore-taxonomy-card{min-height:125px;position:relative;text-align:left;padding:18px;border:1px solid var(--ex-line);border-radius:11px;background:#15101b;color:#eee7f2;cursor:pointer;overflow:hidden}.explore-taxonomy-card:hover{border-color:rgba(198,169,229,.28);background:#1a1222}.explore-taxonomy-card .tax-number{display:block;color:#62576b;font-size:.6rem;letter-spacing:.12em;margin-bottom:25px}.explore-taxonomy-card strong{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:500}.explore-taxonomy-card small{display:block;margin-top:7px;color:#82758b;font-size:.62rem}.because-section{background:#0f0914}.explore-results-section{padding:65px 0;background:#0c0811}.results-count{color:#7f7288;font-size:.7rem}
.explore-filter-overlay{position:fixed;inset:0;z-index:100;background:rgba(4,2,7,.72);backdrop-filter:blur(8px);display:flex;justify-content:flex-end}.explore-filter-overlay[hidden]{display:none}.explore-filter-panel{width:min(460px,100%);height:100%;background:#120c18;border-left:1px solid rgba(198,169,229,.15);display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(0,0,0,.3);animation:filterIn .24s ease}.filter-panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding:25px 24px 20px;border-bottom:1px solid var(--ex-line)}.filter-panel-head h2{margin:0;font-family:var(--font-display);font-weight:500;font-size:1.65rem}.filter-panel-head button{border:0;background:transparent;color:#9c8fa4;font-size:1.7rem;cursor:pointer}.filter-panel-body{flex:1;overflow:auto;padding:22px 24px}.filter-panel-body label{display:block;margin-bottom:17px;color:#a99bad;font-size:.67rem;font-weight:600;letter-spacing:.04em}.filter-panel-body select{display:block;width:100%;margin-top:7px;padding:12px 13px;border:1px solid rgba(229,216,240,.11);border-radius:8px;background:#1a1222;color:#eee7f2;outline:0;font:500 .76rem Inter,sans-serif}.filter-panel-body select:focus{border-color:rgba(198,169,229,.45)}.filter-panel-foot{display:flex;gap:10px;padding:17px 24px;border-top:1px solid var(--ex-line)}.filter-panel-foot button{flex:1}.filter-clear{border:1px solid rgba(198,169,229,.18);background:#17101f;color:#bba9c5;border-radius:8px;font:600 .74rem Inter,sans-serif;cursor:pointer}.filter-clear:hover{background:#20162a}
@keyframes exploreStars{to{background-position:140px 80px,20px 20px}}@keyframes explorePulse{0%,100%{transform:scale(.95);opacity:.7}50%{transform:scale(1.08);opacity:1}}@keyframes characterFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(.5deg)}}@keyframes filterIn{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
@media(max-width:900px){.explore-main-links{display:none}.explore-hero{min-height:580px}.explore-hero-inner{min-height:580px}.explore-hero-copy{width:68%;padding-top:50px}.explore-character-scene{right:-9%;width:55vw;opacity:.82}.explore-featured-grid{grid-template-columns:1fr}.explore-story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.explore-discovery-grid,.explore-taxonomy-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.explore-hero{min-height:690px}.explore-hero-inner{min-height:690px;align-items:flex-start}.explore-hero-copy{width:100%;padding-top:64px}.explore-hero-copy h1{font-size:2.65rem;max-width:390px}.explore-hero-copy>p{max-width:350px;font-size:.82rem}.explore-search{position:relative;z-index:5}.explore-search button{padding:11px 12px}.explore-character-scene{right:-17%;bottom:-30px;width:82vw;height:470px;opacity:.7}.explore-character-scene:after{background:linear-gradient(180deg,#0b0710 0%,transparent 35%,rgba(11,7,16,.2) 100%)}.explore-hero-caption{bottom:17px}.explore-discovery-bar{top:0}.explore-discovery-bar .section-inner{align-items:stretch}.explore-tabs{max-width:calc(100% - 74px)}.explore-tab{padding:8px 9px;font-size:.66rem}.explore-filter-btn{padding:8px 10px}.explore-filter-btn span{display:none}.explore-section{padding:45px 0}.explore-section-heading{align-items:flex-start;margin-bottom:17px}.explore-section-heading h2{font-size:1.55rem}.explore-featured-card{grid-template-columns:115px 1fr;min-height:230px}.explore-featured-cover{min-height:230px}.featured-copy{padding:18px}.featured-copy h3{font-size:1.25rem}.featured-copy>p:not(.featured-genre):not(.featured-author){-webkit-line-clamp:2}.explore-story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.explore-card-copy{padding:11px 11px 13px}.explore-card-copy h3{font-size:.92rem}.explore-card-copy>p{font-size:.65rem}.explore-card-meta{font-size:.55rem}.explore-card-echo{font-size:.56rem;margin-top:9px}.explore-save{width:28px;height:28px}.explore-discovery-grid,.explore-taxonomy-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.explore-discovery-grid button{min-height:94px;padding:14px}.explore-taxonomy-card{min-height:105px;padding:14px}.explore-taxonomy-card .tax-number{margin-bottom:18px}.filter-panel-body{padding:18px}.filter-panel-head{padding:21px 18px}.filter-panel-foot{padding:14px 18px}.explore-footer .footer-inner{flex-direction:column}.explore-footer-links{display:flex;flex-wrap:wrap;gap:12px}.explore-footer-links a{color:#93859b;font-size:.7rem;text-decoration:none}}
@media(prefers-reduced-motion:reduce){.explore-hero-stars,.explore-hero-glow,.explore-character{animation:none!important}.explore-story-card,.explore-discovery-grid button{transition:none}}

/* =========================================================
   GidiReads — Story Page Redesign 07
   Dark editorial story-world; keeps the shared component system.
   ========================================================= */
.story-page {
  --story-bg: #0b0710;
  --story-surface: #120b18;
  --story-surface-2: #17101f;
  --story-line: rgba(224, 205, 234, .10);
  --story-text: #f5edf8;
  --story-muted: #a596ad;
  --story-lilac: #c7a9e5;
  --story-pink: #ee8fbd;
  background: var(--story-bg);
  color: var(--story-text);
}
.story-page .story-detail-hero {
  position: relative;
  overflow: hidden;
  min-height: 540px;
  padding: 76px 0 84px;
  border-bottom: 1px solid var(--story-line);
  background: radial-gradient(circle at 78% 38%, rgba(91, 47, 119, .30), transparent 34%), #0b0710;
}
.story-page .story-hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(circle at 72% 24%, rgba(238,143,189,.13), transparent 12%),
    radial-gradient(circle at 83% 72%, rgba(111,71,155,.18), transparent 28%),
    radial-gradient(circle at 40% 45%, rgba(42,25,56,.40), transparent 38%);
}
.story-page .story-hero-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image: radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle at 72% 48%, #000 0%, transparent 67%);
}
.story-page .story-detail-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  flex-wrap: nowrap;
}
.story-cover-column { min-width: 0; }
.story-cover-frame {
  width: 270px;
  max-width: 100%;
  padding: 8px;
  border: 1px solid rgba(224,205,234,.13);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  box-shadow: 0 32px 80px rgba(0,0,0,.48), 0 0 70px rgba(128,76,163,.13);
}
.story-page .story-cover-image,
.story-page .cover-lg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 9px;
  box-shadow: none;
}
.story-cover-caption {
  margin: 12px 8px 0;
  color: #7e7086;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.story-eyebrow-row { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.story-eyebrow {
  color: var(--story-pink);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story-status-badge {
  padding: 4px 8px;
  border: 1px solid rgba(238,143,189,.25);
  border-radius: 999px;
  color: #efbfd7;
  background: rgba(238,143,189,.07);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.story-page .story-detail-title {
  max-width: 850px;
  color: var(--story-text);
  font-size: clamp(2.3rem, 5vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 18px;
}
.story-author-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #21162a;
  border: 1px solid rgba(224,205,234,.14);
}
.story-author-avatar-fallback { display: inline-grid; place-items: center; color: var(--story-lilac); font-weight: 700; }
.story-author-avatar-wrap { display: inline-flex; }
.story-page .story-detail-author-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  color: #d7cbdc;
  font-size: .84rem;
}
.story-page .story-detail-author-wrap .story-link { color: #f0d7e5; font-weight: 600; }
.story-page .story-detail-author-wrap .story-link:hover { color: #fff; }
.story-page .story-detail-meta { color: var(--story-muted); font-size: .76rem; margin: 0 0 20px; }
.story-page .story-detail-stats { gap: 8px; margin-bottom: 14px; }
.story-page .story-stat {
  color: #cfc0d6;
  border: 1px solid rgba(224,205,234,.09);
  background: rgba(255,255,255,.035);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: .68rem;
}
.story-page .story-stat-echo { color: #e8c16d; }
.story-page .story-stat-eye svg { color: #bda1d7; }
.story-update-line { min-height: 20px; margin: 0 0 25px; color: #7e7186; font-size: .68rem; }
.story-update-line strong { color: #b9a9c1; font-weight: 500; }
.story-page .story-detail-actions { gap: 9px; }
.story-page .story-detail-actions .btn-primary { background: #d58ab0; color: #180c14; border-color: #d58ab0; font-weight: 700; }
.story-page .story-detail-actions .btn-primary:hover { background: #eea8ca; border-color: #eea8ca; }
.story-page .story-detail-actions .btn-outline,
.story-page .story-detail-actions .btn-ghost { color: #d8c9df; border-color: rgba(224,205,234,.15); background: rgba(255,255,255,.025); }
.story-page .story-detail-actions .btn-outline:hover,
.story-page .story-detail-actions .btn-ghost:hover { color: #fff; border-color: rgba(238,143,189,.35); background: rgba(238,143,189,.07); }

.story-overview-section { padding: 70px 0; background: #0d0812; }
.story-overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr); gap: 18px; }
.story-panel { border: 1px solid var(--story-line); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); padding: 28px; }
.story-panel-heading { margin-bottom: 18px; }
.story-panel-kicker { display: block; margin-bottom: 7px; color: #b894c7; font-size: .61rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.story-panel h2 { margin: 0; color: #f0e7f3; font-family: var(--font-display); font-size: 1.65rem; font-weight: 500; }
.story-synopsis-text { max-width: 70ch; color: #b8aabd; line-height: 1.85; margin: 0; white-space: pre-wrap; }
.story-page .read-more-btn { margin-top: 15px; color: #d4a7c0; background: transparent; border: 0; padding: 0; font-size: .73rem; cursor: pointer; }
.story-quick-facts { display: grid; gap: 0; }
.story-quick-facts > div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(224,205,234,.07); }
.story-quick-facts > div:last-child { border-bottom: 0; }
.story-quick-facts span { color: #7f7187; font-size: .68rem; }
.story-quick-facts strong { color: #d8cbdc; font-size: .7rem; font-weight: 600; text-align: right; }
.story-taxonomy-section, .story-chapters-section, .story-reviews-section { background: #0b0710; border-top-color: var(--story-line) !important; }
.story-section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.story-section-heading-row .section-heading { margin: 0; color: #eee5f1; border-left-color: #c79bdc; font-size: 1.85rem; }
.story-section-note { color: #776a7e; font-size: .68rem; }
.story-see-all { color: #bc91d4; font-size: .7rem; font-weight: 600; }
.story-see-all:hover { color: #efcde0; }
.story-page .taxonomy-block { display: grid; gap: 18px; }
.story-page .taxonomy-group { padding: 18px 0; border-bottom: 1px solid var(--story-line); }
.story-page .taxonomy-group:last-child { border-bottom: 0; }
.story-page .taxonomy-label { color: #8f7d99; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.story-page .taxonomy-list { gap: 7px; }
.story-page .taxonomy-chip { color: #c9b8d2; border-color: rgba(199,169,229,.13); background: rgba(199,169,229,.045); }
.story-page .taxonomy-chip:hover { color: #f1dbe8; border-color: rgba(238,143,189,.28); background: rgba(238,143,189,.07); }
.story-page .taxonomy-chip.primary { color: #f0c2d9; border-color: rgba(238,143,189,.24); }
.story-page .story-chapter-list { overflow: hidden; border: 1px solid var(--story-line); border-radius: 14px; background: #100a15; }
.story-page .story-chapter-list > li { border-bottom: 1px solid rgba(224,205,234,.07); }
.story-page .story-chapter-list > li:last-child { border-bottom: 0; }
.story-page .story-chapter-item {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) 24px;
  gap: 16px;
  align-items: center;
  min-height: 76px;
  padding: 12px 18px;
  color: #d8ccdc;
  transition: background .18s ease, padding .18s ease;
}
.story-page .story-chapter-item:hover { padding-left: 22px; background: rgba(199,169,229,.045); }
.story-chapter-number { color: #866c95; font-family: var(--font-display); font-size: .9rem; }
.story-chapter-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.story-chapter-copy strong { overflow: hidden; color: #e8deeb; font-size: .78rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.story-chapter-copy small { color: #75687d; font-size: .61rem; }
.story-chapter-arrow { color: #8e7699; text-align: right; transition: transform .18s ease, color .18s ease; }
.story-chapter-item:hover .story-chapter-arrow { color: #dfabc5; transform: translateX(3px); }
.story-page .empty-row { color: #8f8297; background: #100a15; border-color: var(--story-line); }
.story-page .story-grid .story-card-link { color: #eee6f1; }
.story-page .story-grid .story-card-body { background: #120b18; border-color: var(--story-line); }
.story-page .story-grid .story-card-title { color: #eee6f1; }
.story-page .story-reviews-section .reviews-subheading { color: #e7dce9; }
.story-page .story-reviews-section .reviews-hint { color: #776b7d; }
.story-page .rating-summary,
.story-page #reviewFormWrap,
.story-page .review-card { border-color: var(--story-line); }

@media (max-width: 800px) {
  .story-page .story-detail-hero { min-height: 0; padding: 48px 0 58px; }
  .story-page .story-detail-inner { grid-template-columns: 170px minmax(0,1fr); gap: 25px; align-items: start; }
  .story-cover-frame { width: 170px; }
  .story-page .story-detail-title { font-size: clamp(2rem, 8vw, 3.1rem); }
  .story-page .story-detail-actions { flex-direction: column; align-items: stretch; }
  .story-page .story-detail-actions .btn { width: 100%; }
  .story-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .story-page .story-detail-inner { grid-template-columns: 1fr; gap: 28px; }
  .story-cover-column { width: min(64vw, 250px); margin: 0 auto; }
  .story-cover-frame { width: 100%; }
  .story-page .story-detail-info { text-align: left; }
  .story-page .story-detail-title { font-size: 2.25rem; }
  .story-page .story-detail-stats { gap: 6px; }
  .story-page .story-stat { padding: 6px 9px; font-size: .62rem; }
  .story-page .story-overview-section { padding: 48px 0; }
  .story-panel { padding: 21px; }
  .story-section-heading-row { align-items: flex-start; }
  .story-page .story-section-heading-row .section-heading { font-size: 1.55rem; }
  .story-page .story-chapter-item { grid-template-columns: 38px minmax(0,1fr) 18px; gap: 10px; padding: 12px 13px; }
  .story-page .story-chapter-item:hover { padding-left: 13px; }
  .story-chapter-copy strong { white-space: normal; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  .story-page .story-chapter-item, .story-page .story-chapter-arrow { transition: none; }
}


/* =========================================================
   GidiReads Story Page — v2 redesign
   Scoped to .story-page / .story-* so reader/home/explore styles remain untouched.
   ========================================================= */
:root{--story-bg:#0b0710;--story-surface:#15101d;--story-surface-2:#1d1527;--story-text:#f7f2fb;--story-muted:#b8a9c8;--story-lilac:#bca0f0;--story-purple:#8d63d8;--story-gold:#e8bd6b;--story-pink:#dc78b2;--story-line:rgba(206,180,238,.16);--story-glow:rgba(173,126,235,.28);--story-max:1180px}
.story-page{background:var(--story-bg);color:var(--story-text);min-height:100vh}.story-page .section-inner{max-width:var(--story-max)}
.story-nav-v2{background:rgba(11,7,16,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--story-line)}.story-nav-v2 .btn-ghost{color:#eee6f6}.story-top-profile{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;overflow:hidden;border:1px solid rgba(207,183,240,.35);background:#21162c}.top-profile-avatar{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:700}.top-profile-avatar img{width:100%;height:100%;object-fit:cover}
.story-hero-v2{position:relative;overflow:hidden;background:radial-gradient(circle at 72% 30%,rgba(135,86,207,.22),transparent 35%),radial-gradient(circle at 20% 70%,rgba(221,91,156,.12),transparent 32%),#0b0710;padding:74px 0 86px}.story-hero-atmosphere{position:absolute;inset:-20%;background:radial-gradient(circle at 35% 48%,rgba(168,124,231,.18),transparent 25%),radial-gradient(circle at 75% 60%,rgba(215,89,155,.12),transparent 26%);filter:blur(28px);pointer-events:none}.story-hero-particles{position:absolute;inset:0;opacity:.42;background-image:radial-gradient(circle,rgba(236,217,255,.65) 0 1px,transparent 1.5px);background-size:120px 120px;mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);animation:storyDrift 24s linear infinite}.story-hero-inner-v2{position:relative;z-index:2;display:grid;grid-template-columns:minmax(260px,400px) minmax(0,1fr);gap:70px;align-items:center}.story-cover-stage{position:relative;display:flex;justify-content:center}.story-cover-glow{position:absolute;width:82%;aspect-ratio:2/3;border-radius:24px;background:radial-gradient(ellipse,rgba(177,131,240,.4),transparent 67%);filter:blur(28px);transform:translateY(18px);opacity:.85}.story-cover-frame-v2{position:relative;width:min(100%,360px);z-index:2}.story-cover-frame-v2 .cover-lg{width:100%;display:block;aspect-ratio:2/3;object-fit:cover;border-radius:18px;box-shadow:0 26px 70px rgba(0,0,0,.65),0 0 42px rgba(170,125,231,.18)}.story-hero-character{position:absolute;right:3%;bottom:-24px;width:250px;z-index:3;pointer-events:none;opacity:.82;animation:storyFloat 6s ease-in-out infinite}.story-anime-sticker{width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}.story-hero-content{max-width:690px}.story-hero-topline{display:flex;gap:12px;align-items:center;margin-bottom:14px}.story-eyebrow,.story-kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;color:var(--story-lilac);font-weight:700}.story-status-badge{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#efe6f8;border:1px solid rgba(190,161,239,.32);background:rgba(190,161,239,.1);padding:5px 9px;border-radius:999px}.story-detail-title-v2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2.7rem,6vw,5.6rem);line-height:.98;letter-spacing:-.035em;margin:0 0 18px;color:#fff;text-wrap:balance}.story-detail-author-wrap-v2{display:flex;align-items:center;gap:10px;color:#eee5f4;margin-bottom:12px}.story-author-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid rgba(220,199,245,.32);display:grid;place-items:center;background:#2b1c38;color:#fff;font-weight:700;flex:0 0 38px}.story-link{color:#fff}.story-detail-meta-v2{margin:0 0 22px;color:var(--story-muted);font-size:.95rem}.story-detail-stats-v2{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:14px}.story-stat-v2{display:inline-flex;align-items:center;gap:7px;color:#ded3e8;font-size:.93rem}.story-stat-reads-v2{color:#f3eaff;text-shadow:0 0 14px rgba(194,151,255,.65),0 0 30px rgba(148,94,231,.32)}.story-stat-reads-v2 strong{font-size:1.12rem;color:#fff}.story-stat-echo-v2{color:#f4d898;text-shadow:0 0 12px rgba(232,189,107,.45)}.story-update-line-v2{color:#a99bb8;font-size:.85rem;margin-bottom:25px}.story-detail-actions-v2{display:flex;gap:10px;flex-wrap:wrap}.story-read-btn,.story-secondary-btn,.story-icon-btn{border:0;cursor:pointer;min-height:46px;border-radius:12px;font:inherit;font-weight:700}.story-read-btn{display:inline-flex;align-items:center;padding:0 24px;background:linear-gradient(135deg,#c2a4f3,#8d63d8);color:#140d1d;box-shadow:0 0 26px rgba(158,111,225,.3)}.story-read-btn:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(173,126,235,.46)}.story-secondary-btn{padding:0 19px;background:#21172b;color:#f4ecfa;border:1px solid rgba(198,168,239,.25)}.story-secondary-btn:hover{border-color:var(--story-lilac);background:#2a1d37}.story-icon-btn{width:46px;background:#21172b;color:#f2e9f8;border:1px solid rgba(198,168,239,.25);font-size:1.15rem}.story-report-btn{margin-top:13px;background:none;border:0;color:#81758e;font-size:.78rem;padding:0;cursor:pointer}.story-report-btn:hover{color:#c8b6d7}
.story-intro-section,.story-taxonomy-section-v2,.story-chapters-section-v2,.story-author-section-v2,.story-related-section-v2{padding:78px 0}.story-intro-section{background:linear-gradient(180deg,#0f0a15,#110b17)}.story-intro-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:60px}.story-intro-main h2,.story-at-a-glance h2,.story-section-title-v2 h2,.story-echo-inner-v2 h2,.story-adaptation-section-v2 h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.02em;font-size:2.1rem;margin:7px 0 18px;color:#fff}.story-synopsis-text-v2{color:#d4c9dd;max-width:70ch;font-size:1.05rem;line-height:1.85;margin:0}.story-synopsis-text-v2.clamp-2{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.story-text-link,.story-see-all-v2{margin-top:13px;color:var(--story-lilac);background:none;border:0;padding:0;font-weight:700;cursor:pointer}.story-at-a-glance{border-left:1px solid var(--story-line);padding-left:34px}.story-quick-facts-v2>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--story-line);color:#a99bb8;font-size:.88rem}.story-quick-facts-v2 strong{color:#eee5f5;font-weight:600;text-align:right}.story-taxonomy-section-v2{background:#0c0811;border-top:1px solid var(--story-line);border-bottom:1px solid var(--story-line)}.story-section-title-v2 p{color:#978ba4;margin:6px 0 0}.taxonomy-block-v2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 50px;margin-top:30px}.taxonomy-group-v2{padding-bottom:17px;border-bottom:1px solid var(--story-line)}.taxonomy-label-v2{margin:0 0 9px;color:#8f829b;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em}.taxonomy-list-v2{display:flex;flex-wrap:wrap;gap:8px}.taxonomy-chip-v2{display:inline-flex;padding:7px 11px;border-radius:999px;border:1px solid rgba(196,166,237,.2);background:rgba(173,126,235,.07);color:#d8cbed;font-size:.82rem}.story-chapters-section-v2{background:linear-gradient(180deg,#110b17,#0d0812)}.story-section-title-row-v2{display:flex;justify-content:space-between;gap:25px;align-items:end}.story-section-title-v2 h2,.story-section-title-row-v2 h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:2rem;margin:7px 0 0;color:#fff}.story-section-note-v2{color:#8f829b;font-size:.85rem}.story-latest-chapters{margin-top:28px;border-top:1px solid var(--story-line)}.story-latest-chapter{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--story-line)}.story-chapter-number-v2{color:#806b93;font-size:.8rem;font-weight:700}.story-chapter-title-v2{color:#f2eaf7;font-size:1.05rem;font-weight:650}.story-chapter-meta-v2{display:block;color:#81748d;font-size:.78rem;margin-top:4px}.story-chapter-arrow-v2{color:var(--story-lilac);font-size:1.15rem}.story-view-all-btn{margin-top:22px;border:1px solid rgba(193,163,237,.3);background:#191122;color:#e9def3;border-radius:11px;padding:11px 17px;font:inherit;font-weight:650;cursor:pointer}.story-view-all-btn:hover{border-color:var(--story-lilac);box-shadow:0 0 22px rgba(170,125,231,.12)}.story-full-chapter-list{margin-top:22px;border:1px solid var(--story-line);border-radius:14px;background:#120c18;padding:6px 18px}.story-full-chapter-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--story-line)}.story-full-chapter-row:last-child{border-bottom:0}.story-full-chapter-row a{color:#f2e9f7}.story-full-chapter-row small{color:#81748d}
.story-reviews-section-v2{padding:80px 0;background:#0b0710;border-top:1px solid var(--story-line)}.rating-summary-v2{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center;margin:28px 0}.rating-overall{font-size:2.2rem;font-weight:750;color:#fff;text-shadow:0 0 20px rgba(190,157,245,.28)}.rating-count{font-size:.84rem;color:#8f829b;font-weight:500}.rating-breakdown{display:flex;flex-wrap:wrap;gap:9px}.rating-breakdown span{border:1px solid var(--story-line);background:#15101d;padding:9px 11px;border-radius:9px;color:#b9acc4;font-size:.8rem}.reviews-wrap-v2{margin-top:35px}.reviews-subheading-row{display:flex;justify-content:space-between;align-items:center;gap:15px}.reviews-subheading{font-size:1.1rem;color:#f3ebf7;margin:0}.reviews-hint{color:#7f728a;font-size:.8rem}.story-reviews-section-v2 .review-form-box,.story-reviews-section-v2 .review-submitted-box{background:#15101d!important;border:1px solid var(--story-line)!important;border-radius:14px!important;color:#eee!important}.story-reviews-section-v2 .review-card{background:#120c18!important;border-color:var(--story-line)!important;color:#eee!important}.story-reviews-section-v2 .review-card:hover{border-color:rgba(193,163,237,.35)!important}.story-reviews-section-v2 .review-action-btn{color:#9e91aa!important}.story-reviews-section-v2 .review-action-btn:hover,.story-reviews-section-v2 .review-action-btn.is-active{color:var(--story-lilac)!important}.story-reviews-section-v2 .review-profile-copy strong,.story-reviews-section-v2 .review-text{color:#eee7f3!important}.story-reviews-section-v2 .review-meta,.story-reviews-section-v2 .review-reply-meta{color:#7f728a!important}.story-reviews-section-v2 textarea{background:#0d0812!important;color:#eee!important;border-color:var(--story-line)!important}.story-reviews-section-v2 .btn-primary{background:linear-gradient(135deg,#c2a4f3,#8d63d8)!important;color:#140d1d!important}.story-reviews-section-v2 .btn-outline{background:#181020!important;color:#eee!important;border-color:rgba(193,163,237,.3)!important}
.story-echo-section-v2{padding:60px 0;background:radial-gradient(circle at 80% 50%,rgba(232,189,107,.1),transparent 32%),#100b15;border-top:1px solid rgba(232,189,107,.15);border-bottom:1px solid var(--story-line)}.story-echo-inner-v2{display:flex;align-items:center;justify-content:space-between;gap:30px}.story-echo-inner-v2 h2{color:#f5d894}.story-echo-inner-v2 p{color:#aa9dab;margin:0}.story-echo-inner-v2 strong{color:#f5d894;text-shadow:0 0 18px rgba(232,189,107,.35)}.echo-mark-large{font-size:4rem;color:var(--story-gold);text-shadow:0 0 26px rgba(232,189,107,.5)}
.story-author-section-v2{background:#0d0812}.story-author-card-v2{margin-top:28px;display:flex;align-items:center;gap:22px;padding:26px;border:1px solid var(--story-line);background:linear-gradient(135deg,#171020,#110b16);border-radius:16px}.story-author-card-v2 .author-pfp-v2{width:78px;height:78px;border-radius:50%;object-fit:cover;border:1px solid rgba(198,168,239,.35);background:#251632}.story-author-copy-v2{flex:1}.story-author-copy-v2 h3{margin:0 0 4px;color:#fff;font-size:1.2rem}.story-author-copy-v2 p{margin:0;color:#9e91a8;max-width:65ch}.story-author-actions-v2{display:flex;gap:9px}.story-author-actions-v2 a{border:1px solid rgba(193,163,237,.3);padding:9px 13px;border-radius:9px;color:#e6dcef;font-size:.82rem}.story-recommend-section{}.story-related-section-v2{background:#0b0710;border-top:1px solid var(--story-line)}.story-section-title-row-v2{margin-bottom:26px}.story-recommend-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:27px}.story-recommend-card{display:block;min-width:0}.story-recommend-cover{aspect-ratio:2/3;overflow:hidden;border-radius:12px;background:#171020;border:1px solid var(--story-line);box-shadow:0 10px 28px rgba(0,0,0,.28);transition:.25s ease}.story-recommend-cover img{width:100%;height:100%;object-fit:cover;display:block}.story-recommend-card:hover .story-recommend-cover{transform:translateY(-4px);border-color:rgba(193,163,237,.4);box-shadow:0 16px 34px rgba(0,0,0,.42),0 0 25px rgba(157,111,221,.14)}.story-recommend-title{font-weight:650;color:#f1e9f6;margin:10px 0 3px;font-size:.92rem}.story-recommend-meta{color:#82758e;font-size:.76rem}.story-adaptation-section-v2{padding:55px 0;background:#0d0812;border-top:1px solid var(--story-line)}.story-adaptation-section-v2 p{color:#9c8fa7;margin:0}.story-footer-v2{background:#08050c!important;border-top:1px solid var(--story-line)!important;color:#eee!important}.story-footer-v2 .footer-tagline{color:#887b93}.story-footer-v2 .footer-copy{color:#716576}.story-footer-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap}.story-footer-links a{color:#a99bb5;font-size:.85rem}.story-footer-links a:hover{color:#e9def3}
.story-empty{padding:25px 0;color:#83758d}.story-new-badge{display:inline-flex;margin-left:8px;padding:3px 6px;border-radius:999px;background:rgba(220,120,178,.12);color:#df91bd;border:1px solid rgba(220,120,178,.25);font-size:.65rem;text-transform:uppercase;letter-spacing:.08em}
@keyframes storyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes storyDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(30px,18px,0)}}
@media (max-width:900px){.story-hero-inner-v2{grid-template-columns:280px 1fr;gap:38px}.story-hero-character{width:190px;right:-10px;bottom:-15px;opacity:.58}.story-intro-grid{grid-template-columns:1fr}.story-at-a-glance{border-left:0;border-top:1px solid var(--story-line);padding:25px 0 0}.story-recommend-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rating-summary-v2{grid-template-columns:1fr}}
@media (max-width:640px){.story-hero-v2{padding:42px 0 54px}.story-hero-inner-v2{grid-template-columns:1fr;gap:28px}.story-cover-stage{justify-content:flex-start}.story-cover-frame-v2{width:58%;min-width:190px}.story-hero-character{width:150px;right:-20px;bottom:8px;opacity:.48}.story-detail-title-v2{font-size:2.6rem}.story-detail-stats-v2{gap:9px 14px}.story-intro-section,.story-taxonomy-section-v2,.story-chapters-section-v2,.story-author-section-v2,.story-related-section-v2{padding:55px 0}.taxonomy-block-v2{grid-template-columns:1fr}.story-section-title-row-v2{align-items:flex-start}.story-latest-chapter{grid-template-columns:45px minmax(0,1fr) auto}.story-full-chapter-row{grid-template-columns:45px minmax(0,1fr) auto}.story-author-card-v2{align-items:flex-start;flex-wrap:wrap}.story-recommend-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.story-echo-inner-v2{align-items:flex-start}.echo-mark-large{font-size:3rem}.reviews-subheading-row{align-items:flex-start;flex-direction:column;gap:4px}}
@media (prefers-reduced-motion:reduce){.story-hero-character,.story-hero-particles{animation:none}.story-recommend-cover,.story-read-btn{transition:none}}
.story-recommend-cover-img{width:100%;height:100%;object-fit:cover;display:block}.story-recommend-cover .cover-placeholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#2a1c39,#120b19);color:#d8c7ef;font:600 2.2rem Georgia,serif}.profile-fallback-v2{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#5a3d78,#251633);color:#fff}.top-profile-img{width:100%;height:100%;object-fit:cover}.story-author-copy-v2 p{line-height:1.55}

/* Story recommendations: luminous web-novel discovery lanes. */
.story-recommend-heading{align-items:flex-end}
.story-recommend-heading>div{min-width:0}
.story-see-all-v2{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:#c8a8ef !important;text-decoration:none;font-weight:750;font-size:.82rem}
.story-see-all-v2:hover{text-shadow:0 0 14px rgba(194,145,246,.5);color:#f0e3ff !important}
.story-see-all-v2[hidden]{display:none}
.story-recommend-card{position:relative}
.story-recommend-card::after{content:"";position:absolute;left:16%;right:16%;bottom:28%;height:45%;background:radial-gradient(ellipse,rgba(165,112,225,.14),transparent 68%);filter:blur(18px);opacity:0;transition:opacity .25s ease;pointer-events:none}
.story-recommend-card:hover::after{opacity:1}
.story-recommend-cover{position:relative;z-index:1}
.story-recommend-title{position:relative;z-index:1}
.story-recommend-meta{position:relative;z-index:1}
@media(max-width:640px){.story-recommend-heading{align-items:flex-start;flex-direction:column;gap:12px}}

/* Shared profile avatar treatment for the site navigation. */
.site-nav .top-profile-btn img.profile-nav-image,.site-nav .top-profile-btn img:not(.brand-mark){width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.site-nav .top-profile-btn .profile-nav-fallback{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#38204d,#120b1c);color:#f0d5ff;font-weight:700}


/* Fix 06: consistent navigation avatar sizing and visible bottom-navigation icons. */
.site-nav .top-profile-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; min-width: 42px; max-width: 42px;
  min-height: 42px; max-height: 42px; flex: 0 0 42px;
  overflow: hidden; border-radius: 50%; padding: 0; box-sizing: border-box;
}
.site-nav .top-profile-btn img,
.site-nav .top-profile-btn .gr-nav-avatar,
.site-nav .top-profile-btn .profile-nav-image {
  display: block; width: 100%; height: 100%; min-width: 0; min-height: 0;
  max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 50%;
}
.bottom-nav-item { color: #d5c6df; }
.bottom-nav-item svg { display: block; width: 22px; height: 22px; flex: 0 0 22px; stroke: currentColor; opacity: .98; }
.bottom-nav-item.active { color: #d5aaf5; }

/* Build 04 custom editorial homepage sections */
.home-custom-sections{display:grid;gap:24px;margin:0 auto;padding:0 clamp(18px,4vw,48px);max-width:1320px}
.home-custom-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.82fr);align-items:center;gap:clamp(20px,4vw,52px);padding:clamp(22px,4vw,44px);border:1px solid rgba(171,130,201,.25);border-radius:24px;background:linear-gradient(135deg,rgba(65,36,79,.97),rgba(39,22,51,.98));color:#fff;overflow:hidden;box-shadow:0 16px 40px rgba(24,10,32,.14)}
.home-custom-section.image-right .home-custom-copy{order:1}.home-custom-section.image-right .home-custom-image{order:2}
.home-custom-section.text-only{grid-template-columns:minmax(0,1fr)}
.home-custom-copy{min-width:0}.home-custom-copy h2{font:500 clamp(1.65rem,3.3vw,2.5rem)/1.15 Fraunces,Georgia,serif;color:#fff;margin:8px 0 12px;overflow-wrap:anywhere}
.home-custom-copy .home-section-kicker{color:#e0baff!important;letter-spacing:.13em;text-transform:uppercase;font-size:.73rem;font-weight:800}
.home-custom-body{margin:0;color:#f1e8f8;font-size:clamp(.96rem,1.3vw,1.08rem);line-height:1.8;white-space:normal;overflow-wrap:anywhere}
.home-custom-image{min-width:0;min-height:180px;max-height:360px;border-radius:18px;overflow:hidden;background:#321d3f;border:1px solid rgba(232,211,248,.2)}
.home-custom-image img{display:block;width:100%;height:100%;min-height:220px;max-height:360px;object-fit:cover}
.home-custom-cta{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:11px 16px;border-radius:999px;background:#e8d2f8;color:#351447;text-decoration:none;font-weight:800;border:1px solid #f2e5fb;transition:transform .2s ease,background .2s ease}
.home-custom-cta:hover{transform:translateY(-2px);background:#f4e8fc;color:#281035}
@media(max-width:680px){.home-custom-section{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px;border-radius:18px}.home-custom-section.image-right .home-custom-copy,.home-custom-section.image-right .home-custom-image{order:initial}.home-custom-image img{min-height:190px;max-height:260px}.home-custom-sections{gap:16px;padding:0 16px}}

.home-custom-section.has-image .home-custom-copy{order:2}.home-custom-section.has-image .home-custom-image{order:1}.home-custom-section.image-right.has-image .home-custom-copy{order:1}.home-custom-section.image-right.has-image .home-custom-image{order:2}.home-custom-section.text-only .home-custom-copy{order:1}

/* Phones already have the Alerts tab in the bottom bar, so hide the duplicate bell in the top bar */
@media (max-width:820px){
  .top-icon-btn[aria-label="Notifications"],.explore-nav-icon[aria-label="Notifications"]{display:none!important}
}

/* Clean logo: transparent rounded tile, no white frame, softer glow */
.brand-mark{border-radius:22.5%;filter:drop-shadow(0 2px 8px rgba(183,159,209,.28))}
.brand-mark.small{border-radius:22.5%}
.home-page .brand-mark{height:44px}
@media (max-width:760px){.home-page .brand-mark{height:42px}}

.story-like-button.is-liked{color:#ffd0df;border-color:rgba(230,125,170,.55);background:rgba(142,49,91,.24)}.story-like-button:disabled{opacity:.65;cursor:not-allowed}

@media (min-width: 641px) and (max-width: 1000px) {
  .home-page .home-desktop-links { display: flex !important; }
}

/* Global header normalization: constant height/spacing across pages */
.site-nav { height: 88px !important; min-height: 88px; }
body.has-site-nav { padding-top: 88px !important; }
.site-nav .nav-inner { height: 88px !important; min-height: 88px; align-items: center; gap: 20px; }
.site-nav .nav-actions { gap: 14px; align-items: center; flex-wrap: nowrap; }
.site-nav .nav-links { align-items: center; }
@media (max-width: 760px) { .site-nav .nav-inner { padding: 0 18px; } }

/* Ensure requested Rankings header link is visible in global header on home/index, explore, and library */
body.home-page .site-nav .rankings-nav-link,
body.explore-page .site-nav .rankings-nav-link,
body.library-page .site-nav .rankings-nav-link { display: inline-flex !important; }