[hidden] { display: none !important; }
:root {
  --fundo: #f6f5f2; --cartao: #ffffff; --texto: #1d1d1f; --sutil: #6b6b70; --borda: #e2e0da;
  --acento: #3b5bdb; --acento-texto: #ffffff; --ok: #2b8a3e; --erro: #c92a2a; --aviso: #e67700; --teste: #7048e8;
  --ig: #c13584; --fb: #1877f2; --yt: #e03131; --tt: #111111;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #17171a; --cartao: #222226; --texto: #ececef; --sutil: #9c9ca4; --borda: #35353b;
    --acento: #748ffc; --acento-texto: #111; --tt: #d0d0d0; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fundo); color: var(--texto); }
.topo { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--cartao); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.marca { font-weight: 700; font-size: 17px; }
nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav a { padding: 6px 10px; border-radius: 6px; color: var(--sutil); text-decoration: none; }
nav a.ativa { background: var(--fundo); color: var(--texto); font-weight: 600; }
main { padding: 20px; max-width: 1200px; margin: 0 auto; }
h2 { margin: 0; font-size: 20px; } h3 { margin: 28px 0 10px; font-size: 15px; }
button, .botao { font: inherit; padding: 7px 14px; border-radius: 7px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .botao:hover { border-color: var(--sutil); }
.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.perigo { color: var(--erro); }
.faixa { background: var(--teste); color: #fff; padding: 7px 20px; font-size: 14px; }
.faixa a { color: #fff; }
.barra { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.barra h2 { min-width: 180px; }
.sutil { color: var(--sutil); font-size: 13px; }
.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-semana span { font-size: 12px; color: var(--sutil); padding: 4px; }
.dia { background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; min-height: 108px; padding: 4px; cursor: pointer; overflow: hidden; }
.dia.fora { opacity: .45; } .dia.hoje { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.dia .num { font-size: 12px; color: var(--sutil); padding: 2px 4px; }
.chip { display: flex; gap: 4px; align-items: center; font-size: 12px; padding: 2px 5px; margin-top: 2px; border-radius: 5px; background: var(--fundo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--acento); }
.chip.publicado { border-left-color: var(--ok); } .chip.erro, .chip.parcial { border-left-color: var(--erro); }
.chip.simulado { border-left-color: var(--teste); } .chip.rascunho { border-left-color: var(--sutil); opacity: .75; }
.ponto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.p-instagram { background: var(--ig); } .p-facebook { background: var(--fb); } .p-youtube { background: var(--yt); } .p-tiktok { background: var(--tt); }
.lista { display: grid; gap: 8px; }
.item { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: start; }
.item .quando { font-weight: 600; } .item .leg { white-space: pre-wrap; max-height: 3.2em; overflow: hidden; color: var(--sutil); font-size: 14px; }
.item .res { font-size: 13px; margin-top: 4px; } .item .res a { color: var(--acento); }
.st { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--fundo); border: 1px solid var(--borda); }
.st.publicado { color: var(--ok); } .st.erro, .st.parcial { color: var(--erro); } .st.simulado { color: var(--teste); }
.item .botoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; }
.cartao .rot { font-size: 12px; color: var(--sutil); } .cartao .val { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.grafico { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; min-height: 60px; }
.grafico svg { width: 100%; height: 180px; display: block; }
.legenda-graf { display: flex; gap: 14px; font-size: 13px; color: var(--sutil); margin-top: 6px; }
.legenda-graf span { display: inline-flex; align-items: center; gap: 5px; }
.tabela-wrap { overflow-x: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--borda); }
th { font-size: 12px; color: var(--sutil); font-weight: 600; }
td.n { text-align: right; font-variant-numeric: tabular-nums; } td a { color: var(--acento); }
.vazio { padding: 16px; color: var(--sutil); }
.config fieldset, dialog fieldset { border: 1px solid var(--borda); border-radius: 10px; margin: 0 0 14px; padding: 12px 14px; background: var(--cartao); }
legend { font-weight: 600; padding: 0 4px; }
label { display: block; margin: 8px 0; font-size: 14px; }
label.linha { display: flex; gap: 8px; align-items: center; }
input:not([type=checkbox]), select, textarea { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 7px; background: var(--fundo); color: var(--texto); }
.selo { font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 99px; background: var(--fundo); }
.selo.ok { color: var(--ok); }
.aviso { padding: 10px 14px; border-radius: 8px; margin: 10px 0; background: var(--cartao); border: 1px solid var(--aviso); }
dialog { border: 1px solid var(--borda); border-radius: 12px; padding: 20px; width: min(640px, 94vw); background: var(--cartao); color: var(--texto); }
dialog::backdrop { background: rgba(0,0,0,.35); }
.col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.redes { display: flex; gap: 16px; flex-wrap: wrap; } .redes label { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.acoes { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .espaco { flex: 1; }
.erro { color: var(--erro); font-size: 14px; }
code { font-size: 12px; background: var(--fundo); padding: 1px 4px; border-radius: 4px; word-break: break-all; }
@media (max-width: 720px) {
  main { padding: 12px 16px; }
  .dia { min-height: 64px; } .chip span.txt { display: none; }
  .item { grid-template-columns: 1fr; } .item .botoes { justify-content: flex-start; }
  .col2 { grid-template-columns: 1fr; }
}
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--texto); color: var(--fundo); padding: 12px 18px; border-radius: 10px; max-width: 90vw; z-index: 20; box-shadow: 0 4px 16px rgba(0,0,0,.2); }