/* =============================================
   CSS VARIABLES & RESET
============================================= */
:root {
  --font-serif: 'Crimson Pro', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-display: 'Playfair Display', serif;

  --bg-primary: #0d1117;
  --bg-secondary: #161b24;
  --bg-card: #1a2030;
  --bg-elevated: #1f2635;
  --text-primary: #e8dcc8;
  --text-secondary: #a89880;
  --text-muted: #6b5f50;
  --accent: #c9a96e;
  --accent-dim: #7a5c2e;
  --accent-glow: rgba(201,169,110,0.15);
  --border: rgba(201,169,110,0.12);
  --border-strong: rgba(201,169,110,0.25);
  --shadow: rgba(0,0,0,0.4);
  --tag-bg: rgba(201,169,110,0.1);
  --tag-text: #c9a96e;
  --progress-bar: #c9a96e;
}

[data-theme="light"] {
  --bg-primary: #faf7f2;
  --bg-secondary: #f2ede4;
  --bg-card: #ffffff;
  --bg-elevated: #f8f4ee;
  --text-primary: #2c2416;
  --text-secondary: #6b5740;
  --text-muted: #a08c72;
  --accent: #8b5e2a;
  --accent-dim: #d4a574;
  --accent-glow: rgba(139,94,42,0.08);
  --border: rgba(139,94,42,0.12);
  --border-strong: rgba(139,94,42,0.22);
  --shadow: rgba(44,36,22,0.12);
  --tag-bg: rgba(139,94,42,0.08);
  --tag-text: #8b5e2a;
  --progress-bar: #8b5e2a;
}

[data-reader-theme="sepia"] {
  --bg-primary: #f5ead6;
  --bg-secondary: #ede0c4;
  --bg-card: #f9f0de;
  --bg-elevated: #f2e6cc;
  --text-primary: #3c2a14;
  --text-secondary: #6b4c2a;
  --text-muted: #9a7550;
  --accent: #7a4a18;
  --accent-dim: #c4884e;
  --accent-glow: rgba(122,74,24,0.1);
  --border: rgba(122,74,24,0.15);
  --border-strong: rgba(122,74,24,0.25);
  --shadow: rgba(60,42,20,0.15);
  --tag-bg: rgba(122,74,24,0.1);
  --tag-text: #7a4a18;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.3s, color 0.3s;
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Reading Progress Bar */
#reading-progress-bar {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dim));
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--accent-glow);
}

