/* ===== Source: aldeapath-notify.css ===== */
/* ============================================================
   ALDEAPATH — Unified Notification & Feedback System
   ------------------------------------------------------------
   One canonical visual language for every message the user sees:
   toasts, inline form validation, page-level banners and the
   branded error screen.

   Tokens come from aldeapath-system.css (--success / --danger /
   --warning / --info / --card / --border / --text / --muted).
   Fallbacks are provided so this file also works standalone on
   pages that do not load the full design system.
   ============================================================ */

:root {
  --ap-n-radius: 14px;
  --ap-n-shadow: 0 12px 34px rgba(8, 26, 20, .16), 0 2px 6px rgba(8, 26, 20, .08);
  --ap-n-gap: .625rem;
}

/* ── Toast stack ─────────────────────────────────────────── */
#ap-notify-root {
  position: fixed;
  z-index: 100000;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--ap-n-gap);
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}

.ap-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem .9rem .85rem .95rem;
  border-radius: var(--ap-n-radius);
  background: var(--card, #fff);
  color: var(--text, #10201a);
  border: 1px solid var(--border, #e5e6e0);
  border-left: 4px solid var(--ap-n-accent, var(--info, #1f5f7a));
  box-shadow: var(--ap-n-shadow);
  font-family: inherit;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .26s cubic-bezier(.22, 1, .36, 1),
              transform .26s cubic-bezier(.22, 1, .36, 1);
}

.ap-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.ap-toast.is-leaving { opacity: 0; transform: translateY(6px) scale(.98); }

.ap-toast--success { --ap-n-accent: var(--success, #0f7a4f); }
.ap-toast--error   { --ap-n-accent: var(--danger,  #b3261e); }
.ap-toast--warning { --ap-n-accent: var(--warning, #a3701a); }
.ap-toast--info    { --ap-n-accent: var(--info,    #1f5f7a); }

.ap-toast__icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ap-n-accent);
  color: #fff;
  font-size: .78rem;
  line-height: 1;
  margin-top: .05rem;
}

.ap-toast__body { flex: 1 1 auto; min-width: 0; }

.ap-toast__title {
  margin: 0 0 .12rem;
  font-size: .855rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text, #10201a);
}

.ap-toast__message {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted, #6b7a73);
  overflow-wrap: anywhere;
}

.ap-toast__action {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border: 1px solid var(--ap-n-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--ap-n-accent);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ap-toast__action:hover { background: var(--ap-n-accent); color: #fff; }

.ap-toast__close {
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  min-width: 1.65rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #6b7a73);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  transition: opacity .18s ease, background .18s ease;
}
.ap-toast__close:hover { opacity: 1; background: rgba(0, 0, 0, .05); }
.ap-toast__close:focus-visible,
.ap-toast__action:focus-visible {
  outline: 2px solid var(--ap-n-accent);
  outline-offset: 2px;
}

.ap-toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  background: var(--ap-n-accent);
  opacity: .5;
  animation: ap-toast-progress linear forwards;
}

@keyframes ap-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── Mobile: dock to the bottom so nothing covers the header ─── */
@media (max-width: 640px) {
  #ap-notify-root {
    right: .625rem;
    left: .625rem;
    top: auto;
    bottom: calc(.625rem + env(safe-area-inset-bottom, 0px));
    width: auto;
    flex-direction: column;
  }
  .ap-toast { transform: translateY(10px) scale(.98); }
  .ap-toast.is-visible { transform: translateY(0) scale(1); }
  .ap-toast.is-leaving { transform: translateY(6px) scale(.98); }
  .ap-toast__close { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; }
}

/* ── Page-level banner (persistent context, e.g. offline) ── */
.ap-banner {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .8rem .9rem;
  margin: 0 0 1rem;
  border-radius: var(--ap-n-radius);
  border: 1px solid var(--ap-n-accent, var(--info, #1f5f7a));
  background: var(--ap-n-surface, var(--info-bg, #e9f2f6));
  color: var(--text, #10201a);
  font-size: .82rem;
  line-height: 1.5;
}
.ap-banner--success { --ap-n-accent: var(--success-border, #b9e0cd); --ap-n-surface: var(--success-bg, #e9f6ef); }
.ap-banner--error   { --ap-n-accent: var(--danger-border,  #f0c4c1); --ap-n-surface: var(--danger-bg,  #fbeceb); }
.ap-banner--warning { --ap-n-accent: var(--warning-border, #e8d5a3); --ap-n-surface: var(--warning-bg, #fbf4e3); }
.ap-banner--info    { --ap-n-accent: var(--info-border,    #bfd8e3); --ap-n-surface: var(--info-bg,    #e9f2f6); }
.ap-banner__icon { flex: 0 0 auto; margin-top: .1rem; }
.ap-banner__title { display: block; font-weight: 700; margin-bottom: .1rem; }

/* ── Inline form validation ──────────────────────────────── */
.ap-field-error {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  margin: .35rem 0 0;
  font-size: .765rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--danger, #b3261e);
  animation: ap-field-in .22s cubic-bezier(.22, 1, .36, 1);
}
.ap-field-error::before {
  content: "!";
  flex: 0 0 auto;
  width: .95rem;
  height: .95rem;
  margin-top: .1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--danger, #b3261e);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}

.ap-field-hint {
  margin: .35rem 0 0;
  font-size: .765rem;
  line-height: 1.4;
  color: var(--muted, #6b7a73);
}

.ap-invalid,
input.ap-invalid,
select.ap-invalid,
textarea.ap-invalid {
  border-color: var(--danger, #b3261e) !important;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .12) !important;
}

.ap-valid,
input.ap-valid,
select.ap-valid,
textarea.ap-valid {
  border-color: var(--success, #0f7a4f) !important;
}

@keyframes ap-field-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Branded full-screen error state ─────────────────────── */
.ap-error-screen {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--bg, #f6f7f4);
  color: var(--text, #10201a);
  font-family: inherit;
  animation: ap-fade-in .3s ease;
}
.ap-error-screen__card {
  width: min(440px, 100%);
  text-align: center;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e6e0);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  box-shadow: var(--ap-n-shadow);
}
.ap-error-screen__mark {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-light, #e8f4ef);
  color: var(--brand, #0d7a5f);
  font-size: 1.2rem;
}
.ap-error-screen__title {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ap-error-screen__text {
  margin: 0 0 1.35rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted, #6b7a73);
}
.ap-error-screen__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.ap-error-screen__btn {
  appearance: none;
  border: 1px solid var(--brand, #0d7a5f);
  background: var(--brand, #0d7a5f);
  color: #fff;
  border-radius: 999px;
  padding: .65rem 1.35rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: filter .18s ease;
}
.ap-error-screen__btn:hover { filter: brightness(1.06); }
.ap-error-screen__btn--ghost {
  background: transparent;
  color: var(--brand, #0d7a5f);
}
.ap-error-screen__btn:focus-visible {
  outline: 2px solid var(--brand, #0d7a5f);
  outline-offset: 3px;
}
.ap-error-screen__ref {
  margin: 1rem 0 0;
  font-size: .75rem;
  color: var(--muted, #6b7a73);
  opacity: .8;
}

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

/* ── Screen-reader only live region ──────────────────────── */
.ap-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ap-toast,
  .ap-field-error,
  .ap-error-screen { transition: none !important; animation: none !important; }
  .ap-toast { opacity: 1; transform: none; }
  .ap-toast__progress { display: none; }
}

/* ── High contrast / forced colors ───────────────────────── */
@media (forced-colors: active) {
  .ap-toast { border: 1px solid CanvasText; }
  .ap-toast__icon { forced-color-adjust: none; }
}

/* ===== Source: kyc-step3-ui.css ===== */
/*
 * KYC Step 3 — upload documents
 * Presentation-only overrides. The existing inputs, preview containers,
 * IDs and kyc-wizard.js upload flow remain unchanged.
 */

#kyc-panel-3 {
  /*
   * The mobile bottom navigation is fixed above the slide viewport. Keep
   * the quality guidance and the navigation controls scrollable past it.
   */
  padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
}

#kyc-panel-3 .kyc-upload-label {
  min-height: 1.5rem;
  gap: .75rem;
  margin-bottom: .45rem;
}

#kyc-panel-3 .kyc-upload-label > span:first-child {
  min-width: 0;
}

#kyc-panel-3 .kyc-upload-req {
  flex: 0 0 auto;
  white-space: nowrap;
}

#kyc-panel-3 .kyc-upload-file-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#kyc-panel-3 .kyc-upload-section {
  position: relative;
}

#kyc-panel-3 .kyc-upload-zone {
  min-height: 0;
  border: 1.5px dashed var(--border);
  background: var(--card);
  transition: border-color .2s ease, background-color .2s ease, transform .15s ease;
}

#kyc-panel-3 .kyc-zone-preview {
  min-height: 9rem;
}

#kyc-panel-3 .kyc-zone-placeholder {
  width: 100%;
  min-height: 9rem;
  padding: 1.15rem .85rem;
  gap: .35rem;
  box-sizing: border-box;
}

#kyc-panel-3 .kyc-zone-icon {
  width: 2.75rem !important;
  height: 2.75rem !important;
  margin: 0 0 .1rem !important;
  border-radius: 50%;
  background: var(--bg) !important;
  color: var(--muted);
}

#kyc-panel-3 .kyc-zone-icon i {
  margin: 0 !important;
  font-size: 1.1rem !important;
  color: currentColor !important;
}

#kyc-panel-3 .kyc-zone-hint {
  margin-top: .1rem !important;
  color: var(--text) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1.3;
  text-align: center;
}

#kyc-panel-3 .kyc-zone-instruction {
  max-width: 18rem;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.4;
  text-align: center;
}

#kyc-panel-3 .kyc-zone-formats {
  margin-top: .1rem;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.35;
  text-align: center;
}

/*
 * kyc-wizard.js clears the preview wrapper while resetting the wizard.
 * Recreate the empty-state treatment with CSS in that state only; once a
 * file is selected, the existing preview HTML takes over unchanged.
 */
#kyc-panel-3 .kyc-zone-preview:empty {
  flex-direction: column;
  gap: .35rem;
  padding: 1.15rem .85rem;
  box-sizing: border-box;
}

#kyc-panel-3 .kyc-zone-preview:empty::before {
  content: "\f030";
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .1rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-family: "Font Awesome 6 Free";
  font-size: 1.1rem;
  font-weight: 900;
}

#kyc-panel-3 .kyc-zone-preview:empty::after {
  content: "Upload document\A Tap to take a photo or choose from your device\A JPG, PNG or PDF \2022 Max 10 MB";
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
}

#kyc-panel-3 .kyc-upload-section:first-of-type .kyc-zone-preview:empty::after {
  content: "Upload front of document\A Tap to take a photo or choose from your device\A JPG, PNG or PDF \2022 Max 10 MB";
}

#kyc-panel-3 #kyc-back-section .kyc-zone-preview:empty::after {
  content: "Upload back of document\A Tap to take a photo or choose from your device\A JPG, PNG or PDF \2022 Max 10 MB";
}

/* Neutral untouched state; brand color is reserved for actual interaction. */
#kyc-panel-3 .kyc-upload-zone:hover,
#kyc-panel-3 .kyc-upload-zone:focus-visible {
  border-color: var(--brand);
  background: var(--brand-light);
}

#kyc-panel-3 .kyc-upload-zone:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

#kyc-panel-3 .kyc-upload-zone:active {
  transform: scale(.99);
}

#kyc-panel-3 .kyc-quality-tips {
  margin-bottom: 1rem;
}

@media (max-width: 420px) {
  #kyc-panel-3 .kyc-zone-preview,
  #kyc-panel-3 .kyc-zone-placeholder {
    min-height: 8.5rem;
  }
}

/* File feedback remains visible after a selection error so the user can
 * recover by tapping the same side again. */
#kyc-panel-3 .kyc-upload-zone.has-file {
  border-color: var(--success, #16a34a);
  background: var(--success-bg, rgba(22, 163, 74, .06));
}

#kyc-panel-3 .kyc-upload-zone.has-error {
  border-color: var(--danger, #dc2626);
  background: var(--danger-bg, rgba(220, 38, 38, .06));
}

#kyc-panel-3 .kyc-upload-file-status {
  position: static;
  width: auto;
  height: auto;
  padding: 0 .15rem;
  margin: .4rem 0 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  display: block;
  min-height: 1.1rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#kyc-panel-3 .kyc-upload-file-status.is-success {
  color: var(--success, #16a34a);
}

#kyc-panel-3 .kyc-upload-file-status.is-error {
  color: var(--danger, #dc2626);
}

/*
 * KYC step navigation belongs to the active panel's normal document flow.
 * This file loads last, so the action footer cannot be re-anchored by a
 * broader dashboard positioning rule. The page header and main app nav are
 * intentionally not affected.
 */
#slide-kyc .kyc-nav-footer {
  position: static !important;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
}

/* ===== Source: mobile-containment.css ===== */
/* Focused mobile containment; retains the dashboard's existing visual tokens. */
@media(max-width:700px) {
  .app-shell, .settings-item-left, .settings-item-left > div,
  .hero-portfolio, .balance-row, .settings-overview-value { min-width:0; }
  .settings-item { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .settings-item-left { min-width:0; }
  .settings-item-icon, .settings-item-arrow, .stg-kyc-status-badge { flex-shrink:0; }
  .settings-item-title, .settings-item-sub, .settings-overview-value,
  .ap-state-body, .kyc-gate-subtitle, .kyc-gate-feature-tag { overflow-wrap:anywhere; }
  .form-input, .form-select, .form-textarea { min-width:0; max-width:100%; }
  .kyc-gate-modal { max-width:calc(100% - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; }
}

/* ===== Source: dashboard-accessibility.css ===== */
/* Dashboard accessibility and hierarchy refinements. */
body { font-size: var(--fs-body, 14px); }
input, select, textarea { font-size: max(16px, 1rem) !important; }

.ap-user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 50%;
  background: var(--brand-light); color: var(--brand-dark); font: 700 14px/1 var(--font-sans);
  cursor: pointer; background-size: cover; background-position: center;
}
.ap-user-avatar:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.home-kyc-banner {
  display: flex; align-items: center; gap: 12px; width: auto; max-width: 100%; min-height: 68px;
  margin: 12px 1rem 8px; padding: 12px 14px; overflow: hidden; border: 1px solid var(--warning-border, #fde68a);
  border-radius: 16px; background: var(--warning-bg, #fffbeb); color: var(--text);
  text-align: left; cursor: pointer; font: inherit;
}
.home-kyc-icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px; background: color-mix(in srgb, var(--warning, #d97706) 14%, transparent);
  color: var(--warning, #d97706); font-size: 18px;
}
.home-kyc-copy { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.home-kyc-copy strong { font-size: 14px; line-height: 1.3; }
.home-kyc-copy > span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.home-kyc-progress { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--warning, #d97706) 12%, transparent); color: var(--warning, #92400e); font-size: 12px; font-weight: 700; white-space: nowrap; }
.home-kyc-chevron { color: var(--muted); font-size: 12px; }
.home-kyc-banner:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Status variants: pending (neutral info) and rejected (error emphasis). */
.home-kyc-banner.is-pending {
  border-color: var(--info-border, var(--border)); background: var(--info-bg, var(--surface));
}
.home-kyc-banner.is-pending .home-kyc-icon,
.home-kyc-banner.is-pending .home-kyc-progress {
  background: color-mix(in srgb, var(--info, var(--brand)) 12%, transparent);
  color: var(--info, var(--brand));
}
.home-kyc-banner.is-rejected {
  border-color: var(--error-border, var(--warning-border, #fde68a));
  background: var(--error-bg, var(--warning-bg, #fffbeb));
}
.home-kyc-banner.is-rejected .home-kyc-icon,
.home-kyc-banner.is-rejected .home-kyc-progress {
  background: color-mix(in srgb, var(--error, #dc2626) 12%, transparent);
  color: var(--error, #dc2626);
}

/* Loading skeleton: reserves the banner's space so content below doesn't jump. */
.home-kyc-banner.is-loading { pointer-events: none; cursor: default; }
.home-kyc-banner.is-loading .home-kyc-icon,
.home-kyc-banner.is-loading .home-kyc-copy strong,
.home-kyc-banner.is-loading .home-kyc-copy > span,
.home-kyc-banner.is-loading .home-kyc-progress {
  color: transparent; background: var(--skeleton, color-mix(in srgb, var(--muted) 40%, transparent));
  border-radius: 8px; animation: ap-kyc-pulse 1.4s ease-in-out infinite;
}
.home-kyc-banner.is-loading .home-kyc-copy strong { width: 60%; min-height: 14px; }
.home-kyc-banner.is-loading .home-kyc-copy > span { width: 80%; min-height: 12px; }
.home-kyc-banner.is-loading .home-kyc-chevron { visibility: hidden; }
@keyframes ap-kyc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

#slide-home .action-row { margin-top: 12px; }
#slide-home .ann-wrap { margin-top: 14px; }
#slide-home .section-heading { font-size: 16px; }
#slide-home .perf-stat-label, #slide-home .perf-bar-labels, #slide-home .equity-curve-title { font-size: 12px; }
#slide-home #recent-transactions-list { min-height: 80px; }
#slide-home #recent-transactions-list .txn-row-chevron { color: var(--muted); font-size: 12px; }
#slide-home .recent-txn-empty { padding: 24px 16px; }

@media (max-width: 380px) {
  .home-kyc-banner { gap: 8px; padding: 10px; }
  .home-kyc-progress { padding: 4px 6px; }
  .home-kyc-icon { width: 36px; height: 36px; flex-basis: 36px; }
}

/* One confirmation pattern across settings, security, chat, and trade actions. */
.ap-confirm-overlay {
  position: fixed; inset: 0; z-index: 4200; display: flex; align-items: flex-end;
  justify-content: center; padding: 0; background: rgba(4, 12, 23, .56);
  opacity: 0; transition: opacity .2s ease; backdrop-filter: blur(3px);
}
.ap-confirm-overlay.open { opacity: 1; }
.ap-confirm-sheet {
  width: 100%; max-width: 520px; max-height: min(80dvh, 620px); overflow-y: auto;
  padding: .75rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; background: var(--surface, #fff); color: var(--text, #172033);
  box-shadow: 0 -10px 36px rgba(0,0,0,.2); transform: translateY(100%);
  transition: transform .24s cubic-bezier(.32,.72,0,1); overscroll-behavior: contain;
}
.ap-confirm-overlay.open .ap-confirm-sheet { transform: translateY(0); }
.ap-confirm-handle, .withdrawal-sheet-grab {
  width: 42px; height: 4px; margin: 0 auto .9rem; border-radius: 99px;
  background: var(--border, #d8dee8);
}
.ap-confirm-title { margin: 0 0 .45rem; font-size: 1.05rem; font-weight: 800; }
.ap-confirm-message { margin: 0; color: var(--muted, #667085); font-size: .92rem; line-height: 1.5; }
.ap-confirm-actions { display: flex; gap: .65rem; margin-top: 1.25rem; }
.ap-confirm-actions .btn { flex: 1; min-height: 46px; }
.ap-confirm-actions .ap-confirm-accept.btn-danger { background: var(--danger, #dc2626); border-color: var(--danger, #dc2626); color: #fff; }
.ap-confirm-actions .ap-confirm-accept.btn-primary { background: var(--brand, #0f766e); border-color: var(--brand, #0f766e); color: #fff; }

/* Dashboard withdrawal uses the existing secure flow, presented as a sheet. */
.withdrawal-sheet-overlay {
  position: fixed; inset: 0; z-index: 3500; display: flex; align-items: flex-end;
  justify-content: center; padding: 0; background: rgba(4, 12, 23, .58);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
  backdrop-filter: blur(3px);
}
.withdrawal-sheet-overlay.open { opacity: 1; visibility: visible; }
.withdrawal-sheet {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 96dvh;
  max-width: 560px; overflow: hidden; border-radius: 22px 22px 0 0;
  background: var(--surface, #fff); box-shadow: 0 -10px 36px rgba(0,0,0,.2);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.withdrawal-sheet-overlay.open .withdrawal-sheet { transform: translateY(0); }
.withdrawal-sheet-head {
  position: relative; display: flex; flex: 0 0 52px; align-items: center;
  justify-content: center; border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
}
.withdrawal-sheet-grab { position: absolute; top: 7px; margin: 0; width: 38px; height: 4px; }
.withdrawal-sheet-head h2 { margin: 5px 0 0; font-size: .9rem; font-weight: 800; }
.withdrawal-sheet-close {
  position: absolute; top: 50%; right: 12px; z-index: 1;
  display: grid; place-items: center; box-sizing: border-box;
  width: 30px; min-width: 30px; height: 30px; min-height: 30px;
  margin: 0; padding: 0 !important; transform: translateY(-50%);
  border: 0 !important; border-radius: 50%;
  background: #f0f3f6; box-shadow: none !important;
  color: #526171; font-size: 14px; line-height: 1; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.withdrawal-sheet-close i { display: block; line-height: 1; }
.withdrawal-sheet-close:hover { background: #e5eaf0; }
.withdrawal-sheet-close:focus-visible { outline: 2px solid var(--brand, #0f766e); outline-offset: 2px; }
#withdrawal-flow-frame { display: block; flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--bg, #fff); }
body.withdrawal-sheet-open { overflow: hidden; }
@media (min-width: 700px) {
  .withdrawal-sheet { height: min(92dvh, 850px); }
  .withdrawal-sheet-overlay { align-items: center; padding: 2vh 20px; }
  .withdrawal-sheet { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-confirm-overlay, .ap-confirm-sheet, .withdrawal-sheet-overlay, .withdrawal-sheet { transition-duration: .01ms; }
}

/* ===== Source: ux-refresh.css ===== */
/* ==========================================================================
   ux-refresh.css — KYC wizard, Settings grouping, 2FA state, heading case.
   Loaded after dashboard-accessibility.css. Uses existing theme tokens.
   ========================================================================== */

/* ── One heading convention: sentence case, no forced capitals ───────── */
.section-heading,
#slide-home .section-heading {
  text-transform: none;
  letter-spacing: -.005em;
  font-size: var(--fs-sm, .875rem);
  font-weight: 700;
  color: var(--text);
}

/* ── Settings: grouped layout ────────────────────────────────────────── */
.stg-group-nav {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: .4rem; overflow-x: auto;
  margin: 0 0 .5rem; padding: .5rem 0;
  background: var(--bg);
  scrollbar-width: none;
}
.stg-group-nav::-webkit-scrollbar { display: none; }
.stg-group-nav a {
  flex: 0 0 auto;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card, var(--surface));
  color: var(--text); font-size: .8125rem; font-weight: 600;
  text-decoration: none; min-height: 36px; display: inline-flex; align-items: center;
}
.stg-group-nav a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.stg-group { margin: 1.25rem 0 0; scroll-margin-top: 3.5rem; }
.stg-group-title {
  margin: 0; font-size: 1.05rem; font-weight: 800;
  letter-spacing: -.015em; color: var(--text);
}
.stg-group-sub {
  margin: .15rem 0 .65rem; font-size: .8125rem; color: var(--muted);
}
.stg-group .card,
.stg-card { margin-bottom: .75rem; }

/* Footer zone for Sign out + destructive actions */
.stg-footer-zone {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.stg-signout-btn {
  width: 100%; margin-bottom: .75rem;
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 30%, transparent) !important;
}
.stg-danger-item .settings-item-title { color: var(--danger); }

/* ── 2FA state pill + nudge ──────────────────────────────────────────── */
.stg-2fa-state {
  display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0;
  padding: .25rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 800;
}
.stg-2fa-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.stg-2fa-state.is-on  { color: var(--success); background: var(--success-bg, color-mix(in srgb, var(--success) 14%, transparent)); }
.stg-2fa-state.is-off { color: var(--danger);  background: var(--danger-bg,  color-mix(in srgb, var(--danger) 12%, transparent)); }

.stg-2fa-nudge {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .75rem; padding: .85rem 1rem; border-radius: 14px;
  background: var(--warning-bg, color-mix(in srgb, var(--warning) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  color: var(--text);
}
.stg-2fa-nudge[hidden] { display: none; }
.stg-2fa-nudge > svg { width: 1.35rem; height: 1.35rem; color: var(--warning); flex-shrink: 0; }
.stg-2fa-nudge-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; font-size: .8125rem; }
.stg-2fa-nudge-text strong { font-size: .875rem; }
.stg-2fa-nudge-btn { width: auto !important; flex: 0 0 auto; padding: .55rem 1rem !important; min-height: 40px; }

/* ── KYC: fields, helper text, inline errors ─────────────────────────── */
.kyc-field .form-label { display: block; margin-bottom: .3rem; }
.kyc-field-hint { margin-top: .3rem; font-size: .75rem; color: var(--muted); line-height: 1.35; }
.kyc-field-error { font-size: .75rem; font-weight: 600; color: var(--danger); line-height: 1.35; }
.kyc-field-error:empty { display: none; }
.kyc-field.has-error .form-input { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent); }
.kyc-field.has-error .kyc-field-hint { display: none; }
.kyc-field.has-error .kyc-field-error { margin-top: .3rem; }
.kyc-field.is-valid .form-input { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.kyc-label-context { display: none; } /* legacy doubled labels */

/* SVG document icons */
.kyc-doctype-icon { display: flex; align-items: center; justify-content: center; color: var(--brand); }
.kyc-doctype-icon svg { width: 2rem; height: 2rem; }
.kyc-doctype-card.selected .kyc-doctype-icon { color: var(--brand-dark, var(--brand)); }

/* Upload actions: camera + file */
.kyc-upload-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }
.kyc-upload-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; width: 100%; }
.kyc-upload-actions svg { width: 1.05rem; height: 1.05rem; }

/* What happens next */
.kyc-next-eta {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .6rem; padding: .3rem .7rem; border-radius: 999px;
  background: var(--brand-light); color: var(--brand-dark, var(--brand));
  font-size: .75rem; font-weight: 700;
}
.kyc-next-eta svg { width: .9rem; height: .9rem; }
.kyc-next-meanwhile { text-align: center; font-size: .8125rem; color: var(--muted); margin: .5rem 0 0; }
.kyc-next-home { margin-top: 1rem; width: 100%; }
.kyc-status-title:focus { outline: none; }

/* Small kickers follow the same sentence-case convention */
.kyc-progress-kicker,
.kyc-review-section-label,
.kyc-field .form-label { text-transform: none; letter-spacing: 0; }