/*
 * ══════════════════════════════════════════════════════════════════════
 *  CAOSmarada — Ultra-Premium Layer v2.0
 *  Redesign cirúrgico: cada seletor mapeia um elemento real do DOM.
 *  Importar APÓS main.css no index.html.
 * ══════════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────
   FONTES
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap');

/* ─────────────────────────────────────────────────────────────
   TOKENS — sobrescreve as variáveis base
   ───────────────────────────────────────────────────────────── */
:root {
  --bg-primary:        #080808;
  --bg-secondary:      #0a0a0f;
  --bg-card:           rgba(255,255,255,0.025);
  --bg-card-hover:     rgba(255,255,255,0.048);
  --border-card:       rgba(255,255,255,0.065);
  --glass-bg:          rgba(255,255,255,0.028);
  --glass-border:      rgba(255,255,255,0.07);
  --accent:            #8b5cf6;
  --accent-light:      #a78bfa;
  --accent-glow:       0 0 28px rgba(139,92,246,0.22);
  --neon-green:        #00ff88;
  --neon-green-glow:   0 0 14px rgba(0,255,136,0.5);
  --neon-red:          #ff3366;
  --neon-red-glow:     0 0 14px rgba(255,51,102,0.5);
  --neon-blue:         #0ea5e9;
  --neon-yellow:       #f59e0b;
  --text-primary:      #eef2f7;
  --text-secondary:    #64748b;
  --text-muted:        #2e3347;
  --radius:            14px;
  --radius-sm:         10px;
  --font-mono:         'JetBrains Mono', 'Cascadia Code', monospace;
  --font-ui:           'Space Grotesk', 'Inter', sans-serif;
  --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
}
:root.light-theme {
  --bg-primary:        #f1f5f9;
  --bg-secondary:      #ffffff;
  --bg-card:           #ffffff;
  --bg-card-hover:     #f8fafc;
  --border-card:       #e2e8f0;
  --glass-bg:          rgba(255,255,255,0.88);
  --glass-border:      rgba(0,0,0,0.08);
  --neon-green:        #059669;
  --neon-red:          #e11d48;
  --neon-blue:         #0284c7;
  --neon-yellow:       #b45309;
  --neon-green-glow:   none;
  --neon-red-glow:     none;
  --text-primary:      #0f172a;
  --text-secondary:    #475569;
  --text-muted:        #94a3b8;
  --accent:            #7c3aed;
  --accent-light:      #8b5cf6;
  --accent-glow:       0 4px 15px rgba(124,58,237,0.18);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — overrides completos para elementos hardcoded
   ══════════════════════════════════════════════════════════════ */

/* ── Sidebar ── */
.light-theme .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-right: 1px solid #e2e8f0;
  box-shadow: 2px 0 16px rgba(0,0,0,0.07);
}
.light-theme .sidebar-brand { border-bottom: 1px solid #e2e8f0; }
.light-theme .sidebar-brand p { color: #94a3b8; }
.light-theme .sidebar-brand .marada { color: #1e293b; }
.light-theme .nav-section { color: #94a3b8; }
.light-theme .nav-item { color: #64748b; }
.light-theme .nav-item:hover { background: rgba(0,0,0,0.04); color: #1e293b; }
.light-theme .nav-item.active {
  background: linear-gradient(90deg, rgba(124,58,237,0.1) 0%, rgba(124,58,237,0.03) 100%);
  color: #7c3aed;
}
.light-theme .nav-item.active::before { box-shadow: none; }
.light-theme .nav-item .badge { background: rgba(124,58,237,0.08); color: #7c3aed; }
.light-theme .sidebar-footer { border-top: 1px solid #e2e8f0; }
.light-theme .sidebar-footer p { color: #94a3b8; }
.light-theme #btn-theme-toggle {
  background: rgba(0,0,0,0.04) !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}
.light-theme #btn-theme-toggle:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(124,58,237,0.3) !important;
}

/* ── KPI Cards ── */
.light-theme .kpi-card .kpi-label { color: #64748b; }
.light-theme .kpi-card:hover { background: #f8fafc; border-color: rgba(124,58,237,0.2); }
.light-theme .kpi-card::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.03), transparent); }

/* ── Page Header ── */
.light-theme .page-header { border-bottom: 1px solid #e2e8f0; }
.light-theme .page-header h2 {
  background: linear-gradient(120deg, #0f172a 0%, #475569 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* ── Chart Main Panel ── */
.light-theme .chart-main {
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04) !important;
}
.light-theme .chart-main::before {
  background: radial-gradient(ellipse at 0% 0%, rgba(124,58,237,0.04) 0%, transparent 65%);
}
.light-theme .chart-main .chart-title { color: #0f172a; }

/* ── Toolbar: container de overlays ── */
.light-theme .chart-main .chart-toolbar > div:nth-child(2) {
  background: rgba(0,0,0,0.025) !important;
  border-color: rgba(0,0,0,0.07) !important;
}
.light-theme .chart-main .chart-toolbar > div:nth-child(2) > span:first-child {
  color: #94a3b8 !important;
}
.light-theme .chart-main .chart-toolbar label {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.09) !important;
  color: #475569 !important;
}
.light-theme .chart-main .chart-toolbar label:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.16) !important;
  color: #1e293b !important;
}
.light-theme .chart-main .chart-toolbar input[type="checkbox"] { accent-color: #7c3aed; }

/* ── Period Buttons ── */
.light-theme .chart-main .chart-periods {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.07);
}
.light-theme .chart-main .chart-periods button { color: #64748b; }
.light-theme .chart-main .chart-periods button:hover {
  background: rgba(0,0,0,0.05);
  color: #1e293b;
}
.light-theme .chart-main .chart-periods .period-sep { background: rgba(0,0,0,0.08); }

/* ── Chart Action Buttons (zoom, fullscreen) ── */
.light-theme .chart-action-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #64748b !important;
}
.light-theme .chart-action-btn:hover {
  background: rgba(124,58,237,0.08) !important;
  border-color: rgba(124,58,237,0.3) !important;
  color: #7c3aed !important;
  box-shadow: 0 0 10px rgba(124,58,237,0.12) !important;
}
.light-theme .chart-action-btn.active-btn {
  background: rgba(124,58,237,0.12) !important;
  border-color: rgba(124,58,237,0.35) !important;
  color: #7c3aed !important;
}

/* ── OHLC Legend ── */
.light-theme #ohlc-legend {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.05);
}
.light-theme #ohlc-legend span { color: #94a3b8 !important; }

/* ── Chart Loading Overlay ── */
.light-theme #chart-loading-overlay {
  background: rgba(241,245,249,0.75) !important;
}

/* ── Chart containers ── */
.light-theme #tv-chart-container { border-color: rgba(0,0,0,0.05); }
.light-theme #rsi-chart-container,
.light-theme #macd-chart-container {
  border-color: rgba(0,0,0,0.06) !important;
  background: rgba(0,0,0,0.008) !important;
}

/* ── Indicator Cards (RSI, MACD, Stochastic, Regime) ── */
.light-theme .indicator-card {
  background: rgba(255,255,255,0.95);
  border-color: #e2e8f0;
}
.light-theme .indicator-card h4 { color: #64748b !important; }
.light-theme .indicator-card .ind-label { color: #94a3b8 !important; }

/* ── Watchlist Panel ── */
.light-theme .watchlist-panel {
  background: rgba(255,255,255,0.97) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
}
.light-theme .watchlist-header { border-bottom: 1px solid #e2e8f0; }
.light-theme .watchlist-header h3 { color: #64748b; }
.light-theme .watchlist-header button {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #7c3aed !important;
}
.light-theme .watchlist-header button:hover {
  background: rgba(124,58,237,0.08) !important;
  border-color: rgba(124,58,237,0.25) !important;
}
.light-theme .wl-item:hover { background: rgba(0,0,0,0.03); }
.light-theme .wl-item .wl-ticker { color: #1e293b; }
.light-theme .wl-item .wl-name { color: #94a3b8 !important; }

/* ── Generic Panels ── */
.light-theme .panel {
  background: rgba(255,255,255,0.96) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}
.light-theme .panel-header { border-bottom: 1px solid #e2e8f0; }
.light-theme .panel-header h3 { color: #1e293b; }

/* ── Tables ── */
.light-theme thead th {
  color: #64748b !important;
  border-bottom-color: #e2e8f0;
  background: rgba(0,0,0,0.02);
}
.light-theme tbody tr { border-bottom-color: rgba(0,0,0,0.05); }
.light-theme tbody tr:hover { background: rgba(124,58,237,0.04); }
.light-theme tbody td { color: #1e293b; }

/* ── Buttons ── */
.light-theme .btn-secondary {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #475569 !important;
}
.light-theme .btn-secondary:hover {
  background: rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.18) !important;
  color: #1e293b !important;
}

/* ── Form Inputs ── */
.light-theme .form-input,
.light-theme input:not([type="checkbox"]):not([type="radio"]),
.light-theme select,
.light-theme textarea {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
  color-scheme: light;
}
.light-theme .form-input:focus,
.light-theme input:not([type="checkbox"]):not([type="radio"]):focus,
.light-theme select:focus,
.light-theme textarea:focus {
  background: #ffffff !important;
  border-color: #7c3aed !important;
}
/* Força options com fundo sólido (evita texto branco em dropdown) */
.light-theme select option {
  background: #ffffff;
  color: #1e293b;
}
/* Dark theme: options com fundo sólido escuro */
select option {
  background: #12121e;
  color: rgba(255,255,255,0.85);
}

/* ── Fullscreen Panel ── */
.light-theme #fs-info-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.99) 100%) !important;
  border-left: 1px solid rgba(124,58,237,0.15) !important;
  box-shadow: -8px 0 32px rgba(0,0,0,0.08) !important;
}
.light-theme .fs-wl-ticker { color: #1e293b !important; }
.light-theme .fs-wl-price { color: #64748b !important; }
.light-theme .fs-ind-cell {
  background: rgba(0,0,0,0.025) !important;
  border-color: rgba(0,0,0,0.07) !important;
}
.light-theme .fs-ind-cell .fs-ind-label { color: #94a3b8 !important; }

/* ── Predictions: KPI cards e horizon ── */
.light-theme #pred-kpi-cards .kpi-card,
.light-theme #tracker-scorecard .kpi-card,
.light-theme #page-predictions .kpi-strip .kpi-card {
  background: rgba(255,255,255,0.92) !important;
}
.light-theme .horizon-card {
  background: rgba(255,255,255,0.92) !important;
  border-color: #e2e8f0 !important;
}
.light-theme .horizon-card-label { color: #64748b; }
.light-theme .horizon-card-metric-name { color: #94a3b8; }
.light-theme .horizon-progress { background: rgba(0,0,0,0.06); }
.light-theme .kpi-diff { color: #94a3b8; }
.light-theme .pred-section-title { color: #94a3b8; }
.light-theme .pred-history-card {
  background: rgba(255,255,255,0.92) !important;
  border-color: #e2e8f0 !important;
}
.light-theme #tracker-history-body tr { border-bottom-color: rgba(0,0,0,0.04); }
.light-theme #tracker-history-body tr:hover { background: rgba(124,58,237,0.04); }

/* ── Chips / Badges status ── */
.light-theme .chip {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.09);
  color: #64748b;
}

/* ── News ── */
.light-theme .news-article-card {
  background: rgba(255,255,255,0.96) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
}
.light-theme .news-tab-btn { color: #64748b !important; }
.light-theme .news-tab-btn:hover { color: #1e293b !important; }
.light-theme .news-tab-btn.active { color: #7c3aed !important; }

/* ── Skeleton Loader ── */
.light-theme .skeleton {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.08) 40%,
    rgba(124,58,237,0.04) 50%,
    rgba(0,0,0,0.08) 60%,
    rgba(0,0,0,0.04) 100%);
  background-size: 700px 100%;
}

/* ─────────────────────────────────────────────────────────────
   RESET BASE
   ───────────────────────────────────────────────────────────── */
*, html { touch-action: manipulation; }
body {
  font-family: var(--font-ui);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.45); }

/* Tabular-nums em TODOS os dados financeiros */
.kpi-price, .kpi-change, .ind-value, .wl-price, .wl-change,
.fs-wl-price, .fs-wl-chg, #fs-price-big, #fs-price-change-big,
#fs-clock, #ohlc-legend strong, #ohlc-legend span,
.pred-history-card-val, td, .horizon-card-metric-value,
#tracker-hit-rate, #tracker-mape, #tracker-direction,
#tracker-streak, #tracker-total, #tracker-confidence,
#tracker-sharpe, #tracker-sortino, #tracker-best-mape, #tracker-worst-mape {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — redesign completo
   ══════════════════════════════════════════════════════════════ */
.sidebar {
  background: linear-gradient(180deg,
    rgba(10,10,16,1)   0%,
    rgba(8,8,12,1)   100%);
  border-right: 1px solid rgba(255,255,255,0.045);
  box-shadow: 2px 0 32px rgba(0,0,0,0.6);
  width: 218px;
  min-width: 218px;
}

.sidebar-brand {
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  position: relative;
  overflow: hidden;
}
.sidebar-brand::before {
  content: '';
  position: absolute;
  top: -30px; left: -20px;
  width: 120px; height: 80px;
  background: radial-gradient(ellipse, rgba(139,92,246,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.sidebar-brand h1 {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.sidebar-brand .caos {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 50%, #06b6d4 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar-brand .marada { color: rgba(255,255,255,0.75); font-weight: 300; }
.sidebar-brand p {
  font-size: 9px; letter-spacing: 2.5px; color: rgba(255,255,255,0.18);
  text-transform: uppercase; margin-top: 4px; font-family: var(--font-mono);
}

.nav-section {
  font-size: 8.5px; letter-spacing: 2px; color: rgba(255,255,255,0.18);
  padding: 16px 14px 5px; font-weight: 700; text-transform: uppercase;
}

.nav-item {
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.42);
  padding: 9px 12px; border-radius: 9px; gap: 9px;
  transition: background 150ms var(--ease-out), color 150ms, transform 150ms;
}
.nav-item:hover {
  background: rgba(255,255,255,0.055);
  color: rgba(255,255,255,0.85);
  transform: translateX(2px);
}
.nav-item.active {
  background: linear-gradient(90deg,
    rgba(139,92,246,0.18) 0%,
    rgba(139,92,246,0.06) 100%);
  color: var(--accent-light);
}
.nav-item.active::before {
  width: 3px; height: 22px;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  box-shadow: 0 0 8px rgba(139,92,246,0.6);
  border-radius: 0 3px 3px 0;
}
.nav-item .icon { font-size: 14px; width: 18px; text-align: center; opacity: 0.8; }
.nav-item .badge {
  margin-left: auto;
  background: rgba(139,92,246,0.18);
  color: var(--accent-light);
  font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 700;
  font-family: var(--font-mono);
}
.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.sidebar-footer p { font-size: 9px; color: rgba(255,255,255,0.15); }
.status-dot {
  background: var(--neon-green);
  box-shadow: var(--neon-green-glow);
  animation: live-pulse 2.4s ease-in-out infinite;
}
#btn-theme-toggle {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.07) !important;
  font-size: 11px !important; border-radius: 9px !important;
  transition: all 150ms !important;
}
#btn-theme-toggle:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(139,92,246,0.35) !important;
}

/* ══════════════════════════════════════════════════════════════
   PAGE / MAIN — container
   ══════════════════════════════════════════════════════════════ */
.main { background: var(--bg-primary); }
.page.active { animation: page-in 280ms var(--ease-out) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.045);
}
.page-header h2 {
  font-family: var(--font-ui);
  font-size: 19px; font-weight: 800; letter-spacing: -0.04em;
  background: linear-gradient(120deg,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-header .subtitle {
  font-size: 11px; color: var(--text-secondary); margin-top: 3px;
}

/* ══════════════════════════════════════════════════════════════
   KPI STRIP — os 6 cards de cima
   ══════════════════════════════════════════════════════════════ */
.kpi-strip { gap: 10px; margin-bottom: 18px; }

.kpi-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: all 200ms var(--ease-out);
  position: relative; overflow: hidden;
  padding: 12px 14px 14px;
  /* Linha de topo decorativa — default transparente */
  border-top: 2px solid transparent;
}
.kpi-card::after {
  /* Reflexo de luz — efeito vidro premium */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  pointer-events: none;
}
.kpi-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(139,92,246,0.32);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), var(--accent-glow);
  transform: translateY(-2px);
}
.kpi-card.selected {
  border-color: var(--accent) !important;
  background: rgba(139,92,246,0.07);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.3), var(--accent-glow);
}
/* Borda topo colorida: JS adiciona .up-card / .down-card */
.kpi-card.up-card   { border-top-color: var(--neon-green); }
.kpi-card.down-card { border-top-color: var(--neon-red);   }
.kpi-card.up-card:hover   {
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), var(--neon-green-glow) !important;
}
.kpi-card.down-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), var(--neon-red-glow) !important;
}

.kpi-card .kpi-label {
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,0.32);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.kpi-card .kpi-price {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
  margin: 5px 0 6px;
  line-height: 1.25;
  color: var(--text-primary);
  display: block;
  letter-spacing: -0.3px;
}
.kpi-card .kpi-change {
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  line-height: 1.3;
  position: relative;
  z-index: 1;          /* fica acima do sparkline absoluto */
}
.kpi-card .kpi-change.up   { color: var(--neon-green); }
.kpi-card .kpi-change.down { color: var(--neon-red);   }

/* Sparkline: absoluto no canto inferior direito, atrás do texto */
.kpi-card .kpi-sparkline {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 0 !important;
  opacity: 0.3 !important;
  pointer-events: none;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   ██  ÁREA DO GRÁFICO — O HERÓI DA DASHBOARD  ██
   ══════════════════════════════════════════════════════════════ */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 278px;
  gap: 14px;
  margin-bottom: 18px;
}

.chart-main {
  background: rgba(10,10,16,0.92);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 20px 60px rgba(0,0,0,0.5);
}

/* Brilho sutil no canto superior esquerdo */
.chart-main::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 300px; height: 200px;
  background: radial-gradient(ellipse at 0% 0%,
    rgba(139,92,246,0.07) 0%,
    transparent 65%);
  pointer-events: none; z-index: 0;
}
.chart-main > * { position: relative; z-index: 1; }

/* ── TOOLBAR ── */
.chart-main .chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.chart-main .chart-title {
  font-family: var(--font-ui);
  font-size: 15px; font-weight: 800; letter-spacing: -0.04em;
  color: var(--text-primary);
}

/* Badge de variação no ticker label */
#chart-price-change {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 6px;
  border: 1px solid transparent;
  transition: all 200ms;
}

/* ── PAINEL DE OVERLAYS — redesign ── */
.chart-main .chart-toolbar > div:nth-child(2) {
  /* Container dos overlays */
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
}
.chart-main .chart-toolbar > div:nth-child(2) > span:first-child {
  /* Label "OVERLAYS:" */
  font-family: var(--font-mono) !important;
  font-size: 8.5px !important; letter-spacing: 1.5px !important;
  color: rgba(255,255,255,0.2) !important;
  font-weight: 700 !important;
}

/* Checkboxes → Styled como pills coloridos */
.chart-main .chart-toolbar label {
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: all 150ms !important;
  min-height: 24px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
.chart-main .chart-toolbar label:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.chart-main .chart-toolbar input[type="checkbox"] {
  width: 11px; height: 11px;
  accent-color: var(--accent);
  cursor: pointer;
}

#btn-log-scale {
  font-family: var(--font-mono) !important;
  font-size: 9px !important; font-weight: 700 !important;
  padding: 3px 8px !important; border-radius: 20px !important;
  letter-spacing: 0.5px !important;
}

/* ── PERIOD BUTTONS — trading terminal style ── */
.chart-main .chart-periods {
  display: flex; gap: 1px; align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 9px;
  padding: 3px;
}
.chart-main .chart-periods button {
  font-family: var(--font-mono) !important;
  font-size: 10px; font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: all 150ms var(--ease-out);
  letter-spacing: 0.3px;
  min-height: 26px;
}
.chart-main .chart-periods button:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.75);
}
.chart-main .chart-periods button.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 14px rgba(139,92,246,0.5),
              inset 0 1px 0 rgba(255,255,255,0.2);
}
.chart-main .chart-periods .period-sep {
  width: 1px; height: 14px;
  background: rgba(255,255,255,0.08);
  margin: 0 2px; flex-shrink: 0;
}

/* Botões de ação do gráfico (zoom, fullscreen) */
.chart-action-btn {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.4) !important;
  border-radius: 7px !important;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 150ms !important;
  padding: 0 !important;
}
.chart-action-btn:hover {
  background: rgba(139,92,246,0.15) !important;
  border-color: rgba(139,92,246,0.4) !important;
  color: var(--accent-light) !important;
  box-shadow: 0 0 10px rgba(139,92,246,0.2) !important;
}
.chart-action-btn.active-btn {
  background: rgba(139,92,246,0.22) !important;
  border-color: rgba(139,92,246,0.5) !important;
  color: var(--accent-light) !important;
}
/* Fullscreen button com scale animation */
#btn-fullscreen:hover { transform: scale(1.1); }
#btn-fullscreen:active { transform: scale(0.95); }

/* ── OHLC LEGEND — premium ── */
#ohlc-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 5px 10px !important;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.02);
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.04);
  font-size: 11px !important;
  min-height: 28px;
  transition: opacity 200ms;
}
#ohlc-legend:empty { border-color: transparent; background: transparent; }
#ohlc-legend span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.25);
  font-size: 10px;
}
#ohlc-legend strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
}

/* ── CHART CONTAINER ── */
#tv-chart-container {
  width: 100%;
  height: 420px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  transition: height 200ms var(--ease-out);
  position: relative;
}

