*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --sidebar-w: 210px;
      --topbar-h: 48px;
      --sb-bg: #f2f1ea;
      --sb-border: rgba(0,0,0,0.08);
      --sb-section-label: #888785;
      --sb-item-default: #5c5c58;
      --sb-item-active: #1a1a18;
      --sb-item-hover-bg: #e8e7e1;
      --sb-item-active-bg: #dddbd5;
      --sb-divider: rgba(0,0,0,0.06);
      --bg: #ffffff;
      --bg-secondary: #f7f7f5;
      --bg-tertiary: #f0efe9;
      --bg-hover: var(--bg-tertiary);
      --bg-subtle: var(--bg-secondary);
      /* Legacy aliases — map orphan var refs that snuck in across render files to the canonical system */
      --bg-primary: var(--bg);
      --bg-card: var(--bg-secondary);
      --surface: var(--bg);
      --surface-card: var(--bg);
      --surface-subtle: var(--bg-hover);
      --text-primary: #1a1a18;
      --text-secondary: #5c5c58;
      --text-tertiary: #98978f;
      --text-muted: var(--text-tertiary);
      --border: rgba(0,0,0,0.1);
      --border-sm: var(--border);
      --border-md: rgba(0,0,0,0.18);
      --border-dark: var(--border-md);
      --border-lg: var(--border-md);
      /* Depth system — two-layer subtle shadow. Differs by theme: light uses dark-on-light at low
         opacity; dark uses deeper opacity since shadows on dark bg need more strength to register. */
      --card-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
      --card-shadow-hover: 0 2px 6px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
      /* Focus ring — subtle 3px halo around focused inputs/buttons. Override per-element
         to use a different accent color (e.g. purple for custom-model context). */
      --focus-ring: 0 0 0 3px rgba(24, 95, 165, 0.15);
      --accent: var(--blue-mid);
      --blue-dark: var(--blue-text);
      --red: var(--red-mid);
      --green: var(--green-mid);
      --warning: var(--amber-mid);
      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-lg: 12px;
      /* Type scale (theme-agnostic) */
      --font-xs:   11px;
      --font-sm:   12px;
      --font-base: 13px;
      --font-md:   15px;
      --font-lg:   18px;
      --font-xl:   20px;
      --font-2xl:  24px;
      /* Spacing scale (theme-agnostic) */
      --space-xs:  4px;
      --space-sm:  8px;
      --space-md:  12px;
      --space-lg:  16px;
      --space-xl:  24px;
      --blue-bg: #E6F1FB; --blue-text: #0C447C; --blue-mid: #185FA5; --blue-accent: #378ADD;
      --green-bg: #E1F5EE; --green-text: #085041; --green-mid: #0F6E56;
      --amber-bg: #FAEEDA; --amber-text: #633806; --amber-mid: #854F0B; --amber-accent: #EF9F27;
      --red-bg: #FCEBEB; --red-text: #791F1F; --red-mid: #A32D2D; --red-accent: #E24B4A;
      --purple-bg: #EEEDFE; --purple-text: #26215C; --purple-mid: #534AB7;
      --teal-bg: #E1F5EE; --teal-text: #085041; --teal-mid: #0F6E56;
    }

    /* :root[data-theme="..."] (specificity 0,1,1) outranks the
       @media (prefers-color-scheme: dark) :root block below (0,1,0)
       so the user's manual toggle wins over their OS preference. */
    :root[data-theme="dark"] {
      --sb-bg: #1a1917; --sb-border: rgba(255,255,255,0.08); --sb-section-label: #555452;
      --sb-item-default: #888785; --sb-item-active: #EBEBEB;
      --sb-item-hover-bg: #222120; --sb-item-active-bg: #2a2927; --sb-divider: rgba(255,255,255,0.06);
      --bg: #1c1c1a; --bg-secondary: #242422; --bg-tertiary: #2a2a27;
      --text-primary: #f0efe9; --text-secondary: #b0afa8; --text-tertiary: #6e6d67;
      --border: rgba(255,255,255,0.1); --border-md: rgba(255,255,255,0.18);
      --blue-bg: #0c2240; --blue-text: #85B7EB; --blue-mid: #378ADD;
      --green-bg: #062e22; --green-text: #5DCAA5; --green-mid: #1D9E75;
      --amber-bg: #2e1e06; --amber-text: #EF9F27; --amber-mid: #BA7517;
      --red-bg: #2e0f0f; --red-text: #F09595; --red-mid: #E24B4A;
      --purple-bg: #1a1840; --purple-text: #AFA9EC; --purple-mid: #7F77DD;
      --teal-bg: #062e22; --teal-text: #5DCAA5; --teal-mid: #1D9E75;
      /* Shadows on dark bg need higher opacity to register visually */
      --card-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
      --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.45);
    }
    :root[data-theme="light"] {
      /* Sidebar vars MUST be redeclared here so the manual light toggle wins
         over @media (prefers-color-scheme: dark) when the OS is dark.
         Specificity alone isn't enough — if a var isn't declared in this
         block, the cascade falls through to the media query. */
      --sb-bg: #f2f1ea; --sb-border: rgba(0,0,0,0.08); --sb-section-label: #888785;
      --sb-item-default: #5c5c58; --sb-item-active: #1a1a18;
      --sb-item-hover-bg: #e8e7e1; --sb-item-active-bg: #dddbd5; --sb-divider: rgba(0,0,0,0.06);
      --bg: #ffffff; --bg-secondary: #f7f7f5; --bg-tertiary: #f0efe9;
      --text-primary: #1a1a18; --text-secondary: #5c5c58; --text-tertiary: #98978f;
      --border: rgba(0,0,0,0.1); --border-md: rgba(0,0,0,0.18);
      --blue-bg: #E6F1FB; --blue-text: #0C447C; --blue-mid: #185FA5; --blue-accent: #378ADD;
      --green-bg: #E1F5EE; --green-text: #085041; --green-mid: #0F6E56;
      --amber-bg: #FAEEDA; --amber-text: #633806; --amber-mid: #854F0B;
      --red-bg: #FCEBEB; --red-text: #791F1F; --red-mid: #A32D2D;
      --purple-bg: #EEEDFE; --purple-text: #26215C; --purple-mid: #534AB7;
      --teal-bg: #E1F5EE; --teal-text: #085041; --teal-mid: #0F6E56;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --sb-bg: #1a1917; --sb-border: rgba(255,255,255,0.08); --sb-section-label: #555452;
        --sb-item-default: #888785; --sb-item-active: #EBEBEB;
        --sb-item-hover-bg: #222120; --sb-item-active-bg: #2a2927; --sb-divider: rgba(255,255,255,0.06);
        --bg: #1c1c1a; --bg-secondary: #242422; --bg-tertiary: #2a2a27;
        --text-primary: #f0efe9; --text-secondary: #b0afa8; --text-tertiary: #6e6d67;
        --border: rgba(255,255,255,0.1); --border-md: rgba(255,255,255,0.18);
        --blue-bg: #0c2240; --blue-text: #85B7EB; --blue-mid: #378ADD;
        --green-bg: #062e22; --green-text: #5DCAA5; --green-mid: #1D9E75;
        --amber-bg: #2e1e06; --amber-text: #EF9F27; --amber-mid: #BA7517;
        --red-bg: #2e0f0f; --red-text: #F09595; --red-mid: #E24B4A;
        --purple-bg: #1a1840; --purple-text: #AFA9EC; --purple-mid: #7F77DD;
        --teal-bg: #062e22; --teal-text: #5DCAA5; --teal-mid: #1D9E75;
        --card-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
        --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.45);
      }
    }

    html { overscroll-behavior: none; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      background: var(--bg-tertiary);
      color: var(--text-primary);
      font-size: 14px;
      line-height: 1.5;
      min-height: 100vh;
      overscroll-behavior: none;
    }

    /* ── DESIGN SYSTEM PRIMITIVES ──
       BEM-style button system. Use two classes: .btn + .btn--variant.
       Coexists with legacy .btn-primary/.btn-secondary (single class) used
       by the landing CTAs above — those keep their own padding/icon layout.
       In-app render files migrated in Phase 2 use this system. */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      padding: 10px var(--space-lg);
      border-radius: var(--radius-md);
      border: none;
      font-family: inherit;
      font-size: var(--font-base);
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
      white-space: nowrap;
    }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    /* Focus-visible — clean keyboard accessibility without the default browser ring */
    .btn:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 2px; }
    /* Primary — tactile lift on hover, slightly stronger color */
    .btn--primary   { background: var(--blue-mid); color: #fff; box-shadow: 0 1px 2px rgba(24,95,165,0.15); }
    .btn--primary:hover:not(:disabled)   {
      background: var(--blue-text);
      transform: translateY(-1px);
      box-shadow: 0 3px 6px rgba(24,95,165,0.25);
    }
    .btn--primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 2px rgba(24,95,165,0.15); }
    .btn--secondary { background: var(--bg-secondary); color: var(--text-primary); border: 0.5px solid var(--border); }
    .btn--secondary:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-md); }
    .btn--danger    { background: var(--red-bg); color: var(--red-text); border: 0.5px solid var(--red-accent); }
    .btn--danger:hover:not(:disabled)    {
      background: var(--red-mid); color: #fff; border-color: var(--red-mid);
    }
    .btn--link {
      background: transparent; color: var(--blue-mid);
      padding: 0; border: none; gap: var(--space-xs);
    }
    .btn--link:hover:not(:disabled) { text-decoration: underline; }
    .btn--sm { padding: 6px var(--space-md); font-size: var(--font-sm); }

    /* Unified focus ring — single declaration covers every input/select/textarea class in the app.
       Each class's existing :focus rule still sets its own border-color (mostly blue, purple for
       custom-model context). This rule adds the soft 3px halo on top for the modern "lift" feel. */
    .cm-input:focus,
    .ips-input:focus,
    .eff-cc-input:focus,
    .adv-mc-input:focus,
    .adv-rf-select:focus,
    .alts-v1-inp:focus,
    .add-client-input:focus,
    .sd-input:focus,
    .client-sidebar-search:focus,
    .ai-input:focus,
    .prospect-form-input:focus,
    .prospect-form-textarea:focus,
    .ips-resolve-notes:focus,
    .aba-select:focus,
    .atlas-signoff-notes:focus,
    .atlas-signoff-outcome:focus,
    .br-filter-input:focus,
    .model-selector:focus,
    .client-rename-input:focus {
      outline: none;
      box-shadow: var(--focus-ring);
    }
    /* Purple ring for custom-model context where the border is already purple */
    .cm-input:focus,
    .ai-input:focus,
    .model-selector:focus,
    .aba-select:focus {
      box-shadow: 0 0 0 3px rgba(83, 74, 183, 0.15);
    }

    /* Modal backdrop frosted-glass effect — applied to all backdrop classes.
       Modern blur effect behind the modal that makes the focused content feel more deliberate. */
    .cm-backdrop,
    .ips-backdrop,
    .aba-backdrop,
    .modal-backdrop,
    .rb-backdrop,
    #ask-atlas-overlay {
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    /* Unified modal close button — same touch target + radius across cm/ips/aba contexts.
       Hover keeps existing per-class color/bg transitions. */
    .cm-close,
    .ips-close,
    .aba-close {
      width: 28px; height: 28px; padding: 0;
      border-radius: var(--radius-sm);
      transition: color 0.15s, background 0.15s;
    }

    /* Skeleton loading primitive — wrap a div with .skeleton + sizing styles.
       Animates a shimmer to indicate loading without a spinner. */
    .skeleton {
      background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: var(--radius-md);
    }
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Card depth — applied to every major bordered card surface in the app.
       The combination of subtle shadow + thin border produces the "modern SaaS"
       depth feel rather than the flat-bordered "2019 internal tool" look. */
    .br-section,
    .alerts-card,
    .ai-card,
    .model-card,
    .score-card,
    .recs-card,
    .sector-card,
    .adv-card,
    .ips-card-detail,
    .alts-v1-summary,
    .alts-v1-list-wrap,
    .alts-v1-detail,
    .alts-v1-detail-empty,
    .alts-v1-form,
    .atlas-kpi-card,
    .atlas-section,
    .metric {
      box-shadow: var(--card-shadow);
    }