/* ══════════════════════════════════════════════════════════════════════════
   deskcrush 官网 — 账户 / 定价 / 账户中心
   ─────────────────────────────────────────────────────────────────────────
   token 与配色规则全部沿用 site.css：零色相中性色 + 唯一朱红。
   这三个页面里朱红只出现在**警示语义**上（错误提示条、危险操作、超限提示），
   一次一处，从不铺成面。首页页脚那组待填朱红在这三页不出现，
   把「一区一处」的名额让给真正会报错的地方。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hidden 必须真的隐藏 ──────────────────────────────────────────────────
   浏览器让 `hidden` 生效靠的是 UA 样式表里那条 `[hidden]{display:none}`，
   它的优先级只有 (0,1,0)。本文件里凡是给某个 id 或类写了 display 的规则
   （`#signinHint{display:flex}`、`.fld-row{display:flex}`、`.con-grid{display:grid}`）
   都会把它压过去 —— 于是元素带着 hidden 属性照样显示，而 JS 那边
   `el.hidden = true` 看起来完全正常，两边都不报错。
   实测就栽在这上面：顶栏已经是登录态，「还没登录」的提示条还挂在页面上。
   这里的 !important 是必要的：hidden 表达的是「这块内容现在不相关」，
   任何布局规则都不该赢过它。 */
[hidden] { display: none !important; }

/* ── 页面骨架 ────────────────────────────────────────────────────────────── */
.page {
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding-top: 62px;                     /* 让开固定顶栏 */
}
.page > main { flex: 1; }

.page-head { padding: clamp(46px, 6vw, 84px) 0 clamp(26px, 3vw, 40px); }
.page-head .h1-s {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.14; letter-spacing: -.028em;
  font-weight: 600; font-family: var(--f-cn); margin-bottom: 12px;
}
.page-head .lede { max-width: 56ch; }

/* 顶栏里的账号入口 */
.nav-login {
  font-size: 13px; color: hsl(var(--ink-600));
  padding: 8px 2px; transition: color var(--t-fast) var(--e);
}
.nav-login:hover { color: hsl(var(--ink-900)); }
.nav-acc { display: inline-flex; align-items: center; gap: 10px; }
.nav-acc-q {
  font-family: var(--f-mono); font-size: 12px; color: hsl(var(--ink-700));
  border: 1px solid hsl(var(--line)); padding: 4px 8px;
}
.nav-acc-n { font-size: 13px; color: hsl(var(--ink-600)); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-acc:hover .nav-acc-n { color: hsl(var(--ink-900)); }

/* ── 表单 ────────────────────────────────────────────────────────────────── */
.fld { margin-bottom: 16px; display: block; }
.fld > label {
  display: block; font-size: 12px; color: hsl(var(--ink-500));
  font-family: var(--f-mono); letter-spacing: .06em; margin-bottom: 7px;
}
.fld input[type=text], .fld input[type=password], .fld input[type=email],
.fld input[type=number], .fld input[type=date], .fld select, .fld textarea {
  width: 100%; height: 44px; padding: 0 13px;
  background: hsl(var(--surface)); color: hsl(var(--ink-900));
  border: 1px solid hsl(var(--line)); border-radius: 0;
  font-family: var(--f-ui); font-size: 14.5px;
  transition: border-color var(--t-fast) var(--e), background var(--t-fast) var(--e);
  appearance: none; -webkit-appearance: none;
}
.fld input::placeholder { color: hsl(var(--ink-400)); }
.fld input:focus, .fld select:focus {
  outline: none; border-color: hsl(var(--ink-500)); background: hsl(var(--tile));
}
.fld.bad input, .fld.bad select { border-color: hsl(var(--alert) / .72); }
.fld-err { font-size: 12.5px; color: hsl(var(--alert)); margin-top: 6px; font-family: var(--f-cn); }
.fld-hint { font-size: 12px; color: hsl(var(--ink-400)); margin-top: 6px; line-height: 1.6; font-family: var(--f-cn); }
.fld-row { display: flex; gap: 10px; align-items: flex-start; }
.fld-row .fld { flex: 1; }
.fld-row .btn { height: 44px; flex: none; margin-top: 25px; }

.chk { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: hsl(var(--ink-600)); }
.chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.chk i {
  width: 15px; height: 15px; flex: none; border: 1px solid hsl(var(--ink-400));
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--t-fast) var(--e), background var(--t-fast) var(--e);
}
.chk input:checked + i { background: hsl(var(--ink-900)); border-color: hsl(var(--ink-900)); }
.chk input:checked + i::after {
  content: ''; width: 7px; height: 7px; background: hsl(var(--void));
}
.chk input:focus-visible + i { outline: 2px solid hsl(var(--ink-900)); outline-offset: 2px; }

