/* ==========================================================================
   Revisão 2 — design system Dash × Datta aplicado em todas as páginas.
   Carregado depois de parlo.css.
   1) escala maior de texto e controles
   2) Configurar campanha no padrão de blocos do DS
   3) query builder, rádios e botões secundários sem roxo/vermelho cheio
   4) faixa de status do sistema em chips
   5) visão em blocos das tabelas (rowcards.js)
   ========================================================================== */
:root {
    --fs-page-title: 26px;
    --fs-value: 30px;
    --fs-body: 15px;
    --fs-small: 14px;
    --fs-label: 13px;
    --h-control: 40px;
    --h-control-sm: 34px;
}

html body { font-size: var(--fs-body); line-height: 1.5; }
html body small, html body .small, html body .form-text { font-size: var(--fs-label); color: var(--p-muted); }
html body label { color: var(--p-fg); }

/* ---------- menu lateral e cabeçalho ---------- */
html body .app-sidebar .nav-link { min-height: 42px; font-size: var(--fs-body); }
html body .app-sidebar .nav-caption { font-size: 12px; letter-spacing: .06em; }
.app-sidebar svg.lucide { width: 19px; height: 19px; flex-basis: 19px; }
html body .brand-wordmark { font-size: 20px; }
html body .app-sidebar-footer .geo-version { font-size: 12px; }
html body .header-right-info ul.header-right-menu li > a.nav-link { height: var(--h-control); font-size: var(--fs-small); }
.icon-btn { width: var(--h-control); height: var(--h-control); }
.icon-btn svg.lucide { width: 18px; height: 18px; }

/* o cabeçalho fica fixo no topo ao rolar (o sticky precisa estar no contêiner externo) */
html body .header-advance-area { position: sticky; top: 0; z-index: 40; }

/* ---------- botões ---------- */
html body .btn { min-height: var(--h-control); padding-inline: 1.125rem; font-size: var(--fs-small); --bs-btn-font-size: var(--fs-small); }
html body .btn-sm { min-height: var(--h-control-sm); padding-inline: .875rem; font-size: var(--fs-label); }
html body .btn-lg { min-height: 46px; padding-inline: 1.75rem; font-size: var(--fs-body); }
html body .btn i.bi { font-size: 1.05em; }
html body .buttons-block .btn { margin-left: 0 !important; }

/* ações secundárias: botão fantasma do DS */
html body .btn-ghost,
html body .camp-content .btn-primary:not(.btn-lg),
html body .query-builder .btn-success,
html body .query-builder .btn-primary,
html body #share-stats-btn,
html body .stats-toolbar-actions .btn-primary {
    --bs-btn-color: var(--p-fg);
    --bs-btn-bg: var(--p-surface-2);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--p-fg);
    --bs-btn-hover-bg: var(--p-secondary);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--p-fg);
    --bs-btn-active-bg: #303030;
    --bs-btn-disabled-color: var(--p-muted);
    --bs-btn-disabled-bg: var(--p-surface-2);
    background-color: var(--p-surface-2);
    color: var(--p-fg);
    opacity: 1;
}
html body .camp-content .btn-primary:not(.btn-lg)::before,
html body .camp-content .btn-primary:not(.btn-lg)::after,
html body .query-builder .btn-primary::before,
html body .query-builder .btn-primary::after,
html body .stats-toolbar-actions .btn-primary::before,
html body .stats-toolbar-actions .btn-primary::after { display: none; }
html body .camp-content .btn-primary:not(.btn-lg):hover,
html body .query-builder .btn-success:hover,
html body .stats-toolbar-actions .btn-primary:hover { background-color: var(--p-secondary); }

/* barra de ferramentas: ícones neutros, só download em verde */
html body .buttons-block .btn-info { background-color: var(--p-surface-2); color: var(--p-fg); }
html body .buttons-block .btn-info:hover { background-color: var(--p-secondary); }

/* excluir: fantasma com texto vermelho, preenche só no hover */
html body .btn-danger.campaign-icon-btn,
html body .campaign-icon-group > .btn-danger,
html body .query-builder .btn-danger,
html body .stats-toolbar-actions .btn-danger {
    --bs-btn-color: #ff8a8e;
    --bs-btn-bg: rgba(229, 72, 77, .12);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--p-danger);
    background-color: rgba(229, 72, 77, .12);
    color: #ff8a8e;
    min-width: var(--h-control);
}
html body .btn-danger.campaign-icon-btn:hover,
html body .campaign-icon-group > .btn-danger:hover,
html body .query-builder .btn-danger:hover,
html body .stats-toolbar-actions .btn-danger:hover { background-color: var(--p-danger); color: #fff; }

/* ---------- campos ---------- */
html body .form-control,
html body .form-select,
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
html body select {
    min-height: var(--h-control);
    font-size: var(--fs-body);
}
html body .form-control, html body input.form-control { padding-inline: 14px; }
html body textarea.form-control { padding-block: 10px; }

/* rádios e caixas: anel cinza, marcado em branco */
html body .ywb-radios { gap: 6px; }
html body .ywb-radio-label { gap: 10px; color: var(--p-fg); font-size: var(--fs-body); min-height: 32px; margin: 0; }
html body .ywb-radio-label input[type="radio"],
html body .ywb-radio-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--p-border-strong) !important;
    background: var(--p-bg);
}
html body .ywb-radio-label input[type="radio"],
html body .ywb-radio-label input[type="radio"]::after { border-radius: 50% !important; }
html body .ywb-radio-label input:checked { border-color: var(--p-fg) !important; }
html body .ywb-radio-label input:checked::after { background: var(--p-fg) !important; width: 10px !important; height: 10px !important; }
html body .ywb-radio-label input:focus-visible { outline: 2px solid var(--p-ring); outline-offset: 2px; }
html body .ywb-radio-label:hover input:not(:checked):not(:disabled) { border-color: var(--p-muted) !important; }

/* ---------- tabelas ---------- */
html body .tabulator { font-size: var(--fs-small); }
html body .tabulator-row .tabulator-cell,
html body .tabulator .tabulator-footer .tabulator-cell { font-size: var(--fs-small); padding-block: 10px; }
html body .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding-block: 12px; }
html body .tabulator .tabulator-header .tabulator-col-title { font-size: var(--fs-label); font-weight: 500; }
html body .tabulator .tabulator-footer { font-size: var(--fs-label); padding-block: 8px; }
html body .tabulator .tabulator-footer .tabulator-page { min-height: 32px; padding-inline: 10px; }
html body .tabulator .tabulator-footer select { min-height: 32px; }

/* ---------- configurar campanha ---------- */
html body .camp-layout { background: var(--p-surface-1); min-height: calc(100vh - 140px); }
html body .camp-sidebar { width: 248px; min-width: 248px; background: var(--p-surface-1); padding: 16px 12px; top: 74px; height: calc(100vh - 74px); }
html body .camp-name { padding: 8px 12px 16px; font-size: 17px; }
html body .camp-rename-btn { font-size: 14px; }
html body .camp-rename-btn:hover { color: var(--p-fg); }
html body .camp-sidebar ul li a {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin-bottom: 4px;
    padding-block: 9px;
    background: transparent;
    color: var(--p-muted);
    font-size: var(--fs-body);
}
html body .camp-sidebar ul li a:hover { background: var(--p-surface-2); color: var(--p-fg); }
html body .camp-sidebar ul li a.active { background: var(--p-secondary); color: var(--p-fg); }
html body .campaign-nav-icon { width: 18px; margin-right: 12px; font-size: 15px; }
html body .campaign-nav-toggle { color: var(--p-muted); }

html body .camp-content { padding: 8px 40px 0; background: var(--p-bg); }
html body .camp-section { padding-top: 28px; }
html body .campaign-section-heading { margin-bottom: 28px; }
html body .campaign-section-heading h3 { font-size: var(--fs-page-title); font-weight: 500; letter-spacing: -.02em; }
html body .campaign-section-heading h3 .bi { color: var(--p-muted); font-size: 22px; }
html body .campaign-section-heading p { color: var(--p-muted); font-size: var(--fs-body); }

