/* Layout: o mapa preenche o palco e os painéis flutuam sobre ele. Portfólio em grade; no cérebro, trilho à esquerda e painéis que abrem espaço para o mapa. */
:root {
  color-scheme: dark;
  --bg: #080d1d; --palco: #0b1228; --sup: #121b38; --sup2: #1a2548; --linha: #2b3963; --fg: #eef2ff; --muted: #a9b5d4; --fraco: #8795b8;
  --acc: #f5b14c; --on-acc: #231503; --gelo: #7fd6e8; --alerta: #ff8f7d; --ok: #7fe0c8; --aresta: #4a5b8c;
  --d-ident: #f5b14c; --d-mem: #7fe0c8; --d-pres: #7fb6ff; --d-conv: #e7a6ff; --d-radar: #ff8f7d; --d-ref: #c9d36b; --d-prod: #b7c4ea;
  --display: "Sora", "Trebuchet MS", sans-serif; --body: "Manrope", "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --esq: 0px; --dir: 0px; --base: 0px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 14.5px/1.5 var(--body); overflow: hidden; }
#app { height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
h1, h2, h3, p, ul, blockquote { margin: 0; }
h1 { font: 700 clamp(24px, 3vw, 34px)/1.15 var(--display); letter-spacing: -.01em; text-wrap: balance; }
h2 { font: 600 17px/1.3 var(--display); text-wrap: balance; }
h3 { font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
ul { list-style: none; padding: 0; }
.muted { color: var(--muted); } .peq { font-size: 13px; } .cod { font: 500 11.5px/1.4 var(--mono); color: var(--muted); }
.linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .entre { justify-content: space-between; }
.pilha { display: grid; gap: 8px; min-width: 0; }
.tag, .selo { display: inline-block; font: 500 11px/1.4 var(--mono); padding: 1px 7px; border: 1px solid currentColor; border-radius: 5px; white-space: nowrap; }
.t-conf { color: var(--ok); } .t-hip { color: var(--acc); } .t-nao { color: var(--alerta); } .t-pend { color: var(--fraco); } .t-info { color: var(--gelo); } .t-sig { color: var(--d-conv); }
.selo.fic { color: var(--acc); } .selo.sim { color: var(--gelo); } .selo.prev { color: var(--fraco); }
.btn { border: 1px solid var(--linha); background: var(--sup2); border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: 13px; }
.btn:hover { border-color: var(--fraco); }
.btn.forte { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.link { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; font-size: 13px; }
.chip { font: 500 11.5px/1.4 var(--mono); padding: 1px 7px; border-radius: 5px; background: var(--sup2); color: var(--fg); white-space: nowrap; }
.chip.sem { color: var(--fraco); }
.fio { display: inline-flex; gap: 2px; } .fio i { width: 8px; height: 8px; border-radius: 2px; background: var(--sup2); border: 1px solid var(--linha); }
.fio i.o { background: var(--ok); border-color: var(--ok); } .fio i.i { background: none; border: 1px dashed var(--acc); } .fio i.x { background: var(--alerta); border-color: var(--alerta); }

/* Portfólio */
.port { height: 100%; overflow: auto; padding-block: 22px 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.port-int { max-width: 1320px; margin-inline: auto; display: grid; gap: 20px; }
.port-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: end; }
.port-cab > div { display: grid; gap: 6px; min-width: 0; }
.marca { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.cerebros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cerebro { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 14px; background: var(--sup); overflow: hidden; min-width: 0; transition: border-color .2s, transform .2s; }
.cerebro:hover { border-color: var(--acc); transform: translateY(-2px); }
.cerebro svg { display: block; width: 100%; aspect-ratio: 14 / 10; background: radial-gradient(60% 70% at 50% 48%, #18244c 0%, var(--palco) 75%); }
.cerebro line { stroke: var(--aresta); stroke-width: 2; opacity: .6; }
.cerebro .aviso-no { fill: none; stroke: var(--alerta); stroke-width: 4; }
.cerebro-txt { padding: 12px 14px 14px; display: grid; gap: 8px; }
.cerebro-txt b { font: 600 16px/1.25 var(--display); }
.cerebro-txt .obj { font-size: 13px; color: var(--muted); min-height: 3em; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.numeros span { display: grid; font-size: 12px; color: var(--muted); }
.numeros b { font: 600 18px/1.2 var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.numeros .quente b { color: var(--alerta); }

/* Cérebro */
.app { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.barra { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--on-acc); font: 700 13px var(--display); }
.quem { display: grid; min-width: 0; flex: 1 1 240px; } .quem b { font: 600 16px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quem span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca { position: relative; flex: 0 1 240px; min-width: 120px; }
.busca input { width: 100%; background: var(--sup); border: 1px solid var(--linha); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; }
.achados { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; background: var(--sup2); border: 1px solid var(--linha); border-radius: 8px; padding: 4px; display: grid; }
.achados button { padding: 5px 8px; border-radius: 5px; font-size: 13px; } .achados button:hover { background: var(--linha); }
.saude { display: grid; gap: 2px; flex: none; font-size: 12px; color: var(--muted); }
.area { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; min-height: 0; }
.trilho { display: flex; flex-direction: column; gap: 4px; }
.trilho button { display: grid; justify-items: center; gap: 3px; padding: 8px 2px; border-radius: 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; }
.trilho button:hover { background: var(--sup); color: var(--fg); }
.trilho button[aria-current="true"] { background: var(--sup2); color: var(--acc); }
.trilho svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trilho .chat { margin-top: auto; color: var(--acc); }
.palco { position: relative; overflow: hidden; min-width: 0; border: 1px solid var(--linha); border-radius: 14px; background: radial-gradient(55% 65% at 50% 46%, #141f46 0%, var(--palco) 72%); }
#mapa { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; cursor: grab; }
#mapa:active { cursor: grabbing; }

.aresta { fill: none; stroke: var(--aresta); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; transition: opacity .25s; }
.a-inferida { stroke-dasharray: 4 4; }
.a-sugerida { stroke: var(--gelo); stroke-dasharray: 1.5 5; stroke-linecap: round; opacity: .9; }
.a-contradiz { stroke: var(--alerta); opacity: .95; }
.aresta.viz { stroke: var(--acc); opacity: .95; stroke-width: 1.6; }
.aresta.rastro { stroke: var(--acc); opacity: 1; stroke-width: 2.4; stroke-dasharray: 7 7; }
.no { cursor: pointer; transition: opacity .25s; outline: none; }
.no:focus-visible .forma { stroke: var(--fg); stroke-width: 3; }
.alvo { fill: transparent; }
.no .forma { fill: color-mix(in srgb, var(--d) 20%, var(--palco)); stroke: var(--d); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.no.e-v .forma { fill: var(--d); stroke-width: 2.4; }
.no.e-r .forma { stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.no.e-h .forma { stroke-dasharray: 5 3; }
.no.e-g .forma { fill: none; stroke: var(--alerta); stroke-dasharray: 3 3; }
.no.e-x .forma { fill: none; stroke: var(--fraco); stroke-width: 1.2; }
.halo-no { fill: url(#brilho); pointer-events: none; }
.pulso { fill: none; stroke: var(--d); opacity: 0; vector-effect: non-scaling-stroke; }
.no text { fill: var(--fg); font: 500 var(--fs, 12px)/1.15 var(--body); text-anchor: middle; paint-order: stroke; stroke: var(--palco); stroke-width: calc(var(--fs, 12px) / 3.2); stroke-linejoin: round; pointer-events: none; opacity: 0; transition: opacity .2s; }
.no text.ini { opacity: 1; fill: var(--on-acc); stroke: none; font: 700 calc(var(--fs, 12px) * 1.15) var(--display); }
.no.e-g text.ini { fill: var(--alerta); }
#mapa.z1 .n1 text, #mapa.z2 .n1 text, #mapa.z2 .n2 text, #mapa.z3 .no text { opacity: 1; }
#mapa.z2 .n3 { opacity: .6; }
#mapa.z1 .n2 { opacity: .55; }
#mapa.z1 .n3:not(.viz):not(.ativo):not(.rastro) { opacity: 0; pointer-events: none; }
#mapa.compacto .no:not(.n1):not(.ativo) text:not(.ini) { opacity: 0; }
#mapa[data-lente="certeza"]:not(.z3) .no:not(.n1) .rot, #mapa[data-lente="tempo"]:not(.z3) .no .rot { opacity: 0; }
#mapa[data-lente="certeza"] .aresta:not(.viz):not(.rastro) { opacity: .26; }
#mapa[data-lente="tempo"] .aresta:not(.viz):not(.rastro) { opacity: .16; }
#mapa .no.ativo text, #mapa .no.viz text, #mapa .no.rastro text, #mapa .no.achado text { opacity: 1; }
#mapa .no.viz, #mapa .no.ativo, #mapa .no.rastro { opacity: 1; }
.no.ativo .forma, .no.rastro .forma { stroke: var(--acc); stroke-width: 3; }
#mapa.realce .no:not(.viz):not(.ativo):not(.rastro) { opacity: .12; }
#mapa.realce .aresta:not(.viz):not(.rastro) { opacity: .05; }
.oculto { display: none; }
.contorno { fill: none; stroke: var(--aresta); opacity: .32; vector-effect: non-scaling-stroke; pointer-events: none; }
.regiao { fill: var(--muted); font: 500 calc(var(--fs, 12px) * .92) var(--mono); letter-spacing: .06em; pointer-events: none; }
.halo { fill: url(#brilho); pointer-events: none; }
.anel { fill: var(--acc); fill-opacity: .025; stroke: var(--aresta); opacity: .75; vector-effect: non-scaling-stroke; pointer-events: none; }
.guia { stroke: var(--aresta); opacity: .35; vector-effect: non-scaling-stroke; }
.vaga { fill: none; stroke: var(--fraco); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.vaga.o { fill: var(--ok); stroke: var(--ok); stroke-dasharray: none; opacity: .75; }
.vaga.i { stroke: var(--acc); } .vaga.x { stroke: var(--alerta); stroke-dasharray: 3 3; }

.vidro { background: color-mix(in srgb, var(--sup) 93%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--linha); border-radius: 12px; }
.ferr { position: absolute; z-index: 5; top: 10px; left: calc(var(--esq) + 10px); right: calc(var(--dir) + 10px); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; transition: left .25s, right .25s; }
.seg { display: inline-flex; padding: 2px; gap: 2px; }
.seg button { padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--acc); color: var(--on-acc); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.cam { padding: 4px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.cam i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.cam[aria-pressed="false"] { opacity: .5; }
.cam-grupo { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 2px; }
.tb { padding: 5px 11px; font-size: 13px; font-weight: 600; }
.tb[aria-pressed="true"] { border-color: var(--acc); color: var(--acc); }
.pop { position: absolute; z-index: 6; top: 56px; right: calc(var(--dir) + 10px); width: min(320px, calc(100% - 20px)); padding: 12px; display: grid; gap: 10px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 4px; }
.opcoes button { padding: 3px 9px; border: 1px solid var(--linha); border-radius: 7px; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; }
.opcoes button[aria-pressed="true"] { background: var(--sup2); border-color: var(--acc); color: var(--acc); }
.opcoes button.off { opacity: .45; }
.opcoes svg { width: 14px; height: 14px; }
.foco-chip { position: absolute; z-index: 5; top: 56px; left: calc(var(--esq) + 10px); padding: 5px 10px; font-size: 13px; display: flex; gap: 10px; align-items: center; transition: left .25s; }
#mini { position: absolute; z-index: 4; left: calc(var(--esq) + 10px); bottom: calc(var(--base) + 10px); width: 150px; height: 96px; padding: 0; cursor: pointer; transition: left .25s, bottom .25s; }
#mini circle { fill: var(--muted); }
#mini rect { fill: none; stroke: var(--acc); stroke-width: 6; }
.zoom { position: absolute; z-index: 4; right: calc(var(--dir) + 10px); bottom: calc(var(--base) + 10px); display: flex; padding: 2px; gap: 2px; transition: right .25s, bottom .25s; }
.zoom button { min-width: 30px; padding: 3px 9px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-align: center; }
.zoom button:hover { background: var(--linha); }
.nivel { position: absolute; z-index: 4; left: calc(var(--esq) + 170px); bottom: calc(var(--base) + 12px); font: 500 11.5px/1.3 var(--mono); color: var(--muted); transition: left .25s, bottom .25s; }

.esq, .dir, .base { position: absolute; z-index: 7; display: flex; flex-direction: column; overflow: hidden; }
.esq { top: 10px; left: 10px; bottom: 10px; width: 352px; } .esq.largo { width: 412px; }
.dir { top: 10px; right: 10px; bottom: 10px; width: 346px; }
.base { left: 10px; right: calc(var(--dir) + 10px); bottom: 10px; height: 310px; transition: right .25s; }
.esq.recolhido { display: none; }
.cab { padding: 12px 14px; border-bottom: 1px solid var(--linha); display: grid; gap: 4px; flex: none; }
.rolagem { padding: 12px 14px 16px; display: grid; grid-auto-rows: max-content; gap: 16px; align-content: start; overflow: auto; flex: 1; min-height: 0; }
.fecha { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); font-size: 18px; line-height: 1; }
.fecha:hover { background: var(--sup2); color: var(--fg); }
.grupo { display: grid; gap: 7px; }
.itens { display: grid; gap: 4px; }
.item { display: grid; gap: 1px; padding: 7px 9px; border-radius: 8px; width: 100%; }
.item:hover { background: var(--sup2); }
.item b { font-weight: 600; } .item span { font-size: 12.5px; color: var(--muted); }
.rec { display: grid; gap: 6px; padding: 10px 11px; border: 1px solid var(--linha); border-radius: 10px; background: var(--sup2); }
.rec b { font-weight: 700; }
.op { border: 1px solid var(--linha); border-radius: 10px; background: var(--sup2); overflow: hidden; }
.op-topo { display: grid; gap: 4px; padding: 10px 11px; width: 100%; }
.op-topo b { font-weight: 700; }
.op-corpo { display: grid; gap: 10px; padding: 0 11px 11px; }
.op-corpo section { display: grid; gap: 3px; }
.motivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.motivos div { display: grid; font-size: 12.5px; } .motivos span { font: 500 11px/1.4 var(--mono); color: var(--muted); }
.angulos { display: grid; gap: 3px; padding-left: 16px; list-style: disc; font-size: 13.5px; }
.descarte { display: flex; flex-wrap: wrap; gap: 6px; }
.descarte select { background: var(--sup); border: 1px solid var(--linha); border-radius: 7px; padding: 4px 6px; font-size: 13px; max-width: 100%; }
.semana { display: grid; grid-template-columns: repeat(7, minmax(148px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.dia { display: grid; gap: 5px; align-content: start; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 10px; background: var(--sup2); font-size: 13px; text-align: left; min-width: 0; }
.dia:hover { border-color: var(--fraco); }
.dia.vazio { background: none; border-style: dashed; color: var(--muted); }
.dia.alerta { border-color: var(--alerta); }
.dia b { font-weight: 700; }
.quadro { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.quadro section { display: grid; gap: 6px; align-content: start; }
.card { display: grid; gap: 4px; padding: 7px 8px; border: 1px solid var(--linha); border-radius: 8px; background: var(--sup2); font-size: 12.5px; }
.card.alerta { border-color: var(--alerta); }
.evo { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 14px; min-width: 0; }
.inds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.inds div { display: grid; font-size: 12px; color: var(--muted); line-height: 1.3; }
.inds b { font: 600 19px/1.2 var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.tempo { display: grid; gap: 8px; min-width: 0; align-content: start; }
.tempo input[type=range] { width: 100%; accent-color: var(--acc); }
.fatos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.fato { flex: 0 0 168px; display: grid; gap: 2px; padding: 7px 9px; border: 1px solid var(--linha); border-radius: 8px; background: var(--sup2); font-size: 12.5px; align-content: start; }
.fato b { font-weight: 700; } .fato.futuro { opacity: .38; }
.grupo-lista button { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 4px 7px; border-radius: 6px; font-size: 13.5px; }
.grupo-lista button:hover { background: var(--sup2); }
.abas { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--linha); flex: none; }
.abas button:not(.fecha) { padding: 4px 11px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.abas button[aria-selected="true"] { background: var(--sup2); color: var(--acc); }
.abas .fecha { margin-left: auto; }
.sec { display: grid; gap: 7px; }
.perf li { display: grid; gap: 1px; padding-block: 5px; border-top: 1px solid var(--linha); font-size: 13.5px; } .perf li:first-child { border-top: 0; }
.oculta { padding: 10px; border: 1px dashed var(--d-conv); border-radius: 8px; color: var(--muted); font-size: 13.5px; }
.con button { display: block; padding-block: 1px; }
.sug { display: grid; gap: 5px; padding: 8px 9px; border: 1px dashed var(--gelo); border-radius: 8px; font-size: 13px; }
.cadeia-lista { display: grid; gap: 4px; }
.cadeia-lista button { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px; padding: 3px 0; font-size: 13.5px; opacity: 0; transition: opacity .3s; }
.cadeia-lista button.visto { opacity: 1; }
.cadeia-lista span { font: 500 11.5px/1.5 var(--mono); color: var(--acc); }
.chat-corpo { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.contexto { padding: 8px 12px; border-bottom: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: none; }
.contexto .chip { background: none; border: 1px solid var(--linha); color: var(--muted); white-space: normal; }
.conversa { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: grid; gap: 12px; align-content: start; }
.msg { display: grid; gap: 7px; font-size: 13.5px; }
.msg.eu { justify-self: end; max-width: 88%; padding: 6px 10px; border-radius: 10px; background: var(--sup2); }
.seg-ia { display: grid; gap: 2px; } .pensando { color: var(--muted); font-size: 13px; }
.ev { justify-self: start; font: 500 10.5px/1.4 var(--mono); padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; }
.ev-v, .ev-c { color: var(--ok); } .ev-r { color: var(--gelo); } .ev-h { color: var(--acc); } .ev-g { color: var(--alerta); }
.cita { border: 1px solid var(--linha); border-radius: 6px; font: 500 12px/1.4 var(--mono); padding: 1px 6px; color: var(--acc); }
.cita:hover { border-color: var(--acc); }
.sugestoes { padding: 8px 12px 0; display: grid; gap: 6px; flex: none; }
.sugestoes .opcoes button { text-align: left; }
.campo { padding: 8px 12px 12px; display: flex; gap: 6px; flex: none; }
.campo input { flex: 1; min-width: 0; background: var(--sup2); border: 1px solid var(--linha); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: min(440px, calc(100vw - 32px)); padding: 8px 12px; display: flex; gap: 8px; align-items: center; font-size: 13.5px; background: var(--sup2); border: 1px solid var(--linha); border-radius: 10px; }

.veu { position: fixed; z-index: 40; inset: 0; background: rgba(5, 9, 22, .62); display: grid; place-items: center; padding-block: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.janela { width: min(980px, 100%); max-height: 100%; overflow: auto; background: var(--sup); border: 1px solid var(--linha); border-radius: 14px; padding: 18px; display: grid; gap: 14px; }
.janela.estreita { width: min(600px, 100%); }
.ficha-cab { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: start; }
.ficha-cab > div { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.cadeia { display: grid; grid-template-columns: repeat(11, minmax(74px, 1fr)); gap: 4px; overflow-x: auto; padding-bottom: 3px; }
.elo { display: grid; gap: 1px; padding: 6px; border-radius: 7px; border: 1px solid var(--linha); font-size: 12px; font-weight: 600; background: var(--sup2); }
.elo b { font: 500 11px/1.3 var(--mono); color: var(--muted); }
.elo.o { border-color: var(--ok); } .elo.i { border: 1px dashed var(--acc); } .elo.x { border-color: var(--alerta); } .elo.- { color: var(--fraco); }
.elo[aria-pressed="true"] { background: var(--acc); color: var(--on-acc); border-color: var(--acc); } .elo[aria-pressed="true"] b { color: var(--on-acc); }
.ficha-corpo { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--palco); min-width: 0; }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.versoes { display: inline-flex; gap: 4px; } .versoes button { padding: 3px 11px; border: 1px solid var(--linha); border-radius: 7px; font-size: 13px; font-weight: 600; } .versoes button[aria-pressed="true"] { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
blockquote { white-space: pre-line; padding: 10px 12px; border-left: 3px solid var(--acc); background: var(--sup); border-radius: 0 8px 8px 0; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; } th { text-align: left; font: 500 11.5px/1.3 var(--mono); color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--linha); } td { padding: 6px 8px; border-bottom: 1px solid var(--linha); }
.n { text-align: right; font-variant-numeric: tabular-nums; } .semdado { color: var(--fraco); }
.reg { display: grid; gap: 10px; } .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
label { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
label input, label select, label textarea { background: var(--sup2); border: 1px solid var(--linha); border-radius: 7px; padding: 6px 8px; font-size: 13.5px; color: var(--fg); width: 100%; }
.ok { color: var(--ok); font-weight: 600; font-size: 13.5px; }
.c-linha { display: grid; grid-template-columns: 56px minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding-block: 8px; border-bottom: 1px solid var(--linha); }

@media (prefers-reduced-motion: no-preference) {
  .no.pulsa .pulso { animation: pulsa 3s ease-out infinite; }
  .aresta.rastro { animation: fluxo 1s linear infinite; }
  @keyframes pulsa { 0% { opacity: .8; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(2.2); } }
  @keyframes fluxo { to { stroke-dashoffset: -14; } }
  .pulso { transform-box: fill-box; transform-origin: center; }
}
@media (max-width: 1180px) { .cerebros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nivel { display: none; } }
@media (max-width: 820px) {
  .cerebros, .duas, .campos { grid-template-columns: minmax(0, 1fr); }
  .saude, .busca, .avatar { display: none; }
  .voltar { font-size: 0; padding: 4px 11px; } .voltar::before { content: "‹"; font-size: 20px; line-height: 1; }
  .barra { gap: 8px; }
  .area { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .trilho { flex-direction: row; order: 2; justify-content: space-between; }
  .trilho button { flex: 1; padding: 5px 1px; font-size: 10.5px; }
  .trilho .chat { margin-top: 0; }
  .esq, .esq.largo, .dir, .base { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; }
  #mini, .nivel { display: none; }
  .ferr { flex-wrap: nowrap; overflow-x: auto; }
  .ferr > * { flex: none; } .cam-grupo { flex-wrap: nowrap; }
  .evo { grid-template-columns: minmax(0, 1fr); }
  .c-linha { grid-template-columns: 56px minmax(0, 1fr); } .c-linha > .muted { display: none; }
}