/* CarKonnect shared design system. */
:root {
    --ck-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ck-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* Primitive spacing, shape, typography, motion, and layout tokens. */
    --ck-space-1: 4px;
    --ck-space-2: 8px;
    --ck-space-3: 12px;
    --ck-space-4: 16px;
    --ck-space-5: 20px;
    --ck-space-6: 24px;
    --ck-space-8: 32px;
    --ck-space-10: 40px;
    --ck-space-12: 48px;
    --ck-space-16: 64px;
    --ck-space-20: 80px;

    --ck-radius-chip: 6px;
    --ck-radius-control: 8px;
    --ck-radius-card: 10px;
    --ck-radius-panel: 12px;
    --ck-radius-modal: 14px;
    --ck-radius-sheet: 18px;
    --ck-radius-pill: 999px;

    --ck-type-display: 2.25rem;
    --ck-type-page: 1.75rem;
    --ck-type-section: 1.375rem;
    --ck-type-card: 1.0625rem;
    --ck-type-body: 1rem;
    --ck-type-compact: .875rem;
    --ck-type-label: .875rem;
    --ck-type-meta: .8125rem;
    --ck-type-button: .9375rem;
    --ck-type-kpi: 2.25rem;
    --ck-type-plate: 1.625rem;

    --ck-leading-display: 1.15;
    --ck-leading-page: 1.2;
    --ck-leading-section: 1.3;
    --ck-leading-card: 1.35;
    --ck-leading-body: 1.5;
    --ck-leading-compact: 1.45;
    --ck-leading-label: 1.35;
    --ck-leading-meta: 1.4;

    --ck-weight-regular: 400;
    --ck-weight-meta: 450;
    --ck-weight-medium: 550;
    --ck-weight-card: 600;
    --ck-weight-semibold: 620;
    --ck-weight-title: 650;
    --ck-weight-bold: 700;

    --ck-icon-xs: 16px;
    --ck-icon-sm: 20px;
    --ck-icon-md: 24px;
    --ck-icon-lg: 32px;
    --ck-target-pointer: 36px;
    --ck-target-compact: 44px;
    --ck-target-touch: 48px;
    --ck-target-workshop: 56px;
    --ck-control-min: 44px;
    --ck-control-comfortable: 48px;
    --ck-focus-width: 2px;
    --ck-focus-offset: 2px;
    --ck-border-width: 1px;
    --ck-duration-instant: 80ms;
    --ck-duration-fast: 120ms;
    --ck-duration-standard: 180ms;
    --ck-duration-deliberate: 320ms;
    --ck-ease-enter: cubic-bezier(.2, .8, .2, 1);
    --ck-ease-exit: cubic-bezier(.4, 0, 1, 1);
    --ck-ease-standard: cubic-bezier(.2, 0, 0, 1);

    --ck-layout-reading: 75ch;
    --ck-layout-guidance: 65ch;
    --ck-layout-form: 720px;
    --ck-layout-content: 1440px;
    --ck-layout-wide: 1760px;
    --ck-layout-gutter: clamp(16px, 3vw, 48px);

    --ck-z-base: 0;
    --ck-z-dropdown: 10;
    --ck-z-sticky: 20;
    --ck-z-nav: 30;
    --ck-z-sheet: 60;
    --ck-z-modal: 80;
    --ck-z-toast: 100;

    /* Component tokens. Shared components consume these aliases, never theme values. */
    --ck-button-primary-bg: var(--ck-action-primary);
    --ck-button-primary-bg-hover: var(--ck-action-primary-hover);
    --ck-button-primary-bg-pressed: var(--ck-action-primary-pressed);
    --ck-button-primary-text: var(--ck-action-primary-text);
    --ck-button-secondary-bg: var(--ck-surface-2);
    --ck-button-secondary-bg-hover: var(--ck-surface-hover);
    --ck-button-secondary-text: var(--ck-text-primary);
    --ck-button-secondary-border: var(--ck-border-control);
    --ck-button-danger-bg: var(--ck-danger-solid);
    --ck-button-danger-text: var(--ck-danger-solid-text);
    --ck-button-ghost-bg-hover: var(--ck-surface-hover);
    --ck-button-disabled-bg: var(--ck-action-disabled);
    --ck-button-disabled-text: var(--ck-action-disabled-text);
    --ck-field-bg: var(--ck-surface-1);
    --ck-field-bg-readonly: var(--ck-surface-inset);
    --ck-field-bg-disabled: var(--ck-surface-disabled);
    --ck-field-text: var(--ck-text-primary);
    --ck-field-placeholder: var(--ck-text-secondary);
    --ck-field-border: var(--ck-border-control);
    --ck-field-border-focus: var(--ck-action-primary);
    --ck-field-border-error: var(--ck-danger-border);
    --ck-field-error-bg: var(--ck-danger-bg);
    --ck-choice-selected-bg: var(--ck-surface-selected);
    --ck-choice-selected-border: var(--ck-action-primary);
    --ck-choice-mark: var(--ck-action-primary);
    --ck-status-bg: var(--ck-surface-2);
    --ck-status-text: var(--ck-text-secondary);
    --ck-status-border: var(--ck-border-default);
    --ck-kpi-bg: var(--ck-surface-1);
    --ck-kpi-border: var(--ck-border-subtle);
    --ck-progress-track: var(--ck-surface-inset);
    --ck-progress-value: var(--ck-action-primary);
    --ck-alert-info-bg: var(--ck-info-bg);
    --ck-alert-info-border: var(--ck-info-border);
    --ck-alert-info-text: var(--ck-info-text);
    --ck-empty-bg: var(--ck-surface-inset);
    --ck-empty-border: var(--ck-border-default);
    --ck-dialog-bg: var(--ck-surface-3);
    --ck-dialog-border: var(--ck-border-default);
    --ck-dialog-backdrop: var(--ck-backdrop);
    --ck-sheet-bg: var(--ck-surface-3);
    --ck-tooltip-bg: var(--ck-surface-3);
    --ck-tooltip-text: var(--ck-text-primary);
    --ck-table-header-bg: var(--ck-surface-2);
    --ck-table-row-bg: var(--ck-surface-1);
    --ck-table-row-hover-bg: var(--ck-surface-hover);
    --ck-table-row-selected-bg: var(--ck-surface-selected);
    --ck-table-row-error-bg: var(--ck-danger-bg);
    --ck-table-row-expanded-bg: var(--ck-surface-inset);
    --ck-table-divider: var(--ck-border-subtle);
    --ck-upload-bg: var(--ck-surface-inset);
    --ck-upload-border: var(--ck-border-control);
    --ck-upload-active-bg: var(--ck-surface-selected);
    --ck-thumbnail-bg: var(--ck-surface-inset);
    --ck-skeleton-start: var(--ck-surface-2);
    --ck-skeleton-end: var(--ck-surface-3);
    --ck-modal-bg: var(--ck-dialog-bg);
    --ck-toast-bg: var(--ck-surface-3);
    --ck-toast-text: var(--ck-text-primary);
  }

  :root,
  html[data-theme="obsidian"],
  [data-theme="obsidian"] {
    color-scheme: dark;
    --ck-bg-app: #080d12;
    --ck-bg-grid: #14202a;
    --ck-canvas: #0d141b;
    --ck-nav: #0a1117;
    --ck-header: #0e171f;
    --ck-surface-1: #111a22;
    --ck-surface-2: #16212b;
    --ck-surface-3: #1c2934;
    --ck-surface-inset: #0a1118;
    --ck-surface-hover: #1b2a36;
    --ck-surface-selected: #102d4a;
    --ck-surface-disabled: #151b20;
    --ck-border-subtle: #22313c;
    --ck-border-default: #334553;
    --ck-border-control: #506878;
    --ck-divider-strong: #5e7787;
    --ck-text-primary: #f2f6f8;
    --ck-text-secondary: #c2cdd4;
    --ck-text-muted: #8ea0ac;
    --ck-text-disabled: #66727a;
    --ck-text-inverse: #071018;
    --ck-link: #78b7ff;
    --ck-focus: #8cc7ff;
    --ck-selection: #174b78;
    --ck-backdrop: rgba(2, 6, 10, .72);

    --ck-action-primary: #2f89ff;
    --ck-action-primary-hover: #5aa3ff;
    --ck-action-primary-pressed: #1975e6;
    --ck-action-primary-text: #071018;
    --ck-action-disabled: #233544;
    --ck-action-disabled-text: #72818c;
    --ck-product-buyerfinder-accent: #a993ff;

    --ck-success-solid: #18a86b;
    --ck-success-solid-text: #04140e;
    --ck-success-bg: #0e2a20;
    --ck-success-border: #2d8a63;
    --ck-success-text: #70e1b2;
    --ck-warning-solid: #f2b84b;
    --ck-warning-solid-text: #211500;
    --ck-warning-bg: #2d2411;
    --ck-warning-border: #a57927;
    --ck-warning-text: #ffd782;
    --ck-danger-solid: #e05863;
    --ck-danger-solid-text: #18070a;
    --ck-danger-bg: #32171b;
    --ck-danger-border: #a94b53;
    --ck-danger-text: #ff9da5;
    --ck-info-solid: #398bff;
    --ck-info-solid-text: #051426;
    --ck-info-bg: #102a49;
    --ck-info-border: #347acc;
    --ck-info-text: #8ec1ff;
    --ck-offline-solid: #718592;
    --ck-offline-solid-text: #071015;
    --ck-offline-bg: #1c252b;
    --ck-offline-border: #61747f;
    --ck-offline-text: #c3ced4;
    --ck-pending-solid: #9b7bff;
    --ck-pending-solid-text: #120b24;
    --ck-pending-bg: #241d3d;
    --ck-pending-border: #7259c7;
    --ck-pending-text: #c3b1ff;
    --ck-accepted-solid: #22b8a7;
    --ck-accepted-solid-text: #041613;
    --ck-accepted-bg: #0c2b28;
    --ck-accepted-border: #238b80;
    --ck-accepted-text: #74e4d5;
    --ck-retake-solid: #f28a36;
    --ck-retake-solid-text: #201004;
    --ck-retake-bg: #352012;
    --ck-retake-border: #b96223;
    --ck-retake-text: #ffc18a;

    --ck-shadow-raised: 0 8px 24px rgba(0, 0, 0, .24);
    --ck-shadow-floating: 0 18px 48px rgba(0, 0, 0, .32);
    --ck-dialog-bg: var(--ck-surface-3);
    --ck-dialog-border: var(--ck-border-control);
    --ck-sheet-bg: var(--ck-surface-3);
  }

  html[data-theme="arctic"],
  [data-theme="arctic"] {
    color-scheme: light;
    --ck-bg-app: #f3f7fa;
    --ck-bg-grid: #dce6ed;
    --ck-canvas: #fcfdfe;
    --ck-nav: #eef3f6;
    --ck-header: #f8fafc;
    --ck-surface-1: #ffffff;
    --ck-surface-2: #f4f8fa;
    --ck-surface-3: #eaf1f5;
    --ck-surface-inset: #e8eef2;
    --ck-surface-hover: #e8f2fb;
    --ck-surface-selected: #ddeeff;
    --ck-surface-disabled: #eef1f3;
    --ck-border-subtle: #d7e1e7;
    --ck-border-default: #aebec9;
    --ck-border-control: #7c919f;
    --ck-divider-strong: #627988;
    --ck-text-primary: #11212d;
    --ck-text-secondary: #3b4f5d;
    --ck-text-muted: #607481;
    --ck-text-disabled: #8998a2;
    --ck-text-inverse: #f7fbfd;
    --ck-link: #005fcc;
    --ck-focus: #005fcc;
    --ck-selection: #c9e2ff;
    --ck-backdrop: rgba(18, 32, 42, .48);

    --ck-action-primary: #0067d9;
    --ck-action-primary-hover: #0057bb;
    --ck-action-primary-pressed: #00499d;
    --ck-action-primary-text: #ffffff;
    --ck-action-disabled: #d4dde3;
    --ck-action-disabled-text: #71818c;
    --ck-product-buyerfinder-accent: #6548c8;

    --ck-success-solid: #0a7a4b;
    --ck-success-solid-text: #ffffff;
    --ck-success-bg: #e3f6ed;
    --ck-success-border: #68af8d;
    --ck-success-text: #075c39;
    --ck-warning-solid: #f0b429;
    --ck-warning-solid-text: #211500;
    --ck-warning-bg: #fff2d5;
    --ck-warning-border: #d19b30;
    --ck-warning-text: #6f3e00;
    --ck-danger-solid: #c93643;
    --ck-danger-solid-text: #ffffff;
    --ck-danger-bg: #fce8ea;
    --ck-danger-border: #d78088;
    --ck-danger-text: #9d202e;
    --ck-info-solid: #006bd6;
    --ck-info-solid-text: #ffffff;
    --ck-info-bg: #e5f1ff;
    --ck-info-border: #6aa5e4;
    --ck-info-text: #004f9e;
    --ck-offline-solid: #536674;
    --ck-offline-solid-text: #ffffff;
    --ck-offline-bg: #e8edf0;
    --ck-offline-border: #94a3ac;
    --ck-offline-text: #40515d;
    --ck-pending-solid: #6e52c7;
    --ck-pending-solid-text: #ffffff;
    --ck-pending-bg: #efeaff;
    --ck-pending-border: #9b8ad8;
    --ck-pending-text: #5037a3;
    --ck-accepted-solid: #00796f;
    --ck-accepted-solid-text: #ffffff;
    --ck-accepted-bg: #e0f6f3;
    --ck-accepted-border: #72b8b0;
    --ck-accepted-text: #005e57;
    --ck-retake-solid: #c76517;
    --ck-retake-solid-text: #ffffff;
    --ck-retake-bg: #fff0e2;
    --ck-retake-border: #d99962;
    --ck-retake-text: #7a3d00;

    --ck-shadow-raised: 0 8px 24px rgba(15, 23, 42, .08);
    --ck-shadow-floating: 0 18px 48px rgba(15, 23, 42, .14);
    --ck-dialog-bg: var(--ck-surface-1);
    --ck-dialog-border: var(--ck-border-default);
    --ck-sheet-bg: var(--ck-surface-1);
  }

  /* Rebind component aliases at scoped theme boundaries used by the gallery. */
  :where(:root, [data-theme]) {
    --ck-button-primary-bg: var(--ck-action-primary);
    --ck-button-primary-bg-hover: var(--ck-action-primary-hover);
    --ck-button-primary-bg-pressed: var(--ck-action-primary-pressed);
    --ck-button-primary-text: var(--ck-action-primary-text);
    --ck-button-secondary-bg: var(--ck-surface-2);
    --ck-button-secondary-bg-hover: var(--ck-surface-hover);
    --ck-button-secondary-text: var(--ck-text-primary);
    --ck-button-secondary-border: var(--ck-border-control);
    --ck-button-danger-bg: var(--ck-danger-solid);
    --ck-button-danger-text: var(--ck-danger-solid-text);
    --ck-button-ghost-bg-hover: var(--ck-surface-hover);
    --ck-button-disabled-bg: var(--ck-action-disabled);
    --ck-button-disabled-text: var(--ck-action-disabled-text);
    --ck-field-bg: var(--ck-surface-1);
    --ck-field-bg-readonly: var(--ck-surface-inset);
    --ck-field-bg-disabled: var(--ck-surface-disabled);
    --ck-field-text: var(--ck-text-primary);
    --ck-field-placeholder: var(--ck-text-secondary);
    --ck-field-border: var(--ck-border-control);
    --ck-field-border-focus: var(--ck-action-primary);
    --ck-field-border-error: var(--ck-danger-border);
    --ck-field-error-bg: var(--ck-danger-bg);
    --ck-choice-selected-bg: var(--ck-surface-selected);
    --ck-choice-selected-border: var(--ck-action-primary);
    --ck-choice-mark: var(--ck-action-primary);
    --ck-status-bg: var(--ck-surface-2);
    --ck-status-text: var(--ck-text-secondary);
    --ck-status-border: var(--ck-border-default);
    --ck-kpi-bg: var(--ck-surface-1);
    --ck-kpi-border: var(--ck-border-subtle);
    --ck-progress-track: var(--ck-surface-inset);
    --ck-progress-value: var(--ck-action-primary);
    --ck-alert-info-bg: var(--ck-info-bg);
    --ck-alert-info-border: var(--ck-info-border);
    --ck-alert-info-text: var(--ck-info-text);
    --ck-empty-bg: var(--ck-surface-inset);
    --ck-empty-border: var(--ck-border-default);
    --ck-tooltip-bg: var(--ck-surface-3);
    --ck-tooltip-text: var(--ck-text-primary);
    --ck-table-header-bg: var(--ck-surface-2);
    --ck-table-row-bg: var(--ck-surface-1);
    --ck-table-row-hover-bg: var(--ck-surface-hover);
    --ck-table-row-selected-bg: var(--ck-surface-selected);
    --ck-table-row-error-bg: var(--ck-danger-bg);
    --ck-table-row-expanded-bg: var(--ck-surface-inset);
    --ck-table-divider: var(--ck-border-subtle);
    --ck-upload-bg: var(--ck-surface-inset);
    --ck-upload-border: var(--ck-border-control);
    --ck-upload-active-bg: var(--ck-surface-selected);
    --ck-thumbnail-bg: var(--ck-surface-inset);
    --ck-skeleton-start: var(--ck-surface-2);
    --ck-skeleton-end: var(--ck-surface-3);
    --ck-modal-bg: var(--ck-dialog-bg);
    --ck-toast-bg: var(--ck-surface-3);
    --ck-toast-text: var(--ck-text-primary);
  }

  html[data-contrast="workshop"] {
    --ck-control-min: 52px;
    --ck-control-comfortable: 56px;
    --ck-border-width: 2px;
    --ck-focus-width: 3px;
    --ck-type-body: 1.0625rem;
    --ck-type-compact: 1rem;
    --ck-type-label: 1rem;
    --ck-type-meta: .875rem;
    --ck-bg-grid: transparent;
    --ck-border-subtle: var(--ck-border-default);
    --ck-field-border: var(--ck-divider-strong);
    --ck-upload-border: var(--ck-divider-strong);
    --ck-duration-instant: 40ms;
    --ck-duration-fast: 80ms;
    --ck-duration-standard: 100ms;
    --ck-duration-deliberate: 100ms;
  }

  ::selection {
    color: var(--ck-text-primary);
    background: var(--ck-selection);
  }

  :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--ck-focus-width) solid var(--ck-focus);
    outline-offset: var(--ck-focus-offset);
  }

  :where(button, input, select, textarea) {
    min-height: var(--ck-control-min);
  }

  :where(.kpi-value, .metric-value, .summary-tile strong, .qa-kpi strong, .ops-kpi strong) {
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 599px) {
    :root {
      --ck-type-display: 1.75rem;
      --ck-type-page: 1.5rem;
      --ck-type-section: 1.25rem;
      --ck-type-kpi: 2rem;
      --ck-type-plate: 1.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --ck-duration-instant: 0ms;
      --ck-duration-fast: 80ms;
      --ck-duration-standard: 100ms;
      --ck-duration-deliberate: 100ms;
    }

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
/* BuyerFinder quarantined historical styles. */
:root {
    /* Compatibility aliases resolve through the shared semantic design system. */
    --base-bg: var(--ck-bg-app);
    --base-bg-subtle: var(--ck-canvas);
    --surface-card: var(--ck-surface-1);
    --surface-input: var(--ck-surface-inset);
    --surface-alt: var(--ck-surface-2);
    --surface-danger: var(--ck-danger-bg);
    --surface-success: var(--ck-success-bg);
    --surface-warning: var(--ck-warning-bg);
    --surface-info: var(--ck-info-bg);
    --border-danger: var(--ck-danger-border);
    --border-success: var(--ck-success-border);
    --border-subtle: var(--ck-border-subtle);
    --border-standard: var(--ck-border-default);
    --border-strong: var(--ck-divider-strong);
    --text-primary: var(--ck-text-primary);
    --text-secondary: var(--ck-text-muted);
    --text-tertiary: var(--ck-text-disabled);
    --text-inverse: var(--ck-text-inverse);
    --accent-blue: var(--ck-action-primary);
    --accent-green: var(--ck-success-solid);
    --accent-red: var(--ck-danger-solid);
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@500;700;900&display=swap');

:root {
    --bg: var(--base-bg);
    --bg2: var(--base-bg-subtle);
    --panel: var(--surface-card);
    --panel2: var(--ck-surface-2);
    --line: var(--ck-border-default);
    --line2: var(--ck-border-control);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --faint: var(--ck-text-muted);
    --accent: var(--ck-action-primary);
    --accent2: var(--ck-link);
    --gold: var(--ck-warning-solid);
    --danger: var(--ck-danger-solid);
    --ok: var(--ck-success-solid);
    --shadow: var(--ck-shadow-raised);
    --radius: var(--ck-radius-card);
    --radius2: var(--ck-radius-control);
    --font: var(--ck-font-sans);
  }

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

  .theme-toggle-btn {
    background: none;
    cursor: pointer;
    font-size: 18px;
    border-radius: 10px;
    transition: background 0.15s ease;
    line-height: 1;
    margin-left: 12px;
  }
  .theme-toggle-btn:hover { background: var(--line); }
  [data-theme="arctic"] .theme-toggle-btn:hover { background: var(--surface-alt); }
  
  h1, h2, h3, h4, .brand-title, .title { font-family: var(--ck-font-sans); }

  * { box-sizing: border-box; min-width: 0; }
  body {
    margin: 0;
  }
  body.loading { cursor: progress; }
  body.loading .btn-primary { filter: saturate(.85); opacity: .75; pointer-events: none; }

  .app-frame { position: relative; z-index: 1; }
  .rail-inner { min-height: 0; backdrop-filter: blur(24px); overscroll-behavior: contain;
  }
  .brand-lockup { border-bottom: 1px solid var(--line); }
  .brand-text strong, .brand-text span { display: block; }
  .nav-item { width: 100%; align-items: center; text-align: left; cursor: pointer; }
  .nav-item span { place-items: center; font-weight: 950; }
  .nav-item em { font-style: normal; }
  .nav-item.active span { border: 1px solid rgba(34,224,187,.32); }

  .rail-card { border: 1px solid var(--line); flex: 0 0 auto; overflow: hidden; }
  .mini-label, .eyebrow { text-transform: uppercase; font-size: 11px; font-weight: 950; }
  .backend-grid { display: grid; gap: 8px; margin-top: 12px; }
  .backend-grid div { padding: 11px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); overflow: hidden; }
  .backend-grid span, .summary-tile span, .head-meter span, .admin-card span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .10em; font-weight: 900; margin-bottom: 6px; }
  .backend-grid strong { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .insight-card p { margin: 10px 0 0; line-height: 1.48; font-size: 13px; }
  .rail-footer { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; font-size: 11px; padding: 12px 6px 2px; flex-wrap: wrap; }
  .command-hero { position: relative; justify-content: space-between; backdrop-filter: blur(22px); }
  .command-hero::after { content: ''; position: absolute; right: -75px; top: -125px; width: 330px; height: 330px; border-radius: 999px; border: 1px solid rgba(34,224,187,.20); background: radial-gradient(circle, rgba(34,224,187,.18), transparent 62%); }
  .hero-copy { position: relative; z-index: 1; }
  .pill-row { align-items: center; }
  .status-pill { max-width: 100%; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 8px 11px; font-size: 12px; font-weight: 850; overflow-wrap: anywhere; }
  .status-pill.soft { color: var(--text); }
  .live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
  h1, h2, h3, p { margin-top: 0; }
  h2 { margin-bottom: 8px; }
  h3 { margin-bottom: 4px; }
  .command-hero p { max-width: 760px; }
  .hero-actions { position: relative; z-index: 1; justify-content: flex-end; }

  .btn { appearance: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; }
  .btn:hover { transform: translateY(-1px); border-color: rgba(34,224,187,.38); background: var(--surface-card); }
  .btn-small { min-height: 36px; padding: 8px 12px; font-size: 12px; }
  .icon-btn { border: 1px solid var(--line); color: var(--text); background: var(--surface-card); width: 44px; height: 44px; border-radius: 999px; font-size: 26px; cursor: pointer; flex: 0 0 auto; }

  .notice { padding: 14px 16px; margin: 0 0 18px; overflow-wrap: anywhere; white-space: pre-wrap; }
  .hidden { display: none !important; }

  .view { display: none; animation: enter .22s ease both; }
  .active-view { display: block; }
  @keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  .surface { backdrop-filter: blur(22px); }
  .surface-head.compact { margin-bottom: 16px; }
  .surface-head p { margin-bottom: 0; }
  .head-meter { border: 1px solid rgba(34,224,187,.22); padding: 13px; }
  .head-meter strong { display: block; font-size: 13px; overflow-wrap: break-word; }

  .form-block { padding: 24px 0; border-top: 1px solid var(--line); }
  .form-block.first { padding-top: 0; }
  .form-block:last-child { padding-bottom: 0; }
  .block-title { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 13px; align-items: start; margin-bottom: 16px; }
  .block-title > span { width: 38px; height: 38px; border-radius: 15px; display: grid; place-items: center; color: var(--accent2); background: rgba(34,224,187,.11); border: 1px solid rgba(34,224,187,.22); font-weight: 1000; }
  .block-title p { margin-bottom: 0; font-size: 13px; }

  .field-grid { display: grid; }
  .span-all { grid-column: 1 / -1; }
  label { display: grid; gap: 7px; text-transform: uppercase; font-weight: 800; }
  input, select, textarea { outline: none; font: 700 14px/1.3 var(--font); transition: .18s ease; text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
  input:focus, select:focus, textarea:focus { border-color: rgba(34,224,187,.70); background: var(--surface-input); }
  textarea { resize: vertical; line-height: 1.48; }
  .textarea-label { margin-top: 15px; }

  .flag-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; margin-top: 15px; }
  .flag-strip label { gap: 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 17px; padding: 12px 13px; background: var(--surface-card); color: #e8f5ff; text-transform: none; letter-spacing: 0; font-size: 13px; min-height: 56px; line-height: 1.18; overflow: hidden; }
  .flag-strip input { padding: 0; accent-color: var(--accent); flex: 0 0 auto; }
  .flag-strip span { overflow-wrap: normal; word-break: keep-all; hyphens: none; max-width: 100%; }

  .side-stack { display: grid; }
  .logic-list { display: grid; }
  .logic-list div { display: grid; grid-template-columns: 35px minmax(0,1fr); grid-template-areas: "num title" "num body"; gap: 0 11px; border: 1px solid var(--line); padding: 14px; }
  .logic-list b { grid-area: num; width: 35px; height: 35px; border-radius: 13px; display: grid; place-items: center; color: var(--accent2); background: rgba(34,224,187,.105); }
  .logic-list strong { grid-area: title; }
  .logic-list p { grid-area: body; margin: 4px 0 0; font-size: 13px; }
  .sample-list { display: grid; }
  .sample-btn { width: 100%; text-align: left; border: 1px solid rgba(255,255,255,.10); padding: 13px; color: var(--text); cursor: pointer; transition: .18s ease; }
  .sample-btn:hover { transform: translateY(-1px); border-color: rgba(34,224,187,.30); background: rgba(34,224,187,.075); }
  .sample-btn strong, .sample-btn span { display: block; }
  .sample-btn strong { font-weight: 800; }
  .sample-btn span { margin-top: 5px; font-size: 12px; }
  .skeleton-line { height: 54px; border-radius: 18px; background: linear-gradient(90deg, rgba(255,255,255,.04), var(--surface-card), rgba(255,255,255,.04)); }
  .skeleton-line.small { height: 42px; opacity: .65; }

  .empty-results { min-height: 480px; display: grid; place-items: center; text-align: center; padding: 42px; }
  .empty-results > * { max-width: 520px; }
  .empty-mark { width: 82px; height: 82px; border-radius: 28px; display: grid; place-items: center; margin: 0 auto 18px; font-size: 42px; color: var(--accent2); background: rgba(34,224,187,.105); border: 1px solid rgba(34,224,187,.25); }
  .result-stage { display: grid; }
  .result-top { padding: 23px; display: flex; justify-content: space-between; align-items: flex-start; }
  .result-top p { margin-bottom: 0; overflow-wrap: anywhere; }
  .summary-deck { display: grid; }
  .summary-tile { padding: 17px; }
  .summary-tile strong { display: block; font-size: clamp(17px, 1.6vw, 24px); line-height: 1.1; }
  .warning-box { border: 1px solid rgba(244,199,107,.34); padding: 16px; color: var(--text)0c8; overflow-wrap: anywhere; }
  .warning-box ul { margin: 8px 0 0 20px; padding: 0; }
  .tab-shell { border: 1px solid var(--line); }
  .tab { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-weight: 800; }
  .tab.active { background: var(--accent); color: var(--base-bg); box-shadow: 0 12px 28px rgba(34,224,187,.20); }
  .tab-panel { display: none; }
  .active-tab { display: block; }
  .cards-list { display: grid; }
  .route-card::before { width: 4px; }
  .route-top { display: grid; gap: 14px; align-items: start; }
  .rank-badge { width: 50px; height: 50px; border-radius: 18px; display: grid; place-items: center; color: var(--accent2); background: rgba(34,224,187,.115); border: 1px solid rgba(34,224,187,.25); font-weight: 1000; }
  .route-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .route-title strong { font-size: 18px; }
  .badge { display: inline-flex; align-items: center; padding: 6px 9px; border: 1px solid rgba(34,224,187,.24); font-size: 11px; font-weight: 800; max-width: 100%; }
  .route-meta { margin-top: 5px; }
  .score-pill { border: 1px solid var(--line); border-radius: 999px; padding: 9px 12px; background: rgba(255,255,255,.07); color: var(--text); font-weight: 1000; white-space: nowrap; }
  .route-reason { margin: 14px 0; }
  .chip-row, .card-actions { display: flex; gap: 7px; }
  .chip { border: 1px solid rgba(255,255,255,.105); padding: 6px 9px; font-size: 12px; max-width: 100%; }
  .chip.warn { color: #ffe8aa; border-color: rgba(244,199,107,.30); background: rgba(244,199,107,.075); }
  .card-actions { margin-top: 14px; }
  .next-box { padding: 20px 22px; color: #dcebf8; line-height: 1.65; }
  .next-box li { margin-bottom: 8px; overflow-wrap: break-word; }

  .admin-grid { display: grid; }
  .admin-card { padding: 17px; }
  .admin-card strong { font-size: 28px; }
  .diagnostic-box { margin-top: 15px; display: grid; }
  .diag-row { border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 12px; background: rgba(255,255,255,.042); color: #dcebf8; }
  .diag-row b { color: var(--accent2); }

  .modal-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0,0,0,.62); backdrop-filter: blur(10px); }
  .modal { max-height: 90vh; overflow: auto; padding: 24px; }
  .modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
  .modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

  @media (max-width: 1220px) {
    .side-stack { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .flag-strip { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  }
  @media (max-width: 940px) {
    .command-hero, .surface-head, .result-top { flex-direction: column; }
  }
  @media (max-width: 680px) {
    .workspace { padding-inline: 10px; }
    .flag-strip { grid-template-columns: 1fr; }
    .score-pill { justify-self: start; }
    .hero-actions .btn { flex: 1 1 160px; }
  }
  .rail-inner::-webkit-scrollbar { width: 8px; }
  .rail-inner::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
  .brand-lockup, .nav-item, .backend-grid div, .surface, .route-card, .diag-row, .notice { min-width: 0; }
  .brand-text, .nav-item strong, .nav-item em, .surface-head, .diag-row, .route-card, .admin-card, .summary-tile { overflow-wrap: break-word; word-break: normal; }
  .admin-card strong { display: block; overflow: hidden; }
  .diag-row { line-height: 1.45; }
  .diag-row b { white-space: nowrap; }
  .textarea-label textarea { overflow: auto; text-overflow: clip; }
  .flag-strip label:hover { border-color: rgba(34,224,187,.32); background: rgba(34,224,187,.07); }
  .flag-strip label:has(input:checked) { border-color: rgba(34,224,187,.58); background: rgba(34,224,187,.14); box-shadow: inset 0 0 0 1px rgba(34,224,187,.08); }

  @media (max-height: 900px) and (min-width: 941px) {
    .backend-grid div { padding: 9px; }
    .insight-card { display: none; }
    .rail-footer { padding-top: 6px; }
  }

  @media (max-width: 1180px) and (min-width: 941px) {
    .command-hero { flex-direction: column; }
  }

  @media print {
    .rail, .command-hero, .tab-shell, .hero-actions, .btn, .modal-overlay, .ambient { display: none !important; }
    p, .route-meta, .chip, .summary-tile span { color: #333; }
  }
.quote-command{display:flex;flex-direction:column;}
.quote-kpi-grid{display:grid;margin-top:18px;min-width:0;}
.quote-kpi{padding:16px;}
.quote-kpi span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:900;overflow:hidden;text-overflow:ellipsis;}
.quote-kpi strong{display:block;margin-top:8px;font-size:clamp(24px,3vw,38px);overflow:hidden;}
.quote-kpi em{display:block;margin-top:8px;font-style:normal;color:var(--soft);font-size:12px;}
.mini-head{justify-content:space-between;}
.mini-head h3{min-width:0;}
.mini-table{display:flex;flex-direction:column;gap:8px;}
.mini-row{display:grid;grid-template-columns:1.25fr .8fr .8fr .8fr 1.4fr;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--surface-card);border:1px solid rgba(255,255,255,.07);}
.mini-row-head{background:rgba(20,184,166,.12);border-color:rgba(20,184,166,.22);}
.mini-row span,.mini-row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
.mini-row b{color:var(--soft);text-transform:uppercase;letter-spacing:.08em;font-size:10px;}
.muted{margin:0;}
@media (max-width:1180px){.mini-row{grid-template-columns:1.2fr .8fr .8fr .8fr 1.2fr;}}
@media (max-width:720px){.mini-row{grid-template-columns:1fr 1fr;}.mini-row span:nth-child(n+3),.mini-row b:nth-child(n+3){display:none;}.quote-intel-hero .surface-head{flex-direction:column;}.quote-intel-hero .hero-actions{width:100%;justify-content:stretch;}.quote-intel-hero .hero-actions .btn{flex:1;}}
  .qa-command { display: grid; }
  .qa-kpi-grid { display: grid; }
  .qa-kpi { padding: 16px; }
  .qa-kpi span { display: block; color: var(--muted); font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; }
  .qa-kpi strong { display: block; margin-top: 7px; font-size: clamp(20px, 2vw, 30px); }
  .qa-kpi em { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; font-style: normal; overflow-wrap: anywhere; }
  .qa-grid .qa-card:first-child { grid-row: span 2; }
  .qa-list { display: grid; max-height: 680px; overflow: auto; padding-right: 2px; }
  .qa-issue { border: 1px solid rgba(255,255,255,.11); padding: 14px; overflow: hidden; }
  .qa-issue div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
  .qa-issue span { border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.08); color: var(--muted); }
  .qa-issue strong { min-width: 0; }
  .qa-issue p { margin: 8px 0 0; font-size: 13px; }
  .qa-issue em { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; font-style: normal; }
  .qa-issue.severity-critical { border-color: rgba(255,115,120,.42); background: rgba(255,115,120,.10); }
  .qa-issue.severity-critical span { background: rgba(255,115,120,.20); color: #ffd9db; }
  .qa-issue.severity-high { border-color: rgba(244,199,107,.42); background: rgba(244,199,107,.095); }
  .qa-issue.severity-high span { background: rgba(244,199,107,.18); color: #ffeac0; }
  .qa-issue.severity-medium span { color: #dffbf4; background: rgba(34,224,187,.12); }
  .qa-actions { margin-top: 14px; }
  .qa-trigger-box { display: grid; gap: 10px; }
  .qa-trigger-state { border: 1px solid rgba(255,255,255,.10); border-radius: 17px; padding: 14px; background: var(--surface-card); display: flex; justify-content: space-between; gap: 12px; align-items: center; min-width: 0; }
  .qa-trigger-state span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
  .qa-trigger-state strong { color: var(--text); overflow-wrap: anywhere; text-align: right; }
  .qa-breakdown { display: grid; gap: 10px; }
  .qa-breakdown div { border: 1px solid rgba(255,255,255,.10); border-radius: 17px; padding: 14px; background: var(--surface-card); display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; }
  .qa-breakdown span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
  .qa-breakdown strong { color: var(--accent2); font-size: 22px; }
  .small-note { margin-top: 14px; font-size: 12px; }

  @media (max-width: 1100px) {
    .qa-grid .qa-card:first-child { grid-row: auto; }
  }
  .ops-command { display: grid; }
  .ops-generate-grid { display: grid; gap: 12px; margin-top: 16px; }
  .ops-kpi-grid { display: grid; }
  .ops-kpi { padding: 18px; }
  .ops-kpi span { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 900; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  .ops-kpi strong { display: block; margin-top: 10px; font-size: clamp(25px, 3vw, 40px); }
  .ops-kpi em { display: block; margin-top: 8px; color: var(--muted); font-style: normal; font-weight: 700; font-size: 12px; }
  .ops-wide { grid-row: span 2; }
  .ops-list { display: grid; }
  .ops-item { border: 1px solid rgba(255,255,255,.1); padding: 14px; min-width: 0; overflow: hidden; }
  .ops-item-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; min-width: 0; }
  .ops-item-head strong { color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
  .ops-item-head span { flex: 0 0 auto; color: var(--accent-2); font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
  .ops-item p, .ops-item pre { margin: 9px 0 0; color: var(--muted); line-height: 1.45; max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
  .ops-item pre { max-height: 190px; overflow: auto; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.22); color: #d9f7ff; }
  .ops-actions { flex-wrap: wrap; margin-top: 12px; }
  .ops-summary { min-width: 0; }
  .ops-summary article { border: 1px solid rgba(34,224,187,.22); border-radius: 18px; padding: 14px; background: rgba(34,224,187,.06); }
  .ops-summary pre { color: #e8f5ff; line-height: 1.48; max-height: 360px; overflow: auto; }

  @media (max-width: 1180px) {
    .ops-wide { grid-row: auto; }
  }
  @media (max-width: 760px) {
    .ops-item-head { display: grid; }
  }

/* Layout: create real breathing room between fixed rail and workspace */

/* Rail: stop inner content clipping at the bottom while still keeping the rail compact */
.rail-inner{
  padding-bottom: 22px !important;
  scrollbar-gutter: stable !important;
}
.rail-card{margin-bottom: 0 !important;}
.backend-grid{grid-template-columns: repeat(2,minmax(0,1fr)) !important;}
.backend-grid div{min-height: 74px !important;}
.backend-grid strong{font-size: clamp(18px, 1.7vw, 28px) !important;}

/* General card hardening */
.surface,
.quote-intel-hero,
.qa-hero,
.ops-hero,
.quote-panel,
.qa-card,
.ops-card,
.ops-manual-task,
.intelligence-card{
  min-width: 0 !important;
  overflow: visible !important;
}
.surface{
  padding: clamp(20px,1.7vw,28px) !important;
}
.command-hero{
  margin-left: 0 !important;
}
.surface-head > div:first-child{
  max-width: min(880px, 100%) !important;
}
.surface-head h2,
.surface-head p,
.eyebrow,
.mini-head h3,
.mini-head span{
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Prevent headings from being crushed side-by-side inside small cards */
.mini-head{
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  min-width: 0 !important;
}
.mini-head h3{
  margin: 0 !important;
  font-size: clamp(17px, 1.25vw, 22px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.mini-head .eyebrow,
.mini-head span{
  white-space: normal !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
}

/* Quote intelligence layout */
.quote-command,
.qa-command,
.ops-command{
  width: 100% !important;
  gap: clamp(16px, 1.8vw, 24px) !important;
}
.quote-kpi-grid,
.qa-kpi-grid,
.ops-kpi-grid{
  align-items: stretch !important;
}
.quote-kpi,
.qa-kpi,
.ops-kpi{
  min-height: 118px !important;
}
.quote-kpi em,
.qa-kpi em,
.ops-kpi em{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.intelligence-card{
  min-height: 190px !important;
  display: flex !important;
  flex-direction: column !important;
}
.mini-table{
  width: 100% !important;
  padding-bottom: 2px !important;
}
.mini-table .muted,
.ops-list .muted,
.qa-list .muted{
  margin: 0 !important;
  color: var(--muted) !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* QA / Ops grids: no clipped right cards */
.qa-card,
.ops-card{
  min-height: 158px !important;
}
.ops-wide{
  min-height: 210px !important;
}

/* Forms and long text protection */
.warning-box{
  overflow: visible !important;
  white-space: normal !important;
}
.warning-box ul{
  margin-bottom: 0 !important;
}

/* Screens around 1400-1700px at 100-125% Windows scaling */
@media (max-width: 1560px) and (min-width: 941px){
  :root{ --rail: clamp(248px, 19vw, 300px) !important; }
  .surface{ padding: 22px !important; }
  .hero-actions{ flex: 0 0 auto !important; }
  .hero-actions .btn{ width: 100% !important; }
}

@media (max-width: 1220px) and (min-width: 941px){
  .hero-actions .btn{ width: auto !important; }
}

@media (max-width: 940px){
  .hero-actions{ justify-content: flex-start !important; }
}

@media (max-height: 850px) and (min-width: 941px){
  .backend-grid div{ min-height: 62px !important; }
  .rail-footer{ display:none !important; }
}
.reality-command {
  display: grid;
  gap: 22px;
}
.reality-hero {
  position: relative;
}
.reality-input-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  min-width: 0;
}
.reality-input-grid label,
.reality-input-grid .span-all {
  min-width: 0;
}
.reality-input-grid .span-all {
  grid-column: 1 / -1;
}
.reality-kpi-grid {
  display: grid;
  min-width: 0;
}
.reality-kpi {
  min-height: 124px;
  padding: 24px;
  display: grid;
  align-content: center;
  gap: 8px;
}
.reality-kpi span {
  color: var(--text-secondary, #9fb0c5);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 900;
}
.reality-kpi strong {
  font-size: clamp(24px, 2.6vw, 38px);
  min-width: 0;
}
.reality-kpi em {
  color: #dce8f5;
  font-style: normal;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.reality-grid {
  min-width: 0;
}
.reality-card,
.reality-wide {
  min-width: 0;
  overflow: hidden;
}
.value-band-list {
  display: grid;
  gap: 14px;
}
.value-band-card {
  border: 1px solid rgba(160, 174, 192, .20);
  background: rgba(9, 17, 30, .48);
  border-radius: 22px;
  padding: 18px;
  overflow: hidden;
}
.band-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-width: 0;
}
.band-head strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.band-head span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(105, 255, 218, .10);
  color: #69ffda;
  border: 1px solid rgba(105, 255, 218, .22);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.band-value {
  color: var(--text);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  margin-bottom: 12px;
}
.value-band-card p {
  color: #b8c6d8;
  margin: 0 0 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.reality-status,
.reality-gap,
.reality-summary {
  min-width: 0;
  overflow: hidden;
}
.gap-status {
  border-radius: 22px;
  padding: 16px;
  font-weight: 950;
  font-size: 22px;
  margin-bottom: 14px;
  color: var(--base-bg);
  text-align: center;
  overflow-wrap: anywhere;
}
.gap-status.good { background: linear-gradient(135deg, #69ffda, #35c2ff); }
.gap-status.warn { background: linear-gradient(135deg, #ffe08a, #ffb84d); }
.gap-status.danger { background: linear-gradient(135deg, #ff9f9f, #ff6b6b); }
.gap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(160, 174, 192, .16);
}
.gap-row span {
  color: #9fb0c5;
  font-weight: 800;
}
.gap-row strong {
  color: var(--text);
  font-size: 20px;
  overflow-wrap: anywhere;
}
.reality-summary pre {
  margin: 0;
  color: #dce8f5;
  line-height: 1.5;
  font: inherit;
  max-width: 100%;
}
:root {
  --accent-2: var(--accent2);
  --soft: #c9d8e8;
}
body {
  overflow-wrap: break-word;
}
#app,
.app-frame,
.workspace,
.view,
.control-grid,
.result-stage,
.quote-command,
.qa-command,
.ops-command,
.reality-command,
.admin-panel,
.surface,
.command-hero,
.modal,
.rail,
.rail-inner {
  min-width: 0 !important;
  max-width: 100% !important;
}
.app-frame {
  column-gap: clamp(14px, 1.5vw, 28px) !important;
}
.workspace {
  padding-left: 0 !important;
  padding-right: clamp(14px, 2vw, 34px) !important;
}
.rail-inner {
  scrollbar-gutter: stable;
}
.brand-text,
.nav-item strong,
.nav-item em,
.backend-grid strong,
.rail-card,
.surface-head,
.hero-copy,
.block-title,
.head-meter,
.route-card,
.route-title,
.quote-kpi,
.qa-kpi,
.ops-kpi,
.reality-kpi,
.admin-card,
.value-band-card,
.gap-row,
.diag-row,
.warning-box,
.notice,
pre,
p {
  min-width: 0 !important;
  max-width: 100% !important;
}
.command-hero .hero-copy {
  max-width: 940px !important;
}
.command-hero > .hero-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 360px !important;
  justify-self: end !important;
}
.command-hero > .hero-actions .btn {
  width: 100% !important;
}
.surface-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}
.surface-head > div:first-child {
  min-width: 0 !important;
}
.surface-head .hero-actions {
  flex: 0 1 auto !important;
  max-width: 100% !important;
}
.btn,
.icon-btn {
  min-width: 0 !important;
  max-width: 100% !important;
}
.field-grid,
.field-grid.two,
.field-grid.four,
.reality-input-grid,
.ops-generate-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}
label,
input,
select,
textarea {
  min-width: 0 !important;
  max-width: 100% !important;
}
label {
  overflow-wrap: normal !important;
  word-break: normal !important;
}
textarea,
pre,
.reality-summary pre,
.ops-summary pre,
.ops-item pre {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}
.route-top {
  grid-template-columns: 50px minmax(0, 1fr) max-content !important;
}
.score-pill {
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.quote-intel-grid,
.qa-grid,
.ops-grid,
.reality-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  align-items: start !important;
}
.reality-wide,
.ops-wide {
  grid-column: span 1 !important;
}
.mini-table,
.cards-list,
.qa-list,
.ops-list,
.value-band-list,
.diagnostic-box {
  min-width: 0 !important;
  max-width: 100% !important;
}
.mini-table {
  overflow-y: visible !important;
}
.mini-row {
  min-width: min(680px, 100%) !important;
}
.qa-list,
.ops-list {
  overflow-x: hidden !important;
}
.modal-overlay {
  padding: clamp(12px, 2vw, 22px) !important;
}
.modal {
  width: min(880px, calc(100vw - 24px)) !important;
}
@media (max-width: 1280px) {
  .control-grid,
  .qa-grid,
  .ops-grid,
  .reality-grid,
  .quote-intel-grid {
    grid-template-columns: 1fr !important;
  }
  .surface-head {
    flex-direction: column !important;
  }
  .surface-head .hero-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}
@media (max-width: 980px) {
  .command-hero > .hero-actions {
    max-width: none !important;
    justify-self: stretch !important;
  }
  .nav-item {
    justify-items: center !important;
    text-align: center !important;
  }
  .nav-item em {
    display: none !important;
  }
}
@media (max-width: 720px) {
  .route-top {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }
  .score-pill {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    width: max-content !important;
  }
  .tab {
    flex: 1 1 130px !important;
  }
  .gap-row,
  .band-head,
  .qa-trigger-state,
  .qa-breakdown div {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
}
@media (max-height: 850px) and (min-width: 981px) {
  .rail-footer { display: none !important; }
}
.hpi-assist-panel {
  margin-top: 18px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 22px;
  padding: 18px;
  display: grid;
  gap: 14px;
}
.hpi-assist-panel h3 { margin: 4px 0 6px; }
.hpi-assist-panel p { margin: 0; color: var(--muted); line-height: 1.45; }
.hpi-assist-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hpi-intake-status {
  padding: 14px;
}
.hpi-status-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.hpi-status-head span {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  padding: 6px 10px;
}
.hpi-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.hpi-status-grid div {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 10px;
  background: rgba(2, 6, 23, 0.22);
}
.hpi-status-grid span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hpi-status-grid b {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}
.hpi-warning-list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--text);
}
.hpi-filled {
  outline: 2px solid rgba(45, 212, 191, 0.36) !important;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.08) !important;
}
@media (max-width: 760px) {
  .hpi-status-grid { grid-template-columns: 1fr 1fr; }
  .hpi-status-head { flex-direction: column; align-items: flex-start; }
}
.case-control-panel { padding: 24px; }
.case-control-panel p { color: var(--muted); line-height: 1.45; }
.case-control-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.status-pill.good { color: #dfffe5; border-color: rgba(34,197,94,.38); background: rgba(34,197,94,.11); }
.status-pill.warn { color: #ffeac0; border-color: rgba(244,199,107,.42); background: rgba(244,199,107,.12); }
.status-pill.bad { color: #ffd9db; border-color: rgba(255,115,120,.45); background: rgba(255,115,120,.13); }
.case-control-status { padding: 14px; }
.case-control-status.empty { border-style: dashed; }
.case-status-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; }
.case-status-head span { font-size: 12px; color: var(--muted); border: 1px solid rgba(148,163,184,.24); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.case-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.case-status-grid div { border: 1px solid rgba(148,163,184,.17); border-radius: 14px; padding: 10px; background: rgba(2,6,23,.23); min-width: 0; }
.case-status-grid span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.case-status-grid b { display: block; margin-top: 4px; font-size: 13px; overflow-wrap: anywhere; }
.case-next { margin: 0 0 10px; color: var(--text) !important; }
.case-profile, .case-small { margin: 7px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.case-warning-list { margin: 12px 0 0; padding-left: 18px; color: var(--text); }
@media (max-width: 760px) {
  .case-control-panel { padding: 18px; }
  .case-status-grid { grid-template-columns: 1fr; }
  .case-status-head { flex-direction: column; align-items: flex-start; }
}
.route-intelligence-panel { padding: 20px 22px; border-radius: 22px; border: 1px solid rgba(148,163,184,.18); background: rgba(2,6,23,.25); }
.route-intelligence-panel.good { border-color: rgba(34,197,94,.36); background: rgba(20,83,45,.13); }
.route-intelligence-panel.warn { border-color: rgba(244,199,107,.38); background: rgba(113,63,18,.14); }
.route-intelligence-panel.bad { border-color: rgba(248,113,113,.42); background: rgba(127,29,29,.15); }
.ri-head { display: flex; justify-content: space-between; align-items: flex-start; }
.ri-head h3 { margin: 3px 0 6px; font-size: 22px; }
.ri-head p { margin: 0; color: var(--muted); line-height: 1.48; }
.ri-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ri-grid div { border: 1px solid rgba(148,163,184,.18); border-radius: 16px; padding: 12px; background: rgba(2,6,23,.22); min-width: 0; }
.ri-grid span { display: block; color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ri-grid b { display: block; margin-top: 5px; font-size: 14px; overflow-wrap: anywhere; }
.ri-grid em { display: block; margin-top: 4px; color: var(--text); font-style: normal; font-size: 12px; overflow-wrap: anywhere; }
.ri-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ri-detail-grid p { margin: 0; color: var(--ck-text-primary); border: 1px solid var(--ck-border-subtle); border-radius: 14px; padding: 10px; background: var(--ck-surface-2); overflow-wrap: anywhere; }
.chip.intel { color: #ccfbf1; border-color: rgba(45,212,191,.36); background: rgba(20,184,166,.12); }
@media (max-width: 980px) { .ri-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ri-head { flex-direction: column; } .ri-grid, .ri-detail-grid { grid-template-columns: 1fr; } }
.route-override-panel,
.seller-script-card {
  padding: 20px 22px;
  border-radius: 22px;
  border: 1px solid rgba(45,212,191,.22);
  background: linear-gradient(135deg, rgba(20,184,166,.09), rgba(37,99,235,.08));
}
.route-override-panel .ops-actions,
.seller-script-card .ops-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.seller-script-status {
  display: grid;
  gap: 12px;
}
.seller-script-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.seller-script-grid div {
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 12px;
  background: rgba(2,6,23,.22);
  min-width: 0;
}
.seller-script-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.seller-script-grid b {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.seller-script-block {
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 18px;
  padding: 14px;
  background: rgba(2,6,23,.20);
}
.seller-script-block h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.seller-script-block p,
.seller-script-block pre,
.seller-script-block li {
  color: #dcebf8;
  line-height: 1.55;
}
.seller-script-block p { margin: 0; }
.seller-script-block pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font);
  font-size: 14px;
}
.seller-script-block ul { margin: 0; padding-left: 18px; }
.seller-warning { margin-top: 0; }
@media (max-width: 980px) {
  .seller-script-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .seller-script-grid { grid-template-columns: 1fr; }
}

  .brand-text strong,
  .brand-text span,
  .nav-item strong,
  .nav-item em,
  h1,
  h2,
  h3,
  p,
  label,
  .btn,
  .chip,
  .badge,
  .route-meta,
  .route-reason {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .surface,
  .command-hero,
  .route-card,
  .summary-tile,
  .admin-card,
  .phase10-admin-card,
  .guide-card {
    overflow: hidden;
  }

  @media (orientation: landscape) and (min-width: 700px) and (max-height: 820px) {
    html,
    body {
      height: 100%;
      overflow: hidden !important;
    }

    .app-frame {
      height: 100dvh !important;
    }

    .brand-lockup {
      justify-content: center !important;
    }

    .brand-orb span {
      font-size: 13px !important;
    }

    .brand-text,
    .rail-card,
    .rail-footer {
      display: none !important;
    }

    .nav-item {
      justify-items: center !important;
      text-align: center !important;
    }

    .nav-item em {
      display: none !important;
    }

    .workspace {
      height: 100dvh !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    .command-hero,
    .reality-hero,
    .quote-intel-hero,
    .qa-hero,
    .ops-hero {
      min-height: 0 !important;
      margin-bottom: 8px !important;
      display: grid !important;
      gap: 10px !important;
      align-items: center !important;
    }

    .command-hero h1,
    .reality-hero h2,
    .quote-intel-hero h2,
    .qa-hero h2,
    .ops-hero h2 {
      line-height: 1 !important;
      margin-bottom: 4px !important;
    }

    .command-hero p,
    .reality-hero p,
    .quote-intel-hero p,
    .qa-hero p,
    .ops-hero p {
      display: none !important;
    }

    .status-pill {
      min-height: 26px !important;
      padding: 4px 8px !important;
      font-size: 10px !important;
    }

    .hero-actions,
    .admin-actions,
    .ops-actions,
    .card-actions {
      max-width: none !important;
      justify-content: flex-end !important;
    }

    .intake-card,
    .logic-panel,
    .sample-panel,
    .quote-panel,
    .admin-panel,
    .guide-panel,
    .phase10-command {
      padding: 14px !important;
    }

    .side-stack {
      grid-template-columns: 1fr !important;
    }

    .route-top,
    .phase10-route-head {
      grid-template-columns: 44px minmax(0, 1fr) auto !important;
      gap: 10px !important;
    }

    .rank-badge {
      width: 44px !important;
      height: 44px !important;
      border-radius: 15px !important;
    }
  }

  @media (orientation: landscape) and (min-width: 700px) and (max-height: 470px) {

    .rail {
      padding-top: 4px !important;
      padding-bottom: 4px !important;
    }

    .rail-inner {
      padding-top: 4px !important;
      padding-bottom: 4px !important;
    }

    .brand-orb span {
      font-size: 11px !important;
    }

    .nav-item {
      padding-top: 3px !important;
      padding-bottom: 3px !important;
    }

    .status-pill:nth-child(n+3) {
      display: none !important;
    }

    .surface-head p,
    .route-reason,
    .guide-card p {
      display: -webkit-box !important;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden !important;
    }
  }
  body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3,
  .nav-item strong,
  .route-title strong {
    font-weight: 820 !important;
  }

  p,
  .route-meta,
  .route-reason,
  .guide-card p,
  .nav-item em {
    letter-spacing: 0 !important;
  }

  .btn-primary {
    box-shadow: 0 16px 34px rgba(34, 224, 187, 0.18) !important;
  }

  .btn-secondary,
  .btn {
    border-color: rgba(255, 255, 255, 0.13) !important;
  }

  @media (orientation: landscape) and (min-width: 700px) and (max-height: 820px) {

    .brand-lockup,
    .rail-card,
    .rail-footer {
      display: none !important;
    }

    .command-hero,
    .reality-hero,
    .quote-intel-hero,
    .qa-hero,
    .ops-hero {
      border-radius: 8px !important;
      grid-template-columns: minmax(0, 1fr) minmax(190px, auto) !important;
    }

    .command-hero h1,
    .reality-hero h2,
    .quote-intel-hero h2,
    .qa-hero h2,
    .ops-hero h2 {
      font-size: clamp(23px, 3.4vw, 31px) !important;
    }

    .btn,
    .hero-actions .btn {
      font-size: 12px !important;
    }

    .control-grid,
    .quote-intel-grid,
    .qa-grid,
    .ops-grid,
    .reality-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .summary-deck,
    .admin-grid,
    .quote-kpi-grid,
    .qa-kpi-grid,
    .ops-kpi-grid,
    .reality-kpi-grid,
    .guide-grid,
    .phase10-body {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 9px !important;
    }
  }

  @media (orientation: landscape) and (min-width: 700px) and (max-height: 470px) {

    .command-hero h1,
    .reality-hero h2,
    .quote-intel-hero h2,
    .qa-hero h2,
    .ops-hero h2 {
      font-size: 22px !important;
    }
  }
\3c /style>

\3c !-- Phase 9.4 Ops Tracker + Outcome Learning additions -->
\3c style>
  .ops-outcome-panel { display: grid; gap: 18px; overflow: hidden; }
  .outcome-kpi-grid { margin-top: 6px; }
  .outcome-grid { margin-top: 0; }
  .ops-outcome-panel .field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 760px) { .ops-outcome-panel .field-grid.two { grid-template-columns: 1fr; } }
\3c /style>

\3c !-- Phase 10 Command Centre visual upgrade -->
\3c style>
  :root {
    --ck10-red: #ff0037;
    --ck10-red-soft: rgba(255,0,55,.15);
    --ck10-ink: var(--text);
    --ck10-panel: rgba(7,13,23,.78);
    --ck10-border: rgba(255,255,255,.13);
  }

  .phase10-command {
    padding: 22px;
    overflow: hidden;
    position: relative;
    border-color: rgba(255,0,55,.28);
    background:
      linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.035)),
      radial-gradient(circle at 0% 0%, rgba(255,0,55,.16), transparent 34%),
      radial-gradient(circle at 92% 4%, rgba(34,224,187,.12), transparent 32%);
  }

  .phase10-command::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--ck10-red), var(--accent), transparent);
  }

  .phase10-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
  }

  .phase10-head h3 {
    margin: 5px 0 7px;
    font-size: clamp(22px, 2.2vw, 34px);
    letter-spacing: 0;
  }

  .phase10-head p {
    margin: 0;
    white-space: pre-line;
    color: #d8e9f4;
  }

  .phase10-best {
    border: 1px solid var(--line);
    padding: 16px;
  }

  .phase10-best span,
  .phase10-mini-label {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: 11px;
    font-weight: 950;
  }

  .phase10-best strong {
    display: block;
    margin-top: 8px;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .phase10-best em {
    display: block;
    margin-top: 8px;
    color: var(--accent2);
    font-style: normal;
    font-weight: 900;
  }

  .phase10-body {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 12px;
  }

  .phase10-panel {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 15px;
    background: rgba(2,6,23,.30);
    min-width: 0;
  }

  .phase10-grade-row,
  .phase10-queue {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }

  .phase10-grade {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    padding: 7px 10px;
    color: #eaf6ff;
    background: rgba(255,255,255,.07);
    font-size: 12px;
    font-weight: 950;
    overflow-wrap: anywhere;
  }

  .grade-a { color: #b9ffe0 !important; background: rgba(16,185,129,.16) !important; border-color: rgba(16,185,129,.35) !important; }
  .grade-b { color: #c9f7ff !important; background: rgba(34,211,238,.14) !important; border-color: rgba(34,211,238,.32) !important; }
  .grade-c { color: var(--text)1c2 !important; background: rgba(245,158,11,.15) !important; border-color: rgba(245,158,11,.35) !important; }
  .grade-prospect { color: #ffd5df !important; background: rgba(255,0,55,.13) !important; border-color: rgba(255,0,55,.32) !important; }
  .grade-d,
  .grade-blocked { color: #ffd6d8 !important; background: rgba(239,68,68,.16) !important; border-color: rgba(239,68,68,.35) !important; }

  .phase10-warning {
    margin-top: 12px;
    color: #ffe2b0;
    line-height: 1.45;
    font-size: 13px;
  }

  .phase10-queue-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 15px;
    padding: 12px;
    background: var(--surface-card);
  }

  .phase10-queue-item strong,
  .phase10-queue-item span {
    display: block;
    overflow-wrap: anywhere;
  }

  .phase10-queue-item span,
  .phase10-queue-item p {
    color: var(--muted);
    font-size: 12px;
  }

  .phase10-queue-item p {
    grid-column: 1 / -1;
    margin: 0;
  }

  .phase10-actions {
    margin: 12px 0 0;
    padding-left: 20px;
    color: #e4f3ff;
  }

  .phase10-actions li {
    margin-bottom: 8px;
    line-height: 1.42;
  }

  .phase10-journey {
    display: grid;
    gap: 9px;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 15px;
    background: rgba(2,6,23,.28);
  }

  .phase10-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    border: 1px solid var(--surface-card);
    border-radius: 14px;
    padding: 10px;
    background: rgba(255,255,255,.04);
  }

  .phase10-step-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: var(--text);
    font-weight: 950;
    background: linear-gradient(135deg, var(--ck10-red), #ff4667);
  }

  .phase10-step strong,
  .phase10-step p {
    display: block;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .phase10-step p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
  }

  .phase10-step em {
    justify-self: end;
    border-radius: 999px;
    padding: 6px 9px;
    font-style: normal;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
    color: #eaf6ff;
    background: rgba(255,255,255,.08);
  }

  .phase10-step em.good { color: #bbf7d0; background: rgba(16,185,129,.15); }
  .phase10-step em.warn { color: #fde68a; background: rgba(245,158,11,.16); }

  .phase10-admin-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
  }

  .phase10-admin-card {
    min-width: 0;
    border: 1px solid var(--line);
    padding: 14px;
  }

  .phase10-admin-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .phase10-admin-card strong {
    display: block;
    margin-top: 8px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .phase10-admin-card em,
  .phase10-admin-note {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
    line-height: 1.35;
  }

  .phase10-admin-note {
    grid-column: 1 / -1;
    border-left: 3px solid var(--ck10-red);
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,0,55,.09);
    color: #ffdce4;
  }

  .phase10-chip {
    border-color: rgba(255,0,55,.24);
    background: rgba(255,0,55,.10);
    color: #ffdce4;
  }

  .phase10-card-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 13px;
  }

  .phase10-card-detail div {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    padding: 13px;
    background: rgba(2,6,23,.24);
  }

  .phase10-card-detail b {
    display: block;
    color: var(--accent2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
  }

  .phase10-card-detail ul {
    margin: 0;
    padding-left: 18px;
    color: #dbeafa;
  }

  .phase10-card-detail li {
    margin-bottom: 6px;
    line-height: 1.4;
  }

  .route-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,0,55,.30);
    background:
      linear-gradient(180deg, rgba(255,255,255,.082), rgba(255,255,255,.038)),
      radial-gradient(circle at 100% 0%, rgba(255,0,55,.08), transparent 32%);
  }

  @media (max-width: 1120px) {
    .phase10-head,
    .phase10-body,
    .phase10-admin-box,
    .phase10-card-detail {
      grid-template-columns: 1fr;
    }
    .phase10-step {
      grid-template-columns: 34px minmax(0, 1fr);
    }
    .phase10-step em {
      grid-column: 2;
      justify-self: start;
    }
  }

  @media (orientation: landscape) and (max-height: 760px) and (max-width: 1180px) {
    .phase10-command {
      padding: 16px;
    }
    .phase10-body {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .guide-panel {
    position: relative;
  }

  .guide-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--ck10-red, #ff0037), transparent);
  }

  .guide-grid {
    display: grid;
  }

  .guide-card {
    gap: 10px;
    padding: 14px;
  }

  .guide-card b {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    color: var(--base-bg);
    background: linear-gradient(135deg, var(--accent), #18a5ff);
    font-weight: 1000;
  }

  .guide-card strong,
  .guide-card p {
    display: block;
    margin: 0;
  }

  .guide-card strong {
    color: var(--text);
    font-size: 15px;
  }

  .guide-card p {
    margin-top: 5px;
  }

  .guide-note {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    border: 1px solid rgba(34,224,187,.20);
    border-radius: 18px;
    padding: 14px;
    background: rgba(34,224,187,.08);
    color: #dffbf4;
  }

  .guide-note span {
    color: var(--muted);
    line-height: 1.45;
  }
  @media (orientation: landscape) and (max-height: 740px) and (max-width: 1180px) {
    html,
    body {
      height: 100%;
      overflow: hidden;
    }
    .app-frame {
      height: 100dvh !important;
    }
    .brand-lockup {
      justify-content: center !important;
    }
    .brand-orb span {
      font-size: 13px !important;
    }
    .brand-text,
    .rail-card,
    .rail-footer {
      display: none !important;
    }
    .nav-item {
      justify-items: center !important;
      text-align: center !important;
    }
    .nav-item em {
      display: none !important;
    }
    .workspace {
      height: 100dvh !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    .command-hero,
    .reality-hero,
    .quote-intel-hero,
    .qa-hero,
    .ops-hero {
      min-height: 0 !important;
      margin-bottom: 8px !important;
      border-radius: 18px !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 10px !important;
      align-items: center !important;
    }
    .command-hero h1,
    .reality-hero h2,
    .quote-intel-hero h2,
    .qa-hero h2,
    .ops-hero h2 {
      font-size: 24px !important;
      line-height: 1 !important;
      margin-bottom: 4px !important;
    }
    .command-hero p,
    .reality-hero p,
    .quote-intel-hero p,
    .qa-hero p,
    .ops-hero p {
      display: none !important;
    }
    .status-pill {
      min-height: 26px !important;
      padding: 4px 8px !important;
      font-size: 10px !important;
    }
    .hero-actions {
      justify-content: flex-end !important;
    }
    .hero-actions .btn,
    .btn {
      font-size: 12px !important;
    }
    .intake-card,
    .logic-panel,
    .sample-panel,
    .quote-panel,
    .admin-panel,
    .guide-panel,
    .phase10-command {
      padding: 14px !important;
    }
    .summary-deck,
    .admin-grid,
    .quote-kpi-grid,
    .qa-kpi-grid,
    .ops-kpi-grid,
    .reality-kpi-grid,
    .guide-grid,
    .phase10-body {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 9px !important;
    }
    h3,
    .guide-card strong {
      font-size: 14px !important;
    }
  }
  @media (orientation: portrait) and (max-width: 780px) {

    .rail {
      z-index: 12 !important;
      backdrop-filter: blur(16px) !important;
    }

    .rail-inner {
      min-height: 0 !important;
    }

    .brand-orb span {
      font-size: 15px !important;
    }

    .brand-text strong {
      font-size: 16px !important;
      line-height: 1.05 !important;
    }

    .brand-text span {
      line-height: 1.15 !important;
    }

    .command-hero,
    .reality-hero,
    .quote-intel-hero,
    .qa-hero,
    .ops-hero,
    .surface,
    .route-card,
    .summary-tile,
    .admin-card,
    .phase10-admin-card,
    .guide-card {
      border-radius: 20px !important;
    }

    .command-hero,
    .reality-hero,
    .quote-intel-hero,
    .qa-hero,
    .ops-hero {
      display: block !important;
      min-height: 0 !important;
      margin-bottom: 10px !important;
    }

    .status-pill {
      min-height: 28px !important;
      padding: 5px 8px !important;
      font-size: 10px !important;
      line-height: 1.1 !important;
    }

    .hero-actions,
    .admin-actions,
    .ops-actions,
    .modal-actions,
    .card-actions {
      display: grid !important;
      grid-template-columns: 1fr !important;
      width: 100% !important;
      gap: 8px !important;
      justify-content: stretch !important;
    }

    .btn,
    .hero-actions .btn,
    .admin-actions .btn {
      width: 100% !important;
    }

    .control-grid,
    .side-stack,
    .quote-intel-grid,
    .qa-grid,
    .ops-grid,
    .reality-grid,
    .phase10-body,
    .phase10-command,
    .guide-grid,
    .field-grid.two,
    .field-grid.four,
    .summary-deck,
    .admin-grid,
    .quote-kpi-grid,
    .qa-kpi-grid,
    .ops-kpi-grid,
    .reality-kpi-grid,
    .seller-script-grid,
    .case-status-grid,
    .ri-grid,
    .ri-detail-grid {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    .surface-head,
    .result-top,
    .mini-head,
    .ri-head {
      display: grid !important;
      align-items: start !important;
    }

    .form-block {
      padding: 18px 0 !important;
    }

    .block-title > span {
      width: 34px !important;
      height: 34px !important;
      border-radius: 12px !important;
    }

    .flag-strip {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }

    .flag-strip label {
      min-height: 46px !important;
      border-radius: 14px !important;
      padding: 10px 12px !important;
    }

    .tab {
      font-size: 12px !important;
    }

    .route-top,
    .phase10-route-head {
      grid-template-columns: 40px minmax(0, 1fr) !important;
      gap: 10px !important;
    }

    .rank-badge {
      width: 40px !important;
      height: 40px !important;
      border-radius: 14px !important;
    }

    .score-pill,
    .phase10-route-head .score-pill {
      grid-column: 1 / -1 !important;
      justify-self: start !important;
      white-space: normal !important;
    }

    .chip-row {
      gap: 6px !important;
    }

    .chip,
    .badge {
      line-height: 1.15 !important;
    }

    .empty-results {
      min-height: 220px !important;
      padding: 24px !important;
    }

    .modal-overlay {
      padding: 10px !important;
    }

    .modal {
      max-height: 92dvh !important;
      padding: 16px !important;
    }
  }
  :root {
    --bf-bg: var(--base-bg);
    --bf-bg-soft: var(--base-bg);
    --bf-surface: rgba(255, 255, 255, .073);
    --bf-surface-strong: rgba(255, 255, 255, .096);
    --bf-accent: #21dfba;
    --bf-radius: 8px;
  }

  body {
    background-size: 44px 44px, 44px 44px, auto !important;
  }

  .brand-text span,
  .rail-footer,
  .insight-card p,
  p {
    color: var(--bf-muted) !important;
  }

  .nav-item {
    column-gap: 9px !important;
  }

  .nav-item em {
    line-height: 1.2 !important;
  }

  .rail-card,
  .surface,
  .route-card,
  .summary-tile,
  .admin-card,
  .phase10-admin-card,
  .guide-card,
  .notice,
  .modal,
  .head-meter,
  .warning-box,
  .tab-shell,
  .backend-grid div,
  .sample-btn,
  .logic-list div,
  .qa-kpi,
  .ops-kpi,
  .ops-item,
  .qa-issue,
  .phase10-best {
    border-radius: var(--bf-radius) !important;
    border-color: var(--bf-line) !important;
    background: var(--bf-surface) !important;
    box-shadow: none !important;
  }

  .command-hero h1,
  h1 {
    margin-bottom: 10px !important;
  }

  h3 {
    font-size: 15px !important;
  }

  .command-hero p,
  p,
  .route-reason,
  .route-meta,
  .guide-card p {
    font-size: 13px !important;
    line-height: 1.46 !important;
  }

  .status-pill,
  .badge,
  .chip {
    white-space: normal !important;
    word-break: normal !important;
  }

  .btn,
  .hero-actions .btn,
  .admin-actions .btn {
    min-height: 43px !important;
    border-radius: var(--bf-radius) !important;
    padding: 10px 14px !important;
  }

  .side-stack,
  .qa-command,
  .ops-command,
  .result-stage,
  .cards-list {
    gap: 14px !important;
  }

  .intake-card,
  .logic-panel,
  .sample-panel,
  .quote-panel,
  .admin-panel,
  .guide-panel,
  .qa-hero,
  .qa-card,
  .ops-hero,
  .ops-card,
  .ops-manual-task,
  .ops-outcome-panel,
  .intelligence-card,
  .reality-card,
  .reality-hero,
  .quote-intel-hero {
    padding: 20px !important;
  }

  .surface-head,
  .result-top,
  .mini-head,
  .ri-head {
    gap: 14px !important;
    margin-bottom: 15px !important;
  }

  .field-grid,
  .logic-list,
  .sample-list,
  .diagnostic-box,
  .qa-list,
  .ops-list {
    gap: 10px !important;
  }

  .field-grid.two,
  .reality-input-grid,
  .ops-generate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  label {
    font-size: 10px !important;
    line-height: 1.22 !important;
  }

  input,
  select,
  textarea {
    padding: 11px 12px !important;
  }

  .quote-intel-grid,
  .qa-grid,
  .ops-grid,
  .reality-grid,
  .guide-grid {
    gap: 14px !important;
  }

  .route-card {
    padding: 16px !important;
  }

  .tab-shell {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 5px !important;
    gap: 5px !important;
  }

  .tab {
    width: 100% !important;
    border-radius: 6px !important;
    padding: 10px 8px !important;
  }

  @media (max-width: 1180px) {

    .control-grid,
    .quote-intel-grid,
    .qa-grid,
    .ops-grid,
    .reality-grid,
    .guide-grid {
      grid-template-columns: 1fr !important;
    }
  }

  @media (orientation: landscape) and (max-height: 620px) {

    .brand-lockup {
      justify-content: center !important;
    }

    .brand-text,
    .rail-card,
    .rail-footer {
      display: none !important;
    }

    .nav-item {
      text-align: center !important;
    }

    .command-hero h1,
    h1 {
      margin-bottom: 5px !important;
    }

    h3 {
      font-size: 13px !important;
    }

    .btn,
    .hero-actions .btn,
    .admin-actions .btn {
      min-height: 36px !important;
      padding: 8px 9px !important;
      font-size: 11px !important;
    }

    .intake-card,
    .logic-panel,
    .sample-panel,
    .quote-panel,
    .admin-panel,
    .guide-panel,
    .qa-hero,
    .qa-card,
    .ops-hero,
    .ops-card,
    .ops-manual-task,
    .ops-outcome-panel,
    .intelligence-card,
    .reality-card,
    .reality-hero,
    .quote-intel-hero,
    .route-card,
    .summary-tile {
      padding: 11px !important;
    }

    .surface-head,
    .result-top,
    .mini-head,
    .ri-head {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 7px !important;
      margin-bottom: 8px !important;
    }

    .form-block {
      padding: 12px 0 !important;
    }

    .block-title {
      grid-template-columns: 28px minmax(0, 1fr) !important;
      gap: 8px !important;
      margin-bottom: 9px !important;
    }

    .block-title > span,
    .rank-badge {
      width: 28px !important;
      height: 28px !important;
      border-radius: 6px !important;
    }

    label {
      font-size: 9px !important;
    }

    .flag-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 6px !important;
    }

    .flag-strip label {
      min-height: 34px !important;
      padding: 7px 8px !important;
      font-size: 11px !important;
    }

    .summary-tile strong,
    .ops-kpi strong,
    .qa-kpi strong {
      font-size: 18px !important;
    }

    .tab-shell {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tab {
      padding: 8px 6px !important;
      font-size: 10px !important;
    }

    .empty-results {
      min-height: 180px !important;
      padding: 18px !important;
    }
  }

  @media (max-width: 760px) and (orientation: portrait) {

    .rail {
      z-index: 12 !important;
    }

    .command-hero p,
    p {
      font-size: 13px !important;
    }

    .hero-actions,
    .admin-actions,
    .ops-actions,
    .qa-actions,
    .card-actions {
      margin-top: 10px !important;
    }

    .control-grid,
    .side-stack,
    .quote-intel-grid,
    .qa-grid,
    .ops-grid,
    .reality-grid,
    .phase10-body,
    .phase10-command,
    .guide-grid,
    .field-grid.two,
    .field-grid.four,
    .reality-input-grid,
    .ops-generate-grid,
    .summary-deck,
    .admin-grid,
    .quote-kpi-grid,
    .qa-kpi-grid,
    .ops-kpi-grid,
    .reality-kpi-grid,
    .seller-script-grid,
    .case-status-grid,
    .ri-grid,
    .ri-detail-grid {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    .intake-card,
    .logic-panel,
    .sample-panel,
    .quote-panel,
    .admin-panel,
    .guide-panel,
    .qa-hero,
    .qa-card,
    .ops-hero,
    .ops-card,
    .ops-manual-task,
    .ops-outcome-panel,
    .intelligence-card,
    .reality-card,
    .reality-hero,
    .quote-intel-hero,
    .surface,
    .route-card {
      padding: 15px !important;
    }

    .tab-shell {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  .brand-lockup {
    position: relative !important;
  }

  .brand-lockup::after {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(33, 223, 186, .65), rgba(42, 102, 223, .34), transparent) !important;
  }

  .brand-orb {
    isolation: isolate !important;
  }

  .brand-orb span {
    letter-spacing: 0 !important;
    color: var(--base-bg) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .38) !important;
  }

  .brand-text strong {
    font-weight: 950 !important;
  }

  .nav-item,
  .btn,
  .tab,
  .surface,
  .route-card,
  .summary-tile,
  .admin-card,
  .phase10-admin-card,
  .guide-card,
  .qa-kpi,
  .ops-kpi,
  .ops-item,
  .qa-issue {
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
  }

  .nav-item {
    position: relative !important;
  }

  .nav-item::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 10px 6px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--bf-accent), #2aa6df) !important;
    opacity: 0 !important;
    transform: scaleX(.45) !important;
    transition: opacity .2s ease, transform .2s ease !important;
  }

  .nav-item.active::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }

  .surface,
  .route-card,
  .summary-tile,
  .admin-card,
  .phase10-admin-card,
  .guide-card,
  .qa-kpi,
  .ops-kpi {
    position: relative !important;
  }

  .surface::before,
  .route-card::before,
  .summary-tile::before,
  .guide-card::before,
  .qa-kpi::before,
  .ops-kpi::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto !important;
    height: 3px !important;
    background: linear-gradient(90deg, rgba(33, 223, 186, .88), rgba(42, 102, 223, .55), rgba(255, 23, 72, .42)) !important;
    border-radius: var(--bf-radius) var(--bf-radius) 0 0 !important;
    opacity: .38 !important;
  }

  .command-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--bf-red), var(--bf-accent), #2aa6df) !important;
    opacity: .92 !important;
  }

  .command-hero h1,
  h1,
  h2,
  h3,
  .route-title strong,
  .summary-tile strong {
    text-wrap: balance !important;
  }

  p,
  .route-reason,
  .route-meta,
  .guide-card p,
  .sample-btn span,
  .logic-list p {
    text-wrap: pretty !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    box-shadow: 0 0 0 4px rgba(33, 223, 186, .12), 0 12px 24px rgba(0, 0, 0, .18) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .nav-item:hover,
    .btn:hover,
    .tab:hover {
      transform: translateY(-1px) !important;
    }

    .surface:hover,
    .route-card:hover,
    .summary-tile:hover,
    .guide-card:hover,
    .qa-kpi:hover,
    .ops-kpi:hover {
      border-color: rgba(33, 223, 186, .26) !important;
      box-shadow: 0 22px 50px rgba(0, 0, 0, .28) !important;
      transform: translateY(-2px) !important;
    }
  }

  @media (orientation: landscape) and (max-height: 620px) {
    .nav-item::after {
      inset: auto 8px 3px !important;
    }

    .command-hero::before {
      height: 2px !important;
    }
  }
  .qa-hero,
  .guide-panel,
  .admin-panel,
  .ops-hero,
  .quote-intel-hero,
  .reality-hero {
    overflow: visible !important;
  }

  .qa-hero .surface-head,
  .guide-panel .surface-head,
  .admin-panel .surface-head,
  .ops-hero .surface-head,
  .quote-intel-hero .surface-head,
  .reality-hero .surface-head {
    display: grid !important;
    grid-template-columns: minmax(300px, 1fr) auto !important;
    align-items: start !important;
    gap: 18px !important;
  }

  .qa-hero .surface-head > div:first-child,
  .guide-panel .surface-head > div:first-child,
  .admin-panel .surface-head > div:first-child,
  .ops-hero .surface-head > div:first-child,
  .quote-intel-hero .surface-head > div:first-child,
  .reality-hero .surface-head > div:first-child {
    min-width: 0 !important;
    width: 100% !important;
  }

  .qa-hero h2,
  .guide-panel h2,
  .admin-panel h2,
  .ops-hero h2,
  .quote-intel-hero h2,
  .reality-hero h2 {
    max-width: 860px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .qa-hero p,
  .guide-panel p,
  .admin-panel p,
  .ops-hero p,
  .quote-intel-hero p,
  .reality-hero p {
    max-width: 940px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .qa-hero .hero-actions,
  .guide-panel .hero-actions,
  .admin-actions,
  .qa-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: auto !important;
    min-width: 180px !important;
    gap: 10px !important;
  }

  .qa-hero .hero-actions .btn,
  .guide-panel .hero-actions .btn,
  .admin-actions .btn,
  .qa-actions .btn {
    width: auto !important;
    min-width: 132px !important;
    max-width: 240px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .qa-kpi span,
  .ops-kpi span,
  .quote-kpi span,
  .reality-kpi span,
  .admin-card span {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .guide-card {
    column-gap: 14px !important;
    row-gap: 6px !important;
  }

  @media (max-width: 760px) {
    .qa-hero .surface-head,
    .guide-panel .surface-head,
    .admin-panel .surface-head,
    .ops-hero .surface-head,
    .quote-intel-hero .surface-head,
    .reality-hero .surface-head {
      grid-template-columns: 1fr !important;
    }

    .qa-hero .hero-actions,
    .guide-panel .hero-actions,
    .admin-actions,
    .qa-actions {
      display: grid !important;
      grid-template-columns: 1fr !important;
      width: 100% !important;
      min-width: 0 !important;
    }

    .qa-hero .hero-actions .btn,
    .guide-panel .hero-actions .btn,
    .admin-actions .btn,
    .qa-actions .btn {
      width: 100% !important;
      max-width: none !important;
    }
  }
  .app-frame,
  .workspace,
  .rail,
  .rail-inner,
  .surface,
  .command-hero,
  .route-card,
  .summary-tile,
  .admin-card,
  .qa-kpi,
  .ops-kpi,
  .quote-kpi,
  .reality-kpi,
  .guide-card,
  .btn,
  .nav-item,
  input,
  select,
  textarea {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .workspace,
  .surface,
  .command-hero,
  .route-card,
  .summary-tile,
  .admin-card,
  .qa-kpi,
  .ops-kpi,
  .quote-kpi,
  .reality-kpi,
  .guide-card {
    overflow: hidden !important;
  }

  .command-hero h1,
  h2,
  h3,
  .route-title strong,
  .sample-btn strong,
  .guide-card strong,
  .qa-kpi strong,
  .ops-kpi strong,
  .quote-kpi strong,
  .reality-kpi strong,
  .admin-card strong {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-overflow: clip !important;
    line-height: 1.08 !important;
  }

  p,
  .surface p,
  .route-reason,
  .route-meta,
  .sample-btn span,
  .logic-list p,
  .guide-card p,
  .nav-item strong,
  .nav-item em,
  .badge,
  .chip {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .btn,
  .tab,
  .hero-actions .btn,
  .card-actions .btn,
  .admin-actions .btn,
  .qa-actions .btn {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.14 !important;
    text-align: center !important;
  }

  .guide-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  }

  .guide-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
  }

  .guide-card b {
    
    grid-row: 1 / span 2 !important;
  }

  .guide-card strong {
     min-width: 300px;
    grid-row: 1 !important;
  }

  .guide-card p {
     min-width: 300px;
    grid-row: 2 !important;
  }

  @media (max-width: 820px) {

    .command-hero,
    .surface-head,
    .result-top,
    .mini-head,
    .ri-head {
      grid-template-columns: 1fr !important;
    }
  }

  @media (orientation: landscape) and (max-height: 680px) {
    .workspace {
      padding-top: 8px !important;
      padding-bottom: 18px !important;
    }

    p,
    .surface p,
    .route-reason,
    .route-meta,
    .guide-card p {
      font-size: 12px !important;
    }
  }

  @media (max-width: 820px) {
    .workspace {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .command-hero .hero-actions .btn,
    .hero-actions .btn,
    .card-actions .btn,
    .admin-actions .btn,
    .qa-actions .btn {
      width: 100% !important;
      max-width: none !important;
    }
  }
  @media (max-width: 820px) {
    html,
    body,
    .app-frame,
    .workspace,
    .tab-shell,
    .surface,
    .command-hero,
    .intake-card,
    .logic-panel,
    .sample-panel,
    .quote-panel,
    .admin-panel {
      width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    .workspace {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    .command-hero h1 {
      overflow-wrap: break-word !important;
    }

    .command-hero p {
      max-width: 100% !important;
      overflow-wrap: break-word !important;
    }

    .surface,
    .intake-card,
    .logic-panel,
    .sample-panel,
    .quote-panel,
    .admin-panel {
      border-radius: 16px !important;
    }

    .field-grid,
    .field-grid.two,
    .field-grid.four,
    .side-stack,
    .summary-deck,
    .admin-grid {
      grid-template-columns: 1fr !important;
    }

    .head-meter,
    .block-title,
    .mini-head {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    .head-meter span,
    .head-meter strong,
    label,
    .block-title p,
    .surface p {
      color: #d8e7f2 !important;
      opacity: 1 !important;
      overflow-wrap: break-word !important;
    }
  }

  .app-frame,
  .workspace,
  .view,
  .surface,
  .command-hero,
  .intake-card,
  .logic-panel,
  .sample-panel,
  .quote-panel,
  .admin-panel,
  .route-card,
  .guide-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .tab-shell,
  .hero-actions,
  .card-actions,
  .admin-actions,
  .qa-actions,
  .chip-row,
  .pill-row {
    max-width: 100% !important;
    overflow-x: hidden !important;
    flex-wrap: wrap !important;
  }

  .tab-shell {
    width: 100% !important;
    border-radius: 18px !important;
  }

  @media (orientation: portrait) and (max-width: 820px) {
    .app-frame,
    .workspace,
    .rail,
    .rail-inner {
      width: 100% !important;
      max-width: 100vw !important;
      overflow-x: hidden !important;
    }

    .nav-stack {
      overflow: visible !important;
    }

    .nav-item {
      width: 100% !important;
      min-width: 0 !important;
    }
  }
  @media (min-width: 821px) {

    .rail {
      overflow-x: hidden !important;
    }

    .workspace {
      padding-left: clamp(16px, 1.45vw, 30px) !important;
      padding-right: clamp(16px, 1.45vw, 30px) !important;
    }

    .view,
    .active-view,
    .command-hero,
    .control-grid,
    .surface,
    .result-stage,
    .summary-deck,
    .admin-grid,
    .guide-grid {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }

    .command-hero .hero-actions {
      min-width: 0 !important;
      max-width: 100% !important;
      justify-self: stretch !important;
    }
  }

  @media (min-width: 821px) and (max-width: 1360px) {

    .command-hero .hero-actions,
    .hero-actions {
      justify-content: stretch !important;
    }
  }
  :root, [data-theme="obsidian"] {
    --bf-canvas: var(--base-bg);
    --bf-canvas-2: var(--base-bg-subtle);
    --bf-rail-bg: var(--base-bg-subtle);
    --bf-panel: var(--surface-card);
    --bf-panel-2: var(--surface-card);
    --bf-line: var(--line);
    --bf-line-strong: rgba(43, 240, 189, .30);
    --bf-text: var(--text);
    --bf-muted: var(--muted);
    --bf-soft: var(--faint);
    --bf-red: #ff174f;
    --bf-green: #2bd48f;
    --bf-blue: #4f7dff;
    --bf-gold: #f4c76b;
    --bf-shadow: 0 18px 54px rgba(0, 0, 0, .30);
    --rail: clamp(228px, 17vw, 282px);
  }

  [data-theme="arctic"] {
    --bf-canvas: #f4f6f9;
    --bf-canvas-2: #eaeff5;
    --bf-rail-bg: #ffffff;
    --bf-panel: var(--surface-card);
    --bf-panel-2: rgba(248, 250, 252, 0.94);
    --bf-line: var(--border-subtle);
    --bf-line-strong: rgba(43, 240, 189, .40);
    --bf-text: #0f172a;
    --bf-muted: #64748b;
    --bf-soft: #334155;
    --bf-red: #dc2626;
    --bf-green: #16a34a;
    --bf-blue: #2563eb;
    --bf-gold: #d97706;
    --bf-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  }

  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    color-scheme: dark !important;
    background: var(--bf-canvas) !important;
  }

  body {
    color: var(--bf-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    background:
      linear-gradient(90deg, rgba(79, 125, 255, .055) 1px, transparent 1px) 0 0 / 52px 52px,
      linear-gradient(0deg, rgba(43, 212, 143, .040) 1px, transparent 1px) 0 0 / 52px 52px,
      linear-gradient(135deg, var(--base-bg) 0%, var(--base-bg-subtle) 48%, #08111f 100%) !important;
  }

  .ambient {
    display: none !important;
  }

  .app-frame {
    display: grid !important;
    grid-template-columns: var(--rail) minmax(0, calc(100vw - var(--rail))) !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
  }

  .rail {
    position: sticky !important;
    top: 0 !important;
    width: var(--rail) !important;
    max-width: var(--rail) !important;
    height: 100dvh !important;
    padding: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, var(--bf-rail-bg), #081522) !important;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
  }

  .rail-inner {
    height: 100% !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    background: var(--surface-card) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  }

  .brand-lockup {
    display: grid !important;
    align-items: center !important;
  }

  .brand-orb {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--bf-red), var(--bf-blue)) !important;
    box-shadow: none !important;
  }

  .brand-orb::after {
    border-radius: 6px !important;
    border-color: rgba(255, 255, 255, .28) !important;
  }

  .brand-text span {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(43, 212, 143, .24) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .nav-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .nav-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-areas: "num title" "num sub" !important;
    gap: 2px 10px !important;
    min-height: 56px !important;
    padding: 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, .085) !important;
    background: var(--surface-card) !important;
    color: var(--bf-muted) !important;
    overflow: hidden !important;
  }

  .nav-item span {
    grid-area: num !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    color: #d9fff0 !important;
    background: var(--line) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    font-size: 11px !important;
  }

  .nav-item strong,
  .nav-item em {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
  }

  .nav-item strong {
    grid-area: title !important;
    align-self: end !important;
    color: var(--text) !important;
    font-size: 13px !important;
    line-height: 1.08 !important;
  }

  .nav-item em {
    grid-area: sub !important;
    align-self: start !important;
    color: rgba(169, 186, 205, .72) !important;
    font-size: 10.5px !important;
  }

  .nav-item.active,
  .nav-item:hover {
    border-color: rgba(255, 255, 255, .18) !important;
    background: linear-gradient(135deg, rgba(255, 23, 79, .20), rgba(79, 125, 255, .12)) !important;
  }

  .nav-item.active span {
    color: var(--base-bg) !important;
    background: var(--bf-green) !important;
    border-color: rgba(43, 212, 143, .62) !important;
  }

  .rail-card {
    padding: 12px !important;
    border-radius: 8px !important;
    border-color: rgba(255, 255, 255, .08) !important;
    background: var(--surface-card) !important;
    box-shadow: none !important;
  }

  .workspace {
    width: auto !important;
    max-width: calc(100vw - var(--rail)) !important;
    margin: 0 !important;
    padding: 18px clamp(16px, 1.45vw, 30px) 42px !important;
    overflow-x: hidden !important;
  }

  .view,
  .active-view,
  .command-hero,
  .control-grid,
  .surface,
  .result-stage {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .command-hero,
  .surface,
  .route-card,
  .summary-tile,
  .admin-card,
  .guide-card,
  .qa-kpi,
  .ops-kpi,
  .quote-kpi,
  .reality-kpi {
    border-radius: 8px !important;
    border: 1px solid var(--bf-line) !important;
    background: linear-gradient(180deg, var(--bf-panel), rgba(12, 23, 37, .96)) !important;
    box-shadow: var(--bf-shadow) !important;
    color: var(--bf-text) !important;
    overflow: hidden !important;
  }

  .command-hero::after,
  .surface::before,
  .route-card::before,
  .summary-tile::before,
  .guide-card::before,
  .qa-kpi::before,
  .ops-kpi::before {
    display: none !important;
  }

  .command-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px) !important;
    align-items: end !important;
    gap: 18px !important;
    min-height: 0 !important;
    margin-bottom: 18px !important;
    border-top: 3px solid var(--bf-red) !important;
  }

  .pill-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .status-pill,
  .badge,
  .chip {
    border-radius: 999px !important;
    border-color: rgba(169, 186, 205, .22) !important;
    background: rgba(255, 255, 255, .065) !important;
    color: #dbeafa !important;
    letter-spacing: 0 !important;
  }

  .live-dot::before {
    background: var(--bf-green) !important;
    box-shadow: 0 0 0 5px rgba(43, 212, 143, .13) !important;
  }

  h1,
  h2,
  h3,
  .route-title strong,
  .summary-tile strong,
  .qa-kpi strong,
  .ops-kpi strong,
  .quote-kpi strong,
  .reality-kpi strong,
  .admin-card strong {
    color: var(--bf-text) !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  h1 {
    max-width: 980px !important;
    margin-bottom: 0 !important;
    font-size: clamp(36px, 4vw, 58px) !important;
    line-height: .98 !important;
  }

  h2 {
    font-size: clamp(22px, 2vw, 32px) !important;
    line-height: 1.08 !important;
  }

  p,
  .surface p,
  .route-reason,
  .route-meta,
  .sample-btn span,
  .logic-list p,
  .guide-card p {
    color: var(--bf-muted) !important;
    line-height: 1.48 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .eyebrow,
  .mini-label {
    color: #8af6d4 !important;
    letter-spacing: .08em !important;
  }

  .hero-actions,
  .command-hero .hero-actions,
  .card-actions,
  .admin-actions,
  .qa-actions,
  .ops-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .btn {
    min-width: 0 !important;
    min-height: 44px !important;
    max-width: 100% !important;
    border: 1px solid rgba(169, 186, 205, .22) !important;
    background: var(--line) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.12 !important;
    text-align: center !important;
  }

  .btn-primary {
    color: var(--base-bg) !important;
    background: linear-gradient(135deg, var(--bf-green), #36a9ff) !important;
    border-color: transparent !important;
  }

  .btn-secondary {
    color: #eaf4ff !important;
    background: var(--line) !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    border: 1px solid rgba(169, 186, 205, .20) !important;
    font-size: 14px !important;
  }

  .field-grid,
  .field-grid.two,
  .field-grid.four {
    gap: 12px !important;
  }

  .field-grid.two {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  }

  .field-grid.four {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
  }

  .control-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.32fr) minmax(300px, .68fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .intake-card,
  .logic-panel,
  .sample-panel,
  .quote-panel,
  .admin-panel,
  .qa-hero,
  .qa-card,
  .ops-hero,
  .ops-card,
  .reality-hero,
  .quote-intel-hero,
  .guide-panel {
    padding: 22px !important;
  }

  .summary-deck,
  .admin-grid,
  .quote-kpi-grid,
  .qa-kpi-grid,
  .ops-kpi-grid,
  .reality-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
    gap: 12px !important;
  }

  .tab-shell,
  .mini-table {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  @media (orientation: landscape) and (max-height: 680px) {
    :root {
      --rail: 76px;
    }

    body {
      overflow: hidden !important;
    }

    .app-frame {
      grid-template-columns: var(--rail) minmax(0, calc(100vw - var(--rail))) !important;
      height: 100dvh !important;
      overflow: hidden !important;
    }

    .rail {
      width: var(--rail) !important;
      max-width: var(--rail) !important;
      padding: 6px !important;
    }

    .rail-inner {
      max-height: calc(100dvh - 12px) !important;
      padding: 6px !important;
      gap: 5px !important;
      overflow-y: auto !important;
    }

    .brand-lockup {
      display: none !important;
    }

    .rail-card,
    .rail-footer {
      display: none !important;
    }

    .nav-stack {
      gap: 5px !important;
    }

    .nav-item {
      min-height: 34px !important;
      height: 34px !important;
      grid-template-columns: 1fr !important;
      grid-template-areas: "num" !important;
      justify-items: center !important;
      padding: 5px !important;
    }

    .nav-item span {
      width: 28px !important;
      height: 24px !important;
      font-size: 10px !important;
    }

    .nav-item strong,
    .nav-item em {
      display: none !important;
    }

    .workspace {
      max-width: calc(100vw - var(--rail)) !important;
      height: 100dvh !important;
      overflow-y: auto !important;
      padding: 8px 10px 16px !important;
    }

    .command-hero {
      grid-template-columns: minmax(0, 1fr) minmax(190px, .44fr) !important;
      gap: 8px !important;
      margin-bottom: 10px !important;
    }

    .command-hero p {
      font-size: 11px !important;
      line-height: 1.32 !important;
    }

    .pill-row {
      gap: 5px !important;
      margin-bottom: 6px !important;
    }

    .pill-row .status-pill:nth-child(n+4) {
      display: none !important;
    }

    .hero-actions,
    .command-hero .hero-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 6px !important;
    }

    .btn {
      min-height: 34px !important;
      padding: 6px 8px !important;
      font-size: 10.5px !important;
    }

    .control-grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(230px, .95fr) !important;
      gap: 10px !important;
    }

    .surface,
    .route-card,
    .summary-tile,
    .admin-card,
    .guide-card {
      padding: 12px !important;
    }

    .intake-card,
    .logic-panel,
    .sample-panel,
    .quote-panel,
    .admin-panel,
    .qa-hero,
    .qa-card,
    .ops-hero,
    .ops-card,
    .reality-hero,
    .quote-intel-hero,
    .guide-panel {
      padding: 12px !important;
    }

    h2 {
      font-size: 18px !important;
    }

    input,
    select,
    textarea {
      min-height: 44px !important;
      padding: 8px 9px !important;
      font-size: 12px !important;
    }

    .field-grid.four,
    .field-grid.two,
    .reality-input-grid,
    .ops-generate-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
    }
  }

  @media (orientation: landscape) and (max-width: 780px) {
    :root {
      --rail: 64px;
    }

    .command-hero,
    .control-grid {
      grid-template-columns: 1fr !important;
    }

    .hero-actions,
    .command-hero .hero-actions {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 820px) and (orientation: portrait) {
    body {
      overflow-y: auto !important;
    }

    .app-frame {
      width: 100% !important;
      padding-bottom: 0 !important;
    }

    .rail {
      max-width: 100vw !important;
      overflow: visible !important;
    }

    .rail-inner {
      height: auto !important;
    }

    .brand-orb {
      width: 38px !important;
      height: 38px !important;
    }

    .nav-item {
      height: 52px !important;
    }

    .nav-item strong {
      display: block !important;
    }

    .workspace {
      width: 100% !important;
    }

    .command-hero,
    .control-grid,
    .surface-head,
    .result-top,
    .mini-head,
    .ri-head,
    .field-grid,
    .field-grid.two,
    .field-grid.four,
    .side-stack,
    .summary-deck,
    .admin-grid,
    .hero-actions,
    .command-hero .hero-actions,
    .card-actions,
    .admin-actions,
    .qa-actions,
    .ops-actions {
      grid-template-columns: 1fr !important;
    }
  }
  @media (min-width: 821px) {
    .control-grid {
      grid-template-columns: minmax(0, 1.62fr) minmax(300px, .58fr) !important;
    }

    .side-stack {
      display: grid !important;
      grid-template-columns: 1fr !important;
      align-content: start !important;
    }

    .logic-list {
      grid-template-columns: 1fr !important;
    }

    .logic-list div {
      grid-template-columns: 36px minmax(0, 1fr) !important;
      gap: 0 12px !important;
    }

    .logic-list strong {
      white-space: normal !important;
      overflow-wrap: normal !important;
      word-break: keep-all !important;
    }
  }
/* BuyerFinder actively owned application styles. */
/* Core theme tokens and component primitives. */
  body {
    --bf-panel: rgba(15, 27, 43, .96);
    --bf-panel-2: rgba(20, 34, 52, .92);
    --bf-line: rgba(175, 195, 214, .16);
    --bf-line-strong: rgba(43, 240, 189, .34);
    --bf-text: var(--text);
    --bf-muted: #aab9c8;
    --bf-soft: var(--faint);
    --bf-type-hero: clamp(31px, 3.05vw, 46px);
    --bf-type-title: clamp(24px, 2.05vw, 34px);
    --bf-type-card: clamp(20px, 1.65vw, 28px);
    --bf-type-copy: clamp(13px, 1.05vw, 16px);
    --bf-radius: 8px;
  }

  body::before {
    opacity: .58 !important;
  }

  .rail-inner,
  .command-hero,
  .surface,
  .route-card,
  .admin-card,
  .summary-tile {
    border-radius: var(--bf-radius) !important;
    border-color: var(--bf-line) !important;
  }

  .brand-lockup {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 2px 2px 13px !important;
  }

  .brand-text span {
    margin-top: 8px !important;
    color: #d9fff0 !important;
    background: rgba(43, 212, 143, .13) !important;
    border-color: rgba(43, 212, 143, .28) !important;
  }

  .command-hero {
    padding: clamp(16px, 2vw, 24px) !important;
    background:
      linear-gradient(100deg, rgba(255, 23, 79, .16), transparent 31%),
      linear-gradient(135deg, rgba(20, 32, 49, .98), rgba(8, 17, 30, .98)) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .26) !important;
  }

  .command-hero h1 {
    max-width: 920px !important;
    font-size: var(--bf-type-hero) !important;
    line-height: 1.02 !important;
    font-weight: 820 !important;
  }

  h1,
  h2,
  h3,
  .brand-text strong,
  .brand-text span,
  .command-hero h1,
  .view-head h2,
  .surface-head h2,
  .route-title strong,
  .admin-card strong,
  .backend-grid strong,
  .nav-item strong,
  .summary-tile strong {
    letter-spacing: 0 !important;
  }

  h1,
  h2,
  h3,
  .command-hero h1,
  .view-head h2,
  .surface-head h2,
  .block-title h3,
  .hpi-assist-panel h3,
  .logic-panel h3,
  .sample-panel h3,
  .quote-panel h3,
  .admin-panel h3,
  .route-title strong,
  .admin-card strong,
  .backend-grid strong,
  .summary-tile strong,
  .head-meter strong {
    color: var(--bf-text) !important;
  }

  p,
  li,
  .command-hero p,
  .view-head p,
  .surface-head p,
  .block-title p,
  .surface p,
  .route-meta,
  .chip,
  .muted {
    color: var(--bf-muted) !important;
    font-weight: 560 !important;
  }

  .mini-label,
  label,
  .section-kicker,
  .hero-kicker,
  .view-kicker {
    color: #8af6d4 !important;
  }

  .hero-actions {
    gap: 10px !important;
  }

  .hero-actions .btn {
    min-height: 44px !important;
    border-radius: var(--bf-radius) !important;
  }

  .surface.intake-card,
  .hpi-assist-panel,
  .logic-panel,
  .sample-panel,
  .quote-panel,
  .admin-panel {
    background:
      linear-gradient(180deg, var(--surface-card), rgba(255, 255, 255, .024)),
      rgba(15, 27, 43, .93) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, .22) !important;
  }

  .form-block {
    background: transparent !important;
    border-top-color: rgba(175, 195, 214, .14) !important;
  }

  .form-block.first {
    border-top: 0 !important;
  }

  input,
  select,
  textarea {
    border-radius: var(--bf-radius) !important;
    background: rgba(3, 10, 18, .72) !important;
    border-color: rgba(175, 195, 214, .18) !important;
    color: var(--text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: rgba(213, 226, 238, .52) !important;
  }

  .notice,
  #globalAlert:not(.hidden),
  .case-control-status,
  .hpi-intake-status {
    border-radius: var(--bf-radius) !important;
    background: rgba(8, 18, 31, .94) !important;
    border: 1px solid rgba(175, 195, 214, .18) !important;
    color: #dce8f3 !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22) !important;
    font-size: var(--bf-type-copy) !important;
    font-weight: 560 !important;
    line-height: 1.45 !important;
  }

  .notice::before,
  #globalAlert:not(.hidden)::before {
    content: "System message";
    display: block;
    margin: 0 0 6px;
    color: #9bead1;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .notice.error,
  #globalAlert.error,
  .case-control-status.bad,
  .hpi-intake-status.error {
    background: rgba(74, 18, 31, .92) !important;
    border-color: rgba(255, 115, 120, .42) !important;
    color: #ffe0e3 !important;
  }

  .notice.error::before,
  #globalAlert.error::before {
    content: "Connection issue";
    color: #ffd7dc;
  }

  .notice.success,
  .case-control-status.good,
  .hpi-intake-status.success {
    background: rgba(11, 56, 39, .86) !important;
    border-color: rgba(125, 224, 142, .36) !important;
    color: #ddffe8 !important;
  }

  .notice.success::before,
  #globalAlert.success::before {
    content: "Ready";
    color: #dfffe8;
  }

  .case-control-status.warn {
    background: rgba(72, 48, 14, .84) !important;
    border-color: rgba(244, 199, 107, .40) !important;
    color: #ffedc2 !important;
  }

  .btn,
  button {
    border-radius: var(--bf-radius) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .view-head h2,
  .surface-head h2 {
    font-size: var(--bf-type-title) !important;
    line-height: 1.06 !important;
    font-weight: 820 !important;
  }

  .view-head p,
  .surface-head p {
    color: var(--bf-muted) !important;
    font-size: var(--bf-type-copy) !important;
    font-weight: 560 !important;
    line-height: 1.42 !important;
  }

  .mini-label,
  label,
  .section-kicker,
  .hero-kicker,
  .view-kicker {
    letter-spacing: 0 !important;
  }

  @media (orientation: landscape) and (max-height: 560px) {

    .surface.intake-card,
    .hpi-assist-panel,
    .logic-panel,
    .sample-panel,
    .quote-panel,
    .admin-panel {
      padding: 14px !important;
    }

    .notice,
    #globalAlert:not(.hidden) {
      overflow-y: auto !important;
      font-size: 12px !important;
      line-height: 1.35 !important;
    }

    .view-head h2,
    .surface-head h2 {
      font-size: 20px !important;
    }
  }

  @media (max-width: 820px) {

    .surface.intake-card,
    .hpi-assist-panel,
    .logic-panel,
    .sample-panel,
    .quote-panel,
    .admin-panel {
      padding: 16px !important;
    }
  }
  body {
    --bf-mobile-gutter: clamp(10px, 3.4vw, 16px);
    --bf-mobile-touch: 46px;
  }

  @media (max-width: 820px) {
    html,
    body,
    .app-frame,
    .workspace,
    .view,
    .surface,
    .command-hero {
      max-width: 100% !important;
      overflow-x: hidden !important;
    }

    body {
      background:
        linear-gradient(90deg, rgba(89, 112, 140, .08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(89, 112, 140, .06) 1px, transparent 1px),
        var(--base-bg) !important;
      background-size: 52px 52px !important;
    }

    .app-frame {
      display: grid !important;
      grid-template-columns: 1fr !important;
      min-height: 100dvh !important;
    }

    .rail {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: auto !important;
      padding: 8px var(--bf-mobile-gutter) !important;
    }

    .rail-inner {
      max-height: none !important;
      padding: 10px !important;
      border-radius: var(--bf-radius) !important;
      overflow: visible !important;
    }

    .brand-lockup {
      padding-bottom: 8px !important;
      border-bottom: 1px solid rgba(169, 186, 205, .14) !important;
    }

    .brand-text strong::before {
      font-size: clamp(22px, 7vw, 30px) !important;
    }

    .rail-card,
    .rail-footer {
      display: none !important;
    }

    .nav-stack {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 6px !important;
      margin-top: 8px !important;
    }

    .nav-item {
      min-height: 56px !important;
      grid-template-columns: 1fr !important;
      grid-template-areas: "num" "title" !important;
      justify-items: center !important;
      gap: 2px !important;
      padding: 5px !important;
      border-radius: var(--bf-radius) !important;
      text-align: center !important;
    }

    .nav-item span {
      width: 26px !important;
      height: 26px !important;
      border-radius: var(--bf-radius) !important;
      font-size: 10.5px !important;
    }

    .nav-item strong {
      font-size: 11.5px !important;
      line-height: 1.08 !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }

    .nav-item em {
      display: none !important;
    }

    .workspace {
      padding: 12px var(--bf-mobile-gutter) calc(24px + env(safe-area-inset-bottom)) !important;
      gap: 12px !important;
    }

    .command-hero,
    .surface,
    .route-card,
    .summary-tile,
    .admin-card,
    .guide-card,
    .notice,
    #globalAlert:not(.hidden) {
      border-radius: var(--bf-radius) !important;
    }

    .command-hero {
      padding: 16px !important;
      gap: 12px !important;
    }

    .pill-row {
      gap: 6px !important;
    }

    .pill-row .status-pill {
      min-height: 28px !important;
      font-size: 11px !important;
      padding: 5px 8px !important;
    }

    .command-hero h1 {
      font-size: clamp(27px, 8.6vw, 38px) !important;
      line-height: 1.02 !important;
    }

    .command-hero p {
      font-size: 13px !important;
      line-height: 1.42 !important;
    }

    .hero-actions,
    .admin-actions,
    .ops-actions,
    .qa-actions,
    .card-actions {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
    }

    .command-hero #btnRun {
      grid-column: 1 / -1 !important;
    }

    .btn,
    button {
      min-height: var(--bf-mobile-touch) !important;
      border-radius: var(--bf-radius) !important;
      font-size: 13px !important;
      line-height: 1.16 !important;
    }

    .notice,
    #globalAlert:not(.hidden) {
      max-height: 190px !important;
      overflow-y: auto !important;
      padding: 14px !important;
      font-size: 12.5px !important;
      line-height: 1.4 !important;
    }

    .control-grid,
    .field-grid.two,
    .field-grid.four,
    .summary-deck,
    .admin-grid,
    .quote-kpi-grid,
    .qa-kpi-grid,
    .ops-kpi-grid,
    .reality-kpi-grid,
    .guide-grid {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }

    .surface,
    .hpi-assist-panel,
    .logic-panel,
    .sample-panel,
    .quote-panel,
    .admin-panel {
      padding: 16px !important;
    }

    .surface-head,
    .block-title,
    .ri-head {
      gap: 10px !important;
    }

    input,
    select,
    textarea {
      min-height: var(--bf-mobile-touch) !important;
      border-radius: var(--bf-radius) !important;
      font-size: 13px !important;
    }
  }

  @media (max-width: 820px) and (orientation: portrait) {
    .surface-head,
    .result-top,
    .ri-head {
      flex-direction: column !important;
      align-items: stretch !important;
    }

    .head-meter {
      width: 100% !important;
    }
  }

  @media (min-width: 700px) and (max-width: 899px) and (orientation: portrait) {
    .nav-stack {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .nav-item {
      grid-template-columns: 1fr !important;
      grid-template-areas: "num" "title" !important;
      justify-items: center !important;
      min-height: 58px !important;
      text-align: center !important;
    }

    .command-hero {
      grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr) !important;
      align-items: end !important;
    }

    .command-hero > .hero-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .field-grid.four,
    .summary-deck,
    .admin-grid,
    .quote-kpi-grid,
    .qa-kpi-grid,
    .ops-kpi-grid,
    .reality-kpi-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (orientation: landscape) and (max-height: 560px) {
    body {
      --rail: 76px;
    }

    .app-frame {
      grid-template-columns: var(--rail) minmax(0, 1fr) !important;
      height: 100dvh !important;
      overflow: hidden !important;
    }

    .rail {
      position: sticky !important;
      top: 0 !important;
      height: 100dvh !important;
      padding: 6px !important;
    }

    .rail-inner {
      max-height: calc(100dvh - 12px) !important;
      padding: 6px !important;
      overflow-y: auto !important;
    }

    .brand-lockup,
    .rail-card,
    .rail-footer {
      display: none !important;
    }

    .nav-stack {
      grid-template-columns: 1fr !important;
      gap: 5px !important;
      margin: 0 !important;
    }

    .nav-item {
      min-height: 38px !important;
      padding: 5px !important;
      grid-template-areas: "num" !important;
    }

    .nav-item span {
      width: 28px !important;
      height: 28px !important;
    }

    .nav-item strong,
    .nav-item em {
      display: none !important;
    }

    .workspace {
      height: 100dvh !important;
      overflow-y: auto !important;
      padding: 8px 10px 16px !important;
    }

    .command-hero {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(210px, .48fr) !important;
      align-items: end !important;
      padding: 10px 12px !important;
    }

    .command-hero h1 {
      font-size: clamp(22px, 4.1vw, 30px) !important;
    }

    .command-hero p {
      max-height: 2.9em !important;
      overflow: hidden !important;
      font-size: 11.5px !important;
    }

    .pill-row .status-pill:nth-child(n+3) {
      display: none !important;
    }

    .hero-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 7px !important;
    }

    .hero-actions .btn {
      min-height: 44px !important;
      font-size: 11.5px !important;
    }

    .notice,
    #globalAlert:not(.hidden) {
      max-height: 112px !important;
      padding: 10px 12px !important;
    }

    .control-grid {
      grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr) !important;
      gap: 10px !important;
    }

    .field-grid.four {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  @media (min-width: 821px) {
    body {
      --rail: clamp(230px, 17vw, 292px) !important;
      overflow-y: auto !important;
    }

    .app-frame {
      display: grid !important;
      grid-template-columns: var(--rail) minmax(0, 1fr) !important;
      width: 100% !important;
      max-width: 100vw !important;
      height: auto !important;
      min-height: 100dvh !important;
      overflow: visible !important;
    }

    .rail {
      position: sticky !important;
      top: 0 !important;
      width: var(--rail) !important;
      max-width: var(--rail) !important;
      height: 100dvh !important;
      padding: clamp(12px, 1vw, 16px) !important;
      overflow: hidden !important;
    }

    .rail-inner {
      height: calc(100dvh - clamp(24px, 2vw, 32px)) !important;
      max-height: none !important;
      padding: clamp(12px, 1vw, 16px) !important;
      gap: 9px !important;
      overflow-y: auto !important;
    }

    .brand-lockup {
      display: grid !important;
      grid-template-columns: 1fr !important;
      padding-bottom: 12px !important;
    }

    .brand-text {
      display: block;
      visibility: visible;
      opacity: 1;
    }

    .nav-stack {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      margin: 0 !important;
    }

    .nav-item {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      grid-template-areas: "num title" "num sub";
      justify-items: stretch;
      align-items: center;
      min-height: 58px !important;
      height: auto !important;
      padding: 10px 11px !important;
      text-align: left !important;
    }

    .nav-item span {
      width: 34px !important;
      height: 34px !important;
    }

    .nav-item strong,
    .nav-item em {
      display: block;
      visibility: visible;
      opacity: 1;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    .workspace {
      width: 100% !important;
      max-width: none !important;
      height: auto !important;
      min-height: 100dvh !important;
      overflow: visible !important;
      padding: clamp(16px, 1.35vw, 26px) clamp(16px, 1.6vw, 30px) 42px !important;
    }

    .command-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 430px) !important;
      align-items: center !important;
      min-height: 0 !important;
      height: auto !important;
      gap: clamp(14px, 1.4vw, 22px) !important;
      padding: clamp(18px, 1.6vw, 24px) !important;
      margin-bottom: 16px !important;
    }

    .command-hero h1 {
      font-size: clamp(34px, 2.65vw, 46px) !important;
      line-height: 1.06 !important;
    }

    .command-hero p {
      max-width: 880px !important;
      max-height: none !important;
      overflow: visible !important;
      font-size: clamp(13px, .9vw, 15px) !important;
    }

    .command-hero > .hero-actions {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 10px !important;
      align-self: center !important;
      align-items: center !important;
    }

    .command-hero > .hero-actions .btn {
      height: auto !important;
      min-height: 52px !important;
      padding-block: 10px !important;
    }
  }

  @media (min-width: 821px) {
    .quote-command,
    .qa-command,
    .ops-command,
    .reality-command,
    .result-stage,
    .side-stack {
      gap: 16px !important;
    }

    .quote-intel-hero,
    .qa-hero,
    .ops-hero,
    .reality-hero,
    .admin-panel {
      display: grid !important;
      grid-template-columns: 1fr !important;
      align-content: start !important;
      align-items: start !important;
      min-height: 0 !important;
      height: auto !important;
      gap: 14px !important;
      padding: clamp(18px, 1.35vw, 22px) !important;
      overflow: visible !important;
    }

    .quote-intel-hero .surface-head,
    .qa-hero .surface-head,
    .ops-hero .surface-head,
    .reality-hero .surface-head,
    .admin-panel .surface-head,
    .result-top {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(240px, 360px) !important;
      align-items: start !important;
      gap: 16px !important;
      margin-bottom: 0 !important;
    }

    .quote-intel-hero .hero-actions,
    .qa-hero .hero-actions,
    .ops-hero .hero-actions,
    .reality-hero .hero-actions,
    .admin-actions {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
      width: 100% !important;
      min-width: 0 !important;
      justify-content: stretch !important;
    }

    .quote-intel-hero .hero-actions .btn,
    .qa-hero .hero-actions .btn,
    .ops-hero .hero-actions .btn,
    .reality-hero .hero-actions .btn,
    .admin-actions .btn {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
    }

    .surface-head h2,
    .quote-intel-hero h2,
    .qa-hero h2,
    .ops-hero h2,
    .reality-hero h2,
    .admin-panel h2 {
      font-size: clamp(24px, 2vw, 34px) !important;
      line-height: 1.07 !important;
    }

    .surface-head p,
    .quote-intel-hero p,
    .qa-hero p,
    .ops-hero p,
    .reality-hero p,
    .admin-panel p {
      max-width: 860px !important;
      font-size: clamp(13px, .92vw, 15px) !important;
      line-height: 1.42 !important;
    }

    .quote-kpi-grid,
    .qa-kpi-grid,
    .ops-kpi-grid,
    .reality-kpi-grid,
    .summary-deck,
    .admin-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
      gap: 12px !important;
      margin-top: 0 !important;
      width: 100% !important;
    }

    .quote-kpi,
    .qa-kpi,
    .ops-kpi,
    .reality-kpi,
    .summary-tile,
    .admin-card {
      min-height: 96px !important;
      padding: 14px !important;
    }

    .quote-kpi span,
    .qa-kpi span,
    .ops-kpi span,
    .reality-kpi span,
    .summary-tile span,
    .admin-card span {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      letter-spacing: .06em !important;
    }

    .quote-kpi strong,
    .qa-kpi strong,
    .ops-kpi strong,
    .reality-kpi strong,
    .summary-tile strong,
    .admin-card strong {
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      overflow: visible !important;
      text-overflow: clip !important;
      font-size: clamp(26px, 2.4vw, 40px) !important;
    }

    .quote-intel-grid,
    .qa-grid,
    .ops-grid,
    .reality-grid,
    .outcome-grid,
    .guide-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
      gap: 16px !important;
      align-items: start !important;
    }

    .quote-intel-grid .surface,
    .qa-grid .surface,
    .ops-grid .surface,
    .reality-grid .surface,
    .outcome-grid .surface {
      min-height: 0 !important;
    }

    .qa-grid .qa-card:first-child,
    .ops-wide,
    .reality-wide {
      grid-row: auto !important;
      grid-column: auto !important;
    }

    .ops-generate-grid,
    .reality-input-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
      gap: 12px !important;
      margin-top: 0 !important;
    }

    .quote-panel,
    .ops-manual-task,
    .ops-outcome-panel {
      display: grid !important;
      gap: 16px !important;
      min-height: 0 !important;
    }

    .flag-strip {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
      gap: 10px !important;
    }

    .flag-strip label {
      min-height: 48px !important;
      padding: 10px 12px !important;
      overflow: visible !important;
    }

    .flag-strip span {
      font-size: 13px !important;
      font-weight: 800 !important;
      line-height: 1.18 !important;
    }
  }

  @media (min-width: 1180px) {
    .control-grid {
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, .62fr) !important;
    }

    .quote-intel-grid,
    .qa-grid,
    .ops-grid,
    .reality-grid,
    .outcome-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .ops-wide,
    .reality-wide {
      grid-column: span 2 !important;
    }
  }

  @media (min-width: 821px) and (max-width: 1179px) {
    body {
      --rail: clamp(210px, 22vw, 250px) !important;
    }

    .command-hero,
    .quote-intel-hero .surface-head,
    .qa-hero .surface-head,
    .ops-hero .surface-head,
    .reality-hero .surface-head,
    .admin-panel .surface-head,
    .result-top {
      grid-template-columns: 1fr !important;
    }

    .command-hero > .hero-actions,
    .quote-intel-hero .hero-actions,
    .qa-hero .hero-actions,
    .ops-hero .hero-actions,
    .reality-hero .hero-actions,
    .admin-actions {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    }

    .control-grid,
    .quote-intel-grid,
    .qa-grid,
    .ops-grid,
    .reality-grid,
    .outcome-grid {
      grid-template-columns: 1fr !important;
    }
  }

  @media (max-width: 940px) and (orientation: landscape) and (max-height: 560px) {
    body {
      --rail: 72px !important;
      overflow: hidden !important;
    }

    .app-frame {
      grid-template-columns: var(--rail) minmax(0, 1fr) !important;
      height: 100dvh !important;
      overflow: hidden !important;
    }

    .rail {
      width: var(--rail) !important;
      max-width: var(--rail) !important;
      height: 100dvh !important;
      padding: 5px !important;
    }

    .rail-inner {
      width: 100% !important;
      height: calc(100dvh - 10px) !important;
      padding: 4px !important;
      gap: 2px !important;
      overflow-y: auto !important;
    }

    .brand-lockup,
    .brand-text,
    .rail-card,
    .rail-footer {
      display: none !important;
    }

    .nav-stack {
      grid-template-columns: 1fr !important;
      gap: 2px !important;
      margin: 0 !important;
    }

    .nav-item {
      grid-template-columns: 1fr !important;
      grid-template-areas: "num" !important;
      justify-items: center !important;
      width: 100% !important;
      min-width: 44px !important;
      min-height: 44px !important;
      padding: 4px !important;
    }

    .nav-item strong,
    .nav-item em {
      display: none !important;
    }

    .workspace {
      height: 100dvh !important;
      overflow-y: auto !important;
      padding: 8px 10px 16px !important;
    }

    .command-hero {
      grid-template-columns: 1fr !important;
      align-items: start !important;
      gap: 8px !important;
    }

    .command-hero p {
      display: none !important;
    }

    .command-hero > .hero-actions {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .command-hero #btnRun {
      grid-column: auto !important;
    }
  }
  .flag-strip label {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    text-align: left !important;
  }

  .flag-strip input {
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    appearance: auto !important;
  }

  .flag-strip span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
    color: var(--text) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  @media (max-width: 940px) and (orientation: landscape) and (max-height: 560px) {
    .quote-intel-hero,
    .qa-hero,
    .ops-hero,
    .reality-hero,
    .admin-panel {
      display: grid !important;
      grid-template-columns: 1fr !important;
      align-content: start !important;
      align-items: start !important;
      min-height: 0 !important;
      height: auto !important;
      gap: 9px !important;
      padding: 12px !important;
      overflow: visible !important;
    }

    .quote-intel-hero .surface-head,
    .qa-hero .surface-head,
    .ops-hero .surface-head,
    .reality-hero .surface-head,
    .admin-panel .surface-head {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(160px, .52fr) !important;
      align-items: start !important;
      gap: 8px !important;
      margin: 0 !important;
    }

    .quote-intel-hero h2,
    .qa-hero h2,
    .ops-hero h2,
    .reality-hero h2,
    .admin-panel h2 {
      font-size: 18px !important;
      line-height: 1.04 !important;
      margin: 0 !important;
    }

    .quote-intel-hero p,
    .qa-hero p,
    .ops-hero p,
    .reality-hero p,
    .admin-panel p {
      display: none !important;
    }

    .quote-kpi-grid,
    .qa-kpi-grid,
    .ops-kpi-grid,
    .reality-kpi-grid,
    .summary-deck,
    .admin-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 7px !important;
      margin-top: 0 !important;
    }

    .quote-kpi,
    .qa-kpi,
    .ops-kpi,
    .reality-kpi,
    .summary-tile,
    .admin-card {
      min-height: 58px !important;
      padding: 8px !important;
    }
  }
  .qa-kpi {
    min-width: 0;
    overflow: hidden;
  }

  .qa-kpi strong {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: normal;
  }

  .qa-kpi.qa-kpi-run strong {
    font-size: clamp(18px, 1.45vw, 25px);
    line-height: 1.16;
    overflow-wrap: anywhere;
  }

  .qa-kpi.qa-kpi-run em {
    overflow-wrap: anywhere;
  }

  .qa-priority-groups,
  .qa-detail-list {
    display: grid;
    gap: 10px;
  }

  .qa-priority-groups {
    margin-bottom: 14px;
  }

  .qa-priority-group {
    border: 1px solid rgba(143, 255, 222, .18);
    border-radius: var(--bf-radius, 8px);
    background: var(--surface-card);
    padding: 12px;
  }

  .qa-priority-group div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .qa-priority-group span,
  .qa-priority-group em {
    color: var(--bf-text, var(--text));
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .qa-priority-group strong {
    min-width: 0;
    color: var(--bf-text, var(--text));
    font-size: 15px;
    line-height: 1.16;
    overflow-wrap: anywhere;
  }

  .qa-priority-group b {
    min-width: 42px;
    text-align: center;
    color: var(--base-bg);
    background: var(--bf-action, var(--ck-action-primary));
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 13px;
  }

  .qa-priority-group p {
    margin: 9px 0 0;
    color: var(--bf-muted, var(--muted));
    line-height: 1.35;
  }

  .qa-issue {
    min-width: 0;
  }

  .qa-issue strong,
  .qa-issue p,
  .qa-issue em {
    overflow-wrap: anywhere;
  }

  .workspace button,
  .workspace .btn {
    min-height: 46px !important;
    max-height: none !important;
  }

  @media (max-width: 899px) {
    .workspace button,
    .workspace .btn {
      min-height: 46px !important;
      max-height: none !important;
    }
  }

  @media (max-width: 699px) and (orientation: portrait) {
    .command-hero > .hero-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .command-hero #btnRun {
      grid-column: 1 / -1 !important;
    }
  }

  @media (min-width: 1180px) {
    .qa-grid .qa-card:first-child {
      grid-column: span 2 !important;
    }
  }

  /* Canonical wordmark: the three styled fragments stay on one line. */
  .brand-lockup,
  .brand-text {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .brand-text strong.brand-wordmark,
  .brand-wordmark {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 100% !important;
    align-items: baseline !important;
    gap: 0 !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
    color: var(--bf-text, var(--text)) !important;
    font-weight: 850 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-overflow: clip !important;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .32)) !important;
  }

  .brand-text strong.brand-wordmark::before,
  .brand-wordmark::before {
    content: none !important;
    display: none !important;
  }

  .brand-wordmark b,
  .brand-wordmark i {
    display: inline !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    color: inherit !important;
    font: inherit !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  .brand-wordmark i {
    color: #ff174f !important;
    font-style: normal !important;
  }

  .brand-text > span {
    width: fit-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  @media (max-width: 820px) {
    .brand-text strong.brand-wordmark,
    .brand-wordmark {
      font-size: 20px !important;
    }
  }

  @media (orientation: landscape) and (max-width: 699px) {
    .control-grid,
    .surface-head,
    .qa-hero .surface-head,
    .guide-panel .surface-head,
    .admin-panel .surface-head,
    .ops-hero .surface-head,
    .quote-intel-hero .surface-head,
    .reality-hero .surface-head {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .control-grid > *,
    .surface-head > * {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      grid-column: auto !important;
      grid-row: auto !important;
    }

    .field-grid.four {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .surface-head > .hero-actions,
    .surface-head > .admin-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }


@media (min-width: 1024px) { .cards-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .route-card { height: 100%; display: flex; flex-direction: column; } }
/* Theme contract: this final block owns colour-mode semantics. */
html[data-theme="obsidian"] {
  color-scheme: dark !important;
}

html[data-theme="arctic"] {
  color-scheme: light !important;
}

html[data-theme="obsidian"] body {
  --bf-panel: var(--ck-surface-1);
  --bf-panel-2: var(--ck-surface-2);
  --bf-line: var(--ck-border-default);
  --bf-line-strong: var(--ck-accepted-border);
  --bf-text: var(--ck-text-primary);
  --bf-muted: var(--ck-text-muted);
  --bf-soft: var(--ck-text-disabled);
}

html[data-theme="arctic"] body {
  --bf-panel: var(--ck-surface-1);
  --bf-panel-2: var(--ck-surface-2);
  --bf-line: var(--ck-border-default);
  --bf-line-strong: var(--ck-accepted-border);
  --bf-text: var(--ck-text-primary);
  --bf-muted: var(--ck-text-muted);
  --bf-soft: var(--ck-text-disabled);
  color: var(--bf-text) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ck-bg-grid) 45%, transparent) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(0deg, color-mix(in srgb, var(--ck-bg-grid) 45%, transparent) 1px, transparent 1px) 0 0 / 52px 52px,
    var(--ck-bg-app) !important;
}

html[data-theme="obsidian"] .command-hero,
html[data-theme="arctic"] .command-hero {
  color: var(--ck-text-primary) !important;
  background: var(--ck-header) !important;
  border-color: var(--ck-border-default) !important;
}

.command-hero h1 {
  color: var(--ck-text-primary) !important;
}

.command-hero p,
.command-hero .status-pill {
  color: var(--ck-text-secondary) !important;
}

html[data-theme="arctic"] .surface,
html[data-theme="arctic"] .route-card,
html[data-theme="arctic"] .summary-tile,
html[data-theme="arctic"] .admin-card,
html[data-theme="arctic"] .guide-card,
html[data-theme="arctic"] .qa-kpi,
html[data-theme="arctic"] .ops-kpi,
html[data-theme="arctic"] .quote-kpi,
html[data-theme="arctic"] .reality-kpi,
html[data-theme="arctic"] .rail-inner {
  color: var(--bf-text) !important;
  border-color: var(--bf-line) !important;
  background: var(--bf-panel) !important;
  box-shadow: var(--ck-shadow-raised) !important;
}

html[data-theme="arctic"] .rail {
  background: var(--ck-nav) !important;
  border-right-color: var(--bf-line) !important;
}

html[data-theme="arctic"] .nav-item,
html[data-theme="arctic"] .rail-card {
  color: var(--bf-muted) !important;
  background: var(--bf-panel-2) !important;
  border-color: var(--bf-line) !important;
}

html[data-theme="arctic"] .nav-item strong,
html[data-theme="arctic"] .brand-wordmark {
  color: var(--bf-text) !important;
}

html[data-theme="arctic"] .nav-item em {
  color: var(--bf-muted) !important;
}

html[data-theme="arctic"] .brand-text > span,
html[data-theme="arctic"] .mini-label,
html[data-theme="arctic"] .eyebrow,
html[data-theme="arctic"] label,
html[data-theme="arctic"] .section-kicker,
html[data-theme="arctic"] .hero-kicker,
html[data-theme="arctic"] .view-kicker {
  color: var(--ck-success-text) !important;
}

html[data-theme="arctic"] .brand-text > span {
  background: var(--ck-success-bg) !important;
  border-color: var(--ck-success-border) !important;
}

html[data-theme="arctic"] .surface.intake-card,
html[data-theme="arctic"] .hpi-assist-panel,
html[data-theme="arctic"] .logic-panel,
html[data-theme="arctic"] .sample-panel,
html[data-theme="arctic"] .quote-panel,
html[data-theme="arctic"] .admin-panel,
html[data-theme="arctic"] .case-control-status {
  color: var(--bf-text) !important;
  border-color: var(--bf-line) !important;
  background: var(--bf-panel) !important;
  box-shadow: var(--ck-shadow-raised) !important;
}

html[data-theme="arctic"] .surface .status-pill {
  color: var(--ck-text-secondary) !important;
  border-color: var(--ck-border-default) !important;
  background: var(--ck-surface-2) !important;
}

html[data-theme="arctic"] input::placeholder,
html[data-theme="arctic"] textarea::placeholder {
  color: var(--ck-text-muted) !important;
  opacity: 1 !important;
}

html[data-theme="arctic"] input,
html[data-theme="arctic"] select,
html[data-theme="arctic"] textarea {
  color: var(--bf-text) !important;
  background: var(--ck-surface-1) !important;
  border-color: var(--ck-border-control) !important;
}

html[data-theme="obsidian"] input,
html[data-theme="obsidian"] select,
html[data-theme="obsidian"] textarea {
  color: var(--bf-text) !important;
  background: var(--ck-surface-inset) !important;
  border-color: var(--ck-border-control) !important;
}

.utility-pill {
  min-height: 44px !important;
  cursor: pointer;
  font: inherit;
}

.command-hero .utility-pill {
  min-height: 44px !important;
}

.theme-toggle-btn {
  display: inline-grid !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  color: var(--ck-text-primary) !important;
  border: 1px solid var(--ck-border-control) !important;
}

.guide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#pipeline-left-col > .quote-intel-grid,
#pipeline-right-col > .ops-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

#pipeline-left-col > .quote-intel-grid > *,
#pipeline-right-col > .ops-grid > * {
  grid-column: auto !important;
}

/* Canonical compact and medium navigation compositions. */
@media (max-width: 599px) and (orientation: portrait) {
  body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }

  .app-frame {
    display: block !important;
    min-height: 100dvh !important;
  }

  .rail {
    position: fixed !important;
    z-index: var(--ck-z-nav) !important;
    inset: auto 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ck-border-default) !important;
    background: color-mix(in srgb, var(--ck-nav) 96%, transparent) !important;
    backdrop-filter: blur(18px) !important;
  }

  .rail-inner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .rail .brand-lockup,
  .rail .rail-card,
  .rail .rail-footer {
    display: none !important;
  }

  .rail .nav-stack {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  .rail .nav-item {
    display: grid !important;
    grid-template: "num" 22px "title" auto / minmax(0, 1fr) !important;
    justify-items: center !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 5px 3px !important;
    border: 0 !important;
    border-radius: var(--ck-radius-control) !important;
    background: transparent !important;
    text-align: center !important;
  }

  .rail .nav-item span {
    grid-area: num !important;
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    border-radius: var(--ck-radius-chip) !important;
    font-size: 10px !important;
  }

  .rail .nav-item strong {
    grid-area: title !important;
    display: block !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .rail .nav-item em {
    display: none !important;
  }

  .rail .nav-item.active {
    color: var(--ck-text-primary) !important;
    background: var(--ck-surface-selected) !important;
    box-shadow: inset 0 3px 0 var(--ck-action-primary) !important;
  }

  .workspace {
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 12px 12px 24px !important;
  }

  .command-hero {
    gap: 14px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
  }

  .command-hero h1 {
    font-size: var(--ck-type-display) !important;
    line-height: var(--ck-leading-display) !important;
  }

  .command-hero p {
    font-size: var(--ck-type-compact) !important;
  }

  .command-hero > .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .command-hero #btnRun {
    grid-column: 1 / -1 !important;
  }

  .pill-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 3px !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
  }

  .pill-row > * {
    flex: 0 0 auto !important;
  }
}

@media (min-width: 600px) and (max-width: 839px) and (min-height: 480px) {
  body {
    --rail: 72px !important;
  }

  .app-frame {
    display: grid !important;
    grid-template-columns: var(--rail) minmax(0, 1fr) !important;
    min-height: 100dvh !important;
  }

  .rail {
    position: sticky !important;
    top: 0 !important;
    width: var(--rail) !important;
    max-width: var(--rail) !important;
    height: 100dvh !important;
    padding: 6px !important;
  }

  .rail-inner {
    width: 100% !important;
    height: calc(100dvh - 12px) !important;
    padding: 4px !important;
    gap: 6px !important;
    overflow-y: auto !important;
  }

  .rail .brand-lockup,
  .rail .rail-card,
  .rail .rail-footer {
    display: none !important;
  }

  .rail .nav-stack {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .rail .nav-item {
    display: grid !important;
    grid-template: "num" 28px "title" auto / minmax(0, 1fr) !important;
    justify-items: center !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 66px !important;
    padding: 6px 2px !important;
    text-align: center !important;
  }

  .rail .nav-item span {
    grid-area: num !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
  }

  .rail .nav-item strong {
    grid-area: title !important;
    display: block !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .rail .nav-item em {
    display: none !important;
  }

  .workspace {
    width: 100% !important;
    padding: 16px 16px 32px !important;
  }

  .command-hero {
    padding: 18px !important;
  }

  .command-hero h1 {
    font-size: var(--ck-type-page) !important;
  }

  .control-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

  @media (min-width: 700px) and (max-width: 839px) and (min-height: 480px) {
  .command-hero {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 290px) !important;
    align-items: center !important;
  }

  .command-hero > .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

    .command-hero #btnRun {
      grid-column: 1 / -1 !important;
    }
  }

  /* Product switcher identity adapts without clipping the wordmark. */
  .brand-mark {
    display: none;
  }

  @media (min-width: 1200px) {
  .rail .brand-lockup {
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 4px 2px 16px;
    border: 0;
    border-bottom: 1px solid var(--bf-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bf-text);
    cursor: pointer;
    pointer-events: auto;
    text-align: center;
  }

  .rail .brand-text {
    display: grid;
    justify-items: center;
    min-width: 0;
  }

  .rail .brand-text strong.brand-wordmark,
  .rail .brand-wordmark {
    max-width: 100%;
    font-size: 26px;
    line-height: 1;
    filter: none;
  }
  }

  @media (min-width: 1200px) and (max-height: 820px) {
    .rail .brand-lockup {
      display: grid !important;
      min-height: 44px !important;
      padding: 4px !important;
      place-items: center !important;
    }

    .rail .brand-mark {
      display: block !important;
      font-size: 22px;
      font-weight: var(--ck-weight-bold);
      letter-spacing: -.04em;
    }
  }

  @media (min-width: 600px) and (max-width: 1199px) and (min-height: 480px) {
    .rail .brand-lockup {
      appearance: none;
      display: grid !important;
      width: 100%;
      min-width: 0;
      min-height: 56px;
      padding: 4px;
      place-items: center;
      color: var(--ck-action-primary);
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .rail .brand-mark {
      display: block;
      font-size: 22px;
      font-weight: var(--ck-weight-bold);
      letter-spacing: -.04em;
    }

    .rail .brand-text {
      display: none !important;
    }

    .rail .nav-item {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-areas: "num" "title" !important;
      justify-items: center !important;
      gap: 2px !important;
      padding: 6px 3px !important;
    }

    .rail .nav-item span {
      grid-area: num !important;
    }

    .rail .nav-item strong {
      grid-area: title !important;
      width: 100%;
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
    }

    .rail .nav-item em {
      display: none !important;
    }

    .rail .nav-item strong {
      white-space: nowrap !important;
      word-break: normal;
      overflow-wrap: normal;
      font-size: 9px;
    }

    .rail-inner {
      scrollbar-width: none;
    }

    .rail-inner::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }

  @media (max-width: 599px) and (orientation: portrait) {
    .command-hero,
    .surface-head,
    .control-grid,
    .qa-hero .surface-head,
    .guide-panel .surface-head,
    .admin-panel .surface-head,
    .ops-hero .surface-head,
    .quote-intel-hero .surface-head,
    .reality-hero .surface-head {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .workspace {
      width: 100% !important;
      min-width: 0 !important;
      padding: 12px 12px 88px !important;
    }

    .command-hero > *,
    .surface-head > *,
    .control-grid > * {
      min-width: 0 !important;
      max-width: 100% !important;
    }

    .command-hero h1 {
      font-size: 30px;
      line-height: 1.02;
    }

    .field-grid.four,
    .field-grid.three,
    .field-grid.two,
    .cards-list,
    .qa-grid,
    .ops-grid,
    .quote-intel-grid,
    .reality-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .hero-actions,
    .surface-head > .hero-actions,
    .surface-head > .admin-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero-actions #btnRun,
    .surface-head > .hero-actions #btnRun {
      grid-column: 1 / -1 !important;
    }
  }

  @media (orientation: landscape) and (max-height: 560px) and (max-width: 899px) {
    body {
      overflow-x: hidden;
    }

    .app-frame {
      display: grid !important;
      grid-template-columns: 76px minmax(0, 1fr) !important;
      min-height: 100dvh !important;
    }

    .rail {
      position: sticky !important;
      top: 0 !important;
      width: 76px !important;
      max-width: 76px !important;
      height: 100dvh !important;
      padding: 6px !important;
    }

    .rail-inner {
      width: 100% !important;
      height: calc(100dvh - 12px) !important;
      padding: 4px !important;
      overflow-y: auto !important;
    }

    .rail .brand-lockup,
    .rail .rail-card,
    .rail .rail-footer {
      display: none !important;
    }

    .rail .nav-stack {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 5px !important;
      margin: 0 !important;
    }

    .rail .nav-item {
      display: grid !important;
      grid-template: "num" 26px "title" auto / minmax(0, 1fr) !important;
      justify-items: center !important;
      width: 100% !important;
      min-height: 58px !important;
      padding: 4px 2px !important;
    }

    .rail .nav-item span {
      grid-area: num !important;
      width: 26px !important;
      height: 26px !important;
      min-height: 26px !important;
    }

    .rail .nav-item strong {
      grid-area: title !important;
      display: block !important;
      font-size: 10px !important;
      line-height: 1.1 !important;
      text-align: center !important;
    }

    .rail .nav-item em {
      display: none !important;
    }

    .workspace {
      width: 100% !important;
      min-width: 0 !important;
      padding: 10px 12px 20px !important;
    }

    .command-hero {
      grid-template-columns: minmax(0, 1fr) minmax(220px, 34%) !important;
      padding: 14px !important;
    }

    .command-hero p,
    .command-hero .pill-row .status-pill:not(.utility-pill):not(.live-dot),
    .view-head p,
    .surface-head p,
    .section-subtitle {
      display: none !important;
    }

    .command-hero h1 {
      font-size: 30px;
      line-height: 1;
    }

    .hero-actions,
    .surface-head > .hero-actions,
    .surface-head > .admin-actions,
    .control-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero-actions #btnRun,
    .surface-head > .hero-actions #btnRun {
      grid-column: 1 / -1 !important;
    }

    .field-grid.four,
    .field-grid.three,
    .field-grid.two,
    .cards-list,
    .qa-grid,
    .ops-grid,
    .quote-intel-grid,
    .reality-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .cards-list.route-decision-list {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .surface-head > *,
    .control-grid > * {
      min-width: 0 !important;
      max-width: 100% !important;
    }

    .command-hero #btnRun {
      display: inline-flex !important;
      width: 100%;
      min-height: 48px !important;
      align-items: center !important;
      justify-content: center !important;
    }
  }

  .product-switcher-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin: 8px;
    padding: 10px 12px;
    color: var(--ck-text-secondary);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-2);
    font-size: 12px;
  }

  .product-switcher-theme {
    width: calc(100% - 16px);
    min-height: 44px;
    margin: 0 8px 8px;
    color: var(--ck-text-primary);
    border: 1px solid var(--ck-border-control);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-1);
    font: inherit;
    cursor: pointer;
  }

  @media (min-width: 840px) and (max-width: 1199px) and (min-height: 480px) {
    body {
      --rail: 72px !important;
    }

    .app-frame {
      grid-template-columns: 72px minmax(0, 1fr) !important;
    }

    .rail {
      width: 72px !important;
      max-width: 72px !important;
      padding: 6px !important;
    }

    .rail-inner {
      padding: 4px !important;
    }

    .rail .nav-item {
      min-height: 58px !important;
      padding: 5px 2px !important;
    }

    .rail .nav-item em {
      display: none !important;
    }
  }

  @media (min-width: 1200px) {
    body {
      --rail: 248px !important;
    }

    .app-frame {
      grid-template-columns: 248px minmax(0, 1fr) !important;
      width: 100% !important;
      max-width: none !important;
    }

    .rail {
      width: 248px !important;
      max-width: 248px !important;
      padding: 16px !important;
    }

    .workspace {
      justify-self: center !important;
      width: min(100%, 1600px) !important;
      max-width: 1600px !important;
      padding-right: 32px;
      padding-left: 32px !important;
    }
  }

  .admin-main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin-top: clamp(16px, 2vw, 24px);
  }

  @media (min-width: 1600px) {
    .admin-main-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .qa-workbench {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(17rem, .72fr) minmax(24rem, 1.2fr) minmax(18rem, .8fr);
    gap: clamp(12px, 1.5vw, 22px);
    min-width: 0;
  }

  .qa-region {
    min-width: 0;
    padding: clamp(16px, 1.5vw, 24px);
    border-radius: var(--bf-radius, 8px);
  }

  .qa-list,
  .qa-evidence-facts,
  .qa-selected-issue {
    display: grid;
    gap: 10px;
  }

  .qa-issue-select {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 10px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius, 8px);
    background: var(--surface-card);
    color: var(--bf-text, var(--text));
    text-align: left;
  }

  .qa-issue-select small { grid-column: 2 / -1; color: var(--bf-text, var(--text)); opacity: .82; }
  .qa-issue-select .qa-severity,
  .qa-issue-select .qa-status { color: var(--bf-text, var(--text)); }
  .qa-issue-select[aria-selected="true"] { border-color: var(--bf-action, var(--ck-action-primary)); box-shadow: inset 4px 0 0 var(--bf-action, var(--ck-action-primary)); }
  .qa-issue-select:focus-visible { outline: 3px solid var(--bf-focus, var(--ck-focus)); outline-offset: 3px; }

  .qa-selected-issue,
  .qa-resolution-path,
  .qa-empty-state {
    padding: 14px;
    border: 1px solid var(--bf-line);
    border-radius: var(--bf-radius, 8px);
    background: var(--surface-card);
  }

  .qa-evidence-facts { margin: 0; }
  .qa-evidence-facts div { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--bf-line); }
  .qa-evidence-facts dt { color: var(--bf-muted, var(--muted)); font-size: 12px; font-weight: 800; text-transform: uppercase; }
  .qa-evidence-facts dd { margin: 0; color: var(--bf-text, var(--text)); overflow-wrap: anywhere; }
  .qa-resolution-path { margin-top: 14px; }

  @media (max-width: 1199px) {
    .qa-workbench { grid-template-columns: minmax(0, 1fr); }
  }

  @media (min-width: 2560px) {
    .admin-command { max-width: 1760px; margin-inline: auto; }
    .qa-workbench { grid-template-columns: minmax(18rem, .72fr) minmax(32rem, 1.28fr) minmax(20rem, .8fr); }
  }
/* CarKonnect shared operational components. */
/* Canonical CarKonnect shared primitives. Product layers may compose, not redefine. */
  :where(.ck-visually-hidden) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :where(.ck-button, .ck-icon-button) {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    min-height: var(--ck-control-comfortable);
    padding: 0 var(--ck-space-4);
    border: var(--ck-border-width) solid transparent;
    border-radius: var(--ck-radius-control);
    color: var(--ck-button-secondary-text);
    background: transparent;
    font: var(--ck-weight-card) var(--ck-type-button) / 1 var(--ck-font-sans);
    text-decoration: none;
    cursor: pointer;
    transition:
      color var(--ck-duration-fast) var(--ck-ease-standard),
      border-color var(--ck-duration-fast) var(--ck-ease-standard),
      background-color var(--ck-duration-fast) var(--ck-ease-standard),
      transform var(--ck-duration-instant) var(--ck-ease-standard);
  }

  :where(.ck-button, .ck-icon-button):active:not(:disabled, [aria-disabled="true"]) {
    transform: translateY(1px);
  }

  :where(.ck-button).primary,
  :where(.ck-button)[data-variant="primary"] {
    color: var(--ck-button-primary-text);
    background: var(--ck-button-primary-bg);
  }

  :where(.ck-button).primary:hover:not(:disabled, [aria-disabled="true"]),
  :where(.ck-button)[data-variant="primary"]:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--ck-button-primary-bg-hover);
  }

  :where(.ck-button).primary:active:not(:disabled, [aria-disabled="true"]),
  :where(.ck-button)[data-variant="primary"]:active:not(:disabled, [aria-disabled="true"]) {
    background: var(--ck-button-primary-bg-pressed);
  }

  :where(.ck-button).secondary,
  :where(.ck-button)[data-variant="secondary"] {
    color: var(--ck-button-secondary-text);
    border-color: var(--ck-button-secondary-border);
    background: var(--ck-button-secondary-bg);
  }

  :where(.ck-button).secondary:hover:not(:disabled, [aria-disabled="true"]),
  :where(.ck-button)[data-variant="secondary"]:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--ck-button-secondary-bg-hover);
  }

  :where(.ck-button).danger,
  :where(.ck-button)[data-variant="danger"] {
    color: var(--ck-button-danger-text);
    border-color: var(--ck-danger-border);
    background: var(--ck-button-danger-bg);
  }

  :where(.ck-button).danger:hover:not(:disabled, [aria-disabled="true"]),
  :where(.ck-button)[data-variant="danger"]:hover:not(:disabled, [aria-disabled="true"]) {
    filter: brightness(1.08);
  }

  :where(.ck-button).ghost,
  :where(.ck-button)[data-variant="ghost"],
  :where(.ck-icon-button) {
    color: var(--ck-text-primary);
    background: transparent;
  }

  :where(.ck-button).ghost:hover:not(:disabled, [aria-disabled="true"]),
  :where(.ck-button)[data-variant="ghost"]:hover:not(:disabled, [aria-disabled="true"]),
  :where(.ck-icon-button):hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--ck-button-ghost-bg-hover);
  }

  :where(.ck-button).text,
  :where(.ck-button)[data-variant="text"] {
    min-height: var(--ck-target-compact);
    padding-inline: var(--ck-space-2);
    color: var(--ck-link);
    background: transparent;
  }

  :where(.ck-button).text:hover:not(:disabled, [aria-disabled="true"]),
  :where(.ck-button)[data-variant="text"]:hover:not(:disabled, [aria-disabled="true"]) {
    text-decoration: underline;
    text-underline-offset: .2em;
  }

  :where(.ck-button, .ck-icon-button)[data-selected="true"],
  :where(.ck-button, .ck-icon-button)[aria-pressed="true"] {
    border-color: var(--ck-choice-selected-border);
    background: var(--ck-choice-selected-bg);
    box-shadow: inset 3px 0 0 var(--ck-choice-mark);
  }

  :where(.ck-button, .ck-icon-button):disabled,
  :where(.ck-button, .ck-icon-button)[aria-disabled="true"] {
    color: var(--ck-button-disabled-text);
    border-color: transparent;
    background: var(--ck-button-disabled-bg);
    cursor: not-allowed;
    transform: none;
    opacity: 1;
  }

  :where(.ck-button, .ck-icon-button)[data-loading="true"] {
    cursor: wait;
  }

  :where(.ck-button, .ck-icon-button)[data-loading="true"]::before {
    width: var(--ck-icon-xs);
    height: var(--ck-icon-xs);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--ck-radius-pill);
    content: "";
    animation: ck-spin 800ms linear infinite;
  }

  :where(.ck-icon-button) {
    width: var(--ck-control-comfortable);
    padding: 0;
  }

  :where(.ck-icon-button) > svg,
  :where(.ck-button) > svg {
    width: var(--ck-icon-sm);
    height: var(--ck-icon-sm);
    flex: none;
  }

  :where(.ck-link) {
    color: var(--ck-link);
    font-weight: var(--ck-weight-medium);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
  }

  :where(.ck-link):hover {
    text-decoration-thickness: .14em;
  }

  :where([data-density="pointer"]) {
    --ck-control-min: 40px;
    --ck-control-comfortable: 44px;
  }

  :where([data-density="pointer"]) :where(.ck-button.text, .ck-button[data-variant="text"]) {
    min-height: var(--ck-target-pointer);
  }

  :where(.ck-field) {
    display: grid;
    gap: var(--ck-space-2);
    min-width: 0;
    color: var(--ck-text-primary);
    font-family: var(--ck-font-sans);
  }

  :where(.ck-label) {
    color: var(--ck-text-primary);
    font-size: var(--ck-type-label);
    font-weight: var(--ck-weight-medium);
    line-height: var(--ck-leading-label);
  }

  :where(.ck-required) {
    color: var(--ck-danger-text);
    font-size: var(--ck-type-meta);
    font-weight: var(--ck-weight-card);
  }

  :where(.ck-hint, .ck-meta) {
    max-width: var(--ck-layout-guidance);
    color: var(--ck-text-muted);
    font-size: var(--ck-type-meta);
    font-weight: var(--ck-weight-meta);
    line-height: var(--ck-leading-meta);
  }

  :where(.ck-input, .ck-select, .ck-textarea, .ck-input-shell) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--ck-control-comfortable);
    border: var(--ck-border-width) solid var(--ck-field-border);
    border-radius: var(--ck-radius-control);
    color: var(--ck-field-text);
    background: var(--ck-field-bg);
    font: var(--ck-weight-regular) var(--ck-type-body) / var(--ck-leading-body) var(--ck-font-sans);
    transition:
      border-color var(--ck-duration-fast) var(--ck-ease-standard),
      background-color var(--ck-duration-fast) var(--ck-ease-standard);
  }

  :where(.ck-input, .ck-select, .ck-textarea) {
    padding: calc(var(--ck-space-3) - var(--ck-border-width)) var(--ck-space-3);
  }

  :where(.ck-textarea) {
    min-height: 112px;
    resize: vertical;
  }

  :where(.ck-input, .ck-textarea)::placeholder {
    color: var(--ck-field-placeholder);
    opacity: 1;
  }

  :where(.ck-input, .ck-select, .ck-textarea):hover:not(:disabled, [readonly]) {
    border-color: var(--ck-divider-strong);
  }

  :where(.ck-input, .ck-select, .ck-textarea):focus {
    border-color: var(--ck-field-border-focus);
  }

  :where(.ck-input, .ck-select, .ck-textarea)[aria-invalid="true"],
  :where(.ck-field)[data-state="error"] :where(.ck-input, .ck-select, .ck-textarea, .ck-input-shell) {
    border-color: var(--ck-field-border-error);
    background: var(--ck-field-error-bg);
  }

  :where(.ck-input, .ck-select, .ck-textarea):disabled {
    color: var(--ck-text-disabled);
    border-color: var(--ck-border-subtle);
    background: var(--ck-field-bg-disabled);
    cursor: not-allowed;
    opacity: 1;
  }

  :where(.ck-input, .ck-textarea)[readonly] {
    color: var(--ck-text-primary);
    border-style: dashed;
    background: var(--ck-field-bg-readonly);
    cursor: text;
    user-select: text;
  }

  :where(.ck-field-error) {
    display: flex;
    align-items: flex-start;
    gap: var(--ck-space-2);
    color: var(--ck-danger-text);
    font-size: var(--ck-type-meta);
    font-weight: var(--ck-weight-card);
    line-height: var(--ck-leading-meta);
  }

  :where(.ck-field-error)::before {
    flex: none;
    content: "!";
    width: var(--ck-icon-xs);
    height: var(--ck-icon-xs);
    border: var(--ck-border-width) solid currentColor;
    border-radius: var(--ck-radius-pill);
    font-size: 12px;
    line-height: 14px;
    text-align: center;
  }

  :where(.ck-input-shell) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    overflow: hidden;
  }

  :where(.ck-input-shell) > :where(.ck-prefix, .ck-suffix) {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--ck-space-3);
    color: var(--ck-text-secondary);
    background: var(--ck-surface-2);
    font-size: var(--ck-type-compact);
    font-weight: var(--ck-weight-card);
  }

  :where(.ck-input-shell) > .ck-input {
    min-height: calc(var(--ck-control-comfortable) - (2 * var(--ck-border-width)));
    border: 0;
    border-radius: 0;
    background: transparent;
    outline-offset: calc(-1 * var(--ck-focus-width));
  }

  :where(.ck-choice) {
    position: relative;
    display: inline-grid;
    grid-template-columns: var(--ck-icon-md) minmax(0, 1fr);
    align-items: center;
    gap: var(--ck-space-2);
    min-height: var(--ck-target-touch);
    color: var(--ck-text-primary);
    font: var(--ck-weight-regular) var(--ck-type-body) / var(--ck-leading-body) var(--ck-font-sans);
    cursor: pointer;
  }

  :where(.ck-choice) > input {
    appearance: none;
    width: var(--ck-icon-md);
    height: var(--ck-icon-md);
    min-height: 0;
    margin: 0;
    border: var(--ck-border-width) solid var(--ck-field-border);
    border-radius: var(--ck-radius-chip);
    background: var(--ck-field-bg);
    cursor: inherit;
  }

  :where(.ck-choice) > input[type="radio"] {
    border-radius: var(--ck-radius-pill);
  }

  :where(.ck-choice) > input:checked {
    border-color: var(--ck-choice-selected-border);
    background: var(--ck-choice-mark);
    box-shadow: inset 0 0 0 5px var(--ck-field-bg);
  }

  :where(.ck-choice) > input[type="checkbox"]:checked {
    box-shadow: none;
  }

  :where(.ck-choice) > input[type="checkbox"]:checked::after {
    display: block;
    width: 10px;
    height: 5px;
    margin: 6px 5px;
    border: solid var(--ck-button-primary-text);
    border-width: 0 0 2px 2px;
    content: "";
    transform: rotate(-45deg);
  }

  :where(.ck-choice) > input:disabled {
    border-color: var(--ck-border-subtle);
    background: var(--ck-field-bg-disabled);
    cursor: not-allowed;
  }

  :where(.ck-choice):has(input:disabled) {
    color: var(--ck-text-disabled);
    cursor: not-allowed;
  }

  :where(.ck-toggle) {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--ck-space-3);
    min-height: var(--ck-target-touch);
    color: var(--ck-text-primary);
    font: var(--ck-weight-regular) var(--ck-type-body) / var(--ck-leading-body) var(--ck-font-sans);
    cursor: pointer;
  }

  :where(.ck-toggle) > input {
    appearance: none;
    position: relative;
    width: 48px;
    height: 28px;
    min-height: 0;
    margin: 0;
    border: var(--ck-border-width) solid var(--ck-field-border);
    border-radius: var(--ck-radius-pill);
    background: var(--ck-surface-inset);
    cursor: inherit;
    transition: background-color var(--ck-duration-fast) var(--ck-ease-standard);
  }

  :where(.ck-toggle) > input::after {
    position: absolute;
    inset: 3px auto auto 3px;
    width: 20px;
    height: 20px;
    border-radius: var(--ck-radius-pill);
    background: var(--ck-text-secondary);
    content: "";
    transition: transform var(--ck-duration-fast) var(--ck-ease-standard);
  }

  :where(.ck-toggle) > input:checked {
    border-color: var(--ck-choice-selected-border);
    background: var(--ck-choice-mark);
  }

  :where(.ck-toggle) > input:checked::after {
    background: var(--ck-button-primary-text);
    transform: translateX(20px);
  }

  :where(.ck-segmented) {
    display: inline-flex;
    max-width: 100%;
    padding: var(--ck-space-1);
    border: var(--ck-border-width) solid var(--ck-border-default);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-inset);
  }

  :where(.ck-segmented) > :where(button, .ck-segment) {
    min-height: var(--ck-control-min);
    padding: 0 var(--ck-space-3);
    border: 0;
    border-radius: calc(var(--ck-radius-control) - var(--ck-space-1));
    color: var(--ck-text-secondary);
    background: transparent;
    font: var(--ck-weight-card) var(--ck-type-compact) / 1 var(--ck-font-sans);
    cursor: pointer;
  }

  :where(.ck-segmented) > :where(button, .ck-segment)[aria-checked="true"],
  :where(.ck-segmented) > :where(button, .ck-segment)[aria-pressed="true"] {
    color: var(--ck-text-primary);
    border: var(--ck-border-width) solid var(--ck-choice-selected-border);
    background: var(--ck-choice-selected-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    max-width: 100%;
    min-height: 32px;
    padding: var(--ck-space-1) var(--ck-space-3);
    border: var(--ck-border-width) solid var(--ck-status-border);
    border-radius: var(--ck-radius-pill);
    color: var(--ck-status-text);
    background: var(--ck-status-bg);
    font: var(--ck-weight-card) var(--ck-type-meta) / var(--ck-leading-meta) var(--ck-font-sans);
    white-space: nowrap;
  }

  :where(.status-pill, .pill, .connection-status, .ck-status)::before {
    width: 8px;
    height: 8px;
    flex: none;
    border: var(--ck-border-width) solid currentColor;
    border-radius: var(--ck-radius-pill);
    background: currentColor;
    content: "";
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).good,
  :where(.status-pill, .pill, .connection-status, .ck-status).success,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="success"],
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="ready"] {
    color: var(--ck-success-text);
    border-color: var(--ck-success-border);
    background: var(--ck-success-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).warn,
  :where(.status-pill, .pill, .connection-status, .ck-status).warning,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="warning"],
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="expired"] {
    color: var(--ck-warning-text);
    border-color: var(--ck-warning-border);
    background: var(--ck-warning-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).bad,
  :where(.status-pill, .pill, .connection-status, .ck-status).error,
  :where(.status-pill, .pill, .connection-status, .ck-status).danger,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="danger"],
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="failed"],
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="blocked"] {
    color: var(--ck-danger-text);
    border-color: var(--ck-danger-border);
    background: var(--ck-danger-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).offline,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="offline"],
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="unavailable"],
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="not-run"] {
    color: var(--ck-offline-text);
    border-color: var(--ck-offline-border);
    background: var(--ck-offline-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).pending,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="pending"],
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="processing"] {
    color: var(--ck-pending-text);
    border-color: var(--ck-pending-border);
    background: var(--ck-pending-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).accepted,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="accepted"] {
    color: var(--ck-accepted-text);
    border-color: var(--ck-accepted-border);
    background: var(--ck-accepted-bg);
  }

  :where(.status-pill, .pill, .connection-status, .ck-status).retake,
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="retake"],
  :where(.status-pill, .pill, .connection-status, .ck-status)[data-state="needs-attention"] {
    color: var(--ck-retake-text);
    border-color: var(--ck-retake-border);
    background: var(--ck-retake-bg);
  }

  :where(.ck-badge) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 0 var(--ck-space-2);
    border: var(--ck-border-width) solid var(--ck-status-border);
    border-radius: var(--ck-radius-chip);
    color: var(--ck-status-text);
    background: var(--ck-status-bg);
    font: var(--ck-weight-bold) var(--ck-type-meta) / 1 var(--ck-font-sans);
    font-variant-numeric: tabular-nums;
  }

  :where(.ck-badge)[data-state="danger"] {
    color: var(--ck-danger-text);
    border-color: var(--ck-danger-border);
    background: var(--ck-danger-bg);
  }

  :where(.ck-chip) {
    display: inline-flex;
    align-items: center;
    gap: var(--ck-space-2);
    min-height: var(--ck-target-compact);
    padding: 0 var(--ck-space-3);
    border: var(--ck-border-width) solid var(--ck-choice-selected-border);
    border-radius: var(--ck-radius-chip);
    color: var(--ck-text-primary);
    background: var(--ck-choice-selected-bg);
    font: var(--ck-weight-card) var(--ck-type-compact) / 1 var(--ck-font-sans);
  }

  :where(.ck-chip) > button {
    width: var(--ck-target-pointer);
    min-height: var(--ck-target-pointer);
    margin-right: calc(-1 * var(--ck-space-2));
    padding: 0;
    border: 0;
    border-radius: var(--ck-radius-pill);
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
  }

  :where(.ck-chip) > button:hover {
    background: var(--ck-surface-hover);
  }

  :where(.empty, .ck-empty) {
    min-width: 0;
    padding: var(--ck-space-4);
    border: var(--ck-border-width) dashed var(--ck-empty-border);
    border-radius: var(--ck-radius-control);
    color: var(--ck-text-secondary);
    background: var(--ck-empty-bg);
    font-size: var(--ck-type-compact);
    line-height: var(--ck-leading-compact);
    overflow-wrap: anywhere;
  }

  :where(.ck-alert, .notice) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ck-space-3);
    min-width: 0;
    padding: var(--ck-space-3) var(--ck-space-4);
    border: var(--ck-border-width) solid var(--ck-alert-info-border);
    border-radius: var(--ck-radius-control);
    color: var(--ck-alert-info-text);
    background: var(--ck-alert-info-bg);
    font-size: var(--ck-type-compact);
    line-height: var(--ck-leading-compact);
    overflow-wrap: anywhere;
  }

  :where(.ck-alert, .notice)::before {
    font-weight: var(--ck-weight-bold);
    content: "i";
  }

  :where(.ck-alert, .notice) > :where(div, p) {
    margin: 0;
  }

  :where(.ck-alert, .notice) strong {
    display: block;
    margin-bottom: var(--ck-space-1);
  }

  :where(.ck-alert, .notice).success,
  :where(.ck-alert, .notice)[data-state="success"] {
    color: var(--ck-success-text);
    border-color: var(--ck-success-border);
    background: var(--ck-success-bg);
  }

  :where(.ck-alert, .notice).warning,
  :where(.ck-alert, .notice)[data-state="warning"] {
    color: var(--ck-warning-text);
    border-color: var(--ck-warning-border);
    background: var(--ck-warning-bg);
  }

  :where(.ck-alert, .notice).warning::before {
    content: "!";
  }

  :where(.ck-alert, .notice).error,
  :where(.ck-alert, .notice)[data-state="danger"] {
    color: var(--ck-danger-text);
    border-color: var(--ck-danger-border);
    background: var(--ck-danger-bg);
  }

  :where(.ck-alert, .notice).error::before,
  :where(.ck-alert, .notice)[data-state="danger"]::before {
    content: "!";
  }

  :where(.ck-error-summary) {
    padding: var(--ck-space-4);
    border: 2px solid var(--ck-danger-border);
    border-radius: var(--ck-radius-control);
    color: var(--ck-danger-text);
    background: var(--ck-danger-bg);
  }

  :where(.ck-error-summary) > :first-child {
    margin-top: 0;
  }

  :where(.ck-error-summary) > :last-child {
    margin-bottom: 0;
  }

  :where(.ck-error-summary) a {
    color: inherit;
    font-weight: var(--ck-weight-card);
  }

  :where(.ck-kpi, .quote-kpi, .qa-kpi, .ops-kpi, .reality-kpi) {
    display: grid;
    gap: var(--ck-space-2);
    min-width: 0;
    padding: var(--ck-space-4);
    border: var(--ck-border-width) solid var(--ck-kpi-border);
    border-radius: var(--ck-radius-card);
    color: var(--ck-text-primary);
    background: var(--ck-kpi-bg);
  }

  :where(.ck-kpi, .quote-kpi, .qa-kpi, .ops-kpi, .reality-kpi) > span {
    color: var(--ck-text-muted);
    font-size: var(--ck-type-meta);
    font-weight: var(--ck-weight-card);
    line-height: var(--ck-leading-meta);
  }

  :where(.ck-kpi, .quote-kpi, .qa-kpi, .ops-kpi, .reality-kpi) > strong {
    color: var(--ck-text-primary);
    font-size: var(--ck-type-kpi);
    font-weight: var(--ck-weight-title);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  :where(.ck-kpi) > :where(small, em) {
    color: var(--ck-success-text);
    font-size: var(--ck-type-meta);
    font-style: normal;
    font-weight: var(--ck-weight-card);
  }

  :where(.ck-progress) {
    display: grid;
    gap: var(--ck-space-2);
    color: var(--ck-text-primary);
    font-size: var(--ck-type-meta);
    font-weight: var(--ck-weight-card);
  }

  :where(.ck-progress) progress {
    appearance: none;
    width: 100%;
    height: 12px;
    border: 0;
    border-radius: var(--ck-radius-pill);
    overflow: hidden;
    background: var(--ck-progress-track);
  }

  :where(.ck-progress) progress::-webkit-progress-bar {
    background: var(--ck-progress-track);
  }

  :where(.ck-progress) progress::-webkit-progress-value {
    border-radius: var(--ck-radius-pill);
    background: var(--ck-progress-value);
  }

  :where(.ck-progress) progress::-moz-progress-bar {
    border-radius: var(--ck-radius-pill);
    background: var(--ck-progress-value);
  }

  :where(.ck-toast, .toast) {
    z-index: var(--ck-z-toast);
    max-width: min(420px, calc(100vw - 24px));
    padding: var(--ck-space-3) var(--ck-space-4);
    border: var(--ck-border-width) solid var(--ck-border-control);
    border-radius: var(--ck-radius-control);
    color: var(--ck-toast-text);
    background: var(--ck-toast-bg);
    box-shadow: var(--ck-shadow-floating);
    font-size: var(--ck-type-compact);
    line-height: var(--ck-leading-compact);
    overflow-wrap: anywhere;
  }

  :where(.ck-backdrop, .ck-modal-overlay, .modal-overlay) {
    position: fixed;
    inset: 0;
    z-index: var(--ck-z-modal);
    display: grid;
    place-items: center;
    padding: var(--ck-space-3);
    background: var(--ck-dialog-backdrop);
  }

  :where(.ck-dialog, .ck-modal, .modal) {
    box-sizing: border-box;
    width: min(640px, calc(100vw - 24px));
    max-width: min(720px, calc(100vw - 24px));
    max-height: min(90dvh, 900px);
    padding: var(--ck-space-6);
    border: var(--ck-border-width) solid var(--ck-dialog-border);
    border-radius: var(--ck-radius-modal);
    color: var(--ck-text-primary);
    background: var(--ck-dialog-bg);
    box-shadow: var(--ck-shadow-floating);
    overflow: auto;
  }

  :where(dialog.ck-dialog, dialog.ck-sheet)::backdrop {
    background: var(--ck-dialog-backdrop);
  }

  :where(.ck-dialog, .ck-sheet) > :where(header, footer) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ck-space-3);
  }

  :where(.ck-dialog, .ck-sheet) > footer {
    justify-content: flex-end;
    margin-top: var(--ck-space-6);
  }

  :where(.ck-sheet) {
    box-sizing: border-box;
    width: min(480px, 100vw);
    max-width: 100%;
    height: min(100dvh, 900px);
    max-height: 100dvh;
    margin: 0 0 0 auto;
    padding: var(--ck-space-6);
    border: 0;
    border-left: var(--ck-border-width) solid var(--ck-dialog-border);
    border-radius: var(--ck-radius-panel) 0 0 var(--ck-radius-panel);
    color: var(--ck-text-primary);
    background: var(--ck-sheet-bg);
    box-shadow: var(--ck-shadow-floating);
  }

  :where(.ck-tooltip-wrap) {
    position: relative;
    display: inline-flex;
  }

  :where(.ck-tooltip) {
    position: absolute;
    inset: calc(100% + var(--ck-space-2)) auto auto 50%;
    z-index: var(--ck-z-dropdown);
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
    padding: var(--ck-space-2) var(--ck-space-3);
    border: var(--ck-border-width) solid var(--ck-border-default);
    border-radius: var(--ck-radius-chip);
    color: var(--ck-tooltip-text);
    background: var(--ck-tooltip-bg);
    box-shadow: var(--ck-shadow-raised);
    font-size: var(--ck-type-meta);
    line-height: var(--ck-leading-meta);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition:
      opacity var(--ck-duration-fast) var(--ck-ease-standard),
      transform var(--ck-duration-fast) var(--ck-ease-standard);
  }

  :where(.ck-tooltip-wrap):where(:hover, :focus-within) > .ck-tooltip,
  :where(.ck-tooltip)[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  :where(.ck-table-wrap) {
    max-width: 100%;
    border: var(--ck-border-width) solid var(--ck-border-default);
    border-radius: var(--ck-radius-control);
    overflow: auto;
  }

  :where(.ck-table) {
    width: 100%;
    border-collapse: collapse;
    color: var(--ck-text-primary);
    background: var(--ck-table-row-bg);
    font: var(--ck-weight-regular) var(--ck-type-compact) / var(--ck-leading-compact) var(--ck-font-sans);
  }

  :where(.ck-table) th {
    position: sticky;
    top: 0;
    z-index: var(--ck-z-dropdown);
    max-width: 24ch;
    padding: var(--ck-space-3);
    color: var(--ck-text-secondary);
    background: var(--ck-table-header-bg);
    font-weight: var(--ck-weight-card);
    text-align: left;
  }

  :where(.ck-table) :where(th, td) {
    border-bottom: var(--ck-border-width) solid var(--ck-table-divider);
    vertical-align: middle;
  }

  :where(.ck-table) td {
    padding: var(--ck-space-3);
  }

  :where(.ck-table) tbody tr:hover {
    background: var(--ck-table-row-hover-bg);
  }

  :where(.ck-table) tbody tr[aria-selected="true"] {
    background: var(--ck-table-row-selected-bg);
    box-shadow: inset 3px 0 0 var(--ck-choice-mark);
  }

  :where(.ck-table) tbody tr[data-state="error"] {
    color: var(--ck-danger-text);
    background: var(--ck-table-row-error-bg);
  }

  :where(.ck-table) tbody tr[data-expanded="true"] {
    background: var(--ck-table-row-expanded-bg);
  }

  :where(.ck-operational-list) {
    display: grid;
    gap: var(--ck-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(.ck-operational-row) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ck-space-3);
    min-height: var(--ck-control-comfortable);
    padding: var(--ck-space-2) var(--ck-space-3);
    border: var(--ck-border-width) solid var(--ck-table-divider);
    border-radius: var(--ck-radius-control);
    color: var(--ck-text-primary);
    background: var(--ck-table-row-bg);
    font-size: var(--ck-type-compact);
  }

  :where(.ck-operational-row)[aria-selected="true"] {
    border-color: var(--ck-choice-selected-border);
    background: var(--ck-table-row-selected-bg);
    box-shadow: inset 3px 0 0 var(--ck-choice-mark);
  }

  :where(.ck-operational-row) strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :where(.ck-thumbnail) {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    min-width: 0;
    border: var(--ck-border-width) solid var(--ck-border-default);
    border-radius: var(--ck-radius-control);
    color: var(--ck-text-muted);
    background: var(--ck-thumbnail-bg);
    overflow: hidden;
  }

  :where(.ck-thumbnail) > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  :where(.ck-thumbnail)[data-state="missing"]::before {
    font-size: var(--ck-type-meta);
    content: "Image unavailable";
  }

  :where(.ck-upload) {
    position: relative;
    display: grid;
    place-items: center;
    gap: var(--ck-space-2);
    min-height: 144px;
    padding: var(--ck-space-6);
    border: 2px dashed var(--ck-upload-border);
    border-radius: var(--ck-radius-control);
    color: var(--ck-text-secondary);
    background: var(--ck-upload-bg);
    text-align: center;
    cursor: pointer;
  }

  :where(.ck-upload) .ck-meta {
    color: var(--ck-text-secondary);
  }

  :where(.ck-upload):where(:hover, :focus-within),
  :where(.ck-upload)[data-state="active"] {
    border-color: var(--ck-choice-selected-border);
    background: var(--ck-upload-active-bg);
  }

  :where(.ck-upload)[data-state="error"] {
    color: var(--ck-danger-text);
    border-color: var(--ck-danger-border);
    background: var(--ck-danger-bg);
  }

  :where(.ck-upload) input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    opacity: 0;
  }

  :where(.ck-skeleton) {
    display: block;
    min-height: 1em;
    border-radius: var(--ck-radius-chip);
    background: linear-gradient(90deg, var(--ck-skeleton-start), var(--ck-skeleton-end), var(--ck-skeleton-start));
    background-size: 200% 100%;
    animation: ck-skeleton 1.4s var(--ck-ease-standard) infinite;
  }

  @keyframes ck-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes ck-skeleton {
    to {
      background-position: -200% 0;
    }
  }

  /* Canonical adaptive-shell structure. Product layers only choose composition. */
  :where(.ck-shell) {
    min-width: 0;
    min-height: 100dvh;
    color: var(--ck-text-primary);
    background: var(--ck-bg-app);
  }

  :where(.ck-shell__content, .ck-shell__main) {
    min-width: 0;
  }

  :where(.ck-shell__navigation) {
    overscroll-behavior: contain;
  }

  :where(.ck-shell__navigation) :where(a, button):focus-visible {
    outline: var(--ck-focus-width) solid var(--ck-focus);
    outline-offset: var(--ck-focus-offset);
  }

  @media (max-width: 599px) {
    :where(.ck-backdrop, .ck-modal-overlay, .modal-overlay) {
      align-items: end;
      padding: 0;
    }

    :where(.ck-dialog, .ck-modal, .modal, .ck-sheet) {
      width: 100%;
      max-width: none;
      max-height: calc(100dvh - env(safe-area-inset-top));
      margin: auto 0 0;
      padding-bottom: max(var(--ck-space-6), env(safe-area-inset-bottom));
      border-width: var(--ck-border-width) 0 0;
      border-radius: var(--ck-radius-sheet) var(--ck-radius-sheet) 0 0;
    }

    :where(.ck-operational-row) {
      min-height: var(--ck-target-touch);
    }

    :where(.ck-tooltip) {
      inset: calc(100% + var(--ck-space-2)) 0 auto auto;
      transform: translateY(-4px);
    }

    :where(.ck-tooltip-wrap):where(:hover, :focus-within) > .ck-tooltip,
    :where(.ck-tooltip)[data-open="true"] {
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.ck-button, .ck-icon-button)[data-loading="true"]::before,
    :where(.ck-skeleton) {
      animation: none !important;
    }

    :where(.ck-tooltip) {
      transform: translate(-50%, 0);
    }
  }
