/* ==========================================================================
   app.css · a casca do JROAS
   Preto e ouro, Outfit para texto e JetBrains Mono para número — número em
   fonte de largura fixa alinha na coluna e para de dançar quando atualiza.
   ========================================================================== */
:root{
  --ouro:#c9a227; --ouro2:#ebd48f; --ouro-escuro:#8f7016;
  --fundo:#09090a; --carta:#141416; --carta2:#1c1c20;
  --linha:rgba(201,162,39,.2); --linha2:rgba(255,255,255,.07);
  --tx:#ededf0; --tx2:#8a8a94; --tx3:#5a5a63;
  --ok:#3fb37f; --erro:#e0685a; --alerta:#d9a441;
  --sans:'Outfit',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--fundo);color:var(--tx);font:400 15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ouro2)}
:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- estrutura ---------- */
.casca{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
@media (max-width:900px){.casca{grid-template-columns:1fr}}

.lateral{border-right:1px solid var(--linha2);padding:20px 14px;
  background:linear-gradient(170deg,#151105,var(--fundo) 40%);
  display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
@media (max-width:900px){
  .lateral{position:static;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;border-right:0;border-bottom:1px solid var(--linha2)}
}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding:0 6px}
@media (max-width:900px){.logo{margin-bottom:0;margin-right:auto}}
.logo .mk{width:34px;height:34px;border-radius:10px;flex:none;color:#100D02;
  background:linear-gradient(150deg,var(--ouro),var(--ouro-escuro));
  display:grid;place-items:center;font-weight:700;font-size:14px}
.logo b{font-size:14px;font-weight:600;letter-spacing:-.01em;display:block;line-height:1.15}
.logo span{font-size:10px;color:var(--tx2);letter-spacing:.12em;text-transform:uppercase}

.nav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  color:var(--tx2);text-decoration:none;font-size:14px;border:1px solid transparent}
.nav:hover{background:rgba(255,255,255,.03);color:var(--tx)}
.nav[aria-current=page]{background:rgba(201,162,39,.11);border-color:var(--linha);color:var(--ouro2)}
.nav svg{width:18px;height:18px;flex:none}
.nav .selo{margin-left:auto;background:var(--ouro);color:#100D02;font-size:10.5px;
  font-weight:700;min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center}
.rodape-lateral{margin-top:auto;padding:12px 6px 0;border-top:1px solid var(--linha2);
  font-size:11.5px;color:var(--tx3)}
@media (max-width:900px){.rodape-lateral{display:none}}
.rodape-lateral button{background:none;border:0;color:var(--tx2);cursor:pointer;
  text-decoration:underline;font-size:11.5px;padding:0;margin-top:4px}

.conteudo{padding:24px 26px 70px;max-width:1320px;width:100%}
@media (max-width:640px){.conteudo{padding:18px 14px 60px}}

.topo{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.topo h1{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.topo p{font-size:13px;color:var(--tx2)}
.topo .direita{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

select,input[type=text],input[type=email],input[type=password],input[type=date],textarea{
  background:var(--carta2);border:1px solid var(--linha2);border-radius:10px;
  padding:9px 11px;font-size:14px;width:100%}
textarea{resize:vertical;line-height:1.45}
::placeholder{color:var(--tx3)}
select.compacto,input.compacto{width:auto;min-width:150px}

.bt{border:0;border-radius:10px;padding:9px 15px;font-size:13.5px;font-weight:600;
  cursor:pointer;background:linear-gradient(150deg,var(--ouro),var(--ouro-escuro));color:#100D02}
.bt:disabled{opacity:.4;cursor:default}
.bt.fantasma{background:transparent;border:1px solid var(--linha);color:var(--ouro2)}
.bt.discreto{background:transparent;border:1px solid var(--linha2);color:var(--tx2)}
.bt.discreto:hover{color:var(--tx)}
.bt.largo{width:100%;padding:12px}

.grupo{display:inline-flex;border:1px solid var(--linha2);border-radius:10px;overflow:hidden}
.grupo button{background:transparent;border:0;padding:8px 14px;cursor:pointer;
  color:var(--tx2);font-size:13px}
.grupo button[aria-pressed=true]{background:var(--ouro);color:#100D02;font-weight:600}

.cartao{background:var(--carta);border:1px solid var(--linha2);border-radius:16px;padding:18px}
.cartao h2{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:14px}

.aviso{font-size:12.5px;padding:10px 12px;border-radius:10px;border:1px solid var(--linha2);
  color:var(--tx2);margin-top:10px;white-space:pre-wrap}
.aviso.erro{border-color:var(--erro);color:var(--erro);background:rgba(224,104,90,.07)}
.aviso.ok{border-color:var(--ok);color:var(--ok);background:rgba(63,179,127,.07)}
.aviso.alerta{border-color:var(--alerta);color:var(--alerta);background:rgba(217,164,65,.07)}

.vazio{text-align:center;color:var(--tx2);padding:56px 20px;font-size:14px}
.vazio b{display:block;color:var(--tx);font-size:16px;font-weight:500;margin-bottom:6px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx2);font-weight:600;padding:0 10px 9px;border-bottom:1px solid var(--linha2)}
td{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.04)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
th.n{font-family:var(--sans)}
tbody tr:hover{background:rgba(255,255,255,.02)}
.pausada{color:var(--tx3);font-size:10.5px;border:1px solid var(--linha2);
  padding:1px 6px;border-radius:999px;margin-left:6px}