:root{
  --brand-navy:#1f3560; --brand-navy-deep:#152546; --wave:#8aa6c4;
  --color-accent:#2c4f85; --color-accent-600:#24406c; --color-accent-700:#1c3255;
  --color-text:#1d1f20; --color-divider:color-mix(in srgb,#1d1f20 16%,transparent);
  --found:#1f9d6b; --found-bg:#e7f5ee; --found-ink:#125a3c;
  --missing:#d99a2b; --missing-bg:#fbf1db; --missing-ink:#79520f;
  --unk:#cf4a3e; --unk-bg:#fbe7e5; --unk-ink:#7c2219;
  --font-heading:"Barlow Condensed",system-ui,sans-serif;
  --font-body:"Barlow",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-body);color:var(--color-text);
  background:#ececed;
  background-image:radial-gradient(circle at 1px 1px,rgba(31,53,96,.06) 1px,transparent 0);
  background-size:26px 26px;min-height:100vh;
}
h1,h2,h3{font-family:var(--font-heading);font-weight:600;margin:0}
p{margin:0}
.muted{color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.ml-auto{margin-left:auto}
.num{font-variant-numeric:tabular-nums}
.right{text-align:right}

/* ── top bar ── */
.topbar{
  display:flex;align-items:center;gap:16px;
  padding:14px 28px;border-bottom:1px solid var(--color-divider);
  background:#fff;
}
.brand{display:flex;align-items:center;gap:9px;font:600 21px var(--font-heading);color:var(--brand-navy)}
.seg{display:inline-flex;border:1px solid var(--color-divider);margin-left:auto}
.seg-opt{padding:5px 12px;font:600 12px var(--font-heading);cursor:pointer}
.seg-opt.on{background:var(--brand-navy);color:#fff}
.newses{margin-left:14px;font:600 12px var(--font-heading);color:var(--color-accent);cursor:pointer}
.newses:hover{color:var(--color-accent-700)}

/* ── stage ── */
.stage{display:flex;flex-direction:column;align-items:center;gap:26px;padding:40px 24px 72px}

/* session bar / resume */
.sessbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;padding:12px 18px}
.sess-k{font:600 11px var(--font-heading);letter-spacing:.12em;color:var(--brand-navy);text-transform:uppercase}
.sess-code{font:700 16px var(--font-heading);letter-spacing:.14em;color:var(--color-text)}
.sess-btn{font-size:12px;padding:6px 12px}
.qrsave{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px solid var(--color-divider);padding:22px}
.resume{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.resume-row{display:flex;gap:8px}
.resume-inp{min-height:40px;padding:6px 12px;font:600 15px var(--font-heading);letter-spacing:.1em;text-transform:uppercase;width:160px;border:1px solid var(--color-divider);background:#fbfbfc}
.resume-inp:focus{outline:2px solid var(--color-accent);outline-offset:0}

/* print: only the saved QR */
@media print{
  .topbar,.sessbar,.legend,.stage>.panel,.newses{display:none !important}
  .qrsave{border:0}
}
.panel{
  width:min(640px,100%);background:#fff;border:1px solid var(--color-divider);
  box-shadow:0 18px 40px -22px rgba(21,37,70,.35);
  padding:26px 30px;display:flex;flex-direction:column;gap:18px;
}
.panel.center{align-items:center;text-align:center;gap:16px;padding:40px 30px}
.h-navy{color:var(--brand-navy);font-size:26px}

/* blueprint frame */
.blueprint{position:relative;border:1px solid var(--color-divider)}
.blueprint>.corner{position:absolute;width:11px;height:11px;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.blueprint>.corner::before,.blueprint>.corner::after{content:"";position:absolute;background:currentColor}
.blueprint>.corner::before{left:5px;top:0;width:1px;height:100%}
.blueprint>.corner::after{top:5px;left:0;width:100%;height:1px}
.corner.tl{top:-6px;left:-6px}.corner.tr{top:-6px;right:-6px}
.corner.bl{bottom:-6px;left:-6px}.corner.br{bottom:-6px;right:-6px}

/* QR */
.qr-frame{padding:16px;background:#fff}
.qr{width:180px;height:180px;display:grid;place-items:center}
.qr svg{width:180px;height:180px;display:block}
.waiting{display:flex;align-items:center;gap:8px;font-size:13px;color:color-mix(in srgb,var(--color-text) 50%,transparent)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font:600 15px var(--font-heading);text-decoration:none;color:var(--color-text);
  background:transparent;border:1px solid var(--color-divider);padding:10px 16px;
}
.btn svg{display:block}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.btn-primary:hover{background:var(--color-accent-600)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.btn-block{width:100%;min-height:48px}

/* connected banner */
.banner{display:flex;align-items:center;gap:11px;padding:12px 15px}
.banner.found{background:var(--found-bg);border:1px solid color-mix(in srgb,var(--found) 40%,transparent)}
.banner .check{width:26px;height:26px;border-radius:50%;background:var(--found);display:grid;place-items:center;flex:none}
.banner-t{font:600 19px var(--font-heading);color:var(--found-ink)}
.banner-d{margin-left:auto;font-size:12px;color:var(--found-ink);opacity:.75}

/* dropzone */
.dropzone{
  position:relative;min-height:200px;border:2px dashed var(--color-accent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:color-mix(in srgb,var(--color-accent) 5%,transparent);cursor:pointer;text-align:center;
}
.dz-title{font:600 22px var(--font-heading);color:var(--brand-navy)}
.dz-text{display:flex;flex-direction:column;gap:4px}
.drop-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* file head + tags */
.file-head{display:flex;align-items:center;gap:11px}
.file-name{font:600 15px var(--font-heading)}
.tag{display:inline-flex;align-items:center;font-size:11px;padding:3px 10px}
.tag-accent{background:#eef6ff;color:#2c455d}
.file-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.file-pick{position:relative;overflow:hidden}
.btn-danger{background:var(--unk);border-color:var(--unk);color:#fff}
.btn-danger:hover{background:var(--unk-ink)}
.file-error{font-size:12.5px;color:var(--unk-ink);background:var(--unk-bg);padding:8px 12px}
.paste-hint{font-size:11.5px}

/* import format guide (under the dropzone) */
.guide{display:flex;flex-direction:column;gap:10px;border:1px solid var(--color-divider);background:#fff;padding:16px 18px}
.guide-title{font:600 17px var(--font-heading);color:var(--brand-navy)}
.guide-rules{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.45}
.guide-rules b{color:var(--brand-navy)}
.guide-k{font:600 11px var(--font-heading);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-navy)}
.guide-table th.guide-col{font:600 11px var(--font-body);color:color-mix(in srgb,var(--color-text) 45%,transparent);background:color-mix(in srgb,var(--color-text) 4%,transparent);padding:3px 10px;text-align:left}
.guide-table td.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}
.guide-dl{align-self:flex-start;text-decoration:none}

/* tables */
.tablewrap{border:1px solid var(--color-divider);overflow:hidden}
.tablewrap.scrolltable{max-height:46vh;overflow-y:auto}
.tablewrap.scrolltable th{position:sticky;top:0;z-index:1;background:#fff}
.tablewrap table{width:100%;border-collapse:collapse}
.tablewrap th{
  font:600 10px var(--font-heading);letter-spacing:.07em;text-transform:uppercase;text-align:left;
  color:color-mix(in srgb,var(--color-text) 55%,transparent);
  padding:7px 10px;border-bottom:1px solid var(--color-divider);
}
.tablewrap td{font-size:12.5px;padding:7px 10px;border-bottom:1px solid rgba(0,0,0,.06)}
.pill{font-size:10px;font-weight:600;padding:2px 8px;color:#fff}

/* buckets */
.buckets{display:flex;gap:10px}
.bkt{flex:1;border:1px solid var(--color-divider);padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.bkt-n{font:600 26px var(--font-heading);line-height:1}
.bkt-l{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent)}

/* live head */
.live-head{display:flex;align-items:center;gap:9px}
.live-t{font:600 17px var(--font-heading)}
.hint{display:flex;align-items:center;gap:8px;font-size:12px;color:color-mix(in srgb,var(--color-text) 50%,transparent)}

/* dots / animation */
.pulse-dot,.blink-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.pulse-dot{background:var(--color-accent);position:relative}
.pulse-dot.small{width:7px;height:7px}
.pulse-dot::after{content:"";position:absolute;inset:-4px;border:2px solid var(--color-accent);border-radius:50%;animation:pulse 1.8s ease-out infinite}
.blink-dot{background:var(--found);animation:blink 1.1s steps(2) infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@keyframes blink{50%{opacity:.25}}

/* legend */
.legend{display:flex;gap:22px;flex-wrap:wrap;align-items:center;font-size:12.5px;background:#fff;padding:14px 20px}
.legend-k{font:600 11px var(--font-heading);letter-spacing:.12em;color:var(--brand-navy)}
.legend b{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-family:var(--font-body)}
.sw{width:12px;height:12px;border-radius:2px}

/* dev strip */
.devbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border:1px dashed color-mix(in srgb,var(--color-text) 30%,transparent);background:rgba(0,0,0,.02)}
.dev-k{font:600 11px var(--font-heading);letter-spacing:.1em;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.devbar .btn{font-size:13px;padding:7px 12px}

/* Blazor error UI */
#blazor-error-ui{position:fixed;bottom:0;left:0;right:0;display:none;padding:10px 16px;background:#fbe7e5;color:#7c2219;box-shadow:0 -1px 6px rgba(0,0,0,.1)}