/* ===========================================================================
   2 · AUTOMAÇÕES (#page-automacoes) — linguagem da TELA 4 do protótipo
   Cards obsidian radius 12 com anel graphite, ícone/tipo colorido por
   natureza, badges neutros, tabela de disparos em carbon.
   =========================================================================== */

[data-theme] #page-automacoes {
  background: var(--ln-void);
}

/* ---- headers (hub e sub-telas) ---- */
[data-theme] #page-automacoes header.glass {
  background: var(--ln-carbon);
  border-bottom: 1px solid var(--ln-graphite);
}
[data-theme] #page-automacoes header .ui-icon-tile,
[data-theme] #page-automacoes #auto-hub .ui-icon-tile {
  background: var(--lx-wash-hover) !important;
  border: 1px solid var(--ln-graphite) !important;
  color: var(--ln-mist) !important;
}
[data-theme] #page-automacoes header span.text-sm.font-semibold,
[data-theme] #page-automacoes #auto-hub span.text-sm.font-semibold {
  color: var(--ln-bone) !important;
}
/* tile azul inline do header WhatsApp -> tinta verde-pulso */
[data-theme] #page-automacoes #auto-pane-wa header div[style*="background:#4d7cff"] {
  background: rgba(var(--lx-green-rgb),0.16) !important;
  color: var(--lx-green-text) !important;
}
[data-theme] #page-automacoes #auto-pane-wa header div[style*="background:#4d7cff"] svg {
  color: var(--lx-green-text) !important;
}
[data-theme] #page-automacoes #auto-hub > p {
  color: var(--ln-fog) !important;
}
[data-theme] #page-automacoes header .form-input {
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  background-color: var(--lx-wash-hover) !important;
  border: 1px solid var(--lx-wash-active) !important;
  color: var(--ln-mist) !important;
  font-size: 13px !important;
}

/* ---- hub: dois canais como cards carbon radius 12 ---- */
[data-theme] #page-automacoes #auto-hub .glass {
  background: var(--ln-carbon) !important;
  border: 1px solid var(--ln-graphite) !important;
  border-radius: 12px !important;
  box-shadow: var(--ln-ring);
  transition: box-shadow 0.12s ease, background 0.12s ease;
}
[data-theme] #page-automacoes #auto-hub .glass:hover,
[data-theme] #page-automacoes #auto-hub .glass:focus-visible {
  background: var(--lx-raised-hover) !important;
  box-shadow: var(--ln-ring-smoke);
}
/* ícone colorido por tipo: Instagram violeta-íris, WhatsApp verde-pulso */
[data-theme] #page-automacoes #auto-hub .glass > div[style*="background:#4d7cff"] {
  border-radius: 12px !important;
}
[data-theme] #page-automacoes #auto-hub > div[style*="grid-template-columns"] > .glass:first-child > div[style*="background:#4d7cff"] {
  background: var(--lx-wash-violet) !important;
}
[data-theme] #page-automacoes #auto-hub > div[style*="grid-template-columns"] > .glass:first-child svg[stroke="#fff"] {
  stroke: var(--lx-violet-text);
}
[data-theme] #page-automacoes #auto-hub > div[style*="grid-template-columns"] > .glass:nth-child(2) > div[style*="background:#4d7cff"] {
  background: rgba(var(--lx-green-rgb),0.16) !important;
}
[data-theme] #page-automacoes #auto-hub > div[style*="grid-template-columns"] > .glass:nth-child(2) svg[fill="#fff"] {
  fill: var(--lx-green-text);
}
[data-theme] #page-automacoes #auto-hub .glass > div:nth-child(2) {
  color: var(--ln-bone) !important;
  font-weight: 600 !important;
}
[data-theme] #page-automacoes #auto-hub .glass > div:nth-child(3) {
  color: var(--ln-fog) !important;
}

