/* =============================================================================
   AL-KINZ Internet — Components
   Premium, accessible, RTL-safe UI primitives. All values via design tokens.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   ICON
   -------------------------------------------------------------------------- */
.icon {
  flex: none;
  vertical-align: middle;
  color: inherit;
  overflow: visible;
}
.icon use { color: inherit; }

/* ---------------------------------------------------------------------------
   BUTTON
   -------------------------------------------------------------------------- */
.btn {
  --_bg: var(--surface-2);
  --_fg: var(--text);
  --_bd: var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  block-size: var(--field-h);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--_bd);
  border-radius: var(--radius-md);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard);
}
html[lang="ar"] .btn { font-family: var(--font-arabic); }
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; pointer-events: none;
}
.btn .icon { opacity: 1; flex-shrink: 0; }

.btn--primary {
  --_bg: var(--accent);
  --_fg: var(--accent-on);
  --_bd: transparent;
  background-image: var(--grad-brand);
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover { --_bg: var(--accent-hover); filter: brightness(1.04); }

.btn--ghost { --_bg: transparent; --_bd: transparent; }
.btn--ghost:hover { --_bg: var(--surface-2); }

.btn--outline { --_bg: transparent; --_bd: var(--border-strong); }
.btn--outline:hover { --_bg: var(--surface-2); }

.btn--danger { --_bg: transparent; --_fg: var(--danger); --_bd: var(--danger-border); }
.btn--danger:hover { --_bg: var(--danger-soft); }

.btn--sm { block-size: var(--field-h-sm); padding-inline: var(--space-3); font-size: var(--text-xs); }
.btn--lg { block-size: 3.25rem; padding-inline: var(--space-6); font-size: var(--text-md); }
.btn--icon { inline-size: var(--field-h); padding-inline: 0; }
.btn--icon.btn--sm { inline-size: var(--field-h-sm); }
.btn--block { display: flex; inline-size: 100%; }

/* ---------------------------------------------------------------------------
   CARD / PANEL
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.card--pad { padding: var(--space-4); }
.card--hover { transition: box-shadow var(--dur-3) var(--ease-standard),
                           transform var(--dur-3) var(--ease-standard),
                           border-color var(--dur-3) var(--ease-standard); }
.card--hover:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }

.card__head {
  display: flex; align-items: center; gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--border-width) solid var(--divider);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
}
html[lang="ar"] .card__title { font-family: var(--font-arabic); }
.card__subtitle { color: var(--text-2); font-size: var(--text-sm); }
.card__body { padding: var(--space-4); }

/* eyebrow / section label */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}
html[lang="ar"] .eyebrow { letter-spacing: var(--tracking-wide); text-transform: none; }

/* ---------------------------------------------------------------------------
   BADGE / STATUS PILL / CHIP
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.2em 0.66em;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.6;
  white-space: nowrap;
}
.badge .dot { inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: currentColor; flex: none; }
.badge--ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-border); }
.badge--warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }
.badge--danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.badge--info { color: var(--info); background: var(--info-soft); border-color: var(--info-border); }
.badge--accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft-border); }

.badge--live .dot { animation: pulse-dot 1.6s var(--ease-standard) infinite; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); }
  50% { box-shadow: 0 0 0 0.32em transparent; }
}

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-standard);
}
.chip:hover { border-color: var(--border-strong); }
.chip[aria-pressed="true"], .chip--active {
  background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent);
}

/* ---------------------------------------------------------------------------
   FORM CONTROLS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
}
.label .req { color: var(--danger); margin-inline-start: 2px; }
.hint { font-size: var(--text-xs); color: var(--text-muted); }
.error-text { font-size: var(--text-xs); color: var(--danger); display: flex; gap: var(--space-1); align-items: center; }

.input, .select, .textarea {
  inline-size: 100%;
  block-size: var(--field-h);
  padding-inline: var(--space-3);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--text-base);
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              background var(--dur-2) var(--ease-standard);
}
.textarea { block-size: auto; padding-block: var(--space-3); resize: vertical; min-block-size: 5rem; line-height: var(--leading-normal); }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--ring-width) var(--ring);
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23808a98' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-inline-end: var(--space-7);
}
[dir="rtl"] .select { background-position: left var(--space-3) center; }

/* input with leading icon */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .icon { position: absolute; inset-inline-start: var(--space-3); color: var(--text-muted); pointer-events: none; }
.input-group .input { padding-inline-start: var(--space-7); }
.input-group--action .input { padding-inline-end: var(--space-8); }
.input-group__btn { position: absolute; inset-inline-end: var(--space-1); color: var(--text-muted); padding: var(--space-2); border-radius: var(--radius-sm); }
.input-group__btn:hover { color: var(--text); background: var(--surface-2); }

