/* Trilha — estilos do player. Todo valor de cor/raio/fonte vem de tokens/tokens.css. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--oh-graphite) url("../img/fundo.webp") center/cover no-repeat fixed;
  color:var(--oh-cream);
  font-family:var(--oh-font-body);
  font-size:16px;line-height:1.55;
  min-height:100vh;
}
body.modo-call{font-size:18.5px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:none;box-shadow:var(--oh-focus)}
::selection{background:rgba(48,176,199,.32)}
code{font-family:var(--oh-font-mono);font-size:.9em;color:var(--oh-text-secondary)}
.link{color:var(--oh-cyan);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--oh-cyan-hover)}

/* ---------- captura / login ---------- */
.captura{min-height:100vh;display:grid;place-items:center;padding:28px}
.captura-painel{
  width:min(460px,100%);
  background:rgba(22,24,29,.92);
  border:1px solid var(--oh-border);
  border-radius:var(--oh-radius-panel);
  box-shadow:var(--oh-shadow-panel);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  padding:34px 30px;
  display:flex;flex-direction:column;gap:15px;
}
.captura-marca{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--oh-muted)}
.captura-titulo{font-family:var(--oh-font-display);font-weight:500;font-size:2.1rem;line-height:1.08;text-wrap:balance}
.captura-sub{color:var(--oh-text-secondary);font-size:.9rem}
.captura-sub strong{color:var(--oh-cream)}
.captura-painel .campo input{max-width:none;width:100%}
.captura-painel .msg-bad{min-height:1.1em}
.tel-linha{display:flex;gap:8px;position:relative}
.tel-linha > input{flex:1;min-width:0}
.tel-pais{
  flex:none;display:flex;align-items:center;gap:7px;
  background:#101216;border:1px solid var(--oh-border);
  border-radius:var(--oh-radius-input);padding:10px 12px;
  font-family:var(--oh-font-mono);font-size:.88rem;white-space:nowrap;
  transition:border-color .15s;
}
.tel-pais:hover{border-color:var(--oh-muted)}
.tel-pais .seta{color:var(--oh-muted);font-size:.58rem}
.tel-lista{
  position:absolute;top:calc(100% + 6px);left:0;z-index:6;
  width:270px;max-height:242px;overflow-y:auto;
  background:var(--oh-surface-2);border:1px solid var(--oh-border);
  border-radius:var(--oh-radius-card);box-shadow:var(--oh-shadow-panel);
  display:none;
}
.tel-lista.aberta{display:block}
.tel-lista button{
  display:flex;width:100%;gap:10px;align-items:center;
  padding:9px 14px;font-size:.85rem;text-align:left;
}
.tel-lista button:hover{background:var(--oh-surface-dark)}
.tel-lista .ddi{margin-left:auto;font-family:var(--oh-font-mono);color:var(--oh-muted);font-size:.75rem}
.captura-btn{
  background:var(--oh-terracotta);color:var(--oh-cream-light);
  font-weight:600;font-size:.95rem;
  border-radius:var(--oh-radius-button);padding:13px;
  transition:background .15s;
}
.captura-btn:hover{background:var(--oh-terracotta-hover)}
.captura-btn[disabled]{opacity:.65;pointer-events:none}
.captura-troca{
  align-self:flex-start;font-size:.75rem;color:var(--oh-muted);
  text-decoration:underline;text-underline-offset:3px;
}
.captura-troca:hover{color:var(--oh-text-secondary)}
.captura-nota{font-size:.72rem;color:var(--oh-muted);line-height:1.5}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 24px;
  border-bottom:1px solid var(--oh-border);
  background:rgba(20,22,26,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:40;
}
.wordmark{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--oh-muted);white-space:nowrap}
.topbar .sep{width:1px;height:22px;background:var(--oh-border)}
.guide-name{font-family:var(--oh-font-display);font-size:1.35rem;font-weight:500;letter-spacing:.01em;white-space:nowrap}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{
  font-family:var(--oh-font-mono);font-size:.6875rem;letter-spacing:.02em;
  color:var(--oh-text-secondary);
  border:1px solid var(--oh-border);border-radius:var(--oh-radius-chip);
  padding:4px 11px;white-space:nowrap;
}
.toggle-call{
  display:flex;align-items:center;gap:8px;
  font-size:.75rem;color:var(--oh-text-secondary);
  border:1px solid var(--oh-border);border-radius:var(--oh-radius-chip);
  padding:4px 12px;transition:border-color .15s,color .15s;
}
.toggle-call .dot{width:8px;height:8px;border-radius:50%;background:var(--oh-muted);transition:background .15s}
.toggle-call[aria-pressed="true"]{color:var(--oh-cream);border-color:var(--oh-cyan)}
.toggle-call[aria-pressed="true"] .dot{background:var(--oh-cyan)}
.reset-link{font-size:.6875rem;color:var(--oh-muted);text-decoration:underline;text-underline-offset:3px}
.reset-link:hover{color:var(--oh-text-secondary)}