/* ---- abas Automações/Disparos ---- */
[data-theme] #page-automacoes .auto-tabs {
  background: var(--lx-wash-hover);
  border-radius: 6px;
  padding: 3px;
}
[data-theme] #page-automacoes .auto-tab {
  border-radius: 6px;
  color: var(--ln-fog);
}
[data-theme] #page-automacoes .auto-tab:hover {
  background: var(--lx-wash-hover);
  color: var(--ln-mist);
}
[data-theme] #page-automacoes .auto-tab.active {
  background: var(--lx-wash-active) !important;
  color: var(--ln-paper) !important;
  font-weight: 600;
  box-shadow: none;
}

/* botões do topo */
[data-theme] #page-automacoes .btn {
  border-radius: 6px;
}
[data-theme] #page-automacoes .btn-primary {
  background: var(--ln-lime);
  border: 1px solid var(--ln-lime);
  color: var(--ln-void) !important;
  font-weight: 600;
}
[data-theme] #page-automacoes .btn-primary:hover {
  background: var(--lx-acid-lime-hi);
  border-color: var(--lx-acid-lime-hi);
  transform: none;
  box-shadow: none;
}
[data-theme] #page-automacoes .btn-secondary {
  background: transparent;
  border: 1px solid var(--ln-graphite);
  color: var(--ln-mist);
}
[data-theme] #page-automacoes .btn-secondary:hover {
  background: var(--lx-wash-hover);
  border-color: var(--ln-smoke);
  color: var(--ln-bone);
}

/* ---- cards de automação (IG .auto-card / WA .ch-card): nós obsidian ---- */
[data-theme] #page-automacoes .auto-card,
[data-theme] #page-automacoes .ch-card {
  background: var(--ln-obsidian) !important;
  border: 1px solid var(--ln-graphite) !important;
  border-radius: 12px !important;
  box-shadow: var(--ln-ring);
  transform: none !important;
  transition: box-shadow 0.12s ease, background 0.12s ease !important;
}
[data-theme] #page-automacoes .auto-card:hover,
[data-theme] #page-automacoes .ch-card:hover {
  background: var(--lx-raised-hover) !important;
  border-color: var(--ln-graphite) !important;
  box-shadow: var(--ln-ring-smoke);
  transform: none !important;
}
[data-theme] #page-automacoes .auto-card.disabled {
  opacity: 0.5 !important;
}
[data-theme] #page-automacoes .auto-name {
  color: var(--ln-bone) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3;
}
/* tipo = badge técnico mono (íris, cor de ação no protótipo) */
[data-theme] #page-automacoes .auto-type-pill {
  background: var(--lx-wash-violet) !important;
  border: 1px solid transparent !important;
  color: var(--lx-violet-text) !important;
  font-family: var(--ln-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px !important;
}
/* toggle = status publicado/pausado: trilha graphite, ativo verde-pulso */
[data-theme] #page-automacoes .auto-toggle {
  background: var(--ln-graphite) !important;
  border: 1px solid var(--ln-smoke) !important;
}
[data-theme] #page-automacoes .auto-toggle.on {
  background: var(--ln-green) !important;
  border-color: var(--ln-green) !important;
  box-shadow: none;
}
[data-theme] #page-automacoes .auto-toggle::after {
  background: var(--ln-mist) !important;
  box-shadow: none !important;
}
[data-theme] #page-automacoes .auto-toggle.on::after {
  background: var(--ln-void) !important;
}
[data-theme] #page-automacoes .auto-meta {
  color: var(--ln-fog) !important;
}
[data-theme] #page-automacoes .auto-meta b {
  color: var(--ln-ash) !important;
  font-family: var(--ln-mono);
}
[data-theme] #page-automacoes .auto-kw {
  background: var(--lx-wash-hover) !important;
  border: 1px solid var(--ln-graphite) !important;
  color: var(--ln-mist) !important;
  font-family: var(--ln-mono) !important;
  border-radius: 4px !important;
}
/* stats do card: números mono tabulares, DMs em verde-pulso contido */
[data-theme] #page-automacoes .auto-card > div[style*="grid-template-columns:repeat(4"] {
  border-top: 1px solid var(--ln-graphite) !important;
}
[data-theme] #page-automacoes .auto-card > div[style*="grid-template-columns:repeat(4"] > div > div:first-child {
  font-family: var(--ln-mono) !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ln-bone) !important;
}
[data-theme] #page-automacoes .auto-card > div[style*="grid-template-columns:repeat(4"] > div:nth-child(2) > div:first-child,
[data-theme] #page-automacoes .auto-card > div[style*="grid-template-columns:repeat(4"] > div:nth-child(4) > div:first-child {
  color: var(--lx-green-text) !important;
}
[data-theme] #page-automacoes .auto-card > div[style*="grid-template-columns:repeat(4"] > div > div:last-child {
  color: var(--ln-ash) !important;
}
[data-theme] #page-automacoes .auto-card > div[style*="font-size:10px"][style*="rgba(255,255,255,0.4)"] {
  color: var(--ln-ash) !important;
  font-family: var(--ln-mono);
}
/* ações do card: botões graphite, perigo coral contido */
[data-theme] #page-automacoes .auto-actions-row .ch-btn {
  border-radius: 6px !important;
  border: 1px solid var(--ln-graphite) !important;
  background: transparent !important;
  color: var(--ln-mist) !important;
}
[data-theme] #page-automacoes .auto-actions-row .ch-btn:hover {
  background: var(--lx-wash-hover) !important;
  border-color: var(--ln-smoke) !important;
  color: var(--ln-bone) !important;
}
[data-theme] #page-automacoes .auto-actions-row .ch-btn.edit[onclick*="openAutoStats"] {
  background: rgba(var(--lx-lime-rgb),0.06) !important;
  border-color: rgba(var(--lx-lime-rgb),0.5) !important;
  color: var(--ln-paper) !important;
}
[data-theme] #page-automacoes .auto-actions-row .ch-btn.edit[onclick*="openAutoStats"]:hover {
  background: rgba(var(--lx-lime-rgb),0.1) !important;
}
[data-theme] #page-automacoes .auto-actions-row .ch-btn.danger {
  background: rgba(var(--lx-coral-rgb),0.1) !important;
  border-color: rgba(var(--lx-coral-rgb),0.28) !important;
  color: var(--lx-coral-text) !important;
}
[data-theme] #page-automacoes .auto-actions-row .ch-btn.danger:hover {
  background: rgba(var(--lx-coral-rgb),0.18) !important;
  border-color: rgba(var(--lx-coral-rgb),0.45) !important;
}