/* cada grupo vira um bloco: título em rótulo pequeno, fundo surface */
html body .flow-group {
    margin-bottom: 16px;
    padding: 20px 24px 12px;
    background: var(--p-surface-1);
}
html body .flow-group-title {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    color: var(--p-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html body .flow-group-title .bi { color: var(--p-muted); font-size: 14px; }
html body .flow-group .form-group-inner { margin-bottom: 12px; }
html body .flow-group .row { align-items: center; row-gap: 8px; }
html body .camp-content label.login2 {
    float: none !important;
    margin: 0;
    padding: 0;
    color: var(--p-fg);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.35;
}
html body .camp-content .form-control,
html body .camp-content .form-select,
html body .camp-content select { background-color: var(--p-surface-2); }
html body .campaign-setting-label, html body .integration-action-label { font-size: var(--fs-body); }
html body .admin-info-icon { color: var(--p-muted); font-size: 14px; cursor: help; }
html body .admin-info-icon:hover { color: var(--p-fg); }
html body .camp-save-bar { position: sticky; bottom: 0; z-index: 5; padding: 16px 0 20px; background: linear-gradient(to top, var(--p-bg) 65%, transparent); }

/* ---------- query builder (filtros) ---------- */
html body .query-builder .rules-group-container { margin: 0; padding: 16px; background: var(--p-surface-2); }
html body .query-builder .rules-group-container .rules-group-container { background: #202020; }
html body .query-builder .rule-container { margin: 8px 0; padding: 8px; background: var(--p-surface-1); }
html body .query-builder .rules-group-header { margin-bottom: 8px; }
html body .query-builder .rules-group-header .group-conditions .btn {
    min-height: var(--h-control-sm);
    padding-inline: 16px;
    background: var(--p-surface-1);
    color: var(--p-muted);
    opacity: 1;
}
html body .query-builder .rules-group-header .group-conditions .btn.active { background: var(--p-fg); color: var(--p-bg); }
html body .query-builder .rules-group-header .group-conditions .btn::before,
html body .query-builder .rules-group-header .group-conditions .btn::after { display: none; }
html body .query-builder .rule-filter-container select,
html body .query-builder .rule-operator-container select,
html body .query-builder .rule-value-container input,
html body .query-builder .rule-value-container select {
    min-height: var(--h-control-sm);
    padding: 0 12px;
    background-color: var(--p-surface-2);
    font-size: var(--fs-small);
}
html body .query-builder .error-container { color: #ff8a8e; }

/* ---------- barra de ferramentas das páginas ---------- */
html body .buttons-block { flex-wrap: wrap; gap: 12px; margin-bottom: 20px !important; }
html body .buttons-block > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html body .buttons-block label { margin: 0; color: var(--p-muted); font-size: 12px; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; }

/* faixa de status do sistema: chips */
/* fica numa linha própria, abaixo dos botões */
html body .buttons-block .buttons-right { margin-left: auto; }
html body .system-status-inline {
    display: flex;
    flex: 1 0 100%;
    order: 10;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: var(--fs-small);
}
html body .system-status-separator { display: none; }
html body .system-status-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: var(--h-control);
    padding: 0 14px;
    background: var(--p-surface-1);
    color: var(--p-muted);
    transition: background-color .2s, color .2s;
}
html body a.system-status-item:hover { background: var(--p-surface-2); }
html body a.system-status-item:hover .system-status-label,
html body a.system-status-item:hover .system-status-value { color: var(--p-fg); }
html body .system-status-item i { color: var(--p-muted); font-size: 16px; }
html body .system-status-label { color: var(--p-muted); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
html body .system-status-value { color: var(--p-fg); font-family: var(--p-mono); font-size: var(--fs-small); font-weight: 500; }
html body .system-status-item.status-ok i { color: var(--p-success); }
html body .system-status-item.status-warning i,
html body .system-status-item.status-warning .system-status-value { color: var(--p-warning); }
html body .system-status-item.status-critical i,
html body .system-status-item.status-critical .system-status-value,
html body .system-status-item.status-unavailable i,
html body .system-status-item.status-unavailable .system-status-value { color: #ff8a8e; }

/* ---------- alternância Blocos / Tabela ---------- */
html body .pa-view-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--p-surface-2); }
html body .pa-view-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--h-control-sm);
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--p-muted);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
html body .pa-view-toggle button:hover { color: var(--p-fg); }
html body .pa-view-toggle button[aria-pressed="true"] { background: var(--p-fg); color: var(--p-bg); }
html body .pa-view-toggle button:focus-visible { outline: 2px solid var(--p-ring); outline-offset: 1px; }
html body .pa-view-toggle svg { width: 16px; height: 16px; }

/* ---------- visão em blocos das tabelas ---------- */
/* no modo blocos a tabela some, mas o rodapé (paginação) fica */
html body .tabulator.is-cards { background: transparent; }
html body .tabulator.is-cards .tabulator-header,
html body .tabulator.is-cards .tabulator-tableholder,
html body .tabulator.is-cards .tabulator-calcs-holder { display: none !important; }
html body .tabulator.is-cards .tabulator-footer { background: var(--p-surface-1); }

/* em blocos a página rola inteira, sem a caixa de rolagem da tabela */
html body .tabulator-scroll-wrapper:has(> .pa-rowcards:not([hidden])) { max-height: none; overflow: visible; }

.pa-rowcards { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.pa-rowcards[hidden] { display: none; }

.pa-rc-kicker {
    margin: 0 0 14px;
    color: var(--p-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pa-rc-totals { padding: 20px 24px; background: var(--p-surface-1); }

.pa-rc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 16px;
}
.pa-rc-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 20px 24px;
    background: var(--p-surface-1);
    transition: background-color .2s, transform .2s cubic-bezier(.2, .8, .2, 1);
    animation: parlo-hero-reveal .45s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 30ms);
}
.pa-rc-card:hover { background: #161616; }
.pa-rc-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pa-rc-index {
    display: inline-grid;
    flex: 0 0 auto;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    place-items: center;
    background: var(--p-surface-2);
    color: var(--p-muted);
    font-family: var(--p-mono);
    font-size: 12px;
}
html body .pa-rc-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--p-fg);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-rc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin: 0;
}
.pa-rc-grid-kpi { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pa-rc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--p-surface-2);
}
.pa-rc-field dt {
    overflow: hidden;
    color: var(--p-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.pa-rc-field dd {
    margin: 0;
    overflow: hidden;
    color: var(--p-fg);
    font-family: var(--p-mono);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pa-rc-grid-kpi .pa-rc-field { padding: 14px 16px; }
.pa-rc-grid-kpi .pa-rc-field dd { font-size: 22px; letter-spacing: -.02em; }
.pa-rc-field dd img { max-height: 18px; vertical-align: middle; }

.pa-rc-children summary {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    background: var(--p-surface-2);
    color: var(--p-muted);
    font-size: var(--fs-label);
    cursor: pointer;
    list-style: none;
}
.pa-rc-children summary::-webkit-details-marker { display: none; }
.pa-rc-children summary::before { content: "+"; margin-right: 8px; font-family: var(--p-mono); }
.pa-rc-children[open] summary::before { content: "−"; }
.pa-rc-children summary:hover { color: var(--p-fg); }
.pa-rc-child { margin-top: 12px; padding-left: 14px; box-shadow: inset 2px 0 0 var(--p-secondary); }
html body .pa-rc-child-title { margin: 0 0 8px; color: var(--p-fg); font-size: var(--fs-small); font-weight: 500; }

.pa-rc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    background: var(--p-surface-1);
    color: var(--p-muted);
    text-align: center;
}
.pa-rc-empty p { margin: 0; }
.pa-rc-empty svg { width: 28px; height: 28px; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
    .pa-rc-card { animation: none; }
}

/* ---------- modal e abas ---------- */
html body .settings-tab-button { font-size: var(--fs-small); min-height: var(--h-control); }
html body .settings-field > span { font-size: var(--fs-body); }
html body .settings-field > small { font-size: var(--fs-label); }

/* ---------- visão geral ---------- */
html body .ov-kpi { min-height: 132px; }

@media (max-width: 1100px) {
    html body .camp-content { padding: 8px 20px 0; }
    html body .camp-sidebar { width: 210px; min-width: 210px; }
}
@media (max-width: 767.98px) {
    html body .system-status-inline { justify-content: flex-start; overflow-x: auto; margin: 0; flex-basis: 100%; order: 5; }
    .pa-rc-card, .pa-rc-totals { padding: 16px; }
}

/* ==========================================================================
   Montserrat em todo o admin (arquivo local em fonts/). Substitui Syne,
   Geist Mono, Open Sans e Roboto. Só os editores de código continuam em
   fonte monoespaçada; os ícones (bootstrap-icons) usam ::before e não mudam.
   ========================================================================== */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/montserrat-latin.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/montserrat-italic-latin.woff2) format("woff2"); }

:root {
    --p-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --p-mono: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --bs-body-font-family: var(--p-font);
    --bs-font-sans-serif: var(--p-font);
}

html body,
html body *:not(.cm-editor):not(.cm-editor *):not(pre):not(pre *):not(code):not(kbd):not(samp):not(#cursor):not(#fake-input):not(.cursor) {
    font-family: var(--p-font) !important;
}
/* números alinhados em tabelas, KPIs e blocos */
html body .tabulator, html body .ov-kpi-value, html body .ov-table,
html body .pa-rc-field dd, html body .system-status-value { font-variant-numeric: tabular-nums; }
/* altura de linha suficiente para acentos e descendentes não serem cortados */
html body label, html body .login2, html body .nav-link, html body .btn, html body .form-control, html body .form-select { line-height: 1.4; }
html body .pa-rc-field dd { line-height: 1.35; padding-bottom: 1px; }

/* Montserrat é mais larga: seletores pequenos ganham largura pelo conteúdo */
html body select.logs-chip-add { width: auto; min-width: 130px; padding-right: 32px; }

/* ==========================================================================
   Configurar campanha: rótulo e controle próximos.
   Em vez de dividir a linha inteira em 12 colunas (rótulo a 1/4 da tela),
   o rótulo tem largura fixa e os controles têm largura máxima.
   ========================================================================== */
@media (min-width: 992px) {
    html body .camp-content .row { --bs-gutter-x: 16px; }
    html body .camp-content .row > [class*="col-lg-"] { flex: 0 1 auto; width: auto; }
    html body .camp-content .row > [class*="col-lg-"]:first-child:has(> label.login2) { flex: 0 0 240px; max-width: 240px; }
    html body .camp-content .row > .col-lg-9,
    html body .camp-content .row > .col-lg-8,
    html body .camp-content .row > .col-lg-7,
    html body .camp-content .row > .col-lg-6 { flex: 1 1 auto; max-width: 560px; }
    html body .camp-content .row > .col-lg-5,
    html body .camp-content .row > .col-lg-4 { flex: 0 1 360px; }
    html body .camp-content .row > .col-lg-3:not(:first-child) { flex: 0 1 280px; }
    html body .camp-content .row > .col-lg-2 { flex: 0 1 200px; }
    html body .camp-content .row > .col-lg-1 { flex: 0 0 auto; }
    /* linhas de liga/desliga: chave logo após o rótulo */
    html body .campaign-setting-row { justify-content: flex-start; gap: 16px; min-height: 48px; }
    html body .campaign-setting-row > :first-child { flex: 0 0 240px; }
    /* "+ Adicionar" alinhado com a coluna dos controles */
    html body .flow-group > .btn,
    html body .flow-group > a.btn { margin-left: 256px; }
}
html body .flow-group .form-group-inner { margin-bottom: 8px; }
html body .flow-group .row { row-gap: 6px; }
html body .flow-group-title { margin-bottom: 14px; }
/* selects soltos no grupo (ex.: Distribuição do fluxo) também não esticam na tela toda */
html body .camp-content .flow-group > select,
html body .camp-content .flow-group > .form-select,
html body .camp-content .flow-group > div > select.form-select:only-child { max-width: 560px; }

/* chave Não/Sim: trilho cinza, "Sim" ligado em branco (sem roxo) */
html body .campaign-switch-track { background: var(--p-surface-2); }
html body .campaign-switch-thumb { background: var(--p-secondary); box-shadow: none; }
html body .campaign-switch-option { font-size: var(--fs-label); font-weight: 600; }
html body .campaign-switch-input:checked + .campaign-switch-track .campaign-switch-thumb { background: var(--p-fg); }
html body .campaign-switch-input:checked + .campaign-switch-track .campaign-switch-option-on { color: var(--p-bg); }
html body .campaign-switch-input:focus-visible + .campaign-switch-track { box-shadow: 0 0 0 2px var(--p-ring); }
html body .campaign-dependent-settings { box-shadow: inset 2px 0 0 var(--p-secondary); }

/* ==========================================================================
   Configurar campanha em blocos (como o quadro de campanhas).
   Cada seção (Domínios, Página segura, Fluxos, Conversões...) é um card
   próprio com tom de cor, brilho suave e os grupos internos como painéis.
   Todos ficam visíveis; o menu da campanha rola até o bloco.
   ========================================================================== */
html body #campsettings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr));
    align-items: start;
    gap: 24px;
    padding-top: 24px;
}
html body #campsettings > :not(.camp-section) { grid-column: 1 / -1; }

html body .camp-section,
html body .camp-section.active {
    position: relative;
    isolation: isolate;
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 24px;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    scroll-margin-top: 96px;
    animation: parlo-hero-reveal .5s cubic-bezier(.2, .8, .2, 1) both;
}
html body .camp-section[hidden] { display: none; }
/* páginas seguras por domínio só existem com o modo "Por domínio" */
html body #campsettings:has(.white-scope-radio[value="true"]:not(:checked)) .dws-section { display: none; }

/* seções largas ocupam a linha inteira */
html body .camp-section.flow-section,
html body .camp-section.step-section { grid-column: 1 / -1; }

