:root{
  --bg:#0f1115; --card:#1a1d24; --fg:#f2f4f8; --sub:#9aa3b2;
  --accent:#e0483d; --accent2:#2fbf71; --line:#2a2e38; --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex; align-items:center; justify-content:center;
  padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}
#app{width:100%;max-width:440px}
.hidden{display:none!important}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
h1{margin:0 0 2px;font-size:28px;letter-spacing:-.5px}
.sub{color:var(--sub);margin:0 0 16px}
label{display:block;color:var(--sub);font-size:13px;margin:16px 0 6px;text-transform:uppercase;letter-spacing:.5px}
input[type=password],input[type=date]{
  width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:#12151b;color:var(--fg);font-size:17px
}
button{font:inherit;cursor:pointer;border:none;border-radius:12px}
.primary{width:100%;padding:15px;background:var(--accent);color:#fff;font-weight:600;font-size:17px;margin-top:8px}
.ghost{padding:15px;background:transparent;color:var(--sub);border:1px solid var(--line)}
.row{display:flex;gap:10px;margin-top:14px}
.row .primary{margin-top:0;flex:1}
.row .ghost{flex:0 0 auto}
.seg{display:flex;gap:8px}
.seg button{flex:1;padding:12px;background:#12151b;color:var(--sub);border:1px solid var(--line)}
.seg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.stepper{display:flex;align-items:center;gap:20px;justify-content:center;padding:6px 0}
.stepper button{width:48px;height:48px;font-size:24px;background:#12151b;color:var(--fg);border:1px solid var(--line)}
.stepper span{font-size:24px;min-width:32px;text-align:center}
.note{color:var(--sub);font-size:13px;margin-top:16px}
.drift{color:var(--sub);font-size:12px;margin-top:10px;min-height:14px}
.err{color:var(--accent);min-height:18px;margin:8px 0 0}
#count{font-size:56px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-1px}
#countWrap{text-align:center;padding:10px 0 4px}
#pollWrap{text-align:center;padding:8px 0}
.attempt{color:var(--sub);font-size:13px}
.pulse{display:flex;justify-content:center;margin:8px 0}
.pulse span{width:16px;height:16px;border-radius:50%;background:var(--accent);animation:pulse 0.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
#results{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.slot{display:flex;align-items:center;justify-content:space-between;
  padding:18px;border-radius:14px;background:var(--accent2);color:#04160c;
  font-size:20px;font-weight:700;text-decoration:none;
  animation:pop .25s ease}
.slot small{font-weight:500;opacity:.8}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}