/* ============================================================
   M7 NEURAL CORE · TERMINAL · v3.0.0
   Densidade alta, paleta travada, estética Bloomberg + Obsidian.
   ============================================================ */

:root {
  /* ===== Backgrounds ===== */
  --bg:           #0A0E14;
  --bg-panel:     #0F1620;
  --bg-panel-2:   #0C131C;
  --bg-row:       #111A24;
  --bg-row-2:     #0E1722;

  /* ===== Borders ===== */
  --border:       #1A2632;
  --border-hi:    #25394F;
  --border-glow:  rgba(0, 212, 255, 0.18);

  /* ===== Typography color ===== */
  --text:         #E8F4FF;
  --text-2:       #6B7B8C;
  --text-3:       #4A5868;
  --text-ghost:   #2A3540;

  /* ===== Brand / accent ===== */
  --cyan:         #00D4FF;
  --cyan-dim:     #007FA0;
  --gold:         #F0B040;
  --gold-dim:     #8A6326;
  --green:        #00E5A0;
  --green-dim:    #008F66;
  --red:          #FF6B6B;
  --red-dim:      #993F3F;
  --purple:       #B584FF;
  --purple-dim:   #6E4FAA;
  --amber:        #FFB454;

  /* ===== Fonts ===== */
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

  /* ===== Spacing (compact) ===== */
  --gap:        1px;
  --pad-xs:     4px;
  --pad-sm:     6px;
  --pad-md:     10px;
  --pad-lg:     14px;

  --topbar-h:   48px;
  --ticker-h:   28px;
  --status-h:   24px;
  --header-h:   22px;
}

/* ============== Reset ============== */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background: #000; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select { font-family: inherit; }
::selection { background: var(--cyan); color: #001019; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #354a61; }

/* ============================================================
   BOOT SCREEN
   ============================================================ */
.boot {
  position: fixed; inset: 0;
  background: #000;
  color: var(--green);
  font-family: var(--mono);
  font-size: 13px;
  padding: 36px 56px;
  z-index: 9999;
  display: none;
  cursor: pointer;
}
.boot.is-active { display: block; }
.boot-line { white-space: pre; line-height: 1.55; }
.boot-line .ok    { color: var(--green); font-weight: 600; }
.boot-line .arrow { color: #356E5C; margin-right: 8px; }
.boot-cursor::after {
  content: '_';
  animation: blink 1s steps(1) infinite;
  color: var(--green);
}
.boot-skip {
  position: absolute; bottom: 24px; right: 32px;
  font-size: 10px; color: #356E5C;
  letter-spacing: 1px;
}
.boot.fade-out { opacity: 0; transition: opacity .5s ease; }
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   APP SHELL
   ============================================================ */
.app {
  display: grid;
  grid-template-rows: var(--topbar-h) var(--ticker-h) 1fr var(--status-h);
  height: 100vh; height: 100dvh;
  background: var(--bg);
}
.app[hidden] { display: none !important; }

/* ============== TOPBAR ============== */
.topbar {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  align-items: center;
  background: linear-gradient(to bottom, #0F1620, var(--bg));
  border-bottom: 1px solid var(--border);
  padding: 0 var(--pad-md);
  gap: var(--pad-lg);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  width: 32px; height: 32px;
  background: var(--gold);
  color: #000;
  font-family: var(--mono);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  letter-spacing: 0.5px;
  font-size: 13px;
  box-shadow: 0 0 14px rgba(240, 176, 64, 0.35);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--text); }
.brand-sub   { font-family: var(--mono); font-size: 9px; color: var(--text-2); letter-spacing: 0.5px; }

.topbar-mid {
  display: flex; gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  align-items: center;
  justify-content: center;
}
.hud-item { display: inline-flex; gap: 6px; align-items: baseline; }
.hud-k { color: var(--text-3); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.hud-v { color: var(--text); font-weight: 500; }
.hud-v.cyan { color: var(--cyan); }
.hud-v.gold { color: var(--gold); }
.hud-v.green { color: var(--green); }
.hud-v.red { color: var(--red); }

.topbar-nav { display: flex; gap: 4px; align-items: center; }
.topbar-nav a {
  padding: 5px 12px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-2);
  border-radius: 2px;
  border: 1px solid transparent;
  font-family: var(--mono);
}
.topbar-nav a:hover { color: var(--text); border-color: var(--border-hi); }
.topbar-nav a.is-active { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(0,212,255,0.06); }

.pill-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  margin-left: 8px;
  color: var(--green);
  background: rgba(0,229,160,0.05);
  border: 1px solid rgba(0,229,160,0.25);
}
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-live {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============== TICKER (estático scrollável, sem marquee) ============== */
.ticker {
  height: var(--ticker-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg-row);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.ticker::-webkit-scrollbar { display: none; }
.ticker-track {
  display: inline-block;
  white-space: nowrap;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: var(--ticker-h);
  letter-spacing: 0.4px;
  color: var(--text);
  /* Sem animation: estático, scroll horizontal manual se overflow */
}
.ticker-track .sep { color: var(--text-ghost); margin: 0 12px; }
.ticker-track .label { color: var(--text-3); margin-right: 5px; }
.ticker-track .pos { color: var(--green); }
.ticker-track .neg { color: var(--red); }
.ticker-track .neu { color: var(--cyan); }
@media (max-width: 1280px) { .ticker-track { font-size: 10px; } .ticker-track .sep { margin: 0 8px; } }

/* ============== STATUS BAR (footer com cotações live) ============== */
.statusbar {
  height: var(--status-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 var(--pad-md);
  gap: 14px;
  background: var(--bg-row);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  overflow: hidden;
  white-space: nowrap;
}
.statusbar-left { display: flex; gap: 18px; }
.statusbar-quotes {
  text-align: center;
  color: var(--text-2);
  letter-spacing: 0.4px;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.statusbar-quotes .q { color: var(--text); margin: 0 4px; }
.statusbar-quotes .qk { color: var(--text-3); margin-right: 3px; }
.statusbar-quotes .pos { color: var(--green); }
.statusbar-quotes .neg { color: var(--red); }
.statusbar-quotes .neu { color: var(--cyan); }
.statusbar-quotes .sep { color: var(--text-ghost); margin: 0 6px; }
.statusbar-right { letter-spacing: 1px; color: var(--text-3); justify-self: end; }
@media (max-width: 1100px) {
  .statusbar { grid-template-columns: 1fr; }
  .statusbar-left, .statusbar-right { display: none; }
  .statusbar-quotes { white-space: nowrap; overflow-x: auto; }
}

/* ============================================================
   VIEW (terminal grid / admin / post)
   ============================================================ */
.view { overflow: hidden; }

/* ============================================================
   TERMINAL · GRID 12 cols × 4 rows (Bloomberg-tight) com auto-fit fallback
   ============================================================ */
.tg {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows:
    minmax(200px, 0.95fr)   /* row 1 — hero/brain/metrics 200px alto */
    minmax(280px, 1.4fr)    /* row 2 — equity AMPLIADO + engines + drawdown */
    minmax(180px, 1.0fr)    /* row 3 — listas trades + feed + broker */
    minmax(160px, 0.9fr);   /* row 4 — 6 painéis compactos */
  gap: var(--gap);
  height: 100%;
  background: var(--border);
  padding: var(--gap);
  overflow: auto;
}
.tg > .panel {
  background: var(--bg-panel);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden;
  position: relative;
}
@media (max-width: 768px) {
  .tg {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(180px, auto);
    height: auto;
    overflow-y: auto;
  }
  .tg > .panel { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .p-body { max-height: 320px; overflow-y: auto; }
}

/* ===== Slots (12 cols × 4 rows · 16 painéis · Brain no topo) ===== */
/* row 1 — Hero compacto (3) + Neural Brain (5) + Metrics (4) — 200px */
.s-hero      { grid-column: 1 / span 3;  grid-row: 1; }
.s-graph     { grid-column: 4 / span 5;  grid-row: 1; }
.s-metrics   { grid-column: 9 / span 4;  grid-row: 1; }
/* row 2 — Equity AMPLIADO (6) + AI Engines (3) + Drawdown (3) — 280px */
.s-equity    { grid-column: 1 / span 6;  grid-row: 2; }
.s-engines   { grid-column: 7 / span 3;  grid-row: 2; }
.s-drawdown  { grid-column: 10 / span 3; grid-row: 2; }
/* row 3 — listas e feed (4 colunas iguais) — 180px */
.s-open      { grid-column: 1 / span 3;  grid-row: 3; }
.s-closed    { grid-column: 4 / span 3;  grid-row: 3; }
.s-feed      { grid-column: 7 / span 3;  grid-row: 3; }
.s-broker    { grid-column: 10 / span 3; grid-row: 3; }
/* row 4 — 6 painéis compactos (2 cols cada) — 160px */
.s-magic     { grid-column: 1 / span 2;  grid-row: 4; }
.s-orderflow { grid-column: 3 / span 2;  grid-row: 4; }
.s-clock     { grid-column: 5 / span 2;  grid-row: 4; }
.s-news      { grid-column: 7 / span 2;  grid-row: 4; }
.s-radar     { grid-column: 9 / span 2;  grid-row: 4; }
.s-status    { grid-column: 11 / span 2; grid-row: 4; }

/* ============================================================
   PANEL (header + body)
   ============================================================ */
.p-head {
  height: var(--header-h);
  min-height: var(--header-h);
  background: var(--bg-row);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-md);
  font-family: var(--mono);
  font-weight: 600;
}
.p-title {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--cyan-dim);
  text-transform: uppercase;
}
.p-meta {
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-3);
  display: flex; gap: 8px; align-items: center;
}
.p-meta .dot-mini {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 4px var(--green);
}
.p-body {
  flex: 1; min-height: 0;
  padding: var(--pad-md);
  overflow: hidden;
  position: relative;
}
.p-body.scroll { overflow-y: auto; }
.p-body.no-pad { padding: 0; }

.panel:hover .p-head { border-bottom-color: var(--border-glow); }

/* ============================================================
   PANEL · HERO PCT · estrutura: pct-wrap (centro) + status + tabs (rodapé)
   ============================================================ */
.s-hero .p-body.panel-hero-body {
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 16px 14px 12px 14px;
  gap: 10px;
  overflow: hidden;
}
.hero-pct-wrap {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  position: relative;
}
.hero-status {
  display: flex; flex-direction: column;
  gap: 4px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
}
.hero-status-row { display: inline-flex; gap: 8px; align-items: center; }
.hero-status .hw-badge {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--amber);
  background: rgba(240,176,64,0.06);
  color: var(--amber);
  font-weight: 600;
  letter-spacing: 1px;
}
.hero-status .hw-text { color: var(--text-2); letter-spacing: 0.5px; }
.hero-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.hero-tab {
  padding: 5px 2px;
  text-align: center;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hero-tab:hover { border-color: var(--cyan-dim); background: rgba(0,212,255,0.05); }
.hero-tab.active { background: rgba(0, 212, 255, 0.10); border-color: var(--cyan); }
.hero-tab.active .hero-tab-label { color: var(--cyan); }
.hero-tab-label {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.hero-tab-value {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-tab-value.pos { color: var(--green); }
.hero-tab-value.neg { color: var(--red); }
@media (max-width: 768px) {
  .hero-tabs { grid-template-columns: repeat(5, 1fr); }
  .hero-tab-label { font-size: 7px; }
  .hero-tab-value { font-size: 9px; }
}
.hero-tabs {
  position: absolute; top: 8px; left: 0; right: 0;
  display: flex; gap: 4px; justify-content: center;
}
.hero-tab {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 1.2px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  color: var(--text-3);
  border-radius: 2px;
  background: var(--bg-panel-2);
}
.hero-tab.is-active { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(0,212,255,0.06); }
.hero-pct {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 68px);
  line-height: 1.1;
  letter-spacing: -1.5px;
  animation: hero-pulse-soft 4s ease-in-out infinite;
  text-shadow: 0 0 18px currentColor;
  padding: 4px 0;
  white-space: nowrap;
  overflow: visible;
}
.hero-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: 1.5px;
  opacity: 0.7;
  text-transform: uppercase;
}
@keyframes hero-pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.005); opacity: 0.95; }
}
.hero-pct.pos { color: var(--green); }
.hero-pct.neg { color: var(--red); }
.hero-pct.zero { color: var(--text-2); animation: none; text-shadow: none; }
.hero-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-2);
  margin-top: 6px;
}
.hero-foot {
  display: flex; gap: 18px; margin-top: 10px;
  font-family: var(--mono); font-size: 11px;
}
.hero-foot .k { color: var(--text-3); font-size: 9px; letter-spacing: 1px; }
.hero-foot .v { color: var(--text); }
@keyframes hero-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* ============================================================
   PANEL · AI ENGINES
   ============================================================ */
.ai-list { display: flex; flex-direction: column; gap: var(--pad-sm); }
.ai-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--bg-panel-2);
  border-left: 2px solid var(--border-hi);
  font-family: var(--mono);
  font-size: 11px;
}
.ai-row.cyan   { border-left-color: var(--cyan); }
.ai-row.gold   { border-left-color: var(--gold); }
.ai-row.purple { border-left-color: var(--purple); }
.ai-name { font-weight: 600; letter-spacing: 0.5px; }
.ai-row.cyan .ai-name   { color: var(--cyan); }
.ai-row.gold .ai-name   { color: var(--gold); }
.ai-row.purple .ai-name { color: var(--purple); }
.ai-pct { font-weight: 700; font-size: 13px; }
.ai-meta { font-size: 9px; color: var(--text-3); letter-spacing: 0.5px; }

/* ============================================================
   DRAWDOWN values com clamp
   ============================================================ */
.dd-headrow .dd-v { font-size: clamp(16px, 1.8vw, 22px); }
.dd-perlist-cur, .dd-perlist-max { font-size: clamp(9px, 0.9vw, 11px); }
.metric-v { font-size: clamp(14px, 1.6vw, 20px); }
.me-v     { font-size: clamp(11px, 1.2vw, 14px); }

/* ============================================================
   PANEL · METRICS (4 micro)
   ============================================================ */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  height: 100%;
  background: var(--border);
}
.metric-cell {
  background: var(--bg-panel-2);
  padding: 6px 10px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--mono);
}
.metric-k { font-size: 8px; letter-spacing: 1.2px; color: var(--text-3); text-transform: uppercase; }
.metric-v { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; }
.metric-foot { font-size: 9px; color: var(--text-2); letter-spacing: 0.5px; }

/* ============================================================
   PANEL · DRAWDOWN
   ============================================================ */
.dd-stack { display: flex; flex-direction: column; gap: 8px; }
.dd-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); }
.dd-k { font-size: 9px; letter-spacing: 1.2px; color: var(--text-3); text-transform: uppercase; }
.dd-v { font-size: 14px; font-weight: 700; }
.dd-v.warn { color: var(--amber); }
.dd-v.bad  { color: var(--red); }
.dd-v.ok   { color: var(--green); }
.dd-bar {
  height: 4px;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid var(--border);
  position: relative;
}
.dd-bar > span {
  display: block; height: 100%;
  background: linear-gradient(to right, var(--green), var(--amber), var(--red));
  transition: width .4s ease;
}
.dd-foot { font-family: var(--mono); font-size: 9px; color: var(--text-3); margin-top: 4px; letter-spacing: 0.5px; }

/* ============================================================
   PANEL · EQUITY CURVE
   ============================================================ */
.equity-canvas-wrap { width: 100%; height: 100%; position: relative; }
.equity-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

/* ============================================================
   PANEL · ORDER FLOW (DOM bookish)
   ============================================================ */
.of-grid {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 60px;
  gap: 1px;
  font-family: var(--mono); font-size: 10px;
  background: var(--border);
  height: 100%;
  align-content: start;
}
.of-grid > div {
  background: var(--bg-panel-2);
  padding: 2px 6px;
  display: flex; align-items: center; justify-content: flex-end;
}
.of-grid > div.left { justify-content: flex-end; }
.of-grid > div.right { justify-content: flex-start; }
.of-cell-bid { color: var(--green); }
.of-cell-ask { color: var(--red); }
.of-cell-px  { color: var(--text); font-weight: 600; }
.of-cell-vol { color: var(--text-3); }
.of-flash {
  animation: ofFlash 0.6s ease;
}
@keyframes ofFlash {
  0%   { background: rgba(0, 212, 255, 0.18); }
  100% { background: var(--bg-panel-2); }
}
.of-head {
  background: var(--bg-row) !important;
  color: var(--text-3) !important;
  font-size: 9px; letter-spacing: 1px;
  padding: 3px 6px !important;
  text-transform: uppercase;
}

/* ============================================================
   PANEL · MAGIC STATS
   ============================================================ */
.magic-list { display: flex; flex-direction: column; gap: 4px; }
.magic-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  font-family: var(--mono); font-size: 10px;
  padding: 4px 6px;
  background: var(--bg-panel-2);
  border-left: 2px solid var(--border-hi);
}
.magic-id { color: var(--text-3); font-size: 9px; letter-spacing: 0.5px; }
.magic-name { color: var(--text); font-weight: 500; }
.magic-pct { font-weight: 700; }

/* ============================================================
   PANEL · TRADE LISTS (open / closed)
   ============================================================ */
.trade-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.trade-row {
  display: grid;
  grid-template-columns: 80px 56px 70px 1fr 70px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-panel-2);
  font-family: var(--mono); font-size: 10px;
}
.trade-sym { color: var(--text); font-weight: 600; letter-spacing: 0.4px; }
.trade-side {
  font-size: 9px; letter-spacing: 1px; padding: 1px 5px;
  border-radius: 2px; text-align: center;
}
.trade-side.buy  { color: var(--green); border: 1px solid var(--green-dim); }
.trade-side.sell { color: var(--red);   border: 1px solid var(--red-dim); }
.trade-lot { color: var(--text-2); }
.trade-meta { color: var(--text-3); font-size: 9px; }
.trade-pct { text-align: right; font-weight: 700; font-size: 11px; }
.trade-empty {
  padding: 14px; text-align: center;
  font-family: var(--mono); font-size: 10px;
  color: var(--text-3); letter-spacing: 1px;
}
.trade-row.cyan-side   { border-left: 2px solid var(--cyan); }
.trade-row.gold-side   { border-left: 2px solid var(--gold); }
.trade-row.purple-side { border-left: 2px solid var(--purple); }

/* ============================================================
   PANEL · BROKER STATUS
   ============================================================ */
.broker-list { display: flex; flex-direction: column; gap: 2px; }
.broker-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 10px;
  padding: 3px 6px;
  background: var(--bg-panel-2);
}
.broker-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 4px var(--green);
  animation: blinkLed 1.2s steps(2) infinite;
}
.broker-led.amber { background: var(--amber); box-shadow: 0 0 4px var(--amber); }
.broker-led.red   { background: var(--red);   box-shadow: 0 0 4px var(--red); animation-duration: 0.8s; }
@keyframes blinkLed { 50% { opacity: 0.4; } }
.broker-name { color: var(--text); letter-spacing: 0.5px; }
.broker-ms   { color: var(--text-3); font-size: 9px; }
.broker-acc  { color: var(--text-2); font-size: 9px; }

/* ============================================================
   PANEL · NEURAL FEED
   ============================================================ */
.feed-list { display: flex; flex-direction: column; gap: 2px; height: 100%; overflow: hidden; }
.feed-line {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  animation: feed-in .25s ease;
}
.feed-line .ts   { color: var(--text-3); }
.feed-line .tag  { color: var(--cyan); margin: 0 5px; }
.feed-line .tag.gold  { color: var(--gold); }
.feed-line .tag.green { color: var(--green); }
.feed-line .tag.red   { color: var(--red); }
.feed-line .tag.purple{ color: var(--purple); }
.feed-line.fade-old   { opacity: 0.6; }
.feed-line.fade-older { opacity: 0.3; }
@keyframes feed-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PANEL · NEWS WIRE
   ============================================================ */
.news-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.news-card {
  background: var(--bg-panel-2);
  padding: 6px 10px;
  border-left: 2px solid var(--border-hi);
  animation: feed-in .25s ease;
}
.news-card.breaking { border-left-color: var(--red); }
.news-head {
  display: flex; gap: 10px;
  font-family: var(--mono); font-size: 9px;
  color: var(--text-3); letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.news-source { color: var(--cyan); font-weight: 600; }
.news-cat {
  border: 1px solid var(--border-hi);
  padding: 0 5px;
  font-size: 8px;
  letter-spacing: 1px;
}
.news-title { font-size: 11px; color: var(--text); font-weight: 500; line-height: 1.4; }
.news-empty {
  padding: 14px; text-align: center;
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
}

/* ============================================================
   PANEL · RADAR GRID
   ============================================================ */
.radar-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.radar-row {
  background: var(--bg-panel-2);
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 6px; align-items: center;
  padding: 5px 8px;
  font-family: var(--mono); font-size: 10px;
}
.radar-sym { color: var(--text); font-weight: 600; }
.radar-bar {
  height: 4px;
  background: var(--bg-panel);
  position: relative;
  border: 1px solid var(--border);
}
.radar-bar .bull { position: absolute; left: 50%; top: 0; bottom: 0; background: var(--green); }
.radar-bar .bear { position: absolute; right: 50%; top: 0; bottom: 0; background: var(--red); }
.radar-force { font-size: 10px; font-weight: 700; min-width: 38px; text-align: right; }
.radar-force.pos { color: var(--green); }
.radar-force.neg { color: var(--red); }
.radar-force.neu { color: var(--text-2); }

/* ============================================================
   PANEL · INTELLIGENCE GRAPH (D3)
   ============================================================ */
.graph-wrap {
  width: 100%; height: 100%;
  position: relative;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,212,255,0.04) 0%, transparent 60%);
}
.graph-wrap svg { width: 100%; height: 100%; cursor: grab; }
.graph-wrap svg:active { cursor: grabbing; }
.graph-wrap .node circle { stroke-width: 1.5px; cursor: pointer; }
.graph-wrap .node text {
  font-family: var(--mono); font-size: 9px;
  fill: var(--text); letter-spacing: 0.4px;
  text-anchor: middle; pointer-events: none;
}
.graph-wrap .link {
  stroke-opacity: 0.4;
  stroke-dasharray: 3 5;
  animation: dash 16s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -240; } }
.graph-fallback {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
}

/* ============================================================
   PANEL · STATUS LOG
   ============================================================ */
.statlog { display: flex; flex-direction: column; gap: 2px; }
.statlog-row {
  display: grid;
  grid-template-columns: 50px auto 1fr;
  gap: 6px;
  font-family: var(--mono); font-size: 10px;
  padding: 2px 4px;
}
.statlog-ts { color: var(--text-3); }
.statlog-type {
  font-size: 8px; letter-spacing: 1px;
  padding: 0 4px;
  border-radius: 2px;
}
.statlog-type.RESULTADO { color: var(--green); border: 1px solid var(--green-dim); }
.statlog-type.NOTICIA   { color: var(--cyan);  border: 1px solid var(--cyan-dim); }
.statlog-type.YOUTUBE   { color: var(--red);   border: 1px solid var(--red-dim); }
.statlog-type.DEPOIMENTO{ color: var(--purple); border: 1px solid var(--purple-dim); }
.statlog-type.PRODUTO   { color: var(--gold);  border: 1px solid var(--gold-dim); }
.statlog-type.RADAR     { color: var(--amber); border: 1px solid var(--gold-dim); }
.statlog-type.OUTRO     { color: var(--text-3); border: 1px solid var(--border); }
.statlog-msg { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   ADMIN VIEW
   ============================================================ */
.admin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad-md);
  padding: var(--pad-md);
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
}
.admin .panel { background: var(--bg-panel); border: 1px solid var(--border); }
.admin .p-body { padding: var(--pad-lg); }

.admin-pin {
  max-width: 360px; margin: 60px auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 28px;
  text-align: center;
}
.admin-pin h2 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cyan);
  margin: 0 0 16px;
}
.admin-pin input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 16px; letter-spacing: 5px;
  text-align: center;
}
.admin-pin input:focus { outline: none; border-color: var(--cyan); }
.btn {
  background: var(--cyan); color: #001824;
  padding: 8px 18px;
  font-family: var(--mono);
  font-weight: 700; font-size: 10px;
  letter-spacing: 1.5px;
  border-radius: 2px;
  margin-top: 12px;
}
.btn:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border-hi); }
.btn-ghost:hover { color: var(--text); border-color: var(--cyan); }
.btn-gold { background: var(--gold); color: #1B1206; }

.field { margin-bottom: 12px; font-family: var(--mono); }
.field label {
  display: block; font-size: 9px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 4px;
}
.field input[type="number"], .field input[type="text"] {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 12px;
}
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
  font-family: var(--mono); font-size: 11px;
}
.toggle-row:last-child { border: none; }
.toggle-row input[type="checkbox"] { transform: scale(1.2); accent-color: var(--cyan); }

/* ============================================================
   POST GENERATOR VIEW
   ============================================================ */
.post-view {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--pad-md);
  padding: var(--pad-md);
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}
.post-side {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: var(--pad-lg);
  overflow-y: auto;
}
.post-side h3 {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 1.5px;
  color: var(--cyan-dim); margin: 0 0 10px;
  text-transform: uppercase;
}
.post-tpl-btn {
  display: block; width: 100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 8px 10px;
  margin-bottom: 4px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 1px;
  text-align: left;
  text-transform: uppercase;
}
.post-tpl-btn.is-active { border-color: var(--gold); color: var(--gold); background: rgba(240,176,64,0.05); }
.post-stage {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: var(--pad-lg);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-toolbar { display: flex; gap: 8px; }
.post-frame-wrap {
  width: 1080px;
  height: 1080px;
  transform: scale(0.50);
  transform-origin: top left;
  flex-shrink: 0;
  margin-bottom: -540px;
}

.post-frame {
  width: 1080px; height: 1080px;
  background: #0A0E14;
  position: relative;
  overflow: hidden;
  font-family: var(--sans);
  color: var(--text);
}
.post-frame.tpl-result {
  background: radial-gradient(circle at 30% 20%, rgba(0,212,255,0.15), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(240,176,64,0.10), transparent 60%),
              #0A0E14;
}
.post-frame.tpl-pre {
  background: linear-gradient(135deg, #0A0E14 0%, #1A2530 60%, #0A0E14 100%);
}
.post-frame.tpl-close {
  background: radial-gradient(circle at 50% 50%, rgba(0,229,160,0.10), transparent 60%), #0A0E14;
}
.post-frame.tpl-milestone {
  background: linear-gradient(180deg, #0A0E14 0%, #16221E 50%, #0A0E14 100%);
}
.post-frame.tpl-trade {
  background: linear-gradient(45deg, #0A0E14 0%, #19232E 100%);
}
.post-watermark {
  position: absolute;
  bottom: 50px; right: 60px;
  display: flex; align-items: center; gap: 14px;
}
.post-watermark .post-logo {
  width: 76px; height: 76px;
  background: var(--gold); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 900; font-size: 32px;
  border-radius: 6px;
}
.post-watermark .post-handle {
  font-family: var(--mono);
  font-size: 28px;
  color: var(--text-2); letter-spacing: 2px;
}
.post-frame .post-title {
  position: absolute; top: 60px; left: 60px;
  font-family: var(--mono);
  font-size: 24px; color: var(--cyan);
  letter-spacing: 4px;
}
.post-frame .post-date {
  position: absolute; top: 60px; right: 60px;
  font-family: var(--mono);
  font-size: 18px; color: var(--text-2);
  letter-spacing: 1px;
}
.post-frame .post-mega {
  position: absolute;
  top: 240px; left: 60px;
  font-family: 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 200px;
  letter-spacing: -8px;
  line-height: 0.9;
}
.post-frame .post-mega.pos { color: var(--green); }
.post-frame .post-mega.neg { color: var(--red); }
.post-frame .post-mega.gold { color: var(--gold); }
.post-frame .post-mega.cyan { color: var(--cyan); }
.post-frame .post-sub {
  position: absolute;
  top: 540px; left: 60px;
  font-family: var(--mono);
  font-size: 30px; color: var(--text);
  max-width: 900px; line-height: 1.4;
}
.post-frame .post-detail {
  position: absolute;
  top: 720px; left: 60px;
  font-family: var(--mono);
  font-size: 22px;
  color: var(--text-2); line-height: 1.7;
  max-width: 900px;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1500px) {
  .tg {
    grid-template-rows:
      minmax(120px, 1fr) minmax(110px, 0.9fr) minmax(140px, 1fr) minmax(150px, 1fr);
  }
  .hero-pct { font-size: 60px; }
}
@media (max-width: 1200px) {
  body { font-size: 11px; }
  .topbar-mid { display: none; }
  .topbar { grid-template-columns: 220px 1fr auto; }
  .tg {
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: minmax(140px, auto);
    overflow-y: auto;
  }
  .s-hero      { grid-column: 1 / span 4; grid-row: auto; }
  .s-engines   { grid-column: 5 / span 4; grid-row: auto; }
  .s-drawdown  { grid-column: 1 / span 4; grid-row: auto; }
  .s-metrics   { grid-column: 5 / span 4; grid-row: auto; }
  .s-equity    { grid-column: 1 / span 8; grid-row: auto; }
  .s-orderflow { grid-column: 1 / span 4; grid-row: auto; }
  .s-magic     { grid-column: 5 / span 4; grid-row: auto; }
  .s-clock     { grid-column: 1 / span 4; grid-row: auto; }
  .s-broker    { grid-column: 5 / span 4; grid-row: auto; }
  .s-open      { grid-column: 1 / span 4; grid-row: auto; }
  .s-closed    { grid-column: 5 / span 4; grid-row: auto; }
  .s-feed      { grid-column: 1 / span 8; grid-row: auto; }
  .s-graph     { grid-column: 1 / span 8; grid-row: auto; min-height: 400px; }
  .s-news      { grid-column: 1 / span 4; grid-row: auto; }
  .s-radar     { grid-column: 5 / span 4; grid-row: auto; }
  .s-status    { grid-column: 1 / span 8; grid-row: auto; }
  .post-view { grid-template-columns: 1fr; }
  .admin { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .tg { grid-template-columns: 1fr; }
  .tg > .panel { grid-column: 1 !important; }
  .topbar { grid-template-columns: 1fr auto; padding: 0 6px; }
  .brand-text { display: none; }
}

/* ============================================================
   RESPONSIVE / TRUNCATION GLOBAL
   ============================================================ */
.panel-row {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.panel-row > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-row [title] { cursor: help; }
.trade-row > *,
.ai-row > *,
.broker-row > *,
.magic-row > *,
.me-row > * { min-width: 0; }
.trade-sym, .trade-meta,
.ai-name, .ai-meta,
.broker-name, .magic-name,
.feed-line .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Equity curve weekend overlay */
.eq-weekend {
  position: absolute;
  inset: 32px 8px 8px 8px;
  background: rgba(10, 14, 20, 0.85);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--mono);
  pointer-events: none;
  z-index: 4;
  border: 1px dashed var(--amber);
}
.eq-weekend-title {
  color: var(--amber);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.eq-weekend-sub {
  color: var(--text-2);
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* Market status pill no topbar */
.hud-item.market-status .hud-v.gold { color: var(--amber); }
.hud-item.market-status .hud-v.green { color: var(--green); }

/* Mobile breakpoint final 380px */
@media (max-width: 380px) {
  body { font-size: 10px; }
  .topbar-mid { display: none; }
  .topbar { padding: 0 6px; gap: 6px; }
  .brand-text { display: none; }
  .topbar-nav a { padding: 4px 8px; font-size: 9px; }
  .hero-mini-row { grid-template-columns: repeat(3, 1fr); }
  .hero-mini-row > :nth-child(n+4) { grid-column: span 1; }
  .trade-row { grid-template-columns: 60px 40px 50px 1fr 50px; gap: 4px; font-size: 9px; }
}

/* ============================================================
   PANEL HOVERABLE (interatividade global)
   ============================================================ */
.panel { transition: border-color 0.2s, box-shadow 0.2s; border: 1px solid transparent; }
.panel:hover { border-color: var(--cyan-dim); box-shadow: 0 0 18px rgba(0, 212, 255, 0.10); }
.panel.clickable { cursor: pointer; }
.panel.clickable:hover { border-color: var(--cyan); box-shadow: 0 0 24px rgba(0, 212, 255, 0.18); }
.panel:hover .p-head { border-bottom-color: var(--cyan-dim); }

.row-clickable { cursor: pointer; transition: background 0.15s; }
.row-clickable:hover { background: rgba(0, 212, 255, 0.06) !important; }
.ai-row.clickable:hover { box-shadow: inset 0 0 12px rgba(0,212,255,0.08); }

/* ============================================================
   FOCUS MODE BANNER
   ============================================================ */
.focus-banner {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  margin-left: 8px;
  border: 1px solid var(--gold);
  background: rgba(240,176,64,0.10);
  color: var(--gold);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 1.2px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
}
.focus-banner:hover { background: rgba(240,176,64,0.20); }
.focus-banner .x { color: var(--text-2); margin-left: 4px; font-weight: 700; }

/* ============================================================
   TOPBAR · sound + clocks
   ============================================================ */
.topbar-sound {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--text-2);
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 2px;
  margin-right: 6px;
}
.topbar-sound.is-on { color: var(--cyan); border-color: var(--cyan); }
.topbar-sound:hover { color: var(--text); }

.brand-logo { transition: transform 0.5s, box-shadow 0.4s, filter 0.4s; }
.brand-logo:hover {
  transform: rotate(8deg) scale(1.06);
  box-shadow: 0 0 26px rgba(240, 176, 64, 0.7);
  filter: brightness(1.15);
}
.brand-logo.spin { animation: brandSpin 1.6s ease-in-out forwards; }
@keyframes brandSpin {
  0%   { transform: rotate(0) scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); filter: brightness(1.5); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ============================================================
   HERO · 5 mini-cards (HOJE/SEMANA/MÊS/ANO/TOTAL)
   ============================================================ */
.hero { gap: 6px; }
.hero-mini-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  width: 100%;
  margin-top: 8px;
  background: var(--border);
}
.hero-mini {
  background: var(--bg-panel-2);
  padding: 5px 6px;
  font-family: var(--mono);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-width: 0;
}
.hero-mini:hover { background: var(--bg-panel); }
.hero-mini.is-active { background: rgba(0, 212, 255, 0.08); }
.hero-mini.is-active .hm-k { color: var(--cyan); }
.hm-k { font-size: 8px; letter-spacing: 1px; color: var(--text-3); text-transform: uppercase; line-height: 1; }
.hm-v { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--text); }
.hm-v.pos { color: var(--green); }
.hm-v.neg { color: var(--red); }

/* ============================================================
   MODAL (M7.modal)
   ============================================================ */
.m7-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  animation: m7ModalIn 0.18s ease-out;
}
.m7-modal-out { animation: m7ModalOut 0.18s ease-in forwards; }
.m7-modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  max-width: 92vw;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  animation: m7ModalScaleIn 0.22s ease-out;
}
.m7-modal-box.m7-modal-fullscreen {
  width: 100vw !important; height: 100vh !important;
  max-width: 100vw; max-height: 100vh;
  border: none;
}
.m7-modal-box.m7-modal-fullscreen .m7-modal-body { padding: 0; }
.m7-modal-title {
  padding: 12px 36px 12px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--cyan);
  border-bottom: 1px solid var(--border);
  background: var(--bg-row);
  text-transform: uppercase;
}
.m7-modal-body {
  padding: 16px;
  overflow-y: auto;
  font-size: 12px;
}
.m7-modal-close {
  position: absolute;
  top: 6px; right: 8px;
  background: transparent; color: var(--text-3);
  font-size: 22px; line-height: 1;
  width: 26px; height: 26px;
  border-radius: 3px;
  z-index: 2;
}
.m7-modal-close:hover { color: var(--red); background: rgba(255,107,107,0.1); }

@keyframes m7ModalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes m7ModalOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes m7ModalScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== Modal contents helpers ===== */
.modal-kv-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-family: var(--mono); font-size: 11px;
  margin-bottom: 14px;
}
.modal-kv-grid > div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.modal-kv-grid .k { color: var(--text-3); letter-spacing: 0.5px; text-transform: uppercase; font-size: 9px; }
.modal-kv-grid .v { color: var(--text); font-weight: 600; }
.modal-list {
  font-family: var(--mono); font-size: 10px;
  border: 1px solid var(--border);
  max-height: 240px; overflow-y: auto;
}
.modal-list .row {
  display: grid; grid-template-columns: 70px 50px 60px 1fr 60px;
  gap: 6px; align-items: center;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.modal-list .row:last-child { border: none; }
.modal-chart-wrap { width: 100%; height: 220px; margin-bottom: 12px; }
.modal-comment {
  background: var(--bg-panel-2); border-left: 2px solid var(--cyan);
  padding: 8px 12px; font-size: 11px; color: var(--text-2);
  font-style: italic; margin-bottom: 12px; line-height: 1.5;
}

/* ============================================================
   TOAST (atalhos / feedback)
   ============================================================ */
.m7-toast {
  position: fixed;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  background: rgba(15,22,32,0.92);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 8px 18px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 1.5px;
  z-index: 1000;
  border-radius: 3px;
  animation: m7Toast 1.6s ease-out forwards;
}
@keyframes m7Toast {
  0%   { opacity: 0; transform: translate(-50%, 12px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  90%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

/* ============================================================
   FLASH overlay (Konami)
   ============================================================ */
@keyframes m7-flash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================================
   TOOLTIP
   ============================================================ */
.m7-tooltip {
  position: fixed;
  pointer-events: none;
  background: rgba(10,14,20,0.97);
  border: 1px solid var(--cyan-dim);
  border-radius: 3px;
  padding: 8px 10px;
  font-family: var(--mono); font-size: 10px;
  color: var(--text);
  z-index: 800;
  max-width: 280px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  animation: m7TipIn 0.12s ease-out;
}
.m7-tooltip .tt-h {
  color: var(--cyan);
  font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.m7-tooltip .tt-row {
  display: flex; justify-content: space-between;
  gap: 12px;
  font-size: 10px; line-height: 1.6;
}
.m7-tooltip .tt-row .k { color: var(--text-3); }
.m7-tooltip .tt-comment { color: var(--text-2); margin-top: 6px; font-style: italic; line-height: 1.5; }
@keyframes m7TipIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   NEURAL BRAIN canvas + modal fullscreen · responsivo
   ============================================================ */
.brain-wrap {
  position: relative;
  width: 100%; height: 100%;
  min-width: 0; min-height: 0;
  overflow: hidden;
}
.brain-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
  cursor: pointer;
}
.brain-modal-content {
  position: relative;
  width: 100vw; height: calc(100vh - 60px);
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 212, 255, 0.06) 0%, transparent 60%), #000;
}
.brain-modal-canvas {
  display: block;
  width: 100% !important; height: 100% !important;
  cursor: pointer;
}
.brain-modal-stats {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 5;
  background: rgba(10, 14, 20, 0.85);
  border: 1px solid var(--border-hi);
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  min-width: 220px;
  letter-spacing: 0.5px;
}
.brain-modal-stats .bms-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.brain-modal-stats .bms-row:last-child { border: none; }
.brain-modal-stats .bms-row span { color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; font-size: 9px; }
.brain-modal-stats .bms-row b { font-weight: 700; }
.brain-modal-stats .bms-row b.pos { color: var(--green); }
.brain-modal-stats .bms-row b.neg { color: var(--red); }
.brain-modal-stats .bms-ai span { color: var(--text-2); font-size: 10px; }

/* ============================================================
   LIVING BRAIN (legacy SVG · não usado mais, mantém pra compat)
   ============================================================ */
.brain-wrap {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(240,176,64,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 30%, rgba(0,212,255,0.04) 0%, transparent 60%);
}
.brain-wrap svg { width: 100%; height: 100%; }
.brain-wrap .brain-core circle {
  filter: drop-shadow(0 0 18px rgba(240, 176, 64, 0.45));
}
.brain-wrap .ai-orbit circle.cyan   { stroke: var(--cyan);   filter: drop-shadow(0 0 8px rgba(0,212,255,0.45)); }
.brain-wrap .ai-orbit circle.gold   { stroke: var(--gold);   filter: drop-shadow(0 0 8px rgba(240,176,64,0.45)); }
.brain-wrap .ai-orbit circle.purple { stroke: var(--purple); filter: drop-shadow(0 0 8px rgba(181,132,255,0.45)); }
.brain-wrap .trade-node {
  transition: r 0.4s ease, opacity 0.4s ease;
}
.brain-wrap .trade-node circle.win-pulse  { animation: winPulse 0.8s ease-out; }
.brain-wrap .trade-node circle.loss-pulse { animation: lossPulse 0.8s ease-out; }
.brain-wrap .link {
  stroke-dasharray: 4 6;
  stroke-opacity: 0.45;
  animation: brainDash 14s linear infinite;
}
@keyframes brainDash { to { stroke-dashoffset: -200; } }
@keyframes winPulse {
  0%   { r: 4; }
  50%  { r: 14; }
  100% { r: 0; opacity: 0; }
}
@keyframes lossPulse {
  0%, 100% { r: 5; }
  20%, 60% { r: 8; }
  40%, 80% { r: 5; }
}
@keyframes coreBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ============================================================
   ORDER FLOW · ladder upgrade
   ============================================================ */
.of-ladder {
  display: flex; flex-direction: column;
  height: 100%;
  font-family: var(--mono); font-size: 10px;
  background: var(--bg-panel);
  overflow: hidden;
}
.of-headerbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px;
  background: var(--bg-row);
  border-bottom: 1px solid var(--border);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 1px;
  flex-shrink: 0;
}
.of-headerbar .of-sym { color: var(--gold); font-weight: 700; }
.of-headerbar .of-spread { color: var(--cyan); }
.of-rows { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.of-row {
  display: grid;
  grid-template-columns: 1fr 60px 60px 1fr;
  gap: 2px;
  padding: 1px 6px;
  align-items: center;
  border-bottom: 1px solid rgba(26,38,50,0.3);
  font-size: 10px;
  position: relative;
  transition: background 0.12s;
}
.of-row.flash-bid { background: rgba(0,229,160,0.08); }
.of-row.flash-ask { background: rgba(255,107,107,0.08); }
.of-row > .vol-bid {
  text-align: right; padding-right: 4px;
  position: relative;
  color: var(--green);
}
.of-row > .vol-ask {
  text-align: left; padding-left: 4px;
  position: relative;
  color: var(--red);
}
.of-row > .vol-bid::before, .of-row > .vol-ask::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  background: rgba(0,229,160,0.08);
}
.of-row > .vol-bid::before { right: 0; width: var(--bidw, 0%); }
.of-row > .vol-ask::before { left: 0; width: var(--askw, 0%); background: rgba(255,107,107,0.08); }
.of-row > .px-bid { text-align: right; color: var(--green); font-weight: 600; }
.of-row > .px-ask { text-align: left; color: var(--red); font-weight: 600; }
.of-spread-row {
  background: rgba(0,212,255,0.06);
  border-top: 1px dashed var(--cyan-dim);
  border-bottom: 1px dashed var(--cyan-dim);
  text-align: center;
  padding: 4px 0;
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 10px;
}

/* ============================================================
   NEWS WIRE polish
   ============================================================ */
.news-card {
  cursor: pointer;
  transition: background 0.15s;
}
.news-card:hover { background: var(--bg-row); }
.news-time {
  color: var(--text-3);
  font-size: 9px;
}

/* ============================================================
   AI ENGINES · clickable + active state
   ============================================================ */
.ai-row.clickable { cursor: pointer; }
.ai-row.is-focused {
  background: var(--bg-panel);
  box-shadow: inset 0 0 16px rgba(0,212,255,0.12);
}

/* ============================================================
   POST GENERATOR · v2 (10 templates)
   ============================================================ */
.post2-view {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  gap: var(--gap);
  height: 100%;
  background: var(--border);
  overflow: hidden;
}
.post2-tabs {
  display: flex; gap: 1px;
  background: var(--border);
  margin-bottom: 1px;
}
.post2-tab {
  flex: 1;
  padding: 10px 12px;
  background: var(--bg-panel);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-align: center;
  cursor: pointer;
  border: none;
}
.post2-tab.is-active { background: var(--bg-panel-2); color: var(--gold); border-bottom: 2px solid var(--gold); }
.post2-side {
  background: var(--bg-panel);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.post2-list {
  overflow-y: auto;
  padding: 8px;
  flex: 1;
}
.post2-tpl-btn {
  display: block; width: 100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 10px;
  margin-bottom: 4px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 1px;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.post2-tpl-btn.is-active { border-color: var(--gold); color: var(--gold); background: rgba(240,176,64,0.06); }
.post2-tpl-btn .small { display: block; color: var(--text-3); font-size: 8px; margin-top: 3px; letter-spacing: 0.5px; text-transform: none; }

.post2-stage {
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.post2-stage-tabs {
  display: flex; gap: 1px;
  background: var(--border);
  flex-shrink: 0;
}
.post2-stage-canvas {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,212,255,0.04), transparent 50%);
}
.post2-stage-toolbar {
  display: flex; gap: 6px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.post2-customize {
  background: var(--bg-panel);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 14px;
}
.post2-customize h4 {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--cyan-dim);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.post2-customize .field { font-family: var(--mono); }
.post2-customize textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px;
  font-family: var(--mono);
  font-size: 11px;
  resize: vertical;
}
.post2-customize textarea:focus, .post2-customize input:focus { outline: none; border-color: var(--cyan); }

/* Frames (squares + stories) */
.post-frame-wrap {
  background: #000;
  flex-shrink: 0;
}
.pf {
  position: relative;
  font-family: var(--sans);
  color: var(--text);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(0,212,255,0.18), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(240,176,64,0.10), transparent 50%),
    #08080F;
}
.pf-square { width: 1080px; height: 1080px; }
.pf-story  { width: 1080px; height: 1920px; }

/* Brand brackets nos cantos */
.pf .pf-bracket {
  position: absolute;
  width: 60px; height: 60px;
  border: 3px solid var(--gold);
}
.pf .pf-bracket.tl { top: 32px; left: 32px;  border-right: none; border-bottom: none; }
.pf .pf-bracket.tr { top: 32px; right: 32px; border-left: none; border-bottom: none; }
.pf .pf-bracket.bl { bottom: 32px; left: 32px;  border-right: none; border-top: none; }
.pf .pf-bracket.br { bottom: 32px; right: 32px; border-left: none; border-top: none; }

.pf .pf-logo {
  position: absolute;
  top: 56px; left: 56px;
  width: 64px; height: 64px;
  background: var(--gold); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 900;
  font-size: 26px;
  border-radius: 6px;
  box-shadow: 0 0 24px rgba(240,176,64,0.4);
}
.pf .pf-handle {
  position: absolute;
  bottom: 60px; left: 56px;
  font-family: var(--mono);
  font-size: 24px;
  color: var(--text-2);
  letter-spacing: 2px;
}
.pf .pf-version {
  position: absolute;
  bottom: 60px; right: 56px;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--text-3);
  letter-spacing: 1px;
}
.pf .pf-title-top {
  position: absolute;
  top: 60px; right: 90px; left: 150px;
  font-family: var(--mono);
  font-size: 22px;
  color: var(--cyan);
  letter-spacing: 4px;
  text-align: right;
}
.pf .pf-mega {
  position: absolute;
  font-family: 'Arial Black', 'JetBrains Mono', sans-serif;
  font-weight: 900;
  letter-spacing: -8px;
  line-height: 0.9;
}
.pf .pf-mega.pos { color: var(--green); text-shadow: 0 0 60px rgba(0,229,160,0.55); }
.pf .pf-mega.neg { color: var(--red);   text-shadow: 0 0 60px rgba(255,107,107,0.55); }
.pf .pf-mega.gold{ color: var(--gold);  text-shadow: 0 0 60px rgba(240,176,64,0.45); }
.pf .pf-mega.cyan{ color: var(--cyan);  text-shadow: 0 0 60px rgba(0,212,255,0.45); }

.pf .pf-sub {
  position: absolute;
  font-family: var(--mono);
  color: var(--text);
  line-height: 1.4;
}
.pf .pf-detail {
  position: absolute;
  font-family: var(--mono);
  color: var(--text-2);
  line-height: 1.7;
  white-space: pre;
}
.pf .pf-quote {
  position: absolute;
  font-family: var(--sans);
  font-style: italic;
  color: var(--gold);
  line-height: 1.3;
}
.pf .pf-mini-cards {
  position: absolute;
  display: grid;
  gap: 12px;
}
.pf .pf-mini-card {
  background: rgba(15,22,32,0.6);
  border-left: 3px solid var(--cyan);
  padding: 14px 16px;
  font-family: var(--mono);
}
.pf .pf-mini-card.gold   { border-left-color: var(--gold); }
.pf .pf-mini-card.purple { border-left-color: var(--purple); }
.pf .pf-mini-card.green  { border-left-color: var(--green); }
.pf .pf-mini-card.red    { border-left-color: var(--red); }
.pf .pf-mini-card .k { font-size: 14px; color: var(--text-3); letter-spacing: 1.5px; }
.pf .pf-mini-card .v { font-size: 32px; font-weight: 700; color: var(--text); }
.pf .pf-radar-row {
  display: grid;
  grid-template-columns: 200px 1fr 120px;
  gap: 18px;
  padding: 16px 0;
  font-family: var(--mono);
  font-size: 28px;
  align-items: center;
  border-bottom: 1px solid rgba(26,38,50,0.6);
}
.pf .pf-radar-bar {
  height: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,212,255,0.25);
  position: relative;
}
.pf .pf-radar-bar .b {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(to right, rgba(0,229,160,0.4), var(--green));
}
.pf .pf-badge-circle {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(240,176,64,0.25), transparent 60%),
    rgba(0,0,0,0.4);
  border: 4px solid var(--gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 60px rgba(240,176,64,0.4), inset 0 0 40px rgba(240,176,64,0.2);
}

/* ============================================================
   LOADING SKELETONS
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-panel) 25%, var(--bg-row) 50%, var(--bg-panel) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
  border-radius: 3px;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   PAUSED state
   ============================================================ */
.app.is-paused .ticker { opacity: 0.4; }
.app.is-paused .pill-live { color: var(--amber); border-color: var(--amber); background: rgba(240,176,64,0.08); }
.app.is-paused .pill-live .dot-live { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.app.is-paused::after {
  content: 'PAUSED · SPACE';
  position: fixed;
  top: 56px; right: 12px;
  z-index: 200;
  font-family: var(--mono); font-size: 10px;
  color: var(--amber);
  background: rgba(15,22,32,0.92);
  border: 1px solid var(--amber);
  padding: 3px 10px;
  letter-spacing: 1.5px;
  border-radius: 2px;
  pointer-events: none;
}

/* ============================================================
   THEME / SOUND BUTTONS topbar
   ============================================================ */
.topbar-theme, .topbar-sound {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--text-2);
  padding: 4px 10px;
  font-size: 9px;
  font-family: var(--mono);
  letter-spacing: 1px;
  border-radius: 2px;
  margin-right: 4px;
  text-transform: uppercase;
}
.topbar-theme:hover, .topbar-sound:hover { color: var(--text); border-color: var(--cyan); }
.topbar-theme.is-active, .topbar-sound.is-on { color: var(--cyan); border-color: var(--cyan); }

/* ============================================================
   MARGIN/EQUITY panel
   ============================================================ */
.me-list { display: flex; flex-direction: column; gap: 2px; }
.me-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0;
  font-family: var(--mono);
  border-bottom: 1px dashed var(--border);
}
.me-row:last-child { border: none; }
.me-k { font-size: 9px; letter-spacing: 1.2px; color: var(--text-3); text-transform: uppercase; }
.me-v { font-size: 13px; font-weight: 700; color: var(--text); }
.me-v.pos { color: var(--green); }
.me-v.neg { color: var(--red); }

/* ============================================================
   DRAWDOWN panel ampliado
   ============================================================ */
.dd-headrow {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.dd-headrow .dd-k { font-size: 9px; letter-spacing: 1px; color: var(--text-3); text-transform: uppercase; margin-bottom: 4px; }
.dd-headrow .dd-v { font-size: 18px; font-weight: 700; font-family: var(--mono); }
.dd-headrow .dd-v.ok { color: var(--green); }
.dd-headrow .dd-v.warn { color: var(--amber); }
.dd-headrow .dd-v.bad { color: var(--red); }
.dd-headrow .dd-foot { font-family: var(--mono); font-size: 9px; color: var(--text-3); margin-top: 2px; }

.dd-perlist { font-family: var(--mono); margin-bottom: 10px; }
.dd-perlist-head {
  font-size: 9px; color: var(--text-3); letter-spacing: 1.2px;
  margin-bottom: 4px; text-transform: uppercase;
}
.dd-perlist-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 8px; padding: 3px 0;
  font-size: 10px;
  border-bottom: 1px dashed var(--border);
}
.dd-perlist-row:last-child { border: none; }
.dd-perlist-name { color: var(--text); }
.dd-perlist-cur, .dd-perlist-max { font-weight: 600; }
.dd-perlist-cur.ok, .dd-perlist-max.ok { color: var(--green); }
.dd-perlist-cur.warn, .dd-perlist-max.warn { color: var(--amber); }
.dd-perlist-cur.bad, .dd-perlist-max.bad { color: var(--red); }

.dd-limit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
}
.dd-limit-k { font-size: 9px; letter-spacing: 1.2px; color: var(--text-3); text-transform: uppercase; margin-bottom: 4px; }
.dd-limit-bar {
  height: 5px; background: rgba(255,107,107,0.08);
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.dd-limit-bar > span {
  display: block; height: 100%;
  background: linear-gradient(to right, var(--green), var(--amber), var(--red));
  transition: width .4s ease;
}
.dd-limit-foot { font-size: 9px; color: var(--text-2); margin-top: 4px; }

/* ============================================================
   EQUITY CURVE tabs
   ============================================================ */
.eq-tabs { display: flex; gap: 4px; margin-bottom: 6px; padding: 0 4px; }
.eq-tab {
  padding: 3px 10px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
}
.eq-tab.is-active { color: var(--cyan); border-color: var(--cyan); background: rgba(0,212,255,0.06); }

/* ============================================================
   HERO weekend banner
   ============================================================ */
.hero-weekend {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--amber);
  letter-spacing: 1px;
  text-align: center;
}
.hero-weekend .hw-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--amber);
  background: rgba(240,176,64,0.06);
  margin-right: 8px;
  font-weight: 600;
}

/* ============================================================
   TRADE FROZEN tag
   ============================================================ */
.trade-frozen {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 1px 6px;
  text-align: center;
}

/* ============================================================
   NEWS LINE (real news no neural feed) · grid legível
   ============================================================ */
.feed-line.news-line {
  display: grid;
  grid-template-columns: 50px 90px 1fr;
  gap: 8px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
  align-items: center;
  white-space: normal;
}
.feed-line.news-line .ts {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 10px;
}
.feed-line.news-line .src {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-line.news-line .src.cyan       { color: var(--cyan); }
.feed-line.news-line .src.purple     { color: var(--purple); }
.feed-line.news-line .src.green      { color: var(--green); }
.feed-line.news-line .src.amber      { color: var(--amber); }
.feed-line.news-line .src.gold       { color: var(--gold); }
.feed-line.news-line .title {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.feed-line.news-line.breaking .title { color: var(--text); font-weight: 600; }
.feed-line.news-line.breaking .breaking-tag::before {
  content: '◉ '; color: var(--red); animation: pulse 1.2s ease-in-out infinite;
}

/* ============================================================
   SENTIMENT panel · 5 ativos com cotação real + BRL
   ============================================================ */
.sent-quote .px-brl {
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sent-list { display: flex; flex-direction: column; gap: 4px; }
.sent-row {
  display: grid;
  grid-template-columns: 64px 1fr 90px;
  gap: 8px;
  align-items: center;
  padding: 5px 6px;
  background: var(--bg-panel-2);
  border-left: 2px solid var(--border-hi);
  font-family: var(--mono);
  font-size: 10px;
}
.sent-row.up   { border-left-color: var(--green); }
.sent-row.down { border-left-color: var(--red); }
.sent-row.neu  { border-left-color: var(--cyan-dim); }
.sent-sym  { color: var(--text); font-weight: 600; letter-spacing: 0.4px; }
.sent-quote { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sent-quote .px {
  font-size: 11px; font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sent-quote .chg { font-size: 9px; }
.sent-quote .chg.pos { color: var(--green); }
.sent-quote .chg.neg { color: var(--red); }
.sent-bar-wrap {
  position: relative;
  height: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 4px;
  font-size: 9px; gap: 5px;
}
.sent-bar {
  flex: 1;
  height: 5px;
  background: linear-gradient(to right,
    var(--red) 0%,
    var(--red) 30%,
    var(--amber) 30%,
    var(--amber) 50%,
    var(--cyan) 50%,
    var(--cyan) 70%,
    var(--green) 70%,
    var(--green) 100%);
  position: relative;
}
.sent-bar .marker {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--text);
  box-shadow: 0 0 4px rgba(255,255,255,0.6);
}
.sent-label {
  font-size: 9px; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-2);
  min-width: 50px;
  text-align: right;
}
.sent-label.bear { color: var(--red); }
.sent-label.neutral { color: var(--text-2); }
.sent-label.bull { color: var(--green); }

/* ============================================================
   UTILS
   ============================================================ */
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--text-2); }
.muted-3 { color: var(--text-3); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.cyan { color: var(--cyan); }
.gold { color: var(--gold); }
.purple { color: var(--purple); }