/* 忙态按钮 */
.spin {
  width: 12px; height: 12px; flex: none; display: inline-block;
  border: 1.5px solid hsl(var(--ink-400)); border-top-color: transparent;
  border-radius: 50%; animation: spin .72s linear infinite; margin-right: 8px;
  vertical-align: -1px;
}
.btn.solid .spin { border-color: hsl(var(--void) / .45); border-top-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-busy { opacity: .78; cursor: progress; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
:root:not(.motion-on) .spin { animation-duration: 2.4s; }

.lnk {
  font-size: 12.5px; color: hsl(var(--ink-500)); background: none; border: 0;
  padding: 3px 7px; cursor: pointer; transition: color var(--t-fast) var(--e);
  font-family: var(--f-cn);
}
.lnk:hover { color: hsl(var(--ink-900)); }
.lnk.danger:hover { color: hsl(var(--alert)); }

.note { font-size: 13.5px; color: hsl(var(--ink-500)); line-height: 1.7; font-family: var(--f-cn); }
.note.warn { color: hsl(var(--ink-600)); padding-left: 12px; box-shadow: inset 2px 0 0 hsl(var(--alert)); }
.warn-t { color: hsl(var(--alert)); }
.dim { color: hsl(var(--ink-400)); }
.tiny { font-size: 11.5px; }
.ta-r { text-align: right; }
.nowrap { white-space: nowrap; }

/* ── 登录 / 注册 ─────────────────────────────────────────────────────────── */
.auth-wrap { max-width: 460px; margin: 0 auto; padding: clamp(40px, 7vh, 90px) 0 90px; }
.auth-card { background: hsl(var(--surface)); border: 1px solid hsl(var(--line)); padding: clamp(24px, 4vw, 38px); }
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-head .lockup { font-size: 20px; margin-bottom: 16px; }
.auth-head p { font-size: 13.5px; color: hsl(var(--ink-500)); }

.auth-tabs { display: flex; gap: 2px; margin-bottom: 24px; border-bottom: 1px solid hsl(var(--line)); }
.auth-tab {
  flex: 1; padding: 11px 4px; font-size: 14px; color: hsl(var(--ink-500));
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t-fast) var(--e), border-color var(--t-fast) var(--e);
  font-family: var(--f-cn);
}
.auth-tab:hover { color: hsl(var(--ink-800)); }
.auth-tab.on { color: hsl(var(--ink-900)); border-bottom-color: hsl(var(--ink-900)); }

.auth-pane .btn.solid { width: 100%; margin-top: 6px; }
.auth-foot { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.auth-alt { margin-top: 20px; padding-top: 18px; border-top: 1px solid hsl(var(--line-2)); text-align: center; font-size: 13px; color: hsl(var(--ink-500)); }
.auth-alt a { color: hsl(var(--ink-800)); border-bottom: 1px solid hsl(var(--ink-300)); padding-bottom: 1px; }
.auth-alt a:hover { color: hsl(var(--ink-900)); border-color: hsl(var(--ink-600)); }

#authWarn { margin-bottom: 20px; }
.aff-note {
  font-size: 12.5px; color: hsl(var(--ink-500)); background: hsl(var(--tile));
  padding: 10px 12px; margin-bottom: 16px; font-family: var(--f-cn);
}
.aff-note b { font-family: var(--f-mono); color: hsl(var(--ink-800)); }

.keybox {
  background: hsl(var(--void)); border: 1px solid hsl(var(--line));
  padding: 14px; font-size: 13px; word-break: break-all; color: hsl(var(--ink-800));
  margin: 14px 0; user-select: all; line-height: 1.6;
}

/* ── 定价：支付方式 ──────────────────────────────────────────────────────── */
.pay-channels { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.ch-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--ink-400)); margin-right: 4px; }
.ch {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 14px; font-size: 13.5px; color: hsl(var(--ink-600));
  border: 1px solid hsl(var(--line)); font-family: var(--f-cn);
  transition: color var(--t-fast) var(--e), border-color var(--t-fast) var(--e), background var(--t-fast) var(--e);
}
.ch:hover { color: hsl(var(--ink-900)); border-color: hsl(var(--ink-300)); }
.ch i { width: 5px; height: 5px; flex: none; box-shadow: inset 0 0 0 1px hsl(var(--ink-400)); }
.ch.on { color: hsl(var(--ink-900)); border-color: hsl(var(--ink-500)); background: hsl(var(--tile)); }
.ch.on i { background: hsl(var(--ink-900)); box-shadow: none; }
.ch-min { font-family: var(--f-mono); font-size: 11px; color: hsl(var(--ink-400)); font-style: normal; }

