/* 脉谱健康 · 服务端门户 —— 深色科技感，单一强调色
   设计上下文：受众=长期管理检验指标的患者家属与慢病自我管理者（常替父母记录）；
   用途=把检验单转成趋势、就诊前导出报告、判断用药是否起效；
   基调=医疗级的可信与克制，动效服务于「看懂」，不表演。
   说明：青绿强调色取自产品本身配色（品牌一致），非泛用 AI 配色。 */

:root{
  --bg:#08090C; --bg-2:#0C0E13; --panel:#11141A; --panel-2:#151922;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.14);
  --text:#E9EDF3; --dim:#98A2B3; --faint:#6B7484;
  --accent:#2FD4C4; --accent-dim:rgba(47,212,196,.14); --accent-line:rgba(47,212,196,.4);
  --ok:#4ADE80; --warn:#F5B301; --danger:#FF5C5C; --info:#6BA8FF;
  --display:"Space Grotesk",ui-sans-serif,system-ui,"PingFang SC",sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* 缓动：只用减速曲线，不用回弹/弹性 */
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease:var(--ease-out-expo);
  --r:10px; --r-lg:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* hidden 属性必须能覆盖 .login-wrap/.shell/.lb 的 display，否则隐藏不生效 */
[hidden]{display:none !important}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.62;font-weight:400;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:56px 56px;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#04110F}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--dim)}
.grow{flex:1}

/* focus */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* 锚点避开吸顶导航 */
section[id]{scroll-margin-top:78px}

/* ---------- 滚动进度 ---------- */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;pointer-events:none}
.prog i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:30;background:rgba(8,9,12,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:500;letter-spacing:.02em}
.brand .logo{width:26px;height:26px;flex:0 0 26px}
/* 🆕 v490：日 / 夜双版 logo 用 <picture class="logo"> 承载，内层 img 撑满外框并切圆角 */
.brand picture.logo{display:block;overflow:hidden;border-radius:6px}
.brand picture.logo img{display:block;width:100%;height:100%;object-fit:cover}
.brand b{font-size:15.5px}
.brand em{font-style:normal;color:var(--faint);font-size:12px;font-family:var(--mono);letter-spacing:.04em}
nav.site{display:flex;gap:26px;font-size:13.5px;color:var(--dim)}
nav.site a{position:relative;transition:color .18s var(--ease)}
nav.site a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease-out-quart)}
nav.site a:hover{color:var(--text)}
nav.site a:hover::after,nav.site a.on::after{transform:scaleX(1)}
nav.site a.on{color:var(--accent)}
/* 中文能在任意字之间换行 ⇒ 页签会被折成「下载安/装」。两个页面的导航一起 nowrap，
   保证折行只发生在**项与项之间**，行为与观感一致。 */
nav.site a{white-space:nowrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;
  border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--text);
  font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease-out-quart),box-shadow .18s var(--ease);
}
.btn:hover{border-color:var(--accent-line);background:var(--accent-dim);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#04110F;font-weight:500}
.btn.solid:hover{background:#57E3D4;border-color:#57E3D4;box-shadow:0 8px 22px -10px rgba(47,212,196,.7)}
.btn.ghost{border-color:var(--line)}
.btn.sm{min-height:34px;padding:0 13px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- hero ---------- */
.hero{padding:92px 0 64px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.2fr .95fr;gap:56px;align-items:end}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);display:inline-block}
h1{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.025em}
h1 .hl{color:var(--accent)}
.lede{margin-top:22px;max-width:38ch;font-size:16.5px;color:var(--dim)}
.hero-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hero-side{border-left:1px solid var(--line);padding-left:26px;display:grid;gap:14px;align-content:start}
.kpi{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:12px}
.kpi:last-child{border-bottom:0}
.kpi span{font-size:13px;color:var(--dim)}
.kpi b{font-family:var(--display);font-weight:500;font-size:20px;color:var(--text)}

/* ---------- 指标趋势卡片（签名动效） ---------- */
.mock{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 14px 12px;overflow:hidden;position:relative}
.mock::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 90% 0,var(--accent-dim),transparent 62%)}
.mock-top{display:flex;align-items:center;gap:9px;font-size:12.5px;padding-bottom:10px;border-bottom:1px solid var(--line);position:relative}
.mock-top b{font-weight:500;font-size:13px}
.chart{width:100%;height:auto;display:block;margin-top:6px;position:relative}
.ch-band{fill:rgba(47,212,196,.055);opacity:0;animation:chBand .9s var(--ease-out-expo) .15s forwards}
.ch-grid{stroke:var(--line-2);stroke-width:1}
.ch-ref{stroke:rgba(245,179,1,.5);stroke-width:1;stroke-dasharray:4 4}
.ch-lbl{fill:var(--faint);font-family:var(--mono);font-size:9px}
.ch-lbl.alert{fill:var(--danger);font-size:9.5px}
.ch-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:chDraw 1.7s var(--ease-out-expo) .35s forwards}
.ch-dots circle{fill:var(--bg);stroke:var(--accent);stroke-width:1.8;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:chDot .5s var(--ease-out-expo) forwards;animation-delay:calc(1.15s + var(--i) * .12s)}
.ch-hit{fill:var(--danger);transform-box:fill-box;transform-origin:center;opacity:0;animation:chDot .4s var(--ease-out-expo) 1.75s forwards}
.ch-pulse{fill:none;stroke:var(--danger);stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0;
  animation:chPulse 2.2s ease-out 1.9s infinite}
@keyframes chDraw{to{stroke-dashoffset:0}}
@keyframes chDot{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:none}}
@keyframes chBand{to{opacity:1}}
@keyframes chPulse{0%{opacity:.9;transform:scale(.45)}70%{opacity:0;transform:scale(2.7)}100%{opacity:0;transform:scale(2.7)}}
.mock-rows{display:grid;gap:0;margin-top:4px;position:relative}
.mrow{display:flex;align-items:baseline;gap:9px;font-size:12.5px;color:var(--dim);border-top:1px dashed var(--line);padding:8px 0}
.mrow b{font-family:var(--display);font-size:16px;color:var(--text);font-weight:500}
.mrow b.down{color:var(--danger)}
.mrow i{font-style:normal;font-size:11px;color:var(--faint);margin-left:auto}

/* ---------- hero 右侧视频卡（v582，替代原 .mock 指标趋势示意卡） ---------- */
.hero-video{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;position:relative;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.85)}
.hero-video::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 90% 0,var(--accent-dim),transparent 62%)}
.hero-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;position:relative}

/* ---------- sections ---------- */
section{padding:78px 0;border-bottom:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:38px;flex-wrap:wrap}
.sec-head h2{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3vw,2.05rem);letter-spacing:-.02em}
.sec-head p{color:var(--dim);font-size:14px;max-width:56ch;margin-top:8px}
.sec-head p b{color:var(--text);font-weight:500}
.sec-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* 6 windows */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.win{
  text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;color:inherit;font:inherit;cursor:pointer;display:grid;gap:14px;position:relative;overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease-out-quart),background-color .25s var(--ease);
}
.win::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0,var(--accent-dim),transparent 60%);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.win:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.win:hover::after{opacity:1}
.win .wh{display:flex;align-items:center;gap:11px;position:relative}
.win .ico{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);display:grid;place-items:center;flex:0 0 34px;background:var(--panel-2);transition:border-color .25s var(--ease),transform .3s var(--ease-out-quart)}
.win .ico svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.6;transition:transform .3s var(--ease-out-quart)}
.win:hover .ico{border-color:var(--accent-line)}
.win:hover .ico svg{transform:scale(1.12)}
.win h3{font-family:var(--display);font-weight:500;font-size:16.5px}
.win .no{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.win p{font-size:13.6px;color:var(--dim);position:relative}
.win ul{list-style:none;display:grid;gap:7px;position:relative}
.win li{font-size:12.8px;color:var(--faint);padding-left:15px;position:relative}
.win li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:1.5px;background:var(--accent)}
.win .go{position:relative;font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.04em;transition:transform .3s var(--ease-out-quart);display:inline-block}
.win:hover .go{transform:translateX(4px)}

/* ---------- 示例效果 ---------- */
.gal-head{display:flex;align-items:baseline;gap:14px;margin:34px 0 16px}
.gal-head:first-of-type{margin-top:0}
.gal-head h3{font-family:var(--display);font-size:16.5px;font-weight:500}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal.wide{grid-template-columns:1fr}

.shot{margin:0;display:grid;gap:10px;cursor:zoom-in;position:relative}
.frame{
  position:relative;aspect-ratio:5/8;border-radius:12px;overflow:hidden;background:#0A0C10;
  box-shadow:inset 0 0 0 1px var(--line-2),0 12px 30px -20px rgba(0,0,0,.95);
  transition:box-shadow .32s var(--ease-out-quart),transform .32s var(--ease-out-quart);
}
.shot:hover .frame{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--accent-line),0 20px 44px -20px rgba(0,0,0,.95)}
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% var(--p,0%);
  transition:object-position .4s var(--ease-out-quart)}
/* 🆕 v528（用户要求）：「手机图片滚动太快，看着眩晕，要缓慢匀速，不管页面有多长」。
   原来这里写死 hover 7s / play 9s 滚完 —— 图高从 1329px 到 8020px 共用同一时长，
   长图等效速度是短图的 6 倍，眩晕就来自长图飞速。
   现改为**恒定像素速度**：时长 = 图高 / 恒定速度，由 app.js 按每张图 HTML 的
   height 属性算好写进 .shot 的 --scroll-dur（缺省 60s 兜底）。
   想调快慢只改 app.js 顶部 SCROLL_PX_PER_SEC 一个数。 */
.shot:hover .frame img{object-position:50% 100%;transition:object-position var(--scroll-dur,60s) linear}
/* 滑入视口时由 app.js 的 IntersectionObserver 给 .shot 挂 .play，与 hover 同速下滚
   （触屏设备没有 hover）；滑出视口摘掉 .play 复位到顶部，下次滑入重新播放。 */
.shot.play .frame img{object-position:50% 100%;transition:object-position var(--scroll-dur,60s) linear}
/* 悬停掠过的一道光 */
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.055) 50%,transparent 58%);
  transform:translateX(-130%)}
.shot:hover .frame::after{animation:sheen 1.15s var(--ease-out-quart) .08s}
@keyframes sheen{to{transform:translateX(130%)}}

.gal.wide .frame{aspect-ratio:16/11}
.gal.wide .shot{max-width:1180px}

