/* ==========================================================================
   SayIntentions Pilot Portal: Apple HIG appearance (light + dark)

   Loaded after every other stylesheet. theme.js sets
   <html data-theme="light|dark" data-bs-theme="light|dark"> before first paint.

   1. Tokens: Apple Human Interface Guidelines semantic colors
   2. Legacy variables from dark-theme.css, pointed at the tokens
   3. Bootstrap 5.3 variables
   4. Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root[data-theme] {
    --hig-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hig-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hig-font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    --hig-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --hig-radius-sm: 6px;
    --hig-radius: 10px;
    --hig-radius-lg: 14px;
    --hig-hairline: 0.5px;
}

:root[data-theme="light"] {
    color-scheme: light;

    --hig-bg: #F2F2F7;            /* systemGroupedBackground */
    --hig-bg2: #FFFFFF;           /* secondarySystemGroupedBackground */
    --hig-bg3: #F2F2F7;           /* tertiarySystemGroupedBackground */
    --hig-elevated: #FFFFFF;      /* sheets, menus, popovers */

    --hig-label: #000000;
    --hig-label2: rgba(60, 60, 67, 0.60);
    --hig-label3: rgba(60, 60, 67, 0.30);
    --hig-label4: rgba(60, 60, 67, 0.18);

    --hig-separator: rgba(60, 60, 67, 0.29);
    --hig-separator-opaque: #C6C6C8;

    --hig-fill: rgba(120, 120, 128, 0.20);
    --hig-fill2: rgba(120, 120, 128, 0.16);
    --hig-fill3: rgba(118, 118, 128, 0.12);
    --hig-fill4: rgba(116, 116, 128, 0.08);

    --hig-blue: #007AFF;   --hig-blue-text: #0040DD;
    --hig-green: #34C759;  --hig-green-text: #248A3D;
    --hig-indigo: #5856D6; --hig-indigo-text: #3634A3;
    --hig-orange: #FF9500; --hig-orange-text: #C93400;
    --hig-pink: #FF2D55;   --hig-pink-text: #D30F45;
    --hig-purple: #AF52DE; --hig-purple-text: #8944AB;
    --hig-red: #FF3B30;    --hig-red-text: #D70015;
    --hig-teal: #30B0C7;   --hig-teal-text: #008299;
    --hig-yellow: #FFCC00; --hig-yellow-text: #B25000;
    --hig-mint: #00C7BE;
    --hig-cyan: #32ADE6;
    --hig-brown: #A2845E;
    --hig-gray: #8E8E93;   --hig-gray-text: #6C6C70;
    --hig-gold: #B8892A;   --hig-gold-text: #7A5608;

    --hig-material: rgba(236, 236, 240, 0.82);   /* sidebar */
    --hig-toolbar: rgba(255, 255, 255, 0.82);    /* top bar */
    --hig-row-alt: rgba(0, 0, 0, 0.028);
    --hig-seg-selected: #FFFFFF;
    --hig-control: #FFFFFF;                      /* push buttons */
    --hig-control-line: rgba(0, 0, 0, 0.14);
    --hig-control-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.16);
    --hig-field: #FFFFFF;
    --hig-field-line: rgba(0, 0, 0, 0.16);
    --hig-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    --hig-menu-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 30px rgba(0, 0, 0, 0.16);
    --hig-scrim: rgba(0, 0, 0, 0.30);
    --hig-knob-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --hig-bg: #000000;
    --hig-bg2: #1C1C1E;
    --hig-bg3: #2C2C2E;
    --hig-elevated: #2C2C2E;

    --hig-label: #FFFFFF;
    --hig-label2: rgba(235, 235, 245, 0.60);
    --hig-label3: rgba(235, 235, 245, 0.30);
    --hig-label4: rgba(235, 235, 245, 0.16);

    --hig-separator: rgba(84, 84, 88, 0.60);
    --hig-separator-opaque: #38383A;

    --hig-fill: rgba(120, 120, 128, 0.36);
    --hig-fill2: rgba(120, 120, 128, 0.32);
    --hig-fill3: rgba(118, 118, 128, 0.24);
    --hig-fill4: rgba(116, 116, 128, 0.18);

    --hig-blue: #0A84FF;   --hig-blue-text: #409CFF;
    --hig-green: #30D158;  --hig-green-text: #30DB5B;
    --hig-indigo: #5E5CE6; --hig-indigo-text: #7D7AFF;
    --hig-orange: #FF9F0A; --hig-orange-text: #FFB340;
    --hig-pink: #FF375F;   --hig-pink-text: #FF6482;
    --hig-purple: #BF5AF2; --hig-purple-text: #DA8FFF;
    --hig-red: #FF453A;    --hig-red-text: #FF6961;
    --hig-teal: #40C8E0;   --hig-teal-text: #5DE6FF;
    --hig-yellow: #FFD60A; --hig-yellow-text: #FFD426;
    --hig-mint: #63E6E2;
    --hig-cyan: #64D2FF;
    --hig-brown: #AC8E68;
    --hig-gray: #8E8E93;   --hig-gray-text: #AEAEB2;
    --hig-gold: #B8892A;   --hig-gold-text: #E8C46A;

    --hig-material: rgba(34, 34, 36, 0.82);
    --hig-toolbar: rgba(28, 28, 30, 0.82);
    --hig-row-alt: rgba(255, 255, 255, 0.035);
    --hig-seg-selected: #636366;
    --hig-control: #48484A;
    --hig-control-line: rgba(255, 255, 255, 0.06);
    --hig-control-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.4);
    --hig-field: #1C1C1E;
    --hig-field-line: rgba(255, 255, 255, 0.16);
    --hig-card-shadow: none;
    --hig-menu-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.10), 0 10px 30px rgba(0, 0, 0, 0.5);
    --hig-scrim: rgba(0, 0, 0, 0.55);
    --hig-knob-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* The portal's accent (tint), per Brian 2026-10-01 (blue before, indigo before that):
   deep gold from the logo (#E0B650 deepened) in the dark appearance, graphite in the light
   one (the light override below). Change these lines, and the Bootstrap rgb triplets in
   section 3, to re-tint the portal. Text on a tint fill uses --hig-on-tint: on gold the dark
   ink (~6.6:1, white is ~3:1); on graphite white (~4.7:1 on #737378; system gray #8E8E93
   would only give ~3.3:1). */
:root[data-theme] {
    --hig-tint: var(--hig-gold);
    --hig-tint-text: var(--hig-gold-text);
    --hig-on-tint: #1C1400;
    --hig-tint-soft: color-mix(in srgb, var(--hig-tint) 15%, transparent);
    --hig-tint-hover: color-mix(in srgb, var(--hig-tint) 88%, #000);
    /* Filled green buttons: system green is too light for white text (2.2:1). */
    --hig-green-strong: #248A3D;
    --hig-focus: color-mix(in srgb, var(--hig-tint) 40%, transparent);
}
:root[data-theme="light"] {
    --hig-tint: #737378;
    --hig-tint-text: var(--hig-gray-text);
    --hig-on-tint: #fff;
}

/* --------------------------------------------------------------------------
   2. Legacy variables (dark-theme.css :root), pointed at the tokens
   -------------------------------------------------------------------------- */
:root[data-theme] {
    --primary-blue: var(--hig-material);
    --secondary-blue: var(--hig-material);
    --accent-blue: var(--hig-tint);
    --si-yellow: var(--hig-tint);
    --si-yellow-light: var(--hig-tint);
    --si-yellow-dark: var(--hig-tint-hover);
    --si-blue: #FFFFFF;
    --success-green: var(--hig-green);
    --success-dark: var(--hig-green-text);
    --error-red: var(--hig-red);
    --warning-orange: var(--hig-orange);

    --bg-primary: var(--hig-bg);
    --bg-secondary: var(--hig-bg2);
    --bg-tertiary: var(--hig-bg3);
    --bg-card: var(--hig-bg2);
    --border-color: var(--hig-separator);
    --border-light: var(--hig-separator-opaque);

    --text-primary: var(--hig-label);
    --text-secondary: var(--hig-label2);
    --text-muted: var(--hig-label2);
    --text-light: var(--hig-label2);
    --text-inverse: #FFFFFF;          /* text on tint / colored fills */

    --hover-bg: var(--hig-fill4);
    --active-bg: var(--hig-fill3);
    --focus-ring: var(--hig-focus);
    --focus-outline: 2px solid var(--hig-tint);

    --shadow-sm: var(--hig-card-shadow);
    --shadow-md: var(--hig-card-shadow);
    --shadow-lg: var(--hig-menu-shadow);
}

/* --------------------------------------------------------------------------
   3. Bootstrap 5.3 variables
   -------------------------------------------------------------------------- */
:root[data-theme] {
    --bs-body-font-family: var(--hig-font);
    --bs-body-bg: var(--hig-bg);
    --bs-body-bg-rgb: 242, 242, 247;
    --bs-body-color: var(--hig-label);
    --bs-emphasis-color: var(--hig-label);
    --bs-secondary-color: var(--hig-label2);
    --bs-tertiary-color: var(--hig-label3);
    --bs-secondary-bg: var(--hig-bg3);
    --bs-tertiary-bg: var(--hig-bg3);
    --bs-border-color: var(--hig-separator);
    --bs-border-color-translucent: var(--hig-separator);
    --bs-heading-color: var(--hig-label);
    --bs-link-color: var(--hig-tint-text);
    --bs-link-hover-color: var(--hig-tint-text);
    --bs-link-color-rgb: 108, 108, 112;
    --bs-link-hover-color-rgb: 108, 108, 112;
    --bs-primary: var(--hig-tint);
    --bs-primary-rgb: 115, 115, 120;
    --bs-success: var(--hig-green);
    --bs-success-rgb: 52, 199, 89;
    --bs-danger: var(--hig-red);
    --bs-danger-rgb: 255, 59, 48;
    --bs-warning: var(--hig-orange);
    --bs-warning-rgb: 255, 149, 0;
    --bs-info: var(--hig-blue);
    --bs-info-rgb: 0, 122, 255;
    --bs-secondary: var(--hig-gray);
    --bs-secondary-rgb: 142, 142, 147;
    --bs-dark-rgb: 28, 28, 30;
    --bs-light-rgb: 242, 242, 247;
    --bs-focus-ring-color: var(--hig-focus);
    --bs-border-radius: 8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 12px;
}
:root[data-theme="dark"] {
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-link-color-rgb: 232, 196, 106;
    --bs-link-hover-color-rgb: 232, 196, 106;
    --bs-primary-rgb: 184, 137, 42;
    --bs-success-rgb: 48, 209, 88;
    --bs-danger-rgb: 255, 69, 58;
    --bs-warning-rgb: 255, 159, 10;
    --bs-info-rgb: 10, 132, 255;
    --bs-dark-rgb: 28, 28, 30;
    --bs-light-rgb: 44, 44, 46;
}

/* --------------------------------------------------------------------------
   4. Components
   -------------------------------------------------------------------------- */
/* ---- 4.1 Base ------------------------------------------------------------ */
:root[data-theme] body,
:root[data-theme] body.dark-theme {
    background-color: var(--hig-bg);
    color: var(--hig-label);
    font-family: var(--hig-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
:root[data-theme] h1, :root[data-theme] h2, :root[data-theme] h3,
:root[data-theme] h4, :root[data-theme] h5, :root[data-theme] h6 {
    color: var(--hig-label);
    font-family: var(--hig-font-display);
    letter-spacing: -0.01em;
}
/* Headings on colored bars (e.g. a .bg-warning card header with .text-dark) take the bar's text color. */
:root[data-theme] :is(.bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .text-dark, .text-white, [class*="text-bg-"]) :is(h1, h2, h3, h4, h5, h6) { color: inherit !important; }
:root[data-theme] ::selection { background: var(--hig-tint-soft); }
:root[data-theme] code,
:root[data-theme] kbd,
:root[data-theme] pre { font-family: var(--hig-font-mono); }
:root[data-theme] code { background-color: var(--hig-fill3) !important; color: var(--hig-label) !important; border-radius: 4px; }
:root[data-theme] hr { border-color: var(--hig-separator); opacity: 1; }
:root[data-theme] .main-content { background-color: var(--hig-bg); }
:root[data-theme] .loading-overlay { background: color-mix(in srgb, var(--hig-bg) 88%, transparent); }

/* Scrollbars: thin and quiet, like macOS overlay scrollbars */
:root[data-theme] { scrollbar-color: var(--hig-fill) transparent; }
:root[data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme] ::-webkit-scrollbar-track { background: transparent; }
:root[data-theme] ::-webkit-scrollbar-thumb { background: var(--hig-fill); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
:root[data-theme] ::-webkit-scrollbar-thumb:hover { background: var(--hig-label3); border: 2px solid transparent; background-clip: padding-box; }

/* Focus: a ring shows where the keyboard is, never what was clicked. dark-theme.css
   rings every focused link, button and [tabindex] element, so a click left a 3px ring
   around the sidebar row, Settings tab or button just clicked (and gave clicked nav
   links a gray fill). Mouse and touch focus now show nothing; keyboard focus keeps
   the ring below. Text fields keep theirs, since they always match :focus-visible. */
:root[data-theme] :is(a, button, .btn, .nav-link, .list-group-item, .dropdown-toggle, [tabindex]):focus:not(:focus-visible) {
    outline: none;
    --focus-ring: transparent;
}
:root[data-theme] .sidebar .nav-link:focus:not(:focus-visible):not(:hover):not(.active) { background-color: transparent; }
:root[data-theme] .form-check-input:focus:not(:focus-visible) { box-shadow: none; }
:root[data-theme] :focus-visible { outline: 3px solid var(--hig-focus); outline-offset: 1px; }

/* ---- 4.2 Top bar ----------------------------------------------------------- */
:root[data-theme] .navbar.bg-dark-custom {
    background: var(--hig-toolbar) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: none;
    border-bottom: var(--hig-hairline) solid var(--hig-separator);
    --bs-navbar-color: var(--hig-label2);
    --bs-navbar-hover-color: var(--hig-label);
    --bs-navbar-active-color: var(--hig-label);
    --bs-navbar-brand-color: var(--hig-label);
    --bs-navbar-brand-hover-color: var(--hig-label);
    --bs-navbar-toggler-border-color: var(--hig-separator);
}
/* Pages with a live map get the opaque bar (Apple's Reduce Transparency look):
   dragging a map repaints under the blurred bar on every frame, which halved the
   frame rate on Flight Explorer (ticket 11770). --hig-bg2 is --hig-toolbar at
   full opacity in both appearances. :has() only re-checks when a map container
   comes or goes, not on every tile Leaflet adds. */
:root[data-theme]:has(.leaflet-container, .maplibregl-map) .navbar.bg-dark-custom {
    background: var(--hig-bg2) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
:root[data-theme="light"] .navbar.bg-dark-custom {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2860, 60, 67, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
:root[data-theme] .navbar-brand { color: var(--hig-label) !important; font-weight: 600; letter-spacing: -0.015em; }
:root[data-theme] .navbar-nav .nav-link {
    color: var(--hig-label2) !important;
    font-weight: 500;
    border-radius: 7px;
}
:root[data-theme] .navbar-nav .nav-link:hover,
:root[data-theme] .navbar-nav .nav-link:focus,
:root[data-theme] .navbar-nav .nav-link.show {
    color: var(--hig-label) !important;
    background-color: var(--hig-fill4);
}
:root[data-theme] .navbar-nav .nav-link.top-nav-crm-link { color: var(--hig-teal-text) !important; }

/* AI Expansion Pack banner: the second row of the top bar (markup in index.html,
   states in app.js updateExpansionPreviewBanner). A quiet tint-washed strip that
   inherits the bar's material, instead of the old gold gradient + shimmer. */
:root[data-theme] .expansion-preview-banner,
:root[data-theme] .expansion-preview-banner:hover {
    /* Bleed edge to edge: cancel the navbar's side padding (dark-theme.css .navbar). */
    flex: 0 0 calc(100% + 2rem * var(--compact-padding, 1));
    width: calc(100% + 2rem * var(--compact-padding, 1));
    margin: 0 calc(-1rem * var(--compact-padding, 1));
    padding: 7px 48px;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1.5;
    color: var(--hig-label);
    background: color-mix(in srgb, var(--hig-tint) 9%, transparent);
    border-top: var(--hig-hairline) solid var(--hig-separator);
    box-shadow: none;
    cursor: default;
    transition: none;
}
:root[data-theme] .expansion-preview-banner:active { transform: none; }
:root[data-theme] .expansion-preview-banner::before { content: none; animation: none; }
:root[data-theme] .expansion-preview-banner__text { color: var(--hig-label); vertical-align: middle; }
:root[data-theme] .expansion-preview-banner__text strong { font-weight: 600; }
:root[data-theme] .expansion-preview-banner__badge {
    background: var(--hig-tint);
    color: var(--hig-on-tint);
    border: 0;
    border-radius: 999px;
    padding: 1px 8px;
    margin-right: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
}
:root[data-theme] .expansion-preview-banner__cta {
    display: inline-block;
    margin-left: 12px;
    padding: 3px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--hig-tint);
    color: var(--hig-on-tint);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}
:root[data-theme] .expansion-preview-banner__cta:hover { filter: brightness(1.08); }
:root[data-theme] .expansion-preview-banner__cta:active { filter: brightness(0.92); }
:root[data-theme] .expansion-preview-banner__dismiss {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hig-label2);
    font-size: 0.8125rem;
    line-height: 24px;
    cursor: pointer;
}
:root[data-theme] .expansion-preview-banner__dismiss:hover { background: var(--hig-fill3); color: var(--hig-label); }
@media (max-width: 576px) {
    :root[data-theme] .expansion-preview-banner,
    :root[data-theme] .expansion-preview-banner:hover { padding: 7px 12px; font-size: 0.8125rem; }
    :root[data-theme] .expansion-preview-banner:has(.expansion-preview-banner__dismiss) { padding-right: 40px; }
    :root[data-theme] .expansion-preview-banner__dismiss { right: 8px; }
}

/* Light/dark switch in the top bar */
:root[data-theme] .si-theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    margin: 0 2px;
    border: 0;
    border-radius: 50% !important;
    background: transparent;
    color: var(--hig-label2) !important;
    font-size: 15px;
    cursor: pointer;
}
:root[data-theme] .si-theme-toggle .si-appearance-icon { width: 18px; height: 18px; }
:root[data-theme] .si-theme-toggle:hover { background: var(--hig-fill3); color: var(--hig-label) !important; }
:root[data-theme] .si-theme-toggle:focus-visible { outline: 3px solid var(--hig-focus); outline-offset: 0; }
:root[data-theme] .si-theme-toggle[aria-expanded="true"] { background: var(--hig-fill3); color: var(--hig-label) !important; }

/* Appearance menu (Light / Dark / Auto) under the top-bar button, checkmark on the current choice */
:root[data-theme] .si-appearance-menu { min-width: 10.5rem; }
:root[data-theme] .si-appearance-menu .dropdown-header { font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.65rem 0.35rem; }
:root[data-theme] .si-appearance-menu .dropdown-item { display: flex; align-items: center; gap: 0.55rem; }
:root[data-theme] .si-appearance-menu .dropdown-item > .si-appearance-icon { width: 1.05em; height: 1.05em; flex: none; color: var(--hig-label2); }
:root[data-theme] .si-appearance-check { margin-left: auto; padding-left: 1.25rem; font-size: 0.8em; color: var(--hig-tint); visibility: hidden; }
:root[data-theme] .si-appearance-menu [aria-checked="true"] .si-appearance-check { visibility: visible; }
:root[data-theme] .si-appearance-menu .dropdown-item:is(:hover, :focus) i { color: #fff; }

/* Menus (Bootstrap dropdowns) */
:root[data-theme] .dropdown-menu {
    --bs-dropdown-bg: var(--hig-elevated);
    --bs-dropdown-color: var(--hig-label);
    --bs-dropdown-link-color: var(--hig-label);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: var(--hig-tint);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--hig-tint);
    --bs-dropdown-divider-bg: var(--hig-separator);
    --bs-dropdown-header-color: var(--hig-label2);
    background-color: var(--hig-elevated);
    border: 0;
    border-radius: 10px;
    padding: 5px;
    box-shadow: var(--hig-menu-shadow) !important;
}
:root[data-theme] .dropdown-item { color: var(--hig-label); border-radius: 6px; padding: 0.3rem 0.65rem; }
:root[data-theme] .dropdown-item:hover,
:root[data-theme] .dropdown-item:focus,
:root[data-theme] .dropdown-item:active,
:root[data-theme] .dropdown-item.active { background-color: var(--hig-tint); color: var(--hig-on-tint); }
:root[data-theme] .dropdown-item:hover i,
:root[data-theme] .dropdown-item:focus i { color: #fff; }
:root[data-theme] .dropdown-divider { border-color: var(--hig-separator); margin: 4px 6px; }
:root[data-theme] .dropdown-header { color: var(--hig-label2); }

/* Sidebar button (sidebar.left) at the top of the sidebar itself: collapses it to
   its icon rail and back. On the rail it sits centered above the icons. */
:root[data-theme] .si-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--hig-label2);
}
:root[data-theme] .si-sidebar-toggle:hover { background-color: var(--hig-fill4); color: var(--hig-label); }
:root[data-theme] .si-sidebar-toggle:active { background-color: var(--hig-fill3); }

/* ---- 4.2b Layout: pages start right under the top bar -------------------------
   index.html hard-codes margin-top:100px for the old, taller bar, and the
   container, sidebar header and #contentArea's fade-in each added ~10-20px more.
   theme.js measures the bar (which includes the Expansion banner when it shows)
   into --hig-bar-h. Standalone and minimal modes keep their own offsets. */
:root[data-theme] body:not(.standalone-mode):not(.minimal-mode) > .container-fluid {
    margin-top: var(--hig-bar-h, 100px) !important;
    padding-top: 0;
}
/* The outer layout row is exactly as wide as the screen. Bootstrap pulls a row outward by half
   its gutter (0.75rem) and relies on the container's side padding to cancel it. dark-theme.css
   shrinks that padding to 0.5rem x --compact-padding below 769px but leaves the row's margins
   alone, so the row stuck out 5px on each side: every page scrolled sideways on phones and
   tablets, with its content hard against the left edge. Above 768px the two happened to be
   equal. Taking both to zero gives the same row at desktop widths and removes the overhang
   below them, whatever either stylesheet does to the gutter later. Minimal mode already
   zeroes its rows and keeps its own 15px padding. */
:root[data-theme] body:not(.minimal-mode) > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
:root[data-theme] body:not(.minimal-mode) > .container-fluid > .layout-row {
    margin-left: 0;
    margin-right: 0;
}
:root[data-theme] .sidebar { min-height: calc(100vh - var(--hig-bar-h, 100px)); }
:root[data-theme] .sidebar-header {
    display: flex;
    justify-content: flex-end;
    padding: 0.45rem 0.5rem 0 !important;
}
:root[data-theme] #contentArea.fade-in { transform: none; }

/* ---- 4.3 Sidebar (source list) --------------------------------------------- */
/* .sidebar also carries .bg-dark-secondary, so out-rank the utility remap below. */
:root[data-theme] .sidebar-container .sidebar,
:root[data-theme] .sidebar-container .sidebar.bg-dark-secondary {
    background: var(--hig-material) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    box-shadow: none;
    border-right: var(--hig-hairline) solid var(--hig-separator);
}
:root[data-theme] .sidebar-header { border-bottom: 0; }
:root[data-theme] .sidebar-nav { padding: 0.5rem 0; }
:root[data-theme] .nav-section { margin-bottom: 0.75rem; }
:root[data-theme] .nav-section-header {
    color: var(--hig-label2);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 0;
    padding: 0.35rem 1.1rem 0.15rem;
    margin-bottom: 0;
}
:root[data-theme] .nav-section-header i { display: none; }
:root[data-theme] .nav-subsection-header { color: var(--hig-label2) !important; }
:root[data-theme] .sidebar .nav-link {
    color: var(--hig-label);
    padding: 0.32rem 0.65rem;
    margin: 1px 0.5rem;
    border-radius: 6px;
    font-size: 0.86rem;
    box-shadow: none;
}
:root[data-theme] .sidebar .nav-link i { color: var(--hig-tint); width: 1.25em; text-align: center; }
:root[data-theme] .sidebar .nav-link:hover { background-color: var(--hig-fill4); color: var(--hig-label); }
:root[data-theme] .sidebar .nav-link.active {
    background-color: var(--hig-tint);
    color: var(--hig-on-tint) !important;
    font-weight: 500;
    box-shadow: none;
}
:root[data-theme] .sidebar .nav-link.active i { color: var(--hig-on-tint) !important; }
:root[data-theme] .si-nav-badge {
    color: var(--hig-tint-text);
    background: var(--hig-tint-soft);
    border-radius: 10px;
    font-weight: 600;
    padding: 0.12em 0.55em;
}
:root[data-theme] .sidebar .nav-link.active .si-nav-badge { color: #fff; background: rgba(255, 255, 255, 0.25); }
/* Change-Log "new" state is set inline by changelog.js (#00ff00). */
:root[data-theme] #nav-changelog.has-new-content,
:root[data-theme] #mobile-nav-changelog.has-new-content { color: var(--hig-green-text) !important; font-weight: 500 !important; }
:root[data-theme] #nav-changelog.has-new-content.active { color: #fff !important; }
:root[data-theme] .new-indicator i { color: var(--hig-green) !important; }
@media (max-width: 991.98px) {
    :root[data-theme] .sidebar { border-bottom: var(--hig-hairline) solid var(--hig-separator); }
}

/* Icon rail: <html data-sidebar="collapsed">, set by theme.js. The Account page
   starts expanded and every other page collapsed; pilots change it with the button
   at the top of the sidebar. On Settings, a split view (portal sidebar, Settings'
   own list, then the options), the collapsed rail leaves Settings' list as the one
   full sidebar on screen. Resting the pointer on
   the rail (or tabbing into it) opens it over the page; theme.js toggles
   .si-rail-open. Row heights and icon positions match the open sidebar, so nothing
   moves when it opens: the rail is just the open sidebar, clipped. */
@media (min-width: 992px) {
    :root[data-theme] .sidebar-container {
        --hig-rail-w: 48px;
        transition: width 0.2s ease;
    }
    :root[data-theme] .sidebar-container .sidebar { transition: width 0.2s ease, box-shadow 0.2s ease; }
    :root[data-theme][data-sidebar="collapsed"] .sidebar-container {
        width: var(--hig-rail-w);
        position: relative;
        z-index: 1015;
    }
    :root[data-theme][data-sidebar="collapsed"] .sidebar-container.si-rail-open .sidebar {
        width: calc(280px * var(--compact-scale, 0.85)) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    }
    :root[data-theme][data-sidebar="collapsed"] .sidebar .nav-link {
        position: relative;
        white-space: nowrap;
        text-overflow: clip;
    }
    /* Labels are hidden by color, not removed, so row heights stay put. :is() with an
       id out-ranks the id rules that color some rows (the Change-Log "new" state). */
    :root[data-theme][data-sidebar="collapsed"] .sidebar-container:not(.si-rail-open) .sidebar .nav-link:is(.nav-link, #nav-changelog) {
        width: calc(var(--hig-rail-w) - 1rem);
        color: transparent !important;
    }
    :root[data-theme][data-sidebar="collapsed"] .sidebar-container:not(.si-rail-open) .sidebar .nav-link.nav-sub-link { padding-left: 0.65rem; }
    /* Group titles become short dividers (the first group needs none). */
    :root[data-theme][data-sidebar="collapsed"] .sidebar-container:not(.si-rail-open) :is(.nav-section-header, .nav-subsection-header) {
        color: transparent !important;
        white-space: nowrap;
        overflow: hidden;
        background: linear-gradient(var(--hig-separator), var(--hig-separator)) no-repeat center / 22px 1px;
    }
    :root[data-theme][data-sidebar="collapsed"] .sidebar-container:not(.si-rail-open) .nav-section:first-child .nav-section-header { background: none; }
    :root[data-theme][data-sidebar="collapsed"] .sidebar-container:not(.si-rail-open) .sidebar-header { justify-content: center; padding: 0.45rem 0 0 !important; }
    /* NEW badges become a dot on the icon. */
    :root[data-theme][data-sidebar="collapsed"] .sidebar-container:not(.si-rail-open) .si-nav-badge {
        position: absolute;
        top: 3px;
        left: 20px;
        width: 7px;
        height: 7px;
        padding: 0;
        font-size: 0;
        border-radius: 50%;
        background: var(--hig-tint);
    }
}
/* Where you are, in each column: the portal sidebar's Settings row is the quiet gray
   selection and Settings' own list carries the accent, as in a split view. */
:root[data-theme] body.page-settings .sidebar .nav-link.active {
    background-color: var(--hig-fill3);
    color: var(--hig-label) !important;
}
:root[data-theme] body.page-settings .sidebar .nav-link.active i { color: var(--hig-tint) !important; }

/* ---- 4.4 Page header: large title ------------------------------------------ */
:root[data-theme] .page-header {
    background: transparent;
    border-bottom: 0;
    padding: 0.15rem 0 0.6rem;
    overflow: visible;
}
:root[data-theme] .page-header::before { display: none; }
:root[data-theme] .page-header-icon { display: none; }
:root[data-theme] .page-header-title {
    font-family: var(--hig-font-display);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--hig-label);
}
:root[data-theme] .page-header-subtitle { color: var(--hig-label2); font-size: 0.92rem; margin-top: 2px; }
:root[data-theme] .page-header-actions .btn,
:root[data-theme] .page-header-actions .btn:hover { box-shadow: var(--hig-control-shadow); }
:root[data-theme] .breadcrumb-custom { background: transparent; border: 0; padding-left: 0; }
:root[data-theme] .breadcrumb-custom .breadcrumb-item,
:root[data-theme] .breadcrumb-custom .breadcrumb-item::before { color: var(--hig-label2); }
:root[data-theme] .breadcrumb-custom .breadcrumb-item a { color: var(--hig-tint-text); }
:root[data-theme] .breadcrumb-custom .breadcrumb-item.active { color: var(--hig-label); }

/* ---- 4.5 Cards: grouped content, no outlines -------------------------------- */
:root[data-theme] .card {
    background-color: var(--hig-bg2);
    color: var(--hig-label);
    border: 0;
    border-radius: var(--hig-radius) !important;
    box-shadow: var(--hig-card-shadow);
}
:root[data-theme] .card:hover { box-shadow: var(--hig-card-shadow); }
:root[data-theme] .card:focus-within { border-color: transparent; }
:root[data-theme] .card-header {
    background-color: transparent;
    color: var(--hig-label);
    border-bottom: var(--hig-hairline) solid var(--hig-separator);
    font-weight: 600;
}
:root[data-theme] .card-header :is(h1, h2, h3, h4, h5, h6) { color: var(--hig-label); font-weight: 600; }
:root[data-theme] .card-body { color: var(--hig-label); }
:root[data-theme] .card-footer { background-color: transparent; border-top: var(--hig-hairline) solid var(--hig-separator); }
/* Settings cards paint their header band inline (#1a3a52 / #2a4a62); the HIG uses a plain title. */
:root[data-theme] .card-header:is([style*="#1a3a52" i], [style*="26,58,82" i], [style*="26, 58, 82" i]) {
    background-color: transparent !important;
    border-bottom: var(--hig-hairline) solid var(--hig-separator) !important;
}
:root[data-theme] .card-header:is([style*="#3a1a1a" i], [style*="#4a1a1a" i]) {
    background-color: color-mix(in srgb, var(--hig-red) 10%, transparent) !important;
    border-bottom: var(--hig-hairline) solid var(--hig-separator) !important;
}
:root[data-theme] .settings-group-icon {
    background: var(--hig-tint) !important;
    border: 0 !important;
    color: var(--hig-on-tint) !important;
    border-radius: 7px !important;
}
:root[data-theme] .settings-group-title { color: var(--hig-label) !important; font-weight: 600; }

/* ---- 4.6 Tables ------------------------------------------------------------- */
:root[data-theme] .table,
:root[data-theme] .table-dark,
:root[data-theme] .table > .table-dark,
:root[data-theme] thead.table-dark {
    --bs-table-color: var(--hig-label);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--hig-separator);
    --bs-table-striped-bg: var(--hig-row-alt);
    --bs-table-striped-color: var(--hig-label);
    --bs-table-hover-bg: var(--hig-fill4);
    --bs-table-hover-color: var(--hig-label);
    --bs-table-active-bg: var(--hig-fill3);
    --bs-table-active-color: var(--hig-label);
    color: var(--hig-label);
    border-color: var(--hig-separator);
    font-variant-numeric: tabular-nums;
}
:root[data-theme] .table-dark,
:root[data-theme] .table-responsive { background-color: transparent !important; box-shadow: none; }
:root[data-theme] .table > :not(caption) > * > * { border-bottom-width: var(--hig-hairline); border-color: var(--hig-separator); }
:root[data-theme] .table thead th,
:root[data-theme] .table-dark th,
:root[data-theme] .table-dark thead th {
    background-color: var(--hig-bg2) !important;
    color: var(--hig-label2) !important;
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: var(--hig-hairline) solid var(--hig-separator);
}
:root[data-theme] .table-dark td,
:root[data-theme] .table-dark tbody tr { color: var(--hig-label); border-color: var(--hig-separator); }
:root[data-theme] .table tbody tr:nth-child(even) > td { background-color: var(--hig-row-alt); }
:root[data-theme] .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--hig-fill4); background-color: var(--hig-fill4); }
:root[data-theme] #flightsTable,
:root[data-theme] #flightsTable tbody tr,
:root[data-theme] #flightsTable tbody td { background-color: transparent; border-color: var(--hig-separator); color: var(--hig-label); }
:root[data-theme] #flightsTable tbody tr:nth-child(even) td { background-color: var(--hig-row-alt); }
:root[data-theme] #flightsTable tbody tr:hover td { background-color: var(--hig-fill4) !important; }
:root[data-theme] .flights-compact-table { --bs-table-border-color: var(--hig-separator); }
:root[data-theme] .flights-compact-table tbody tr > * { border-color: var(--hig-separator) !important; }
:root[data-theme] .flights-compact-table tbody tr:nth-child(even) > * { background-color: var(--hig-row-alt) !important; }
:root[data-theme] .flights-compact-table tbody tr:nth-child(odd) > * { background-color: transparent !important; }
:root[data-theme] .flights-compact-table tbody tr:hover > *,
:root[data-theme] .flights-compact-table tbody tr.flights-row-active > * { background-color: var(--hig-fill4) !important; }
:root[data-theme] th.sortable:hover { background-color: var(--hig-fill4) !important; }

