:root{--bg:#e8edf2;--ink:#0e1a26;--mute:#5a6b7b;--line:#cdd6df;--ok:#17915f;--busy:#1f5eff;--bad:#c2410c;
--font:"Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
#app{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:clamp(14px,3.2vh,40px) 24px clamp(12px,2.4vh,28px);text-align:center}
header h1{margin:0;font-size:clamp(30px,6.4vh,68px);font-weight:650;letter-spacing:-.03em;line-height:1}
header p{margin:clamp(6px,1.2vh,14px) 0 0;font-size:clamp(17px,3vh,32px);color:var(--mute);letter-spacing:-.005em}
.qrwrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}
#qr{--qr:min(56vh,84vw);width:var(--qr);height:var(--qr);background:#fff;border-radius:clamp(12px,2.2vh,26px);box-shadow:0 1px 0 var(--line),0 24px 60px -28px rgba(14,26,38,.45);overflow:hidden;line-height:0}
#qr svg{display:block;width:100%;height:100%}
.steps{margin:0 0 clamp(8px,1.6vh,20px);font-size:clamp(16px,2.6vh,26px);font-weight:560;letter-spacing:-.005em}
footer{min-height:clamp(30px,5vh,52px);display:flex;flex-direction:column;align-items:center;gap:6px}
.status{display:inline-flex;align-items:center;gap:10px;font-size:clamp(14px,2.1vh,20px);color:var(--mute);font-variant-numeric:tabular-nums}
.status i{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}
.status[data-s=receiving] i,.status[data-s=downloading] i{background:var(--busy);animation:pulse 1s ease-in-out infinite}
.status[data-s=receiving],.status[data-s=downloading]{color:var(--ink)}
.status[data-s=offline] i{background:var(--bad)}
.hint{margin:0;font-size:14px;color:var(--bad)}
@keyframes pulse{50%{transform:scale(.55);opacity:.55}}
.setupbtn{position:fixed;right:14px;bottom:12px;background:none;border:0;color:var(--mute);font:inherit;font-size:13px;padding:6px 8px;cursor:pointer;opacity:.55;border-radius:6px}
.setupbtn:hover,.setupbtn:focus-visible{opacity:1;outline:2px solid var(--busy)}
.overlay{position:fixed;inset:0;background:rgba(14,26,38,.5);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
.overlay[hidden]{display:none}
.sheet{background:#fff;max-width:560px;width:100%;border-radius:16px;padding:28px 30px;text-align:left;max-height:94dvh;overflow:auto}
.sheet h2{margin:0 0 4px;font-size:26px;letter-spacing:-.02em}
.sheet h3{margin:22px 0 4px;font-size:17px}
.sheet p{margin:6px 0;line-height:1.5;font-size:15px;color:#2b3a49}
.sheet .lead{color:var(--mute)}.sheet .small{font-size:13px;color:var(--mute);margin-top:18px}
.actions{margin-top:18px!important}
.btn{font:inherit;font-size:15px;font-weight:600;background:var(--ink);color:#fff;border:0;border-radius:10px;padding:11px 18px;cursor:pointer}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn:focus-visible{outline:3px solid var(--busy);outline-offset:2px}
.info{font-size:13px;color:var(--mute);margin-left:8px}
.lock{max-width:420px;margin:30vh auto 0;text-align:center;padding:0 20px}
.lock h1{font-size:28px;letter-spacing:-.02em}.lock p{color:var(--mute)}
@media (prefers-reduced-motion:reduce){.status i{animation:none!important}}

.last{margin:0;font-size:13px;color:var(--mute);min-height:1em}