/* ════════════════════════════════════════════════
   TOONNOVEL — Premium Dark UI  (Tappytoon-grade)
   All tokens, all components, all pages.
════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────── */
:root{
  /* Backgrounds — rich vibrant purple depth ladder */
  --bg:   #0f0a1e;
  --bg1:  #140d28;
  --bg2:  #1a1133;
  --bg3:  #20153e;
  --bg4:  #271a4a;
  --bg5:  #2e1f57;
  --card: #180e30;

  /* Brand violet — brighter, more vivid */
  --v:  #7c5cfc; --v2: #a78bfa; --v3: #5535d4; --v4: #5240c8;

  /* Gold / accent */
  --gold: #f0b429; --gold2: #fde68a; --gold3: #d97706;

  /* Semantic */
  --rose: #f43f5e; --teal: #2dd4bf; --green: #4ade80;

  /* Text */
  --tx:  #ffffff; --muted: #b8b0d8; --muted2: #d8d2f0;

  /* Borders */
  --bd:  rgba(124,92,252,.18);
  --bd2: rgba(255,255,255,.07);
  --bd3: rgba(255,255,255,.12);

  /* Glows */
  --glow:  rgba(124,92,252,.38);
  --glow2: rgba(124,92,252,.65);

  /* Layout */
  --nav: 60px;
  --max: 1280px;
  --r:   12px;
  --r2:  18px;

  /* Spacing scale */
  --gap: clamp(16px, 4vw, 48px);
}

[data-theme="light"]{
  /* Backgrounds */
  --bg:#f0eeff; --bg1:#e8e4ff; --bg2:#e0dbff; --bg3:#d4cef8;
  --bg4:#c6bff0; --bg5:#b8b0e8; --card:#ffffff;

  /* Text */
  --tx:#0c0a1e; --muted:#5250a0; --muted2:#38368a;

  /* Borders */
  --bd:rgba(124,92,252,.20); --bd2:rgba(0,0,0,.08); --bd3:rgba(0,0,0,.13);

  /* Glows */
  --glow:rgba(124,92,252,.18); --glow2:rgba(124,92,252,.32);
}

/* ── Light theme: Nav ─────────────────────────────────────── */
[data-theme="light"] #nav{
  background:rgba(240,238,255,.97);
  border-bottom:1px solid rgba(124,92,252,.18);
}
[data-theme="light"] .nav-links a{color:var(--muted);}
[data-theme="light"] .nav-links a:hover,[data-theme="light"] .nav-links a.on{color:var(--tx);}
[data-theme="light"] .theme-btn{background:var(--bg3);border-color:rgba(124,92,252,.2);}
[data-theme="light"] .ham span{background:var(--tx);}
[data-theme="light"] .mob-menu{background:var(--bg1);}
[data-theme="light"] .mob-nav-links a{color:var(--muted);}

/* ── Light theme: Section headers ────────────────────────── */
[data-theme="light"] .sec-title{color:var(--tx);}
[data-theme="light"] .see-all{color:var(--v);}
[data-theme="light"] .see-all:hover{color:var(--v3);}

/* ── Light theme: Stats band ─────────────────────────────── */
[data-theme="light"] .stats-band{
  background:linear-gradient(90deg,rgba(124,92,252,.06),rgba(124,92,252,.10),rgba(124,92,252,.06));
  border-color:rgba(124,92,252,.15);
}
[data-theme="light"] .stat-l{color:var(--muted);}
[data-theme="light"] .stat-div{background:rgba(124,92,252,.22);}