/* BuyerFinder ranked-route decision workspace. */
/* BuyerFinder ranked-route decision workspace. */
.route-decision-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ck-space-4);
  align-items: start;
  min-width: 0;
  container-type: inline-size;
}

.route-inspector-resize {
  display: none;
}

.route-decision-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ck-space-3);
  min-width: 0;
}

.route-decision-list .route-card {
  height: auto;
  min-width: 0;
  padding: var(--ck-space-4);
  border: 1px solid var(--ck-border-default);
  border-left: 4px solid transparent;
  background: var(--ck-surface-1);
  box-shadow: none;
  cursor: pointer;
  transition:
    border-color var(--ck-duration-fast) var(--ck-ease-standard),
    background-color var(--ck-duration-fast) var(--ck-ease-standard),
    box-shadow var(--ck-duration-fast) var(--ck-ease-standard);
}

.route-decision-list .route-card::before {
  content: none;
}

.route-decision-list .route-card:hover {
  transform: none;
  border-color: var(--ck-divider-strong);
  background: var(--ck-surface-hover);
}

.route-decision-list .route-card.selected {
  border-color: var(--ck-action-primary);
  border-left-color: var(--ck-action-primary);
  background: var(--ck-surface-selected);
  box-shadow: var(--ck-shadow-raised);
}

