:root{
  --preto:#111111; --offwhite:#FBFBF8; --branco:#FFFFFF;
  --rosa:#FE0362; --rosa2:#F1335F; --rosa-tint:rgba(254,3,98,.08);
  --cinza:#494949; --cinza2:#7A7A7A; --cinza3:#B8B8B4; --linha:#E6E6E2; --linha2:#EFEFEB;
  --verde:#1F9D55; --ambar:#E28D13; --vermelho:#D7263D;
  --raio:8px; --sidebar:232px; --fonte:'Poppins',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--offwhite);color:var(--preto);font-family:var(--fonte);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em}
h1{font-size:24px}h2{font-size:18px}h3{font-size:14px;font-weight:600}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.muted{color:var(--cinza2)}
.small{font-size:12px}
.mono{font-variant-numeric:tabular-nums}

/* Botões e campos */
.btn{font:inherit;font-weight:500;border:1px solid var(--linha);background:var(--branco);color:var(--preto);border-radius:var(--raio);padding:9px 14px;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--cinza3)}
.btn.primary{background:var(--rosa);border-color:var(--rosa);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--rosa2);border-color:var(--rosa2)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;font-size:12px}
.btn.link{background:none;border:none;color:var(--cinza2);padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.btn.link:hover{color:var(--rosa)}
.btn.danger{color:var(--vermelho)}
.select,input[type=text],input[type=email],input[type=number],input[type=date],textarea{font:inherit;border:1px solid var(--linha);border-radius:var(--raio);background:var(--branco);padding:8px 10px;color:var(--preto);min-width:0}
.select:focus,input:focus,textarea:focus{outline:2px solid var(--rosa-tint);border-color:var(--rosa)}
label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--cinza)}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.msg{min-height:20px;color:var(--cinza);font-size:13px}
.msg.erro{color:var(--vermelho)}
.msg.ok{color:var(--verde)}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;background:var(--preto);padding:24px}
.login-card{width:min(420px,100%);background:var(--branco);border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:14px}
.login-logo{height:28px;width:auto;align-self:flex-start;filter:invert(1)}
.login h1{font-size:22px}