.shot figcaption{display:grid;gap:2px}
.shot figcaption b{font-size:13.6px;font-weight:500}
.shot figcaption span{font-size:12.3px;color:var(--faint)}

/* ---------- 大图查看 ---------- */
.lb{position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto 1fr;
  background:rgba(4,5,7,.9);backdrop-filter:blur(12px);animation:lbIn .28s var(--ease-out-quart)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.lb-cap{color:var(--dim);font-size:12.5px}
.lb-body{overflow-y:auto;padding:22px;display:grid;justify-items:center;scroll-behavior:auto}
.lb-body img{width:auto;max-width:min(900px,94vw);height:auto;border-radius:10px;box-shadow:0 30px 80px -34px #000}

/* capability strip */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cap{background:var(--bg-2);padding:22px;transition:background-color .25s var(--ease)}
.cap:hover{background:var(--panel-2)}
.cap b{display:block;font-family:var(--display);font-size:16px;font-weight:500;margin-bottom:6px}
.cap p{font-size:13px;color:var(--dim)}

/* ---------- AI panel ---------- */
.aiwrap{display:grid;grid-template-columns:1fr 420px;gap:44px;align-items:start}
.ai-intro h2{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3vw,2.05rem);letter-spacing:-.02em}
.ai-intro p{color:var(--dim);margin-top:14px;max-width:46ch;font-size:14.5px}
.steps{margin-top:26px;display:grid;gap:14px}
.step{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.step .n{font-family:var(--mono);font-size:12px;color:var(--accent);border:1px solid var(--accent-line);border-radius:6px;height:26px;display:grid;place-items:center;transition:background-color .25s var(--ease)}
.step:hover .n{background:var(--accent-dim)}
.step b{font-weight:500;font-size:14px}
.step p{font-size:13px;color:var(--dim);margin-top:2px}

.chat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);display:flex;flex-direction:column;height:520px;overflow:hidden}
.chat-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(74,222,128,.14)}
.chat-top b{font-size:13.5px;font-weight:500}
.chat-top .mode{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:grid;gap:12px;align-content:start}
.msg{max-width:88%;font-size:13.6px;padding:11px 13px;border-radius:10px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
  animation:msgIn .4s var(--ease-out-expo) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.ai{background:var(--panel-2);border:1px solid var(--line);border-top-left-radius:3px}
.msg.me{background:var(--accent);color:#04110F;justify-self:end;border-top-right-radius:3px;font-weight:500}
.msg.sys{font-family:var(--mono);font-size:11.5px;color:var(--faint);background:transparent;border:1px dashed var(--line);max-width:100%}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--panel-2)}
.chat-form input{flex:1;min-height:42px;padding:0 13px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg);color:var(--text);font:inherit;font-size:13.5px;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.chat-form input::placeholder{color:var(--faint)}
.chat-form input:focus{border-color:var(--accent-line);outline:none}

/* ---------- issue form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label.f{display:grid;gap:7px;font-size:13px;color:var(--dim)}
label.f.full{grid-column:1/-1}
input.i,textarea.i,select.i{
  min-height:42px;padding:10px 13px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--text);font:inherit;font-size:13.5px;width:100%;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
input.i:focus,textarea.i:focus,select.i:focus{border-color:var(--accent-line);outline:none;background:var(--bg)}
textarea.i{min-height:104px;resize:vertical}
select.i{appearance:none;background-image:none}
.form-note{font-size:12.5px;color:var(--faint);margin-top:12px}
.toast{margin-top:14px;font-size:13.5px;padding:11px 14px;border-radius:8px;display:none}
.toast.ok{display:block;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35);color:#9BE9B6;animation:msgIn .4s var(--ease-out-expo) both}
.toast.err{display:block;background:rgba(255,92,92,.1);border:1px solid rgba(255,92,92,.35);color:#FFB3B3;animation:msgIn .4s var(--ease-out-expo) both}

/* ---------- footer ---------- */
footer{padding:44px 0;color:var(--faint);font-size:12.8px}
footer .cols{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
/* 🆕 v496：备案信息（ICP / 公安）。单独占一行，弱化但不隐身 —— 合规要求可见可点。 */
footer .beian{width:100%;display:flex;gap:16px;flex-wrap:wrap;align-items:center;order:9}
footer .beian a{color:var(--faint);text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s var(--ease-out-expo)}
footer .beian a:hover{color:var(--accent)}
footer .beian a img{display:inline-block;vertical-align:-3px;border:0}

/* ---------- reveal（JS 加 .in 触发） ---------- */
.rv{transition:opacity .78s var(--ease-out-expo),transform .78s var(--ease-out-expo)}
html.js .rv{opacity:0;transform:translateY(18px)}
html.js .rv.in{opacity:1;transform:none}

/* ================= ADMIN ================= */
.admin-body{min-height:100vh}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.login-card h1{font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.login-card p{color:var(--dim);font-size:13.5px;margin-top:8px}
.login-card form{margin-top:24px;display:grid;gap:14px}
.hint-box{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--faint);border:1px dashed var(--line);border-radius:8px;padding:10px 12px;line-height:1.7}

.shell{display:grid;grid-template-columns:228px 1fr;height:100vh;overflow:hidden}
.side{border-right:1px solid var(--line);background:var(--bg-2);padding:20px 16px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.side .brand{padding:6px 8px 18px}
.side nav{display:grid;gap:4px}
.side button.nav{display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:0;color:var(--dim);
  font:inherit;font-size:13.5px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background-color .16s,color .16s}
.side button.nav:hover{background:var(--panel);color:var(--text)}
.side button.nav.on{background:var(--accent-dim);color:var(--accent);font-weight:500}
.side .spacer{flex:1}
.who{font-size:12.5px;color:var(--faint);border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}

.main{padding:26px 30px 60px;min-width:0;overflow-y:auto}
.main-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.main-head h2{font-family:var(--display);font-size:1.45rem;font-weight:500;letter-spacing:-.02em}
.main-head .sub{color:var(--dim);font-size:13px;margin-top:4px}
.view{display:none}
.view.on{display:block}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.kcard span{font-size:12.5px;color:var(--dim)}
.kcard b{display:block;font-family:var(--display);font-size:26px;font-weight:500;margin-top:6px;font-variant-numeric:tabular-nums}
.kcard i{font-family:var(--mono);font-size:11.5px;color:var(--faint);font-style:normal}

.panel-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel-box .ph{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.panel-box .ph b{font-size:14px;font-weight:500}
.panel-box .ph .grow{flex:1}

table{width:100%;border-collapse:collapse;font-size:13.3px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:500;color:var(--dim);font-size:12.2px;letter-spacing:.03em;background:var(--bg-2);white-space:nowrap}
tbody tr:hover{background:rgba(255,255,255,.02)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:inline-grid;place-items:center;font-size:12px;font-weight:500;margin-right:9px;vertical-align:middle}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);white-space:nowrap}
.badge.ok{color:var(--ok);border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08)}
.badge.warn{color:var(--warn);border-color:rgba(245,179,1,.35);background:rgba(245,179,1,.08)}
.badge.danger{color:var(--danger);border-color:rgba(255,92,92,.35);background:rgba(255,92,92,.08)}
.badge.info{color:var(--info);border-color:rgba(107,168,255,.35);background:rgba(107,168,255,.08)}
.badge.mute{color:var(--faint)}

.segs{display:flex;gap:6px}
.segs button{font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--dim);cursor:pointer;transition:background-color .16s,color .16s,border-color .16s}
.segs button:hover{color:var(--text)}
.segs button.on{background:var(--accent-dim);border-color:var(--accent-line);color:var(--accent)}

