/* mphistory 用户站样式 —— 由原型 docs/prototype/index.html 移植（视觉以原型为准，ui-ux.md 第 2、3、8、10 节）
   与原型的差异：去掉设备框 / 控制台；容器查询改为视口媒体查询；面板层、提示条改为 position:fixed；
   JetBrains Mono 自托管（只含拉丁字符与数字），不引用任何外部字体服务。
   注意：用户全局 gitignore 含 app.css，本文件需 git add -f 才能入库。 */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600 900;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:dark;
  --bg:#0B3A8F; --grid:rgba(255,255,255,.055); --panel:#0C3E98; --panel-2:rgba(255,255,255,.06); --sheet:#0D3F98;
  --ink:#F2F6FF; --muted:#A9C1EC; --line:rgba(255,255,255,.26); --strong:#FFFFFF;
  --accent:#FFD34E; --accent-ink:#0A2A66; --accent-soft:rgba(255,211,78,.24); --ok:#8BE8BC; --bad:#FFA08F;
  --wall:rgba(255,255,255,.075); --foot-ink:rgba(169,193,236,.55); --scrim:rgba(3,20,60,.6);
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --track:1010px; /* 首页输入框与完成页下载条共用的内容宽度，保证贯穿元素左右对齐 */
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.45,.64,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65;
  background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;
  -webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 整页容器：页脚始终贴底——内容不足一屏时 .view 撑开剩余高度，超过一屏时页脚正常跟在内容后面 */
.page{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.page>.nav,.page>.foot{flex:none}
body.locked{overflow:hidden}

/* ============ 应用 ============ */
.nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,5vw,64px)}
.logo{font-weight:900;font-size:20px;letter-spacing:.01em;border:0;background:none;padding:0;color:var(--ink)}
.logo em{font-style:normal;color:var(--accent)}
.navr{display:flex;align-items:center;gap:22px;font-size:13.5px}
.navr button{border:0;background:none;color:var(--muted);padding:4px 0}
.navr button:hover{color:var(--ink)}
.poll{display:flex;align-items:center;gap:7px;font:12px var(--mono);color:var(--muted)}
.poll svg{width:16px;height:16px;transform:rotate(-90deg)}
.poll circle{fill:none;stroke-width:2.5}
.poll .tr{stroke:var(--line)}
.poll .pg{stroke:var(--accent);stroke-dasharray:44;transition:stroke-dashoffset .25s linear}
@media (max-width:560px){.navr{gap:14px}.navr .fb{display:none}.poll span{display:none}}

