/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  background: var(--bg-main);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
}
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
button:active { transform: scale(0.96); opacity: 0.85; }
a      { -webkit-tap-highlight-color: transparent; }

/* ── Keyboard focus ring ────────────────────────────────── */
/* Visible only on keyboard navigation, invisible for mouse/touch */
:focus-visible {
  outline: 2px solid rgba(79,140,255,.55);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* Form inputs use box-shadow for focus — suppress double indicator */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

:root {
  --bg:          #05070f;
  --bg-card:     #1a1a1a;
  --bg-card-2:   #212121;
  --border:      #272727;
  --border-hi:   #303030;
  --accent:      #4f8ef7;
  --accent-dim:  #1a2438;
  --green:       #4ade80;
  --green-dim:   rgba(74,222,128,.09);
  --red:         #e05a5a;
  --orange:      #e0904a;
  --text:        #e2e2e2;
  --text-bright: rgba(255,255,255,0.92);
  --text-muted:  #a0a0a0;
  --text-dim:    #484848;
  --radius:      12px;
  --radius-sm:   8px;
  --radius-xs:   6px;
  --shadow:      0 4px 20px rgba(0,0,0,.4);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.28);
  /* Easing curves */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.1, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  /* Timing — slightly slower for more refined feel */
  --dur-tap:  80ms;
  --dur-fast: 160ms;
  --dur-med:  290ms;
  --dur-slow: 420ms;
  /* Glow system — removed; any var(--glow-*) renders as none */
  --glow-soft:   none;
  --glow-medium: none;
  --glow-strong: none;
  /* Brand */
  --aurix-blue:       #2bc8f2;
  --aurix-blue-light: #4a82f0;
  /* Category palette */
  --color-crypto:      #2563EB;
  --color-real-estate: #7C3AED;
  --color-funds:       #0891B2;
  --color-stocks:      #EA580C;
  --color-cash:        #16A34A;
  --color-metals:      #CA8A04;

  /* ── Spacing tokens ── */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;

  /* ── Radius tokens (additive — --radius/--radius-sm/--radius-xs kept for compat) ── */
  --radius-md: 16px;
  --radius-lg: 20px;

  /* ── Typography tokens ── */
  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  20px;
  --font-size-xl:  28px;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;

  /* ── Color tokens (additive — existing --bg-* vars untouched) ── */
  /* Backgrounds — map to existing vars; #121212/#181818 not in codebase yet */
  --color-bg-primary:   var(--bg);
  --color-bg-surface:   var(--bg-card);
  --color-bg-elevated:  var(--bg-card-2);

  /* Borders — exact matches present in CSS */
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.10);

  /* Text */
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-tertiary:  rgba(255, 255, 255, 0.5);

  /* States */
  --color-positive: #4CAF50;
  --color-negative: #F44336;

  /* ── Visual system ── */
  --bg-main:    #0B0F1A;
  --surface-1:  rgba(255,255,255,0.03);
  --surface-2:  rgba(255,255,255,0.05);
  --surface-3:  rgba(255,255,255,0.08);
  --border-subtle: rgba(255,255,255,0.06);  /* alias of --color-border-subtle */
  --border-strong: rgba(255,255,255,0.10);  /* alias of --color-border-default */
  --accent:        #2F6BFF;
  --text-primary:  #FFFFFF;
  --text-secondary: rgba(255,255,255,0.7);
  --text-tertiary:  rgba(255,255,255,0.5);
}

body {
  background: var(--bg-main);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 400ms cubic-bezier(0.22, 1, 0.36, 1), all 1.5s ease;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(80,120,255,0.12), transparent 60%),
    radial-gradient(circle at 70% 65%, rgba(0,255,180,0.08), transparent 70%);
  z-index: -2;
  transition: all 1.5s ease;
}
.ambient-text-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.ambient-text {
  position: absolute;
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.08);
  font-weight: 400;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(10px) translateX(0px);
  animation: floatText 12s ease forwards;
  white-space: nowrap;
  user-select: none;
}
@keyframes floatText {
  0%   { opacity: 0;   transform: translateY(10px)  translateX(0px);  }
  20%  { opacity: 1;                                                    }
  80%  { opacity: 1;   transform: translateY(-10px) translateX(20px);  }
  100% { opacity: 0;   transform: translateY(-20px) translateX(40px);  }
}
/* Subtle background darkening when drilling into a category */
body.is-detail-view {
  background-color: #090a0f;
}

/* ── Page & card entrance ──────────────────────────────── */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
main { animation: page-enter .4s var(--ease-out) forwards; }

@keyframes section-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero card: always visible on load — subtle lift-in */
.hero-card {
  animation: section-enter 0.5s var(--ease-out) 0.05s both;
}

/* Distribution + categories: animate on first appearance (JS adds .is-entering) */
.distribution-section.is-entering {
  animation: section-enter 0.45s var(--ease-out) 0.08s both;
}
.categories-section.is-entering {
  animation: section-enter 0.45s var(--ease-out) 0.15s both;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-card,
  .distribution-section.is-entering,
  .categories-section.is-entering { animation: none; }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes logo-enter {
  from { opacity: 0;   transform: translateY(6px) scaleX(1.18) scaleY(0.86); }
  to   { opacity: .88; transform: translateY(0)   scaleX(1.18) scaleY(0.86); }
}

/* ── Skeleton shimmer ───────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.12) 37%,
    rgba(255,255,255,.04) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
  user-select: none;
  pointer-events: none;
}

/* ── App Shell ─────────────────────────────────────────── */
.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-6) 64px;
  background: var(--bg-main);
}

/* ── Header ────────────────────────────────────────────── */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-3) 0 11px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: var(--space-1);
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
}