.issue-list{display:grid;gap:0}
.issue{padding:16px 18px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.issue:last-child{border-bottom:0}
.issue .ih{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.issue .ih b{font-size:14.2px;font-weight:500}
.issue .ih .grow{flex:1}
.issue .meta{font-family:var(--mono);font-size:11.5px;color:var(--faint);display:flex;gap:14px;flex-wrap:wrap}
.issue .body{font-size:13.4px;color:var(--dim)}
.issue .replies{display:grid;gap:8px;margin-top:2px}
.reply{font-size:13px;border-left:2px solid var(--accent-line);padding:4px 0 4px 12px;color:var(--dim)}
.reply.user{border-left-color:var(--line-2)}
.issue .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.issue .acts input{flex:1;min-width:180px;min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font:inherit;font-size:13px}

.empty{padding:40px;text-align:center;color:var(--faint);font-size:13.5px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
  .grid6{grid-template-columns:1fr 1fr}
  .caps{grid-template-columns:1fr 1fr}
  .aiwrap{grid-template-columns:1fr}
  .chat{height:460px}
  .kpis{grid-template-columns:1fr 1fr}
  .shell{grid-template-columns:1fr;height:auto;min-height:100vh;overflow:visible}
  .side{flex-direction:row;overflow-x:auto;overflow-y:visible;border-right:0;border-bottom:1px solid var(--line);align-items:center}
  .side .brand{padding:0 12px 0 0}.side .spacer,.who{display:none}
  .side nav{grid-auto-flow:column}
  .main{padding:20px 16px 50px;overflow:visible}
}
@media (max-width:620px){
  .grid6,.caps,.form-grid,.kpis{grid-template-columns:1fr}
  .gal,.gal.wide{grid-template-columns:1fr 1fr}
  /* 🆕 v568（用户第 4 项）：「在手机版的页眉应该保留登录注册按钮和 AI 在线问答按钮」。
     ── 原来这里一条 `nav.site{display:none}` 把整条导航收掉（源文件 370 行，从 v490 留到现在），
        手机上就再也点不到「注册/登录」与「AI 在线问答」——用户只能滚到页内区块里找，很绕。
     ── 改为「只收中间三项」：功能介绍 / 下载安装 / 报告问题 在页内都有对应区块，
        且首屏 hero-actions 就有「功能介绍」实心按钮，不缺入口；而账号与 AI 问答是**跳走**的，
        页内没有等价入口，必须留在页眉。
     ── 间距按 360px 视口重算：品牌 161 + 注册/登录 62 + AI 在线问答 78 + gap 14×2 = 329，
        加 .wrap 两侧各 18 = 365 ⇒ 360px 会溢出 5px。所以 ≤620 段把 gap 收到 12、
        字号收到 12.5px，并且**允许这两项在必要时换行前收缩**（flex-shrink 默认 1 已够，
        真正兜底的是下面 ≤430 段的 11px 档）。窄屏时 nav 本来就被 ≤1040 段折到第二行
        （flex-basis:100%; order:3），横向空间是整行，实测 320px 仍放得下。 */
  nav.site{display:flex;gap:12px;font-size:12.5px}
  nav.site a[href="#feature"],
  nav.site a[href="#download"],
  nav.site a[href="#report"]{display:none}
  /* 会员中心页（/user.html）的导航是跨页锚点（/#feature 等），不是纯 # 锚点，
     上面那三条 href 精确匹配收不到它，这里按「非账号 / 非 AI 问答」统一收。 */
  header.mc-top nav.site a:not(#navAuth):not([href$="#ai"]):not(.on){display:none}
  .wrap{padding:0 18px}
  table{font-size:12.6px}th,td{padding:10px 12px}
  .lb-body img{max-width:100%}
}
@media (max-width:430px){
  .gal,.gal.wide{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  .rv{transition:none}
  .win:hover,.shot:hover .frame,.btn:hover{transform:none}
  .shot:hover .frame img{transition:none;object-position:50% var(--p,0%)}
  .shot:hover .frame::after{animation:none}
  .ch-band,.ch-dots circle,.ch-hit,.ch-line{animation:none;opacity:1;stroke-dashoffset:0}
  .ch-pulse{animation:none;opacity:.5;transform:scale(1.6)}
  .msg,.toast.ok,.toast.err,.lb{animation:none}
}

/* ============================================================ 弹窗（通用） */

.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(4,10,14,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:modalIn .22s var(--ease-out-quart) both}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal-card{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;
  padding:22px 22px 18px;box-shadow:0 34px 80px -30px rgba(0,0,0,.85);
  animation:cardIn .3s var(--ease-out-expo) both;max-height:calc(100vh - 44px);overflow:auto}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.modal-head h3{margin:0;font-size:16.5px;font-weight:500;color:var(--text)}
.modal-x{margin-left:auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);background:transparent;
  color:var(--dim);font-size:19px;line-height:1;cursor:pointer;transition:color .16s,border-color .16s,background-color .16s}
.modal-x:hover{color:var(--text);border-color:var(--accent-line);background:var(--accent-dim)}
.modal-sub{margin:0 0 16px;font-size:12.8px;line-height:1.65;color:var(--faint)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.modal .toast{margin-top:12px}
.modal .f .i{margin-top:6px}

/* 密码强度计 */
.pw-meter{margin-top:12px;display:flex;align-items:center;gap:10px;font-size:12.2px;color:var(--faint)}
.pw-meter i{flex:1;height:4px;border-radius:999px;background:var(--line);position:relative;overflow:hidden}
.pw-meter i::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;
  background:var(--dim);transition:width .28s var(--ease-out-quart),background-color .28s}
.pw-meter.lv1 i::after{width:25%;background:#FF7A7A}
.pw-meter.lv2 i::after{width:50%;background:#F3C969}
.pw-meter.lv3 i::after{width:75%;background:#7BD8A0}
.pw-meter.lv4 i::after{width:100%;background:var(--accent)}
.pw-meter.lv1 span{color:#FFB3B3}.pw-meter.lv2 span{color:#F3C969}
.pw-meter.lv3 span{color:#9BE9B6}.pw-meter.lv4 span{color:var(--accent)}

@media (max-width:520px){
  .modal{padding:12px;align-items:flex-start}
  .modal-card{padding:18px 16px 14px;border-radius:14px}
}

/* ============================================================ 下载区 */

/* 4 张卡：Android / Windows / Linux / iPhone·iPad。
   ⚠️ 别改成 4 列。`.dl-badge` 是 `position:absolute;right:14px`，**不占流内空间**，
      而 `.dl-top` 里的平台名是定宽单行 —— 卡片一窄就压字。实测（1440 视口 / 4 列 / 271.5px）：
        名宽 164/185/150/171px，与 badge 重叠 19 / 46 / 12 / 43px（**四张全中**，
        连原有的 Android 与 iOS 卡也一起压了）。
      2 列时每卡 ≈557px，重叠消失。 */
.dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.dl-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 18px;border-radius:14px;
  border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(47,212,196,.05),transparent 62%);
  transition:border-color .22s,transform .22s,box-shadow .22s}
.dl-card:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:0 22px 46px -26px rgba(47,212,196,.5)}
.dl-top{display:flex;align-items:center;gap:11px}
.dl-ico{width:38px;height:38px;flex:0 0 38px;border-radius:10px;border:1px solid var(--line-2);
  display:grid;place-items:center;background:var(--accent-dim);color:var(--accent)}
.dl-ico svg{width:19px;height:19px}
.dl-name{font-size:14.5px;font-weight:500;color:var(--text);line-height:1.3}
.dl-os{font-family:var(--mono);font-size:11.4px;color:var(--faint);margin-top:2px}
.dl-desc{font-size:12.9px;line-height:1.68;color:var(--dim);flex:1}
.dl-meta{font-family:var(--mono);font-size:11.6px;color:var(--faint);display:flex;flex-wrap:wrap;gap:5px 12px}
.dl-meta b{color:var(--dim);font-weight:400}
.dl-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.dl-badge{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:10.6px;padding:3px 8px;border-radius:999px;
  border:1px solid var(--accent-line);background:var(--accent-dim);color:var(--accent)}
.dl-badge.warn{border-color:rgba(243,201,105,.45);background:rgba(243,201,105,.1);color:#F3C969}
.dl-note{margin-top:18px;font-size:12.6px;line-height:1.75;color:var(--faint);
  border-left:2px solid var(--line-2);padding:2px 0 2px 14px}
.dl-note b{color:var(--dim);font-weight:500}
.dl-note code{font-family:var(--mono);font-size:11.8px;background:var(--accent-dim);color:var(--accent);
  padding:1px 6px;border-radius:5px}

/* 2 列时每卡 =（视口 − 52 内边距 − 14 间隙）/2；要 ≥340px 才不压字 ⇒ 视口 <760 时转单列。
   实测阈值：breakpoint 由「最长的平台名」决定（`电脑 · Windows 桌面版` 名宽 185px
   + 图标 49px + badge 60px + 卡片内边距 36px ≈ 330px）。 */
@media (max-width:760px){ .dl-grid{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  .modal,.modal-card{animation:none}
  .dl-card:hover{transform:none}
}

/* ============================================================ 会员中心 / 订单管理（用户侧）
   与 App 内「会员中心」同构：会员状态、资费、邀请、订单、账号安全。
   复用门户既有的深色令牌（--panel/--line/--accent…），不引入新色板。 */

.mc-top{position:sticky;top:0;z-index:30;background:rgba(8,9,12,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* ⚠️ v490：这里必须和首页的 .wrap 完全一致（max-width:1180px + padding:0 26px）。
   原来写的是 1000px —— 从首页点进会员中心时内容列会**缩窄 172px**，用户 2026-10-09
   反馈的「页面与原来主页宽度不一致，有跳跃抖动感」就是这个。三个选择器要一起改。 */
.mc-top .bar{max-width:1180px;margin:0 auto;padding:0 26px}
/* ⚠️ 不要给 .who-top 加 margin-left:auto —— 页签现在就夹在品牌与它之间，
   auto 会把空白全吃掉、把页签顶到品牌旁边。右推统一交给 .bar 的 justify-content:space-between。 */
.mc-top .who-top{display:flex;align-items:center;gap:12px;font-size:12.8px;color:var(--dim)}
.mc-wrap{max-width:1180px;margin:0 auto;padding:26px 26px 72px}
/* 🆕 v568（用户第 3 项）：「下面的页面在手机上显得留白很多」——根因之一就在这里。
   styles.css 第 130 行有一条**全局** `section{padding:78px 0;border-bottom:1px solid var(--line)}`，
   那是给首页落地页那些大区块用的；可 /user.html 的 `#authPane` / `#memberPane` 恰好也是 <section>
   ⇒ 凭空多出 78px 上内边距 + 一条贯穿的下边框。实测（390×844）会员卡片的 top 是 230，
   其中 78px 就是这条规则贡献的，占了首屏的九分之一。
   ⇒ 只在本页的两个直接子 section 上收回（.mc-wrap > section，(0,1,1) 压过 section (0,0,1)），
     不动全局规则 —— 首页那 78px 的呼吸感是设计意图，不能连坐。
     ⚠️ 用 `>` 是必需的：#memberPane 内层的 `section#tab-home/#tab-orders/#tab-security`
        是 `.mc-grid` 的子元素，不该被这条规则命中（它们本来就没有内边距）。 */
.mc-wrap > section{padding:0;border-bottom:0}
/* 🆕 v568（用户第 3 项）：会员中心页左上角「返回主页」。
   形状取 App 页眉那颗返回键（index.html 的 #hdr-back）的同一套语言：细描边胶囊 + 小箭头，
   文字随宽度收放 —— 手机上只留箭头（下面的 ≤440px 段），省出来的横向空间给页签。 */
.mc-back{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;
  margin-bottom:16px;border-radius:999px;border:1px solid var(--line-2);background:transparent;
  color:var(--dim);font-size:12.8px;line-height:1;white-space:nowrap;
  transition:color .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease)}
.mc-back:hover{color:var(--text);border-color:var(--accent-line);background:var(--accent-dim)}
.mc-back svg{display:block;flex:0 0 auto}
.mc-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.mc-tabs button{font:inherit;font-size:13px;padding:8px 15px;border-radius:999px;border:1px solid var(--line-2);
  background:transparent;color:var(--dim);cursor:pointer;transition:background-color .16s,color .16s,border-color .16s}
.mc-tabs button:hover{color:var(--text);border-color:var(--accent-line)}
.mc-tabs button.on{background:var(--accent-dim);border-color:var(--accent-line);color:var(--accent);font-weight:500}
.mc-grid{display:grid;gap:16px}
.mc-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.mc-card h3{font-family:var(--display);font-size:15.5px;font-weight:500;margin-bottom:15px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mc-card h3 .grow{flex:1}
.mc-user{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mc-avatar{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid var(--accent-line);color:var(--accent);
  font-family:var(--display);font-size:20px}
.mc-name{font-size:16px;font-weight:500}
.mc-meta{font-family:var(--mono);font-size:11.8px;color:var(--faint);margin-top:3px}
.mc-plan{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px;margin-top:14px;
  border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2)}
.mc-plan .ico{font-size:26px;line-height:1}
.mc-plan-status{font-size:15px;font-weight:500}
.mc-plan-status.ok{color:var(--ok)}
.mc-plan-status.trial{color:var(--warn)}
.mc-plan-status.expired{color:var(--danger)}
.mc-plan-sub{font-size:12.6px;color:var(--dim);margin-top:3px}
.mc-price{margin-left:auto;text-align:right}
.mc-price-now{font-family:var(--display);font-size:30px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.mc-price-now small{font-size:13px;color:var(--dim);font-weight:400}
.mc-price-old{font-size:12px;color:var(--faint);text-decoration:line-through;font-family:var(--mono)}
.mc-tag{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:10.6px;padding:2px 8px;
  border-radius:999px;border:1px solid var(--accent-line);background:var(--accent-dim);color:var(--accent)}
.mc-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.mc-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.mc-tier{border:1px solid var(--line-2);border-radius:11px;padding:12px 10px;cursor:pointer;text-align:center;
  transition:border-color .18s,background-color .18s;background:transparent;color:inherit;font:inherit}
.mc-tier:hover{border-color:var(--accent-line)}
.mc-tier.on{border-color:var(--accent);background:var(--accent-dim)}
.mc-tier b{display:block;font-size:14px;font-weight:500}
.mc-tier .p{font-family:var(--mono);font-size:12.4px;color:var(--dim);margin-top:5px}
.mc-tier .off{font-family:var(--mono);font-size:10.8px;color:var(--warn)}
/* 🆕 v509：档位卡标出本单用了几个「¥8 月费」邀请优惠（与 App 的 .rn-tier i.rn-credit 同义） */
.mc-tier .cr{display:inline-block;margin-top:6px;font-size:10.4px;color:#9BE9B6;background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.28);border-radius:999px;padding:1px 7px;white-space:nowrap}
.mc-invite-code{font-family:var(--mono);font-size:17px;letter-spacing:.16em;color:var(--accent);
  background:var(--accent-dim);border:1px dashed var(--accent-line);border-radius:9px;padding:8px 14px}
.mc-tip{font-size:12.6px;color:var(--faint);line-height:1.75;margin-top:12px}
.mc-tip b{color:var(--dim);font-weight:500}
.mc-ok{display:inline-block;margin-top:10px;font-size:12.6px;color:#9BE9B6;
  background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.32);border-radius:8px;padding:6px 11px}
.mc-rows{display:grid}
.mc-row{display:flex;gap:14px;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.3px}
.mc-row:last-child{border-bottom:0}
.mc-row .k{color:var(--dim)}
.mc-row .v{font-family:var(--mono);text-align:right;word-break:break-all}
.mc-form{display:grid;gap:11px}
.mc-form.row2{grid-template-columns:150px 1fr auto;align-items:end}
.mc-his{display:grid}
.mc-his-item{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:13px;flex-wrap:wrap}
.mc-his-item:last-child{border-bottom:0}
.mc-his-item .d{font-family:var(--mono);font-size:11.8px;color:var(--faint);min-width:86px}
.mc-his-item .s{flex:1;color:var(--dim);min-width:150px}
.mc-his-item .a{font-family:var(--mono);color:var(--text)}
.mc-his-item .t{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--faint)}
.mc-empty{font-size:13px;color:var(--faint);padding:6px 0}
.mc-danger{font-size:12.6px;color:#FFB3B3;border:1px solid rgba(255,92,92,.32);background:rgba(255,92,92,.08);
  border-radius:9px;padding:10px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mc-switch{font-size:13px;color:var(--dim);margin-top:14px}
.mc-switch a{color:var(--accent);cursor:pointer}
.badge-role{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--dim)}
.login-card .segs{margin-top:18px}
.status-pill{font-family:var(--mono);font-size:11.4px;padding:2px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--dim)}
.status-pill.paid{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1);color:#9BE9B6}
.status-pill.pending{border-color:rgba(243,201,105,.35);background:rgba(243,201,105,.1);color:#F3C969}
.status-pill.failed,.status-pill.closed{border-color:rgba(255,92,92,.3);background:rgba(255,92,92,.08);color:#FFB3B3}

@media (max-width:640px){
  .mc-tiers{grid-template-columns:1fr 1fr}
  .mc-form.row2{grid-template-columns:1fr}
  .mc-price{margin-left:0}
  .mc-wrap{padding:18px 14px 60px}
}

/* 🆕 v568（用户第 3 项）：「下面的页面在手机上显得留白很多，应该向上排列紧凑一些」。
   ── 症状（390×844 实测）：顶栏 64 + .mc-wrap 上内边距 18 + 返回键 32+16 + 页签 33+20
      = 卡片真正开始的位置在第 183px，而卡片本身内边距 20、卡内 h3 又占 15+13 的下边距
      ⇒ 一屏 844px 里只有「账户」卡片露出半个，用户看到的就是「上面一大片空的」。
   ── 逐项收紧，不改变任何内容顺序（用户说的是「向上排列紧凑」，不是「删内容」）：
      上内边距 18→10、返回键下边距 16→10、页签下边距 20→12、卡间距 16→12、
      卡内边距 20→14、卡标题下边距 15→10、套餐块内边距 16→12/上边距 14→10、
      按钮行上边距 16→12、登录卡 32→18、表单行距 14→11。
      合计省下 **约 60px**，卡片起始位置从 183px 抬到 ~123px，一屏能完整看到第一张卡。
   ── 只作用于 ≤640px，桌面版零影响（与 v216 手机端精修的口径一致）。 */
@media (max-width:640px){
  .mc-wrap{padding:10px 14px 44px}
  .mc-back{margin-bottom:10px;height:30px}
  .mc-tabs{margin-bottom:12px;gap:6px}
  .mc-tabs button{padding:7px 12px;font-size:12.6px}
  .mc-grid{gap:12px}
  .mc-card{padding:14px}
  .mc-card h3{margin-bottom:10px;font-size:15px}
  .mc-plan{padding:12px;margin-top:10px;gap:10px}
  .mc-price-now{font-size:26px}
  .mc-actions{margin-top:12px;gap:8px}
  .mc-his-item{padding:9px 0;gap:8px}
  .login-card{padding:18px}
  .login-card form{margin-top:16px;gap:11px}
  .login-card .segs{margin-top:12px}
  .mc-switch{margin-top:10px}
}
@media (max-width:440px){
  /* 极窄屏：返回键退化成「只有箭头」的 30px 圆钮，把横向空间让给页签 */
  .mc-back{padding:0;width:30px;justify-content:center;border-radius:50%}
  .mc-back span{display:none}
}

/* toast.warn：与 .err 同构但用琥珀色。
   ⚠️ 必须显式给 display:block —— .toast 基础类是 display:none，
   漏了这条，所有 'warn' 级提示会静默不显示（等于没提示）。 */
.toast.warn{display:block;background:rgba(243,201,105,.1);border:1px solid rgba(243,201,105,.35);color:#F3C969;animation:msgIn .4s var(--ease-out-expo) both}
.mc-form.inline2{grid-template-columns:1fr auto;align-items:center}
@media (max-width:640px){ .mc-form.inline2{grid-template-columns:1fr} }

/* ============================================================ 管理端 · 订单管理 */
.grid-form{display:grid;gap:12px;align-items:end;padding:16px 18px}
.code-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.code-chip{font-family:var(--mono);font-size:13px;letter-spacing:.08em;padding:6px 11px;border-radius:8px;
  border:1px dashed var(--accent-line);background:var(--accent-dim);color:var(--accent);cursor:pointer}
.code-chip:hover{background:rgba(47,212,196,.22)}
.form-note-2{font-size:12.4px;color:var(--faint);margin-top:10px;line-height:1.7}
.form-note-2 b{color:var(--dim);font-weight:500}
.pill{font-family:var(--mono);font-size:11.4px;padding:2px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--dim);white-space:nowrap}
.pill.paid{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1);color:#9BE9B6}
.pill.pending{border-color:rgba(243,201,105,.35);background:rgba(243,201,105,.1);color:#F3C969}
.pill.failed,.pill.closed{border-color:rgba(255,92,92,.3);background:rgba(255,92,92,.08);color:#FFB3B3}

/* 订单管理页的两个表单是五列/四列，窄屏必须降级为单列可读。
   行内 grid-template-columns 优先级高于普通媒体查询，故这里必须 !important。 */
@media (max-width:960px){ .grid-form{grid-template-columns:1fr 1fr !important} }
@media (max-width:560px){ .grid-form{grid-template-columns:1fr !important} }

/* ============================================================ 会员中心顶栏 · 第二行站点导航（v490）
   把首页那 6 个页签搬到会员中心，独占顶栏第二行：登录后仍能一键回到
   「六大页面 / 示例效果 / 下载安装 / AI 在线问答 / 报告问题」，不会出现
   「登录完就看不到别的页面」。前 5 项是跨页锚点（/#pages …），第 6 项是当前页。

   ⚠️ 三条硬约束，都踩过：
   1) 必须用 .mc-top .mc-nav（0,2,0）而不是 .mc-nav（0,1,0）——
      nav.site 的 gap:26px 与 ≤620px 的 display:none 都是 (0,1,1)，单类盖不住。
      (0,2,0) 才稳定胜出，且顺带把「≤620px 收起」这条一并否决：本行的页签
      要一直保留到手机宽度（这正是用户的要求）。
   2) 取消 nav.site 的 font-size:13.5px / gap:26px，改用 13px / 22px，
      6 项在 1000px 内容宽里一行放得下（合计约 453px）。
   3) a{white-space:nowrap} 是必需的：中文可以在**任意字之间**换行，
      不加这行，「下载安装」会被折成「下载安/装」——880px 时实测连品牌名
      和「会员」徽标都被拆成两行（CJK 的 min-content 只有 1 个字宽）。 */
/* v490：会员中心的页签现在与首页**共用同一套 nav.site 规则、同一个位置**（顶栏第一行），
   所以这里不再需要任何 .mc-nav 覆盖 —— 曾经为「第二行独占」写过的一组规则（gap/font-size/
   max-width/padding 以及 ≤640px 的降级）已全部删除。少一套覆盖，就少一处两页不一致的机会。
   唯一保留的是下面这条 nowrap，防止品牌名/徽标被 CJK 断行规则拆散。 */
.mc-top .bar .brand,.mc-top .who-top{white-space:nowrap}
/* 昵称最长 20 字，再拼上「· 135****0732」，不封顶会把顶栏撑破（6 个页签被挤出可视区）。 */
.mc-top .who-top #topName{max-width:240px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ★ 窄屏：**两个页面的顶栏一起折成两行** —— 品牌与右侧元素占第一行，6 个页签独占第二行。
   为什么必须「一起」：
     会员中心右侧是「会员徽标 + 昵称·账号 + 退出」，实测 256px；首页那颗「问 AI 助手」
     只有 119px。单行时会员中心比首页**早约 150px** 开始横向溢出（实测 900px 溢出 69px、
     800px 溢出 169px，而首页到 830px 才溢出）。
     如果只让会员中心折行，两页顶栏高度又会不一致 —— 那正是用户这次抱怨的「跳跃抖动」。
   ⇒ 同一个断点一起折，两页顶栏高度**在任何宽度下都相等**；顺带把首页自身 ≤830px 的
     横向溢出（实测 700px 溢出 18px）一并修掉。
   1040px 这个值的来历：单行需要「品牌 161 + 页签 473 + 右侧 256 + 间隙 40 = 930」，
   加上 .wrap 两侧各 26 的 padding ⇒ 视口 ≥ 1040px 才放得下（并给长昵称留了余量）。 */
@media (max-width:1040px){
  header.site .bar,header.mc-top .bar{
    flex-wrap:wrap;height:auto;
    padding-top:13px;padding-bottom:11px;row-gap:9px;
  }
  header.site nav.site,header.mc-top nav.site{flex-basis:100%;order:3}
  /* 两行各自撑到固定高度。第一行首页有 42px 的「问 AI 助手」按钮撑着，会员中心那行
     可能只有一个 .btn.sm（未登录时右侧干脆没有元素）—— 不显式撑高就会矮 8px，
     于是「换个页面还是跳一下」。这类 8px 的差必须显式按住，别指望两边内容自然一样高。 */
  header.site .bar>*:not(nav.site),header.mc-top .bar>*:not(nav.site){min-height:42px}
  header.site nav.site,header.mc-top nav.site{min-height:26px}
}

/* ============================================================ 首页 · 注册与登录区块（v490 第二批）
   用户 2026-10-09：「注册登录页面应该放在首页中，点击登录的时候页签要保持在原位不要动」。
   ⇒ 刻意做成**首页的一个普通 section**：同一套 .wrap(1180/26) + .sec-head 版式，
     左栏说明 + 右栏表单（.auth-grid），而不是像旧 /login.html 那样一张卡片浮在空白中央。
   ⚠️ 旧版 .auth-box 是 max-width:640px 的独立卡片，直接搬过来会重现「浮空卡片」观感，
      所以这里改成网格里的右栏，宽度由 grid 决定。 */
.auth-grid{display:grid;grid-template-columns:1fr 452px;gap:48px;align-items:start}
.auth-side h3{font-family:var(--display);font-size:15.5px;font-weight:500;margin-bottom:16px;color:var(--dim)}
.auth-li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.auth-li:first-of-type{border-top:0}
.auth-li .k{font-size:17px;line-height:1.35;flex:0 0 auto}
.auth-li b{font-size:13.4px;font-weight:500;display:block}
.auth-li p{margin:4px 0 0;font-size:12.6px;line-height:1.7;color:var(--faint)}

.auth-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.auth-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:20px}
.auth-tab{font:inherit;font-size:13.5px;padding:7px 16px;border-radius:999px;border:1px solid transparent;
  background:transparent;color:var(--dim);cursor:pointer;transition:background-color .16s,color .16s,border-color .16s}
.auth-tab:hover{color:var(--text)}
.auth-tab.on{background:var(--accent-dim);border-color:var(--accent-line);color:var(--accent);font-weight:500}
.auth-pane{display:grid;gap:15px}
.auth-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.auth-link{font-size:12.8px;color:var(--accent);cursor:pointer}
.auth-link:hover{text-decoration:underline}
.auth-done{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.auth-avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid var(--accent-line);color:var(--accent);font-size:18px}
.auth-hello{font-size:15px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.auth-sub{font-size:12.8px;color:var(--dim);margin-top:5px}
.auth-sub.ok{color:var(--ok)}
.auth-sub.trial{color:var(--warn)}
.auth-sub.expired{color:var(--danger)}
.auth-box .toast{margin-top:14px}
@media (max-width:940px){
  .auth-grid{grid-template-columns:1fr;gap:28px}
  .auth-side{order:2}
  .auth-box{order:1}
}
@media (max-width:620px){ .auth-box{padding:18px} .auth-tab{padding:6px 12px;font-size:12.8px} }

/* ══════════════════════════════════════════════════════════════════════════════
   🆕 v561（用户 2026-10-28 第 2/3 项）：功能介绍六段 + 品牌图标底纹
   ── 为什么整节重写而不是给旧卡加视频 ──
     旧 #pages 是 2×3「功能入口卡」（图标+三要点+一句 go），#demo 是四张长截图。
     用户要求「不要再给页面样子了，直接把这 6 个页面做 6 个介绍」⇒ 改成六段可读的介绍，
     每段一支自己那页的录屏；左右交替，避免六段连排像一张长表。
   ── 视频为什么这么写 ──
     · preload="none"：六支共 13 MB，进视口才加载并 play()（app.js 的 .feat-vid 观察器）；
     · .feat-frame 用 aspect-ratio 16/9 固定版面，视频 object-fit:cover 填满，加载前后不跳版；
     · 未加载/加载失败时露出底下的 .feat-ph（品牌标记 + 青绿柔光），不会是一块白框
       —— 与 App 首页 .hf-vidmark 同一手法（会员中心那支首帧极暗，就是靠它兜的）。 */
.feat-list{display:grid;gap:22px}
.feat{
  display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(20px,3vw,38px);align-items:center;
  padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.006));
  transition:border-color .3s var(--ease),transform .3s var(--ease-out-quart);
}
.feat:hover{border-color:var(--line-2);transform:translateY(-2px)}
/* 左右交替：偶数段把画面挪到右边。用 order 而不是 direction，避免影响文字排版。 */
.feat:nth-of-type(even){grid-template-columns:.96fr 1.04fr}
.feat:nth-of-type(even) .feat-media{order:2}
.feat-media{min-width:0}
.feat-frame{
  position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  border:1px solid var(--line-2);background:#0B0E14;
  box-shadow:0 22px 46px -30px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.02);
}
/* 兜底层：品牌标记 + 青绿柔光。z-index 0，视频在它上面（z-index 1）。 */
.feat-ph{
  position:absolute;inset:0;display:block;
  background:
    radial-gradient(120% 130% at 18% 0,rgba(47,212,196,.16),transparent 62%),
    radial-gradient(90% 110% at 100% 100%,rgba(107,168,255,.10),transparent 60%),
    #0B0E14;
}
.feat-ph::after{
  content:"";position:absolute;inset:0;
  background:url(/assets/brand/icon-mark-soft.png) center/38% no-repeat;
  opacity:.34;
}
.feat-vid{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  display:block;background:transparent;
  /* 短片本身是浅色调（AI 生成的意象片），直接贴到深色页上会「跳出来」。
     压一点亮度 + 轻微去饱和，让它落在页面的暗调里；边框内的 inset 暗角再收一下四角。 */
  filter:brightness(.94) saturate(.95);
}
.feat-frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:12px;
  box-shadow:inset 0 0 56px 10px rgba(8,9,12,.55);
}
.feat-cap{
  margin-top:9px;font-size:11.5px;color:var(--faint);letter-spacing:.02em;
  display:flex;align-items:baseline;gap:8px;
}
.feat-cap .mono{color:var(--accent);font-size:11px}
.feat-copy{min-width:0}
.feat-copy h3{
  font-family:var(--display);font-weight:500;font-size:19.5px;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:10px;
}
.feat-no{font-size:11px;color:var(--accent);letter-spacing:.12em;font-weight:400}
.feat-lead{
  margin-top:9px;font-size:15.5px;color:var(--text);font-weight:500;line-height:1.5;
}
.feat-body{margin-top:10px;font-size:13.6px;color:var(--dim);line-height:1.8}
.feat-pts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.feat-pts li{
  font-size:12.2px;color:var(--dim);padding:4px 10px 4px 9px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  display:inline-flex;align-items:center;gap:6px;
}
.feat-pts li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);flex:0 0 4px}
@media (max-width:820px){
  .feat,.feat:nth-of-type(even){grid-template-columns:1fr;gap:16px;padding:15px}
  .feat:nth-of-type(even) .feat-media{order:0}
  .feat-copy h3{font-size:17.5px}
  .feat-lead{font-size:14.5px}
  .feat-body{font-size:13.2px;line-height:1.75}
  .feat-pts li{font-size:11.8px}
}
@media (prefers-reduced-motion:reduce){
  .feat,.feat:hover{transition:none;transform:none}
}

/* ── 全站底纹：极淡的图标平铺（v561 起，所有页面共用）──
   低透明度 + screen 混合 —— 深底上用 screen 让蓝色图标透出冷光，比 normal 更像「底纹」而不是「贴图」。
   ⚠️ 用 /assets/brand/icon-mark-soft.png（只留有墨像素的那版）：原 icon-mark.png 自带浅蓝底衬，
      在深底上会显出一块**比周围亮的方块**（App 首页 v560 实测过，同样的问题）。
   ⚠️ z-index:-1 依赖 body 不建立层叠上下文（当前 body 无 transform/opacity/filter）——
      以后若给 body 加这些属性，这层会跑到内容之上，必须同步改成 #feature::before 之类。 */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url(/assets/brand/icon-mark-soft.png);
  background-repeat:repeat;background-size:240px auto;background-position:-30px -16px;
  opacity:.028;mix-blend-mode:screen;
}
@media (max-width:640px){
  body::before{background-size:160px auto;background-position:-20px -12px;opacity:.02}
}

/* ════════════════════════════════════════════════════════════════════════
   v563 · 主页（body.home）背景：品牌图 脉谱-2.jpg 铺满 + 冷光渲染
   ────────────────────────────────────────────────────────────────────────
   用户要求：「背景换成这个（脉谱-2.jpg）」—— 直接上品牌图本身，不再用图标平铺/放大拼。
   原图是 1920² 的夜景渲染（亮部很亮：蓝色天光 + 反光地面），直接铺上去白字全看不清，
   所以按「照片 → 压暗 → 提冷光 → 收暗角 → 上下收边」五层叠：
     ① .fx-photo  照片本体，brightness(.52) 先把整体压到一半
     ② .fx-tint   纵向压暗（顶部最重，接住半透明吸顶导航）
     ③ .fx-bloom  中央青绿冷光（screen），把 MP 标记那团亮度提出来 —— "渲染"感在这里
     ④ .fx-vig    四角暗角，把注意力收回中间
     ⑤ .fx-scrim  上下收边，接住导航与页脚
   尺寸：`center 42%` + `cover`。42% 是实测的——正中(50%)会让 MP 标记被首屏卡片压住，
   偏上一点标记正好落在标题右侧的空白带。
   ⚠️ .bgfx 必须固定定位 + z-index:-2 + overflow:hidden + 自成层叠上下文，
      mix-blend-mode 才只在层内生效（否则 screen 会连白字一起算、文字发灰）。
   ⚠️ 手机换 960px 的小图（mp-bg-sm.jpg，90KB vs 319KB）；低端机省掉暗角层。
   ════════════════════════════════════════════════════════════════════════ */
body.home{background-color:#070B11}

.bgfx{
  position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  will-change:transform;transform:translateZ(0);
  /* --fade 由 app.js 按滚动位置写（1 → 0.30）：首屏满强度，正文区退成暗场。
     无 JS 时缺省 1，背景照常显示，只是深段落会偏亮一点。 */
  opacity:var(--fade,1);
}
.bgfx i{position:absolute;display:block;pointer-events:none}

/* ① 照片本体（v582：背景居中显示，改回 center/cover） */
.bgfx .fx-photo{
  inset:0;
  background:url(/assets/brand/mp-bg.jpg) center/cover no-repeat;
  filter:brightness(.46) saturate(1.04) contrast(.99);
}

/* ①′ 视频背景 —— v582 撤销（用户 2026-11-03 追加）：「不是替换背景，背景还原成原来的图片
   脉谱-2.jpg」。全屏视频背景整段删除，视频改放 hero 右侧 .hero-video 卡片；背景回归 .fx-photo。 */

/* ② 双层压暗：左→右 + 上→下。
   只压上下不够 —— MP 是个大亮块，正好横在首屏标题和登录段文字后面，白字会糊。
   所以再加一层「左深右浅」的横向渐变：左边（标题、说明文字、要点列表）压到 .90，
   右边留透让照片和示意卡露出来。两段版式（首屏 / 登录）的文字都在左侧，一套就够。 */
.bgfx .fx-tint{
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(6,10,15,.90) 0,
      rgba(6,10,15,.74) 26%,
      rgba(6,10,15,.36) 52%,
      rgba(6,10,15,.08) 74%,
      rgba(6,10,15,0) 86%),
    linear-gradient(180deg,
      rgba(6,10,15,.70) 0,
      rgba(6,10,15,.42) 18%,
      rgba(6,10,15,.26) 46%,
      rgba(6,10,15,.48) 74%,
      rgba(5,8,12,.88) 100%);
}

/* ③ 中央冷光：把照片里 MP 标记那一块提亮、偏青，像自己会发光 */
.bgfx .fx-bloom{
  inset:0;
  background:radial-gradient(50% 40% at 52% 43%,rgba(0,192,216,.26),rgba(0,150,200,.10) 46%,transparent 74%);
  mix-blend-mode:screen;
}

/* ④ 暗角 */
.bgfx .fx-vig{
  inset:0;
  background:radial-gradient(116% 94% at 50% 42%,transparent 36%,rgba(4,7,11,.45) 74%,rgba(4,7,11,.74) 100%);
}

/* ⑤ 上下收边 */
.bgfx .fx-scrim{
  inset:0;
  background:linear-gradient(180deg,
    rgba(6,10,15,.62) 0,
    rgba(6,10,15,0) 13%,
    rgba(6,10,15,0) 76%,
    rgba(6,10,15,.58) 100%);
}

@media (max-width:820px){
  /* 🆕 v564（用户第 2 项）：「手机版背景图片自适应缩小，看不到全貌了」。
     原来窄屏仍是 `cover + center 38%`：品牌图是 1:1 正方形（mp-bg-sm.jpg 960²），
     手机视口约 390×844（0.46 竖条），cover 会按**高度**铺满 ⇒ 宽度被拉成 844，
     左右各裁掉一大半，只剩中间约 46% 的竖条 —— 用户说的「看不到全貌」就是它。
     ⇒ 窄屏改成「整图可见」：把 .fx-photo 从「铺满全屏」改成**一块正方形**，
       宽 = 视口宽、高 = 100vw（与 1:1 原图同比），图完整落在里面，不再裁切。
       底下漏出来的是 body.home 的 #070B11，与暗场同色，看不出接缝。
     上下各留一道 7% / 14% 的透明渐变遮罩，让照片的上下边软过渡到暗场
     （照片底部是反光地面，硬切会留一条亮边）。左右两条边原图本身是暗的，不用处理。
     ⚠️ 用 height:100vw 而不是 aspect-ratio:1 —— 旧版 iOS Safari 14 不支持 aspect-ratio。 */
  .bgfx .fx-photo{
    inset:5vh 0 auto 0;
    height:100vw;
    background-image:url(/assets/brand/mp-bg-sm.jpg);
    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;
    filter:brightness(.56) saturate(1.05);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 86%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 86%,transparent 100%);
  }
  .bgfx .fx-vig{display:none}
  .bgfx .fx-bloom{background:radial-gradient(78% 30% at 50% 38%,rgba(0,192,216,.20),transparent 74%)}
  /* 窄屏不做左右压暗（整屏都是文字区），只用上下 */
  .bgfx .fx-tint{
    background:linear-gradient(180deg,
      rgba(6,10,15,.90) 0,
      rgba(6,10,15,.72) 22%,
      rgba(6,10,15,.58) 52%,
      rgba(5,8,12,.88) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .bgfx{will-change:auto}
}

/* ════════════════════════════════════════════════════════════════════════
   v563 · 卡片悬浮荧光（用户：「窗口要像这样鼠标悬浮的时候有荧光效果，保持一致」）
   ────────────────────────────────────────────────────────────────────────
   一套规则套给页面上所有「卡片」类容器：下载卡 .dl-card / 功能段 .feat /
   登录框 .auth-box。荧光用三层 box-shadow 叠出来（不是一张发光图）：
     · 0 0 0 1px 的实环        —— 贴边的冷光圈
     · 0 0 22px / 56px 两层晕  —— 由近到远的"荧光"扩散
     · 外加大投影              —— 保持离地感，别飘
   为什么不用伪元素：`.feat` 里 `.feat-frame::after` 已经占了，再给父级加 after 容易打架；
   box-shadow 不吃布局、不挡点击，hover / focus-visible / focus-within 三态共用一条规则。
   ════════════════════════════════════════════════════════════════════════ */
.dl-card,.feat,.auth-box{
  transition:border-color .22s var(--ease),transform .28s var(--ease-out-quart),
             box-shadow .3s var(--ease),background-color .22s var(--ease);
}
.dl-card:hover,.feat:hover,.auth-box:hover,
.dl-card:focus-visible,.feat:focus-visible,.auth-box:focus-within{
  border-color:rgba(47,212,196,.58);
  box-shadow:
    inset 0 0 0 1px rgba(47,212,196,.20),
    0 0 0 1px rgba(47,212,196,.16),
    0 0 22px -2px rgba(47,212,196,.42),
    0 0 60px -6px rgba(47,212,196,.32),
    0 26px 56px -30px rgba(0,0,0,.95);
}
/* 卡片里的图标小块和徽标跟着亮一档，荧光才「成套」而不是只有描边 */
.dl-card:hover .dl-ico{background:rgba(47,212,196,.20);border-color:rgba(47,212,196,.45);
  box-shadow:0 0 16px -4px rgba(47,212,196,.65)}
.dl-card:hover .dl-badge{border-color:rgba(47,212,196,.7);box-shadow:0 0 14px -4px rgba(47,212,196,.6)}
.feat:hover .feat-frame{border-color:rgba(47,212,196,.32)}
@media (prefers-reduced-motion:reduce){
  .dl-card,.feat,.auth-box{transition:none}
  .dl-card:hover,.feat:hover,.auth-box:hover{transform:none}
}

/* ════════════════════════════════════════════════════════════════════════
   v564 · 返回页面顶部（用户第 5 项：「页面在滚动的时候要加一个返回页面顶部的按钮」）
   ────────────────────────────────────────────────────────────────────────
   浮在右下角，只在滚过 480px 后淡入（app.js 的 toTop 段落加 .on）——
   首屏就压一颗圆按钮在 hero 按钮组旁边只会碍事。
   配色沿用全站冷青：描边 var(--line-2)、hover 走 --accent-line + 三层荧光（与 .dl-card 同一套语汇）。
   ⚠️ 用 --line-2 / --accent-line / --accent 这些**已存在**的变量，不新增色值 ——
      站点只有暗色一套（:root 全是暗值），凭空多一个 hex 会在某些段落偏色。
   ⚠️ 窄屏要给 env(safe-area-inset-bottom) 让位，否则 iPhone 横条会压住按钮。
   ════════════════════════════════════════════════════════════════════════ */
.to-top{
  position:fixed;right:20px;bottom:24px;z-index:70;
  width:44px;height:44px;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-2);
  background:rgba(11,16,23,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--dim);
  box-shadow:0 16px 32px -20px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.03);
  /* 未出现时不参与点击（pointer-events），否则透明按钮会挡住页脚链接 */
  opacity:0;transform:translateY(10px) scale(.92);pointer-events:none;
  transition:opacity .24s var(--ease),transform .34s var(--ease-out-quart),
             color .18s var(--ease),border-color .18s var(--ease),box-shadow .24s var(--ease);
}
.to-top svg{width:19px;height:19px;display:block}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover,.to-top:focus-visible{
  color:var(--accent);border-color:var(--accent-line);outline:none;
  background:rgba(14,22,30,.9);
  box-shadow:
    inset 0 0 0 1px rgba(47,212,196,.22),
    0 0 0 1px rgba(47,212,196,.18),
    0 0 22px -2px rgba(47,212,196,.46),
    0 16px 32px -20px rgba(0,0,0,.95);
}
/* 键盘触发时要有一条真的可见焦点环（hover 那条阴影不足以当焦点提示） */
.to-top:focus-visible{box-shadow:
    inset 0 0 0 1px rgba(47,212,196,.22),
    0 0 0 3px rgba(47,212,196,.34),
    0 0 22px -2px rgba(47,212,196,.46),
    0 16px 32px -20px rgba(0,0,0,.95)}
@media (max-width:640px){
  .to-top{right:13px;bottom:calc(15px + env(safe-area-inset-bottom,0px));width:40px;height:40px}
  .to-top svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  .to-top{transition:none}
}

/* ==========================================================================
   🆕 v576 · 下载进度条 + 安装提示（用户 2026-11-01：「主页上点击下载apk的时候
   没有进度条提示和安装提示吗?」）

   语汇沿用全站：面板 = 卡片内的次层容器（描边 --line-2 + 2.8% 白底），
   进度条用强调色渐变 + 一层 12px 外发光，完成态换 --ok 绿、失败换 --danger 红。
   两点刻意的取舍：
     · 面板**不做模态**。下载卡在桌面上是四张并排，弹窗会把别的卡全遮住，
       而用户下载 APK 的同时很可能还想扫一眼 Linux 卡上的架构说明。
     · 进度条高 6px、动效只用 linear 0.18s。这里是「读数区」不是「表演区」，
       百分比数字必须比光效更显眼，所以数字用 --accent + 等宽 + tabular-nums。
   ========================================================================== */

.dl-dl{
  margin-top:2px;padding:11px 12px;border:1px solid var(--line-2);border-radius:10px;
  background:rgba(255,255,255,.028);
  display:flex;flex-direction:column;gap:8px;
}
.dl-dl[hidden]{display:none !important}

.dl-dl-head{display:flex;align-items:baseline;gap:10px;font-size:12px;color:var(--dim)}
.dl-dl-name{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);color:var(--text);letter-spacing:.01em;
}
.dl-dl-pct{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;
  font-weight:500;color:var(--accent);flex:none;
}

.dl-dl-bar{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.dl-dl-bar>i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,rgba(47,212,196,.5),var(--accent));
  box-shadow:0 0 12px -2px rgba(47,212,196,.75);
  transition:width .18s linear;
}

/* 拿不到总长度（服务端分块传输 / 无 Content-Length）时走不确定态：
   流光来回扫，不谎报百分比。 */
.dl-dl.indet .dl-dl-bar>i{width:34% !important;transition:none;animation:dlSweep 1.2s var(--ease-out-quart) infinite}
@keyframes dlSweep{
  0%{transform:translateX(-105%)}
  100%{transform:translateX(305%)}
}

.dl-dl-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11.6px;color:var(--faint);font-family:var(--mono);
}
.dl-dl-stat{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-dl-x{
  appearance:none;-webkit-appearance:none;flex:none;
  border:1px solid var(--line-2);background:transparent;color:var(--dim);
  font-family:var(--body);font-size:11.5px;line-height:1.5;padding:3px 10px;border-radius:6px;
  cursor:pointer;transition:color .18s var(--ease-out-quart),border-color .18s var(--ease-out-quart);
}
.dl-dl-x:hover{color:var(--danger);border-color:rgba(255,92,92,.55)}

.dl-dl.done .dl-dl-bar>i{background:var(--ok);box-shadow:0 0 12px -2px rgba(74,222,128,.7)}
.dl-dl.done .dl-dl-pct{color:var(--ok)}
.dl-dl.done .dl-dl-x:hover{color:var(--accent);border-color:var(--accent-line)}

/* 失败态：红了但不满屏红 —— 只把百分比与进度条变 --danger，「重试」仍用中性描边，
   避免用户以为整站坏了。 */
.dl-dl.err .dl-dl-bar>i{background:var(--danger);box-shadow:none}
.dl-dl.err .dl-dl-pct{color:var(--danger)}
.dl-dl.err .dl-dl-stat{color:var(--dim)}
.dl-dl.err .dl-dl-x:hover{color:var(--accent);border-color:var(--accent-line)}

/* ---- 安装提示 ---- */
.dl-guide{
  margin-top:2px;padding:12px 13px;border-radius:10px;
  border:1px solid rgba(47,212,196,.28);background:rgba(47,212,196,.055);
  display:flex;flex-direction:column;gap:9px;
}
.dl-guide[hidden]{display:none !important}
.dl-guide-head{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text)}
.dl-guide-head>b{font-weight:500;letter-spacing:.01em}
.dl-guide-x{
  margin-left:auto;appearance:none;-webkit-appearance:none;flex:none;
  border:1px solid var(--line-2);background:transparent;color:var(--dim);
  font-family:var(--body);font-size:11.5px;line-height:1.5;padding:3px 10px;border-radius:6px;
  cursor:pointer;transition:color .18s var(--ease-out-quart),border-color .18s var(--ease-out-quart);
}
.dl-guide-x:hover{color:var(--text);border-color:var(--line-2)}
.dl-guide ol{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:6px}
.dl-guide li{font-size:12.4px;line-height:1.65;color:var(--dim)}
.dl-guide li b{color:var(--text);font-weight:500}
.dl-guide code{
  font-family:var(--mono);font-size:11.5px;padding:1px 5px;border-radius:4px;
  background:rgba(255,255,255,.07);color:var(--text);
  word-break:break-all;
}
.dl-guide-note{
  font-size:11.8px;line-height:1.6;color:var(--faint);
  padding-top:8px;border-top:1px solid rgba(255,255,255,.07);
}

/* 手机上四张卡是竖排、面板只有 ~316px 宽：桌面上那套「一行装下明细 + 取消」会
   把「剩余 5 秒」挤成省略号（实测截图里就是「剩余 …」）。窄屏改成两行 ——
   明细独占一行不截断，按钮另起一行右对齐。宁可多一行，也不要看不全。 */
@media (max-width:560px){
  .dl-dl-foot{font-size:11.2px;row-gap:6px}
  .dl-dl-name{font-size:11.4px}
  .dl-dl-stat{flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip}
  .dl-dl-x{margin-left:auto}
  .dl-guide li{font-size:12.1px}
}

/* 关闭动效的用户：进度条不要 transition，直接跳数字 */
@media (prefers-reduced-motion:reduce){
  .dl-dl-bar>i{transition:none}
  .dl-dl.indet .dl-dl-bar>i{animation:none;width:100% !important;opacity:.45}
}

/* ════════════════════════════════════════════════════════════════════════════
   v578（用户 2026-11-01 第 5 / 6 / 7 项）· 两处「平时收起、点了往下弹」的折叠面板
   ────────────────────────────────────────────────────────────────────────────
   用户原话：
     ⑤「网站主页中的下载页面平时收起来，点击下载安装的时候在下方下拉弹出。」
     ⑥「网站主页的登录页面平时也收起来，点击登录/注册的时候在功能介绍的会员中心窗口内下拉弹出。」
     ⑦「把这个段删掉，把页眉中的功能介绍和按钮中的功能介绍删掉，把下面 6 个窗口上移。」

   ── 为什么用 grid-template-rows:0fr → 1fr ──
     做「下拉弹出」必须要有过渡。`display:none` 没有过渡；`max-height` 要拍一个够大的
     魔数（拍小了内容被截断，拍大了动画前 70% 是空白）。`0fr → 1fr` 让浏览器自己算真实高度，
     动画结束时正好贴合内容，不需要任何魔数。
     ⚠️ 子项必须 `overflow:hidden; min-height:0`，否则 0fr 也压不下去（min-height:auto 兜底）。
     ⚠️ 不支持插值动画的浏览器会**直接瞬开** —— 功能不受影响，只是少了动画。

   ── 结构（两处完全同构，便于共用一段 JS）──
     <div class="fold" id="xxxFold"><div class="fold-in"> …内容… </div></div>
     开关是**外部的**（下载区用标题条 #dlHead，登录用卡片里的 #authToggle 按钮），
     这样 `.fold` 本身永远不带交互语义，屏读器读到的开关永远是那个带 aria-expanded 的元素。
   ════════════════════════════════════════════════════════════════════════════ */
.fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .44s var(--ease-out-quart)}
.fold>.fold-in{overflow:hidden;min-height:0}
.fold.open{grid-template-rows:1fr}
/* 关掉动效的用户：直接开合，不做过渡 */
@media (prefers-reduced-motion:reduce){ .fold{transition:none} }

