:root {
    --fundo: #f4f6f9;
    --superficie: #ffffff;
    --texto: #1d2330;
    --texto-suave: #5b6475;
    --borda: #dde2ea;
    --marca: #1f5fae;
    --marca-forte: #174a88;
    --ok: #1d7a46;
    --ok-fundo: #e3f4ea;
    --erro: #b42318;
    --erro-fundo: #fdecea;
    --alerta: #9a6700;
    --alerta-fundo: #fff4d6;
    --neutro-fundo: #eef1f5;
    --raio: 8px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #11151c;
        --superficie: #1a2029;
        --texto: #e6e9ef;
        --texto-suave: #9aa4b5;
        --borda: #2c3442;
        --marca: #6ea8ff;
        --marca-forte: #9cc3ff;
        --ok: #5fd08f;
        --ok-fundo: #173526;
        --erro: #ff8a80;
        --erro-fundo: #3d1d1b;
        --alerta: #f2c14e;
        --alerta-fundo: #3a2f12;
        --neutro-fundo: #232a35;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fundo);
    color: var(--texto);
}

a { color: var(--marca); }
a:hover { color: var(--marca-forte); }
h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1rem; margin: 0 0 12px; color: var(--texto-suave); font-weight: 600; }

/* Topo */
.topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding: 12px 16px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
}
.marca { font-weight: 700; color: var(--marca); text-decoration: none; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 16px; flex: 1; }
.menu a { text-decoration: none; color: var(--texto); }
.menu a:hover { color: var(--marca); }
.conta { display: flex; align-items: center; gap: 12px; }
.conta form { margin: 0; }

.conteudo { max-width: 1280px; margin: 0 auto; padding: 24px 16px 48px; }

/* Blocos */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px;
    margin-bottom: 16px;
}
.cartao-login { max-width: 380px; margin: 48px auto; }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.grade-cartoes .cartao { margin-bottom: 0; }
.grade-cartoes { margin-bottom: 16px; }
.grade-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.numero { font-size: 1.6rem; font-weight: 700; margin: 0; }
.detalhe { color: var(--texto-suave); font-size: .9rem; margin: 4px 0 0; }
.rolagem { overflow-x: auto; }

/* Formularios */
.formulario { display: grid; gap: 12px; }
.formulario label, .filtros label { display: grid; gap: 4px; font-size: .9rem; color: var(--texto-suave); }
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
input, select {
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 8px 10px;
    min-height: 40px;
    width: 100%;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
}
.botao {
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--marca);
    border: 0;
    border-radius: 6px;
    padding: 8px 16px;
    min-height: 40px;
    cursor: pointer;
}
.botao:hover { background: var(--marca-forte); }
.botao-link {
    font: inherit;
    color: var(--marca);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}
.acoes { margin: 0 0 16px; }
.tabela form { margin: 0; }

/* Tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela .mensagem { color: var(--texto-suave); max-width: 360px; }
.tabela .vazio { text-align: center; color: var(--texto-suave); padding: 24px; }
.sub { display: block; color: var(--texto-suave); font-size: .8rem; }
.chave { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; word-break: break-all; }
.arquivos a { margin-right: 8px; font-weight: 600; }
.arquivos a.pendente { color: var(--texto-suave); font-weight: 400; }

/* Selos e avisos */
.selo {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    background: var(--neutro-fundo);
    color: var(--texto-suave);
}
.selo-ok { background: var(--ok-fundo); color: var(--ok); }
.selo-erro, .selo-bloqueado { background: var(--erro-fundo); color: var(--erro); }
.selo-parcial, .selo-rodando, .selo-aguardando { background: var(--alerta-fundo); color: var(--alerta); }

.aviso { padding: 10px 14px; border-radius: var(--raio); margin: 0 0 16px; }
.aviso-ok { background: var(--ok-fundo); color: var(--ok); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro); }

.paginacao { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 8px 0 16px; }