:root { --bg:#0b0d12; --panel:#151a23; --fg:#e9edf3; --muted:#8b96a7; --pri:#3a7afe; --danger:#e5484d; --ok:#30a46c; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
.screen { padding:16px; max-width:680px; margin:0 auto; }
.hidden { display:none !important; }
.muted { color:var(--muted); font-size:13px; }
.err { color:var(--danger); }
h1 { text-align:center; margin-top:18vh; }
h2 { margin:8px 0 2px; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.list { list-style:none; padding:0; margin:0; }
.list li { background:var(--panel); padding:14px 16px; border-radius:12px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.list li .prog { color:var(--muted); font-size:13px; }
input { width:100%; padding:14px; font-size:18px; border-radius:12px; border:1px solid #283041; background:var(--panel); color:var(--fg); }
button { padding:14px 18px; font-size:16px; border-radius:12px; border:0; cursor:pointer; font-weight:600; }
button.primary { background:var(--pri); color:#fff; }
button.danger { background:var(--danger); color:#fff; }
button.ghost { background:transparent; color:var(--muted); border:1px solid #283041; }
form { display:flex; gap:10px; max-width:320px; margin:16px auto; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.chip { padding:8px 12px; border-radius:999px; background:var(--panel); border:1px solid #283041; font-size:14px; }
.chip.done { background:rgba(48,163,108,.18); border-color:var(--ok); color:#7ee2b8; }
.chip.active { border-color:var(--pri); color:#bcd4ff; }
.capture { position:relative; margin:12px 0; border-radius:14px; overflow:hidden; background:#000; aspect-ratio:9/16; max-height:60vh; }
#preview { width:100%; height:100%; object-fit:cover; display:block; }
.countdown { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:96px; font-weight:800; background:rgba(0,0,0,.45); }
.controls { display:flex; gap:10px; margin:10px 0; }
.controls button { flex:1; }
.toggle { display:flex; align-items:center; gap:8px; color:var(--muted); margin:8px 0; }
.toggle input { width:auto; }
.badge { position:fixed; right:14px; bottom:14px; background:var(--pri); color:#fff; border-radius:999px; padding:8px 12px; font-size:13px; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.4); }