/* ==========================================================================
   Apexphin components
   ========================================================================== */

/* ---------- Eyebrow pill ---------- */
.ax-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--ax-line); border-radius: var(--ax-pill);
  background: var(--ax-surface);
  font-family: var(--ax-font-body); font-size: var(--ax-fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ax-muted);
  margin-bottom: var(--ax-5); max-width: 100%;
}
.ax-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-primary); flex-shrink: 0; }
.ax-eyebrow--sand::before { background: var(--ax-accent); }
.ax-eyebrow--dark, .ax-section--dark .ax-eyebrow, .ax-section--dark-2 .ax-eyebrow {
  background: rgba(255, 255, 255, .04); border-color: rgba(217, 194, 154, .32); color: var(--ax-accent);
}
.ax-eyebrow--dark::before, .ax-section--dark .ax-eyebrow::before, .ax-section--dark-2 .ax-eyebrow::before { background: var(--ax-accent); }

/* ---------- Buttons ---------- */
.ax-btn {
  --btn-bg: var(--ax-primary); --btn-fg: #fff; --btn-bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border: 1px solid var(--btn-bd); border-radius: var(--ax-pill);
  background: var(--btn-bg); color: var(--btn-fg) !important;
  font-family: var(--ax-font-body); font-size: var(--ax-fs-sm); font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--ax-dur) var(--ax-ease), border-color var(--ax-dur) var(--ax-ease), color var(--ax-dur) var(--ax-ease), box-shadow var(--ax-dur) var(--ax-ease), transform var(--ax-dur) var(--ax-ease);
}
.ax-btn:hover { transform: translateY(-1px); }
.ax-btn:active { transform: none; }
.ax-btn:focus-visible { outline: none; box-shadow: var(--ax-ring); }
.ax-btn[disabled], .ax-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; pointer-events: none; }
.ax-btn .ax-icon { width: 18px; height: 18px; }

.ax-btn--primary { --btn-bg: var(--ax-primary); box-shadow: 0 6px 16px rgba(var(--ax-primary-rgb), .22); }
.ax-btn--primary:hover { --btn-bg: var(--ax-primary-hover); box-shadow: 0 10px 24px rgba(var(--ax-primary-rgb), .28); }
.ax-btn--secondary { --btn-bg: var(--ax-surface); --btn-fg: var(--ax-text); --btn-bd: var(--ax-line-strong); }
.ax-btn--secondary:hover { --btn-bd: var(--ax-text); }
.ax-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ax-text); --btn-bd: transparent; }
.ax-btn--ghost:hover { --btn-bg: rgba(11, 22, 38, .05); }
.ax-btn--dark { --btn-bg: var(--ax-ink); --btn-fg: #fff; }
.ax-btn--dark:hover { --btn-bg: var(--ax-ink-3); }
.ax-btn--light { --btn-bg: #fff; --btn-fg: var(--ax-ink); }
.ax-btn--light:hover { --btn-bg: var(--ax-accent-tint); }
.ax-btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .32); }
.ax-btn--outline-light:hover { --btn-bd: #fff; --btn-bg: rgba(255, 255, 255, .06); }
.ax-btn--sand { --btn-bg: var(--ax-accent); --btn-fg: var(--ax-ink); }
.ax-btn--sand:hover { --btn-bg: #E6D3B0; }
.ax-btn--danger { --btn-bg: var(--ax-danger); --btn-fg: #fff; }
.ax-btn--danger:hover { --btn-bg: #A6342F; }
.ax-btn--sm { min-height: 36px; padding: 8px 16px; font-size: var(--ax-fs-xs); }
.ax-btn--lg { min-height: 56px; padding: 16px 32px; font-size: var(--ax-fs-md); }
.ax-btn--block { display: flex; width: 100%; }
.ax-btn--icon { width: 44px; min-height: 44px; padding: 0; }
.ax-btn.is-loading { color: transparent !important; pointer-events: none; }
.ax-btn.is-loading::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--btn-fg) transparent var(--btn-fg) transparent;
  animation: ax-spin .8s linear infinite;
}
.ax-btn-row { display: flex; flex-wrap: wrap; gap: var(--ax-3); align-items: center; }
.ax-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--ax-fs-sm); }
.ax-link-arrow .ax-icon { transition: transform var(--ax-dur) var(--ax-ease); }
.ax-link-arrow:hover .ax-icon { transform: translateX(3px); }
@keyframes ax-spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */
.ax-field { margin-bottom: var(--ax-5); min-width: 0; }
.ax-label { display: block; margin-bottom: 8px; font-size: var(--ax-fs-sm); font-weight: 600; color: var(--ax-text); }
.ax-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ax-label-row .ax-label { margin-bottom: 0; }
.ax-input, .ax-select, .ax-textarea {
  display: block; width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--ax-line-strong); border-radius: var(--ax-r);
  background: var(--ax-surface); color: var(--ax-text);
  font-family: var(--ax-font-body); font-size: var(--ax-fs-md); line-height: 1.4;
  transition: border-color var(--ax-dur) var(--ax-ease), box-shadow var(--ax-dur) var(--ax-ease), background-color var(--ax-dur);
  appearance: none; -webkit-appearance: none;
}
.ax-input::placeholder, .ax-textarea::placeholder { color: var(--ax-subtle); }
.ax-input:hover, .ax-select:hover, .ax-textarea:hover { border-color: #B4BECC; }
.ax-input:focus, .ax-select:focus, .ax-textarea:focus { outline: none; border-color: var(--ax-primary); box-shadow: var(--ax-ring); }
.ax-input[disabled], .ax-select[disabled], .ax-textarea[disabled] { background: var(--ax-canvas); color: var(--ax-subtle); cursor: not-allowed; }
.ax-textarea { min-height: 140px; resize: vertical; }
.ax-select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B6778' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.ax-help { margin-top: 6px; font-size: var(--ax-fs-xs); color: var(--ax-muted); }
.ax-error-text { margin-top: 6px; font-size: var(--ax-fs-xs); color: var(--ax-danger); font-weight: 500; }
.is-invalid .ax-input, .ax-input.is-invalid, .is-invalid .ax-select, .ax-select.is-invalid, .is-invalid .ax-textarea, .ax-textarea.is-invalid { border-color: var(--ax-danger); }
.is-invalid .ax-input:focus, .ax-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(194, 65, 59, .2); }
.is-valid .ax-input, .ax-input.is-valid { border-color: var(--ax-success); }

