/* 中文标题字体：霞鹜文楷，按本站用字子集化（1272 字 / 278KB）
   原先从 CDN 拉完整分片包，首页要下 1.3MB、栏目页 2MB */
@font-face{
  font-family:"LXGW WenKai";
  src:url("/assets/fonts/lxgw-wenkai-subset.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* --ink-3 是域名、编号、页脚这类小字（11px 上下），对纸底要过 WCAG AA：
     原值 #8b8374 只有 3.3:1，压深到 #736c5e 后是 4.6:1，层级仍明显浅于 --ink-2。 */
  --paper:#f5f1e8; --surface:#fffdf8; --ink:#17130e; --ink-2:#5c5548;
  --ink-3:#736c5e; --line:#ded5c4; --line-soft:#ece5d6;
  --accent:#b2382b; --accent-soft:rgba(178,56,43,.075);
  --serif:"LXGW WenKai","Kaiti SC",KaiTi,STKaiti,"Songti SC",SimSun,serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Cascadia Code","JetBrains Mono",Consolas,"SF Mono",ui-monospace,monospace;
  --maxw:1240px;
}
html[data-theme="dark"]{
  --paper:#141210; --surface:#1b1815; --ink:#ece5d8; --ink-2:#a79e8e;
  --ink-3:#8a8172; --line:#302b24; --line-soft:#252119;
  --accent:#e0664f; --accent-soft:rgba(224,102,79,.10);
  /* 暗色下强调色偏亮，按钮上的白字只有 3.4:1，换成深墨字（5.5:1） */
  --btn-ink:#141210;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --paper:#141210; --surface:#1b1815; --ink:#ece5d8; --ink-2:#a79e8e;
    --ink-3:#8a8172; --line:#302b24; --line-soft:#252119;
    --accent:#e0664f; --accent-soft:rgba(224,102,79,.10);
    --btn-ink:#141210;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
::selection{background:var(--accent); color:#fff}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px; position:relative; z-index:1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}

/* ── 顶栏 ───────────────────────────── */
.bar{border-bottom:1px solid var(--line); backdrop-filter:blur(6px); position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent)}
.bar .wrap{display:flex; align-items:center; gap:20px; height:60px}
.brand{font-family:var(--serif); font-size:19px; letter-spacing:.02em; display:flex; align-items:flex-end; gap:9px}
.brand b{font-weight:400}
/* 顶栏品牌用 Logo 图（透明底锁标）代替站名字样，高度按 60px 顶栏留出上下余量 */
.brand-logo{display:block; height:44px; width:auto}
/* 「索引」小印章贴着 Logo 的下沿（与 Logo 底边齐平），不再垂直居中 */
.brand .seal{font-family:var(--mono); font-size:10px; color:var(--accent); border:1px solid currentColor;
  padding:1px 4px; border-radius:2px; letter-spacing:.06em}
.bar .spacer{flex:1}
.bar .meta{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.02em}
.bar .meta b{color:var(--ink-2); font-weight:400}
.bar .nav{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.02em;
  border-bottom:1px solid transparent; padding-bottom:1px}
.bar .nav:hover{color:var(--accent); border-bottom-color:var(--accent)}
.tgl{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  padding:0; color:var(--ink-3); border:1px solid var(--line); background:none;
  border-radius:2px; cursor:pointer; transition:color .18s, border-color .18s}
.tgl:hover{color:var(--accent); border-color:var(--accent)}
.tgl svg{width:15px; height:15px; display:block}
.tgl .i-sun{display:none}
html[data-theme="dark"] .tgl .i-moon{display:none}
html[data-theme="dark"] .tgl .i-sun{display:block}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .tgl .i-moon{display:none}
  html:not([data-theme="light"]) .tgl .i-sun{display:block}
}

/* ── 首屏 ───────────────────────────── */
.page{display:flex; flex-direction:column}
.hero{order:1; padding:64px 0 0; position:relative}
.side{position:absolute; right:0; top:70px; margin:0; writing-mode:vertical-rl;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.34em; color:var(--ink-3)}
.hero .kicker{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.16em; text-transform:uppercase}
h1{font-family:var(--serif); font-weight:400; margin:14px 0 0;
  font-size:clamp(42px,6.4vw,86px); line-height:1.04; letter-spacing:.005em}
h1 em{font-style:normal; color:var(--accent)}
.lede{margin:22px 0 0; max-width:46ch; color:var(--ink-2); font-size:15.5px; line-height:1.8; text-wrap:pretty}
.rule{display:flex; align-items:center; gap:14px; margin:32px 0 0; max-width:620px}
.rule i{flex:1; height:1px; background:var(--line); display:block}
.rule span{order:-1; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.1em}

/* 搜索 */
.searchbar{order:2; padding:26px 0 34px}
.srch{position:relative; max-width:620px}
.srch input{width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:3px; padding:15px 78px 15px 46px; font-size:15px; font-family:var(--sans); outline:none;
  transition:border-color .2s, box-shadow .2s}
.srch input::placeholder{color:var(--ink-3)}
.srch input:hover{border-color:var(--ink-3)}
.srch input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.srch .ico{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:13px}
/* ⌕ 是提交按钮：清掉按钮默认外观，保持与图标完全一致，点击即提交搜索 */
.srch button.ico{background:none; border:0; padding:0; line-height:1; cursor:pointer; font-family:inherit}
.srch button.ico:hover{color:var(--accent)}
.srch kbd{position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3); border:1px solid var(--line);
  border-bottom-width:2px; border-radius:3px; padding:2px 6px}

/* ── 索引主体 ───────────────────────── */
.index{order:3; display:grid; grid-template-columns:246px minmax(0,1fr);
  border-top:1px solid var(--line); padding:34px 0 64px}
/* 栏目索引侧栏：24 个栏目总高约 1088px、超过一屏——吸顶后尾部的栏目要等页面滚到底才露得出来
   （2026-10-16 用户反馈）。让侧栏自身成为滚动区：依旧吸顶，鼠标移入即可在栏内自由滚动看到最后一项。
   滚动条不用原生的（用户二轮反馈"鼠标压到条带才出现、亮暗切换才闪一下"）：浮动式滚动条环境
   （WebView2、开启系统"自动隐藏滚动条"时的 Chrome/Firefox）里原生滚动条不受页面控制，做不出
   "鼠标在栏目区就显示"；这里直接隐藏原生滚动条，由 app.js 自绘一条细拇指（.spine-sbar/.spine-thumb），
   悬停整个栏目区 / 键盘聚焦 / 拖拽时才淡入显示，离开隐藏。 */
.spine{align-self:start; position:sticky; top:78px; padding-right:30px;
  max-height:calc(100vh - 78px - 16px); overflow-y:auto;
  scrollbar-width:none}
.spine::-webkit-scrollbar{display:none}
/* 自绘滚动条轨道：sticky + 高 0 —— 始终停在可视区顶部且不占布局；
   margin-right 抵消侧栏右内边距，让拇指贴在侧栏右缘（与上面 padding-right:30px 成对，改一个记得改另一个）。 */
.spine-sbar{position:sticky; top:0; z-index:6; height:0; margin-right:-30px; pointer-events:none}
.spine-thumb{position:absolute; right:2px; top:0; width:8px; border-radius:99px;
  background:rgba(17,17,17,.42); opacity:0; transition:opacity .18s;
  pointer-events:auto; touch-action:none}
.spine:hover .spine-thumb, .spine:focus-within .spine-thumb,
.spine-sbar.is-dragging .spine-thumb{opacity:1}
/* 暗色底（深色模式 / 夜航皮肤）换纸色拇指（配色与蓝色强调无关，统一用中性墨/纸色） */
html[data-theme="dark"] .spine-thumb, html[data-skin="night"] .spine-thumb{background:rgba(236,229,216,.40)}
#stage{border-left:1px solid var(--line); padding-left:46px; min-width:0; min-height:62vh; order:3}
/* 不带侧边栏的页面（标签索引 / 搜索 / 404）：主区占满，不留分隔线 */
.page > #stage{border-left:0; padding-left:0}
.spine h2{font-family:var(--mono); font-weight:400; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px}
.spine ol{list-style:none; margin:0; padding:0}
.spine a{display:grid; grid-template-columns:26px 1fr auto; align-items:baseline; gap:9px;
  padding:6px 10px 6px 8px; border-radius:2px; position:relative; transition:background .16s}
