/* Sinais: direção "Mesa escura", um degrau mais clara (plano em trading-sinais-plano-painel-web). Carvão neutro,
   elevação por degrau de luz, sem borda nem sombra em cartão, uma cor nos dados (âmbar), verde e vermelho só em
   resultado e status. Inter, números tabulares à direita. */
:root {
  --ground:#161616; --surface:#1f1f1f; --raised:#2b2b2b; --rule:#2a2a2a; --control:#3a3a3a;
  --text:#f2f3f5; --muted:#b7bac3; --faint:#9a9ea6;
  --accent:#f2b33d; --positive:#9ad67a; --negative:#f07178; --warning:#e5a93b;
  --pill-pos-bg:#1e2a17; --pill-pos-ink:#b9e59c; --pill-neg-bg:#301c1e; --pill-neg-ink:#f5a3a6; --pill-neutral-bg:#2b2b2b;
  --radius-card:16px; --radius-control:999px; --gap:14px; --pad:22px; --side:220px; --top:64px;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { background:var(--ground); color:var(--text); font:14px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; }
a { color:inherit; text-decoration:none; }
a.sub { text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--faint); }

/* ---------- shell: ruled T-frame ---------- */
.shell { display:grid; grid-template-columns:var(--side) 1fr; min-height:100vh; }
.side { border-right:1px solid var(--rule); padding:18px 20px; position:sticky; top:0; height:100vh; }
.marca { height:28px; display:flex; align-items:center; font-weight:600; font-size:15px; letter-spacing:-.01em; }
.nav { margin-top:22px; display:flex; flex-direction:column; }
.nav a { height:34px; display:flex; align-items:center; color:#bbb; font-size:14px; }
.nav a.on { color:#fff; }
.nav .grupo { font-size:12px; color:var(--faint); margin:18px 0 4px; }
.topo { height:var(--top); border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:16px; padding:0 0 0 29px; color:var(--muted); font-size:13px; }
.topo .conta { margin-left:auto; padding:0 29px 0 16px; border-left:1px solid var(--rule); height:var(--top); display:flex; align-items:center; gap:8px; color:var(--text); white-space:nowrap; }
.ponto { width:7px; height:7px; border-radius:50%; background:var(--positive); display:inline-block; flex:none; }
.ponto.ruim { background:var(--negative); }
.pagina { padding:28px 29px 48px; max-width:1240px; }
h1 { font-size:20px; font-weight:600; margin:0; letter-spacing:-.01em; }
.sub { color:var(--faint); font-size:14px; margin:4px 0 24px; }
h2 { font-size:16px; font-weight:500; margin:28px 0 10px; }
.meta { font-size:12px; color:var(--faint); }
.rotulo { font-size:12px; color:var(--faint); }
.pos { color:var(--positive); } .neg { color:var(--negative); }

/* ---------- surfaces ---------- */
.cartao { background:var(--surface); border-radius:var(--radius-card); padding:var(--pad); }
.cartao.apertado { padding:6px var(--pad); }
.grade { display:grid; gap:var(--gap); }
.grade.duas { grid-template-columns:1fr 1fr; }
.grade.lista-e-cartao { grid-template-columns:43fr 57fr; align-items:start; }
.faixa { display:grid; grid-template-columns:repeat(3, 1fr); background:var(--surface); border-radius:var(--radius-card); overflow:hidden; margin-top:var(--gap); }
.faixa > div { padding:18px var(--pad); border-left:1px solid var(--rule); }
.faixa > div:first-child { border-left:0; }
.faixa .v { font-size:24px; font-weight:500; margin-top:4px; }
.faixa .v small { font-size:13px; color:var(--faint); font-weight:400; }
.heroi { font-size:36px; font-weight:500; line-height:1.1; margin:6px 0 2px; letter-spacing:-.01em; }
.heroi small { font-size:16px; color:var(--faint); font-weight:400; margin-left:4px; }

/* ---------- the face: day ruler and session strip ---------- */
.regua { position:relative; height:36px; margin:18px 0 6px; }
.regua .trilho { position:absolute; left:0; right:0; top:16px; height:4px; background:var(--raised); border-radius:2px; }
.regua .stopz { position:absolute; top:16px; height:4px; background:#3a2a2b; }
.regua .metaz { position:absolute; top:16px; height:4px; background:var(--accent); opacity:.35; }
.regua .agora { position:absolute; top:8px; width:2px; height:20px; background:#fff; border-radius:1px; transition:left 300ms ease-out; }
.regua .tick { position:absolute; top:26px; font-size:11px; color:var(--faint); transform:translateX(-50%); white-space:nowrap; }
.regua .tick.ini { transform:none; } .regua .tick.fim { transform:translateX(-100%); }
.fita { margin-top:14px; }
.fita .barra { position:relative; height:28px; background:var(--raised); border-radius:6px; overflow:hidden; }
.fita .janela { position:absolute; top:0; bottom:0; background:#333; }
.fita .gestao { position:absolute; top:0; bottom:0; background:#262626; }
.fita .agora { position:absolute; top:0; bottom:0; width:2px; background:var(--accent); }
.fita .horas { display:flex; justify-content:space-between; font-size:11px; color:var(--faint); margin-top:6px; }
@media (prefers-reduced-motion: reduce) { .regua .agora, .prox i { transition:none; } }

/* ---------- lists and tables ---------- */
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-weight:500; font-size:12px; color:var(--faint); padding:0 10px 8px 0; white-space:nowrap; }
td { padding:10px 10px 10px 0; border-top:1px solid var(--rule); font-size:14px; vertical-align:middle; }
th.n, td.n { text-align:right; padding-right:0; }
td.n, .n { font-variant-numeric:tabular-nums; }
tr.link { cursor:pointer; } tr.link:hover td { background:var(--raised); }
.rolagem { overflow-x:auto; }
.lista .linha { display:grid; grid-template-columns:84px 1fr 64px 64px; gap:10px; align-items:center; height:42px; border-top:1px solid var(--rule); }
.lista .linha:first-child { border-top:0; }
.lista b { font-weight:600; }
.lista .leitura { font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prox { height:4px; background:var(--raised); border-radius:2px; margin-top:6px; }
.prox i { display:block; height:4px; background:var(--accent); border-radius:2px; transition:width 300ms ease-out; }
.lista .n { text-align:right; color:var(--muted); } .lista .n.on { color:var(--text); }
.pill { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:var(--radius-control); font-size:12px; background:var(--pill-neutral-bg); color:var(--text); white-space:nowrap; }
.pill.pos { background:var(--pill-pos-bg); color:var(--pill-pos-ink); }
.pill.neg { background:var(--pill-neg-bg); color:var(--pill-neg-ink); }
.pill.acento { background:#3a2e14; color:var(--accent); }
.vazio { color:var(--faint); padding:6px 0 2px; }

/* ---------- forms and controls ---------- */
input, select { font:inherit; height:36px; padding:0 12px; border-radius:8px; border:1px solid var(--control); background:var(--ground); color:var(--text); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
label .linha { display:flex; gap:6px; min-width:0; }
label .linha input { flex:1; min-width:0; width:100%; }
label .linha select { flex:none; width:72px; padding:0 8px; }
label > input, label > select { width:100%; min-width:0; }
.btn { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px; border-radius:var(--radius-control); background:#fff; color:#000; font-weight:500; font-size:13px; border:0; cursor:pointer; font-family:inherit; }
.btn.perigo { background:transparent; color:var(--negative); border:1px solid var(--control); }
.btn.quieto { background:var(--raised); color:var(--text); }
.coluna { display:flex; flex-direction:column; gap:10px; max-width:380px; }
.erro { color:var(--negative); } .ok { color:var(--positive); }
.filtros { display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin-bottom:12px; }
pre { background:var(--surface); border-radius:var(--radius-card); padding:var(--pad); overflow-x:auto; font-size:12px; line-height:1.5; color:var(--muted); }
.prosa p { margin:0 0 12px; max-width:72ch; color:var(--muted); } .prosa b { color:var(--text); font-weight:600; }

/* ---------- results ---------- */
.calendario { display:grid; grid-template-columns:repeat(auto-fill, minmax(48px, 1fr)); gap:6px; }
.dia { border-radius:8px; padding:6px 4px; text-align:center; font-size:12px; background:var(--raised); color:var(--muted); }
.dia b { display:block; font-size:12px; color:var(--text); font-weight:500; }
.dia.pos { background:var(--pill-pos-bg); color:var(--pill-pos-ink); } .dia.neg { background:var(--pill-neg-bg); color:var(--pill-neg-ink); }
#grafico { height:440px; border-radius:var(--radius-card); overflow:hidden; background:var(--surface); }
.thumb { height:36px; width:64px; object-fit:cover; border-radius:4px; display:block; }
.login { max-width:380px; margin:72px auto; }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns:1fr; }
  .side { display:none; }
  .topo { padding:0; height:52px; }
  .topo > span:first-child { display:none; }
  .topo .conta { height:52px; margin-left:0; border-left:0; padding:0 16px; }
  .pagina { padding:18px 16px 84px; }
  .grade.duas, .grade.lista-e-cartao { grid-template-columns:1fr; }
  .faixa { grid-template-columns:1fr; }
  .faixa > div { border-left:0; border-top:1px solid var(--rule); } .faixa > div:first-child { border-top:0; }
  .heroi { font-size:32px; }
  .barra-baixo { position:fixed; left:0; right:0; bottom:0; height:60px; display:grid; grid-template-columns:repeat(5, 1fr); background:var(--surface); border-top:1px solid var(--rule); z-index:5; }
  .barra-baixo a { display:flex; align-items:center; justify-content:center; font-size:12px; color:#bbb; }
  .barra-baixo a.on { color:#fff; }
}
@media (min-width: 901px) { .barra-baixo { display:none; } }