/* tom de cada bloco (rodízio sky, indigo, emerald, fuchsia) */
html body .camp-section { --tone: 99 102 241; }
html body .camp-section:nth-of-type(4n+1) { --tone: 14 165 233; }
html body .camp-section:nth-of-type(4n+2) { --tone: 99 102 241; }
html body .camp-section:nth-of-type(4n+3) { --tone: 16 185 129; }
html body .camp-section:nth-of-type(4n)   { --tone: 217 70 239; }

/* tinta diagonal e brilho no canto, como nos cards de campanha */
html body .camp-section::before,
html body .camp-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
html body .camp-section::before {
    inset: 0;
    background: linear-gradient(to bottom right, rgb(var(--tone) / .1), transparent 45%);
}
html body .camp-section::after {
    top: -110px;
    right: -110px;
    width: 300px;
    height: 300px;
    border-radius: 50% !important;
    background: rgb(var(--tone) / .1);
    filter: blur(64px);
}

/* destaque rápido ao chegar pelo menu */
@keyframes camp-flash {
    0% { box-shadow: inset 0 0 0 1px rgb(var(--tone) / .7); }
    100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
}
html body .camp-section.is-flash { animation: camp-flash 1.2s ease-out; }

/* cabeçalho do bloco */
html body .camp-section .campaign-section-heading { margin-bottom: 20px; }
html body .camp-section .campaign-section-heading h3 { font-size: 20px; }
html body .camp-section .campaign-section-heading h3 .bi {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    background: rgb(var(--tone) / .14);
    color: rgb(var(--tone));
    font-size: 17px;
}
html body .camp-section .campaign-section-heading p { font-size: var(--fs-small); }

/* grupos internos = painel de vidro do card */
html body .camp-section .flow-group {
    margin-bottom: 12px;
    padding: 16px 18px 8px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .05), rgba(255, 255, 255, .03));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
html body .camp-section .flow-group:last-child { margin-bottom: 0; }

/* o conteúdo fica sobre fundo translúcido: campos um pouco mais escuros */
html body .camp-section .form-control,
html body .camp-section .form-select,
html body .camp-section select,
html body .camp-section .query-builder .rules-group-container { background-color: rgba(0, 0, 0, .35); }
html body .camp-section .query-builder .rule-container { background: rgba(255, 255, 255, .04); }

/* em blocos, o rótulo pode ser um pouco mais estreito */
@media (min-width: 992px) {
    html body .camp-section .row > [class*="col-lg-"]:first-child:has(> label.login2) { flex-basis: 200px; max-width: 200px; }
    html body .camp-section .campaign-setting-row > :first-child { flex-basis: 200px; }
}

/* menu da campanha fica fixo enquanto os blocos rolam */
html body .camp-layout { background: transparent; align-items: flex-start; }
html body .camp-content { background: transparent; padding-top: 0; }
html body .camp-save-bar { justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
    html body .camp-section, html body .camp-section.is-flash { animation: none; }
}

/* blocos: Página segura (filtros) ocupa a linha toda; a grade preenche os
   espaços vazios com o próximo bloco que couber */
html body #campsettings { grid-auto-flow: row dense; }
html body #sec-safepage, html body .camp-section.dws-section { grid-column: 1 / -1; }

/* dentro do bloco, rótulo + campo dividem a largura sem quebrar linha */
@media (min-width: 992px) {
    html body .camp-section .row:has(> :first-child > label.login2) { flex-wrap: nowrap; }
    html body .camp-section .row > .col-lg-9,
    html body .camp-section .row > .col-lg-8,
    html body .camp-section .row > .col-lg-7,
    html body .camp-section .row > .col-lg-6 { flex: 1 1 0; min-width: 0; max-width: 560px; }
    html body .camp-section .row > .col-lg-5,
    html body .camp-section .row > .col-lg-4 { flex: 1 1 0; min-width: 0; max-width: 360px; }
    html body .camp-section .row > .col-lg-3:not(:first-child) { flex: 1 1 0; min-width: 0; max-width: 280px; }
    html body .camp-section .row > .col-lg-2 { flex: 1 1 0; min-width: 0; max-width: 200px; }
    html body .camp-section .row > .col-lg-1 { flex: 0 0 auto; }
}

/* ==========================================================================
   Menu da campanha em blocos: a lista vertical vira uma faixa de blocos
   no topo (um por seção, com ícone e o tom do bloco correspondente).
   Fica presa logo abaixo do cabeçalho ao rolar.
   ========================================================================== */
html body .camp-layout { flex-direction: column; gap: 0; }
html body .camp-sidebar {
    position: sticky;
    top: 74px;
    z-index: 20;
    width: 100%;
    min-width: 0;
    height: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 16px 0 12px;
    overflow: visible;
    background: rgba(10, 10, 10, .88);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
}
html body .camp-name { padding: 0; font-size: 20px; font-weight: 600; }
html body .camp-sidebar > ul {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
}
html body .camp-sidebar ul li { position: static; }
html body .campaign-nav-toggle { display: none !important; }
/* sem recolher árvore: fluxos e etapas sempre aparecem como blocos */
html body .camp-sidebar .flow-nav-item[hidden],
html body .camp-sidebar .step-nav-item[hidden] { display: block !important; }

html body .camp-sidebar ul li a,
html body .flow-nav-item > a {
    --tone: 99 102 241;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 0;
    padding: 0 16px 0 12px !important;
    background: linear-gradient(to bottom right, rgb(var(--tone) / .1), rgba(255, 255, 255, .03) 60%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    color: rgba(250, 250, 250, .8);
    font-size: var(--fs-small);
    font-weight: 500;
    white-space: nowrap;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, color .2s, background-color .2s;
}
html body .camp-sidebar ul li a:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px rgb(var(--tone) / .45);
    color: var(--p-fg);
}
html body .camp-sidebar ul li a.active {
    background-color: rgb(var(--tone) / .12);
    box-shadow: inset 0 0 0 1px rgb(var(--tone) / .8);
    color: var(--p-fg);
}
html body .camp-sidebar .campaign-nav-icon {
    display: inline-grid;
    width: 28px;
    height: 28px;
    margin: 0;
    place-items: center;
    background: rgb(var(--tone) / .16);
    color: rgb(var(--tone));
    font-size: 14px;
    opacity: 1;
}
/* fluxos, etapas e domínios: blocos menores com marcador */
html body .camp-sidebar .flow-nav-item > a::before,
html body .camp-sidebar .step-nav-item > a::before,
html body .camp-sidebar .dws-nav-item > a::before {
    content: "↳";
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    background: rgb(var(--tone) / .16);
    color: rgb(var(--tone));
    font-size: 13px;
}
html body .camp-sidebar .step-nav-item > a { min-height: 46px; color: var(--p-muted); }
html body .camp-sidebar .step-nav-item > a::before { content: "•"; }

/* tom de cada bloco do menu = tom do bloco de configuração */
html body .camp-sidebar a[href="#sec-domains"]     { --tone: 14 165 233; }
html body .camp-sidebar a[href="#sec-safepage"],
html body .camp-sidebar .dws-nav-item > a          { --tone: 99 102 241; }
html body .camp-sidebar a[href="#sec-flows"],
html body .camp-sidebar .flow-nav-item > a,
html body .camp-sidebar .step-nav-item > a         { --tone: 16 185 129; }
html body .camp-sidebar a[href="#sec-conversions"] { --tone: 217 70 239; }
html body .camp-sidebar a[href="#sec-events"]      { --tone: 245 158 11; }
html body .camp-sidebar a[href="#sec-misc"]        { --tone: 148 163 184; }
html body .camp-sidebar a[href="#sec-postbacks"]   { --tone: 14 165 233; }
html body .camp-sidebar a[href="#sec-api"]         { --tone: 16 185 129; }
html body .camp-sidebar a[href="#sec-scripts"]     { --tone: 217 70 239; }

/* blocos de configuração com o mesmo tom do seu bloco de menu */
html body #sec-domains     { --tone: 14 165 233; }
html body #sec-safepage,
html body .dws-section     { --tone: 99 102 241; }
html body #sec-flows,
html body .flow-section,
html body .step-section    { --tone: 16 185 129; }
html body #sec-conversions { --tone: 217 70 239; }
html body #sec-events      { --tone: 245 158 11; }
html body #sec-misc        { --tone: 148 163 184; }
html body #sec-postbacks   { --tone: 14 165 233; }
html body #sec-api         { --tone: 16 185 129; }
html body #sec-scripts     { --tone: 217 70 239; }

html body .camp-content { width: 100%; padding: 0 0 0; }
html body .camp-section { scroll-margin-top: 180px; }

@media (prefers-reduced-motion: reduce) {
    html body .camp-sidebar ul li a:hover { transform: none; }
}
@media (max-width: 767.98px) {
    html body .camp-sidebar { position: static; }
    html body .camp-sidebar > ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
}
/* faixa do menu com fundo sólido: o conteúdo não aparece por trás ao rolar */
html body .camp-sidebar { background: var(--p-bg); box-shadow: 0 12px 16px -12px rgba(0, 0, 0, .8); }

/* ==========================================================================
   Configurar campanha — padrão final (organizado)
   - grade de 12 colunas com largura máxima: não vira 8 colunas em tela larga
   - blocos na ordem do menu, sem preencher buracos fora de ordem
   - pares lado a lado com a mesma altura
   - uma escala só de texto, campos, botões e espaçamentos dentro dos blocos
   ========================================================================== */
:root {
    --cs-max: 1680px;        /* largura máxima da área de configuração */
    --cs-gap: 20px;          /* espaço entre blocos */
    --cs-pad: 24px;          /* respiro interno do bloco */
    --cs-group-pad: 16px;    /* respiro interno dos grupos */
    --cs-label-w: 200px;     /* coluna dos rótulos */
    --cs-title: 20px;        /* título do bloco */
    --cs-desc: 14px;         /* descrição do bloco */
    --cs-text: 14px;         /* rótulos, campos e botões */
    --cs-help: 13px;         /* textos de ajuda */
    --cs-caption: 12px;      /* título de grupo (caixa alta) */
}

html body .camp-layout { max-width: var(--cs-max); margin-inline: auto; }

html body #campsettings {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: stretch;
    gap: var(--cs-gap);
}
html body #campsettings > .camp-section { grid-column: span 6; }

