/* ==========================================================
   Snowbench（雪测，暂定名）Design System v1.1
   正式配色：③ 雪道标识 Piste & Patrol（html 无 data-theme 时即生效，见文件末尾主题块）
   :root 里保留的是 v4 原值（data-theme="v4" 时使用），变量名 --volt = 单一行动色、--ice = 数据色
   与 Modelflare / Castaly / Folkbench 同一家族：
   墨黑主按钮 + 单一高能强调色 + 等宽小标签 + 发丝线网格
   ========================================================== */
/* 本地字体（仅拉丁子集，CJK 走系统 PingFang / 思源黑体），不依赖 Google Fonts，国内可用 */
@font-face{font-family:"Inter";src:url(fonts/inter-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030-203A,U+2190-2193,U+2212,U+20AC}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jbmono-var-latin.woff2) format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030-203A,U+2190-2193,U+2212,U+20AC}

:root{
  /* P0 雪测样式基线。现网硬编码颜色与字号改走这些变量。 */
  --sb-bg:#F4F2ED;
  --sb-card:#FFFFFF;
  --sb-text:rgba(0,0,0,.80);
  --sb-text-2:rgba(0,0,0,.62);
  --sb-primary:#D8312B;
  --sb-primary-hover:#E23D36;
  --sb-primary-press:#BC2621;
  --sb-primary-soft:#F8E4E2;
  --sb-on-primary:#FFFFFF;
  --sb-accent:#8C6A2F;
  --sb-fav:#C48A1A;
  --sb-sale:#FF2442;
  --sb-night:#19191E;
  --sb-night-rgb:25,25,30;
  --sb-night-title:rgba(255,255,255,.84);
  --sb-night-panel:#222228;
  --sb-night-raise:#2C2C34;
  --sb-font:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --sb-fs-body:16px;
  --sb-fs-long:clamp(16px, 0.4vw + 15px, 18px);
  --sb-lh:1.7;
  --sb-fs-card:18px;
  --sb-fw-title:600;
  --sb-fs-group:24px;
  --sb-fs-page:32px;
  --sb-fs-page-m:24px;
  --sb-fs-param:14px;
  --sb-fs-badge:12px;
  --sb-measure:40em;

  /* ---- 品牌色 Brand ---- */
  --volt:#D7FF00;        /* 雪镜荧光：家族共用强调色，只做底色，不做文字色 */
  --volt-press:#C3EB00;
  --volt-soft:rgba(215,255,0,.16);
  --ice:#6FE8FF;         /* 冰川蓝：Snowbench 自有色，用于数据、实测、渐变 */
  --ice-deep:#0E7490;    /* 冰川蓝在浅色底上的文字版 */
  --grad:linear-gradient(90deg,#6FE8FF 0%,#B9F5A0 55%,#D7FF00 100%);
  /* 主题可替换的派生色（默认 = v4 原值） */
  --volt-hover:#CDF500; --on-volt:#0B0B0B; --volt-ring:rgba(215,255,0,.18); --volt-tint:rgba(215,255,0,.06);
  --logo-dot:var(--volt); --hero-tint:transparent; --hero-blend:normal;
  --accent:var(--volt); --data:var(--ice); /* 语义别名：单一行动色 / 数据色（新代码优先用这两个名字） */

  /* ---- 雪面 Snow（浅色章节） ---- */
  --canvas:#F5F5F3; --panel:#FFFFFF; --well:#EDEDEA; --sunk:#F0F0EE;
  --ink:#0B0C0D; --ink-hover:#2A2B2E; --ink-press:#000;
  --text:#0B0C0D; --text-2:#52525B; --text-3:#8A8A93; --text-dis:#B4B4BB;
  --line:rgba(24,24,27,.09); --line-2:rgba(24,24,27,.18); --line-3:rgba(24,24,27,.32);
  --text-body:#27272A; --line-press:#E6E6E3; --dis-bg:#E4E4E7;
  --canvas-rgb:245,245,243; --panel-rgb:255,255,255;

  /* ---- 夜雪 Night（深色章节） ---- */
  --night:#08090B; --night-panel:#141518; --night-raise:#1D1E22;
  --on-night:#F4F4F5; --on-night-2:#A1A1AA; --on-night-3:#6B6B74;
  --nline:rgba(255,255,255,.09); --nline-2:rgba(255,255,255,.18); --nline-3:rgba(255,255,255,.32);
  --glass:rgba(8,9,12,.62);
  --night-rgb:8,9,11; --night-press:#26272B; --night-dis-text:#55555C; --inv-hover:#DCDCE0; --inv-press:#C8C8CE;

  /* ---- 信号色 Signal ---- */
  --ok:#15803D; --ok-soft:#E7F6EC;        /* 实测完成 */
  --warn:#B45309; --warn-soft:#FDF1E1;    /* 待核对 / 提醒 */
  --bad:#C8322B; --bad-soft:#FCEBEA;      /* 不适合 / 错误（piste 主题：黑道黑 + ✕） */
  --bad-mark:"";                           /* 主题可在“不适合/DON'T”文字前加 ✕ */

  /* ---- 分类光（Castaly 式，只做 6px 圆点、细线和光晕） ---- */
  --c-first:#6FE8FF;   /* 入门首板 */
  --c-women:#FF8BCB;   /* 女款 */
  --c-carve:#FFB454;   /* 道内刻滑 */
  --c-allmtn:#A78BFA;  /* 全山 */

  /* ---- 字体 Type ---- */
  --sans:var(--sb-font);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,"PingFang SC","Noto Sans CJK SC",monospace;

  /* ---- 圆角 Radius ---- */
  --r-micro:2px; --r-tag:4px; --r-ctl:8px; --r-panel:12px; --r-pill:999px;

  /* ---- 间距 Space（4pt） ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s14:56px;
  --gutter:20px;

  /* ---- Mobile adaptation ---- */
  --bp-xs:360px; --bp-sm:390px; --bp-md:430px; --bp-tablet:768px; --bp-desktop:1024px;
  --safe-area-top:env(safe-area-inset-top,0px);
  --safe-area-right:env(safe-area-inset-right,0px);
  --safe-area-bottom:env(safe-area-inset-bottom,0px);
  --safe-area-left:env(safe-area-inset-left,0px);
  --font-size-body:var(--sb-fs-body); --font-size-input:16px; --tap-target:44px;

  /* ---- 阴影 Elevation：默认无阴影，靠发丝线分层 ---- */
  --e0:none;
  --e1:0 1px 2px rgba(24,24,27,.05),0 12px 28px rgba(24,24,27,.06);
  --e2:0 1px 2px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.28);

  /* ---- 动效 Motion ---- */
  --ease:cubic-bezier(.2,.8,.2,1); --fast:160ms; --normal:360ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:100%;overflow-x:hidden}
