/* =========================================================
   YGBOOK · 单套响应式设计系统 (综合方案)
   架构: B(分类标签+网格+侧栏榜单) + A/C(克制现代视觉)
   配色: 纸(light) / 墨(dark) / 羊皮(sepia) 三套，CSS 变量运行时切换
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --font-sans: "PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif: "Noto Serif SC","Source Han Serif SC",Georgia,"Songti SC",serif;

  --bg:#f6f4ef; --surface:#ffffff; --surface-2:#f0ece4;
  --text:#2b2722; --text-2:#5b524a; --text-3:#93897e;
  --border:#e7e0d6;
  --primary:#c0392b; --primary-ink:#ffffff; --gold:#b8893b;
  --shadow-1:0 1px 2px rgba(27,23,20,.05),0 4px 12px rgba(27,23,20,.06);
  --shadow-2:0 8px 24px rgba(27,23,20,.10),0 2px 6px rgba(27,23,20,.05);

  --maxw:1200px; --readingw:38em; --header-h:60px;
  --r:10px; --r-lg:16px; --r-pill:999px;
  --sp:16px; --read-fs:19px; --read-lh:1.9;
}
[data-theme="dark"]{
  --bg:#14110d; --surface:#1f1b16; --surface-2:#262019;
  --text:#e8e3da; --text-2:#b3a99c; --text-3:#7d7363;
  --border:#322c23;
  --primary:#e05a4a; --primary-ink:#fff; --gold:#d8a85a;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 24px rgba(0,0,0,.55);
}
[data-theme="sepia"]{
  --bg:#ece2cf; --surface:#f5ecd9; --surface-2:#e6dcc6;
  --text:#43381f; --text-2:#6b5d3f; --text-3:#93825a;
  --border:#d8caac;
  --primary:#9c5a2b; --primary-ink:#fff; --gold:#b8893b;
  --shadow-1:0 1px 2px rgba(67,56,31,.06),0 4px 12px rgba(67,56,31,.08);
  --shadow-2:0 8px 24px rgba(67,56,31,.12);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:15px; line-height:1.65;
  transition:background .25s ease,color .25s ease;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
a:hover{color:var(--primary);}
ul,ol{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{font-family:var(--font-serif); font-weight:700; line-height:1.25; margin:0;}
button{font-family:inherit; cursor:pointer;}

/* ---------- Layout ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp); }
.layout{ display:grid; grid-template-columns:1fr 320px; gap:24px; margin:24px 0; }
.main{min-width:0;}
.sidebar{min-width:0;}
.section{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; margin-bottom:20px; box-shadow:var(--shadow-1); }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-head h2{ font-size:19px; }
.section-head .more{ font-size:13px; color:var(--text-3); }
.section-head h2::before{ content:""; display:inline-block; width:4px; height:18px; background:var(--primary); border-radius:2px; margin-right:8px; vertical-align:-3px; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; height:var(--header-h);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(160%) blur(10px); -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border); }
.header-inner{ max-width:var(--maxw); margin:0 auto; height:100%; padding:0 var(--sp);
  display:flex; align-items:center; gap:14px; }
.brand{ font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--primary); white-space:nowrap; }
.top-nav{ display:flex; gap:18px; font-size:15px; }
.top-nav a{ color:var(--text-2); }
.top-nav a:hover,.top-nav a.active{ color:var(--primary); }
.search{ flex:1; display:flex; max-width:420px; }
.search input{ flex:1; height:38px; border:1px solid var(--border); border-right:none; border-radius:var(--r-pill) 0 0 var(--r-pill); padding:0 16px; background:var(--surface-2); color:var(--text); outline:none; }
.search button{ height:38px; padding:0 20px; border:none; border-radius:0 var(--r-pill) var(--r-pill) 0; background:var(--primary); color:var(--primary-ink); font-size:14px; }
.header-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.scheme-switch{ display:flex; border:1px solid var(--border); border-radius:var(--r-pill); overflow:hidden; }
.scheme-switch button{ border:none; background:transparent; width:30px; height:30px; font-size:13px; color:var(--text-2); }
.scheme-switch button.active{ background:var(--primary); color:var(--primary-ink); }
.btn-pill{ height:34px; padding:0 14px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--text); font-size:13px; }
.btn-pill:hover{ border-color:var(--primary); color:var(--primary); }

/* ---------- Category nav ---------- */
.cat-nav{ background:var(--surface); border-bottom:1px solid var(--border); }
.cat-list{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp); display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.cat-list::-webkit-scrollbar{ display:none; }
.cat-list a{ display:block; padding:12px 14px; white-space:nowrap; font-size:15px; color:var(--text-2); border-bottom:2px solid transparent; }
.cat-list a:hover,.cat-list a.active{ color:var(--primary); border-bottom-color:var(--primary); }

