.timer-card{position:relative;overflow:hidden;margin-bottom:19px;background:radial-gradient(circle at 82% 28%,#203c50,#122238 55%,#0d1b2e);border:1px solid #345069;border-radius:24px;padding:28px}
.timer-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.timer-header h2{font:700 21px 'Space Grotesk',sans-serif;margin:0}
.timer-mode-switch{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}
.timer-mode-switch button{background:#213650;color:#a6bed4;border:1px solid #405872;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:700}
.timer-mode-switch button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#102e2b}
.timer-stage{display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap}
.timer-ring{width:235px;height:235px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--accent) var(--timer-progress,100%),#2b4259 0);flex:none}
.timer-ring:before{content:'';position:absolute;inset:10px;border-radius:50%;background:#112237}
.timer-center{position:relative;text-align:center;z-index:1}
.timer-display{font:700 48px 'Space Grotesk',sans-serif;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.timer-subtitle{text-transform:uppercase;letter-spacing:2px;color:#93b4c4;font-size:11px;font-weight:800}
.timer-details{max-width:290px}.timer-details p{color:#a8bfd3;line-height:1.55;font-size:13px}
.timer-actions{display:flex;gap:9px;flex-wrap:wrap;margin:19px 0}.timer-actions button{padding:11px 19px;border-radius:11px;font-weight:800}
.timer-custom{display:flex;align-items:center;gap:9px;font-size:12px;color:#adc0d3}.timer-custom input{width:73px;padding:9px;border-radius:9px;border:1px solid #536881;background:#0d1d31;color:white}
.timer-completed{border-top:1px solid #354e66;margin-top:18px;padding-top:13px;color:#a8c6d3;font-size:12px}
.theme-pastel .timer-card,.theme-cream .timer-card{background:linear-gradient(130deg,#fff9ff,#eee4f9);border-color:#d8bdeb}.theme-cream .timer-card{background:linear-gradient(130deg,#fff9f0,#f0dfc9);border-color:#ddc5a7}
.theme-pastel .timer-header h2,.theme-pastel .timer-display,.theme-cream .timer-header h2,.theme-cream .timer-display{color:#493253}.theme-cream .timer-header h2,.theme-cream .timer-display{color:#5c412d}
.theme-pastel .timer-ring:before{background:#f5e9fc}.theme-cream .timer-ring:before{background:#f8ecd9}
.theme-pastel .timer-mode-switch button,.theme-pastel .timer-custom input{background:#ebdafa;color:#5c4776;border-color:#d2bce7}.theme-cream .timer-mode-switch button,.theme-cream .timer-custom input{background:#e9dac4;color:#644d37;border-color:#d6baa0}
.theme-pastel .timer-mode-switch button[aria-pressed=true],.theme-cream .timer-mode-switch button[aria-pressed=true]{background:var(--accent);color:white}
.theme-pastel .timer-details p,.theme-pastel .timer-custom,.theme-pastel .timer-completed{color:#776786}.theme-cream .timer-details p,.theme-cream .timer-custom,.theme-cream .timer-completed{color:#77624b}
@media(max-width:580px){.timer-card{padding:18px}.timer-ring{width:210px;height:210px}.timer-display{font-size:42px}.timer-details{text-align:center}.timer-actions{justify-content:center}}