/* ── CHART LOADING OVERLAY — sobrepõe o gráfico sem deslocá-lo ── */
#chart-loading-overlay {
  position: absolute !important;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8,8,14,0.38) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 10px !important;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
#chart-loading-overlay.active {
  display: flex;
}
.chart-spinner {
  width: 32px; height: 32px;
  border: 2px solid rgba(139,92,246,0.12);
  border-top-color: var(--accent);
  border-right-color: var(--accent-light);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

/* ── RSI / MACD — sub-charts premium ── */
#rsi-chart-container,
#macd-chart-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.01);
}
#rsi-chart-container  { height: 130px; }
#macd-chart-container { height: 130px; }

/* Label de título dos sub-charts — posicionado sobre o gráfico */
#rsi-chart-container::before,
#macd-chart-container::before {
  content: attr(data-label);
  position: absolute; top: 6px; left: 10px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  z-index: 10; pointer-events: none;
}
#rsi-chart-container  { --label-color: rgba(168,85,247,0.6); }
#macd-chart-container { --label-color: rgba(33,150,243,0.6); }
#rsi-chart-container::before  { color: rgba(168,85,247,0.6); }
#macd-chart-container::before { color: rgba(33,150,243,0.5); }

/* ══════════════════════════════════════════════════════════════
   ██  FULLSCREEN MODE — EXPERIÊNCIA CINEMA  ██
   ══════════════════════════════════════════════════════════════ */