.route-decision-list .route-card:focus-visible {
  outline: var(--ck-focus-width) solid var(--ck-focus);
  outline-offset: 2px;
}

.route-decision-list .route-top {
  grid-template-columns: 44px minmax(0, 1fr) max-content;
  gap: var(--ck-space-3);
}

.route-decision-list .route-title {
  align-items: flex-start;
}

.route-decision-list .route-title strong {
  font-size: var(--ck-type-section);
  line-height: var(--ck-leading-section);
}

.route-category-badge,
.route-selection-label,
.route-confidence {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border: 1px solid var(--ck-border-control);
  border-radius: var(--ck-radius-chip);
  color: var(--ck-text-secondary);
  background: var(--ck-surface-2);
  font-size: var(--ck-type-label);
  font-weight: var(--ck-weight-bold);
  line-height: 1;
}

.route-selection-label {
  display: none;
  color: var(--ck-text-primary);
  border-color: var(--ck-action-primary);
  background: var(--ck-surface-selected);
}

.route-card.selected .route-selection-label {
  display: inline-flex;
}

.route-confidence-good {
  color: var(--ck-text-primary);
  border-color: var(--ck-success-border);
  background: var(--ck-success-bg);
}

.route-confidence-warn {
  color: var(--ck-text-primary);
  border-color: var(--ck-warning-border);
  background: var(--ck-warning-bg);
}