.spine .no{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.spine .nm{font-family:var(--serif); font-size:14.5px; color:var(--ink-2)}
.spine .ct{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.spine a:hover{background:var(--accent-soft)}
.spine a:hover .nm{color:var(--ink)}
.spine a:hover .no{color:var(--accent)}
.spine a[aria-current]{background:var(--accent-soft)}
.spine a[aria-current] .no, .spine a[aria-current] .nm{color:var(--accent)}
.spine a[aria-current]::before{content:""; position:absolute; left:0; top:5px; bottom:5px; width:2px; background:var(--accent)}

.ent-head{display:flex; align-items:baseline; gap:16px; padding-bottom:12px; border-bottom:1px solid var(--ink)}
.ent-head .cat{font-family:var(--serif); font-weight:400; font-size:27px; margin:0; letter-spacing:.01em; color:var(--ink)}
.ent-head .no{font-family:var(--mono); font-size:11px; color:var(--accent)}
.ent-head .cnt{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3)}

.list{list-style:none; margin:0; padding:0}
.list li{display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:center; gap:12px;
  border-bottom:1px solid var(--line-soft); padding:10px 6px 10px 2px;
  transition:background .18s, padding-right .26s cubic-bezier(.2,.7,.3,1)}
.list li:hover{background:linear-gradient(90deg,var(--accent-soft),transparent 62%)}
.list .row{display:grid; grid-template-columns:34px 24px minmax(0,1fr) 146px; align-items:center;
  gap:14px; transition:transform .18s}
.list li:hover .row{transform:translateX(2px)}
.list .no{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.list img{width:22px; height:22px; border-radius:3px; filter:grayscale(1) contrast(.9); opacity:.72;
  transition:filter .22s, opacity .22s; background:var(--line-soft)}
.list li:hover img{filter:none; opacity:1}
/* 标题固定单行：站点名超长用省略号截断，右侧标记始终可见。
   标题一旦允许折行，「让宽」动画期间文本列变窄会让它临时折成两行、行高在动画里来回变，
   下面的行跟着上下跳动——这就是列表悬停看起来"抖动"的根因。 */
.list .ttl{font-family:var(--serif); font-size:16.5px; line-height:1.4; display:flex; align-items:baseline;
  min-width:0; transition:color .16s}
.list .ttl .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.list li:hover .ttl{color:var(--accent)}
/* 摘要限两行：一句话要能读完「这个站到底能干什么」。原先单行省略号把句子拦腰截断
   （宽屏也会切掉结尾半句，窄屏只剩前 20 来个字），而且用了 80% 不透明度的次要墨色，
   对比度掉到 4.1:1，不像其它四套皮肤那样用纯 --ink-2。 */
.list .sum{display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  font-size:12.5px; color:var(--ink-2); line-height:1.55; margin-top:3px;
  overflow:hidden; white-space:normal}
/* 悬停截图预览会把被浮层盖住的行临时收窄（padding-right 动画），这些行的摘要
   可能在 1 行与 2 行之间来回翻转，把整列顶得上下跳。给它们冻结固定两行高，
   行高与列宽无关，动画期间纹丝不动。窄屏和两列列表不走这个动画，保持自然高度，
   摘要短的行不会白留一行空位。 */
@media (min-width:1001px) and (hover:hover){
  .list-shell.has-rail .list .sum{min-height:3.1em}
}
.list .dom{font-family:var(--mono); font-size:11px; color:var(--ink-3); text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.list .ext{display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border:1px solid var(--line); border-radius:3px; color:var(--ink-3); font-size:12px;
  opacity:.62; transition:opacity .2s, color .2s, border-color .2s}
.list li:hover .ext{opacity:1; color:var(--accent); border-color:var(--accent)}

/* 首页「常用推荐」：整个列表一行两列（其他列表仍单列）。
   列宽只有一半，所以去掉右侧域名列，把宽度让给标题与简介。 */
.list--cols2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:30px}
.list--cols2 .row{grid-template-columns:28px 22px minmax(0,1fr); gap:11px}
.list--cols2 .dom{display:none}
@media (max-width:780px){
  .list--cols2{grid-template-columns:minmax(0,1fr)}
}

/* 搜索结果 */
.res-head{display:flex; align-items:baseline; gap:12px; padding:0 0 12px; border-bottom:1px solid var(--ink)}
.res-head strong{font-family:var(--serif); font-weight:400; font-size:20px}
.res-head span{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.res-head button{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3);
  background:none; border:1px solid var(--line); border-radius:2px; padding:3px 9px; cursor:pointer}
.res-head button:hover{color:var(--accent); border-color:var(--accent)}
.empty{padding:60px 0; color:var(--ink-3); font-size:14px}

/* ── 页脚 ───────────────────────────── */
footer{border-top:1px solid var(--line); padding:30px 0 46px}
footer .wrap{display:flex; flex-direction:column; gap:9px;
  font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.8}
footer .f-row{display:flex; flex-wrap:wrap; gap:7px 24px; align-items:baseline}
footer .f-row p{margin:0}
footer .f-copyright{align-items:baseline}
footer .f-copyright p{margin:0}
footer .f-copyright ul{margin:0; padding:0; list-style:none}
footer a{color:var(--ink-3); border-bottom:1px solid transparent; padding-bottom:1px}
footer a:hover{color:var(--accent); border-bottom-color:var(--accent)}

/* ── 入场动效 ───────────────────────── */
@keyframes up{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.anim{animation:up .6s cubic-bezier(.2,.7,.3,1) both}
.spine li,.list li{animation:up .5s cubic-bezier(.2,.7,.3,1) both}
@media (prefers-reduced-motion:reduce){ .anim,.spine li,.list li{animation:none} .list li:hover .row{transform:none} }

@media (max-width:1000px){
  .wrap{padding:0 22px}
  .index{gap:34px; grid-template-columns:minmax(0,1fr)}
  .spine{position:static; padding-right:0; max-height:none; overflow:visible}
  #stage{border-left:0; padding-left:0; min-height:0}
  .side{display:none}
  .spine ol{display:grid; grid-template-columns:repeat(2,1fr); gap:0 14px}
  h1{font-size:clamp(38px,10vw,60px)}
  .list .row{grid-template-columns:26px 22px minmax(0,1fr)}
  .list .dom{display:none}
}

/* 窄屏：顶栏收干净、触控目标放大、输入框 16px 防 iOS 缩放 */
@media (max-width:640px){
  .bar .wrap{height:54px; gap:12px}
  .brand{font-size:16.5px; white-space:nowrap; flex:0 0 auto; gap:7px}
  .brand-logo{height:34px}
  .brand .seal{font-size:9px; padding:0 3px; letter-spacing:.02em}
  .bar .meta{display:none}
  .tgl{width:32px; height:32px; flex:0 0 auto}
  .hero{padding:40px 0 26px}
  .lede{font-size:15px; line-height:1.75}
  .rule{max-width:none}
  .srch input{padding:14px 16px 14px 42px; font-size:16px}
  .srch kbd{display:none}
  .index{grid-template-columns:minmax(0,1fr); gap:20px; padding:26px 0 70px}
  .spine{min-width:0; position:sticky; top:54px; z-index:9; background:var(--paper);
    display:flex; overflow-x:auto; overflow-y:hidden; padding:1px 0 0;
    border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .spine::-webkit-scrollbar{display:none}
  .spine h2, .spine-group h3{display:none}
  .spine-group{margin:0; display:contents}
  .spine ol{display:contents}
  .searchbar{order:1; padding:16px 0 20px}
  .hero{order:2; padding:24px 0 0}
  .spine li{flex:0 0 auto}
  .spine a{display:flex; align-items:baseline; gap:6px; padding:11px 12px; border-radius:0}
  .spine .nm{font-size:15px; white-space:nowrap}
  .spine .ct{display:none}
  .spine a:hover, .spine a[aria-current]{background:none}
  .spine a[aria-current]::before{left:0; right:0; top:auto; bottom:0; width:auto; height:2px}
  .list li{padding:12px 2px}
  .list .row{gap:11px}
  .list .ttl{font-size:16px}
  .ent-head .cat{font-size:23px}
}
.spine li:nth-child(1){animation-delay:60ms}
.spine li:nth-child(2){animation-delay:76ms}
.spine li:nth-child(3){animation-delay:92ms}
.spine li:nth-child(4){animation-delay:108ms}
.spine li:nth-child(5){animation-delay:124ms}
.spine li:nth-child(6){animation-delay:140ms}
.spine li:nth-child(7){animation-delay:156ms}
.spine li:nth-child(8){animation-delay:172ms}
.spine li:nth-child(9){animation-delay:188ms}
.spine li:nth-child(10){animation-delay:204ms}
.spine li:nth-child(11){animation-delay:220ms}
.spine li:nth-child(12){animation-delay:236ms}
.spine li:nth-child(13){animation-delay:252ms}
.spine li:nth-child(14){animation-delay:268ms}
.spine li:nth-child(15){animation-delay:284ms}
.spine li:nth-child(16){animation-delay:300ms}
.spine li:nth-child(17){animation-delay:316ms}
.spine li:nth-child(18){animation-delay:332ms}
.spine li:nth-child(19){animation-delay:348ms}
.spine li:nth-child(20){animation-delay:364ms}
.spine li:nth-child(21){animation-delay:380ms}
.spine li:nth-child(22){animation-delay:396ms}
.spine li:nth-child(23){animation-delay:412ms}
.spine li:nth-child(24){animation-delay:428ms}
.list li:nth-child(1){animation-delay:140ms}
.list li:nth-child(2){animation-delay:160ms}
.list li:nth-child(3){animation-delay:180ms}
.list li:nth-child(4){animation-delay:200ms}
.list li:nth-child(5){animation-delay:220ms}
.list li:nth-child(6){animation-delay:240ms}
.list li:nth-child(7){animation-delay:260ms}
.list li:nth-child(8){animation-delay:280ms}
.list li:nth-child(9){animation-delay:300ms}
.list li:nth-child(10){animation-delay:320ms}
.list li:nth-child(11){animation-delay:340ms}
.list li:nth-child(12){animation-delay:360ms}
.list li:nth-child(13){animation-delay:380ms}
.list li:nth-child(14){animation-delay:400ms}
.list li:nth-child(15){animation-delay:420ms}
.list li:nth-child(16){animation-delay:440ms}
/* ─────────────────────────────────────────────
   栏目页 / 详情页：新增版式零件
   ───────────────────────────────────────────── */

/* 面包屑 */
.crumbs{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.02em}
.crumbs a{color:var(--ink-3); border-bottom:1px solid transparent; padding-bottom:1px}
.crumbs a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.crumbs i{font-style:normal; margin:0 7px; color:var(--line)}
.crumbs b{font-weight:400; color:var(--ink-2)}

/* 栏目页首屏：比首页矮一档 */
.cat-hero{order:1; padding:52px 0 0; position:relative}
.cat-hero h1{font-size:clamp(34px,4.4vw,54px); margin:18px 0 0; line-height:1.1; letter-spacing:.01em}
.cat-hero h1 .no{font-family:var(--mono); font-size:.34em; color:var(--accent);
  vertical-align:.95em; margin-right:.55em; letter-spacing:.04em}
.intro{margin:20px 0 0; max-width:62ch; color:var(--ink-2); font-size:14.5px;
  line-height:1.85; text-wrap:pretty}
.cat-meta{margin:24px 0 0; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  display:flex; flex-wrap:wrap; gap:8px 22px}

/* 详情页 */
.detail{order:1; padding:44px 0 76px}
.detail h1{font-size:clamp(30px,3.8vw,46px); margin:18px 0 0; line-height:1.12}
.detail .dom{margin:18px 0 0; font-family:var(--mono); font-size:12.5px; color:var(--ink-3)}
.detail .body{margin:34px 0 0; max-width:64ch; color:var(--ink); font-size:16px; line-height:1.9}
.detail .body p{margin:0 0 1em}
.detail .body img{display:block; max-width:100%; height:auto}
/* 站点描述：排在正文前面的那段说明，用左侧色条 + 次要墨色和正文区分开（读起来像编辑的引言，不是正文）。 */
.detail .body .lead{margin:0 0 1.7em; padding:2px 0 2px 16px; border-left:2px solid var(--accent-soft);
  color:var(--ink-2); font-size:15px; line-height:1.85}
.btn{display:inline-flex; align-items:center; gap:10px; margin:30px 0 0;
  background:var(--accent); color:var(--btn-ink,#fff); font-size:15px; padding:13px 26px;
  border-radius:3px; transition:transform .18s, box-shadow .18s}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 22px var(--accent-soft)}
.btn em{font-style:normal; font-family:var(--mono); font-size:12px; opacity:.85}
.facts{margin:44px 0 0; border-top:1px solid var(--ink); padding-top:16px;
  display:grid; grid-template-columns:104px 1fr; gap:12px 20px; font-size:13.5px}
.facts dt{font-family:var(--mono); font-size:11px; color:var(--ink-3); padding-top:3px}
.facts dd{margin:0; color:var(--ink-2); line-height:1.7}
.facts dd a{color:var(--accent); border-bottom:1px solid var(--accent-soft)}
.facts dd a:hover{border-bottom-color:var(--accent)}
.rel{margin:60px 0 0}
.rel h2{font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}
.detail-wrap{max-width:840px}
.detail .srch{margin:0}

@media (max-width:1000px){
  .cat-hero{padding:34px 0 0}
  .detail{padding:30px 0 64px}
}

@media (max-width:640px){
  .cat-hero{order:2; padding:22px 0 0}
  .detail{order:1; padding:22px 0 56px}
  .cat-hero h1{font-size:clamp(30px,9vw,44px)}
  .intro{font-size:14px; line-height:1.8}
  .cat-meta{gap:6px 18px}
  .detail .body{font-size:15.5px; line-height:1.85; margin-top:26px}
  .btn{width:100%; justify-content:center}
  .facts{grid-template-columns:1fr; gap:0}
  .facts dt{padding-top:14px}
  .rel{margin-top:44px}
}

/* 列表小标题（栏目页） */
.list-head{display:flex; align-items:baseline; gap:12px; padding:0 0 12px;
  border-bottom:1px solid var(--ink); font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.list-head .hint{margin-left:auto}
.cat-meta a{color:var(--accent); border-bottom:1px solid var(--accent-soft)}
.cat-meta a:hover{border-bottom-color:var(--accent)}

/* 无图标条目的占位块 */
.noicon{display:block; width:22px; height:22px; border-radius:3px; background:var(--line-soft)}
.empty code{font-family:var(--mono); font-size:12.5px; background:var(--line-soft);
  padding:2px 6px; border-radius:3px}

/* 栏目简介里的强调 */
.intro strong{color:var(--ink); font-weight:600}

/* 栏目页底部：常见问题（问题 + 答案，同步进 FAQPage 结构化数据） */
.faq{order:4; padding:0 0 76px}
.faq h2{font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 6px; padding:28px 0 0;
  border-top:1px solid var(--line)}
.faq dl{margin:0; max-width:78ch}
.faq dt{font-family:var(--serif); font-size:16.5px; line-height:1.6; color:var(--ink);
  padding:16px 0 6px}
.faq dt::before{content:"Q"; font-family:var(--mono); font-size:10.5px; color:var(--accent);
  margin-right:9px; vertical-align:1px}
.faq dd{margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.85;
  padding:0 0 15px; border-bottom:1px solid var(--line-soft)}
.faq dd strong{color:var(--ink); font-weight:600}

/* ── 首页：每栏目一块（5 条 + 查看全部） ───────────── */
.cat-block{margin:0 0 46px; content-visibility:auto; contain-intrinsic-size:auto 430px}
/* content-visibility:auto 隐含 paint containment；带截图的分类块需取消它，完整浮层才能越过列表底部绘制。 */
.cat-block:has(.list-shell.has-rail){content-visibility:visible}
.cat-block:last-child{margin-bottom:0}
.cat-block-head{display:flex; align-items:baseline; gap:14px; padding:0 0 10px;
  border-bottom:1px solid var(--line)}
.cat-block-head .no{font-family:var(--mono); font-size:11px; color:var(--accent)}
.cat-block-head h3{font-family:var(--serif); font-weight:400; font-size:22px; margin:0; letter-spacing:.01em}
.cat-block-head h3 a{border-bottom:1px solid transparent; transition:border-color .18s}
.cat-block-head h3 a:hover{border-bottom-color:var(--accent)}
.cat-block-head .cnt{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.cat-block-head .more{margin-left:auto; font-family:var(--mono); font-size:11px;
  color:var(--ink-3); transition:color .18s; white-space:nowrap}
.cat-block-head .more:hover{color:var(--accent)}

@media (max-width:640px){
  .cat-block{margin-bottom:32px}
  .cat-block-head{gap:10px}
  .cat-block-head h3{font-size:19px}
  .cat-block-head .cnt{display:none}
}

/* ── 分组层：把栏目归成 6 组（只影响呈现，栏目本身与 URL 不动） ── */
.spine-group{margin:0 0 13px}
.spine-group:last-child{margin-bottom:0}
.spine-group h3{font-family:var(--mono); font-weight:400; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 4px; padding-left:8px}

.grp{margin:0 0 56px}
.grp:last-child{margin-bottom:0}
.grp-head{display:flex; align-items:baseline; gap:14px; padding:0 0 12px; margin:0 0 30px;
  border-bottom:1px solid var(--ink)}
.grp-head h2{font-family:var(--serif); font-weight:400; font-size:27px; margin:0; letter-spacing:.02em}
.grp-head .grp-desc{font-size:12.5px; color:var(--ink-3)}
.grp-head .grp-cnt{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3)}

@media (max-width:640px){
  .grp{margin-bottom:38px}
  .grp-head{gap:10px; margin-bottom:22px; padding-bottom:10px}
  .grp-head h2{font-size:22px}
  .grp-head .grp-desc{display:none}
}

/* ── 栏目内二级分组标题（如「在线工具」下的图片工具/在线生成器） ── */
.sub-head{display:flex; align-items:baseline; gap:10px; margin:0; padding:26px 0 8px;
  font-family:var(--serif); font-weight:400; font-size:17px; color:var(--ink)}
.list-head + .sub-head{padding-top:0}
.sub-head .cnt{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3)}

/* ── 站点属性标记（详情页事实区块） ── */
.tags{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 4px}
.tags span, .tags a{font-family:var(--mono); font-size:10.5px; letter-spacing:.02em;
  border:1px solid var(--line); border-radius:2px; padding:2px 7px; color:var(--ink-3);
  text-decoration:none}
.tags a{transition:color .2s, border-color .2s}
.tags a:hover{color:var(--accent); border-color:var(--accent)}
.tags span.on, .tags a.on{color:var(--accent); border-color:var(--accent)}
.tags span.off{opacity:.45}

/* ── 广告标识 ─────────────────────────────────
   《广告法》第十四条要求广告可识别，《互联网广告管理办法》第九条要求
   以知识介绍等形式推销并附链接时显著标明「广告」。只有 site-data.json 里
   标了 sponsored: true 的条目才会出现，刻意做得显眼——
   读者必须一眼看出这是广告，而不是编辑推荐。 */
.ad{display:inline-block; margin-left:7px; padding:1px 5px; vertical-align:2px;
  font-family:var(--mono); font-size:10px; line-height:1.5; letter-spacing:.08em;
  color:var(--accent); border:1px solid var(--accent); border-radius:2px}

/* ── 详情页广告声明（与「收录说明」区分开） ──
   用 .note.ad-note 提高优先级：.note 的 border-left 在本文件后面，
   单靠 .ad-note 会被它盖掉。 */
.note.ad-note{border:1px solid var(--line); background:transparent; max-width:70ch}
.note.ad-note h2{color:var(--accent)}

/* ── 详情页「收录说明」 ─────────────────────── */
.note{margin:34px 0 0; padding:22px 24px; max-width:70ch;
  border-left:2px solid var(--accent); background:var(--line-soft)}
.note h2{font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}
.note p{margin:0 0 12px; color:var(--ink-2); font-size:14px; line-height:1.85}
.note p:last-child{margin-bottom:0}
.note a{color:var(--accent); border-bottom:1px solid var(--accent-soft); text-decoration:none}
.note a:hover{border-bottom-color:var(--accent)}
.note ul{margin:0 0 12px; padding-left:18px; color:var(--ink-2); font-size:14px; line-height:1.85}
.note li{margin:0 0 6px}
.note li:last-child{margin-bottom:0}
.note b{color:var(--ink); font-weight:400; border-bottom:1px solid var(--accent-soft)}
.note .meta-line{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:14px}

/* ── 标签索引页 ─────────────────────────────── */
.tag-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; margin:26px 0 0}
.tag-card{display:flex; flex-direction:column; gap:7px; padding:20px 22px; text-decoration:none;
  border:1px solid var(--line); border-radius:3px; background:var(--surface);
  transition:border-color .2s, transform .2s, box-shadow .2s}
.tag-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 26px var(--accent-soft)}
.tag-card .tn{font-family:var(--serif); font-size:19px; color:var(--ink)}
.tag-card .tc{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--accent)}
.tag-card .td{font-size:13px; line-height:1.75; color:var(--ink-3)}

@media (max-width:640px){
  .sub-head{font-size:16px; padding:20px 0 6px}
}

/* ── 列表行内的属性小标（跟在标题后面，不占额外高度） ── */
.list .mark{display:inline-block; font-family:var(--mono); font-style:normal; font-size:10px;
  line-height:1.55; color:var(--accent); border:1px solid var(--accent-soft);
  border-radius:2px; padding:0 5px; margin-left:8px; white-space:nowrap; vertical-align:1px}
.list .mark.warn{color:var(--ink-3); border-color:var(--line)}

@media (max-width:640px){
  .list .mark{display:none}
}

/* ── 返回顶部（全站） ────────────────────────── */
.top{position:fixed; right:22px; bottom:24px; z-index:30; width:42px; height:42px;
  display:grid; place-items:center; padding:0; cursor:pointer;
  border:1px solid var(--line); border-radius:3px; color:var(--ink-3);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s, transform .22s, visibility .22s, color .2s, border-color .2s}
.top.on{opacity:1; visibility:visible; transform:none}
.top:hover{color:var(--accent); border-color:var(--accent)}
.top svg{width:17px; height:17px; display:block}

/* ── 关于页正文 ─────────────────────────────── */
.prose{order:2; padding:36px 0 76px; max-width:70ch}
.prose h2{font-family:var(--serif); font-weight:400; font-size:20px; letter-spacing:.01em;
  margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px; color:var(--ink-2); font-size:14.5px; line-height:1.9}
.prose ul{margin:0 0 16px; padding-left:20px; color:var(--ink-2); font-size:14.5px; line-height:1.9}
.prose li{margin:0 0 8px}
.prose li:last-child{margin-bottom:0}
.prose b{color:var(--ink); font-weight:400; border-bottom:1px solid var(--accent-soft)}
.prose a{color:var(--accent); border-bottom:1px solid var(--accent-soft); text-decoration:none}
.prose a:hover{border-bottom-color:var(--accent)}
.prose code{font-family:var(--mono); font-size:12.5px; padding:1px 5px;
  background:var(--line-soft); border-radius:2px; color:var(--ink)}
.prose .facts{margin-top:26px}
.prose .facts dd a{color:var(--accent); border-bottom:1px solid var(--accent-soft)}
.prose .facts dd a:hover{border-bottom-color:var(--accent)}

@media (max-width:640px){
  .top{right:14px; bottom:16px; width:40px; height:40px}
  .faq{padding-bottom:60px}
  .faq dt{font-size:16px}
  .faq dd{font-size:14px}
  .prose{padding:24px 0 60px}
  .prose h2{font-size:18px; margin-top:28px}
  .note{margin-top:26px; padding:18px 18px}
  .tag-grid{grid-template-columns:1fr; gap:10px; margin-top:20px}
  .tag-card{padding:17px 18px}
  .tag-card .tn{font-size:17px}
}

/* ══════════════════════════════════════════════════════════════
   内容层：榜单与横评（/best/）、栏目导览、编辑点评
   三者都由数据文件驱动（best.json / guides.json / reviews.json），
   样式只负责排版，不参与内容判断。
   ══════════════════════════════════════════════════════════════ */

/* ── 栏目页底部：栏目导览（500–800 字长文） ──
   order 接在 .faq(4) 之后；不写 order 会被 flex 排到最前面。 */
.guide{order:5; padding:0 0 76px; max-width:78ch}
.guide h2{font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 6px; padding:28px 0 0;
  border-top:1px solid var(--line)}
.guide h3{font-family:var(--serif); font-weight:400; font-size:17px; letter-spacing:.01em;
  color:var(--ink); margin:30px 0 8px}
.guide p{margin:0 0 14px; color:var(--ink-2); font-size:14.5px; line-height:1.9; text-wrap:pretty}
.guide strong{color:var(--ink); font-weight:600}
.guide ul{margin:0 0 14px; padding-left:19px; color:var(--ink-2); font-size:14.5px; line-height:1.85}
.guide li{margin:0 0 9px}
.guide li:last-child{margin-bottom:0}
.guide a{color:var(--accent); border-bottom:1px solid var(--accent-soft); text-decoration:none}
.guide a:hover{border-bottom-color:var(--accent)}

/* ── 栏目页底部：相关榜单与横评 ── */
.related-best{order:6; padding:0 0 76px}
.related-best h2{font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 6px; padding:28px 0 0;
  border-top:1px solid var(--line)}
.related-best ul{list-style:none; margin:0; padding:0; max-width:78ch}
.related-best li{display:flex; align-items:baseline; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--line-soft)}
.related-best li:last-child{border-bottom:0}
.related-best a{color:var(--ink); font-size:14.5px; line-height:1.7; text-decoration:none}
.related-best a:hover{color:var(--accent)}
.related-best .cnt{margin-left:auto; flex:0 0 auto; font-family:var(--mono); font-size:11px; color:var(--ink-3)}

