/* ==========================================================================
   GPlanSiS|iaVision — visão computacional em tempo real
   Tema escuro (o palco é vídeo: fundo claro cansa e falseia o contraste).
   Acento laranja herdado do fluxo SDD.
   ========================================================================== */

/*
 * PALETA — a mesma da página de entrada (index.html): duas cores de página e
 * uma cor de sinal.
 *
 *   #04413C / #02302C  verde-petróleo, o fundo e o painel
 *   #FFFFFF / #CFEBE4  texto e texto secundário
 *   #FFD84D            o SINAL — só para o que precisa saltar aos olhos:
 *                      botão primário, estado ativo, caixas de detecção
 *
 * O laranja antigo saiu inteiro. Uma cor de sinal só, usada com parcimônia,
 * é o que faz a detecção no vídeo ser a coisa mais visível da tela — e não
 * competir com dezenas de botões da mesma cor.
 */
:root {
  --bg: #02302C;
  --bg-2: #04413C;
  --stage-bg: #02302C;   /* fundo do palco do vídeo (letterbox do canvas do Viewport) */
  --panel: rgba(4, 65, 60, 0.90);
  --panel-solid: #04413C;
  --line: rgba(255, 255, 255, 0.16);
  --line-2: rgba(255, 255, 255, 0.09);
  --ink: #FFFFFF;
  --ink-2: #CFEBE4;
  --ink-3: rgba(207, 235, 228, 0.62);
  --accent: #FFD84D;
  --accent-ink: #04413C;
  --cyan: #CFEBE4;
  --warn: #FFD84D;
  --err: #FF8A80;
  --ok: #8CE0C8;
  --r: 10px;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --sans: "Archivo", "Helvetica Neue", -apple-system, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
code { font-family: var(--mono); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }

/* ---------------------------------------------------------------- viewport */

.viewport {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1100px 620px at 50% 42%, #17171b 0%, var(--bg) 72%);
}

.stage {
  width: 100%;
  height: 100%;
  display: block;
}
.stage.splitting { cursor: ew-resize; }

/* tela inicial */

/* só a tela de espera do vídeo: `.idle` também é o estado dos itens do painel Modelos */
.viewport > .idle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.idle-card {
  max-width: 430px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 34px 30px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.idle-card h1 {
  margin: 0 0 12px;
  font-size: 30px;
  letter-spacing: -.5px;
  font-weight: 800;
}
.idle-card h1 em {
  font-style: normal;
  font-size: 12px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--accent);
  vertical-align: super;
  margin-left: 8px;
}
.idle-card p { color: var(--ink-2); margin: 0 0 20px; }
.idle-card b { color: var(--ink); font-weight: 600; }
.idle-note {
  font-size: 11.5px;
  color: var(--ink-3) !important;
  margin: 18px 0 0 !important;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- menubar */

.menubar {
  position: fixed;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 7px 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255,255,255,.05);
  user-select: none;
  touch-action: none;
  cursor: grab;
  transition: box-shadow .16s;
}
.menubar.dragging {
  cursor: grabbing;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .7);
}
.menubar.collapsed { gap: 6px; }

.mb-grip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 6px 0 2px;
}
.mb-grip span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-3);
}

.mb-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  padding-right: 4px;
}
.mb-brand strong { font-size: 13px; letter-spacing: .3px; }
.mb-brand em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
}

.mb-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 5px;
  background: var(--line);
}

.mb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s, color .13s, border-color .13s;
}
.mb-btn:hover { background: rgba(255,255,255,.07); color: var(--ink); }
.mb-btn.on {
  background: rgba(255, 216, 77, .14);
  border-color: rgba(255, 216, 77, .42);
  color: var(--accent);
}
.mb-btn.primary.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.mb-btn.primary:not(.on) { background: rgba(255,255,255,.07); color: var(--ink); }
.mb-btn span { font-size: 12px; font-weight: 500; }

.mb-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 9px/15px var(--mono);
  font-style: normal;
  text-align: center;
}

.mb-fps {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 0 8px;
  font-family: var(--mono);
}
.mb-fps b { font-size: 14px; color: var(--ok); }
.mb-fps.warn b { color: var(--warn); }
.mb-fps em { font-style: normal; font-size: 9px; color: var(--ink-3); }

