/* ===== Source: aldeapath-system.css ===== */
/* ============================================================
   aldeapath-system.css — Aldeapath unified design system
   Load LAST. This is the single source of truth for shared
   visual tokens; feature styles consume these values.
   ============================================================ */

/* ── 1A. CANONICAL DESIGN TOKENS ─────────────────────────────
   Keep the existing aliases below available to feature styles,
   while exposing one semantic vocabulary for future modules. */
:root {
  /* Brand — preserve the established AldeaPath teal + navy identity. */
  --color-brand:       #00796b;
  --color-brand-accent:#00c9b7;
  --color-on-brand:    #ffffff;
  --color-brand-navy:  #1a3560;
  --color-brand-hover: #00695c;
  --color-brand-soft:  #e8f5f3;
  --color-brand-rgb:   0, 121, 107;

  /* Semantic status */
  --color-success: #34c759;
  --color-warning: #d97706;
  --color-error:   #ff3b30;
  --color-info:    #2563a6;

  /* Text and surfaces */
  --color-text-primary:   #1c1c1e;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #626b78;
  --color-surface:        #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-subtle: #f5f5f5;
  --color-border:         #eaeff6;
  --color-border-strong:  #d5dce6;
  --gold:         #c9a84c;
  --gold-soft:    #f5f0e0;

  /* Spacing — the shared 4px base scale. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --page-padding: clamp(12px, 4.267vw, 16px);

  /* Radius — controls, cards, sheets, then fully rounded pills. */
  --radius-control: 12px;
  --radius-card:    16px;
  --radius-sheet:   24px;
  --radius-xs:      8px;
  --radius-pill:    999px;
  --radius-xl:      var(--radius-sheet);

  /* Typography — Figtree is the application UI family. */
  --font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-supporting: 12px;
  --fs-body:       14px;
  --fs-component:  15px;
  --fs-section:    16px;
  --fs-page-title: 22px;
  --fs-financial:  28px;

  /* Controls and icons */
  --control-height: 44px;
  --touch-target:   44px;
  --icon-xs: 16px;
  --icon-sm: 18px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* Restrained elevation — surfaces and borders do most of the work. */
  --elevation-subtle: 0 1px 2px rgba(15, 23, 42, .04);
  --elevation-raised: 0 2px 8px rgba(15, 23, 42, .06);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, .09);
  --card-padding: var(--space-4);
  --card-gap: var(--space-3);
  --nav-h: 66px;
  --header-h: 60px;
}

[data-theme="dark"] {
  --color-brand:       #00c9b7;
  --color-brand-accent:#00c9b7;
  --color-on-brand:    #07101f;
  --color-brand-navy:  #8ce8dd;
  --color-brand-hover: #00a396;
  --color-brand-soft:  rgba(0, 201, 183, .16);
  --color-brand-rgb:   0, 201, 183;
  --color-success: #7be39a;
  --color-warning: #f2c46d;
  --color-error:   #ffaaa4;
  --color-info:    #78b7dc;
  --color-text-primary:   #f5fbfa;
  --color-text-secondary: #d6e7e4;
  --color-text-muted:     #9db3b0;
  --color-surface:        #14243a;
  --color-surface-raised: #14243a;
  --color-surface-subtle: #0d1b30;
  --color-border:         rgba(255, 255, 255, .12);
  --color-border-strong:  rgba(255, 255, 255, .20);
  --gold: #d8bd6b;
  --gold-soft: rgba(201, 168, 76, .14);
  --elevation-subtle: 0 1px 3px rgba(0, 0, 0, .30);
  --elevation-raised: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .40);
}

/* Shared aliases: legacy selectors and new modules resolve to the same tokens. */
:root,
[data-theme="dark"] {
  --brand:        var(--color-brand);
  --brand-dark:   var(--color-brand-navy);
  --brand-light:  var(--color-brand-soft);
  --brand-hover:  var(--color-brand-hover);
  --brand-rgb:    0, 201, 183;
  --brand-bg:     var(--color-brand-soft);
  --brand-shadow: 0 4px 18px rgba(var(--brand-rgb), .16);
  --bg:            var(--color-surface-subtle);
  --surface:       var(--color-surface);
  --surface-2:     var(--color-surface-subtle);
  --card:          var(--color-surface-raised);
  --card-bg:       var(--color-surface-raised);
  --input-bg:      var(--color-surface);
  --border:        var(--color-border);
  --border-strong: var(--color-border-strong);
  --text:          var(--color-text-primary);
  --text-2:        var(--color-text-secondary);
  --muted:         var(--color-text-muted);
  --success:        var(--color-success);
  --success-bg:     #f0fdf4;
  --success-border: #bbf7d0;
  --warning:        var(--color-warning);
  --warning-bg:     #fffbeb;
  --warning-border: #fde68a;
  --danger:         var(--color-error);
  --danger-bg:      #fef2f2;
  --danger-border:  #fecaca;
  --info:           var(--color-info);
  --info-bg:        #eff6ff;
  --info-border:    #bfdbfe;
  --sp-1: var(--space-1);
  --sp-2: var(--space-2);
  --sp-3: var(--space-3);
  --sp-4: var(--space-4);
  --sp-5: var(--space-5);
  --sp-6: var(--space-6);
  --sp-8: 32px;
  --sp-10: 40px;
  --radius-sm: var(--radius-control);
  --radius:    var(--radius-card);
  --radius-lg: var(--radius-sheet);
  --font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: var(--fs-supporting);
  --fs-sm: 14px;
  --fs-md: var(--fs-body);
  --fs-lg: var(--fs-section);
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --shadow-xs: var(--elevation-subtle);
  --shadow-sm: var(--elevation-raised);
}

[data-theme="dark"] {
  --brand-shadow: 0 4px 18px rgba(0, 0, 0, .28);
  --success-bg: rgba(22, 163, 74, .15);
  --success-border: rgba(22, 163, 74, .30);
  --warning-bg: rgba(217, 119, 6, .15);
  --warning-border: rgba(217, 119, 6, .30);
  --danger-bg: rgba(220, 38, 38, .15);
  --danger-border: rgba(220, 38, 38, .30);
  --info-bg: rgba(37, 99, 166, .18);
  --info-border: rgba(37, 99, 166, .35);
}

/* ── 1B. GLOBAL BASE ───────────────────────────────────────── */
:where(html, body) { font-family: var(--font-sans); }
body {
  font-size: var(--fs-body);
  line-height: 1.45;
}
:where(button, input, select, textarea) { font-family: inherit; }
:where(h1) {
  font-size: var(--fs-page-title);
  font-weight: 700;
  line-height: 1.25;
}
:where(h2) {
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.3;
}
:where(h3) {
  font-size: var(--fs-component);
  font-weight: 600;
  line-height: 1.35;
}
:where(button, [role="button"], a.btn) {
  min-height: var(--touch-target);
  touch-action: manipulation;
}

/* ── 2. READABILITY FLOOR ──────────────────────────────────── */
/* Nothing supporting drops below 12px, and long labels are sentence case. */
.nav-tab-label,
.action-chip-label,
.portfolio-label,
.notif-panel-title,
.badge,
.status-badge,
.pill,
.chip,
.tv-ptab,
.kyc-step-label,
.section-label,
.card-label,
.form-label,
label,
small {
  font-size: max(var(--fs-xs), 0.75rem);
  letter-spacing: 0.01em;
}

.portfolio-label,
.section-label,
.card-label,
.kyc-step-label {
  text-transform: none;
  font-weight: 600;
  color: var(--muted);
}

/* Monospace reserved for figures that must align or be copied. */
.mono,
.tx-id,
.wallet-address,
.balance-value,
.amount-value,
[data-mono] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── 3. ONE CARD HIERARCHY ─────────────────────────────────── */
.card,
.panel,
.glass,
.sheet-card,
.info-card,
.stat-card,
.list-card,
.settings-card,
.security-row,
.kyc-card,
.deposit-method-card {
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  color: var(--text);
}

.card-body {
  padding: var(--card-padding);
}

.card > .card-body:only-child {
  min-width: 0;
}

.card :where(.card-title, .panel-title, .section-title) {
  color: var(--text);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.3;
}

.card :where(.card-subtitle, .card-meta, .panel-meta) {
  color: var(--muted);
  font-size: var(--fs-supporting);
  line-height: 1.45;
}

.card :where(button, a, [role="button"]):active,
.panel :where(button, a, [role="button"]):active,
.settings-item:active,
.support-hub-topic-btn:active,
.method-card:active,
.deposit-method-card:active,
.withdraw-method-card:active {
  transform: scale(.99);
}

.card-elevated,
.hero-portfolio {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Compact shared rows: one icon slot, one flexible detail column, one
   right-aligned value/status column. Content remains responsible for height. */
.settings-item,
.support-option,
.stg-about-row,
.stg-txn-row,
.txn-row {
  min-width: 0;
}

.settings-item,
.support-option,
.stg-about-row {
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  border-bottom-color: var(--border);
}

.settings-item-icon,
.support-option-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  border-radius: var(--radius-xs);
}

.settings-item-icon svg,
.support-option-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.settings-item-title,
.support-option-title,
.stg-about-text {
  font-size: var(--fs-body);
  line-height: 1.35;
}

.settings-item-sub,
.support-option-sub,
.stg-about-sub {
  font-size: var(--fs-supporting);
  line-height: 1.4;
}

/* Status surfaces use semantic colour as a quiet tint, never as a heavy
   decorative fill. */
.kyc-status-card,
.kyc-status-hero,
.kyc-status-note,
.stg-session-card,
.stg-sessions-note,
.stg-export-option-card,
.stg-export-includes,
.stg-delete-warning,
.stg-balance-warning {
  box-sizing: border-box;
  border-radius: var(--radius);
}

@media (max-width: 420px) {
  .card-body { padding: var(--space-4); }
  .kyc-status-card { padding: var(--space-4); }
  .settings-item,
  .support-option,
  .stg-about-row { padding-inline: var(--space-3); }
}

/* ── 4. ONE BUTTON SYSTEM ──────────────────────────────────── */
.btn,
.action-btn,
.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}

.btn,
.primary-btn {
  background: var(--brand-dark);
  color: #f5f0e0;
}
.btn:hover,
.primary-btn:hover { background: var(--brand); }

.secondary-btn,
.action-btn {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.secondary-btn:hover,
.action-btn:hover { background: var(--surface-2); }

.ghost-btn {
  background: transparent;
  color: var(--brand-dark);
}

.danger-btn {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}

.btn:disabled,
.primary-btn:disabled,
.secondary-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── 5. ONE INPUT SYSTEM ───────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
select,
textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-md);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
}

/* WebKit otherwise falls back to an underline-style native date control. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .7;
  cursor: pointer;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
::placeholder { color: var(--muted); opacity: 1; }

/* ── 6. ONE STATUS BADGE SYSTEM ────────────────────────────── */
/* Status is never colour alone — every badge carries a text label
   and an icon slot. */