.route-row-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--ck-space-3);
  overflow: hidden;
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-control);
  background: var(--ck-border-subtle);
}

.route-row-fact {
  min-width: 0;
  padding: 10px 12px;
  background: var(--ck-surface-2);
}

.route-row-fact span,
.route-inspector-stat span,
.route-factor-copy span,
.route-inspector-section > span {
  display: block;
  color: var(--ck-text-muted);
  font-size: var(--ck-type-label);
  font-weight: var(--ck-weight-bold);
  line-height: var(--ck-leading-compact);
  text-transform: uppercase;
}

.route-row-fact strong,
.route-inspector-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--ck-text-primary);
  font-size: var(--ck-type-compact);
  line-height: var(--ck-leading-body);
  overflow-wrap: anywhere;
}

.route-review-button {
  width: 100%;
  margin-top: var(--ck-space-3);
}

.route-card.selected .route-review-button {
  display: none;
}

.route-card-mobile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ck-space-2);
  margin-top: var(--ck-space-3);
}

.route-card-mobile-actions > * {
  width: 100%;
}

.route-action-button {
  display: inline-flex;
  min-width: 0;
  min-height: var(--ck-control-min);
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--ck-radius-control);
  font: inherit;
  font-size: var(--ck-type-compact);
  font-weight: var(--ck-weight-bold);
  line-height: var(--ck-leading-compact);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.route-action-primary {
  color: var(--ck-button-primary-text);
  border-color: var(--ck-action-primary);
  background: var(--ck-button-primary-bg);
}

