:root {
  color-scheme: dark;
  --fundo: #040404;
  --painel: #0b0b0b;
  --painel-2: #151515;
  --linha: #272727;
  --texto: #f3f3f3;
  --suave: #9d9d9d;
  --marca: #ff5666;
  --bom: #3fc79a;
  --atencao: #f2b84b;
  --alerta: #ff6b6b;
  --info: #c3cad2;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 15px; line-height: 1.5; }
/* preto piano: laca escura com reflexo suave */
body {
  background:
    radial-gradient(120% 70% at 15% -10%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(80% 50% at 100% 100%, rgba(255, 86, 102, 0.07) 0%, rgba(255, 86, 102, 0) 60%),
    linear-gradient(160deg, #0f0f0f 0%, #030303 45%, #0a0a0a 100%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0) 54%);
}
main, .topo { position: relative; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }

/* ---------- topo ---------- */
.topo { display: flex; align-items: center; gap: 14px; padding: 10px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 60%), #050505; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.topo .logo-topo { height: 42px; width: 42px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(255, 40, 60, 0.35)); }
.marca { font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; }
.marca span { color: var(--marca); }
.canal { color: var(--suave); font-size: .9rem; }
.espaco { flex: 1; }
.estado { color: var(--suave); font-size: .82rem; }
.demo { background: var(--atencao); color: #1a1405; font-weight: 700; font-size: .75rem; padding: 2px 8px; border-radius: 99px; }

button, .botao { font: inherit; color: var(--texto); background: linear-gradient(180deg, #1d1d1d, #0e0e0e); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 7px 14px; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; }
button:hover, .botao:hover { border-color: var(--suave); text-decoration: none; }
button.principal, .botao.principal { background: linear-gradient(180deg, #ff6676, #d92a3c); border-color: #ff7d8a; color: #fff; font-weight: 700; box-shadow: 0 6px 18px rgba(217, 42, 60, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; }
button:disabled { opacity: .5; cursor: default; }

/* ---------- grade ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 22px 24px 60px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.cartao {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 22%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(160deg, #0d0d0d, #030303);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 18px 20px;
  min-width: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 -1px 0 rgba(0, 0, 0, 0.9) inset, 0 18px 40px rgba(0, 0, 0, 0.55);
}
.c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
@media (max-width: 1000px) { .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; } }
@media (max-width: 600px) { main { padding: 14px; gap: 12px; } .topo { padding: 10px 14px; } }

h2 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; }
.sub { color: var(--suave); font-size: .84rem; margin: 0 0 14px; }
.vazio { color: var(--suave); font-style: italic; }
.aviso { grid-column: span 12; background: #3a2a12; border: 1px solid #7a5a1f; color: #ffe2a8; border-radius: 12px; padding: 14px 18px; }
.erro { color: var(--alerta); }

/* ---------- números e barras ---------- */
.grande { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.grande small { font-size: .95rem; font-weight: 500; color: var(--suave); }
.linha-num { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 0 5px; font-size: .9rem; }
.linha-num b { font-weight: 700; }
.barra { position: relative; height: 10px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 99px; background: var(--info); }
.barra i.bom { background: var(--bom); } .barra i.atencao { background: var(--atencao); } .barra i.alerta { background: var(--alerta); }
.barra em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--texto); opacity: .85; }
.legenda { color: var(--suave); font-size: .78rem; margin-top: 4px; }

/* ---------- formulários ---------- */
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; margin-top: 12px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--suave); font-weight: 600; }
input { font: inherit; color: var(--texto); background: linear-gradient(180deg, #000, #0a0a0a); border: 1px solid #2a2a2a; border-radius: 8px; padding: 7px 10px; width: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) inset; }
input:focus { border-color: var(--marca); outline: none; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- técnico ---------- */
.msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.msg { border-left: 4px solid var(--info); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), #0a0a0a; border-radius: 0 8px 8px 0; padding: 10px 14px; }
.msg.bom { border-color: var(--bom); } .msg.atencao { border-color: var(--atencao); } .msg.alerta { border-color: var(--alerta); }
.msg b { display: block; font-size: .92rem; margin-bottom: 2px; }
.msg span { color: #cbd7df; font-size: .88rem; }

/* ---------- gráfico ---------- */
.grafico { width: 100%; height: 170px; display: block; }
.grafico .eixo { stroke: var(--linha); stroke-width: 1; }
.grafico .barraG { fill: var(--info); }
.grafico .barraG.hoje { fill: var(--marca); }
.grafico text { fill: var(--suave); font-size: 10px; }

/* ---------- tabelas e listas ---------- */
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th { text-align: left; color: var(--suave); font-weight: 600; font-size: .76rem; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--linha); white-space: nowrap; }
td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tit { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.titulo { width: 100%; max-width: 0; }
.chip { display: inline-block; font-size: .76rem; padding: 2px 9px; border-radius: 99px; background: var(--painel-2); border: 1px solid var(--linha); margin: 0 6px 6px 0; }
.chip b { color: var(--marca); margin-left: 4px; }
.chip.futebol { border-color: var(--bom); }
.noticias { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.noticias li { font-size: .88rem; }
.noticias small { color: var(--suave); display: block; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .duas { grid-template-columns: 1fr; } }
.subtitulo { font-size: .8rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login form { width: min(380px, 100%); background: var(--painel); border: 1px solid var(--linha); border-radius: 14px; padding: 28px; display: grid; gap: 14px; }
.login h1 { margin: 0; font-size: 1.4rem; }
.login h1 span { color: var(--marca); }
.login p { margin: 0; color: var(--suave); font-size: .9rem; }
.login .erro { min-height: 1.3em; font-size: .88rem; }

/* ---------- abas ---------- */
.abas { display: flex; gap: 4px; padding: 10px 24px 0; max-width: 1280px; margin: 0 auto; overflow-x: auto; position: relative; }
.aba { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; padding: 10px 16px; color: var(--suave); font-weight: 600; white-space: nowrap; }
.aba:hover { color: var(--texto); border-color: #444; }
.aba.ativa { color: var(--texto); border-bottom-color: var(--marca); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)); }

/* ---------- alerta de viral ---------- */
.alerta-area { max-width: 1280px; margin: 14px auto 0; padding: 0 24px; display: grid; gap: 10px; position: relative; }
.radar { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; border-radius: 12px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: #0b0b0b; }
.radar.quieto { grid-template-columns: 1fr auto; color: var(--suave); font-size: .84rem; padding: 8px 14px; }
.radar.viral { border-color: #ff5666; background: linear-gradient(90deg, rgba(255, 86, 102, 0.22), rgba(255, 86, 102, 0.05)), #0b0b0b; box-shadow: 0 0 28px rgba(255, 60, 80, 0.25); animation: pulso 2.4s ease-in-out infinite; }
.radar.quente { border-color: var(--atencao); background: linear-gradient(90deg, rgba(242, 184, 75, 0.16), rgba(242, 184, 75, 0.03)), #0b0b0b; }
.radar-selo { font-weight: 800; font-size: .8rem; letter-spacing: .06em; white-space: nowrap; }
.radar.viral .radar-selo { color: #ff8a96; }
.radar.quente .radar-selo { color: var(--atencao); }
.radar-corpo { display: grid; gap: 2px; min-width: 0; }
.radar-corpo .tit { max-width: 100%; font-weight: 700; color: var(--texto); }
.radar-corpo span { color: #cfcfcf; font-size: .86rem; }
.radar-dica { grid-column: 1 / -1; color: var(--suave); font-size: .82rem; }
@keyframes pulso { 50% { box-shadow: 0 0 40px rgba(255, 60, 80, 0.45); } }
@media (prefers-reduced-motion: reduce) { .radar.viral { animation: none; } }

/* ---------- abas de análise ---------- */
.cab-aba { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.seletor { display: flex; gap: 6px; flex-wrap: wrap; }
.seletor button { padding: 5px 12px; font-size: .84rem; }
.seletor button.ativo { border-color: var(--marca); color: #fff; background: linear-gradient(180deg, #3a1015, #1c0709); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 18px; }
@media (max-width: 700px) { .kpis { grid-template-columns: 1fr; } }
.kpi { display: grid; gap: 2px; text-align: center; padding: 14px 10px; border-radius: 12px; }
.kpi.ativo { border-color: var(--marca); background: linear-gradient(180deg, #22090c, #0c0405); }
.kpi-rot { color: var(--suave); font-size: .8rem; }
.kpi-val { font-size: 1.9rem; font-weight: 800; line-height: 1.15; }
.delta { font-size: .78rem; color: var(--suave); }
.delta.up { color: var(--bom); } .delta.down { color: var(--alerta); }
.hbarras { display: grid; gap: 9px; }
.hlinha { display: grid; grid-template-columns: minmax(90px, 200px) 1fr minmax(110px, auto); gap: 12px; align-items: center; font-size: .86rem; }
.hlinha .hrot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlinha .hval { text-align: right; font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) { .hlinha { grid-template-columns: 1fr; gap: 3px; } .hlinha .hval { text-align: left; } }
.rolagem { overflow-x: auto; }
.qual { margin-bottom: 14px; }
@media (max-width: 600px) { .abas, .alerta-area { padding-left: 14px; padding-right: 14px; } }

/* ---------- fase Vasco ---------- */
.kpis4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .kpis4 { grid-template-columns: repeat(2, 1fr); } }
.kpi.estatico { cursor: default; }
.kpi.estatico:hover { border-color: rgba(255, 255, 255, 0.12); }
.fase-form { grid-template-columns: minmax(200px, 320px); }

/* ---------- fase Vasco: versão explicada ---------- */
.kpi-exp { color: var(--suave); font-size: .76rem; line-height: 1.35; margin-top: 6px; }
.kpi.estatico { align-content: start; }
.cenarios { display: grid; gap: 16px; margin-bottom: 14px; }
.cenario { padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); }
.cenario.destaque { border-color: rgba(255, 86, 102, 0.6); background: linear-gradient(90deg, rgba(255, 86, 102, 0.12), rgba(255, 86, 102, 0.02)); }
.cenario-topo { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: .92rem; }
.cenario .legenda { margin: 6px 0 0; font-size: .8rem; }
.callout { border-left: 4px solid var(--atencao); background: rgba(242, 184, 75, 0.07); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 8px 0 18px; }
.callout p { margin: 0 0 6px; font-size: .9rem; line-height: 1.5; }
.callout .subtitulo { margin-bottom: 8px; color: var(--atencao); }
.hlinha.sem { grid-template-columns: minmax(150px, 230px) 1fr minmax(130px, auto); }
@media (max-width: 600px) { .hlinha.sem { grid-template-columns: 1fr; } }
.como-ler { margin-top: 14px; color: var(--suave); font-size: .86rem; }
.como-ler summary { cursor: pointer; color: var(--texto); font-weight: 600; }
.como-ler ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------- aba Rumo à meta ---------- */
.hero-hoje { border-color: rgba(255, 86, 102, 0.35); }
.hero-texto { font-size: 1.35rem; font-weight: 700; line-height: 1.4; margin: 6px 0 14px; max-width: 62em; }
.hero-texto.alerta { color: #ffb0b8; } .hero-texto.bom { color: #b8f0d8; } .hero-texto.atencao { color: #ffe0a0; }
.pontos { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ponto { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #444; background: #0a0a0a; }
.ponto.feito { background: var(--marca); border-color: var(--marca); box-shadow: 0 0 10px rgba(255, 86, 102, 0.5); }
.pontos b { margin-left: 6px; font-size: .95rem; }
.botao.mini { display: inline-block; margin-top: 8px; padding: 3px 12px; font-size: .8rem; width: fit-content; }
.msg { display: grid; justify-items: start; }

/* ---------- Rumo à meta: atualização ---------- */
.atualiza { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.atualiza .legenda { margin: 0; }
.novo { display: inline-block; background: var(--marca); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: 1px 7px; border-radius: 99px; margin-right: 8px; vertical-align: middle; }

/* ---------- contadores ao vivo no topo ---------- */
.ao-vivo { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pilula { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: baseline; padding: 4px 14px 5px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)), #070707; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset; cursor: help; }
.pilula-rot { grid-column: 1 / -1; font-size: .62rem; font-weight: 800; letter-spacing: .12em; color: var(--suave); display: flex; align-items: center; gap: 6px; }
.pilula-val { font-size: 1.25rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pilula-extra { font-size: .78rem; color: var(--suave); }
.pilula-extra.pos { color: var(--bom); font-weight: 700; }
.ponto-vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 8px var(--marca); animation: vivo 1.8s ease-in-out infinite; }
@keyframes vivo { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ponto-vivo { animation: none; } }

/* ---------- barra grande da meta do mês ---------- */
.meta-grande { margin: 4px 0 18px; padding: 14px 16px 30px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); }
.meta-real { font-size: 1.3rem; }
.barra.grossa { height: 18px; margin-top: 6px; overflow: visible; }
.barra.grossa i { border-radius: 99px; background: linear-gradient(90deg, #8f1c28, var(--marca)); }
.barra.grossa i.atencao { background: linear-gradient(90deg, #8a6a1f, var(--atencao)); }
.barra.grossa i.bom { background: linear-gradient(90deg, #14664a, var(--bom)); }
.barra.grossa em { top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: #fff; }
.barra.grossa em.comb { background: var(--atencao); }
.barra.grossa em.hoje { background: #fff; opacity: .55; width: 2px; }
.mrotulos { position: relative; height: 0; }
.mrot { position: absolute; top: 10px; transform: translateX(-100%); font-size: .72rem; color: var(--suave); white-space: nowrap; padding-right: 4px; }
.mrot.c { color: var(--atencao); }
.mrot.o { color: var(--texto); }

/* ---------- metas do mês: versão explicada ---------- */
.meta-frase { font-size: 1rem; margin: 6px 0 14px; line-height: 1.5; }
.meta-frase .meta-real { font-size: 1.25rem; }
.legenda-barra { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 16px; font-size: .78rem; color: var(--suave); }
.legenda-barra span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.lg.verm { background: var(--marca); } .lg.amar { background: var(--atencao); } .lg.bran { background: #fff; opacity: .7; } .lg.fim { background: transparent; border: 2px solid var(--suave); }
.meta-linha { padding: 10px 14px; margin-bottom: 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); }
.meta-linha.comb { border-left: 4px solid var(--atencao); }
.meta-linha.ous { border-left: 4px solid var(--marca); }
.meta-topo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.meta-alvo { color: var(--texto); font-weight: 800; font-size: 1.05rem; }
.meta-linha p { margin: 4px 0 0; color: #cfcfcf; font-size: .86rem; }
.selo { font-size: .72rem; font-weight: 800; padding: 1px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid; }
.selo.bom { color: var(--bom); border-color: var(--bom); } .selo.atencao { color: var(--atencao); border-color: var(--atencao); } .selo.alerta { color: var(--alerta); border-color: var(--alerta); }
.outra { margin-bottom: 12px; } .outra .legenda { margin-top: 4px; }
.meta-grande, .mrotulos { display: none; }

/* ---------- shorts nos pontinhos do dia ---------- */
.ponto.short { border-radius: 4px; width: 14px; height: 22px; }
.ponto.short.feito { background: #fff; border-color: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); }
.sep-pontos { width: 1px; height: 22px; background: #444; margin: 0 8px; }