:root {
    --modern-accent:#2563eb;
    --modern-accent-strong:#1d4ed8;
    --modern-surface:#ffffff;
    --modern-surface-muted:#f5f7fb;
    --modern-text:#172033;
    --modern-muted:#667085;
    --modern-line:#e4e7ec;
}

/* Shared building blocks for every modern Insight page. */
.modern-page { min-height:100vh; color:var(--modern-text); background:var(--modern-surface-muted); font-family:Inter,"Segoe UI",Arial,sans-serif; }
.modern-container { width:min(1280px,100%); margin-inline:auto; padding:32px 24px 48px; }
.modern-surface,.modern-card,.modern-toolbar { color:var(--modern-text); background:var(--modern-surface); border:1px solid var(--modern-line); }
.modern-card { border-radius:14px; box-shadow:0 5px 18px rgba(16,24,40,.05); overflow:hidden; }
.modern-toolbar { padding:13px 16px; border-radius:12px; }
.modern-heading { color:var(--modern-text); letter-spacing:-.02em; }
.modern-muted { color:var(--modern-muted); }
.modern-input { color:var(--modern-text); background:var(--modern-surface); border:1px solid var(--modern-line); border-radius:8px; }
.modern-button { padding:9px 13px; color:var(--modern-text); background:var(--modern-surface); border:1px solid var(--modern-line); border-radius:9px; cursor:pointer; font:inherit; font-weight:600; }
.modern-button--primary { color:#fff; background:var(--modern-accent); border-color:var(--modern-accent); }
.modern-button--primary:hover { background:var(--modern-accent-strong); }
.modern-link { color:var(--modern-accent); }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid color-mix(in srgb,var(--modern-accent) 35%,transparent); outline-offset:2px; }

/* Existing modern pages inherit the same primitives during migration. */
body { color:var(--modern-text); background:var(--modern-surface-muted); }
:where(.card,.dashboard-toolbar,.picker,.create-dialog,.login-shell,.login-form-panel) { color:var(--modern-text); background:var(--modern-surface); border-color:var(--modern-line); }
:where(.dashboard-select,.location-filter,.create-input) { color:var(--modern-text); background:var(--modern-surface); border-color:var(--modern-line); }
:where(.subtitle,.muted,.dashboard-source,.dashboard-empty-label,.save-status) { color:var(--modern-muted); }
html[data-accent="teal"] { --modern-accent:#0f766e; --modern-accent-strong:#115e59; }
html[data-accent="purple"] { --modern-accent:#7c3aed; --modern-accent-strong:#6d28d9; }
html[data-accent="green"] { --modern-accent:#16803c; --modern-accent-strong:#166534; }
html[data-accent="amber"] { --modern-accent:#b45309; --modern-accent-strong:#92400e; }
html[data-accent="red"] { --modern-accent:#dd273f; --modern-accent-strong:#b91f34; }
html[data-theme="dark"] {
    color-scheme:dark;
    --modern-surface:#172033;
    --modern-surface-muted:#0f172a;
    --modern-text:#eef2ff;
    --modern-muted:#aab4c5;
    --modern-line:#344054;
}
html:has(select[data-theme-mode] option[value="dark"]:checked) {
    color-scheme:dark;
    --modern-surface:#172033;
    --modern-surface-muted:#0f172a;
    --modern-text:#eef2ff;
    --modern-muted:#aab4c5;
    --modern-line:#344054;
}
html:has(select[data-theme-mode] option[value="dark"]:checked) body { background:var(--modern-surface-muted) !important; color:var(--modern-text) !important; }
html:has(select[data-theme-mode] option[value="dark"]:checked) .data-table th { color:var(--modern-muted) !important; background:#202b3d !important; }
html:has(select[data-theme-mode] option[value="dark"]:checked) .data-table td { border-color:var(--modern-line) !important; }
html:has(select[data-theme-mode] option[value="dark"]:checked) .track { background:#344054 !important; }
html[data-theme="dark"] body { background:var(--modern-surface-muted) !important; color:var(--modern-text) !important; }
html[data-theme="dark"] .login-modern-page { background:radial-gradient(circle at 12% 15%,#172554 0,transparent 28%),radial-gradient(circle at 86% 88%,#312e81 0,transparent 25%),var(--modern-surface-muted) !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .dashboard-toolbar,
html[data-theme="dark"] .picker,
html[data-theme="dark"] .create-dialog,
html[data-theme="dark"] .login-shell,
html[data-theme="dark"] .login-form-panel { color:var(--modern-text) !important; background:var(--modern-surface) !important; border-color:var(--modern-line) !important; }
html[data-theme="dark"] .card-head,
html[data-theme="dark"] .vendor-attribution { border-color:var(--modern-line) !important; }
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .dashboard-source,
html[data-theme="dark"] .dashboard-empty-label,
html[data-theme="dark"] .save-status,
html[data-theme="dark"] .login-intro,
html[data-theme="dark"] .secure-note,
html[data-theme="dark"] .catalog-item span,
html[data-theme="dark"] .create-dialog p { color:var(--modern-muted) !important; }
html[data-theme="dark"] .login-form-wrap h2,
html[data-theme="dark"] .field-label,
html[data-theme="dark"] .catalog-item,
html[data-theme="dark"] .identity dd { color:var(--modern-text) !important; }
html[data-theme="dark"] .data-table th { color:var(--modern-muted) !important; background:#202b3d !important; }
html[data-theme="dark"] .data-table td { border-color:var(--modern-line) !important; }
html[data-theme="dark"] .track { background:#344054 !important; }
html[data-theme="dark"] .dashboard-select,
html[data-theme="dark"] .location-filter,
html[data-theme="dark"] .create-input,
html[data-theme="dark"] .theme-select,
html[data-theme="dark"] .RadInput input { color:var(--modern-text) !important; background:#202b3d !important; border-color:#475467 !important; }
.button.primary,.login-modern-button { background:var(--modern-accent) !important; border-color:var(--modern-accent) !important; }
.button.primary:hover,.login-modern-button:hover { background:var(--modern-accent-strong) !important; }
.fill { background:linear-gradient(90deg,var(--modern-accent),color-mix(in srgb,var(--modern-accent) 55%,white)) !important; }
.theme-controls { display:flex; align-items:center; gap:7px; }
.theme-select { height:34px; padding:5px 26px 5px 8px; color:var(--modern-text); background:var(--modern-surface); border:1px solid var(--modern-line); border-radius:8px; font-size:12px; }
.topbar .theme-select { color:#172033; background:#fff; border-color:#d0d5dd; }
.topbar .theme-select option { color:#172033; background:#fff; }
html[data-theme="dark"] .topbar .theme-select { color:#eef2ff; background:#202b3d; border-color:#475467; }
html[data-theme="dark"] .topbar .theme-select option { color:#eef2ff; background:#202b3d; }
html:has(select[data-theme-mode] option[value="dark"]:checked) .topbar .theme-select { color:#eef2ff; background:#202b3d; border-color:#475467; }
html:has(select[data-theme-mode] option[value="dark"]:checked) .topbar .theme-select option { color:#eef2ff; background:#202b3d; }
.refresh-dashlet { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; color:var(--modern-muted); background:transparent; border:1px solid transparent; border-radius:7px; cursor:pointer; font-size:17px; line-height:1; }
.refresh-dashlet:hover { color:var(--modern-accent); background:color-mix(in srgb,var(--modern-accent) 10%,transparent); }
.refresh-dashlet.refreshing { animation:modern-spin .75s linear infinite; }
@keyframes modern-spin { to { transform:rotate(360deg); } }