.header--scrolled {
  background: rgba(11,15,26,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 20px rgba(0,0,0,.35);
  border-color: transparent;
}

.header-left {
  justify-self: center;
  grid-column: 2;
}

/* ── Logo ──────────────────────────────────────────────── */
.logo-block {
  display: flex;
  flex-direction: column;
  line-height: 1;
  user-select: none;
  margin-top: 2px;
  /* button reset */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── AURIX brand mark — shared base ───────────────────── */
.logo-aurix {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .60em;
  text-transform: uppercase;
  line-height: 1;
  display: block;
  background: linear-gradient(90deg, var(--aurix-blue-light) 0%, var(--aurix-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dashboard header variant — refined brand mark */
.logo-block .logo-aurix {
  font-size: 21px;
  letter-spacing: .38em;
  transform: scaleX(1.18) scaleY(0.86);
  transform-origin: center center;
  animation: logo-enter .3s .05s var(--ease-out) both;
  transition: opacity .15s, filter .15s;
  filter: drop-shadow(0 0 8px rgba(47,107,255,0.25)) drop-shadow(0 0 20px rgba(47,107,255,0.12));
}
#logoHome:hover .logo-aurix { opacity: .75; }
#logoHome:active .logo-aurix { opacity: .55; transition-duration: 60ms; }

/* Login hero variant */
.beta-logo-above .logo-aurix { font-size: 32px; }

.header-right {
  display: flex;
  align-items: center;
  justify-self: end;
  grid-column: 3;
  gap: 10px;
  position: relative; /* contains the dropdown panel */
}

/* Hidden proxy button — keeps revokeAccess listener, never shown */
#btnExit { display: none !important; }

/* ── Language switcher ─────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}

.lang-btn {
  background: none;
  border: none;
  border-radius: 7px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  opacity: .35;
  transition: opacity .18s var(--ease-out), background .18s var(--ease-out), transform .15s var(--ease-premium);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}

.lang-btn:hover  { opacity: .7; }
.lang-btn.active { opacity: 1; background: rgba(255,255,255,.08); }
.lang-btn:active { transform: scale(.9); }

.currency-toggle {
  display: flex;
  background: transparent;
  border: none;
  padding: 0;
  gap: 6px;
}

.currency-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: .2px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
}
.currency-btn:hover {
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  border-color: rgba(255,255,255,.18);
}
.currency-btn.active {
  background: rgba(255,255,255,.09);
  color: var(--text);
  border-color: rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.currency-btn:active {
  transform: scale(.92);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

.btn-add {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: opacity var(--dur-fast), transform var(--dur-med) var(--ease-premium),
              box-shadow var(--dur-med) var(--ease-out);
}
.btn-add:hover  { opacity: .9; transform: translateY(-1px); box-shadow: var(--glow-medium); }
.btn-add:active { transform: scale(.97); box-shadow: none; transition-duration: 70ms; }

.summary-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.btn-summary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: var(--font-weight-medium);
  padding: 6px var(--space-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out),
              color .15s, transform .2s var(--ease-premium),
              box-shadow .2s var(--ease-out), opacity .15s;
}
/* Dashboard add buttons — unified accent style, consistent with category screens */
.btn-primary,
.btn-secondary {
  background: rgba(79,142,247,.08);
  border: 1px solid rgba(79,142,247,.22);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(47,107,255,0.25);
  font-weight: var(--font-weight-semibold);
}
.btn-primary:hover,
.btn-secondary:hover {
  background: rgba(79,142,247,.15);
  border-color: rgba(79,142,247,.36);
  color: #aacbfa;
  transform: scale(1.02);
  filter: none;
  box-shadow: none;
}
.btn-primary:active,
.btn-secondary:active {
  transform: scale(.93);
  filter: brightness(.82);
  opacity: .82;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}


/* ── Summary Panel ─────────────────────────────────────── */
.summary-panel {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: var(--space-6) 40px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-med) var(--ease-premium);
}
.summary-panel:hover { border-color: var(--border-hi); }

/* Blobs removed */
.summary-panel::before,
.summary-panel::after { display: none; }

@keyframes panel-breathe {
  0%, 100% { opacity: 0; }
  50%       { opacity: 0; }
}

/* ── Card title — single source of truth ───────────────── */
.card-title {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1;
}

.summary-label {
  margin-bottom: 14px;
}

.summary-total {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255,255,255,0.15);
  animation: summaryFadeUp 0.6s ease forwards;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}
/* Compact size when value string exceeds ~12 characters */
.summary-total--compact {
  font-size: 32px;
}

@keyframes summaryFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.summary-perf {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .01em;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
  transition: color 300ms var(--ease-out);
}
.summary-perf.positive { color: var(--green); }
.summary-perf.negative { color: var(--red); }
.positive { text-shadow: 0 0 6px rgba(34,197,94,0.3); }
.negative { text-shadow: 0 0 6px rgba(239,68,68,0.25); }

.summary-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0;
}

.summary-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}
.summary-currency {
  flex-shrink: 0;
}
.summary-currency .currency-toggle {
  display: inline-flex;
  gap: 4px;
}

.summary-footer {
  margin-top: var(--space-3);
  padding-top: 14px;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Assets Section ────────────────────────────────────── */
.section-header h2 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ── Assets List ───────────────────────────────────────── */
.assets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ── Asset Card ────────────────────────────────────────── */
.asset-card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 18px var(--space-4) 18px 18px;
  display: grid;
  grid-template-columns: auto 1fr minmax(160px, auto) auto;
  align-items: center;
  gap: 0 var(--space-4);
  transition: border-color var(--dur-med) var(--ease-premium),
              transform var(--dur-med) var(--ease-premium),
              opacity 200ms var(--ease-out);
}
.asset-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.asset-card:active {
  transform: scale(.98);
  transition: transform var(--dur-tap) var(--ease-premium);
}

/* Stagger entrance — only fires when JS sets --card-i */
.asset-card[style*="--card-i"] {
  animation: card-enter .45s var(--ease-out) both;
  animation-delay: calc(var(--card-i, 0) * 45ms);
}

.asset-badge {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.asset-badge.crypto      { background: rgba(91,156,246,.15);  color: #5b9cf6; }
.asset-badge.stock       { background: rgba(192,200,216,.15); color: #c0c8d8; }
.asset-badge.etf         { background: rgba(143,157,186,.15); color: #8f9dba; }
.asset-badge.metal       { background: rgba(212,168,67,.15);  color: #d4a843; }
.asset-badge.cash        { background: rgba(74,222,128,.15);  color: #4ade80; }
.asset-badge.real_estate { background: rgba(167,139,250,.15); color: #a78bfa; }
.asset-badge.other       { background: rgba(107,114,128,.15); color: #6b7280; }

/* When a real logo is showing, remove the coloured pill — show only the icon */
.badge--has-logo {
  background: none !important;
  box-shadow: none !important;
}

.asset-badge-logo {
  width: 28px; height: 28px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  padding: 0 !important;
}
.badge--has-logo .asset-badge-text { display: none; }
.dar-badge .asset-badge-logo { width: 22px; height: 22px; }

.asset-info { min-width: 0; }

.asset-name {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
}

.asset-meta {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: 2px 6px;
}

/*
 * Asset value block: 2-column grid
 *   col 1 = units + price/unit   (center position)
 *   col 2 = total value + change (right position, dominant)
 *
 * .asset-value-sub uses display:contents so its children
 * (.units, .price, .change) participate directly in this grid.
 */
.asset-value {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 5px;
  align-items: center;
}

/* Total value — right col, top row — most dominant element */
.asset-value-amount {
  grid-column: 2;
  grid-row: 1;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  letter-spacing: -.02em;
}

/* Dissolve sub-row into the parent grid */
.asset-value-sub {
  display: contents;
}

/* Units — left col, top row — clearly visible */
.asset-value-sub .units {
  grid-column: 1;
  grid-row: 1;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Price per unit — left col, bottom row — secondary info */
.asset-value-sub .price {
  grid-column: 1;
  grid-row: 2;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Change % — right col, bottom row — under the total value */
.asset-value-sub .change {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.asset-value-sub .change.up   { color: var(--green); }
.asset-value-sub .change.down { color: var(--red); }

/* Monthly rent — real estate asset cards */
@keyframes re-rent-pulse {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.55; }
}
.asset-value-sub .asset-rent {
  grid-column: 2;
  grid-row: 2;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  animation: re-rent-pulse 5s ease-in-out infinite;
  will-change: opacity;
}

/* Monthly rent in category card */
.cat-card-rent-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.cat-card-rent-lbl {
  font-size: 9.5px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
}
.cat-card-rent {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--green);
  font-variant-numeric: tabular-nums;
  animation: re-rent-pulse 5s ease-in-out infinite;
  will-change: opacity;
}

/* ── Rental income banner (Real Estate drill-down) ── */
.rent-banner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: rgba(74,222,128,.07);
  border: 1px solid rgba(74,222,128,.18);
  border-radius: 12px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: 10px;
}
.rent-banner-label {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rent-banner-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  animation: re-rent-pulse 5s ease-in-out infinite;
  will-change: opacity;
}
.rent-banner--zero {
  background: rgba(255,255,255,.03);
  border-color: var(--border);
}
.rent-banner-zero {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}

.orig-price {
  color: var(--text-dim);
  font-size: 10px;
}

.curr-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: var(--space-1);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.curr-btn.active { background: var(--accent); color: #fff; }

.asset-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: var(--space-3);
  border-left: 1px solid var(--border);
}

.btn-add-pos,
.btn-reduce,
.btn-delete,
.btn-edit-re {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  color: rgba(255,255,255,.52);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
}
.btn-edit-re:hover {
  color: #a78bfa;
  background: rgba(167,139,250,.10);
  border-color: rgba(167,139,250,.25);
  transform: translateY(-1px);
}
.btn-add-pos:hover {
  color: var(--green);
  background: var(--green-dim);
  border-color: rgba(39,199,104,.25);
  transform: translateY(-1px);
}
.btn-reduce:hover {
  color: var(--orange);
  background: rgba(240,136,62,.10);
  border-color: rgba(240,136,62,.25);
  transform: translateY(-1px);
}
.btn-delete:hover {
  color: var(--red);
  background: rgba(232,69,69,.10);
  border-color: rgba(232,69,69,.25);
  transform: translateY(-1px);
}
.btn-add-pos:active,
.btn-reduce:active,
.btn-delete:active,
.btn-edit-re:active {
  transform: scale(.91);
  filter: brightness(.82);
  opacity: .82;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

/* ── Assets Section top spacing ────────────────────────── */
.assets-section { margin-top: var(--space-5); }

/* ── Market status badge — top-right corner of cat-card ─── */
.market-status {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  opacity: 0.75;
  pointer-events: none; /* let clicks pass through to the card */
}
.market-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.market-status.open   { color: #22c55e; }
.market-status.closed { color: #ef4444; }
.market-status.crypto { color: #a855f7; }
.market-status.open   .dot { background: #22c55e; animation: mkt-pulse 1.5s ease-in-out infinite; }
.market-status.closed .dot { background: #ef4444; }
.market-status.crypto .dot { background: #a855f7; }

@keyframes mkt-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* Gold-specific dot — kept for updateGoldTimestamps() back-compat */
.gold-live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse-dot-glow 2s ease-out infinite;
}
.gold-live-dot.stale {
  background: var(--text-dim);
  animation: none;
}
/* Gold text spans — allow shrinking so they stay within narrow columns */
.js-gold-live,
.js-gold-change,
.js-gold-updated {
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gold-change.positive { color: var(--green); }
.gold-change.negative { color: var(--red); }
.gold-change.neutral  { color: var(--text-muted); }

/* ── Empty State ───────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px var(--space-4);
  color: var(--text);
  border: 1px dashed rgba(79,142,247,.22);
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 0%, rgba(79,142,247,.03) 0%, transparent 70%);
}
.empty-icon {
  font-size: 32px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.empty-state p { font-size: var(--font-size-sm); line-height: 1.6; }
.empty-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── Body scroll lock when any modal is open ───────────── */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  touch-action: none;
}

/* ── Modal ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease-out), backdrop-filter .32s var(--ease-out),
              -webkit-backdrop-filter .32s var(--ease-out);
  padding: var(--space-3);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal {
  background: rgba(20,20,25,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
  overscroll-behavior: none;
}
.modal-overlay.open .modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

.modal-close {
  background: none; border: none;
  color: var(--text-muted);
  font-size: 15px; cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  transition: color .15s var(--ease-out), background .15s var(--ease-out),
              transform .15s var(--ease-premium);
}
.modal-close:hover  { color: var(--text); background: var(--bg-card-2); }
.modal-close:active { transform: scale(.85); transition-duration: 70ms; }

.modal-body { padding: var(--space-5); }

/* ── Form ──────────────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.form-group label {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.form-group input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text);
  font-size: 15px;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  outline: none;
  width: 100%;
}
.form-group input::placeholder { color: var(--text-dim); }
.form-group input:focus { border-color: var(--accent); box-shadow: var(--glow-medium); }

/* ── Type Toggle ───────────────────────────────────────── */
.type-toggle {
  display: flex;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}
.type-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: var(--space-1);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .18s var(--ease-out), color .15s, box-shadow .18s var(--ease-out);
}
.type-btn:hover { background: rgba(255,255,255,.05); color: var(--text); }
.type-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 10px rgba(79,142,247,.25);
}

/* ── Form Preview ──────────────────────────────────────── */
.form-preview {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  text-align: center;
}
.form-preview strong { color: var(--text); font-size: 15px; }

/* ── Submit Button ─────────────────────────────────────── */
.modal-cta {
  position: sticky;
  bottom: 0;
  padding: var(--space-3);
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(5,7,13,0.95),
    rgba(5,7,13,0.7),
    rgba(5,7,13,0)
  );
}
.modal-cta button {
  width: 100%;
}

.btn-submit {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn-submit:hover  { opacity: .93; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(79,142,247,.3); }
.btn-submit:active { transform: scale(.97); opacity: .95; box-shadow: none; transition-duration: 80ms; }

/* ── Modal size variant ────────────────────────────────── */
.modal--sm { max-width: 400px; }

/* ── Input hint ────────────────────────────────────────── */
.input-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: -4px;
}

/* ── Reduce: asset info chip ───────────────────────────── */
.reduce-asset-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 14px;
  margin-bottom: var(--space-4);
}
.reduce-asset-info .asset-badge {
  width: 36px; height: 36px;
  font-size: 11px;
}
.reduce-info-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}
.reduce-info-qty {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ── Reduce preview ────────────────────────────────────── */
.reduce-preview {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px var(--space-3);
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.reduce-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
}
.reduce-preview-row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── Reduce warning / error ────────────────────────────── */
.reduce-warning {
  font-size: 12px;
  color: #f39c12;
  background: rgba(243,156,18,.08);
  border: 1px solid rgba(243,156,18,.2);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-3);
  display: none;
}
.reduce-warning.visible { display: block; }

.reduce-error {
  font-size: 12px;
  color: var(--red);
  margin-bottom: var(--space-2);
  min-height: 16px;
}

/* ── Submit orange variant ─────────────────────────────── */
.btn-submit--orange {
  background: #e67e22;
}
.btn-submit--orange:hover { opacity: .93; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(230,126,34,.3); }

/* ── Submit green variant ──────────────────────────────── */
.btn-submit--green {
  background: var(--green);
}
.btn-submit--green:hover { opacity: .93; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(74,222,128,.25); }

/* ── Hero view — full-screen overlay ───────────────────── */
#hero-view {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  contain: layout paint size;
}
#hero-view[hidden]  { display: none; }
#hero-view canvas   { pointer-events: none; }
#hero-view .hero    { flex: 1; min-height: 0; height: 100%; }

/* Hard isolation — hero elements invisible outside hero-active */
body:not(.hero-active) .hero-glow,
body:not(.hero-active) .hero-fade,
body:not(.hero-active) #orb-canvas {
  display: none !important;
  opacity: 0 !important;
}

/* ── Hero Landing ───────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px);
  padding: 0 var(--space-5);
  overflow: hidden;
}

/* Fade layer — combined radial + lateral + vertical dissolve */
.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at center,
      transparent 45%,
      rgba(0,0,0,0.20) 65%,
      rgba(0,0,0,0.60) 85%,
      #000 100%
    ),
    linear-gradient(to right,
      #000 0%,
      transparent 12%,
      transparent 88%,
      #000 100%
    ),
    linear-gradient(to bottom,
      #000 0%,
      transparent 18%,
      transparent 80%,
      #000 100%
    );
}

.hero-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-8vh);
  position: relative;
  z-index: 3;
}

.orb-wrapper {
  position: relative;
  isolation: isolate;
}

/* Ambient glow — bigger than viewport so overflow crop is invisible */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140vw;
  height: 140vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,255,170,0.22) 0%,
    rgba(0,255,170,0.10) 28%,
    rgba(0,255,170,0.04) 45%,
    transparent 70%
  );
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

/* Canvas orb — isolated from global CSS contamination */
.orb-canvas {
  all: unset;
  display: block;
  width: clamp(240px, 22vw, 300px);
  height: clamp(240px, 22vw, 300px);
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 420px;
  text-align: center;
}

.hero-text {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.9;
  color: var(--text-bright);
  margin: 0;
}

.hero-cta {
  background: none;
  border: none;
  color: var(--text-bright);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  cursor: pointer;
  padding: var(--space-1) 0;
  transition: opacity 0.2s ease;
}

.hero-cta:hover { opacity: 1; }

@media (max-width: 768px) {
  .hero {
    position: relative;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 64px;
    padding-bottom: var(--space-5);
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;
    background: #000;
  }

  .hero-core {
    transform: none;
    width: 100%;
  }

  .orb-canvas {
    width: 170px !important;
    height: 170px !important;
    margin: 0 auto 18px;
  }

  .hero-copy { padding: 0 var(--space-4); }
  .hero-text  { font-size: var(--font-size-sm); }
  .hero-cta   { font-size: 11px; }
}

/* ── Card base (design system hook) ────────────────────── */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,0.06), transparent 40%);
  pointer-events: none;
  z-index: 0;
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
  }
}

.row:hover {
  background: rgba(255,255,255,0.03);
}

/* ── Dashboard top row / Hero Card ────────────────────── */
.dashboard-top {
  margin-top: var(--space-4);
  margin-bottom: 28px;
}

.hero-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%),
    var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 20px rgba(47,107,255,0.06);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  align-items: stretch;   /* both columns fill full height — keeps divider intact */
  transition: border-color var(--dur-med) var(--ease-premium);
}

.hero-card:hover { border-color: var(--border-hi); }

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 20% 0%,
    rgba(47,107,255,0.15),
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Hero left (total value + actions) ─────────────────── */
.hero-left {
  padding: var(--space-5) var(--space-4) 28px 36px; /* top matches hero-right so titles align */
  position: relative;
  z-index: 1;
  border-right: 1px solid rgba(255,255,255,.055);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;       /* prevent value from bleeding into chart */
  max-width: 100%;
  min-width: 0;
}

/* ── Hero right (chart) ────────────────────────────────── */
.hero-right {
  padding: var(--space-5) var(--space-5) 18px var(--space-4); /* top matches hero-left */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

/* ── Distribution Section ─────────────────────────────── */
.distribution-section {
  margin-bottom: var(--space-6);
  min-width: 0;
}

.portfolio-combined-card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  transition: border-color .22s var(--ease-out), transform .22s var(--ease-out);
  will-change: transform;
  cursor: pointer;
}

.portfolio-combined-card:hover { border-color: var(--border-hi); }

.distribution-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.watchlist-section {
  display: none;
}

.watchlist-inner-card {
  padding: var(--space-2);
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.watchlist-inner-card:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.distribution-header { margin-bottom: var(--space-3); }

.distribution-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  overflow: visible; /* never clip the donut arc on hover */
}

.donut-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  overflow: visible;
}
.donut-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.donut-center-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  gap: 5px;
}

.donut-center-val {
  font-size: var(--font-size-md);
  font-weight: 800;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.02em;
  transition: opacity .18s ease;
}

.donut-center-sub {
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .7px;
  text-align: center;
  white-space: nowrap;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .18s ease;
}

.distribution-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px var(--space-1);
  margin: 0 -8px;
  border-radius: 7px;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}

.legend-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-item:hover {
  background: rgba(255,255,255,.05);
  transform: translateX(2px);
}

.legend-item--active {
  background: rgba(255,255,255,.07);
}

/* Click-pinned filter: stronger background + left accent line */
.legend-item--pinned {
  background: rgba(255,255,255,.11);
  box-shadow: inset 2px 0 0 currentColor;
}
.legend-item--pinned .legend-name {
  color: var(--text-bright);
  font-weight: var(--font-weight-semibold);
}

.legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .15s var(--ease-premium);
}

.legend-item--active .legend-dot,
.legend-item:hover    .legend-dot {
  transform: scale(1.3);
}

.distribution-legend span { white-space: nowrap; }

.legend-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-percent {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.75);
  margin-left: 2px;
}

/* ── Chart Section (legacy selector kept for compatibility) */
/* Chart is now embedded inside .hero-right — no card wrapper */
.chart-section {
  /* no-op: chart lives inside .hero-right */
}

.chart-line {
  stroke-width: 2.2;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,0.25))
    drop-shadow(0 0 12px rgba(255,255,255,0.15));
}