/* ordem = ordem do menu */
html body #sec-domains     { order: 1;  grid-column: span 4 !important; }
html body #sec-safepage    { order: 2;  grid-column: span 8 !important; }
html body .dws-section     { order: 3;  grid-column: 1 / -1 !important; }
html body #sec-flows       { order: 4;  grid-column: span 4 !important; }
html body #sec-flow-0      { order: 5;  grid-column: span 8 !important; }
html body .flow-section:not(#sec-flow-0) { order: 5; grid-column: 1 / -1 !important; }
html body .step-section    { order: 6;  grid-column: 1 / -1 !important; }
html body #sec-conversions { order: 7;  grid-column: span 6 !important; }
html body #sec-events      { order: 8;  grid-column: span 6 !important; }
html body #sec-misc        { order: 9;  grid-column: span 4 !important; }
html body #sec-postbacks   { order: 10; grid-column: span 8 !important; }
html body #sec-api         { order: 11; grid-column: span 6 !important; }
html body #sec-scripts     { order: 12; grid-column: span 6 !important; }
html body #campsettings > :not(.camp-section) { order: 99; }

/* telas médias: dois por linha iguais; estreitas: um por linha */
@media (max-width: 1399.98px) {
    html body #campsettings > .camp-section { grid-column: span 6 !important; }
    html body #sec-safepage, html body .dws-section, html body .flow-section,
    html body .step-section, html body #sec-postbacks { grid-column: 1 / -1 !important; }
}
@media (max-width: 1099.98px) {
    html body #campsettings > .camp-section { grid-column: 1 / -1 !important; }
}

/* ---------- bloco ---------- */
html body .camp-section,
html body .camp-section.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--cs-pad);
}
html body .camp-section[hidden] { display: none; }
html body .camp-section > * { margin-top: 0; }
html body .camp-section .campaign-section-heading { margin: 0 0 4px; }
html body .camp-section .campaign-section-heading h3 { margin: 0 0 4px; font-size: var(--cs-title); font-weight: 600; line-height: 1.25; }
html body .camp-section .campaign-section-heading h3 .bi { width: 32px; height: 32px; font-size: 16px; }
html body .camp-section > h3, html body .camp-section > h2 { margin: 0 0 4px; font-size: var(--cs-title); font-weight: 600; }
html body .camp-section .campaign-section-heading p { font-size: var(--cs-desc); line-height: 1.45; }

/* ---------- grupo ---------- */
html body .camp-section .flow-group { margin: 0; padding: var(--cs-group-pad) var(--cs-group-pad) 8px; }
html body .camp-section .flow-group-title {
    margin: 0 0 12px;
    font-size: var(--cs-caption);
    line-height: 1.2;
}
html body .camp-section .form-group-inner { margin: 0 0 8px; }
html body .camp-section .form-group-inner:last-child { margin-bottom: 4px; }

/* ---------- texto ---------- */
html body .camp-section,
html body .camp-section p,
html body .camp-section li { font-size: var(--cs-text); }
html body .camp-section label.login2,
html body .camp-section .campaign-setting-label,
html body .camp-section .integration-action-label,
html body .camp-section .ywb-radio-label { font-size: var(--cs-text); font-weight: 500; line-height: 1.4; }
html body .camp-section small,
html body .camp-section .form-text,
html body .camp-section .integration-description,
html body .camp-section .flow-group > p,
html body .camp-section .campaign-setting-help { font-size: var(--cs-help); color: var(--p-muted); line-height: 1.45; }

/* ---------- campos e botões ---------- */
html body .camp-section .form-control,
html body .camp-section .form-select,
html body .camp-section select,
html body .camp-section input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: 40px;
    font-size: var(--cs-text);
}
html body .camp-section .btn { min-height: 38px; font-size: var(--cs-text); }
html body .camp-section .btn-sm { min-height: 32px; font-size: var(--cs-help); }
html body .camp-section .campaign-icon-btn,
html body .camp-section .campaign-icon-group > .btn { width: 40px; min-width: 40px; min-height: 40px; padding: 0; }
/* "+ Adicionar ..." sempre no mesmo lugar: abaixo da lista, alinhado à esquerda */
html body .camp-section .flow-group > .btn,
html body .camp-section .flow-group > a.btn { margin: 4px 0 8px; }
@media (min-width: 992px) {
    html body .flow-group > .btn, html body .flow-group > a.btn { margin-left: 0; }
}

/* ---------- linhas rótulo + controle ---------- */
@media (min-width: 992px) {
    html body .camp-section .row > [class*="col-lg-"]:first-child:has(> label.login2) { flex: 0 0 var(--cs-label-w); max-width: var(--cs-label-w); }
    html body .camp-section .campaign-setting-row > :first-child { flex: 0 0 var(--cs-label-w); }
}
html body .camp-section .campaign-setting-row { min-height: 44px; padding: 4px 0; }
html body .campaign-switch-track { width: 104px; height: 38px; }
html body .campaign-switch-thumb { width: 48px; height: 30px; }
html body .campaign-switch-input:checked + .campaign-switch-track .campaign-switch-thumb { transform: translateX(50px); }

/* ---------- menu de blocos ---------- */
html body .camp-sidebar { padding: 16px 0; gap: 12px 16px; }
html body .camp-name { font-size: var(--cs-title); }
html body .camp-sidebar ul li a,
html body .flow-nav-item > a { min-height: 42px; font-size: var(--cs-text); }
/* lixeira do filtro: só o ícone (o texto "Excluir" fica oculto, como antes) */
html body .camp-section .query-builder [data-delete="rule"],
html body .camp-section .query-builder [data-delete="group"] { width: 40px; min-width: 40px; min-height: 36px; padding: 0; font-size: 0; }

/* ==========================================================================
   Menu de ações da campanha (criado por campeditor.js em todas as páginas).
   Antes os estilos só existiam em index.php e nas outras páginas a lista
   aparecia solta no rodapé. Fica escondido até abrir pelo botão "Ações".
   ========================================================================== */
html body .camp-menu-dropdown {
    display: none;
    position: fixed;
    z-index: 99999;
    min-width: 200px;
    padding: 6px;
    background: var(--p-surface-2);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .55);
    white-space: nowrap;
}
html body .camp-menu-dropdown.show { display: block; }
html body .camp-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 12px;
    color: rgba(250, 250, 250, .85);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