.mb-collapse {
  width: 22px;
  height: 26px;
  margin-left: 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 11px;
}
.mb-collapse:hover { background: rgba(255,255,255,.08); color: var(--ink); }

/*
 * A barra encolhia por media queries de largura de janela (1750, 1580, 1040,
 * 900px) — números medidos para uma barra que não existe mais. Com os
 * grupos e o menu do avatar ela é bem mais curta, e quem decide o que some é
 * o encaixe MEDIDO (MenuBar.js, fit-1…fit-4, regras no fim deste arquivo):
 * os rótulos só saem quando de fato não cabem.
 */

/* ---------------------------------------------------------------- panels */

/* ---------------------------------------------------------------- colunas */

/*
 * As duas colunas laterais. Painéis ancorados são filhos flex de uma coluna,
 * então empilham sem chance de sobreposição — a garantia é do layout, não de
 * coordenadas calculadas. `top` deixa a barra flutuante livre no topo.
 */
.rail {
  position: fixed;
  /*
   * A base da barra de menu, medida em tempo real e publicada pelo MenuBar.
   * Já foi constante (76px), e era errado: num iPhone com Dynamic Island a
   * barra desce 59px de safe-area e termina perto de 103px — o painel abria
   * por baixo dela. Nenhuma constante acerta isso, porque a altura muda com
   * o recorte do aparelho, com o tema e com a fonte do sistema. O 76px
   * continua só como reserva para o instante antes da primeira medição.
   */
  top: var(--rail-top, 76px);
  bottom: 34px;
  width: 316px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px;
  scrollbar-width: thin;
  /* a coluna não intercepta cliques no vídeo; só os painéis dentro dela */
  pointer-events: none;
}
.rail > * { pointer-events: auto; }

/*
 * Posição, largura, topo e base de cada coluna vêm do organizador
 * (js/layout/organizador.js) como estilo inline: quantas colunas cabem
 * depende da janela, da Via e da área mínima do vídeo — não dá para
 * acertar isso com media queries fixas (antes, abaixo de 1600 px, duas
 * colunas dividiam o mesmo x e uma cobria a outra).
 */

.panel {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .6);
  overflow: hidden;
}

.panel.docked {
  position: relative;
  width: 100%;
  /*
   * `0 0 auto`, e não `0 1 auto`.
   *
   * Com shrink habilitado o flex espremia os painéis para caber na coluna, e
   * o último ficava cortado no meio de um item — foi o que aconteceu com o
   * de Modelos, que perdia o YOLOX-S embaixo. Agora cada painel mantém a
   * altura do conteúdo (até o teto abaixo) e quem rola é a COLUNA.
   */
  flex: 0 0 auto;
  min-height: 0;
  /* teto por painel: um catálogo longo não pode tomar a coluna inteira */
  max-height: 62vh;
}
/*
 * …e o organizador troca para `0 1 auto` (bloco ORGANIZADOR no fim): agora o
 * corpo do painel é que rola, com o cabeçalho fixo, então encolher não corta
 * mais item nenhum — só põe a barra de rolagem no corpo.
 */

