:root {
  --bg:#111418; --panel:#1a1f26; --panel2:#232a33; --text:#e8ecf1; --muted:#9aa5b1;
  --accent:#4cc2ff; --accent-text:#04202e; --border:#2f3843; --danger:#ff7b72; --ok:#5ee08a;
  --done:#3a1f1f;
}
:root[data-theme="light"] {
  --bg:#f4f5f7; --panel:#ffffff; --panel2:#eceff3; --text:#14181d; --muted:#566170;
  --accent:#0b6ec5; --accent-text:#ffffff; --border:#cfd5dc; --danger:#b3261e; --ok:#1a7f3c; --done:#fde8e6;
}
/* Red safelight: only red light, to protect dark-adapted eyes and not fog paper */
:root[data-theme="red"] {
  --bg:#000; --panel:#0d0000; --panel2:#1a0000; --text:#ff3b3b; --muted:#b32020;
  --accent:#a00000; --accent-text:#ffb0b0; --border:#5c0000; --danger:#ff5555; --ok:#ff3b3b; --done:#330000;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:env(safe-area-inset-bottom); }
a { color:var(--accent); }
:root[data-theme="red"] a { color:#ff3b3b; }
.top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px; }
.top h1 { font-size:1.25rem; margin:0; }
.top-actions { display:flex; gap:10px; align-items:center; }
.theme-pick { font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
select, input { font:inherit; color:var(--text); background:var(--panel2); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; width:100%; min-height:44px; }
select:disabled { opacity:.5; }
input:focus, select:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.theme-pick select { width:auto; min-height:36px; padding:6px 8px; }
.tabs { display:flex; gap:6px; overflow-x:auto; padding:0 16px 8px; scrollbar-width:thin; }
.tabs button { flex:0 0 auto; background:var(--panel); color:var(--muted); border:1px solid var(--border);
  border-radius:999px; padding:9px 16px; font:inherit; cursor:pointer; min-height:44px; }
.tabs button[aria-selected="true"] { background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:600; }
main { padding:8px 16px 24px; max-width:1100px; margin:0 auto; }
.panel[hidden] { display:none; }
.panel h2 { font-size:1.15rem; margin:8px 0 4px; }
.note { color:var(--muted); margin:4px 0 12px; }
.note.small, .small { font-size:.85rem; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:8px 0; }
label { display:flex; flex-direction:column; gap:4px; font-size:.9rem; color:var(--muted); }
label.inline { margin-top:14px; max-width:320px; }
.actions, .bar { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.btn, .chip { font:inherit; background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:10px 16px; cursor:pointer; min-height:44px; }
.btn.primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:600; }
.chip { border-radius:999px; padding:6px 12px; min-height:36px; font-size:.85rem; }
.chip[aria-pressed="false"] { color:var(--muted); }
.seg { display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; margin:6px 0; }
.seg button { font:inherit; background:var(--panel); color:var(--muted); border:0; padding:10px 16px; cursor:pointer; min-height:44px; }
.seg button[aria-pressed="true"] { background:var(--accent); color:var(--accent-text); font-weight:600; }
.result { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:14px 0; }
.result.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rlabel { font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.big { font-size:2.2rem; font-weight:700; font-variant-numeric:tabular-nums; word-break:break-word; }
.sub { color:var(--muted); font-size:.9rem; }
.err { color:var(--danger); min-height:1.4em; margin:6px 0; font-weight:600; }
/* timers */
.timer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.timer { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:14px; }
.timer.done { background:var(--done); border-color:var(--danger); animation:flash 1s steps(2) infinite; }
@keyframes flash { 50% { filter:brightness(1.6); } }
.timer .ttl { width:100%; margin-bottom:8px; font-weight:600; }
.timer .disp { font-size:3rem; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; letter-spacing:.02em; margin:4px 0 8px; }
.timer .pick { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.timer .pick label { font-size:.7rem; text-align:center; }
.timer .row { display:flex; gap:8px; margin-top:10px; align-items:center; }
.timer .row .btn { flex:1; padding:10px 8px; }
.timer .dir { margin-top:10px; }
.timer .dir button { flex:1; padding:8px 10px; min-height:40px; }
footer { text-align:center; color:var(--muted); padding:8px 16px 28px; font-size:.9rem; }
footer p { margin:4px 0; }
@media (max-width:520px) {
  .big { font-size:1.8rem; }
  .timer .disp { font-size:2.6rem; }
  .result.two { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .timer.done { animation:none; } }