/* ── 详情页「编辑点评」 ──
   与「收录说明」（左边框 + 浅底）刻意不同：这里不要盒子，只要一道上分隔线，
   正文用衬线体，读起来像编者按而不是系统提示。 */
.note.review{margin:34px 0 0; padding:18px 0 0; max-width:70ch;
  border:0; border-top:1px solid var(--line); background:none}
.note.review h2{color:var(--ink-3); margin:0 0 10px}
.note.review p{font-family:var(--serif); font-size:16px; line-height:1.9; color:var(--ink); margin:0}
.note.review p strong{color:var(--ink); font-weight:400;
  background:linear-gradient(transparent 62%, var(--accent-soft) 62%)}

/* ── /best/ 总览页：卡片网格 ── */
.best-grid{order:2; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:16px; margin:32px 0 0}
.best-card{display:flex; flex-direction:column; gap:9px; padding:24px 24px 20px; text-decoration:none;
  border:1px solid var(--line); border-radius:3px; background:var(--surface);
  transition:border-color .2s, transform .2s, box-shadow .2s}
.best-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 26px var(--accent-soft)}
.best-card h2{font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.42;
  letter-spacing:.01em; color:var(--ink); margin:0}
/* 卡片副题：这是一句话（中文），不是编号标签，所以用正文字体、字号提到能读的下限；
   等宽体只留给数字和域名。 */
.best-card .sub{font-family:var(--sans); font-size:12px; letter-spacing:0; color:var(--accent); margin:0}
.best-card .lead{margin:0; font-size:13.5px; line-height:1.8; color:var(--ink-3)}
.best-card .foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:auto 0 0;
  padding:12px 0 0; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.best-card .foot > span:first-child{margin-right:auto}
.best-card .tag-cat{border:1px solid var(--line); border-radius:2px; padding:1px 6px}

/* ── 榜单页正文 ── */
.best-body{order:2; padding:34px 0 76px; max-width:820px}
.best-body .lead{margin:0; font-size:15.5px; line-height:1.9; color:var(--ink-2); text-wrap:pretty}
.best-body .lead strong{color:var(--ink); font-weight:600}
.best-sec{margin:46px 0 0}
.best-sec > h2{font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 18px; padding:26px 0 0;
  border-top:1px solid var(--line)}
.best-sec:first-of-type{margin-top:40px}
.best-sec:first-of-type > h2{padding-top:0; border-top:0}

/* 评选标准 / 怎么用 */
.criteria, .steps{margin:0; padding-left:20px; max-width:76ch}
.criteria li, .steps li{margin:0 0 13px; color:var(--ink-2); font-size:14.5px; line-height:1.85}
.criteria li::marker, .steps li::marker{font-family:var(--mono); font-size:12px; color:var(--accent)}
.criteria strong, .steps strong{color:var(--ink); font-weight:600}

/* 榜单条目 */
.rank{list-style:none; margin:0; padding:0}
.rank-item{padding:26px 0; border-bottom:1px solid var(--line-soft);
  animation:up .5s cubic-bezier(.2,.7,.3,1) both}
.rank-item:first-child{padding-top:0}
.rank-item:last-child{border-bottom:0; padding-bottom:0}
.rank-head{display:flex; align-items:center; gap:12px}
.rank-no{flex:0 0 auto; min-width:22px; font-family:var(--mono); font-size:13px;
  letter-spacing:.04em; color:var(--accent)}
.rank-head img{flex:0 0 auto; width:22px; height:22px; border-radius:2px; object-fit:contain}
.rank-t{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; min-width:0}
.rank-t a{font-family:var(--serif); font-size:19px; line-height:1.4; color:var(--ink);
  text-decoration:none; border-bottom:1px solid transparent}
