@font-face {
  font-family: 'Polymath';
  src: url('../font/Polymath-Regular.woff2') format('woff2'),
       url('../font/Polymath-Regular.ttf') format('truetype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Polymath';
  src: url('../font/Polymath-Bold.woff2') format('woff2'),
       url('../font/Polymath-Bold.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

html,
body {
  font-family: 'Polymath', system-ui, sans-serif;
}

code, pre, kbd, samp, .font-monospace {
  font-family: var(--font-family-mono, 'Polymath', monospace);
}

:root {

  --color-brand-primary-h: 216;
  --color-brand-primary-s: 88%;
  --color-brand-primary-l: 50%;
  --color-brand-primary: hsl(var(--color-brand-primary-h), var(--color-brand-primary-s), var(--color-brand-primary-l));

  --color-brand-primary-500: hsl(var(--color-brand-primary-h), 88%, 58%);
  --color-brand-primary-600: hsl(var(--color-brand-primary-h), 88%, 50%);
  --color-brand-primary-700: hsl(var(--color-brand-primary-h), 90%, 42%);
  --color-brand-primary-800: hsl(var(--color-brand-primary-h), 92%, 34%);
  --color-brand-primary-900: hsl(var(--color-brand-primary-h), 94%, 26%);

  --color-brand-accent-h: 23;
  --color-brand-accent-s: 97%;
  --color-brand-accent-l: 46%;
  --color-brand-accent: var(--app-palette-orange);

  --color-brand-secondary-h: 218;
  --color-brand-secondary-s: 19%;
  --color-brand-secondary-l: 38%;
  --color-brand-secondary: hsl(var(--color-brand-secondary-h), var(--color-brand-secondary-s), var(--color-brand-secondary-l));
  --color-brand-secondary-700: color-mix(in srgb, var(--app-palette-steel) 42%, var(--app-palette-dark-grey));

  --color-brand-primary-rgb: 15, 105, 240;
  --color-brand-primary-800-rgb: 10, 71, 163;
  --color-brand-secondary-rgb: 79, 93, 117;
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --color-grey-500-rgb: 109, 110, 113;

  --gradient-primary: var(--color-brand-primary-800);
  --gradient-primary-subtle: var(--color-surface-soft);
  --gradient-mesh: none;
  --gradient-glass-shine: none;


  --color-success-h: 151;
  --color-success-s: 68%;
  --color-success-l: 15%;
  --color-success: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
  --color-success-100: color-mix(in srgb, var(--app-palette-forest) 24%, var(--app-palette-snow));
  --color-success-700: color-mix(in srgb, var(--app-palette-forest) 42%, var(--app-palette-dark-grey));
  --color-success-soft: color-mix(in srgb, var(--app-palette-forest) 18%, var(--app-palette-snow));
  --color-success-rgb: 12, 62, 38;

  --color-warning-h: 23;
  --color-warning-s: 97%;
  --color-warning-l: 46%;
  --color-warning: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
  --color-warning-100: color-mix(in srgb, var(--app-palette-orange) 24%, var(--app-palette-snow));
  --color-warning-700: color-mix(in srgb, var(--app-palette-orange) 42%, var(--app-palette-dark-grey));
  --color-warning-soft: color-mix(in srgb, var(--app-palette-orange) 18%, var(--app-palette-snow));
  --color-warning-rgb: 232, 93, 4;
  --color-warning-text: var(--app-palette-navy);
  --color-warning-900: color-mix(in srgb, var(--app-palette-orange) 65%, var(--app-palette-black));
  --color-warning-900-rgb: 151, 60, 3;

  --color-danger-h: 350;
  --color-danger-s: 96%;
  --color-danger-l: 43%;
  --color-danger: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
  --color-danger-100: color-mix(in srgb, var(--app-palette-red) 22%, var(--app-palette-snow));
  --color-danger-700: color-mix(in srgb, var(--app-palette-red) 80%, var(--app-palette-dark-grey));
  --color-danger-soft: color-mix(in srgb, var(--app-palette-red) 16%, var(--app-palette-snow));
  --color-danger-rgb: 217, 4, 41;
  --color-danger-900: color-mix(in srgb, var(--app-palette-red) 65%, var(--app-palette-black));
  --color-danger-900-rgb: 141, 3, 27;

  --color-info-h: 239;
  --color-info-s: 53%;
  --color-info-l: 59%;
  --color-info: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
  --color-info-100: color-mix(in srgb, var(--app-palette-violet) 18%, var(--app-palette-snow));
  --color-info-700: color-mix(in srgb, var(--app-palette-violet) 42%, var(--app-palette-dark-grey));
  --color-info-soft: color-mix(in srgb, var(--app-palette-violet) 12%, var(--app-palette-snow));
  --color-info-700-rgb: 94, 96, 206;
  --color-info-900: color-mix(in srgb, var(--app-palette-violet) 80%, var(--app-palette-black));
  --color-info-900-rgb: 75, 77, 165;
  --color-info-text: var(--app-palette-navy);

  --color-status-success: var(--color-success);
  --color-status-warning: var(--color-warning);
  --color-status-danger: var(--color-danger);
  --color-status-info: var(--color-info);

  --bs-primary: var(--color-brand-primary);
  --bs-primary-rgb: var(--color-brand-primary-rgb);
  --bs-secondary: var(--color-brand-secondary);
  --bs-secondary-rgb: var(--color-brand-secondary-rgb);
  --bs-success: var(--color-success);
  --bs-success-rgb: var(--color-success-rgb);
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: var(--color-warning-rgb);
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: var(--color-danger-rgb);
  --bs-info: var(--color-info-700);
  --bs-info-rgb: var(--color-info-700-rgb);
  --bs-link-color: var(--color-text-link);
  --bs-link-hover-color: var(--color-text-link-hover);
  --bs-code-color: var(--app-palette-blue);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-tertiary-color: var(--color-text-muted);

  --color-grey-300: color-mix(in srgb, var(--app-palette-grey) 62%, var(--app-palette-snow));
  --color-grey-400: var(--app-palette-grey);
  --color-grey-500: color-mix(in srgb, var(--app-palette-grey) 78%, var(--app-palette-dark-grey));
  --color-grey-600: var(--app-palette-dark-grey);
  --color-grey-700: var(--app-palette-ink);

  --app-palette-grey: #bcbec0;
  --app-palette-grey-rgb: 188, 190, 192;
  --app-palette-blue: #0f69f0;
  --app-palette-blue-rgb: 15, 105, 240;
  --app-palette-green: #acff7d;
  --app-palette-green-rgb: 172, 255, 125;
  --app-palette-yellow: #ffe12d;
  --app-palette-yellow-rgb: 255, 225, 45;
  --app-palette-dark-grey: #6d6e71;
  --app-palette-dark-grey-rgb: 109, 110, 113;
  --app-palette-navy: #0a1d37;
  --app-palette-navy-rgb: 10, 29, 55;
  --app-palette-snow: #f8f9fa;
  --app-palette-snow-rgb: 248, 249, 250;
  --app-palette-cloud: #e9ecef;
  --app-palette-cloud-rgb: 233, 236, 239;
  --app-palette-red: #d90429;
  --app-palette-red-rgb: 217, 4, 41;
  --app-palette-orange: #e85d04;
  --app-palette-orange-rgb: 232, 93, 4;
  --app-palette-forest: #0c3e26;
  --app-palette-forest-rgb: 12, 62, 38;
  --app-palette-indigo: #3d348b;
  --app-palette-indigo-rgb: 61, 52, 139;
  --app-palette-teal: #00a896;
  --app-palette-teal-rgb: 0, 168, 150;
  --app-palette-teal-solid: color-mix(in srgb, var(--app-palette-teal) 72%, #000);
  --app-palette-violet: #5e60ce;
  --app-palette-violet-rgb: 94, 96, 206;
  --app-palette-steel: #4f5d75;
  --app-palette-steel-rgb: 79, 93, 117;
  --app-palette-black: #000000;
  --app-palette-black-rgb: 0, 0, 0;
  --app-palette-white: #ffffff;
  --app-palette-white-rgb: 255, 255, 255;
  --color-black: var(--app-palette-black);
  --color-black-rgb: var(--app-palette-black-rgb);
  --color-white: var(--app-palette-white);
  --color-white-rgb: var(--app-palette-white-rgb);
  --app-palette-ink: var(--app-palette-navy);
  --app-palette-paper: var(--app-palette-snow);

  --color-surface-bg: var(--app-palette-snow);
  --color-surface-page: var(--app-palette-cloud);
  --color-surface-soft: var(--app-palette-snow);
  --color-surface-muted: var(--app-palette-cloud);
  --color-surface-elevated: var(--app-palette-snow);
  --color-surface-overlay: rgba(0, 0, 0, 0.58);
  --glass-opacity: 1;
  --glass-opacity-strong: 1;
  --color-surface-glass: rgba(var(--app-palette-grey-rgb), 0.34);
  --color-surface-hover: rgba(var(--app-palette-blue-rgb), 0.08);
  --color-surface-active: rgba(var(--app-palette-blue-rgb), 0.16);

  --color-surface-glass-subtle: var(--color-surface-elevated);
  --color-surface-glass-medium: var(--color-surface-elevated);
  --color-surface-glass-strong: var(--color-surface-elevated);
  --color-surface-glass-solid: var(--color-surface-elevated);

  --surface-resting: var(--color-surface-glass-subtle);
  --surface-raised: var(--color-surface-glass-medium);
  --surface-floating: var(--color-surface-glass-strong);
  --surface-solid: var(--color-surface-glass-solid);
  --color-surface-primary: var(--app-palette-blue);
  --color-surface-ink-subtle: rgba(var(--app-palette-navy-rgb), 0.08);
  --color-surface-ink-faint: rgba(var(--app-palette-navy-rgb), 0.06);

  --color-text-primary: var(--app-palette-navy);
  --color-text-secondary: var(--app-palette-steel);
  --color-text-muted: var(--app-palette-steel);
  --color-text-disabled: color-mix(in srgb, var(--app-palette-dark-grey) 72%, var(--app-palette-grey));
  --color-text-inverse: var(--app-palette-snow);
  --color-ink-dark: var(--app-palette-navy);
  --color-text-link: var(--color-brand-primary-800);
  --color-text-link-hover: var(--color-brand-primary-900);
  --color-text-on-light: var(--app-palette-navy);

  --conversation-mention-color: color-mix(in srgb, var(--color-info-700) 85%, var(--app-palette-navy));
  --conversation-mention-bg: var(--color-info-soft);
  --conversation-mention-font-weight: var(--font-weight-bold);
  --conversation-mention-radius: var(--radius-sm);
  --conversation-mention-padding-inline: var(--space-1);
  --conversation-mention-on-primary-color: var(--color-warning);
  --conversation-mention-on-primary-bg: rgba(var(--color-black-rgb), 0.18);

  --color-conversation-mention: var(--conversation-mention-color);
  --color-conversation-mention-bg: var(--conversation-mention-bg);
  --color-conversation-mention-on-primary: var(--conversation-mention-on-primary-color);
  --color-conversation-mention-bg-on-primary: var(--conversation-mention-on-primary-bg);

  --color-print-text: var(--app-palette-navy);
  --color-print-bg: #ffffff;
  --color-print-link: var(--app-palette-dark-grey);

  --color-purple: var(--app-palette-violet);

  --color-border: var(--app-palette-steel);
  --color-border-light: var(--app-palette-steel);
  --color-border-strong: var(--app-palette-navy);
  --color-border-hover: var(--app-palette-blue);
  --color-border-teal-subtle: rgba(var(--app-palette-blue-rgb), 0.3);
  --color-border-ink-subtle: rgba(var(--app-palette-dark-grey-rgb), 0.18);
  --color-border-ink-faint: rgba(var(--app-palette-dark-grey-rgb), 0.1);

  --font-family-sans: 'Polymath', system-ui, sans-serif;
  --font-family-base: var(--font-family-sans);
  --font-family-display: 'Polymath', system-ui, sans-serif;
  --font-family-mono: 'Polymath', ui-monospace, monospace;
  --bs-font-sans-serif: 'Polymath', system-ui, sans-serif;
  --bs-body-font-family: 'Polymath', system-ui, sans-serif;
  --bs-font-monospace: 'Polymath', ui-monospace, monospace;

  --font-size-4xs: 0.625rem;
  --font-size-3xs: 0.6875rem;
  --font-size-2xs: 0.75rem;
  --font-size-2xs-half: 0.78125rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.25rem;
  --font-size-3xl: 1.5rem;
  --font-size-4xl: 1.75rem;
  --font-size-5xl: 2rem;
  --font-size-6xl: 2.5rem;
  --font-size-7xl: 3rem;

  --line-height-none: 1;
  --line-height-tight: 1.15;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 850;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.025em;
  --tracking-2xs: 0.02em;
  --tracking-xs: 0.04em;
  --tracking-normal: 0.05em;
  --tracking-wide: 0.1em;
  --tracking-wider: 0.15em;
  --tracking-widest: 0.2em;

  --space-scale-mobile: 0.82;
  --space-scale-tablet: 0.9;
  --space-scale-laptop: 1;
  --space-scale-desktop: 1.06;
  --space-scale: var(--space-scale-mobile);

  --space-0-75: calc(0.1875rem * var(--space-scale));
  --space-1: calc(0.25rem * var(--space-scale));
  --space-1-5: calc(0.375rem * var(--space-scale));
  --space-2: calc(0.5rem * var(--space-scale));
  --space-2-5: calc(0.625rem * var(--space-scale));
  --space-3: calc(0.75rem * var(--space-scale));
  --space-3-5: calc(0.875rem * var(--space-scale));
  --space-4: calc(1rem * var(--space-scale));
  --space-5: calc(1.25rem * var(--space-scale));
  --space-6: calc(1.5rem * var(--space-scale));
  --space-7: calc(1.75rem * var(--space-scale));
  --space-8: calc(2rem * var(--space-scale));
  --space-9: calc(2.25rem * var(--space-scale));
  --space-10: calc(2.5rem * var(--space-scale));
  --space-11: calc(2.75rem * var(--space-scale));
  --space-12: calc(3rem * var(--space-scale));
  --space-14: calc(3.5rem * var(--space-scale));
  --space-15: calc(3.75rem * var(--space-scale));
  --space-16: calc(4rem * var(--space-scale));
  --space-18: calc(4.5rem * var(--space-scale));
  --space-20: calc(5rem * var(--space-scale));
  --space-22: calc(5.5rem * var(--space-scale));
  --space-24: calc(6rem * var(--space-scale));
  --space-28: calc(7rem * var(--space-scale));
  --space-32: calc(8rem * var(--space-scale));

  --shadow-resting:
    0 1px 1px 0 rgba(var(--app-palette-navy-rgb), 0.04),
    0 1px 2px 0 rgba(var(--app-palette-navy-rgb), 0.03);
  --shadow-sm:
    0 1px 2px 0 rgba(var(--app-palette-navy-rgb), 0.05),
    0 1px 3px 0 rgba(var(--app-palette-navy-rgb), 0.07);
  --shadow-md:
    0 2px 4px -1px rgba(var(--app-palette-navy-rgb), 0.05),
    0 4px 6px -1px rgba(var(--app-palette-navy-rgb), 0.08);
  --shadow-lg:
    0 4px 6px -2px rgba(var(--app-palette-navy-rgb), 0.05),
    0 10px 15px -3px rgba(var(--app-palette-navy-rgb), 0.08),
    0 20px 25px -5px rgba(var(--app-palette-navy-rgb), 0.05);
  --shadow-xl:
    0 8px 10px -4px rgba(var(--app-palette-navy-rgb), 0.05),
    0 20px 25px -5px rgba(var(--app-palette-navy-rgb), 0.10),
    0 25px 50px -12px rgba(var(--app-palette-navy-rgb), 0.14);
  --shadow-2xl:
    0 12px 24px -4px rgba(var(--app-palette-navy-rgb), 0.10),
    0 25px 50px -12px rgba(var(--app-palette-navy-rgb), 0.22);
  --shadow-button: 0 1px 2px 0 rgba(var(--app-palette-navy-rgb), 0.04), 0 2px 4px 0 rgba(var(--app-palette-navy-rgb), 0.06);

  --shadow-inset:        inset 0 1px 2px rgba(var(--app-palette-navy-rgb), 0.06), inset 0 0 0 1px rgba(var(--app-palette-navy-rgb), 0.04);
  --shadow-inset-focus:  inset 0 2px 4px rgba(var(--app-palette-navy-rgb), 0.10);
  --shadow-inset-ring:   inset 0 0 0 1px currentColor;

  --shadow-dropdown: 0 18px 42px rgba(var(--app-palette-navy-rgb), 0.16);

  --edge-light:      inset 0 1px 0 rgba(var(--color-white-rgb), 0.6);
  --edge-light-soft: inset 0 1px 0 rgba(var(--color-white-rgb), 0.35);
  --edge-light-ink:  inset 0 1px 0 rgba(var(--color-white-rgb), 0.12);

  --shadow-brand:
    0 4px 14px -2px rgba(var(--color-brand-primary-rgb), 0.25),
    0 10px 30px -5px rgba(var(--color-brand-primary-rgb), 0.35);
  --shadow-brand-lg:
    0 8px 20px -4px rgba(var(--color-brand-primary-rgb), 0.3),
    0 15px 40px -8px rgba(var(--color-brand-primary-rgb), 0.4);

  --shadow-success-glow: 0 8px 24px -6px rgba(var(--color-success-rgb), 0.30);
  --shadow-warning-glow: 0 8px 24px -6px rgba(var(--color-warning-rgb), 0.30);
  --shadow-danger-glow:  0 8px 24px -6px rgba(var(--color-danger-rgb), 0.32);
  --shadow-info-glow:    0 8px 24px -6px rgba(var(--color-info-700-rgb), 0.30);

  --elevation-step-0: none;
  --elevation-step-1: var(--shadow-resting);
  --elevation-step-2: var(--shadow-sm);
  --elevation-step-3: var(--shadow-md);
  --elevation-step-4: var(--shadow-lg);
  --elevation-step-5: var(--shadow-xl);
  --elevation-modal:  var(--shadow-2xl);

  --border-width: 1px;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.625rem;
  --radius-2xl: 0.75rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --radius-full: 9999px;
  --radius-pill: var(--bs-border-radius-pill, var(--radius-full));
  --radius-card: var(--radius-2xl);
  --radius-input: var(--radius-lg);


  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;

  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --ease-spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-instant: 80ms;
  --dur-quick: 120ms;
  --dur-deliberate: 320ms;
  --dur-cinematic: 700ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring-snappy: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger-step: 60ms;
  --stagger-max: 360ms;

  --space-dense: 0.72;
  --row-height-sm: 40px;
  --row-height-md: 44px;
  --row-height-lg: 52px;
  --font-size-data: 0.8125rem;
  --line-height-data: 1.3;

  --z-deep: -1;
  --z-dropdown-base: 1000;
  --z-dropdown-floating: 1002;
  --z-dropdown-navbar: 1038;
  --z-dropdown-portal: 1048;
  --z-dropdown: var(--z-dropdown-base);
  --z-navbar-overlay: 1030;
  --z-navbar-drawer: 1035;
  --z-navbar: 1036;
  --z-navbar-toggle: 1037;
  --z-overlay: 1040;
  --z-select-host: 1041;
  --z-select-surface: var(--z-dropdown-floating);
  --z-select-portal: var(--z-select-modal-portal);
  --z-dashboard-search: 1049;
  --z-modal-backdrop: 1050;
  --z-modal: 1055;
  --z-select-modal-portal: 1060;
  --z-popover: 1070;
  --z-licensing-action-modal-backdrop: 1075;
  --z-tooltip: 1080;
  --z-notification: 1095;
  --z-toast: 1096;
  --z-boundary-backdrop: 1097;
  --z-boundary-sheet: 1098;
  --z-dashboard-sheet-backdrop: var(--z-boundary-backdrop);
  --z-dashboard-sheet: var(--z-boundary-sheet);
  --z-sticky: 20;
  --z-sticky-context-rail: 30;
  --z-local-base: 1;
  --z-local-raised: 10;
  --z-sticky-filter-row: 2;
  --z-sticky-thead: 3;
  --z-sticky-col: 4;
  --z-sticky-col-raised: 5;
  --z-sticky-actions: 6;
  --z-max: 9999;



  --container-mobile: 100%;
  --container-tablet: 720px;
  --container-laptop: 1200px;
  --container-desktop: 1440px;
  --container-max-width: 100%;

  --container-xs: 400px;
  --container-sm: 600px;
  --container-md: 768px;
  --container-lg: 960px;

  --width-filter-sm: 150px;
  --width-filter-md: 180px;
  --width-filter-lg: 200px;
  --width-input-sm: 100px;
  --width-input-md: 120px;
  --width-input-lg: 240px;
  --width-skeleton-compact: 220px;
  --width-skeleton-control: 260px;
  --width-skeleton-filter: 280px;
  --width-skeleton-wide: 320px;
  --height-skeleton-block-md: 120px;
  --height-skeleton-block-lg: 200px;

  --width-col-xs: 60px;
  --width-col-2xs: 70px;
  --width-col-3xs: 80px;
  --width-col-4xs: 90px;
  --width-col-sm: 100px;
  --width-col-md: 130px;
  --width-col-lg: 160px;
  --width-col-xl: 170px;
  --width-col-2xl: 190px;

  --width-max-xs: 220px;
  --width-max-sm: 250px;
  --width-max-md: 300px;
  --width-max-lg: 500px;
  --width-max-xl: 680px;
  --width-max-2xl: 760px;

  --width-container-sm: 560px;
  --width-container-md: 620px;
  --width-container-lg: 1040px;
  --width-container-xl: 1280px;
  --width-container-2xl: 1560px;

  --width-sidebar-sm: 280px;
  --width-sidebar-md: 400px;
  --width-sidebar-lg: 600px;

  --width-auth-form: 480px;
  --width-auth-form-lg: 520px;

  --width-search-min-xs: 180px;
  --width-search-min-sm: 200px;
  --width-search-min-md: 240px;
  --width-search-min-lg: 320px;
  --width-search-basis-xs: 220px;
  --width-search-basis-sm: 260px;
  --width-search-basis-md: 320px;
  --width-search-basis-lg: 600px;
  --width-search-max-sm: 480px;
  --width-search-max-md: 600px;

  --height-map-sm: 320px;
  --height-map-md: 420px;
  --height-map-lg: 480px;

  --height-xs: 120px;
  --height-sm: 200px;
  --height-md: 240px;
  --height-lg: 260px;
  --height-xl: 280px;
  --height-2xl: 320px;
  --height-3xl: 400px;
  --height-4xl: 420px;
  --height-5xl: 480px;
  --height-6xl: 600px;

  --height-hero-sm: 250px;
  --height-hero-md: 400px;
  --height-dropdown: 320px;
  --dropdown-min-height: 120px;
  --dropdown-max-height: 320px;
  --dropdown-viewport-margin: 8px;
  --dropdown-cap-visible-items: 5;
  --dropdown-cap-item-min-height: 40px;
  --dropdown-cap-max-height: 220px;

  --layout-gutter: clamp(var(--space-3), 2.4vw, calc(var(--space-6) * 0.95));
  --layout-gutter-lg: clamp(var(--space-4), 2.8vw, calc(var(--space-8) * 0.92));


  --quality-gutter-mobile: var(--space-3);
  --quality-gutter-tablet: var(--space-4);
  --quality-gutter-laptop: var(--space-5);
  --quality-gutter-desktop: var(--space-6);


  --app-navbar-height: 56px;
  --app-header-height: 56px;
  --app-chrome-gutter: var(--quality-gutter-mobile);
  --app-chrome-hero-pad-x: var(--app-chrome-gutter);
  --app-chrome-hero-control-h: 44px;
  --app-chrome-hero-search-w: 18rem;
  --app-chrome-hero-tab-h: 44px;
  --app-chrome-hero-radius: 0 0 8px 8px;


  --chrome-space-1: 0.25rem;
  --chrome-space-1-5: 0.4rem;
  --chrome-space-2: 0.5rem;
  --chrome-space-2-5: 0.65rem;
  --chrome-space-3: 0.75rem;
  --chrome-space-4: 1rem;
  --chrome-space-hero-gap-mobile: 0.45rem;
  --chrome-space-hero-pad-mobile: 0.55rem;


  --app-chrome-hero-gap: var(--chrome-space-hero-gap-mobile);
  --app-chrome-hero-pad-y: var(--chrome-space-hero-pad-mobile);
  --app-chrome-page-gap: var(--chrome-space-3);
  --app-chrome-page-pad-block: var(--chrome-space-3) var(--chrome-space-4);
  --app-footer-min-height: 52px;
  --container-xl: var(--width-container-xl, 1140px);
  --dashboard-touch-target-min: var(--touch-target-min);

  --focus-ring-width: 3px;
  --focus-ring-color: var(--color-brand-primary-700);
  --focus-ring: 0 0 0 3px rgba(var(--color-brand-primary-rgb), 0.3);
  --focus-ring-width-tight: 2px;
  --focus-ring-offset-tight: 2px;
  --focus-ring-offset: 3px;
  --focus-ring-offset-wide: 4px;

  --glass-blur: 0px;
  --glass-saturation: 160%;
  --glass-blur-resting: 12px;
  --glass-blur-raised: 18px;
  --glass-blur-floating: 24px;
  --glass-saturation-premium: 180%;


  --btn-height-sm: 44px;
  --btn-height-md: 44px;
  --btn-height-lg: 48px;

  --on-primary: #ffffff;
  --on-secondary: #ffffff;
  --on-success: #ffffff;
  --on-warning: var(--app-palette-navy);
  --on-danger: #ffffff;
  --on-info: #ffffff;
  --on-neutral: #ffffff;

  --input-height-md: 44px;
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);

  --aging-seg-basis: 2.75rem;
  --aging-swatch-size: 0.625rem;
  --aging-review-btn-min-width: 10rem;
  --perf-chart-head-flex-basis: 14rem;
  --perf-chart-min-height: 8rem;
  --perf-bar-fill-min-height: 0.25rem;
  --perf-bar-value-font-size: var(--font-size-4xs);
  --perf-bar-value-font-size-mobile: 0.4375rem;
  --perf-top-icon-size: 2rem;
  --status-label-min-height: 1.75rem;
  --operational-list-max-height: 42rem;
  --dashboard-badge-min-height: 1.5rem;
  --dashboard-badge-pad-inline: 0.5rem;


  --icon-size-xs: 12px;
  --icon-size-sm: 20px;
  --icon-size-md: 32px;
  --icon-size-lg: 40px;
  --icon-size-xl: 42px;

  --navbar-height: 64px;
  --navbar-height-mobile: 56px;
  --navbar-brand-logo-width: 148px;
  --nav-brand-logo-pad: 3px;
  --shared-filter-drawer-inline-size: 36rem;
  --shared-filter-field-inline-size-min: 15rem;
  --shared-filter-field-inline-size-max: 18rem;
  --shared-filter-inline-rows: 2;
  --shared-filter-inline-field-inline-size: 13rem;
  --operational-workspace-max: 115rem;
  --shared-filter-backdrop-z: var(--z-modal-backdrop);
  --shared-filter-panel-z: var(--z-modal);

  --notif-dropdown-width: 360px;
  --notif-dropdown-max-height: 480px;
  --toast-max-width: 420px;


  --touch-target-min: 44px;
  --touch-target-min-mobile: 48px;
  --touch-target-min-aa: 24px;
  --touch-target-min-lg: 52px;
  --register-form-max-inline-mobile: var(--width-auth-form-lg);
  --register-form-max-inline-tablet: 46rem;
  --register-form-max-inline-laptop: var(--width-container-lg);
  --register-form-max-inline-desktop: var(--width-container-lg);
  --register-form-max-inline: var(--register-form-max-inline-mobile);
  --register-form-gap: var(--space-3);
  --register-form-gap-lg: var(--space-4);
  --register-form-row-gap: var(--register-form-gap);
  --register-form-row-gap-wide: var(--register-form-gap-lg);
  --register-form-card-pad: clamp(var(--space-4), 2.6vw, var(--space-6));
  --register-form-card-pad-wide: clamp(var(--space-5), 3.2cqi, var(--space-7));
  --register-cq-two-col-min: 48rem;
  --register-cq-wide-min: 62rem;
  --register-micro-font-min: 13px;
  --register-micro-line-height: 1.35;
  --route-block-pad-mobile: var(--layout-gutter);
  --route-block-pad-tablet: var(--layout-gutter-lg);
  --route-block-pad-laptop: var(--layout-gutter-lg);
  --route-block-pad-desktop: var(--layout-gutter-lg);

  --public-boundary-block-pad-mobile: var(--space-3);
  --public-boundary-block-pad-tablet: var(--space-4);
  --public-boundary-block-pad-laptop: var(--space-5);
  --public-boundary-block-pad-desktop: var(--space-6);
  --public-boundary-card-max: 42rem;
  --public-boundary-shell-max-laptop: 54rem;
  --public-boundary-shell-max-desktop: 58rem;

  --z-not-found-backdrop: var(--z-boundary-backdrop);
  --z-not-found-sheet: var(--z-boundary-sheet);
  --not-found-route-block-pad-mobile: var(--space-2);
  --not-found-route-block-pad-tablet: var(--space-2);
  --not-found-route-block-pad-laptop: var(--space-3);
  --not-found-route-block-pad-desktop: var(--space-4);
  --not-found-card-pad-mobile: var(--space-4);
  --not-found-card-pad-tablet: var(--space-5);
  --not-found-card-pad-laptop: var(--space-6);
  --not-found-card-pad-desktop: var(--space-6);
  --not-found-card-max-mobile: var(--width-container-sm);
  --not-found-card-max-laptop: var(--width-container-lg);
  --not-found-card-max-desktop: var(--width-container-xl);
  --not-found-sheet-max-height: min(76dvh, 36rem);

  --z-forbidden-backdrop: var(--z-boundary-backdrop);
  --z-forbidden-sheet: var(--z-boundary-sheet);
  --forbidden-route-block-pad-mobile: var(--space-1);
  --forbidden-route-block-pad-tablet: var(--space-2);
  --forbidden-route-block-pad-laptop: var(--space-3);
  --forbidden-route-block-pad-desktop: var(--space-4);
  --forbidden-card-pad-mobile: var(--space-4);
  --forbidden-card-pad-tablet: var(--space-5);
  --forbidden-card-pad-laptop: var(--space-6);
  --forbidden-card-pad-desktop: var(--space-6);
  --forbidden-card-max-mobile: var(--width-container-sm);
  --forbidden-card-max-laptop: var(--width-container-lg);
  --forbidden-card-max-desktop: var(--width-container-xl);
  --forbidden-sheet-max-height: min(76dvh, 36rem);
  --forbidden-shell-max-laptop: 68rem;
  --forbidden-shell-max-desktop: 78rem;
  --forbidden-shell-max-inline-mobile: 100%;
  --forbidden-shell-max-inline-tablet: 100%;
  --forbidden-card-radius-mobile: var(--radius-3xl);
  --forbidden-card-radius-tablet: var(--radius-3xl);
  --forbidden-card-radius-laptop: var(--radius-3xl);
  --forbidden-card-radius-desktop: var(--radius-4xl);
  --forbidden-links-cols-mobile: 1;
  --forbidden-links-cols-tablet: 2;
  --forbidden-links-cols-laptop: 2;
  --forbidden-links-cols-desktop: 2;
  --forbidden-actions-cols-mobile: 1;
  --forbidden-actions-cols-tablet: 2;
  --forbidden-actions-cols-laptop: 4;
  --forbidden-actions-cols-desktop: 4;
  --forbidden-title-size-mobile: clamp(2.75rem, 15vw, 3.85rem);
  --forbidden-title-size-tablet: clamp(3.75rem, 9vw, 4.375rem);
  --forbidden-title-size-laptop: clamp(4.25rem, 4.8vw, 4.75rem);
  --forbidden-title-size-desktop: clamp(4.5rem, 4vw, 5rem);
  --forbidden-message-size-mobile: clamp(0.9375rem, 3.9vw, 1.0625rem);
  --forbidden-message-size-tablet: clamp(1rem, 1.4vw, 1.0625rem);
  --forbidden-message-size-laptop: clamp(1rem, 0.95vw, 1.125rem);
  --forbidden-message-size-desktop: clamp(1.0625rem, 0.85vw, 1.1875rem);
  --forbidden-message-max-mobile: 62ch;
  --forbidden-message-max-tablet: 60ch;
  --forbidden-message-max-laptop: 54ch;
  --forbidden-message-max-desktop: 56ch;
  --forbidden-detail-label-cols-mobile: minmax(0, 1fr);
  --forbidden-detail-label-cols-tablet: minmax(0, max-content);
  --forbidden-detail-value-cols-mobile: minmax(0, 1fr);
  --forbidden-detail-value-cols-tablet: minmax(0, 1fr);
  --forbidden-detail-gap-mobile: var(--space-1);
  --forbidden-detail-gap-tablet: var(--space-2);
  --forbidden-detail-gap-laptop: var(--space-2);
  --forbidden-detail-gap-desktop: var(--space-2);
  --forbidden-topline-flex-mobile: wrap;
  --forbidden-topline-flex-tablet: nowrap;
  --forbidden-topline-flex-laptop: nowrap;
  --forbidden-links-max-mobile: var(--width-container-sm);
  --forbidden-links-max-tablet: var(--width-container-lg);
  --forbidden-links-max-laptop: var(--width-container-lg);
  --forbidden-links-max-desktop: var(--width-container-xl);

  --bp-mobile: 390px;
  --bp-tablet: 768px;
  --bp-laptop: 1366px;
  --bp-desktop: 1920px;

  --density-scale-mobile: 0.94;
  --density-scale-tablet: 0.98;
  --density-scale-laptop: 1;
  --density-scale-desktop: 1.04;
  --density-scale: var(--density-scale-mobile);

  --overflow-safe-max-width: 100%;

  --cls-target: 0.1;


}

.container,
.container-fluid,
.container-max,
.responsive-container {
  max-width: 100%;
}


#app .metric-label,
#app .metric-card__value,
#app .metric-card__label,
#app .dashboard-status-label,
#app .dashboard-chart-legend__label,
#app .jobs-status-label,
#app .table-cell-value,
#app .lead-form-kicker,
#app .lead-save-state,
#app .badge,
#app .chip,
#app .btn,
#app .nav-link,
#app .dropdown-item,
#app .page-link,
#app .form-label,
#app th,
#app .col-header {
  overflow-wrap: break-word;
}

#app .metric-label,
#app .metric-card__label,
#app .lead-form-kicker,
#app .lead-save-state {
  color: var(--color-text-secondary);
}

.dashboard-job-flags {
  flex-wrap: wrap;
}

.dashboard-job-flags .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--dashboard-badge-min-height);
  padding-inline: var(--dashboard-badge-pad-inline);
}

