:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    --bg: #eef4ff;
    --bg-radial: rgba(59, 130, 246, 0.14);
    --bg-gradient: linear-gradient(180deg, #f6f9ff 0%, #edf4ff 46%, #f9fbff 100%);

    --surface: rgba(255, 255, 255, 0.9);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: #f4f8ff;
    --surface-tint: #eef4ff;
    --surface-contrast: #dbe7fb;
    --surface-elevated: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 245, 255, 0.84));
    --surface-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(239, 246, 255, 0.62));
    --surface-card: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(240, 247, 255, 0.7));
    --surface-card-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(236, 244, 255, 0.78));
    --surface-card-soft: linear-gradient(180deg, rgba(250, 252, 255, 0.9), rgba(241, 247, 255, 0.74));
    --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(234, 243, 255, 0.6));
    --surface-row: #f8fbff;
    --surface-selected: #edf4ff;
    --surface-selected-strong: #e4efff;
    --surface-accent: rgba(56, 189, 248, 0.1);
    --surface-brand: #f7faff;
    --surface-brand-soft: rgba(37, 99, 235, 0.12);
    --surface-overlay: rgba(255, 255, 255, 0.76);
    --surface-overlay-strong: rgba(255, 255, 255, 0.88);
    --surface-overlay-soft: rgba(255, 255, 255, 0.64);

    --surface-info-soft: #eaf2ff;
    --surface-success-soft: #eaf8ef;
    --surface-warning-soft: #fff7e6;
    --surface-danger-soft: #fff0ee;
    --surface-neutral-soft: #f3f6fa;

    --surface-dark: linear-gradient(145deg, rgba(6, 18, 46, 0.92), rgba(15, 43, 92, 0.82));
    --surface-dark-strong: linear-gradient(135deg, #06122e 0%, #0e2a60 58%, #153c86 100%);
    --surface-dark-soft: rgba(8, 21, 49, 0.58);
    --surface-dark-panel: rgba(12, 32, 69, 0.48);
    --surface-dark-input: rgba(10, 29, 65, 0.58);
    --surface-dark-input-focus: rgba(11, 34, 78, 0.72);
    --surface-dark-pill: rgba(147, 197, 253, 0.14);
    --surface-dark-button: rgba(255, 255, 255, 0.12);
    --surface-dark-button-hover: rgba(255, 255, 255, 0.18);

    --text: #10203d;
    --text-strong: #0a1730;
    --text-on-dark: #f8fbff;
    --text-on-dark-muted: rgba(226, 234, 246, 0.88);
    --text-on-dark-soft: rgba(226, 234, 246, 0.72);
    --text-on-dark-strong: rgba(239, 246, 255, 0.92);
    --info-on-dark: #dbeafe;
    --success-on-dark: #86efac;
    --warning-on-dark: #fde68a;
    --danger-on-dark: #fca5a5;
    --muted: #556887;
    --muted-soft: #7083a3;

    --primary: #2563eb;
    --primary-dark: #1747b4;
    --accent: #38bdf8;
    --accent-soft: rgba(56, 189, 248, 0.14);
    --info: #1d4ed8;
    --success: #0f766e;
    --warning: #b7791f;
    --danger: #b42318;

    --border: rgba(105, 135, 186, 0.18);
    --border-strong: rgba(105, 135, 186, 0.28);
    --border-on-dark: rgba(191, 219, 254, 0.22);
    --border-on-dark-strong: rgba(191, 219, 254, 0.2);
    --panel-border: rgba(105, 135, 186, 0.18);
    --panel-border-strong: rgba(105, 135, 186, 0.26);

    --shadow: 0 20px 48px rgba(21, 53, 113, 0.14);
    --shadow-soft: 0 10px 26px rgba(21, 53, 113, 0.08);
    --shadow-card: 0 18px 40px rgba(21, 53, 113, 0.1);
    --shadow-glow: 0 24px 54px rgba(7, 20, 52, 0.22);
    --shadow-inverse: 0 28px 70px rgba(0, 0, 0, 0.32);
    --panel-shadow-sm: 0 18px 38px rgba(18, 43, 94, 0.1);
    --panel-shadow-md: 0 24px 48px rgba(18, 43, 94, 0.14);
    --panel-shadow-lg: 0 30px 62px rgba(18, 43, 94, 0.18);

    --radius-lg: 28px;
    --radius-md: 22px;
    --radius-sm: 16px;
    --btn-radius: 18px;
    --btn-radius-sm: 14px;
    --btn-height: 46px;
    --btn-height-sm: 38px;
    --btn-height-icon: 42px;
    --btn-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
    --btn-shadow-hover: 0 18px 34px rgba(37, 99, 235, 0.28);
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
    --focus-ring-success: 0 0 0 2px rgba(52, 211, 153, 0.14);
    --focus-ring-danger: 0 0 0 2px rgba(248, 113, 113, 0.18);

    --input-border: rgba(107, 138, 191, 0.22);
    --input-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(241, 247, 255, 0.72));
    --input-surface-readonly: var(--surface-soft);
    --file-drop-border: rgba(37, 99, 235, 0.24);
    --file-drop-surface: linear-gradient(180deg, rgba(248, 251, 255, 0.88), rgba(255, 255, 255, 0.8));

    --btn-light-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(240, 247, 255, 0.72));
    --btn-secondary-surface: linear-gradient(180deg, rgba(236, 244, 255, 0.86), rgba(226, 238, 255, 0.74));
    --btn-warning-surface: linear-gradient(135deg, #d4a314, #bb7d03);
    --btn-warning-shadow: 0 14px 28px rgba(187, 125, 3, 0.18);

    --theme-active-surface: #e8f1ff;
    --theme-active-border: rgba(37, 99, 235, 0.28);
    --theme-accent-surface: rgba(56, 189, 248, 0.12);
    --theme-row-surface: #f6faff;
    --theme-divider: rgba(96, 165, 250, 0.34);

    --hero-gradient: linear-gradient(135deg, #05132f 0%, #0d2a61 58%, #15428b 100%);
    --hero-radial-a: rgba(96, 165, 250, 0.18);
    --hero-radial-b: rgba(34, 211, 238, 0.16);
    --hero-overlay:
        linear-gradient(120deg, rgba(255, 255, 255, 0.05), transparent 38%),
        linear-gradient(180deg, rgba(7, 20, 52, 0.18), rgba(7, 20, 52, 0));
    --hero-accent-gradient: linear-gradient(135deg, #0a1e46, #133b7f);

    --cta-gradient: linear-gradient(90deg, #2563eb, #38bdf8);
    --cta-shadow: 0 18px 48px rgba(37, 99, 235, 0.28);
    --cta-shadow-hover: 0 20px 58px rgba(37, 99, 235, 0.34);

    --topbar: rgba(255, 255, 255, 0.78);
    --topbar-shadow: 0 18px 34px rgba(18, 43, 94, 0.08);
    --glass-blur: 20px;
    --glass-saturation: 145%;
    --glass-shadow: 0 24px 58px rgba(17, 46, 109, 0.18);
    --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
    --reading-width: 64ch;
}

html[data-theme="slate"] {
    --bg: #eef4ff;
    --bg-radial: rgba(59, 130, 246, 0.14);
    --bg-gradient: linear-gradient(180deg, #f6f9ff 0%, #edf4ff 46%, #f9fbff 100%);
    --surface-soft: #f4f8ff;
    --surface-tint: #eef4ff;
    --surface-contrast: #dbe7fb;
    --text: #10203d;
    --text-strong: #0a1730;
    --muted: #556887;
    --muted-soft: #7083a3;
    --primary: #2563eb;
    --primary-dark: #1747b4;
    --accent: #38bdf8;
    --accent-soft: rgba(56, 189, 248, 0.14);
    --border: rgba(105, 135, 186, 0.18);
    --border-strong: rgba(105, 135, 186, 0.28);
    --panel-border: rgba(105, 135, 186, 0.18);
    --panel-border-strong: rgba(105, 135, 186, 0.26);
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
    --btn-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
    --btn-shadow-hover: 0 18px 34px rgba(37, 99, 235, 0.28);
    --theme-active-surface: #e8f1ff;
    --theme-active-border: rgba(37, 99, 235, 0.28);
    --theme-accent-surface: rgba(56, 189, 248, 0.12);
    --theme-row-surface: #f6faff;
    --theme-divider: rgba(96, 165, 250, 0.34);
    --hero-gradient: linear-gradient(135deg, #05132f 0%, #0d2a61 58%, #15428b 100%);
    --hero-radial-a: rgba(96, 165, 250, 0.18);
    --hero-radial-b: rgba(34, 211, 238, 0.16);
    --hero-accent-gradient: linear-gradient(135deg, #0a1e46, #133b7f);
    --cta-gradient: linear-gradient(90deg, #2563eb, #38bdf8);
    --cta-shadow: 0 18px 48px rgba(37, 99, 235, 0.28);
    --cta-shadow-hover: 0 20px 58px rgba(37, 99, 235, 0.34);
}

html[data-theme="ocean"] {
    --bg: #edf8ff;
    --bg-radial: rgba(20, 145, 155, 0.16);
    --bg-gradient: linear-gradient(180deg, #f4fbff 0%, #ecf8ff 48%, #f8fdff 100%);
    --surface-soft: #effaff;
    --surface-tint: #e7f6ff;
    --surface-contrast: #d6edf8;
    --text: #10243e;
    --text-strong: #0a182e;
    --muted: #4f6782;
    --muted-soft: #6f85a1;
    --primary: #1770d4;
    --primary-dark: #0d56a9;
    --accent: #22d3ee;
    --accent-soft: rgba(34, 211, 238, 0.14);
    --border: rgba(77, 122, 167, 0.18);
    --border-strong: rgba(77, 122, 167, 0.28);
    --panel-border: rgba(77, 122, 167, 0.18);
    --panel-border-strong: rgba(77, 122, 167, 0.26);
    --focus-ring: 0 0 0 3px rgba(23, 112, 212, 0.2);
    --btn-shadow: 0 14px 28px rgba(23, 112, 212, 0.22);
    --btn-shadow-hover: 0 18px 34px rgba(23, 112, 212, 0.28);
    --theme-active-surface: #e5f6ff;
    --theme-active-border: rgba(23, 112, 212, 0.28);
    --theme-accent-surface: rgba(34, 211, 238, 0.14);
    --theme-row-surface: #f3fbff;
    --theme-divider: rgba(34, 211, 238, 0.28);
    --hero-gradient: linear-gradient(135deg, #06172f 0%, #0b3a75 56%, #0d5a86 100%);
    --hero-radial-a: rgba(34, 211, 238, 0.18);
    --hero-radial-b: rgba(96, 165, 250, 0.16);
    --hero-accent-gradient: linear-gradient(135deg, #0a2b52, #0e5682);
    --cta-gradient: linear-gradient(90deg, #1770d4, #22d3ee);
    --cta-shadow: 0 18px 48px rgba(23, 112, 212, 0.28);
    --cta-shadow-hover: 0 20px 58px rgba(23, 112, 212, 0.34);
}

html[data-theme="sunset"] {
    --bg: #f7f4ff;
    --bg-radial: rgba(245, 158, 11, 0.14);
    --bg-gradient: linear-gradient(180deg, #faf8ff 0%, #f4f4ff 48%, #fffdfa 100%);
    --surface-soft: #f8f6ff;
    --surface-tint: #f2efff;
    --surface-contrast: #e6defa;
    --text: #1b2140;
    --text-strong: #10162f;
    --muted: #66658a;
    --muted-soft: #827fa1;
    --primary: #375ff5;
    --primary-dark: #233ead;
    --accent: #f59e0b;
    --accent-soft: rgba(245, 158, 11, 0.14);
    --border: rgba(115, 115, 177, 0.18);
    --border-strong: rgba(115, 115, 177, 0.28);
    --panel-border: rgba(115, 115, 177, 0.18);
    --panel-border-strong: rgba(115, 115, 177, 0.26);
    --focus-ring: 0 0 0 3px rgba(55, 95, 245, 0.2);
    --btn-shadow: 0 14px 28px rgba(55, 95, 245, 0.22);
    --btn-shadow-hover: 0 18px 34px rgba(55, 95, 245, 0.28);
    --theme-active-surface: #eeefff;
    --theme-active-border: rgba(55, 95, 245, 0.28);
    --theme-accent-surface: rgba(245, 158, 11, 0.12);
    --theme-row-surface: #faf8ff;
    --theme-divider: rgba(245, 158, 11, 0.28);
    --hero-gradient: linear-gradient(135deg, #11142f 0%, #25378c 58%, #4b53b4 100%);
    --hero-radial-a: rgba(245, 158, 11, 0.18);
    --hero-radial-b: rgba(96, 165, 250, 0.16);
    --hero-accent-gradient: linear-gradient(135deg, #1d2452, #3d4cad);
    --cta-gradient: linear-gradient(90deg, #375ff5, #f59e0b);
    --cta-shadow: 0 18px 48px rgba(55, 95, 245, 0.28);
    --cta-shadow-hover: 0 20px 58px rgba(55, 95, 245, 0.34);
}

html[data-theme="forest"] {
    --bg: #eef8fa;
    --bg-radial: rgba(16, 185, 129, 0.12);
    --bg-gradient: linear-gradient(180deg, #f5fbfd 0%, #edf7fb 48%, #f9fdff 100%);
    --surface-soft: #f0f9fb;
    --surface-tint: #e9f6fa;
    --surface-contrast: #d8eaef;
    --text: #10223a;
    --text-strong: #0a172a;
    --muted: #4f6980;
    --muted-soft: #6f879b;
    --primary: #2a63cf;
    --primary-dark: #1745a0;
    --accent: #10b981;
    --accent-soft: rgba(16, 185, 129, 0.14);
    --border: rgba(91, 131, 165, 0.18);
    --border-strong: rgba(91, 131, 165, 0.28);
    --panel-border: rgba(91, 131, 165, 0.18);
    --panel-border-strong: rgba(91, 131, 165, 0.26);
    --focus-ring: 0 0 0 3px rgba(42, 99, 207, 0.2);
    --btn-shadow: 0 14px 28px rgba(42, 99, 207, 0.22);
    --btn-shadow-hover: 0 18px 34px rgba(42, 99, 207, 0.28);
    --theme-active-surface: #e7f6fb;
    --theme-active-border: rgba(42, 99, 207, 0.28);
    --theme-accent-surface: rgba(16, 185, 129, 0.12);
    --theme-row-surface: #f4fbfd;
    --theme-divider: rgba(16, 185, 129, 0.24);
    --hero-gradient: linear-gradient(135deg, #08152d 0%, #13366d 56%, #135a77 100%);
    --hero-radial-a: rgba(16, 185, 129, 0.18);
    --hero-radial-b: rgba(96, 165, 250, 0.16);
    --hero-accent-gradient: linear-gradient(135deg, #102950, #12617d);
    --cta-gradient: linear-gradient(90deg, #2a63cf, #10b981);
    --cta-shadow: 0 18px 48px rgba(42, 99, 207, 0.28);
    --cta-shadow-hover: 0 20px 58px rgba(42, 99, 207, 0.34);
}

html,
body {
    min-height: 100%;
}

body,
.app-body,
.marketing-body,
.app-body.page-dashboard {
    background:
        radial-gradient(circle at top right, var(--bg-radial), transparent 22%),
        var(--bg-gradient);
}

body {
    font-feature-settings: "liga" 1, "kern" 1;
}

.content-shell {
    display: grid;
    gap: var(--space-5);
    align-content: start;
}

.content-shell > :last-child,
.page-action-panel > :last-child,
.mini-stat > :last-child,
.card > :last-child {
    margin-bottom: 0;
}

.page-shell {
    display: grid;
    gap: var(--space-5);
}

.section-copy,
.muted {
    max-width: var(--reading-width);
}

.text-muted {
    color: var(--muted-soft);
}

.surface-divider {
    border-top: 1px solid var(--panel-border);
}

.is-ui-dimmed {
    opacity: 0.65;
}

.text-info {
    color: var(--info) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-danger {
    color: var(--danger) !important;
}

@supports (content-visibility: auto) {
    .perf-deferred-section {
        content-visibility: auto;
        contain-intrinsic-size: 1px 760px;
    }

    .perf-deferred-surface {
        content-visibility: auto;
        contain-intrinsic-size: 1px 560px;
    }
}

@media (max-width: 960px) {
    .content-shell,
    .page-shell {
        gap: var(--space-4);
    }
}

@media (max-width: 640px) {
    :root {
        --space-5: 18px;
        --space-6: 22px;
    }
}