.rank-t a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.rank-t .dom{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.rank-head .go{margin-left:auto; flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px;
  border:1px solid var(--line); border-radius:3px; color:var(--ink-3); font-size:12px;
  text-decoration:none; transition:color .2s, border-color .2s}
.rank-head .go:hover{color:var(--accent); border-color:var(--accent)}

/* 一句结论 / 展开理由 / 注意事项 */
.verdict{margin:13px 0 0; font-size:15px; line-height:1.85; color:var(--ink)}
.verdict strong{font-weight:600}
.why{margin:8px 0 0; font-size:14.5px; line-height:1.9; color:var(--ink-2)}
.why strong{color:var(--ink); font-weight:600}
.watch{margin:12px 0 0; padding:10px 14px; font-size:13.5px; line-height:1.8;
  color:var(--ink-2); background:var(--line-soft); border-left:2px solid var(--line)}
.watch .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-right:10px}
.watch strong{color:var(--ink); font-weight:600}

/* 还可以看看（站外补充，直书 URL） */
.also{list-style:none; margin:0; padding:0; max-width:76ch}
.also li{padding:13px 0; border-bottom:1px solid var(--line-soft);
  color:var(--ink-2); font-size:14px; line-height:1.85}
.also li:last-child{border-bottom:0}
.also a{font-family:var(--mono); font-size:12.5px; color:var(--accent);
  border-bottom:1px solid var(--accent-soft); text-decoration:none; margin-right:10px}
.also a:hover{border-bottom-color:var(--accent)}

/* 相关页面 */
.rel-links{list-style:none; margin:0; padding:0; max-width:76ch}
.rel-links li{display:flex; align-items:baseline; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--line-soft)}
.rel-links li:last-child{border-bottom:0}
.rel-links a{color:var(--ink); font-size:14.5px; text-decoration:none}
.rel-links a:hover{color:var(--accent)}
.rel-links span{margin-left:auto; flex:0 0 auto; font-family:var(--mono); font-size:11px; color:var(--ink-3)}

/* 榜单页尾注 */
.best-body > .meta-line{font-family:var(--mono); font-size:11px; line-height:1.9;
  color:var(--ink-3); margin:46px 0 0; padding-top:16px; border-top:1px solid var(--line)}
.best-body > .meta-line a{color:var(--accent); border-bottom:1px solid var(--accent-soft); text-decoration:none}
.best-body > .meta-line a:hover{border-bottom-color:var(--accent)}

@media (prefers-reduced-motion:reduce){ .rank-item{animation:none} }

@media (max-width:640px){
  .best-grid{grid-template-columns:1fr; gap:12px; margin-top:24px}
  .best-card{padding:20px 18px 17px}
  .best-card h2{font-size:18px}
  .best-body{padding:26px 0 60px}
  .best-body .lead{font-size:15px; line-height:1.85}
  .best-sec{margin-top:36px}
  .rank-item{padding:22px 0}
  .rank-t a{font-size:17.5px}
  .rank-head .go{width:26px; height:26px}
  .guide, .related-best{padding-bottom:60px}
  .guide p, .guide ul{font-size:14px; line-height:1.85}
  .guide h3{font-size:16px; margin-top:26px}
  .note.review p{font-size:15.5px}
}

/* ══════════════════════════════════════════════════════════════
   主题风格层
   ──────────────────────────────────────────────────────────────
   全站有五套并列的外观，由 <html data-skin="..."> 决定：

     default  纸本      （默认）—— 米白纸面、细线分隔、楷体标题
     night    夜航            —— 深色玻璃、极光渐变背景、黑体标题
     morandi  莫兰迪奶油       —— 低饱和、大圆角、双层柔影
     swiss    瑞士黑白         —— 绝对平面、单一电光蓝、发丝线
     brutal   新粗野主义       —— 厚黑描边、硬偏移阴影、高饱和色块

   明暗（data-theme）是另一个正交的轴：夜航本身是深色，切到它时
   亮/暗按钮会收起；其余四套都各写了浅色与深色两套变量。

   新增一套风格的步骤：写一个 html[data-skin="<名字>"] 变量块 →
   在 build.js 的 skin-menu 里加一个按钮 → 在 app.js 的 SKIN_TC 里
   补一条浏览器工具栏底色。

   这一层只改外观：不动内容、不动 DOM 结构、不动 URL、不动 SEO。
   把本层整段删掉，站点即回到「纸本」，其余代码无需改动。

   三处杠杆：
   1. 颜色  —— 重定义同一批自定义属性，几百个零件自动跟着变
   2. 字体  —— --serif 直接指向无衬线栈，标题从楷体换黑体；
              连带好处是「夜航」下不再下载那 278KB 的中文标题字体
   3. 结构  —— 把「细线分隔」改成「玻璃卡片」：圆角、描边、光晕、上浮
   背景则由 body::before 从纸纹换成极光渐变 + 细网格，纯 CSS 画出来，
   不引外部图片，站点仍然保持零第三方请求。
   ══════════════════════════════════════════════════════════════ */

/* ── 风格切换按钮与菜单（两套风格共用，各自配色） ── */
.skin{position:relative; display:inline-flex}
.skin-menu{
  position:absolute; right:0; top:calc(100% + 10px); z-index:40;
  min-width:256px; max-height:min(72vh,440px); overflow-y:auto; padding:7px;
  display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 18px 44px rgba(23,19,14,.18);
}
.skin-menu[hidden]{display:none}
.skin-menu button{
  display:grid; grid-template-columns:22px minmax(0,1fr) 14px; grid-template-rows:auto auto;
  align-items:center; column-gap:11px; row-gap:1px;
  width:100%; padding:9px 10px; text-align:left; cursor:pointer;
  border:0; border-radius:3px; background:none; color:var(--ink);
  font-family:var(--sans); transition:background .16s;
}
.skin-menu button:hover{background:var(--accent-soft)}
.skin-menu .sw{grid-area:1/1/3/2; display:block; width:22px; height:22px;
  border-radius:3px; border:1px solid var(--line)}
