:root{
  color-scheme: light;
  --surface-1:#fcfcfb; --page:#f9f9f7;
  --ink-1:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7;
  --border:rgba(11,11,11,0.10);
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --good-text:#006300;
  --chip-ok:#e7f2e7; --chip-warn:#fdf3dc; --chip-late:#fbe4e4;
  --accent:#2a78d6; --accent-deep:#1c5cab;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --surface-1:#1a1a19; --page:#0d0d0d;
    --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
    --grid:#2c2c2a; --baseline:#383835;
    --border:rgba(255,255,255,0.10);
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
    --good-text:#0ca30c;
    --chip-ok:#12240f; --chip-warn:#2e2308; --chip-late:#331111;
    --accent:#3987e5; --accent-deep:#5598e7;
  }
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--page); color:var(--ink-1);
  overscroll-behavior:none;
}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--page)}
.app.wide{max-width:980px}

/* ---------- shared components ---------- */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}
.hairline{height:1px;background:var(--grid);border:none;margin:10px 0}
.muted{color:var(--ink-3)} .sec{color:var(--ink-2)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;padding:13px 18px;font-size:15px;font-weight:650;
  background:var(--accent);color:#fff;width:100%;
}
.btn:active{transform:scale(.985)}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn.subtle{background:var(--surface-1);color:var(--ink-1);border:1px solid var(--border)}
.btn.danger{background:var(--critical)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;background:var(--page);
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--grid);
}
.topbar .brand{font-weight:800;font-size:17px;letter-spacing:-.2px}
.topbar .brand small{display:block;font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.2px}
.topbar .spacer{flex:1}
.iconbtn{width:38px;height:38px;border-radius:11px;background:var(--surface-1);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:17px}
.net{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--good-text)}
.net .dot{width:8px;height:8px;border-radius:50%;background:var(--good)}
.net.off{color:var(--serious)} .net.off .dot{background:var(--serious)}

/* ---------- demo bar ---------- */
.demobar{
  margin:10px 16px 0;border-radius:12px;border:1px dashed var(--baseline);
  padding:9px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-2);background:var(--surface-1);
}
.demobar b{font-size:11px;letter-spacing:.6px;color:var(--ink-3)}
.demobar select{
  font:inherit;font-weight:650;color:var(--ink-1);background:var(--page);
  border:1px solid var(--border);border-radius:8px;padding:4px 8px;
}
.demobar .ff{margin-left:auto;font-weight:700;color:var(--accent);font-size:12px;padding:4px 8px;border-radius:8px;border:1px solid var(--accent)}

/* ---------- login ---------- */
.login{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px;gap:20px}
.login h1{font-size:26px;letter-spacing:-.4px}
.login h1 span{color:var(--accent)}
.login p{color:var(--ink-2);font-size:14.5px;line-height:1.5}
.stafflist{display:flex;flex-direction:column;gap:10px}
.staffrow{
  display:flex;align-items:center;gap:12px;background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius);padding:13px 14px;text-align:left;
}
.staffrow:active{transform:scale(.99)}
.avatar{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;color:#fff;flex-shrink:0;
}
.staffrow .who{flex:1}
.staffrow .who b{font-size:15.5px;display:block}
.staffrow .who span{font-size:12.5px;color:var(--ink-3)}
.staffrow .arr{color:var(--ink-3);font-size:18px}

