/* ============================================================================
   Camelot Portal — Design Tokens v1
   "Royal Court meets Fintech" premium design system
   ============================================================================
   Single source of truth for colors, spacing, typography, shadows, radii.
   Imported BEFORE any other CSS in index.html.
*/

:root {
  /* ─────────── COLORS — primary palette ─────────── */
  --c-navy:          #0d1724;    /* main dark backgrounds */
  --c-navy-soft:     #1a2b3c;    /* secondary dark surfaces */
  --c-ink:           #2c1810;    /* deep text on light surfaces */
  --c-ink-700:       rgba(44, 24, 16, 0.78);
  --c-ink-500:       rgba(44, 24, 16, 0.55);
  --c-ink-300:       rgba(44, 24, 16, 0.32);

  --c-gold:          #C9A84C;    /* primary accent — royal gold */
  --c-gold-deep:     #9c7a2a;    /* hover / pressed states */
  --c-gold-glow:     rgba(201, 168, 76, 0.18);
  --c-gold-soft:     #E8D5A0;    /* highlights, illuminations */

  --c-bone:          #F5EFE0;    /* base surface — parchment-like */
  --c-bone-warm:     #FFF8E7;    /* hover / card-top gradient */
  --c-bone-deep:     #E8DAB2;    /* divider, subtle accent */

  --c-velvet:        #4A2E1B;    /* deep brown — rare deep accent */
  --c-accent-red:    #e28374;    /* errors, warnings, AVALØN governance */
  --c-success:       #10b981;
  --c-warning:       #F7931A;

  /* ─────────── SEMANTIC TOKENS — map to use ─────────── */
  --bg-page:         var(--c-bone);
  --bg-surface:      #ffffff;
  --bg-surface-warm: linear-gradient(135deg, #ffffff 0%, var(--c-bone-warm) 100%);
  --bg-dark:         var(--c-navy);

  --fg-primary:      var(--c-ink);
  --fg-secondary:    var(--c-ink-700);
  --fg-muted:        var(--c-ink-500);
  --fg-on-dark:      #ffffff;
  --fg-accent:       var(--c-gold-deep);

  --border-subtle:   rgba(201, 168, 76, 0.18);
  --border-default:  rgba(201, 168, 76, 0.32);
  --border-strong:   var(--c-gold);

  /* ─────────── SPACING — 4px-grid ─────────── */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ─────────── RADIUS — hierarchical ─────────── */
  --radius-xs: 4px;     /* tiny chips, badges */
  --radius-sm: 6px;     /* buttons, inputs */
  --radius-md: 10px;    /* default cards */
  --radius-lg: 16px;    /* hero cards, modals */
  --radius-xl: 24px;    /* large surfaces */
  --radius-pill: 9999px;

  /* ─────────── SHADOWS — gold-tinted depth ─────────── */
  /* Subtle layer — for resting cards */
  --shadow-xs: 0 1px 2px rgba(13, 23, 36, 0.04);
  --shadow-sm: 0 2px 8px -2px rgba(13, 23, 36, 0.08),
               0 1px 2px rgba(13, 23, 36, 0.04);
  /* Medium — hover state */
  --shadow-md: 0 8px 24px -8px rgba(13, 23, 36, 0.12),
               0 2px 4px rgba(13, 23, 36, 0.06);
  /* Premium with gold glow */
  --shadow-gold-soft: 0 4px 16px -4px var(--c-gold-glow),
                      0 2px 4px rgba(13, 23, 36, 0.06);
  --shadow-gold-glow: 0 8px 32px -8px rgba(201, 168, 76, 0.35),
                      0 4px 12px -2px rgba(13, 23, 36, 0.1);
  /* Inner highlight — geblazen glas */
  --shadow-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ─────────── TYPOGRAPHY ─────────── */
  --font-display: 'Inter', sans-serif;               /* Caleb & Brown style: alles Inter */
  --font-serif:   'Inter', sans-serif;               /* idem — geen serif meer in body/headings */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — modular 1.25 ratio */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* Letter spacing — premium = subtle adjustments */
  --ls-display-lg: -0.01em;   /* large serif gets tighter */
  --ls-display-sm: 0.04em;    /* small serif gets wider */
  --ls-body:       0.005em;
  --ls-button:     0.08em;    /* UPPERCASE buttons */
  --ls-caption:    0.06em;

  /* Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ─────────── MOTION ─────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.78, 0);
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant:80ms;
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;

  /* ─────────── Z-INDEX ─────────── */
  --z-base:    1;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-popup:   2000;
  --z-toast:   3000;
}

/* ============================================================================
   PREMIUM COMPONENT PATTERNS
   ============================================================================
*/

/* ─────────── CARD — premium with gold glow ─────────── */
.cm-card {
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm), var(--shadow-inner-light);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.cm-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-soft), var(--shadow-inner-light);
  border-color: var(--border-default);
}
.cm-card.cm-card-premium {
  border-top: 1.5px solid var(--c-gold);
  box-shadow: var(--shadow-gold-soft), var(--shadow-inner-light);
}

/* ─── DARK CARD variant — Caleb & Brown style voor focused flows (swap, trade) ───
 * Witte inputs zitten als rounded rectangles binnen dit donker card.
 * Tekst is wit. Borders zijn rgba-wit. */
.cm-card.cm-card-dark,
.cb-card-dark {
  background: #0a1929;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: 0 8px 24px rgba(13, 23, 41, 0.12);
}
.cm-card.cm-card-dark *,
.cb-card-dark * {
  color: inherit;
}
.cm-card.cm-card-dark .cm-card-title,
.cb-card-dark .cb-title {
  color: #fff;
  font-weight: var(--fw-semibold);
}
.cm-card.cm-card-dark .cm-input,
.cb-card-dark .cb-input {
  background: #fff;
  color: var(--c-ink);
  border: none;
  border-radius: 10px;
  padding: 14px 18px;
}

/* ─── Page title pattern: "Action with Brand" (coral + navy) ───
 * Gebruik:
 *   <h1 class="cb-title-pattern">Swap with <span>Camelot</span></h1>
 * Of inline: <span class="cb-accent">Hello</span> {naam}!
 */
.cb-title-pattern {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--c-accent-red);
  letter-spacing: var(--ls-display-sm);
}
.cb-title-pattern span {
  color: var(--c-ink);
}
.cb-accent {
  color: var(--c-accent-red);
}

/* ─── Primary coral CTA — Caleb & Brown's "Place Order" button-stijl ───
 * Gebruik voor de meest belangrijke financial-action knop (claim, swap, send). */
.cb-btn-primary {
  width: 100%;
  padding: 16px 24px;
  background: var(--c-accent-red);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  letter-spacing: var(--ls-button);
}
.cb-btn-primary:hover {
  background: #d06b5c;
  transform: translateY(-1px);
}
.cb-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ─── User-dropdown — Caleb & Brown style (wit panel, grote avatar, coral logout) ───
 * Vervangt de oude compact-dropdown met de spacious C&B-look:
 *   - Sluitkruis rechtsboven
 *   - Grote avatar gecentreerd boven
 *   - Customer ID onder naam
 *   - Volledige coral logout-button onderaan
 */