.chart-grid line {
  opacity: 0.15;
}

.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: var(--space-2);
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.perf-toggle {
  display: flex;
  background: transparent;
  border: none;
  padding: 0;
  gap: 4px;
}

.perf-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: .2px;
  min-width: 28px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
}
.perf-btn:hover {
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  border-color: rgba(255,255,255,.18);
}
.perf-btn.active {
  background: rgba(255,255,255,.09);
  color: var(--text);
  border-color: rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.perf-btn:active {
  transform: scale(.92);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

.chart-title { margin-bottom: 6px; }

.chart-change {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.chart-change.up   { color: var(--green); }
.chart-change.down { color: var(--red); }
.chart-change.flat { color: var(--text-muted); }

.range-toggle {
  display: flex;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.range-btn {
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 5px var(--space-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  letter-spacing: .6px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
}
.range-btn.active             { background: var(--accent); color: #fff; box-shadow: var(--glow-medium); }
.range-btn:not(.active):hover { color: var(--text); background: rgba(255,255,255,.05); }
.range-btn:active {
  transform: scale(.92);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

.chart-wrap {
  position: relative;
  height: 190px;
  overflow: hidden; /* contain the energy-sweep glow inside the chart bounds */
  background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent);
}

/* Energy sweep removed — clean chart surface */
.chart-wrap::after { display: none; }

.chart-no-data {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}

/* ── Chart interactive tooltip ─────────────────────────── */
.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(8, 10, 18, 0.88);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  padding: 6px 10px;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,.5),
              0 0 12px rgba(255,255,255,0.04);
  transition: opacity 100ms var(--ease-out);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chart-tooltip--visible {
  opacity: 1;
}
.chart-tooltip-time {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .3px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.chart-tooltip-val {
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -.01em;
}
.chart-tooltip-val[data-dir="up"]   { color: var(--green); }
.chart-tooltip-val[data-dir="down"] { color: var(--red); }
.chart-tooltip-val[data-dir="flat"] { color: var(--text); }

/* ── Category cards ────────────────────────────────────── */
.categories-section { margin-bottom: 28px; }

.categories-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  align-items: stretch;
  gap: var(--space-3);
  touch-action: pan-y;
}

.cat-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: var(--space-4) 22px 18px;
  min-height: 130px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  text-align: left;
  touch-action: auto;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.18),
    inset 0 1px 1px rgba(255,255,255,0.04);
  transition: border-color var(--dur-med) var(--ease-premium),
              transform     var(--dur-med) var(--ease-premium),
              box-shadow    var(--dur-med) var(--ease-premium),
              opacity       200ms var(--ease-out);
}
.cat-card.dragging {
  transition: none !important;
  z-index: 1000;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.05);
  cursor: grabbing;
}
.cat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25),
              0 0 10px rgba(255,255,255,0.05),
              inset 0 1px 0 rgba(255,255,255,0.07);
}
.cat-card:active,
.cat-card.is-pressing {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12),
              inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform var(--dur-tap) var(--ease-premium),
              box-shadow var(--dur-tap) var(--ease-premium),
              opacity    var(--dur-tap);
}

/* Dim siblings when one card is hovered — focus effect */
@media (hover: hover) {
  .categories-grid:has(.cat-card:hover) .cat-card:not(:hover) {
    opacity: 0.68;
  }
}

.cat-card--active {
  border-color: var(--accent);
  background: rgba(79,142,247,.07);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* Empty category — no assets yet: visible but clearly inactive */
.cat-card--empty {
  opacity: 0.9;
}
.cat-card--empty .cat-card-value { color: var(--text-muted); }
.cat-card--empty:hover { border-color: var(--border-hi); }
.cat-card--empty .cat-card-visual { opacity: 0.25; }

.cat-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}

.cat-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-card-name {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cat-card--active .cat-card-name { color: var(--accent); }

.cat-card-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-top: 2px;
}

.cat-card-pct {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Hint — hidden until hover (desktop) or always faint (touch) */
.cat-card-hint {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .04em;
  margin-top: auto;
  padding-top: var(--space-1);
  opacity: 0;
  transition: opacity .2s;
}
@media (hover: hover) {
  .cat-card:hover .cat-card-hint { opacity: 0.55; }
}
@media (hover: none) {
  .cat-card-hint { opacity: 0.4; }
}

/* Tablet: 2 columns */
@media (max-width: 700px) {
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: single column */
@media (max-width: 480px) {
  .categories-grid { grid-template-columns: 1fr; gap: 10px; }
  .cat-card { min-height: 100px; }
}
/* Blur only on desktop — skip on mobile to avoid GPU lag */
@media (min-width: 768px) {
  .cat-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
@media (max-width: 767px) {
  .cat-card { background: var(--surface-2); }
}

/* ── Category card content wrapper (sits above visual) ──── */
.cat-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Reserve right zone for the absolute-positioned visual (96px wide at right:14px) */
  max-width: calc(100% - 88px);
}

/* ── Category card visual system ────────────────────────── */

/* Category card: no ambient glow — clean surface */
.cat-card::before { display: none; }
.cat-card--empty::before { display: none; }

/* Visual container — bottom-right logo zone */
.cat-card-visual {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  background: none !important;
  box-shadow: none !important;
}

.cat-card-visual img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 50%;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0;
  opacity: 1 !important;
  transform: none !important;
}

.logo-fallback {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: rgba(255,255,255,0.6);
}

@media (max-width: 768px) {
  .cat-card-visual img { width: 22px; height: 22px; }
  .logo-fallback        { width: 22px; height: 22px; }
}

/* ── Section filter nav bar (category view) ─────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.section-filter-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.assets-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-premium),
              filter var(--dur-med) var(--ease-premium);
}
.assets-back-btn:hover {
  color: var(--text);
  border-color: var(--border-hi);
  background: rgba(255,255,255,.04);
  transform: translateX(-2px);
}
.assets-back-btn:active {
  transform: scale(.92) translateX(-1px);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

.section-filter-name {
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Context-aware "+ Add [category]" button in the detail view header */
.btn-add-context {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--accent);
  background: rgba(79,142,247,.08);
  border: 1px solid rgba(79,142,247,.2);
  border-radius: var(--radius-sm);
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-premium);
}
.btn-add-context:hover {
  background: rgba(79,142,247,.15);
  border-color: rgba(79,142,247,.36);
  color: #aacbfa;
  transform: scale(1.02);
}
.btn-add-context:active {
  transform: scale(.93);
  filter: brightness(.82);
  opacity: .82;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

/* ── Summary update indicator ──────────────────────────── */
.summary-divider { color: var(--text-dim); margin: 0 10px; }

.update-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.update-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
  transition: background .3s;
}
.update-dot.ok {
  background: var(--green);
  animation: pulse-live 1.8s ease-in-out infinite;
}
.update-dot.error       { background: var(--red); }
.update-dot.refreshing  {
  background: #f39c12;
  animation: pulse-dot .9s ease-in-out infinite alternate;
}
@keyframes pulse-live {
  0%   { opacity: .4; transform: scale(1); }
  50%  { opacity: 1;  transform: scale(1.4); }
  100% { opacity: .4; transform: scale(1); }
}
/* Ripple-glow for live status dots (status-dot.live, gold-live-dot) */
@keyframes pulse-dot-glow {
  0%   { box-shadow: 0 0 0 0   rgba(39,199,104,.55); }
  65%  { box-shadow: 0 0 0 5px rgba(39,199,104,.0);  }
  100% { box-shadow: 0 0 0 0   rgba(39,199,104,.0);  }
}
@keyframes pulse-dot {
  from { opacity: .35; transform: scale(.75); }
  to   { opacity: 1;   transform: scale(1.15); }
}

/* ── Lookup status ─────────────────────────────────────── */
.lookup-status {
  font-size: 12px;
  min-height: 14px;
  margin-top: -2px;
  padding: 0 2px;
  transition: color .2s;
}
.lookup-status.loading { color: var(--text-muted); }
.lookup-status.ok      { color: var(--green); }
.lookup-status.error   { color: var(--red); }

/* ── Price input with LIVE badge ───────────────────────── */
.price-input-wrap {
  position: relative;
  width: 100%;
}
.price-input-wrap input { padding-right: 54px; }

.live-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--green);
  background: rgba(46,204,113,.12);
  border: 1px solid rgba(46,204,113,.22);
  border-radius: 4px;
  padding: 2px 6px;
  pointer-events: none;
  display: none;
}

.form-group input[readonly] {
  color: var(--text-muted);
  cursor: default;
}


/* ── Flash animation on price update ──────────────────── */
@keyframes flash-up {
  0%   { color: var(--green); transform: translateY(-3px); }
  30%  { transform: translateY(0); }
  100% { color: inherit; }
}
@keyframes flash-down {
  0%   { color: var(--red); transform: translateY(3px); }
  30%  { transform: translateY(0); }
  100% { color: inherit; }
}
.flash-up   { animation: flash-up   0.85s var(--ease-out) forwards; }
.flash-down { animation: flash-down 0.85s var(--ease-out) forwards; }

/* ── Flash + lift animation on total value update ──────── */
@keyframes flash-value-up {
  0%   { color: var(--green); transform: translateY(-4px) scale(1.015); filter: brightness(1.25); }
  40%  { transform: translateY(0) scale(1); filter: brightness(1); }
  100% { color: inherit; }
}
@keyframes flash-value-down {
  0%   { color: var(--red); transform: translateY(4px) scale(.985); filter: brightness(0.9); }
  40%  { transform: translateY(0) scale(1); filter: brightness(1); }
  100% { color: inherit; }
}
@keyframes value-lift {
  0%   { opacity: .85; }
  100% { opacity: 1; }
}
.value-flash-up   { animation: flash-value-up   500ms var(--ease-out) forwards; }
.value-flash-down { animation: flash-value-down 500ms var(--ease-out) forwards; }
.value-lift       { animation: value-lift       250ms var(--ease-out) forwards; }

/* ── Asset search ──────────────────────────────────────── */
.search-form-group {
  position: relative;
  margin-bottom: var(--space-3);
}

.search-field-wrap {
  position: relative;
}

.search-field-wrap input {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 40px var(--space-2) var(--space-3);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.search-field-wrap input::placeholder { color: var(--text-dim); }
.search-field-wrap input:focus {
  border-color: var(--accent);
  box-shadow: var(--glow-medium);
}

.search-clear {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-dim); cursor: pointer;
  font-size: var(--font-size-sm);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.search-clear:hover { color: var(--text); background: rgba(255,255,255,.07); }

/* ── Suggestions dropdown ──────────────────────────────── */
.asset-suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  z-index: 300;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: none;
}
.asset-suggestions.open { display: block; }
/* Fade at bottom signals more content is scrollable */
.asset-suggestions.open::after {
  content: '';
  position: sticky;
  bottom: 0;
  display: block;
  height: 28px;
  background: linear-gradient(to top, var(--bg-card) 0%, transparent 100%);
  pointer-events: none;
  margin-top: -28px;
}

.suggestion-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .18s var(--ease-out);
}
.suggestion-item:hover,
.suggestion-item.focused { background: var(--bg-card-2); }
.suggestion-item + .suggestion-item { border-top: 1px solid rgba(255,255,255,.04); }

