.tool-header{text-align:center;margin-bottom:32px}.header-badge{display:flex;justify-content:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.badge{background:linear-gradient(135deg, #667eea, #764ba2);color:white;padding:6px 18px;border-radius:40px;font-size:0.75rem;font-weight:500;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.tool-header h1{font-size:2rem;font-weight:700;background:linear-gradient(135deg, #1e293b, #3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}.timer-tabs{display:flex;gap:12px;margin-bottom:28px;justify-content:center;flex-wrap:wrap}.timer-tab{background:transparent;border:none;padding:12px 24px;cursor:pointer;transition:all 0.3s;border-radius:60px;text-align:center;min-width:110px}.timer-tab i{font-size:1.2rem;color:var(--gray-400);margin-bottom:6px;display:block}.timer-tab span{display:block;font-weight:600;color:var(--gray-600);font-size:0.9rem}.timer-tab small{font-size:0.65rem;color:var(--gray-400)}.timer-tab.active{background:linear-gradient(135deg, #3b82f6, #2563eb);box-shadow:0 4px 15px rgba(59,130,246,0.3)}.timer-tab.active i,.timer-tab.active span,.timer-tab.active small{color:white}.timer-display{text-align:center;font-family:'Fira Code','Monaco',monospace;font-size:4rem;font-weight:700;padding:30px;background:linear-gradient(135deg, #1e293b, #0f172a);border-radius:30px;color:#10b981;letter-spacing:5px;margin-bottom:24px;box-shadow:0 10px 30px rgba(0,0,0,0.1)}.countup-display{font-size:3.5rem}.countdown-display{font-size:4rem}.pomodoro-display{font-size:5rem;color:#ef4444}.timer-controls{display:flex;justify-content:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}.timer-btn{padding:12px 28px;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s;border:none;display:inline-flex;align-items:center;gap:8px}.timer-btn.start{background:linear-gradient(135deg, #10b981, #059669);color:white}.timer-btn.start:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(16,185,129,0.4)}.timer-btn.pause{background:linear-gradient(135deg, #f59e0b, #d97706);color:white}.timer-btn.reset{background:linear-gradient(135deg, #6b7280, #4b5563);color:white}.timer-btn.lap,.timer-btn.skip,.timer-btn.next{background:linear-gradient(135deg, #8b5cf6, #7c3aed);color:white}.timer-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}.time-setter{background:var(--gray-50);border-radius:24px;padding:24px;margin-bottom:24px;text-align:center}.time-input-group{display:flex;justify-content:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}.time-input{text-align:center}.time-input input{width:80px;padding:12px;font-size:1.2rem;text-align:center;border:2px solid var(--gray-200);border-radius:16px;font-weight:600}.time-input input:focus{outline:none;border-color:#3b82f6}.time-input span{display:block;font-size:0.7rem;color:var(--gray-500);margin-top:4px}.set-time-btn{background:linear-gradient(135deg, #3b82f6, #2563eb);color:white;border:none;padding:10px 24px;border-radius:40px;cursor:pointer;font-weight:500}.lap-records{background:var(--gray-50);border-radius:20px;padding:16px;margin-top:16px}.lap-records h4{margin-bottom:12px;font-size:0.9rem;display:flex;align-items:center;gap:8px}.lap-list{max-height:200px;overflow-y:auto}.lap-item{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--gray-200);font-family:monospace}.pomodoro-settings{background:var(--gray-50);border-radius:20px;padding:16px;margin-bottom:20px}.pomodoro-presets{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.preset-btn{background:white;border:1px solid var(--gray-200);padding:8px 20px;border-radius:40px;cursor:pointer;transition:all 0.2s}.preset-btn.active{background:#3b82f6;color:white;border-color:#3b82f6}.custom-preset{display:flex;align-items:center;gap:8px;background:white;padding:4px 12px;border-radius:40px;border:1px solid var(--gray-200)}.custom-preset input{width:50px;padding:6px;text-align:center;border:1px solid var(--gray-200);border-radius:20px}.apply-custom{background:#3b82f6;color:white;border:none;padding:4px 12px;border-radius:30px;cursor:pointer}.pomodoro-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.status-badge{background:#ef4444;color:white;padding:6px 16px;border-radius:30px;font-size:0.85rem;font-weight:500}.cycle-count{font-size:0.8rem;color:var(--gray-500)}.pomodoro-progress{margin-top:20px}.progress-bar{background:var(--gray-200);border-radius:10px;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, #3b82f6, #8b5cf6);height:100%;width:0%;transition:width 0.3s}.interval-editor{background:var(--gray-50);border-radius:20px;padding:20px;margin-bottom:20px}.interval-list-header{display:grid;grid-template-columns:1fr 100px 40px;gap:12px;padding:8px 0;font-size:0.75rem;color:var(--gray-500);border-bottom:1px solid var(--gray-200);margin-bottom:12px}.interval-item{display:grid;grid-template-columns:1fr 100px 40px;gap:12px;margin-bottom:10px;align-items:center}.interval-item input{padding:8px 12px;border:1px solid var(--gray-200);border-radius:12px;font-size:0.85rem}.interval-item button{background:transparent;border:none;color:var(--gray-500);cursor:pointer;padding:8px;border-radius:8px}.interval-item button:hover{background:#fee2e2;color:#ef4444}.add-interval{background:transparent;border:1px dashed var(--gray-300);padding:10px;border-radius:40px;width:100%;cursor:pointer;margin-top:12px;color:var(--gray-500)}.interval-current{text-align:center;margin-bottom:20px}.current-phase{font-size:1.1rem;font-weight:600;margin-bottom:12px;color:#3b82f6}.interval-display{font-size:3rem;padding:20px}.alert-settings{text-align:center;margin-top:16px}.alert-settings label{cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:var(--gray-500)}@media (max-width:768px){.timer-display{font-size:2.5rem;letter-spacing:2px}.pomodoro-display{font-size:3rem}.timer-btn{padding:8px 18px;font-size:0.85rem}.time-input input{width:60px;font-size:1rem}.interval-list-header,.interval-item{grid-template-columns:1fr 80px 30px;gap:8px}}