*,:before,:after{box-sizing:border-box}body{margin:0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f172a;--surface:#1e293b;--border:#334155;--text:#f1f5f9;--muted:#94a3b8;--radius:16px}body{background:var(--bg);color:var(--text);justify-content:center;min-height:100dvh;font-family:system-ui,sans-serif;display:flex}#root{width:100%;max-width:480px}.screen{flex-direction:column;align-items:center;gap:20px;min-height:100dvh;padding:24px 20px 40px;display:flex}.config-screen h1{letter-spacing:-1px;margin-top:12px;font-size:2rem;font-weight:800}.subtitle{color:var(--muted);margin-top:-12px;font-size:.95rem}.fields{flex-direction:column;gap:12px;width:100%;margin-top:8px;display:flex}.field{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.field label{font-size:1rem;font-weight:600}.stepper{align-items:center;gap:16px;display:flex}.stepper button{background:var(--bg);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:50%;place-items:center;width:36px;height:36px;font-size:1.25rem;transition:background .15s;display:grid}.stepper button:active{background:#334155}.val{text-align:center;min-width:60px;font-size:1.4rem;font-weight:700}.val small{color:var(--muted);margin-left:2px;font-size:.7rem;font-weight:400}.btn-start{border-radius:var(--radius);color:#fff;cursor:pointer;background:#6366f1;border:none;width:100%;margin-top:auto;padding:18px;font-size:1.1rem;font-weight:700;transition:background .15s}.btn-start:active{background:#4f46e5}.timer-screen{--phase-color:#6366f1;gap:16px}.btn-back{color:var(--muted);cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:4px 0;font-size:.9rem}.phase-label{letter-spacing:2px;color:var(--phase-color);text-align:center;min-height:2.2rem;font-size:1.6rem;font-weight:800;transition:color .3s}.ring-wrap{width:240px;height:240px;position:relative}.ring-bg{fill:none;stroke:var(--surface);stroke-width:12px}.ring-fg{fill:none;stroke-width:12px;stroke-linecap:round;transform-origin:50%;transition:stroke-dashoffset .8s linear,stroke .3s;transform:rotate(-90deg)}.ring-inner{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.countdown{font-variant-numeric:tabular-nums;color:var(--text);font-size:4rem;font-weight:800}.meta{color:var(--muted);gap:24px;font-size:.9rem;font-weight:600;display:flex}.next-label{color:var(--muted);font-size:.85rem}.progress-dots{flex-wrap:wrap;justify-content:center;gap:6px;max-width:300px;display:flex}.dot{background:var(--border);border-radius:50%;width:10px;height:10px;transition:background .3s}.dot.done{background:var(--phase-color)}.controls{gap:12px;width:100%;margin-top:auto;display:flex}.btn-ctrl{border-radius:var(--radius);background:var(--phase-color);color:#fff;cursor:pointer;border:none;flex:1;padding:16px;font-size:1rem;font-weight:700;transition:opacity .15s}.btn-ctrl:active{opacity:.8}.btn-ctrl.secondary{background:var(--surface);border:1px solid var(--border);color:var(--muted);flex:0 0 100px}