/* ── Light theme: Trending cards ─────────────────────────── */
[data-theme="light"] .fcard{
  background:var(--card);
  border-color:rgba(124,92,252,.15);
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
[data-theme="light"] .fcard:hover{
  border-color:rgba(124,92,252,.45);
  box-shadow:0 16px 40px rgba(124,92,252,.18);
}
[data-theme="light"] .fcard-title{color:var(--tx);}
[data-theme="light"] .fcard-synopsis{color:var(--muted);}
[data-theme="light"] .fcard-meta{color:var(--muted);border-top-color:rgba(0,0,0,.1);}
[data-theme="light"] .fcard-dot{color:rgba(0,0,0,.28);}
[data-theme="light"] .trend-arr{
  background:var(--bg2);border-color:rgba(124,92,252,.3);color:var(--v);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

/* ── Light theme: Genre panel ────────────────────────────── */
[data-theme="light"] .genre-panel{
  background:var(--bg1);
  border-color:rgba(124,92,252,.22);
}
[data-theme="light"] .genre-group-line.orig{background:linear-gradient(90deg,rgba(124,92,252,.35),transparent);}
[data-theme="light"] .genre-group-line.fan{background:linear-gradient(90deg,rgba(180,83,9,.35),transparent);}
[data-theme="light"] .gpill{
  background:var(--bg2);
  border-color:rgba(124,92,252,.2);
  color:var(--muted);
}
[data-theme="light"] .gpill:hover{
  background:rgba(124,92,252,.12);
  border-color:rgba(124,92,252,.45);
  color:var(--tx);
}
[data-theme="light"] .gpill.on{background:var(--v);border-color:var(--v);color:#fff;}

/* ── Light theme: Discover / search ─────────────────────── */
[data-theme="light"] .disc-title{color:var(--tx);}
[data-theme="light"] .srch-in{
  background:var(--card);
  border-color:rgba(124,92,252,.3);
  color:var(--tx);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
[data-theme="light"] .srch-in::placeholder{color:var(--muted);}
[data-theme="light"] .srch-in:focus{
  border-color:var(--v);
  box-shadow:0 0 0 3px rgba(124,92,252,.12);
}
[data-theme="light"] .srch-ic{color:var(--v);}
[data-theme="light"] .srch-clr{background:var(--bg3);color:var(--muted);}

/* ── Light theme: Status tabs ────────────────────────────── */
[data-theme="light"] .tab{
  background:var(--bg2);
  border-color:rgba(124,92,252,.22);
  color:var(--muted);
}
[data-theme="light"] .tab:hover{
  background:rgba(124,92,252,.1);
  border-color:rgba(124,92,252,.4);
  color:var(--tx);
}
[data-theme="light"] .tab.on{background:var(--v);border-color:var(--v);color:#fff;}

/* ── Light theme: Filter bar ─────────────────────────────── */
[data-theme="light"] .fsel{
  background-color:var(--card);
  border-color:rgba(124,92,252,.22);
  color:var(--muted);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235250a0'/%3E%3C/svg%3E");
}
[data-theme="light"] .fsel:hover{border-color:rgba(124,92,252,.4);color:var(--tx);}
[data-theme="light"] .fsel:focus{border-color:var(--v);color:var(--tx);}
[data-theme="light"] .srt-lbl{color:var(--muted);}
[data-theme="light"] .res-cnt{color:var(--muted);}

/* ── Light theme: Novel grid cards ──────────────────────── */
[data-theme="light"] .ncard{
  background:var(--card);
  border-color:rgba(124,92,252,.14);
  box-shadow:0 2px 12px rgba(0,0,0,.07);
}
[data-theme="light"] .ncard:hover{
  border-color:rgba(124,92,252,.42);
  box-shadow:0 18px 44px rgba(124,92,252,.15);
}
[data-theme="light"] .ncard-title{color:var(--tx);}
[data-theme="light"] .ncard-meta{color:var(--muted);}
[data-theme="light"] .ncard-sep{color:rgba(0,0,0,.25);}
[data-theme="light"] .ncov-tag{background:rgba(106,85,224,.85);color:#fff;}

/* ── Light theme: Recently viewed ───────────────────────── */
[data-theme="light"] .rec-c{
  background:var(--card);
  border-color:rgba(124,92,252,.15);
  box-shadow:0 2px 10px rgba(0,0,0,.07);
}
[data-theme="light"] .rec-c:hover{
  border-color:rgba(124,92,252,.42);
  box-shadow:0 12px 30px rgba(124,92,252,.15);
}
[data-theme="light"] .rec-tit{color:var(--tx);}

/* ── Light theme: Skeleton ───────────────────────────────── */
[data-theme="light"] .skel{background:var(--bg2);border-color:rgba(0,0,0,.06);}
[data-theme="light"] .skel-cov,[data-theme="light"] .skel-ln{
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);
}

/* ── Light theme: OAuth banner ───────────────────────────── */
[data-theme="light"] .oauth-banner{
  background:linear-gradient(135deg,rgba(124,92,252,.07),rgba(106,85,224,.04));
  border-color:rgba(124,92,252,.2);
}
[data-theme="light"] .ob-title{color:var(--tx);}
[data-theme="light"] .ob-sub{color:var(--muted);}

/* ── Light theme: Modals ─────────────────────────────────── */
[data-theme="light"] .ov{background:rgba(240,238,255,.92);}
[data-theme="light"] .mbox{background:var(--card);border-color:rgba(124,92,252,.18);}
[data-theme="light"] .mt{color:var(--tx);}
[data-theme="light"] .ms{color:var(--muted);}
[data-theme="light"] .mclose{background:var(--bg3);color:var(--tx);}
[data-theme="light"] .mclose:hover{background:var(--bg4);}
[data-theme="light"] .pkg{background:var(--bg2);border-color:rgba(0,0,0,.1);}
[data-theme="light"] .pkg-l{color:var(--muted);}
[data-theme="light"] .pkg-p{color:var(--tx);}

/* ── Light theme: Toasts ─────────────────────────────────── */
[data-theme="light"] .toast{background:var(--card);border-color:rgba(0,0,0,.1);color:var(--tx);}

/* ── Light theme: Footer ─────────────────────────────────── */
[data-theme="light"] footer{background:var(--bg1);border-top-color:rgba(124,92,252,.15);}
[data-theme="light"] .fd{color:var(--muted);}
[data-theme="light"] .fc h4{color:var(--v);}
[data-theme="light"] .fc a{color:var(--muted);}
[data-theme="light"] .fc a:hover{color:var(--tx);}
[data-theme="light"] .fb{color:var(--muted);border-top-color:rgba(124,92,252,.1);}
[data-theme="light"] .fb-lnk a{color:var(--muted);}
[data-theme="light"] .fsoc-b{background:var(--bg2);border-color:rgba(124,92,252,.18);color:var(--muted);}

/* ── Light theme: Rating system ──────────────────────────── */
[data-theme="light"] .rat-block{
  background:rgba(255,255,255,.9);
  border-color:rgba(124,92,252,.18);
}
[data-theme="light"] .rat-big-count{color:var(--muted);}
[data-theme="light"] .rat-bar-lbl,[data-theme="light"] .rat-bar-pct{color:var(--muted);}
[data-theme="light"] .rat-bar-track{background:rgba(0,0,0,.08);}
[data-theme="light"] .rat-picker-label{color:var(--muted);}
[data-theme="light"] .rat-star-btn svg.dim{fill:rgba(0,0,0,.15);}
[data-theme="light"] .rat-login-note{color:var(--muted);}

/* ── Light theme: Detail page ────────────────────────────── */
[data-theme="light"] .det-panel{
  background:rgba(255,255,255,.92);
  border-color:rgba(124,92,252,.18);
}
[data-theme="light"] .det-ph{border-bottom-color:rgba(124,92,252,.12);}
[data-theme="light"] .det-pt{color:var(--tx);}
[data-theme="light"] .det-pb{color:var(--tx);}
[data-theme="light"] .det-syn{color:var(--tx);}
[data-theme="light"] .det-syn::after{background:linear-gradient(0deg,rgba(255,255,255,.95),transparent);}
[data-theme="light"] .det-rm{color:var(--v);}
[data-theme="light"] .det-rm:hover{color:var(--v3);}
[data-theme="light"] .det-tags{border-top-color:rgba(124,92,252,.1);}
[data-theme="light"] .det-tag{background:rgba(124,92,252,.08);border-color:rgba(124,92,252,.18);color:var(--v3);}
[data-theme="light"] .ch-item:hover{background:rgba(124,92,252,.08);border-color:rgba(124,92,252,.2);}
[data-theme="light"] .ch-num{background:rgba(124,92,252,.08);color:var(--v3);}
[data-theme="light"] .ch-tit{color:var(--tx);}
[data-theme="light"] .det-fact{background:rgba(124,92,252,.06);border-color:rgba(124,92,252,.14);}
[data-theme="light"] .det-fl{color:var(--muted);}
[data-theme="light"] .det-fv{color:var(--tx);}
[data-theme="light"] .sh{color:var(--tx);}
[data-theme="light"] .sh::after{background:rgba(124,92,252,.15);}
[data-theme="light"] .rel-item:hover{background:rgba(124,92,252,.07);border-color:rgba(124,92,252,.18);}
[data-theme="light"] .rel-tit{color:var(--tx);}
[data-theme="light"] .rel-meta{color:var(--muted);}
[data-theme="light"] .det-back{
  background:rgba(124,92,252,.07);
  border-color:rgba(124,92,252,.18);
  color:var(--muted);
}
[data-theme="light"] .det-back:hover{background:rgba(124,92,252,.14);color:var(--tx);}
[data-theme="light"] .btn-det-l{
  background:rgba(124,92,252,.08);
  border-color:rgba(124,92,252,.22);
  color:var(--v3);
}
[data-theme="light"] .btn-det-l:hover{background:rgba(124,92,252,.16);}
[data-theme="light"] .dstat{
  background:rgba(124,92,252,.07);
  border-color:rgba(124,92,252,.18);
  color:var(--muted);
}
[data-theme="light"] .dstat strong{color:var(--tx);}

/* ── Light theme: Library page ───────────────────────────── */
[data-theme="light"] #lib-page{background:transparent;}
[data-theme="light"] .lib-empty{border-color:rgba(124,92,252,.2);}

/* ── Light theme: Scrollbar ──────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--v);}

/* ── Light theme: Coin shop ──────────────────────────────── */
[data-theme="light"] #nav .coin-btn{
  background:rgba(240,180,41,.12);
  border-color:rgba(240,180,41,.3);
}

/* ════════════════════════════════════════════════
   SEPIA THEME — Warm parchment reading mode
════════════════════════════════════════════════ */
[data-theme="sepia"]{
  --bg:#f5f0e8; --bg1:#ede6d6; --bg2:#e5dcc8; --bg3:#d9cfb8;
  --bg4:#ccc0a4; --bg5:#bfb190; --card:#faf7f0;
  --v:#7c5cfc; --v2:#5535d4; --v3:#5240c8; --v4:#5240c8;
  --gold:#b45309; --gold2:#d97706; --gold3:#92400e;
  --rose:#b91c1c; --teal:#0f766e; --green:#15803d;
  --tx:#2c1a0e; --muted:#7a5c3a; --muted2:#5c3d1e;
  --bd:rgba(120,80,30,.18); --bd2:rgba(120,80,30,.1); --bd3:rgba(120,80,30,.15);
  --glow:rgba(124,92,252,.16); --glow2:rgba(124,92,252,.28);
  --nav:60px; --max:1280px; --r:12px; --r2:18px;
  --gap:clamp(16px,4vw,48px);
}

/* ── Sepia: Body & ambient ───────────────────────────────── */
[data-theme="sepia"] body{background:var(--bg);color:var(--tx);}
[data-theme="sepia"] body::before{
  background:
    radial-gradient(ellipse 72% 52% at 14% -6%,rgba(180,130,60,.08) 0%,transparent 60%),
    radial-gradient(ellipse 56% 44% at 86% 102%,rgba(140,90,30,.06) 0%,transparent 56%);
}
[data-theme="sepia"] ::-webkit-scrollbar-thumb{background:var(--gold2);}

/* ── Sepia: Nav ──────────────────────────────────────────── */
[data-theme="sepia"] #nav{
  background:rgba(245,240,232,.96);
  border-bottom:1px solid rgba(120,80,30,.2);
  backdrop-filter:blur(32px);
}
[data-theme="sepia"] .logo-name{
  background:linear-gradient(130deg,#7c4f1e,#b45309,#7c5cfc,#d97706);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-theme="sepia"] .nav-links a{color:var(--muted);}
[data-theme="sepia"] .nav-links a:hover,[data-theme="sepia"] .nav-links a.on{color:var(--tx);border-color:var(--gold2);}
[data-theme="sepia"] .coin-btn{background:rgba(180,83,9,.1);border-color:rgba(180,83,9,.25);color:var(--gold);}
[data-theme="sepia"] .coin-btn:hover{background:rgba(180,83,9,.18);}
[data-theme="sepia"] .theme-btn{background:var(--bg3);border-color:rgba(120,80,30,.2);color:var(--tx);}
[data-theme="sepia"] .ham span{background:var(--tx);}
[data-theme="sepia"] .btn-log{border-color:rgba(120,80,30,.2);color:var(--v);}
[data-theme="sepia"] .btn-log:hover{background:rgba(124,92,252,.08);}
[data-theme="sepia"] .mob-menu{background:var(--bg1);border-color:rgba(120,80,30,.15);}
[data-theme="sepia"] .mob-nav-links a{color:var(--muted);border-color:rgba(120,80,30,.12);}

/* ── Sepia: Section headers ──────────────────────────────── */
[data-theme="sepia"] .sec-eyebrow{color:var(--gold);}
[data-theme="sepia"] .sec-title{color:var(--tx);}
[data-theme="sepia"] .sec-title::before{background:linear-gradient(var(--gold2),var(--gold));}
[data-theme="sepia"] .see-all{color:var(--v);}

/* ── Sepia: Stats band ───────────────────────────────────── */
[data-theme="sepia"] .stats-band{
  background:linear-gradient(90deg,rgba(180,83,9,.05),rgba(140,60,10,.09),rgba(180,83,9,.05));
  border-color:rgba(120,80,30,.14);
}
[data-theme="sepia"] .stat-l{color:var(--muted);}
[data-theme="sepia"] .stat-div{background:rgba(120,80,30,.2);}

/* ── Sepia: Trending cards ───────────────────────────────── */
[data-theme="sepia"] .fcard{
  background:var(--card);border-color:rgba(120,80,30,.18);
  box-shadow:0 2px 14px rgba(120,80,30,.1);
}
[data-theme="sepia"] .fcard:hover{
  border-color:rgba(124,92,252,.4);
  box-shadow:0 16px 40px rgba(120,80,30,.18);
}
[data-theme="sepia"] .fcard-title{color:var(--tx);}
[data-theme="sepia"] .fcard-synopsis{color:var(--muted);}
[data-theme="sepia"] .fcard-meta{color:var(--muted);border-top-color:rgba(120,80,30,.15);}
[data-theme="sepia"] .fcard-dot{color:rgba(120,80,30,.35);}
[data-theme="sepia"] .trend-arr{
  background:var(--bg2);border-color:rgba(120,80,30,.28);color:var(--v);
  box-shadow:0 4px 14px rgba(120,80,30,.15);
}
[data-theme="sepia"] .trend-arr:hover{background:var(--v);border-color:var(--v);color:#fff;}

/* ── Sepia: Genre panel ──────────────────────────────────── */
[data-theme="sepia"] .genre-panel{background:var(--bg1);border-color:rgba(120,80,30,.2);}
[data-theme="sepia"] .genre-group-label.orig{color:var(--v2);}
[data-theme="sepia"] .genre-group-label.fan{color:var(--gold);}
[data-theme="sepia"] .genre-group-line.orig{background:linear-gradient(90deg,rgba(124,92,252,.3),transparent);}
[data-theme="sepia"] .genre-group-line.fan{background:linear-gradient(90deg,rgba(180,83,9,.35),transparent);}
[data-theme="sepia"] .gpill{background:var(--bg2);border-color:rgba(120,80,30,.18);color:var(--muted);}
[data-theme="sepia"] .gpill:hover{background:rgba(124,92,252,.1);border-color:rgba(124,92,252,.4);color:var(--tx);}
[data-theme="sepia"] .gpill.on{background:var(--v);border-color:var(--v);color:#fff;}
[data-theme="sepia"] .gpill.fan-pill:hover{border-color:rgba(180,83,9,.4);color:var(--gold);background:rgba(180,83,9,.08);}

/* ── Sepia: Discover / search ────────────────────────────── */
[data-theme="sepia"] .disc-title{color:var(--tx);}
[data-theme="sepia"] .disc-sub{color:var(--muted);}
[data-theme="sepia"] .srch-in{
  background:var(--card);border-color:rgba(120,80,30,.25);color:var(--tx);
  box-shadow:inset 0 1px 3px rgba(120,80,30,.1),0 2px 8px rgba(120,80,30,.08);
}
[data-theme="sepia"] .srch-in::placeholder{color:var(--muted);}
[data-theme="sepia"] .srch-in:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(124,92,252,.12);}
[data-theme="sepia"] .srch-ic{color:var(--gold2);}
[data-theme="sepia"] .srch-clr{background:var(--bg3);color:var(--muted);}
[data-theme="sepia"] .tab{background:var(--bg2);border-color:rgba(120,80,30,.18);color:var(--muted);}
[data-theme="sepia"] .tab:hover{background:rgba(124,92,252,.1);border-color:rgba(124,92,252,.4);color:var(--tx);}
[data-theme="sepia"] .tab.on{background:var(--v);border-color:var(--v);color:#fff;}
[data-theme="sepia"] .fsel{
  background-color:var(--card);
  border-color:rgba(120,80,30,.18);
  color:var(--muted);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a5c3a'/%3E%3C/svg%3E");
}
[data-theme="sepia"] .fsel:hover{border-color:rgba(124,92,252,.4);color:var(--tx);}
[data-theme="sepia"] .srt-lbl{color:var(--muted);}
[data-theme="sepia"] .res-cnt{color:var(--muted);}

/* ── Sepia: Novel grid cards ─────────────────────────────── */
[data-theme="sepia"] .ncard{
  background:var(--card);border-color:rgba(120,80,30,.16);
  box-shadow:0 2px 12px rgba(120,80,30,.08);
}
[data-theme="sepia"] .ncard:hover{
  border-color:rgba(124,92,252,.4);
  box-shadow:0 18px 44px rgba(120,80,30,.16);
}
[data-theme="sepia"] .ncard-title{color:var(--tx);}
[data-theme="sepia"] .ncard-meta{color:var(--muted);}
[data-theme="sepia"] .ncard-sep{color:rgba(120,80,30,.3);}
[data-theme="sepia"] .skel{background:var(--bg2);border-color:rgba(120,80,30,.1);}
[data-theme="sepia"] .skel-cov,[data-theme="sepia"] .skel-ln{
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);
}
[data-theme="sepia"] .empty-t{color:var(--tx);}
[data-theme="sepia"] .empty-s{color:var(--muted);}
[data-theme="sepia"] .btn-lm{
  background:rgba(120,80,30,.08);border-color:rgba(120,80,30,.22);color:var(--muted2);
}
[data-theme="sepia"] .btn-lm:hover{background:rgba(120,80,30,.15);}

/* ── Sepia: Recently viewed ──────────────────────────────── */
[data-theme="sepia"] .rec-c{
  background:var(--card);border-color:rgba(120,80,30,.15);
  box-shadow:0 2px 10px rgba(120,80,30,.08);
}
[data-theme="sepia"] .rec-c:hover{border-color:rgba(124,92,252,.38);box-shadow:0 12px 30px rgba(120,80,30,.15);}
[data-theme="sepia"] .rec-tit{color:var(--tx);}

/* ── Sepia: OAuth banner ─────────────────────────────────── */
[data-theme="sepia"] .oauth-banner{
  background:linear-gradient(135deg,rgba(124,92,252,.07),rgba(120,80,30,.04));
  border-color:rgba(120,80,30,.18);
}
[data-theme="sepia"] .ob-title{color:var(--tx);}
[data-theme="sepia"] .ob-sub{color:var(--muted);}
[data-theme="sepia"] .ob-dismiss{color:var(--muted);}

/* ── Sepia: Modals ───────────────────────────────────────── */
[data-theme="sepia"] .ov{background:rgba(245,240,232,.92);}
[data-theme="sepia"] .mbox{background:var(--card);border-color:rgba(120,80,30,.2);}
[data-theme="sepia"] .mt{color:var(--tx);}
[data-theme="sepia"] .ms{color:var(--muted);}
[data-theme="sepia"] .mclose{background:var(--bg3);color:var(--tx);}
[data-theme="sepia"] .mclose:hover{background:var(--bg4);}
[data-theme="sepia"] .pkg{background:var(--bg2);border-color:rgba(120,80,30,.14);}
[data-theme="sepia"] .pkg:hover{background:rgba(180,83,9,.06);border-color:var(--gold);}
[data-theme="sepia"] .pkg-l{color:var(--muted);}
[data-theme="sepia"] .pkg-p{color:var(--tx);}

/* ── Sepia: Toasts ───────────────────────────────────────── */
[data-theme="sepia"] .toast{background:var(--card);border-color:rgba(120,80,30,.15);color:var(--tx);}

/* ── Sepia: Footer ───────────────────────────────────────── */
[data-theme="sepia"] footer{background:var(--bg1);border-top-color:rgba(120,80,30,.18);}
[data-theme="sepia"] .fd{color:var(--muted);}
[data-theme="sepia"] .fc h4{color:var(--gold);}
[data-theme="sepia"] .fc a{color:var(--muted);}
[data-theme="sepia"] .fc a:hover{color:var(--tx);}
[data-theme="sepia"] .fb{color:var(--muted);border-top-color:rgba(120,80,30,.12);}
[data-theme="sepia"] .fb-lnk a{color:var(--muted);}
[data-theme="sepia"] .fsoc-b{background:var(--bg2);border-color:rgba(120,80,30,.18);color:var(--muted);}

/* ── Sepia: Rating system ────────────────────────────────── */
[data-theme="sepia"] .rat-block{background:rgba(250,247,240,.95);border-color:rgba(120,80,30,.18);}
[data-theme="sepia"] .rat-big-count{color:var(--muted);}
[data-theme="sepia"] .rat-bar-lbl,[data-theme="sepia"] .rat-bar-pct{color:var(--muted);}
[data-theme="sepia"] .rat-bar-track{background:rgba(120,80,30,.12);}
[data-theme="sepia"] .rat-picker-label{color:var(--muted);}
[data-theme="sepia"] .rat-star-btn svg.dim{fill:rgba(120,80,30,.18);}
[data-theme="sepia"] .rat-login-note{color:var(--muted);}

/* ── Sepia: Detail page ──────────────────────────────────── */
[data-theme="sepia"] .det-panel{background:rgba(250,247,240,.94);border-color:rgba(120,80,30,.18);}
[data-theme="sepia"] .det-ph{border-bottom-color:rgba(120,80,30,.14);}
[data-theme="sepia"] .det-pt{color:var(--tx);}
[data-theme="sepia"] .det-syn{color:var(--tx);}
[data-theme="sepia"] .det-syn::after{background:linear-gradient(0deg,rgba(250,247,240,.96),transparent);}
[data-theme="sepia"] .det-rm{color:var(--v);}
[data-theme="sepia"] .det-tags{border-top-color:rgba(120,80,30,.1);}
[data-theme="sepia"] .det-tag{background:rgba(120,80,30,.07);border-color:rgba(120,80,30,.16);color:var(--muted2);}

/* ── Share button ───────────────────────────────────────────── */
.btn-det-share{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 20px;border-radius:11px;font-size:.84rem;font-weight:600;
  font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;
  background:rgba(124,92,252,.12);border:1px solid rgba(124,92,252,.28);
  color:var(--v2);white-space:nowrap;
}
.btn-det-share:hover{background:rgba(124,92,252,.22);border-color:var(--v);color:#fff;transform:translateY(-1px);}
.btn-det-share.copied{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.35);color:#4ade80;}
[data-theme="light"] .btn-det-share{background:rgba(124,92,252,.08);border-color:rgba(124,92,252,.25);color:var(--v);}
[data-theme="light"] .btn-det-share:hover{background:rgba(124,92,252,.16);border-color:var(--v);color:var(--v3);}
[data-theme="sepia"] .btn-det-share{background:rgba(120,80,30,.07);border-color:rgba(120,80,30,.22);color:var(--muted2);}
[data-theme="sepia"] .btn-det-share:hover{background:rgba(124,92,252,.1);border-color:var(--v);color:var(--v2);}

[data-theme="sepia"] .ch-item:hover{background:rgba(124,92,252,.07);border-color:rgba(124,92,252,.18);}
[data-theme="sepia"] .ch-num{background:rgba(120,80,30,.08);color:var(--muted2);}
[data-theme="sepia"] .ch-tit{color:var(--tx);}
[data-theme="sepia"] .det-fact{background:rgba(120,80,30,.05);border-color:rgba(120,80,30,.14);}
[data-theme="sepia"] .det-fl{color:var(--muted);}
[data-theme="sepia"] .det-fv{color:var(--tx);}
[data-theme="sepia"] .sh{color:var(--tx);}
[data-theme="sepia"] .sh::after{background:rgba(120,80,30,.15);}
[data-theme="sepia"] .rel-tit{color:var(--tx);}
[data-theme="sepia"] .rel-meta{color:var(--muted);}
[data-theme="sepia"] .rel-item:hover{background:rgba(124,92,252,.07);border-color:rgba(124,92,252,.16);}
[data-theme="sepia"] .det-back{background:rgba(120,80,30,.06);border-color:rgba(120,80,30,.16);color:var(--muted);}
[data-theme="sepia"] .det-back:hover{background:rgba(120,80,30,.12);color:var(--tx);}
[data-theme="sepia"] .btn-det-l{background:rgba(120,80,30,.07);border-color:rgba(120,80,30,.2);color:var(--muted2);}
[data-theme="sepia"] .btn-det-l:hover{background:rgba(120,80,30,.14);}
[data-theme="sepia"] .dstat{background:rgba(120,80,30,.06);border-color:rgba(120,80,30,.14);color:var(--muted);}
[data-theme="sepia"] .dstat strong{color:var(--tx);}
[data-theme="sepia"] .lib-empty{border-color:rgba(120,80,30,.2);}

/* ── Reset ──────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6;
  background:var(--bg);color:var(--tx);overflow-x:hidden;min-height:100vh;min-height:100dvh;
  transition:background .3s,color .3s;
}
/* Prevent iOS Safari from zooming on input focus (inputs must be ≥16px) */
input,select,textarea{font-size:max(16px,1em);}
/* Ambient glow */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 72% 52% at 14% -6%, rgba(124,92,252,.20) 0%, transparent 60%),
    radial-gradient(ellipse 56% 44% at 86% 102%, rgba(106,85,224,.15) 0%, transparent 56%);
}
body>*{position:relative;z-index:1;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
img{display:block;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--v);border-radius:2px;}

/* ── Page visibility ────────────────────────────────────── */
.page{display:none;}.page.on{display:block;}

/* ════════════════════════════════════════════════
   NAV
════════════════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--nav);padding:0 var(--gap);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(15,10,30,.88);
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border-bottom:1px solid var(--bd);transition:background .3s;
}
[data-theme="light"] #nav{background:rgba(241,238,255,.95);}

.logo{display:flex;align-items:center;gap:9px;cursor:pointer;flex-shrink:0;}
.logo img{height:32px;width:32px;object-fit:contain;border-radius:8px;}
.logo-name{
  font-family:'Fraunces',serif;font-size:1.18rem;font-weight:900;letter-spacing:-.3px;
  background:linear-gradient(130deg,#ddd4ff,#a78bfa,#7c5cfc,#f0b429);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.nav-links{display:flex;gap:1.3rem;align-items:center;}
.nav-links a{
  font-size:.86rem;font-weight:500;color:var(--muted2);cursor:pointer;
  padding:3px 0;border-bottom:2px solid transparent;transition:all .18s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.on{color:var(--tx);border-color:var(--v);}

/* ── Browse dropdown in nav ──────────────────────────────── */
.nav-dropdown{position:relative;display:flex;align-items:center;}

.nav-dd-trigger{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;
  font-family:'DM Sans',sans-serif;font-size:.86rem;font-weight:500;
  color:var(--muted2);cursor:pointer;padding:3px 0;
  border-bottom:2px solid transparent;
  transition:all .18s;white-space:nowrap;
}
.nav-dd-trigger:hover,.nav-dd-trigger.on{color:var(--tx);border-color:var(--v);}
.nav-dd-trigger.on{color:var(--tx);}
.nav-dd-arrow{transition:transform .22s;flex-shrink:0;opacity:.7;}
.nav-dropdown.open .nav-dd-arrow{transform:rotate(180deg);}

.nav-dd-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:230px;
  background:var(--bg2);
  border:1px solid var(--bd);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px rgba(124,92,252,.1);
  padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:1000;
}
.nav-dropdown.open .nav-dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.nav-dd-header{
  font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:4px 12px 8px;
}
.nav-dd-divider{height:1px;background:var(--bd2);margin:4px 0;}

.nav-dd-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:9px;cursor:pointer;
  transition:background .15s,color .15s;border:1px solid transparent;
}
.nav-dd-item:hover{background:rgba(124,92,252,.1);border-color:rgba(124,92,252,.18);}
.nav-dd-item.active{background:rgba(124,92,252,.14);border-color:rgba(124,92,252,.28);}

.nav-dd-icon{font-size:1.15rem;flex-shrink:0;line-height:1;width:26px;text-align:center;}
.nav-dd-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.nav-dd-name{font-size:.86rem;font-weight:600;color:var(--tx);line-height:1.3;}
.nav-dd-desc{font-size:.72rem;color:var(--muted);line-height:1.3;}
.nav-dd-check{color:var(--v);flex-shrink:0;}
.nav-dd-all .nav-dd-name{color:var(--muted2);}
.nav-dd-all:hover .nav-dd-name{color:var(--tx);}

/* Light / sepia theme overrides */
[data-theme="light"] .nav-dd-menu{
  background:var(--card);border-color:rgba(124,92,252,.18);
  box-shadow:0 16px 48px rgba(0,0,0,.14),0 0 0 1px rgba(124,92,252,.1);
}
[data-theme="light"] .nav-dd-item:hover{background:rgba(124,92,252,.07);}
[data-theme="light"] .nav-dd-item.active{background:rgba(124,92,252,.1);}
[data-theme="sepia"] .nav-dd-menu{
  background:var(--card);border-color:rgba(120,80,30,.2);
  box-shadow:0 16px 48px rgba(120,80,30,.18),0 0 0 1px rgba(120,80,30,.08);
}
[data-theme="sepia"] .nav-dd-item:hover{background:rgba(124,92,252,.07);}

/* ── Mobile category group ───────────────────────────────── */
.mob-cat-group{
  display:flex;flex-direction:column;
  border-top:1px solid var(--bd2);
  border-bottom:1px solid var(--bd2);
  margin:4px 0;padding:6px 0;gap:0;
}
.mob-cat-label{
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:0 0 6px 16px;
}
.mob-cat-group a{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;color:var(--muted2);font-size:.9rem;font-weight:500;
  cursor:pointer;transition:background .16s,color .16s;border-radius:9px;
}
.mob-cat-group a:hover,.mob-cat-group a.on{background:rgba(124,92,252,.1);color:var(--tx);}
.mob-cat-group a.on{font-weight:700;color:var(--v2);}

.nav-r{display:flex;gap:7px;align-items:center;}

/* Coin pill */
.coin-btn{
  display:flex;align-items:center;gap:5px;
  background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.2);
  border-radius:100px;padding:5px 13px;
  font-size:.8rem;font-weight:700;color:var(--gold);cursor:pointer;transition:all .18s;white-space:nowrap;
}
.coin-btn:hover{background:rgba(240,180,41,.16);transform:translateY(-1px);}

/* Icon btn (theme toggle) */
.theme-btn{
  width:34px;height:34px;border-radius:9px;
  background:var(--bg3);border:1px solid var(--bd2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.9rem;transition:all .18s;flex-shrink:0;
}
.theme-btn:hover{border-color:var(--v);}

/* Auth buttons */
.btn-log{
  padding:6px 15px;border-radius:9px;background:transparent;border:1px solid var(--bd);
  color:var(--v2);font-family:'DM Sans',sans-serif;font-size:.83rem;font-weight:600;
  cursor:pointer;transition:all .18s;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;
}
.btn-log:hover{background:rgba(124,92,252,.1);}
.btn-reg{
  padding:6px 15px;border-radius:9px;
  background:linear-gradient(135deg,var(--v3),var(--v));
  border:none;color:#fff;font-family:'DM Sans',sans-serif;font-size:.83rem;font-weight:600;
  cursor:pointer;transition:all .18s;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;
}
.btn-reg:hover{transform:translateY(-1px);box-shadow:0 4px 18px var(--glow);}

/* Hamburger */
.ham{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  background:none;border:none;padding:4px;flex-shrink:0;
}
.ham span{width:22px;height:2px;background:var(--tx);border-radius:2px;transition:all .28s;}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ════════════════════════════════════════════════
   NAV GLOBAL SEARCH
════════════════════════════════════════════════ */
.nav-search{
  position:relative;
  display:flex;align-items:center;
  flex:1;max-width:320px;min-width:0;
}
.nav-srch-in{
  width:100%;
  padding:7px 36px 7px 36px;
  background:var(--bg2);
  border:1.5px solid var(--bd3);
  border-radius:100px;
  color:var(--tx);
  font-family:'DM Sans',sans-serif;
  font-size:.85rem;
  outline:none;
  transition:all .22s;
}
.nav-srch-in::placeholder{color:var(--muted);}
.nav-srch-in:focus{
  border-color:var(--v);
  background:var(--bg3);
  box-shadow:0 0 0 3px var(--glow);
  width:100%;
}
.nav-srch-ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--muted2);font-size:.88rem;pointer-events:none;
  transition:color .18s;
}
.nav-srch-in:focus ~ .nav-srch-ic,
.nav-srch-in:not(:placeholder-shown) ~ .nav-srch-ic{color:var(--v);}
.nav-srch-clr{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  background:var(--bg4);border:none;
  color:var(--muted2);font-size:.72rem;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  transition:all .16s;
}
.nav-srch-clr.on{display:flex;}
.nav-srch-clr:hover{background:var(--v);color:#fff;}

/* Light theme nav search */
[data-theme="light"] .nav-srch-in{
  background:var(--bg2);border-color:rgba(124,92,252,.22);color:var(--tx);
}
[data-theme="light"] .nav-srch-in:focus{
  background:var(--card);border-color:var(--v);
  box-shadow:0 0 0 3px rgba(124,92,252,.12);
}
[data-theme="light"] .nav-srch-ic{color:var(--muted);}
[data-theme="light"] .nav-srch-clr{background:var(--bg3);color:var(--muted);}

/* Sepia theme nav search */
[data-theme="sepia"] .nav-srch-in{
  background:var(--bg2);border-color:rgba(120,80,30,.22);color:var(--tx);
}
[data-theme="sepia"] .nav-srch-in:focus{
  background:var(--card);border-color:var(--v);
  box-shadow:0 0 0 3px rgba(124,92,252,.1);
}
[data-theme="sepia"] .nav-srch-ic{color:var(--muted);}
[data-theme="sepia"] .nav-srch-clr{background:var(--bg3);color:var(--muted);}

/* Hide on mobile — uses existing mobile menu search */
@media(max-width:768px){.nav-search{display:none;}}
.mob-menu{
  display:none;position:fixed;top:var(--nav);left:0;right:0;
  background:var(--bg2);border-bottom:1px solid var(--bd);
  padding:0 var(--gap) 22px;z-index:899;
  flex-direction:column;max-height:calc(100dvh - var(--nav));overflow-y:auto;
}
.mob-menu.open{display:flex;animation:slideDown .22s ease both;}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.mob-utils{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--bd2);gap:10px;}
.mob-coin-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:10px;background:rgba(240,180,41,.07);border:1px solid rgba(240,180,41,.18);font-size:.84rem;font-weight:700;color:var(--gold);cursor:pointer;}
.mob-theme-btn{width:42px;height:42px;border-radius:10px;background:var(--bg3);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;flex-shrink:0;}
.mob-nav-links{display:flex;flex-direction:column;padding:6px 0;}
.mob-nav-links a{font-size:.94rem;color:var(--muted2);padding:11px 0;border-bottom:1px solid var(--bd2);cursor:pointer;display:flex;align-items:center;gap:10px;transition:color .18s;}
.mob-nav-links a:last-child{border-bottom:none;}
.mob-nav-links a:hover{color:var(--tx);}
.mob-nav-icon{font-size:.95rem;width:22px;text-align:center;flex-shrink:0;}
.mob-auth{display:flex;gap:8px;padding-top:14px;}
.mob-auth a{flex:1;text-align:center;padding:11px;border-radius:10px;display:block;font-size:.88rem;font-weight:600;}