/* Ticker */
.ticker-bar {
  display:none;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 6px 0; overflow: hidden; position: relative;
}
.ticker-bar::before, .ticker-bar::after {
  content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.ticker-bar::before { left:0; background:linear-gradient(90deg,var(--bg-secondary),transparent); }
.ticker-bar::after  { right:0; background:linear-gradient(-90deg,var(--bg-secondary),transparent); }
.ticker-inner {
  display:flex; gap:48px;
  animation: ticker 200s linear infinite;
  white-space:nowrap; width:max-content;
}
.ticker-inner:hover { animation-play-state:paused; }
.ticker-item { font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:8px; }
.ticker-item .dot { width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0; }
.ticker-item strong { color:var(--accent); font-weight:500; }
@keyframes ticker {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* Header */
header {
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(12px);
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:24px; height:58px;
}
.logo {
  font-family:var(--font-display); font-size:20px; font-weight:700;
  color:var(--accent); text-decoration:none; letter-spacing:0.02em; flex-shrink:0;
}
.logo span { color:var(--text-primary); font-style:italic; font-weight:400; font-size:16px; }
.nav-links { display:flex; gap:24px; list-style:none; margin-left:12px; }
.nav-links a {
  font-size:13px; font-weight:500; color:var(--text-secondary);
  text-decoration:none; letter-spacing:0.04em; text-transform:uppercase;
  transition:color 0.2s; cursor:pointer;
}
.nav-links a:hover, .nav-links a.active { color:var(--accent); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.readers-live { font-size:12px; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.readers-live .pulse {
  width:7px;height:7px;border-radius:50%;background:#4caf50;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(1.3); }
}
.theme-btn {
  background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary);
  padding:6px 10px; border-radius:6px; cursor:pointer; font-size:13px;
  transition:all 0.2s; display:flex; align-items:center; gap:6px;
}
.theme-btn:hover { border-color:var(--accent); color:var(--accent); }
.hamburger { display:none; background:none; border:none; color:var(--text-primary); cursor:pointer; padding:8px; }
@media (max-width:768px) {
  .nav-links { display:none; }
  .readers-live { display:none; }
  .hamburger { display:flex; }
}

/* Mobile Drawer */
.nav-drawer {
  position:fixed; top:0; right:-100%;
  width:min(280px,85vw); height:100vh;
  background:var(--bg-secondary); border-left:1px solid var(--border);
  z-index:200; padding:24px 20px;
  transition:right 0.3s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column; gap:32px;
}
.nav-drawer.open { right:0; }
.nav-drawer-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5);
  z-index:199; opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.nav-drawer-overlay.show { opacity:1; pointer-events:all; }
.nav-drawer .drawer-links { display:flex; flex-direction:column; gap:20px; list-style:none; }
.nav-drawer .drawer-links a { font-size:16px; color:var(--text-secondary); text-decoration:none; font-weight:500; cursor:pointer; }
.nav-drawer .drawer-links a:hover { color:var(--accent); }
.drawer-close { align-self:flex-end; background:none; border:none; color:var(--text-muted); font-size:22px; cursor:pointer; }

/* Pages SPA */
.page { display:none; }
.page.active { display:block; animation:fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* Hero */
.hero {
  padding:60px 20px 48px; max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.hero-text h1 {
  font-family:var(--font-display); font-size:clamp(30px,5vw,52px);
  font-weight:700; line-height:1.15; margin-bottom:16px;
}
.hero-text h1 em { font-style:italic; color:var(--accent); }
.hero-text p { font-size:16px; color:var(--text-secondary); max-width:420px; line-height:1.7; margin-bottom:28px; }
.hero-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--bg-primary);
  padding:12px 24px; border-radius:8px; font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer; border:none; transition:all 0.2s; letter-spacing:0.02em;
}
.hero-cta:hover { transform:translateY(-1px); box-shadow:0 6px 20px var(--accent-glow); }
.hero-featured {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:row;
  max-height:320px;
}
.hero-cover {
  width:220px; min-height:320px; flex-shrink:0; aspect-ratio:unset;
  background:linear-gradient(135deg,var(--bg-elevated) 0%,var(--accent-dim) 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:60px; position:relative; overflow:hidden;
}
.hero-cover::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,0.6));
}
.hero-cover-label {
  position:absolute; top:12px; left:12px;
  background:var(--accent); color:var(--bg-primary);
  font-size:11px; font-weight:700; letter-spacing:0.08em;
  padding:3px 8px; border-radius:4px; text-transform:uppercase;
}
.hero-cover-img {
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0; object-position:center;
}
.hero-card-body { padding:24px; display:flex; flex-direction:column; justify-content:center; }
.hero-card-body h3 { font-family:var(--font-serif); font-size:22px; font-weight:600; margin-bottom:8px; line-height:1.3; }
.hero-card-body p { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:20px; }
.hero-card-btn {
  font-size:13px; color:var(--accent); cursor:pointer;
  background:none; border:1px solid var(--accent); padding:8px 16px;
  border-radius:6px; font-weight:500; transition:all 0.2s; font-family:inherit;
}
.hero-card-btn:hover { background:var(--accent); color:var(--bg-primary); }
@media (max-width:768px) {
  .hero { grid-template-columns:1fr; gap:32px; padding:36px 16px; }
  .hero-text h1 { font-size:28px; }
  .hero-featured { display:none; }
}

/* Section Headers */
.section-header { display:flex; align-items:baseline; gap:16px; margin-bottom:24px; }
.section-header h2 { font-family:var(--font-display); font-size:clamp(18px,3vw,24px); font-weight:700; }
.section-header .see-all {
  font-size:12px; color:var(--accent); text-decoration:none; cursor:pointer;
  letter-spacing:0.04em; text-transform:uppercase; margin-left:auto; font-weight:500;
}

/* Container / Section */
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.section { padding:40px 0; }
.divider { height:1px; background:var(--border); margin:48px 0; }

