:root {
  --fundo: #14110d; --sup: #1f1b16; --sup2: #2a251e; --borda: #3a3329;
  --texto: #f3ece2; --disc: #a69a89; --ouro: #e0a53b; --verde: #5dbb7a; --vermelho: #e2574c; --azul: #6ea8e0;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto);
       font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--ouro); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.35rem; margin: 0 0 6px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
h2 small { color: var(--disc); font-weight: 400; font-size: .8rem; margin-left: 6px; }
code { background: var(--sup2); padding: 1px 6px; border-radius: 6px; }
small, .discreto { color: var(--disc); }
.vazio { color: var(--disc); }
.vermelho { color: var(--vermelho); }

.topo { position: sticky; top: 0; z-index: 10; background: var(--sup); border-bottom: 1px solid var(--borda);
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 16px; }
.marca { display: flex; align-items: center; gap: 8px; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca span { color: var(--disc); }
.marca.grande strong { font-size: 1.5rem; display: block; }
.topo nav { display: flex; gap: 4px; overflow-x: auto; flex: 1; }
.topo nav a { color: var(--disc); padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.topo nav a.ativo { color: var(--texto); background: var(--sup2); }
.topo nav .sair { margin-left: auto; }

main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.aviso { padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; border: 1px solid var(--borda);
         border-left: 4px solid var(--verde); background: var(--sup); }
.aviso-erro { border-left-color: var(--vermelho); }
.aviso-info { border-left-color: var(--azul); }
.aviso-senha { border-left-color: var(--ouro); background: #2a2214; }

.numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.numeros div { background: var(--sup); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; }
.numeros span { display: block; color: var(--disc); font-size: .8rem; }
.numeros b { font-size: 1.15rem; }

.bloco, .cartao { background: var(--sup); border: 1px solid var(--borda); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.bloco details { margin-top: 12px; }
summary { cursor: pointer; color: var(--ouro); font-weight: 600; padding: 6px 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th { color: var(--disc); font-weight: 500; font-size: .8rem; }
@media (max-width: 700px) {
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--borda); padding: 8px 0; }
  td { border: 0; padding: 3px 0; }
}

.lista { list-style: none; margin: 0 0 12px; padding: 0; }
.lista li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.lista li span:last-child { color: var(--disc); white-space: nowrap; font-size: .85rem; }

.item { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
        padding: 10px 0; border-bottom: 1px solid var(--borda); }
.item.inativo { opacity: .55; }

.selo { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px;
        background: var(--sup2); color: var(--disc); vertical-align: middle; }
.selo-ativo, .selo-cb-pago, .selo-est-estoque { background: rgba(93,187,122,.15); color: var(--verde); }
.selo-suspenso, .selo-cb-vencido, .selo-est-defeito { background: rgba(226,87,76,.15); color: var(--vermelho); }
.selo-cb-pendente, .selo-est-instalado, .selo-est-ativo { background: rgba(224,165,59,.15); color: var(--ouro); }

.form { display: grid; gap: 12px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .duas { grid-template-columns: 1fr; } }
label { display: grid; gap: 5px; font-size: .82rem; color: var(--disc); }
label.check { display: flex; align-items: center; gap: 8px; color: var(--texto); }
input, select, textarea { font: inherit; color: var(--texto); background: var(--sup2); border: 1px solid var(--borda);
                          border-radius: 9px; padding: 9px 10px; width: 100%; }
label.check input { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ouro); outline-offset: 1px; }
input[type=date] { color-scheme: dark; }

.btn { display: inline-block; font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 10px 16px;
       background: var(--ouro); color: #1a1408; cursor: pointer; text-align: center; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn-sec { background: var(--sup2); color: var(--texto); border: 1px solid var(--borda); }
.btn-perigo { background: var(--vermelho); color: #fff; }
.btn-mini { padding: 6px 10px; font-size: .82rem; border-radius: 8px; }

.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mini-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mini-form form { display: flex; gap: 6px; align-items: center; }
.mini-form select { width: auto; padding: 5px 8px; font-size: .82rem; }

.filtros { display: flex; gap: 8px; margin-bottom: 12px; }
.filtros select { width: auto; }
.abas { display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto; }
.abas a { padding: 7px 12px; border-radius: 8px; color: var(--disc); white-space: nowrap; }
.abas a.ativo { background: var(--sup2); color: var(--texto); }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login .cartao { width: 100%; max-width: 380px; display: grid; gap: 14px; }