/* ---- 4.7 Buttons -------------------------------------------------------------
   Filled: primary / warning (P2's gold call-to-action) / success / danger.
   Push (macOS): secondary, light, dark and the neutral outlines.
   Tinted: colored outlines and info. */
:root[data-theme] .btn { border-radius: 7px; font-weight: 500; letter-spacing: -0.005em; }
:root[data-theme] .btn-sm { border-radius: 6px; }
:root[data-theme] .btn-lg { border-radius: 10px; }

:root[data-theme] :is(.btn-primary, .btn-warning) { --hig-btn-fill: var(--hig-tint); --hig-btn-fill-hover: var(--hig-tint-hover); --hig-btn-ink: var(--hig-on-tint); }
:root[data-theme] .btn-success { --hig-btn-fill: var(--hig-green-strong); --hig-btn-fill-hover: color-mix(in srgb, var(--hig-green-strong) 88%, #000); }
:root[data-theme] .btn-danger { --hig-btn-fill: var(--hig-red); --hig-btn-fill-hover: color-mix(in srgb, var(--hig-red) 88%, #000); }
:root[data-theme] :is(.btn-primary, .btn-warning, .btn-success, .btn-danger) {
    --bs-btn-color: var(--hig-btn-ink, #fff);
    --bs-btn-bg: var(--hig-btn-fill);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--hig-btn-ink, #fff);
    --bs-btn-hover-bg: var(--hig-btn-fill-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--hig-btn-ink, #fff);
    --bs-btn-active-bg: var(--hig-btn-fill-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--hig-btn-ink, #fff);
    --bs-btn-disabled-bg: var(--hig-btn-fill);
    --bs-btn-disabled-border-color: transparent;
    background-color: var(--hig-btn-fill);
    border-color: transparent;
    color: var(--hig-btn-ink, #fff) !important;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.18);
}
:root[data-theme] :is(.btn-primary, .btn-warning, .btn-success, .btn-danger):is(:hover, :focus-visible, :active, .active) {
    background-color: var(--hig-btn-fill-hover);
    border-color: transparent;
    color: var(--hig-btn-ink, #fff) !important;
}

:root[data-theme] :is(.btn-secondary, .btn-light, .btn-dark, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark) {
    --bs-btn-color: var(--hig-label);
    --bs-btn-bg: var(--hig-control);
    --bs-btn-border-color: var(--hig-control-line);
    --bs-btn-hover-color: var(--hig-label);
    --bs-btn-hover-bg: color-mix(in srgb, var(--hig-control) 92%, var(--hig-label));
    --bs-btn-hover-border-color: var(--hig-control-line);
    --bs-btn-active-color: var(--hig-label);
    --bs-btn-active-bg: color-mix(in srgb, var(--hig-control) 86%, var(--hig-label));
    --bs-btn-active-border-color: var(--hig-control-line);
    --bs-btn-disabled-color: var(--hig-label3);
    --bs-btn-disabled-bg: var(--hig-control);
    --bs-btn-disabled-border-color: var(--hig-control-line);
    background-color: var(--hig-control);
    border: var(--hig-hairline) solid var(--hig-control-line);
    color: var(--hig-label) !important;
    box-shadow: var(--hig-control-shadow);
}
:root[data-theme] :is(.btn-secondary, .btn-light, .btn-dark, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark):is(:hover, :focus-visible) {
    background-color: color-mix(in srgb, var(--hig-control) 92%, var(--hig-label));
    color: var(--hig-label) !important;
    border-color: var(--hig-control-line);
}
:root[data-theme] :is(.btn-secondary, .btn-light, .btn-dark, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark):is(:active, .active) {
    background-color: color-mix(in srgb, var(--hig-control) 86%, var(--hig-label));
    color: var(--hig-label) !important;
}

:root[data-theme] :is(.btn-outline-primary, .btn-outline-warning, .btn-info, .btn-outline-info) { --hig-btn-tint: var(--hig-tint); --hig-btn-tint-text: var(--hig-tint-text); }
:root[data-theme] .btn-outline-success { --hig-btn-tint: var(--hig-green); --hig-btn-tint-text: var(--hig-green-text); }
:root[data-theme] .btn-outline-danger { --hig-btn-tint: var(--hig-red); --hig-btn-tint-text: var(--hig-red-text); }
:root[data-theme] :is(.btn-outline-primary, .btn-outline-warning, .btn-info, .btn-outline-info, .btn-outline-success, .btn-outline-danger) {
    --bs-btn-color: var(--hig-btn-tint-text);
    --bs-btn-bg: color-mix(in srgb, var(--hig-btn-tint) 14%, transparent);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--hig-btn-tint-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--hig-btn-tint) 22%, transparent);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--hig-btn-tint);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--hig-btn-tint-text);
    --bs-btn-disabled-bg: color-mix(in srgb, var(--hig-btn-tint) 10%, transparent);
    --bs-btn-disabled-border-color: transparent;
    background-color: color-mix(in srgb, var(--hig-btn-tint) 14%, transparent);
    border-color: transparent;
    color: var(--hig-btn-tint-text) !important;
    box-shadow: none;
}
:root[data-theme] :is(.btn-outline-primary, .btn-outline-warning, .btn-info, .btn-outline-info, .btn-outline-success, .btn-outline-danger):is(:hover, :focus-visible) {
    background-color: color-mix(in srgb, var(--hig-btn-tint) 22%, transparent);
    border-color: transparent;
    color: var(--hig-btn-tint-text) !important;
}
:root[data-theme] :is(.btn-outline-primary, .btn-outline-warning, .btn-info, .btn-outline-info, .btn-outline-success, .btn-outline-danger):is(:active, .active),
:root[data-theme] .btn-check:checked + :is(.btn-outline-primary, .btn-outline-warning, .btn-outline-info, .btn-outline-success, .btn-outline-danger) {
    background-color: var(--hig-btn-tint);
    color: #fff !important;
}
:root[data-theme] .btn-link { color: var(--hig-tint-text); }
:root[data-theme] .btn:disabled,
:root[data-theme] .btn.disabled { opacity: 0.45; }

/* Close buttons: Bootstrap's X is dark; skynet-styles.css inverts it globally. */
:root[data-theme="light"] .btn-close,
:root[data-theme="light"] .btn-close-white { filter: none !important; }
:root[data-theme="dark"] .btn-close,
:root[data-theme="dark"] .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%) !important; }

/* ---- 4.8 Forms ---------------------------------------------------------------- */
:root[data-theme] :is(.form-control, .form-select) {
    background-color: var(--hig-field);
    color: var(--hig-label);
    border: 1px solid var(--hig-field-line);
    border-radius: 7px;
    box-shadow: none;
}
:root[data-theme] :is(.form-control, .form-select):focus {
    background-color: var(--hig-field);
    color: var(--hig-label);
    border-color: var(--hig-tint);
    box-shadow: 0 0 0 3px var(--hig-focus);
}
:root[data-theme] .form-control::placeholder { color: var(--hig-label3); opacity: 1; }
:root[data-theme] :is(.form-control, .form-select):is(:disabled, [readonly]) { background-color: var(--hig-fill4); color: var(--hig-label2); }
/* Inputs marked bg-dark / text-light / border-secondary by the dark-only templates */
:root[data-theme] :is(input, select, textarea, .form-control, .form-select):is(.bg-dark, .bg-dark-secondary, .bg-secondary) { background-color: var(--hig-field) !important; }
:root[data-theme] :is(input, select, textarea, .form-control, .form-select).border-secondary { border-color: var(--hig-field-line) !important; }
:root[data-theme] .form-label { color: var(--hig-label); font-weight: 500; }
:root[data-theme] .form-text { color: var(--hig-label2); }
:root[data-theme] .input-group-text { background-color: var(--hig-fill3); border-color: var(--hig-field-line); color: var(--hig-label2); }
:root[data-theme] .form-check-input { background-color: var(--hig-field); border-color: var(--hig-field-line); }
:root[data-theme] .form-check-input:checked { background-color: var(--hig-tint); border-color: var(--hig-tint); }
:root[data-theme] .form-check-input:focus { border-color: var(--hig-tint); box-shadow: 0 0 0 3px var(--hig-focus); }
:root[data-theme] .form-switch .form-check-input,
:root[data-theme] .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.3' fill='%23fff'/%3e%3c/svg%3e");
    background-color: var(--hig-fill);
    border-color: transparent;
}
:root[data-theme] .form-switch .form-check-input:checked { background-color: var(--hig-tint); border-color: transparent; }
:root[data-theme] .form-range { accent-color: var(--hig-tint); }
:root[data-theme] .form-range::-webkit-slider-runnable-track { background-color: var(--hig-fill); }
:root[data-theme] .form-range::-moz-range-track { background-color: var(--hig-fill); }
:root[data-theme] .form-range::-webkit-slider-thumb { background-color: #fff; box-shadow: var(--hig-knob-shadow); }
:root[data-theme] .form-range::-moz-range-thumb { background-color: #fff; box-shadow: var(--hig-knob-shadow); }

/* ---- 4.9 Badges: capsules ------------------------------------------------------ */
:root[data-theme] .badge { border-radius: 20px; font-weight: 600; letter-spacing: 0; }
:root[data-theme] .badge:is(.bg-primary, .text-bg-primary) { --hig-cap: var(--hig-tint); --hig-cap-text: var(--hig-tint-text); }
:root[data-theme] .badge:is(.bg-success, .text-bg-success) { --hig-cap: var(--hig-green); --hig-cap-text: var(--hig-green-text); }
:root[data-theme] .badge:is(.bg-warning, .text-bg-warning) { --hig-cap: var(--hig-orange); --hig-cap-text: var(--hig-orange-text); }
:root[data-theme] .badge:is(.bg-info, .text-bg-info) { --hig-cap: var(--hig-blue); --hig-cap-text: var(--hig-blue-text); }
:root[data-theme] .badge:is(.bg-secondary, .text-bg-secondary, .bg-dark, .text-bg-dark, .bg-light, .text-bg-light) { --hig-cap: var(--hig-gray); --hig-cap-text: var(--hig-gray-text); }
:root[data-theme] .badge:is(.bg-primary, .text-bg-primary, .bg-success, .text-bg-success, .bg-warning, .text-bg-warning, .bg-info, .text-bg-info, .bg-secondary, .text-bg-secondary, .bg-dark, .text-bg-dark, .bg-light, .text-bg-light) {
    background-color: color-mix(in srgb, var(--hig-cap) 16%, transparent) !important;
    color: var(--hig-cap-text) !important;
    border: 0 !important;
}
/* Counts and alerts stay solid red, like an app badge. */
:root[data-theme] .badge:is(.bg-danger, .text-bg-danger) { background-color: var(--hig-red) !important; color: #fff !important; border: 0 !important; }

/* ---- 4.10 Alerts ----------------------------------------------------------------- */
:root[data-theme] .alert { border: 0; border-radius: var(--hig-radius); color: var(--hig-label); }
:root[data-theme] .alert :is(p, li, span, div, strong) { color: inherit; }
:root[data-theme] .alert-primary { --hig-alert: var(--hig-tint); }
:root[data-theme] .alert-success { --hig-alert: var(--hig-green); }
:root[data-theme] .alert-danger { --hig-alert: var(--hig-red); }
:root[data-theme] .alert-warning { --hig-alert: var(--hig-orange); }
:root[data-theme] .alert-info { --hig-alert: var(--hig-blue); }
:root[data-theme] :is(.alert-secondary, .alert-dark, .alert-light) { --hig-alert: var(--hig-gray); }
:root[data-theme] :is(.alert-primary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-secondary, .alert-dark, .alert-light) {
    --bs-alert-bg: color-mix(in srgb, var(--hig-alert) 13%, var(--hig-bg2));
    --bs-alert-color: var(--hig-label);
    --bs-alert-border-color: transparent;
    background-color: color-mix(in srgb, var(--hig-alert) 13%, var(--hig-bg2));
    color: var(--hig-label);
    border: 0;
}
:root[data-theme] .alert .alert-link { color: var(--hig-label); }

/* ---- 4.11 Sheets (modals), popovers, tooltips, toasts ------------------------------ */
:root[data-theme] .modal { --bs-modal-bg: var(--hig-elevated); --bs-modal-color: var(--hig-label); --bs-modal-border-color: transparent; --bs-backdrop-bg: #000; }
:root[data-theme="light"] .modal-backdrop { --bs-backdrop-opacity: 0.3; }
:root[data-theme="dark"] .modal-backdrop { --bs-backdrop-opacity: 0.55; }
:root[data-theme] .modal-content,
:root[data-theme] .modal-content.bg-dark {
    background-color: var(--hig-elevated) !important;
    color: var(--hig-label);
    border: 0 !important;
    border-radius: var(--hig-radius-lg);
    box-shadow: var(--hig-menu-shadow);
}
:root[data-theme] .modal-header,
:root[data-theme] .modal-footer { border-color: var(--hig-separator) !important; }
:root[data-theme] .modal-title { font-weight: 600; letter-spacing: -0.01em; }
:root[data-theme] .popover {
    --bs-popover-bg: var(--hig-elevated);
    --bs-popover-border-color: var(--hig-separator);
    --bs-popover-header-bg: var(--hig-bg3);
    --bs-popover-header-color: var(--hig-label);
    --bs-popover-body-color: var(--hig-label);
    box-shadow: var(--hig-menu-shadow);
}
:root[data-theme] .tooltip { --bs-tooltip-bg: var(--hig-elevated); --bs-tooltip-color: var(--hig-label); }
:root[data-theme] .tooltip .tooltip-inner { background-color: var(--hig-elevated); color: var(--hig-label); border: 0; box-shadow: var(--hig-menu-shadow); }
:root[data-theme] .toast { --bs-toast-bg: var(--hig-elevated); --bs-toast-color: var(--hig-label); --bs-toast-header-bg: var(--hig-elevated); --bs-toast-header-color: var(--hig-label2); --bs-toast-border-color: transparent; box-shadow: var(--hig-menu-shadow); border-radius: 12px; }
:root[data-theme] .progress { --bs-progress-bg: var(--hig-fill3); --bs-progress-bar-bg: var(--hig-tint); background-color: var(--hig-fill3); }

/* ---- 4.12 Tabs, pills, accordions, lists, pagination --------------------------- */
:root[data-theme] .nav-tabs { border-bottom: var(--hig-hairline) solid var(--hig-separator); --bs-nav-tabs-border-color: var(--hig-separator); }
:root[data-theme] .nav-tabs .nav-link {
    color: var(--hig-label2);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
:root[data-theme] .nav-tabs .nav-link:hover { color: var(--hig-label); background: transparent; }
:root[data-theme] .nav-tabs .nav-link.active,
:root[data-theme] .nav-tabs .nav-item.show .nav-link {
    color: var(--hig-label);
    background: transparent;
    border-bottom-color: var(--hig-tint);
    font-weight: 600;
}
:root[data-theme] .nav-pills .nav-link { color: var(--hig-label); border-radius: 7px; }
:root[data-theme] .nav-pills .nav-link.active,
:root[data-theme] .nav-pills .show > .nav-link { background-color: var(--hig-tint); color: var(--hig-on-tint); }

:root[data-theme] .accordion {
    --bs-accordion-bg: var(--hig-bg2);
    --bs-accordion-color: var(--hig-label);
    --bs-accordion-border-color: var(--hig-separator);
    --bs-accordion-btn-color: var(--hig-label);
    --bs-accordion-btn-bg: var(--hig-bg2);
    --bs-accordion-active-bg: var(--hig-bg2);
    --bs-accordion-active-color: var(--hig-label);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--hig-focus);
    --bs-accordion-border-radius: var(--hig-radius);
    --bs-accordion-inner-border-radius: var(--hig-radius);
}
:root[data-theme] .accordion-item { background-color: var(--hig-bg2); border-color: var(--hig-separator); }
:root[data-theme] .accordion-button { color: var(--hig-label); }

:root[data-theme] .list-group {
    --bs-list-group-bg: var(--hig-bg2);
    --bs-list-group-color: var(--hig-label);
    --bs-list-group-border-color: var(--hig-separator);
    --bs-list-group-action-color: var(--hig-label);
    --bs-list-group-action-hover-bg: var(--hig-fill4);
    --bs-list-group-action-hover-color: var(--hig-label);
    --bs-list-group-action-active-bg: var(--hig-fill3);
    --bs-list-group-action-active-color: var(--hig-label);
    --bs-list-group-active-bg: var(--hig-tint);
    --bs-list-group-active-border-color: var(--hig-tint);
    --bs-list-group-active-color: #fff;
    --bs-list-group-disabled-color: var(--hig-label3);
}

:root[data-theme] .pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--hig-tint);
    --bs-pagination-border-color: transparent;
    --bs-pagination-hover-bg: var(--hig-fill4);
    --bs-pagination-hover-color: var(--hig-tint);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-bg: var(--hig-fill4);
    --bs-pagination-focus-color: var(--hig-tint);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--hig-focus);
    --bs-pagination-active-bg: var(--hig-tint);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-border-color: var(--hig-tint);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--hig-label2);
    --bs-pagination-disabled-border-color: transparent;
}
:root[data-theme] .page-link { border-radius: 6px !important; margin: 0 1px; }

/* ---- 4.13 Bootstrap "dark" utility classes used across the templates ----------
   The templates were written for a dark-only portal, so they hard-code these
   everywhere (text-light x722, text-muted x807, bg-dark x170 ...). They mean
   "a surface" and "readable text", so they follow the appearance. */
:root[data-theme] :is(.bg-dark, .bg-dark-secondary, .bg-black):not(.badge) { background-color: var(--hig-bg2) !important; }
:root[data-theme] .bg-secondary:not(.badge) { background-color: var(--hig-fill3) !important; }
:root[data-theme] :is(.border-secondary, .border-dark) { border-color: var(--hig-separator) !important; }
:root[data-theme] .border,
:root[data-theme] .border-top,
:root[data-theme] .border-bottom,
:root[data-theme] .border-start,
:root[data-theme] .border-end { --bs-border-color: var(--hig-separator); }
:root[data-theme] :is(.text-muted, .text-secondary, .text-white-50, .text-body-secondary) { color: var(--hig-label2) !important; }
:root[data-theme] :is(.text-light, .text-white, .link-light, .text-body):not(.badge, .btn, .bg-primary, .bg-success, .bg-danger, .bg-info, .bg-warning, [class*="text-bg-"]):not(.badge *, .btn *, .bg-primary *, .bg-success *, .bg-danger *, .bg-info *, .bg-warning *, .sidebar .nav-link.active *, .dropdown-item:hover *) {
    color: var(--hig-label) !important;
}
:root[data-theme] .text-warning { color: var(--hig-orange-text) !important; }
:root[data-theme] .text-info { color: var(--hig-blue-text) !important; }
:root[data-theme] .text-success { color: var(--hig-green-text) !important; }
:root[data-theme] .text-danger { color: var(--hig-red-text) !important; }
:root[data-theme] .text-primary { color: var(--hig-tint-text) !important; }
:root[data-theme] .link-primary { color: var(--hig-tint-text) !important; }

/* ---- 4.14 Settings: search and tab list ---------------------------------------- */
/* Split view: the list column (search, then the grouped tabs) and the options,
   divided by a hairline that runs the full height of the page. No box around
   either; the list scrolls with the page (nothing pinned). */
@media (min-width: 768px) {
    :root[data-theme] .settings-split { flex-wrap: nowrap; }
    :root[data-theme] .settings-split > .settings-split-list {
        flex: 0 0 16rem;
        width: 16rem;
        max-width: 16rem;
        padding-right: 0.75rem;
        border-right: var(--hig-hairline) solid var(--hig-separator);
    }
    :root[data-theme] .settings-split > .settings-split-detail {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
        padding-left: 1.5rem;
    }
}
/* Search sits at the top of the list, as in System Settings: a small field, not a
   banner. Results open as a popover wide enough for their paths and values. */
:root[data-theme] .settings-search-wrap {
    position: relative;
    top: auto;
    z-index: 30;
    margin-bottom: 0.4rem;
    padding-top: 0;
    background-color: transparent;
}
:root[data-theme] .settings-search-box {
    background-color: var(--hig-fill3);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    padding: 0 0.5rem;
}
:root[data-theme] .settings-search-icon { font-size: 0.78rem; margin-right: 0.4rem; }
:root[data-theme] .settings-search-input { font-size: 0.86rem; font-weight: 400; padding: 0.36rem 0; min-width: 0; }
:root[data-theme] .settings-search-kbd { font-size: 0.68rem; padding: 0.12rem 0.38rem; }
:root[data-theme] .settings-search-clear { width: 1.3rem; height: 1.3rem; font-size: 0.75rem; }
:root[data-theme] .settings-search-results {
    right: auto;
    width: max(100%, min(40rem, calc(100vw - 7rem)));
}
:root[data-theme] .settings-search-box:hover { background-color: var(--hig-fill2); }
:root[data-theme] .settings-search-box:focus-within { background-color: var(--hig-field); box-shadow: 0 0 0 3px var(--hig-focus), var(--hig-control-shadow); }
:root[data-theme] .settings-search-icon { color: var(--hig-label2); }
:root[data-theme] .settings-search-input { color: var(--hig-label); }
:root[data-theme] .settings-search-input::placeholder { color: var(--hig-label2); opacity: 1; }
:root[data-theme] .settings-search-kbd { background-color: var(--hig-bg2); color: var(--hig-label2); border: 0; box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.2); }
:root[data-theme] .settings-search-results { background-color: var(--hig-elevated); border: 0; border-radius: 12px; box-shadow: var(--hig-menu-shadow); }
:root[data-theme] .settings-search-item:hover,
:root[data-theme] .settings-search-item.active { background-color: var(--hig-tint); }
:root[data-theme] .settings-search-item:hover :is(.ssr-title, .ssr-path, .ssr-preview, .ssr-value),
:root[data-theme] .settings-search-item.active :is(.ssr-title, .ssr-path, .ssr-preview, .ssr-value) { color: #fff; }
:root[data-theme] .ssr-icon { background-color: var(--hig-fill3); color: var(--hig-tint); }
:root[data-theme] .settings-search-item:hover .ssr-icon,
:root[data-theme] .settings-search-item.active .ssr-icon { background-color: rgba(255, 255, 255, 0.22); color: #fff; }
:root[data-theme] .ssr-title .ssr-hl { background-color: var(--hig-tint-soft); color: inherit; }
:root[data-theme] .ssr-badge { background-color: var(--hig-fill3); border: 0; border-radius: 10px; color: var(--hig-label2); }
:root[data-theme] .ssr-badge-toggle { color: var(--hig-green-text); }
:root[data-theme] .ssr-badge-dropdown { color: var(--hig-blue-text); }
:root[data-theme] .ssr-badge-slider { color: var(--hig-purple-text); }
:root[data-theme] .ssr-badge-text { color: var(--hig-red-text); }
:root[data-theme] .ssr-badge-number { color: var(--hig-orange-text); }
:root[data-theme] .ssr-badge-option { color: var(--hig-pink-text); }
:root[data-theme] .ssr-value { background-color: var(--hig-fill3); color: var(--hig-label); }
:root[data-theme] .ssr-tag { color: var(--hig-blue-text); background-color: color-mix(in srgb, var(--hig-blue) 14%, transparent); border: 0; border-radius: 10px; }
:root[data-theme] .settings-search-more { border-top-color: var(--hig-separator); }

/* Tab list: System Settings style, each tab's icon on a colored tile */
:root[data-theme] #settingsTabs .list-group-item {
    background-color: transparent;
    border: 0 !important;
    border-radius: 7px !important;
    color: var(--hig-label);
    padding: 5px 8px;
    margin: 1px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 400;
}
:root[data-theme] #settingsTabs .list-group-item > i {
    flex: none;
    width: 22px;
    height: 22px;
    margin-right: 9px !important;
    border-radius: 6px;
    display: inline-grid;
    place-items: center;
    font-size: 11px;
    color: #fff !important;
    background-color: var(--hig-tile, var(--hig-gray));
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
/* The tab icons are finished tiles (assets/img/settings-icons, 64px PNGs with ~8%
   transparent padding), so they are shown slightly larger than the 22px tiles above
   to match them optically. */
:root[data-theme] #settingsTabs .list-group-item > .settings-tab-icon {
    flex: none;
    width: 25px;
    height: 25px;
    margin: -2px 7px -2px -2px !important;
    object-fit: contain;
}
:root[data-theme] #settingsTabs [data-tile="gray"]   { --hig-tile: var(--hig-gray); }
:root[data-theme] #settingsTabs [data-tile="blue"]   { --hig-tile: var(--hig-blue); }
:root[data-theme] #settingsTabs [data-tile="orange"] { --hig-tile: var(--hig-orange); }
:root[data-theme] #settingsTabs [data-tile="green"]  { --hig-tile: var(--hig-green); }
:root[data-theme] #settingsTabs [data-tile="indigo"] { --hig-tile: var(--hig-indigo); }
:root[data-theme] #settingsTabs [data-tile="teal"]   { --hig-tile: var(--hig-teal); }
:root[data-theme] #settingsTabs [data-tile="purple"] { --hig-tile: var(--hig-purple); }
:root[data-theme] #settingsTabs [data-tile="pink"]   { --hig-tile: var(--hig-pink); }
:root[data-theme] #settingsTabs [data-tile="brown"]  { --hig-tile: var(--hig-brown); }
:root[data-theme] #settingsTabs [data-tile="mint"]   { --hig-tile: var(--hig-mint); }
:root[data-theme] #settingsTabs [data-tile="red"]    { --hig-tile: var(--hig-red); }
:root[data-theme] #settingsTabs [data-tile="cyan"]   { --hig-tile: var(--hig-cyan); }
:root[data-theme] #settingsTabs .list-group-item:hover { background-color: var(--hig-fill4); color: var(--hig-label); }
:root[data-theme] #settingsTabs .list-group-item.active {
    background-color: var(--hig-tint) !important;
    color: var(--hig-on-tint) !important;
    font-weight: 500;
}
:root[data-theme] #settingsTabs .settings-tab-sub {
    flex-basis: 100%;
    padding-left: 31px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--hig-label2);
    opacity: 1;
}
:root[data-theme] #settingsTabs .list-group-item.active .settings-tab-sub { color: rgba(255, 255, 255, 0.82); }
:root[data-theme] #settingsTabs .settings-tab-expansion:not(.active) { color: var(--hig-green-text); }

