/* Alert Enterprise components 0.1.0
   Reads roles from tokens/dist/tokens.css and nothing else. No component
   names a primitive or a hex value; if one does, it is a bug.
   Class grammar: .ae-{component}, .ae-{component}--{variant},
   .ae-{component}__{part}. State lives in native attributes and ARIA
   (disabled, aria-pressed, aria-selected, aria-invalid, aria-busy), never
   in an .is-* class, so the markup that is accessible is also the markup
   that is styled. */

@font-face { font-family: 'Aeonik'; src: url('../assets/fonts/woff2/Aeonik-Light.woff2') format('woff2'), url('../assets/fonts/Aeonik-Light.otf') format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('../assets/fonts/woff2/Aeonik-Regular.woff2') format('woff2'), url('../assets/fonts/Aeonik-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('../assets/fonts/woff2/Aeonik-Bold.woff2') format('woff2'), url('../assets/fonts/Aeonik-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../assets/fonts/DMSans-Variable.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }

/* ── Base ─────────────────────────────────────────────────────────── */
.ae-root, .ae-root * { box-sizing: border-box; }
.ae-root {
  font: var(--ae-type-body);
  color: var(--ae-text);
  background: var(--ae-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ae-focus, .ae-root :focus-visible {
  outline: 2px solid var(--ae-line-focus);
  outline-offset: 2px;
}

/* ── Button ───────────────────────────────────────────────────────── */
.ae-btn {
  --_h: 40px; --_px: var(--ae-space-4); --_bg: var(--ae-action); --_fg: var(--ae-action-text);
  --_bd: transparent; --_bg-h: var(--ae-action-hover); --_bg-p: var(--ae-action-press);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ae-space-2);
  height: var(--_h); padding: 0 var(--_px);
  font: var(--ae-type-label); letter-spacing: 0.005em; white-space: nowrap;
  color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd);
  border-radius: var(--ae-radius-md); cursor: pointer; user-select: none;
  transition: background-color var(--ae-duration-fast) var(--ae-ease-standard),
              border-color var(--ae-duration-fast) var(--ae-ease-standard),
              transform var(--ae-duration-fast) var(--ae-ease-standard),
              box-shadow var(--ae-duration-fast) var(--ae-ease-standard);
}
.ae-btn:hover { background: var(--_bg-h); }
.ae-btn:active { background: var(--_bg-p); transform: translateY(1px); }
.ae-btn:focus-visible { outline: 2px solid var(--ae-line-focus); outline-offset: 2px; }
.ae-btn:disabled, .ae-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }
.ae-btn:disabled:hover { background: var(--_bg); }
.ae-btn svg, .ae-btn .ae-icon { width: 18px; height: 18px; flex: none; }
.ae-btn--tonal   { --_bg: var(--ae-action-soft); --_fg: var(--ae-action-soft-text); --_bg-h: var(--ae-action-soft-hover); --_bg-p: var(--ae-action-soft-hover); }
.ae-btn--outline { --_bg: transparent; --_fg: var(--ae-text); --_bd: var(--ae-line-strong); --_bg-h: var(--ae-bg-muted); --_bg-p: var(--ae-bg-sunken); }
.ae-btn--text    { --_bg: transparent; --_fg: var(--ae-text-link); --_bg-h: var(--ae-action-soft); --_bg-p: var(--ae-action-soft-hover); --_px: var(--ae-space-3); }
.ae-btn--danger  { --_bg: var(--ae-danger-strong); --_fg: var(--ae-danger-on); --_bg-h: var(--ae-danger-text); --_bg-p: var(--ae-danger-text); }
[data-theme="dark"] .ae-btn--danger { --_bg-h: var(--ae-danger-text); --_bg-p: var(--ae-danger); }
.ae-btn--inverse { --_bg: #fff; --_fg: var(--ae-purple-700); --_bg-h: var(--ae-purple-50); --_bg-p: var(--ae-purple-100); }
.ae-btn--sm { --_h: 32px; --_px: var(--ae-space-3); font-size: var(--ae-type-body-sm-size); }
.ae-btn--lg { --_h: 48px; --_px: var(--ae-space-6); font-size: var(--ae-type-body-size); }
.ae-btn--icon { --_px: 0; width: var(--_h); }
.ae-btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.ae-btn[aria-busy="true"]::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--_fg); border-right-color: transparent;
  animation: ae-spin 700ms linear infinite;
}
@keyframes ae-spin { to { transform: rotate(360deg); } }