.chart-main.chart-fullscreen {
  background: #06060a !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Cancela o ::before em fullscreen */
.chart-main.chart-fullscreen::before { display: none; }

/* Container do gráfico em fullscreen */
.chart-main.chart-fullscreen #tv-chart-container {
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* ── Painel lateral do fullscreen (screensaver) ── */
#fs-info-panel {
  background: linear-gradient(180deg,
    rgba(8,8,16,0.97) 0%,
    rgba(6,6,12,0.98) 100%) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border-left: 1px solid rgba(139,92,246,0.15) !important;
  box-shadow: -12px 0 48px rgba(0,0,0,0.6) !important;
  width: 272px;
}
#fs-info-panel .fs-section {
  padding: 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.chart-main.chart-fullscreen #fs-info-panel {
  /* Glow sutil de accent na borda */
  box-shadow: -12px 0 48px rgba(0,0,0,0.6),
              -1px 0 0 rgba(139,92,246,0.2) !important;
}

/* Relógio — o grande destaque do screensaver */
#fs-clock {
  font-family: var(--font-mono) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-align: center;
  color: rgba(255,255,255,0.9) !important;
  text-shadow:
    0 0 20px rgba(139,92,246,0.4),
    0 0 60px rgba(139,92,246,0.1) !important;
  font-variant-numeric: tabular-nums;
}
#fs-date {
  font-family: var(--font-ui);
  font-size: 11px !important;
  color: rgba(255,255,255,0.3) !important;
  text-align: center;
  margin-top: 4px !important;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

