body:not(.commercial-page) {
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.sidebar { background: var(--sidebar-background); color: var(--sidebar-text); border-right-color: rgba(255, 255, 255, .08); }
.sidebar-link { color: var(--sidebar-text); transition: var(--transition-ui); }
.sidebar-link-icon { color: var(--sidebar-icon); }
.sidebar-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.sidebar-link:hover .sidebar-link-icon { color: var(--sidebar-icon-active); }
.sidebar-link.active { background: var(--sidebar-active); color: var(--sidebar-text-active); box-shadow: 0 6px 20px color-mix(in srgb, var(--sidebar-active) 24%, transparent); }
.sidebar-link.active .sidebar-link-icon { color: var(--sidebar-icon-active); }
.sidebar-section-title { color: color-mix(in srgb, var(--sidebar-text) 54%, transparent); }
.sidebar-brand-title, .sidebar-help { color: var(--sidebar-text-active); }
.sidebar-brand-subtitle, .sidebar-help-text small { color: color-mix(in srgb, var(--sidebar-text) 72%, transparent); }
.sidebar-toggle { background: var(--sidebar-hover); color: var(--sidebar-icon-active); }
.sidebar-toggle:hover { background: var(--sidebar-active); }

.topbar { background: var(--color-bg); }
.dashboard-content { color: var(--color-text-primary); }
.page-header h1, .page-title, .login-form-heading h2 { color: var(--color-text-primary); font-weight: 700; letter-spacing: 0; }
.page-header h1 { font-size: 30px; line-height: 1.2; }
.page-header p, .text-secondary { color: var(--color-text-secondary) !important; }

.card, .panel-card, .kpi-card, .table-card, .tabela-admin, .filters-card.compact,
.formulario-admin, .metric-card-compact, .summary-strip > div, .commercial-config-block {
    background: var(--color-surface);
    border-color: var(--color-border) !important;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.card:hover, .kpi-card:hover { box-shadow: var(--shadow-card-hover); }

.btn { border-radius: var(--radius-button); font-weight: 600; transition: var(--transition-ui); }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-outline-primary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-primary); }
.btn-outline-primary:hover { background: color-mix(in srgb, var(--color-primary) 7%, white); border-color: var(--color-primary); color: var(--color-primary-hover); }

.form-control, .form-select, .config-field input, .config-field select, .config-field textarea {
    min-height: 42px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 14px;
    transition: var(--transition-ui);
}
.form-control:focus, .form-select:focus, .config-field input:focus, .config-field select:focus, .config-field textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 92, 255, .1);
    outline: 0;
}
.form-label, .config-field label { color: var(--color-text-secondary); font-size: 12px; font-weight: 500; }

.table:not(.table-ultra-compact) thead th, .tabela-admin table:not(.table-ultra-compact) thead th {
    background: #f8fafc;
    color: var(--color-text-secondary);
    border-bottom-color: var(--color-border);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.table:not(.table-ultra-compact) tbody td, .tabela-admin table:not(.table-ultra-compact) tbody td {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-border-soft);
    font-size: 13px;
    font-weight: 400;
}
.table tbody tr:hover > *, .tabela-admin tbody tr:hover > * { background: #fafcff; }
.badge, .badge-compact { font-weight: 600; letter-spacing: 0; }
.modal-content { border: 1px solid var(--color-border); border-radius: var(--radius-modal); box-shadow: var(--shadow-card-hover); }
.alert { border-radius: var(--radius-input); }

.appearance-form { display: grid; gap: 16px; }
.appearance-section { margin: 0; padding: 20px !important; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; color: var(--color-text-primary); font-size: 20px; font-weight: 600; line-height: 1.3; }
.section-heading p { margin: 3px 0 0; color: var(--color-text-secondary); font-size: 13px; }
.section-heading > svg { width: 22px; height: 22px; color: var(--color-primary); }
.sidebar-color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sidebar-color-field { display: grid; gap: 7px; color: var(--color-text-secondary); font-size: 12px; font-weight: 500; }
.color-picker-control { min-height: 42px; padding: 5px 10px 5px 6px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-surface); }
.color-picker-control input { width: 34px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.color-picker-control output { color: var(--color-text-primary); font-size: 12px; font-weight: 600; }
.brand-file-preview { min-height: 74px; margin-top: 10px; padding: 8px 0; display: flex; align-items: center; background: transparent; }
.brand-file-preview img { width: auto; max-width: 180px; max-height: 64px; object-fit: contain; }
.brand-file-preview.compact img { max-width: 48px; max-height: 48px; }
.form-actions { display: flex; justify-content: flex-end; }
.form-actions .btn { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; }
.form-actions .btn svg { width: 17px; height: 17px; }

.tela-login {
    --login-green: var(--color-primary);
    --login-green-hover: var(--color-primary-hover);
    --login-green-soft: rgba(11, 92, 255, .08);
    --login-border: var(--color-border);
    --login-border-focus: var(--color-primary);
    --login-shadow-focus: 0 0 0 3px rgba(11, 92, 255, .1);
}
.login-form-heading h2 { font-weight: 700; }
.login-key-icon { color: var(--color-primary); }
.login-field label { font-weight: 500; }
.login-submit { border-color: transparent; border-radius: var(--radius-button); font-weight: 600; box-shadow: var(--shadow-card); }
.login-submit:hover { border-color: transparent; box-shadow: var(--shadow-card-hover); }
.login-brand-logo img.logo-escura,
.sidebar-logo-expanded.logo-escura { filter: brightness(0) invert(1); }

.dashboard-density-ultra,
.dashboard-density-ultra > *,
.dashboard-density-ultra .kpi-grid,
.dashboard-density-ultra .dashboard-grid,
.dashboard-density-ultra .panel-card { min-width: 0; max-width: 100%; }
.dashboard-density-ultra .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-density-ultra .dashboard-grid { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .9fr); }

@media (min-width: 1600px) {
    .dashboard-density-ultra .kpi-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
    .sidebar-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-density-ultra .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-density-ultra .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 576px) {
    .sidebar-color-grid { grid-template-columns: 1fr; }
    .appearance-section { padding: 16px !important; }
}
