:root{
  --paper:#faf8f4;
  --paper-2:#f3efe7;
  --card:#ffffff;
  --ink:#1e1c19;
  --ink-2:#4a463f;
  --ink-3:#8d8679;
  --line:#e8e2d7;
  --accent:#2c5f52;
  --accent-soft:#e8efec;
  --warm:#c0603e;
  --gold:#c99a4b;
  --radius:14px;
  --shadow:0 1px 2px rgba(30,28,25,.04), 0 8px 24px -12px rgba(30,28,25,.14);
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,"Times New Roman",serif;
  --read-size:18px;
  --read-lh:1.95;
  --read-bg:#faf8f4;
  --read-ink:#2b2823;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.6;
  padding-bottom:74px;
}
body.reading{padding-bottom:0;overflow:hidden;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0;}
input,textarea,select{font-family:inherit;font-size:15px;color:var(--ink);}
a{color:inherit;text-decoration:none;}
svg{display:block;}
.hide{display:none !important;}
.muted{color:var(--ink-3);}
.center{text-align:center;}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(250,248,244,.88);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
body.reading .topbar,body.reading .tabbar{display:none;}
.topbar-inner{max-width:1120px;margin:0 auto;height:56px;display:flex;align-items:center;gap:14px;padding:0 16px;}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:19px;letter-spacing:.06em;font-weight:600;}
.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:14px;font-family:var(--serif);flex:0 0 auto;}
.topnav{display:none;gap:2px;margin-left:10px;}
.topnav button{padding:7px 12px;border-radius:9px;font-size:14.5px;color:var(--ink-3);transition:.18s;}
.topnav button:hover{color:var(--ink);background:var(--paper-2);}
.topnav button.on{color:var(--accent);font-weight:600;background:var(--accent-soft);}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.icon-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);transition:.18s;flex:0 0 auto;}
.icon-btn:hover{background:var(--paper-2);color:var(--ink);}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;font-size:14.5px;padding:9px 16px;transition:.18s;white-space:nowrap;}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:#234d43;}
.btn-primary:disabled{opacity:.55;cursor:default;}
.btn-ghost{border:1px solid var(--line);background:var(--card);color:var(--ink-2);}
.btn-ghost:hover{border-color:#d6cec0;color:var(--ink);}
.btn-ghost.on{background:var(--accent-soft);border-color:#cfe0da;color:var(--accent);}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:9px;}
.user-chip{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border-radius:999px;border:1px solid var(--line);background:var(--card);}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--serif);font-size:13px;flex:0 0 auto;}
.user-chip b{font-size:13px;font-weight:500;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- 底部导航 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:rgba(255,255,255,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--ink-3);}
.tabbar button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.tabbar button.on{color:var(--accent);}
.tabbar button.on svg{stroke-width:1.95;}

