.ui-empty-state {
  display: grid;
  min-height: 14rem;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
  color: var(--color-text-subtle);
  text-align: center;
}

.ui-empty-state__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

.ui-empty-state strong { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ui-empty-state p { max-width: 24rem; margin: 0; font-size: var(--font-size-xs); line-height: 1.55; }

.ui-tabs { display: flex; }
.ui-tab {
  min-width: 0;
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-subtle);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: 700;
}
.ui-tab:hover:not(:disabled) { color: var(--color-text); }
.ui-tab.is-active { border-bottom-color: var(--color-accent); color: var(--color-text); }
.ui-tab:disabled { cursor: not-allowed; opacity: 0.45; }

.ui-badge-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.ui-badge { padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-subtle); font-size: var(--font-size-xs); }

.button-danger { border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
.button-danger:hover { background: color-mix(in srgb, var(--color-danger) 16%, transparent); }

.ui-field { display: grid; align-content: start; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.ui-field--wide { grid-column: 1 / -1; }
.ui-field .field { min-height: var(--control-height); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font: inherit; font-size: var(--font-size-sm); }
.ui-field textarea.field { resize: vertical; line-height: 1.5; }
.ui-field select.field { appearance: auto; }
.ui-field-error { color: var(--color-danger); font-size: var(--font-size-xs); line-height: 1.4; }
.ui-form-banner { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-danger) 9%, transparent); color: var(--color-danger); font-size: var(--font-size-sm); }

.ui-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 1.75rem; }
.ui-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border)); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-text); cursor: pointer; font-size: var(--font-size-xs); }
.ui-chip i { color: var(--color-text-subtle); font-style: normal; }

.ui-dialog { width: min(100% - 2rem, 30rem); padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-bg-elevated); color: var(--color-text); box-shadow: var(--shadow-lg); }
.ui-dialog::backdrop { background: var(--color-overlay); backdrop-filter: blur(5px); }
.ui-dialog form { padding: var(--space-6); }
.ui-dialog h2 { margin: 0; font-size: var(--font-size-xl); }
.ui-dialog p { margin: var(--space-3) 0 0; color: var(--color-text-muted); line-height: 1.6; }
.ui-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }

@media (max-width: 36rem) {
  .ui-field--wide { grid-column: auto; }
}