/* 哈哈小说 · 阅读体验样式
   设计基线：阅读优先 / 克制配色(Restrained) / 衬线正文×无衬线UI / 段评不打扰主线
   主题：纸白 light · 暖褐 sepia · 夜间 dark（localStorage 记忆）
   无障碍：AA 对比 / focus-visible / 焦点陷阱 / prefers-reduced-motion / 触屏可达 */

:root{
  --accent:#c9762b; --accent-soft:#e8a05a; --accent-ink:#8a4e16;
  --bg:#f7f4ee; --bg-elev:#fffdf9; --bg-sink:#efe9df;
  --ink:#23201b; --ink-2:#514b42; --ink-3:#756e62;          /* ink-3 收紧到 AA(≥4.5:1 on bg) */
  --line:#e4ddd0; --line-2:#d6ccba;
  --good:#3f7d57; --warn:#b8442c;
  --maxw:40rem; --radius:14px;
  --shadow-sm:0 1px 2px rgba(40,30,15,.06),0 2px 6px rgba(40,30,15,.07);   /* 交互元素：≤8px blur，不与边框并用成 ghost-card */
  --shadow:0 6px 24px rgba(40,30,15,.10),0 1px 2px rgba(40,30,15,.05);     /* 抬升面：抽屉/模态/图 */
  --serif:"Noto Serif SC","Songti SC","Source Han Serif SC",ui-serif,Georgia,serif;
  --sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif;
  --fs:1.125rem; --lh:1.95;
  --ease:cubic-bezier(.22,.61,.21,1);          /* ease-out-quint，自然缓出 */
  /* 语义 z 轴 */
  --z-ad:1; --z-topbar:40; --z-progress:50; --z-mask:60; --z-drawer:61; --z-modal-mask:80; --z-modal:81; --z-toast:90; --z-restore:55;
}
:root[data-theme="dark"]{
  --accent:#e8a05a; --accent-soft:#c9762b; --accent-ink:#f0c08a;
  --bg:#15130f; --bg-elev:#1d1a15; --bg-sink:#100e0b;
  --ink:#ece6da; --ink-2:#bcb5a6; --ink-3:#928b7c;
  --line:#2a261f; --line-2:#39342b;
  --good:#5cae7d; --warn:#e0795e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 10px 34px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4);
}
:root[data-theme="sepia"]{
  --bg:#ece0c8; --bg-elev:#f5ecd6; --bg-sink:#e2d4b8;
  --ink:#33291b; --ink-2:#5d4e36; --ink-3:#776545; --line:#d9c9a8; --line-2:#cbb78c;
  --accent:#b3661f; --accent-ink:#7c4413;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .3s ease,color .3s ease;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
::selection{background:var(--accent-soft); color:#1a1206}

/* 统一可见焦点环（键盘）——绝不裸删 outline */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
:focus:not(:focus-visible){outline:none}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:var(--z-topbar); display:flex; align-items:center; gap:.5rem;
  height:54px; padding:0 max(.85rem,env(safe-area-inset-left)); background:color-mix(in srgb,var(--bg-elev) 84%,transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line);
  transition:transform .35s var(--ease);
}
.topbar.hide{transform:translateY(-100%)}
.brand{display:flex; align-items:center; gap:.5rem; font-family:var(--serif); font-weight:700; letter-spacing:.01em; font-size:1.05rem}
.brand .mark{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft)); color:#fff; font-size:15px; font-weight:700}
.topbar .spacer{flex:1}
.iconbtn{display:grid;place-items:center;width:40px;height:40px;border:none;background:transparent;color:var(--ink-2);
  border-radius:10px;cursor:pointer;font-size:18px;transition:background .15s,color .15s; -webkit-tap-highlight-color:transparent}
