/* ═══════════════════════════════════════════════════════════════════════════
   Celium — faithful comick.io clone
   Color system: Tailwind gray scale (comick used Tailwind dark theme)
     gray-900 = #111827  page bg
     gray-800 = #1f2937  card/nav bg
     gray-700 = #374151  inputs/sidebar
     gray-600 = #4b5563  borders/dividers
     gray-500 = #6b7280  muted text
     gray-400 = #9ca3af  secondary text
     gray-300 = #d1d5db  primary text (dark mode)
     gray-100 = #f3f4f6  bright text
   Accent: comick used a teal/sky blue for links and active states
     sky-400  = #38bdf8  links, active
     sky-500  = #0ea5e9  hover
   Light mode: white bg, gray-50 surfaces, gray-800 text
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: #1d2937;
  color: #d1d5db;
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ── Light mode ──────────────────────────────────────────────────────────── */
body.light { background-color: #f9fafb; color: #111827; }
body.light .bg-800  { background-color: #ffffff; }
body.light .bg-700  { background-color: #f3f4f6; }

/* ── CSS variables (derived from theme) ─────────────────────────────────── */
:root {
  /* Backgrounds — Tailwind gray scale, exact comick.io values */
  --bg:         #1d2937;   /* blue-tinted dark, matches comick.dev */
  --surface:    #1d2937;   /* same as bg */
  --surface2:   #394253;   /* search input bg — exact from screenshot */
  --surface3:   #1a2332;   /* slightly elevated surface for featured areas */
  --border:     #374151;   /* rgb(55,65,81)  — dividers — exact from inspection */
  --border-sm:  #4b5563;   /* stronger borders */

  /* Text — comick.io dark mode */
  --text:       #d1d5db;   /* gray-300 — primary body text */
  --text-sm:    #9ca3af;   /* gray-400 — secondary */
  --text-xs:    #6b7280;   /* gray-500 — muted / timestamps */
  --text-bright:#f9fafb;   /* gray-50  — headings, active */
  --muted:      #6b7280;

  /* Accent — comick.io sky/teal (confirmed from live HTML: sky-400) */
  --accent:     #38bdf8;   /* sky-400 */
  --accent-h:   #0ea5e9;   /* sky-500 — hover */
  --accent-dim: rgba(56,189,248,0.12);
  --accent-text:#7dd3fc;   /* sky-300 — accent text on dark bg */

  /* Semantic */
  --green:      #22c55e;
  --green-dim:  rgba(34,197,94,0.15);
  --amber:      #f59e0b;
  --amber-dim:  rgba(245,158,11,0.15);
  --red:        #ef4444;
  --red-dim:    rgba(239,68,68,0.15);
  --blue:       #3b82f6;
  --blue-dim:   rgba(59,130,246,0.15);
  --orange:     #f97316;
  --orange-dim: rgba(249,115,22,0.15);
  --purple:     #a855f7;

  /* Layout */
  --nav-h:      56px;      /* real comick: py-2 + 40px logo = ~56px */
  --mobile-nav-h: 56px;
  --sidebar-w:  220px;
  --max-w:      1536px;    /* comick.dev is essentially full-width */
  --container-px: 12px;

  /* Type badge colors — solid dark bg, exact comick values */
  --type-manga-bg:   #1d4ed8;  /* blue-700 */
  --type-manhwa-bg:  #15803d;  /* green-700 */
  --type-manhua-bg:  #c2410c;  /* orange-700 */
  --type-comic-bg:   #7e22ce;  /* purple-800 */

  /* Radii */
  --r:    4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
}

body.light {
  --bg:         #f9fafb;
  --surface:    #ffffff;
  --surface2:   #f3f4f6;
  --surface3:   #f0f4f8;
  --border:     #e5e7eb;
  --border-sm:  #d1d5db;
  --text:       #374151;
  --text-sm:    #6b7280;
  --text-xs:    #9ca3af;
  --text-bright:#111827;
  --muted:      #9ca3af;
  --accent-text:#0284c7;
}

/* ── Scrollbars ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 6px; height: 6px; }
::-webkit-scrollbar-track      { background: var(--bg); }
::-webkit-scrollbar-thumb      { background: var(--border-sm); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: #6b7280; }

/* ── Topnav ──────────────────────────────────────────────────────────────── */
#topnav {
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: visible;
  height: var(--nav-h);
  background: #1d2937;
  border-bottom: 1px solid #374151;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 0;
}
@media (min-width: 768px)  { #topnav { padding: 0 24px; } }
@media (min-width: 1280px) { #topnav { padding: 0 32px; } }
body.light #topnav { background: #f9fafb; }

/* Logo — fixed width left anchor so search can truly center */
.nav-logo-wrap {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; text-decoration: none;
  min-width: var(--nav-logo-w, 120px);
}
.nav-logo-icon { width: 24px; height: 24px; flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav-logo-title {
  font-size: 13px; font-weight: 700; color: var(--text-bright);
  white-space: nowrap; letter-spacing: -0.1px;
}
.nav-logo-sub {
  font-size: 9px; color: var(--text-xs); white-space: nowrap;
}
.nav-logo-wrap:hover .nav-logo-title { opacity: 0.8; }

/* Search — flex:1 fills middle, inner wrapper constrains & centers the input */
.nav-search {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  min-width: 0;
}
/* inner wrapper — this is what we position the icon/kbd relative to */
.nav-search-inner {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-width: 200px;
  display: flex;
  align-items: center;
}
.nav-search-icon {
  position: absolute;
  left: 8px;
  top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--text-xs); pointer-events: none;
  z-index: 1;
}
#nav-search-input {
  width: 100%;
  height: 32px;
  background: #394253;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 0 52px 0 28px;
  color: var(--text); font-size: 13px; outline: none;
  transition: border-color 0.15s;
}
#nav-search-input::-webkit-search-cancel-button,
#nav-search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
#nav-search-input:focus { border-color: var(--accent); }
#nav-search-input::placeholder { color: var(--text-xs); }
.nav-search-kbd {
  position: absolute;
  right: 8px;
  top: 50%; transform: translateY(-50%);
  font-size: 9px; color: var(--text-xs); pointer-events: none;
  background: rgba(255,255,255,0.08); padding: 2px 5px;
  border-radius: 3px; white-space: nowrap; z-index: 1;
}

/* Search dropdown */
.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border-sm);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: none; z-index: 300;
}
.search-dropdown.open { display: block; }
.search-result-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.1s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #374151; }
.search-result-thumb {
  width: 28px; height: 40px; border-radius: 2px;
  object-fit: cover; background: var(--surface2); flex-shrink: 0;
}
.search-result-title { font-size: 13px; font-weight: 500; color: var(--text); }
.search-result-meta  { font-size: 11px; color: var(--text-sm); margin-top: 1px; }
.search-no-results   { padding: 12px; text-align: center; color: var(--text-sm); font-size: 13px; }

/* Right side — flex-shrink:0 so it stays fixed, search fills the middle */
.nav-right {
  display: flex; align-items: center; gap: 1px;
  flex: 0 0 auto;
  /* Match this to logo width so search is truly centered */
  min-width: var(--nav-logo-w, 120px);
  justify-content: flex-end;
}
#nav-categories-btn { display: none; }
/* Search bar: flex:1 fills middle, constrained by equal-width logo and nav-right */
.nav-search {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  min-width: 0;
}
@media (max-width: 768px) {
  .nav-right { display: none !important; }
}

/* Text nav buttons — Categories, Search, My List */
.nav-text-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 6px;
  font-size: 12px; font-weight: 500; color: #BBC3D0;
  background: none; border: none; border-radius: 0;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.nav-text-btn:hover {
  background: none !important;
  color: #BBC3D0;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.nav-text-btn:focus { outline: none; }
.nav-text-btn.active {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Icon buttons — tight cluster matching screenshot */
.btn-icon {
  width: 28px; height: 28px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: #BBC3D0; transition: color 0.1s, background 0.1s;
  background: none; border: none; cursor: pointer;
}
.btn-icon:hover { color: var(--text-bright); background: #374151; }
.btn-icon svg { width: 14px; height: 14px; }

/* Sign in — same as other btn-icon since it's now the user icon */
.btn-login {
  width: 28px; height: 28px; padding: 0; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; background: none; color: #BBC3D0; border: none;
  transition: background 0.1s, color 0.1s; cursor: pointer;
}
.btn-login:hover { background: #374151; color: var(--text-bright); }

/* ── Mobile bottom nav ───────────────────────────────────────────────────── */
#mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  height: 52px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
}
@media (max-width: 768px) {
  #mobile-nav { display: flex; }
  body { padding-bottom: var(--mobile-nav-h); }
  #topnav .nav-links { display: none; }
  .nav-text-btn { display: none; }
  .nav-search { display: none !important; }
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  padding: 6px 0;
  color: var(--text-xs);
  cursor: pointer;
  transition: color 0.1s;
}
.mobile-nav-item.active { color: var(--accent); }
.mobile-nav-item svg  { width: 22px; height: 22px; }
.mobile-nav-item span { font-size: 10px; font-weight: 500; }

/* ── Pages ───────────────────────────────────────────────────────────────── */
#app { min-height: calc(100dvh - var(--nav-h)); }
.page { display: none; }
.page.active { display: block; }

/* ── Comic card ──────────────────────────────────────────────────────────── */
.comic-card {
  cursor: pointer;
  border-radius: var(--r);
  overflow: hidden;
  /* NO background — comick cards have no surface wrapper, just image + text */
  transition: opacity 0.15s;
}
.comic-card:hover { opacity: 0.85; }

.comic-card-cover-wrap {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
}
.comic-card-cover {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: var(--surface2);
  display: block;
}

/* Title sits BELOW the image, no padded box */
.comic-card-info { padding: 5px 2px 6px; }
.comic-card-title {
  font-size: 13px;          /* comick uses 13px for card titles */
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.1s;
}
.comic-card:hover .comic-card-title { color: var(--accent); }

.comic-card-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Cover badges — comick uses rounded pill not square */
.cover-badge {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.cover-badge-ch {
  bottom: 0; right: 0;
  background: rgba(0,0,0,0.72);
  color: #fff;
  border-radius: 3px 0 3px 0;   /* comick: rounded only top-left */
}
.cover-badge-type { top: 0; left: 0; border-radius: 0 0 3px 0; }
.type-manga   { background: var(--type-manga-bg);   color: #fff; }
.type-manhwa  { background: var(--type-manhwa-bg);  color: #fff; }
.type-manhua  { background: var(--type-manhua-bg);  color: #fff; }
.type-comic   { background: var(--type-comic-bg);   color: #fff; }

/* Star rating */
.card-star {
  color: #fbbf24;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r);
}
.skeleton-card { background: var(--surface); border-radius: var(--r); overflow: hidden; }
.skeleton-cover { width: 100%; aspect-ratio: 2/3; }
.skeleton-line  { height: 11px; margin: 6px 6px 3px; }
.skeleton-line.short { width: 55%; }

/* ── Comic grid ──────────────────────────────────────────────────────────── */
.comic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
@media (min-width: 480px)  { .comic-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } }
@media (min-width: 768px)  { .comic-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } }
@media (min-width: 1024px) { .comic-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } }

/* ── Section header ──────────────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .section-title { font-size: 15px; }
}
.section-see-all {
  font-size: 11px;
  color: var(--text-sm);
  font-weight: 500;
  transition: color 0.1s;
}
.section-see-all:hover { color: var(--accent); }
.home-section { margin-bottom: 32px; }

/* ── Latest updates strip ────────────────────────────────────────────────── */
/* comick update strip: 2-col grid of items, each item is a flex row */
.updates-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 900px)  { .updates-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .updates-grid { grid-template-columns: 1fr 1fr 1fr; } }

.update-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.1s;
  min-height: 60px;
  overflow: hidden;
  /* tap highlight on mobile */
  -webkit-tap-highlight-color: rgba(255,255,255,0.06);
}
.update-item:hover,
.update-item:active { background: var(--surface2); }

.update-thumb {
  width: 40px;
  height: 54px;
  border-radius: 3px;
  object-fit: cover;
  background: var(--surface2);
  flex-shrink: 0;
}

.update-info { flex: 1; min-width: 0; overflow: hidden; max-width: 100%; }
.update-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  transition: color 0.1s;
  max-width: 100%;
}
.update-item:hover .update-title,
.update-item:active .update-title { color: var(--accent); }

.update-ch {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.update-time {
  font-size: 10px;
  color: var(--text-xs);
  margin-top: 2px;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .update-thumb  { width: 44px; height: 60px; }
  .update-title  { font-size: 13px; }
  .update-ch     { font-size: 12px; }
  .update-time   { font-size: 11px; }
}

/* Type dot on right edge */
.update-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 4px;
}

/* ── Stats banner ────────────────────────────────────────────────────────── */
/* comick: single line strip, no border box — just inline text with separator dots */
.stats-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-sm);
  flex-wrap: wrap;
}
.stats-banner-num   { font-weight: 700; color: var(--text-bright); }
.stats-banner-label { color: var(--text-sm); }
.stats-divider      { color: var(--text-xs); padding: 0 4px; }

/* ── Type tabs ───────────────────────────────────────────────────────────── */
/* comick: underline tab style, no border-bottom on container */
.type-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.type-tab {
  height: 40px;              /* comick tabs are 40px tall */
  padding: 0 16px;
  font-size: 14px;           /* 14px not 13px */
  font-weight: 600;          /* semibold matches comick nav */
  color: var(--text-sm);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.type-tab:hover { color: var(--text); }
.type-tab.active { color: var(--text-bright); border-bottom-color: var(--accent); }

/* ── Tag pill ────────────────────────────────────────────────────────────── */
/* comick genre pills: rounded, NOT uppercase, ~12px font */
.tag-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-md);   /* rounded, not 2px square */
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.1s;
  line-height: 1;
}
.tag-pill:hover { opacity: 0.8; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;              /* comick buttons: ~38px tall */
  padding: 0 16px;
  border-radius: var(--r-md);
  font-size: 14px;           /* 14px base */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1;
}