/* ---- cards WhatsApp: texto e switch sem estilo na base ---- */
[data-theme] #page-automacoes #wauto-grid .ch-card > div:first-child > div:first-child > div:first-child {
  color: var(--ln-bone) !important;
}
/* .switch de #page-automacoes é canônico em theme-linear-pages-c-automations.css (~401-438): trilho 22px, knob por transform, cursor:pointer. Definição duplicada removida daqui para não gerar cascata híbrida. */

/* ---- vazios e estados ---- */
[data-theme] #page-automacoes .ch-empty {
  border: 1px dashed var(--ln-graphite) !important;
  border-radius: 12px !important;
  color: var(--ln-fog) !important;
  background: var(--ln-carbon);
}
[data-theme] #page-automacoes .ch-empty b {
  color: var(--ln-mist) !important;
}
[data-theme] #page-automacoes .surface-state {
  background: var(--ln-carbon);
  border: 1px solid var(--ln-graphite);
  border-radius: 12px;
  color: var(--ln-fog);
}

/* ---- aba Disparos: tabela em carbon, datas em mono ---- */
[data-theme] #page-automacoes :is(#auto-tab-runs, #wauto-tab-runs) .igm-block {
  background: var(--ln-carbon) !important;
  border: 1px solid var(--ln-graphite) !important;
  border-radius: 12px !important;
  box-shadow: var(--ln-ring);
}
[data-theme] #page-automacoes :is(#auto-tab-runs, #wauto-tab-runs) .igm-block-title {
  color: var(--ln-bone) !important;
  font-weight: 600 !important;
}
[data-theme] #page-automacoes .igm-table th {
  color: var(--ln-ash) !important;
  font-family: var(--ln-mono);
  font-size: 10px !important;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--ln-graphite) !important;
}
[data-theme] #page-automacoes .igm-table td {
  color: var(--ln-mist) !important;
  border-bottom: 1px solid var(--ln-graphite) !important;
}
[data-theme] #page-automacoes .igm-table tr:hover {
  background: var(--lx-wash-hover) !important;
}
[data-theme] #page-automacoes .igm-table td:first-child,
[data-theme] #page-automacoes .igm-table td:nth-child(4) {
  font-family: var(--ln-mono) !important;
  color: var(--ln-fog) !important;
}
[data-theme] #page-automacoes .auto-success {
  color: var(--lx-green-text) !important;
}
[data-theme] #page-automacoes .auto-fail {
  color: var(--lx-coral-text) !important;
}