.panel.floating {
  position: fixed;
  max-height: calc(100vh - 120px);
}
.panel.dragging { box-shadow: 0 30px 70px rgba(0,0,0,.75); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(255,255,255,.03);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.panel.dragging .panel-head { cursor: grabbing; }

.panel-title { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.panel-title b { font-size: 12.5px; font-weight: 650; letter-spacing: .2px; }
.panel-title em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

.panel-x {
  flex: none;
  width: 22px; height: 22px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-3);
  cursor: pointer; font-size: 11px;
}
.panel-x:hover { background: rgba(255,255,255,.09); color: var(--ink); }

.panel-body {
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------- bits */

.hint { margin: 0 0 12px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.hint.tight { margin: 6px 0 12px; }
.hint b { color: var(--ink-2); font-weight: 600; }
.hint code { font-size: 10.5px; color: var(--ink-2); }

.empty {
  margin: 0; padding: 14px 12px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  font-size: 12px; line-height: 1.7; color: var(--ink-3);
  text-align: center;
}
.empty b { color: var(--ink-2); }
.presets { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 10px; }

.sep { height: 1px; margin: 13px 0; background: var(--line-2); }
.row { display: flex; gap: 7px; margin: 9px 0; }
.row > * { flex: 1; }

.btn {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  transition: background .13s, border-color .13s;
}
.btn:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.2); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.accent:hover { filter: brightness(1.09); }
.btn.big { padding: 11px 22px; font-size: 13px; }
.btn.tiny { flex: none; padding: 5px 9px; font-size: 11px; border-radius: 7px; }

.notice, .node-err {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.55;
}
.notice {
  margin-bottom: 11px;
  background: rgba(251, 191, 36, .12);
  border: 1px solid rgba(251, 191, 36, .35);
  color: #fde68a;
}

/*
 * CENTRALIZADO na tela, não no topo.
 *
 * No topo ele nascia atrás da barra de status do celular e do menu do
 * sistema — um aviso como "vídeo salvo · 9,5 MB" aparecia cortado, meio
 * escondido, e a pessoa não sabia se tinha salvado. No centro nada o cobre,
 * e o botão de fechar fica ao alcance do polegar. Cobre parte do vídeo por
 * alguns segundos: é o preço de ser visto, e é exatamente para isso que um
 * aviso existe.
 */
.toast {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  /* acima do menu (300) e dos painéis (120); abaixo só do portão de acesso */
  animation: toast-in .18s ease-out;
  display: flex; align-items: center; gap: 12px;
  max-width: min(620px, calc(100vw - 32px));
  padding: 10px 12px 10px 14px;
  background: rgba(251, 191, 36, .15);
  border: 1px solid rgba(251, 191, 36, .4);
  border-radius: 10px;
  color: #fde68a;
  font-size: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.toast button {
  flex: none;
  width: 20px; height: 20px;
  border: 0; border-radius: 5px;
  background: rgba(0,0,0,.25); color: inherit;
  cursor: pointer; font-size: 10px;
}

.hotkeys {
  position: fixed;
  left: 14px; bottom: 10px;
  z-index: 200;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
  pointer-events: none;
  opacity: .8;
}
.hotkeys b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 1100px) { .hotkeys { display: none; } }

/* ---------------------------------------------------------------- módulos */

.mod {
  margin-bottom: 7px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
}
.mod.ready { border-color: rgba(255,255,255,.12); }
.mod.locked { border-color: rgba(248, 113, 113, .28); }

.mod-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.mod-head:disabled { cursor: default; opacity: .72; }
.mod-head:not(:disabled):hover { background: rgba(255,255,255,.05); }

.mod-id {
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .3px;
}
.mod-name { flex: 1; font-size: 12px; font-weight: 550; }
.mod-caret { flex: none; color: var(--ink-3); font-size: 13px; width: 10px; }

.mod-tag {
  flex: none;
  padding: 2px 6px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9px;
  white-space: nowrap;
}
.mod-tag.ready { background: rgba(74, 222, 128, .14); color: var(--ok); }
.mod-tag.planned { background: rgba(255,255,255,.07); color: var(--ink-3); }
.mod-tag.locked { background: rgba(248, 113, 113, .15); color: var(--err); }

.mod-note {
  padding: 0 10px 10px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-3);
}
.mod-note .blocked {
  display: block;
  margin-top: 7px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(248, 113, 113, .1);
  color: #fca5a5;
  font-weight: 600;
  font-size: 10.5px;
}

.mod-ops { padding: 3px; border-top: 1px solid var(--line-2); }

.op {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 7px 9px;
  border: 0; border-radius: 7px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.op:hover { background: rgba(255, 216, 77, .11); }
.op-label { font-size: 12px; }
.op code { font-size: 9.5px; color: var(--ink-3); }
.op:hover code { color: var(--accent); }
.op-used {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  color: var(--accent);
}

/* ---------------------------------------------------------------- pipeline */

.node {
  margin-bottom: 6px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.node.off { opacity: .48; }
.node.err { border-color: rgba(248, 113, 113, .45); }

.node-head { display: flex; align-items: center; gap: 7px; padding: 7px 8px; }

.node-i {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: rgba(255, 216, 77, .16);
  color: var(--accent);
  font: 700 9.5px/18px var(--mono);
  text-align: center;
}

.node-name {
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  font-weight: 550;
}
.node-name:hover { color: var(--accent); }

.node-acts { display: flex; gap: 1px; }
.node-acts button {
  width: 20px; height: 20px;
  border: 0; border-radius: 5px;
  background: transparent; color: var(--ink-3);
  cursor: pointer; font-size: 10px;
}
.node-acts button:hover:not(:disabled) { background: rgba(255,255,255,.1); color: var(--ink); }
.node-acts button:disabled { opacity: .28; cursor: default; }
.node-acts button.on { color: var(--ok); }

.node-err {
  margin: 0 8px 8px;
  background: rgba(248, 113, 113, .12);
  border: 1px solid rgba(248, 113, 113, .3);
  color: #fca5a5;
}

.node-params { padding: 3px 10px 11px; border-top: 1px solid var(--line-2); }
.node-desc { margin: 9px 0 11px; font-size: 11px; line-height: 1.6; color: var(--ink-3); }
.node-op { display: block; margin-top: 10px; font-size: 9.5px; color: var(--ink-3); }
.no-params { font-size: 11px; color: var(--ink-3); }

/* ---------------------------------------------------------------- controls */

.ctl { display: block; margin-bottom: 11px; }
.ctl-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
  font-size: 11px;
  color: var(--ink-2);
}
.ctl-label b { font-family: var(--mono); font-size: 10.5px; color: var(--accent); font-weight: 600; }

.ctl-text input[type="text"] {
  width: 100%; box-sizing: border-box; margin-top: 4px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.05);
  color: var(--ink); font: inherit; font-size: 12.5px;
}
.ctl-text input[type="text"]:focus { outline: none; border-color: var(--accent); }
.ctl select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-solid);
  font-size: 12px;
}
.ctl select:disabled { opacity: .5; }