.u-dropdown {
  width: 320px !important;
  background: #fff !important;
  border: 1px solid rgba(13, 23, 41, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(13, 23, 41, 0.14) !important;
  overflow: visible !important;
  padding: 0 !important;
  /* Positie wordt door toggleUserMenu(triggerEl) gezet — fixed t.o.v. viewport,
   * relatief aan welke trigger is geklikt (naam-block links of SV-cirkel rechts). */
  z-index: 100 !important;
}
.u-dd-close {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 20px;
  font-weight: 400;
  color: var(--fg-muted);
  cursor: pointer;
  line-height: 1;
  z-index: 2;
  transition: color var(--dur-fast) var(--ease-out);
}
.u-dd-close:hover { color: var(--c-ink); }

/* C&B header — gecentreerd avatar boven naam + customer ID */
.u-dd-header-cb {
  padding: 24px 20px 20px !important;
  border-bottom: 1px solid rgba(13, 23, 41, 0.06) !important;
  text-align: left;
  border-top: none !important;
}
.u-dd-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-bone-deep), var(--c-bone-warm));
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(13, 23, 41, 0.08);
}
.u-dd-header-cb .u-dd-name {
  font-family: var(--font-sans);
  font-size: 17px !important;
  font-weight: var(--fw-bold) !important;
  color: var(--c-ink) !important;
  margin-top: 0 !important;
  line-height: 1.2;
}
.u-dd-cust-id {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* ─── C&B-exact tabs + account-row + bottom-links (rev. 2026-05-15) ─── */
.u-dd-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 12px 0;
  border-bottom: 1px solid rgba(13, 23, 41, 0.06);
}
.u-dd-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.u-dd-tab svg { color: currentColor; }
.u-dd-tab:hover { color: var(--c-ink); }
.u-dd-tab.active {
  color: var(--c-ink);
  border-bottom-color: var(--c-ink);
}
.u-dd-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent-red);
  display: none;
}
.u-dd-tab-dot.show { display: inline-block; }

/* Tab content panels */
.u-dd-tab-content {
  padding: 14px 18px;
}
.u-dd-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--fg-muted);
  margin-bottom: 10px;
}
.u-dd-link {
  color: var(--c-accent-red);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  text-decoration: none;
}
.u-dd-link:hover { text-decoration: underline; }

/* Account-row binnen Accounts-tab */
.u-dd-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(248, 249, 251, 0.6);
  border-radius: 10px;
  border: 1px solid rgba(13, 23, 41, 0.06);
}
.u-dd-account-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-bone-deep), var(--c-bone-warm));
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.u-dd-account-info { flex: 1; min-width: 0; }
.u-dd-account-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.u-dd-verified { flex-shrink: 0; }
.u-dd-account-id {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 1px;
}
.u-dd-account-badge {
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* Notifications-tab list */
.u-dd-notif-list {
  max-height: 280px;
  overflow-y: auto;
  margin: 0 -6px;
}
.u-dd-notif-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.u-dd-notif-item:hover { background: rgba(13, 23, 41, 0.04); }
.u-dd-notif-empty {
  padding: 30px 18px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-muted);
}

/* Bottom-links — View Profile + Help (C&B-stijl) */
.u-dd-bottom-links {
  padding: 6px 0;
  border-top: 1px solid rgba(13, 23, 41, 0.06);
}
.u-dd-bottom-link {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.u-dd-bottom-link:hover {
  background: rgba(13, 23, 41, 0.04);
}

/* Avatar-row met online-indicator naast de avatar */
.u-dd-avatar-row {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}
.u-dd-avatar-row .u-dd-avatar-lg {
  margin-bottom: 0;
}
.u-dd-online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #f5c518;                /* C&B's gele online-dot */
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(13, 23, 41, 0.06);
}

/* Rol-label onder de naam ("Community Lid" / "Camelot Partner") */
.u-dd-role {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  margin-top: 4px;
  letter-spacing: 0.2px;
}

/* Contact-details sectie — eigen gegevens van het lid */
.u-dd-contact {
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(13, 23, 41, 0.06);
  background: rgba(248, 249, 251, 0.6);
}
.u-dd-contact-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-ink);
  margin-bottom: 8px;
}
.u-dd-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
}
.u-dd-contact-row > svg {
  width: 15px;
  height: 15px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.u-dd-contact-val {
  flex: 1;
  color: var(--c-ink);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u-dd-contact-link {
  color: var(--c-accent-red);
  text-decoration: none;
}
.u-dd-contact-link:hover {
  text-decoration: underline;
}
.u-dd-copy {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--fg-muted);
  transition: all var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.u-dd-copy:hover {
  background: rgba(13, 23, 41, 0.06);
  color: var(--c-ink);
}
.u-dd-copy svg {
  width: 13px;
  height: 13px;
}

/* Body — item-list */
.u-dd-body {
  padding: 8px 0;
}
.u-dropdown .u-dd-item {
  padding: 12px 20px !important;
  font-size: 13px !important;
  color: var(--c-ink) !important;
  gap: 12px !important;
  transition: background var(--dur-fast) var(--ease-out);
}
.u-dropdown .u-dd-item:hover {
  background: rgba(13, 23, 41, 0.04) !important;
}
.u-dropdown .u-dd-item svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--fg-muted) !important;
}

/* Klikbaar naam-block in topbar (links) — opent zelfde user-dropdown */
.topbar-user-trigger:hover {
  background: rgba(13, 23, 41, 0.04);
}
.topbar-user-trigger:active {
  background: rgba(13, 23, 41, 0.07);
}

/* AI-button in topbar — klik opent Camelot AI panel (Steve-feedback) */
.topbar-ai-btn:hover {
  background: rgba(226, 131, 116, 0.10);
  color: var(--c-accent-red) !important;
}
.topbar-ai-btn:active {
  transform: scale(0.94);
}

/* ─── AI Assistent panel — Camelot AI (in-portal Claude) ─── */
.ai-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(13, 23, 41, 0.10);
  box-shadow: 0 20px 60px rgba(13, 23, 41, 0.20);
  display: none;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
  font-family: var(--font-sans);
}
.ai-panel.open { display: flex; animation: aiFadeUp .18s ease-out; }
@keyframes aiFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0a1929 0%, #142a47 100%);
  color: #fff;
}
.ai-hd-left { display: flex; align-items: center; gap: 10px; }
.ai-hd-spark {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-accent-red);
}
.ai-hd-title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
.ai-hd-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 1px;
}
.ai-hd-close {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.ai-hd-close:hover { background: rgba(255,255,255,0.16); }

.ai-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-msg { display: flex; max-width: 86%; }
.ai-msg-bot { align-self: flex-start; }
.ai-msg-user { align-self: flex-end; }
.ai-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ai-msg-bot .ai-msg-bubble {
  background: #fff;
  border: 1px solid rgba(13, 23, 41, 0.06);
  border-radius: 4px 14px 14px 14px;
}
.ai-msg-user .ai-msg-bubble {
  background: #0a1929;
  color: #fff;
  border-radius: 14px 4px 14px 14px;
}
.ai-msg-typing .ai-msg-bubble {
  font-style: italic;
  color: var(--fg-muted);
}

.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px 4px;
  background: #fafbfc;
}
.ai-suggestions.hidden { display: none; }
.ai-sugg {
  font-size: 11px;
  padding: 7px 11px;
  background: #fff;
  border: 1px solid rgba(13, 23, 41, 0.10);
  border-radius: 14px;
  color: var(--c-ink);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all .15s;
}
.ai-sugg:hover {
  border-color: var(--c-accent-red);
  color: var(--c-accent-red);
}