/* ---- modais de automação ---- */
[data-theme] #modal-wauto-edit .modal,
[data-theme] #modal-auto-edit .modal,
[data-theme] #modal-auto-stats .modal {
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  border-radius: 12px;
  box-shadow: var(--ln-sh-xl), var(--ln-ring);
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit, #modal-auto-stats) .modal::before {
  display: none;
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit, #modal-auto-stats) .modal-header {
  border-bottom: 1px solid var(--ln-graphite);
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit, #modal-auto-stats) .modal-header h2 {
  color: var(--ln-bone);
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit, #modal-auto-stats) .modal-close {
  color: var(--ln-fog);
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit, #modal-auto-stats) .modal-close:hover {
  color: var(--ln-paper);
  background: var(--lx-wash-hover-2);
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit) .form-group label {
  color: var(--ln-ash);
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit) .form-group small {
  color: var(--ln-ash) !important;
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit) .form-input {
  background-color: var(--lx-wash-hover);
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  color: var(--ln-mist);
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit) .form-input:focus {
  border-color: var(--ln-smoke);
  box-shadow: none;
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit) hr {
  border-color: var(--ln-graphite) !important;
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit) .btn-primary {
  background: var(--ln-lime);
  border: 1px solid var(--ln-lime);
  color: var(--ln-void) !important;
}
[data-theme] :is(#modal-wauto-edit, #modal-auto-edit) .btn-secondary {
  background: transparent;
  border: 1px solid var(--ln-graphite);
  color: var(--ln-mist);
}
[data-theme] #modal-auto-stats .glass-card {
  background: var(--ln-carbon);
  border: 1px solid var(--ln-graphite) !important;
  border-radius: 12px;
  box-shadow: var(--ln-ring);
}

/* ===========================================================================
   3 · EDITOR VISUAL DE AUTOMAÇÃO (#acv) — canvas infinito da TELA 4
   Dot-grid no palco, nós obsidian radius 12, edges smoke, barra de ação
   flutuante no rodapé central, status ativa/pausada como badge.
   (O estilo injetado pelo automation-canvas.js entra DEPOIS desta folha no
   <head>, então cada seletor aqui carrega [data-theme] + #acv para vencer
   por especificidade, sem !important.)
   =========================================================================== */