.ctl input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 5px 0;
  border-radius: 3px;
  background: rgba(255,255,255,.14);
  appearance: none;
  cursor: pointer;
}
.ctl input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 13px; height: 13px;
  border: 0; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.ctl input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px;
  border: 0; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.ctl-bool {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  font-size: 12px;
  cursor: pointer;
}
.ctl-bool input { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }

/* ---------------------------------------------------------------- stats */

.kpis { display: flex; gap: 6px; margin-bottom: 12px; }
.kpi {
  flex: 1;
  padding: 9px 8px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  text-align: center;
}
.kpi b { display: block; font-family: var(--mono); font-size: 17px; color: var(--ok); font-weight: 600; }
.kpi b.warn { color: var(--warn); }
.kpi em { font-style: normal; font-size: 9px; color: var(--ink-3); }

.metrics { display: flex; flex-direction: column; gap: 4px; }
.metric {
  display: flex;
  justify-content: space-between;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(34, 211, 238, .08);
  font-size: 11.5px;
}
.metric span { color: var(--ink-2); font-family: var(--mono); font-size: 10.5px; }
.metric b { color: var(--cyan); font-family: var(--mono); }

.timing { margin-bottom: 8px; }
.timing-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.timing-top code { font-size: 10.5px; color: var(--ink-2); }
.timing-top b { font-family: var(--mono); font-size: 10.5px; color: var(--ink); }
.timing.err code, .timing.err b { color: var(--err); }
.bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.timing.err .bar i { background: var(--err); }

/* ---------------------------------------------------------------- export */

.json {
  max-height: 260px;
  margin: 11px 0 0;
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.55;
  color: var(--ink-2);
  overflow: auto;
  white-space: pre;
}

/* ---------------------------------------------------------------- a11y */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ---------------------------------------------------------------- modelos */

.ep-row { display: flex; gap: 6px; margin-bottom: 11px; }
.ep {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  text-align: center;
}
.ep.on { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.10); color: var(--ok); }

.mdl {
  margin-bottom: 7px;
  padding: 9px 10px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}