/* ════════════════════════════════════════════════
   HERO SLIDER
════════════════════════════════════════════════ */
#hero{
  position:relative;width:100%;
  height:calc(100svh - var(--nav));min-height:500px;max-height:860px;
  overflow:hidden;background:#03020c;margin-top:var(--nav);
}
.slider{position:absolute;inset:0;width:100%;height:100%;}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1);cursor:pointer;}
.slide.active{opacity:1;z-index:2;}
.slide.prev{opacity:0;z-index:1;}

/* Background image + gradient base */
.s-bg{
  position:absolute;inset:0;width:100%;height:100%;
  background-size:cover;background-position:center;
  transform:scale(1.04);transition:transform 10s ease;
}
.slide.active .s-bg{transform:scale(1);}
.s-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}

/* Layer 1 — bottom & top fades */
.s-vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(0deg,  rgba(15,10,30,.94) 0%, rgba(15,10,30,.38) 24%, transparent 52%),
    linear-gradient(180deg,rgba(15,10,30,.42) 0%, transparent 22%);
}
/* Layer 2 — full opaque left panel so text is always legible */
.s-leftpanel{
  position:absolute;top:0;left:0;bottom:0;width:60%;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,10,30,1) 0%,rgba(15,10,30,1) 48%,rgba(3,2,12,0) 100%);
}