.dashboard-category-tabs .nav-link,
#catTabs .nav-link,
#catDateFiltersToggle,
#catExportToggle {
  min-block-size: var(--dashboard-touch-target-min);
}

@media (width >= 768px) {
  :root {
    --density-scale: var(--density-scale-tablet);
    --space-scale: var(--space-scale-tablet);
    --register-form-max-inline: var(--register-form-max-inline-tablet);
    --app-chrome-gutter: var(--quality-gutter-tablet);
    --app-chrome-hero-pad-x: var(--app-chrome-gutter);
    --app-chrome-hero-search-w: 20rem;
    --app-chrome-hero-gap: var(--chrome-space-2-5);
    --app-chrome-hero-pad-y: var(--chrome-space-3);
    --dropdown-max-height: 360px;
  }
}

@media (width >= 1366px) {
  :root {
    --density-scale: var(--density-scale-laptop);
    --space-scale: var(--space-scale-laptop);
    --register-form-max-inline: var(--register-form-max-inline-laptop);
    --register-form-row-gap: var(--register-form-row-gap-wide);
    --app-chrome-gutter: var(--quality-gutter-laptop);
    --app-chrome-hero-pad-x: var(--app-chrome-gutter);
    --app-chrome-hero-search-w: 24rem;
    --dropdown-max-height: 420px;
  }
}

