/* Generated from ../../../ComponentSystem.html. */
/* 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);
    }
  }