.route-action-primary:hover {
  background: var(--ck-action-primary-hover);
}

.route-action-secondary {
  color: var(--ck-button-secondary-text);
  border-color: var(--ck-button-secondary-border);
  background: var(--ck-button-secondary-bg);
}

.route-action-secondary:hover {
  background: var(--ck-surface-hover);
}

.route-action-button:focus-visible {
  outline: var(--ck-focus-width) solid var(--ck-focus);
  outline-offset: 2px;
}

.route-decision-list .phase10-card-detail div {
  border-color: var(--ck-border-subtle);
  background: var(--ck-surface-2);
}

.route-decision-list .phase10-card-detail b {
  color: var(--ck-link);
}

.route-decision-list .phase10-card-detail ul {
  color: var(--ck-text-secondary);
}

.route-evidence-inspector {
  min-width: 0;
  padding: var(--ck-space-5);
  border: 1px solid var(--ck-border-default);
  border-radius: var(--ck-radius-panel);
  background: var(--ck-surface-1);
  box-shadow: var(--ck-shadow-raised);
}

.route-evidence-inspector.is-empty {
  min-height: 240px;
}

.route-inspector-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ck-space-3);
  align-items: start;
  padding-bottom: var(--ck-space-4);
  border-bottom: 1px solid var(--ck-border-subtle);
}