/* ---------- frame ---------- */
.frame{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  max-width:1180px;margin:0 auto;
  min-height:calc(100vh - 64px);
}

/* ---------- trilha (sidebar) ---------- */
.trilha{
  border-right:1px solid var(--oh-border);
  padding:26px 20px 32px;
  position:sticky;top:64px;align-self:start;
  max-height:calc(100vh - 64px);overflow-y:auto;
}
.progresso-geral{margin-bottom:26px}
.progresso-topo{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.progresso-label{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oh-muted)}
.progresso-pct{font-family:var(--oh-font-mono);font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--oh-cream)}
.barra{height:5px;border-radius:999px;background:var(--oh-surface-2);overflow:hidden}
.barra-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--oh-cyan),var(--oh-cream));transition:width .35s ease}
.fase{margin-bottom:20px}
.fase-titulo{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oh-muted);margin-bottom:8px;
  display:flex;align-items:center;gap:8px;
}
.fase-titulo .num{font-family:var(--oh-font-mono);color:var(--oh-text-secondary)}
.etapa-item{
  width:100%;text-align:left;
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--oh-radius-button);
  color:var(--oh-text-secondary);
  border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
}
.etapa-item:hover{background:var(--oh-surface-dark);color:var(--oh-cream)}
.etapa-item.atual{background:var(--oh-surface-dark);border-color:var(--oh-border);color:var(--oh-cream)}
.etapa-status{
  flex:none;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--oh-muted);
  display:grid;place-items:center;
  font-size:11px;line-height:1;
}
.etapa-item.feita .etapa-status{border-color:var(--oh-green);background:var(--oh-green-deep);color:var(--oh-green)}
.etapa-item.andamento .etapa-status{border-color:var(--oh-gold)}
.etapa-item.andamento .etapa-status::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--oh-gold)}
.etapa-item.atual .etapa-status{border-color:var(--oh-cream)}
.etapa-item.atual.andamento .etapa-status{border-color:var(--oh-gold)}
.etapa-item.atual.feita .etapa-status{border-color:var(--oh-green)}
.etapa-nome{font-size:.855rem;line-height:1.3;flex:1}
.etapa-quem{flex:none;width:7px;height:7px;border-radius:50%}
.quem-humano{background:var(--oh-terracotta)}
.quem-agente{background:var(--oh-cyan)}
.legenda{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--oh-border);
  display:flex;flex-direction:column;gap:7px;
}
.legenda div{display:flex;align-items:center;gap:9px;font-size:.72rem;color:var(--oh-muted)}
.legenda .etapa-quem{width:8px;height:8px}

