:root{--bg: #0b0b10;--panel: #101221cc;--panel-solid: #101221;--text: #eef2ff;--muted: #8f9bb3;--primary: #7aa2ff;--accent: #2ee6a6;--danger: #ff6b6b;--btn: #1a1f33;--btn-hover: #242b44;--ring: 0 0 0 3px rgba(122, 162, 255, .35);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);--blur: saturate(140%) blur(12px)}html,body,.card,.panel{transition:background-color .4s ease,color .4s ease,background .4s ease}html[data-theme=light]{--bg: #ecf1ff;--panel: #ffffffcc;--panel-solid: #ffffff;--text: #0e1220;--muted: #56607a;--primary: #3b82f6;--accent: #10b981;--danger: #ef4444;--btn: #eef2ff;--btn-hover: #e0e7ff;--ring: 0 0 0 3px rgba(59, 130, 246, .3);--shadow-lg: 0 10px 25px rgba(25, 40, 80, .15)}html[data-theme=light] body{background:radial-gradient(1200px 1200px at 80% -10%,#dce6ff 0%,transparent 55%),radial-gradient(900px 900px at -10% 90%,#b3f0e0 0%,transparent 60%),linear-gradient(180deg,#f4f7ff,#eaf1ff)}*{box-sizing:border-box}body{margin:0;color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(1200px 1200px at 85% -10%,#4f46e5 0%,transparent 55%),radial-gradient(900px 900px at -10% 90%,#22d3ee 0%,transparent 60%),linear-gradient(180deg,#0b0b10,#0e1324);display:grid}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");mix-blend-mode:overlay;opacity:.7}.app{height:100vh;min-height:100%;display:grid;place-items:center;padding:3rem clamp(1rem,4vw,3rem)}.card{height:auto;width:min(900px,100%);background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:clamp(1.2rem,2.5vw,1.8rem);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);position:relative;overflow:hidden}.card.running:after{content:"";position:absolute;inset:-2px;border-radius:24px;background:conic-gradient(from 180deg at 50% 50%,#7aa2ff59,#2ee6a659,#7aa2ff59);filter:blur(24px);opacity:.35;z-index:-1}.header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.header h1{margin:0;font-size:clamp(1.2rem,2.2vw,2rem);letter-spacing:.2px;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.15)}.theme-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:linear-gradient(180deg,var(--btn),color-mix(in srgb,var(--btn) 80%,black 20%));box-shadow:inset 0 1px #ffffff14,0 6px 14px #00000047;outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .08s ease,background .25s ease,box-shadow .25s ease}.theme-toggle:hover{background:var(--btn-hover)}.theme-toggle:focus-visible{box-shadow:var(--ring),0 6px 14px #00000047}.theme-toggle:active{transform:translateY(1px)}.subtle{color:var(--muted);font-size:.95rem;margin-bottom:.5rem}.grid{display:grid;grid-template-columns:1fr minmax(240px,1.2fr) 1fr;gap:1rem;margin-top:1rem;margin-bottom:1.5rem}.panel{background:linear-gradient(180deg,color-mix(in srgb,var(--panel-solid) 65%,transparent),var(--panel));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:1rem;box-shadow:0 10px 24px #0000002e}.grid{align-items:stretch}.grid>.panel{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center}.length-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}.length-panel .controls-row{margin-top:.25rem}.length-panel .kpi{margin:0}.controls-row{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.75rem}.btn{appearance:none;border:0;border-radius:12px;background:linear-gradient(180deg,var(--btn),color-mix(in srgb,var(--btn) 90%,black 10%));padding:.75rem 1.2rem;color:var(--text);font-weight:600;letter-spacing:.3px;cursor:pointer;transition:transform .05s ease,background .25s ease,box-shadow .25s ease,filter .25s ease;box-shadow:inset 0 1px #ffffff0f,0 8px 16px #00000040}.btn:focus-visible{outline:none;box-shadow:var(--ring),0 8px 16px #00000040}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 92%,#000 8%),color-mix(in srgb,var(--primary) 70%,black 20%));color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 40%,transparent)}.btn-primary:hover{filter:brightness(1.1) saturate(1.05)}.btn-danger{background:linear-gradient(180deg,color-mix(in srgb,var(--danger) 92%,#000 8%),color-mix(in srgb,var(--danger) 75%,black 25%));color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--danger) 40%,transparent)}.btn-danger:hover{filter:brightness(1.08) saturate(1.1)}.kpi{font-size:clamp(2rem,3.2vw,2.6rem);font-variant-numeric:tabular-nums;text-align:center;margin:.2rem 0 0}.center{text-align:center}.timer-face{display:grid;place-items:center;aspect-ratio:1/1;border-radius:18px;padding:1rem;font-size:clamp(2.4rem,6vw,4.2rem);font-variant-numeric:tabular-nums;letter-spacing:1px;color:var(--text);background:radial-gradient(120% 120% at 20% 15%,color-mix(in srgb,var(--primary) 22%,transparent),transparent 40%),radial-gradient(110% 110% at 80% 90%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 45%),linear-gradient(180deg,color-mix(in srgb,var(--panel-solid) 76%,transparent),var(--panel));border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px #ffffff08,0 16px 28px #00000040;position:relative}#start_stop{position:relative}#start_stop:after{content:"";position:absolute;inset:-2px;border-radius:12px;opacity:0;background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 40%,transparent),transparent);filter:blur(14px);transition:opacity .25s ease}#start_stop:hover:after{opacity:.8}.badge{display:inline-block;padding:.28rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-weight:700;font-size:.8rem;box-shadow:inset 0 1px #ffffff14;margin-bottom:10px}.footer-actions{display:flex;gap:.6rem;justify-content:center;margin-top:.9rem}@media (max-width: 860px){.grid{grid-template-columns:1fr}.timer-face{order:-1}}