html body .camp-menu-item i { width: 16px; margin: 0; color: var(--p-muted); text-align: center; }
html body .camp-menu-item:hover { background: var(--p-secondary); color: var(--p-fg); }
html body .camp-menu-item:hover i { color: var(--p-fg); }
html body .camp-menu-danger, html body .camp-menu-danger i { color: #ff8a8e; }
html body .camp-menu-danger:hover { background: rgba(229, 72, 77, .16); color: #ffb3b5; }
html body .camp-menu-divider { display: block; height: 1px; margin: 6px 4px; background: rgba(255, 255, 255, .08); }

/* ==========================================================================
   Configurar campanha — um bloco por vez (carrossel).
   O menu de blocos e as setas trocam o bloco; ← → do teclado também.
   Substitui a grade com todos os blocos visíveis.
   ========================================================================== */
html body .camp-layout { max-width: 1280px; }
html body #campsettings { display: block; padding-top: 0; }
html body #campsettings > .camp-section { display: none; }
html body #campsettings > .camp-section.active { display: flex; }
html body #campsettings > .camp-section,
html body .dws-section, html body .flow-section, html body .step-section { grid-column: auto !important; order: 0 !important; }
html body .camp-section { min-height: 420px; padding: 28px 32px; }
html body .camp-section .campaign-section-heading h3 { font-size: 24px; }

/* entrada deslizando na direção da seta */
@keyframes camp-enter-next { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes camp-enter-prev { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
html body .camp-section.is-enter-next { animation: camp-enter-next .32s cubic-bezier(.2, .8, .2, 1) both; }
html body .camp-section.is-enter-prev { animation: camp-enter-prev .32s cubic-bezier(.2, .8, .2, 1) both; }

/* barra de navegação: ← bloco anterior · posição · próximo bloco → */
html body .camp-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin: 4px 0 16px;
}
html body .camp-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 12px;
    max-width: 100%;
    min-height: 48px;
    padding: 0 20px 0 14px;
    border: 0;
    background: var(--p-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    color: var(--p-fg);
    font-size: var(--fs-small);
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s, transform .2s cubic-bezier(.2, .8, .2, 1);
}
html body .camp-pager-btn.is-next { justify-self: end; padding: 0 14px 0 20px; }
html body .camp-pager-btn i {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    background: var(--p-fg);
    color: var(--p-bg);
    font-size: 15px;
}
html body .camp-pager-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .camp-pager-btn:hover:not(:disabled) { background: var(--p-surface-2); }
html body .camp-pager-btn:not(.is-next):hover:not(:disabled) { transform: translateX(-3px); }
html body .camp-pager-btn.is-next:hover:not(:disabled) { transform: translateX(3px); }
html body .camp-pager-btn:focus-visible { outline: 2px solid var(--p-ring); outline-offset: 2px; }
html body .camp-pager-btn:disabled { cursor: default; opacity: .35; }
html body .camp-pager-btn:disabled i { background: var(--p-secondary); color: var(--p-muted); }

html body .camp-pager-info { display: flex; flex-direction: column; align-items: center; gap: 8px; }
html body .camp-pager-count { color: var(--p-muted); font-size: var(--fs-label); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
html body .camp-pager-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; }
html body .camp-pager-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50% !important;
    background: var(--p-secondary);
    cursor: pointer;
    transition: background-color .2s, width .2s;
}
html body .camp-pager-dot:hover { background: var(--p-muted); }
html body .camp-pager-dot.is-current { width: 22px; border-radius: 999px !important; background: var(--p-fg); }

@media (max-width: 767.98px) {
    html body .camp-pager { grid-template-columns: auto 1fr auto; }
    html body .camp-pager-name { display: none; }
    html body .camp-pager-btn, html body .camp-pager-btn.is-next { padding: 0 9px; }
    html body .camp-section { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    html body .camp-section.is-enter-next, html body .camp-section.is-enter-prev { animation: none; }
}

/* ==========================================================================
   Faixa de blocos do menu — padronizada.
   Todos do mesmo tamanho e da mesma cor (neutros). Bloco configurado fica
   verde neon piscando; o bloco aberto ganha contorno branco.
   ========================================================================== */
:root { --neon: 57 255 20; }   /* verde neon #39ff14 */

html body .camp-sidebar > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    width: 100%;
}
html body .camp-sidebar ul li { display: block; min-width: 0; }
html body .camp-sidebar ul li a,
html body .camp-sidebar .flow-nav-item > a,
html body .camp-sidebar .step-nav-item > a,
html body .camp-sidebar .dws-nav-item > a {
    --tone: 161 161 161;
    display: flex;
    width: 100%;
    height: 46px;
    min-height: 46px;
    gap: 10px;
    padding: 0 12px !important;
    overflow: hidden;
    background: var(--p-surface-1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    color: rgba(250, 250, 250, .85);
    font-size: var(--fs-small);
    font-weight: 500;
}
html body .camp-sidebar ul li a > :not(i) { overflow: hidden; text-overflow: ellipsis; }
/* sem marcadores antigos: todos usam a mesma caixa de ícone */
html body .camp-sidebar .flow-nav-item > a::before,
html body .camp-sidebar .step-nav-item > a::before,
html body .camp-sidebar .dws-nav-item > a::before { content: none; display: none; }
html body .camp-sidebar .campaign-nav-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    background: var(--p-secondary);
    color: var(--p-muted);
    font-size: 14px;
}
html body .camp-sidebar ul li a:hover {
    transform: translateY(-2px);
    background: var(--p-surface-2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
    color: var(--p-fg);
}
html body .camp-sidebar ul li a.active {
    background: var(--p-surface-2);
    box-shadow: inset 0 0 0 2px var(--p-fg);
    color: var(--p-fg);
}
html body .camp-sidebar ul li a.active .campaign-nav-icon { background: var(--p-fg); color: var(--p-bg); }

/* configurado: verde neon piscando */
@keyframes neon-blink {
    0%, 100% { box-shadow: inset 0 0 0 1px rgb(var(--neon) / .95), 0 0 14px rgb(var(--neon) / .45); }
    50%      { box-shadow: inset 0 0 0 1px rgb(var(--neon) / .35), 0 0 2px rgb(var(--neon) / .1); }
}
html body .camp-sidebar ul li a.is-configured {
    background: rgb(var(--neon) / .07);
    color: #eaffe4;
    animation: neon-blink 1.6s ease-in-out infinite;
}
html body .camp-sidebar ul li a.is-configured .campaign-nav-icon {
    background: rgb(var(--neon) / .18);
    color: rgb(var(--neon));
}
/* aberto + configurado: contorno branco por dentro, brilho verde por fora */
html body .camp-sidebar ul li a.is-configured.active {
    animation: none;
    box-shadow: inset 0 0 0 2px var(--p-fg), 0 0 14px rgb(var(--neon) / .45);
}
html body .camp-sidebar ul li a.is-configured.active .campaign-nav-icon { background: rgb(var(--neon)); color: #062b00; }

@media (prefers-reduced-motion: reduce) {
    html body .camp-sidebar ul li a.is-configured {
        animation: none;
        box-shadow: inset 0 0 0 1px rgb(var(--neon) / .9), 0 0 10px rgb(var(--neon) / .35);
    }
}
@media (max-width: 767.98px) {
    html body .camp-sidebar > ul { grid-auto-flow: column; grid-auto-columns: 150px; grid-template-columns: none; overflow-x: auto; }
}
html body .camp-sidebar ul li a { opacity: 1 !important; font-size: var(--fs-small) !important; }

/* ==========================================================================
   Configurar campanha — largura total e responsivo (sem centralizar).
   ========================================================================== */
html body .camp-layout { max-width: none; margin-inline: 0; width: 100%; }
html body .camp-content { width: 100%; }

/* faixa de blocos: preenche a largura; quantos couberem por linha */
html body .camp-sidebar > ul { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
html body .camp-sidebar ul li a,
html body .camp-sidebar .flow-nav-item > a,
html body .camp-sidebar .step-nav-item > a,
html body .camp-sidebar .dws-nav-item > a {
    justify-content: flex-start;
    color: rgba(250, 250, 250, .85);
}
html body .camp-sidebar ul li a .campaign-nav-icon { margin: 0 !important; }
/* nome do bloco: corta com "…" em vez de vazar */
html body .camp-sidebar ul li a { white-space: nowrap; text-overflow: ellipsis; }
html body .camp-sidebar ul li.nav-tree-parent > a { padding-left: 12px !important; }

/* barra de setas e Salvar acompanham a largura */
html body .camp-pager { width: 100%; }

@media (max-width: 1099.98px) {
    html body .camp-sidebar > ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    html body .camp-section { padding: 24px; }
}
@media (max-width: 767.98px) {
    html body .camp-sidebar > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
    html body .camp-section { min-height: 0; padding: 18px 14px; }
}
/* anula os recuos e o cinza antigos da árvore (fluxo/etapa/domínio) */
html body .camp-sidebar .camp-sidebar-x, /* âncora de especificidade */
html body .camp-sidebar ul li.safepage-nav-root.has-tree-children > a,
html body .camp-sidebar ul li.flows-nav-root.has-tree-children > a,
html body .camp-sidebar ul li.flow-nav-item.nav-tree-parent > a,
html body .camp-sidebar ul li.dws-nav-item > a,
html body .camp-sidebar ul li.step-nav-item > a { padding: 0 12px !important; font-size: var(--fs-small) !important; }
html body .camp-sidebar ul li.step-nav-item > a { color: rgba(250, 250, 250, .85) !important; }
html body .camp-sidebar ul li.step-nav-item > a.is-configured { color: #eaffe4 !important; }
html body .camp-sidebar ul li.step-nav-item > a:hover { color: var(--p-fg) !important; }

/* ==========================================================================
   Configurar campanha — menu de blocos à direita.
   Conteúdo à esquerda ocupando o espaço; menu vertical fixo à direita, com
   os mesmos blocos padronizados (verde neon = configurado).
   Em telas menores o menu volta para cima, em grade.
   ========================================================================== */
@media (min-width: 1024px) {
    html body .camp-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }
    html body .camp-content { order: 1; flex: 1 1 auto; min-width: 0; }
    html body .camp-sidebar {
        order: 2;
        position: sticky;
        top: 90px;
        flex: 0 0 260px;
        width: 260px;
        max-height: calc(100vh - 110px);
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 14px;
        margin-top: 4px;
        padding: 18px 14px;
        overflow-y: auto;
        background: var(--p-surface-1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html body .camp-name { padding: 0 4px; font-size: 18px; }
    html body .camp-sidebar > ul {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        width: 100%;
        overflow: visible;
    }
    html body .camp-sidebar ul li a:hover { transform: translateX(-3px); }
    /* barra de setas: alinhada ao topo do menu */
    html body .camp-pager { margin-top: 4px; }
}
/* legenda no rodapé do menu */
html body .camp-sidebar::after {
    content: "Verde = configurado";
    display: block;
    padding: 4px 4px 0;
    color: var(--p-muted);
    font-size: 12px;
}
@media (max-width: 1023.98px) {
    html body .camp-layout { flex-direction: column; }
    html body .camp-sidebar { position: static; width: 100%; }
    html body .camp-sidebar::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html body .camp-sidebar ul li a:hover { transform: none; }
}

/* ==========================================================================
   Menu da direita recolhido: só ícones (64px). Abre ao passar o mouse ou ao
   navegar com Tab, por cima do conteúdo, sem empurrar o bloco.
   Só em telas com mouse; em telas de toque continua aberto.
   ========================================================================== */
@media (min-width: 1024px) and (hover: hover) {
    html body .camp-sidebar {
        z-index: 30;
        flex: 0 0 64px;
        width: 64px;
        padding: 14px 8px;
        overflow-x: hidden;
        transition: width .22s cubic-bezier(.2, .8, .2, 1), margin-left .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s;
    }
    html body .camp-sidebar:hover,
    html body .camp-sidebar:has(:focus-visible) {
        width: 260px;
        margin-left: -196px;              /* abre para a esquerda, por cima do conteúdo */
        padding: 14px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), -24px 0 48px rgba(0, 0, 0, .6);
    }
    /* recolhido: só o ícone de cada bloco */
    html body .camp-sidebar ul li a,
    html body .camp-sidebar ul li.safepage-nav-root.has-tree-children > a,
    html body .camp-sidebar ul li.flows-nav-root.has-tree-children > a,
    html body .camp-sidebar ul li.flow-nav-item.nav-tree-parent > a,
    html body .camp-sidebar ul li.dws-nav-item > a,
    html body .camp-sidebar ul li.step-nav-item > a { padding: 0 10px !important; }
    html body .camp-sidebar ul li a:hover { transform: none; }
    html body .camp-name { overflow: hidden; white-space: nowrap; }
    html body .camp-sidebar:not(:hover):not(:has(:focus-visible)) .camp-name { justify-content: center; }
    html body .camp-sidebar:not(:hover):not(:has(:focus-visible)) .camp-name-text,
    html body .camp-sidebar:not(:hover):not(:has(:focus-visible))::after { opacity: 0; }
    html body .camp-sidebar::after { white-space: nowrap; transition: opacity .2s; }
    html body .camp-sidebar .camp-name-text { transition: opacity .2s; }
}
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: reduce) {
    html body .camp-sidebar { transition: none; }
}

/* versão estável: o menu ocupa sempre 64px no layout; só o painel visual
   (fundo + itens) se estende para a esquerda por cima do conteúdo */
@media (min-width: 1024px) and (hover: hover) {
    html body .camp-sidebar,
    html body .camp-sidebar:hover,
    html body .camp-sidebar:has(:focus-visible) {
        flex: 0 0 64px;
        width: 64px;
        margin-left: 0;
        padding: 14px 8px;
        max-height: none;
        overflow: visible;
        background: transparent;
        box-shadow: none;
        transition: none;
    }
    /* fundo do painel */
    html body .camp-sidebar::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        width: 64px;
        background: var(--p-surface-1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
        transition: width .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s;
    }
    html body .camp-sidebar:hover::before,
    html body .camp-sidebar:has(:focus-visible)::before {
        width: 260px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), -24px 0 48px rgba(0, 0, 0, .6);
    }
    /* itens, nome e legenda crescem para a esquerda */
    html body .camp-sidebar > ul,
    html body .camp-sidebar > .camp-name {
        width: 48px;
        margin-left: 0;
        transition: width .22s cubic-bezier(.2, .8, .2, 1), margin-left .22s cubic-bezier(.2, .8, .2, 1);
    }
    html body .camp-sidebar:hover > ul,
    html body .camp-sidebar:hover > .camp-name,
    html body .camp-sidebar:has(:focus-visible) > ul,
    html body .camp-sidebar:has(:focus-visible) > .camp-name {
        width: 232px;
        margin-left: -184px;
    }
    html body .camp-sidebar::after { width: 232px; margin-left: -184px; }
}
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: reduce) {
    html body .camp-sidebar::before, html body .camp-sidebar > ul, html body .camp-sidebar > .camp-name { transition: none; }
}

/* ==========================================================================
   Configurar campanha — paleta do menu principal, sem degradê, e menu da
   direita que EMPURRA o conteúdo (não fica por cima).
   Paleta: fundo #000 · item #111 · hover #1c1c1c · ativo #262626 ·
           texto #a1a1a1 · legenda #6b6b6b · verde neon = configurado.
   ========================================================================== */
:root {
    --m-bg: #000;
    --m-item: #111;
    --m-hover: #1c1c1c;
    --m-active: #262626;
    --m-text: #a1a1a1;
    --m-caption: #6b6b6b;
}

/* ---------- blocos pretos, sem degradê nem brilho ---------- */
html body .camp-section,
html body .camp-section.active {
    background: var(--m-bg);
    box-shadow: none;
}
html body .camp-section::before,
html body .camp-section::after { content: none; display: none; }
html body .camp-section .campaign-section-heading h3 { color: var(--p-fg); }
html body .camp-section .campaign-section-heading h3 .bi { background: var(--m-item); color: var(--m-text); }
html body .camp-section .campaign-section-heading p { color: var(--m-text); }
html body .camp-section .flow-group {
    background: var(--m-item);
    box-shadow: none;
}
html body .camp-section .flow-group-title,
html body .camp-section .flow-group-title .bi { color: var(--m-caption); }
html body .camp-section .form-control,
html body .camp-section .form-select,
html body .camp-section select,
html body .camp-section input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { background-color: var(--m-hover); }
html body .camp-section .query-builder .rules-group-container { background-color: var(--m-bg); }
html body .camp-section .query-builder .rule-container { background: var(--m-item); }
html body .camp-section .btn-ghost,
html body .camp-section .btn-primary:not(.btn-lg),
html body .camp-section .query-builder .btn-success { background-color: var(--m-hover); }
html body .camp-section .btn-primary:not(.btn-lg):hover,
html body .camp-section .query-builder .btn-success:hover { background-color: var(--m-active); }
html body .campaign-switch-track { background: var(--m-hover); }
html body .campaign-switch-thumb { background: var(--m-active); }

/* entrada vertical (combina com a rolagem) */
@keyframes camp-enter-down { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes camp-enter-up   { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
html body .camp-section.is-enter-next { animation: camp-enter-down .3s cubic-bezier(.2, .8, .2, 1) both; }
html body .camp-section.is-enter-prev { animation: camp-enter-up .3s cubic-bezier(.2, .8, .2, 1) both; }

/* ---------- topo: posição e pontos (sem setas) ---------- */
html body .camp-pager { display: flex; justify-content: flex-start; margin: 4px 0 14px; }
html body .camp-pager-info { flex-direction: row; align-items: center; gap: 14px; }
html body .camp-pager-count { color: var(--m-text); }
html body .camp-pager-dot { background: var(--m-active); }
html body .camp-pager-dot:hover { background: var(--m-text); }
html body .camp-pager-dot.is-current { background: var(--p-fg); }

/* ---------- pé: "Role para baixo · próximo: X" ---------- */
html body .camp-next-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin: 0 0 24px;
    border: 0;
    background: var(--m-item);
    color: var(--m-text);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
html body .camp-next-hint[hidden] { display: none; }
html body .camp-next-hint strong { color: var(--p-fg); font-weight: 600; }
html body .camp-next-hint:hover { background: var(--m-hover); color: var(--p-fg); }
html body .camp-next-hint .bi-chevron-down { animation: hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
    html body .camp-next-hint .bi-chevron-down,
    html body .camp-section.is-enter-next, html body .camp-section.is-enter-prev { animation: none; }
}

/* ---------- menu da direita: paleta do menu principal ---------- */
html body .camp-sidebar::before { background: var(--m-bg) !important; box-shadow: none !important; }
html body .camp-sidebar ul li a,
html body .camp-sidebar ul li.step-nav-item > a {
    background: var(--m-item);
    box-shadow: none;
    color: var(--m-text) !important;
}
html body .camp-sidebar .campaign-nav-icon { background: transparent; color: currentColor; }
html body .camp-sidebar ul li a:hover,
html body .camp-sidebar ul li.step-nav-item > a:hover { background: var(--m-hover); box-shadow: none; color: var(--p-fg) !important; }
html body .camp-sidebar ul li a.active,
html body .camp-sidebar ul li.step-nav-item > a.active { background: var(--m-active); box-shadow: none; color: var(--p-fg) !important; }
html body .camp-sidebar ul li a.active .campaign-nav-icon { background: transparent; color: var(--p-fg); }
html body .camp-sidebar::after { color: var(--m-caption); }
/* configurado continua verde neon piscando (por cima da paleta) */
html body .camp-sidebar ul li a.is-configured,
html body .camp-sidebar ul li.step-nav-item > a.is-configured { color: #eaffe4 !important; }
html body .camp-sidebar ul li a.is-configured .campaign-nav-icon { color: rgb(var(--neon)); }
html body .camp-sidebar ul li a.is-configured.active { background: var(--m-active); box-shadow: inset 0 0 0 1px rgb(var(--neon) / .9), 0 0 14px rgb(var(--neon) / .4); }

/* ---------- menu empurra o conteúdo ao abrir (não sobrepõe) ---------- */
@media (min-width: 1024px) and (hover: hover) {
    html body .camp-sidebar,
    html body .camp-sidebar:hover,
    html body .camp-sidebar:has(:focus-visible) {
        margin-left: 0;
        overflow: hidden;
        background: var(--m-bg);
        transition: flex-basis .22s cubic-bezier(.2, .8, .2, 1), width .22s cubic-bezier(.2, .8, .2, 1);
    }
    html body .camp-sidebar { flex: 0 0 64px; width: 64px; padding: 14px 8px; }
    html body .camp-sidebar:hover,
    html body .camp-sidebar:has(:focus-visible) { flex-basis: 260px; width: 260px; padding: 14px 8px; }
    html body .camp-sidebar::before { content: none; display: none; }
    /* itens com largura fixa por dentro: no recolhido só o ícone aparece */
    html body .camp-sidebar > ul,
    html body .camp-sidebar > .camp-name,
    html body .camp-sidebar:hover > ul,
    html body .camp-sidebar:hover > .camp-name,
    html body .camp-sidebar:has(:focus-visible) > ul,
    html body .camp-sidebar:has(:focus-visible) > .camp-name { width: 244px; margin-left: 0; transition: none; }
    html body .camp-sidebar::after { width: 244px; margin-left: 0; }
    html body .camp-sidebar ul li a,
    html body .camp-sidebar ul li.safepage-nav-root.has-tree-children > a,
    html body .camp-sidebar ul li.flows-nav-root.has-tree-children > a,
    html body .camp-sidebar ul li.flow-nav-item.nav-tree-parent > a,
    html body .camp-sidebar ul li.dws-nav-item > a,
    html body .camp-sidebar ul li.step-nav-item > a { padding: 0 10px !important; }
    /* recolhido: o fundo do item ocupa só a coluna do ícone */
    html body .camp-sidebar:not(:hover):not(:has(:focus-visible)) ul li a { width: 48px; }
    html body .camp-sidebar:not(:hover):not(:has(:focus-visible)) .camp-name { width: 48px; justify-content: center; }
}
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: reduce) {
    html body .camp-sidebar { transition: none; }
}

/* ==========================================================================
   Card de campanha (Campanhas) — preto, sem degradê/brilho/contornos,
   na paleta do menu: fundo #000 · painel #111 · linhas #1c1c1c · ativo #262626.
   ========================================================================== */
html body .pa-card { background: var(--m-bg); box-shadow: none; }
html body .pa-card .pa-card-tint,
html body .pa-card .pa-card-glow { display: none; }
html body .pa-card .pa-panel {
    background: var(--m-item);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html body .pa-card .pa-panel-head { color: var(--p-fg); }
html body .pa-card .pa-ic { color: var(--m-text); }
html body .pa-card .pa-live { color: var(--m-text); }
html body .pa-card .pa-row { background: var(--m-hover); box-shadow: none; }
html body .pa-card .pa-row-chip { background: var(--m-active); box-shadow: none; color: var(--m-text); }
html body .pa-card .pa-row-name { color: var(--p-fg); }
html body .pa-card .pa-row-value,
html body .pa-card .pa-row-pct { color: var(--m-text); }
html body .pa-card .pa-row-sub { color: var(--m-caption); }
html body .pa-card .pa-bar { background: var(--m-active); }
html body .pa-card .pa-fill-sky,
html body .pa-card .pa-fill-emerald { background: var(--p-fg); }
html body .pa-card .pa-nav-link { background: var(--m-hover); box-shadow: none; color: var(--m-text); }
html body .pa-card .pa-nav-link:hover { background: var(--m-active); color: var(--p-fg); }
html body .pa-card .pa-pill { background: var(--m-active); box-shadow: none; color: var(--p-fg); }
html body .pa-card .pa-pill:hover { background: #303030; color: var(--p-fg); }
html body .pa-card .pa-icon-btn { background: var(--m-hover); box-shadow: none; color: var(--m-text); }
html body .pa-card .pa-icon-btn:hover { background: var(--m-active); color: var(--p-fg); }
html body .pa-card .pa-card-title a:hover { color: var(--m-text); }
html body .pa-card .pa-card-desc { color: var(--m-text); }

/* seletor da campanha dos atalhos fixos no menu */
html body .app-sidebar .nav-camp-picker { display: block; margin: 0 12px 6px; }
html body .app-sidebar .nav-camp-picker select {
    width: 100%;
    min-height: 38px;
    padding: 0 32px 0 12px;
    background-color: var(--d-sidebar-item, #111);
    color: var(--p-fg);
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
}
html body .app-sidebar .nav-camp-picker select:hover { background-color: var(--d-sidebar-item-hover, #1c1c1c); }
html body .app-sidebar .nav-camp-name {
    margin: 0 12px 6px;
    padding: 0 12px;
    overflow: hidden;
    color: var(--p-fg);
    font-size: var(--fs-small);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* botões só com ícone (lixeira etc.): ícone exatamente no centro */
html body .campaign-icon-btn,
html body .campaign-icon-group > .btn,
html body .query-builder [data-delete="rule"],
html body .query-builder [data-delete="group"],
html body .buttons-right > .btn:not(#resetFilters), html body .stats-toolbar-actions > .btn, html body .buttons-block > div:last-child > .btn:not(#resetFilters):not(#addNewTable) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle;
}
html body .campaign-icon-btn > i,
html body .campaign-icon-group > .btn > i,
html body .buttons-right > .btn > i, html body .stats-toolbar-actions > .btn > i { display: block; margin: 0 !important; line-height: 1; }
html body .campaign-icon-btn > i::before,
html body .campaign-icon-group > .btn > i::before,
html body .buttons-right > .btn > i::before, html body .stats-toolbar-actions > .btn > i::before,
html body .query-builder [data-delete="rule"]::before,
html body .query-builder [data-delete="group"]::before { display: block; line-height: 1; vertical-align: 0 !important; }
/* a lixeira do filtro tem a mesma altura dos campos da linha */
html body .query-builder .rule-actions { display: flex; align-items: center; }
html body .query-builder [data-delete="rule"],
html body .query-builder [data-delete="group"] { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
/* o "x" escondido dentro da lixeira do filtro empurrava o ícone 7px para o lado */
html body .query-builder [data-delete="rule"] > i,
html body .query-builder [data-delete="group"] > i { display: none !important; }
html body .query-builder [data-delete="rule"],
html body .query-builder [data-delete="group"] { gap: 0 !important; }

/* barra de ferramentas: botões só de ícone são quadrados de 40px */
html body .buttons-right > .btn:not(#resetFilters), html body .stats-toolbar-actions > .btn, html body .buttons-block > div:last-child > .btn:not(#resetFilters):not(#addNewTable) {
    width: var(--h-control) !important;
    min-width: var(--h-control) !important;
    height: var(--h-control) !important;
    flex: 0 0 auto;
}
html body .buttons-right > .btn > i, html body .stats-toolbar-actions > .btn > i { font-size: 16px; }
/* "Limpar filtros": fantasma vermelho (o contorno some com a regra "sem linhas") */
html body .btn-outline-danger {
    background-color: rgba(229, 72, 77, .12) !important;
    color: #ff8a8e !important;
}
html body .btn-outline-danger:hover { background-color: var(--p-danger) !important; color: #fff !important; }
html body .btn-outline-success { background-color: rgba(0, 187, 127, .12) !important; }

/* ==========================================================================
   Relatórios (campaignhub.php): um bloco preto por campanha.
   ========================================================================== */
html body .hub-title { display: flex; align-items: center; gap: 12px; }
html body .hub-title svg.lucide { width: 26px; height: 26px; color: var(--m-text); }
html body .hub-desc { margin: 8px 0 0; color: var(--m-text); font-size: var(--fs-small); }

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    gap: 20px;
}
.hub-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 22px 24px;
    background: var(--m-bg);
    animation: parlo-hero-reveal .45s cubic-bezier(.2, .8, .2, 1) both;
}
.hub-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html body .hub-card-title { min-width: 0; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
html body .hub-card-title a { display: block; overflow: hidden; color: var(--p-fg) !important; text-overflow: ellipsis; white-space: nowrap; }
html body .hub-card-title a:hover { color: var(--m-text) !important; }
html body .hub-card-config {
    display: inline-grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    background: var(--m-item);
    color: var(--m-text) !important;
}
html body .hub-card-config:hover { background: var(--m-hover); color: var(--p-fg) !important; }
.hub-card-config svg.lucide { width: 16px; height: 16px; }

.hub-caption {
    display: block;
    margin-bottom: 10px;
    color: var(--m-caption);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* número principal */
.hub-main { padding: 16px 18px; background: var(--m-item); }
html body .hub-big { margin: 0; color: var(--p-fg); font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html body .hub-sub { margin: 6px 0 0; color: var(--m-text); font-size: var(--fs-small); }

/* KPIs (Estatísticas) */
.hub-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.hub-kpis > div { min-width: 0; padding: 12px 14px; background: var(--m-item); }
.hub-kpis dt { color: var(--m-caption); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hub-kpis dd { margin: 4px 0 0; overflow: hidden; color: var(--p-fg); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.hub-kpis dd.is-up { color: #00bb7f; }
.hub-kpis dd.is-down { color: #ff8a8e; }

/* minigráfico */
.hub-chart { padding: 14px 16px 12px; background: var(--m-item); }
.hub-spark { display: block; width: 100%; height: 56px; }
.hub-spark rect { fill: var(--p-fg); }
.hub-spark rect.is-zero { fill: var(--m-active); }

/* listas */
.hub-section { min-width: 0; }
.hub-list, .hub-rows { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hub-list li {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    padding: 0 12px;
    background: var(--m-item);
    font-size: var(--fs-small);
}
.hub-list-label { overflow: hidden; color: var(--p-fg); text-overflow: ellipsis; white-space: nowrap; }
.hub-list-bar { height: 4px; background: var(--m-active); }
.hub-list-bar > span { display: block; height: 100%; background: var(--p-fg); }
.hub-list-n { color: var(--m-text); font-variant-numeric: tabular-nums; }
.hub-rows li {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 0 12px;
    background: var(--m-item);
    font-size: 13px;
}
.hub-rows li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-row-time, .hub-row-extra { color: var(--m-text); }
.hub-row-main { color: var(--p-fg); font-variant-numeric: tabular-nums; }
.hub-row-country { color: var(--m-text); font-weight: 600; }
html body .hub-empty-line { margin: 0; padding: 10px 12px; background: var(--m-item); color: var(--m-caption); font-size: var(--fs-small); }

/* abrir detalhes */
html body .hub-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    margin-top: auto;
    padding: 0 16px;
    background: var(--m-item);
    color: var(--p-fg) !important;
    font-size: var(--fs-small);
    font-weight: 500;
    transition: background-color .2s;
}
html body .hub-open:hover { background: var(--m-hover); }
.hub-open svg.lucide { width: 16px; height: 16px; transition: transform .2s; }
.hub-open:hover svg.lucide { transform: translateX(3px); }

.hub-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 16px; background: var(--m-bg); color: var(--m-text); }
.hub-empty svg.lucide { width: 30px; height: 30px; opacity: .6; }
.hub-empty p { margin: 0; }

@media (max-width: 640px) {
    .hub-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hub-rows li { grid-template-columns: 80px minmax(0, 1fr) 36px; }
    .hub-row-extra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hub-card { animation: none; }
}

/* filtro: campos da regra e lixeira na mesma linha e mesma altura */
html body .query-builder .rule-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
html body .query-builder .rule-container > .rule-header { order: 99; margin-left: auto; float: none; }
html body .query-builder .rule-container > .rule-header .rule-actions { float: none; }
html body .query-builder .rule-container > .error-container:empty,
html body .query-builder .rule-container > .drag-handle:empty { display: none; }
html body .query-builder .rule-container > div { margin: 0 !important; }
html body .query-builder .rule-filter-container select,
html body .query-builder .rule-operator-container select,
html body .query-builder .rule-value-container input,
html body .query-builder .rule-value-container select { height: 36px; min-height: 36px; }

/* botões de texto pequenos nunca cortam o texto */
html body .camp-section .btn-sm,
html body .camp-section .btn { flex-shrink: 0; width: auto; white-space: nowrap; }
html body #add-custom-event, html body #add-conversion-status { padding-inline: 14px; min-width: max-content; }
html body .camp-section .query-builder .rule-container input:not([type="checkbox"]):not([type="radio"]),
html body .camp-section .query-builder .rule-container select { height: 36px !important; min-height: 36px !important; margin: 0 !important; vertical-align: middle; }
html body .query-builder .rule-container > div,
html body .query-builder .rule-container > .rule-header { display: flex; align-items: center; align-self: center; }
html body .query-builder .rule-container > .rule-header .btn-group { display: flex; margin: 0 !important; }
/* aviso de erro da regra só aparece quando a regra tem erro */
html body .query-builder .rule-container:not(.has-error) > .error-container { display: none !important; }

/* relatórios: bloco completo (sem botão de abrir) */
html body .hub-card-title { overflow: hidden; color: var(--p-fg); text-overflow: ellipsis; white-space: nowrap; }
.hub-card-tag { flex: 0 0 auto; padding: 4px 10px; background: var(--m-item); color: var(--m-text); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.hub-kpis { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.hub-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.hub-table-wrap { max-height: 320px; overflow: auto; background: var(--m-item); }
.hub-table-wrap.is-records { max-height: 420px; }
.hub-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.hub-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 36px;
    padding: 0 12px;
    background: var(--m-hover);
    color: var(--m-caption);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.hub-table td { max-width: 220px; height: 36px; padding: 0 12px; overflow: hidden; color: var(--p-fg); text-overflow: ellipsis; white-space: nowrap; }
.hub-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
.hub-table tbody tr:hover td { background: var(--m-hover); }
.hub-table tr.is-zero td { color: var(--m-caption); }
.hub-table .num { text-align: right; }
html body .hub-more {
    width: 100%;
    min-height: 40px;
    margin-top: 6px;
    border: 0;
    background: var(--m-item);
    color: var(--p-fg);
    font-size: var(--fs-small);
    font-weight: 500;
    cursor: pointer;
}
html body .hub-more:hover:not(:disabled) { background: var(--m-hover); }
html body .hub-more[hidden] { display: none; }
/* em Estatísticas e listas, um bloco por linha para caber a tabela */
html body .hub-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 640px), 1fr)); }

/* ==========================================================================
   Configuração principal: Domínios + Página segura + Fluxos + Flow + Etapa
   num bloco só, em 3 passos numerados com texto simples.
   ========================================================================== */
html body .camp-sidebar li.nav-grouped { display: none !important; }
html body #campsettings > .setup-intro { display: none; }
html body #campsettings.is-setup > .setup-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 32px 8px;
    background: var(--m-bg);
}
.setup-intro-text { display: flex; flex-direction: column; gap: 4px; }
html body .setup-intro-text strong { color: var(--p-fg); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.setup-intro-text span { color: var(--m-text); font-size: var(--fs-small); }
.setup-progress { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.setup-progress li {
    padding: 8px 14px;
    background: var(--m-item);
    color: var(--m-text);
    font-size: var(--fs-small);
    font-weight: 600;
}
.setup-progress li.is-done { background: rgb(var(--neon) / .1); box-shadow: inset 0 0 0 1px rgb(var(--neon) / .8); color: #eaffe4; }

/* os passos formam um bloco contínuo */
html body #campsettings.is-setup > .camp-section.active {
    min-height: 0;
    margin: 0;
    padding: 20px 32px 24px;
    animation: none;
}
html body #campsettings.is-setup > .camp-section.active:last-of-type { padding-bottom: 32px; }
/* cabeçalho original da seção some: o passo numerado o substitui */
html body #campsettings.is-setup .camp-section > .campaign-section-heading,
html body #campsettings.is-setup .camp-section > .flow-section-title,
html body #campsettings.is-setup .camp-section > h3:not(.setup-step-head *) { display: none; }
html body #campsettings:not(.is-setup) .setup-step-head { display: none; }

.setup-step-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.setup-num {
    display: inline-grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    background: var(--m-active);
    color: var(--p-fg);
    font-size: 18px;
    font-weight: 700;
    border-radius: 50% !important;
}
.setup-step-text { flex: 1 1 auto; min-width: 0; }
html body .setup-step-text strong { display: block; color: var(--p-fg); font-size: 18px; font-weight: 600; line-height: 1.3; }
html body .setup-step-text p { margin: 4px 0 0; max-width: 760px; color: var(--m-text); font-size: var(--fs-small); line-height: 1.5; }
.setup-status {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: var(--m-item);
    color: #ffb4b6;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
html body .camp-section.is-done .setup-status { background: rgb(var(--neon) / .1); color: rgb(var(--neon)); }
html body .camp-section.is-done .setup-num { background: rgb(var(--neon)); color: #062b00; }
/* sub-passos (cada caminho / destino) recuados sob o passo 3 */
html body #campsettings.is-setup .flow-section .setup-num,
html body #campsettings.is-setup .step-section .setup-num,
html body #campsettings.is-setup .dws-section .setup-num { flex-basis: 32px; width: 32px; height: 32px; font-size: 14px; }
html body #campsettings.is-setup > .flow-section.active,
html body #campsettings.is-setup > .step-section.active,
html body #campsettings.is-setup > .dws-section.active { padding-left: 80px; }
html body #campsettings.is-setup > .step-section.active { padding-left: 128px; }

/* separação discreta entre passos dentro do mesmo bloco */
html body #campsettings.is-setup > #sec-safepage.active,
html body #campsettings.is-setup > #sec-flows.active { box-shadow: inset 0 1px 0 var(--m-active); }

@media (max-width: 767.98px) {
    html body #campsettings.is-setup > .camp-section.active,
    html body #campsettings.is-setup > .flow-section.active,
    html body #campsettings.is-setup > .step-section.active,
    html body #campsettings.is-setup > .dws-section.active { padding: 16px 14px; }
    html body #campsettings.is-setup > .setup-intro { padding: 20px 14px 4px; }
    .setup-status { display: none; }
}

/* ==========================================================================
   Passo 3 simples: "Para onde o visitante vai?" (link ou página).
   Fluxos / Flow / Etapa só aparecem no modo avançado.
   ========================================================================== */
html body #campsettings:not(.is-advanced) > #sec-flows,
html body #campsettings:not(.is-advanced) > .flow-section,
html body #campsettings:not(.is-advanced) > .step-section { display: none !important; }
html body #campsettings:not(.is-setup) > #sec-destination { display: none !important; }
/* no avançado, o passo simples vira só o aviso + botão de voltar */
html body #campsettings.is-advanced #sec-destination .dest-choices,
html body #campsettings.is-advanced #sec-destination .dest-panel { display: none !important; }
html body #campsettings.is-advanced #sec-destination .setup-step-text p { display: none; }

.dest-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
html body .dest-choice {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    min-height: 88px;
    padding: 16px 18px;
    border: 0;
    background: var(--m-item);
    color: var(--p-fg);
    text-align: left;
    cursor: pointer;
    transition: background-color .2s, box-shadow .2s, transform .2s cubic-bezier(.2, .8, .2, 1);
}
html body .dest-choice > i {
    grid-row: 1 / span 2;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    background: var(--m-active);
    color: var(--m-text);
    font-size: 22px;
}
html body .dest-choice strong { font-size: 16px; font-weight: 600; }
html body .dest-choice span { color: var(--m-text); font-size: 13px; line-height: 1.4; }
html body .dest-choice:hover { background: var(--m-hover); transform: translateY(-2px); }
html body .dest-choice:focus-visible { outline: 2px solid var(--p-ring); outline-offset: 2px; }
html body .dest-choice.is-on { background: var(--m-hover); box-shadow: inset 0 0 0 2px var(--p-fg); }
html body .dest-choice.is-on > i { background: var(--p-fg); color: var(--p-bg); }

.dest-panel { margin-top: 16px; padding: 18px; background: var(--m-item); }
.dest-panel[hidden] { display: none; }
html body .dest-label { display: block; margin: 0 0 8px; color: var(--p-fg); font-size: 15px; font-weight: 600; }
html body .dest-panel .dest-url { width: 100%; max-width: 640px; min-height: 48px; font-size: 16px; }
html body .dest-help { display: block; margin-top: 8px; color: var(--m-text); font-size: 13px; }
.dest-folders { display: flex; flex-direction: column; gap: 6px; max-width: 640px; margin: 0 0 12px; padding: 0; list-style: none; }
.dest-folders li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 6px 0 14px;
    background: var(--m-hover);
    color: var(--p-fg);
    font-size: 15px;
}
.dest-folders li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dest-folders li.is-empty { color: var(--m-text); font-size: 14px; }
html body .dest-folder-remove {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--m-text);
    cursor: pointer;
}
html body .dest-folder-remove:hover { background: rgba(229, 72, 77, .16); color: #ff8a8e; }
.dest-actions { display: flex; flex-wrap: wrap; gap: 8px; }

html body .dest-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--m-text);
    font-size: 13px;
    cursor: pointer;
}
html body .dest-advanced-toggle:hover { color: var(--p-fg); text-decoration: underline; }
html body .dest-advanced-toggle[hidden] { display: none; }
html body .dest-complex { margin: 0; padding: 12px 14px; background: var(--m-item); color: var(--m-text); font-size: 14px; }
html body .dest-complex[hidden] { display: none; }
html body .dest-note { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 14px; background: rgba(245, 158, 11, .1); color: #fcd34d; font-size: 14px; }
html body .dest-note[hidden] { display: none; }
html body #campsettings.is-advanced #sec-destination .dest-note { display: none; }

/* ==========================================================================
   Filtro "País": seletor com busca e bandeiras (js/countrypicker.js)
   ========================================================================== */
html body .cpick { position: relative; min-width: 280px; max-width: 520px; }
html body .query-builder .rule-value-container:has(.cpick) { flex: 1 1 320px; }
html body .cpick-box {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 34px 4px 6px;
    background: var(--m-hover, #1c1c1c);
    color: var(--p-fg);
    cursor: pointer;
}
html body .cpick-box:focus-visible { outline: 2px solid var(--p-ring); outline-offset: 1px; }
html body .cpick-caret { position: absolute; top: 18px; right: 12px; transform: translateY(-50%); color: var(--m-text, #a1a1a1); font-size: 12px; pointer-events: none; }
html body .cpick.is-open .cpick-caret { transform: translateY(-50%) rotate(180deg); }
.cpick-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cpick-placeholder { padding: 0 6px; color: var(--m-text, #a1a1a1); font-size: 14px; }
html body .cpick-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 2px 0 6px;
    background: var(--m-active, #262626);
    color: var(--p-fg);
    font-size: 13px;
    white-space: nowrap;
}
html body .cpick-chip.is-invalid { background: rgba(229, 72, 77, .18); color: #ffb3b5; }
html body .cpick-chip.is-invalid > .bi { color: #ff8a8e; }
html body .cpick-remove {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--m-text, #a1a1a1);
    cursor: pointer;
}
html body .cpick-remove:hover { background: rgba(255, 255, 255, .1); color: var(--p-fg); }

.cpick-flag {
    display: inline-grid;
    flex: 0 0 22px;
    width: 22px;
    height: 16px;
    place-items: center;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}
.cpick-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cpick-flag.is-text::before { content: attr(data-code); color: var(--m-text, #a1a1a1); font-size: 9px; font-weight: 700; }

html body .cpick-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    width: max(100%, 300px);
    background: #0b0b0b;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 40px rgba(0, 0, 0, .7);
}
html body .cpick-pop[hidden] { display: none; }
.cpick-search-wrap { position: relative; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .3) !important; }
.cpick-search-wrap > .bi { position: absolute; left: 12px; color: var(--m-text, #a1a1a1); font-size: 13px; pointer-events: none; }
html body .cpick-search {
    width: 100%;
    min-height: 42px !important;
    padding: 0 12px 0 34px !important;
    background: #0b0b0b !important;
    color: var(--p-fg);
    font-size: 15px !important;
}
html body .cpick-search:focus { box-shadow: none !important; }
.cpick-list { max-height: 300px; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; }
html body .cpick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 0 12px;
    color: var(--p-fg);
    font-size: 15px;
    cursor: pointer;
}
.cpick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpick-code { color: var(--m-caption, #6b6b6b); font-size: 12px; font-weight: 600; }
.cpick-check { visibility: hidden; color: rgb(var(--neon, 57 255 20)); }
html body .cpick-item:hover,
html body .cpick-item.is-active { background: #9ec5fe; color: #0b0b0b; }
html body .cpick-item:hover .cpick-code,
html body .cpick-item.is-active .cpick-code { color: #33415c; }
html body .cpick-item.is-on .cpick-check { visibility: visible; }
html body .cpick-item.is-on:hover .cpick-check,
html body .cpick-item.is-on.is-active .cpick-check { color: #0a6b00; }
.cpick-empty { padding: 12px; color: var(--m-text, #a1a1a1); font-size: 14px; }
/* ícone dos itens de Sistema e Dispositivo (no lugar da bandeira) */
.cpick-icon {
    display: inline-grid;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    place-items: center;
    color: var(--m-text, #a1a1a1);
    font-size: 15px;
}
html body .cpick-item:hover .cpick-icon,
html body .cpick-item.is-active .cpick-icon { color: #0b0b0b; }
html body .cpick-chip .cpick-icon { width: 18px; height: 18px; flex-basis: 18px; font-size: 13px; color: var(--p-fg); }
html body .cpick-chip.is-custom { background: var(--m-active, #262626); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
html body .cpick-add .cpick-name { font-style: italic; }

/* ==========================================================================
   Blocos de filtro (js/filterblocks.js): um bloco por tipo, com liga/desliga.
   ========================================================================== */
html body #filtersbuilder[hidden] { display: none !important; }
.fb-panel { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.fb-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.fb-top[hidden] { display: none; }
html body .fb-cond-label { color: var(--m-text, #a1a1a1); font-size: 13px; }
.fb-cond { display: inline-flex; padding: 3px; background: var(--m-item, #111); }
html body .fb-cond button {
    min-height: 30px; padding: 0 12px; border: 0; background: transparent;
    color: var(--m-text, #a1a1a1); font-size: 13px; font-weight: 600; cursor: pointer;
}
html body .fb-cond button.is-on { background: var(--p-fg, #fafafa); color: var(--p-bg, #0a0a0a); }

.fb-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.fb-blocks[hidden] { display: none; }
.fb-block { display: flex; flex-direction: column; background: var(--m-item, #111); }
.fb-block.is-on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.fb-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.fb-ic {
    display: inline-grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center;
    background: var(--m-active, #262626); color: var(--m-text, #a1a1a1); font-size: 15px;
}
.fb-block.is-on .fb-ic { background: var(--p-fg, #fafafa); color: var(--p-bg, #0a0a0a); }
html body .fb-name { color: var(--p-fg, #fafafa); font-size: 15px; font-weight: 600; }
.fb-help { flex: 1 1 100%; order: 5; color: var(--m-caption, #6b6b6b); font-size: 12px; line-height: 1.4; }

.fb-switch { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; cursor: pointer; }
.fb-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-track { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--m-active, #262626); transition: background-color .18s; }
.fb-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #777; transition: transform .18s, background-color .18s; }
.fb-switch input:checked + .fb-track { background: rgb(var(--neon, 57 255 20) / .9); }
.fb-switch input:checked + .fb-track::after { transform: translateX(18px); background: #062b00; }
.fb-switch input:focus-visible + .fb-track { outline: 2px solid var(--p-ring, #737373); outline-offset: 2px; }
html body .fb-state { min-width: 56px; color: var(--m-text, #a1a1a1); font-size: 12px; font-weight: 600; }

.fb-body { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.fb-body[hidden] { display: none; }
.fb-op, .fb-radio { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--m-bg, #0a0a0a); width: fit-content; }
html body .fb-op-btn, html body .fb-radio-btn {
    min-height: 30px; padding: 0 12px; border: 0; background: transparent;
    color: var(--m-text, #a1a1a1); font-size: 13px; font-weight: 600; cursor: pointer;
}
html body .fb-op-btn.is-on, html body .fb-radio-btn.is-on { background: var(--m-active, #262626); color: var(--p-fg, #fafafa); }
.fb-block.fb-needs-value .fb-picker, .fb-block.fb-needs-value .fb-text { box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .6); }
.fb-block.fb-needs-value::after { content: "Escolha ao menos um valor."; padding: 0 14px 12px; color: #ff8a8e; font-size: 12px; }

html body .fb-advanced-toggle {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 0;
    border: 0; background: transparent; color: var(--m-text, #a1a1a1); font-size: 13px; cursor: pointer;
}
html body .fb-advanced-toggle:hover { color: var(--p-fg, #fafafa); text-decoration: underline; }
html body .fb-advanced-note { padding: 10px 12px; background: var(--m-item, #111); color: var(--m-text, #a1a1a1); font-size: 13px; }
html body .fb-advanced-note[hidden] { display: none; }