/* Shell */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{background:var(--preto);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:22px 20px 14px}
.brand img{height:22px;width:auto;display:block}
.sidebar nav{display:flex;flex-direction:column;padding:6px 12px;flex:1}
.nav-group{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza2);padding:16px 8px 6px;font-weight:600}
.sidebar nav a{position:relative;padding:9px 10px 9px 22px;border-radius:var(--raio);color:#DADAD6;font-weight:400}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar nav a.ativo{color:#fff;font-weight:600}
.sidebar nav a.ativo::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:9px;transform:translateY(-50%);background:var(--rosa);clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%)}
.sidebar-foot{padding:14px 20px;border-top:1px solid #2A2A2A;display:flex;justify-content:space-between;align-items:center;color:var(--cinza2);font-size:12px}
.sidebar-foot .btn.link{color:#DADAD6}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 28px;border-bottom:1px solid var(--linha);background:var(--offwhite);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.topbar-left,.topbar-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--linha);background:var(--branco);border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all .12s}
.chip:hover{border-color:var(--cinza3)}
.chip.ativo{background:var(--preto);color:#fff;border-color:var(--preto)}
.chip .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.conteudo{padding:24px 28px 48px;display:flex;flex-direction:column;gap:20px;max-width:1440px;width:100%}
.aviso{margin:14px 28px 0;padding:10px 14px;border:1px solid var(--ambar);background:#FFF7E8;border-radius:var(--raio);font-size:13px}

/* Títulos de página */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.page-head .sub{color:var(--cinza2);font-size:13px;margin-top:4px}

/* Cards */
.grid{display:grid;gap:14px}
.grid.kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.grid.canais{grid-template-columns:repeat(auto-fill,minmax(280px,360px))}
.grid.iguais{grid-template-columns:1fr 1fr}
.grid.duas{grid-template-columns:2fr 1fr}
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:16px 18px;min-width:0}
.card h3{font-size:12px;font-weight:500;color:var(--cinza);text-transform:none;letter-spacing:0}
.card .big{font-size:26px;font-weight:800;line-height:1.1;margin-top:6px;letter-spacing:-.02em}
.card .var{font-size:12px;margin-top:6px;display:flex;gap:8px;align-items:center;color:var(--cinza2)}
.up{color:var(--verde)} .down{color:var(--vermelho)} .flat{color:var(--cinza2)}
.var.inv .up{color:var(--vermelho)} .var.inv .down{color:var(--verde)}
.farol{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cinza3)}
.farol.verde{background:var(--verde)} .farol.ambar{background:var(--ambar)} .farol.vermelho{background:var(--vermelho)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.card-head h2{font-size:15px}
.empty{color:var(--cinza2);font-size:13px;padding:22px 0;text-align:center}
.empty strong{color:var(--preto);display:block;margin-bottom:4px;font-weight:600}

/* Tabelas */
.tabela{width:100%;border-collapse:collapse;font-size:13px}
.tabela th,.tabela td{padding:9px 10px;border-bottom:1px solid var(--linha2);text-align:right;white-space:nowrap}
.tabela th{font-weight:500;color:var(--cinza);font-size:12px;cursor:pointer;user-select:none}
.tabela th:first-child,.tabela td:first-child{text-align:left}
.tabela th.l,.tabela td.l{text-align:left}
.tabela tr:hover td{background:#FAFAF7}
.tabela td.nome{max-width:380px;overflow:hidden;text-overflow:ellipsis}
.tabela .tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;background:var(--linha2);color:var(--cinza)}
.tabela .tag.ok{background:#E6F4EC;color:var(--verde)} .tabela .tag.erro{background:#FBE7EA;color:var(--vermelho)} .tabela .tag.vazio{background:#FFF3DF;color:var(--ambar)}
.tabela-wrap{overflow:auto}

/* Gráfico */
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--fonte);font-size:11px;fill:var(--cinza2)}
.chart .grade{stroke:var(--linha2)}
.chart .eixo{stroke:var(--linha)}
.legenda{display:flex;gap:14px;font-size:12px;color:var(--cinza);flex-wrap:wrap;margin-top:8px}
.legenda span::before{content:"";display:inline-block;width:10px;height:3px;margin-right:6px;vertical-align:middle;background:var(--c,#111)}

/* Insights e comentários */
.lista{display:flex;flex-direction:column;gap:10px}
.item{border-left:3px solid var(--linha);padding:4px 0 4px 12px}
.item.alta{border-left-color:var(--vermelho)} .item.media{border-left-color:var(--ambar)} .item.baixa{border-left-color:var(--verde)}
.item .titulo{font-weight:600}
.item .meta{font-size:12px;color:var(--cinza2);margin-top:2px}
.comentario{border:1px solid var(--linha);border-radius:var(--raio);padding:10px 12px}
.comentario.fixado{border-color:var(--rosa);background:var(--rosa-tint)}
.comentario .quem{font-size:12px;color:var(--cinza2);display:flex;gap:8px;justify-content:space-between}
.comentario .texto{margin-top:4px;white-space:pre-wrap}
textarea{width:100%;min-height:72px;resize:vertical}

/* Formulários inline */
.form-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.form-inline .btn{height:38px}

/* Loading */
.loading{position:fixed;inset:0;background:rgba(251,251,248,.7);display:flex;gap:12px;align-items:center;justify-content:center;z-index:50;color:var(--cinza);font-size:13px}
.spinner{width:22px;height:22px;border:3px solid var(--linha);border-top-color:var(--rosa);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;align-items:center;overflow:auto}
  .sidebar nav{flex-direction:row;padding:0 8px}
  .nav-group{display:none}
  .sidebar-foot{border:none;padding:0 12px}
  .topbar,.conteudo{padding-left:16px;padding-right:16px}
  .grid.duas,.grid.iguais{grid-template-columns:1fr}
}