/* Preço do ativo em fullscreen */
#fs-asset-name {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28) !important;
  text-align: center; margin-bottom: 6px !important;
}
#fs-price-big {
  font-size: 30px !important;
  font-weight: 800 !important;
  text-align: center;
  color: rgba(255,255,255,0.95) !important;
  letter-spacing: -1px !important;
  line-height: 1;
}
#fs-price-change-big {
  font-family: var(--font-mono) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center;
  margin-top: 6px !important;
  font-variant-numeric: tabular-nums;
}
#fs-regime-badge {
  font-family: var(--font-ui);
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 3px 12px !important;
}

/* Grid de indicadores no fullscreen */
.fs-ind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.fs-ind-cell {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 9px !important;
  padding: 8px 7px !important;
  text-align: center;
  transition: all 150ms;
}
.fs-ind-cell:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(139,92,246,0.25) !important;
}
.fs-ind-cell .fs-ind-label {
  font-family: var(--font-ui) !important;
  font-size: 8px !important;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  color: rgba(255,255,255,0.25) !important;
  margin-bottom: 4px !important;
}
.fs-ind-cell .fs-ind-val {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1;
}

/* Watchlist no fullscreen */
#fs-wl-list .fs-wl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 5px !important;
  border-radius: 7px;
  transition: background 120ms;
}
#fs-wl-list .fs-wl-row:hover {
  background: rgba(255,255,255,0.05) !important;
}
#fs-wl-row-active {
  background: rgba(139,92,246,0.1) !important;
  border: 1px solid rgba(139,92,246,0.22) !important;
}
.fs-wl-ticker {
  font-family: var(--font-mono) !important;
  font-size: 11px !important; font-weight: 700 !important;
  color: rgba(255,255,255,0.75);
}
.fs-wl-price {
  font-size: 10px !important;
  color: rgba(255,255,255,0.4) !important;
  font-variant-numeric: tabular-nums;
}
.fs-wl-chg {
  font-size: 10px !important; font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   INDICATOR CARDS (RSI, MACD, Stochastic, Regime)
   ══════════════════════════════════════════════════════════════ */
.indicators-row {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.indicator-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 200ms var(--ease-out);
  position: relative; overflow: hidden;
}
.indicator-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(139,92,246,0.3), transparent);
  opacity: 0;
  transition: opacity 200ms;
}
.indicator-card:hover {
  border-color: rgba(139,92,246,0.28);
  box-shadow: var(--accent-glow);
  transform: translateY(-1px);
}
.indicator-card:hover::after { opacity: 1; }

.indicator-card h4 {
  font-family: var(--font-ui) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1.5px !important;
  color: rgba(255,255,255,0.25) !important;
  margin-bottom: 10px !important;
}
.indicator-card .ind-value {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1;
}
.indicator-card .ind-label {
  font-size: 10px !important;
  color: rgba(255,255,255,0.28) !important;
  margin-top: 4px !important;
}

/* ══════════════════════════════════════════════════════════════
   WATCHLIST PANEL
   ══════════════════════════════════════════════════════════════ */
.watchlist-panel {
  background: rgba(10,10,16,0.88);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 14px;
  max-height: 555px;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.watchlist-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.045);
}
.watchlist-header h3 {
  font-family: var(--font-ui);
  font-size: 11px !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.35);
}
.watchlist-header button {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--accent-light) !important;
  font-size: 10px !important; padding: 3px 9px !important;
  border-radius: 20px !important; cursor: pointer;
  transition: all 150ms !important;
  font-family: var(--font-ui) !important;
}
.watchlist-header button:hover {
  background: rgba(139,92,246,0.15) !important;
  border-color: rgba(139,92,246,0.35) !important;
}

.wl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 9px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 150ms var(--ease-out);
  min-height: 44px;
  border-bottom: none;
}
.wl-item:hover {
  background: rgba(255,255,255,0.05);
  transform: translateX(2px);
}
.wl-item.active {
  background: linear-gradient(90deg,
    rgba(139,92,246,0.12) 0%,
    rgba(139,92,246,0.04) 100%);
  border: 1px solid rgba(139,92,246,0.2);
}
.wl-item .wl-ticker {
  font-family: var(--font-mono) !important;
  font-size: 12px !important; font-weight: 700 !important;
  color: rgba(255,255,255,0.82);
}
.wl-item .wl-name {
  font-size: 9px !important; color: rgba(255,255,255,0.25) !important;
  margin-top: 1px;
}
.wl-item .wl-price {
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums;
}
.wl-item .wl-change {
  font-size: 10px !important; font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   PANELS — containers genéricos (portfolio, predictions, etc.)
   ══════════════════════════════════════════════════════════════ */
.panel {
  background: rgba(10,10,16,0.85);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 16px;
  padding: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 200ms, box-shadow 200ms;
  overflow: hidden;
  position: relative;
}
.panel:hover {
  border-color: rgba(139,92,246,0.2);
}
.panel-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.panel-header h3 {
  font-family: var(--font-ui);
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.75);
}

/* ══════════════════════════════════════════════════════════════
   ██  PÁGINA PREDIÇÕES — O DIAMANTE  ██
   ══════════════════════════════════════════════════════════════ */

/* Header da aba predições */
#page-predictions .page-header h2 { font-size: 18px; }

/* KPI de predição — os 4 cards de acima do gráfico */
#pred-kpi-cards .kpi-card {
  /* Cada card tem borda colorida lateral esquerda */
  border-left: 3px solid transparent;
  position: relative;
}
/* O JS gera .kpi-card sem classe de cor — usamos as bordas inline */
/* Garantimos que o background dos KPI cards de predição seja glassmorphism */
#pred-kpi-cards .kpi-card,
#tracker-scorecard .kpi-card,
#page-predictions .kpi-strip .kpi-card {
  background: rgba(12,12,20,0.7) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: all 200ms var(--ease-out) !important;
}
#pred-kpi-cards .kpi-card:hover,
#tracker-scorecard .kpi-card:hover,
#page-predictions .kpi-strip .kpi-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), var(--accent-glow) !important;
}

/* Overrides para os kpi-diff que os cards de tracker usam */
.kpi-diff {
  font-family: var(--font-ui);
  font-size: 10px;
  color: rgba(255,255,255,0.28);
  margin-top: 2px;
}

/* ── Scorecard principal do tracker ── */
#tracker-scorecard .kpi-card:nth-child(1) { border-color: var(--neon-green) !important; }
#tracker-scorecard .kpi-card:nth-child(2) { border-color: var(--neon-blue) !important; }
#tracker-scorecard .kpi-card:nth-child(3) { border-color: var(--accent) !important; }
#tracker-scorecard .kpi-card:nth-child(4) { border-color: var(--neon-yellow) !important; }
#tracker-scorecard .kpi-card:nth-child(5) { border-color: rgba(255,255,255,0.2) !important; }

/* ── Breakdown por horizonte — premium ── */
.horizon-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.horizon-card {
  background: rgba(12,12,20,0.75);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 14px;
  padding: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 200ms var(--ease-out);
  position: relative; overflow: hidden;
}
.horizon-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
}
.horizon-card.h1d::before { background: var(--neon-blue); box-shadow: 0 0 12px rgba(14,165,233,0.5); }
.horizon-card.h3d::before { background: var(--accent);    box-shadow: 0 0 12px rgba(139,92,246,0.5); }
.horizon-card.h7d::before { background: #ff6b35;          box-shadow: 0 0 12px rgba(255,107,53,0.5); }
.horizon-card:hover {
  border-color: rgba(139,92,246,0.28);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.horizon-card-label {
  font-family: var(--font-ui);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(255,255,255,0.3);
  margin-bottom: 12px;
}
.horizon-card-metric {
  display: flex; justify-content: space-between; align-items: center;
}
.horizon-card-metric-name {
  font-family: var(--font-ui);
  font-size: 10px; color: rgba(255,255,255,0.3);
}
.horizon-card-metric-value {
  font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.horizon-progress {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  margin: 4px 0 2px;
  overflow: hidden;
}
.horizon-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 800ms var(--ease-out);
  box-shadow: 0 0 6px currentColor;
}

/* ── Tabela de histórico de predições ── */
#tracker-history-body tr { border-bottom: 1px solid rgba(255,255,255,0.03); }
#tracker-history-body tr:hover { background: rgba(139,92,246,0.06); }
.pred-row-hit  td:first-child { border-left: 3px solid var(--neon-green); }
.pred-row-miss td:first-child { border-left: 3px solid var(--neon-red);   }
.pred-row-pend td:first-child { border-left: 3px solid rgba(245,158,11,0.6); }

/* Badges de status */
.badge-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 10px; font-weight: 700;
  white-space: nowrap; border: 1px solid transparent;
}
.badge-hit {
  color: var(--neon-green);
  background: rgba(0,255,136,0.08);
  border-color: rgba(0,255,136,0.2);
}
.badge-miss {
  color: var(--neon-red);
  background: rgba(255,51,102,0.08);
  border-color: rgba(255,51,102,0.2);
}
.badge-pending {
  color: #f59e0b;
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.2);
}
.chip {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 20px;
  font-size: 10px; font-weight: 600;
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
}

/* Mobile cards de predição */
.pred-history-card {
  background: rgba(12,12,20,0.75) !important;
  border: 1px solid rgba(255,255,255,0.065) !important;
  border-radius: 14px !important;
  transition: all 200ms !important;
  backdrop-filter: blur(16px) !important;
}
.pred-history-card:hover {
  border-color: rgba(139,92,246,0.28) !important;
  transform: translateY(-1px) !important;
}
.card-hit  { border-left: 3px solid var(--neon-green) !important; }
.card-miss { border-left: 3px solid var(--neon-red) !important; }
.card-pending { border-left: 3px solid rgba(245,158,11,0.6) !important; }
.pred-section-title {
  font-family: var(--font-ui);
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 2px;
  color: rgba(255,255,255,0.2);
  margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════════
   TABELAS — universal upgrade
   ══════════════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; }
thead th {
  font-family: var(--font-ui);
  font-size: 8.5px; text-transform: uppercase;
  letter-spacing: 1.5px; color: rgba(255,255,255,0.2);
  font-weight: 800; padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.015);
  white-space: nowrap;
}
tbody tr {
  transition: background 120ms;
  border-bottom: 1px solid rgba(255,255,255,0.025);
}
tbody tr:hover { background: rgba(139,92,246,0.055); }
tbody td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px; padding: 8px 10px;
  vertical-align: middle; color: rgba(255,255,255,0.75);
}

