:root{--font-sans:'Inter',-apple-system,sans-serif;--font-mono:'JetBrains Mono',monospace;--radius:12px;--transition:0.2s ease}
[data-theme="dark"]{--bg:#0F0F1A;--bg-card:rgba(26,26,46,0.95);--bg-input:rgba(239,68,68,0.05);--border:rgba(239,68,68,0.12);--text:#E8E4F0;--text2:#A0A0C0;--text3:#6060A0;--primary:#EF4444;--gradient:linear-gradient(135deg,#EF4444,#F97316)}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh}
.app{max-width:420px;margin:0 auto}.header{padding:16px 24px;border-bottom:1px solid var(--border);text-align:center}
.header h1{font-size:1rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn{font-family:var(--font-sans);font-size:.82rem;font-weight:500;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;transition:all var(--transition)}
.btn-primary{background:var(--gradient);color:#fff}.btn-ghost{background:transparent;color:var(--text2)}.btn-ghost:hover{background:var(--bg-input)}
.main{padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px}
.timer-display{position:relative;width:220px;height:220px}
.ring{position:absolute;top:0;left:0}
.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
#time{font-size:2.8rem;font-weight:700;font-family:var(--font-mono);display:block}
#phase{font-size:.72rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.controls{display:flex;gap:8px}
.settings{display:flex;gap:12px}.setting{text-align:center}
.setting label{font-size:.68rem;color:var(--text3);display:block;margin-bottom:2px;text-transform:uppercase}
.setting input{width:50px;text-align:center;padding:4px;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:6px;font-family:var(--font-mono);font-size:.82rem;outline:none}
.sessions{font-size:.75rem;color:var(--text3);text-align:center}