.mode-tabs {display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 25px;justify-content: center;}
.mode-tab {padding: 10px 22px;border: none;border-radius: 25px;background: white;cursor: pointer;white-space: nowrap;font-size: 14px;transition: all 0.3s;border: 2px solid #e0e3eb;font-weight: 500;}
.mode-tab.active {background: var(--primary-color);color: white;border-color: var(--primary-color);box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);}
.mode-tab:hover:not(.active) {background: #e3f2fd;border-color: var(--primary-color);color: var(--primary-color);}

.timer-display-box {background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);border-radius: 12px;padding: 40px 30px;margin-bottom: 20px;border: 1px solid #e0e3eb;text-align: center;}
.timer-display {font-size: 72px;font-weight: 700;color: var(--primary-color);font-family: 'Courier New', monospace;letter-spacing: 5px;}
.timer-display.running {color: #4CAF50;}
.timer-display.paused {color: #FF9800;}
.timer-display.finished {color: #f44336;animation: pulse 1s infinite;}
@keyframes pulse {0%, 100% {opacity: 1;} 50% {opacity: 0.5;}}

.timer-label {font-size: 14px;color: #666;margin-top: 10px;}

.time-input-group {display: flex;gap: 15px;justify-content: center;margin-bottom: 20px;flex-wrap: wrap;}
.time-input-item {display: flex;flex-direction: column;align-items: center;gap: 5px;}
.time-input-item label {font-size: 12px;color: #666;}
.time-input-item input {width: 80px;padding: 15px;text-align: center;font-size: 24px;font-weight: 600;border: 2px solid #e0e3eb;border-radius: 8px;}
.time-input-item input:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);}

.preset-buttons {display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;margin-bottom: 20px;}
.preset-btn {padding: 8px 16px;border: 2px solid #e0e3eb;border-radius: 20px;background: white;cursor: pointer;font-size: 13px;transition: all 0.3s;}
.preset-btn:hover {border-color: var(--primary-color);background: #e3f2fd;color: var(--primary-color);}

.timer-card {background: white;border-radius: 12px;padding: 20px;margin-bottom: 15px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);border: 2px solid #e0e3eb;}
.timer-card-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;}
.timer-card-title {font-size: 14px;font-weight: 600;color: #333;}
.timer-card-close {background: none;border: none;color: #999;cursor: pointer;padding: 5px;border-radius: 4px;transition: all 0.3s;}
.timer-card-close:hover {color: #f44336;background: #ffebee;}
.timer-card-display {font-size: 36px;font-weight: 700;color: var(--primary-color);text-align: center;font-family: 'Courier New', monospace;margin-bottom: 15px;}
.timer-card-controls {display: flex;gap: 10px;justify-content: center;}

.add-timer-btn {width: 100%;padding: 15px;border: 2px dashed #e0e3eb;border-radius: 12px;background: transparent;cursor: pointer;font-size: 14px;color: #666;transition: all 0.3s;display: flex;align-items: center;justify-content: center;gap: 8px;}
.add-timer-btn:hover {border-color: var(--primary-color);color: var(--primary-color);background: #e3f2fd;}

.multi-timer-section {margin-top: 30px;padding-top: 30px;border-top: 2px dashed #e0e3eb;}
.multi-timer-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 20px;display: flex;align-items: center;gap: 10px;}
.multi-timer-title i {color: var(--primary-color);}

.hidden{display: none !important;}

@media (max-width: 1024px) {
    .tool-mainbox {flex-direction: column;}
    .tool-mainleft {width: 100%;}
    .tool-mainright {width: 100%;margin-left: 0;margin-top: 20px;}
}

@media (max-width: 768px) {
    .menu{padding: 0 15px;}
    .mobile-menu{display: none;position: absolute;top: 70px;left: 0;right: 0;background: white;flex-direction: column;padding: 15px 0;box-shadow: var(--card-shadow);z-index: 999;}
    .mobile-menu.active {display: flex;animation: slideDown 0.3s ease-out;}
    @keyframes slideDown {from {opacity: 0;transform: translateY(-10px);}to {opacity: 1;transform: translateY(0);}}
    .menu-left-item {width: 100%;text-align: center;}
    .menu-left-item a {padding: 15px 20px;display: flex;align-items: center;justify-content: center;height: 50px;}
    .menu-toggle {display: block;}
    .menu-toggle.active span:nth-child(1) {transform: rotate(-45deg) translate(-5px, 6px);}
    .menu-toggle.active span:nth-child(2) {opacity: 0;}
    .menu-toggle.active span:nth-child(3) {transform: rotate(45deg) translate(-5px, -6px);}
    .menu-left-logo h1{font-size: 18px;margin-right: 0;}

    .tool-mainbox{padding: 0 15px;margin-top: 80px;}
    .tool-sectionbox{padding: 20px 15px;}
    .tool-mainleft h2{font-size: 18px;margin-bottom: 20px;}
    
    .timer-display {font-size: 48px;}
    .timer-display-box {padding: 30px 15px;}
    
    .time-input-item input {width: 60px;font-size: 18px;padding: 10px;}
    
    .preset-buttons {gap: 8px;}
    .preset-btn {padding: 6px 12px;font-size: 12px;}
    
    .btngroup {gap: 10px;}
    .btn {padding: 10px 20px;font-size: 14px;}
    
    footer {padding: 40px 20px 20px 20px;}
    .footer-content {gap: 30px;}
}

@media (max-width: 480px) {
    .tool-sectionheader h3 {font-size: 12px;}
    .tool-sectionheader h3 i {margin-right: 10px;}
    .tool-sectionheader a {padding: 3px 8px;}
    
    .timer-display {font-size: 36px;letter-spacing: 2px;}
    
    .time-input-group {gap: 10px;}
    .time-input-item input {width: 50px;font-size: 16px;padding: 8px;}
    
    .timer-card-display {font-size: 28px;}
}