/* ── 下载区标题条：整条可点，右侧「展开 / 收起」+ 自绘箭头 ── */
.fold-head{
  cursor:pointer;align-items:center;margin-bottom:0;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:color .22s var(--ease);
}
.fold-head:hover{color:var(--text)}
.fold-head:hover h2{color:var(--accent)}
.fold-head h2{transition:color .22s var(--ease)}
.fold-head:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:6px}
.fold-cue-txt{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-size:12.5px;letter-spacing:.04em;color:var(--dim);white-space:nowrap;
  transition:color .22s var(--ease);
}
.fold-cue-txt::after{
  content:"";width:7px;height:7px;margin-top:-4px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .34s var(--ease-out-quart);
}
.fold-head:hover .fold-cue-txt{color:var(--accent)}
.fold-head[aria-expanded="true"] .fold-cue-txt::after{transform:rotate(-135deg);margin-top:4px}
/* 展开后标题条与内容之间补一点呼吸（收起时不留空白） */
.fold-head[aria-expanded="true"]{margin-bottom:0}
#dlFold>.fold-in>.dl-grid{margin-top:26px}

/* ── 会员中心卡内的「登录 / 注册」折叠 ── */
.feat-auth{margin-top:18px}
.feat-auth-btn{display:inline-flex;align-items:center;gap:9px;min-width:0}
.feat-auth-btn .fold-cue{
  display:inline-block;width:7px;height:7px;margin-top:-4px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .34s var(--ease-out-quart);
}
.feat-auth-btn[aria-expanded="true"] .fold-cue{transform:rotate(-135deg);margin-top:4px}
.feat-auth .fold{margin-top:16px}
/* 登录框在卡片里是**内嵌面板**，不是浮空卡片：
   背景压到 --bg-2、描边用 --line-2，并撤掉 v563 那套「悬浮荧光」（父级 .feat 已经有一层，
   里外两层一起亮会显得脏）。 */
