/* Generated from ../../MobileStyles.html. Do not edit this file directly. */
/* 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;
    }
  }
/* Vehicle Intelligence quarantined historical styles. */
@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 {
      /* Compatibility aliases resolve through the shared semantic design system. */
      --ck-bg: var(--ck-bg-app);
      --ck-bg-soft: var(--ck-canvas);
      --ck-card: var(--ck-surface-1);
      --ck-card-soft: var(--ck-surface-2);
      --ck-text: var(--ck-text-primary);
      --ck-muted: var(--ck-text-muted);
      --ck-line: var(--ck-border-default);
      --ck-navy: var(--ck-header);
      --ck-blue: var(--ck-action-primary);
      --ck-green: var(--ck-success-solid);
      --ck-amber: var(--ck-warning-solid);
      --ck-red: var(--ck-danger-solid);
      --ck-purple: var(--ck-pending-solid);
      --ck-input: var(--ck-surface-inset);
      --ck-input-hover: var(--ck-surface-hover);
      --ck-text-soft: var(--ck-text-secondary);
      --ck-on-accent: var(--ck-action-primary-text);
      --ck-surface-glass: color-mix(in srgb, var(--ck-surface-1) 96%, transparent);
      --ck-surface-subtle: color-mix(in srgb, var(--ck-surface-2) 90%, transparent);
      --ck-line-soft: color-mix(in srgb, var(--ck-border-default) 70%, transparent);
      --ck-grid-line: color-mix(in srgb, var(--ck-bg-grid) 54%, transparent);
      --ck-ghost-bg: var(--ck-surface-2);
      --ck-ghost-text: var(--ck-text-primary);
      --ck-chrome-bg: var(--ck-nav);
      --ck-chrome-bg-soft: var(--ck-header);
      --ck-chrome-text: var(--ck-text-primary);
      --ck-chrome-muted: var(--ck-text-secondary);
      --ck-topbar-text: #f7fbfd;
      --ck-success-soft: var(--ck-success-bg);
      --ck-danger-soft: var(--ck-danger-bg);
      --ck-warning-soft: var(--ck-warning-bg);
      --ck-shadow: var(--ck-shadow-raised);
      --ck-shadow-hover: var(--ck-shadow-floating);
      --ck-radius-xl: var(--ck-radius-panel);
      --ck-radius-lg: var(--ck-radius-card);
      --ck-radius-md: var(--ck-radius-control);
      --ck-safe-bottom: env(safe-area-inset-bottom, 0px);
      --ck-safe-left: env(safe-area-inset-left, 0px);

      --space-2: calc(var(--ck-space-1) / 2);
      --space-4: var(--ck-space-1);
      --space-6: 6px;
      --space-8: var(--ck-space-2);
      --space-10: 10px;
      --space-12: var(--ck-space-3);
      --space-14: 14px;
      --space-16: var(--ck-space-4);
      --space-20: var(--ck-space-5);
      --space-24: var(--ck-space-6);
      --space-32: var(--ck-space-8);
      --space-48: var(--ck-space-12);
    }

    /* Arctic Theme Overrides */
    [data-theme="arctic"] .brand-row { color: var(--ck-text); }
    [data-theme="arctic"] .status-pill { border: 1px solid var(--ck-line); color: var(--ck-text); background: var(--ck-card-soft); }
    [data-theme="arctic"] .status-pill.good { border-color: var(--ck-success-border); background: var(--ck-success-soft); color: var(--ck-success-text); }
    [data-theme="arctic"] .status-pill.bad { border-color: var(--ck-danger-border); background: var(--ck-danger-soft); color: var(--ck-danger-text); }
    [data-theme="arctic"] .hero { color: var(--ck-text); }
    [data-theme="arctic"] .vehicle-hero-top, [data-theme="arctic"] .vehicle-name { color: var(--ck-text); }
    [data-theme="arctic"] .vehicle-sub { color: var(--ck-muted); }
    [data-theme="arctic"] .metric { background: var(--ck-bg-soft); border-color: var(--ck-line); }
    [data-theme="arctic"] .metric-label { color: var(--ck-muted); }
    [data-theme="arctic"] .bottom-nav { background: var(--ck-surface-glass); border-top: 1px solid var(--ck-line); backdrop-filter: blur(16px); }
    [data-theme="arctic"] .nav-btn { color: var(--ck-muted); }
    [data-theme="arctic"] .nav-btn.active { color: var(--ck-text); }
    [data-theme="arctic"] .toast { background: var(--ck-text); color: var(--ck-bg); }
    [data-theme="arctic"] .mobile-nav-more { background: var(--ck-bg); border: 1px solid var(--ck-line); }
    [data-theme="arctic"] .mobile-nav-more button { color: var(--ck-text); }
    [data-theme="arctic"] .header-bar { background: var(--ck-bg); color: var(--ck-text); border-bottom: 1px solid var(--ck-line); }

    .theme-toggle-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 18px;
      padding: var(--space-8);
      border-radius: var(--ck-radius-md);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      line-height: 1;
    }
    .theme-toggle-btn:hover {
      background: var(--ck-surface-hover);
      transform: scale(1.05);
    }
    [data-theme="arctic"] .theme-toggle-btn:hover {
      background: var(--ck-surface-hover);
    }

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

    html, body {
      min-height: 100%;
      background: var(--ck-bg);
      color: var(--ck-text);
      font-family: var(--ck-font-sans);
      transition: background 0.3s ease, color 0.3s ease;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6, .brand-title, .hero-title, .vehicle-name {
      font-family: var(--ck-font-sans);
    }

    button, input, select, textarea {
      font-family: var(--ck-font-sans);
    }

    button {
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    button:active {
      transform: scale(0.97);
    }

    .app {
      min-height: 100vh;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .brand-row {
      display: flex;
      justify-content: space-between;
      gap: var(--space-12);
      color: var(--ck-chrome-text);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: var(--space-10);
      min-width: 0;
    }

    .brand-logo {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      font-weight: 900;
      letter-spacing: 0;
    }

    .brand-text {
      min-width: 0;
    }

    .brand-title {
      font-size: 15px;
      line-height: 1.1;
    }

    .brand-subtitle {
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .status-pill {
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: rgba(255, 255, 255, 0.86);
      background: rgba(255, 255, 255, 0.08);
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .status-pill.good {
      border-color: rgba(22, 163, 74, 0.40);
      background: rgba(22, 163, 74, 0.16);
      color: #bbf7d0;
    }

    .status-pill.bad {
      border-color: rgba(220, 38, 38, 0.40);
      background: rgba(220, 38, 38, 0.16);
      color: #fecaca;
    }

    .page {
      display: none;
      animation: fadeIn 0.18s ease-out;
    }

    .page.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hero {
      color: #fff;
    }

    .hero-kicker {
      text-transform: uppercase;
    }

    .hero-title {
      margin: 8px 0 0;
      letter-spacing: 0;
      font-weight: 900;
    }

    .hero-copy {
      margin: 10px 0 0;
      line-height: 1.45;
      font-size: 14px;
    }

    .card {
      padding: var(--space-16);
      margin-bottom: 14px;
    }
    
    .card:hover {
      box-shadow: var(--ck-shadow-hover);
    }

    .section-title {
      margin: 0 0 10px;
    }

    .section-subtitle {
      margin: -4px 0 12px;
    }

    .search-box {
      display: flex;
      gap: var(--space-12);
    }

    .search-input {
      flex: 1;
      min-width: 0;
      border: 1px solid var(--ck-line);
      padding: 0 14px;
      font-size: 16px;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.04em;
      outline: none;
      background: var(--ck-card);
      color: var(--ck-text);
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .search-input:focus {
      border-color: var(--ck-blue);
    }

    .btn {
      border: 0;
      padding: 0 16px;
      background: var(--ck-navy);
      color: #fff;
    }
    
    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.15);
      filter: brightness(1.1);
    }

    .btn.ghost {
      box-shadow: none;
      border: 1px solid var(--ck-line);
    }
    
    .btn.ghost:hover {
      background: var(--ck-bg-soft);
      box-shadow: none;
      transform: none;
    }

    .btn.full {
      width: 100%;
    }

    .btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none !important;
      filter: none !important;
    }

    .vehicle-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-12);
      padding: 12px;
      margin: 10px 0;
    }

    .plate {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 112px;
      min-height: 42px;
      border-radius: 8px;
      background: linear-gradient(90deg, #1453a3 0 18%, #ffd21f 18% 100%);
      color: #111827;
      border: 2px solid #111827;
      font-weight: 900;
      letter-spacing: 0.08em;
      padding: 6px 10px 6px 28px;
      position: relative;
      text-transform: uppercase;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
    }

    .plate::before {
      content: "GB";
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .vehicle-meta {
      flex: 1;
      min-width: 0;
    }

    .vehicle-title {
      font-size: 14px;
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .vehicle-line {
      margin-top: 4px;
      font-size: 12px;
      color: var(--ck-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .badge-row {
      display: flex;
      gap: var(--space-6);
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      padding: 6px 8px;
      font-size: 11px;
      font-weight: 800;
      background: #eef2ff;
      color: #1d4ed8;
      border: 1px solid rgba(29, 78, 216, 0.12);
    }

    .badge.good {
      background: #dcfce7;
      color: #166534;
      border-color: rgba(22, 101, 52, 0.12);
    }

    .badge.review {
      background: #fef3c7;
      color: #92400e;
      border-color: rgba(146, 64, 14, 0.12);
    }

    .badge.bad {
      background: #fee2e2;
      color: #991b1b;
      border-color: rgba(153, 27, 27, 0.12);
    }

    .badge.dark {
      background: #111827;
      color: #fff;
      border-color: rgba(17, 24, 39, 0.12);
    }

    .vehicle-hero {
      margin-bottom: 14px;
      padding: 18px;
    }

    .vehicle-hero-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-12);
    }

    .vehicle-name {
      margin-top: 12px;
      font-size: 20px;
    }

    .vehicle-sub {
      margin-top: var(--space-4);
      font-size: 13px;
      color: rgba(255, 255, 255, 0.68);
    }

    .quick-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-10);
      margin-top: 14px;
    }

    .metric {
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      padding: 12px;
    }

    .metric-label {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.64);
      font-weight: 750;
    }

    .metric-value {
      margin-top: var(--space-4);
      font-size: 14px;
      font-weight: 900;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-10);
    }

    .info-tile {
      background: var(--ck-card-soft);
      border: 1px solid var(--ck-line);
      padding: 12px;
      min-height: 72px;
    }

    .info-label {
      font-size: 11px;
      color: var(--ck-muted);
      font-weight: 750;
    }

    .info-value {
      margin-top: 6px;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.25;
      word-break: break-word;
    }

    .progress-list {
      display: grid;
      gap: var(--space-8);
    }

    .check-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-10);
      padding: 11px 12px;
      background: var(--ck-card-soft);
      border: 1px solid var(--ck-line);
    }

    .check-label {
      font-size: 13px;
      font-weight: 800;
    }

    .check-state {
      font-size: 12px;
      font-weight: 900;
    }

    .marker-group {
      margin-bottom: 14px;
    }

    .marker-row {
      display: flex;
      justify-content: space-between;
      gap: var(--space-10);
      padding: 12px 0;
      border-bottom: 1px solid var(--ck-line);
    }

    .marker-row:last-child {
      border-bottom: 0;
    }

    .marker-title {
      font-size: 13px;
      font-weight: 900;
    }

    .marker-desc {
      margin-top: 4px;
      color: var(--ck-muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .marker-value {
      min-width: 86px;
      text-align: right;
      font-size: 12px;
      font-weight: 900;
    }

    .empty {
      padding: 18px;
      color: var(--ck-muted);
      font-size: 13px;
      line-height: 1.45;
      text-align: center;
    }

    .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      backdrop-filter: blur(20px);
      border-top: 1px solid rgba(16, 24, 40, 0.10);
      display: grid;
      grid-template-columns: repeat(9, minmax(0, 1fr));
    }

    .nav-btn {
      min-width: 0;
      border: 0;
      background: transparent;
      color: #667085;
      display: grid;
      gap: 3px;
      place-items: center;
      font-size: 10px;
      font-weight: 800;
    }

    .nav-icon {
      line-height: 1;
    }

    .nav-btn.active {
      color: #fff;
    }

    .toast {
      position: fixed;
      left: 16px;
      right: 16px;
      bottom: calc(96px + var(--ck-safe-bottom));
      z-index: 40;
      display: none;
      padding: var(--space-12) 14px;
      color: #fff;
      background: #101828;
      box-shadow: var(--ck-shadow);
      font-size: 13px;
      font-weight: 750;
      line-height: 1.35;
    }

    .toast.show {
      display: block;
      animation: fadeIn 0.18s ease-out;
    }

    .loading-overlay {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(7, 17, 31, 0.46);
      backdrop-filter: blur(6px);
    }

    .loading-overlay.show {
      display: flex;
    }

    .loader-card {
      background: var(--ck-card);
      color: var(--ck-text);
      padding: 18px;
      min-width: 220px;
      text-align: center;
      box-shadow: var(--ck-shadow);
    }

    .spinner {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 4px solid #e5e7eb;
      border-top-color: #1d4ed8;
      margin: 0 auto 12px;
      animation: spin 0.9s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .form-row {
      display: grid;
      gap: var(--space-8);
      margin-bottom: 12px;
    }

    .label {
      font-size: 12px;
      font-weight: 800;
      color: var(--ck-muted);
    }

    .select,
    .textarea,
    .input {
      width: 100%;
      border: 1px solid var(--ck-line);
      padding: 12px;
      background: var(--ck-input);
      color: var(--ck-text);
      outline: none;
    }

    .textarea {
      min-height: 88px;
      resize: vertical;
    }

    .link-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      width: 100%;
      text-decoration: none;
      color: #fff;
      font-weight: 900;
      margin-top: 8px;
    }

    .small-note {
      font-size: 12px;
      line-height: 1.45;
    }

    .upload-box {
      border: 1px dashed #cbd5e1;
      background: var(--ck-card-soft);
      padding: 12px;
      margin-bottom: 12px;
    }

    .file-input {
      width: 100%;
      border: 1px solid var(--ck-line);
      padding: 12px;
      background: var(--ck-input);
      color: var(--ck-text);
    }

    .upload-preview {
      display: grid;
      gap: var(--space-8);
      margin-top: 10px;
    }

    .file-link {
      margin-top: 8px;
    }

    .thumb {
      width: 62px;
      height: 62px;
      object-fit: cover;
      border-radius: 14px;
      border: 1px solid var(--ck-line);
      background: var(--ck-card);
      flex: 0 0 auto;
    }

    .danger-text {
      color: var(--ck-red);
    }

    .hidden {
      display: none !important;
    }
    .home-tool-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-12);
    }

    .module-band {
      margin: 18px 0 14px;
    }

    .module-band-head {
      justify-content: space-between;
    }

    .module-band-kicker {
      font-size: 11px;
      text-transform: uppercase;
    }

    .module-band-title {
      margin-top: 4px;
      font-size: 18px;
    }

    .module-band-note {
      max-width: 300px;
      font-size: 11px;
      line-height: 1.4;
      text-align: right;
    }

    .acquisition-card {
      display: flex;
      flex-direction: column;
      border-top: 4px solid var(--module-accent, var(--ck-blue));
    }

    .acquisition-card .module-content {
      flex: 1;
    }

    .module-label {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      border-radius: 999px;
      padding: 0 9px;
      margin-bottom: 10px;
      background: var(--module-soft, #eef2ff);
      color: var(--module-accent, var(--ck-blue));
      font-size: 10px;
      text-transform: uppercase;
    }

    .module-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-8);
      margin-top: 12px;
    }

    .module-actions .btn {
      min-width: 0;
      padding-left: 12px;
      padding-right: 12px;
    }

    .module-actions .btn.ghost {
      width: auto;
    }

    @media (max-width: 520px) {
      .module-band-head {
        flex-direction: column;
      }

      .module-band-note {
        text-align: left;
      }

      .module-actions {
        grid-template-columns: 1fr;
      }

      .module-actions .btn.ghost {
        width: 100%;
      }
    }

    .card-header-row {
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .card-header-row .section-title {
      margin-bottom: 2px;
    }

    .card-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--space-8);
      flex-wrap: wrap;
    }

    .mini-btn {
      border: 1px solid var(--ck-line);
      padding: 0 10px;
    }

    .mini-btn.primary {
      background: #0b1f3a;
      color: #fff;
      border-color: #0b1f3a;
    }

    .mini-btn.danger {
      color: #991b1b;
      background: #fff5f5;
      border-color: #fecaca;
    }

    .recent-list {
      display: grid;
    }

    .recent-card {
      padding: 12px;
    }

    .recent-card-top {
      justify-content: space-between;
    }

    .recent-title-block {
      flex: 1;
    }

    .recent-vehicle-name {
      margin-top: 8px;
      font-size: 15px;
      overflow: hidden;
    }

    .recent-meta {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .recent-chip-row {
      margin-top: 10px;
    }

    .recent-action-row {
      display: grid;
      margin-top: 11px;
    }

    .recent-action {
      border: 1px solid var(--ck-line);
      padding: 0 8px;
      background: var(--ck-card-soft);
      color: var(--ck-navy);
    }

    .search-results-list {
      display: grid;
      gap: var(--space-10);
    }

    .responsive-card-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-12);
    }

    @media (max-width: 390px) {

      .plate {
        min-width: 96px;
        font-size: 13px;
      }

      .nav-btn span:last-child {
        display: none;
      }

      .bottom-nav {
        padding-left: 7px;
        padding-right: 7px;
      }
    }

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

      .brand-logo {
        width: 32px;
        height: 32px;
      }

      .hero-copy {
        margin-top: 6px;
      }

      .card {
        margin-bottom: 10px;
      }

      .bottom-nav {
        padding-top: 6px;
        padding-bottom: calc(6px + var(--ck-safe-bottom));
      }
    }

    @media (min-width: 720px) {
      .responsive-card-grid,
      .home-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .search-results-list,
      .recent-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1040px) {
      .responsive-card-grid,
      .home-tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .search-results-list,
      .recent-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (min-width: 760px) {
      .app-inner {
        margin: 0 auto;
      }

      .bottom-nav {
        left: 50%;
        transform: translateX(-50%);
        max-width: 720px;
        border-left: 1px solid rgba(16, 24, 40, 0.10);
        border-right: 1px solid rgba(16, 24, 40, 0.10);
        border-radius: 24px 24px 0 0;
      }
    }

    @media (min-width: 1040px) {
      .app-inner {
        margin: 0 auto;
      }

      .bottom-nav {
        max-width: 980px;
      }
    }
    .damage-map-preload {
      display: none !important;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .damage-map-card {
      overflow: hidden;
    }

    .damage-map-view-row {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 7px;
      margin: 10px 0 12px;
    }

    .damage-map-view-btn {
      border: 1px solid var(--ck-line);
      font-size: 11px;
      font-weight: 900;
      box-shadow: none;
      padding: 0 4px;
    }

    .damage-map-view-btn.active {
      box-shadow: 0 8px 18px rgba(11, 31, 58, 0.18);
    }

    .damage-map-shell {
      border: 1px solid rgba(11, 31, 58, 0.10);
      border-radius: 22px;
      background:
        radial-gradient(circle at top right, rgba(29, 78, 216, 0.12), transparent 36%),
        linear-gradient(180deg, var(--ck-card-soft), var(--ck-bg-soft));
      padding: 10px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.60);
    }

    .damage-map-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 18px;
      overflow: hidden;
      background:
        linear-gradient(90deg, var(--ck-grid-line) 1px, transparent 1px),
        linear-gradient(180deg, var(--ck-grid-line) 1px, transparent 1px),
        var(--ck-card);
      background-size: 12.5% 12.5%;
      border: 1px solid rgba(11, 31, 58, 0.14);
      touch-action: manipulation;
      user-select: none;
    }

    .damage-map-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      z-index: 1;
    }

    .damage-pin-layer {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .damage-pin {
      position: absolute;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      display: grid;
      place-items: center;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(220, 38, 38, 0.34);
      pointer-events: auto;
    }

    .damage-pin.persisted {
      box-shadow: 0 8px 18px rgba(11, 31, 58, 0.30);
    }

    .damage-pin.pending {
      animation: ckPinPulse 1s ease-in-out infinite;
    }

    @keyframes ckPinPulse {
      0%, 100% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.12);
      }
    }

    .damage-map-help {
      margin-top: 10px;
      padding: 10px 11px;
      border-radius: 16px;
      background: rgba(29, 78, 216, 0.08);
      border: 1px solid rgba(29, 78, 216, 0.12);
      color: var(--ck-muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .damage-map-draft-panel {
      margin-top: 12px;
      border: 1px solid var(--ck-line);
      border-radius: 18px;
      background: var(--ck-card);
      padding: 12px;
    }

    .damage-map-draft-title {
      font-size: 13px;
      font-weight: 900;
      color: var(--ck-text);
      margin-bottom: 8px;
    }

    .damage-map-mini-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-8);
    }

    .damage-map-draft-list {
      display: grid;
      gap: var(--space-8);
      margin-top: 10px;
    }

    .damage-map-draft-row {
      border: 1px solid var(--ck-line);
      border-radius: 16px;
      background: var(--ck-card-soft);
      padding: 10px;
    }

    .damage-map-draft-row-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-8);
    }

    .damage-map-draft-main {
      min-width: 0;
      flex: 1;
    }

    .damage-map-draft-name {
      font-size: 13px;
      font-weight: 900;
      color: var(--ck-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .damage-map-draft-meta {
      margin-top: 4px;
      font-size: 11px;
      color: var(--ck-muted);
      line-height: 1.35;
    }

    .damage-map-empty-small {
      padding: 10px;
      border-radius: 14px;
      background: var(--ck-card-soft);
      border: 1px dashed #cbd5e1;
      color: var(--ck-muted);
      font-size: 12px;
      text-align: center;
      line-height: 1.35;
    }

    @media (max-width: 390px) {
      .damage-map-view-row {
        gap: 5px;
      }

      .damage-map-view-btn {
        font-size: 10px;
        min-height: 36px;
      }

      .damage-pin {
        width: 25px;
        height: 25px;
        font-size: 10px;
      }
    }
    .damage-map-action-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-8);
      margin-top: 12px;
    }

    .damage-map-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 46;
      display: none;
      align-items: flex-end;
      justify-content: center;
      background: rgba(7, 17, 31, 0.58);
      backdrop-filter: blur(8px);
      padding: 12px 12px calc(12px + var(--ck-safe-bottom));
    }

    .damage-map-modal-backdrop.show {
      animation: fadeIn 0.14s ease-out;
    }

    .damage-map-modal-sheet {
      width: 100%;
      max-width: 680px;
      max-height: min(88vh, 760px);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      background: var(--ck-card);
      color: var(--ck-text);
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: 28px 28px 22px 22px;
      box-shadow: 0 26px 80px rgba(3, 12, 27, 0.44);
      padding: var(--space-14);
    }

    .damage-map-modal-handle {
      width: 42px;
      height: 5px;
      border-radius: 999px;
      background: #cbd5e1;
      margin: 2px auto 12px;
    }

    .damage-map-modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-10);
      margin-bottom: 10px;
    }

    .damage-map-modal-title-block {
      min-width: 0;
      flex: 1;
    }

    .damage-map-modal-title {
      font-size: 17px;
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: 0;
      color: var(--ck-text);
    }

    .damage-map-modal-subtitle {
      margin-top: var(--space-4);
      color: var(--ck-muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .damage-map-modal-close {
      width: 38px;
      height: 38px;
      border: 1px solid var(--ck-line);
      border-radius: 999px;
      background: var(--ck-card-soft);
      color: var(--ck-navy);
      font-size: 19px;
      font-weight: 900;
      box-shadow: none;
      flex: 0 0 auto;
    }

    .damage-map-modal-position-card {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-8);
      padding: 10px;
      border: 1px solid var(--ck-line);
      border-radius: 18px;
      background: var(--ck-card-soft);
      margin-bottom: 12px;
    }

    .damage-map-modal-pill-label {
      font-size: 10px;
      color: var(--ck-muted);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .damage-map-modal-pill-value {
      margin-top: 4px;
      font-size: 13px;
      font-weight: 900;
      color: var(--ck-text);
      word-break: break-word;
    }

    .damage-map-modal-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
      margin-top: 12px;
    }

    .damage-map-modal-delete-row {
      display: none;
    }

    .damage-map-modal-delete-row.show {
      display: block;
    }

    @media (min-width: 520px) {
      .damage-map-modal-actions {
        grid-template-columns: 1fr 1fr;
      }
    }
    .damage-photo-upload-box {
      border: 1px dashed #cbd5e1;
      background: var(--ck-card-soft);
      border-radius: 18px;
      padding: 12px;
      margin-top: 4px;
      margin-bottom: 12px;
    }

    .damage-photo-upload-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-8);
      margin-top: 10px;
    }

    .damage-photo-upload-status {
      margin-top: 9px;
      font-size: 12px;
      color: var(--ck-muted);
      line-height: 1.4;
    }

    .damage-photo-chip-list {
      display: grid;
      gap: 7px;
      margin-top: 8px;
    }

    .damage-photo-chip {
      border: 1px solid var(--ck-line);
      background: var(--ck-card);
      border-radius: 14px;
      padding: 8px 9px;
      font-size: 11px;
      color: var(--ck-muted);
      line-height: 1.35;
      word-break: break-word;
    }

    .damage-photo-chip strong {
      color: var(--ck-text);
    }
    .inspection-summary-card {
      overflow: hidden;
    }

    .inspection-grade-hero {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: var(--space-12);
      align-items: center;
      padding: 12px;
      color: #fff;
      margin-bottom: 12px;
    }

    .inspection-grade-badge {
      width: 78px;
      height: 78px;
      border-radius: 22px;
      display: grid;
      place-items: center;
      font-size: 35px;
      font-weight: 900;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.22);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    }

    .inspection-grade-badge.good {
      background: rgba(22, 163, 74, 0.28);
    }

    .inspection-grade-badge.review {
      background: rgba(245, 158, 11, 0.26);
    }

    .inspection-grade-badge.bad {
      background: rgba(220, 38, 38, 0.28);
    }

    .inspection-grade-title {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.70);
      font-weight: 800;
    }

    .inspection-grade-value {
      margin-top: 4px;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.15;
    }

    .inspection-grade-sub {
      margin-top: 6px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.72);
      line-height: 1.35;
    }

    .inspection-summary-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      margin-top: 10px;
    }

    .inspection-summary-tile {
      border: 1px solid var(--ck-line);
      background: var(--ck-card-soft);
      padding: 10px;
      min-height: 72px;
    }

    .inspection-summary-label {
      font-size: 11px;
      color: var(--ck-muted);
      font-weight: 800;
    }

    .inspection-summary-value {
      margin-top: var(--space-4);
      font-size: 15px;
      font-weight: 900;
      color: var(--ck-text);
      line-height: 1.2;
    }

    .inspection-summary-note {
      margin-top: 4px;
      font-size: 11px;
      color: var(--ck-muted);
      line-height: 1.35;
    }

    .inspection-progress-track {
      height: 9px;
      border-radius: 999px;
      overflow: hidden;
      margin-top: 8px;
    }

    .inspection-progress-fill {
      height: 100%;
      border-radius: 999px;
      width: 0%;
    }

    .inspection-recommendation-list {
      display: grid;
      gap: 7px;
      margin-top: 10px;
    }

    .inspection-recommendation {
      border: 1px solid rgba(29, 78, 216, 0.12);
      background: rgba(29, 78, 216, 0.06);
      padding: 9px 10px;
      font-size: 12px;
      color: var(--ck-muted);
      line-height: 1.35;
    }

    @media (max-width: 390px) {
      .inspection-grade-hero {
        grid-template-columns: 76px minmax(0, 1fr);
      }

      .inspection-grade-badge {
        width: 66px;
        height: 66px;
        border-radius: 19px;
        font-size: 30px;
      }
    }
    .app * { letter-spacing: 0; }

    .app {
      padding-bottom: calc(82px + var(--ck-safe-bottom));
    }

    .topbar {
      padding: 12px 16px;
      background: var(--ck-chrome-bg);
      border-bottom: 3px solid #159947;
      backdrop-filter: none;
    }

    .brand-logo {
      border-radius: 6px;
      background: #ffffff;
      color: #08111f;
      box-shadow: none;
    }

    .brand-title { font-weight: 900; }

    .status-pill {
      border-radius: 999px;
      padding: 7px 10px;
    }

    .page {
      width: 100%;
      margin: 0 auto;
      padding: var(--space-16);
    }

    .hero {
      margin: -16px -16px 16px;
      padding: 22px 18px 24px;
      background: var(--ck-chrome-bg-soft);
      border-bottom: 1px solid #1f334f;
    }

    .hero-kicker {
      color: #86efac;
      font-size: 11px;
    }

    .hero-title {
      max-width: 620px;
      font-size: 28px;
    }

    .hero-copy {
      max-width: 660px;
      color: var(--ck-chrome-muted);
    }

    .card,
    .card.soft,
    .card.flat {
      border-color: var(--ck-line);
      box-shadow: var(--ck-shadow);
      background: var(--ck-card);
    }

    .card.soft { box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05); }

    .btn,
    .mini-btn,
    .recent-action,
    .link-btn,
    .file-link,
    .search-input,
    .input,
    .select,
    .textarea,
    .file-input {
      border-radius: 7px;
    }

    .btn.primary,
    .recent-action.primary,
    .link-btn { background: #1647b8; }

    .search-box { align-items: stretch; }

    .search-input {
      border-width: 2px;
      height: 50px;
    }

    .vehicle-card,
    .recent-card,
    .info-tile,
    .inspection-summary-tile,
    .inspection-recommendation,
    .check-row,
    .upload-box,
    .empty {
      border-radius: 7px;
    }

    .vehicle-hero,
    .inspection-grade-hero {
      border-radius: 8px;
      background: #0b1f3a;
      box-shadow: 0 6px 18px rgba(11, 31, 58, 0.16);
    }

    .vehicle-hero .metric,
    .inspection-grade-hero .metric { border-radius: 7px; }

    .card .metric,
    .recent-card .metric {
      border-radius: 7px;
      background: var(--ck-card-soft);
      border-color: var(--ck-line);
    }

    .card .metric-label,
    .recent-card .metric-label { color: var(--ck-muted); }

    .card .metric-value,
    .recent-card .metric-value { color: var(--ck-text); }

    .module-band { margin-top: 20px; }

    .module-band-head {
      color: var(--ck-text);
      padding: 0 0 10px;
    }

    .module-band-kicker { color: #157f3b; }

    .acquisition-card {
      border-top-width: 3px;
      min-height: 250px;
    }

    .home-secondary-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-12);
      margin-top: 12px;
    }

    .home-secondary-grid .card { margin-bottom: 0; }

    .secondary-tool-card {
      display: flex;
      flex-direction: column;
      min-height: 176px;
    }

    .secondary-tool-card .section-subtitle { flex: 1; }

    .bottom-nav {
      padding: 7px 8px calc(7px + var(--ck-safe-bottom));
      background: var(--ck-surface-glass);
      border-top-color: var(--ck-line);
      gap: 4px;
    }

    .nav-btn {
      min-height: 52px;
      border-radius: 7px;
      padding: 6px 3px;
    }

    .nav-btn.active {
      background: var(--ck-chrome-bg-soft);
      box-shadow: none;
    }

    .nav-icon {
      width: 22px;
      height: 22px;
      font-size: 16px;
      font-weight: 900;
    }

    .toast,
    .loader-card { border-radius: 8px; }

    @media (max-width: 719px) {
      .bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }

      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        display: none;
      }

      .module-band-note { display: none; }
    }

    @media (min-width: 720px) {
      .home-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

      .hero {
        margin-left: 0;
        margin-right: 0;
        border-radius: 8px;
      }
    }

    @media (min-width: 1040px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
      .app {
        padding-left: 112px;
        padding-bottom: 0;
      }

      .topbar {
        padding-left: 24px;
        padding-right: 24px;
      }

      .page { padding: var(--space-24); }

      .bottom-nav {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: 112px;
        max-width: none;
        padding: 18px 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        transform: none;
        border: 0;
        border-right: 1px solid #d0d5dd;
        border-radius: 0;
        overflow-y: auto;
      }

      .nav-btn {
        width: 100%;
        min-height: 58px;
      }

      .home-secondary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .page.active {
      animation: ckPageIn 220ms cubic-bezier(.2,.75,.3,1);
    }

    .page.active > * {
      animation: ckRiseIn 280ms cubic-bezier(.2,.75,.3,1) both;
    }

    .page.active > *:nth-child(2) { animation-delay: 35ms; }
    .page.active > *:nth-child(3) { animation-delay: 70ms; }
    .page.active > *:nth-child(4) { animation-delay: 105ms; }
    .page.active > *:nth-child(n+5) { animation-delay: 130ms; }

    .btn,
    .mini-btn,
    .recent-action,
    .nav-btn,
    .vehicle-card,
    .recent-card,
    .card,
    .badge,
    .status-pill,
    .search-input,
    .input,
    .select,
    .textarea {
      transition:
        transform 160ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        opacity 180ms ease;
    }

    .btn:active,
    .mini-btn:active,
    .recent-action:active,
    .nav-btn:active {
      transform: translateY(1px) scale(0.985);
    }

    .btn:focus-visible,
    .mini-btn:focus-visible,
    .recent-action:focus-visible,
    .nav-btn:focus-visible,
    .search-input:focus-visible,
    .input:focus-visible,
    .select:focus-visible,
    .textarea:focus-visible,
    .vehicle-context:focus-visible {
      outline: 3px solid rgba(29, 78, 216, 0.24);
      outline-offset: 2px;
    }

    .nav-btn {
      position: relative;
    }

    .nav-btn:before {
      content: "";
      position: absolute;
      left: 16%;
      right: 16%;
      bottom: 3px;
      height: 2px;
      border-radius: 999px;
      background: #4ade80;
      opacity: 0;
      transform: scaleX(0.35);
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .nav-btn.active:before {
      opacity: 1;
      transform: scaleX(1);
    }

    .status-pill.good {
      box-shadow: 0 0 0 1px rgba(74,222,128,0.18), 0 0 16px rgba(22,163,74,0.18);
    }

    .status-pill.bad,
    .badge.bad {
      box-shadow: 0 0 0 1px rgba(220,38,38,0.12), 0 0 14px rgba(220,38,38,0.10);
    }

    .badge.good {
      box-shadow: 0 0 0 1px rgba(22,163,74,0.10), 0 0 12px rgba(22,163,74,0.08);
    }

    .progress-fill,
    .inspection-progress-fill {
      transition: width 440ms cubic-bezier(.2,.75,.3,1);
    }

    .loading-overlay.show .loader-card {
      animation: ckLoaderIn 180ms ease-out both;
    }

    .loader-bars {
      display: grid;
      gap: var(--space-6);
      margin-top: 13px;
    }

    .loader-bar {
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: #e9edf2;
    }

    .loader-bar:after {
      content: "";
      display: block;
      width: 46%;
      height: 100%;
      background: #1d4ed8;
      animation: ckLoadSweep 1.05s ease-in-out infinite;
    }

    .loader-bar:nth-child(2):after { animation-delay: 110ms; }
    .loader-bar:nth-child(3):after { animation-delay: 220ms; }

    .vehicle-context {
      display: none;
      width: 100%;
      min-height: 42px;
      margin-top: 10px;
      padding: 7px 9px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 7px;
      background: rgba(255,255,255,0.06);
      color: #fff;
      align-items: center;
      gap: var(--space-10);
      text-align: left;
      cursor: pointer;
    }

    .vehicle-context.show {
      display: flex;
      animation: ckContextIn 220ms ease-out both;
    }

    .context-plate {
      flex: 0 0 auto;
      min-width: 82px;
      padding: 5px 8px;
      border-radius: 5px;
      background: #ffd21f;
      color: #111827;
      border: 1px solid rgba(0,0,0,0.28);
      text-align: center;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .context-copy {
      min-width: 0;
      flex: 1;
    }

    .context-name,
    .context-meta {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .context-name {
      font-size: 12px;
      font-weight: 900;
    }

    .context-meta {
      margin-top: 2px;
      color: rgba(255,255,255,0.64);
      font-size: 10px;
    }

    .context-arrow {
      color: #86efac;
      font-size: 17px;
      font-weight: 900;
    }

    @media (hover: hover) and (pointer: fine) {
      .btn:hover,
      .mini-btn:hover,
      .recent-action:hover {
        box-shadow: 0 7px 16px rgba(16,24,40,0.12);
      }

      .nav-btn:hover:not(.active) {
        background: rgba(11,31,58,0.06);
        color: #344054;
      }
    }

    @keyframes ckPageIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes ckRiseIn {
      from { opacity: 0; transform: translateY(7px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes ckLoaderIn {
      from { opacity: 0; transform: translateY(5px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes ckLoadSweep {
      0% { transform: translateX(-120%); }
      100% { transform: translateX(260%); }
    }

    @keyframes ckContextIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .sale-hero {
      padding: 18px;
      margin-bottom: 14px;
      border-radius: 8px;
      color: #fff;
      background: #111827;
      border-left: 4px solid #e11d48;
      box-shadow: 0 8px 22px rgba(17, 24, 39, 0.18);
    }

    .sale-hero h1 { margin: 5px 0 7px; font-size: 22px; line-height: 1.15; }
    .sale-hero p { margin: 0; color: #d1d5db; font-size: 13px; line-height: 1.5; }
    .sale-grid { display: grid; gap: var(--space-12); }
    .sale-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
    .sale-form-grid .form-row { margin: 0; }
    .sale-stage {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-10);
      padding: 10px 0;
      border-bottom: 1px solid var(--ck-line);
    }
    .sale-stage:last-child { border-bottom: 0; }
    .sale-stage strong { font-size: 13px; }
    .sale-stage span { color: var(--ck-muted); font-size: 12px; text-align: right; }
    .sale-offer {
      padding: 12px;
      margin-top: 9px;
      border: 1px solid var(--ck-line);
      border-left: 4px solid #1647b8;
      border-radius: 7px;
      background: var(--ck-card);
    }
    .sale-offer.best { border-left-color: #157f3b; background: var(--ck-success-soft); }
    .sale-offer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-10); }
    .sale-offer-price { color: var(--ck-text); font-size: 21px; font-weight: 900; }
    .sale-offer-meta { margin-top: 4px; color: var(--ck-muted); font-size: 12px; line-height: 1.45; }
    .sale-actions { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-top: 12px; }
    .sale-actions .btn { flex: 1 1 150px; }
    .buyerfinder-panel {
      border-top: 4px solid #e11d48;
      background:
        linear-gradient(180deg, var(--ck-surface-glass), var(--ck-surface-subtle)),
        radial-gradient(circle at 100% 0%, rgba(225, 29, 72, 0.10), transparent 34%);
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    }
    .buyerfinder-routes {
      display: grid;
      gap: var(--space-8);
      margin-top: 11px;
    }
    .buyerfinder-route {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-10);
      align-items: center;
      padding: 10px;
      border: 1px solid var(--ck-line);
      border-radius: 8px;
      background: var(--ck-card);
    }
    .buyerfinder-route strong {
      display: block;
      color: var(--ck-text);
      font-size: 13px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }
    .buyerfinder-route p {
      margin: 4px 0 0;
      color: var(--ck-muted);
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .buyerfinder-route span {
      display: grid;
      place-items: center;
      min-width: 42px;
      height: 34px;
      border-radius: 999px;
      color: #ffffff;
      background: linear-gradient(135deg, #111827, #e11d48);
      font-size: 12px;
      font-weight: 900;
    }
    .capture-review-list {
      display: grid;
      gap: var(--space-10);
      margin-top: 12px;
    }
    .capture-review-plan {
      display: grid;
      gap: var(--space-10);
      margin: 12px 0;
      padding: 12px;
      border: 1px solid #b7d7c6;
      border-left: 4px solid #149b5f;
      border-radius: 8px;
      background: var(--ck-success-soft);
    }
    .capture-review-plan-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-10);
    }
    .capture-review-plan-head strong {
      display: block;
      margin-top: 2px;
      color: var(--ck-text);
      font-size: 15px;
      line-height: 1.3;
    }
    .capture-review-plan-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-10);
    }
    .capture-review-plan-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      color: var(--ck-muted);
      font-size: 11px;
      font-weight: 750;
    }
    .capture-review-plan-meta span {
      padding: 5px 8px;
      border: 1px solid #d0e7da;
      border-radius: 999px;
      background: var(--ck-card);
    }
    .capture-missing-list {
      margin-top: 11px;
      padding: 10px 11px;
      border: 1px solid #fed7aa;
      border-left: 4px solid #f59e0b;
      border-radius: 7px;
      background: var(--ck-warning-soft);
      color: var(--ck-text);
      font-size: 12px;
      line-height: 1.45;
      font-weight: 750;
    }
    .capture-review-card {
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      gap: 11px;
      padding: 11px;
      border: 1px solid var(--ck-line);
      border-radius: 8px;
      background: var(--ck-card);
    }
    .capture-review-card.needs-review {
      border-color: #fbbf24;
      background: var(--ck-warning-soft);
    }
    .capture-review-card.retake {
      border-color: #fecaca;
      background: var(--ck-danger-soft);
    }
    .capture-review-card.approved {
      border-color: #bbf7d0;
      background: var(--ck-success-soft);
    }
    .capture-review-thumb {
      width: 82px;
      aspect-ratio: 4 / 3;
      border: 1px solid #d0d5dd;
      border-radius: 7px;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: #0b1f3a;
      color: #ffffff;
      font-size: 22px;
      font-weight: 900;
    }
    .capture-review-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .capture-review-body { min-width: 0; }
    .capture-review-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 9px;
    }
    .capture-review-title {
      min-width: 0;
      margin: 0;
      color: var(--ck-text);
      font-size: 14px;
      font-weight: 900;
      line-height: 1.2;
    }
    .capture-review-meta {
      margin-top: 4px;
      color: var(--ck-muted);
      font-size: 11px;
      line-height: 1.45;
    }
    .capture-review-quality {
      display: flex;
      gap: var(--space-6);
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .capture-review-quality span {
      padding: 4px 7px;
      border-radius: 999px;
      background: var(--ck-card-soft);
      color: var(--ck-text-soft);
      font-size: 11px;
      font-weight: 800;
    }
    .capture-review-notes {
      width: 100%;
      min-height: 42px;
      margin-top: 9px;
      padding: 8px 9px;
      border: 1px solid var(--ck-line);
      background: var(--ck-input);
      color: var(--ck-text);
      border-radius: 7px;
      resize: vertical;
      font: inherit;
      font-size: 12px;
      line-height: 1.35;
    }
    .capture-review-reason {
      width: 100%;
      min-height: 44px;
      margin-top: 9px;
      font-size: 12px;
    }
    .capture-review-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin-top: 8px;
    }
    .capture-review-actions .mini-btn {
      min-height: 44px;
      padding: 7px 8px;
      font-size: 11px;
    }
    .capture-review-open {
      display: inline-flex;
      margin-top: 8px;
      color: #1647b8;
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
    }

    @media (min-width: 640px) {
      .sale-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sale-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sale-span-2 { grid-column: 1 / -1; }
    }

    @media (max-width: 639px) {
      .capture-review-plan-grid { grid-template-columns: 1fr; }
      .capture-review-plan .capture-review-actions { grid-template-columns: 1fr; }
    }

    #recentVehiclesContent,
    .recent-list,
    .recent-card,
    .recent-card-top,
    .recent-title-block,
    .recent-action-row {
      min-width: 0;
      max-width: 100%;
    }
    .recent-card-top > div:last-child {
      flex: 0 1 auto;
    }
    .recent-card-top > div:last-child .badge,
    .recent-chip-row .badge {
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      text-align: center;
    }

    .mobile-more-btn,
    .mobile-nav-more,
    .mobile-nav-backdrop {
      display: none;
    }

    @media (max-width: 1039px), (hover: none), (pointer: coarse) {
      .app {
        padding-left: 0;
        padding-bottom: calc(82px + var(--ck-safe-bottom));
      }

      .app-inner {
        max-width: 720px;
        margin: 0 auto;
      }

      .bottom-nav {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        padding: 7px 8px calc(7px + var(--ck-safe-bottom));
        transform: none;
        border: 0;
        border-top: 1px solid #d0d5dd;
        border-radius: 0;
        overflow: visible;
      }

      .nav-btn {
        width: auto;
        min-height: 52px;
      }

      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        display: none;
      }

      .mobile-more-btn { display: grid; }

      .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 38;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgba(7, 17, 31, 0.42);
      }
      .mobile-nav-backdrop.show { display: block; }

      .mobile-nav-more {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(74px + var(--ck-safe-bottom));
        z-index: 40;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
        padding: 10px;
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        background: var(--ck-card);
        border-color: var(--ck-line);
        box-shadow: 0 18px 44px rgba(7, 17, 31, 0.24);
      }
      .mobile-nav-more.show { display: grid; }
      .mobile-nav-more button {
        min-width: 0;
        min-height: 50px;
        display: flex;
        align-items: center;
        gap: var(--space-10);
        padding: 9px 11px;
        border: 1px solid #e4e7ec;
        border-radius: 7px;
        background: var(--ck-card-soft);
        color: var(--ck-text);
        text-align: left;
      }
      .mobile-nav-more button span {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 6px;
        background: #0b1f3a;
        color: #ffffff;
        font-weight: 900;
      }
      .mobile-nav-more button strong { font-size: 13px; }
    }

    @media (orientation: landscape) and (max-height: 700px) {
      .app {
        padding-left: 0;
        padding-bottom: calc(48px + var(--ck-safe-bottom));
      }
      .app-inner {
        width: 100%;
      }
      .topbar {
        position: static;
        padding: 5px 12px;
        border-bottom-width: 2px;
      }
      .brand-subtitle,
      .vehicle-context {
        display: none !important;
      }
      .brand-row { min-height: 30px; }
      .ck-brand-full { max-height: 28px; }
      .status-pill { padding: 4px 8px; font-size: 10px; }
      .page {
        padding: 8px 12px calc(52px + var(--ck-safe-bottom));
      }
      .hero {
        display: none;
      }
      .sale-hero { padding: 11px 14px; margin-bottom: 10px; }
      .sale-hero p { display: none; }
      .bottom-nav {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        padding: 2px 8px calc(2px + var(--ck-safe-bottom));
        transform: none;
        border: 0;
        border-top: 1px solid #d0d5dd;
        border-radius: 0;
      }
      .nav-btn {
        width: auto;
        min-height: 40px;
        padding: 3px;
      }
      .nav-btn span:last-child { display: none; }
      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        display: none;
      }
      .mobile-more-btn { display: grid; }
      .mobile-nav-more {
        bottom: calc(47px + var(--ck-safe-bottom));
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .mobile-nav-more button {
        min-height: 42px;
        justify-content: center;
        padding: 6px;
      }
      .mobile-nav-more button strong { display: block; font-size: 11px; }
    }

    @media (orientation: landscape) and (max-height: 740px) and (max-width: 1180px) {
      .hero {
        grid-template-columns: minmax(190px, 0.78fr) minmax(0, 1.22fr);
        align-items: center;
        gap: var(--space-10);
        margin-bottom: 8px;
        padding: 10px 12px;
      }
      .hero-title { font-size: 22px; }
      .hero-copy { margin-top: 0; font-size: 12px; line-height: 1.35; }
      .sale-hero {
        display: grid;
        grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.2fr);
        gap: var(--space-10);
        align-items: center;
      }
      .sale-hero h1 { margin: 2px 0; }
      .sale-hero .quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 0 !important;
      }
      .capture-review-card {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 9px;
        padding: 9px;
      }
      .capture-review-thumb { width: 72px; }
      .capture-review-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (orientation: landscape) and (max-height: 740px) and (max-width: 1180px) {
      .topbar {
        border-radius: 0;
      }
      .api-status-row {
        gap: 5px;
      }
      .hero {
        display: none !important;
      }
      .vehicle-sub,
      .sale-hero p {
        display: none;
      }
      .sale-grid {
        align-items: start;
      }
      .sale-form-grid {
        gap: var(--space-8);
      }
      .form-row {
        gap: 4px;
      }
    }
    .card,
    .recent-card,
    .vehicle-hero,
    .sale-hero,
    .acquisition-card,
    .secondary-tool-card,
    .metric,
    .search-box,
    .module-actions,
    .recent-action-row,
    .capture-review-card,
    .sale-grid,
    .quick-grid,
    .info-grid {
      min-width: 0;
    }

    .section-title,
    .section-subtitle,
    .vehicle-name,
    .vehicle-sub,
    .recent-vehicle-name,
    .recent-meta,
    .module-band-title,
    .module-band-note,
    .btn,
    .mini-btn,
    .recent-action,
    .nav-btn {
      overflow-wrap: break-word;
    }

    @media (min-width: 1181px) and (min-height: 700px) {
      .app {
        padding-left: 118px;
        padding-bottom: 0;
      }

      .topbar {
        padding: 18px 28px 14px;
      }

      .page {
        width: min(100%, 1520px);
        margin: 0 auto;
        padding: 26px 30px 44px;
      }

      #page-home.active {
        gap: 18px;
      }

      #page-home > .hero {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(360px, .55fr);
        gap: 20px;
        align-items: end;
        padding: 22px 2px 8px;
      }

      #page-home > .hero .hero-title {
        max-width: 760px;
        font-size: clamp(36px, 3.6vw, 58px);
        line-height: 1;
        letter-spacing: 0;
      }

      #page-home > .hero .hero-copy {
        max-width: 460px;
        margin-left: auto;
        font-size: 15px;
      }

      #page-home > .card:nth-of-type(2),
      #page-home > .card.flat {
        grid-column: 1;
      }

      #recentVehiclesCard,
      #page-home > .card.soft:not(#recentVehiclesCard) {
        grid-column: 2;
      }

      #page-home > .module-band,
      #page-home > .home-secondary-grid {
        grid-column: 1 / -1;
      }

      .home-tool-grid,
      .home-secondary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .bottom-nav {
        width: 118px;
        padding: var(--space-20) 12px;
      }

      .nav-btn {
        min-height: 62px;
      }
    }

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

      body {
        background: #eef2f7 !important;
      }

      .app {
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 0 0 0 calc(88px + var(--ck-safe-left)) !important;
      }

      .app-inner {
        height: 100dvh !important;
        width: 100% !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
      }

      .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 25 !important;
        min-height: 44px !important;
        padding: 6px 12px !important;
        background: rgba(7,17,31,.96) !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
        box-shadow: 0 10px 24px rgba(7,17,31,.18) !important;
      }

      .brand-row {
        min-height: 30px !important;
      }

      .ck-brand-full {
        width: 170px !important;
        max-width: 42vw !important;
        max-height: 28px !important;
        background-size: contain !important;
        background-position: left center !important;
      }

      .brand-subtitle,
      .vehicle-context {
        display: none !important;
      }

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

      .page {
        width: 100% !important;
        padding: 10px 12px 18px !important;
      }

      #page-home.active {
        display: grid !important;
        grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr) !important;
        grid-auto-rows: min-content !important;
        gap: var(--space-10) !important;
        align-items: start !important;
      }

      #page-home > .hero {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: block !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px 13px !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 16px !important;
        background:
          radial-gradient(circle at top right, rgba(22,163,74,.22), transparent 44%),
          linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
        box-shadow: 0 14px 34px rgba(3,12,27,.22) !important;
      }

      #page-home > .hero .hero-kicker {
        font-size: 9px !important;
        line-height: 1.1 !important;
        letter-spacing: .07em !important;
      }

      #page-home > .hero .hero-title {
        margin-top: var(--space-4) !important;
        font-size: clamp(20px, 3.2vw, 28px) !important;
        line-height: 1.02 !important;
        letter-spacing: 0 !important;
      }

      #page-home > .hero .hero-copy {
        margin-top: 6px !important;
        font-size: 11px !important;
        line-height: 1.28 !important;
        color: rgba(255,255,255,.72) !important;
      }

      #page-home > .card:nth-of-type(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
      }

      #page-home > .card.flat {
        grid-column: 1 !important;
        grid-row: 3 !important;
      }

      #recentVehiclesCard {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
      }

      #page-home > .card.soft:not(#recentVehiclesCard) {
        grid-column: 2 !important;
        grid-row: 3 !important;
      }

      #page-home > .module-band,
      #page-home > .home-secondary-grid {
        grid-column: 1 / -1 !important;
      }

      .card,
      .recent-card,
      .vehicle-hero,
      .sale-hero,
      .inspection-grade-hero,
      .capture-review-card {
        border-radius: 14px !important;
        box-shadow: 0 10px 24px rgba(3,12,27,.10) !important;
      }

      .card {
        padding: 11px !important;
        margin-bottom: 0 !important;
      }

      .section-subtitle,
      .small-note,
      .recent-meta {
        font-size: 11px !important;
        line-height: 1.28 !important;
      }

      .search-box {
        display: grid !important;
        grid-template-columns: minmax(130px, 1fr) auto !important;
        gap: var(--space-8) !important;
      }

      .search-input {
        height: 42px !important;
        min-height: 42px !important;
        font-size: 15px !important;
        letter-spacing: .04em !important;
      }

      .btn,
      .mini-btn,
      .recent-action {
        padding: 8px 10px !important;
      }

      .card-header-row {
        margin-bottom: 8px !important;
      }

      .card-actions {
        gap: var(--space-6) !important;
      }

      .mini-btn {
        padding: 6px 9px !important;
      }

      .recent-list,
      .search-results-list,
      .capture-review-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--space-8) !important;
      }

      .recent-card {
        padding: 10px !important;
      }

      .recent-vehicle-name {
        margin-top: var(--space-4) !important;
        font-size: 13px !important;
      }

      .recent-chip-row {
        margin-top: 7px !important;
      }

      .badge,
      .chip,
      .status-pill {
        border-radius: 999px !important;
      }

      .recent-action-row,
      .module-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--space-6) !important;
        margin-top: 8px !important;
      }

      .module-band {
        margin: 0 !important;
      }

      .module-band-head {
        padding: 2px 2px 8px !important;
        color: #101828 !important;
      }

      .module-band-kicker {
        color: var(--ck-text-secondary);
        font-size: 9px !important;
      }

      .module-band-title {
        font-size: 15px !important;
      }

      .module-band-note {
        display: block !important;
        max-width: none !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        text-align: right !important;
      }

      .home-tool-grid,
      .home-secondary-grid,
      .responsive-card-grid,
      .quick-grid,
      .info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 9px !important;
      }

      .acquisition-card,
      .secondary-tool-card {
        min-height: 0 !important;
      }

      .acquisition-card .section-subtitle,
      .secondary-tool-card .section-subtitle {
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
      }

      .vehicle-hero,
      .sale-hero,
      .inspection-grade-hero {
        min-height: 0 !important;
        margin-bottom: 9px !important;
        padding: 12px !important;
      }

      .vehicle-name,
      .sale-hero h1 {
        font-size: 18px !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
      }

      .vehicle-sub,
      .sale-hero p {
        font-size: 11px !important;
        line-height: 1.28 !important;
      }

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

      .sale-span-2 {
        grid-column: 1 / -1 !important;
      }

      .metric {
        min-height: 54px !important;
        padding: 8px !important;
        border-radius: 12px !important;
      }

      .metric-label {
        font-size: 9px !important;
        line-height: 1.1 !important;
      }

      .metric-value {
        font-size: 13px !important;
      }

      .input,
      .select,
      .textarea,
      input,
      select,
      textarea {
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        border-radius: 11px !important;
      }

      textarea,
      .textarea {
        min-height: 82px !important;
      }

      .bottom-nav {
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: calc(88px + var(--ck-safe-left)) !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: minmax(35px, 1fr) !important;
        gap: 3px !important;
        padding: 6px 6px 6px calc(6px + var(--ck-safe-left)) !important;
        transform: none !important;
        border: 0 !important;
        border-right: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 0 !important;
        background: linear-gradient(180deg, #07111f, #0b1728) !important;
        box-shadow: none !important;
        overflow-y: auto !important;
      }

      .nav-btn,
      .mobile-more-btn {
        width: 100% !important;
        min-height: 35px !important;
        padding: 3px 2px !important;
        border-radius: 10px !important;
        gap: 1px !important;
        color: rgba(255,255,255,.72) !important;
        background: rgba(255,255,255,.055) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
      }

      .nav-btn.active {
        color: #ffffff !important;
        background: linear-gradient(135deg, #1d4ed8, #16a34a) !important;
        box-shadow: 0 10px 20px rgba(29,78,216,.22) !important;
      }

      .nav-icon {
        width: 24px !important;
        height: 17px !important;
        font-size: 12px !important;
        line-height: 1 !important;
      }

      .nav-btn span:last-child {
        display: block !important;
        max-width: 70px !important;
        font-size: 8.5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        display: grid !important;
      }

      .mobile-more-btn,
      .mobile-nav-more,
      .mobile-nav-backdrop {
        display: none !important;
      }

      .toast {
        right: 12px !important;
        bottom: 12px !important;
        left: calc(104px + var(--ck-safe-left)) !important;
      }
    }

    @media (orientation: landscape) and (max-height: 430px) and (max-width: 940px) {
      .app {
        padding-left: calc(78px + var(--ck-safe-left)) !important;
      }

      .nav-btn {
        border-radius: 8px !important;
      }

      #page-home > .hero .hero-copy,
      .module-band-note,
      .vehicle-sub,
      .sale-hero p {
        display: none !important;
      }

      #page-home > .hero .hero-title {
        font-size: 20px !important;
      }

      .home-tool-grid,
      .home-secondary-grid,
      .responsive-card-grid,
      .quick-grid,
      .info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--space-8) !important;
      }

      .recent-list,
      .search-results-list,
      .capture-review-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .toast {
        left: calc(92px + var(--ck-safe-left)) !important;
      }
    }
    :root {
      --ck-stage12-rail: 112px;
      --ck-stage12-rail-compact: 86px;
    }

    .app,
    .app-inner,
    .page,
    .card,
    .recent-card,
    .recent-card-top,
    .recent-title-block,
    .card-header-row,
    .home-tool-grid,
    .home-secondary-grid,
    .module-band,
    .module-actions,
    .search-box,
    .btn,
    .mini-btn,
    .recent-action {
      min-width: 0;
    }

    .recent-list {
      align-items: start;
    }

    .recent-card-top > div:last-child {
      max-width: min(128px, 42vw);
    }

    .recent-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (min-width: 900px), (orientation: landscape) and (min-width: 700px) {

      .ck-brand-full {
        background-size: contain !important;
      }

      .vehicle-context {
        max-width: min(500px, 46vw) !important;
        margin-top: 6px !important;
        border-radius: 12px !important;
      }

      .bottom-nav {
        overflow-x: hidden !important;
      }

      .nav-btn,
      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        text-align: center !important;
      }

      .nav-icon {
        display: grid !important;
        place-items: center !important;
        line-height: 1 !important;
      }

      #page-home > .card:nth-of-type(2),
      #recentVehiclesCard,
      #page-home > .card.soft:not(#recentVehiclesCard),
      #page-home > .card.flat {
        margin-bottom: 0 !important;
      }

      #page-home > .module-band,
      #page-home > .home-secondary-grid {
        margin: 0 !important;
      }

      #page-home > .home-secondary-grid {
        align-self: stretch !important;
      }

      .card {
        margin-bottom: 0 !important;
      }

      .section-subtitle {
        font-size: 13px !important;
        line-height: 1.45 !important;
      }

      .recent-list,
      #recentVehiclesContent .recent-list {
        grid-template-columns: 1fr !important;
        gap: var(--space-10) !important;
      }

      .home-secondary-grid {
        margin-top: 14px !important;
      }
    }

    @media (min-width: 900px) and (max-width: 1180px), (orientation: landscape) and (max-height: 740px) and (max-width: 1180px) {
      .app {
        padding-left: calc(var(--ck-stage12-rail-compact) + var(--ck-safe-left)) !important;
        background:
          linear-gradient(90deg, #07111f 0, #07111f calc(var(--ck-stage12-rail-compact) + var(--ck-safe-left)), transparent calc(var(--ck-stage12-rail-compact) + var(--ck-safe-left))),
          linear-gradient(180deg, #07111f 0%, #0b1728 52px, #eef2f7 52px, #eef2f7 100%) !important;
      }

      .brand-row {
        min-height: 34px !important;
      }

      .ck-brand-full {
        max-height: 29px !important;
      }

      .vehicle-context {
        display: none !important;
      }

      .page {
        width: 100% !important;
      }

      .bottom-nav {
        grid-auto-rows: minmax(38px, max-content) !important;
        padding: 6px 6px 6px calc(6px + var(--ck-safe-left)) !important;
      }

      .nav-btn,
      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        border-radius: 10px !important;
        padding: 4px 3px !important;
      }

      .nav-icon {
        height: 16px !important;
        font-size: 13px !important;
      }

      .nav-btn span:last-child {
        font-size: 8px !important;
      }

      .card {
        padding: 11px !important;
        border-radius: 10px !important;
      }

      .section-title {
        font-size: 14px !important;
      }

      .search-box {
        gap: 7px !important;
      }

      .btn,
      .recent-action {
        min-height: 36px !important;
        padding: 7px 8px !important;
        font-size: 11px !important;
      }

      .mini-btn {
        min-height: 30px !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
      }

      .card-header-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: var(--space-8) !important;
      }

      .recent-card-top {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: var(--space-8) !important;
      }

      .recent-vehicle-name {
        line-height: 1.12 !important;
      }

      .recent-action-row,
      .module-actions {
        gap: var(--space-6) !important;
      }

      .module-band-head {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
        padding-bottom: 7px !important;
      }

      .module-band-note {
        display: none !important;
      }
    }

    @media (orientation: landscape) and (max-height: 470px) and (max-width: 940px) {
      :root {
        --ck-stage12-rail-compact: 76px;
      }

      .ck-brand-full {
        max-height: 24px !important;
      }

      .section-subtitle {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
      }

      .badge {
        padding: 5px 7px !important;
        font-size: 10px !important;
      }
    }

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

      .app-inner {
        margin: 0 auto !important;
      }

      .bottom-nav {
        z-index: 58 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: grid !important;
      }

      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        display: none !important;
      }

      .mobile-more-btn {
        display: grid !important;
      }

      .mobile-nav-backdrop.show {
        display: block !important;
        z-index: 70 !important;
      }

      .mobile-nav-more {
        z-index: 72 !important;
        box-sizing: border-box !important;
        max-width: calc(100% - 20px) !important;
      }

      .mobile-nav-more.show {
        display: grid !important;
      }
    }

    @media (min-width: 900px), (orientation: landscape) and (min-width: 700px) {

      #page-home > .home-primary-column,
      #page-home > .home-operations-column {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
      }

      #page-home > .home-primary-column {
        grid-column: 1 !important;
        grid-row: 1 !important;
      }

      #page-home > .home-operations-column {
        grid-column: 2 !important;
        grid-row: 1 !important;
      }

      #page-home > .home-primary-column > *,
      #page-home > .home-operations-column > * {
        grid-column: auto !important;
        grid-row: auto !important;
        margin: 0 !important;
      }

      #page-home > .card:nth-of-type(2),
      #recentVehiclesCard,
      #page-home > .card.soft:not(#recentVehiclesCard),
      #page-home > .card.flat,
      #page-home > .module-band,
      #page-home > .home-secondary-grid {
        grid-column: auto !important;
        grid-row: auto !important;
      }

      .home-primary-column > .card:first-child {
        border-top: 3px solid #1d4ed8 !important;
      }

      .home-primary-column > .card.soft:not(#recentVehiclesCard) {
        border-top: 3px solid #64748b !important;
      }

      .home-primary-column > .card.flat {
        border-top: 3px solid #0b1f3a !important;
      }

      .acquisition-card {
        flex-direction: column !important;
        justify-content: space-between !important;
      }

      .secondary-tool-card {
        flex-direction: column !important;
        justify-content: space-between !important;
      }
    }
    .app {
      color: var(--ck-text);
      font-family: Inter, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    .page {
      isolation: isolate;
    }

    .card,
    .card.soft,
    .card.flat,
    .recent-card,
    .vehicle-card,
    .empty,
    .btn,
    .mini-btn,
    .recent-action,
    .input,
    .select,
    .textarea,
    .search-input {
      border-radius: 8px !important;
    }

    .section-title,
    .module-band-title,
    .recent-vehicle-name,
    .vehicle-name {
      color: var(--ck-text) !important;
      font-weight: 900 !important;
      letter-spacing: 0 !important;
    }

    .section-subtitle,
    .recent-meta,
    .module-band-note,
    .small-note {
      color: var(--ck-muted) !important;
      font-weight: 500 !important;
      letter-spacing: 0 !important;
    }

    .btn,
    .mini-btn,
    .recent-action {
      letter-spacing: 0 !important;
      box-shadow: none !important;
    }

    .btn.ghost,
    .mini-btn,
    .recent-action:not(.primary) {
      background: var(--ck-ghost-bg) !important;
      border-color: var(--ck-line) !important;
      color: var(--ck-ghost-text) !important;
    }

    @media (min-width: 900px), (orientation: landscape) and (min-width: 700px) {

      .status-pill {
        min-height: 34px !important;
        padding: 7px 12px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
      }

      .home-primary-column > .card,
      .home-operations-column .card,
      .home-operations-column .acquisition-card,
      .home-operations-column .secondary-tool-card {
        padding: 18px !important;
        border: 1px solid var(--ck-line-soft) !important;
        background: var(--ck-surface-glass) !important;
        box-shadow: var(--ck-shadow) !important;
      }

      .home-primary-column > .card:first-child {
        background:
          linear-gradient(135deg, rgba(29, 78, 216, 0.12), transparent 42%),
          var(--ck-card) !important;
      }

      .search-box {
        margin-top: 14px !important;
      }

      .search-input {
        padding: 0 16px !important;
        border: 2px solid var(--ck-line) !important;
        background: var(--ck-input) !important;
        color: var(--ck-text) !important;
        font-weight: 900 !important;
      }

      .search-box .btn {
        font-size: 15px !important;
      }

      .card-header-row {
        margin-bottom: 14px !important;
      }

      #recentVehiclesCard {
        border-top: 4px solid #159947 !important;
      }

      .recent-card {
        padding: var(--space-14) !important;
        border: 1px solid var(--ck-line) !important;
        background:
          linear-gradient(180deg, var(--ck-surface-subtle), transparent 88px),
          var(--ck-card) !important;
      }

      .recent-card .plate {
        min-width: 132px !important;
        min-height: 42px !important;
        font-size: 16px !important;
      }

      .recent-card-top > div:last-child {
        max-width: 132px !important;
      }

      .recent-vehicle-name {
        margin-top: 10px !important;
        font-size: 17px !important;
        line-height: 1.15 !important;
      }

      .recent-chip-row {
        gap: 7px !important;
        margin-top: 12px !important;
      }

      .badge,
      .chip {
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
      }

      .recent-action-row {
        margin-top: 12px !important;
      }

      .recent-action {
        font-size: 13px !important;
      }

      .module-band-kicker {
        margin-bottom: var(--space-4) !important;
        color: var(--ck-text-secondary);
        font-size: 12px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
      }

      .acquisition-card {
        border-top-width: 4px !important;
      }

      .secondary-tool-card {
        border-top: 3px solid var(--ck-line) !important;
      }

      .acquisition-card .section-title,
      .secondary-tool-card .section-title {
        font-size: 20px !important;
        line-height: 1.15 !important;
      }

      .module-actions {
        margin-top: 16px !important;
      }

      .module-actions .btn,
      .secondary-tool-card .btn {
        min-height: 48px !important;
        font-size: 14px !important;
      }
    }

    @media (min-width: 1280px) {
      .home-tool-grid,
      .home-secondary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }

    @media (min-width: 900px) and (max-width: 1180px), (orientation: landscape) and (max-height: 740px) and (max-width: 1180px) {
      .topbar {
        min-height: 44px !important;
        padding: 5px 11px !important;
      }

      .ck-brand-full {
        width: 152px !important;
        height: 28px !important;
      }

      .bottom-nav {
        width: calc(78px + var(--ck-safe-left)) !important;
        gap: 4px !important;
      }

      .nav-btn,
      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        min-height: 36px !important;
      }

      .page {
        padding: 9px 10px 14px !important;
      }

      #page-home.active {
        grid-template-columns: minmax(285px, 0.76fr) minmax(0, 1.24fr) !important;
        gap: var(--space-10) !important;
      }

      #page-home > .home-primary-column,
      #page-home > .home-operations-column {
        gap: 9px !important;
      }

      .home-primary-column > .card,
      .home-operations-column .card,
      .home-operations-column .acquisition-card,
      .home-operations-column .secondary-tool-card {
        padding: 11px !important;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
      }

      .home-primary-column > .card:first-child .section-title,
      .acquisition-card .section-title,
      .secondary-tool-card .section-title {
        font-size: 15px !important;
      }

      .section-subtitle,
      .recent-meta {
        font-size: 11px !important;
        line-height: 1.3 !important;
      }

      .search-box {
        grid-template-columns: minmax(0, 1fr) 88px !important;
        margin-top: 8px !important;
      }

      .search-input,
      .search-box .btn {
        height: 40px !important;
        min-height: 40px !important;
      }

      .search-input {
        font-size: 15px !important;
      }

      .recent-card {
        padding: 9px !important;
      }

      .recent-card .plate {
        min-width: 112px !important;
        min-height: 36px !important;
        font-size: 13px !important;
      }

      .recent-card-top > div:last-child {
        max-width: 102px !important;
      }

      .recent-vehicle-name {
        margin-top: 7px !important;
        font-size: 13px !important;
      }

      .recent-chip-row .badge:nth-child(n+4) {
        display: none !important;
      }

      .recent-action {
        min-height: 35px !important;
        font-size: 11px !important;
      }

      .module-band-title {
        font-size: 18px !important;
      }

      .home-tool-grid,
      .home-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
      }

      .acquisition-card,
      .secondary-tool-card {
        min-height: 0 !important;
      }

      .module-actions .btn,
      .secondary-tool-card .btn {
        min-height: 38px !important;
        font-size: 11px !important;
      }
    }

    @media (orientation: landscape) and (max-height: 430px) and (max-width: 940px) {

      .recent-card .plate {
        min-width: 104px !important;
      }
    }

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

      .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 46 !important;
        background: rgba(7, 17, 31, 0.98) !important;
        box-shadow: 0 10px 24px rgba(7, 17, 31, 0.22) !important;
      }

      #page-home > .hero {
        display: block !important;
        margin: 0 0 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        background:
          linear-gradient(135deg, rgba(29, 78, 216, 0.30), rgba(21, 153, 71, 0.16)),
          #0b1728 !important;
        box-shadow: 0 16px 34px rgba(7, 17, 31, 0.24) !important;
      }

      .hero-kicker {
        color: #93c5fd !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
      }

      .hero-title {
        margin-top: 6px !important;
        color: #fff !important;
      }

      .hero-copy {
        color: #cbd5e1 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
      }

      .card,
      .card.soft,
      .card.flat,
      .acquisition-card,
      .secondary-tool-card {
        margin-bottom: 12px !important;
        border: 1px solid var(--ck-line-soft) !important;
        background: var(--ck-surface-glass) !important;
        box-shadow: var(--ck-shadow) !important;
      }

      .module-band-head {
        color: var(--ck-text) !important;
        padding: 2px 0 10px !important;
      }

      .module-band-kicker {
        color: var(--ck-text-secondary);
        font-size: 11px !important;
      }

      .module-band-title {
        color: var(--ck-text) !important;
      }

      .module-band-note {
        margin-top: 6px !important;
      }

      .bottom-nav {
        background: var(--ck-surface-glass) !important;
        border-top: 1px solid var(--ck-line) !important;
      }

      .nav-btn {
        padding: 6px 2px !important;
      }

      .nav-btn span:last-child {
        display: block !important;
        font-size: 8px !important;
        line-height: 1 !important;
      }
    }

    @media (max-width: 390px) and (orientation: portrait) {
      .nav-btn span:last-child {
        display: none !important;
      }
    }

    @media (orientation: landscape) and (max-width: 940px) {
      .toast {
        right: 10px !important;
        bottom: 10px !important;
        width: min(330px, calc(100vw - 110px)) !important;
        max-width: min(330px, calc(100vw - 110px)) !important;
        padding: 10px 11px !important;
        font-size: 11px !important;
      }
    }
    :root {
      --ck-ui-bg: var(--ck-bg);
      --ck-ui-surface: var(--ck-surface-glass);
      --ck-ui-text: var(--ck-text);
      --ck-ui-muted: var(--ck-muted);
      --ck-ui-line: var(--ck-line-soft);
      --ck-ui-shadow: var(--ck-shadow-hover);
      --ck-ui-shadow-soft: var(--ck-shadow);
      --ck-ui-radius: 8px;
    }

    .app {
      background:
        radial-gradient(circle at 82% -120px, rgba(21, 153, 71, 0.10), transparent 300px),
        radial-gradient(circle at 18% -130px, rgba(29, 78, 216, 0.13), transparent 320px),
        var(--ck-ui-bg) !important;
    }

    .card,
    .recent-card,
    .vehicle-card,
    .acquisition-card,
    .secondary-tool-card,
    .empty {
      border: 1px solid var(--ck-ui-line) !important;
      border-radius: var(--ck-ui-radius) !important;
      background: var(--ck-ui-surface) !important;
      box-shadow: var(--ck-ui-shadow-soft) !important;
    }

    .section-title {
      margin-bottom: 6px !important;
      color: var(--ck-ui-text) !important;
      font-size: 18px !important;
      font-weight: 900 !important;
    }

    .section-subtitle {
      margin-bottom: 12px !important;
      color: var(--ck-ui-muted) !important;
      font-size: 13px !important;
      line-height: 1.43 !important;
    }

    .btn,
    .mini-btn,
    .recent-action {
      border-radius: var(--ck-ui-radius) !important;
      min-height: 44px !important;
      font-size: 13px !important;
      font-weight: 900 !important;
    }

    .btn.primary,
    .recent-action.primary {
      background: linear-gradient(135deg, #2557d6, #173d98) !important;
      border-color: #173d98 !important;
      color: #fff !important;
    }

    .btn.green {
      background: linear-gradient(135deg, #159947, #0c7131) !important;
      border-color: #0c7131 !important;
      color: #fff !important;
    }

    @media (min-width: 900px), (orientation: landscape) and (min-width: 700px) {
      .topbar {
        height: 66px !important;
      }

      #page-home > .home-primary-column,
      #page-home > .home-operations-column {
        gap: 16px !important;
      }

      .home-primary-column > .card,
      .home-operations-column .card {
        padding: 18px !important;
      }

      .home-primary-column > .card:first-child {
        padding: 22px !important;
      }

      .home-primary-column > .card:first-child .section-title {
        font-size: 23px !important;
      }

      .search-input {
        border-radius: var(--ck-ui-radius) !important;
      }

      .search-box .btn {
        min-height: 56px !important;
      }
    }

    @media (orientation: landscape) and (max-width: 940px) {
      .topbar {
        height: 44px !important;
        min-height: 44px !important;
      }

      .nav-btn {
        padding: 5px 4px !important;
        gap: 0 !important;
      }

      .nav-btn span:last-child {
        display: none !important;
      }

      .nav-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 15px !important;
      }

      .page {
        padding: 9px 10px 14px !important;
      }

      #page-home.active {
        grid-template-columns: minmax(284px, 0.76fr) minmax(0, 1.24fr) !important;
        gap: var(--space-10) !important;
      }

      .home-primary-column > .card,
      .home-operations-column .card {
        padding: 11px !important;
      }

      .section-title {
        font-size: 15px !important;
      }

      .section-subtitle {
        font-size: 11px !important;
      }

      .module-band-title {
        font-size: 18px !important;
      }

      .acquisition-card,
      .secondary-tool-card {
        min-height: 0 !important;
      }
    }

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

      #page-home > .hero {
        border-radius: var(--ck-ui-radius) !important;
        padding: 19px 16px !important;
      }

      .bottom-nav {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
      }

      .nav-btn[data-page="sale"] {
        display: grid !important;
      }
    }
    .ck-brand-full {
      filter: drop-shadow(0 7px 13px rgba(0, 0, 0, 0.28)) saturate(1.08) !important;
    }

    .brand-row {
      align-items: center !important;
    }

    .brand-subtitle {
      color: rgba(255, 255, 255, 0.76) !important;
      font-size: 11px !important;
      font-weight: 750 !important;
      letter-spacing: 0 !important;
    }

    .nav-icon,
    .mobile-nav-more button span {
      display: inline-grid !important;
      place-items: center !important;
      color: currentColor !important;
    }

    .nav-icon svg,
    .mobile-nav-more svg {
      width: 18px !important;
      height: 18px !important;
      display: block !important;
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 2.15 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    .nav-btn {
      overflow: hidden !important;
      isolation: isolate !important;
    }

    .nav-btn:after {
      content: "" !important;
      position: absolute !important;
      inset: auto 18px 8px !important;
      height: 3px !important;
      border-radius: 999px !important;
      background: linear-gradient(90deg, #22c55e, #38bdf8) !important;
      opacity: 0 !important;
      transform: scaleX(.44) !important;
      transform-origin: center !important;
      transition: transform .22s ease, opacity .22s ease !important;
    }

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

    .card,
    .recent-card,
    .vehicle-card,
    .acquisition-card,
    .secondary-tool-card,
    .empty {
      position: relative !important;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
    }

    .card:before,
    .recent-card:before,
    .vehicle-card:before,
    .acquisition-card:before,
    .secondary-tool-card:before {
      content: "" !important;
      position: absolute !important;
      inset: 0 0 auto !important;
      height: 3px !important;
      background: linear-gradient(90deg, rgba(37, 87, 214, 0.92), rgba(21, 153, 71, 0.88), rgba(225, 29, 72, 0.70)) !important;
      opacity: 0 !important;
      transition: opacity .22s ease !important;
    }

    .recent-card:before,
    .acquisition-card:before {
      opacity: .86 !important;
    }

    .module-label,
    .module-band-kicker,
    .hero-kicker {
      letter-spacing: .055em !important;
      font-weight: 900 !important;
    }

    .section-title,
    .module-band-title,
    .recent-vehicle-name {
      letter-spacing: 0 !important;
      text-wrap: balance !important;
    }

    .section-subtitle,
    .module-band-note,
    .recent-meta {
      text-wrap: pretty !important;
    }

    .btn,
    .mini-btn,
    .recent-action {
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
    }

    .btn.primary,
    .recent-action.primary {
      box-shadow: 0 12px 26px rgba(37, 87, 214, 0.20) !important;
    }

    .btn.green {
      box-shadow: 0 12px 26px rgba(21, 153, 71, 0.18) !important;
    }

    .search-input:focus,
    .input:focus,
    .select:focus,
    .textarea:focus {
      box-shadow: 0 0 0 4px rgba(37, 87, 214, 0.10), 0 10px 24px rgba(15, 23, 42, 0.07) !important;
    }

    @media (hover: hover) and (pointer: fine) {
      .card:hover,
      .recent-card:hover,
      .vehicle-card:hover,
      .acquisition-card:hover,
      .secondary-tool-card:hover {
        transform: translateY(-2px) !important;
        border-color: rgba(37, 87, 214, 0.20) !important;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12) !important;
      }

      .card:hover:before,
      .vehicle-card:hover:before,
      .secondary-tool-card:hover:before {
        opacity: .72 !important;
      }

      .btn:hover,
      .mini-btn:hover,
      .recent-action:hover,
      .nav-btn:hover {
        transform: translateY(-1px) !important;
      }
    }

    @media (orientation: landscape) and (max-width: 940px) {
      .nav-btn:after {
        inset: auto 10px 3px !important;
        height: 2px !important;
      }

      .nav-icon svg {
        width: 17px !important;
        height: 17px !important;
      }
    }

    @media (max-width: 899px) and (orientation: portrait) {
      .bottom-nav {
        box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08) !important;
      }

      .nav-icon svg {
        width: 17px !important;
        height: 17px !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .app *,
      .app *:before,
      .app *:after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
    .vehicle-hero {
      color: #f8fafc !important;
    }

    .vehicle-hero .vehicle-name {
      color: #f8fafc !important;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22) !important;
    }

    .vehicle-hero .vehicle-sub {
      color: rgba(226, 232, 240, 0.82) !important;
    }

    .vehicle-hero .metric {
      background: rgba(255, 255, 255, 0.10) !important;
      border-color: rgba(255, 255, 255, 0.14) !important;
    }

    .vehicle-hero .metric-label {
      color: rgba(226, 232, 240, 0.74) !important;
    }

    .vehicle-hero .metric-value {
      color: #ffffff !important;
    }

    .vehicle-hero .plate {
      color: #0f172a !important;
    }
    .app,
    .app-inner,
    .page,
    .topbar,
    .card,
    .card.soft,
    .card.flat,
    .vehicle-card,
    .vehicle-hero,
    .recent-card,
    .acquisition-card,
    .secondary-tool-card,
    .module-band,
    .home-primary-column,
    .home-operations-column,
    .empty,
    .metric,
    .badge {
      min-width: 0 !important;
      max-width: 100% !important;
    }

    .page,
    .app-inner {
      overflow-x: hidden !important;
    }

    .card,
    .card.soft,
    .card.flat,
    .vehicle-card,
    .vehicle-hero,
    .recent-card,
    .acquisition-card,
    .secondary-tool-card,
    .empty {
      overflow: hidden !important;
    }

    .hero-title,
    .section-title,
    .module-band-title,
    .vehicle-name,
    .vehicle-hero .vehicle-name,
    .recent-vehicle-name,
    .metric-value {
      line-height: 1.08 !important;
      white-space: normal !important;
      overflow-wrap: break-word !important;
      word-break: normal !important;
      text-overflow: clip !important;
    }

    .hero-copy,
    .section-subtitle,
    .module-band-note,
    .vehicle-sub,
    .recent-meta,
    .metric-label,
    .empty,
    .badge {
      white-space: normal !important;
      overflow-wrap: break-word !important;
      word-break: normal !important;
    }

    .btn,
    .mini-btn,
    .link-btn,
    .recent-action {
      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;
    }

    .recent-list,
    #recentVehiclesContent .recent-list {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 282px), 1fr)) !important;
      gap: var(--space-12) !important;
    }

    .recent-card-top {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: start !important;
      gap: var(--space-12) !important;
    }

    .recent-card-top > div:last-child {
      min-width: 0 !important;
      justify-self: end !important;
    }

    .recent-chip-row {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 7px !important;
    }

    .recent-action-row {
      grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
      gap: var(--space-8) !important;
    }

    .card-header-row,
    .module-band-head {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: start !important;
      gap: var(--space-12) !important;
    }

    @media (max-width: 760px) {

      .card-actions,
      .recent-action-row {
        grid-template-columns: 1fr !important;
      }
    }

    @media (orientation: landscape) and (max-height: 680px) {
      .page {
        padding-top: 10px !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
      }

      .hero,
      #page-home > .hero,
      .card,
      .card.soft,
      .card.flat,
      .vehicle-hero,
      .recent-card,
      .acquisition-card,
      .secondary-tool-card {
        border-radius: 8px !important;
        padding: 12px !important;
      }

      .hero-title {
        font-size: clamp(21px, 4.2vw, 34px) !important;
      }

      .section-title,
      .module-band-title {
        font-size: clamp(16px, 2.5vw, 22px) !important;
      }

      .section-subtitle,
      .module-band-note,
      .hero-copy,
      .recent-meta {
        font-size: 12px !important;
        line-height: 1.35 !important;
      }

      .recent-action-row {
        grid-template-columns: repeat(3, minmax(74px, 1fr)) !important;
      }

      .bottom-nav {
        max-height: 66px !important;
      }
    }
    @media (max-width: 760px) {
      html,
      body,
      .app,
      .app-inner,
      .topbar,
      .page {
        overflow-x: hidden !important;
      }

      .app-inner,
      .page {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .hero,
      #page-home > .hero,
      .card,
      .card.soft,
      .card.flat {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .search-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
      }

      .search-input,
      .search-box .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
      }

      .empty {
        padding-inline: 12px !important;
      }
    }
    @media (max-width: 760px) {
      .app,
      .app-inner,
      main,
      .page,
      #page-home.active {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }

      .page,
      #page-home.active {
        padding-left: 12px !important;
        padding-right: 12px !important;
      }

      .topbar {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
      }

      .brand-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
      }

      .status-pill {
        max-width: 104px !important;
        min-width: 0 !important;
        padding-inline: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .hero,
      #page-home > .hero {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 16px !important;
        box-sizing: border-box !important;
      }

      .hero-title {
        max-width: 100% !important;
        letter-spacing: 0 !important;
      }

      .hero-copy {
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
      }

      .home-primary-column,
      .home-operations-column,
      .sale-tools-grid,
      .operations-grid,
      .secondary-tool-grid,
      .card-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
      }

      .card,
      .card.soft,
      .card.flat,
      .module-band,
      .vehicle-card,
      .recent-card,
      .empty {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      .card-header-row,
      .module-band-head,
      .recent-card-top {
        grid-template-columns: 1fr !important;
      }
    }

    @media (max-width: 420px) {

      .section-title {
        font-size: 19px !important;
      }
    }
    @media (min-width: 900px), (orientation: landscape) and (min-width: 700px) {
      html,
      body,
      .app,
      .app-inner {
        overflow-x: hidden !important;
      }

      .bottom-nav {
        max-height: none !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
      }

      .bottom-nav::-webkit-scrollbar {
        display: none !important;
      }
    }

    @media (orientation: landscape) and (max-width: 940px) {
      .app-inner {
        padding-left: calc(58px + var(--ck-safe-left, 0px)) !important;
      }

      .bottom-nav {
        width: calc(58px + var(--ck-safe-left, 0px)) !important;
        grid-auto-rows: 34px !important;
        gap: 5px !important;
        padding: 6px 5px 6px calc(5px + var(--ck-safe-left, 0px)) !important;
      }

      .nav-btn,
      .nav-btn[data-page="home"],
      .nav-btn[data-page="vehicle"],
      .nav-btn[data-page="intelligence"],
      .nav-btn[data-page="inspection"],
      .nav-btn[data-page="sale"],
      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
      }
    }
    body .app .bottom-nav {
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }

    body .app .bottom-nav::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      display: none !important;
    }

    @media (min-width: 900px), (orientation: landscape) and (min-width: 700px) {
      body .app .bottom-nav {
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        overscroll-behavior: none !important;
      }
    }
    @media (min-width: 900px), (orientation: landscape) and (min-width: 700px) {
      body,
      body .app,
      body .app .app-inner {
        scrollbar-gutter: auto !important;
      }

      body .app .bottom-nav {
        max-width: calc(106px + var(--ck-safe-left, 0px)) !important;
        contain: paint !important;
        scrollbar-gutter: auto !important;
        -webkit-overflow-scrolling: auto !important;
      }

      body .app .bottom-nav::-webkit-scrollbar,
      body .app .bottom-nav::-webkit-scrollbar-button,
      body .app .bottom-nav::-webkit-scrollbar-track,
      body .app .bottom-nav::-webkit-scrollbar-thumb,
      body .app .bottom-nav::-webkit-scrollbar-corner {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        background: transparent !important;
      }
    }
    :root {
      --ck-vi-rail: 112px;
      --ck-vi-rail-compact: 74px;
      --ck-vi-topbar: 68px;
      --ck-vi-surface: var(--ck-bg);
      --ck-vi-line: var(--ck-line);
      --ck-vi-shadow: var(--ck-shadow-hover);
    }

    @media (min-width: 900px), (orientation: landscape) and (min-width: 700px) {
      html,
      body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        background: var(--ck-vi-surface) !important;
      }

      .app {
        min-height: 100dvh !important;
        padding-left: 0 !important;
        padding-bottom: 0 !important;
        background:
          linear-gradient(90deg, var(--ck-chrome-bg) 0, var(--ck-chrome-bg) var(--ck-vi-rail), transparent var(--ck-vi-rail)),
          linear-gradient(180deg, var(--ck-chrome-bg) 0, var(--ck-chrome-bg) var(--ck-vi-topbar), var(--ck-vi-surface) var(--ck-vi-topbar), var(--ck-vi-surface) 100%) !important;
      }

      .app-inner {
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding-left: var(--ck-vi-rail) !important;
      }

      main,
      .page {
        width: 100% !important;
        max-width: calc(100vw - var(--ck-vi-rail)) !important;
        overflow-x: hidden !important;
      }

      .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 32 !important;
        min-height: var(--ck-vi-topbar) !important;
        padding: 10px 24px !important;
        overflow: hidden !important;
        background: rgba(7, 17, 31, .985) !important;
        border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
      }

      .brand-row {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
      }

      .ck-brand-full {
        width: 210px !important;
        height: 42px !important;
        max-width: 34vw !important;
        max-height: 42px !important;
      }

      .brand-subtitle,
      .vehicle-context {
        display: none !important;
      }

      .bottom-nav {
        position: fixed !important;
        z-index: 40 !important;
        inset: 0 auto 0 0 !important;
        width: var(--ck-vi-rail) !important;
        max-width: var(--ck-vi-rail) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: 58px !important;
        align-content: start !important;
        gap: 7px !important;
        padding: var(--space-14) 9px !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, var(--ck-chrome-bg), var(--ck-chrome-bg-soft)) !important;
        border: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, .10) !important;
        border-radius: 0 !important;
        box-shadow: 14px 0 34px rgba(7, 17, 31, .18) !important;
        transform: none !important;
      }

      .nav-btn,
      .nav-btn[data-page="home"],
      .nav-btn[data-page="vehicle"],
      .nav-btn[data-page="intelligence"],
      .nav-btn[data-page="inspection"],
      .nav-btn[data-page="sale"],
      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 24px auto !important;
        place-items: center !important;
        gap: 3px !important;
        padding: 7px 5px !important;
        border-radius: 8px !important;
        color: var(--ck-chrome-muted) !important;
        background: rgba(255, 255, 255, .06) !important;
        border: 1px solid rgba(255, 255, 255, .09) !important;
        box-shadow: none !important;
      }

      .nav-btn.active {
        color: #ffffff !important;
        background: linear-gradient(180deg, #2452d6, #153985) !important;
        border-color: rgba(92, 137, 255, .42) !important;
        box-shadow: inset 0 -3px 0 #2be3ae, 0 12px 24px rgba(36, 82, 214, .24) !important;
      }

      .nav-icon {
        width: 24px !important;
        height: 22px !important;
        font-size: 16px !important;
      }

      .nav-icon svg {
        width: 19px !important;
        height: 19px !important;
      }

      .nav-btn span:last-child {
        display: block !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 9.5px !important;
        line-height: 1.05 !important;
      }

      .mobile-more-btn,
      .mobile-nav-more,
      .mobile-nav-backdrop {
        display: none !important;
      }

      .page {
        padding: var(--space-20) 24px 34px !important;
        margin: 0 auto !important;
      }

      #page-home.active {
        display: grid !important;
        grid-template-columns: minmax(360px, .62fr) minmax(0, 1.38fr) !important;
        grid-auto-rows: min-content !important;
        gap: 20px !important;
        align-items: start !important;
      }

      #page-home > .hero {
        display: none !important;
      }

      .home-primary-column,
      .home-operations-column {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 16px !important;
        min-width: 0 !important;
      }

      .home-primary-column > *,
      .home-operations-column > * {
        min-width: 0 !important;
        margin: 0 !important;
      }

      .card,
      .card.soft,
      .card.flat,
      .recent-card,
      .vehicle-card,
      .acquisition-card,
      .secondary-tool-card,
      .module-band {
        border-radius: 8px !important;
        border-color: var(--ck-line-soft) !important;
        overflow: hidden !important;
      }

      .card,
      .card.soft,
      .card.flat {
        padding: 18px !important;
      }

      .search-box {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(118px, 156px) !important;
        gap: var(--space-12) !important;
        align-items: stretch !important;
      }

      .search-input {
        min-width: 0 !important;
        height: 54px !important;
        min-height: 54px !important;
        font-size: 20px !important;
      }

      .btn,
      .mini-btn,
      .recent-action {
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 44px !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        line-height: 1.12 !important;
        text-align: center !important;
      }

      .card-header-row,
      .module-band-head,
      .recent-card-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: var(--space-12) !important;
        align-items: start !important;
      }

      .card-actions,
      .module-actions,
      .recent-action-row {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr)) !important;
        gap: 9px !important;
      }

      .module-band {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

      .module-band-head {
        padding: 0 0 14px !important;
        color: var(--ck-text) !important;
      }

      .module-band-title {
        max-width: 760px !important;
      }

      .module-band-note {
        max-width: 420px !important;
        text-align: right !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
      }

      .home-tool-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
      }

      .home-secondary-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
      }

      .acquisition-card,
      .secondary-tool-card {
        min-height: 0 !important;
        display: grid !important;
        grid-template-rows: 1fr auto !important;
        gap: 14px !important;
      }

      .section-title,
      .module-band-title,
      .recent-vehicle-name,
      .vehicle-name {
        overflow-wrap: break-word !important;
        word-break: normal !important;
        text-overflow: clip !important;
      }

      .section-subtitle,
      .module-band-note,
      .recent-meta,
      .empty {
        overflow-wrap: break-word !important;
        word-break: normal !important;
      }
    }

    @media (min-width: 900px) and (max-width: 1260px), (orientation: landscape) and (max-width: 1260px) {
      #page-home.active {
        grid-template-columns: minmax(320px, .76fr) minmax(0, 1.24fr) !important;
        gap: 14px !important;
      }

      .home-tool-grid,
      .home-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--space-12) !important;
      }

      .module-band-title {
        font-size: clamp(20px, 3vw, 28px) !important;
      }
    }

    @media (orientation: landscape) and (max-height: 560px) {
      :root {
        --ck-vi-topbar: 48px;
      }

      .topbar {
        padding: 6px 12px !important;
      }

      .brand-row {
        min-height: 34px !important;
      }

      .status-pill {
        min-height: 30px !important;
        max-width: 124px !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
      }

      .bottom-nav {
        grid-auto-rows: 34px !important;
        gap: 5px !important;
        padding: 6px 5px !important;
      }

      .nav-btn,
      .nav-btn[data-page="home"],
      .nav-btn[data-page="vehicle"],
      .nav-btn[data-page="intelligence"],
      .nav-btn[data-page="inspection"],
      .nav-btn[data-page="sale"],
      .nav-btn[data-page="reports"],
      .nav-btn[data-page="history"],
      .nav-btn[data-page="diagnostics"],
      .nav-btn[data-page="help"] {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        grid-template-rows: 17px auto !important;
        padding: 4px 3px !important;
      }

      .nav-icon svg {
        width: 15px !important;
        height: 15px !important;
      }

      .nav-btn span:last-child {
        font-size: 7.8px !important;
      }

      #page-home.active {
        grid-template-columns: minmax(286px, .78fr) minmax(0, 1.22fr) !important;
        gap: var(--space-10) !important;
      }

      .home-primary-column,
      .home-operations-column {
        gap: var(--space-10) !important;
      }

      .section-subtitle,
      .module-band-note,
      .recent-meta,
      .empty {
        font-size: 11px !important;
        line-height: 1.3 !important;
      }

      .search-box {
        gap: var(--space-8) !important;
      }

      .search-input,
      .search-box .btn {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 14px !important;
      }

      .module-band-head {
        grid-template-columns: 1fr !important;
        padding-bottom: 9px !important;
      }

      .module-band-note {
        max-width: none !important;
        text-align: left !important;
      }

      .recent-card .plate {
        transform: scale(.86) !important;
        transform-origin: left center !important;
      }

      .recent-chip-row .badge:nth-child(n+4) {
        display: none !important;
      }

      .btn,
      .mini-btn,
      .recent-action {
        min-height: 34px !important;
        padding: 7px 8px !important;
        font-size: 11px !important;
      }
    }

    @media (max-width: 899px) and (orientation: portrait) {
      .app {
        padding-left: 0 !important;
        padding-bottom: calc(86px + var(--ck-safe-bottom)) !important;
        background:
          linear-gradient(180deg, var(--ck-chrome-bg) 0, var(--ck-chrome-bg) 132px, var(--ck-vi-surface) 132px, var(--ck-vi-surface) 100%) !important;
      }

      .app-inner {
        padding-left: 0 !important;
      }

      .vehicle-context {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
      }

      .page,
      #page-home.active {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: var(--space-14) 12px 18px !important;
        overflow-x: hidden !important;
      }

      #page-home.active > .home-primary-column,
      #page-home.active > .home-operations-column,
      .home-tool-grid,
      .home-secondary-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-12) !important;
      }

      .card,
      .card.soft,
      .card.flat,
      .module-band,
      .recent-card,
      .acquisition-card,
      .secondary-tool-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 8px !important;
      }

      .search-box,
      .card-header-row,
      .module-band-head,
      .module-actions,
      .card-actions,
      .recent-action-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-10) !important;
      }

      .module-band-note {
        text-align: left !important;
      }

      .bottom-nav {
        max-width: calc(100vw - 16px) !important;
      }
    }
    :root {
      --ck-vg-radius: 8px;
      --ck-vg-copy: var(--ck-muted);
      --ck-vg-title: var(--ck-text);
      --ck-vg-grid-a: var(--ck-grid-line);
      --ck-vg-grid-b: var(--ck-grid-line);
      --ck-vg-card-border: var(--ck-line-soft);
      --ck-vg-card-shadow: var(--ck-shadow);
    }

    @media (min-width: 900px), (orientation: landscape) and (min-width: 700px) {
      .app-inner {
        background:
          linear-gradient(90deg, var(--ck-vg-grid-a) 1px, transparent 1px),
          linear-gradient(180deg, var(--ck-vg-grid-b) 1px, transparent 1px),
          radial-gradient(circle at 82% 0%, rgba(15, 118, 110, .055), transparent 31%) !important;
        background-size: 72px 72px, 72px 72px, auto !important;
      }

      .topbar {
        box-shadow: 0 10px 28px rgba(7, 17, 31, .16) !important;
      }

      .page {
        padding-top: 18px !important;
      }

      .card,
      .card.soft,
      .card.flat,
        .recent-card,
        .vehicle-card,
        .acquisition-card,
        .secondary-tool-card {
        border-color: var(--ck-vg-card-border) !important;
        border-radius: var(--ck-vg-radius) !important;
        box-shadow: var(--ck-vg-card-shadow) !important;
      }

      .section-title {
        color: var(--ck-vg-title) !important;
        font-size: clamp(20px, 1.65vw, 28px) !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
      }

      h1,
      h2,
      h3,
      .hero-title,
      .section-title,
      .module-band-title,
      .recent-vehicle-name,
      .vehicle-name,
      .acquisition-card h2,
      .acquisition-card h3,
      .secondary-tool-card h2,
      .secondary-tool-card h3 {
        letter-spacing: 0 !important;
      }

      .section-subtitle,
      .module-band-note,
      .recent-meta,
      .empty {
        color: var(--ck-vg-copy) !important;
        font-weight: 640 !important;
      }

      .module-band-title {
        color: var(--ck-vg-title) !important;
        font-size: clamp(22px, 1.85vw, 32px) !important;
        line-height: 1.02 !important;
        font-weight: 930 !important;
      }

      .home-tool-grid,
      .home-secondary-grid {
        align-items: stretch !important;
      }

      .acquisition-card,
      .secondary-tool-card {
        padding: var(--space-16) !important;
      }

      .acquisition-card h2,
      .acquisition-card h3,
      .secondary-tool-card h2,
      .secondary-tool-card h3 {
        font-size: clamp(18px, 1.35vw, 25px) !important;
        line-height: 1.08 !important;
      }

      .acquisition-card p,
      .acquisition-card .section-subtitle,
      .secondary-tool-card .section-subtitle,
      .secondary-tool-card p {
        color: var(--ck-vg-copy) !important;
        font-size: 13.5px !important;
        font-weight: 620 !important;
        line-height: 1.42 !important;
      }

      .btn,
      .mini-btn,
      .recent-action,
      .badge,
      .status-pill {
        border-radius: var(--ck-vg-radius) !important;
        letter-spacing: 0 !important;
      }

      .btn,
      .mini-btn,
      .recent-action {
        font-weight: 800 !important;
      }

      .toast {
        left: auto !important;
        right: max(176px, calc(env(safe-area-inset-right) + 176px)) !important;
        top: 10px !important;
        bottom: auto !important;
        width: min(420px, calc(100vw - var(--ck-vi-rail) - 220px)) !important;
        max-width: min(420px, calc(100vw - var(--ck-vi-rail) - 220px)) !important;
        z-index: 80 !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
        color: var(--ck-text) !important;
        background: var(--ck-surface-glass) !important;
        border: 1px solid rgba(59, 130, 246, .45) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 18, .34) !important;
        font-size: 13px !important;
        line-height: 1.32 !important;
      }
    }

    @media (orientation: landscape) and (max-height: 560px) {
      .app-inner {
        background-size: 58px 58px, 58px 58px, auto !important;
      }

      .card,
      .card.soft,
      .card.flat,
      .recent-card,
      .vehicle-card,
      .acquisition-card,
      .secondary-tool-card {
        padding: 10px !important;
      }

      .module-band-title {
        font-size: 17px !important;
      }

      .acquisition-card h2,
      .acquisition-card h3,
      .secondary-tool-card h2,
      .secondary-tool-card h3,
      .recent-vehicle-name {
        font-size: 14px !important;
        line-height: 1.08 !important;
      }

      .acquisition-card,
      .secondary-tool-card {
        gap: var(--space-8) !important;
      }

      .acquisition-card .empty,
      .secondary-tool-card .empty {
        min-height: 58px !important;
        padding: 10px !important;
        font-size: 10.5px !important;
        line-height: 1.28 !important;
      }

      .acquisition-card .module-actions,
      .secondary-tool-card .module-actions {
        gap: var(--space-6) !important;
      }

      .toast {
        right: 150px !important;
        top: 8px !important;
        bottom: auto !important;
        width: min(300px, calc(100vw - var(--ck-vi-rail) - 218px)) !important;
        max-width: min(300px, calc(100vw - var(--ck-vi-rail) - 218px)) !important;
        padding: 8px 10px !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
      }
    }

    @media (max-width: 899px) and (orientation: portrait) {
      .app-inner {
        background:
          linear-gradient(90deg, var(--ck-grid-line) 1px, transparent 1px),
          linear-gradient(180deg, var(--ck-grid-line) 1px, transparent 1px) !important;
        background-size: 52px 52px !important;
      }

      .section-title {
        font-size: clamp(22px, 6vw, 28px) !important;
      }

      .toast {
        left: 12px !important;
        right: 12px !important;
        top: 70px !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 8px !important;
        padding: 10px 12px !important;
        font-size: 11.5px !important;
        line-height: 1.24 !important;
      }

      body:has(.toast.show) .page.active {
        padding-top: 72px !important;
      }
    }
    :root {
      --ck-mobile-gutter: clamp(12px, 3.6vw, 18px);
      --ck-mobile-touch: 46px;
      --ck-mobile-radius: 8px;
      --ck-mobile-copy: var(--ck-muted);
    }

    @media (max-width: 899px) {
      html,
      body,
      .app,
      .app-inner {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
      }

      .topbar {
        min-height: 62px !important;
        padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
        gap: var(--space-8) !important;
      }

      .brand-row {
        min-width: 0 !important;
        gap: var(--space-8) !important;
      }

      .ck-brand-full {
        width: min(188px, 54vw) !important;
        height: 34px !important;
      }

      .brand-subtitle {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
      }

      .status-pill,
      .context-plate {
        min-height: 30px !important;
        border-radius: var(--ck-mobile-radius) !important;
        font-size: 11px !important;
        letter-spacing: 0 !important;
      }

      .page {
        gap: var(--space-12) !important;
        padding-inline: var(--ck-mobile-gutter) !important;
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
      }

      .hero {
        min-height: 0 !important;
        margin: 0 0 12px !important;
        padding: 18px 16px !important;
        border-radius: var(--ck-mobile-radius) !important;
      }

      .hero-title {
        font-size: clamp(25px, 8vw, 34px) !important;
        line-height: 1.05 !important;
      }

      .hero .hero-copy {
        color: #d9e6f5 !important;
        font-weight: 560 !important;
      }

      .section-subtitle,
      .module-band-note,
      .recent-meta,
      .empty {
        color: var(--ck-mobile-copy) !important;
        font-weight: 560 !important;
      }

      .card,
      .card.soft,
      .card.flat,
      .recent-card,
      .vehicle-card,
      .acquisition-card,
      .secondary-tool-card {
        border-radius: var(--ck-mobile-radius) !important;
        padding: var(--space-16) !important;
      }

      .search-box,
      .module-actions,
      .recent-action-row,
      .card-header-row,
      .recent-card-top {
        gap: var(--space-10) !important;
      }

      .search-input,
      .btn,
      .mini-btn,
      .recent-action,
      .file-link,
      .link-btn {
        min-height: var(--ck-mobile-touch) !important;
        border-radius: var(--ck-mobile-radius) !important;
        font-size: 14px !important;
        line-height: 1.16 !important;
        letter-spacing: 0 !important;
      }

      .home-tool-grid,
      .home-secondary-grid,
      .field-grid,
      .report-grid,
      .metric-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-12) !important;
      }

      .acquisition-card .section-subtitle,
      .secondary-tool-card .section-subtitle {
        display: block !important;
        max-height: 3.1em !important;
        overflow: hidden !important;
      }

      .acquisition-card .empty,
      .secondary-tool-card .empty {
        min-height: 66px !important;
        padding: 12px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
      }

      .bottom-nav {
        padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)) !important;
        gap: var(--space-8) !important;
      }

      .nav-btn {
        min-width: 0 !important;
        min-height: 54px !important;
        border-radius: var(--ck-mobile-radius) !important;
      }
    }

    @media (max-width: 899px) and (orientation: portrait) {
      .search-box {
        grid-template-columns: 1fr !important;
      }

      .module-band-head {
        gap: var(--space-8) !important;
      }

      .module-band-title {
        font-size: clamp(23px, 6.8vw, 30px) !important;
        line-height: 1.04 !important;
      }

      .module-actions {
        grid-template-columns: 1fr !important;
      }

      .mobile-nav-more {
        right: 10px !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        width: min(330px, calc(100vw - 20px)) !important;
        border-radius: var(--ck-mobile-radius) !important;
      }
    }

    @media (min-width: 700px) and (max-width: 899px) and (orientation: portrait) {
      .page {
        padding-inline: 22px !important;
      }

      .search-box {
        grid-template-columns: minmax(0, 1fr) minmax(180px, .38fr) !important;
        align-items: end !important;
      }

      .home-tool-grid,
      .home-secondary-grid,
      .field-grid,
      .report-grid,
      .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .module-actions,
      .recent-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .hero {
        padding: 22px !important;
      }

      .hero-title {
        max-width: 720px !important;
        font-size: 36px !important;
      }
    }

    @media (max-width: 1260px) {
      .page .search-input,
      .page .btn,
      .page .mini-btn,
      .page .recent-action,
      .page .file-link,
      .page .link-btn {
        min-height: 46px !important;
        max-height: none !important;
      }
    }

    @media (orientation: landscape) and (max-height: 560px) {
      :root {
        --ck-vi-rail: 74px;
      }

      .topbar {
        min-height: 48px !important;
        padding-block: 6px !important;
      }

      .ck-brand-full {
        width: 150px !important;
        height: 28px !important;
      }

      .brand-subtitle,
      .vehicle-context {
        display: none !important;
      }

      .page {
        padding: 8px 10px 12px !important;
      }

      .hero {
        display: none !important;
      }

      .search-box {
        grid-template-columns: minmax(0, 1fr) minmax(92px, .58fr) !important;
        align-items: end !important;
      }

      .page .search-input,
      .page .btn,
      .page .mini-btn,
      .page .recent-action {
        min-height: 44px !important;
        max-height: none !important;
        font-size: 12px !important;
      }

      .home-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--space-8) !important;
      }

      .home-secondary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--space-8) !important;
      }

      .section-title,
      .acquisition-card h2,
      .acquisition-card h3,
      .secondary-tool-card h2,
      .secondary-tool-card h3 {
        font-size: 14px !important;
        line-height: 1.08 !important;
      }

      .module-band-note,
      .acquisition-card p,
      .acquisition-card .section-subtitle,
      .secondary-tool-card .section-subtitle,
      .secondary-tool-card p {
        display: none !important;
      }

      .module-actions {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
      }

      .bottom-nav {
        width: var(--ck-vi-rail) !important;
      }

      .bottom-nav .nav-btn {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
      }
    }