/* switch */
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: var(--space-3); }
.switch input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.switch__track {
  inline-size: 2.75rem; block-size: 1.5rem; border-radius: var(--radius-pill);
  background: var(--surface-3); border: var(--border-width) solid var(--border);
  transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
  flex: none;
}
.switch__track::after {
  content: ""; display: block;
  inline-size: 1.1rem; block-size: 1.1rem; margin: 0.13rem;
  border-radius: 50%; background: var(--text-inverse);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-spring);
}
.switch input:checked + .switch__track { background: var(--accent); border-color: transparent; }
.switch input:checked + .switch__track::after { transform: translateX(1.25rem); background: var(--accent-on); }
[dir="rtl"] .switch input:checked + .switch__track::after { transform: translateX(-1.25rem); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 var(--ring-width) var(--ring); }

/* segmented control */
.segmented {
  display: inline-flex; padding: var(--space-1); gap: var(--space-1);
  background: var(--surface-2); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
}
.segmented button {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-2);
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"], .segmented button.is-active {
  background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1);
}

/* ---------------------------------------------------------------------------
   TABLE
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table thead th {
  position: sticky; inset-block-start: 0; z-index: 1;
  text-align: start;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  border-block-end: var(--border-width) solid var(--border);
  user-select: none;
}
.table thead th.sortable { cursor: pointer; }
.table thead th.sortable:hover { color: var(--text); }
.table thead th .sort-ind { opacity: 0.4; margin-inline-start: var(--space-1); }
.table thead th[aria-sort="ascending"] .sort-ind,
.table thead th[aria-sort="descending"] .sort-ind { opacity: 1; color: var(--accent); }
.table tbody td { padding: var(--space-3) var(--space-4); border-block-end: var(--border-width) solid var(--divider); vertical-align: middle; }
.table tbody tr { transition: background var(--dur-1) var(--ease-standard); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-block-end: none; }
.table .cell-strong { font-weight: var(--weight-semibold); color: var(--text); }
.table .cell-mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-2); }

/* identity cell */
.idcell { display: flex; align-items: center; gap: var(--space-3); }
.avatar {
  inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius-md);
  display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent);
  font-weight: var(--weight-bold); font-size: var(--text-sm);
  border: var(--border-width) solid var(--accent-soft-border);
}
.idcell__meta { display: flex; flex-direction: column; min-inline-size: 0; }
.idcell__name { font-weight: var(--weight-semibold); color: var(--text); }
.idcell__sub { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }

/* ---------------------------------------------------------------------------
   KPI / STAT
   -------------------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat__label { display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.stat__icon {
  inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius-md);
  display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent);
}
.stat__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); line-height: 1; }
.stat__delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.stat__delta--up { color: var(--ok); }
.stat__delta--down { color: var(--danger); }

/* ---------------------------------------------------------------------------
   TABS
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--space-1); border-block-end: var(--border-width) solid var(--border); }
.tab {
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-2); position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  transition: color var(--dur-2) var(--ease-standard);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent); }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; inset-inline: var(--space-2); inset-block-end: -1px;
  block-size: 2px; background: var(--accent); border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------------------
   PROGRESS / METER
   -------------------------------------------------------------------------- */
