/* CORRETORA IA — tema de jogo pixel art (escuro) */
:root{
  color-scheme: dark;
  --bg:#111114; --surface:#1a1a19; --panel:#1f1f22; --panel-2:#26262a; --line:#3a3a40;
  --ink:#ffffff; --ink-2:#c3c2b7; --ink-3:#8f8e86;
  --gold:#f2c14e;
  /* identidade das mesas (paleta categorica validada, passos do modo escuro) */
  --ouro:#c98500; --btc:#d95926; --eth:#3987e5; --spx:#199e70; --diretoria:#9085e9; --risco:#e66767;
  /* estado (sempre com icone + texto) */
  --good:#0ca30c; --warn:#fab219; --crit:#d03b3b;
  /* polaridade nos graficos (par divergente azul <-> vermelho) */
  --pos:#3987e5; --neg:#e66767; --zero:#383835;
  --pixel:'Press Start 2P', monospace;
  --text:'VT323', monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--ink); }
body{ font-family:var(--text); font-size:20px; line-height:1.2; }
a{ color:var(--gold); }
button{ cursor:pointer; }
.btn{ font-family:var(--pixel); font-size:.6rem; background:var(--gold); color:#1a1300; border:0;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,255,255,.35); padding:10px 12px; }
.btn:active{ box-shadow:inset 3px 3px 0 rgba(0,0,0,.35); }
.panel{ background:var(--panel); border:3px solid var(--line); box-shadow:4px 4px 0 #000; padding:14px; }

/* ---------- topo */
.top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; border-bottom:3px solid var(--line); background:#151518; }
.logo{ font-family:var(--pixel); font-size:.85rem; color:var(--gold); text-shadow:2px 2px 0 #000; white-space:nowrap; }
.badge{ font-family:var(--pixel); font-size:.5rem; padding:6px 8px; border:2px solid var(--warn); color:var(--warn); white-space:nowrap; }
.top .sp{ flex:1; }
.top .meta{ color:var(--ink-3); font-size:1.05rem; }
.top a.out{ color:var(--ink-2); font-size:1.05rem; text-decoration:none; border:2px solid var(--line); padding:2px 8px; }

.ticker{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-bottom:3px solid var(--line); }
.tk{ padding:8px 16px; border-right:3px solid var(--line); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; min-width:0; }
.tk:last-child{ border-right:0; }
.tk .sym{ font-family:var(--pixel); font-size:.55rem; }
.tk .px{ font-size:1.45rem; }
.tk .chg{ font-size:1.1rem; color:var(--ink-2); }
.tk .st{ font-size:1rem; color:var(--ink-3); margin-left:auto; white-space:nowrap; }
.dot{ display:inline-block; width:8px; height:8px; margin-right:4px; vertical-align:middle; }

/* ---------- layout */
.wrap{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; padding:16px; max-width:1500px; margin:0 auto; }
.col{ display:grid; gap:16px; align-content:start; min-width:0; }
.col > *{ min-width:0; }
h2{ font-family:var(--pixel); font-size:.62rem; margin:0 0 12px; color:var(--ink-2); letter-spacing:.04em; line-height:1.6; }
h2 .hint{ font-family:var(--text); font-size:1rem; color:var(--ink-3); letter-spacing:0; margin-left:6px; }

.stage{ position:relative; border:3px solid var(--line); box-shadow:4px 4px 0 #000; background:#0b0b0d; }
.stage canvas{ display:block; width:100%; height:auto; image-rendering:pixelated; image-rendering:crisp-edges; cursor:pointer; }
.stage .cap{ position:absolute; left:8px; bottom:6px; font-size:1rem; color:var(--ink-3); pointer-events:none; text-shadow:1px 1px 0 #000; }
.legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:1.05rem; color:var(--ink-2); margin-top:10px; }
.legend span b{ font-weight:normal; color:var(--ink); }

/* ---------- telao */
.hero{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.hero .big{ font-family:var(--pixel); font-size:1.6rem; line-height:1.3; }
.hero .usd{ font-size:1.3rem; color:var(--ink-2); }
.kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.kpi{ background:var(--panel-2); border:2px solid var(--line); padding:6px 8px; min-width:0; }
.kpi .l{ font-size:.95rem; color:var(--ink-3); }
.kpi .v{ font-size:1.5rem; }
.up{ color:#6fe06f; } .dn{ color:#ff8a8a; }
.chart{ position:relative; margin-top:14px; }
.chart svg{ display:block; width:100%; }
.tip{ position:fixed; z-index:20; pointer-events:none; background:#000; border:2px solid var(--ink-2); padding:4px 8px; font-size:1.05rem; line-height:1.15; max-width:260px; display:none; }
.bars{ display:grid; gap:8px; margin-top:4px; }
.bar{ display:grid; grid-template-columns:76px 1fr 64px; align-items:center; gap:8px; font-size:1.1rem; }
.bar .name{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.bar .track{ position:relative; height:14px; background:var(--panel-2); }
.bar .track .mid{ position:absolute; left:50%; top:-2px; bottom:-2px; width:2px; background:var(--ink-3); }
.bar .track .fill{ position:absolute; top:0; bottom:0; border-radius:0; }
.bar .val{ text-align:right; }
.note{ font-size:1.05rem; color:var(--ink-3); margin-top:10px; }

/* ---------- ficha do agente */
.card .who{ display:flex; gap:12px; align-items:center; }
.card .avatar{ width:64px; height:64px; image-rendering:pixelated; background:var(--panel-2); border:2px solid var(--line); flex:none; }
.card .nm{ font-family:var(--pixel); font-size:.75rem; line-height:1.5; }
.card .rl{ color:var(--ink-2); font-size:1.15rem; }
.card .desc{ color:var(--ink-2); font-size:1.1rem; margin:10px 0; }
.pill{ display:inline-block; font-size:1rem; padding:0 6px; border:2px solid currentColor; margin-right:6px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.prog{ height:12px; background:var(--panel-2); border:2px solid var(--line); margin-top:4px; }
.prog i{ display:block; height:100%; background:var(--gold); }
table{ width:100%; border-collapse:collapse; font-size:1.1rem; }
th{ text-align:left; color:var(--ink-3); font-weight:normal; border-bottom:2px solid var(--line); padding:3px 4px; }
td{ padding:3px 4px; border-bottom:1px solid #2c2c31; white-space:nowrap; }
td.num, th.num{ text-align:right; }
tr.sel td{ background:#2d2a1c; }
tbody tr{ cursor:pointer; }
tbody tr:hover td{ background:#25252b; }
.scroll{ max-height:420px; overflow:auto; }

.feed{ display:grid; gap:4px; font-size:1.1rem; max-height:360px; overflow:auto; }
.feed div{ display:grid; grid-template-columns:52px 1fr; gap:8px; }
.feed time{ color:var(--ink-3); }

@media (max-width:1100px){
  .wrap{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:700px){
  body{ font-size:18px; }
  .ticker{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tk:nth-child(2){ border-right:0; }
  .tk:nth-child(-n+2){ border-bottom:3px solid var(--line); }
  .wrap{ padding:12px 16px; }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero .big{ font-size:1.2rem; }
  .top{ padding:10px 16px; }
  /* no celular o escritorio mantem tamanho legivel e rola de lado dentro da moldura */
  .stage{ overflow-x:auto; }
  .stage canvas{ width:760px; max-width:none; }
  .stage .cap{ position:sticky; left:8px; }
}