body{font-family:var(--sans);font-size:var(--font-size-body);color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1;overflow-wrap:anywhere}
img,video,canvas,svg{max-width:100%}
img{height:auto}
input,select,textarea{font-size:var(--font-size-input)}
a,button,input,select,textarea,[role="button"]{-webkit-tap-highlight-color:transparent}
.media-cover{display:block;width:100%;max-width:100%;object-fit:cover}
.scroll-x,.table-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
a{color:inherit;text-decoration:none}
.night{background:var(--night);color:var(--on-night)}

/* ---------- 字体层级 ---------- */
.t-display{font-size:var(--sb-fs-page);line-height:1.25;font-weight:var(--sb-fw-title);letter-spacing:-.02em;text-align:left}
.t-h1{font-size:var(--sb-fs-page);line-height:1.25;font-weight:var(--sb-fw-title);letter-spacing:-.02em;text-align:left}
.t-h2{font-size:var(--sb-fs-group);line-height:1.3;font-weight:var(--sb-fw-title);letter-spacing:-.015em;text-align:left}
.t-h3{font-size:var(--sb-fs-card);line-height:1.35;font-weight:var(--sb-fw-title);letter-spacing:-.01em;text-align:left}
.t-body{font-size:var(--sb-fs-body);line-height:var(--sb-lh);text-align:left;max-width:var(--sb-measure)}
.t-small{font-size:13px;line-height:1.5;color:var(--text-2)}
.night .t-small{color:var(--on-night-2)}
.t-cap{font-size:12px;line-height:1.45;color:var(--text-3)}
.t-num{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.grad-text{background:var(--grad-light,var(--grad));-webkit-background-clip:text;background-clip:text;color:transparent}
.night .grad-text{background-image:var(--grad)} /* 渐变字：深底用 --grad，浅底用 --grad-light（主题可选） */

/* 等宽小标签（栏目身份）：SNOWBENCH / SECTION */
.eb{font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:500;display:inline-flex;gap:6px;align-items:center}
.eb b{color:var(--text);font-weight:600}
.night .eb{color:var(--on-night-3)} .night .eb b{color:var(--on-night)}
.mono{font-family:var(--mono)}

/* ---------- 图标 ---------- */
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.s{width:16px;height:16px}

/* ---------- 按钮 ---------- */
.btn{--h:48px;height:var(--h);padding:0 20px;border-radius:var(--r-ctl);border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--sans);letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;transition:background var(--fast) var(--ease),transform var(--fast) var(--ease),border-color var(--fast)}
.btn.md{--h:40px;font-size:14px;padding:0 16px}
.btn.sm{--h:32px;font-size:13px;padding:0 12px;border-radius:6px}
.btn.block{display:flex;width:100%}
.btn-volt{background:var(--volt);color:var(--on-volt)}
.btn-volt.is-hover{background:var(--volt-hover)}.btn-volt.is-press{background:var(--volt-press);transform:translateY(1px)}
.btn-bad{background:var(--bad);color:#fff}
.btn-bad.is-hover,.btn-bad:hover{background:color-mix(in srgb,var(--bad) 88%,#000)}
.btn-bad.is-press,.btn-bad:active{background:color-mix(in srgb,var(--bad) 76%,#000);transform:translateY(1px)}
/* The default piste accent is the shared red action color; other themes use
 * the existing --bad signal token so this AI entry stays red everywhere. */
html:not([data-theme]) .btn-bad,html[data-theme="piste"] .btn-bad{background:var(--volt);color:var(--on-volt)}
html:not([data-theme]) .btn-bad.is-hover,html[data-theme="piste"] .btn-bad.is-hover,
html:not([data-theme]) .btn-bad:hover,html[data-theme="piste"] .btn-bad:hover{background:var(--volt-hover)}
html:not([data-theme]) .btn-bad.is-press,html[data-theme="piste"] .btn-bad.is-press,
html:not([data-theme]) .btn-bad:active,html[data-theme="piste"] .btn-bad:active{background:var(--volt-press)}
.btn-ink{background:var(--ink);color:var(--sb-on-primary)}
.btn-ink.is-hover{background:var(--ink-hover)}.btn-ink.is-press{background:var(--ink-press);transform:translateY(1px)}
.night .btn-ink,.btn-ink.inv{background:var(--on-night);color:var(--ink)}
.btn-line{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-line.is-hover{background:var(--sunk)}.btn-line.is-press{background:var(--line-press);transform:translateY(1px)}
.night .btn-line{border-color:var(--nline-2);color:var(--on-night)}
.night .btn-line.is-hover{background:var(--night-raise)}.night .btn-line.is-press{background:var(--night-press)}
.btn-ghost{background:transparent;color:var(--text);padding:0 4px}
.btn-ghost.is-hover{text-decoration:underline;text-underline-offset:4px}
.night .btn-ghost{color:var(--on-night)}
.btn.is-focus{box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--ink)}
.night .btn.is-focus{box-shadow:0 0 0 2px var(--night),0 0 0 4px var(--volt)}
.btn-ghost.is-dis{background:transparent!important}.btn.is-dis,.btn:disabled{background:var(--dis-bg);color:var(--text-dis);border-color:transparent;cursor:not-allowed}
.night .btn.is-dis{background:var(--night-press);color:var(--night-dis-text)}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:.7}
.btn-icon{width:40px;height:40px;border-radius:var(--r-ctl);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:var(--panel);color:var(--text)}
.night .btn-icon{background:transparent;border-color:var(--nline-2);color:var(--on-night)}
.btn-icon.bare{border-color:transparent;background:transparent}
.btn-icon.on{color:var(--sb-fav)}
.sb-sale,.sale-badge{display:inline-flex;align-items:center;max-width:8em;padding:0 6px;border-radius:var(--r-tag);background:var(--sb-sale);color:var(--sb-on-primary);font-size:var(--sb-fs-badge);font-weight:var(--sb-fw-title);line-height:1.4;white-space:nowrap}
.sb-heart.on,.heart.on{color:var(--sb-sale);background:transparent}

/* ---------- 筛选胶囊 Chip ---------- */
.chip{height:32px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text);background:var(--panel);white-space:nowrap}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--sb-on-primary)}
.chip .n{font-family:var(--mono);font-size:11px;color:var(--text-3)} .chip.on .n{color:#9A9AA2}
.night .chip{background:transparent;border-color:var(--nline-2);color:var(--on-night)}
.night .chip.on{background:var(--on-night);color:var(--ink)}
.chip .dot,.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:none}

/* ---------- 型号标签 Tag（Castaly 式等宽小标签） ---------- */
.tag{white-space:nowrap;flex:none;height:24px;padding:0 8px;border-radius:var(--r-tag);border:1px solid var(--line-2);display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--text-2);background:var(--panel)}
.night .tag{background:rgba(255,255,255,.04);border-color:var(--nline-2);color:var(--on-night-2)}

