/* ═══════════════════════════════════════════════════════════════
   Jitter — Black × Gold Design System
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

/* ── 1. Tokens ─────────────────────────────────────────────────── */
:root {
  /* Background layers */
  --bg:       #060606;
  --bg2:      #030303;
  --surface:  #0d0d0d;
  --surface2: #131313;
  --surface3: #1a1a1a;
  --surface4: #222222;

  /* Text */
  --text:  #f0efe8;
  --text2: #8c8c8c;
  --muted: rgba(240,239,232,.35);

  /* Borders */
  --line:  rgba(255,255,255,.045);
  --line2: rgba(255,255,255,.08);
  --line3: rgba(255,255,255,.14);

  /* Luxury gold */
  --gold:       #c9a84c;
  --gold-lt:    #e8d48a;
  --gold-dk:    #8b6d1f;
  --gold-dim:   rgba(201,168,76,.08);
  --gold-glow:  rgba(201,168,76,.18);
  --gold-rgb:   201,168,76;

  /* Glass */
  --glass:        rgba(6,6,6,.88);
  --glass-border: rgba(201,168,76,.10);

  /* Radii */
  --r:  5px;
  --r2: 10px;
  --r3: 18px;

  /* Shadows */
  --shadow:    0 24px 72px rgba(0,0,0,.95);
  --shadow-sm: 0 6px 24px rgba(0,0,0,.7);
  --shadow-gold: 0 0 40px rgba(201,168,76,.12);

  /* Layout */
  --topbar-h: 62px;
  --dock-h:   70px;
  --pad:      20px;

  --ease: cubic-bezier(.4,0,.2,1);

  /* Legacy compat aliases (used in admin inline styles) */
  --accent:     var(--gold);
  --accent2:    var(--gold-lt);
  --accent-dim: var(--gold-dim);
}

/* ── 2. Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }

/* ── 3. Base ───────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -.03em; }

/* ── 4. Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface4); }

/* ── 5. Page Progress Bar ──────────────────────────────────────── */
#page-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold), var(--gold-lt));
  z-index: 9999;
  transition: width .35s var(--ease), opacity .3s;
  pointer-events: none;
}
#page-progress.done { opacity: 0; }

/* ── 6. Shell ──────────────────────────────────────────────────── */
body:not(.reader-mode) {
  padding-top: var(--topbar-h);
  padding-bottom: calc(var(--dock-h) + 20px);
}
@media (min-width: 860px) {
  body:not(.reader-mode) { padding-bottom: 0; }
}

/* ── 7. Page Fade-In ───────────────────────────────────────────── */
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-content {
  animation: page-in .45s var(--ease) both;
  max-width: 1300px;
  margin: 0 auto;
  padding: 36px var(--pad) 60px;
  width: 100%;
}
/* Homepage: zero padding (hero bleeds edge-to-edge) */
body.homepage .main-content { padding: 0; }

@media (min-width: 860px) {
  .main-content { padding: 48px 36px 72px; }
  body.homepage .main-content { padding: 0; }
}

/* ── 8. Glass Topbar ───────────────────────────────────────────── */
.site-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--glass);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  z-index: 500;
  transition: background .3s;
}
.site-topbar.scrolled {
  background: rgba(4,4,4,.96);
  border-color: rgba(201,168,76,.15);
}

/* Constrained inner row — gives the topbar the same centred
   "bezel" article feel as myastra.fun */
.topbar-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mobile topbar: brand + avatar only — everything else is in the blob dock */
@media (max-width: 859px) {
  .topbar-nav        { display: none; }
  .topbar-search-btn { display: none; }
  .topbar-logout     { display: none; }
  .topbar-username   { display: none; }
}

/* Brand */
.topbar-brand {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  flex-shrink: 0;
  position: relative;
  padding-bottom: 1px;
}
.topbar-brand::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1.5px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}

/* Nav tabs */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1;
}
.topbar-nav-item {
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text2);
  border-radius: var(--r);
  transition: color .15s, background .15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar-nav-item:hover  { color: var(--text); background: rgba(255,255,255,.04); }
.topbar-nav-item.active { color: var(--gold); background: var(--gold-dim); }

/* Emoji inside nav tabs — hide on narrow screens */
.nav-emoji { font-size: 14px; line-height: 1; }
@media (max-width: 980px) { .nav-emoji { display: none; } }

