:root {
  /* ── Premium design system (final) ── */
  --prm-navy: #14233D;
  --prm-navy-deep: #0F1A2B;
  --prm-navy-tab: #14233D;
  --prm-navy-tab-top: #182A49;
  --prm-navy-tab-hover: #1A2D4D;
  --prm-navy-tab-active-top: #1E3355;
  --prm-navy-tab-active: #1A2D4D;
  --prm-navy-tab-active-bottom: #172945;
  --prm-gold: #D4AF37;
  --prm-work: #FFFFFF;
  --prm-shell: #EEF1F5;
  --prm-surface: #FFFFFF;
  --prm-surface-deep: #FBFCFE;
  --prm-card-border: rgba(0, 0, 0, 0.06);
  --prm-workbench-btn: #334155;
  --prm-workbench-btn-hover: #27364D;
  --prm-top-btn: #14233D;
  --prm-top-btn-hover: #1E2D46;
  --prm-text: #0F172A;
  --prm-text-secondary: #64748B;
  --prm-emerald: #10A26B;
  --prm-danger: #991B1B;
  --prm-border: rgba(20, 35, 61, 0.10);
  --prm-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 12px rgba(15, 23, 42, 0.06), 0 18px 36px rgba(15, 23, 42, 0.11);
  --prm-inset-highlight: none;
  --prm-radius-lg: 18px;
  --prm-radius-md: 12px;
  --prm-radius-btn: 10px;

  /* ── Responsive density layer (Phase 1) ──
     Fluid shell metrics so the UI adapts to the effective CSS viewport that
     changes with Windows Display Scale (150% → ~1280px, 125% → ~1536px).
     No zoom / transform: scale() — pure fluid CSS. */
  /* Baseline = 150% Windows Scale (~1280px effective). At wider effective
     viewports (125% → ~1536px) the UI grows slightly so it stays premium,
     never thin/empty/tiny. 150% density itself is NOT compacted. */
  --ui-font-base:    clamp(15px, 0.35vw + 10.5px, 16.5px);
  --sidebar-width:   clamp(230px, 15vw, 280px);
  --shell-topbar-height: clamp(60px, 4.8vh, 72px);
  --page-padding:    clamp(20px, 1.55vw, 34px);
  --card-padding:    clamp(18px, 1.15vw, 24px);
  --card-gap:        clamp(14px, 1vw, 20px);
  --card-min-width:  clamp(300px, 22vw, 380px);
  --card-min-height: clamp(130px, 11vh, 170px);

  /* legacy aliases */
  --prm-mist: var(--prm-shell);
  --prm-mist-light: #EEF2F6;
  --prm-block: var(--prm-surface-deep);
  --prm-block-light: var(--prm-surface);
  --prm-champagne: var(--prm-shell);
  --prm-champagne-light: var(--prm-mist-light);
  --prm-card: var(--prm-surface-deep);
  --prm-card-soft: var(--prm-surface);

  --sky-1: var(--prm-surface);
  --sky-2: var(--prm-shell);
  --sky-3: var(--prm-work);
  --sky-4: var(--prm-surface);

  --navy-1: var(--prm-navy-deep);
  --navy-2: var(--prm-navy);
  --navy-3: var(--prm-navy);
  --navy-4: var(--prm-navy);
  --navy-5: var(--prm-navy-deep);

  --blue-frame: transparent;
  --blue-frame-light: transparent;
  --blue-glow: transparent;
  --blue-border: var(--prm-border);

  --gold: var(--prm-gold);
  --gold-light: #E0C56A;
  --gold-pale: rgba(212, 175, 55, 0.12);
  --gold-dark: #B8942E;
  --gold-border: rgba(212, 175, 55, 0.38);
  --gold-border-bright: rgba(212, 175, 55, 0.48);

  --t-dark-1: var(--prm-text);
  --t-dark-2: #1E293B;
  --t-dark-3: var(--prm-text-secondary);
  --t-dark-4: #94A3B8;
  --t-light-1: #FFFFFF;
  --t-light-2: rgba(255, 255, 255, 0.92);
  --t-light-3: rgba(255, 255, 255, 0.62);
  --t-light-4: rgba(255, 255, 255, 0.38);

  --green: var(--prm-emerald);
  --green-bg: rgba(16, 162, 107, 0.08);
  --green-border: rgba(16, 162, 107, 0.22);
  --red: var(--prm-danger);
  --red-bg: rgba(153, 27, 27, 0.06);
  --amber: var(--prm-gold);
  --amber-bg: var(--prm-surface);
  --blue-acc: var(--prm-navy);
  --blue-bg: var(--prm-surface);

  --card-bg: #FFFFFF;
  --card-border: rgba(0, 0, 0, 0.06);
  --card-shadow: var(--prm-shadow-card);

  --radius: var(--prm-radius-lg);
  --radius-sm: var(--prm-radius-md);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  overflow-x: hidden;
}
/* Always reserve the vertical scrollbar gutter so switching between tabs
   (short page ↔ long page) never changes the content width — stops the
   layout/cards from shifting horizontally when navigating. */
html {
  scrollbar-gutter: stable;
}
body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: var(--ui-font-base);
  background: var(--prm-shell);
  background-attachment: fixed;
  color: var(--prm-text);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}
/* Global +10% interface scale on DESKTOP only (>900px, the app's mobile
   breakpoint). The whole UI is px-based, so zoom is the only reliable way to
   enlarge everything uniformly. Scoped to desktop so mobile (≤900px) is never
   clipped. overflow-x:hidden on html/body/.app guards against any overflow. */
@media (min-width: 901px) {
  body { zoom: 1.1; }
}