.mdl.ready { border-color: rgba(74,222,128,.28); }
.mdl.error { border-color: rgba(248,113,113,.35); }
.mdl.loading { border-color: rgba(255, 216, 77,.35); }

.mdl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mdl-head b { font-size: 12px; font-weight: 600; }
.mdl-size { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); white-space: nowrap; }

.mdl-meta { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.mdl-meta code { font-size: 9.5px; color: var(--ink-3); }
.mdl-lic {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(34,211,238,.12);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 9px;
}

.mdl-bar { height: 3px; margin-top: 8px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.mdl-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }

.mdl-ok { margin-top: 6px; font-size: 10.5px; color: var(--ok); font-family: var(--mono); }
.mdl-ok b { color: var(--ink-2); }
.mdl-err { margin-top: 6px; font-size: 10.5px; color: var(--err); line-height: 1.5; }

.row.tight { margin: 8px 0 0; }
.row.tight > * { flex: 0 0 auto; }

/* ---------------------------------------------------------------- marca */

.mb-brand strong i {
  font-style: normal;
  color: var(--accent);
  margin: 0 1px;
  font-weight: 400;
}

.idle-card h1 span { color: var(--accent); font-weight: 300; margin: 0 2px; }
.idle-sub {
  margin: -6px 0 16px !important;
  font-family: var(--mono);
  font-size: 10.5px !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ink-3) !important;
}

.mb-btn.alert { color: var(--warn); }
.mb-btn:disabled { opacity: .35; cursor: default; }
.mb-btn:disabled:hover { background: transparent; color: var(--ink-2); }

/* ---------------------------------------------------------------- acesso */

.warn-box {
  margin-bottom: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(251,191,36,.32);
  border-radius: 8px;
  background: rgba(251,191,36,.08);
  font-size: 11px;
  line-height: 1.6;
  color: #fde68a;
}
.warn-box b { display: block; margin-bottom: 3px; color: var(--warn); }

.tabs { display: flex; gap: 3px; margin-bottom: 12px; padding: 3px; border-radius: 9px; background: rgba(0,0,0,.3); }
.tabs button {
  flex: 1;
  padding: 6px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.tabs button:hover:not(:disabled) { color: var(--ink); background: rgba(255,255,255,.05); }
.tabs button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tabs button:disabled { opacity: .3; cursor: default; }
.tabs.sm { margin: 10px 0; }

.txt {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-solid);
  font-size: 12px;
}
.txt:focus { outline: none; border-color: var(--accent); }
.txt.code {
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 8px;
  text-align: center;
  padding: 11px 9px;
}

.consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-2);
  cursor: pointer;
}
.consent input { margin-top: 2px; accent-color: var(--accent); flex: none; width: 15px; height: 15px; }

.cap { margin: 12px 0; }
.cap span { display: block; margin-top: 6px; font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }

.cred-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 216, 77,.32);
  border-radius: 8px;
  background: rgba(255, 216, 77,.07);
}
.cred-box span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .8px; }
.cred-box code.big { font-family: var(--mono); font-size: 22px; letter-spacing: 4px; color: var(--accent); font-weight: 700; }
.cred-box code.wrap { font-family: var(--mono); font-size: 11px; color: var(--accent); word-break: break-all; text-align: right; }

.uri {
  display: block;
  padding: 8px;
  border-radius: 7px;
  background: rgba(0,0,0,.35);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
  word-break: break-all;
  line-height: 1.5;
}

.ident-hit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px;
  margin-bottom: 11px;
  border: 1px solid rgba(74,222,128,.32);
  border-radius: 9px;
  background: rgba(74,222,128,.08);
}
.ident-hit b { font-size: 14px; color: var(--ok); }
.ident-hit span { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }

.sess { padding: 11px; border: 1px solid var(--line-2); border-radius: 9px; background: rgba(255,255,255,.03); }
.sess-who { display: flex; align-items: center; gap: 8px; }
.sess-who b { font-size: 14px; }
.sess-meta { margin-top: 5px; font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }
.sess-meta b { color: var(--ok); }
.sess-meta b.warn { color: var(--warn); }

