:root {
    --bg:#eef1f6; --panel:#fff; --ink:#16192a; --soft:#545a72; --faint:#8b90a6;
    --line:#e2e6ef; --lineS:#eef1f6; --primary:#2f3aa8; --primaryInk:#3d49c9; --wash:#eceef9;
    --green:#1f9d6a; --greenW:#e4f5ee; --amber:#c98a12; --amberW:#fbf1dd; --red:#d0473f; --redW:#fbe9e7;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,"Cascadia Code",Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg:#0c0e16; --panel:#161a26; --ink:#f0f2f8; --soft:#a6acc4; --faint:#6f7691;
        --line:#262b3b; --lineS:#1d2130; --primary:#6470ee; --primaryInk:#8a94ff; --wash:#1e2140;
        --green:#35c489; --greenW:#123528; --amber:#e0a53a; --amberW:#362a12; --red:#f0685f; --redW:#3a1f1d;
    }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; }
body {
    background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
#app { max-width:430px; margin:0 auto; min-height:100%; padding:22px 18px 28px; display:flex; flex-direction:column; }
.view { display:flex; flex-direction:column; gap:15px; flex:1; }
.hidden { display:none !important; }

.brandrow, .topline { display:flex; align-items:center; gap:10px; }
.mk { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--primary),var(--primaryInk)); color:#fff; display:grid; place-items:center; font-size:15px; flex:none; }
.brandrow { font-size:19px; font-weight:800; letter-spacing:-0.01em; }
.topline .who { line-height:1.2; }
.topline .who b { font-size:14px; } .topline .who span { display:block; font-size:11px; color:var(--faint); }
.topline .linkbtn { margin-left:auto; }
.linkbtn { background:none; border:none; color:var(--faint); font-size:12px; font-weight:600; text-decoration:underline; cursor:pointer; }
.tag { color:var(--soft); font-size:14px; line-height:1.5; margin:2px 0 4px; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; }
label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); display:block; margin-bottom:6px; }
input { width:100%; font-family:var(--sans); font-size:16px; padding:13px 14px; border:1px solid var(--line); border-radius:11px; background:var(--bg); color:var(--ink); }
input:focus { outline:2px solid var(--primary); border-color:var(--primary); }

.status { border-radius:18px; padding:18px; text-align:center; }
.status.out { background:var(--lineS); }
.status.in  { background:linear-gradient(150deg,var(--green),#137a52); color:#fff; }
.status .k { font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; opacity:.75; }
.status.out .k { color:var(--faint); }
.status .v { font-size:24px; font-weight:800; letter-spacing:-0.01em; margin-top:3px; }
.status .m { font-size:12.5px; margin-top:3px; opacity:.85; }

.banner { display:flex; align-items:center; gap:11px; border-radius:13px; padding:13px 15px; font-size:13.5px; font-weight:600; }
.banner .big { font-size:20px; }
.banner .sub { display:block; font-weight:500; font-size:11.5px; opacity:.85; margin-top:2px; }
.banner.ok { background:var(--greenW); color:var(--green); }
.banner.bad { background:var(--redW); color:var(--red); }
.banner.neutral { background:var(--wash); color:var(--primaryInk); }

.big { border:none; border-radius:16px; padding:18px; text-align:center; font-size:17px; font-weight:800; letter-spacing:.01em; cursor:pointer; color:#fff; width:100%; }
.big small { display:block; font-size:11px; font-weight:600; opacity:.9; margin-top:4px; letter-spacing:0; }
.big.go { background:var(--primary); box-shadow:0 8px 20px -8px var(--primary); }
.big.stop { background:var(--red); box-shadow:0 8px 20px -8px var(--red); }
.big.dis { background:var(--lineS); color:var(--faint); cursor:not-allowed; box-shadow:none; }
.big.ghost { background:transparent; color:var(--soft); border:1px solid var(--line); box-shadow:none; }
#btn-punch { margin-top:auto; }

#view-done { align-items:center; text-align:center; justify-content:center; }
.okmark { width:78px; height:78px; border-radius:50%; background:var(--greenW); color:var(--green); display:grid; place-items:center; font-size:40px; }
#view-done h2 { font-size:22px; letter-spacing:-0.01em; margin:6px 0 0; }
.okrows { width:100%; margin-top:6px; }
.okrow { display:flex; justify-content:space-between; font-size:13.5px; padding:11px 2px; border-bottom:1px solid var(--lineS); }
.okrow span { color:var(--faint); } .okrow b { font-weight:700; }
.installtip { margin-top:20px; font-size:12px; color:var(--faint); line-height:1.5; }