/* ── 套餐卡 ──────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 1px; background: hsl(var(--line-2)); border: 1px solid hsl(var(--line-2)); }
.plan { background: hsl(var(--void)); padding: 28px 24px 24px; position: relative; display: flex; flex-direction: column; transition: background var(--t-base) var(--e); }
.plan:hover { background: hsl(var(--surface)); }
.plan.feat { background: hsl(var(--surface)); }
.plan.feat::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: hsl(var(--ink-800)); }
.plan-flag {
  position: absolute; top: 16px; right: 20px; font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--ink-500));
}
.plan-t { font-size: 17px; font-weight: 600; font-family: var(--f-cn); margin-bottom: 4px; }
.plan-s { font-size: 13px; color: hsl(var(--ink-500)); margin-bottom: 18px; font-family: var(--f-cn); }
.plan-p { margin: 14px 0 20px; display: flex; align-items: baseline; gap: 6px; }
.plan-p b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; font-family: var(--f-ui); }
.plan-p span { font-size: 13px; color: hsl(var(--ink-500)); }
.plan-f { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; flex: 1; }
.plan-f li { font-size: 13px; color: hsl(var(--ink-600)); display: flex; gap: 9px; align-items: baseline; font-family: var(--f-cn); }
.plan-f li::before { content: ''; width: 4px; height: 4px; background: hsl(var(--ink-400)); flex: none; transform: translateY(-2px); }
.plan-cta { display: flex; flex-direction: column; gap: 8px; }
.plan-cta .btn { width: 100%; }

/* ── 加油包 ──────────────────────────────────────────────────────────────── */
.pack-box { background: hsl(var(--surface)); border: 1px solid hsl(var(--line)); padding: clamp(22px, 3vw, 32px); }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin-bottom: 22px; }
.pack {
  position: relative; padding: 18px 10px; border: 1px solid hsl(var(--line));
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: border-color var(--t-fast) var(--e), background var(--t-fast) var(--e);
}
.pack:hover { border-color: hsl(var(--ink-300)); }
.pack.on { border-color: hsl(var(--ink-700)); background: hsl(var(--tile)); }
.pack-a { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: hsl(var(--ink-900)); }
.pack-u { font-size: 11.5px; color: hsl(var(--ink-400)); font-family: var(--f-cn); }
.pack-d { position: absolute; top: 6px; right: 8px; font-size: 10.5px; font-style: normal; font-family: var(--f-mono); color: hsl(var(--ink-500)); }
.pack-foot { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.pack-foot .fld { flex: 1 1 180px; margin-bottom: 0; }
.pack-price { font-size: 14px; color: hsl(var(--ink-600)); flex: 1 1 200px; font-family: var(--f-cn); }
.pack-price b { color: hsl(var(--ink-900)); font-size: 19px; font-family: var(--f-ui); }

.redeem-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.redeem-box .fld { flex: 1; margin-bottom: 0; }
.redeem-box .btn { height: 44px; flex: none; }

#signinHint, #pendBar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: hsl(var(--surface)); border: 1px solid hsl(var(--line));
  padding: 13px 16px; margin-bottom: 28px; font-size: 13.5px; color: hsl(var(--ink-600));
  font-family: var(--f-cn);
}
#pendBar { box-shadow: inset 2px 0 0 hsl(var(--ink-600)); }