/* ---------- staff board ---------- */
.board{padding:12px 16px 110px;display:flex;flex-direction:column;gap:10px}
.boardhead{display:flex;align-items:baseline;gap:8px;margin:6px 2px 0}
.boardhead h2{font-size:18px;letter-spacing:-.3px}
.boardhead .count{font-size:12.5px;color:var(--ink-3);font-weight:600}
.clientcard{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  position:relative;overflow:hidden;
}
.clientcard:active{transform:scale(.99)}
.clientcard .edge{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px}
.clientcard.ok .edge{background:var(--good)}
.clientcard.due .edge{background:var(--warn)}
.clientcard.late .edge{background:var(--critical)}
.clientcard .cinfo{flex:1;min-width:0}
.clientcard .cname{font-weight:750;font-size:15.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.clientcard .cmeta{font-size:12.5px;color:var(--ink-3);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.lvl{font-size:10.5px;font-weight:800;letter-spacing:.4px;padding:2px 7px;border-radius:6px;background:var(--page);border:1px solid var(--border);color:var(--ink-2)}
.lvl.hot{background:var(--chip-late);border-color:transparent;color:var(--critical)}
.flag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--chip-warn);color:#7a5200}
:root[data-theme="dark"] .flag{color:#fab219}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .flag{color:#fab219} }
.timerbox{text-align:right;flex-shrink:0}
.timerbox .t{font-variant-numeric:tabular-nums;font-weight:800;font-size:17px}
.timerbox .lab{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--ink-3)}
.clientcard.late .timerbox .t{color:var(--critical)}
.clientcard.due .timerbox .t{color:#a36f00}
:root[data-theme="dark"] .clientcard.due .timerbox .t{color:var(--warn)}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .clientcard.due .timerbox .t{color:var(--warn)} }
.prox{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700}
.prox .bars{display:inline-flex;align-items:flex-end;gap:1.5px;height:11px}
.prox .bars i{width:3px;border-radius:1px;background:var(--baseline)}
.prox .bars i:nth-child(1){height:4px}.prox .bars i:nth-child(2){height:7px}.prox .bars i:nth-child(3){height:11px}
.prox.p2 .bars i:nth-child(-n+2){background:var(--good)}
.prox.p3 .bars i{background:var(--good)}
.prox.p1 .bars i:nth-child(1){background:var(--warn)}
.prox .plab{color:var(--ink-3)}
.prox.p3 .plab,.prox.p2 .plab{color:var(--good-text)}

/* sticky action */
.stickyact{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  padding:10px 16px calc(env(safe-area-inset-bottom) + 12px);
  background:linear-gradient(to top,var(--page) 70%,transparent);
  display:flex;gap:10px;max-width:480px;margin:0 auto;
}
.badge{
  position:absolute;top:-6px;right:-6px;background:var(--critical);color:#fff;
  font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}

/* ---------- record sheet ---------- */
.sheet-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;opacity:0;pointer-events:none;transition:opacity .18s}
.sheet-scrim.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:480px;margin:0 auto;
  background:var(--surface-1);border-radius:20px 20px 0 0;border:1px solid var(--border);border-bottom:none;
  transform:translateY(105%);transition:transform .22s cubic-bezier(.32,.72,.35,1);
  max-height:92dvh;display:flex;flex-direction:column;
}
.sheet.open{transform:translateY(0)}
.sheet .grip{width:38px;height:4px;border-radius:2px;background:var(--baseline);margin:9px auto 2px}
.sheet .body{overflow-y:auto;padding:10px 18px calc(env(safe-area-inset-bottom) + 16px)}
.sheethead{display:flex;align-items:center;gap:12px;padding:6px 0 12px;border-bottom:1px solid var(--grid)}
.sheethead .who b{font-size:17px;display:block}
.sheethead .who span{font-size:12.5px;color:var(--ink-3)}
.verify{
  margin:12px 0;border-radius:12px;padding:11px 13px;display:flex;gap:10px;align-items:center;
  font-size:13px;font-weight:650;border:1px solid transparent;
}
.verify .vico{font-size:19px}
.verify.v-ok{background:var(--chip-ok);color:var(--good-text)}
.verify.v-weak{background:var(--chip-warn);color:#7a5200}
.verify.v-none{background:var(--chip-late);color:var(--critical)}
.verify.v-na{background:var(--page);border-color:var(--border);color:var(--ink-2)}
.prox.pna .plab{color:var(--ink-3);font-style:italic}
:root[data-theme="dark"] .verify.v-weak{color:var(--warn)}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .verify.v-weak{color:var(--warn)} }
.verify small{display:block;font-weight:500;font-size:11.5px;opacity:.85}
.groupt{font-size:11px;font-weight:800;letter-spacing:.8px;color:var(--ink-3);margin:14px 0 8px}
.codegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.code{
  border:1px solid var(--border);border-radius:11px;padding:10px 6px;text-align:center;
  background:var(--page);display:flex;flex-direction:column;gap:3px;align-items:center;
}
.code .ico{font-size:20px}
.code .cl{font-size:11.5px;font-weight:650;line-height:1.15}
.code.sel{background:var(--accent);border-color:var(--accent)}
.code.sel .cl{color:#fff}
.code.sel .ico{filter:grayscale(1) brightness(3)}
.locrow{display:flex;gap:7px;flex-wrap:wrap}
.loc{border:1px solid var(--border);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:650;background:var(--page)}
.loc.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.notefield{
  width:100%;font:inherit;font-size:14px;border:1px solid var(--border);border-radius:11px;
  background:var(--page);color:var(--ink-1);padding:10px 12px;resize:none;min-height:44px;
}
.overridebox{margin-top:10px}
.sheetfoot{display:flex;gap:10px;margin-top:16px}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:calc(env(safe-area-inset-bottom) + 90px);left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink-1);color:var(--page);padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:650;
  opacity:0;transition:all .25s;z-index:80;pointer-events:none;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- supervisor ---------- */