/* Novel Cards */
.novels-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }
.novel-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; cursor:pointer;
  transition:transform 0.25s, box-shadow 0.25s, border-color 0.25s; position:relative;
}
.novel-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px var(--shadow); border-color:var(--border-strong); }
.novel-cover {
  width:100%; aspect-ratio:2/3;
  background:linear-gradient(145deg,var(--bg-elevated),var(--accent-dim));
  display:flex; align-items:center; justify-content:center;
  font-size:40px; position:relative; overflow:hidden;
}
.novel-cover img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.novel-cover::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 60%,rgba(0,0,0,0.5));
}
.novel-status {
  position:absolute; top:8px; right:8px;
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px;
  text-transform:uppercase; letter-spacing:0.06em; z-index:1;
}
.status-ongoing   { background:#1a7a4a; color:#7dffb3; }
.status-completed { background:#1a4a7a; color:#7db8ff; }
.status-hiatus    { background:#7a4a1a; color:#ffb87d; }
.novel-progress-strip { position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--bg-elevated); z-index:1; }
.novel-progress-fill  { height:100%; background:var(--accent); transition:width 0.3s; }
.novel-info { padding:12px 14px 14px; }
.novel-title {
  font-family:var(--font-serif); font-size:14px; font-weight:600;
  line-height:1.35; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.novel-meta  { font-size:11px; color:var(--text-muted); margin-bottom:8px; }
.novel-tags  { display:flex; flex-wrap:wrap; gap:4px; }
.tag { font-size:10px; padding:2px 7px; border-radius:3px; background:var(--tag-bg); color:var(--tag-text); font-weight:500; letter-spacing:0.03em; }
.novel-card .expand-overlay {
  position:absolute; inset:0; background:var(--bg-card); border-radius:12px; padding:20px;
  display:flex; flex-direction:column; gap:12px;
  opacity:0; transform:scale(0.97);
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none; z-index:10; border:1px solid var(--border-strong);
}
.novel-card:hover .expand-overlay { opacity:1; transform:scale(1); pointer-events:all; }
.expand-overlay h4 { font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--text-primary); line-height:1.3; }
.expand-overlay p {
  font-size:12px; color:var(--text-secondary); line-height:1.65; flex:1; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
}
.expand-read-btn {
  background:var(--accent); color:var(--bg-primary); border:none;
  padding:10px 16px; border-radius:7px; font-size:13px; font-weight:600;
  cursor:pointer; transition:all 0.2s; width:100%; font-family:var(--font-sans);
}
.expand-read-btn:hover { opacity:0.9; }
@media (max-width:480px) {
  .novels-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .novel-card .expand-overlay { display:none; }
}

/* Updates Feed */
.updates-feed { display:flex; flex-direction:column; gap:1px; background:var(--border); border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.update-item {
  background:var(--bg-card); padding:14px 18px;
  display:grid; grid-template-columns:1fr auto;
  gap:12px; align-items:center; cursor:pointer; transition:background 0.15s;
}
.update-item:hover { background:var(--bg-elevated); }
.update-icon { width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--bg-elevated),var(--accent-dim));display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.update-icon img { width:100%;height:100%;object-fit:cover;border-radius:8px; }
.update-body { min-width:0; }
.update-novel  { font-size:13px; font-weight:500; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.update-chapter{ font-size:12px; color:var(--accent); font-weight:500; }
.update-time   { font-size:11px; color:var(--text-muted); white-space:nowrap; text-align:right; flex-shrink:0; }

/* Library */
.library-header { padding:40px 0 28px; }
.library-header h1 { font-family:var(--font-display); font-size:clamp(24px,4vw,36px); margin-bottom:20px; }
.library-controls { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.search-bar { flex:1; min-width:200px; position:relative; }
.search-bar input {
  width:100%; background:var(--bg-card); border:1px solid var(--border);
  color:var(--text-primary); padding:10px 14px 10px 38px;
  border-radius:8px; font-family:var(--font-sans); font-size:14px; outline:none; transition:border-color 0.2s;
}
.search-bar input:focus { border-color:var(--accent); }
.search-bar::before { content:'⌕'; position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:18px; pointer-events:none; }
.filter-group { display:flex; gap:6px; flex-wrap:wrap; }
.filter-btn {
  background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary);
  padding:8px 14px; border-radius:7px; font-size:12px; font-weight:500;
  cursor:pointer; transition:all 0.2s; font-family:var(--font-sans); letter-spacing:0.02em;
}
.filter-btn:hover, .filter-btn.active { background:var(--accent); color:var(--bg-primary); border-color:var(--accent); }

/* Reader Toolbar */
.reader-toolbar {
  background:var(--bg-secondary); border-bottom:1px solid var(--border);
  padding:10px 16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  position:sticky; top:58px; z-index:50;
}
.reader-toolbar-title { font-size:13px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.reader-toolbar-title strong { color:var(--text-primary); font-weight:500; }
.tool-group { display:flex; gap:4px; align-items:center; flex-shrink:0; }
.tool-btn {
  background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary);
  width:32px; height:32px; border-radius:6px; cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center; transition:all 0.15s; font-family:inherit;
}
.tool-btn:hover { border-color:var(--accent); color:var(--accent); }
.tool-btn.active { background:var(--accent); color:var(--bg-primary); border-color:var(--accent); }

/* Chapter Sidebar */
.chapter-sidebar {
  position:fixed; top:0; right:-340px; width:320px; height:100vh;
  background:var(--bg-secondary); border-left:1px solid var(--border);
  z-index:150; transition:right 0.3s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column; padding:20px 0; overflow:hidden;
}
.chapter-sidebar.open { right:0; z-index:9999; }
.chapter-sidebar.open { pointer-events: all; }
.sidebar-header { padding:0 20px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.sidebar-header h3 { font-size:16px; font-weight:600; font-family:var(--font-serif); }
.sidebar-close { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:20px; }
.chapter-list { flex:1; overflow-y:auto; padding:12px 0; }
.chapter-list::-webkit-scrollbar { width:4px; }
.chapter-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.chapter-item { padding:10px 20px; cursor:pointer; transition:background 0.15s; display:flex; align-items:center; gap:12px; position:relative; z-index:9999; }
.chapter-item:hover { background:var(--bg-elevated); }
.chapter-item.current { background:var(--accent-glow); }
.chapter-item.current .ch-num { color:var(--accent); }
.ch-num { font-size:11px; font-weight:700; color:var(--text-muted); min-width:36px; flex-shrink:0; }
.ch-title { font-size:13px; color:var(--text-secondary); }

/* Reader Content */
.reader-content-wrap { display:flex; max-width:1100px; margin:0 auto; padding:40px 20px; gap:32px; }
.reader-content { flex:1; min-width:0; max-width:680px; margin:0 auto; }
.chapter-title { font-family:var(--font-display); font-size:clamp(22px,4vw,32px); font-weight:700; margin-bottom:8px; line-height:1.2; }
.chapter-subtitle { font-size:14px; color:var(--text-muted); margin-bottom:36px; font-style:italic; }
.chapter-body {
  font-family:var(--font-serif);
  font-size:var(--reader-font-size, 18px);
  line-height:var(--reader-line-spacing, 1.85);
  color:var(--text-primary);
}
.chapter-body p { margin-bottom:1.4em; }
.chapter-body p:first-child::first-letter {
  font-size:3.2em; font-weight:700; float:left; line-height:0.85;
  margin:4px 10px 0 0; color:var(--accent); font-family:var(--font-display);
}

/* Translator Note */
.translator-note {
  background:var(--accent-glow); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:16px 18px; margin:28px 0; position:relative;
}
.translator-note::before {
  content:'📌 Translator\'s Note'; display:block;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--accent); margin-bottom:8px; font-family:var(--font-sans);
}
.translator-note p {
  font-size:14px !important; color:var(--text-secondary) !important;
  font-family:var(--font-sans) !important; line-height:1.6 !important; margin-bottom:0 !important;
}

/* Support Banner */
.support-banner {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:12px; padding:20px 24px; margin:36px 0;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.support-banner-icon { font-size:32px; flex-shrink:0; }
.support-banner-text { flex:1; min-width:200px; }
.support-banner-text h4 { font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:3px; font-family:var(--font-sans); }
.support-banner-text p { font-size:12px; color:var(--text-muted); margin:0; font-family:var(--font-sans); line-height:1.5; }
.support-kofi { background:#3AAB6D; color:white; border:none; padding:9px 18px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; white-space:nowrap; font-family:var(--font-sans); }
.support-kofi:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(58,171,109,0.3); }
.support-patreon { background:#FF6514; color:white; border:1px solid #FF6514; padding:9px 18px; border-radius:7px; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.2s; white-space:nowrap; font-family:var(--font-sans); }
.support-patreon:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,101,20,0.3); opacity:0.9; }

/* Chapter Nav */
.chapter-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; margin-top:48px; padding-top:32px; border-top:1px solid var(--border); align-items:center; }
.ch-nav-btn { background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary); padding:14px 18px; border-radius:10px; cursor:pointer; font-family:var(--font-sans); font-size:13px; font-weight:500; transition:all 0.2s; display:flex; align-items:center; gap:8px; }
.ch-nav-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }
.ch-nav-btn:disabled { opacity:0.4; cursor:default; }
.ch-nav-btn:disabled:hover { border-color:var(--border); color:var(--text-secondary); background:var(--bg-card); }
.ch-nav-btn.prev { justify-content:flex-start; }
.ch-nav-btn.next { justify-content:flex-end; }
.ch-nav-label { font-size:11px; color:var(--text-muted); }
.ch-nav-title { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.ch-nav-center { text-align:center; }
.ch-nav-index { font-size:11px; color:var(--text-muted); white-space:nowrap; }
@media (max-width:480px) {
  .chapter-nav { grid-template-columns:1fr 1fr; gap:6px; }
  .ch-nav-center { display:none; }
  .ch-nav-title { display:none; }
}
/* Reader Settings Panel */
.reader-settings-panel {
  position:fixed; top:58px; right:0; width:260px;
  background:var(--bg-secondary); border-left:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:20px; border-radius:0 0 0 12px; z-index:80;
  transform:translateY(-110%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:-4px 4px 20px var(--shadow);
}
.reader-settings-panel.open { transform:translateY(0); }
.settings-group { margin-bottom:18px; }
.settings-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:8px; }
.settings-row { display:flex; gap:6px; align-items:center; }
.settings-row .tool-btn { flex:1; height:34px; font-size:12px; width:auto; }
.font-size-display { font-size:13px; color:var(--text-secondary); min-width:36px; text-align:center; }
input[type="range"] { width:100%; accent-color:var(--accent); cursor:pointer; }

/* Novel Detail */
.novel-detail { padding:32px 0 48px; }
.novel-detail-hero { display:grid; grid-template-columns:180px 1fr; gap:28px; margin-bottom:40px; align-items:start; }
.novel-detail-cover { width:180px; aspect-ratio:2/3; border-radius:10px; background:linear-gradient(145deg,var(--bg-elevated),var(--accent-dim)); display:flex; align-items:center; justify-content:center; font-size:56px; flex-shrink:0; box-shadow:0 8px 24px var(--shadow); overflow:hidden; }
.novel-detail-cover img { width:100%; height:100%; object-fit:cover; border-radius:10px; }
.novel-detail-info h1 { font-family:var(--font-display); font-size:clamp(20px,4vw,30px); font-weight:700; line-height:1.2; margin-bottom:4px; }
.novel-detail-info .jp-title { font-size:14px; color:var(--text-muted); margin-bottom:12px; font-style:italic; }
.novel-detail-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.meta-pill { font-size:12px; padding:4px 10px; border-radius:20px; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-secondary); }
.novel-detail-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px; }
.novel-detail-synopsis { font-size:14px; color:var(--text-secondary); line-height:1.75; max-width:600px; margin-bottom:20px; }
.novel-start-btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--bg-primary); padding:12px 22px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all 0.2s; font-family:var(--font-sans); }
.novel-start-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px var(--accent-glow); }
@media (max-width:600px) { .novel-detail-hero { grid-template-columns:120px 1fr; gap:16px; } .novel-detail-cover { width:120px; font-size:40px; } }
.chapter-list-section { margin-top:32px; }
.chapter-list-section h2 { font-family:var(--font-display); font-size:20px; margin-bottom:16px; }
.chapter-list-table { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.ch-row { display:grid; grid-template-columns:60px 1fr auto; padding:12px 18px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.15s; gap:12px; align-items:center; }
.ch-row:last-child { border-bottom:none; }
.ch-row:hover { background:var(--bg-elevated); }
.ch-row-num   { font-size:12px; font-weight:700; color:var(--text-muted); }
.ch-row-title { font-size:14px; color:var(--text-primary); }
.ch-row-date  { font-size:11px; color:var(--text-muted); white-space:nowrap; }

/* Footer */
footer { background:var(--bg-secondary); border-top:1px solid var(--border); padding:40px 20px 28px; margin-top:60px; }
.footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; margin-bottom:32px; }
.footer-logo { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--accent); margin-bottom:8px; }
.footer-desc { font-size:13px; color:var(--text-muted); line-height:1.7; }
.footer-col h4 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:12px; }
.footer-col a { display:block; font-size:13px; color:var(--text-secondary); text-decoration:none; margin-bottom:6px; cursor:pointer; transition:color 0.15s; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom { max-width:1200px; margin:0 auto; padding-top:20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:12px; color:var(--text-muted); }
@media (max-width:640px) { .footer-inner { grid-template-columns:1fr; gap:24px; } }

/* Utilities */
::selection { background:var(--accent-glow); color:var(--accent); }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }