/* ══════════════════════════════════════════════════════════
   HAKAN BRASIN — Design System Premium
   Inspiração: Bloomberg Terminal · BlackRock Aladdin · Palantir
══════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg:       #F5F7F9;
  --white:    #FFFFFF;
  --black:    #0B0F14;
  --ink:      #111827;
  --text:     #374151;
  --muted:    #667085;
  --border:   #E5E7EB;
  --border2:  #D1D5DB;
  --hover:    #F9FAFB;

  --teal:     #0E5A55;
  --teal2:    #0A4440;
  --teal3:    #E6F4F3;
  --teal4:    #C3E8E6;
  --green:    #16A34A;
  --green2:   #DCFCE7;
  --red:      #EF4444;
  --red2:     #FEE2E2;
  --amber:    #F59E0B;
  --amber2:   #FEF3C7;
  --blue:     #2563EB;
  --blue2:    #DBEAFE;
  --purple:   #7C3AED;
  --purple2:  #EDE9FE;

  --r:        16px;
  --r-sm:     10px;
  --r-xs:     6px;
  --shadow:   0 1px 4px rgba(11,15,20,.06), 0 4px 16px rgba(11,15,20,.04);
  --shadow-md:0 4px 20px rgba(11,15,20,.1);
  --tr:       .18s ease;

  --sidebar-w: 240px;
  --topbar-h:  60px;
  --font: 'Inter', system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg:     #0B0F14;
  --white:  #111827;
  --ink:    #F9FAFB;
  --text:   #D1D5DB;
  --muted:  #6B7280;
  --border: #1F2937;
  --border2:#374151;
  --hover:  #1F2937;
  --teal3:  #0A3330;
  --green2: #052E16;
  --red2:   #1F0A0A;
  --amber2: #1C1200;
  --blue2:  #0A1628;
  --shadow: 0 1px 4px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:14px; -webkit-font-smoothing:antialiased }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit }
input, select, textarea { font: inherit }
img { display: block; max-width: 100% }

/* ══════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════ */
body { display:flex; flex-direction:column; min-height:100vh }

/* ── TICKER GLOBAL — topo absoluto (acompanha o tema dark/light) ── */
.ticker {
  background:var(--bg); height:28px;
  display:flex; align-items:center; overflow:hidden;
  flex-shrink:0; position:sticky; top:0; z-index:200;
  border-bottom:1px solid var(--border);
  transition:background .2s ease, border-color .2s ease;
}
.ticker-track {
  display:inline-flex; gap:0;
  animation:ticker-move 45s linear infinite;
  white-space:nowrap; will-change:transform;
}
.ticker-track:hover { animation-play-state:paused }
@keyframes ticker-move { from{transform:translateX(0)} to { transform:translateX(-50%) } }
.tk-item {
  display:inline-flex; align-items:center; gap:6px;
  padding:0 16px; font-size:11px; font-weight:600;
  border-right:1px solid var(--border);
  color:var(--text);
}
.tk-sym { font-weight:800; color:var(--teal); letter-spacing:.5px }
.tk-pos { color:var(--green) }
.tk-neg { color:var(--red) }
.tk-neu { color:var(--muted) }
/* No dark, acentos mais vivos p/ contraste no fundo escuro */
[data-theme="dark"] .tk-sym { color:#5EEAD4 }
[data-theme="dark"] .tk-pos { color:#4ADE80 }
[data-theme="dark"] .tk-neg { color:#F87171 }

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: calc(100vh - 28px);
  transition: grid-template-columns .22s ease;
  flex:1;
}
.app-shell.sb-collapsed {
  grid-template-columns: 60px 1fr;
}
/* Backdrop do drawer: oculto no desktop (não entra no grid); só existe no mobile */
.sb-backdrop { display: none }

/* ── TOPBAR ── */
.topbar {
  grid-column: 1 / -1;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px 0 0;
  gap: 12px;
  position: sticky;
  top: 28px;
  z-index: 100;
  box-shadow: 0 1px 0 var(--border);
}
.topbar-brand {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  transition: width .22s ease;
  overflow: hidden;
  border-right: 1px solid var(--border);
  height: var(--topbar-h);
}
.app-shell.sb-collapsed .topbar-brand { width: 60px }
/* Logo limpa — sem caixa verde, apenas texto institucional */
.brand-icon {
  display: none;
}
.brand-text {
  overflow: hidden;
  transition: opacity .18s, width .18s;
  white-space: nowrap;
}
.app-shell.sb-collapsed .brand-text { opacity: 0; width: 0 }
.brand-name {
  font-size: 15px; font-weight: 800;
  color: var(--ink); letter-spacing: -.03em;
}
.brand-name em { font-style: normal; color: var(--teal) }
.brand-sub {
  font-size: 9px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-top: 1px;
}
.topbar-center { flex: 1 }
.topbar-page-title {
  font-size: 14px; font-weight: 700;
  color: var(--ink);
}
.topbar-page-sub {
  font-size: 11px; color: var(--muted); margin-top: 1px;
}
.topbar-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.topbar-status {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
}
.topbar-status.on { border-color: var(--green); color: var(--green); background: var(--green2) }
.topbar-status.warn { border-color: var(--amber); color: var(--amber); background: var(--amber2) }
.topbar-status.off { border-color: var(--red); color: var(--red); background: var(--red2) }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.topbar-status.on .status-dot { animation: pulse-dot 1.5s infinite }
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1) }
  50%      { opacity:.5; transform:scale(1.3) }
}
@keyframes spin { to { transform:rotate(360deg) } }
.tb-time {
  font-size: 12px; font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Ciclo de análise no cabeçalho (movido da sidebar) */
.tb-cycle {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 11px; font-weight: 700; color: var(--muted);
  white-space: nowrap;
}
.tb-cycle b { color: var(--teal); font-weight: 800; font-variant-numeric: tabular-nums }
.tb-cycle b:empty { display: none }
/* Calendário Econômico: chips operacionais fora de contexto ficam ocultos */
body.page-econ #btn-bot, body.page-econ .tb-cycle { display: none }
.tb-btn {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--white);
  display: grid; place-items: center;
  font-size: 15px; transition: all var(--tr);
  position: relative;
}
.tb-btn:hover { border-color: var(--teal); color: var(--teal) }
.notif-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--red); border: 2px solid var(--white);
  color: #fff; font-size: 9px; font-weight: 800; line-height: 11px;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.tb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal) 0%, #0A3430 50%, #C17B3A 100%);
  overflow: hidden; flex-shrink: 0; cursor: pointer;
  border: 2px solid var(--border);
}
.tb-avatar img { width:100%; height:100%; object-fit:cover }
.tb-toggle-btn {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--white);
  display: grid; place-items: center; font-size: 13px;
  transition: all var(--tr); margin-right: 4px;
}
.tb-toggle-btn:hover { border-color: var(--teal) }
.tb-toggle-btn svg { transition: transform .22s }
.app-shell.sb-collapsed .tb-toggle-btn svg { transform: rotate(180deg) }

/* ── SIDEBAR ── */
.sidebar {
  grid-row: 2;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 12px 8px;
  gap: 4px;
  overflow: hidden;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  transition: padding .22s ease;
}
.sidebar::-webkit-scrollbar { width: 4px }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px }
.app-shell.sb-collapsed .sidebar { padding: 12px 4px }

/* Profile card */
.sb-profile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px;
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 8px; overflow: hidden;
}
.sb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg,var(--teal),#0A3430 50%,#C17B3A);
  overflow: hidden; flex-shrink: 0; cursor: pointer;
  border: 2px solid var(--border);
}
.sb-avatar img { width:100%; height:100%; object-fit:cover }
.sb-profile-txt { overflow: hidden; transition: opacity .18s, width .18s }
.app-shell.sb-collapsed .sb-profile-txt { opacity:0; width:0 }
.sb-profile-name {
  font-size: 12px; font-weight: 700;
  color: var(--ink); white-space: nowrap;
}
.sb-profile-role {
  font-size: 10px; color: var(--muted);
  white-space: nowrap; margin-top: 1px;
}
.sb-mt5-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; font-size: 9px; font-weight: 700;
  color: var(--teal); background: var(--teal3);
  border-radius: 999px; padding: 2px 7px;
  white-space: nowrap;
}
.mt5-dot { width: 5px; height: 5px; border-radius:50%; background:var(--green) }

/* Nav sections */
.sb-section-title {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); padding: 8px 8px 3px;
  white-space: nowrap; overflow: hidden;
  transition: opacity .18s;
}
.app-shell.sb-collapsed .sb-section-title { opacity: 0 }

.nav-item {
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 8px; border-radius: 9px;
  font-size: 12.5px; font-weight: 500;
  color: var(--muted); cursor: pointer;
  transition: all var(--tr);
  white-space: nowrap; overflow: hidden;
  border: 1px solid transparent;
  position: relative;
}
.nav-item:hover { background: var(--bg); color: var(--ink) }
.nav-item.active {
  background: var(--teal3);
  color: var(--teal);
  font-weight: 700;
  border-color: var(--teal4);
}
.nav-item svg { width:16px; height:16px; flex-shrink:0 }
.nav-lbl { overflow:hidden; transition:opacity .18s,width .18s; white-space:nowrap }
.app-shell.sb-collapsed .nav-lbl { opacity:0; width:0 }
.nav-badge {
  margin-left: auto; font-size: 9px; font-weight: 800;
  background: var(--red); color: white;
  border-radius: 999px; padding: 1px 6px; flex-shrink: 0;
}
.app-shell.sb-collapsed .nav-badge { display:none }

/* Sidebar community card */
.sb-community {
  margin-top: auto;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal2) 100%);
  border-radius: var(--r-sm);
  padding: 14px 12px;
  text-align: center;
  overflow: hidden;
  transition: opacity .18s;
}
.app-shell.sb-collapsed .sb-community { opacity:0; pointer-events:none }
.sb-community-ico { font-size:20px; margin-bottom:6px }
.sb-community h3 { font-size:12px; font-weight:800; color:white; margin-bottom:3px }
.sb-community p { font-size:10px; color:rgba(255,255,255,.7); margin-bottom:10px; line-height:1.4 }
.sb-community-socials {
  display: grid; grid-template-columns:1fr 1fr;
  gap: 4px; margin-bottom: 10px;
}
.sc-link {
  display:flex; align-items:center; justify-content:center; gap:4px;
  height:26px; border-radius:6px;
  background:rgba(255,255,255,.12);
  color:white; font-size:10px; font-weight:700;
  transition:background var(--tr);
}
.sc-link:hover { background:rgba(255,255,255,.25) }
.sc-link svg { width:11px; height:11px }
.sb-community-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:32px; width:100%;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  color:white; font-size:11px; font-weight:800;
  transition:all var(--tr);
}
.sb-community-btn:hover { background:rgba(255,255,255,.25) }

/* ── MAIN CONTENT ── */
.main-content {
  grid-row: 2;
  min-width: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.main-content::-webkit-scrollbar { width: 5px }
.main-content::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px }

/* Page panels */
.page-panel { display:none }
.page-panel.active { display:contents }

/* ══════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════ */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.card-pad { padding: 18px 20px }
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 14px;
}
.card-title {
  font-size: 13px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
}
.card-sub {
  font-size: 10px; color: var(--muted); margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   KPI CARDS
══════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.kpi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px 10px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--tr);
}
.kpi-card:hover { box-shadow: var(--shadow-md) }
.kpi-label {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 6px;
  display:flex; align-items:center; justify-content:space-between;
}
.kpi-label svg { width:12px; height:12px; color:var(--muted) }
.kpi-value {
  font-size: 20px; font-weight: 800;
  color: var(--ink); letter-spacing: -.04em;
  line-height: 1; margin-bottom: 4px;
}
.kpi-sub {
  font-size: 10px; color: var(--muted); margin-bottom: 8px;
}
.kpi-chart { height: 32px }
.kpi-pos { color: var(--green) !important }
.kpi-neg { color: var(--red) !important }
.kpi-teal { color: var(--teal) !important }
.kpi-amber { color: var(--amber) !important }

/* Gauge KPI */
.gauge-wrap { text-align:center; padding:4px 0 }
.gauge-canvas { display:block; margin:0 auto }
.gauge-value {
  font-size: 22px; font-weight: 900;
  color: var(--teal); letter-spacing: -.04em;
  margin-top: -4px;
}
.gauge-label { font-size:9px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase }

/* ══════════════════════════════════════════════════════════
   EQUITY CURVE
══════════════════════════════════════════════════════════ */
.equity-section { position:relative }
.equity-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom: 12px;
}
.equity-title-group {}
.equity-value {
  font-size: 28px; font-weight: 900;
  color: var(--ink); letter-spacing: -.05em;
}
.equity-change {
  font-size: 12px; font-weight: 700;
  margin-top: 2px;
}
.equity-filters { display:flex; gap:4px }
.ef {
  height: 26px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px; font-weight: 700;
  color: var(--muted); cursor: pointer;
  transition: all var(--tr);
}
.ef:hover { border-color: var(--teal); color: var(--teal) }
.ef.active { background:var(--teal); color:white; border-color:var(--teal) }
.equity-chart-wrap { height: 200px; margin-bottom:14px }
.equity-metrics {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 12px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.em-item {}
.em-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:3px }
.em-value { font-size:15px; font-weight:800; color:var(--ink) }

/* ══════════════════════════════════════════════════════════
   AI DECISION TABLE
══════════════════════════════════════════════════════════ */
.ai-table { width:100%; border-collapse:collapse }
.ai-table th {
  text-align:left; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.ai-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 12px; color: var(--text);
}
.ai-table tr:last-child td { border-bottom:none }
.ai-table tr:hover td { background:var(--bg) }
.ai-sym {
  display:flex; align-items:center; gap:8px;
}
.ai-sym-ico {
  width:28px; height:28px; border-radius:8px;
  background:var(--teal3);
  display:grid; place-items:center;
  font-size:11px; font-weight:900; color:var(--teal);
  flex-shrink:0;
}
.ai-sym-name { font-size:12px; font-weight:700; color:var(--ink) }
.ai-sym-sub  { font-size:10px; color:var(--muted) }

/* Direction badges */
.dir-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.05em;
}
.dir-buy    { background:var(--green2); color:var(--green) }
.dir-sell   { background:var(--red2);   color:var(--red) }
.dir-wait   { background:var(--amber2); color:var(--amber) }

/* Score circle */
.score-circle {
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  font-size:12px; font-weight:800; color:var(--ink);
  border: 3px solid;
}
.sc-high  { border-color:var(--green); color:var(--green) }
.sc-mid   { border-color:var(--amber); color:var(--amber) }
.sc-low   { border-color:var(--red);   color:var(--red) }

/* Strength bars */
.strength-bars { display:flex; gap:2px; align-items:center }
.sb-bar {
  width:6px; height:14px; border-radius:2px;
  background:var(--border);
}
.sb-bar.filled.high  { background:var(--green) }
.sb-bar.filled.mid   { background:var(--amber) }
.sb-bar.filled.low   { background:var(--red) }

/* Reasons */
.reasons-list { display:flex; flex-direction:column; gap:2px }
.reason-item {
  display:flex; align-items:center; gap:4px;
  font-size:10px; color:var(--text);
}
.reason-dot { width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0 }
.reason-dot.neg { background:var(--red) }
.reason-dot.neu { background:var(--amber) }

/* Action btns */
.btn-detail {
  height:28px; padding:0 12px; border-radius:7px;
  border:1px solid var(--border); background:var(--white);
  font-size:11px; font-weight:700; color:var(--teal);
  transition:all var(--tr);
}
.btn-detail:hover { background:var(--teal); color:white; border-color:var(--teal) }

/* ══════════════════════════════════════════════════════════
   CENTRO DE DECISÃO — resumo + linhas compactas (accordion)
══════════════════════════════════════════════════════════ */
.dec-wrap { display:flex; flex-direction:column; gap:12px }

/* Resumo geral do cenário */
.dec-summary { display:flex; flex-direction:column; gap:10px; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg) }
.dec-sum-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap }
.dec-sum-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink) }
.dec-sum-updated { font-size:10.5px; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums }
.dec-sum-stats { display:flex; flex-wrap:wrap; gap:8px }
.dec-stat { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:78px;
  padding:7px 12px; border-radius:9px; background:var(--white); border:1px solid var(--border) }
.dec-stat b { font-size:17px; font-weight:900; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums }
.dec-stat span { font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700 }
.dec-stat.buy b { color:var(--green) }
.dec-stat.sell b { color:var(--red) }
.dec-stat.neu b { color:var(--muted) }

/* Filtros rápidos */
.dec-filters { display:flex; flex-wrap:wrap; gap:6px }
.dec-chip { padding:5px 13px; border-radius:999px; border:1px solid var(--border);
  background:var(--white); font-size:11px; font-weight:700; color:var(--text); cursor:pointer; transition:all var(--tr) }
.dec-chip:hover { border-color:var(--teal) }
.dec-chip.active { background:var(--teal); color:#fff; border-color:var(--teal) }

/* Lista de ativos */
.dec-list { display:flex; flex-direction:column; gap:6px }
.dec-empty { padding:26px; text-align:center; color:var(--muted); font-size:12px }
.dec-row { border:1px solid var(--border); border-radius:var(--r-sm); background:var(--white);
  overflow:hidden; transition:border-color var(--tr) }
.dec-row.open { border-color:var(--teal); box-shadow:var(--shadow) }

/* Linha compacta (cabeçalho clicável) */
.dec-head { width:100%; display:grid; align-items:center; gap:10px;
  grid-template-columns: 30px minmax(92px,1.3fr) 96px 52px 50px minmax(92px,1fr) 28px 20px;
  padding:10px 12px; background:none; border:0; cursor:pointer; text-align:left; font:inherit; color:inherit }
.dec-head:hover { background:var(--hover) }
.dec-ico { width:28px; height:28px; border-radius:8px; background:var(--teal3);
  display:grid; place-items:center; font-size:13px }
.dec-sym { font-size:12.5px; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dec-score { font-size:11px; font-weight:900; padding:3px 8px; border-radius:7px; text-align:center; white-space:nowrap }
.dec-score.sc-high { background:var(--green2); color:var(--green) }
.dec-score.sc-mid  { background:var(--amber2); color:var(--amber) }
.dec-score.sc-low  { background:var(--red2);   color:var(--red) }
.dec-prob { font-size:12px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums }
.dec-force { display:flex; align-items:center; gap:6px }
.dec-force em { font-size:9.5px; font-weight:800; color:var(--muted); font-style:normal }
.dec-fav { width:26px; height:26px; border-radius:7px; border:1px solid var(--border); background:var(--white);
  display:grid; place-items:center; font-size:13px; cursor:pointer; color:var(--muted); transition:all var(--tr) }
.dec-fav:hover { border-color:var(--amber); color:var(--amber) }
.dec-fav.on { color:var(--amber); border-color:var(--amber) }
.dec-caret { color:var(--muted); font-size:12px; transition:transform var(--tr); justify-self:center }
.dec-row.open .dec-caret { transform:rotate(180deg) }

/* Corpo expandido */
.dec-body { border-top:1px solid var(--border); padding:0 14px 14px; display:flex; flex-direction:column; gap:12px }
.dec-body-inner { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-top:12px }
.dec-block-title { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px }
.dec-confirms { display:flex; flex-direction:column; gap:5px }
.dec-confirm { display:flex; align-items:flex-start; gap:7px; font-size:11.5px; color:var(--text); line-height:1.35 }
.dec-confirm i { color:var(--green); font-style:normal; font-weight:900; flex-shrink:0 }
.dec-confl { display:flex; flex-direction:column; gap:8px }
.dec-confl-row { display:grid; grid-template-columns:88px 1fr 36px; align-items:center; gap:8px; font-size:11px }
.dec-confl-row span { color:var(--text); font-weight:700 }
.dec-confl-bar { height:6px; border-radius:3px; background:var(--border); overflow:hidden }
.dec-confl-bar i { display:block; height:100%; border-radius:3px; background:var(--teal) }
.dec-confl-row b { text-align:right; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums }
.dec-open { align-self:flex-start; height:32px; padding:0 16px; border-radius:8px; border:1px solid var(--teal);
  background:var(--teal); color:#fff; font-size:12px; font-weight:800; cursor:pointer; transition:all var(--tr) }
.dec-open:hover { background:var(--teal2) }

@media(max-width:860px){
  .dec-head { grid-template-columns:28px 1fr auto auto auto; gap:8px }
  .dec-head .dec-prob { display:none }
  .dec-force em { display:none }
  .dec-body-inner { grid-template-columns:1fr; gap:14px }
}

/* ══════════════════════════════════════════════════════════
   PERFORMANCE DA CONTA — gráfico estilo Hakan Light (ApexCharts)
══════════════════════════════════════════════════════════ */
.eqx-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px }
.eqx-legend { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px }
.eqx-chip { display:inline-flex; align-items:center; gap:7px; padding:4px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--white); font-size:11px; font-weight:700; color:var(--muted);
  cursor:pointer; transition:all var(--tr) }
.eqx-chip i { width:8px; height:8px; border-radius:50%; background:var(--border2); transition:background var(--tr) }
.eqx-chip:hover { border-color:var(--border2) }
.eqx-chip.on { color:var(--ink); border-color:var(--c) }
.eqx-chip.on i { background:var(--c) }
.eqx-valrow { display:flex; align-items:baseline; gap:12px; margin:2px 0 6px }
.eqx-main { width:100%; min-height:340px }
.eqx-brush { width:100%; margin-top:2px }

/* tooltip custom */
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark {
  border:1px solid var(--border) !important; border-radius:9px !important;
  box-shadow:var(--shadow-md) !important; background:var(--white) !important; }
.eqx-tt { padding:9px 11px; font-family:'Inter',sans-serif; min-width:186px }
.eqx-tt-head { font-size:10.5px; color:var(--muted); font-weight:700; margin-bottom:7px }
.eqx-tt-row { display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:11.5px; padding:2.5px 0 }
.eqx-tt-row span { display:flex; align-items:center; gap:7px; color:var(--text); font-weight:600 }
.eqx-tt-row i { width:8px; height:8px; border-radius:50%; display:inline-block }
.eqx-tt-row b { font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums }

/* ══════════════════════════════════════════════════════════
   HKMAP — mapa-mundi premium (Mercados / Geopolítica) · paleta HAKAN
══════════════════════════════════════════════════════════ */
/* height:auto → o SVG se dimensiona pela proporção do viewBox (evita colapso
   dentro de containers flex, que deixava o mapa de Mercados invisível). */
.hkmap { width:100%; height:auto; display:block; background:transparent }
.geo-world-host { width:100%; display:block }
.hkmap-land path { stroke:none }
.hkmap-land-solid path { fill:var(--teal); opacity:.07; stroke:none }
[data-theme="dark"] .hkmap-land-solid path { opacity:.10 }
.hkmap-arc { fill:none; stroke:var(--teal); stroke-width:1.4; opacity:.45; stroke-linecap:round }
.hkmap-arc.dash { stroke-dasharray:2 8; opacity:.7; animation:hkmap-flow 3.2s linear infinite }
@keyframes hkmap-flow { to { stroke-dashoffset:-100 } }
.hkmap-node { cursor:pointer; outline:none }
.hkmap-node:focus-visible .hkmap-halo { opacity:.34 }
.hkmap-halo { opacity:.16; transition:opacity .18s ease }
.hkmap-node:hover .hkmap-halo { opacity:.34 }
.hkmap-chip rect { fill:var(--white); stroke:var(--border); opacity:.94 }
.hkmap-chip-name { font-size:11px; font-weight:800; letter-spacing:.13em; fill:var(--ink) }
.hkmap-chip-code { font-size:9px; font-weight:800; letter-spacing:.08em; fill:var(--muted) }
[data-theme="dark"] .hkmap-chip rect { fill:var(--white); stroke:var(--border2); opacity:.9 }
@media (prefers-reduced-motion: reduce) {
  .hkmap-arc.dash { animation:none }
  .hkmap-node circle animate { display:none }
}

/* ══════════════════════════════════════════════════════════
   MARKET INTELLIGENCE
══════════════════════════════════════════════════════════ */
.market-list { display:flex; flex-direction:column; gap:8px }
.market-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  transition:all var(--tr);
}
.market-item:hover { background:var(--bg) }
.market-ico {
  width:32px; height:32px; border-radius:9px;
  background:var(--teal3); display:grid; place-items:center;
  font-size:13px; flex-shrink:0;
}
.market-name { font-size:12px; font-weight:700; color:var(--ink) }
.market-sub  { font-size:10px; color:var(--muted) }
.market-chart-mini { flex:1; height:32px }
.market-status {
  font-size:10px; font-weight:800; padding:3px 10px;
  border-radius:999px; flex-shrink:0;
}
.ms-bull { background:var(--green2); color:var(--green) }
.ms-bear { background:var(--red2);   color:var(--red) }
.ms-neu  { background:var(--amber2); color:var(--amber) }

/* ══════════════════════════════════════════════════════════
   GEOPOLITICAL
══════════════════════════════════════════════════════════ */
.geo-regions {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:6px; margin-bottom:12px;
}
.geo-region {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px; border-radius:7px;
  border:1px solid var(--border); font-size:11px;
}
.geo-region-name { font-weight:600; color:var(--ink) }
.geo-badge {
  font-size:9px; font-weight:800; padding:2px 7px;
  border-radius:999px;
}
.gb-on  { background:var(--green2); color:var(--green) }
.gb-off { background:var(--red2);   color:var(--red) }
.gb-neu { background:var(--amber2); color:var(--amber) }

.geo-events { display:flex; flex-direction:column; gap:6px }
.geo-event {
  padding:8px 10px; border-radius:9px;
  border-left:3px solid var(--border);
  border:1px solid var(--border);
  transition:background var(--tr);
}
.geo-event:hover { background:var(--bg) }
.geo-event-header { display:flex; align-items:center; gap:6px; margin-bottom:3px }
.geo-event-title  { font-size:11px; font-weight:600; color:var(--ink); flex:1 }
.geo-event-meta   { font-size:10px; color:var(--muted); display:flex; gap:8px }
.geo-event-impact { font-size:10px; font-weight:700; color:var(--teal) }
.geo-region-tag {
  font-size:9px; font-weight:800; padding:1px 6px;
  border-radius:4px; background:var(--blue2); color:var(--blue);
}

/* Geopolitica Inteligente */
.geo-page{display:flex;flex-direction:column;gap:12px;color:var(--ink);min-height:calc(100vh - 120px)}
.geo-page *{letter-spacing:0}.geo-panel{background:var(--white);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:14px;min-width:0}.geo-title{color:var(--ink);font-size:14px;font-weight:900}.geo-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.geo-panel-head button{height:30px;padding:0 10px;border:1px solid var(--border);border-radius:7px;background:var(--white);color:var(--teal);font-size:11px;font-weight:800}.geo-panel-head button:hover{border-color:var(--teal);background:var(--teal3)}
.geo-main-grid{display:grid;grid-template-columns:minmax(520px,1.05fr) minmax(520px,1.2fr);gap:12px;align-items:stretch}.geo-map-panel{display:flex;flex-direction:column}.geo-map-wrap{position:relative;min-height:360px;border-radius:8px;background:var(--bg);border:1px solid var(--border);overflow:hidden;cursor:pointer}.geo-world-svg{width:100%;height:100%;min-height:360px;display:block}.geo-graticule path{fill:none;stroke:var(--border);stroke-width:.8;opacity:.35}.geo-land path{stroke:rgba(255,255,255,.18);stroke-width:1.1;transition:filter .18s,opacity .18s}.geo-land.high path{fill:var(--red);opacity:.88}.geo-land.attention path{fill:var(--amber);opacity:.82}.geo-land.low path{fill:var(--green);opacity:.74}.geo-land.very-low path{fill:var(--muted);opacity:.38}.geo-borders path{fill:none;stroke:var(--border2);stroke-width:1;opacity:.5}
.geo-hotspots g{cursor:pointer;outline:none}.geo-hotspots circle{fill:var(--white);stroke:var(--teal);stroke-width:3;filter:url(#geo-glow)}.geo-hotspots text{fill:var(--ink);font-size:13px;font-weight:900;paint-order:stroke;stroke:var(--white);stroke-width:4px;stroke-linejoin:round}.geo-hotspots g:hover circle{stroke:var(--green);transform:scale(1.1);transform-origin:center}.geo-hotspots g:hover text{fill:var(--teal)}
.geo-map-legend{position:absolute;left:16px;bottom:14px;display:flex;flex-direction:column;gap:9px}.geo-map-legend span,.geo-mini-legend span{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:12px;font-weight:700}.geo-map-legend i,.geo-mini-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}.geo-map-legend .h{background:var(--red)}.geo-map-legend .a{background:var(--amber)}.geo-map-legend .l{background:var(--green)}.geo-map-legend .v{background:var(--muted)}
.geo-event-list{display:flex;flex-direction:column}.geo-event-row{display:grid;grid-template-columns:38px 50px minmax(210px,1fr) minmax(180px,.8fr) 86px;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);cursor:pointer}.geo-event-row:last-child{border-bottom:0}.geo-event-row:hover{background:var(--bg)}.geo-rank{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:900}.geo-event-row.high .geo-rank{background:var(--red)}.geo-event-row.attention .geo-rank{background:var(--amber)}.geo-event-row.low .geo-rank{background:var(--green)}.geo-event-time{color:var(--ink);font-size:12px;font-weight:800}.geo-event-time small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.geo-event-body h3{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:14px;margin-bottom:7px}.geo-event-body em{padding:3px 7px;border-radius:6px;background:var(--bg);font-size:10px;text-transform:uppercase;font-style:normal;color:var(--red)}.geo-event-row.attention .geo-event-body em{color:var(--amber)}.geo-event-row.low .geo-event-body em{color:var(--green)}.geo-event-body p{color:var(--text);font-size:12px;line-height:1.45}.geo-impact{display:flex;flex-direction:column;gap:5px;border-left:1px solid var(--border);padding-left:14px}.geo-impact b{color:var(--muted);font-size:10px;text-transform:uppercase}.geo-impact span{display:flex;justify-content:space-between;gap:8px;color:var(--ink);font-size:12px}.geo-impact i{font-style:normal;font-weight:900}.geo-conf{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin-left:auto;background:radial-gradient(var(--white) 55%,transparent 57%),conic-gradient(var(--green) 0 87%,var(--border) 87%)}.geo-conf b{color:var(--ink);font-size:16px}.geo-conf.c74{background:radial-gradient(var(--white) 55%,transparent 57%),conic-gradient(var(--amber) 0 74%,var(--border) 74%)}.geo-conf.c68{background:radial-gradient(var(--white) 55%,transparent 57%),conic-gradient(var(--amber) 0 68%,var(--border) 68%)}.geo-conf.c22{background:radial-gradient(var(--white) 55%,transparent 57%),conic-gradient(var(--green) 0 22%,var(--border) 22%)}
.geo-mid-grid{display:grid;grid-template-columns:1fr 1.15fr 1.15fr;gap:12px}.geo-impact-table,.geo-risk-rank{display:flex;flex-direction:column}.geo-impact-table>div,.geo-risk-rank>div{display:grid;align-items:center;gap:10px;min-height:34px;border-bottom:1px solid var(--border);font-size:12px}.geo-impact-table>div{grid-template-columns:1.35fr repeat(5,.68fr)}.geo-impact-table .head,.geo-risk-rank .head{color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:900}.geo-impact-table div:not(.head),.geo-risk-rank div:not(.head),.geo-sensitive div{cursor:pointer}.geo-impact-table div:not(.head):hover,.geo-risk-rank div:not(.head):hover,.geo-sensitive div:hover{background:var(--bg)}.geo-impact-table b{font-weight:800}.geo-mini-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;color:var(--muted);font-size:11px}
.geo-timeline{display:flex;flex-direction:column}.geo-timeline div{display:grid;grid-template-columns:48px 15px 1fr 88px;gap:9px;align-items:start;min-height:34px;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer}.geo-timeline div:hover{background:var(--bg)}.geo-timeline b{color:var(--ink)}.geo-timeline i{width:10px;height:10px;border-radius:50%;margin-top:3px;background:var(--green);box-shadow:0 0 0 4px var(--green2)}.geo-timeline i.h{background:var(--red);box-shadow:0 0 0 4px var(--red2)}.geo-timeline i.a{background:var(--amber);box-shadow:0 0 0 4px var(--amber2)}.geo-timeline span{color:var(--text);line-height:1.35}.geo-timeline em{color:var(--muted);text-align:right;font-size:11px;font-style:normal}
.geo-ai article{padding:12px 0;border-bottom:1px solid var(--border)}.geo-ai article:last-child{border-bottom:0}.geo-ai h3{font-size:13px;color:var(--red);margin-bottom:7px}.geo-ai article:nth-child(3) h3{color:var(--blue)}.geo-ai p{color:var(--text);font-size:12px;line-height:1.6}
.geo-bottom-grid{display:grid;grid-template-columns:.8fr 1.1fr 1.3fr;gap:12px}.geo-risk-rank>div{grid-template-columns:70px 1fr 80px 60px}.geo-risk-rank b{font-size:16px;color:var(--ink)}.geo-risk-rank em{font-size:18px;font-style:normal;font-weight:900;color:var(--amber)}
.geo-sensitive{display:flex;flex-direction:column}.geo-sensitive div{display:grid;grid-template-columns:1.2fr 48px minmax(90px,.8fr) 1fr;gap:10px;align-items:center;min-height:35px;border-bottom:1px solid var(--border);font-size:12px}.geo-sensitive b{color:var(--ink)}.geo-sensitive span{font-weight:900;color:var(--ink)}.geo-sensitive i{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--c),var(--c));position:relative}.geo-sensitive i::after{content:"";position:absolute;left:100%;right:0;height:100%;background:var(--border)}.geo-sensitive em{color:var(--muted);font-size:11px;font-style:normal}
.geo-scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.geo-scenarios article{border:1px solid var(--border);border-radius:8px;padding:12px;background:var(--bg);cursor:pointer}.geo-scenarios article:hover{border-color:var(--teal)}.geo-scenarios h3{font-size:13px;color:var(--ink);margin-bottom:6px}.geo-scenarios span{color:var(--muted);font-size:11px}.geo-scenarios b{display:block;color:var(--ink);font-size:24px;margin:4px 0 8px}.geo-scenarios p{color:var(--text);font-size:11px;line-height:1.45}.geo-scenarios .base{border-color:color-mix(in srgb,var(--green) 34%,var(--border))}.geo-scenarios .positive{border-color:color-mix(in srgb,var(--amber) 34%,var(--border))}.geo-scenarios .negative{border-color:color-mix(in srgb,var(--red) 34%,var(--border))}
.spark{height:38px;margin:8px 0;background:linear-gradient(150deg,transparent 0 12%,var(--green) 12% 14%,transparent 14% 27%,var(--green) 27% 29%,transparent 29% 44%,var(--green) 44% 46%,transparent 46% 64%,var(--green) 64% 66%,transparent 66%)}.spark.amber{background:linear-gradient(150deg,transparent 0 12%,var(--amber) 12% 14%,transparent 14% 27%,var(--amber) 27% 29%,transparent 29% 44%,var(--amber) 44% 46%,transparent 46% 64%,var(--amber) 64% 66%,transparent 66%)}.spark.down{background:linear-gradient(30deg,transparent 0 12%,var(--red) 12% 14%,transparent 14% 27%,var(--red) 27% 29%,transparent 29% 44%,var(--red) 44% 46%,transparent 46% 64%,var(--red) 64% 66%,transparent 66%)}
.geo-footer{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;padding:4px}.geo-footer span:first-child{display:flex;align-items:center;gap:7px}.geo-footer i{width:8px;height:8px;border-radius:50%;background:var(--green)}
[data-theme="dark"] .geo-hotspots text{stroke:var(--white)}[data-theme="dark"] .geo-map-wrap{background:#07111b}
@media(max-width:1500px){.geo-main-grid,.geo-mid-grid,.geo-bottom-grid{grid-template-columns:1fr}.geo-map-wrap,.geo-world-svg{min-height:330px}}
@media(max-width:900px){.geo-event-row{grid-template-columns:36px 1fr}.geo-event-time,.geo-impact,.geo-conf{grid-column:2}.geo-mid-grid,.geo-bottom-grid{grid-template-columns:1fr}.geo-impact-table{overflow-x:auto}.geo-impact-table>div{min-width:650px}.geo-sensitive div,.geo-timeline div{grid-template-columns:1fr}.geo-scenarios{grid-template-columns:1fr}.geo-footer{flex-direction:column;align-items:flex-start;gap:8px}}

/* ══════════════════════════════════════════════════════════
   PERFORMANCE CALENDAR
══════════════════════════════════════════════════════════ */
.perf-stats-row {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:10px; margin-bottom:16px;
}
.ps-cell { text-align:center }
.ps-val {
  font-size:18px; font-weight:800; color:var(--ink);
  letter-spacing:-.03em;
}
.ps-val.g { color:var(--green) }
.ps-val.r { color:var(--red) }
.ps-val.t { color:var(--teal) }
.ps-lbl {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin-top:2px;
}
.cal-nav-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.cal-month-title { font-size:15px; font-weight:800; color:var(--ink) }
.cal-nav-btns { display:flex; gap:4px }
.cal-nav-btn {
  width:28px; height:28px; border-radius:7px;
  border:1px solid var(--border); background:var(--white);
  font-size:14px; display:grid; place-items:center;
  transition:all var(--tr);
}
.cal-nav-btn:hover { border-color:var(--teal); color:var(--teal) }
.perf-cal-grid {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.cal-day-name {
  text-align:center; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:4px 0;
}
.cal-day {
  border-radius:9px; padding:5px 6px;
  min-height:58px; border:1px solid var(--border);
  cursor:pointer; transition:all var(--tr);
}
.cal-day:hover { border-color:var(--teal) }
.cal-day.empty { border:1px solid transparent; cursor:default }
.cal-day.today { border-color:var(--teal); box-shadow:0 0 0 2px var(--teal4) }
.cal-day.pos { background:var(--green2); border-color:#BBF7D0 }
.cal-day.neg { background:var(--red2);   border-color:#FECACA }
.cal-day-num { font-size:11px; font-weight:600; color:var(--muted) }
.cal-day-pft { font-size:10px; font-weight:800; margin-top:3px }
.cal-day-cnt { font-size:9px; color:var(--muted) }
.cal-day.pos .cal-day-num { color:var(--green) }
.cal-day.neg .cal-day-num { color:var(--red) }
.pos-legend,.neg-legend {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; color:var(--muted);
}
.leg-dot { width:8px; height:8px; border-radius:50% }
.leg-dot.g { background:var(--green) }
.leg-dot.r { background:var(--red) }

/* ══════════════════════════════════════════════════════════
   OPEN POSITIONS TABLE
══════════════════════════════════════════════════════════ */
.pos-table { width:100%; border-collapse:collapse }
.pos-table th {
  text-align:left; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:8px 12px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.pos-table td {
  padding:10px 12px; border-bottom:1px solid var(--border);
  font-size:12px; color:var(--text); vertical-align:middle;
}
.pos-table tr:last-child td { border-bottom:none }
.pos-table tr:hover td { background:var(--bg) }
.pos-type-badge {
  display:inline-block; padding:2px 9px;
  border-radius:999px; font-size:10px; font-weight:800;
}
.ptb-long  { background:var(--green2); color:var(--green) }
.ptb-short { background:var(--red2);   color:var(--red) }
.risk-tag {
  font-size:9px; font-weight:800; padding:2px 7px;
  border-radius:999px;
}
.rt-low  { background:var(--green2); color:var(--green) }
.rt-mid  { background:var(--amber2); color:var(--amber) }
.rt-high { background:var(--red2);   color:var(--red) }

/* ══════════════════════════════════════════════════════════
   PARES MAIS OPERADOS (Donut Premium)
══════════════════════════════════════════════════════════ */
.poa-wrap {
  display:flex; align-items:center; gap:24px;
  padding:6px 0 18px;
}
.poa-donut-box {
  position:relative; width:150px; height:150px; flex-shrink:0;
  filter: drop-shadow(0 6px 16px rgba(15,118,110,.18));
}
.poa-donut-box canvas { transition: transform .25s ease }
.poa-donut-box:hover canvas { transform: scale(1.03) }
.poa-donut-center {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
}
.poa-donut-val { font-size:26px; font-weight:900; color:var(--ink); letter-spacing:-.02em; line-height:1 }
.poa-donut-lbl { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:4px }

.poa-legend { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0 }
.poa-leg-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 6px; border-radius:9px; cursor:default;
  transition: background .15s;
}
.poa-leg-item:hover { background: var(--bg) }
.poa-leg-dot { width:11px; height:11px; border-radius:4px; flex-shrink:0 }
.poa-leg-body { flex:1; min-width:0 }
.poa-leg-sym { font-size:12.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em }
.poa-leg-cnt { font-size:10px; color:var(--muted); margin-top:1px }
.poa-leg-pct { font-size:14px; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; flex-shrink:0 }

/* Stat blocks abaixo do donut */
.poa-stats {
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  padding-top:16px; border-top:1px solid var(--border);
}
.poa-stat {
  padding:12px 14px; border-radius:10px; background:var(--bg);
  border:1px solid var(--border);
}
.poa-stat-label {
  font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin-bottom:6px;
}
.poa-stat-sym { font-size:13px; font-weight:800; color:var(--ink); margin-bottom:2px }
.poa-stat-val { font-size:16px; font-weight:900; letter-spacing:-.02em }
.poa-stat-sub { font-size:10.5px; color:var(--muted); margin-top:1px }
.poa-stat-empty { grid-column:1/-1; text-align:center; font-size:11px; color:var(--muted); padding:1rem }

.adv-metrics-grid {
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
}
@media(max-width:1100px){ .adv-metrics-grid{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:640px){ .adv-metrics-grid{ grid-template-columns:repeat(2,1fr) } }

@media(max-width:680px){
  .poa-wrap { flex-direction:column; align-items:stretch }
  .poa-donut-box { align-self:center }
}

/* ══════════════════════════════════════════════════════════
   LOGS
══════════════════════════════════════════════════════════ */
.log-list {
  max-height:420px; overflow-y:auto;
  display:flex; flex-direction:column; gap:3px;
}
.log-list::-webkit-scrollbar { width:4px }
.log-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px }
.log-entry {
  display:flex; gap:10px; padding:6px 10px;
  border-radius:7px; font-size:11px;
  border-left:3px solid;
}
.log-entry.ok   { border-color:var(--green); background:var(--green2); color:#14532D }
.log-entry.warn { border-color:var(--amber); background:var(--amber2); color:#78350F }
.log-entry.err  { border-color:var(--red);   background:var(--red2);   color:#7F1D1D }
.log-entry.info { border-color:var(--blue);  background:var(--blue2);  color:#1E3A8A }
.log-t { font-size:10px; color:inherit; opacity:.7; white-space:nowrap; min-width:56px; font-variant-numeric:tabular-nums }
.log-m { flex:1; line-height:1.4 }

/* ══════════════════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px }
.grid-l2 { display:grid; grid-template-columns:2fr 1fr; gap:16px }
.grid-l3 { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:16px }
.mb-0  { margin-bottom:0 }
.mb-12 { margin-bottom:12px }
.mb-16 { margin-bottom:16px }
.mb-20 { margin-bottom:20px }
.flex  { display:flex }
.flex-center { display:flex; align-items:center }
.gap-8  { gap:8px }
.gap-12 { gap:12px }
.gap-16 { gap:16px }
.text-ink   { color:var(--ink) }
.text-muted { color:var(--muted) }
.text-pos   { color:var(--green) }
.text-neg   { color:var(--red) }
.text-teal  { color:var(--teal) }
.fw-700 { font-weight:700 }
.fw-800 { font-weight:800 }
.fs-10  { font-size:10px }
.fs-11  { font-size:11px }
.fs-12  { font-size:12px }
.fs-13  { font-size:13px }

/* Pills / Badges */
.pill {
  display:inline-flex; align-items:center;
  border-radius:999px; font-size:10px; font-weight:700;
  padding:3px 9px; letter-spacing:.3px;
}
.pill-teal   { background:var(--teal3); color:var(--teal) }
.pill-green  { background:var(--green2); color:var(--green) }
.pill-red    { background:var(--red2); color:var(--red) }
.pill-amber  { background:var(--amber2); color:var(--amber) }
.pill-blue   { background:var(--blue2); color:var(--blue) }
.pill-purple { background:var(--purple2); color:var(--purple) }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 14px; border-radius:9px;
  font-size:12px; font-weight:700;
  transition:all var(--tr); border:1px solid var(--border);
}
.btn-primary { background:var(--teal); color:white; border-color:var(--teal) }
.btn-primary:hover { background:var(--teal2) }
.btn-ghost { background:var(--white); color:var(--text) }
.btn-ghost:hover { background:var(--bg); border-color:var(--teal); color:var(--teal) }
.btn-danger { background:var(--red2); color:var(--red); border-color:#FECACA }
.btn-danger:hover { background:var(--red); color:white }

/* Empty states */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:2.5rem 1rem;
  color:var(--muted); font-size:12px; text-align:center; gap:8px;
}
.empty-icon { font-size:2rem }

/* Inputs */
.inp {
  height:36px; padding:0 12px; border-radius:9px;
  border:1px solid var(--border); background:var(--white);
  font-size:12px; font-weight:500; color:var(--ink);
  outline:none; transition:border-color var(--tr);
}
.inp:focus { border-color:var(--teal); box-shadow:0 0 0 3px var(--teal3) }
.inp-w { width:100% }
select.inp { cursor:pointer }

/* Toggle */
.toggle { position:relative; display:inline-block; width:38px; height:20px }
.toggle input { opacity:0; width:0; height:0 }
.tslider {
  position:absolute; inset:0;
  background:var(--border); border-radius:999px;
  cursor:pointer; transition:background .2s;
}
.tslider::before {
  content:''; position:absolute;
  width:14px; height:14px; left:3px; bottom:3px;
  background:white; border-radius:50%; transition:transform .2s;
}
.toggle input:checked + .tslider { background:var(--teal) }
.toggle input:checked + .tslider::before { transform:translateX(18px) }

/* Toast */
#hk-toast {
  position:fixed; bottom:1.5rem; right:1.5rem;
  padding:10px 16px; border-radius:10px;
  color:white; font-size:12px; font-weight:700;
  opacity:0; transform:translateY(12px);
  transition:all .25s; z-index:9999; pointer-events:none;
  font-family:var(--font);
}

/* Footer */
.app-footer {
  border-top:1px solid var(--border);
  padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:10px; color:var(--muted); font-weight:600;
  letter-spacing:.3px; background:var(--white);
  flex-shrink:0;
}

/* Scrollbar global */
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width:1400px) {
  .kpi-grid { grid-template-columns:repeat(4,1fr) }
}
@media (max-width:1100px) {
  .kpi-grid { grid-template-columns:repeat(3,1fr) }
  .grid-l3  { grid-template-columns:1fr }
  .grid-l2  { grid-template-columns:1fr }
  .grid-3   { grid-template-columns:1fr 1fr }
}
/* ≤1024px: a sidebar vira DRAWER off-canvas p/ liberar a largura toda ao
   conteúdo (evita a sidebar de 240px espremer os cards e causar overflow). */
@media (max-width:1024px) {
  .app-shell, .app-shell.sb-collapsed { grid-template-columns: 1fr }
  :root { --sidebar-w:0px }

  .sidebar {
    display: flex;
    position: fixed;
    top: 28px; left: 0; bottom: 0;
    width: min(84vw, 290px);
    z-index: 260;
    transform: translateX(-100%);
    transition: transform .26s ease;
    box-shadow: var(--shadow-md);
    padding: 12px;
  }
  .app-shell.sb-open .sidebar { transform: translateX(0) }
  /* No drawer sempre mostra rótulos, mesmo se sb-collapsed estava ligado */
  .app-shell.sb-collapsed .sidebar { padding: 12px }
  .app-shell.sb-collapsed .nav-lbl,
  .app-shell.sb-collapsed .sb-section-title,
  .app-shell.sb-collapsed .sb-profile-txt,
  .app-shell.sb-collapsed .nav-badge,
  .app-shell.sb-collapsed .sb-community { opacity:1; width:auto; display:flex; pointer-events:auto }

  .sb-backdrop {
    display: block;
    position: fixed; inset: 28px 0 0 0;
    background: rgba(11,15,20,.5);
    opacity: 0; visibility: hidden;
    transition: opacity .26s ease, visibility .26s ease;
    z-index: 250;
  }
  .app-shell.sb-open .sb-backdrop { opacity:1; visibility:visible }

  .topbar { padding: 0 12px 0 0 }
  .topbar-brand { width: auto; border-right: none; padding: 0 10px }
  .tb-toggle-btn { display: inline-flex }
  .app-shell.sb-collapsed .tb-toggle-btn svg { transform: none }
}

/* ≤768px: grades empilham e o topbar compacta os textos */
@media (max-width:768px) {
  .brand-sub { display: none }
  .brand-name { font-size: 15px }
  .topbar-page-sub { display: none }
  .topbar-page-title { font-size: 13px }
  .tb-time, .tb-cycle { display: none }
  .main-content { padding: 12px }
  .kpi-grid { grid-template-columns: repeat(2,1fr) }
  .grid-2, .grid-3, .grid-l2, .grid-l3 { grid-template-columns: 1fr }
  .perf-stats-row { grid-template-columns: repeat(3,1fr) }
  .equity-metrics { grid-template-columns: repeat(2,1fr) }
}

@media (max-width:480px) {
  .kpi-grid { grid-template-columns: 1fr }
  .topbar-page-title { display: none }
  .topbar-status { padding: 4px 9px; font-size: 9px }
  .tb-btn, .tb-icon-btn { width: 30px; height: 30px }
  .equity-metrics { grid-template-columns: repeat(2,1fr) }
  .main-content { padding: 10px }
}

/* ── Redes de segurança responsivas (sempre ativas) ── */
.main-content img, .main-content canvas, .main-content svg,
.main-content video, .main-content iframe { max-width: 100% }
.grid-2 > *, .grid-3 > *, .grid-l2 > *, .grid-l3 > *,
.kpi-grid > *, .mkt-grid-3 > * { min-width: 0 }

/* ══════════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════════ */
@keyframes fade-up {
  from { opacity:0; transform:translateY(12px) }
  to   { opacity:1; transform:translateY(0) }
}
.fade-up { animation:fade-up .35s ease forwards }

@keyframes count-up {
  from { opacity:0 }
  to   { opacity:1 }
}

/* Skeleton loader */
.skeleton {
  background:linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:6px;
}
@keyframes shimmer {
  0%   { background-position:200% 0 }
  100% { background-position:-200% 0 }
}
.sk-line { height:12px; margin-bottom:6px }
.sk-val  { height:24px; width:60%; margin-bottom:4px }

/* Economic Calendar Premium */
.econ-page{--ec-bg:#07131f;--ec-panel:#0b1b29;--ec-border:#183247;--ec-text:#f8fafc;--ec-muted:#91a6ba;--ec-green:#22c55e;--ec-red:#ef4444;--ec-amber:#f59e0b;--ec-blue:#38bdf8;display:flex;flex-direction:column;gap:14px;min-height:calc(100vh - 120px);padding:2px;color:var(--ec-text)}
.econ-page *{letter-spacing:0}
.econ-hero,.econ-panel{background:radial-gradient(circle at top left,rgba(56,189,248,.09),transparent 32%),linear-gradient(180deg,rgba(14,34,51,.94),rgba(7,19,31,.98));border:1px solid var(--ec-border);box-shadow:0 18px 46px rgba(0,0,0,.24)}
.econ-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:8px;padding:18px 20px}
.econ-eyebrow{color:var(--ec-muted);font-size:11px;font-weight:700;text-transform:uppercase}.econ-hero h2{margin:4px 0;font-size:28px;line-height:1.08;color:var(--ec-text)}.econ-hero p{color:var(--ec-muted);max-width:780px;font-size:13px}.econ-hero-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.econ-live{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;color:#86efac;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);text-transform:uppercase;font-size:11px;font-weight:800}.econ-live span{width:8px;height:8px;border-radius:50%;background:var(--ec-green)}.econ-clock{color:var(--ec-muted);font-size:12px;font-weight:700}
.econ-grid-main{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(260px,1fr);gap:12px}.econ-grid-mid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,.85fr) minmax(240px,.7fr);gap:12px}.econ-grid-bottom{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(330px,.9fr);gap:12px}
.econ-panel{border-radius:8px;padding:16px;min-width:0}.econ-section-title{margin-bottom:14px;color:var(--ec-text);font-size:12px;font-weight:900;text-transform:uppercase}
.econ-event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.econ-event-card{min-height:210px;padding:14px;border:1px solid var(--ec-border);border-radius:8px;background:linear-gradient(180deg,rgba(12,31,46,.95),rgba(7,19,31,.9))}
.econ-badge{display:inline-flex;height:24px;align-items:center;padding:0 9px;border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase}.econ-badge.danger{color:#fca5a5;background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.35)}
/* Sistema de cores por importância (Fase 2) — accent sutil estilo Bloomberg */
.econ-badge.high{color:#b91c1c;background:rgba(239,68,68,.13);border:1px solid rgba(239,68,68,.4)}
.econ-badge.mid{color:#a16207;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.45)}
.econ-badge.low{color:#15803d;background:rgba(22,163,74,.13);border:1px solid rgba(22,163,74,.4)}
.econ-event-card.ec-high{border-color:rgba(239,68,68,.42);box-shadow:inset 4px 0 0 var(--red)}
.econ-event-card.ec-mid{border-color:rgba(245,158,11,.45);box-shadow:inset 4px 0 0 var(--amber)}
.econ-event-card.ec-low{border-color:rgba(22,163,74,.4);box-shadow:inset 4px 0 0 var(--green)}
[data-theme="dark"] .econ-badge.high{color:#fca5a5}
[data-theme="dark"] .econ-badge.mid{color:#fcd34d}
[data-theme="dark"] .econ-badge.low{color:#86efac}
/* Data do evento no card (Hoje / Amanhã / dd/mm) */
.econ-event-time em.econ-date{font-style:normal;font-size:11px;font-weight:800;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px 8px;margin-left:2px;letter-spacing:.02em}
/* Contagem regressiva por evento (Fase 3) */
.econ-countdown{display:inline-block;margin:0 0 10px;padding:3px 11px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.02em;background:var(--bg);border:1px solid var(--border);color:var(--muted)}
.econ-countdown.live{color:var(--amber);border-color:var(--amber);background:var(--amber2);animation:econ-cd-pulse 1.4s ease-in-out infinite}
.econ-countdown.ended{opacity:.55}
@keyframes econ-cd-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.econ-event-time{display:flex;align-items:center;gap:8px;margin:16px 0 10px;font-size:24px;font-weight:900;color:white}.econ-event-card h3{color:white;font-size:14px;line-height:1.35;margin-bottom:6px}.econ-event-card p{color:var(--ec-muted);font-size:12px;margin-bottom:16px}
.econ-impact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--ec-border);padding-top:14px}.econ-impact-row div,.econ-volatility{border:1px solid var(--ec-border);border-radius:7px;min-height:52px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:rgba(8,19,31,.55)}.econ-impact-row b{color:#dbeafe;font-size:11px;text-transform:uppercase}.up{color:var(--ec-green)!important}.down{color:var(--ec-red)!important}.econ-volatility{margin-top:36px;color:#ff6b5f;font-size:12px;font-weight:900;text-transform:uppercase}
.econ-risk h3{color:var(--ec-red);font-size:20px;text-transform:uppercase;margin-bottom:4px}.econ-risk p{color:var(--ec-muted);font-size:12px}.risk-gauge{position:relative;height:112px;margin:16px auto 10px;max-width:190px;overflow:hidden}.risk-gauge::before{content:"";position:absolute;inset:0 0 auto;height:190px;border-radius:190px 190px 0 0;background:conic-gradient(from 270deg,var(--ec-green) 0 58deg,var(--ec-amber) 58deg 116deg,var(--ec-red) 116deg 180deg,transparent 180deg 360deg)}.risk-gauge::after{content:"";position:absolute;left:24px;right:24px;bottom:-78px;height:142px;border-radius:142px 142px 0 0;background:#07131f}.risk-gauge span{position:absolute;z-index:2;left:50%;bottom:14px;width:54px;height:4px;border-radius:999px;background:white;transform-origin:left center;transform:rotate(-38deg)}.risk-gauge span::after{content:"";position:absolute;left:-7px;top:-5px;width:14px;height:14px;border-radius:50%;background:white}.econ-mini-list{display:flex;flex-direction:column;gap:7px;color:var(--ec-muted);font-size:12px}.econ-mini-list div{color:white;font-weight:800}.econ-mini-list span::before{content:"• ";color:white}
.mode-alert{color:var(--ec-amber);font-size:20px;font-weight:900;text-transform:uppercase}.mode-ring{width:116px;height:116px;margin:16px auto;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle,#08131f 54%,transparent 56%),conic-gradient(var(--ec-amber) 0 82%,rgba(245,158,11,.22) 82% 100%)}.mode-ring b{font-size:30px;line-height:1;color:white}.mode-ring span{color:white;font-size:12px}.mode-note{border:1px solid var(--ec-border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:5px;color:var(--ec-muted);font-size:12px}.mode-note b{color:white}
.econ-table{display:flex;flex-direction:column}.econ-row{display:grid;grid-template-columns:76px minmax(210px,1fr) 90px 90px 90px 70px;align-items:center;min-height:45px;gap:10px;border-bottom:1px solid rgba(24,50,71,.72);color:#dbeafe;font-size:12px}.econ-row.head{min-height:30px;color:var(--ec-muted);font-size:10px;text-transform:uppercase;font-weight:800}.econ-row b{color:white;display:block;font-size:12px}.econ-row small{color:var(--ec-muted);display:block;font-size:10px;margin-top:2px}.econ-row .high{color:var(--ec-red);font-weight:900;text-transform:uppercase}.econ-row .mid{color:var(--ec-amber);font-weight:900;text-transform:uppercase}.econ-row.active{background:rgba(239,68,68,.05)}.econ-link-btn{margin:12px auto 0;display:block;color:var(--ec-green);font-size:12px;font-weight:800}
.asset-impact-list{display:flex;flex-direction:column}.asset-impact-list div{display:grid;grid-template-columns:1fr 64px 1.4fr;gap:8px;align-items:center;min-height:40px;border-bottom:1px solid rgba(24,50,71,.72);font-size:12px}.asset-impact-list b{color:white}.asset-impact-list span{color:var(--ec-green);font-weight:900}.asset-impact-list em{font-style:normal;font-weight:700}
.ai-econ-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}.ai-brain-icon{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;color:#7dd3fc;font-weight:900;border:1px solid rgba(56,189,248,.35);background:rgba(56,189,248,.1)}.ai-econ-head b{display:block;color:white;line-height:1.3}.ai-econ-head span{display:block;color:var(--ec-muted);margin-top:6px;font-size:12px}.ai-econ-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.ai-econ-stats div{background:rgba(8,19,31,.6);border:1px solid var(--ec-border);border-radius:7px;padding:9px}.ai-econ-stats span{display:block;color:var(--ec-muted);font-size:10px;margin-bottom:4px}.ai-econ-stats b{color:white}.ai-econ-stats .high{color:var(--ec-red);text-transform:uppercase}.econ-ai p{color:#cbd5e1;font-size:12px;line-height:1.55;margin-bottom:12px}.confidence-bar{height:5px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;margin-bottom:7px}.confidence-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--ec-green),#86efac)}.econ-ai small{color:white;font-weight:800}
.week-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.week-cards>div{min-height:138px;border:1px solid var(--ec-border);border-radius:8px;padding:12px;background:rgba(8,19,31,.58)}.week-cards b{display:block;color:white;text-transform:uppercase;font-size:12px;margin-bottom:12px}.week-cards span{display:flex;justify-content:space-between;gap:8px;color:#dbeafe;font-size:11px;padding:7px 0;border-bottom:1px solid rgba(24,50,71,.6)}.week-cards em{color:var(--ec-red);font-style:normal;font-weight:900;text-transform:uppercase}.week-cards em.mid{color:var(--ec-amber)}
.econ-filters{display:grid;grid-template-columns:1fr 1fr;gap:13px}.filter-block{min-width:0}.filter-block.wide{grid-column:1/-1}.filter-block label{display:block;color:var(--ec-muted);font-size:11px;font-weight:800;margin-bottom:7px}.filter-block select{width:100%;height:38px;border-radius:7px;border:1px solid var(--ec-border);color:white;background:#0a1a28;padding:0 10px}.impact-checks,.session-tabs{display:flex;gap:8px;flex-wrap:wrap}.impact-checks span,.session-tabs button{min-height:32px;padding:8px 10px;border-radius:7px;border:1px solid var(--ec-border);color:var(--ec-muted);font-size:12px;font-weight:800}.impact-checks .on.red{color:#fecaca;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12)}.impact-checks .on.amber{color:#fde68a;border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12)}.session-tabs button.active{color:#86efac;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)}.econ-toggle{grid-column:1/-1;display:flex;align-items:center;gap:10px;color:var(--ec-muted);font-size:12px}.econ-toggle span{width:34px;height:18px;border-radius:999px;background:var(--ec-green);position:relative}.econ-toggle span::after{content:"";position:absolute;width:14px;height:14px;right:2px;top:2px;border-radius:50%;background:white}
.econ-source-line{grid-column:1/-1;color:var(--muted);font-size:11px}
@media(max-width:1400px){.econ-grid-main,.econ-grid-mid,.econ-grid-bottom{grid-template-columns:1fr}.econ-event-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.econ-hero{flex-direction:column;align-items:flex-start}.econ-event-grid,.week-cards{grid-template-columns:1fr}.econ-row{grid-template-columns:64px minmax(160px,1fr) 72px 72px 72px 56px;overflow-x:auto}.asset-impact-list div{grid-template-columns:1fr 54px 1.2fr}.econ-filters{grid-template-columns:1fr}}

/* Economic Calendar theme integration */
.econ-page{--ec-bg:var(--bg);--ec-panel:var(--white);--ec-border:var(--border);--ec-text:var(--ink);--ec-muted:var(--muted);--ec-green:var(--green);--ec-red:var(--red);--ec-amber:var(--amber);--ec-blue:var(--blue)}
.econ-hero,.econ-panel{background:var(--white);border-color:var(--border);box-shadow:var(--shadow)}
.econ-hero h2,.econ-section-title,.econ-event-time,.econ-event-card h3,.econ-mini-list div,.mode-note b,.econ-row b,.asset-impact-list b,.ai-econ-head b,.ai-econ-stats b,.week-cards b{color:var(--ink)}
.econ-eyebrow,.econ-hero p,.econ-clock,.econ-event-card p,.econ-risk p,.econ-mini-list,.mode-note,.econ-row.head,.econ-row small,.ai-econ-head span,.ai-econ-stats span,.week-cards span,.filter-block label,.impact-checks span,.session-tabs button,.econ-toggle{color:var(--muted)}
.econ-event-card,.econ-impact-row div,.econ-volatility,.mode-note,.ai-econ-stats div,.week-cards>div{background:var(--bg);border-color:var(--border)}
.econ-row,.asset-impact-list div,.week-cards span{border-bottom-color:var(--border)}
.filter-block select{background:var(--white);border-color:var(--border);color:var(--ink)}
.risk-gauge::after{background:var(--white)}
.econ-event-card,.econ-risk,.econ-mode,.asset-impact-list div,.econ-row,.week-cards>div,.session-tabs button,.impact-checks span,.econ-toggle{cursor:pointer}
.econ-event-card:hover,.econ-row:hover,.asset-impact-list div:hover,.week-cards>div:hover,.session-tabs button:hover,.impact-checks span:hover{border-color:var(--teal);box-shadow:0 10px 24px rgba(14,90,85,.12)}
[data-theme="dark"] .econ-page{--ec-bg:var(--bg);--ec-panel:var(--white);--ec-border:var(--border);--ec-text:var(--ink);--ec-muted:var(--muted);--ec-green:var(--green);--ec-red:var(--red);--ec-amber:var(--amber);--ec-blue:var(--blue)}
[data-theme="dark"] .econ-hero,[data-theme="dark"] .econ-panel{background:linear-gradient(180deg,var(--white),#0b1520);border-color:var(--border)}
[data-theme="dark"] .econ-event-card,[data-theme="dark"] .econ-impact-row div,[data-theme="dark"] .mode-note,[data-theme="dark"] .ai-econ-stats div,[data-theme="dark"] .week-cards>div{background:var(--bg);border-color:var(--border)}
[data-theme="dark"] .risk-gauge::after{background:var(--white)}
[data-theme="dark"] .filter-block select{background:var(--bg);color:var(--ink)}

/* Economic Calendar color contrast fixes */
.econ-badge.danger{color:var(--red);background:var(--red2);border-color:color-mix(in srgb,var(--red) 42%,transparent)}
.econ-volatility{color:var(--red);background:var(--red2)!important;border-color:color-mix(in srgb,var(--red) 35%,var(--border))!important}
.econ-impact-row b,.mode-ring b,.mode-ring span,.econ-mini-list span::before,.econ-ai small{color:var(--ink)}
.risk-gauge span,.risk-gauge span::after{background:var(--ink)}
.mode-ring{background:radial-gradient(circle,var(--white) 54%,transparent 56%),conic-gradient(var(--amber) 0 82%,var(--amber2) 82% 100%)}
.econ-row .high,.ai-econ-stats .high,.week-cards em,.down{color:var(--red)!important}
.econ-row .mid,.week-cards em.mid,.mode-alert{color:var(--amber)!important}
.asset-impact-list span,.up,.econ-link-btn,.confidence-bar span{color:var(--green)!important}
.confidence-bar span{background:linear-gradient(90deg,var(--green),color-mix(in srgb,var(--green) 55%,white))}
.ai-brain-icon{color:var(--blue);background:var(--blue2);border-color:color-mix(in srgb,var(--blue) 35%,var(--border))}
.impact-checks .on.red{color:var(--red);background:var(--red2);border-color:color-mix(in srgb,var(--red) 35%,var(--border))}
.impact-checks .on.amber{color:var(--amber);background:var(--amber2);border-color:color-mix(in srgb,var(--amber) 35%,var(--border))}
.session-tabs button.active{color:var(--green);background:var(--green2);border-color:color-mix(in srgb,var(--green) 35%,var(--border))}
.econ-live{color:var(--green);background:var(--green2);border-color:color-mix(in srgb,var(--green) 35%,var(--border))}
.econ-live span,.econ-toggle span{background:var(--green)}
[data-theme="dark"] .econ-badge.danger{color:#fecaca}
[data-theme="dark"] .econ-volatility{background:rgba(239,68,68,.12)!important}
[data-theme="dark"] .econ-impact-row b,[data-theme="dark"] .mode-ring b,[data-theme="dark"] .mode-ring span,[data-theme="dark"] .econ-mini-list span::before,[data-theme="dark"] .econ-ai small{color:var(--ink)}

/* IA Scanner */
.scan-page{display:flex;flex-direction:column;gap:12px;color:var(--ink);min-height:calc(100vh - 120px)}
.scan-page *{letter-spacing:0}
.scan-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scan-tabs{display:flex;gap:8px;flex-wrap:wrap}
.scan-tabs button,.scan-btn,.scan-search{height:38px;border-radius:8px;border:1px solid var(--border);background:var(--white);color:var(--text);font-size:12px;font-weight:700}
.scan-tabs button,.scan-btn{padding:0 14px}
.scan-tabs button.active,.scan-tabs button:hover,.scan-btn:hover{color:var(--teal);border-color:var(--teal);background:var(--teal3)}
.scan-btn.primary{margin-left:auto;color:var(--green);border-color:color-mix(in srgb,var(--green) 42%,var(--border));background:var(--green2)}
.scan-search{display:flex;align-items:center;gap:8px;min-width:260px;padding:0 12px}
.scan-search span{color:var(--muted);font-size:16px}.scan-search input{border:0;outline:0;background:transparent;color:var(--ink);width:100%;font-size:12px}
.scan-kpis{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:10px}
.scan-kpi,.scan-panel{background:var(--white);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow)}
.scan-kpi{position:relative;min-height:88px;padding:14px;overflow:hidden}.scan-kpi span,.scan-kpi small{display:block;color:var(--muted);font-size:11px}.scan-kpi span{text-transform:uppercase;font-weight:800}.scan-kpi b{display:block;margin:8px 0 2px;color:var(--green);font-size:26px;line-height:1;font-weight:900}.scan-kpi small{font-weight:700}.scan-kpi .up{color:var(--green)}
.scan-algos i{position:absolute;right:15px;top:30px;width:40px;height:40px;border-radius:50%;border:6px solid var(--green);border-left-color:var(--border)}
.scan-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(390px,.9fr);gap:12px;align-items:start}
.scan-panel{padding:14px;min-width:0}.scan-title{margin-bottom:14px;color:var(--ink);font-size:12px;font-weight:900;text-transform:uppercase}
.scan-table-wrap{overflow-x:auto}.scan-table{width:100%;border-collapse:collapse;font-size:12px}.scan-table th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;padding:0 8px 10px;border-bottom:1px solid var(--border)}.scan-table td{padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:middle}.scan-table tbody tr{cursor:pointer}.scan-table tbody tr:hover td{background:var(--bg)}
.scan-asset{display:flex;align-items:center;gap:8px;font-weight:900;color:var(--ink)}.scan-asset i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--border);font-size:11px;font-style:normal}
.scan-table mark,.scan-detail mark,.scan-recent em{display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:6px;font-size:10px;font-weight:900;text-transform:uppercase;font-style:normal}
.scan-table .buy,.scan-detail .buy,.scan-recent .buy{color:var(--green);background:var(--green2)}.scan-table .sell,.scan-recent .sell{color:var(--red);background:var(--red2)}.scan-table .neutral{color:var(--amber);background:var(--amber2)}
.score{display:inline-flex;min-width:28px;justify-content:center;padding:4px 7px;border-radius:7px;background:var(--green2);color:var(--green);font-weight:900;font-style:normal}.score.low{background:var(--bg);color:var(--muted)}
.strength{display:inline-block;width:41px;height:6px;color:var(--green)}.strength::before{content:"";display:block;width:8px;height:6px;border-radius:2px;background:currentColor;box-shadow:11px 0 currentColor,22px 0 var(--border),33px 0 var(--border)}.strength.good{color:var(--green)}.strength.warn{color:var(--amber)}.strength.bad{color:var(--red)}.strength.s4::before{box-shadow:11px 0 currentColor,22px 0 currentColor,33px 0 currentColor}.strength.s3::before{box-shadow:11px 0 currentColor,22px 0 currentColor,33px 0 var(--border)}.strength.s2::before{box-shadow:11px 0 currentColor,22px 0 var(--border),33px 0 var(--border)}
.scan-table button{height:28px;padding:0 11px;border:1px solid var(--border);border-radius:999px;background:var(--white);color:var(--ink);font-size:11px;font-weight:800}.scan-table button:hover{border-color:var(--teal);color:var(--teal)}
.scan-link{display:block;margin:12px auto 0;color:var(--green);font-size:12px;font-weight:900}
.scan-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.scan-detail-head h3{font-size:19px;color:var(--ink)}.scan-detail-head span{color:var(--muted);font-size:12px}.scan-detail-head mark{margin-left:auto}.scan-medal{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--amber2);border:1px solid color-mix(in srgb,var(--amber) 40%,var(--border))}
.scan-score-row{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;margin-bottom:16px}.scan-ring{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;align-content:center;margin:auto;background:radial-gradient(var(--white) 56%,transparent 58%),conic-gradient(var(--green) 0 82%,var(--border) 82% 100%)}.scan-ring b{display:block;font-size:34px;color:var(--ink);line-height:1}.scan-ring span{text-transform:uppercase;color:var(--muted);font-size:10px;font-weight:800}
.scan-factors{display:flex;flex-direction:column}.scan-factors div{position:relative;display:grid;grid-template-columns:1fr 80px;gap:12px;align-items:center;min-height:29px;border-bottom:1px solid var(--border);font-size:12px}.scan-factors span{color:var(--muted)}.scan-factors b{color:var(--ink)}.scan-factors i{position:absolute;right:0;bottom:-1px;height:4px;border-radius:999px;background:var(--green)}
.scan-price-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:10px 0 16px}.scan-price-grid div{padding:12px 8px;border-right:1px solid var(--border)}.scan-price-grid div:last-child{border-right:0}.scan-price-grid span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800}.scan-price-grid b{display:block;margin-top:5px;color:var(--ink);font-size:13px}
.scan-reasons{padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);display:flex;flex-direction:column;gap:7px;margin-bottom:12px}.scan-reasons b{font-size:11px;text-transform:uppercase}.scan-reasons span{color:var(--text);font-size:12px;line-height:1.35}.scan-reasons span::before{content:"• ";color:var(--ink)}
.scan-chart-box{min-height:200px;padding-top:6px}.scan-lines{position:relative;height:150px;border-left:1px solid var(--border);border-bottom:1px solid var(--border);background:repeating-linear-gradient(to bottom,transparent,transparent 29px,var(--border) 30px)}.scan-lines span{position:absolute;left:2%;right:2%;height:70%;bottom:16px;border-radius:50%;opacity:.95}.scan-lines .price{background:linear-gradient(135deg,transparent 0 12%,var(--green) 12% 14%,transparent 14% 27%,var(--green) 27% 29%,transparent 29% 42%,var(--green) 42% 44%,transparent 44% 58%,var(--green) 58% 60%,transparent 60%)}.scan-lines .ai{background:linear-gradient(155deg,transparent 0 10%,var(--blue) 10% 12%,transparent 12% 24%,var(--blue) 24% 26%,transparent 26% 38%,var(--blue) 38% 40%,transparent 40% 55%,var(--blue) 55% 57%,transparent 57%)}
.scan-bottom{display:grid;grid-template-columns:1fr 1.15fr 1fr 1fr;gap:12px}.scan-donut{width:116px;height:116px;border-radius:50%;margin:4px auto 10px;display:grid;place-items:center;text-align:center;background:radial-gradient(var(--white) 48%,transparent 50%),conic-gradient(var(--green) 0 48%,var(--red) 48% 77%,var(--amber) 77% 100%)}.scan-donut b{font-size:20px;line-height:1.15;color:var(--ink)}.scan-legend{display:flex;flex-direction:column;gap:6px}.scan-legend span{font-size:11px;color:var(--muted)}.scan-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.scan-legend .g{background:var(--green)}.scan-legend .r{background:var(--red)}.scan-legend .a{background:var(--amber)}
.scan-bars{height:118px;display:flex;align-items:flex-end;gap:5px;border-bottom:1px solid var(--border);padding:0 10px}.scan-bars i{width:13px;border-radius:3px 3px 0 0;background:var(--c)}.scan-bar-labels{display:flex;justify-content:space-around;color:var(--muted);font-size:10px;margin-top:8px}
.scan-tf{display:flex;flex-direction:column;gap:9px}.scan-tf div{display:grid;grid-template-columns:34px 1fr 55px;gap:8px;align-items:center;color:var(--muted);font-size:11px}.scan-tf i{height:6px;border-radius:999px;background:var(--border);position:relative}.scan-tf i::after{content:"";display:block;height:100%;width:inherit;border-radius:999px;background:var(--green)}.scan-tf b{color:var(--ink);font-size:11px}
.scan-algo-list{display:flex;flex-direction:column;gap:7px}.scan-algo-list span{display:flex;align-items:center;gap:7px;color:var(--text);font-size:11px}.scan-algo-list span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}.scan-algo-list b{margin-left:auto;color:var(--green)}
.scan-recent-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.scan-recent button{min-height:78px;text-align:left;border:1px solid var(--border);border-radius:8px;background:var(--bg);padding:10px;display:grid;grid-template-columns:1fr auto;gap:5px}.scan-recent button:hover{border-color:var(--teal)}.scan-recent b{color:var(--ink);font-size:12px}.scan-recent span{color:var(--muted);font-size:11px;text-align:right}.scan-recent small{grid-column:1/-1;color:var(--muted);font-size:10px}
.scan-footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;padding:4px 4px 0}.scan-footer span:first-child{display:flex;align-items:center;gap:7px}.scan-footer i{width:7px;height:7px;border-radius:50%;background:var(--green)}
[data-theme="dark"] .scan-kpi,[data-theme="dark"] .scan-panel,[data-theme="dark"] .scan-tabs button,[data-theme="dark"] .scan-btn,[data-theme="dark"] .scan-search,[data-theme="dark"] .scan-table button{background:var(--white);border-color:var(--border)}
@media(max-width:1500px){.scan-kpis{grid-template-columns:repeat(4,1fr)}.scan-layout,.scan-bottom{grid-template-columns:1fr}.scan-recent-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.scan-toolbar{align-items:stretch}.scan-tabs,.scan-search,.scan-btn{width:100%}.scan-btn.primary{margin-left:0}.scan-kpis{grid-template-columns:1fr}.scan-score-row{grid-template-columns:1fr}.scan-price-grid{grid-template-columns:1fr 1fr}.scan-recent-grid{grid-template-columns:1fr}.scan-footer{flex-direction:column;align-items:flex-start;gap:8px}}
[data-theme="dark"] .mode-ring{background:radial-gradient(circle,var(--white) 54%,transparent 56%),conic-gradient(var(--amber) 0 82%,rgba(245,158,11,.25) 82% 100%)}
/* Hakan Brasin Brain */
.brain-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:16px;align-items:stretch}
.brain-panel{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px;min-height:0}
.brain-chat-panel{display:flex;flex-direction:column;height:calc(100vh - 145px);min-height:560px}
.brain-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.brain-head.compact{margin-bottom:8px}
.brain-kicker{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}
.brain-head h2,.brain-head h3{margin:0;color:var(--ink);letter-spacing:0}
.brain-head h2{font-size:20px}.brain-head h3{font-size:14px}
.brain-mini-btn,.brain-save-btn,.brain-compose button{border:0;border-radius:8px;background:var(--teal);color:white;font-weight:800;cursor:pointer}
.brain-mini-btn{height:34px;padding:0 12px}.brain-save-btn{width:100%;height:36px;margin-top:8px}
.brain-messages{flex:1;overflow:auto;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px}
.brain-msg{max-width:82%;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.55;color:var(--text)}
.brain-ai{align-self:flex-start;background:var(--card);border:1px solid var(--border)}
.brain-user{align-self:flex-end;background:var(--teal);color:white}
.brain-compose{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:10px;margin-top:12px}
.brain-compose textarea,.brain-input{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:8px;padding:10px;font:inherit;resize:vertical}
.brain-compose button{min-height:44px}
.brain-briefing{font-size:12px;line-height:1.55;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;max-height:260px;overflow:auto}
.brain-news-pulse{display:flex;flex-direction:column;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;max-height:220px;overflow:auto}
.brain-news-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.brain-news-stats span{border:1px solid var(--border);border-radius:8px;padding:8px;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800}
.brain-news-stats b{display:block;color:var(--ink);font-size:16px}
.brain-news-item{border-left:3px solid var(--amber);background:var(--card);border-radius:8px;padding:9px;border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.brain-news-item.high{border-left-color:var(--red)}.brain-news-item.low{border-left-color:var(--green)}
.brain-news-item b{display:block;color:var(--ink);font-size:11px;line-height:1.35;margin-bottom:4px}.brain-news-item span{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}
.brain-lessons{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:240px;overflow:auto}
.brain-lesson{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px}
.brain-lesson b{display:block;font-size:12px;color:var(--ink);margin-bottom:4px}.brain-lesson span,.brain-muted{font-size:11px;color:var(--muted);line-height:1.45}
@media(max-width:980px){.brain-grid{grid-template-columns:1fr}.brain-chat-panel{height:auto;min-height:520px}.brain-compose{grid-template-columns:1fr}.brain-msg{max-width:94%}}

/* ==========================================================
   Motores Institucionais (Hakan Brain 3.0)
========================================================== */
.engines-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.eng-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px}
.eng-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.eng-sym{font-weight:800;font-size:13px;color:var(--ink)}
.eng-cons{font-weight:900;font-size:13px;letter-spacing:.3px}
.eng-cons.pos{color:#16A34A}.eng-cons.neg{color:#EF4444}.eng-cons.neu{color:var(--muted)}
.eb-row{display:flex;align-items:center;gap:8px;margin:6px 0}
.eb-name{width:72px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.eb-track{flex:1;height:8px;background:var(--border);border-radius:4px;position:relative;overflow:hidden}
.eb-zero{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--muted);opacity:.5}
.eb-fill{position:absolute;top:0;bottom:0;border-radius:4px}
.eb-fill.pos{background:#16A34A}.eb-fill.neg{background:#EF4444}.eb-fill.neu{background:#94A3B8}
.eb-val{width:36px;text-align:right;font-size:11px;font-weight:800}
.eb-val.pos{color:#16A34A}.eb-val.neg{color:#EF4444}.eb-val.neu{color:var(--muted)}
.eng-vol{margin-top:8px;font-size:10.5px;color:var(--muted)}
.eng-vol b{color:var(--ink)}
.eng-evid{margin-top:8px;font-size:10.5px;color:var(--muted);line-height:1.6;border-top:1px dashed var(--border);padding-top:8px;word-break:break-word}
.regime-chip{font-size:10px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.5px;white-space:nowrap}
.regime-chip.rg-on{background:rgba(22,163,74,.15);color:#16A34A}
.regime-chip.rg-off{background:rgba(239,68,68,.15);color:#EF4444}
.regime-chip.rg-neu{background:rgba(148,163,184,.18);color:#94A3B8}

/* ==========================================================
   HOME INSTITUCIONAL (Hakan|Ai Brain)
========================================================== */
.home-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ht-title{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.ht-sub{font-size:11px;color:var(--muted);margin-top:2px}
.ht-actions{display:flex;gap:8px}

.ops-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.ops-cell{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.ops-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ops-value{font-size:20px;font-weight:800;color:var(--ink);margin-top:6px;letter-spacing:-.02em}
.ops-value.pos{color:#16A34A}.ops-value.neg{color:#EF4444}.ops-value.warn{color:#F59E0B}
.ops-sub{font-size:10.5px;color:var(--muted);margin-top:4px}

.mt5-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.mt5-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}
.mt5-l{color:var(--muted)}
.mt5-v{color:var(--ink);font-weight:700;text-align:right;word-break:break-all}

/* Ícones de ativos */
.ai-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:12px;font-weight:800;flex-shrink:0;color:#fff;letter-spacing:0}
.ai-badge svg{width:15px;height:15px}
.ai-gold{background:linear-gradient(135deg,#F5C518,#B8860B);color:#3B2A00}
.ai-silver{background:linear-gradient(135deg,#E5E7EB,#9CA3AF);color:#374151}
.ai-btc{background:#F7931A;font-size:15px}
.ai-eth{background:#627EEA}
.ai-oil{background:linear-gradient(135deg,#374151,#111827);color:#93C5FD}
.ai-gas{background:linear-gradient(135deg,#0EA5E9,#0369A1)}
.ai-idx{color:#fff}
.ai-ndx{background:linear-gradient(135deg,#2563EB,#1E3A8A)}
.ai-dow{background:linear-gradient(135deg,#0891B2,#155E75)}
.ai-spx{background:linear-gradient(135deg,#7C3AED,#4C1D95)}
.ai-fx{background:linear-gradient(135deg,#059669,#065F46);font-size:11px}
.ai-fx-usd{background:linear-gradient(135deg,#16A34A,#14532D);font-size:11px}
.ai-generic{background:var(--border);color:var(--ink)}

.hm-list{display:flex;flex-direction:column}
.hm-item{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border)}
.hm-item:last-child{border-bottom:none}
.hm-id{flex:1;min-width:0}
.hm-name{font-size:12.5px;font-weight:800;color:var(--ink)}
.hm-sub{font-size:10.5px;color:var(--muted)}
.hm-quote{text-align:right;min-width:100px}
.hm-price{font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-var{font-size:10.5px;font-weight:800}
.hm-var.pos{color:#16A34A}.hm-var.neg{color:#EF4444}.hm-var.neu{color:var(--muted)}
.hm-bias{font-size:10px;font-weight:800;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.hm-bias.pos{background:rgba(22,163,74,.12);color:#16A34A}
.hm-bias.neg{background:rgba(239,68,68,.12);color:#EF4444}
.hm-bias.neu{background:rgba(148,163,184,.15);color:var(--muted)}

.flow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.flow-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px}
.flow-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.flow-sym{font-size:12.5px;font-weight:800;color:var(--ink)}
.flow-cons{font-size:10.5px;font-weight:800;margin-left:auto}
.flow-cons.pos{color:#16A34A}.flow-cons.neg{color:#EF4444}.flow-cons.neu{color:var(--muted)}
.flow-points{font-size:11px;color:var(--muted);line-height:1.7}

.inst-table{width:100%;border-collapse:collapse;font-size:12px}
.inst-table th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:8px 6px;border-bottom:1px solid var(--border)}
.inst-table td{padding:9px 6px;border-bottom:1px solid var(--border);color:var(--ink)}
.inst-table tr:last-child td{border-bottom:none}

.hg-list{display:flex;flex-direction:column;gap:10px}
.hg-item{border:1px solid var(--border);border-radius:10px;padding:11px 12px;background:var(--bg)}
.hg-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.hg-pais{font-size:10.5px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.05em}
.hg-imp{font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;text-transform:uppercase}
.hg-alta{background:rgba(239,68,68,.12);color:#EF4444}
.hg-média,.hg-media{background:rgba(245,158,11,.12);color:#F59E0B}
.hg-baixa{background:rgba(148,163,184,.15);color:var(--muted)}
.hg-conf{margin-left:auto;font-size:10px;font-weight:800;color:var(--teal)}
.hg-title{font-size:12px;font-weight:600;color:var(--ink);line-height:1.45;margin-bottom:5px}
.hg-impacts{font-size:10.5px;color:var(--muted);line-height:1.6;margin-bottom:6px}
.hg-assets{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.hg-asset{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:5px;background:var(--border);color:var(--ink)}
.hg-sent{margin-left:auto;font-size:10px;font-weight:800}
.hg-sent.pos{color:#16A34A}.hg-sent.neg{color:#EF4444}.hg-sent.neu{color:var(--muted)}

.hc-subtitle{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.hc-list{display:flex;flex-direction:column}
.hc-item{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--border);font-size:11.5px}
.hc-item:last-child{border-bottom:none}
.hc-time{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;min-width:38px}
.hc-cur{font-size:9.5px;font-weight:800;background:var(--border);color:var(--ink);padding:2px 6px;border-radius:4px;min-width:32px;text-align:center}
.hc-event{flex:1;min-width:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-imp{font-size:9.5px;font-weight:800}
.hc-imp.neg{color:#EF4444}.hc-imp.warn{color:#F59E0B}.hc-imp.neu{color:var(--muted)}
.hc-trades{font-size:10px;color:var(--muted);font-weight:700}

.ha-list{display:flex;flex-direction:column;gap:9px}
.ha-item{border:1px solid var(--border);border-left-width:3px;border-radius:9px;padding:10px 12px;background:var(--bg)}
.ha-item.ha-critico{border-left-color:#EF4444}
.ha-item.ha-atencao{border-left-color:#F59E0B}
.ha-item.ha-oportunidade{border-left-color:#16A34A}
.ha-item.ha-info{border-left-color:#64748B}
.ha-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ha-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ha-item.ha-critico .ha-tag{color:#EF4444}
.ha-item.ha-atencao .ha-tag{color:#F59E0B}
.ha-item.ha-oportunidade .ha-tag{color:#16A34A}
.ha-hora{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.ha-titulo{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:2px}
.ha-detalhe{font-size:11px;color:var(--muted);line-height:1.5}

/* Filtros de correlação e módulo geopolítico */
.corr-filters{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.cf-group{display:flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:3px}
.cf-btn{border:none;background:transparent;color:var(--muted);font-size:11px;font-weight:700;padding:5px 12px;border-radius:7px;cursor:pointer;transition:all .15s}
.cf-btn:hover{color:var(--ink)}
.cf-btn.active{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.cf-custom{display:flex;gap:8px;align-items:center}
.cf-date,.cf-select{background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--ink);font-size:11.5px;padding:6px 10px;font-family:inherit}
.corr-summary{display:flex;gap:22px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);padding:9px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:10px}
.corr-summary b{color:var(--ink)}
.corr-table td{vertical-align:top}
.corr-ops{margin-top:6px;border-left:2px solid var(--border);padding-left:10px}
.corr-op{display:flex;gap:14px;font-size:10.5px;color:var(--muted);padding:2px 0}
.hg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}


/* ══════════════════════════════════════════════════════════════════
   COMPATIBILIDADE HAKAN|AI
   O CSS acima veio do HakanBrain (superconjunto: 967 seletores contra
   320, com as 313 regras base identicas). Destas, 7 diferiam:
   o Brain trocou as cores fixas da faixa de cotacoes por variaveis de
   tema, o que deixaria o ticker claro no tema claro.
   O AI usa ticker escuro fixo. Restaurado abaixo.
   Para adotar o ticker que acompanha o tema, basta apagar este bloco.
   ══════════════════════════════════════════════════════════════════ */
/* 01/09/2026 — a faixa passou a ACOMPANHAR O TEMA, por pedido de
   padronizacao do cabecalho. Era a unica superficie escura fixa do
   painel claro, atravessando todas as telas.
   Para voltar ao ticker escuro fixo, restaure estas seis linhas:
       .ticker  { background:#0B0F14; border-bottom:1px solid #1F2937 }
       .tk-item { border-right:1px solid #1F2937; color:inherit }
       .tk-sym  { color:#5EEAD4 }
       .tk-pos  { color:#4ADE80 }
       .tk-neg  { color:#F87171 }
       .tk-neu  { color:#6B7280 } */
.ticker  { background: var(--bg); border-bottom: 1px solid var(--border) }
.tk-item { border-right: 1px solid var(--border) }
[data-theme="dark"] .tk-sym { color: var(--ink) }
[data-theme="dark"] .tk-pos { color: #6EE7A0 }
[data-theme="dark"] .tk-neg { color: #F79A9A }


/* ══════════════════════════════════════════════════════════════════════
   REFINO VISUAL — 31/08/2026
   ══════════════════════════════════════════════════════════════════════

   ISTO NAO REDESENHA NADA. Nenhuma regra acima foi apagada, nenhuma
   classe mudou de nome, nenhum elemento saiu do HTML. Esta camada so
   reescreve APARENCIA: cor, borda, sombra, raio, peso e espaco.

   Para reverter, apague deste comentario ate o fim do arquivo. A
   interface volta exatamente ao que era.

   O QUE MUDA, e por que:
     · fundo quase branco, superficies brancas         (menos contraste de caixa)
     · bordas mais claras, sombras quase nulas         (o card se separa pelo
                                                        espaco, nao pelo relevo)
     · raio menor                                      (16px parecia app de consumo)
     · verde e vermelho SO em estado                   (nao em decoracao)
     · gradientes de marca viram cor chapada           (avatar e card da sidebar)
     · mais respiro entre blocos
     · numeros grandes, mas com peso menor             (800/900 em corpo grande
                                                        vira painel de cassino)
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:      #FAFAFA;
  --border:  #ECEDEF;
  --border2: #DFE1E4;
  --hover:   #F6F7F8;
  --muted:   #6B7280;

  --r:    12px;
  --r-sm: 9px;
  --r-xs: 6px;

  /* Quase imperceptivel de proposito: a referencia separa superficie do
     fundo pela BORDA e pelo espaco, nao por sombra. */
  --shadow:    0 1px 2px rgba(11,15,20,.04);
  --shadow-md: 0 2px 8px rgba(11,15,20,.06);

  --sidebar-w: 212px;
}

[data-theme="dark"] {
  --bg:      #0A0D11;
  --white:   #101419;
  --border:  #1B2027;
  --border2: #262C34;
  --hover:   #161B21;
  --shadow:    0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,.5);
}

/* ── SUPERFICIES ─────────────────────────────────────────────────── */
.card,
.kpi-card {
  box-shadow: none;
  border-color: var(--border);
}
.card-pad          { padding: 22px 24px }
.kpi-card          { padding: 18px 20px 14px }
.kpi-card:hover    { box-shadow: none; border-color: var(--border2) }
.dec-row.open      { box-shadow: none }

/* ── RESPIRO ─────────────────────────────────────────────────────── */
.card-header       { margin-bottom: 18px }
.dec-wrap          { gap: 16px }
.dec-list          { gap: 8px }

/* ── TIPOGRAFIA ──────────────────────────────────────────────────── */
/* Numero grande com peso 800 e o que da aparencia de terminal. Corpo
   maior + peso menor + tracking negativo le como produto editorial. */
.kpi-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 10px;
}
.kpi-sub     { font-size: 11px }
.card-title  { font-size: 13.5px; font-weight: 650; letter-spacing: -.015em }
.dec-stat b  { font-weight: 650; font-size: 19px }
.dec-sum-title {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
}

/* ── CABECALHO ───────────────────────────────────────────────────── */
.topbar            { box-shadow: none }
.topbar-status     { font-weight: 600; border-color: var(--border) }
/* O pill colorido do status vira texto com um ponto. A cor fica no
   ponto, que ja existe (.status-dot) e ja diz tudo. */
.topbar-status.on,
.topbar-status.warn,
.topbar-status.off { background: transparent; border-color: var(--border) }
.topbar-status.on   { color: var(--green) }
.topbar-status.warn { color: var(--amber) }
.topbar-status.off  { color: var(--red) }

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
.sidebar        { padding: 14px 10px }
.nav-item       { height: 34px; font-size: 12.5px; font-weight: 500; border-radius: 8px }
/* Ativo marcado por peso e cor de texto, nao por caixa colorida. */
.nav-item.active {
  background: var(--hover);
  color: var(--ink);
  font-weight: 650;
  border-color: transparent;
}
.nav-item svg   { width: 15px; height: 15px; opacity: .65 }
.nav-item.active svg { opacity: 1; color: var(--teal) }

/* Gradiente de marca -> cor chapada. Era o elemento mais chamativo da
   tela e nao carrega informacao nenhuma. */
.tb-avatar,
.sb-avatar {
  background: var(--teal);
  border-width: 1px;
  border-color: var(--border);
}
.sb-community {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text);
}
.sb-community * { color: inherit }

/* ── CONTROLES ───────────────────────────────────────────────────── */
.dec-chip        { font-weight: 600; border-color: var(--border) }
.dec-chip.active { background: var(--ink); border-color: var(--ink) }

/* ── GRAFICOS ────────────────────────────────────────────────────── */
/* Sparkline decorativa some. Ela desenha uma serra fixa em CSS que nao
   corresponde a dado nenhum — e ruido com aparencia de informacao. */
.spark { display: none }


/* ══════════════════════════════════════════════════════════════════════
   BLOCO DE INDICADORES — 31/08/2026
   ══════════════════════════════════════════════════════════════════════

   Sete cards tipograficos. Sem grafico, sem gauge, sem animacao.
   A hierarquia e sempre a mesma: rotulo pequeno em caixa alta, numero
   dominante, descricao discreta. O olho encontra o numero primeiro
   porque ele e a unica coisa grande no card.

   O SETIMO E DIFERENTE DOS OUTROS SEIS de proposito. Sete caixas iguais
   nao tem foco: o olhar varre e nao pousa. O Market Score recebe
   superficie escura e vira o ponto de entrada da linha.
   ══════════════════════════════════════════════════════════════════════ */

.kpi-grid { gap: 14px }

.kpi-card {
  display: flex;
  flex-direction: column;
  min-height: 152px;          /* presenca: card baixo vira faixa */
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  isolation: isolate;         /* prende a decoracao atras do conteudo */
}

/* O numero empurra a descricao para o rodape do card. E o espaco vazio
   no meio que faz o valor parecer grande — nao o font-size sozinho. */
.kpi-card .kpi-value { margin-top: auto; margin-bottom: 6px }
.kpi-card .kpi-sub   { margin-bottom: 0 }

.kpi-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0;
}
.kpi-value {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  /* Valor longo (ex: $30.609,56 em tela estreita) encolhe em vez de
     estourar a caixa ou virar reticencias. */
  overflow-wrap: anywhere;
}
.kpi-sub {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

/* ── DECORACAO ────────────────────────────────────────────────────────
   Arcos concentricos em CSS, atras do conteudo. Sao circulos —
   deliberadamente NAO tem forma de serie temporal. Grafico financeiro
   disfarcado de enfeite seria pior que enfeite nenhum: sugere leitura
   onde nao ha dado. */
.kpi-arcos::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* O elemento ocupa EXATAMENTE o card (`inset: 0`), entao nao existe
     deslocamento negativo para alargar area de rolagem. Quem sai da
     caixa e o CENTRO do gradiente (`circle at 88% -12%`): os arcos
     entram pela quina de cima a direita e o corte acontece sozinho.
     Duas tentativas anteriores com right/top negativos vazaram 2px de
     altura ou 70px de largura, conforme o tamanho do card. Esta versao
     nao depende do tamanho. */
  inset: 0;
  background: repeating-radial-gradient(circle at 88% -12%,
    transparent 0 17px, rgba(11,15,20,.05) 17px 18px);
  pointer-events: none;
}
.kpi-arcos-canto::before {
  background: repeating-radial-gradient(circle at 10% 112%,
    transparent 0 17px, rgba(11,15,20,.05) 17px 18px);
}
[data-theme="dark"] .kpi-arcos::before {
  background: repeating-radial-gradient(circle at 88% -12%,
    transparent 0 17px, rgba(255,255,255,.055) 17px 18px);
}
[data-theme="dark"] .kpi-arcos-canto::before {
  background: repeating-radial-gradient(circle at 10% 112%,
    transparent 0 17px, rgba(255,255,255,.055) 17px 18px);
}

/* ── CARD DE DESTAQUE — Market Score ───────────────────────────────── */
.kpi-hero {
  background: #14181D;
  border-color: #14181D;
}
.kpi-hero .kpi-label { color: rgba(255,255,255,.52) }
.kpi-hero .kpi-value { color: #fff }
.kpi-hero .kpi-sub   { color: rgba(255,255,255,.62) }
.kpi-hero:hover      { border-color: #14181D }

/* Mesmos arcos, no negativo. */
.kpi-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: repeating-radial-gradient(circle at 92% 108%,
    transparent 0 17px, rgba(255,255,255,.075) 17px 18px);
  pointer-events: none;
}

/* ── ESTADO ───────────────────────────────────────────────────────────
   Cor so quando ela informa. `kpi-teal` em Win Rate e IA Score pintava
   numero neutro de verde e gastava o sinal: quando o verde esta em todo
   lugar, ele para de querer dizer "bom". Fica preto; positivo e negativo
   seguem verdes e vermelhos, que sao os unicos que carregam estado. */
.kpi-card .kpi-value.kpi-teal { color: var(--ink) !important }
.kpi-hero  .kpi-value.kpi-teal { color: #fff !important }
.kpi-card .kpi-value.kpi-pos  { color: var(--green) !important }
.kpi-card .kpi-value.kpi-neg  { color: var(--red)   !important }

/* Em telas menores a linha de sete vira duas, e depois uma. Sem isto,
   sete colunas de 1fr esmagam o numero ate ele quebrar no meio. */
@media (max-width: 1500px) { .kpi-grid { grid-template-columns: repeat(4, 1fr) } }
@media (max-width: 1000px) { .kpi-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px)  { .kpi-grid { grid-template-columns: 1fr } }


/* ══════════════════════════════════════════════════════════════════════
   SISTEMA DE COR POR ESTADO — 31/08/2026
   ══════════════════════════════════════════════════════════════════════

   A cor deixa de ser do NUMERO e passa a ser da SUPERFICIE. Um card
   inteiro em lima le de longe; um digito verde no meio de sete cards
   brancos, nao.

   COMO FUNCIONA SEM TOCAR EM JAVASCRIPT

   `ui.js` ja escreve a classe de estado no valor, e sempre escreveu:

       kpi-monthly-val   kpi-pos | kpi-neg          (ui.js:155)
       kpi-dd-val        kpi-teal | kpi-amber | kpi-neg   (ui.js:170)
       kpi-risk-val      kpi-teal | kpi-amber | kpi-neg   (ui.js:180)

   O seletor `:has()` le essa classe e pinta o card ao redor. Nenhuma
   linha de `ui.js` mudou, nenhum limiar mudou, nenhum calculo mudou.
   Se amanha o robo classificar diferente, a cor acompanha sozinha.

   OS QUATRO ESTADOS

       branco    normal                     (a maioria, sempre)
       lima      positivo                   kpi-pos
       laranja   atencao                    kpi-amber
       vermelho  critico / negativo         kpi-neg
       grafite   Market Score               .kpi-hero, fixo

   POR QUE `kpi-teal` NAO PINTA NADA
   Ele marca "dentro do limite" e "risco baixo" — ou seja, normal. Se
   normal virasse verde, tres ou quatro cards ficariam coloridos ao
   mesmo tempo e a cor pararia de significar. Lima fica reservada ao
   lucro positivo: um card aceso por vez.

   `:has()` exige Chrome 105+ / Safari 15.4+. Em navegador antigo o
   seletor e ignorado e o card continua branco com o numero colorido —
   o comportamento anterior, que continua correto.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --lima:    #D9F64B;
  --laranja: #FF6A17;
  --critico: #BE1F14;   /* medido: com #D92B1F o rotulo ficava em 2,83:1 */
  --grafite: #14181D;
}

/* ── POSITIVO ─────────────────────────────────────────────────────── */
.kpi-card:has(.kpi-value.kpi-pos) {
  background: var(--lima);
  border-color: var(--lima);
}
/* ── ATENCAO ──────────────────────────────────────────────────────── */
.kpi-card:has(.kpi-value.kpi-amber) {
  background: var(--laranja);
  border-color: var(--laranja);
}
/* ── CRITICO ──────────────────────────────────────────────────────── */
.kpi-card:has(.kpi-value.kpi-neg) {
  background: var(--critico);
  border-color: var(--critico);
}

/* Sobre lima e laranja o texto e PRETO — os dois sao claros demais para
   texto branco passar em contraste. */
.kpi-card:has(.kpi-value.kpi-pos)   .kpi-value,
.kpi-card:has(.kpi-value.kpi-amber) .kpi-value {
  color: #0B0F14 !important;   /* vence o kpi-pos/kpi-amber do ui.js */
}
/* Lima e laranja NAO compartilham opacidade. A lima e muito clara e
   aguenta tinta fraca; o laranja e mais escuro e, com as mesmas
   opacidades, o rotulo caia para 3,56:1 e a descricao para 4,08:1 —
   abaixo dos 4,5 de texto pequeno. Medido, nao estimado. */
.kpi-card:has(.kpi-value.kpi-pos) .kpi-label { color: rgba(11,15,20,.62) }
.kpi-card:has(.kpi-value.kpi-pos) .kpi-sub   { color: rgba(11,15,20,.68) }
.kpi-card:has(.kpi-value.kpi-amber) .kpi-label { color: rgba(11,15,20,.86) }
.kpi-card:has(.kpi-value.kpi-amber) .kpi-sub   { color: rgba(11,15,20,.92) }

/* Sobre vermelho, o inverso. */
.kpi-card:has(.kpi-value.kpi-neg) .kpi-value { color: #fff !important }
/* Opacidades altas de proposito: sobre vermelho nao ha folga. Branco
   puro sobre #BE1F14 da ~6:1; a .78 o rotulo ainda passa dos 4,5
   exigidos para texto pequeno. Foi medido, nao estimado. */
.kpi-card:has(.kpi-value.kpi-neg) .kpi-label { color: rgba(255,255,255,.82) }
.kpi-card:has(.kpi-value.kpi-neg) .kpi-sub   { color: rgba(255,255,255,.90) }

/* ── DECORACAO SOBRE COR ──────────────────────────────────────────────
   Os arcos sao definidos com tinta escura translucida. Sobre lima e
   laranja isso funciona; sobre vermelho eles somem. Aqui a tinta troca
   junto com a superficie. */
.kpi-card:has(.kpi-value.kpi-pos).kpi-arcos::before,
.kpi-card:has(.kpi-value.kpi-amber).kpi-arcos::before {
  background: repeating-radial-gradient(circle at 88% -12%,
    transparent 0 17px, rgba(11,15,20,.10) 17px 18px);
}
.kpi-card:has(.kpi-value.kpi-pos).kpi-arcos-canto::before,
.kpi-card:has(.kpi-value.kpi-amber).kpi-arcos-canto::before {
  background: repeating-radial-gradient(circle at 10% 112%,
    transparent 0 17px, rgba(11,15,20,.10) 17px 18px);
}
.kpi-card:has(.kpi-value.kpi-neg).kpi-arcos::before {
  background: repeating-radial-gradient(circle at 88% -12%,
    transparent 0 17px, rgba(255,255,255,.13) 17px 18px);
}
.kpi-card:has(.kpi-value.kpi-neg).kpi-arcos-canto::before {
  background: repeating-radial-gradient(circle at 10% 112%,
    transparent 0 17px, rgba(255,255,255,.13) 17px 18px);
}

/* O card de destaque usa o mesmo grafite declarado aqui. */
.kpi-hero { background: var(--grafite); border-color: var(--grafite) }



/* ══════════════════════════════════════════════════════════════════════
   CENTRO DE DECISAO DA IA — mesma linguagem dos indicadores
   ══════════════════════════════════════════════════════════════════════

   So aparencia. Nenhuma linha de `ui.js` mudou: `dirBadge`,
   `scoreCircle`, `strengthBars` e `renderDecisions` continuam gerando
   exatamente o mesmo HTML, com as mesmas classes de estado.

   As tres mudancas de fundo, e o porque de cada uma:

   1. O CABECALHO PERDE O PREENCHIMENTO. `background: var(--bg)` numa
      faixa cinza atras dos titulos e o que da cara de planilha. Uma
      linha fina embaixo separa igual e nao pesa.

   2. O ANEL DO IA SCORE SAI. Era um circulo de 38px com borda de 3px —
      um medidor em miniatura, o mesmo vocabulario do velocimetro que
      acabou de sair dos indicadores. O numero sozinho, grande e
      tabular, diz o mesmo com mais forca.

   3. AS BARRAS DE FORCA SAEM. `strengthBars` desenha 3 barras a partir
      de FORTE/MEDIA/BAIXA (ui.js:31) — e a palavra correspondente e
      renderizada ao lado, na mesma celula. As barras nao acrescentam
      informacao nenhuma: repetem a palavra em forma de grafico. A
      funcao continua existindo e sendo chamada; so nao e mais desenhada.
   ══════════════════════════════════════════════════════════════════════ */

/* ── CABECALHO ────────────────────────────────────────────────────── */
.ai-table th {
  background: transparent;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .13em;
  color: var(--muted);
  padding: 0 11px 12px;
  border-bottom: 1px solid var(--border);
}

/* ── LINHAS ───────────────────────────────────────────────────────── */
.ai-table td {
  /* 16px em cima e embaixo, 11px nas laterais. O respiro que muda a
     leitura e o VERTICAL; o horizontal so empurra a largura minima da
     tabela. Medido: com 14px laterais a tabela pedia 780px e o card em
     meia tela oferece exatamente 780 — zero folga. Com 11px sobram 42. */
  padding: 16px 11px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.ai-table tr:hover td { background: var(--hover) }

/* ── ATIVO ────────────────────────────────────────────────────────── */
.ai-sym { gap: 10px }
.ai-sym-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--hover);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 10.5px; font-weight: 700;
}
.ai-sym-name { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em }
.ai-sym-sub  { font-size: 10px; margin-top: 1px }

/* ── DIRECAO ──────────────────────────────────────────────────────── */
.dir-badge {
  padding: 4px 11px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  border: 1px solid transparent;
}
/* COMPRA e VENDA continuam coloridos: sao decisao. AGUARDAR e o estado
   NEUTRO e o mais comum da tabela — pilula ambar preenchida em toda
   linha pintava a tela de laranja sem dizer nada. */
.dir-wait {
  background: transparent;
  color: var(--muted);
  border-color: var(--border2);
}
.dir-buy  { background: var(--green2); color: var(--green) }
.dir-sell { background: var(--red2);   color: var(--red) }

/* ── IA SCORE ─────────────────────────────────────────────────────── */
.score-circle {
  width: auto; height: auto;
  border: 0;
  border-radius: 0;
  display: block;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* Cor so no numero, e so quando ela informa. */
.score-circle.sc-high { color: var(--green) }
.score-circle.sc-mid  { color: var(--amber) }
.score-circle.sc-low  { color: var(--red) }

/* ── FORCA ────────────────────────────────────────────────────────── */
.strength-bars { display: none }

/* ── MOTIVOS ──────────────────────────────────────────────────────── */
.reason-item { font-size: 10.5px; line-height: 1.5; gap: 6px; align-items: flex-start }
.reason-dot  { width: 4px; height: 4px; margin-top: 6px; background: var(--border2) }
.reason-dot.neg { background: var(--red) }
.reason-dot.neu { background: var(--amber) }

/* ── ACAO ─────────────────────────────────────────────────────────── */
.btn-detail {
  height: 30px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  border-color: var(--border);
}
.btn-detail:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ── RESUMO DO CENARIO ────────────────────────────────────────────── */
.dec-summary {
  background: transparent;
  border-color: var(--border);
  padding: 16px 18px;
}
.dec-stat { min-width: 84px }
.dec-chip { font-size: 11px; padding: 6px 14px }


/* ── Centro de Decisao: ajustes de 31/08/2026 ────────────────────────
   Quatro pedidos, e o que cada um exigiu:

   · icone do ativo  -> removido do TEMPLATE, nao do CSS. `.ai-sym-ico`
                        tambem e usado pela tabela de posicoes
                        (ui.js:407); esconder pela classe apagaria os
                        dois. Saiu so de `renderDecisions`.
   · AGUARDAR        -> raio de 999px (pilula) para 7px.
   · IA SCORE        -> coluna removida. A cor foi para PROBABILIDADE,
                        com os MESMOS limiares de 75 e 55 que o
                        `scoreCircle` ja usava. Nenhum numero novo.
   · Ver Detalhes /  -> coluna AÇÃO inteira removida. A funcao
     estrela            `showDecisionDetail` CONTINUA existindo: o
                        calendario a chama em dois pontos
                        (calendar.js:305 e :328) e quebraria sem ela.
   ─────────────────────────────────────────────────────────────────── */

.dir-badge { border-radius: 7px }      /* era 999px */

.prob-val {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.prob-val.sc-high { color: var(--green) }
.prob-val.sc-mid  { color: var(--amber) }
.prob-val.sc-low  { color: var(--red) }


/* ══════════════════════════════════════════════════════════════════════
   CALENDARIO DE PERFORMANCE — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   Subiu para a linha do Centro de Decisao, no lugar de "Noticias de
   Impacto". O card foi MOVIDO, nao recriado: todos os ids continuam os
   mesmos e `renderCalendar` do ui.js segue achando cada um.

   Aqui so a aparencia, na mesma linguagem dos indicadores: numero
   grande com peso menor, rotulo em caixa alta espacada, borda quase
   invisivel e cor reservada ao que e resultado.
   ══════════════════════════════════════════════════════════════════════ */

/* ── RESUMO DO MES ────────────────────────────────────────────────── */
.perf-stats-row { gap: 14px; margin-bottom: 20px }
.ps-cell { text-align: left }
.ps-val {
  font-size: 22px;
  font-weight: 600;               /* era 800 — mesmo ajuste dos KPIs */
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
/* `.ps-val.t` pintava o Win Rate de teal. Numero neutro colorido gasta
   o sinal: verde e vermelho ficam para lucro e prejuizo, que sao
   resultado. Win Rate volta a ser tinta comum. */
.ps-val.t { color: var(--ink) }
.ps-lbl {
  font-size: 9px; font-weight: 600;
  letter-spacing: .12em; margin-top: 4px;
}

/* ── NAVEGACAO DO MES ─────────────────────────────────────────────── */
.cal-nav-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border-color: var(--border);
  color: var(--muted);
}
.cal-nav-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--hover) }

/* ── GRADE ────────────────────────────────────────────────────────── */
.perf-cal-grid { gap: 5px }
.cal-day-name { font-size: 9px; font-weight: 600; letter-spacing: .12em; padding: 0 0 8px }

.cal-day {
  border-radius: 8px;
  min-height: 60px;
  padding: 7px 8px;
  border-color: var(--border);
}
.cal-day:hover { border-color: var(--border2) }

/* O dia de HOJE era marcado por um halo de 2px em volta (box-shadow).
   Numa grade de 30 celulas isso vira o elemento mais forte da tela.
   Uma borda escura de 1px marca igual e nao brilha. */
.cal-day.today {
  border-color: var(--ink);
  box-shadow: none;
}

/* Dia com resultado: superficie suave, nao saturada. A leitura vem do
   NUMERO — o fundo so agrupa. */
.cal-day.pos { background: var(--green2); border-color: transparent }
.cal-day.neg { background: var(--red2);   border-color: transparent }

.cal-day-num { font-size: 10.5px; font-weight: 600; color: var(--muted) }
.cal-day-pft {
  font-size: 11px; font-weight: 650;
  margin-top: 5px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cal-day-cnt { font-size: 9px; margin-top: 1px }

/* ── LEGENDA ──────────────────────────────────────────────────────── */
.pos-legend, .neg-legend { font-size: 10px; gap: 6px }
.leg-dot { width: 6px; height: 6px }


/* ══════════════════════════════════════════════════════════════════════
   MARKET INTELLIGENCE — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   Mesma linguagem do resto: item sem caixa propria, separador fino,
   icone neutro, cor so no estado.

   O GRAFICO MINI FICA. Ele nao e como as sparklines dos KPIs, que eu
   removi: aquelas vinham de Math.random(). Este usa os fechamentos M5
   REAIS que o backend manda em `item.spark`, e `charts.js:310` deixa a
   area em branco quando nao ha dado, em vez de inventar linha. E
   informacao — so passa a ser desenhada com menos peso.

   O QUE MUDA:
     · o item perde a borda de caixa e ganha um separador fino. Sete
       caixinhas empilhadas dentro de outra caixa e moldura demais.
     · o icone sai do teal e vira superficie neutra.
     · a pilula de status vira contorno. Preenchida, e o elemento mais
       forte da linha — e ela e conclusao, nao dado.
   ══════════════════════════════════════════════════════════════════════ */

.market-list { gap: 0 }

.market-item {
  /* GRID, e nao flex — 01/09/2026.
     Com flex, o bloco de texto tinha `flex:1` e engolia toda a folga,
     empurrando o grafico para a extrema direita e deixando um vao no
     meio da linha. As quatro colunas fixas trazem o grafico para perto
     do texto E alinham os cinco graficos na mesma vertical, coisa que
     largura natural do texto nao daria (cada nome tem um tamanho).

     1fr   texto, ate 210px
     101px grafico  (84 + 20%)
     resto folga; o status vai para o fim dela

     01/09/2026: a coluna do icone (30px) saiu junto com o elemento no
     template do ui.js. Sao TRES colunas agora — se ficasse a quarta, o
     texto cairia na coluna do grafico e tudo desalinhava. */
  display: grid;
  grid-template-columns: minmax(0, 210px) 101px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.market-status { justify-self: end }
.market-item:last-child { border-bottom: 0 }
.market-item:hover { background: var(--hover) }

/* `.market-ico` nao e mais gerado pelo `renderIntel` desde 01/09/2026.
   A regra original (linha 738) fica onde esta, inofensiva, caso o
   elemento volte. */

.market-name { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em }
.market-sub  { font-size: 10.5px; margin-top: 2px; line-height: 1.4 }

/* Menor e mais discreto: a linha de preco acompanha, nao disputa.
   `flex: 0 0 84px` corrige um defeito ANTERIOR a esta reforma: o CSS
   original dava `flex:1` ao canvas, e ele disputava o espaco com o
   bloco de texto (que tem `min-width:0` no HTML). MEDIDO em card de
   560px: o canvas ficava com 520px e o nome do ativo com ZERO — o item
   pedia 652px e tinha 510. Agora o grafico tem largura fixa e o texto
   fica com o resto, que e a ordem certa de prioridade. */
.market-chart-mini { flex: 0 0 101px; width: 101px; height: 31px; opacity: .8 }

.market-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 11px;
  border-radius: 7px;              /* mesma quina do AGUARDAR na tabela */
  background: transparent;
  border: 1px solid;
}
/* Tons mais escuros que --green/--red de proposito. Na pilula PREENCHIDA
   o texto vinha sobre green2/red2 e passava; no contorno ele fica sobre
   branco e o mesmo verde cai para 3,30:1. Estes sao os tons 700. */
.ms-bull { color: #15803D; border-color: #86C9A2 }
.ms-bear { color: #B91C1C; border-color: #E9A2A2 }
/* Neutro nao e alerta: sai do ambar e vira cinza. Numa lista de cinco
   ativos, "Neutro" e o estado mais comum — pintado de laranja, a lista
   inteira parecia advertencia. */
.ms-neu  { color: var(--muted); border-color: var(--border2) }


/* ══════════════════════════════════════════════════════════════════════
   CAPITAL PERFORMANCE — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   Era "EQUITY CURVE". Mesma estrutura, mesmos ids, mesma altura de card.
   Hierarquia: titulo pequeno -> valor dominante -> grafico -> faixa de
   indicadores. Sem icone nenhum: so tipografia, numeros, linha e area.
   ══════════════════════════════════════════════════════════════════════ */

.equity-header { margin-bottom: 18px; align-items: flex-start }

.equity-value {
  font-size: 34px;                /* era 28 — e o topo da hierarquia */
  font-weight: 600;               /* era 900: peso 900 em corpo grande
                                     e o que da aparencia de painel de
                                     cassino, nao de produto */
  letter-spacing: -.05em;
  line-height: 1.05;
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
}
.equity-change {
  font-size: 12px;
  font-weight: 600;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

/* ── D S M A ──────────────────────────────────────────────────────── */
.equity-filters { gap: 6px }
.ef {
  height: 28px; padding: 0 13px;
  border-radius: 8px;             /* era 999px */
  font-size: 11px; font-weight: 600;
  border-color: var(--border);
}
.ef:hover { border-color: var(--border2); color: var(--ink); background: var(--hover) }
/* Ativo em grafite, nao no teal: o accent do sistema e a lima, e ela
   esta reservada para a area do grafico. Dois acentos competindo no
   mesmo card deixa os dois mais fracos. */
.ef.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ── GRAFICO ──────────────────────────────────────────────────────── */
.equity-chart-wrap { height: 232px; margin-bottom: 18px }

/* ── FAIXA DE INDICADORES ─────────────────────────────────────────── */
/* Uma faixa so, nao quatro cards: sao numeros de apoio. Separadores
   verticais finos em vez de caixas. */
.equity-metrics {
  gap: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.em-item { padding: 0 18px; border-left: 1px solid var(--border) }
.em-item:first-child { padding-left: 0; border-left: 0 }
.em-label {
  font-size: 9px; font-weight: 600;
  letter-spacing: .12em; margin-bottom: 6px;
}
.em-value {
  font-size: 17px; font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
/* Profit factor nao e ganho nem perda: e razao. Sai do teal. */
.em-value.kpi-teal { color: var(--ink) !important }

/* CONTAINER QUERY, e nao media query de viewport. O que importa aqui e a
   largura do CARD: ele vive num `grid-l2`, entao num notebook de 1366px
   fica com ~800px enquanto a janela continua "grande" — uma media query
   de viewport nunca dispararia na hora certa.
   `auto-fit` tambem nao serve: com minmax(128px,1fr) ele abre SETE
   trilhas num card de 1050px e os quatro itens ficam espremidos a
   esquerda, com espaco morto sobrando. */
.card:has(> .equity-metrics) { container-type: inline-size }

@container (max-width: 560px) {
  .equity-metrics { grid-template-columns: repeat(2,1fr); row-gap: 20px }
  /* Na segunda fileira o terceiro item vira o primeiro da linha: a
     barra vertical a esquerda dele tem de sumir junto. */
  .em-item:nth-child(3) { padding-left: 0; border-left: 0 }
}


/* ══════════════════════════════════════════════════════════════════════
   PARES MAIS OPERADOS — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   Mesma linguagem do resto. O que muda:

   · o donut perde o brilho teal (`drop-shadow`) e o zoom no hover. Sombra
     colorida e escala em hover sao efeito, nao informacao — e a regra
     aqui e nao ter animacao chamativa.
   · os quatro blocos deixam de ser CAIXAS cinzas e viram uma faixa com
     separadores finos, igual ao rodape do Capital Performance. Caixa
     dentro de caixa era moldura demais.
   · pesos 900 -> 600. O numero continua dominante pelo tamanho.
   · a paleta do donut virou rampa por posicao (ver charts.js).
   ══════════════════════════════════════════════════════════════════════ */

.poa-wrap { gap: 28px; padding: 4px 0 22px }

.poa-donut-box { filter: none }
.poa-donut-box canvas { transition: none }
.poa-donut-box:hover canvas { transform: none }

.poa-donut-val {
  font-size: 27px; font-weight: 600;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.poa-donut-lbl { font-size: 9px; font-weight: 600; letter-spacing: .14em; margin-top: 5px }

/* ── LEGENDA ──────────────────────────────────────────────────────── */
.poa-legend { gap: 0 }
.poa-leg-item {
  gap: 11px;
  padding: 11px 2px;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.poa-leg-item:last-child { border-bottom: 0 }
.poa-leg-item:hover { background: var(--hover) }
/* Ponto redondo, nao quadrado arredondado: fica mais perto da forma do
   proprio donut. */
.poa-leg-dot { width: 8px; height: 8px; border-radius: 50% }
.poa-leg-sym { font-size: 12.5px; font-weight: 650 }
.poa-leg-cnt { font-size: 10.5px; margin-top: 2px }
.poa-leg-pct { font-size: 15px; font-weight: 600; letter-spacing: -.03em }

/* ── FAIXA DE ESTATISTICAS ────────────────────────────────────────── */
.poa-stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-top: 20px;
}
.poa-stat {
  padding: 0 18px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.poa-stat:first-child { padding-left: 0; border-left: 0 }
.poa-stat-label { font-size: 9px; font-weight: 600; letter-spacing: .12em; margin-bottom: 8px }
.poa-stat-sym   { font-size: 12px; font-weight: 650; margin-bottom: 4px; color: var(--muted) }
.poa-stat-val   { font-size: 17px; font-weight: 600; letter-spacing: -.03em;
                  color: var(--ink); font-variant-numeric: tabular-nums }
/* `.text-pos` e `.text-neg` tem a MESMA especificidade que `.poa-stat-val`
   e sao declaradas ANTES no arquivo — sem estas duas linhas a cor de
   resultado perdia para o `color: var(--ink)` acima, e os valores
   financeiros saiam pretos. Medido: +$35.502,29 vinha em rgb(17,24,39). */
.poa-stat-val.text-pos { color: var(--green) }
.poa-stat-val.text-neg { color: var(--red) }
.poa-stat-sub   { font-size: 10.5px; margin-top: 3px }

/* O card vive num `grid-l2`: a largura que importa e a dele, nao a da
   janela. Mesma razao do rodape do Capital Performance. */
.card:has(> .poa-stats), .card:has(.poa-stats) { container-type: inline-size }
@container (max-width: 620px) {
  .poa-stats { grid-template-columns: repeat(2,1fr); row-gap: 22px }
  .poa-stat:nth-child(3) { padding-left: 0; border-left: 0 }
}
@container (max-width: 520px) {
  .poa-wrap { flex-direction: column; align-items: flex-start; gap: 18px }
  .poa-legend { width: 100% }
}


/* ══════════════════════════════════════════════════════════════════════
   TITULO DE CARD — padronizado em 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   Desenho aprovado no Capital Performance, aplicado aos 22 cards:
   rotulo pequeno em CAIXA ALTA com bastante espacamento de letra, e a
   descricao logo abaixo, do mesmo cinza.

   O titulo para de disputar com o numero. Antes era 13,5px em peso 650,
   quase do tamanho do dado que ele rotula; agora ele se comporta como
   etiqueta e a hierarquia fica: rotulo -> valor -> apoio, igual a dos
   indicadores.

   Os emojis sairam junto (`index.html`): em caixa alta com tracking de
   .16em, um icone colado na frente briga com a linha de base e com o
   proprio espacamento.
   ══════════════════════════════════════════════════════════════════════ */

.card-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}
.card-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
}


/* ══════════════════════════════════════════════════════════════════════
   GEOPOLITICAL INTELLIGENCE — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   Mesma linguagem dos demais. O card tinha DOIS niveis de caixa: as
   quatro regioes em quadros com borda, e cada evento em outro quadro —
   tudo dentro do card, que ja e uma caixa. Vira linha com separador
   fino, como o Centro de Decisao e o Market Intelligence.

   As pilulas preenchidas (verde, ambar, vermelho nas regioes; azul na
   tag de regiao do evento) viram contorno. Numa lista de oito eventos,
   oito etiquetas azuis preenchidas eram o elemento mais forte da tela —
   e a regiao e a informacao MENOS importante de cada linha.
   ══════════════════════════════════════════════════════════════════════ */

/* ── REGIOES ──────────────────────────────────────────────────────── */
.geo-regions {
  gap: 0;
  margin-bottom: 22px;
  border-top: 1px solid var(--border);
}
.geo-region {
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-size: 12px;
}
/* Duas colunas: a barra separadora da direita precisa de respiro. */
.geo-region:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--border) }
.geo-region:nth-child(odd)  { padding-right: 18px }
.geo-region-name { font-weight: 550; font-size: 12px }

.geo-badge {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid;
}
.gb-on  { color: #15803D; border-color: #86C9A2 }
.gb-off { color: #B91C1C; border-color: #E9A2A2 }
/* Neutro nao e alerta — sai do ambar, como no Market Intelligence. */
.gb-neu { color: var(--muted); border-color: var(--border2) }

/* ── EVENTOS ──────────────────────────────────────────────────────── */
.geo-events { gap: 0 }
.geo-event {
  padding: 14px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.geo-event:last-child { border-bottom: 0 }
.geo-event:hover { background: var(--hover) }

.geo-event-header { gap: 14px; align-items: flex-start; margin-bottom: 6px }
.geo-event-title {
  font-size: 12.5px; font-weight: 550;
  line-height: 1.45;
}
.geo-event-meta { font-size: 10.5px; gap: 12px; align-items: center }
.geo-event-impact { font-weight: 600; color: var(--muted) }

.geo-region-tag {
  font-size: 9px; font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}


/* ── Linha do evento pintada por SENTIMENTO — 01/09/2026 ─────────────
   Alta vermelho · Neutra branco · Baixa lima. As mesmas superficies do
   sistema de cores dos indicadores, para a leitura ser a mesma em todo
   o painel.

   A linha inteira e pintada, com respiro lateral: sem os 14px de padding
   a cor encostaria na borda do card e viraria uma faixa colada. */
.geo-event.sent-alta,
.geo-event.sent-baixa {
  padding-left: 14px;
  padding-right: 14px;
  border-radius: 9px;
  border-bottom-color: transparent;
  margin-bottom: 1px;
}

.geo-event.sent-alta  { background: var(--critico) }
.geo-event.sent-baixa { background: var(--lima) }
/* Neutra fica branca: e o estado comum, e superficie so quando informa. */
.geo-event.sent-neutra { background: transparent }

/* Sobre vermelho, texto claro. Opacidades altas de proposito — o mesmo
   #BE1F14 dos cards da linha de cima, onde ja foi medido que branco
   puro da ~6:1 e .82 ainda passa dos 4,5 de texto pequeno. */
.geo-event.sent-alta .geo-event-title  { color: #fff }
.geo-event.sent-alta .geo-event-meta   { color: rgba(255,255,255,.86) }
.geo-event.sent-alta .geo-event-impact { color: rgba(255,255,255,.92) }
.geo-event.sent-alta .geo-region-tag   { color: rgba(255,255,255,.86);
                                        border-color: rgba(255,255,255,.42) }
.geo-event.sent-alta:hover { background: #A81B11 }

/* Sobre lima, texto escuro. A lima e clara demais para branco. */
.geo-event.sent-baixa .geo-event-title  { color: #0B0F14 }
.geo-event.sent-baixa .geo-event-meta   { color: rgba(11,15,20,.72) }
.geo-event.sent-baixa .geo-event-impact { color: rgba(11,15,20,.82) }
.geo-event.sent-baixa .geo-region-tag   { color: rgba(11,15,20,.72);
                                         border-color: rgba(11,15,20,.28) }
.geo-event.sent-baixa:hover { background: #CDEA43 }


/* ══════════════════════════════════════════════════════════════════════
   POSICOES ABERTAS — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   Mesma linguagem da tabela do Centro de Decisao: cabecalho sem faixa
   cinza, linha alta, pilula virando contorno, icone fora.
   ══════════════════════════════════════════════════════════════════════ */

.pos-table th {
  background: transparent;
  font-size: 9px; font-weight: 600;
  letter-spacing: .13em;
  padding: 0 11px 12px;
}
.pos-table td { padding: 15px 11px; font-size: 12px }
.pos-table tr:hover td { background: var(--hover) }

.pos-sym    { font-size: 12.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em }
.pos-ticket { font-size: 10px; color: var(--muted); margin-top: 2px }
.pos-num    { font-variant-numeric: tabular-nums; color: var(--text) }
.pos-tempo  { color: var(--muted); font-variant-numeric: tabular-nums }

.pos-pnl { font-size: 14px; font-weight: 600; letter-spacing: -.02em;
           font-variant-numeric: tabular-nums }
.pos-pct { font-weight: 600; font-variant-numeric: tabular-nums }

/* LONG e SHORT sao decisao, entao mantem cor — mas em contorno, e nos
   tons 700, que e o que passa em contraste sobre branco (medido no
   Market Intelligence: o --green sobre branco da 3,30:1). */
.pos-type-badge {
  padding: 4px 11px;
  border-radius: 7px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .05em;
  background: transparent;
  border: 1px solid;
}
.ptb-long  { color: #15803D; border-color: #86C9A2 }
.ptb-short { color: #B91C1C; border-color: #E9A2A2 }

/* Risco: BAIXO e o estado comum da tabela e nao precisa de verde. */
.risk-tag {
  font-size: 9px; font-weight: 600;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid;
}
.rt-low  { color: var(--muted); border-color: var(--border2) }
.rt-mid  { color: #B45309; border-color: #E8C596 }
.rt-high { color: #B91C1C; border-color: #E9A2A2 }

/* ── ACOES ────────────────────────────────────────────────────────── */
.pos-acoes { display: flex; gap: 6px }
.pos-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 12px;
  color: var(--muted);
  display: grid; place-items: center;
  transition: all var(--tr);
}
.pos-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--hover) }
/* Fechar posicao e acao destrutiva: fica cinza em repouso e so assume o
   vermelho quando o cursor esta em cima. Vermelho permanente em toda
   linha treina o olho a ignorar. */
.pos-btn-fechar:hover { border-color: var(--critico); color: #fff; background: var(--critico) }

/* ── METRICAS AVANCADAS ───────────────────────────────────────────── */
/* Reaproveita `.poa-stat`, entao ja herdou a faixa. So o grid muda. */
.adv-metrics-grid { gap: 0 }
.adv-metrics-grid .poa-stat { padding: 0 18px; border-left: 1px solid var(--border) }
.adv-metrics-grid .poa-stat:first-child { padding-left: 0; border-left: 0 }

.card:has(> .adv-metrics-grid), .card:has(.adv-metrics-grid) { container-type: inline-size }
@container (max-width: 900px) {
  .adv-metrics-grid { grid-template-columns: repeat(3,1fr); row-gap: 22px }
  .adv-metrics-grid .poa-stat:nth-child(4) { padding-left: 0; border-left: 0 }
}
@container (max-width: 560px) {
  .adv-metrics-grid { grid-template-columns: repeat(2,1fr) }
  .adv-metrics-grid .poa-stat:nth-child(odd) { padding-left: 0; border-left: 0 }
}

/* ── Cabecalho de Posicoes Abertas — 01/09/2026 ─────────────────────── */
.pos-cabecalho { align-items: center; gap: 18px }
.pos-total {
  font-size: 13px; font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* A contagem de ocultas nao e alarme: e nota de rodape. Fica em cinza,
   ao lado do total, sem competir com ele. */
.pos-ocultas { font-size: 11px; color: var(--muted) }
.pos-risco   { font-size: 11px; color: var(--muted) }
.pos-risco #pos-risk-total { font-weight: 600; color: var(--ink) }


/* ══════════════════════════════════════════════════════════════════════
   MERCADOS · IA SCANNER · CALENDARIO — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   As tres paginas passam a falar a mesma lingua da Home. Nenhuma regra
   anterior foi apagada: esta camada so reescreve aparencia, e some
   inteira se for removida daqui para baixo.

   O padrao aplicado e sempre o mesmo, e e o que ja esta documentado:
   caixa vira separador, pilula vira contorno, peso 800/900 vira 600,
   cor decorativa sai, cor de estado fica.
   ══════════════════════════════════════════════════════════════════════ */

/* ── COMUM AS TRES ────────────────────────────────────────────────── */
#page-markets .mkt-eyebrow, .econ-eyebrow, .scan-title,
#page-markets .mkt-section > h3, .econ-section-title {
  font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

/* Tabelas: cabecalho sem faixa, linha alta, filete fino. */
#page-markets .mkt-table th, .scan-table th, .econ-table th {
  background: transparent;
  font-size: 9px; font-weight: 600;
  letter-spacing: .13em;
  color: var(--muted);
  padding: 0 10px 12px 0;
  border-bottom: 1px solid var(--border);
}
#page-markets .mkt-table td, .scan-table td, .econ-table td {
  padding: 14px 10px 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
#page-markets .mkt-table tr:hover td, .scan-table tr:hover td { background: var(--hover) }

/* Peso: 800/900 em texto de tabela e o que da cara de terminal. */
#page-markets :is(.mkt-sym-cell, .mkt-heat-sym, .mkt-pano-name, .mkt-dir-compra,
  .mkt-dir-venda, .mkt-dir-neutro, .mkt-corr-diag, .mkt-intel-sym),
.scan-asset, .scan-medal { font-weight: 600 }
#page-markets .mkt-pano-status { font-size: 15px; font-weight: 600; letter-spacing: -.02em }

/* Direcao: COMPRA e VENDA sao decisao e ficam coloridas nos tons 700.
   NEUTRO e o estado mais comum destas tabelas — sai do ambar. */
#page-markets .mkt-dir-compra { color: #15803D }
#page-markets .mkt-dir-venda  { color: #B91C1C }
#page-markets .mkt-dir-neutro { color: var(--muted) }

/* ── MERCADOS ─────────────────────────────────────────────────────── */
/* Panorama: seis cards com icone e barra. O icone sai, a barra fica —
#page-markets ela codifica intensidade,
#page-markets que e dado. */
#page-markets .mkt-pano-ico { display: none }
#page-markets .mkt-pano-card {
  border-radius: var(--r);
  border-color: var(--border);
  box-shadow: none;
  padding: 20px;
#page-markets }
.mkt-pano-sub { font-size: 11.5px; line-height: 1.5 }
#page-markets .mkt-pano-bar { height: 3px; border-radius: 2px }

#page-markets .mkt-st-bull { color: #15803D }
#page-markets .mkt-st-bear { color: #B91C1C }
#page-markets .mkt-st-neutro { color: var(--muted) }

/* Heatmap: os quadros ganham raio menor e perdem peso 900. */
#page-markets .mkt-heat-cell { border-radius: var(--r-sm); border: 1px solid var(--border) }
#page-markets .mkt-heat-pct { font-weight: 600; font-variant-numeric: tabular-nums }

#page-markets .mkt-intel-ico { display: none }
#page-markets .mkt-intel-item { border-bottom: 1px solid var(--border); padding: 14px 0 }
#page-markets .mkt-intel-status { font-weight: 600 }
#page-markets .mkt-intel-pct { font-weight: 600; font-variant-numeric: tabular-nums }

/* Correlacao: numero tabular, sem peso extra. */
#page-markets .mkt-corr-table td { font-variant-numeric: tabular-nums; font-weight: 500 }
#page-markets .mkt-corr-pos { color: #15803D }
#page-markets .mkt-corr-neg { color: #B91C1C }

#page-markets .mkt-sym-ico,
#page-markets .mkt-cal-flag { display: none }
#page-markets .mkt-cal-row { padding: 12px 0; border-bottom: 1px solid var(--border) }
#page-markets .mkt-cal-time { font-weight: 600; font-variant-numeric: tabular-nums }
#page-markets .mkt-cal-group-title { font-size: 9px; font-weight: 600; letter-spacing: .14em }

/* ── IA SCANNER ───────────────────────────────────────────────────── */
.scan-kpi {
  border-radius: var(--r);
  border-color: var(--border);
  box-shadow: none;
  padding: 20px 22px;
  min-height: 132px;
}
.scan-kpi b, .scan-kpi > div:nth-child(2) {
  font-size: 28px; font-weight: 600; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}

/* Abas e botoes: raio 8, contorno, ativo em grafite. */
.scan-tabs button, .scan-tf, .scan-btn, .scan-link {
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
}
.scan-tabs button:hover, .scan-tf:hover, .scan-btn:hover {
  border-color: var(--border2); color: var(--ink); background: var(--hover);
}
.scan-tabs button.active, .scan-tf.active, .scan-btn.primary {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.scan-search { border-radius: 8px; border-color: var(--border) }

/* O anel do score sai, como saiu na Home: numero grande basta. */
.scan-ring { background: none !important; border: 0 }
.scan-ring b { font-size: 30px; font-weight: 600; letter-spacing: -.04em }

.scan-panel, .scan-detail, .scan-chart-box {
  border-radius: var(--r); border-color: var(--border); box-shadow: none;
}
.scan-bars .sb-bar { display: none }

/* ── CALENDARIO ECONOMICO ─────────────────────────────────────────── */
/* O gradiente escuro dos paineis ja tinha sido neutralizado por uma
   camada anterior; aqui cai a sombra pesada que sobrou junto. */
.econ-hero, .econ-panel {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: var(--r);
}
.econ-hero h2 { font-size: 26px; font-weight: 600; letter-spacing: -.04em; color: var(--ink) }

.econ-event-card {
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: none;
}
/* A barra grossa de impacto a esquerda vira filete de 2px, e a cor
   passa a ser a do sistema. */
.econ-event-card { border-left-width: 2px }
.econ-event-time { font-weight: 600; font-variant-numeric: tabular-nums }

.econ-badge, .impact-checks span, .session-tabs button {
  border-radius: 7px;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .06em;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
}

.econ-row { border-bottom: 1px solid var(--border); font-size: 12.5px }
.econ-countdown { font-variant-numeric: tabular-nums; font-weight: 600 }

/* Hover: some o realce teal com sombra colorida. */
.econ-event-card:hover, .econ-row:hover, .asset-impact-list div:hover,
.week-cards > div:hover, .session-tabs button:hover, .impact-checks span:hover {
  border-color: var(--border2) !important;
  box-shadow: none !important;
  background: var(--hover);
}

/* ── Linha escolhida no ranking do Scanner — 01/09/2026 ─────────────
   Clicar num ativo abre o estudo dele no painel ao lado; esta e a marca
   de qual linha esta sendo mostrada la. Filete grafite a esquerda em vez
   de fundo colorido: a tabela tem dez linhas e uma faixa cheia roubaria
   a leitura das outras nove. */
.scan-table tr.scan-row-sel td {
  background: var(--hover);
  border-top: 1px solid var(--border2);
  border-bottom-color: var(--border2);
}
.scan-table tr.scan-row-sel td:first-child {
  box-shadow: inset 2px 0 0 var(--ink);
}
.scan-table tbody tr { cursor: pointer }

/* ── Nota do plano de risco — IA Scanner, 01/09/2026 ────────────────
   Ocupa o lugar do bloco "Niveis de referencia (derivados do preco)",
   removido junto com o diagrama de faixas que havia embaixo dele — que
   era decoracao em CSS, nao grafico: `.scan-lines` desenhava listras
   verdes e azuis fixas, iguais para qualquer ativo.

   O que sobrou aqui e informacao real: o risco em dolar e em percentual
   que o risk_engine calculou para aquele plano. */
.scan-plano-nota {
  font-size: 10.5px;
  color: var(--muted);
  padding: 12px 2px 0;
  line-height: 1.5;
}

/* Sem o bloco de niveis o painel encurtou. `space-between` distribui o
   que sobrou em vez de deixar um vao no rodape. */
.scan-detail { display: flex; flex-direction: column }
.scan-detail .scan-reasons { margin-top: auto }

/* ── Composicao do Score e Alinhamento — IA Scanner, 01/09/2026 ─────
   Os dois substituem "Sinais por Timeframe" e "Algoritmos Utilizados",
   que eram HTML fixo. Reaproveitam `.scan-tf` e `.scan-algo-list`, entao
   herdam o desenho; aqui so o que muda.

   A bolinha verde do `.scan-algo-list::before` sai: ela dizia "ativo"
   numa lista onde tudo estava sempre ativo. Agora cada linha e uma
   contagem, e a contagem nao tem estado. */
#page-scanner .scan-algo-list span::before { display: none }
#page-scanner .scan-algo-list span {
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
#page-scanner .scan-algo-list span:last-child { border-bottom: 0 }
#page-scanner .scan-algo-list b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#page-scanner .scan-tf div { grid-template-columns: 92px 1fr 62px }
#page-scanner .scan-tf b { font-variant-numeric: tabular-nums }
/* A barra ganha a cor do sistema em vez do verde: e magnitude, nao
   estado — nao existe parcela "boa" ou "ruim". */
#page-scanner .scan-tf i::after { background: var(--ink); opacity: .55 }

/* ══════════════════════════════════════════════════════════════════════
   KPIs DO IA SCANNER — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   Mesmo desenho dos indicadores da Home: rotulo pequeno em caixa alta
   espacada, numero dominante em peso 600, apoio discreto no rodape.

   Os sete numeros eram VERDES e peso 900. Contagem, percentual e nome de
   ativo sao estatistica neutra — pintar todos de verde gastava a cor. So
   a Fonte de dados carrega estado, e la a superficie e que informa.

   Saiu tambem o anel `.scan-algos i`: um circulo de 40px com borda verde
   de 6px no canto do card, sem numero e sem escala. Nao media nada.
   ══════════════════════════════════════════════════════════════════════ */

#page-scanner .scan-kpis { gap: 14px }

#page-scanner .scan-kpi {
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: 20px 22px;
  border-radius: var(--r);
  border-color: var(--border);
  box-shadow: none;
  isolation: isolate;
}

#page-scanner .scan-kpi span {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
/* O numero empurra o apoio para o rodape: e o vazio no meio que faz o
   valor parecer grande, nao o font-size sozinho. */
#page-scanner .scan-kpi b {
  margin: auto 0 6px;
  font-size: 30px; font-weight: 600;
  letter-spacing: -.05em; line-height: 1.02;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#page-scanner .scan-kpi small {
  font-size: 11px; font-weight: 400;
  color: var(--muted);
}
/* `.up` pintava o numero de verde; nao ha mais estado nesses cards. */
#page-scanner .scan-kpi .up { color: inherit }

/* Arcos concentricos, iguais aos da Home: elemento ocupa o card inteiro
   e quem sai da caixa e o CENTRO do gradiente. */
#page-scanner .scan-kpi.kpi-arcos::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-radial-gradient(circle at 88% -12%,
    transparent 0 17px, rgba(11,15,20,.05) 17px 18px);
  pointer-events: none;
}
[data-theme="dark"] #page-scanner .scan-kpi.kpi-arcos::before {
  background: repeating-radial-gradient(circle at 88% -12%,
    transparent 0 17px, rgba(255,255,255,.055) 17px 18px);
}

/* ── FONTE DE DADOS: o unico com estado ───────────────────────────── */
#page-scanner .scan-kpi-fonte {
  background: var(--grafite);
  border-color: var(--grafite);
}
#page-scanner .scan-kpi-fonte span  { color: rgba(255,255,255,.52) }
#page-scanner .scan-kpi-fonte b     { color: #fff }
#page-scanner .scan-kpi-fonte small { color: rgba(255,255,255,.62) }
#page-scanner .scan-kpi-fonte::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-radial-gradient(circle at 92% 108%,
    transparent 0 17px, rgba(255,255,255,.075) 17px 18px);
}

#page-scanner .scan-kpi-off {
  background: var(--critico);
  border-color: var(--critico);
}
#page-scanner .scan-kpi-off span  { color: rgba(255,255,255,.82) }
#page-scanner .scan-kpi-off b     { color: #fff }
#page-scanner .scan-kpi-off small { color: rgba(255,255,255,.90) }

/* Sete cards nunca couberam bem em telas menores; `auto-fit` acomoda
   sozinho pela largura disponivel. */
@media (max-width: 1500px) {
  #page-scanner .scan-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) }
}

/* ══════════════════════════════════════════════════════════════════════
   PANORAMA GLOBAL — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   Os seis cards passam a usar o desenho dos indicadores: rotulo pequeno
   em caixa alta espacada, status como valor dominante, apoio no rodape.

   O que saiu, e por que:
     · o gradiente de fundo por status. Seis cards com veu colorido, e
       ambar em cinco deles — o "neutro", que e o estado mais comum.
     · o icone (globo, moeda, barril).
     · a sparkline: `Math.random()` com inclinacao fixa pelo status.
     · o hover com `translateY(-2px)` e sombra: e animacao.
   ══════════════════════════════════════════════════════════════════════ */

#page-markets .mkt-pano-grid { gap: 14px }

#page-markets .mkt-pano-card {
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: 20px 22px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: none;
  transition: border-color var(--tr);
}
#page-markets .mkt-pano-card::before { content: none }
#page-markets .mkt-pano-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border2);
}

#page-markets .mkt-pano-name {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}

/* O status e o valor do card: cresce e ganha o lugar do numero. */
#page-markets .mkt-pano-status {
  margin: auto 0 6px;
  font-size: 26px; font-weight: 600;
  letter-spacing: -.04em; line-height: 1.05;
  color: var(--ink);
}
/* Cor so no que e estado. NEUTRO fica em tinta comum — no painel de hoje
   ele aparece em cinco dos seis cards, e ambar em cinco cards seguidos
   nao e alerta, e ruido. */
#page-markets .mkt-st-bull   { color: #15803D }
#page-markets .mkt-st-bear   { color: #B91C1C }
#page-markets .mkt-st-neutro { color: var(--ink) }

#page-markets .mkt-pano-sub {
  font-size: 11px; line-height: 1.5;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Barra de confianca: mede um numero real, entao fica — fina e na cor do
   estado, herdada da classe em vez de `background` inline. */
#page-markets .mkt-pano-bar {
  height: 3px; border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
#page-markets .mkt-pano-bar-fill { height: 100%; border-radius: 2px; background: var(--ink) }
#page-markets .mkt-pano-bar.mkt-st-bull  .mkt-pano-bar-fill { background: #15803D }
#page-markets .mkt-pano-bar.mkt-st-bear  .mkt-pano-bar-fill { background: #B91C1C }
#page-markets .mkt-pano-bar.mkt-st-neutro .mkt-pano-bar-fill { background: var(--border2) }

/* ── Panorama: a cor vai para a SUPERFICIE — 01/09/2026 ─────────────
       compradora   lima
       vendedora    vermelho
       neutro       branco

   Mesmo mecanismo dos indicadores da Home: `:has()` le a classe de
   estado que ja esta no elemento do status. Nenhuma linha de JavaScript
   mudou — se o backend classificar diferente amanha, a cor acompanha.

   COMPRADORA USA LIMA, NAO UM VERDE NOVO. Lima e a superficie de
   positivo em todo o painel (Lucro do Mes, drawdown saudavel). Um
   segundo verde aqui criaria duas cores para o mesmo significado, e a
   leitura de superficie deixaria de valer para o sistema inteiro. */

#page-markets .mkt-pano-card:has(.mkt-st-bull) {
  background: var(--lima);
  border-color: var(--lima);
}
#page-markets .mkt-pano-card:has(.mkt-st-bear) {
  background: var(--critico);
  border-color: var(--critico);
}
/* Neutro segue branco: e o estado comum, e superficie so quando informa. */

/* Sobre lima, tinta preta — a lima e clara demais para texto branco. */
#page-markets .mkt-pano-card:has(.mkt-st-bull) .mkt-pano-name { color: rgba(11,15,20,.62) }
#page-markets .mkt-pano-card:has(.mkt-st-bull) .mkt-pano-status { color: #0B0F14 }
#page-markets .mkt-pano-card:has(.mkt-st-bull) .mkt-pano-sub  { color: rgba(11,15,20,.68) }
#page-markets .mkt-pano-card:has(.mkt-st-bull) .mkt-pano-bar  { background: rgba(11,15,20,.16) }
#page-markets .mkt-pano-card:has(.mkt-st-bull) .mkt-pano-bar-fill { background: #0B0F14 }

/* Sobre vermelho, o inverso. Opacidades altas: sobre #BE1F14 nao ha
   folga — ja medido nos cards da Home, onde .82 foi o piso que passou. */
#page-markets .mkt-pano-card:has(.mkt-st-bear) .mkt-pano-name { color: rgba(255,255,255,.82) }
#page-markets .mkt-pano-card:has(.mkt-st-bear) .mkt-pano-status { color: #fff }
#page-markets .mkt-pano-card:has(.mkt-st-bear) .mkt-pano-sub  { color: rgba(255,255,255,.90) }
#page-markets .mkt-pano-card:has(.mkt-st-bear) .mkt-pano-bar  { background: rgba(255,255,255,.22) }
#page-markets .mkt-pano-card:has(.mkt-st-bear) .mkt-pano-bar-fill { background: #fff }

/* Card colorido nao muda de borda no hover: a cor ja e o destaque. */
#page-markets .mkt-pano-card:has(.mkt-st-bull):hover { border-color: var(--lima) }
#page-markets .mkt-pano-card:has(.mkt-st-bear):hover { border-color: var(--critico) }

/* ══════════════════════════════════════════════════════════════════════
   HEATMAP GLOBAL — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   A cor sai do `style="background:...;color:..."` inline e vem por
   classe, com a intensidade num custom property (`--f`, de 0 a 1). Isso
   deixa o tema escuro funcionar sem o JavaScript ter de saber qual tema
   esta ativo — antes o renderer lia `data-theme` para escolher o rgba.

   Saiu tambem o `transform: scale(1.02)` no hover: e animacao.
   ══════════════════════════════════════════════════════════════════════ */

#page-markets .mkt-heatmap-grid { gap: 10px }

#page-markets .mkt-heat-cell {
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  min-height: 74px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  transition: border-color var(--tr);
}
#page-markets .mkt-heat-cell:hover { transform: none; border-color: var(--border2) }
#page-markets .mkt-heat-cell.big { min-height: 92px }

#page-markets .mkt-heat-sym {
  font-size: 12px; font-weight: 600;
  letter-spacing: .02em;
}
#page-markets .mkt-heat-cell.big .mkt-heat-sym { font-size: 15px }
#page-markets .mkt-heat-pct {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
#page-markets .mkt-heat-cell.big .mkt-heat-pct { font-size: 16px }

/* `--f` e a forca do movimento, de 0 a 1. A opacidade do fundo cresce
   com ela; o texto fica no tom 700, que passa em contraste em qualquer
   ponto da escala. */
/* Tons 900 e teto de preenchimento em 0,24. MEDIDO: com o tom 700 e
   teto 0,33, quatro das seis celulas caiam abaixo de 4,5 — a mais forte
   chegava a 3,62. O texto precisa passar na celula MAIS SATURADA da
   escala, nao na media dela. */
#page-markets .heat-pos {
  background: rgba(22,163,74, calc(0.06 + var(--f, 0) * 0.18));
  border-color: transparent;
  color: #14532D;
}
#page-markets .heat-neg {
  background: rgba(190,31,20, calc(0.06 + var(--f, 0) * 0.18));
  border-color: transparent;
  color: #7F1D1D;
}
/* Parado — abaixo de 0,05% nao ha movimento a mostrar. */
#page-markets .heat-zero {
  background: var(--bg);
  color: var(--muted);
}
[data-theme="dark"] #page-markets .heat-pos {
  background: rgba(74,222,128, calc(0.10 + var(--f, 0) * 0.28)); color: #6EE7A0;
}
[data-theme="dark"] #page-markets .heat-neg {
  background: rgba(248,113,113, calc(0.10 + var(--f, 0) * 0.28)); color: #F79A9A;
}

#page-markets .mkt-heat-vazio {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  padding: 34px 0;
}

#page-markets .mkt-heatmap-legend { font-size: 10px; margin-top: 16px }


/* ══════════════════════════════════════════════════════════════════════
   CABECALHO E MENU — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   As duas molduras da tela entram no padrao. Tudo aqui e aparencia:
   nenhuma rota, nenhum onclick, nenhum item de menu mudou.
   ══════════════════════════════════════════════════════════════════════ */

/* ── TICKER ───────────────────────────────────────────────────────── */
.ticker { height: 30px }
.tk-item {
  padding: 0 18px;
  font-size: 10.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* O simbolo era teal — o unico teal que sobrava no painel inteiro, numa
   faixa que atravessa todas as telas. Vira tinta comum. */
.tk-sym { font-weight: 600; color: var(--ink); letter-spacing: .04em }
.tk-pos { color: #15803D }
.tk-neg { color: #B91C1C }

/* A rolagem e funcional: sao 11 pares e a faixa nao comporta os 11 de
   uma vez. Mas quem pediu menos movimento ao sistema recebe a faixa
   parada, mostrando o primeiro trecho. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none }
}

/* ── TOPO ─────────────────────────────────────────────────────────── */
.topbar { box-shadow: none; border-bottom: 1px solid var(--border) }

.topbar-page-title {
  font-size: 16px; font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ink);
}
.topbar-page-sub {
  font-size: 11px; color: var(--muted); margin-top: 3px;
}

.topbar-right { gap: 10px }
/* Gradiente teal->marrom no avatar: era o elemento mais colorido do
   cabecalho e nao carregava informacao. */
.tb-avatar {
  background: var(--grafite);
  border: 1px solid var(--border);
  width: 32px; height: 32px;
}
.tb-toggle-btn { border-radius: 8px; border-color: var(--border); color: var(--muted) }
.tb-toggle-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--hover) }

/* ── MENU ─────────────────────────────────────────────────────────── */
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -.03em }
.brand-name em { color: var(--ink) }   /* o "|AI" era teal */

/* CORRECAO: com a sidebar em 212px (era 240), "Quantitative Intelligence
   Platform" a 9px com .08em de tracking nao cabia e saia cortado em
   "...INTELLIGENCE PLAT". Menos tracking e uma pitada menos de corpo
   fazem o texto caber inteiro na largura nova. */
.brand-sub {
  /* MEDIDO duas vezes: a 9px/.08em pedia mais de 200px e saia
     "...INTELLIGENCE PLAT"; a 8.5px/.03em ainda pedia 183 para 179
     disponiveis. A 8px sem tracking extra cabe com folga. */
  font-size: 8px; font-weight: 600;
  letter-spacing: 0;
  margin-top: 2px;
  white-space: nowrap;
}

.sb-section-title {
  font-size: 8.5px; font-weight: 600;
  letter-spacing: .16em;
  padding: 14px 8px 6px;
}
.sidebar .nav-item + .sb-section-title { margin-top: 6px }

/* Sair: cinza em repouso, vermelho so no hover. Vermelho permanente num
   item de menu treina o olho a ignora-lo — mesma razao do botao de
   fechar posicao. */
.nav-item.nav-sair { color: var(--muted) }
.nav-item.nav-sair:hover { color: var(--red); background: var(--red2) }
.nav-item.nav-sair svg { opacity: .65 }
.nav-item.nav-sair:hover svg { opacity: 1 }


/* ══════════════════════════════════════════════════════════════════════
   GEOPOLITICA · NOTICIAS & INSIGHTS · RESULTADOS — 01/09/2026
   ══════════════════════════════════════════════════════════════════════
   As tres ultimas paginas entram no padrao. Mesma cartilha de sempre:
   peso 800/900 vira 600, pilula vira contorno, caixa vira filete, anel
   e medidor saem, e a cor fica so onde e estado.

   `nt-*` (76 regras) e `res-*` (14) vivem num <style> DENTRO do
   index.html, que carrega depois do hakan.css — por isso levam prefixo
   de pagina, que sobe a especificidade. `geo-*` mora aqui e nao precisa.
   ══════════════════════════════════════════════════════════════════════ */

/* ── PESOS ────────────────────────────────────────────────────────── */
#page-news :is(.nt-kpi-val, .nt-detail-title, .nt-section-title, .nt-badge,
               .nt-live, .nt-cat, .nt-title),
#page-results :is(.res-kpi span, .res-title, .res-btn, .res-day span, .res-val),
.geo-title, .geo-badge, .geo-region-tag, .geo-rank, .geo-event-time { font-weight: 600 }

/* ── TITULOS DE SECAO ─────────────────────────────────────────────── */
#page-news .nt-section-title, #page-results .res-title, .geo-title {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── ETIQUETAS: preenchida -> contorno ────────────────────────────── */
#page-news :is(.nt-badge, .nt-cat, .nt-live),
.geo-badge, .geo-region-tag {
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  letter-spacing: .05em;
}
#page-news .nt-live { padding: 5px 12px }
/* `.nt-live` marca "ao vivo" — isso e estado, e a cor fica. */
#page-news .nt-live { color: #15803D; border-color: #86C9A2 }
#page-news .nt-badge.urg { color: #B91C1C; border-color: #E9A2A2 }

/* Item selecionado do feed: filete a esquerda em vez de faixa teal. */
#page-news .nt-item.active {
  background: var(--hover);
  box-shadow: inset 2px 0 0 var(--ink);
}

/* ── NUMEROS ──────────────────────────────────────────────────────── */
#page-news .nt-kpi-val, #page-results .res-kpi b, #page-results .res-val {
  font-size: 26px; font-weight: 600;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#page-news .nt-kpi-lbl, #page-results .res-kpi span {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
}
#page-news .nt-detail-title { font-size: 19px; letter-spacing: -.025em; color: var(--ink) }

/* ── SUPERFICIES ──────────────────────────────────────────────────── */
#page-news :is(.nt-kpi, .nt-left, .nt-right, .nt-shell),
#page-results :is(.res-panel, .res-kpi),
.geo-panel, .geo-events-panel, .geo-map-panel {
  border-radius: var(--r);
  border-color: var(--border);
  box-shadow: none;
}

#page-results .res-btn, #page-news .nf-btn, .geo-panel-head button {
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  border-color: var(--border);
  background: var(--white);
}
#page-results .res-btn:hover, #page-news .nf-btn:hover, .geo-panel-head button:hover {
  border-color: var(--border2); color: var(--ink); background: var(--hover);
}
#page-results .res-btn.active, #page-news .nf-btn.active {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

/* ── CALENDARIO DE RESULTADOS ─────────────────────────────────────── */
/* Mesmo tratamento do Calendario de Performance da Home: superficie
   suave, sem borda colorida. */
#page-results .res-day { border-radius: 8px; border-color: var(--border) }
#page-results .res-day.pos { background: var(--green2); border-color: transparent }
#page-results .res-day.neg { background: var(--red2);   border-color: transparent }
#page-results .res-day span { font-weight: 600; font-variant-numeric: tabular-nums }

/* ── GEOPOLITICA: os medidores ────────────────────────────────────── */
/* `.geo-conf` era um anel de 58px em conic-gradient, e `.geo-rank` um
   circulo preenchido com o numero dentro. Os dois viram numero. */
.geo-conf {
  width: auto; height: auto;
  background: none !important;
  display: block;
  text-align: right;
}
.geo-conf b { font-size: 17px; font-weight: 600; letter-spacing: -.03em;
              font-variant-numeric: tabular-nums; color: var(--ink) }
.geo-rank {
  width: auto; height: auto;
  background: none !important;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.geo-event-row.high .geo-rank { color: #B91C1C }
.geo-event-row.attention .geo-rank { color: #B45309 }
.geo-event-row.low .geo-rank { color: var(--muted) }

/* O halo de 4px em volta do ponto da linha do tempo sai: numa lista de
   eventos, cada ponto virava um alvo aceso. */
.geo-timeline i { box-shadow: none !important; width: 7px; height: 7px }

.geo-event-row, .geo-timeline div, .geo-sensitive div, .geo-impact-table > div,
.geo-risk-rank > div { border-bottom: 1px solid var(--border) }
.geo-event-row:hover, .geo-timeline div:hover, .geo-sensitive div:hover,
.geo-impact-table div:not(.head):hover, .geo-risk-rank div:not(.head):hover {
  background: var(--hover);
}
.geo-scenarios article { border-radius: var(--r); background: var(--white) }
.geo-scenarios article:hover { border-color: var(--border2) }
.geo-scenarios b { font-size: 24px; font-weight: 600; letter-spacing: -.04em }

/* Faixa sem cotacao: o MT5 nao respondeu. Fica dito, nao preenchido. */
.tk-vazio { color: var(--muted); font-style: normal; border-right: 0 }

/* ══════════════════════════════════════════════════════════════════════
   CALENDÁRIO DE PERFORMANCE — grade estourando o card (02/09/2026)
   ══════════════════════════════════════════════════════════════════════
   MEDIDO em 1366px de tela: a grade pedia 548px dentro de um card com
   498px úteis. Cinquenta pixels de vazamento — os sábados e domingos
   saíam por baixo da borda direita. Em 1600px+ cabia, e era por isso
   que o defeito parecia intermitente.

   CAUSA: `repeat(7, 1fr)` é `repeat(7, minmax(auto, 1fr))`. O `auto`
   de mínimo impede a coluna de encolher abaixo do conteúdo — e o
   conteúdo era "+$3.421,55" (56px) mais 18px de caixa = 74px por dia.
   Sete vezes 74, mais seis vãos de 5px: 548. A grade não cabia, então
   empurrou o card em vez de se ajustar.

   CORREÇÃO em três camadas, da mais estrutural para a cosmética:

     1. minmax(0, 1fr) — a coluna passa a poder encolher. Isto sozinho
        já garante que a grade NUNCA mais ultrapasse o card, em
        qualquer largura de tela, com qualquer valor.
     2. respiro lateral de 8px para 6px e valor de 11px para 10,5px:
        "+3.421,55" ocupa 49,4px nos 52,9px disponíveis. Agora o número
        cabe de verdade em vez de apenas ser cortado.
     3. reticências como rede de segurança: um dia de cinco dígitos
        (nunca houve, mas pode haver) trunca dentro da célula. O valor
        exato continua no `title`, ao passar o mouse.

   O cifrão saiu da célula — 6,3px por dia que não sobravam. Ele
   permanece no "Lucro Total" logo acima e no title de cada dia.
   ══════════════════════════════════════════════════════════════════════ */

.perf-cal-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-day {
  padding: 7px 6px;
  min-width: 0;
  overflow: hidden;
}

.cal-day-pft {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-day-num, .cal-day-cnt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }


/* ══════════════════════════════════════════════════════════════════════
   CAPITAL PERFORMANCE — três séries (02/09/2026)
   ══════════════════════════════════════════════════════════════════════
   As cores vivem aqui E em charts.js. Não dá para o canvas ler um
   custom property por série sem recalcular a cada frame, então os dois
   lados usam os mesmos hex — se um mudar, o outro tem de mudar junto.
   É o único acoplamento do card, e está declarado.

     Equity  #16A34A / #4ADE80 (escuro)
     Balance #0E5A55 / #7FD3CB
     Saques  #C77D0A / #F0B429   — âmbar, NUNCA vermelho: saque não é
                                   prejuízo, e a cor não pode dizer que é.
   ══════════════════════════════════════════════════════════════════════ */

.cap-legenda {
  display: flex; flex-wrap: wrap;
  gap: 16px; margin-top: 12px;
}
.cap-leg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--muted);
  white-space: nowrap;
}
.cap-leg i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px }
.cap-leg-eq  i { background: #16A34A }
.cap-leg-bal i { background: #0E5A55 }
.cap-leg-saq i { background: #C77D0A }
:root:not([data-theme="light"]) .cap-leg-eq  i { background: #4ADE80 }
:root:not([data-theme="light"]) .cap-leg-bal i { background: #7FD3CB }
:root:not([data-theme="light"]) .cap-leg-saq i { background: #F0B429 }
[data-theme="dark"] .cap-leg-eq  i { background: #4ADE80 }
[data-theme="dark"] .cap-leg-bal i { background: #7FD3CB }
[data-theme="dark"] .cap-leg-saq i { background: #F0B429 }
[data-theme="light"] .cap-leg-eq  i { background: #16A34A }
[data-theme="light"] .cap-leg-bal i { background: #0E5A55 }
[data-theme="light"] .cap-leg-saq i { background: #C77D0A }

/* Quinta coluna: o resumo das três séries. Mais larga que as outras
   porque carrega rótulo E valor na mesma linha. */
.equity-metrics { grid-template-columns: repeat(4, 1fr) minmax(0, 1.35fr) }
.cap-resumo {
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; padding-right: 0;
}
.cap-res-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--muted);
}
.cap-res-row b {
  margin-left: auto;
  font-size: 12px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cap-res-row .cap-saq-val { color: #C77D0A }
:root:not([data-theme="light"]) .cap-res-row .cap-saq-val { color: #F0B429 }
[data-theme="dark"]  .cap-res-row .cap-saq-val { color: #F0B429 }
[data-theme="light"] .cap-res-row .cap-saq-val { color: #C77D0A }

/* Data do melhor/pior dia: sublinha discreta, do tamanho do rótulo. */
.em-sub {
  font-size: 9.5px; font-weight: 500; color: var(--muted);
  margin-top: 3px; font-variant-numeric: tabular-nums;
}

/* Card estreito: o resumo desce para uma faixa própria em vez de
   espremer as quatro métricas. */
@container (max-width: 620px) {
  .equity-metrics { grid-template-columns: repeat(2, 1fr) }
  .cap-resumo { grid-column: 1 / -1; border-left: 0; padding-left: 0;
                padding-top: 14px; border-top: 1px solid var(--border) }
}


/* ══════════════════════════════════════════════════════════════════════
   CONFIGURAÇÕES → ATIVOS PARA OPERAÇÃO (02/09/2026)
   ══════════════════════════════════════════════════════════════════════
   Reaproveita `.pos-table` (mesma tabela das Posições Abertas) e
   `.toggle`/`.tslider`, que já existiam. Aqui só entram as diferenças:
   coluna de nome com o botão, colunas numéricas estreitas à direita e
   o estado "desligado".
   ══════════════════════════════════════════════════════════════════════ */

/* Os dois cards dividem a linha. O de Ativos precisa de mais espaço que
   o de Perfil: cinco colunas contra um formulário de campo único. */
.ativos-linha { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start }

.ativos-wrap { overflow-x: auto; margin-top: 4px }
.ativos-table { min-width: 460px }
/* Colunas em PORCENTAGEM, não em pixels. Com largura fixa nas quatro
   numéricas, a coluna do nome ficava com `auto` e engolia toda a folga:
   584px dos 888 da tabela, deixando 474px de vazio entre o nome do ativo
   e o campo Take. Em porcentagem, os quatro campos se distribuem pela
   linha e acompanham a largura do card. */
.ativos-table th:first-child,
.ativos-table td.ativo-td-nome { width: 26% }
.ativos-table th.ativos-num,
.ativos-table td:not(.ativo-td-nome) { text-align: right; width: 18.5% }
.ativos-table td { padding: 7px 8px }
.ativos-table th { padding: 8px }

.ativo-td-nome { display: flex; align-items: center; gap: 12px }
.ativo-nome {
  font-size: 12px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Desligado: o nome riscado diz o estado sem depender da cor, e os
   campos ficam inertes — número editável num ativo que não opera é
   convite a achar que a mudança vale. */
.ativo-off .ativo-nome {
  color: var(--muted); text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ativo-off .ativo-num { opacity: .45 }

.ativos-table .ativo-num {
  width: 100%; max-width: 118px; text-align: right; height: 30px;
  padding: 0 7px; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ativos-table .ativo-num:disabled { cursor: not-allowed; background: var(--bg) }
/* O contador de setas do input rouba ~16px de uma coluna de 78px. */
.ativos-table .ativo-num::-webkit-outer-spin-button,
.ativos-table .ativo-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.ativos-table .ativo-num { -moz-appearance: textfield; appearance: textfield }

.ativos-rodape {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px; flex-wrap: wrap;
}
.ativos-contagem { font-size: 11.5px; color: var(--muted); font-weight: 500 }

.ativos-nota {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px; line-height: 1.7; color: var(--muted);
}
.ativos-nota b { color: var(--ink); font-weight: 600 }

/* Card estreito: o de Ativos passa a ocupar a linha inteira em vez de
   espremer cinco colunas em menos de 460px. */
@media (max-width: 1200px) {
  .ativos-linha { grid-template-columns: 1fr }
}