.badge {
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  background: rgba(255,255,255,.08);
  color: var(--ink-2);
}
.badge.admin { background: rgba(255, 216, 77,.18); color: var(--accent); }
.badge.engineer { background: rgba(34,211,238,.15); color: var(--cyan); }
.badge.viewer { background: rgba(255,255,255,.08); color: var(--ink-3); }

.scopes { display: flex; flex-direction: column; gap: 4px; }
.scope { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.03); }
.scope code { font-size: 10px; color: var(--cyan); }
.scope span { font-size: 10.5px; color: var(--ink-3); }
.scopes.mini { flex-direction: row; flex-wrap: wrap; gap: 3px; margin: 6px 0; }
.scopes.mini code {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(34,211,238,.10);
  color: var(--cyan);
  font-size: 9px;
}

.ident {
  margin-bottom: 9px;
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}
.ident.off { opacity: .5; }
.ident-head { display: flex; justify-content: space-between; align-items: baseline; }
.ident-head b { font-size: 12.5px; }
.ident-n { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }
.ident-meta { margin: 4px 0 9px; font-size: 10px; color: var(--ink-3); line-height: 1.5; }

.btn.danger { border-color: rgba(248,113,113,.35); color: #fca5a5; }
.btn.danger:hover { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.55); }

.confirm {
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(248,113,113,.35);
  border-radius: 7px;
  background: rgba(248,113,113,.08);
  font-size: 11px;
  line-height: 1.55;
  color: #fca5a5;
}

/* sair e "quem está conectado" viraram o avatar com menu (gate.css, «menu do avatar») */

/* tela ociosa: resumo das funcionalidades */
/*
 * O cartão cresceu (10 funcionalidades) e, centrado em 100% da altura,
 * passava por baixo da barra (topo) e dos controles de vídeo (.vctl, ~115px
 * na base). O padding reserva os dois; margin:auto num grid centraliza
 * quando sobra espaço e encosta no topo quando não sobra — com
 * place-items:center o topo transbordado ficava inalcançável na rolagem.
 */
.viewport > .idle {
  overflow: auto;
  place-items: start center;
  padding: calc(var(--rail-top, 76px) + 8px) 16px 150px;
}
.viewport > .idle > .idle-card { margin: auto 0; }
.idle-card { max-width: 520px; }
/* entre 1000 e 1600px os painéis ocupam ~330px de cada lado */
@media (min-width: 1000px) and (max-width: 1600px) {
  .idle-card { max-width: clamp(360px, calc(100vw - 680px), 520px); }
}
/* telas baixas no desktop: sem a grade, o cartão cabe entre barra e controles */
@media (min-width: 1000px) and (max-height: 860px) {
  .idle-card .idle-feats { display: none; }
}
.idle-feats { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; text-align: left; }
.idle-feats li { font-size: 11.5px; line-height: 1.35; color: var(--ink-3); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; }
.idle-feats b { display: block; color: var(--ink); font-size: 12px; margin-bottom: 1px; }
@media (max-width: 520px) {
  .idle-card { padding: 22px 16px; }
  .idle-card h1 { font-size: 26px; }
  .idle-card p { margin-bottom: 14px; }
  /* duas colunas compactas: em uma só o cartão passava de 900px no iPhone */
  .idle-feats { gap: 5px; margin-bottom: 16px; }
  .idle-feats li { font-size: 10.5px; padding: 6px 7px; }
  .idle-feats b { font-size: 11.5px; }
  /* o parágrafo de fontes repete a linha "Fontes" da grade: sai no celular
     para o cartão caber entre a barra e os controles sem rolar */
  .idle-card > p:not(.idle-sub):not(.idle-note) { display: none; }
}

/*
 * Painel ancorado = sem vidro. backdrop-filter dentro de uma coluna que rola
 * (.rail com overflow-y) faz o Chrome/Safari repintar o conteúdo por cima de
 * si mesmo sem limpar: os itens do painel de Modelos apareciam empilhados na
 * mesma linha e o fundo clareava a cada repintura. Fundo sólido + corpo em
 * camada própria resolve; o painel flutuante continua com o vidro.
 */
.panel.docked {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--panel-solid);
}
.panel-body {
  contain: paint;
  transform: translateZ(0);
}

