:root{--bg:#f4f6fb;--fg:#16203a;--mut:#5b6785;--card:#fff;--line:#d9deea;--pri:#1c2f6b;--red:#c62828;--ok:#1b7f3b;--warn:#9a6700}
@media (prefers-color-scheme:dark){:root{--bg:#0f1526;--fg:#e8ecf7;--mut:#9aa6c4;--card:#18203a;--line:#2a3558;--pri:#8fb0ff;--red:#ff6b6b;--ok:#5fd38a;--warn:#f0c060}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
header{display:flex;align-items:center;justify-content:space-between;padding:14px 0 6px}
h1{font-size:20px;margin:0}h2{font-size:16px;margin:22px 0 8px}
.pill{font-size:12px;padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--mut)}
.pill.ok{color:var(--ok);border-color:var(--ok)}.pill.bad{color:var(--red);border-color:var(--red)}
.banner{border:1px solid var(--warn);color:var(--warn);border-radius:10px;padding:10px 12px;margin:8px 0;font-size:14px}
.banner.red{border-color:var(--red);color:var(--red)}
.note{color:var(--mut);font-size:14px}
input{display:block;width:100%;font-size:18px;padding:12px;margin:10px 0;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);-webkit-user-select:text;user-select:text}
#code{letter-spacing:4px;text-transform:uppercase;text-align:center;font-weight:700}
button{font:inherit;border:0;border-radius:12px;padding:12px 16px;touch-action:manipulation}
.primary{background:var(--pri);color:#fff;width:100%}
@media (prefers-color-scheme:dark){.primary{color:#0f1526}}
.sos{position:relative;overflow:hidden;display:block;width:min(72vw,300px);height:min(72vw,300px);margin:18px auto 14px;border-radius:50%;background:var(--red);color:#fff;box-shadow:0 6px 22px rgba(198,40,40,.35)}
.sos span{display:block;font-size:64px;font-weight:800;letter-spacing:2px;position:relative;z-index:1}
.sos small{position:relative;z-index:1;font-size:13px;opacity:.9}
.sos i{position:absolute;left:0;bottom:0;width:100%;height:0;background:rgba(0,0,0,.28)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.card h3{margin:0 0 6px;font-size:15px}
.card.late h3{color:var(--warn)}.card.cancelled h3{color:var(--mut)}
ol.steps{list-style:none;margin:0;padding:0}
ol.steps li{padding:4px 0 4px 26px;position:relative;font-size:14px;color:var(--mut)}
ol.steps li:before{content:"○";position:absolute;left:4px}
ol.steps li.done{color:var(--fg)}ol.steps li.done:before{content:"●";color:var(--ok)}
ol.steps li.wait:before{content:"◌";color:var(--warn)}
.cancel{position:relative;overflow:hidden;margin-top:8px;background:transparent;border:1px solid var(--line);color:var(--fg);width:100%;font-size:14px}
.cancel i{position:absolute;left:0;top:0;height:100%;width:0;background:rgba(120,130,160,.25)}
details{margin-top:22px;color:var(--mut);font-size:13px}pre{white-space:pre-wrap;-webkit-user-select:text;user-select:text}