*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#F59E0B;--primary-dim:rgba(245,158,11,.12);
  --secondary:#FBBF24;--accent:#EF4444;
  --green:#22C55E;--yellow:#EAB308;--red:#EF4444;
  --bg:#0A0A0A;--surface:#151515;--surface2:#1F1F1F;
  --border:rgba(245,158,11,.1);--text:#FAFAFA;--text-dim:#A3A3A3;
  --radius:12px;--font:'Inter',system-ui,sans-serif;
  --transition:250ms ease;
}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);display:flex;align-items:center;justify-content:center}
.app{width:100%;max-width:600px;padding:2rem;text-align:center}
.setup-title{font-size:1.5rem;font-weight:800;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.presets{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.5rem}
.preset-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.5rem 1rem;color:var(--text-dim);font-family:var(--font);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.preset-btn:hover,.preset-btn.active{border-color:var(--primary);color:var(--primary);background:var(--primary-dim)}
.custom-row{display:flex;align-items:center;justify-content:center;gap:.5rem}
.custom-input{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.5rem .75rem;color:var(--text);font-family:var(--font);font-size:1rem;width:80px;text-align:center;outline:none}
.custom-input:focus{border-color:var(--primary)}
.custom-label{color:var(--text-dim);font-size:.85rem}
.btn{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem 1rem;border:none;border-radius:8px;font-size:.85rem;font-weight:700;cursor:pointer;transition:all var(--transition);font-family:var(--font)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#000}
.btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}
.timer-display{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.time-text{font-size:6rem;font-weight:800;letter-spacing:-2px;font-variant-numeric:tabular-nums;line-height:1;transition:color 500ms ease}
.time-text.green{color:var(--green)}
.time-text.yellow{color:var(--yellow)}
.time-text.red{color:var(--red);animation:pulse 1s ease infinite}
.time-text.overtime{color:var(--accent);animation:pulse .5s ease infinite}
.status-text{font-size:.9rem;color:var(--text-dim);font-weight:600}
.progress-ring{width:100%;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;max-width:400px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));border-radius:3px;transition:width 1s linear;width:100%}
.timer-controls{display:flex;gap:.5rem;margin-top:1rem}
.ctrl-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.5rem 1rem;color:var(--text-dim);font-family:var(--font);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.ctrl-btn:hover{border-color:var(--primary);color:var(--primary)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@media(max-width:600px){.time-text{font-size:4rem}.app{padding:1.5rem}}