:root{
  --bg:#0b0c0f; --painel:#121419; --painel2:#171a20; --linha:#242832;
  --texto:#e9eaee; --fraco:#868d9a; --ouro:#d8a860; --verde:#4acd80;
  --verm:#e84c4c; --azul:#5b9dd9; --roxo:#8b6fc9; --cinza:#6b7280;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--texto);overflow:hidden;
  font:15px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif}
button{font:inherit;cursor:pointer}

.app{display:grid;height:100vh;grid-template-rows:auto 1fr 218px;
  grid-template-columns:276px 1fr 330px;
  grid-template-areas:"topo topo topo" "lat texto dir" "linha linha linha"}

/* topo */
.topo{grid-area:topo;display:flex;align-items:center;gap:16px;padding:9px 16px;
  border-bottom:1px solid var(--linha);background:var(--painel)}
.topo h1{margin:0;font-size:15px;letter-spacing:5px;font-weight:600;
  text-transform:uppercase;color:var(--ouro)}
.peca{font-size:12.5px;color:var(--fraco)}
.acoes{display:flex;gap:5px}
.acoes button{padding:5px 10px;border-radius:6px;border:1px solid var(--linha);
  background:var(--painel2);color:var(--texto);font-size:12px}
.acoes button:hover:not(:disabled){border-color:var(--ouro);color:var(--ouro)}
.acoes button:disabled{opacity:.35;cursor:default}
.nums{margin-left:auto;display:flex;gap:14px;font-size:12px;color:var(--fraco)}
.nums b{color:var(--texto)}

/* lateral */
.lat{grid-area:lat;border-right:1px solid var(--linha);background:var(--painel);
  display:flex;flex-direction:column;min-height:0}
.abas{display:flex;border-bottom:1px solid var(--linha)}
.aba{flex:1;padding:8px 4px;background:none;border:0;color:var(--fraco);
  font-size:11.5px;border-bottom:2px solid transparent}