.ai-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid rgba(13, 23, 41, 0.06);
}
.ai-input {
  flex: 1;
  resize: none;
  border: 1px solid rgba(13, 23, 41, 0.10);
  background: #fafbfc;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--c-ink);
  outline: none;
  max-height: 96px;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.ai-input:focus {
  border-color: var(--c-accent-red);
  box-shadow: 0 0 0 3px rgba(226, 131, 116, 0.15);
}
.ai-send {
  background: var(--c-accent-red);
  color: #fff;
  border: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.ai-send:hover { background: #d06b5c; }
.ai-send:disabled { opacity: 0.4; cursor: not-allowed; }
.ai-foot {
  padding: 6px 16px 10px;
  font-size: 9px;
  color: var(--fg-muted);
  text-align: center;
  background: #fff;
  letter-spacing: 0.02em;
}

/* ─── Portfolio — Caleb & Brown 2-col layout (main 65% + sidebar 35%) ─── */
.pf-grid-cb {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
@media (max-width: 1024px) {
  .pf-grid-cb { grid-template-columns: 1fr; }
}
.pf-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Peach referral card (C&B "Share your code to start earning") */
.pf-referral-card {
  background: linear-gradient(135deg, #FFE5E0 0%, #FCC8C0 100%);
  border-radius: 14px;
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
}
.pf-referral-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.pf-referral-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  margin-bottom: 6px;
  position: relative;
  line-height: 1.25;
}
.pf-referral-desc {
  font-size: 12px;
  color: var(--c-ink-700);
  line-height: 1.5;
  margin-bottom: 12px;
  position: relative;
}
.pf-referral-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.pf-referral-input {
  flex: 1;
  background: #fff;
  border: 1px dashed rgba(13, 23, 41, 0.20);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--c-ink);
  min-width: 0;
}
.pf-referral-copy {
  background: var(--c-ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast);
}
.pf-referral-copy:hover { background: #142a47; }

/* Jouw overzicht — 2x2 stat-grid */
.pf-summary-card {
  background: #fff;
  border: 1px solid rgba(13, 23, 41, 0.06);
  border-radius: 14px;
  padding: 16px 18px;
}
.pf-summary-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pf-summary-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.pf-summary-period {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--c-ink-700);
  background: rgba(248, 249, 251, 0.9);
  border: 1px solid rgba(13, 23, 41, 0.08);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
}
.pf-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pf-summary-num {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  line-height: 1;
}
.pf-summary-lbl {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 3px;
}

/* Recente transacties */
.pf-recent-card {
  background: #fff;
  border: 1px solid rgba(13, 23, 41, 0.06);
  border-radius: 14px;
  padding: 16px 18px;
}
.pf-recent-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pf-recent-more {
  font-size: 11px;
  color: var(--c-accent-red);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: none;
}
.pf-recent-more:hover { text-decoration: underline; }
.pf-recent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-recent-empty {
  font-size: 12px;
  color: var(--fg-muted);
  text-align: center;
  padding: 14px 0;
}
.pf-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(13, 23, 41, 0.04);
}
.pf-recent-item:last-child { border-bottom: none; }
.pf-recent-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(13, 23, 41, 0.06);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pf-recent-info { flex: 1; min-width: 0; }
.pf-recent-type {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.pf-recent-date {
  font-size: 10px;
  color: var(--fg-muted);
  margin-top: 1px;
}
.pf-recent-amount {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  text-align: right;
  flex-shrink: 0;
}
.pf-recent-amount.pos { color: var(--c-success); }
.pf-recent-amount.neg { color: var(--c-accent-red); }

/* ============================================================================
   "CALEB STIJL" — design-system (formele naam, Steve 2026-05-15)
   ============================================================================
   Utility-classes voor consistente uitrol van Caleb & Brown styled views.
   Gebruik:
     .cb-page             — page wrapper met max-width + padding
     .cb-page-hd          — header met coral 'Hallo' + H1 + actions
     .cb-token-list       — container met tabs (Portfolio/Watchlist/Trending)
     .cb-token-tabs       — tab-bar binnen token-list
     .cb-token-row        — compacte rij: icon + naam + price + value + 24h + sparkline + actions
*/

.cb-page-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(13, 23, 41, 0.06);
  flex-wrap: wrap;
}
.cb-page-hd-text { flex: 1; }
.cb-page-greeting {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--c-ink-700);
  margin-bottom: 4px;
}
.cb-page-greeting strong { color: var(--c-ink); font-weight: 600; }
.cb-page-h1 {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.1;
}
.cb-page-hd-actions { display: flex; gap: 10px; }

/* Token-list met tabs onderaan portfolio (C&B "Your Crypto" patroon) */
.cb-token-list {
  background: #fff;
  border: 1px solid rgba(13, 23, 41, 0.06);
  border-radius: 14px;
  padding: 16px 18px;
}
.cb-token-list-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.cb-token-list-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
}
.cb-token-tabs {
  display: inline-flex;
  background: rgba(248, 249, 251, 0.9);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.cb-token-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.cb-token-tab:hover { color: var(--c-ink); }
.cb-token-tab.active {
  background: #fff;
  color: var(--c-ink);
  box-shadow: 0 1px 3px rgba(13, 23, 41, 0.10);
}

/* Token-row */
.cb-token-row {
  display: grid;
  grid-template-columns: 32px 1fr 80px 100px 80px 80px auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(13, 23, 41, 0.04);
  font-family: var(--font-sans);
  font-size: 12px;
}
.cb-token-row:last-child { border-bottom: none; }
.cb-token-row-head {
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 0;
  border-bottom: 1px solid rgba(13, 23, 41, 0.06);
}
.cb-token-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.cb-token-name {
  font-weight: 600;
  color: var(--c-ink);
}
.cb-token-pricecol,
.cb-token-valuecol {
  color: var(--c-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cb-token-change { font-weight: 600; }
.cb-token-change.pos { color: var(--c-success); }
.cb-token-change.neg { color: var(--c-accent-red); }
.cb-token-spark {
  height: 28px;
  display: flex;
  align-items: center;
}
.cb-token-spark svg { width: 100%; height: 100%; }
.cb-token-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cb-token-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(13, 23, 41, 0.10);
  background: #fff;
  color: var(--c-ink);
  cursor: pointer;
  transition: all .15s;
}
.cb-token-btn:hover {
  border-color: var(--c-ink);
  background: rgba(13, 23, 41, 0.04);
}
.cb-token-fav {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fg-muted);
  transition: color .15s;
}
.cb-token-fav:hover { color: #F59E0B; }
.cb-token-fav.active { color: #F59E0B; }
.cb-token-fav svg { width: 14px; height: 14px; }

/* Mobile responsive: collapse details */
@media (max-width: 768px) {
  .cb-token-row {
    grid-template-columns: 32px 1fr auto auto;
  }
  .cb-token-pricecol,
  .cb-token-change,
  .cb-token-spark { display: none; }
}

/* ─── Caleb stijl notifications (Steve-feedback: 'mooie popups voor meldingen') ─── */

/* Toast container — rechtsboven, stacked */
.cb-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.cb-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(13, 23, 41, 0.10);
  border-left: 4px solid var(--c-ink);
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 280px;
  max-width: 380px;
  box-shadow: 0 12px 32px rgba(13, 23, 41, 0.18);
  pointer-events: auto;
  animation: cbToastIn .22s cubic-bezier(.2,.9,.3,1.2);
  font-family: var(--font-sans);
}
@keyframes cbToastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cb-toast.cb-toast-out {
  animation: cbToastOut .18s ease-in forwards;
}
@keyframes cbToastOut {
  to { opacity: 0; transform: translateX(20px); }
}
.cb-toast-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--c-ink);
  line-height: 1;
}
.cb-toast.success { border-left-color: var(--c-success); }
.cb-toast.success .cb-toast-icon { background: var(--c-success); }
.cb-toast.error,
.cb-toast.warning { border-left-color: var(--c-accent-red); }
.cb-toast.error .cb-toast-icon,
.cb-toast.warning .cb-toast-icon { background: var(--c-accent-red); }
.cb-toast.info { border-left-color: #3B82F6; }
.cb-toast.info .cb-toast-icon { background: #3B82F6; }
.cb-toast-body { flex: 1; min-width: 0; }
.cb-toast-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.3;
}
.cb-toast-msg {
  font-size: 12px;
  color: var(--c-ink-700);
  margin-top: 3px;
  line-height: 1.5;
  word-wrap: break-word;
}
.cb-toast-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color .15s;
}
.cb-toast-close:hover { color: var(--c-ink); }