/* ── Field ────────────────────────────────────────────────────────── */
.ae-field { display: grid; gap: var(--ae-space-2); }
.ae-field__label { font: var(--ae-type-label); color: var(--ae-text); }
.ae-field__help { font: var(--ae-type-caption); color: var(--ae-text-2); }
.ae-field__error { font: var(--ae-type-caption); color: var(--ae-danger-text); display: none; }
.ae-input, .ae-select, .ae-textarea {
  width: 100%; height: 40px; padding: 0 var(--ae-space-3);
  font: var(--ae-type-body); color: var(--ae-text);
  background: var(--ae-surface); border: 1px solid var(--ae-line-strong);
  border-radius: var(--ae-radius-md);
  transition: border-color var(--ae-duration-fast) var(--ae-ease-standard), box-shadow var(--ae-duration-fast) var(--ae-ease-standard);
}
.ae-textarea { height: auto; min-height: 96px; padding: var(--ae-space-2) var(--ae-space-3); resize: vertical; }
.ae-select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238A8A96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.ae-input::placeholder, .ae-textarea::placeholder { color: var(--ae-text-3); }
.ae-input:hover, .ae-select:hover, .ae-textarea:hover { border-color: var(--ae-text-3); }
.ae-input:focus, .ae-select:focus, .ae-textarea:focus { outline: none; border-color: var(--ae-action); box-shadow: 0 0 0 3px var(--ae-action-soft); }
.ae-input:disabled, .ae-select:disabled, .ae-textarea:disabled { background: var(--ae-bg-muted); color: var(--ae-text-3); cursor: not-allowed; }
.ae-input[aria-invalid="true"], .ae-textarea[aria-invalid="true"] { border-color: var(--ae-danger); box-shadow: 0 0 0 3px var(--ae-danger-soft); }
.ae-field:has([aria-invalid="true"]) .ae-field__error { display: block; }
.ae-field:has([aria-invalid="true"]) .ae-field__help { display: none; }
.ae-input-wrap { position: relative; display: flex; align-items: center; }
.ae-input-wrap > svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--ae-text-3); pointer-events: none; }
.ae-input-wrap > .ae-input { padding-left: 38px; }

/* ── Choice: checkbox, radio, switch ──────────────────────────────── */
.ae-check, .ae-radio {
  appearance: none; width: 18px; height: 18px; margin: 0; flex: none; display: inline-grid; place-content: center;
  border: 1.5px solid var(--ae-line-strong); background: var(--ae-surface); cursor: pointer;
  transition: background-color var(--ae-duration-fast) var(--ae-ease-standard), border-color var(--ae-duration-fast) var(--ae-ease-standard);
}
.ae-check { border-radius: var(--ae-radius-xs); }
.ae-radio { border-radius: 50%; }
.ae-check::before { content: ''; width: 10px; height: 10px; transform: scale(0); transition: transform var(--ae-duration-fast) var(--ae-ease-spring);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: var(--ae-action-text); }
.ae-radio::before { content: ''; width: 8px; height: 8px; border-radius: 50%; transform: scale(0); transition: transform var(--ae-duration-fast) var(--ae-ease-spring); background: var(--ae-action-text); }
.ae-check:checked, .ae-radio:checked, .ae-check:indeterminate { background: var(--ae-action); border-color: var(--ae-action); }
.ae-check:checked::before, .ae-radio:checked::before { transform: scale(1); }
.ae-check:indeterminate::before { clip-path: none; height: 2px; transform: scale(1); }
.ae-check:disabled, .ae-radio:disabled { opacity: 0.4; cursor: not-allowed; }
.ae-choice { display: inline-flex; align-items: center; gap: var(--ae-space-2); font: var(--ae-type-body-sm); cursor: pointer; }

