:root{--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display:"Outfit", var(--font);--font-mono:"JetBrains Mono", ui-monospace, monospace;--bg:#0a0b10;--surface:#ffffff0a;--surface-2:#ffffff12;--border:#ffffff14;--text:#f4f5f8;--muted:#8b90a0;--dim:#5b6070;--green:#22d392;--red:#f04c67;--amber:#faaf2e;--violet:#896ef7;--accent:var(--violet);--state:var(--dim);--radius:22px;--radius-sm:14px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body{height:100%}body{font-family:var(--font);background:radial-gradient(120% 60% at 50% -10%, #3b1fad38, transparent 60%), radial-gradient(80% 50% at 100% 110%, #1b98831f, transparent 60%), var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background-attachment:fixed;line-height:1.45}svg{flex-shrink:0;width:18px;height:18px}.shell{width:100%;max-width:440px;padding:max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));flex-direction:column;gap:14px;min-height:100dvh;margin:0 auto;display:flex}.shell-center{justify-content:center}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(20px)}.topbar{justify-content:space-between;align-items:center;padding:4px 2px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand-name{font-family:var(--font-display);letter-spacing:-.01em;font-size:1.15rem;font-weight:600}.logo-mark{width:34px;height:34px;color:var(--accent);background:linear-gradient(135deg,#896ef740,#1ae6c326);border:1px solid #896ef740;border-radius:11px;place-items:center;display:grid}.logo-mark svg{width:18px;height:18px}.topbar-actions{align-items:center;gap:6px;display:flex}.avatar{background:linear-gradient(135deg, var(--violet), #3db8f5);border-radius:50%;place-items:center;width:32px;height:32px;font-size:.8rem;font-weight:600;display:grid}.icon-btn{width:36px;height:36px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:12px;place-items:center;transition:background .2s,color .2s,transform .15s;display:grid}.icon-btn:hover{background:var(--surface-2);color:var(--text)}.icon-btn:active{transform:scale(.92)}.icon-btn.is-spinning svg{animation:.8s linear infinite spin}.status-card{flex-direction:column;gap:16px;padding:18px;transition:border-color .4s;display:flex;position:relative;overflow:hidden}.status-card:before{content:"";background:radial-gradient(closest-side, color-mix(in srgb, var(--state) 22%, transparent), transparent);pointer-events:none;height:70%;transition:background .5s;position:absolute;inset:-40% -20% auto}.status-card>*{position:relative}.state-running{--state:var(--green);border-color:color-mix(in srgb, var(--green) 25%, transparent)}.state-stopped{--state:var(--red)}.state-transitioning{--state:var(--amber)}.state-unknown{--state:var(--dim)}.status-row{justify-content:space-between;align-items:center;display:flex}.status-pill{font-family:var(--font-display);letter-spacing:-.01em;align-items:center;gap:10px;font-size:1.5rem;font-weight:600;display:inline-flex}.status-dot{background:var(--state);width:10px;height:10px;box-shadow:0 0 0 0 color-mix(in srgb, var(--state) 60%, transparent);border-radius:50%}.state-running .status-dot,.state-transitioning .status-dot{animation:1.8s ease-out infinite ping}.status-summary{color:var(--muted);margin-top:-8px;font-size:.875rem}.timer-block{flex-direction:column;gap:6px;display:flex}.countdown{font-family:var(--font-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:clamp(2.4rem,12vw,3rem);font-weight:500;line-height:1}.timer-meta{color:var(--muted);font-size:.85rem}.progress{background:var(--surface-2);border-radius:4px;height:4px;margin-top:6px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg, var(--green), #30e8e8);width:100%;height:100%;transition:width 1s linear}.duration-block{border-radius:var(--radius-sm);border:1px solid var(--border);background:#00000038;flex-direction:column;gap:12px;padding:14px;display:flex}.duration-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.duration-label{color:var(--muted);align-items:center;gap:6px;font-size:.85rem;display:inline-flex}.duration-label svg{width:15px;height:15px}.duration-value{white-space:nowrap;font-size:.85rem}.duration-value strong{font-family:var(--font-display);font-size:1.15rem;font-weight:600}.muted{color:var(--muted)}.slider{--fill:33.33%;appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;width:100%;height:28px}.slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent) var(--fill), var(--surface-2) var(--fill));border-radius:6px;height:6px}.slider::-moz-range-track{background:var(--surface-2);border-radius:6px;height:6px}.slider::-moz-range-progress{background:var(--accent);border-radius:6px;height:6px}.slider::-webkit-slider-thumb{appearance:none;background:#fff;border:none;border-radius:50%;width:26px;height:26px;margin-top:-10px;transition:transform .15s,box-shadow .2s;box-shadow:0 2px 10px #0006,0 0 0 6px #896ef72e}.slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;width:26px;height:26px;box-shadow:0 2px 10px #0006,0 0 0 6px #896ef72e}.slider:active::-webkit-slider-thumb{transform:scale(1.1);box-shadow:0 2px 10px #0006,0 0 0 9px #896ef738}.slider:focus-visible{outline:none}.slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent)}.slider-scale{color:var(--dim);font-variant-numeric:tabular-nums;justify-content:space-between;margin:-6px 4px 0;font-size:.75rem;display:flex}.actions{gap:10px;display:flex}.actions:not(:has(.btn:not([hidden]))){display:none}.btn{height:52px;font-family:var(--font);color:#fff;cursor:pointer;border:1px solid #0000;border-radius:16px;flex:1;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:.95rem;font-weight:600;text-decoration:none;transition:transform .15s,filter .2s,background .2s,opacity .2s;animation:.25s ease-out pop-in;display:inline-flex}.btn svg{width:16px;height:16px}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{cursor:default}.btn.is-loading{opacity:.75}.btn.is-loading svg{animation:1s ease-in-out infinite pulse}.btn-primary{background:linear-gradient(135deg,#7455f1,#3d74f5);box-shadow:0 8px 24px -8px #623df599}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.btn-danger{background:color-mix(in srgb, var(--red) 14%, transparent);border-color:color-mix(in srgb, var(--red) 30%, transparent);color:var(--red)}.btn-danger:hover:not(:disabled){background:color-mix(in srgb, var(--red) 22%, transparent)}.btn-compact{flex:none;padding:0 20px}.btn-google{color:#1f1f1f;background:#fff;width:100%;margin-top:8px}.btn-google:hover{filter:brightness(.95)}.toast{background:var(--surface-2);color:var(--text);border-radius:12px;align-items:center;gap:10px;padding:10px 12px;font-size:.85rem;animation:.2s ease-out pop-in;display:flex}.toast-icon{place-items:center;display:grid}.toast-icon svg{width:16px;height:16px}.toast-success .toast-icon{color:var(--green)}.toast-error{background:color-mix(in srgb, var(--red) 12%, transparent)}.toast-error .toast-icon{color:var(--red)}.toast-loading .toast-icon{color:var(--amber)}.stats{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stat{border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);flex-direction:column;gap:2px;min-width:0;padding:12px;display:flex}.stat-label{color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}.stat-value{white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:500;overflow:hidden}.foot{color:var(--dim);justify-content:center;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:.75rem;display:flex}.foot .sep{opacity:.6}.pulse{background:var(--green);border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse}.login-card{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:36px 24px;display:flex}.logo-lg{border-radius:18px;width:60px;height:60px;margin-bottom:6px}.logo-lg svg{width:28px;height:28px}.login-title{font-family:var(--font-display);letter-spacing:-.02em;font-size:1.7rem;font-weight:600}.login-subtitle{color:var(--muted);margin-bottom:8px;font-size:.9rem}.alert-error{text-align:left;background:color-mix(in srgb, var(--red) 12%, transparent);width:100%;color:var(--red);border-radius:12px;align-items:center;gap:8px;padding:10px 12px;font-size:.85rem;display:flex}.spinner{border:3px solid var(--surface-2);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;margin-bottom:8px;animation:.8s linear infinite spin}.loader-title{font-weight:600}.loader-subtitle{color:var(--muted);font-size:.85rem}.spin-mini{border:2px solid color-mix(in srgb, currentColor 30%, transparent);border-top-color:currentColor;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35}}@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--state) 60%, transparent)}to{box-shadow:0 0 0 10px #0000}}@keyframes pop-in{0%{opacity:0;transform:translateY(4px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}