.aba.on{color:var(--ouro);border-bottom-color:var(--ouro)}
.painel{flex:1;overflow-y:auto;min-height:0}
.vazio{padding:20px 16px;color:var(--fraco);font-size:13px}
.op{padding:8px 14px;border-left:3px solid transparent;cursor:pointer;
  border-bottom:1px solid #191c23}
.op:hover{background:var(--painel2);border-left-color:var(--ouro)}
.op.desfeita{opacity:.35}
.ot{font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px}
.ot.verm{background:#3a1c1c;color:#ff9c9c}
.ot.ouro{background:#3a2f16;color:#e5c483}
.ot.azul{background:#16303f;color:#8fc7f0}
.ot.roxo{background:#2b2340;color:#b8a3e8}
.ot.verde{background:#173322;color:#87dcae}
.ot.cinza{background:#25282f;color:#a3aab6}
.oq{float:right;font-size:11px;color:var(--fraco);font-variant-numeric:tabular-nums}
.od{font-size:12.5px;margin-top:4px;line-height:1.35}
.oc{font-size:10.5px;color:var(--fraco);margin-top:3px}
.grupo{padding:10px 14px 4px;font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--fraco)}
.mod{padding:5px 14px;font-size:12px;display:flex;align-items:center;gap:8px}
.mod em{margin-left:auto;font-style:normal;font-size:10px;color:var(--fraco)}
.bola{width:7px;height:7px;border-radius:50%;flex:none}
.bola.vivo{background:var(--verde)}
.bola.especifica{background:var(--ouro)}
.bola.planejado{background:#3b4250}
.placar{padding:11px 14px;font-size:12px;color:var(--fraco);
  border-bottom:1px solid var(--linha)}
.placar b{color:var(--texto)}
.placar small{display:block;margin-top:2px}
.det,.det2,.sug{padding:8px 14px;font-size:12.5px;cursor:pointer;
  border-bottom:1px solid #191c23}
.det:hover,.det2:hover,.sug:hover{background:var(--painel2)}
.det b{color:var(--ouro);margin-right:6px}
.sug b{color:var(--fraco);margin-right:6px;font-variant-numeric:tabular-nums}
.voltar{padding:8px 14px;color:var(--ouro);cursor:pointer;font-size:12px}
.cmd{margin:0;padding:9px 12px;border-top:1px solid var(--linha);background:#0d0f13;
  color:var(--ouro);font-size:10.5px;white-space:pre-wrap;word-break:break-all;
  max-height:76px;overflow-y:auto}

/* transcricao */
.texto{grid-area:texto;overflow-y:auto;padding:0 28px 60px;min-width:0}
.dica{position:sticky;top:0;background:var(--bg);padding:11px 0 9px;
  font-size:11.5px;color:var(--fraco);z-index:9}
.dica b{color:var(--texto)}
.doc{max-width:690px;font-size:17px;line-height:2.1}
.w{cursor:pointer;border-radius:3px}
.w:hover{background:#242a35}
.w.agora{background:var(--ouro);color:#000;font-weight:600}
.w.dest-vermelho{color:#ff6b6b;font-weight:700}
.w.dest-verde{color:var(--verde);font-weight:700}
.w.dest-ouro{color:var(--ouro);font-weight:700}
.w.na-op{box-shadow:inset 0 -2px 0 var(--verm)}
.w.na-op-cam{box-shadow:inset 0 -2px 0 var(--azul)}
.chip{display:inline-flex;align-items:center;margin:0 5px;padding:2px 9px;
  border-radius:20px;font-size:11px;vertical-align:middle;white-space:nowrap;cursor:pointer}
.chip.slide{background:#2a2418;color:#d9c9a4;border:1px solid #46392a}
.chip.motion{background:#312812;color:var(--ouro);border:1px solid #5d4b24}
.chip.prova{background:#16262f;color:#9ccbe6;border:1px solid #2a4a5c;display:block;
  margin:16px 0;padding:9px 14px;border-radius:8px}
.sep{display:block;margin:18px 0 8px;font-size:10px;letter-spacing:1.5px;color:#485062;
  text-transform:uppercase;border-top:1px dashed #232831;padding-top:9px}
.sep b{color:var(--fraco)}

/* direita */
.dir{grid-area:dir;border-left:1px solid var(--linha);background:var(--painel);
  display:flex;flex-direction:column;padding:11px;min-height:0}
.dir video{width:100%;border-radius:8px;background:#000;aspect-ratio:9/16;
  object-fit:contain;max-height:36vh}
.ctrl{display:flex;gap:5px;margin:8px 0}
.ctrl button{flex:1;padding:6px;border-radius:6px;border:1px solid var(--linha);
  background:var(--painel2);color:var(--texto);font-size:12px}
.ctrl button:hover{border-color:var(--ouro);color:var(--ouro)}
.chat{flex:1;display:flex;flex-direction:column;min-height:0}
.chatlog{flex:1;overflow-y:auto;font-size:12.5px;min-height:0}
.msg{padding:7px 10px;border-radius:8px;margin-bottom:6px;line-height:1.45}
.msg.eu{background:#20262f;margin-left:24px}
.msg.ia{background:#161a21;color:var(--fraco)}
.msg .ok{margin-left:8px;padding:2px 9px;border-radius:5px;border:1px solid var(--ouro);
  background:none;color:var(--ouro);font-size:11px}
.exemplos{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0}
.exemplos button{padding:3px 8px;border-radius:12px;border:1px solid var(--linha);
  background:var(--painel2);color:var(--fraco);font-size:10.5px}
.exemplos button:hover{border-color:var(--ouro);color:var(--ouro)}
#chatin{padding:8px 11px;border-radius:7px;border:1px solid var(--linha);
  background:#0d0f13;color:var(--texto);font-size:13px}
#chatin:focus{outline:none;border-color:var(--ouro)}

/* linha do tempo */
.linha{grid-area:linha;border-top:1px solid var(--linha);background:var(--painel);
  padding:7px 14px;position:relative;overflow:hidden}
.cab{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--fraco);
  margin-bottom:5px}
.relogio{font-variant-numeric:tabular-nums;color:var(--texto);font-size:13px}
.tl-pista{position:relative;margin-bottom:3px;background:#0e1015;border-radius:4px;
  overflow:hidden;cursor:pointer}
.tl-pista.travada{opacity:.45}
.tl-rot{position:absolute;left:6px;top:2px;font-size:8.5px;letter-spacing:1.2px;
  color:#5a6272;text-transform:uppercase;z-index:3;pointer-events:none}
.tb{position:absolute;top:0;height:100%;font-size:8.5px;color:var(--fraco);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-right:1px solid #0b0c0f}
.tb.ped{background:#1a1e26}
.tb.ped.tocado{background:#2b2218}
.tb.slide{background:#4d4128;border-radius:3px}
.tb.motion{background:var(--ouro);border-radius:3px;color:#000}
.tb.prova{background:#2f4e60;border-radius:3px;color:#cfe6f2}
.tb.dst{background:var(--verm);border-radius:2px}
.tb.dst.verde{background:var(--verde)}
.tb.dst.ouro{background:var(--ouro)}
.tb.op.destr{background:var(--verm);border-radius:2px}
.tb.op.cam{background:var(--azul);border-radius:2px}
.tb.mk{background:#fff;border-radius:2px}
.onda{width:100%;height:100%;display:block}
.agulha{position:absolute;top:28px;bottom:6px;width:2px;background:#fff;z-index:5;
  pointer-events:none;box-shadow:0 0 6px rgba(255,255,255,.6)}

.aviso{position:fixed;left:50%;bottom:236px;transform:translateX(-50%) translateY(10px);
  background:var(--ouro);color:#000;padding:7px 16px;border-radius:20px;font-size:12.5px;
  font-weight:600;opacity:0;transition:.22s;pointer-events:none;z-index:50}
.aviso.ver{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:1240px){.app{grid-template-columns:238px 1fr 288px}
  .doc{font-size:16px;line-height:2}}
@media(max-width:1000px){
  .app{grid-template-columns:1fr 300px;grid-template-rows:auto auto 1fr 200px;
    grid-template-areas:"topo topo" "lat lat" "texto dir" "linha linha"}
  .lat{border-right:0;border-bottom:1px solid var(--linha);max-height:190px}}
@media(max-width:760px){
  .app{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr 186px;
    grid-template-areas:"topo" "lat" "dir" "texto" "linha"}
  .dir{border-left:0;border-bottom:1px solid var(--linha)}
  .dir video{max-height:26vh}}

/* ---- busca (TR-01/02) ---- */
.busca{position:sticky;top:0;background:var(--bg);padding:11px 0 6px;z-index:10;
  display:flex;gap:6px;align-items:center}
.busca input{flex:1;padding:8px 12px;border-radius:7px;border:1px solid var(--linha);
  background:var(--painel);color:var(--texto);font-size:13.5px}
.busca input:focus{outline:none;border-color:var(--ouro)}
.busca button{padding:6px 9px;border-radius:6px;border:1px solid var(--linha);
  background:var(--painel2);color:var(--fraco);font-size:12px}
.busca button:hover{border-color:var(--ouro);color:var(--ouro)}
.achados{font-size:11px;color:var(--fraco);white-space:nowrap}
.w.achado{background:#4a3a1a;color:#ffd89b}

/* ---- selecao (TL-01/02/03) ---- */
.caixa-sel{position:fixed;border:1px solid var(--ouro);background:rgba(216,168,96,.12);
  z-index:60;pointer-events:none;border-radius:2px}
.tb.sel{outline:2px solid var(--ouro);outline-offset:-1px;z-index:4}

/* ---- regua (TL-16) ---- */
.tl-regua{position:relative;height:13px;margin-bottom:2px}
.tl-regua .rg{position:absolute;font-size:9px;color:#59606e;
  font-variant-numeric:tabular-nums;transform:translateX(-50%)}

/* ---- zoom e menu de trilhas (TL-14/15/18) ---- */
.zb{display:flex;gap:3px}
.zb button{padding:2px 8px;border-radius:5px;border:1px solid var(--linha);
  background:var(--painel2);color:var(--fraco);font-size:11px}
.zb button:hover{border-color:var(--ouro);color:var(--ouro)}
.trmenu{display:flex;gap:9px;margin-left:auto;font-size:9.5px;color:#59606e}
.trmenu .tr{display:flex;gap:3px;align-items:center;text-transform:uppercase;
  letter-spacing:.8px}
.trmenu b{cursor:pointer;opacity:.3;font-size:9px}
.trmenu b.on{opacity:1}

/* ---- historico e checklist ---- */
.hist{padding:6px 14px;font-size:12.5px;cursor:pointer;display:flex;
  align-items:center;gap:8px;border-bottom:1px solid #191c23}
.hist:hover{background:var(--painel2)}
.hist.fora{opacity:.32}
.hn{font-size:10px;color:var(--fraco);min-width:20px}
.hist em{margin-left:auto;font-style:normal;font-size:10px;color:var(--fraco)}
.tk{padding:5px 14px;font-size:12px;display:flex;gap:8px;align-items:baseline}
.tk .cx{width:12px;height:12px;border:1px solid #39404d;border-radius:3px;
  font-size:9px;line-height:11px;text-align:center;flex:none}
.tk.feito{color:var(--fraco)}
.tk.feito .cx{background:var(--verde);border-color:var(--verde);color:#000}
.tid{font-size:9.5px;color:#4d5563;min-width:38px}

/* ---- folha de atalhos (UX-03) ---- */
.folha{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:70;
  align-items:center;justify-content:center}
.folha.ver{display:flex}
.folha-in{background:var(--painel);border:1px solid var(--linha);border-radius:12px;
  padding:22px 26px;max-width:460px}
.folha-in h3{margin:0 0 12px;font-size:14px;letter-spacing:2px;color:var(--ouro);
  text-transform:uppercase}
.folha-in table{width:100%;border-collapse:collapse;font-size:13px}
.folha-in td{padding:4px 0}
.folha-in td:first-child{color:var(--ouro);width:130px;font-variant-numeric:tabular-nums}
.folha-in button{margin-top:14px;padding:6px 14px;border-radius:6px;
  border:1px solid var(--linha);background:var(--painel2);color:var(--texto);font-size:12px}

/* ---- estado vazio (UX-04) ---- */
.vazio{padding:22px 16px;color:var(--fraco);font-size:12.5px;line-height:1.6}

/* ---- trecho selecionado no texto (TR-03) ---- */
.w.trecho{background:#2b3a4a}
.w.cortada{text-decoration:line-through;text-decoration-color:var(--verm);
  text-decoration-thickness:2px;opacity:.55}
.w.dic{border-bottom:2px dotted var(--ouro)}
.trechobar{position:sticky;bottom:8px;display:none;gap:6px;align-items:center;
  background:var(--painel);border:1px solid var(--ouro);border-radius:9px;
  padding:8px 12px;margin-top:14px;font-size:12px;box-shadow:0 8px 26px rgba(0,0,0,.55)}
.trechobar.ver{display:flex}
.trechobar span{flex:1;color:var(--fraco)}
.trechobar button{padding:4px 10px;border-radius:6px;border:1px solid var(--linha);
  background:var(--painel2);color:var(--texto);font-size:11.5px}
.trechobar button:hover{border-color:var(--ouro);color:var(--ouro)}

/* ---- dicionário (TR-06) ---- */
.dicx{padding:7px 14px;font-size:12.5px;cursor:pointer;border-bottom:1px solid #191c23}
.dicx:hover{background:var(--painel2)}
.dicx b{color:#ff9c9c;text-decoration:line-through}
.dicx em{float:right;font-style:normal;font-size:10px;color:var(--fraco)}