/* ── 账户中心 ────────────────────────────────────────────────────────────── */
.con-grid { display: grid; grid-template-columns: 176px 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; padding-bottom: 90px; }
.con-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.con-nav a {
  font-size: 13.5px; color: hsl(var(--ink-500)); padding: 9px 12px;
  border-left: 2px solid transparent; font-family: var(--f-cn);
  transition: color var(--t-fast) var(--e), border-color var(--t-fast) var(--e), background var(--t-fast) var(--e);
}
.con-nav a:hover { color: hsl(var(--ink-800)); background: hsl(var(--surface)); }
.con-nav a.on { color: hsl(var(--ink-900)); border-left-color: hsl(var(--ink-900)); background: hsl(var(--surface)); }
.con-nav .sp { height: 14px; }

.con-pane > h2 { font-size: 20px; font-weight: 600; font-family: var(--f-cn); margin-bottom: 6px; }
.con-pane > .note { margin-bottom: 22px; }
.sub-h { margin: 26px 0 10px; color: hsl(var(--ink-700)); }
.sub-h:first-child { margin-top: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: hsl(var(--line-2)); border: 1px solid hsl(var(--line-2)); margin-bottom: 26px; }
.stat { background: hsl(var(--void)); padding: 20px; }
.stat dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--ink-400)); margin-bottom: 9px; }
.stat dd { font-size: 26px; font-weight: 600; letter-spacing: -.028em; color: hsl(var(--ink-900)); }
.stat dd.sm { font-size: 15px; font-weight: 400; color: hsl(var(--ink-700)); word-break: break-all; }

.acc-id { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.acc-id b { font-size: 22px; font-weight: 600; font-family: var(--f-cn); }
.acc-id span { font-family: var(--f-mono); font-size: 12px; color: hsl(var(--ink-400)); }

.aff-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.aff-line code { font-family: var(--f-mono); font-size: 12px; color: hsl(var(--ink-600)); background: hsl(var(--surface)); padding: 7px 10px; word-break: break-all; }

.sub { border: 1px solid hsl(var(--line)); padding: 20px; margin-bottom: 12px; background: hsl(var(--surface)); }
.sub.off { opacity: .55; }
.sub-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sub-hd b { font-size: 16px; font-family: var(--f-cn); }
.sub-st { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: hsl(var(--ink-500)); }
.sub-q { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: hsl(var(--ink-600)); font-family: var(--f-cn); }
.sub-q b { font-size: 19px; color: hsl(var(--ink-900)); font-family: var(--f-ui); }
.sub-inf { font-size: 17px; color: hsl(var(--ink-900)); }
.sub-t { margin-top: 12px; font-size: 11.5px; color: hsl(var(--ink-400)); }
.bar { height: 3px; background: hsl(var(--line)); margin-top: 12px; }
.bar i { display: block; height: 100%; background: hsl(var(--ink-700)); transition: width var(--t-slow) var(--e); }

.pref-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.pref-row label { font-size: 13px; color: hsl(var(--ink-500)); font-family: var(--f-cn); }
.pref-row select { width: auto; min-width: 170px; height: 38px; padding: 0 11px; background: hsl(var(--surface)); color: hsl(var(--ink-800)); border: 1px solid hsl(var(--line)); font-size: 13.5px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: hsl(var(--ink-400)); font-weight: 400;
  padding: 0 10px 9px; border-bottom: 1px solid hsl(var(--line));
}
.tbl td { padding: 11px 10px; border-bottom: 1px solid hsl(var(--line-2)); color: hsl(var(--ink-700)); font-family: var(--f-cn); vertical-align: middle; }
.tbl td.mono, .tbl th.mono { font-family: var(--f-mono); }
.tbl tr:hover td { background: hsl(var(--surface)); }
.tbl-wrap { overflow-x: auto; }

.prof-form { max-width: 420px; }
.danger-zone { margin-top: 42px; padding-top: 22px; border-top: 1px solid hsl(var(--line-2)); }

/* ── 弹层 ────────────────────────────────────────────────────────────────── */
.modal-back {
  position: fixed; inset: 0; z-index: 200;
  background: hsl(var(--void) / .82); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity var(--t-base) var(--e);
}
.modal-back.in { opacity: 1; }
.modal {
  width: 100%; max-width: 400px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: hsl(var(--surface)); border: 1px solid hsl(var(--line));
  transform: translateY(8px) scale(.99); transition: transform var(--t-base) var(--e);
}
.modal-back.in .modal { transform: none; }
.modal-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid hsl(var(--line-2)); }
.modal-hd h3 { font-size: 15px; font-weight: 600; font-family: var(--f-cn); }
.modal-x { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: hsl(var(--ink-500)); transition: color var(--t-fast) var(--e); }
.modal-x:hover { color: hsl(var(--ink-900)); }
.modal-bd { padding: 20px; }
body.modal-open { overflow: hidden; }