.route-inspector-head h3 {
  margin: 4px 0 0;
  color: var(--ck-text-primary);
  font-size: var(--ck-type-section);
  line-height: var(--ck-leading-section);
}

.route-inspector-head p {
  margin: 6px 0 0;
  color: var(--ck-text-secondary);
}

.route-inspector-score {
  display: grid;
  width: 64px;
  min-height: 64px;
  place-items: center;
  border: 1px solid var(--ck-action-primary);
  border-radius: var(--ck-radius-control);
  color: var(--ck-text-primary);
  background: var(--ck-surface-selected);
  font-size: var(--ck-type-title);
  font-weight: var(--ck-weight-bold);
}

.route-inspector-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ck-space-2);
  margin-top: var(--ck-space-4);
}

.route-inspector-stat {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-control);
  background: var(--ck-surface-2);
}

.route-inspector-section {
  margin-top: var(--ck-space-4);
}

.route-inspector-section > p {
  margin: 8px 0 0;
  color: var(--ck-text-secondary);
  line-height: var(--ck-leading-body);
}

.route-factor-list {
  display: grid;
  gap: var(--ck-space-2);
  margin-top: 10px;
}

.route-factor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ck-space-3);
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-control);
  background: var(--ck-surface-2);
}

.route-factor-copy strong {
  display: block;
  margin-top: 3px;
  color: var(--ck-text-secondary);
  font-size: var(--ck-type-compact);
  line-height: var(--ck-leading-body);
}

