@layer components {
  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--touch-target);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast), color var(--duration-fast);
  }

  .btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .btn .icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }

  .btn--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
  }

  .btn--primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
  }

  .btn--secondary {
    background: var(--color-surface);
    border-color: var(--slate-300);
    color: var(--slate-800);
    box-shadow: var(--shadow-xs);
  }

  .btn--secondary:hover {
    border-color: var(--slate-400);
    background: var(--slate-50);
    color: var(--slate-900);
  }

  .btn--ghost {
    background: transparent;
    color: var(--slate-700);
  }

  .btn--ghost:hover {
    background: var(--slate-100);
    color: var(--slate-900);
  }

  .btn--link {
    min-block-size: auto;
    padding: var(--space-1) var(--space-2);
    background: none;
    color: var(--color-primary);
    text-decoration: underline;
  }

  .btn--approve {
    background: var(--color-approve);
    color: var(--color-on-approve);
  }

  .btn--approve:hover {
    background: var(--color-approve-hover);
    color: var(--color-on-approve);
  }

  .btn--reject {
    background: var(--color-surface);
    border-color: var(--red-700);
    color: var(--red-700);
  }

  .btn--reject:hover {
    background: var(--red-100);
    color: var(--red-800);
  }

  .btn--danger {
    background: var(--color-destructive);
    color: var(--color-on-destructive);
  }

  .btn--danger:hover {
    background: var(--color-destructive-hover);
    color: var(--color-on-destructive);
  }

  .btn--sm {
    min-block-size: 2.25rem;
    padding-inline: var(--space-3);
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
  }

  .btn[aria-busy="true"] {
    cursor: progress;
  }

  .icon-btn {
    display: inline-grid;
    place-items: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    flex: none;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--slate-600);
  }

  .icon-btn:hover {
    background: var(--slate-100);
    color: var(--slate-900);
  }

  .spinner {
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
  }

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

  .is-spinning .btn__icon {
    animation: spin 900ms linear infinite;
  }

  /* Badges and chips (always text + icon, never colour alone) */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
  }

  .badge .icon {
    inline-size: 0.95rem;
    block-size: 0.95rem;
  }

  .badge--info,
  .badge--pending {
    background: var(--tone-info-bg);
    color: var(--tone-info-fg);
  }

  .badge--success,
  .badge--approved,
  .badge--within {
    background: var(--tone-success-bg);
    color: var(--tone-success-fg);
  }

  .badge--warning,
  .badge--approaching {
    background: var(--tone-warning-bg);
    color: var(--tone-warning-fg);
  }

  .badge--danger,
  .badge--rejected,
  .badge--exceeded {
    background: var(--tone-danger-bg);
    color: var(--tone-danger-fg);
  }

  .badge--neutral,
  .badge--none {
    background: var(--tone-neutral-bg);
    color: var(--tone-neutral-fg);
  }

  .badge--outline {
    background: transparent;
    border: 1px solid var(--slate-300);
    color: var(--slate-700);
  }

  .badge--lg {
    padding: 0.3rem 0.8rem;
    font-size: var(--text-sm);
  }

  .type-chip {
    --type-fg: var(--type-other);
    --type-bg: var(--type-other-bg);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem 0.2rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--type-bg);
    color: var(--type-fg);
    font-size: var(--text-xs);
    font-weight: 650;
    white-space: nowrap;
  }

  [dir="rtl"] .type-chip {
    padding: 0.2rem 0.45rem 0.2rem 0.65rem;
  }

  .type-chip .icon {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .type-icon {
    --type-fg: var(--type-other);
    --type-bg: var(--type-other-bg);
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--type-bg);
    color: var(--type-fg);
  }

  [data-type-kind="Document"] {
    --type-fg: var(--type-document);
    --type-bg: var(--type-document-bg);
  }

  [data-type-kind="CashIn"] {
    --type-fg: var(--type-cashIn);
    --type-bg: var(--type-cashIn-bg);
  }

  [data-type-kind="CashOut"] {
    --type-fg: var(--type-cashOut);
    --type-bg: var(--type-cashOut-bg);
  }

  [data-type-kind="CashOutRequest"] {
    --type-fg: var(--type-cashOutRequest);
    --type-bg: var(--type-cashOutRequest-bg);
  }

  .count-pill {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.35rem;
    block-size: 1.35rem;
    padding-inline: 0.35rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .id-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .id-chip__value {
    color: var(--slate-800);
    font-family: var(--font-mono);
    font-size: 0.86rem;
    font-weight: 500;
    direction: ltr;
    unicode-bidi: isolate;
  }

  /* Form controls */
  .field {
    display: grid;
    gap: var(--space-2);
  }

  .field__label {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--slate-800);
  }

  .field__optional {
    color: var(--color-text-subtle);
    font-weight: 500;
  }

  .field__required {
    color: var(--red-800);
    font-weight: 600;
  }

  .field__hint {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .field__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .field__counter {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    margin-inline-start: auto;
  }

  .field__counter--warning {
    color: var(--amber-800);
    font-weight: 600;
  }

  .field__counter--error {
    color: var(--red-800);
    font-weight: 600;
  }

  .field__error {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    color: var(--red-800);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .field__error .icon {
    margin-block-start: 0.1em;
  }

  .input,
  .textarea,
  .select {
    inline-size: 100%;
    min-block-size: var(--touch-target);
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  }

  .textarea {
    min-block-size: 7rem;
    resize: vertical;
    line-height: 1.55;
  }

  .input:focus-visible,
  .textarea:focus-visible,
  .select:focus-visible {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px var(--color-focus-glow);
  }

  [aria-invalid="true"] {
    border-color: var(--red-700) !important;
  }

  [aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgb(179 38 30 / 0.22) !important;
  }

  .select {
    appearance: none;
    padding-inline-end: 2.25rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--slate-600) 50%), linear-gradient(135deg, var(--slate-600) 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
  }

  [dir="rtl"] .select {
    background-position: 1.1rem 55%, 0.75rem 55%;
    background-image: linear-gradient(-45deg, transparent 50%, var(--slate-600) 50%), linear-gradient(-135deg, var(--slate-600) 50%, transparent 50%);
  }

  .choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast);
  }

  .choice:hover {
    border-color: var(--slate-400);
  }

  .choice:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--blue-50);
  }

  .choice:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
  }

  .choice input {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin: 0;
    flex: none;
    accent-color: var(--color-primary);
  }

  .choice input:focus-visible {
    outline: none;
  }

  .choice__label {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .choice__count {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }

  .choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-2);
  }

  /* Surfaces */
  .panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-block-end: 1px solid var(--color-border);
  }

  .panel__title {
    font-size: var(--text-md);
  }

  .panel__body {
    padding: var(--space-4) var(--space-5);
  }

  /* Notices: inline status messages placed near the content they describe */
  .notices {
    display: grid;
    gap: var(--space-3);
  }

  .notices:empty {
    display: none;
  }

  .notice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    border: 1px solid transparent;
    border-inline-start-width: 4px;
    border-radius: var(--radius-md);
    background: var(--tone-info-bg);
    color: var(--slate-900);
    animation: notice-in var(--duration-slow) var(--ease-out);
  }

  .notice:focus {
    outline: none;
  }

  .notice:focus-visible {
    box-shadow: var(--focus-ring);
  }

  .notice__icon {
    flex: none;
    margin-block-start: 0.1rem;
  }

  .notice__body {
    display: grid;
    flex: 1;
    gap: var(--space-1);
    min-inline-size: 0;
  }

  .notice__title {
    font-weight: 650;
    font-size: var(--text-base);
  }

  .notice__text {
    color: var(--slate-700);
    font-size: var(--text-sm);
  }

  .notice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  .notice__dismiss {
    margin: calc(var(--space-2) * -1);
  }

  .notice--info {
    border-color: var(--color-notice-info-border);
    border-inline-start-color: var(--blue-700);
    background: var(--color-notice-info-bg);
  }

  .notice--info .notice__icon {
    color: var(--blue-700);
  }

  .notice--success {
    border-color: var(--color-notice-success-border);
    border-inline-start-color: var(--green-700);
    background: var(--color-notice-success-bg);
  }

  .notice--success .notice__icon {
    color: var(--green-700);
  }

  .notice--warning {
    border-color: var(--color-notice-warning-border);
    border-inline-start-color: var(--amber-500);
    background: var(--color-notice-warning-bg);
  }

  .notice--warning .notice__icon {
    color: var(--amber-800);
  }

  .notice--danger {
    border-color: var(--color-notice-danger-border);
    border-inline-start-color: var(--red-700);
    background: var(--color-notice-danger-bg);
  }

  .notice--danger .notice__icon {
    color: var(--red-700);
  }

  @keyframes notice-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
  }

  .reference {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .reference code {
    font-family: var(--font-mono);
    direction: ltr;
    unicode-bidi: isolate;
    color: var(--slate-800);
  }

  /* Full-area states (empty, error, access) */
  .state {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-9) var(--space-5);
    border: 1px dashed var(--slate-300);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    text-align: center;
  }

  .state:focus {
    outline: none;
  }

  .state__art {
    display: grid;
    place-items: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    margin-block-end: var(--space-2);
    border-radius: 50%;
    background: var(--tone-neutral-bg);
    color: var(--slate-600);
  }

  .state__art .icon {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .state--success .state__art {
    background: var(--green-100);
    color: var(--green-700);
    box-shadow: 0 0 0 10px var(--color-success-halo);
  }

  .state--danger .state__art {
    background: var(--red-100);
    color: var(--red-700);
  }

  .state--warning .state__art {
    background: var(--amber-100);
    color: var(--amber-800);
  }

  .state--info .state__art {
    background: var(--blue-100);
    color: var(--blue-700);
  }

  .state__title {
    font-size: var(--text-lg);
    max-inline-size: 32rem;
  }

  .state__text {
    max-inline-size: 34rem;
    color: var(--color-text-muted);
  }

  .state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  /* Skeletons: shaped like the final content so the layout does not jump */
  .skeleton {
    display: block;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-skeleton) 0%, var(--color-skeleton-highlight) 40%, var(--color-skeleton) 80%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
  }

  [dir="rtl"] .skeleton {
    animation-direction: reverse;
  }

  .skeleton--text {
    block-size: 0.8rem;
    inline-size: 60%;
  }

  .skeleton--title {
    block-size: 1.05rem;
    inline-size: 45%;
  }

  .skeleton--stat {
    block-size: 1.9rem;
    inline-size: 3.5rem;
    border-radius: var(--radius-md);
  }

  .skeleton--pill {
    block-size: 1.4rem;
    inline-size: 6.5rem;
    border-radius: var(--radius-pill);
  }

  .skeleton--button {
    block-size: 2.5rem;
    inline-size: 8rem;
    border-radius: var(--radius-md);
  }

  .skeleton--block {
    block-size: 100%;
    inline-size: 100%;
    border-radius: var(--radius-lg);
  }

  @keyframes shimmer {
    from {
      background-position: 100% 0;
    }

    to {
      background-position: -100% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .skeleton,
    .spinner,
    .is-spinning .btn__icon {
      animation: none;
    }
  }

  /* Dialogs and bottom sheets (native <dialog>: inert background, Esc handling) */
  .dialog {
    inline-size: min(34rem, calc(100vw - 2rem));
    max-block-size: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .dialog[open] {
    display: flex;
    flex-direction: column;
    animation: dialog-in var(--duration-slow) var(--ease-out);
  }

  .dialog::backdrop {
    background: var(--color-scrim);
    backdrop-filter: blur(2px);
  }

  .dialog__form {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    flex: 1;
  }

  .dialog__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-3);
  }

  .dialog__icon {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--tone-info-bg);
    color: var(--tone-info-fg);
  }

  .dialog__icon--approve {
    background: var(--green-100);
    color: var(--green-700);
  }

  .dialog__icon--reject,
  .dialog__icon--danger {
    background: var(--red-100);
    color: var(--red-700);
  }

  .dialog__icon--warning {
    background: var(--amber-100);
    color: var(--amber-800);
  }

  .dialog__title {
    flex: 1;
    align-self: center;
    font-size: var(--text-lg);
  }

  .dialog__title:focus {
    outline: none;
  }

  .dialog__body {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-5) var(--space-5);
    overflow-y: auto;
  }

  .dialog__footer {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-muted);
  }

  .dialog__summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
  }

  .dialog__summary dt {
    color: var(--color-text-muted);
  }

  .dialog__summary dd {
    font-weight: 600;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .dialog__warning {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    color: var(--slate-700);
    font-size: var(--text-sm);
  }

  .dialog__warning .icon {
    color: var(--amber-800);
    margin-block-start: 0.1em;
  }

  .dialog--center {
    text-align: center;
  }

  .dialog__panel {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-6) var(--space-6);
  }

  .dialog__panel .dialog__footer {
    inline-size: calc(100% + 2 * var(--space-6));
    margin: var(--space-3) calc(var(--space-6) * -1) calc(var(--space-6) * -1);
    justify-content: center;
  }

  .dialog__hero {
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 50%;
    background: var(--amber-100);
    color: var(--amber-800);
  }

  .dialog__hero .icon {
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }

  .dialog__text {
    color: var(--color-text-muted);
  }

  @keyframes dialog-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
    }
  }

  .sheet {
    inline-size: min(28rem, 100vw);
    max-inline-size: 100vw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
  }

  [dir="rtl"] .sheet {
    margin: 0 auto 0 0;
  }

  .sheet[open] {
    display: flex;
    flex-direction: column;
    animation: sheet-in-inline var(--duration-slow) var(--ease-out);
  }

  [dir="rtl"] .sheet[open] {
    animation-name: sheet-in-inline-rtl;
  }

  .sheet::backdrop {
    background: var(--color-scrim-soft);
  }

  @keyframes sheet-in-inline {
    from {
      transform: translateX(100%);
    }
  }

  @keyframes sheet-in-inline-rtl {
    from {
      transform: translateX(-100%);
    }
  }

  @keyframes sheet-in-block {
    from {
      transform: translateY(100%);
    }
  }

  @media (max-width: 599px) {
    .dialog {
      inline-size: 100vw;
      max-inline-size: 100vw;
      max-block-size: 92dvh;
      margin: auto 0 0;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .dialog[open],
    .sheet[open],
    [dir="rtl"] .sheet[open] {
      animation-name: sheet-in-block;
    }

    .sheet {
      inline-size: 100vw;
      block-size: auto;
      max-block-size: 92dvh;
      margin: auto 0 0;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    [dir="rtl"] .sheet {
      margin: auto 0 0;
    }

    .dialog__footer .btn {
      flex: 1 1 auto;
    }
  }

  /* Tabs */
  .tabs {
    display: flex;
    gap: var(--space-1);
    border-block-end: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--touch-target);
    padding: 0 var(--space-4);
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .tab:hover {
    color: var(--slate-900);
  }

  .tab[aria-selected="true"] {
    color: var(--color-primary);
  }

  .tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--space-2);
    inset-block-end: -1px;
    block-size: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--color-primary);
  }

  .tab:focus-visible {
    outline-offset: -3px;
  }

  .tab .count-pill {
    background: var(--slate-150);
    color: var(--slate-700);
  }

  .tab[aria-selected="true"] .count-pill {
    background: var(--blue-100);
    color: var(--blue-700);
  }

  .tab-panel:focus-visible {
    outline-offset: 4px;
  }

  /* Chips for active filters */
  .chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: 2.25rem;
    padding-inline: var(--space-3) var(--space-1);
    border: 1px solid var(--color-notice-info-border);
    border-radius: var(--radius-pill);
    background: var(--color-notice-info-bg);
    color: var(--color-chip-text);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .chip__remove {
    display: inline-grid;
    place-items: center;
    inline-size: 1.85rem;
    block-size: 1.85rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
  }

  .chip__remove:hover {
    background: var(--blue-100);
  }

  .chip__remove .icon {
    inline-size: 0.95rem;
    block-size: 0.95rem;
  }

  /* Pagination */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
  }

  .pagination__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pagination__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-inline-size: var(--touch-target);
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--slate-800);
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .pagination__button:hover:not(:disabled) {
    border-color: var(--slate-400);
  }

  .pagination__button[aria-current="page"] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
  }

  .pagination__button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .pagination__gap {
    padding-inline: var(--space-1);
    color: var(--color-text-subtle);
  }

  .pagination__size {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .pagination__size .select {
    inline-size: auto;
    min-inline-size: 5rem;
  }
}