.timer-container { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px 15px; display: flex; flex-direction: column; gap: 15px; width: 100%; box-sizing: border-box; }
            
            /* Abas Principais de Modos - Scroll suave no mobile */
            .mode-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; width: 93%; }
            .mode-tabs::-webkit-scrollbar { display: none; }
            .mode-tab { padding: 10px 12px; background: #fff; border: 2px solid #cbd5e1; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; color: #475569; white-space: nowrap; flex-shrink: 0; text-align: center; }
            .mode-tab.active { border-color: #2563eb; background: #eff6ff; color: #2563eb; }

            /* Área de Display do Timer */
            .display-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 25px 15px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 15px; width: 100%; box-sizing: border-box; overflow: hidden; }
            .timer-display { font-size: clamp(2.8rem, 12vw, 4rem); font-weight: 800; font-family: monospace; color: #1e293b; letter-spacing: 1px; word-break: break-all; }
            
            /* Controles de Configuração (Inputs) */
            .config-inputs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%; }
            .input-group { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: #64748b; }
            .input-group input, .input-group select { width: 70px; padding: 8px; text-align: center; font-size: 1.05rem; border: 1px solid #cbd5e1; border-radius: 6px; outline: none; background: #f8fafc; font-weight: 600; color: #1e293b; }
            .input-group input:focus, .input-group select:focus { border-color: #2563eb; background: #fff; }

            /* Configurações de Alarme adaptadas para mobile */
            .alarm-config { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 0.85rem; color: #475569; font-weight: 600; background: #f1f5f9; padding: 10px; border-radius: 6px; width: 100%; box-sizing: border-box; }
            .alarm-config select { padding: 6px 8px; border-radius: 6px; border: 1px solid #cbd5e1; font-weight: 600; background: #fff; color: #1e293b; max-width: 130px; }

            /* Botões de Ação */
            .action-controls { display: flex; gap: 10px; width: 100%; max-width: 350px; justify-content: center; }
            .btn { flex: 1; padding: 12px 15px; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
            .btn-primary { background-color: #2563eb; color: white; }
            .btn-primary:hover { background-color: #1d4ed8; }
            .btn-danger { background-color: #dc2626; color: white; }
            .btn-danger:hover { background-color: #b91c1c; }
            .btn-secondary { background-color: #e2e8f0; color: #334155; }
            .btn-secondary:hover { background-color: #cbd5e1; }

            /* Estilo Pomodoro fases */
            .pomodoro-status { font-size: 1rem; font-weight: 700; color: #2563eb; margin-bottom: -5px; text-align: center; }