/* Primary — sky-400 fill, dark text (confirmed from live HTML: bg-blue-500) */
.btn-primary {
  background: var(--accent);     /* sky-400 = #38bdf8 */
  color: #0c1a25;                /* very dark — readable on sky-400 */
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-h);
  border-color: var(--accent-h);
}

/* Outline — gray border, text, hover fills slightly */
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-sm);
}
.btn-outline:hover {
  background: var(--surface2);
  border-color: var(--text-sm);
}

/* Ghost — no border, subtle hover */
.btn-ghost {
  background: transparent;
  color: var(--text-sm);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface2); color: var(--text); }

/* Sizes */
.btn-xs { height: 26px; padding: 0 8px;  font-size: 11px; border-radius: var(--r); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
@media (max-width: 640px) {
  #toast-container {
    right: 10px; left: 10px;
    bottom: calc(var(--mobile-nav-h) + 8px);
  }
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  animation: toastIn 0.2s ease;
  pointer-events: all;
}
@keyframes toastIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes toastOut { to   { opacity:0; transform:translateY(4px); } }
.toast.out { animation: toastOut 0.18s ease forwards; }
.toast-success { background: #14532d; color: #86efac; border: 1px solid #166534; }
.toast-error   { background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d; }
.toast-info    { background: var(--surface2); color: var(--text); border: 1px solid var(--border-sm); }
.toast-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.toast-success .toast-dot { background: #22c55e; }
.toast-error   .toast-dot { background: #ef4444; }
.toast-info    .toast-dot { background: var(--accent); }

/* ── Auth modal ──────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border-sm);
  border-radius: var(--r-md);
  padding: 24px;
  width: 100%;
  max-width: 360px;
  transform: translateY(12px);
  transition: transform 0.2s;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-title { font-size: 16px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
.modal-sub   { font-size: 13px; color: var(--text-sm); margin-bottom: 16px; }
.modal-input {
  width: 100%;
  height: 38px;
  background: var(--surface2);
  border: 1px solid var(--border-sm);
  border-radius: var(--r);
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.modal-input:focus { border-color: var(--accent); }
.modal-input::placeholder { color: var(--text-xs); }
.modal-error  { font-size: 12px; color: var(--red); margin-bottom: 8px; min-height: 14px; }
.modal-footer { font-size: 12px; color: var(--text-xs); margin-top: 10px; text-align: center; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden   { display: none !important; }
.sr-only  { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* comick uses px-3/px-6/px-8 responsive padding, max-w-screen-2xl */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 12px;
}
@media (min-width: 640px)  { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 32px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Browse / Search page
   ═══════════════════════════════════════════════════════════════════════════ */

.browse-layout {
  display: flex;
  max-width: var(--max-w);
  margin: 0 auto;
  min-height: calc(100dvh - var(--nav-h));
  padding: 0 12px;
}
@media (min-width: 640px)  { .browse-layout { padding: 0 24px; } }
@media (min-width: 1024px) { .browse-layout { padding: 0 32px; } }

/* sidebar */
.browse-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  padding: 16px 12px 40px;
  border-right: 1px solid var(--border);
  position: sticky;
  top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-section { margin-bottom: 18px; }
.sidebar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-xs);
  margin-bottom: 6px;
}

.browse-main {
  flex: 1;
  min-width: 0;
  padding: 16px 16px 48px;
}

/* topbar */
.browse-topbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.browse-search-wrap { flex: 1; position: relative; }
.browse-search-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-xs); pointer-events: none;
}
.browse-search-input {
  width: 100%; height: 36px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0 32px 0 30px;
  color: var(--text); font-size: 13px; outline: none;
  transition: border-color 0.15s;
}
.browse-search-input:focus { border-color: var(--accent); }
.browse-search-input::placeholder { color: var(--text-xs); }
.browse-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--text-xs); padding: 3px;
  border-radius: var(--r); transition: color 0.1s;
}
.browse-search-clear:hover { color: var(--text); }

.browse-filter-toggle {
  display: none; height: 36px; padding: 0 12px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r); font-size: 13px; font-weight: 500;
  color: var(--text); align-items: center; gap: 5px;
  white-space: nowrap; position: relative;
}
.browse-filter-toggle svg { width: 14px; height: 14px; }
.filter-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  background: var(--accent); color: #0c1a25;
  font-size: 9px; font-weight: 700; border-radius: 99px;
  padding: 0 3px; align-items: center; justify-content: center;
}
@media (max-width: 768px) {
  .browse-filter-toggle { display: flex; }
  .browse-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
    width: 260px; background: var(--surface);
    border-right: 1px solid var(--border-sm);
    padding: 16px 12px 40px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    height: 100dvh;
  }
  .browse-sidebar.open { transform: translateX(0); }
  .browse-main { padding: 12px 12px 48px; }
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.6); z-index: 299;
}
.sidebar-overlay.open { display: block; }

/* sort buttons */
.sort-options { display: flex; flex-direction: column; gap: 1px; }
.sort-btn {
  text-align: left; padding: 5px 8px; border-radius: var(--r);
  font-size: 12px; font-weight: 500; color: var(--text-sm);
  transition: all 0.1s; cursor: pointer;
}
.sort-btn:hover  { color: var(--text); background: var(--surface2); }
.sort-btn.active { color: var(--accent); background: var(--accent-dim); }