/* Content */
.s-content{
  position:absolute;top:50%;left:0;transform:translateY(-50%);z-index:10;
  padding:0 clamp(20px,5vw,72px);width:min(560px,52%);pointer-events:none;
}
.s-content button,.s-content a{pointer-events:auto;}

/* Slide-in animations */
.slide.active .s-eyebrow {animation:sIn .38s .04s ease both;}
.slide.active .s-genres  {animation:sIn .38s .09s ease both;}
.slide.active .s-title   {animation:sIn .48s .15s ease both;}
.slide.active .s-author  {animation:sIn .38s .21s ease both;}
.slide.active .s-desc    {animation:sIn .38s .26s ease both;}
.slide.active .s-meta    {animation:sIn .38s .31s ease both;}
.slide.active .s-actions {animation:sIn .38s .37s ease both;}
@keyframes sIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}

.s-eyebrow{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;opacity:0;
  font-size:.58rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--v2);
}
.s-eye-dot{width:5px;height:5px;border-radius:50%;background:var(--v);box-shadow:0 0 8px var(--v);animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.22}}

.s-genres{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px;opacity:0;}
.s-gtag{
  padding:3px 10px;border-radius:100px;
  background:rgba(124,92,252,.2);border:1px solid rgba(179,168,248,.28);
  font-size:.62rem;font-weight:700;color:#c4b8fb;backdrop-filter:blur(8px);
}

.s-title{
  font-family:'Fraunces',serif;
  font-size:clamp(1.6rem,3.2vw,3.1rem);
  font-weight:900;line-height:1.04;color:#fff;
  margin-bottom:10px;letter-spacing:-.022em;
  text-shadow:0 2px 36px rgba(0,0,0,.8);opacity:0;
}
.s-author{font-size:.78rem;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:8px;margin-bottom:12px;opacity:0;}
.s-author-av{
  width:21px;height:21px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--v),var(--v2));
  display:inline-flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:800;color:#fff;
}
.s-desc{
  font-size:.84rem;color:rgba(255,255,255,.85);line-height:1.7;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;opacity:0;
}
.s-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:18px;opacity:0;}
.s-pill{
  display:inline-flex;align-items:center;gap:3px;font-size:.63rem;
  color:rgba(255,255,255,.90);padding:3px 9px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(6px);
}
.s-pill.prem{background:rgba(240,180,41,.11);border-color:rgba(240,180,41,.3);color:var(--gold);}
.s-pill.free{background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.22);color:#4ade80;}

.s-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;opacity:0;}
.s-btn-read{
  display:inline-flex;align-items:center;gap:7px;padding:12px 24px;border-radius:11px;
  background:linear-gradient(135deg,var(--v3),var(--v));color:#fff;border:none;
  font-family:'DM Sans',sans-serif;font-size:.86rem;font-weight:700;cursor:pointer;
  transition:all .22s;box-shadow:0 6px 24px var(--glow);
}
.s-btn-read:hover{transform:translateY(-2px);box-shadow:0 12px 36px var(--glow2);}
.s-btn-info{
  display:inline-flex;align-items:center;gap:6px;padding:12px 18px;border-radius:11px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:.84rem;font-weight:600;cursor:pointer;
  transition:all .2s;backdrop-filter:blur(10px);
}
.s-btn-info:hover{background:rgba(255,255,255,.13);border-color:rgba(124,92,252,.4);}

/* 3D Book */
.s-bookzone{
  position:absolute;right:clamp(3vw,6vw,80px);top:50%;transform:translateY(-50%);
  z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center;
}
.s-book3d{
  width:clamp(136px,13.5vw,205px);aspect-ratio:2/3;
  border-radius:7px 13px 13px 7px;overflow:hidden;position:relative;
  box-shadow:-11px 0 42px rgba(0,0,0,.78),0 34px 78px rgba(0,0,0,.86),0 0 0 1px rgba(255,255,255,.08);
  transform:perspective(900px) rotateY(-10deg) rotateX(2deg);
  transition:transform .55s ease,box-shadow .55s ease;
}
.slide.active .s-book3d{animation:bookIn .8s .1s cubic-bezier(.16,1,.3,1) both;}
@keyframes bookIn{
  from{opacity:0;transform:perspective(900px) rotateY(-22deg) rotateX(5deg) translateX(38px);}
  to  {opacity:1;transform:perspective(900px) rotateY(-10deg) rotateX(2deg) translateX(0);}
}
.s-bookzone:hover .s-book3d{
  transform:perspective(900px) rotateY(-3deg) rotateX(1deg) translateY(-7px);
  box-shadow:-13px 0 56px rgba(0,0,0,.88),0 50px 100px rgba(0,0,0,.92),0 0 0 1px rgba(255,255,255,.13);
}
.s-book3d img,.s-book3d-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.s-book3d-fill{display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;font-family:'Fraunces',serif;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.88);line-height:1.3;}
.s-book3d::before{content:'';position:absolute;top:0;left:0;width:13px;bottom:0;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(255,255,255,.07),rgba(0,0,0,.24));z-index:3;}
.s-book3d::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.13) 0%,transparent 46%,rgba(0,0,0,.11) 100%);z-index:4;pointer-events:none;}
.s-book-glow{position:absolute;width:130%;height:130%;left:-15%;top:-15%;border-radius:50%;background:radial-gradient(ellipse,rgba(124,92,252,.22) 0%,transparent 68%);animation:gpulse 4s ease-in-out infinite;}
@keyframes gpulse{0%,100%{opacity:.45;transform:scale(1);}50%{opacity:.85;transform:scale(1.1);}}
.s-book-badge{position:absolute;top:-11px;right:-11px;z-index:6;padding:3px 10px;border-radius:100px;font-size:.57rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.s-book-badge.hot{background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;box-shadow:0 3px 12px rgba(244,63,94,.48);}
.s-book-badge.new{background:linear-gradient(135deg,#2dd4bf,#0891b2);color:#000;box-shadow:0 3px 12px rgba(45,212,191,.38);}
.s-book-badge.feat{background:linear-gradient(135deg,var(--gold),#d97706);color:#000;box-shadow:0 3px 12px rgba(240,180,41,.38);}
.s-book-pill{
  position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);z-index:6;
  white-space:nowrap;padding:3px 11px;border-radius:100px;
  background:rgba(15,10,30,.92);backdrop-filter:blur(12px);
  border:1px solid rgba(124,92,252,.32);color:var(--v2);font-size:.58rem;font-weight:700;
}

/* Carousel controls */
.c-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:6;align-items:center;}
.c-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.26);cursor:pointer;border:none;padding:0;transition:all .28s;}
.c-dot.on{background:var(--v);width:22px;border-radius:4px;box-shadow:0 0 8px var(--glow);}
.c-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:42px;height:42px;border-radius:50%;
  background:rgba(15,10,30,.48);border:1px solid rgba(255,255,255,.12);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(16px);opacity:0;transition:opacity .28s,background .18s,transform .18s;
}
#hero:hover .c-arrow{opacity:1;}
.c-arrow:hover{background:rgba(124,92,252,.58);border-color:rgba(124,92,252,.72);transform:translateY(-50%) scale(1.08);}
.c-prev{left:16px;}.c-next{right:16px;}
.s-progress{position:absolute;bottom:0;left:0;right:0;height:2px;z-index:7;background:rgba(255,255,255,.05);}
.s-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--v),var(--v2),var(--gold));transition:width .1s linear;}



