
:root {
  --fundo: #f5f6f8; --plano: #ffffff; --sutil: #f0f2f5; --texto: #14181f; --apoio: #5b6472; --linha: #dfe3e9;
  --forte: #c5ccd6; --marca: #0f7a55; --marca-escura: #0b6143; --marca-suave: #e3f3ec; --sobre-marca: #ffffff;
  --erro: #b42318; --erro-suave: #fdecea; --aviso: #8a5a00; --aviso-suave: #fdf3d8; --info: #1f5fbf; --info-suave: #e6eefb;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1216; --plano: #171b21; --sutil: #1e232b; --texto: #eef1f5; --apoio: #9aa4b2; --linha: #2a313b;
    --forte: #3a434f; --marca: #3fc592; --marca-escura: #5fd3a6; --marca-suave: #15382b; --sobre-marca: #08130e;
    --erro: #ff8f85; --erro-suave: #3a1a17; --aviso: #f1bf5a; --aviso-suave: #3a2e12; --info: #7cc4ff; --info-suave: #16263a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1 { font-size: 26px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { font-size: 20px; line-height: 1.3; margin: 0 0 2px; letter-spacing: -.01em; }
h3 { font-size: 15px; margin: 18px 0 6px; }
h3.espaco { margin-top: 28px; }
.apoio { color: var(--apoio); margin: 0; font-size: 14px; max-width: 80ch; }
code { background: var(--sutil); padding: 1px 6px; border-radius: 6px; font-size: 13px; overflow-wrap: anywhere; }
pre { background: var(--sutil); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; overflow: auto; margin: 0 0 8px; white-space: pre-wrap; }

.marca-cr { width: 44px; height: 44px; border-radius: 12px; background: var(--texto); color: var(--plano); display: grid; place-items: center; font-weight: 800; letter-spacing: .02em; }
.marca-cr.pequena { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; flex: none; }

.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.cartao-entrada { width: 100%; max-width: 380px; background: var(--plano); border: 1px solid var(--linha); border-radius: 16px; padding: 28px; box-shadow: var(--sombra); }
.cartao-entrada h1 { margin-top: 18px; }

.barra { position: sticky; top: 0; z-index: 5; background: var(--plano); border-bottom: 1px solid var(--linha); }
.barra-dentro { max-width: 1200px; margin: 0 auto; padding: 12px 20px 8px; display: flex; align-items: center; gap: 12px; }
.titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.titulo strong { font-size: 17px; }
.estado { font-size: 13px; color: var(--apoio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abas { max-width: 1200px; margin: 0 auto; padding: 0 12px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.aba { appearance: none; border: 0; background: none; font: inherit; font-weight: 600; color: var(--apoio); padding: 10px 12px 12px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { color: var(--marca-escura); border-bottom-color: var(--marca); }
.conta { display: inline-block; min-width: 22px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--sutil); color: var(--apoio); font-size: 12px; line-height: 20px; text-align: center; }
.aba[aria-selected="true"] .conta { background: var(--marca-suave); color: var(--marca-escura); }

.conteudo { max-width: 1200px; margin: 0 auto; padding: 22px 20px 80px; }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.lista { display: flex; flex-direction: column; gap: 8px; }
.item { background: var(--plano); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra); padding: 12px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.item .nome { font-weight: 650; min-width: 90px; text-transform: capitalize; }
.item .meio { flex: 1; min-width: 200px; color: var(--apoio); font-size: 14px; }
.item .meio strong { color: var(--texto); }
.item .acoes-item { display: flex; gap: 6px; flex-wrap: wrap; }
.caixa { background: var(--plano); border: 1px solid var(--linha); border-radius: 12px; padding: 4px 16px 16px; box-shadow: var(--sombra); max-width: 520px; }
.caixa-link { margin-top: 12px; background: var(--marca-suave); border: 1px solid var(--marca); border-radius: 12px; padding: 12px 16px; }
.link-novo { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.link-novo code { background: var(--plano); padding: 8px 10px; flex: 1; min-width: 240px; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.numero { background: var(--plano); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px; }
.numero b { display: block; font-size: 22px; line-height: 1.1; }
.numero span { font-size: 12px; color: var(--apoio); }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
select, input[type="search"], input[type="email"], input[type="password"], input[type="text"] { font: inherit; color: var(--texto); background: var(--plano); border: 1px solid var(--forte); border-radius: 8px; padding: 8px 10px; }
.filtros select, .filtros input { height: 36px; }
.filtros input { min-width: 240px; }
.caixa input, .caixa select, .cartao-entrada input { width: 100%; margin-top: 6px; }
input:focus, select:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 0; }

.log { background: #0f1216; color: #e6edf3; border: 1px solid #2a313b; border-radius: 12px; padding: 8px; height: 460px; overflow: auto; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.linha { display: grid; grid-template-columns: 70px 72px 230px 1fr 190px; gap: 10px; padding: 6px 8px; border-bottom: 1px solid #1e232b; align-items: center; cursor: pointer; }
.linha:hover { background: #171b21; }
.linha.nova { background: #15382b; }
.linha .hora { color: #9aa4b2; }
.linha .loja { font-weight: 700; }
.loja.hubla { color: #7cc4ff; } .loja.hotmart { color: #ffb86b; } .loja.ticto { color: #f78da7; } .loja.assiny { color: #c3a6ff; } .loja.tmb { color: #9ae6b4; }
.linha .ev { color: #eef1f5; } .linha .ev small { color: #9aa4b2; }
.linha .quem { color: #d7dde6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .res { display: flex; gap: 4px; flex-wrap: wrap; }
.res i { font-style: normal; font-size: 11px; padding: 0 7px; border-radius: 999px; background: #1e232b; color: #9aa4b2; }
.res i.sombra { background: #2c2a14; color: #f1bf5a; }
.res i.ignorado { background: #1e232b; color: #9aa4b2; }
.res i.erro { background: #3a1a17; color: #ff8f85; }
.res i.ok { background: #15382b; color: #3fc592; }
.log .vazio-log { color: #9aa4b2; padding: 20px; text-align: center; }

.detalhe { margin-top: 12px; background: var(--plano); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 16px 8px; }
.detalhe-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.selo { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--sutil); color: var(--apoio); white-space: nowrap; }
.selo.ok { background: var(--marca-suave); color: var(--marca-escura); }
.selo.aviso { background: var(--aviso-suave); color: var(--aviso); }
.selo.erro { background: var(--erro-suave); color: var(--erro); }
.selo.info { background: var(--info-suave); color: var(--info); }

.botao { appearance: none; font: inherit; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; font-size: 14px; }
.principal { background: var(--marca); color: var(--sobre-marca); padding: 9px 22px; }
.principal:hover { background: var(--marca-escura); }
.largo { width: 100%; margin-top: 18px; padding: 12px; }
.secundario { background: var(--plano); color: var(--texto); border-color: var(--forte); }
.secundario:hover { background: var(--sutil); }
.fantasma { background: none; color: var(--apoio); padding: 6px 10px; }
.fantasma:hover { background: var(--sutil); color: var(--texto); }
.botao:disabled { opacity: .5; cursor: default; }
.acoes { display: flex; gap: 10px; margin-top: 16px; }
.acoes-cabeca { display: flex; gap: 8px; }

.vazio { border: 1px dashed var(--forte); border-radius: 12px; padding: 24px 16px; text-align: center; color: var(--apoio); }
.erro { color: var(--erro); font-weight: 600; font-size: 14px; min-height: 1.5em; margin: 12px 0 0; }
.aviso-fixo { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--texto); color: var(--plano); padding: 8px 14px; border-radius: 999px; font-size: 13px; z-index: 9; margin: 0; }

@media (max-width: 760px) {
  .linha { grid-template-columns: 1fr; gap: 2px; }
  .conteudo { padding: 16px 12px 100px; }
  .log { height: 60vh; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
