*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --primary:#4a67c5;
  --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);
}
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}

/* ===== 顶部栏 ===== */
.topbar{
  background:var(--card);
  padding:10px 14px 0;
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid #f0f0f0;
}
.topbar-row{
  display:flex;align-items:center;gap:10px;
  padding-bottom:10px;
}
.topbar .logo{
  font-size:19px;font-weight:800;
  color:var(--primary);flex-shrink:0;
  letter-spacing:1px;
}
.topbar .search{
  flex:1;display:flex;align-items:center;
  background:var(--bg);border-radius:20px;
  padding:7px 14px;gap:6px;cursor:pointer;
}
.topbar .search svg{width:16px;height:16px;flex-shrink:0;opacity:.4}
.topbar .search .ph{flex:1;font-size:14px;color:var(--text-3)}
.topbar .icon-btn{
  width:32px;height:32px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;
}

/* ===== 频道切换 ===== */
.channel-bar{
  display:flex;align-items:center;gap:0;
  padding:0 14px 8px;position:relative;
}
.channel-switch{
  display:flex;position:relative;
  background:var(--bg);border-radius:20px;
  padding:3px;flex:1;
}
.channel-switch .ch-btn{
  flex:1;text-align:center;padding:6px 0;
  font-size:14px;font-weight:600;
  color:var(--text-3);cursor:pointer;
  position:relative;z-index:2;
  transition:color .25s;
}
.channel-switch .ch-btn.active{color:#fff}
.channel-switch .ch-indicator{
  position:absolute;top:3px;bottom:3px;
  width:calc(50% - 3px);
  background:var(--primary);
  border-radius:18px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.channel-switch .ch-indicator.female{transform:translateX(100%)}
.channel-switch .ch-btn .ch-ico{font-size:13px;margin-right:3px}

/* ===== 轮播 ===== */
.banner{
  margin:12px 14px 0;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  height:150px;
}
.banner .slides{position:relative;width:100%;height:100%}
.banner .slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity .4s;
  display:flex;align-items:flex-end;
  padding:16px;cursor:pointer;
}
.banner .slide.active{opacity:1}
.banner .slide .bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.banner .slide .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent 70%);
}
.banner .slide .info{position:relative;z-index:1;color:#fff}
.banner .slide .info .tag{
  display:inline-block;font-size:10px;font-weight:600;
  background:rgba(255,255,255,.25);backdrop-filter:blur(4px);
  padding:2px 8px;border-radius:10px;margin-bottom:6px;
}
.banner .slide .info h2{font-size:17px;font-weight:700}
.banner .slide .info p{font-size:12px;opacity:.85;margin-top:2px}
.banner .dots{
  position:absolute;bottom:8px;right:14px;z-index:2;
  display:flex;gap:5px;
}
.banner .dots span{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.4);transition:all .3s;
  cursor:pointer;
}
.banner .dots span.active{background:#fff;width:16px;border-radius:3px}

/* ===== 分类入口 ===== */
.cats{
  margin:16px 14px 0;
  background:var(--card);
  border-radius:var(--radius);
  padding:16px 4px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px 0;
}
.cat{
  display:flex;flex-direction:column;align-items:center;
  gap:5px;cursor:pointer;
}
.cat .ico{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.cat .label{font-size:11px;color:var(--text-2)}

/* ===== 板块 ===== */
.section{margin:20px 14px 0}
.sec-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.sec-head .title{display:flex;align-items:center;gap:6px}
.sec-head .title h3{font-size:16px;font-weight:700}
.sec-head .title .dot{width:3px;height:14px;background:var(--primary);border-radius:2px}
.sec-head .more{font-size:12px;color:var(--text-3);cursor:pointer}

/* ===== 横滑书卡 ===== */
.scroll-row{
  display:flex;gap:12px;
  overflow-x:auto;
  padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.scroll-row::-webkit-scrollbar{display:none}
.book-card{flex-shrink:0;width:92px;cursor:pointer}
.book-card .cover{
  width:92px;height:124px;
  border-radius:8px;overflow:hidden;
  position:relative;
}
.book-card .cover .grad{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.book-card .cover .ct{
  color:rgba(255,255,255,.95);
  font-size:15px;font-weight:700;
  writing-mode:vertical-rl;letter-spacing:3px;
  text-shadow:0 1px 4px rgba(0,0,0,.2);
  padding:8px 0;
}
.book-card .cover .badge{
  position:absolute;top:5px;left:5px;
  font-size:9px;font-weight:600;color:#fff;
  padding:1px 6px;border-radius:3px;
}
.book-card .cover .badge.hot{background:#e74c3c}
.book-card .cover .badge.new{background:#27ae60}
.book-card .cover .badge.end{background:#8e44ad}
.book-card .name{
  font-size:13px;font-weight:600;margin-top:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.book-card .author{font-size:11px;color:var(--text-3);margin-top:1px}

/* ===== 排行榜 ===== */
.rank-tabs{
  display:flex;background:var(--card);
  border-radius:var(--radius) var(--radius) 0 0;
  border-bottom:1px solid #f0f0f0;
}
.rank-tabs li{
  flex:1;text-align:center;padding:11px 0;
  font-size:13px;font-weight:600;color:var(--text-3);
  cursor:pointer;position:relative;
}
.rank-tabs li.active{color:var(--primary)}
.rank-tabs li.active::after{
  content:"";position:absolute;bottom:0;left:50%;
  transform:translateX(-50%);
  width:20px;height:2px;background:var(--primary);border-radius:2px;
}
.rank-box{
  background:var(--card);
  border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden;
}
.rank-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;cursor:pointer;
  border-bottom:1px solid #f7f7f7;
}
.rank-item:last-child{border-bottom:none}
.rank-item .num{
  width:22px;text-align:center;
  font-size:15px;font-weight:800;color:var(--text-3);flex-shrink:0;
}
.rank-item:nth-child(1) .num{color:#e74c3c}
.rank-item:nth-child(2) .num{color:#e67e22}
.rank-item:nth-child(3) .num{color:#f39c12}
.rank-item .info{flex:1;min-width:0}
.rank-item .info .t{font-size:14px;font-weight:600}
.rank-item .info .m{font-size:11px;color:var(--text-3);margin-top:1px}
.rank-item .v{font-size:11px;color:var(--primary);font-weight:600;flex-shrink:0}

/* ===== 更新列表 ===== */
.upd-list{background:var(--card);border-radius:var(--radius);overflow:hidden}
.upd-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;cursor:pointer;
  border-bottom:1px solid #f7f7f7;
}
.upd-item:last-child{border-bottom:none}
.upd-item .cover{
  width:44px;height:60px;border-radius:6px;
  flex-shrink:0;overflow:hidden;position:relative;
}
.upd-item .cover .grad{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.upd-item .cover .ct{
  color:rgba(255,255,255,.95);font-size:10px;font-weight:600;
  writing-mode:vertical-rl;letter-spacing:1px;
}
.upd-item .info{flex:1;min-width:0}
.upd-item .info .t{font-size:14px;font-weight:600}
.upd-item .info .c{
  font-size:12px;color:var(--text-2);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.upd-item .time{font-size:11px;color:var(--text-3);flex-shrink:0}
.upd-item .tag{font-size:9px;padding:1px 5px;border-radius:3px;flex-shrink:0}
.upd-item .tag.hot{background:#fdecea;color:#e74c3c}
.upd-item .tag.new{background:#e8f5e9;color:#27ae60}

/* ===== 搜索面板 ===== */
.search-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .25s;
}
.search-overlay.active{
  background:rgba(0,0,0,.3);
  pointer-events:auto;
}
.search-panel{
  position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-100%);
  width:100%;max-width:430px;
  height:100vh;background:var(--bg);
  z-index:201;
  transition:transform .3s cubic-bezier(.22,.68,0,1);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.search-overlay.active .search-panel{
  transform:translateX(-50%) translateY(0);
}
.search-panel .sp-header{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:var(--card);
  border-bottom:1px solid #f0f0f0;flex-shrink:0;
}
.search-panel .sp-back{
  width:30px;height:30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--text-2);cursor:pointer;
  transition:transform .15s;
}
.search-panel .sp-back:active{transform:scale(.85)}
.search-panel .sp-input-wrap{
  flex:1;display:flex;align-items:center;
  background:var(--bg);border-radius:20px;
  padding:8px 14px;gap:6px;
  transition:box-shadow .2s;
}
.search-panel .sp-input-wrap.focused{box-shadow:0 0 0 2px var(--primary)}
.search-panel .sp-input-wrap svg{width:16px;height:16px;flex-shrink:0;opacity:.4}
.search-panel .sp-input-wrap input{
  flex:1;border:none;outline:none;background:none;
  font-size:14px;color:var(--text);
}
.search-panel .sp-input-wrap input::placeholder{color:var(--text-3)}
.search-panel .sp-clear{
  width:18px;height:18px;flex-shrink:0;
  background:#ccc;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;cursor:pointer;
}
.search-panel .sp-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 14px;
}
.sp-section{margin-bottom:20px}
.sp-section .sp-title{
  font-size:13px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:5px;
  margin-bottom:10px;
}
.sp-section .sp-title .ico{font-size:14px}
.sp-section .sp-title .clear-his{
  margin-left:auto;font-size:12px;font-weight:400;
  color:var(--text-3);cursor:pointer;
}
.hot-tags{display:flex;flex-wrap:wrap;gap:8px}
.hot-tags .ht{
  display:flex;align-items:center;gap:4px;
  padding:6px 12px;background:var(--card);
  border-radius:16px;font-size:12px;
  color:var(--text-2);cursor:pointer;
  box-shadow:var(--shadow);transition:transform .15s;
}
.hot-tags .ht:active{transform:scale(.95)}
.hot-tags .ht .rank{
  font-size:11px;font-weight:700;
  width:16px;height:16px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.hot-tags .ht:nth-child(1) .rank{background:#e74c3c}
.hot-tags .ht:nth-child(2) .rank{background:#e67e22}
.hot-tags .ht:nth-child(3) .rank{background:#f39c12}
.hot-tags .ht:nth-child(n+4) .rank{background:#bbb}
.hot-tags .ht .fire{font-size:10px}
.his-tags{display:flex;flex-wrap:wrap;gap:8px}
.his-tags .ht{
  display:flex;align-items:center;gap:4px;
  padding:6px 12px;background:var(--card);
  border-radius:16px;font-size:12px;
  color:var(--text-2);cursor:pointer;
  box-shadow:var(--shadow);transition:transform .15s;
}
.his-tags .ht:active{transform:scale(.95)}
.his-tags .ht .del{font-size:10px;opacity:.4;margin-left:2px}
.sp-results{display:flex;flex-direction:column;gap:10px}
.sp-result{
  display:flex;gap:12px;padding:12px;
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);cursor:pointer;
  transition:transform .15s;
  animation:fadeUp .3s ease both;
}
.sp-result:active{transform:scale(.98)}
.sp-result .cover{
  width:48px;height:64px;border-radius:6px;
  flex-shrink:0;overflow:hidden;position:relative;
  background:#f0f1f4;
}
.sp-result .cover .cover-img{
  width:100%;height:100%;object-fit:cover;
}
.sp-result .cover .ct{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.95);font-size:11px;font-weight:700;
  writing-mode:vertical-rl;letter-spacing:1px;
}
.sp-result .r-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sp-result .r-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.sp-result .r-name .r-badge{font-size:9px;font-weight:600;padding:1px 5px;border-radius:3px}
.sp-result .r-name .r-badge.hot{background:#fdecea;color:#e74c3c}
.sp-result .r-name .r-badge.end{background:#e8f5e9;color:#27ae60}
.sp-result .r-name .r-badge.new{background:#e3f2fd;color:#1976d2}
.sp-result .r-author{font-size:12px;color:var(--text-3)}
.sp-result .r-desc{
  font-size:12px;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.sp-result .r-meta{font-size:11px;color:var(--text-3);margin-top:auto}
.hl{color:var(--primary);font-weight:600}
.sp-noresult{text-align:center;padding:40px 0;color:var(--text-3)}
.sp-noresult .emoji{font-size:36px;margin-bottom:8px}
.sp-noresult .txt{font-size:13px}
.sp-noresult .suggest{margin-top:12px;font-size:12px;color:var(--text-2)}
.sp-noresult .suggest .link{color:var(--primary);cursor:pointer;text-decoration:underline}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sp-safe{height:env(safe-area-inset-bottom,0px);flex-shrink:0}

/* ===== 底部导航 ===== */
.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{color:var(--primary)}
.tabbar .tab .ic{font-size:20px}
.tabbar .tab .lb{font-size:10px;font-weight:500}

/* ===== 封面渐变 ===== */
.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)}

/* ===== 翻书加载 ===== */
.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-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)}
}

html.night .rank-item,
html.night .upd-item,
body.night .rank-item,
body.night .upd-item{border-bottom-color:#374151}
html.night .sp-result .r-name .r-badge.new,
body.night .sp-result .r-name .r-badge.new{background:#1e3a5f;color:#93c5fd}


/* ===== 最近阅读（有阅读记录时替代 banner） ===== */
.recent-bar{
  margin:12px 14px 0;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#fff7ec,#ffeedd);
  display:flex;align-items:center;gap:12px;
  padding:14px;
}
html.night .recent-bar,
body.night .recent-bar{background:#2a2620}
.recent-bar .rb-cover{
  width:52px;height:70px;object-fit:cover;border-radius:6px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.recent-bar .rb-info{flex:1;min-width:0}
.recent-bar .rb-label{font-size:11px;color:#c47f3d;margin-bottom:2px}
.recent-bar .rb-title{
  font-size:15px;font-weight:600;color:#2d2926;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html.night .recent-bar .rb-title,
body.night .recent-bar .rb-title{color:#f3f0ea}
.recent-bar .rb-ch{
  font-size:12px;color:#8a817a;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recent-bar .rb-btn{
  flex-shrink:0;font-size:13px;color:#fff;background:linear-gradient(135deg,#ff9a3d,#ff6a00);
  padding:8px 14px;border-radius:999px;font-weight:600;
}
.recent-bar:active{opacity:.85}