/* User area */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.topbar-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(var(--gold-rgb),.3);
}
.topbar-username { font-size: 13px; font-weight: 600; color: var(--text2); display: none; }
@media (min-width: 640px) { .topbar-username { display: block; } }
.topbar-logout {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text2);
  padding: 5px 11px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  transition: color .15s, border-color .15s;
}
.topbar-logout:hover { color: var(--gold); border-color: rgba(var(--gold-rgb),.35); }

/* Hidden compat stubs */
.mobile-topbar { display: none; }
.sidebar        { display: none; }

/* ── 8b. Search Trigger Button (topbar) ───────────────────────── */
.topbar-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r);
  background: var(--surface2);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.topbar-search-btn:hover {
  background: var(--surface3);
  border-color: rgba(var(--gold-rgb),.25);
  color: var(--gold);
}

/* ── 8c. Search Overlay ────────────────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(4,4,4,.94);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px var(--pad) var(--pad);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
  overflow-y: auto;
}
.search-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.search-overlay-inner {
  width: 100%;
  max-width: 680px;
}

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface2);
  border: 1.5px solid rgba(var(--gold-rgb),.18);
  border-radius: var(--r2);
  padding: 0 16px;
  margin-bottom: 24px;
  transition: border-color .15s, box-shadow .15s;
}
.search-bar:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.search-bar-icon  { font-size: 17px; color: var(--text2); flex-shrink: 0; }
.search-bar-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: 16px 0;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  min-width: 0;
}
.search-bar-input::placeholder { color: var(--muted); }
.search-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.search-close-btn:hover { background: var(--surface4); color: var(--text); }

/* Results grid */
.search-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 420px) { .search-results { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 580px) { .search-results { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 760px) { .search-results { grid-template-columns: repeat(6, 1fr); } }

.search-hint {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
  letter-spacing: .2px;
}
.search-hint kbd {
  background: var(--surface3);
  border: 1px solid var(--line2);
  border-radius: 4px;
  padding: 1px 6px;
  font: inherit;
  font-size: 11px;
}
.search-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 32px 0;
}

/* ── 9. Blob Dock ──────────────────────────────────────────────── */
.blob-dock {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  background: rgba(8,8,8,.94);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid rgba(var(--gold-rgb),.16);
  border-radius: 999px;
  padding: 6px 8px;
  gap: 2px;
  box-shadow:
    0 32px 72px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 60px rgba(var(--gold-rgb),.05);
  z-index: 400;
  transition: transform .3s var(--ease), opacity .3s;
}
.blob-dock.hide {
  transform: translateX(-50%) translateY(calc(100% + 30px));
  opacity: 0;
}
.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: color .15s, background .15s;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: none;
  text-decoration: none;
}
.dock-item:hover  { color: var(--text);   background: rgba(255,255,255,.05); }
.dock-item.active { color: var(--gold);   background: var(--gold-dim); }
.dock-item--gold  { color: var(--gold); }
.dock-item--gold:hover { color: var(--gold-lt); }

/* SVG icon inside each dock item */
.dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
}
.dock-icon svg { width: 20px; height: 20px; }

/* Active/hover state dims to match gold */
.dock-item:hover  .dock-icon { color: var(--gold-lt); }
.dock-item.active .dock-icon { color: var(--gold); }

.dock-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1;
}

/* Legacy alias */
.mobile-dock { display: none; }

@media (min-width: 860px) { .blob-dock { display: none; } }

/* ── 10. Scroll Reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ── 11. Hero (homepage) ───────────────────────────────────────── */
.hero {
  position: relative;
  height: calc(100svh - var(--topbar-h));
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(.28) saturate(.6);
  will-change: transform;
  transition: filter .5s;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(6,6,6,.95) 40%, rgba(6,6,6,.5) 75%, transparent 100%),
    linear-gradient(to top, rgba(6,6,6,.9) 0%, transparent 50%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.hero-text { flex: 1; min-width: 0; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(var(--gold-rgb),.18);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hero-headline {
  font-size: clamp(36px, 7vw, 72px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--text);
  margin-bottom: 18px;
}
.hero-headline em {
  font-style: normal;
  color: var(--gold);
}
.hero-sub {
  font-size: 16px;
  color: var(--text2);
  margin-bottom: 32px;
  font-weight: 400;
  max-width: 420px;
}
.hero-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 32px;
}
.hero-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -.03em;
}
.hero-stat-lbl {
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 500;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Featured card */
.hero-featured {
  flex-shrink: 0;
  width: 200px;
  display: none;
}
@media (min-width: 700px) { .hero-featured { display: block; } }
@media (min-width: 1000px) { .hero-featured { width: 240px; } }
.hero-featured-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  padding-left: 2px;
}
.hero-featured-card {
  display: block;
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid rgba(var(--gold-rgb),.18);
  box-shadow: 0 24px 64px rgba(0,0,0,.8), var(--shadow-gold);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.hero-featured-card:hover {
  transform: translateY(-6px) rotate(.5deg);
  box-shadow: 0 32px 80px rgba(0,0,0,.9), 0 0 60px rgba(var(--gold-rgb),.22);
}
.hero-featured-card img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
}
.hero-featured-info {
  padding: 14px;
  background: linear-gradient(to bottom, var(--surface2), var(--surface3));
}
.hero-featured-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-featured-meta { font-size: 11px; color: var(--text2); }