.iconbtn:hover{background:var(--bg-sink);color:var(--ink)}
.iconbtn:active{transform:scale(.94)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--line-2);background:var(--bg-elev);
  color:var(--ink);padding:.5rem .9rem;border-radius:999px;font:inherit;font-size:.9rem;cursor:pointer;min-height:40px;
  transition:transform .12s var(--ease),box-shadow .15s,border-color .15s,background .15s; -webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--accent-soft)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.primary{background:var(--accent);border-color:transparent;color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.04)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--bg-sink);box-shadow:none}

/* ---------- 阅读容器 ---------- */
.reader{max-width:var(--maxw); margin:0 auto; padding:2.2rem 1.25rem 5rem}
.chap-meta{color:var(--ink-3); font-size:.82rem; letter-spacing:.03em; margin-bottom:.4rem}
.chap-title{font-family:var(--serif); font-weight:700; font-size:1.7rem; line-height:1.3; margin:.1rem 0 1.4rem; letter-spacing:.01em; text-wrap:balance}
.article{font-family:var(--serif); font-size:var(--fs); line-height:var(--lh); color:var(--ink); text-wrap:pretty}
.article h2{font-size:1.28rem; margin:2.3rem 0 1rem; font-weight:700; letter-spacing:.01em; text-wrap:balance}
.article h3{font-size:1.08rem; margin:1.8rem 0 .8rem; color:var(--ink-2); text-wrap:balance}
.article hr{border:none; text-align:center; margin:2rem 0; color:var(--ink-3)}
.article hr::before{content:"· · ·"; letter-spacing:.6em}
.article .fig{margin:1.8rem 0; text-align:center}
.article .fig img{border-radius:10px; margin:0 auto; box-shadow:var(--shadow); max-height:78vh; width:auto}
.article .fig figcaption{font-family:var(--sans); font-size:.82rem; color:var(--ink-3); margin-top:.5rem}

/* 段落 + 段评气泡 */
.para{position:relative; margin:0 0 1.25rem; padding-right:2.7rem}
.para:last-child{margin-bottom:0}
.para-flash{border-radius:8px; box-shadow:0 0 0 .55rem color-mix(in srgb,var(--accent-soft) 18%,transparent); animation:paraFlash 2.2s var(--ease)}
@keyframes paraFlash{0%{background:color-mix(in srgb,var(--accent-soft) 30%,transparent)} 100%{background:transparent; box-shadow:0 0 0 .55rem transparent}}
.seg{position:absolute; right:-.15rem; bottom:.05rem; display:inline-flex; align-items:center; gap:.18rem;
  min-width:1.95rem; height:1.65rem; padding:0 .44rem; border:1px solid var(--line-2); border-radius:999px;
  background:var(--bg-elev); color:var(--ink-3); font-family:var(--sans); font-size:.74rem; cursor:pointer;
  opacity:0; transform:translateX(5px); transition:opacity .18s var(--ease),transform .18s var(--ease),color .15s,border-color .15s,background .15s;
  -webkit-tap-highlight-color:transparent}
.para:hover .seg,.seg.has,.seg:focus-visible{opacity:1; transform:none}
.seg.has{color:var(--accent-ink); border-color:var(--accent-soft); background:color-mix(in srgb,var(--accent-soft) 16%,var(--bg-elev)); font-weight:600}
.seg:hover{color:var(--accent); border-color:var(--accent)}
.seg .ico{font-size:.82rem; line-height:1}
/* 触屏没有 hover：气泡常驻可见、加大触达 */
@media (hover:none),(pointer:coarse){
  .seg{opacity:.9; transform:none; min-width:2.3rem; height:2rem; right:-.1rem}
}

/* 章节导航 */
.chap-nav{display:flex; gap:.8rem; max-width:var(--maxw); margin:2.5rem auto 0; padding:0 1.25rem}
.chap-nav a{flex:1; padding:.9rem 1rem; border:1px solid var(--line); border-radius:12px; background:var(--bg-elev);
  color:var(--ink-2); font-size:.92rem; min-height:44px; transition:border-color .15s,transform .12s var(--ease),color .15s}
