/* ============================================
   Estilos extraídos do config.html
   ============================================ */

.config-row { transition: background-color 0.2s ease, padding-left 0.2s ease; }
.config-row:hover { background-color: #F8FAFC; padding-left: 12px; }

.modal-overlay { transition: opacity 0.2s ease; }
.modal-panel { animation: modalIn 0.25s ease; }
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.day-btn { transition: all 0.2s ease; }
.day-btn:hover { transform: scale(1.08); }
.day-btn.ativo { background: #6366F1; color: white; border-color: #6366F1; }

input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: #E2E8F0; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #6366F1; cursor: pointer; box-shadow: 0 2px 6px rgba(99,102,241,0.4); }

.checkbox-custom { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border: 2px solid #CBD5E1; border-radius: 6px; cursor: pointer; position: relative; transition: all 0.2s ease; flex-shrink: 0; }
.checkbox-custom:checked { background: #6366F1; border-color: #6366F1; }
.checkbox-custom:checked::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg); }

/* Modais do config */
#menureinicio,
#menumetas,
#notifcard,
#menuimportar,
#menuperfil {
    display: none;
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
    .config-row:hover {
        background-color: #F8FAFC;
    }
    .config-row {
        border: 1px solid #F1F5F9;
        border-radius: 12px;
    }
}