/* barra um pouco menor e com encaixe medido (MenuBar.js: fit-1…fit-3; fit-4 = hambúrguer) */
.menubar { padding: 6px 8px; gap: 2px; max-width: calc(100vw - 16px); }
.mb-btn { padding: 6px 8px; gap: 5px; }
.mb-btn span { font-size: 11.5px; }
/* 1: Análise e Ferramentas/Via só com ícone · 2: todos · 3: sem o "ops" e separadores justos */
.menubar.fit-1 .mb-grp-analise .mb-btn span,
.menubar.fit-1 .mb-grp-assist .mb-btn span,
.menubar.fit-2 .mb-btn span, .menubar.fit-3 .mb-btn span { display: none; }
.menubar.fit-3 .mb-brand em { display: none; }
.menubar.fit-3 .mb-sep { margin: 2px 2px; }

/* presets do Pipeline agrupados por módulo */
.presets-grp { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.presets-t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; text-align: left; }
.presets-g .presets { justify-content: flex-start; margin-top: 0; }
.presets-agpl { font-style: normal; font-family: var(--mono); font-size: 8.5px; color: var(--warn); margin-left: 3px; }
.presets-mais { margin-top: 12px; }
.presets-mais summary { cursor: pointer; font-size: 11.5px; color: var(--ink-3); margin-bottom: 8px; }

/* painel Coisas (YOLOE): fichas da lista, resultados da busca e listas salvas */
.coisas-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 4px; }
.coisa { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 3px 4px 3px 9px; border-radius: 999px; background: rgba(255, 216, 77, .12); border: 1px solid rgba(255, 216, 77, .35); color: var(--ink); }
.coisa button { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 10px; padding: 2px 5px; border-radius: 999px; }
.coisa button:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.coisa.add { cursor: pointer; padding: 3px 10px; background: rgba(255,255,255,.04); border-color: var(--line); color: var(--ink-2); font: inherit; font-size: 11.5px; }
.coisa.add:hover { border-color: var(--accent); color: var(--ink); }
.coisa.fora { background: rgba(248, 113, 113, .10); border-color: rgba(248, 113, 113, .4); }
.coisa.salva { background: rgba(255,255,255,.05); border-color: var(--line); }
.coisa .coisa-nome { color: var(--ink); font-size: 11.5px; padding: 0; }

/*
 * Celular/tablet: sem vidro na barra do topo e nos painéis flutuantes. O fundo
 * já é quase opaco (--panel), o desfoque quase não aparece e custa GPU a cada
 * quadro do vídeo que passa por baixo.
 */