.chap-nav a:hover{border-color:var(--accent-soft); color:var(--ink); transform:translateY(-1px)}
.chap-nav a.next{text-align:right}
.chap-nav a .k{display:block; font-size:.72rem; color:var(--ink-3); margin-bottom:.15rem}

/* 阅读页底部常驻翻页条 */
.readbar{position:fixed; left:0; right:0; bottom:0; z-index:var(--z-topbar); display:flex; align-items:stretch;
  height:calc(50px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--bg-elev) 90%,transparent); backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); border-top:1px solid var(--line); transition:transform .35s var(--ease)}
.readbar.hide{transform:translateY(115%)}
.readbar a,.readbar span{flex:1; display:flex; align-items:center; justify-content:center; gap:.25rem; font-size:.92rem;
  color:var(--ink-2); -webkit-tap-highlight-color:transparent; transition:color .15s,background .15s}
.readbar a:hover,.readbar a:active{color:var(--accent); background:var(--bg-sink)}
.readbar .rb-cat{flex:0 0 24%; border-left:1px solid var(--line); border-right:1px solid var(--line); color:var(--ink-3); font-size:.86rem}
.readbar .disabled{color:var(--ink-3); opacity:.4}
body:has(.readbar) footer.site{margin-bottom:calc(56px + env(safe-area-inset-bottom))}

/* 进度条 */
.progress{position:fixed; left:0; top:0; height:3px; width:0; z-index:var(--z-progress);
  background:linear-gradient(90deg,var(--accent),var(--accent-soft)); transition:width .1s linear}

/* ---------- 广告位 ---------- */
.ad{position:relative; margin:2rem 0; border:1px solid var(--line-2); border-radius:12px; background:var(--bg-sink);
  min-height:88px; display:grid; place-items:center; color:var(--ink-3); font-family:var(--sans); font-size:.82rem; overflow:hidden}
.ad:not([data-filled]){border-style:dashed}
.ad[data-filled]{background:var(--bg-elev)}
.ad .label{position:absolute; top:.45rem; right:.6rem; font-size:.6rem; letter-spacing:.14em; color:var(--ink-3); opacity:.75}

/* ---------- 首页书架 ---------- */
.hero{max-width:62rem; margin:0 auto; padding:3rem 1.25rem 1rem}
.hero .kicker{color:var(--accent-ink); font-size:.8rem; letter-spacing:.16em}
.hero h1{font-family:var(--serif); font-size:clamp(2rem,5vw,3.1rem); line-height:1.16; margin:.6rem 0 1rem; letter-spacing:.005em; text-wrap:balance}
.hero p{color:var(--ink-2); max-width:38ch; font-size:1.02rem; line-height:1.85; text-wrap:pretty}
.resume{display:flex; align-items:center; gap:.7rem; margin:1.5rem 0 0; padding:.8rem 1rem; max-width:34rem;
  border:1px solid var(--accent-soft); border-radius:14px; background:color-mix(in srgb,var(--accent-soft) 12%,var(--bg-elev));
  color:var(--ink); transition:transform .12s var(--ease),box-shadow .15s}
