/* Blackchain Wealth Advisor -- Apple-grade private wealth command center.
   Graphite/platinum surface language, single gold accent, restrained motion.
   --gold/--gold-soft/--gold-dim variable NAMES kept as-is (deep rename
   across every rule would be pure churn) but now carry the red brand
   accent, not literal gold -- read them as "--brand" mentally. */

:root {
  --bg: #16181d;
  --bg-elev: #1b1e24;
  --panel: rgba(46, 50, 58, 0.62);
  --panel-solid: #22262e;
  --card: #2c313c;
  --border: rgba(255,255,255,0.11);
  --border-strong: rgba(255,255,255,0.19);
  --hairline: rgba(255,255,255,0.075);
  --text: #f7f8fa;
  --muted: #a3a9b4;
  --muted-dim: #767c88;
  --green: #34d69f;
  --green-glow: rgba(52,214,159,0.32);
  --red: #ff7a6d;
  --red-glow: rgba(255,122,109,0.32);
  --amber: #e0a94a;
  --amber-glow: rgba(224,169,74,0.28);
  --gold: #dfb975;
  --gold-soft: #edd0a3;
  --gold-dim: rgba(223,185,117,0.16);
  --cyan: #79dfd2;
  --blue: #7ea6f7;
  --purple: #bd9af5;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- Apple-grade type + elevation system ----------
     Three deliberate text tiers (instead of "everything ~same gray"):
     --t1 = the one hero number a screen is allowed, near-white, heavy.
     --t2 = primary readable content (names, prices, body).
     --t3 = secondary/meta (labels, footnotes, timestamps) -- this is
     what --muted/--muted-dim already were; kept as aliases so existing
     rules using --muted don't need touching, only NEW hero-tier
     components opt into --t1/display treatment explicitly.
     Cards move from "1px border on everything" to elevation-by-fill:
     a card is a subtly lighter flat rect distinguished by background,
     not an outline -- borders are now reserved for truly interactive
     surfaces (inputs, buttons) where an edge affordance matters. */
  --t1: #f7f8fa;
  --t2: #eef0f3;
  --t3: var(--muted);
  --elev-1: rgba(255,255,255,0.028);   /* card resting on --bg */
  --elev-2: rgba(255,255,255,0.045);   /* card resting on --elev-1 (nested) */
  --font-display: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; outline: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body {
  margin: 0; padding: 0; min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", "Inter", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  line-height: 1.45;
  position: relative;
  overflow-x: hidden;
}
/* Subtle film-grain texture for material depth -- barely perceptible, keeps
   large dark panels from reading as flat/dead pixels. */
.grain-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.02; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Oversized brand watermark -- bleeds off the bottom-right corner, fixed
   so it stays put while the page scrolls beneath it. brand_mark.png has
   no alpha channel (solid dark background + gold linework), so a plain
   <img> would show a big ugly rectangle; -webkit-mask-image instead uses
   the PNG's luminance as a mask -- only the bright gold strokes paint
   through, the dark background disappears entirely, letting a single
   flat gold fill (var(--gold)) show through at low opacity. This is what
   gives a private wealth product its "engraved into the material" feel
   instead of a sticker logo pasted in a corner. */
/* Brand watermark REMOVED per design review: a large ghosted logo bleeding
   off a card corner reads as a generic crypto-ICO-landing-page trope, not
   a "private wealth" signal -- restraint is the premium cue here, not a
   bigger logo. Kept as inert (display:none) rather than deleted outright
   so it can be restored via a class toggle if ever wanted for a specific
   marketing surface, without re-writing the mask/luminance technique. */
.brand-watermark { display: none; }
@keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mono, #clock, .amt, .sub, table.watchlist td, .badge-net, .indicator-chip .iv, .kpi .value, .macro-cell .v {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
::selection { background: rgba(223,185,117,0.28); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.19); }
.wrap { max-width: 1680px; margin: 0 auto; padding: 30px 36px 90px; padding-left: max(36px, env(safe-area-inset-left)); padding-right: max(36px, env(safe-area-inset-right)); padding-bottom: max(90px, env(safe-area-inset-bottom)); position: relative; z-index: 1; }

/* ---------- hero metric -- ONE number, massive scale, real negative space
   This directly answers the "no single hero number" critique: portfolio
   equity currently competes for attention with 5 other macro-strip stats
   and 2 accuracy spotlights above the fold. Apple-grade dashboards
   lead with exactly one number at 2-3x the scale of anything else on
   the page, then let everything else recede below it. */
.hero-metric {
  padding: 54px 8px 40px; text-align: center; position: relative; z-index: 1;
}
.hero-metric-label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t3); font-weight: 600; margin-bottom: 14px;
}
.hero-metric-value {
  font-family: var(--font-display); font-size: 76px; font-weight: 600;
  letter-spacing: -0.035em; color: var(--t1); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-metric-delta {
  margin-top: 16px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--t3);
}
.hero-metric-delta .pos { color: var(--green); }
.hero-metric-delta .neg { color: var(--red); }
.hero-metric-sub { margin-top: 8px; font-size: 13px; color: var(--t3); }
@media (max-width: 640px) {
  .hero-metric { padding: 36px 8px 28px; }
  .hero-metric-value { font-size: 46px; }
  .hero-metric-delta { font-size: 14px; }
}

/* ---------- topbar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; flex-wrap: wrap; gap: 14px;
  background: transparent;
  border: none; border-radius: 0;
  padding: 22px 4px 0; margin-top: 2px;
  box-shadow: none;
}
.brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.brand .mark {
  width: 58px; height: 58px; border-radius: 15px;
  background-size: cover; background-position: center;
  background-color: #17140c;
  box-shadow: 0 0 0 1px rgba(223,185,117,0.4), 0 4px 18px rgba(223,185,117,0.16), 0 2px 8px rgba(0,0,0,0.4);
  overflow: hidden;
}
.brand .mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand h1 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.015em;
  color: var(--t1, var(--text, #f7f8fa));
}
.brand .tag { color: var(--gold, #dfb975); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin-top: 3px; }
.top-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.add-tx-btn {
  background: linear-gradient(135deg, var(--gold), #b8935a); color: #1a1305; border: none;
  font-size: 12.5px; font-weight: 650; letter-spacing: 0.1px; padding: 9px 16px; border-radius: 10px;
  cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); white-space: nowrap;
  box-shadow: 0 4px 16px -6px rgba(223,185,117,0.5);
}
.add-tx-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px -6px rgba(223,185,117,0.65); }
.add-tx-btn:active { transform: translateY(0); }

/* ---------- add-transaction modal ---------- */
.tx-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 100; background: rgba(4,5,7,0.72);
  backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px;
}
.tx-modal-backdrop.open { display: flex; animation: fadeIn 0.2s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.tx-modal {
  background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 26px 26px 22px; width: 100%; max-width: 420px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  animation: modalPop 0.25s var(--ease);
}
@keyframes modalPop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.tx-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tx-modal-head h3 { margin: 0; font-size: 17px; font-weight: 650; }
.tx-modal-close { background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; }
.tx-modal-close:hover { color: var(--text); }
.tx-modal-sub { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0 0 18px; }
.tx-field { margin-bottom: 14px; }
.tx-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.tx-field input, .tx-field select {
  width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; padding: 10px 12px; border-radius: var(--radius-sm); font-family: inherit;
  transition: border-color 0.2s var(--ease);
}
.tx-field input:focus, .tx-field select:focus { outline: none; border-color: rgba(223,185,117,0.45); }
.tx-error { background: rgba(255,107,94,0.1); border: 1px solid rgba(255,107,94,0.3); color: var(--red);
  font-size: 12.5px; padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 14px; }
.tx-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.tx-btn-secondary, .tx-btn-primary { font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border); }
.tx-btn-secondary { background: transparent; color: var(--muted); }
.tx-btn-secondary:hover { color: var(--text); border-color: var(--border-strong); }
.tx-btn-primary { background: linear-gradient(135deg, var(--gold), #b8935a); color: #1a1305; border: none; }
.tx-btn-primary:hover { filter: brightness(1.08); }
.tx-btn-primary:disabled { opacity: 0.6; cursor: default; }

/* ---------- transaction history table ---------- */
.tx-table td, .tx-table th { white-space: nowrap; }

/* ---------- asset detail modal (click-through from advisor card) ---------- */
.asset-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 100; background: rgba(4,5,7,0.72);
  backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px;
}
.asset-modal-backdrop.open { display: flex; animation: fadeIn 0.2s var(--ease); }
.asset-modal {
  background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 26px 26px 22px; width: 100%; max-width: 560px; max-height: 84vh; overflow-y: auto;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); animation: modalPop 0.25s var(--ease);
}
.asset-modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.asset-modal-title { display: flex; align-items: center; gap: 12px; }
.asset-modal-title h3 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.asset-modal-sub { font-size: 13px; color: var(--muted); font-family: "SF Mono", monospace; margin-top: 2px; }
.asset-modal-body { margin: 14px 0 6px; }
.asset-modal-section { margin-bottom: 18px; }
.asset-modal-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);
  font-weight: 650; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--hairline);
}
.asset-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; }
.asset-stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 4px; }
.asset-stat .val { font-family: "SF Mono", monospace; font-size: 14px; font-weight: 600; }
.asset-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--hairline); }

@media (max-width: 640px) {
  .asset-modal { padding: 20px 18px 18px; max-height: 88vh; }
  .asset-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.tx-type-badge { font-size: 11px; font-weight: 650; letter-spacing: 0.3px; padding: 3px 9px; border-radius: 6px; text-transform: uppercase; }
.tx-type-buy { background: rgba(48,209,153,0.1); color: var(--green); }
.tx-type-sell { background: rgba(255,107,94,0.1); color: var(--red); }
.tx-type-transferin { background: rgba(110,155,244,0.1); color: var(--blue); }
.tx-type-transferout { background: rgba(255,255,255,0.05); color: var(--muted); }
.tx-actions { white-space: nowrap; }
.tx-icon-btn {
  background: none; border: 1px solid var(--border); color: var(--muted); width: 26px; height: 26px;
  border-radius: 6px; cursor: pointer; font-size: 12px; margin-left: 5px; transition: all 0.15s var(--ease);
}
.tx-icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,0.04); }
.tx-icon-danger:hover { color: var(--red); border-color: rgba(255,107,94,0.35); background: rgba(255,107,94,0.08); }
#clock { color: var(--muted-dim); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.status-pill {
  padding: 7px 15px; border-radius: 999px; font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.3px; display: flex; align-items: center; gap: 7px; border: 1px solid;
  backdrop-filter: blur(8px);
}
.status-live { background: rgba(48,209,153,0.08); color: var(--green); border-color: rgba(48,209,153,0.25); }
.status-halted { background: rgba(223,185,117,0.1); color: var(--amber); border-color: rgba(223,185,117,0.3); }
.status-warm { background: rgba(223,185,117,0.08); color: var(--gold); border-color: rgba(223,185,117,0.25); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; position: relative; }
/* Radar-ping pulse on the status dot while LIVE -- a flat colored dot reads
   as a static icon; a dot that visibly breathes reads as "this is watching
   something right now." Suppressed automatically when the page is halted/
   warming/disconnected because those states use different pill classes. */
.status-live .dot::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid currentColor; opacity: 0.55;
  animation: dotPing 1.8s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes dotPing {
  0% { transform: scale(0.6); opacity: 0.6; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { opacity: 0; }
}

/* Quick-nav: one-tap jump links across the page's major sections, styled
   as a horizontal pill strip under the topbar. Replaces the old poll
   progress bar (a perpetually filling/resetting strip that read as
   "something is loading/wrong" rather than useful navigation) with
   something that's actually functional and calm -- no looping animation,
   just a static row of links with a quiet hover/active state. */
.quick-nav {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 0 16px; margin: 0; scrollbar-width: none;
}
.quick-nav::-webkit-scrollbar { display: none; }
.quick-nav a {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--elev-1); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; text-decoration: none; white-space: nowrap;
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.quick-nav a:hover { color: var(--text); background: var(--elev-2); border-color: var(--border-strong); }
.quick-nav a:active { color: var(--bg); background: var(--gold); border-color: var(--gold); }
/* anchor targets sit above their section so the sticky topbar + quick-nav
   don't cover the heading when jumped to */
.anchor-target { display: block; position: relative; top: -84px; visibility: hidden; }

/* Heartbeat glow -- a brief border/shadow pulse on the hero metric each
   time a poll cycle completes successfully, so a real "the engine just
   breathed" event is visible even when the number itself didn't move. */
.hero-metric.heartbeat::after {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius-lg);
  pointer-events: none; box-shadow: 0 0 0 0 var(--gold-dim);
  animation: heartbeatPulse 1.1s var(--ease);
}
@keyframes heartbeatPulse {
  0% { box-shadow: 0 0 0 0 rgba(223,185,117,0.35); }
  70% { box-shadow: 0 0 0 22px rgba(223,185,117,0); }
  100% { box-shadow: 0 0 0 0 rgba(223,185,117,0); }
}

/* Live-updating "Xs ago" freshness label -- subtle color drift from neutral
   (just updated) toward warning amber the longer it's been, so staleness is
   felt, not just stated. Amber, not red: stale data is a warning about
   freshness, not a signal that any price went down. */
#data-age { transition: color 0.6s ease; font-variant-numeric: tabular-nums; }
#data-age.stale { color: var(--amber); }

/* Count-up/down number transitions read as a live feed ticking rather than
   a page that silently swaps text. */
.hero-metric-value, .kpi .value { transition: opacity 0.15s ease; }

/* ---------- macro strip ---------- */
.macro-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: transparent; border: none;
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px;
}
.macro-cell { background: var(--elev-1); padding: 15px 19px; transition: background 0.2s var(--ease); }
.macro-cell:hover { background: var(--elev-2); }
.macro-cell .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 6px; font-weight: 500; }
.macro-cell .v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.macro-cell .v small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 3px; }

/* ---------- news ticker ---------- */
.news-ticker {
  display: flex; align-items: center; gap: 0;
  background: var(--panel-solid); border: 1px solid rgba(223,185,117,0.28); border-radius: 12px;
  padding: 0; margin-bottom: 20px; overflow: hidden; height: 46px; position: relative;
  box-shadow: 0 0 0 1px rgba(223,185,117,0.06) inset, 0 2px 10px rgba(0,0,0,0.35);
}
.news-label {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px;
  color: var(--green); display: flex; align-items: center; gap: 7px;
  padding: 0 18px; height: 100%; position: relative; z-index: 2;
  background: var(--panel-solid);
  box-shadow: 12px 0 16px -6px var(--panel-solid);
}
.news-label::before {
  /* Was red -- read as "something's down" sitting in the middle of a
     portfolio page. LIVE just means "this ticker updates", same meaning
     as the green status-pill dot elsewhere on the page, so it gets the
     same color for the same meaning. */
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px 2px var(--green-glow);
  animation: newsPulse 1.6s ease-in-out infinite;
}
@keyframes newsPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.8); } }
.news-viewport { flex: 1 1 auto; overflow: hidden; height: 100%; position: relative; }
.news-track {
  display: flex; align-items: center; white-space: nowrap; height: 100%;
  position: absolute; left: 0; top: 0;
  animation: newsScroll 90s linear infinite;
  will-change: transform;
}
.news-ticker:hover .news-track { animation-play-state: paused; }
@keyframes newsScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.news-item {
  display: inline-flex; align-items: center; gap: 9px; padding: 0 28px;
  font-size: 13.5px; font-weight: 500; color: var(--text); text-decoration: none;
  border-right: 1px solid var(--border);
}
.news-item:hover { color: var(--gold-soft); }
.news-src { font-size: 11px; font-weight: 800; letter-spacing: 0.6px; color: var(--gold); text-transform: uppercase; }
.news-time { font-size: 11.5px; color: var(--muted); }

/* ---------- advisor call accuracy spotlight ---------- */
/* This is the tracker's actual value proposition: real, forward-graded
   call accuracy. It gets top-of-page placement and its own distinct
   visual treatment instead of being one more .panel buried after
   Transaction History -- a genuinely differentiated number deserves to
   look different from a market-data stat card. */