.route-factor-score {
  min-width: 48px;
  color: var(--ck-text-primary);
  font-size: var(--ck-type-body);
  font-weight: var(--ck-weight-bold);
  text-align: right;
}

.route-inspector-list {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--ck-text-secondary);
}

.route-inspector-list li + li {
  margin-top: 6px;
}

.route-inspector-warning {
  margin-top: var(--ck-space-4);
  padding: 12px 14px;
  border: 1px solid var(--ck-warning-border);
  border-radius: var(--ck-radius-control);
  color: var(--ck-warning-text);
  background: var(--ck-warning-bg);
}

.route-inspector-warning strong {
  display: block;
  margin-bottom: 4px;
}

.route-inspector-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ck-space-2);
  margin-top: var(--ck-space-4);
  padding-top: var(--ck-space-4);
  border-top: 1px solid var(--ck-border-subtle);
}

.route-inspector-actions > * {
  width: 100%;
}

@media (min-width: 840px) and (min-height: 480px) {
  .route-decision-workspace {
    grid-template-columns: minmax(0, 1fr) 44px minmax(300px, var(--route-inspector-width, 38%));
    gap: var(--ck-space-2);
  }

  .route-inspector-resize {
    position: sticky;
    top: var(--ck-space-4);
    display: block;
    width: 44px;
    height: min(72vh, 42rem);
    min-height: 12rem;
    padding: 0;
    border: 0;
    border-radius: var(--ck-radius-pill);
    background: transparent;
    cursor: col-resize;
    touch-action: none;
  }

  .route-inspector-resize::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 21px;
    width: 2px;
    border-radius: var(--ck-radius-pill);
    background: var(--ck-border-default);
    content: "";
  }

  .route-inspector-resize:hover::after,
  .route-inspector-resize:focus-visible::after,
  .route-inspector-resize.is-resizing::after {
    background: var(--ck-action-primary);
  }

  .route-evidence-inspector {
    position: sticky;
    top: var(--ck-space-4);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    scrollbar-gutter: stable;
  }

  .route-decision-list .route-card > .route-reason,
  .route-decision-list .route-card > .chip-row,
  .route-decision-list .route-card > .phase10-card-detail,
  .route-decision-list .route-card > .route-card-mobile-actions {
    display: none;
  }
}