/* ══════════════════════════════════════════════════════════════
   BOTÕES — sistema unificado
   ══════════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  transition: all 150ms var(--ease-out) !important;
  cursor: pointer !important;
  min-height: 34px;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(139,92,246,0.4) !important;
}
.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(139,92,246,0.55) !important;
  transform: translateY(-1px) !important;
}
.btn-primary:active { transform: translateY(0) !important; }
.btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.9) !important;
}
.btn-sm { font-size: 11px !important; padding: 5px 12px !important; }

/* ══════════════════════════════════════════════════════════════
   INPUTS E SELECTS
   ══════════════════════════════════════════════════════════════ */
.form-input, input, select, textarea {
  font-family: var(--font-ui) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.85) !important;
  border-radius: 9px !important;
  transition: all 150ms !important;
  min-height: 36px;
  color-scheme: dark;
}
.form-input:focus, input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.15) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* ══════════════════════════════════════════════════════════════
   LOGIN — profundidade dramática
   ══════════════════════════════════════════════════════════════ */
#login-overlay {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(139,92,246,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 100%, rgba(14,165,233,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 80%, rgba(0,255,136,0.05) 0%, transparent 50%),
    #06060a;
}
.login-card {
  background: rgba(12,12,20,0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border-radius: 22px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 32px 80px rgba(0,0,0,0.7),
    0 0 100px rgba(139,92,246,0.08) !important;
}
.login-logo .caos {
  font-family: var(--font-ui) !important;
  font-weight: 800 !important; letter-spacing: -0.05em !important;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 40%, #06b6d4 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════════════ */
.modal-premium-overlay {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.modal-premium-card {
  background: rgba(12,12,20,0.95) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 24px 64px rgba(0,0,0,0.6),
    var(--accent-glow) !important;
}

/* ══════════════════════════════════════════════════════════════
   NEWS — artigos com imagem
   ══════════════════════════════════════════════════════════════ */
.news-article-card {
  background: rgba(12,12,20,0.75) !important;
  border: 1px solid rgba(255,255,255,0.065) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: all 220ms var(--ease-out) !important;
}
.news-article-card:hover {
  border-color: rgba(139,92,246,0.35) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3), var(--accent-glow) !important;
}

.news-tab-btn {
  font-family: var(--font-ui) !important;
  font-size: 12px !important; font-weight: 700 !important;
  color: rgba(255,255,255,0.28) !important;
}
.news-tab-btn.active { color: var(--accent-light) !important; }
.news-tab-btn:hover  { color: rgba(255,255,255,0.7) !important; }

/* ══════════════════════════════════════════════════════════════
   LIVE INDICATORS
   ══════════════════════════════════════════════════════════════ */
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.7); }
}
.status-dot { animation: live-pulse 2.2s ease-in-out infinite; }

@keyframes price-up   {
  0%  { color: var(--text-primary); }
  20% { color: var(--neon-green); text-shadow: var(--neon-green-glow); }
  100%{ color: var(--text-primary); }
}
@keyframes price-down {
  0%  { color: var(--text-primary); }
  20% { color: var(--neon-red); text-shadow: var(--neon-red-glow); }
  100%{ color: var(--text-primary); }
}
[data-flash="up"]   { animation: price-up   600ms var(--ease-out) forwards; }
[data-flash="down"] { animation: price-down 600ms var(--ease-out) forwards; }

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADERS
   ══════════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -700px 0; }
  100% { background-position:  700px 0; }
}
.skeleton {
  display: block; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(139,92,246,0.055) 50%,
    rgba(255,255,255,0.08) 60%,
    rgba(255,255,255,0.04) 100%);
  background-size: 700px 100%;
  animation: shimmer 1.7s linear infinite;
}
.skeleton-kpi {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.skeleton-kpi .sk-label  { height: 9px;  width: 55%; }
.skeleton-kpi .sk-price  { height: 20px; width: 78%; }
.skeleton-kpi .sk-change { height: 10px; width: 38%; }
.skeleton-kpi .sk-spark  { height: 28px; width: 100%; margin-top: 2px; }
.skeleton-chart {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.skeleton-chart .sk-toolbar { height: 22px; width: 42%; }
.skeleton-chart .sk-body {
  height: 380px; width: 100%; border-radius: 10px;
  background: repeating-linear-gradient(90deg,
    rgba(139,92,246,0.035) 0px, rgba(139,92,246,0.035) 6px,
    rgba(255,255,255,0.015) 6px, rgba(255,255,255,0.015) 18px
  ),
  linear-gradient(90deg,
    rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.055) 45%,
    rgba(139,92,246,0.04) 50%, rgba(255,255,255,0.055) 55%,
    rgba(255,255,255,0.025) 100%);
  background-size: auto, 700px 100%;
  animation: shimmer 1.9s linear infinite;
}
.skeleton-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.skeleton-row .sk-ticker { height: 12px; width: 52px; flex-shrink: 0; }
.skeleton-row .sk-date   { height: 10px; width: 36px; flex-shrink: 0; }
.skeleton-row .sk-price  { height: 12px; width: 64px; }
.skeleton-row .sk-badge  { height: 20px; width: 56px; border-radius: 20px; margin-left: auto; }
.skeleton-pred-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.skeleton-pred-card .sk-header { height: 16px; width: 68%; }
.skeleton-pred-card .sk-row    { height: 11px; width: 88%; }
.skeleton-pred-card .sk-badge  { height: 22px; width: 80px; border-radius: 20px; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════
   CONTENT-VISIBILITY — pages inativas
   ══════════════════════════════════════════════════════════════ */
.page:not(.active) {
  content-visibility: auto;
  contain-intrinsic-size: 0 900px;
}

/* ══════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION — mobile
   ══════════════════════════════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 58px;
  background: linear-gradient(0deg,
    rgba(6,6,10,0.98) 0%,
    rgba(8,8,14,0.96) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.055);
  box-shadow: 0 -6px 32px rgba(0,0,0,0.5);
  align-items: stretch;
  justify-content: space-around;
  z-index: 900;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; flex: 1;
  min-height: 44px; cursor: pointer;
  color: rgba(255,255,255,0.28);
  font-family: var(--font-ui);
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase;
  border: none; background: transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; transition: all 150ms;
}
.bottom-nav-item .bn-icon { font-size: 18px; line-height: 1; }
.bottom-nav-item.active { color: var(--accent-light); }
.bottom-nav-item.active .bn-icon {
  filter: drop-shadow(0 0 5px rgba(139,92,246,0.7));
  transform: translateY(-2px);
  transition: transform 200ms var(--ease-spring);
}
.bottom-nav-item:active { transform: scale(0.9); }

/* ══════════════════════════════════════════════════════════════
   MOBILE HEADER
   ══════════════════════════════════════════════════════════════ */
.mobile-header {
  background: rgba(6,6,10,0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.045) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   DRIFT MONITOR WIDGET
   ══════════════════════════════════════════════════════════════ */
#drift-status-widget {
  background: rgba(12,12,20,0.7) !important;
  border: 1px solid rgba(255,255,255,0.065) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(14px) !important;
  transition: all 200ms !important;
}
#drift-status-widget:hover {
  border-color: rgba(139,92,246,0.25) !important;
  box-shadow: var(--accent-glow) !important;
}
#drift-indicator {
  transition: background 300ms, box-shadow 300ms;
}

/* ══════════════════════════════════════════════════════════════
   TOOLTIP GLOBAL
   ══════════════════════════════════════════════════════════════ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(8,8,16,0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85); font-family: var(--font-ui);
  font-size: 11px; padding: 5px 10px; border-radius: 7px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: all 150ms; z-index: 9000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE-FIRST
   ══════════════════════════════════════════════════════════════ */

/* 320–479px */
@media (max-width: 479px) {
  .main { padding: 10px !important; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kpi-card { padding: 10px 12px !important; }
  .chart-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  #tv-chart-container { height: 260px !important; }
  #rsi-chart-container, #macd-chart-container { height: 90px !important; }
  .watchlist-panel { display: none !important; } /* watchlist vira bottom sheet em mobile muito pequeno */
  .indicators-row { grid-template-columns: repeat(2, 1fr) !important; }
  .horizon-breakdown-grid { grid-template-columns: 1fr !important; }
  /* Tabelas → cards */
  .pred-history-table thead { display: none; }
  .pred-history-table tbody tr {
    display: flex; flex-direction: column; gap: 5px;
    padding: 12px; margin-bottom: 8px;
    background: rgba(12,12,20,0.75);
    border: 1px solid rgba(255,255,255,0.065);
    border-radius: 14px; transform: none !important;
  }
  .pred-history-table tbody td {
    display: flex; justify-content: space-between;
    padding: 3px 0; border-bottom: none;
    font-size: 11px;
  }
  .pred-history-table tbody td::before {
    content: attr(data-label);
    font-size: 9px; text-transform: uppercase;
    letter-spacing: 1px; color: rgba(255,255,255,0.25);
    font-family: var(--font-ui); font-weight: 700;
  }
  .chart-main .chart-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .chart-main .chart-toolbar > div:nth-child(2) { display: none !important; } /* oculta overlays em mobile */
}

/* 480–767px */
@media (min-width: 480px) and (max-width: 767px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; }
  .chart-grid { grid-template-columns: 1fr !important; }
  #tv-chart-container { height: 310px !important; }
  .indicators-row { grid-template-columns: repeat(3, 1fr) !important; }
  .horizon-breakdown-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 768px — tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; }
  .chart-grid { grid-template-columns: 1fr 230px !important; }
  #tv-chart-container { height: 350px !important; }
  .indicators-row { grid-template-columns: repeat(3, 1fr) !important; }
}

/* 1024–1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .kpi-strip { grid-template-columns: repeat(6, 1fr) !important; }
  .chart-grid { grid-template-columns: 1fr 262px !important; }
}

/* 1440px+ */
@media (min-width: 1440px) {
  .kpi-strip { grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .chart-grid { grid-template-columns: 1fr 296px; gap: 16px; }
  #tv-chart-container { height: 480px; }
  .main { max-width: 1680px; margin: 0 auto; }
}

/* Mobile: mostrar bottom nav */
@media (max-width: 767px) {
  .bottom-nav { display: flex !important; }
  .main { padding-bottom: 70px !important; }
}

/* Fluid typography */
.kpi-price      { font-size: clamp(13px, 1.5vw, 18px); }
.page-header h2 { font-size: clamp(16px, 2vw, 20px); }
.ind-value      { font-size: clamp(18px, 2vw, 24px) !important; }

/* Touch targets mínimo 44px */
.nav-item, .btn, .kpi-card, .chart-action-btn,
.bottom-nav-item, .wl-item, input, select, .chart-periods button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn, input, select { min-height: 36px; }

/* ═══ TOAST TYPES ═══ */
.toast.toast-success { background: linear-gradient(135deg, rgba(16,185,129,0.95), rgba(5,150,105,0.95)) !important; border-color: rgba(16,185,129,0.5) !important; }
.toast.toast-error   { background: linear-gradient(135deg, rgba(239,68,68,0.95), rgba(185,28,28,0.95)) !important; border-color: rgba(239,68,68,0.5) !important; }
.toast.toast-warning { background: linear-gradient(135deg, rgba(245,158,11,0.95), rgba(180,83,9,0.95)) !important; border-color: rgba(245,158,11,0.5) !important; }

/* ═══ SENTIMENTO IA ══════════════════════════════════════ */
#page-sentiment .panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
}

/* Gauge container glow */
#page-sentiment #gauge-score {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px currentColor;
}

/* Heatmap cards */
#sentiment-heatmap > div {
  border-radius: 10px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  position: relative;
  overflow: hidden;
}
#sentiment-heatmap > div::before {
  content: '';
  position: absolute; inset: 0;
  background: inherit;
  opacity: 0.3;
  filter: blur(8px);
  z-index: -1;
}
#sentiment-heatmap > div:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

/* Headlines */
#sentiment-headlines > div {
  transition: border-left-color 0.2s, background 0.2s;
  border-radius: 0 6px 6px 0 !important;
}
#sentiment-headlines > div:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* ═══ RISCO EGARCH ══════════════════════════════════════ */
#page-risk .assets-table tbody tr {
  transition: background 0.15s;
}
#page-risk .assets-table tbody tr:hover {
  background: rgba(139,92,246,0.08);
}
#page-risk .assets-table thead th {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}
#page-risk .assets-table td {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
#page-risk #risk-global-vol-card {
  transition: border-color 0.5s, box-shadow 0.5s;
}

/* ═══ MARKET BRIEFING ══════════════════════════════════ */
#page-briefing #briefing-content {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
}
#page-briefing #briefing-content h1,
#page-briefing #briefing-content h2,
#page-briefing #briefing-content h3 {
  color: var(--text-primary);
  margin: 1.2em 0 0.5em;
  font-weight: 700;
}
#page-briefing #briefing-content h2 {
  border-bottom: 1px solid rgba(139,92,246,0.3);
  padding-bottom: 6px;
  color: var(--accent);
}
#page-briefing #briefing-content strong { color: var(--text-primary); }
#page-briefing #briefing-content ul, #page-briefing #briefing-content ol {
  padding-left: 1.4em;
  margin: 0.4em 0 0.8em;
}
#page-briefing #briefing-content li { margin-bottom: 4px; }
#page-briefing #briefing-content table {
  width: 100%; border-collapse: collapse; margin: 10px 0;
}
#page-briefing #briefing-content table td,
#page-briefing #briefing-content table th {
  border: 1px solid rgba(255,255,255,0.08);
  padding: 7px 10px;
  font-size: 13px;
}
#page-briefing #briefing-content table th {
  background: rgba(139,92,246,0.1);
  color: var(--accent);
  font-weight: 600;
}

/* ═══ MACRO ESTRUTURAL ══════════════════════════════════ */
#page-macro .panel h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  margin: 0 0 12px;
}
#page-macro #macro-bcb-grid > div {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
#page-macro #macro-bcb-grid > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* ═══ SAÚDE DOS MODELOS ══════════════════════════════════ */
#page-models-health #models-health-content > div > div {
  transition: transform 0.2s, box-shadow 0.2s;
}
#page-models-health #models-health-content > div > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
#wfv-table-content table { width: 100%; border-collapse: collapse; }
#wfv-table-content th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#wfv-table-content td {
  padding: 8px 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