@media (width >= 1920px) {
  :root {
    --density-scale: var(--density-scale-desktop);
    --space-scale: var(--space-scale-desktop);
    --register-form-max-inline: var(--register-form-max-inline-desktop);
    --app-chrome-gutter: var(--quality-gutter-desktop);
    --app-chrome-hero-pad-x: var(--app-chrome-gutter);
    --app-chrome-hero-search-w: 28rem;
    --dropdown-max-height: 480px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: var(--app-palette-navy);
    --color-border-light: var(--app-palette-steel);
    --color-border-strong: var(--app-palette-navy);
    --color-text-secondary: var(--app-palette-navy);
    --color-text-muted: var(--app-palette-navy);
  }
}

.btn-secondary, .btn-secondary .btn-text { color: var(--on-secondary); }
.btn-success, .btn-success .btn-text { color: var(--on-success); }
.btn-warning, .btn-warning .btn-text { color: var(--on-warning); }
.btn-info, .btn-info .btn-text { color: var(--on-info); }
.btn-neutral, .btn-neutral .btn-text { color: var(--on-neutral); }

:root {

  --login-ink: var(--app-palette-navy);
  --login-ink-muted: rgba(var(--app-palette-navy-rgb), 0.68);
  --login-teal: var(--app-palette-blue);
  --login-accent: var(--app-palette-orange);
  --login-border: rgba(var(--app-palette-navy-rgb), 0.14);
  --login-shadow: 0 28px 70px rgba(10, 29, 55, 0.18);
  --login-grid: rgba(var(--app-palette-navy-rgb), 0.08);
  --login-glow: rgba(var(--app-palette-blue-rgb), 0.22);
  --login-bg-gradient: linear-gradient(140deg, var(--app-palette-snow) 0%, var(--app-palette-cloud) 52%, var(--app-palette-snow) 100%);
  --login-paper: rgba(255, 255, 255, 0.94);
  --login-paper-strong: rgba(255, 255, 255, 0.98);
  --login-font-kicker: clamp(14px, 0.22vw + 13.4px, 15px);
  --login-font-secondary: clamp(14px, 0.28vw + 13.2px, 16px);
  --login-font-link: clamp(14px, 0.3vw + 13.2px, 16px);
  --login-font-label: clamp(14px, 0.26vw + 13.3px, 16px);
  --auth-border-width: 1px;
  --auth-glow-size-inline: 38.75rem;
  --auth-glow-size-block: 22.5rem;
  --auth-panel-shadow: 0 0.5rem 1.75rem rgba(var(--color-brand-primary-rgb), 0.14);
  --auth-panel-spotlight-primary: radial-gradient(48rem 28rem at 0% 0%, rgba(var(--color-brand-primary-rgb), 0.10), transparent 62%);
  --auth-panel-spotlight-accent: radial-gradient(42rem 26rem at 100% 0%, hsla(var(--color-brand-accent-h), var(--color-brand-accent-s), var(--color-brand-accent-l), 0.12), transparent 62%);
  --auth-logo-height: clamp(3.5rem, 6vw, 4.5rem);
  --auth-logo-shadow: 0 0.625rem 1.375rem rgba(var(--app-palette-navy-rgb), 0.12);
  --auth-inline-icon-size: 1.125rem;
  --auth-skip-form-offset: 9rem;
  --auth-step-focus-width: 2px;
  --auth-step-focus-offset: 2px;
  --auth-step-focus-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 22%, transparent);
  --auth-switch-track-inset: 3px;
  --auth-switch-track-inline: 42px;
  --auth-switch-track-block: 24px;
  --auth-switch-thumb-inset: 7px;
  --auth-switch-thumb-size: 16px;
  --auth-switch-thumb-travel: 18px;
  --auth-strength-meter-min: 10rem;
  --auth-strength-item-min: 13.5rem;
  --auth-step-current-ring: 0 0 0 0.18rem rgba(var(--color-brand-primary-rgb), 0.16);
  --auth-danger-ring: 0 0 0 0.2rem rgba(var(--color-danger-rgb), 0.14);
  --auth-success-ring: 0 0 0 0.2rem rgba(var(--color-success-rgb), 0.12);
  --auth-control-inner-shadow: inset 0 1px 0 var(--login-input-inner-shadow);
  --auth-icon-baseline-shift: -0.14em;
  --auth-strength-icon-offset: 0.12em;
  --auth-cta-hover-shadow: 0 0.625rem 1.375rem rgba(var(--color-brand-primary-rgb), 0.18);
  --auth-disabled-control-opacity: 1;
  --auth-mobile-brand-inline: 10rem;
  --auth-register-wide-min: 32rem;
  --auth-laptop-columns: minmax(14rem, 0.68fr) minmax(23rem, 1fr);
  --auth-desktop-columns: minmax(15rem, 0.72fr) minmax(24rem, 1fr);
  --auth-password-tools-laptop-max: 20rem;
  --auth-password-tools-desktop-max: 19rem;

  --job-ink: var(--app-palette-navy);
  --job-muted: var(--app-palette-dark-grey);
  --job-solar: var(--app-palette-orange);
  --job-sky: var(--app-palette-teal);
  --job-border: rgba(var(--app-palette-navy-rgb), 0.12);
  --job-grid: rgba(var(--app-palette-navy-rgb), 0.06);
  --job-bg-gradient: linear-gradient(140deg, var(--app-palette-snow) 0%, var(--app-palette-cloud) 50%, var(--app-palette-snow) 100%);
  --job-shadow: 0 24px 70px rgba(10, 29, 55, 0.18);
  --job-panel: rgba(255, 255, 255, 0.9);

  --employee-ink: var(--app-palette-navy);
  --employee-accent: var(--app-palette-orange);
  --employee-surface: var(--app-palette-cloud);
  --employee-surface-strong: var(--app-palette-snow);
  --employee-ink-muted: rgba(var(--app-palette-navy-rgb), 0.68);
  --employee-border: rgba(var(--app-palette-navy-rgb), 0.12);
  --employee-border-strong: rgba(var(--app-palette-navy-rgb), 0.2);
  --employee-shadow: 0 22px 45px rgba(10, 29, 55, 0.12);
  --employee-spotlight: rgba(var(--app-palette-orange-rgb), 0.18);
  --employee-grid: rgba(var(--app-palette-navy-rgb), 0.06);
  --employee-label-font-min: 12px;
  --employee-micro-font-min: 12px;

  --settings-ink: var(--app-palette-navy);
  --settings-ink-muted: rgba(var(--app-palette-navy-rgb), 0.65);
  --settings-border: rgba(var(--app-palette-navy-rgb), 0.12);
  --settings-grid: rgba(var(--app-palette-navy-rgb), 0.06);
  --settings-label-font-min: 12px;
  --settings-micro-font-min: 12px;

  --action-create: var(--app-palette-blue);
  --action-create-hover: var(--color-brand-primary-800);
  --action-edit-input: var(--app-palette-blue);
  --action-edit-input-hover: color-mix(in srgb, var(--action-edit-input) 84%, #000);
  --action-edit-output: var(--app-palette-violet);
  --action-edit-output-hover: color-mix(in srgb, var(--action-edit-output) 84%, #000);
  --action-export-pdf: var(--app-palette-steel);
  --action-export-pdf-hover: color-mix(in srgb, var(--action-export-pdf) 84%, #000);
  --action-assign-designer: var(--app-palette-violet);
  --action-assign-designer-hover: color-mix(in srgb, var(--action-assign-designer) 84%, #000);
  --action-reassign-designer: var(--app-palette-indigo);
  --action-reassign-designer-hover: color-mix(in srgb, var(--action-reassign-designer) 84%, #000);
  --action-reassign-sales: var(--app-palette-orange);
  --action-reassign-sales-hover: color-mix(in srgb, var(--action-reassign-sales) 84%, #000);
  --action-complete: var(--app-palette-forest);
  --action-complete-hover: color-mix(in srgb, var(--action-complete) 84%, #000);
  --action-partial: var(--app-palette-teal-solid);
  --action-partial-hover: color-mix(in srgb, var(--action-partial) 84%, #000);
  --action-reviewed: var(--app-palette-indigo, var(--app-palette-blue));
  --action-reviewed-hover: color-mix(in srgb, var(--action-reviewed) 84%, #000);
  --action-hold: var(--app-palette-yellow);
  --action-hold-hover: color-mix(in srgb, var(--action-hold) 84%, #000);
  --action-unhold: var(--app-palette-forest);
  --action-unhold-hover: color-mix(in srgb, var(--action-unhold) 84%, #000);
  --action-cancel: var(--app-palette-dark-grey);
  --action-cancel-hover: color-mix(in srgb, var(--action-cancel) 84%, #000);
  --action-delete: var(--app-palette-red);
  --action-delete-hover: color-mix(in srgb, var(--action-delete) 84%, #000);
  --action-unlink-job: var(--app-palette-red);
  --action-unlink-job-hover: color-mix(in srgb, var(--action-unlink-job) 84%, #000);
  --on-create: var(--app-palette-snow);
  --on-create-hover: var(--app-palette-snow);
  --on-edit-input: var(--app-palette-snow);
  --on-edit-input-hover: var(--app-palette-snow);
  --on-edit-output: var(--app-palette-snow);
  --on-edit-output-hover: var(--app-palette-snow);
  --on-export-pdf: var(--app-palette-snow);
  --on-export-pdf-hover: var(--app-palette-snow);
  --on-view: var(--app-palette-snow);
  --on-view-hover: var(--app-palette-snow);
  --on-assign-designer: var(--app-palette-snow);
  --on-assign-designer-hover: var(--app-palette-snow);
  --on-reassign-designer: var(--app-palette-snow);
  --on-reassign-designer-hover: var(--app-palette-snow);
  --on-reassign-sales: var(--app-palette-navy);
  --on-reassign-sales-hover: var(--app-palette-snow);
  --on-complete: var(--app-palette-snow);
  --on-complete-hover: var(--app-palette-snow);
  --on-partial: var(--app-palette-snow);
  --on-partial-hover: var(--app-palette-snow);
  --on-hold: var(--app-palette-navy);
  --on-hold-hover: var(--app-palette-navy);
  --on-unhold: var(--app-palette-snow);
  --on-unhold-hover: var(--app-palette-snow);
  --on-insufficient: var(--app-palette-navy);
  --on-insufficient-hover: var(--app-palette-snow);
  --on-cancel: var(--app-palette-snow);
  --on-cancel-hover: var(--app-palette-snow);
  --on-delete: var(--app-palette-snow);
  --on-delete-hover: var(--app-palette-snow);
  --on-reinstate: var(--app-palette-snow);
  --on-reinstate-hover: var(--app-palette-snow);
  --on-unlink-job: var(--app-palette-snow);
  --on-unlink-job-hover: var(--app-palette-snow);

  --network-offline-gradient: linear-gradient(135deg, var(--app-palette-red) 0%, var(--app-palette-navy) 100%);
  --network-online-gradient: linear-gradient(135deg, var(--app-palette-forest) 0%, var(--app-palette-navy) 100%);

  --glass-bg-light: rgba(255, 255, 255, 0.6);
  --glass-bg-medium: rgba(255, 255, 255, 0.75);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-bg-solid: rgba(255, 255, 255, 0.95);
  --glass-bg-gradient-start: rgba(255, 255, 255, 0.99);
  --glass-bg-gradient-end: rgba(255, 255, 255, 0.93);
  --glass-bg-gradient-alt-start: rgba(255, 255, 255, 0.94);
  --glass-bg-gradient-alt-end: rgba(255, 255, 255, 0.82);
  --glass-bg-card: rgba(255, 255, 255, 0.85);
  --glass-bg-card-end: rgba(255, 255, 255, 0.65);
  --glass-bg-overlay: rgba(255, 255, 255, 0.7);
  --glass-bg-shine: rgba(255, 255, 255, 0.8);
  --glass-border-faint: rgba(var(--app-palette-navy-rgb), 0.08);
  --glass-border-medium: rgba(var(--app-palette-navy-rgb), 0.14);
  --glass-white-border: rgba(255, 255, 255, 0.2);
  --glass-white-border-strong: rgba(255, 255, 255, 0.35);
  --glass-white-inset: rgba(255, 255, 255, 0.6);

  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-tap: rgba(0, 0, 0, 0.1);
  --shadow-ink-subtle: rgba(0, 0, 0, 0.08);
  --shadow-ink-light: rgba(0, 0, 0, 0.05);
  --shadow-ink-deep: rgba(10, 29, 55, 0.18);

  --login-card-bg: rgba(255, 255, 255, 0.95);
  --login-card-shadow: rgba(10, 29, 55, 0.18);
  --login-input-bg: rgba(255, 255, 255, 0.75);
  --login-input-focus-ring: rgba(var(--app-palette-blue-rgb), 0.2);
  --login-input-focus-border: rgba(var(--app-palette-blue-rgb), 0.65);
  --login-input-focus-shadow: rgba(15, 105, 240, 0.18);
  --login-mesh-teal: rgba(var(--app-palette-blue-rgb), 0.12);
  --login-mesh-amber: rgba(var(--app-palette-orange-rgb), 0.16);
  --login-input-inner-shadow: rgba(255, 255, 255, 0.8);

  --action-insufficient: var(--app-palette-teal);
  --action-insufficient-hover: color-mix(in srgb, var(--action-insufficient) 84%, #000);
  --action-reinstate: var(--app-palette-steel);
  --action-reinstate-hover: color-mix(in srgb, var(--action-reinstate) 84%, #000);

  --action-contract-award: var(--app-palette-forest);
  --action-contract-award-hover: color-mix(in srgb, var(--action-contract-award) 84%, #000);
  --action-arrange-schedule: var(--app-palette-teal-solid);
  --action-arrange-schedule-hover: color-mix(in srgb, var(--action-arrange-schedule) 84%, #000);
  --action-rearrange-schedule: var(--app-palette-steel);
  --action-rearrange-schedule-hover: color-mix(in srgb, var(--action-rearrange-schedule) 84%, #000);
  --action-cancel-schedule: var(--app-palette-red);
  --action-cancel-schedule-hover: color-mix(in srgb, var(--action-cancel-schedule) 84%, #000);
  --action-submit-document: var(--app-palette-indigo);
  --action-submit-document-hover: color-mix(in srgb, var(--action-submit-document) 84%, #000);
  --action-resubmit-document: var(--app-palette-violet);
  --action-resubmit-document-hover: color-mix(in srgb, var(--action-resubmit-document) 84%, #000);
  --action-arrange-application: var(--app-palette-forest);
  --action-arrange-application-hover: color-mix(in srgb, var(--action-arrange-application) 84%, #000);
  --action-cancel-application: var(--app-palette-dark-grey);
  --action-cancel-application-hover: color-mix(in srgb, var(--action-cancel-application) 84%, #000);
  --action-design-details: var(--app-palette-navy);
  --action-design-details-hover: color-mix(in srgb, var(--action-design-details) 84%, #000);
  --action-admin-backward: var(--app-palette-yellow);
  --action-admin-backward-hover: color-mix(in srgb, var(--action-admin-backward) 72%, var(--app-palette-dark-grey));
  --action-convert-as-built: var(--app-palette-navy);
  --action-convert-as-built-hover: color-mix(in srgb, var(--action-convert-as-built) 84%, #000);
  --action-sales-details: var(--app-palette-navy);
  --action-sales-details-hover: color-mix(in srgb, var(--action-sales-details) 84%, #000);
  --action-generate-proposal: var(--app-palette-blue);
  --action-generate-proposal-hover: color-mix(in srgb, var(--action-generate-proposal) 84%, #000);
  --action-generate-pvsyst: var(--app-palette-teal-solid);
  --action-generate-pvsyst-hover: color-mix(in srgb, var(--action-generate-pvsyst) 84%, #000);
  --on-contract-award: var(--app-palette-snow);
  --on-arrange-schedule: var(--app-palette-snow);
  --on-rearrange-schedule: var(--app-palette-snow);
  --on-cancel-schedule: var(--app-palette-snow);
  --on-submit-document: var(--app-palette-snow);
  --on-resubmit-document: var(--app-palette-snow);
  --on-cancel-application: var(--app-palette-snow);
  --on-design-details: var(--app-palette-snow);
  --on-admin-backward: var(--app-palette-navy);
  --on-convert-as-built: var(--app-palette-snow);

  --metric-neutral-soft: rgba(var(--app-palette-steel-rgb), 0.2);

  --nav-separator: rgba(0, 0, 0, 0.08);
  --code-text: var(--app-palette-navy);

  --job-detail-dark-bg: var(--app-palette-navy);
  --job-detail-touch-target-min: var(--touch-target-min-mobile);
  --job-detail-gutter: max(var(--layout-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --job-detail-panel-radius: var(--radius-lg, 0.5rem);
  --job-detail-control-radius: var(--radius-lg, 0.5rem);
  --job-detail-command-height: var(--touch-target-min);
  --job-detail-panel-border: rgba(var(--color-brand-primary-rgb, 15, 105, 240), 0.12);
  --job-detail-panel-bg: var(--color-surface-elevated, var(--color-white));
  --job-detail-panel-muted: rgba(var(--color-brand-primary-rgb, 15, 105, 240), 0.045);

  --searchable-select-margin: 8px;
  --searchable-select-max-visible-items: var(--dropdown-cap-visible-items);
  --searchable-select-item-min-height: var(--dropdown-cap-item-min-height);
  --searchable-select-max-height: 220px;
  --searchable-select-min-height: 120px;

  --dashboard-bucket-skeleton-min-height: clamp(30rem, 82vh, 48rem);
  --dashboard-bucket-empty-min-height: clamp(12rem, 30vh, 18rem);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-normal: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-slower: 0.01ms;
    --dur-instant: 0.01ms;
    --dur-quick: 0.01ms;
    --dur-deliberate: 0.01ms;
    --dur-cinematic: 0.01ms;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}


dashboard-page {
  display: block;
  min-height: var(--app-viewport-height);
}

dashboard-page #smartInsights.smart-insights-shell {
  min-height: clamp(5.75rem, 10vh, 7.25rem);
  contain-intrinsic-block-size: auto clamp(5.75rem, 10vh, 7.25rem);
  width: 100%;
}

dashboard-page #smartInsights.smart-insights-shell.smart-insights-shell--empty {
  min-height: clamp(5rem, 12vh, 6.5rem);
  contain-intrinsic-block-size: auto clamp(5rem, 12vh, 6.5rem);
}

dashboard-page #smartInsights.smart-insights-shell.smart-insights-shell--empty .smart-insights-placeholder {
  min-height: clamp(5rem, 12vh, 6.5rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  background:
    linear-gradient(
      90deg,
      rgba(var(--color-brand-primary-rgb), 0.05) 0%,
      rgba(var(--color-brand-primary-rgb), 0.12) 45%,
      rgba(var(--color-brand-primary-rgb), 0.05) 100%
    );
}

dashboard-page #smartInsights .insight-card {
  min-height: inherit;
}

@media (width >= 1366px) {
  dashboard-page #smartInsights.smart-insights-shell {
    min-height: clamp(5.75rem, 8vh, 6.75rem);
    contain-intrinsic-block-size: auto clamp(5.75rem, 8vh, 6.75rem);
  }

  dashboard-page #smartInsights .insight-card {
    min-height: inherit;
  }

  dashboard-page #smartInsights.smart-insights-shell.smart-insights-shell--empty {
    min-height: clamp(5rem, 9vh, 6rem);
    contain-intrinsic-block-size: auto clamp(5rem, 9vh, 6rem);
  }

  dashboard-page #smartInsights.smart-insights-shell.smart-insights-shell--empty .smart-insights-placeholder {
    min-height: clamp(5rem, 9vh, 6rem);
    contain-intrinsic-block-size: auto clamp(5rem, 9vh, 6rem);
  }
}

dashboard-page #statsContainer {
  min-height: clamp(18.5rem, 36vh, 19rem);
  align-items: start;
  align-content: start;
}

dashboard-page #statsContainer > [class*="col-"] {
  align-self: start;
}

dashboard-page:is([data-ui-state="idle"], [data-ui-state="loading"], [data-ui-state="filtering"], [data-ui-state="loading_page"], [data-ui-state="stale"], [data-ui-state="empty"], [data-ui-state="error"]) #statsContainer,
  dashboard-page #statsContainer:empty,
  dashboard-page #statsContainer:has(skeleton-loader):not(:has(metric-card)) {
  min-height: clamp(18.5rem, 36vh, 19rem);
}

dashboard-page #statsContainer skeleton-loader[type="metric"] {
  display: contents;
}

dashboard-page #statsContainer skeleton-loader[type="metric"] > .skeleton-container {
  display: contents;
}

dashboard-page #statsContainer skeleton-loader[type="metric"] > .skeleton-container > [class*="col-"] {
  display: flex;
  min-block-size: 5.75rem;
}

dashboard-page #statsContainer skeleton-loader[type="metric"] .skeleton-metric {
  block-size: 100%;
  min-block-size: 5.75rem;
  inline-size: 100%;
  padding: var(--space-2) var(--space-3);
}

@media (width >= 768px) and (width < 1366px) {
  dashboard-page #statsContainer {
    min-height: clamp(18.5rem, 30vh, 19.5rem);
  }

  dashboard-page:is([data-ui-state="idle"], [data-ui-state="loading"], [data-ui-state="filtering"], [data-ui-state="loading_page"], [data-ui-state="stale"], [data-ui-state="empty"], [data-ui-state="error"]) #statsContainer,
  dashboard-page #statsContainer:empty,
  dashboard-page #statsContainer:has(skeleton-loader):not(:has(metric-card)) {
    min-height: clamp(18.5rem, 30vh, 19.5rem);
  }
}

@media (width >= 1366px) and (width < 1920px) {
  dashboard-page #statsContainer {
    min-height: clamp(7rem, 12vh, 8.75rem);
  }

  dashboard-page:is([data-ui-state="idle"], [data-ui-state="loading"], [data-ui-state="filtering"], [data-ui-state="loading_page"], [data-ui-state="stale"], [data-ui-state="empty"], [data-ui-state="error"]) #statsContainer,
  dashboard-page #statsContainer:empty,
  dashboard-page #statsContainer:has(skeleton-loader):not(:has(metric-card)) {
    min-height: clamp(7rem, 12vh, 8.75rem);
  }
}

@media (width >= 1920px) {
  dashboard-page #statsContainer {
    min-height: clamp(7rem, 10vh, 8.75rem);
  }

  dashboard-page:is([data-ui-state="idle"], [data-ui-state="loading"], [data-ui-state="filtering"], [data-ui-state="loading_page"], [data-ui-state="stale"], [data-ui-state="empty"], [data-ui-state="error"]) #statsContainer,
  dashboard-page #statsContainer:empty,
  dashboard-page #statsContainer:has(skeleton-loader):not(:has(metric-card)) {
    min-height: clamp(7rem, 10vh, 8.75rem);
  }
}

dashboard-page #recentJobsList,
  dashboard-page #myJobsList {
  min-height: clamp(14rem, 34vh, 20rem);
}

@media (width >= 1366px) and (width < 1920px) {
  dashboard-page #recentJobsList,
  dashboard-page #myJobsList {
    min-height: clamp(13rem, 30vh, 18rem);
  }
}

@media (width >= 1920px) {
  dashboard-page #recentJobsList,
  dashboard-page #myJobsList {
    min-height: clamp(14rem, 32vh, 19rem);
  }
}

#app #statsContainer .metric-label {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: var(--line-height-tight);
}





#statsContainer {
  margin-left: 0;
  margin-right: 0;

  display: grid;
  width: 100%;
  gap: var(--space-2);

  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-items: stretch;
  transition: gap var(--dur-slow) var(--ease-out);
}

#statsContainer > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: 0;
  margin-top: 0;
  width: auto;
  flex: none;
  max-width: none;
}

dashboard-page #statsContainer .metric-label {
  font-size: var(--font-size-xs, 0.75rem);
}

dashboard-page #statsContainer {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}


@media (width < 768px) {
  #statsContainer {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  dashboard-page #statsContainer metric-card .metric-card {
    padding: var(--space-2);
    min-height: clamp(4.35rem, 19vw, 5.25rem);
    gap: var(--space-1);
  }

  dashboard-page #statsContainer .metric-card__icon {
    width: var(--space-8);
    height: var(--space-8);
    font-size: 0.95rem;
  }

  dashboard-page #statsContainer .metric-value {
    font-size: 1.35rem;
  }

  #statsContainer metric-card {
    min-height: var(--touch-target-min);
  }

  #statsContainer metric-card .metric-card {
    -webkit-tap-highlight-color: rgba(var(--color-brand-primary-rgb), 0.1);
  }

  #statsContainer .metric-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
    line-height: 1.2;
  }

  #statsContainer:has(> metric-card:only-child),
  #statsContainer:has(> [class*="col-"]:only-child) {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
}