/* filter radio rows */
.filter-checks { display: flex; flex-direction: column; gap: 1px; }
.filter-check-label {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: var(--r);
  font-size: 12px; color: var(--text-sm);
  cursor: pointer; user-select: none;
  transition: all 0.1s;
}
.filter-check-label:hover { color: var(--text); background: var(--surface2); }
.filter-check-label input { display: none; }
.filter-check-label:has(input:checked) { color: var(--text); }
.filter-check-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; opacity: 0.45; transition: opacity 0.1s;
}
.filter-check-label:has(input:checked) .filter-check-dot { opacity: 1; }

/* tag filter */
.tag-search-wrap { margin-bottom: 6px; }
.tag-search-input {
  width: 100%; height: 28px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 0 8px;
  font-size: 12px; color: var(--text); outline: none;
  transition: border-color 0.15s;
}
.tag-search-input:focus { border-color: var(--accent); }
.tag-search-input::placeholder { color: var(--text-xs); }
.tag-filter-list { display: flex; flex-wrap: wrap; gap: 4px; max-height: 140px; overflow-y: auto; }
.tag-filter-btn {
  height: 22px; padding: 0 8px; border-radius: var(--r-md);
  font-size: 12px; font-weight: 500;
  background: var(--surface2); color: var(--text-sm);
  border: 1px solid var(--border); cursor: pointer;
  transition: all 0.1s; white-space: nowrap;
}
.tag-filter-btn:hover { border-color: var(--border-sm); color: var(--text); }
.tag-filter-btn.active { font-weight: 600; }
.tag-empty { font-size: 11px; color: var(--text-xs); padding: 3px 2px; }

/* active pills */
.active-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; align-items: center; }
.active-filter-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px; border-radius: var(--r-md);
  font-size: 12px; font-weight: 500;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border-sm);
}
.pill-remove { font-size: 10px; opacity: 0.5; cursor: pointer; transition: opacity 0.1s; }
.pill-remove:hover { opacity: 1; }
.clear-all-btn { font-size: 12px; color: var(--text-xs); padding: 3px 6px; border-radius: var(--r); cursor: pointer; transition: color 0.1s; }
.clear-all-btn:hover { color: var(--red); }

/* results */
.browse-results-header { margin-bottom: 10px; min-height: 18px; }
.browse-result-count { font-size: 12px; color: var(--text-sm); }

/* empty state */
.browse-empty {
  grid-column: 1 / -1; text-align: center; padding: 48px 16px;
}
.browse-empty-icon  { font-size: 40px; color: var(--text-xs); margin-bottom: 10px; line-height: 1; }
.browse-empty-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.browse-empty-sub   { font-size: 12px; color: var(--text-sm); margin-bottom: 14px; }

/* pagination */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 3px; margin-top: 28px; flex-wrap: wrap;
}
.page-btn {
  min-width: 32px; height: 32px; padding: 0 6px;
  border-radius: var(--r); font-size: 13px; font-weight: 500;
  background: var(--surface2); color: var(--text-sm);
  border: 1px solid var(--border); cursor: pointer;
  transition: all 0.1s;
}
.page-btn:hover:not([disabled]) { color: var(--text); border-color: var(--border-sm); }
.page-btn.active { background: var(--accent); color: #0c1a25; border-color: var(--accent); font-weight: 700; }
.page-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.page-arrow { font-size: 16px; line-height: 1; }
.page-ellipsis { font-size: 13px; color: var(--text-xs); padding: 0 3px; line-height: 32px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Featured Carousel
   ═══════════════════════════════════════════════════════════════════════════ */

.featured-carousel {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  height: 220px;
  user-select: none;
}
@media (min-width: 640px) { .featured-carousel { height: 280px; } }
@media (min-width: 960px) { .featured-carousel { height: 320px; } }

.featured-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.skeleton-featured {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.5s infinite;
}

.featured-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  filter: blur(0px);
  transform: scale(1.04);
  transition: transform 6s ease;
}
.featured-slide:hover .featured-bg { transform: scale(1.07); }

.featured-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
}

.featured-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px 20px 22px;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.featured-type-badge { position: static !important; font-size: 10px !important; }

.featured-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) { .featured-title { font-size: 22px; } }

.featured-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.featured-rating {
  font-size: 12px;
  font-weight: 600;
  color: #fbbf24;
}
.featured-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.featured-cta {
  margin-top: 4px;
  width: fit-content;
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
}

/* arrows */
.featured-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 44px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 22px;
  line-height: 44px;
  text-align: center;
  border-radius: var(--r);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.15s;
  z-index: 10;
}
.featured-carousel:hover .featured-arrow { opacity: 1; }
.featured-arrow:hover { background: rgba(0,0,0,0.7); }
.featured-prev { left: 6px; }
.featured-next { right: 6px; }

/* dots */
.featured-dots {
  position: absolute;
  bottom: 10px;
  right: 12px;
  display: flex;
  gap: 5px;
  z-index: 10;
}
.featured-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background 0.2s, width 0.2s;
}
.featured-dot.active { background: #fff; width: 16px; border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Ranked grid (numbered list with time filter tabs)
   ═══════════════════════════════════════════════════════════════════════════ */

.ranked-time-tabs { display: flex; gap: 2px; }
.ranked-tab {
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.1s;
}
.ranked-tab:hover { color: var(--text); }
.ranked-tab.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

.ranked-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
@media (min-width: 600px) { .ranked-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .ranked-grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } }

.ranked-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.1s;
  min-width: 0;
}
.ranked-card:hover { background: var(--surface2); }

.ranked-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--border-sm);
  width: 22px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}
.ranked-card:nth-child(1) .ranked-num { color: #fbbf24; }
.ranked-card:nth-child(2) .ranked-num { color: #9ca3af; }
.ranked-card:nth-child(3) .ranked-num { color: #cd7f32; }

.ranked-cover {
  width: 36px;
  height: 50px;
  border-radius: 2px;
  object-fit: cover;
  background: var(--surface2);
  flex-shrink: 0;
}

.ranked-info { flex: 1; min-width: 0; }
.ranked-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.ranked-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   Horizontal carousel sections
   ═══════════════════════════════════════════════════════════════════════════ */

.h-carousel-wrap {
  position: relative;
  overflow: visible;  /* allow arrows to draw outside the track */
  padding: 0 18px;    /* make room for arrows so they don't overlap covers */
}

.h-carousel {
  min-height: 128px;
  contain: layout style;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 96px;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.h-carousel::-webkit-scrollbar { display: none; }
.h-carousel .comic-card { scroll-snap-align: start; }

/* Responsive cover widths — match comick.io portrait cover sizes */
@media (min-width: 480px)  { .h-carousel { grid-auto-columns: 112px; gap: 8px; } }
@media (min-width: 768px)  { .h-carousel { grid-auto-columns: 144px; gap: 10px; } }
@media (min-width: 1280px) { .h-carousel { grid-auto-columns: 176px; gap: 12px; } }

/* In carousel context: hide the text-below, only show cover as portrait */
.h-carousel .comic-card-info { display: none; }
.h-carousel .comic-card-cover { aspect-ratio: 2/3; width: 100%; }

.h-carousel-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 28px;
  height: 52px;
  background: var(--surface);
  border: 1px solid var(--border-sm);
  color: var(--text);
  font-size: 20px;
  line-height: 52px;
  text-align: center;
  border-radius: var(--r);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.h-carousel-wrap:hover .h-carousel-arrow { opacity: 1; }
.h-carousel-arrow:hover { background: var(--surface2); }
.h-carousel-prev { left: -18px; }
.h-carousel-next { right: -18px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Comic Detail Page
   ═══════════════════════════════════════════════════════════════════════════ */

.comic-detail {}

/* Hero */
.comic-hero {
  position: relative;
  background: var(--surface);
  overflow: hidden;
  padding: 28px 0 24px;
}
.comic-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  filter: blur(18px) brightness(0.3);
  transform: scale(1.1);
}
.comic-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(17,24,39,0.6) 0%, rgba(17,24,39,0.95) 100%);
}
body.light .comic-hero-overlay { background: linear-gradient(to bottom, rgba(249,250,251,0.6), rgba(249,250,251,0.95)); }

.comic-hero-inner {
  position: relative;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.comic-cover-col {
  flex-shrink: 0;
  width: 120px;
}
@media (min-width: 480px) { .comic-cover-col { width: 150px; } }
@media (min-width: 768px) { .comic-cover-col { width: 180px; } }

.comic-cover-img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: opacity 0.15s;
}
.comic-cover-img:hover { opacity: 0.9; }

.comic-meta-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.comic-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-bright);
  line-height: 1.2;
  margin: 0;
}
@media (min-width: 640px) { .comic-title { font-size: 26px; } }

.comic-alt-titles {
  font-size: 12px;
  color: var(--text-sm);
  line-height: 1.4;
}

.comic-stats-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.comic-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}
.comic-stat-icon { font-size: 13px; color: var(--text-sm); }
.comic-stat-val  { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.comic-stat-label{ font-size: 11px; color: var(--text-xs); }
.comic-stat-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.comic-desc-wrap { position: relative; }
.comic-desc {
  font-size: 13px;
  color: var(--text-sm);
  line-height: 1.55;
  transition: max-height 0.3s ease;
}
.comic-desc-toggle {
  font-size: 12px;
  color: var(--accent);
  margin-top: 4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.comic-desc-toggle:hover { color: var(--accent-h); }

.comic-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* Body grid */
.comic-body-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .comic-body-grid { grid-template-columns: 1fr 280px; }
}

/* Chapters */
.chap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}
.chap-row:last-child { border-bottom: none; }
.chap-row:hover { background: var(--surface2); }