/* ---- 4.15 Crew picker (crew-browse.js). Colors only: tile sizes, spacers and
   pointer-events are measured by the carousel code and must not change. ------ */
:root[data-theme] .crew-browse {
    --crew-bg: var(--hig-bg2);
    --crew-card-bg: var(--hig-bg3);
    --crew-card-border: var(--hig-separator);
    --crew-accent: var(--hig-tint);
    --crew-accent-2: var(--hig-blue);
    --crew-frame-border: var(--hig-separator);
    color: var(--hig-label);
}
:root[data-theme] .crew-browse .crew-browse-tabbed-region { border-color: transparent; background: transparent; }
:root[data-theme] .crew-browse .crew-tabs a {
    color: var(--hig-label);
    background: var(--hig-fill3);
    border-color: transparent;
    box-shadow: none;
}
:root[data-theme] .crew-browse .crew-tabs a:hover { color: var(--hig-label); background: var(--hig-fill2); border-color: transparent; }
:root[data-theme] .crew-browse .crew-tabs a.crew-tab--active { color: var(--hig-on-tint); background: var(--hig-tint); border-color: transparent; box-shadow: none; }
:root[data-theme] .crew-browse .crew-tabs a i,
:root[data-theme] .crew-browse .crew-tabs a.crew-tab--active i { color: inherit; }
:root[data-theme] .crew-browse .crew-browse-shell { background: var(--hig-bg2); box-shadow: var(--hig-card-shadow); }
:root[data-theme] .crew-browse .crew-intercom-context-inner { background: var(--hig-bg2); border-color: var(--hig-separator); }
:root[data-theme] .crew-browse .crew-intercom-icao-toolbar,
:root[data-theme] .crew-browse .crew-intercom-icao-tabs { border-color: var(--hig-separator); }
:root[data-theme] .crew-browse .crew-intercom-icao-tab { background: var(--hig-fill3); color: var(--hig-label); border-color: transparent; }
:root[data-theme] .crew-browse .crew-intercom-icao-tab--active { background: var(--hig-tint); color: var(--hig-on-tint); border-color: transparent; }
:root[data-theme] .crew-browse .crew-intercom-info-banner { background: var(--hig-fill4); border-color: transparent; color: var(--hig-label); }
:root[data-theme] .crew-browse .crew-intercom-info-banner i { color: var(--hig-tint) !important; }
:root[data-theme] .crew-browse .crew-intercom-slot[data-intercom-channel="1"] {
    --slot-accent: var(--hig-tint);
    --slot-accent-soft: color-mix(in srgb, var(--hig-tint) 50%, transparent);
    --slot-accent-edge: color-mix(in srgb, var(--hig-tint) 55%, transparent);
    --slot-accent-glow: color-mix(in srgb, var(--hig-tint) 45%, transparent);
    --slot-accent-shadow: color-mix(in srgb, var(--hig-tint) 22%, transparent);
}
:root[data-theme] .crew-browse .crew-intercom-slot:not(.crew-intercom-slot--assigned) {
    background: var(--hig-fill4);
    border-color: var(--hig-separator);
}
:root[data-theme] .crew-browse .crew-intercom-slot:not(.crew-intercom-slot--assigned):hover { background: var(--hig-fill3); }
:root[data-theme] .crew-browse .crew-intercom-slot.crew-intercom-slot--drop { background: color-mix(in srgb, var(--slot-accent) 14%, var(--hig-bg2)); }
:root[data-theme] .crew-browse .crew-intercom-icon { color: var(--hig-label3); }
:root[data-theme] .crew-browse :is(.crew-intercom-empty, .crew-intercom-hint) { color: var(--hig-label2); }
:root[data-theme] .crew-browse .crew-toolbar .crew-search {
    background: var(--hig-fill3);
    border-color: transparent;
    color: var(--hig-label);
}
:root[data-theme] .crew-browse .crew-toolbar .crew-search::placeholder { color: var(--hig-label2); }
:root[data-theme] .crew-browse .crew-toolbar .crew-search:focus { background: var(--hig-field); border-color: var(--hig-tint); box-shadow: 0 0 0 3px var(--hig-focus); }
:root[data-theme] .crew-browse .crew-search-wrap > i { color: var(--hig-label2); }
:root[data-theme] .crew-browse .crew-personality-toggle { background: var(--hig-fill3); border-color: transparent; }
:root[data-theme] .crew-browse .crew-personality-toggle button { color: var(--hig-label); }
:root[data-theme] .crew-browse .crew-personality-toggle button.crew-pers-active {
    background: var(--hig-seg-selected);
    color: var(--hig-label);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}