/* Modal (blocking) — Caleb stijl */
.cb-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 23, 41, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: cbBackdropIn .15s ease-out;
}
@keyframes cbBackdropIn { from { opacity: 0; } to { opacity: 1; } }
.cb-modal {
  background: #fff;
  border-radius: 18px;
  padding: 28px 28px 22px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(13, 23, 41, 0.28);
  font-family: var(--font-sans);
  animation: cbModalIn .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes cbModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cb-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(226, 131, 116, 0.12);
  color: var(--c-accent-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.cb-modal.success .cb-modal-icon { background: rgba(16, 185, 129, 0.12); color: var(--c-success); }
.cb-modal.info .cb-modal-icon { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.cb-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.cb-modal-msg {
  font-size: 13px;
  color: var(--c-ink-700);
  line-height: 1.55;
  margin-bottom: 22px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.cb-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.cb-modal-btn {
  padding: 11px 22px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid transparent;
}
.cb-modal-btn-cancel {
  background: #fff;
  color: var(--c-ink);
  border-color: rgba(13, 23, 41, 0.12);
}
.cb-modal-btn-cancel:hover { background: rgba(13, 23, 41, 0.04); }
.cb-modal-btn-primary {
  background: var(--c-accent-red);
  color: #fff;
}
.cb-modal-btn-primary:hover { background: #d06b5c; }
.cb-modal-btn-navy {
  background: var(--c-ink);
  color: #fff;
}
.cb-modal-btn-navy:hover { background: #142a47; }

/* Coral logout button — full-width onderaan (Place Order patroon) */
.u-dd-logout-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 8px 10px 12px;
  padding: 13px;
  background: var(--c-accent-red);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.u-dd-logout-btn:hover {
  background: #d06b5c;
  transform: translateY(-1px);
}
.cm-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.cm-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display-sm);
  color: var(--fg-primary);
}
.cm-card-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--fg-accent);
  margin-bottom: var(--sp-1);
}

/* ─────────── BUTTON — luxury feel ─────────── */
.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  user-select: none;
}
.cm-btn:active:not(:disabled) { transform: translateY(1px); }
.cm-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.cm-btn-primary {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
  color: var(--c-navy);
  box-shadow: var(--shadow-gold-soft);
}
.cm-btn-primary:hover:not(:disabled) {
  box-shadow: var(--shadow-gold-glow);
  filter: brightness(1.05);
}
.cm-btn-secondary {
  background: var(--bg-surface);
  color: var(--fg-primary);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}
.cm-btn-secondary:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--c-bone-warm);
}
.cm-btn-tertiary {
  background: transparent;
  color: var(--fg-accent);
  padding: var(--sp-2) var(--sp-3);
}
.cm-btn-tertiary:hover:not(:disabled) {
  background: var(--c-gold-glow);
}
.cm-btn-danger {
  background: var(--c-accent-red);
  color: #fff;
}
.cm-btn-danger:hover:not(:disabled) { filter: brightness(1.08); }

/* ─────────── INPUT — premium with gold focus ─────────── */
.cm-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--fg-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.cm-input:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px var(--c-gold-glow);
}
.cm-input::placeholder { color: var(--fg-muted); }
.cm-input.cm-input-error {
  border-color: var(--c-accent-red);
  box-shadow: 0 0 0 3px rgba(226, 131, 116, 0.18);
}

/* ─────────── DIVIDER — ornamental gold ─────────── */
.cm-divider {
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--c-gold) 50%,
    transparent 100%);
  margin: var(--sp-6) 0;
  opacity: 0.5;
}
.cm-divider-sm {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--sp-4) 0;
}

/* ─────────── VALUE — premium numbers display ─────────── */
.cm-value {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display-lg);
  font-variant-numeric: tabular-nums;
  color: var(--fg-primary);
  line-height: var(--lh-tight);
}
.cm-value-lg {
  font-size: var(--fs-4xl);
}
.cm-value-sm {
  font-size: var(--fs-lg);
}

/* ─────────── ILLUMINATED LETTER ─────────── */
.cm-illuminated::first-letter {
  font-family: var(--font-display);
  font-size: 2.4em;
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--c-gold-deep);
  float: left;
  margin-right: var(--sp-2);
  margin-top: 2px;
}

/* ─────────── CHIP — small tag ─────────── */
.cm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  padding: 4px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--c-bone);
  color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
}
.cm-chip-gold {
  background: var(--c-gold-glow);
  color: var(--c-gold-deep);
  border-color: var(--border-default);
}

/* ─────────── MICRO-INTERACTIONS ─────────── */

