:root{
  --bg: oklch(18% 0.015 250);
  --bg-2: oklch(22% 0.018 250);
  --surface: oklch(25% 0.02 250);
  --ink: oklch(96% 0.005 250);
  --muted: oklch(72% 0.015 250);
  --faint: oklch(55% 0.02 250);
  --accent: oklch(72% 0.15 195);
  --accent-deep: oklch(64% 0.16 195);
  --good: oklch(72% 0.17 150);
  --warn: oklch(72% 0.16 70);
  --line: oklch(32% 0.02 250);
  --r: 16px; --r-sm: 10px;
  --ease: cubic-bezier(.22,1,.36,1);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center; padding:32px 18px 48px;
}
.wrap{width:100%; max-width:560px}
a{color:var(--accent); text-decoration:none}

.top{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px}
.brand{display:flex; align-items:center; gap:10px; font:600 16px/1 var(--sans); letter-spacing:.01em}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent)}
.back{color:var(--muted); font:500 14px/1 var(--sans)}
.back:hover{color:var(--ink)}

h1{font:700 clamp(30px,7vw,42px)/1.05 var(--sans); letter-spacing:-.02em; margin:0 0 12px}
.lede{color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 28px}

.roles{display:grid; gap:14px}
.role{
  display:flex; align-items:center; gap:16px; padding:22px; text-align:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
  color:inherit; transition:border-color .25s var(--ease), transform .12s var(--ease);
}
.role:hover{border-color:var(--accent)}
.role:active{transform:scale(.99)}
.role .icon{font-size:30px; line-height:1; width:40px; text-align:center}
.role .rt{font:600 18px/1.2 var(--sans); margin-bottom:3px}
.role .rd{color:var(--muted); font-size:13.5px; line-height:1.45}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-bottom:18px}
.label{font:600 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}

.drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border:1.5px dashed var(--line); border-radius:var(--r-sm); padding:30px 18px; background:var(--bg-2);
  cursor:pointer; text-align:center; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.drop:hover, .drop.over{border-color:var(--accent); background:var(--surface)}
.drop .dm{font:500 15px/1.4 var(--sans)}
.drop .ds{font-size:12.5px; color:var(--faint)}

#qrframe{
  width:100%; max-width:420px; aspect-ratio:1; margin:0 auto; background:#fff;
  border-radius:var(--r-sm); padding:16px; display:flex; align-items:center; justify-content:center;
}
#qrframe canvas{width:100%; height:100%; image-rendering:pixelated}

#cam{width:100%; max-width:420px; aspect-ratio:1; margin:0 auto; display:block; background:#000; border-radius:var(--r-sm); object-fit:cover}
#camcanvas{display:none}

.btn{border:0; background:var(--accent); color:#06222a; font:600 15px/1 var(--sans); padding:14px 20px; border-radius:var(--r-sm); cursor:pointer; transition:background .2s var(--ease), transform .12s var(--ease); width:100%}
.btn:hover{background:var(--accent-deep)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
.btn.ghost:hover{border-color:var(--muted); background:var(--bg-2)}
.btns{display:flex; gap:10px; margin-top:6px}

.controls{display:flex; flex-direction:column; gap:16px; margin:18px 0}
.ctl{display:flex; align-items:center; gap:14px}
.ctl label{font-size:13.5px; color:var(--muted); min-width:64px}
.ctl input[type=range]{flex:1; accent-color:var(--accent)}
.ctl .val{font:600 13.5px/1 var(--mono); color:var(--accent); min-width:62px; text-align:end}

.progress{margin-top:16px}
.bar{height:10px; background:var(--bg-2); border-radius:99px; overflow:hidden}
.bar > span{display:block; height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .25s var(--ease)}
.pstats{display:flex; justify-content:space-between; margin-top:8px; font:500 13px/1 var(--mono); color:var(--muted)}
.pstats b{color:var(--ink)}

.status{margin-top:14px; font:500 14px/1.5 var(--sans); color:var(--muted); text-align:center; min-height:20px}
.status.ok{color:var(--good)}
.status.warn{color:var(--warn)}

.note{margin-top:20px; font-size:13px; line-height:1.6; color:var(--faint); border-top:1px solid var(--line); padding-top:16px}

footer{margin-top:36px; font-size:12px; color:var(--faint); text-align:center}
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }