:root { --fundo:#f6f7f9; --superficie:#fff; --texto:#1f2933; --suave:#616e7c; --borda:#d9dee4; --destaque:#1f6feb; --perigo:#c62828; --coluna:#eef1f4; }
@media (prefers-color-scheme: dark) {
  :root { --fundo:#111418; --superficie:#1b2027; --texto:#e6e9ee; --suave:#9aa5b1; --borda:#2c333c; --destaque:#4c8dff; --perigo:#ef5350; --coluna:#161a20; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fundo); color: var(--texto); }
header#topo { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--borda); background: var(--superficie); }
#abas { display: flex; gap: 4px; flex: 1; }
#abas button { border: 0; background: none; padding: 6px 10px; border-radius: 6px; color: var(--suave); cursor: pointer; font-weight: 600; }
#abas button.ativa { background: var(--coluna); color: var(--texto); }
#quem { color: var(--suave); }
button, .botao { font: inherit; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto); cursor: pointer; text-decoration: none; display: inline-block; }
button[type=submit], .botao { background: var(--destaque); border-color: var(--destaque); color: #fff; }
button.perigo { color: var(--perigo); border-color: var(--perigo); }
main { padding: 12px; }
.acoes { margin-bottom: 8px; }
.quadro { display: flex; gap: 10px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
.coluna { background: var(--coluna); border-radius: 8px; flex: 0 0 220px; width: 220px; padding: 8px; }
.coluna header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.coluna h2 { font-size: 13px; margin: 0; }
.resumo { color: var(--suave); font-size: 12px; white-space: nowrap; }
ul.cards { list-style: none; margin: 0; padding: 0; min-height: 40px; display: flex; flex-direction: column; gap: 6px; }
li.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 8px; cursor: grab; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
li.card span, li.card em { color: var(--suave); font-size: 12px; }
li.card .valor { color: var(--texto); }
#contexto { margin: 12px 12px 0; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#contexto h2 { font-size: 13px; margin: 0 8px 0 0; }
dialog { border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); color: var(--texto); width: min(480px, 92vw); }
dialog form { display: flex; flex-direction: column; gap: 10px; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
label.linha { flex-direction: row; align-items: center; font-weight: normal; }
input, select, textarea { font: inherit; font-weight: normal; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; background: var(--fundo); color: var(--texto); }
.botoes { display: flex; justify-content: flex-end; gap: 8px; }
.erro { color: var(--perigo); margin: 0; min-height: 1em; }
form.login { max-width: 340px; margin: 10vh auto; display: flex; flex-direction: column; gap: 12px; background: var(--superficie); padding: 24px; border-radius: 10px; border: 1px solid var(--borda); }
#aviso { position: fixed; bottom: 16px; right: 16px; background: var(--texto); color: var(--fundo); padding: 10px 14px; border-radius: 8px; }
#aviso.erro { background: var(--perigo); color: #fff; }
table.origem { border-collapse: collapse; margin-top: 16px; }
table.origem th, table.origem td { border: 1px solid var(--borda); padding: 4px 8px; text-align: right; }
table.origem th:first-child { text-align: left; }
svg.grafico { width: 100%; max-width: 640px; }
svg.grafico rect { fill: var(--destaque); }
svg.grafico text { fill: var(--texto); font-size: 12px; }
.nota, .conversa { color: var(--suave); font-size: 13px; }