.feat-auth .auth-box{
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:18px;max-width:560px;
}
.feat-auth .auth-box:hover,.feat-auth .auth-box:focus-within{
  transform:none;box-shadow:none;border-color:var(--line-2);
}
@media (max-width:760px){
  .feat-auth .auth-box{padding:15px}
}

/* 收起时把内容从 Tab 焦点序列里摘掉。
   0 高度的 `overflow:hidden` 只是「看不见」——里面的 input / a / button **仍然可以被 Tab 聚焦**，
   键盘用户会凭空掉进一个不可见的输入框（浏览器还会把它滚进视野，看着像页面乱跳）。
   `visibility:hidden` 会让整棵子树不可聚焦；展开时立刻恢复，收起时等 0.44s 动画走完再隐藏，
   否则面板会在收起动画第一帧就「啪」地消失，看不到「下拉收起」的过程。 */
.fold>.fold-in{visibility:hidden;transition:visibility 0s linear .44s}
.fold.open>.fold-in{visibility:visible;transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .fold>.fold-in{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════════
   🆕 v579（用户 2026-11-01 五项）
   ① 下载区搬到首屏正下方、标题条删除    ② 会员中心登录面板移入卡的下半部分
   ③ 六个功能标题做成跳转按钮
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── ① 下载区：整节不再有标题条，收起时**一像素都不占** ──
   收起态由 `.fold{grid-template-rows:0fr}` 把 `.fold-in` 压成 0 高（含内边距一起被 clip），
   所以留白只能放在 `.dl-grid` 自己的 padding 上 —— 放到 `.dl-zone` 上就会变成
   「hero 底下永远拖着一条空白」，正是用户说的「这个位置的空间删掉」。 */
.dl-zone{padding:0}
#dlFold>.fold-in>.dl-grid{margin-top:0;padding:34px 0 46px}

/* ── ③ 六个功能标题 → 按钮（点击跳网页版对应页）──
   标题仍然是 <h3>（SEO / 屏读器层级不变），里面那层 <a> 才是按钮。
   视觉：与全站 .btn 同族的胶囊，但更矮、无底色块，靠描边 + 悬停浮起表达「可点」。 */
.feat-copy h3 .feat-go{
  display:inline-flex;align-items:center;gap:10px;
  padding:5px 13px 5px 11px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.028);
  color:inherit;text-decoration:none;
  transition:background .24s var(--ease),border-color .24s var(--ease),
             transform .24s var(--ease-out-quart),box-shadow .24s var(--ease);
}
.feat-copy h3 .feat-go .feat-no{padding-top:1px}
.feat-copy h3 .feat-go:hover{
  background:rgba(47,212,196,.13);border-color:rgba(47,212,196,.52);
  transform:translateY(-1px);box-shadow:0 10px 26px -18px rgba(47,212,196,.9);
}
.feat-copy h3 .feat-go:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
/* 右上角斜箭头（↗）：比正箭头更明确「会在新标签打开」 */
.feat-go-arrow{
  width:7px;height:7px;margin-left:2px;flex:0 0 auto;
  border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;
  transform:translateY(1px);
  opacity:.55;transition:opacity .24s var(--ease),transform .24s var(--ease-out-quart);
}
.feat-copy h3 .feat-go:hover .feat-go-arrow{opacity:1;transform:translate(1px,-1px)}
@media (prefers-reduced-motion:reduce){
  .feat-copy h3 .feat-go,.feat-go-arrow{transition:none}
  .feat-copy h3 .feat-go:hover{transform:none}
}

/* ── ② 会员中心卡：登录面板升到「卡的第二行、跨两列」 ──
   ── 为什么必须升成 .feat 的直接子节点 ──
     它原来挂在 `.feat-copy`（右列）里，展开时把右列撑高 ⇒ 整张卡变高、左边的视频被
     行高带着往下滑（用户要的正是「视频不要跟着下滑」）。放到第二行后，第一行的高度
     只由「视频 / 文案」决定，展开前后**逐像素不变**。 */
.feat-authcard{align-items:start}
/* ⚠️ 必须把「视频 / 文案」钉在第 1 行、把折叠面板钉在第 2 行。
   只写 `grid-column:1 / -1` 是不够的：`.feat-media` 在偶数卡上有 `order:2`，
   而自动布局的游标一旦被跨列的折叠面板推到第 2 行，媒体就会被排到**第 3 行**
   —— 实测视频顶端 3449→3809，正好多了折叠面板那 360px，「视频跟着下滑」原样复现。 */
.feat-authcard .feat-media,.feat-authcard .feat-copy{grid-row:1}
.feat-authcard .feat-lower{grid-row:2}
.feat-lower{grid-column:1 / -1;width:100%}
.feat-copy .feat-auth-btn{margin-top:18px}
.auth-cols{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,34px);padding-top:22px;
  border-top:1px solid var(--line);margin-top:6px;
}
.auth-side-h{
  margin:0 0 12px;font-size:12.5px;letter-spacing:.1em;color:var(--accent);
  font-family:var(--mono,inherit);
}
/* 权益标签在窄栏里改成竖排：横排 wrap 会折成参差不齐的两三行，读起来比竖排乱 */
.auth-side .feat-pts{flex-direction:column;align-items:flex-start;margin-top:0}
.auth-side-note{margin-top:14px;font-size:12.6px;line-height:1.78;color:var(--dim)}
/* 右栏 = 登录 / 注册窗口。#authBox 在卡内是**内嵌面板**，不是浮空卡片：
   背景压到 --bg-2、描边 --line-2，并撤掉 v563 那套「悬浮荧光」（父级 .feat 已有一层）。 */
