:root {
  --fundo: #f4f3ef; --painel: #ffffff; --borda: #e2e0d8; --texto: #1d1c19; --fraco: #6d6a61;
  --destaque: #1f5fd1; --alerta: #b45309; --alerta-fundo: #fff4e0; --feito: #2f7d4f; --perigo: #b3261e;
  --sombra: 0 1px 2px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #151513; --painel: #1f1f1c; --borda: #33322d; --texto: #ecebe6; --fraco: #9a978c;
    --destaque: #7aa7ff; --alerta: #f0b35a; --alerta-fundo: #33270f; --feito: #6fcf97; --perigo: #ff8a80;
    --sombra: none;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
header h1 { font-size: 16px; margin: 0; font-weight: 650; }
.gasto { color: var(--fraco); font-variant-numeric: tabular-nums; }
.gasto.cheio { color: var(--alerta); font-weight: 600; }
.equipe { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
button { font: inherit; border: 1px solid var(--borda); background: var(--painel); color: var(--texto); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
button.principal { background: var(--destaque); border-color: var(--destaque); color: #fff; }
@media (prefers-color-scheme: dark) { button.principal { color: #10131a; } }
button.perigo { color: var(--perigo); }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible, .cartao:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
main { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 14px; padding: 16px 20px 32px; overflow-x: auto; }
.coluna h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); margin: 0 0 10px; font-weight: 650; }
.coluna h2 span { font-weight: 400; }
.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--sombra); }
.cartao.dono { border-color: var(--alerta); background: var(--alerta-fundo); }
.cartao .titulo { font-weight: 550; overflow-wrap: anywhere; }
.cartao .num { color: var(--fraco); font-variant-numeric: tabular-nums; }
.meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; align-items: center; color: var(--fraco); font-size: 12px; }
.selo { border: 1px solid var(--borda); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--texto); white-space: nowrap; }
.selo.alerta { border-color: var(--alerta); color: var(--alerta); }
.selo.alta { border-color: var(--perigo); color: var(--perigo); }
.vazio { color: var(--fraco); font-size: 13px; padding: 6px 2px; }
dialog { border: 1px solid var(--borda); border-radius: 12px; background: var(--painel); color: var(--texto); width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; }
dialog::backdrop { background: rgba(0,0,0,.45); }
.caixa { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.caixa h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.caixa h4 { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); }
.bloco { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: inherit; }
.resultado { background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 12px; }
.fala { border-left: 2px solid var(--borda); padding-left: 10px; margin: 6px 0; }
.fala b { font-weight: 600; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fraco); }
input, textarea, select { font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: 7px; padding: 8px 10px; width: 100%; }
textarea { min-height: 90px; resize: vertical; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; }
.linha > label { flex: 1; min-width: 160px; }
.acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.erro { color: var(--perigo); min-height: 1.2em; }
.ligar { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 16px 20px 0; padding: 16px 20px; background: var(--painel); border: 1px solid var(--alerta); border-radius: 12px; }
.ligar img { width: 240px; height: 240px; border-radius: 8px; background: #fff; }
.ligar ol { margin: 8px 0 0; padding-left: 20px; }
.ligar h2 { margin: 0; font-size: 16px; }
.selo.ok { border-color: var(--feito); color: var(--feito); }
@media (max-width: 720px) { main { grid-template-columns: repeat(4, 82vw); } }

/* Navegação entre as telas */
nav { display: flex; gap: 4px; }
nav a { color: var(--fraco); text-decoration: none; padding: 5px 10px; border-radius: 7px; font-weight: 550; }
nav a[aria-current="page"] { color: var(--texto); background: var(--painel); border: 1px solid var(--borda); }
nav a:focus-visible, a:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.sair { background: none; border: none; color: var(--fraco); padding: 5px 6px; }

/* Tela de Memória */
.memoria { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: calc(100vh - 58px); }
.lateral { border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-height: 0; }
.lateral .topo { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--borda); }
.lista { overflow-y: auto; padding: 8px; flex: 1; }
.lista h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); margin: 12px 6px 4px; font-weight: 650; }
.lista button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 5px 8px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista button:hover, .lista button.atual { background: var(--painel); }
.lista button.fantasma { color: var(--fraco); font-style: italic; }
.palco { overflow-y: auto; min-width: 0; position: relative; }
.nota { max-width: 760px; margin: 0 auto; padding: 28px 28px 60px; }
.nota h1 { font-size: 26px; margin: 0 0 6px; overflow-wrap: anywhere; }
.nota .corpo { font-size: 15px; line-height: 1.6; margin-top: 18px; overflow-wrap: anywhere; }
.nota .corpo h2 { font-size: 19px; margin: 24px 0 6px; } .nota .corpo h3 { font-size: 16px; margin: 20px 0 4px; } .nota .corpo h4 { font-size: 14px; margin: 16px 0 4px; }
.nota .corpo p { margin: 8px 0; } .nota .corpo ul, .nota .corpo ol { margin: 8px 0; padding-left: 22px; }
.nota .corpo code { background: var(--painel); border: 1px solid var(--borda); border-radius: 4px; padding: 0 4px; font-size: 13px; }
.nota .corpo pre { background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; padding: 12px; overflow-x: auto; }
.nota .corpo pre code { border: none; padding: 0; }
.nota .corpo blockquote { border-left: 3px solid var(--borda); margin: 8px 0; padding-left: 12px; color: var(--fraco); }
a.liga { color: var(--destaque); text-decoration: none; cursor: pointer; } a.liga:hover { text-decoration: underline; }
a.liga.fantasma { color: var(--fraco); border-bottom: 1px dashed var(--fraco); }
.rodape { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 6px; color: var(--fraco); font-size: 13px; }
.rodape .selo { cursor: pointer; }
.editor { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.editor textarea { min-height: 46vh; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
#grafo { display: block; width: 100%; height: 100%; cursor: grab; }
.legenda { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--fraco); pointer-events: none; }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.versao { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
@media (max-width: 760px) { .memoria { grid-template-columns: 1fr; height: auto; } .lateral { border-right: none; border-bottom: 1px solid var(--borda); max-height: 42vh; } .palco { min-height: 60vh; } .nota { padding: 20px 16px 48px; } }

/* Tela de entrada */
.entrada { max-width: 340px; margin: 14vh auto 0; padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.entrada h1 { font-size: 20px; margin: 0; }

/* Tela Sistema */
.sistema { max-width: 1040px; margin: 0 auto; padding: 18px 20px 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.cartela { background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.cartela.larga { grid-column: 1 / -1; }
.cartela h2 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); font-weight: 650; }
.numero { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.numero small { font-size: 13px; font-weight: 400; color: var(--fraco); }
.barra { height: 8px; border-radius: 99px; background: var(--fundo); border: 1px solid var(--borda); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--feito); border-radius: 99px; }
.barra.atencao i { background: var(--alerta); } .barra.critico i { background: var(--perigo); }
.detalhe { color: var(--fraco); font-size: 13px; }
.aviso { border-left: 3px solid var(--alerta); padding: 6px 0 6px 12px; } .aviso.critico { border-color: var(--perigo); }
.tudo-bem { color: var(--feito); font-weight: 550; }
table.dados { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.dados td { padding: 5px 0; border-bottom: 1px solid var(--borda); } table.dados td:last-child { text-align: right; color: var(--fraco); }
table.dados tr:last-child td { border-bottom: none; } table.dados.total tr:last-child td { font-weight: 600; color: var(--texto); }
.tendencia svg { width: 100%; height: 54px; display: block; }
.tendencia path { fill: none; stroke: var(--destaque); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tendencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* Tela Arquivos */
.arquivos { max-width: 1040px; margin: 0 auto; padding: 18px 20px 48px; display: flex; flex-direction: column; gap: 12px; }
.arquivos .filtro { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.arquivos .filtro input { max-width: 340px; }
.arquivo { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; }
.arquivo .nome { font-weight: 600; overflow-wrap: anywhere; }
.arquivo .descricao { color: var(--fraco); font-size: 13px; overflow-wrap: anywhere; }
.arquivo .acoes a { color: var(--destaque); text-decoration: none; border: 1px solid var(--borda); border-radius: 7px; padding: 6px 12px; }