/* Hero bottom gradient (bleed into first section) */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 3;
}

/* ── 12. Home Sections wrapper ─────────────────────────────────── */
.home-sections {
  padding: 56px var(--pad) 60px;
  max-width: 1300px;
  margin: 0 auto;
}
@media (min-width: 860px) { .home-sections { padding: 72px 36px 80px; } }

/* ── 13. Section ───────────────────────────────────────────────── */
.section { margin-bottom: 52px; }
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.section-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: linear-gradient(to bottom, var(--gold), var(--gold-dk));
  border-radius: 2px;
  flex-shrink: 0;
}
.section-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .3px;
  transition: color .15s;
}
.section-link:hover { color: var(--gold); }

/* ── 14. Scroll Strip (horizontal) ────────────────────────────── */
.scroll-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--pad));
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.scroll-strip::-webkit-scrollbar { display: none; }
.scroll-strip .wt-card {
  flex: 0 0 150px;
  scroll-snap-align: start;
}
@media (min-width: 860px) {
  .scroll-strip { margin: 0 -36px; padding-left: 36px; padding-right: 36px; }
  .scroll-strip .wt-card { flex: 0 0 170px; }
}

/* ── 15. Card Grid ─────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 480px)  { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .card-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(6, 1fr); } }

/* ── 16. Webtoon Card ──────────────────────────────────────────── */
.wt-card {
  display: block;
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  position: relative;
}
.wt-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--gold-rgb),.15);
  border-color: rgba(var(--gold-rgb),.2);
}
.wt-card-art {
  position: relative;
  padding-top: 145%;
  overflow: hidden;
  background: var(--surface2);
}
.wt-card-art img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.wt-card:hover .wt-card-art img { transform: scale(1.06); }