.sugg-badge {
  width: 34px; height: 34px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .2px;
  flex-shrink: 0;
}
.sugg-badge.crypto { background: rgba(91,156,246,.18);  color: #5b9cf6; }
.sugg-badge.stock  { background: rgba(192,200,216,.18); color: #c0c8d8; }
.sugg-badge.etf    { background: rgba(143,157,186,.18); color: #8f9dba; }
.sugg-badge.metal  { background: rgba(212,168,67,.18);  color: #d4a843; }
.sugg-badge.manual { background: rgba(107,116,148,.14); color: var(--text-muted); font-size: 15px; }

.sugg-info { min-width: 0; }
.sugg-name {
  font-size: 13px; font-weight: var(--font-weight-semibold);
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sugg-ticker { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.sugg-type {
  font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; flex-shrink: 0;
}
.sugg-type.crypto { background: rgba(91,156,246,.12);  color: #5b9cf6; }
.sugg-type.stock  { background: rgba(192,200,216,.12); color: #c0c8d8; }
.sugg-type.etf    { background: rgba(143,157,186,.12); color: #8f9dba; }
.sugg-type.metal  { background: rgba(212,168,67,.12);  color: #d4a843; }
.sugg-type.manual { background: rgba(107,116,148,.10); color: var(--text-muted); }

.sugg-section-label {
  padding: var(--space-1) 14px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.suggestion-loading {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--space-1) 14px;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid rgba(255,255,255,.04);
  letter-spacing: .3px;
}

.suggestion-empty {
  padding: var(--space-2) 14px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

@keyframes dots-fade {
  0%, 100% { opacity: .3; }
  50%       { opacity: 1; }
}
.sugg-dot-anim {
  letter-spacing: 2px;
  animation: dots-fade .9s ease-in-out infinite;
}

/* ── Selected asset chip ───────────────────────────────── */
.selected-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-2) 10px 14px;
  margin-bottom: var(--space-3);
}

.chip-badge {
  width: 36px; height: 36px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.chip-badge.crypto { background: rgba(91,156,246,.18);  color: #5b9cf6; }
.chip-badge.stock  { background: rgba(192,200,216,.18); color: #c0c8d8; }
.chip-badge.etf    { background: rgba(143,157,186,.18); color: #8f9dba; }
.chip-badge.metal  { background: rgba(212,168,67,.18);  color: #d4a843; }

.chip-info { flex: 1; min-width: 0; }
.chip-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text); }
.chip-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.chip-price {
  font-size: 13px; font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chip-clear {
  background: none; border: none;
  color: var(--text-dim); cursor: pointer;
  font-size: 12px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.chip-clear:hover { color: var(--text); background: rgba(255,255,255,.07); }

/* ── Search type filters ───────────────────────────────── */
.search-filters {
  display: flex;
  gap: 6px;
  margin: -4px 0 14px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
}
.filter-btn:hover  { border-color: var(--accent); color: var(--text); background: rgba(79,142,247,.06); }
.filter-btn:active {
  transform: scale(.92);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}
.filter-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}


/* ── Liquidity modal currency toggle ───────────────────── */
.type-toggle:has(.liq-btn),
.type-toggle:has(.re-curr-btn) {
  background: transparent;
  border: none;
  padding: 0;
  gap: 6px;
}

.liq-btn,
.re-curr-btn {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: var(--space-1) 14px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .18s var(--ease-out), color .15s, border-color .18s var(--ease-out),
              box-shadow .18s var(--ease-out), transform .18s var(--ease-premium);
}
.liq-btn:hover,
.re-curr-btn:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-color: rgba(255,255,255,.22);
}
.liq-btn.active,
.re-curr-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 12px rgba(79,142,247,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.liq-btn:active,
.re-curr-btn:active { transform: scale(0.93); transition-duration: 70ms; }

/* ── Type-toggle buttons (karats, units) ───────────────── */
.type-btn {
  transition: background .18s var(--ease-out), color .15s, box-shadow .18s var(--ease-out),
              transform .18s var(--ease-premium);
}
.type-btn:active { transform: scale(0.93); transition-duration: 70ms; }

/* ── Asset skeleton (loading placeholder) ──────────────── */
.asset-skeleton {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  height: 82px;
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,.03) 25%,
    rgba(255,255,255,.08) 37%,
    rgba(255,255,255,.03) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite, fade-in .3s var(--ease-out) both;
}


/* ── Numeric value smooth transition + hover glow ─────────── */
.asset-value-amount,
.donut-center-val,
.summary-total {
  transition: color 250ms var(--ease-out), opacity 200ms var(--ease-out),
              filter 220ms var(--ease-out);
}
.summary-panel:hover .summary-total {
  filter: drop-shadow(0 0 16px rgba(255,255,255,.12)) brightness(1.08);
}
.asset-card:hover .asset-value-amount {
  filter: brightness(1.12);
}

/* ── Responsive ────────────────────────────────────────── */

/* Disable sticky hover lifts on touch devices */
@media (hover: none) {
  .summary-panel:hover,
  .distribution-section:hover,
  .chart-section:hover,
  .asset-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
  }
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-summary-action:hover,
  .btn-add:hover {
    transform: none;
    filter: none;
    box-shadow: none;
  }
  .legend-item:hover,
  .menu-item:hover,
  .assets-back-btn:hover {
    transform: none;
  }
  /* Disable hover lift on hero card for touch devices */
  .hero-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* Disable will-change on touch to save GPU memory */
  .hero-card,
  .distribution-section,
  .asset-card,
  .modal {
    will-change: auto;
  }
}

/* ── Mobile header: center logo (≤ 768px) ─────────────── */
@media (max-width: 768px) {
  .header {
    grid-template-columns: 1fr;
    justify-items: center;
    position: relative; /* contain absolute header-right */
  }
  .header-left {
    grid-column: 1;
  }
  .logo-block {
    align-items: center;
  }
  /* Pin flag switcher to top-right without displacing the logo */
  .header-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    grid-column: unset;
  }
}

/* ── Large mobile / tablet (≤ 640px) ──────────────────── */
@media (max-width: 640px) {
  /* App shell — compact side padding */
  .app {
    padding: 0 var(--space-3) 48px;
  }

  /* Header — tighter vertical rhythm */
  .header {
    padding: var(--space-2) 0 var(--space-2);
    margin-bottom: 0;
  }
  .logo-block .logo-aurix { font-size: 21px; }

  /* Dashboard top — breathing room */
  .dashboard-top {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
  }

  /* Hero card — vertical flex column on mobile */
  .hero-card {
    display: flex;          /* override the desktop CSS grid */
    flex-direction: column;
    align-items: stretch;   /* reset desktop align-items:center so children fill full width */
    grid-template-columns: 1fr; /* no-op on flex, kept for clarity */
    border-radius: var(--radius-md);
  }
  .hero-left {
    flex-shrink: 0;         /* never compress the value block */
    height: auto;           /* reset the desktop height:100% */
    padding: 18px var(--space-4) var(--space-1) var(--space-4) !important;
    border-right: none;
    border-bottom: none;
  }
  .hero-right {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-4) var(--space-4);
  }
  .summary-label {
    margin-bottom: var(--space-1);
  }
  .summary-total {
    font-size: clamp(26px, 8vw, 38px);
    color: #ffffff;
    margin-bottom: 6px;
  }
  .summary-meta {
    font-size: 12px;
    min-width: 0;
  }
  .summary-divider { margin: 0 6px; }
  .summary-meta-row {
    gap: 10px;
  }
  .summary-footer {
    margin-top: var(--space-1) !important;
    padding-top: var(--space-2);
    border-top: none;
    gap: 6px;
  }
  .summary-actions  { flex-direction: row; flex-wrap: wrap; gap: 6px; width: auto; }
  /* Action buttons: keep same style as desktop — only size/padding adjusted */
  .btn-summary-action {
    width: auto;
    min-height: 30px;
    font-size: 11px;
    padding: 5px var(--space-2);
    border-radius: 6px;
  }
  /* btn-primary / btn-secondary: NO colour overrides — desktop values apply unchanged */

  /* Distribution — stack donut + legend vertically */
  .portfolio-combined-card {
    padding: var(--space-4) var(--space-3);
    border-radius: 14px;
    gap: var(--space-3);
  }
  .distribution-section {
    margin-bottom: 28px;
  }
  .distribution-header { margin-bottom: var(--space-2); }
  .distribution-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
  .donut-wrap {
    width: min(180px, 50vw);
    height: min(180px, 50vw);
    flex-shrink: 0;
  }
  .distribution-legend {
    width: 100%;
    gap: 2px;
  }
  .legend-item {
    padding: 4px 7px;
    margin: 0 -7px;
  }

  /* Chart — dominant on mobile */
  .chart-header {
    flex-shrink: 0;         /* keep controls visible, never compress */
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
    gap: 10px;
  }
  .chart-controls {
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
  }
  .chart-wrap {
    height: 220px;
    min-height: 220px;
    margin-top: var(--space-3);
    overflow: hidden;
  }
  .chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
  .chart-change { font-size: 13px; }
  .range-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  .perf-btn {
    padding: 5px 10px;
    font-size: 11px;
    min-height: 30px;
  }

  /* Assets section */
  .assets-section { margin-top: 28px; }
  .assets-list    { gap: var(--space-1); }
}

/* ── Mobile phones (≤ 520px) ───────────────────────────── */
@media (max-width: 520px) {
  /* Asset card: badge+info | value (row 2) | actions */
  .asset-card {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 var(--space-2);
    padding: 14px var(--space-2);
    border-radius: 10px;
  }

  /* Value block drops to row 2 under the asset name */
  .asset-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    grid-column: 2;
    grid-row: 2;
    padding-top: var(--space-1);
  }

  .asset-value-sub {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--space-1);
  }

  .asset-value-sub .units,
  .asset-value-sub .price,
  .asset-value-sub .change,
  .asset-value-sub .asset-rent {
    grid-column: unset;
    grid-row: unset;
    text-align: left;
  }

  .asset-value-amount {
    grid-column: unset;
    grid-row: unset;
    font-size: 15px;
  }

  /* Action buttons: stacked vertically, thumb-friendly size */
  .asset-actions {
    grid-column: 3;
    grid-row: 1 / 3;
    border-left: none;
    padding-left: 6px;
    flex-direction: column;
    gap: 6px;
    align-self: center;
  }
  .btn-add-pos,
  .btn-reduce,
  .btn-delete,
  .btn-edit-re {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: var(--font-size-md);
  }

  /* Modals slide up as bottom sheets */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    transform: translateY(60px) scale(0.98);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, opacity;
    /* Constrain height so body can scroll independently */
    max-height: 88svh;
    max-height: 88vh; /* fallback for older Safari */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal-overlay.open .modal {
    transform: translateY(0) scale(1);
  }
  /* Header stays fixed at top of sheet */
  .modal-header { flex-shrink: 0; }
  /* Form body scrolls within the constrained sheet */
  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    will-change: transform;
    flex: 1;
    min-height: 0; /* required for flex child to shrink below content height */
    padding-bottom: 140px;
  }
  /* Suggestions list: tighter max-height on small screens */
  .asset-suggestions { max-height: 42vh; }

  .hero-left     { flex-shrink: 0; padding: var(--space-3) 14px 10px; }
  .hero-right    { padding: 14px 14px 18px; }
  .form-row      { grid-template-columns: 1fr; }
}

/* ── Very small phones (≤ 375px) ───────────────────────── */
@media (max-width: 375px) {
  .app            { padding: 0 var(--space-2) 40px; }
  .summary-total  { font-size: 24px; }
  .asset-card     { padding: var(--space-2) 10px; gap: 0 10px; }
  .btn-add-pos,
  .btn-reduce,
  .btn-delete,
  .btn-edit-re    { width: 36px; height: 36px; }
  .hero-left      { flex-shrink: 0; padding: var(--space-3) var(--space-2) var(--space-2); }
  .hero-right     { padding: 14px var(--space-2) var(--space-3); }
}

/* ── Dashboard entrance animation ──────────────────────── */

/* Element slide-in (used via inline JS transitions, not a class) */
@keyframes dash-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Glow pulse on the total balance after count-up completes */
@keyframes balance-glow {
  0%, 100% { filter: none; }
  38%       {
    filter:
      drop-shadow(0 0 10px rgba(79,142,247,.50))
      drop-shadow(0 0 28px rgba(79,142,247,.18));
  }
}
.balance-glow-pulse {
  animation: balance-glow .95s var(--ease-out) forwards;
}

/* Chart: cover slides away left→right revealing line; leading edge has a soft blue pen-glow */
@keyframes chart-wipe {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.chart-wrap--drawing::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Gradient: pen-glow at the left (leading) edge, solid cover behind it */
  background: linear-gradient(to right,
    rgba(79,142,247,.28) 0px,
    rgba(79,142,247,.08) 10px,
    rgba(79,142,247,.02) 22px,
    #0d1018             28px  /* matches hero-card right-side background */
  );
  transform-origin: right center;
  animation: chart-wipe .95s .05s var(--ease-out) forwards;
  pointer-events: none;
  z-index: 2;
}

/* Category card lift-wave on entrance */
@keyframes cat-card-arrive {
  0%   { transform: translateY(0) scale(1); }
  34%  { transform: translateY(-5px) scale(1.018); }
  68%  { transform: translateY(1.5px) scale(0.998); }
  100% { transform: translateY(0) scale(1); }
}
.cat-card--arrive {
  animation: cat-card-arrive .46s var(--ease-out);
}

/* Staggered fade-up entrance — JS adds .cat-card--visible one by one */
.categories-grid .cat-card {
  opacity: 0;
  transform: translateY(8px);
}
.categories-grid .cat-card.cat-card--visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Suppress hover transforms while entrance sequence is running */
.app--animating .hero-card:hover,
.app--animating .distribution-section:hover,
.app--animating .portfolio-combined-card:hover,
.app--animating .cat-card:hover {
  transform: none !important;
}

/* No motion — instant reveal, no animations */
@media (prefers-reduced-motion: reduce) {
  .balance-glow-pulse { animation: none; }
  .cat-card--arrive   { animation: none; }
  /* Skip stagger — show all cards immediately */
  .categories-grid .cat-card          { opacity: 1; transform: none; }
  .categories-grid .cat-card.cat-card--visible { transition: none; }
  .chart-wrap--drawing::after { animation: none; opacity: 0; }
  .hero-card::before { animation: none; }
  .cat-card-visual img { opacity: 1; transform: none; }
  .chart-wrap::after { animation: none; opacity: 0; }
  .logo-block .logo-aurix { animation: none; }
  /* Strip transitions for reduced-motion users */
  .hero-card,
  .distribution-section,
  .asset-card,
  .cat-card,
  .legend-item,
  .menu-item,
  .assets-back-btn,
  .modal,
  .modal-overlay {
    transition: none;
  }
}

/* ── Private Beta Access Screen ─────────────────────────── */

@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

@keyframes beta-bg-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(28px, -18px) scale(1.05); }
}

/* ── Screen wrapper ── */
#betaAccessScreen {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  overflow: hidden;
  background: #07080f;
  transition: opacity .65s var(--ease-out);
}

/* Slow-drifting ambient glows */
#betaAccessScreen::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle 750px at 22% 32%, rgba(79,142,247,.10) 0%, transparent 60%),
    radial-gradient(circle 600px at 80% 74%, rgba(39,199,104,.06) 0%, transparent 60%);
  animation: beta-bg-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Authenticated: entire screen fades out */
#betaAccessScreen.authed {
  opacity: 0;
  pointer-events: none;
}

/* Exiting: container shrinks + blurs before screen fades */
#betaAccessScreen.exiting .beta-container {
  opacity: 0;
  transform: scale(.94) translateY(10px);
  filter: blur(5px);
  transition:
    opacity   .42s var(--ease-out),
    transform .42s var(--ease-out),
    filter    .42s var(--ease-out);
}

/* ── Container (logo + card, stacked) ── */
.beta-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: 360px;
}

