/* ===== Reset & Variables ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --primary:#4a67c5;
  --primary-light:#6b8aef;
  --primary-dark:#3651a3;
  --primary-bg:#eef2ff;
  --text:#1a1a1a;
  --text-2:#666;
  --text-3:#aaa;
  --bg:#f5f6f8;
  --card:#fff;
  --radius:12px;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --gold:#f59e0b;
  --danger:#ef4444;
  --success:#22c55e;
}
html{font-size:16px}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  padding-bottom:calc(60px + var(--safe-bottom));
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{display:block;max-width:100%}
[v-cloak]{display:none}

/* ===== Navbar (sub-pages with back button) ===== */
.navbar{
  position:sticky;top:0;
  background:var(--card);
  display:flex;align-items:center;
  padding:12px 16px;
  border-bottom:1px solid #f0f0f0;
  z-index:50;
}
.navbar .back{
  font-size:22px;color:var(--text);cursor:pointer;
  width:30px;flex-shrink:0;
}
.navbar .title{
  flex:1;text-align:center;font-size:17px;font-weight:600;
  margin:0 8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.navbar .right{
  width:30px;text-align:right;font-size:13px;
  color:var(--primary);cursor:pointer;flex-shrink:0;
}

/* ===== Tabbar (bottom navigation) ===== */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  background:var(--card);
  display:flex;
  border-top:1px solid #eee;
  z-index:100;
  padding-bottom:var(--safe-bottom);
}
.tabbar .tab{
  flex:1;display:flex;flex-direction:column;
  align-items:center;gap:2px;
  padding:8px 0 6px;cursor:pointer;
  color:var(--text-3);transition:color .2s;
}
.tabbar .tab:active{transform:scale(.9)}
.tabbar .tab.active{color:var(--primary)}
.tabbar .tab .ic{font-size:20px}
.tabbar .tab .lb{font-size:10px;font-weight:500}

/* ===== Toast ===== */
#toast{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.75);color:#fff;
  padding:10px 20px;border-radius:8px;font-size:14px;
  z-index:9999;opacity:0;transition:opacity .3s;
  pointer-events:none;white-space:nowrap;
}
#toast.show{opacity:1}