#wfv-table-content tr:hover td {
  background: rgba(139,92,246,0.06);
}

/* ═══ LABORATÓRIO BACKTEST ══════════════════════════════ */
#page-backtest .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
#page-backtest .form-input, #page-backtest select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 8px 12px;
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#page-backtest .form-input:focus, #page-backtest select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.2);
  outline: none;
}
#bt-metrics-grid table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
#bt-metrics-grid th, #bt-metrics-grid td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#bt-metrics-grid tr:hover td { background: rgba(139,92,246,0.06); }

/* ═══ NOTÍCIAS ══════════════════════════════════════════ */
#news-articles-grid { display: grid; gap: 14px; }
.news-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 16px 18px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.news-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139,92,246,0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.news-card-source {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--neon-blue);
  margin-bottom: 6px;
}
.news-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
}
.news-card-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.news-sentiment-positive { color: var(--neon-green); }
.news-sentiment-negative { color: var(--neon-red); }
.news-sentiment-neutral  { color: #f59e0b; }

/* ═══ SINAIS DE TRADING ══════════════════════════════════ */
#signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.signal-card, #signals-grid .stat-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.signal-card:hover, #signals-grid .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
}
.signal-card.signal-buy  { border-left: 3px solid var(--neon-green); }
.signal-card.signal-sell { border-left: 3px solid var(--neon-red); }
.signal-card.signal-hold { border-left: 3px solid #f59e0b; }

/* ═══ RETRY BUTTON (error states) ══════════════════════ */
.btn-retry {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.4);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-retry:hover {
  background: rgba(139,92,246,0.28);
  box-shadow: 0 0 12px rgba(139,92,246,0.3);
}

/* Light theme overrides */
:root.light-theme .chart-main {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
:root.light-theme .watchlist-panel {
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
:root.light-theme .chart-main.chart-fullscreen {
  background: #f1f5f9 !important;
}
:root.light-theme #fs-info-panel {
  background: rgba(255,255,255,0.97) !important;
  border-left-color: rgba(139,92,246,0.2) !important;
}
:root.light-theme #fs-clock { color: #0f172a !important; text-shadow: none !important; }
:root.light-theme #fs-price-big { color: #0f172a !important; }
:root.light-theme .panel, :root.light-theme .kpi-card,
:root.light-theme .indicator-card, :root.light-theme .horizon-card {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.07) !important;
}

/* ══════════════════════════════════════════════════════════════
   CHAT IA — DESKTOP: sem scroll externo, input sempre visível
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* Remove padding/overflow do .main quando o chat está ativo */
  .main:has(#page-chat.active) {
    padding: 0 !important;
    overflow: hidden !important;
  }
  #page-chat.active {
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }
  #page-chat.active > .page-header {
    flex-shrink: 0;
    padding: 16px 28px 14px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  #page-chat.active > #chat-wrapper {
    flex: 1;
    overflow: hidden;
    padding: 0 28px 20px !important;
    display: flex;
    flex-direction: column;
  }
  #page-chat.active .chat-container {
    flex: 1;
    height: auto !important;
    max-height: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FULLSCREEN — Painel lateral aprimorado (modo academia)
   ══════════════════════════════════════════════════════════════ */

/* Volume bar no painel fullscreen */
#fs-vol-wrap {
  margin-top: 10px;
  text-align: center;
}
#fs-vol-label-text {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
#fs-vol-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: rgba(168,85,247,0.9);
  letter-spacing: 1px;
}
#fs-vol-bar-bg {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin: 5px 0;
  overflow: hidden;
}
#fs-vol-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(139,92,246,0.6), rgba(168,85,247,0.9));
  transition: width 600ms ease;
}

/* OHLC compacto */
#fs-ohlc-row {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.025);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
}
.fs-ohlc-cell {
  text-align: center;
}
.fs-ohlc-lbl {
  font-size: 8px;
  color: rgba(255,255,255,0.2);
  font-family: var(--font-mono);
  letter-spacing: 1px;
  display: block;
}
.fs-ohlc-val {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Atalhos de teclado — hint sutil no fundo do painel */
#fs-shortcuts-hint {
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
#fs-shortcuts-hint span {
  font-size: 8.5px;
  color: rgba(255,255,255,0.18);
  font-family: var(--font-mono);
  white-space: nowrap;
}
#fs-shortcuts-hint kbd {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 8px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.3);
}

/* Badge de auto-cycle ativo */
#fs-cycle-badge {
  display: none;
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(139,92,246,0.2);
  border: 1px solid rgba(139,92,246,0.4);
  color: rgba(139,92,246,0.9);
  font-size: 9px;
  font-family: var(--font-mono);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  animation: fsGlow 2s ease-in-out infinite;
}
#fs-cycle-badge.active { display: block; }
@keyframes fsGlow {
  0%,100% { opacity: 0.7; } 50% { opacity: 1; }
}

/* Wake Lock badge */
#fs-wakelock-badge {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  color: rgba(16,185,129,0.7);
  font-size: 9px;
  font-family: var(--font-mono);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
#fs-wakelock-badge.active { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 4: Confidence Badge - Barra calibrada nos cards de predicao
   ═══════════════════════════════════════════════════════════════════════════ */

.confidence-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.confidence-bar-wrap {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}

.confidence-bar {
  height: 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.confidence-val {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
  letter-spacing: -0.02em;
}

.confidence-label {
  font-family: var(--font-ui);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.75;
  min-width: 38px;
}

.conf-high .confidence-bar   { background: #00FF88; box-shadow: 0 0 8px rgba(0,255,136,0.5); }
.conf-high .confidence-val   { color: #00FF88 !important; }
.conf-high .confidence-label { color: #00FF88; }

.conf-medium .confidence-bar   { background: #00D4FF; box-shadow: 0 0 8px rgba(0,212,255,0.4); }
.conf-medium .confidence-val   { color: #00D4FF !important; }
.conf-medium .confidence-label { color: #00D4FF; }

.conf-low .confidence-bar   { background: #FFD600; box-shadow: 0 0 6px rgba(255,214,0,0.35); }
.conf-low .confidence-val   { color: #FFD600 !important; }
.conf-low .confidence-label { color: #FFD600; }

.conf-uncertain .confidence-bar   { background: #FF3366; box-shadow: 0 0 8px rgba(255,51,102,0.45); }
.conf-uncertain .confidence-val   { color: #FF3366 !important; }
.conf-uncertain .confidence-label { color: #FF3366; }

#pred-kpi-cards .conf-high      { border-left-color: rgba(0,255,136,0.45) !important; }
#pred-kpi-cards .conf-medium    { border-left-color: rgba(0,212,255,0.35) !important; }
#pred-kpi-cards .conf-low       { border-left-color: rgba(255,214,0,0.35) !important; }
#pred-kpi-cards .conf-uncertain { border-left-color: rgba(255,51,102,0.4) !important; }

.pred-conf-filter-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.pred-conf-filter-wrap label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}

.pred-filtered-msg {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(255,214,0,0.7);
  background: rgba(255,214,0,0.04);
  border: 1px solid rgba(255,214,0,0.15);
  border-radius: var(--radius);
  text-align: center;
  backdrop-filter: blur(8px);
}