:root{
  --fundo:#f6f4ef;--fundo2:#ffffff;--texto:#1b1f23;--suave:#5f6b72;--linha:#e3e0d8;--marca:#0f5d6b;--marca2:#14808f;
  --ouro:#e2a72e;--verde:#1f8a54;--ambar:#c27a0e;--vermelho:#c0392b;--sombra:0 10px 30px rgba(20,30,40,.08);
  --raio:16px;color-scheme:light;
}
:root[data-tema="escuro"]{
  --fundo:#0e1417;--fundo2:#151d21;--texto:#e8eef0;--suave:#93a3aa;--linha:#24323a;--marca:#2fb0c0;--marca2:#5fd0dc;
  --ouro:#f1bd4d;--verde:#3fbf7f;--ambar:#e0a03a;--vermelho:#ef6b5d;--sombra:0 10px 30px rgba(0,0,0,.35);color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root[data-tema="auto"]{
  --fundo:#0e1417;--fundo2:#151d21;--texto:#e8eef0;--suave:#93a3aa;--linha:#24323a;--marca:#2fb0c0;--marca2:#5fd0dc;
  --ouro:#f1bd4d;--verde:#3fbf7f;--ambar:#e0a03a;--vermelho:#ef6b5d;--sombra:0 10px 30px rgba(0,0,0,.35);color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fundo);color:var(--texto);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--marca)}
code{font-size:.9em;background:color-mix(in srgb,var(--marca) 10%,transparent);padding:1px 5px;border-radius:5px;word-break:break-all}
.faixa-demo{background:var(--ouro);color:#1b1f23;text-align:center;font-weight:600;font-size:13px;padding:6px 12px}
.topo{display:flex;align-items:center;gap:12px;padding:14px clamp(14px,4vw,40px);position:sticky;top:0;z-index:5;
  background:color-mix(in srgb,var(--fundo) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.marca{display:flex;align-items:center;gap:8px;color:var(--marca);text-decoration:none;font-size:19px}
.marca b{font-weight:800}
.selo{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--linha);color:var(--suave)}
.topo-acoes{margin-left:auto;display:flex;gap:8px}
button{font:inherit;cursor:pointer}
.bt,.bt-sec,.bt-pausa,.bt-icone{border-radius:10px;padding:9px 16px;border:1px solid transparent;font-weight:600;transition:transform .12s,box-shadow .12s,background .2s}
.bt{background:var(--marca);color:#fff}
:root[data-tema="escuro"] .bt{color:#06252b}
.bt:hover,.bt-sec:hover,.bt-pausa:hover{transform:translateY(-1px);box-shadow:var(--sombra)}
.bt:active{transform:translateY(1px)}
.bt[disabled]{opacity:.55;cursor:wait}
.bt-sec{background:var(--fundo2);color:var(--texto);border-color:var(--linha)}
.bt-icone{background:var(--fundo2);border-color:var(--linha);color:var(--texto);padding:8px 12px}
.bt-pausa{background:var(--fundo2);border-color:var(--ambar);color:var(--ambar)}
.bt-pausa[aria-pressed="true"]{background:var(--ambar);color:#fff}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}

.heroi{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(18px,4vw,48px) clamp(14px,4vw,40px) 10px}
.heroi h1{font-size:clamp(26px,3.6vw,44px);line-height:1.12;margin:0 0 12px;letter-spacing:-.02em}
.heroi h1 em{font-style:normal;background:linear-gradient(90deg,var(--marca),var(--ouro));-webkit-background-clip:text;background-clip:text;color:transparent}
.heroi p{color:var(--suave);max-width:58ch;margin:0 0 18px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:var(--fundo2);border:1px solid var(--linha);border-radius:var(--raio);padding:12px;box-shadow:var(--sombra)}
.kpi-n{display:block;font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;transition:color .3s}
.kpi-l{font-size:12px;color:var(--suave)}
.kpi.alerta .kpi-n{color:var(--vermelho)} .kpi.bom .kpi-n{color:var(--verde)}
.kpi.pulso{animation:pulso .6s ease}
@keyframes pulso{50%{transform:scale(1.06)}}
.heroi-3d{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 10%,color-mix(in srgb,var(--marca) 22%,var(--fundo2)),var(--fundo2));border:1px solid var(--linha);box-shadow:var(--sombra)}
#tela{width:100%;height:100%;display:block}
.cena-legenda{position:absolute;left:12px;right:12px;bottom:10px;font-size:13px;color:var(--suave);background:color-mix(in srgb,var(--fundo2) 80%,transparent);
  backdrop-filter:blur(6px);border-radius:10px;padding:6px 10px}

.abas{display:flex;gap:6px;padding:14px clamp(14px,4vw,40px) 0;overflow-x:auto;scrollbar-width:none}
.abas button{background:none;border:1px solid var(--linha);border-radius:999px;padding:8px 16px;color:var(--suave);white-space:nowrap;font-weight:600}
.abas button[aria-selected="true"]{background:var(--texto);color:var(--fundo);border-color:var(--texto)}
main{padding:14px clamp(14px,4vw,40px) 40px}
.painel{animation:entra .25s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}}
.cartao{background:var(--fundo2);border:1px solid var(--linha);border-radius:var(--raio);padding:18px;box-shadow:var(--sombra);margin-bottom:14px}
.cartao h2{margin:0 0 4px;font-size:19px}
.sub{color:var(--suave);margin:0 0 12px;font-size:14px}
.duas{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:14px;align-items:start}
.lista-conversas{display:flex;flex-direction:column;gap:8px;max-height:72vh;overflow:auto;padding-right:2px}
.item-conversa{text-align:left;background:var(--fundo2);border:1px solid var(--linha);border-left:5px solid var(--linha);border-radius:12px;padding:10px 12px;color:var(--texto);transition:transform .12s}
.item-conversa:hover{transform:translateX(2px)}
.item-conversa[aria-current="true"]{outline:2px solid var(--marca)}
.item-conversa.atrasada{border-left-color:var(--vermelho)} .item-conversa.urgente{border-left-color:var(--ambar)}
.item-conversa.ok{border-left-color:var(--verde)} .item-conversa.respondida{opacity:.65}
.ic-topo{display:flex;justify-content:space-between;gap:8px;font-weight:700}
.ic-txt{color:var(--suave);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chip{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;margin:4px 4px 0 0;background:color-mix(in srgb,var(--marca) 12%,transparent);color:var(--marca)}
.chip.vermelho{background:color-mix(in srgb,var(--vermelho) 14%,transparent);color:var(--vermelho)}
.chip.ambar{background:color-mix(in srgb,var(--ambar) 16%,transparent);color:var(--ambar)}
.chip.verde{background:color-mix(in srgb,var(--verde) 14%,transparent);color:var(--verde)}
.conversa{background:var(--fundo2);border:1px solid var(--linha);border-radius:var(--raio);padding:18px;box-shadow:var(--sombra);min-height:360px}
.vazio{color:var(--suave)}
.msgs{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.msg{max-width:85%;padding:9px 12px;border-radius:14px;background:color-mix(in srgb,var(--texto) 6%,transparent);white-space:pre-wrap}
.msg.SHOP{align-self:flex-end;background:color-mix(in srgb,var(--marca) 16%,transparent)}
.msg small{display:block;color:var(--suave);font-size:11px;margin-bottom:2px}
.envio{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;background:color-mix(in srgb,var(--ouro) 12%,transparent);border-radius:12px;padding:10px 12px}
.envio b{font-weight:700}
textarea{width:100%;min-height:190px;border-radius:12px;border:1px solid var(--linha);background:var(--fundo);color:var(--texto);padding:12px;font:inherit;resize:vertical}
.avisos{margin:8px 0;padding:0;list-style:none}
.avisos li{font-size:13px;color:var(--ambar);margin:3px 0}
.avisos li.humano{color:var(--vermelho);font-weight:700}
.linha-form{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.linha-form label{display:flex;flex-direction:column;font-size:13px;color:var(--suave);gap:4px}
.linha-form label.caixa{flex-direction:row;align-items:center;gap:6px}
input,select{border-radius:10px;border:1px solid var(--linha);background:var(--fundo);color:var(--texto);padding:8px 10px;font:inherit}
input[type="number"]{width:110px}
.tabela-scroll{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tabela th{text-align:left;font-size:12px;color:var(--suave);font-weight:600;padding:8px;border-bottom:1px solid var(--linha);white-space:nowrap}
.tabela td{padding:9px 8px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tr{transition:background .3s}
.tabela tr.selecionada{background:color-mix(in srgb,var(--marca) 9%,transparent)}
.tabela tr.mudou{animation:brilho 1.2s ease}
@keyframes brilho{0%{background:color-mix(in srgb,var(--ouro) 35%,transparent)}}
.tabela input{width:86px;padding:5px 7px}
.coroa{font-size:18px}
.decisao{font-size:12px;color:var(--suave);max-width:280px}
.barra-repricing{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.barra-repricing .linha-form{grid-column:1/-1}
.acoes-repricing{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.registo{list-style:none;margin:0;padding:0}
.registo li{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--linha);font-size:14px}
.registo time{color:var(--suave);font-size:12px}
.preco-sobe{color:var(--verde);font-weight:700}.preco-desce{color:var(--vermelho);font-weight:700}
.rodape{padding:20px clamp(14px,4vw,40px) 40px;color:var(--suave);font-size:13px;border-top:1px solid var(--linha)}
.aviso-flutuante{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--texto);color:var(--fundo);padding:10px 16px;border-radius:12px;
  box-shadow:var(--sombra);z-index:20;max-width:min(92vw,520px);font-weight:600}
.aviso-flutuante.erro{background:var(--vermelho);color:#fff}

@media (max-width:980px){
  .heroi{grid-template-columns:1fr}.heroi-3d{aspect-ratio:16/10}
  .duas{grid-template-columns:1fr}.lista-conversas{max-height:none}
  .barra-repricing{grid-template-columns:1fr}.acoes-repricing{justify-content:flex-start}
}
@media (max-width:560px){
  .kpis{grid-template-columns:repeat(2,1fr)}.selo{display:none}
  .marca{font-size:17px}.marca span{white-space:nowrap}.topo{gap:8px}.topo-acoes .bt-sec{padding:7px 10px;font-size:13px}
  .registo li{grid-template-columns:1fr}
  .tabela th:nth-child(4),.tabela td:nth-child(4){display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}