.view{position:relative;z-index:2;flex:1 0 auto;width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(16px,5vw,64px) 40px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wall{position:absolute;left:0;right:0;top:64px;height:560px;overflow:hidden;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s var(--ease);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.page[data-view="home"] .wall,.page[data-view="final"] .wall{opacity:1}
.wall .row{white-space:nowrap;font-weight:900;font-size:46px;line-height:1.5;color:var(--wall)}
.wall .row span{display:inline-block;animation:marq var(--dur) linear infinite}
.wall .row:nth-child(even) span{animation-direction:reverse}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:560px){.wall .row{font-size:30px}.wall .row:nth-child(n+6){display:none}}

.eyebrow{display:flex;gap:10px;align-items:center;font:13px var(--mono);letter-spacing:.05em;color:var(--muted)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(139,232,188,.25);flex:none}
.hero{margin:0;font-weight:900;font-size:clamp(38px,7.2vw,78px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.hero em{font-style:normal;color:var(--accent)}

/* 贯穿元素：输入框 / 状态条 / 下载链接 */
.bar{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;min-height:56px;padding:0 10px 0 20px;background:var(--panel);border:1px solid var(--line);view-transition-name:mph-bar}
.bar>*{position:relative;z-index:1}
.bar .ic{flex:none;width:18px;height:18px;color:var(--muted)}
.bar .u{flex:1;min-width:0;font:14px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .ph{font-weight:700;font-size:15.5px;white-space:nowrap}
.bar .sub{font:12.5px var(--mono);color:var(--muted);white-space:nowrap}
.bar .sp{flex:1}
.bar .rt{font:12.5px var(--mono);color:var(--muted);white-space:nowrap;padding-right:10px}
.bar .n{font:600 20px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.bar .n small{font-size:13px;color:var(--muted);font-weight:400}
.bar .pct{font:700 15px var(--mono);color:var(--accent);min-width:52px;text-align:right;padding-right:10px;font-variant-numeric:tabular-nums}
.bar .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
.bar .dot.breathe{animation:breathe 1.6s ease-in-out infinite}
.bar .dot.bad{background:var(--bad)}
.bar .dot.ok{background:var(--ok)}
.bar .dot.mute{background:var(--muted)}
@keyframes breathe{50%{opacity:.25;transform:scale(.7)}}
.bar .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent-soft);z-index:0}
.bar .fill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--accent)}
.bar .scan{position:absolute;inset:0;z-index:0;pointer-events:none}
.bar .scan::before{content:"";position:absolute;top:0;bottom:0;width:160px;left:-160px;background:linear-gradient(90deg,transparent,rgba(255,211,78,.18),transparent);animation:scan 2.4s linear infinite}
@keyframes scan{to{left:100%}}
/* 进行中的「ing」动效：下载再慢、进度几乎不动时，也能看出任务在跑
   1 已完成部分铺斜纹并持续向右流动；2 进度前沿呼吸发光；3 整条状态条有一道扫光掠过（0% 时也可见）；4 阶段名后跟跳动的省略号 */
#runBar .fill{background:repeating-linear-gradient(-45deg,rgba(255,211,78,.30) 0 10px,rgba(255,211,78,.16) 10px 20px) 0 0/28.28px 100%,var(--accent-soft);animation:stripes .9s linear infinite;transition:width .3s linear}
#runBar .fill::after{box-shadow:0 0 10px 2px rgba(255,211,78,.75);animation:edge 1.4s ease-in-out infinite}
@keyframes stripes{to{background-position:28.28px 0,0 0}}
@keyframes edge{50%{opacity:.35;box-shadow:0 0 3px 0 rgba(255,211,78,.4)}}
.ing::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.bar.is-bad{border-color:rgba(255,160,143,.55)}
.bar.is-bad .ph{color:var(--bad)}

@media (max-width:600px){.bar{gap:10px;padding-left:16px}.bar .sub,.bar .rt[data-k="eta"]{display:none}.bar .ph{font-size:14.5px}.bar .n{font-size:17px}}
.bar-input{min-height:84px;border:2px solid var(--strong);background:rgba(255,255,255,.07);padding:0 12px 0 24px}
.bar-input:focus-within{border-color:var(--accent)}
.bar-input input{flex:1;min-width:0;height:60px;background:none;border:0;outline:none;font:500 18px var(--mono);color:var(--ink);caret-color:var(--accent)}
.bar-input input:focus-visible{outline:none}
.bar-input input::placeholder{color:rgba(169,193,236,.6)}
@media (max-width:600px){
  .bar-input{flex-wrap:wrap;padding:10px 12px 12px;gap:6px 10px;min-height:0}
  .bar-input input{flex:1 1 calc(100% - 40px);height:44px;font-size:14px}
  .bar-input .btn-y{flex:1 1 100%}
}
.btn-y{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:60px;padding:0 28px;border:0;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:17px;position:relative;white-space:nowrap;transition:opacity .2s}
.btn-y:disabled{opacity:.35;cursor:not-allowed}
.btn-y.sm{height:44px;font-size:15px;padding:0 18px}
.btn-y.block{width:100%;height:56px}
.btn-y .spin{display:none}
.btn-y.loading .t{visibility:hidden}
.btn-y.loading .spin{display:block;position:absolute;left:50%;top:50%;margin:-11px 0 0 -11px}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.btn-g{flex:none;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:14px;white-space:nowrap}
.btn-g:hover{border-color:var(--muted)}
/* 次按钮放进已有边框的容器（面板、虚线框、状态条、弹层）时不再描边，改用浅色底块区分，避免框套框 */
:is(.pn,.keep,.supp,.bar,.sheet,.banner) .btn-g,.pn .file label{border-color:transparent;background:rgba(255,255,255,.1)}
:is(.pn,.keep,.supp,.bar,.sheet,.banner) .btn-g:hover,.pn .file label:hover{border-color:transparent;background:rgba(255,255,255,.17)}
.linkish{border:0;background:none;padding:0;color:var(--muted);border-bottom:1px dashed var(--line);font-size:13.5px}
.linkish:hover{color:var(--ink)}

/* 首页 */
.home{display:grid;gap:22px;padding-top:clamp(20px,5vw,56px);max-width:var(--track)}
.home .facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.home .facts b{font-family:var(--mono);color:var(--ink);font-weight:500;margin-right:8px}
.howto{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.err{margin:-8px 0 0;color:var(--bad);font-size:14px}
.banner{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;border:1px dashed var(--accent);padding:10px 14px;font-size:14px}
.banner b{font-family:var(--mono);color:var(--accent);letter-spacing:.06em}

/* 两栏 */
.cols{display:grid;grid-template-columns:minmax(0,500fr) minmax(0,540fr);gap:28px;margin-top:22px;align-items:start}
.col{display:grid;gap:16px;align-content:start;min-width:0}
@media (max-width:760px){
  .cols{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .col{display:contents}
  .o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}
}
/* 预览页：左右两栏底边对齐——两栏等高，各自最后一块面板撑满剩余高度（仅两栏布局时） */
@media (min-width:761px){
  .cols.eq{align-items:stretch}
  .cols.eq>.col{display:flex;flex-direction:column}
  .cols.eq>.col>:last-child{flex:1 1 auto}
}
.pn{background:var(--panel);border:1px solid var(--line);padding:20px 22px;display:grid;gap:14px;align-content:start;min-width:0}
.pn-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font:12px var(--mono);color:var(--muted);letter-spacing:.04em}
.pn-h .live{color:var(--ok)}
.pn h2{margin:0;font-weight:900;font-size:clamp(22px,3.4vw,30px);line-height:1.25;text-wrap:balance}
.pn p{margin:0}
.pn .sub{color:var(--muted);font-size:14.5px}
.pn .sub b{color:var(--ink);font-family:var(--mono);font-weight:600}

.ac{display:flex;gap:16px;align-items:center;min-width:0}
.ava{width:60px;height:60px;flex:none;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:900;font-size:26px}
.ava.sm{width:44px;height:44px;font-size:20px}
.ava.dead{background:var(--muted)}
.nm{font-weight:900;font-size:24px;line-height:1.2;overflow-wrap:anywhere}
.nm.sm{font-size:19px}
.cf{font-size:13px;color:var(--muted);margin-top:3px}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;font:12.5px var(--mono);color:var(--muted);border-top:1px dashed var(--line);padding-top:12px}
.meta b{color:var(--ink);font-weight:500}
.meta .ord b{letter-spacing:.14em;border:1px solid var(--strong);padding:0 4px}
.meta a,.meta button.lk{color:var(--muted);background:none;border:0;padding:0;font:inherit;border-bottom:1px dashed var(--line)}

