:root{--bg:#f5f7fa;--card:#fff;--line:#e3e6ea;--text:#1f2328;--muted:#6b7280;--primary:#185fa5;--primary-soft:#e6f1fb;--green:#0f6e56;--red:#a32d2d}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
.wrap{max-width:520px;margin:0 auto;padding:18px 14px 32px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.title{font-size:17px;font-weight:500}
.badge{font-size:11px;padding:3px 9px;border-radius:12px;background:#f1efe8;color:#444441}
.badge.ok{background:#e1f5ee;color:var(--green)}.badge.bad{background:#fcebeb;color:var(--red)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px}
.card[hidden]{display:none}
h2{font-size:14px;font-weight:500;margin:0 0 12px}
.hero{text-align:center;padding:26px 18px}
.label{font-size:13px;color:var(--muted);min-height:20px;margin-bottom:8px;word-break:break-all}
.code{font:500 46px/1.2 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;letter-spacing:8px;color:var(--primary);margin:6px 0 12px;min-height:58px}
.sub{font-size:12px;color:var(--muted)}
.progress{height:5px;background:var(--primary-soft);border-radius:3px;overflow:hidden;margin:10px 0 18px}
.progress>div{height:100%;background:var(--primary);width:100%;transition:width .2s linear}
.btn{border:1px solid var(--line);background:#fff;color:var(--text);padding:9px 14px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px}
.btn:hover{border-color:#b4b2a9}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.wide{width:100%}
.clock{font-size:11px;color:var(--muted);margin-top:14px;font-family:ui-monospace,Consolas,monospace}
.hint{font-size:12px;color:var(--muted);margin:10px 0 0}
.hint code{background:#f1f3f6;padding:1px 4px;border-radius:4px}
.err{color:var(--red);font-size:13px;margin:0 0 8px;word-break:break-all}
footer{text-align:center;font-size:11px;color:var(--muted);margin-top:18px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#1f2328;color:#fff;padding:9px 16px;border-radius:8px;font-size:13px;z-index:40}
.toast[hidden]{display:none}
@media(max-width:420px){.code{font-size:38px;letter-spacing:5px}.wrap{padding:12px 10px 24px}.card{padding:16px}}

/* 纯 CSS 看门狗：脚本未启动时延迟 3 秒浮出；app.js 一旦执行会给 body 加 .booted 关闭它 */
.boot-fail{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(560px,calc(100% - 28px));max-height:70vh;overflow:auto;z-index:30;visibility:hidden;opacity:0;box-shadow:0 8px 28px rgba(31,35,40,.18);animation:bootFailIn .3s ease 3s forwards}
@keyframes bootFailIn{to{visibility:visible;opacity:1}}
body.booted .boot-fail{display:none}
.boot-fail ul{padding-left:18px;margin:8px 0}
.boot-fail li{margin:5px 0}