.ap-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}
.ap-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ap-status--success  { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.ap-status--pending  { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.ap-status--failed,
.ap-status--danger   { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.ap-status--info,
.ap-status--processing { background: var(--info-bg);  color: var(--info);    border-color: var(--info-border); }

/* ── 7. DARK MODE HARDENING ────────────────────────────────── */
/* Legacy components that hard-code light surfaces. */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .sheet,
[data-theme="dark"] .sheet-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown,
[data-theme="dark"] .lang-menu,
[data-theme="dark"] .notif-panel,
[data-theme="dark"] .deposit-method-card,
[data-theme="dark"] .ann-card,
[data-theme="dark"] .chat-bubble,
[data-theme="dark"] .support-hub-faq,
[data-theme="dark"] .kyc-card,
[data-theme="dark"] .security-row,
[data-theme="dark"] .tv-panel,
[data-theme="dark"] .notification-item,
[data-theme="dark"] .legal-box {
  background: var(--surface) !important;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"] {
  background: var(--surface) !important;
}
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color:#0f172a"] {
  color: var(--text) !important;
}

/* ── 8. LABELLED NAVIGATION ────────────────────────────────── */
/* Mobile: bottom bar with 5 labelled destinations + More. */
.bottom-nav {
  background: var(--surface);
  border-top: 1px solid var(--border);
  gap: 0;
}
.nav-tab {
  min-height: 52px;
  padding: 6px 2px;
  gap: 3px;
  color: var(--muted);
}
.nav-tab.active { color: var(--brand-dark); }
[data-theme="dark"] .nav-tab.active { color: var(--brand); }
.nav-tab-label {
  font-weight: 600;
  text-transform: none;
  white-space: nowrap;
}

/* Overflow menu ("More") */
.ap-more-sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(110%);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  width: min(480px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-md);
  padding: var(--sp-3);
  z-index: 900;
  transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.ap-more-sheet.open { transform: translateX(-50%) translateY(0); }
.ap-more-sheet button {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: left;
}
.ap-more-sheet button:hover { background: var(--surface-2); }
.ap-more-backdrop {
  position: fixed; inset: 0;
  background: rgba(7, 20, 16, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 890;
}
.ap-more-backdrop.open { opacity: 1; pointer-events: auto; }

/* Desktop: persistent labelled sidebar, same labels as mobile. */
.ap-sidebar { display: none; }

@media (min-width: 1024px) {
  body { padding-left: 260px; }

  .ap-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    padding: var(--sp-5) var(--sp-4);
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 400;
  }
  .ap-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-2) var(--sp-5);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .ap-sidebar-brand img { width: 32px; height: 32px; }
  .ap-sidebar-brand span span { color: var(--brand); }

  .ap-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 44px;
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    font-size: var(--fs-md);
    font-weight: 600;
    text-align: left;
    width: 100%;
  }
  .ap-sidebar-link:hover { background: var(--surface-2); color: var(--text); }
  .ap-sidebar-link.active {
    background: var(--brand-light);
    color: var(--brand-dark);
  }
  [data-theme="dark"] .ap-sidebar-link.active { color: var(--text); }
  .ap-sidebar-link i { width: 18px; text-align: center; }

  .ap-sidebar-footer {
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.6;
  }

  .bottom-nav, .ap-more-sheet, .ap-more-backdrop { display: none !important; }
  .app-shell { max-width: 520px; }
}

/* ── 9. STATE MESSAGING ────────────────────────────────────── */
.ap-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  color: var(--muted);
}
.ap-state-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
.ap-state-body { font-size: var(--fs-sm); max-width: 34ch; line-height: 1.6; }
.ap-state-action { margin-top: var(--sp-3); }

/* Freshness stamp shown next to balances and market data. */
.ap-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ── 10. MOBILE INTERACTION SIZES ──────────────────────────── */
@media (max-width: 420px) {
  .action-row { gap: var(--sp-2); }
  .action-chip { min-height: 56px; }
  .wallet-address, .tx-id {
    word-break: break-all;
    font-size: var(--fs-xs);
    line-height: 1.5;
  }
}
button, [role="button"], .nav-tab, .action-chip, a.btn {
  min-height: 44px;
  touch-action: manipulation;
}
.notif-btn { min-width: 44px; min-height: 44px; }

/* OTP inputs — six clearly separated boxes, comfortable on 320px. */
.otp-input, .otp-box, input[data-otp] {
  width: clamp(40px, 13vw, 52px);
  height: clamp(48px, 15vw, 58px);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* ===== Source: aldeapath-polish.css ===== */
/* ============================================================
   aldeapath-polish.css — interaction & consistency pass
   Loaded LAST. Additive corrections only:
   · dot indicators, header touch targets, spacing scale,
     quick-action colours, nav contrast, skeletons, empty states.
   ============================================================ */

/* ── ONE SPACING + MOTION SYSTEM ───────────────────────────── */
:root {
  --ap-space-section: 24px;
  --ap-space-card: 16px;
  --ap-space-inner: 12px;
  --ap-gutter: var(--page-padding, 16px);

  --ap-dur-btn: 150ms;
  --ap-dur-card: 250ms;
  --ap-dur-modal: 300ms;
  --ap-dur-sheet: 350ms;
  --ap-ease: cubic-bezier(.32, .72, 0, 1);

  --ap-green: #16a34a;
  --ap-blue: #2563eb;
  --ap-orange: #ea580c;
  --ap-red: #dc2626;
  --ap-gray: #64748b;
}

/* Horizontal gutter floor — nothing touches the screen edge. */
.slide { padding-left: var(--ap-gutter); padding-right: var(--ap-gutter); }
.ann-viewport, .ann-dots { padding-left: 0; padding-right: 0; }

/* ── 1. CAROUSEL INDICATORS — small circular pagination dots ─ */
.ann-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 16px;
  margin-top: 12px;
  margin-bottom: 18px;       /* breathing room before quick actions */
  padding: 0;
  line-height: 0;
}

.ann-dots .ann-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  flex: 0 0 auto;
  border-radius: 50% !important;
  background: color-mix(in oklab, var(--ap-gray) 55%, transparent);
  opacity: .35;
  transform: none;
  box-shadow: none;
  transition: background-color 240ms var(--ap-ease, cubic-bezier(.4, 0, .2, 1)),
              opacity 240ms var(--ap-ease, cubic-bezier(.4, 0, .2, 1)),
              transform 240ms var(--ap-ease, cubic-bezier(.4, 0, .2, 1));
}

.ann-dots .ann-dot.ann-dot-active {
  background: var(--brand, var(--ap-blue));
  opacity: 1;
  transform: scale(1.25);
}

/* Side decorations on the cards read as artifacts — fold them
   into the card shadow instead. */
.ann-slide { box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .35); }
.ann-slide::before,
.ann-slide::after { display: none !important; }
.ann-slide-watermark svg { opacity: .10; }

/* ── 2. ACTIVITY / SLIDES — never leave a blank pane ───────── */
/* A slide that is display:none removes itself from the flex track
   and shifts every later slide, so translateX lands on empty space
   (the "frozen" Activity page). Slides stay in flow; hidden ones
   are collapsed visually, not removed. */
.slides-track > .slide { display: block !important; }
.slides-track[data-active="10"] { transform: translateX(-1000%); }
.slides-track[data-active="11"] { transform: translateX(-1100%); }

/* ── 3. HEADER — breathing room + 48px touch targets ───────── */
.app-header { padding-left: var(--ap-gutter); padding-right: var(--ap-gutter); }

.app-header .icon-btn,
.app-header button:not(.nav-tab),
.header-actions > * {
  min-width: 44px;
  min-height: 44px;
}

.header-actions,
.app-header .header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── 4. BALANCE CARD — eye toggle pinned top-right ─────────── */
.balance-card, .hero-card { position: relative; }

.balance-card .balance-toggle,
.hero-card .balance-toggle,
#balance-eye {
  position: absolute;
  top: var(--ap-space-inner);
  right: var(--ap-space-inner);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background var(--ap-dur-btn) ease;
}

/* ── 5. PROFILE — name/email rhythm ────────────────────────── */
.profile-name, .settings-name { margin-bottom: 6px; }
.profile-email, .settings-email { line-height: 1.4; }

