/* ═══════════════════════════════════════════════════════════
   闪猫科技 — /flash/ 软件烧录
   继承 /assets/site.css 的 Paper Orange v5 令牌，只补这一页的组件。
   ═══════════════════════════════════════════════════════════ */
:root{
  --ok:#1C8A5B;
  --warn:#B4711A;
  --err:#C2380A;
  --ok-soft:#E9F6F0;
  --err-soft:#FDEEE8;
}

/* ── 页头 ── */
.fh{position:relative;padding:clamp(40px,5.4vw,76px) var(--gut) clamp(20px,2.6vw,34px);overflow:hidden}
.fh::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(20,21,25,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(20,21,25,.045) 1px,transparent 1px);
  background-size:120px 120px;
  -webkit-mask-image:radial-gradient(720px 320px at 22% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(720px 320px at 22% 0%,#000 0%,transparent 78%);
}
.fh-grid{max-width:var(--mx);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,4vw,56px);align-items:end}
.fh .kicker{margin-bottom:22px}
.fh h1{font-family:var(--fZ);font-weight:900;font-size:clamp(34px,4.9vw,66px);line-height:1.14;letter-spacing:-.02em;margin-bottom:0}
.fh h1 .ln{display:block}
.fh h1 .ln+.ln{margin-top:.06em}
.fh h1 em{font-style:normal;color:var(--acc)}
.fh-prep{background:var(--surface);border:var(--hair) solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh)}
.fh-prep .prep-t{display:block;font-family:var(--fM);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.fh-prep ol{list-style:none;counter-reset:p}
.fh-prep li{counter-increment:p;position:relative;padding:9px 0 9px 30px;font-size:13.5px;line-height:1.6;color:var(--ink);border-top:var(--hair) dashed var(--line)}
.fh-prep li:first-child{border-top:0;padding-top:0}
.fh-prep li::before{content:counter(p);position:absolute;left:0;top:11px;width:18px;height:18px;border-radius:50%;background:var(--acc-soft);color:var(--acc-deep);font-family:var(--fM);font-size:10px;display:grid;place-items:center;line-height:1}
.fh-prep li:first-child::before{top:2px}
.fh-prep b{color:var(--ink);font-weight:700}

/* ── 烧录区 ── */
.fw{padding:0 var(--gut) clamp(44px,5vw,80px)}
.fw .x{max-width:var(--mx);margin:0 auto}
.wiz{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,2.2vw,28px);align-items:start}

.wiz-main{background:var(--surface);border:var(--hair) solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-h);overflow:hidden}