/* Input group (icon / addon / trailing button) */
.ax-input-group { position: relative; display: flex; align-items: stretch; width: 100%; }
.ax-input-group > .ax-input { flex: 1 1 auto; min-width: 0; }
.ax-input-group__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ax-subtle); pointer-events: none; display: inline-flex; }
.ax-input-group__icon .ax-icon { width: 18px; height: 18px; }
.ax-input-group--icon > .ax-input { padding-left: 44px; }
.ax-input-group__addon {
  display: inline-flex; align-items: center; padding: 0 14px; min-width: 64px; justify-content: center;
  border: 1px solid var(--ax-line-strong); background: var(--ax-canvas); color: var(--ax-muted);
  font-size: var(--ax-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ax-input-group__addon:first-child { border-right: 0; border-radius: var(--ax-r) 0 0 var(--ax-r); }
.ax-input-group__addon:first-child + .ax-input { border-radius: 0 var(--ax-r) var(--ax-r) 0; }
.ax-input-group__addon:last-child { border-left: 0; border-radius: 0 var(--ax-r) var(--ax-r) 0; }
.ax-input-group > .ax-input:has(+ .ax-input-group__addon) { border-radius: var(--ax-r) 0 0 var(--ax-r); }
.ax-input-group__action {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 0; border-radius: var(--ax-r-sm); background: transparent; color: var(--ax-muted); cursor: pointer;
}
.ax-input-group__action:hover { background: var(--ax-canvas); color: var(--ax-text); }
.ax-input-group__action .ax-icon { width: 18px; height: 18px; }
.ax-input-group--action > .ax-input { padding-right: 52px; }

/* Checkbox / radio */
.ax-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--ax-fs-sm); color: var(--ax-muted); line-height: 1.5; }
.ax-check input { flex-shrink: 0; appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1.5px solid var(--ax-line-strong); border-radius: 5px; background: #fff center / 12px no-repeat; cursor: pointer; transition: all var(--ax-dur); }
.ax-check input[type="radio"] { border-radius: 50%; }
.ax-check input:checked { background-color: var(--ax-primary); border-color: var(--ax-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ax-check input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 0 3px, transparent 4px); }
.ax-check input:focus-visible { box-shadow: var(--ax-ring); outline: none; }
.ax-check a { font-weight: 600; }
.ax-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--ax-fs-sm); }
.ax-switch input { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: var(--ax-pill); background: var(--ax-line-strong); position: relative; cursor: pointer; transition: background var(--ax-dur); margin: 0; }
.ax-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--ax-sh-1); transition: transform var(--ax-dur) var(--ax-ease); }
.ax-switch input:checked { background: var(--ax-primary); }
.ax-switch input:checked::after { transform: translateX(18px); }