@media (width >= 768px) and (width < 1366px) {
  #statsContainer {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  dashboard-page #statsContainer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  dashboard-page #statsContainer:has(> metric-card:only-child),
  dashboard-page #statsContainer:has(> [class*="col-"]:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  dashboard-page #statsContainer metric-card .metric-card {
    padding: var(--space-4);
    min-height: clamp(6.25rem, 11vw, 7.25rem);
  }

  dashboard-page #statsContainer .metric-card__icon {
    width: var(--space-10);
    height: var(--space-10);
    font-size: var(--font-size-lg);
  }

  dashboard-page #statsContainer .metric-value {
    font-size: var(--font-size-3xl, 1.875rem);
  }
}


@media (width >= 1366px) {
  #statsContainer {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-2);
  }

  dashboard-page #statsContainer metric-card .metric-card {
    padding: var(--space-4);
    min-height: clamp(5.75rem, 7vw, 6.5rem);
  }

  dashboard-page #statsContainer .metric-card__icon {
    width: var(--space-10);
    height: var(--space-10);
    font-size: var(--font-size-xl);
  }

  dashboard-page #statsContainer .metric-value {
    font-size: var(--font-size-2xl, 1.5rem);
  }
}


@media (width >= 1920px) {
  #statsContainer {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-3);
  }

  dashboard-page #statsContainer metric-card .metric-card {
    padding: var(--space-4);
    min-height: clamp(6rem, 6.75vw, 6.75rem);
  }

  dashboard-page #statsContainer .metric-card__icon {
    width: calc(var(--touch-target-min) - var(--space-1));
    height: calc(var(--touch-target-min) - var(--space-1));
    font-size: var(--font-size-xl);
  }

  dashboard-page #statsContainer .metric-value {
    font-size: var(--font-size-3xl, 1.875rem);
  }

  dashboard-page #statsContainer .metric-label {
    font-size: var(--font-size-xs, 0.75rem);
  }
}


