@layer components {
  /* ─── Upload Dropzone ─── */

  .import-info__text {
    color: var(--op-color-neutral-on-plus-max);
    font-size: var(--op-font-medium);
    margin: 0;
  }

  .import-info__details {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-x-small);
    margin-top: var(--op-space-small);
  }

  .import-info__detail {
    display: flex;
    align-items: center;
    gap: var(--op-space-x-small);
    font-size: var(--op-font-small);
    color: var(--op-color-neutral-base);
  }

  .import-info__detail .icon {
    color: var(--op-color-primary-base);
  }

  .import-upload {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-medium);
  }

  .import-upload__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--op-space-small);
    padding: var(--op-space-2x-large) var(--op-space-large);
    border: var(--op-border-width-large) dashed var(--op-color-neutral-plus-four);
    border-radius: var(--op-radius-2x-large);
    background-color: var(--op-color-neutral-plus-max);
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease;
  }

  .import-upload__dropzone:hover,
  .import-upload__dropzone--active {
    border-color: var(--op-color-primary-base);
    background-color: var(--op-color-primary-plus-max);
  }

  .import-upload__icon {
    color: var(--op-color-neutral-plus-two);
    transition: color 180ms ease;
  }

  .import-upload__dropzone:hover .import-upload__icon,
  .import-upload__dropzone--active .import-upload__icon {
    color: var(--op-color-primary-base);
  }

  .import-upload__label {
    font-size: var(--op-font-medium);
    font-weight: var(--op-font-weight-semi-bold);
    color: var(--op-color-neutral-on-plus-max);
  }

  .import-upload__hint {
    font-size: var(--op-font-x-small);
    color: var(--op-color-neutral-base);
  }

  .import-upload__dropzone--hidden,
  .import-upload__selected--hidden {
    display: none;
  }

  .import-upload__selected {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-small);
  }

  .import-upload__file-info {
    display: flex;
    align-items: center;
    gap: var(--op-space-small);
    padding: var(--op-space-medium);
    border-radius: var(--op-radius-large);
    background-color: var(--op-color-primary-plus-max);
    border: var(--op-border-width) solid var(--op-color-primary-plus-five);
    color: var(--op-color-primary-base);
  }

  .import-upload__file-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  .import-upload__filename {
    font-size: var(--op-font-medium);
    font-weight: var(--op-font-weight-semi-bold);
    color: var(--op-color-neutral-on-plus-max);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .import-upload__filesize {
    font-size: var(--op-font-x-small);
    color: var(--op-color-neutral-base);
  }

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

  /* ─── Inline Status (settings page) ─── */

  .import-inline-status {
    margin-top: var(--op-space-x-small);
  }

  .import-inline-status__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-2x-small);
    padding: var(--op-space-2x-small) var(--op-space-small);
    border-radius: var(--op-radius-pill);
    font-size: var(--op-font-x-small);
    font-weight: var(--op-font-weight-bold);
  }

  .import-inline-status__badge--processing {
    background-color: var(--op-color-primary-plus-max);
    color: var(--op-color-primary-base);
  }

  .import-inline-status__badge--success {
    background-color: var(--op-color-alerts-notice-plus-max);
    color: var(--op-color-alerts-notice-base);
  }

  .import-inline-status__badge--error {
    background-color: var(--op-color-alerts-danger-plus-max);
    color: var(--op-color-alerts-danger-base);
  }

  .import-inline-status__spinner {
    width: var(--op-space-small);
    height: var(--op-space-small);
    border-radius: 50%;
    border: var(--op-border-width) solid var(--op-color-primary-plus-five);
    border-top-color: var(--op-color-primary-base);
    animation: import-spin 0.8s linear infinite;
    flex-shrink: 0;
  }
}