.resume:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.resume .ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;font-size:.68rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));color:#fff}
.resume .rt{flex:1; font-size:.92rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.resume .rgo{color:var(--accent-ink); font-size:.85rem; font-weight:600; flex:none}
.hero .cta{display:flex; gap:.7rem; margin-top:1.6rem; flex-wrap:wrap}
.stats{display:flex; gap:1.8rem; margin-top:1.9rem; color:var(--ink-3); font-size:.85rem; flex-wrap:wrap}
.stats b{display:block; font-family:var(--serif); font-size:1.55rem; color:var(--ink); line-height:1; margin-bottom:.15rem}
.section{max-width:62rem; margin:2.5rem auto; padding:0 1.25rem}
.section h2{font-family:var(--serif); font-size:1.4rem; margin:0 0 1.1rem; display:flex; align-items:baseline; gap:.6rem}
.section h2 .more{margin-left:auto; font-size:.85rem; color:var(--ink-3); font-family:var(--sans); font-weight:400}
/* 目录：可折叠卷（native <details>），修复章节摘要溢出 */
.vol{margin-bottom:.7rem; border:1px solid var(--line); border-radius:12px; background:var(--bg-elev)}
.vol > summary{list-style:none; cursor:pointer; padding:.85rem 1.05rem; font-size:.9rem; font-weight:600;
  color:var(--accent-ink); display:flex; align-items:center; gap:.5rem; border-radius:12px}
.vol > summary::-webkit-details-marker{display:none}
.vol > summary::after{content:"▾"; margin-left:auto; color:var(--ink-3); font-weight:400; transition:transform .2s var(--ease)}
.vol[open] > summary::after{transform:rotate(180deg)}
.vol > summary:hover{background:var(--bg-sink)}
.vol .vc{color:var(--ink-3); font-weight:400; font-size:.8rem}
.chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.55rem; padding:.1rem .8rem .85rem}
.chip{display:flex; gap:.7rem; align-items:center; padding:.6rem .75rem; border:1px solid var(--line); border-radius:10px;
  background:var(--bg); min-height:54px; min-width:0; transition:border-color .15s,transform .12s var(--ease),background .15s}
.chip:hover{border-color:var(--accent-soft); transform:translateY(-1px); background:var(--bg-elev)}
.chip .n{font-family:var(--serif); color:var(--ink-3); font-size:.88rem; min-width:2.3rem; flex:none; font-variant-numeric:tabular-nums}
.chip .ct{min-width:0; flex:1; display:flex; flex-direction:column; gap:.12rem}
.chip .t{font-weight:600; font-size:.94rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip .s{color:var(--ink-3); font-size:.77rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- 段评 / 评论抽屉 ---------- */
.drawer-mask{position:fixed; inset:0; background:rgba(20,14,4,.42); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease); z-index:var(--z-mask)}
.drawer-mask.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; right:0; top:0; bottom:0; width:min(420px,92vw); background:var(--bg-elev); z-index:var(--z-drawer);
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .34s var(--ease);
  box-shadow:var(--shadow); border-left:1px solid var(--line)}
.drawer.open{transform:none}
@media(max-width:560px){
  .drawer{width:100vw; top:auto; height:86vh; border-radius:18px 18px 0 0; border-left:none; transform:translateY(100%)}
  .drawer.open{transform:none}
  .drawer-head{padding-top:1.4rem}
  .drawer-head::before{content:""; position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:999px; background:var(--line-2)}        /* 下拉把手 */
}
.drawer-head{position:relative; display:flex; align-items:center; gap:.6rem; padding:1rem 1.1rem; border-bottom:1px solid var(--line)}
.drawer-head .h{font-family:var(--serif); font-weight:700; font-size:1.05rem}
.drawer-head .sub{color:var(--ink-3); font-size:.78rem}
.quote{margin:.9rem 1.1rem 0; padding:.7rem .9rem .7rem 2.1rem; background:var(--bg-sink); border-radius:10px; position:relative;
  color:var(--ink-2); font-family:var(--serif); font-size:.9rem; line-height:1.7; max-height:6.5rem; overflow:auto}
.quote::before{content:"\201C"; position:absolute; left:.5rem; top:.2rem; font-family:var(--serif); font-size:1.7rem; color:var(--accent-soft); line-height:1}
.clist{flex:1; overflow:auto; padding:.4rem 1.1rem 1rem; overscroll-behavior:contain}
.citem{padding:.85rem 0; border-bottom:1px solid var(--line)}
.citem:last-child{border-bottom:none}
.citem .meta{display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem}
.cavatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:700;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft))}
.cname{font-weight:600; font-size:.88rem}
.ctime{color:var(--ink-3); font-size:.74rem; margin-left:auto}
.cbody{font-size:.95rem; line-height:1.7; color:var(--ink); white-space:pre-wrap; word-break:break-word}
.cactions{display:flex; gap:1.1rem; margin-top:.5rem; color:var(--ink-3); font-size:.78rem}
.cactions button{border:none;background:none;color:inherit;cursor:pointer;font:inherit;display:inline-flex;align-items:center;gap:.28rem;
  padding:.2rem 0; min-height:32px; transition:color .15s}