.chap-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chap-meta  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.chap-time  { font-size: 11px; color: var(--text-xs); }
.chap-sources { font-size: 11px; color: var(--text-sm); background: var(--surface2); padding: 1px 5px; border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Landing Page
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero */
.landing-hero {
  background: transparent;
  padding: 64px 32px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .landing-hero { padding: 80px 48px 60px; } }
body.light .landing-hero {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #eff6ff 100%);
}

.landing-hero-content {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.landing-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 0 0 10px;
}
@media (min-width: 640px) { .landing-title { font-size: 52px; } }

.landing-sub {
  font-size: 15px;
  color: var(--text-sm);
  line-height: 1.65;
  margin: 0 0 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.landing-cta-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.landing-cta-btn {
  height: 44px;
  padding: 0 28px;
  font-size: 15px;
  border-radius: var(--r-md);
}

/* Get Started — dark red fill from JSON: #b91c1c */
.btn-primary.landing-cta-btn,
#landing-get-started {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
#landing-get-started:hover { background: #991b1b; border-color: #991b1b; }

/* Read Now — blue from JSON: #1e40af, lightens to #3b82f6 on hover */
.btn-readnow {
  background: #1e40af;
  color: #fff;
  border-color: #1e40af;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.btn-readnow:hover,
.btn-readnow:focus {
  background: #3b82f6;         /* lightens to #3b82f6 on hover per notes */
  border-color: #3b82f6;
}
.btn-readnow:active {
  transform: scale(1.03);      /* enlarges slightly on click per notes */
}

/* Stats bar */
.landing-stats-bar {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 0;
}
.landing-stats-bar.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
.landing-stats-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sm);
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}
.landing-stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
}
.landing-stat {
  text-align: center;
  padding: 0 clamp(8px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}
.landing-stat-num {
  font-size: clamp(16px, 5vw, 36px);
  font-weight: 400;
  color: var(--text-bright);
  line-height: 1;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-stat-label {
  font-size: clamp(9px, 2vw, 13px);
  color: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}
.landing-stat-div {
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}

/* Feature text sections — max 680px wide for comfortable reading */
.landing-feature-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
/* Landing sections that use .container need the text constrained */
.landing-feature-section.container,
.landing-genre-section.container,
.landing-stats-bar.container,
.landing-faq.container,
.landing-cta-bottom.container {
  padding-left: max(24px, 4vw);
  padding-right: max(24px, 4vw);
}
@media (min-width: 640px) {
  .landing-feature-section.container,
  .landing-genre-section.container,
  .landing-stats-bar.container,
  .landing-faq.container,
  .landing-cta-bottom.container {
    padding-left: max(40px, 5vw);
    padding-right: max(40px, 5vw);
  }
}
@media (min-width: 1024px) {
  .landing-feature-section.container,
  .landing-genre-section.container,
  .landing-stats-bar.container,
  .landing-faq.container,
  .landing-cta-bottom.container {
    padding-left: max(64px, 6vw);
    padding-right: max(64px, 6vw);
  }
}
.landing-feature-text {
  max-width: 680px;
}
.landing-feature-alt { background: transparent; }

.landing-feature-heading {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 8px;
  line-height: 1.3;
}
.landing-feature-body {
  font-size: 13px;
  color: var(--text-sm);
  line-height: 1.65;
}

/* Genre bars */
.landing-genre-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  max-width: 100%;
  overflow: hidden;
}
.landing-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 14px;
}
.landing-genre-bars { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.genre-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  overflow: hidden;
}
.genre-bar-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sm);
  width: 70px;
  min-width: 70px;
  flex-shrink: 0;
  text-align: right;
}
.genre-bar-track {
  flex: 1;
  min-width: 0;
  max-width: 400px;
  height: 7px;
  background: var(--surface2);
  border-radius: 4px;
  overflow: hidden;
}
.genre-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* Bottom CTA */
.landing-cta-bottom {
  text-align: center;
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}

/* FAQ */
.landing-faq {
  padding: 40px 0 48px;
  max-width: 100%;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  padding: 14px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  transition: color 0.1s;
}
.faq-item summary:hover { color: var(--text-bright); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 20px;
  color: var(--text-xs);
  font-weight: 400;
  flex-shrink: 0;
  margin-left: 12px;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
  font-size: 14px;
  color: var(--text-sm);
  line-height: 1.65;
  padding: 4px 4px 16px;
}

/* Footer */
.landing-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 16px 0;
}
.landing-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.landing-footer-logo {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
}
.landing-footer-links {
  display: flex;
  gap: 20px;
}
.landing-footer-links a {
  font-size: 13px;
  color: var(--text-sm);
  transition: color 0.1s;
}
.landing-footer-links a:hover { color: var(--text-bright); }
.landing-footer-copy {
  font-size: 12px;
  color: var(--text-xs);
}

/* ── PWA install notice — mobile only ──────────────────────────────────────── */
.pwa-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #1e40af;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
/* Only show on mobile — hide on desktop */
@media (min-width: 768px) { .pwa-notice { display: none !important; } }

/* ── Home two-column layout ─────────────────────────────────────────────────── */
.home-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 12px 48px;
}
@media (min-width: 640px)  { .home-layout { padding: 0 24px 48px; } }
@media (min-width: 1024px) {
  .home-layout {
    grid-template-columns: 1fr 260px;
    gap: 24px;
    padding: 0 32px 48px;
    align-items: start;
  }
}

.home-main { min-width: 0; padding-top: 12px; }

/* ── Home intro text ────────────────────────────────────────────────────────── */
.home-intro {
  font-size: 13px;
  color: var(--text-xs);
  line-height: 1.6;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.home-intro-link { color: var(--accent); }
.home-intro-link:hover { text-decoration: underline; }

/* ── Right sidebar ──────────────────────────────────────────────────────────── */
.home-sidebar {
  display: none;
  padding-top: 16px;
  position: sticky;
  top: calc(var(--nav-h) + 8px);
  max-height: calc(100vh - var(--nav-h) - 16px);
  overflow-y: auto;
  scrollbar-width: thin;
}
@media (min-width: 1024px) { .home-sidebar { display: block; } }

.sidebar-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 12px;
}
.sidebar-widget-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-bright);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