.auth-main .auth-box{
  margin:0;max-width:none;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:18px;
}
.auth-main .auth-box:hover,.auth-main .auth-box:focus-within{
  transform:none;box-shadow:none;border-color:var(--line-2);
}
@media (max-width:820px){
  /* 🆕 v580（用户第 2 项）：「手机版滑到会员中心功能说明窗口的时候，动画没有了。」
     ── 根因（实测）──
       v579 为桌面**两列**把媒体与文案钉在第 1 行、折叠面板钉在第 2 行（见上面那三条
       `grid-row`）。到了 ≤820px 的**单列**网格，`.feat-media` 与 `.feat-copy` 就落进
       **同一个 grid 单元**里互相压 —— 实测 `media w=0 h=2`、`copy w=306 h=233`、
       `lower w=0 h=0`：视频宽度 0（看起来就是「动画没了」），登录面板也一起塌成 0。
     ── 修法 ──
       手机档把 grid-row 交还自动排布。DOM 顺序本来就是 media → copy → lower，
       单列下自然排成三行，不需要任何位置钉死。
     ⚠️ 这三条必须写在 ≤820px 块**内部**：桌面档的两列仍要 media/copy 同处第 1 行，
        否则展开登录面板时右侧视频会跟着下滑（那正是 v579 用户第 2 项要修的现象）。 */
  .feat-authcard .feat-media,
  .feat-authcard .feat-copy,
  .feat-authcard .feat-lower { grid-row: auto; }
  .auth-cols{grid-template-columns:1fr;gap:16px;padding-top:16px}
  .auth-main .auth-box{padding:15px}
}