.cactions button:hover{color:var(--accent)}
.cactions button.on{color:var(--accent); font-weight:600}
.empty{color:var(--ink-3); text-align:center; padding:2.6rem 1rem; font-size:.9rem; line-height:1.7}
/* 盖楼回复 + 展开 + 加载更多 */
.cexpand{margin-top:.5rem; border:none; background:none; color:var(--accent-ink); font:inherit; font-size:.8rem; cursor:pointer; padding:.15rem 0}
.cexpand:hover{color:var(--accent)}
.creplies{margin:.5rem 0 0 .6rem; padding-left:.85rem; border-left:1px solid var(--line)}
.creply{padding:.6rem 0; border-bottom:1px dashed var(--line)}
.creply:last-child{border-bottom:none}
.creply .cavatar{width:24px;height:24px;font-size:.7rem}
.creply .cbody{font-size:.9rem}
.cmore{display:block; width:100%; margin:.6rem 0 .2rem; padding:.6rem; border:1px solid var(--line); border-radius:10px;
  background:var(--bg-elev); color:var(--ink-2); font:inherit; font-size:.85rem; cursor:pointer; transition:border-color .15s,background .15s}
.cmore:hover{border-color:var(--accent-soft); background:var(--bg-sink)}
.replyctx{display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem; padding:.4rem .6rem; border-radius:8px;
  background:color-mix(in srgb,var(--accent-soft) 14%,var(--bg-sink)); color:var(--ink-2); font-size:.82rem}
.replyctx b{color:var(--accent-ink); font-weight:600}
.replyctx button{margin-left:auto; border:none; background:none; color:var(--ink-3); cursor:pointer; font-size:.9rem; line-height:1; padding:.1rem .2rem}
.replyctx button:hover{color:var(--warn)}
/* 列表加载骨架 */
.skel{padding:.85rem 0; border-bottom:1px solid var(--line)}
.skel .bar{height:.7rem; border-radius:6px; background:linear-gradient(90deg,var(--bg-sink) 25%,var(--line) 37%,var(--bg-sink) 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease infinite; margin:.45rem 0}
.skel .bar.w30{width:30%} .skel .bar.w90{width:90%} .skel .bar.w70{width:70%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.composer{border-top:1px solid var(--line); padding:.8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom)); background:var(--bg-elev)}
.composer textarea{width:100%; border:1px solid var(--line-2); border-radius:12px; background:var(--bg); color:var(--ink);
  font:inherit; font-size:.95rem; padding:.7rem .8rem; resize:none; min-height:2.7rem; max-height:8rem; line-height:1.6}
.composer textarea::placeholder{color:var(--ink-3)}
.composer textarea:focus{outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-soft) 22%,transparent)}
.composer .row{display:flex; align-items:center; gap:.6rem; margin-top:.55rem}
.composer .count{color:var(--ink-3); font-size:.75rem; margin-left:auto; font-variant-numeric:tabular-nums}
.composer .count.over{color:var(--warn)}
.composer .hint{color:var(--ink-3); font-size:.8rem}
.composer .hint a{color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px}