/* ---------- Cards ---------- */
.ax-card {
  position: relative; min-width: 0;
  background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--ax-r);
  padding: var(--ax-6); box-shadow: var(--ax-sh-1);
}
.ax-card--flat { box-shadow: none; }
.ax-card--raised { box-shadow: var(--ax-sh-2); border-color: transparent; }
.ax-card--hover { transition: transform var(--ax-dur) var(--ax-ease), box-shadow var(--ax-dur) var(--ax-ease), border-color var(--ax-dur); }
.ax-card--hover:hover { transform: translateY(-3px); box-shadow: var(--ax-sh-3); border-color: transparent; }
.ax-card--dark { background: var(--ax-ink-2); border-color: var(--ax-on-dark-line); color: var(--ax-on-dark-muted); box-shadow: none; }
.ax-card--dark h3, .ax-card--dark h4, .ax-card--dark h5 { color: #fff; }
.ax-card--sand { background: var(--ax-accent-tint); border-color: #EADFCB; box-shadow: none; }
.ax-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ax-3); margin-bottom: var(--ax-4); }
.ax-card__title { margin: 0 0 var(--ax-2); font-size: var(--ax-fs-lg); }
.ax-card__body { color: var(--ax-muted); font-size: var(--ax-fs-sm); }
.ax-card__foot { margin-top: var(--ax-5); padding-top: var(--ax-4); border-top: 1px solid var(--ax-line); }
.ax-icon-tile {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--ax-5);
  border-radius: var(--ax-r); background: var(--ax-primary-tint); color: var(--ax-primary);
}
.ax-icon-tile .ax-icon { width: 22px; height: 22px; }
.ax-icon-tile--lg { width: 56px; height: 56px; border-radius: 16px; }
.ax-icon-tile--lg .ax-icon { width: 26px; height: 26px; }
.ax-icon-tile--sand { background: var(--ax-accent-tint); color: var(--ax-accent-strong); }
.ax-icon-tile--dark { background: rgba(217, 194, 154, .12); color: var(--ax-accent); }

/* Stat card */
.ax-stat { background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--ax-r); padding: var(--ax-5); min-width: 0; }
.ax-stat__label { display: flex; align-items: center; gap: 8px; font-size: var(--ax-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ax-muted); }
.ax-stat__value { margin-top: 10px; font-family: var(--ax-font-head); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ax-text); font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.ax-stat__meta { margin-top: 8px; font-size: var(--ax-fs-xs); color: var(--ax-muted); }
.ax-stat__delta--up { color: var(--ax-success); } .ax-stat__delta--down { color: var(--ax-danger); }

