body{color:#fff;background-color:#42e9ff;font-family:Fredoka,sans-serif}.pomodoro{text-align:center;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:20px;display:flex}.top-bar{justify-content:center;align-items:center;width:100%;max-width:480px;margin-bottom:40px;display:flex;position:relative}.pomodoro-title{letter-spacing:2px;background-color:#00b2ff99;border-radius:12px;margin:0;padding:8px 24px;font-size:2.5rem}.top-actions{align-items:center;gap:8px;display:flex;position:absolute;bottom:-75%;right:39%}.bg-btn,.settings-btn{cursor:pointer;color:#fff;background-color:#ff5900;border:none;border-radius:12px;justify-content:center;align-items:center;padding:8px 12px;font-size:1.4rem;line-height:1;transition:transform .2s;display:flex}.bg-btn:hover,.settings-btn:hover{transform:scale(1.06)}.settings-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.settings-modal{color:#fff;background:#1e293b;border:1px solid #ffffff26;border-radius:20px;flex-direction:column;gap:16px;min-width:280px;max-width:90vw;padding:24px 30px;animation:.2s ease-out fadeIn;display:flex;box-shadow:0 16px 40px #00000080}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.settings-heading{color:#f1f5f9;text-align:center;margin:0 0 6px;font-size:1.25rem}.setting-field{justify-content:space-between;align-items:center;gap:20px;font-size:15px;display:flex}.setting-field input{color:#fff;text-align:center;background:#0f172a;border:1px solid #475569;border-radius:8px;width:65px;padding:6px 10px;font-size:16px;font-weight:600}.setting-field input:focus{outline:2px solid #ff5900}.close-btn{color:#fff;cursor:pointer;background-color:#ff5900;border:none;border-radius:10px;margin-top:8px;padding:10px;font-size:15px;font-weight:600;transition:opacity .2s}.close-btn:hover{opacity:.9}.mode-group{flex-wrap:wrap;justify-content:center;gap:15px;display:flex}.mode-btn{color:#fff;cursor:pointer;background-color:#ff5900;border:none;border-radius:20px;min-width:110px;padding:10px 16px;font-size:16px;font-weight:600;transition:all .2s}.mode-btn:hover{opacity:.85;transform:translateY(-1px)}.timer-display{font-variant-numeric:tabular-nums;background-color:#0686fecc;border-radius:24px;margin:15px 0;padding:15px 35px;font-size:clamp(3.8rem,12vw,8rem);box-shadow:0 8px 32px #0003}.control-group{justify-content:center;gap:20px;display:flex}.control-btn{cursor:pointer;border:none;border-radius:8px;min-width:100px;padding:12px 28px;font-size:16px;font-weight:600;transition:all .2s}.control-btn:hover{opacity:.85;transform:translateY(-1px)}.btn-start{color:#fff;background-color:#ff5900}.btn-reset{color:#333;background-color:#fff}@media (width<=768px){.pomodoro{gap:16px;padding:16px}.pomodoro-title{padding:6px 18px;font-size:2rem}.mode-group{gap:12px}.mode-btn{min-width:100px;padding:9px 14px;font-size:15px}.timer-display{border-radius:20px;padding:12px 28px}.control-btn{padding:10px 24px;font-size:15px}}@media (width<=480px){.pomodoro{gap:14px;padding:12px}.top-bar{flex-wrap:wrap;justify-content:center;gap:10px}.top-actions{gap:6px;position:static}.bg-btn,.settings-btn{padding:6px 10px;font-size:1.2rem}.pomodoro-title{letter-spacing:1px;padding:6px 14px;font-size:1.5rem}.mode-group{gap:8px;width:100%;max-width:320px}.mode-btn{border-radius:14px;flex:calc(33.333% - 8px);min-width:85px;padding:8px 6px;font-size:13px}.timer-display{border-radius:16px;margin:10px 0;padding:10px 20px;font-size:clamp(3rem,18vw,4.5rem)}.control-group{gap:12px;width:100%;max-width:280px}.control-btn{min-width:unset;flex:1;padding:10px 16px;font-size:14px}}