#statsContainer metric-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

#statsContainer metric-card .metric-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    padding var(--dur-slow) var(--ease-out),
    min-height var(--dur-slow) var(--ease-out);
}


#statsContainer .metric-card__meta {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

#statsContainer .metric-label,
#statsContainer .metric-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  transition: font-size var(--dur-slow) var(--ease-out);
}

#statsContainer .metric-label {
  text-align: center;
}

#statsContainer .metric-value {
  display: block;
  text-align: center;
}


#statsContainer metric-card:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-2xl, 1rem);
}


#statsContainer skeleton-loader {
  display: contents;
}

#statsContainer skeleton-loader > * {
  width: 100%;
  min-width: 0;
}

#statsContainer skeleton-loader .skeleton-metric {
  min-height: calc(var(--space-12) * 2);
}

@media (width >= 768px) {
  #statsContainer skeleton-loader .skeleton-metric {
    min-height: calc(var(--space-16) + var(--space-12));
  }
}

@media (width >= 1366px) {
  #statsContainer skeleton-loader .skeleton-metric {
    min-height: calc(var(--space-16) + var(--space-8));
  }
}

@media (width >= 1920px) {
  #statsContainer skeleton-loader .skeleton-metric {
    min-height: calc(var(--space-16) * 2);
  }
}