.ae-switch {
  appearance: none; margin: 0; flex: none; position: relative; width: 40px; height: 24px; border-radius: var(--ae-radius-pill);
  background: var(--ae-line-strong); cursor: pointer; transition: background-color var(--ae-duration-base) var(--ae-ease-standard);
}
.ae-switch::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--ae-elevation-1);
  transition: transform var(--ae-duration-base) var(--ae-ease-spring);
}
.ae-switch:checked { background: var(--ae-action); }
.ae-switch:checked::before { transform: translateX(16px); }
.ae-switch:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Segmented control and tabs ───────────────────────────────────── */
.ae-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--ae-bg-sunken); border-radius: var(--ae-radius-lg); }
.ae-segmented button {
  height: 32px; padding: 0 var(--ae-space-3); border: 0; background: transparent; color: var(--ae-text-2);
  font: var(--ae-type-label); font-size: var(--ae-type-body-sm-size); border-radius: calc(var(--ae-radius-lg) - 3px); cursor: pointer;
  transition: background-color var(--ae-duration-fast) var(--ae-ease-standard), color var(--ae-duration-fast) var(--ae-ease-standard);
}
.ae-segmented button:hover { color: var(--ae-text); }
.ae-segmented button[aria-pressed="true"], .ae-segmented button[aria-selected="true"] { background: var(--ae-surface-raised); color: var(--ae-text); box-shadow: var(--ae-elevation-1); }

.ae-tabs { display: flex; gap: var(--ae-space-6); border-bottom: 1px solid var(--ae-line); position: relative; overflow-x: auto; scrollbar-width: none; }
.ae-tabs button { flex: none; }
.ae-tabs button {
  position: relative; padding: var(--ae-space-3) 0; border: 0; background: none; color: var(--ae-text-2);
  font: var(--ae-type-label); cursor: pointer; transition: color var(--ae-duration-fast) var(--ae-ease-standard);
}
.ae-tabs button:hover { color: var(--ae-text); }
.ae-tabs button[aria-selected="true"] { color: var(--ae-text); }
.ae-tabs button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ae-action); border-radius: 2px 2px 0 0; transform: scaleX(0); transition: transform var(--ae-duration-base) var(--ae-ease-enter); }
.ae-tabs button[aria-selected="true"]::after { transform: scaleX(1); }

/* ── Chip ─────────────────────────────────────────────────────────── */
.ae-chip {
  display: inline-flex; align-items: center; gap: var(--ae-space-1); height: 30px; padding: 0 var(--ae-space-3);
  font: var(--ae-type-label); font-size: var(--ae-type-body-sm-size); color: var(--ae-text);
  background: var(--ae-surface); border: 1px solid var(--ae-line-strong); border-radius: var(--ae-radius-pill); cursor: pointer;
  transition: background-color var(--ae-duration-fast) var(--ae-ease-standard), border-color var(--ae-duration-fast) var(--ae-ease-standard);
}
.ae-chip:hover { background: var(--ae-bg-muted); }
.ae-chip[aria-pressed="true"] { background: var(--ae-action-soft); border-color: transparent; color: var(--ae-action-soft-text); }
.ae-chip[aria-pressed="true"]::before { content: ''; width: 12px; height: 12px; background: currentColor; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.ae-chip__x { display: inline-grid; place-content: center; width: 18px; height: 18px; margin-right: -6px; border-radius: 50%; color: var(--ae-text-2); }
.ae-chip__x:hover { background: var(--ae-bg-sunken); color: var(--ae-text); }

/* ── Badge and status ─────────────────────────────────────────────── */
.ae-badge {
  --_bg: var(--ae-bg-sunken); --_fg: var(--ae-text-2); --_dot: var(--ae-text-3);
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--ae-space-2);
  font: 400 var(--ae-type-caption-size)/1 var(--ae-font-text); letter-spacing: 0.01em;
  color: var(--_fg); background: var(--_bg); border-radius: var(--ae-radius-sm); white-space: nowrap;
}
.ae-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--_dot); }
.ae-badge--brand   { --_bg: var(--ae-action-soft);  --_fg: var(--ae-action-soft-text); --_dot: var(--ae-action); }
.ae-badge--mark    { --_bg: var(--ae-mark-soft);    --_fg: var(--ae-mark-text);    --_dot: var(--ae-mark); }
.ae-badge--success { --_bg: var(--ae-success-soft); --_fg: var(--ae-success-text); --_dot: var(--ae-success); }
.ae-badge--warning { --_bg: var(--ae-warning-soft); --_fg: var(--ae-warning-text); --_dot: var(--ae-warning); }
.ae-badge--danger  { --_bg: var(--ae-danger-soft);  --_fg: var(--ae-danger-text);  --_dot: var(--ae-danger); }
.ae-badge--info    { --_bg: var(--ae-info-soft);    --_fg: var(--ae-info-text);    --_dot: var(--ae-info); }
.ae-badge--live::before { animation: ae-pulse 1.6s var(--ae-ease-standard) infinite; }
@keyframes ae-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_dot) 60%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--_dot) 0%, transparent); } }
.ae-count { display: inline-grid; place-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ae-radius-pill); background: var(--ae-coral-700); color: #fff; font: 700 11px/1 var(--ae-font-text); }