.cta{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:76px;padding:0 26px;border:0;background:var(--accent);color:var(--accent-ink);text-align:left;view-transition-name:mph-cta}
.cta .l{font-weight:900;font-size:clamp(18px,2.6vw,24px)}
.cta .pr{font:15px var(--mono);white-space:nowrap}
.cta .pr b{font-size:26px;font-weight:700}
.cta.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--accent)}
.sticky{display:grid;gap:8px}
@media (max-width:760px){
  .sticky{position:sticky;bottom:0;z-index:6;margin:0 calc(-1 * clamp(16px,5vw,64px));padding:14px clamp(16px,5vw,64px) calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(11,58,143,0),var(--bg) 28%)}
  .cta{min-height:64px}
}

.plist{list-style:none;margin:0;padding:0;display:grid}
.plist li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line);font-size:15px}
.plist li:first-child{border-top:0}
.plist .d{font:12.5px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.plist .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree{margin:0;font:12.5px/1.65 var(--mono);white-space:pre;overflow-x:auto;color:var(--ink)}
.tree i{font-style:normal;color:var(--muted)}
.tree b{font-weight:500;color:var(--accent)}

/* 阶段与统计 */
.stages{padding-top:12px;padding-bottom:12px;gap:0}
.sg{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;min-height:42px;font-size:15px;border-top:1px dashed var(--line)}
.sg:first-child{border-top:0}
.sg .i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:800;border:1.5px solid var(--line);color:transparent}
.sg .v{font:12.5px var(--mono);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.sg.todo{color:var(--muted)}
.sg.ok .i{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.sg.now .i{border-color:var(--accent);border-top-color:transparent;animation:rot .9s linear infinite}
.sg.now .t{font-weight:700}
.sg.bad .i{border-color:var(--bad);background:var(--bad);color:var(--bg)}
.sg.bad .t{color:var(--bad);font-weight:700}
.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:16px 8px}
.stats div{display:grid;gap:2px;padding:0 12px;border-left:1px solid var(--line);font-size:12px;color:var(--muted);min-width:0}
.stats div:first-child{border-left:0}
.stats b{font:600 20px var(--mono);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.stats .bad b{color:var(--bad)}
.stats.mute b{color:var(--muted)}
@media (max-width:520px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}.stats div:nth-child(3){border-left:0}}

/* 实时标题 */
.log{list-style:none;margin:0;padding:0;display:grid;height:440px;overflow:hidden;align-content:start}
.log li{display:grid;grid-template-columns:18px 92px minmax(0,1fr);gap:10px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.log li:first-child{border-top:0}
.log .m{font-size:12px;color:var(--ok)}
.log .m.bad{color:var(--bad)}
.log .m.f{color:var(--muted)}
.log .d{font:12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.log .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log li.gone .t{color:var(--muted);text-decoration:line-through}
.log li.enter{animation:rollin .42s var(--ease) both}
@keyframes rollin{from{opacity:0;transform:translateY(-14px);background:var(--accent-soft)}to{opacity:1;transform:none;background:transparent}}
@media (max-width:760px){.log{height:262px}}

/* 待确认等 */
.tl{margin:0;padding:0;list-style:none;display:grid}
.tl li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;min-height:38px;font-size:14.5px}
.tl .i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);justify-self:center}
.tl .ok .i{background:var(--ok);border-color:var(--ok)}
.tl .now .i{border-color:var(--accent);background:var(--accent);animation:breathe 1.6s ease-in-out infinite}
.tl .now.bad .i{border-color:var(--bad);background:var(--bad);animation:none}
.tl .todo{color:var(--muted)}
.tl .v{font:12px var(--mono);color:var(--muted)}
.keep{border:1px dashed var(--line);padding:14px 16px;display:grid;gap:8px;font-size:13.5px;color:var(--muted)}
.keep .row{display:flex;gap:10px;align-items:center;min-width:0}
.keep code{flex:1;min-width:0;font:13px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.fine{font-size:12.5px;color:var(--muted)}
.fine b{color:var(--ink);font-weight:500}
.note{border-left:2px solid var(--accent);padding:2px 0 2px 12px;font-size:14px;color:var(--ink)}
.field{display:grid;gap:6px}
.field label{font-size:13px;color:var(--muted)}
.in{height:44px;padding:0 12px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink);font-size:15px;width:100%;border-radius:0}
.in:focus{border-color:var(--accent);outline:none}
textarea.in{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px;background-repeat:no-repeat}
select.in option{background:var(--sheet)}
.in-row{display:flex;gap:8px}
.in-row .in{flex:1;min-width:0}
.file{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.file label{display:inline-flex;align-items:center;height:44px;border:1px solid var(--line);padding:0 18px;color:var(--ink);font-size:14px;cursor:pointer}
.file label:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.file input{position:absolute;opacity:0;width:1px;height:1px}
.ok-t{color:var(--ok)}
.bad-t{color:var(--bad)}

/* 完成 / 过期 */
.final{display:grid;gap:22px;padding-top:clamp(20px,5vw,48px);max-width:var(--track)}
.dim{position:relative;display:grid;place-items:center;height:26px}
.dim .ln{position:absolute;left:0;right:0;top:50%;height:16px;margin-top:-8px;border-left:1.2px solid var(--muted);border-right:1.2px solid var(--muted)}
.dim .ln::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.2px solid var(--muted);transform-origin:left;transform:scaleX(1)}
.dim span:not(.ln){position:relative;background:var(--bg);padding:0 14px;font:13px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92%}
.bar-done{min-height:96px;border:2px solid var(--accent);background:rgba(8,40,110,.88);box-shadow:0 30px 80px -30px rgba(0,10,40,.8);padding:0 14px 0 24px;gap:18px}
.zip{flex:none;width:52px;height:60px;border:2px solid var(--accent);position:relative;display:grid;place-items:end center;padding-bottom:6px;font:700 11px var(--mono);color:var(--accent)}
.zip::before{content:"";position:absolute;left:50%;top:0;width:6px;height:26px;margin-left:-3px;background:repeating-linear-gradient(var(--accent) 0 4px,transparent 4px 7px)}
.lk{flex:1;min-width:0;display:grid;gap:2px}
.lk b{font:600 18px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk span{font-size:13px;color:var(--muted)}
.btn-dl{height:68px;font-size:20px;font-weight:900}
.btn-dl small{font:600 13px var(--mono);opacity:.75}
.is-expired .bar-done{border-style:dashed;border-color:var(--line);box-shadow:none}
.is-expired .zip{border-color:var(--muted);color:var(--muted)}
.is-expired .zip::before{background:repeating-linear-gradient(var(--muted) 0 4px,transparent 4px 7px)}
.is-expired .lk b{color:var(--muted);text-decoration:line-through}
.is-expired .hero em{color:var(--muted)}
@media (max-width:700px){
  .bar-done{flex-wrap:wrap;padding:16px;gap:14px}
  .bar-done .lk{flex-basis:calc(100% - 70px)}
  .bar-done .btn-g{flex:1;height:52px}
  .bar-done .btn-y{flex:2;height:52px;font-size:17px}
}
.sum{display:flex;flex-wrap:wrap;gap:16px 34px;align-items:baseline}
.sum div{display:grid;font-size:12.5px;color:var(--muted)}
.sum b{font:600 26px var(--mono);color:var(--ink);line-height:1.3;font-variant-numeric:tabular-nums}
.is-expired .sum b{color:var(--muted)}
.sum .keepnote{margin-left:auto;align-self:center;text-align:right;font-size:13px;color:var(--muted);max-width:360px}
.sum .keepnote b{font-size:13px;font-weight:600;color:var(--accent);display:inline;font-family:var(--mono)}
@media (max-width:700px){.sum{gap:14px 24px}.sum b{font-size:21px}.sum .keepnote{margin-left:0;text-align:left;flex-basis:100%}}
.supp{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line);padding:12px 16px;font-size:14px}
.supp .sp{flex:1}
.after{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
@media (max-width:760px){.after{grid-template-columns:1fr}}
.relay .cd{font:600 13px var(--mono);color:var(--accent)}
.relay.dead .cd{color:var(--muted)}
.faq{padding:0;gap:0} /* .pn 的 14px 网格间距会落在分隔线上方，让标题看起来偏上 */
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{padding:16px 22px;cursor:pointer;font-weight:700;line-height:1.45;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;overflow-wrap:anywhere}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:1em;text-align:center;font-family:var(--mono);line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq .body{padding:0 22px 18px;color:var(--muted);font-size:14px;display:grid;gap:8px}
.faq .body b{color:var(--ink);font-weight:500}
.faq table{border-collapse:collapse;font:12px var(--mono);color:var(--ink)}
.faq td,.faq th{border:1px solid var(--line);padding:4px 8px;text-align:left;white-space:nowrap}
.faq .tw{overflow-x:auto}
.batches{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:14px}
.batches button{border:0;background:none;color:var(--muted);padding:0;border-bottom:1px dashed var(--line)}

/* 进入动画（完成时刻） */
.celebrate .dim .ln::before{animation:draw .9s var(--ease) .5s both}
.celebrate .dim span:not(.ln){animation:fadein .4s ease 1.2s both}
.celebrate .btn-dl{animation:slidein .62s var(--spring) .9s both}
.celebrate .sum{animation:rise .5s var(--ease) 1.1s both}
.celebrate .hero{animation:rise .6s var(--ease) .25s both}
.celebrate .bar-done::before{content:"";position:absolute;inset:0;background:var(--accent);z-index:0;animation:flash .9s var(--ease) .35s both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slidein{from{transform:translateX(130%)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes flash{from{opacity:.85;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}

/* 骨架屏 */
.boot .pn,.boot .bar{color:transparent!important;border-color:var(--line)!important}
.boot .pn *,.boot .bar *{visibility:hidden}
.boot .pn::after,.boot .bar::after{content:"";position:absolute;inset:16px 20px;visibility:visible;background:
  linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.13) 37%,rgba(255,255,255,.04) 63%) 0 0/400% 100%,
  repeating-linear-gradient(transparent 0 14px,var(--panel) 14px 32px);animation:shim 1.2s linear infinite}
.boot .pn{position:relative;min-height:120px}
@keyframes shim{from{background-position:100% 0,0 0}to{background-position:0 0,0 0}}

/* 页脚 */
.foot{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:22px clamp(16px,5vw,64px) calc(28px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;font-size:12px;line-height:1.7;color:var(--foot-ink)} /* 无分隔线、整体降一级，不和主内容抢视线 */
.foot .r{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.foot button{border:0;background:none;color:inherit;padding:0;border-bottom:1px dashed rgba(255,255,255,.14);font-size:12px}
.foot button:hover{color:var(--muted)}
.foot .mail{font-family:var(--mono);color:inherit;user-select:all}

/* 面板层 */
.layer{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px}
.layer[hidden]{display:none}
.layer .scrim{position:absolute;inset:0;background:var(--scrim);animation:fadein .25s ease both}
.sheet{position:relative;width:min(640px,100%);max-height:calc(100% - 16px);overflow-y:auto;background:var(--sheet);color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 40px 90px -20px rgba(0,10,40,.7);padding:30px 34px;display:grid;gap:18px;align-content:start;font-size:15px;line-height:1.65}
.sheet.pop{animation:pop .45s var(--spring) both}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.sh-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sh-h h2{margin:0;font-weight:900;font-size:clamp(22px,4vw,28px);line-height:1.25}
.sh-h .st{font:12.5px var(--mono);color:var(--muted);margin-top:6px}
.x{flex:none;border:0;background:none;color:var(--muted);font-size:24px;line-height:1;padding:2px 6px}
.cbs{display:grid;gap:10px}
.ck{display:flex;gap:14px;align-items:center;text-align:left;width:100%;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);padding:14px 16px;font-size:15px}
.ck .bx{width:22px;height:22px;border:2px solid var(--muted);display:grid;place-items:center;flex:none;transition:all .25s var(--spring)}
.ck .bx::after{content:"✓";font-size:14px;font-weight:800;color:var(--accent-ink);transform:scale(0);transition:transform .3s var(--spring)}
.ck[aria-checked="true"]{border-color:var(--accent)}
.ck[aria-checked="true"] .bx{background:var(--accent);border-color:var(--accent)}
.ck[aria-checked="true"] .bx::after{transform:scale(1)}
.ck small{display:block;color:var(--muted);font-size:12.5px}
.more{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:13.5px;color:var(--muted)}
.more li::before{content:"· "}
.disc summary{cursor:pointer;font-size:13px;color:var(--muted)}
.disc p{margin:8px 0 0;font-size:13px;color:var(--muted)}
.qr-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.qr-box{width:220px;height:220px;background:#fff;padding:14px;position:relative;justify-self:start}
.qr-box img{width:192px;height:192px;display:block;object-fit:contain;animation:qrin .7s var(--ease) both}
@keyframes qrin{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
.qr-box.empty{display:grid;place-items:center;text-align:center;color:#10141B;font-size:14px;line-height:1.6;padding:18px}
.qr-box.empty b{display:block;font-size:15px}
.qr-box.empty span{font:12px var(--mono);color:#3a4250;word-break:break-all}
.qr-box .tag{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-size:11px;color:var(--muted)}
.pay{display:grid;gap:12px}
.amt{font:14px var(--mono);color:var(--muted)}
.amt b{display:block;font-size:44px;line-height:1.05;color:var(--ink);font-weight:700;letter-spacing:-.02em}
.code{display:grid;gap:2px}
.code .lb{font-size:12px;color:var(--muted)}
.code .v{font:700 34px var(--mono);letter-spacing:.28em}
.code .v span{display:inline-block;animation:drop .42s var(--spring) both}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.how{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:13.5px;color:var(--muted);counter-reset:h}
.how li{counter-increment:h}
.how li::before{content:counter(h) "  ";font-family:var(--mono);color:var(--accent);font-weight:700}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--accent);color:var(--accent);font:700 14px var(--mono)}
.steps b{display:block}
.steps span{color:var(--muted);font-size:14px}
.wx-arrow{position:absolute;right:18px;top:10px;font:700 34px var(--mono);color:var(--accent);animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{50%{transform:translate(4px,-4px)}}
@media (max-width:760px){
  .layer{place-items:end stretch;padding:0}
  .sheet{width:100%;max-height:94%;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px))}
  .sheet.pop{animation-name:up}
  .qr-row{grid-template-columns:1fr;gap:34px}
  .qr-box{justify-self:center}
}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:60;visibility:hidden;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:12px 18px;font-size:14px;font-weight:600;max-width:calc(100% - 32px);box-shadow:0 20px 50px -10px rgba(0,0,0,.45);transition:opacity .25s,transform .35s var(--spring)}
.toast.on{visibility:visible;opacity:1;transform:translate(-50%,0)}
.welcome{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:55;visibility:hidden;transform:translate(-50%,calc(100% + 48px));width:min(640px,calc(100% - 32px));display:flex;align-items:center;gap:12px;padding:12px 10px 12px 18px;background:var(--ink);color:var(--bg);font-size:14px;box-shadow:0 20px 50px -10px rgba(0,0,0,.45);transition:transform .52s var(--spring)}
.welcome.on{visibility:visible;transform:translate(-50%,0)}
.welcome .lb{font:11.5px var(--mono);color:#6D80A8;letter-spacing:.04em;flex:none}
.welcome s{color:#6D80A8}
.welcome .x{margin-left:auto;color:#6D80A8}

/* View Transitions：贯穿元素的形变 */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
::view-transition-group(mph-bar){animation-duration:.56s;animation-timing-function:var(--ease)}
::view-transition-group(mph-cta){animation-duration:.6s;animation-timing-function:cubic-bezier(.34,1.25,.64,1)}
::view-transition-old(mph-bar),::view-transition-new(mph-bar),::view-transition-old(mph-cta),::view-transition-new(mph-cta){height:100%;animation-duration:.4s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .wall .row span,.bar .scan::before,#runBar .fill,#runBar .fill::after{animation:none!important}
  .ing::after{content:"…"}
}

/* ============ 生产版补充（原型之外） ============ */
/* 头像：有图片时铺满方块，加载失败回退到首字占位 */
.ava{position:relative;overflow:hidden}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--panel)}
/* 手机上任务页 / 预览的状态条吸顶（ui-ux 3.2） */
@media (max-width:760px){
  .bar.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:7;box-shadow:0 10px 24px -14px rgba(0,10,40,.7)}
}
/* 轮询超过 6 小时后停止，改为「点击刷新」 */
.poll button{border:0;background:none;padding:0;color:var(--accent);font:12px var(--mono);border-bottom:1px dashed rgba(255,211,78,.5)}
/* 首页输入框下方错误 */
.err{line-height:1.55}
/* 面板内的行内错误 */
.sheet .fine.bad-t{margin-top:-6px}
.btn-y.loading{pointer-events:none}
/* 找不到任务 / 启动失败 */
.oops{display:grid;gap:18px;padding-top:clamp(20px,5vw,48px);max-width:var(--track)}
.oops .hero{font-size:clamp(34px,6vw,64px)}
.oops .sub{color:var(--muted);font-size:15px;margin:0}
/* 微信内置浏览器：标题墙降为 5 行（ui-ux 第 8 节） */
.wx .wall .row:nth-child(n+6){display:none}
/* 标签页不可见时暂停常驻动画，省电 */
.is-hidden .wall .row span,.is-hidden .bar .scan::before,.is-hidden #runBar .fill,.is-hidden #runBar .fill::after,.is-hidden .ing::after{animation-play-state:paused}
/* 下载按钮在微信里替换成的引导 */
.wx-guide{flex:none;display:grid;gap:2px;justify-items:start;border:0;background:var(--accent);color:var(--accent-ink);padding:10px 18px;text-align:left;font-weight:800;font-size:16px;line-height:1.35;min-height:68px;align-content:center}
.wx-guide small{font:600 12.5px var(--sans);opacity:.8}
@media (max-width:700px){.bar-done .wx-guide{flex:1 1 100%;min-height:56px}}

.logo{text-decoration:none}
/* 微信引导面板：右上角箭头与关闭按钮错开 */
.wx-arrow~.sh-h .x{margin-right:30px}

/* 品牌横版 Logo（448×120，深色底用 on-dark 版）：顶栏 64px 内高 34px，手机 28px */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{display:block;height:34px;width:auto}
@media (max-width:560px){.logo img{height:28px}}

/* ============ 表单对齐（统一规则） ============
   1 输入框与相邻按钮同高（44px）、垂直居中对齐；2 label / 说明 / 输入框同一左边线；
   3 错误提示预留一行高度，出现 / 消失不推动布局；4 手机（≤560px）输入 + 按钮上下排布、占满宽度；
   5 手机输入框字号 16px，避免 iOS 聚焦时自动放大。 */
.field{align-content:start;min-width:0}
.field label,.field .fine{margin:0}
.in{display:block;min-width:0;line-height:1.3}
select.in{padding-right:36px;cursor:pointer}
textarea.in{line-height:1.6}
.in-row{align-items:stretch}
.in-row .btn-y,.in-row .btn-g{height:44px;flex:none;min-width:88px}
/* 错误行：隐藏时仍占位（visibility），显示时只换文字，不跳动 */
.errline,#linkErr{display:block;min-height:1.55em;line-height:1.55;font-size:13px}
.errline[hidden],#linkErr[hidden]{display:block!important;visibility:hidden}
.sheet .fine.bad-t.errline{margin-top:-8px}
.cbs>.errline{margin-top:-4px}
#linkErr{margin:-10px 0 -6px;font-size:14px}
/* 复制链接行：代码框与按钮同高对齐 */
.keep .row{align-items:center;min-height:44px}
.keep .row .btn-g{height:44px}
/* 补传截图：按钮与说明同一行居中；按钮高度与其他次按钮一致 */
.file{align-items:center;gap:8px 12px}
.file label{flex:none;height:44px}
.file>span{min-width:0;line-height:1.5}
/* 按钮组：同高、顶端对齐 */
.acts{align-items:center}
.acts>.btn-y.sm,.acts>.btn-g{height:44px}
@media (max-width:560px){
  .in,.bar-input input{font-size:16px}
  .in-row{flex-direction:column;gap:10px}
  .in-row .btn-y,.in-row .btn-g{width:100%;min-width:0}
  .keep .row{flex-direction:column;align-items:stretch;gap:10px}
  .keep .row code{white-space:normal;word-break:break-all;overflow:visible}
  .keep .row .btn-g{width:100%}
  .file{flex-direction:column;align-items:stretch}
  .file label{justify-content:center}
  .acts{flex-direction:column;align-items:stretch}
  .acts>.btn-y,.acts>.btn-g{width:100%}
}
@media (max-width:560px){
  /* 上下排布时输入框不能继承 flex:1（列方向会把 44px 高度压扁） */
  .in-row .in{flex:none;width:100%;height:44px}
}
/* 窄屏：面板标题行两端文字各自不换行，放不下时整体折行 */
.pn-h{flex-wrap:wrap;row-gap:2px}
.pn-h>span{white-space:nowrap}
@media (max-width:360px){
  /* 320 宽：购买按钮文字不折成两行 */
  .cta{padding:0 16px;gap:10px}
  .cta .l{font-size:16px}
  .cta .pr b{font-size:22px}
  /* 执行中状态条：阶段名可省略，去掉「/ 总数 篇」，保证百分比不被挤出 */
  .bar .ph{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .bar .n small{display:none}
  .bar .pct{min-width:0}
}

/* ============ 表单补充标准（与后台一致） ============
   同行控件同高（44px）；输入框 + 按钮为无缝输入组（任何宽度都保持一行、共用描边）；
   label 行高固定；placeholder 颜色统一；帮助 / 错误文字一律在控件下方、同一左边线。 */
.field label{line-height:20px;min-height:20px}
.in::placeholder,.bar-input input::placeholder{color:rgba(169,193,236,.6);opacity:1}
.in{height:44px}
textarea.in{height:auto}
select.in{appearance:none;-webkit-appearance:none;line-height:42px;padding-top:0;padding-bottom:0;background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%}
/* 无缝输入组 */
.in-row{flex-direction:row!important;gap:0!important;align-items:stretch}
.in-row .in{flex:1 1 0%!important;width:0!important;min-width:0;height:44px;border-right:0} /* 基准宽度 0：输入框不带固有宽度，避免把整组撑出容器 */
.in-row .btn-y,.in-row .btn-g{flex:none!important;width:auto!important;min-width:88px;height:44px;margin:0;border:1px solid var(--line)}
.in-row .btn-y{border-color:var(--accent)}
.in-row .in:focus{border-right:0}
.in-row:focus-within .btn-g{border-color:var(--accent)}
/* 补传截图：按钮在上，说明在下，同一左边线 */
.file{flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
.file>span{font-size:13px;color:var(--muted)}
@media (max-width:560px){.file{align-items:stretch!important}}