:root[data-theme] .crew-browse .crew-personality-toggle button.crew-pers-active i { color: var(--hig-tint); }
:root[data-theme] .crew-browse :is(.crew-country-filter-select, .crew-intercom-lang-select, #crewSortSelect, #crewMinRating) {
    background-color: var(--hig-control);
    color: var(--hig-label);
    border: var(--hig-hairline) solid var(--hig-control-line);
    box-shadow: var(--hig-control-shadow);
}
:root[data-theme] .crew-browse :is(.crew-country-filter-select, .crew-intercom-lang-select) option { background: var(--hig-elevated); color: var(--hig-label); }
:root[data-theme] .crew-browse .crew-intercom-lang-label { color: var(--hig-label2); }
:root[data-theme] .crew-browse .crew-stage-arrow {
    background: var(--hig-toolbar);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 0;
    color: var(--hig-label);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
:root[data-theme] .crew-browse .crew-stage-arrow:hover { background: var(--hig-tint); color: var(--hig-on-tint); }
:root[data-theme] .crew-browse .crew-tile { background: var(--hig-bg3); border-color: var(--hig-separator); }
:root[data-theme] .crew-browse .crew-tile-name { color: var(--hig-label2); }
:root[data-theme] .crew-browse .crew-tile-wrap.crew-tile-wrap--centered .crew-tile { box-shadow: 0 0 0 3px var(--hig-tint), 0 12px 28px rgba(0, 0, 0, 0.28); }
:root[data-theme] .crew-browse .crew-tile-wrap.crew-tile-wrap--centered .crew-tile-name { color: var(--hig-label); }
:root[data-theme] .crew-browse .crew-featured-name { color: var(--hig-label); text-shadow: none; letter-spacing: -0.02em; }
:root[data-theme] .crew-browse .crew-featured-meta .crew-tag { background: var(--hig-fill3); color: var(--hig-label); border-color: transparent; }
:root[data-theme] .crew-browse .crew-featured-meta .crew-tag i { color: var(--hig-tint); }
:root[data-theme] .crew-browse .crew-btn-voice {
    background: var(--hig-tint);
    color: var(--hig-on-tint);
    border: 0;
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.18);
}
:root[data-theme] .crew-browse .crew-btn-voice:hover,
:root[data-theme] .crew-browse .crew-btn-voice.is-playing { background: var(--hig-tint-hover); color: #fff; }
:root[data-theme] .crew-browse .crew-btn-voice:disabled { background: var(--hig-fill3); color: var(--hig-label3); }
:root[data-theme] .crew-browse .crew-voice-line { color: var(--hig-label2); }
:root[data-theme] .crew-browse .crew-assign-group-label { color: var(--hig-label2); }
:root[data-theme] .crew-browse .crew-btn-assign { background: var(--hig-fill3); color: var(--hig-label); border-color: transparent; }
:root[data-theme] .crew-browse .crew-btn-assign:hover { background: var(--hig-fill2); color: var(--hig-label); }
:root[data-theme] .crew-browse .crew-btn-assign--active { background: var(--hig-tint); color: var(--hig-on-tint); border-color: transparent; }
:root[data-theme] .crew-browse .crew-desc-card { background: var(--hig-bg3); border-color: var(--hig-separator); box-shadow: none; }
:root[data-theme] .crew-browse .crew-desc-card::before { border-bottom-color: var(--hig-separator); }
:root[data-theme] .crew-browse .crew-desc-card::after { border-bottom-color: var(--hig-bg3); }
:root[data-theme] .crew-browse .crew-desc-eyebrow { color: var(--hig-label2); }
:root[data-theme] .crew-browse .crew-desc-body { color: var(--hig-label); }
:root[data-theme] .crew-browse .crew-desc-body--empty { color: var(--hig-label2); }
/* Persistent Memory (under the carousel): crew-browse.js paints a navy gradient
   panel; here it is a plain card like the rest of Settings, with the AI Expansion
   Pack status as a green tinted box. */
:root[data-theme] .crew-persistent-memory { background: transparent; border: 0; box-shadow: none; }
/* Line its edges up with the carousel card above, which sits inside the (now
   invisible) frame's 1px border and 16px padding. */
:root[data-theme] .crew-browse .crew-persistent-memory { margin-inline: 17px; }
@media (max-width: 768px) { :root[data-theme] .crew-browse .crew-persistent-memory { margin-inline: 13px; } }
:root[data-theme] .crew-persistent-memory-shell {
    background: var(--hig-bg2);
    border: 0;
    border-radius: var(--hig-radius-lg);
    box-shadow: var(--hig-card-shadow);
}
:root[data-theme] .crew-persistent-memory-head { background: transparent; border-bottom: var(--hig-hairline) solid var(--hig-separator); padding: 12px 18px; }
:root[data-theme] .crew-persistent-memory-title { color: var(--hig-label); }
:root[data-theme] .crew-persistent-memory-title i { color: var(--hig-purple); }
:root[data-theme] .crew-persistent-memory-lead { color: var(--hig-label2); }
:root[data-theme] .crew-persistent-memory-switch .form-check-label { color: var(--hig-label); font-size: 0.92rem; line-height: 1.4; flex: 1 1 calc(100% - 42px); min-width: 0; }
/* Switch and its label share a line; Clear All Memories goes under the label. */
:root[data-theme] .crew-persistent-memory-switch { flex-wrap: wrap; align-items: flex-start; padding-left: 0; gap: 8px 12px; }
:root[data-theme] .crew-persistent-memory-switch .form-check-input { flex: none; float: none; margin: 0.05rem 0 0; }
:root[data-theme] .crew-persistent-memory-switch #crew_clear_memories_btn { margin-left: 40px; }
:root[data-theme] .crew-persistent-memory-pitch .expansion-pitch-card,
:root[data-theme] .crew-persistent-memory-pitch .expansion-pitch-card[style] {
    color: var(--hig-label);
    background: color-mix(in srgb, var(--hig-green) 12%, transparent) !important;
    border: 0 !important;
    border-radius: var(--hig-radius) !important;
}
:root[data-theme] .crew-persistent-memory-pitch .expansion-pitch-card :is(strong, div, span:not(.badge), p) { color: var(--hig-label) !important; }
:root[data-theme] .crew-persistent-memory-pitch .expansion-pitch-card .badge {
    color: var(--hig-green-text) !important;
    background: color-mix(in srgb, var(--hig-green) 18%, transparent) !important;
    border: 0 !important;
}

/* ---- 4.16 Account --------------------------------------------------------------- */
:root[data-theme] .si-profile-compact-label { color: var(--hig-label2); }
:root[data-theme] .si-profile-compact-value { color: var(--hig-label); }
:root[data-theme] .si-news-widget { border: 0; border-radius: var(--hig-radius); box-shadow: var(--hig-card-shadow); }
:root[data-theme] .si-news-widget__icon { background: var(--hig-tint); color: var(--hig-on-tint); }
:root[data-theme] .si-news-widget__title { color: var(--hig-label); letter-spacing: 0; text-transform: none; font-weight: 600; }

/* ---- 4.17 Flight Log -------------------------------------------------------------- */
:root[data-theme] .flights-stat-card {
    background-color: var(--hig-bg2);
    border: 0;
    border-radius: 12px;
    box-shadow: var(--hig-card-shadow);
}
:root[data-theme] .flights-stat-card:hover { border-color: transparent; box-shadow: var(--hig-card-shadow); }
:root[data-theme] .flights-stat-value { font-family: var(--hig-font-rounded); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
:root[data-theme] .flights-stat-label { color: var(--hig-label2); text-transform: none; letter-spacing: 0; }
:root[data-theme] .flights-id-link { color: var(--hig-tint-text) !important; }
:root[data-theme] .flights-active-dot { background-color: var(--hig-green); }

/* ---- 4.17b Change-Log viewer (dark-theme.css hard-codes #202020 / #292929) -------- */
:root[data-theme] .changelog-viewer { background-color: transparent; color: var(--hig-label); }
:root[data-theme] .changelog-viewer .tab-header { background: var(--hig-bg2); border: 0; box-shadow: var(--hig-card-shadow); }
:root[data-theme] :is(.changelog-item, .announcement-item) {
    background-color: var(--hig-bg2);
    border: 0;
    border-radius: 10px;
    box-shadow: var(--hig-card-shadow);
}
:root[data-theme] .changelog-item { border-left: 4px solid var(--hig-orange); }
:root[data-theme] .announcement-item { border-left: 4px solid var(--hig-green); }
:root[data-theme] :is(.changelog-item, .announcement-item):hover { background-color: color-mix(in srgb, var(--hig-bg2) 96%, var(--hig-label)); }
:root[data-theme] .changelog-category { color: var(--hig-orange-text); background-color: color-mix(in srgb, var(--hig-orange) 14%, transparent); border-color: transparent; }
:root[data-theme] .announcement-category { color: var(--hig-green-text); background-color: color-mix(in srgb, var(--hig-green) 14%, transparent); border-color: transparent; }
:root[data-theme] .changelog-meta { color: var(--hig-label2); }
:root[data-theme] .changelog-author { color: var(--hig-label); }
:root[data-theme] .changelog-message { border-top-color: var(--hig-separator); }
:root[data-theme] .changelog-viewer .message { color: var(--hig-label); }
:root[data-theme] .learn-more-button { background-color: var(--hig-fill3); color: var(--hig-tint); }
:root[data-theme] .learn-more-button:hover { background-color: var(--hig-tint); color: var(--hig-on-tint); }
/* Data-colored capsules (Change-Log categories, CRM labels): a tinted capsule in the
   item's own hue. The template sets --cat; readable on both appearances whatever the hue. */
:root[data-theme] :is(.changelog-category-bubble, .badge)[style*="--cat"] {
    background-color: color-mix(in srgb, var(--cat) 18%, transparent) !important;
    color: color-mix(in srgb, var(--cat) 55%, var(--hig-label)) !important;
}

/* ---- 4.17c AI System Optimizer (ai-optimizer.css) and AI Hardware Advisor -------- */
:root[data-theme] .aio {
    --aio-accent: var(--hig-tint);
    --aio-accent-soft: var(--hig-tint-soft);
    --aio-accent-border: color-mix(in srgb, var(--hig-tint) 40%, transparent);
    --aio-surface-1: var(--hig-bg2);
    --aio-surface-2: var(--hig-bg2);
    --aio-surface-3: var(--hig-fill4);
    --aio-border: var(--hig-separator);
    color: var(--hig-label);
}
:root[data-theme] .aio::before { background: none; }
:root[data-theme] .aio :is(.aio-card, .aio-readonly-notice, .aio-disclaimer-banner) { box-shadow: var(--hig-card-shadow); border-radius: var(--hig-radius); }
:root[data-theme] .aio :is(.aio-card, .aio-spec, .aio-input, .aio-col-value) { border-color: var(--hig-separator) !important; }
:root[data-theme] .aio .aio-settings-grid-row { border-bottom-color: var(--hig-separator); }
:root[data-theme] .aio :is(.aio-setup-banner, .aio-hero-side, .aio-result-tab-pane) { background: var(--hig-bg2); }
:root[data-theme] .aio :is(.aio-hero-tag, .aio-result-tab-count) { background: var(--hig-fill3); }
:root[data-theme] .aio .aio-input { background: var(--hig-field); color: var(--hig-label); }
:root[data-theme="light"] .aio :is(.aio-col-value--recommended, .aio-prio-high, .aio-tab-category-label--si) { color: var(--hig-tint-text); }
:root[data-theme] .aha-disclaimer-banner { background: var(--hig-bg2); border-color: transparent; box-shadow: var(--hig-card-shadow); color: var(--hig-label); }

/* ---- 4.18 Comm log: Messages-style transcript (flight-explorer.js) ---------------- */
:root[data-theme="light"] { --hig-bubble: #E9E9EB; }
:root[data-theme="dark"] { --hig-bubble: #262628; }
:root[data-theme] .si-comlog { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 16px; }
:root[data-theme] .si-comlog-station {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--hig-label2);
}
:root[data-theme] .si-comlog-station-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2); }
:root[data-theme] .si-comlog-msg { display: flex; flex-direction: column; max-width: 72%; }
:root[data-theme] .si-comlog-msg--atc { align-self: flex-start; align-items: flex-start; }
:root[data-theme] .si-comlog-msg--pilot,
:root[data-theme] .si-comlog-msg--copilot { align-self: flex-end; align-items: flex-end; }
:root[data-theme] .si-comlog-bubble {
    padding: 7px 12px 8px;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
:root[data-theme] .si-comlog-msg--atc .si-comlog-bubble { background: var(--hig-bubble); color: var(--hig-label); border-bottom-left-radius: 6px; }
:root[data-theme] .si-comlog-msg--pilot .si-comlog-bubble { background: var(--hig-tint); color: var(--hig-on-tint); border-bottom-right-radius: 6px; }
:root[data-theme] .si-comlog-msg--copilot .si-comlog-bubble { background: var(--hig-tint-soft); color: var(--hig-tint-text); border-bottom-right-radius: 6px; }
:root[data-theme] .si-comlog-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 5px;
    font-size: 0.7rem;
    color: var(--hig-label2);
    font-variant-numeric: tabular-nums;
}
:root[data-theme] .si-comlog-btn {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hig-label2);
    font-size: 0.66rem;
    cursor: pointer;
}
:root[data-theme] .si-comlog-btn:hover { background: var(--hig-fill3); color: var(--hig-label); }
:root[data-theme] .si-comlog-btn--play { background: var(--hig-tint-soft); color: var(--hig-tint); }
:root[data-theme] .si-comlog-btn--play:hover { background: var(--hig-tint); color: var(--hig-on-tint); }
:root[data-theme] .si-comlog-noaudio { color: var(--hig-label3); font-size: 0.68rem; padding: 0 4px; }
:root[data-theme] .si-comlog .com-log-row-clickable { cursor: pointer; }
:root[data-theme] .si-comlog .com-log-row-clickable:hover .si-comlog-bubble { filter: brightness(0.95); }
:root[data-theme="dark"] .si-comlog .com-log-row-clickable:hover .si-comlog-bubble { filter: brightness(1.15); }

/* ---- 4.19 Date picker (flatpickr dark theme is loaded unconditionally) ------------- */
:root[data-theme="light"] .flatpickr-calendar { background: var(--hig-elevated); box-shadow: var(--hig-menu-shadow); border: 0; }
:root[data-theme="light"] .flatpickr-calendar :is(.flatpickr-months, .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday, .flatpickr-monthDropdown-months) { background: var(--hig-elevated); color: var(--hig-label); fill: var(--hig-label); }
:root[data-theme="light"] .flatpickr-calendar :is(.flatpickr-prev-month, .flatpickr-next-month) svg { fill: var(--hig-label2); }
:root[data-theme="light"] .flatpickr-calendar .flatpickr-day { color: var(--hig-label); }
:root[data-theme="light"] .flatpickr-calendar .flatpickr-day:is(.prevMonthDay, .nextMonthDay, .flatpickr-disabled) { color: var(--hig-label3); }
:root[data-theme="light"] .flatpickr-calendar .flatpickr-day:hover { background: var(--hig-fill3); border-color: transparent; }
:root[data-theme] .flatpickr-calendar .flatpickr-day:is(.selected, .startRange, .endRange) { background: var(--hig-tint); border-color: var(--hig-tint); color: var(--hig-on-tint); }
:root[data-theme="light"] .flatpickr-calendar :is(.flatpickr-time, .flatpickr-time input, .numInputWrapper) { background: var(--hig-elevated); color: var(--hig-label); }

/* ---- 4.20 Inline colors written for the dark-only portal ------------------------
   Hundreds of templates (many outside git) paint dark panels and light text
   straight into style="". In light appearance those become dark boxes and
   invisible text, so these rules remap the literals that actually occur.
   Generated by scanning every script and page under www/p2d (2026-09-28):
   dark neutral panels -> a light fill, light neutrals -> label, mid grays ->
   secondary label, pastel accents -> Apple's accessible text color of the same
   hue, brand gold -> the tint. Pure black overlays (tooltips, map HUDs) stay dark.
   Each block opens with the one word every one of its patterns contains
   ([style*="background" i] or [style*="color" i]), never a bare [style]. A map
   rewrites the inline style of every tile and pane on each frame of a drag, and
   a bare [style] ran all of those through hundreds of substring tests per frame
   (Flight Explorer froze while panning, ticket 11770). Keep the prefix when
   regenerating. The text-only rules below also skip map marker content
   (.leaflet-marker-icon *): route labels sit on satellite or chart tiles in
   both appearances, not on a light page, so white stays white. */
