:root {
  --fundo: #f3f5f9; --cartao: #ffffff; --texto: #1f2a37; --suave: #64748b;
  --borda: #dde3ec; --topo: #13233f; --verde: #0f8a5f; --verde-fundo: #e3f4ec;
  --vermelho: #c0392b; --vermelho-fundo: #fbe7e5; --amarelo: #a86b00; --amarelo-fundo: #fff3d6;
  --cinza-fundo: #eef1f6;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto);
       font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
header { background: var(--topo); color: #fff; padding: 14px 24px; display: flex;
         align-items: center; gap: 16px; flex-wrap: wrap; }
header h1 { font-size: 20px; margin: 0; }
header small { opacity: .7; letter-spacing: .08em; font-size: 11px; text-transform: uppercase; }
header .direita { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 13px; }
main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 18px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; }
.cartao h2 { font-size: 15px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--borda);
             display: flex; align-items: center; gap: 8px; }
.cartao h2 .conta { margin-left: auto; background: var(--cinza-fundo); border-radius: 10px;
                    padding: 0 8px; font-size: 12px; color: var(--suave); }
.teste { padding: 14px 16px; display: grid; gap: 4px; }
.teste .rotulo { color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.teste .valor { font-size: 18px; font-weight: 600; }
.teste .detalhe { color: var(--suave); font-size: 12px; min-height: 1.4em; overflow-wrap: anywhere; }
.ok { color: var(--verde); } .ruim { color: var(--vermelho); } .neutro { color: var(--suave); }
.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th { font-size: 12px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.selo { display: inline-block; padding: 1px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.selo.on { background: var(--verde-fundo); color: var(--verde); }
.selo.off { background: var(--cinza-fundo); color: var(--suave); }
.selo.alerta { background: var(--amarelo-fundo); color: var(--amarelo); }
.selo.erro { background: var(--vermelho-fundo); color: var(--vermelho); }
.vazio { padding: 16px; color: var(--suave); }
.eventos { max-height: 360px; overflow-y: auto; }
.eventos td:last-child { white-space: normal; }
.aviso { background: var(--vermelho-fundo); color: var(--vermelho); border: 1px solid #f1c3be;
         border-radius: 10px; padding: 12px 16px; }
.aviso[hidden] { display: none; }
label.auto { display: flex; gap: 6px; align-items: center; cursor: pointer; }
button { background: #1f7a5a; color: #fff; border: 0; border-radius: 6px; padding: 6px 12px;
         font: inherit; cursor: pointer; }
button:hover { background: #17664a; }
code { font-family: Consolas, monospace; font-size: 12.5px; }
.id { color: var(--suave); font-size: 12px; font-family: Consolas, monospace; }
.form-novo { padding: 14px 16px; display: grid; gap: 12px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.campos label { display: grid; gap: 4px; font-size: 12px; color: var(--suave); }
.campos input { font: inherit; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 6px;
                background: #fff; color: var(--texto); }
.acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.nota { color: var(--suave); font-size: 12px; }
.resultado { margin: 0 16px 14px; padding: 12px 14px; border-radius: 8px; display: flex; gap: 12px;
             align-items: center; flex-wrap: wrap; }
.resultado.ok { background: var(--verde-fundo); color: var(--verde); }
.resultado.erro { background: var(--vermelho-fundo); color: var(--vermelho); }
a.botao { background: #1f7a5a; color: #fff; border-radius: 6px; padding: 6px 12px; text-decoration: none; }
a.botao:hover { background: #17664a; }
a.pacote { color: var(--verde); font-size: 12px; }
header form { margin: 0; }
button.sair { background: transparent; border: 1px solid rgba(255,255,255,.5); }
.login { max-width: 360px; margin: 60px auto; padding: 20px; display: grid; gap: 12px; }
.login label { display: grid; gap: 4px; font-size: 12px; color: var(--suave); }
.login input { font: inherit; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; }