/* ---------- 布局 ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 16px;}
.view{animation:fade .26s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sec-title{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);font-size:17px;font-weight:600;margin:28px 0 14px;letter-spacing:.02em;}
.sec-title small{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);font-weight:400;letter-spacing:0;margin-left:auto;}
.sec-title small a{color:var(--accent);}

/* ---------- 首页 ---------- */
.hero{padding:24px 0 2px;}
.hero h1{font-family:var(--serif);font-size:26px;line-height:1.45;margin:0 0 8px;font-weight:600;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero p{margin:0 0 16px;color:var(--ink-3);font-size:14px;line-height:1.7;}
.search{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);}
.search svg{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:1.8;stroke-linecap:round;flex:0 0 auto;}
.search input{border:none;outline:none;background:none;flex:1;font-size:15px;min-width:0;}
.search input::placeholder{color:#b3ab9d;}
.chips{display:flex;gap:8px;overflow-x:auto;padding:15px 0 4px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;padding:6px 14px;border-radius:999px;font-size:13px;background:var(--card);border:1px solid var(--line);color:var(--ink-2);transition:.16s;}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ---------- 书卡 ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s;text-align:left;display:block;width:100%;}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#ded6c8;}
.cover{position:relative;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.16),transparent 60%);pointer-events:none;}
.cover-in{position:absolute;inset:9%;border:1px solid rgba(255,255,255,.32);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;}
.cover-title{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--serif);color:#fff;font-size:19px;letter-spacing:.2em;line-height:1.1;font-weight:600;max-height:84%;overflow:hidden;}
.cover-line{width:16px;height:1px;background:rgba(255,255,255,.5);}
.cover-author{writing-mode:vertical-rl;font-family:var(--serif);font-size:9.5px;color:rgba(255,255,255,.72);letter-spacing:.16em;}
.c1{background:linear-gradient(150deg,#33574f,#1d3a34);}
.c2{background:linear-gradient(150deg,#6b4a3f,#3a2622);}
.c3{background:linear-gradient(150deg,#5b6b7a,#333f4b);}
.c4{background:linear-gradient(150deg,#8a6a3c,#4f3a1f);}
.c5{background:linear-gradient(150deg,#7a5566,#40303a);}
.c6{background:linear-gradient(150deg,#4f6355,#2b3830);}
.card-body{padding:11px 13px 13px;}
.card-title{font-family:var(--serif);font-size:15.5px;font-weight:600;margin-bottom:5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.card-desc{font-size:12.5px;color:var(--ink-3);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;min-height:38px;}
.card-meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap;}
.stars-mini{display:flex;gap:1px;}
.stars-mini svg{width:11px;height:11px;}
.dot{width:2px;height:2px;border-radius:50%;background:#cfc7b8;flex:0 0 auto;}
.rowlist{display:flex;flex-direction:column;gap:10px;}
.rrow{display:flex;gap:13px;align-items:center;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:11px;transition:.2s;width:100%;}
.rrow:hover{border-color:#ded6c8;box-shadow:var(--shadow);}
.rrow .cover{width:52px;flex:0 0 52px;border-radius:7px;}
.rrow .cover-in{inset:7%;padding:4px;gap:3px;}
.rrow .cover-title{font-size:10px;letter-spacing:.08em;}
.rrow .cover-line,.rrow .cover-author{display:none;}
.rrow .card-body{padding:0;flex:1;min-width:0;}
.rrow .card-title{font-size:15px;margin-bottom:3px;-webkit-line-clamp:1;}
.rrow .card-desc{min-height:0;-webkit-line-clamp:1;margin-bottom:5px;font-size:12px;}

/* ---------- 详情 ---------- */
.backbar{display:flex;align-items:center;gap:8px;padding:13px 0 4px;color:var(--ink-3);font-size:14px;}
.backbar button{display:flex;align-items:center;gap:5px;color:var(--ink-3);}
.backbar button:hover{color:var(--ink);}
.backbar svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.detail-head{display:flex;gap:16px;align-items:flex-start;padding:8px 0 4px;}
.detail-head .cover{width:104px;flex:0 0 104px;border-radius:10px;box-shadow:0 10px 24px -12px rgba(0,0,0,.4);}
.detail-head .cover-in{inset:8%;}
.detail-head .cover-title{font-size:16px;letter-spacing:.14em;}
.detail-info{flex:1;min-width:0;padding-top:2px;}
.detail-info h1{font-family:var(--serif);font-size:21px;margin:0 0 7px;line-height:1.35;font-weight:600;}
.detail-sub{font-size:13px;color:var(--ink-3);margin-bottom:10px;}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.tag{font-size:11.5px;color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:6px;}
.actions{display:flex;gap:8px;flex-wrap:wrap;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin:18px 0;overflow:hidden;}
.stat{padding:12px 6px;text-align:center;border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;}
.stat span{font-size:11.5px;color:var(--ink-3);}
.prose{font-size:14.5px;line-height:1.85;color:var(--ink-2);}
.prose p{margin:0 0 11px;}
.toc-item{display:flex;align-items:center;gap:10px;padding:13px 14px;background:var(--card);border:1px solid var(--line);border-radius:11px;margin-bottom:8px;width:100%;text-align:left;transition:.18s;}
.toc-item:hover{border-color:#ded6c8;background:#fff;}
.toc-idx{font-family:var(--serif);font-size:12px;color:#bdb4a4;width:22px;flex:0 0 22px;}
.toc-name{flex:1;font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.toc-chars{font-size:11.5px;color:var(--ink-3);}
.toc-item.read .toc-name::after{content:"· 已读";font-size:11px;color:var(--accent);margin-left:6px;}

/* 评分 / 评论 */
.rate-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px;margin-bottom:12px;}
.rate-top{display:flex;align-items:center;gap:14px;}
.rate-score{font-family:var(--serif);font-size:31px;font-weight:600;line-height:1;}
.stars{display:flex;gap:2px;}
.stars button{padding:3px;line-height:0;}
.stars svg{width:19px;height:19px;}
.rate-hint{font-size:12px;color:var(--ink-3);margin-top:4px;}
.review{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);}
.review:last-child{border-bottom:none;}
.review .avatar{width:30px;height:30px;flex:0 0 30px;font-size:12px;}
.review-body{flex:1;min-width:0;}
.review-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;margin-bottom:3px;}
.review-name .stars-mini{margin-left:auto;}
.review-name .del{font-size:11.5px;color:var(--ink-3);text-decoration:underline;font-weight:400;}
.review-text{font-size:13.5px;color:var(--ink-2);line-height:1.7;word-break:break-word;}
.review-time{font-size:11.5px;color:#b3ab9d;margin-top:4px;}
textarea.rt{border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;resize:vertical;font-family:var(--serif);font-size:14px;background:var(--paper);line-height:1.7;width:100%;}
textarea.rt:focus,input.ti:focus,select.sel:focus{border-color:#b9c9c3;background:#fff;box-shadow:0 0 0 3px rgba(44,95,82,.07);}

/* ---------- 上传 ---------- */
.up-head{padding:20px 0 6px;}
.up-head h1{font-family:var(--serif);font-size:22px;margin:0 0 5px;font-weight:600;}
.up-head p{font-size:13px;color:var(--ink-3);margin:0;line-height:1.7;}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:13px;}
.field{margin-bottom:14px;}
.field:last-child{margin-bottom:0;}
.field label{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink-3);margin-bottom:7px;}
.field label span{margin-left:auto;font-size:11.5px;color:#bdb4a4;}
input.ti,select.sel{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);outline:none;font-size:14.5px;}
textarea.ta{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);outline:none;font-family:var(--serif);font-size:15px;line-height:1.8;resize:vertical;min-height:90px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.dropzone{border:1.5px dashed #d9d1c1;border-radius:12px;padding:22px 14px;text-align:center;background:var(--paper);transition:.18s;cursor:pointer;display:block;width:100%;}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:#f2f7f5;}
.dropzone svg{width:24px;height:24px;stroke:var(--ink-3);fill:none;stroke-width:1.5;margin:0 auto 8px;}
.dropzone b{display:block;font-size:13.5px;font-weight:500;margin-bottom:3px;}
.dropzone span{font-size:12px;color:var(--ink-3);}
.field label.dropzone{display:block;align-items:initial;gap:0;color:inherit;}  /* 覆盖 .field label 的 flex */
.chapter-block{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:11px;background:var(--paper);}
.chapter-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.chapter-head input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;outline:none;font-family:var(--serif);}
.chapter-tools{display:flex;gap:4px;}
.mini{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3);border:1px solid var(--line);background:#fff;font-size:13px;}
.mini:hover{color:var(--ink);border-color:#d6cec0;}
.mini.danger:hover{color:#b4443a;border-color:#e8c6c0;}
.switch-line{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);}
.switch{width:38px;height:22px;border-radius:999px;background:#ded6c8;position:relative;transition:.2s;flex:0 0 auto;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.switch.on{background:var(--accent);}
.switch.on::after{transform:translateX(16px);}
.form-tip{font-size:11.5px;color:#b3ab9d;line-height:1.7;}

/* ---------- 书架 / 书签 ---------- */
.page-head{padding:20px 0 4px;}
.page-head h1{font-family:var(--serif);font-size:22px;margin:0 0 4px;font-weight:600;}
.page-head p{margin:0;font-size:13px;color:var(--ink-3);}
.shelf-item{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:11px;margin-bottom:10px;align-items:center;}
.shelf-item .cover{width:46px;flex:0 0 46px;border-radius:6px;}
.shelf-item .cover-in{inset:8%;padding:2px;}
.shelf-item .cover-title{font-size:9px;letter-spacing:.04em;}
.shelf-item .cover-line,.shelf-item .cover-author{display:none;}
.shelf-main{flex:1;min-width:0;}
.shelf-main h4{font-family:var(--serif);font-size:14.5px;margin:0 0 3px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shelf-main .sm{font-size:11.5px;color:var(--ink-3);margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar{height:3px;border-radius:2px;background:var(--paper-2);overflow:hidden;}
.bar i{display:block;height:100%;background:var(--accent);border-radius:2px;}
.shelf-act{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;}
.mini-btn{font-size:12px;color:var(--ink-3);padding:6px 10px;border-radius:8px;border:1px solid var(--line);white-space:nowrap;background:var(--card);transition:.15s;}
.mini-btn:hover{color:var(--ink);border-color:#d6cec0;}
.mini-btn.acc{color:var(--accent);border-color:#cfe0da;background:var(--accent-soft);}
.mark-item{display:flex;gap:11px;padding:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;width:100%;text-align:left;transition:.18s;}
.mark-item:hover{border-color:#ded6c8;box-shadow:var(--shadow);}
.mark-item .cover{width:44px;flex:0 0 44px;border-radius:6px;aspect-ratio:3/4;}
.mark-item .cover-in{inset:8%;padding:2px;}
.mark-item .cover-title{font-size:9px;letter-spacing:.04em;}
.mark-item .cover-line,.mark-item .cover-author{display:none;}
.mark-quote{font-family:var(--serif);font-size:13.5px;line-height:1.75;color:var(--ink-2);border-left:2px solid #ddd4c4;padding-left:10px;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:left;}
.mark-quote.gold{border-color:#e6cf9b;}
.mark-quote.green{border-color:#bcd6c6;}
.mark-quote.blue{border-color:#b8cbd9;}
.mark-quote.pink{border-color:#e3c3c3;}
.mark-note{font-size:12.5px;color:var(--ink-2);background:var(--paper-2);border-radius:8px;padding:7px 10px;margin-bottom:7px;line-height:1.65;}
.mark-src{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;}
.mark-del{margin-left:auto;color:#b3ab9d;font-size:11.5px;}
.empty{text-align:center;padding:56px 20px;color:var(--ink-3);}
.empty .ico{font-family:var(--serif);font-size:32px;color:#d8d0c0;margin-bottom:10px;}
.empty p{font-size:13.5px;margin:0 0 16px;}

/* ---------- 阅读器 ---------- */
.reader{position:fixed;inset:0;background:var(--read-bg);display:flex;flex-direction:column;z-index:50;color:var(--read-ink);}
.r-bar{flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:8px 8px;border-bottom:1px solid rgba(0,0,0,.05);}
.r-bar .icon-btn{color:var(--read-ink);opacity:.72;}
.r-bar .icon-btn:hover{background:rgba(0,0,0,.05);opacity:1;}
.rtitle{flex:1;min-width:0;text-align:center;font-size:12.5px;opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;}
.progress-line{position:absolute;top:0;left:0;height:3px;background:var(--accent);z-index:6;transition:width .15s;opacity:.9;border-radius:0 2px 2px 0;}
.pg-viewport{flex:1;position:relative;overflow:hidden;padding:0;}
.pg-page{position:absolute;inset:0;padding:14px 22px 8px;font-family:var(--serif);font-size:var(--read-size);line-height:var(--read-lh);color:var(--read-ink);}
.pg-p{margin:0 0 .92em;text-indent:2em;word-break:break-word;letter-spacing:.012em;}
.pg-p.noindent{text-indent:0;}
.pg-p:last-child{margin-bottom:0;}
.pg-h{font-size:1.22em;font-weight:600;line-height:1.55;text-indent:0;margin:0 0 1.05em;letter-spacing:.01em;}
.pg-end{text-indent:0;text-align:center;color:#b9b2a3;font-size:.7em;letter-spacing:.32em;font-family:var(--sans);margin:1.9em 0 0;}
.pg-measure{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;font-family:var(--serif);font-size:var(--read-size);line-height:var(--read-lh);color:var(--read-ink);}
.hl{background:rgba(201,154,75,.26);border-radius:3px;padding:1px 0;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.hl-green{background:rgba(90,150,120,.24);}
.hl-blue{background:rgba(90,130,170,.22);}
.hl-pink{background:rgba(190,110,120,.2);}
.hl.has-note{border-bottom:1px dashed rgba(0,0,0,.28);}
.r-foot{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(0,0,0,.05);font-size:12.5px;}
.r-foot .pgnum{font-variant-numeric:tabular-nums;opacity:.6;min-width:62px;}
.r-foot .spacer{flex:1;}
.r-foot button{padding:7px 11px;border-radius:8px;font-size:12.5px;opacity:.78;}
.r-foot button:hover{background:rgba(0,0,0,.05);opacity:1;}
.pg-tip{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;font-size:11.5px;opacity:.3;font-family:var(--sans);pointer-events:none;}
.sel-bar{position:fixed;z-index:70;background:#23211e;color:#fff;border-radius:10px;padding:5px;display:flex;gap:2px;box-shadow:0 8px 28px -8px rgba(0,0,0,.5);transform:translate(-50%,-100%);}
.sel-bar button{padding:7px 11px;border-radius:7px;font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.sel-bar button:hover{background:rgba(255,255,255,.14);}
.sel-dot{width:13px;height:13px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
.sel-arrow{position:fixed;z-index:69;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #23211e;transform:translateX(-50%);}

/* ---------- 弹层 ---------- */
.mask{position:fixed;inset:0;background:rgba(24,21,17,.36);z-index:64;opacity:0;pointer-events:none;transition:.24s;}
.mask.open{opacity:1;pointer-events:auto;}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:66;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -8px 40px -12px rgba(0,0,0,.28);transform:translateY(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);max-height:86vh;overflow:auto;padding-bottom:calc(14px + env(safe-area-inset-bottom));}
.sheet.open{transform:none;}
.sheet-head{position:sticky;top:0;background:#fff;display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);z-index:2;}
.sheet-head h3{font-family:var(--serif);font-size:16px;margin:0;font-weight:600;flex:1;}
.sheet-body{padding:16px 18px;}
.sheet-close{color:var(--ink-3);font-size:20px;line-height:1;}
.set-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.set-label{font-size:13px;color:var(--ink-3);width:44px;flex:0 0 44px;}
.seg{display:flex;gap:8px;flex:1;}
.seg button{flex:1;padding:9px 0;border-radius:9px;border:1px solid var(--line);font-size:13.5px;color:var(--ink-2);background:var(--card);}
.seg button.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:500;}
.swatch{width:32px;height:32px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.swatch.on{border-color:var(--accent);}

/* 登录弹窗 */
.modal{position:fixed;z-index:68;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);width:min(400px,calc(100vw - 32px));background:#fff;border-radius:18px;padding:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.24s;}
.modal.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
.modal h2{font-family:var(--serif);font-size:19px;margin:0 0 6px;font-weight:600;}
.modal p{font-size:12.5px;color:var(--ink-3);margin:0 0 16px;line-height:1.7;}
.modal .btn{width:100%;padding:11px;margin-top:12px;}

/* ---------- 管理 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 20px;}
.stat-cell{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 14px;}
.stat-cell b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;}
.stat-cell span{font-size:11.5px;color:var(--ink-3);}
.adm-row{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--card);border:1px solid var(--line);border-radius:11px;margin-bottom:8px;}
.adm-row .t{flex:1;min-width:0;}
.adm-row .t b{font-size:14px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--serif);}
.adm-row .t span{font-size:11.5px;color:var(--ink-3);}
.adm-row .tag{font-size:11px;}

@media (max-width:759px){.hide-sm{display:none}}

/* toast */
.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,14px);background:rgba(30,28,25,.93);color:#fff;font-size:13px;padding:10px 18px;border-radius:999px;z-index:90;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap;max-width:88vw;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(8px);}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* 加载 */
.skeleton{background:linear-gradient(90deg,#f1ede5 25%,#f7f4ee 37%,#f1ede5 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:10px;}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- 桌面 ---------- */
@media (min-width:760px){
  body{background:var(--paper);padding-bottom:0;}
  .topnav{display:flex;}
  .tabbar{display:none;}
  .hero{padding:44px 0 8px;text-align:center;}
  .hero h1{font-size:34px;}
  .hero p{font-size:15px;}
  .search{max-width:520px;margin:0 auto;}
  .chips{justify-content:center;padding:20px 0 6px;}
  .grid{grid-template-columns:repeat(4,1fr);gap:20px 18px;}
  .cover-title{font-size:22px;}
  .card-title{font-size:16.5px;}
  .rowlist{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
  .sec-title{margin:36px 0 15px;font-size:19px;}
  .detail-head{gap:26px;padding-top:6px;}
  .detail-head .cover{width:148px;flex:0 0 148px;}
  .detail-info h1{font-size:27px;}
  .detail-body{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;}
  .pg-page{padding:20px 40px 10px;}
  .reader{max-width:820px;margin:0 auto;box-shadow:0 0 70px rgba(0,0,0,.09);}
  .sheet{left:auto;right:24px;bottom:24px;width:380px;border-radius:16px;box-shadow:0 20px 60px -20px rgba(0,0,0,.35);max-height:76vh;}
  .sheet-head{border-radius:16px 16px 0 0;}
  .sel-bar{font-size:13px;}
  .up-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
  .stat-grid{grid-template-columns:repeat(4,1fr);}
  #app{max-width:1120px;margin:0 auto;}
  body.reading #app{max-width:none;margin:0;}
  .shelf-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
  .toast{bottom:40px;}
}
@media (min-width:1024px){ .grid{grid-template-columns:repeat(5,1fr);} }