/* ── 支付弹层 ────────────────────────────────────────────────────────────── */
.pay { text-align: center; }
.pay-sub { font-size: 13.5px; color: hsl(var(--ink-600)); font-family: var(--f-cn); }
.pay-price { font-size: 15px; color: hsl(var(--ink-800)); margin-top: 6px; font-family: var(--f-cn); }
.pay-price b { font-size: 20px; }
.pay-qr { width: 208px; height: 208px; margin: 20px auto 14px; background: #fff; padding: 8px; }
.pay-qr svg { width: 100%; height: 100%; }
.pay-qr-fail { margin: 18px 0; padding: 14px; border: 1px solid hsl(var(--line)); text-align: left; }
.pay-qr-fail p { font-size: 12.5px; color: hsl(var(--ink-600)); font-family: var(--f-cn); }
.pay-qr-fail .mono { margin-top: 8px; word-break: break-all; color: hsl(var(--ink-500)); font-family: var(--f-mono); }
.pay-alipay { margin: 24px 0 18px; }
.pay-tip { font-size: 13px; color: hsl(var(--ink-600)); font-family: var(--f-cn); line-height: 1.7; }
.pay-tip.dim { font-size: 12px; color: hsl(var(--ink-400)); margin-top: 8px; }
.pay-tip a { color: hsl(var(--ink-800)); border-bottom: 1px solid hsl(var(--ink-400)); }
.pay-state {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; margin-top: 8px; background: hsl(var(--tile));
  font-size: 13.5px; color: hsl(var(--ink-600)); font-family: var(--f-cn);
}
.pay-state.ok { color: hsl(var(--ink-900)); box-shadow: inset 2px 0 0 hsl(var(--ink-800)); }
.pay-state.err { color: hsl(var(--ink-700)); box-shadow: inset 2px 0 0 hsl(var(--alert)); text-align: left; line-height: 1.6; }
.pay-left { margin-left: 4px; font-size: 12px; color: hsl(var(--ink-400)); }
.pay-no { margin-top: 12px; font-size: 11px; color: hsl(var(--ink-400)); word-break: break-all; }

/* ── 提示条 ──────────────────────────────────────────────────────────────── */
.toast-host {
  position: fixed; z-index: 300; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: min(520px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  background: hsl(var(--raised)); border: 1px solid hsl(var(--line));
  color: hsl(var(--ink-800)); font-size: 13.5px; line-height: 1.6;
  padding: 12px 16px; width: 100%; font-family: var(--f-cn);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-base) var(--e), transform var(--t-base) var(--e);
  pointer-events: auto;
}
.toast.in { opacity: 1; transform: none; }
.toast.err { box-shadow: inset 2px 0 0 hsl(var(--alert)); }
.toast.ok { box-shadow: inset 2px 0 0 hsl(var(--ink-800)); }

/* ── 页脚（这几页用精简版） ─────────────────────────────────────────────── */
.foot-slim {
  border-top: 1px solid hsl(var(--line-2)); padding: 26px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: hsl(var(--ink-400)); font-family: var(--f-mono);
}
.foot-slim a { color: hsl(var(--ink-500)); }
.foot-slim a:hover { color: hsl(var(--ink-800)); }
.foot-slim nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ── 窄屏 ────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .con-grid { grid-template-columns: 1fr; gap: 22px; }
  .con-nav {
    position: static; flex-direction: row; overflow-x: auto; gap: 0;
    border-bottom: 1px solid hsl(var(--line)); padding-bottom: 0;
  }
  .con-nav a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .con-nav a.on { border-left: 0; border-bottom-color: hsl(var(--ink-900)); }
  .con-nav .sp { display: none; }
}
@media (max-width: 560px) {
  .auth-wrap { padding-top: 24px; }
  .auth-card { padding: 22px 18px; }
  .fld-row { flex-wrap: wrap; }
  .fld-row .btn { margin-top: 0; width: 100%; }
  .redeem-box { flex-wrap: wrap; }
  .redeem-box .btn { width: 100%; }
  .pay-qr { width: 178px; height: 178px; }
  .wechat-qr { width: 190px; height: 190px; }
  .plans { grid-template-columns: 1fr; }
}