.skin-menu .sw-default{background:linear-gradient(135deg,#f5f1e8 0 50%,#b2382b 50% 100%)}
.skin-menu .sw-night{background:linear-gradient(135deg,#0a0e1c 0 50%,#5eead4 50% 100%)}
.skin-menu .sw-morandi{background:linear-gradient(135deg,#f7f4ef 0 50%,#8fa89b 50% 100%)}
.skin-menu .sw-swiss{background:linear-gradient(135deg,#ffffff 0 50%,#0033ff 50% 100%)}
.skin-menu .sw-brutal{background:linear-gradient(135deg,#ffe600 0 50%,#111111 50% 100%)}
.skin-menu .nm{grid-area:1/2/2/3; font-size:14px; line-height:1.35}
.skin-menu .dsc{grid-area:2/2/3/3; font-family:var(--mono); font-size:10.5px;
  line-height:1.5; color:var(--ink-3)}
.skin-menu .ck{grid-area:1/3/3/4; text-align:center; font-size:12px; color:var(--accent); opacity:0}
.skin-menu button[aria-checked="true"]{background:var(--accent-soft)}
.skin-menu button[aria-checked="true"] .nm{color:var(--accent)}
.skin-menu button[aria-checked="true"] .ck{opacity:1}

/* ══ 夜航 ═══════════════════════════════════════════════════════ */

html[data-skin="night"]{
  color-scheme:dark;
  --paper:#070a12; --surface:rgba(255,255,255,.045);
  --ink:#e8ecfa; --ink-2:#a6b0cc; --ink-3:#6d7a9b;
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.055);
  --accent:#5eead4; --accent-soft:rgba(94,234,212,.13);
  /* 标题换黑体：一个变量，全站 .brand / h1 / .ttl / .rank-t 一起换 */
  --serif:var(--sans);
  --aur-1:rgba(56,189,248,.22);
  --aur-2:rgba(167,139,250,.20);
  --aur-3:rgba(45,212,191,.16);
  --glass:rgba(255,255,255,.05);
  --glass-line:rgba(255,255,255,.10);
  --shadow:0 14px 38px rgba(0,0,0,.45);
}
/* 夜航本身是深色，亮/暗开关对它没有意义，收起来 */
html[data-skin="night"] #theme{display:none}
html[data-skin="night"] ::selection{background:rgba(94,234,212,.32); color:var(--ink)}

/* 背景：极光渐变 + 细网格，全部用 CSS 画，不请求任何图片 */
html[data-skin="night"] body::before{
  opacity:1;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.030) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.030) 1px,transparent 1px),
    radial-gradient(1100px 780px at 8% -12%,var(--aur-1),transparent 64%),
    radial-gradient(980px 700px at 96% 2%,var(--aur-2),transparent 62%),
    radial-gradient(900px 820px at 44% 106%,var(--aur-3),transparent 66%),
    radial-gradient(140% 120% at 50% 0%,transparent 42%,rgba(0,0,0,.55) 100%);
  background-size:72px 72px,72px 72px,auto,auto,auto,auto;
}

/* 顶栏：玻璃 */
html[data-skin="night"] .bar{
  background:rgba(9,12,22,.72); border-bottom-color:var(--glass-line);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
}
html[data-skin="night"] .brand{font-weight:600; letter-spacing:-.01em}
html[data-skin="night"] .brand .seal{
  color:var(--accent); border-color:rgba(94,234,212,.45);
  background:rgba(94,234,212,.08); border-radius:6px;
}
html[data-skin="night"] .bar .nav{color:var(--ink-2)}
html[data-skin="night"] .bar .nav:hover{color:var(--accent); border-bottom-color:var(--accent)}

html[data-skin="night"] .tgl{
  width:34px; height:34px; border-radius:11px; color:var(--ink-2);
  border-color:var(--glass-line); background:var(--glass);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:color .2s, border-color .2s, background .2s, box-shadow .2s;
}
html[data-skin="night"] .tgl:hover{
  color:var(--accent); border-color:rgba(94,234,212,.5);
  background:rgba(94,234,212,.1); box-shadow:0 0 0 4px rgba(94,234,212,.1);
}
html[data-skin="night"] .tgl svg{width:17px; height:17px}
html[data-skin="night"] .skin-menu{
  background:rgba(13,17,30,.94); border-color:var(--glass-line); border-radius:14px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 26px 64px rgba(0,0,0,.62);
}
html[data-skin="night"] .skin-menu button{border-radius:10px}
html[data-skin="night"] .skin-menu button:hover{background:rgba(255,255,255,.06)}
html[data-skin="night"] .skin-menu button[aria-checked="true"]{background:rgba(94,234,212,.12)}
html[data-skin="night"] .skin-menu .sw{border-color:var(--glass-line); border-radius:6px}

/* 首屏：标题换黑体并收紧字距，强调字用极光渐变填色 */
html[data-skin="night"] .hero{padding-top:78px}
html[data-skin="night"] h1{
  font-weight:600; letter-spacing:-.022em; line-height:1.06;
  font-size:clamp(40px,6vw,78px);
}
html[data-skin="night"] h1 em{
  background:linear-gradient(96deg,#5eead4,#818cf8 52%,#c084fc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-skin="night"] .hero .kicker{color:var(--accent); letter-spacing:.2em}
html[data-skin="night"] .lede{color:var(--ink-2)}
html[data-skin="night"] .side{color:var(--ink-3)}
html[data-skin="night"] .rule i{
  background:linear-gradient(90deg,rgba(94,234,212,.5),rgba(129,140,248,.3),transparent);
}

/* 搜索框：玻璃胶囊 */
html[data-skin="night"] .srch input{
  background:var(--glass); border-color:var(--glass-line); border-radius:14px;
  padding:16px 84px 16px 48px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-skin="night"] .srch input:hover{border-color:rgba(255,255,255,.2)}
html[data-skin="night"] .srch input:focus{
  border-color:rgba(94,234,212,.6); background:rgba(255,255,255,.075);
  box-shadow:0 0 0 4px rgba(94,234,212,.14), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-skin="night"] .srch kbd{
  border-color:var(--glass-line); border-radius:7px; color:var(--ink-3);
  background:rgba(255,255,255,.05);
}

/* 主体骨架 */
html[data-skin="night"] .index{border-top-color:var(--glass-line)}
html[data-skin="night"] #stage{border-left-color:var(--glass-line)}
html[data-skin="night"] .spine h2{color:var(--ink-3)}
html[data-skin="night"] .spine a{border-radius:10px}
html[data-skin="night"] .spine .nm{font-size:14px}
html[data-skin="night"] .spine a:hover{background:var(--glass)}
html[data-skin="night"] .spine a[aria-current]{
  background:linear-gradient(90deg,rgba(94,234,212,.16),rgba(94,234,212,.02));
}
html[data-skin="night"] .spine a[aria-current]::before{
  border-radius:2px; box-shadow:0 0 12px rgba(94,234,212,.75);
}

/* 分区标题：把「一道实线」换成「渐隐极光细线」 */
html[data-skin="night"] .ent-head,
html[data-skin="night"] .res-head,
html[data-skin="night"] .list-head,
html[data-skin="night"] .grp-head{
  border-bottom:0; background-repeat:no-repeat;
  background-position:0 100%; background-size:100% 1px;
  background-image:linear-gradient(90deg,rgba(94,234,212,.55),rgba(129,140,248,.3) 42%,rgba(255,255,255,0) 92%);
}
html[data-skin="night"] .facts{
  border-top:0; background-repeat:no-repeat;
  background-position:0 0; background-size:100% 1px;
  background-image:linear-gradient(90deg,rgba(94,234,212,.5),rgba(129,140,248,.26) 40%,rgba(255,255,255,0) 90%);
}
html[data-skin="night"] .faq h2,
html[data-skin="night"] .guide h2,
html[data-skin="night"] .related-best h2,
html[data-skin="night"] .best-sec > h2{border-top-color:var(--glass-line)}
html[data-skin="night"] .faq dd,
html[data-skin="night"] .related-best li,
html[data-skin="night"] .rel-links li,
html[data-skin="night"] .also li{border-bottom-color:var(--line-soft)}

/* 列表行：从「细线分隔」改成「玻璃卡片」，悬停上浮 + 外发光 */
html[data-skin="night"] .list li{
  border:1px solid transparent; border-radius:14px;
  padding:13px 14px; margin-bottom:6px;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s, padding-right .26s cubic-bezier(.2,.7,.3,1);
}
html[data-skin="night"] .list li:hover{
  background:var(--glass); border-color:var(--glass-line);
  transform:translateY(-1px); box-shadow:var(--shadow);
}
html[data-skin="night"] .list li:hover .row{transform:none}
html[data-skin="night"] .list img{
  filter:none; opacity:1; border-radius:6px;
  background:rgba(255,255,255,.92); object-fit:contain;
}
html[data-skin="night"] .list .noicon{border-radius:6px; background:rgba(255,255,255,.08)}
html[data-skin="night"] .list .sum{color:var(--ink-2); opacity:1}
html[data-skin="night"] .list .ext{
  border-radius:9px; border-color:var(--glass-line); opacity:.65;
}
html[data-skin="night"] .list li:hover .ext{
  opacity:1; color:var(--accent); border-color:rgba(94,234,212,.5);
  background:rgba(94,234,212,.1);
}
html[data-skin="night"] .list .mark{border-radius:6px; background:rgba(94,234,212,.08)}

/* 标题字重：楷体换黑体后要补一点重量，否则显细 */
html[data-skin="night"] .ent-head .cat,
html[data-skin="night"] .res-head strong,
html[data-skin="night"] .list-head,
html[data-skin="night"] .grp-head h2,
html[data-skin="night"] .cat-block-head h3,
html[data-skin="night"] .sub-head,
html[data-skin="night"] .faq dt,
html[data-skin="night"] .prose h2,
html[data-skin="night"] .guide h3,
html[data-skin="night"] .best-card h2,
html[data-skin="night"] .tag-card .tn,
html[data-skin="night"] .rank-t a,
html[data-skin="night"] .list .ttl{font-weight:600; letter-spacing:-.005em}

/* 说明块：整块换成玻璃卡片，广告声明保留强调色描边 */
html[data-skin="night"] .note{
  border:1px solid var(--glass-line); border-radius:16px;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
html[data-skin="night"] .note.ad-note{border-color:rgba(94,234,212,.5); background:rgba(94,234,212,.05)}
html[data-skin="night"] .note.review{
  border:0; border-top:1px solid var(--glass-line); border-radius:0;
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
html[data-skin="night"] .note.review p{font-weight:400}
html[data-skin="night"] .watch{
  background:rgba(255,255,255,.035); border-left:2px solid var(--accent);
  border-radius:0 12px 12px 0;
}

/* 卡片：标签索引、榜单总览 */
html[data-skin="night"] .tag-card,
html[data-skin="night"] .best-card{
  background:var(--glass); border-color:var(--glass-line); border-radius:16px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
html[data-skin="night"] .tag-card:hover,
html[data-skin="night"] .best-card:hover{
  background:rgba(255,255,255,.07); border-color:rgba(94,234,212,.45);
  transform:translateY(-3px);
  box-shadow:0 20px 46px rgba(0,0,0,.5), 0 0 0 1px rgba(94,234,212,.16);
}
html[data-skin="night"] .best-card .tag-cat{border-color:var(--glass-line); border-radius:7px}
html[data-skin="night"] .best-card .foot{border-top-color:var(--glass-line)}

/* 榜单正文 */
html[data-skin="night"] .rank-item{border-bottom-color:var(--line-soft)}
html[data-skin="night"] .rank-no{font-weight:600}
html[data-skin="night"] .rank-head img{
  background:rgba(255,255,255,.92); border-radius:6px; object-fit:contain;
}
html[data-skin="night"] .rank-head .go{
  border-color:var(--glass-line); border-radius:10px; background:var(--glass);
}
html[data-skin="night"] .rank-head .go:hover{
  color:var(--accent); border-color:rgba(94,234,212,.5); background:rgba(94,234,212,.1);
}

/* 按钮与返回顶部 */
html[data-skin="night"] .btn{
  background:linear-gradient(100deg,#0f766e,#4f46e5); border-radius:14px; font-weight:600;
  box-shadow:0 12px 30px rgba(79,70,229,.34);
}
html[data-skin="night"] .btn:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(79,70,229,.44)}
html[data-skin="night"] .top{
  border-color:var(--glass-line); border-radius:14px; color:var(--ink-2);
  background:rgba(16,20,34,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
html[data-skin="night"] .top:hover{color:var(--accent); border-color:rgba(94,234,212,.5)}

/* 页脚与广告标 */
html[data-skin="night"] footer{border-top-color:var(--glass-line)}
html[data-skin="night"] .ad{border-radius:6px; background:rgba(94,234,212,.1)}
html[data-skin="night"] .tags span,
html[data-skin="night"] .tags a{border-radius:6px}

/* 窄屏：书签条也做成玻璃，卡片内边距收紧 */
@media (max-width:640px){
  html[data-skin="night"] .spine{
    background:rgba(7,10,18,.9); border-bottom-color:var(--glass-line);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  html[data-skin="night"] .list li{padding:12px; border-radius:12px}
  html[data-skin="night"] .hero{padding-top:34px}
  html[data-skin="night"] .tgl{width:32px; height:32px; border-radius:10px}
  html[data-skin="night"] .skin-menu{min-width:236px; border-radius:12px}
}

/* 减少动效：夜航多出来的位移一并关掉 */
@media (prefers-reduced-motion:reduce){
  html[data-skin="night"] .list li:hover,
  html[data-skin="night"] .tag-card:hover,
  html[data-skin="night"] .best-card:hover,
  html[data-skin="night"] .btn:hover{transform:none}
}

/* ══ 莫兰迪奶油 ═════════════════════════════════════════════════
   低饱和、大圆角、双层柔影。装饰几乎不可见，注意力全留给文字。
   注意：莫兰迪原色（鼠尾草 / 藕粉 / 雾霾蓝）对白底的对比度只有 2:1 上下，
   当强调色用会看不清，所以 --accent 一律取同色系加深版（5:1 上下），
   原色只出现在底色、标签底和装饰块上。 */

html[data-skin="morandi"]{
  color-scheme:light;
  --paper:#f6f4f0; --surface:#ffffff;
  --ink:#2e2a26; --ink-2:#5f5952; --ink-3:#6f6a62;
  --line:#e7e1d7; --line-soft:#f1ece4;
  --accent:#4a6b5d; --accent-soft:rgba(74,107,93,.10);
  --serif:var(--sans);
  --m-sage:#8fa89b; --m-rose:#c9a9a6; --m-blue:#9aabb8;
  --r-lg:20px; --r-md:14px; --r-sm:9px;
  --sh-1:0 2px 6px rgba(46,42,38,.055);
  --sh-2:0 14px 34px rgba(46,42,38,.11);
}
html[data-skin="morandi"][data-theme="dark"]{
  color-scheme:dark;
  --paper:#1c1a18; --surface:#252220;
  --ink:#eae5de; --ink-2:#b3aba2; --ink-3:#8d857c;
  --line:#35312d; --line-soft:#2b2825;
  --accent:#9dbdad; --accent-soft:rgba(157,189,173,.14);
  /* 暗色强调色是很浅的鼠尾草，白字压上去只有 2:1，按钮文字改用深墨 */
  --btn-ink:#1c1a18;
  --m-sage:#5d7468; --m-rose:#7d6260; --m-blue:#5f6d78;
  --sh-1:0 2px 5px rgba(0,0,0,.24);
  --sh-2:0 16px 36px rgba(0,0,0,.36);
}

/* 背景：三层莫兰迪色光斑，淡到几乎看不出，只是让白底不死板 */
html[data-skin="morandi"] body::before{
  opacity:1;
  background-image:
    radial-gradient(820px 560px at 10% 4%,rgba(143,168,155,.34),transparent 68%),
    radial-gradient(760px 600px at 94% 12%,rgba(201,169,166,.28),transparent 70%),
    radial-gradient(900px 660px at 46% 108%,rgba(154,171,184,.26),transparent 72%);
  background-size:auto;
}
html[data-skin="morandi"][data-theme="dark"] body::before{
  background-image:
    radial-gradient(820px 560px at 10% 4%,rgba(93,116,104,.40),transparent 68%),
    radial-gradient(760px 600px at 94% 12%,rgba(125,98,96,.34),transparent 70%),
    radial-gradient(900px 660px at 46% 108%,rgba(95,109,120,.32),transparent 72%);
}

/* 顶栏：柔光玻璃，不留硬边 */
html[data-skin="morandi"] .bar{
  background:rgba(246,244,240,.86); border-bottom-color:transparent;
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 rgba(46,42,38,.05);
}
html[data-skin="morandi"][data-theme="dark"] .bar{
  background:rgba(28,26,24,.84); box-shadow:0 1px 0 rgba(0,0,0,.32);
}
html[data-skin="morandi"] .brand{font-weight:500; letter-spacing:-.004em}
html[data-skin="morandi"] .brand .seal{
  color:var(--accent); border-color:rgba(74,107,93,.32);
  background:rgba(143,168,155,.18); border-radius:var(--r-sm);
}
html[data-skin="morandi"][data-theme="dark"] .brand .seal{
  border-color:rgba(157,189,173,.36); background:rgba(157,189,173,.12);
}
html[data-skin="morandi"] .bar .nav{color:var(--ink-3)}
html[data-skin="morandi"] .bar .nav:hover{color:var(--accent); border-bottom-color:var(--accent)}
html[data-skin="morandi"] .tgl{
  width:34px; height:34px; border-radius:11px; color:var(--ink-3);
  border-color:var(--line); background:rgba(255,255,255,.72);
  transition:color .2s, border-color .2s, background .2s, box-shadow .2s;
}
html[data-skin="morandi"][data-theme="dark"] .tgl{background:rgba(255,255,255,.05)}
html[data-skin="morandi"] .tgl:hover{
  color:var(--accent); border-color:rgba(74,107,93,.42);
  background:rgba(143,168,155,.2); box-shadow:0 0 0 4px rgba(143,168,155,.16);
}
html[data-skin="morandi"] .tgl svg{width:17px; height:17px}
html[data-skin="morandi"] .skin-menu{
  border-radius:var(--r-lg); border-color:var(--line); background:var(--surface);
  box-shadow:var(--sh-2);
}
html[data-skin="morandi"] .skin-menu button{border-radius:var(--r-md)}
html[data-skin="morandi"] .skin-menu .sw{border-radius:var(--r-sm); border-color:var(--line)}

/* 首屏：标题降一个字重，强调字用莫兰迪色做荧光笔 */
html[data-skin="morandi"] .hero{padding-top:74px}
html[data-skin="morandi"] h1{
  font-weight:500; letter-spacing:-.018em; line-height:1.16;
  font-size:clamp(38px,5.6vw,74px);
}
html[data-skin="morandi"] h1 em{
  color:var(--ink);
  background:linear-gradient(transparent 64%,rgba(143,168,155,.42) 64%);
}
html[data-skin="morandi"][data-theme="dark"] h1 em{
  background:linear-gradient(transparent 64%,rgba(157,189,173,.28) 64%);
}
html[data-skin="morandi"] .hero .kicker{color:var(--accent); letter-spacing:.18em}
html[data-skin="morandi"] .lede{color:var(--ink-2)}
html[data-skin="morandi"] .side{color:var(--ink-3)}
html[data-skin="morandi"] .rule i{
  background:linear-gradient(90deg,rgba(143,168,155,.75),rgba(201,169,166,.4),transparent);
}

/* 搜索框：大圆角 + 柔影 */
html[data-skin="morandi"] .srch input{
  background:var(--surface); border-color:var(--line); border-radius:var(--r-lg);
  padding:16px 84px 16px 48px; box-shadow:var(--sh-1);
}
html[data-skin="morandi"] .srch input:hover{border-color:var(--m-sage)}
html[data-skin="morandi"] .srch input:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(143,168,155,.22), var(--sh-1);
}
html[data-skin="morandi"] .srch kbd{
  border-radius:var(--r-sm); border-color:var(--line); background:var(--line-soft);
}

/* 主体骨架：把深色分隔线全部降成浅色 */
html[data-skin="morandi"] .index{border-top-color:var(--line)}
html[data-skin="morandi"] #stage{border-left-color:var(--line)}
html[data-skin="morandi"] .ent-head,
html[data-skin="morandi"] .res-head,
html[data-skin="morandi"] .list-head,
html[data-skin="morandi"] .grp-head,
html[data-skin="morandi"] .cat-block-head{border-bottom-color:var(--line)}
html[data-skin="morandi"] .facts{border-top-color:var(--line)}
html[data-skin="morandi"] .spine h2{color:var(--ink-3)}
html[data-skin="morandi"] .spine a{border-radius:var(--r-md)}
html[data-skin="morandi"] .spine .nm{font-size:14px}
html[data-skin="morandi"] .spine a:hover{background:rgba(143,168,155,.18)}
html[data-skin="morandi"] .spine a:hover .nm{color:var(--ink)}
html[data-skin="morandi"] .spine a[aria-current]{background:rgba(143,168,155,.26)}
html[data-skin="morandi"] .spine a[aria-current]::before{border-radius:2px}

/* 标题字重：楷体换黑体后补一点重量 */
html[data-skin="morandi"] .ent-head .cat,
html[data-skin="morandi"] .res-head strong,
html[data-skin="morandi"] .grp-head h2,
html[data-skin="morandi"] .cat-block-head h3,
html[data-skin="morandi"] .sub-head,
html[data-skin="morandi"] .faq dt,
html[data-skin="morandi"] .prose h2,
html[data-skin="morandi"] .guide h3,
html[data-skin="morandi"] .best-card h2,
html[data-skin="morandi"] .tag-card .tn,
html[data-skin="morandi"] .rank-t a,
html[data-skin="morandi"] .list .ttl{font-weight:500; letter-spacing:-.002em}

/* 列表行：去掉分隔线，改成一张张浮起来的柔光卡片 */
html[data-skin="morandi"] .list li{
  border:0; border-bottom:0; border-radius:var(--r-md);
  padding:13px 14px; margin-bottom:5px; background:var(--surface);
  transition:box-shadow .2s, transform .2s, padding-right .26s cubic-bezier(.2,.7,.3,1);
}
html[data-skin="morandi"] .list li:hover{
  box-shadow:var(--sh-1); transform:translateY(-1px);
}
html[data-skin="morandi"] .list li:hover .row{transform:none}
html[data-skin="morandi"] .list img{
  filter:none; opacity:1; border-radius:var(--r-sm);
  background:rgba(255,255,255,.9); object-fit:contain;
}
html[data-skin="morandi"] .list .noicon{border-radius:var(--r-sm); background:var(--line-soft)}
html[data-skin="morandi"] .list .sum{color:var(--ink-2); opacity:1}
html[data-skin="morandi"] .list .ext{border-radius:var(--r-sm); border-color:var(--line); opacity:.7}
html[data-skin="morandi"] .list li:hover .ext{
  opacity:1; color:var(--accent); border-color:var(--accent); background:rgba(143,168,155,.16);
}
html[data-skin="morandi"] .list .mark{
  border-radius:var(--r-sm); border-color:rgba(74,107,93,.3); background:rgba(143,168,155,.16);
}

/* 说明块：圆角柔光卡片 */
html[data-skin="morandi"] .note{
  border:1px solid var(--line); border-left:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-1);
}
html[data-skin="morandi"] .note.ad-note{
  border-color:rgba(74,107,93,.36); background:rgba(143,168,155,.13);
}
html[data-skin="morandi"][data-theme="dark"] .note.ad-note{
  border-color:rgba(157,189,173,.34); background:rgba(157,189,173,.08);
}
html[data-skin="morandi"] .note.review{
  border:0; border-top:1px solid var(--line); border-radius:0;
  background:none; box-shadow:none;
}
html[data-skin="morandi"] .note.review p strong{
  background:linear-gradient(transparent 62%,rgba(143,168,155,.4) 62%);
}
html[data-skin="morandi"] .watch{
  background:rgba(143,168,155,.14); border-left:2px solid var(--m-sage);
  border-radius:0 var(--r-md) var(--r-md) 0;
}

/* 卡片：标签索引、榜单总览 */
html[data-skin="morandi"] .tag-card,
html[data-skin="morandi"] .best-card{
  background:var(--surface); border-color:var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
html[data-skin="morandi"] .tag-card:hover,
html[data-skin="morandi"] .best-card:hover{
  border-color:var(--m-sage); transform:translateY(-3px); box-shadow:var(--sh-2);
}
html[data-skin="morandi"] .best-card .tag-cat{border-radius:var(--r-sm); border-color:var(--line)}

/* 榜单条目 */
html[data-skin="morandi"] .rank-item{border-bottom-color:var(--line-soft)}
html[data-skin="morandi"] .rank-no{font-weight:500}
html[data-skin="morandi"] .rank-head img{
  border-radius:var(--r-sm); background:rgba(255,255,255,.9); object-fit:contain;
}
html[data-skin="morandi"] .rank-head .go{
  border-radius:var(--r-md); border-color:var(--line); background:var(--surface);
}
html[data-skin="morandi"] .rank-head .go:hover{
  color:var(--accent); border-color:var(--accent); background:rgba(143,168,155,.16);
}

/* 按钮与返回顶部 */
html[data-skin="morandi"] .btn{
  background:var(--accent); border-radius:var(--r-lg); font-weight:500;
  box-shadow:0 10px 24px rgba(74,107,93,.22);
}
html[data-skin="morandi"] .btn:hover{
  transform:translateY(-2px); box-shadow:0 16px 34px rgba(74,107,93,.3);
}
html[data-skin="morandi"] .top{
  border-radius:var(--r-lg); border-color:var(--line); color:var(--ink-3);
  background:var(--surface); box-shadow:var(--sh-1);
}
html[data-skin="morandi"] .top:hover{color:var(--accent); border-color:var(--accent)}

/* 页脚、广告标、属性标签 */
html[data-skin="morandi"] footer{border-top-color:var(--line)}
html[data-skin="morandi"] .ad{
  border-radius:var(--r-sm); border-color:var(--accent); background:rgba(143,168,155,.14);
}
html[data-skin="morandi"] .tags span,
html[data-skin="morandi"] .tags a{border-radius:var(--r-sm)}
html[data-skin="morandi"] .tags span.on,
html[data-skin="morandi"] .tags a.on{background:rgba(143,168,155,.16)}

/* 窄屏 */
@media (max-width:640px){
  html[data-skin="morandi"] .spine{
    background:rgba(246,244,240,.94); border-bottom-color:var(--line);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  html[data-skin="morandi"][data-theme="dark"] .spine{background:rgba(28,26,24,.92)}
  html[data-skin="morandi"] .list li{padding:12px; border-radius:var(--r-md)}
  html[data-skin="morandi"] .hero{padding-top:34px}
  html[data-skin="morandi"] .tgl{width:32px; height:32px; border-radius:10px}
  html[data-skin="morandi"] .skin-menu{min-width:236px; border-radius:var(--r-md)}
}
@media (prefers-reduced-motion:reduce){
  html[data-skin="morandi"] .list li:hover,
  html[data-skin="morandi"] .tag-card:hover,
  html[data-skin="morandi"] .best-card:hover,
  html[data-skin="morandi"] .btn:hover{transform:none}
}

/* ══ 瑞士黑白 ═══════════════════════════════════════════════════
   绝对平面：零圆角、零阴影、零渐变，分区只靠发丝线和留白。
   强调色只给一个电光蓝，在导航站里「单一高对比强调色 = 这里能点」。
   中文适配：标题字距保持 0（汉字本就方正，压字距会挤成一团），
   只有等宽元素（编号、域名、元信息，天然是英文数字）才收紧字距。 */

html[data-skin="swiss"]{
  color-scheme:light;
  --paper:#ffffff; --surface:#ffffff;
  --ink:#0a0a0a; --ink-2:#5a5a5a; --ink-3:#6e6e6e;
  --line:#e2e2e2; --line-soft:#f0f0f0;
  --accent:#0033ff; --accent-soft:rgba(0,51,255,.08);
  --serif:var(--sans);
}
html[data-skin="swiss"][data-theme="dark"]{
  color-scheme:dark;
  --paper:#0a0a0a; --surface:#0a0a0a;
  --ink:#fafafa; --ink-2:#a3a3a3; --ink-3:#7a7a7a;
  --line:#262626; --line-soft:#1c1c1c;
  --accent:#4d7cff; --accent-soft:rgba(77,124,255,.14);
  /* 电光蓝配白字只有 3.7:1，按钮文字改用深墨 */
  --btn-ink:#0a0a0a;
}
/* 纯色，纸纹噪点一并关掉 */
html[data-skin="swiss"] body::before{opacity:0}

html[data-skin="swiss"] .bar{
  background:rgba(255,255,255,.92); border-bottom-color:var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
html[data-skin="swiss"][data-theme="dark"] .bar{background:rgba(10,10,10,.92)}
html[data-skin="swiss"] .brand{font-weight:600; letter-spacing:0}
html[data-skin="swiss"] .brand .seal{
  color:var(--accent); border-color:var(--accent); background:none;
  border-radius:0; font-weight:500;
}
html[data-skin="swiss"] .bar .nav{color:var(--ink-2)}
html[data-skin="swiss"] .bar .nav:hover{color:var(--accent); border-bottom-color:var(--accent)}
html[data-skin="swiss"] .tgl{
  width:34px; height:34px; border-radius:0; color:var(--ink-2);
  border-color:var(--line); background:none;
  transition:color .16s, border-color .16s, background .16s;
}
html[data-skin="swiss"] .tgl:hover{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
html[data-skin="swiss"] .tgl svg{width:17px; height:17px}
html[data-skin="swiss"] .skin-menu{
  border:1px solid var(--ink); border-radius:0; background:var(--paper); box-shadow:none;
}
html[data-skin="swiss"] .skin-menu button{border-radius:0}
html[data-skin="swiss"] .skin-menu .sw{border-radius:0; border-color:var(--ink)}

/* 首屏：字号拉到最大，行高压到极限 */
html[data-skin="swiss"] .hero{padding-top:82px}
html[data-skin="swiss"] h1{
  font-weight:700; letter-spacing:0; line-height:1.02;
  font-size:clamp(44px,7.2vw,100px);
}
html[data-skin="swiss"] h1 em{color:var(--accent); background:none}
html[data-skin="swiss"] .hero .kicker{color:var(--accent); letter-spacing:.24em; font-weight:500}
html[data-skin="swiss"] .lede{color:var(--ink-2); max-width:52ch}
html[data-skin="swiss"] .side{color:var(--ink-3)}
html[data-skin="swiss"] .rule i{background:var(--ink); height:1px}

html[data-skin="swiss"] .srch input{
  background:var(--paper); border-color:var(--ink); border-radius:0;
  padding:16px 84px 16px 48px; box-shadow:none;
}
html[data-skin="swiss"] .srch input:hover{border-color:var(--accent)}
html[data-skin="swiss"] .srch input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
html[data-skin="swiss"] .srch kbd{border-radius:0; border-color:var(--line); background:none}

/* 骨架 */
html[data-skin="swiss"] .index{border-top-color:var(--ink)}
html[data-skin="swiss"] #stage{border-left-color:var(--line)}
html[data-skin="swiss"] .spine h2{color:var(--ink-3)}
html[data-skin="swiss"] .spine a{border-radius:0}
html[data-skin="swiss"] .spine .nm{font-size:14px}
html[data-skin="swiss"] .spine a:hover{background:var(--accent-soft)}
html[data-skin="swiss"] .spine a[aria-current]::before{border-radius:0; width:3px}

/* 标题字重：换黑体后统一加粗 */
html[data-skin="swiss"] .ent-head .cat,
html[data-skin="swiss"] .res-head strong,
html[data-skin="swiss"] .grp-head h2,
html[data-skin="swiss"] .cat-block-head h3,
html[data-skin="swiss"] .sub-head,
html[data-skin="swiss"] .faq dt,
html[data-skin="swiss"] .prose h2,
html[data-skin="swiss"] .guide h3,
html[data-skin="swiss"] .best-card h2,
html[data-skin="swiss"] .tag-card .tn,
html[data-skin="swiss"] .rank-t a,
html[data-skin="swiss"] .list .ttl{font-weight:600; letter-spacing:0}

/* 只有等宽元素收字距：它们天然是英文和数字，不存在中文挤压问题 */
html[data-skin="swiss"] .bar .meta,
html[data-skin="swiss"] .bar .nav,
html[data-skin="swiss"] .crumbs,
html[data-skin="swiss"] .cat-meta,
html[data-skin="swiss"] .list .no,
html[data-skin="swiss"] .list .dom,
html[data-skin="swiss"] .facts dt,
html[data-skin="swiss"] .best-card .sub,
html[data-skin="swiss"] .best-card .foot,
html[data-skin="swiss"] .tag-card .tc,
html[data-skin="swiss"] .rank-no,
html[data-skin="swiss"] .rank-t .dom,
html[data-skin="swiss"] .list-head,
html[data-skin="swiss"] .spine h2,
html[data-skin="swiss"] .spine .no,
html[data-skin="swiss"] .spine .ct{letter-spacing:-.012em}

/* 列表行：回到细线分隔，图标走单色，悬停只换底色 */
html[data-skin="swiss"] .list li{
  border-bottom:1px solid var(--line); padding:11px 6px 11px 2px;
  transition:background .16s, padding-right .26s cubic-bezier(.2,.7,.3,1);
}
html[data-skin="swiss"] .list li:hover{background:var(--accent-soft)}
html[data-skin="swiss"] .list li:hover .row{transform:none}
html[data-skin="swiss"] .list img{
  filter:grayscale(1) contrast(1.05); opacity:1; border-radius:0;
  background:transparent; object-fit:contain;
}
html[data-skin="swiss"] .list li:hover img{filter:none}
html[data-skin="swiss"] .list .noicon{border-radius:0; background:var(--line-soft)}
html[data-skin="swiss"] .list .sum{color:var(--ink-2); opacity:1}
html[data-skin="swiss"] .list .ext{border-radius:0; border-color:var(--line); opacity:1}
html[data-skin="swiss"] .list li:hover .ext{color:#fff; background:var(--accent); border-color:var(--accent)}
html[data-skin="swiss"] .list .mark{border-radius:0; border-color:var(--accent); background:none}

/* 说明块：黑框，平面 */
html[data-skin="swiss"] .note{
  border:1px solid var(--ink); border-left:1px solid var(--ink); border-radius:0;
  background:var(--paper);
}
html[data-skin="swiss"] .note.ad-note{border-color:var(--accent); background:var(--paper)}
html[data-skin="swiss"] .note.review{
  border:0; border-top:1px solid var(--ink); border-radius:0; background:none;
}
html[data-skin="swiss"] .note.review p strong{
  background:linear-gradient(transparent 60%,var(--accent-soft) 60%);
}
html[data-skin="swiss"] .watch{
  background:var(--paper); border-left:3px solid var(--accent); border-radius:0;
}

/* 卡片：黑框，悬停时左侧压一道强调色 */
html[data-skin="swiss"] .tag-card,
html[data-skin="swiss"] .best-card{
  background:var(--paper); border-color:var(--ink); border-radius:0;
}
html[data-skin="swiss"] .tag-card:hover,
html[data-skin="swiss"] .best-card:hover{
  border-color:var(--accent); transform:none; box-shadow:inset 4px 0 0 var(--accent);
}
html[data-skin="swiss"] .best-card .tag-cat{border-radius:0; border-color:var(--line)}

/* 榜单条目 */
html[data-skin="swiss"] .rank-no{font-weight:600; font-size:15px}
html[data-skin="swiss"] .rank-head img{border-radius:0; background:transparent; object-fit:contain}
html[data-skin="swiss"] .rank-head .go{border-radius:0; border-color:var(--ink)}
html[data-skin="swiss"] .rank-head .go:hover{color:#fff; background:var(--accent); border-color:var(--accent)}

/* 按钮与返回顶部 */
html[data-skin="swiss"] .btn{
  background:var(--accent); border-radius:0; font-weight:600; box-shadow:none;
}
html[data-skin="swiss"] .btn:hover{transform:none; background:var(--ink); box-shadow:none}
html[data-skin="swiss"] .top{
  border-radius:0; border-color:var(--ink); color:var(--ink-2);
  background:var(--paper); box-shadow:none;
}
html[data-skin="swiss"] .top:hover{color:#fff; background:var(--accent); border-color:var(--accent)}

/* 页脚、广告标、属性标签 */
html[data-skin="swiss"] footer{border-top-color:var(--ink)}
html[data-skin="swiss"] .ad{border-radius:0; border-color:var(--accent); background:none}
html[data-skin="swiss"] .tags span,
html[data-skin="swiss"] .tags a{border-radius:0; border-color:var(--line)}
html[data-skin="swiss"] .tags span.on,
html[data-skin="swiss"] .tags a.on{border-color:var(--accent); background:var(--accent-soft)}

/* 窄屏 */
@media (max-width:640px){
  html[data-skin="swiss"] .spine{
    background:rgba(255,255,255,.94); border-bottom-color:var(--ink);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  html[data-skin="swiss"][data-theme="dark"] .spine{background:rgba(10,10,10,.94)}
  html[data-skin="swiss"] .list li{padding:12px 2px; border-radius:0}
  html[data-skin="swiss"] .hero{padding-top:34px}
  html[data-skin="swiss"] h1{font-size:clamp(38px,11vw,64px)}
  html[data-skin="swiss"] .tgl{width:32px; height:32px; border-radius:0}
  html[data-skin="swiss"] .skin-menu{min-width:236px; border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  html[data-skin="swiss"] .list li:hover,
  html[data-skin="swiss"] .tag-card:hover,
  html[data-skin="swiss"] .best-card:hover,
  html[data-skin="swiss"] .btn:hover{transform:none}
}

/* ══ 新粗野主义 ═════════════════════════════════════════════════
   厚黑描边 + 硬偏移阴影 + 高饱和色块。
   关键取舍：这套的噪音预算最高，所以粗描边和硬阴影**只给卡片级**
   （列表行的悬停态、说明块、卡片、按钮），列表行本身仍走细线，
   高饱和色**只做重音**（索引号、广告标、属性小标、强调字），不铺满背景。
   否则首页 100+ 行的列表会直接压垮阅读。 */

html[data-skin="brutal"]{
  color-scheme:light;
  --paper:#f4f4f0; --surface:#ffffff;
  --ink:#111111; --ink-2:#4a4a46; --ink-3:#6b6b65;
  --line:#111111; --line-soft:#dcdcd4;
  --accent:#2b4cff; --accent-soft:rgba(43,76,255,.1);
  --serif:var(--sans);
  --brd:#111111;
  --brd-2:rgba(17,17,17,.28);
  --hl-y:#ffe600; --hl-p:#ff4d8d; --hl-b:#2b4cff;
  --sh:4px 4px 0 var(--brd);
  --sh-sm:3px 3px 0 var(--brd);
}
html[data-skin="brutal"][data-theme="dark"]{
  color-scheme:dark;
  --paper:#101010; --surface:#1a1a1a;
  --ink:#f7f7f2; --ink-2:#b8b8b0; --ink-3:#8f8f88;
  --line:#f7f7f2; --line-soft:#2e2e2c;
  --accent:#7d93ff; --accent-soft:rgba(125,147,255,.14);
  --brd:#f7f7f2;
  --brd-2:rgba(247,247,242,.3);
}
/* 纯色平涂，不加纹理 */
html[data-skin="brutal"] body::before{opacity:0}

html[data-skin="brutal"] .bar{
  background:var(--paper); border-bottom:3px solid var(--brd);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
html[data-skin="brutal"] .brand{font-weight:800; letter-spacing:-.02em}
html[data-skin="brutal"] .brand .seal{
  color:#111; background:var(--hl-y); border:1px solid var(--brd);
  border-radius:0; font-weight:700; padding:1px 5px;
}
html[data-skin="brutal"] .bar .nav{color:var(--ink-2); font-weight:500}
html[data-skin="brutal"] .bar .nav:hover{color:var(--accent); border-bottom:2px solid var(--accent)}
html[data-skin="brutal"] .tgl{
  width:34px; height:34px; border:2px solid var(--brd); border-radius:0; color:var(--ink);
  background:var(--paper);
  transition:transform .12s, box-shadow .12s, background .12s, color .12s;
}
html[data-skin="brutal"] .tgl:hover{
  background:var(--hl-y); color:#111; box-shadow:var(--sh-sm); transform:translate(-2px,-2px);
}
html[data-skin="brutal"] .tgl svg{width:17px; height:17px}
html[data-skin="brutal"] .skin-menu{
  border:2px solid var(--brd); border-radius:0; background:var(--paper); box-shadow:6px 6px 0 var(--brd);
}
html[data-skin="brutal"] .skin-menu button{border-radius:0}
html[data-skin="brutal"] .skin-menu button:hover{background:var(--hl-y)}
html[data-skin="brutal"] .skin-menu button:hover .nm,
html[data-skin="brutal"] .skin-menu button:hover .dsc,
html[data-skin="brutal"] .skin-menu button:hover .ck{color:#111}
html[data-skin="brutal"] .skin-menu .sw{border-radius:0; border:1px solid var(--brd)}

/* 首屏：强调字直接刷一块荧光黄 */
html[data-skin="brutal"] .hero{padding-top:78px}
html[data-skin="brutal"] h1{
  font-weight:800; letter-spacing:-.01em; line-height:1.04;
  font-size:clamp(42px,6.8vw,92px);
}
html[data-skin="brutal"] h1 em{
  color:#111; background:var(--hl-y); padding:0 .1em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
html[data-skin="brutal"] .hero .kicker{color:var(--ink); font-weight:700; letter-spacing:.2em}
html[data-skin="brutal"] .lede{color:var(--ink-2)}
html[data-skin="brutal"] .side{color:var(--ink-3)}
html[data-skin="brutal"] .rule i{
  height:6px;
  background:repeating-linear-gradient(45deg,var(--brd) 0 6px,transparent 6px 12px);
}

html[data-skin="brutal"] .srch input{
  background:var(--surface); border:2px solid var(--brd); border-radius:0;
  padding:16px 84px 16px 48px; box-shadow:var(--sh-sm);
  transition:box-shadow .12s, border-color .12s;
}
html[data-skin="brutal"] .srch input:focus{
  border-color:var(--accent); box-shadow:var(--sh-sm), 0 0 0 4px var(--accent-soft);
}
html[data-skin="brutal"] .srch kbd{
  border:2px solid var(--brd); border-radius:0; background:var(--hl-y); color:#111; font-weight:700;
}

/* 骨架：粗线分区 */
html[data-skin="brutal"] .index{border-top:3px solid var(--brd)}
html[data-skin="brutal"] #stage{border-left-color:var(--line-soft)}
html[data-skin="brutal"] .ent-head,
html[data-skin="brutal"] .res-head,
html[data-skin="brutal"] .list-head,
html[data-skin="brutal"] .grp-head{border-bottom:3px solid var(--brd)}
html[data-skin="brutal"] .facts{border-top:3px solid var(--brd)}
html[data-skin="brutal"] .cat-block-head{border-bottom:2px solid var(--brd)}
html[data-skin="brutal"] .spine h2{color:var(--ink); font-weight:700}
html[data-skin="brutal"] .spine a{border-radius:0}
html[data-skin="brutal"] .spine .nm{font-size:14px; font-weight:500}
html[data-skin="brutal"] .spine a:hover{background:var(--hl-y)}
html[data-skin="brutal"] .spine a:hover .no,
html[data-skin="brutal"] .spine a:hover .nm,
html[data-skin="brutal"] .spine a:hover .ct{color:#111}
html[data-skin="brutal"] .spine a[aria-current]{background:var(--hl-y); box-shadow:var(--sh-sm)}
html[data-skin="brutal"] .spine a[aria-current] .no,
html[data-skin="brutal"] .spine a[aria-current] .nm,
html[data-skin="brutal"] .spine a[aria-current] .ct{color:#111}
html[data-skin="brutal"] .spine a[aria-current]::before{display:none}

/* 标题字重 */
html[data-skin="brutal"] .ent-head .cat,
html[data-skin="brutal"] .res-head strong,
html[data-skin="brutal"] .grp-head h2,
html[data-skin="brutal"] .cat-block-head h3,
html[data-skin="brutal"] .sub-head,
html[data-skin="brutal"] .faq dt,
html[data-skin="brutal"] .prose h2,
html[data-skin="brutal"] .guide h3,
html[data-skin="brutal"] .best-card h2,
html[data-skin="brutal"] .tag-card .tn,
html[data-skin="brutal"] .rank-t a,
html[data-skin="brutal"] .list .ttl{font-weight:700; letter-spacing:-.008em}

/* 列表行：本体保持细线，悬停时才「抬起」成硬阴影卡片 */
html[data-skin="brutal"] .list li{
  border:2px solid transparent; border-bottom:2px solid var(--line-soft);
  border-radius:0; padding:11px 10px;
  transition:background .12s, box-shadow .12s, transform .12s, border-color .12s, padding-right .26s cubic-bezier(.2,.7,.3,1);
}
html[data-skin="brutal"] .list li:hover{
  background:var(--surface); border-color:var(--brd);
  box-shadow:var(--sh); transform:translate(-2px,-2px);
}
html[data-skin="brutal"] .list li:hover .row{transform:none}
html[data-skin="brutal"] .list img{
  filter:none; opacity:1; border-radius:0; background:transparent; object-fit:contain;
}
html[data-skin="brutal"] .list .noicon{border-radius:0; background:var(--line-soft)}
html[data-skin="brutal"] .list .sum{color:var(--ink-2); opacity:1}
html[data-skin="brutal"] .list .ext{border:2px solid var(--brd); border-radius:0; opacity:1}
html[data-skin="brutal"] .list li:hover .ext{color:#111; background:var(--hl-y); border-color:var(--brd)}
html[data-skin="brutal"] .list .mark{
  border:1px solid var(--brd); border-radius:0; background:var(--hl-p); color:#111; font-weight:700;
}

/* 说明块：黑框 + 硬阴影；广告声明单独给标题刷黄块，保证一眼看见 */
html[data-skin="brutal"] .note{
  border:2px solid var(--brd); border-left:2px solid var(--brd); border-radius:0;
  background:var(--surface); box-shadow:var(--sh-sm);
}
html[data-skin="brutal"] .note.ad-note{border-color:var(--brd); background:var(--surface)}
html[data-skin="brutal"] .note.ad-note h2{
  display:inline-block; margin-bottom:10px; padding:2px 8px;
  background:var(--hl-y); color:#111; border:1px solid var(--brd); font-weight:700;
}
html[data-skin="brutal"] .note.review{
  border:0; border-top:3px solid var(--brd); border-radius:0; background:none; box-shadow:none;
}
html[data-skin="brutal"] .note.review p strong{
  background:linear-gradient(transparent 58%,var(--hl-y) 58%);
}
html[data-skin="brutal"] .watch{
  background:var(--surface); border:2px solid var(--brd); border-left:8px solid var(--brd);
  border-radius:0; box-shadow:var(--sh-sm);
}

/* 卡片 */
html[data-skin="brutal"] .tag-card,
html[data-skin="brutal"] .best-card{
  background:var(--surface); border:2px solid var(--brd); border-radius:0; box-shadow:var(--sh);
}
html[data-skin="brutal"] .tag-card:hover,
html[data-skin="brutal"] .best-card:hover{
  border-color:var(--brd); transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--brd);
}
html[data-skin="brutal"] .best-card .tag-cat{
  border:1px solid var(--brd); border-radius:0; background:var(--hl-y); color:#111;
}
html[data-skin="brutal"] .tag-card .tc{color:var(--accent); font-weight:700}

/* 榜单条目：名次做成色块 */
html[data-skin="brutal"] .rank-item{border-bottom:2px solid var(--line-soft)}
html[data-skin="brutal"] .rank-no{
  min-width:0; padding:1px 6px; font-size:14px; font-weight:800; color:#111;
  background:var(--hl-y); border:1px solid var(--brd);
}
html[data-skin="brutal"] .rank-head img{border-radius:0; background:transparent; object-fit:contain}
html[data-skin="brutal"] .rank-head .go{
  border:2px solid var(--brd); border-radius:0; background:var(--surface); color:var(--ink);
}
html[data-skin="brutal"] .rank-head .go:hover{
  color:#111; background:var(--hl-y); border-color:var(--brd); box-shadow:var(--sh-sm);
}

/* 按钮与返回顶部 */
html[data-skin="brutal"] .btn{
  background:var(--hl-b); color:#fff; border:2px solid var(--brd); border-radius:0;
  font-weight:700; box-shadow:var(--sh);
  transition:transform .12s, box-shadow .12s;
}
html[data-skin="brutal"] .btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--brd)}
html[data-skin="brutal"][data-theme="dark"] .btn{background:var(--accent); color:#111}
html[data-skin="brutal"] .top{
  border:2px solid var(--brd); border-radius:0; color:var(--ink);
  background:var(--surface); box-shadow:var(--sh-sm);
}
html[data-skin="brutal"] .top:hover{color:#111; background:var(--hl-y); border-color:var(--brd)}

/* 页脚、广告标、属性标签 */
html[data-skin="brutal"] footer{border-top:3px solid var(--brd)}
html[data-skin="brutal"] .ad{
  border:1px solid var(--brd); border-radius:0; background:var(--hl-y); color:#111; font-weight:700;
}
html[data-skin="brutal"] .tags span,
html[data-skin="brutal"] .tags a{border:1px solid var(--brd-2); border-radius:0}
html[data-skin="brutal"] .tags span.on,
html[data-skin="brutal"] .tags a.on{border-color:var(--brd); background:var(--hl-y); color:#111}

/* 窄屏 */
@media (max-width:640px){
  html[data-skin="brutal"] .spine{
    background:var(--paper); border-bottom:3px solid var(--brd);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  html[data-skin="brutal"] .spine a:hover,
  html[data-skin="brutal"] .spine a[aria-current]{background:var(--hl-y); box-shadow:none}
  html[data-skin="brutal"] .spine a[aria-current]::before{display:none}
  html[data-skin="brutal"] .list li{padding:11px 8px; border-radius:0}
  html[data-skin="brutal"] .hero{padding-top:34px}
  html[data-skin="brutal"] h1{font-size:clamp(36px,10.5vw,60px)}
  html[data-skin="brutal"] .tgl{width:32px; height:32px; border-radius:0}
  html[data-skin="brutal"] .skin-menu{min-width:236px; border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  html[data-skin="brutal"] .list li:hover,
  html[data-skin="brutal"] .tag-card:hover,
  html[data-skin="brutal"] .best-card:hover,
  html[data-skin="brutal"] .btn:hover,
  html[data-skin="brutal"] .tgl:hover{transform:none}
}

/* ── 站点截图：列表右侧浮层 + 详情页右侧常显 ─────────────────
   数据是 Sites.ScreenshotUrl（后台截图或人工填写）。列表仍占满整行，
   截图作为浮层盖在列表右侧；纵向位置由 app.js 按当前悬停行计算，
   列表不足时允许完整截图向下延伸，避免按列表高度裁切。 */
.list-shell{position:relative}
.list-shell.has-rail{
  --shot-rail-width:300px; --shot-rail-gap:18px; display:block;
  /* 浮层里整页长图的自动滚动：每秒滚多少像素（显示尺寸）、最短/最长持续秒数。
     距离越短滚得越快，超长页面按 --shot-scroll-max 封顶（避免等太久）。
     纯调参用，app.js 读这两个值；不想滚就把 --shot-scroll-speed 设成 0。 */
  --shot-scroll-speed:45; --shot-scroll-min:3; --shot-scroll-max:25;
}
.list-rail{
  position:absolute; top:0; right:0; z-index:6; display:grid;
  width:var(--shot-rail-width); max-height:none; overflow:visible; pointer-events:none;
  transition:top .16s ease;
}
/* 两列列表：左右位置由 app.js 按被悬停行现算（贴到那一行的内侧），这里不写死 */
.list-rail .shot{
  grid-area:1 / 1; margin:0; padding:0; overflow:hidden;
  border:1px solid var(--line); border-radius:4px; background:var(--surface);
  box-shadow:0 12px 30px rgba(23,19,14,.10);
  opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s;
}
/* 列表截图只在悬停或键盘聚焦对应行时显示；默认留出右栏位置，避免出现时挤动列表。 */
.list-rail .shot.is-active{opacity:1; visibility:visible}
.shot-bar,.shot-frame .shot-bar{
  display:flex; align-items:center; gap:7px; padding:5px 9px;
  border-bottom:1px solid var(--line-soft); background:var(--paper);
  font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shot-dots{
  flex:0 0 auto; width:5px; height:5px; margin-right:18px; border-radius:50%; background:var(--line);
  box-shadow:9px 0 0 var(--line), 18px 0 0 var(--line);
}
.shot-domain{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shot img{display:block; width:100%; height:auto}
/* 列表悬停预览的裁切框：固定按首屏比例（1440×900）。
   首屏截图整张刚好放进来；整页长图比框高很多，由 app.js 让它在框里慢慢往下滚
   （鼠标离开回到顶部），所以这里只负责裁切。 */
.shot-canvas{display:block; aspect-ratio:1440 / 900; overflow:hidden}
.shot-canvas img{display:block; width:100%; height:auto; transform:translateY(0)}

/* 列表站点名称：15px（原来是 16.5px）。
   只限 641px 以上：窄屏那条 `.list .ttl{font-size:16px}` 写在前面，会被这里的
   同权重规则盖掉，触屏上标题就比正文还小了。 */
@media (min-width:641px){
  .list .ttl{font-size:15px}
}

/* 详情页：截图与正文 55 开、顶端与正文齐（不是与标题齐），标题独占整行。
   宽屏时长说明文字那一列仍然是 64ch 排版宽度。 */
.detail-grid{display:flex; flex-direction:column}
/* 截图框和列表浮层用同一套：固定 1440:900 的裁切框（.shot-canvas）。
   截图引擎现在默认截整页，一张 560×4000 的长图直接摊开会把这一列撑到四千多像素高，
   正文读完了右下角还空着一大块，截图说明也跟着掉到看不见的地方。框住之后
   首屏截图整张刚好放进来，长图由 app.js 在框里慢慢下滚（悬停滚动、移开复位）。 */
.detail-shot{margin:0 0 26px;
  --shot-scroll-speed:45; --shot-scroll-min:3; --shot-scroll-max:25}
.detail-shot .shot-frame{
  display:block; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--surface); box-shadow:0 14px 34px rgba(23,19,14,.12);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.detail-shot .shot-frame:hover{
  border-color:var(--accent); transform:translateY(-2px); box-shadow:0 18px 42px rgba(23,19,14,.18);
}
.detail-shot .shot-frame .shot-bar{border-bottom:1px solid var(--line)}
.detail-shot .shot-frame img{display:block; width:100%; height:auto}
.shot-cap{margin:9px 0 0; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.02em}

@media (min-width:1001px){
  .detail-wrap.has-shot{max-width:none}
  .detail-grid.has-shot{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start}
  .detail-grid.has-shot .detail-head{grid-column:1 / -1; grid-row:1}
  .detail-grid.has-shot .detail-main{grid-column:1; grid-row:2; min-width:0}
  /* 34px 与 .detail .body 的上边距一致：截图顶端和正文首行齐平，而不是和标题齐平 */
  .detail-grid.has-shot .detail-shot{grid-column:2; grid-row:2; margin:34px 0 0; position:sticky; top:88px}
}
@media (max-width:1000px){
  .list-rail{display:none}
}
@media (hover:none){
  .list-rail{display:none}
}
/* 只让被浮层垂直覆盖到的行让出右侧宽度，保持网址和外链图标可见；
   未覆盖的行保持原来的整行宽度。 */
@media (min-width:1001px) and (max-width:1199px) and (hover:hover){
  .list-shell.has-rail{--shot-rail-width:240px; --shot-rail-gap:14px}
  .list-shell.has-rail.is-previewing .list li.is-covered .row{grid-template-columns:34px 24px minmax(0,1fr) 96px}
}
@media (min-width:1001px) and (hover:hover){
  /* 让宽动画挂在各皮肤自己的 .list li transition 上（见上方各皮肤的 padding-right），
     这里别再写 transition，否则会把皮肤的悬停过渡整段顶掉——行会"啪"地瞬间变色/加阴影。 */
  .list-shell.has-rail.is-previewing .list li.is-covered{padding-right:calc(var(--shot-rail-width) + var(--shot-rail-gap))}
}
/* 详情页「同栏目其它站点」列表：页面本身已经常显一张首屏截图时不再重复浮层
   （正文列只剩半宽）；没有截图的详情页照常悬停预览。 */
.detail-main .list-shell.has-rail{display:block}
.detail-wrap.has-shot .list-rail{display:none}
@media (prefers-reduced-motion:reduce){
  .shot,.detail-shot .shot-frame{transition:none}
}