[data-theme] #acv {
  background: var(--ln-void);
  color: var(--ln-mist);
}
[data-theme] #acv .acv-top {
  background: var(--ln-carbon);
  border-bottom: 1px solid var(--ln-graphite);
}
[data-theme] #acv .acv-title input {
  color: var(--ln-paper);
  font-weight: 600;
}
[data-theme] #acv .acv-sub {
  color: var(--ln-fog);
}
/* badge de status: ponto verde-pulso quando ativa, cinza quando pausada */
[data-theme] #acv .acv-dot {
  background: var(--ln-green);
}
[data-theme] #acv .acv-dot.off {
  background: var(--ln-ash);
}
[data-theme] #acv .acv-status {
  color: var(--ln-fog);
  font-family: var(--ln-mono);
}
[data-theme] #acv .acv-btn {
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  background: transparent;
  color: var(--ln-mist);
}
[data-theme] #acv .acv-btn:hover {
  background: var(--lx-wash-hover);
  border-color: var(--ln-smoke);
  color: var(--ln-bone);
}
[data-theme] #acv .acv-save {
  background: var(--ln-lime);
  border-color: var(--ln-lime);
  color: var(--ln-void);
}
[data-theme] #acv .acv-save:hover {
  background: var(--lx-acid-lime-hi);
  border-color: var(--lx-acid-lime-hi);
}

/* palco: void + dot-grid */
[data-theme] #acv .acv-stage {
  background-color: var(--ln-void);
  background-image: var(--ln-dotgrid);
  background-size: 26px 26px;
}

/* nós obsidian radius 12 */
[data-theme] #acv .acv-node {
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  border-radius: 12px;
  box-shadow: var(--ln-ring), var(--ln-sh-sm);
}
[data-theme] #acv .acv-node:hover {
  box-shadow: var(--ln-ring-smoke), var(--ln-sh-sm);
}
[data-theme] #acv .acv-node.selected {
  border-color: var(--ln-graphite);
  animation: none;
  box-shadow: var(--ln-ring-lime), var(--ln-sh-sm);
}
[data-theme] #acv .acv-node-head {
  border-bottom: 1px solid var(--ln-graphite);
  color: var(--ln-bone);
}
/* ícone do nó: violeta-íris (cor de ação no protótipo) */
[data-theme] #acv .acv-icon {
  background: var(--lx-wash-violet);
  color: var(--lx-violet-text);
  border-radius: 6px;
}
[data-theme] #acv .acv-node-body {
  color: var(--ln-fog);
}
[data-theme] #acv .acv-node-button {
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  background: var(--lx-wash-hover);
  color: var(--ln-mist);
}
[data-theme] #acv .acv-node-button small {
  color: var(--ln-ash);
}

/* edges em smoke; selecionada em acid-lime */
[data-theme] #acv .acv-wire {
  stroke: var(--ln-smoke);
  opacity: 0.9;
  filter: none;
}
[data-theme] #acv .acv-wire.selected {
  stroke: var(--ln-lime);
  filter: none;
}
[data-theme] #acv .acv-wire-label {
  fill: var(--ln-ash);
  stroke: var(--ln-void);
}
[data-theme] #acv .acv-wires marker path {
  fill: var(--ln-smoke);
}

/* portas: carbono com anel smoke */
[data-theme] #acv .acv-port {
  background: var(--ln-carbon);
  border: 1.5px solid var(--ln-smoke);
  box-shadow: none;
}
[data-theme] #acv .acv-port:hover,
[data-theme] #acv .acv-port:focus-visible {
  border-color: var(--ln-lime);
}

/* barra de ação flutuante: rodapé central, pílula obsidian */
[data-theme] #acv .acv-tools {
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  border-radius: 9999px;
  box-shadow: var(--ln-sh-xl), var(--ln-ring);
}
[data-theme] #acv .acv-zoom {
  color: var(--ln-fog);
  font-family: var(--ln-mono);
}
[data-theme] #acv .acv-menu {
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  border-radius: 12px;
  box-shadow: var(--ln-sh-xl), var(--ln-ring);
}
[data-theme] #acv .acv-menu button {
  border-radius: 6px;
  color: var(--ln-mist);
}
[data-theme] #acv .acv-menu button:hover {
  background: var(--lx-wash-hover);
}