@media print {
  #statsContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    page-break-inside: avoid;
  }

  #statsContainer metric-card .metric-card {
    box-shadow: none;
    border: 1px solid var(--color-border);
  }
}


#statsContainer {
  container-type: inline-size;
  container-name: stats;
}

@container stats (width < 1366px) {
  #statsContainer {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

@container stats (width >= 1366px) {
  #statsContainer {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-4);
  }
}


#statsContainer:empty,
#statsContainer:has(skeleton-loader):not(:has(metric-card)) {
  min-height: calc(var(--space-12) * 2 + var(--space-3) * 2);
}

@media (width >= 768px) {
  #statsContainer:empty,
  #statsContainer:has(skeleton-loader):not(:has(metric-card)) {
    min-height: calc(var(--space-16) + var(--space-12) + var(--space-4) * 2);
  }
}

@media (width >= 1366px) {
  #statsContainer:empty,
  #statsContainer:has(skeleton-loader):not(:has(metric-card)) {
    min-height: calc(var(--space-16) + var(--space-8));
  }
}


@container panel (width >= 390px) and (width < 768px) {
  #statsContainer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  metric-card .metric-card {
    padding: var(--space-2);
  }

  metric-card .metric-value {
    font-size: var(--font-size-lg);
  }

  metric-card .metric-label {
    font-size: var(--font-size-2xs);
  }
}

@container panel (width < 390px) {
  #statsContainer {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}


metric-card {
  contain: layout style;
  min-height: var(--space-16);
}

metric-card:empty,
metric-card[aria-busy="true"] {
  min-height: var(--space-16);
  contain-intrinsic-block-size: auto var(--space-16);
}

metric-card .metric-card {
  min-height: var(--space-16);
}


@media (width >= 768px) {
  dashboard-page #statsContainer .metric-label {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}


@media (width < 768px) {
  dashboard-page #statsContainer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
}

@media (width >= 768px) and (width < 1366px) {
  dashboard-page #statsContainer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
}

@media (width >= 1366px) and (width < 1920px) {
  dashboard-page #statsContainer {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-2);
  }
}

@media (width >= 1920px) {
  dashboard-page #statsContainer {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-3);
  }
}