.dash{padding:12px 16px 40px;display:flex;flex-direction:column;gap:14px}
.tilerow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:760px){.tilerow{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px}
.tile .tv{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-top:2px}
.tile .tl{font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--ink-3)}
.tile .ts{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.tile.alert .tv{color:var(--critical)}
.tile.goodv .tv{color:var(--good-text)}
.alertfeed{display:flex;flex-direction:column;gap:8px}
.alertrow{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:11px;background:var(--chip-late);font-size:13px}
.alertrow.warn{background:var(--chip-warn)}
.alertrow .at{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--ink-2);flex-shrink:0;font-weight:700;margin-top:1px}
.alertrow b{font-weight:750}
.livegrid{display:flex;flex-direction:column;gap:8px}
.liverow{
  display:grid;grid-template-columns:12px 1fr auto;gap:3px 10px;align-items:center;
  padding:10px 12px;border-radius:11px;
  background:var(--page);border:1px solid var(--border);font-size:13px;
}
.liverow .lname{font-weight:700;min-width:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.liverow .lstat{color:var(--ink-2);font-size:12.5px;grid-column:2/4}
.liverow .ltime{font-variant-numeric:tabular-nums;font-weight:750;font-size:12.5px}
.liverow.late .ltime{color:var(--critical)} .liverow.due .ltime{color:#a36f00}
:root[data-theme="dark"] .liverow.due .ltime{color:var(--warn)}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .liverow.due .ltime{color:var(--warn)} }
.statusdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.liverow.ok .statusdot{background:var(--good)} .liverow.due .statusdot{background:var(--warn)} .liverow.late .statusdot{background:var(--critical)}
table.aud{width:100%;border-collapse:collapse;font-size:12.5px}
table.aud th{font-size:10.5px;letter-spacing:.6px;color:var(--ink-3);text-align:left;padding:7px 8px;border-bottom:1px solid var(--grid);font-weight:800}
table.aud td{padding:8px;border-bottom:1px solid var(--grid);vertical-align:top}
table.aud td.tnum{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:650}
.vtag{font-size:10.5px;font-weight:750;padding:2px 7px;border-radius:6px;display:inline-block}
.vtag.beacon{background:var(--chip-ok);color:var(--good-text)}
.vtag.manual{background:var(--chip-warn);color:#7a5200}
.vtag.late{background:var(--chip-late);color:var(--critical)}
.vtag.na{background:var(--page);border:1px solid var(--border);color:var(--ink-2)}
.vtag.nfc{background:#e3edfb;color:var(--accent-deep)}
:root[data-theme="dark"] .vtag.nfc{background:#152741;color:#86b6ef}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .vtag.nfc{background:#152741;color:#86b6ef} }
:root[data-theme="dark"] .vtag.manual{color:var(--warn)}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .vtag.manual{color:var(--warn)} }
.sechead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sechead h3{font-size:15px;letter-spacing:-.2px;flex:1;min-width:120px}
.linkbtn{font-size:12.5px;font-weight:700;color:var(--accent)}
.stafftab{width:100%;border-collapse:collapse;font-size:13px}
.stafftab td,.stafftab th{padding:8px;border-bottom:1px solid var(--grid);text-align:left}
.stafftab th{font-size:10.5px;letter-spacing:.6px;color:var(--ink-3);font-weight:800}
.stafftab td.num{font-variant-numeric:tabular-nums;text-align:right;font-weight:650}
.meter{height:6px;border-radius:3px;background:var(--grid);overflow:hidden;min-width:70px}
.meter i{display:block;height:100%;border-radius:3px;background:var(--series-1)}
.filterrow{display:flex;gap:8px;flex-wrap:wrap}
.fchip{border:1px solid var(--border);background:var(--surface-1);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:650}
.fchip.sel{background:var(--ink-1);color:var(--page);border-color:var(--ink-1)}

/* forms & staff admin */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formgrid .full{grid-column:1/3}
label.flab{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--ink-3);display:block;margin-bottom:5px}
.input{width:100%;font:inherit;font-size:14px;border:1px solid var(--border);border-radius:10px;background:var(--page);color:var(--ink-1);padding:10px 12px}
select.input{appearance:auto}
.staffadmin{display:flex;flex-direction:column;gap:8px}
.sarow{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;background:var(--page);border:1px solid var(--border);flex-wrap:wrap}
.sarow .who{flex:1;min-width:150px}
.sarow .who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sarow .who b{font-size:14px;display:block}
.sarow .who span{font-size:12px;color:var(--ink-3)}
.sarow.inactive{opacity:.5}
.rolechip{font-size:10.5px;font-weight:800;letter-spacing:.4px;padding:3px 8px;border-radius:6px;background:var(--chip-ok);color:var(--good-text)}
.rolechip.admin{background:#ece9fb;color:#4a3aa7}
:root[data-theme="dark"] .rolechip.admin{background:#262148;color:#9085e9}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])) .rolechip.admin{background:#262148;color:#9085e9} }
.iconbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.reptbl{width:100%;border-collapse:collapse;font-size:12.5px}
.reptbl th{font-size:10.5px;letter-spacing:.6px;color:var(--ink-3);text-align:left;padding:7px 8px;border-bottom:1px solid var(--grid);font-weight:800}
.reptbl td{padding:8px;border-bottom:1px solid var(--grid)}
.reptbl td.num{font-variant-numeric:tabular-nums;text-align:right;font-weight:650}

/* timeline view */
.tlwrap{position:relative;overflow-x:auto}
.tlhead{display:flex;align-items:flex-end;gap:8px;margin-bottom:2px}
.tlrow{display:flex;align-items:center;gap:8px;min-height:38px;border-bottom:1px solid var(--grid)}
.tlrow:last-child{border-bottom:none}
.tlname{width:132px;flex-shrink:0;font-size:12.5px;font-weight:750;line-height:1.2;padding:4px 0}
.tlmeta{display:flex;gap:5px;align-items:center;margin-top:2px;flex-wrap:wrap}
.tlmeta .lvl{font-size:9.5px;padding:1px 5px}
.gapb{font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;padding:1px 6px;border-radius:5px;background:var(--chip-ok);color:var(--good-text)}
.gapb.due{background:var(--chip-warn);color:#7a5200}
.gapb.late{background:var(--chip-late);color:var(--critical)}
.bstat{font-size:9.5px;color:var(--ink-3);font-style:italic}
.tltrack{flex:1;position:relative;height:34px;min-width:340px}
.tlhr{position:absolute;top:0;bottom:0;width:1px;background:var(--grid)}
.tlhlab{position:absolute;bottom:0;transform:translateX(-50%);font-size:10px;color:var(--ink-3)}
.tlnow{position:absolute;top:0;bottom:0;width:2px;background:var(--series-1);opacity:.55;border-radius:1px}
.tldot{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;cursor:pointer}
.tldot.ok{background:var(--baseline)}
.tldot.noprox{background:var(--surface-1);border:2.5px solid var(--series-1)}
.tldot.late{background:var(--warn)}
.tldot.missed{background:var(--critical);width:12px;height:12px}
.tldot:hover{outline:2px solid var(--ink-1);outline-offset:1px}
.syncbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kipulogo{font-weight:800;font-size:12px;letter-spacing:.4px;background:#0e4c68;color:#fff;border-radius:7px;padding:4px 9px}
.synclog{font-size:12px;color:var(--ink-2);display:flex;flex-direction:column;gap:5px}
.synclog b{font-weight:700}
.crow{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;background:var(--page);border:1px solid var(--border);flex-wrap:wrap}
.crow .who{flex:1;min-width:150px}
.crow .who b{font-size:14px;display:block}
.crow .who span{font-size:11.5px;color:var(--ink-3)}
.bchip{font-size:11px;font-weight:750;padding:4px 9px;border-radius:7px;background:var(--chip-ok);color:var(--good-text)}
.bchip.none{background:var(--page);border:1px dashed var(--baseline);color:var(--ink-3)}
.bchip.ref{background:var(--chip-late);color:var(--critical)}
.assignrow{display:flex;gap:7px;align-items:center;width:100%;margin-top:8px}
.assignrow .input{max-width:170px;padding:8px 10px;font-size:13px}
.photodot{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;background:var(--surface-1);display:flex;align-items:center;justify-content:center;font-size:9px;border:1px solid var(--border)}

/* chart */
.chartwrap{position:relative}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin:2px 0 8px}
.legend .li{display:flex;align-items:center;gap:6px;font-weight:600}
.legend .sw{width:10px;height:10px;border-radius:3px}
.ttip{
  position:absolute;pointer-events:none;background:var(--ink-1);color:var(--page);
  border-radius:9px;padding:7px 10px;font-size:12px;font-weight:600;opacity:0;transition:opacity .12s;
  white-space:nowrap;z-index:5;transform:translate(-50%,-110%);
}
.ttip .tt2{font-weight:500;opacity:.8}
.datatable{display:none}
.datatable.show{display:block}

.viewtabs{display:flex;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:4px;gap:4px;margin:0 16px}
.viewtabs button{flex:1;padding:8px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-3)}
.viewtabs button.sel{background:var(--accent);color:#fff}
.hide{display:none !important}

/* ---------- production additions ---------- */
.loginform{display:flex;flex-direction:column;gap:10px}
.loginform .input{font-size:16px;padding:13px 14px} /* 16px stops iOS zoom-on-focus */
.err{background:var(--chip-late);color:var(--critical);border-radius:10px;padding:10px 13px;font-size:13px;font-weight:650}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:4px}
.pinpad button{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:15px 0;font-size:19px;font-weight:700}
.pinpad button:active{background:var(--accent);color:#fff}
.pindots{display:flex;gap:9px;justify-content:center;margin:10px 0 4px}
.pindots i{width:12px;height:12px;border-radius:50%;background:var(--grid);display:block}
.pindots i.on{background:var(--accent)}
.codegrid.multi .code.sel::after{content:"✓";position:absolute;top:4px;right:6px;font-size:11px;font-weight:800;color:#fff}
/* A code required by another (respiration attestation under Sleeping) — shown
   as locked on, so it is clear it is part of what is being attested to. */
.codegrid.multi .code.sel.locked::after{content:"🔒"}
.code.sel.locked{opacity:.92}
.code{position:relative}
.groupt .hint{font-weight:600;letter-spacing:0;color:var(--ink-3);text-transform:none;font-size:11px}
.queuepill{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--serious)}
.syncing{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.scanbox{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:var(--page);border:1px dashed var(--baseline);font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.testbadge{background:var(--chip-warn);color:#7a5200;font-size:10px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:5px}
.emptystate{text-align:center;padding:40px 20px;color:var(--ink-3)}
.emptystate .big{font-size:34px;margin-bottom:10px}
.emptystate p{font-size:13.5px;line-height:1.5;margin-top:6px}
.daterow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.daterow input{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:var(--page);color:var(--ink-1)}

/* install-to-home-screen bar */
.installbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  max-width:480px;margin:0 auto;
  background:var(--ink-1);color:var(--page);
  padding:12px 14px calc(env(safe-area-inset-bottom) + 12px);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;line-height:1.4;
  border-radius:14px 14px 0 0;
}
.installbar span{flex:1;min-width:170px}
.installbar .fchip{background:transparent;border-color:rgba(255,255,255,.35);color:var(--page);padding:6px 12px}
.installbar .fchip.sel{background:var(--page);color:var(--ink-1);border-color:var(--page)}