/* Demonstrações — mesma base do console (Linear: canvas escuro, camadas, bordas 1px, Inter, um acento só na ação). */
@import url("/site/console.css");
.demo-abas{display:flex;gap:6px;padding:10px 20px;border-bottom:1px solid var(--borda)}
.d-area{padding:20px;display:flex;flex-direction:column;gap:16px}
.d-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.d-cab h1{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0}
.d-cab .acoes{margin-left:auto;display:flex;align-items:center;gap:14px}
.limite{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--t3)}
.limite input{width:120px;accent-color:var(--acao);padding:0;border:0;background:none}
.limite b{font:12px var(--mono);color:var(--t1);font-weight:400}
.placar{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--borda);border-radius:var(--r);background:var(--s1)}
.placar:empty{display:none}
.placar div{padding:12px 16px;font-size:12px;color:var(--t3)}
.placar div+div{border-left:1px solid var(--borda)}
.placar b{display:block;font-size:20px;font-weight:600;color:var(--t1);letter-spacing:-.02em}
.quadro{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.quadro:empty{display:none}
.col{background:var(--s1);border:1px solid var(--borda);border-radius:var(--r);padding:8px;min-height:120px}
.col.humana{border-style:dashed}
.col-t{display:flex;justify-content:space-between;font-size:12px;color:var(--t2);padding:2px 4px 8px;font-weight:500}
.col-t span{font:12px var(--mono);color:var(--t4)}
.tk{background:var(--canvas);border:1px solid var(--borda);border-radius:4px;padding:8px 9px;margin-bottom:6px;animation:entra .25s ease}
@keyframes entra{from{opacity:0;transform:translateY(3px)}}
.tk-t{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:11px;color:var(--t4)}
.tk p{margin:4px 0 6px;font-size:12.5px;line-height:1.4;color:var(--t2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tk-p{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--t3)}
.para{font:10.5px var(--mono);color:#f1b8a8;border:1px solid #5c2a22;border-radius:3px;padding:0 5px}
.pri4{color:#f1b8a8}.pri3{color:var(--acao)}
.lista{border:1px solid var(--borda);border-radius:var(--r);background:var(--s1)}
.msg{display:grid;grid-template-columns:200px 1fr 160px;gap:14px;padding:9px 14px;border-bottom:1px solid var(--borda);font-size:13px;align-items:center}
.msg:last-child{border:0}
.msg b{font-weight:500;color:var(--t3);font-size:12px}
.msg span{color:var(--t2)}
.msg em{font:12px var(--mono);font-style:normal;color:var(--t4);text-align:right}
.msg.feita em{color:var(--t1)}
.msg.ativa{background:var(--s2)}
.rel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.rel textarea{min-height:150px}
.exs{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:1100px){.quadro{grid-template-columns:repeat(3,minmax(0,1fr))}.msg{grid-template-columns:1fr}.rel{grid-template-columns:1fr}.placar{grid-template-columns:repeat(2,1fr)}}