:root {
  --fundo: #0e1117;
  --cartao: #161b26;
  --borda: #2a3245;
  --texto: #e6e9f0;
  --sub: #8b93a7;
  --verde: #22c55e;
  --amarelo: #eab308;
  --vermelho: #ef4444;
  --azul: #3b82f6;
  --roxo: #a78bfa;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.oculto { display: none !important; }
.tela-cheia { min-height: 100vh; }
.centro { display: flex; align-items: center; justify-content: center; }

header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; background: var(--fundo); z-index: 5;
}
header h1 { font-size: 1.1rem; margin: 0; }
.espaco { flex: 1; }
.saldos { color: var(--sub); font-size: .9rem; }
.badge { font-size: .72rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borda); }
.badge.dry { color: var(--amarelo); border-color: var(--amarelo); }
.badge.real { color: var(--vermelho); border-color: var(--vermelho); font-weight: 700; }

.card {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  padding: 18px; margin: 14px 0;
}
.login { width: min(92vw, 340px); display: flex; flex-direction: column; gap: 12px; }
.login h1 { margin: 0; font-size: 1.3rem; }
.sub { color: var(--sub); font-size: .85rem; margin: 6px 0; }
.erro { color: var(--vermelho); font-size: .85rem; margin: 6px 0; }
.aviso {
  margin: 12px 20px 0; padding: 10px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--amarelo) 14%, transparent);
  border: 1px solid var(--amarelo); font-size: .88rem;
}
.aviso.vermelho { background: color-mix(in srgb, var(--vermelho) 14%, transparent); border-color: var(--vermelho); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 4px 14px; padding: 0 20px; }
.grid .card { margin: 14px 0; }
#lista-remessas { padding: 0 20px 40px; }

.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
input, select {
  background: #0b0e14; color: var(--texto); border: 1px solid var(--borda);
  border-radius: 8px; padding: 10px 12px; font-size: 1rem; min-width: 0;
}
input[type="number"] { width: 160px; }
button {
  background: var(--azul); color: #fff; border: 0; border-radius: 8px;
  padding: 10px 16px; font-size: .95rem; cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.discreto { background: transparent; border: 1px solid var(--borda); color: var(--sub); padding: 6px 12px; font-size: .82rem; }
button.perigo { background: var(--vermelho); }
button.sucesso { background: var(--verde); color: #06220f; font-weight: 700; }
button:disabled { opacity: .45; cursor: not-allowed; }

.chip {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; letter-spacing: .03em;
}
.chip.AGUARDANDO_PIX { background: #3b3b1e; color: var(--amarelo); }
.chip.CREDITADA, .chip.CONVERTENDO, .chip.ENVIANDO { background: #1e2c3b; color: #7dd3fc; }
.chip.EUR_PRONTO { background: #14321f; color: #4ade80; }
.chip.CONCLUIDA { background: var(--verde); color: #06220f; }
.chip.ERRO { background: var(--vermelho); color: #fff; }
.chip.EXPIRADA, .chip.CANCELADA { background: #2a2a2a; color: var(--sub); }

.remessa h3 { margin: 0 0 4px; font-size: 1rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.remessa .valores { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0; color: var(--sub); font-size: .88rem; }
.remessa .valores b { color: var(--texto); }
.remessa details { margin-top: 8px; }
.remessa summary { cursor: pointer; color: var(--sub); font-size: .82rem; }
.eventos { list-style: none; padding: 8px 0 0; margin: 0; }
.eventos li { padding: 4px 0 4px 14px; border-left: 2px solid var(--borda); font-size: .84rem; color: var(--sub); }
.eventos li b { color: var(--texto); }
.acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
label { font-size: .85rem; color: var(--sub); }
label input[type="number"] { display: block; margin-top: 4px; }
.switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.config summary { cursor: pointer; color: var(--sub); font-size: .9rem; }