/* ════════════════════════════════════════════════
   SECTION LAYOUT HELPERS
════════════════════════════════════════════════ */
.sec-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gap);}
.section{padding:52px 0;}
.section-sm{padding:36px 0;}

.sec-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:12px;}
.sec-hdr-left{display:flex;flex-direction:column;gap:3px;}
.sec-eyebrow{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--v);font-family:'DM Mono',monospace;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.sec-title{
  font-family:'Fraunces',serif;font-size:clamp(1.1rem,1.9vw,1.45rem);font-weight:900;
  display:flex;align-items:center;gap:9px;margin:0;
}
.sec-title::before{
  content:'';display:inline-block;width:3px;height:17px;
  background:linear-gradient(var(--v),var(--v2));border-radius:2px;flex-shrink:0;
}
.see-all{
  font-size:.78rem;font-weight:600;color:var(--v2);cursor:pointer;
  transition:color .18s;display:flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0;
}
.see-all:hover{color:#fff;}

/* ════════════════════════════════════════════════
   STATS BAND
════════════════════════════════════════════════ */
.stats-band{
  background:linear-gradient(90deg,rgba(124,92,252,.05),rgba(124,92,252,.09),rgba(124,92,252,.05));
  border-top:1px solid rgba(124,92,252,.09);
  border-bottom:1px solid rgba(124,92,252,.07);
  padding:18px var(--gap);
}
.stats-band-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(28px,6vw,80px);flex-wrap:wrap;
}
.stat-n{font-family:'Fraunces',serif;font-size:clamp(1.4rem,2.8vw,2rem);font-weight:900;line-height:1;}
.stat-n.v{background:linear-gradient(135deg,var(--v2),var(--v));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat-n.g{background:linear-gradient(135deg,var(--gold2),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat-n.t{background:linear-gradient(135deg,#a7f3d0,var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat-l{font-size:.63rem;color:var(--muted);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:3px;}
.stat-div{width:1px;height:30px;background:rgba(124,92,252,.16);}

/* ════════════════════════════════════════════════
   TRENDING STRIP — 5-card carousel
════════════════════════════════════════════════ */
.trend-wrap{position:relative;}

/* Arrow buttons */
.trend-arr{
  position:absolute;top:50%;transform:translateY(-60%);z-index:10;
  width:44px;height:44px;border-radius:50%;
  background:var(--bg2);border:1.5px solid rgba(124,92,252,.35);
  color:var(--v2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.trend-arr:hover{
  background:var(--v);border-color:var(--v);color:#fff;
  box-shadow:0 6px 28px var(--glow);transform:translateY(-60%) scale(1.08);
}
.trend-arr:disabled{opacity:.25;cursor:default;pointer-events:none;}
.trend-arr-prev{left:-22px;}
.trend-arr-next{right:-22px;}

/* The grid track */
.h-scroll{
  display:grid;
  /* Column tracks and gap are inherited from the shared `.grid,.h-scroll` rule
     below, at every breakpoint. Previously this was a fixed repeat(5,1fr):
     the strip rendered 5 cards of 209px while the Discover grid rendered 4 of
     265px at the same width, so card edges never lined up between sections. */
  overflow:hidden;
  padding:6px 2px 18px;
  align-items:stretch;          /* all cells equal height */
}

/* Featured card — equal height, internal layout via flex */
.fcard{
  display:block;text-decoration:none;color:inherit;
  width:100%;min-width:0;
  height:100%;                  /* fill the grid cell fully */
  border-radius:14px;overflow:hidden;
  background:var(--card);border:1px solid var(--bd2);
  cursor:pointer;transition:transform .28s,box-shadow .28s,border-color .28s;
  display:flex;flex-direction:column;
  position:relative;
}
.fcard:hover{
  transform:translateY(-8px);
  border-color:rgba(124,92,252,.5);
  box-shadow:0 24px 56px rgba(0,0,0,.7);
}

/* Cover image — same height for every card */
.fcard-img{
  width:100%;height:220px;
  position:relative;overflow:hidden;flex-shrink:0;
}
.fcard-img img,.fcard-img-fallback{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;display:block;
  transition:transform .42s ease;
}
.fcard:hover .fcard-img img{transform:scale(1.07);}
.fcard-img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(15,10,30,.95) 0%,rgba(15,10,30,.5) 38%,transparent 65%);
}

/* Genre tags */
.fcard-img-tags{
  position:absolute;bottom:10px;left:10px;right:10px;z-index:2;
  display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden;
  pointer-events:none;
}
.fcard-genre{
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:rgba(106,85,224,.92);border:1px solid rgba(179,168,248,.3);
  padding:3px 10px;border-radius:6px;backdrop-filter:blur(8px);white-space:nowrap;flex-shrink:0;
}

/* Card body — flex column, meta pinned to bottom */
.fcard-body{
  padding:14px 15px 16px;
  display:flex;flex-direction:column;
  flex:1;                       /* take remaining height */
  min-height:0;
}

/* Title — fixed 2 lines, same height every card */
.fcard-title{
  font-family:'Fraunces',serif;font-size:.98rem;font-weight:800;
  color:var(--tx);                          /* solid color — no clip gradient that can vanish */
  line-height:1.38;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.76em;
  margin-bottom:8px;
}

/* Synopsis — fixed 3 lines, same height every card */
.fcard-synopsis{
  font-size:.82rem;color:var(--muted2);line-height:1.62;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:3.62em;
  flex:1;
  margin-bottom:10px;
}

/* Meta — always sits at the very bottom */
.fcard-meta{
  display:flex;align-items:center;gap:5px;
  font-size:.8rem;color:var(--muted2);flex-wrap:nowrap;overflow:hidden;
  padding-top:10px;
  border-top:1px solid var(--bd3);
  margin-top:auto;
}
.fcard-rat{color:var(--gold);font-weight:700;}
.fcard-dot{color:rgba(255,255,255,.4);}     /* visible separator */
.fcard-pro{color:var(--gold);font-weight:700;}

/* ════════════════════════════════════════════════
   GENRE PANEL — Originals / Fan-Fiction
════════════════════════════════════════════════ */
.genre-panel{
  background:var(--bg2);
  border:1px solid rgba(124,92,252,.18);
  border-radius:16px;
  padding:20px 22px;
  margin-bottom:22px;
}
.genre-group{margin-bottom:16px;}
.genre-group:last-child{margin-bottom:0;}
.genre-group-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.genre-group-label{
  font-size:.72rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;white-space:nowrap;flex-shrink:0;
}
.genre-group-label.orig{color:var(--v2);}
.genre-group-label.fan{color:var(--gold);}
.genre-group-line{flex:1;height:1px;}
.genre-group-line.orig{background:linear-gradient(90deg,rgba(124,92,252,.4),transparent);}
.genre-group-line.fan{background:linear-gradient(90deg,rgba(240,180,41,.4),transparent);}
.genre-pills{display:flex;gap:8px;flex-wrap:wrap;}
.gpill{
  padding:8px 18px;border-radius:100px;font-size:.88rem;font-weight:600;
  border:1.5px solid rgba(255,255,255,.12);
  background:var(--bg3);
  color:var(--muted2);
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .18s;
}
.gpill:hover{
  color:var(--tx);
  border-color:rgba(124,92,252,.5);
  background:rgba(124,92,252,.12);
}
.gpill.on{
  background:var(--v);border-color:var(--v);
  color:#fff;box-shadow:0 3px 14px var(--glow);
}
.gpill.fan-pill:hover{border-color:rgba(240,180,41,.45);color:var(--gold);background:rgba(240,180,41,.08);}
.gpill.fan-pill.on{
  background:linear-gradient(135deg,#b45309,var(--gold));
  border-color:var(--gold);color:#000;
  box-shadow:0 3px 14px rgba(240,180,41,.4);
}
.gpill.gpill-all{border-style:solid;}

/* ════════════════════════════════════════════════
   DISCOVER / BROWSE SECTION
════════════════════════════════════════════════ */
.disc-header{margin-bottom:28px;}
.disc-title{
  font-family:'Fraunces',serif;font-size:clamp(1.5rem,2.4vw,2.2rem);
  font-weight:900;margin:0 0 8px;
}
.disc-sub{color:var(--muted2);font-size:.96rem;line-height:1.68;max-width:520px;}

/* ── Search bar ─────────────────────────────── */
.srch-wrap{position:relative;margin-bottom:22px;}
.srch-in{
  width:100%;padding:15px 20px 15px 52px;
  background:var(--bg2);
  border:1.5px solid rgba(124,92,252,.25);
  border-radius:14px;
  color:var(--tx);font-family:'DM Sans',sans-serif;font-size:1rem;
  transition:all .22s;outline:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 2px 12px rgba(0,0,0,.2);
}
.srch-in:focus{
  border-color:var(--v);
  box-shadow:0 0 0 3px rgba(124,92,252,.15),inset 0 1px 3px rgba(0,0,0,.3);
}
.srch-in::placeholder{color:var(--muted);}
.srch-ic{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-size:1.05rem;color:var(--v2);
}
.srch-clr{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;
  background:var(--bg4);border:1px solid var(--bd3);
  color:var(--muted2);font-size:.85rem;cursor:pointer;
  display:none;align-items:center;justify-content:center;transition:all .16s;
}
.srch-clr:hover{background:var(--bg5);color:var(--tx);}
.srch-clr.on{display:flex;}

/* ── Status tabs ────────────────────────────── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.tab{
  padding:9px 22px;border-radius:100px;font-size:.9rem;font-weight:600;
  border:1.5px solid rgba(255,255,255,.12);
  background:var(--bg2);
  color:var(--muted2);
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .18s;
}
.tab:hover{
  color:var(--tx);
  border-color:rgba(124,92,252,.5);
  background:rgba(124,92,252,.1);
}
.tab.on{
  background:var(--v);border-color:var(--v);
  color:#fff;box-shadow:0 4px 18px var(--glow);
}

/* ── Filter bar ─────────────────────────────── */
.ctrl-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.fltrs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.fsel{
  padding:8px 14px;border-radius:10px;
  background-color:var(--bg2);
  border:1.5px solid rgba(255,255,255,.12);
  color:var(--muted2);font-family:'DM Sans',sans-serif;font-size:.88rem;
  cursor:pointer;outline:none;transition:all .16s;
  -webkit-appearance:none;appearance:none;
  padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239f9dc6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px 6px;
}
.fsel:hover{border-color:rgba(124,92,252,.45);color:var(--tx);}
.fsel:focus{border-color:var(--v);color:var(--tx);}
.srt-wrap{display:flex;align-items:center;gap:8px;}
.srt-lbl{font-size:.88rem;color:var(--muted2);font-weight:500;}
.res-cnt{font-size:.84rem;color:var(--muted2);font-family:'DM Mono',monospace;margin-bottom:16px;}

/* ════════════════════════════════════════════════
   NOVEL GRID + CARD
════════════════════════════════════════════════ */
.grid,.h-scroll{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;min-height:280px;align-items:stretch;
}

/* Skeleton loaders */
.skel{border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--bd2);}
.skel-cov{aspect-ratio:3/4;background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shim 1.4s infinite;}
.skel-ln{height:10px;border-radius:4px;margin:10px 13px 5px;background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shim 1.4s infinite;}
.skel-ln.sh{width:55%;}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Novel card */
.ncard{
  display:block;text-decoration:none;color:inherit;
  border-radius:var(--r);overflow:hidden;background:var(--card);
  border:1px solid var(--bd2);cursor:pointer;
  transition:transform .28s,box-shadow .28s,border-color .28s;
  display:flex;flex-direction:column;height:100%;
}
.ncard:hover{transform:translateY(-7px);border-color:rgba(124,92,252,.44);box-shadow:0 22px 54px rgba(0,0,0,.64);}
.ncov{aspect-ratio:3/4;position:relative;overflow:hidden;flex-shrink:0;display:block;}
.ncov-bg{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:hidden;
  transition:transform .46s ease;
}
/* Force every card-cover img to fill & clip correctly */
.ncov-bg img{
  display:block;
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  pointer-events:none;
}
.ncard:hover .ncov-bg{transform:scale(1.06);}
.ncov::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(0deg,rgba(15,10,30,.94) 0%,rgba(15,10,30,.3) 42%,transparent 66%);
}
.ncov-tags{position:absolute;bottom:8px;left:8px;right:8px;z-index:2;display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;pointer-events:none;}
.ncov-tag{
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:rgba(106,85,224,.88);border:1px solid rgba(179,168,248,.35);
  padding:3px 8px;border-radius:4px;backdrop-filter:blur(8px);white-space:nowrap;flex-shrink:0;
}

/* Hover overlay */
.novl{position:absolute;inset:0;z-index:3;background:rgba(15,10,30,.68);display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity .2s;}
.ncard:hover .novl{opacity:1;}
.novl-btn{
  padding:9px 21px;border-radius:9px;
  background:linear-gradient(135deg,var(--v3),var(--v));color:#fff;
  font-size:.8rem;font-weight:700;border:none;cursor:pointer;
  transform:translateY(7px);transition:transform .24s;box-shadow:0 4px 18px var(--glow);
}
.ncard:hover .novl-btn{transform:translateY(0);}
.nsave{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:.88rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transform:translateY(7px);transition:transform .24s .04s;
}
.ncard:hover .nsave{transform:translateY(0);}
.nsave.sv{background:rgba(244,63,94,.2);border-color:rgba(244,63,94,.38);}

/* Card body */
.ncard-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;justify-content:space-between;}
.ncard-title{
  font-family:'Fraunces',serif;font-size:.95rem;font-weight:800;
  color:var(--tx);                          /* solid readable color — no clip gradient */
  line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.76em;margin-bottom:8px;
}
.ncard-meta{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted2);flex-wrap:nowrap;overflow:hidden;}
.ncard-rat{color:var(--gold);font-weight:700;}
.ncard-sep{color:rgba(255,255,255,.35);}    /* visible separator */
.ncard-pro{color:var(--gold);font-weight:700;}

/* Empty / no-results states */
.empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 20px;text-align:center;}
.empty-ic{font-size:2.6rem;margin-bottom:11px;opacity:.38;}
.empty-t{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;margin-bottom:5px;}
.empty-s{font-size:.86rem;color:var(--muted);max-width:260px;line-height:1.6;}

/* Load more */
.lm-wrap{text-align:center;margin-top:26px;}
.btn-lm{
  padding:10px 32px;border-radius:11px;
  background:rgba(124,92,252,.09);border:1px solid rgba(124,92,252,.24);
  color:var(--v2);font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:600;
  cursor:pointer;transition:all .2s;
}
.btn-lm:hover{background:rgba(124,92,252,.18);transform:translateY(-2px);}

/* ════════════════════════════════════════════════
   OAUTH / SIGN-IN BANNER
════════════════════════════════════════════════ */
.oauth-banner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:14px 18px;
  background:linear-gradient(135deg,rgba(124,92,252,.09),rgba(106,85,224,.05));
  border:1px solid rgba(124,92,252,.18);border-radius:var(--r);margin-bottom:22px;
}
.ob-left{display:flex;align-items:center;gap:11px;}
.ob-icon{font-size:1.25rem;flex-shrink:0;}
.ob-title{font-size:.9rem;font-weight:700;margin-bottom:2px;}
.ob-sub{font-size:.78rem;color:var(--muted2);}
.ob-right{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ob-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:8px;font-size:.82rem;font-weight:600;text-decoration:none;transition:all .16s;cursor:pointer;white-space:nowrap;}
.ob-google{background:#fff;color:#3c4043;border:1px solid rgba(0,0,0,.11);box-shadow:0 1px 3px rgba(0,0,0,.1);}
.ob-google:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.16);}
.ob-discord{background:#5865F2;color:#fff;border:1px solid rgba(88,101,242,.32);}
.ob-discord:hover{background:#4752C4;transform:translateY(-1px);}
.ob-email{background:rgba(124,92,252,.13);color:var(--v2);border:1px solid rgba(124,92,252,.26);}
.ob-email:hover{background:rgba(124,92,252,.22);transform:translateY(-1px);}
.ob-dismiss{background:none;border:none;color:var(--muted);font-size:.9rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .16s;}
.ob-dismiss:hover{color:var(--tx);}

/* ════════════════════════════════════════════════
   RECENTLY VIEWED STRIP
════════════════════════════════════════════════ */
/*.rec-scrl{*/
/*  display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;*/
/*  scrollbar-width:thin;scrollbar-color:rgba(124,92,252,.28) transparent;*/
/*  -webkit-overflow-scrolling:touch;align-items:stretch;*/
/*}*/
/*.rec-c{*/
/*  min-width:152px;width:152px;border-radius:var(--r);overflow:hidden;*/
/*  background:var(--card);border:1px solid rgba(124,92,252,.1);*/
/*  cursor:pointer;transition:all .24s;flex-shrink:0;display:flex;flex-direction:column;*/
/*}*/
/*.rec-c:hover{border-color:rgba(124,92,252,.48);transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.58);}*/
/*.rec-cov{width:100%;height:196px;overflow:hidden;position:relative;flex-shrink:0;}*/
/*.rec-cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .36s ease;}*/
/*.rec-c:hover .rec-cov img{transform:scale(1.05);}*/
/*.rec-tit{*/
/*  font-family:'Fraunces',serif;font-size:.78rem;font-weight:700;padding:8px 10px 4px;*/
/*  line-height:1.34;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;*/
/*  overflow:hidden;color:var(--tx);word-break:break-word;*/
/*}*/

/* Recently Viewed — always exactly 7 cards in a row */
.rec-scrl{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:14px;
  padding:4px 2px 14px;
  overflow:hidden;
  align-items:stretch;
}
.rec-c{
  width:100%;min-width:0;
  border-radius:var(--r);overflow:hidden;
  background:var(--card);border:1px solid rgba(124,92,252,.12);
  cursor:pointer;transition:all .24s;flex-shrink:0;display:flex;flex-direction:column;
}
.rec-c:hover{border-color:rgba(124,92,252,.48);transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.58);}
.rec-cov{width:100%;height:200px;overflow:hidden;position:relative;flex-shrink:0;}
.rec-cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .36s ease;}
.rec-c:hover .rec-cov img{transform:scale(1.05);}
.rec-tit{
  font-family:'Fraunces',serif;font-size:.8rem;font-weight:700;padding:9px 11px 4px;
  line-height:1.34;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:var(--tx);word-break:break-word;
}
@media(max-width:1280px){.rec-scrl{grid-template-columns:repeat(6,1fr);}}
@media(max-width:1024px){.rec-scrl{grid-template-columns:repeat(5,1fr);}}
@media(max-width:768px) {.rec-scrl{grid-template-columns:repeat(4,1fr);}}
@media(max-width:640px) {.rec-scrl{grid-template-columns:repeat(3,1fr);}}
@media(max-width:480px) {.rec-scrl{grid-template-columns:repeat(2,1fr);}}