@media (max-width: 839px), (max-width: 899px) and (max-height: 479px) {
  .route-evidence-inspector {
    display: none;
  }

  .route-decision-list .route-card:not(.selected) > .route-reason,
  .route-decision-list .route-card:not(.selected) > .chip-row,
  .route-decision-list .route-card:not(.selected) > .phase10-card-detail,
  .route-decision-list .route-card:not(.selected) > .route-card-mobile-actions {
    display: none;
  }

  .route-decision-list .route-card:not(.selected) .route-row-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-decision-list .route-card:not(.selected) .route-row-fact:nth-child(n + 3) {
    display: none;
  }
}

@media (max-width: 479px) {
  .pill-row > span.status-pill:not(:first-child) {
    display: none !important;
  }

  .route-decision-list .route-top {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .route-decision-list .score-pill {
    grid-column: 2;
    justify-self: start;
  }

  .route-row-facts,
  .route-inspector-stats,
  .route-inspector-actions,
  .route-card-mobile-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-decision-list .route-card {
    transition: none;
  }
}

/* Milestone 7 keeps the ranked decision surface ahead of supporting diagnostics. */
.result-stage {
  gap: var(--ck-space-3);
}

.result-top {
  padding: var(--ck-space-4);
}

.result-top h2 {
  font-size: var(--ck-type-title);
}

.summary-deck {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ck-space-2);
}

.summary-tile {
  min-height: 0;
  padding: 10px 12px;
}

.summary-tile strong {
  margin-top: 4px;
  font-size: var(--ck-type-body);
  line-height: var(--ck-leading-body);
}

.route-decision-heading {
  display: flex;
  gap: var(--ck-space-4);
  align-items: end;
  justify-content: space-between;
  margin-top: var(--ck-space-2);
}

.route-decision-heading h3 {
  margin: 3px 0 0;
  color: var(--ck-text-primary);
  font-size: var(--ck-type-section);
}

.route-decision-heading p {
  max-width: 60rem;
  margin: 5px 0 0;
  color: var(--ck-text-secondary);
}

.route-count-label {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--ck-border-control);
  border-radius: var(--ck-radius-chip);
  color: var(--ck-text-primary);
  background: var(--ck-surface-2);
  font-size: var(--ck-type-label);
  white-space: nowrap;
}

.route-price-reality-bridge {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--ck-space-2);
  align-items: stretch;
  padding: var(--ck-space-3);
  border: 1px solid var(--ck-border-default);
  border-left: 4px solid var(--ck-product-buyerfinder-accent);
  border-radius: var(--ck-radius-panel);
  background: var(--ck-surface-1);
}

.route-price-reality-bridge > div {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--ck-border-subtle);
}

.route-price-reality-bridge span,
.route-price-reality-bridge strong {
  display: block;
}

.route-price-reality-bridge span {
  color: var(--ck-text-muted);
  font-size: var(--ck-type-label);
  font-weight: var(--ck-weight-bold);
  text-transform: uppercase;
}

.route-price-reality-bridge strong {
  margin-top: 4px;
  color: var(--ck-text-primary);
  overflow-wrap: anywhere;
}

.route-card-evidence {
  display: none;
}

.route-factor-score.is-missing {
  color: var(--ck-text-muted);
  font-size: var(--ck-type-label);
}

.chip-live-quote {
  color: var(--ck-success-text);
  border-color: var(--ck-success-border);
  background: var(--ck-success-bg);
  font-weight: var(--ck-weight-bold);
}

.route-override-panel > summary {
  display: flex;
  min-height: var(--ck-control-touch);
  gap: var(--ck-space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--ck-space-4);
  color: var(--ck-text-primary);
  cursor: pointer;
}

.route-override-panel > summary strong,
.route-override-panel > summary span {
  display: block;
}

.route-override-content {
  padding: 0 var(--ck-space-4) var(--ck-space-4);
}

@media (max-width: 839px), (max-width: 899px) and (max-height: 479px) {
  .result-top .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-top .hero-actions button:last-child,
  .summary-deck {
    display: none;
  }

  .route-decision-heading {
    align-items: start;
  }

  .route-decision-list .route-card.selected .route-card-evidence {
    display: block;
    margin-top: var(--ck-space-3);
    border-top: 1px solid var(--ck-border-subtle);
  }

  .route-card-evidence summary {
    min-height: var(--ck-control-touch);
    padding: 12px 0;
    color: var(--ck-link);
    font-weight: var(--ck-weight-bold);
    cursor: pointer;
  }

  .route-card-evidence ul {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 1px;
    overflow: hidden;
    border: 1px solid var(--ck-border-subtle);
    border-radius: var(--ck-radius-control);
    background: var(--ck-border-subtle);
    list-style: none;
  }

  .route-card-evidence li {
    display: flex;
    gap: var(--ck-space-3);
    justify-content: space-between;
    padding: 10px 12px;
    color: var(--ck-text-secondary);
    background: var(--ck-surface-2);
  }

  .route-price-reality-bridge {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-price-reality-bridge > div {
    border-right: 0;
    border-bottom: 1px solid var(--ck-border-subtle);
  }
}

@media (max-width: 599px), (max-width: 899px) and (max-height: 479px) {
  .result-top {
    padding: var(--ck-space-3);
  }

  .result-top h2 {
    font-size: var(--ck-type-section);
  }

  .result-top p {
    font-size: var(--ck-type-compact);
  }

  .route-decision-heading p {
    display: none;
  }

  .result-top .hero-actions,
  #warningsBox {
    display: none;
  }
}

.route-exclusion-list {
  margin-top: var(--ck-space-3);
  padding: var(--ck-space-3);
  border: 1px solid var(--ck-warning-border);
  border-radius: var(--ck-radius-control);
  background: var(--ck-warning-bg);
}

.route-exclusion-list > strong {
  color: var(--ck-text-primary);
}

.route-exclusion-list ul {
  display: grid;
  gap: var(--ck-space-2);
  margin: var(--ck-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.route-exclusion-list li {
  display: grid;
  grid-template-columns: minmax(120px, .4fr) minmax(0, 1fr);
  gap: 4px var(--ck-space-3);
  padding: 10px 12px;
  color: var(--ck-text-secondary);
  background: var(--ck-surface-2);
}

.route-exclusion-list li span,
.route-exclusion-list li b {
  color: var(--ck-text-primary);
}

.route-exclusion-list li em {
  grid-column: 2;
  font-size: var(--ck-type-label);
  font-style: normal;
}

/* Milestone 7 intake and duplicate-case states use the canonical semantic palette. */
.required-information-panel {
  position: sticky;
  top: var(--ck-space-4);
}

.required-information-panel .surface-head {
  align-items: start;
}

.required-information-panel .surface-head > strong {
  min-width: 64px;
  color: var(--ck-text-primary);
  font-size: var(--ck-type-section);
  text-align: right;
}

.required-information-list {
  display: grid;
  gap: 1px;
  margin: 0 var(--ck-space-4) var(--ck-space-4);
  overflow: hidden;
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-control);
  background: var(--ck-border-subtle);
}

.required-information-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--ck-space-2);
  align-items: center;
  min-height: var(--ck-control-touch);
  padding: 8px 12px;
  color: var(--ck-text-secondary);
  background: var(--ck-surface-2);
}

.required-information-row > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: var(--ck-weight-bold);
}

.required-information-row.is-complete > span {
  color: var(--ck-success-text);
}

.required-information-row.is-missing > span {
  color: var(--ck-danger-text);
}

.required-information-row strong {
  color: var(--ck-text-primary);
}

.required-information-row em {
  color: var(--ck-text-muted);
  font-size: var(--ck-type-label);
  font-style: normal;
}

.required-summary {
  margin: 0 0 var(--ck-space-3);
  padding: var(--ck-space-3);
  border: 1px solid var(--ck-border-default);
  border-left: 4px solid var(--ck-warning-border);
  border-radius: var(--ck-radius-control);
  color: var(--ck-text-secondary);
  background: var(--ck-warning-bg);
}

.required-summary.is-complete {
  border-left-color: var(--ck-success-border);
  background: var(--ck-success-bg);
}

.required-summary strong {
  display: block;
  color: var(--ck-text-primary);
}

.required-summary p {
  margin: 4px 0 0;
  color: var(--ck-warning-text);
}

.required-summary.is-complete p {
  color: var(--ck-success-text);
}

.duplicate-case-actions {
  display: grid;
  gap: var(--ck-space-3);
  margin-top: var(--ck-space-3);
  padding-top: var(--ck-space-3);
  border-top: 1px solid var(--ck-border-subtle);
}

.duplicate-case-actions label {
  display: grid;
  gap: var(--ck-space-2);
  color: var(--ck-text-primary);
  font-weight: var(--ck-weight-bold);
}

.duplicate-override-choice {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.duplicate-override-choice input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
}

.existing-case-detail {
  padding: var(--ck-space-3);
  border: 1px solid var(--ck-border-default);
  border-radius: var(--ck-radius-control);
  color: var(--ck-text-secondary);
  background: var(--ck-surface-2);
}

.existing-case-detail p {
  margin: 4px 0 0;
}

body[data-active-view="results"] .command-hero {
  display: none;
}

@media (max-width: 839px) {
  .required-information-panel {
    position: static;
  }
}

@media (min-width: 840px) and (max-width: 1199px) {
  .rail .brand-text {
    display: none;
  }

  .rail .brand-mark {
    display: block;
  }
}

@media (max-width: 599px), (max-width: 899px) and (max-height: 479px) {
  .required-information-panel {
    display: none;
  }

  .route-decision-heading {
    gap: var(--ck-space-2);
  }

  .route-decision-heading .status-pill {
    flex: 0 0 auto;
  }
}
/* BuyerFinder operational decision workspaces. */
/* BuyerFinder Price Reality, quote comparison and QA decision surfaces. */
.mobile-intake-guide,
.mobile-intake-actions {
  display: none;
}

.product-switcher-trigger {
  appearance: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.product-switcher {
  position: fixed;
  top: var(--ck-space-4);
  left: calc(var(--rail, 248px) + var(--ck-space-4));
  z-index: 60;
  display: none;
  width: min(23rem, calc(100vw - var(--rail, 248px) - 32px));
  padding: var(--ck-space-2);
  border: 1px solid var(--ck-border-strong);
  border-radius: var(--ck-radius-panel);
  background: var(--ck-surface-1);
  box-shadow: var(--ck-shadow-floating);
}

.product-switcher.show {
  display: grid;
}

.product-switcher a {
  display: grid;
  gap: 2px;
  min-height: var(--ck-control-touch);
  padding: var(--ck-space-3);
  border: 1px solid transparent;
  border-radius: var(--ck-radius-control);
  color: var(--ck-text-primary);
  text-decoration: none;
}

.product-switcher a:hover,
.product-switcher a:focus-visible,
.product-switcher a.is-current {
  border-color: var(--ck-border-control);
  background: var(--ck-surface-2);
}

.product-switcher a span {
  color: var(--ck-text-muted);
  font-size: var(--ck-type-meta);
}

.intake-head-state {
  display: grid;
  gap: var(--ck-space-2);
  justify-items: end;
}

.draft-status {
  color: var(--ck-text-muted);
  font-size: var(--ck-type-meta);
  font-weight: var(--ck-weight-semibold);
}

.draft-status.is-saving {
  color: var(--ck-info-text);
}

.draft-status.is-saved {
  color: var(--ck-success-text);
}

.draft-status.is-failed {
  color: var(--ck-danger-text);
}

#vehicleForm [aria-invalid="true"] {
  border-color: var(--ck-danger-border) !important;
  box-shadow: 0 0 0 2px var(--ck-danger-bg);
}

body.modal-open {
  overflow: hidden;
}

.mobile-intake-track {
  height: 6px;
  overflow: hidden;
  border-radius: var(--ck-radius-pill);
  background: var(--ck-surface-2);
}

.mobile-intake-track span {
  display: block;
  width: 33.333%;
  height: 100%;
  background: var(--ck-action-primary);
  transition: width var(--ck-duration-standard) var(--ck-ease-standard);
}

@media (max-width: 599px), (max-width: 899px) and (max-height: 479px) {
  .product-switcher {
    top: auto;
    right: 12px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
  }

  .intake-head-state {
    width: 100%;
    justify-items: start;
  }

  .modal-overlay {
    align-items: stretch !important;
    padding: 0 !important;
  }

  .modal-overlay .modal {
    width: 100% !important;
    max-width: none !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0;
    border-radius: 0 !important;
  }

  .command-hero {
    gap: var(--ck-space-3);
    padding: var(--ck-space-4);
  }

  .command-hero .hero-copy > p {
    display: none;
  }

  .command-hero h1 {
    margin-top: var(--ck-space-3);
    font-size: var(--ck-type-page);
  }

  .command-hero .pill-row > .status-pill:nth-of-type(2),
  .command-hero .pill-row > .status-pill:nth-of-type(3) {
    display: none;
  }

  .command-hero > .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-hero #btnRun {
    display: none;
  }

  .mobile-intake-guided .mobile-intake-guide {
    display: grid;
    gap: var(--ck-space-2);
    margin: 0 var(--ck-space-4);
    padding: var(--ck-space-3) 0;
    border-bottom: 1px solid var(--ck-border-subtle);
  }

  .mobile-intake-guide div:first-child {
    display: flex;
    justify-content: space-between;
    gap: var(--ck-space-3);
    color: var(--ck-text-secondary);
  }

  .mobile-intake-guide span {
    color: var(--ck-text-muted);
    font-size: var(--ck-type-label);
    font-weight: var(--ck-weight-bold);
    text-transform: uppercase;
  }

  .mobile-intake-guide strong {
    color: var(--ck-text-primary);
    text-align: right;
  }

  .mobile-intake-guided [data-intake-step] {
    display: none;
  }

  .mobile-intake-guided [data-intake-step].mobile-intake-active {
    display: block;
  }

  .mobile-intake-guided .mobile-intake-actions {
    position: sticky;
    z-index: var(--ck-z-sticky);
    bottom: calc(72px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-2);
    margin: var(--ck-space-4);
    padding: var(--ck-space-3);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-panel);
    background: var(--ck-surface-1);
    box-shadow: var(--ck-shadow-floating);
  }

  .mobile-intake-actions #btnMobileIntakeRun {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) and (max-height: 479px) {
  .mobile-intake-guided .mobile-intake-actions {
    bottom: var(--ck-space-2);
  }
}

.reality-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.reality-input-grid input,
.reality-input-grid textarea {
  min-height: var(--ck-control-comfortable);
}

.decision-control {
  block-size: var(--ck-control-comfortable);
}

.reality-gap .gap-status {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ck-border-default);
  border-radius: var(--ck-radius-control);
  color: var(--ck-text-primary);
  background: var(--ck-surface-2);
}

.reality-gap .gap-status.good {
  color: var(--ck-success-text);
  border-color: var(--ck-success-border);
  background: var(--ck-success-bg);
}

.reality-gap .gap-status.warn {
  color: var(--ck-warning-text);
  border-color: var(--ck-warning-border);
  background: var(--ck-warning-bg);
}

.reality-gap .gap-status.danger {
  color: var(--ck-danger-text);
  border-color: var(--ck-danger-border);
  background: var(--ck-danger-bg);
}

.gap-explanation {
  margin: var(--ck-space-3) 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--ck-warning-border);
  color: var(--ck-text-secondary);
  background: var(--ck-surface-2);
  line-height: var(--ck-leading-body);
}

.quote-comparison-card {
  min-width: 0;
}

.quote-comparison-scroll {
  max-width: 100%;
  margin-top: var(--ck-space-3);
  overflow-x: auto;
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-control);
  scrollbar-gutter: stable;
}

.quote-comparison-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  color: var(--ck-text-secondary);
  background: var(--ck-surface-1);
}

.quote-comparison-table th,
.quote-comparison-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--ck-border-subtle);
  text-align: left;
  vertical-align: top;
}

.quote-comparison-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--ck-text-muted);
  background: var(--ck-surface-2);
  font-size: var(--ck-type-label);
  text-transform: uppercase;
}

.quote-comparison-table th:first-child,
.quote-comparison-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 190px;
  color: var(--ck-text-primary);
  background: var(--ck-surface-1);
  font-weight: var(--ck-weight-bold);
}

.quote-comparison-table th:first-child {
  z-index: 3;
  background: var(--ck-surface-2);
}

.quote-comparison-table tr.selected-quote td {
  background: var(--ck-surface-selected);
}

.quote-comparison-table tr.selected-quote td:first-child {
  background: var(--ck-surface-selected);
}

.quote-state {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--ck-border-control);
  border-radius: var(--ck-radius-chip);
  color: var(--ck-text-secondary);
  background: var(--ck-surface-2);
  font-size: var(--ck-type-label);
  font-weight: var(--ck-weight-bold);
}

.quote-mobile-list {
  display: none;
}

.selected-quote .quote-state {
  color: var(--ck-success-text);
  border-color: var(--ck-success-border);
  background: var(--ck-success-bg);
}

.qa-detail-list {
  display: grid;
  gap: var(--ck-space-3);
}

.qa-detail-list .qa-issue {
  display: grid;
  gap: var(--ck-space-3);
  min-width: 0;
  padding: var(--ck-space-4);
  border: 1px solid var(--ck-border-default);
  border-left: 4px solid var(--ck-border-control);
  border-radius: var(--ck-radius-card);
  color: var(--ck-text-secondary);
  background: var(--ck-surface-1);
}

.qa-detail-list .qa-issue.severity-critical {
  border-left-color: var(--ck-danger-border);
}

.qa-detail-list .qa-issue.severity-high {
  border-left-color: var(--ck-warning-border);
}

.qa-issue-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-space-2);
  align-items: center;
}

.qa-detail-list .qa-issue span {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.qa-detail-list .qa-issue .qa-severity,
.qa-detail-list .qa-issue .qa-status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--ck-border-control);
  border-radius: var(--ck-radius-chip);
  color: var(--ck-text-secondary);
  background: var(--ck-surface-2);
  font-size: var(--ck-type-label);
  font-weight: var(--ck-weight-bold);
  text-transform: uppercase;
}

.qa-detail-list .qa-issue.severity-critical .qa-severity {
  color: var(--ck-danger-text);
  border-color: var(--ck-danger-border);
  background: var(--ck-danger-bg);
}

.qa-detail-list .qa-issue.severity-high .qa-severity {
  color: var(--ck-warning-text);
  border-color: var(--ck-warning-border);
  background: var(--ck-warning-bg);
}

.qa-issue-head strong {
  flex: 1 1 220px;
  color: var(--ck-text-primary);
}

.qa-issue-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ck-space-2);
}

.qa-issue-facts div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ck-border-subtle);
  border-radius: var(--ck-radius-control);
  background: var(--ck-surface-2);
}

.qa-detail-list .qa-issue .qa-issue-facts span {
  display: block;
  color: var(--ck-text-muted);
  font-size: var(--ck-type-label);
  font-weight: var(--ck-weight-bold);
  text-transform: uppercase;
}

.qa-issue-facts b {
  display: block;
  margin-top: 4px;
  color: var(--ck-text-primary);
  overflow-wrap: anywhere;
}

.qa-recommended-action {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid var(--ck-action-primary);
  color: var(--ck-text-secondary);
  background: var(--ck-surface-2);
}

.qa-detail-list .qa-issue .qa-resolution-note {
  color: var(--ck-text-muted);
  font-size: var(--ck-type-compact);
}

@media (max-width: 839px) {
  .quote-comparison-scroll {
    display: none;
  }

  .quote-mobile-list {
    display: grid;
    gap: var(--ck-space-3);
  }

  .quote-mobile-more {
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-card);
    background: var(--ck-surface-1);
  }

  .quote-mobile-more > summary {
    min-height: var(--ck-control-touch);
    padding: var(--ck-space-3) var(--ck-space-4);
    color: var(--ck-link);
    font-weight: var(--ck-weight-bold);
    cursor: pointer;
  }

  .quote-mobile-more-list {
    display: grid;
    gap: var(--ck-space-3);
    padding: 0 var(--ck-space-3) var(--ck-space-3);
  }

  .quote-mobile-card {
    display: grid;
    gap: var(--ck-space-3);
    min-width: 0;
    padding: var(--ck-space-4);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-card);
    color: var(--ck-text-secondary);
    background: var(--ck-surface-1);
  }

  .quote-mobile-card.selected-quote {
    border-color: var(--ck-action-primary);
    background: var(--ck-surface-selected);
  }

  .quote-mobile-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-3);
    align-items: end;
  }

  .quote-mobile-head > div {
    min-width: 0;
  }

  .quote-mobile-head span,
  .quote-mobile-key span {
    display: block;
    color: var(--ck-text-muted);
    font-size: var(--ck-type-label);
    font-weight: var(--ck-weight-bold);
    text-transform: uppercase;
  }

  .quote-mobile-head strong,
  .quote-mobile-head b {
    display: block;
    margin-bottom: 4px;
    color: var(--ck-text-primary);
    font-size: var(--ck-type-card);
    font-weight: var(--ck-weight-bold);
    overflow-wrap: anywhere;
  }

  .quote-mobile-head b {
    font-size: var(--ck-type-section);
    text-align: right;
  }

  .quote-mobile-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    align-items: center;
  }

  .quote-mobile-key {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-2);
  }

  .quote-mobile-key div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--ck-border-subtle);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-2);
  }

  .quote-mobile-key strong {
    display: block;
    margin-top: 4px;
    color: var(--ck-text-primary);
    overflow-wrap: anywhere;
  }

  .quote-calculation {
    border-top: 1px solid var(--ck-border-subtle);
    padding-top: var(--ck-space-2);
  }

  .quote-calculation summary {
    min-height: var(--ck-control-min);
    padding: 10px 0;
    color: var(--ck-link);
    font-weight: var(--ck-weight-bold);
    cursor: pointer;
  }

  .quote-calculation dl {
    display: grid;
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ck-border-subtle);
    border-radius: var(--ck-radius-control);
    background: var(--ck-border-subtle);
  }

  .quote-calculation dl div {
    display: flex;
    justify-content: space-between;
    gap: var(--ck-space-3);
    padding: 10px 12px;
    background: var(--ck-surface-2);
  }

  .quote-calculation dt,
  .quote-calculation dd {
    margin: 0;
  }

  .quote-calculation dd {
    color: var(--ck-text-primary);
    font-weight: var(--ck-weight-bold);
  }

  .qa-issue-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 479px) {
  .quote-mobile-head,
  .quote-mobile-key {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-mobile-head b {
    text-align: left;
  }
}
  html[data-theme="arctic"] .btn-secondary,
  html[data-theme="arctic"] #installAppButton,
  html[data-theme="arctic"] #btnLoadDemo,
  html[data-theme="arctic"] #btnClear,
  html[data-theme="arctic"] #btnHpiIntakeLookup,
  html[data-theme="arctic"] #btnCheckCaseControl {
    border-color: var(--ck-button-secondary-border) !important;
    background: var(--ck-button-secondary-bg) !important;
    color: var(--ck-button-secondary-text) !important;
  }

  html[data-theme="arctic"] .nav-item span {
    border-color: var(--ck-border-control) !important;
    background: var(--ck-surface-3) !important;
    color: var(--ck-text-primary) !important;
  }

  html[data-theme="arctic"] .head-meter > span {
    color: var(--ck-text-primary) !important;
  }

  html[data-theme="obsidian"] .brand-text > span {
    color: var(--ck-text-primary);
  }

  .command-hero.hidden,
  .summary-deck.hidden,
  .result-top .hero-actions.route-compact-hidden {
    display: none !important;
  }

  .route-inspector-stat .route-confidence {
    color: var(--ck-text-primary) !important;
  }

  .required-summary p {
    color: var(--ck-text-primary) !important;
  }