/* inspector lateral */
[data-theme] #acv .acv-inspector {
  background: var(--ln-carbon);
  border-left: 1px solid var(--ln-graphite);
}
[data-theme] #acv .acv-inspector h3 {
  color: var(--ln-bone);
}
[data-theme] #acv .acv-inspector > p {
  color: var(--ln-ash);
}
[data-theme] #acv .acv-field {
  color: var(--ln-ash);
}
[data-theme] #acv .acv-field input,
[data-theme] #acv .acv-field textarea,
[data-theme] #acv .acv-field select {
  background: var(--lx-wash-hover);
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  color: var(--ln-mist);
}
[data-theme] #acv .acv-field input:focus,
[data-theme] #acv .acv-field textarea:focus,
[data-theme] #acv .acv-field select:focus {
  border-color: var(--ln-smoke);
}
[data-theme] #acv .acv-check input {
  accent-color: var(--ln-green);
}
[data-theme] #acv .acv-note {
  background: var(--lx-wash-hover);
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  color: var(--ln-ash);
}
[data-theme] #acv .acv-button-editor {
  background: var(--lx-wash-hover);
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
}
[data-theme] #acv .acv-danger {
  border-color: rgba(var(--lx-coral-rgb),0.4);
  color: var(--lx-coral-text);
}
[data-theme] #acv .acv-edge-note {
  border-color: rgba(var(--lx-lime-rgb),0.38);
}

/* ===========================================================================
   4 · FLOW BUILDER (#flow-ov) — canvas de fluxo (mesma linguagem da TELA 4)
   =========================================================================== */

[data-theme] #flow-ov {
  background: var(--ln-void) !important;
}
[data-theme] #flow-ov .fw-top {
  background: var(--ln-carbon) !important;
  border-bottom: 1px solid var(--ln-graphite);
}
[data-theme] #flow-ov .fw-title {
  color: var(--ln-paper);
}
[data-theme] #flow-ov .fw-title small {
  color: var(--ln-ash);
  font-family: var(--ln-mono);
}
[data-theme] #flow-ov #fw-savemsg {
  color: var(--ln-fog) !important;
}
[data-theme] #flow-ov .fw-back {
  background: transparent;
  border: 1px solid var(--ln-graphite);
  color: var(--ln-fog);
  border-radius: 6px;
}
[data-theme] #flow-ov .fw-back:hover {
  background: var(--lx-wash-hover);
  border-color: var(--ln-smoke);
  color: var(--ln-bone);
}
[data-theme] #flow-ov .fw-btn {
  background: transparent;
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  color: var(--ln-mist);
}
[data-theme] #flow-ov .fw-btn:hover {
  background: var(--lx-wash-hover);
  border-color: var(--ln-smoke);
  color: var(--ln-bone);
}
[data-theme] #flow-ov .fw-btn.primary {
  background: var(--ln-lime);
  border: 1px solid var(--ln-lime);
  color: var(--lx-on-lime);
}
[data-theme] #flow-ov .fw-btn.primary:hover {
  background: var(--lx-acid-lime-hi);
  border-color: var(--lx-acid-lime-hi);
}

/* viewport: void + dot-grid */
[data-theme] #flow-ov #fw-vp {
  background: var(--ln-void) !important;
  background-image: var(--ln-dotgrid) !important;
  background-size: 26px 26px !important;
}