/* Popular ongoing ranked list in sidebar */
.sidebar-ranked-list { display: flex; flex-direction: column; gap: 0; }
.sidebar-ranked-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: var(--r);
  transition: background 0.1s;
}
.sidebar-ranked-item:hover { background: var(--surface2); }
.sidebar-rank-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-xs);
  width: 18px;
  flex-shrink: 0;
  text-align: center;
}
.sidebar-ranked-item:nth-child(1) .sidebar-rank-num { color: #fbbf24; }
.sidebar-ranked-item:nth-child(2) .sidebar-rank-num { color: #9ca3af; }
.sidebar-ranked-item:nth-child(3) .sidebar-rank-num { color: #cd7f32; }
.sidebar-cover {
  width: 32px;
  height: 44px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--surface2);
  flex-shrink: 0;
}
.sidebar-cover-placeholder {
  width: 32px;
  height: 44px;
  border-radius: 2px;
  flex-shrink: 0;
}
.sidebar-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sm);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.sidebar-see-more {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  padding: 8px 0 2px;
  transition: opacity 0.1s;
}
.sidebar-see-more:hover { opacity: 0.75; }

/* Latest comments in sidebar */
.sidebar-comments-list { display: flex; flex-direction: column; gap: 10px; }
.sidebar-comment {
  font-size: 11px;
  color: var(--text-xs);
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.sidebar-comment:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-comment-user { font-weight: 600; color: var(--text-sm); margin-bottom: 2px; }
.sidebar-comment-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-empty { font-size: 12px; color: var(--text-xs); padding: 4px 0; }

/* Import buttons */
.sidebar-import-btn {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  background: var(--surface2);
  border: 1px solid var(--border-sm);
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sm);
  transition: all 0.1s;
}
.sidebar-import-btn:hover { border-color: var(--accent); color: var(--accent); }
.sidebar-import-pwa { color: var(--green); border-color: var(--green); background: var(--green-dim); }

/* ── Carousel placeholder skeleton ─────────────────────────────────────────── */
.carousel-placeholder {
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.carousel-placeholder-card {
  flex-shrink: 0;
  width: 150px;
}
.carousel-placeholder-cover {
  width: 150px;
  aspect-ratio: 2/3;
  border-radius: var(--r);
}
.carousel-placeholder-line {
  height: 10px;
  border-radius: 3px;
  margin-top: 6px;
}
.carousel-placeholder-line.short { width: 60%; margin-top: 4px; }

/* ── Updates feed toggles (Hot / New / Latest) ────────────────────────────── */
.updates-toggles {
  display: flex;
  gap: 4px;
}
.updates-toggle {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.1s;
}
.updates-toggle:hover { color: var(--text); border-color: var(--border-sm); }
.updates-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0c1a25;
}

/* Nav link hover — underline the text itself, not a line below */
.nav-links a {
  position: relative;
  padding: 6px 12px;
  color: var(--text-sm);
  font-size: 14px;
  font-weight: 600;
  transition: color 0.1s;
  background: transparent !important;
  border-radius: 0;
  text-decoration: none;
}
.nav-links a:hover {
  color: var(--text-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nav-links a.active {
  color: var(--text-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nav-links a::after { display: none; }

/* Comic title hover — light film / underline, not full opacity change */
.comic-card:hover { opacity: 1; }  /* remove opacity hover from card */
.comic-card-cover-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.06);   /* light film as per notes */
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.comic-card:hover .comic-card-cover-wrap::after { opacity: 1; }

/* Sort dropdown highlighted option — bg #3b82f6 dark, #e5e7eb light */
.sort-btn.active,
.sort-btn:hover {
  color: #fff;
  background: #3b82f6;   /* dark mode: blue-500 as shown in JSON */
}
body.light .sort-btn.active,
body.light .sort-btn:hover {
  color: var(--text);
  background: #e5e7eb;   /* light mode: gray-200 as shown in JSON */
}

/* Settings list row hover — #374151 (gray-700) */
.settings-item:hover { background: #374151; }

/* Search result hover — #374151 */
.search-result-item:hover { background: #374151; }

/* ═══════════════════════════════════════════════════════════════════════════
   Cover strip (ranked / plain horizontal cover carousel — comick.io style)
   ═══════════════════════════════════════════════════════════════════════════ */

.cover-strip-wrap {
  position: relative;
}

.cover-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.cover-strip::-webkit-scrollbar { display: none; }

.rank-cover-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  cursor: pointer;
  transition: opacity 0.15s;
}
.rank-cover-item:hover { opacity: 0.85; }

.rank-cover-wrap {
  position: relative;
  width: 96px;
  height: 128px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface2);
  flex-shrink: 0;  /* prevent any resize during transition */
}
@media (min-width: 480px)  { .rank-cover-wrap { width: 112px; height: 150px; } }
@media (min-width: 768px)  { .rank-cover-wrap { width: 144px; height: 192px; } }
@media (min-width: 1024px) { .rank-cover-wrap { width: 176px; height: 235px; } }

.rank-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.rank-num-badge {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 24px;
  height: 24px;
  border-radius: 4px 0 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  padding: 0 4px;
  line-height: 1;
  z-index: 2;
}
@media (min-width: 768px) { .rank-num-badge { min-width: 30px; height: 30px; font-size: 16px; } }

.rank-cover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  padding: 24px 6px 6px;
  font-size: 10px;
  font-weight: 600;
  color: #e5e7eb;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) { .rank-cover-overlay { font-size: 11px; padding: 28px 8px 8px; } }

.cover-strip-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 52px;
  background: var(--surface);
  border: 1px solid var(--border-sm);
  color: var(--text);
  font-size: 20px;
  line-height: 52px;
  text-align: center;
  border-radius: var(--r);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.cover-strip-wrap:hover .cover-strip-arrow { opacity: 1; }
.cover-strip-arrow:hover { background: var(--surface2); }
.cover-strip-prev { left: -14px; }
.cover-strip-next { right: -14px; }

.cover-strip-empty {
  color: var(--text-sm);
  font-size: 13px;
  padding: 20px 0;
}

/* ── When carousel contains rank-cover-item, switch to flex layout ──────────── */
/* rank-cover-item has self-contained sizing via rank-cover-wrap width */
.h-carousel:has(.rank-cover-item) {
  display: flex;
  grid-auto-flow: unset;
  grid-auto-columns: unset;
  gap: 6px;
}
@media (min-width: 480px)  { .h-carousel:has(.rank-cover-item) { gap: 8px; } }
@media (min-width: 768px)  { .h-carousel:has(.rank-cover-item) { gap: 10px; } }
@media (min-width: 1280px) { .h-carousel:has(.rank-cover-item) { gap: 12px; } }


/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH / BROWSE PAGE  (sp- prefix)
   ═══════════════════════════════════════════════════════════════════════════ */

.sp-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 40px 0;
  min-height: calc(100dvh - var(--nav-h));
}
@media (max-width: 768px) { .sp-wrap { padding: 16px 16px 0; } }

/* heading */
.sp-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sp-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.1;
}
.sp-sub {
  font-size: 13px;
  color: var(--text-xs);
  margin-top: 3px;
}
.sp-results-label {
  font-size: 14px;
  color: var(--text-sm);
  padding-top: 6px;
}
.sp-keyword {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-bright);
  margin-left: 4px;
}

/* sort toggle */
.sp-sort-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-top: 6px;
}
.sp-sort-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.1s;
  white-space: nowrap;
}
.sp-sort-btn:hover { color: var(--text); border-color: var(--border-sm); }
.sp-sort-btn.active { background: #1e3a5f; color: var(--text-bright); border-color: transparent; }
.sp-sort-more-wrap { position: relative; }
.sp-sort-more-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text-sm); cursor: pointer;
  transition: all 0.1s;
}
.sp-sort-more-btn:hover { color: var(--text); border-color: var(--border-sm); }
.sp-sort-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); right: 0;
  background: #253347; border: 1px solid var(--border-sm);
  border-radius: var(--r-md); min-width: 130px; z-index: 200;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4); overflow: hidden;
}
.sp-sort-dropdown.open { display: block; }
.sp-sort-dropdown-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; font-size: 13px; color: var(--text);
  background: none; border: none; cursor: pointer; transition: background 0.1s;
}
.sp-sort-dropdown-item:hover { background: var(--surface2); }
.sp-sort-dropdown-item.active { color: var(--accent); }

/* type tabs */
.sp-type-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.sp-type-tab {
  height: 42px; padding: 0 18px;
  font-size: 14px; font-weight: 600; color: var(--text-sm);
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer; transition: color 0.1s, border-color 0.1s;
}
.sp-type-tab:hover { color: var(--text); }
.sp-type-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* filter toggle button */
.sp-filter-toggle-row { margin-bottom: 8px; }
.sp-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  font-size: 12px; font-weight: 500;
  color: var(--text); background: transparent;
  border: 1px solid var(--border-sm); border-radius: var(--r-md);
  cursor: pointer; transition: all 0.1s;
}
.sp-filter-btn:hover { border-color: var(--accent); color: var(--accent); }

/* filter panel */
.sp-filter-panel {
  display: none;
  border: 1px solid var(--border-sm);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  overflow: hidden;
}
.sp-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .sp-filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sp-filter-grid { grid-template-columns: 1fr; } }

.sp-filter-cell {
  padding: 12px 14px;
  border: 1px solid var(--border);
  margin: -1px 0 0 -1px;
  min-width: 0;
}
.sp-genres-cell { grid-row: span 2; }
.sp-misc-cell { display: flex; flex-direction: column; justify-content: center; gap: 10px; }

.sp-cell-label {
  font-size: 12px; font-weight: 600; color: var(--text);
  margin-bottom: 7px; display: flex; align-items: center; gap: 5px;
}
.sp-cell-sub { font-size: 11px; font-weight: 400; color: var(--text-xs); }

/* genre input + chips */
.sp-genre-input {
  width: 100%; height: 28px;
  background: var(--surface2); border: 1px solid var(--border-sm);
  border-radius: var(--r); padding: 0 10px;
  font-size: 12px; color: var(--text); outline: none; margin-bottom: 8px;
  transition: border-color 0.15s;
}
.sp-genre-input:focus { border-color: var(--accent); }
.sp-genre-input::placeholder { color: var(--text-xs); }
.sp-genre-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  max-height: 170px; overflow-y: auto;
}
.sp-genre-chip {
  height: 20px; padding: 0 7px;
  border-radius: 99px; font-size: 11px; font-weight: 500;
  background: var(--surface2); color: var(--text-sm);
  border: 1px solid var(--border); cursor: pointer;
  transition: all 0.1s; white-space: nowrap;
}
.sp-genre-chip:hover { border-color: var(--border-sm); color: var(--text); }
.sp-genre-chip.active { font-weight: 600; }