/* Shimmer effect on hover for gold elements */
@keyframes cm-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.cm-shimmer-on-hover {
  position: relative;
  overflow: hidden;
}
.cm-shimmer-on-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.cm-shimmer-on-hover:hover::after {
  opacity: 1;
  animation: cm-shimmer 0.9s var(--ease-out);
}

/* Reveal-on-scroll (use with IntersectionObserver) */
.cm-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.cm-reveal.cm-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Skeleton loader */
@keyframes cm-skeleton-pulse {
  0%   { background-color: rgba(0, 0, 0, 0.06); }
  50%  { background-color: rgba(0, 0, 0, 0.12); }
  100% { background-color: rgba(0, 0, 0, 0.06); }
}
.cm-skeleton {
  border-radius: var(--radius-sm);
  animation: cm-skeleton-pulse 1.8s ease-in-out infinite;
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================================
   PREMIUM OVERRIDES — apply to existing .fo-* (Family Office) classes
   Pilot: Portfolio-view. Niet-breaking, alleen visual upgrade.
   ============================================================================
*/

/* ─── Page wrapper ─── */
/* Portfolio: terug naar grijze body-tint i.p.v. parchment-cream, zodat het
 * naadloos overgaat met de body-achtergrond (Steve-feedback 2026-05). */
.fo-page {
  background: #f6f5f3;
  padding: var(--sp-8) var(--sp-8) var(--sp-12);
  max-width: 1280px;
  margin: 0 auto;
}

/* ─── Header — premium serif headline ─── */
.fo-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}
.fo-header::after {
  /* Subtle gold underline accent that fades in from center */
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--c-gold) 50%,
    transparent 100%);
  opacity: 0.6;
}
.fo-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display-lg);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.fo-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display-lg);
  color: var(--c-ink);
}
.fo-subtitle {
  margin-top: var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--fg-secondary);
  letter-spacing: var(--ls-body);
}

/* ─── Cards — premium with gold edge + warm gradient + inner light ─── */
.fo-card {
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm), var(--shadow-inner-light);
  position: relative;
  transition: transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out);
}
.fo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-soft), var(--shadow-inner-light);
  border-color: var(--border-default);
}
/* Subtle gold accent line on the top of every card */
.fo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--sp-8);
  right: var(--sp-8);
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--c-gold) 50%,
    transparent 100%);
  opacity: 0.45;
  pointer-events: none;
}

/* ─── Stats — premium numbers in Inter (Caleb & Brown style) ─── */
.fo-stat-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-bottom: var(--sp-2);
}
.fo-stat-value {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display-lg);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-1);
}
.fo-stat-sub {
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  letter-spacing: var(--ls-body);
}

/* ─── Buttons — gold premium primary, refined secondary ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
  color: var(--c-navy);
  box-shadow: var(--shadow-gold-soft);
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  box-shadow: var(--shadow-gold-glow);
  filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(1px); }
/* Shimmer effect on hover */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity var(--dur-fast);
  pointer-events: none;
}
.btn-primary:hover::after {
  opacity: 1;
  animation: cm-shimmer 0.9s var(--ease-out);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-6);
  background: var(--bg-surface);
  color: var(--c-ink);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover {
  border-color: var(--c-gold);
  background: var(--c-bone-warm);
}
.btn-ghost:active { transform: translateY(1px); }

/* ─── Dividers — ornamental gold ─── */
.fo-divider {
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--border-default) 20%,
    var(--c-gold) 50%,
    var(--border-default) 80%,
    transparent 100%);
  opacity: 0.6;
  margin: var(--sp-6) 0;
}

/* ─── Section spacing ─── */
.fo-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.fo-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
section.fo-card {
  margin-bottom: var(--sp-8);
}

/* ─── Distribution table — premium spacing ─── */
.fo-dist-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 0.8fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--c-gold-deep);
  border-bottom: 1px solid var(--border-subtle);
}
.fo-dist-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 0.8fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out);
}
.fo-dist-row:hover {
  background: rgba(201, 168, 76, 0.04);
}
.fo-dist-row:last-child { border-bottom: none; }
.fo-dist-row .tabular-nums { font-variant-numeric: tabular-nums; }

/* ─── Distribution bar — premium gradient ─── */
.fo-dist-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.fo-dist-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

/* ─── Chips — premium ─── */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  padding: 4px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--c-bone);
  color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
}
.chip.chip-gold {
  background: var(--c-gold-glow);
  color: var(--c-gold-deep);
  border-color: var(--border-default);
}

/* ─── Row links — premium with arrow animation ─── */
.fo-row-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  text-decoration: none;
  padding: var(--sp-2) 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.fo-row-link:hover { color: var(--c-gold-deep); }

/* ─── Tabs — premium underline ─── */
.fo-tabs {
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-md);
}
.fo-tab {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border: none;
  background: transparent;
  color: var(--fg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.fo-tab:hover { color: var(--c-gold-deep); }
.fo-tab.active {
  background: var(--c-gold);
  color: var(--c-navy);
  box-shadow: var(--shadow-xs);
}

/* ─── Pills (filter-pills) ─── */
.fo-pills {
  display: inline-flex;
  gap: var(--sp-2);
}
.fo-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-surface);
  color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.fo-pill:hover {
  border-color: var(--c-gold);
  color: var(--c-gold-deep);
}
.fo-pill.active {
  background: var(--c-gold);
  color: var(--c-navy);
  border-color: var(--c-gold);
}
.fo-pill-count {
  background: rgba(0, 0, 0, 0.1);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: 10px;
}
.fo-pill.active .fo-pill-count {
  background: rgba(13, 23, 36, 0.2);
}

/* ============================================================================
   GENERIC VIEW OVERRIDES — rollout naar alle 12 andere views
   Toegepast op: staking, voting, liquidity, holdings, communities, events,
   settings, deposit, withdraw, pay, send, trade, history, markets, marktplaats
   ============================================================================
*/

/* ─── Page titles ─── */
.gen-page-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display-lg);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.gen-page-sub {
  margin-top: var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-style: italic;
  color: var(--fg-secondary);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-snug);
}

/* ─── Generic card (.card) — same premium feel als .fo-card ─── */
.card {
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--shadow-inner-light);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.card:hover {
  box-shadow: var(--shadow-gold-soft), var(--shadow-inner-light);
}

/* ─── scard (smaller card, used everywhere) ─── */
.scard {
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs), var(--shadow-inner-light);
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.scard:hover {
  box-shadow: var(--shadow-sm), var(--shadow-inner-light);
}