/* 关掉动效时，过渡一律缩到几乎为零（沿用首页那个开关的类） */
:root:not(.motion-on) .toast,
:root:not(.motion-on) .modal,
:root:not(.motion-on) .modal-back { transition-duration: 1ms; }

/* 套餐接口需要鉴权时的占位。实测 /api/subscription/plans 未登录返回 401 ——
   这一块是「登录后可见」，不是错误态，所以不挂朱红。 */
.plan-locked { grid-column: 1 / -1; background: hsl(var(--void)); padding: clamp(28px, 4vw, 44px); text-align: center; }
.plan-locked .note { margin-bottom: 16px; max-width: 46ch; margin-left: auto; margin-right: auto; }

/* ── 单点登录入口 ────────────────────────────────────────────────────────── */
.sso-block { display: flex; flex-direction: column; gap: 10px; }
.sso-btn { width: 100%; }
.sso-btn .ic { width: 15px; height: 15px; flex: none; }
.sso-note { text-align: center; margin-top: 4px; font-size: 12px; }
#ssoWarn { margin-top: 6px; }

/* ── 微信扫码登录（保持全站中性色，不使用品牌色）────────────────────────── */
.wechat-block { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.wechat-btn { width: 100%; }
.wechat-btn .ic { width: 17px; height: 17px; flex: none; }
.wechat-note { text-align: center; font-size: 12px; }
.wechat-modal { max-width: 430px; }
.wechat-lede { text-align: center; }
.wechat-qr {
  width: 220px; height: 220px; margin: 20px auto 14px; padding: 9px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid hsl(var(--line));
}
.wechat-qr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wechat-qr .spin { width: 20px; height: 20px; border-color: #777; border-top-color: transparent; }
.wechat-state {
  min-height: 22px; margin-bottom: 13px; text-align: center;
  font-size: 12.5px; line-height: 1.65; color: hsl(var(--ink-500)); font-family: var(--f-cn);
}
.wechat-state.err { color: hsl(var(--alert)); }
.wechat-mock { margin-bottom: 13px; padding: 12px; border: 1px dashed hsl(var(--line)); }
.wechat-mock .note { margin-bottom: 9px; text-align: center; }
.wechat-mock > div { display: flex; gap: 8px; }
.wechat-mock .btn { flex: 1; padding-left: 8px; padding-right: 8px; }
#wechatRefresh { display: block; width: 100%; }
#wechatRegForm .btn.solid { width: 100%; }
.wechat-back { display: block; margin: 13px auto 0; }

/* 「或使用账号密码」分隔线 */
.auth-div { display: flex; align-items: center; gap: 14px; margin: 26px 0 22px; }
.auth-div::before, .auth-div::after {
  content: ''; flex: 1; height: 1px; background: hsl(var(--line));
}
.auth-div span {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: hsl(var(--ink-400)); white-space: nowrap;
}

/* 单点登录为主入口时，账号密码区退为次要层级 */
#pwdBlock.secondary .auth-tab { font-size: 13px; }
#pwdBlock.secondary .btn.solid {
  background: none; border-color: hsl(var(--line)); color: hsl(var(--ink-800));
}
#pwdBlock.secondary .btn.solid:hover {
  background: hsl(var(--tile)); border-color: hsl(var(--ink-300)); color: hsl(var(--ink-900));
}