:root[data-theme="light"] [style*="background" i]:is(
    [style*="background: #042349" i],
    [style*="background:#042349" i],
    [style*="background-color: #042349" i],
    [style*="background-color:#042349" i],
    [style*="background: rgb(4, 35, 73)" i],
    [style*="background:rgb(4, 35, 73)" i],
    [style*="background-color: rgb(4, 35, 73)" i],
    [style*="background-color:rgb(4, 35, 73)" i],
    [style*="background: #0a1016" i],
    [style*="background:#0a1016" i],
    [style*="background-color: #0a1016" i],
    [style*="background-color:#0a1016" i],
    [style*="background: rgb(10, 16, 22)" i],
    [style*="background:rgb(10, 16, 22)" i],
    [style*="background-color: rgb(10, 16, 22)" i],
    [style*="background-color:rgb(10, 16, 22)" i],
    [style*="background: #0b0f1a" i],
    [style*="background:#0b0f1a" i],
    [style*="background-color: #0b0f1a" i],
    [style*="background-color:#0b0f1a" i],
    [style*="background: rgb(11, 15, 26)" i],
    [style*="background:rgb(11, 15, 26)" i],
    [style*="background-color: rgb(11, 15, 26)" i],
    [style*="background-color:rgb(11, 15, 26)" i],
    [style*="background: #0d1117" i],
    [style*="background:#0d1117" i],
    [style*="background-color: #0d1117" i],
    [style*="background-color:#0d1117" i],
    [style*="background: rgb(13, 17, 23)" i],
    [style*="background:rgb(13, 17, 23)" i],
    [style*="background-color: rgb(13, 17, 23)" i],
    [style*="background-color:rgb(13, 17, 23)" i],
    [style*="background: #0d2b0d" i],
    [style*="background:#0d2b0d" i],
    [style*="background-color: #0d2b0d" i],
    [style*="background-color:#0d2b0d" i],
    [style*="background: rgb(13, 43, 13)" i],
    [style*="background:rgb(13, 43, 13)" i],
    [style*="background-color: rgb(13, 43, 13)" i],
    [style*="background-color:rgb(13, 43, 13)" i],
    [style*="background: #0f172a" i],
    [style*="background:#0f172a" i],
    [style*="background-color: #0f172a" i],
    [style*="background-color:#0f172a" i],
    [style*="background: rgb(15, 23, 42)" i],
    [style*="background:rgb(15, 23, 42)" i],
    [style*="background-color: rgb(15, 23, 42)" i],
    [style*="background-color:rgb(15, 23, 42)" i],
    [style*="background: #0f1e30" i],
    [style*="background:#0f1e30" i],
    [style*="background-color: #0f1e30" i],
    [style*="background-color:#0f1e30" i],
    [style*="background: rgb(15, 30, 48)" i],
    [style*="background:rgb(15, 30, 48)" i],
    [style*="background-color: rgb(15, 30, 48)" i],
    [style*="background-color:rgb(15, 30, 48)" i],
    [style*="background: #101418" i],
    [style*="background:#101418" i],
    [style*="background-color: #101418" i],
    [style*="background-color:#101418" i],
    [style*="background: rgb(16, 20, 24)" i],
    [style*="background:rgb(16, 20, 24)" i],
    [style*="background-color: rgb(16, 20, 24)" i],
    [style*="background-color:rgb(16, 20, 24)" i],
    [style*="background: #10161c" i],
    [style*="background:#10161c" i],
    [style*="background-color: #10161c" i],
    [style*="background-color:#10161c" i],
    [style*="background: rgb(16, 22, 28)" i],
    [style*="background:rgb(16, 22, 28)" i],
    [style*="background-color: rgb(16, 22, 28)" i],
    [style*="background-color:rgb(16, 22, 28)" i],
    [style*="background: #111" i],
    [style*="background:#111" i],
    [style*="background-color: #111" i],
    [style*="background-color:#111" i],
    [style*="background: rgb(17, 17, 17)" i],
    [style*="background:rgb(17, 17, 17)" i],
    [style*="background-color: rgb(17, 17, 17)" i],
    [style*="background-color:rgb(17, 17, 17)" i],
    [style*="background: #111827" i],
    [style*="background:#111827" i],
    [style*="background-color: #111827" i],
    [style*="background-color:#111827" i],
    [style*="background: rgb(17, 24, 39)" i],
    [style*="background:rgb(17, 24, 39)" i],
    [style*="background-color: rgb(17, 24, 39)" i],
    [style*="background-color:rgb(17, 24, 39)" i],
    [style*="background: #14181f" i],
    [style*="background:#14181f" i],
    [style*="background-color: #14181f" i],
    [style*="background-color:#14181f" i],
    [style*="background: rgb(20, 24, 31)" i],
    [style*="background:rgb(20, 24, 31)" i],
    [style*="background-color: rgb(20, 24, 31)" i],
    [style*="background-color:rgb(20, 24, 31)" i],
    [style*="background: #151a21" i],
    [style*="background:#151a21" i],
    [style*="background-color: #151a21" i],
    [style*="background-color:#151a21" i],
    [style*="background: rgb(21, 26, 33)" i],
    [style*="background:rgb(21, 26, 33)" i],
    [style*="background-color: rgb(21, 26, 33)" i],
    [style*="background-color:rgb(21, 26, 33)" i],
    [style*="background: #16191f" i],
    [style*="background:#16191f" i],
    [style*="background-color: #16191f" i],
    [style*="background-color:#16191f" i],
    [style*="background: rgb(22, 25, 31)" i],
    [style*="background:rgb(22, 25, 31)" i],
    [style*="background-color: rgb(22, 25, 31)" i],
    [style*="background-color:rgb(22, 25, 31)" i],
    [style*="background: #161b22" i],
    [style*="background:#161b22" i],
    [style*="background-color: #161b22" i],
    [style*="background-color:#161b22" i],
    [style*="background: rgb(22, 27, 34)" i],
    [style*="background:rgb(22, 27, 34)" i],
    [style*="background-color: rgb(22, 27, 34)" i],
    [style*="background-color:rgb(22, 27, 34)" i],
    [style*="background: #1a1818" i],
    [style*="background:#1a1818" i],
    [style*="background-color: #1a1818" i],
    [style*="background-color:#1a1818" i],
    [style*="background: rgb(26, 24, 24)" i],
    [style*="background:rgb(26, 24, 24)" i],
    [style*="background-color: rgb(26, 24, 24)" i],
    [style*="background-color:rgb(26, 24, 24)" i],
    [style*="background: #1a1a0a" i],
    [style*="background:#1a1a0a" i],
    [style*="background-color: #1a1a0a" i],
    [style*="background-color:#1a1a0a" i],
    [style*="background: rgb(26, 26, 10)" i],
    [style*="background:rgb(26, 26, 10)" i],
    [style*="background-color: rgb(26, 26, 10)" i],
    [style*="background-color:rgb(26, 26, 10)" i],
    [style*="background: #1a1a1a" i],
    [style*="background:#1a1a1a" i],
    [style*="background-color: #1a1a1a" i],
    [style*="background-color:#1a1a1a" i],
    [style*="background: rgb(26, 26, 26)" i],
    [style*="background:rgb(26, 26, 26)" i],
    [style*="background-color: rgb(26, 26, 26)" i],
    [style*="background-color:rgb(26, 26, 26)" i],
    [style*="background: #1a1d20" i],
    [style*="background:#1a1d20" i],
    [style*="background-color: #1a1d20" i],
    [style*="background-color:#1a1d20" i],
    [style*="background: rgb(26, 29, 32)" i],
    [style*="background:rgb(26, 29, 32)" i],
    [style*="background-color: rgb(26, 29, 32)" i],
    [style*="background-color:rgb(26, 29, 32)" i],
    [style*="background: #1a1d23" i],
    [style*="background:#1a1d23" i],
    [style*="background-color: #1a1d23" i],
    [style*="background-color:#1a1d23" i],
    [style*="background: rgb(26, 29, 35)" i],
    [style*="background:rgb(26, 29, 35)" i],
    [style*="background-color: rgb(26, 29, 35)" i],
    [style*="background-color:rgb(26, 29, 35)" i],
    [style*="background: #1a1d29" i],
    [style*="background:#1a1d29" i],
    [style*="background-color: #1a1d29" i],
    [style*="background-color:#1a1d29" i],
    [style*="background: rgb(26, 29, 41)" i],
    [style*="background:rgb(26, 29, 41)" i],
    [style*="background-color: rgb(26, 29, 41)" i],
    [style*="background-color:rgb(26, 29, 41)" i],
    [style*="background: #1a1d2e" i],
    [style*="background:#1a1d2e" i],
    [style*="background-color: #1a1d2e" i],
    [style*="background-color:#1a1d2e" i],
    [style*="background: rgb(26, 29, 46)" i],
    [style*="background:rgb(26, 29, 46)" i],
    [style*="background-color: rgb(26, 29, 46)" i],
    [style*="background-color:rgb(26, 29, 46)" i],
    [style*="background: #1a1f2e" i],
    [style*="background:#1a1f2e" i],
    [style*="background-color: #1a1f2e" i],
    [style*="background-color:#1a1f2e" i],
    [style*="background: rgb(26, 31, 46)" i],
    [style*="background:rgb(26, 31, 46)" i],
    [style*="background-color: rgb(26, 31, 46)" i],
    [style*="background-color:rgb(26, 31, 46)" i],
    [style*="background: #1a2a38" i],
    [style*="background:#1a2a38" i],
    [style*="background-color: #1a2a38" i],
    [style*="background-color:#1a2a38" i],
    [style*="background: rgb(26, 42, 56)" i],
    [style*="background:rgb(26, 42, 56)" i],
    [style*="background-color: rgb(26, 42, 56)" i],
    [style*="background-color:rgb(26, 42, 56)" i],
    [style*="background: #1c2129" i],
    [style*="background:#1c2129" i],
    [style*="background-color: #1c2129" i],
    [style*="background-color:#1c2129" i],
    [style*="background: rgb(28, 33, 41)" i],
    [style*="background:rgb(28, 33, 41)" i],
    [style*="background-color: rgb(28, 33, 41)" i],
    [style*="background-color:rgb(28, 33, 41)" i],
    [style*="background: #1e1e1e" i],
    [style*="background:#1e1e1e" i],
    [style*="background-color: #1e1e1e" i],
    [style*="background-color:#1e1e1e" i],
    [style*="background: rgb(30, 30, 30)" i],
    [style*="background:rgb(30, 30, 30)" i],
    [style*="background-color: rgb(30, 30, 30)" i],
    [style*="background-color:rgb(30, 30, 30)" i],
    [style*="background: #1e2130" i],
    [style*="background:#1e2130" i],
    [style*="background-color: #1e2130" i],
    [style*="background-color:#1e2130" i],
    [style*="background: rgb(30, 33, 48)" i],
    [style*="background:rgb(30, 33, 48)" i],
    [style*="background-color: rgb(30, 33, 48)" i],
    [style*="background-color:rgb(30, 33, 48)" i],
    [style*="background: #1e2229" i],
    [style*="background:#1e2229" i],
    [style*="background-color: #1e2229" i],
    [style*="background-color:#1e2229" i],
    [style*="background: rgb(30, 34, 41)" i],
    [style*="background:rgb(30, 34, 41)" i],
    [style*="background-color: rgb(30, 34, 41)" i],
    [style*="background-color:rgb(30, 34, 41)" i],
    [style*="background: #1e2a35" i],
    [style*="background:#1e2a35" i],
    [style*="background-color: #1e2a35" i],
    [style*="background-color:#1e2a35" i],
    [style*="background: rgb(30, 42, 53)" i],
    [style*="background:rgb(30, 42, 53)" i],
    [style*="background-color: rgb(30, 42, 53)" i],
    [style*="background-color:rgb(30, 42, 53)" i],
    [style*="background: #1e2a3a" i],
    [style*="background:#1e2a3a" i],
    [style*="background-color: #1e2a3a" i],
    [style*="background-color:#1e2a3a" i],
    [style*="background: rgb(30, 42, 58)" i],
    [style*="background:rgb(30, 42, 58)" i],
    [style*="background-color: rgb(30, 42, 58)" i],
    [style*="background-color:rgb(30, 42, 58)" i],
    [style*="background: #1e4d2b" i],
    [style*="background:#1e4d2b" i],
    [style*="background-color: #1e4d2b" i],
    [style*="background-color:#1e4d2b" i],
    [style*="background: rgb(30, 77, 43)" i],
    [style*="background:rgb(30, 77, 43)" i],
    [style*="background-color: rgb(30, 77, 43)" i],
    [style*="background-color:rgb(30, 77, 43)" i],
    [style*="background: #22303c" i],
    [style*="background:#22303c" i],
    [style*="background-color: #22303c" i],
    [style*="background-color:#22303c" i],
    [style*="background: rgb(34, 48, 60)" i],
    [style*="background:rgb(34, 48, 60)" i],
    [style*="background-color: rgb(34, 48, 60)" i],
    [style*="background-color:rgb(34, 48, 60)" i],
    [style*="background: #252525" i],
    [style*="background:#252525" i],
    [style*="background-color: #252525" i],
    [style*="background-color:#252525" i],
    [style*="background: rgb(37, 37, 37)" i],
    [style*="background:rgb(37, 37, 37)" i],
    [style*="background-color: rgb(37, 37, 37)" i],
    [style*="background-color:rgb(37, 37, 37)" i],
    [style*="background: #2a2a2a" i],
    [style*="background:#2a2a2a" i],
    [style*="background-color: #2a2a2a" i],
    [style*="background-color:#2a2a2a" i],
    [style*="background: rgb(42, 42, 42)" i],
    [style*="background:rgb(42, 42, 42)" i],
    [style*="background-color: rgb(42, 42, 42)" i],
    [style*="background-color:rgb(42, 42, 42)" i],
    [style*="background: #2a2d3a" i],
    [style*="background:#2a2d3a" i],
    [style*="background-color: #2a2d3a" i],
    [style*="background-color:#2a2d3a" i],
    [style*="background: rgb(42, 45, 58)" i],
    [style*="background:rgb(42, 45, 58)" i],
    [style*="background-color: rgb(42, 45, 58)" i],
    [style*="background-color:rgb(42, 45, 58)" i],
    [style*="background: #2a2f36" i],
    [style*="background:#2a2f36" i],
    [style*="background-color: #2a2f36" i],
    [style*="background-color:#2a2f36" i],
    [style*="background: rgb(42, 47, 54)" i],
    [style*="background:rgb(42, 47, 54)" i],
    [style*="background-color: rgb(42, 47, 54)" i],
    [style*="background-color:rgb(42, 47, 54)" i],
    [style*="background: #2b2d42" i],
    [style*="background:#2b2d42" i],
    [style*="background-color: #2b2d42" i],
    [style*="background-color:#2b2d42" i],
    [style*="background: rgb(43, 45, 66)" i],
    [style*="background:rgb(43, 45, 66)" i],
    [style*="background-color: rgb(43, 45, 66)" i],
    [style*="background-color:rgb(43, 45, 66)" i],
    [style*="background: #2b2f36" i],
    [style*="background:#2b2f36" i],
    [style*="background-color: #2b2f36" i],
    [style*="background-color:#2b2f36" i],
    [style*="background: rgb(43, 47, 54)" i],
    [style*="background:rgb(43, 47, 54)" i],
    [style*="background-color: rgb(43, 47, 54)" i],
    [style*="background-color:rgb(43, 47, 54)" i],
    [style*="background: #2d2d2d" i],
    [style*="background:#2d2d2d" i],
    [style*="background-color: #2d2d2d" i],
    [style*="background-color:#2d2d2d" i],
    [style*="background: rgb(45, 45, 45)" i],
    [style*="background:rgb(45, 45, 45)" i],
    [style*="background-color: rgb(45, 45, 45)" i],
    [style*="background-color:rgb(45, 45, 45)" i],
    [style*="background: #2d3238" i],
    [style*="background:#2d3238" i],
    [style*="background-color: #2d3238" i],
    [style*="background-color:#2d3238" i],
    [style*="background: rgb(45, 50, 56)" i],
    [style*="background:rgb(45, 50, 56)" i],
    [style*="background-color: rgb(45, 50, 56)" i],
    [style*="background-color:rgb(45, 50, 56)" i],
    [style*="background: #333" i],
    [style*="background:#333" i],
    [style*="background-color: #333" i],
    [style*="background-color:#333" i],
    [style*="background: rgb(51, 51, 51)" i],
    [style*="background:rgb(51, 51, 51)" i],
    [style*="background-color: rgb(51, 51, 51)" i],
    [style*="background-color:rgb(51, 51, 51)" i],
    [style*="background: #3a1a1a" i],
    [style*="background:#3a1a1a" i],
    [style*="background-color: #3a1a1a" i],
    [style*="background-color:#3a1a1a" i],
    [style*="background: rgb(58, 26, 26)" i],
    [style*="background:rgb(58, 26, 26)" i],
    [style*="background-color: rgb(58, 26, 26)" i],
    [style*="background-color:rgb(58, 26, 26)" i],
    [style*="background: #3a3a3a" i],
    [style*="background:#3a3a3a" i],
    [style*="background-color: #3a3a3a" i],
    [style*="background-color:#3a3a3a" i],
    [style*="background: rgb(58, 58, 58)" i],
    [style*="background:rgb(58, 58, 58)" i],
    [style*="background-color: rgb(58, 58, 58)" i],
    [style*="background-color:rgb(58, 58, 58)" i],
    [style*="background: #3b3838" i],
    [style*="background:#3b3838" i],
    [style*="background-color: #3b3838" i],
    [style*="background-color:#3b3838" i],
    [style*="background: rgb(59, 56, 56)" i],
    [style*="background:rgb(59, 56, 56)" i],
    [style*="background-color: rgb(59, 56, 56)" i],
    [style*="background-color:rgb(59, 56, 56)" i],
    [style*="background: #4a1a1a" i],
    [style*="background:#4a1a1a" i],
    [style*="background-color: #4a1a1a" i],
    [style*="background-color:#4a1a1a" i],
    [style*="background: rgb(74, 26, 26)" i],
    [style*="background:rgb(74, 26, 26)" i],
    [style*="background-color: rgb(74, 26, 26)" i],
    [style*="background-color:rgb(74, 26, 26)" i],
    [style*="background: rgba(4, 35, 73" i],
    [style*="background:rgba(4, 35, 73" i],
    [style*="background-color: rgba(4, 35, 73" i],
    [style*="background-color:rgba(4, 35, 73" i],
    [style*="background: rgb(4, 35, 73" i],
    [style*="background:rgb(4, 35, 73" i],
    [style*="background-color: rgb(4, 35, 73" i],
    [style*="background-color:rgb(4, 35, 73" i],
    [style*="background: rgba(4,35,73" i],
    [style*="background:rgba(4,35,73" i],
    [style*="background-color: rgba(4,35,73" i],
    [style*="background-color:rgba(4,35,73" i],
    [style*="background: rgb(4,35,73" i],
    [style*="background:rgb(4,35,73" i],
    [style*="background-color: rgb(4,35,73" i],
    [style*="background-color:rgb(4,35,73" i],
    [style*="background: rgba(10, 12, 16" i],
    [style*="background:rgba(10, 12, 16" i],
    [style*="background-color: rgba(10, 12, 16" i],
    [style*="background-color:rgba(10, 12, 16" i],
    [style*="background: rgb(10, 12, 16" i],
    [style*="background:rgb(10, 12, 16" i],
    [style*="background-color: rgb(10, 12, 16" i],
    [style*="background-color:rgb(10, 12, 16" i],
    [style*="background: rgba(10,12,16" i],
    [style*="background:rgba(10,12,16" i],
    [style*="background-color: rgba(10,12,16" i],
    [style*="background-color:rgba(10,12,16" i],
    [style*="background: rgb(10,12,16" i],
    [style*="background:rgb(10,12,16" i],
    [style*="background-color: rgb(10,12,16" i],
    [style*="background-color:rgb(10,12,16" i],
    [style*="background: rgba(26, 26, 26" i],
    [style*="background:rgba(26, 26, 26" i],
    [style*="background-color: rgba(26, 26, 26" i],
    [style*="background-color:rgba(26, 26, 26" i],
    [style*="background: rgb(26, 26, 26" i],
    [style*="background:rgb(26, 26, 26" i],
    [style*="background-color: rgb(26, 26, 26" i],
    [style*="background-color:rgb(26, 26, 26" i],
    [style*="background: rgba(26,26,26" i],
    [style*="background:rgba(26,26,26" i],
    [style*="background-color: rgba(26,26,26" i],
    [style*="background-color:rgba(26,26,26" i],
    [style*="background: rgb(26,26,26" i],
    [style*="background:rgb(26,26,26" i],
    [style*="background-color: rgb(26,26,26" i],
    [style*="background-color:rgb(26,26,26" i],
    [style*="background: rgba(26, 58, 82" i],
    [style*="background:rgba(26, 58, 82" i],
    [style*="background-color: rgba(26, 58, 82" i],
    [style*="background-color:rgba(26, 58, 82" i],
    [style*="background: rgb(26, 58, 82" i],
    [style*="background:rgb(26, 58, 82" i],
    [style*="background-color: rgb(26, 58, 82" i],
    [style*="background-color:rgb(26, 58, 82" i],
    [style*="background: rgba(26,58,82" i],
    [style*="background:rgba(26,58,82" i],
    [style*="background-color: rgba(26,58,82" i],
    [style*="background-color:rgba(26,58,82" i],
    [style*="background: rgb(26,58,82" i],
    [style*="background:rgb(26,58,82" i],
    [style*="background-color: rgb(26,58,82" i],
    [style*="background-color:rgb(26,58,82" i],
    [style*="background: rgba(44, 62, 80" i],
    [style*="background:rgba(44, 62, 80" i],
    [style*="background-color: rgba(44, 62, 80" i],
    [style*="background-color:rgba(44, 62, 80" i],
    [style*="background: rgb(44, 62, 80" i],
    [style*="background:rgb(44, 62, 80" i],
    [style*="background-color: rgb(44, 62, 80" i],
    [style*="background-color:rgb(44, 62, 80" i],
    [style*="background: rgba(44,62,80" i],
    [style*="background:rgba(44,62,80" i],
    [style*="background-color: rgba(44,62,80" i],
    [style*="background-color:rgba(44,62,80" i],
    [style*="background: rgb(44,62,80" i],
    [style*="background:rgb(44,62,80" i],
    [style*="background-color: rgb(44,62,80" i],
    [style*="background-color:rgb(44,62,80" i],
    [style*="background: rgba(52, 58, 64" i],
    [style*="background:rgba(52, 58, 64" i],
    [style*="background-color: rgba(52, 58, 64" i],
    [style*="background-color:rgba(52, 58, 64" i],
    [style*="background: rgb(52, 58, 64" i],
    [style*="background:rgb(52, 58, 64" i],
    [style*="background-color: rgb(52, 58, 64" i],
    [style*="background-color:rgb(52, 58, 64" i],
    [style*="background: rgba(52,58,64" i],
    [style*="background:rgba(52,58,64" i],
    [style*="background-color: rgba(52,58,64" i],
    [style*="background-color:rgba(52,58,64" i],
    [style*="background: rgb(52,58,64" i],
    [style*="background:rgb(52,58,64" i],
    [style*="background-color: rgb(52,58,64" i],
    [style*="background-color:rgb(52,58,64" i],
    [style*="background: rgba(52, 73, 94" i],
    [style*="background:rgba(52, 73, 94" i],
    [style*="background-color: rgba(52, 73, 94" i],
    [style*="background-color:rgba(52, 73, 94" i],
    [style*="background: rgb(52, 73, 94" i],
    [style*="background:rgb(52, 73, 94" i],
    [style*="background-color: rgb(52, 73, 94" i],
    [style*="background-color:rgb(52, 73, 94" i],
    [style*="background: rgba(52,73,94" i],
    [style*="background:rgba(52,73,94" i],
    [style*="background-color: rgba(52,73,94" i],
    [style*="background-color:rgba(52,73,94" i],
    [style*="background: rgb(52,73,94" i],
    [style*="background:rgb(52,73,94" i],
    [style*="background-color: rgb(52,73,94" i],
    [style*="background-color:rgb(52,73,94" i]
) {
    background-color: var(--hig-fill3) !important;
    color: var(--hig-label) !important;
}
:root[data-theme] .card[style*="background" i]:is(
    [style*="background: #042349" i],
    [style*="background:#042349" i],
    [style*="background-color: #042349" i],
    [style*="background-color:#042349" i],
    [style*="background: rgb(4, 35, 73)" i],
    [style*="background:rgb(4, 35, 73)" i],
    [style*="background-color: rgb(4, 35, 73)" i],
    [style*="background-color:rgb(4, 35, 73)" i],
    [style*="background: #0a1016" i],
    [style*="background:#0a1016" i],
    [style*="background-color: #0a1016" i],
    [style*="background-color:#0a1016" i],
    [style*="background: rgb(10, 16, 22)" i],
    [style*="background:rgb(10, 16, 22)" i],
    [style*="background-color: rgb(10, 16, 22)" i],
    [style*="background-color:rgb(10, 16, 22)" i],
    [style*="background: #0b0f1a" i],
    [style*="background:#0b0f1a" i],
    [style*="background-color: #0b0f1a" i],
    [style*="background-color:#0b0f1a" i],
    [style*="background: rgb(11, 15, 26)" i],
    [style*="background:rgb(11, 15, 26)" i],
    [style*="background-color: rgb(11, 15, 26)" i],
    [style*="background-color:rgb(11, 15, 26)" i],
    [style*="background: #0d1117" i],
    [style*="background:#0d1117" i],
    [style*="background-color: #0d1117" i],
    [style*="background-color:#0d1117" i],
    [style*="background: rgb(13, 17, 23)" i],
    [style*="background:rgb(13, 17, 23)" i],
    [style*="background-color: rgb(13, 17, 23)" i],
    [style*="background-color:rgb(13, 17, 23)" i],
    [style*="background: #0d2b0d" i],
    [style*="background:#0d2b0d" i],
    [style*="background-color: #0d2b0d" i],
    [style*="background-color:#0d2b0d" i],
    [style*="background: rgb(13, 43, 13)" i],
    [style*="background:rgb(13, 43, 13)" i],
    [style*="background-color: rgb(13, 43, 13)" i],
    [style*="background-color:rgb(13, 43, 13)" i],
    [style*="background: #0f172a" i],
    [style*="background:#0f172a" i],
    [style*="background-color: #0f172a" i],
    [style*="background-color:#0f172a" i],
    [style*="background: rgb(15, 23, 42)" i],
    [style*="background:rgb(15, 23, 42)" i],
    [style*="background-color: rgb(15, 23, 42)" i],
    [style*="background-color:rgb(15, 23, 42)" i],
    [style*="background: #0f1e30" i],
    [style*="background:#0f1e30" i],
    [style*="background-color: #0f1e30" i],
    [style*="background-color:#0f1e30" i],
    [style*="background: rgb(15, 30, 48)" i],
    [style*="background:rgb(15, 30, 48)" i],
    [style*="background-color: rgb(15, 30, 48)" i],
    [style*="background-color:rgb(15, 30, 48)" i],
    [style*="background: #101418" i],
    [style*="background:#101418" i],
    [style*="background-color: #101418" i],
    [style*="background-color:#101418" i],
    [style*="background: rgb(16, 20, 24)" i],
    [style*="background:rgb(16, 20, 24)" i],
    [style*="background-color: rgb(16, 20, 24)" i],
    [style*="background-color:rgb(16, 20, 24)" i],
    [style*="background: #10161c" i],
    [style*="background:#10161c" i],
    [style*="background-color: #10161c" i],
    [style*="background-color:#10161c" i],
    [style*="background: rgb(16, 22, 28)" i],
    [style*="background:rgb(16, 22, 28)" i],
    [style*="background-color: rgb(16, 22, 28)" i],
    [style*="background-color:rgb(16, 22, 28)" i],
    [style*="background: #111" i],
    [style*="background:#111" i],
    [style*="background-color: #111" i],
    [style*="background-color:#111" i],
    [style*="background: rgb(17, 17, 17)" i],
    [style*="background:rgb(17, 17, 17)" i],
    [style*="background-color: rgb(17, 17, 17)" i],
    [style*="background-color:rgb(17, 17, 17)" i],
    [style*="background: #111827" i],
    [style*="background:#111827" i],
    [style*="background-color: #111827" i],
    [style*="background-color:#111827" i],
    [style*="background: rgb(17, 24, 39)" i],
    [style*="background:rgb(17, 24, 39)" i],
    [style*="background-color: rgb(17, 24, 39)" i],
    [style*="background-color:rgb(17, 24, 39)" i],
    [style*="background: #14181f" i],
    [style*="background:#14181f" i],
    [style*="background-color: #14181f" i],
    [style*="background-color:#14181f" i],
    [style*="background: rgb(20, 24, 31)" i],
    [style*="background:rgb(20, 24, 31)" i],
    [style*="background-color: rgb(20, 24, 31)" i],
    [style*="background-color:rgb(20, 24, 31)" i],
    [style*="background: #151a21" i],
    [style*="background:#151a21" i],
    [style*="background-color: #151a21" i],
    [style*="background-color:#151a21" i],
    [style*="background: rgb(21, 26, 33)" i],
    [style*="background:rgb(21, 26, 33)" i],
    [style*="background-color: rgb(21, 26, 33)" i],
    [style*="background-color:rgb(21, 26, 33)" i],
    [style*="background: #16191f" i],
    [style*="background:#16191f" i],
    [style*="background-color: #16191f" i],
    [style*="background-color:#16191f" i],
    [style*="background: rgb(22, 25, 31)" i],
    [style*="background:rgb(22, 25, 31)" i],
    [style*="background-color: rgb(22, 25, 31)" i],
    [style*="background-color:rgb(22, 25, 31)" i],
    [style*="background: #161b22" i],
    [style*="background:#161b22" i],
    [style*="background-color: #161b22" i],
    [style*="background-color:#161b22" i],
    [style*="background: rgb(22, 27, 34)" i],
    [style*="background:rgb(22, 27, 34)" i],
    [style*="background-color: rgb(22, 27, 34)" i],
    [style*="background-color:rgb(22, 27, 34)" i],
    [style*="background: #1a1818" i],
    [style*="background:#1a1818" i],
    [style*="background-color: #1a1818" i],
    [style*="background-color:#1a1818" i],
    [style*="background: rgb(26, 24, 24)" i],
    [style*="background:rgb(26, 24, 24)" i],
    [style*="background-color: rgb(26, 24, 24)" i],
    [style*="background-color:rgb(26, 24, 24)" i],
    [style*="background: #1a1a0a" i],
    [style*="background:#1a1a0a" i],
    [style*="background-color: #1a1a0a" i],
    [style*="background-color:#1a1a0a" i],
    [style*="background: rgb(26, 26, 10)" i],
    [style*="background:rgb(26, 26, 10)" i],
    [style*="background-color: rgb(26, 26, 10)" i],
    [style*="background-color:rgb(26, 26, 10)" i],
    [style*="background: #1a1a1a" i],
    [style*="background:#1a1a1a" i],
    [style*="background-color: #1a1a1a" i],
    [style*="background-color:#1a1a1a" i],
    [style*="background: rgb(26, 26, 26)" i],
    [style*="background:rgb(26, 26, 26)" i],
    [style*="background-color: rgb(26, 26, 26)" i],
    [style*="background-color:rgb(26, 26, 26)" i],
    [style*="background: #1a1d20" i],
    [style*="background:#1a1d20" i],
    [style*="background-color: #1a1d20" i],
    [style*="background-color:#1a1d20" i],
    [style*="background: rgb(26, 29, 32)" i],
    [style*="background:rgb(26, 29, 32)" i],
    [style*="background-color: rgb(26, 29, 32)" i],
    [style*="background-color:rgb(26, 29, 32)" i],
    [style*="background: #1a1d23" i],
    [style*="background:#1a1d23" i],
    [style*="background-color: #1a1d23" i],
    [style*="background-color:#1a1d23" i],
    [style*="background: rgb(26, 29, 35)" i],
    [style*="background:rgb(26, 29, 35)" i],
    [style*="background-color: rgb(26, 29, 35)" i],
    [style*="background-color:rgb(26, 29, 35)" i],
    [style*="background: #1a1d29" i],
    [style*="background:#1a1d29" i],
    [style*="background-color: #1a1d29" i],
    [style*="background-color:#1a1d29" i],
    [style*="background: rgb(26, 29, 41)" i],
    [style*="background:rgb(26, 29, 41)" i],
    [style*="background-color: rgb(26, 29, 41)" i],
    [style*="background-color:rgb(26, 29, 41)" i],
    [style*="background: #1a1d2e" i],
    [style*="background:#1a1d2e" i],
    [style*="background-color: #1a1d2e" i],
    [style*="background-color:#1a1d2e" i],
    [style*="background: rgb(26, 29, 46)" i],
    [style*="background:rgb(26, 29, 46)" i],
    [style*="background-color: rgb(26, 29, 46)" i],
    [style*="background-color:rgb(26, 29, 46)" i],
    [style*="background: #1a1f2e" i],
    [style*="background:#1a1f2e" i],
    [style*="background-color: #1a1f2e" i],
    [style*="background-color:#1a1f2e" i],
    [style*="background: rgb(26, 31, 46)" i],
    [style*="background:rgb(26, 31, 46)" i],
    [style*="background-color: rgb(26, 31, 46)" i],
    [style*="background-color:rgb(26, 31, 46)" i],
    [style*="background: #1a2a38" i],
    [style*="background:#1a2a38" i],
    [style*="background-color: #1a2a38" i],
    [style*="background-color:#1a2a38" i],
    [style*="background: rgb(26, 42, 56)" i],
    [style*="background:rgb(26, 42, 56)" i],
    [style*="background-color: rgb(26, 42, 56)" i],
    [style*="background-color:rgb(26, 42, 56)" i],
    [style*="background: #1c2129" i],
    [style*="background:#1c2129" i],
    [style*="background-color: #1c2129" i],
    [style*="background-color:#1c2129" i],
    [style*="background: rgb(28, 33, 41)" i],
    [style*="background:rgb(28, 33, 41)" i],
    [style*="background-color: rgb(28, 33, 41)" i],
    [style*="background-color:rgb(28, 33, 41)" i],
    [style*="background: #1e1e1e" i],
    [style*="background:#1e1e1e" i],
    [style*="background-color: #1e1e1e" i],
    [style*="background-color:#1e1e1e" i],
    [style*="background: rgb(30, 30, 30)" i],
    [style*="background:rgb(30, 30, 30)" i],
    [style*="background-color: rgb(30, 30, 30)" i],
    [style*="background-color:rgb(30, 30, 30)" i],
    [style*="background: #1e2130" i],
    [style*="background:#1e2130" i],
    [style*="background-color: #1e2130" i],
    [style*="background-color:#1e2130" i],
    [style*="background: rgb(30, 33, 48)" i],
    [style*="background:rgb(30, 33, 48)" i],
    [style*="background-color: rgb(30, 33, 48)" i],
    [style*="background-color:rgb(30, 33, 48)" i],
    [style*="background: #1e2229" i],
    [style*="background:#1e2229" i],
    [style*="background-color: #1e2229" i],
    [style*="background-color:#1e2229" i],
    [style*="background: rgb(30, 34, 41)" i],
    [style*="background:rgb(30, 34, 41)" i],
    [style*="background-color: rgb(30, 34, 41)" i],
    [style*="background-color:rgb(30, 34, 41)" i],
    [style*="background: #1e2a35" i],
    [style*="background:#1e2a35" i],
    [style*="background-color: #1e2a35" i],
    [style*="background-color:#1e2a35" i],
    [style*="background: rgb(30, 42, 53)" i],
    [style*="background:rgb(30, 42, 53)" i],
    [style*="background-color: rgb(30, 42, 53)" i],
    [style*="background-color:rgb(30, 42, 53)" i],
    [style*="background: #1e2a3a" i],
    [style*="background:#1e2a3a" i],
    [style*="background-color: #1e2a3a" i],
    [style*="background-color:#1e2a3a" i],
    [style*="background: rgb(30, 42, 58)" i],
    [style*="background:rgb(30, 42, 58)" i],
    [style*="background-color: rgb(30, 42, 58)" i],
    [style*="background-color:rgb(30, 42, 58)" i],
    [style*="background: #1e4d2b" i],
    [style*="background:#1e4d2b" i],
    [style*="background-color: #1e4d2b" i],
    [style*="background-color:#1e4d2b" i],
    [style*="background: rgb(30, 77, 43)" i],
    [style*="background:rgb(30, 77, 43)" i],
    [style*="background-color: rgb(30, 77, 43)" i],
    [style*="background-color:rgb(30, 77, 43)" i],
    [style*="background: #22303c" i],
    [style*="background:#22303c" i],
    [style*="background-color: #22303c" i],
    [style*="background-color:#22303c" i],
    [style*="background: rgb(34, 48, 60)" i],
    [style*="background:rgb(34, 48, 60)" i],
    [style*="background-color: rgb(34, 48, 60)" i],
    [style*="background-color:rgb(34, 48, 60)" i],
    [style*="background: #252525" i],
    [style*="background:#252525" i],
    [style*="background-color: #252525" i],
    [style*="background-color:#252525" i],
    [style*="background: rgb(37, 37, 37)" i],
    [style*="background:rgb(37, 37, 37)" i],
    [style*="background-color: rgb(37, 37, 37)" i],
    [style*="background-color:rgb(37, 37, 37)" i],
    [style*="background: #2a2a2a" i],
    [style*="background:#2a2a2a" i],
    [style*="background-color: #2a2a2a" i],
    [style*="background-color:#2a2a2a" i],
    [style*="background: rgb(42, 42, 42)" i],
    [style*="background:rgb(42, 42, 42)" i],
    [style*="background-color: rgb(42, 42, 42)" i],
    [style*="background-color:rgb(42, 42, 42)" i],
    [style*="background: #2a2d3a" i],
    [style*="background:#2a2d3a" i],
    [style*="background-color: #2a2d3a" i],
    [style*="background-color:#2a2d3a" i],
    [style*="background: rgb(42, 45, 58)" i],
    [style*="background:rgb(42, 45, 58)" i],
    [style*="background-color: rgb(42, 45, 58)" i],
    [style*="background-color:rgb(42, 45, 58)" i],
    [style*="background: #2a2f36" i],
    [style*="background:#2a2f36" i],
    [style*="background-color: #2a2f36" i],
    [style*="background-color:#2a2f36" i],
    [style*="background: rgb(42, 47, 54)" i],
    [style*="background:rgb(42, 47, 54)" i],
    [style*="background-color: rgb(42, 47, 54)" i],
    [style*="background-color:rgb(42, 47, 54)" i],
    [style*="background: #2b2d42" i],
    [style*="background:#2b2d42" i],
    [style*="background-color: #2b2d42" i],
    [style*="background-color:#2b2d42" i],
    [style*="background: rgb(43, 45, 66)" i],
    [style*="background:rgb(43, 45, 66)" i],
    [style*="background-color: rgb(43, 45, 66)" i],
    [style*="background-color:rgb(43, 45, 66)" i],
    [style*="background: #2b2f36" i],
    [style*="background:#2b2f36" i],
    [style*="background-color: #2b2f36" i],
    [style*="background-color:#2b2f36" i],
    [style*="background: rgb(43, 47, 54)" i],
    [style*="background:rgb(43, 47, 54)" i],
    [style*="background-color: rgb(43, 47, 54)" i],
    [style*="background-color:rgb(43, 47, 54)" i],
    [style*="background: #2d2d2d" i],
    [style*="background:#2d2d2d" i],
    [style*="background-color: #2d2d2d" i],
    [style*="background-color:#2d2d2d" i],
    [style*="background: rgb(45, 45, 45)" i],
    [style*="background:rgb(45, 45, 45)" i],
    [style*="background-color: rgb(45, 45, 45)" i],
    [style*="background-color:rgb(45, 45, 45)" i],
    [style*="background: #2d3238" i],
    [style*="background:#2d3238" i],
    [style*="background-color: #2d3238" i],
    [style*="background-color:#2d3238" i],
    [style*="background: rgb(45, 50, 56)" i],
    [style*="background:rgb(45, 50, 56)" i],
    [style*="background-color: rgb(45, 50, 56)" i],
    [style*="background-color:rgb(45, 50, 56)" i],
    [style*="background: #333" i],
    [style*="background:#333" i],
    [style*="background-color: #333" i],
    [style*="background-color:#333" i],
    [style*="background: rgb(51, 51, 51)" i],
    [style*="background:rgb(51, 51, 51)" i],
    [style*="background-color: rgb(51, 51, 51)" i],
    [style*="background-color:rgb(51, 51, 51)" i],
    [style*="background: #3a1a1a" i],
    [style*="background:#3a1a1a" i],
    [style*="background-color: #3a1a1a" i],
    [style*="background-color:#3a1a1a" i],
    [style*="background: rgb(58, 26, 26)" i],
    [style*="background:rgb(58, 26, 26)" i],
    [style*="background-color: rgb(58, 26, 26)" i],
    [style*="background-color:rgb(58, 26, 26)" i],
    [style*="background: #3a3a3a" i],
    [style*="background:#3a3a3a" i],
    [style*="background-color: #3a3a3a" i],
    [style*="background-color:#3a3a3a" i],
    [style*="background: rgb(58, 58, 58)" i],
    [style*="background:rgb(58, 58, 58)" i],
    [style*="background-color: rgb(58, 58, 58)" i],
    [style*="background-color:rgb(58, 58, 58)" i],
    [style*="background: #3b3838" i],
    [style*="background:#3b3838" i],
    [style*="background-color: #3b3838" i],
    [style*="background-color:#3b3838" i],
    [style*="background: rgb(59, 56, 56)" i],
    [style*="background:rgb(59, 56, 56)" i],
    [style*="background-color: rgb(59, 56, 56)" i],
    [style*="background-color:rgb(59, 56, 56)" i],
    [style*="background: #4a1a1a" i],
    [style*="background:#4a1a1a" i],
    [style*="background-color: #4a1a1a" i],
    [style*="background-color:#4a1a1a" i],
    [style*="background: rgb(74, 26, 26)" i],
    [style*="background:rgb(74, 26, 26)" i],
    [style*="background-color: rgb(74, 26, 26)" i],
    [style*="background-color:rgb(74, 26, 26)" i],
    [style*="background: rgba(4, 35, 73" i],
    [style*="background:rgba(4, 35, 73" i],
    [style*="background-color: rgba(4, 35, 73" i],
    [style*="background-color:rgba(4, 35, 73" i],
    [style*="background: rgb(4, 35, 73" i],
    [style*="background:rgb(4, 35, 73" i],
    [style*="background-color: rgb(4, 35, 73" i],
    [style*="background-color:rgb(4, 35, 73" i],
    [style*="background: rgba(4,35,73" i],
    [style*="background:rgba(4,35,73" i],
    [style*="background-color: rgba(4,35,73" i],
    [style*="background-color:rgba(4,35,73" i],
    [style*="background: rgb(4,35,73" i],
    [style*="background:rgb(4,35,73" i],
    [style*="background-color: rgb(4,35,73" i],
    [style*="background-color:rgb(4,35,73" i],
    [style*="background: rgba(10, 12, 16" i],
    [style*="background:rgba(10, 12, 16" i],
    [style*="background-color: rgba(10, 12, 16" i],
    [style*="background-color:rgba(10, 12, 16" i],
    [style*="background: rgb(10, 12, 16" i],
    [style*="background:rgb(10, 12, 16" i],
    [style*="background-color: rgb(10, 12, 16" i],
    [style*="background-color:rgb(10, 12, 16" i],
    [style*="background: rgba(10,12,16" i],
    [style*="background:rgba(10,12,16" i],
    [style*="background-color: rgba(10,12,16" i],
    [style*="background-color:rgba(10,12,16" i],
    [style*="background: rgb(10,12,16" i],
    [style*="background:rgb(10,12,16" i],
    [style*="background-color: rgb(10,12,16" i],
    [style*="background-color:rgb(10,12,16" i],
    [style*="background: rgba(26, 26, 26" i],
    [style*="background:rgba(26, 26, 26" i],
    [style*="background-color: rgba(26, 26, 26" i],
    [style*="background-color:rgba(26, 26, 26" i],
    [style*="background: rgb(26, 26, 26" i],
    [style*="background:rgb(26, 26, 26" i],
    [style*="background-color: rgb(26, 26, 26" i],
    [style*="background-color:rgb(26, 26, 26" i],
    [style*="background: rgba(26,26,26" i],
    [style*="background:rgba(26,26,26" i],
    [style*="background-color: rgba(26,26,26" i],
    [style*="background-color:rgba(26,26,26" i],
    [style*="background: rgb(26,26,26" i],
    [style*="background:rgb(26,26,26" i],
    [style*="background-color: rgb(26,26,26" i],
    [style*="background-color:rgb(26,26,26" i],
    [style*="background: rgba(26, 58, 82" i],
    [style*="background:rgba(26, 58, 82" i],
    [style*="background-color: rgba(26, 58, 82" i],
    [style*="background-color:rgba(26, 58, 82" i],
    [style*="background: rgb(26, 58, 82" i],
    [style*="background:rgb(26, 58, 82" i],
    [style*="background-color: rgb(26, 58, 82" i],
    [style*="background-color:rgb(26, 58, 82" i],
    [style*="background: rgba(26,58,82" i],
    [style*="background:rgba(26,58,82" i],
    [style*="background-color: rgba(26,58,82" i],
    [style*="background-color:rgba(26,58,82" i],
    [style*="background: rgb(26,58,82" i],
    [style*="background:rgb(26,58,82" i],
    [style*="background-color: rgb(26,58,82" i],
    [style*="background-color:rgb(26,58,82" i],
    [style*="background: rgba(44, 62, 80" i],
    [style*="background:rgba(44, 62, 80" i],
    [style*="background-color: rgba(44, 62, 80" i],
    [style*="background-color:rgba(44, 62, 80" i],
    [style*="background: rgb(44, 62, 80" i],
    [style*="background:rgb(44, 62, 80" i],
    [style*="background-color: rgb(44, 62, 80" i],
    [style*="background-color:rgb(44, 62, 80" i],
    [style*="background: rgba(44,62,80" i],
    [style*="background:rgba(44,62,80" i],
    [style*="background-color: rgba(44,62,80" i],
    [style*="background-color:rgba(44,62,80" i],
    [style*="background: rgb(44,62,80" i],
    [style*="background:rgb(44,62,80" i],
    [style*="background-color: rgb(44,62,80" i],
    [style*="background-color:rgb(44,62,80" i],
    [style*="background: rgba(52, 58, 64" i],
    [style*="background:rgba(52, 58, 64" i],
    [style*="background-color: rgba(52, 58, 64" i],
    [style*="background-color:rgba(52, 58, 64" i],
    [style*="background: rgb(52, 58, 64" i],
    [style*="background:rgb(52, 58, 64" i],
    [style*="background-color: rgb(52, 58, 64" i],
    [style*="background-color:rgb(52, 58, 64" i],
    [style*="background: rgba(52,58,64" i],
    [style*="background:rgba(52,58,64" i],
    [style*="background-color: rgba(52,58,64" i],
    [style*="background-color:rgba(52,58,64" i],
    [style*="background: rgb(52,58,64" i],
    [style*="background:rgb(52,58,64" i],
    [style*="background-color: rgb(52,58,64" i],
    [style*="background-color:rgb(52,58,64" i],
    [style*="background: rgba(52, 73, 94" i],
    [style*="background:rgba(52, 73, 94" i],
    [style*="background-color: rgba(52, 73, 94" i],
    [style*="background-color:rgba(52, 73, 94" i],
    [style*="background: rgb(52, 73, 94" i],
    [style*="background:rgb(52, 73, 94" i],
    [style*="background-color: rgb(52, 73, 94" i],
    [style*="background-color:rgb(52, 73, 94" i],
    [style*="background: rgba(52,73,94" i],
    [style*="background:rgba(52,73,94" i],
    [style*="background-color: rgba(52,73,94" i],
    [style*="background-color:rgba(52,73,94" i],
    [style*="background: rgb(52,73,94" i],
    [style*="background:rgb(52,73,94" i],
    [style*="background-color: rgb(52,73,94" i],
    [style*="background-color:rgb(52,73,94" i]
) {
    background-color: var(--hig-bg2) !important;
}
:root[data-theme="light"] :is(input:not([type="color"]), select, textarea)[style*="background" i] {
    background-color: var(--hig-field) !important;
    color: var(--hig-label) !important;
    border-color: var(--hig-field-line) !important;
}
:root[data-theme="light"] [style*="color" i]:is(
    [style*="color: #b8c9e2" i],
    [style*="color:#b8c9e2" i],
    [style*="color: rgb(184, 201, 226)" i],
    [style*="color:rgb(184, 201, 226)" i],
    [style*="color: #bbb" i],
    [style*="color:#bbb" i],
    [style*="color: rgb(187, 187, 187)" i],
    [style*="color:rgb(187, 187, 187)" i],
    [style*="color: #bdc3c7" i],
    [style*="color:#bdc3c7" i],
    [style*="color: rgb(189, 195, 199)" i],
    [style*="color:rgb(189, 195, 199)" i],
    [style*="color: #c7cfd9" i],
    [style*="color:#c7cfd9" i],
    [style*="color: rgb(199, 207, 217)" i],
    [style*="color:rgb(199, 207, 217)" i],
    [style*="color: #c7d6e8" i],
    [style*="color:#c7d6e8" i],
    [style*="color: rgb(199, 214, 232)" i],
    [style*="color:rgb(199, 214, 232)" i],
    [style*="color: #cbd5e1" i],
    [style*="color:#cbd5e1" i],
    [style*="color: rgb(203, 213, 225)" i],
    [style*="color:rgb(203, 213, 225)" i],
    [style*="color: #ccc" i],
    [style*="color:#ccc" i],
    [style*="color: rgb(204, 204, 204)" i],
    [style*="color:rgb(204, 204, 204)" i],
    [style*="color: #d0e0f0" i],
    [style*="color:#d0e0f0" i],
    [style*="color: rgb(208, 224, 240)" i],
    [style*="color:rgb(208, 224, 240)" i],
    [style*="color: #d1d5db" i],
    [style*="color:#d1d5db" i],
    [style*="color: rgb(209, 213, 219)" i],
    [style*="color:rgb(209, 213, 219)" i],
    [style*="color: #d9d9d9" i],
    [style*="color:#d9d9d9" i],
    [style*="color: rgb(217, 217, 217)" i],
    [style*="color:rgb(217, 217, 217)" i],
    [style*="color: #dce4ef" i],
    [style*="color:#dce4ef" i],
    [style*="color: rgb(220, 228, 239)" i],
    [style*="color:rgb(220, 228, 239)" i],
    [style*="color: #ddd" i],
    [style*="color:#ddd" i],
    [style*="color: rgb(221, 221, 221)" i],
    [style*="color:rgb(221, 221, 221)" i],
    [style*="color: #dee2e6" i],
    [style*="color:#dee2e6" i],
    [style*="color: rgb(222, 226, 230)" i],
    [style*="color:rgb(222, 226, 230)" i],
    [style*="color: #e0e0e0" i],
    [style*="color:#e0e0e0" i],
    [style*="color: rgb(224, 224, 224)" i],
    [style*="color:rgb(224, 224, 224)" i],
    [style*="color: #e2e8f0" i],
    [style*="color:#e2e8f0" i],
    [style*="color: rgb(226, 232, 240)" i],
    [style*="color:rgb(226, 232, 240)" i],
    [style*="color: #e5e7eb" i],
    [style*="color:#e5e7eb" i],
    [style*="color: rgb(229, 231, 235)" i],
    [style*="color:rgb(229, 231, 235)" i],
    [style*="color: #e6ebf2" i],
    [style*="color:#e6ebf2" i],
    [style*="color: rgb(230, 235, 242)" i],
    [style*="color:rgb(230, 235, 242)" i],
    [style*="color: #e6edf3" i],
    [style*="color:#e6edf3" i],
    [style*="color: rgb(230, 237, 243)" i],
    [style*="color:rgb(230, 237, 243)" i],
    [style*="color: #e9ecef" i],
    [style*="color:#e9ecef" i],
    [style*="color: rgb(233, 236, 239)" i],
    [style*="color:rgb(233, 236, 239)" i],
    [style*="color: #ecf0f1" i],
    [style*="color:#ecf0f1" i],
    [style*="color: rgb(236, 240, 241)" i],
    [style*="color:rgb(236, 240, 241)" i],
    [style*="color: #eee" i],
    [style*="color:#eee" i],
    [style*="color: rgb(238, 238, 238)" i],
    [style*="color:rgb(238, 238, 238)" i],
    [style*="color: #f0f4ff" i],
    [style*="color:#f0f4ff" i],
    [style*="color: rgb(240, 244, 255)" i],
    [style*="color:rgb(240, 244, 255)" i],
    [style*="color: #f9fafb" i],
    [style*="color:#f9fafb" i],
    [style*="color: rgb(249, 250, 251)" i],
    [style*="color:rgb(249, 250, 251)" i],
    [style*="color: #fff" i],
    [style*="color:#fff" i],
    [style*="color: rgb(255, 255, 255)" i],
    [style*="color:rgb(255, 255, 255)" i],
    [style*="color: #ffffff" i],
    [style*="color:#ffffff" i],
    [style*="color: rgb(255, 255, 255)" i],
    [style*="color:rgb(255, 255, 255)" i],
    [style*="color: rgba(255, 255, 255" i],
    [style*="color:rgba(255, 255, 255" i],
    [style*="color: rgba(255,255,255" i],
    [style*="color:rgba(255,255,255" i],
    [style*="color: rgba(255, 255, 255" i],
    [style*="color:rgba(255, 255, 255" i],
    [style*="color: rgba(255,255,255" i],
    [style*="color:rgba(255,255,255" i],
    [style*="color: rgba(255, 255, 255" i],
    [style*="color:rgba(255, 255, 255" i],
    [style*="color: rgba(255,255,255" i],
    [style*="color:rgba(255,255,255" i],
    [style*="color: rgba(255, 255, 255" i],
    [style*="color:rgba(255, 255, 255" i],
    [style*="color: rgba(255,255,255" i],
    [style*="color:rgba(255,255,255" i],
    [style*="color: rgba(255, 255, 255" i],
    [style*="color:rgba(255, 255, 255" i],
    [style*="color: rgba(255,255,255" i],
    [style*="color:rgba(255,255,255" i],
    [style*="color: rgb(255, 255, 255)" i],
    [style*="color:rgb(255, 255, 255)" i],
    [style*="color: white" i],
    [style*="color:white" i]
):not([style*="background: #" i], [style*="background:#" i], [style*="background-color: #" i], [style*="background-color:#" i], [style*="background: rgb(" i], [style*="background-color: rgb(" i], [style*="gradient" i], [style*="0.8)" i], [style*="0.85)" i], [style*="0.9)" i], [style*="0.95)" i], [style*=", 1)" i], .leaflet-marker-icon *, .maplibregl-marker *) {
    color: var(--hig-label) !important;
}
:root[data-theme="light"] [style*="color" i]:is(
    [style*="color: #7d8794" i],
    [style*="color:#7d8794" i],
    [style*="color: rgb(125, 135, 148)" i],
    [style*="color:rgb(125, 135, 148)" i],
    [style*="color: #868e96" i],
    [style*="color:#868e96" i],
    [style*="color: rgb(134, 142, 150)" i],
    [style*="color:rgb(134, 142, 150)" i],
    [style*="color: #888" i],
    [style*="color:#888" i],
    [style*="color: rgb(136, 136, 136)" i],
    [style*="color:rgb(136, 136, 136)" i],
    [style*="color: #8a9bb0" i],
    [style*="color:#8a9bb0" i],
    [style*="color: rgb(138, 155, 176)" i],
    [style*="color:rgb(138, 155, 176)" i],
    [style*="color: #8b949e" i],
    [style*="color:#8b949e" i],
    [style*="color: rgb(139, 148, 158)" i],
    [style*="color:rgb(139, 148, 158)" i],
    [style*="color: #8b95a1" i],
    [style*="color:#8b95a1" i],
    [style*="color: rgb(139, 149, 161)" i],
    [style*="color:rgb(139, 149, 161)" i],
    [style*="color: #8b98a8" i],
    [style*="color:#8b98a8" i],
    [style*="color: rgb(139, 152, 168)" i],
    [style*="color:rgb(139, 152, 168)" i],
    [style*="color: #94a3b8" i],
    [style*="color:#94a3b8" i],
    [style*="color: rgb(148, 163, 184)" i],
    [style*="color:rgb(148, 163, 184)" i],
    [style*="color: #9ca3af" i],
    [style*="color:#9ca3af" i],
    [style*="color: rgb(156, 163, 175)" i],
    [style*="color:rgb(156, 163, 175)" i],
    [style*="color: #9db4c0" i],
    [style*="color:#9db4c0" i],
    [style*="color: rgb(157, 180, 192)" i],
    [style*="color:rgb(157, 180, 192)" i],
    [style*="color: #a0a0a0" i],
    [style*="color:#a0a0a0" i],
    [style*="color: rgb(160, 160, 160)" i],
    [style*="color:rgb(160, 160, 160)" i],
    [style*="color: #a0aab4" i],
    [style*="color:#a0aab4" i],
    [style*="color: rgb(160, 170, 180)" i],
    [style*="color:rgb(160, 170, 180)" i],
    [style*="color: #a0b5c7" i],
    [style*="color:#a0b5c7" i],
    [style*="color: rgb(160, 181, 199)" i],
    [style*="color:rgb(160, 181, 199)" i],
    [style*="color: #aaa" i],
    [style*="color:#aaa" i],
    [style*="color: rgb(170, 170, 170)" i],
    [style*="color:rgb(170, 170, 170)" i],
    [style*="color: #adb5bd" i],
    [style*="color:#adb5bd" i],
    [style*="color: rgb(173, 181, 189)" i],
    [style*="color:rgb(173, 181, 189)" i],
    [style*="color: #b0b0b0" i],
    [style*="color:#b0b0b0" i],
    [style*="color: rgb(176, 176, 176)" i],
    [style*="color:rgb(176, 176, 176)" i]
):not([style*="background: #" i], [style*="background:#" i], [style*="background-color: #" i], [style*="background-color:#" i], [style*="background: rgb(" i], [style*="background-color: rgb(" i], [style*="gradient" i], [style*="0.8)" i], [style*="0.85)" i], [style*="0.9)" i], [style*="0.95)" i], [style*=", 1)" i], .leaflet-marker-icon *, .maplibregl-marker *) {
    color: var(--hig-label2) !important;
}
:root[data-theme="light"] [style*="color" i]:is(
    [style*="color: #58a6ff" i],
    [style*="color:#58a6ff" i],
    [style*="color: rgb(88, 166, 255)" i],
    [style*="color:rgb(88, 166, 255)" i],
    [style*="color: #60a5fa" i],
    [style*="color:#60a5fa" i],
    [style*="color: rgb(96, 165, 250)" i],
    [style*="color:rgb(96, 165, 250)" i],
    [style*="color: #7dd3fc" i],
    [style*="color:#7dd3fc" i],
    [style*="color: rgb(125, 211, 252)" i],
    [style*="color:rgb(125, 211, 252)" i],
    [style*="color: #7eb8d4" i],
    [style*="color:#7eb8d4" i],
    [style*="color: rgb(126, 184, 212)" i],
    [style*="color:rgb(126, 184, 212)" i],
    [style*="color: #90caf9" i],
    [style*="color:#90caf9" i],
    [style*="color: rgb(144, 202, 249)" i],
    [style*="color:rgb(144, 202, 249)" i],
    [style*="color: #93c5fd" i],
    [style*="color:#93c5fd" i],
    [style*="color: rgb(147, 197, 253)" i],
    [style*="color:rgb(147, 197, 253)" i],
    [style*="color: #9db4d1" i],
    [style*="color:#9db4d1" i],
    [style*="color: rgb(157, 180, 209)" i],
    [style*="color:rgb(157, 180, 209)" i],
    [style*="color: #9eb4cc" i],
    [style*="color:#9eb4cc" i],
    [style*="color: rgb(158, 180, 204)" i],
    [style*="color:rgb(158, 180, 204)" i],
    [style*="color: #a0b8d0" i],
    [style*="color:#a0b8d0" i],
    [style*="color: rgb(160, 184, 208)" i],
    [style*="color:rgb(160, 184, 208)" i],
    [style*="color: #b4befe" i],
    [style*="color:#b4befe" i],
    [style*="color: rgb(180, 190, 254)" i],
    [style*="color:rgb(180, 190, 254)" i],
    [style*="color: rgba(100, 181, 246" i],
    [style*="color:rgba(100, 181, 246" i],
    [style*="color: rgba(100,181,246" i],
    [style*="color:rgba(100,181,246" i],
    [style*="color: rgba(100, 181, 246" i],
    [style*="color:rgba(100, 181, 246" i],
    [style*="color: rgba(100,181,246" i],
    [style*="color:rgba(100,181,246" i],
    [style*="color: rgba(100, 181, 246" i],
    [style*="color:rgba(100, 181, 246" i],
    [style*="color: rgba(100,181,246" i],
    [style*="color:rgba(100,181,246" i]
):not([style*="background: #" i], [style*="background:#" i], [style*="background-color: #" i], [style*="background-color:#" i], [style*="background: rgb(" i], [style*="background-color: rgb(" i], [style*="gradient" i], [style*="0.8)" i], [style*="0.85)" i], [style*="0.9)" i], [style*="0.95)" i], [style*=", 1)" i], .leaflet-marker-icon *, .maplibregl-marker *) {
    color: var(--hig-blue-text) !important;
}
:root[data-theme="light"] [style*="color" i]:is(
    [style*="color: #00ff00" i],
    [style*="color:#00ff00" i],
    [style*="color: rgb(0, 255, 0)" i],
    [style*="color:rgb(0, 255, 0)" i],
    [style*="color: #22c55e" i],
    [style*="color:#22c55e" i],
    [style*="color: rgb(34, 197, 94)" i],
    [style*="color:rgb(34, 197, 94)" i],
    [style*="color: #2ecc71" i],
    [style*="color:#2ecc71" i],
    [style*="color: rgb(46, 204, 113)" i],
    [style*="color:rgb(46, 204, 113)" i],
    [style*="color: #34d399" i],
    [style*="color:#34d399" i],
    [style*="color: rgb(52, 211, 153)" i],
    [style*="color:rgb(52, 211, 153)" i],
    [style*="color: #3fb950" i],
    [style*="color:#3fb950" i],
    [style*="color: rgb(63, 185, 80)" i],
    [style*="color:rgb(63, 185, 80)" i],
    [style*="color: #4ade80" i],
    [style*="color:#4ade80" i],
    [style*="color: rgb(74, 222, 128)" i],
    [style*="color:rgb(74, 222, 128)" i],
    [style*="color: #57cc99" i],
    [style*="color:#57cc99" i],
    [style*="color: rgb(87, 204, 153)" i],
    [style*="color:rgb(87, 204, 153)" i],
    [style*="color: #7ec98f" i],
    [style*="color:#7ec98f" i],
    [style*="color: rgb(126, 201, 143)" i],
    [style*="color:rgb(126, 201, 143)" i],
    [style*="color: #7fc97f" i],
    [style*="color:#7fc97f" i],
    [style*="color: rgb(127, 201, 127)" i],
    [style*="color:rgb(127, 201, 127)" i],
    [style*="color: #86efac" i],
    [style*="color:#86efac" i],
    [style*="color: rgb(134, 239, 172)" i],
    [style*="color:rgb(134, 239, 172)" i],
    [style*="color: #adeaab" i],
    [style*="color:#adeaab" i],
    [style*="color: rgb(173, 234, 171)" i],
    [style*="color:rgb(173, 234, 171)" i]
):not([style*="background: #" i], [style*="background:#" i], [style*="background-color: #" i], [style*="background-color:#" i], [style*="background: rgb(" i], [style*="background-color: rgb(" i], [style*="gradient" i], [style*="0.8)" i], [style*="0.85)" i], [style*="0.9)" i], [style*="0.95)" i], [style*=", 1)" i], .leaflet-marker-icon *, .maplibregl-marker *) {
    color: var(--hig-green-text) !important;
}
:root[data-theme="light"] [style*="color" i]:is(
    [style*="color: #d4a574" i],
    [style*="color:#d4a574" i],
    [style*="color: rgb(212, 165, 116)" i],
    [style*="color:rgb(212, 165, 116)" i],
    [style*="color: #f0a020" i],
    [style*="color:#f0a020" i],
    [style*="color: rgb(240, 160, 32)" i],
    [style*="color:rgb(240, 160, 32)" i],
    [style*="color: #f39c12" i],
    [style*="color:#f39c12" i],
    [style*="color: rgb(243, 156, 18)" i],
    [style*="color:rgb(243, 156, 18)" i],
    [style*="color: #f59e0b" i],
    [style*="color:#f59e0b" i],
    [style*="color: rgb(245, 158, 11)" i],
    [style*="color:rgb(245, 158, 11)" i],
    [style*="color: #fb923c" i],
    [style*="color:#fb923c" i],
    [style*="color: rgb(251, 146, 60)" i],
    [style*="color:rgb(251, 146, 60)" i],
    [style*="color: #fd7e14" i],
    [style*="color:#fd7e14" i],
    [style*="color: rgb(253, 126, 20)" i],
    [style*="color:rgb(253, 126, 20)" i],
    [style*="color: #ff851b" i],
    [style*="color:#ff851b" i],
    [style*="color: rgb(255, 133, 27)" i],
    [style*="color:rgb(255, 133, 27)" i],
    [style*="color: #ff8800" i],
    [style*="color:#ff8800" i],
    [style*="color: rgb(255, 136, 0)" i],
    [style*="color:rgb(255, 136, 0)" i],
    [style*="color: #ff8c00" i],
    [style*="color:#ff8c00" i],
    [style*="color: rgb(255, 140, 0)" i],
    [style*="color:rgb(255, 140, 0)" i],
    [style*="color: #ff9800" i],
    [style*="color:#ff9800" i],
    [style*="color: rgb(255, 152, 0)" i],
    [style*="color:rgb(255, 152, 0)" i]
):not([style*="background: #" i], [style*="background:#" i], [style*="background-color: #" i], [style*="background-color:#" i], [style*="background: rgb(" i], [style*="background-color: rgb(" i], [style*="gradient" i], [style*="0.8)" i], [style*="0.85)" i], [style*="0.9)" i], [style*="0.95)" i], [style*=", 1)" i], .leaflet-marker-icon *, .maplibregl-marker *) {
    color: var(--hig-orange-text) !important;
}
:root[data-theme="light"] [style*="color" i]:is(
    [style*="color: #fca5a5" i],
    [style*="color:#fca5a5" i],
    [style*="color: rgb(252, 165, 165)" i],
    [style*="color:rgb(252, 165, 165)" i]
):not([style*="background: #" i], [style*="background:#" i], [style*="background-color: #" i], [style*="background-color:#" i], [style*="background: rgb(" i], [style*="background-color: rgb(" i], [style*="gradient" i], [style*="0.8)" i], [style*="0.85)" i], [style*="0.9)" i], [style*="0.95)" i], [style*=", 1)" i], .leaflet-marker-icon *, .maplibregl-marker *) {
    color: var(--hig-red-text) !important;
}
:root[data-theme="light"] [style*="color" i]:is(
    [style*="color: #0dcaf0" i],
    [style*="color:#0dcaf0" i],
    [style*="color: rgb(13, 202, 240)" i],
    [style*="color:rgb(13, 202, 240)" i],
    [style*="color: #10b981" i],
    [style*="color:#10b981" i],
    [style*="color: rgb(16, 185, 129)" i],
    [style*="color:rgb(16, 185, 129)" i],
    [style*="color: #5bc0de" i],
    [style*="color:#5bc0de" i],
    [style*="color: rgb(91, 192, 222)" i],
    [style*="color:rgb(91, 192, 222)" i],
    [style*="color: #67e8f9" i],
    [style*="color:#67e8f9" i],
    [style*="color: rgb(103, 232, 249)" i],
    [style*="color:rgb(103, 232, 249)" i],
    [style*="color: rgb(60, 199, 160)" i],
    [style*="color:rgb(60, 199, 160)" i],
    [style*="color: rgb(60,199,160)" i],
    [style*="color:rgb(60,199,160)" i],
    [style*="color: rgba(13, 202, 240" i],
    [style*="color:rgba(13, 202, 240" i],
    [style*="color: rgba(13,202,240" i],
    [style*="color:rgba(13,202,240" i]
):not([style*="background: #" i], [style*="background:#" i], [style*="background-color: #" i], [style*="background-color:#" i], [style*="background: rgb(" i], [style*="background-color: rgb(" i], [style*="gradient" i], [style*="0.8)" i], [style*="0.85)" i], [style*="0.9)" i], [style*="0.95)" i], [style*=", 1)" i], .leaflet-marker-icon *, .maplibregl-marker *) {
    color: var(--hig-teal-text) !important;
}
:root[data-theme="light"] [style*="color" i]:is(
    [style*="color: #d8b26a" i],
    [style*="color:#d8b26a" i],
    [style*="color: rgb(216, 178, 106)" i],
    [style*="color:rgb(216, 178, 106)" i],
    [style*="color: #fbbf24" i],
    [style*="color:#fbbf24" i],
    [style*="color: rgb(251, 191, 36)" i],
    [style*="color:rgb(251, 191, 36)" i],
    [style*="color: #fcd34d" i],
    [style*="color:#fcd34d" i],
    [style*="color: rgb(252, 211, 77)" i],
    [style*="color:rgb(252, 211, 77)" i],
    [style*="color: #fde68a" i],
    [style*="color:#fde68a" i],
    [style*="color: rgb(253, 230, 138)" i],
    [style*="color:rgb(253, 230, 138)" i],
    [style*="color: #ffc107" i],
    [style*="color:#ffc107" i],
    [style*="color: rgb(255, 193, 7)" i],
    [style*="color:rgb(255, 193, 7)" i],
    [style*="color: #ffd700" i],
    [style*="color:#ffd700" i],
    [style*="color: rgb(255, 215, 0)" i],
    [style*="color:rgb(255, 215, 0)" i],
    [style*="color: #fff3cd" i],
    [style*="color:#fff3cd" i],
    [style*="color: rgb(255, 243, 205)" i],
    [style*="color:rgb(255, 243, 205)" i],
    [style*="color: rgba(255, 193, 7" i],
    [style*="color:rgba(255, 193, 7" i],
    [style*="color: rgba(255,193,7" i],
    [style*="color:rgba(255,193,7" i],
    [style*="color: rgba(255, 193, 7" i],
    [style*="color:rgba(255, 193, 7" i],
    [style*="color: rgba(255,193,7" i],
    [style*="color:rgba(255,193,7" i]
):not([style*="background: #" i], [style*="background:#" i], [style*="background-color: #" i], [style*="background-color:#" i], [style*="background: rgb(" i], [style*="background-color: rgb(" i], [style*="gradient" i], [style*="0.8)" i], [style*="0.85)" i], [style*="0.9)" i], [style*="0.95)" i], [style*=", 1)" i], .leaflet-marker-icon *, .maplibregl-marker *) {
    color: var(--hig-yellow-text) !important;
}
:root[data-theme] [style*="color" i]:is(
    [style*="color: #c9962a" i],
    [style*="color:#c9962a" i],
    [style*="color: rgb(201, 150, 42)" i],
    [style*="color:rgb(201, 150, 42)" i],
    [style*="color: #c9a227" i],
    [style*="color:#c9a227" i],
    [style*="color: rgb(201, 162, 39)" i],
    [style*="color:rgb(201, 162, 39)" i],
    [style*="color: #ddb451" i],
    [style*="color:#ddb451" i],
    [style*="color: rgb(221, 180, 81)" i],
    [style*="color:rgb(221, 180, 81)" i],
    [style*="color: #e0b651" i],
    [style*="color:#e0b651" i],
    [style*="color: rgb(224, 182, 81)" i],
    [style*="color:rgb(224, 182, 81)" i],
    [style*="color: #e1b84f" i],
    [style*="color:#e1b84f" i],
    [style*="color: rgb(225, 184, 79)" i],
    [style*="color:rgb(225, 184, 79)" i],
    [style*="color: #f0c674" i],
    [style*="color:#f0c674" i],
    [style*="color: rgb(240, 198, 116)" i],
    [style*="color:rgb(240, 198, 116)" i],
    [style*="color: #fdb813" i],
    [style*="color:#fdb813" i],
    [style*="color: rgb(253, 184, 19)" i],
    [style*="color:rgb(253, 184, 19)" i],
    [style*="color: #ffc845" i],
    [style*="color:#ffc845" i],
    [style*="color: rgb(255, 200, 69)" i],
    [style*="color:rgb(255, 200, 69)" i]
):not([style*="background: #" i], [style*="background:#" i], [style*="background-color: #" i], [style*="background-color:#" i], [style*="background: rgb(" i], [style*="background-color: rgb(" i], [style*="gradient" i], [style*="0.8)" i], [style*="0.85)" i], [style*="0.9)" i], [style*="0.95)" i], [style*=", 1)" i], .leaflet-marker-icon *, .maplibregl-marker *) {
    color: var(--hig-tint-text) !important;
}