/* ════════════════════════════════════════════════
   NOVEL DETAIL PAGE
════════════════════════════════════════════════ */
.det-wrap{position:relative;min-height:100vh;min-height:100dvh;padding-top:var(--nav);}
.det-bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;background-size:cover;background-position:center top;filter:blur(52px) brightness(.2) saturate(1.5);transform:scale(1.1);}
.det-bgov{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;background:linear-gradient(180deg,rgba(15,10,30,.3) 0%,rgba(15,10,30,.68) 50%,rgba(15,10,30,.98) 100%);}
.det-hero{position:relative;z-index:10;width:100%;min-height:420px;display:flex;align-items:flex-end;overflow:hidden;padding-top:var(--nav);}
.det-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 25%;filter:brightness(.36) saturate(1.3);transform:scale(1.03);transition:transform 8s ease;}
.det-hero:hover .det-hero-bg{transform:scale(1.05);}
.det-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,10,30,1) 0%,rgba(15,10,30,.8) 26%,rgba(5,4,14,.22) 56%,transparent 100%);}
.det-hero-inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gap) 40px;display:flex;gap:26px;align-items:flex-end;}
.det-cov{
  width:175px;min-width:175px;border-radius:11px;overflow:hidden;
  box-shadow:0 26px 66px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.06);
  aspect-ratio:2/3;position:relative;transform:rotate(-1.4deg);transition:transform .38s;flex-shrink:0;
}
.det-cov:hover{transform:rotate(0) translateY(-4px);}
.det-cov::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.11) 0%,transparent 50%,rgba(0,0,0,.09) 100%);pointer-events:none;}
.det-info{flex:1;min-width:0;}
.det-crumb{display:flex;align-items:center;gap:5px;font-size:.76rem;color:rgba(255,255,255,.88);margin-bottom:9px;letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap;}
.det-crumb span{color:rgba(255,255,255,.90);}
.det-crumb span[onclick]{cursor:pointer;transition:color .18s;}
.det-crumb span[onclick]:hover{color:#fff;}
.det-genres{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px;}
.det-gtag{padding:4px 13px;border-radius:100px;background:rgba(124,92,252,.22);color:#cfc5fc;border:1px solid rgba(124,92,252,.4);font-size:.8rem;font-weight:700;}
.det-title{
  font-family:'Fraunces',serif;font-size:clamp(1.3rem,3.4vw,2.75rem);font-weight:900;
  margin-top:0;margin-bottom:8px;line-height:1.1;color:#fff;letter-spacing:-.022em;
  text-shadow:0 4px 38px rgba(0,0,0,.68);word-break:break-word;
}
.det-auth{font-size:.9rem;color:rgba(255,255,255,.92);margin-bottom:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.det-auth-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--v),var(--v2));display:inline-flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:800;color:#fff;flex-shrink:0;}
.det-stats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
.dstat{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:.74rem;color:rgba(255,255,255,.88);backdrop-filter:blur(8px);}
.dstat strong{color:#fff;font-weight:700;}
.dstat.dp{background:rgba(240,180,41,.08);border-color:rgba(240,180,41,.24);color:var(--gold);}
.dstat.df{background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.19);color:#4ade80;}

/* Action buttons — always wrap nicely */
.det-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.btn-det-r{
  padding:11px 26px;border-radius:11px;background:linear-gradient(135deg,var(--v3),var(--v));
  color:#fff;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:700;
  border:none;cursor:pointer;transition:all .22s;display:flex;align-items:center;gap:7px;
  box-shadow:0 6px 24px var(--glow);white-space:nowrap;
}
.btn-det-r:hover{transform:translateY(-2px);box-shadow:0 12px 36px var(--glow2);}
.btn-det-l{
  padding:11px 17px;border-radius:11px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:.86rem;font-weight:600;
  cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:7px;
  backdrop-filter:blur(8px);white-space:nowrap;
}
.btn-det-l:hover{background:rgba(255,255,255,.11);border-color:rgba(124,92,252,.36);}
.btn-det-l.saved{background:rgba(244,63,94,.09);border-color:rgba(244,63,94,.3);color:#fb7185;}

/* Body layout — 2 cols on desktop, 1 col on mobile (set below) */
.det-body{
  position:relative;z-index:10;max-width:1200px;margin:0 auto;
  padding:0 var(--gap) 80px;display:grid;grid-template-columns:1fr 310px;gap:20px;
}
.det-panel{background:rgba(24,14,48,.82);border:1px solid rgba(124,92,252,.14);border-radius:15px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:hidden;}
.det-ph{padding:16px 20px 13px;border-bottom:1px solid rgba(124,92,252,.12);display:flex;align-items:center;justify-content:space-between;}
.det-pt{font-family:'Fraunces',serif;font-size:.92rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:7px;}
.det-pi{width:25px;height:25px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.76rem;background:rgba(124,92,252,.18);}
.det-pb{padding:16px 20px 20px;}
.det-syn{font-size:.96rem;color:rgba(255,255,255,.95);line-height:1.85;position:relative;overflow:hidden;max-height:130px;transition:max-height .4s ease;}
.det-syn.exp{max-height:1200px;}
.det-syn::after{content:'';position:absolute;bottom:0;left:0;right:0;height:44px;background:linear-gradient(0deg,rgba(24,14,48,.85),transparent);pointer-events:none;transition:opacity .28s;}
.det-syn.exp::after{opacity:0;}
.det-syn.nc::after{display:none;}
.det-syn.nc{max-height:none;}
.det-rm{margin-top:8px;background:none;border:none;color:var(--v2);font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;padding:0;display:flex;align-items:center;gap:4px;transition:color .18s;min-height:44px;}
.det-rm:hover{color:#fff;}
.det-tags{display:flex;gap:5px;flex-wrap:wrap;padding:11px 20px;border-top:1px solid rgba(124,92,252,.12);}
.det-tag{padding:3px 10px;border-radius:4px;background:rgba(124,92,252,.1);border:1px solid rgba(124,92,252,.2);font-size:.76rem;font-weight:600;color:rgba(255,255,255,.92);}

/* Chapter list */
.ch-list{display:flex;flex-direction:column;gap:2px;}
.ch-item{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:9px;cursor:pointer;transition:background .16s,border-color .16s;border:1px solid transparent;min-height:48px;}
.ch-item:hover{background:rgba(124,92,252,.08);border-color:rgba(124,92,252,.17);}
.ch-num{font-family:'DM Mono',monospace;font-size:.76rem;color:rgba(255,255,255,.88);min-width:40px;flex-shrink:0;background:rgba(255,255,255,.07);border-radius:5px;padding:4px 6px;text-align:center;font-weight:600;}
.ch-info{flex:1;min-width:0;}
.ch-tit{font-size:.88rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ch-bdg{flex-shrink:0;}
.ch-free{font-size:.72rem;font-weight:700;color:var(--teal);background:rgba(45,212,191,.08);border:1px solid rgba(45,212,191,.22);padding:3px 8px;border-radius:4px;}
.ch-lock{display:flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;color:var(--gold);background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.22);padding:3px 9px;border-radius:6px;flex-wrap:wrap;}
.unlock-btn{background:var(--v);border:none;color:#fff;padding:4px 10px;border-radius:4px;font-size:.72rem;cursor:pointer;font-weight:700;margin-left:3px;transition:all .15s;min-height:32px;}
.unlock-btn:hover{background:var(--v2);}

/* Quick facts grid */
.det-fg{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:13px 17px 17px;}
.det-fact{background:rgba(124,92,252,.07);border-radius:9px;padding:11px 13px;border:1px solid rgba(124,92,252,.15);}
.det-fl{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.88);margin-bottom:5px;}
.det-fv{font-size:.92rem;font-weight:700;color:#fff;}
.det-fv.go{color:var(--gold);}.det-fv.gr{color:#4ade80;}.det-fv.vi{color:var(--v2);}
/* Support / tip-the-author entry in Quick Facts */
.det-sup{display:block;width:100%;text-align:left;font:inherit;text-decoration:none;cursor:pointer;transition:background .18s,border-color .18s;}
.det-sup:hover{background:rgba(124,92,252,.13);border-color:rgba(124,92,252,.32);}
.det-sup:focus-visible{outline:2px solid var(--v2);outline-offset:2px;}
.det-sup-sub{font-size:.76rem;color:var(--muted2);margin-top:3px;}

/* Related novels */
.rel-item{display:flex;gap:10px;align-items:center;padding:10px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:all .18s;min-height:56px;}
.rel-item:hover{background:rgba(124,92,252,.08);border-color:rgba(124,92,252,.16);}
.rel-cov{width:44px;min-width:44px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;position:relative;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.48);}
.rel-info{flex:1;min-width:0;}
.rel-tit{font-size:.84rem;font-weight:700;color:#fff;line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rel-meta{font-size:.76rem;color:rgba(255,255,255,.88);}

/* Back button */
.det-back{display:inline-flex;align-items:center;gap:6px;padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.95);font-family:'DM Sans',sans-serif;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .18s;width:100%;justify-content:center;min-height:48px;}
.det-back:hover{background:rgba(255,255,255,.08);color:#fff;}
.det-sidebar{display:flex;flex-direction:column;gap:16px;}
.sh{font-family:'Fraunces',serif;font-size:.92rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;}
.sh::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.055);}

/* ── Detail page: Tablet & mobile overrides ── */
@media(max-width:1024px){
  .det-body{grid-template-columns:1fr;padding:16px var(--gap) 56px;}
  /* Sidebar becomes a horizontal strip on tablet */
  .det-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .det-sidebar .det-back{grid-column:1/-1;}
}
@media(max-width:768px){
  /* Hero: stack cover + info vertically, centred */
  .det-hero{min-height:auto;padding-top:calc(var(--nav) + 8px);}
  .det-hero-inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:20px 16px 28px;
    gap:16px;
  }
  .det-cov{
    width:120px;min-width:120px;
    transform:none !important;
    align-self:center;
  }
  .det-info{width:100%;}
  .det-crumb{justify-content:center;font-size:.7rem;}
  .det-genres{justify-content:center;}
  .det-title{font-size:clamp(1.2rem,5.5vw,1.8rem);text-align:center;}
  .det-auth{justify-content:center;font-size:.84rem;}
  .det-stats{justify-content:center;gap:5px;}
  .dstat{font-size:.7rem;padding:4px 9px;}
  .det-acts{justify-content:center;gap:8px;}
  .btn-det-r{padding:11px 22px;font-size:.86rem;}
  .btn-det-l{padding:11px 14px;font-size:.82rem;}

  /* Body: single column, remove sidebar grid */
  .det-body{grid-template-columns:1fr;padding:12px 14px 48px;gap:14px;}
  .det-sidebar{display:flex;flex-direction:column;gap:14px;}

  /* Panels */
  .det-panel{border-radius:12px;}
  .det-pb{padding:12px 14px 16px;}
  .det-ph{padding:13px 14px 11px;}
  .det-syn{font-size:.9rem;line-height:1.75;}
  .det-tags{padding:10px 14px;}
  .det-fg{grid-template-columns:1fr 1fr;gap:6px;padding:10px 12px 14px;}
  .det-fact{padding:9px 11px;}
  .det-fl{font-size:.68rem;}
  .det-fv{font-size:.86rem;}

  /* Chapter list */
  .ch-item{padding:11px 12px;}
  .ch-tit{font-size:.84rem;}
  .ch-num{font-size:.72rem;min-width:38px;}
}
@media(max-width:480px){
  .det-hero-inner{padding:16px 12px 22px;}
  .det-cov{width:100px;min-width:100px;}
  .det-title{font-size:clamp(1.1rem,6vw,1.5rem);}
  .det-stats{gap:4px;}
  .dstat{font-size:.66rem;padding:3px 8px;}
  /* Stack action buttons full width on smallest phones */
  .det-acts{flex-direction:column;width:100%;gap:8px;}
  .btn-det-r,.btn-det-l,.btn-det-share{width:100%;justify-content:center;}
  .det-fg{grid-template-columns:1fr 1fr;}
  .det-body{padding:10px 12px 40px;}
  .ch-item{padding:10px 10px;gap:8px;}
  .ch-tit{font-size:.8rem;}
  .ch-lock{font-size:.68rem;}
  .unlock-btn{font-size:.68rem;padding:3px 8px;}
}
@media(max-width:380px){
  .det-cov{width:84px;min-width:84px;}
  .det-title{font-size:clamp(1rem,6.5vw,1.3rem);}
  .det-fg{grid-template-columns:1fr;}
  .det-ph{padding:11px 12px 10px;}
  .det-pb{padding:10px 12px 14px;}
}

/* ════════════════════════════════════════════════
   LIBRARY PAGE
════════════════════════════════════════════════ */
#lib-page{padding:80px var(--gap) 60px;max-width:var(--max);margin:0 auto;}
.lib-empty{text-align:center;padding:80px 20px;border:2px dashed var(--bd2);border-radius:16px;}

/* ════════════════════════════════════════════════
   MODALS
════════════════════════════════════════════════ */
.ov{position:fixed;inset:0;z-index:1000;background:rgba(15,10,30,.88);backdrop-filter:blur(12px);display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;}
.ov.on{display:flex;}
.mbox{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r2);padding:30px;width:100%;max-width:500px;position:relative;animation:popIn .26s ease both;margin:auto;}
@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.mclose{position:absolute;top:13px;right:13px;width:29px;height:29px;border-radius:50%;background:var(--bg3);border:none;color:var(--tx);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s;}
.mclose:hover{background:var(--bg4);}
.mt{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:900;margin-bottom:5px;}
.ms{font-size:.86rem;color:var(--muted);margin-bottom:20px;}
.pkg-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px;}
.pkg{padding:15px 13px;border-radius:var(--r);background:var(--bg3);border:1px solid var(--bd2);text-align:center;cursor:pointer;transition:all .16s;position:relative;overflow:hidden;}
.pkg:hover{border-color:var(--gold);background:rgba(240,180,41,.05);transform:translateY(-2px);}
.pkg.pop{border-color:var(--gold);background:rgba(240,180,41,.05);}
.pop-badge{position:absolute;top:0;right:0;background:var(--gold);color:#000;font-size:.62rem;font-weight:800;padding:2px 7px;border-radius:0 var(--r) 0 5px;}
.pkg-c{font-size:1.25rem;font-weight:800;color:var(--gold);margin-bottom:2px;}
.pkg-l{font-size:.68rem;color:var(--muted);margin-bottom:6px;}
.pkg-p{font-size:.98rem;font-weight:700;}

/* ════════════════════════════════════════════════
   TOASTS
════════════════════════════════════════════════ */
#toasts{position:fixed;bottom:20px;right:20px;z-index:1100;display:flex;flex-direction:column;gap:6px;}
.toast{padding:10px 16px;border-radius:10px;background:var(--bg2);border:1px solid var(--bd2);font-size:.86rem;font-weight:500;display:flex;align-items:center;gap:8px;animation:tIn .26s ease both;box-shadow:0 7px 20px rgba(0,0,0,.3);min-width:210px;}
.toast.ok{border-color:rgba(74,222,128,.26);color:#4ade80;}
.toast.er{border-color:rgba(244,63,94,.26);color:#fb7185;}
.toast.in{border-color:rgba(124,92,252,.26);color:var(--v2);}
@keyframes tIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes tOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(14px)}}

/* ════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
footer{background:var(--bg2);border-top:1px solid var(--bd);padding:50px var(--gap) 26px;}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.4rem;margin-bottom:2.4rem;max-width:var(--max);margin-left:auto;margin-right:auto;}
.fl{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:900;display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.fd{font-size:.88rem;color:var(--muted);line-height:1.72;max-width:256px;margin-bottom:13px;}
.fsoc{display:flex;gap:7px;}
.fsoc-b{width:32px;height:32px;border-radius:8px;background:var(--bg3);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;font-size:.88rem;color:var(--muted);cursor:pointer;transition:all .16s;}
.fsoc-b:hover{border-color:var(--v);color:var(--v2);}
.fc h4{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(179,168,248,.85);margin-bottom:13px;font-family:'DM Mono',monospace;}
.fc a{display:block;color:rgba(220,218,240,.88);font-size:.88rem;margin-bottom:8px;transition:color .16s;cursor:pointer;}
.fc a:hover{color:var(--tx);}
.fb{border-top:1px solid rgba(124,92,252,.07);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;color:rgba(200,198,230,.75);max-width:var(--max);margin:0 auto;}
.fb-lnk{display:flex;gap:1.3rem;}
.fb-lnk a{color:var(--muted);transition:color .16s;cursor:pointer;}
.fb-lnk a:hover{color:var(--tx);}

/* ════════════════════════════════════════════════
   RATING SYSTEM
════════════════════════════════════════════════ */
.rat-badge{display:inline-flex;align-items:center;gap:3px;font-size:.67rem;font-weight:700;color:var(--gold);}
.rat-badge .rat-count{font-weight:400;color:var(--muted2);font-size:.61rem;margin-left:1px;}
.stars{display:inline-flex;gap:1px;line-height:1;}
.stars svg{width:11px;height:11px;flex-shrink:0;}
.star-full{fill:#f0b429;}
.star-half{fill:url(#halfGrad);}
.star-empty{fill:rgba(255,255,255,.13);}

.rat-block{background:rgba(24,14,48,.65);border:1px solid rgba(124,92,252,.14);border-radius:13px;padding:18px 20px;margin-bottom:0;}
.rat-block-top{display:flex;align-items:center;gap:18px;margin-bottom:14px;}
.rat-big{text-align:center;flex-shrink:0;}
.rat-big-num{font-family:'Fraunces',serif;font-size:2.75rem;font-weight:900;color:var(--gold);line-height:1;}
.rat-big-stars{display:flex;gap:2px;justify-content:center;margin:4px 0 3px;}
.rat-big-stars svg{width:15px;height:15px;}
.rat-big-count{font-size:.78rem;color:var(--muted2);white-space:nowrap;}
.rat-bars{flex:1;display:flex;flex-direction:column;gap:5px;}
.rat-bar-row{display:flex;align-items:center;gap:6px;font-size:.78rem;}
.rat-bar-lbl{color:var(--muted2);width:9px;text-align:right;flex-shrink:0;}
.rat-bar-lbl svg{width:9px;height:9px;fill:#f0b429;}
.rat-bar-track{flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;}
.rat-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .58s cubic-bezier(.4,0,.2,1);}
.rat-bar-pct{color:var(--muted2);width:28px;text-align:right;flex-shrink:0;font-size:.76rem;}

.rat-picker{border-top:1px solid rgba(255,255,255,.055);padding-top:14px;}
.rat-picker-label{font-size:.73rem;font-weight:600;color:var(--muted2);margin-bottom:9px;letter-spacing:.04em;}
.rat-picker-label span{color:var(--tx);}
.rat-stars-input{display:flex;gap:5px;margin-bottom:9px;}
.rat-star-btn{width:30px;height:30px;background:none;border:none;cursor:pointer;padding:0;transition:transform .13s;}
.rat-star-btn:hover{transform:scale(1.2);}
.rat-star-btn svg{width:26px;height:26px;transition:fill .13s;}
.rat-star-btn svg.lit{fill:#f0b429;filter:drop-shadow(0 0 4px rgba(240,180,41,.55));}
.rat-star-btn svg.dim{fill:rgba(255,255,255,.13);}
.rat-submit-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:9px;background:linear-gradient(135deg,var(--v3),var(--v));color:#fff;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700;border:none;cursor:pointer;transition:all .18s;opacity:.42;pointer-events:none;}
.rat-submit-btn.active{opacity:1;pointer-events:auto;}
.rat-submit-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px var(--glow);}
.rat-done{display:none;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--green);}
.rat-done.show{display:flex;}
.rat-login-note{font-size:.72rem;color:var(--muted);line-height:1.55;}
.rat-login-note a{color:var(--v2);text-decoration:underline;cursor:pointer;}

/* ════════════════════════════════════════════════
   RESPONSIVE — All Devices
   Breakpoints: 1280 / 1024 / 900 / 768 / 640 / 480 / 380
════════════════════════════════════════════════ */

/* ── Large Desktop (≤1280px) ─────────────────── */
@media(max-width:1280px){
  :root{--gap:clamp(14px,3vw,36px);}
  .sec-wrap{padding:0 var(--gap);}
  .fg{grid-template-columns:2fr 1fr 1fr;}
}

/* ── Small Desktop / Large Tablet Landscape (≤1024px) ── */
@media(max-width:1024px){
  .det-body{grid-template-columns:1fr;}
  .fg{grid-template-columns:1fr 1fr;}
  .grid,.h-scroll{grid-template-columns:repeat(auto-fill,minmax(185px,1fr));}
  .rat-block-top{flex-direction:column;align-items:flex-start;}
  .rat-bars{width:100%;}
  .s-content{width:58%;}
  .s-bookzone{right:clamp(2vw,4vw,48px);}
  .trend-arr-prev{left:-16px;}
  .trend-arr-next{right:-16px;}
}

/* ── Tablet Landscape (≤900px) ───────────────── */
@media(max-width:900px){
  .s-bookzone{display:none;}
  .s-content{width:76%;}
  .c-arrow{display:flex;opacity:1;}
  .trend-arr{display:none;}
  .stats-band-inner{gap:clamp(18px,4vw,48px);}
  .det-hero-inner{gap:18px;}
  .ob-right{flex-wrap:wrap;}
}

/* ── Tablet Portrait (≤768px) ────────────────── */
@media(max-width:768px){
  /* Nav */
  .nav-links,
  .nav-r .btn-log,
  .nav-r .btn-reg,
  .nav-r .coin-btn,
  .nav-r .theme-btn{display:none;}
  .ham{display:flex;}
  #nav{padding:0 16px;}

  /* Hero */
  #hero{height:calc(100svh - var(--nav));min-height:380px;max-height:640px;}
  .s-content{width:88%;padding:0 18px 56px;}
  .s-actions{gap:7px;}
  .s-btn-read,.s-btn-info{padding:10px 18px;font-size:.82rem;}

  /* Novel grid */
  .grid,.h-scroll{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px;}

  /* Footer */
  .fg{grid-template-columns:1fr;}
  .fd{max-width:100%;}

  /* Filters & controls */
  .ctrl-bar{flex-direction:column;align-items:flex-start;gap:10px;}
  .fltrs{flex-wrap:wrap;}
  .srt-wrap{width:100%;}

  /* OAuth banner */
  .oauth-banner{flex-direction:column;align-items:flex-start;}
  .ob-right{width:100%;flex-wrap:wrap;}

  /* Tabs — allow horizontal scroll on small screens */
  .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{white-space:nowrap;flex-shrink:0;}

  /* Genre pills */
  .genre-pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .genre-pills::-webkit-scrollbar{display:none;}
  .gpill{flex-shrink:0;}

  /* Stats band */
  .stat-div{display:none;}
  .stats-band-inner{gap:24px;}

  /* Rating block */
  .rat-block{padding:14px 14px;}
  .rat-block-top{gap:12px;}
}

/* ── Large Mobile / Small Tablet (≤640px) ────── */
@media(max-width:640px){
  :root{--gap:14px;}

  /* Hero — full-width content at bottom */
  #hero{min-height:380px;max-height:560px;}
  .s-leftpanel{width:100%;background:linear-gradient(0deg,rgba(15,10,30,1) 0%,rgba(15,10,30,.85) 50%,rgba(3,2,12,.1) 100%);}
  .s-content{width:100%;top:auto;bottom:0;transform:none;padding:0 16px 52px;}
  .s-title{font-size:clamp(1.4rem,6vw,2rem);}
  .s-desc{display:none;}
  .s-actions{gap:7px;}
  .s-btn-read{padding:10px 20px;}
  .s-btn-info{padding:10px 14px;}
  .c-dots{bottom:14px;}

  /* Grid */
  .grid,.h-scroll{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:11px;}

  /* Trending */
  .fcard-img{height:190px;}

  /* Section spacing */
  .section{padding:36px 0;}
  .section-sm{padding:24px 0;}

  /* Coin modal packages */
  .pkg-grid{grid-template-columns:1fr 1fr 1fr !important;}

  /* Detail page */
  .det-hero{min-height:320px;}
  .det-cov{width:100px;min-width:100px;}
  .dstat{padding:10px 12px;}
  .det-fact{padding:10px 12px;}

  /* Nav search — hidden, keep mobile menu only */
  .nav-search{display:none !important;}

  /* Search bar */
  .srch-in{font-size:.94rem;padding:13px 18px 13px 46px;}

  /* Footer */
  .fb{flex-direction:column;align-items:flex-start;gap:8px;}
  .fb-lnk{flex-wrap:wrap;gap:.8rem;}
}

/* ── Mobile (≤480px) ─────────────────────────── */
@media(max-width:480px){
  :root{--gap:12px;}

  /* Grid — strict 2 columns */
  .grid,.h-scroll{grid-template-columns:1fr 1fr;gap:10px;}

  /* Trending — 1 column */
  .fcard-img{height:170px;}

  /* Coin packages — stack vertically */
  .pkg-grid{grid-template-columns:1fr !important;}

  /* Toasts */
  #toasts{right:10px;bottom:10px;left:10px;}
  .toast{min-width:unset;max-width:100%;width:100%;}

  /* Nav */
  #nav{height:54px;}
  :root{--nav:54px;}
  .logo-name{font-size:1rem;}
  .logo img{height:28px;width:28px;}

  /* Hero */
  #hero{min-height:340px;max-height:480px;}
  .s-content{padding:0 12px 48px;}
  .s-title{font-size:clamp(1.2rem,7vw,1.7rem);}
  .s-genres{display:none;}
  .s-eyebrow{display:none;}
  .s-btn-info{display:none;}
  .c-arrow{width:34px;height:34px;}

  /* Card body */
  .ncard-title{font-size:.88rem;}
  .ncard-meta{font-size:.72rem;}

  /* Detail page - handled in det CSS block */
  .det-pt{font-size:1.05rem;}

  /* Modal */
  .mbox{padding:20px 16px;}
  .mt{font-size:1.05rem;}

  /* Auth buttons */
  .mob-auth a{padding:10px;}

  /* Stats */
  .stat-n{font-size:clamp(1.2rem,5vw,1.5rem);}

  /* Rating */
  .rat-big-num{font-size:2.2rem;}
  .rat-star-btn{width:26px;height:26px;}
  .rat-star-btn svg{width:22px;height:22px;}
}

/* ── Small Mobile (≤380px) ───────────────────── */
@media(max-width:380px){
  :root{--gap:10px;}

  /* Grid — keep 2 columns but tighter */
  .grid,.h-scroll{grid-template-columns:1fr 1fr;gap:8px;}

  /* Hero */
  #hero{min-height:300px;max-height:430px;}
  .s-content{padding:0 10px 44px;}
  .s-title{font-size:clamp(1.1rem,7.5vw,1.5rem);}
  .s-btn-read{padding:9px 16px;font-size:.8rem;}

  /* Nav */
  .logo-name{display:none;}

  /* Cards */
  .ncard-title{font-size:.82rem;}
  .ncard-meta{font-size:.7rem;}
  .ncard-body{padding:9px 10px 10px;}

  /* Tabs */
  .tab{padding:7px 14px;font-size:.82rem;}

  /* Search */
  .srch-in{padding:11px 14px 11px 42px;font-size:.9rem;}

  /* Footer */
  .fg{gap:1.2rem;}
  .fc h4{margin-bottom:8px;}
}

/* ── Touch device: remove hover-only effects ─── */
@media(hover:none) and (pointer:coarse){
  .ncard:hover{transform:none;box-shadow:none;border-color:var(--bd2);}
  .fcard:hover{transform:none;box-shadow:none;}
  .ncard:hover .novl{opacity:0;}
  .ncard:hover .ncov-bg{transform:none;}
  .ncard:hover .nsave{transform:none;}
  .fcard:hover .fcard-img img{transform:none;}
  .rec-c:hover{transform:none;box-shadow:none;}
  .btn-lm:hover{transform:none;}
  .s-btn-read:hover{transform:none;box-shadow:0 6px 24px var(--glow);}
}

/* ── Landscape phone ─────────────────────────── */
@media(max-height:500px) and (orientation:landscape){
  #hero{height:100svh;min-height:260px;max-height:100svh;}
  .s-content{padding:0 16px 36px;}
  .s-title{font-size:clamp(1rem,4vw,1.5rem);}
  .s-desc{display:none;}
  :root{--nav:50px;}
}