/* Vehicle Intelligence actively owned application styles. */
/* Shared operational Actions workspace. */
    .action-hero {
      display: grid;
      gap: 14px;
    }

    .action-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-10);
    }

    .action-metric {
      min-width: 0;
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.09);
    }

    .action-metric span,
    .action-metric strong {
      display: block;
      color: #ffffff;
      letter-spacing: 0;
    }

    .action-metric span {
      font-size: 11px;
      line-height: 1.25;
      color: rgba(255, 255, 255, 0.72);
    }

    .action-metric strong {
      margin-top: 4px;
      font-size: 22px;
      line-height: 1;
    }

    .action-create-card,
    .action-edit-card {
      margin-top: 14px;
      border-radius: 8px !important;
    }

    .action-edit-card {
      border-left: 4px solid #2563eb !important;
    }

    .action-panel-head,
    .action-list-heading,
    .action-item-head,
    .action-form-actions,
    .action-item-actions {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-12);
    }

    .action-form-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-12);
      margin-top: 16px;
    }

    .action-form-grid .form-row,
    .action-filter-bar .form-row {
      min-width: 0;
      margin: 0;
    }

    #actionsContent .input,
    #actionsContent .select,
    #actionsContent input,
    #actionsContent select {
      min-height: 46px !important;
    }

    .action-title-field {
      grid-column: span 2;
    }

    .action-description-field {
      grid-column: 1 / -1;
    }

    .action-form-actions {
      justify-content: flex-end;
      margin-top: 14px;
    }

    .action-form-actions .btn {
      width: auto;
      min-width: 170px;
    }

    .action-filter-bar {
      display: grid;
      grid-template-columns: minmax(150px, 0.7fr) minmax(150px, 0.7fr) minmax(220px, 1.6fr) auto;
      gap: var(--space-10);
      align-items: end;
      margin-top: 14px;
      padding: var(--space-14);
      border: 1px solid var(--ck-line);
      border-radius: 8px;
      background: var(--ck-card-soft);
    }

    .action-clear-filter {
      min-width: 92px;
    }

    .action-list-section {
      margin-top: 18px;
    }

    .action-list-heading {
      align-items: end;
      margin-bottom: 10px;
    }

    .action-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-12);
    }

    .action-item {
      min-width: 0;
      padding: var(--space-16);
      border: 1px solid var(--ck-line);
      border-top: 3px solid #2563eb;
      border-radius: 8px;
      background: var(--ck-card);
      box-shadow: var(--ck-shadow);
    }

    .action-item.is-closed {
      border-top-color: #16a34a;
      background: var(--ck-success-soft);
    }

    .action-item-head {
      align-items: flex-start;
    }

    .action-item-head > div:first-child {
      min-width: 0;
    }

    .action-item h3 {
      margin: 4px 0 0;
      color: var(--ck-text);
      font-size: 17px;
      line-height: 1.22;
      letter-spacing: 0;
      overflow-wrap: break-word;
    }

    .action-type {
      color: #2563eb;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.2;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .action-description,
    .action-reason,
    .action-meta {
      margin: 10px 0 0;
      color: var(--ck-text-soft);
      font-size: 13px;
      line-height: 1.45;
      overflow-wrap: break-word;
    }

    .action-reason {
      color: var(--ck-muted);
    }

    .action-meta {
      padding-top: 10px;
      border-top: 1px solid var(--ck-line);
      font-size: 12px;
    }

    .action-item-actions {
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    body #actionsContent .action-item-actions .mini-btn {
      flex: 0 1 auto;
      min-width: 88px !important;
    }

    @media (max-width: 1100px) {
      .action-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .action-description-field {
        grid-column: 1 / -1;
      }

      .action-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .action-search-field {
        grid-column: 1 / -1;
      }

      .action-clear-filter {
        justify-self: start;
      }
    }

    @media (max-width: 900px) {
      .bottom-nav .nav-btn[data-page="actions"] {
        display: none !important;
      }

      .action-list {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .action-summary-grid,
      .action-form-grid,
      .action-filter-bar {
        grid-template-columns: 1fr;
      }

      .action-title-field,
      .action-description-field,
      .action-search-field {
        grid-column: auto;
      }

      .action-panel-head,
      .action-list-heading,
      .action-item-head {
        align-items: stretch;
        flex-direction: column;
      }

      .action-item-head .badge-row {
        justify-content: flex-start;
      }

      .action-form-actions .btn,
      .action-clear-filter {
        width: 100%;
      }
    }

    @media (orientation: landscape) and (max-height: 560px) {
      .action-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .action-form-grid,
      .action-filter-bar,
      .action-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .action-description-field,
      .action-search-field {
        grid-column: 1 / -1;
      }

      .action-item {
        padding: 12px;
      }
    }

    /* Gate 3 adaptive shell: width and height are independent inputs. */
    :root {
      --ck-vi-rail-compact: 72px;
      --ck-vi-rail-expanded: 248px;
      --ck-vi-workspace-max: 1840px;
    }

    .ck-shell,
    .ck-shell__content,
    .ck-shell__main,
    .ck-shell .page {
      min-width: 0;
    }

    @media (max-width: 599px) and (min-height: 480px) {
      body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
      }

      .app,
      .app-inner {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        margin-left: 0;
      }

      .topbar {
        width: 100%;
        min-height: calc(56px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
      }

      .topbar .brand {
        width: min(42vw, 158px);
      }

      .topbar .staff-identity {
        display: none !important;
      }

      .bottom-nav {
        inset: auto 0 0 !important;
        width: 100% !important;
        height: calc(64px + env(safe-area-inset-bottom)) !important;
        min-height: 64px !important;
        padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-flow: column !important;
        overflow: visible;
      }

      .bottom-nav .nav-btn {
        display: none !important;
        width: 100%;
        min-width: 0;
        min-height: 54px !important;
      }

      .bottom-nav .nav-btn[data-page="home"],
      .bottom-nav .nav-search-btn,
      .bottom-nav .nav-btn[data-page="actions"],
      .bottom-nav .nav-btn[data-page="reports"],
      .bottom-nav .mobile-more-btn {
        display: grid !important;
      }

      .bottom-nav .nav-btn > span:last-child {
        display: block;
        font-size: 10px;
        line-height: 1.1;
      }

      .page {
        padding-right: max(16px, env(safe-area-inset-right));
        padding-left: max(16px, env(safe-area-inset-left));
      }
    }

    @media (min-width: 600px), (max-height: 479px) {
      .app {
        width: 100%;
        max-width: none;
        padding-left: var(--ck-vi-rail-compact) !important;
      }

      .app-inner {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 0;
      }

      .topbar,
      .app-inner > main {
        width: 100%;
        max-width: none;
        margin-left: 0;
      }

      .bottom-nav {
        inset: 0 auto 0 0 !important;
        width: var(--ck-vi-rail-compact) !important;
        height: 100dvh !important;
        min-height: 100vh;
        max-height: none;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
        grid-auto-flow: row !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: minmax(48px, 56px) !important;
        align-content: start;
        gap: 4px;
        overflow-y: auto;
      }

      .bottom-nav .nav-btn {
        width: 56px;
        min-width: 56px;
        min-height: 48px;
        max-height: 56px;
        padding: 5px 3px;
      }

      .bottom-nav .nav-btn > span:last-child {
        display: block;
        font-size: 10px;
        line-height: 1.1;
      }

      .page {
        width: min(100%, var(--ck-vi-workspace-max)) !important;
        max-width: var(--ck-vi-workspace-max) !important;
        margin-inline: auto !important;
      }
    }

    @media (min-width: 1200px) and (min-height: 480px) {
      .app {
        padding-left: var(--ck-vi-rail-expanded) !important;
      }

      .bottom-nav {
        width: var(--ck-vi-rail-expanded) !important;
        padding-inline: 16px !important;
        grid-auto-rows: 56px !important;
      }

      body .app .bottom-nav {
        width: var(--ck-vi-rail-expanded) !important;
        max-width: var(--ck-vi-rail-expanded) !important;
      }

      body .app .bottom-nav .nav-btn,
      body .app .bottom-nav .mobile-more-btn {
        display: grid !important;
      }

      .bottom-nav .nav-btn {
        width: 100% !important;
        max-width: none;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        justify-items: start;
        text-align: left;
        padding-inline: 12px;
      }

      .bottom-nav .nav-btn > span:last-child {
        font-size: 13px;
      }

      .page {
        padding-right: 32px;
        padding-left: 32px;
      }
    }

    @media (min-width: 600px) and (max-width: 1199px) and (min-height: 480px) {
      body .app .bottom-nav .nav-btn {
        display: none !important;
      }

      body .app .bottom-nav .nav-btn[data-page="home"],
      body .app .bottom-nav .nav-search-btn,
      body .app .bottom-nav .nav-btn[data-page="vehicle"],
      body .app .bottom-nav .nav-btn[data-page="intelligence"],
      body .app .bottom-nav .nav-btn[data-page="inspection"],
      body .app .bottom-nav .nav-btn[data-page="actions"],
      body .app .bottom-nav .mobile-more-btn {
        display: grid !important;
      }
    }

    @media (max-height: 479px) and (max-width: 1199px) {
      #page-home > .hero {
        display: none !important;
      }

      .bottom-nav .nav-btn {
        display: none !important;
      }

      .bottom-nav .nav-btn[data-page="home"],
      .bottom-nav .nav-search-btn,
      .bottom-nav .nav-btn[data-page="actions"],
      .bottom-nav .nav-btn[data-page="reports"],
      .bottom-nav .mobile-more-btn {
        display: grid !important;
      }

      .topbar {
        min-height: 48px;
        max-height: 48px;
      }

      .page,
      #page-home.active {
        padding: 8px 12px 16px;
        overflow-x: clip;
      }

      #page-home.active {
        display: block !important;
        width: min(100%, 720px) !important;
      }

      #page-home.active > .home-primary-column,
      #page-home.active > .home-operations-column,
      #page-home.active > .home-primary-column > *,
      #page-home.active > .home-operations-column > * {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-column: auto !important;
        grid-row: auto !important;
      }

      .home-tool-grid,
      .home-secondary-grid,
      .field-grid,
      .report-grid,
      .metric-grid {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .search-box {
        grid-template-columns: minmax(0, 1fr) minmax(104px, .38fr) !important;
      }

      .toast {
        right: 12px;
        left: calc(var(--ck-vi-rail-compact) + 12px);
        width: auto;
      }
    }

    /* Canonical semantic colour and adaptive home composition contract. */
    html[data-theme] body,
    html[data-theme] .app {
      color: var(--ck-text) !important;
    }

    html[data-theme] :where(
      .card,
      .card.soft,
      .card.flat,
      .recent-card,
      .vehicle-card,
      .empty,
      .loader-card,
      .sale-offer,
      .buyerfinder-panel,
      .buyerfinder-route,
      .capture-review-card,
      .capture-review-plan-meta span,
      .damage-map-view-btn,
      .damage-map-draft-panel,
      .damage-map-modal-sheet,
      .damage-photo-chip,
      .action-filter-bar,
      .action-item
    ) {
      background-color: var(--ck-card) !important;
      border-color: var(--ck-line) !important;
      color: var(--ck-text) !important;
    }

    html[data-theme] :where(
      .section-title,
      .module-band-title,
      .recent-vehicle-name,
      .capture-review-title,
      .sale-offer-price,
      .buyerfinder-route strong,
      .action-item h3
    ) {
      color: var(--ck-text) !important;
    }

    html[data-theme] :where(
      .section-subtitle,
      .module-band-note,
      .recent-meta,
      .small-note,
      .capture-review-meta,
      .sale-stage span,
      .sale-offer-meta,
      .buyerfinder-route p,
      .action-description,
      .action-reason,
      .action-meta
    ) {
      color: var(--ck-muted) !important;
    }

    html[data-theme] :where(
      .search-input,
      .input,
      .select,
      .textarea,
      .file-input,
      .capture-review-notes
    ) {
      background: var(--ck-input) !important;
      border-color: var(--ck-line) !important;
      color: var(--ck-text) !important;
      caret-color: var(--ck-blue);
    }

    html[data-theme] :where(
      .search-input,
      .input,
      .textarea,
      .file-input,
      .capture-review-notes
    )::placeholder {
      color: var(--ck-muted) !important;
      opacity: .82;
    }

    html[data-theme] :where(.btn.ghost, .mini-btn, .recent-action:not(.primary)) {
      background: var(--ck-ghost-bg) !important;
      border-color: var(--ck-line) !important;
      color: var(--ck-ghost-text) !important;
    }

    html[data-theme] .capture-review-plan {
      background: var(--ck-success-soft) !important;
      color: var(--ck-text) !important;
    }

    html[data-theme] .capture-missing-list,
    html[data-theme] .capture-review-card.needs-review {
      background: var(--ck-warning-soft) !important;
      color: var(--ck-text) !important;
    }

    html[data-theme] .capture-review-card.retake {
      background: var(--ck-danger-soft) !important;
    }

    html[data-theme] .capture-review-card.approved,
    html[data-theme] .sale-offer.best,
    html[data-theme] .action-item.is-closed {
      background: var(--ck-success-soft) !important;
    }

    html[data-theme] .theme-toggle-btn {
      color: var(--ck-chrome-text) !important;
      display: inline-grid !important;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      place-items: center;
    }

    html[data-theme] .toast-close {
      display: inline-grid;
      width: 44px;
      min-width: 44px;
      height: 44px;
      min-height: 44px;
      padding: 0;
      place-items: center;
      border: 0;
      border-radius: var(--ck-radius-md);
      color: inherit;
      background: transparent;
      font: inherit;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }

    body.staff-pwa .ck-brand-full {
      background-image: url("/assets/carkonnect-logo-header.png");
      background-repeat: no-repeat;
      background-position: left center;
      background-size: contain;
    }

    body.staff-pwa .topbar .staff-identity {
      color: var(--ck-topbar-text) !important;
    }

    .mobile-nav-utilities {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-column: 1 / -1;
      gap: var(--space-8);
      padding-top: var(--space-8);
      border-top: 1px solid var(--ck-line);
    }

    .mobile-nav-utilities > button {
      min-width: 0;
    }

    .mobile-nav-status {
      display: flex;
      grid-column: 1 / -1;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--space-8);
      padding: var(--space-8) var(--space-10);
      color: var(--ck-muted);
      border: 1px solid var(--ck-line);
      border-radius: var(--ck-radius-md);
      background: var(--ck-card-soft);
      font-size: 12px;
    }

    @media (min-width: 840px) and (min-height: 480px) {
      #page-home.active {
        display: grid !important;
        grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr) !important;
        grid-auto-rows: min-content !important;
        align-items: start !important;
      }

      #page-home.active > .hero {
        grid-column: 1 / -1 !important;
      }

      #page-home.active > .home-primary-column,
      #page-home.active > .home-operations-column {
        container-type: inline-size;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-row: auto !important;
      }

      #page-home.active > .home-primary-column {
        grid-column: 1 !important;
      }

      #page-home.active > .home-operations-column {
        grid-column: 2 !important;
      }

      #page-home.active > .home-primary-column > *,
      #page-home.active > .home-operations-column > * {
        min-width: 0 !important;
        max-width: 100% !important;
      }
    }

    @media (min-width: 840px) and (max-width: 1199px) and (min-height: 480px) {
      #page-home.active {
        gap: var(--space-12) !important;
      }

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

      .home-primary-column .card-header-row,
      .home-operations-column .module-band-head {
        grid-template-columns: minmax(0, 1fr) auto !important;
      }

      .home-primary-column .card-actions {
        display: flex !important;
        width: auto !important;
        grid-template-columns: none !important;
        justify-content: flex-end !important;
      }

      .home-operations-column .module-band-note {
        max-width: none !important;
        text-align: left !important;
      }
    }

    @media (min-width: 1200px) and (max-width: 1599px) and (min-height: 480px) {
      #page-home.active {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
        gap: var(--space-16) !important;
      }

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

    @media (min-width: 1600px) and (min-height: 480px) {
      #page-home.active {
        grid-template-columns: minmax(0, 3fr) minmax(28rem, 2fr) !important;
        gap: var(--space-24) !important;
      }

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

    @media (max-width: 839px) and (min-height: 480px) {
      #page-home.active {
        display: block !important;
        grid-template-columns: minmax(0, 1fr) !important;
      }

      #page-home.active > .home-primary-column,
      #page-home.active > .home-operations-column {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
        float: none !important;
      }

      #page-home.active > .home-primary-column,
      #page-home.active > .home-operations-column,
      .home-tool-grid,
      .home-secondary-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
      }
    }

    @media (max-width: 839px) and (orientation: landscape) {
      .topbar,
      .app-inner > main,
      .page,
      #page-home.active {
        width: 100% !important;
        max-width: 100% !important;
      }
    }

    @media (min-width: 600px) and (max-width: 839px) and (orientation: portrait) {
      .home-primary-column .card-header-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
      }

      .home-primary-column .card-actions {
        display: flex !important;
        width: auto !important;
        justify-content: flex-end !important;
      }

      .home-primary-column .card-actions .mini-btn {
        width: auto !important;
        min-width: 88px !important;
      }
    }

    @container (max-width: 30rem) {
      .home-tool-grid,
      .home-secondary-grid,
      .card-actions,
      .module-band-head {
        grid-template-columns: minmax(0, 1fr) !important;
      }
    }
  
    /* Inline Validation */
    .field-invalid {
      border-color: var(--ck-red) !important;
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
    }
    .field-error {
      display: none;
      color: var(--ck-red);
      font-size: 12px;
      margin-top: var(--space-4);
      line-height: 1.3;
    }

    /* Skeleton Loading */
    .skeleton {
      background: linear-gradient(90deg, var(--ck-card-soft) 25%, var(--ck-line) 50%, var(--ck-card-soft) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s ease-in-out infinite;
      border-radius: var(--ck-radius-md);
      min-height: 20px;
    }
    .skeleton-text { height: 14px; margin-bottom: 8px; width: 80%; }
    .skeleton-title { height: 20px; margin-bottom: 12px; width: 60%; }
    .skeleton-card { height: 120px; margin-bottom: 12px; }
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .sale-lifecycle-progress {
      width: 100%;
      height: 8px;
      margin: var(--space-3, 12px) 0;
      overflow: hidden;
      border-radius: 4px;
      background: var(--ck-surface-2);
    }

    .sale-lifecycle-progress > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--ck-action-primary);
    }

    .sale-stage.lifecycle-current {
      border-color: var(--ck-action-primary);
    }

    .diagnostic-health-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--ck-space-3);
    }

    .diagnostic-health-tile {
      min-width: 0;
      padding: var(--ck-space-4);
      border: 1px solid var(--ck-border-default);
      border-inline-start-width: 4px;
      border-radius: var(--ck-radius-card);
      background: var(--ck-surface-2);
    }

    .diagnostic-health-tile[data-diagnostic-status="PASS"] { border-inline-start-color: var(--ck-success-border); }
    .diagnostic-health-tile[data-diagnostic-status="WARNING"],
    .diagnostic-health-tile[data-diagnostic-status="NOT RUN"] { border-inline-start-color: var(--ck-warning-border); }
    .diagnostic-health-tile[data-diagnostic-status="FAIL"],
    .diagnostic-health-tile[data-diagnostic-status="UNAVAILABLE"],
    .diagnostic-health-tile[data-diagnostic-status="TIMEOUT"] { border-inline-start-color: var(--ck-danger-border); }

    .diagnostic-health-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: start;
      gap: var(--ck-space-2);
    }

    .diagnostic-health-head h3 {
      margin: 2px 0 0;
      color: var(--ck-text-primary);
      font-size: var(--ck-type-body);
    }

    .diagnostic-status-icon {
      display: grid;
      width: 2rem;
      height: 2rem;
      place-items: center;
      border: 1px solid currentColor;
      border-radius: 50%;
      color: var(--ck-text-primary);
      font-weight: 900;
    }

    .diagnostic-health-tile > p,
    .diagnostic-impact dd,
    .diagnostic-details dd {
      overflow-wrap: anywhere;
    }

    .diagnostic-impact,
    .diagnostic-details dl {
      display: grid;
      gap: var(--ck-space-2);
      margin: var(--ck-space-3) 0 0;
    }

    .diagnostic-impact div,
    .diagnostic-details dl div {
      display: grid;
      gap: 2px;
    }

    .diagnostic-impact dt,
    .diagnostic-details dt {
      color: var(--ck-text-secondary);
      font-size: var(--ck-type-caption);
      font-weight: 700;
      text-transform: uppercase;
    }

    .diagnostic-impact dd,
    .diagnostic-details dd {
      margin: 0;
      color: var(--ck-text-primary);
    }

    .diagnostic-details {
      margin-top: var(--ck-space-3);
    }

    @media (max-width: 760px) {
      .diagnostic-health-grid { grid-template-columns: minmax(0, 1fr); }
    }
