:root { --bg:#0f172a; --card:#1e293b; --in:#f59e0b; --out:#22c55e; --text:#e2e8f0; --muted:#94a3b8; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,system-ui,sans-serif; background:var(--bg); color:var(--text);
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
#app { max-width:480px; margin:0 auto; }
header h1 { text-align:center; font-size:1.25rem; }
.hero { display:flex; flex-direction:column; align-items:center; gap:12px; margin:24px 0; }
.big-btn { width:200px; height:200px; border-radius:50%; border:none; font-size:1.5rem; font-weight:700;
  color:#0b1220; background:var(--out); cursor:pointer; transition:transform .1s, background .2s; }
.big-btn:active { transform:scale(.97); }
.big-btn.in { background:var(--in); }
.big-btn:disabled { opacity:.6; }
.status-line { color:var(--muted); margin:0; }
.card { background:var(--card); border-radius:16px; padding:16px; margin:16px 0; }
.card h2 { margin:0 0 8px; font-size:.9rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.big-stats { font-size:1.3rem; margin:0; font-weight:600; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.filters button { background:var(--card); color:var(--text); border:1px solid #334155; border-radius:999px;
  padding:6px 12px; font-size:.85rem; cursor:pointer; }
.filters button.active { background:#334155; }
.custom-range { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.custom-range input { background:var(--card); color:var(--text); border:1px solid #334155; border-radius:8px; padding:6px; }
.range-summary { color:var(--muted); font-size:.85rem; }
.day-list { list-style:none; padding:0; margin:0; }
.day-list li { display:flex; justify-content:space-between; padding:10px 4px; border-bottom:1px solid #1f2a3a; font-variant-numeric:tabular-nums; }
.day-list .dur { font-weight:600; }
.settings-btn { position:fixed; bottom:16px; right:16px; width:48px; height:48px; border-radius:50%;
  background:var(--card); color:var(--text); border:1px solid #334155; font-size:1.2rem; }
dialog { background:var(--card); color:var(--text); border:none; border-radius:16px; width:90%; max-width:360px; }
dialog label { display:block; margin:12px 0; font-size:.9rem; }
dialog input { width:100%; margin-top:4px; padding:8px; border-radius:8px; border:1px solid #334155; background:var(--bg); color:var(--text); }
dialog menu { display:flex; justify-content:flex-end; gap:8px; padding:0; }
dialog button { padding:8px 14px; border-radius:8px; border:none; cursor:pointer; }
.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:#334155;
  padding:10px 16px; border-radius:8px; max-width:90%; text-align:center; }
.hidden { display:none; }