:root{color-scheme:dark;--bg: #0b1220;--panel: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .14);--text: rgba(255, 255, 255, .92);--muted: rgba(255, 255, 255, .68);--accent: #a7f3d0;--danger: #fb7185;--shadow: 0 20px 50px rgba(0, 0, 0, .55)}html,body{height:100%;margin:0}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text)}.app{min-height:100%;display:grid;place-items:center;padding:24px;transition:background .3s ease}.app[data-mode=ready]{background:radial-gradient(1100px 700px at 25% 20%,rgba(148,163,184,.12),transparent 60%),radial-gradient(900px 620px at 80% 85%,rgba(99,102,241,.08),transparent 64%),linear-gradient(180deg,#070b14,#0a1020 60%,#070b14)}.app[data-mode=running][data-phase=focus]{background:radial-gradient(1100px 700px at 18% 18%,rgba(34,211,238,.16),transparent 58%),radial-gradient(900px 620px at 85% 85%,rgba(16,185,129,.16),transparent 62%),radial-gradient(700px 420px at 60% 35%,rgba(99,102,241,.1),transparent 60%),linear-gradient(180deg,#050b16,#061227 60%,#050b16)}.app[data-mode=running][data-phase=shortBreak],.app[data-mode=running][data-phase=longBreak]{background:radial-gradient(1100px 700px at 18% 18%,rgba(251,191,36,.16),transparent 58%),radial-gradient(900px 620px at 85% 85%,rgba(244,63,94,.14),transparent 62%),radial-gradient(720px 440px at 55% 35%,rgba(168,85,247,.09),transparent 60%),linear-gradient(180deg,#14070c,#1a0b16 60%,#14070c)}.app[data-mode=paused]{background:radial-gradient(1100px 700px at 18% 18%,rgba(148,163,184,.1),transparent 60%),radial-gradient(900px 620px at 85% 85%,rgba(148,163,184,.08),transparent 64%),linear-gradient(180deg,#0a0f1a,#0a1426 60%,#0a0f1a)}.app[data-mode=ringing]{background:radial-gradient(900px 540px at 20% 25%,rgba(251,113,133,.22),transparent 60%),radial-gradient(900px 620px at 80% 85%,rgba(34,211,238,.18),transparent 64%),linear-gradient(180deg,#1a070f,#0b1220 55%,#1a070f)}.shell{width:min(820px,100%);border:1px solid var(--border);border-radius:20px;background:linear-gradient(180deg,#ffffff14,#ffffff08);box-shadow:var(--shadow);overflow:clip}.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.1)}.title{font-weight:700;letter-spacing:.2px}.phasePill{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#00000040;color:var(--muted)}.content{padding:22px 18px 18px;display:grid;gap:14px}.timer{font-variant-numeric:tabular-nums;font-size:clamp(56px,8vw,92px);line-height:1;letter-spacing:-1px;text-align:center;padding:10px 0 2px}.subline{display:flex;justify-content:center;gap:14px;color:var(--muted);font-size:14px}.actions{display:flex;gap:12px;justify-content:center;padding-top:8px}button{appearance:none;border:1px solid rgba(255,255,255,.16);background:#00000059;color:var(--text);padding:12px 14px;border-radius:14px;font-weight:650;letter-spacing:.15px;cursor:pointer;transition:transform .12s ease,background .12s ease,border-color .12s ease}button:hover{transform:translateY(-1px);border-color:#ffffff42}button.primary{background:#a7f3d024;border-color:#a7f3d059}button.danger{background:#fb71851f;border-color:#fb718559}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:720px){.grid2{grid-template-columns:1fr}}.card{border:1px solid rgba(255,255,255,.12);background:#00000038;border-radius:16px;padding:14px}label{display:grid;gap:6px;font-size:12px;color:var(--muted)}input{background:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;color:var(--text);outline:none}input:focus{border-color:#a7f3d08c}.hint{color:var(--muted);font-size:12px;text-align:center;padding-bottom:2px}