/* ---------- 状态徽章：中立性的核心 ---------- */
.st{height:24px;padding:0 9px 0 8px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--sans);letter-spacing:.01em;white-space:nowrap}
.st i{font:500 10px/1 var(--mono);letter-spacing:.06em;opacity:.7;font-style:normal}
.st-test{background:var(--ink);color:var(--sb-on-primary)}
.st-test::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--volt);box-shadow:0 0 0 3px var(--volt-ring)}
.night .st-test{background:var(--volt);color:var(--on-volt)}.night .st-test::before{background:var(--on-volt);box-shadow:none}
.st-res{background:transparent;color:var(--text-2);border:1px dashed var(--line-3)}
.st-res::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor}
.night .st-res{color:var(--on-night-2);border-color:var(--nline-3)}
.st-tbd{background:var(--warn-soft);color:var(--warn)}
.st-tbd::before{content:"";width:6px;height:6px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.st-ad{background:var(--sunk);color:var(--text-3);font-weight:500}

/* ---------- 水平条 Level meter ---------- */
.lvl{display:flex;align-items:center;gap:8px}
.lvl .seg{display:flex;gap:3px}
.lvl .seg i{width:14px;height:4px;border-radius:1px;background:var(--line-2)}
.lvl .seg i.on{background:var(--ink)}
.night .lvl .seg i{background:var(--nline-2)} .night .lvl .seg i.on{background:var(--volt)}
.lvl span{font:500 11px/1 var(--mono);color:var(--text-3);letter-spacing:.04em}

/* ---------- 卡片 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel)}
.night .card,.card.dark{background:var(--night-panel);border-color:var(--nline);color:var(--on-night)}
.knowledge-term-card{display:flex;flex-direction:column;gap:var(--s4);color:var(--text);cursor:pointer;transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.knowledge-term-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.knowledge-term-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.knowledge-term-card .foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-top:auto;padding-top:var(--s2)}
/* 准星角标（MF 网格语言） */
.xh{position:relative}
.xh::before,.xh::after{content:"";position:absolute;width:9px;height:9px;pointer-events:none}
.xh::before{left:8px;top:8px;border-left:1px solid var(--line-3);border-top:1px solid var(--line-3)}
.xh::after{right:8px;bottom:8px;border-right:1px solid var(--line-3);border-bottom:1px solid var(--line-3)}

/* 雪具卡 Gear card */
.gc{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.gc .im{aspect-ratio:4/5;background:var(--well);display:flex;align-items:center;justify-content:center;position:relative}
.gc .im img{max-height:84%;max-width:70%;object-fit:contain;mix-blend-mode:multiply}
.gc .im .no,.no{font:500 10px/1.4 var(--mono);color:var(--text-3);letter-spacing:.08em;text-align:center}
.gc .im .idx{position:absolute;left:12px;top:12px;font:500 11px/1 var(--mono);color:var(--text-3)}
.gc .im .st{position:absolute;right:8px;top:8px;height:22px;font-size:var(--sb-fs-badge)}
.gc .bd{padding:12px 12px 14px;display:flex;flex-direction:column;gap:6px}
.gc .br{font:500 var(--sb-fs-badge)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:6px}
.gc .nm{font-size:var(--sb-fs-card);font-weight:var(--sb-fw-title);letter-spacing:-.01em;line-height:1.35;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc .mt{font:500 var(--sb-fs-param)/1.4 var(--sans);color:var(--text-2);display:flex;gap:8px;margin-top:2px;font-variant-numeric:tabular-nums}
.gc .mt span+span::before{content:"·";margin-right:8px;color:var(--text-3)}

/* 品类入门指南 Primer：一个品类的入门问题。分类色只用 .dot，状态用 .st。 */
.primer{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);scroll-margin-top:var(--s3)}
.primer-list{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s4);padding:0 var(--gutter)}
.primer-h{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.primer-meta{margin-left:auto;display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.primer-q .q{display:grid;grid-template-columns:var(--s8) 1fr;column-gap:var(--s2);align-items:start;padding:var(--s3) 0;border-top:1px solid var(--line)}
.primer-q .q:first-child{border-top:0;padding-top:0}
.primer-q .q:last-child{padding-bottom:0}
.primer-q .ask{display:block;font-weight:600;color:var(--text)}
.primer-q .t-small{display:block;margin-top:var(--s1)}
.primer-acts{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.primer-note{margin-top:var(--s4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.primer-note .sts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.night .primer-q .q{border-color:var(--nline)}
.night .primer-q .ask{color:var(--on-night)}

/* 榜单行 Rank row */
.rk{display:grid;grid-template-columns:34px 1fr 52px;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.rk:first-child{border-top:0}
.rk .n{font:500 13px/1 var(--mono);color:var(--text-3)}
.rk .n.top{color:var(--text);font-weight:700}
.rk b{display:-webkit-box;font-size:var(--sb-fs-card);font-weight:var(--sb-fw-title);letter-spacing:-.01em;line-height:1.35;text-align:left;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rk p{font-size:12.5px;color:var(--text-2);margin-top:3px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rk .th{width:52px;height:52px;border-radius:var(--r-ctl);background:var(--well);display:flex;align-items:center;justify-content:center;overflow:hidden}
.rk .th img{max-height:90%;max-width:80%;mix-blend-mode:multiply}

/* 参数表 Spec table */
.spec{display:grid}
.spec>div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.spec>div:first-child{border-top:0}
.spec dt{font:500 var(--sb-fs-param)/1.5 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--text-3)}
.spec dt em{display:block;font:500 var(--sb-fs-param)/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--text-2);font-style:normal}
.spec dd{font-size:var(--sb-fs-param);line-height:1.55;color:var(--text);font-variant-numeric:tabular-nums}
.night .spec>div{border-color:var(--nline)} .night .spec dd{color:var(--on-night)} .night .spec dt em{color:var(--on-night-2)}

/* 评分条 Score bar */
.sb-row{display:grid;grid-template-columns:72px 1fr 34px;gap:12px;align-items:center;padding:8px 0}
.sb-row span{font-size:var(--sb-fs-param);color:var(--text-2)}
.sb-row i{height:6px;border-radius:1px;background:var(--line);position:relative;overflow:hidden}
.sb-row i em{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.sb-row b{font:var(--sb-fw-title) var(--sb-fs-param)/1 var(--sans);text-align:right;color:var(--sb-accent);font-variant-numeric:tabular-nums}
.night .sb-row span{color:var(--on-night-2)} .night .sb-row i{background:var(--nline)} .night .sb-row i em{background:var(--grad)}

/* 区块标题（带发丝线导轨） */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 var(--gutter)}
.sh .l{display:flex;flex-direction:column;gap:10px}
.sh .more{font-size:13px;font-weight:500;color:var(--text-2);display:inline-flex;align-items:center;gap:4px}
.night .sh .more{color:var(--on-night-2)}
.rail{display:flex;align-items:center;gap:8px;padding:0 var(--gutter);margin:40px 0 18px}
.rail::after{content:"";flex:1;height:1px;background:var(--line)}
.rail i{width:5px;height:5px;background:var(--line-3);border-radius:1px}
.night .rail::after{background:var(--nline)} .night .rail i{background:var(--nline-3)}

/* 输入框 */
.field{height:48px;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--panel);display:flex;align-items:center;gap:10px;padding:0 14px;font-size:var(--font-size-body);color:var(--text-3)}
.field.focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,12,13,.08);color:var(--text)}
.night .field,.field.glass{background:rgba(255,255,255,.06);border-color:var(--nline-2);color:var(--on-night-3)}
.field kbd{margin-left:auto;font:500 10.5px/1 var(--mono);color:var(--text-3);border:1px solid var(--line-2);border-radius:4px;padding:4px 6px}

/* 开关 */
.sw{width:40px;height:24px;border-radius:12px;background:var(--line-2);position:relative;flex:none}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw.on{background:var(--ink)} .sw.on::after{left:19px}

/* 分段控件 */
.seg-c{display:inline-flex;padding:3px;border-radius:var(--r-ctl);background:var(--sunk);border:1px solid var(--line)}
.seg-c span,.seg-c a{height:32px;padding:0 16px;display:flex;align-items:center;border-radius:6px;font-size:14px;font-weight:500;color:var(--text-2)}
.seg-c span.on,.seg-c a.on{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}

/* 公告条（家族标志） */
.ann{height:36px;background:var(--volt);color:var(--on-volt);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);font:500 12px/1 var(--mono);letter-spacing:.01em}
.ann b{font-family:var(--sans);font-weight:600}

/* 底部导航：固定在视口底部，并与居中内容栏对齐。.app 有 overflow:hidden，sticky 只会停在文档末尾。 */
.tabbar{position:fixed;left:50%;right:auto;bottom:0;width:min(720px,100%);transform:translateX(-50%);margin-left:0;margin-right:0;height:calc(64px + var(--safe-area-bottom));padding-bottom:var(--safe-area-bottom);background:rgba(var(--panel-rgb),.92);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);z-index:30}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:500;color:var(--text-3);position:relative}
.tabbar a.on{color:var(--text)}
.tabbar a.on::before{content:"";position:absolute;top:-1px;width:24px;height:2px;background:var(--ink)}
.tabbar a.fd .ic{color:var(--on-volt)}
.tabbar a.fd span.pill{width:44px;height:28px;border-radius:14px;background:var(--volt);display:flex;align-items:center;justify-content:center}

/* 提示块 */
.note{border-radius:var(--r-ctl);padding:12px 14px;font-size:13px;line-height:1.55;display:flex;gap:10px}
.note.warn{background:var(--warn-soft);color:#7A3A06}
.note.bad{background:var(--bad-soft);color:var(--bad)} /* 不适合提示：配 ic('x') 图标 */
.note.info{background:var(--sunk);color:var(--text-2);border:1px solid var(--line)}
.disc{font-size:11.5px;line-height:1.65;color:var(--text-3);padding:20px var(--gutter) 28px}
.night .btn-ink.is-hover,.btn-ink.inv.is-hover{background:var(--inv-hover)}.night .btn-ink.is-press,.btn-ink.inv.is-press{background:var(--inv-press)}

/* @@THEMES-BEGIN@@ 由 01_设计/样式源码/palettes.py 生成，勿手改 */
html[data-theme="blue"]{
  /* 蓝调时刻 Blue Hour —— 日落后二十分钟，雪山泛蓝，只有山尖还留着一抹珊瑚色余晖。 */
  --volt:#FF8A6E; --volt-press:#F2735A; --volt-hover:#FF9A82; --on-volt:#0B1424;
  --volt-soft:rgba(255,138,110,0.16); --volt-ring:rgba(255,138,110,0.22); --volt-tint:rgba(255,138,110,0.08); --logo-dot:#FF8A6E;
  --ice:#8FCBFF; --ice-deep:#1D5C96;
  --grad:linear-gradient(90deg,#8FCBFF 0%,#C4B5F0 55%,#FFA68C 100%);
  --canvas:#F2F5F9; --panel:#FFFFFF; --well:#E5EBF3; --sunk:#ECF0F6;
  --canvas-rgb:242,245,249; --panel-rgb:255,255,255;
  --ink:#0F1B2E; --ink-hover:#24344D; --ink-press:#070E1A;
  --text:#0F1B2E; --text-2:#48586F; --text-3:#76839A; --text-dis:#B1BACA; --text-body:#1E2A3D;
  --line:rgba(15,27,46,0.09); --line-2:rgba(15,27,46,0.18); --line-3:rgba(15,27,46,0.32);
  --line-press:#E5EBF3; --dis-bg:#E5EBF3;
  --night:#0B1424; --night-panel:#13203A; --night-raise:#1C2B48; --night-rgb:11,20,36;
  --on-night:#EEF3FA; --on-night-2:#A3B3CA; --on-night-3:#71839E;
  --glass:rgba(11,20,36,0.62); --night-press:#1C2B48;
  --c-first:#7CC4FF; --c-women:#F4A6C8; --c-carve:#FFBE7A; --c-allmtn:#A99CF6;
  --hero-img:"ph/hero.jpg"; --hero-tint:transparent; --hero-blend:normal;
}
html[data-theme="alpen"]{
  /* 日照金山 Golden Peaks —— 清晨第一缕阳光打在雪峰上，玫瑰粉过渡到金色，山脚还压在岩影里。 */
  --volt:#F0B545; --volt-press:#DFA233; --volt-hover:#F6C25E; --on-volt:#1C1713;
  --volt-soft:rgba(240,181,69,0.16); --volt-ring:rgba(240,181,69,0.22); --volt-tint:rgba(240,181,69,0.08); --logo-dot:#F0B545;
  --ice:#F4A99C; --ice-deep:#A3453A;
  --grad:linear-gradient(90deg,#F4A99C 0%,#F7BE86 55%,#F0C95E 100%);
  --canvas:#F7F3EC; --panel:#FFFDF9; --well:#EFE8DD; --sunk:#F3EDE4;
  --canvas-rgb:247,243,236; --panel-rgb:255,253,249;
  --ink:#1C1713; --ink-hover:#3A3029; --ink-press:#0D0A08;
  --text:#1C1713; --text-2:#5C5248; --text-3:#8B7F72; --text-dis:#C2B8AC; --text-body:#2E2620;
  --line:rgba(28,23,19,0.09); --line-2:rgba(28,23,19,0.18); --line-3:rgba(28,23,19,0.32);
  --line-press:#EFE8DD; --dis-bg:#EFE8DD;
  --night:#16120F; --night-panel:#221D18; --night-raise:#2D2620; --night-rgb:22,18,15;
  --on-night:#F7F1E9; --on-night-2:#BDB1A3; --on-night-3:#8A7E71;
  --glass:rgba(22,18,15,0.62); --night-press:#2D2620;
  --c-first:#8FC3E6; --c-women:#F29DB4; --c-carve:#EA8A5C; --c-allmtn:#B4A0DA;
  --hero-img:"ph/hero.jpg"; --hero-tint:rgba(255,150,80,.30); --hero-blend:soft-light;
}
html:not([data-theme]),html[data-theme="piste"]{
  /* 雪道标识 Piste & Patrol —— 雪场的视觉语言：纯白雪面、黑色缆车塔，巡逻队红是唯一的警示色，绿蓝红黑标出难度。 */
  --volt:#D8312B; --volt-press:#BC2621; --volt-hover:#E23D36; --on-volt:#FFFFFF;
  --volt-soft:rgba(216,49,43,0.16); --volt-ring:rgba(216,49,43,0.22); --volt-tint:rgba(216,49,43,0.08); --logo-dot:#D8312B;
  --ice:#6AA8FF; --ice-deep:#1E5BC6;
  --best-soft:rgba(31,163,91,.14);
  --bad:#0E0F11; --bad-soft:#ECEDEF; --bad-mark:"✕ ";
  --grad:linear-gradient(90deg,#6AA8FF 0%,#B4D2FF 55%,#F5F6F7 100%);
  --grad-light:linear-gradient(90deg,#1E5BC6 0%,#2F6FE4 55%,#6AA8FF 100%);
  --canvas:#F5F6F7; --panel:#FFFFFF; --well:#EBEDEF; --sunk:#F0F1F3;
  --canvas-rgb:245,246,247; --panel-rgb:255,255,255;
  --ink:#0E0F11; --ink-hover:#2A2C30; --ink-press:#000000;
  --text:#0E0F11; --text-2:#50545B; --text-3:#83878F; --text-dis:#B6B9BF; --text-body:#24262A;
  --line:rgba(14,15,17,0.09); --line-2:rgba(14,15,17,0.18); --line-3:rgba(14,15,17,0.32);
  --line-press:#EBEDEF; --dis-bg:#EBEDEF;
  --night:#0C0D0F; --night-panel:#17181B; --night-raise:#212328; --night-rgb:12,13,15;
  --on-night:#F5F6F7; --on-night-2:#A7ABB2; --on-night-3:#72767E;
  --glass:rgba(12,13,15,0.62); --night-press:#212328;
  --c-first:#1FA35B; --c-women:#2F6FE4; --c-carve:#D8312B; --c-allmtn:#F28C28;
  --hero-img:"ph/hero.jpg"; --hero-tint:transparent; --hero-blend:normal;
}
html[data-theme="piste"] .night,html:not([data-theme]) .night{--bad:#F5F6F7; --bad-soft:rgba(255,255,255,.08)}
html[data-theme="piste"] .lvl .seg i.on:nth-child(1),html:not([data-theme]) .lvl .seg i.on:nth-child(1){background:#1FA35B} html[data-theme="piste"] .night .lvl .seg i.on:nth-child(1),html:not([data-theme]) .night .lvl .seg i.on:nth-child(1){background:#1FA35B}
html[data-theme="piste"] .lvl .seg i.on:nth-child(2),html:not([data-theme]) .lvl .seg i.on:nth-child(2){background:#2F6FE4} html[data-theme="piste"] .night .lvl .seg i.on:nth-child(2),html:not([data-theme]) .night .lvl .seg i.on:nth-child(2){background:#2F6FE4}
html[data-theme="piste"] .lvl .seg i.on:nth-child(3),html:not([data-theme]) .lvl .seg i.on:nth-child(3){background:#D8312B} html[data-theme="piste"] .night .lvl .seg i.on:nth-child(3),html:not([data-theme]) .night .lvl .seg i.on:nth-child(3){background:#D8312B}
html[data-theme="piste"] .lvl .seg i.on:nth-child(4),html:not([data-theme]) .lvl .seg i.on:nth-child(4){background:#0E0F11} html[data-theme="piste"] .night .lvl .seg i.on:nth-child(4),html:not([data-theme]) .night .lvl .seg i.on:nth-child(4){background:#F5F6F7}
html[data-theme="piste"] .lvl .seg i.on:nth-child(5),html:not([data-theme]) .lvl .seg i.on:nth-child(5){background:#0E0F11} html[data-theme="piste"] .night .lvl .seg i.on:nth-child(5),html:not([data-theme]) .night .lvl .seg i.on:nth-child(5){background:#F5F6F7}
html[data-theme="pine"]{
  /* 松林木屋 Pine & Cabin —— 雪落进松林，木屋窗里亮着一盏铜色的灯。安静、温暖、有烟火气。 */
  --volt:#E8955A; --volt-press:#D58247; --volt-hover:#EEA36D; --on-volt:#10201A;
  --volt-soft:rgba(232,149,90,0.16); --volt-ring:rgba(232,149,90,0.22); --volt-tint:rgba(232,149,90,0.08); --logo-dot:#E8955A;
  --ice:#A6D8BC; --ice-deep:#2E6B4F;
  --grad:linear-gradient(90deg,#A6D8BC 0%,#E6D6A2 55%,#EBA06C 100%);
  --canvas:#F3F4EF; --panel:#FFFFFD; --well:#E7EAE2; --sunk:#EEF0E9;
  --canvas-rgb:243,244,239; --panel-rgb:255,255,253;
  --ink:#10201A; --ink-hover:#243A31; --ink-press:#07110D;
  --text:#10201A; --text-2:#4B5A52; --text-3:#7C8981; --text-dis:#B6BFB8; --text-body:#1F2D27;
  --line:rgba(16,32,26,0.09); --line-2:rgba(16,32,26,0.18); --line-3:rgba(16,32,26,0.32);
  --line-press:#E7EAE2; --dis-bg:#E7EAE2;
  --night:#0D1914; --night-panel:#15241D; --night-raise:#1E3028; --night-rgb:13,25,20;
  --on-night:#EEF3EE; --on-night-2:#A6B6AB; --on-night-3:#738579;
  --glass:rgba(13,25,20,0.62); --night-press:#1E3028;
  --c-first:#86CDA8; --c-women:#F0A3B6; --c-carve:#E9B44E; --c-allmtn:#9DB4E8;
  --hero-img:"ph/hero.jpg"; --hero-tint:rgba(20,90,60,.42); --hero-blend:color;
}
/* Mobile controls keep a 44px hit area even when their visual treatment is compact. */
@media (max-width:767px){
  .btn.md,.btn.sm,.btn-icon,.tabbar a{min-width:var(--tap-target);min-height:var(--tap-target)}
  .btn-icon{width:var(--tap-target);height:var(--tap-target)}
  .chip{min-width:var(--tap-target);min-height:var(--tap-target);height:auto}
}

/* @@THEMES-END@@ */

/* 默认雪道主题的行动色与字标点保持最早的巡逻红 #D8312B。中性色仍走雪测基线；促销红只留给 .sb-sale / .sb-heart。 */
html:not([data-theme]),html[data-theme="piste"]{
  --canvas:var(--sb-bg);
  --panel:var(--sb-card);
  --canvas-rgb:244,242,237;
  --text:var(--sb-text);
  --text-body:var(--sb-text);
  --text-2:var(--sb-text-2);
  --accent:var(--sb-accent);
  --night:var(--sb-night);
  --night-rgb:var(--sb-night-rgb);
  --night-panel:var(--sb-night-panel);
  --night-raise:var(--sb-night-raise);
  --night-press:var(--sb-night-raise);
  --on-night:var(--sb-night-title);
  --glass:rgba(25,25,30,.62);
}
h1,h2,h3,h4,.t-display,.t-h1,.t-h2,.t-h3,.t-body,.art,.thread-body{text-align:left}
.t-num,.kn b,.score-big b,.dtbl b,.cmp td,.price{font-variant-numeric:tabular-nums}
.score-big b{color:var(--sb-accent)}
@media (max-width:767px){
  .t-display,.t-h1{font-size:var(--sb-fs-page-m)}
  .t-body,.art p,.art li,.thread-body{font-size:var(--sb-fs-body);line-height:var(--sb-lh)}
}
@media (min-width:768px){
  .t-display,.t-h1{font-size:var(--sb-fs-page)}
  .t-body,.art p,.art li,.thread-body,.knowledge-plain-copy,.knowledge-contribution-copy{font-size:var(--sb-fs-long);line-height:var(--sb-lh);max-width:var(--sb-measure)}
}

/* 配色预设：只覆盖 --sb-* 颜色变量，不改 --sb-fs-* / 字号 / 字重。
   无 data-theme 时仍走 :root 红色版。data-theme="red" 把 :root 现有颜色原样写回。 */
html[data-theme="red"]{
  --sb-bg:#F4F2ED;
  --sb-card:#FFFFFF;
  --sb-text:rgba(0,0,0,.80);
  --sb-text-2:rgba(0,0,0,.62);
  --sb-primary:#D8312B;
  --sb-primary-hover:#E23D36;
  --sb-primary-press:#BC2621;
  --sb-primary-soft:#F8E4E2;
  --sb-on-primary:#FFFFFF;
  --sb-accent:#8C6A2F;
  --sb-fav:#C48A1A;
  --sb-sale:#FF2442;
  --sb-night:#19191E;
  --sb-night-rgb:25,25,30;
  --sb-night-title:rgba(255,255,255,.84);
  --sb-night-panel:#222228;
  --sb-night-raise:#2C2C34;
}
html[data-theme="green"]{
  /* 森林绿：浅底 + 自然绿主色。正文 #1A2A20 / 背景 #F2F6F1，白字 / 主色 #1B7340。 */
  --sb-bg:#F2F6F1;
  --sb-card:#FFFFFF;
  --sb-text:#1A2A20;
  --sb-text-2:#3E5346;
  --sb-primary:#1B7340;
  --sb-primary-hover:#1F7C3C;
  --sb-primary-press:#145C32;
  --sb-primary-soft:#E3F3E8;
  --sb-on-primary:#FFFFFF;
  --sb-accent:#4F6B32;
  --sb-fav:#8A5A0B;
  --sb-sale:#C81E38;
  --sb-night:#121A15;
  --sb-night-rgb:18,26,21;
  --sb-night-title:rgba(255,255,255,.88);
  --sb-night-panel:#1C2820;
  --sb-night-raise:#26362C;
}
html[data-theme="dark"]{
  /* 极夜：深色背景 + 浅色文字。正文 #E7EEF7 / 背景 #0E141C，深字 / 冰色主色 #8FD4FF。 */
  --sb-bg:#0E141C;
  --sb-card:#182230;
  --sb-text:#E7EEF7;
  --sb-text-2:#C3CEDB;
  --sb-primary:#8FD4FF;
  --sb-primary-hover:#B4E3FF;
  --sb-primary-press:#69C4F6;
  --sb-primary-soft:rgba(143,212,255,.16);
  --sb-on-primary:#07131C;
  --sb-accent:#E2C48A;
  --sb-fav:#F0C36A;
  --sb-sale:#FF8B9A;
  --sb-night:#070B11;
  --sb-night-rgb:7,11,17;
  --sb-night-title:rgba(255,255,255,.90);
  --sb-night-panel:#121A26;
  --sb-night-raise:#1C2736;
}
html[data-theme="blue"]{
  /* 海洋蓝：只补 --sb-*。上方 Blue Hour 仍管 --volt/--canvas，两边属性不重叠。 */
  --sb-bg:#F1F5F8;
  --sb-card:#FFFFFF;
  --sb-text:#12202C;
  --sb-text-2:#3A5164;
  --sb-primary:#0F5F99;
  --sb-primary-hover:#1471B5;
  --sb-primary-press:#0C4C7A;
  --sb-primary-soft:#E3F0F8;
  --sb-on-primary:#FFFFFF;
  --sb-accent:#0E6B6B;
  --sb-fav:#8A5A0B;
  --sb-sale:#C81E38;
  --sb-night:#0D1824;
  --sb-night-rgb:13,24,36;
  --sb-night-title:rgba(255,255,255,.88);
  --sb-night-panel:#162636;
  --sb-night-raise:#203246;
}
html[data-theme="sand"]{
  /* 暖沙：暖色背景 + 深棕正文。正文 #2A2118 / 背景 #F6F0E6，白字 / 陶土主色 #A3522A。 */
  --sb-bg:#F6F0E6;
  --sb-card:#FFFBF5;
  --sb-text:#2A2118;
  --sb-text-2:#5C4E3E;
  --sb-primary:#A3522A;
  --sb-primary-hover:#A85630;
  --sb-primary-press:#7E3E1E;
  --sb-primary-soft:#F8E8DC;
  --sb-on-primary:#FFFFFF;
  --sb-accent:#8C5A2B;
  --sb-fav:#8A4E12;
  --sb-sale:#C42338;
  --sb-night:#1C1612;
  --sb-night-rgb:28,22,18;
  --sb-night-title:rgba(255,255,255,.88);
  --sb-night-panel:#2A221C;
  --sb-night-raise:#3A2E26;
}