/* ══════════════════════════════════════════════════════════════════════════════
   🆕 v581（用户 2026-11-03 五项）
   ③ 会员权益 4 项上移到「登录/注册」按钮之上（内容改为截图 4 项，含图标 + 对勾）
   ③b 折叠面板左栏「会员权益」删除，登录窗口居中
   ⑥ 手机版页眉：「注册/登录」「AI 在线问答」移到标题行右上方
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 会员权益 4 项（.feat-copy 内、登录/注册按钮之上）──
   每项 = 左圆形图标 + 标题/副文 + 右绿色对勾，竖向 4 行（对齐截图）。 */
.benefits{margin-top:18px}
.benefits-h{
  margin:0 0 10px;font-size:12px;letter-spacing:.1em;color:var(--accent);
  font-family:var(--mono,inherit);
}
.benefit-list{list-style:none;display:grid;gap:8px}
.benefit{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
}
.benefit-ico{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent-dim);color:var(--accent);
}
.benefit-ico svg{width:18px;height:18px}
.benefit-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.benefit-txt b{font-size:13.6px;font-weight:500;color:var(--text);line-height:1.32}
.benefit-txt em{font-style:normal;font-size:12.2px;color:var(--dim);margin-top:1px;line-height:1.5}
.benefit-ok{flex:0 0 auto;font-style:normal;color:var(--ok);font-size:15px;font-weight:600;line-height:1}