/* ── Avatar ───────────────────────────────────────────────────────── */
.ae-avatar {
  --_s: 36px; width: var(--_s); height: var(--_s); flex: none; border-radius: 50%;
  display: inline-grid; place-content: center; overflow: hidden;
  background: var(--ae-action-soft); color: var(--ae-action-soft-text);
  font: 700 calc(var(--_s) * 0.38)/1 var(--ae-font-display); letter-spacing: 0.01em;
}
.ae-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ae-avatar--sm { --_s: 28px; } .ae-avatar--lg { --_s: 48px; } .ae-avatar--xl { --_s: 72px; }
.ae-avatar-group { display: inline-flex; }
.ae-avatar-group .ae-avatar { box-shadow: 0 0 0 2px var(--ae-surface); }
.ae-avatar-group .ae-avatar + .ae-avatar { margin-left: -8px; }

/* ── Card and surfaces ────────────────────────────────────────────── */
.ae-card { background: var(--ae-surface); border: 1px solid var(--ae-line); border-radius: var(--ae-radius-xl); padding: var(--ae-space-6); }
.ae-card--raised { border-color: transparent; box-shadow: var(--ae-elevation-2); }
.ae-card--interactive { cursor: pointer; transition: box-shadow var(--ae-duration-base) var(--ae-ease-standard), transform var(--ae-duration-base) var(--ae-ease-standard), border-color var(--ae-duration-base) var(--ae-ease-standard); }
.ae-card--interactive:hover { border-color: transparent; box-shadow: var(--ae-elevation-3); transform: translateY(-2px); }
.ae-card--brand { background: var(--ae-gradient-violet); color: var(--ae-text-on-brand); border: 0; }
.ae-card--shield { border-radius: var(--ae-shape-shield-soft); }
.ae-card__eyebrow { font: var(--ae-type-eyebrow); letter-spacing: var(--ae-type-eyebrow-tracking); text-transform: uppercase; color: var(--ae-text-2); }
.ae-card__title { font: var(--ae-type-h4); letter-spacing: var(--ae-type-h4-tracking); margin: var(--ae-space-2) 0 var(--ae-space-1); }
.ae-divider { height: 1px; background: var(--ae-line); border: 0; margin: 0; }