/* ── Stacked logo ── */
.beta-logo-above {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  user-select: none;
}

/* Login logo sizing handled by .beta-logo-above .logo-aurix above */

/* ── Main card — glassmorphism ── */
.beta-card {
  width: 100%;
  padding: 48px 40px 42px;
  background: rgba(11, 14, 22, 0.78);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  box-shadow:
    0 32px 90px rgba(0,0,0,.70),
    0 0 0 1px rgba(255,255,255,.025),
    0 0 100px rgba(79,142,247,.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.beta-access-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-bright);
  margin-bottom: var(--space-1);
}

.beta-hint {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .03em;
  margin-bottom: 34px;
}

/* Form */
#betaForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Input area ── */
.beta-input-wrap {
  position: relative;
  margin-bottom: var(--space-1);
  /* Shake applied here so dots + underline shake together */
}

.beta-input-wrap.shake {
  animation: pin-shake .38s var(--ease-out);
}

/* Hidden input — no border, fully invisible text + bullets, accent caret */
#betaPin {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  /* Remove browser bullet rendering (WebKit/Blink) before color:transparent */
  -webkit-text-security: none;
  color: transparent;
  caret-color: var(--accent);
  font-size: var(--font-size-lg);
  font-family: inherit;
  padding: 10px 0 18px;
  outline: none;
  text-align: center;
}

/* Hide caret once dots appear */
#betaPin.has-value {
  caret-color: transparent;
}

.beta-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.beta-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 160ms ease-out, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.beta-dot.visible {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.22);
}

/* Animated underline (left → right on focus) */
.beta-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
  /* Smooth glow transition for ready state */
  transition: box-shadow .35s var(--ease-out);
}

.beta-underline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), #3ecfb0);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease-out), background .22s var(--ease-out);
}

/* Focus: reveal accent line */
.beta-input-wrap.focused .beta-underline::after {
  transform: scaleX(1);
}

/* Typing (1–3 digits): slightly brighter accent */
.beta-input-wrap.focused.has-input .beta-underline::after {
  background: linear-gradient(90deg, #6aaeff, #45e8c4);
}

/* Ready (4 digits): soft persistent glow on the underline */
.beta-input-wrap.ready .beta-underline {
  box-shadow: 0 0 10px rgba(79, 142, 247, .32), 0 0 20px rgba(79, 142, 247, .10);
}

/* Ready + focused: brightest underline */
.beta-input-wrap.ready.focused .beta-underline::after {
  background: linear-gradient(90deg, #80bfff, #4aedd4);
}

/* Ready: dots shift to accent tint */
.beta-input-wrap.ready .beta-dot.visible {
  background: rgba(160, 210, 255, 0.97);
  box-shadow: 0 0 8px rgba(79, 142, 247, 0.40);
}

/* Shake: underline flashes warning */
.beta-input-wrap.shake .beta-underline {
  box-shadow: 0 0 12px rgba(255, 80, 80, 0.30);
}

/* Error state (CSS prep — toggled via .error class) */
.beta-input-wrap.error .beta-dot.visible {
  background: rgba(255, 100, 90, 0.92);
  box-shadow: 0 0 8px rgba(255, 70, 60, 0.32);
  transition: background 180ms ease-out, box-shadow 180ms ease-out;
}

.beta-input-wrap.error .beta-underline {
  background: rgba(255, 80, 70, 0.12);
  box-shadow: 0 0 12px rgba(255, 70, 60, 0.28);
}

.beta-input-wrap.error .beta-underline::after {
  background: linear-gradient(90deg, #ff6060, #ff9060);
  transform: scaleX(1);
}

/* Error */
.beta-error {
  font-size: 11px;
  color: var(--red);
  letter-spacing: .03em;
  min-height: 20px;
  margin-bottom: 2px;
  opacity: 0;
  transition: opacity .18s;
}

.beta-error.show { opacity: 1; }

/* ── Submit button ── */
.beta-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #4f8ef7 0%, #3ecfb0 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .13em;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 10px;
  /* Reduced default glow */
  box-shadow: 0 4px 16px rgba(79,142,247,.18);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), opacity .15s;
}

/* Ready state — 4 digits entered */
.beta-btn.ready {
  box-shadow: 0 6px 26px rgba(79,142,247,.36);
}

.beta-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(79,142,247,.40);
}

.beta-btn:not(:disabled):active {
  transform: scale(.98);
  box-shadow: 0 2px 10px rgba(79,142,247,.18);
}

.beta-btn:disabled {
  opacity: .20;
  cursor: default;
  box-shadow: none;
  pointer-events: none;
}

/* Version microcopy */
.beta-version {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: .08em;
  margin-top: 22px;
  user-select: none;
}

/* ── Hamburger menu toggle ─────────────────────────────── */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 9px var(--space-1);
  margin-top: 2px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
  flex-shrink: 0;
}

.menu-toggle:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}
.menu-toggle:active {
  transform: scale(.92);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

.menu-toggle.open {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.menu-toggle-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: rgba(255,255,255,.75);
  border-radius: 2px;
  transition: transform .2s var(--ease-out), opacity .15s ease-out;
  transform-origin: center;
}

/* Animated X when open */
.menu-toggle.open .menu-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle.open .menu-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.open .menu-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── Dropdown panel ────────────────────────────────────── */
.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(13,16,26,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 6px;
  width: 186px;
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s var(--ease-out);
  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
}

.menu-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Menu items ────────────────────────────────────────── */
.menu-item {
  width: 100%;
  text-align: left;
  padding: 9px var(--space-2);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s var(--ease-out), color .15s var(--ease-out),
              transform .15s var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  letter-spacing: .01em;
}

.menu-item:hover  { background: rgba(255,255,255,.07); transform: translateX(2px); }
.menu-item:active { background: rgba(255,255,255,.04); transform: translateX(0); }

/* Active language indicator */
.menu-item--lang.active {
  color: var(--accent);
  background: rgba(79,142,247,.08);
}
.menu-item--lang.active:hover { background: rgba(79,142,247,.13); }

.menu-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 5px 4px;
}

.menu-item--danger { color: #ff6b6b; }
.menu-item--danger:hover { background: rgba(232,69,69,.10); color: #ff8585; }

/* ── Menu currency toggle ─────────────────────────────── */
.menu-curr-row {
  display: flex;
  gap: 5px;
  padding: 6px var(--space-1) 4px;
}

.menu-curr-btn {
  flex: 1;
  padding: 7px 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .02em;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-tap) var(--ease-premium);
  -webkit-tap-highlight-color: transparent;
}
.menu-curr-btn:hover:not(.active) {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: rgba(255,255,255,.16);
}
.menu-curr-btn.active {
  background: rgba(79,142,247,.12);
  border-color: rgba(79,142,247,.30);
  color: var(--accent);
}
.menu-curr-btn:active {
  transform: scale(.93);
}

/* ── Exit button (header top-right) ── (kept as hidden proxy) */
.btn-exit {
  display: none !important; /* always hidden — menu-item--danger is the visible exit */
}

@media (max-width: 480px) {
  .beta-card      { padding: 40px 28px 36px; }
  .beta-container { gap: 18px; }
  .beta-logo-above .logo-aurix { font-size: 26px; }
}

/* ── Detail View Hero ──────────────────────────────────────
   Appears at the top of a category drill-down view.
   Shows category name, total value, 24h change, mini sparkline.
   ─────────────────────────────────────────────────────── */
.detail-hero {
  background: linear-gradient(160deg, rgba(255,255,255,.04) 0%, transparent 60%), var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  padding: 22px var(--space-5) 18px;
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
}

.detail-hero-info { position: relative; z-index: 1; }

.detail-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: 6px;
}

.detail-hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.detail-hero-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .08em;
}

.detail-hero-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: var(--space-1);
  transition: color 150ms;
}

/* Flash colors on value update (JS-driven classes) */
@keyframes hero-flash-up {
  0%   { color: var(--green); filter: brightness(1.15); }
  55%  { color: var(--green); filter: brightness(1.08); }
  100% { color: var(--text-bright); filter: brightness(1); }
}
@keyframes hero-flash-down {
  0%   { color: var(--red); opacity: .88; }
  55%  { color: var(--red); opacity: 1;   }
  100% { color: var(--text-bright); opacity: 1; }
}
.detail-hero-value.hero-flash-up   { animation: hero-flash-up   650ms var(--ease-out) forwards; }
.detail-hero-value.hero-flash-down { animation: hero-flash-down 650ms var(--ease-out) forwards; }

.detail-hero-change {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 20px;
}
.detail-hero-change.up   { background: rgba(39,199,104,.14); color: var(--green); }
.detail-hero-change.down { background: rgba(232,69,69,.12);  color: var(--red);   }
.detail-hero-change.flat { background: rgba(107,116,148,.14); color: var(--text-muted); }

.detail-hero-pct {
  display: block;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: .02em;
  margin-top: 6px;
}

.detail-hero-pnl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  margin-top: 5px;
}
.detail-hero-pnl.up   { color: var(--green); }
.detail-hero-pnl.down { color: var(--red); }
.detail-hero-pnl.flat { color: var(--text-muted); }

/* Chart container — canvas fills the full height */
.detail-chart-wrap {
  height: 82px;
  margin-top: var(--space-3);
  position: relative;
}
.detail-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 480px) {
  .detail-hero          { padding: var(--space-3) 18px var(--space-2); }
  .detail-hero-value    { font-size: 22px; }
  .detail-chart-wrap    { height: 64px; margin-top: var(--space-2); }
}

/* ═══════════════════════════════════════════════════════════
   DETAIL VIEW — PREMIUM ASSET ROWS
   Rendered inside a category drill-down (activeCategory set).
   ═══════════════════════════════════════════════════════════ */

/* Left accent bar on the hero (colour-coded per category) */
.detail-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--detail-hero-color, var(--accent));
  opacity: .8;
}

/* Taller sparkline for more impact */
.detail-chart-wrap { height: 100px; }

/* Card-style wrapper around the detail row list */
.assets-list.assets-list--detail {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 6px;
  padding: 0;
  gap: 0;
}

/* Individual premium row */
@keyframes dar-enter {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

.detail-asset-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  cursor: pointer;
  gap: 0 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--dur-fast) var(--ease-premium);
}
.detail-asset-row:last-child { border-bottom: none; }
.detail-asset-row:hover      { background: rgba(255,255,255,.038); }

.detail-asset-row.dar-entering {
  animation: dar-enter 260ms calc(var(--card-i, 0) * 38ms + 30ms) var(--ease-out) both;
}