/* ---------- Book card grid ---------- */
.book-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px; }
.book-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:transform .2s ease,box-shadow .2s ease; }
.book-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.book-card .cover{ display:block; aspect-ratio:3/4; background:var(--surface-2); overflow:hidden; }
.book-card .cover img{ width:100%; height:100%; object-fit:cover; }
.book-card .card-body{ padding:10px 10px 12px; }
.book-card .title{ display:block; font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book-card .author{ display:block; font-size:12px; color:var(--text-3); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Book row (list) ---------- */
.book-row{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.book-row .cover{ flex:0 0 84px; width:84px; aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; background:var(--surface-2); }
.book-row .cover img{ width:100%; height:100%; object-fit:cover; }
.book-row .row-body{ flex:1; min-width:0; }
.book-row .row-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.book-row .title{ font-size:16px; font-weight:600; color:var(--text); }
.book-row .views{ font-size:12px; color:var(--gold); white-space:nowrap; }
.book-row .author{ font-size:13px; color:var(--text-3); margin-top:4px; display:inline-block; }
.book-row .desc{ font-size:13px; color:var(--text-2); margin-top:6px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Rank list ---------- */
.rank-list li{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.rank-no{ flex:0 0 22px; text-align:center; font-style:italic; font-weight:700; color:var(--text-3); font-family:var(--font-serif); }
.rank-list li:nth-child(1) .rank-no{ color:#e74c3c; }
.rank-list li:nth-child(2) .rank-no{ color:#e67e22; }
.rank-list li:nth-child(3) .rank-no{ color:#f1c40f; }
.rank-title{ font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Update list ---------- */
.update-list li{ padding:9px 0; border-bottom:1px solid var(--border); }
.update-list a.ut-title{ font-size:14px; font-weight:600; color:var(--text); }
.update-list .ut-chapter{ display:block; font-size:13px; color:var(--text-2); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.update-list .ut-time{ font-size:12px; color:var(--text-3); }

/* ---------- Chapter list ---------- */
.chapter-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 20px; }
.chapter-list li{ border-bottom:1px solid var(--border); }
.chapter-list a{ display:block; padding:11px 6px; font-size:14px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chapter-list a:hover{ background:var(--surface-2); color:var(--primary); }

/* ---------- Book detail hero ---------- */
.book-hero{ display:flex; gap:22px; }
.book-hero .cover{ flex:0 0 160px; width:160px; aspect-ratio:3/4; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-2); background:var(--surface-2); }
.book-hero .cover img{ width:100%; height:100%; object-fit:cover; }
.book-hero .meta{ flex:1; min-width:0; }
.book-hero .meta h1{ font-size:26px; margin-bottom:8px; }
.book-hero .meta .line{ font-size:14px; color:var(--text-2); margin:6px 0; }
.book-hero .meta .line a{ color:var(--primary); }
.book-hero .meta .intro{ font-size:14px; color:var(--text-2); line-height:1.8; margin-top:12px; }
.book-hero .actions{ display:flex; gap:12px; margin-top:18px; }
.btn-primary{ height:42px; padding:0 28px; border:none; border-radius:var(--r-pill); background:var(--primary); color:var(--primary-ink); font-size:15px; font-weight:600; }
.btn-ghost{ height:42px; padding:0 28px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--text); font-size:15px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.tag{ font-size:12px; padding:3px 10px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--text-2); }

/* ---------- Reader ---------- */
.reader-wrap{ max-width:var(--readingw); margin:0 auto; padding:24px var(--sp) 80px; }
.reader-title{ font-size:22px; text-align:center; margin-bottom:6px; }
.reader-chapter{ font-size:18px; text-align:center; color:var(--text-2); margin-bottom:24px; }
.reader-article{ font-family:var(--font-serif); font-size:var(--read-fs); line-height:var(--read-lh); color:var(--text); }
.reader-article p{ margin:0 0 1.2em; text-indent:2em; }
.reader-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:32px; }
.reader-nav a{ flex:1; text-align:center; padding:12px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--text); font-size:14px; }
.reader-tools{ display:flex; align-items:center; justify-content:center; gap:16px; margin:18px 0; color:var(--text-3); font-size:13px; }
.reader-tools button{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:var(--r-pill); padding:6px 14px; font-size:13px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); background:var(--surface); margin-top:32px; padding:28px 0; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp); text-align:center; color:var(--text-3); font-size:13px; line-height:1.9; }
.footer-inner a{ color:var(--text-2); margin:0 8px; }

/* ---------- Mobile bottom nav ---------- */
.bottom-nav{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--surface); border-top:1px solid var(--border); height:56px;
  grid-template-columns:repeat(4,1fr); }
.bottom-nav a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--text-2); }
.bottom-nav a .ic{ font-size:18px; }
.bottom-nav a.active{ color:var(--primary); }

/* ---------- Pagination ---------- */
.pages{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:18px 0; }
.pages a,.pages span{ min-width:36px; height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); color:var(--text-2); font-size:13px; }
.pages a:hover{ border-color:var(--primary); color:var(--primary); }
.pages .current{ background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .layout{ grid-template-columns:1fr; }
  .sidebar{ order:2; }
  .book-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
}
@media (max-width:860px){
  .top-nav{ display:none; }
  .book-hero{ flex-direction:column; align-items:center; text-align:center; }
  .book-hero .actions{ justify-content:center; }
}
@media (max-width:640px){
  :root{ --sp:12px; }
  .search{ max-width:none; }
  .header-actions .btn-pill{ display:none; }
  .book-grid{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .chapter-list{ grid-template-columns:1fr; }
  .book-hero .cover{ flex-basis:130px; width:130px; }
  .book-hero .meta h1{ font-size:22px; }
  .bottom-nav{ display:grid; }
  body{ padding-bottom:56px; }
}
@media (max-width:420px){
  .book-grid{ grid-template-columns:repeat(2,1fr); }
}