.meter { block-size: 0.5rem; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.meter__fill { block-size: 100%; border-radius: inherit; background: var(--grad-brand); transition: inline-size var(--dur-4) var(--ease-emphasized); }
.meter__fill--ok { background: var(--ok); }
.meter__fill--warn { background: var(--warn); }
.meter__fill--danger { background: var(--danger); }

/* ---------------------------------------------------------------------------
   TOOLTIP (CSS-only, data-tip)
   -------------------------------------------------------------------------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink-0); color: var(--ink-1000);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-2xs); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-2), transform var(--dur-2);
  z-index: var(--z-tooltip);
}
[dir="rtl"] [data-tip]::after { transform: translateX(50%) translateY(4px); }
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[dir="rtl"] [data-tip]:hover::after { transform: translateX(50%) translateY(0); }

/* ---------------------------------------------------------------------------
   SKELETON (loading)
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------------------------------------------------------------------
   MODAL / DRAWER / OVERLAY
   -------------------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--backdrop);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-standard);
}
.overlay[data-open] { opacity: 1; }

.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--z-drawer);
  inline-size: min(30rem, 100vw);
  background: var(--surface);
  border-inline-start: var(--border-width) solid var(--border);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-4) var(--ease-emphasized);
}
[dir="rtl"] .drawer { inset-inline-end: 0; transform: translateX(-100%); }
.drawer[data-open] { transform: translateX(0); }
.drawer--left {
  inset-inline-end: auto; inset-inline-start: 0;
  border-inline-start: none; border-inline-end: var(--border-width) solid var(--border);
  transform: translateX(-100%);
}
[dir="rtl"] .drawer--left { transform: translateX(100%); }
.drawer--left[data-open] { transform: translateX(0); }
.drawer--premium { inline-size: min(22rem, 92vw); background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 40%, var(--surface)) 100%); }
.drawer__head--premium { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.drawer__body--premium { padding-block-start: var(--space-3); }
.avatar--lg { inline-size: 3.25rem; block-size: 3.25rem; font-size: var(--text-md); }
.avatar--xl { inline-size: 4rem; block-size: 4rem; font-size: var(--text-lg); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); border-block-end: var(--border-width) solid var(--divider); }
.drawer__body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.drawer__foot { padding: var(--space-4) var(--space-5); border-block-start: var(--border-width) solid var(--divider); display: flex; gap: var(--space-3); justify-content: flex-end; }

.modal {
  position: fixed; inset-block-start: 50%; inset-inline-start: 50%; z-index: var(--z-modal);
  transform: translate(-50%, -48%) scale(0.98);
  inline-size: min(34rem, calc(100vw - 2rem));
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-3);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-standard), transform var(--dur-3) var(--ease-spring);
}
[dir="rtl"] .modal { transform: translate(50%, -48%) scale(0.98); }
.modal[data-open] { opacity: 1; transform: translate(-50%, -50%) scale(1); }
[dir="rtl"] .modal[data-open] { transform: translate(50%, -50%) scale(1); }

/* ---------------------------------------------------------------------------
   DROPDOWN / MENU
   -------------------------------------------------------------------------- */
.menu {
  position: absolute; z-index: var(--z-sticky);
  min-inline-size: 11rem; padding: var(--space-2);
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(-4px) scale(0.98); pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
}
.menu[data-open] { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.menu__item {
  display: flex; align-items: center; gap: var(--space-3); inline-size: 100%;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--text); text-align: start;
  transition: background var(--dur-1) var(--ease-standard);
}
.menu__item:hover { background: var(--surface-2); }
.menu__item .icon { color: var(--text-muted); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger .icon { color: var(--danger); }
.menu__sep { block-size: 1px; background: var(--divider); margin: var(--space-2) 0; }

/* ---------------------------------------------------------------------------
   TOAST
   -------------------------------------------------------------------------- */
.toast-region {
  position: fixed; inset-block-end: var(--space-5); inset-inline-end: var(--space-5);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3);
  inline-size: min(22rem, calc(100vw - 2rem));
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); background: var(--surface); color: var(--text);
  border: var(--border-width) solid var(--border); border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
  transform: translateY(12px); opacity: 0;
  transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-3) var(--ease-standard);
}
.toast[data-open] { transform: translateY(0); opacity: 1; }
.toast--ok { border-inline-start-color: var(--ok); }
.toast--ok .toast__icon { color: var(--ok); }
.toast--warn { border-inline-start-color: var(--warn); }
.toast--warn .toast__icon { color: var(--warn); }
.toast--danger { border-inline-start-color: var(--danger); }
.toast--danger .toast__icon { color: var(--danger); }
.toast__icon { flex: none; margin-block-start: 2px; }
.toast__body { flex: 1; min-inline-size: 0; }
.toast__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.toast__msg { font-size: var(--text-xs); color: var(--text-2); margin-block-start: 2px; }