/* ── 条款类文档 ──────────────────────────────────────────────────────────── */
.legal { max-width: 780px; margin: 0 auto; padding-bottom: clamp(70px, 9vw, 120px); }
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center;
  font-family: var(--f-mono); font-size: 11.5px; color: hsl(var(--ink-400));
  padding: 14px 0; margin-bottom: 34px;
  border-top: 1px solid hsl(var(--line-2)); border-bottom: 1px solid hsl(var(--line-2));
}
.legal h2 {
  font-size: 19px; font-weight: 600; font-family: var(--f-cn);
  letter-spacing: -.015em; margin: 44px 0 14px; color: hsl(var(--ink-900));
  padding-top: 18px; border-top: 1px solid hsl(var(--line-2));
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal h3 {
  font-size: 15px; font-weight: 600; font-family: var(--f-cn);
  margin: 26px 0 10px; color: hsl(var(--ink-800));
}
.legal p, .legal li {
  font-size: 14.5px; line-height: 1.85; color: hsl(var(--ink-600));
  font-family: var(--f-cn); margin-bottom: 12px;
}
.legal strong, .legal b { color: hsl(var(--ink-900)); font-weight: 600; }
.legal ul, .legal ol { padding-left: 20px; margin-bottom: 14px; }
.legal li { margin-bottom: 7px; }
.legal li::marker { color: hsl(var(--ink-400)); }
.legal a { color: hsl(var(--ink-800)); border-bottom: 1px solid hsl(var(--ink-300)); }
.legal a:hover { color: hsl(var(--ink-900)); border-color: hsl(var(--ink-600)); }
.legal .tbl { margin: 18px 0 24px; }
.legal .tbl td { line-height: 1.7; font-size: 13.5px; }
.legal .tbl td:first-child { color: hsl(var(--ink-800)); white-space: nowrap; }

/* 目录 */
.toc { background: hsl(var(--surface)); border: 1px solid hsl(var(--line)); padding: 20px 24px; margin-bottom: 40px; }
.toc h4 {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: hsl(var(--ink-400)); font-weight: 400; margin-bottom: 12px;
}
.toc ol { padding-left: 18px; margin: 0; }
.toc li { margin-bottom: 5px; font-size: 13.5px; }
.toc a { border-bottom: 0; color: hsl(var(--ink-600)); }
.toc a:hover { color: hsl(var(--ink-900)); border-bottom: 0; }

/* 需要着重的条款：只用左标记，不铺面 */
.legal .callout {
  padding: 14px 16px; background: hsl(var(--surface));
  box-shadow: inset 2px 0 0 hsl(var(--ink-700)); margin: 18px 0 22px;
}
.legal .callout p:last-child { margin-bottom: 0; }

/* 窄屏下的条款表格：首列不再强制不换行，并允许表格在自己的框内横向滚动。
   页面主体任何宽度下都不得出现横向滚动条 —— 宽内容自己滚，不能把整页顶出去。 */
@media (max-width: 680px) {
  .legal .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legal .tbl tbody, .legal .tbl thead { display: table; width: 100%; min-width: 100%; }
  .legal .tbl td:first-child { white-space: normal; }
  .legal .tbl td, .legal .tbl th { font-size: 12.5px; padding: 9px 8px; }
  .legal .toc { padding: 16px 18px; }
}
@media (max-width: 420px) {
  .legal .tbl td, .legal .tbl th { font-size: 12px; padding: 8px 6px; }
}