/* ── 登录窗口居中：左栏权益已删，auth-cols 变单列，登录框居中（桌面两列下的折叠面板） ── */
.auth-cols{grid-template-columns:1fr}
.auth-main .auth-box{margin:0 auto;max-width:560px}

/* ── 手机版页眉：撤销 ≤1040px 的「导航折到第二行」，让品牌与两个按钮同一行 ──
   品牌（logo + 「脉谱健康」，隐藏版本号 #brandVer 腾横向空间）居左，
   「注册/登录」「AI 在线问答」靠 justify-content:space-between 顶到右侧。 */
@media (max-width:620px){
  header.site .bar{flex-wrap:nowrap;gap:12px}
  header.site nav.site{flex-basis:auto;order:0}
  header.site .brand em{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   🆕 v582c（用户 2026-11-04）· 下载区「待发布」置灰态
   ──────────────────────────────────────────────────────────────────────────
   为什么不直接用现成的 `.btn[disabled]`：
     那条原有规则只写了 opacity / cursor，`:hover` 的「上浮 1px + 换底色」照旧生效 ——
     一个明确标着「待发布」的按钮还会跟着鼠标动，读起来像「其实能点」。
   这里把 hover / active 的形变与 solid 的实心底色一起按住。
   ⚠️ 没用 `pointer-events:none`：那样连 cursor:not-allowed 都出不来，
      用户反而得不到「这个不能点」的反馈。真正的点击拦截在 app.v582c.js（三层保险：
      无 href → 监听器判 aria-disabled → click() 判开关）。
   ══════════════════════════════════════════════════════════════════════════ */
.btn.is-off,
.btn.is-off:hover,
.btn.is-off:active,
.btn.is-off.solid,
.btn.is-off.solid:hover,
.btn.is-off.solid:active{
  opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;
  background:transparent;border-color:var(--line-2);color:var(--text);
}
/* 卡片 hover 时不要把「待发布」的徽章也点亮成强调色（见上面 .dl-card:hover .dl-badge） */
.dl-card:hover .dl-badge.soon{border-color:rgba(243,201,105,.45)}
.dl-badge.soon{border-color:rgba(243,201,105,.45);background:rgba(243,201,105,.1);color:#F3C969}
/* 置灰期间「大小 / 更新」显示「—」，用等宽字体对齐，避免和真数据长得一样 */
.dl-meta .na{font-family:var(--mono);opacity:.6}