:root{--bg:#f3f5f9;--card:#fff;--ink:#14181f;--mute:#5d6676;--line:#dde2ea;--brand:#0b5fff;--brand-ink:#fff;--ok:#0a8a4a;--warn:#b25e00;--bad:#c62828;--chip:#e8eefc;--shadow:0 1px 3px rgba(0,0,0,.08)}
@media (prefers-color-scheme:dark){:root{--bg:#0e1116;--card:#181d26;--ink:#eef1f6;--mute:#9aa4b5;--line:#2a3140;--brand:#4b8bff;--brand-ink:#06122e;--ok:#3ccf84;--warn:#f0a24a;--bad:#ff6b6b;--chip:#1f2a44;--shadow:none}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);min-height:100vh}
h1,h2,h3{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:12px;padding:12px 16px;background:var(--chip);color:var(--ink);font-weight:600;min-height:48px}
button:active{transform:scale(.98)}
button.primary{background:var(--brand);color:var(--brand-ink)}
button.danger{background:var(--bad);color:#fff}
button.ghost{background:transparent;border:1px solid var(--line)}
button:disabled{opacity:.5}
input,select,textarea{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;min-height:48px}
label{display:block;font-size:13px;color:var(--mute);margin:10px 0 4px}
.wrap{max-width:560px;margin:0 auto;padding:12px 14px 90px}
.card{background:var(--card);border-radius:16px;padding:16px;margin:12px 0;box-shadow:var(--shadow);border:1px solid var(--line)}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.row>.auto{flex:none}
.top{display:flex;justify-content:space-between;align-items:center;padding:6px 2px}
.top .who{font-weight:700;font-size:18px}
.mute{color:var(--mute)}.small{font-size:13px}
.status{border-left:8px solid var(--mute)}
.status.on{border-left-color:var(--ok)}
.timer{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.big{font-size:20px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--chip);border-radius:999px;padding:8px 14px;font-weight:600;min-height:0;font-size:15px}
.chip.sel{background:var(--brand);color:var(--brand-ink)}
.scanbtn{width:100%;font-size:20px;padding:20px;min-height:70px;border-radius:16px}
.tasks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tasks button{text-align:left;min-height:56px;font-size:15px;line-height:1.2}
.tasks button.sel{outline:3px solid var(--brand)}
.tasks button.cur{background:var(--ok);color:#fff}
.entry{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.entry:first-child{border-top:0}
.dur{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pad button{font-size:26px;min-height:64px}
.dots{display:flex;gap:12px;justify-content:center;margin:14px 0}.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--mute)}.dots i.f{background:var(--ink);border-color:var(--ink)}
.namebtn{display:block;width:100%;text-align:left;font-size:19px;padding:16px;margin:8px 0}
.err{color:var(--bad);font-weight:600;min-height:22px;text-align:center}
.banner{background:var(--warn);color:#fff;padding:8px 12px;border-radius:10px;font-size:14px;margin:8px 0}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#111;color:#fff;padding:12px 18px;border-radius:12px;z-index:50;max-width:90vw;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.toast.bad{background:var(--bad)}
#scanner{position:fixed;inset:0;background:#000;z-index:40;display:flex;flex-direction:column}
#scanner #reader{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
#scanner #reader video{width:100%!important;height:100%!important;object-fit:cover}
#scanner .bar{background:#111;color:#fff;padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:grid;gap:10px}
#scanner .msg{font-size:18px;font-weight:700;text-align:center;min-height:26px}
#scanner button{background:#2a2f3a;color:#fff}
.hidden{display:none!important}