/* Badge — coloured square for each asset type */
.dar-badge {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.dar-badge.crypto      { background: rgba(91,156,246,.15);  color: #5b9cf6; }
.dar-badge.stock       { background: rgba(192,200,216,.10); color: #c0c8d8; }
.dar-badge.etf         { background: rgba(143,157,186,.12); color: #8f9dba; }
.dar-badge.metal       { background: rgba(212,168,67,.15);  color: #d4a843; }
.dar-badge.cash        { background: rgba(74,222,128,.12);  color: #4ade80; }
.dar-badge.real_estate { background: rgba(167,139,250,.14); color: #a78bfa; }
/* Badge with logo — no coloured background in list view either */
.dar-badge.badge--has-logo { background: none !important; box-shadow: none !important; }

/* Name + sub-info column */
.dar-info { min-width: 0; }
.dar-name {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-bottom: 4px;
}
.dar-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  line-height: 1;
}
.dar-rent {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--green);
  background: rgba(39,199,104,.10);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Right column: value + change pill + action buttons */
.dar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.dar-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.dar-change {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  padding: 2px 7px;
  border-radius: 6px;
}
.dar-change.up   { background: rgba(39,199,104,.12); color: var(--green); }
.dar-change.down { background: rgba(232,69,69,.10);  color: var(--red);   }
.dar-change.flat { background: rgba(107,116,148,.12); color: var(--text-muted); }

.dar-cat-pct {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.dar-actions { display: flex; gap: 4px; margin-top: 2px; }
.dar-actions button {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-premium),
              color     var(--dur-fast) var(--ease-premium),
              border-color var(--dur-fast) var(--ease-premium);
}
.dar-actions button:hover         { background: var(--bg-card-2); color: var(--text); border-color: var(--border-hi); }
.dar-actions .btn-add-pos:hover   { color: var(--green); border-color: rgba(39,199,104,.30); background: rgba(39,199,104,.08); }
.dar-actions .btn-delete:hover    { color: var(--red);   border-color: rgba(232,69,69,.30);  background: rgba(232,69,69,.08); }
.dar-actions button:active {
  transform: scale(.88);
  filter: brightness(.80);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

/* Section header in detail mode */
.assets-section.is-detail .assets-back-btn {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--accent);
  gap: 5px;
  opacity: .85;
}
.assets-section.is-detail .assets-back-btn:hover { opacity: 1; }
.assets-section.is-detail .section-filter-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-bright);
}

/* Mobile ≤ 520px */
@media (max-width: 520px) {
  .detail-asset-row {
    grid-template-columns: 36px 1fr auto;
    gap: 0 10px;
    padding: var(--space-2) 14px;
  }
  .dar-badge          { width: 36px; height: 36px; border-radius: 9px; font-size: 9.5px; }
  .dar-name           { font-size: var(--font-size-sm); }
  .dar-value          { font-size: var(--font-size-sm); }
  .dar-change         { font-size: 11px; padding: 2px 6px; }
  .dar-actions button { width: 28px; height: 28px; }
  .detail-chart-wrap  { height: 80px; }
  .assets-section.is-detail .section-filter-name { font-size: 17px; }
  .btn-add-context    { font-size: 11px; padding: 5px 10px; }
}

@media (max-width: 375px) {
  .detail-asset-row   { padding: 11px var(--space-2); gap: 0 var(--space-1); }
  .dar-actions button { width: 26px; height: 26px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-asset-row.dar-entering { animation: none; }
  .cat-card::before               { animation: none; }
}

/* ── Inline Asset Edit Strip ───────────────────────────── */
.asset-edit-strip {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.asset-edit-strip.aes-open {
  max-height: 80px;
}

/* Compact version inside detail-asset-row */
.asset-edit-strip.dar-strip {
  grid-column: 1 / -1;
}

.aes-body {
  padding: 10px 0 2px;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: 10px;
}

.aes-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.aes-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .04em;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.aes-qty-input {
  width: 100px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--text-bright);
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-premium),
              background var(--dur-fast) var(--ease-premium);
  flex-shrink: 0;
}
.aes-qty-input:focus {
  border-color: rgba(79,142,247,.55);
  background: rgba(79,142,247,.07);
}

.aes-preview {
  flex: 1;
  font-size: 12px;
  color: var(--green);
  font-weight: var(--font-weight-medium);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aes-preview.aes-preview--remove {
  color: var(--red);
}

.aes-confirm-btn,
.aes-cancel-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--color-border-default);
  background: rgba(255,255,255,.05);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-premium),
              color var(--dur-fast) var(--ease-premium),
              border-color var(--dur-fast) var(--ease-premium),
              transform var(--dur-tap) var(--ease-premium);
  flex-shrink: 0;
}
.aes-confirm-btn:hover {
  background: rgba(39,199,104,.12);
  color: var(--green);
  border-color: rgba(39,199,104,.30);
}
.aes-cancel-btn:hover {
  background: rgba(232,69,69,.08);
  color: var(--red);
  border-color: rgba(232,69,69,.25);
}
.aes-confirm-btn:active,
.aes-cancel-btn:active {
  transform: scale(.88);
}

.aes-error {
  font-size: 11px;
  color: var(--red);
  margin-top: 5px;
  min-height: 0;
}
.aes-error:empty { margin-top: 0; }

/* Shake animation for validation errors */
@keyframes aes-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.aes-shake { animation: aes-shake 420ms var(--ease-premium) both; }

/* Card state when edit strip is open */
.card--editing {
  border-color: rgba(79,142,247,.25) !important;
  box-shadow: 0 0 0 1px rgba(79,142,247,.12), 0 8px 28px rgba(0,0,0,.45) !important;
}

@media (max-width: 520px) {
  .aes-qty-input { width: 90px; }
  .aes-label     { font-size: 10px; }
  .aes-preview   { font-size: 11px; }
}

/* ── ISIN / Manual Mode ─────────────────────────────────── */

/* "— or —" divider between search and ISIN sections */
.form-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.form-or-divider::before,
.form-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Optional label suffix */
.label-optional {
  color: var(--text-muted);
  font-weight: 400;
  font-size: .85em;
}

/* ISIN input — monospace with letter-spacing for readability */
.form-group--isin input {
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13.5px;
}

/* ISIN status indicator (below ISIN input) */
.isin-status {
  display: block;
  font-size: 11.5px;
  margin-top: 5px;
  transition: color var(--dur-fast) ease;
}
.isin-status:empty { margin-top: 0; }
.isin-status--hint  { color: var(--text-muted); }
.isin-status--ok    { color: var(--green); }
.isin-status--error { color: var(--red); }
.isin-status--warn  { color: var(--orange); }

/* Loading spinner for ISIN lookup */
.isin-status--loading {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.isin-status--loading::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(106,115,144,.4);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: isin-spin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes isin-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM REDESIGN — Remove glow, enforce clarity
   "Confidence through clarity, not decoration"
══════════════════════════════════════════════════════════════ */

/* ── Remove all button glows ──────────────────────────────── */
.btn-add:hover,
.btn-submit:hover,
.btn-submit--orange:hover,
.btn-submit--green:hover           { box-shadow: none; }
.range-btn.active                  { box-shadow: none; }
.type-btn.active                   { box-shadow: none; }
.liq-btn.active, .re-curr-btn.active { box-shadow: none; }

/* ── Remove glow from form input / search focus ──────────── */
.form-group input:focus,
.search-field-wrap input:focus     { box-shadow: none; }

/* ── Remove hover filter on hero / asset numbers ─────────── */
.summary-panel:hover .summary-total,
.hero-card:hover .summary-total    { filter: none; }
.asset-card:hover .asset-value-amount { filter: none; }

/* ── Remove text-shadow on rent banner ───────────────────── */
.rent-banner-value                 { text-shadow: none; }

/* ── Softer live dot — no glow ring ─────────────────────── */
@keyframes pulse-dot-glow {
  0%   { box-shadow: 0 0 0 0   rgba(63,191,127,.25); }
  65%  { box-shadow: 0 0 0 3px rgba(63,191,127,.0);  }
  100% { box-shadow: 0 0 0 0   rgba(63,191,127,.0);  }
}
/* Smaller update dot pulse — no scale jump */
@keyframes pulse-live {
  0%   { opacity: .5; }
  50%  { opacity: 1;  }
  100% { opacity: .5; }
}

/* ── Neutralize balance glow on portfolio number ─────────── */
@keyframes balance-glow {
  from { filter: none; }
  to   { filter: none; }
}
.balance-glow-pulse { animation: none !important; }

/* ── Cleaner chart tooltip ───────────────────────────────── */
.chart-tooltip {
  border-color: var(--color-border-default);
  box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 12px rgba(255,255,255,0.04);
}

/* ── Category card: no sibling dim — too aggressive ─────── */
@media (hover: hover) {
  .categories-grid:has(.cat-card:hover) .cat-card:not(:hover) { opacity: 1; }
}

/* ── Asset badge: softer cash green ─────────────────────── */
.asset-badge.cash { background: rgba(63,191,127,.13); color: #3fbf7f; }

/* ── Hero left divider: slightly softer ─────────────────── */
.hero-left { border-right-color: rgba(255,255,255,.04); }

/* ── Increase card gap for breathing room ────────────────── */
.assets-list { gap: 10px; }

/* ── Smoother value flash (remove vertical jump) ────────── */
@keyframes flash-value-up {
  0%   { color: var(--green); }
  100% { color: inherit; }
}
@keyframes flash-value-down {
  0%   { color: var(--red); }
  100% { color: inherit; }
}

/* ── Remove hover lift from distribution + hero on touch ── */
@media (hover: none) {
  .hero-card:hover,
  .distribution-section:hover,
  .portfolio-combined-card:hover,
  .asset-card:hover,
  .cat-card:hover { transform: none; border-color: var(--border); }
}

/* ── Card highlight on add / edit ──────────────────────── */
@keyframes card-updated-flash {
  0%   { border-color: rgba(79,142,247,.50); background: rgba(79,142,247,.07); }
  55%  { border-color: rgba(79,142,247,.20); background: rgba(79,142,247,.03); }
  100% { border-color: var(--border);        background: var(--bg-card); }
}
.asset-card.card--just-updated,
.detail-asset-row.card--just-updated {
  animation: card-updated-flash 600ms var(--ease-out) forwards;
}
.cat-card.cat-card--just-updated {
  animation: card-updated-flash 600ms var(--ease-out) forwards;
}

/* ── Card exit animation on delete ─────────────────────── */
@keyframes card-exit {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(24px) scale(0.97); }
}
.asset-card.card--exiting,
.detail-asset-row.card--exiting {
  animation: card-exit 200ms var(--ease-premium) forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .card--just-updated { animation: none !important; }
  .card--exiting      { animation: none !important; opacity: 0; }
}

/* ── Cat-card drag & drop (floating) ───────────────────── */

/* Placeholder that holds space in the grid while card floats */
.cat-drag-ph {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(79, 142, 247, 0.2);
  pointer-events: none;
  visibility: hidden;
}

/* (transitions already defined on .cat-card above) */

/* ── Asset-card Drag & Drop ─────────────────────────────── */
.asset-card.card--dragging {
  box-shadow: 0 14px 44px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.28);
  border-color: var(--border-hi);
  opacity: .96;
  will-change: top;
  /* Don't override the animation; just lift visually */
  transition: box-shadow 150ms var(--ease-out), border-color 150ms var(--ease-out) !important;
}
.card--drag-ph {
  border: 1px dashed rgba(79,142,247,.18);
  border-radius: var(--radius);
  pointer-events: none;
  flex-shrink: 0;
  transition: height 100ms var(--ease-out);
}

/* ── Per-asset P&L ──────────────────────────────────────── */
/* Row 3 of the asset-value grid (desktop); flex child on mobile */
.asset-pnl {
  grid-column: 2;
  grid-row: 3;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.asset-pnl.up   { color: var(--green); }
.asset-pnl.down { color: var(--red); }

/* Detail row P&L */
.dar-pnl {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.dar-pnl.up   { color: var(--green); }
.dar-pnl.down { color: var(--red); }

/* ── Logo artifact safety override (highest specificity) ── */
.cat-card-visual img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ── Global image safety override — no background on any img ── */
img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}



.dar-tx-info {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ── Asset detail modal ────────────────────────────────────── */
.modal--detail { max-width: 420px; }

.ad-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.ad-hero {
  text-align: center;
  padding: var(--space-1) 0 4px;
}
.ad-hero-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 5px;
}
.ad-hero-label {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ad-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ad-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1);
}

.ad-label {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ad-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ad-value--pos { color: var(--green); }
.ad-value--neg { color: var(--red); }

.ad-tx-section { display: flex; flex-direction: column; gap: var(--space-1); }

.ad-tx-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ad-tx-header span {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.btn-add-tx-detail {
  display: block;
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--accent);
  background: rgba(79,142,247,.10);
  border: 1px solid rgba(79,142,247,.25);
  border-radius: 8px;
  padding: 9px 0;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-add-tx-detail:hover {
  background: rgba(79,142,247,.18);
  border-color: rgba(79,142,247,.40);
}

.ad-tx-list { display: flex; flex-direction: column; gap: 6px; }

.ad-tx-empty {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-2) 0;
}

.ad-tx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: var(--space-1) 10px;
  border-radius: 8px;
  background: var(--card-bg, rgba(255,255,255,.03));
}

.ad-tx-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.ad-tx-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.ad-tx-edit,
.ad-tx-delete {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: opacity .15s, background .15s, color .15s;
}
.ad-tx-edit:hover {
  opacity: 1;
  background: rgba(79,142,247,.12);
  color: var(--accent);
}
.ad-tx-delete:hover {
  opacity: 1;
  background: rgba(232,69,69,.12);
  color: var(--red);
}

.ad-tx-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.tx-buy  { background: rgba(52,199,89,.15);  color: var(--green); }
.tx-sell { background: rgba(255,59,48,.15);  color: var(--red); }

.ad-tx-qty   { font-weight: var(--font-weight-semibold); flex-shrink: 0; }
.ad-tx-price { color: var(--text-muted); flex: 1; }
.ad-tx-date  { color: var(--text-muted); flex-shrink: 0; }

/* ── Bottom navigation ─────────────────────────────────── */
main { padding-bottom: 72px; }

@keyframes navBreath {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(5,7,13,0.6);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border-subtle);
  z-index: 200;
}

.bottom-nav .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  padding: var(--space-1) 14px;
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.2s ease;
}
.bottom-nav .item:active {
  transform: scale(0.92);
}
.bottom-nav .item svg {
  width: 22px;
  height: 22px;
  stroke: rgba(180,220,255,0.6);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(120,180,255,0.15));
  transition: all 0.3s ease;
}
.bottom-nav .item:hover svg {
  transform: scale(1.08);
  stroke: rgba(180,255,220,0.9);
}
.bottom-nav .item.active {
  opacity: 1;
  transform: translateY(-1px);
}
.bottom-nav .item.active::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,255,184,0.15) 0%, rgba(107,255,184,0.05) 40%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.bottom-nav .item.active svg {
  stroke: #6BFFB8;
  filter:
    drop-shadow(0 0 4px rgba(107,255,184,0.4))
    drop-shadow(0 0 10px rgba(107,255,184,0.2));
  transform: scale(1.05);
  animation: navBreath 2.8s ease-in-out infinite;
}
.bottom-nav .item.active::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  margin: 4px auto 0;
  border-radius: 50%;
  background: #6BFFB8;
  box-shadow: 0 0 6px rgba(107,255,184,0.6);
}
.bottom-nav .item[data-tab="add"] {
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  opacity: 1;
}
.bottom-nav .item[data-tab="add"] svg {
  stroke: rgba(255,255,255,0.8);
  stroke-width: 2;
}
.bottom-nav .item[data-tab="add"]::after {
  display: none;
}

.top-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 7;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.05) 70%,
    rgba(0,0,0,0)    100%
  );
}

#aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.tab-placeholder {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: calc(100vh - 60px - 56px);
  background: transparent;
}
.placeholder-label {
  color: #444;
  font-size: var(--font-size-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Insights tab ──────────────────────────────────────── */
.insights-screen {
  width: 100%;
  max-width: none;
  background: transparent;
}

.insights-hero {
  width: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at center,
    rgba(0,255,180,0.12),
    transparent 70%
  );
}

.insights-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.9)  0%,
    rgba(0,0,0,0.7)  35%,
    rgba(0,0,0,0.4)  65%,
    rgba(0,0,0,0.1)  85%,
    transparent      100%
  );
}