.accuracy-spotlight {
  background: linear-gradient(160deg, rgba(223,185,117,0.10), rgba(46,50,58,0.55) 60%);
  border: 1px solid rgba(223,185,117,0.28);
  border-radius: var(--radius-lg, 16px);
  padding: 26px 28px 24px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -24px rgba(223,185,117,0.25);
}
.accuracy-spotlight::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.accuracy-spotlight-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.accuracy-spotlight-eyebrow {
  font-size: 11px; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 600; margin-bottom: 4px;
}
.accuracy-spotlight-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.accuracy-spotlight-badge {
  font-size: 11.5px; font-weight: 600; color: var(--text); background: rgba(255,255,255,0.1);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px;
  white-space: nowrap; align-self: center;
}
.accuracy-spotlight-hero { text-align: center; margin: 6px 0 22px; }
.accuracy-spotlight-hero-value {
  font-size: 64px; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.accuracy-spotlight-hero-pct { font-size: 32px; font-weight: 650; }
.accuracy-spotlight-hero-label { font-size: 13px; color: var(--muted); margin-top: 8px; }
.accuracy-spotlight-hero-lown { font-size: 11.5px; color: var(--amber); margin-top: 8px; max-width: 480px; line-height: 1.4; }
.accuracy-call-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.accuracy-call-card {
  background: rgba(0,0,0,0.18); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px); padding: 14px 16px; text-align: center;
}
.accuracy-call-label {
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; font-weight: 600;
}
.accuracy-call-value {
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.accuracy-call-sub { font-size: 11px; color: var(--muted-dim, var(--muted)); margin-top: 4px; }
.accuracy-call-lown { font-size: 11px; color: var(--amber); margin-top: 6px; line-height: 1.3; }
.accuracy-spotlight-footnote { font-size: 11px; color: var(--muted); line-height: 1.5; }
@media (max-width: 640px) {
  .accuracy-spotlight { padding: 20px 18px 18px; }
  .accuracy-spotlight-hero-value { font-size: 48px; }
  .accuracy-spotlight-hero-pct { font-size: 24px; }
  .accuracy-call-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Bot Signal Accuracy variant -- same spotlight treatment, cyan accent
   instead of gold so it reads as a distinct, technical/signal identity
   next to the gold-branded wealth-advisor spotlight above it. */
.accuracy-spotlight-bot {
  background: linear-gradient(160deg, rgba(121,223,210,0.09), rgba(46,50,58,0.55) 60%);
  border-color: rgba(121,223,210,0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -24px rgba(121,223,210,0.22);
}
.accuracy-spotlight-bot::before { background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.accuracy-spotlight-bot .accuracy-spotlight-eyebrow { color: var(--cyan); }
.bot-trend-title {
  font-size: 11px; letter-spacing: 0.4px; color: var(--muted); text-transform: uppercase;
  margin-bottom: 10px; font-weight: 600;
}
.bot-trend-chart {
  display: flex; align-items: flex-end; gap: 10px; height: 90px; margin-bottom: 18px;
  padding: 0 4px;
}
.bot-trend-bar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; min-width: 32px; cursor: default;
}
.bot-trend-bar-fill {
  width: 100%; max-width: 44px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--cyan), rgba(121,223,210,0.35));
  transition: height 0.4s var(--ease);
}
.bot-trend-bar-fill.pos { background: linear-gradient(180deg, var(--green), rgba(52,214,159,0.35)); }
.bot-trend-bar-fill.neg { background: linear-gradient(180deg, var(--red), rgba(255,122,109,0.35)); }
.bot-trend-bar-label { font-size: 11px; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.bot-trend-bar-week { font-size: 11px; color: var(--muted-dim, var(--muted)); margin-top: 1px; letter-spacing: 0.3px; }

.bot-trust-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--muted);
}
.bot-trust-badge.pos { background: rgba(52,214,159,0.12); border-color: rgba(52,214,159,0.35); color: var(--green); }
.bot-trust-badge-icon { font-size: 13px; }
.bot-trust-reasons { margin: 10px 0 20px; display: flex; flex-direction: column; gap: 4px; }
.bot-trust-reason { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.bot-trust-reason::before { content: "\2022  "; color: var(--muted-dim, var(--muted)); }

/* ---------- kpi row ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 10px; }
.kpi {
  background: var(--elev-1); backdrop-filter: blur(20px) saturate(1.1); border: none;
  border-radius: var(--radius-md); padding: 18px 21px; position: relative; overflow: hidden;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
.kpi:hover { background: var(--elev-2); transform: translateY(-1px); }
.kpi::before { content: none; }
.kpi .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 9px; font-weight: 500; }
.kpi .value { font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi .sub { font-size: 12px; margin-top: 6px; color: var(--muted); }
.pos { color: var(--green); } .neg { color: var(--red); }
.kpi.hero {
  grid-column: span 2; padding: 24px 28px; background: linear-gradient(155deg, rgba(223,185,117,0.06), var(--panel) 55%);
  border-color: rgba(223,185,117,0.18);
}
.kpi.hero .label { font-size: 11px; letter-spacing: 0.9px; }
.kpi.hero .value { font-size: 38px; letter-spacing: -0.03em; }
.kpi.hero .sub { font-size: 13px; margin-top: 8px; }
@media (max-width: 900px) { .kpi.hero { grid-column: span 1; } }
.kpi .value.flash-up { animation: flashUp 1.1s ease-out; display: inline-block; }
.kpi .value.flash-down { animation: flashDown 1.1s ease-out; display: inline-block; }
@keyframes flashUp { 0% { color: var(--green); transform: scale(1.08); } 100% { color: inherit; transform: scale(1); } }
@keyframes flashDown { 0% { color: var(--red); transform: scale(1.08); } 100% { color: inherit; transform: scale(1); } }

/* ---------- section headers ---------- */
.section-title {
  font-family: var(--font-display);
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--t3);
  margin: 44px 0 16px; display: flex; align-items: center; gap: 11px; font-weight: 650;
}
.section-title .glyph { display: none; }
.section-title::after { content: none; }
.src-tag { font-size: 11.5px; letter-spacing: 0.3px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,0.075); padding: 4px 9px; border-radius: 5px; text-transform: none; border: 1px solid var(--border-strong); }

/* ---------- bitbo on-chain panel ---------- */
.bitbo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.bitbo-stat { background: var(--elev-2); border: none; border-radius: var(--radius-sm); padding: 16px 17px; transition: transform 0.2s var(--ease), background 0.2s var(--ease); }
.bitbo-stat:hover { transform: translateY(-2px); background: rgba(255,255,255,0.065); }
.bitbo-stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 500; margin-bottom: 8px; }
.bitbo-stat .val { font-family: "SF Mono", monospace; font-size: 18px; font-weight: 600; }
.cycle-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cycle-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 500; padding: 7px 10px; border-bottom: 1px solid var(--border-strong); }
.cycle-table td { padding: 9px 10px; border-bottom: 1px solid var(--hairline); font-family: "SF Mono", monospace; }
.cycle-table tr.live-row td { color: var(--gold); font-weight: 600; }
.bitbo-footnote { font-size: 11.5px; color: var(--muted); margin-top: 12px; line-height: 1.6; }

/* ---------- advisor cards ---------- */
.advisor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.advisor-card {
  background: var(--elev-1); backdrop-filter: blur(20px) saturate(1.1); border: none;
  border-radius: var(--radius-lg); padding: 23px 23px 21px; position: relative; overflow: hidden;
  transition: transform 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease);
  animation: cardIn 0.5s var(--ease) backwards;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
.advisor-card.no-anim { animation: none; }
.advisor-grid .advisor-card:nth-child(1) { animation-delay: 0.02s; }
.advisor-grid .advisor-card:nth-child(2) { animation-delay: 0.07s; }
.advisor-grid .advisor-card:nth-child(3) { animation-delay: 0.12s; }
.advisor-grid .advisor-card:nth-child(4) { animation-delay: 0.17s; }
.advisor-grid .advisor-card:nth-child(5) { animation-delay: 0.22s; }
.advisor-grid .advisor-card:nth-child(n+6) { animation-delay: 0.26s; }
.advisor-card:hover { transform: translateY(-4px) scale(1.008); background: var(--elev-2); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 44px -18px rgba(0,0,0,0.5); }
.advisor-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; }
.advisor-card.call-STRONG_TAKE_PROFIT::before { background: var(--green); }
.advisor-card.call-TAKE_PROFIT::before { background: var(--green); opacity: 0.6; }
.advisor-card.call-STOP_LOSS_WATCH::before { background: var(--red); }
.advisor-card.call-BUY_MORE::before { background: var(--blue); }
.advisor-card.call-STRONG_TAKE_PROFIT { box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, inset 0 0 0 1px rgba(48,209,153,0.14); }
.advisor-card.call-STOP_LOSS_WATCH { box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, inset 0 0 0 1px rgba(255,107,94,0.14); }
.advisor-card.call-BUY_MORE { box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, inset 0 0 0 1px rgba(110,155,244,0.12); }
.advisor-card.call-HOLD { opacity: 0.88; }
.advisor-card > * { position: relative; z-index: 1; }
.advisor-card .spark-wrap { margin: 2px 0 4px; height: 44px; opacity: 0.9; }
.advisor-card .spark-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }

.advisor-card .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 13px; }
.advisor-card .token-row { display: flex; align-items: center; gap: 9px; }
.advisor-card .token { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.coin-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,0.09); }
table.watchlist .coin-icon { width: 17px; height: 17px; margin-right: 7px; vertical-align: -3px; }
.advisor-card .price { color: var(--muted); font-size: 12px; margin-top: 4px; letter-spacing: 0; }
.badge { font-size: 11px; font-weight: 650; letter-spacing: 0.4px; padding: 6px 12px; border-radius: 8px; text-transform: uppercase; white-space: nowrap; border: 1px solid; display: inline-flex; align-items: center; gap: 6px; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-STRONG_TAKE_PROFIT { background: rgba(48,209,153,0.1); color: var(--green); border-color: rgba(48,209,153,0.28); }
.badge-TAKE_PROFIT { background: rgba(48,209,153,0.08); color: #86e6c2; border-color: rgba(48,209,153,0.2); }
.badge-STOP_LOSS_WATCH { background: rgba(255,107,94,0.1); color: var(--red); border-color: rgba(255,107,94,0.28); }
.badge-BUY_MORE { background: rgba(110,155,244,0.1); color: var(--blue); border-color: rgba(110,155,244,0.28); }
.badge-HOLD { background: rgba(255,255,255,0.03); color: var(--muted); border-color: var(--border); }
.badge-HOLD::before { opacity: 0.4; }
.badge-UNAVAILABLE { background: rgba(255,255,255,0.03); color: var(--muted); border-color: var(--border); }
.badge-UNAVAILABLE::before { display: none; }

.advisor-card .pl-row { display: flex; justify-content: space-between; align-items: baseline; margin: 17px 0; }
.advisor-card .pl-pct { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.advisor-card .pl-usd { font-size: 12px; color: var(--muted-dim); text-align: right; line-height: 1.6; }

.indicator-row { display: flex; gap: 8px; margin: 13px 0; flex-wrap: wrap; }
.indicator-chip {
  flex: 1; min-width: 78px; background: rgba(255,255,255,0.025); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; text-align: center;
}
.indicator-chip .ik { font-size: 11px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.indicator-chip .iv { font-size: 13.5px; font-weight: 650; margin-top: 3px; font-variant-numeric: tabular-nums; }
.rsi-ob { color: var(--red); } .rsi-os { color: var(--green); } .rsi-neu { color: var(--text); }

.advisor-card .meta-line { font-size: 12px; color: var(--muted); margin: 6px 0; display: flex; justify-content: space-between; }
.advisor-card .meta-line b { color: var(--text); font-weight: 600; }
.advisor-card .reasons { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.advisor-card .reasons div { font-size: 12.5px; color: #aeb4bd; margin-bottom: 7px; line-height: 1.6; }
.advisor-card .trim { margin-top: 13px; font-size: 13px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--gold-dim); border: 1px solid rgba(223,185,117,0.22); }
.advisor-card .trim b { color: var(--gold-soft); }

/* ---------- grid layouts ---------- */
.grid-2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1200px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.panel {
  background: var(--elev-1); backdrop-filter: blur(20px) saturate(1.1); border: none; border-radius: var(--radius-lg); padding: 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}

/* ---------- chart panel ---------- */
.section-title { justify-content: space-between; }

.signal-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  margin-left: 10px; flex-shrink: 0; user-select: none;
}
.signal-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.signal-toggle-track {
  position: relative; width: 34px; height: 19px; border-radius: 999px;
  background: rgba(255,255,255,0.11); border: 1px solid var(--border);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.signal-toggle-thumb {
  position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--muted); transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.signal-toggle input:checked + .signal-toggle-track { background: rgba(52,214,159,0.22); border-color: rgba(52,214,159,0.4); }
.signal-toggle input:checked + .signal-toggle-track .signal-toggle-thumb { transform: translateX(15px); background: var(--green); }
.signal-toggle-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.signal-toggle input:checked ~ .signal-toggle-label { color: var(--text); }
.chart-panel { padding-top: 16px; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 16px; padding: 4px 6px 14px; font-size: 12px; font-variant-numeric: tabular-nums;
  min-height: 18px;
}
.cl-item { display: inline-flex; gap: 5px; align-items: baseline; }
.cl-k { color: var(--muted-dim); font-weight: 600; font-size: 11px; letter-spacing: 0.3px; }
.cl-v { color: var(--text); font-weight: 600; }
.cl-ema20 .cl-k { color: #79dfd2; } .cl-ema50 .cl-k { color: #dfb975; }
.chart-subpane-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted-dim); font-weight: 600;
  margin-top: 10px; margin-bottom: 2px;
}
.panel h3 { margin: 0 0 17px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); font-weight: 600; }

/* ---------- sentiment gauges ---------- */
.sentiment-gauges { display: flex; gap: 22px; flex-wrap: wrap; }
.gauge { flex: 1; min-width: 150px; text-align: center; }
.gauge .ring { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; position: relative; }
.gauge .ring-inner { background: var(--panel-solid); width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.gauge .ring-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.gauge .cls { margin-top: 6px; font-size: 12.5px; font-weight: 700; }

/* ---------- dominance bar ---------- */
.dominance-bar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin: 12px 0 16px; border: 1px solid var(--border); }
.dominance-seg { display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: #0a0d14; overflow: hidden; white-space: nowrap; }
.dom-btc { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.dom-eth { background: linear-gradient(90deg, #8fa9ff, #b3c4ff); }
.dom-alt { background: linear-gradient(90deg, #3a4356, #4d5871); color: var(--muted); }
.dom-legend { display: flex; gap: 18px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.dom-legend span { display: flex; align-items: center; gap: 6px; }
.dom-legend .sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ---------- halving progress ---------- */
.halving-bar-track { height: 10px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; margin: 10px 0; }
.halving-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--cyan)); border-radius: 6px; }

/* ---------- TAO subnets ---------- */
.subnet-list { display: flex; flex-direction: column; gap: 11px; }
/* Bigger, touch-first subnet cards: a 3-column card with the market data
   (24H / 7D / score) on its own readable row, plus a full-width allocation
   strip. The old 4-column single-line row was too cramped to read on a
   phone while scrolling. */
.subnet-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 16px 17px; background: rgba(255,255,255,0.022); border: 1px solid var(--border);
  border-radius: var(--radius-md); transition: background 0.2s var(--ease); position: relative;
}
.subnet-row:hover { background: rgba(255,255,255,0.038); }
.subnet-row .badge-net {
  width: 48px; height: 48px; border-radius: 13px; background: linear-gradient(135deg, rgba(223,185,117,0.16), rgba(111,211,199,0.08));
  display: flex; align-items: center; justify-content: center; font-weight: 650; font-size: 13px; color: var(--gold-soft);
  border: 1px solid rgba(223,185,117,0.2); flex-shrink: 0; overflow: hidden;
}
.subnet-row .badge-net-img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.subnet-row .info { min-width: 0; }
.subnet-row .info .name { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subnet-row .info .sub { font-size: 12px; color: var(--muted-dim); margin-top: 2px; }
.subnet-row .amt { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.subnet-row .amt .usd-hint { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 400; }
.subnet-row .amt .pnl-hint { font-size: 11.5px; margin-top: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.subnet-row .pct-bar-wrap { width: 90px; flex-shrink: 0; }

/* market pills: 24H / 7D / score on the subnet card */
.subnet-pcts { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; align-items: center; }
.sn-pill {
  font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px;
  background: rgba(255,255,255,0.055); color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sn-pill .k { font-size: 9.5px; letter-spacing: .04em; opacity: .62; margin-right: 4px; font-weight: 700; }
.sn-pill.up { color: #34d69f; background: rgba(52,214,159,0.13); }
.sn-pill.down { color: #ff7a6d; background: rgba(255,122,109,0.13); }
.sn-pill.score { color: var(--gold-soft); background: rgba(223,185,117,0.13); }

/* full-width allocation strip pinned to the card's bottom edge */
.subnet-alloc {
  grid-column: 1 / -1; height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(255,255,255,0.06); margin-top: 2px;
}
.subnet-alloc > span { display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--cyan)); }

/* ---------- live position health meter + manual bank ---------- */
.lp-card {
  background: rgba(255,255,255,0.022); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 15px; margin-bottom: 10px;
}
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-name { font-weight: 650; font-size: 14.5px; display: flex; align-items: center; gap: 7px; min-width: 0; }
.lp-pnl { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; white-space: nowrap; }
.lp-pnl.pos { color: #34d69f; } .lp-pnl.neg { color: #ff7a6d; } .lp-pnl.flat { color: var(--muted); }
/* "cost X τ · value Y τ" -- same line style as the paper trader's card,
   cloned here so both surfaces read identically at a glance. */
.lp-costval { font-size: 11.5px; color: var(--muted-dim); margin-top: 4px; }
.lp-meta { font-size: 11.5px; color: var(--muted-dim); margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; }
.lp-meta b { color: var(--muted); font-weight: 600; }
/* Time-held data point -- small stopwatch glyph so it reads as a distinct
   field from the plain grey meta text next to it, not just more prose. */
.lp-age { color: var(--muted); font-weight: 600; }
/* health meter: one bar, coloured by how healthy the trade is, with tick
   marks at the stop (-8%) and target (+40%) bands so the fill is readable
   as "how close am I to the exit" rather than a bare number. */
.lp-meter { position: relative; height: 8px; border-radius: 5px; background: rgba(255,255,255,0.07); margin-top: 10px; overflow: hidden; }
.lp-meter > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; transition: width .5s var(--ease), background .3s; }
.lp-meter .lp-tick { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,0.22); }
.lp-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-dim); margin-top: 4px; }
.lp-actions { display: flex; gap: 8px; align-items: center; margin-top: 11px; }
.lp-bank {
  appearance: none; border: 1px solid rgba(52,214,159,0.42); background: rgba(52,214,159,0.13);
  color: #34d69f; font-weight: 650; font-size: 12.5px; padding: 8px 14px; border-radius: 9px;
  cursor: pointer; transition: background .15s, transform .1s;
}
.lp-bank:hover { background: rgba(52,214,159,0.22); }
.lp-bank:active { transform: scale(.97); }
.lp-bank:disabled { opacity: .45; cursor: not-allowed; }
.lp-banknote { font-size: 10.5px; color: var(--muted-dim); line-height: 1.4; }

@media (max-width: 560px) {
  .subnet-row { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 15px 14px; }
  .subnet-row .amt { grid-column: 2; text-align: left; font-size: 15px; margin-top: 2px; }
  .subnet-row .badge-net { width: 52px; height: 52px; }
  .subnet-row .info .name { font-size: 16px; }
  .sn-pill { font-size: 12px; padding: 4px 9px; }
  .lp-bank { flex: 1; padding: 11px 14px; font-size: 13.5px; }
}

/* ---------- portfolio composition donut ---------- */
.composition-hero { display: flex; align-items: center; gap: 22px; margin-bottom: 20px; }
.donut-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.donut-svg { display: block; }
.donut-arc { transition: opacity 0.15s var(--ease); cursor: default; }
.donut-arc:hover { opacity: 0.75; }
.donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.donut-center-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.donut-center-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.donut-legend-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.donut-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.donut-legend-hk { color: var(--muted); font-size: 11px; font-weight: 400; }
.donut-legend-pct { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.donut-legend-more { font-size: 11.5px; color: var(--muted-dim, var(--muted)); padding-left: 18px; }
.composition-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px;
}
.composition-stat { text-align: center; }
.composition-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 6px; }
.composition-stat-value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.composition-footnote { font-size: 11px; color: var(--muted-dim, var(--muted)); margin-top: 14px; text-align: right; }
.power-law-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.pl-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pl-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.power-law-chart-wrap { position: relative; overflow: visible; }
/* ROOT CAUSE (confirmed via isolated reproduction, cross-referenced
   against tradingview/lightweight-charts#1772): Lightweight Charts
   v4.2's own log-scale tick-label renderer breaks down on this chart's
   ~7-order-of-magnitude BTC price range and paints one stray,
   wildly-out-of-sequence label. Tried autoscaleInfoProvider hints,
   fixed priceRange, scaleMargins -- none of those config knobs touch
   it; it's the tick-generation algorithm itself, not something exposed
   to configure away. FIX: don't fight the native renderer -- mask its
   PAINT (not its existence: rightPriceScale stays visible:true because
   the log-scale coordinate MATH only computes correctly when the scale
   is visible; toggling visible:false was measured to break
   priceToCoordinate() itself, e.g. 1/10/100/1000 all mapping to nearly
   the same pixel) and draw our own labels via priceToCoordinate(),
   which is exact because it's the chart's own real internal math.
   Mask must extend past the wrap's own edges: DOM inspection showed
   the price-scale canvas physically overflows ~8-14px past the
   container's right/top CSS bounds. */
.power-law-axis-mask {
  position: absolute; top: -6px; right: -14px; width: 100px; height: calc(100% + 12px);
  /* MUST be fully opaque, not var(--panel)'s translucent rgba(46,50,58,0.62)
     -- a semi-transparent mask lets the stray native label bleed through
     at reduced opacity instead of fully hiding it (confirmed via live
     screenshot). This is --panel pre-composited over --bg-elev, i.e. the
     actual solid color the panel renders as against the page background. */
  background: #25282f;
  pointer-events: none; z-index: 5;
}
.power-law-axis-labels { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.power-law-axis-label {
  position: absolute; right: 6px; transform: translateY(-50%);
  color: #9aa4b2; font-size: 11px; font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .composition-hero { flex-direction: column; align-items: stretch; gap: 16px; }
  .donut-wrap { align-self: center; }
}
.subnet-row .pct-bar-track { height: 5px; border-radius: 4px; background: rgba(255,255,255,0.05); overflow: hidden; }
.subnet-row .pct-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--cyan)); border-radius: 4px; }
.subnet-row .pct-label { font-size: 11px; color: var(--muted); text-align: right; margin-top: 3px; }
.subnet-root .badge-net { background: linear-gradient(135deg, var(--gold), #b8935a); color: #1a1305; border-color: transparent; }
.reg-badge { font-size: 11px; padding: 2px 7px; border-radius: 5px; background: rgba(110,155,244,0.1); color: var(--blue); margin-left: 6px; white-space: nowrap; }

/* ---------- watchlist table ---------- */
table.watchlist { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.watchlist th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; padding: 9px 11px; border-bottom: 1px solid var(--border); }
table.watchlist td { padding: 10px 11px; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
table.watchlist tr:hover td { background: rgba(255,255,255,0.018); }
.regime-trending { color: var(--cyan); } .regime-mean_reverting { color: var(--purple); } .regime-unknown { color: var(--muted); }
td.right, th.right { text-align: right; }

/* ---------- footer ---------- */
.footer { text-align: center; color: var(--muted-dim); font-size: 11.5px; margin-top: 48px; line-height: 1.9; }
.footer a { color: var(--cyan); text-decoration: none; }
.disclaimer { background: var(--gold-dim); border: 1px solid rgba(223,185,117,0.3); border-radius: var(--radius-md); padding: 13px 17px; font-size: 12px; color: var(--gold-soft); margin-top: 20px; line-height: 1.6; opacity: 1; }
.disclaimer::before { content: "ⓘ "; opacity: 0.7; }

/* ---------- portfolio growth chart ---------- */
.chart-window-toggle {
  display: inline-flex; gap: 2px; margin-left: auto; flex-shrink: 0;
  background: var(--elev-1); border-radius: 9px; padding: 3px;
}
.chart-window-toggle button {
  background: none; border: none; color: var(--muted-dim);
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px; padding: 6px 13px;
  border-radius: 7px; cursor: pointer; transition: color 0.15s var(--ease), background 0.15s var(--ease);
  text-transform: uppercase; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
}
.chart-window-toggle button:hover { color: var(--text); }
.chart-window-toggle button.active { background: var(--card); color: var(--gold); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.portfolio-history-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.portfolio-history-meta .pos { color: var(--green); font-weight: 600; }
.portfolio-history-meta .neg { color: var(--red); font-weight: 600; }

/* ---------- portfolio growth chart: hero header + stat strip ---------- */
.portfolio-growth-panel { padding-top: 20px; }
.portfolio-hero { margin-bottom: 14px; }
.portfolio-hero-value {
  font-size: 40px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  line-height: 1.1; transition: color 0.3s var(--ease);
}
.portfolio-hero-delta { font-size: 14px; margin-top: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
.portfolio-hero-delta .pos { color: var(--green); font-weight: 650; }
.portfolio-hero-delta .neg { color: var(--red); font-weight: 650; }
.portfolio-hero-delta .arrow { font-size: 12px; margin-right: 2px; }
.portfolio-stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px;
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline);
}
.portfolio-stat-chip { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.portfolio-stat-chip .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.portfolio-stat-chip .val { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .portfolio-hero-value { font-size: 30px; }
  .portfolio-stat-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; padding-bottom: 12px; }
  .portfolio-stat-chip { padding: 8px 10px; }
  .portfolio-stat-chip .label { font-size: 10.5px; margin-bottom: 3px; }
  .portfolio-stat-chip .val { font-size: 13.5px; }
  .portfolio-growth-panel { padding-top: 14px; padding-bottom: 14px; }
  .portfolio-hero { margin-bottom: 10px; }
  #portfolio-chart-container { height: 180px !important; }
}

@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .wrap { padding: 16px 14px 48px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); padding-bottom: max(48px, env(safe-area-inset-bottom)); }
  .topbar { padding: 16px 16px; border-radius: var(--radius-md); }
  .brand { gap: 13px; min-width: 0; }
  .brand .mark { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
  .brand h1 { font-size: 17px; line-height: 1.25; }
  .brand .tag { font-size: 11px; letter-spacing: 0.11em; }
  .top-right { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  #clock { display: none; }
  .status-pill { padding: 5px 11px; font-size: 11px; white-space: nowrap; }
  #status-text { font-size: 11px; letter-spacing: 0.1px; }
  .add-tx-btn { font-size: 11px; padding: 7px 12px; }
  .tx-modal { padding: 20px 18px 18px; }
  /* Single column, more breathing room -- a 2-col grid of tiny numbered
     tiles is what makes a dense fintech dashboard feel like a squeezed
     desktop terminal rather than a real mobile-first design. Trade
     vertical scroll length for readable, unhurried numbers. */
  .macro-strip { grid-template-columns: 1fr; gap: 1px; }
  .macro-cell { padding: 14px 16px; }
  .macro-cell .k { font-size: 11px; }
  .macro-cell .v { font-size: 17px; }
  .news-ticker { height: 40px; }
  .news-label { font-size: 11px; padding: 0 10px; }
  .news-item { padding: 0 16px; font-size: 11.5px; }
  .section-title { font-size: 12.5px; flex-wrap: wrap; margin: 30px 0 13px; }
  .signal-toggle { margin-left: 0; }
  .bitbo-grid { grid-template-columns: 1fr; gap: 8px; }
  .bitbo-stat { padding: 13px 14px; }
  .bitbo-stat .val { font-size: 17px; word-break: break-word; }
  .cycle-table { width: max-content; max-width: 100%; font-size: 12px; display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .cycle-table th, .cycle-table td { padding: 9px 12px; }
  .kpi .value { font-size: 22px; }
  .kpi.hero { grid-column: span 1; padding: 20px 22px; }
  .kpi.hero .value { font-size: 30px; }
  .advisor-card .token { font-size: 18px; }
  .advisor-card .pl-pct { font-size: 22px; }
  .advisor-grid { grid-template-columns: 1fr; gap: 12px; }
  table.watchlist { width: max-content; max-width: 100%; font-size: 12px; display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  table.watchlist th, table.watchlist td { padding: 9px 6px; }
  .subnet-row { grid-template-columns: auto 1fr auto; gap: 10px; padding: 12px 14px; }
  .subnet-row .pct-bar-wrap { display: none; }
  .subnet-row .info .name { font-size: 13px; }
  .subnet-list { gap: 8px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .panel { padding: 18px; }
  .panel h3 { font-size: 12px; }
}
@media (max-width: 400px) {
  .brand h1 { font-size: 16px; }
  .brand .tag { display: none; }
  .macro-strip { grid-template-columns: 1fr; }
  .bitbo-grid { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .wrap { padding: 22px 24px 70px; }
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .advisor-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .macro-strip { grid-template-columns: repeat(3, 1fr); }
  .bitbo-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 2400px) {
  .wrap { max-width: 2300px; padding: 40px 70px 90px; }
  .brand h1 { font-size: 27px; }
  .kpi .value { font-size: 30px; }
  .advisor-card .token { font-size: 21px; }
  .advisor-card .pl-pct { font-size: 27px; }
}

/* Engine History + Live Prices side by side on desktop, stacked on
   tablet/phone. minmax(0, 1fr) stops wide content from forcing overflow. */
.portfolio-dual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.portfolio-dual > .panel { min-width: 0; }
@media (max-width: 900px) { .portfolio-dual { grid-template-columns: minmax(0, 1fr); } }

/* Quick-nav stays pinned while scrolling; the active chip tracks the
   section on screen. */
.quick-nav {
  position: sticky; top: 0; z-index: 50;
  margin: 0 -4px; padding: 10px 4px 12px;
  background: linear-gradient(var(--bg) 78%, rgba(22,24,29,0));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.quick-nav a.active { color: var(--bg); background: var(--gold); border-color: var(--gold); }
html { scroll-behavior: smooth; }
.anchor-target { top: -70px; }
.back-to-top {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--card); color: var(--text); font-size: 18px; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.back-to-top.show { opacity: 1; pointer-events: auto; transform: none; }
/* overflow-x: hidden on html/body turns body into a scroll container, which
   silently disables position: sticky on the quick-nav. clip prevents the
   sideways scroll the same way without that side effect. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* Popup price charts (subnet + asset modals) */
.pc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pc-price { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.pc-change { font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pc-change .pos { color: var(--green); } .pc-change .neg { color: var(--red); }
.pc-hint { color: var(--muted); }
.pc-range button { min-width: 40px; }
.pc-legend { font-size: 11.5px; color: var(--muted); min-height: 18px; margin: 10px 0 2px; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.pc-legend b { color: var(--text); font-weight: 600; }
.pc-legend .pc-time { color: var(--muted); margin-right: 4px; }
.pc-key { display: inline-block; width: 10px; height: 2px; border-radius: 1px; margin: 0 2px 0 8px; vertical-align: middle; }
.pc-chart { position: relative; height: 260px; margin: 2px 0 12px; }
.pc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 10px 0 4px; border-top: 1px solid var(--hairline); margin-bottom: 4px; }
.pc-stats:empty { display: none; }
.pc-stats .label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pc-stats .val { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12.5px; text-align: center; padding: 0 16px; z-index: 3; }
.pc-retry { font: inherit; font-size: 12px; color: var(--text); background: var(--elev-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
@media (max-width: 640px) {
  .pc-chart { height: 220px; }
  .pc-price { font-size: 21px; }
  .pc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pc-note { color: var(--amber); }

/* Polymarket paper trader panel */
.paper-badge { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; color: var(--gold); border: 1px solid var(--gold-dim); background: var(--gold-dim); border-radius: 6px; padding: 2px 8px; vertical-align: middle; }
.pm-sub { font-size: 12px; color: var(--muted); margin: -6px 0 14px; line-height: 1.5; max-width: 760px; }
.pm-sub b { color: var(--text); font-weight: 600; }
.pm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; margin-bottom: 16px; }
.pm-kpi .label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pm-kpi .val { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 3px; }
.pm-kpi .val small { font-size: 11px; font-weight: 500; }
.pm-kpi .val.pos, .pm-num .pos { color: var(--green); } .pm-kpi .val.neg, .pm-num .neg { color: var(--red); }
.pm-tabs { margin-bottom: 6px; }
.pm-list { max-height: 460px; overflow-y: auto; }
.pm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.pm-q { font-size: 13px; color: var(--text); line-height: 1.35; }
.pm-q a { color: var(--text); text-decoration: none; } .pm-q a:hover { color: var(--gold); }
.pm-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pm-outcome { color: var(--cyan); font-weight: 600; }
.pm-status { color: var(--amber); }
.pm-num { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.pm-num > div + div { font-size: 12px; margin-top: 2px; }
.pm-empty { color: var(--muted); font-size: 12.5px; padding: 14px 0; }
@media (max-width: 640px) { .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Go-live readiness */
.golive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-bottom: 24px; }
.golive-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.golive-name { font-weight: 700; font-size: 14px; color: var(--text); }
.golive-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; color: var(--amber); background: rgba(224,169,74,0.12); border: 1px solid rgba(224,169,74,0.3); white-space: nowrap; }
.golive-badge.ready { color: var(--green); background: rgba(52,214,159,0.12); border-color: rgba(52,214,159,0.35); }
.golive-check { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 8px; padding: 7px 0; border-top: 1px solid var(--hairline); font-size: 12.5px; align-items: baseline; }
.golive-check .pos { color: var(--green); font-weight: 700; } .golive-check .neg { color: var(--red); font-weight: 700; }
.golive-k { color: var(--text); }
.golive-v { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.golive-need { grid-column: 2 / 4; color: var(--muted); font-size: 11px; }

/* Consolidated holdings table (replaces the separate "Live Prices" panel) */
.portfolio-growth-panel + .holdings-panel { margin-top: 16px; }
.holdings-panel { margin-bottom: 24px; }
.holdings-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.holdings-head h3 { margin: 0; }
.holdings-note { font-size: 11px; color: var(--muted); }
.ht-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) 1fr 1fr 1fr minmax(110px, 1.1fr); gap: 10px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--hairline); font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 8px; text-align: right; }
.ht-row > :first-child { text-align: left; }
.ht-row:not(.ht-headrow):hover { background: var(--elev-1); }
.ht-headrow { cursor: default; border-top: 0; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 4px; padding-bottom: 4px; }
.ht-row b { color: var(--text); font-weight: 600; }
.ht-row small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.ht-row .pos { color: var(--green); } .ht-row .neg { color: var(--red); }
.ht-row .pos small, .ht-row .neg small { color: inherit; opacity: 0.8; }
.ht-asset { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ht-asset > span:last-child { min-width: 0; }
.ht-asset img, .ht-asset .coin-icon { width: 24px; height: 24px; flex: none; }
.ht-alloc { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--muted); }
.ht-bar { flex: 1; max-width: 70px; height: 4px; border-radius: 2px; background: var(--elev-2); overflow: hidden; }
.ht-bar i { display: block; height: 100%; background: var(--gold); }
@media (max-width: 640px) {
  .ht-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; }
  .ht-row > :nth-child(2), .ht-row > :nth-child(5) { display: none; }
  .ht-headrow > :nth-child(2), .ht-headrow > :nth-child(5) { display: none; }
}
.portfolio-growth-panel .portfolio-history-meta { margin-top: 10px; }
#portfolio-chart-container { position: relative; }

/* Bittensor TAO hub: one heading over all TAO sections */
.tao-hub-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 34px 0 6px; padding-top: 18px; border-top: 1px solid var(--hairline); }
#tao-news-panel { margin-bottom: 24px; }

/* Prediction markets: sleeve switch + venue tags */
.pm-sleeves { margin: 0 0 10px; flex-wrap: wrap; }
.pm-venue { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-strong); color: var(--muted); }
.pm-venue.kalshi { color: #7ea6f7; border-color: rgba(126,166,247,0.4); }
.pm-venue.polymarket { color: var(--cyan); border-color: rgba(121,223,210,0.4); }

/* API budgets */
.api-budget-panel { margin-bottom: 24px; }
.ab-row { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(80px, 1fr); gap: 4px 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hairline); font-size: 12.5px; }
.ab-num { font-variant-numeric: tabular-nums; color: var(--text); text-align: right; }
.ab-bar { height: 6px; border-radius: 3px; background: var(--elev-2); overflow: hidden; }
.ab-bar i { display: block; height: 100%; background: var(--green); }
.ab-bar i.warn { background: var(--amber); } .ab-bar i.neg { background: var(--red); }
.ab-mode { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.ab-mode.pos { color: var(--green); } .ab-mode.warn { color: var(--amber); } .ab-mode.neg { color: var(--red); }
@media (max-width: 640px) { .ab-row { grid-template-columns: minmax(0, 1fr) auto; } .ab-bar { grid-column: 1 / -1; } }

/* TAO staking emissions */
.claimable-box:empty { display: none; }
.claimable-box { padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; background: rgba(52,214,159,0.07); border: 1px solid rgba(52,214,159,0.25); }
.claimable-box .label, .composition-emissions .label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.claimable-box .val { font-size: 22px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; margin-top: 2px; }
.claimable-box .val small, .composition-emissions .val small { font-size: 12px; color: var(--muted); font-weight: 500; }
.claimable-box .sub, .composition-emissions .sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.earn-hint { font-size: 11px; color: var(--cyan); margin-top: 2px; font-variant-numeric: tabular-nums; }
.composition-emissions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.composition-emissions .val { font-size: 17px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; margin-top: 2px; }
.hero-staking { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--muted); text-decoration: none; line-height: 1.5; }
.hero-staking b { color: var(--green); font-weight: 600; }
.hero-staking:hover { color: var(--text); }
.tao-rank { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tao-rank b { color: var(--gold); font-weight: 700; }
.tao-rank .pos { color: var(--green); } .tao-rank .neg { color: var(--red); }

/* Mobile: keep the section nav below the notch/status bar and fully opaque,
   so the chips never slide up under the screen edge while scrolling. */
.quick-nav { top: env(safe-area-inset-top, 0px); }
@media (max-width: 640px) {
  .quick-nav { padding: 8px 4px 10px; background: var(--bg); box-shadow: 0 6px 14px -10px rgba(0,0,0,0.6); }
  html { scroll-padding-top: 80px; }
  .anchor-target { top: -80px; }
}

/* Power Law band position bar (support red -> fair green -> resistance purple) */
.pl-band { margin: 6px 0 16px; }
.pl-band-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 30px; }
.pl-band-head span { text-transform: none; letter-spacing: 0; color: var(--text); margin-left: 6px; font-weight: 600; }
.pl-band-bar { position: relative; height: 12px; border-radius: 6px; margin: 0 6px; }
.pl-band-grad { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(90deg, #e5484d 0%, #f76b15 28%, #f5a524 40%, #30a46c 50%, #8e4ec6 85%, #a33ce0 100%); opacity: 0.9; }
.pl-band-fair { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #eef6ff; transform: translateX(-50%); opacity: 0.85; }
.pl-band-marker { position: absolute; top: -7px; width: 4px; height: 26px; background: #ffffff; border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 0 2px rgba(0,0,0,0.5); }
.pl-band-marker span { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; background: rgba(0,0,0,0.55); padding: 1px 6px; border-radius: 4px; }
.pl-band-labels { position: relative; height: 40px; margin: 8px 6px 0; font-size: 11px; color: var(--muted); }
.pl-band-labels span { position: absolute; top: 0; line-height: 1.35; white-space: nowrap; }
.pl-band-labels b { font-size: 13px; font-variant-numeric: tabular-nums; }
.pl-lbl-sup { left: 0; color: #e5484d !important; }
.pl-lbl-sup b { color: #e5484d; }
.pl-lbl-res { right: 0; text-align: right; color: #a33ce0 !important; }
.pl-lbl-res b { color: #a33ce0; }
.pl-lbl-fair { transform: translateX(-50%); color: #30a46c !important; text-align: center; }
.pl-lbl-fair b { color: #30a46c; }
@media (max-width: 640px) { .pl-band-labels b { font-size: 12px; } .pl-band-labels { font-size: 10px; } }
.pl-band-readout { margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 18px; }
.pl-band-readout b { color: var(--text); }
.pl-z-sup { color: #e5484d; font-weight: 600; } .pl-z-fair { color: #30a46c; font-weight: 600; } .pl-z-res { color: #a33ce0; font-weight: 600; }
.pl-band-reset { font: inherit; font-size: 11px; color: var(--text); background: var(--elev-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 9px; cursor: pointer; margin-left: 4px; }
.pl-band-bar { cursor: ew-resize; }
/* Four-price band labels: red support, white now, yellow median, purple resistance */
.pl-lbl-now { transform: translateX(-50%); color: #ffffff !important; text-align: center; }
.pl-lbl-now b { color: #ffffff; }
.pl-lbl-fair { color: #f5c542 !important; }
.pl-lbl-fair b { color: #f5c542; }
.pl-band-fair { background: #f5c542; }
.pl-band-readout { font-size: 14px; margin-top: 10px; }
.pl-band-readout b { font-size: 16px; color: #ffffff; }
/* Power Law chart hover/drag readout */
.pl-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 12px; min-height: 36px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.pl-chart-legend b { color: #ffffff; font-size: 14px; font-weight: 700; }
.pl-chart-legend .pl-lg-date { color: var(--muted); width: 100%; font-size: 11px; }
.pl-lg-now { color: #ffffff; } .pl-lg-sup { color: #e5484d; } .pl-lg-fair { color: #f5c542; } .pl-lg-res { color: #a33ce0; }
.pl-lg-sup b { color: #e5484d; } .pl-lg-fair b { color: #f5c542; } .pl-lg-res b { color: #a33ce0; }
.pl-lg-vs { color: var(--muted); }
@media (max-width: 640px) { .pl-chart-legend b { font-size: 13px; } .pl-chart-legend { font-size: 11px; } }
@media (max-width: 640px) {
  .pl-chart-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .pl-chart-legend .pl-lg-date, .pl-chart-legend .pl-lg-vs { grid-column: 1 / -1; }
  .pl-chart-legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.pl-band-labels { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; height: auto; margin: 10px 6px 0; text-align: center; }
.pl-band-labels span, .pl-lbl-sup, .pl-lbl-now, .pl-lbl-fair, .pl-lbl-res { position: static !important; transform: none !important; white-space: normal; }
.pl-lbl-sup { text-align: left; } .pl-lbl-res { text-align: right; }
.pl-lbl-now { color: #ffffff !important; } .pl-lbl-now b { color: #ffffff; }
@media (max-width: 640px) { .pl-band-labels { font-size: 10px; } .pl-band-labels b { font-size: 12px; } }

/* Power Law: the axis is its own gutter to the right of the plot. Nothing
   overlaps the data (the newest points and the slider stay visible). */
.power-law-axis-mask { position: absolute; top: 0; bottom: 0; right: 0; width: 62px; background: transparent; pointer-events: none; z-index: 1; }
.power-law-axis-labels { position: absolute; top: 0; bottom: 0; right: 0; width: 62px; z-index: 2; pointer-events: none; }
.power-law-axis-label { position: absolute; right: 4px; transform: translateY(-50%); color: #9aa4b2; font-size: 11px; font-variant-numeric: tabular-nums; }
/* Power Law gutter: pin the axis to the right edge (older rule set inset:0) */
.power-law-axis-labels { left: auto; }
/* Power Law: the chart's own log price axis is shown (rainbow shape); the
   separate overlay axis is off. */
.power-law-axis-labels, .power-law-axis-mask { display: none !important; }
.pl-band-labels { gap: 8px; }
.pl-band-labels b { white-space: nowrap; }
.tv-link { font-size: 11px; color: var(--cyan); text-decoration: none; margin-left: 8px; white-space: nowrap; }
.tv-link:hover { color: var(--text); }

/* ============================================================
   Cipher LIVE trader hero -- Apple-worthy read-only panel.
   Uses only real, never-fabricated payload data: equity / free /
   staked (allocation ring), plus realized P&L + win rate derived
   from closed_trades. No trading-logic change -- pure display.
   ============================================================ */
.bwa-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(223,185,117,0.055), transparent 45%),
    linear-gradient(160deg, rgba(255,255,255,0.035), transparent 40%),
    var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.bwa-hero.qm { margin-bottom: 18px; }
@media (max-width: 640px) {
  .bwa-hero { grid-template-columns: 1fr; justify-items: center; gap: 18px; text-align: center; }
}
.bwa-ring-wrap { position: relative; width: 132px; height: 132px; flex: none; }
.bwa-ring { transform: rotate(-90deg); }
.bwa-ring .track { stroke: var(--elev-2); }
.bwa-ring .arc { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease), stroke 0.4s ease; filter: drop-shadow(0 0 6px var(--green-glow)); }
.bwa-ring .arc.off { filter: none; }
.bwa-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.bwa-ring-center .amt { font-size: 23px; font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.bwa-ring-center .lbl { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; }
.bwa-hero-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bwa-eyebrow { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bwa-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; }
.bwa-equity { margin: 2px 0 0; }
.bwa-equity .unit { font-size: 21px; font-weight: 300; color: var(--muted); margin-left: 6px; }
.bwa-equity .num { font-size: 46px; font-weight: 800; color: var(--t1); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; font-family: var(--font-display); }
@media (max-width: 640px) { .bwa-equity .num { font-size: 40px; } }
.bwa-sub { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.bwa-sub code { font-size: 10.5px; color: var(--cyan); background: rgba(121,223,210,0.08); padding: 1px 5px; border-radius: 5px; }
.bwa-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.bwa-pill {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 12px; border-radius: 12px;
  background: var(--elev-1); border: 1px solid transparent;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.bwa-pill .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bwa-pill .v { font-weight: 700; color: var(--text); }
.bwa-pill.pos { border-color: rgba(52,214,159,0.22); } .bwa-pill.pos .v { color: var(--green); }
.bwa-pill.neg { border-color: rgba(255,122,109,0.22); } .bwa-pill.neg .v { color: var(--red); }
.bwa-pill.acc { border-color: rgba(223,185,117,0.26); } .bwa-pill.acc .v { color: var(--gold); }
.bwa-arm .v { color: var(--green); } .bwa-arm.tripped .v { color: var(--red); }
.bwa-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* Cipher live closed-trades: richer cards + profit-take transfer rows */
.pm-sublabel { font-size: 11px; color: var(--muted-dim); text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 2px; }
.pm-strat { color: var(--cyan); font-size: 11px; font-weight: 500; }
.pm-reason { color: var(--muted-dim); font-size: 11px; font-style: normal; flex-basis: 100%; }
.pm-num .acc { color: var(--gold); font-weight: 700; }
.bwa-trade { border-left: 2px solid var(--hairline); padding-left: 10px; }
.bwa-transfer { border-left: 3px solid rgba(224,169,74,.38); background: linear-gradient(90deg, rgba(224,169,74,.05), transparent 70%); padding-left: 10px; border-radius: 0 8px 8px 0; }
.pm-venue.bank { color: var(--amber); background: rgba(224,169,74,.10); border-color: rgba(224,169,74,.32); }
.pm-meta code { font-size: 10.5px; color: var(--amber); background: rgba(224,169,74,.08); padding: 0 4px; border-radius: 4px; }

/* ---- v69: TAO subnet breakdown graphics + resilience ---- */
.subnet-row {
  border-left: 3px solid rgba(223,185,117,0.0);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.subnet-row:hover {
  background: rgba(255,255,255,0.05);
  border-left-color: rgba(223,185,117,0.55);
  transform: translateX(2px);
}
.subnet-row .badge-net {
  box-shadow: 0 2px 10px -4px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.subnet-row .info .name {
  font-size: 16px; font-weight: 700; letter-spacing: 0.1px;
}
.subnet-row .amt {
  font-size: 15px; font-weight: 700;
}
.subnet-row .amt .usd-hint {
  font-size: 11.5px; font-weight: 500;
}
.subnet-row .pct-bar-track {
  height: 6px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}
.subnet-row .pct-bar-fill {
  background: linear-gradient(90deg, var(--gold), var(--cyan) 85%, rgba(111,211,199,0.75));
  box-shadow: 0 0 8px rgba(223,185,117,0.25);
}
.subnet-root {
  background: linear-gradient(135deg, rgba(223,185,117,0.09), rgba(255,255,255,0.02) 60%);
  border: 1px solid rgba(223,185,117,0.28);
}
.subnet-root .info .name { color: var(--gold-soft); }
.earn-hint {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; margin-top: 3px; border-radius: 999px;
  background: rgba(52,214,159,0.10); border: 1px solid rgba(52,214,159,0.22);
  color: var(--green); font-weight: 700;
}
.claimable-box {
  background: linear-gradient(135deg, rgba(52,214,159,0.12), rgba(52,214,159,0.03) 70%);
  border: 1px solid rgba(52,214,159,0.35);
  box-shadow: 0 4px 18px -8px rgba(52,214,159,0.25);
  padding: 16px 18px;
}
.claimable-box .val {
  font-size: 28px; font-weight: 800; letter-spacing: -0.2px;
  text-shadow: 0 0 18px rgba(52,214,159,0.25);
}
.claimable-box .sub {
  font-size: 12px;
}
.panel.stale { opacity: 0.82; }
#subnet-warn { animation: subnetWarnPulse 2.2s ease-in-out infinite; }
@keyframes subnetWarnPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; box-shadow: 0 0 12px rgba(255,170,60,0.25); }
}
@media (max-width: 899px) {
  .claimable-box .val { font-size: 24px; }
  .subnet-row .info .name { font-size: 15px; }
}

/* ---- v69b: Bank Profit Now buttons (BW portfolio) ---- */
.pm-bank-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pm-bank-btn {
  appearance: none; -webkit-appearance: none; border: 1px solid rgba(52,214,159,0.4); background: rgba(52,214,159,0.10);
  color: #34d69f; font-weight: 700; font-size: 11.5px; letter-spacing: .4px; border-radius: 8px; padding: 5px 10px;
  cursor: pointer; font-family: inherit; transition: all .18s ease; white-space: nowrap;
}
.pm-bank-btn:hover { background: rgba(52,214,159,0.18); box-shadow: 0 0 12px rgba(52,214,159,0.16); }
.pm-bank-btn.confirm { background: rgba(255,170,60,0.14); border-color: rgba(255,170,60,0.5); color: #ffb966; }
.pm-bank-btn.done { background: rgba(52,214,159,0.16); border-color: rgba(52,214,159,0.55); cursor: default; }
.pm-bank-btn:disabled { opacity: .7; cursor: default; }
.pm-bank-msg { font-size: 10.5px; color: var(--muted); font-weight: 600; line-height: 1.3; max-width: 190px; text-align: right; }
.pm-bank-msg.ok { color: #34d69f; }
.pm-bank-msg.err { color: #ff7a6d; }
.pm-bank-msg.warn { color: #ffb966; }
.pm-bank-msg.busy { color: var(--muted); }
@media (max-width: 899px) {
  .pm-bank-row { justify-content: flex-start; }
  .pm-bank-msg { text-align: left; }
}