/* ---------- Tables ---------- */
.ax-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ax-line); border-radius: var(--ax-r); background: var(--ax-surface); }
.ax-table { width: 100%; border-collapse: collapse; font-size: var(--ax-fs-sm); }
.ax-table th { padding: 12px 16px; text-align: left; font-size: var(--ax-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ax-muted); background: var(--ax-surface-2); border-bottom: 1px solid var(--ax-line); white-space: nowrap; }
.ax-table td { padding: 14px 16px; border-bottom: 1px solid var(--ax-line); color: var(--ax-text); vertical-align: middle; }
.ax-table tr:last-child td { border-bottom: 0; }
.ax-table tbody tr:hover td { background: #FAFBFD; }
.ax-table .is-num, .ax-table td.ax-money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Stacked cards on mobile: add .ax-table--stack and data-label on each td */
@media (max-width: 640px) {
  .ax-table--stack thead { display: none; }
  .ax-table--stack, .ax-table--stack tbody, .ax-table--stack tr, .ax-table--stack td { display: block; width: 100%; }
  .ax-table--stack tr { padding: 12px 16px; border-bottom: 1px solid var(--ax-line); }
  .ax-table--stack td { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border: 0; text-align: right; }
  .ax-table--stack td::before { content: attr(data-label); color: var(--ax-muted); font-size: var(--ax-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; text-align: left; }
}

/* ---------- Badges ---------- */
.ax-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--ax-pill);
  font-size: var(--ax-fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--ax-canvas); color: var(--ax-muted); border: 1px solid var(--ax-line);
}
.ax-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ax-badge--primary { background: var(--ax-primary-tint); color: var(--ax-primary); border-color: transparent; }
.ax-badge--sand { background: var(--ax-accent-tint); color: var(--ax-accent-strong); border-color: transparent; }
.ax-badge--dark { background: var(--ax-ink); color: #fff; border-color: transparent; }
/* Status badges */
.ax-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--ax-pill); font-size: var(--ax-fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; }
.ax-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ax-status--pending { background: var(--ax-warning-tint); color: var(--ax-warning); }
.ax-status--processing { background: var(--ax-info-tint); color: var(--ax-info); }
.ax-status--processing::before { animation: ax-pulse 1.4s ease-in-out infinite; }
.ax-status--completed, .ax-status--approved, .ax-status--success { background: var(--ax-success-tint); color: var(--ax-success); }
.ax-status--active { background: var(--ax-primary-tint); color: var(--ax-primary); }
.ax-status--failed, .ax-status--rejected { background: var(--ax-danger-tint); color: var(--ax-danger); }
.ax-status--cancelled, .ax-status--canceled, .ax-status--inactive { background: #EEF0F3; color: var(--ax-muted); }
@keyframes ax-pulse { 50% { opacity: .35; } }

/* ---------- Alerts ---------- */
.ax-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--ax-r); border: 1px solid transparent; font-size: var(--ax-fs-sm); line-height: 1.5; margin-bottom: var(--ax-5); }
.ax-alert .ax-icon { width: 18px; height: 18px; margin-top: 1px; }
.ax-alert ul { margin: 0; padding-left: 18px; }
.ax-alert__title { display: block; font-weight: 600; margin-bottom: 2px; }
.ax-alert--info { background: var(--ax-info-tint); color: #1F4F82; border-color: #CFE0F2; }
.ax-alert--success { background: var(--ax-success-tint); color: #16613F; border-color: #CBE6D9; }
.ax-alert--warning { background: var(--ax-warning-tint); color: #744A0C; border-color: #F0DDB9; }
.ax-alert--danger { background: var(--ax-danger-tint); color: #8F2B26; border-color: #F2D0CE; }

/* ---------- Modal ---------- */
.ax-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: var(--ax-4); }
.ax-modal.is-open { display: flex; }
.ax-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 22, 38, .55); backdrop-filter: blur(4px); }
.ax-modal__dialog { position: relative; width: min(100%, 520px); max-height: calc(100vh - 32px); overflow: auto; background: var(--ax-surface); border-radius: var(--ax-r-lg); box-shadow: var(--ax-sh-3); padding: var(--ax-6); animation: ax-pop .2s var(--ax-ease); }
.ax-modal__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: var(--ax-4); }
.ax-modal__head h3 { margin: 0; font-size: var(--ax-fs-xl); }
.ax-modal__foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: var(--ax-6); flex-wrap: wrap; }
@keyframes ax-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- Dropdown ---------- */
.ax-dropdown { position: relative; display: inline-block; }
.ax-dropdown__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200; min-width: 220px; padding: 6px; background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--ax-r); box-shadow: var(--ax-sh-3); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all .16s var(--ax-ease); }
.ax-dropdown.is-open .ax-dropdown__menu { opacity: 1; visibility: visible; transform: none; }
.ax-dropdown__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--ax-r-sm); background: none; color: var(--ax-text) !important; font-size: var(--ax-fs-sm); text-align: left; cursor: pointer; }
.ax-dropdown__item:hover { background: var(--ax-canvas); }
.ax-dropdown__sep { height: 1px; background: var(--ax-line); margin: 6px 0; }