/* ---- 4.21 After the inline remaps (these must out-rank 4.20) -------------------- */
/* Ratings are a scale, not an accent: system orange everywhere. */
:root[data-theme] .crew-browse :is(.crew-rate-star, .crew-rate-stars, .crew-rate-stars *, .crew-tile-rating) { color: var(--hig-orange) !important; }
:root[data-theme] .crew-browse .crew-intercom-info-banner strong { color: var(--hig-label) !important; }
:root[data-theme] .crew-browse .crew-intercom-context-wrap { border-color: var(--hig-separator) !important; }
/* Flight Explorer and Visual Debugger telemetry strips over the map (built with
   inline styles in flight-explorer.js / visual-debugger.js): an opaque popover
   surface instead of a black box with a gold border. No backdrop blur: the map
   moves under it on every frame of a pan, and re-blurring that each frame made
   panning stutter (ticket 11770). Visual Debugger's layer switches (navigation.js)
   sit in the same kind of box; left black, their text-light labels went black on
   black in the light appearance. */
:root[data-theme] :is(#flight-explorer-telemetry-box, #visual-debugger-telemetry-box) > div,
:root[data-theme] :is(#visual-debugger-map-controls-content, #visual-debugger-toggle-controls) {
    background: var(--hig-elevated) !important;
    color: var(--hig-label) !important;
    border: var(--hig-hairline) solid var(--hig-separator) !important;
    border-radius: 12px !important;
    box-shadow: var(--hig-menu-shadow) !important;
}
:root[data-theme] #visual-debugger-toggle-controls { color: var(--hig-tint-text) !important; border-radius: 8px !important; }
:root[data-theme] :is(#flight-explorer-telemetry-box, #visual-debugger-telemetry-box) span[style*="253,184,19" i] {
    background: var(--hig-tint-soft) !important;
    color: var(--hig-tint-text) !important;
}
/* Count badges inside filled buttons (Radio 24 / Intercom 0). */
:root[data-theme] :is(.btn-primary, .btn-warning, .btn-success, .btn-danger) .badge:is(.bg-dark, .bg-secondary, .bg-light) {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}
/* Mission boards paint slate gradients and a 95% slate alert inline. */
:root[data-theme="light"] :is(.stats-card, .card-header)[style*="#2c3e50" i],
:root[data-theme="light"] [style*="gradient" i]:is([style*="#2c3e50" i], [style*="#34495e" i]) {
    background: var(--hig-bg2) !important;
    color: var(--hig-label) !important;
    box-shadow: var(--hig-card-shadow) !important;
}
:root[data-theme="light"] .alert:is([style*="52, 73, 94" i], [style*="52,73,94" i]) {
    background: var(--hig-fill3) !important;
    color: var(--hig-label) !important;
}

/* Active sidebar item: its NEW badge goes white on the tint. */
:root[data-theme] .sidebar .nav-link.active .si-nav-badge { color: #fff !important; background: rgba(255, 255, 255, 0.25) !important; }

/* Stats & Metrics (stats-metrics.js): charts over a blurred photo behind a 70% black
   overlay, with white Plotly text. In light appearance the overlay becomes a light
   material and the chart text and gridlines follow the label colors. */
:root[data-theme="light"] .metric-content [style*="background: rgba(0, 0, 0, 0.7)"] { background: rgba(255, 255, 255, 0.8) !important; }
:root[data-theme="light"] .metric-content .main-svg text { fill: var(--hig-label) !important; }
:root[data-theme="light"] .metric-content .main-svg :is(.gridlayer path, .zerolinelayer path, .xaxislayer-above path, .yaxislayer-above path) { stroke: rgba(60, 60, 67, 0.18) !important; }

/* Mission board org chips: white text on data colors (cyan, light blue) needs a darker fill. */
:root[data-theme] .org-bubble { background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)); }
/* Distance, weight and passenger chips (Missions, SkyOps, Commercial Routes) get a dark
   inline fill (green, amber, orange, red, purple); their stylesheet's white text must
   stay white, not follow the label color. */