/* tag input */
.sp-tag-wrap { position: relative; }
.sp-tag-input {
  width: 100%; height: 28px;
  background: var(--surface2); border: 1px solid var(--border-sm);
  border-radius: var(--r); padding: 0 24px 0 10px;
  font-size: 12px; color: var(--text); outline: none;
}
.sp-tag-input:focus { border-color: var(--accent); }
.sp-tag-input::placeholder { color: var(--text-xs); }
.sp-tag-chevron {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  color: var(--text-xs); pointer-events: none;
}
.sp-tag-dropdown {
  display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: #253347; border: 1px solid var(--border-sm);
  border-radius: var(--r); max-height: 180px; overflow-y: auto;
  z-index: 200; box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.sp-tag-dropdown.open { display: block; }
.sp-tag-item { padding: 7px 12px; font-size: 12px; color: var(--text); cursor: pointer; transition: background 0.1s; }
.sp-tag-item:hover { background: var(--surface2); }
.sp-tag-empty { padding: 10px 12px; font-size: 12px; color: var(--text-xs); }

/* checkboxes */
.sp-chk-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sp-chk-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-sm); cursor: pointer; user-select: none; white-space: nowrap;
}
.sp-chk-label:hover { color: var(--text); }
.sp-chk-block { display: flex; }
.sp-chk { display: none; }
.sp-chk-box {
  width: 13px; height: 13px; border-radius: 2px;
  border: 1px solid var(--border-sm); background: var(--surface2);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sp-chk:checked + .sp-chk-box { background: var(--accent); border-color: var(--accent); }
.sp-chk:checked + .sp-chk-box::after {
  content: ''; display: block; width: 7px; height: 4px;
  border-left: 2px solid #0c1a25; border-bottom: 2px solid #0c1a25;
  transform: rotate(-45deg) translateY(-1px);
}

/* selects */
.sp-select {
  width: 100%; height: 28px;
  background: var(--surface2); border: 1px solid var(--border-sm);
  border-radius: var(--r); padding: 0 24px 0 8px;
  font-size: 12px; color: var(--text); outline: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.sp-select:focus { border-color: var(--accent); }
.sp-select option { background: #253347; }

.sp-number-input {
  width: 80px; height: 28px;
  background: var(--surface2); border: 1px solid var(--border-sm);
  border-radius: var(--r); padding: 0 8px;
  font-size: 12px; color: var(--text); outline: none;
}
.sp-number-input:focus { border-color: var(--accent); }

.sp-released-row { display: flex; align-items: center; gap: 5px; }
.sp-arr { font-size: 13px; color: var(--text-xs); flex-shrink: 0; }

/* results */
.sp-row {
  min-height: 108px;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.1s;
}
.sp-row:first-child { border-top: 1px solid var(--border); }
.sp-row:hover { background: rgba(255,255,255,0.02); }
.sp-rank {
  width: 22px; flex-shrink: 0; font-size: 13px; font-weight: 700;
  color: var(--text-xs); text-align: right; padding-top: 4px; line-height: 1;
}
.sp-cover-wrap { position: relative; flex-shrink: 0; width: 66px; height: 88px; }
.sp-cover {
  width: 66px; height: 90px; object-fit: cover;
  border-radius: var(--r); background: var(--surface2); display: block;
}
.sp-type-badge {
  position: absolute; bottom: 0; left: 0;
  font-size: 9px; font-weight: 700; padding: 2px 4px;
  border-radius: 0 3px 0 var(--r); color: #fff;
}
.sp-type-manga   { background: var(--type-manga-bg); }
.sp-type-manhwa  { background: var(--type-manhwa-bg); }
.sp-type-manhua  { background: var(--type-manhua-bg); }
.sp-type-comic   { background: var(--type-comic-bg); }
.sp-type-others  { background: #6b7280; }
.sp-info { flex: 1; min-width: 0; padding-top: 2px; }
.sp-row-title {
  font-size: 15px; font-weight: 600; color: var(--text-bright);
  line-height: 1.3; margin-bottom: 3px; transition: color 0.1s;
}
.sp-row:hover .sp-row-title { color: var(--accent); }
.sp-row-meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-xs); margin-bottom: 3px; flex-wrap: wrap;
}
.sp-dot { opacity: 0.5; }
.sp-sdot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.sp-alt  { font-size: 12px; color: var(--text-xs); margin-bottom: 3px; }
.sp-desc {
  font-size: 12px; color: var(--text-sm); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-right {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: flex-end; gap: 5px; padding-top: 2px; min-width: 72px;
}
.sp-year { font-size: 12px; color: var(--text-sm); font-weight: 500; }
.sp-stat { font-size: 12px; color: var(--text-sm); }

.sp-empty {
  padding: 40px 0; text-align: center;
  font-size: 14px; color: var(--text-sm);
}
.sp-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 40px 0; font-size: 14px; color: var(--text-sm);
}
.sp-spin { animation: spin 0.8s linear infinite; color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Shared footer ─────────────────────────────────────────────────────────── */
.search-footer {
  margin-top: 48px; padding: 28px 0 32px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.search-footer-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.search-footer-links a { font-size: 13px; color: var(--accent); transition: opacity 0.1s; }
.search-footer-links a:hover { opacity: 0.75; }
.search-footer-socials { display: flex; gap: 14px; }
.footer-social-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--text-xs); transition: color 0.1s;
}
.footer-social-btn:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   SERIES / COMIC DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.series-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.series-hero-inner {
  display: flex; gap: 28px; align-items: flex-start;
  padding-top: 20px; padding-bottom: 24px;
}
@media (max-width: 640px) { .series-hero-inner { flex-direction: column; gap: 16px; } }

.series-cover-col { flex-shrink: 0; width: 200px; }
@media (max-width: 900px) { .series-cover-col { width: 160px; } }
@media (max-width: 640px) { .series-cover-col { width: 130px; } }
.series-cover-img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  border-radius: var(--r); display: block; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.series-meta-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 10px; padding-top: 4px;
}
.series-title { font-size: 22px; font-weight: 700; color: var(--text-bright); line-height: 1.2; margin: 0; }
@media (min-width: 768px) { .series-title { font-size: 26px; } }
.series-alt-title { font-size: 13px; color: var(--text-sm); margin-top: -4px; }

.series-info-rows { display: flex; flex-direction: column; gap: 4px; }
.series-info-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-sm); flex-wrap: wrap;
}
.series-info-key { color: var(--accent); font-weight: 500; flex-shrink: 0; }
.series-info-val { color: var(--text-sm); }
.series-info-link { color: var(--accent); }
.series-info-sep { color: var(--text-xs); }
.series-status-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; display: inline-block; }

.series-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.series-btn-read {
  flex: 1; min-width: 140px; max-width: 220px; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #3b82f6; color: #fff; border: none; border-radius: var(--r);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.series-btn-read:hover { background: #2563eb; }
.series-btn-follow {
  flex: 1; min-width: 120px; max-width: 180px; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border-sm); border-radius: var(--r);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.series-btn-follow:hover { border-color: var(--accent); color: var(--accent); }

.series-desc-wrap { margin-top: 2px; }
.series-desc { font-size: 13px; color: var(--text-sm); line-height: 1.65; white-space: pre-line; }

.series-more-info { margin-top: 4px; }
.series-more-heading { font-size: 14px; font-weight: 700; color: var(--text-bright); margin-bottom: 8px; }
.series-genre-link { color: var(--accent); font-size: 13px; transition: opacity 0.1s; }
.series-genre-link:hover { opacity: 0.75; }

.series-body { padding-top: 28px; padding-bottom: 60px; display: flex; flex-direction: column; gap: 32px; }

.series-section-heading {
  font-size: 18px; font-weight: 700; color: var(--text-bright);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}

.series-chap-controls { margin-bottom: 10px; }
.series-chap-lang { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-sm); }
.series-lang-select {
  height: 28px; padding: 0 24px 0 8px;
  background: var(--surface2); border: 1px solid var(--border-sm);
  border-radius: var(--r); font-size: 12px; color: var(--text); outline: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.series-flag { font-size: 16px; }

.series-chap-pager-label { font-size: 13px; color: var(--text-xs); text-align: center; padding: 6px 0; }
.series-chap-pager-label strong { color: var(--text); }

.series-chap-header {
  display: grid; grid-template-columns: 1fr 160px 160px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 2px;
}
@media (max-width: 640px) {
  .series-chap-header { grid-template-columns: 1fr 100px; }
  .series-chap-col-group { display: none; }
}
.series-chap-sort-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600; color: var(--text-sm);
  background: none; border: none; cursor: pointer; padding: 2px 0; transition: color 0.1s;
}
.series-chap-sort-btn:hover { color: var(--text); }
.series-sort-arrows { font-size: 10px; opacity: 0.6; }
.series-goto-input {
  margin-left: 10px; height: 24px; width: 88px;
  background: var(--surface2); border: 1px solid var(--border-sm);
  border-radius: var(--r); padding: 0 8px; font-size: 12px; color: var(--text); outline: none;
}
.series-goto-input:focus { border-color: var(--accent); }
.series-goto-input::placeholder { color: var(--text-xs); }

.series-chap-row {
  display: grid; grid-template-columns: 1fr 160px 160px;
  align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s;
}
.series-chap-row:last-child { border-bottom: none; }
.series-chap-row:hover { background: rgba(255,255,255,0.025); }
@media (max-width: 640px) {
  .series-chap-row { grid-template-columns: 1fr 100px; }
}
.series-chap-col-chap { display: flex; align-items: center; gap: 6px; }
.series-chap-col-uploaded, .series-chap-col-group { display: flex; align-items: center; }
.series-chap-flag { font-size: 14px; flex-shrink: 0; }
.series-chap-label { font-size: 13px; font-weight: 500; color: var(--text); }
.series-chap-time { font-size: 12px; color: var(--text-xs); }
.series-chap-group { font-size: 12px; color: var(--accent); transition: opacity 0.1s; }
.series-chap-group:hover { opacity: 0.75; }
.series-chap-bottom-pager { margin-top: 8px; }

.series-rec-add-btn {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border-sm); border-radius: var(--r);
  cursor: pointer; color: var(--text-sm); transition: all 0.1s;
}
.series-rec-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.series-rec-item { width: 80px; cursor: pointer; transition: opacity 0.15s; }
.series-rec-item:hover { opacity: 0.8; }
.series-rec-cover {
  width: 80px; height: 110px; object-fit: cover;
  border-radius: var(--r); background: var(--surface2); display: block;
}
.series-rec-title {
  font-size: 11px; color: var(--text-sm); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3;
}
#series-rec-list { display: flex; flex-wrap: wrap; gap: 10px; }

/* modals */
.series-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 600; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.series-modal {
  background: #1e2d3d; border: 1px solid var(--border-sm);
  border-radius: var(--r-md); width: 100%; max-width: 520px;
  overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.series-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.series-modal-title { font-size: 15px; font-weight: 600; color: var(--text-bright); }
.series-modal-close {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; font-size: 16px;
  color: var(--text-sm); border-radius: var(--r); transition: background 0.1s;
}
.series-modal-close:hover { background: var(--surface2); }
.series-modal-body { padding: 18px 20px; font-size: 13px; color: var(--text-sm); line-height: 1.6; }
.series-modal-link { color: var(--accent); cursor: pointer; }
.series-modal-link:hover { text-decoration: underline; }
.series-modal-list { display: flex; flex-direction: column; gap: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Settings / Preferences page
   ═══════════════════════════════════════════════════════════════════════════ */

.settings-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}
@media (max-width: 600px) { .settings-wrap { padding: 16px 16px 60px; } }

.settings-header { margin-bottom: 24px; }
.settings-title  { font-size: 22px; font-weight: 700; color: var(--text); }
.settings-sub    { font-size: 13px; color: var(--text-xs); margin-top: 3px; }

.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 4px 0;
  margin-bottom: 16px;
}
.settings-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 16px 6px;
}
.settings-section-sub { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* toggle rows */
.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-top: 1px solid var(--border);
}
.settings-toggle-row:first-child { border-top: none; }
.settings-toggle-row:hover { background: rgba(255,255,255,.02); }

