:root {
    --suite-sidebar: #0d1828;
    --suite-sidebar-alt: #132338;
    --suite-sidebar-line: rgba(145, 177, 214, 0.14);
    --suite-bg: #edf2f7;
    --suite-bg-alt: #e7edf5;
    --suite-surface: #ffffff;
    --suite-surface-soft: #f5f8fc;
    --suite-line: #d6dfe9;
    --suite-line-strong: #bfccd9;
    --suite-text: #172b3d;
    --suite-muted: #64778c;
    --suite-accent: #1f6bbd;
    --suite-accent-soft: rgba(31, 107, 189, 0.12);
    --suite-shadow: 0 18px 42px rgba(20, 36, 56, 0.08);
    --suite-radius-xl: 24px;
    --suite-radius-lg: 18px;
    --suite-radius-md: 14px;
    --suite-radius-sm: 10px;
}

body.cx-app-page,
body.cx-shell-page,
body[data-tracking-surface="cms"],
body[data-tracking-surface="super-admin"],
body[data-tracking-surface$="-portal"] {
    background:
        radial-gradient(circle at top left, rgba(31, 107, 189, 0.12), transparent 22%),
        linear-gradient(180deg, #f4f7fb 0%, var(--suite-bg) 100%);
    color: var(--suite-text);
}

body.cx-shell-page,
body.cx-app-page {
    --cx-bg: var(--suite-bg);
    --cx-panel: var(--suite-surface);
    --cx-panel-strong: var(--suite-surface-soft);
    --cx-border: var(--suite-line);
    --cx-text: var(--suite-text);
    --cx-muted: var(--suite-muted);
    --cx-accent: var(--suite-accent);
    --cx-accent-soft: var(--suite-accent-soft);
    --cx-teal: #287448;
    --cx-green: #287448;
    --cx-red: #c53a2f;
    --cx-shadow: var(--suite-shadow);
    --cx-heading-font: "IBM Plex Sans", "Segoe UI", sans-serif;
    --cx-body-font: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.cx-sidebar,
.cms-sidebar,
.portal-sidebar,
.super-admin-sidebar {
    background: linear-gradient(180deg, var(--suite-sidebar) 0%, var(--suite-sidebar-alt) 100%);
    border-right: 1px solid var(--suite-sidebar-line);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
    color: #f4f8fd;
}

.cx-sidebar h1,
.cx-sidebar p,
.cx-sidebar button,
.cms-sidebar strong,
.cms-sidebar span,
.portal-sidebar strong,
.portal-sidebar span,
.super-admin-sidebar strong,
.super-admin-sidebar span {
    color: inherit;
}

.cx-main,
.cms-main,
.portal-content,
.super-admin-main {
    background:
        radial-gradient(circle at top right, rgba(31, 107, 189, 0.08), transparent 20%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(231, 237, 245, 0.24));
}

.cx-panel,
.cx-topbar-card,
.cx-kpi-card,
.cx-suite-card,
.panel-card,
.portal-shell,
.portal-panel,
.portal-metric,
.portal-login-card,
.super-admin-panel,
.super-admin-stat,
.tenant-card,
.tenant-metric {
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(245,248,252,0.99)) !important;
    border: 1px solid var(--suite-line) !important;
    box-shadow: var(--suite-shadow) !important;
    color: var(--suite-text) !important;
}

.cx-panel h3,
.cx-panel h4,
.cx-topbar h2,
.cx-page-heading h3,
.portal-shell h1,
.portal-panel h3,
.portal-login-card h1,
.portal-login-card h2,
.super-admin-panel h1,
.super-admin-panel h2,
.super-admin-panel h3,
.tenant-card h3 {
    color: var(--suite-text) !important;
}

.cx-panel p,
.cx-list-item span,
.cx-row-card span,
.cx-kpi-meta,
.portal-shell p,
.portal-panel p,
.super-admin-panel p,
.tenant-card p,
.tenant-metric span,
.super-admin-stat span {
    color: var(--suite-muted) !important;
}

.cx-nav button.is-active,
.sidebar-link.is-active,
.managed-page-item.is-active,
.portal-tab-btn.active {
    background: linear-gradient(135deg, rgba(31, 107, 189, 0.2), rgba(78, 162, 255, 0.18)) !important;
    border-color: rgba(31, 107, 189, 0.28) !important;
    color: #ffffff !important;
}

.cx-primary-btn,
.button.button-primary,
.portal-login-btn,
.super-admin-button-primary,
.suite-button-primary {
    background: linear-gradient(135deg, #1f6bbd, #3d86d7) !important;
    color: #ffffff !important;
    border: 0 !important;
}

.cx-secondary-btn,
.button.button-secondary,
.super-admin-button-secondary,
.suite-button-secondary {
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--suite-text) !important;
    border: 1px solid var(--suite-line) !important;
}

.cx-form-grid input,
.cx-form-grid textarea,
.cx-form-grid select,
.cx-form-stack input,
.portal-form-group input,
.portal-form-group select,
.portal-form-group textarea,
.page-selector select,
.page-selector input,
.header-search input,
.super-admin-form input,
.super-admin-form select,
.super-admin-form textarea {
    background: #ffffff !important;
    border-color: var(--suite-line-strong) !important;
    color: var(--suite-text) !important;
}

.portal-login-card,
.portal-shell,
.super-admin-panel {
    border-radius: var(--suite-radius-xl) !important;
}

.tenant-tag,
.portal-chip,
.cx-pill {
    border-radius: 999px !important;
}

@media (max-width: 1080px) {
    .cx-app-shell,
    .cms-shell {
        grid-template-columns: 1fr;
    }
}