/* ─── Holdings stat cards ─── */
.h-top {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.h-stat {
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs), var(--shadow-inner-light);
}
.h-stat-lbl {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-bottom: var(--sp-2);
}
.h-stat-val {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display-lg);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.h-stat-chg {
  margin-top: var(--sp-1);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.h-stat-chg.pos { color: var(--c-success); }
.h-stat-chg.neg { color: var(--c-accent-red); }

/* ─── Coin icons ─── */
.h-coin-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.h-coin-name {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

/* ─── Trade tabs (used in voting, staking, etc) ─── */
.trade-tabs {
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: rgba(13, 23, 36, 0.04);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
}
.trade-tab {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-5);
  border: none;
  background: transparent;
  color: var(--fg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.trade-tab:hover {
  color: var(--c-gold-deep);
}
.trade-tab.active {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
  color: var(--c-navy);
  box-shadow: var(--shadow-xs);
}

/* ─── Swap / primary buttons ─── */
.swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-6);
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
  color: var(--c-navy);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-gold-soft);
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.swap-btn:hover:not(:disabled) {
  box-shadow: var(--shadow-gold-glow);
  filter: brightness(1.05);
}
.swap-btn:active:not(:disabled) { transform: translateY(1px); }
.swap-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.swap-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  pointer-events: none;
}
.swap-btn:hover:not(:disabled)::after {
  opacity: 1;
  animation: cm-shimmer 0.9s var(--ease-out);
}

/* ─── Action button (btn-act) ─── */
.btn-act {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-surface);
  color: var(--c-ink);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur-fast) var(--ease-out);
}
.btn-act:hover {
  border-color: var(--c-gold);
  background: var(--c-bone-warm);
  color: var(--c-gold-deep);
}
.btn-act:active { transform: translateY(1px); }

/* ─── Form fields (dep-field used everywhere) ─── */
.dep-field {
  margin-bottom: var(--sp-4);
}
.dep-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-bottom: var(--sp-2);
}
.dep-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.dep-input:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px var(--c-gold-glow);
}
.dep-form-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display-sm);
  color: var(--c-ink);
  margin-bottom: var(--sp-3);
}
.swap-balance {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: var(--ls-body);
}

/* ─── Swap input variant ─── */
.swap-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.swap-input:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px var(--c-gold-glow);
}

/* ─── Settings sections ─── */
.set-section {
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-xs), var(--shadow-inner-light);
}
.set-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display-sm);
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
.set-section-sub {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--fg-muted);
  margin-bottom: var(--sp-5);
  letter-spacing: var(--ls-body);
}
.set-tabs {
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: rgba(13, 23, 36, 0.04);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-6);
}
.set-tab {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-5);
  border: none;
  background: transparent;
  color: var(--fg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.set-tab:hover { color: var(--c-ink); }
.set-tab.active {
  background: var(--c-ink);           /* Caleb & Brown-stijl: donker navy fill ipv goud */
  color: #fff;
  box-shadow: var(--shadow-xs);
}
.set-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.set-row:last-child { border-bottom: none; }
.set-row-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--c-gold-deep);
}
.set-row-value {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--c-ink);
}

/* ─── Help-center & news items ─── */
.help-item {
  padding: var(--sp-4);
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.help-item:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-gold-soft);
  transform: translateY(-1px);
}

.news-item {
  padding: var(--sp-4);
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-xs);
}

/* ─── Generic view padding ─── */
.gen-view {
  padding: var(--sp-8);
  max-width: 1280px;
  margin: 0 auto;
}

/* ============================================================================
   SIDEBAR + TOPBAR PREMIUM OVERRIDES
   ============================================================================
*/

/* ─── Sidebar — Caleb & Brown style (donker navy + wit tekst + coral accent) ───
 *
 * Steve-feedback (2026-05): "gebruik deze layout van tekst en menu kleuren"
 * met screenshot van Caleb & Brown's portfolio-app. Switch van light-parchment
 * naar full-dark sidebar, wit tekst met opacity-hiërarchie, coral accent-line
 * links bij actieve items.
 */
.sb {
  background: #0a1929 !important;                /* heel donker navy zoals C&B */
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

/* Sidebar logo — wit "Camelot Family" op donker */
.sb-logo {
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display-sm);
  color: #fff !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative;
  overflow: hidden;
}
.sb-logo::before { display: none; }
.sb-logo::after  { display: none; }
.partner-mode .sb-logo::after {
  content: ' · PARTNER';
  display: inline;
  font-size: 9px;
  font-weight: var(--fw-semibold);
  color: var(--c-gold-soft);
  letter-spacing: var(--ls-button);
  font-family: var(--font-sans);
  margin-left: var(--sp-2);
  text-transform: uppercase;
}

/* Sidebar nav items — wit met opacity-hiërarchie */
.sb-nav {
  padding: var(--sp-3) var(--sp-2);
}
.sbi {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin: 1px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.7) !important;   /* C&B inactive state */
  letter-spacing: var(--ls-body);
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
}
.sbi:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.sbi.active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  font-weight: var(--fw-semibold);
  box-shadow: none !important;
}
/* Coral accent-line links bij actieve items (C&B's signature) */
.sbi.active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: var(--sp-2);
  bottom: var(--sp-2);
  width: 3px;
  background: var(--c-accent-red);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  box-shadow: 0 0 8px rgba(226, 131, 116, 0.4);
}
.sbi svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: color var(--dur-fast) var(--ease-out);
}
.sbi:hover svg { color: #fff !important; }
.sbi.active svg { color: #fff !important; }

/* Section labels — muted wit i.p.v. goud */
.sb-section-label {
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4) !important;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sb-section-label::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.3);
  opacity: 0.7;
}

/* Sub-items (collapsed nested nav) */
.sb-sub {
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-10);
  margin: 1px 0;
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.sb-sub:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Badge in sidebar — coral op donker */
.sbi-badge {
  margin-left: auto;
  background: var(--c-accent-red);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  letter-spacing: var(--ls-caption);
}
.sbi.active .sbi-badge {
  background: #fff;
  color: var(--c-accent-red);
}

.sb-footer {
  padding: var(--sp-3) var(--sp-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.sb-footer .sbi {
  color: rgba(255, 255, 255, 0.55) !important;
}
.sb-footer .sbi:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ─── Topbar — Caleb & Brown style (wit/licht, neutrale border) ─── */
.topbar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(13, 23, 41, 0.06) !important;
  padding: var(--sp-4) var(--sp-8) !important;
  box-shadow: 0 1px 0 rgba(13, 23, 41, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Searchbox — Caleb & Brown style (coral focus ipv goud) */
.searchbox {
  flex: 1;
  max-width: 380px;
  background: rgba(248, 249, 251, 0.9);
  border: 1px solid rgba(13, 23, 41, 0.08);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.searchbox:focus-within {
  border-color: var(--c-accent-red);
  box-shadow: 0 0 0 3px rgba(226, 131, 116, 0.18);
  background: #fff;
}
.searchbox input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  width: 100%;
}
.searchbox input::placeholder { color: var(--fg-muted); }

/* Lang toggle — Caleb & Brown pill (coral fill voor active ipv goud) */
.lang-toggle {
  display: flex;
  background: rgba(248, 249, 251, 0.9);
  border: 1px solid rgba(13, 23, 41, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
  cursor: pointer;
}
.lang-opt {
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.lang-opt.active {
  background: var(--c-accent-red);
  color: #fff;
}
.lang-opt:not(.active):hover {
  color: var(--c-gold-deep);
}

/* User circle — premium gold gradient */
.u-circle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--c-gold-soft) 0%, var(--c-gold-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-navy);
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-gold-soft);
  transition: all var(--dur-fast) var(--ease-out);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.u-circle:hover {
  transform: scale(1.06);
  box-shadow: var(--shadow-gold-glow);
}
.u-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-red);
  border: 2px solid #fff;
  position: absolute;
  top: -2px;
  right: -2px;
  box-shadow: var(--shadow-xs);
}

/* Wallet button — dark with gold accent */
.btn-wallet {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-soft) 100%);
  color: #fff;
  border: 1px solid rgba(201, 168, 76, 0.32);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.btn-wallet:hover {
  border-color: var(--c-gold);
  box-shadow: var(--shadow-gold-soft);
  transform: translateY(-1px);
}
.btn-wallet:active { transform: translateY(0); }