/* ── List rows ────────────────────────────────────────────────────── */
.ae-list { list-style: none; margin: 0; padding: 0; }
.ae-row { display: flex; align-items: center; gap: var(--ae-space-3); padding: var(--ae-space-3) var(--ae-space-4); border-bottom: 1px solid var(--ae-line); }
.ae-row:last-child { border-bottom: 0; }
.ae-row__main { flex: 1; min-width: 0; }
.ae-row__title { font: var(--ae-type-label); color: var(--ae-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-row__meta { font: var(--ae-type-caption); color: var(--ae-text-2); margin-top: 2px; }
.ae-row--interactive { cursor: pointer; transition: background-color var(--ae-duration-fast) var(--ae-ease-standard); }
.ae-row--interactive:hover { background: var(--ae-bg-muted); }

/* ── Table ────────────────────────────────────────────────────────── */
.ae-table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--ae-type-body-sm); }
.ae-table th { text-align: left; font: 400 var(--ae-type-caption-size)/1.2 var(--ae-font-text); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ae-text-2); padding: var(--ae-space-2) var(--ae-space-4); border-bottom: 1px solid var(--ae-line-strong); background: var(--ae-bg-muted); white-space: nowrap; }
.ae-table td { padding: var(--ae-space-3) var(--ae-space-4); border-bottom: 1px solid var(--ae-line); vertical-align: middle; }
.ae-table tbody tr { transition: background-color var(--ae-duration-fast) var(--ae-ease-standard); }
.ae-table tbody tr:hover { background: var(--ae-bg-muted); }
.ae-table tbody tr[aria-selected="true"] { background: var(--ae-action-soft); }
.ae-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ae-table .mono { font-family: var(--ae-font-mono); font-size: 12.5px; }
.ae-table th[aria-sort] { cursor: pointer; }
.ae-table th[aria-sort]::after { content: ''; display: inline-block; margin-left: 6px; border: 4px solid transparent; vertical-align: 1px; }
.ae-table th[aria-sort="ascending"]::after { border-bottom-color: currentColor; vertical-align: 3px; }
.ae-table th[aria-sort="descending"]::after { border-top-color: currentColor; vertical-align: -1px; }

/* ── Banner and toast ─────────────────────────────────────────────── */
.ae-banner {
  --_bg: var(--ae-info-soft); --_fg: var(--ae-info-text); --_ac: var(--ae-info);
  display: flex; gap: var(--ae-space-3); align-items: flex-start; padding: var(--ae-space-3) var(--ae-space-4);
  background: var(--ae-bg-muted); border-left: 3px solid var(--_ac); border-radius: var(--ae-radius-md);
  font: var(--ae-type-body-sm); color: var(--ae-text);
}
.ae-banner strong { font-weight: 700; }
.ae-banner--success { --_ac: var(--ae-success); } .ae-banner--warning { --_ac: var(--ae-warning); } .ae-banner--danger { --_ac: var(--ae-danger); } .ae-banner--brand { --_ac: var(--ae-action); }
.ae-toast {
  display: flex; align-items: center; gap: var(--ae-space-3); min-width: 280px; max-width: 420px;
  padding: var(--ae-space-3) var(--ae-space-4); border-radius: var(--ae-radius-lg);
  background: var(--ae-surface-inverse); color: var(--ae-text-on-inverse); box-shadow: var(--ae-elevation-3);
  font: var(--ae-type-body-sm);
  animation: ae-toast-in var(--ae-duration-slow) var(--ae-ease-enter) both;
}
.ae-toast__icon { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-content: center; background: var(--ae-success); color: #fff; }
.ae-toast .ae-btn--text { --_fg: var(--ae-purple-300); margin-left: auto; }
@keyframes ae-toast-in { from { opacity: 0; transform: translateY(var(--ae-distance-lg)) scale(0.98); } }

/* ── Dialog ───────────────────────────────────────────────────────── */
.ae-dialog { border: 0; padding: 0; border-radius: var(--ae-radius-2xl); background: var(--ae-surface-raised); color: var(--ae-text); box-shadow: var(--ae-elevation-4); width: min(480px, calc(100vw - 32px)); }
.ae-dialog::backdrop { background: var(--ae-scrim); backdrop-filter: blur(2px); }
.ae-dialog[open] { animation: ae-dialog-in var(--ae-duration-slow) var(--ae-ease-enter); }
@keyframes ae-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
.ae-dialog__body { padding: var(--ae-space-6); }
.ae-dialog__title { font: var(--ae-type-h4); letter-spacing: var(--ae-type-h4-tracking); margin: 0 0 var(--ae-space-2); }
.ae-dialog__foot { display: flex; justify-content: flex-end; gap: var(--ae-space-2); padding: var(--ae-space-4) var(--ae-space-6); border-top: 1px solid var(--ae-line); }

/* ── Tooltip ──────────────────────────────────────────────────────── */
.ae-tip { position: relative; }
.ae-tip::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  padding: 6px 10px; border-radius: var(--ae-radius-sm); background: var(--ae-surface-inverse); color: var(--ae-text-on-inverse);
  font: var(--ae-type-caption); white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity var(--ae-duration-fast) var(--ae-ease-standard), transform var(--ae-duration-fast) var(--ae-ease-standard);
  z-index: var(--ae-z-tooltip);
}
.ae-tip:hover::after, .ae-tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 300ms; }