/* ---------- Tabs ---------- */
.ax-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--ax-pill); background: #EDF0F4; max-width: 100%; overflow-x: auto; }
.ax-tab { padding: 8px 16px; border: 0; border-radius: var(--ax-pill); background: transparent; color: var(--ax-muted); font-size: var(--ax-fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; }
.ax-tab:hover { color: var(--ax-text); }
.ax-tab.is-active, .ax-tab[aria-selected="true"] { background: var(--ax-surface); color: var(--ax-text); box-shadow: var(--ax-sh-1); }
.ax-tabs--line { background: none; border-radius: 0; padding: 0; border-bottom: 1px solid var(--ax-line); gap: var(--ax-5); display: flex; }
.ax-tabs--line .ax-tab { border-radius: 0; padding: 12px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ax-tabs--line .ax-tab.is-active { background: none; box-shadow: none; border-color: var(--ax-primary); }

/* ---------- Pagination ---------- */
.ax-pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: var(--ax-6) 0 0; }
.ax-pagination a, .ax-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--ax-line); border-radius: var(--ax-pill); background: var(--ax-surface); color: var(--ax-text); font-size: var(--ax-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.ax-pagination a:hover { border-color: var(--ax-text); color: var(--ax-text); }
.ax-pagination .is-active span, .ax-pagination .active span { background: var(--ax-ink); border-color: var(--ax-ink); color: #fff; }
.ax-pagination .is-disabled span, .ax-pagination .disabled span { color: var(--ax-subtle); background: var(--ax-canvas); }

/* ---------- Breadcrumbs ---------- */
.ax-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0 0 var(--ax-5); font-size: var(--ax-fs-sm); color: var(--ax-muted); }
.ax-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.ax-breadcrumb li + li::before { content: '/'; color: var(--ax-line-strong); }
.ax-breadcrumb a { color: var(--ax-muted); }
.ax-breadcrumb a:hover { color: var(--ax-text); }
.ax-breadcrumb [aria-current] { color: var(--ax-text); font-weight: 500; }

/* ---------- Avatar ---------- */
.ax-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--ax-primary-tint); color: var(--ax-primary); font-family: var(--ax-font-head); font-weight: 700; font-size: var(--ax-fs-sm); }
.ax-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ax-avatar--sm { width: 32px; height: 32px; font-size: var(--ax-fs-xs); }
.ax-avatar--lg { width: 56px; height: 56px; font-size: var(--ax-fs-lg); }
.ax-avatar--sand { background: var(--ax-accent-tint); color: var(--ax-accent-strong); }

/* ---------- Progress ---------- */
.ax-progress { width: 100%; height: 8px; border-radius: var(--ax-pill); background: #E9EDF2; overflow: hidden; }
.ax-progress__bar { height: 100%; border-radius: inherit; background: var(--ax-primary); transition: width .6s var(--ax-ease); }
.ax-progress--sand .ax-progress__bar { background: var(--ax-accent); }
.ax-progress--success .ax-progress__bar { background: var(--ax-success); }

/* ---------- Skeleton ---------- */
.ax-skeleton { position: relative; overflow: hidden; background: #ECEFF3; border-radius: var(--ax-r-sm); min-height: 12px; }
.ax-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: ax-shimmer 1.4s infinite; }
.ax-skeleton--text { height: 12px; margin-bottom: 10px; }
.ax-skeleton--title { height: 22px; width: 50%; margin-bottom: 14px; }
.ax-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }
@keyframes ax-shimmer { to { transform: translateX(100%); } }

/* ---------- Empty / error / success states ---------- */
.ax-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--ax-9) var(--ax-5); border: 1px dashed var(--ax-line-strong); border-radius: var(--ax-r); background: var(--ax-surface); }
.ax-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--ax-4); border-radius: 50%; background: var(--ax-canvas); color: var(--ax-muted); }
.ax-state__icon .ax-icon { width: 24px; height: 24px; }
.ax-state h4 { margin-bottom: 6px; font-size: var(--ax-fs-lg); }
.ax-state p { max-width: 42ch; color: var(--ax-muted); font-size: var(--ax-fs-sm); }
.ax-state .ax-btn { margin-top: var(--ax-4); }
.ax-state--error .ax-state__icon { background: var(--ax-danger-tint); color: var(--ax-danger); }
.ax-state--success .ax-state__icon { background: var(--ax-success-tint); color: var(--ax-success); }