@media (pointer: coarse) {
  .menubar, .panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- painel Fonte: seções recolhíveis ---------- */
.fonte-topo { display: flex; justify-content: flex-end; margin: 2px 0 -4px; }
.fonte-sec { margin-top: 6px; }
.fonte-sec-h {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 8px 0 6px;
  padding: 4px 2px 5px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-3);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-align: left;
  cursor: pointer;
}
.fonte-sec-h:hover { color: var(--ink-2); }
.fonte-sec-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.fonte-sec-seta { width: 10px; font-size: 10px; color: var(--ink-3); }
.fonte-sec-t { flex: 1; }
.fonte-sec-ativa { color: #4ade80; letter-spacing: .06em; font-size: 9px; }
.fonte-sec.ativa .fonte-sec-t { color: var(--ink-2); }
.fonte-sec-c { padding-bottom: 4px; }
/* com o título na seção, a linha do YouTube fica só com o botão Playlists, à direita */
.fonte-sec .ytpl-topo { justify-content: flex-end; }


/* ==========================================================================
   ORGANIZADOR — colunas sem sobreposição, rolagem só no corpo dos painéis
   (js/layout/organizador.js publica --area-*, --via-w e a altura mínima)
   ========================================================================== */

/* nunca rolagem horizontal na página */
html, body { overflow-x: hidden; max-width: 100%; }

/* a coluna não rola: quem rola é o corpo de cada painel (fica como rede de segurança) */
.rail { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }

.panel.docked { flex: 0 1 auto; }
.panel.docked > .panel-head { flex: none; }
.panel.docked > .panel-body,
.panel.floating > .panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.panel.floating { display: flex; }

/* recolhido: só o cabeçalho */
.panel.recolhido { flex: none !important; min-height: 0 !important; max-height: none; }
.panel.recolhido > .panel-body,
.panel.recolhido > .panel-grip { display: none; }
.panel.recolhido > .panel-head { border-bottom: 0; cursor: pointer; }
.panel-rec {
  flex: none;
  width: 22px; height: 22px;
  margin-left: auto;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-3);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.panel-rec:hover { background: rgba(255,255,255,.09); color: var(--ink); }
.panel-rec + .panel-x { margin-left: -6px; }
:root[data-theme="light"] .panel-rec:hover { background: rgba(0,0,0,.06); }

/* celular: acordeão — o painel aberto ocupa o que sobra da coluna */
.rail.celular .panel.docked:not(.recolhido) { flex: 1 1 auto; max-height: none; }
/* com a coluna à vista no celular, as Ferramentas de mouse e a Seção da correia saem (cobririam os painéis) */
.rail.celular ~ :is(.ferr, .bss) { display: none; }

/* barra de vídeo (posição automática): centrada na área livre entre as colunas */
@media (min-width: 1000px) {
  .vctl:not(.moved) {
    left: var(--area-cx, 50%);
    max-width: calc(var(--area-w, 100vw) - 8px);
    min-width: min(330px, calc(var(--area-w, 100vw) - 8px));
  }
  /* área estreita: os botões quebram em duas linhas em vez de vazar por cima das colunas */
  .vctl:not(.moved) .vctl-row { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
}
@media (min-width: 1000px) and (max-width: 1300px) {
  /* janela média: botões mais juntos para a barra caber numa linha só entre as colunas */
  .vctl:not(.moved) { padding-left: 8px; padding-right: 8px; }
  .vctl:not(.moved) .vctl-row { gap: 4px; }
  .vctl:not(.moved) .vctl-zoom { gap: 2px; }
  .vctl:not(.moved) .vctl-zoom .vctl-yt { padding: 0 5px; }
  /* tela inicial (cartão de boas-vindas) também na área livre, ao lado das Ferramentas de mouse */
  .viewport > .idle { left: var(--area-x0, 0px); right: auto; width: var(--area-w, 100%); padding-left: 64px; padding-bottom: 150px; }
  .viewport > .idle > .idle-card { max-width: min(100%, 860px); }
  /* Via numa janela estreita: o organizador encolhe a gaveta para caber uma coluna */
  body .panel.via-gaveta { width: var(--via-w, min(440px, calc(100vw - 28px))); }
}

/* barras de rolagem finas, na cor do tema */
:root { --rolagem: rgba(255,255,255,.16); --rolagem-2: rgba(255,255,255,.28); }
:root[data-theme="light"] { --rolagem: rgba(0,0,0,.20); --rolagem-2: rgba(0,0,0,.34); }
* { scrollbar-width: thin; scrollbar-color: var(--rolagem) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: var(--rolagem); border-radius: 7px; }
::-webkit-scrollbar-thumb:hover { background: var(--rolagem-2); }

/*
 * Até 820 px a Via abre como folha que ocupa a tela (via.css). Enquanto ela
 * está aberta, colunas e widgets saem de cena em vez de ficarem por baixo
 * dela pela metade — fechar a Via traz tudo de volta como estava.
 */
@media (max-width: 820px) {
  body:has(.panel.via-gaveta) :is(.rail, .vctl, .ferr, .bss) { visibility: hidden; }
}

/* celular: a barra de vídeo aberta quebra os botões em duas linhas em vez de vazar pela borda */
@media (max-width: 600px) {
  .vctl .vctl-row { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
}

/* linha de atalhos: uma linha só (quebrada, a segunda linha passava por baixo das colunas) */
.hotkeys { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 28px); }
/* presets: trocar ou somar ao Pipeline */
.presets-modo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.presets-modo .btn.on { background: var(--signal, #FFD84D); color: var(--signal-ink, #1a1a1a); border-color: transparent; }
.presets-modo small { color: var(--ink-3); font-size: 10.5px; }