:root {
  --fundo: #f6f7f5; --cartao: #ffffff; --texto: #1d2420; --suave: #6b756f; --linha: #dfe4e0;
  --destaque: #2f6f4f; --destaque-texto: #ffffff; --erro: #b3261e; --sombra-modal: rgba(0, 0, 0, .7);
  --ok-fundo: #dff3e6; --ok-texto: #1b5e36;
  --aviso-fundo: #fdf0d0; --aviso-texto: #7a5300;
  --info-fundo: #dfeafc; --info-texto: #1d4a8a;
  --neutro-fundo: #e9ecea; --neutro-texto: #4a554f;
  --espaco: 12px; --raio: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #121614; --cartao: #1b211e; --texto: #e6ebe8; --suave: #98a49d; --linha: #2e3733;
    --destaque: #5fb88a; --destaque-texto: #0c1a12; --erro: #f2867e;
    --ok-fundo: #1d3a2a; --ok-texto: #9fdcb7;
    --aviso-fundo: #3d3213; --aviso-texto: #f0d487;
    --info-fundo: #1d2f4d; --info-texto: #a9c8f5;
    --neutro-fundo: #2a312d; --neutro-texto: #b5c0b9;
  }
}
:root[data-theme="dark"] {
  --fundo: #121614; --cartao: #1b211e; --texto: #e6ebe8; --suave: #98a49d; --linha: #2e3733;
  --destaque: #5fb88a; --destaque-texto: #0c1a12; --erro: #f2867e;
  --ok-fundo: #1d3a2a; --ok-texto: #9fdcb7;
  --aviso-fundo: #3d3213; --aviso-texto: #f0d487;
  --info-fundo: #1d2f4d; --info-texto: #a9c8f5;
  --neutro-fundo: #2a312d; --neutro-texto: #b5c0b9;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 960px; margin: 0 auto; padding: var(--espaco); }
header.topo { display: flex; flex-wrap: wrap; gap: var(--espaco); align-items: center; justify-content: space-between; }
h1 { font-size: 1.3rem; margin: 0; }
a { color: var(--destaque); }
.resumo { margin: var(--espaco) 0; color: var(--suave); }
.resumo strong { color: var(--texto); }
.filtros { display: flex; flex-wrap: wrap; gap: var(--espaco); margin-bottom: var(--espaco); }
.filtros label { display: flex; flex-direction: column; font-size: .8rem; color: var(--suave); gap: 2px; }
select, input[type=password] { font: inherit; padding: 8px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); color: var(--texto); max-width: 100%; }
button { font: inherit; cursor: pointer; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--cartao); color: var(--texto); padding: 6px 10px; }
button.primario { background: var(--destaque); color: var(--destaque-texto); border-color: var(--destaque); padding: 10px; }
table { width: 100%; border-collapse: collapse; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
th { font-size: .8rem; color: var(--suave); font-weight: 600; }
td.valor, th.valor { text-align: right; white-space: nowrap; }
.nulo { color: var(--suave); }
.selo { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .8rem; background: var(--neutro-fundo); color: var(--neutro-texto); }
.selo.extraida { background: var(--info-fundo); color: var(--info-texto); }
.selo.aguardando_fatura, .selo.revisao_manual { background: var(--aviso-fundo); color: var(--aviso-texto); }
.selo.conciliada { background: var(--ok-fundo); color: var(--ok-texto); }
.alerta { cursor: help; margin-left: 4px; }
.vazio { padding: 24px; text-align: center; color: var(--suave); }
.modal { position: fixed; inset: 0; background: var(--sombra-modal); display: flex; align-items: center; justify-content: center; padding: var(--espaco); z-index: 10; }
.modal[hidden] { display: none; }
.modal-caixa { max-width: 100%; max-height: 100%; background: var(--cartao); padding: var(--espaco); border-radius: var(--raio); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.modal-caixa img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.entrar { max-width: 360px; margin: 15vh auto 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; display: flex; flex-direction: column; gap: var(--espaco); }
.entrar label { display: flex; flex-direction: column; gap: 4px; }
.erro { color: var(--erro); margin: 0; }
.erro[hidden] { display: none; }
@media (max-width: 600px) {
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  table { background: none; border: 0; }
  tr { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: var(--espaco); padding: 6px 0; }
  td { border: 0; padding: 4px 12px; display: flex; justify-content: space-between; gap: 8px; text-align: right !important; overflow-wrap: anywhere; }
  td::before { content: attr(data-rotulo); color: var(--suave); font-size: .8rem; text-align: left; flex: none; }
  td.vazio { display: block; }
  td.vazio::before { content: none; }
}