.timer-mode-tabs{display:flex;gap:8px;margin-bottom:20px;background:rgba(102,126,234,.1);padding:6px;border-radius:12px}.mode-tab{flex:1;padding:10px 16px;border:none;background:transparent;color:#64748b;font-size:.9rem;font-weight:500;border-radius:8px;cursor:pointer;transition:all .3s ease}.mode-tab:hover{background:rgba(255,255,255,.5);color:#667eea}.mode-tab.active{background:#fff;color:#667eea;box-shadow:0 2px 8px rgba(102,126,234,.2)}.mode-tab.active[data-mode="work"]{color:#e53e3e}.mode-tab.active[data-mode="shortBreak"]{color:#38a169}.mode-tab.active[data-mode="longBreak"]{color:#3182ce}.timer-display-container{display:flex;justify-content:center;padding:20px 0}.timer-progress-ring{position:relative;width:220px;height:220px}.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:rgba(102,126,234,.15);stroke-width:8}.progress-ring-fill{fill:none;stroke:#e53e3e;stroke-width:8;stroke-linecap:round;stroke-dasharray:565.48;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .3s ease}.progress-ring-fill.work-mode{stroke:#e53e3e}.progress-ring-fill.short-break-mode{stroke:#38a169}.progress-ring-fill.long-break-mode{stroke:#3182ce}.timer-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Roboto Mono',monospace;font-size:3.5rem;font-weight:700;color:#1a202c;letter-spacing:2px}.timer-controls{display:flex;justify-content:center;gap:12px;margin:20px 0}.timer-btn{min-width:100px;padding:12px 24px;font-size:1rem}.timer-btn.btn-lg{min-width:140px;padding:14px 32px;font-size:1.1rem}.pomodoro-progress{display:flex;align-items:center;justify-content:center;gap:12px;padding:15px;background:rgba(102,126,234,.08);border-radius:12px}.progress-label{color:#64748b;font-size:.9rem}.pomodoro-dots{display:flex;gap:8px}.pomodoro-dot{width:24px;height:24px;border-radius:50%;background:rgba(229,62,62,.2);border:2px solid rgba(229,62,62,.3);transition:all .3s ease}.pomodoro-dot.completed{background:#e53e3e;border-color:#e53e3e;transform:scale(1.1);box-shadow:0 2px 8px rgba(229,62,62,.4)}.progress-count{color:#1a202c;font-weight:600;font-size:.95rem}.stats-row{margin-bottom:0}.stat-card{text-align:center;padding:15px 10px;background:rgba(102,126,234,.08);border-radius:12px;transition:transform .2s ease}.stat-card:hover{transform:translateY(-2px)}.stat-icon{font-size:1.8rem;margin-bottom:8px}.stat-value{font-family:'Roboto Mono',monospace;font-size:1.8rem;font-weight:700;color:#667eea}.stat-unit{font-size:.9rem;font-weight:400;color:#64748b}.stat-label{font-size:.85rem;color:#64748b;margin-top:4px}.add-task-container{display:flex;gap:10px;margin-bottom:20px}.add-task-container .form-input{flex:1}.add-task-container .btn{flex-shrink:0;width:48px;padding:10px}.task-list{max-height:400px;overflow-y:auto;margin-bottom:15px}.task-list::-webkit-scrollbar{width:6px}.task-list::-webkit-scrollbar-track{background:rgba(102,126,234,.1);border-radius:3px}.task-list::-webkit-scrollbar-thumb{background:rgba(102,126,234,.3);border-radius:3px}.task-list::-webkit-scrollbar-thumb:hover{background:rgba(102,126,234,.5)}.empty-tasks{text-align:center;padding:40px 20px;color:#94a3b8}.empty-tasks i{font-size:3rem;margin-bottom:15px;opacity:.5}.empty-tasks p{margin:0;font-size:.95rem}.task-item{display:flex;align-items:center;gap:12px;padding:12px 15px;background:rgba(255,255,255,.6);border:1px solid rgba(102,126,234,.1);border-radius:10px;margin-bottom:8px;transition:all .2s ease;cursor:pointer}.task-item:hover{background:rgba(255,255,255,.9);border-color:rgba(102,126,234,.3);transform:translateX(4px)}.task-item.current{background:rgba(102,126,234,.1);border-color:#667eea;box-shadow:0 2px 8px rgba(102,126,234,.15)}.task-item.completed{opacity:.6}.task-item.completed .task-text{text-decoration:line-through;color:#94a3b8}.task-checkbox{width:22px;height:22px;border:2px solid #cbd5e1;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.task-checkbox:hover{border-color:#667eea}.task-checkbox.checked{background:#48bb78;border-color:#48bb78}.task-checkbox.checked::after{content:'✓';color:#fff;font-size:14px;font-weight:bold}.task-text{flex:1;font-size:.95rem;color:#1a202c;word-break:break-word}.task-current-badge{font-size:.7rem;padding:3px 8px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-radius:10px;font-weight:500;white-space:nowrap}.task-delete{width:28px;height:28px;border:none;background:transparent;color:#94a3b8;cursor:pointer;border-radius:6px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.task-delete:hover{background:rgba(239,68,68,.1);color:#ef4444}.task-summary{display:flex;align-items:center;gap:5px;padding:10px 15px;background:rgba(102,126,234,.08);border-radius:10px;font-size:.9rem;color:#64748b}.btn-clear-completed{margin-left:auto;padding:5px 10px;background:transparent;border:1px solid #e2e8f0;border-radius:6px;font-size:.8rem;color:#64748b;cursor:pointer;transition:all .2s ease}.btn-clear-completed:hover{background:#fee2e2;border-color:#ef4444;color:#ef4444}.shortcuts-list{display:grid;gap:10px}.shortcut-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(102,126,234,.1)}.shortcut-item:last-child{border-bottom:none}.shortcut-item kbd{display:inline-block;padding:4px 10px;background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%);border:1px solid #cbd5e1;border-radius:6px;font-family:'Roboto Mono',monospace;font-size:.85rem;color:#475569;box-shadow:0 2px 0 #cbd5e1;min-width:70px;text-align:center}.shortcut-item span{color:#64748b;font-size:.9rem}@media(max-width:991px){.timer-display{font-size:3rem}.timer-progress-ring{width:200px;height:200px}}@media(max-width:767px){.timer-controls{flex-wrap:wrap}.timer-btn{min-width:90px;padding:10px 16px;font-size:.9rem}.timer-btn.btn-lg{min-width:100%;order:-1}.timer-display{font-size:2.8rem}.timer-progress-ring{width:180px;height:180px}.stat-value{font-size:1.5rem}.pomodoro-progress{flex-wrap:wrap;gap:8px}.pomodoro-dots{width:100%;justify-content:center;order:-1}.task-list{max-height:300px}.mode-tab{padding:8px 12px;font-size:.8rem}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.timer-display.pulsing{animation:pulse 1s ease-in-out infinite}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.task-item{animation:fadeIn .3s ease}@keyframes timeUpBlink{0%,100%{opacity:1;filter:drop-shadow(0 0 8px rgba(229,62,62,.6))}50%{opacity:.7;filter:drop-shadow(0 0 20px rgba(229,62,62,.9))}}@keyframes timeUpPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}}.timer-display-container.time-up .progress-ring-fill{stroke:#e53e3e !important;animation:timeUpBlink .8s ease infinite}.timer-display-container.time-up .timer-display{color:#e53e3e;animation:timeUpPulse .8s ease infinite}