.settings-toggle-info { flex: 1; }
.settings-toggle-label { font-size: 14px; color: var(--text); font-weight: 500; }
.settings-toggle-desc  { font-size: 12px; color: var(--text-xs); margin-top: 2px; line-height: 1.4; }

/* custom toggle switch */
.settings-toggle-row input[type=checkbox] { display: none; }
.settings-toggle-switch {
  flex-shrink: 0;
  width: 38px; height: 22px;
  border-radius: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  position: relative;
  transition: background .2s, border-color .2s;
}
.settings-toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-xs);
  transition: transform .2s, background .2s;
}
.settings-toggle-row input:checked ~ .settings-toggle-switch {
  background: var(--accent);
  border-color: var(--accent);
}
.settings-toggle-row input:checked ~ .settings-toggle-switch::after {
  transform: translateX(16px);
  background: #fff;
}

/* mature grid */
.settings-mature-grid {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  flex-wrap: nowrap;
}
.settings-mature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  transition: border-color .15s;
}
.settings-mature-icon  { font-size: clamp(14px, 4vw, 22px); }
.settings-mature-label { font-size: clamp(9px, 2.5vw, 11px); white-space: nowrap; }
.settings-mature-item:hover { border-color: var(--accent); }
.settings-mature-item input { display: none; }
.settings-mature-item input:checked ~ .settings-mature-icon { opacity: 1; }
.settings-mature-item input:checked ~ .settings-mature-label { color: var(--accent); }
.settings-mature-icon  { opacity: .4; transition: opacity .15s; }
.settings-mature-label { color: var(--text-xs); transition: color .15s; }
.settings-mature-item input:checked ~ * { opacity: 1; }
.settings-mature-note {
  font-size: 11px;
  color: var(--text-xs);
  padding: 4px 16px 10px;
  font-style: italic;
}

/* genre list */
.settings-genre-header {
  display: grid;
  grid-template-columns: 1fr 120px 130px;
  gap: 8px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.settings-genre-list { padding: 0 0 4px; }
.settings-genre-row {
  display: grid;
  grid-template-columns: 1fr 120px 130px;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.settings-genre-name { color: var(--text); }
.settings-genre-bar  {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}
.settings-genre-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  opacity: .5;
}
.settings-genre-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-xs);
  font-size: 12px;
  padding: 3px 6px;
  width: 100%;
  cursor: pointer;
}
.settings-genre-select:focus { outline: none; border-color: var(--accent); }

/* mobile nav 4-item adjustment */
#mobile-nav { grid-template-columns: repeat(4, 1fr); }

/* ── Mature buttons (new toggle style) ────────────────────────────────────── */
.settings-mature-item {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .15s, opacity .15s;
}
.settings-mature-item.mature-active {
  border-color: var(--accent);
}
.settings-mature-item.mature-active .settings-mature-icon { opacity: 1; }
.settings-mature-item.mature-active .settings-mature-label { color: var(--accent); }
.settings-mature-item.mature-disabled {
  opacity: .35;
  border-color: var(--border);
}
.settings-mature-item.mature-disabled .settings-mature-icon { opacity: .4; }

/* ── Genre cycle rows ──────────────────────────────────────────────────────── */
.settings-genre-list { padding: 0 0 4px; }
.settings-genre-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  transition: opacity .15s;
}
.settings-genre-row.genre-hidden .settings-genre-name {
  text-decoration: line-through;
  color: var(--text-xs);
}
.settings-genre-row.genre-hidden { opacity: .5; }
.settings-genre-name { color: var(--text); flex: 1; }
.settings-genre-cycle {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  min-width: 72px;
  text-align: center;
  transition: border-color .15s;
}
.settings-genre-cycle:hover { border-color: var(--accent); }

/* ── Genre mark dropdown (settings) ───────────────────────────────────────── */
.settings-genre-mark {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-xs);
  font-size: 12px;
  padding: 3px 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.settings-genre-mark:focus { outline: none; border-color: var(--accent); }
/* override old cycle button since it's replaced */
.settings-genre-cycle { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   My List page
   ═══════════════════════════════════════════════════════════════════════════ */

.ml-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 60px;
}
@media (max-width: 600px) { .ml-wrap { padding: 16px 12px 60px; } }

/* Profile header */
.ml-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.ml-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--text);
  flex-shrink: 0;
}
.ml-username {
  font-size: 20px; font-weight: 700; color: var(--text-bright);
}

/* Tabs */
.ml-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.ml-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 500; color: var(--text-xs);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.ml-tab:hover { color: var(--text); }
.ml-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ml-tab-count {
  font-size: 11px;
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 10px;
  color: var(--text-xs);
}

/* Controls row */
.ml-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ml-search-wrap {
  position: relative;
  flex: 0 0 220px;
}
.ml-search {
  width: 100%;
  height: 32px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0 10px 0 28px;
  font-size: 13px; color: var(--text);
  outline: none;
}
.ml-search:focus { border-color: var(--accent); }
.ml-controls-right {
  display: flex; gap: 8px; margin-left: auto;
}
.ml-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 500;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text-sm); cursor: pointer;
  transition: border-color .15s;
}
.ml-btn:hover { border-color: var(--accent); color: var(--text); }

/* Table header */
.ml-table-head {
  display: grid;
  grid-template-columns: 1fr 80px 90px 130px 110px 80px 80px 70px;
  align-items: center;
  padding: 6px 10px;
  font-size: 11px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
@media (max-width: 900px) {
  .ml-table-head { grid-template-columns: 1fr 70px 90px 120px 100px 70px 70px 60px; }
}
@media (max-width: 700px) {
  .ml-table-head { grid-template-columns: 1fr 60px 80px 110px 90px; }
  .ml-col-updated, .ml-col-added, .ml-col-lastread { display: none; }
}

.ml-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ml-sortable:hover { color: var(--text); }
.ml-sortable.active-sort { color: var(--accent); }
.ml-sortable.active-sort::after { content: ' ↓'; }
.ml-sortable.sort-asc::after { content: ' ↑'; }

.ml-filter-select {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer; outline: none; padding: 0;
}
.ml-filter-select option { color: var(--text); background: var(--surface); }

/* Rows */
.ml-row {
  display: grid;
  grid-template-columns: 1fr 80px 90px 130px 110px 80px 80px 70px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  cursor: pointer;
  transition: background .1s;
  -webkit-tap-highlight-color: rgba(255,255,255,.04);
}
.ml-row:hover, .ml-row:active { background: rgba(255,255,255,.03); }
@media (max-width: 900px) {
  .ml-row { grid-template-columns: 1fr 70px 90px 120px 100px 70px 70px 60px; }
}
@media (max-width: 700px) {
  .ml-row { grid-template-columns: 1fr 60px 80px 110px 90px; }
  .ml-row .ml-col-updated, .ml-row .ml-col-added, .ml-row .ml-col-lastread { display: none; }
}

.ml-col-title {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.ml-cover {
  width: 36px; height: 50px;
  border-radius: 3px; object-fit: cover;
  background: var(--surface2); flex-shrink: 0;
}
.ml-title-text {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-row:hover .ml-title-text { color: var(--accent); }

.ml-col-continue, .ml-col-lastread, .ml-col-updated, .ml-col-added {
  font-size: 12px; color: var(--text-xs); text-align: center;
}
.ml-continue-num { font-size: 13px; color: var(--text-sm); font-weight: 500; }
.ml-dash { color: var(--text-xs); }

/* Rating pill */
.ml-rating-sel {
  display: inline-flex; align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 3px 8px;
  font-size: 12px; font-weight: 600; color: var(--text-sm);
  cursor: pointer; transition: border-color .15s;
  white-space: nowrap;
}
.ml-rating-sel:hover { border-color: var(--accent); }

/* Reading status pill */
.ml-reading-sel {
  display: inline-flex; align-items: center;
  border: 1px solid;
  border-radius: var(--r);
  padding: 3px 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: opacity .15s;
  white-space: nowrap;
}
.ml-reading-sel:hover { opacity: .8; }

/* Comic status dot */
.ml-col-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-xs);
}
.ml-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}

/* Empty state */
.ml-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-xs);
  font-size: 13px;
}