/* nós obsidian radius 12 */
[data-theme] #flow-ov .fw-node {
  background: var(--ln-obsidian) !important;
  border: 1px solid var(--ln-graphite);
  border-radius: 12px !important;
  box-shadow: var(--ln-ring), var(--ln-sh-sm);
}
[data-theme] #flow-ov .fw-node:hover {
  box-shadow: var(--ln-ring-smoke), var(--ln-sh-sm);
}
[data-theme] #flow-ov .fw-node.entry {
  border-color: rgba(var(--lx-green-rgb),0.5);
}
[data-theme] #flow-ov .fw-head {
  border-bottom: 1px solid var(--ln-graphite);
}
/* ícone colorido por tipo: WhatsApp verde-pulso, ação violeta-íris */
[data-theme] #flow-ov .ico-wa {
  background: rgba(var(--lx-green-rgb),0.16) !important;
}
[data-theme] #flow-ov .ico-act {
  background: var(--lx-wash-violet) !important;
}
[data-theme] #flow-ov .fw-ttl {
  color: var(--ln-bone);
}
[data-theme] #flow-ov .fw-ttl small {
  color: var(--ln-ash);
  font-family: var(--ln-mono);
}
[data-theme] #flow-ov .fw-del {
  color: var(--ln-ash);
}
[data-theme] #flow-ov .fw-del:hover {
  background: rgba(var(--lx-coral-rgb),0.12);
  color: var(--lx-coral-text);
}
[data-theme] #flow-ov .fw-lbl {
  color: var(--ln-ash);
}
[data-theme] #flow-ov select.fw-in,
[data-theme] #flow-ov input.fw-in,
[data-theme] #flow-ov textarea.fw-in {
  background: var(--lx-wash-hover);
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  color: var(--ln-mist);
}
[data-theme] #flow-ov .fw-in:focus {
  border-color: var(--ln-smoke);
}
[data-theme] #flow-ov .fw-prev {
  background: var(--lx-wash-hover);
  border: 1px solid var(--ln-graphite);
  color: var(--ln-mist);
}
[data-theme] #flow-ov .fw-prev .ft {
  color: var(--ln-ash);
  font-family: var(--ln-mono);
}
[data-theme] #flow-ov .fw-btnrow {
  background: var(--lx-wash-hover);
  border: 1px solid var(--ln-graphite);
  color: var(--ln-mist);
  border-radius: 6px;
}
[data-theme] #flow-ov .fw-btnrow input {
  color: var(--ln-mist);
}
[data-theme] #flow-ov .fw-mini {
  border-color: var(--ln-smoke);
  color: var(--ln-fog);
}
[data-theme] #flow-ov .fw-mini:hover {
  border-color: var(--ln-lime);
  color: var(--ln-lime);
}

/* Conexões em cyan, discretas sobre o canvas escuro. */
[data-theme] #flow-ov #fw-wires path {
  stroke: var(--lx-wire);
}
[data-theme] #flow-ov #fw-wires circle {
  fill: var(--lx-wire);
}

/* portas */
[data-theme] #flow-ov .fw-port {
  background: var(--ln-carbon);
  border: 1.5px solid var(--ln-smoke);
}
[data-theme] #flow-ov .fw-port:hover {
  border-color: var(--ln-lime);
  box-shadow: none;
}
[data-theme] #flow-ov .fw-port.in.hot {
  border-color: var(--ln-green);
  box-shadow: none;
}

/* zoom e dica flutuantes */
[data-theme] #flow-ov .fw-zoom {
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  border-radius: 9999px;
  box-shadow: var(--ln-sh-xl), var(--ln-ring);
}
[data-theme] #flow-ov .fw-zoom button {
  color: var(--ln-fog);
  border-radius: 6px;
}
[data-theme] #flow-ov .fw-zoom button:hover {
  background: var(--lx-wash-hover-2);
  color: var(--ln-bone);
}
[data-theme] #flow-ov .fw-zoom span {
  color: var(--ln-fog);
  font-family: var(--ln-mono);
}
[data-theme] #flow-ov .fw-hint {
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  color: var(--ln-ash);
}

