/* Look shared by the kiosk and the children's desk: tokens mirror the admin app's theme.css (dark default, light variant). */
    /* Tokens mirror the admin app's theme.css (dark default, light variant) so the two read as one product.
       Light mode keeps the ALS maroon accent. */
    :root {
      color-scheme: dark;
      --bg:#0f1115; --panel:#12151b; --card:#14171e; --well:#171b22; --btn:#1a1e26; --sel:#1e232d; --shell:#0b0d11;
      --line:#22262f; --line-2:#262b35; --line-soft:#1c2029; --border:#2c3140; --border-strong:#4a5266;
      --ink:oklch(0.93 0.006 265); --ink-2:oklch(0.68 0.012 265); --ink-3:oklch(0.57 0.012 265);
      --accent:#7D1F2E; --accent-ink:#f5c0c8;
      --green:oklch(0.72 0.14 160); --amber:oklch(0.78 0.13 75); --red:oklch(0.68 0.16 25);
      --green-ink:oklch(0.85 0.12 160); --amber-ink:oklch(0.87 0.1 75); --red-ink:oklch(0.84 0.12 25);
      --tint-accent:rgba(125,31,46,0.15); --tint-green:oklch(0.25 0.04 160); --tint-amber:oklch(0.25 0.04 75); --tint-red:oklch(0.25 0.04 25);
      --bd-accent:rgba(125,31,46,0.5); --bd-green:oklch(0.44 0.09 160); --bd-amber:oklch(0.44 0.09 75); --bd-red:oklch(0.46 0.11 25);
      --kind-blue-ink:oklch(0.85 0.1 235); --tint-kind-blue:oklch(0.25 0.05 235);
      --kind-purple-ink:oklch(0.84 0.1 292); --tint-kind-purple:oklch(0.25 0.04 292);
      --flow-yellow-ink:oklch(0.9 0.14 105); --tint-flow-yellow:oklch(0.28 0.05 105);
      --flow-orange-ink:oklch(0.8 0.15 50); --tint-flow-orange:oklch(0.27 0.06 50);
      --first-ink:oklch(0.84 0.13 345); --tint-first:oklch(0.28 0.06 345);
      --on-accent:#ffffff; --shadow:rgba(0,0,0,0.45);
      --font-ui:'Instrument Sans',Helvetica,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
    }
    @media (prefers-color-scheme: light) {
      :root:not([data-theme="dark"]) {
        color-scheme: light;
        --bg:#eceef3; --panel:#ffffff; --card:#ffffff; --well:#f6f7fa; --btn:#ffffff; --sel:#e8ebf1; --shell:#dde1e9;
        --line:#e2e5ea; --line-2:#e7eaef; --line-soft:#edeff3; --border:#d2d7df; --border-strong:#a6aeba;
        --ink:oklch(0.27 0.014 265); --ink-2:oklch(0.5 0.014 265); --ink-3:oklch(0.58 0.014 265);
        --accent:#7D1F2E; --accent-ink:#6a1826;
        --green:oklch(0.52 0.13 160); --amber:oklch(0.6 0.13 75); --red:oklch(0.55 0.19 25);
        --green-ink:oklch(0.42 0.12 160); --amber-ink:oklch(0.48 0.12 75); --red-ink:oklch(0.48 0.19 25);
        --tint-accent:rgba(125,31,46,0.08); --tint-green:oklch(0.955 0.03 160); --tint-amber:oklch(0.96 0.04 75); --tint-red:oklch(0.955 0.025 25);
        --bd-accent:rgba(125,31,46,0.38); --bd-green:oklch(0.8 0.07 160); --bd-amber:oklch(0.82 0.08 75); --bd-red:oklch(0.8 0.07 25);
        --kind-blue-ink:oklch(0.42 0.16 225); --tint-kind-blue:oklch(0.95 0.03 225);
        --kind-purple-ink:oklch(0.45 0.18 292); --tint-kind-purple:oklch(0.955 0.025 292);
        --flow-yellow-ink:oklch(0.48 0.12 100); --tint-flow-yellow:oklch(0.96 0.05 100);
        --flow-orange-ink:oklch(0.5 0.16 50); --tint-flow-orange:oklch(0.955 0.04 50); --first-ink:oklch(0.46 0.18 345); --tint-first:oklch(0.955 0.03 345);
        --shadow:rgba(20,25,40,0.13);
      }
    }
    :root[data-theme="light"] {
      color-scheme: light;
      --bg:#eceef3; --panel:#ffffff; --card:#ffffff; --well:#f6f7fa; --btn:#ffffff; --sel:#e8ebf1; --shell:#dde1e9;
      --line:#e2e5ea; --line-2:#e7eaef; --line-soft:#edeff3; --border:#d2d7df; --border-strong:#a6aeba;
      --ink:oklch(0.27 0.014 265); --ink-2:oklch(0.5 0.014 265); --ink-3:oklch(0.58 0.014 265);
      --accent:#7D1F2E; --accent-ink:#6a1826;
      --green:oklch(0.52 0.13 160); --amber:oklch(0.6 0.13 75); --red:oklch(0.55 0.19 25);
      --green-ink:oklch(0.42 0.12 160); --amber-ink:oklch(0.48 0.12 75); --red-ink:oklch(0.48 0.19 25);
      --tint-accent:rgba(125,31,46,0.08); --tint-green:oklch(0.955 0.03 160); --tint-amber:oklch(0.96 0.04 75); --tint-red:oklch(0.955 0.025 25);
      --bd-accent:rgba(125,31,46,0.38); --bd-green:oklch(0.8 0.07 160); --bd-amber:oklch(0.82 0.08 75); --bd-red:oklch(0.8 0.07 25);
      --kind-blue-ink:oklch(0.42 0.16 225); --tint-kind-blue:oklch(0.95 0.03 225);
      --kind-purple-ink:oklch(0.45 0.18 292); --tint-kind-purple:oklch(0.955 0.025 292);
      --flow-yellow-ink:oklch(0.48 0.12 100); --tint-flow-yellow:oklch(0.96 0.05 100);
      --flow-orange-ink:oklch(0.5 0.16 50); --tint-flow-orange:oklch(0.955 0.04 50); --first-ink:oklch(0.46 0.18 345); --tint-first:oklch(0.955 0.03 345);
      --shadow:rgba(20,25,40,0.13);
    }

    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0;min-height:100%}
    body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
    button{font:inherit}
    ::-webkit-scrollbar{width:10px;height:10px}
    ::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
    ::-webkit-scrollbar-track{background:transparent}

    /* ── Top bar ── */
    .topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0}
    .brand{display:flex;align-items:center;gap:10px;min-width:0}
    .brand-mark{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;letter-spacing:.05em;flex:0 0 auto}
    /* The logo is black art: shown inverted (white) on dark, as-is on light. */
    .logo-mark{height:34px;width:auto;flex:0 0 auto;filter:invert(1)}
    .logo-login{height:56px;margin-bottom:6px}
    :root[data-theme="light"] .logo-mark{filter:none}
    @media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .logo-mark{filter:none}}
    .brand-name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
    .brand-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
    .spacer{flex:1}
    .pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--ink);cursor:pointer;font-size:12px;font-weight:500;max-width:46vw}
    .pill:hover{border-color:var(--border-strong)}
    .pill span#sessionLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
    .dot.live{background:var(--green);animation:pulse 2s ease infinite}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
    .hdr-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;height:30px;border-radius:6px;background:var(--btn);border:1px solid var(--border);color:var(--ink-2);cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em}
    .hdr-btn:hover{border-color:var(--border-strong);color:var(--ink)}
    .hdr-btn svg{width:14px;height:14px}
    .ico-sun{display:none}
    :root[data-theme="light"] .ico-sun{display:block}
    :root[data-theme="light"] .ico-moon{display:none}
    @media (prefers-color-scheme: light){
      :root:not([data-theme]) .ico-sun{display:block}
      :root:not([data-theme]) .ico-moon{display:none}
    }

    /* ── Page ── */
    .wrap{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:20px}
    .view{display:none}
    .view.active{display:block}
    .stack{display:flex;flex-direction:column;gap:12px}
    .cols{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
    .col-main{flex:2 1 560px;min-width:min(100%,320px);display:flex;flex-direction:column;gap:12px}
    .col-side{flex:1 1 280px;min-width:min(100%,280px)}

    .card{border-radius:16px;border:1px solid var(--line);background:var(--card)}
    .card-pad{padding:18px 20px}
    .card-title{margin:0;font-size:16px;font-weight:600;letter-spacing:-.015em}
    .card-sub{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5}
    .eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

    /* ── Session banner ── */
    .banner{padding:26px 28px;border-radius:16px;border:1px solid var(--line)}
    .banner h1{margin:0;font-size:48px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
    .banner p{margin:10px 0 0;font-size:13.5px;color:var(--ink-2)}
    .banner.select{padding:22px 26px;background:var(--well)}
    .banner.select h1{font-size:15px;letter-spacing:0}
    .banner.open{background:var(--tint-green);border-bottom:3px solid var(--green)}
    .banner.blocked{background:repeating-linear-gradient(45deg,var(--line),var(--line) 14px,var(--btn) 14px,var(--btn) 28px);border-color:var(--border)}

    /* ── Buttons ── */
    .btn{padding:9px 14px;border-radius:9px;border:1px solid var(--border);background:var(--btn);color:var(--ink);cursor:pointer;font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:border-color .15s,filter .15s}
    .btn:hover{border-color:var(--border-strong)}
    .btn:disabled{cursor:not-allowed;opacity:.5}
    .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
    .btn-primary:hover{filter:brightness(1.12);border-color:var(--accent)}
    .btn-block{width:100%;padding:12px 0;font-size:14.5px}
    .btn-sm{padding:5px 11px;font-size:11.5px;border-radius:999px}
    .btn-google{width:100%;padding:11px 14px;gap:10px}
    .google-logo{width:18px;height:18px;flex-shrink:0}
    .link-btn{padding:0;border:0;background:transparent;color:var(--accent-ink);cursor:pointer;font-size:12.5px}
    .link-btn:hover{text-decoration:underline}

    /* ── Forms ── */
    .field{display:flex;flex-direction:column;gap:5px}
    .field label{font-size:11.5px;color:var(--ink-2)}
    .field input,.search-input{padding:9px 11px;border-radius:8px;border:1px solid var(--border);background:var(--well);color:var(--ink);font-family:inherit;font-size:13px;outline:none;width:100%;transition:border-color .15s,box-shadow .15s}
    .field input::placeholder,.search-input::placeholder{color:var(--ink-3)}
    .field input:focus,.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint-accent)}
    .search-input{padding:12px 44px 12px 14px;border-radius:10px;font-size:15px;-webkit-appearance:none}
    .search-wrap{position:relative}
    .search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--btn);border:1px solid var(--border);border-radius:6px;width:26px;height:26px;color:var(--ink-3);font-size:13px;cursor:pointer;display:none;align-items:center;justify-content:center}
    .search-clear.visible{display:flex}
    .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
    .detect-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);min-height:16px;margin-top:8px}
    .detect-label.phone{color:var(--green-ink)}
    .detect-label.alsid{color:var(--kind-purple-ink)}
    .detect-label.name{color:var(--amber-ink)}

    /* ── Session tiles ── */
    .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:15px}
    .tile{text-align:left;padding:13px 14px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:inherit;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:border-color .15s}
    .tile:hover{border-color:var(--border-strong)}
    .tile.selected{border-color:var(--bd-accent);background:var(--tint-accent)}
    .tile.disabled{opacity:.55;cursor:not-allowed}
    .tile-top{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}
    .tile-time{font-family:var(--font-mono);font-size:11.5px;color:var(--accent-ink);font-weight:700}
    .tile-name{font-size:13.5px;font-weight:600}
    .tile-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2)}
    .tile-foot{font-size:11.5px;color:var(--ink-3)}

    /* ── Badges ── */
    .badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:500;white-space:nowrap}
    .tone-neutral{background:var(--well);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--border)}
    .tone-accent{background:var(--tint-accent);color:var(--accent-ink)}
    .tone-green{background:var(--tint-green);color:var(--green-ink)}
    .tone-amber{background:var(--tint-amber);color:var(--amber-ink)}
    .tone-red{background:var(--tint-red);color:var(--red-ink)}
    .tone-blue{background:var(--tint-kind-blue);color:var(--kind-blue-ink)}
    .tone-purple{background:var(--tint-kind-purple);color:var(--kind-purple-ink)}

    /* ── Station card views ── */
    .person-list{display:flex;flex-direction:column;gap:4px;margin-top:10px}
    .person-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;transition:background .15s,border-color .15s}
    .person-row:hover{background:var(--sel);border-color:var(--border)}
    .person-row .grow{flex:1 1 auto;min-width:0}
    .p-name{font-size:13.5px;font-weight:500}
    .p-meta{font-size:11.5px;color:var(--ink-3);margin-top:1px}
    .actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
    .hint{font-size:12.5px;color:var(--ink-3)}

    .person-card{padding:24px 20px;border-radius:14px;border:1px solid var(--line);background:var(--well);text-align:center}
    .person-card .name{font-size:20px;font-weight:700}
    .person-card .alsid{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);margin-top:4px}
    .person-card .badges{margin-top:10px;display:flex;justify-content:center}
    .person-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:16px;border-radius:10px;overflow:hidden;background:var(--line);border:1px solid var(--line)}
    .person-stats div{background:var(--card);padding:10px}
    .person-stats b{display:block;font-size:18px;font-weight:700}
    .person-stats span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
    .welcome{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
    .success-icon{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tint-green);border:2px solid var(--bd-green);color:var(--green-ink)}
    .success-icon.vip{background:var(--tint-kind-purple);border-color:var(--kind-purple-ink);color:var(--kind-purple-ink)}
    .success-icon.staff{background:var(--tint-amber);border-color:var(--bd-amber);color:var(--amber-ink)}
    .success-icon svg{width:26px;height:26px}
    .success-h{font-size:20px;font-weight:700;letter-spacing:-.015em}
    .success-s{font-size:13px;color:var(--ink-2);margin-top:4px}
    .flag-btn{width:100%;padding:10px;background:transparent;border:1px dashed var(--border);border-radius:10px;font-size:12px;color:var(--ink-3);cursor:pointer;transition:all .15s}
    .flag-btn:hover{border-color:var(--amber);color:var(--amber-ink);background:var(--tint-amber)}
    .flag-btn.flagged{border-color:var(--bd-green);color:var(--green-ink);background:var(--tint-green);cursor:default}
    .blocked-note{padding:28px 20px;text-align:center;color:var(--ink-3);font-size:13px}

    .msg{border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.5;margin-top:12px}
    .msg.error{background:var(--tint-red);color:var(--red-ink);border:1px solid var(--bd-red)}
    .msg.info{background:var(--tint-amber);color:var(--amber-ink);border:1px solid var(--bd-amber)}
    .msg.success{background:var(--tint-green);color:var(--green-ink);border:1px solid var(--bd-green)}

    /* ── Checked-in panel ── */
    .side-card{padding:18px;position:sticky;top:12px}
    .big-count{display:flex;align-items:baseline;gap:6px;margin-top:6px}
    .big-count b{font-size:48px;font-weight:700;letter-spacing:-.03em;line-height:1}
    .bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:12px}
    .bar i{display:block;height:100%;width:100%;background:var(--accent);border-radius:999px}
    .stat-row{display:grid;grid-template-columns:repeat(6,1fr);margin-top:14px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
    .stat-row.n4{grid-template-columns:repeat(5,1fr)}
    .stat-cell{text-align:center;padding:8px 4px;min-width:0}
    .stat-cell i{display:block;font-style:normal;font-size:9px;color:var(--ink-3);margin-top:1px}
    .total-line{font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:6px}
    .badge-first{background:var(--tint-first);color:var(--first-ink)}
    .badge-self{background:var(--tint-accent);color:var(--accent-ink)}
    @media (max-width:480px){
      .stat-row,.stat-row.n4{grid-template-columns:repeat(3,1fr)}
      .stat-row.n4{grid-template-columns:repeat(3,1fr)}
      .stat-cell{border-bottom:1px solid var(--line-soft)}
    }
    .stat-cell b{display:block;font-size:18px;font-weight:700}
    .stat-cell span{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);margin-top:2px}
    .scan-list{display:flex;flex-direction:column;gap:3px;margin-top:8px}
    .scan{display:flex;align-items:stretch;gap:8px;border-radius:8px}
    .scan .bar-v{width:3px;flex:0 0 auto;border-radius:2px}
    .scan .body{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0}
    .scan .nm{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .scan .mt{font-size:11px;color:var(--ink-3);margin-top:1px}
    .scan.flash{animation:flash .5s ease}
    @keyframes flash{from{background:var(--tint-green)}to{background:transparent}}
    .empty{padding:24px 12px;text-align:center;color:var(--ink-3);font-size:13px}

    /* ── Login ── */
    .login{max-width:400px;margin:6vh auto 0}
    .login .card{padding:26px 24px;display:flex;flex-direction:column;gap:12px}
    .login .brand-mark{width:44px;height:44px;border-radius:11px;font-size:14px;margin-bottom:4px}
    .login h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
    .login p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.6}
    .divider{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink-3)}
    .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

    .spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
    @keyframes spin{to{transform:rotate(360deg)}}

    @media(max-width:640px){
      .topbar{padding:10px 14px}.wrap{padding:14px}
      .brand-sub{display:none}
      .brand-name{display:none}
      .pill{flex:0 1 auto;min-width:0;max-width:none}
      .hdr-btn#signOutBtn{white-space:nowrap}
      .banner{padding:20px}.banner h1{font-size:34px}
    }
    /* ── Notices, checkbox, role chip (register + confirm flows) ── */
    .notice{padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--well)}
    .notice .nt{font-size:13.5px;font-weight:600}
    .notice.yellow{border-color:var(--flow-yellow-ink);background:var(--tint-flow-yellow)}.notice.yellow .nt{color:var(--flow-yellow-ink)}
    .notice.blue{border-color:var(--kind-blue-ink);background:var(--tint-kind-blue)}.notice.blue .nt{color:var(--kind-blue-ink)}
    .notice.green{border-color:var(--green-ink);background:var(--tint-green)}.notice.green .nt{color:var(--green-ink)}
    .notice.orange{border-color:var(--flow-orange-ink);background:var(--tint-flow-orange)}.notice.orange .nt{color:var(--flow-orange-ink)}
    .pline{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
    .pline b{color:var(--ink);font-weight:600}
    .row-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
    .check-row{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer}
    .check-row input{width:16px;height:16px;accent-color:var(--accent)}
    .small-note{font-size:11px;color:var(--ink-3);margin-top:4px}
    .err-text{font-size:12.5px;color:var(--red-ink);margin-top:10px}
    .okline{font-size:14px;color:var(--green-ink);font-weight:600;margin-top:16px}
    /* ── One-tap check-in rows ── */
    .person-list{gap:8px;margin-top:12px}
    .res-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
    .res-row.hi{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint-accent)}
    .res-row.in{background:var(--tint-green);border-color:var(--bd-green)}
    .res-main{min-width:0}
    .res-name{font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .res-meta{font-size:12px;color:var(--ink-3);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .alias-tag{border:1px solid var(--border);border-radius:999px;padding:0 7px;font-size:11px;color:var(--ink-2)}
    .flag-mini{width:44px;height:44px;border-radius:12px;border:1px dashed var(--border);background:transparent;color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
    .flag-mini svg{width:18px;height:18px}
    .flag-mini:hover{border-color:var(--amber);color:var(--amber-ink)}
    .flag-mini.on{border-style:solid;border-color:var(--bd-amber);background:var(--tint-amber);color:var(--amber-ink)}
    .flag-mini.on svg{fill:currentColor}
    .flag-tag{font-size:11px;font-weight:600;color:var(--amber-ink);background:var(--tint-amber);border-radius:999px;padding:1px 8px}
    .btn-checkin{min-height:48px;min-width:132px;padding:0 22px;border-radius:12px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:700;cursor:pointer;touch-action:manipulation}
    .btn-checkin:active{filter:brightness(1.15);transform:scale(.98)}
    .done-tag{font-size:13px;font-weight:600;color:var(--green-ink);white-space:nowrap}
    .second-tick{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
    .res-side{display:flex;align-items:center;gap:14px}
    .dir-status{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}
    .dir-status.warn{color:var(--red-ink);font-weight:700}
    .dir-status.syncing{color:var(--amber-ink)}
    #toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);max-width:min(92vw,520px);padding:13px 20px;border-radius:14px;font-size:15px;font-weight:600;background:var(--tint-green);color:var(--green-ink);border:1px solid var(--bd-green);box-shadow:0 8px 28px var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;text-align:center}
    #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
    #toast.err{background:var(--tint-red);color:var(--red-ink);border-color:var(--bd-red)}
    #toast.info{background:var(--tint-amber);color:var(--amber-ink);border-color:var(--bd-amber)}
    @media(max-width:640px){.res-row{grid-template-columns:auto 1fr;gap:12px}.res-side{grid-column:1 / -1;justify-content:space-between}.btn-checkin{flex:1}}
    .role-chip{font-size:12px;font-weight:600;color:var(--ink-2,var(--ink-3));border:1px solid var(--border);border-radius:999px;padding:3px 10px;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    @media(max-width:640px){.topbar{flex-wrap:wrap}.role-chip{order:10;flex:1 1 60%;min-width:0;max-width:none;font-size:12px;padding:5px 12px;white-space:normal;border-radius:14px;text-align:left}#signOutBtn{order:11}}   /* on a phone the name and Sign out share their own line; a long name wraps instead of being cut off */