.insights-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    transparent 40%,
    rgba(0,0,0,0.6) 100%
  );
  z-index: 1;
}
.monster-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  width: 100%;
  max-width: none;
  z-index: 2;
}
.monster-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}
.monster-wrap.chaos-drift {
  transform: translateX(3px);
  transition: transform 0.3s ease;
}
.monster-orb.chaos-flash { filter: brightness(1.2) blur(0.2px); }
.monster-core {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.monster-orb {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  filter: blur(0.2px);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 1s ease;
  background:
    radial-gradient(circle at 30% 30%, rgba(120,160,255,0.7), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(0,255,180,0.2), transparent 55%),
    radial-gradient(circle at center, #05070f, #000);
  box-shadow:
    0 0 40px rgba(0,120,255,0.25),
    0 0 80px rgba(0,255,180,0.08),
    inset 0 0 30px rgba(255,255,255,0.04);
  animation: idleLuxury 10s ease-in-out infinite;
}
.monster-orb:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
  transition: all 0.4s ease;
}
.monster-orb::before {
  content: "";
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 65%);
  filter: blur(30px);
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: innerDrift 14s linear infinite;
}
.monster-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.12), transparent 45%);
  opacity: 0.6;
  pointer-events: none;
}
@keyframes innerDrift {
  0%   { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.03); }
  100% { transform: rotate(360deg) scale(1);    }
}
.monster-orb.bad {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,100,80,0.9), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,0,60,0.4), transparent 50%),
    radial-gradient(circle, #1a0000, #000);
  box-shadow:
    0 0 40px rgba(255,60,60,0.6),
    inset 0 0 30px rgba(255,255,255,0.05),
    inset 0 0 60px rgba(255,0,80,0.08);
}
.monster-orb.soft-caution {
  filter: brightness(0.95);
  box-shadow: 0 0 35px rgba(255,160,120,0.25);
}
.monster-orb.soft-positive {
  filter: brightness(1.1);
  box-shadow: 0 0 40px rgba(120,255,200,0.3);
}
.monster-orb.active {
  transform: scale(1.08);
  filter: brightness(1.2);
  animation-play-state: paused;
}
.monster-orb.ctx-home     { opacity: 0.9; }
.monster-orb.ctx-insights { opacity: 1; }
.monster-orb.ctx-asset    { filter: brightness(1.05); }
.monster-orb.ctx-market   { opacity: 0.85; }
.monster-orb.evo-1 {
  background:
    radial-gradient(circle at 30% 30%, rgba(120,160,255,0.6), transparent 40%),
    radial-gradient(circle at center, #05070f, #000);
  box-shadow:
    0 0 30px rgba(0,120,255,0.2);
}
.monster-orb.evo-2 {
  background:
    radial-gradient(circle at 30% 30%, rgba(120,160,255,0.7), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(0,255,180,0.15), transparent 60%),
    radial-gradient(circle at center, #05070f, #000);
  box-shadow:
    0 0 50px rgba(0,120,255,0.25),
    0 0 80px rgba(0,255,180,0.1);
}
.monster-orb.evo-3 {
  background:
    radial-gradient(circle at 30% 30%, rgba(120,160,255,0.5), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(0,255,180,0.1), transparent 65%),
    radial-gradient(circle at center, #02030a, #000);
  box-shadow:
    0 0 40px rgba(0,120,255,0.18),
    0 0 100px rgba(0,255,180,0.06),
    inset 0 0 30px rgba(255,255,255,0.03);
}
@keyframes idleLuxury {
  0%   { transform: scale(1);     }
  50%  { transform: scale(1.015); }
  100% { transform: scale(1);     }
}
.monster-message {
  position: absolute;
  top: calc(50% + 120px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 300px;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  text-align: center;
  min-height: 60px;
}
.monster-line {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  margin: 10px 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(4px);
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}
.monster-line.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.monster-action {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.4s ease, color 0.2s ease;
  text-align: center;
  user-select: none;
}
.monster-action.visible {
  opacity: 1;
}
.monster-action:hover {
  color: rgba(255, 255, 255, 0.72);
}

.insights-history { padding: 0 var(--space-3) 80px; opacity: .75; }
.insights-history-header {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 4px;
}
.insights-history-empty {
  padding: var(--space-5) var(--space-3);
  font-size: 13px;
  color: #555;
}

.ins-tx-list { display: flex; flex-direction: column; }

.tx-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tx-left  { display: flex; flex-direction: column; gap: 3px; }
.tx-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.tx-type       { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.tx-type.buy   { color: #4caf50; }
.tx-type.sell  { color: #f44336; }
.tx-asset      { font-size: 13px; color: #ddd; }
.tx-date       { font-size: 11px; color: #555; }
.tx-main       { font-size: 13px; font-weight: var(--font-weight-semibold); color: #fff; }
.tx-sub        { font-size: 11px; color: #555; }
.tx-total      { font-size: 13px; color: #aaa; }

.tx-view-all {
  margin-top: var(--space-2);
  padding: var(--space-1) 0;
  font-size: 13px;
  color: #5b8cff;
  cursor: pointer;
  text-align: center;
}

/* ── Tracking block (desktop only) ── */
.tracking-block {
  display: none;
}

.tracking-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.tracking-title {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tracking-content {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}


/* Ticker */
.tracking-ticker-wrap {
  overflow: hidden;
  height: 100%;
}

.tracking-ticker {
  display: flex;
  flex-direction: column;
  animation: ticker-scroll 20s linear infinite;
}

@keyframes ticker-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.ticker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13px;
  flex-shrink: 0;
}

.ticker-sym {
  font-weight: var(--font-weight-semibold);
  color: var(--text-bright);
  min-width: 44px;
}

.ticker-price {
  color: var(--text-muted);
  font-size: 12px;
}

.ticker-change {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  min-width: 48px;
  text-align: right;
}

.ticker-change.positive { color: #27c768; }
.ticker-change.negative { color: #ff5a5a; }

/* Watchlist preview */
.watchlist-preview {
  display: flex;
  flex-direction: column;
}

.watchlist-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: var(--space-1) 6px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 12px;
  position: relative;
  transition: background 0.12s ease, transform 0.12s ease;
}

.watchlist-spark {
  width: 70px;
  height: 22px;
  display: block;
  justify-self: center;
  filter: blur(0.2px);
  transition: opacity 0.25s ease;
  opacity: 0.25;
}

.watchlist-spark.placeholder { opacity: 0.55; }

.watchlist-spark.ready {
  opacity: 1;
}

.watchlist-row:hover .watchlist-spark {
  opacity: 1;
}

@keyframes sparkBreath {
  0%,100% { opacity: 0.72; }
  50%     { opacity: 1; }
}

.watchlist-row:last-child { border-bottom: none; }

.watchlist-empty {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px 4px;
  font-size: 12px;
  line-height: 1.4;
}

.watchlist-empty span {
  opacity: 0.45;
}

.watchlist-empty-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  flex-shrink: 0;
  opacity: 0.6;
  animation: pulseLive 2s ease-in-out infinite;
}

.watchlist-sym {
  font-weight: var(--font-weight-medium);
  color: var(--text-bright);
  letter-spacing: 0.2px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
  margin-left: 10px;
}

.watchlist-row:hover .watchlist-sym {
  opacity: 1;
}

.watchlist-price {
  color: var(--text-bright);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  text-align: right;
  min-width: 100px;
  margin-right: 10px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  animation: subtleDrift 4s ease-in-out infinite;
}

/* ── Desktop layout enhancements ── */
@media (min-width: 1024px) {
  .container {
    max-width: 1600px;
    padding: 0 var(--space-6);
  }

  .top-grid {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: var(--space-5);
    align-items: stretch;
  }

  .portfolio-value {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-5);
  }

  .portfolio-value h1 {
    font-size: 42px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
  }

  .portfolio-meta {
    margin-top: var(--space-1);
    opacity: 0.7;
    font-size: var(--font-size-sm);
  }

  .chart-container {
    height: 320px;
    padding: var(--space-3);
  }

  /* Distribution: single unified horizontal card */
  .portfolio-combined-card {
    flex-direction: row;
    gap: var(--space-6);
    padding: var(--space-5) 28px;
    border-radius: 20px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    transition: border-color 0.25s, transform 0.25s;
    align-items: stretch;
  }

  .portfolio-combined-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
  }

  .distribution-panel {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .watchlist-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px solid var(--color-border-subtle);
    padding-left: 28px;
  }

  .section-title {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    opacity: 0.8;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-3);
  }

  .distribution-inner {
    display: flex !important;
    align-items: center;
    gap: var(--space-4);
    background: transparent;
    flex: 1;
  }

  .donut-wrap {
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
  }

  #donutChart {
    width: 100% !important;
    height: 100% !important;
    margin-top: 0 !important;
  }

  .distribution-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin-top: 0;
    overflow: visible;
  }

  .watchlist-inner-card {
    flex: 1;
    padding: 22px var(--space-4);
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
    display: flex;
    flex-direction: column;
  }

  .watchlist-inner-card:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }

  .tracking-content {
    display: flex;
    flex-direction: column;
  }

  .watchlist-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px var(--space-1);
    font-size: 13px;
    line-height: 1.3;
    border-radius: 6px;
  }

  .watchlist-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .watchlist-row:hover {
    background: rgba(255,255,255,0.05);
    transform: translateX(3px);
  }

  .watchlist-row:active {
    transform: translateX(1px) scale(0.995);
    transition-duration: 60ms;
  }

  .watchlist-price {
    font-size: 13px;
    min-width: 100px;
  }

  .ticker-item {
    font-size: 12px;
  }

  .assets-grid {
    margin-top: var(--space-5);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .asset-card {
    padding: var(--space-3);
    border-radius: 12px;
  }
}

@media (max-width: 768px) {
  .insights-hero::before {
    height: 180px;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.8)  40%,
      rgba(0,0,0,0.5)  70%,
      transparent      100%
    );
  }
}

/* ── Watchlist Modal ──────────────────────────────────────── */
.watchlist-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.watchlist-modal.hidden {
  display: none;
}

.watchlist-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.watchlist-modal-content {
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 20px;
  padding: var(--space-5);
  background: rgba(20,20,25,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transform: scale(0.95) translateY(6px);
  opacity: 0;
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1), opacity 200ms ease;
}

.watchlist-modal.open .watchlist-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

@keyframes wl-fade-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.watchlist-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.watchlist-modal-header h2 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-bright);
  margin: 0;
}

.watchlist-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: none;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform 120ms ease;
}

.watchlist-modal-close:hover  { background: rgba(255,255,255,0.12); }
.watchlist-modal-close:active { transform: scale(0.88); }

.watchlist-modal-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.watchlist-modal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px var(--space-1);
  border-radius: 8px;
  transition: background .15s ease, opacity 180ms ease, transform 180ms ease;
}

.watchlist-modal-row:hover { background: rgba(255,255,255,0.04); }

.watchlist-modal-row.new {
  animation: wl-fade-in-up 220ms cubic-bezier(0.4,0,0.2,1);
}

.watchlist-modal-row.highlight {
  background: rgba(0,255,150,0.08) !important;
}

.watchlist-modal-row.removing {
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
}

.watchlist-modal-sym {
  font-weight: var(--font-weight-semibold);
  font-size: 13px;
  color: var(--text-bright);
  min-width: 52px;
}

.watchlist-modal-name {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  padding: 0 var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-modal-price {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.watchlist-modal-empty {
  text-align: center;
  padding: var(--space-5) 0;
  font-size: 13px;
  color: var(--text-dim);
}

/* Header actions */
.modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.add-button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform 120ms ease;
  backdrop-filter: blur(6px);
}

.add-button:hover  { background: rgba(255,255,255,0.12); }
.add-button:active { transform: scale(0.88); }

.add-button--active {
  background: rgba(100,220,160,0.12);
  color: rgba(100,220,160,1);
}

/* Edit mode row */
.watchlist-modal-row.editing {
  position: relative;
  padding-right: 28px;
}

/* Remove button */
.remove-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,80,80,0.9);
  color: white;
  font-size: 10px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.remove-btn:hover {
  transform: translateY(-50%) scale(1.15);
  background: rgba(255,50,50,1);
}

/* Add asset panel */
.add-asset-panel {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.add-asset-panel.hidden {
  display: none;
}

.add-asset-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color .2s ease;
}

.add-asset-input:focus {
  border-color: rgba(255,255,255,0.18);
}

.add-asset-input::placeholder {
  color: var(--text-dim);
}

.add-asset-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-asset-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-1) 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}

.add-asset-result:hover {
  background: rgba(255,255,255,0.06);
}

/* ── Watchlist live feel ── */
@keyframes subtleDrift {
  0%,100% { opacity: 0.82; }
  50%     { opacity: 1; }
}

@keyframes pulseLive {
  0%,100% { opacity: 0.25; transform: translateY(-50%) scale(0.9); }
  50%     { opacity: 0.7;  transform: translateY(-50%) scale(1.15); }
}


