@layer components {
  /* Base element - inherited by all z-* components */
  .z-element {
    display: flex;
    box-sizing: border-box;
  }

  /*
   * BUTTON
   * Carbon-style buttons with Apple interaction feel
   */
  .z-button {
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    height: 48px;
    padding: 0 var(--space-6);
    border: none;
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    transition: background-color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      background: var(--button-secondary-bg-hover);
    }

    &:active {
      background: var(--border-default);
    }

    &:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Primary variant - filled blue */
    &[data-variant="primary"] {
      background: var(--button-primary-bg);
      color: var(--button-primary-text);

      &:hover {
        background: var(--button-primary-bg-hover);
      }

      &:active {
        background: var(--blue-70);
      }
    }

    /* Ghost variant - text only */
    &[data-variant="ghost"] {
      background: transparent;
      color: var(--button-ghost-text);

      &:hover {
        background: var(--button-ghost-hover);
      }
    }

    /* Danger variant */
    &[data-variant="danger"] {
      background: var(--status-error);
      color: #ffffff;

      &:hover {
        background: var(--red-50);
      }
    }

    /* Small size */
    &[data-size="sm"] {
      height: 32px;
      padding: 0 var(--space-4);
      font-size: var(--text-xs);
    }

    /* Large size */
    &[data-size="lg"] {
      height: 56px;
      padding: 0 var(--space-7);
      font-size: var(--text-base);
    }

    /* Icon-only */
    &[data-icon-only] {
      width: 48px;
      padding: 0;

      &[data-size="sm"] {
        width: 32px;
      }

      &[data-size="lg"] {
        width: 56px;
      }
    }
  }

  /*
   * TEXT FIELD
   * Carbon-style input with bottom border emphasis
   */
  .z-text-field {
    flex-direction: column;
    gap: var(--space-2);
  }

  .z-text-field__label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--field-label);
    letter-spacing: var(--tracking-wide);
  }

  .z-text-field__input {
    height: 48px;
    padding: 0 var(--space-5);
    border: none;
    border-bottom: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    transition:
      border-color var(--timing-fast),
      background-color var(--timing-fast);

    &::placeholder {
      color: var(--input-placeholder);
    }

    &:hover {
      border-color: var(--border-strong);
    }

    &:focus {
      outline: none;
      border-color: var(--input-border-focus);
      background: var(--input-bg-focus);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .z-text-field__error {
    font-size: var(--text-xs);
    color: var(--status-error);
    margin-top: var(--space-2);
  }

  /*
   * SEARCH FIELD
   * Pill-shaped search with icon
   */
  .z-search-field {
    position: relative;
    align-items: center;
  }

  .z-search-field__icon {
    position: absolute;
    left: var(--space-5);
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
  }

  .z-search-field__input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-5);
    padding-left: calc(var(--space-5) + 24px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--input-bg);
    color: var(--input-text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    transition:
      border-color var(--timing-fast),
      background-color var(--timing-fast);

    &::placeholder {
      color: var(--input-placeholder);
    }

    &:hover {
      border-color: var(--border-default);
    }

    &:focus {
      outline: none;
      border-color: var(--input-border-focus);
      background: var(--input-bg-focus);
    }
  }

  .z-search-field__clear {
    position: absolute;
    right: var(--space-3);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--gray-80);
    color: var(--gray-20);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--timing-fast), background-color var(--timing-fast);
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background: var(--gray-70);
    }
  }

  .z-search-field:has(.z-search-field__input:not(:placeholder-shown)) .z-search-field__clear {
    opacity: 1;
  }

  /*
   * VIRTUAL GRID
   */
  .z-virtual-grid {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    contain: strict;
  }

  .z-virtual-grid__content {
    position: relative;
    width: 100%;
  }

  .z-grid-item {
    position: absolute;
    transition: transform var(--timing-normal), box-shadow var(--timing-normal);

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    &:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
    }
  }

  /*
   * DROPDOWN MENU
   */
  .z-dropdown-menu {
    display: none;
    flex-direction: column;
    min-width: 200px;
    padding: var(--space-3) 0;
    border: 1px solid var(--border-subtle);
    background: var(--surface-elevated);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: var(--z-dropdown);

    &:popover-open {
      display: flex;
    }

    @supports (position-anchor: --trigger) {
      position-anchor: --trigger;
      inset: unset;
      top: anchor(bottom);
      left: anchor(left);
      margin-top: var(--space-2);
    }
  }

  .z-dropdown-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 40px;
    padding: 0 var(--space-5);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      background: var(--interactive-secondary);
    }

    &:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: -2px;
    }

    &[data-destructive] {
      color: var(--status-error);
    }
  }

  .z-dropdown-menu__separator {
    height: 1px;
    margin: var(--space-3) 0;
    background: var(--border-subtle);
  }

  /*
   * NAVIGATION CONTROLLER
   */
  .z-navigation-controller {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--surface-primary);
  }

  .z-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    padding: 0 var(--space-5);
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-subtle);
    z-index: var(--z-sticky);
  }

  .z-nav-bar__left,
  .z-nav-bar__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 80px;
  }

  .z-nav-bar__right {
    justify-content: flex-end;
  }

  .z-nav-bar__title {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: var(--tracking-tight);
  }

  .z-nav-bar__back {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      background: var(--button-ghost-hover);
    }

    svg {
      flex-shrink: 0;
    }
  }

  .z-nav-bar__back-title {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .z-nav-bar__back-chevron {
    display: flex;
    align-items: center;
  }

  .z-nav-bar__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      background: var(--button-ghost-hover);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    svg {
      width: 20px;
      height: 20px;
    }
  }

  .z-nav-content {
    flex: 1;
    position: relative;
    overflow: hidden;

    > * {
      position: absolute;
      inset: 0;
      overflow: auto;
      background: var(--surface-primary);
    }
  }

  .z-nav-toolbar {
    display: none;
    align-items: center;
    justify-content: space-around;
    height: 48px;
    min-height: 48px;
    padding: 0 var(--space-5);
    background: var(--surface-secondary);
    border-top: 1px solid var(--border-subtle);
  }

  .z-nav-toolbar .z-nav-bar__item {
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-xs);

    svg {
      width: 22px;
      height: 22px;
    }
  }

  /*
   * MODAL
   */
  .z-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    z-index: var(--z-modal);
  }

  .z-modal__content {
    position: relative;
    max-width: 480px;
    max-height: 85vh;
    width: 100%;
    padding: var(--space-6);
    background: var(--surface-elevated);
    box-shadow:
      0 24px 48px rgba(0, 0, 0, 0.2),
      0 0 0 1px var(--border-subtle);
    overflow: auto;
  }

  .z-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    z-index: calc(var(--z-modal) - 1);
  }

  /*
   * ACTION SHEET
   */
  .z-action-sheet {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-4);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    z-index: var(--z-modal);
  }

  .z-action-sheet__sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .z-action-sheet__header {
    padding: var(--space-5);
    text-align: center;
    background: var(--surface-elevated);
    border-radius: var(--radius-lg);
  }

  .z-action-sheet__title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }

  .z-action-sheet__message {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-2);
  }

  .z-action-sheet__group {
    display: flex;
    flex-direction: column;
    background: var(--surface-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .z-action-sheet__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    height: 56px;
    padding: 0 var(--space-5);
    border: none;
    background: transparent;
    color: var(--accent-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:not(:last-child) {
      border-bottom: 1px solid var(--border-subtle);
    }

    &:hover {
      background: var(--interactive-secondary);
    }

    &:active {
      background: var(--border-default);
    }
  }

  .z-action-sheet__action--destructive {
    color: var(--status-error);
  }

  .z-action-sheet__action--cancel {
    font-weight: 600;
  }

  .z-action-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    z-index: calc(var(--z-modal) - 1);
  }

  /*
   * POPUP MENU
   * Animated popup with scale + fade from anchor
   */
  .z-popup-menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: 320px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--surface-elevated);
    border-radius: var(--radius-lg);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.2),
      0 0 0 1px var(--border-subtle);
    z-index: var(--z-popover);
    outline: none;
  }

  .z-popup-menu__group {
    border-bottom: 8px solid var(--surface-secondary);

    &:last-child {
      border-bottom: none;
    }
  }

  .z-popup-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:not(:last-child) {
      border-bottom: 1px solid var(--border-subtle);
    }

    &:hover {
      background: var(--interactive-secondary);
    }

    &:active {
      background: var(--border-default);
    }

    &:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: -2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &[data-destructive] {
      color: var(--status-error);
    }

    &[data-checkable] {
      padding-left: var(--space-9);
    }

    &[data-checked] .z-popup-menu__check {
      opacity: 1;
    }
  }

  .z-popup-menu__check {
    position: absolute;
    left: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    opacity: 0;
    transition: opacity var(--timing-fast);

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .z-popup-menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-secondary);

    svg {
      width: 20px;
      height: 20px;
    }
  }

  .z-popup-menu__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .z-popup-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-popover);
  }

  /*
   * TAB BAR
   */
  .z-tab-bar {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: 56px;
    min-height: 56px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface-secondary);
    border-top: 1px solid var(--border-subtle);
  }

  .z-tab-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    flex: 1;
    padding: var(--space-2);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      color: var(--text-secondary);
    }
  }

  .z-tab-bar__item--selected,
  .z-tab-bar__item--selected:hover {
    color: var(--blue-60);
    font-weight: 600;
  }

  :root[data-theme="dark"] .z-tab-bar__item--selected,
  :root[data-theme="dark"] .z-tab-bar__item--selected:hover {
    color: var(--blue-40);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .z-tab-bar__item--selected,
    :root:not([data-theme="light"]) .z-tab-bar__item--selected:hover {
      color: var(--blue-40);
    }
  }

  .z-tab-bar__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .z-tab-bar__icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      width: 24px;
      height: 24px;
    }
  }

  .z-tab-bar__badge {
    position: absolute;
    top: -4px;
    left: 50%;
    margin-left: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--status-error);
    color: white;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
  }

  .z-tab-bar__label {
    letter-spacing: var(--tracking-wide);
  }

  /*
   * SEGMENTED CONTROL
   */
  .z-segmented-control {
    position: relative;
    display: flex;
    height: 40px;
    padding: 2px;
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
  }

  .z-segmented-control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: calc(100% - 4px);
    border-radius: calc(var(--radius-md) - 2px);
    background: var(--surface-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 0;
  }

  .z-segmented-control__segment {
    position: relative;
    flex: 1;
    padding: 0 var(--space-5);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    z-index: 1;
    transition: color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      color: var(--text-primary);
    }
  }

  .z-segmented-control__segment--selected {
    color: var(--text-primary);
  }

  /*
   * LIST
   */
  .z-list {
    display: flex;
    flex-direction: column;
  }

  .z-list--inset {
    padding: 0 var(--space-5);
  }

  .z-list--inset .z-list__items {
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .z-list__section {
    margin-bottom: var(--space-7);

    &:last-child {
      margin-bottom: 0;
    }
  }

  .z-list__section-header {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }

  .z-list--inset .z-list__section-header {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .z-list__section-footer {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
  }

  .z-list__items {
    background: var(--surface-elevated);
  }

  .z-list__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 48px;
    padding: var(--space-4) var(--space-5);
    background: var(--surface-elevated);
    cursor: pointer;
    transition: background-color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:not(:last-child) {
      border-bottom: 1px solid var(--border-subtle);
    }

    &:hover {
      background: var(--interactive-secondary);
    }

    &:active {
      background: var(--border-default);
    }

    &:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: -2px;
    }
  }

  .z-list__row-content {
    flex: 1;
    min-width: 0;
  }

  .z-list__disclosure {
    color: var(--text-muted);
    flex-shrink: 0;
  }

  /*
   * SWIPEABLE ROW
   */
  .z-swipeable-row {
    display: block;
    position: relative;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
  }

  .z-swipeable-row__content {
    position: relative;
    z-index: 1;
    background: var(--surface-elevated);
    user-select: none;
    -webkit-user-select: none;
  }

  .z-swipeable-row__actions {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    overflow: hidden;
  }

  .z-swipeable-row__actions--left {
    left: 0;
  }

  .z-swipeable-row__actions--right {
    right: 0;
    flex-direction: row-reverse;
  }

  .z-swipeable-row__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 80px;
    padding: var(--space-4);
    border: none;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    transition: filter var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      filter: brightness(1.1);
    }
  }

  .z-swipeable-row__action-icon {
    display: flex;

    svg {
      width: 22px;
      height: 22px;
    }
  }

  /*
   * CHIP
   */
  .z-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 32px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    cursor: pointer;
    transition:
      background-color var(--timing-fast),
      border-color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      background: var(--interactive-secondary);
    }

    &:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
    }
  }

  .z-chip--selected {
    background: var(--interactive-primary);
    border-color: var(--interactive-primary);
    color: var(--text-on-color);

    &:hover {
      background: var(--interactive-primary-hover);
      border-color: var(--interactive-primary-hover);
    }
  }

  .z-chip--outline {
    background: transparent;
    border-color: var(--border-strong);
  }

  .z-chip--filled {
    background: var(--surface-secondary);
    border-color: transparent;
  }

  .z-chip--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .z-chip__icon {
    display: flex;
    margin-left: calc(-1 * var(--space-1));

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .z-chip__label {
    white-space: nowrap;
  }

  .z-chip__dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: calc(-1 * var(--space-2));
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity var(--timing-fast), background-color var(--timing-fast);

    &:hover {
      opacity: 1;
      background: rgba(0, 0, 0, 0.1);
    }
  }

  /*
   * FILTER BAR
   */
  .z-filter-bar {
    display: block;
    position: relative;
  }

  .z-filter-bar__scroll {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-2) 0;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .z-filter-bar__chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    height: 36px;
    padding: 0 var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    scroll-snap-align: start;
    transition:
      background-color var(--timing-fast),
      border-color var(--timing-fast),
      color var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      background: var(--interactive-secondary);
    }

    &:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
    }
  }

  .z-filter-bar__chip--selected {
    background: var(--interactive-primary);
    border-color: var(--interactive-primary);
    color: var(--text-on-color);

    &:hover {
      background: var(--interactive-primary-hover);
      border-color: var(--interactive-primary-hover);
    }
  }

  .z-filter-bar__chip-icon {
    display: flex;

    svg {
      width: 16px;
      height: 16px;
    }
  }

  /*
   * TOGGLE
   */
  .z-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;

    &:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
      border-radius: var(--radius-full);
    }
  }

  .z-toggle--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .z-toggle__track {
    position: relative;
    width: 52px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--gray-70);
    transition: background-color var(--timing-fast);
  }

  .z-toggle--checked .z-toggle__track {
    background: var(--interactive-primary);
  }

  .z-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform var(--timing-fast);
  }

  .z-toggle--checked .z-toggle__thumb {
    transform: translateX(20px);
  }

  .z-toggle__label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--text-primary);
  }

  /*
   * SLIDER
   */
  .z-slider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 120px;

    &:focus-visible {
      outline: none;
    }

    &:focus-visible .z-slider__thumb {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
    }
  }

  .z-slider--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .z-slider__track {
    position: relative;
    flex: 1;
    height: 24px;
    border-radius: var(--radius-full);
    background: transparent;
    cursor: pointer;
    touch-action: none;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 4px;
      margin-top: -2px;
      border-radius: var(--radius-full);
      background: var(--gray-70);
    }
  }

  .z-slider--disabled .z-slider__track {
    cursor: not-allowed;
  }

  .z-slider__fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    margin-top: -2px;
    border-radius: var(--radius-full);
    background: var(--interactive-primary);
  }

  .z-slider__thumb {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    border-radius: var(--radius-full);
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform var(--timing-fast);
    pointer-events: none;
  }

  .z-slider__thumb--active {
    transform: scale(1.1);
  }

  .z-slider__value {
    min-width: 40px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: right;
  }

  /*
   * PROGRESS BAR
   */
  .z-progress-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .z-progress-bar__label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .z-progress-bar__label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--text-primary);
  }

  .z-progress-bar__value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .z-progress-bar__track {
    position: relative;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--gray-70);
    overflow: hidden;
  }

  .z-progress-bar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--interactive-primary);
    transition: width var(--timing-fast);
  }

  .z-progress-bar--indeterminate .z-progress-bar__fill {
    width: 30%;
    animation: progress-indeterminate 1.5s ease-in-out infinite;
  }

  @keyframes progress-indeterminate {
    0% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(333%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  /*
   * TOOLBAR
   */
  .z-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
  }

  .z-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .z-toolbar__separator {
    width: 1px;
    height: 24px;
    margin: 0 var(--space-2);
    background: var(--border-default);
  }

  .z-toolbar__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    cursor: pointer;
    transition:
      background-color var(--timing-fast),
      color var(--timing-fast),
      transform var(--timing-fast);
    user-select: none;
    -webkit-user-select: none;

    &:hover {
      background: var(--interactive-secondary);
      color: var(--text-primary);
    }

    &:active {
      transform: scale(0.95);
    }

    &:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: -2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      &:active {
        transform: none;
      }
    }
  }

  .z-toolbar__button--active {
    background: var(--interactive-primary);
    color: var(--text-on-color);

    &:hover {
      background: var(--interactive-primary-hover);
      color: var(--text-on-color);
    }
  }

  .z-toolbar__button-icon {
    display: flex;

    svg {
      width: 20px;
      height: 20px;
    }
  }

  .z-toolbar__button-label {
    white-space: nowrap;
  }

  /*
   * TAG
   * Light theme: light bg (high numbers), dark text (low numbers)
   * Dark theme: dark bg (low numbers), light text (high numbers)
   */
  .z-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-sm);
    background: var(--gray-90);
    color: var(--gray-30);
    user-select: none;
    -webkit-user-select: none;
  }

  .z-tag--default {
    background: var(--gray-90);
    color: var(--gray-30);
  }

  .z-tag--blue {
    background: var(--blue-20);
    color: var(--blue-70);
  }

  .z-tag--green {
    background: var(--green-30);
    color: var(--green-70);
  }

  .z-tag--red {
    background: var(--red-30);
    color: var(--red-70);
  }

  .z-tag--yellow {
    background: var(--yellow-20);
    color: var(--yellow-60);
  }

  .z-tag--purple {
    background: var(--purple-30);
    color: var(--purple-70);
  }

  .z-tag--cyan {
    background: var(--cyan-30);
    color: var(--cyan-70);
  }

  .z-tag__icon {
    display: flex;
    align-items: center;

    svg {
      width: 12px;
      height: 12px;
    }
  }

  .z-tag__label {
    white-space: nowrap;
  }

  .z-tag__dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 2px;
    margin-right: -4px;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: opacity var(--timing-fast);
  }

  .z-tag__dismiss:hover {
    opacity: 1;
  }

  .z-tag__dismiss:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
  }

  /* Dark mode tags: dark bg (low numbers), light text (high numbers) */
  :root[data-theme="dark"] .z-tag,
  :root[data-theme="dark"] .z-tag--default {
    background: var(--gray-30);
    color: var(--gray-80);
  }

  :root[data-theme="dark"] .z-tag--blue {
    background: var(--blue-80);
    color: var(--blue-30);
  }

  :root[data-theme="dark"] .z-tag--green {
    background: var(--green-80);
    color: var(--green-30);
  }

  :root[data-theme="dark"] .z-tag--red {
    background: var(--red-80);
    color: var(--red-30);
  }

  :root[data-theme="dark"] .z-tag--yellow {
    background: var(--yellow-70);
    color: var(--yellow-20);
  }

  :root[data-theme="dark"] .z-tag--purple {
    background: var(--purple-70);
    color: var(--purple-30);
  }

  :root[data-theme="dark"] .z-tag--cyan {
    background: var(--cyan-70);
    color: var(--cyan-30);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .z-tag,
    :root:not([data-theme="light"]) .z-tag--default {
      background: var(--gray-30);
      color: var(--gray-80);
    }

    :root:not([data-theme="light"]) .z-tag--blue {
      background: var(--blue-80);
      color: var(--blue-30);
    }

    :root:not([data-theme="light"]) .z-tag--green {
      background: var(--green-80);
      color: var(--green-30);
    }

    :root:not([data-theme="light"]) .z-tag--red {
      background: var(--red-80);
      color: var(--red-30);
    }

    :root:not([data-theme="light"]) .z-tag--yellow {
      background: var(--yellow-70);
      color: var(--yellow-20);
    }

    :root:not([data-theme="light"]) .z-tag--purple {
      background: var(--purple-70);
      color: var(--purple-30);
    }

    :root:not([data-theme="light"]) .z-tag--cyan {
      background: var(--cyan-70);
      color: var(--cyan-30);
    }
  }

  /*
   * AUTOCOMPLETE
   */
  .z-autocomplete {
    display: none;
    position: fixed;
    z-index: 1000;
    background: var(--gray-100);
    border: 1px solid var(--gray-80);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow: hidden;
  }

  .z-autocomplete--open {
    display: block;
  }

  .z-autocomplete__list {
    overflow-y: auto;
    max-height: 320px;
    padding: var(--space-1);
  }

  .z-autocomplete__group {
    margin-top: var(--space-2);
  }

  .z-autocomplete__group:first-child {
    margin-top: 0;
  }

  .z-autocomplete__group-header {
    padding: var(--space-2) var(--space-3);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-50);
  }

  .z-autocomplete__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--timing-fast);
  }

  .z-autocomplete__item:hover {
    background: var(--gray-90);
  }

  .z-autocomplete__item--selected {
    background: var(--blue-90);
  }

  .z-autocomplete__item--selected:hover {
    background: var(--blue-90);
  }

  .z-autocomplete__item-icon {
    display: flex;
    align-items: center;
    color: var(--gray-50);

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .z-autocomplete__item-content {
    flex: 1;
    min-width: 0;
  }

  .z-autocomplete__item-label {
    font-size: 14px;
    color: var(--gray-10);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .z-autocomplete__item-description {
    font-size: 12px;
    color: var(--gray-50);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .z-autocomplete__highlight {
    background: var(--yellow-20);
    color: var(--yellow-80);
    border-radius: 2px;
    padding: 0 1px;
  }

  /* Dark mode autocomplete */
  :root[data-theme="dark"] .z-autocomplete {
    background: var(--gray-20);
    border-color: var(--gray-40);
  }

  :root[data-theme="dark"] .z-autocomplete__item:hover {
    background: var(--gray-30);
  }

  :root[data-theme="dark"] .z-autocomplete__item--selected {
    background: var(--blue-80);
  }

  :root[data-theme="dark"] .z-autocomplete__item--selected:hover {
    background: var(--blue-80);
  }

  :root[data-theme="dark"] .z-autocomplete__item-label {
    color: var(--gray-90);
  }

  :root[data-theme="dark"] .z-autocomplete__item-description {
    color: var(--gray-60);
  }

  :root[data-theme="dark"] .z-autocomplete__highlight {
    background: var(--yellow-70);
    color: var(--yellow-20);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .z-autocomplete {
      background: var(--gray-20);
      border-color: var(--gray-40);
    }

    :root:not([data-theme="light"]) .z-autocomplete__item:hover {
      background: var(--gray-30);
    }

    :root:not([data-theme="light"]) .z-autocomplete__item--selected {
      background: var(--blue-80);
    }

    :root:not([data-theme="light"]) .z-autocomplete__item--selected:hover {
      background: var(--blue-80);
    }

    :root:not([data-theme="light"]) .z-autocomplete__item-label {
      color: var(--gray-90);
    }

    :root:not([data-theme="light"]) .z-autocomplete__item-description {
      color: var(--gray-60);
    }

    :root:not([data-theme="light"]) .z-autocomplete__highlight {
      background: var(--yellow-70);
      color: var(--yellow-20);
    }
  }
}

/*
 * VIEW TRANSITION ANIMATIONS
 * iOS-style Navigation Bar (must be outside @layer)
 */

/* Push Direction */
:root[data-nav-direction="push"]::view-transition-old(nav-title) {
  animation: nav-title-push-out 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

:root[data-nav-direction="push"]::view-transition-new(nav-title) {
  animation: nav-title-push-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

:root[data-nav-direction="push"]::view-transition-old(nav-back-title) {
  animation: nav-fade-out 0.2s ease forwards;
}

:root[data-nav-direction="push"]::view-transition-new(nav-back-title) {
  animation: nav-back-title-push-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

:root[data-nav-direction="push"]::view-transition-old(nav-back-chevron) {
  animation: nav-fade-out 0.15s ease forwards;
}

:root[data-nav-direction="push"]::view-transition-new(nav-back-chevron) {
  animation: nav-chevron-push-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

:root[data-nav-direction="push"]::view-transition-old(nav-right-items),
:root[data-nav-direction="pop"]::view-transition-old(nav-right-items) {
  animation: nav-fade-out 0.2s ease forwards;
}

:root[data-nav-direction="push"]::view-transition-new(nav-right-items),
:root[data-nav-direction="pop"]::view-transition-new(nav-right-items) {
  animation: nav-fade-in 0.2s ease 0.1s forwards;
  opacity: 0;
}

/* Pop Direction */
:root[data-nav-direction="pop"]::view-transition-old(nav-title) {
  animation: nav-title-pop-out 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

:root[data-nav-direction="pop"]::view-transition-new(nav-title) {
  animation: nav-title-pop-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

:root[data-nav-direction="pop"]::view-transition-old(nav-back-title) {
  animation: nav-back-title-pop-out 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

:root[data-nav-direction="pop"]::view-transition-new(nav-back-title) {
  animation: nav-fade-in 0.25s ease 0.1s forwards;
  opacity: 0;
}

:root[data-nav-direction="pop"]::view-transition-old(nav-back-chevron) {
  animation: nav-fade-out 0.2s ease forwards;
}

:root[data-nav-direction="pop"]::view-transition-new(nav-back-chevron) {
  animation: nav-fade-in 0.2s ease 0.1s forwards;
  opacity: 0;
}

/* Keyframes */
@keyframes nav-title-push-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-60px); opacity: 0; }
}

@keyframes nav-title-push-in {
  from { transform: translateX(60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes nav-back-title-push-in {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes nav-chevron-push-in {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes nav-title-pop-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(60px); opacity: 0; }
}

@keyframes nav-title-pop-in {
  from { transform: translateX(-60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes nav-back-title-pop-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(60px); opacity: 0; }
}

@keyframes nav-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes nav-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@layer utilities {
  .hidden {
    display: none !important;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

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

  .text-secondary {
    color: var(--text-secondary);
  }
}