/* painéis de audiência e popovers do fluxo */
[data-theme] #flow-ov #fw-aud-ov {
  background: rgba(8, 9, 10, 0.72) !important;
}
[data-theme] #fw-aud-ov .fw-aud-card,
[data-theme] .fw-pop .fw-pop-card {
  background: var(--ln-obsidian);
  border: 1px solid var(--ln-graphite);
  border-radius: 12px;
  box-shadow: var(--ln-sh-xl), var(--ln-ring);
}
[data-theme] #fw-aud-ov .fw-aud-x,
[data-theme] .fw-pop .fw-pop-x {
  background: transparent;
  border: 1px solid var(--ln-graphite);
  color: var(--ln-fog);
  border-radius: 6px;
}
[data-theme] #fw-aud-ov .fw-aud-x:hover,
[data-theme] .fw-pop .fw-pop-x:hover {
  background: var(--lx-wash-hover-2);
  color: var(--ln-bone);
}
[data-theme] #fw-aud-ov .fw-aud-tabs button {
  background: transparent;
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  color: var(--ln-fog);
}
[data-theme] #fw-aud-ov .fw-aud-tabs button.active {
  background: rgba(var(--lx-lime-rgb),0.06);
  border-color: rgba(var(--lx-lime-rgb),0.5);
  color: var(--ln-paper);
}
[data-theme] #fw-aud-ov .fw-aud-lbl,
[data-theme] .fw-pop .fw-pop-lbl {
  color: var(--ln-ash);
}
[data-theme] #fw-aud-ov select.fw-in {
  background: var(--lx-wash-hover);
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  color: var(--ln-mist);
}
[data-theme] #fw-aud-ov .fw-aud-est {
  color: var(--ln-fog);
}
[data-theme] #fw-aud-ov .fw-aud-est .dot {
  background: var(--ln-green);
}
[data-theme] #fw-aud-ov .fw-aud-est b {
  color: var(--ln-bone);
  font-family: var(--ln-mono);
}
[data-theme] .fw-pop input {
  background: var(--lx-wash-hover);
  border: 1px solid var(--ln-graphite);
  border-radius: 6px;
  color: var(--ln-mist);
}
[data-theme] .fw-pop input:focus {
  border-color: var(--ln-smoke);
  box-shadow: none;
}

/* Broadcast flow canvas · fullscreen, Meta-safe controls and moving connections. */
body.fw-canvas-open {
  overflow: hidden;
}

#flow-ov {
  width: 100dvw;
  height: 100dvh;
  max-width: none;
  overflow: hidden;
}

#flow-ov .fw-top {
  min-width: 0;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

#flow-ov :is(.fw-back, .fw-btn, .fw-zoom button) svg,
#flow-ov :is(.fw-ico, .fw-btn-kind, .bcast-btn-del) svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

#flow-ov .fw-meta-rule {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--line, #d7deea);
  border-radius: 999px;
  color: var(--dim, #64748b);
  font-size: 10px;
  font-weight: 590;
  white-space: nowrap;
}

#flow-ov #fw-savemsg[data-state="error"] {
  color: var(--bad, #dc2626) !important;
}

#flow-ov #fw-savemsg[data-state="success"] {
  color: var(--live, #15803d) !important;
}

#flow-ov .fw-lbl-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

#flow-ov :is(.fw-del, .bcast-btn-del) {
  border: 1px solid transparent;
  background: transparent;
}

#flow-ov .fw-mini {
  width: 100%;
  background: transparent;
}

#flow-ov .fw-mini:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#flow-ov .fw-mini span {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

#flow-ov .fw-meta-help {
  color: var(--mute, #8290a6);
  font-size: 10px;
  line-height: 1.45;
}

#flow-ov #fw-wires .fw-wire-path {
  stroke: var(--lx-wire) !important;
  filter: drop-shadow(0 0 3px rgba(var(--lx-wire-rgb),0.38));
  animation: fw-wire-flow 760ms linear infinite;
  transform: translateZ(0); /* isola o fio em camada própria: o repaint do filtro na animação de dash fica contido, sem invalidar o canvas. Visual idêntico. */
}

#flow-ov #fw-wires :is(.fw-wire-temp, .fw-wire-end) {
  stroke: var(--lx-wire) !important;
  fill: var(--lx-wire) !important;
  filter: drop-shadow(0 0 2px rgba(var(--lx-wire-rgb),0.32));
}

@keyframes fw-wire-flow {
  to { stroke-dashoffset: -17; }
}

[data-theme] #flow-ov .fw-meta-rule {
  border-color: var(--ln-graphite);
  color: var(--ln-ash);
}

@media (max-width: 760px) {
  #flow-ov .fw-meta-rule {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #flow-ov #fw-wires .fw-wire-path {
    animation: none;
  }
}