/* ── Price-change flash (glow + movement) ── */
@keyframes wl-price-up {
  0%   { color: #00ff9c; text-shadow: 0 0 6px rgba(0,255,156,0.4); transform: translateY(-2px); }
  100% { color: inherit; text-shadow: none; transform: translateY(0); }
}

@keyframes wl-price-down {
  0%   { color: #ff4d4f; text-shadow: 0 0 6px rgba(255,77,79,0.35); transform: translateY(2px); }
  100% { color: inherit; text-shadow: none; transform: translateY(0); }
}

.price-up   { animation: wl-price-up   600ms ease-out; }
.price-down { animation: wl-price-down 600ms ease-out; }

/* ── Market tab ──────────────────────────────────────────── */
.market-screen {
  padding: var(--space-3) var(--space-3) 80px;
  width: 100%;
}

.market-header {
  padding: 10px var(--space-4) 4px;
}

.market-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}

.market-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

.market-search-wrap {
  padding: 10px var(--space-4);
  margin-bottom: 4px;
}

.market-search-wrap input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-3);
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.05);
  color: #fff;
  outline: none;
  font-size: var(--font-size-md);
}

.market-tabs {
  display: flex;
  gap: 10px;
  padding: 10px var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.market-tabs::-webkit-scrollbar { display: none; }

.market-tab {
  padding: var(--space-1) 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s ease, color 0.2s ease;
}

.market-tab.active {
  background: #00ffcc;
  color: #000;
}

.market-featured {
  display: flex;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.market-featured::-webkit-scrollbar { display: none; }

.featured-card {
  min-width: 120px;
  padding: var(--space-2);
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.market-chg.up {
  background: rgba(34,197,94,0.10);
  color: #22c55e;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
}

.market-chg.down {
  background: rgba(239,68,68,0.10);
  color: #ef4444;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
}

.market-row-rank {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  text-align: center;
}

.market-row-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.market-name-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-row-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: #fff;
}

.market-row-change {
  display: flex;
  align-items: center;
}

.market-row-spark {
  line-height: 0;
  opacity: 0.8;
}

.market-row-action {
  display: flex;
  justify-content: flex-end;
}

.featured-card > div:first-child {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  margin-bottom: 4px;
}

.featured-card > div:nth-child(2) {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  margin-bottom: 4px;
}

.market-section {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-5);
}

.market-section-title {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-1);
}

.green { color: #00ff88; }
.red   { color: #ff4d4d; }

.market-empty {
  padding: 40px;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: var(--font-size-sm);
}

.market-loading {
  padding: 30px;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: var(--font-size-sm);
}

.market-section-header {
  padding: 10px 0 var(--space-1);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
}

.market-badge {
  margin-left: var(--space-1);
  font-size: 11px;
  font-weight: 400;
  color: var(--orange);
  letter-spacing: 0;
}

.market-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.market-chart {
  width: 80px;
  margin: 0 10px;
  opacity: 0.8;
  flex-shrink: 0;
  line-height: 0;
}

.market-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.market-symbol {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text);
}

.market-type {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

.market-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.market-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.market-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.market-coin-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.market-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(79,142,247,0.15);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.market-sym {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

.market-name {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.market-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text);
}

.market-chg {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
}

.market-chg.up   { color: var(--green); }
.market-chg.down { color: var(--red); }

.market-err {
  font-size: 13px;
  color: var(--text-dim);
  padding: var(--space-1) 0;
}

.market-stale {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--orange);
  margin-left: 6px;
}

.watchlist-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: var(--font-size-md);
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
  line-height: 1;
}
.watchlist-btn.active { color: #FFD700; }

.empty-watchlist {
  padding: var(--space-4) 0;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
}

/* Market metrics header */
.market-metrics-scroll {
  display: flex;
  overflow-x: auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  scrollbar-width: none;
}

.market-metrics-scroll::-webkit-scrollbar {
  display: none;
}

.market-metric-card {
  min-width: 140px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: var(--space-2);
}

.market-metric-card .label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.market-metric-card .value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}

/* ── Market desktop layout ── */
.market-body {
  display: block;
}

.col {
  display: flex;
  align-items: center;
}

.col.rank {
  justify-content: center;
  font-size: 12px;
  color: #666;
}

.asset-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.change-pill {
  padding: 4px var(--space-1);
  border-radius: 6px;
  font-size: 12px;
}

.change.pos .change-pill {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
}

.change.neg .change-pill {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}

@media (min-width: 1024px) {
  .market-screen {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--space-6);
  }

  .market-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  .market-main {
    width: 100%;
  }

  .market-main > * {
    margin-bottom: var(--space-5);
  }

  .market-sidebar {
    position: sticky;
    top: 80px;
    height: fit-content;
  }

  .market-sidebar > * {
    margin-bottom: var(--space-5);
  }

  .market-featured {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    padding: 0 0 var(--space-3);
    overflow: visible;
  }

  .featured-card {
    min-width: unset;
    flex-shrink: unset;
  }

  .market-row {
    display: grid;
    grid-template-columns: 40px 1.5fr 1fr 1fr 1fr 40px;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-1);
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
}

@media (max-width: 1023px) {
  .market-screen {
    display: block;
    padding: var(--space-3) var(--space-3) 80px;
  }

  .market-body {
    display: block;
  }

  .market-sidebar {
    position: static;
  }

  .market-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: space-between;
  }

  .market-row-rank,
  .market-row-spark { display: none; }

  .market-row-name { flex: 1; min-width: 0; }
  .market-row-price { font-size: 13px; }
  .market-row-change { font-size: 12px; }
}

/* ── Market intelligence layer ── */
.insight-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4) 4px;
}

.insight {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
}

.insight.bullish { color: #22c55e; border: 1px solid rgba(34,197,94,0.2); }
.insight.bearish { color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.insight.neutral { color: #eab308; border: 1px solid rgba(234,179,8,0.2); }

.insight {
  position: relative;
  cursor: default;
  transition: background 0.15s ease;
}

.insight-text {
  display: block;
}

.insight-signal {
  display: none;
  font-size: 11px;
  opacity: 0.75;
  margin-top: 3px;
  line-height: 1.4;
  white-space: normal;
}

@media (hover: hover) {
  .insight:hover .insight-signal { display: block; }
}

.insight.active .insight-signal { display: block; }

/* ── Market wow layer ── */

/* Step 1–2: value transitions + flash */
@keyframes flash-up {
  0%   { background: rgba(34,197,94,0.18); }
  100% { background: transparent; }
}
@keyframes flash-down {
  0%   { background: rgba(239,68,68,0.18); }
  100% { background: transparent; }
}
.value-flash-up   { animation: flash-up   0.45s ease forwards; }
.value-flash-down { animation: flash-down 0.45s ease forwards; }

.market-metric-card .value,
.market-row-price,
.market-row-change {
  transition: color 0.2s ease;
}

/* Step 3: hover depth (desktop only) */
@media (hover: hover) {
  .market-row:hover {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
  }
  .featured-card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
    background: rgba(255,255,255,0.08);
  }
}

/* Step 4: market summary strip */
.market-ticker-strip {
  padding: 6px var(--space-4);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.market-ticker-strip .t-up   { color: #22c55e; }
.market-ticker-strip .t-down { color: #ef4444; }

/* Step 5: priority visuals */
.market-row-price {
  font-weight: var(--font-weight-semibold);
  color: #fff;
}
.market-name-sub {
  opacity: 0.55;
}

/* Step 6: featured card emphasis */
.featured-card > div:nth-child(2) {
  font-size: 18px;
}

/* Step 9: scroll feel */
.market-body,
.market-screen {
  scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE PORTFOLIO SLIDER — additive, isolated, desktop-safe
   ═══════════════════════════════════════════════════════════ */

/* Hidden by default — desktop never sees it */
.portfolio-mobile-slider { display: none; }
.portfolio-slider-card   { display: none; }

@media (max-width: 768px) {
  /* Hide desktop chart and distribution so slider takes over */
  .hero-right           { display: none; }
  .distribution-section { display: none; }

  /* Card container — same visual hierarchy as hero-card */
  .portfolio-slider-card {
    display: block;
    margin: var(--space-1) 0;
    padding: var(--space-3) var(--space-3) var(--space-2) !important;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: border-color var(--dur-med) var(--ease-premium);
  }

  .portfolio-slider-card:hover { border-color: var(--border-hi); }

  /* Slider: adaptive height, padding-bottom reserves space for dots */
  .portfolio-mobile-slider {
    display: block;
    overflow: hidden;
    width: 100%;
    min-height: 280px;
    height: auto;
    position: relative;
    padding-bottom: 18px !important;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Track: 200% wide, full height so slides can fill it */
  .mobile-slider-track {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1);
    will-change: transform;
  }

  /* Each slide: no padding — card provides it */
  .mobile-slide {
    width: 50%;
    min-height: 280px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0;
  }

  /* Chart header: consistent spacing */
  .portfolio-mobile-slider .chart-header {
    margin-bottom: var(--space-2);
  }

  /* Chart slide: flex column so chart-wrap fills remaining space */
  .mobile-slide-chart {
    display: flex;
    flex-direction: column;
  }

  .mobile-slide-chart .chart-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
  }

  /* Donut slide: top-aligned to match chart slide title position */
  .mobile-slide-donut {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 6px;
  }

  /* Donut slide: stack donut + legend vertically */
  .mobile-distribution-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .mobile-donut-wrap {
    position: relative;
    flex-shrink: 0;
    width: min(160px, 45vw);
    height: min(160px, 45vw);
    overflow: visible;
  }

  /* Dots: sit in the 24px padding-bottom zone — never over the chart */
  .mobile-slider-dots {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  .m-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    opacity: 0.4;
    transition: opacity 0.2s ease;
    cursor: pointer;
  }

  .m-dot.active {
    opacity: 1;
  }
}

/* Explicit desktop guard — slider and card never visible at ≥769px */
@media (min-width: 769px) {
  .portfolio-mobile-slider  { display: none; }
  .portfolio-slider-card    { display: none; }
  .portfolio-actions-mobile { display: none; }
}

/* ═══════════════════════════════════════════════
   MOBILE FAB — additive, isolated, desktop-safe
   ═══════════════════════════════════════════════ */

/* Hidden by default — shown only on mobile */
.portfolio-actions-mobile { display: none; }

@media (max-width: 768px) {
  /* Hide large action buttons — FAB replaces them */
  #btnAdd, #btnAddLiquidity { display: none; }

  /* Hide bottom-nav add tab — action moved into FAB */
  .bottom-nav [data-tab="add"] { display: none; }

  /* FAB container — optically aligned with meta line (activos · actualizado) */
  .portfolio-actions-mobile {
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-10%);
    z-index: 6;
  }

  .fab-trigger {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #60a5fa;
    font-size: var(--font-size-lg);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: opacity 0.15s ease;
  }

  .fab-trigger:active { opacity: 0.7; }

  /* Dropdown menu */
  .fab-menu {
    position: absolute;
    top: 44px;
    right: 0;
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    z-index: 7;
  }

  .fab-menu.open { display: flex; }

  .fab-option {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease;
  }

  .fab-option:hover { border-color: var(--border-hi); }
}

/* ══════════════════════════════════════════════════════════
   MOBILE OVERRIDES — CONSOLIDATED (FAB + DONUT)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── FAB container — flex child of summary-meta-row ── */
  .portfolio-actions-mobile {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
  }

  /* ── FAB trigger ── */
  .fab-trigger {
    margin-right: var(--space-1);
    transition: transform 0.15s ease;
  }

  .fab-trigger:active {
    transform: scale(0.95) !important;
    opacity: 0.85 !important;
  }

  /* ── Donut legend — 2-column compact grid ── */
  .distribution-legend {
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: start;
    column-gap: var(--space-5);
    row-gap: 10px;
    width: fit-content;
    margin: var(--space-2) auto 0;
  }

  .distribution-legend .legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .distribution-legend .legend-label {
    white-space: nowrap;
  }

  /* ── Donut title: reset section-title overrides to match chart-title ── */
  .mobile-slide-donut .section-title.card-title {
    font-size: 11px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: .14em !important;
    opacity: 1 !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    transform: none;
  }
}

/* ── Global FAB menu — position: fixed, never clipped by any container ── */
.fab-menu-global {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1);
  min-width: 190px;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: top right;
  background: rgba(18, 20, 28, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fab-menu-global.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── On mobile FAB opens modal directly — menu not needed ── */
@media (max-width: 768px) {
  .fab-menu,
  .fab-menu-global { display: none !important; }
}

/* ── Tap feedback ── */
@media (max-width: 768px) {
  .fab-trigger:active { transform: scale(0.96); }
}

/* ── Category drill-down: hide entire mobile slider, show only detail view ── */
body.is-detail-view .portfolio-slider-card   { display: none !important; }
body.is-detail-view .mobile-slide-donut      { display: none !important; }
body.is-detail-view .portfolio-mobile-slider { height: auto !important; }
body.is-detail-view .mobile-slider-track     { height: auto !important; }
body.is-detail-view .mobile-slide            { height: auto !important; }

/* ── Modal type toggle (Activo / Liquidez) ── */
.add-type-toggle {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-2) var(--space-3) 0;
}

.type-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #aaa;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.type-btn.active {
  background: rgba(100, 150, 255, 0.15);
  border-color: rgba(100, 150, 255, 0.4);
  color: #fff;
}

/* ── Mobile card bottom margin reset ── */
@media (max-width: 768px) {
  .hero-left > *:last-child          { margin-bottom: 0 !important; }
  .portfolio-slider-card > *:last-child { margin-bottom: 0 !important; }
}

/* ── Donut spacing override ── */
@media (max-width: 768px) {
  .mobile-slide-donut .section-title.card-title {
    font-size: 11px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: .14em !important;
    opacity: 1 !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    transform: none !important;
  }
}