/* ---------- Toasts ---------- */
.ax-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.ax-toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 16px; border-radius: var(--ax-r); background: var(--ax-ink); color: #fff; box-shadow: var(--ax-sh-3); font-size: var(--ax-fs-sm); line-height: 1.5; animation: ax-toast-in .3s var(--ax-ease); border-left: 3px solid var(--ax-accent); }
.ax-toast--success { border-left-color: #3FB57F; }
.ax-toast--error, .ax-toast--danger { border-left-color: #E06A64; }
.ax-toast--warning { border-left-color: #E0A84A; }
.ax-toast--info { border-left-color: #6E9FE0; }
.ax-toast__title { display: block; font-weight: 600; margin-bottom: 2px; }
.ax-toast__body { flex: 1; min-width: 0; overflow-wrap: anywhere; color: rgba(255, 255, 255, .82); }
.ax-toast__close { flex-shrink: 0; border: 0; background: none; color: rgba(255, 255, 255, .6); cursor: pointer; padding: 2px; line-height: 0; border-radius: 6px; }
.ax-toast__close:hover { color: #fff; }
.ax-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: all .25s var(--ax-ease); }
@keyframes ax-toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Accordion (FAQ) ---------- */
.ax-accordion { border-top: 1px solid var(--ax-line); }
.ax-accordion__item { border-bottom: 1px solid var(--ax-line); }
.ax-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--ax-4); width: 100%; padding: var(--ax-5) 0; border: 0; background: none; color: var(--ax-text); text-align: left; font-family: var(--ax-font-head); font-size: var(--ax-fs-lg); font-weight: 600; letter-spacing: -0.01em; cursor: pointer; }
.ax-accordion__trigger:hover { color: var(--ax-primary); }
.ax-accordion__sign { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ax-line-strong); transition: all var(--ax-dur) var(--ax-ease); }
.ax-accordion__sign::before, .ax-accordion__sign::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--ax-dur) var(--ax-ease); }
.ax-accordion__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.ax-accordion__item.is-open .ax-accordion__sign { background: var(--ax-ink); border-color: var(--ax-ink); color: #fff; }
.ax-accordion__item.is-open .ax-accordion__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.ax-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ax-ease); }
.ax-accordion__item.is-open .ax-accordion__panel { grid-template-rows: 1fr; }
.ax-accordion__inner { overflow: hidden; }
.ax-accordion__inner p { padding-bottom: var(--ax-5); max-width: 68ch; color: var(--ax-muted); }
.ax-section--dark .ax-accordion, .ax-section--dark .ax-accordion__item { border-color: var(--ax-on-dark-line); }
.ax-section--dark .ax-accordion__trigger { color: #fff; }

/* ---------- Lists ---------- */
.ax-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ax-check-list li { position: relative; padding-left: 30px; color: var(--ax-text); }
.ax-check-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ax-primary-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4FD8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ax-section--dark .ax-check-list li, .ax-section--dark-2 .ax-check-list li, .ax-card--dark .ax-check-list li { color: var(--ax-on-dark-muted); }
.ax-section--dark .ax-check-list li::before, .ax-section--dark-2 .ax-check-list li::before, .ax-card--dark .ax-check-list li::before { background-color: rgba(217, 194, 154, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9C29A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E"); }
.ax-dl { display: grid; gap: 0; margin: 0; }
.ax-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ax-line); font-size: var(--ax-fs-sm); }
.ax-dl > div:last-child { border-bottom: 0; }
.ax-dl dt { color: var(--ax-muted); font-weight: 500; }
.ax-dl dd { margin: 0; color: var(--ax-text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Brand lockup (shared by landing and auth layouts) ---- */
.ax-brand { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 1; }
.ax-brand img { height: 34px; width: auto; }
/* Brand-kit clear space: x = 0.39 x logo height on every side; lockup never narrower than 120px. */
.ax-brand:has(.ax-brand__lockup), .ax-brand--compact { padding: 13px 13px 13px 0; }
.ax-brand__lockup { min-width: 120px; }
.ax-brand__symbol { display: none; height: 36px !important; }
.ax-brand--compact .ax-brand__symbol { display: block; }
@media (max-width: 359px) { .ax-brand .ax-brand__lockup { display: none; } .ax-brand .ax-brand__symbol { display: block; } }
@media (max-width: 760px) { .ax-brand img { height: 32px; } }