*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:var(--t-base)}
h1{font:var(--t-xl);margin:0 0 var(--s-2)}
h2{font:var(--t-lg);margin:var(--s-7) 0 var(--s-4)}
h3{font:var(--t-lg);margin:var(--s-2) 0}
.muted{color:var(--c-text-muted)} .xs{font:var(--t-xs)} .sm{font:var(--t-sm)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.app{display:grid;grid-template-columns:var(--l-sidebar) 1fr;min-height:100vh}
.lateral{background:var(--c-surface);border-right:1px solid var(--c-border);padding:var(--s-5) var(--s-3);display:flex;flex-direction:column;gap:2px}
.lateral .marca{font:800 20px/28px var(--font-sans);padding:0 var(--s-3) var(--s-5)} .lateral .marca span{color:var(--c-accent)}
.lateral a{color:var(--c-text-muted);text-decoration:none;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);border-left:3px solid transparent}
.lateral a:hover{background:var(--c-surface-2);color:var(--c-text)}
.lateral a[aria-current]{color:var(--c-text);border-left-color:var(--c-accent);background:var(--c-surface-2)}
.conteudo{padding:var(--s-6) var(--s-6) var(--s-8);max-width:var(--l-conteudo-max);width:100%}
.linha{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.btn{font:600 14px/20px var(--font-sans);height:40px;padding:0 var(--s-4);border-radius:var(--r-md);border:1px solid transparent;background:var(--c-accent);color:var(--c-on-accent);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-2);transition:filter var(--m-fast) var(--m-ease)}
.btn:hover{filter:brightness(1.08)} .btn:active{filter:brightness(.95)}
.btn.sec{background:var(--c-surface-2);color:var(--c-text);border-color:var(--c-border)}
.btn.fantasma{background:transparent;color:var(--c-text)}
.btn.perigo{background:transparent;color:var(--c-danger);border-color:var(--c-danger)}
.btn.sm{height:32px;padding:0 var(--s-3)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:g .7s linear infinite}
@keyframes g{to{transform:rotate(1turn)}}
.grade-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-4)}
.kpi{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-1);box-shadow:var(--sh-card)}
.kpi .rot{font:500 12px/16px var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--c-text-muted)}
.kpi b{font:var(--t-xl)} .kpi i{font:var(--t-sm);font-style:normal}
.sobe{color:var(--c-success)} .desce{color:var(--c-danger)}
.periodo{display:inline-flex;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-pill);padding:3px}
.periodo button{background:none;border:0;color:var(--c-text-muted);font:var(--t-sm);padding:6px 14px;border-radius:var(--r-pill);cursor:pointer}
.periodo button[aria-pressed=true]{background:var(--c-surface-2);color:var(--c-text)}
.funil{display:grid;gap:var(--s-2)}
.funil div{display:grid;grid-template-columns:1fr auto 110px;gap:var(--s-4);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--s-3) var(--s-4)}
.funil b{font:600 16px/24px var(--font-mono)} .funil em{font-style:normal;color:var(--c-text-muted);text-align:right}
.funil .gargalo{border-color:var(--c-warning)} .funil .gargalo em{color:var(--c-warning)}
.tabela{width:100%;border-collapse:collapse;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.tabela th{font:500 12px/16px var(--font-mono);text-transform:uppercase;color:var(--c-text-muted);text-align:right;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-border)}
.tabela td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-border);text-align:right;font-family:var(--font-mono)}
.tabela th:first-child,.tabela td:first-child{text-align:left;font-family:var(--font-sans)}
.tabela tbody tr:hover{background:var(--c-surface-2);cursor:pointer}
.selo{font:500 12px/16px var(--font-mono);padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--c-border);color:var(--c-text-muted)}
.selo.ok{color:var(--c-success);border-color:currentColor} .selo.av{color:var(--c-warning);border-color:currentColor}
.selo.er{color:var(--c-danger);border-color:currentColor} .selo.nf{color:var(--c-info);border-color:currentColor} .selo.ac{color:var(--c-accent);border-color:currentColor}
.form{display:grid;gap:var(--s-4);max-width:520px}
.form label{display:grid;gap:var(--s-1);font:var(--t-sm);color:var(--c-text-muted)}
.campo{font:var(--t-base);color:var(--c-text);background:var(--c-bg);border:1px solid var(--c-border-input);border-radius:var(--r-md);padding:10px 12px}
.campo:focus{outline:2px solid var(--c-accent);outline-offset:1px;border-color:var(--c-accent)}
.campo.erro{border-color:var(--c-danger)} .msg-erro{color:var(--c-danger);font:var(--t-xs)}
.copiar{display:flex;gap:var(--s-3);align-items:center;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);max-width:520px}
.copiar code{font:500 14px/20px var(--font-mono);flex:1;overflow:hidden;text-overflow:ellipsis}
.previa-dm{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-4);max-width:320px;display:grid;gap:var(--s-2)}
.previa-dm .balao{background:var(--c-surface-2);border-radius:18px 18px 18px 4px;padding:10px 14px}
.previa-dm .botao-dm{border:1px solid var(--c-border-input);border-radius:var(--r-md);text-align:center;padding:10px;color:var(--c-text);font-weight:600}
.card-conteudo{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-4);max-width:360px}
.card-conteudo.precisa{border-color:var(--c-accent)}
.card-conteudo header{display:flex;justify-content:space-between;align-items:center}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .lateral{position:fixed;bottom:0;left:0;right:0;flex-direction:row;overflow-x:auto;padding:var(--s-2);border-right:0;border-top:1px solid var(--c-border);z-index:5}
  .lateral .marca{display:none} .lateral a{border-left:0;white-space:nowrap}
  .conteudo{padding:var(--s-4) 16px 96px}
}