/* ── Spinner ──────────────────────────────────────────────────────── */
.ae-spinner { --_s: 24px; width: var(--_s); height: var(--_s); border-radius: 50%; display: inline-block; flex: none;
  border: 2.5px solid color-mix(in srgb, currentColor 18%, transparent); border-top-color: currentColor; color: var(--ae-action);
  animation: ae-spin 800ms linear infinite; }
.ae-spinner--sm { --_s: 16px; border-width: 2px; }
.ae-spinner--lg { --_s: 40px; border-width: 3px; }
.ae-spinner--on-brand { color: #fff; }
.ae-loading { display: inline-flex; align-items: center; gap: var(--ae-space-3); font: var(--ae-type-body-sm); color: var(--ae-text-2); }

/* ── Progress, meter, skeleton ────────────────────────────────────── */
.ae-progress { height: 6px; border-radius: var(--ae-radius-pill); background: var(--ae-bg-sunken); overflow: hidden; }
.ae-progress > span { display: block; height: 100%; width: var(--value, 40%); background: var(--ae-action); border-radius: inherit; transition: width var(--ae-duration-slow) var(--ae-ease-standard); }
.ae-progress--indeterminate > span { width: 40%; animation: ae-indet 1.4s var(--ae-ease-standard) infinite; }
@keyframes ae-indet { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.ae-ring { --value: 64; --_s: 56px; width: var(--_s); height: var(--_s); border-radius: 50%;
  background: conic-gradient(var(--ae-action) calc(var(--value) * 1%), var(--ae-bg-sunken) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
.ae-skeleton--text { height: 12px; border-radius: 6px; }
.ae-skeleton--title { height: 20px; border-radius: 6px; }
.ae-skeleton--circle { border-radius: 50%; }
.ae-skeleton { background: linear-gradient(90deg, var(--ae-bg-sunken) 0%, var(--ae-bg-muted) 50%, var(--ae-bg-sunken) 100%); background-size: 200% 100%; border-radius: var(--ae-radius-sm); animation: ae-shimmer 1.4s linear infinite; }
@keyframes ae-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Stepper ──────────────────────────────────────────────────────── */
.ae-stepper { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--ae-space-2); counter-reset: step; }
.ae-stepper li { flex: 1; display: grid; gap: var(--ae-space-2); font: var(--ae-type-caption); color: var(--ae-text-2); counter-increment: step; }
.ae-stepper li::before { content: ''; height: 3px; border-radius: 2px; background: var(--ae-bg-sunken); transition: background-color var(--ae-duration-base) var(--ae-ease-standard); }
.ae-stepper li[data-state="done"]::before, .ae-stepper li[aria-current="step"]::before { background: var(--ae-action); }
.ae-stepper li[aria-current="step"] { color: var(--ae-text); font-weight: 700; }
.ae-stepper--vertical { flex-direction: column; gap: 0; }
.ae-stepper--vertical li { grid-template-columns: 3px 1fr; gap: var(--ae-space-3); padding: 6px 0; font: var(--ae-type-body-sm); }
.ae-stepper--vertical li::before { height: auto; min-height: 22px; }

/* ── Breadcrumb and kbd ───────────────────────────────────────────── */
.ae-crumbs { display: flex; flex-wrap: wrap; gap: var(--ae-space-2); list-style: none; margin: 0; padding: 0; font: var(--ae-type-body-sm); color: var(--ae-text-2); }
.ae-crumbs li + li::before { content: '/'; margin-right: var(--ae-space-2); color: var(--ae-text-3); }
.ae-crumbs a { color: inherit; text-decoration: none; } .ae-crumbs a:hover { color: var(--ae-text-link); }
.ae-crumbs [aria-current] { color: var(--ae-text); }
.ae-kbd { display: inline-grid; place-content: center; min-width: 22px; height: 22px; padding: 0 6px; font: 400 12px/1 var(--ae-font-mono); color: var(--ae-text-2); background: var(--ae-surface); border: 1px solid var(--ae-line-strong); border-bottom-width: 2px; border-radius: var(--ae-radius-xs); }

/* ── Event stream ─────────────────────────────────────────────────── */
.ae-event { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ae-space-3); align-items: center; padding: var(--ae-space-3) 0; border-bottom: 1px solid var(--ae-line); }
.ae-event__icon { width: 32px; height: 32px; border-radius: var(--ae-radius-md); display: grid; place-content: center; background: var(--ae-bg-muted); }
.ae-event__icon svg { width: 20px; height: 20px; }
.ae-event__title { font: var(--ae-type-label); }
.ae-event__meta { font: var(--ae-type-caption); color: var(--ae-text-2); margin-top: 2px; }
.ae-event__time { font: 400 12px/1 var(--ae-font-mono); color: var(--ae-text-3); font-variant-numeric: tabular-nums; }
.ae-event--in { animation: ae-event-in var(--ae-duration-slow) var(--ae-ease-enter) both; }
@keyframes ae-event-in { from { opacity: 0; transform: translateY(-8px); background: var(--ae-action-soft); } }

/* ── Empty state ──────────────────────────────────────────────────── */
.ae-empty { display: grid; justify-items: center; text-align: center; gap: var(--ae-space-2); padding: var(--ae-space-12) var(--ae-space-6); color: var(--ae-text-2); }
.ae-empty svg { width: 48px; height: 48px; margin-bottom: var(--ae-space-2); }
.ae-empty__title { font: var(--ae-type-h4); color: var(--ae-text); margin: 0; }

/* ── Glass: the signature material ───────────────────────────────── */
.ae-glass, .ae-glass--clear, .ae-glass-bar, .ae-btn--glass {
  -webkit-backdrop-filter: blur(var(--_blur, 20px)) saturate(var(--_sat, 180%));
  backdrop-filter: blur(var(--_blur, 20px)) saturate(var(--_sat, 180%));
}
.ae-glass { background: var(--ae-glass-light-background); border: 1px solid var(--ae-glass-light-border); box-shadow: var(--ae-glass-light-highlight), var(--ae-glass-light-shadow); color: var(--ae-ink-700); }
[data-theme="dark"] .ae-glass, .ae-glass--dark { background: var(--ae-glass-dark-background); border-color: var(--ae-glass-dark-border); box-shadow: var(--ae-glass-dark-highlight), var(--ae-glass-dark-shadow); color: #F4F3FB; }
.ae-glass--clear { --_blur: var(--ae-glass-clear-blur); background: var(--ae-glass-clear-background); border: 1px solid var(--ae-glass-clear-border); box-shadow: var(--ae-glass-clear-highlight), var(--ae-glass-clear-shadow); color: #fff; }
.ae-glass-bar { color: var(--ae-ink-700); display: inline-flex; align-items: center; gap: var(--ae-space-1); padding: 5px; border-radius: var(--ae-radius-pill); background: var(--ae-glass-light-background); border: 1px solid var(--ae-glass-light-border); box-shadow: var(--ae-glass-light-highlight), var(--ae-elevation-2); }
[data-theme="dark"] .ae-glass-bar { color: #F4F3FB; background: var(--ae-glass-dark-background); border-color: var(--ae-glass-dark-border); box-shadow: var(--ae-glass-dark-highlight), var(--ae-glass-dark-shadow); }
.ae-glass-bar > a, .ae-glass-bar > button { border: 0; background: none; color: inherit; font: var(--ae-type-label); font-weight: 400; text-decoration: none; padding: 8px 14px; border-radius: var(--ae-radius-pill); cursor: pointer; transition: background-color var(--ae-duration-fast) var(--ae-ease-standard); }
.ae-glass-bar > a:hover, .ae-glass-bar > button:hover { background: rgba(255, 255, 255, 0.5); }
[data-theme="dark"] .ae-glass-bar > a:hover, [data-theme="dark"] .ae-glass-bar > button:hover { background: rgba(255, 255, 255, 0.08); }
.ae-glass-bar > [aria-current], .ae-glass-bar > [aria-pressed="true"] { background: var(--ae-surface-raised); color: var(--ae-text); box-shadow: var(--ae-elevation-1); font-weight: 700; }
.ae-btn--glass { --_bg: var(--ae-glass-clear-background); --_fg: #fff; --_bd: var(--ae-glass-clear-border); --_bg-h: rgba(255, 255, 255, 0.24); --_bg-p: rgba(255, 255, 255, 0.3); box-shadow: var(--ae-glass-clear-highlight); }

/* ── Mesh backdrop ────────────────────────────────────────────────── */
.ae-mesh { position: relative; isolation: isolate; overflow: hidden; background: #0E0B2E; color: #fff; }
.ae-mesh::before { content: ''; position: absolute; inset: -20%; z-index: -1; background: var(--ae-gradient-mesh); animation: ae-drift 28s var(--ae-ease-standard) infinite alternate; }
.ae-mesh--light { background: #F7F6FD; color: var(--ae-ink-700); }
.ae-mesh--light::before { background: var(--ae-gradient-aurora); }
.ae-mesh--still::before { animation: none; }
@keyframes ae-drift { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(3%, -2%) rotate(4deg) scale(1.05); } 100% { transform: translate(-3%, 3%) rotate(-3deg) scale(1.02); } }
.ae-grain::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── App window (product screenshots) ─────────────────────────────── */
.ae-window { border-radius: var(--ae-radius-xl); overflow: hidden; background: var(--ae-bg); border: 1px solid var(--ae-line); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 64px rgba(14, 11, 46, 0.22), 0 4px 12px rgba(14, 11, 46, 0.08); }
.ae-window__bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--ae-line); background: var(--ae-bg-muted); }
.ae-window__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ae-line-strong); }
.ae-window__bar span { flex: 1; text-align: center; font: 400 12px/1 var(--ae-font-text); color: var(--ae-text-3); margin-right: 42px; }

/* ── Command palette ──────────────────────────────────────────────── */
.ae-cmdk { width: min(560px, 100%); border-radius: var(--ae-radius-2xl); overflow: hidden; }
.ae-cmdk__input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(14, 11, 46, 0.08); font: var(--ae-type-body-lg); }
.ae-cmdk__input input { flex: 1; border: 0; background: none; font: inherit; color: inherit; outline: none; }
.ae-cmdk__group { padding: 8px; }
.ae-cmdk__label { padding: 8px 10px 4px; font: var(--ae-type-eyebrow); letter-spacing: var(--ae-type-eyebrow-tracking); text-transform: uppercase; opacity: 0.55; }
.ae-cmdk__item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--ae-radius-md); font: var(--ae-type-body-sm); cursor: pointer; }
.ae-cmdk__item svg { width: 20px; height: 20px; flex: none; }
.ae-cmdk__item[aria-selected="true"] { background: rgba(95, 81, 213, 0.12); }
.ae-cmdk__item .ae-kbd { margin-left: auto; }

/* ── Shape utilities ──────────────────────────────────────────────── */
.ae-shield-shape { border-radius: var(--ae-shape-shield); }
.ae-shield-shape-soft { border-radius: var(--ae-shape-shield-soft); }

@media (prefers-reduced-motion: reduce) {
  .ae-root *, .ae-root *::before, .ae-root *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}