/* 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);
    }
  }
/* Vehicle Intelligence populated workflow composition. */
/*
   * Vehicle Intelligence workflow ownership layer.
   * Loaded after the historical styles; this is the canonical source for
   * populated staff workflow composition.
   */

  #page-home,
  #vehicleContent,
  #intelligenceContent,
  #inspectionContent,
  #actionsContent,
  #reportsContent,
  #page-home > *,
  #vehicleContent > *,
  #intelligenceContent > *,
  #inspectionContent > *,
  #actionsContent > *,
  #reportsContent > * {
    min-width: 0;
    max-width: 100%;
  }

  .product-switcher-trigger {
    appearance: none;
    min-height: var(--ck-control-min);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
  }

  .product-switcher,
  .product-switcher-backdrop {
    display: none;
  }

  .product-switcher-backdrop.show {
    position: fixed;
    inset: 0;
    z-index: 72;
    display: block;
    border: 0;
    background: rgba(4, 11, 20, .46);
  }

  .product-switcher {
    position: fixed;
    top: calc(4.5rem + env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    z-index: 74;
    width: min(23rem, calc(100vw - 24px));
    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);
  }

  .toast-action {
    min-height: var(--ck-control-min);
    margin-left: var(--ck-space-3);
    padding: 0 var(--ck-space-3);
    border: 1px solid currentColor;
    border-radius: var(--ck-radius-control);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: var(--ck-weight-bold);
  }

  @media (min-width: 900px) {
    .product-switcher {
      left: calc(var(--ck-stage12-rail, 112px) + var(--ck-space-4));
    }
  }

  #searchResults .search-results-list,
  #recentVehiclesContent .recent-list {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  #searchResults .vehicle-card,
  #recentVehiclesContent .recent-card {
    width: 100%;
    min-width: 0;
  }

  #recentVehiclesContent .recent-card-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: var(--ck-space-3) !important;
    align-items: start !important;
  }

  #recentVehiclesContent .recent-card-top > div:last-child {
    width: max-content !important;
    min-width: max-content !important;
    max-width: min(11rem, 40vw) !important;
    justify-self: end !important;
  }

  #recentVehiclesContent .recent-card-top > div:last-child .badge {
    width: auto !important;
    min-width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  #recentVehiclesContent .recent-chip-row .badge {
    flex: 0 1 auto;
    width: auto !important;
    min-width: 0;
  }

  .file-link,
  .report-link,
  .marker-row a,
  #reportsContent .link-btn,
  #intelligenceContent .link-btn {
    min-height: var(--ck-control-min) !important;
    min-width: var(--ck-control-min);
    padding: 0 var(--ck-space-3) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ck-border-control) !important;
    border-radius: var(--ck-radius-control) !important;
    background: var(--ck-button-secondary-bg) !important;
    color: var(--ck-link) !important;
    font-size: var(--ck-type-compact) !important;
    font-weight: var(--ck-weight-semibold) !important;
    line-height: 1.2;
    text-decoration: none;
  }

  .damage-map-view-btn {
    min-height: var(--ck-control-min) !important;
    border-radius: var(--ck-radius-control) !important;
    background: var(--ck-surface-2) !important;
    border-color: var(--ck-border-control) !important;
    color: var(--ck-text-primary) !important;
  }

  .damage-map-view-btn.active {
    background: var(--ck-action-primary) !important;
    border-color: var(--ck-action-primary) !important;
    color: var(--ck-action-primary-text) !important;
  }

  .damage-map-zoom-row {
    display: grid;
    grid-template-columns: var(--ck-control-touch) minmax(0, 1fr) var(--ck-control-touch);
    gap: var(--ck-space-2);
    margin: var(--ck-space-2) 0;
  }

  .damage-map-shell {
    max-height: min(70vh, 46rem);
    overflow: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }

  .damage-map-stage {
    min-width: 100%;
    transform-origin: top left;
  }

  .damage-pin {
    width: var(--ck-control-min) !important;
    height: var(--ck-control-min) !important;
    min-width: var(--ck-control-min) !important;
    min-height: var(--ck-control-min) !important;
    border: 3px solid var(--ck-surface-1) !important;
    background: var(--ck-danger-solid) !important;
    color: var(--ck-danger-solid-text) !important;
    font-size: var(--ck-type-meta) !important;
  }

  .damage-pin.persisted {
    background: var(--ck-info-solid) !important;
    color: var(--ck-info-solid-text) !important;
  }

  .damage-pin.pending {
    background: var(--ck-warning-solid) !important;
    color: var(--ck-warning-solid-text) !important;
  }

  .damage-map-modal-backdrop:not(.show) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  .damage-map-modal-backdrop.show {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  .damage-map-modal-backdrop:not(.show) * {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #inspectionContent .input,
  #inspectionContent .select,
  #inspectionContent .file-input,
  #saleContent .input,
  #saleContent .select,
  #saleContent input:not([type="hidden"]) {
    min-height: var(--ck-control-min) !important;
  }

  .inspection-progress-track {
    background: var(--ck-surface-3) !important;
  }

  .inspection-progress-fill {
    background: var(--ck-action-primary) !important;
  }

  .workflow-identity {
    display: grid;
    gap: var(--ck-space-4);
    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);
  }

  .workflow-identity-main {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: start;
    gap: var(--ck-space-4);
  }

  .workflow-identity-copy {
    min-width: 0;
  }

  .workflow-identity-title {
    margin: 0;
    color: var(--ck-text-primary);
    font-size: var(--ck-type-page);
    font-weight: var(--ck-weight-title);
    line-height: var(--ck-leading-page);
  }

  .workflow-identity-meta,
  .workflow-identity-note {
    margin: var(--ck-space-1) 0 0;
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-compact);
    line-height: var(--ck-leading-compact);
  }

  .workflow-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ck-space-3);
  }

  .workflow-summary-item {
    min-width: 0;
    padding: var(--ck-space-3);
    border: 1px solid var(--ck-border-subtle);
    border-radius: var(--ck-radius-card);
    background: var(--ck-surface-2);
  }

  .workflow-summary-item span {
    display: block;
    color: var(--ck-text-muted);
    font-size: var(--ck-type-meta);
    font-weight: var(--ck-weight-semibold);
  }

  .workflow-summary-item strong {
    display: block;
    margin-top: var(--ck-space-1);
    color: var(--ck-text-primary);
    font-size: var(--ck-type-card);
    line-height: var(--ck-leading-card);
    overflow-wrap: anywhere;
  }

  .intelligence-stage-tracker {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--ck-space-2);
  }

  .intelligence-stage {
    min-width: 0;
    padding: var(--ck-space-3);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-card);
    background: var(--ck-surface-1);
  }

  .intelligence-stage-number {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: var(--ck-radius-chip);
    background: var(--ck-surface-3);
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-meta);
    font-weight: var(--ck-weight-bold);
  }

  .intelligence-stage.is-complete .intelligence-stage-number {
    background: var(--ck-success-solid);
    color: var(--ck-success-solid-text);
  }

  .intelligence-stage.is-review .intelligence-stage-number {
    background: var(--ck-warning-solid);
    color: var(--ck-warning-solid-text);
  }

  .intelligence-stage strong,
  .intelligence-stage span:last-child {
    display: block;
    margin-top: var(--ck-space-2);
    overflow-wrap: anywhere;
  }

  .intelligence-stage strong {
    color: var(--ck-text-primary);
    font-size: var(--ck-type-compact);
  }

  .intelligence-stage span:last-child {
    color: var(--ck-text-muted);
    font-size: var(--ck-type-meta);
  }

  .intelligence-domain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ck-space-3);
  }

  .intelligence-domain {
    min-width: 0;
    padding: var(--ck-space-4);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-card);
    background: var(--ck-surface-2);
  }

  .intelligence-domain.is-risk {
    border-color: var(--ck-danger-border);
    background: var(--ck-danger-bg);
  }

  .intelligence-domain.is-review {
    border-color: var(--ck-warning-border);
    background: var(--ck-warning-bg);
  }

  .intelligence-domain-title {
    color: var(--ck-text-primary);
    font-size: var(--ck-type-card);
    font-weight: var(--ck-weight-title);
  }

  .intelligence-domain-value {
    margin-top: var(--ck-space-2);
    color: var(--ck-text-primary);
    font-size: var(--ck-type-body);
    font-weight: var(--ck-weight-semibold);
  }

  .intelligence-domain-evidence {
    margin-top: var(--ck-space-2);
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-compact);
    line-height: var(--ck-leading-compact);
  }

  .mot-timeline {
    display: grid;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-4);
  }

  .mot-timeline-row {
    display: grid;
    grid-template-columns: minmax(7rem, .8fr) minmax(8rem, .8fr) minmax(8rem, .8fr) minmax(0, 2.2fr);
    gap: var(--ck-space-3);
    align-items: start;
    padding: var(--ck-space-3);
    border: 1px solid var(--ck-border-subtle);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-2);
  }

  .mot-timeline-row > * {
    min-width: 0;
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-compact);
    overflow-wrap: anywhere;
  }

  .mot-timeline-row strong {
    color: var(--ck-text-primary);
  }

  .valuation-decision-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ck-space-3);
  }

  .valuation-decision-grid .workflow-summary-item.is-primary {
    border-color: var(--ck-success-border);
    background: var(--ck-success-bg);
  }

  .valuation-range {
    grid-column: span 2;
  }

  #inspectionContent {
    display: grid;
    gap: var(--ck-space-4);
    align-items: start;
  }

  #inspectionContent .inspection-wide {
    grid-column: 1 / -1;
  }

  #inspectionContent .inspection-region {
    min-width: 0;
  }

  .inspection-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-3);
    margin-bottom: var(--ck-space-3);
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-compact);
  }

  .inspection-checklist-list {
    display: grid;
    gap: var(--ck-space-2);
  }

  .inspection-checklist-item {
    min-width: 0;
  }

  .inspection-checklist-controls {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-3);
  }

  .inspection-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-4);
  }

  .report-readiness {
    display: grid;
    grid-template-columns: minmax(12rem, .8fr) minmax(0, 2fr);
    gap: var(--ck-space-4);
    align-items: stretch;
  }

  .report-readiness-score {
    display: grid;
    place-items: center;
    min-height: 10rem;
    padding: var(--ck-space-4);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-card);
    background: var(--ck-surface-2);
    text-align: center;
  }

  .report-readiness-score strong {
    display: block;
    color: var(--ck-text-primary);
    font-size: var(--ck-type-kpi);
    line-height: 1;
  }

  .report-readiness-score span {
    display: block;
    margin-top: var(--ck-space-2);
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-compact);
  }

  .report-meta-grid,
  .report-command-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ck-space-2);
  }

  .report-command-row {
    margin-top: var(--ck-space-3);
  }

  .report-blocker-list {
    display: grid;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-3);
  }

  .report-blocker {
    padding: var(--ck-space-3);
    border: 1px solid var(--ck-warning-border);
    border-radius: var(--ck-radius-control);
    background: var(--ck-warning-bg);
    color: var(--ck-warning-text);
    font-size: var(--ck-type-compact);
  }

  .report-state-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ck-space-2) var(--ck-space-4);
    margin: var(--ck-space-3) 0;
    padding: var(--ck-space-3);
    border: 1px solid var(--ck-info-border);
    border-inline-start-width: 4px;
    border-radius: var(--ck-radius-control);
    background: var(--ck-info-bg);
    color: var(--ck-info-text);
  }

  .report-state-banner[data-report-state*="Fail"],
  .report-state-banner[data-report-state*="Expired"],
  .report-state-banner[data-report-state*="Blocked"] {
    border-color: var(--ck-danger-border);
    background: var(--ck-danger-bg);
    color: var(--ck-danger-text);
  }

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

  .report-stage-list li {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) auto;
    gap: var(--ck-space-1) var(--ck-space-3);
    min-width: 0;
    padding: var(--ck-space-3);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-2);
  }

  .report-stage-list li > span {
    font-weight: 700;
  }

  .report-stage-list li > small {
    grid-column: 1 / -1;
    color: var(--ck-text-secondary);
  }

  @media (min-width: 1200px) {
    #inspectionContent {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #inspectionContent .inspection-region-primary {
      grid-column: 1;
    }

    #inspectionContent .inspection-region-condition {
      grid-column: 2;
    }

    #inspectionContent .inspection-region-evidence {
      grid-column: 3;
    }
  }

  @media (min-width: 840px) and (max-width: 1199px) {
    #inspectionContent {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #inspectionContent .inspection-region-evidence {
      grid-column: 1 / -1;
    }

    .intelligence-stage-tracker {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .intelligence-domain-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 768px) {
    #page-home.page.active {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--ck-space-4);
      align-items: start;
    }

    #page-home > .hero {
      grid-column: 1 / -1;
    }

    #page-home > .home-primary-column,
    #page-home > .home-operations-column {
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    #page-home .home-tool-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    #page-home .module-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #page-home .module-actions .btn {
      width: 100% !important;
      min-width: 0 !important;
    }
  }

  @media (max-width: 839px) {
    .workflow-summary-grid,
    .valuation-decision-grid,
    .report-meta-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .intelligence-stage-tracker,
    .intelligence-domain-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mot-timeline-row {
      grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.2fr);
    }

    .report-readiness {
      grid-template-columns: 1fr;
    }

    .inspection-evidence-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 767px) {
    #page-home.page.active,
    #inspectionContent {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .workflow-identity-main {
      grid-template-columns: max-content minmax(0, 1fr);
    }

    .workflow-identity-main > .badge {
      grid-column: 1 / -1;
      justify-self: start;
    }

    .workflow-summary-grid,
    .valuation-decision-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .valuation-range {
      grid-column: 1 / -1;
    }

    .intelligence-stage-tracker {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: var(--ck-space-2);
    }

    .intelligence-stage {
      flex: 0 0 min(74vw, 15rem);
      scroll-snap-align: start;
    }

    .intelligence-domain-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .mot-timeline-row {
      position: relative;
      grid-template-columns: minmax(0, 1fr);
      padding-left: calc(var(--ck-space-4) + 12px);
    }

    .mot-timeline-row::before {
      position: absolute;
      top: var(--ck-space-4);
      left: var(--ck-space-3);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--ck-action-primary);
      content: "";
    }

    .inspection-checklist-item {
      display: none;
    }

    .inspection-checklist-item.is-active {
      display: block;
    }

    .inspection-checklist-controls {
      display: grid;
    }

    .report-command-row {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (orientation: landscape) and (max-height: 560px) and (max-width: 899px) {
    #inspectionContent {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #inspectionContent .inspection-wide,
    #inspectionContent .inspection-region-evidence {
      grid-column: 1 / -1;
    }

    .inspection-checklist-item {
      display: none;
    }

    .inspection-checklist-item.is-active {
      display: block;
    }

    .inspection-checklist-controls {
      display: grid;
    }

    .damage-map-view-row {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .workflow-identity {
      padding: var(--ck-space-3);
    }

    .workflow-summary-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 479px) {
    .workflow-identity {
      padding: var(--ck-space-4);
    }

    .workflow-identity-main {
      grid-template-columns: minmax(0, 1fr);
    }

    .workflow-identity-main .plate {
      justify-self: start;
    }

    .workflow-summary-grid,
    .valuation-decision-grid,
    .report-meta-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .damage-map-view-row {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .report-readiness-score {
      min-height: 8rem;
    }
  }

  @media (max-width: 767px) and (orientation: portrait) {
    .bottom-nav {
      grid-template-columns: repeat(5, minmax(44px, 1fr)) !important;
    }

    .bottom-nav .nav-btn[data-page="home"],
    .bottom-nav .nav-search-btn,
    .bottom-nav .nav-btn[data-page="actions"],
    .bottom-nav .nav-btn[data-page="reports"],
    .bottom-nav .mobile-more-btn {
      display: grid !important;
    }

    .bottom-nav .nav-btn[data-page="intelligence"],
    .bottom-nav .nav-btn[data-page="inspection"],
    .bottom-nav .nav-btn[data-page="sale"],
    .bottom-nav .nav-btn[data-page="vehicle"],
    .bottom-nav .nav-btn[data-page="history"],
    .bottom-nav .nav-btn[data-page="diagnostics"] {
      display: none !important;
    }
  }

  @media (max-width: 359px) and (orientation: portrait) {
    .bottom-nav {
      gap: 2px !important;
      padding-right: max(4px, env(safe-area-inset-right)) !important;
      padding-left: max(4px, env(safe-area-inset-left)) !important;
    }

    .bottom-nav .nav-btn,
    .bottom-nav .mobile-more-btn {
      min-width: 44px !important;
    }
  }

  @media (orientation: landscape) and (max-height: 479px) and (max-width: 899px) {
    .app {
      padding-left: calc(72px + var(--ck-safe-left)) !important;
      padding-bottom: 0 !important;
    }

    #page-home.page.active {
      gap: 8px;
    }

    .bottom-nav {
      top: 0 !important;
      right: auto !important;
      bottom: 0 !important;
      left: 0 !important;
      width: calc(72px + var(--ck-safe-left)) !important;
      max-width: none !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: repeat(5, minmax(44px, 1fr)) !important;
      grid-auto-rows: 0 !important;
      gap: 2px !important;
      padding: 4px 4px 4px calc(4px + var(--ck-safe-left)) !important;
      transform: none !important;
      overflow: hidden !important;
    }

    .bottom-nav .nav-btn[data-page="home"],
    .bottom-nav .nav-search-btn,
    .bottom-nav .nav-btn[data-page="actions"],
    .bottom-nav .nav-btn[data-page="reports"],
    .bottom-nav .mobile-more-btn {
      display: grid !important;
      min-width: 44px !important;
      min-height: 44px !important;
    }

    .bottom-nav .nav-btn[data-page="intelligence"],
    .bottom-nav .nav-btn[data-page="inspection"],
    .bottom-nav .nav-btn[data-page="sale"],
    .bottom-nav .nav-btn[data-page="vehicle"],
    .bottom-nav .nav-btn[data-page="history"],
    .bottom-nav .nav-btn[data-page="diagnostics"] {
      display: none !important;
    }

    .mobile-nav-more {
      top: 8px !important;
      right: auto !important;
      bottom: 8px !important;
      left: calc(78px + var(--ck-safe-left)) !important;
      width: min(19rem, calc(100vw - 90px - var(--ck-safe-left))) !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      align-content: start !important;
      overflow-y: auto !important;
    }

    .mobile-nav-more.show,
    .mobile-nav-backdrop.show {
      display: grid !important;
    }

    .toast {
      right: 12px !important;
      bottom: 12px !important;
      left: calc(84px + var(--ck-safe-left)) !important;
    }
  }
  .acquisition-card .module-label {
    border: 1px solid var(--ck-border-default) !important;
    background: var(--ck-surface-2) !important;
    color: var(--ck-text-primary) !important;
  }

  .action-filter-shell {
    display: grid;
    gap: var(--ck-space-3);
  }

  .action-filter-open,
  .action-filter-backdrop,
  .action-filter-sheet-head {
    display: none;
  }

  .action-filter-panel {
    min-width: 0;
  }

  .action-view-bar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--ck-space-3);
  }

  .action-view-field {
    width: min(22rem, 100%);
    margin: 0;
  }

  .action-view-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
  }

  @media (max-width: 620px) {
    .action-filter-open {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      gap: var(--ck-space-3);
    }

    .action-filter-open span {
      min-width: 0;
      overflow: hidden;
      color: var(--ck-text-secondary);
      font-size: var(--ck-type-label);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .action-filter-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1090;
      width: 100%;
      height: 100%;
      min-height: 0;
      border: 0;
      background: var(--ck-backdrop);
      opacity: 0;
      pointer-events: none;
    }

    .action-filter-backdrop.show {
      display: block;
      opacity: 1;
      pointer-events: auto;
    }

    .action-filter-panel {
      position: fixed;
      right: 0;
      bottom: calc(70px + var(--ck-safe-bottom));
      left: 0;
      z-index: 1100;
      display: grid;
      max-height: min(calc(100dvh - 82px - var(--ck-safe-bottom)), 44rem);
      padding: var(--ck-space-4);
      overflow-y: auto;
      border: 1px solid var(--ck-border-default);
      border-radius: var(--ck-radius-card) var(--ck-radius-card) 0 0;
      background: var(--ck-surface-1);
      box-shadow: var(--ck-shadow-floating);
      transform: translateY(105%);
      visibility: hidden;
      transition: transform 180ms ease, visibility 180ms ease;
    }

    .action-filter-panel.show {
      transform: translateY(0);
      visibility: visible;
    }

    .action-filter-sheet-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: var(--ck-space-3);
      margin-bottom: var(--ck-space-4);
    }

    .action-view-bar {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
    }

    .action-view-field {
      width: 100%;
    }

    .action-view-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .action-view-actions .mini-btn {
      width: 100%;
    }
  }

  @media (orientation: landscape) and (max-height: 479px) and (max-width: 620px) {
    .action-filter-panel {
      right: 8px;
      bottom: 8px;
      left: calc(68px + var(--ck-safe-left));
      max-height: calc(100dvh - 16px);
      border-radius: var(--ck-radius-card);
    }
  }

  /*
   * Final adaptive composition contract.
   * This is intentionally the last staff style layer so the historic
   * responsive rules cannot reintroduce auto-sized grid tracks.
   */
  #page-home.active,
  #page-home.active > *,
  .home-primary-column,
  .home-operations-column,
  .module-band,
  .module-band-head,
  .module-band-head > *,
  .home-tool-grid,
  .home-secondary-grid,
  .module-content,
  .module-actions {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .module-band-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) !important;
    align-items: start !important;
    gap: var(--ck-space-4) !important;
  }

  .module-band-title,
  .module-band-note,
  .section-title,
  .section-subtitle,
  .small-note,
  .label,
  .btn,
  .link-btn,
  .badge {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .module-band-title {
    max-width: 30rem !important;
    font-size: clamp(1.7rem, 2.15vw, 2.85rem) !important;
    line-height: .98 !important;
  }

  .module-band-note {
    max-width: 28rem !important;
    line-height: 1.35 !important;
  }

  @media (min-width: 840px) and (min-height: 480px) {
    #page-home.active {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--ck-space-4);
      align-items: start;
    }

    #page-home.active > .hero {
      grid-column: 1 / -1 !important;
    }

    #page-home.active > .home-primary-column,
    #page-home.active > .home-operations-column {
      width: auto !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1199px) {
    .module-band-head {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .module-band-note {
      max-width: 42rem !important;
      text-align: left !important;
    }

    #page-home .home-tool-grid,
    #page-home .home-secondary-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  @media (min-width: 1200px) and (max-width: 1599px) {
    #page-home .home-tool-grid,
    #page-home .home-secondary-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 767px) {
    #page-home.active,
    #inspectionContent {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .module-band-head,
    #page-home .home-tool-grid,
    #page-home .home-secondary-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .module-band-title {
      max-width: none !important;
      font-size: 1.8rem !important;
    }

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

    .module-actions .btn,
    .standalone-start-actions .btn {
      width: 100% !important;
    }
  }

  @media (orientation: landscape) and (max-height: 560px) and (max-width: 899px) {
    .app {
      padding-left: calc(72px + var(--ck-safe-left)) !important;
      padding-bottom: 0 !important;
    }

    body .app #page-home.active {
      display: block !important;
      width: min(100%, 720px) !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 8px;
    }

    #page-home > .hero,
    .home-operations-column .module-band-note,
    .home-operations-column .section-subtitle {
      display: none !important;
    }

    #page-home .home-tool-grid,
    #page-home .home-secondary-grid,
    .module-band-head {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    .module-band-title {
      font-size: 1.55rem !important;
      line-height: 1;
    }

    .module-band,
    .card {
      padding: var(--ck-space-3) !important;
    }

    .bottom-nav {
      width: calc(72px + var(--ck-safe-left)) !important;
    }

    .bottom-nav .nav-btn,
    .bottom-nav .mobile-more-btn {
      min-height: 44px !important;
      min-width: 44px !important;
    }
  }

  .launch-panel {
    display: grid;
    gap: var(--ck-space-3);
    margin-top: var(--ck-space-3);
    padding: var(--ck-space-3);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-2);
  }

  .launch-panel summary {
    min-height: var(--ck-control-touch);
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--ck-text-primary);
    font-weight: var(--ck-weight-bold);
  }

  .standalone-start-card {
    border-left: 3px solid var(--ck-action-primary) !important;
  }

  .standalone-start-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-3);
  }

  .standalone-start-grid .input,
  .standalone-start-grid .select,
  .launch-panel .input,
  .launch-panel .select {
    min-height: 48px !important;
  }

  .standalone-start-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-3);
  }

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

  @media (max-width: 620px) {
    .standalone-start-grid,
    .standalone-start-actions {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Milestone 5: Vehicle Intelligence command centre and record workspace. */
  .page:not(.active) {
    display: none !important;
  }

  #page-home.page.active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--ck-space-6) !important;
    align-items: start !important;
  }

  #page-home.page.active > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-column: 1;
  }

  .vi-home-intro,
  .vi-search-heading,
  .vi-section-heading,
  .vi-readiness-heading,
  .record-panel-heading {
    display: flex;
    min-width: 0;
    align-items: start;
    justify-content: space-between;
    gap: var(--ck-space-4);
  }

  .vi-home-intro {
    align-items: center;
    padding-block: var(--ck-space-2);
  }

  .vi-home-title {
    margin: var(--ck-space-1) 0 0;
    color: var(--ck-text-primary);
    font-size: clamp(1.65rem, 2.4vw, 2.25rem);
    line-height: var(--ck-leading-page);
  }

  .vi-home-copy {
    max-width: var(--ck-layout-guidance);
    margin: var(--ck-space-1) 0 0;
    color: var(--ck-text-secondary);
  }

  .vi-home-state,
  .record-state-cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--ck-space-2);
  }

  .vi-search-command {
    display: grid;
    gap: var(--ck-space-3);
    padding: var(--ck-space-5);
    border-color: var(--ck-border-control);
    background: var(--ck-surface-1);
  }

  .vi-search-command .section-title {
    margin-top: var(--ck-space-1);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
  }

  .vi-search-heading .section-subtitle {
    max-width: 32rem;
    margin: 0;
    text-align: right;
  }

  .vi-search-command .search-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 10rem);
    gap: var(--ck-space-3);
    margin: 0;
  }

  .vi-search-command .search-input {
    min-width: 0;
    min-height: var(--ck-control-comfortable);
    font-size: var(--ck-type-body);
  }

  .vi-search-status {
    margin: 0;
    color: var(--ck-text-muted);
    font-size: var(--ck-type-meta);
  }

  .vi-home-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ck-space-6);
    align-items: start;
  }

  .vi-active-work,
  .vi-home-support,
  .vi-operational-summary,
  .vi-readiness-panel,
  .record-readiness-panel,
  .record-activity {
    min-width: 0;
  }

  .vi-active-work {
    display: grid;
    gap: var(--ck-space-3);
  }

  .vi-section-heading {
    align-items: end;
    padding-bottom: var(--ck-space-2);
    border-bottom: 1px solid var(--ck-border-subtle);
  }

  .vi-section-heading .section-title,
  .record-panel-heading .section-title {
    margin: var(--ck-space-1) 0 0;
  }

  .vi-section-heading .section-subtitle {
    margin: var(--ck-space-1) 0 0;
  }

  #recentVehiclesContent .recent-list,
  #searchResults .search-results-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ck-space-2);
  }

  #recentVehiclesContent .recent-card,
  #searchResults .vehicle-card {
    min-width: 0;
    margin: 0;
    padding: var(--ck-space-3) var(--ck-space-4);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-1);
    box-shadow: none;
  }

  #recentVehiclesContent .recent-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ck-space-2) var(--ck-space-4);
    align-items: center;
  }

  #recentVehiclesContent .recent-card::before,
  #searchResults .vehicle-card::before {
    display: none;
  }

  #recentVehiclesContent .recent-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ck-space-3);
    align-items: center;
  }

  #recentVehiclesContent .recent-title-block {
    display: grid;
    min-width: 0;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--ck-space-3);
    align-items: center;
  }

  #recentVehiclesContent .plate,
  #searchResults .plate {
    min-width: 7.5rem;
    justify-content: center;
    white-space: nowrap;
  }

  #recentVehiclesContent .recent-vehicle-name,
  #searchResults .vehicle-title {
    overflow: visible;
    color: var(--ck-text-primary);
    font-size: var(--ck-type-card);
    font-weight: var(--ck-weight-card);
    line-height: var(--ck-leading-card);
    text-overflow: clip;
    white-space: normal;
  }

  #recentVehiclesContent .recent-meta,
  #searchResults .vehicle-line {
    margin-top: 2px;
    overflow-wrap: anywhere;
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-meta);
  }

  #recentVehiclesContent .recent-chip-row {
    grid-column: 1;
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
  }

  #recentVehiclesContent .recent-action-row {
    grid-row: 1 / span 2;
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ck-space-2);
  }

  .vi-row-overflow {
    position: relative;
  }

  .vi-row-overflow > summary {
    display: inline-flex;
    min-width: var(--ck-target-compact);
    min-height: var(--ck-target-compact);
    align-items: center;
    justify-content: center;
    padding-inline: var(--ck-space-3);
    border: 1px solid var(--ck-border-control);
    border-radius: var(--ck-radius-control);
    color: var(--ck-text-primary);
    cursor: pointer;
    font-weight: var(--ck-weight-medium);
    list-style: none;
  }

  .vi-row-overflow > summary::-webkit-details-marker {
    display: none;
  }

  .vi-row-overflow > div {
    position: absolute;
    right: 0;
    z-index: var(--ck-z-dropdown);
    display: grid;
    min-width: 12rem;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-2);
    padding: var(--ck-space-2);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-3);
    box-shadow: var(--ck-shadow-raised);
  }

  .vi-row-overflow .recent-action {
    width: 100%;
  }

  .vi-search-results-region {
    display: grid;
    gap: var(--ck-space-3);
    margin-top: var(--ck-space-4);
  }

  #searchResults .vehicle-card {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) auto;
    gap: var(--ck-space-3);
    align-items: center;
  }

  #searchResults .search-result-open {
    min-width: 7.5rem;
  }

  .vi-home-support {
    display: grid;
    gap: var(--ck-space-3);
  }

  .vi-operational-summary,
  .vi-readiness-panel,
  .record-readiness-panel,
  .record-activity {
    padding: var(--ck-space-4);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-card);
    background: var(--ck-surface-1);
  }

  .vi-summary-list {
    display: grid;
    gap: 0;
    margin: var(--ck-space-3) 0 0;
  }

  .vi-summary-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ck-space-4);
    padding-block: var(--ck-space-3);
    border-top: 1px solid var(--ck-border-subtle);
  }

  .vi-summary-list dt {
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-label);
  }

  .vi-summary-list dd {
    margin: 0;
    color: var(--ck-text-primary);
    font-size: var(--ck-type-card);
    font-weight: var(--ck-weight-bold);
    text-align: right;
  }

  .vi-readiness-value {
    color: var(--ck-text-primary);
    font-size: var(--ck-type-section);
  }

  .vi-readiness-progress {
    height: 10px;
    margin-block: var(--ck-space-3);
    overflow: hidden;
    border-radius: var(--ck-radius-pill);
    background: var(--ck-progress-track);
  }

  .vi-readiness-progress > span {
    display: block;
    width: var(--ck-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--ck-progress-value);
  }

  .vi-readiness-status {
    display: grid;
    gap: var(--ck-space-1);
    margin: 0 0 var(--ck-space-3);
  }

  .vi-readiness-status span {
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-meta);
  }

  .vi-support-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-2);
  }

  .vi-home-shortcuts {
    display: grid;
    gap: var(--ck-space-3);
  }

  .vi-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ck-space-2);
  }

  .vi-shortcut {
    display: grid;
    min-width: 0;
    min-height: 4.75rem;
    align-content: center;
    gap: var(--ck-space-1);
    padding: var(--ck-space-3) var(--ck-space-4);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-1);
    color: var(--ck-text-primary);
    text-align: left;
  }

  .vi-shortcut span {
    font-size: var(--ck-type-card);
    font-weight: var(--ck-weight-card);
  }

  .vi-shortcut small {
    overflow-wrap: anywhere;
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-meta);
  }

  .vi-shortcut:hover {
    border-color: var(--ck-action-primary);
    background: var(--ck-surface-hover);
  }

  .vi-more-tools {
    padding-top: var(--ck-space-4);
    border-top: 1px solid var(--ck-border-subtle);
  }

  .vi-more-tools > summary {
    display: inline-flex;
    min-height: var(--ck-target-compact);
    align-items: center;
    padding-inline: var(--ck-space-3);
    border: 1px solid var(--ck-border-control);
    border-radius: var(--ck-radius-control);
    color: var(--ck-text-primary);
    cursor: pointer;
    font-weight: var(--ck-weight-card);
  }

  .vi-more-tools > .section-subtitle {
    margin-block: var(--ck-space-3);
  }

  .vi-more-tools .home-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ck-space-3);
  }

  .vi-more-tools .acquisition-card {
    display: grid;
    min-width: 0;
    gap: var(--ck-space-4);
    padding: var(--ck-space-4);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-card);
    background: var(--ck-surface-1);
  }

  .vi-state-message {
    display: grid;
    min-width: 0;
    gap: var(--ck-space-2);
    padding: var(--ck-space-4);
    border: 1px dashed var(--ck-border-control);
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-inset);
    color: var(--ck-text-secondary);
  }

  .vi-state-message strong {
    color: var(--ck-text-primary);
  }

  .vi-state-message.is-error {
    border-style: solid;
    border-color: var(--ck-danger-border);
    background: var(--ck-danger-bg);
    color: var(--ck-danger-text);
  }

  .vi-search-skeleton {
    display: grid;
    gap: var(--ck-space-2);
  }

  .vi-search-skeleton span {
    height: 8px;
    border-radius: var(--ck-radius-pill);
    background: var(--ck-skeleton-start);
    animation: vi-skeleton 1.2s var(--ck-ease-standard) infinite alternate;
  }

  .vi-search-skeleton span:nth-child(2) {
    width: 70%;
  }

  .vi-search-skeleton span:nth-child(3) {
    width: 45%;
  }

  @keyframes vi-skeleton {
    to { background: var(--ck-skeleton-end); }
  }

  .vehicle-record-workspace,
  .vehicle-record-grid,
  .record-decision-column,
  .record-evidence-column {
    min-width: 0;
  }

  .vehicle-record-workspace {
    display: grid;
    gap: var(--ck-space-4);
  }

  .record-identity-band {
    display: grid;
    grid-template-columns: minmax(19rem, 1.25fr) minmax(22rem, 1fr) auto;
    gap: var(--ck-space-4);
    align-items: center;
    padding: var(--ck-space-4);
    border: 1px solid var(--ck-border-control);
    border-radius: var(--ck-radius-card);
    background: var(--ck-surface-1);
  }

  .record-identity-primary {
    display: grid;
    min-width: 0;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--ck-space-4);
    align-items: center;
  }

  .vehicle-record-image,
  .vehicle-image-placeholder {
    width: 5.5rem;
    height: 5.5rem;
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-control);
    background: var(--ck-thumbnail-bg);
  }

  .vehicle-record-image {
    display: block;
    object-fit: cover;
  }

  .vehicle-image-placeholder {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--ck-space-1);
    color: var(--ck-text-primary);
    text-align: center;
  }

  .vehicle-image-placeholder span {
    font-size: var(--ck-icon-lg);
  }

  .vehicle-image-placeholder small {
    font-size: .6875rem;
  }

  .record-identity-copy {
    min-width: 0;
  }

  .record-identity-copy .plate {
    display: inline-flex;
    margin-bottom: var(--ck-space-2);
  }

  .record-identity-copy h1 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ck-text-primary);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: var(--ck-leading-page);
  }

  .record-identity-copy p {
    margin: var(--ck-space-1) 0 0;
    overflow-wrap: anywhere;
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-meta);
  }

  .record-facts-toggle {
    display: none;
  }

  .record-key-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-2);
    margin: 0;
  }

  .record-key-facts > div {
    min-width: 0;
    padding: var(--ck-space-2) var(--ck-space-3);
    border-left: 2px solid var(--ck-border-default);
  }

  .record-key-facts dt {
    color: var(--ck-text-muted);
    font-size: var(--ck-type-meta);
  }

  .record-key-facts dd {
    margin: var(--ck-space-1) 0 0;
    overflow-wrap: anywhere;
    color: var(--ck-text-primary);
    font-size: var(--ck-type-label);
    font-weight: var(--ck-weight-card);
  }

  .record-action-bar {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-2);
    padding-top: var(--ck-space-3);
    border-top: 1px solid var(--ck-border-subtle);
  }

  .record-section-navigation {
    display: none;
  }

  .vehicle-record-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    grid-template-areas: "main decision";
    gap: var(--ck-space-4);
    align-items: start;
  }

  .record-decision-column {
    grid-area: decision;
    display: grid;
    gap: var(--ck-space-3);
    position: sticky;
    top: calc(var(--ck-space-4) + 64px);
  }

  .record-evidence-column {
    grid-area: main;
    display: grid;
    gap: var(--ck-space-3);
  }

  .record-blocker {
    display: grid;
    gap: var(--ck-space-3);
    padding: var(--ck-space-4);
    border: 1px solid var(--ck-danger-border);
    border-radius: var(--ck-radius-card);
    background: var(--ck-danger-bg);
    color: var(--ck-danger-text);
  }

  .module-band-kicker {
    color: var(--ck-text-secondary);
  }

  .record-blocker > .module-band-kicker,
  .record-readiness-panel .danger-text {
    color: var(--ck-text-primary);
  }

  .record-readiness-panel .module-band-kicker {
    color: var(--ck-text-primary);
  }

  .record-blocker h2,
  .record-blocker p {
    margin: 0;
  }

  .record-blocker h2 {
    font-size: var(--ck-type-section);
  }

  .record-blocker-meta {
    font-size: var(--ck-type-meta);
  }

  .record-readiness-panel {
    display: grid;
    gap: var(--ck-space-3);
  }

  .record-readiness-panel .progress-list {
    margin: 0;
  }

  .record-activity ol {
    display: grid;
    gap: var(--ck-space-3);
    margin: var(--ck-space-3) 0;
    padding: 0;
    list-style: none;
  }

  .record-activity li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: var(--ck-space-3);
    align-items: start;
  }

  .record-activity li > span {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--ck-action-primary);
  }

  .record-activity li div {
    display: grid;
    gap: 2px;
  }

  .record-activity small {
    color: var(--ck-text-muted);
  }

  .record-evidence-group {
    display: grid;
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-4);
  }

  .record-evidence-group h3 {
    margin: 0;
    color: var(--ck-text-primary);
    font-size: var(--ck-type-card);
  }

  .record-evidence-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ck-space-3);
    align-items: center;
    padding: var(--ck-space-3);
    border: 1px solid var(--ck-border-default);
    border-left-width: 3px;
    border-radius: var(--ck-radius-control);
    background: var(--ck-surface-2);
  }

  .record-evidence-row.is-bad {
    border-left-color: var(--ck-danger-border);
  }

  .record-evidence-row.is-review {
    border-left-color: var(--ck-warning-border);
  }

  .record-evidence-row.is-good {
    border-left-color: var(--ck-success-border);
  }

  .record-evidence-row p {
    margin: var(--ck-space-1) 0 0;
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-meta);
  }

  .record-fact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ck-space-2);
    margin-top: var(--ck-space-3);
  }

  .record-fact-grid .workflow-summary-item.is-primary {
    border-color: var(--ck-action-primary);
    background: var(--ck-surface-selected);
  }

  .record-risk-panel,
  .record-mot-panel,
  .record-valuation-panel,
  .record-details-panel {
    margin: 0;
  }

  .record-decision-column .intelligence-stage-card {
    margin: 0;
  }

  .record-decision-column .intelligence-stage-tracker {
    grid-template-columns: minmax(0, 1fr);
  }

  .record-decision-column .intelligence-stage {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 0;
    padding: var(--ck-space-2);
  }

  .record-decision-column .intelligence-stage-number {
    width: 28px;
    height: 28px;
  }

  @media (min-width: 840px) {
    .vi-home-workspace {
      grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .75fr);
    }
  }

  @media (min-width: 1600px) {
    .vi-home-workspace {
      grid-template-columns: minmax(0, 1fr) 24rem;
    }

    .vehicle-record-grid {
      grid-template-columns: minmax(0, 1fr) 25rem;
    }
  }

  @media (min-width: 600px) and (max-width: 1199px) {
    .vi-shortcut-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vi-more-tools .home-tool-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .record-identity-band {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .record-facts-desktop {
      grid-row: 2;
      grid-column: 1 / -1;
    }

    .record-action-bar {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 1023px) {
    .vehicle-record-grid {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "decision"
        "main";
    }

    .record-decision-column {
      position: static;
    }

    .record-decision-column .intelligence-stage-card,
    .record-activity {
      display: none;
    }
  }

  @media (max-width: 767px) {
    #page-home.page.active {
      gap: var(--ck-space-4);
    }

    .vi-home-intro {
      align-items: start;
    }

    .vi-home-state {
      display: none;
    }

    .vi-search-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--ck-space-2);
    }

    .vi-search-heading .section-subtitle {
      max-width: none;
      text-align: left;
    }

    .vi-search-command {
      padding: var(--ck-space-4);
    }

    .vi-search-command .search-box {
      grid-template-columns: minmax(0, 1fr);
    }

    .vi-search-command .btn {
      width: 100%;
    }

    #recentVehiclesContent .recent-card {
      grid-template-columns: minmax(0, 1fr);
    }

    #recentVehiclesContent .recent-card-top {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    #recentVehiclesContent .recent-title-block {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }

    #recentVehiclesContent .recent-action-row {
      grid-row: auto;
      grid-column: 1;
      justify-content: stretch;
    }

    #recentVehiclesContent .recent-action-row > .recent-action {
      flex: 1 1 auto;
    }

    #searchResults .vehicle-card {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    #searchResults .vehicle-meta {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    #searchResults .search-result-open {
      grid-row: 1;
      grid-column: 2;
      min-width: 0;
    }

    .vi-shortcut-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vi-more-tools .home-tool-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .record-identity-band {
      grid-template-columns: minmax(0, 1fr) auto;
      padding: var(--ck-space-3);
    }

    .record-identity-primary {
      grid-column: 1 / -1;
      grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .vehicle-record-image,
    .vehicle-image-placeholder {
      width: 4.5rem;
      height: 4.5rem;
    }

    .record-state-cluster {
      grid-row: 2;
      grid-column: 2;
      align-self: start;
    }

    .record-facts-desktop {
      display: none;
    }

    .record-facts-toggle {
      display: block;
      grid-row: 3;
      grid-column: 1 / -1;
      border-top: 1px solid var(--ck-border-subtle);
    }

    .record-facts-toggle > summary {
      display: flex;
      min-height: var(--ck-target-compact);
      align-items: center;
      justify-content: space-between;
      color: var(--ck-text-primary);
      cursor: pointer;
      font-weight: var(--ck-weight-card);
    }

    .record-key-facts {
      padding-bottom: var(--ck-space-2);
    }

    .record-key-facts > div {
      padding-inline: var(--ck-space-2);
    }

    .record-action-bar {
      grid-row: 4;
    }

    .record-action-bar .btn {
      flex: 1 1 8rem;
    }

    .vehicle-record-grid {
      order: 2;
    }

    .record-section-navigation {
      order: 3;
      display: grid;
      border-block: 1px solid var(--ck-border-default);
    }

    .record-section-navigation button {
      display: flex;
      min-height: var(--ck-target-touch);
      align-items: center;
      justify-content: space-between;
      gap: var(--ck-space-3);
      padding-inline: var(--ck-space-2);
      border: 0;
      border-bottom: 1px solid var(--ck-border-subtle);
      background: transparent;
      color: var(--ck-text-primary);
      font-weight: var(--ck-weight-card);
      text-align: left;
    }

    .record-section-navigation button:last-child {
      border-bottom: 0;
    }

    .record-fact-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .record-evidence-row {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }

    .record-evidence-row .badge {
      justify-self: start;
    }
  }

  @media (max-width: 359px) {
    .vi-shortcut-grid,
    .vi-support-actions,
    .record-key-facts,
    .record-fact-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (orientation: landscape) and (max-height: 479px) and (max-width: 899px) {
    #page-home.page.active {
      width: 100%;
      max-width: none;
      gap: var(--ck-space-2);
    }

    .vi-home-intro,
    .vi-search-status,
    .vi-home-shortcuts,
    .vi-more-tools {
      display: none;
    }

    .vi-search-command {
      padding: var(--ck-space-2) var(--ck-space-3);
      gap: var(--ck-space-1);
    }

    .vi-search-command .module-band-kicker,
    .vi-search-command .section-subtitle {
      display: none;
    }

    .vi-search-command .search-box {
      grid-template-columns: minmax(0, 1fr) 8rem;
    }

    .vi-home-workspace {
      grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .65fr);
      gap: var(--ck-space-2);
    }

    .vi-active-work {
      gap: var(--ck-space-2);
    }

    .vi-search-results-region {
      display: grid;
      margin-top: var(--ck-space-1);
    }

    .vi-home-support {
      gap: var(--ck-space-2);
    }

    .vi-operational-summary,
    .vi-readiness-panel {
      padding: var(--ck-space-2) var(--ck-space-3);
    }

    .vi-summary-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vi-summary-list > div {
      display: grid;
      gap: 2px;
      padding: var(--ck-space-2);
    }

    .vi-readiness-panel .empty,
    .vi-readiness-status span,
    .vi-readiness-panel .progress-list {
      display: none;
    }

    .vi-readiness-progress {
      margin-block: var(--ck-space-2);
    }

    .vehicle-record-workspace {
      gap: var(--ck-space-2);
    }

    .record-identity-band {
      grid-template-columns: minmax(0, 1fr) auto;
      padding: var(--ck-space-2);
    }

    .record-identity-primary {
      grid-template-columns: max-content minmax(0, 1fr);
    }

    .vehicle-record-image,
    .vehicle-image-placeholder,
    .record-facts-toggle,
    .record-section-navigation,
    .record-action-bar .btn:not(.primary) {
      display: none;
    }

    .record-action-bar {
      grid-column: 1 / -1;
      padding-top: var(--ck-space-2);
    }

    .vehicle-record-grid {
      grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr);
      grid-template-areas: "decision main";
      gap: var(--ck-space-2);
    }

    .record-decision-column,
    .record-evidence-column {
      max-height: calc(100dvh - 138px);
      overflow-y: auto;
    }

    .record-decision-column .record-readiness-panel,
    .record-evidence-column > :not(.record-risk-panel) {
      display: none;
    }
  }

  @media (orientation: landscape) and (max-height: 479px) and (max-width: 639px) {
    .vi-home-workspace {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Milestone 6: inspection and damage vertical slice. */
  .inspection-workspace-tabs {
    display: none;
  }

  .inspection-workspace {
    display: grid;
    grid-template-columns: minmax(14rem, .78fr) minmax(24rem, 1.42fr) minmax(18rem, .92fr);
    align-items: stretch;
    min-width: 0;
    min-height: 38rem;
    overflow: hidden;
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-panel);
    background: var(--ck-surface-1);
    box-shadow: var(--ck-shadow-raised);
  }

  .inspection-pane {
    min-width: 0;
    padding: var(--ck-space-4);
    overflow: auto;
    border-right: 1px solid var(--ck-border-subtle);
    background: var(--ck-surface-1);
  }

  .inspection-pane:last-child {
    border-right: 0;
  }

  .inspection-pane:focus {
    outline: 3px solid var(--ck-focus);
    outline-offset: -3px;
  }

  .inspection-pane-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ck-space-3);
    margin-bottom: var(--ck-space-3);
  }

  .inspection-pane-heading .section-title {
    margin: 0;
  }

  .inspection-pane-kicker {
    display: block;
    margin-bottom: var(--ck-space-1);
    color: var(--ck-text-muted);
    font-size: var(--ck-type-meta);
    font-weight: var(--ck-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .inspection-count {
    flex: 0 0 auto;
    padding: var(--ck-space-1) var(--ck-space-2);
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-chip);
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-meta);
    font-weight: var(--ck-weight-semibold);
  }

  .inspection-command-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ck-space-2);
    margin-bottom: var(--ck-space-4);
  }

  .inspection-command-row .btn {
    width: 100%;
    min-width: 0;
  }

  .inspection-workspace .card {
    margin: 0 0 var(--ck-space-3);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .inspection-workspace .damage-map-card > .section-title,
  .inspection-workspace .damage-map-card > .section-subtitle {
    padding-inline: 0;
  }

  .inspection-map-pane {
    background: var(--ck-surface-2);
  }

  .inspection-map-pane .damage-map-shell {
    max-height: 34rem;
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-card);
    background: var(--ck-surface-1);
  }

  .inspection-map-pane .damage-map-zoom-row {
    grid-template-columns: var(--ck-control-min, 44px) minmax(0, 1fr) var(--ck-control-min, 44px);
  }

  .inspection-map-pane .damage-map-stage {
    border-radius: var(--ck-radius-card);
  }

  .inspection-map-pane .damage-map-help {
    color: var(--ck-text-primary);
  }

  .inspection-evidence-pane {
    display: grid;
    align-content: start;
    gap: var(--ck-space-4);
  }

  .inspection-workspace .inspection-condition-card {
    padding-bottom: var(--ck-space-4);
    border-bottom: 1px solid var(--ck-border-subtle);
  }

  .inspection-condition-card .badge {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .inspection-notes {
    min-height: 7rem;
    max-height: 15rem;
    resize: vertical;
  }

  .inspection-evidence-list h3,
  .inspection-secondary-grid h3 {
    margin: var(--ck-space-4) 0 var(--ck-space-2);
    color: var(--ck-text-primary);
    font-size: var(--ck-type-compact);
    font-weight: var(--ck-weight-bold);
  }

  .inspection-tool-disclosure,
  .inspection-summary-disclosure,
  .inspection-secondary-tools {
    border: 1px solid var(--ck-border-default);
    border-radius: var(--ck-radius-card);
    background: var(--ck-surface-1);
  }

  .inspection-tool-disclosure > summary,
  .inspection-summary-disclosure > summary,
  .inspection-secondary-tools > summary {
    min-height: var(--ck-control-min);
    padding: var(--ck-space-3) var(--ck-space-4);
    color: var(--ck-text-primary);
    font-weight: var(--ck-weight-semibold);
    cursor: pointer;
  }

  .inspection-tool-disclosure > summary:focus-visible,
  .inspection-summary-disclosure > summary:focus-visible,
  .inspection-secondary-tools > summary:focus-visible {
    outline: 3px solid var(--ck-focus);
    outline-offset: 2px;
  }

  .inspection-tool-body,
  .inspection-secondary-grid {
    padding: 0 var(--ck-space-4) var(--ck-space-4);
  }

  .inspection-summary-disclosure > .inspection-summary-card {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--ck-border-subtle);
    border-radius: 0;
    box-shadow: none;
  }

  .inspection-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-5);
  }

  .inspection-upload-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ck-space-3);
  }

  .damage-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ck-space-3);
    margin: var(--ck-space-4) 0 var(--ck-space-2);
    color: var(--ck-text-secondary);
    font-size: var(--ck-type-compact);
  }

  .damage-list-alternative {
    display: grid;
    gap: var(--ck-space-2);
  }

  .damage-map-draft-row {
    border-left: 4px solid var(--ck-border-strong);
    background: var(--ck-surface-1);
  }

  .damage-map-draft-row.severity-medium {
    border-left-style: dashed;
  }

  .damage-map-draft-row.severity-high,
  .damage-map-draft-row.severity-critical {
    border-left-width: 7px;
    border-left-style: double;
  }

  .damage-map-draft-row.is-selected {
    outline: 3px solid var(--ck-focus);
    outline-offset: 1px;
  }

  .damage-list-number {
    display: grid;
    flex: 0 0 var(--ck-control-min);
    width: var(--ck-control-min);
    height: var(--ck-control-min);
    place-items: center;
    border: 2px solid var(--ck-border-strong);
    border-radius: 50%;
    color: var(--ck-text-primary);
    font-weight: var(--ck-weight-bold);
  }

  .damage-pin {
    grid-template-columns: 1fr auto;
    gap: 2px;
    transform: translate(calc(-50% + var(--pin-offset-x, 0px)), calc(-50% + var(--pin-offset-y, 0px)));
    border-radius: 50%;
    box-shadow: 0 2px 0 var(--ck-border-strong), var(--ck-shadow-raised);
  }

  .damage-pin.severity-medium {
    border-radius: var(--ck-radius-control);
  }

  .damage-pin.severity-high {
    border-radius: 50% 50% 50% 4px;
  }

  .damage-pin.severity-critical {
    border-radius: 4px;
    border-width: 4px;
  }

  .damage-pin.is-selected {
    outline: 4px solid var(--ck-focus);
    outline-offset: 4px;
    z-index: 3;
  }

  .damage-pin-number {
    justify-self: end;
    font-size: var(--ck-type-compact);
    line-height: 1;
  }

  .damage-pin-severity-icon {
    align-self: start;
    justify-self: start;
    font-size: .62rem;
    line-height: 1;
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .inspection-workspace {
      grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr);
    }

    .inspection-evidence-pane {
      grid-column: 1 / -1;
      grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr);
      border-top: 1px solid var(--ck-border-subtle);
      border-right: 0;
    }
  }

  @media (max-width: 767px) {
    #inspectionContent .workflow-identity {
      gap: var(--ck-space-2);
      padding: var(--ck-space-3);
    }

    #inspectionContent .workflow-identity-main {
      grid-template-columns: minmax(0, 1fr) max-content;
      gap: var(--ck-space-2);
    }

    #inspectionContent .workflow-identity-main .plate,
    #inspectionContent .workflow-identity-meta,
    #inspectionContent .workflow-identity-note {
      display: none;
    }

    #inspectionContent .workflow-identity-title {
      font-size: var(--ck-type-card);
      line-height: var(--ck-leading-card);
    }

    #inspectionContent .workflow-summary-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--ck-space-1);
    }

    #inspectionContent .workflow-summary-item {
      padding: var(--ck-space-2);
    }

    #inspectionContent .workflow-summary-item span {
      font-size: .68rem;
    }

    #inspectionContent .workflow-summary-item strong {
      font-size: var(--ck-type-meta);
      line-height: 1.2;
    }

    .inspection-workspace-tabs {
      position: sticky;
      top: calc(var(--ck-header-height, 56px) + var(--ck-safe-top));
      z-index: 8;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--ck-space-1);
      padding: var(--ck-space-1);
      border: 1px solid var(--ck-border-default);
      border-radius: var(--ck-radius-control);
      background: var(--ck-surface-1);
      box-shadow: var(--ck-shadow-raised);
    }

    .inspection-workspace-tab {
      min-height: var(--ck-control-min);
      border: 1px solid transparent;
      border-radius: var(--ck-radius-control);
      background: transparent;
      color: var(--ck-text-secondary);
      font-size: var(--ck-type-compact);
      font-weight: var(--ck-weight-semibold);
    }

    .inspection-workspace-tab.is-active {
      border-color: var(--ck-action-primary);
      background: var(--ck-action-primary);
      color: var(--ck-action-primary-text);
    }

    .inspection-workspace {
      display: block;
      min-height: 0;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .inspection-workspace .inspection-pane {
      display: none;
      padding: var(--ck-space-3);
      overflow: visible;
      border: 1px solid var(--ck-border-default);
      border-radius: var(--ck-radius-panel);
      background: var(--ck-surface-1);
      box-shadow: var(--ck-shadow-raised);
    }

    .inspection-workspace[data-mode="checklist"] [data-inspection-pane="checklist"],
    .inspection-workspace[data-mode="damage"] [data-inspection-pane="damage"],
    .inspection-workspace[data-mode="evidence"] [data-inspection-pane="evidence"] {
      display: block;
    }

    .inspection-checklist-item {
      display: none;
    }

    .inspection-checklist-item.is-active {
      display: block;
    }

    .inspection-checklist-controls {
      position: sticky;
      bottom: calc(var(--ck-bottom-nav-height, 72px) + var(--ck-safe-bottom));
      z-index: 6;
      display: grid;
      padding: var(--ck-space-2);
      border: 1px solid var(--ck-border-default);
      border-radius: var(--ck-radius-control);
      background: var(--ck-surface-1);
      box-shadow: var(--ck-shadow-raised);
    }

    .inspection-command-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .inspection-command-row .btn {
      padding-inline: var(--ck-space-2);
      font-size: var(--ck-type-meta);
    }

    .inspection-secondary-grid,
    .inspection-upload-fields {
      grid-template-columns: minmax(0, 1fr);
    }

    .inspection-summary-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (orientation: landscape) and (max-height: 560px) and (max-width: 899px) {
    #inspectionContent .workflow-identity {
      gap: var(--ck-space-1);
      padding: var(--ck-space-2);
    }

    #inspectionContent .workflow-identity-main {
      grid-template-columns: minmax(0, 1fr) max-content;
      gap: var(--ck-space-2);
    }

    #inspectionContent .workflow-identity-main .plate,
    #inspectionContent .workflow-identity-meta,
    #inspectionContent .workflow-identity-note {
      display: none;
    }

    #inspectionContent .workflow-identity-title {
      font-size: var(--ck-type-card);
      line-height: var(--ck-leading-card);
    }

    #inspectionContent .workflow-summary-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--ck-space-1);
    }

    #inspectionContent .workflow-summary-item {
      padding: var(--ck-space-1) var(--ck-space-2);
    }

    #inspectionContent .workflow-summary-item span,
    #inspectionContent .workflow-summary-item strong {
      font-size: .68rem;
      line-height: 1.15;
    }

    .inspection-workspace-tabs {
      position: static;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--ck-space-1);
      padding: var(--ck-space-1);
      border: 1px solid var(--ck-border-default);
      border-radius: var(--ck-radius-control);
      background: var(--ck-surface-1);
      margin-bottom: var(--ck-space-1);
    }

    .inspection-workspace-tab {
      min-height: var(--ck-control-min);
      border: 1px solid transparent;
      border-radius: var(--ck-radius-control);
      background: transparent;
      color: var(--ck-text-secondary);
      font-size: var(--ck-type-compact);
      font-weight: var(--ck-weight-semibold);
    }

    .inspection-workspace-tab.is-active {
      border-color: var(--ck-action-primary);
      background: var(--ck-action-primary);
      color: var(--ck-action-primary-text);
    }

    .inspection-workspace {
      display: block;
      min-height: 0;
      overflow: visible;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .inspection-workspace .inspection-pane {
      display: none;
      max-height: calc(100dvh - 116px);
      overflow: auto;
      border: 1px solid var(--ck-border-default);
      border-radius: var(--ck-radius-panel);
    }

    .inspection-workspace[data-mode="checklist"] [data-inspection-pane="checklist"],
    .inspection-workspace[data-mode="damage"] [data-inspection-pane="damage"],
    .inspection-workspace[data-mode="evidence"] [data-inspection-pane="evidence"] {
      display: block;
    }

    .inspection-workspace .damage-map-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(14rem, .72fr);
      gap: var(--ck-space-2);
    }

    .inspection-workspace .damage-map-card > .section-title,
    .inspection-workspace .damage-map-card > .section-subtitle,
    .inspection-workspace .damage-map-card > #ckDamageMapBackendStatus,
    .inspection-workspace .damage-map-card > .damage-map-view-row,
    .inspection-workspace .damage-map-card > .damage-map-zoom-row {
      grid-column: 1 / -1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .vi-search-skeleton span {
      animation: none;
    }

    .damage-pin.pending {
      animation: none;
    }
  }