/* ── 6. VERIFICATION BADGE — outline, not a heavy pill ─────── */
.verified-badge, .kyc-badge-verified, .badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ap-green) 55%, transparent);
  color: var(--ap-green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

/* ── 7. QUICK ACTIONS — colour-coded, recognisable ─────────── */
.quick-action .qa-icon,
.quick-actions button .qa-icon { transition: transform var(--ap-dur-btn) ease; }
.quick-action:active .qa-icon { transform: scale(.94); }

[data-action="deposit"]  .qa-icon,
.qa-deposit  .qa-icon { background: color-mix(in oklab, var(--ap-green) 14%, transparent);  color: var(--ap-green); }
[data-action="withdraw"] .qa-icon,
.qa-withdraw .qa-icon { background: color-mix(in oklab, var(--ap-orange) 14%, transparent); color: var(--ap-orange); }
[data-action="trade"]    .qa-icon,
.qa-trade    .qa-icon { background: color-mix(in oklab, var(--ap-blue) 14%, transparent);   color: var(--ap-blue); }
[data-action="history"]  .qa-icon,
.qa-history  .qa-icon { background: color-mix(in oklab, var(--ap-gray) 16%, transparent);   color: var(--ap-gray); }

/* ── 8. BOTTOM NAV — clear active vs inactive ──────────────── */
.bottom-nav .nav-tab {
  min-height: 48px;
  color: color-mix(in oklab, var(--muted, #64748b) 90%, transparent);
  opacity: .85;
  transition: color var(--ap-dur-btn) ease, opacity var(--ap-dur-btn) ease;
}

.bottom-nav .nav-tab.active {
  color: var(--brand, var(--ap-blue));
  opacity: 1;
  font-weight: 800;
}

.bottom-nav .nav-tab.active .nav-tab-icon { stroke-width: 2.4; transform: translateY(-1px); }
.bottom-nav .nav-tab .nav-tab-label { font-size: 12px; letter-spacing: .01em; }

/* ── 9. ONE ANIMATION SYSTEM ───────────────────────────────── */
button, .btn, .nav-tab, .txn-filter-btn { transition: all var(--ap-dur-btn) ease; }
.card, .ann-slide, .txn-row { transition: transform var(--ap-dur-card) var(--ap-ease), box-shadow var(--ap-dur-card) var(--ap-ease); }
.modal, .modal-content { transition: opacity var(--ap-dur-modal) var(--ap-ease), transform var(--ap-dur-modal) var(--ap-ease); }
.sheet, .bottom-sheet, .sheet-panel { transition: transform var(--ap-dur-sheet) var(--ap-ease); }

/* ── 10. SKELETON LOADING ──────────────────────────────────── */
.ap-skeleton {
  border-radius: 10px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--muted, #64748b) 12%, transparent) 25%,
    color-mix(in oklab, var(--muted, #64748b) 20%, transparent) 37%,
    color-mix(in oklab, var(--muted, #64748b) 12%, transparent) 63%);
  background-size: 400% 100%;
  animation: apShimmer 1.3s ease-in-out infinite;
}

.ap-skeleton-row { height: 64px; margin-bottom: 10px; }
.ap-skeleton-line { height: 12px; margin-bottom: 8px; }

@keyframes apShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-skeleton { animation: none; }
}

/* ── 11. EMPTY STATES ──────────────────────────────────────── */
.ap-empty {
  text-align: center;
  padding: 40px var(--ap-space-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ap-empty-art {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  background: color-mix(in oklab, var(--brand, #2563eb) 10%, transparent);
  color: var(--brand, #2563eb);
  font-size: 26px;
}

.ap-empty-title { font-size: 15px; font-weight: 800; color: var(--text, #0f172a); }
.ap-empty-text  { font-size: 13px; color: var(--muted, #64748b); line-height: 1.55; max-width: 34ch; }

.ap-empty-cta {
  margin-top: 12px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: var(--brand, #2563eb);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity var(--ap-dur-btn) ease, transform var(--ap-dur-btn) ease;
}

.ap-empty-cta:active { transform: scale(.97); }

/* ===== Source: activity-fix.css ===== */
/*
 * Activity / transaction history interaction fixes.
 *
 * The app intentionally locks the document viewport on mobile and gives each
 * slide its own scroll surface. These rules make that contract explicit for
 * Activity, including iOS momentum scrolling and safe-area spacing.
 */
#slide-history {
  position: relative;
  z-index: 1;
  min-height: 0;
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-bottom: calc(var(--nav-h, 68px) + env(safe-area-inset-bottom, 0px) + 24px) !important;
}

#slide-history .txn-filter-row {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface, #fff);
  padding-top: 4px;
  padding-bottom: 10px;
}

#txn-list {
  min-height: 180px;
  position: relative;
  isolation: isolate;
}

#txn-list .txn-row {
  min-height: 64px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.txn-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 32px 20px;
  text-align: center;
}

.txn-state-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand, #2563eb) 10%, transparent);
  color: var(--brand, #2563eb);
  font-size: 24px;
}

.txn-state-title {
  color: var(--text, #0f172a);
  font-size: 15px;
  font-weight: 800;
}

.txn-state-text {
  max-width: 34ch;
  color: var(--muted, #64748b);
  font-size: 13px;
  line-height: 1.55;
}

.txn-state-action {
  min-height: 44px;
  margin-top: 8px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--brand, #2563eb);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  touch-action: manipulation;
}

.txn-state-action:active {
  transform: scale(.97);
}

.txn-loading {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0;
}

.txn-loading-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.txn-loading-icon,
.txn-loading-copy div,
.txn-loading-copy span,
.txn-loading-amount div,
.txn-loading-amount span {
  display: block;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--border, #e2e8f0) 80%, transparent) 25%,
    color-mix(in srgb, #fff 70%, var(--border, #e2e8f0)) 50%,
    color-mix(in srgb, var(--border, #e2e8f0) 80%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: txnSkeleton 1.35s ease-in-out infinite;
}

.txn-loading-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
}

.txn-loading-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.txn-loading-copy div { width: 45%; height: 11px; }
.txn-loading-copy span { width: 65%; height: 9px; }

.txn-loading-amount {
  display: flex;
  flex: 0 0 72px;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.txn-loading-amount div { width: 64px; height: 11px; }
.txn-loading-amount span { width: 42px; height: 9px; }

@keyframes txnSkeleton {
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .txn-loading-icon,
  .txn-loading-copy div,
  .txn-loading-copy span,
  .txn-loading-amount div,
  .txn-loading-amount span {
    animation: none;
  }
}
/* ── TRANSACTION ROW LAYOUT ───────────────────────────────────
 * The row markup emitted by transaction.js (.txn-row > .txn-icon,
 * .txn-mid, .txn-right) had no layout rules in any stylesheet, so the
 * Activity list rendered as tall unstyled stacked text blocks. These
 * rules restore the intended compact list row.
 */
#txn-list .txn-row,
#home-transactions .txn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border, #eaeff6);
}

#txn-list .txn-row:last-child,
#home-transactions .txn-row:last-child { border-bottom: 0; }

#txn-list .txn-row:active,
#home-transactions .txn-row:active {
  background: color-mix(in srgb, var(--brand, #2563eb) 6%, transparent);
}

.txn-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
  font-size: 16px;
  line-height: 1;
}
.txn-icon.deposit  { background: var(--success-bg, #f0fdf4); }
.txn-icon.withdraw { background: var(--danger-bg,  #fef2f2); }

.txn-mid {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.txn-type {
  color: var(--text, #0f172a);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.25;
}
.txn-date {
  color: var(--muted, #64748b);
  font-size: var(--fs-supporting);
  line-height: 1.3;
}
.txn-ref {
  overflow: hidden;
  color: var(--muted, #64748b);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: .85;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.txn-right {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.txn-amount {
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.txn-amount.deposit  { color: var(--success, #16a34a); }
.txn-amount.withdraw { color: var(--danger,  #dc2626); }

.txn-status {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg, #f1f5f9);
  color: var(--muted, #64748b);
  font-size: var(--fs-supporting);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: capitalize;
  white-space: nowrap;
}
.txn-status.completed,
.txn-status.paid       { background: var(--success-bg, #f0fdf4); color: var(--success, #16a34a); }
.txn-status.pending,
.txn-status.processing { background: var(--warning-bg, #fffbeb); color: var(--warning, #d97706); }
.txn-status.failed,
.txn-status.rejected,
.txn-status.cancelled  { background: var(--danger-bg, #fef2f2);  color: var(--danger,  #dc2626); }

/* ── FILTER PILLS: keep every control tappable on narrow phones ── */
#slide-history .txn-filter-row {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
#slide-history .txn-filter-row::-webkit-scrollbar { display: none; }

#slide-history .txn-filter-btn,
#slide-history .txn-export-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding-inline: 14px;
  touch-action: manipulation;
  white-space: nowrap;
}

/* ============================================================
   HOMEPAGE — MOBILE RECENT TRANSACTIONS
   Present the dashboard activity list as native mobile financial
   activity cards: icon, transaction identity/meta, right-aligned
   amount/status, and generous touch-friendly spacing.
   Scoped only to the homepage recent-transactions component.
   ============================================================ */
#slide-home .card:has(#recent-transactions-list) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

#slide-home #recent-transactions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 !important;
  background: transparent;
}

#slide-home #recent-transactions-list .txn-row {
  position: relative;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto 16px;
  align-items: center;
  column-gap: 11px;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 12px 12px 12px !important;
  border: 1px solid var(--border, #eaeff6) !important;
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .035);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

#slide-home #recent-transactions-list .txn-row::before {
  display: none;
}

#slide-home #recent-transactions-list .txn-row:active {
  background: var(--surface, #fff);
  transform: scale(.992);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}

/* Replace the emoji renderer visually with a consistent app icon. */
#slide-home #recent-transactions-list .txn-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
  box-sizing: border-box;
}

#slide-home #recent-transactions-list .txn-icon::before {
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

#slide-home #recent-transactions-list .txn-icon.deposit {
  background: var(--success-bg, #edf9f1);
  color: var(--success, #34c759);
}

#slide-home #recent-transactions-list .txn-icon.deposit::before {
  content: "\f063";
}

#slide-home #recent-transactions-list .txn-icon.withdraw {
  background: var(--danger-bg, #fff1f0);
  color: var(--danger, #ff3b30);
}

#slide-home #recent-transactions-list .txn-icon.withdraw::before {
  content: "\f062";
}

#slide-home #recent-transactions-list .txn-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 3px;
}

#slide-home #recent-transactions-list .txn-type {
  min-width: 0;
  overflow: hidden;
  color: var(--text, #1c1c1e);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#slide-home #recent-transactions-list .txn-date {
  color: var(--muted, #8e8e93);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

#slide-home #recent-transactions-list .txn-right {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  text-align: right;
}

#slide-home #recent-transactions-list .txn-amount {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

#slide-home #recent-transactions-list .txn-amount.deposit {
  color: var(--success, #34c759);
}

#slide-home #recent-transactions-list .txn-amount.withdraw {
  color: var(--danger, #ff3b30);
}

#slide-home #recent-transactions-list .txn-status {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted, #8e8e93);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

#slide-home #recent-transactions-list .txn-status.completed,
#slide-home #recent-transactions-list .txn-status.paid {
  color: var(--success, #34c759);
}

#slide-home #recent-transactions-list .txn-status.failed,
#slide-home #recent-transactions-list .txn-status.rejected,
#slide-home #recent-transactions-list .txn-status.cancelled {
  color: var(--danger, #ff3b30);
}

#slide-home #recent-transactions-list .txn-status.processing,
#slide-home #recent-transactions-list .txn-status.pending {
  color: var(--warning, #d97706);
}

#slide-home #recent-transactions-list .txn-row > div:last-child {
  display: grid !important;
  place-items: center;
  width: 16px;
  height: 32px;
  padding-left: 0 !important;
  color: #b0b7c3 !important;
}

#slide-home #recent-transactions-list .txn-row > div:last-child svg {
  width: 13px !important;
  height: 13px !important;
}

#slide-home .card:has(#recent-transactions-list) > div:last-child {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  padding: 0 !important;
  border-top: 0 !important;
}

#slide-home .card:has(#recent-transactions-list) > div:last-child .btn {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--border, #eaeff6);
  border-radius: 13px;
  background: var(--surface, #fff);
  color: var(--color-brand-navy, #1a3560);
  font-size: 12px !important;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}

#slide-home .card:has(#recent-transactions-list) > div:last-child .btn:active {
  transform: scale(.99);
}

/* Keep the layout comfortable on the smallest common phone widths. */
@media (max-width: 360px) {
  #slide-home #recent-transactions-list .txn-row {
    grid-template-columns: 36px minmax(0, 1fr) auto 13px;
    column-gap: 9px;
    min-height: 68px;
    padding: 10px !important;
    border-radius: 16px;
  }

  #slide-home #recent-transactions-list .txn-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex-basis: 36px;
  }

  #slide-home #recent-transactions-list .txn-amount {
    font-size: 13px;
  }
}

/* ===== Source: aldeapath-header.css ===== */
/* ============================================================================
   Aldeapath — Header component system
   ----------------------------------------------------------------------------
   Three (and only three) header variants exist in the app:

     1. .ap-header      PRIMARY   — logo + minimal actions. Only on primary
                                    navigation screens (Overview, Markets,
                                    Trade, Activity, More).
     2. .ap-pagehead    SECONDARY — back button + title (+ optional single
                                    action). Every sub-page / detail screen.
     3. .ap-modalhead   MODAL     — close/back + title, inside sheets & modals.

   Loaded AFTER aldeapath-system.css / aldeapath-polish.css so it wins.
   ========================================================================== */

:root {
  --ap-hd-h: 60px;              /* primary header height */
  --ap-hd-pad-x: var(--page-padding, 16px); /* single source of truth for L/R padding */
  --ap-hd-gap: var(--space-2, 8px);        /* spacing between action items */
  --ap-hd-tap: 44px;            /* minimum touch target */
  --ap-hd-logo: 30px;           /* logo mark size (was 40px) */
  --ap-hd-surface: var(--card, #fff);
  --ap-hd-border: var(--border, rgba(15, 23, 42, .08));
}

/* ─────────────────────────── 1. PRIMARY HEADER ─────────────────────────── */

.app-header,
.ap-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ap-hd-gap);
  min-height: var(--ap-hd-h);
  padding: 0 var(--ap-hd-pad-x);
  background: var(--ap-hd-surface);
  border-bottom: 1px solid var(--ap-hd-border);
  box-sizing: border-box;
}

/* Brand is the visual anchor — everything else is secondary. */
.app-header .header-brand,
.ap-header .header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-header .header-logo-img,
.ap-header .header-logo-img {
  width: var(--ap-hd-logo);
  height: var(--ap-hd-logo);
  flex-shrink: 0;
  object-fit: contain;
}

.app-header .header-brand > span,
.ap-header .header-brand > span {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Actions: evenly spaced, vertically centred, 44px targets. */
.app-header .header-controls,
.ap-header .header-controls {
  display: flex;
  align-items: center;
  gap: var(--ap-hd-gap);
  flex-shrink: 0;
  /* Optical alignment: icon buttons are wider than their glyph, so pull the
     last one back to keep the right padding visually equal to the left. */
  margin-right: -8px;
}

.app-header .header-controls .notif-btn,
.ap-header .header-controls .notif-btn,
.ap-hd-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ap-hd-tap);
  height: var(--ap-hd-tap);
  min-width: var(--ap-hd-tap);
  min-height: var(--ap-hd-tap);
  padding: 0;
  margin: 0 !important;          /* kill legacy inline margin-right hacks */
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text, #0f172a);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, transform .18s ease;
}

.app-header .header-controls .notif-btn:active,
.ap-hd-icon:active { transform: scale(.94); background: var(--muted-bg, rgba(15, 23, 42, .06)); }

.app-header .header-controls .notif-btn svg,
.ap-hd-icon svg { width: 21px; height: 21px; display: block; }

/* Badges sit on the glyph, not the 44px box edge. */
.app-header .header-controls .notif-badge,
.ap-hd-icon .notif-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  transform: translate(35%, -35%);
}

/* ── Overflow ("more") menu ── */
.ap-hd-overflow { position: relative; }

.ap-hd-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 4px;
  min-width: 224px;
  padding: 6px;
  background: var(--card, #fff);
  border: 1px solid var(--ap-hd-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .28);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.ap-hd-overflow.open .ap-hd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ap-hd-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text, #0f172a);
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ap-hd-menu-item:active { background: var(--muted-bg, rgba(15, 23, 42, .06)); }
.ap-hd-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.ap-hd-menu-item .ap-hd-menu-flag { font-size: 1.05rem; line-height: 1; }
.ap-hd-menu-item .notif-badge { position: static; margin-left: auto; transform: none; }
.ap-hd-menu-sep { height: 1px; margin: 6px 8px; background: var(--ap-hd-border); }
.ap-hd-menu-label {
  padding: 8px 12px 4px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
.ap-hd-menu-item.active { color: var(--brand-dark, var(--brand, #064e3b)); }

/* Unread dot on the overflow trigger when a hidden action needs attention. */
.ap-hd-overflow > .ap-hd-icon[data-ap-alert="1"]::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger, #ef4444);
  box-shadow: 0 0 0 2px var(--card, #fff);
}

/* ── Hide the primary header on secondary screens ── */
body.ap-secondary-page .app-header,
body.ap-secondary-page .ap-header { display: none !important; }

/* ────────────────────────── 2. SECONDARY HEADER ────────────────────────── */

.ap-pagehead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px var(--ap-hd-pad-x);
  margin: 0 0 14px;
  background: var(--ap-hd-surface);
  border-bottom: 1px solid var(--ap-hd-border);
  box-sizing: border-box;
}

.ap-pagehead.ap-pagehead-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(1.4) blur(8px);
}

.ap-pagehead-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ap-hd-tap);
  height: var(--ap-hd-tap);
  min-width: var(--ap-hd-tap);
  min-height: var(--ap-hd-tap);
  margin-left: -10px;            /* glyph optically flush with content padding */
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text, #0f172a);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, transform .18s ease;
}

.ap-pagehead-back:active { transform: scale(.94); background: var(--muted-bg, rgba(15, 23, 42, .06)); }
.ap-pagehead-back svg { width: 20px; height: 20px; display: block; }

.ap-pagehead-titles { min-width: 0; }

.ap-pagehead-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-pagehead-sub {
  margin-top: 1px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional contextual action — only ever one. */
.ap-pagehead-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--ap-hd-tap);
  min-height: var(--ap-hd-tap);
  margin-right: -8px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--brand-dark, var(--brand, #064e3b));
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ap-pagehead-action svg { width: 20px; height: 20px; }
.ap-pagehead:not(:has(.ap-pagehead-action)) { grid-template-columns: auto minmax(0, 1fr); }

/* Standalone secondary pages (notifications inbox) share the same anatomy. */
.nx-topbar.ap-pagehead { margin-bottom: 0; }
.nx-topbar.ap-pagehead .nx-title {
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-topbar.ap-pagehead .nx-icon-btn {
  width: var(--ap-hd-tap);
  height: var(--ap-hd-tap);
  min-width: var(--ap-hd-tap);
  min-height: var(--ap-hd-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -10px;
  border-radius: 12px;
  color: var(--text, #0f172a);
  text-decoration: none;
}
.nx-topbar.ap-pagehead .nx-text-btn {
  min-height: var(--ap-hd-tap);
  margin-right: -8px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--brand-dark, var(--brand, #064e3b));
  font-size: .82rem;
  font-weight: 700;
}

/* ──────────────────────────── 3. MODAL HEADER ──────────────────────────── */

.ap-modalhead,
.ann-detail-topbar,
.support-hub-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px var(--ap-hd-pad-x);
  box-sizing: border-box;
}

.ap-modalhead-title,
.ann-detail-topbar-title {
  min-width: 0;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-modalhead-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ap-hd-tap);
  height: var(--ap-hd-tap);
  min-width: var(--ap-hd-tap);
  min-height: var(--ap-hd-tap);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ap-modalhead-btn svg { width: 20px; height: 20px; }

/* Desktop: the sidebar owns navigation, so the primary header can breathe. */
@media (min-width: 900px) {
  :root { --ap-hd-pad-x: 22px; --ap-hd-gap: 12px; --ap-hd-logo: 32px; }
}

/* ── Support action promoted into the header bar (next to the bell) ────────
   Shares the .notif-btn geometry so both icons keep identical 44px targets,
   optical centring and badge placement. */
.app-header .header-controls .support-btn,
.ap-header .header-controls .support-btn {
  order: -1;                      /* support sits left of the bell */
}

.app-header .header-controls .support-btn svg,
.ap-header .header-controls .support-btn svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* Even, deliberate rhythm between the header actions. */
.app-header .header-controls,
.ap-header .header-controls { gap: 2px; }

/* Badges: identical anchor point on both icons, never clipped by the header. */
.app-header .header-controls .notif-badge,
.ap-header .header-controls .notif-badge {
  pointer-events: none;
  z-index: 2;
}

/* ===== Source: security-center.css ===== */
/* ══════════════════════════════════════════════════════════════════
   security-center.css — Aldeapath Security Center (2FA)
   Card-based security dashboard, guided setup wizard, recovery codes,
   trusted devices and activity timeline. Uses the existing settings
   design tokens (--brand, --card, --border, --muted, --success…) so it
   inherits light/dark automatically.
   ══════════════════════════════════════════════════════════════════ */

.sc-wrap { display: block; }

/* ── Status summary ─────────────────────────────────────────── */
.sc-status {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem 1.05rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--input-bg, #f8fafc);
}
.sc-status--on {
  background: linear-gradient(160deg, rgba(22, 163, 74, .10), rgba(22, 163, 74, 0));
  border-color: rgba(22, 163, 74, .28);
}
.sc-status--off {
  background: linear-gradient(160deg, rgba(217, 119, 6, .12), rgba(217, 119, 6, 0));
  border-color: rgba(217, 119, 6, .3);
}
.sc-status-top {
  display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem;
}
.sc-status-ico {
  width: 2.5rem; height: 2.5rem; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; background: var(--card); border: 1px solid var(--border);
}
.sc-status--on  .sc-status-ico { color: var(--success, #16a34a); }
.sc-status--off .sc-status-ico { color: #d97706; }
.sc-status-name { font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.sc-status-sub  { font-size: .75rem; color: var(--muted); margin-top: .12rem; line-height: 1.4; }

.sc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
}
.sc-cell {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: .6rem .7rem;
}
.sc-cell-label {
  font-size: .75rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .22rem;
  display: flex; align-items: center; gap: .3rem;
}
.sc-cell-value { font-size: .82rem; font-weight: 700; line-height: 1.35; }
.sc-cell-value small { display: block; font-size: .75rem; font-weight: 600; color: var(--muted); margin-top: .1rem; }

/* ── Section titles ─────────────────────────────────────────── */
.sc-title {
  font-size: .75rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  margin: 1.35rem 0 .6rem; display: flex; align-items: center; gap: .4rem;
}
.sc-title:first-child { margin-top: 0; }

/* ── Method / management cards ───────────────────────────────── */
.sc-card {
  border: 1.5px solid var(--border); border-radius: 16px;
  padding: .9rem .95rem; margin-bottom: .6rem; background: var(--card);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.sc-card--pick { cursor: pointer; }
.sc-card--pick:hover { border-color: var(--brand, #2563eb); }
.sc-card--rec {
  border-color: rgba(37, 99, 235, .45);
  box-shadow: 0 6px 20px -14px rgba(37, 99, 235, .8);
}
.sc-card--sel {
  border-color: var(--brand, #2563eb);
  background: var(--brand-bg, rgba(37, 99, 235, .06));
}
.sc-card-head { display: flex; align-items: flex-start; gap: .7rem; }
.sc-card-ico {
  width: 2.15rem; height: 2.15rem; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; background: var(--input-bg, #f1f5f9);
  border: 1px solid var(--border); color: var(--brand, #2563eb);
}
.sc-card-body { flex: 1; min-width: 0; }
.sc-card-title {
  font-size: .87rem; font-weight: 750; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.sc-card-desc { font-size: .75rem; color: var(--muted); line-height: 1.5; margin-top: .22rem; }
.sc-card-meta { font-size: .75rem; color: var(--muted); margin-top: .3rem; }
.sc-card-actions {
  display: flex; gap: .45rem; margin-top: .8rem; flex-wrap: wrap;
}
.sc-card-actions .sc-btn { flex: 1 1 auto; }

/* ── Badges ─────────────────────────────────────────────────── */
.sc-badge {
  font-size: .75rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: .16rem .45rem;
  border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.sc-badge--rec  { color: var(--brand, #2563eb); background: var(--brand-bg, #eff6ff); border-color: rgba(37, 99, 235, .35); }
.sc-badge--on   { color: var(--success, #16a34a); background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .3); }
.sc-badge--off  { color: var(--muted); background: var(--input-bg, #f1f5f9); border-color: var(--border); }
.sc-badge--warn { color: #d97706; background: rgba(217, 119, 6, .1); border-color: rgba(217, 119, 6, .3); }

/* ── Buttons ────────────────────────────────────────────────── */
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .62rem .8rem; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 700;
  border: 1.5px solid var(--border); background: var(--card); color: var(--text);
  transition: opacity .18s, border-color .18s, transform .12s;
}
.sc-btn:active:not(:disabled) { transform: scale(.985); }
.sc-btn:disabled { opacity: .55; cursor: not-allowed; }
.sc-btn--primary { background: var(--brand, #2563eb); border-color: var(--brand, #2563eb); color: #fff; }
.sc-btn--primary:hover:not(:disabled) { opacity: .93; }
.sc-btn--danger { color: var(--danger, #dc2626); border-color: rgba(220, 38, 38, .35); }
.sc-btn--ghost { border-color: transparent; color: var(--muted); }
.sc-btn--ghost:hover { color: var(--text); }
.sc-btn--full { width: 100%; }
.sc-btn-row { display: flex; gap: .5rem; margin-top: .9rem; }
.sc-btn-row .sc-btn { flex: 1; }

/* ── Wizard stepper ─────────────────────────────────────────── */
.sc-steps { display: flex; align-items: center; gap: .35rem; margin-bottom: 1.1rem; }
.sc-step { flex: 1; }
.sc-step-bar {
  height: 4px; border-radius: 999px; background: var(--border);
  transition: background .25s;
}
.sc-step.done .sc-step-bar, .sc-step.active .sc-step-bar { background: var(--brand, #2563eb); }
.sc-step-label {
  font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-top: .32rem;
}
.sc-step.active .sc-step-label { color: var(--brand, #2563eb); }

.sc-h {
  font-size: 1rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .3rem;
}
.sc-p { font-size: .78rem; color: var(--muted); line-height: 1.55; margin: 0 0 1rem; }

/* ── Numbered instructions ──────────────────────────────────── */
.sc-steps-list { margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: scstep; }
.sc-steps-list li {
  counter-increment: scstep; position: relative;
  padding: 0 0 .55rem 1.75rem; font-size: .78rem; line-height: 1.5;
}
.sc-steps-list li::before {
  content: counter(scstep);
  position: absolute; left: 0; top: 0;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--brand-bg, #eff6ff); color: var(--brand, #2563eb);
  font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ── QR block ───────────────────────────────────────────────── */
.sc-qr {
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem; border: 1px dashed var(--border); border-radius: 16px;
  background: #fff; margin-bottom: .8rem;
}
.sc-qr img { width: 168px; height: 168px; border-radius: 10px; display: block; }
.sc-key {
  display: flex; align-items: center; gap: .5rem;
  background: var(--input-bg, #f8fafc); border: 1px solid var(--border);
  border-radius: 12px; padding: .55rem .65rem; margin-bottom: .9rem;
}
.sc-key code {
  flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  word-break: break-all; color: var(--text);
}

/* ── OTP boxes ──────────────────────────────────────────────── */
.sc-otp { display: flex; gap: .4rem; justify-content: space-between; margin-bottom: .6rem; }
.sc-otp input {
  flex: 1 1 0; min-width: 0; height: 3.1rem;
  text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem; font-weight: 800; color: var(--text);
  background: var(--input-bg, #f8fafc);
  border: 1.5px solid var(--border); border-radius: 12px;
  outline: none; transition: border-color .16s, box-shadow .16s;
  -moz-appearance: textfield;
}
.sc-otp input::-webkit-outer-spin-button,
.sc-otp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-otp input:focus {
  border-color: var(--brand, #2563eb);
  box-shadow: 0 0 0 3px var(--brand-bg, rgba(37, 99, 235, .12));
}
.sc-otp.error input { border-color: var(--danger, #dc2626); }

.sc-err {
  display: none; font-size: .75rem; color: var(--danger, #dc2626);
  background: var(--danger-bg, #fef2f2); border-radius: 10px;
  padding: .5rem .65rem; margin-bottom: .7rem; line-height: 1.45;
}
.sc-err.show { display: block; }
.sc-note {
  font-size: .75rem; color: var(--muted); line-height: 1.5;
  background: var(--input-bg, #f8fafc); border: 1px solid var(--border);
  border-radius: 12px; padding: .6rem .7rem; margin-bottom: .9rem;
}

/* ── Recovery codes ─────────────────────────────────────────── */
.sc-codes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .9rem; }
.sc-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-align: center;
  padding: .5rem .25rem; background: var(--input-bg, #f8fafc);
  border: 1px dashed var(--border); border-radius: 10px;
}
.sc-confirm {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .78rem; line-height: 1.45; cursor: pointer;
  user-select: none; margin: .2rem 0 .9rem;
}
.sc-confirm input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: var(--brand, #2563eb); }

/* ── Device / activity rows ─────────────────────────────────── */
.sc-row {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem .1rem; border-bottom: 1px solid var(--border);
}
.sc-row:last-child { border-bottom: none; }
.sc-row-ico {
  width: 2rem; height: 2rem; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
  background: var(--input-bg, #f1f5f9); color: var(--brand, #2563eb);
}
.sc-row-ico--ok   { color: var(--success, #16a34a); background: rgba(22, 163, 74, .1); }
.sc-row-ico--warn { color: #d97706; background: rgba(217, 119, 6, .12); }
.sc-row-body { flex: 1; min-width: 0; }
.sc-row-title {
  font-size: .81rem; font-weight: 700; display: flex;
  align-items: center; gap: .4rem; flex-wrap: wrap;
}
.sc-row-meta { font-size: .75rem; color: var(--muted); line-height: 1.5; margin-top: .15rem; }
.sc-row-act {
  background: none; border: none; padding: .25rem .3rem; cursor: pointer;
  font-family: inherit; font-size: .75rem; font-weight: 700;
  color: var(--danger, #dc2626);
}
.sc-row-act:disabled { color: var(--muted); cursor: not-allowed; }

/* ── Empty / loading ────────────────────────────────────────── */
.sc-empty { text-align: center; padding: 1.5rem .5rem; }
.sc-empty-ico {
  width: 3.5rem; height: 3.5rem; border-radius: 18px; margin: 0 auto .9rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: var(--brand-bg, #eff6ff); color: var(--brand, #2563eb);
}
.sc-empty-title { font-size: .95rem; font-weight: 800; margin-bottom: .35rem; }
.sc-empty-sub { font-size: .78rem; color: var(--muted); line-height: 1.55; margin-bottom: 1.1rem; }
.sc-loading {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.4rem .2rem; color: var(--muted); font-size: .82rem;
}

.sc-back {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: none; padding: 0 0 .8rem; cursor: pointer;
  font-family: inherit; font-size: .75rem; font-weight: 700; color: var(--muted);
}
.sc-back:hover { color: var(--text); }

@media (max-width: 380px) {
  .sc-grid { grid-template-columns: 1fr; }
  .sc-otp input { height: 2.75rem; font-size: 1.05rem; }
}

@media print {
  body * { visibility: hidden; }
  .sc-print, .sc-print * { visibility: visible; }
  .sc-print { position: absolute; inset: 0; padding: 2rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Refinement layer — 2FA management screen (visual hierarchy pass)
   Adds the status hero, standardised badges/buttons and section
   rhythm. Purely presentational; no behaviour depends on these rules.
   ══════════════════════════════════════════════════════════════════ */

/* ── Status hero (primary focal point) ──────────────────────── */
.sc-hero {
  position: relative;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.6rem 1.15rem 1.15rem;
  margin: .15rem 0 1.9rem;
  background: var(--card);
}
.sc-hero--on {
  background: linear-gradient(180deg, rgba(22, 163, 74, .11), rgba(22, 163, 74, 0) 62%), var(--card);
  border-color: rgba(22, 163, 74, .3);
}
.sc-hero-ico {
  width: 3.1rem; height: 3.1rem; border-radius: 18px; margin: 0 auto .85rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; background: rgba(22, 163, 74, .12);
  border: 1px solid rgba(22, 163, 74, .28);
}
.sc-hero-eyebrow {
  font-size: .75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.sc-hero-status {
  font-size: 1.28rem; font-weight: 800; letter-spacing: -.025em;
  line-height: 1.25; margin: .4rem 0 0; color: var(--text);
}
.sc-hero-sub {
  font-size: .8rem; line-height: 1.5; color: var(--muted);
  margin: .4rem auto 0; max-width: 30ch;
}

.sc-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem; margin-top: 1.35rem; text-align: left;
}
.sc-stat {
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 4.05rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: .7rem .75rem;
}
.sc-stat-label {
  font-size: .75rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .35rem;
}
.sc-stat-value {
  font-size: .82rem; font-weight: 750; line-height: 1.35;
  letter-spacing: -.01em; color: var(--text);
}
.sc-stat-value--danger { color: var(--danger, #dc2626); }

.sc-hero-foot {
  font-size: .75rem; font-weight: 600; color: var(--muted);
  opacity: .8; margin-top: .95rem;
}

/* ── Section rhythm ─────────────────────────────────────────── */
.sc-section { margin-bottom: 2rem; }
.sc-section:last-of-type { margin-bottom: 0; }
.sc-section .sc-title { margin: 0 0 .75rem; }
.sc-title {
  font-size: .75rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}

/* ── Cards ──────────────────────────────────────────────────── */
.sc-card { padding: 1rem; margin-bottom: .7rem; border-width: 1px; }
.sc-card:last-child { margin-bottom: 0; }
.sc-card--flush { padding: .2rem 1rem; }
.sc-card-head { gap: .8rem; }
.sc-card-title {
  font-size: .875rem; font-weight: 750; line-height: 1.35; gap: .35rem;
}
.sc-card-desc { font-size: .755rem; line-height: 1.5; margin-top: .3rem; }
.sc-card-actions { gap: .5rem; margin-top: .95rem; flex-wrap: nowrap; }

/* ── Badges (single consistent shape) ───────────────────────── */
.sc-badge {
  font-size: .75rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: .22rem .5rem;
  line-height: 1; border-radius: 999px; border-width: 1px;
}
.sc-badge--role {
  color: var(--muted); background: var(--input-bg, #f1f5f9);
  border-color: var(--border);
}

/* ── Buttons (clear hierarchy, equal sizing) ────────────────── */
.sc-card-actions .sc-btn,
.sc-btn--full {
  min-height: 2.5rem;
}
.sc-btn { font-size: .765rem; padding: .6rem .85rem; border-width: 1px; }
.sc-btn--secondary {
  background: var(--card); color: var(--text); border-color: var(--border);
  font-weight: 700;
}
.sc-btn--secondary:hover:not(:disabled) { border-color: var(--muted); }
.sc-btn--quiet-danger {
  flex: 0 0 auto;
  background: transparent; border-color: transparent;
  color: var(--danger, #dc2626); font-weight: 700;
}
.sc-btn--quiet-danger:hover:not(:disabled) {
  background: var(--danger-bg, #fef2f2);
}

/* ── Close button in the modal header ───────────────────────── */
#sc-modal .stg-modal-close {
  width: 2.5rem; height: 2.5rem;
  margin-right: -.55rem;
  border-radius: 50%;
  background: transparent;
  font-size: .82rem;
  position: relative;
}
#sc-modal .stg-modal-close::before {
  content: '';
  position: absolute; inset: .5rem;
  border-radius: 50%;
  background: var(--input-bg, #f1f5f9);
  transition: background .15s;
}
#sc-modal .stg-modal-close i { position: relative; z-index: 1; }
#sc-modal .stg-modal-close:active::before { background: var(--border); }
#sc-modal .stg-modal-title { font-size: .95rem; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 360px) {
  .sc-hero { padding: 1.35rem .9rem 1rem; }
  .sc-hero-status { font-size: 1.14rem; }
  .sc-stats { grid-template-columns: 1fr; gap: .45rem; }
  .sc-stat { min-height: 0; }
  .sc-card-actions { flex-wrap: wrap; }
  .sc-card-actions .sc-btn { flex: 1 1 100%; }
}
@media (min-width: 480px) {
  .sc-hero { padding: 1.9rem 1.5rem 1.3rem; }
  .sc-stats { gap: .65rem; }
}

/* ===== Source: balance-card.css ===== */
/* ═══════════════════════════════════════════════════════════════
   balance-card.css — AldeaPath Signature Portfolio Balance Card
   "The Ledger Plate" · v4 (Step 10 — rectangular landscape plate)

   Identity: a warm paper plate in landscape proportion, one deep
   forest edge rule, ghosted contour arcs from the AldeaPath mark,
   and an engraved serif figure. Premium through restraint.

   Load LAST. Owns the entire .hero-portfolio.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --apbc-paper:      #fdfdfc;
  --apbc-paper-2:    #f6f6f3;
  --apbc-line:       rgba(19, 32, 27, .08);
  --apbc-line-soft:  rgba(19, 32, 27, .055);
  --apbc-forest:     #14392c;
  --apbc-forest-2:   #2f6b4f;
  --apbc-ink:        #0f1411;
  --apbc-ink-2:      #4a5450;
  --apbc-ink-3:      #8d968f;
  --apbc-pos:        #1c6b45;
  --apbc-neg:        #b4442f;
  --apbc-radius:     var(--radius-card, 16px);
  --apbc-ease:       cubic-bezier(.22, .68, .24, 1);
  --apbc-serif:      "Playfair Display", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --apbc-sans:       "Figtree", ui-sans-serif, system-ui, sans-serif;
}

[data-theme="dark"] {
  --apbc-paper:      #121815;
  --apbc-paper-2:    #0d1310;
  --apbc-line:       rgba(240, 246, 242, .085);
  --apbc-line-soft:  rgba(240, 246, 242, .055);
  --apbc-forest:     #3e8b66;
  --apbc-forest-2:   #17402f;
  --apbc-ink:        #f4f7f5;
  --apbc-ink-2:      #aab5af;
  --apbc-ink-3:      #75817b;
  --apbc-pos:        #4fbd8a;
  --apbc-neg:        #e8836c;
}

/* ── PLATE ──────────────────────────────────────────────────────
   Landscape proportion is deliberate: horizontal padding runs wide,
   vertical rhythm stays tight so the plate never squares up.       */
.hero-portfolio,
[data-theme="dark"] .hero-portfolio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: var(--sp-4, 16px) var(--sp-4, 16px) 0;
  padding: 15px 24px 15px 27px;
  border-radius: var(--apbc-radius);
  border: 1px solid var(--apbc-line);
  text-align: left;
  color: var(--apbc-ink);
  background:
    radial-gradient(120% 95% at 88% -18%,
      color-mix(in srgb, var(--apbc-forest) 5%, transparent) 0%, transparent 62%),
    linear-gradient(174deg, var(--apbc-paper) 0%, var(--apbc-paper-2) 100%);
  box-shadow: var(--elevation-raised, 0 2px 8px rgba(15, 23, 42, .06));
  transition: box-shadow .4s var(--apbc-ease);
}

[data-theme="dark"] .hero-portfolio {
  box-shadow: var(--elevation-raised, 0 2px 8px rgba(0, 0, 0, .35));
}

/* Neutralise decorations inherited from older stylesheets. */
.hero-portfolio::before,
[data-theme="dark"] .hero-portfolio::before,
.hero-portfolio::after,
[data-theme="dark"] .hero-portfolio::after {
  content: none !important;
  display: none !important;
}

/* The forest edge — AldeaPath's "path", reduced to a single mark. */
.apbc-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--apbc-forest) 0%,
    var(--apbc-forest-2) 78%,
    color-mix(in srgb, var(--apbc-forest-2) 45%, transparent) 100%);
}

/* Ghosted contour arcs — felt more than seen. */
.apbc-contour {
  position: absolute;
  right: -30%;
  bottom: -92%;
  width: 96%;
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background-image:
    radial-gradient(closest-side circle, transparent 61%, rgba(20, 57, 44, .026) 62%, transparent 63.2%),
    radial-gradient(closest-side circle, transparent 71%, rgba(20, 57, 44, .022) 72%, transparent 73.2%),
    radial-gradient(closest-side circle, transparent 81%, rgba(20, 57, 44, .018) 82%, transparent 83.2%),
    radial-gradient(closest-side circle, transparent 91%, rgba(20, 57, 44, .014) 92%, transparent 93.2%);
}

[data-theme="dark"] .apbc-contour {
  background-image:
    radial-gradient(closest-side circle, transparent 61%, rgba(140, 220, 185, .046) 62%, transparent 63.2%),
    radial-gradient(closest-side circle, transparent 71%, rgba(140, 220, 185, .036) 72%, transparent 73.2%),
    radial-gradient(closest-side circle, transparent 81%, rgba(140, 220, 185, .03) 82%, transparent 83.2%),
    radial-gradient(closest-side circle, transparent 91%, rgba(140, 220, 185, .022) 92%, transparent 93.2%);
}

.hero-portfolio > *:not(.apbc-edge):not(.apbc-contour):not(.apbc-chart) { position: relative; z-index: 2; }

/* ── 1. EYEBROW ROW ─────────────────────────────────────────── */
.apbc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.apbc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.hero-portfolio .portfolio-label,
[data-theme="dark"] .hero-portfolio .portfolio-label {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--apbc-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apbc-dot {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--apbc-forest);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--apbc-forest) 12%, transparent);
}

/* ── 2. VISIBILITY CONTROL — clean inline control, no resting chrome ─
   NOTE: legacy style.css sets .balance-eye-btn { width:2rem; border-radius:50%;
   background:… } which collapsed this control into a circle. Every one of
   those properties is explicitly reset here.                            */
.hero-portfolio .balance-eye-btn,
[data-theme="dark"] .hero-portfolio .balance-eye-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  padding: 4px 2px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  background: transparent;
  color: var(--apbc-ink-2);
  font-family: var(--apbc-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: color .22s var(--apbc-ease), opacity .22s var(--apbc-ease);
}

/* Invisible 44×44 touch target — never paints anything. */
.hero-portfolio .balance-eye-btn::after,
.hero-portfolio .balance-eye-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 44px;
  min-width: 44px;
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: auto;
}

.hero-portfolio .balance-eye-btn::before { content: none; }

.hero-portfolio .balance-eye-btn svg {
  width: .9rem !important;
  height: .9rem !important;
  flex-shrink: 0;
  transition: opacity .2s var(--apbc-ease);
}

/* Interaction-only feedback — nothing visible at rest. */
.hero-portfolio .balance-eye-btn:hover,
.hero-portfolio .balance-eye-btn:focus-visible,
.hero-portfolio .balance-eye-btn:active {
  color: var(--apbc-forest);
  background: transparent;
  outline: none;
}

.hero-portfolio .balance-eye-btn:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--apbc-forest) 38%, transparent);
}

.hero-portfolio .balance-eye-btn:active { opacity: .7; }

.hero-portfolio.is-masked .balance-eye-btn {
  color: var(--apbc-forest);
  background: transparent;
}

/* ── 3. THE FIGURE — the single dominant element ─────────────── */
.hero-portfolio .balance-row {
  margin: 10px 0 0;
  min-height: 2.6rem;
}

/* Source node kept for data binding; the spans carry the type. */
.hero-portfolio .balance-value,
[data-theme="dark"] .hero-portfolio .balance-value,
.hero-portfolio #hero-balance {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.apbc-figure {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--apbc-serif);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--apbc-ink);
  line-height: .95;
  transition: opacity .28s var(--apbc-ease), filter .28s var(--apbc-ease);
}

.apbc-sym {
  align-self: flex-start;
  margin-top: .18em;
  margin-right: .07em;
  font-size: clamp(.95rem, 3.9vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--apbc-ink-3);
}

.apbc-int {
  font-size: clamp(2.35rem, 12.6vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -.028em;
  text-rendering: optimizeLegibility;
}

.apbc-dec {
  margin-left: .05em;
  font-size: clamp(.9rem, 3.7vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--apbc-ink-3);
}

/* Masked state — quiet, same baseline. */
.hero-portfolio.is-masked .apbc-sym,
.hero-portfolio.is-masked .apbc-dec { display: none; }

.hero-portfolio.is-masked .apbc-int {
  font-family: var(--apbc-sans);
  font-size: clamp(1.9rem, 9vw, 2.35rem);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--apbc-ink-3);
}

/* Crossfade around the existing toggle. */
.hero-portfolio.is-swapping .apbc-figure,
.hero-portfolio.is-swapping .apbc-equiv {
  opacity: 0;
  filter: blur(4px);
}

/* First-load shimmer. */
.hero-portfolio.is-loading .apbc-figure {
  color: transparent;
  border-radius: 8px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--apbc-ink) 5%, transparent) 0%,
    color-mix(in srgb, var(--apbc-ink) 11%, transparent) 45%,
    color-mix(in srgb, var(--apbc-ink) 5%, transparent) 90%) 0 0 / 220% 100%;
  animation: apbc-shimmer 1.5s linear infinite;
}

.hero-portfolio.is-loading .apbc-figure * { color: transparent; }

@keyframes apbc-shimmer { to { background-position: -220% 0; } }

/* ── 4. EQUIVALENCE LINE ────────────────────────────────────── */
.apbc-equiv {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 9px;
  min-width: 0;
  transition: opacity .28s var(--apbc-ease), filter .28s var(--apbc-ease);
}

.hero-portfolio .portfolio-btc,
[data-theme="dark"] .hero-portfolio .portfolio-btc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: var(--apbc-sans);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .012em;
  font-variant-numeric: tabular-nums;
  color: var(--apbc-ink-2);
}

.hero-portfolio .portfolio-btc::before {
  content: "₿";
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  color: var(--apbc-forest);
}

/* ── 5. RULE + FOOTER ───────────────────────────────────────── */
.apbc-rule {
  height: 1px;
  margin: 13px 0 11px;
  background: linear-gradient(90deg,
    var(--apbc-line) 0%,
    var(--apbc-line-soft) 68%,
    transparent 100%);
}

.apbc-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
}

.apbc-foot-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.apbc-updated { align-items: flex-end; text-align: right; }

.apbc-foot-label {
  font-family: var(--apbc-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apbc-ink-3);
  white-space: nowrap;
}

.apbc-foot-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--apbc-sans);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--apbc-ink-2);
  white-space: nowrap;
}

.apbc-foot-value i { font-size: .75rem; opacity: .65; }

.apbc-growth .apbc-foot-value { color: var(--apbc-pos); }
.apbc-growth.is-negative .apbc-foot-value { color: var(--apbc-neg); }

.apbc-growth-abs { font-weight: 500; opacity: .72; }

/* When growth has no data, the freshness stamp owns the row. */
.apbc-growth[hidden] { display: none; }
.apbc-growth[hidden] + .apbc-updated { grid-column: 1 / -1; }

/* ── 6. MOBILE + WIDE + MOTION ──────────────────────────────── */
@media (max-width: 359px) {
  .hero-portfolio { padding: 14px 18px 14px 21px; border-radius: 16px; }
  .hero-portfolio .balance-row { margin-top: 9px; min-height: 2.4rem; }
  .apbc-rule { margin: 11px 0 10px; }
  .apbc-foot { grid-template-columns: 1fr; align-items: start; gap: 12px; }
  .apbc-updated { align-items: flex-start; text-align: left; }
  .hero-portfolio .portfolio-label { letter-spacing: .13em; }
  .hero-portfolio .balance-eye-btn .apbc-eye-label { display: none; }
  .hero-portfolio .balance-eye-btn { padding: 4px 2px; }
}

@media (min-width: 480px) {
  .hero-portfolio { padding: 18px 30px 17px 34px; }
  .apbc-int { font-size: 3rem; }
}

@media (min-width: 768px) {
  .hero-portfolio { padding: 22px 42px 20px 48px; border-radius: 20px; }
  .hero-portfolio .balance-row { margin-top: 12px; }
  .apbc-int { font-size: 3.5rem; }
  .apbc-sym { font-size: 1.3rem; }
  .apbc-dec { font-size: 1.25rem; }
  .apbc-equiv { margin-top: 11px; }
  .apbc-rule { margin: 16px 0 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-portfolio,
  .hero-portfolio .balance-eye-btn,
  .apbc-figure,
  .apbc-equiv { transition: none; }
  .hero-portfolio.is-loading .apbc-figure { animation: none; }
}

/* ── 7. PERFORMANCE SLOT (v5) ────────────────────────────────────
   The footer's left column always carries a value now, so the plate
   reads as a balanced two-column ledger instead of a hole. The trend
   figure sits in a hairline chip; the absolute amount stays quiet. */
.apbc-growth .apbc-foot-value {
  gap: 8px;
  color: var(--apbc-ink);
}

.apbc-foot-lead {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .005em;
  line-height: 1.15;
  border: 1px solid transparent;
}

.apbc-growth.is-positive .apbc-foot-lead {
  color: var(--apbc-pos);
  border-color: color-mix(in srgb, var(--apbc-pos) 26%, transparent);
  background: color-mix(in srgb, var(--apbc-pos) 9%, transparent);
}

.apbc-growth.is-negative .apbc-foot-lead {
  color: var(--apbc-neg);
  border-color: color-mix(in srgb, var(--apbc-neg) 26%, transparent);
  background: color-mix(in srgb, var(--apbc-neg) 9%, transparent);
}

.apbc-growth.is-neutral .apbc-foot-lead {
  padding: 0;
  border-radius: 0;
  border-color: transparent;
  background: none;
  color: var(--apbc-ink-2);
  font-variant-numeric: tabular-nums;
}

.apbc-growth .apbc-growth-abs {
  font-size: .78rem;
  font-weight: 500;
  color: var(--apbc-ink-3);
  opacity: 1;
}

.apbc-foot-muted {
  color: var(--apbc-ink-3);
  letter-spacing: .12em;
  font-weight: 600;
}

/* Privacy is one decision: masking the figure masks the money below. */
.hero-portfolio.is-masked .apbc-growth .apbc-foot-lead {
  border-color: transparent;
  background: none;
}

/* Footer columns share one baseline and never collide. */
.apbc-foot { align-items: center; }
.apbc-foot-col { gap: 7px; }

@media (max-width: 359px) {
  .apbc-foot { align-items: start; }
  .apbc-growth .apbc-foot-value { flex-wrap: wrap; }
}

/* ── 8. PERFORMANCE CHART (v7) ───────────────────────────────────
   The chart is a background layer of the plate: crisp brand-green
   line, defined circular markers, whisper-thin vertical guides and a
   barely-there area wash so the balance stays the loudest element. */
.apbc-chart {
  position: absolute;
  inset: 0;
  z-index: 1;                       /* above the paper, below the content */
  pointer-events: none;
  color: var(--apbc-pos);
  padding: 42px 18px 34px 22px;
}

.apbc-spark-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: .9;
  transition: opacity .35s ease;
}

/* Until real history arrives the same curve is drawn from a neutral
   preview series — same treatment, marginally quieter. */
.apbc-chart.is-neutral-preview .apbc-spark-svg { opacity: .72; }

.apbc-spark-grid line {
  stroke: currentColor;
  stroke-opacity: .22;
  stroke-width: 1;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}

.apbc-spark-line {
  stroke: var(--apbc-pos);
  stroke-opacity: .95;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: apbc-spark-draw 1.1s cubic-bezier(.4, 0, .2, 1) forwards;
}

.apbc-spark-area {
  opacity: 0;
  animation: apbc-spark-rise .9s ease .25s forwards;
}

/* Clean circular markers on every data point. */
.apbc-spark-points circle {
  fill: var(--apbc-paper);
  stroke: var(--apbc-pos);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.apbc-spark-dot  { fill: var(--apbc-pos); opacity: 1; }
.apbc-spark-halo { fill: var(--apbc-pos); opacity: .14; }

@keyframes apbc-spark-draw { to { stroke-dashoffset: 0; } }
@keyframes apbc-spark-rise { to { opacity: 1; } }

/* Defensive legacy states. */
.apbc-chart.is-empty .apbc-spark-svg,
.apbc-chart.is-flat  .apbc-spark-svg { display: none; }

/* Privacy: masking the balance blurs the shape of the curve too. */
.hero-portfolio.is-masked .apbc-spark-svg {
  opacity: .18;
  filter: blur(2px);
}

@media (min-width: 768px) {
  .apbc-chart { padding: 48px 26px 38px 30px; }
}

@media (max-width: 480px) {
  .apbc-chart { padding: 38px 12px 30px 16px; }
  .apbc-spark-points circle { stroke-width: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  .apbc-spark-svg { transition: none; }
  .apbc-spark-line { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .apbc-spark-area { animation: none; opacity: 1; }
}

/* ── 9. LAYOUT REPAIR (v8) ───────────────────────────────────────
   The chart used to be a full-bleed background layer, so the curve,
   its markers and its dotted guides ran straight through the balance,
   the BTC equivalence and the footer labels. It now lives in its own
   contained strip between the equivalence line and the hairline rule:
   one calm brand-green curve, no visual collisions, text always first. */
.hero-portfolio {
  display: flex;
  flex-direction: column;
}

.hero-portfolio > .apbc-head    { order: 1; }
.hero-portfolio > .balance-row  { order: 2; }
.hero-portfolio > .apbc-equiv   { order: 3; }
.hero-portfolio > .apbc-chart   { order: 4; }
.hero-portfolio > .apbc-rule    { order: 5; }
.hero-portfolio > .apbc-foot    { order: 6; }

/* The plate's own decorations stay behind everything. */
.hero-portfolio > .apbc-edge,
.hero-portfolio > .apbc-contour { order: 0; }

/* Chart becomes an in-flow strip instead of a background overlay. */
.apbc-chart {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
  height: 46px;
  padding: 4px 11px 4px 0;   /* keeps the end marker off the plate edge */
  margin: 14px 0 0;
  overflow: visible;
}

.apbc-spark-svg { opacity: 1; }
.apbc-chart.is-neutral-preview .apbc-spark-svg { opacity: .55; }

/* Restraint: one line, one end marker, one soft wash. The dotted
   guides and per-point circles added noise without adding meaning. */
.apbc-spark-grid,
.apbc-spark-points { display: none !important; }

.apbc-spark-line { stroke-width: 2; stroke-opacity: 1; }

.hero-portfolio.is-masked .apbc-spark-svg { opacity: .2; filter: blur(2px); }

/* Rhythm around the new strip. */
.apbc-rule { margin: 14px 0 12px; }

@media (min-width: 768px) {
  .apbc-chart { height: 62px; margin-top: 18px; }
  .apbc-rule  { margin: 18px 0 14px; }
}

@media (max-width: 359px) {
  .apbc-chart { height: 40px; margin-top: 12px; }
}


/* ── 10. LANDSCAPE PLATE + SMOOTH MARK (v9) ──────────────────────
   Three corrections: the plate stops growing vertically and instead
   uses the full width of the viewport; the chart moves beside the
   figure on anything wider than a phone; and the bitcoin mark becomes
   a real vector coin instead of a font glyph. */

/* Wider, shallower plate — it now reaches close to both screen edges. */
.hero-portfolio,
[data-theme="dark"] .hero-portfolio {
  margin: var(--sp-3, 12px) 10px 0;
  padding: 13px 18px 13px 20px;
}

/* Tighter vertical rhythm throughout. */
.hero-portfolio .balance-row { margin: 6px 0 0; min-height: 0; }
.apbc-equiv { margin-top: 6px; }
.apbc-rule  { margin: 10px 0 9px; }
.apbc-foot-col { gap: 5px; }

.apbc-chart { height: 40px; margin: 8px 0 0; padding: 2px 10px 2px 0; }

/* ≥560px: the chart sits to the right of the figure, so the card
   spreads sideways instead of stacking taller. */
@media (min-width: 560px) {
  .hero-portfolio,
  [data-theme="dark"] .hero-portfolio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 40%);
    grid-template-areas:
      "head  head"
      "value chart"
      "equiv chart"
      "rule  rule"
      "foot  foot";
    align-items: center;
    column-gap: 26px;
    row-gap: 0;
    padding: 16px 28px 15px 32px;
  }

  .hero-portfolio > .apbc-head   { grid-area: head; }
  .hero-portfolio > .balance-row { grid-area: value; }
  .hero-portfolio > .apbc-equiv  { grid-area: equiv; align-self: start; }
  .hero-portfolio > .apbc-chart  { grid-area: chart; height: 58px; min-height: 0; margin: 0; align-self: center; }
  .hero-portfolio > .apbc-rule   { grid-area: rule; }
  .hero-portfolio > .apbc-foot   { grid-area: foot; }

  /* Decorations stay absolute against the plate itself: giving them a
     grid area would inset them by the plate's padding and push the
     forest edge rule on top of the text. */
  .hero-portfolio > .apbc-edge,
  .hero-portfolio > .apbc-contour { grid-area: auto; }

  .hero-portfolio .balance-row { margin: 8px 0 0; }
  .apbc-rule { margin: 12px 0 10px; }
}

@media (min-width: 1024px) {
  .hero-portfolio,
  [data-theme="dark"] .hero-portfolio {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 46%);
    padding: 18px 34px 17px 38px;
    column-gap: 40px;
  }
  .hero-portfolio > .apbc-chart { height: 68px; }
  .apbc-int { font-size: 3.2rem; }
}

/* The curve itself: softer wash, calmer stroke, no hard corners. */
.apbc-spark-line {
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.apbc-spark-halo { opacity: .1; }
.apbc-spark-dot  { r: 2.8; }

/* ── Bitcoin mark: vector coin, crisply anti-aliased at any size ── */
.hero-portfolio .portfolio-btc::before {
  content: "";
  display: inline-block;
  width: .95em;
  height: .95em;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--apbc-forest);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.546zm-6.35-4.613c.24-1.59-.974-2.45-2.64-3.03l.54-2.153-1.315-.33-.525 2.107c-.345-.087-.705-.167-1.064-.25l.526-2.127-1.32-.33-.54 2.165c-.285-.067-.565-.132-.84-.2l-.003-.015-1.815-.45-.35 1.407s.975.225.955.238c.535.135.63.486.615.766l-.614 2.46c.037.01.084.023.138.043l-.14-.035-.86 3.446c-.66.162-.135.325-.48.24l-.955-.24-.348 1.5 1.812.45c.334.087.66.176.98.26l-.545 2.19 1.32.325.54-2.164c.36.098.71.19 1.05.273l-.538 2.15 1.32.33.545-2.19c2.24.427 3.93.257 4.64-1.774.57-1.637-.03-2.58-1.217-3.196.854-.193 1.5-.76 1.68-1.93zm-3.01 4.22c-.404 1.64-3.157.75-4.05.53l.72-2.9c.896.23 3.757.67 3.33 2.37zm.41-4.24c-.37 1.49-2.662.735-3.405.55l.67-2.674c.744.18 3.13.52 2.735 2.124z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.546zm-6.35-4.613c.24-1.59-.974-2.45-2.64-3.03l.54-2.153-1.315-.33-.525 2.107c-.345-.087-.705-.167-1.064-.25l.526-2.127-1.32-.33-.54 2.165c-.285-.067-.565-.132-.84-.2l-.003-.015-1.815-.45-.35 1.407s.975.225.955.238c.535.135.63.486.615.766l-.614 2.46c.037.01.084.023.138.043l-.14-.035-.86 3.446c-.66.162-.135.325-.48.24l-.955-.24-.348 1.5 1.812.45c.334.087.66.176.98.26l-.545 2.19 1.32.325.54-2.164c.36.098.71.19 1.05.273l-.538 2.15 1.32.33.545-2.19c2.24.427 3.93.257 4.64-1.774.57-1.637-.03-2.58-1.217-3.196.854-.193 1.5-.76 1.68-1.93zm-3.01 4.22c-.404 1.64-3.157.75-4.05.53l.72-2.9c.896.23 3.757.67 3.33 2.37zm.41-4.24c-.37 1.49-2.662.735-3.405.55l.67-2.674c.744.18 3.13.52 2.735 2.124z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: translateY(.02em);
}


/* ── 11. HORIZONTAL SLIM PLATE (v10) ─────────────────────────────
   The card now stretches horizontally at every width: the figure
   and its equivalence stay on the left, the chart strip lives
   beside them on the right, and the ledger footer compresses into
   one slim row. Vertical padding and the type scale are trimmed so
   the plate reads wide and low instead of tall. */
.hero-portfolio,
[data-theme="dark"] .hero-portfolio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(84px, 30%);
  grid-template-areas:
    "head  head"
    "value chart"
    "equiv chart"
    "rule  rule"
    "foot  foot";
  align-items: center;
  column-gap: 16px;
  row-gap: 0;
  margin: 10px 8px 0;
  padding: 12px 16px 12px 18px;
}

.hero-portfolio > .apbc-head   { grid-area: head; }
.hero-portfolio > .balance-row { grid-area: value; margin: 5px 0 0; }
.hero-portfolio > .apbc-equiv  { grid-area: equiv; align-self: start; margin-top: 4px; }
.hero-portfolio > .apbc-chart  { grid-area: chart; height: 44px; min-height: 0; margin: 0; align-self: center; padding: 2px 8px 2px 0; }
.hero-portfolio > .apbc-rule   { grid-area: rule; margin: 9px 0 8px; }
.hero-portfolio > .apbc-foot   { grid-area: foot; gap: 10px; }

/* Decorations stay absolute against the plate itself. */
.hero-portfolio > .apbc-edge,
.hero-portfolio > .apbc-contour { grid-area: auto; }

/* Slightly trimmed figure keeps the plate slim without losing presence. */
.apbc-int { font-size: clamp(2.05rem, 10.4vw, 2.55rem); }
.apbc-sym { font-size: clamp(.9rem, 3.4vw, 1.05rem); }
.apbc-dec { font-size: clamp(.85rem, 3.2vw, 1rem); }
.hero-portfolio.is-masked .apbc-int { font-size: clamp(1.7rem, 7.6vw, 2rem); }

.apbc-foot { align-items: center; gap: 10px; }
.apbc-foot-col { gap: 3px; }
.apbc-foot-label { font-size: .75rem; letter-spacing: .14em; }
.apbc-foot-value { font-size: .75rem; }

@media (min-width: 480px) {
  .hero-portfolio,
  [data-theme="dark"] .hero-portfolio {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 34%);
    column-gap: 22px;
    padding: 13px 22px 13px 26px;
  }
  .hero-portfolio > .apbc-chart { height: 50px; }
}

@media (min-width: 768px) {
  .hero-portfolio,
  [data-theme="dark"] .hero-portfolio {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 40%);
    column-gap: 34px;
    padding: 16px 30px 15px 34px;
  }
  .hero-portfolio > .apbc-chart { height: 60px; }
  .hero-portfolio > .balance-row { margin: 7px 0 0; }
  .apbc-int { font-size: 2.9rem; }
  .apbc-sym { font-size: 1.15rem; }
  .apbc-dec { font-size: 1.1rem; }
}

@media (max-width: 359px) {
  .hero-portfolio,
  [data-theme="dark"] .hero-portfolio {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 28%);
    column-gap: 10px;
    padding: 10px 12px 10px 15px;
  }
  .hero-portfolio > .apbc-chart { height: 38px; }
}

/* ===== Source: theme-consistency.css ===== */
/* ============================================================
   theme-consistency.css — final dashboard theme bridge

   Older dashboard components use different legacy token names.
   This bridge keeps those selectors on the canonical design-system
   tokens without defining a second palette.
   ============================================================ */

:root,
[data-theme="dark"] {
  /* Compatibility aliases for older feature styles. Canonical values live in
     aldeapath-system.css and are intentionally not redefined here. */
  --brand: var(--color-brand);
  --brand-dark: var(--color-brand-navy);
  --brand-light: var(--color-brand-soft);
  --brand-hover: var(--color-brand-hover);
  --brand-rgb: var(--color-brand-rgb);
  --brand-bg: var(--color-brand-soft);
  --card-bg: var(--color-surface-raised);
  --bg-2: var(--color-surface-subtle);
  --input-bg: var(--color-surface);
  --accent: var(--color-brand);
  --ap-emerald: var(--color-brand);
  --ap-surface: var(--color-surface);
  --ap-card: var(--color-surface-raised);
  --ap-border: var(--color-border);
  --ap-text: var(--color-text-primary);
  --ap-text-muted: var(--color-text-muted);
  color-scheme: light;
}

[data-theme="dark"] { color-scheme: dark; }

/* Brand accents that were previously hard-coded blue. */
.avatar:not(.stg-avatar-photo) {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}

.header-brand span { color: var(--brand-dark); }
.header-brand { color: var(--brand-dark); }
.header-brand span span,
.ripple-brand-text span { color: var(--brand); }

.kyc-zone-icon {
  background: var(--brand-light) !important;
}

.kyc-zone-icon i,
.kyc-zone-hint {
  color: var(--brand) !important;
}

.hero-card {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #00695c 55%, var(--brand) 100%) !important;
}

.btn-primary,
.primary-btn,
.wd-submit-btn:not(:disabled),
.action-chip.primary,
.quick-amount-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--color-on-brand, #fff);
}

.btn-primary:hover,
.primary-btn:hover,
.wd-submit-btn:not(:disabled):hover {
  background: var(--brand-hover);
}

.btn-primary,
.primary-btn,
.wd-submit-btn:not(:disabled) {
  box-shadow: 0 6px 18px rgba(var(--brand-rgb), .2);
}

/* ===== Source: dashboard-navigation-fixes.css ===== */
/* Dashboard navigation and trade-tab repairs. */

#slide-trade {
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(0, 201, 183, .11), transparent 58%),
    var(--bg);
}

.trade-shell {
  min-height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 2.5rem);
}

.trade-shell-card {
  width: min(100%, 36rem);
  padding: clamp(1.4rem, 6vw, 2.5rem);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.trade-shell-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  margin: 0 auto 1.1rem;
  border-radius: 1rem;
  color: var(--brand);
  background: var(--brand-light);
  font-size: 1.25rem;
}

.trade-shell-kicker {
  color: var(--brand);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.trade-shell-card h1 {
  margin-top: .45rem;
  color: var(--text);
  font-size: clamp(1.2rem, 4vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -.03em;
}

.trade-shell-copy {
  max-width: 28rem;
  margin: .55rem auto 1.4rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}

.trade-shell-skeleton {
  display: grid;
  gap: .55rem;
  width: min(100%, 19rem);
  margin: 0 auto 1.5rem;
}

.trade-skeleton-line {
  display: block;
  height: .65rem;
  border-radius: 99px;
  background: linear-gradient(100deg, var(--border) 20%, var(--brand-light) 45%, var(--border) 70%);
  background-size: 220% 100%;
  animation: trade-shell-shimmer 1.6s ease-in-out infinite;
}

.trade-skeleton-line--wide { width: 100%; }
.trade-skeleton-line--medium { width: 76%; }
.trade-skeleton-line--short { width: 48%; }

@keyframes trade-shell-shimmer {
  to { background-position: -220% 0; }
}

.trade-shell-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem 1rem;
  border: 1px solid var(--brand);
  border-radius: var(--radius-control);
  background: var(--brand);
  color: var(--color-on-brand, #fff);
  font-size: .78rem;
  font-weight: 750;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.trade-shell-link:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  transform: translateY(-1px);
}

.trade-shell-link:focus-visible,
.bottom-nav .nav-tab:focus-visible,
.ap-sidebar-link:focus-visible {
  outline: 3px solid var(--brand, #00796b);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .trade-skeleton-line { animation: none; }
  .trade-shell-link { transition: none; }
}