/* User dropdown — premium parchment */
.u-dropdown {
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-gold-soft), var(--shadow-inner-light);
  overflow: hidden;
  min-width: 240px;
}
.u-dd-header {
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.u-dd-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  letter-spacing: var(--ls-display-sm);
}
.u-dd-email {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-top: var(--sp-1);
}
.u-dd-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.u-dd-item:hover {
  background: var(--c-gold-glow);
  color: var(--c-gold-deep);
}
.u-dd-item svg {
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.u-dd-item:hover svg { color: var(--c-gold-deep); }
.u-dd-divider {
  height: 1px;
  background: var(--border-subtle);
}
.u-dd-item.logout { color: var(--c-accent-red); }
.u-dd-item.logout svg { color: var(--c-accent-red); }
.u-dd-item.logout:hover {
  background: rgba(226, 131, 116, 0.08);
  color: var(--c-accent-red);
}

/* ============================================================================
   VISUAL FINE-TUNES — Login + Modals + Chat panel + Holdings header
   ============================================================================
*/

/* ─── Login screen — premium royal entry ─── */
.login-screen {
  background: linear-gradient(180deg,
    var(--c-navy) 0%,
    var(--c-navy-soft) 100%) !important;
}
.login-box {
  background: var(--bg-surface-warm) !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-gold-glow),
    var(--shadow-inner-light),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: var(--sp-8) var(--sp-10);
  position: relative;
}
/* Gold accent line at the top of the box */
.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--sp-8);
  right: var(--sp-8);
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--c-gold) 50%,
    transparent 100%);
  opacity: 0.7;
}
.login-logo {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display-lg);
  color: var(--c-ink);
  text-align: center;
  margin-bottom: var(--sp-1);
}
.login-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-bottom: var(--sp-2);
}
.login-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.login-input:focus {
  outline: none;
  border-color: var(--c-gold);
  background: #fff;
  box-shadow: 0 0 0 3px var(--c-gold-glow);
}
.login-input::placeholder { color: var(--fg-muted); }
.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-6);
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
  color: var(--c-navy);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-gold-soft);
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.login-btn:hover:not(:disabled) {
  box-shadow: var(--shadow-gold-glow);
  filter: brightness(1.05);
}
.login-btn:active:not(:disabled) { transform: translateY(1px); }
.login-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.login-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  pointer-events: none;
}
.login-btn:hover:not(:disabled)::after {
  opacity: 1;
  animation: cm-shimmer 0.9s var(--ease-out);
}
.login-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--border-default) 50%,
    transparent 100%);
}

/* Login type-cards (Member / Partner kies-blok) */
.login-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.login-type-card {
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  text-align: center;
}
.login-type-card:hover {
  border-color: var(--c-gold);
  background: var(--c-bone-warm);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold-soft);
}
.login-type-card.selected {
  border-color: var(--c-gold);
  background: var(--c-bone-warm);
  box-shadow: var(--shadow-gold-soft), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.login-type-card.selected::after {
  content: '✓';
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-3);
  color: var(--c-gold-deep);
  font-weight: var(--fw-bold);
}
.login-type-icon {
  margin-bottom: var(--sp-3);
}
.login-type-title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display-sm);
  color: var(--c-ink);
  margin-bottom: var(--sp-1);
}
.login-type-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}

/* ─── Modals — disclosure popups (MiCA, governance, edit-community) ─── */
#modalOverlay, .modal-overlay {
  background: rgba(13, 23, 36, 0.65) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* All disclosure popups (the showMiCADisclosure-style boxes) get
   premium parchment look via their inline styles inherited from card-pattern.
   Here we standardize via attribute selectors on common patterns. */
div[style*="background:#fff"][style*="border-radius:12px"][style*="max-width"] {
  /* These are disclosure modal inner-boxes — give them parchment + gold edge */
  background: var(--bg-surface-warm) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-gold-glow), var(--shadow-inner-light) !important;
}

/* ─── Chat panel — premium parchment messaging ─── */
.chat-panel {
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-gold-glow), var(--shadow-inner-light);
  overflow: hidden;
}
.chat-hd {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-soft) 100%);
  padding: var(--sp-5) var(--sp-6);
  position: relative;
}
.chat-hd::after {
  /* Gold underline */
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--sp-6);
  right: var(--sp-6);
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--c-gold) 50%,
    transparent 100%);
  opacity: 0.5;
}
.chat-hd-brand {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display-sm);
  color: var(--c-gold);
  text-transform: uppercase;
}
.chat-hd-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: #fff;
  letter-spacing: var(--ls-display-sm);
  margin-top: var(--sp-2);
}
.chat-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.chat-close:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.chat-search-bar {
  margin: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.chat-search-bar:focus-within {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px var(--c-gold-glow);
}
.chat-search-bar input {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}

.faq-item, .help-item, .msg-item {
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--dur-fast) var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.faq-item:hover, .help-item:hover, .msg-item:hover {
  background: var(--c-gold-glow);
  color: var(--c-gold-deep);
}
.faq-chev {
  margin-left: auto;
  color: var(--c-gold-deep);
  opacity: 0.6;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item:hover .faq-chev {
  transform: translateX(2px);
  opacity: 1;
}

.chat-msgs {
  padding: var(--sp-5);
}
.bubble {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  max-width: 80%;
  margin-bottom: var(--sp-2);
}
.bubble-them {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--c-ink);
}
.bubble-mine {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
  color: var(--c-navy);
  margin-left: auto;
  box-shadow: var(--shadow-gold-soft);
}
.btime {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-top: var(--sp-1);
}

.chat-input-row {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.chat-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-4);
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.chat-input:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px var(--c-gold-glow);
}

/* ─── Holdings header (h-top) — premium stat-grid ─── */
.h-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding: var(--sp-2);
}
/* Each h-stat in h-top gets the premium card-look with gold accent */
.h-top .h-stat {
  position: relative;
  background: var(--bg-surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs), var(--shadow-inner-light);
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.h-top .h-stat:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold-soft), var(--shadow-inner-light);
}
.h-top .h-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--sp-4);
  right: var(--sp-4);
  height: 1.5px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--c-gold) 50%,
    transparent 100%);
  opacity: 0.35;
}