.wt-card-badge {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0,0,0,.8);
  color: var(--gold);
  border: 1px solid rgba(var(--gold-rgb),.3);
  backdrop-filter: blur(4px);
}
.wt-card-badge.ongoing   { color: #4ade80; border-color: rgba(74,222,128,.3); }
.wt-card-badge.completed { color: #a5b4fc; border-color: rgba(165,180,252,.3); }
.wt-card-badge.hiatus    { color: #fbbf24; border-color: rgba(251,191,36,.3); }

.wt-card-body   { padding: 10px 11px 12px; }
.wt-card-title  {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
}
.wt-card-meta   { font-size: 10px; color: var(--text2); font-weight: 500; }

/* ── 17. Page Header ───────────────────────────────────────────── */
.page-header {
  margin-bottom: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.page-title { font-size: 24px; font-weight: 900; letter-spacing: -.04em; }
.page-sub   { color: var(--text2); font-size: 14px; margin-top: 5px; font-weight: 400; }

/* ── 18. Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--r2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: all .2s var(--ease);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn--gold {
  background: var(--gold);
  color: #080808;
  border-color: var(--gold);
  font-weight: 700;
}
.btn--gold:hover {
  background: var(--gold-lt);
  border-color: var(--gold-lt);
  box-shadow: 0 6px 24px rgba(var(--gold-rgb),.4);
}

.btn--ghost-gold {
  background: var(--gold-dim);
  color: var(--gold);
  border-color: rgba(var(--gold-rgb),.25);
}
.btn--ghost-gold:hover {
  background: rgba(var(--gold-rgb),.15);
  border-color: rgba(var(--gold-rgb),.45);
}

/* Compat aliases */
.btn--primary { background: var(--gold); color: #080808; border-color: var(--gold); font-weight: 700; }
.btn--primary:hover { background: var(--gold-lt); box-shadow: 0 6px 24px rgba(var(--gold-rgb),.35); }
.btn--outline {
  background: transparent;
  color: var(--text2);
  border-color: var(--line2);
}
.btn--outline:hover { border-color: rgba(var(--gold-rgb),.35); color: var(--gold); }
.btn--ghost {
  background: transparent;
  color: var(--text2);
  border-color: transparent;
}
.btn--ghost:hover { background: rgba(255,255,255,.04); color: var(--text); }
.btn--sm  { padding: 5px 12px; font-size: 12px; }
.btn--full { width: 100%; }

/* ── 19. Webtoon Hero (detail page) ────────────────────────────── */
.wt-hero {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  align-items: flex-start;
}
.wt-hero-cover {
  width: 130px;
  flex-shrink: 0;
  border-radius: var(--r2);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--gold-rgb),.12);
}
.wt-hero-cover img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
.wt-hero-info { flex: 1; min-width: 0; }
.wt-hero-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.04em;
  margin-bottom: 10px;
}
@media (min-width: 600px) {
  .wt-hero-cover { width: 180px; }
  .wt-hero-title { font-size: 30px; }
}
.wt-hero-meta  { color: var(--text2); font-size: 13px; margin-bottom: 14px; }
.wt-hero-desc  {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text2);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wt-hero-desc.expanded { -webkit-line-clamp: unset; }
.wt-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.status-badge.ongoing   { background: rgba(74,222,128,.1);  color: #4ade80;  border: 1px solid rgba(74,222,128,.2); }
.status-badge.completed { background: rgba(165,180,252,.1); color: #a5b4fc;  border: 1px solid rgba(165,180,252,.2); }
.status-badge.hiatus    { background: rgba(251,191,36,.1);  color: #fbbf24;  border: 1px solid rgba(251,191,36,.2); }
.status-badge.unknown   { background: var(--surface3);      color: var(--text2); border: 1px solid var(--line2); }

/* ── 20. Chapter List ──────────────────────────────────────────── */
.chapter-list { display: flex; flex-direction: column; gap: 3px; }
.chapter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.chapter-row:hover {
  background: var(--surface2);
  border-color: rgba(var(--gold-rgb),.2);
}
.chapter-row a { display: contents; }
.chapter-num  { font-size: 14px; font-weight: 700; color: var(--text); }
.chapter-title-tag { font-size: 12px; color: var(--text2); margin-top: 2px; }
.chapter-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 12px;
}
.chapter-pages { font-size: 11px; color: var(--text2); }
.chapter-date  { font-size: 11px; color: var(--text2); }

/* ── 21. Reader ────────────────────────────────────────────────── */
body.reader-mode {
  background: #000;
  padding: 0;
  display: block;
}
.reader-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 300;
  transition: transform .25s var(--ease), opacity .25s;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.reader-topbar.hidden { transform: translateY(-100%); opacity: 0; }
.reader-topbar-left, .reader-topbar-right { display: flex; align-items: center; gap: 10px; }
.reader-title {
  font-size: 13px;
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 480px) { .reader-title { max-width: 300px; } }
.reader-ch-label { font-size: 12px; color: var(--text2); }
.reader-images {
  padding-top: 52px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reader-images img { width: 100%; max-width: 800px; display: block; margin: 0 auto; }
.reader-tap-zone {
  position: fixed;
  top: 52px; bottom: 80px;
  width: 22%;
  z-index: 200;
  cursor: pointer;
}
.reader-tap-prev { left: 0; }
.reader-tap-next { right: 0; }
.reader-bottombar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 10px;
  z-index: 300;
  border-top: 1px solid rgba(255,255,255,.05);
  transition: transform .25s var(--ease), opacity .25s;
}
.reader-bottombar.hidden { transform: translateY(100%); opacity: 0; }
.reader-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r2);
  font-size: 13px;
  font-weight: 600;
  background: var(--surface2);
  color: var(--text);
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.reader-nav-btn:hover { background: var(--surface3); }
.reader-nav-btn.disabled { opacity: .35; pointer-events: none; }
.reader-progress { flex: 1; text-align: center; font-size: 12px; color: var(--text2); }

/* ── 22. Comments ──────────────────────────────────────────────── */
.comments-section {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  padding-top: 36px;
}
.comments-title { font-size: 15px; font-weight: 800; margin-bottom: 22px; letter-spacing: -.02em; }
.comment-form { margin-bottom: 28px; }
.comment-form textarea {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid var(--line2);
  border-radius: var(--r2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 12px 14px;
  resize: vertical;
  min-height: 80px;
  transition: border-color .15s, box-shadow .15s;
}
.comment-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.comment-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.comment-thread { display: flex; flex-direction: column; gap: 18px; }
.comment-item   { display: flex; gap: 12px; }
.comment-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-body-wrap { flex: 1; min-width: 0; }
.comment-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.comment-username { font-size: 13px; font-weight: 700; }
.comment-date     { font-size: 11px; color: var(--text2); }
.comment-text     { font-size: 14px; line-height: 1.65; word-break: break-word; color: var(--text); }
.comment-reply-btn {
  font-size: 12px;
  color: var(--text2);
  margin-top: 6px;
  cursor: pointer;
  display: inline-block;
  transition: color .15s;
}
.comment-reply-btn:hover { color: var(--gold); }
.replies {
  margin-top: 14px;
  padding-left: 16px;
  border-left: 2px solid var(--surface3);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-to-comment {
  padding: 14px 18px;
  background: var(--surface2);
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  font-size: 14px;
  color: var(--text2);
  text-align: center;
  margin-bottom: 20px;
}
.login-to-comment a { color: var(--gold); font-weight: 600; }

/* ── 23. Auth Pages ────────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(var(--gold-rgb),.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 90%, rgba(var(--gold-rgb),.04) 0%, transparent 55%),
    var(--bg);
}
.auth-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.auth-box {
  width: 100%;
  background: var(--surface);
  border: 1px solid rgba(var(--gold-rgb),.12);
  border-radius: 20px;
  padding: 44px 38px;
  box-shadow: 0 40px 100px rgba(0,0,0,.8), var(--shadow-gold);
}
.auth-mascot {
  position: absolute;
  bottom: -12px;
  right: -52px;
  width: 110px;
  pointer-events: none;
  filter: drop-shadow(0 8px 28px rgba(0,0,0,.7));
  transform: scaleX(-1);
}
@media (max-width: 540px) { .auth-mascot { display: none; } }

.auth-logo  { text-align: center; font-size: 30px; margin-bottom: 6px; }
.auth-title {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.04em;
  margin-bottom: 4px;
  color: var(--text);
}
.auth-sub { text-align: center; font-size: 13px; color: var(--text2); margin-bottom: 32px; }

/* ── 24. Form Elements ─────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text2);
}
.form-input {
  width: 100%;
  background: var(--surface2);
  border: 1.5px solid var(--line2);
  border-radius: var(--r);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 11px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.form-input::placeholder { color: var(--muted); }
textarea.form-input { resize: vertical; }
select.form-input   { cursor: pointer; }
.form-error {
  background: rgba(248,113,113,.07);
  border: 1px solid rgba(248,113,113,.2);
  color: #f87171;
  border-radius: var(--r);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ── 25. Library ───────────────────────────────────────────────── */
.library-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 500px)  { .library-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .library-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .library-grid { grid-template-columns: repeat(4, 1fr); } }

.library-item {
  display: flex;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 12px;
  align-items: center;
  transition: border-color .2s, transform .2s var(--ease);
}
.library-item:hover { border-color: rgba(var(--gold-rgb),.25); transform: translateY(-2px); }
.library-cover { width: 50px; height: 70px; border-radius: var(--r); object-fit: cover; flex-shrink: 0; }
.library-info  { flex: 1; min-width: 0; }
.library-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-continue { font-size: 12px; color: var(--gold); font-weight: 500; }
.library-meta     { font-size: 11px; color: var(--text2); margin-top: 3px; }

/* ── 26. Empty State ───────────────────────────────────────────── */
.empty-state { text-align: center; padding: 80px 20px; color: var(--text2); }
.empty-icon  { font-size: 56px; margin-bottom: 16px; filter: grayscale(.5); }
.empty-state h3 { font-size: 20px; color: var(--text); margin-bottom: 8px; font-weight: 800; letter-spacing: -.03em; }
.empty-state p  { font-size: 14px; line-height: 1.6; }

/* ── 27. Utilities ─────────────────────────────────────────────── */
.muted       { color: var(--text2); }
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.flex-center { display: flex; align-items: center; justify-content: center; gap: 8px; }
.gold { color: var(--gold); }