.step{position:relative;padding:clamp(20px,2.4vw,28px) clamp(18px,2.8vw,32px);border-bottom:var(--hair) solid var(--line);transition:background .4s var(--ease)}
.step::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .4s var(--ease)}
.step.is-active{background:linear-gradient(180deg,rgba(232,71,11,.035),transparent 70%)}
.step.is-active::before{background:var(--acc)}
.step.is-done::before{background:var(--ok)}
.step-h{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.step-h .num{font-family:var(--fM);font-size:10px;letter-spacing:.04em;color:var(--acc-deep);padding:3px 7px;border:var(--hair) solid rgba(232,71,11,.32);border-radius:6px;background:var(--acc-soft);line-height:1.5}
.step-h h2{font-size:clamp(16px,1.5vw,18.5px);font-weight:800;letter-spacing:-.01em}
.step-state{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--fM);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.step-state::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--line2);transition:background .3s,box-shadow .3s}
.step-state[data-s="ok"]{color:var(--ok)}
.step-state[data-s="ok"]::before{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.step-state[data-s="busy"]{color:var(--acc-deep)}
.step-state[data-s="busy"]::before{background:var(--acc);animation:blink 1s steps(2,end) infinite}
.step-state[data-s="err"]{color:var(--err)}
.step-state[data-s="err"]::before{background:var(--err)}
@keyframes blink{50%{opacity:.25}}
.step .desc{font-size:13.5px;line-height:1.72;color:var(--ink2);max-width:60ch;margin-bottom:16px}

/* 步骤 1 — 连接 */
.ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hint{font-size:12px;color:var(--mut);line-height:1.6}
.hint b{color:var(--ink2);font-weight:700}
.dev-chip{display:none;align-items:center;gap:10px;font-family:var(--fM);font-size:11.5px;color:var(--ink2);background:var(--paper2);border:var(--hair) solid var(--line);border-radius:999px;padding:7px 14px}
.dev-chip.on{display:inline-flex}
.dev-chip i{font-style:normal;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}

/* 步骤 2 — 机型 */
.prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.prod{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border:var(--hair) solid var(--line2);border-radius:14px;cursor:pointer;background:var(--surface);transition:border-color .25s,background .25s,box-shadow .25s,transform .25s var(--ease)}
.prod:hover{border-color:var(--ink2);transform:translateY(-1px)}
.prod input{position:absolute;opacity:0;width:0;height:0}
.prod-th{flex:0 0 auto;width:46px;height:46px;border-radius:11px;overflow:hidden;background:var(--paper2);border:var(--hair) solid var(--line);display:grid;place-items:center}
.prod-th img{width:100%;height:100%;object-fit:cover}
.prod-tx{min-width:0}
.prod-tx b{display:block;font-size:14px;font-weight:800;line-height:1.35}
.prod-tx i{font-style:normal;display:block;font-size:11.5px;color:var(--mut);line-height:1.5}
.prod-tag{display:inline-block;margin-top:5px;font-family:var(--fM);font-size:9.5px;letter-spacing:.08em;padding:2px 7px;border-radius:99px;background:var(--paper2);color:var(--mut);border:var(--hair) solid var(--line2);line-height:1.5}
.prod-tag[data-tone="test"]{background:#FFF6E8;color:#8A5A12;border-color:#E8D3AC}
.prod-tag[data-tone="ok"]{background:#EAF6EE;color:#1E6B3A;border-color:#BFDCC9}
.prod .tick{position:absolute;top:10px;right:10px;width:16px;height:16px;border-radius:50%;border:var(--hair) solid var(--line2);background:var(--surface);transition:background .2s,border-color .2s}
.prod .tick::after{content:'';position:absolute;inset:0;margin:auto;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(.5px,-1px);opacity:0;transition:opacity .2s}
.prod:has(input:checked){border-color:var(--acc);background:var(--acc-soft);box-shadow:0 0 0 3px rgba(232,71,11,.09)}
.prod:has(input:checked) .tick{background:var(--acc);border-color:var(--acc)}
.prod:has(input:checked) .tick::after{opacity:1}
.prod:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:3px}
.prod.is-empty{opacity:.62}
.prod.is-empty .prod-tx i{color:var(--warn)}

/* 步骤 3 — 版本 */
.sel-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sel-wrap{position:relative;flex:1 1 260px;max-width:380px}
.sel-wrap::after{content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:1.8px solid var(--ink2);border-bottom:1.8px solid var(--ink2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sel-wrap select{
  appearance:none;-webkit-appearance:none;width:100%;
  font-family:var(--fZ);font-size:14.5px;font-weight:700;color:var(--ink);
  padding:12px 40px 12px 16px;border-radius:12px;border:var(--hair) solid var(--line2);
  background:var(--surface);cursor:pointer;transition:border-color .2s,box-shadow .2s;
}
.sel-wrap select:hover{border-color:var(--ink2)}
.sel-wrap select:focus-visible{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(232,71,11,.14)}
.sel-wrap select:disabled{color:var(--mut);background:var(--paper2);cursor:not-allowed}
.ver-meta{font-family:var(--fM);font-size:11px;letter-spacing:.04em;color:var(--mut);line-height:1.7}
.ver-meta b{color:var(--acc-deep);font-weight:500}
.ver-notes{margin-top:12px;font-size:12.5px;line-height:1.72;color:var(--ink2);padding:10px 14px;background:var(--paper2);border-left:2px solid var(--line2);border-radius:0 8px 8px 0;max-width:64ch}

/* 执行区 */
.run{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:clamp(18px,2.2vw,26px) clamp(18px,2.8vw,32px);background:var(--paper2);border-top:var(--hair) solid var(--line)}
.btn-lg{padding:16px 32px;font-size:15px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important;filter:grayscale(.25)}
.run-note{flex:1 1 220px;font-size:12px;line-height:1.65;color:var(--mut);min-width:0}
.run-note b{color:var(--err);font-weight:700}

/* 进度 */
.prog-wrap{padding:0 clamp(18px,2.8vw,32px);max-height:0;overflow:hidden;transition:max-height .45s var(--ease),padding .45s var(--ease);background:var(--paper2);border-top:0 solid var(--line)}
.prog-wrap.on{max-height:160px;padding:16px clamp(18px,2.8vw,32px) 20px;border-top:var(--hair) solid var(--line)}
.prog-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-family:var(--fM);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.prog-top b{font-family:var(--fD);font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.bar{height:8px;border-radius:99px;background:var(--line2);overflow:hidden;position:relative}
.bar>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#F0601E,var(--acc));transition:width .35s var(--ease)}
.bar.is-done>i{background:linear-gradient(90deg,#25A06C,var(--ok))}
.bar.is-err>i{background:var(--err)}
.prog-sub{margin-top:8px;font-family:var(--fM);font-size:10.5px;letter-spacing:.06em;color:var(--mut)}

/* 烧录完成提示 */
.done{display:flex;gap:14px;align-items:flex-start;padding:18px clamp(18px,2.8vw,32px);background:var(--ok-soft);border-top:var(--hair) solid rgba(28,138,91,.28)}
.done[hidden]{display:none}
.done-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:14px;line-height:1;margin-top:1px}
.done-tx b{display:block;font-size:15px;font-weight:800;color:#136B45;margin-bottom:3px}
.done-tx p{font-size:13px;line-height:1.65;color:#1C5C40}

/* 日志 */
.logwrap{border-top:var(--hair) solid var(--line);background:var(--surface)}
.logwrap>summary{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:12px clamp(18px,2.8vw,32px);font-family:var(--fM);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  transition:color .2s;
}
.logwrap>summary::-webkit-details-marker{display:none}
.logwrap>summary:hover{color:var(--ink)}
.logwrap>summary::before{content:'+';font-size:13px;line-height:1;color:var(--acc);font-family:var(--fD);font-weight:700}
.logwrap[open]>summary::before{content:'–'}
.logwrap>summary span{margin-left:auto;font-size:10px;letter-spacing:.1em;opacity:.75}
.log{
  margin:0;background:var(--night);color:#B9BCC2;font-family:var(--fM);font-size:11.5px;line-height:1.75;
  padding:14px clamp(18px,2.8vw,32px) 18px;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  scrollbar-width:thin;
}
.log::-webkit-scrollbar{width:8px}
.log::-webkit-scrollbar-thumb{background:#33363D;border-radius:99px}
.log .lg-ok{color:#5BD69E}
.log .lg-er{color:#FF8A63}
.log .lg-hi{color:#FFB48F}

/* 右侧栏 */
.wiz-side{display:flex;flex-direction:column;gap:14px;align-self:start}
.panel{background:var(--surface);border:var(--hair) solid var(--line);border-radius:var(--r);padding:18px 20px}
.panel>h3{font-size:12px;font-weight:800;letter-spacing:.01em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.panel>h3::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--acc)}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;border-top:var(--hair) dashed var(--line);font-size:12.5px;line-height:1.5}
.kv:first-of-type{border-top:0;padding-top:0}
.kv dt{color:var(--mut);white-space:nowrap}
.kv dd{font-family:var(--fM);font-size:12px;color:var(--ink);text-align:right;word-break:break-word}
.kv dd.is-ok{color:var(--ok)}
.kv dd.is-idle{color:var(--mut)}
.panel .tip{font-size:12.5px;line-height:1.72;color:var(--ink2);padding-left:16px;position:relative}
.panel .tip+.tip{margin-top:8px}
.panel .tip::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:1px;background:var(--acc);transform:rotate(45deg)}
.panel .tip b{color:var(--ink);font-weight:700}
.panel a.link{color:var(--acc-deep);font-weight:700;border-bottom:1px solid rgba(194,58,6,.3);transition:border-color .2s}
.panel a.link:hover{border-color:var(--acc-deep)}
.doc-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.doc-list a{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13px;font-weight:600;color:var(--ink2);border-bottom:var(--hair) dashed var(--line);transition:color .2s,gap .25s var(--ease)}
.doc-list li:last-child a{border-bottom:0}
.doc-list a:hover{color:var(--acc-deep);gap:12px}
.doc-list a span{font-family:var(--fM);font-size:11px;color:var(--mut);margin-left:auto}

/* 浏览器不支持提示 */
.alert{display:none;max-width:var(--mx);margin:0 auto 18px;border:var(--hair) solid rgba(232,71,11,.3);border-left:3px solid var(--acc);background:var(--acc-soft);border-radius:12px;padding:13px 16px;font-size:13px;line-height:1.7;color:var(--ink2)}
.alert.on{display:block}
.alert b{color:var(--err)}

/* FAQ */
.ffaq{padding:0 var(--gut) clamp(48px,5.6vw,88px)}
.ffaq .x{max-width:var(--mx);margin:0 auto}
.ffaq-h{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:16px;border-bottom:var(--hair) solid var(--line)}
.ffaq-h h2{font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.02em}
.ffaq-h .mono{font-family:var(--fM);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.ffaq details{border-bottom:var(--hair) solid var(--line)}
.ffaq summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;padding:18px 0;font-size:15px;font-weight:700}
.ffaq summary::-webkit-details-marker{display:none}
.ffaq summary::after{content:'+';margin-left:auto;font-family:var(--fD);font-size:20px;font-weight:500;color:var(--acc);transition:transform .3s var(--ease)}
.ffaq details[open] summary::after{transform:rotate(45deg)}
.ffaq details p{padding:0 0 20px 26px;font-size:13.5px;line-height:1.8;color:var(--ink2);max-width:78ch}
.ffaq details p:not(:last-child){padding-bottom:10px}
.ffaq summary .q-n{font-family:var(--fM);font-size:10.5px;color:var(--mut);letter-spacing:.1em;flex:0 0 auto}

@media(max-width:1000px){
  .fh-grid{grid-template-columns:1fr;align-items:start}
  .fh-spec{max-width:460px}
  .wiz{grid-template-columns:1fr}
  .wiz-side{position:static;flex-direction:row;flex-wrap:wrap}
  .wiz-side .panel{flex:1 1 260px}
}
@media(max-width:980px){
  .prod-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .fh-spec{grid-template-columns:1fr 1fr}
  .run{flex-direction:column;align-items:stretch}
  .run .btn{justify-content:center}
  .step-h{flex-wrap:wrap}
  .step-state{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .prod:hover{transform:none}
  .step-state[data-s="busy"]::before{animation:none}
}

/* ── 自定义固件 ── */
.custom-row { margin-top: 10px; }
.custom-pick {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 14px; border-radius: 10px;
  border: 1px dashed rgba(232,71,11,.45); background: rgba(232,71,11,.04);
  font-size: 13px; color: #C23A06;
}
.custom-pick:hover { background: rgba(232,71,11,.08); }
.custom-pick input[type="file"] { display: none; }
.custom-pick span::before { content: "📄"; margin-right: 7px; }