/* ─── Modal overlay improvements ─── */
.swap-input-row {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.swap-input-row:focus-within {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px var(--c-gold-glow);
}

/* ─── Misc premium touches ─── */
.max-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-gold-glow);
  color: var(--c-gold-deep);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.max-btn:hover {
  background: var(--c-gold);
  color: var(--c-navy);
  border-color: var(--c-gold);
}

/* Pill chips (.pill) used in filters */
.pill {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
}

/* ============================================================================
   MOBILE RESPONSIVE — comprehensive breakpoints
   ============================================================================
   1280px+ : desktop (default — geen overrides nodig)
   1024px  : laptop  → slightly tighter padding
   768px   : tablet  → sidebar collapses naar off-canvas, grids → 1-col
   480px   : mobile  → font-scale down, single column everywhere
   360px   : small   → minimum padding
*/

/* ─── Hamburger button (verborgen op desktop, toon op <= 768px) ─── */
.cm-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--c-ink);
  margin-right: var(--sp-3);
  transition: all var(--dur-fast) var(--ease-out);
}
.cm-hamburger:hover {
  border-color: var(--c-gold);
  background: var(--c-gold-glow);
}
.cm-hamburger svg { display: block; }

/* ─── Mobile-overlay achter geopende sidebar ─── */
.cm-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 23, 36, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9;
  animation: cmFadeIn var(--dur-fast) var(--ease-out);
}
.cm-mobile-overlay.active { display: block; }
@keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================================
   LAPTOP — 1024px
   ============================================================================
*/
@media (max-width: 1280px) {
  .fo-page, .gen-view { padding: var(--sp-6); }
}

/* ============================================================================
   TABLET / MOBILE — 768px (sidebar collapses)
   ============================================================================
*/
@media (max-width: 768px) {
  /* Hamburger zichtbaar */
  .cm-hamburger { display: inline-flex; }

  /* Sidebar off-canvas */
  .sb {
    transform: translateX(-100%);
    transition: transform var(--dur-normal) var(--ease-out);
    z-index: 100;
    box-shadow: 4px 0 32px rgba(13, 23, 36, 0.2);
  }
  .sb.cm-open {
    transform: translateX(0);
  }

  /* Main content full-width when sidebar collapsed */
  .main { margin-left: 0; }

  /* Topbar */
  .topbar {
    padding: var(--sp-3) var(--sp-4) !important;
    gap: var(--sp-2);
  }
  .topbar .searchbox {
    max-width: 200px;
    font-size: var(--fs-xs);
  }
  .topbar .lang-toggle,
  .topbar .btn-wallet span { display: none; }
  .btn-wallet {
    padding: var(--sp-2) var(--sp-3);
  }

  /* All grids collapse to 1 column */
  .fo-grid-2,
  .fo-grid-4 {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .fo-grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Generic grids in views */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Cards smaller padding */
  .fo-card { padding: var(--sp-5); }
  .scard { padding: var(--sp-4); }
  .set-section { padding: var(--sp-5); }

  /* Headings scale down */
  .fo-h1 { font-size: var(--fs-3xl); }
  .fo-h2 { font-size: var(--fs-xl); }
  .gen-page-title { font-size: var(--fs-2xl); }
  .gen-page-sub { font-size: var(--fs-sm); }
  .fo-stat-value { font-size: var(--fs-2xl); }
  .h-stat-val { font-size: var(--fs-lg); }

  /* Header compact */
  .fo-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  /* Set-row columns stack */
  .set-row {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
    padding: var(--sp-3) 0;
  }

  /* Trade-tabs scrollable */
  .trade-tabs {
    overflow-x: auto;
    max-width: 100%;
    padding: var(--sp-1);
    -webkit-overflow-scrolling: touch;
  }
  .trade-tab {
    flex-shrink: 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: 10px;
  }

  /* Dep-form 2-column split → stack */
  .dep-form > div[style*="display:flex;gap:18px"],
  .dep-form > div[style*="display: flex; gap: 18px"] {
    flex-direction: column;
  }

  /* Modal overlay full-screen */
  .modal-overlay,
  #modalOverlay {
    padding: var(--sp-2);
  }
  .modal-overlay > div,
  #modalOverlay > div {
    max-width: 100% !important;
    max-height: 95vh !important;
    overflow-y: auto;
    border-radius: var(--radius-md) !important;
  }

  /* Distribution-table compact */
  .fo-dist-head {
    grid-template-columns: 1.5fr 1fr 1fr;
    font-size: 9px;
  }
  .fo-dist-row {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
  }
  .fo-dist-head > div:nth-child(4),
  .fo-dist-head > div:nth-child(5),
  .fo-dist-row > div:nth-child(4),
  .fo-dist-row > div:nth-child(5) {
    display: none; /* Share-bar + Type op mobile verbergen */
  }

  /* Login-box smaller */
  .login-box {
    padding: var(--sp-6) var(--sp-5);
    margin: var(--sp-4);
    max-width: calc(100vw - 32px);
  }
  .login-type-grid {
    grid-template-columns: 1fr;
  }

  /* Chat panel fullscreen op mobile */
  .chat-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    border-radius: 0;
  }

  /* Landing page UI compact */
  #landingPage .landTitle,
  .landTitle { font-size: clamp(28px, 8vw, 42px) !important; }
  .landTagline { font-size: clamp(11px, 2.5vw, 14px) !important; padding: 0 var(--sp-4); }
}

/* ============================================================================
   MOBILE — 480px (further scale down)
   ============================================================================
*/
@media (max-width: 480px) {
  .fo-page, .gen-view { padding: var(--sp-4); }

  .fo-grid-4 { grid-template-columns: 1fr; }
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  .fo-card { padding: var(--sp-4); border-radius: var(--radius-md); }
  .scard { padding: var(--sp-3); }
  .set-section { padding: var(--sp-4); }

  .fo-h1 { font-size: var(--fs-2xl); }
  .gen-page-title { font-size: var(--fs-xl); }
  .fo-stat-value { font-size: var(--fs-xl); }

  /* Topbar minimum */
  .topbar { padding: var(--sp-2) var(--sp-3) !important; }
  .topbar .searchbox { display: none; }
  .u-circle { width: 32px; height: 32px; }
  .btn-wallet {
    padding: var(--sp-2);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
  }
  .btn-wallet span,
  .btn-wallet svg + * { display: none; }

  /* Buttons stack */
  .fo-header > div:last-child {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .btn-primary, .btn-ghost, .swap-btn, .btn-act, .login-btn {
    font-size: var(--fs-xs);
    padding: var(--sp-2) var(--sp-4);
  }

  /* Login compact */
  .login-screen { padding: 0; }
  .login-box { padding: var(--sp-5) var(--sp-4); }
  .login-logo { font-size: var(--fs-xl); }
}

/* ============================================================================
   SMALL MOBILE — 360px (min)
   ============================================================================
*/
@media (max-width: 360px) {
  .fo-page, .gen-view { padding: var(--sp-3); }
  .fo-card, .scard { padding: var(--sp-3); }
  body { font-size: var(--fs-sm); }
}