/* ---------- 模态（登录/注册） ---------- */
.modal-mask{position:fixed; inset:0; background:rgba(20,14,4,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .2s var(--ease); z-index:var(--z-modal-mask); padding:1rem}
.modal-mask.open{opacity:1; pointer-events:auto}
.modal{width:min(380px,94vw); background:var(--bg-elev); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  padding:1.6rem; transform:translateY(10px) scale(.98); transition:transform .24s var(--ease); z-index:var(--z-modal)}
.modal-mask.open .modal{transform:none}
.modal h3{font-family:var(--serif); font-size:1.3rem; margin:0 0 .3rem}
.modal .sub{color:var(--ink-2); font-size:.85rem; margin-bottom:1.1rem}
.field{margin-bottom:.8rem}
.field label{display:block; font-size:.8rem; color:var(--ink-2); margin-bottom:.3rem}
.field input{width:100%; border:1px solid var(--line-2); border-radius:11px; background:var(--bg); color:var(--ink); font:inherit; padding:.65rem .8rem; min-height:44px}
.field input::placeholder{color:var(--ink-3)}
.field input:focus{outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-soft) 22%,transparent)}
.modal .err{color:var(--warn); font-size:.82rem; min-height:1.1rem; margin:.2rem 0 .4rem}
.modal .err:empty{min-height:0; margin:0}
.modal .switch{text-align:center; color:var(--ink-2); font-size:.84rem; margin-top:.9rem}
.modal .switch a{color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.modal .ts{margin:.4rem 0 .2rem; min-height:0}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:2rem; transform:translateX(-50%) translateY(1rem); background:var(--ink); color:var(--bg);
  padding:.7rem 1.1rem; border-radius:999px; font-size:.88rem; opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease); z-index:var(--z-toast); box-shadow:var(--shadow); max-width:88vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%)}

/* 回到上次位置的浮钮 */
.restore{position:fixed; left:50%; transform:translateX(-50%); bottom:1.4rem; z-index:var(--z-restore)}

/* 搜索页 */
.searchbox{width:100%; font:inherit; font-size:1.05rem; padding:.85rem 1.1rem; border:1px solid var(--line-2); border-radius:14px;
  background:var(--bg-elev); color:var(--ink); box-shadow:var(--shadow-sm)}
.searchbox::placeholder{color:var(--ink-3)}
.searchbox:focus{outline:none; border-color:var(--accent-soft); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-soft) 22%,transparent)}
.searchcnt{color:var(--ink-3); font-size:.84rem; margin-top:.7rem}
mark{background:color-mix(in srgb,var(--accent-soft) 40%,transparent); color:inherit; border-radius:3px; padding:0 .1em}

/* 我的主页 */
.profile{display:flex; align-items:center; gap:1rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:14px; background:var(--bg-elev)}
.cavatar.big{width:54px; height:54px; font-size:1.5rem; flex:none}
.pname{font-family:var(--serif); font-weight:700; font-size:1.2rem; display:flex; align-items:center; gap:.5rem}
.pmeta{color:var(--ink-3); font-size:.84rem; margin-top:.25rem}
.badge{display:inline-block; font-size:.66rem; font-weight:600; padding:.1rem .4rem; border-radius:999px; vertical-align:middle;
  background:color-mix(in srgb,var(--accent-soft) 22%,var(--bg-sink)); color:var(--accent-ink)}
.badge.warn{background:color-mix(in srgb,var(--warn) 16%,var(--bg-sink)); color:var(--warn)}
.badge.bad{background:var(--bg-sink); color:var(--ink-3)}
.myitem{display:block; padding:.9rem 0; border-bottom:1px solid var(--line)}
.myitem:hover .mybody{color:var(--accent-ink)}
.mybody{font-size:.96rem; line-height:1.7; color:var(--ink); white-space:pre-wrap; word-break:break-word; transition:color .15s}
.mymeta{color:var(--ink-3); font-size:.78rem; margin-top:.35rem}

/* 字号档位 */
:root[data-fs="s"]{--fs:1rem;--lh:1.85}
:root[data-fs="l"]{--fs:1.25rem;--lh:2.0}
:root[data-fs="xl"]{--fs:1.4rem;--lh:2.05}

footer.site{max-width:62rem;margin:3rem auto 2rem;padding:1.4rem 1.25rem;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.8rem;line-height:1.9}

/* ---------- 降级动画 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .drawer{transition:opacity .15s ease} .drawer:not(.open){transform:none; opacity:0; pointer-events:none}
  .drawer.open{opacity:1}
  .skel .bar{animation:none; background:var(--bg-sink)}
}