:root[data-theme] :is(.distance-bubble, .weight-bubble, .pax-bubble) { color: #fff !important; }

/* Groupie completed flights: skynet-content.html fades them to 50% and grays the text
   too. Secondary label color alone reads as "done" without becoming unreadable. */
:root[data-theme] tr.flight-completed { opacity: 1 !important; }
:root[data-theme] tr.flight-completed :is(td, strong, small, div, span:not(.badge)) { color: var(--hig-label2) !important; }
:root[data-theme] tr.flight-completed .badge { background-color: var(--hig-fill) !important; color: var(--hig-label2) !important; }

/* Data-colored table rows (Shipping center product types; admin-shipping.js sets --cat):
   a soft tint of that color in light appearance instead of a solid dark bar. */
:root[data-theme="light"] tr[style*="--cat"] { background-color: color-mix(in srgb, var(--cat) 14%, var(--hig-bg2)) !important; color: var(--hig-label) !important; }
:root[data-theme="light"] tr[style*="--cat"] > td { background-color: transparent !important; color: inherit; }

/* Toast UI editor (News, ToS and changelog editors): its toolbar and mode switch are light by default. */
:root[data-theme="dark"] .toastui-editor-defaultUI :is(.toastui-editor-toolbar, .toastui-editor-defaultUI-toolbar) { background-color: var(--hig-bg3) !important; border-bottom-color: var(--hig-separator) !important; }
:root[data-theme="dark"] .toastui-editor-defaultUI .toastui-editor-toolbar-icons { filter: invert(0.85); border-color: transparent; }
:root[data-theme="dark"] .toastui-editor-defaultUI .toastui-editor-toolbar-divider { background-color: var(--hig-separator); }
:root[data-theme="dark"] .toastui-editor-mode-switch { background-color: var(--hig-bg3) !important; border-top-color: var(--hig-separator) !important; }
:root[data-theme="dark"] .toastui-editor-mode-switch .tab-item { background-color: var(--hig-bg3) !important; color: var(--hig-label2) !important; border-color: var(--hig-separator) !important; }
:root[data-theme="dark"] .toastui-editor-mode-switch .tab-item.active { background-color: var(--hig-bg2) !important; color: var(--hig-label) !important; }

/* Mission / route briefing windows (SkyOps Missions, ACA Missions, Commercial Routes).
   skyops-missions.js, missions.js and commercial-routes.js (stage-only files) paint
   every panel with inline dark colors: a charcoal gradient, slate cards, black wells
   and white text. The inline remap turned the text dark but left the panels, so the
   text vanished. Here they become a grouped sheet with plain cards in either
   appearance. Section titles take the label color and keep their colored rule; the
   type banner and the colored chips keep their fills and white text. */
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) .modal-content {
    background: var(--hig-bg) !important;
    color: var(--hig-label) !important;
    border: 0 !important;
}
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) .modal-header { background: var(--hig-bg2) !important; }
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) .modal-title { color: var(--hig-label) !important; }
:root[data-theme="light"] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) .btn-close-white { filter: none; }
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) :is([style*="background: rgba(52, 73, 94"], [style*="background: rgba(44, 62, 80"]) {
    background: var(--hig-bg2) !important;
    box-shadow: var(--hig-card-shadow);
}
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) :is([style*="background: rgba(0,0,0,0.2)"], [style*="background: rgba(0,0,0,0.3)"], [style*="background: rgba(255, 255, 255, 0.1)"]) {
    background: var(--hig-fill4) !important;
}
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) :is([style*="color: #ffffff"], [style*="color: #fff;"], [style*="color: white"]):not(.type-banner):not(.org-banner):not([style*="background: #"]):not([style*="background-color: #"]) {
    color: var(--hig-label) !important;
}
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) [style*="color: #9ca3af"] { color: var(--hig-label2) !important; }
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) h5[style*="text-transform: uppercase"] { color: var(--hig-label) !important; letter-spacing: 0.02em; }
/* The ATIS and METAR wells in those windows (.si-atis-well, added in the page scripts). */
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) .si-atis-well {
    background: var(--hig-fill4) !important;
    border: 0 !important;
    color: var(--hig-label) !important;
}
/* Their footer buttons carry inline fills (#3b82f6, #0ea5e9, #6b7280) that fight the
   theme's button text colors (SimBrief read blue on sky blue). Filled, tinted and
   gray push buttons, as everywhere else. */
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) .btn-primary[style*="background"] { background: var(--hig-tint) !important; color: var(--hig-on-tint) !important; }
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) .btn-info[style*="background"] { background: var(--hig-tint-soft) !important; color: var(--hig-tint-text) !important; }
:root[data-theme] :is(#skyopsMissionDetailsModal, #missionDetailsModal, #commercialRouteDetailsModal) .btn-secondary[style*="background"] { background: var(--hig-fill3) !important; color: var(--hig-label) !important; }

/* Site banners (site-banners.css) in Light mode: the navy gradient with white text is
   hard to read on a white page, so Light uses a pale blue wash with dark navy text.
   Dark keeps the navy gradient from site-banners.css. */
:root[data-theme="light"] .si-banner {
    background: linear-gradient(90deg, #EAF4FE 0%, #D6EAFC 100%);
    border: 1px solid rgba(0, 122, 255, 0.28);
    border-left: 3px solid var(--hig-blue);
    box-shadow: none;
}
:root[data-theme="light"] .si-banner__title { color: #0B2A4A; text-shadow: none; }
:root[data-theme="light"] .si-banner__message { color: #1F3B57; text-shadow: none; }
:root[data-theme="light"] .si-banner__message a { color: var(--hig-blue-text); }
:root[data-theme="light"] .si-banner__media { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 122, 255, 0.2); }
:root[data-theme="light"] .si-banner__btn { color: var(--hig-blue-text); background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 122, 255, 0.45); }
:root[data-theme="light"] .si-banner__btn:hover { color: var(--hig-blue-text); background: #FFFFFF; border-color: var(--hig-blue); }
:root[data-theme="light"] .si-banner__btn--primary { color: var(--hig-on-tint, #FFFFFF); background: var(--hig-tint, #007AFF); border-color: var(--hig-tint, #007AFF); }
:root[data-theme="light"] .si-banner__btn--primary:hover { color: var(--hig-on-tint, #FFFFFF); background: var(--hig-tint, #007AFF); filter: brightness(1.08); }
:root[data-theme="light"] .si-banner__dismiss { color: rgba(11, 42, 74, 0.6); }
:root[data-theme="light"] .si-banner__dismiss:hover { color: #0B2A4A; background: rgba(0, 122, 255, 0.12); }