/* ===== Cover Gradients ===== */
.g1{background:linear-gradient(135deg,#667eea,#764ba2)}
.g2{background:linear-gradient(135deg,#f093fb,#f5576c)}
.g3{background:linear-gradient(135deg,#4facfe,#00f2fe)}
.g4{background:linear-gradient(135deg,#43e97b,#38f9d7)}
.g5{background:linear-gradient(135deg,#fa709a,#fee140)}
.g6{background:linear-gradient(135deg,#30cfd0,#536976)}
.g7{background:linear-gradient(135deg,#a8edea,#fed6e3)}
.g8{background:linear-gradient(135deg,#ff9a9e,#fad0c4)}
.g9{background:linear-gradient(135deg,#f6d365,#fda085)}
.g10{background:linear-gradient(135deg,#5ee7df,#b490ca)}
.g11{background:linear-gradient(135deg,#d299c2,#fef9d7)}
.g12{background:linear-gradient(135deg,#89f7fe,#66a6ff)}

/* ===== Badges ===== */
.badge{
  position:absolute;top:5px;left:5px;
  font-size:9px;font-weight:600;color:#fff;
  padding:1px 6px;border-radius:3px;
}
.badge.hot{background:#e74c3c}
.badge.new{background:#1976d2}
.badge.end{background:#27ae60}

/* ===== Section Title ===== */
.sec-title{
  font-size:16px;font-weight:700;
  margin:20px 14px 12px;
  display:flex;align-items:center;justify-content:space-between;
}
.sec-title .more{
  font-size:12px;color:var(--text-3);
  font-weight:400;cursor:pointer;
}

/* ===== Cover (shared) ===== */
.cover{
  border-radius:8px;overflow:hidden;
  position:relative;
}
.cover .grad{width:100%;height:100%}
.cover .ct{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.95);
  font-weight:700;
  writing-mode:vertical-rl;letter-spacing:1px;
}

/* ===== Loading & Empty ===== */
.loading{text-align:center;padding:40px 0;color:var(--text-3);font-size:13px}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-3);font-size:13px}

/* ===== 翻书加载（全局） ===== */
.flip-overlay{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:100%;
  z-index:1200;display:flex;align-items:center;justify-content:center;
  background:var(--bg,#f5f6f8);
}
.flip-inline{
  display:flex;align-items:center;justify-content:center;
  min-height:42vh;padding:48px 0;
}
.flip-book{
  width:84px;height:112px;
  perspective:700px;
  position:relative;
}
.flip-base{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,#4a67c5 0 7px,#6b8aef 7px 9px,#eef2ff 9px 50%,#fff 50%);
  border-radius:3px 7px 7px 3px;
  box-shadow:
    0 10px 28px rgba(74,103,197,.22),
    inset 0 0 0 1px rgba(255,255,255,.35);
}
.flip-base::after{
  content:"";position:absolute;left:9px;top:10px;right:8px;bottom:10px;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 9px,
    rgba(74,103,197,.12) 9px 10px
  );
  border-radius:0 3px 3px 0;
  opacity:.7;
}
.flip-leaf{
  position:absolute;top:6px;right:6px;bottom:6px;left:50%;
  transform-origin:left center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  background:
    linear-gradient(90deg,rgba(74,103,197,.08),transparent 10%),
    repeating-linear-gradient(to bottom, #fff 0 8px, #eef2ff 8px 9px);
  border-radius:0 4px 4px 0;
  box-shadow:1px 0 4px rgba(0,0,0,.1);
  animation:flipPage 1.15s ease-in-out infinite;
}
.flip-leaf.leaf-2{animation-delay:.18s;opacity:.9}
.flip-leaf.leaf-3{animation-delay:.36s;opacity:.75}
@keyframes flipPage{
  0%{transform:rotateY(0deg)}
  55%{transform:rotateY(-158deg)}
  100%{transform:rotateY(-180deg)}
}

/* ===== Animations ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===== Night mode (global, skip reader) ===== */
html.night,
body.night{
  --primary-bg:#312e81;
  --text:#e5e7eb;
  --text-2:#9ca3af;
  --text-3:#6b7280;
  --bg:#111827;
  --card:#1f2937;
  --shadow:0 1px 3px rgba(0,0,0,.35);
  color-scheme:dark;
}
html.night,
html.night body,
body.night{
  background:var(--bg);
  color:var(--text);
}
html.night .navbar,
html.night .topbar,
html.night .header,
html.night .cat-tabs,
html.night .rank-tabs,
html.night .sp-header,
html.night .filter-bar,
body.night .navbar,
body.night .topbar,
body.night .header,
body.night .cat-tabs,
body.night .rank-tabs,
body.night .sp-header{
  border-bottom-color:#374151;
}
html.night .tabbar,
html.night .manage-bar,
html.night .pay-bar,
html.night .bottom-bar,
html.night .action-bar,
body.night .tabbar,
body.night .manage-bar,
body.night .pay-bar,
body.night .bottom-bar,
body.night .action-bar{
  border-top-color:#374151;
}
html.night .rank-item,
html.night .upd-item,
html.night .setting-item,
html.night .history-item,
html.night .ch-item,
html.night .chapter-list .ch,
html.night .follow-item,
html.night .review-item,
html.night .reply-item,
html.night .summary-card .s-col + .s-col,
html.night .stats-card .s-col + .s-col,
body.night .rank-item,
body.night .upd-item,
body.night .setting-item{
  border-color:#374151;
}
html.night input,
html.night textarea,
body.night input,
body.night textarea{
  color:var(--text);
}
html.night .filter-pill,
html.night .filter-sort,
body.night .filter-pill,
body.night .filter-sort{
  border-color:#374151;
}
html.night .filter-pill.active,
html.night .filter-sort.active,
body.night .filter-pill.active,
body.night .filter-sort.active{
  background:#312e81;
  border-color:#4338ca;
}
html.night .book-item .info .status.ongoing,
body.night .book-item .info .status.ongoing{
  background:#1e3a5f;
}
html.night .book-item .info .status.finished,
body.night .book-item .info .status.finished{
  background:#3b1f4a;color:#c4b5fd;
}
html.night .upd-item .tag.hot,
html.night .r-badge.hot,
html.night .sp-result .r-name .r-badge.hot,
body.night .upd-item .tag.hot,
body.night .r-badge.hot{
  background:#3f1d1d;
}
html.night .upd-item .tag.new,
html.night .r-badge.end,
html.night .r-badge.new,
html.night .sp-result .r-name .r-badge.end,
html.night .sp-result .r-name .r-badge.new,
body.night .upd-item .tag.new,
body.night .r-badge.end,
body.night .r-badge.new{
  background:#14332a;
}
html.night .hot-tags .tag,
body.night .hot-tags .tag{background:#111827;color:var(--text-2)}
html.night .hot-tags .tag.top3,
body.night .hot-tags .tag.top3{background:#3d2e12;color:#fbbf24}
html.night .sp-input-wrap,
body.night .sp-input-wrap{background:#111827}
html.night .result-card,
html.night .add-sheet .reco-item,
html.night .msg-item:active,
html.night .setting-item:active,
html.night .pay-item:active,
html.night .ch-item:active,
html.night .chapter-list .ch:active,
html.night .book-item:active,
body.night .result-card,
body.night .add-sheet .reco-item,
body.night .msg-item:active,
body.night .setting-item:active{
  background:#111827;
}
html.night .add-sheet .reco-item:active,
body.night .add-sheet .reco-item:active{background:#0f172a}
html.night .add-sheet .reco-item .add-btn.added,
html.night .manage-bar .actions .btn-move,
body.night .add-sheet .reco-item .add-btn.added,
body.night .manage-bar .actions .btn-move{
  background:#374151;color:var(--text-2);
}
html.night .history-item .body .progress-info .bar,
html.night .reward-item .ri-progress,
html.night .rating-dist .dist-row .bar-bg,
body.night .history-item .body .progress-info .bar{
  background:#374151;
}
html.night .shelf-item .cover,
html.night .sp-result .cover,
html.night .book-header .cover,
html.night .rec-card .cover,
body.night .shelf-item .cover,
body.night .sp-result .cover{
  background:#374151;
}
html.night .sort-bar,
html.night .week-grid,
body.night .sort-bar{background:#1f2937}
html.night .sort-bar .chip,
body.night .sort-bar .chip{background:#374151;color:var(--text-2);border-color:#4b5563}
html.night .form-input,
html.night .input-field,
html.night .textarea-wrap textarea,
html.night .search-wrap input,
body.night .form-input,
body.night .input-field,
body.night .textarea-wrap textarea{
  background:#111827;border-color:#374151;color:var(--text);
}
html.night .form-input:focus,
body.night .form-input:focus{background:#1f2937}
html.night .type-card,
html.night .faq-item,
html.night .cat-card,
html.night .kefu-item,
html.night .history-item,
html.night .recharge-item,
html.night .plan-item,
html.night .confirm-dialog .c-actions,
html.night .confirm-dialog .c-btn.cancel,
body.night .type-card,
body.night .faq-item,
body.night .cat-card,
body.night .kefu-item,
body.night .recharge-item,
body.night .plan-item{
  border-color:#374151;
}
html.night .loading-spinner,
body.night .loading-spinner{border-color:#374151}
html.night .add-sheet .handle,
body.night .add-sheet .handle{background:#4b5563}
html.night .b-tags .tag.end,
body.night .b-tags .tag.end{background:#14332a}
html.night .b-tags .tag.hot,
body.night .b-tags .tag.hot{background:#3f1d1d}
html.night .ch-item .ch-tag.free,
html.night .ch-item .ch-tag.vip,
html.night .ch-item .ch-tag.unlocked,
body.night .ch-item .ch-tag.free{background:#14332a}
html.night .ch-item .ch-tag.vip,
body.night .ch-item .ch-tag.vip{background:#3d2e12}
html.night .ch-item .ch-tag.unlocked,
body.night .ch-item .ch-tag.unlocked{background:#1e3a5f}
html.night .stats-bar .view-mode,
body.night .stats-bar .view-mode{background:#374151}
html.night .grid4 .grid-item:active,
body.night .grid4 .grid-item:active{background:#111827}
html.night .book-card .cover,
body.night .book-card .cover{background:#374151}
html.night .book-card .info .b-meta .tag.end,
body.night .book-card .info .b-meta .tag.end{background:#14332a}
html.night .book-card .info .b-meta .tag.hot,
body.night .book-card .info .b-meta .tag.hot{background:#3f1d1d}
html.night .search-head,
body.night .search-head{border-bottom-color:#374151}