*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;font-family:Segoe UI,sans-serif;transition:background .5s;display:flex}.app.work{background:#1e1b4b}.app.shortBreak{background:#14532d}.app.longBreak{background:#1e3a5f}.card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff14;border:1px solid #ffffff26;border-radius:24px;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:400px;padding:2.5rem 2rem;display:flex}h1{color:#ffffffe6;letter-spacing:.05em;text-transform:uppercase;font-size:1.3rem;font-weight:600}.mode-selector{background:#0003;border-radius:12px;gap:6px;padding:4px;display:flex}.mode-btn{color:#fff9;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:9px;padding:7px 14px;font-size:13px;transition:all .2s}.mode-btn.active{color:#fff;background:#ffffff26;font-weight:500}.mode-btn:hover:not(.active){color:#ffffffd9}.timer-display{flex-direction:column;align-items:center;gap:.75rem;display:flex}.timer-circle-wrapper{justify-content:center;align-items:center;width:200px;height:200px;display:flex;position:relative}.timer-svg{width:100%;height:100%;position:absolute;inset:0}.timer-time{color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:3.5rem;font-weight:700}.timer-status{color:#ffffff80;letter-spacing:.05em;font-size:13px}.timer-controls{gap:12px;display:flex}.ctrl-btn{cursor:pointer;letter-spacing:.02em;border:none;border-radius:50px;padding:12px 28px;font-size:15px;font-weight:600;transition:all .15s}.ctrl-btn.start,.ctrl-btn.pause{color:#1e1b4b;background:#fff}.ctrl-btn.reset{color:#fff;background:#ffffff1a;border:1px solid #fff3}.ctrl-btn:hover{opacity:.85;transform:scale(.98)}.session-counter{flex-direction:column;align-items:center;gap:8px;display:flex}.session-label{color:#ffffff80;text-transform:uppercase;letter-spacing:.08em;font-size:12px}.session-dots{gap:8px;display:flex}.session-dot{background:#ffffff26;border:1px solid #ffffff4d;border-radius:50%;width:12px;height:12px;transition:all .3s}.session-dot.filled{background:#fff;border-color:#fff}.session-total{color:#fff6;font-size:12px}