/* Dropdown */
.ml-drop {
  background: var(--surface);
  border: 1px solid var(--border-sm);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  min-width: 120px;
  overflow: hidden;
}
.ml-drop-item {
  padding: 8px 14px;
  font-size: 13px; color: var(--text-sm);
  cursor: pointer;
  transition: background .1s;
}
.ml-drop-item:hover { background: var(--surface2); }
.ml-drop-item.active { color: var(--accent); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   Comic page comments
   ═══════════════════════════════════════════════════════════════════════════ */

.series-comments-section {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Compose box */
.sc-compose {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: flex-start;
}
.sc-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface2);
}
.sc-input-wrap { flex: 1; }
.sc-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 12px;
  font-size: 13px; color: var(--text);
  resize: vertical; outline: none;
  min-height: 80px;
  transition: border-color .15s;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.5;
}
.sc-textarea:focus { border-color: var(--accent); }
.sc-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.sc-cancel-btn {
  padding: 5px 14px;
  font-size: 12px; font-weight: 600;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-xs); cursor: pointer;
  border-radius: var(--r);
  transition: color .15s, border-color .15s;
}
.sc-cancel-btn:hover { color: var(--text); border-color: var(--text-xs); }
.sc-submit-btn {
  padding: 5px 14px;
  font-size: 12px; font-weight: 600;
  background: var(--accent); border: none;
  color: #fff; cursor: pointer; border-radius: var(--r);
  transition: opacity .15s;
}
.sc-submit-btn:hover { opacity: .85; }
.sc-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Comment list */
.sc-loading, .sc-empty {
  padding: 24px 0;
  font-size: 13px; color: var(--text-xs);
  text-align: center;
}

.sc-comment {
  display: flex;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.sc-comment-body { flex: 1; min-width: 0; }
.sc-comment-meta {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 5px; flex-wrap: wrap;
}
.sc-comment-author {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.sc-comment-time { font-size: 11px; color: var(--text-xs); }
.sc-chap-badge {
  font-size: 10px; font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-xs);
}
.sc-comment-text {
  font-size: 13px; color: var(--text-sm);
  line-height: 1.6;
  word-break: break-word;
}
.sc-comment-text strong { color: var(--text); font-weight: 600; }
.sc-comment-text em { font-style: italic; }
.sc-comment-text del { opacity: .6; }
.sc-code {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--text-sm);
}
.sc-spoiler {
  background: var(--text-sm);
  color: transparent;
  border-radius: 3px;
  padding: 1px 4px;
  cursor: pointer;
  user-select: none;
  transition: background .2s, color .2s;
}
.sc-spoiler.sc-spoiler-reveal {
  background: var(--surface2);
  color: var(--text-sm);
  border: 1px solid var(--border);
}
.sc-comment-img {
  max-width: 100%;
  width: auto;
  max-height: 300px;
  border-radius: 6px;
  margin-top: 8px;
  display: block;
  border: 1px solid var(--border);
  cursor: pointer;
}
.sc-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.sc-link:hover { opacity: .8; }
.sc-comment-actions {
  margin-top: 8px;
}
.sc-reply-btn {
  background: none; border: none;
  font-size: 12px; font-weight: 500;
  color: var(--text-xs); cursor: pointer;
  padding: 0;
  transition: color .15s;
}
.sc-reply-btn:hover { color: var(--accent); }

/* Nested replies — left border line */
.sc-replies {
  margin-top: 4px;
}
.sc-comment-reply {
  padding: 10px 0 4px 12px;
  border-left: 2px solid var(--border);
  margin-left: 2px;
  border-bottom: none;
}
.sc-comment-reply .sc-avatar { width: 26px; height: 26px; }

.sc-reply-box { margin-top: 10px; }

/* Follow button — solid fill like comick */
.series-btn-follow {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.series-btn-follow[data-following="true"] {
  background: var(--surface2) !important;
  color: var(--text-sm) !important;
  border-color: var(--border) !important;
}
.series-btn-follow[data-following="true"]:hover {
  border-color: var(--red, #ef4444) !important;
  color: var(--red, #ef4444) !important;
}

/* List page avatar — use image instead of letter */
.ml-avatar { overflow: hidden; }
.ml-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── My List filter panel ──────────────────────────────────────────────── */
.ml-filter-panel {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 12px;
}
.ml-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.ml-filter-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-xs);
  margin-bottom: 8px;
}
.ml-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ml-chip {
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-sm);
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
}
.ml-chip:hover { border-color: var(--accent); color: var(--text); }
.ml-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ml-btn-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ── Follow / status split button ─────────────────────────────────────── */
.series-btn-bookmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text-sm);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.series-btn-bookmark:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Split button — shown when following */
.series-status-split {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  overflow: hidden;
  height: 36px;
  flex-shrink: 0;
}
.series-status-label {
  padding: 0 12px;
  font-size: 13px; font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none; cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.series-status-label:hover { opacity: .88; }
.series-status-chevron {
  display: flex; align-items: center; justify-content: center;
  width: 28px;
  background: var(--accent);
  border: none;
  border-left: 1px solid rgba(255,255,255,.25);
  color: #fff;
  cursor: pointer;
  transition: opacity .15s;
}
.series-status-chevron:hover { opacity: .88; }

/* Status dropdown */
.sc-status-drop {
  background: var(--surface);
  border: 1px solid var(--border-sm);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  overflow: hidden;
  min-width: 140px;
}
.sc-status-opt {
  padding: 9px 14px;
  font-size: 13px; color: var(--text-sm);
  cursor: pointer;
  transition: background .1s;
}
.sc-status-opt:hover { background: var(--surface2); color: var(--text); }
.sc-status-opt.active { color: var(--accent); font-weight: 600; }
.sc-status-sep { height: 1px; background: var(--border); margin: 4px 0; }
.sc-status-unfollow { color: var(--red, #ef4444) !important; }
.sc-status-unfollow:hover { background: rgba(239,68,68,.08) !important; }

/* Remove old follow button CSS that conflicts */
.series-btn-follow[data-following="true"],
.series-btn-follow[data-following="true"]:hover { all: unset; display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Reader page
   ═══════════════════════════════════════════════════════════════════════════ */

#page-reader { background: #0d0d0d; min-height: 100vh; }

.rd-loading, .rd-error {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh;
  color: var(--text-sm);
  text-align: center;
  padding: 32px;
}

.rd-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0d0d0d;
  padding-top: 52px;   /* topbar height */
  padding-bottom: 56px; /* bottombar height */
  min-height: 100vh;
}

/* ── Top bar ── */
.rd-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 52px;
  background: rgba(13,13,13,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: transform .25s ease;
}
.rd-topbar.rd-bar-hidden { transform: translateY(-100%); }

.rd-back-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: #a0aec0; border-radius: 6px;
  transition: background .1s, color .1s;
}
.rd-back-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

.rd-topbar-titles {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.rd-series-title {
  font-size: 13px; font-weight: 600; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-chap-label {
  font-size: 11px; color: #718096;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rd-source-sel {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  color: #a0aec0;
  font-size: 12px;
  padding: 4px 8px;
  outline: none; cursor: pointer;
  max-width: 140px;
}

/* ── Pages ── */
.rd-pages {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rd-page-wrap {
  width: 100%;
  line-height: 0; /* remove gap between images */
}
.rd-page-img {
  width: 100%;
  height: auto;
  display: block;
  background: #1a1a1a;
}
.rd-page-img.rd-img-error {
  min-height: 200px;
  background: #1a1a1a;
  border: 1px dashed #333;
}

/* ── End card ── */
.rd-end-card {
  width: 100%;
  padding: 48px 24px;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  border-top: 1px solid #222;
  margin-top: 8px;
}
.rd-end-label {
  font-size: 14px; font-weight: 600; color: #718096;
}
.rd-end-btns {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}

/* ── Nav buttons ── */
.rd-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #e2e8f0; cursor: pointer;
  transition: background .1s, border-color .1s;
  white-space: nowrap;
}
.rd-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); }
.rd-nav-btn:disabled, .rd-nav-disabled { opacity: .3; cursor: not-allowed; }
.rd-nav-next-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.rd-nav-next-primary:hover { opacity: .88; }

/* ── Bottom bar ── */
.rd-bottombar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: 52px;
  background: rgba(13,13,13,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  gap: 8px;
  transition: transform .25s ease;
}
.rd-bottombar.rd-bar-hidden { transform: translateY(100%); }

.rd-page-counter {
  font-size: 13px; font-weight: 500; color: #718096;
  white-space: nowrap;
}

/* ── Tap zones (mobile: tap left/right to nav) ── */
@media (max-width: 768px) {
  .rd-pages { max-width: 100%; }
  .rd-bottombar .rd-nav-btn { font-size: 12px; padding: 6px 12px; }
}

/* ── Source selector modal ─────────────────────────────────────────────── */
.src-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.src-modal {
  background: var(--surface);
  border: 1px solid var(--border-sm);
  border-radius: 10px;
  width: 100%; max-width: 640px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.src-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.src-modal-title {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.src-modal-close {
  background: none; border: none;
  font-size: 16px; color: var(--text-xs);
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
  transition: color .1s, background .1s;
}
.src-modal-close:hover { color: var(--text); background: var(--surface2); }
.src-modal-list {
  overflow-y: auto; flex: 1;
}
.src-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.src-row:last-child { border-bottom: none; }
.src-row:hover { background: var(--surface2); }
.src-flag { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.src-info { flex: 1; min-width: 0; }
.src-ch-label { font-size: 12px; color: var(--text-xs); margin-bottom: 2px; }
.src-group { font-size: 13px; font-weight: 600; color: var(--text); }
.src-meta { font-size: 11px; color: var(--text-xs); margin-top: 2px; }

/* ── Reader chapter comments ───────────────────────────────────────────── */
.rd-comments {
  width: 100%; max-width: 800px;
  padding: 32px 16px 40px;
  border-top: 1px solid #222;
}
.rd-comments-heading {
  font-size: 14px; font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 16px;
}
.rd-comments .sc-comment-text { color: #a0aec0; }
.rd-comments .sc-comment-author { color: #e2e8f0; }
.rd-comments .sc-comment-time { color: #4a5568; }
.rd-comments .sc-textarea {
  background: #1a1a1a;
  border-color: #2d3748;
  color: #e2e8f0;
}
.rd-comments .sc-textarea:focus { border-color: var(--accent); }