/* ---------- player ---------- */
.player{padding:34px 40px 60px;min-width:0}
.player-inner{max-width:720px;display:flex;flex-direction:column;gap:22px}
.etapa-head{display:flex;flex-direction:column;gap:12px}
.etapa-eyebrow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oh-muted);
}
.etapa-eyebrow .contagem{font-family:var(--oh-font-mono);letter-spacing:.06em;color:var(--oh-text-secondary)}
.badge-quem{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.6563rem;letter-spacing:.12em;text-transform:uppercase;
  border-radius:var(--oh-radius-chip);padding:4px 12px;font-weight:600;
}
.badge-quem .etapa-quem{width:7px;height:7px}
.badge-humano{color:#E8A183;background:rgba(193,85,46,.14);border:1px solid rgba(193,85,46,.45)}
.badge-agente{color:#7BD0DF;background:rgba(48,176,199,.12);border:1px solid rgba(48,176,199,.4)}
.etapa-titulo{
  font-family:var(--oh-font-display);font-weight:500;
  font-size:clamp(1.9rem,3.6vw,2.5rem);line-height:1.12;
  text-wrap:balance;letter-spacing:.005em;
}
.etapa-objetivo{font-size:1.06rem;color:var(--oh-text-secondary);max-width:58ch}

/* blocos */
.bloco{
  background:var(--oh-surface-dark);
  border:1px solid var(--oh-border);
  border-radius:var(--oh-radius-panel);
  overflow:hidden;
}
.bloco-header{
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;border-bottom:1px solid var(--oh-border);
  font-size:.6563rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oh-muted);
}
.bloco-body{padding:18px}

/* checklist */
.check-item{
  display:flex;align-items:flex-start;gap:13px;
  padding:12px 10px;border-radius:var(--oh-radius-button);
  width:100%;text-align:left;
  transition:background .15s;
}
.check-item:hover{background:var(--oh-surface-2)}
.check-item + .check-item{margin-top:2px}
.check-box{
  flex:none;width:21px;height:21px;margin-top:1px;
  border:1.5px solid var(--oh-muted);border-radius:6px;
  display:grid;place-items:center;
  color:transparent;font-size:13px;
  transition:background .15s,border-color .15s,color .15s;
}
.check-item[aria-checked="true"] .check-box{background:var(--oh-green-deep);border-color:var(--oh-green);color:var(--oh-green)}
.check-texto{font-size:.97rem;color:var(--oh-cream)}
.check-item[aria-checked="true"] .check-texto{color:var(--oh-muted);text-decoration:line-through;text-decoration-color:rgba(119,122,126,.6)}
.check-texto .link{color:var(--oh-cyan);text-decoration:underline;text-underline-offset:3px}

/* nota */
.nota{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--oh-surface-dark);
  border:1px solid var(--oh-border);
  border-left:3px solid var(--oh-gold);
  border-radius:var(--oh-radius-card);
  padding:15px 18px;
}
.nota p{font-size:.9rem;color:var(--oh-text-secondary)}
.nota .mono{font-family:var(--oh-font-mono);color:var(--oh-cream);font-size:.86rem}

/* print (imagem real ou redesenho esquemático) */
.print-frame{cursor:zoom-in}
.print-chrome{
  display:flex;align-items:center;gap:6px;
  padding:10px 16px;border-bottom:1px solid var(--oh-border);background:var(--oh-surface-2);
}
.print-chrome span:not(.zoom-dica){width:9px;height:9px;border-radius:50%;background:var(--oh-border)}
.print-chrome .zoom-dica{margin-left:auto;font-size:.6563rem;letter-spacing:.1em;text-transform:uppercase;color:var(--oh-muted);white-space:nowrap}
.print-body{padding:22px;background:#101216;position:relative}
.print-body img,.print-body video{display:block;max-width:100%;margin:0 auto;border-radius:4px}
.print-body video{max-height:440px;width:auto}
.lightbox-conteudo .print-body video{max-height:74vh}
.print-frame video{cursor:pointer}
.print-frame.pausado .print-body::after{
  content:"▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(16,18,22,.72);border:1px solid var(--oh-border);
  color:var(--oh-cream);font-size:19px;padding-left:4px;
  pointer-events:none;
}
.print-caption{
  padding:11px 18px;border-top:1px solid var(--oh-border);
  font-size:.78rem;color:var(--oh-muted);
}
.print-caption strong{color:var(--oh-text-secondary);font-weight:600}

/* redesenho esquemático (linguagem pros prints didáticos) */
.mock-set{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.mock-row{
  display:flex;align-items:center;gap:14px;
  background:#191C22;border:1px solid #2A2D34;border-radius:8px;
  padding:12px 14px;
}
.mock-row .mock-txt{flex:1;min-width:0}
.mock-row h4{font-size:.82rem;font-weight:600;color:#D7D5CE}
.mock-row p{font-size:.7rem;color:#8A8D92;line-height:1.4}
.mock-pill{font-size:.6rem;letter-spacing:.06em;color:#E08262;border:1px solid rgba(224,130,98,.5);border-radius:999px;padding:2px 8px;white-space:nowrap}
.mock-sw{flex:none;width:34px;height:19px;border-radius:999px;background:#3A3D44;position:relative}
.mock-sw::after{content:"";position:absolute;top:2.5px;left:3px;width:14px;height:14px;border-radius:50%;background:#8A8D92}
.mock-sw.on{background:var(--oh-cyan)}
.mock-sw.on::after{left:auto;right:3px;background:#fff}
.mock-row.alvo{border-color:var(--oh-terracotta);box-shadow:0 0 0 3px rgba(193,85,46,.18)}
.mock-alvo-tag{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  font-size:.6563rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:#E8A183;margin:2px 0 0 2px;
}
.mock-alvo-tag::before{content:"↑";font-size:.8rem}

/* comando */
.comando{background:#101216;border:1px solid var(--oh-border);border-radius:var(--oh-radius-card);overflow:hidden}
.comando-top{display:flex;align-items:center;padding:8px 8px 8px 16px;border-bottom:1px solid var(--oh-border)}
.comando-top .rotulo{font-size:.6563rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oh-muted)}
.btn-copiar{
  margin-left:auto;
  font-family:var(--oh-font-mono);font-size:.7rem;color:var(--oh-text-secondary);
  border:1px solid var(--oh-border);border-radius:6px;padding:5px 12px;
  transition:color .15s,border-color .15s;
}
.btn-copiar:hover{color:var(--oh-cream);border-color:var(--oh-muted)}
.comando pre{
  padding:15px 18px;overflow-x:auto;
  font-family:var(--oh-font-mono);font-size:.83rem;line-height:1.7;color:var(--oh-cream-light);
}
.comando pre .tk{color:var(--oh-cyan)}
.comando pre .var{color:var(--oh-gold)}
.prompt-pre{max-height:340px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}

/* ferramenta embutida */
.ferramenta{border-color:rgba(48,176,199,.4)}
.ferramenta .bloco-header{color:#7BD0DF;border-bottom-color:rgba(48,176,199,.3)}
.ferramenta .bloco-header .arquivo{font-family:var(--oh-font-mono);text-transform:none;letter-spacing:.02em;color:var(--oh-text-secondary)}
.ferramenta iframe{display:block;width:100%;border:0;background:#101216}
.ferr-grid{display:flex;flex-direction:column;gap:16px}
.campo label{display:block;font-size:.8rem;font-weight:600;margin-bottom:4px}
.campo .dica{font-size:.72rem;color:var(--oh-muted);margin-bottom:7px}
.campo input{
  width:100%;max-width:300px;
  background:#101216;border:1px solid var(--oh-border);border-radius:var(--oh-radius-input);
  color:var(--oh-cream);font-family:var(--oh-font-mono);font-size:.9rem;
  padding:10px 13px;
}
.campo input::placeholder{color:var(--oh-muted)}
.campo input:disabled{color:var(--oh-text-secondary);border-style:dashed;cursor:default}
.campo-status{font-size:.72rem;color:var(--oh-green);margin-top:8px}
.btn-gerar{
  align-self:flex-start;
  background:var(--oh-cyan);color:#0C1E22;font-weight:600;font-size:.9rem;
  border-radius:var(--oh-radius-button);padding:10px 20px;
  transition:background .15s;
}
.btn-gerar:hover{background:var(--oh-cyan-hover)}
.btn-gerar:active{background:var(--oh-cyan-active)}
.ferr-resumo{font-size:.8rem;color:var(--oh-text-secondary)}
.ferr-resumo b{color:var(--oh-green)}
.ferr-titulo{font-weight:600;font-size:.95rem;margin-top:6px}

/* organograma da empresa (coletor de agentes) */
.org{position:relative;display:flex;flex-direction:column;align-items:center;gap:52px;padding:10px 0 4px}
.org-linhas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.org-linhas path{fill:none;stroke-width:1.5}
.org-linhas .linha-agente{stroke:rgba(48,176,199,.5);stroke-dasharray:5 5}
.org-linhas .linha-ok{stroke:var(--oh-green)}
.org-linhas .linha-default{stroke:var(--oh-green)}
.org-humano{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px solid var(--oh-terracotta);border-radius:var(--oh-radius-card);
  background:#101216;padding:14px 30px;
  box-shadow:0 0 0 3px rgba(193,85,46,.16);
}
.org-losango{width:11px;height:11px;background:var(--oh-terracotta);transform:rotate(45deg);border-radius:2px;margin-bottom:5px}
.org-sub{font-size:.72rem;color:var(--oh-muted)}
.org-sub .mono{font-family:var(--oh-font-mono);color:var(--oh-text-secondary)}
.org-fileira{
  position:relative;z-index:1;display:flex;flex-wrap:nowrap;gap:12px;
  justify-content:center;justify-content:safe center;
  width:100%;overflow-x:auto;padding-bottom:8px;
}
.org-card{
  border:1px solid rgba(48,176,199,.4);border-radius:var(--oh-radius-card);
  background:#101216;padding:14px;text-align:left;
  display:flex;flex-direction:column;gap:9px;
  width:min(100%,300px);
}
.org-card .campo input{max-width:none;width:100%}
.org-card-top{display:flex;align-items:center;gap:8px}
.org-bolinha{flex:none;width:9px;height:9px;border-radius:50%;background:var(--oh-cyan)}
.org-card-titulo{font-weight:600;font-size:.85rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-card.completo{border-color:rgba(76,158,119,.55)}
.org-card.completo .org-bolinha{background:var(--oh-green)}
.org-x{flex:none;color:var(--oh-muted);font-size:.78rem;padding:2px 7px;border-radius:6px}
.org-x:hover{color:var(--oh-alert)}
.org-default{border-color:rgba(76,158,119,.55)}
.org-default .org-bolinha{background:var(--oh-green)}
.org-default-txt{font-size:.72rem;color:var(--oh-muted);line-height:1.5}
.org-add{
  border-style:dashed;border-color:var(--oh-border);
  align-items:center;justify-content:center;cursor:pointer;
  color:var(--oh-text-secondary);font-size:.85rem;min-height:96px;
  transition:border-color .15s,color .15s;
}
.org-add:hover{border-color:var(--oh-cyan);color:var(--oh-cream)}

/* cards compactos (uma linha só) + editor */
.org-mini{flex:none;width:158px;padding:12px 13px;gap:7px;cursor:pointer;transition:border-color .15s}
.org-mini:hover{border-color:var(--oh-cyan)}
.org-mini.org-default{cursor:default}
.org-mini.org-default:hover{border-color:rgba(76,158,119,.55)}
.org-mini .org-card-titulo{font-size:.8rem}
.org-mini .setor-profile{font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.org-mini-hint{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--oh-muted)}
.org-mini.org-add{min-height:0;width:158px}
.org-card.com-erro{border-color:var(--oh-alert)}
.org-card.com-erro .org-bolinha{background:var(--oh-alert)}
.org-token-ok{font-family:var(--oh-font-mono);font-size:.64rem;color:var(--oh-green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.org-token-falta{font-size:.64rem;color:var(--oh-muted)}
.editor-agente{
  position:fixed;inset:0;z-index:80;
  background:rgba(10,11,14,.78);
  display:grid;place-items:center;padding:24px;
}
.editor-painel{
  background:var(--oh-surface-dark);
  border:1px solid rgba(48,176,199,.4);
  border-radius:var(--oh-radius-panel);
  box-shadow:var(--oh-shadow-panel);
  width:min(440px,100%);padding:20px;
  display:flex;flex-direction:column;gap:12px;
}
.editor-painel .campo input{max-width:none}
.editor-painel .setor-profile{font-size:.72rem}
.editor-topo{display:flex;align-items:center;gap:9px}
.editor-titulo{flex:1;font-size:1rem}
.editor-acoes{display:flex;gap:10px;margin-top:4px}
.editor-remover{
  color:var(--oh-muted);border:1px solid var(--oh-border);
  border-radius:var(--oh-radius-button);padding:9px 14px;font-size:.82rem;
  transition:color .15s,border-color .15s;
}
.editor-remover:hover{color:var(--oh-alert);border-color:var(--oh-alert)}
.editor-salvar{
  margin-left:auto;
  background:var(--oh-terracotta);color:var(--oh-cream-light);
  font-weight:600;font-size:.9rem;
  border-radius:var(--oh-radius-button);padding:10px 20px;
  transition:background .15s;
}
.editor-salvar:hover{background:var(--oh-terracotta-hover)}
.setor-profile{font-family:var(--oh-font-mono);font-size:.72rem;color:var(--oh-cyan);min-height:1em}
.msg-bad{font-size:.72rem;color:var(--oh-alert);min-height:1em;margin:0}
.input-bad{border-color:var(--oh-alert) !important}

/* comandos gerados */
.cmd-lista{display:flex;flex-direction:column;gap:12px}
.cmd-barra{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--oh-text-secondary)}
.cmd-barra .barra{flex:1;min-width:140px}
.cmd-barra b{color:var(--oh-green)}
.toggle-mask{display:flex;gap:7px;align-items:center;font-size:.75rem;color:var(--oh-muted);cursor:pointer;user-select:none}
.toggle-mask input{accent-color:var(--oh-cyan)}
.comando-top .prof-mono{font-family:var(--oh-font-mono);text-transform:none;letter-spacing:.02em;color:var(--oh-cyan)}
.comando.copiado{border-color:rgba(76,158,119,.55)}
.comando.copiado .btn-copiar{color:var(--oh-green);border-color:rgba(76,158,119,.55)}
.mascarado pre .tok{filter:blur(5px);user-select:none}
@media (max-width:700px){.setor-grid{grid-template-columns:1fr}}

/* vídeos em moldura de celular */
.fones-body{display:flex;flex-direction:column;gap:20px}
.fones-intro{font-size:.97rem;color:var(--oh-cream);max-width:60ch}
.fones-intro .link{color:var(--oh-cyan);text-decoration:underline;text-underline-offset:3px}
.fones{display:flex;gap:28px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.fone{display:flex;flex-direction:column;gap:13px;width:min(100%,255px);margin:0}
.fone-moldura{
  position:relative;border-radius:42px;overflow:hidden;line-height:0;
  border:9px solid #060708;background:#060708;cursor:pointer;
  box-shadow:0 0 0 1.5px var(--oh-border),var(--oh-shadow-panel);
}
.fone-moldura video{width:100%;height:auto;display:block;border-radius:33px}
.fone.paisagem{width:min(100%,480px)}
.fone.paisagem .fone-moldura{border-radius:14px;border-width:6px}
.fone.paisagem .fone-moldura video{border-radius:8px}
.passo-corpo .fone.paisagem{width:min(100%,480px)}
.fone.pausado .fone-moldura::after{
  content:"▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(6,7,8,.72);border:1px solid var(--oh-border);
  color:var(--oh-cream);font-size:16px;padding-left:4px;
  pointer-events:none;z-index:3;
}
.fone-legenda{display:flex;gap:11px;align-items:flex-start;padding:0 4px}
.fone-passo{
  flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;
  border:1px solid var(--oh-terracotta);color:#E8A183;
  display:grid;place-items:center;font-family:var(--oh-font-mono);font-size:.72rem;
}
.fone-legenda strong{font-size:.85rem}
.fone-legenda p{font-size:.78rem;color:var(--oh-text-secondary);margin-top:3px;line-height:1.55}

/* lista instrutiva (passos numerados, com ou sem vídeo) */
.passos-body{display:flex;flex-direction:column;gap:26px}
.passo-item{display:flex;gap:14px;align-items:flex-start}
.passo-corpo{display:flex;flex-direction:column;gap:8px;min-width:0}
.passo-corpo strong{font-size:.97rem}
.passo-corpo p{font-size:.85rem;color:var(--oh-text-secondary);max-width:56ch;line-height:1.55}
.passo-corpo .fone{width:min(100%,240px);margin-top:6px}

/* navegação */
.nav-etapas{
  display:flex;align-items:center;gap:14px;
  padding-top:10px;border-top:1px solid var(--oh-border);
}
.btn-ghost{
  font-size:.9rem;color:var(--oh-text-secondary);
  border:1px solid var(--oh-border);border-radius:var(--oh-radius-button);
  padding:11px 18px;transition:color .15s,border-color .15s;
}
.btn-ghost:hover{color:var(--oh-cream);border-color:var(--oh-muted)}
.btn-ghost[disabled]{opacity:.35;pointer-events:none}
.btn-primario{
  margin-left:auto;
  background:var(--oh-terracotta);color:var(--oh-cream-light);
  font-weight:600;font-size:.95rem;
  border-radius:var(--oh-radius-button);padding:12px 22px;
  box-shadow:var(--oh-shadow-panel);
  transition:background .15s,transform .1s;
}
.btn-primario:hover{background:var(--oh-terracotta-hover)}
.btn-primario:active{transform:translateY(1px)}
.nav-dica{font-size:.72rem;color:var(--oh-muted)}

/* tela final */
.final{
  text-align:center;padding:70px 20px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.final .selo{
  width:64px;height:64px;border-radius:50%;
  border:1.5px solid var(--oh-green);background:var(--oh-green-deep);
  display:grid;place-items:center;font-size:26px;color:var(--oh-green);
}
.final h2{font-family:var(--oh-font-display);font-weight:500;font-size:2.2rem;text-wrap:balance}
.final p{color:var(--oh-text-secondary);max-width:44ch}

/* erro de carga do guia */
.erro-carga{max-width:560px;margin:80px auto;padding:0 24px;display:flex;flex-direction:column;gap:12px}
.erro-carga h1{font-family:var(--oh-font-display);font-weight:500;font-size:1.8rem}
.erro-carga p{color:var(--oh-text-secondary);font-size:.95rem}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:90;
  background:rgba(10,11,14,.9);
  display:none;place-items:center;padding:32px;
  cursor:zoom-out;
}
.lightbox.aberto{display:grid}
.lightbox-conteudo{
  background:var(--oh-surface-dark);
  border:1px solid var(--oh-border);border-radius:var(--oh-radius-panel);
  box-shadow:var(--oh-shadow-panel);
  max-width:860px;width:100%;max-height:88vh;overflow-y:auto;
  cursor:default;
}
.lightbox-conteudo .print-body{padding:34px}
.lightbox-conteudo .mock-set{max-width:600px}
.lightbox-fechar{
  position:absolute;top:20px;right:26px;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--oh-text-secondary);
}

/* toast */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,10px);
  background:var(--oh-surface-2);border:1px solid var(--oh-border);border-radius:var(--oh-radius-chip);
  color:var(--oh-cream);font-size:.82rem;padding:9px 20px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:95;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media (max-width:920px){
  body{background-attachment:scroll}
  .frame{grid-template-columns:1fr}
  .trilha{
    position:static;max-height:none;border-right:none;
    border-bottom:1px solid var(--oh-border);
    padding:20px 24px;
  }
  .player{padding:28px 24px 56px}
  .guide-name{font-size:1.15rem}
}