/* ---------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-9) var(--space-5); text-align: center; color: var(--text-2); }
.empty__icon { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: var(--radius-xl); background: var(--surface-2); color: var(--text-muted); }
.empty__title { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text); font-size: var(--text-md); }
html[lang="ar"] .empty__title { font-family: var(--font-arabic); }

/* ---------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */
.pagination { display: flex; align-items: center; gap: var(--space-2); }
.pagination button {
  min-inline-size: 2.25rem; block-size: 2.25rem; padding-inline: var(--space-2);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-2); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-2) var(--ease-standard);
}
.pagination button:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.pagination button[aria-current="page"] { background: var(--accent); color: var(--accent-on); border-color: transparent; }
.pagination button:disabled { opacity: 0.4; pointer-events: none; }

/* ---------------------------------------------------------------------------
   DIVIDER / MISC
   -------------------------------------------------------------------------- */
.divider { block-size: 1px; background: var(--divider); border: none; margin-block: var(--space-4); }
.kbd { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 0.1em 0.45em; border: var(--border-width) solid var(--border); border-block-end-width: 2px; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text-2); }
.text-muted { color: var(--text-muted); }
.text-2 { color: var(--text-2); }
.mono { font-family: var(--font-mono); }

/* ---------------------------------------------------------------------------
   COMBOBOX + PREVIEW (forms)
   -------------------------------------------------------------------------- */
.combobox { position: relative; inline-size: 100%; }
.combobox__list {
  position: absolute; inset-block-start: calc(100% + 4px); inset-inline: 0;
  z-index: var(--z-raised);
  max-block-size: 11rem; overflow-y: auto;
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2);
}
.combobox__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer; font-size: var(--text-sm);
  border-block-end: var(--border-width) solid var(--divider);
}
.combobox__item:last-child { border-block-end: none; }
.combobox__item:hover, .combobox__item.is-active { background: var(--surface-2); }
.combobox__sub { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--font-mono); }
.combobox--picker { position: relative; }
.combobox__list--picker {
  z-index: var(--z-sticky);
  max-block-size: 16rem;
}
.combobox__item--rich { padding: var(--space-2) var(--space-3); }
.combobox__row {
  display: flex; align-items: center; gap: var(--space-2); inline-size: 100%;
}
.combobox__avatar { inline-size: 1.75rem; block-size: 1.75rem; font-size: var(--text-2xs); flex: none; }
.combobox__main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 1px; }
.combobox__title { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combobox__empty {
  padding: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); text-align: center;
}
.topbar__search.combobox--picker { inline-size: min(22rem, 32vw); }
.topbar__search .input-group { inline-size: 100%; }

.preview-box {
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  border: 1px dashed var(--border-strong);
  min-block-size: 3rem;
}

.wizard-steps {
  display: flex; align-items: center; gap: var(--space-2);
  margin-block-end: var(--space-3);
}
.wizard-steps__item {
  flex: 1; block-size: 3px; border-radius: var(--radius-pill);
  background: var(--border);
}
.wizard-steps__item.is-done { background: var(--accent); }
.wizard-steps__item.is-current { background: color-mix(in srgb, var(--accent) 60%, var(--border)); }

.input--premium {
  block-size: var(--field-h);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}
.input--premium:focus-visible {
  box-shadow: 0 0 0 var(--ring-width) var(--ring), inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}