/* Reserva da Inter: Arial ajustada em métrica com o texto real destas páginas, para a troca
   de fonte não mover a tela. Só aparece enquanto a Inter baixa. O unicode-range é o da Inter
   latina: símbolo fora dela segue para a fonte do sistema, como sempre foi. */
@font-face { font-family: 'Inter Reserva'; font-weight: 100 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); size-adjust: 105.9%; ascent-override: 91.48%; descent-override: 22.78%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Reserva'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); size-adjust: 102.61%; ascent-override: 94.41%; descent-override: 23.51%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      max-width: 100vw;
      overflow-x: hidden !important;
      overscroll-behavior-x: none;
    }
    body {
      min-height: 100vh;
      background: #0d1117;
      font-family: 'Inter', 'Inter Reserva', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: #e6edf3;
      position: relative;
    }
    /* Containers principais não podem extrapolar */
    .main-area, .wrapper, #pricingOverlay, #appHeader, .tab-content {
      max-width: 100%;
      overflow-x: hidden;
    }

    /* ── SIDEBAR ──────────────────────────────── */
    .sidebar {
      width: 230px;
      min-height: 100vh;
      background: #0a0e14;
      border-right: 1px solid #1c2333;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      z-index: 100;
      transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s;
      overflow: hidden;
      box-shadow: 1px 0 8px rgba(0,0,0,0.3);
    }
    .sidebar.collapsed { width: 56px; }

    /* ══════════════════════════════════════════════════════════
       HOVER-TO-EXPAND (modo Discord/Linear)
       Sidebar default = collapsed. Hover = expande overlay.
       Mouse sai = colapsa. Smooth 220ms.
    ══════════════════════════════════════════════════════════ */
    .sidebar.collapsed:hover {
      width: 230px;
      z-index: 200;
      box-shadow: 12px 0 40px -8px rgba(0,0,0,0.55), 1px 0 0 rgba(255,255,255,0.04);
    }
    .sidebar.collapsed:hover .sb-text             { display: inline !important; }
    .sidebar.collapsed:hover .sidebar-label       { display: block !important; }
    .sidebar.collapsed:hover .sidebar-tracker-badge { display: inline-block !important; }
    .sidebar.collapsed:hover .sidebar-user-info   { display: flex !important; }
    .sidebar.collapsed:hover .sidebar-logout      { display: flex !important; }
    /* sb-badge só aparece se TEM .show (notificação real), não como barra vazia */
    .sidebar.collapsed:hover .sb-badge            { display: none !important; }
    .sidebar.collapsed:hover .sb-badge.show       { display: inline-block !important; }
    .sidebar.collapsed:hover .sidebar-logo-icon   { display: flex !important; }
    /* Theme toggle: restaurar font-size + label no hover (sem mexer nos icon wrappers) */
    .sidebar.collapsed:hover .theme-toggle        { font-size: 0.82rem !important; padding: 10px 12px !important; }
    .sidebar.collapsed:hover .theme-toggle-label  { display: inline !important; }
    .sidebar.collapsed:hover .sidebar-logo-compact{ display: none !important; }
    .sidebar.collapsed:hover .sidebar-uncollapse-btn { display: none !important; }

    .sidebar.collapsed:hover .sidebar-logo {
      padding: 22px 18px 20px;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
    }
    .sidebar.collapsed:hover .sidebar-menu {
      padding: 12px 10px;
      gap: 2px;
      align-items: stretch;
    }
    .sidebar.collapsed:hover .sidebar-btn {
      justify-content: flex-start;
      padding: 8px 12px;
      width: auto;
      border-radius: 8px;
    }
    .sidebar.collapsed:hover .sidebar-btn.active { box-shadow: none !important; }
    .sidebar.collapsed:hover .sidebar-footer { padding: 10px 12px 14px; }
    .sidebar.collapsed:hover .sidebar-user {
      justify-content: flex-start;
      padding: 8px 10px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.05);
    }
    .sidebar.collapsed:hover .sidebar-avatar { margin: 0; }

    /* Esconde os toggles antigos (não precisa mais — hover faz tudo) */
    .sidebar-toggle { display: none !important; }
    .sidebar-uncollapse-btn { display: none !important; }

    /* Main area sempre com margem 56px (espaço pro sidebar collapsed)
       Quando hover-expand, sidebar overlay-a sem empurrar conteúdo. */

    /* ── LOGO ── */
    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 22px 18px 20px;
      flex-shrink: 0;
      position: relative;
      border-bottom: 1px solid #30363d;
      margin-bottom: 16px;
    }
    /* Toggle "‹" jogado pra direita longe do logo/badge */
    .sidebar-toggle { margin-left: auto; }
    .sidebar-logo-icon {
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }
    .sidebar-logo-icon svg { height: 22px; width: auto; }
    .sidebar-logo-text { min-width: 0; }
    .sidebar-logo-name {
      font-size: 0.95rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: 0.02em;
      line-height: 1;
    }
    .sidebar-logo-sub {
      font-size: 0.63rem;
      color: #8b949e;
      margin-top: 3px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* ── TOGGLE ── */
    .sidebar-toggle {
      position: absolute;
      top: 26px; right: 12px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 6px;
      color: #8b949e;
      width: 22px; height: 22px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      flex-shrink: 0;
      z-index: 10;
      font-size: 0.72rem;
    }
    .sidebar-toggle:hover { background: rgba(255,255,255,0.18); color: #f0f0f5; border-color: rgba(255,255,255,0.35); }

    /* ── MENU ── */
    .sidebar-menu {
      flex: 1;
      padding: 16px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .sidebar-menu::-webkit-scrollbar { width: 3px; }
    .sidebar-menu::-webkit-scrollbar-track { background: transparent; }
    .sidebar-menu::-webkit-scrollbar-thumb { background: #30363d; border-radius: 99px; }

    /* ── Scrollbar global: escura, fina e discreta ──
       Chrome/Safari/Edge usam ::-webkit-scrollbar (controle total de largura);
       scrollbar-color/width só entram no Firefox — no Chrome ≥121 eles
       DESLIGARIAM o ::-webkit-scrollbar e a barra voltaria a ficar grossa. */
    @supports not selector(::-webkit-scrollbar) {
      html { scrollbar-width: thin; scrollbar-color: #2d333b transparent; }
      body.light { scrollbar-color: #c7ced6 transparent; }
    }
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: #2d333b;
      border-radius: 99px;
      border: 1px solid rgba(255,255,255,0.04);
    }
    ::-webkit-scrollbar-thumb:hover { background: #444c56; }
    ::-webkit-scrollbar-corner { background: transparent; }
    /* Modo claro */
    body.light ::-webkit-scrollbar-thumb { background: #c7ced6; border-color: rgba(0,0,0,0.03); }
    body.light ::-webkit-scrollbar-thumb:hover { background: #a8b2bd; }

    .sidebar-label {
      font-size: 0.6rem;
      font-weight: 700;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 12px 10px 5px;
      white-space: nowrap;
    }
    /* Quando sub inativa: esconde label "Configuração" + tabs internas.
       Seletor casa hover state com mais especificidade que .sidebar.collapsed:hover */
    body.sub-inactive .sidebar.collapsed .sidebar-label[data-section="config"],
    body.sub-inactive .sidebar.collapsed:hover .sidebar-label[data-section="config"],
    body.sub-inactive .sidebar .sidebar-label[data-section="config"] { display: none !important; }
    body.sub-inactive .sidebar .sidebar-btn[data-tab="pixels"],
    body.sub-inactive .sidebar .sidebar-btn[data-tab="logs"],
    body.sub-inactive .sidebar .sidebar-btn[data-tab="webhook"],
    body.sub-inactive .sidebar .sidebar-btn[data-tab="ativar"],
    body.sub-inactive .sidebar .sidebar-btn[data-tab="testar"],
    body.sub-inactive .sidebar .sidebar-btn[data-tab="historico"],
    /* ══ Passo a passo do lead ══ */
    .bsp-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
    .bsp-title{display:flex;align-items:center;gap:9px;font-size:1.02rem;font-weight:800;margin:0 0 4px}
    .bsp-title .pulse{width:8px;height:8px;border-radius:50%;background:#2ea043;animation:leadsPulse 2s infinite}
    .bsp-sub{font-size:0.78rem;color:#8b949e;line-height:1.6;margin:0;max-width:640px}
    .bsp-head-acoes{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .bsp-data{background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:8px 10px;color:#e6edf3;font:inherit;font-size:0.78rem}
    .bsp-x{background:none;border:0;color:#8b949e;font-size:22px;cursor:pointer;line-height:1;padding:0 4px}
    .bsp-x:hover{color:#e6edf3}

    .bsp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
    .bsp-kpi{display:flex;gap:12px;align-items:flex-start;background:#0d1117;border:1px solid #21262d;border-radius:12px;padding:14px;transition:transform .16s,border-color .16s}
    .bsp-kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 45%,#21262d)}
    .bsp-kpi-i{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb,var(--c) 14%,transparent)}
    .bsp-kpi-r{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#8b949e}
    .bsp-kpi-v{font-size:21px;font-weight:800;line-height:1.15;margin:2px 0}
    .bsp-kpi-n{font-size:11px;color:#6e7681;line-height:1.4}

    .bsp-aviso{background:rgba(230,180,80,.1);border:1px solid rgba(230,180,80,.34);border-radius:9px;padding:11px 13px;font-size:0.78rem;line-height:1.6;margin-bottom:16px}
    .bsp-secao{display:flex;align-items:center;gap:12px;font-weight:800;font-size:0.86rem;margin:20px 0 10px}
    .bsp-acoes{margin-left:auto;display:flex;gap:8px;align-items:center}
    .bsp-busca{background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:7px 11px;color:#e6edf3;font:inherit;font-size:0.78rem;min-width:250px}

    .bsp-etapas{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px}
    .bsp-etapa{background:#0d1117;border:1px solid #21262d;border-radius:12px;padding:14px 16px}
    .bsp-etapa-h{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
    .bsp-etapa-h b{font-size:0.88rem}
    .bsp-etapa-h span{font-size:0.73rem;color:#6e7681;margin-left:auto}
    .bsp-cab,.bsp-l{display:grid;grid-template-columns:20px 1fr 92px 96px;gap:8px;align-items:baseline;font-size:0.78rem;padding:3px 0}
    .bsp-cab{font-size:0.68rem;color:#6e7681;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid #21262d;padding-bottom:5px;margin-bottom:3px}
    .bsp-cab span:nth-child(3),.bsp-cab span:nth-child(4){text-align:right}
    .bsp-n{color:#484f58;font-size:0.72rem;font-weight:700}
    .bsp-r{color:#8b949e}
    .bsp-l.forte .bsp-r{color:#e6edf3;font-weight:700}
    .bsp-v,.bsp-p{text-align:right;font-variant-numeric:tabular-nums}
    .bsp-p{color:#6e7681;font-size:0.73rem}
    .bsp-grupo{font-size:0.68rem;font-weight:800;color:#6e7681;letter-spacing:.05em;text-transform:uppercase;margin:9px 0 3px}

    .bsp-motivos{display:grid;gap:8px}
    .bsp-motivo{background:#0d1117;border:1px solid #21262d;border-radius:9px;padding:10px 13px}
    .bsp-motivo-t{display:flex;align-items:baseline;gap:10px;font-size:0.79rem;margin-bottom:6px}
    .bsp-motivo-t b{margin-left:auto;font-variant-numeric:tabular-nums}
    .bsp-motivo-t b span{color:#6e7681;font-weight:600;font-size:0.72rem;margin-left:6px}
    .bsp-barra{height:5px;border-radius:3px;background:#161b22;overflow:hidden}
    .bsp-barra i{display:block;height:100%;background:linear-gradient(90deg,#e6b450,#f0883e)}

    .bsp-pills{display:flex;gap:7px;margin-bottom:11px}
    .bsp-pill{background:#0d1117;border:1px solid #30363d;border-radius:999px;padding:5px 14px;color:#8b949e;font:inherit;font-size:0.76rem;font-weight:700;cursor:pointer}
    .bsp-pill.on{background:#1f6feb;border-color:#1f6feb;color:#fff}

    .bsp-tab{display:grid;gap:9px}
    .bsp-lead{background:#0d1117;border:1px solid #21262d;border-radius:11px;padding:11px 13px}
    .bsp-lead-h{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
    .bsp-bola{width:8px;height:8px;border-radius:50%;flex-shrink:0}
    .bsp-id{font-family:ui-monospace,'JetBrains Mono',monospace;font-size:0.73rem;color:#8b949e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:270px}
    .bsp-q{font-size:0.73rem;color:#6e7681}
    .bsp-np{margin-left:auto;font-size:0.72rem;color:#6e7681}
    .bsp-passo{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;font-size:0.76rem;padding:4px 0 4px 12px;border-left:2px solid var(--c);margin-left:3px}
    .bsp-cam{font-weight:700;min-width:104px}
    .bsp-vd{min-width:72px}
    .bsp-t{color:#6e7681}
    .bsp-dep{color:#6e7681}
    .bsp-chave{margin-left:auto;color:#3fb950;font-weight:700}
    .bsp-mais{width:100%;margin-top:10px;background:#0d1117;border:1px solid #30363d;border-radius:9px;padding:9px;color:#8b949e;font:inherit;font-size:0.78rem;font-weight:700;cursor:pointer}
    .bsp-mais:hover{border-color:#1f6feb;color:#e6edf3}
    .bsp-fim{text-align:center;color:#6e7681;font-size:0.75rem;margin-top:10px}
    .bsp-vazio{text-align:center;padding:44px 20px;color:#6e7681}
    .bsp-vazio .ico{font-size:38px;opacity:.35;margin-bottom:9px}
    .bsp-vazio h4{font-size:0.88rem;color:#8b949e;margin:0 0 5px}
    .bsp-vazio p{font-size:0.76rem;margin:0;line-height:1.6}

    [data-theme="light"] .bsp-kpi,[data-theme="light"] .bsp-etapa,[data-theme="light"] .bsp-motivo,
    [data-theme="light"] .bsp-lead,[data-theme="light"] .bsp-busca,[data-theme="light"] .bsp-data,
    [data-theme="light"] .bsp-pill,[data-theme="light"] .bsp-mais{background:#fff;border-color:#d8dee4;color:#1f2328}
    [data-theme="light"] .bsp-pill.on{background:#0969da;border-color:#0969da;color:#fff}
    [data-theme="light"] .bsp-barra{background:#eaeef2}
    [data-theme="light"] .bsp-sub,[data-theme="light"] .bsp-r,[data-theme="light"] .bsp-id{color:#57606a}
    [data-theme="light"] .bsp-q,[data-theme="light"] .bsp-p,[data-theme="light"] .bsp-t,
    [data-theme="light"] .bsp-np,[data-theme="light"] .bsp-dep,[data-theme="light"] .bsp-fim,
    [data-theme="light"] .bsp-grupo,[data-theme="light"] .bsp-cab{color:#6e7781}
    @media (prefers-reduced-motion:reduce){.bsp-kpi{transition:none}.bsp-title .pulse{animation:none}}

    /* ══ Filtro de imagens ══ */
    .bmp-in { width:100%; background:#010409; border:1px solid #30363d; border-radius:9px; padding:10px 13px; color:#e6edf3; font-size:0.85rem; margin-bottom:4px; transition:border-color .15s; }
    .bmp-in:focus { outline:none; border-color:#58a6ff77; }
    .bs-wrap { width:100%; max-width:1320px; margin:0 auto; }
    .bs-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
    .bs-h1 { margin:0; font-size:1.42rem; font-weight:800; display:flex; align-items:center; gap:10px; letter-spacing:-0.01em; }
    .bs-sub { margin:5px 0 0; color:#8b949e; font-size:0.79rem; max-width:760px; line-height:1.55; }
    .bs-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
    @media (max-width:920px){ .bs-kpis { grid-template-columns:repeat(2,1fr); } }
    .bs-kpi { background:#0d1117; border:1px solid #21262d; border-radius:13px; padding:14px 16px; transition:border-color .18s; }
    .bs-kpi:hover { border-color:#30363d; }
    .bs-kpi-l { font-size:0.62rem; font-weight:800; color:#6e7681; text-transform:uppercase; letter-spacing:0.07em; display:flex; align-items:center; gap:6px; }
    .bs-kpi-v { font-size:1.5rem; font-weight:800; margin-top:5px; color:#e6edf3; letter-spacing:-0.01em; }
    .bs-kpi-s { font-size:0.66rem; color:#6e7681; font-weight:600; margin-top:2px; }
    /* Saúde do funil: os números de cara */
    .bs-saude-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px 0; }
    .bs-saude-badge { display:inline-flex; align-items:center; gap:7px; font-size:0.68rem; font-weight:800; padding:5px 11px; border-radius:999px; border:1px solid; white-space:nowrap; }
    .bs-saude-badge i { width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block; box-shadow:0 0 0 3px rgba(255,255,255,0.06); }
    .bs-saude-body { padding:14px 16px 16px; }
    .bs-sfun { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:10px; align-items:stretch; margin-top:14px; }
    @media (max-width:820px){ .bs-sfun { grid-template-columns:1fr; } .bs-sfun .bs-fseta { transform:rotate(90deg); justify-self:center; } }
    .bs-scard { background:#0d1117; border:1px solid #21262d; border-radius:14px; padding:16px 18px 14px; position:relative; overflow:hidden; }
    .bs-scard::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--fc,#58a6ff); }
    .bs-scard-l { font-size:0.62rem; font-weight:800; color:#6e7681; text-transform:uppercase; letter-spacing:.07em; }
    .bs-scard-v { font-size:2rem; font-weight:800; color:#e6edf3; margin-top:4px; letter-spacing:-0.02em; line-height:1.1; }
    .bs-scard-p { font-size:0.82rem; font-weight:800; color:var(--fc,#58a6ff); margin-top:3px; }
    .bs-scard-s { font-size:0.68rem; color:#8b949e; margin-top:6px; line-height:1.5; }
    .bs-scard-bar { height:6px; background:#161b22; border-radius:999px; margin-top:10px; overflow:hidden; }
    .bs-scard-bar i { display:block; height:100%; background:var(--fc,#58a6ff); border-radius:999px; transition:width .4s ease; }
    .bs-saude-foot { display:flex; gap:14px; flex-wrap:wrap; font-size:0.7rem; color:#6e7681; margin-top:12px; line-height:1.6; }
    /* Teste A/B do lado real */
    .bs-ab-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px; }
    .bs-ab-var { background:#0d1117; border:1px solid #21262d; border-radius:14px; padding:14px 16px 12px; position:relative; overflow:hidden; }
    .bs-ab-var::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--fc,#58a6ff); }
    .bs-ab-var.win { border-color:#3fb95066; box-shadow:0 0 0 1px #3fb95022 inset; }
    .bs-ab-n { font-size:0.62rem; font-weight:800; color:#6e7681; text-transform:uppercase; letter-spacing:.07em; }
    .bs-ab-nome { font-weight:800; font-size:0.86rem; color:#e6edf3; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .bs-ab-peso { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
    .bs-ab-peso input { width:64px; background:#010409; border:1px solid #30363d; border-radius:8px; color:#e6edf3; padding:5px 8px; font-weight:800; font-size:0.9rem; text-align:right; }
    .bs-ab-nums { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
    @media (max-width:1100px){ .bs-ab-nums { grid-template-columns:repeat(2,1fr); } }
    .bs-ab-k { font-size:0.6rem; font-weight:800; color:#6e7681; text-transform:uppercase; letter-spacing:.06em; }
    .bs-ab-v { font-size:1.35rem; font-weight:800; color:#e6edf3; letter-spacing:-0.02em; line-height:1.15; margin-top:2px; }
    .bs-ab-s { font-size:0.66rem; color:#8b949e; }
    .bs-ab-bar { height:6px; background:#161b22; border-radius:999px; margin-top:10px; overflow:hidden; }
    .bs-ab-bar i { display:block; height:100%; background:var(--fc,#58a6ff); border-radius:999px; transition:width .4s ease; }
    .bs-ab-acoes { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
    .bs-ab-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
    .bs-ab-form select { background:#010409; border:1px solid #30363d; border-radius:8px; color:#e6edf3; padding:7px 10px; font-size:0.8rem; max-width:360px; }
    .bs-ab-card { background:#0d1117; border:1px solid #21262d; border-radius:15px; padding:16px 18px 12px; cursor:pointer; transition:border-color .15s, transform .15s; }
    .bs-ab-card:hover { border-color:#3d444d; transform:translateY(-1px); }
    .bs-ab-linhas { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
    .bs-ab-linha { display:grid; grid-template-columns:8px 1fr 44px 78px 52px; gap:8px; align-items:center; font-size:0.74rem; color:#c9d1d9; }
    .bs-ab-linha i { width:8px; height:8px; border-radius:50%; display:inline-block; }
    .bs-ab-linha b { text-align:right; color:#e6edf3; }
    .bs-ab-linha span { white-space:nowrap; } .bs-ab-linha span:last-child { text-align:right; }
    .bs-ab-linha-n { overflow:hidden; text-overflow:ellipsis; } .bs-ab-linha-n small { color:#6e7681; font-size:0.62rem; }
    .bs-ab-linha.win .bs-ab-linha-n { color:#3fb950; }
    .bs-ab-card-f { display:flex; gap:10px; font-size:0.68rem; color:#6e7681; margin-top:12px; padding-top:10px; border-top:1px solid #21262d; }
    .bs-ab-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
    @media (max-width:820px){ .bs-ab-form-grid { grid-template-columns:1fr; } }
    .bs-ab-form-grid label { display:flex; flex-direction:column; gap:5px; font-size:0.72rem; font-weight:700; color:#8b949e; }
    .bs-ab-form-grid input[type=text], .bs-ab-form-grid input:not([type]), .bs-ab-form-grid select { background:#010409; border:1px solid #30363d; border-radius:8px; color:#e6edf3; padding:8px 10px; font-size:0.82rem; font-weight:600; }
    .bs-ab-form-grid input[type=number] { width:64px; background:#010409; border:1px solid #30363d; border-radius:8px; color:#e6edf3; padding:5px 8px; font-weight:800; text-align:right; }
    .bs-ab-form-grid label.bs-ab-check, .bs-ab-check { display:flex; flex-direction:row; align-items:center; gap:10px; padding:8px 11px; border:1px solid #21262d; border-radius:9px; margin-top:6px; font-size:0.78rem; font-weight:600; color:#c9d1d9; cursor:pointer; transition:border-color .15s, background .15s; }
    .bs-ab-check:hover { border-color:#3d444d; }
    /* caixa de marcar escura (a nativa é branca e estoura no fundo escuro) */
    .bs-ab-check input { appearance:none; -webkit-appearance:none; width:17px; height:17px; margin:0; flex-shrink:0; border-radius:5px; border:1.5px solid #3d444d; background:#010409; position:relative; cursor:pointer; transition:all .15s; }
    .bs-ab-check input:hover { border-color:#f778ba88; }
    .bs-ab-check input:checked { background:#f778ba; border-color:#f778ba; }
    .bs-ab-check input:checked::after { content:''; position:absolute; left:5px; top:1.5px; width:4px; height:8px; border:solid #0d1117; border-width:0 2px 2px 0; transform:rotate(45deg); }
    .bs-ab-check input:disabled { opacity:.35; cursor:not-allowed; }
    /* lista de seleção: seta própria, popup escuro (color-scheme), foco azul */
    .bs-ab-form-grid select, .bs-ab-form select { appearance:none; -webkit-appearance:none; color-scheme:dark; cursor:pointer; padding-right:32px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 11px center; }
    .bs-ab-form-grid select option, .bs-ab-form select option { background:#0d1117; color:#e6edf3; }
    .bs-ab-form-grid input, .bs-ab-peso input, .bs-ab-form input { color-scheme:dark; }
    .bs-ab-form-grid input:focus, .bs-ab-form-grid select:focus, .bs-ab-peso input:focus, .bs-ab-form input:focus, .bs-ab-form select:focus { outline:none; border-color:#58a6ff; box-shadow:0 0 0 3px #58a6ff22; }
    .bs-ab-form-grid input::placeholder { color:#484f58; font-weight:500; }
    .bs-ab-check.on { border-color:#f778ba66; background:#f778ba0d; }
    .bs-saude-foot b { color:#c9d1d9; }
    .bs-pages { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
    .bs-page { background:#0d1117; border:1px solid #21262d; border-radius:14px; padding:16px 17px; cursor:pointer; transition:border-color .18s,transform .18s; position:relative; }
    .bs-page:hover { border-color:#58a6ff55; transform:translateY(-2px); }
    .bs-page-n { font-weight:800; font-size:0.92rem; color:#e6edf3; margin-bottom:3px; word-break:break-word; padding-right:30px; }
    .bs-page-d { font-size:0.7rem; color:#6e7681; font-weight:600; }
    .bs-page-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:11px; }
    .bs-tag { font-size:0.6rem; font-weight:800; padding:3px 9px; border-radius:11px; white-space:nowrap; background:#58a6ff12; border:1px solid #58a6ff30; color:#79b8ff; }
    .bs-tag.g { background:#3fb95012; border-color:#3fb95035; color:#3fb950; }
    .bs-tag.y { background:#e6b45012; border-color:#e6b45035; color:#e6b450; }
    .bs-page-f { display:flex; gap:14px; margin-top:12px; padding-top:11px; border-top:1px solid #1c2128; }
    .bs-panel { background:#0d1117; border:1px solid #21262d; border-radius:15px; margin-bottom:18px; }
    .bs-panel-h { display:flex; align-items:center; gap:11px; padding:15px 18px; border-bottom:1px solid #21262d; flex-wrap:wrap; border-radius:15px 15px 0 0; }
    .bs-panel-b { padding:16px 18px; }
    .bs-ico { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .bs-rules { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px; }
    .bs-rule { background:#0b0f16; border:1px solid #1c2128; border-radius:12px; padding:13px 15px; transition:border-color .18s; }
    .bs-rule:hover { border-color:#2b3441; }
    .bs-rule-t { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
    .bs-rule-n { font-weight:700; font-size:0.8rem; color:#e6edf3; }
    .bs-rule-d { font-size:0.68rem; color:#6e7681; line-height:1.5; margin-top:3px; }
    .bs-sw { position:relative; width:38px; height:21px; border-radius:11px; background:#21262d; border:1px solid #30363d; cursor:pointer; flex-shrink:0; transition:background .18s,border-color .18s; }
    .bs-sw::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#6e7681; transition:transform .18s,background .18s; }
    .bs-sw.on { background:#238636; border-color:#2ea043; }
    .bs-sw.on::after { transform:translateX(17px); background:#fff; }
    .bs-in { background:#010409; border:1px solid #30363d; border-radius:9px; padding:9px 12px; color:#e6edf3; font-size:0.78rem; width:100%; transition:border-color .15s; }
    .bs-in:focus { outline:none; border-color:#58a6ff66; }
    .bs-in::placeholder { color:#4a5560; }
    .bs-seg { display:flex; gap:6px; flex-wrap:wrap; }
    .bs-chip { font-size:0.7rem; font-weight:700; padding:6px 13px; border-radius:16px; cursor:pointer; background:#6b728010; border:1px solid #30363d; color:#8b949e; transition:color .15s,border-color .15s,background .15s; user-select:none; }
    .bs-chip:hover { color:#c9d1d9; border-color:#3d444d; }
    .bs-chip.on { background:#58a6ff14; border-color:#58a6ff55; color:#79b8ff; }
    .bs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:14px; }
    .bs-slot { background:#0d1117; border:1px solid #21262d; border-radius:14px; padding:14px 15px; transition:border-color .18s; }
    .bs-slot:hover { border-color:#2b3441; }
    .bs-sides { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
    .bs-side { border:1px dashed #30363d; border-radius:11px; padding:9px; text-align:center; cursor:pointer; transition:border-color .16s,background .16s; }
    .bs-side:hover { border-color:#58a6ff66; background:#0b0f16; }
    .bs-side.filled { border-style:solid; }
    .bs-side.real.filled { border-color:#3fb95050; }
    .bs-side.safe.filled { border-color:#e6b45050; }
    .bs-thumb { width:100%; height:104px; object-fit:cover; border-radius:8px; display:block; margin-bottom:7px; background:#010409; }
    .bs-empty-thumb { height:104px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#010409; margin-bottom:7px; }
    .bs-url { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.68rem; color:#7ee787; background:#010409; border:1px solid #1c2128; border-radius:8px; padding:8px 11px; overflow:auto; white-space:nowrap; flex:1; }
    .bs-mini { font-size:0.64rem; color:#6e7681; font-weight:700; }
    .bs-back { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:#8b949e; font-size:0.75rem; font-weight:700; cursor:pointer; padding:4px 0; margin-bottom:9px; transition:color .15s; }
    .bs-back:hover { color:#79b8ff; }
    .bs-tokrow { display:flex; align-items:center; gap:7px; background:#010409; border:1px solid #1c2128; border-radius:9px; padding:7px 9px 7px 11px; margin-bottom:7px; flex-wrap:wrap; }
    .bs-tokid { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.74rem; color:#7ee787; font-weight:600; flex-shrink:0; letter-spacing:.02em; }
    .bs-tok-lbl { flex:1; min-width:110px; background:none; border:1px solid transparent; border-radius:7px; padding:4px 8px; color:#c9d1d9; font-size:0.71rem; font-weight:600; transition:border-color .15s,background .15s; }
    .bs-tok-lbl:hover { border-color:#21262d; }
    .bs-tok-lbl:focus { outline:none; border-color:#30363d; background:#0d1117; }
    .bs-tok-lbl::placeholder { color:#3d4650; font-weight:500; }
    .bs-tok-b { width:28px; height:28px; border-radius:7px; border:1px solid #30363d; background:none; color:#8b949e; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:color .15s,border-color .15s,background .15s; }
    .bs-tok-b:hover { color:#79b8ff; border-color:#58a6ff55; background:#58a6ff10; }
    .bs-tok-b.danger:hover { color:#f85149; border-color:#f8514955; background:#f8514910; }
    .bs-live { display:inline-flex; align-items:center; gap:5px; font-size:0.6rem; font-weight:800; color:#3fb950; text-transform:uppercase; letter-spacing:.06em; }
    .bs-live i { width:6px; height:6px; border-radius:50%; background:#3fb950; animation:bsPulse 1.6s ease-in-out infinite; }
    @keyframes bsPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 #3fb95066} 50%{opacity:.5;box-shadow:0 0 0 5px #3fb95000} }
    .bs-loghead { border-radius:15px 15px 0 0; cursor:pointer; user-select:none; transition:background .16s; }
    .bs-loghead:hover { background:#0f141b; }
    .bs-logwrap { height:0; overflow:hidden; transition:height .26s cubic-bezier(.4,0,.2,1); }
    .bs-logwrap.on { height:auto; }
    .bs-logbar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }

    /* ── Funil advertorial → vídeo ───────────────────────────────── */
    .bs-funil { border:1px solid #30363d; border-radius:12px; padding:14px 14px 12px; margin-bottom:12px;
      background:linear-gradient(180deg,rgba(163,113,247,.05),transparent 62%); }
    .bs-fgrid { display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; }
    .bs-fet { flex:1 1 150px; min-width:132px; border:1px solid var(--fc)30; background:var(--fc)0d;
      border-radius:10px; padding:11px 12px 12px; }
    .bs-fetn { font-size:1.5rem; font-weight:800; color:var(--fc); line-height:1.05; letter-spacing:-.02em; }
    .bs-fetr { font-size:.72rem; color:#c9d1d9; font-weight:600; margin-top:3px; }
    .bs-fets { font-size:.67rem; color:#8b949e; margin-top:1px; }
    .bs-fetbar { height:3px; border-radius:2px; background:#ffffff10; margin-top:9px; overflow:hidden; }
    .bs-fetbar i { display:block; height:100%; background:var(--fc); border-radius:2px; transition:width .5s cubic-bezier(.4,0,.2,1); }
    .bs-fseta { display:flex; align-items:center; padding:0 1px; flex-shrink:0; }
    @media (max-width:640px){ .bs-fseta{transform:rotate(90deg); margin:-2px auto} .bs-fet{flex-basis:100%} }
    .bs-falerta { margin-top:10px; padding:9px 12px; border:1px solid rgba(232,68,90,.3);
      background:rgba(232,68,90,.08); border-radius:8px; color:#ffb3bd; font-size:.71rem; line-height:1.5; }
    .bs-falerta b { color:#ff8593; }
    .bs-fok { margin-top:10px; padding:9px 12px; border:1px solid rgba(63,185,80,.26);
      background:rgba(63,185,80,.07); border-radius:8px; color:#8fd89a; font-size:.71rem; line-height:1.5; }
    .bs-fok code { background:#ffffff12; padding:1px 5px; border-radius:4px; font-size:.95em; color:#b8e6c0; }

    /* data e hora do log */
    .bs-quando { line-height:1.25; }
    .bs-quando b { display:block; font-size:.74rem; color:#e6edf3; font-weight:700; font-variant-numeric:tabular-nums; }
    .bs-quando span { display:block; font-size:.63rem; color:#6e7681; }

    body.light .bs-funil { border-color:#d6dae1; }
    body.light .bs-fetr { color:#24292f; }
    body.light .bs-quando b { color:#1a1d23; }

    /* ── Leads, um por um ────────────────────────────────────────── */
    .bs-leads { border:1px solid #30363d; border-radius:12px; padding:14px 14px 12px; margin-bottom:12px; }
    .bs-vchips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
    .bs-vchip { border:1px solid var(--vc)35; background:var(--vc)10; color:var(--vc); border-radius:20px;
      padding:4px 11px; font-size:.69rem; font-weight:700; cursor:pointer; font-family:inherit;
      transition:border-color .16s, background .16s; }
    .bs-vchip:hover { border-color:var(--vc); }
    .bs-vchip.on { background:var(--vc)22; border-color:var(--vc); box-shadow:0 0 0 1px var(--vc)40 inset; }
    .bs-vchip b { margin-left:6px; opacity:.75; font-weight:800; }

    .bs-ltab { border:1px solid #21262d; border-radius:9px; overflow:hidden; }
    .bs-lrow { display:grid; grid-template-columns:88px 1fr 1fr 1.1fr 1fr 16px; gap:10px; align-items:center;
      padding:9px 11px; border-bottom:1px solid #1c2128; cursor:pointer; font-size:.71rem;
      transition:background .14s; }
    .bs-lrow:last-child { border-bottom:0; }
    .bs-lrow:hover { background:#ffffff06; }
    .bs-lrow.on { background:#ffffff09; }
    .bs-lrow.on .bs-lchev { transform:rotate(180deg); }
    .bs-lchev { transition:transform .2s; }
    .bs-lv { color:var(--vc); border:1px solid var(--vc)35; background:var(--vc)12; border-radius:6px;
      padding:2px 0; text-align:center; font-weight:700; font-size:.66rem; }
    .bs-lloc i { color:#6e7681; font-style:normal; }
    .bs-lap, .bs-lcomp, .bs-lvsl { color:#8b949e; }
    .bs-lcomp i { color:#484f58; font-style:normal; }
    @media (max-width:860px){ .bs-lrow{grid-template-columns:80px 1fr 1fr 14px} .bs-lap,.bs-lvsl{display:none} }

    .bs-ldet { padding:12px 13px 14px; background:#0d1117; border-bottom:1px solid #1c2128; }
    .bs-lporque { border-left:3px solid var(--vc); padding:7px 11px; margin-bottom:12px;
      background:var(--vc)0b; border-radius:0 7px 7px 0; font-size:.72rem; color:#c9d1d9; line-height:1.5; }
    .bs-lcols { display:grid; grid-template-columns:1.25fr 1fr; gap:18px; }
    @media (max-width:760px){ .bs-lcols{grid-template-columns:1fr; gap:14px} }
    .bs-lsub { font-size:.65rem; font-weight:700; color:#6e7681; text-transform:uppercase;
      letter-spacing:.05em; margin-bottom:7px; }
    /* o marcador é absoluto sobre a linha do tempo, então NÃO reserva coluna —
       reservar empilhava o rótulo letra a letra */
    .bs-lpasso { padding:5px 0 5px 13px; font-size:.71rem; border-left:1px solid #21262d;
      margin-left:7px; position:relative; }
    .bs-lpi { position:absolute; left:-8px; top:5px; width:15px; height:15px; border-radius:50%; background:#0d1117;
      border:1px solid #3fb95055; color:#3fb950; font-size:.6rem; display:flex; align-items:center;
      justify-content:center; line-height:1; }
    .bs-lpasso.no .bs-lpi { border-color:#e6b45055; color:#e6b450; }
    .bs-lpt { display:block; color:#e6edf3; font-weight:600; }
    .bs-lpd { display:block; color:#8b949e; font-size:.67rem; margin-top:1px; }
    .bs-lfl { display:flex; justify-content:space-between; gap:12px; padding:4px 0;
      border-bottom:1px solid #1c2128; font-size:.69rem; }
    .bs-lfl:last-child { border-bottom:0; }
    .bs-lfl span { color:#6e7681; flex-shrink:0; }
    .bs-lfl b { color:#c9d1d9; font-weight:600; text-align:right; word-break:break-all; font-size:.67rem; }

    body.light .bs-leads { border-color:#d6dae1; }
    body.light .bs-ldet { background:#f6f8fa; }
    body.light .bs-lpt, body.light .bs-lfl b { color:#24292f; }

    /* ── Conferência com o Ao Vivo ───────────────────────────────── */
    .bs-confbox { border:1px solid #30363d; border-radius:12px; padding:14px 14px 12px; margin-bottom:14px;
      background:linear-gradient(180deg,rgba(88,166,255,.045),transparent 65%); }
    .bs-confhead { margin-bottom:11px; }
    .bs-conftit  { font-weight:800; font-size:0.83rem; color:#f0f0f5; letter-spacing:-.01em; }
    .bs-confsub  { color:#8b949e; font-size:0.71rem; line-height:1.45; margin-top:2px; max-width:64ch; }
    .bs-confgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr)); gap:8px; }
    .bs-confcard { border:1px solid var(--cc,#30363d)33; background:var(--cb,transparent); border-radius:10px;
      padding:11px 12px; text-align:left; cursor:pointer; transition:border-color .18s,transform .18s,box-shadow .18s;
      font-family:inherit; }
    .bs-confcard:hover { border-color:var(--cc); transform:translateY(-1px); }
    .bs-confcard.on { border-color:var(--cc); box-shadow:0 0 0 1px var(--cc)55 inset; }
    .bs-confn { font-size:1.42rem; font-weight:800; color:var(--cc); line-height:1.05; letter-spacing:-.02em; }
    .bs-confr { font-size:0.7rem; color:#8b949e; margin-top:3px; font-weight:600; }
    .bs-confcard.pulsa .bs-confn { animation:bsPulsa 2.1s ease-in-out infinite; }
    @keyframes bsPulsa { 0%,100%{opacity:1} 50%{opacity:.55} }
    @media (prefers-reduced-motion:reduce){ .bs-confcard.pulsa .bs-confn{animation:none} }

    .bs-confalerta { display:flex; gap:9px; align-items:flex-start; margin-top:11px; padding:10px 12px;
      border:1px solid rgba(232,68,90,.32); background:rgba(232,68,90,.08); border-radius:9px;
      color:#ffb3bd; font-size:0.72rem; line-height:1.5; }
    .bs-confalerta svg { flex-shrink:0; margin-top:1px; color:#e8445a; }
    .bs-confalerta b { color:#ff8593; }
    .bs-confnota { color:#6e7681; font-size:0.69rem; margin-top:9px; }

    .bs-conf { display:inline-flex; align-items:center; gap:4px; border:1px solid; border-radius:6px;
      padding:2px 7px; font-size:0.67rem; font-weight:700; white-space:nowrap; }
    .bs-conf b { font-size:0.74rem; line-height:1; }
    .bs-confdet { display:block; margin-top:2px; font-size:0.64rem; color:#6e7681; }
    .bs-confcel { max-width:190px; }
    .bs-logrow.bs-grave > td { background:rgba(232,68,90,.055); }
    .bs-logrow.bs-grave > td:first-child { box-shadow:inset 2px 0 0 #e8445a; }

    body.light .bs-confbox { border-color:#d6dae1; background:linear-gradient(180deg,rgba(88,166,255,.05),transparent 65%); }
    body.light .bs-conftit { color:#1a1d23; }
    body.light .bs-confsub, body.light .bs-confr { color:#57606a; }
    body.light .bs-confalerta { color:#8a1c2b; }
    .bs-logrefresh { padding:6px 10px !important; display:flex; align-items:center; }
    .bs-logvazio { text-align:center; padding:34px 20px; color:#6e7681; font-size:0.78rem; }
    .bs-logrow { animation:none; }
    .bs-novo { animation:bsEntra .34s cubic-bezier(.4,0,.2,1); }
    @keyframes bsEntra { from { opacity:0; transform:translateY(-5px); background:#58a6ff10; } to { opacity:1; transform:none; } }
    @media (prefers-reduced-motion:reduce){ .bs-novo,.bs-logwrap{animation:none;transition:none} }
    .bs-logpg { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .bs-lognav { display:flex; align-items:center; gap:4px; margin-top:11px; flex-wrap:wrap; }
    .bs-pg { min-width:28px; height:28px; padding:0 8px; border-radius:7px; border:1px solid #21262d; background:none; color:#8b949e; font-size:0.72rem; font-weight:700; cursor:pointer; transition:color .14s,border-color .14s,background .14s; }
    .bs-pg:hover:not(:disabled) { color:#c9d1d9; border-color:#3d444d; background:#0d1117; }
    .bs-pg.on { background:#58a6ff14; border-color:#58a6ff55; color:#79b8ff; }
    .bs-pg:disabled { opacity:.3; cursor:default; }
    .bs-pgsep { color:#4a5560; font-size:0.72rem; padding:0 2px; }
    .bs-logtb { overflow-x:auto; border:1px solid #1c2128; border-radius:11px; }
    .bs-logtb table { width:100%; border-collapse:collapse; font-size:0.74rem; }
    .bs-logtb th { text-align:left; font-size:0.62rem; font-weight:800; color:#6e7681; text-transform:uppercase; letter-spacing:.06em; padding:9px 12px; background:#0b0f16; border-bottom:1px solid #1c2128; white-space:nowrap; }
    .bs-logtb td { padding:9px 12px; border-bottom:1px solid #14181e; color:#c9d1d9; vertical-align:middle; }
    .bs-logtb tr:last-child td { border-bottom:none; }
    .bs-logtb tbody tr:hover { background:#0d1117; }
    .bs-pill { font-size:0.62rem; font-weight:800; padding:3px 9px; border-radius:11px; white-space:nowrap; }
    .bs-pill.g { background:#3fb95015; border:1px solid #3fb95040; color:#3fb950; }
    .bs-pill.y { background:#e6b45012; border:1px solid #e6b45038; color:#e6b450; }
    .bs-mcp-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .bs-mcp-ex { display:flex; flex-direction:column; gap:7px; }
    .bs-mcp-ex div { background:#0b0f16; border:1px solid #1c2128; border-left:2px solid #a371f755; border-radius:9px; padding:9px 12px; font-size:0.75rem; color:#8b949e; line-height:1.55; }
    .bs-mcp-ex b { color:#c9d1d9; }
    .bs-prev { background:#0b0f16; border:1px solid #1c2128; border-radius:12px; padding:13px 15px; margin-bottom:14px; transition:border-color .18s,background .18s; }
    .bs-prev.on { border-color:#a371f745; background:#a371f708; }
    .bs-prev-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .bs-prev-t { font-weight:700; font-size:0.8rem; color:#e6edf3; display:flex; align-items:center; gap:7px; }
    .bs-prev-d { font-size:0.68rem; color:#6e7681; line-height:1.55; margin-top:3px; max-width:760px; }
    .bs-prev.on .bs-prev-d { color:#8b949e; }
    .bs-prev-body { margin-top:11px; padding-top:11px; border-top:1px solid #a371f725; }
    .bs-prev-row { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
    .bs-prev .bs-sw.on { background:#8957e5; border-color:#a371f7; }
    .bs-dom-row { display:flex; align-items:center; gap:8px; background:#010409; border:1px solid #1c2128; border-radius:9px; padding:8px 11px; margin-bottom:6px; }
    .bs-dom-name { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.75rem; color:#7ee787; font-weight:600; flex:1; word-break:break-all; }
    .bs-dom-x { background:none; border:none; color:#4a5560; cursor:pointer; padding:3px; display:flex; border-radius:5px; flex-shrink:0; transition:color .13s,background .13s; }
    .bs-dom-x:hover { color:#f85149; background:#f8514918; }
    .bs-dom-none { font-size:0.72rem; color:#4a5560; padding:9px 11px; background:#010409; border:1px dashed #21262d; border-radius:9px; text-align:center; margin-bottom:6px; }
    .bs-dom-add { display:flex; gap:7px; margin-top:8px; }
    .bs-dom-msg { display:none; font-size:0.68rem; color:#f85149; margin-top:6px; font-weight:600; }
    .bs-dom-badge { flex-shrink:0; }
    @media (max-width:700px){ .bs-dom { grid-column:span 1 !important; } }
    .bs-ms-wrap { position:relative; }
    .bs-ms-field { display:flex; align-items:center; gap:8px; min-height:38px; background:#010409; border:1px solid #30363d; border-radius:9px; padding:6px 10px; cursor:pointer; transition:border-color .15s; }
    .bs-ms-field:hover { border-color:#3d444d; }
    .bs-ms-chips { flex:1; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
    .bs-ms-empty { font-size:0.76rem; color:#4a5560; }
    .bs-ms-chip { display:inline-flex; align-items:center; gap:5px; background:#58a6ff14; border:1px solid #58a6ff40; color:#79b8ff; font-size:0.7rem; font-weight:700; padding:3px 5px 3px 8px; border-radius:14px; }
    .bs-ms-chip button { background:none; border:none; color:#79b8ff88; cursor:pointer; padding:2px; display:flex; border-radius:50%; transition:color .13s,background .13s; }
    .bs-ms-chip button:hover { color:#f85149; background:#f8514922; }
    .bs-ms-clear { background:none; border:none; color:#6e7681; font-size:0.66rem; font-weight:700; cursor:pointer; text-decoration:underline; padding:2px 4px; }
    .bs-ms-clear:hover { color:#f85149; }
    .bs-ms-chev { color:#6e7681; flex-shrink:0; transition:transform .18s; }
    .bs-ms-pop { display:none; position:absolute; left:0; right:0; top:calc(100% - 2px); z-index:400; background:#0d1117; border:1px solid #3d444d; border-radius:11px; box-shadow:0 14px 40px rgba(1,4,9,.75); overflow:hidden; }
    .bs-ms-pop.open { display:block; animation:bsPop .14s ease; }
    .bs-ms-pop.up { top:auto; bottom:calc(100% - 2px); }
    @keyframes bsPop { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
    .bs-ms-wrap { position:relative; z-index:1; }
    .bs-ms-wrap:has(.bs-ms-pop.open) { z-index:401; }
    .bs-ms-search { display:flex; align-items:center; gap:7px; padding:9px 11px; border-bottom:1px solid #21262d; }
    .bs-ms-search input { flex:1; background:none; border:none; outline:none; color:#e6edf3; font-size:0.78rem; }
    .bs-ms-search input::placeholder { color:#4a5560; }
    .bs-ms-list { max-height:242px; overflow-y:auto; padding:5px; }
    .bs-ms-list::-webkit-scrollbar { width:8px; }
    .bs-ms-list::-webkit-scrollbar-thumb { background:#30363d; border-radius:4px; }
    .bs-ms-row { display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; padding:7px 9px; border-radius:8px; cursor:pointer; text-align:left; transition:background .12s; }
    .bs-ms-row:hover { background:#161b22; }
    .bs-ms-row.on { background:#58a6ff0f; }
    .bs-ms-box { width:15px; height:15px; border-radius:4px; border:1.5px solid #30363d; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .13s,border-color .13s; }
    .bs-ms-row.on .bs-ms-box { background:#238636; border-color:#2ea043; }
    .bs-flag { font-size:0.95rem; line-height:1; flex-shrink:0; }
    .bs-ms-name { flex:1; font-size:0.77rem; color:#c9d1d9; font-weight:600; }
    .bs-ms-row.on .bs-ms-name { color:#e6edf3; }
    .bs-ms-code { font-size:0.63rem; font-weight:800; color:#4a5560; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; flex-shrink:0; }
    .bs-ms-none { padding:18px; text-align:center; font-size:0.75rem; color:#6e7681; }
    .bs-modal-bg { position:fixed; inset:0; background:rgba(1,4,9,.78); backdrop-filter:blur(3px); z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; }
    .bs-modal { background:#0d1117; border:1px solid #30363d; border-radius:16px; width:100%; max-width:660px; max-height:88vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.6); }
    .bs-modal-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid #21262d; position:sticky; top:0; background:#0d1117; z-index:2; }
    .bs-modal-b { padding:16px 18px 20px; }
    .bs-x { width:29px; height:29px; border-radius:8px; border:1px solid #30363d; background:none; color:#8b949e; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .15s,border-color .15s; flex-shrink:0; }
    .bs-x:hover { color:#e6edf3; border-color:#4a5560; }
    .bs-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
    .bs-tab { flex:1; min-width:130px; background:#0b0f16; border:1px solid #21262d; border-radius:10px; padding:9px 12px; color:#8b949e; font-size:0.78rem; font-weight:700; cursor:pointer; text-align:left; transition:border-color .16s,color .16s,background .16s; }
    .bs-tab:hover { color:#c9d1d9; border-color:#30363d; }
    .bs-tab.on { background:#58a6ff10; border-color:#58a6ff55; color:#79b8ff; }
    .bs-tab span { display:block; font-size:0.63rem; font-weight:600; color:#6e7681; margin-top:2px; }
    .bs-tab.on span { color:#58a6ffaa; }
    .bs-tab-d { font-size:0.75rem; color:#8b949e; line-height:1.6; margin:0 0 12px; }
    .bs-code-wrap { position:relative; }
    .bs-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.7rem; line-height:1.65; color:#c9d1d9; background:#010409; border:1px solid #21262d; border-radius:11px; padding:14px 15px; padding-right:82px; margin:0; overflow-x:auto; white-space:pre-wrap; word-break:break-all; }
    .bs-code-copy { position:absolute; top:9px; right:9px; background:#21262d; border:1px solid #30363d; color:#c9d1d9; font-size:0.7rem; font-weight:700; padding:6px 13px; border-radius:8px; cursor:pointer; transition:background .15s,border-color .15s; }
    .bs-code-copy:hover { background:#30363d; border-color:#4a5560; }
    .bs-tip { display:flex; gap:8px; margin-top:12px; padding:11px 13px; background:#3fb9500d; border:1px solid #3fb95028; border-radius:10px; font-size:0.73rem; color:#8b949e; line-height:1.55; }
    .bs-tip code { color:#79b8ff; }
    /* Filtro de imagens: feature restrita — invisível até o admin liberar */
    body:not(.has-filter) .sidebar-btn[data-tab="filtro"],
    body:not(.has-filter) .sbd-tab[data-sbtab="filtro"] { display: none !important; }
    body.sub-inactive .sidebar .sidebar-btn[data-tab="leads"],
    body.sub-inactive .sidebar .sidebar-btn[data-tab="email"],
    body.sub-inactive .sidebar.collapsed:hover .sidebar-btn[data-tab="pixels"],
    body.sub-inactive .sidebar.collapsed:hover .sidebar-btn[data-tab="logs"],
    body.sub-inactive .sidebar.collapsed:hover .sidebar-btn[data-tab="webhook"],
    body.sub-inactive .sidebar.collapsed:hover .sidebar-btn[data-tab="ativar"],
    body.sub-inactive .sidebar.collapsed:hover .sidebar-btn[data-tab="testar"],
    body.sub-inactive .sidebar.collapsed:hover .sidebar-btn[data-tab="historico"],
    body.sub-inactive .sidebar.collapsed:hover .sidebar-btn[data-tab="leads"],
    body.sub-inactive .sidebar.collapsed:hover .sidebar-btn[data-tab="email"] { display: none !important; }
    body.sub-inactive .tab-btn[data-tab="pixels"],
    body.sub-inactive .tab-btn[data-tab="logs"],
    body.sub-inactive .tab-btn[data-tab="webhook"],
    body.sub-inactive .tab-btn[data-tab="ativar"],
    body.sub-inactive .tab-btn[data-tab="testar"],
    body.sub-inactive .tab-btn[data-tab="historico"],
    body.sub-inactive .tab-btn[data-tab="leads"],
    body.sub-inactive .tab-btn[data-tab="email"] { display: none !important; }

    .sidebar-btn {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 9px 12px;
      border-radius: 10px;
      background: transparent;
      border: none;
      color: #8b949e;
      font-size: 0.81rem;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      width: 100%;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      position: relative;
      white-space: nowrap;
      letter-spacing: 0.01em;
    }
    .sidebar-btn:hover {
      background: rgba(255,255,255,0.06);
      color: #e6edf3;
    }
    .sidebar-btn:hover .sb-icon-wrap { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); }
    .sidebar-btn:hover .sb-icon-wrap svg { stroke: #58a6ff; }

    .sidebar-btn.active {
      background: rgba(255,255,255,0.12);
      color: #f0f0f5;
    }
    .sidebar-btn.active::before {
      content: '';
      position: absolute;
      left: 0; top: 20%; bottom: 20%;
      width: 2.5px;
      border-radius: 99px;
      background: #58a6ff;
    }
    .sidebar-btn.active .sb-icon-wrap {
      background: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.35);
    }
    .sidebar-btn.active .sb-icon-wrap svg { stroke: #58a6ff; }

    /* Icon wrapper */
    .sb-icon-wrap {
      width: 30px; height: 30px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.05);
      background: rgba(255,255,255,0.03);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .sb-icon-wrap svg {
      width: 14px; height: 14px;
      stroke: #8b949e;
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.18s;
    }

    .sb-text { flex: 1; }

    .sb-badge {
      margin-left: auto;
      background: #e8445a;
      color: #fff;
      font-size: 0.58rem;
      font-weight: 700;
      border-radius: 99px;
      padding: 1px 5px;
      min-width: 16px;
      text-align: center;
      display: none;
      flex-shrink: 0;
    }
    .sb-badge.show { display: inline-block; }

    /* ── FOOTER ── */
    .sidebar-footer {
      padding: 12px 10px 16px;
      flex-shrink: 0;
      position: relative;
    }
    .sidebar-footer::before {
      content: '';
      position: absolute;
      top: 0; left: 16px; right: 16px;
      height: 1px;
      background: linear-gradient(90deg, transparent, #30363d, transparent);
    }
    .sidebar-user {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(255,255,255,0.08);
      transition: border-color 0.2s, background 0.2s, transform 0.2s;
    }
    .sidebar-user:hover {
      background: linear-gradient(135deg, rgba(88,166,255,0.08) 0%, rgba(88,166,255,0.04) 100%);
      border-color: rgba(88,166,255,0.3);
      transform: translateY(-1px);
    }
    .sidebar-avatar {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #58a6ff 0%, #1f6feb 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.92rem; font-weight: 800; color: #fff;
      flex-shrink: 0;
      box-shadow: 0 4px 12px -4px rgba(88,166,255,0.5);
      letter-spacing: -0.02em;
    }
    .sidebar-user-info {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column;
      justify-content: center; gap: 2px;
      line-height: 1.2;
    }
    .sidebar-user-name {
      font-size: 0.86rem; font-weight: 700; color: #f0f0f5;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      letter-spacing: -0.01em;
    }
    .sidebar-user-role {
      font-size: 0.7rem; color: #9ca3af; font-weight: 500;
      letter-spacing: 0.02em;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .sidebar-user-role::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: #3fb950; display: inline-block;
      box-shadow: 0 0 6px rgba(63,185,80,0.6);
    }
    .sidebar-logout {
      background: transparent; border: 1px solid rgba(255,255,255,0.06);
      color: #6e7681;
      cursor: pointer; padding: 7px;
      border-radius: 8px; transition: all 0.15s;
      flex-shrink: 0; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      width: 30px; height: 30px;
    }
    .sidebar-logout svg { width: 14px; height: 14px; }
    .sidebar-logout:hover {
      color: #f85149; background: rgba(248,81,73,0.1);
      border-color: rgba(248,81,73,0.35);
    }

    /* ── COLLAPSED STATE ── */
    .sidebar.collapsed .sidebar-logo-text,
    .sidebar.collapsed .sidebar-label,
    .sidebar.collapsed .sb-text,
    .sidebar.collapsed .sidebar-user-info,
    .sidebar.collapsed .sidebar-logout,
    .sidebar.collapsed .sb-badge,
    .sidebar.collapsed .sidebar-tracker-badge,
    .sidebar.collapsed .sidebar-toggle { display: none !important; }

    /* Compact "Mi" mark (cropped do logo real) — visível só quando collapsed */
    .sidebar-logo-compact {
      display: none;
      width: 36px; height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
      border: 1px solid rgba(255,255,255,0.08);
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px -4px rgba(0,0,0,0.5);
      padding: 6px;
    }
    .sidebar-logo-compact svg { width: 100%; height: 100%; display: block; }
    .sidebar.collapsed .sidebar-logo-compact { display: inline-flex; }
    .sidebar.collapsed .sidebar-logo-icon { display: none !important; }

    .sidebar.collapsed .sidebar-logo {
      padding: 18px 0 16px;
      justify-content: center;
      align-items: center;
      gap: 0;
      flex-direction: column;
      border-bottom: 1px solid #30363d;
      margin-bottom: 16px;
    }
    .sidebar.collapsed .sidebar-menu { padding: 10px 6px; gap: 4px; align-items: center; }
    .sidebar.collapsed .sidebar-btn { justify-content: center; padding: 8px 0; width: 40px; border-radius: 10px; }
    .sidebar.collapsed .sidebar-btn.active::before { display: none; }
    .sidebar.collapsed .sidebar-btn.active { box-shadow: 0 0 0 1px rgba(88,166,255,0.4); }
    .sidebar.collapsed .sidebar-footer { padding: 10px 6px 14px; }
    .sidebar.collapsed .sidebar-user { justify-content: center; padding: 6px; background: transparent; border-color: transparent; }
    .sidebar.collapsed .sidebar-avatar { margin: 0 auto; }

    /* Botão de UN-collapse fica logo abaixo do compact Mi (small chevron) */
    .sidebar-uncollapse-btn {
      display: none;
      width: 24px; height: 24px;
      align-items: center; justify-content: center;
      background: none;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      color: #6b7280;
      cursor: pointer;
      margin-top: 10px;
      transition: all 0.15s;
    }
    .sidebar.collapsed .sidebar-uncollapse-btn { display: inline-flex; }
    .sidebar-uncollapse-btn:hover { color: #58a6ff; border-color: rgba(88,166,255,0.4); }
    .sidebar-uncollapse-btn svg { width: 12px; height: 12px; }

    /* main area adjusts width */
    .main-area { transition: none; }
    .main-area.collapsed { margin-left: 56px !important; }

    /* ── MAIN AREA ────────────────────────────── */
    .main-area {
      margin-left: 230px;
      min-height: 100vh;
      padding: 0 0 0 16px;
      box-sizing: border-box;
      background: #0d1117;
    }

    /* Wrapper sem restrição de largura */
    .wrapper {
      padding: 0 8px;
    }

    /* ── EMAIL TAB ──────────────────────────────────── */
    #abaEmail {
      max-width: 780px;
      margin: 0 auto;
      padding: 28px 24px 48px;
      box-sizing: border-box;
      /* no anim */
    }
    .email-subnav {
      display: flex;
      gap: 4px;
      background: #161b22;
      border: 1px solid #21262d;
      border-radius: 12px;
      padding: 4px;
      margin-bottom: 24px;
    }
    .email-subnav-btn {
      flex: 1;
      padding: 10px 16px;
      border: none;
      background: transparent;
      color: #8b949e;
      font-size: 0.82rem;
      font-weight: 600;
      border-radius: 9px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .email-subnav-btn:hover { color: #e6edf3; background: rgba(255,255,255,0.06); }
    .email-subnav-btn.active { background: rgba(255,255,255,0.12); color: #f0f0f5; }

    .email-section { display: none; }
    .email-section.active { display: block; }

    /* ═══════════════════════════════════════════════
       ABA LEADS tabela, filtros, drawer
    ═══════════════════════════════════════════════ */
    .leads-wrap { padding: 28px 32px; max-width: 1500px; margin: 0 auto; }
    .leads-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
      padding-right: 160px; /* safe zone pros ícones fixos */
    }
    @media (max-width: 700px) { .leads-header { padding-right: 100px; } }
    .leads-title {
      margin: 0 0 4px; font-size: 26px; font-weight: 700; color: #e6edf3;
      letter-spacing: -.5px; display: flex; align-items: center; gap: 10px;
    }
    .leads-title .pulse {
      width: 8px; height: 8px; border-radius: 50%; background: #2ea043;
      box-shadow: 0 0 0 0 rgba(46,160,67,0.7);
      animation: leadsPulse 2s infinite;
    }
    @keyframes leadsPulse {
      0% { box-shadow: 0 0 0 0 rgba(46,160,67,0.7); }
      70% { box-shadow: 0 0 0 8px rgba(46,160,67,0); }
      100% { box-shadow: 0 0 0 0 rgba(46,160,67,0); }
    }
    .leads-sub { margin: 0; font-size: 13px; color: #8b949e; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .leads-sub .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
    [data-theme="light"] .leads-title { color: #1a1a1a; }
    .leads-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .leads-btn-primary, .leads-btn-secondary {
      display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px;
      border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
      border: 1px solid #30363d; background: #21262d; color: #e6edf3;
      transition: all .12s;
    }
    .leads-btn-secondary:hover { background: #30363d; transform: translateY(-1px); }
    .leads-btn-primary {
      background: linear-gradient(135deg, #1f6feb, #388bfd); border-color: #1f6feb; color: #fff;
      box-shadow: 0 2px 8px rgba(31,111,235,0.3);
    }
    .leads-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(31,111,235,0.45); }
    .leads-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    [data-theme="light"] .leads-btn-secondary { background: #fff; color: #1a1a1a; border-color: #e2e8f0; }
    [data-theme="light"] .leads-btn-secondary:hover { background: #f6f8fa; }

    /* KPIs cards com ícone colorido por tipo */
    .leads-kpis {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 14px; margin-bottom: 24px;
    }
    .leads-kpi {
      background: #161b22; border: 1px solid #21262d; border-radius: 12px;
      padding: 18px; display: flex; align-items: center; gap: 14px;
      transition: transform .15s, border-color .15s;
    }
    .leads-kpi:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.3); }
    [data-theme="light"] .leads-kpi { background: #fff; border-color: #e2e8f0; }
    .leads-kpi-icon {
      width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .leads-kpi.total .leads-kpi-icon    { background: rgba(255,255,255,0.15); color: #f0f0f5; }
    .leads-kpi.buyers .leads-kpi-icon   { background: rgba(46,160,67,0.15);  color: #56d364; }
    .leads-kpi.rec .leads-kpi-icon      { background: rgba(191,90,242,0.15); color: #d2a8ff; }
    .leads-kpi.revenue .leads-kpi-icon  { background: rgba(247,196,80,0.15); color: #f7c450; }
    .leads-kpi.subs .leads-kpi-icon     { background: rgba(56,189,248,0.15); color: #38bdf8; }
    .leads-kpi.mrr .leads-kpi-icon      { background: rgba(34,197,94,0.15);  color: #4ade80; }
    .leads-kpi-text { flex: 1; min-width: 0; }
    .leads-kpi-label { font-size: 11px; font-weight: 600; color: #8b949e; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
    .leads-kpi-value { font-size: 22px; font-weight: 700; color: #e6edf3; letter-spacing: -.5px; line-height: 1.1; }
    .leads-kpi-hint  { font-size: 11px; color: #6e7681; margin-top: 2px; }
    [data-theme="light"] .leads-kpi-value { color: #1a1a1a; }

    /* Filtros */
    .leads-filters {
      display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
    }
    .leads-search {
      flex: 1; min-width: 240px;
      position: relative; display: flex; align-items: center;
    }
    .leads-search svg { position: absolute; left: 12px; color: #8b949e; pointer-events: none; }
    .leads-search input {
      width: 100%; box-sizing: border-box;
      background: #0d1117; border: 1px solid #30363d; border-radius: 7px;
      padding: 10px 12px 10px 34px; color: #e6edf3; font-size: 13px;
    }
    [data-theme="light"] .leads-search input { background: #fff; color: #1a1a1a; border-color: #e2e8f0; }
    .leads-search input:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
    .leads-filters select {
      background: #0d1117; border: 1px solid #30363d; border-radius: 7px;
      padding: 10px 14px; color: #e6edf3; font-size: 13px; cursor: pointer; min-width: 160px;
    }
    [data-theme="light"] .leads-filters select { background: #fff; color: #1a1a1a; border-color: #e2e8f0; }

    /* Tabela */
    .leads-table-wrap {
      background: #161b22; border: 1px solid #21262d; border-radius: 12px;
      overflow-x: auto; margin-bottom: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    [data-theme="light"] .leads-table-wrap { background: #fff; border-color: #e2e8f0; }
    .leads-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .leads-table thead th {
      text-align: left; padding: 13px 16px; font-weight: 600; font-size: 11px;
      color: #8b949e; text-transform: uppercase; letter-spacing: .6px;
      background: #0d1117; border-bottom: 1px solid #21262d; white-space: nowrap;
      position: sticky; top: 0; z-index: 1;
    }
    [data-theme="light"] .leads-table thead th { background: #f6f8fa; border-color: #e2e8f0; }
    .leads-table tbody tr {
      border-top: 1px solid #21262d; transition: background .1s;
      cursor: pointer;
    }
    .leads-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.012); }
    [data-theme="light"] .leads-table tbody tr { border-color: #f1f3f5; }
    [data-theme="light"] .leads-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.012); }
    .leads-table tbody tr:hover { background: rgba(255,255,255,0.07) !important; }
    .leads-table tbody td { padding: 14px 16px; color: #e6edf3; vertical-align: middle; }
    [data-theme="light"] .leads-table tbody td { color: #1a1a1a; }
    .leads-table .lead-product { max-width: 220px; word-break: break-word; line-height: 1.35; }
    .leads-table .lead-empty-cell { color: #6e7681; font-style: italic; font-size: 12px; }

    /* Avatar + contato */
    .lead-contact-cell { display: flex; align-items: center; gap: 11px; min-width: 220px; }
    .lead-avatar {
      width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 14px; color: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      letter-spacing: -.3px;
    }
    .lead-contact-text { min-width: 0; flex: 1; }
    .lead-contact-main { font-weight: 600; font-size: 13.5px; color: #e6edf3; }
    [data-theme="light"] .lead-contact-main { color: #1a1a1a; }
    .lead-contact-sub {
      font-size: 11.5px; color: #8b949e; margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
    }

    /* Status pills com bolinha */
    .leads-status-pill {
      display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
      border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
    }
    .leads-status-pill::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    }
    .leads-status-pill.lead       { background: rgba(139,148,158,0.18); color: #8b949e; }
    .leads-status-pill.buyer      { background: rgba(46,160,67,0.18);   color: #56d364; }
    .leads-status-pill.recorrente { background: rgba(191,90,242,0.18);  color: #d2a8ff; }
    .leads-status-pill.assinante  { background: rgba(56,189,248,0.18);  color: #7dd3fc; }
    .leads-status-pill.assinante::before { background: #38bdf8; box-shadow: 0 0 8px rgba(56,189,248,0.6); }

    /* Plataforma pill com ícone/letra */
    .leads-platform-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 3px 10px 3px 6px; border-radius: 999px;
      font-size: 11.5px; font-weight: 600; text-transform: capitalize;
      background: rgba(255,255,255,0.12); color: #f0f0f5;
    }
    .leads-platform-pill .icon {
      width: 16px; height: 16px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0;
    }
    .leads-platform-pill.hotmart  { background: rgba(255,82,0,0.13);   color: #ff7a44; }
    .leads-platform-pill.hotmart  .icon { background: #ff7a44; }
    .leads-platform-pill.mangofy  { background: rgba(255,193,7,0.15);  color: #d4a015; }
    .leads-platform-pill.mangofy  .icon { background: #d4a015; }
    .leads-platform-pill.duttify  { background: rgba(125,86,247,0.15); color: #a78bfa; }
    .leads-platform-pill.duttify  .icon { background: #a78bfa; }
    .leads-platform-pill.sharkbot { background: rgba(46,160,67,0.15);  color: #56d364; }
    .leads-platform-pill.sharkbot .icon { background: #56d364; }
    .leads-platform-pill.perfectpay { background: rgba(0,166,81,0.13);  color: #34d399; }
    .leads-platform-pill.perfectpay .icon { background: #00a651; }
    .leads-platform-pill.mundpay  { background: rgba(162,208,53,0.13); color: #a2d035; }
    .leads-platform-pill.mundpay  .icon { background: #a2d035; }
    .leads-platform-pill.digistore { background: rgba(25,154,220,0.13); color: #199adc; }
    .leads-platform-pill.digistore .icon { background: #199adc; }
    .leads-platform-pill.broski { background: rgba(229,229,229,0.13); color: #d4d4d4; }
    .leads-platform-pill.broski .icon { background: #d4d4d4; }
    .leads-platform-pill.xpag { background: rgba(56,189,248,0.13); color: #7dd3fc; }
    .leads-platform-pill.xpag .icon { background: #38bdf8; }
    .leads-platform-pill.sphere { background: rgba(167,139,250,0.13); color: #c4b5fd; }
    .leads-platform-pill.sphere .icon { background: #a78bfa; }
    .leads-platform-pill.explodely { background: rgba(251,146,60,0.13); color: #fdba74; }
    .leads-platform-pill.explodely .icon { background: #fb923c; }
    .leads-platform-pill.cooud { background: rgba(124,92,255,0.14); color: #b4a4ff; }
    .leads-platform-pill.cooud .icon { background: #7c5cff; }
    .leads-platform-pill.buygoods { background: rgba(89,165,44,0.13); color: #7cc94e; }
    .leads-platform-pill.buygoods .icon { background: #59A52C; }

    /* País com bandeira */
    .lead-country-cell { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
    .lead-country-cell .flag { font-size: 16px; line-height: 1; }

    /* Valor monetário em destaque */
    .lead-money { font-weight: 600; color: #56d364; font-variant-numeric: tabular-nums; }
    .lead-money.zero { color: #6e7681; font-weight: 400; }
    .lead-money-brl { color: #56d364; font-weight: 700; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
    .lead-money-orig { color: #8b949e; font-size: 0.7rem; font-variant-numeric: tabular-nums; margin-top: 1px; }
    body.light .lead-money-brl { color: #16a34a; }
    body.light .lead-money-orig { color: #64748b; }

    /* Vendas count com badge */
    .lead-vendas-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 24px; height: 22px; padding: 0 7px;
      border-radius: 6px; font-size: 12px; font-weight: 700;
      background: rgba(255,255,255,0.12); color: #f0f0f5;
    }
    .lead-vendas-badge.zero { background: rgba(139,148,158,0.12); color: #8b949e; }
    .lead-vendas-badge.multi { background: rgba(191,90,242,0.15); color: #d2a8ff; }

    /* Ação: chevron clean */
    .leads-action-btn {
      background: transparent; border: 1px solid transparent; color: #8b949e;
      width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: all .12s;
    }
    .leads-action-btn:hover { background: rgba(255,255,255,0.1); color: #f0f0f5; border-color: rgba(255,255,255,0.3); }
    .leads-action-btn svg { width: 14px; height: 14px; }

    /* Data com tooltip */
    .lead-date { font-size: 12.5px; color: #c9d1d9; white-space: nowrap; }
    [data-theme="light"] .lead-date { color: #4b5563; }
    .lead-date .rel { color: #6e7681; font-size: 11px; display: block; }

    .leads-empty { text-align: center; padding: 60px 20px; color: #8b949e; font-size: 13px; }
    .leads-empty .ico { font-size: 36px; opacity: .4; margin-bottom: 12px; display: block; }

    /* Paginação */
    .leads-pagination {
      display: flex; justify-content: space-between; align-items: center;
      padding: 4px 4px; font-size: 12px; color: #8b949e;
    }
    .leads-pagi-btns { display: flex; gap: 6px; }
    .leads-pagination button {
      background: #21262d; border: 1px solid #30363d; color: #c9d1d9;
      padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 600;
    }
    .leads-pagination button:hover:not(:disabled) { background: #30363d; }
    .leads-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
    [data-theme="light"] .leads-pagination button { background: #fff; color: #1a1a1a; border-color: #e2e8f0; }

    /* Drawer detalhes */
    .leads-drawer-bg {
      position: fixed; inset: 0; background: rgba(0,0,0,0.55);
      display: none; z-index: 9999; backdrop-filter: blur(4px);
    }
    .leads-drawer-bg.open { display: block; }
    .leads-drawer {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: 580px; max-width: 95vw;
      background: #0d1117; border-left: 1px solid #30363d;
      display: flex; flex-direction: column;
      box-shadow: -10px 0 40px rgba(0,0,0,0.4);
      animation: leadsDrawerIn 0.18s ease-out;
    }
    [data-theme="light"] .leads-drawer { background: #fff; border-color: #e2e8f0; }
    @keyframes leadsDrawerIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
    .leads-drawer-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 18px 22px; border-bottom: 1px solid #21262d;
    }
    [data-theme="light"] .leads-drawer-header { border-color: #e2e8f0; }
    .leads-drawer-header h3 { margin: 0; font-size: 16px; color: #e6edf3; }
    [data-theme="light"] .leads-drawer-header h3 { color: #1a1a1a; }
    .leads-drawer-header button {
      background: transparent; border: none; color: #8b949e; font-size: 22px;
      cursor: pointer; padding: 0 8px; line-height: 1;
    }
    .leads-drawer-header button:hover { color: #f85149; }
    .leads-drawer-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
    .leads-detail-group { margin-bottom: 22px; }
    .leads-detail-group h4 {
      margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .6px;
      color: #f0f0f5; text-transform: uppercase;
    }
    .leads-detail-row {
      display: grid; grid-template-columns: 130px 1fr; gap: 12px;
      padding: 7px 0; border-bottom: 1px solid rgba(48,54,61,0.4);
      font-size: 13px;
    }
    [data-theme="light"] .leads-detail-row { border-color: #f1f3f5; }
    .leads-detail-row .k { color: #8b949e; font-weight: 500; }
    .leads-detail-row .v { color: #e6edf3; word-break: break-all; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
    [data-theme="light"] .leads-detail-row .v { color: #1a1a1a; }
    .leads-detail-row .v.empty { color: #6e7681; font-style: italic; font-family: inherit; }

    .email-card {
      background: #161b22;
      border: 1px solid #21262d;
      border-radius: 14px;
      padding: 24px;
      margin-bottom: 16px;
    }
    .email-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .email-card-header h3 {
      font-size: 1rem;
      font-weight: 700;
      color: #e6edf3;
      margin: 0;
    }
    .email-btn-add {
      padding: 8px 16px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      color: #f0f0f5;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .email-btn-add:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); }

    .email-btn-primary {
      padding: 10px 20px;
      background: #238636;
      border: none;
      border-radius: 8px;
      color: #fff;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .email-btn-primary:hover { background: #2ea043; }
    .email-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

    .email-btn-secondary {
      padding: 8px 16px;
      background: rgba(139,148,158,0.1);
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #8b949e;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .email-btn-secondary:hover { background: rgba(139,148,158,0.18); color: #e6edf3; }

    .email-btn-danger {
      padding: 6px 12px;
      background: rgba(248,81,73,0.1);
      border: 1px solid rgba(248,81,73,0.25);
      border-radius: 6px;
      color: #f85149;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .email-btn-danger:hover { background: rgba(248,81,73,0.2); }

    .email-input {
      padding: 10px 14px;
      background: #0d1117;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #e6edf3;
      font-size: 0.85rem;
      flex: 1;
      transition: border-color 0.18s;
    }
    .email-input:focus { outline: none; border-color: #58a6ff; }

    .email-select {
      padding: 10px 14px;
      background: #0d1117;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #e6edf3;
      font-size: 0.85rem;
      min-width: 180px;
      cursor: pointer;
    }
    .email-select:focus { outline: none; border-color: #58a6ff; }

    .email-textarea {
      padding: 12px 14px;
      background: #0d1117;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #e6edf3;
      font-size: 0.82rem;
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      width: 100%;
      resize: vertical;
      min-height: 150px;
      transition: border-color 0.18s;
    }
    .email-textarea:focus { outline: none; border-color: #58a6ff; }

    .email-label {
      font-size: 0.8rem;
      font-weight: 600;
      color: #8b949e;
      min-width: 110px;
      flex-shrink: 0;
    }
    .email-form-grid { display: flex; flex-direction: column; gap: 14px; }
    .email-form-row { display: flex; align-items: center; gap: 12px; }

    .email-status {
      font-size: 0.78rem;
      margin-top: 8px;
      min-height: 20px;
    }
    .email-loading {
      text-align: center;
      color: #8b949e;
      font-size: 0.82rem;
      padding: 32px;
    }

    /* ═══════════════════════════════════════════════
       FLUXOS Automação de Email (redesign profissional)
    ═══════════════════════════════════════════════ */
    .flows-wrap { padding: 4px 0; }

    /* Header da seção com title + pulse + actions */
    .flows-section-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
    }
    .flows-section-title {
      margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #e6edf3;
      letter-spacing: -.3px; display: flex; align-items: center; gap: 10px;
    }
    .flows-section-title .pulse {
      width: 8px; height: 8px; border-radius: 50%; background: #2ea043;
      box-shadow: 0 0 0 0 rgba(46,160,67,0.7);
      animation: leadsPulse 2s infinite;
    }
    .flows-section-sub { margin: 0; font-size: 12.5px; color: #8b949e; }
    [data-theme="light"] .flows-section-title { color: #1a1a1a; }
    .flows-create-btn {
      display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px;
      background: linear-gradient(135deg, #1f6feb, #388bfd); border-color: #1f6feb;
      color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600;
      cursor: pointer; box-shadow: 0 2px 8px rgba(31,111,235,0.3);
      transition: transform .12s, box-shadow .12s;
    }
    .flows-create-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(31,111,235,0.45); }

    /* KPIs */
    .flows-kpis {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 12px; margin-bottom: 22px;
    }
    @media (max-width: 900px) { .flows-kpis { grid-template-columns: repeat(2, 1fr); } }
    .flows-kpi {
      background: #161b22; border: 1px solid #21262d; border-radius: 12px;
      padding: 14px 16px; display: flex; align-items: center; gap: 12px;
      transition: transform .15s, border-color .15s;
    }
    .flows-kpi:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.3); }
    [data-theme="light"] .flows-kpi { background: #fff; border-color: #e2e8f0; }
    .flows-kpi-icon {
      width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .flows-kpi.total .flows-kpi-icon  { background: rgba(255,255,255,0.15); color: #f0f0f5; }
    .flows-kpi.active .flows-kpi-icon { background: rgba(46,160,67,0.15); color: #56d364; }
    .flows-kpi.sent .flows-kpi-icon   { background: rgba(247,196,80,0.15); color: #f7c450; }
    .flows-kpi.rate .flows-kpi-icon   { background: rgba(191,90,242,0.15); color: #d2a8ff; }
    .flows-kpi-text { flex: 1; min-width: 0; }
    .flows-kpi-label { font-size: 10.5px; font-weight: 600; color: #8b949e; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
    .flows-kpi-value { font-size: 19px; font-weight: 700; color: #e6edf3; line-height: 1.15; letter-spacing: -.3px; }
    [data-theme="light"] .flows-kpi-value { color: #1a1a1a; }

    /* Help banner */
    .flows-help {
      display: flex; align-items: flex-start; gap: 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 10px; padding: 12px 14px; margin-bottom: 18px;
    }
    .flows-help svg { flex-shrink: 0; color: #f0f0f5; margin-top: 1px; }
    .flows-help-text { font-size: 12.5px; color: #c9d1d9; line-height: 1.55; }
    [data-theme="light"] .flows-help-text { color: #4b5563; }
    .flows-help-text b { color: #e6edf3; }
    [data-theme="light"] .flows-help-text b { color: #1a1a1a; }

    /* Cards de fluxo novo design */
    .flow-card-body-4 { display: grid; grid-template-columns: 1.4fr 1.2fr 0.8fr 1fr; gap: 16px; }
    @media (max-width: 900px) { .flow-card-body-4 { grid-template-columns: 1fr 1fr; } }
    .flow-delay-chip {
      display: inline-block; background: rgba(88,166,255,0.1); color: #79c0ff;
      border: 1px solid rgba(88,166,255,0.25); border-radius: 20px;
      padding: 2px 11px; font-size: 0.74rem; font-weight: 700;
    }
    .flow-info-label { text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.62rem !important; }
    .flow-card {
      background: #161b22; border: 1px solid #21262d; border-radius: 12px;
      margin-bottom: 12px; transition: all .15s; overflow: hidden;
      box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    }
    [data-theme="light"] .flow-card { background: #fff; border-color: #e2e8f0; }
    .flow-card:hover {
      border-color: rgba(255,255,255,0.35);
      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
      transform: translateY(-1px);
    }
    .flow-card.inactive { opacity: .65; }
    .flow-card.inactive:hover { opacity: .85; }

    /* Linha superior: platform icon + name + toggle */
    .flow-card-top {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 18px; border-bottom: 1px solid #21262d;
    }
    [data-theme="light"] .flow-card-top { border-color: #f1f3f5; }
    .flow-platform-icon {
      width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 800; color: #fff;
    }
    .flow-platform-icon.hotmart  { background: linear-gradient(135deg,#ff7a44,#e84e0f); }
    .flow-platform-icon.mangofy  { background: linear-gradient(135deg,#fbcb35,#d4a015); }
    .flow-platform-icon.duttify  { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
    .flow-platform-icon.sharkbot { background: linear-gradient(135deg,#56d364,#15803d); }
    .flow-platform-icon.perfectpay { background: linear-gradient(135deg,#00a651,#006837); }
    .flow-platform-icon.mundpay   { background: linear-gradient(135deg,#a2d035,#5a8f15); }
    .flow-platform-icon.digistore { background: linear-gradient(135deg,#199adc,#3246a0); }
    .flow-platform-icon.broski { background: linear-gradient(135deg,#525252,#0f0f0f); }
    .flow-platform-icon.xpag { background: linear-gradient(135deg,#0ea5e9,#0b0f1a); }
    .flow-platform-icon.sphere { background: linear-gradient(135deg,#7c3aed,#0b0f1a); }
    .flow-platform-icon.explodely { background: linear-gradient(135deg,#f97316,#0b0f1a); }
    .flow-platform-icon.cooud { background: linear-gradient(135deg,#7c5cff,#22d3ee); }
    .flow-platform-icon.buygoods { background: linear-gradient(135deg,#59A52C,#2f6b12); }
    .flow-platform-icon.all      { background: linear-gradient(135deg,#f0f0f5,#1f6feb); }
    .flow-card-headinfo { flex: 1; min-width: 0; }
    .flow-card-name {
      font-weight: 700; color: #e6edf3; font-size: 15px;
      margin-bottom: 4px; letter-spacing: -.2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    [data-theme="light"] .flow-card-name { color: #1a1a1a; }
    .flow-card-trigger {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .flow-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
      white-space: nowrap;
    }
    .flow-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
    .flow-pill.on  { background: rgba(46,160,67,.18); color: #56d364; }
    .flow-pill.off { background: rgba(139,148,158,.18); color: #8b949e; }
    .flow-trigger-pill {
      display: inline-flex; align-items: center; padding: 3px 9px;
      border-radius: 6px; font-size: 11px; font-weight: 600;
      background: rgba(255,255,255,.12); color: #f0f0f5;
    }
    .flow-trigger-pill.lead       { background: rgba(139,148,158,.18); color: #8b949e; }
    .flow-trigger-pill.compra_nova { background: rgba(46,160,67,.18); color: #56d364; }
    .flow-trigger-pill.recorrente  { background: rgba(191,90,242,.18); color: #d2a8ff; }
    .flow-trigger-pill.qualquer    { background: rgba(247,196,80,.18); color: #f7c450; }

    /* Toggle switch profissional */
    .flow-toggle {
      width: 42px; height: 24px; background: #30363d; border-radius: 12px;
      position: relative; cursor: pointer; transition: background .15s;
      border: none; padding: 0; flex-shrink: 0;
    }
    .flow-toggle::after {
      content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
      background: #e6edf3; border-radius: 50%; transition: left .18s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .flow-toggle.on { background: #2ea043; }
    .flow-toggle.on::after { left: 21px; background: #fff; }

    /* Corpo: informações em grid */
    .flow-card-body {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px; padding: 14px 18px;
    }
    .flow-info-cell { min-width: 0; }
    .flow-info-label {
      font-size: 10.5px; color: #6e7681; text-transform: uppercase;
      letter-spacing: .4px; font-weight: 600; margin-bottom: 4px;
      display: flex; align-items: center; gap: 5px;
    }
    .flow-info-value {
      font-size: 13px; color: #e6edf3; font-weight: 500;
      line-height: 1.4; word-break: break-word;
    }
    [data-theme="light"] .flow-info-value { color: #1a1a1a; }
    .flow-info-value.muted { color: #6e7681; font-weight: 400; font-style: italic; }
    .flow-product-chip {
      display: inline-block; padding: 2px 8px;
      background: rgba(255,255,255,.1); color: #f0f0f5;
      border-radius: 4px; font-size: 11.5px; font-weight: 500;
      margin-right: 4px; margin-bottom: 3px;
    }

    /* Stats + footer */
    .flow-card-footer {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 12px 18px; background: rgba(13,17,23,0.5); border-top: 1px solid #21262d;
    }
    [data-theme="light"] .flow-card-footer { background: #f9fafb; border-color: #f1f3f5; }
    .flow-stats { display: flex; align-items: center; gap: 16px; font-size: 12px; }
    .flow-stat-item { display: inline-flex; align-items: center; gap: 5px; color: #8b949e; font-weight: 500; }
    .flow-stat-item.sent strong   { color: #56d364; }
    .flow-stat-item.failed strong { color: #f85149; }
    .flow-stat-item strong { font-weight: 700; font-size: 13px; }
    .flow-stat-sep { color: #30363d; }
    .flow-last-fired { font-size: 11.5px; color: #6e7681; }

    .flow-actions { display: flex; gap: 6px; }
    .flow-btn-icon {
      width: 32px; height: 32px; background: transparent; border: 1px solid #30363d;
      border-radius: 7px; color: #8b949e; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: all .12s;
    }
    .flow-btn-icon:hover { border-color: #58a6ff; color: #f0f0f5; background: rgba(255,255,255,0.08); }
    .flow-btn-icon.danger:hover { border-color: #f85149; color: #f85149; background: rgba(248,81,73,0.08); }
    .flow-btn-icon svg { width: 14px; height: 14px; }
    [data-theme="light"] .flow-btn-icon { border-color: #e2e8f0; }

    /* Empty state */
    .flow-empty {
      text-align: center; padding: 60px 20px; color: #8b949e;
      background: rgba(255,255,255,.02); border: 2px dashed #30363d;
      border-radius: 12px;
    }
    .flow-empty .ico {
      font-size: 48px; opacity: .35; display: block; margin-bottom: 14px;
    }
    .flow-empty h4 { margin: 0 0 6px; color: #c9d1d9; font-size: 15px; font-weight: 700; }
    [data-theme="light"] .flow-empty h4 { color: #1a1a1a; }
    .flow-empty p { margin: 0 0 18px; font-size: 13px; color: #8b949e; line-height: 1.5; }
    .flow-empty .flows-create-btn { display: inline-flex; }

    /* ═══════════════════════════════════════════════
       HISTORICO de Envios redesign profissional
    ═══════════════════════════════════════════════ */
    .hist-wrap { padding: 4px 0; }
    .hist-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
    }
    .hist-title {
      margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #e6edf3;
      letter-spacing: -.3px; display: flex; align-items: center; gap: 10px;
    }
    .hist-title .pulse {
      width: 8px; height: 8px; border-radius: 50%; background: #2ea043;
      box-shadow: 0 0 0 0 rgba(46,160,67,0.7);
      animation: leadsPulse 2s infinite;
    }
    [data-theme="light"] .hist-title { color: #1a1a1a; }
    .hist-sub { margin: 0; font-size: 12.5px; color: #8b949e; }
    .hist-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .hist-btn-secondary, .hist-btn-primary {
      display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px;
      border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
      border: 1px solid #30363d; background: #21262d; color: #e6edf3;
      transition: all .12s;
    }
    .hist-btn-secondary:hover { background: #30363d; transform: translateY(-1px); }
    .hist-btn-primary {
      background: linear-gradient(135deg, #1f6feb, #388bfd); border-color: #1f6feb; color: #fff;
      box-shadow: 0 2px 8px rgba(31,111,235,0.3);
    }
    .hist-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(31,111,235,0.45); }
    .hist-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    [data-theme="light"] .hist-btn-secondary { background: #fff; color: #1a1a1a; border-color: #e2e8f0; }
    [data-theme="light"] .hist-btn-secondary:hover { background: #f6f8fa; }

    /* KPIs */
    .hist-kpis {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 12px; margin-bottom: 18px;
    }
    @media (max-width: 900px) { .hist-kpis { grid-template-columns: repeat(2, 1fr); } }
    .hist-kpi {
      background: #161b22; border: 1px solid #21262d; border-radius: 12px;
      padding: 14px 16px; display: flex; align-items: center; gap: 12px;
      transition: transform .15s, border-color .15s;
    }
    .hist-kpi:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.3); }
    [data-theme="light"] .hist-kpi { background: #fff; border-color: #e2e8f0; }
    .hist-kpi-icon {
      width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .hist-kpi.total .hist-kpi-icon    { background: rgba(255,255,255,0.15); color: #f0f0f5; }
    .hist-kpi.success .hist-kpi-icon  { background: rgba(46,160,67,0.15); color: #56d364; }
    .hist-kpi.failed .hist-kpi-icon   { background: rgba(248,81,73,0.15); color: #f85149; }
    .hist-kpi.rate .hist-kpi-icon     { background: rgba(191,90,242,0.15); color: #d2a8ff; }
    .hist-kpi-text { flex: 1; min-width: 0; }
    .hist-kpi-label { font-size: 10.5px; font-weight: 600; color: #8b949e; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
    .hist-kpi-value { font-size: 20px; font-weight: 700; color: #e6edf3; line-height: 1.1; letter-spacing: -.3px; }
    [data-theme="light"] .hist-kpi-value { color: #1a1a1a; }

    /* Filtros */
    .hist-filters {
      display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center;
    }
    .hist-search {
      flex: 1; min-width: 240px;
      position: relative; display: flex; align-items: center;
    }
    .hist-search svg { position: absolute; left: 12px; color: #8b949e; pointer-events: none; }
    .hist-search input {
      width: 100%; box-sizing: border-box;
      background: #0d1117; border: 1px solid #30363d; border-radius: 7px;
      padding: 10px 12px 10px 34px; color: #e6edf3; font-size: 13px;
     padding-left: 34px !important; }
    [data-theme="light"] .hist-search input { background: #fff; color: #1a1a1a; border-color: #e2e8f0; }
    .hist-search input:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
    .hist-filter-chips { display: flex; gap: 6px; }
    .hist-chip {
      background: #21262d; border: 1px solid #30363d; color: #8b949e;
      padding: 8px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
      cursor: pointer; transition: all .12s;
    }
    .hist-chip:hover { color: #e6edf3; }
    .hist-chip.active { background: #1f6feb; border-color: #1f6feb; color: #fff; }
    [data-theme="light"] .hist-chip { background: #fff; border-color: #e2e8f0; }
    [data-theme="light"] .hist-chip:hover { background: #f6f8fa; color: #1a1a1a; }

    /* Tabela */
    .hist-table-wrap {
      background: #161b22; border: 1px solid #21262d; border-radius: 12px;
      overflow-x: auto; margin-bottom: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    [data-theme="light"] .hist-table-wrap { background: #fff; border-color: #e2e8f0; }
    .hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .hist-table thead th {
      text-align: left; padding: 13px 16px; font-weight: 600; font-size: 11px;
      color: #8b949e; text-transform: uppercase; letter-spacing: .6px;
      background: #0d1117; border-bottom: 1px solid #21262d; white-space: nowrap;
    }
    [data-theme="light"] .hist-table thead th { background: #f6f8fa; border-color: #e2e8f0; }
    .hist-table tbody tr {
      border-top: 1px solid #21262d; transition: background .1s; cursor: pointer;
    }
    .hist-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.012); }
    [data-theme="light"] .hist-table tbody tr { border-color: #f1f3f5; }
    [data-theme="light"] .hist-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.012); }
    .hist-table tbody tr:hover { background: rgba(255,255,255,0.07) !important; }
    .hist-table tbody td { padding: 14px 16px; color: #e6edf3; vertical-align: middle; }
    [data-theme="light"] .hist-table tbody td { color: #1a1a1a; }

    /* Data com relativa */
    .hist-date { font-size: 12.5px; color: #c9d1d9; white-space: nowrap; }
    [data-theme="light"] .hist-date { color: #4b5563; }
    .hist-date .rel { color: #6e7681; font-size: 11px; display: block; margin-top: 2px; }

    /* Destinatário com avatar (reusa estilo .lead-avatar) */
    .hist-recipient { display: flex; align-items: center; gap: 11px; min-width: 220px; }
    .hist-avatar {
      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 12.5px; color: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      letter-spacing: -.3px;
    }
    .hist-recipient-text { min-width: 0; flex: 1; }
    .hist-recipient-email {
      font-weight: 500; font-size: 13px; color: #e6edf3;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
      font-family: 'JetBrains Mono', monospace;
    }
    [data-theme="light"] .hist-recipient-email { color: #1a1a1a; }

    /* Assunto + subject */
    .hist-subject {
      font-weight: 600; font-size: 13px; color: #e6edf3;
      max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    [data-theme="light"] .hist-subject { color: #1a1a1a; }

    /* Origem (fluxo / template / manual) */
    .hist-origin {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11.5px; color: #f0f0f5; font-weight: 600;
      background: rgba(255,255,255,0.1);
      padding: 3px 9px; border-radius: 5px;
      max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .hist-origin.manual   { background: rgba(247,196,80,0.12); color: #f7c450; }
    .hist-origin.unknown  { background: rgba(139,148,158,0.12); color: #8b949e; }

    /* Status pill */
    .hist-status {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
      white-space: nowrap;
    }
    .hist-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .hist-status.sent    { background: rgba(46,160,67,.18); color: #56d364; }
    .hist-status.failed  { background: rgba(248,81,73,.18); color: #f85149; }
    .hist-status.queued  { background: rgba(247,196,80,.18); color: #f7c450; }

    /* Action chevron (reusa estilo de leads) */
    .hist-action-btn {
      background: transparent; border: 1px solid transparent; color: #8b949e;
      width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: all .12s;
    }
    .hist-action-btn:hover { background: rgba(255,255,255,0.1); color: #f0f0f5; border-color: rgba(255,255,255,0.3); }
    .hist-action-btn svg { width: 14px; height: 14px; }

    /* Empty */
    .hist-empty { text-align: center; padding: 60px 20px; color: #8b949e; font-size: 13px; }
    .hist-empty .ico { font-size: 36px; opacity: .4; margin-bottom: 12px; display: block; }

    /* Paginação */
    .hist-pagination {
      display: flex; justify-content: space-between; align-items: center;
      padding: 4px 4px; font-size: 12px; color: #8b949e;
    }
    .hist-pagi-btns { display: flex; gap: 6px; }
    .hist-pagination button {
      background: #21262d; border: 1px solid #30363d; color: #c9d1d9;
      padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 600;
    }
    .hist-pagination button:hover:not(:disabled) { background: #30363d; }
    .hist-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
    [data-theme="light"] .hist-pagination button { background: #fff; color: #1a1a1a; border-color: #e2e8f0; }

    /* Drawer */
    .hist-drawer-bg {
      position: fixed; inset: 0; background: rgba(0,0,0,0.55);
      display: none; z-index: 9999; backdrop-filter: blur(4px);
    }
    .hist-drawer-bg.open { display: block; }
    .hist-drawer {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: 580px; max-width: 95vw;
      background: #0d1117; border-left: 1px solid #30363d;
      display: flex; flex-direction: column;
      box-shadow: -10px 0 40px rgba(0,0,0,0.4);
      animation: leadsDrawerIn 0.18s ease-out;
    }
    [data-theme="light"] .hist-drawer { background: #fff; border-color: #e2e8f0; }
    .hist-drawer-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 18px 22px; border-bottom: 1px solid #21262d;
    }
    [data-theme="light"] .hist-drawer-header { border-color: #e2e8f0; }
    .hist-drawer-header h3 { margin: 0; font-size: 16px; color: #e6edf3; }
    [data-theme="light"] .hist-drawer-header h3 { color: #1a1a1a; }
    .hist-drawer-header button {
      background: transparent; border: none; color: #8b949e; font-size: 22px;
      cursor: pointer; padding: 0 8px; line-height: 1;
    }
    .hist-drawer-header button:hover { color: #f85149; }
    .hist-drawer-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
    .hist-detail-group { margin-bottom: 22px; }
    .hist-detail-group h4 {
      margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .6px;
      color: #f0f0f5; text-transform: uppercase;
    }
    .hist-detail-row {
      display: grid; grid-template-columns: 130px 1fr; gap: 12px;
      padding: 7px 0; border-bottom: 1px solid rgba(48,54,61,0.4);
      font-size: 13px;
    }
    [data-theme="light"] .hist-detail-row { border-color: #f1f3f5; }
    .hist-detail-row .k { color: #8b949e; font-weight: 500; }
    .hist-detail-row .v { color: #e6edf3; word-break: break-all; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
    [data-theme="light"] .hist-detail-row .v { color: #1a1a1a; }
    .hist-detail-row .v.empty { color: #6e7681; font-style: italic; font-family: inherit; }

    /* ═══════════════════════════════════════════════
       ENVIO MANUAL redesign (split form + live preview)
    ═══════════════════════════════════════════════ */
    .send-wrap { padding: 4px 0; }
    .send-header { margin-bottom: 20px; }
    .send-title {
      margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #e6edf3;
      letter-spacing: -.3px; display: flex; align-items: center; gap: 10px;
    }
    .send-title .pulse {
      width: 8px; height: 8px; border-radius: 50%; background: #2ea043;
      box-shadow: 0 0 0 0 rgba(46,160,67,0.7);
      animation: leadsPulse 2s infinite;
    }
    [data-theme="light"] .send-title { color: #1a1a1a; }
    .send-sub { margin: 0; font-size: 12.5px; color: #8b949e; max-width: 720px; }

    /* Split layout */
    .send-split {
      display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
      align-items: start;
    }
    @media (max-width: 1100px) {
      .send-split { grid-template-columns: 1fr; }
    }

    /* Form panel */
    .send-form-panel {
      background: #161b22; border: 1px solid #21262d; border-radius: 12px;
      padding: 4px 18px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    [data-theme="light"] .send-form-panel { background: #fff; border-color: #e2e8f0; }

    .send-group { padding: 18px 0; border-bottom: 1px solid #21262d; }
    .send-group:last-of-type { border-bottom: none; }
    [data-theme="light"] .send-group { border-color: #f1f3f5; }
    .send-group-title {
      display: flex; align-items: center; gap: 7px;
      font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #f0f0f5;
      text-transform: uppercase; margin-bottom: 12px;
    }
    .send-group-title svg { color: #f0f0f5; }

    .send-field-row { display: flex; gap: 10px; }
    .send-field { flex: 1; min-width: 0; }
    .send-field label {
      display: flex; justify-content: space-between; align-items: baseline;
      font-size: 12px; font-weight: 600; color: #c9d1d9; margin-bottom: 6px;
    }
    [data-theme="light"] .send-field label { color: #4b5563; }
    .send-field-hint { font-size: 10.5px; font-weight: 400; color: #6e7681; }
    .send-field input,
    .send-field select,
    .send-field textarea {
      width: 100%; box-sizing: border-box;
      background: #0d1117; border: 1px solid #30363d; border-radius: 7px;
      padding: 10px 12px; color: #e6edf3; font-size: 13px;
      font-family: inherit;
    }
    .send-field textarea {
      font-family: 'JetBrains Mono', 'Courier New', monospace;
      font-size: 12px; min-height: 180px; resize: vertical; line-height: 1.5;
    }
    [data-theme="light"] .send-field input,
    [data-theme="light"] .send-field select,
    [data-theme="light"] .send-field textarea {
      background: #fff; color: #1a1a1a; border-color: #e2e8f0;
    }
    .send-field input:focus,
    .send-field select:focus,
    .send-field textarea:focus {
      outline: none; border-color: #58a6ff;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
    }
    .send-field-status {
      font-size: 11px; margin-top: 4px; min-height: 14px;
      display: flex; align-items: center; gap: 4px;
    }
    .send-field-status.ok      { color: #56d364; }
    .send-field-status.warn    { color: #f7c450; }
    .send-field-status.error   { color: #f85149; }

    .send-field-with-action { display: flex; gap: 6px; }
    .send-field-with-action select { flex: 1; }
    .send-btn-ghost {
      display: inline-flex; align-items: center; gap: 5px;
      background: transparent; border: 1px solid #30363d; color: #8b949e;
      padding: 0 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
      cursor: pointer; transition: all .12s; white-space: nowrap;
    }
    .send-btn-ghost:hover { border-color: #58a6ff; color: #f0f0f5; background: rgba(255,255,255,0.06); }

    /* Action bar */
    .send-action-bar {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 0 4px;
    }
    .send-btn-primary {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 12px 24px; border-radius: 8px;
      font-size: 14px; font-weight: 700; cursor: pointer;
      background: linear-gradient(135deg, #1f6feb, #388bfd);
      border: none; color: #fff;
      box-shadow: 0 3px 10px rgba(31,111,235,0.35);
      transition: transform .12s, box-shadow .12s;
    }
    .send-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(31,111,235,0.5); }
    .send-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    .send-btn-primary.sending {
      background: linear-gradient(135deg,#888,#aaa); cursor: wait;
    }

    .send-status {
      font-size: 13px; font-weight: 600; flex: 1;
      padding: 8px 12px; border-radius: 7px; display: none;
    }
    .send-status.show { display: block; }
    .send-status.ok    { background: rgba(46,160,67,0.12); color: #56d364; border: 1px solid rgba(46,160,67,0.3); }
    .send-status.error { background: rgba(248,81,73,0.12); color: #f85149; border: 1px solid rgba(248,81,73,0.3); }
    .send-status.info  { background: rgba(255,255,255,0.12); color: #f0f0f5; border: 1px solid rgba(255,255,255,0.3); }

    /* Preview panel */
    .send-preview-panel {
      background: #161b22; border: 1px solid #21262d; border-radius: 12px;
      overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      position: sticky; top: 20px;
    }
    [data-theme="light"] .send-preview-panel { background: #fff; border-color: #e2e8f0; }
    .send-preview-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; border-bottom: 1px solid #21262d;
      background: #0d1117;
    }
    [data-theme="light"] .send-preview-header { background: #f6f8fa; border-color: #e2e8f0; }
    .send-preview-tag {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 700; color: #f0f0f5;
      text-transform: uppercase; letter-spacing: .5px;
    }
    .send-preview-sub { font-size: 11px; color: #6e7681; }

    /* Gmail-like header */
    .send-preview-gmail {
      padding: 16px 18px 14px; border-bottom: 1px solid #21262d;
      background: #fff;
    }
    [data-theme="dark"] .send-preview-gmail { background: #fff; }
    .send-pgmail-subject {
      font-size: 15px; font-weight: 600; color: #202124;
      margin-bottom: 10px; word-break: break-word; line-height: 1.35;
    }
    .send-pgmail-meta { display: flex; align-items: center; gap: 10px; }
    .send-pgmail-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: #1a73e8; color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 13px; flex-shrink: 0;
    }
    .send-pgmail-info { min-width: 0; flex: 1; }
    .send-pgmail-from { font-size: 13px; color: #202124; font-weight: 600; }
    .send-pgmail-fromaddr { color: #5f6368; font-weight: 400; font-size: 11.5px; }
    .send-pgmail-to { font-size: 11.5px; color: #5f6368; margin-top: 1px; }
    .send-pgmail-to span { color: #202124; }

    .send-preview-frame-wrap {
      background: #fff; padding: 0; overflow: hidden;
    }
    .send-preview-iframe {
      width: 100%; height: 540px; border: none; display: block; background: #fff;
    }

    /* Flow editor modal */
    .flow-modal-bg {
      position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center; z-index: 9000;
      padding: 20px;
    }
    .flow-modal-bg.hidden { display: none; }
    .flow-modal {
      background: #0d1117; border: 1px solid #30363d; border-radius: 16px;
      max-width: 720px; width: 100%; max-height: 90vh; display: flex; flex-direction: column;
      box-shadow: 0 30px 80px rgba(0,0,0,.5);
    }
    .flow-modal-header {
      padding: 18px 22px; border-bottom: 1px solid #21262d;
      display: flex; justify-content: space-between; align-items: center;
    }
    .flow-modal-header h3 { margin: 0; color: #e6edf3; font-size: 1.05rem; }
    .flow-modal-close {
      background: transparent; border: none; color: #8b949e; font-size: 1.6rem;
      cursor: pointer; line-height: 1; padding: 0 6px;
    }
    .flow-modal-close:hover { color: #e6edf3; }
    .flow-modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
    .flow-modal-footer {
      padding: 14px 22px; border-top: 1px solid #21262d;
      display: flex; justify-content: flex-end; gap: 8px;
    }
    .hist-chip-dot {
      display: inline-block; width: 7px; height: 7px; border-radius: 50%;
      margin-right: 6px; vertical-align: 1px;
    }
    .hist-chip-dot.green { background: #3fb950; box-shadow: 0 0 5px rgba(63,185,80,0.5); }
    .hist-chip-dot.red { background: #f85149; box-shadow: 0 0 5px rgba(248,81,73,0.5); }
    .dns-copy-btn {
      flex-shrink: 0; margin-left: 8px;
      background: rgba(139,148,158,0.08); border: 1px solid rgba(139,148,158,0.25);
      color: #8b949e; border-radius: 6px; width: 24px; height: 24px;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.13s;
    }
    .dns-copy-btn:hover { color: #58a6ff; border-color: rgba(88,166,255,0.5); background: rgba(88,166,255,0.08); }
    .dns-copy-btn.copied { color: #3fb950; border-color: rgba(63,185,80,0.5); background: rgba(63,185,80,0.1); }
    .domain-dns-field { display: flex; align-items: center; }
    .flow-section-title {
      font-size: 0.72rem; font-weight: 700; color: #8b949e; letter-spacing: .08em;
      text-transform: uppercase; margin: 20px 0 10px;
    }
    /* ── BM SELECT: dropdown próprio (mata o popup nativo do sistema) ── */
    .bm-sel-wrap { position: relative; }
    .bm-sel {
      width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
      background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
      color: #e6edf3; padding: 10px 12px; font-size: 0.82rem; font-weight: 500;
      cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; text-align: left;
    }
    .bm-sel:hover { border-color: #58a6ff; }
    .bm-sel.open, .bm-sel:focus-visible { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.15); }
    .bm-sel-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bm-sel-chev { flex-shrink: 0; color: #8b949e; transition: transform 0.15s ease-out; }
    .bm-sel.open .bm-sel-chev { transform: rotate(180deg); }
    .bm-sel-panel {
      position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
      background: #161b22; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
      box-shadow: 0 16px 40px -8px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.35);
      max-height: 264px; overflow-y: auto; padding: 5px;
      opacity: 0; transform: translateY(-4px) scale(0.99);
      transition: opacity 0.13s ease-out, transform 0.13s cubic-bezier(0.21, 1.02, 0.73, 1);
      scrollbar-width: thin; scrollbar-color: #30363d transparent;
    }
    .bm-sel-panel::-webkit-scrollbar { width: 4px; }
    .bm-sel-panel::-webkit-scrollbar-thumb { background: #30363d; border-radius: 99px; }
    .bm-sel-panel.in { opacity: 1; transform: translateY(0) scale(1); }
    .bm-sel-opt {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 8px 10px; border-radius: 7px; cursor: pointer;
      font-size: 0.8rem; color: #c9d1d9; transition: background 0.1s, color 0.1s;
    }
    .bm-sel-opt:hover { background: rgba(88,166,255,0.1); color: #e6edf3; }
    .bm-sel-opt.sel { color: #58a6ff; font-weight: 600; }
    .bm-sel-opt.sel svg { flex-shrink: 0; }
    .bm-sel-opt.dis { opacity: 0.4; cursor: default; }
    .bm-sel-opt.dis:hover { background: none; }
    .bm-sel-group {
      font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
      color: #6e7681; padding: 8px 10px 4px;
    }
    body.light .bm-sel { background: #fff; border-color: #cbd5e1; color: #0f172a; }
    body.light .bm-sel-panel { background: #fff; border-color: #e2e8f0; box-shadow: 0 16px 40px -8px rgba(15,23,42,0.2); }
    body.light .bm-sel-opt { color: #334155; }
    body.light .bm-sel-opt:hover { background: #eff6ff; color: #0f172a; }

    /* ── Novo Fluxo: passo a passo ── */
    .flowstep {
      background: rgba(13,17,23,0.55);
      border: 1px solid rgba(110,118,129,0.16);
      border-radius: 12px;
      padding: 16px 16px 14px;
      margin-bottom: 14px;
    }
    .flowstep-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .flowstep-num {
      flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
      background: rgba(88,166,255,0.12); color: #58a6ff;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.78rem; font-weight: 800;
    }
    .flowstep-title { font-size: 0.86rem; font-weight: 700; color: #e6edf3; display: flex; align-items: center; gap: 8px; }
    .flowstep-sub { font-size: 0.7rem; color: #6e7681; margin-top: 1px; }
    .flowstep-opt {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
      color: #8b949e; background: rgba(139,148,158,0.12); border-radius: 20px; padding: 2px 9px;
    }
    .flowstep .flow-row:last-child, .flowstep .flow-row-2col:last-child, .flowstep .flow-row-3col:last-child { margin-bottom: 0; }
    .flow-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; font-size: 0.66rem; color: #6e7681; }
    .flow-vars code {
      background: rgba(139,148,158,0.1); border: 1px solid rgba(139,148,158,0.2);
      border-radius: 5px; padding: 1px 6px; font-size: 0.63rem; color: #8b949e;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace; cursor: default;
    }
    .flow-active-row {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      background: rgba(13,17,23,0.55); border: 1px solid rgba(110,118,129,0.16);
      border-radius: 12px; padding: 13px 16px; cursor: pointer; margin: 0;
    }
    .flow-active-title { font-size: 0.82rem; font-weight: 700; color: #e6edf3; }
    .flow-active-sub { font-size: 0.68rem; color: #6e7681; margin-top: 1px; }
    /* switch */
    input.bm-switch {
      appearance: none; -webkit-appearance: none;
      width: 40px; height: 22px; border-radius: 99px; position: relative;
      background: #30363d; cursor: pointer; transition: background 0.18s; flex-shrink: 0;
      border: none; outline: none;
    }
    input.bm-switch::after {
      content: ''; position: absolute; top: 3px; left: 3px;
      width: 16px; height: 16px; border-radius: 50%; background: #fff;
      transition: transform 0.18s cubic-bezier(0.21, 1.02, 0.73, 1);
      box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    input.bm-switch:checked { background: #238636; }
    input.bm-switch:checked::after { transform: translateX(18px); }
    input.bm-switch:focus-visible { box-shadow: 0 0 0 3px rgba(88,166,255,0.25); }
    body.light .flowstep, body.light .flow-active-row { background: #f8fafc; border-color: #e2e8f0; }
    body.light .flowstep-title, body.light .flow-active-title { color: #0f172a; }
    .flow-row { margin-bottom: 12px; }
    .flow-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
    .flow-row-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
    .flow-row label, .flow-row-2col label, .flow-row-3col label {
      display: block; font-size: 0.72rem; color: #8b949e; font-weight: 600; margin-bottom: 5px;
    }
    .flow-hint { color: #6e7681; font-weight: 400; font-size: 0.68rem; margin-top: 4px; }
    .flow-modal input[type="text"], .flow-modal input[type="number"], .flow-modal select {
      width: 100%; padding: 9px 12px; background: #161b22; border: 1px solid #30363d;
      border-radius: 8px; color: #e6edf3; font-size: 0.82rem; transition: border-color .15s;
      box-sizing: border-box;
    }
    .flow-modal input:focus, .flow-modal select:focus {
      outline: none; border-color: #58a6ff;
    }

    /* ── Product multi-select combobox — SaaS pro ── */
    .flow-products-picker {
      position: relative;
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 10px;
      transition: border-color 0.15s, box-shadow 0.15s;
      min-height: 40px;
    }
    .flow-products-picker.focused {
      border-color: #58a6ff;
      box-shadow: 0 0 0 3px rgba(88,166,255,0.12);
    }
    .flow-products-inputrow {
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 5px; padding: 5px 8px; min-height: 40px;
      box-sizing: border-box;
    }
    .flow-product-chip {
      display: inline-flex; align-items: center; gap: 5px;
      background: linear-gradient(135deg, rgba(88,166,255,0.14), rgba(88,166,255,0.08));
      border: 1px solid rgba(88,166,255,0.28);
      color: #7cc4ff;
      padding: 3px 4px 3px 9px;
      border-radius: 6px;
      font-size: 0.74rem; font-weight: 600;
      max-width: 260px;
      animation: chipIn 0.16s ease-out;
    }
    @keyframes chipIn {
      from { opacity: 0; transform: scale(0.85); }
      to   { opacity: 1; transform: scale(1); }
    }
    .flow-product-chip-name {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      max-width: 220px;
    }
    .flow-product-chip-x {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 4px;
      color: #7cc4ff; cursor: pointer;
      transition: background 0.12s;
      font-size: 0.95rem; line-height: 1;
    }
    .flow-product-chip-x:hover { background: rgba(88,166,255,0.25); color: #fff; }
    .flow-products-input {
      flex: 1; min-width: 130px;
      background: transparent !important;
      border: none !important;
      color: #e6edf3 !important;
      padding: 4px 6px !important;
      font-size: 0.82rem !important;
      outline: none;
      box-shadow: none !important;
    }
    .flow-products-input::placeholder { color: #6e7681; }
    .flow-products-dropdown {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: #0d1117;
      border: 1px solid #30363d;
      border-radius: 10px;
      max-height: 280px; overflow-y: auto;
      box-shadow: 0 12px 40px -8px rgba(0,0,0,0.6);
      z-index: 10;
      display: none;
      padding: 4px;
    }
    .flow-products-picker.focused .flow-products-dropdown { display: block; }
    .flow-product-opt {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px;
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.12s;
    }
    .flow-product-opt:hover, .flow-product-opt.highlight { background: rgba(88,166,255,0.08); }
    .flow-product-opt.selected { background: rgba(88,166,255,0.05); }
    .flow-product-opt-name {
      flex: 1; min-width: 0;
      color: #e6edf3; font-size: 0.82rem; font-weight: 500;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .flow-product-opt.selected .flow-product-opt-name { color: #7cc4ff; }
    .flow-product-opt-platform {
      background: rgba(255,255,255,0.05);
      color: #8b949e;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 0.66rem; font-weight: 700;
      text-transform: capitalize;
      flex-shrink: 0;
    }
    .flow-product-opt-platform.hotmart   { background: rgba(255,110,32,0.14); color: #ff8a4b; }
    .flow-product-opt-platform.digistore { background: rgba(88,166,255,0.14); color: #7cc4ff; }
    .flow-product-opt-platform.broski { background: rgba(229,229,229,0.12); color: #d4d4d4; }
    .flow-product-opt-platform.xpag { background: rgba(56,189,248,0.12); color: #7dd3fc; }
    .flow-product-opt-platform.sphere { background: rgba(167,139,250,0.12); color: #c4b5fd; }
    .flow-product-opt-platform.explodely { background: rgba(251,146,60,0.12); color: #fdba74; }
    .flow-product-opt-platform.cooud { background: rgba(124,92,255,0.14); color: #b4a4ff; }
    .flow-product-opt-platform.buygoods { background: rgba(89,165,44,0.14); color: #7cc94e; }
    .flow-product-opt-platform.mangofy   { background: rgba(255,193,7,0.14); color: #ffcc4a; }
    .flow-product-opt-platform.sharkbot  { background: rgba(34,197,94,0.14); color: #4ade80; }
    .flow-product-opt-platform.mundpay   { background: rgba(147,51,234,0.14); color: #c084fc; }
    .flow-product-opt-platform.perfectpay,
    .flow-product-opt-platform.duttify   { background: rgba(236,72,153,0.14); color: #f472b6; }
    .flow-product-opt-check {
      width: 16px; height: 16px; border-radius: 4px;
      border: 1.5px solid #30363d;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.12s;
      color: transparent;
    }
    .flow-product-opt.selected .flow-product-opt-check {
      background: linear-gradient(135deg, #58a6ff, #388bfd);
      border-color: #58a6ff;
      color: #fff;
    }
    .flow-product-opt-empty {
      padding: 14px 12px;
      color: #6e7681; font-size: 0.78rem;
      text-align: center;
    }
    .flow-product-opt-add {
      color: #7cc4ff; font-weight: 700;
    }
    .flow-product-opt-add .flow-product-opt-check {
      background: rgba(88,166,255,0.1); border-color: rgba(88,166,255,0.3); color: #7cc4ff;
    }
    .flow-products-hint {
      color: #6e7681; font-size: 0.7rem; margin-top: 6px;
    }
    .flow-products-count {
      color: #58a6ff; font-weight: 700;
    }

    body.light .flow-products-picker { background: #f8fafc; border-color: #e2e8f0; }
    body.light .flow-products-picker.focused { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
    body.light .flow-product-chip { background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(37,99,235,0.05)); border-color: rgba(37,99,235,0.3); color: #1d4ed8; }
    body.light .flow-product-chip-x { color: #1d4ed8; }
    body.light .flow-product-chip-x:hover { background: rgba(37,99,235,0.2); color: #0f172a; }
    body.light .flow-products-input { color: #0f172a !important; }
    body.light .flow-products-input::placeholder { color: #94a3b8; }
    body.light .flow-products-dropdown { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 12px 40px -8px rgba(0,0,0,0.15); }
    body.light .flow-product-opt-name { color: #0f172a; }
    body.light .flow-product-opt.selected .flow-product-opt-name { color: #1d4ed8; }
    body.light .flow-product-opt-platform { background: #f1f5f9; color: #64748b; }
    body.light .flow-product-opt:hover, body.light .flow-product-opt.highlight { background: #eff6ff; }
    body.light .flow-product-opt-check { border-color: #cbd5e1; }
    body.light .flow-products-hint { color: #64748b; }
    body.light .flow-products-count { color: #2563eb; }
    .flow-btn-cancel, .flow-btn-save, .flow-btn-delete {
      padding: 9px 18px; border-radius: 8px; font-size: 0.82rem; font-weight: 700;
      cursor: pointer; border: 1px solid transparent; transition: all .15s;
    }
    .flow-btn-cancel { background: transparent; border-color: #30363d; color: #8b949e; }
    .flow-btn-cancel:hover { border-color: #58a6ff; color: #e6edf3; }
    .flow-btn-save { background: #1f6feb; color: #fff; }
    .flow-btn-save:hover { background: #388bfd; }
    .flow-btn-delete { background: transparent; border-color: #ef444466; color: #ef4444; margin-right: auto; }
    .flow-btn-delete:hover { background: rgba(239,68,68,.1); border-color: #ef4444; }

    /* Light mode */
    body.light .flow-card { background: #fff; border-color: #e2e8f0; }
    body.light .flow-card-name { color: #1a1a1a; }
    body.light .flow-card-meta b { color: #475569; }
    body.light .flow-modal { background: #fff; border-color: #e2e8f0; }
    body.light .flow-modal-header h3 { color: #1a1a1a; }
    body.light .flow-modal input, body.light .flow-modal select { background:#f1f5f9; border-color:#e2e8f0; color:#1a1a1a; }
    body.light .flow-explain { background: #eff6ff; border-color: #bfdbfe; color: #475569; }

    /* Domain cards */
    /* ── DOMAIN CARDS (collapsible) ── */
    .domain-card {
      background: #161b22;
      border: 1px solid #21262d;
      border-radius: 12px;
      margin-bottom: 10px;
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .domain-card:hover { border-color: #30363d; }
    .domain-card.verified { border-left: 3px solid #3fb950; }
    .domain-card.pending { border-left: 3px solid #f59e0b; }
    .domain-card.failed { border-left: 3px solid #f85149; }

    .domain-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .domain-card-header:hover { background: rgba(255,255,255,0.03); }
    .domain-card-left { display: flex; align-items: center; gap: 12px; }
    .domain-card-icon {
      width: 36px; height: 36px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.9rem; flex-shrink: 0;
    }
    .domain-card-icon.verified { background: rgba(63,185,80,0.1); color: #3fb950; }
    .domain-card-icon.pending { background: rgba(245,158,11,0.1); color: #f59e0b; }
    .domain-card-icon.failed { background: rgba(248,81,73,0.1); color: #f85149; }
    .domain-card-name { font-size: 0.88rem; font-weight: 700; color: #e6edf3; }
    .domain-card-sub { font-size: 0.7rem; color: #6e7681; margin-top: 2px; }
    .domain-card-right { display: flex; align-items: center; gap: 10px; }
    .domain-status-pill {
      font-size: 0.68rem; font-weight: 700; padding: 4px 10px;
      border-radius: 99px; letter-spacing: 0.02em;
    }
    .domain-status-pill.verified { background: rgba(63,185,80,0.1); color: #3fb950; border: 1px solid rgba(63,185,80,0.2); }
    .domain-status-pill.pending { background: rgba(245,158,11,0.1); color: #f59e0b; border: 1px solid rgba(245,158,11,0.2); }
    .domain-status-pill.failed { background: rgba(248,81,73,0.1); color: #f85149; border: 1px solid rgba(248,81,73,0.2); }
    .domain-card-chevron {
      color: #6e7681; font-size: 0.7rem; transition: transform 0.25s;
    }

    /* DNS Panel (expandable) */
    .domain-dns-panel {
      border-top: 1px solid #21262d;
      background: #0d1117;
    }
    .domain-dns-row {
      padding: 12px 16px;
      border-bottom: 1px solid #161b22;
    }
    .domain-dns-row:last-of-type { border-bottom: none; }
    .domain-dns-row-header {
      display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    }
    .domain-dns-badge {
      font-size: 0.62rem; font-weight: 700; padding: 2px 8px;
      border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em;
    }
    .domain-dns-badge.ok { background: rgba(63,185,80,0.1); color: #3fb950; }
    .domain-dns-badge.wait { background: rgba(255,255,255,0.1); color: #f0f0f5; }
    .domain-dns-status-dot {
      width: 6px; height: 6px; border-radius: 50%;
    }
    .domain-dns-status-dot.green { background: #3fb950; box-shadow: 0 0 4px rgba(63,185,80,0.4); }
    .domain-dns-status-dot.yellow { background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,0.4); }
    .domain-dns-fields { display: flex; flex-direction: column; gap: 4px; }
    .domain-dns-field { display: flex; align-items: flex-start; gap: 8px; }
    .domain-dns-label {
      font-size: 0.62rem; font-weight: 700; color: #484f58;
      text-transform: uppercase; letter-spacing: 0.04em;
      min-width: 50px; padding-top: 2px;
    }
    .domain-dns-val {
      font-size: 0.7rem; color: #8b949e; font-family: 'Courier New', monospace;
      word-break: break-all; line-height: 1.4; cursor: pointer;
      transition: color 0.15s;
    }
    .domain-dns-val:hover { color: #f0f0f5; }

    /* Keep email-badge for history table */
    .email-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 6px;
      font-size: 0.72rem; font-weight: 600;
    }
    .email-badge--verified { background: #23863622; color: #3fb950; border: 1px solid #23863644; }
    .email-badge--pending { background: #f59e0b22; color: #f59e0b; border: 1px solid #f59e0b44; }
    .email-badge--failed { background: #f8514922; color: #f85149; border: 1px solid #f8514944; }

    /* ── DOMAIN ADD PANEL ── */
    .domain-add-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px; border-radius: 8px;
      background: linear-gradient(135deg, #238636, #2ea043);
      border: none; color: #fff; font-size: 0.78rem;
      font-weight: 600; cursor: pointer; font-family: inherit;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s; box-shadow: 0 2px 8px rgba(35,134,54,0.25);
    }
    .domain-add-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(35,134,54,0.35); }

    .domain-add-panel {
      max-height: 0; overflow: hidden; opacity: 0;
      transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease;
      margin: 0;
    }
    .domain-add-panel.open {
      max-height: 350px; opacity: 1; margin: 16px 0;
    }
    .domain-add-inner {
      background: #0d1117; border: 1px solid rgba(255,255,255,0.15);
      border-radius: 14px; padding: 28px; text-align: center;
    }
    .domain-add-icon { font-size: 2rem; margin-bottom: 10px; }
    .domain-add-title { font-size: 0.95rem; font-weight: 700; color: #e6edf3; margin-bottom: 4px; }
    .domain-add-desc { font-size: 0.78rem; color: #8b949e; margin-bottom: 18px; }
    .domain-add-input-row { max-width: 400px; margin: 0 auto; }
    .domain-add-input {
      width: 100%; padding: 13px 16px; background: #161b22;
      border: 1px solid #30363d; border-radius: 10px; color: #e6edf3;
      font-size: 0.9rem; font-weight: 500; text-align: center;
      font-family: 'Courier New', monospace; letter-spacing: 0.3px;
      outline: none; transition: border-color 0.2s, box-shadow 0.2s;
    }
    .domain-add-input:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }
    .domain-add-input::placeholder { color: #484f58; font-family: inherit; }
    .domain-add-actions {
      display: flex; gap: 8px; justify-content: center; margin-top: 14px;
    }
    .domain-add-submit {
      padding: 10px 24px; border-radius: 10px;
      background: linear-gradient(135deg, #f0f0f5, #2563eb);
      border: none; color: #fff; font-size: 0.82rem;
      font-weight: 700; cursor: pointer; font-family: inherit;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s; box-shadow: 0 2px 8px rgba(255,255,255,0.25);
    }
    .domain-add-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,255,255,0.35); }
    .domain-add-cancel {
      padding: 10px 20px; border-radius: 10px;
      background: transparent; border: 1px solid #30363d;
      color: #8b949e; font-size: 0.82rem; font-weight: 600;
      cursor: pointer; font-family: inherit; transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .domain-add-cancel:hover { border-color: #58a6ff; color: #f0f0f5; }

    .domain-autoverify-info {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 14px; margin-top: 12px;
      font-size: 0.68rem; color: #484f58;
      border-top: 1px solid #21262d;
    }

    /* Remove old DNS table styles now uses new format */
    .email-dns-records { display: none; }
    .email-dns-header {
      display: none;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .email-dns-record {
      display: grid;
      grid-template-columns: 55px 1.5fr 2.5fr 65px 55px;
      gap: 8px;
      align-items: center;
      padding: 10px 14px;
      border-bottom: 1px solid #161b22;
      font-size: 0.72rem;
    }
    .email-dns-record:last-child { border-bottom: none; }
    .email-dns-type {
      background: rgba(255,255,255,0.1);
      color: #f0f0f5;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 700;
      font-size: 0.65rem;
      text-align: center;
    }
    .email-dns-name {
      color: #8b949e;
      font-family: 'Courier New', monospace;
      font-size: 0.68rem;
      word-break: break-all;
      cursor: pointer;
      transition: color 0.18s;
    }
    .email-dns-name:hover { color: #f0f0f5; }
    .email-dns-value {
      color: #e6edf3;
      font-family: 'Courier New', monospace;
      font-size: 0.68rem;
      word-break: break-all;
      cursor: pointer;
      transition: color 0.18s;
    }
    .email-dns-value:hover { color: #f0f0f5; }
    .email-dns-priority {
      color: #fbbf24;
      font-weight: 700;
      font-size: 0.72rem;
      text-align: center;
    }
    .email-dns-ttl {
      color: #6e7681;
      font-size: 0.68rem;
      text-align: center;
    }
    .email-domain-actions {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }

    /* Email preview */
    .email-preview-frame {
      border: 1px solid #30363d;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
    }

    /* History table */
    .email-history-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.78rem;
    }
    .email-history-table th {
      text-align: left;
      padding: 10px 12px;
      font-weight: 600;
      color: #8b949e;
      border-bottom: 1px solid #21262d;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .email-history-table td {
      padding: 10px 12px;
      border-bottom: 1px solid #161b2233;
      color: #c9d1d9;
    }
    .email-history-table tbody tr:hover { background: rgba(255,255,255,0.04); }

    /* Light mode overrides */
    [data-theme="light"] .email-card { background: #fff; border-color: #e2e8f0; }
    [data-theme="light"] .email-subnav { background: #f8fafc; border-color: #e2e8f0; }
    [data-theme="light"] .email-subnav-btn { color: #64748b; }
    [data-theme="light"] .email-subnav-btn.active { background: rgba(59,130,246,0.1); color: #3b82f6; }
    [data-theme="light"] .email-input,
    [data-theme="light"] .email-select,
    [data-theme="light"] .email-textarea { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
    [data-theme="light"] .email-domain-item { background: #f8fafc; border-color: #e2e8f0; }
    [data-theme="light"] .email-dns-records { background: #fff; border-color: #e2e8f0; }
    [data-theme="light"] .email-dns-record { border-color: #e2e8f0; }
    [data-theme="light"] .email-dns-name { color: #64748b; }
    [data-theme="light"] .email-dns-value { color: #1e293b; }
    [data-theme="light"] .email-domain-name { color: #1e293b; }
    [data-theme="light"] .email-card-header h3 { color: #1e293b; }
    [data-theme="light"] .email-label { color: #64748b; }
    [data-theme="light"] .email-btn-secondary { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }

    /* ── TEMPLATE EDITOR (Premium SaaS Redesign) ──────── */
    #abaEmail.tpl-editor-active { max-width: 100%; padding: 0; }
    #abaEmail.tpl-editor-active .page-header,
    #abaEmail.tpl-editor-active .email-subnav,
    #abaEmail.tpl-editor-active .email-section { display: none !important; }
    #abaEmail.tpl-editor-active #emailSecTemplates { display: none !important; }
    #abaEmail.tpl-editor-active #tplEditorView { display: flex !important; }

    #tplEditorView {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 200;
      background: #0d1117;
      overflow: hidden;
      flex-direction: column;
    }

    /* ── TOP BAR ── */
    .tpl-editor-topbar {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 20px;
      height: 56px;
      min-height: 56px;
      background: #0d1117;
      border-bottom: 1px solid #21262d;
      flex-shrink: 0;
      z-index: 10;
    }
    .tpl-editor-topbar .tpl-back-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #c9d1d9;
      padding: 8px 14px;
      font-size: 0.82rem;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      white-space: nowrap;
    }
    .tpl-editor-topbar .tpl-back-btn:hover {
      background: rgba(139,148,158,0.1);
      border-color: #484f58;
      color: #fff;
    }
    .tpl-editor-topbar .tpl-back-btn svg {
      width: 16px; height: 16px;
      stroke: currentColor; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .tpl-editor-topbar input {
      flex: 1;
      max-width: 320px;
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #e6edf3;
      padding: 10px 16px;
      font-size: 0.92rem;
      font-weight: 600;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .tpl-editor-topbar input:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }
    .tpl-editor-topbar .tpl-topbar-spacer { flex: 1; }
    .tpl-editor-topbar .tpl-device-btns {
      display: flex;
      gap: 2px;
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 8px;
      padding: 3px;
    }
    .tpl-editor-topbar .tpl-device-btns button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px; height: 32px;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: #8b949e;
      font-size: 1.1rem;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .tpl-editor-topbar .tpl-device-btns button.active {
      background: rgba(255,255,255,0.15);
      color: #f0f0f5;
    }
    .tpl-editor-topbar .tpl-device-btns button:hover:not(.active) { color: #c9d1d9; }
    .tpl-editor-topbar .tpl-save-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg,#238636,#2ea043);
      border: none;
      border-radius: 8px;
      color: #fff;
      padding: 10px 20px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      box-shadow: 0 2px 8px rgba(35,134,54,0.3);
    }
    .tpl-editor-topbar .tpl-save-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(35,134,54,0.4); }
    .tpl-editor-topbar .tpl-save-btn svg {
      width: 16px; height: 16px;
      stroke: currentColor; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }

    /* ── EDITOR BODY (sidebar + preview) ── */
    .tpl-editor-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .tpl-editor-sidebar {
      width: 300px;
      min-width: 300px;
      background: #0d1117;
      border-right: 1px solid #21262d;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: #30363d transparent;
      font-family: 'Inter', 'Inter Reserva', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    .tpl-editor-sidebar::-webkit-scrollbar { width: 3px; }
    .tpl-editor-sidebar::-webkit-scrollbar-track { background: transparent; }
    .tpl-editor-sidebar::-webkit-scrollbar-thumb { background: #30363d; border-radius: 99px; }

    /* Collapsible sidebar sections */
    .tpl-sidebar-section { border-bottom: 1px solid #21262d; }
    /* ── BM TOAST (notificações do app — substitui alert()) ── */
    #bmToastWrap {
      position: fixed; top: 20px; right: 20px; z-index: 99999;
      display: flex; flex-direction: column; gap: 10px; pointer-events: none;
      max-width: min(380px, calc(100vw - 40px));
    }
    .bm-toast {
      display: flex; align-items: flex-start; gap: 12px;
      background: #161b22; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px; padding: 13px 16px;
      box-shadow: 0 12px 32px -8px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
      pointer-events: auto; cursor: default;
      transform: translateX(24px); opacity: 0;
      transition: transform 0.22s cubic-bezier(0.21, 1.02, 0.73, 1), opacity 0.22s;
    }
    .bm-toast.in { transform: translateX(0); opacity: 1; }
    .bm-toast.out { transform: translateX(16px); opacity: 0; transition-duration: 0.18s; }
    .bm-toast-ico {
      flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; margin-top: 1px;
    }
    .bm-toast-ico svg { width: 12px; height: 12px; }
    .bm-toast.success .bm-toast-ico { background: rgba(63,185,80,0.15); color: #3fb950; }
    .bm-toast.error   .bm-toast-ico { background: rgba(248,81,73,0.15); color: #f85149; }
    .bm-toast.info    .bm-toast-ico { background: rgba(88,166,255,0.15); color: #58a6ff; }
    .bm-toast.success { border-color: rgba(63,185,80,0.25); }
    .bm-toast.error   { border-color: rgba(248,81,73,0.25); }
    .bm-toast-body { flex: 1; min-width: 0; }
    .bm-toast-title { font-size: 0.82rem; font-weight: 700; color: #e6edf3; line-height: 1.35; }
    .bm-toast-msg { font-size: 0.74rem; color: #8b949e; line-height: 1.4; margin-top: 2px; }
    .bm-toast-x {
      flex-shrink: 0; background: none; border: none; color: #6e7681; cursor: pointer;
      padding: 2px; line-height: 1; font-size: 0.95rem; border-radius: 5px; transition: color 0.13s;
    }
    .bm-toast-x:hover { color: #e6edf3; }
    body.light .bm-toast { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 12px 32px -8px rgba(15,23,42,0.18), 0 2px 8px rgba(15,23,42,0.08); }
    body.light .bm-toast-title { color: #0f172a; }
    body.light .bm-toast-msg { color: #475569; }

    /* ── BM CONFIRM (modal de confirmação — substitui confirm()) ── */
    .bmc-ov {
      position: fixed; inset: 0; z-index: 99998;
      background: rgba(1,4,9,0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center; padding: 20px;
      opacity: 0; transition: opacity 0.18s;
    }
    .bmc-ov.in { opacity: 1; }
    .bmc-panel {
      background: #161b22; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px; padding: 24px; width: 100%; max-width: 420px;
      box-shadow: 0 24px 64px -12px rgba(0,0,0,0.6);
      transform: translateY(10px) scale(0.98); transition: transform 0.2s cubic-bezier(0.21, 1.02, 0.73, 1);
    }
    .bmc-ov.in .bmc-panel { transform: translateY(0) scale(1); }
    .bmc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .bmc-ico {
      flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
    }
    .bmc-ico svg { width: 18px; height: 18px; }
    .bmc-ico.danger { background: rgba(248,81,73,0.12); color: #f85149; }
    .bmc-ico.info   { background: rgba(88,166,255,0.12); color: #58a6ff; }
    .bmc-title { font-size: 1rem; font-weight: 700; color: #e6edf3; }
    .bmc-msg { font-size: 0.83rem; color: #8b949e; line-height: 1.55; margin: 0 0 20px; }
    .bmc-actions { display: flex; gap: 10px; justify-content: flex-end; }
    .bmc-btn {
      padding: 9px 18px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
      cursor: pointer; transition: all 0.15s; border: 1px solid transparent;
    }
    .bmc-btn.cancel { background: transparent; border-color: rgba(255,255,255,0.14); color: #adb6c2; }
    .bmc-btn.cancel:hover { color: #e6edf3; border-color: rgba(255,255,255,0.3); }
    .bmc-btn.ok { background: #1f6feb; color: #fff; }
    .bmc-btn.ok:hover { background: #388bfd; }
    .bmc-btn.ok.danger { background: #da3633; }
    .bmc-btn.ok.danger:hover { background: #f85149; }
    body.light .bmc-panel { background: #fff; border-color: #e2e8f0; }
    body.light .bmc-title { color: #0f172a; }
    body.light .bmc-msg { color: #475569; }
    body.light .bmc-btn.cancel { border-color: #cbd5e1; color: #475569; }

    .tpl-section-toggle {
      display: flex; align-items: center; justify-content: space-between;
      padding: 13px 16px 11px; cursor: pointer; user-select: none;
      transition: background 0.15s;
      border-top: 1px solid rgba(110,118,129,0.1);
    }
    .tpl-sidebar-section:first-child .tpl-section-toggle { border-top: none; }
    .tpl-section-toggle:hover { background: rgba(255,255,255,0.03); }
    .tpl-section-toggle:hover .tpl-section-toggle-title { color: #adb6c2; }
    .tpl-section-toggle-title {
      font-size: 0.64rem; font-weight: 700; color: #6e7681;
      text-transform: uppercase; letter-spacing: 0.09em;
      transition: color 0.15s;
    }
    .tpl-section-toggle-chevron {
      font-size: 0.6rem; color: #484f58; transition: transform 0.15s ease-out, color 0.15s;
    }
    .tpl-section-toggle:hover .tpl-section-toggle-chevron { color: #8b949e; }
    .tpl-sidebar-section.collapsed .tpl-section-toggle-chevron { transform: rotate(-90deg); }
    /* Colapso INSTANTÂNEO (display) — nada de animar max-height (layout thrash =
       lag em cliques rápidos). Ao abrir, só opacity+transform (compositor puro). */
    .tpl-section-body { overflow: hidden; }
    .tpl-sidebar-section.collapsed .tpl-section-body { display: none; }
    .tpl-sidebar-section:not(.collapsed) .tpl-section-body { animation: bmSecIn 0.13s ease-out; }
    @keyframes bmSecIn {
      from { opacity: 0; transform: translateY(-3px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── VARIABLES PILL BAR ── */
    /* vars bar removed now inline */
    .tpl-var-pill {
      display: inline-flex;
      align-items: center;
      padding: 5px 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 20px;
      font-size: 0.7rem;
      font-weight: 600;
      color: #f0f0f5;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      white-space: nowrap;
      font-family: 'SF Mono', 'Fira Code', monospace;
    }
    .tpl-var-pill:hover {
      background: rgba(88,166,255,0.14);
      border-color: rgba(88,166,255,0.45);
      color: #a5d1ff;
    }
    .tpl-var-pill:active { opacity: 0.75; }

    /* ── BLOCK TOOLBAR (icon grid) ── */
    .tpl-blocks-toolbar { flex-shrink: 0; }
    .tpl-blocks-toolbar-title { display: none; }
    .tpl-blocks-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .tpl-import-html-btn {
      width: 100%; margin-top: 10px; padding: 10px 12px;
      background: rgba(88,166,255,0.07); border: 1px solid rgba(88,166,255,0.22);
      border-radius: 8px; color: #79c0ff; font-size: 0.75rem; font-weight: 600;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: background 0.15s, border-color 0.15s, color 0.15s; letter-spacing: .01em;
    }
    .tpl-import-html-btn:hover { background: rgba(88,166,255,0.13); border-color: rgba(88,166,255,0.45); color: #a5d1ff; }
    .tpl-import-code-btn {
      background: rgba(139,148,158,0.06); border-color: rgba(139,148,158,0.25); color: #adb6c2; margin-top: 8px;
    }
    .tpl-import-code-btn:hover { background: rgba(139,148,158,0.12); border-color: rgba(139,148,158,0.5); color: #e6edf3; }
    .tpl-block-add-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 12px 8px;
      background: linear-gradient(160deg, #161b22 0%, #0d1117 100%);
      border: 1px solid #21262d;
      border-radius: 10px;
      color: #8b949e;
      font-size: 0.62rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.12s, border-color 0.12s, background-color 0.12s, opacity 0.12s;
      min-height: 68px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .tpl-block-add-btn:hover {
      border-color: rgba(88,166,255,0.45);
      color: #e6edf3;
      background: linear-gradient(160deg, rgba(88,166,255,0.09) 0%, rgba(88,166,255,0.03) 100%);
      box-shadow: 0 4px 14px -4px rgba(88,166,255,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .tpl-block-add-btn .tpl-block-icon {
      line-height: 1;
      display: flex; align-items: center; justify-content: center;
      width: 20px; height: 20px;
    }
    .tpl-block-add-btn .tpl-block-icon svg { width: 20px; height: 20px; display: block; }
    .tpl-block-add-btn:active { transform: scale(0.965); transition-duration: 0.06s; }
    /* identidade de cor por tipo (mesma família da lista Seus Blocos) */
    .tpl-block-add-btn.bt-text    .tpl-block-icon { color: #e6edf3; }
    .tpl-block-add-btn.bt-image   .tpl-block-icon { color: #d2a8ff; }
    .tpl-block-add-btn.bt-button  .tpl-block-icon { color: #7ee2a8; }
    .tpl-block-add-btn.bt-divider .tpl-block-icon { color: #adb6c2; }
    .tpl-block-add-btn.bt-spacer  .tpl-block-icon { color: #ffb454; }
    .tpl-block-add-btn.bt-columns .tpl-block-icon { color: #56d4dd; }
    .tpl-block-add-btn.bt-html    .tpl-block-icon { color: #79c0ff; }
    /* HTML: tile largo ocupando a linha inteira (destaque do power feature) */
    .tpl-block-add-wide {
      grid-column: 1 / -1;
      flex-direction: row;
      justify-content: flex-start;
      gap: 12px;
      min-height: 0;
      padding: 12px 14px;
      text-align: left;
    }
    .tpl-block-add-wide .tpl-block-add-wide-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .tpl-block-add-wide .tpl-block-label { font-size: 0.72rem; }
    .tpl-block-add-wide .tpl-block-sublabel { font-size: 0.62rem; font-weight: 500; color: #6e7681; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tpl-block-add-btn .tpl-block-label {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    /* ── BLOCK LIST ── */
    .tpl-blocks-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px 14px 14px;
      scrollbar-width: thin;
      scrollbar-color: #30363d transparent;
    }
    .tpl-blocks-list::-webkit-scrollbar { width: 3px; }
    .tpl-blocks-list::-webkit-scrollbar-track { background: transparent; }
    .tpl-blocks-list::-webkit-scrollbar-thumb { background: #30363d; border-radius: 99px; }
    .tpl-blocks-list-title {
      font-size: 0.7rem;
      font-weight: 700;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
    }
    .tpl-block-card {
      background: #161b22;
      border: 1px solid #1c2333;
      border-radius: 10px;
      margin-bottom: 8px;
      transition: color 0.12s, border-color 0.12s, background-color 0.12s, opacity 0.12s;
      border-left: 3px solid transparent;
      overflow: hidden;
    }
    .tpl-block-card:hover { background: rgba(22,27,34,0.9); border-color: #2d333b; border-left-color: #2d333b; }
    .tpl-block-card.selected {
      border-color: rgba(255,255,255,0.4);
      border-left: 4px solid #f0f0f5;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 4px 20px rgba(255,255,255,0.1);
    }
    .tpl-block-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      cursor: pointer;
      transition: background 0.12s;
    }
    .tpl-block-card-header:hover { background: rgba(255,255,255,0.025); }
    .tpl-block-card-header .drag-handle {
      color: #484f58;
      font-size: 1rem;
      cursor: grab;
      user-select: none;
      opacity: 0.3;
      transition: opacity 0.15s;
    }
    .tpl-block-card-header:hover .drag-handle { opacity: 0.8; }
    .tpl-block-card-header .block-icon {
      font-size: 0.95rem;
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 7px;
      flex-shrink: 0;
    }
    /* Per-block-type icon colors */
    .tpl-block-card[data-type="text"] .block-icon    { background: rgba(255,255,255,0.15); }
    .tpl-block-card[data-type="image"] .block-icon   { background: rgba(163,113,247,0.15); }
    .tpl-block-card[data-type="button"] .block-icon  { background: rgba(63,185,80,0.15); }
    .tpl-block-card[data-type="divider"] .block-icon { background: rgba(110,118,129,0.18); }
    .tpl-block-card[data-type="spacer"] .block-icon  { background: rgba(255,140,0,0.13); }
    .tpl-block-card[data-type="columns"] .block-icon { background: rgba(0,188,188,0.13); }
    /* fallback for cards without data-type */
    .tpl-block-card:not([data-type]) .block-icon { background: rgba(255,255,255,0.08); }
    .tpl-block-card.selected .block-icon { filter: brightness(1.25); }
    .tpl-block-card-header .block-label {
      flex: 1;
      font-size: 0.78rem;
      font-weight: 600;
      color: #c9d1d9;
    }
    .tpl-block-card-header .block-actions {
      display: flex;
      gap: 3px;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .tpl-block-card-header:hover .block-actions,
    .tpl-block-card.selected .block-actions { opacity: 1; }
    .tpl-block-card-header .block-actions button {
      background: transparent;
      border: 1px solid transparent;
      color: #6e7681;
      font-size: 0.82rem;
      cursor: pointer;
      padding: 0;
      width: 28px; height: 28px;
      border-radius: 6px;
      transition: color 0.12s, border-color 0.12s, background-color 0.12s, opacity 0.12s;
      display: flex; align-items: center; justify-content: center;
    }
    .tpl-block-card-header .block-actions button:hover {
      color: #e6edf3;
      background: rgba(255,255,255,0.06);
      border-color: #30363d;
    }
    .tpl-block-card-header .block-actions button.del-btn:hover {
      color: #f85149;
      background: rgba(248,81,73,0.08);
      border-color: rgba(248,81,73,0.2);
    }

    /* ── PENTE FINO: controles de formulário do editor ── */
    /* Popup nativo do <select> escuro no tema escuro (color-scheme) — mata o
       dropdown branco do sistema estourando no meio do editor */
    body:not(.light) select { color-scheme: dark; }
    /* controles nativos (caixas, números, barras de rolagem, popups) escuros no tema escuro */
    body:not(.light) { color-scheme: dark; }
    .tpl-setting-row select, .tpl-editor-sidebar select, .flow-modal select {
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 12px;
      padding-right: 32px !important;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .tpl-setting-row select:hover, .tpl-editor-sidebar select:hover, .flow-modal select:hover { border-color: #58a6ff; }
    .tpl-setting-row select:focus, .tpl-editor-sidebar select:focus, .flow-modal select:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.15); }
    .tpl-setting-row select optgroup { font-style: normal; font-weight: 700; color: #6e7681; }
    /* checkbox e range com accent da paleta (cobre Firefox também) */
    .tpl-setting-row input[type="checkbox"] {
      width: 16px; height: 16px; cursor: pointer; accent-color: #58a6ff;
    }
    .tpl-setting-row input[type="range"] { accent-color: #58a6ff; }
    /* inputs de texto: foco consistente */
    .tpl-setting-row input[type="text"]:focus,
    .tpl-setting-row input[type="url"]:focus,
    .tpl-setting-row input[type="number"]:focus,
    .tpl-setting-row textarea:focus {
      outline: none; border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.15);
    }
    /* scrollbar fina na sidebar do editor */
    .tpl-editor-sidebar { scrollbar-width: thin; scrollbar-color: #30363d transparent; }
    .tpl-editor-sidebar::-webkit-scrollbar { width: 4px; }
    .tpl-editor-sidebar::-webkit-scrollbar-track { background: transparent; }
    .tpl-editor-sidebar::-webkit-scrollbar-thumb { background: #30363d; border-radius: 99px; }
    .tpl-editor-sidebar::-webkit-scrollbar-thumb:hover { background: #484f58; }

    /* Entrada do bloco recém-adicionado */
    .tpl-block-card.block-in { animation: bmBlockIn 0.28s cubic-bezier(0.21, 1.02, 0.73, 1); }
    @keyframes bmBlockIn {
      from { opacity: 0; transform: translateY(6px) scale(0.985); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .tpl-block-card.block-in, .bm-toast, .bmc-panel { animation: none !important; transition: none !important; }
    }
    .tpl-block-card[data-type="html"] .block-icon { background: rgba(88,166,255,0.14); color: #79c0ff; }
    .tpl-block-card[data-type="text"] .block-icon    { color: #e6edf3; }
    .tpl-block-card[data-type="image"] .block-icon   { color: #d2a8ff; }
    .tpl-block-card[data-type="button"] .block-icon  { color: #7ee2a8; }
    .tpl-block-card[data-type="divider"] .block-icon { color: #adb6c2; }
    .tpl-block-card[data-type="spacer"] .block-icon  { color: #ffb454; }
    .tpl-block-card[data-type="columns"] .block-icon { color: #56d4dd; }

    /* Empty state da lista de blocos */
    .tpl-list-empty { text-align: center; padding: 36px 16px 32px; }
    .tpl-list-empty-ico {
      width: 52px; height: 52px; margin: 0 auto 12px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 14px; color: #484f58;
      background: rgba(110,118,129,0.08);
      border: 1px dashed rgba(110,118,129,0.3);
    }
    .tpl-list-empty-title { font-size: 0.8rem; font-weight: 700; color: #8b949e; margin-bottom: 3px; }
    .tpl-list-empty-sub { font-size: 0.71rem; color: #6e7681; line-height: 1.4; }

    /* ── DRAG & DROP ── */
    .tpl-block-card.drag-over-top { border-top: 2px solid #f0f0f5; margin-top: -1px; }
    .tpl-block-card.drag-over-bottom { border-bottom: 2px solid #f0f0f5; margin-bottom: -1px; }
    #tplBlocksList.drag-target { border: 2px dashed rgba(255,255,255,0.4); border-radius: 12px; background: rgba(255,255,255,0.03); }
    .tpl-block-add-btn[draggable="true"] { cursor: grab; }
    .tpl-block-add-btn[draggable="true"]:active { cursor: grabbing; }

    /* ── BLOCK SETTINGS (expanded) ── */
    .tpl-block-settings {
      display: none;
      padding: 18px 16px 20px;
      border-top: 1px solid #21262d;
      background: rgba(13,17,23,0.6);
      animation: tplSettingsIn 0.2s ease;
    }
    @keyframes tplSettingsIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .tpl-block-card.selected .tpl-block-settings { display: block; }
    .tpl-setting-section-title {
      font-size: 0.65rem;
      font-weight: 700;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
      margin-top: 16px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(33,38,45,0.8);
    }
    .tpl-setting-section-title:first-child { margin-top: 0; }
    .tpl-setting-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .tpl-setting-row:last-child { margin-bottom: 0; }
    .tpl-setting-row label {
      font-size: 0.72rem;
      font-weight: 600;
      color: #8b949e;
      min-width: 65px;
    }
    .tpl-setting-row input[type="text"],
    .tpl-setting-row input[type="url"],
    .tpl-setting-row input[type="number"],
    .tpl-setting-row textarea,
    .tpl-setting-row select {
      flex: 1;
      background: #0d1117;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #e6edf3;
      padding: 10px 12px;
      font-size: 0.82rem;
      font-family: 'Inter', 'Inter Reserva', sans-serif;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      appearance: none;
      -webkit-appearance: none;
    }
    .tpl-setting-row select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e7681' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
    }
    .tpl-setting-row input:focus,
    .tpl-setting-row textarea:focus,
    .tpl-setting-row select:focus {
      outline: none;
      border-color: #58a6ff;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.09);
    }
    .tpl-setting-row textarea {
      resize: vertical;
      min-height: 80px;
      font-family: 'Inter', 'Inter Reserva', inherit;
      line-height: 1.55;
      align-self: flex-start;
    }
    .tpl-setting-row input[type="color"] {
      width: 30px; height: 30px;
      padding: 2px;
      background: #0d1117;
      border: 2px solid #30363d;
      border-radius: 50%;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      flex-shrink: 0;
    }
    .tpl-setting-row input[type="color"]:hover { border-color: #58a6ff; transform: scale(1.1); }
    .tpl-setting-row input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 15px; height: 15px; border-radius: 50%;
      background: #58a6ff; border: 2px solid #0d1117;
      box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: grab;
      transition: transform 0.12s, box-shadow 0.12s;
    }
    .tpl-setting-row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(88,166,255,0.15); }
    .tpl-setting-row input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
    .tpl-setting-row input[type="range"] {
      flex: 1;
      accent-color: #f0f0f5;
      height: 4px;
      cursor: pointer;
    }
    /* ── HTML BLOCK na sidebar (compact) + chips de variáveis ── */
    .tpl-setting-row.tpl-html-block-row {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
    .tpl-html-label {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      min-width: 0 !important;
      width: 100%;
    }
    .tpl-html-meta {
      font-size: 0.65rem;
      color: #6e7681;
      font-weight: 500;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      background: rgba(255,255,255,0.04);
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid #21262d;
    }
    .tpl-html-fullscreen-btn {
      width: 100%;
      padding: 9px 12px;
      background: linear-gradient(135deg, rgba(255,240,0,0.12), rgba(255,255,255,0.10));
      border: 1px solid rgba(255,240,0,0.35);
      border-radius: 8px;
      color: #fff000;
      font-size: 0.74rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: all .15s;
      letter-spacing: .02em;
    }
    .tpl-html-fullscreen-btn:hover {
      background: linear-gradient(135deg, rgba(255,240,0,0.18), rgba(255,255,255,0.15));
      border-color: #fff000;
      transform: translateY(-1px);
    }
    .tpl-html-textarea {
      width: 100% !important;
      flex: none !important;
      min-height: 260px !important;
      max-height: 420px;
      background: #010409 !important;
      border: 1px solid #30363d !important;
      border-radius: 8px !important;
      color: #e6edf3 !important;
      padding: 12px !important;
      font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, ui-monospace, monospace !important;
      font-size: 0.74rem !important;
      line-height: 1.55 !important;
      resize: vertical !important;
      tab-size: 2;
      -moz-tab-size: 2;
    }
    .tpl-html-textarea:focus {
      border-color: #58a6ff !important;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.08) !important;
      outline: none;
    }
    .tpl-html-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .tpl-html-chip {
      background: rgba(255,240,0,0.08);
      border: 1px solid rgba(255,240,0,0.30);
      border-radius: 999px;
      color: #fff000;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.66rem;
      font-weight: 600;
      padding: 4px 9px;
      cursor: pointer;
      transition: all .15s;
      letter-spacing: 0;
    }
    .tpl-html-chip:hover {
      background: rgba(255,240,0,0.20);
      border-color: #fff000;
      transform: scale(1.05);
    }
    .tpl-html-hint {
      font-size: 0.68rem;
      color: #6e7681;
      line-height: 1.5;
      padding: 8px 10px;
      background: rgba(255,255,255,0.05);
      border-left: 2px solid rgba(255,255,255,0.4);
      border-radius: 4px;
    }
    /* ── HTML FULLSCREEN MODAL ── */
    .tpl-html-fs-bg {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(10px);
      z-index: 9500;
      display: flex;
      flex-direction: column;
    }
    .tpl-html-fs-bg.hidden { display: none; }
    .tpl-html-fs-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 22px;
      background: #0d1117;
      border-bottom: 1px solid #30363d;
      flex-shrink: 0;
    }
    .tpl-html-fs-title {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #e6edf3;
      font-size: 0.95rem;
      font-weight: 700;
    }
    .tpl-html-fs-title svg { color: #fff000; }
    .tpl-html-fs-actions { display: flex; gap: 8px; align-items: center; }
    .tpl-html-fs-toggle {
      background: transparent;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #8b949e;
      padding: 7px 12px;
      font-size: 0.74rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tpl-html-fs-toggle:hover { color: #e6edf3; border-color: #58a6ff; }
    .tpl-html-fs-toggle.active { background: rgba(255,255,255,0.15); color: #f0f0f5; border-color: #58a6ff; }
    .tpl-html-fs-close {
      background: rgba(239,68,68,0.1);
      border: 1px solid rgba(239,68,68,0.35);
      color: #ef4444;
      border-radius: 8px;
      padding: 7px 14px;
      font-size: 0.74rem;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
    }
    .tpl-html-fs-close:hover { background: rgba(239,68,68,0.2); }
    .tpl-html-fs-body {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
    }
    .tpl-html-fs-body.no-preview { grid-template-columns: 1fr; }
    .tpl-html-fs-pane {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
    }
    .tpl-html-fs-pane-header {
      padding: 10px 18px;
      background: #0d1117;
      border-bottom: 1px solid #21262d;
      color: #8b949e;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tpl-html-fs-editor {
      flex: 1;
      width: 100%;
      background: #010409;
      border: none;
      color: #e6edf3;
      padding: 16px 20px;
      font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, ui-monospace, monospace;
      font-size: 0.82rem;
      line-height: 1.65;
      resize: none;
      outline: none;
      tab-size: 2;
      -moz-tab-size: 2;
    }
    .tpl-html-fs-preview-frame {
      flex: 1;
      border: none;
      background: #f4f4f5;
    }
    .tpl-html-fs-chips-bar {
      padding: 10px 22px;
      background: #0d1117;
      border-top: 1px solid #30363d;
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    .tpl-html-fs-chips-label {
      color: #6e7681;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-right: 4px;
    }
    .tpl-html-fs-chip {
      background: rgba(255,240,0,0.10);
      border: 1px solid rgba(255,240,0,0.35);
      border-radius: 999px;
      color: #fff000;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      font-weight: 600;
      padding: 5px 12px;
      cursor: pointer;
      transition: all .15s;
    }
    .tpl-html-fs-chip:hover { background: rgba(255,240,0,0.22); border-color: #fff000; }
    /* Light mode pra fullscreen */
    body.light .tpl-html-fs-bg { background: rgba(15,23,42,0.85); }
    body.light .tpl-html-fs-header,
    body.light .tpl-html-fs-pane-header,
    body.light .tpl-html-fs-chips-bar { background: #f8fafc; border-color: #e2e8f0; }
    body.light .tpl-html-fs-title { color: #1a1a1a; }
    body.light .tpl-html-fs-editor { background: #ffffff; color: #1a1a1a; }
    body.light .tpl-html-textarea { background: #ffffff !important; color: #1a1a1a !important; border-color: #e2e8f0 !important; }
    .tpl-align-btns {
      display: flex;
      gap: 0;
      background: #0d1117;
      border: 1px solid #30363d;
      border-radius: 8px;
      padding: 3px;
      overflow: hidden;
    }
    .tpl-align-btns button {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: #6e7681;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      transition: color 0.12s, border-color 0.12s, background-color 0.12s, opacity 0.12s;
    }
    .tpl-align-btns button.active {
      background: rgba(255,255,255,0.18);
      color: #f0f0f5;
    }
    .tpl-align-btns button:hover:not(.active) {
      background: rgba(255,255,255,0.05);
      color: #c9d1d9;
    }

    /* ── GLOBAL SETTINGS ── */
    .tpl-global-settings {
      padding: 16px 16px;
      border-top: 1px solid #21262d;
      flex-shrink: 0;
      background: rgba(13,17,23,0.4);
    }
    .tpl-global-settings-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      padding: 4px 0;
      margin-bottom: 14px;
      border-radius: 6px;
      transition: background 0.12s;
    }
    .tpl-global-settings-header:hover { background: rgba(255,255,255,0.02); }
    .tpl-global-settings h4 {
      font-size: 0.68rem;
      font-weight: 700;
      color: #8b949e;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 0;
    }
    .tpl-global-settings-toggle {
      font-size: 0.75rem;
      color: #484f58;
      transition: transform 0.22s cubic-bezier(.4,0,.2,1);
    }
    .tpl-global-settings.collapsed .tpl-global-settings-toggle { transform: rotate(-90deg); }

    /* ── VARIABLES INFO (bottom) ── */
    .tpl-vars-info {
      padding: 12px 20px;
      border-top: 1px solid #21262d;
      flex-shrink: 0;
      display: none;
    }
    .tpl-vars-info p {
      font-size: 0.72rem;
      color: #484f58;
      margin-bottom: 4px;
    }
    .tpl-vars-info code {
      background: rgba(255,255,255,0.08);
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 0.7rem;
      color: #f0f0f5;
      margin-right: 4px;
    }

    /* ── PREVIEW PANEL ── */
    .tpl-editor-preview {
      flex: 1;
      background: #1c2128;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .tpl-preview-toolbar {
      display: none;
    }
    .tpl-preview-container {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 16px;
      overflow-y: auto;
      background: #f6f8fc;
    }

    /* ── GMAIL MOCKUP ── */
    .gmail-mockup {
      width: 100%;
      max-width: 820px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
      overflow: hidden;
    }
    .gmail-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      border-bottom: 1px solid #e8eaed;
      background: #fff;
    }
    .gmail-topbar-left, .gmail-topbar-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .gmail-header {
      padding: 20px 24px 16px;
      border-bottom: 1px solid #e8eaed;
    }
    .gmail-subject {
      font-size: 1.25rem;
      font-weight: 400;
      color: #202124;
      font-family: 'Google Sans', Arial, sans-serif;
      margin-bottom: 16px;
    }
    .gmail-meta {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .gmail-sender-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #1a73e8;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 500;
      flex-shrink: 0;
    }
    .gmail-sender-info { flex: 1; }
    .gmail-sender-name {
      font-size: 0.85rem;
      font-weight: 600;
      color: #202124;
    }
    .gmail-sender-email {
      font-weight: 400;
      color: #5f6368;
      font-size: 0.78rem;
    }
    .gmail-recipient {
      font-size: 0.78rem;
      color: #5f6368;
      margin-top: 2px;
    }
    .gmail-dropdown { font-size: 0.6rem; color: #5f6368; }
    .gmail-date {
      font-size: 0.75rem;
      color: #5f6368;
      white-space: nowrap;
      margin-left: auto;
      flex-shrink: 0;
    }
    .gmail-body {
      overflow-y: auto;
      max-height: calc(100vh - 220px);
    }

    .tpl-preview-frame {
      background: #fff;
      overflow: visible;
      position: relative;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
    }

    /* ── WYSIWYG CANVAS ── */
    .tpl-canvas {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      min-height: 400px;
      padding: 24px 20px;
      background: #ffffff;
    }

    .canvas-block {
      position: relative;
      padding: 2px;
      margin-bottom: 4px;
      border: 2px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .canvas-block:hover {
      border-color: rgba(255,255,255,0.3);
    }

    .canvas-block.selected {
      border-color: #58a6ff;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
    }

    .canvas-block.drag-above {
      border-top: 3px solid #f0f0f5;
    }

    .canvas-block.drag-below {
      border-bottom: 3px solid #f0f0f5;
    }

    .canvas-block.dragging {
      opacity: 0.4;
    }

    /* HTML block preview no canvas força fundo branco + texto escuro legível
       (sem isso, herda o tema dark do app e fica quase invisível). Inline styles
       no HTML do usuário sobrescrevem porque tem maior specificity. */
    .canvas-html-block {
      color: #1f2937 !important;
      background: #ffffff;
      border-radius: 6px;
      overflow: hidden;
    }
    .canvas-html-block * {
      color: inherit;
    }
    .canvas-html-block a { color: #1d4ed8; }
    /* Email templates usam <table width="600"> mas o canvas pode ser menor força encaixe */
    .canvas-html-block table { max-width: 100% !important; }
    .canvas-html-block img { max-width: 100%; height: auto; }
    /* Respeita align="center"/"right" legacy em tables (clientes de email respeitam;
       reset CSS do app os apagava, dando ilusao de "torto"). */
    .canvas-html-block table[align="center"] { margin-left: auto !important; margin-right: auto !important; }
    .canvas-html-block table[align="right"]  { margin-left: auto !important; margin-right: 0 !important; }
    .canvas-html-block table[align="left"]   { margin-left: 0 !important; margin-right: auto !important; }

    /* Hover em links e imagens sinaliza que abre modal de edição */
    .canvas-html-block a:hover,
    .canvas-html-block img:hover,
    .canvas-html-block button:hover {
      outline: 2px solid #f0f0f5 !important;
      outline-offset: 2px;
      cursor: pointer !important;
      box-shadow: 0 0 0 4px rgba(255,255,255,0.15);
    }
    .canvas-html-block a, .canvas-html-block img, .canvas-html-block button {
      transition: outline 0.1s, box-shadow 0.1s;
    }

    /* Badges contadores no canto top-right do bloco HTML clicáveis pra abrir lista de elementos */
    .canvas-html-counts {
      position: absolute;
      top: 8px;
      right: 8px;
      display: flex;
      gap: 6px;
      z-index: 5;
    }
    .canvas-html-counts .chip {
      background: rgba(255,255,255,0.92);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 5px 11px;
      border-radius: 999px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      letter-spacing: .2px;
      cursor: pointer;
      border: none;
      transition: transform .1s, box-shadow .1s;
    }
    .canvas-html-counts .chip:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    }
    .canvas-html-counts .chip.imgs { background: rgba(34,197,94,0.92); }

    /* Popover com lista de elementos quando clica num chip */
    .el-list-popover {
      position: absolute;
      top: 38px;
      right: 8px;
      width: 320px;
      max-height: 340px;
      overflow-y: auto;
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.4);
      z-index: 50;
      padding: 8px;
    }
    body.light .el-list-popover { background: #fff; border-color: #e2e8f0; }
    .el-list-popover .row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: background .1s;
    }
    .el-list-popover .row:hover { background: rgba(255,255,255,0.12); }
    .el-list-popover .row .icon { font-size: 16px; flex-shrink: 0; }
    .el-list-popover .row .info { flex: 1; min-width: 0; }
    .el-list-popover .row .label { font-size: 12px; font-weight: 600; color: #e6edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.light .el-list-popover .row .label { color: #1a1a1a; }
    .el-list-popover .row .url { font-size: 11px; color: #8b949e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'JetBrains Mono', monospace; }
    .el-list-popover .row .edit { font-size: 11px; color: #f0f0f5; flex-shrink: 0; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,0.12); }
    .el-list-popover .empty { padding: 16px; text-align: center; color: #8b949e; font-size: 12px; }

    /* Modal genérico para editar elemento (link/img) */
    .el-edit-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      backdrop-filter: blur(4px);
    }
    .el-edit-modal.open { display: flex; }
    .el-edit-modal .panel {
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 12px;
      padding: 22px 22px 18px;
      width: 480px;
      max-width: calc(100vw - 40px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      max-height: 90vh;
      overflow-y: auto;
    }
    body.light .el-edit-modal .panel { background: #fff; border-color: #e2e8f0; }
    .el-edit-modal .panel h3 {
      margin: 0 0 4px;
      font-size: 16px;
      color: #e6edf3;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    body.light .el-edit-modal .panel h3 { color: #1a1a1a; }
    .el-edit-modal .panel .sub {
      font-size: 12px;
      color: #8b949e;
      margin: 0 0 16px;
    }
    .el-edit-modal .field { margin-bottom: 14px; }
    .el-edit-modal .field label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .4px;
      color: #8b949e;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .el-edit-modal .field input[type="text"],
    .el-edit-modal .field input[type="url"],
    .el-edit-modal .field input[type="number"],
    .el-edit-modal .field textarea {
      width: 100%;
      box-sizing: border-box;
      background: #0d1117;
      border: 1px solid #30363d;
      border-radius: 6px;
      padding: 9px 11px;
      color: #e6edf3;
      font-size: 13px;
      font-family: inherit;
    }
    .el-edit-modal .field textarea { min-height: 60px; resize: vertical; }
    body.light .el-edit-modal .field input,
    body.light .el-edit-modal .field textarea {
      background: #fff; color: #1a1a1a; border-color: #e2e8f0;
    }
    .el-edit-modal .field input:focus,
    .el-edit-modal .field textarea:focus {
      outline: none;
      border-color: #58a6ff;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
    }
    .el-edit-modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .el-edit-modal .color-row { display: flex; gap: 8px; align-items: center; }
    .el-edit-modal .color-row input[type="color"] {
      width: 38px; height: 32px; border: 1px solid #30363d; border-radius: 6px; background: transparent; cursor: pointer; padding: 2px;
    }
    .el-edit-modal .actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid #21262d;
    }
    body.light .el-edit-modal .actions { border-top-color: #e2e8f0; }
    .el-edit-modal button {
      padding: 9px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid #30363d;
    }
    .el-edit-modal .btn-cancel { background: transparent; color: #8b949e; }
    .el-edit-modal .btn-cancel:hover { background: #21262d; color: #e6edf3; }
    .el-edit-modal .btn-delete { background: transparent; color: #f85149; border-color: rgba(248,81,73,0.3); }
    .el-edit-modal .btn-delete:hover { background: rgba(248,81,73,0.12); }
    .el-edit-modal .btn-save { background: #238636; color: #fff; border-color: #238636; }
    .el-edit-modal .btn-save:hover { background: #2ea043; }
    .el-edit-modal .align-btn {
      background: #0d1117;
      color: #8b949e;
      border: 1px solid #30363d;
      border-radius: 6px;
      padding: 9px 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .1s;
    }
    .el-edit-modal .align-btn:hover { background: #21262d; color: #e6edf3; }
    .el-edit-modal .align-btn.on { background: #1f6feb; color: #fff; border-color: #1f6feb; }
    body.light .el-edit-modal .align-btn { background: #f6f8fa; color: #6b7280; border-color: #e2e8f0; }
    body.light .el-edit-modal .align-btn:hover { background: #eef0f3; color: #1a1a1a; }
    body.light .el-edit-modal .align-btn.on { background: #1f6feb; color: #fff; border-color: #1f6feb; }
    .canvas-html-block h1,
    .canvas-html-block h2,
    .canvas-html-block h3,
    .canvas-html-block h4,
    .canvas-html-block strong,
    .canvas-html-block b { color: #111827; }
    [data-theme="light"] .canvas-html-block { color: #1f2937 !important; }

    .canvas-block-toolbar {
      position: absolute;
      top: -32px;
      right: 4px;
      display: flex;
      gap: 2px;
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 8px;
      padding: 4px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      z-index: 10;
    }

    .canvas-block-toolbar button {
      width: 26px;
      height: 26px;
      border: none;
      background: transparent;
      color: #8b949e;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .canvas-block-toolbar button:hover { background: #21262d; color: #e6edf3; }
    .canvas-block-toolbar button.del:hover { background: rgba(248,81,73,0.15); color: #f85149; }

    .canvas-text {
      outline: none;
      min-height: 20px;
      padding: 8px 12px;
      line-height: 1.6;
    }

    .canvas-text:focus {
      background: rgba(255,255,255,0.03);
      border-radius: 4px;
    }

    .canvas-drop-zone {
      border: 2px dashed #d1d5db;
      border-radius: 8px;
      padding: 24px;
      text-align: center;
      color: #9ca3af;
      font-size: 0.82rem;
      margin-top: 8px;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }

    .canvas-drop-zone.drag-over {
      border-color: #58a6ff;
      background: rgba(255,255,255,0.05);
      color: #f0f0f5;
    }

    .canvas-empty {
      text-align: center;
      padding: 80px 20px;
      color: #9ca3af;
    }

    .canvas-empty-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .canvas-empty-title {
      font-size: 16px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 4px;
    }

    .canvas-empty-sub {
      font-size: 13px;
      color: #94a3b8;
    }
    .tpl-preview-frame.mobile-frame {
      max-width: 375px !important;
      border-radius: 20px;
      border: 3px solid #30363d;
    }

    /* ── TEMPLATE GRID (list view cards) ── */
    .tpl-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-top: 20px;
    }
    .tpl-card {
      background: #0d1117;
      border: 1px solid #21262d;
      border-radius: 14px;
      padding: 20px;
      cursor: pointer;
      transition: color 0.12s, border-color 0.12s, background-color 0.12s, opacity 0.12s;
      position: relative;
      overflow: hidden;
    }
    .tpl-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, #f0f0f5, #a371f7);
      opacity: 0;
      transition: opacity 0.2s;
    }
    .tpl-card:hover {
      border-color: #30363d;
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
    .tpl-card:hover::before { opacity: 1; }
    .tpl-card-code {
      display: inline-flex; align-items: center; gap: 6px;
      margin: 2px 0 6px; padding: 3px 10px;
      background: rgba(139,148,158,0.08);
      border: 1px dashed rgba(139,148,158,0.35);
      border-radius: 6px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 0.68rem; letter-spacing: 0.08em; color: #8b949e;
      cursor: copy; transition: all 0.15s; width: fit-content;
    }
    .tpl-card-code:hover { color: #58a6ff; border-color: rgba(88,166,255,0.5); background: rgba(88,166,255,0.08); }
    .tpl-card-code.copied { color: #3fb950; border-color: rgba(63,185,80,0.5); background: rgba(63,185,80,0.08); }
    .tpl-card-code svg { flex-shrink: 0; }
    body.light .tpl-card-code { background: rgba(100,116,139,0.06); border-color: #cbd5e1; color: #64748b; }
    body.light .tpl-card-code:hover { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }
    .tpl-import-code-btn { margin-top: 8px; }
    .tpl-card-name {
      font-size: 0.9rem;
      font-weight: 700;
      color: #e6edf3;
      margin-bottom: 8px;
    }
    .tpl-card-desc {
      font-size: 0.76rem;
      color: #8b949e;
      margin-bottom: 14px;
      line-height: 1.5;
    }
    .tpl-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tpl-card-date {
      font-size: 0.7rem;
      color: #484f58;
    }
    .tpl-card-badge {
      font-size: 0.68rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      background: rgba(255,255,255,0.1);
      color: #f0f0f5;
    }
    .tpl-card-badge.custom { background: rgba(163,113,247,0.1); color: #a371f7; }

    /* ── LIGHT THEME OVERRIDES ── */
    [data-theme="light"] .tpl-editor-topbar { background: #fff; border-color: #e2e8f0; }
    [data-theme="light"] .tpl-editor-topbar input { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
    [data-theme="light"] .tpl-editor-topbar .tpl-back-btn { border-color: #e2e8f0; color: #475569; }
    [data-theme="light"] .tpl-editor-topbar .tpl-device-btns { background: #f1f5f9; border-color: #e2e8f0; }
    [data-theme="light"] .tpl-editor-sidebar { background: #fff; border-color: #e2e8f0; }
    [data-theme="light"] .tpl-vars-bar { border-color: #e2e8f0; }
    [data-theme="light"] .tpl-blocks-toolbar { border-color: #e2e8f0; }
    [data-theme="light"] .tpl-block-add-btn { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
    [data-theme="light"] .tpl-block-card { background: #f8fafc; border-color: #e2e8f0; }
    [data-theme="light"] .tpl-block-card.selected { border-color: #3b82f6; border-left-color: #3b82f6; }
    [data-theme="light"] .tpl-block-card-header .block-label { color: #1e293b; }
    [data-theme="light"] .tpl-block-settings { background: rgba(248,250,252,0.8); border-color: #e2e8f0; }
    [data-theme="light"] .tpl-editor-preview { background: #f1f5f9; }
    [data-theme="light"] .tpl-preview-container { background: #e2e8f0; background-image: none; }
    [data-theme="light"] .canvas-block-toolbar { background: #fff; border-color: #e2e8f0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    [data-theme="light"] .canvas-block-toolbar button { color: #64748b; }
    [data-theme="light"] .canvas-block-toolbar button:hover { background: #f1f5f9; color: #1e293b; }
    [data-theme="light"] .tpl-setting-row input,
    [data-theme="light"] .tpl-setting-row textarea,
    [data-theme="light"] .tpl-setting-row select { background: #fff; border-color: #e2e8f0; color: #1e293b; }
    [data-theme="light"] .tpl-card { background: #fff; border-color: #e2e8f0; }
    [data-theme="light"] .tpl-card-name { color: #1e293b; }
    [data-theme="light"] .tpl-global-settings { border-color: #e2e8f0; background: rgba(248,250,252,0.5); }
    [data-theme="light"] .tpl-vars-info { border-color: #e2e8f0; }
    [data-theme="light"] .tpl-preview-toolbar { border-color: #e2e8f0; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .tpl-editor-body { flex-direction: column; }
      .tpl-editor-sidebar { width: 100%; min-width: 100%; max-height: 45vh; border-right: none; border-bottom: 1px solid #21262d; }
      .tpl-editor-preview { min-height: 50vh; }
      .tpl-blocks-grid { grid-template-columns: repeat(6, 1fr); }
      .tpl-block-add-btn { min-height: 56px; padding: 10px 4px; }
    }

    /* Abas estreitas (formulários/configs) */
    #abaAdmin {
      max-width: 780px;
      margin: 0 auto;
      padding: 28px 24px 48px;
      box-sizing: border-box;
      /* no anim */
    }

    /* Audit Log Table */
    .audit-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.78rem;
    }
    .audit-table th {
      text-align: left;
      padding: 10px 12px;
      font-weight: 600;
      color: #8b949e;
      border-bottom: 1px solid #21262d;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .audit-table td {
      padding: 9px 12px;
      border-bottom: 1px solid #161b2233;
      color: #c9d1d9;
      white-space: nowrap;
    }
    .audit-table tbody tr:hover {
      background: rgba(255,255,255,0.04);
    }
    .audit-badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: capitalize;
    }
    .audit-badge--login { background: #23863622; color: #3fb950; border: 1px solid #23863644; }
    .audit-badge--login_failed { background: #f8514922; color: #f85149; border: 1px solid #f8514944; }
    .audit-badge--user_created { background: #58a6ff22; color: #f0f0f5; border: 1px solid #58a6ff44; }
    .audit-badge--user_deleted { background: #f8514922; color: #f85149; border: 1px solid #f8514944; }
    .audit-badge--password_changed { background: #d2a8ff22; color: #d2a8ff; border: 1px solid #d2a8ff44; }
    .audit-badge--2fa_enabled { background: #23863622; color: #3fb950; border: 1px solid #23863644; }
    .audit-badge--2fa_disabled { background: #f0883e22; color: #f0883e; border: 1px solid #f0883e44; }
    .audit-badge--permission_changed { background: #f0883e22; color: #f0883e; border: 1px solid #f0883e44; }

    /* Testar: layout 2 colunas */
    #abaTestar {
      padding: 28px 24px 48px;
      width: 100%;
      box-sizing: border-box;
    }
    .testar-grid {
      display: grid;
      grid-template-columns: 400px 1fr;
      gap: 20px;
      align-items: start;
      padding-right: 160px; /* safe zone p/ ícones fixos do topo (sininho + app switcher) */
    }
    @media (max-width: 900px) { .testar-grid { grid-template-columns: 1fr; } }
    @media (max-width: 700px) { .testar-grid { padding-right: 100px; } }

    .testar-form-card, .testar-result-card {
      background: #161b22;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px;
      padding: 24px;
    }
    .testar-result-card { min-height: 320px; }

    .testar-form-title {
      font-size: 1rem;
      font-weight: 700;
      color: #e2e8f0;
      margin-bottom: 4px;
    }
    .testar-form-sub {
      font-size: 0.78rem;
      color: #64748b;
      margin-bottom: 18px;
      line-height: 1.5;
    }
    .testar-form-sub b { color: #94a3b8; }

    .testar-steps {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 18px;
    }
    .testar-step {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .testar-step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      color: #f0f0f5;
      font-size: 0.68rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .testar-step-text {
      font-size: 0.77rem;
      color: #64748b;
      line-height: 1.55;
    }
    .testar-step-text b { color: #94a3b8; }

    .testar-divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.05);
      margin: 16px 0;
    }
    .testar-field { margin-bottom: 12px; }
    .testar-label {
      display: block;
      font-size: 0.7rem;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 5px;
    }
    .testar-optional {
      text-transform: none;
      font-weight: 400;
      color: #475569;
      letter-spacing: 0;
    }
    .testar-input {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 10px;
      padding: 10px 14px;
      color: #e2e8f0;
      font-size: 0.83rem;
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.18s;
      font-family: inherit;
    }
    .testar-input:focus { border-color: rgba(255,255,255,0.4); }
    .testar-input::placeholder { color: #6e7681; }

    .btn-testar-tt, .btn-testar-fb {
      width: 100%;
      padding: 13px;
      border: none;
      border-radius: 12px;
      color: #fff;
      font-size: 0.88rem;
      font-weight: 700;
      cursor: pointer;
      margin-top: 4px;
      transition: opacity 0.18s;
      font-family: inherit;
    }
    .btn-testar-tt { background: #58a6ff; }
    .btn-testar-fb { background: linear-gradient(90deg, #1877f2, #0d63d0); }
    .btn-testar-tt:disabled, .btn-testar-fb:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Painel direito */
    .testar-result-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .testar-result-title {
      font-size: 0.75rem;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }
    .testar-result-badge {
      font-size: 0.68rem;
      font-weight: 600;
      color: #475569;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px;
      padding: 2px 8px;
    }
    .testar-result-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 220px;
      gap: 12px;
    }
    .testar-result-empty-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
    }
    .testar-result-empty-label {
      font-size: 0.82rem;
      color: #6e7681;
      text-align: center;
    }
    /* Oculta empty quando status está visível */
    #testStatusMsg.ok + .testar-result-empty,
    #testStatusMsg.err + .testar-result-empty { display: none !important; }

    /* Override status dentro do painel */
    #testStatusMsg.ok {
      background: rgba(63,185,80,0.07);
      border: 1px solid rgba(63,185,80,0.2);
      border-radius: 12px;
      padding: 18px 20px;
      color: #3fb950;
      font-size: 0.9rem;
      font-weight: 600;
    }
    #testStatusMsg.err {
      background: rgba(248,81,73,0.07);
      border: 1px solid rgba(248,81,73,0.2);
      border-radius: 12px;
      padding: 18px 20px;
      color: #f85149;
      font-size: 0.9rem;
      font-weight: 600;
    }
    .testar-result-hint {
      margin-top: 14px;
      font-size: 0.75rem;
      color: #6e7681;
      line-height: 1.5;
    }
    .testar-result-hint b { color: #475569; }

    /* Ativar Pixel: layout 2 colunas */
    #abaAtivar {
      padding: 28px 24px 48px;
      box-sizing: border-box;
      width: 100%;
    }

    /* Logs: largura total */
    #abaLogs {
      padding: 28px 24px 48px;
      box-sizing: border-box;
      width: 100%;
    }

    /* Pixels: largura completa com 2 colunas */
    #abaPixels {
      padding: 28px 24px 52px;
      box-sizing: border-box;
      width: 100%;
    }

    /* ── HIDE old tab bar ──────────────────────── */
    .tabs { display: none !important; }

    /* ── OLD HEADER (hide, replaced by sidebar footer) ── */
    #appHeader { display: none !important; }

    /* ── TABS ─────────────────────────────────── */
    .tabs {
      display: flex;
      gap: 3px;
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 12px;
      padding: 5px;
      margin-bottom: 20px;
    }

    .tab-btn {
      flex: 1;
      padding: 9px 4px;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: #8b949e;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .tab-btn.active {
      background: #30363d;
      color: #fff;
    }

    .badge {
      background: #e8445a;
      color: #fff;
      font-size: 0.6rem;
      font-weight: 700;
      border-radius: 99px;
      padding: 1px 5px;
      min-width: 16px;
      text-align: center;
      display: none;
    }

    .badge.show {
      display: inline-block;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
      animation: tabFadeIn 0.45s ease-out;
    }
    @keyframes tabFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ══════════════════════════════════════════════════════════
       MONOCHROMATIC OVERRIDES sumir azul, manter preto/branco/amarelo
       (mesma identidade do login page do Tracker)
    ══════════════════════════════════════════════════════════ */
    .sidebar-tracker-badge {
      display: inline-block;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      padding: 3px 8px;
      border-radius: 5px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      color: #d1d5db;
      text-transform: uppercase;
      margin-left: 8px;
      white-space: nowrap;
    }
    .sidebar.collapsed .sidebar-tracker-badge { display: none; }

    /* PRIMARY ACTIVE AZUL (#58a6ff) como accent profissional.
       Amarelo fica reservado SÓ pra identidade brand (logo "Mi"). */
    .dash-period-btn.active {
      background: #58a6ff !important;
      color: #ffffff !important;
      border-color: transparent !important;
      box-shadow: 0 0 18px rgba(88,166,255,0.35), 0 6px 16px -4px rgba(88,166,255,0.25) !important;
      font-weight: 700 !important;
    }
    .dash-period-btn:hover:not(.active) {
      border-color: rgba(88,166,255,0.35) !important;
      color: #58a6ff !important;
      background: rgba(88,166,255,0.06) !important;
    }
    .dash-period-btn { color: #9ca3af !important; }

    .dash-daterange-btn:hover,
    .dash-daterange-btn.active {
      border-color: rgba(88,166,255,0.4) !important;
      color: #58a6ff !important;
      background: rgba(88,166,255,0.05) !important;
    }
    .dash-refresh-btn:hover {
      border-color: rgba(88,166,255,0.3) !important;
      color: #58a6ff !important;
      background: rgba(88,166,255,0.04) !important;
    }
    .dash-plat-btn:hover,
    .dash-plat-btn.active {
      border-color: rgba(88,166,255,0.4) !important;
      color: #58a6ff !important;
      background: rgba(88,166,255,0.05) !important;
    }
    .dash-plat-menu { border-color: rgba(255,255,255,0.08) !important; }

    /* ── Pill de plataforma com logo oficial (tabela + dropdown do dashboard) ── */
    .plat-pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border-radius: 20px; font-size: 10.5px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; line-height: 1; }
    .plat-pill-logo { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
    .plat-pill-logo img, .plat-pill-logo svg { width: 11px; height: 11px; display: block; }
    .plat-pill.kwai     { background: rgba(255,119,5,0.10);  border-color: rgba(255,119,5,0.35);  color: #f59e0b; }
    .plat-pill.tiktok   { background: rgba(0,242,234,0.08);  border-color: rgba(0,242,234,0.30);  color: #00b8d4; }
    .plat-pill.facebook { background: rgba(24,119,242,0.10); border-color: rgba(24,119,242,0.35); color: #1877f2; }
    .plat-pill.google   { background: rgba(234,67,53,0.08);  border-color: rgba(234,67,53,0.30);  color: #ea4335; }
    .plat-pill.taboola  { background: rgba(28,78,216,0.10);  border-color: rgba(28,78,216,0.40);  color: #3b82f6; }
    /* chip de contraste por marca (logo sempre legível nos 2 temas) */
    .plat-pill.tiktok  .plat-pill-logo { background: #000; }
    .plat-pill.taboola .plat-pill-logo { background: #1c4ed8; }
    .plat-pill.kwai .plat-pill-logo, .plat-pill.facebook .plat-pill-logo, .plat-pill.google .plat-pill-logo { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
    /* logos no dropdown de filtro */
    .dash-plat-opt { display: flex !important; align-items: center; gap: 8px; }
    .dash-plat-opt .plat-pill-logo { width: 16px; height: 16px; }
    .dash-plat-opt .plat-pill-logo img, .dash-plat-opt .plat-pill-logo svg { width: 10px; height: 10px; }
    #dashPlatLabel { display: inline-flex; align-items: center; gap: 6px; }
    #dashPlatLabel .plat-pill-logo { width: 15px; height: 15px; }
    #dashPlatLabel .plat-pill-logo img, #dashPlatLabel .plat-pill-logo svg { width: 9px; height: 9px; }
    .dash-plat-opt:hover  { background: rgba(88,166,255,0.07) !important; color: #58a6ff !important; }
    .dash-plat-opt.active { color: #58a6ff !important; background: rgba(88,166,255,0.1) !important; }

    .dash-source-btn:hover,
    .dash-source-btn.active {
      border-color: rgba(88,166,255,0.35) !important;
      color: #58a6ff !important;
      background: rgba(88,166,255,0.05) !important;
    }

    /* Cards & cores base */
    .card { border-color: rgba(255,255,255,0.08) !important; }

    /* Inputs com focus em AZUL atenção visual sem ofender */
    input:focus, textarea:focus, select:focus {
      border-color: rgba(88,166,255,0.55) !important;
      box-shadow: 0 0 0 3px rgba(88,166,255,0.1) !important;
      outline: none;
    }

    /* Links branco normal, AZUL no hover (não amarelo) */
    a:not(.btn-login):not(.auth-google-btn):not(.btn-subscribe):not(.net-action):not(.faq-item):not(.checkout-back):not(.back):not(.pricing-logout):not(.brand) {
      color: #f0f0f5;
    }
    a:not(.btn-login):not(.auth-google-btn):not(.btn-subscribe):not(.net-action):not(.faq-item):not(.checkout-back):not(.back):not(.pricing-logout):not(.brand):hover {
      color: #58a6ff;
    }

    /* Sidebar active barra AZUL (não amarela, ficava sinal de trânsito) */
    .sidebar-btn.active {
      background: rgba(88,166,255,0.08) !important;
      color: #58a6ff !important;
      border-left-color: #58a6ff !important;
    }
    .sidebar-btn.active svg { color: #58a6ff !important; }
    .sidebar-btn:hover:not(.active) {
      background: rgba(255,255,255,0.03) !important;
      color: #f0f0f5 !important;
    }

    /* Tab buttons top bar (compat) */
    .tab-btn.active {
      color: #58a6ff !important;
      border-bottom-color: #58a6ff !important;
    }

    /* Botões primary do app AZUL profissional */
    .btn-primary,
    .btn-save,
    .btn-add {
      background: #58a6ff !important;
      color: #ffffff !important;
      border-color: transparent !important;
      font-weight: 700;
    }
    .btn-primary:hover,
    .btn-save:hover,
    .btn-add:hover {
      background: #4895eb !important;
      transform: translateY(-1px);
    }

    /* ══════════════════════════════════════════════════════════
       GLOBAL POLISH aplica em todas as tabs do app
       (orbs no fundo, glassmorphism nos cards, hover lift)
    ══════════════════════════════════════════════════════════ */
    @keyframes appOrbDrift1 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%      { transform: translate(60px, -40px) scale(1.1); }
      66%      { transform: translate(-30px, 50px) scale(0.92); }
    }
    @keyframes appOrbDrift2 {
      0%, 100% { transform: translate(0, 0) scale(0.95); }
      50%      { transform: translate(-50px, 40px) scale(1.12); }
    }

    /* (Orbs animados removidos do #appMain — pesavam na GPU.) */
    #appMain { position: relative; }

    /* Cards globais: sem backdrop-filter (era caro) + hover lift simples */
    .card,
    .dash-card,
    .testar-form-card,
    .testar-result-card,
    .ativar-pixel-card,
    .pixel-card,
    .leads-card,
    .historico-card,
    .webhook-card {
      background: #0d1117 !important;
      border: 1px solid rgba(255,255,255,0.08) !important;
      border-radius: 16px;
      transition: border-color 0.18s, transform 0.18s;
    }
    .card:hover,
    .dash-card:hover,
    .testar-form-card:hover,
    .testar-result-card:hover,
    .ativar-pixel-card:hover,
    .pixel-card:hover,
    .leads-card:hover,
    .historico-card:hover,
    .webhook-card:hover {
      border-color: rgba(255,255,255,0.16) !important;
      transform: translateY(-1px);
    }

    /* Premium typography em h1 dos tabs (dash-header, etc.) */
    .dash-header h1,
    .pixels-header h1,
    .logs-header h1,
    .webhook-header h1,
    .ativar-header h1,
    .testar-header h1,
    .leads-header h1,
    .historico-header h1,
    .email-header h1,
    .admin-header h1,
    .perfil-header h1 {
      background: linear-gradient(135deg, #f4f4f6 0%, #9ca3af 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -0.025em !important;
      font-weight: 800 !important;
    }
    /* Light mode: cancela gradient transparente (causaria texto invisível em bg branco) */
    body.light .dash-header h1,
    body.light .pixels-header h1,
    body.light .logs-header h1,
    body.light .webhook-header h1,
    body.light .ativar-header h1,
    body.light .testar-header h1,
    body.light .leads-header h1,
    body.light .historico-header h1,
    body.light .email-header h1,
    body.light .admin-header h1,
    body.light .perfil-header h1 {
      background: linear-gradient(135deg, #0f172a 0%, #475569 100%) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }

    /* Subtle pulse "ATIVA"-style em badges verdes do app */
    @keyframes appBadgePulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0.5); }
      50%      { box-shadow: 0 0 0 6px rgba(63,185,80,0); }
    }

    /* ── CARD ─────────────────────────────────── */
    .card {
      background: #161b22;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 28px 24px;
      box-shadow: 0 4px 32px rgba(0,0,0,0.35);
    }

    .card-title {
      font-size: 1.1rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 6px;
      color: #e2e8f0;
      letter-spacing: 0.01em;
    }

    .card-sub {
      color: #8b949e;
      font-size: 0.78rem;
      text-align: center;
      margin-bottom: 24px;
      line-height: 1.6;
    }

    .card-sub b {
      color: #f0f0f5;
      font-weight: 600;
    }

    /* ── INPUTS ───────────────────────────────── */
    .pixels-list {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 10px;
    }

    .pixel-row {
      display: flex;
      gap: 8px;
    }

    input[type="text"] {
      flex: 1;
      padding: 12px 14px;
      background: #1c2333;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #fff;
      font-size: 0.875rem;
      outline: none;
      transition: border-color 0.18s;
      font-family: 'Courier New', monospace;
      letter-spacing: 0.3px;
    }

    input[type="text"]::placeholder {
      color: #6e7681;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    input[type="text"]:focus {
      border-color: #58a6ff55;
    }

    .btn-rm {
      width: 42px;
      flex-shrink: 0;
      background: #1c2333;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #8b949e;
      font-size: 1.1rem;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }

    .btn-rm:hover {
      background: #e8445a18;
      color: #e8445a;
      border-color: #e8445a44;
    }

    .btn-add {
      width: 100%;
      padding: 11px;
      background: transparent;
      border: 1px dashed rgba(255,255,255,0.3);
      border-radius: 10px;
      color: #f0f0f5;
      font-size: 0.82rem;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      margin-top: 10px;
    }

    .btn-add:hover {
      border-color: rgba(255,255,255,0.6);
      color: #f0f0f5;
      background: rgba(255,255,255,0.05);
    }

    /* ── PURCHASE VALUE ───────────────────────── */
    .purchase-box {
      background: #1c2333;
      border: 1px solid #30363d;
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 16px;
    }

    .purchase-toggle-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .purchase-toggle-title {
      color: #e6edf3;
      font-size: 0.82rem;
      font-weight: 600;
    }

    .purchase-toggle-sub {
      color: #6e7681;
      font-size: 0.68rem;
      margin-top: 3px;
    }

    .toggle-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .toggle-lbl {
      color: #8b949e;
      font-size: 0.73rem;
    }

    .toggle {
      position: relative;
      width: 36px;
      height: 20px;
      flex-shrink: 0;
    }

    .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      inset: 0;
      background: #30363d;
      border-radius: 99px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .toggle-slider::before {
      content: '';
      position: absolute;
      width: 14px;
      height: 14px;
      background: #8b949e;
      border-radius: 50%;
      left: 3px;
      top: 3px;
      transition: transform 0.2s, background 0.2s;
    }

    .toggle input:checked+.toggle-slider {
      background: #58a6ff22;
      border: 1px solid #58a6ff44;
    }

    .toggle input:checked+.toggle-slider::before {
      transform: translateX(16px);
      background: #58a6ff;
    }

    .purchase-value-wrap {
      margin-top: 12px;
      display: none;
    }

    .purchase-value-wrap.show {
      display: block;
    }

    .purchase-value-hint {
      color: #8b949e;
      font-size: 0.7rem;
      margin-bottom: 8px;
    }

    .purchase-value-hint b {
      color: #f0f0f5;
    }

    .purchase-box input[type="number"] {
      width: 100%;
      padding: 11px 14px;
      background: #30363d;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      outline: none;
      font-family: 'Courier New', monospace;
      transition: border-color 0.18s;
    }

    .purchase-box input[type="number"]:focus {
      border-color: #58a6ff55;
    }

    .purchase-box input[type="number"]::placeholder {
      color: #6e7681;
      font-weight: 400;
    }

    /* ── SUMMARY BOX ──────────────────────────── */
    .summary-box {
      background: #1c2333;
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 18px;
    }

    .summary-title {
      color: #8b949e;
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 12px;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .summary-name {
      color: #8b949e;
      font-size: 0.73rem;
    }

    .summary-qty {
      color: #f0f0f5;
      font-size: 0.73rem;
      font-weight: 700;
    }

    .summary-total {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid #30363d;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .summary-total-lbl {
      color: #8b949e;
      font-size: 0.75rem;
    }

    .summary-total-val {
      color: #fff;
      font-size: 0.9rem;
      font-weight: 700;
    }

    /* ── PLATFORM BADGE / PICKER ─────────────────────────── */
    .platform-badge {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 0.68rem; font-weight: 700; padding: 2px 7px;
      border-radius: 4px; margin-left: 6px; vertical-align: middle;
    }
    .platform-badge.tiktok   { background: rgba(255,0,80,.12); color: #ff5c7a; border: 1px solid rgba(255,0,80,.3); }
    .platform-badge.facebook { background: rgba(24,119,242,.12); color: #5b9eff; border: 1px solid rgba(24,119,242,.3); }
    .platform-badge.kwai     { background: rgba(255,100,0,.12); color: #ff6400; border: 1px solid rgba(255,100,0,.3); }
    .platform-badge.taboola  { background: rgba(34,211,238,.12); color: #22d3ee; border: 1px solid rgba(34,211,238,.3); }
    .platform-badge.mgid     { background: rgba(245,130,32,.12); color: #f5a623; border: 1px solid rgba(245,130,32,.3); }
    .platform-badge.newsbreak { background: rgba(255,68,68,.12); color: #ff6b6b; border: 1px solid rgba(255,68,68,.3); }
    .platform-badge.mediago  { background: rgba(47,107,255,.12); color: #6b9bff; border: 1px solid rgba(47,107,255,.3); }
    .plat-btn.active-taboola { background: rgba(34,211,238,.12) !important; border-color: rgba(34,211,238,.45) !important; color: #22d3ee !important; }
    .plat-btn.active-mgid { background: rgba(245,130,32,.12) !important; border-color: rgba(245,130,32,.5) !important; color: #f5a623 !important; }
    .plat-btn.active-newsbreak { background: rgba(255,68,68,.12) !important; border-color: rgba(255,68,68,.5) !important; color: #ff6b6b !important; }
    .plat-btn.active-mediago { background: rgba(47,107,255,.12) !important; border-color: rgba(47,107,255,.5) !important; color: #6b9bff !important; }
    /* ── Multi-dashboards (molde Utmify): níveis recuados, sem pill ── */
    .sbd-top { display:flex; align-items:center; gap:11px; width:calc(100% - 16px); margin:2px 8px 4px; padding:10px 13px; border:none; background:rgba(110,118,129,.09); color:#c9d1d9; font-size:0.86rem; font-weight:600; cursor:pointer; border-radius:10px; text-align:left; transition:background .15s,color .15s; }
    .sbd-top:hover { background:rgba(110,118,129,.16); color:#e6edf3; }
    .sbd-top .sbd-chev { margin-left:auto; }
    .sbd-head { display:flex; align-items:center; gap:11px; width:calc(100% - 16px); margin:1px 8px; padding:9px 12px 9px 32px; border:none; background:none; color:#adb6c2; font-size:0.84rem; font-weight:600; cursor:pointer; border-radius:9px; text-align:left; transition:background .15s,color .15s; }
    .sbd-head:hover { background:rgba(110,118,129,.12); color:#e6edf3; }
    .sbd-head.open { color:#e6edf3; background:rgba(110,118,129,.08); }
    .sbd-head .sbd-chev { margin-left:auto; }
    .sbd-ic { width:17px; height:17px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
    .sbd-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sbd-chev { flex-shrink:0; font-size:0.76rem; opacity:.6; transition:transform .2s; }
    .sbd-chev.down { transform:rotate(90deg); }
    .sbd-items { display:none; padding:2px 0; }
    .sbd-items.open { display:block; animation:sbdIn .16s ease; }
    @keyframes sbdIn { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } }
    .sbd-tab { display:flex; align-items:center; gap:10px; width:calc(100% - 20px); margin:1px 10px; padding:7px 12px 7px 50px; border:none; background:none; color:#96a0ab; font-size:0.8rem; font-weight:500; line-height:1.35; cursor:pointer; border-radius:8px; text-align:left; transition:background .14s,color .14s; position:relative; }
    .sbd-tab:hover { background:rgba(110,118,129,.1); color:#e6edf3; }
    .sbd-tab.active { background:linear-gradient(90deg,rgba(59,130,246,.16),rgba(59,130,246,.04)); color:#9ecbff; font-weight:600; }
    .sbd-tab.active::before { content:''; position:absolute; left:38px; top:22%; bottom:22%; width:2.5px; border-radius:2px; background:#3b82f6; }
    .sbd-tab .sb-icon-wrap { width:16px; height:16px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; }
    .sbd-tab.active .sb-icon-wrap svg { stroke:#58a6ff; }
    .sbd-tab:hover .sb-icon-wrap svg { stroke:#58a6ff; }
    .sbd-tab .sb-badge, .sbd-tab .sb-live-dot { margin-left:auto; flex-shrink:0; }
    .sbd-sublabel { padding:9px 12px 3px 56px; font-size:0.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#565e68; }
    .sbd-new { display:flex; align-items:center; gap:10px; width:calc(100% - 32px); margin:4px 16px 8px; padding:8px 12px 8px 24px; border:1px dashed rgba(110,118,129,.3); background:none; color:#6e7681; font-size:0.78rem; font-weight:600; cursor:pointer; border-radius:9px; transition:.15s; }
    .sbd-new:hover { color:#9ecbff; border-color:rgba(59,130,246,.45); background:rgba(59,130,246,.05); }
    .sidebar.collapsed .sbd-top, .sidebar.collapsed .sbd-head, .sidebar.collapsed .sbd-tab { padding-left:0; padding-right:0; justify-content:center; }
    .sidebar.collapsed .sbd-name, .sidebar.collapsed .sbd-chev, .sidebar.collapsed .sbd-tab span:not(.sb-icon-wrap), .sidebar.collapsed .sbd-new span, .sidebar.collapsed .sbd-sublabel { display:none; }
    /* originais das abas movidas pros grupos: fora do fluxo SEMPRE (o :hover
       do trilho tem !important e furava esconder via style inline) */
    .sidebar-menu > .sidebar-btn[data-tab="dashboard"], .sidebar-menu > .sidebar-btn[data-tab="live"],
    .sidebar-menu > .sidebar-btn[data-tab="pixels"], .sidebar-menu > .sidebar-btn[data-tab="logs"],
    .sidebar-menu > .sidebar-btn[data-tab="relatorios"], .sidebar-menu > .sidebar-btn[data-tab="webhook"],
    .sidebar-menu > .sidebar-btn[data-tab="ativar"], .sidebar-menu > .sidebar-btn[data-tab="testar"],
    .sidebar-menu > .sidebar-btn[data-tab="historico"], .sidebar-menu > .sidebar-btn[data-tab="leads"],
    .sidebar-menu > .sidebar-btn[data-tab="email"], .sidebar-menu > .sidebar-btn[data-tab="entregaveis"] { display:none !important; }
    #appSidebar .sidebar-menu .sidebar-label[data-section="config"] { display:none !important; }
    /* hover no trilho recolhido = expande (mesmo comportamento de sempre) */
    .sidebar.collapsed:hover .sbd-top { padding:10px 13px; justify-content:flex-start; }
    .sidebar.collapsed:hover .sbd-head { padding:9px 12px 9px 32px; justify-content:flex-start; }
    .sidebar.collapsed:hover .sbd-tab { padding:7px 12px 7px 50px; justify-content:flex-start; }
    .sidebar.collapsed:hover .sbd-name, .sidebar.collapsed:hover .sbd-chev { display:inline !important; }
    .sidebar.collapsed:hover .sbd-tab span:not(.sb-icon-wrap), .sidebar.collapsed:hover .sbd-new span { display:inline !important; }
    .sidebar.collapsed:hover .sbd-sublabel { display:block !important; }
    .sidebar.collapsed:hover .sbd-new { justify-content:flex-start; padding:8px 12px 8px 24px; }
    .sidebar.collapsed:hover .sbd-tab .sb-live-dot { display:block; }
    .sidebar.collapsed .sbd-tab .sb-badge, .sidebar.collapsed .sbd-tab .sb-live-dot { display:none; }
    .sidebar.collapsed:hover .sbd-tab .sb-badge.show { display:inline-block; }
    /* ── Drawer de gestão (desliza da direita, molde "Criar Dashboard" Utmify) ── */
    .dashm-ov { position:fixed; inset:0; background:rgba(1,4,9,.65); backdrop-filter:blur(4px); z-index:1200; opacity:0; pointer-events:none; transition:opacity .2s; display:flex; align-items:center; justify-content:center; padding:24px; }
    .dashm-ov.open { opacity:1; pointer-events:auto; }
    .dashm-panel { width:min(560px, 96vw); max-height:88vh; background:var(--card,#161b22); border:1px solid rgba(110,118,129,.25); border-radius:16px; box-shadow:0 24px 64px -12px rgba(0,0,0,.6); padding:22px 24px; overflow-y:auto; transform:translateY(12px) scale(.98); transition:transform .22s cubic-bezier(.21,1.02,.73,1); scrollbar-width:thin; scrollbar-color:#30363d transparent; }
    .dashm-panel::-webkit-scrollbar { width:4px; }
    .dashm-panel::-webkit-scrollbar-thumb { background:#30363d; border-radius:99px; }
    .dashm-ov.open .dashm-panel { transform:none; }
    /* Taxas da operação */
    .dashm-tax-row { display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(13,17,23,.55); border:1px solid rgba(110,118,129,.18); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
    .dashm-tax-main { flex:1; min-width:0; }
    .dashm-tax-name { font-size:.8rem; font-weight:700; color:#e6edf3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dashm-tax-sum { font-size:.68rem; color:#8b949e; margin-top:1px; }
    .dashm-tax-del { flex-shrink:0; background:none; border:1px solid transparent; color:#6e7681; width:26px; height:26px; border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.13s; }
    .dashm-tax-del:hover { color:#f85149; background:rgba(248,81,73,.08); border-color:rgba(248,81,73,.25); }
    .dashm-tax-addbtn { width:100%; padding:9px 12px; background:rgba(88,166,255,.07); border:1px solid rgba(88,166,255,.22); border-radius:8px; color:#79c0ff; font-size:.76rem; font-weight:600; cursor:pointer; transition:.15s; }
    .dashm-tax-addbtn:hover { background:rgba(88,166,255,.13); border-color:rgba(88,166,255,.45); }
    .dashm-tax-form { background:rgba(13,17,23,.55); border:1px solid rgba(110,118,129,.18); border-radius:10px; padding:12px; margin-bottom:8px; }
    .dashm-tax-form .form-field { margin-bottom:9px; }
    .dashm-tax-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
    .dashm-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
    .dashm-title { font-size:1.05rem; font-weight:800; color:#e6edf3; }
    .dashm-x { border:none; background:none; color:#8b949e; font-size:1.15rem; cursor:pointer; padding:4px 8px; border-radius:8px; }
    .dashm-x:hover { color:#e6edf3; background:rgba(110,118,129,.15); }
    .dashm-sub2 { font-size:0.76rem; color:#8b949e; margin-bottom:16px; }
    .dashm-card { border:1px solid rgba(110,118,129,.22); border-radius:12px; padding:14px 16px; margin-bottom:11px; background:rgba(110,118,129,.04); transition:border-color .15s; }
    .dashm-card:hover { border-color:rgba(110,118,129,.4); }
    .dashm-card.active { border-color:rgba(59,130,246,.5); background:rgba(59,130,246,.06); }
    .dashm-name { font-weight:700; font-size:0.9rem; color:#e6edf3; display:flex; align-items:center; gap:8px; }
    .dashm-sub { font-size:0.72rem; color:#8b949e; margin-top:4px; line-height:1.5; }
    .dashm-actions { display:flex; gap:8px; margin-top:10px; }
    .dashm-actions button { font-size:0.72rem; padding:5px 13px; border-radius:8px; border:1px solid rgba(110,118,129,.3); background:none; color:#8b949e; cursor:pointer; transition:.14s; }
    .dashm-actions button:hover { color:#e6edf3; border-color:rgba(110,118,129,.6); }
    .dashm-actions button.danger:hover { color:#f85149; border-color:rgba(248,81,73,.5); }
    .dashm-newbtn { width:100%; margin-top:6px; padding:11px; border:none; border-radius:10px; background:#2f81f7; color:#fff; font-weight:700; font-size:0.85rem; cursor:pointer; transition:.15s; }
    .dashm-newbtn:hover { background:#4993ff; }
    .dashm-back { border:none; background:none; color:#8b949e; font-size:0.78rem; cursor:pointer; padding:0; margin-bottom:14px; }
    .dashm-back:hover { color:#9ecbff; }
    /* ── Preferências v2: settings SaaS ── */
    .prefs2-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1180px; margin-bottom:26px; }
    .prefs2-hero h2 { margin:0; font-size:1.35rem; font-weight:800; }
    .prefs2-hero p { margin:4px 0 0; font-size:0.78rem; color:#8b949e; }
    .prefs2-newbtn { display:inline-flex; align-items:center; gap:8px; width:auto; padding:10px 20px; margin:0; }
    .prefs2-sec-title { display:flex; align-items:center; gap:9px; max-width:1180px; font-size:0.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8b949e; margin:0 0 12px 2px; }
    .prefs2-count { background:rgba(110,118,129,.18); color:#adb6c2; border-radius:20px; padding:1px 9px; font-size:0.64rem; letter-spacing:0; }
    .prefs2-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:16px; max-width:1180px; margin-bottom:30px; }
    .prefs2-dash { border:1px solid rgba(110,118,129,.22); border-radius:14px; background:rgba(110,118,129,.045); padding:18px; transition:border-color .16s, transform .16s, box-shadow .16s; }
    .prefs2-dash:hover { border-color:rgba(110,118,129,.42); transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.28); }
    .prefs2-dash.active { border-color:rgba(59,130,246,.45); background:linear-gradient(160deg, rgba(59,130,246,.07), rgba(110,118,129,.03)); }
    .prefs2-dash-top { display:flex; align-items:center; gap:12px; }
    .prefs2-dash-ic { width:38px; height:38px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(59,130,246,.13); color:#79b8ff; }
    .prefs2-dash-name { font-weight:700; font-size:0.92rem; color:#e6edf3; line-height:1.3; }
    .prefs2-dash-desc { font-size:0.72rem; color:#8b949e; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
    .prefs2-dash-meta { display:flex; flex-direction:column; gap:7px; margin:14px 0; padding:12px 0; border-top:1px solid rgba(110,118,129,.14); border-bottom:1px solid rgba(110,118,129,.14); font-size:0.74rem; color:#96a0ab; }
    .prefs2-dash-meta span { display:inline-flex; align-items:center; gap:8px; }
    .prefs2-dash-meta svg { opacity:.7; flex-shrink:0; }
    .prefs2-dash-foot { display:flex; align-items:center; gap:8px; }
    .prefs2-open { flex:1; padding:8px 12px; border:none; border-radius:9px; background:rgba(59,130,246,.14); color:#79b8ff; font-weight:700; font-size:0.74rem; cursor:pointer; transition:.14s; }
    .prefs2-open:hover { background:rgba(59,130,246,.26); }
    .prefs2-open.cur { background:rgba(63,185,80,.12); color:#7ee2a8; cursor:default; }
    .prefs2-edit { padding:8px 14px; border:1px solid rgba(110,118,129,.3); border-radius:9px; background:none; color:#adb6c2; font-weight:600; font-size:0.74rem; cursor:pointer; transition:.14s; }
    .prefs2-edit:hover { color:#e6edf3; border-color:rgba(110,118,129,.6); }
    .prefs2-ghost { border:1.5px dashed rgba(110,118,129,.32); border-radius:14px; min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#6e7681; cursor:pointer; background:none; font-size:0.8rem; font-weight:600; transition:.16s; }
    .prefs2-ghost:hover { color:#9ecbff; border-color:rgba(59,130,246,.5); background:rgba(59,130,246,.04); }
    .prefs2-ghost .pg-plus { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(110,118,129,.14); font-size:1.15rem; line-height:1; transition:.16s; }
    .prefs2-ghost:hover .pg-plus { background:rgba(59,130,246,.16); }
    .prefs2-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1180px; }
    .prefs2-card { background:#161b22; border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:24px 26px; box-shadow:0 4px 24px rgba(0,0,0,0.3); }
    body.light .prefs2-card { background:#ffffff; border-color:#e2e8f0; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
    .prefs2-card-title { font-size:0.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8b949e; margin-bottom:16px; }
    .prefs2-acc { display:flex; align-items:center; gap:13px; margin-bottom:16px; }
    .prefs2-acc-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#7c3aed); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1rem; overflow:hidden; }
    .prefs2-acc-avatar img { width:100%; height:100%; object-fit:cover; }
    .prefs2-acc-name { font-weight:700; font-size:0.9rem; color:#e6edf3; }
    .prefs2-acc-sub { font-size:0.72rem; color:#8b949e; margin-top:2px; }
    .prefs2-acc-actions { display:flex; gap:9px; }
    .prefs2-acc-actions button { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid rgba(110,118,129,.3); border-radius:9px; background:none; color:#adb6c2; font-weight:600; font-size:0.74rem; cursor:pointer; transition:.14s; }
    .prefs2-acc-actions button:hover { color:#e6edf3; border-color:rgba(110,118,129,.6); }
    /* Preferências v3: 2 colunas cheias (molde Avançado) */
    .prefs3-wrap { display:grid; grid-template-columns:1.25fr 1fr; gap:22px; align-items:start; }
    .prefs3-left { display:flex; flex-direction:column; gap:18px; }
    .prefs3-wh { display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid rgba(110,118,129,.12); }
    .prefs3-wh:last-child { border-bottom:none; }
    .prefs3-wh { padding:11px 0; }
    .prefs3-wh .whn { display:flex; align-items:center; gap:8px; font-size:0.83rem; font-weight:700; color:#c9d1d9; width:118px; flex-shrink:0; }
    .prefs3-wh .whu { flex:1; min-width:0; font-family:ui-monospace,monospace; font-size:0.66rem; color:#6e7681; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .prefs3-wh .whc { flex-shrink:0; border:1px solid rgba(110,118,129,.3); background:none; color:#8b949e; font-size:0.68rem; font-weight:700; padding:5px 12px; border-radius:8px; cursor:pointer; transition:.14s; }
    .prefs3-wh .whc:hover { color:#e6edf3; border-color:rgba(110,118,129,.6); }
    .prefs3-wh .whc.ok { color:#7ee2a8; border-color:rgba(63,185,80,.4); }
    .prefs3-log { display:flex; align-items:center; gap:13px; padding:11px 4px; border-bottom:1px solid rgba(110,118,129,.12); transition:background .12s; border-radius:8px; }
    .prefs3-log:last-child { border-bottom:none; }
    .prefs3-log:hover { background:rgba(110,118,129,.06); }
    .prefs3-log .plg-badge { flex-shrink:0; font-size:0.62rem; font-weight:800; letter-spacing:.04em; border-radius:20px; padding:3px 11px; }
    .prefs3-log .plg-badge.pago { color:#7ee2a8; background:rgba(63,185,80,.13); }
    .prefs3-log .plg-badge.gerado { color:#e3b341; background:rgba(227,179,65,.13); }
    .prefs3-log .plg-badge.reembolso  { color:#79c0ff; background:rgba(88,166,255,.13); }
    .prefs3-log .plg-badge.chargeback { color:#ff7b72; background:rgba(248,81,73,.13); }
    .prefs3-log .plg-val.estorno { color:#ff7b72; }
    .prefs3-log .plg-main { flex:1; min-width:0; display:flex; flex-direction:column; }
    .prefs3-log .plg-prod { font-size:0.8rem; font-weight:700; color:#e6edf3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .prefs3-log .plg-sub { font-size:0.68rem; color:#8b949e; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .prefs3-log .plg-val { flex-shrink:0; font-size:0.84rem; font-weight:800; color:#7ee2a8; }
    .prefs3-log .plg-val.pend { color:#e3b341; }
    .prefs3-log .plg-time { flex-shrink:0; font-size:0.68rem; color:#6e7681; width:74px; text-align:right; }
    .prefs3-log-empty { padding:26px 0; text-align:center; color:#6e7681; font-size:0.78rem; }
    .prefs3-mspend-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 6px; }
    .prefs3-mspend-form .dash-recent-select { min-width:0; flex:1 1 120px; color:#e6edf3; }
    .prefs3-mspend-form input[type=number] { flex:1 1 110px; }
    .mspend-cal-wrap { flex:1 1 170px; }
    .mspend-datebtn { width:100%; justify-content:flex-start; }
    .dash-calendar.mspend-cal { min-width:min(580px, calc(100vw - 48px)); }
    .mspend-cal-quick { display:flex; flex-wrap:wrap; gap:6px; }
    .mspend-cal-quick .date-quick-btn.active { border-color:#58a6ff; color:#58a6ff; }
    .dash-cal-day.future { opacity:.35; }
    .mspend-modo { display:inline-flex; background:#0d1117; border:1px solid #30363d; border-radius:9px; padding:3px; gap:2px; flex:0 0 auto; }
    .mspend-modo.hidden { display:none; }
    .mspend-modo button { background:none; border:none; color:#8b949e; font-size:11px; font-weight:700; padding:5px 10px; border-radius:7px; cursor:pointer; font-family:inherit; }
    .mspend-modo button.active { background:#58a6ff22; color:#58a6ff; }
    .mspend-hint { font-size:0.74rem; color:#8b949e; min-height:1.1em; margin:0 0 6px; }
    .mspend-hint b { color:#e6edf3; }
    body.light .mspend-modo { background:#f8fafc; border-color:#e2e8f0; }
    body.light .mspend-hint b { color:#0f172a; }
    @media (max-width:700px) { .dash-calendar.mspend-cal .dash-cal-divider, .dash-calendar.mspend-cal #msCalPanelR { display:none; } }
    .prefs3-mspend-form input::-webkit-calendar-picker-indicator { filter:invert(.7); }
    body.light .prefs3-mspend-form .dash-recent-select { color:#0f172a; }
    body.light .prefs3-mspend-form input::-webkit-calendar-picker-indicator { filter:none; }
    .prefs3-log .plg-badge.mspend { color:#c9d1d9; background:rgba(110,118,129,.18); font-variant-numeric:tabular-nums; }
    .prefs3-log .plg-val.mspend { color:#ff7b72; }
    .prefs3-log .plg-del { flex-shrink:0; border:none; background:none; color:#6e7681; font-size:1rem; cursor:pointer; padding:2px 6px; border-radius:6px; }
    .prefs3-log .plg-del:hover { color:#ff7b72; background:rgba(248,81,73,.12); }
    .prefs3-mspend-total { display:flex; justify-content:space-between; padding:8px 4px 0; color:#8b949e; font-size:0.72rem; }
    .prefs3-logpag { display:flex; align-items:center; justify-content:center; gap:14px; padding-top:13px; margin-top:6px; border-top:1px solid rgba(110,118,129,.12); }
    .prefs3-logpag button { border:1px solid rgba(110,118,129,.3); background:none; color:#adb6c2; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:0.95rem; line-height:1; transition:.13s; }
    .prefs3-logpag button:hover:not(:disabled) { color:#e6edf3; border-color:rgba(110,118,129,.6); }
    .prefs3-logpag button:disabled { opacity:.35; cursor:default; }
    .prefs3-logpag span { font-size:0.72rem; color:#8b949e; min-width:60px; text-align:center; }
    .prefs3-secrows { display:flex; flex-direction:column; }
    .prefs3-secrows button { display:flex; align-items:center; gap:13px; width:100%; padding:12px 4px; border:none; border-bottom:1px solid rgba(110,118,129,.12); background:none; cursor:pointer; text-align:left; transition:.13s; border-radius:8px; }
    .prefs3-secrows button:last-child { border-bottom:none; }
    .prefs3-secrows button:hover { background:rgba(110,118,129,.07); padding-left:10px; }
    .prefs3-secrows .p3s-ic { width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(110,118,129,.12); color:#adb6c2; }
    .prefs3-secrows .p3s-tx { flex:1; display:flex; flex-direction:column; gap:2px; }
    .prefs3-secrows .p3s-tx b { font-size:0.8rem; font-weight:700; color:#e6edf3; }
    .prefs3-secrows .p3s-tx i { font-style:normal; font-size:0.68rem; color:#8b949e; }
    .prefs3-secrows .p3s-go { color:#6e7681; font-size:1rem; }
    .prefs3-right { display:flex; flex-direction:column; gap:18px; }
    .prefs3-sub { font-size:0.75rem; color:#8b949e; margin:-6px 0 14px; }
    .prefs3-newbtn { width:auto; align-self:flex-start; padding:10px 24px; margin-top:4px; }
    @media (max-width: 980px) { .prefs3-wrap { grid-template-columns:1fr; } }
    .prefs3-dash { position:relative; border:1px solid rgba(110,118,129,.25); border-radius:13px; background:rgba(110,118,129,.05); padding:18px 20px; margin-bottom:13px; transition:border-color .15s; }
    .prefs3-dash:hover { border-color:rgba(110,118,129,.42); }
    .prefs3-dash.active { border-color:rgba(59,130,246,.45); background:linear-gradient(160deg, rgba(59,130,246,.06), rgba(110,118,129,.03)); }
    .prefs3-dash-top { display:flex; align-items:center; gap:8px; }
    .prefs3-dash-name { font-weight:700; font-size:0.98rem; color:#e6edf3; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .prefs3-select { position:absolute; inset:0; z-index:1; width:100%; height:100%; padding:0; border:0; border-radius:inherit; background:transparent; cursor:pointer; }
    .prefs3-select:focus-visible { outline:2px solid #79b8ff; outline-offset:3px; }
    .prefs3-dash .dashm-kebab { position:relative; z-index:2; }
    .prefs2-plan-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
    .prefs2-plan-name { font-weight:800; font-size:1rem; color:#e6edf3; }
    .prefs2-usagebar { height:8px; border-radius:6px; background:rgba(110,118,129,.18); overflow:hidden; }
    .prefs2-usagefill { height:100%; border-radius:6px; background:linear-gradient(90deg,#3b82f6,#7c9dff); transition:width .5s ease; }
    .prefs2-usagefill.warn { background:linear-gradient(90deg,#e3b341,#f0883e); }
    .prefs2-usagefill.hot { background:linear-gradient(90deg,#f0883e,#f85149); }
    .prefs2-usage-legend { display:flex; justify-content:space-between; font-size:0.72rem; color:#8b949e; margin-top:7px; }
    .prefs2-stats { display:flex; gap:18px; margin-top:14px; padding-top:13px; border-top:1px solid rgba(110,118,129,.14); }
    .prefs2-stats div { flex:1; }
    .prefs2-stats .n { font-weight:800; font-size:1.05rem; color:#e6edf3; }
    .prefs2-stats .l { font-size:0.66rem; color:#8b949e; margin-top:2px; }
    .prefs2-nets { display:flex; flex-wrap:wrap; gap:9px; }
    .prefs2-net { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid rgba(110,118,129,.25); border-radius:22px; font-size:0.74rem; font-weight:600; color:#adb6c2; background:rgba(110,118,129,.06); }
    .prefs2-net img, .prefs2-net svg { height:13px; width:auto; }
    .prefs2-net .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
    .prefs2-net.on { border-color:rgba(63,185,80,.35); }
    .prefs2-net.on .dot { background:#3fb950; box-shadow:0 0 6px #3fb95088; }
    .prefs2-net.off { opacity:.55; }
    .prefs2-net.off .dot { background:#6e7681; }
    @media (max-width: 900px) { .prefs2-row { grid-template-columns: 1fr; } .prefs2-hero { flex-direction:column; align-items:flex-start; } }
    @media (max-width: 900px) { .prefs-grid { grid-template-columns: 1fr !important; } }
    .dashm-chip { display:inline-block; font-size:0.58rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#8b949e; background:rgba(110,118,129,.15); border-radius:20px; padding:2px 9px; margin-left:8px; vertical-align:middle; }
    .dashm-chip.on { color:#7ee2a8; background:rgba(63,185,80,.12); }
    .dashm-meta { display:flex; gap:16px; margin-top:9px; font-size:0.72rem; color:#8b949e; }
    .dashm-meta span { display:inline-flex; align-items:center; gap:6px; }
    .dashm-menu button svg { flex-shrink:0; opacity:.75; }
    .dashm-kebab { position:relative; }
    .dashm-kebab-btn { border:none; background:none; color:#8b949e; cursor:pointer; font-size:1.05rem; padding:2px 8px; border-radius:7px; line-height:1; }
    .dashm-kebab-btn:hover { color:#e6edf3; background:rgba(110,118,129,.15); }
    .dashm-menu { position:absolute; right:0; top:26px; min-width:190px; background:var(--card,#161b22); border:1px solid rgba(110,118,129,.3); border-radius:11px; box-shadow:0 14px 40px rgba(0,0,0,.5); padding:5px; z-index:60; display:none; }
    .dashm-menu.show { display:block; }
    .dashm-menu button { display:flex; align-items:center; gap:9px; width:100%; padding:8px 11px; border:none; background:none; color:#c9d1d9; font-size:0.78rem; font-weight:600; cursor:pointer; border-radius:8px; text-align:left; }
    .dashm-menu button:hover { background:rgba(110,118,129,.14); }
    .dashm-menu button.danger { color:#f08680; }
    .dashm-menu button.danger:hover { background:rgba(248,81,73,.12); }
    .dash-active-chip { display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700; color:#79b8ff; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.3); border-radius:20px; padding:3px 11px; margin-left:10px; vertical-align:middle; cursor:pointer; }

    .plat-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; margin-bottom: 18px; }
    .plat-sel { display: flex; gap: 6px; margin-bottom: 18px; }
    .plat-btn {
      min-width: 0;
      height: 42px;
      padding: 0 12px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      color: #8b949e;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      white-space: nowrap;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .plat-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
    .plat-btn .plat-emoji { font-size: 15px; line-height: 1; flex-shrink: 0; }
    .plat-btn:hover { border-color: rgba(255,255,255,0.3); color: #e6edf3; }
    .plat-btn.active { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); color: #f0f0f5; }
    .plat-btn.active-tt { border-color: rgba(255,0,80,.6); background: rgba(255,0,80,.1); color: #ff5c7a; }
    .plat-btn.active-fb { border-color: rgba(24,119,242,.6); background: rgba(24,119,242,.1); color: #5b9eff; }
    .plat-btn.active-kwai, .ativar-plat-tab.active-kwai { background: linear-gradient(135deg, #ff6400, #ff4500); color: #fff; }

    .fb-section { display: none; }
    .fb-section.show { display: block; }
    .kwai-section { display: none; }
    .kwai-section.show { display: block; }
    .tt-section.hide { display: none; }

    /* ── MAIN BTN ─────────────────────────────── */
    .btn-ativar {
      width: 100%;
      padding: 14px;
      background: #58a6ff;
      border: none;
      border-radius: 12px;
      color: #fff;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      letter-spacing: 0.03em;
      box-shadow: 0 6px 24px rgba(255,255,255,0.35);
      margin-top: 8px;
    }
    .btn-ativar:hover {
      background: #58a6ff;
      box-shadow: 0 8px 32px rgba(255,255,255,0.5);
      transform: translateY(-1px);
    }
    .btn-ativar:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    /* ══ ATIVAR PIXEL layout 2 colunas ════════ */
    .ativar-grid {
      display: grid;
      grid-template-columns: 420px 1fr;
      gap: 20px;
      align-items: start;
      padding-right: 160px; /* safe zone p/ ícones fixos do topo (sininho + app switcher) */
    }
    @media (max-width: 900px) { .ativar-grid { grid-template-columns: 1fr; } }
    @media (max-width: 700px) { .ativar-grid { padding-right: 100px; } }
    /* 29/10: com a zona de 160px dos icones a coluna da direita nao cabia ao lado
       do formulario de 420px perto de 900px e vazava cortada; empilha antes. */
    .ativar-grid > * { min-width: 0; }
    @media (max-width: 1000px) { .ativar-grid { grid-template-columns: minmax(0, 1fr); } }

    .ativar-form-card {
      background: #161b22;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px;
      padding: 24px;
      box-shadow: 0 4px 32px rgba(0,0,0,0.3);
    }

    .ativar-plat-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 22px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 4px;
    }
    .ativar-plat-tab {
      flex: 1; padding: 9px 12px;
      background: transparent; border: none;
      border-radius: 9px; font-size: 0.82rem; font-weight: 600;
      cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s; color: #8b949e;
    }
    .ativar-plat-tab.active-tt {
      background: rgba(255,0,80,0.12);
      color: #ff5c7a;
      box-shadow: 0 2px 8px rgba(255,0,80,0.15);
    }
    .ativar-plat-tab.active-fb {
      background: rgba(24,119,242,0.12);
      color: #5b9eff;
      box-shadow: 0 2px 8px rgba(24,119,242,0.15);
    }

    .ativar-form-title {
      font-size: 1.1rem; font-weight: 800; color: #e2e8f0;
      margin-bottom: 4px;
    }
    .ativar-form-sub {
      font-size: 0.73rem; color: #8b949e; margin-bottom: 20px; line-height: 1.5;
    }
    .ativar-form-sub b { color: #f0f0f5; }

    .ativar-field { margin-bottom: 10px; }
    .ativar-field-label {
      font-size: 0.62rem; font-weight: 700; color: #8b949e;
      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; display: block;
    }

    .ativar-pixel-row {
      display: flex; gap: 6px; margin-bottom: 6px;
    }
    .ativar-pixel-row input { flex: 1; }

    .ativar-divider {
      height: 1px;
      background: rgba(255,255,255,0.05);
      margin: 16px 0;
    }

    .ativar-toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 10px;
      margin-bottom: 10px;
    }
    .ativar-toggle-label { font-size: 0.82rem; font-weight: 600; color: #94a3b8; }
    .ativar-toggle-sub   { font-size: 0.68rem; color: #8b949e; margin-top: 2px; }

    /* Eventos summary card (coluna direita) */
    .ativar-events-card {
      background: #161b22;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px;
      padding: 24px;
      box-shadow: 0 4px 32px rgba(0,0,0,0.3);
    }
    .ativar-events-title {
      font-size: 0.62rem; font-weight: 700; color: #8b949e;
      text-transform: uppercase; letter-spacing: 0.09em;
      margin-bottom: 14px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .ativar-events-total-badge {
      font-size: 0.72rem; font-weight: 800; color: #f0f0f5;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 99px; padding: 2px 10px;
    }
    .ativar-events-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    .ativar-event-row {
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 8px;
      padding: 9px 12px;
    }
    .ativar-event-name { font-size: 0.73rem; color: #64748b; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ativar-event-row { gap: 8px; }
    .ativar-event-count { flex-shrink: 0; }
    .ativar-event-count {
      font-size: 0.73rem; font-weight: 700; color: #f0f0f5;
      background: rgba(255,255,255,0.08); border-radius: 4px; padding: 1px 7px;
    }
    .ativar-events-footer {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.05);
      display: flex; align-items: center; justify-content: space-between;
    }
    .ativar-events-footer-lbl { font-size: 0.75rem; color: #8b949e; }
    .ativar-events-footer-val { font-size: 1rem; font-weight: 800; color: #e2e8f0; }

    /* ── PROGRESS ─────────────────────────────── */
    .progress-wrap {
      margin-top: 24px;
      display: none;
    }

    .progress-wrap.show {
      display: block;
    }

    .progress-head {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .p-label { color: #8b949e; font-size: 0.78rem; }
    .p-count { color: #f0f0f5; font-size: 0.78rem; font-weight: 600; }

    .pbar-bg {
      height: 6px;
      background: #30363d;
      border-radius: 99px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .pbar-fill {
      height: 100%;
      background: linear-gradient(90deg, #f0f0f5, #3fb950);
      border-radius: 99px;
      width: 0%;
      transition: width 0.08s;
    }

    .ev-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
    }

    .ev-tile {
      background: #1c2333;
      border-radius: 8px;
      padding: 9px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .ev-name { color: #8b949e; font-size: 0.7rem; }
    .ev-count { color: #8b949e; font-size: 0.75rem; font-weight: 600; }
    .ev-tile.done .ev-name { color: #58a6ff66; }
    .ev-tile.done .ev-count { color: #f0f0f5; }

    /* ── STATUS ───────────────────────────────── */
    .status {
      font-size: 0.78rem;
      padding: 8px 14px;
      border-radius: 8px;
      margin-top: 10px;
      display: none;
    }
    .status.ok  { display: block; background: rgba(63,185,80,0.1); color: #3fb950; border: 1px solid rgba(63,185,80,0.2); }
    .status.err { display: block; background: rgba(248,81,73,0.08); color: #f85149; border: 1px solid rgba(248,81,73,0.2); }
    .status.inf { display: block; background: rgba(255,255,255,0.08); color: #f0f0f5; border: 1px solid rgba(255,255,255,0.2); }

    /* ══════════════════════════════════════════
       HISTÓRICO
    ══════════════════════════════════════════ */
    #abaHistorico {
      max-width: 900px;
      margin: 0 auto;
      padding: 28px 24px 48px;
      box-sizing: border-box;
    }
    .hist-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 24px;
      gap: 16px;
      flex-wrap: wrap;
      padding-right: 160px; /* zona dos ícones do topo (ajuda + apps + sininho); "Limpar tudo" ficava por baixo (29/10) */
    }
    .hist-header-left h1 {
      font-size: 1.3rem;
      font-weight: 800;
      color: #e2e8f0;
      letter-spacing: -0.01em;
      line-height: 1;
    }
    .hist-header-left p {
      font-size: 0.75rem;
      color: #8b949e;
      margin-top: 5px;
    }
    .hist-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .hist-stat-pill {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 6px 14px;
      font-size: 0.73rem;
      color: #64748b;
    }
    .hist-stat-pill b { color: #f0f0f5; font-weight: 700; }
    .btn-clear {
      padding: 7px 14px;
      background: transparent;
      border: 1px solid rgba(232,68,90,0.25);
      border-radius: 10px;
      color: #e8445a;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      font-family: inherit;
    }
    .btn-clear:hover { background: rgba(232,68,90,0.08); border-color: rgba(232,68,90,0.4); }

    .hist-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 0;
      gap: 12px;
    }
    .hist-empty-icon {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
    }
    .hist-empty-text {
      font-size: 0.82rem;
      color: #6e7681;
      text-align: center;
    }

    /* Badge de plataforma no card */
    .px-plat-badge {
      font-size: 0.63rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 5px;
      flex-shrink: 0;
      letter-spacing: 0.02em;
    }
    .px-plat-badge.tt { background: rgba(0,194,203,0.1); color: #f0f0f5; border: 1px solid rgba(0,194,203,0.2); }
    .px-plat-badge.fb { background: rgba(24,119,242,0.1); color: #5b9bf2; border: 1px solid rgba(24,119,242,0.25); }
    .px-plat-badge.kwai { background: rgba(255,100,0,0.1); color: #ff6400; border: 1px solid rgba(255,100,0,0.25); }

    /* Grid 2 colunas para eventos no body */
    .ev-rows-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin-bottom: 16px;
    }
    @media (max-width: 600px) { .ev-rows-grid { grid-template-columns: 1fr; } }

    /* Labels de seção no body do card */
    .hist-section-lbl {
      font-size: 0.67rem;
      font-weight: 600;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 8px;
      margin-top: 14px;
    }

    /* ── PIXEL CARDS (histórico) ──────────────── */
    .px-card {
      background: #161b22;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      margin-bottom: 8px;
      overflow: hidden;
      transition: border-color 0.18s;
    }
    .px-card:hover { border-color: rgba(255,255,255,0.25); }
    .px-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      cursor: pointer;
    }
    .px-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #3fb950;
      flex-shrink: 0;
      box-shadow: 0 0 8px rgba(63,185,80,0.5);
    }
    .px-name { font-size: 0.85rem; font-weight: 600; color: #f0f0f5; flex: 1; }
    .px-id   { font-size: 0.7rem; color: #8b949e; font-family: monospace; }
    .px-chevron { color: #6e7681; font-size: 0.7rem; transition: transform 0.18s; }
    .px-card.open .px-chevron { transform: rotate(90deg); }
    .px-body { display: none; padding: 0 16px 16px; }
    .px-card.open .px-body { display: block; }

    .px-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      cursor: pointer;
      user-select: none;
    }

    .px-left { display: flex; align-items: center; gap: 12px; }

    .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .dot.ok { background: #3fb950; box-shadow: 0 0 6px rgba(63,185,80,0.5); }
    .dot.err { background: #f85149; box-shadow: 0 0 6px rgba(248,81,73,0.5); }

    .px-meta { color: #8b949e; font-size: 0.7rem; margin-top: 2px; }

    .px-right { display: flex; align-items: center; gap: 10px; }
    .px-total { color: #f0f0f5; font-size: 0.78rem; font-weight: 600; }

    .section-label {
      color: #6e7681;
      font-size: 0.67rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 10px;
    }

    .ev-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }

    .ev-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #1c2333;
      border-radius: 7px;
      padding: 9px 12px;
    }

    .ev-row-left { display: flex; align-items: center; gap: 8px; }

    .mini-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
    .mini-dot.ok { background: #58a6ff; }
    .mini-dot.err { background: #e8445a; }

    .ev-row-name { color: #e6edf3; font-size: 0.8rem; }
    .ev-row-right { display: flex; align-items: center; gap: 8px; }
    .ev-row-qty { color: #fff; font-size: 0.8rem; font-weight: 600; }

    .chip { font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
    .chip.ok { background: #58a6ff18; color: #f0f0f5; }
    .chip.err { background: #e8445a18; color: #e8445a; }

    /* ── LOG ──────────────────────────────────── */
    .log-box {
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 14px 16px;
      min-height: 80px;
      max-height: 240px;
      overflow-y: auto;
      font-family: 'Courier New', monospace;
      font-size: 0.72rem;
      line-height: 1.7;
    }
    .log-box::-webkit-scrollbar { width: 4px; }
    .log-box::-webkit-scrollbar-track { background: transparent; }
    .log-box::-webkit-scrollbar-thumb { background: #30363d; border-radius: 99px; }
    .ll { padding: 1px 0; }
    .ok  { color: #3fb950; }
    .err { color: #f85149; }
    .inf { color: #8b949e; }
    .wrn { color: #d29922; }

    /* ══════════════════════════════════════════
       ABA PIXELS (gerenciamento de pixels)
    ══════════════════════════════════════════ */
    /* ══ PAGE HEADER (abas) ══════════════════ */
    .page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 28px;
      gap: 16px;
      /* Safe zone pros ícones fixos do topo (sininho + app switcher) — evita colisão */
      padding-right: 160px;
    }
    @media (max-width: 700px) {
      .page-header { padding-right: 100px; }
    }
    .page-header-left h1 {
      font-size: 1.45rem;
      font-weight: 800;
      color: #e2e8f0;
      letter-spacing: -0.01em;
      line-height: 1;
    }
    .page-header-left p {
      font-size: 0.75rem;
      color: #8b949e;
      margin-top: 5px;
    }
    .page-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    /* ══ 2-COLUMN GRID ════════════════════════ */
    .tab-two-col {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 20px;
      align-items: start;
      width: 100%;
    }
    @media (max-width: 900px) {
      .tab-two-col { grid-template-columns: 1fr; }
    }

    /* Painel de lista com scroll interno */
    .section-box.scrollable {
      max-height: calc(100vh - 220px);
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #30363d transparent;
    }
    .section-box.scrollable::-webkit-scrollbar { width: 4px; }
    .section-box.scrollable::-webkit-scrollbar-track { background: transparent; }
    .section-box.scrollable::-webkit-scrollbar-thumb { background: #30363d; border-radius: 99px; }

    /* ══ SECTION BOX ═══════════════════════════ */
    .section-box {
      background: #161b22;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 22px 24px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    }
    .section-box-title {
      font-size: 0.7rem;
      font-weight: 700;
      color: #8b949e;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .section-head h2 { font-size: 1rem; font-weight: 700; }

    .pix-count {
      font-size: 0.72rem;
      color: #8b949e;
      background: #1c2333;
      border: 1px solid #30363d;
      border-radius: 6px;
      padding: 3px 10px;
    }

    /* pixel card na lista de gerenciamento */
    .pixel-cfg-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 8px;
      transition: border-color 0.18s;
      position: relative;
    }

    .pixel-cfg-card:hover { border-color: rgba(255,255,255,0.28); }

    .pcfg-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .pcfg-name {
      font-size: 0.88rem;
      font-weight: 700;
      color: #e2e8f0;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .pcfg-actions { display: flex; gap: 6px; flex-shrink: 0; }

    .btn-del-pixel {
      background: transparent;
      border: 1px solid rgba(232,68,90,0.18);
      border-radius: 7px;
      color: #e8445a88;
      font-size: 0.7rem;
      padding: 4px 10px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .btn-del-pixel:hover { border-color: rgba(232,68,90,0.5); color: #e8445a; background: rgba(232,68,90,0.08); }

    .pcfg-info {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .pcfg-chip {
      font-size: 0.67rem;
      color: #8b949e;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px;
      padding: 3px 9px;
      font-family: 'Courier New', monospace;
    }
    .pcfg-chip.id-chip { color: #f0f0f5; border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); }
    .pcfg-chip.test-chip { color: #f59e0b88; border-color: rgba(245,158,11,0.2); background: rgba(245,158,11,0.05); }

    /* ── Botão editar pixel ──────────────────── */
    .btn-edit-pixel {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 7px;
      color: #f0f0f5;
      font-size: 0.7rem;
      padding: 4px 10px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .btn-edit-pixel:hover { border-color: rgba(255,255,255,0.45); color: #f0f0f5; background: rgba(255,255,255,0.08); }

    /* ── Chips clicáveis (copiar) ─────────────── */
    .pcfg-chip.clickable { cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s; }
    .pcfg-chip.clickable:hover { border-color: rgba(255,255,255,0.4); color: #f0f0f5; background: rgba(255,255,255,0.1); }
    .pcfg-chip.copied { color: #3fb950 !important; border-color: rgba(63,185,80,0.35) !important; background: rgba(63,185,80,0.08) !important; }

    /* ── Modal de edição ──────────────────────── */
    .edit-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(4px);
      z-index: 9000;
      align-items: center;
      justify-content: center;
    }
    .edit-modal-overlay.open { display: flex; }
    .edit-modal {
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 18px;
      padding: 26px 24px;
      width: 100%;
      max-width: 440px;
      margin: 16px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    }
    .edit-modal-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: #8b949e;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 16px;
    }
    .edit-modal-actions {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }
    .btn-edit-save {
      flex: 1;
      background: #58a6ff;
      border: none;
      border-radius: 8px;
      color: #fff;
      font-size: 0.8rem;
      font-weight: 600;
      padding: 9px 0;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      box-shadow: 0 2px 10px rgba(255,255,255,0.3);
    }
    .btn-edit-save:hover { background: #58a6ff; }
    .btn-edit-save:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-edit-cancel {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 8px;
      color: #8b949e;
      font-size: 0.8rem;
      padding: 9px 18px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .btn-edit-cancel:hover { color: #94a3b8; border-color: rgba(255,255,255,0.15); }

    .empty-pixels {
      text-align: center;
      color: #6e7681;
      font-size: 0.82rem;
      padding: 48px 0 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .empty-pixels svg { opacity: 0.2; }

    .add-pixel-form { display: none; }

    .add-form-title { display: none; }

    .form-field {
      margin-bottom: 10px;
    }

    .form-label {
      font-size: 0.67rem;
      font-weight: 600;
      color: #8b949e;
      margin-bottom: 6px;
      display: block;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .form-label span { color: #e8445a; margin-left: 2px; }
    .form-label em { color: #6e7681; margin-left: 4px; font-style: normal; }

    .form-input {
      width: 100%;
      padding: 10px 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 10px;
      color: #e2e8f0;
      font-size: 0.82rem;
      font-family: 'Courier New', monospace;
      transition: border-color 0.18s, box-shadow 0.18s;
      box-sizing: border-box;
    }

    .form-input::placeholder { color: #6e7681; }
    .form-input:focus {
      outline: none;
      border-color: rgba(255,255,255,0.45);
      box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.04);
    }

    .btn-save-pixel {
      width: 100%;
      padding: 11px;
      background: #58a6ff;
      border: none;
      border-radius: 10px;
      color: #fff;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      letter-spacing: 0.02em;
      box-shadow: 0 4px 16px rgba(255,255,255,0.3);
    }
    .btn-save-pixel:hover {
      background: #58a6ff;
      box-shadow: 0 6px 24px rgba(255,255,255,0.45);
      transform: translateY(-1px);
    }
    .btn-save-pixel:disabled { opacity: 0.4; cursor: not-allowed; }

    .pixels-loading {
      text-align: center;
      color: #30363d;
      font-size: 0.8rem;
      padding: 24px 0;
    }

    /* ══════════════════════════════════════════
       ABA WEBHOOK
    ══════════════════════════════════════════ */
    #abaWebhook {
      padding: 28px 24px 48px;
      box-sizing: border-box;
      width: 100%;
      max-width: 860px;
      margin: 0 auto;
    }

    .wh-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .wh-section-title {
      display: flex; align-items: center; gap: 10px;
    }
    .wh-section-title h2 {
      font-size: 1rem; font-weight: 700; color: #e2e8f0;
    }
    .wh-count {
      font-size: 0.68rem; font-weight: 700;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.2);
      color: #f0f0f5; border-radius: 99px; padding: 2px 8px;
    }
    .wh-section-sub {
      font-size: 0.72rem; color: #8b949e; margin-top: 4px;
    }

    /* Platform row card */
    .wh-platform-list { display: flex; flex-direction: column; gap: 10px; }

    .wh-row {
      background: #161b22;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: border-color 0.18s;
    }
    .wh-row:hover { border-color: rgba(255,255,255,0.25); }

    .wh-avatar {
      width: 40px; height: 40px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; overflow: hidden; padding: 0;
    }
    .wh-avatar img, .wh-avatar svg {
      width: 100%; height: 100%; object-fit: cover; border-radius: 11px;
    }
    .wh-avatar.vt { background: linear-gradient(135deg, #ff3d3d, #b40000); color: #fff; font-weight: 900; font-size: 0.9rem; letter-spacing: -0.5px; }
    .wh-badge-metric { font-size: 0.66rem; font-weight: 800; color: #79b8ff; background: #58a6ff14; border: 1px solid #58a6ff44; border-radius: 999px; padding: 2px 8px; }
    .bs-vt-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; }
    .bs-vt-card { position:relative; overflow:hidden; background:#0d1117; border:1px solid #21262d; border-radius:14px; padding:14px 16px 12px; transition:transform .18s, border-color .18s; }
    .bs-vt-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--fc,#58a6ff); }
    .bs-vt-card:hover { transform:translateY(-2px); border-color:#30363d; }
    .bs-vt-card-top { display:flex; align-items:center; gap:8px; }
    .bs-vt-ico { width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
    .bs-vt-card-l { font-size:0.62rem; font-weight:800; color:#8b949e; text-transform:uppercase; letter-spacing:.07em; }
    .bs-vt-card-v { font-size:1.55rem; font-weight:800; margin-top:8px; color:#e6edf3; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
    .bs-vt-card-s { font-size:0.68rem; color:#8b949e; font-weight:600; margin-top:2px; line-height:1.4; }
    .bs-vt-card-s b { color:#c9d1d9; }
    .bs-vt-card-f { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:10px; min-height:22px; }
    .bs-vt-spark { display:flex; align-items:flex-end; gap:3px; height:22px; }
    .bs-vt-spark i { display:block; width:7px; border-radius:2px 2px 0 0; }
    .bs-vt-delta { font-size:0.64rem; font-weight:800; white-space:nowrap; }
    .bs-vt-delta.sobe { color:#3fb950; } .bs-vt-delta.desce { color:#f85149; } .bs-vt-delta.neutro { color:#6e7681; }
    .bs-vt-sec { margin-top:18px; }
    .bs-vt-sec-t { font-size:0.7rem; font-weight:800; color:#c9d1d9; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
    .bs-vt-sec-t span { color:#6e7681; font-weight:600; text-transform:none; letter-spacing:0; margin-left:6px; }
    .bs-vt-grid { display:grid; grid-template-columns:2fr 1fr; gap:18px; }
    @media (max-width:900px){ .bs-vt-grid { grid-template-columns:1fr; } }
    .bs-vt-fun { display:flex; flex-direction:column; gap:6px; }
    .bs-vt-fun-row { display:grid; grid-template-columns:150px 1fr 70px 120px; gap:10px; align-items:center; font-size:0.74rem; }
    @media (max-width:700px){ .bs-vt-fun-row { grid-template-columns:110px 1fr 60px 90px; } }
    .bs-vt-fun-l { color:#c9d1d9; font-weight:700; }
    .bs-vt-fun-bar { height:14px; background:#161b22; border-radius:7px; overflow:hidden; }
    .bs-vt-fun-bar i { display:block; height:100%; border-radius:7px; transition:width .5s cubic-bezier(.2,.7,.2,1); }
    .bs-vt-fun-n { font-weight:800; color:#e6edf3; text-align:right; font-variant-numeric:tabular-nums; }
    .bs-vt-fun-p { color:#8b949e; font-weight:700; } .bs-vt-fun-p small { color:#6e7681; font-weight:600; }
    .bs-vt-chart { position:relative; background:#0d1117; border:1px solid #21262d; border-radius:12px; padding:8px 6px 2px; cursor:crosshair; }
    .bs-vt-chart svg { width:100%; height:180px; display:block; }
    .bs-vt-grid-l { stroke:#21262d; stroke-width:1; }
    .bs-vt-ax { fill:#6e7681; font-size:10px; font-weight:600; }
    .bs-vt-line { fill:none; stroke:#58a6ff; stroke-width:2.2; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
    .bs-vt-dot { fill:#0d1117; stroke:#58a6ff; stroke-width:2; vector-effect:non-scaling-stroke; }
    .bs-vt-lbl { fill:#c9d1d9; font-size:10px; font-weight:800; } .bs-vt-lbl.pitch { fill:#f778ba; }
    .bs-vt-pitch { stroke:#f778ba; stroke-width:1.5; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
    .bs-vt-cursor { stroke:#e6edf3; stroke-width:1; stroke-dasharray:2 2; vector-effect:non-scaling-stroke; opacity:.6; }
    .bs-vt-tip { position:absolute; top:10px; pointer-events:none; background:#161b22; border:1px solid #30363d; border-radius:8px; padding:5px 9px; font-size:0.7rem; color:#c9d1d9; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.35); }
    .bs-vt-tip b { color:#58a6ff; }
    .bs-vt-meter { position:relative; height:16px; min-width:70px; background:#161b22; border-radius:4px; overflow:hidden; }
    .bs-vt-meter i { position:absolute; left:0; top:0; bottom:0; opacity:.35; border-radius:4px; }
    .bs-vt-meter span { position:relative; display:block; padding:0 6px; font-size:0.7rem; line-height:16px; font-weight:800; color:#e6edf3; font-variant-numeric:tabular-nums; }
    .bs-vt-stack { display:flex; height:12px; border-radius:6px; overflow:hidden; background:#161b22; gap:2px; }
    .bs-vt-stack i { display:block; height:100%; }
    .bs-vt-legend { display:flex; flex-direction:column; gap:5px; margin-top:10px; font-size:0.72rem; color:#8b949e; }
    .bs-vt-legend i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:middle; }
    .bs-vt-legend b { color:#e6edf3; } .bs-vt-legend small { color:#6e7681; }
    .bs-vt-tab tbody tr:hover td { background:#161b22; } .bs-vt-tab td small { color:#6e7681; }
    @media (prefers-reduced-motion:reduce){ .bs-vt-card, .bs-vt-fun-bar i { transition:none; } }
    body.light .bs-vt-card, body.light .bs-vt-chart { background:#fff; border-color:#d0d7de; }
    body.light .bs-vt-card-v, body.light .bs-vt-fun-n, body.light .bs-vt-legend b, body.light .bs-vt-meter span { color:#1f2328; }
    body.light .bs-vt-fun-bar, body.light .bs-vt-meter, body.light .bs-vt-stack { background:#eaeef2; }
    body.light .bs-vt-grid-l { stroke:#eaeef2; } body.light .bs-vt-lbl { fill:#1f2328; } body.light .bs-vt-dot { fill:#fff; }
    body.light .bs-vt-tip { background:#fff; border-color:#d0d7de; color:#1f2328; } body.light .bs-vt-tab tbody tr:hover td { background:#f6f8fa; }
    .bs-chev { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #30363d; background: #0d1117; color: #8b949e; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
    .bs-chev:hover { color: #e6edf3; border-color: #8b949e; }
    .bs-chev svg { transition: transform .18s; }
    .bs-chev.fechado svg { transform: rotate(-90deg); }
    body.light .bs-chev { background: #fff; border-color: #d0d7de; color: #57606a; }
    .bs-vt-tab { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
    .bs-vt-tab th { text-align: left; color: #8b949e; font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; padding: 6px 8px; border-bottom: 1px solid #21262d; }
    .bs-vt-tab td { padding: 6px 8px; border-bottom: 1px solid #161b22; white-space: nowrap; }
    .bs-vt-tab td:first-child { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
    .bs-ia { border: 1px solid #a371f733; background: #a371f70d; border-radius: 12px; padding: 14px 16px; margin-top: 12px; font-size: 0.78rem; line-height: 1.55; }
    .bs-ia h4 { margin: 10px 0 4px; font-size: 0.72rem; color: #8b949e; text-transform: uppercase; letter-spacing: 0.4px; }
    .bs-ia ul { margin: 0; padding-left: 18px; }
    .bs-ia li { margin: 3px 0; }
    .bs-ia .pri-alta { color: #f85149; font-weight: 800; } .bs-ia .pri-media { color: #e6b450; font-weight: 800; } .bs-ia .pri-baixa { color: #8b949e; font-weight: 800; }
    .wh-avatar.sb {
      background: linear-gradient(135deg, #0a1628, #0d2040);
      border: 1px solid rgba(30,180,255,0.25);
    }
    .wh-avatar.dt {
      background: linear-gradient(135deg, #0a1628, #0d2040);
      border: 1px solid rgba(30,180,255,0.25);
    }
    .wh-avatar.mg {
      background: #ffffff;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 0;
    }
    .wh-avatar.mg img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }
    .wh-avatar.ht {
      background: #ffffff;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 4px;
    }
    .wh-avatar.ht img { width: 100%; height: 100%; object-fit: contain; }
    .wh-avatar.pp {
      background: #ffffff;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 0;
    }
    .wh-avatar.pp img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }
    .wh-avatar.mp {
      background: #050700;
      border: 1px solid rgba(162,208,53,0.35);
      padding: 4px;
    }
    .wh-avatar.mp img { width: 100%; height: 100%; object-fit: contain; }
    .wh-avatar.dg {
      background: #ffffff;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 4px;
    }
    .wh-avatar.dg img { width: 100%; height: 100%; object-fit: contain; }
    .wh-avatar.bgs {
      background: #17181c;
      border: 1px solid rgba(255,255,255,0.14);
      padding: 6px;
    }
    /* logo oficial é glifo preto → inverte pra branco no card escuro */
    .wh-avatar.bgs img { width: 100%; height: 100%; object-fit: contain; filter: invert(1); }
    .wh-avatar.bk {
      background: #0f0f0f;
      border: 1px solid rgba(255,255,255,0.14);
      padding: 0;
    }
    .wh-avatar.bk img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }
    .wh-avatar.co { background: #0b0f1a; border: 1px solid rgba(124,92,255,0.35); padding: 0; }
    .wh-avatar.co img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }
    .wh-avatar.xp { background: #0b0f1a; border: 1px solid rgba(255,255,255,0.14); padding: 6px; }
    .wh-avatar.xp img { width: 100%; height: 100%; object-fit: contain; }
    .wh-avatar.sph { background: #0b0f1a; border: 1px solid rgba(167,139,250,0.35); padding: 5px; }
    .wh-avatar.sph img { width: 100%; height: 100%; object-fit: contain; }
    .wh-avatar.exp { background: #0b0f1a; border: 1px solid rgba(251,146,60,0.35); padding: 5px; }
    .wh-avatar.exp img { width: 100%; height: 100%; object-fit: contain; }

    .wh-info { flex: 1; min-width: 0; }
    .wh-info-top {
      display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    }
    .wh-plat-name { font-size: 0.88rem; font-weight: 700; color: #e2e8f0; }
    .wh-badge-active {
      font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 99px;
      background: rgba(63,185,80,0.12); border: 1px solid rgba(63,185,80,0.25); color: #3fb950;
    }

    .wh-url-inline {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px; padding: 7px 12px;
    }
    .wh-url-val {
      flex: 1; font-family: 'Courier New', monospace; font-size: 0.7rem;
      color: #8b949e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .btn-copy {
      padding: 5px 14px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 7px; color: #f0f0f5;
      font-size: 0.72rem; font-weight: 600;
      cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      white-space: nowrap; flex-shrink: 0;
    }
    .btn-copy:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.4); }
    .btn-copy.copied { background: rgba(63,185,80,0.12); border-color: rgba(63,185,80,0.3); color: #3fb950; }

    /* Steps abaixo dos cards */
    .wh-steps-wrap {
      margin-top: 24px;
      background: #161b22;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      padding: 20px 22px;
    }
    .wh-steps-title {
      font-size: 0.62rem; font-weight: 700; color: #8b949e;
      text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 14px;
    }
    .wh-steps { display: flex; flex-direction: column; gap: 8px; }
    .wh-step {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 10px;
    }
    .wh-step-num {
      width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
      background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25);
      color: #f0f0f5; font-size: 0.68rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
    }
    .wh-step-text { font-size: 0.78rem; color: #64748b; line-height: 1.5; }
    .wh-highlight { color: #e2e8f0; font-weight: 700; }

    /* ══════════════════════════════════════════
       LOGIN OVERLAY
    ══════════════════════════════════════════ */
    #loginOverlay {
      position: fixed;
      inset: 0;
      background: #07090f;
      z-index: 9999;
      overflow: auto;
    }
    #loginOverlay.hidden { display: none; }

    .auth-split {
      display: grid;
      grid-template-columns: minmax(400px, 480px) 1fr;
      min-height: 100vh;
      width: 100%;
    }

    /* ── LEFT: Form panel ─────────────────────────── */
    .auth-left {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 48px;
      background: #07090f;
      position: relative;
    }
    .auth-form-wrap {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
    }
    .auth-logo-row {
      position: absolute;
      top: 28px;
      left: 48px;
      right: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      animation: fadeUp 0.6s ease-out both;
    }
    .auth-logo-row .brand-wrap {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .login-lang-switch {
      display: inline-flex;
      gap: 2px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 3px;
      border-radius: 8px;
    }
    .login-lang-btn {
      background: none;
      border: none;
      color: #9ca3af;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 5px 9px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      line-height: 1;
    }
    .login-lang-btn:hover { color: #f0f0f5; }
    .login-lang-btn.active {
      background: #58a6ff;
      color: #07090f;
    }
    #loginMainStep .auth-title    { animation: fadeUp 0.6s ease-out 0.1s both; }
    #loginMainStep .auth-subtitle { animation: fadeUp 0.6s ease-out 0.18s both; }
    #loginMainStep .login-field:nth-of-type(1) { animation: fadeUp 0.6s ease-out 0.26s both; }
    #loginMainStep .login-field:nth-of-type(2) { animation: fadeUp 0.6s ease-out 0.32s both; }
    #loginMainStep .btn-login     { animation: fadeUp 0.6s ease-out 0.38s both; }
    #loginMainStep .auth-divider  { animation: fadeUp 0.6s ease-out 0.45s both; }
    .auth-footer                  { animation: fadeUp 0.6s ease-out 0.6s both; }
    .auth-logo {
      display: inline-flex;
      align-items: center;
    }
    .auth-tracker-badge {
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      padding: 4px 9px;
      border-radius: 6px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      color: #d1d5db;
      text-transform: uppercase;
    }
    .auth-title {
      font-size: 1.65rem;
      font-weight: 700;
      color: #f0f0f5;
      letter-spacing: -0.01em;
      margin: 0 0 8px;
      line-height: 1.2;
    }
    .auth-subtitle {
      color: #9ca3af;
      font-size: 0.86rem;
      margin: 0 0 28px;
      line-height: 1.5;
    }

    .login-field { margin-bottom: 14px; }
    .login-label {
      display: block;
      font-size: 0.78rem;
      color: #d1d5db;
      margin-bottom: 7px;
      font-weight: 500;
    }
    .login-input {
      width: 100%;
      padding: 13px 14px;
      background: #12141e;
      border: 1px solid #1f2330;
      border-radius: 10px;
      color: #f0f0f5;
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.18s, background 0.18s;
      font-family: inherit;
    }
    .login-input:focus { border-color: #4b5563; background: #161824; }
    .login-input::placeholder { color: #6b7280; }

    /* Wrapper pra senha com toggle de visibilidade */
    .login-pwd-wrap { position: relative; }
    .login-pwd-wrap .login-input { padding-right: 44px; }
    .login-pwd-eye {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      background: none;
      border: none;
      border-radius: 8px;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.15s, background 0.15s;
      padding: 0;
    }
    .login-pwd-eye:hover { color: #f0f0f5; background: rgba(255,255,255,0.04); }
    .login-pwd-eye svg { width: 18px; height: 18px; }
    .login-pwd-eye .icon-off { display: none; }
    .login-pwd-eye.show .icon-on { display: none; }
    .login-pwd-eye.show .icon-off { display: block; }

    .btn-login {
      width: 100%;
      padding: 13px;
      margin-top: 10px;
      background: #58a6ff;
      border: none;
      border-radius: 10px;
      color: #07090f;
      font-size: 0.92rem;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.12s, background 0.18s, box-shadow 0.18s;
      box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 14px rgba(0,0,0,0.4);
      letter-spacing: 0.01em;
    }
    .btn-login:hover { background: #ffffff; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 20px rgba(0,0,0,0.5); }
    .btn-login:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 22px 0;
      color: #6b7280;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .auth-divider::before, .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,0.06);
    }

    .auth-google-btn {
      width: 100%;
      padding: 12px;
      background: #12141e;
      border: 1px solid #1f2330;
      border-radius: 10px;
      color: #f0f0f5;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.18s, background 0.18s, transform 0.12s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-family: inherit;
    }
    .auth-google-btn:hover { background: #161824; border-color: #2a2e3d; }
    .auth-google-btn:active { transform: scale(0.99); }
    .auth-google-btn:disabled { opacity: 0.6; cursor: wait; }
    .auth-google-btn svg { flex-shrink: 0; }
    #loginMainStep .auth-google-btn { animation: fadeUp 0.6s ease-out 0.5s both; }

    .login-error {
      margin-top: 14px;
      padding: 10px 12px;
      background: rgba(239,68,68,0.08);
      border: 1px solid rgba(239,68,68,0.25);
      border-radius: 8px;
      color: #f87171;
      font-size: 0.78rem;
      text-align: center;
      display: none;
    }
    .login-error.show { display: block; }

    .auth-footer {
      margin-top: 26px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .auth-helplink {
      text-align: center;
      color: #9ca3af;
      font-size: 0.85rem;
    }
    .auth-helplink a { color: #f0f0f5; text-decoration: none; font-weight: 600; }
    .auth-helplink a:hover { text-decoration: underline; }
    .auth-terms {
      text-align: center;
      color: #6b7280;
      font-size: 0.72rem;
      line-height: 1.5;
    }
    .auth-terms a { color: #9ca3af; text-decoration: none; }
    .auth-terms a:hover { color: #f0f0f5; }

    .auth-forgot {
      float: right;
      font-size: 0.74rem;
      color: #9ca3af;
      text-decoration: none;
      font-weight: 500;
    }
    .auth-forgot:hover { color: #f0f0f5; }

    /* ── RIGHT: Hero panel (preto monocromático) ─────────── */
    .auth-right {
      --mx: 50%;
      --my: 50%;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #0a0c12 0%, #050608 60%, #000 100%);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 230px;
      gap: 40px;
      align-items: center;
      padding: 60px 56px;
    }
    /* Grid pattern com pulse sutil */
    .auth-right::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 80%);
      pointer-events: none;
      animation: gridPulse 6s ease-in-out infinite;
      z-index: 0;
    }
    /* Spotlight que segue o mouse (atualizado via JS através de --mx/--my) */
    .auth-right::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle 380px at var(--mx) var(--my), rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 30%, transparent 60%);
      pointer-events: none;
      transition: background 0.18s ease;
      z-index: 0;
    }
    /* Blobs/orbs flutuantes no background */
    .auth-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.55;
      pointer-events: none;
      z-index: 0;
      will-change: transform;
    }
    .auth-blob-1 {
      width: 460px; height: 460px;
      top: -120px; left: -100px;
      background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
      animation: blobDrift1 18s ease-in-out infinite;
    }
    .auth-blob-2 {
      width: 520px; height: 520px;
      bottom: -160px; right: -80px;
      background: radial-gradient(circle, rgba(88,166,255,0.07) 0%, transparent 70%);
      animation: blobDrift2 22s ease-in-out infinite;
    }
    .auth-blob-3 {
      width: 320px; height: 320px;
      top: 45%; left: 30%;
      background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
      animation: blobDrift3 26s ease-in-out infinite;
    }

    @keyframes gridPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    @keyframes blobDrift1 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%  { transform: translate(60px, 40px) scale(1.1); }
      66%  { transform: translate(-30px, 80px) scale(0.95); }
    }
    @keyframes blobDrift2 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-80px, -50px) scale(1.15); }
    }
    @keyframes blobDrift3 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(50px, -40px) scale(1.05); }
      66% { transform: translate(-40px, 30px) scale(0.92); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes floatY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @keyframes shimmer {
      0%, 100% { opacity: 0.85; }
      50% { opacity: 1; }
    }
    .auth-hero {
      position: relative;
      width: 100%;
      max-width: 560px;
      z-index: 1;
    }
    .auth-hero-title  { animation: fadeUp 0.7s ease-out 0.1s both; }
    .auth-hero-sub    { animation: fadeUp 0.7s ease-out 0.25s both; }
    .auth-hero-stats  { animation: fadeUp 0.7s ease-out 0.4s both; }

    .auth-cards-col {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 14px;
      z-index: 2;
      /* Parallax: cards se movem levemente baseado em --mdx/--mdy (atualizadas via JS) */
      --mdx: 0px;
      --mdy: 0px;
      transform: translate3d(var(--mdx), var(--mdy), 0);
      transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .auth-hero-title {
      font-size: clamp(1.9rem, 3.2vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.08;
      margin: 0 0 22px;
      color: #f4f4f6;
    }
    .auth-hero-title span { color: #58a6ff; white-space: nowrap; }
    .auth-hero-sub {
      color: #9ca3af;
      font-size: 0.98rem;
      line-height: 1.6;
      margin: 0 0 40px;
      max-width: 480px;
    }
    .auth-hero-stats {
      display: flex;
      gap: 36px;
      flex-wrap: wrap;
    }
    .auth-hero-stat-val {
      font-size: 1.85rem;
      font-weight: 800;
      color: #f4f4f6;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .auth-hero-stat-lbl {
      font-size: 0.74rem;
      color: #6b7280;
      margin-top: 6px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 600;
    }

    /* Stat cards na coluna direita do right panel */
    .auth-card {
      background: rgba(15,18,26,0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 14px 16px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94), border-color 0.3s, box-shadow 0.3s;
      will-change: transform;
      animation: fadeUp 0.7s ease-out both, floatY 6s ease-in-out infinite;
    }
    .auth-card:nth-child(1) { animation-delay: 0.5s, 0s; }
    .auth-card:nth-child(2) { animation-delay: 0.65s, 1s; }
    .auth-card:nth-child(3) { animation-delay: 0.8s, 2s; }
    .auth-card:hover {
      transform: translateY(-4px) scale(1.02);
      border-color: rgba(88,166,255,0.30);
      box-shadow: 0 16px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(88,166,255,0.15);
    }
    .auth-card-val { transition: color 0.3s; }
    .auth-card:hover .auth-card-val { color: #58a6ff; }
    .auth-card-lbl {
      font-size: 0.68rem;
      color: #9ca3af;
      font-weight: 500;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .auth-card-val {
      font-size: 1.3rem;
      font-weight: 800;
      color: #f4f4f6;
      letter-spacing: -0.01em;
    }
    .auth-card-bars {
      display: flex;
      gap: 3px;
      align-items: flex-end;
      margin-top: 10px;
      height: 20px;
    }
    .auth-card-bars div {
      flex: 1;
      background: linear-gradient(180deg, #f4f4f6 0%, #6b7280 100%);
      border-radius: 2px;
      opacity: 0.85;
    }
    .auth-card-bars div:nth-child(1) { height: 30%; }
    .auth-card-bars div:nth-child(2) { height: 60%; }
    .auth-card-bars div:nth-child(3) { height: 45%; }
    .auth-card-bars div:nth-child(4) { height: 80%; }
    .auth-card-bars div:nth-child(5) { height: 100%; }

    /* Em telas <1200px, esconde a coluna de cards e o right vira só texto */
    @media (max-width: 1200px) {
      .auth-right { grid-template-columns: 1fr; padding: 60px 50px; }
      .auth-cards-col { display: none; }
    }

    /* Responsive: mobile esconde right panel */
    @media (max-width: 900px) {
      .auth-split { grid-template-columns: 1fr; }
      .auth-right { display: none; }
      .auth-left { padding: 64px 24px 40px; }
      .auth-logo-row { top: 24px; left: 24px; right: 24px; }
    }

    /* ══════════════════════════════════════════
       APP HEADER (user + logout)
    ══════════════════════════════════════════ */
    #appHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      padding: 10px 14px;
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 12px;
    }

    .header-user { display: flex; align-items: center; gap: 10px; }

    .header-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #58a6ff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    .header-name { font-size: 0.82rem; font-weight: 700; color: #e6edf3; }
    .header-role { font-size: 0.68rem; color: #8b949e; margin-top: 1px; }

    .btn-logout {
      background: transparent;
      border: 1px solid #30363d;
      border-radius: 7px;
      color: #8b949e;
      font-size: 0.72rem;
      padding: 5px 12px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }

    .btn-logout:hover { border-color: #e8445a44; color: #e8445a; }

    /* ── Soft paywall banner ─────────────────────────────────── */
    .inactive-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      /* 160px à direita = zona segura dos ícones do topo: ajuda (right 114 + 36),
         apps e sininho, mais 10px de folga. Era 110 (de antes do botão de ajuda)
         e o aviso cobria o "?" (29/10). */
      margin: 0 160px 18px 24px;
      padding: 12px 16px;
      background: linear-gradient(90deg, rgba(88,166,255,0.08) 0%, rgba(88,166,255,0.03) 100%);
      border: 1px solid rgba(88,166,255,0.25);
      border-radius: 12px;
    }
    .inactive-banner .ib-left {
      display: flex; align-items: center; gap: 14px;
      min-width: 0; flex: 1;
    }
    .inactive-banner .ib-icon {
      width: 36px; height: 36px;
      border-radius: 9px;
      background: rgba(88,166,255,0.12);
      border: 1px solid rgba(88,166,255,0.28);
      color: #58a6ff;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .inactive-banner .ib-icon svg { width: 17px; height: 17px; }
    .inactive-banner .ib-text { min-width: 0; }
    .inactive-banner .ib-title {
      color: #f0f0f5; font-weight: 700; font-size: 0.92rem;
      letter-spacing: -0.01em;
    }
    .inactive-banner .ib-sub {
      color: #9ca3af; font-size: 0.8rem; margin-top: 2px;
    }
    .inactive-banner .ib-cta {
      display: inline-flex; align-items: center; gap: 7px;
      background: #58a6ff; color: #07090f;
      border: none; border-radius: 9px;
      padding: 9px 16px;
      font-size: 0.84rem; font-weight: 700; font-family: inherit;
      cursor: pointer;
      transition: background 0.18s, transform 0.1s;
      flex-shrink: 0;
    }
    .inactive-banner .ib-cta:hover { background: #79b8ff; transform: translateY(-1px); }
    .inactive-banner .ib-cta svg { width: 13px; height: 13px; }
    @media (max-width: 600px) {
      .inactive-banner { flex-direction: column; align-items: stretch; }
      .inactive-banner .ib-cta { justify-content: center; }
    }

    /* Empty state pricing inline (Minha Assinatura quando sub inativa) */
    .empty-pricing-hero {
      text-align: center;
      padding: 32px 20px 22px;
    }
    .empty-pricing-eyebrow {
      display: inline-block;
      font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: #58a6ff;
      padding: 4px 11px;
      background: rgba(88,166,255,0.08);
      border: 1px solid rgba(88,166,255,0.25);
      border-radius: 999px;
      margin-bottom: 14px;
    }
    .empty-pricing-title {
      font-size: 1.8rem; font-weight: 700;
      color: #f0f0f5; letter-spacing: -0.025em;
      line-height: 1.2;
    }
    .empty-pricing-sub {
      color: #9ca3af; font-size: 0.95rem;
      margin-top: 8px; line-height: 1.55;
      max-width: 480px;
      margin-left: auto; margin-right: auto;
    }

    /* Body sub-inactive — futuro: cursor not-allowed em botões locked */
    body.sub-inactive [data-locked="true"] {
      opacity: 0.55;
      cursor: not-allowed !important;
      pointer-events: none;
    }

    /* ══════════════════════════════════════════
       NOTIFICATION BELL + PANEL — FIXED TOP-RIGHT
    ══════════════════════════════════════════ */
    .notif-wrap {
      /* absolute (não fixed): ancorado no topo da página, rola junto com o
         conteúdo — fixed ficava flutuando por cima dos itens ao rolar */
      position: absolute;
      top: 18px;
      right: 22px;
      z-index: 9500;
    }
    /* Esconde o sininho quando paywall overlay tá aberto ou login overlay */
    body.has-pricing-overlay #notifWrap,
    body.no-auth #notifWrap { display: none; }

    /* ═══════════════════════════════════════════════════════════════
       APP SWITCHER — ecossistema BeepMi (padrão Google/Vercel/Notion).
       Ícone grid 3×3 fixo top-right, ao lado do sininho. Clique abre
       popover com cards dos produtos.
    ═══════════════════════════════════════════════════════════════ */
    body.tpl-editing .bmt-help-btn, body.bm-ov-open .bmt-help-btn,
    body.tpl-editing .bmt-help-menu, body.bm-ov-open .bmt-help-menu,
    body.tpl-editing .app-switcher-wrap, body.bm-ov-open .app-switcher-wrap,
    body.tpl-editing .notif-wrap, body.bm-ov-open .notif-wrap { display: none !important; }
    /* dentro de uma página ou de um teste A/B do Filtro, os flutuantes ficam por cima do cabeçalho */
    body.bs-detalhe .bmt-help-btn, body.bs-detalhe .bmt-help-menu, body.bs-detalhe .app-switcher-wrap, body.bs-detalhe .notif-wrap { display: none !important; }
    .app-switcher-wrap {
      position: absolute; /* rola junto com a página, igual ao sininho */
      top: 18px;
      right: 68px; /* 22px (bell right) + 36 (bell width) + 10 gap */
      z-index: 9500;
    }
    body.has-pricing-overlay #appSwitcherWrap,
    body.no-auth #appSwitcherWrap { display: none; }
    .app-switcher-btn {
      position: relative;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      background: transparent;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #c9d1d9;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .app-switcher-btn:hover { border-color: #58a6ff; color: #58a6ff; }
    .app-switcher-btn.open { border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.06); }
    .app-switcher-btn svg { width: 17px; height: 17px; }

    .app-switcher-panel {
      position: absolute;
      top: calc(100% + 8px); right: 0;
      width: 320px;
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 12px;
      box-shadow: 0 24px 56px -12px rgba(0,0,0,0.7);
      overflow: hidden;
      opacity: 0; transform: translateY(-6px);
      transition: opacity 0.14s ease-out, transform 0.14s ease-out;
      pointer-events: none;
    }
    .app-switcher-panel.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .app-switcher-header {
      padding: 14px 16px 10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .app-switcher-title {
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
      color: #f0f0f5; text-transform: uppercase;
    }
    .app-switcher-sub {
      font-size: 0.72rem; color: #8b949e; margin-top: 3px;
    }
    .app-switcher-list {
      padding: 8px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .app-switcher-card {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      color: inherit; text-decoration: none;
      transition: background 0.12s;
      position: relative;
    }
    .app-switcher-card:hover { background: rgba(255,255,255,0.04); }
    .app-switcher-card.current { background: rgba(88,166,255,0.08); }
    .app-switcher-card.current:hover { background: rgba(88,166,255,0.12); }
    .app-switcher-icon {
      position: relative;
      width: 44px; height: 44px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35);
      overflow: hidden;
    }
    .app-switcher-icon svg {
      width: 62%; height: auto;
      display: block;
    }
    .app-switcher-icon.tracker {
      background: #000000;
    }
    .app-switcher-icon.main {
      background: #0f172a;
    }
    .app-switcher-info { flex: 1; min-width: 0; }
    .app-switcher-name {
      font-size: 0.88rem; font-weight: 700; color: #f0f0f5;
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .app-switcher-desc {
      font-size: 0.72rem; color: #8b949e; margin-top: 2px;
      line-height: 1.3;
    }
    .app-switcher-current-pill {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
      color: #58a6ff;
      background: rgba(88,166,255,0.12);
      border: 1px solid rgba(88,166,255,0.28);
      padding: 2px 6px;
      border-radius: 999px;
      text-transform: uppercase;
    }
    .app-switcher-external {
      color: #6b7280;
      width: 12px; height: 12px;
      flex-shrink: 0;
    }
    .app-switcher-footer {
      padding: 10px 16px;
      border-top: 1px solid rgba(255,255,255,0.06);
      font-size: 0.7rem; color: #6b7280;
      text-align: center;
    }
    /* Light mode */
    body.light .app-switcher-btn {
      border-color: #e5e7eb;
      color: #475569;
    }
    body.light .app-switcher-btn:hover,
    body.light .app-switcher-btn.open {
      border-color: #2563eb;
      color: #2563eb;
      background: rgba(37,99,235,0.06);
    }
    body.light .app-switcher-panel {
      background: #ffffff;
      border-color: #e5e7eb;
      box-shadow: 0 20px 50px -10px rgba(15,23,42,0.15);
    }
    body.light .app-switcher-header { border-bottom-color: #f1f5f9; }
    body.light .app-switcher-title { color: #0f172a; }
    body.light .app-switcher-sub { color: #64748b; }
    body.light .app-switcher-card:hover { background: #f8fafc; }
    body.light .app-switcher-card.current { background: rgba(37,99,235,0.08); }
    body.light .app-switcher-card.current:hover { background: rgba(37,99,235,0.12); }
    body.light .app-switcher-name { color: #0f172a; }
    body.light .app-switcher-desc { color: #64748b; }
    body.light .app-switcher-current-pill {
      color: #1d4ed8;
      background: rgba(37,99,235,0.10);
      border-color: rgba(37,99,235,0.28);
    }
    /* Tracker preto, BeepMi azul — mantém as cores em ambos os modos */
    body.light .app-switcher-icon.tracker {
      background: #000000;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }
    body.light .app-switcher-icon.main {
      background: #0f172a;
      box-shadow: 0 2px 8px rgba(15,23,42,0.18);
    }
    body.light .app-switcher-footer {
      border-top-color: #f1f5f9;
      color: #94a3b8;
    }
    .notif-bell {
      position: relative;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      background: transparent;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #c9d1d9;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .notif-bell:hover { border-color: #58a6ff; color: #58a6ff; }
    .notif-bell.open { border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.06); }
    .notif-bell svg { width: 17px; height: 17px; }
    .notif-dot {
      position: absolute; top: 7px; right: 7px;
      width: 8px; height: 8px; border-radius: 50%;
      background: #f85149;
      box-shadow: 0 0 0 2px #0d1117;
    }
    .notif-count {
      position: absolute; top: 1px; right: -3px;
      min-width: 18px; height: 18px;
      padding: 0 5px;
      border-radius: 9px;
      background: #f85149; color: #fff;
      font-size: 0.62rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 2px #0d1117;
      letter-spacing: 0;
    }

    .notif-panel {
      position: absolute;
      top: calc(100% + 8px); right: 0;
      width: 380px; max-width: calc(100vw - 32px);
      max-height: 520px;
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      box-shadow: 0 24px 56px -12px rgba(0,0,0,0.7);
      z-index: 9999;
      display: flex; flex-direction: column;
      overflow: hidden;
      animation: notifFadeIn 0.16s ease-out;
    }
    @keyframes notifFadeIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .notif-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .notif-mark-all {
      background: none; border: none;
      color: #58a6ff; cursor: pointer; padding: 0;
      font-size: 0.74rem; font-weight: 600; font-family: inherit;
    }
    .notif-mark-all:hover { color: #79b8ff; }
    .notif-mark-all:disabled { color: #4a5258; cursor: default; }
    .notif-panel-body {
      flex: 1; overflow-y: auto;
      scrollbar-width: thin;
    }
    .notif-panel-body::-webkit-scrollbar { width: 6px; }
    .notif-panel-body::-webkit-scrollbar-thumb { background: #21262d; border-radius: 3px; }
    .notif-panel-footer {
      padding: 8px 16px;
      border-top: 1px solid rgba(255,255,255,0.06);
      text-align: center;
    }
    .notif-clear {
      background: none; border: none;
      color: #6b7280; cursor: pointer; padding: 4px 10px;
      font-size: 0.72rem; font-weight: 500; font-family: inherit;
    }
    .notif-clear:hover { color: #f85149; }

    .notif-item {
      display: flex; gap: 11px;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.03);
      cursor: pointer;
      transition: background 0.12s;
      position: relative;
    }
    .notif-item:hover { background: rgba(255,255,255,0.02); }
    .notif-item.unread { background: rgba(88,166,255,0.04); }
    .notif-item.unread::before {
      content: ''; position: absolute;
      left: 6px; top: 18px;
      width: 6px; height: 6px; border-radius: 50%;
      background: #58a6ff;
    }
    .notif-item-icon {
      width: 32px; height: 32px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-size: 1rem;
    }
    .notif-item-icon.t-payment  { background: rgba(63,185,80,0.1);  color: #3fb950; }
    .notif-item-icon.t-overdue  { background: rgba(248,81,73,0.1);  color: #f85149; }
    .notif-item-icon.t-overage  { background: rgba(255,159,0,0.1);  color: #ff9f00; }
    .notif-item-icon.t-addon    { background: rgba(88,166,255,0.1); color: #58a6ff; }
    .notif-item-icon.t-plan     { background: rgba(187,128,255,0.1); color: #bb80ff; }
    .notif-item-icon.t-security { background: rgba(255,159,0,0.1);  color: #ff9f00; }
    .notif-item-icon.t-system   { background: rgba(255,255,255,0.06); color: #c9d1d9; }
    .notif-item-icon svg { width: 16px; height: 16px; }
    .notif-item-body { flex: 1; min-width: 0; }
    .notif-item-title {
      color: #f0f0f5; font-weight: 700;
      font-size: 0.84rem; line-height: 1.35;
      margin: 0 0 3px;
    }
    .notif-item-msg {
      color: #9ca3af; font-size: 0.78rem;
      line-height: 1.4;
      margin: 0;
    }
    .notif-item-time {
      color: #6b7280; font-size: 0.7rem;
      margin-top: 5px;
    }

    .notif-empty {
      padding: 48px 24px;
      text-align: center;
      color: #6b7280;
    }
    .notif-empty svg { width: 36px; height: 36px; opacity: 0.4; margin-bottom: 10px; }
    .notif-empty-title { color: #c9d1d9; font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
    .notif-empty-sub   { font-size: 0.78rem; }

    body.light .notif-bell { border-color: #e2e8f0; color: #475569; }
    body.light .notif-bell:hover { border-color: #58a6ff; color: #58a6ff; }
    body.light .notif-panel { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 16px 48px -8px rgba(0,0,0,0.15); }
    body.light .notif-panel-header { border-color: #e2e8f0; }
    body.light .notif-panel-header div { color: #1e293b !important; }
    body.light .notif-item { border-color: #f1f5f9; }
    body.light .notif-item:hover { background: #f8fafc; }
    body.light .notif-item.unread { background: #eef6ff; }
    body.light .notif-item-title { color: #1e293b; }
    body.light .notif-item-msg { color: #64748b; }
    body.light .notif-empty-title { color: #1e293b; }

    @media (max-width: 600px) {
      .notif-panel { width: calc(100vw - 16px); right: -8px; }
    }

    /* ══════════════════════════════════════════
       ADMIN PANEL
    ══════════════════════════════════════════ */
    /* ══ ADMIN PANEL Professional Redesign ══════════════════ */
    .admin-header { margin-bottom: 28px; }
    .admin-header-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding-right: 160px; /* zona dos ícones do topo: "sincronizando" ficava por baixo do "?" (29/10) */
    }
    @media (max-width: 900px) { .admin-header-top { padding-right: 0; } }
    /* Relatorios: texto de abertura passava por baixo dos icones do topo em 1024px (29/10) */
    .rel-head { padding-right: 160px; }
    @media (max-width: 900px) { .rel-head { padding-right: 0; } }
    .admin-header h2 {
      font-size: 1.4rem;
      font-weight: 800;
      color: #e6edf3;
      margin-bottom: 4px;
      letter-spacing: -0.03em;
    }
    .admin-header p {
      font-size: 0.82rem;
      color: #8b949e;
      margin: 0;
    }
    .admin-stats {
      display: flex;
      gap: 12px;
      flex-shrink: 0;
    }
    .admin-stat-box {
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 10px;
      padding: 10px 16px;
      text-align: center;
      min-width: 80px;
    }
    .admin-stat-value {
      font-size: 1.3rem;
      font-weight: 800;
      color: #f0f0f5;
      line-height: 1.2;
    }
    .admin-stat-label {
      font-size: 0.62rem;
      font-weight: 600;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: 2px;
    }

    .admin-section { margin-bottom: 28px; }

    .admin-section-title {
      font-size: 0.65rem;
      font-weight: 700;
      color: #8b949e;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .admin-section-title svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      opacity: 0.6;
    }

    .section-title {
      font-size: 0.62rem;
      font-weight: 700;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin: 20px 0 10px;
    }

    .user-list { display: flex; flex-direction: column; gap: 12px; }

    .user-card {
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 14px;
      padding: 20px;
      transition: color 0.12s, border-color 0.12s, background-color 0.12s, opacity 0.12s;
      position: relative;
      overflow: hidden;
    }
    .user-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #f0f0f5, #388bfd);
      opacity: 0;
      transition: opacity 0.25s;
    }
    .user-card:hover {
      border-color: rgba(255,255,255,0.3);
      box-shadow: 0 4px 24px rgba(255,255,255,0.06);
      transform: translateY(-1px);
    }
    .user-card:hover::before { opacity: 1; }

    .user-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .user-card-identity {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .user-card-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.82rem;
      font-weight: 800;
      color: #fff;
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .user-card-avatar.avatar-admin {
      background: linear-gradient(135deg, #e8445a, #f97316);
    }
    .user-card-avatar.avatar-user {
      background: linear-gradient(135deg, #f0f0f5, #388bfd);
    }
    .user-card-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .user-card-name-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .user-card-name {
      font-size: 0.92rem;
      font-weight: 700;
      color: #e6edf3;
    }
    .user-card-role {
      font-size: 0.6rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .user-card-role.admin {
      background: linear-gradient(135deg, #e8445a22, #f9731622);
      color: #f97316;
      border: 1px solid #f9731630;
    }
    .user-card-role.user {
      background: #58a6ff12;
      color: #f0f0f5;
      border: 1px solid #58a6ff25;
    }
    .user-card-meta {
      font-size: 0.7rem;
      color: #6e7681;
    }

    .user-card-senha {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      padding: 8px 12px;
      background: #0d1117;
      border: 1px solid #21262d;
      border-radius: 8px;
    }
    .user-card-senha-label {
      font-size: 0.68rem;
      color: #6e7681;
      font-weight: 600;
    }
    .user-card-senha-value {
      font-size: 0.75rem;
      color: #e6edf3;
      font-family: 'SF Mono', 'Fira Code', monospace;
      letter-spacing: 0.5px;
    }
    .user-card-senha-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.72rem;
      color: #f0f0f5;
      padding: 3px 6px;
      border-radius: 4px;
      transition: background 0.15s;
    }
    .user-card-senha-btn:hover {
      background: #58a6ff15;
    }

    .user-card-actions { display: flex; align-items: center; gap: 6px; }

    .btn-del-user {
      background: transparent;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #8b949e;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 5px 12px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .btn-del-user:hover {
      border-color: #e8445a55;
      color: #e8445a;
      background: #e8445a10;
      box-shadow: 0 0 12px rgba(232,68,90,0.08);
    }

    .user-card-perms-title {
      font-size: 0.6rem;
      font-weight: 700;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }

    .perm-grid { display: flex; flex-wrap: wrap; gap: 8px; }

    .perm-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #0d1117;
      border: 1px solid #30363d;
      border-radius: 8px;
      padding: 7px 12px;
      cursor: pointer;
      transition: color 0.12s, border-color 0.12s, background-color 0.12s, opacity 0.12s;
      user-select: none;
    }
    .perm-toggle:hover {
      border-color: #58a6ff40;
      transform: translateY(-1px);
    }

    .perm-toggle input { display: none; }

    .perm-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #30363d;
      flex-shrink: 0;
      transition: color 0.12s, border-color 0.12s, background-color 0.12s, opacity 0.12s;
    }

    .perm-toggle-label {
      font-size: 0.72rem;
      color: #8b949e;
      font-weight: 600;
      transition: color 0.22s;
    }

    .perm-toggle.active {
      border-color: #58a6ff40;
      background: rgba(255,255,255,0.06);
      box-shadow: 0 0 8px rgba(255,255,255,0.08);
    }
    .perm-toggle.active .perm-dot {
      background: #58a6ff;
      box-shadow: 0 0 6px rgba(255,255,255,0.4);
    }
    .perm-toggle.active .perm-toggle-label { color: #f0f0f5; }

    .perm-toggle.admin-perm {
      border-color: rgba(249,115,22,0.2);
      background: rgba(249,115,22,0.04);
      cursor: default;
      opacity: 0.85;
    }
    .perm-toggle.admin-perm .perm-dot {
      background: #f97316;
      box-shadow: 0 0 4px rgba(249,115,22,0.3);
    }
    .perm-toggle.admin-perm .perm-toggle-label { color: rgba(249,115,22,0.8); }

    /* Add user form */
    .admin-add-card {
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 14px;
      padding: 24px;
      position: relative;
      overflow: hidden;
    }
    .admin-add-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #f0f0f5, #a371f7, #f97316);
    }
    .admin-add-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: #e6edf3;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .admin-add-title svg {
      width: 16px;
      height: 16px;
      fill: #f0f0f5;
    }
    .admin-add-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 16px;
    }
    .admin-add-grid .form-field { margin-bottom: 0; }

    .admin-btn-create {
      width: 100%;
      padding: 11px 20px;
      background: linear-gradient(135deg, #f0f0f5, #388bfd);
      border: none;
      border-radius: 10px;
      color: #fff;
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      box-shadow: 0 2px 12px rgba(255,255,255,0.15);
    }
    .admin-btn-create:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 20px rgba(255,255,255,0.25);
    }
    .admin-btn-create:active {
      transform: translateY(0);
    }
    .admin-btn-create:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .add-user-form {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
    }

    .admin-loading {
      text-align: center;
      color: #6e7681;
      font-size: 0.82rem;
      padding: 40px 0;
    }

    /* Light mode overrides for admin */
    body.light .admin-header h2 { color: #1e293b; }
    body.light .admin-header p { color: #64748b; }
    body.light .admin-stat-box { background: #fff; border-color: #e2e8f0; }
    body.light .admin-stat-value { color: #2563eb; }
    body.light .admin-stat-label { color: #64748b; }
    body.light .user-card { background: #fff; border-color: #e2e8f0; }
    body.light .user-card:hover { border-color: rgba(37,99,235,0.3); box-shadow: 0 4px 24px rgba(37,99,235,0.06); }
    body.light .user-card::before { background: linear-gradient(90deg, #2563eb, #3b82f6); }
    body.light .user-card-name { color: #1e293b; }
    body.light .user-card-meta { color: #64748b; }
    body.light .user-card-senha { background: #f8fafc; border-color: #e2e8f0; }
    body.light .user-card-senha-value { color: #1e293b; }
    body.light .user-card-senha-label { color: #64748b; }
    body.light .user-card-perms-title { color: #64748b; }
    body.light .perm-toggle { background: #f8fafc; border-color: #e2e8f0; }
    body.light .perm-toggle-label { color: #64748b; }
    body.light .perm-toggle.active { background: rgba(37,99,235,0.05); border-color: rgba(37,99,235,0.3); }
    body.light .perm-toggle.active .perm-toggle-label { color: #2563eb; }
    body.light .perm-toggle.active .perm-dot { background: #2563eb; }
    body.light .admin-add-card { background: #fff; border-color: #e2e8f0; }
    body.light .admin-add-title { color: #1e293b; }
    body.light .btn-del-user { border-color: #e2e8f0; color: #64748b; }
    body.light .btn-del-user:hover { border-color: #e8445a55; color: #e8445a; background: #fef2f2; }
    body.light .admin-section-title { color: #64748b; border-bottom-color: rgba(37,99,235,0.08); }

    /* Responsive admin */
    @media (max-width: 600px) {
      .admin-header-top { flex-direction: column; }
      .admin-stats { width: 100%; }
      .admin-stat-box { flex: 1; }
      .admin-add-grid { grid-template-columns: 1fr; }
      .user-card { padding: 16px; }
      .user-card-header { flex-direction: column; align-items: flex-start; gap: 10px; }
      .perm-grid { gap: 6px; }
      .perm-toggle { padding: 5px 9px; }
      .perm-toggle-label { font-size: 0.66rem; }
    }

    /* ══════════════════════════════════════════
       ABA LOGS
    ══════════════════════════════════════════ */
    .logs-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      gap: 8px;
      flex-wrap: wrap;
      padding-right: 160px; /* safe zone p/ ícones fixos (sininho + app switcher) */
    }
    @media (max-width: 700px) { .logs-header { padding-right: 100px; } }

    .logs-header-left  { display: flex; align-items: center; gap: 8px; }
    .logs-header-right { display: flex; gap: 6px; flex-shrink: 0; }
    .logs-title { font-size: 1rem; font-weight: 700; }
    .logs-count { font-size: 0.72rem; color: #8b949e; background: #1c2333; border: 1px solid #30363d; border-radius: 6px; padding: 3px 10px; }

    .btn-logs-action {
      padding: 7px 14px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      color: #f0f0f5;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .btn-logs-action:hover { background: rgba(255,255,255,0.15); color: #f0f0f5; border-color: rgba(255,255,255,0.35); }
    .btn-logs-action.danger { color: #e8445a; background: rgba(232,68,90,0.06); border-color: rgba(232,68,90,0.2); }
    .btn-logs-action.danger:hover { background: rgba(232,68,90,0.12); border-color: rgba(232,68,90,0.4); }

    .logs-search {
      padding: 8px 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 8px;
      color: #94a3b8;
      font-size: 0.78rem;
      width: 200px;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      box-sizing: border-box;
      outline: none;
      margin-bottom: 12px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    .logs-search:focus {
      border-color: rgba(255,255,255,0.4);
      box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
    }
    .logs-search::placeholder { color: #6e7681; }
    .search-input {
      padding: 8px 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 8px;
      color: #94a3b8;
      font-size: 0.78rem;
      width: 200px;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      box-sizing: border-box;
    }
    .search-input:focus {
      outline: none;
      border-color: rgba(255,255,255,0.4);
      box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
    }

    /* ── LOG CARDS ─────────────────────────────── */
    .log-card-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      max-height: calc(100vh - 260px);
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #30363d transparent;
      padding-right: 2px;
    }
    .log-card-list::-webkit-scrollbar { width: 4px; }
    .log-card-list::-webkit-scrollbar-track { background: transparent; }
    .log-card-list::-webkit-scrollbar-thumb { background: #30363d; border-radius: 99px; }

    .log-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 12px;
      padding: 11px 16px;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      flex-shrink: 0;
    }
    .log-card:hover {
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.22);
    }
    .log-card-main {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .log-card-customer {
      flex: 1;
      font-size: 0.82rem;
      font-weight: 600;
      color: #94a3b8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .log-card-value {
      font-size: 0.88rem;
      font-weight: 700;
      color: #f0f0f5;
      white-space: nowrap;
    }
    .log-card-date {
      font-size: 0.67rem;
      color: #8b949e;
      white-space: nowrap;
    }
    .log-card-sub {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 6px;
      flex-wrap: wrap;
    }
    .log-card-sub-item {
      font-size: 0.68rem;
      color: #8b949e;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .log-card-sub-item svg {
      width: 10px; height: 10px;
      stroke: #6e7681;
      fill: none;
      stroke-width: 1.8;
      flex-shrink: 0;
    }
    .log-card-pixels-ok   { color: #3fb950; font-weight: 700; }
    .log-card-pixels-err  { color: #e8445a; font-weight: 700; }
    .log-empty-cards {
      text-align: center;
      color: #6e7681;
      font-size: 0.82rem;
      padding: 60px 0;
    }

    /* Event badges */
    .ev-badge {
      display: inline-block;
      font-size: 0.6rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }

    .ev-badge.purchase         { background: #e8445a22; color: #e8445a; border: 1px solid #e8445a33; }
    .ev-badge.completepayment  { background: #e8445a14; color: #e8445a88; border: 1px solid #e8445a22; }
    .ev-badge.initiatecheckout { background: #58a6ff22; color: #f0f0f5; border: 1px solid #58a6ff33; }
    .ev-badge.addpaymentinfo   { background: #58a6ff14; color: #58a6ff88; border: 1px solid #58a6ff22; }
    .ev-badge.placeanorder     { background: #58a6ff18; color: #f0f0f5; border: 1px solid #58a6ff25; }
    .ev-badge.viewcontent      { background: #30363d; color: #8b949e; border: 1px solid #30363d; }
    .ev-badge.default          { background: #30363d; color: #8b949e; border: 1px solid #30363d; }

    /* Mode badge */
    .mode-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
    .mode-badge.production { background: #58a6ff12; color: #f0f0f5; border: 1px solid #58a6ff25; }
    .mode-badge.test       { background: #58a6ff18; color: #f0f0f5; border: 1px solid #58a6ff30; }

    /* Dispatch badge */
    .dispatch-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
    .dispatch-badge.success { background: #58a6ff12; color: #f0f0f5; border: 1px solid #58a6ff25; }
    .dispatch-badge.partial { background: #f39c1218; color: #f39c12; border: 1px solid #f39c1230; }
    .dispatch-badge.error   { background: #e8445a12; color: #e8445a; border: 1px solid #e8445a25; }

    .pixels-ratio     { color: #f0f0f5; font-weight: 700; font-size: 0.75rem; }
    .pixels-ratio.err { color: #e8445a; }

    .btn-ver {
      background: transparent;
      border: 1px solid #30363d;
      border-radius: 5px;
      color: #8b949e;
      font-size: 0.65rem;
      padding: 3px 8px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      white-space: nowrap;
    }

    .btn-ver:hover { border-color: #58a6ff44; color: #f0f0f5; }

    .logs-empty {
      text-align: center;
      color: #6e7681;
      font-size: 0.82rem;
      padding: 48px 0;
    }

    /* ── LOG DETAIL MODAL ──────────────────────── */
    #logModal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.82);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9998;
      padding: 16px;
    }

    #logModal.hidden { display: none; }

    .modal-box {
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 16px;
      width: 100%;
      max-width: 580px;
      max-height: 88vh;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #30363d transparent;
    }

    .modal-box::-webkit-scrollbar       { width: 4px; }
    .modal-box::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 12px;
      border-bottom: 1px solid #1c2333;
      position: sticky;
      top: 0;
      background: #161b22;
      z-index: 1;
    }

    .modal-title { font-size: 0.95rem; font-weight: 700; }

    .btn-close-modal {
      background: transparent;
      border: 1px solid #30363d;
      border-radius: 6px;
      color: #8b949e;
      font-size: 0.85rem;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      flex-shrink: 0;
    }

    .btn-close-modal:hover { border-color: #e8445a44; color: #e8445a; }

    .modal-body    { padding: 16px 20px; }
    .modal-footer  { padding: 12px 20px; border-top: 1px solid #1c2333; }

    .modal-section       { margin-bottom: 16px; }
    .modal-section-title {
      font-size: 0.62rem;
      font-weight: 700;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .modal-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .modal-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

    .modal-field-label { font-size: 0.63rem; color: #8b949e; margin-bottom: 3px; }
    .modal-field-value { font-size: 0.8rem; color: #e6edf3; font-weight: 500; word-break: break-all; line-height: 1.4; }
    .modal-field-value.mono  { font-family: 'Courier New', monospace; font-size: 0.7rem; }
    .modal-field-value.cyan  { color: #f0f0f5; }
    .modal-field-value.red   { color: #e8445a; }
    .modal-field-value.muted { color: #6e7681; }

    .ttclid-box {
      background: #111;
      border: 1px solid #1c2333;
      border-radius: 8px;
      padding: 10px 12px;
      font-family: 'Courier New', monospace;
      font-size: 0.63rem;
      color: #8b949e;
      word-break: break-all;
      line-height: 1.6;
    }

    .btn-fechar {
      padding: 9px 22px;
      background: #1c2333;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #e6edf3;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }

    .btn-fechar:hover { border-color: #8b949e; color: #fff; }

    /* ── Filtro por pixel + ao vivo ───────────────────────────── */
    .logs-filter-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: #58a6ff0a;
      border: 1px solid #58a6ff25;
      border-radius: 9px;
      padding: 8px 12px;
      margin-bottom: 10px;
      font-size: 0.75rem;
    }

    .logs-filter-banner.hidden { display: none; }
    .logs-filter-name  { color: #f0f0f5; font-weight: 700; }
    .btn-clear-filter {
      background: transparent;
      border: 1px solid #58a6ff33;
      border-radius: 5px;
      color: #58a6ff88;
      font-size: 0.68rem;
      padding: 2px 8px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      flex-shrink: 0;
    }
    .btn-clear-filter:hover { border-color: #e8445a44; color: #e8445a; }

    .logs-toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      align-items: center;
    }

    /* ── DATE FILTER ──────────────────────────── */
    .logs-date-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .date-quick-btn {
      padding: 5px 11px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 7px;
      color: #8b949e;
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      white-space: nowrap;
    }
    .date-quick-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: #e6edf3; }
    .date-quick-btn.active { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); color: #f0f0f5; }
    .date-custom-wrap {
      display: none;
      align-items: center;
      gap: 6px;
    }
    .date-custom-wrap.show { display: flex; }
    .date-custom-sep { color: #6e7681; font-size: 0.72rem; }
    .date-input {
      padding: 5px 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 7px;
      color: #94a3b8;
      font-size: 0.72rem;
      outline: none;
      transition: border-color 0.18s;
      cursor: pointer;
      color-scheme: dark;
    }
    .date-input:focus { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
    .logs-filter-summary {
      margin-left: auto;
      font-size: 0.68rem;
      color: #8b949e;
      white-space: nowrap;
    }
    .logs-filter-summary strong { color: #f0f0f5; }

    .ev-type-select {
      padding: 7px 10px;
      background: #1c2333;
      border: 1px solid #30363d;
      border-radius: 8px;
      color: #8b949e;
      font-size: 0.78rem;
      outline: none;
      cursor: pointer;
      flex-shrink: 0;
    }

    .ev-type-select:focus { border-color: #58a6ff44; }

    .live-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #1c2333;
      border: 1px solid #30363d;
      border-radius: 8px;
      padding: 6px 10px;
      cursor: pointer;
      font-size: 0.72rem;
      color: #8b949e;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      flex-shrink: 0;
      user-select: none;
    }

    .live-toggle.active          { border-color: #e8445a44; background: #e8445a0a; color: #e8445a; }
    .live-dot                    { width: 7px; height: 7px; border-radius: 50%; background: #30363d; flex-shrink: 0; }
    .live-toggle.active .live-dot { background: #e8445a; animation: blink 1.2s infinite; }

    @keyframes blink { 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }

    .btn-pixel-logs {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 7px;
      color: #f0f0f5;
      font-size: 0.7rem;
      padding: 4px 10px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .btn-pixel-logs:hover { border-color: rgba(255,255,255,0.45); color: #f0f0f5; background: rgba(255,255,255,0.08); }

    /* ══ DASHBOARD ════════════════════════════════════════════════ */
    #abaDashboard { padding-bottom: 52px; /* no anim */ }
    @keyframes dashIn  { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
    @keyframes orbPulse{ 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} }

    /* ── Header ── */
    /* ════════════════════════════════════════════════════════════
       LIVE tab — analytics em tempo real com globo 3D
    ════════════════════════════════════════════════════════════ */
    .live-wrap { padding: 8px 8px 40px; }
    .live-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-right: 160px; }
    @media (max-width: 700px) { .live-header { padding-right: 100px; } }
    .live-title {
      font-size: 1.9rem; font-weight: 800; color: #f0f0f5;
      letter-spacing: -0.02em; margin: 0 0 6px;
      display: inline-flex; align-items: center; gap: 12px;
    }
    .live-subtitle { color: #8b949e; font-size: 0.92rem; margin: 0; }
    .live-pulse-dot {
      display: inline-block; width: 10px; height: 10px; border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
      animation: livePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes livePulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); transform: scale(1); }
      50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); transform: scale(1.08); }
    }

    /* KPIs (4 cards) */
    .live-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
    @media (max-width: 900px) { .live-kpis { grid-template-columns: repeat(2, 1fr); } }
    .live-kpi {
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      padding: 18px 20px;
      position: relative;
      overflow: hidden;
    }
    .live-kpi-label {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
      color: #6b7280; text-transform: uppercase; margin-bottom: 10px;
    }
    .live-kpi-value {
      font-size: 2.1rem; font-weight: 800; color: #f0f0f5;
      letter-spacing: -0.02em; line-height: 1;
    }
    .live-kpi-primary {
      background: linear-gradient(135deg, rgba(34,197,94,0.06), rgba(88,166,255,0.04));
      border-color: rgba(34,197,94,0.28);
    }
    .live-kpi-primary .live-kpi-value { color: #22c55e; }
    .live-kpi-bar { margin-top: 12px; height: 4px; background: rgba(34,197,94,0.10); border-radius: 3px; overflow: hidden; }
    .live-kpi-bar-fill { width: 40%; height: 100%; background: linear-gradient(90deg, #22c55e, #58a6ff); animation: liveBarSweep 3.6s ease-in-out infinite; }
    @keyframes liveBarSweep {
      0%, 100% { transform: translateX(-100%); }
      50%      { transform: translateX(200%); }
    }

    /* Grid: Globo + Feed */
    .live-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
      gap: 20px;
      margin-bottom: 22px;
    }
    @media (max-width: 1100px) { .live-grid { grid-template-columns: 1fr; } }

    /* Globo */
    .live-globe-card {
      background: linear-gradient(180deg, #060a13 0%, #0b1220 100%);
      border: 1px solid rgba(88,166,255,0.15);
      border-radius: 16px;
      padding: 18px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      grid-template-rows: auto 1fr;
      gap: 14px;
      min-height: 520px;
      position: relative;
      overflow: hidden;
    }
    .live-globe-card::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at 30% 20%, rgba(88,166,255,0.10), transparent 45%),
                  radial-gradient(circle at 80% 90%, rgba(34,197,94,0.08), transparent 40%);
      pointer-events: none;
    }
    @media (max-width: 900px) { .live-globe-card { grid-template-columns: 1fr; } .live-globe-side { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 14px; } }
    .live-globe-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
    .live-globe-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #f0f0f5; font-size: 0.88rem; }
    .live-globe-badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 5px 12px;
      background: rgba(34,197,94,0.1);
      border: 1px solid rgba(34,197,94,0.3);
      border-radius: 999px;
      font-size: 0.74rem; font-weight: 700; color: #22c55e;
      transition: all 0.3s;
    }
    /* Estado IDLE: ninguém ativo agora → visual apagado */
    .live-globe-badge.idle {
      background: rgba(139,148,158,0.08);
      border-color: rgba(139,148,158,0.2);
      color: #8b949e;
    }
    .live-globe-badge.idle .live-pulse-dot { animation: none; background: #6b7280; opacity: 0.7; }
    .live-globe-badge.idle .live-pulse-dot::before { display: none; }
    body.light .live-globe-badge.idle { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
    /* Mesma coisa pro feed count */
    .live-feed-count { transition: all 0.3s; }
    /* etiqueta do teste A/B (Ao Vivo): qual teste e qual página o visitante está vendo */
    .live-ab-tag { display:inline-flex; align-items:center; gap:5px; font-size:0.62rem; font-weight:800; padding:2px 8px; border-radius:999px; border:1px solid color-mix(in srgb, var(--ac,#58a6ff) 40%, transparent); background:color-mix(in srgb, var(--ac,#58a6ff) 12%, transparent); color:var(--ac,#58a6ff); vertical-align:middle; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
    .live-ab-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--ac,#58a6ff); flex-shrink:0; }
    .live-feed-abline { margin:4px 0 2px; }
    .live-feed-abline .live-ab-tag { max-width:100%; }
    .live-feed-count.idle { opacity: 0.5; }
    .live-globe-container {
      position: relative;
      min-height: 460px;
      display: flex; align-items: center; justify-content: center;
      z-index: 1;
      overflow: hidden;           /* markers fora da borda deixavam o container scrollável */
      overscroll-behavior: none;
    }
    .live-globe-container canvas { cursor: grab; }

    /* ── Ao Vivo v2 (MapLibre): toolbar de modos, pulsos, top cidades ── */
    .lv-toolbar { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; gap: 4px; align-items: center; background: rgba(13,17,23,0.72); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 4px; backdrop-filter: blur(8px); }
    .lv-btn { width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 8px; color: #8b949e; cursor: pointer; transition: all .15s; }
    .lv-btn:hover { background: rgba(255,255,255,0.07); color: #f0f0f5; }
    .lv-btn.active { background: rgba(88,166,255,0.16); color: #58a6ff; }
    .lv-btn svg { width: 15px; height: 15px; }
    .lv-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.12); margin: 0 2px; }
    .lv-topcities { position: absolute; top: 54px; right: 12px; z-index: 6; min-width: 195px; max-width: 240px; background: rgba(13,17,23,0.80); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(8px); }
    .lv-topcities:empty { display: none !important; }
    .lv-tc-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #f0f0f5; margin-bottom: 6px; }
    .lv-tc-title svg { width: 12px; height: 12px; color: #f59e0b; }
    .lv-tc-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #9ca3af; margin-top: 7px; }
    .lv-tc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lv-tc-n { font-weight: 800; color: #58a6ff; flex: none; }
    .lv-tc-bar { height: 3px; background: rgba(255,255,255,0.07); border-radius: 99px; margin-top: 3px; overflow: hidden; }
    .lv-tc-bar span { display: block; height: 100%; background: linear-gradient(90deg, #58a6ff, #22c55e); border-radius: 99px; }
    .lv-pulse { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #22c55e; animation: lvPulse 2.1s ease-out forwards; pointer-events: none; }
    .lv-pulse.hot { border-color: #f59e0b; width: 18px; height: 18px; animation-duration: 2.5s; }
    @keyframes lvPulse { 0% { transform: scale(0.35); opacity: 0.95; } 100% { transform: scale(3.4); opacity: 0; } }
    .live-globe-container .maplibregl-ctrl-attrib, .live-globe-container .maplibregl-ctrl-bottom-right, .live-globe-container .maplibregl-ctrl-bottom-left { display: none !important; }
    .live-globe-container .maplibregl-canvas { outline: none; }
    .lv-retry { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 320px; color: #8b949e; font-size: 13px; text-align: center; width: 100%; }
    .lv-retry-btn { margin-top: 4px; background: rgba(88,166,255,0.14); border: 1px solid rgba(88,166,255,0.4); color: #58a6ff; border-radius: 8px; padding: 7px 16px; font-size: 12px; font-weight: 700; cursor: pointer; }
    body.light .lv-retry { color: #64748b; }
    .live-globe-container:fullscreen { background: #0d1117; }
    body.light .lv-toolbar, body.light .lv-topcities { background: rgba(255,255,255,0.88); border-color: rgba(15,23,42,0.12); }
    body.light .lv-btn { color: #64748b; }
    body.light .lv-btn:hover { background: rgba(15,23,42,0.06); color: #0f172a; }
    body.light .lv-btn.active { background: rgba(37,99,235,0.12); color: #2563eb; }
    body.light .lv-sep { background: rgba(15,23,42,0.15); }
    body.light .lv-tc-title { color: #0f172a; }
    body.light .lv-tc-row { color: #475569; }
    body.light .lv-tc-bar { background: rgba(15,23,42,0.08); }
    body.light .live-globe-container:fullscreen { background: #ffffff; }
    .live-globe-container canvas:active { cursor: grabbing; }
    .live-globe-side { z-index: 2; display: flex; flex-direction: column; gap: 18px; }
    .live-side-block { }
    .live-side-title {
      font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
      color: #6b7280; text-transform: uppercase; margin-bottom: 10px;
    }
    .live-side-list { display: flex; flex-direction: column; gap: 6px; }
    .live-side-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 8px;
      font-size: 0.78rem;
    }
    .live-side-row-lbl { color: #d1d5db; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .live-side-row-val { color: #58a6ff; font-weight: 700; margin-left: 8px; }
    .live-side-empty { color: #6b7280; font-size: 0.76rem; padding: 8px; text-align: center; }

    /* Feed */
    .live-feed-card {
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 18px;
      display: flex; flex-direction: column;
      min-height: 520px;
    }
    .live-feed-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .live-feed-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #f0f0f5; font-size: 0.88rem; }
    .live-feed-count {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 999px;
      padding: 3px 10px;
      font-size: 0.7rem; font-weight: 700; color: #8b949e;
    }
    .live-feed-body {
      flex: 1;
      overflow-y: auto;
      display: flex; flex-direction: column; gap: 6px;
      max-height: 500px;
    }
    .live-feed-body::-webkit-scrollbar { width: 6px; }
    .live-feed-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
    .live-feed-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 10px;
      transition: background 0.15s, border-color 0.15s, transform 0.12s;
      animation: liveFeedIn 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
      cursor: pointer;
    }
    .live-feed-row:hover { background: rgba(88,166,255,0.06); border-color: rgba(88,166,255,0.25); transform: translateX(2px); }
    @keyframes liveFeedIn {
      from { opacity: 0; transform: translateX(-8px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .live-feed-badge {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 8px;
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em;
      flex-shrink: 0; text-transform: uppercase;
    }
    .live-feed-badge.pageview { background: rgba(88,166,255,0.14); color: #58a6ff; }
    .live-feed-badge.click    { background: rgba(251,191,36,0.14); color: #fbbf24; }
    .live-feed-badge.scroll   { background: rgba(147,197,253,0.14); color: #93c5fd; }
    .live-feed-badge.engagement { background: rgba(34,197,94,0.14); color: #22c55e; }
    .live-feed-badge.leave    { background: rgba(248,81,73,0.14); color: #f85149; }
    .live-feed-badge.custom   { background: rgba(167,139,250,0.14); color: #a78bfa; }
    .live-feed-info { min-width: 0; overflow: hidden; }
    .live-feed-path { color: #f0f0f5; font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .live-feed-meta { color: #8b949e; font-size: 0.7rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
    .live-feed-flag { font-size: 0.85rem; }
    .live-feed-dot { color: #4b5563; }
    .live-feed-count-badge { background: rgba(88,166,255,0.1); color: #7cc4ff; padding: 1px 6px; border-radius: 999px; font-weight: 700; font-size: 0.66rem; }
    .live-feed-chips { display: flex; gap: 4px; margin-top: 5px; flex-wrap: nowrap; overflow: hidden; }
    .live-feed-chip {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 1px 6px; border-radius: 5px;
      font-size: 0.62rem; font-weight: 600;
      background: rgba(255,255,255,0.04);
      color: #9ca3af;
      text-transform: uppercase; letter-spacing: 0.02em;
    }
    .live-feed-chip b { color: #f0f0f5; font-weight: 800; }
    .live-feed-chip.pageview { background: rgba(88,166,255,0.1); color: #7cc4ff; }
    .live-feed-chip.click    { background: rgba(251,191,36,0.1); color: #fcd34d; }
    .live-feed-chip.scroll   { background: rgba(147,197,253,0.1); color: #93c5fd; }
    .live-feed-chip.engagement { background: rgba(34,197,94,0.1); color: #4ade80; }
    .live-feed-chip.leave    { background: rgba(248,81,73,0.1); color: #fca5a5; }
    .live-feed-chip.custom   { background: rgba(167,139,250,0.1); color: #c4b5fd; }
    .live-feed-time { color: #8b949e; font-size: 0.72rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .live-feed-empty {
      text-align: center; color: #6b7280; font-size: 0.86rem;
      padding: 60px 20px; line-height: 1.6;
    }

    /* Install snippet */
    .live-install-card {
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 20px;
    }
    .live-install-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; flex-wrap: wrap; }
    .live-install-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #f0f0f5; font-size: 0.92rem; }
    .live-install-hint { color: #8b949e; font-size: 0.84rem; margin: 0 0 14px; line-height: 1.5; }
    .live-copy-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px;
      background: linear-gradient(135deg, #58a6ff, #1f6feb);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.78rem; font-weight: 700;
      cursor: pointer;
      transition: transform 0.12s, box-shadow 0.12s;
    }
    .live-copy-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px -6px rgba(88,166,255,0.5); }
    .live-copy-btn.copied { background: #22c55e; }
    .live-snippet {
      background: #060a13;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 14px 16px;
      margin: 0;
      overflow-x: auto;
      font-family: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
      font-size: 0.8rem;
      color: #58a6ff;
      line-height: 1.5;
    }
    .live-snippet code { color: inherit; background: transparent; padding: 0; }
    .live-custom-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.05); }
    .live-custom-title { font-size: 0.82rem; font-weight: 700; color: #f0f0f5; margin-bottom: 6px; }
    .live-custom-hint { color: #8b949e; font-size: 0.8rem; margin: 0 0 12px; }

    /* Live indicator dot no sidebar */
    .sb-live-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
      animation: livePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      margin-left: auto;
    }
    .sidebar.collapsed .sb-live-dot { display: none; }
    .sidebar.collapsed:hover .sb-live-dot { display: block; }

    /* Light mode */
    body.light .live-title { color: #0f172a; }
    body.light .live-subtitle { color: #64748b; }
    body.light .live-kpi { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 1px 3px rgba(15,23,42,0.05); }
    body.light .live-kpi-value { color: #0f172a; }
    body.light .live-kpi-label { color: #64748b; }
    body.light .live-kpi-primary { background: linear-gradient(135deg, rgba(34,197,94,0.06), rgba(37,99,235,0.04)); border-color: rgba(34,197,94,0.35); }
    body.light .live-globe-card { background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%); border-color: #cbd5e1; }
    body.light .live-globe-title { color: #0f172a; }
    body.light .live-side-title { color: #64748b; }
    body.light .live-side-row { background: rgba(15,23,42,0.03); border-color: #e2e8f0; }
    body.light .live-side-row-lbl { color: #0f172a; }
    body.light .live-side-row-val { color: #1d4ed8; }
    body.light .live-feed-card { background: #ffffff; border-color: #e5e7eb; }
    body.light .live-feed-header { border-bottom-color: #f1f5f9; }
    body.light .live-feed-title { color: #0f172a; }
    body.light .live-feed-count { background: #f1f5f9; border-color: #e5e7eb; color: #64748b; }
    body.light .live-feed-row { background: #f8fafc; border-color: #e5e7eb; }
    body.light .live-feed-row:hover { background: #eff6ff; border-color: #bfdbfe; }
    body.light .live-feed-meta { color: #64748b; }
    body.light .live-feed-dot { color: #cbd5e1; }
    body.light .live-feed-count-badge { background: rgba(37,99,235,0.08); color: #2563eb; }
    body.light .live-feed-chip { background: #f1f5f9; color: #64748b; }
    body.light .live-feed-chip b { color: #0f172a; }
    body.light .live-feed-time { color: #64748b; }

    /* ── Sessões gravadas (rrweb) — SaaS table pro ── */
    .live-sessions-card {
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 22px;
    }
    .live-sessions-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-bottom: 4px;
    }
    .live-sessions-title {
      display: inline-flex; align-items: center; gap: 8px;
      font-weight: 700; color: #f0f0f5; font-size: 0.92rem;
    }
    .live-sessions-count {
      display: inline-flex; align-items: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 2px 9px; border-radius: 999px;
      font-size: 0.7rem; color: #9ca3af; font-weight: 700;
      margin-left: 6px;
    }
    .live-sessions-refresh {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      color: #9ca3af; cursor: pointer;
      transition: all 0.15s;
    }
    .live-sessions-refresh:hover { color: #58a6ff; border-color: #58a6ff; }
    .live-sessions-hint { color: #8b949e; font-size: 0.82rem; margin: 4px 0 14px; }

    /* Toolbar: search + filters */
    .live-sessions-toolbar {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 12px; flex-wrap: wrap;
    }
    .live-sessions-search {
      flex: 1; min-width: 200px; position: relative;
    }
    .live-sessions-search svg {
      position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
      color: #6b7280; pointer-events: none;
    }
    .live-sessions-search input {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      color: #f0f0f5;
      padding: 8px 12px 8px 32px;
      font-size: 0.82rem;
      outline: none;
      transition: all 0.15s;
    }
    .live-sessions-search input::placeholder { color: #6b7280; }
    .live-sessions-search input:focus { border-color: rgba(88,166,255,0.4); background: rgba(88,166,255,0.04); }
    .live-sessions-filter {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      color: #d1d5db;
      padding: 7px 12px 7px 10px;
      border-radius: 8px;
      font-size: 0.78rem; font-weight: 600;
      cursor: pointer; outline: none;
      transition: all 0.15s;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
    }
    .live-sessions-filter:hover { border-color: rgba(88,166,255,0.3); color: #f0f0f5; }
    .live-sessions-filter:focus { border-color: rgba(88,166,255,0.5); }

    /* Table */
    .live-sessions-table-wrap {
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      overflow: hidden;
      background: rgba(255,255,255,0.01);
    }
    .live-sessions-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
    }
    .live-sessions-table thead th {
      background: rgba(255,255,255,0.02);
      color: #8b949e;
      font-weight: 700;
      text-align: left;
      padding: 10px 14px;
      font-size: 0.7rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      transition: color 0.15s;
    }
    .live-sessions-table thead th:hover { color: #d1d5db; }
    .live-sessions-table thead th.sortable::after {
      content: ''; display: inline-block; margin-left: 6px;
      width: 0; height: 0;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      opacity: 0.3;
      transform: translateY(-2px);
    }
    .live-sessions-table thead th.sort-asc { color: #58a6ff; }
    .live-sessions-table thead th.sort-asc::after { border-bottom: 4px solid currentColor; opacity: 1; }
    .live-sessions-table thead th.sort-desc { color: #58a6ff; }
    .live-sessions-table thead th.sort-desc::after { border-top: 4px solid currentColor; opacity: 1; transform: translateY(2px); }
    .live-sessions-table tbody tr {
      border-bottom: 1px solid rgba(255,255,255,0.04);
      cursor: pointer;
      transition: background 0.12s;
    }
    .live-sessions-table tbody tr:last-child { border-bottom: none; }
    .live-sessions-table tbody tr:hover { background: rgba(88,166,255,0.06); }
    .live-sessions-table tbody td {
      padding: 11px 14px;
      color: #d1d5db;
      vertical-align: middle;
    }
    .live-session-play-btn {
      width: 26px; height: 26px; border-radius: 50%;
      background: linear-gradient(135deg, #22c55e, #16a34a);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      box-shadow: 0 2px 8px rgba(34,197,94,0.35);
      flex-shrink: 0;
    }
    .live-sessions-table tbody tr:hover .live-session-play-btn { transform: scale(1.1); transition: transform 0.15s; }
    .live-session-title-cell { min-width: 200px; max-width: 340px; }
    .live-session-title-txt {
      color: #f0f0f5; font-weight: 600; font-size: 0.83rem;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .live-session-path-txt {
      color: #58a6ff; font-size: 0.72rem; font-family: 'JetBrains Mono', 'Menlo', monospace;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
    }
    .live-session-dur {
      display: inline-block;
      background: rgba(88,166,255,0.1);
      color: #58a6ff;
      padding: 3px 9px;
      border-radius: 6px;
      font-weight: 700; font-size: 0.75rem;
      font-variant-numeric: tabular-nums;
    }
    .live-session-live {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(239, 68, 68, 0.12);
      color: #f87171;
      padding: 3px 9px;
      border-radius: 6px;
      font-weight: 800; font-size: 0.7rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .live-session-live::before {
      content: '';
      width: 6px; height: 6px; border-radius: 50%;
      background: #ef4444;
      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
      animation: liveDot 1.6s infinite;
    }
    @keyframes liveDot {
      0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
      70%  { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
      100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }
    body.light .live-session-live { background: rgba(220, 38, 38, 0.1); color: #dc2626; }

    /* Live indicator no feed row */
    .live-feed-row.is-live {
      background: rgba(34, 197, 94, 0.04);
      border-color: rgba(34, 197, 94, 0.2);
    }
    .live-feed-row.is-live:hover {
      background: rgba(34, 197, 94, 0.08);
      border-color: rgba(34, 197, 94, 0.35);
    }
    .live-feed-livedot {
      display: inline-flex; align-items: center; gap: 4px;
      color: #22c55e;
      font-size: 0.62rem; font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-right: 4px;
    }
    .live-feed-livedot::before {
      content: '';
      width: 6px; height: 6px; border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
      animation: liveDot 1.6s infinite;
    }
    body.light .live-feed-row.is-live { background: #f0fdf4; border-color: #bbf7d0; }
    body.light .live-feed-row.is-live:hover { background: #dcfce7; border-color: #86efac; }
    body.light .live-feed-livedot { color: #16a34a; }
    .live-session-devchip {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 2px 8px 2px 6px;
      border-radius: 999px;
      font-size: 0.7rem; font-weight: 700;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .live-session-devchip.mobile { color: #a78bfa; background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.22); }
    .live-session-devchip.tablet { color: #22c55e; background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.22); }
    .live-session-devchip.desktop { color: #58a6ff; background: rgba(88,166,255,0.08); border-color: rgba(88,166,255,0.22); }
    /* Selo de robô e etapa (VSL na mesma URL) na linha da sessão e no feed */
    .live-session-robochip, .live-feed-robo {
      display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
      padding: 1px 7px; border-radius: 999px; margin-left: 4px;
      font-size: 0.62rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
      color: #f87171; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3);
      cursor: help;
    }
    .live-session-etapas {
      display: inline-flex; align-items: center; vertical-align: middle;
      padding: 1px 7px; border-radius: 999px; margin-left: 4px;
      font-size: 0.62rem; font-weight: 800; letter-spacing: .02em;
      color: #22c55e; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.25);
    }
    body.light .live-session-robochip, body.light .live-feed-robo { color: #b91c1c; background: #fee2e2; border-color: #fca5a5; }
    body.light .live-session-etapas { color: #15803d; background: #dcfce7; border-color: #86efac; }
    /* Funil da sessão: Etapa 1 › Etapa 2 › 🎬 VSL › 🛒 Checkout › 💰 Comprou (linha própria sob o título) */
    .live-session-funil { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 4px 0 2px; }
    .live-session-funil .sep { color: #4b5563; font-size: 0.62rem; font-weight: 800; }
    .live-session-funil .fp {
      display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px;
      font-size: 0.62rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; cursor: help;
      color: #9ca3af; background: rgba(156,163,175,0.08); border: 1px solid rgba(156,163,175,0.25);
    }
    .live-session-funil .fp.vsl { color: #22c55e; background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.25); }
    .live-session-funil .fp.checkout { color: #fb923c; background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.35); }
    .live-session-funil .fp.checkout.seguro { color: #f87171; background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.3); text-decoration: line-through; }
    .live-session-funil .fp.compra { color: #fbbf24; background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.45); }
    body.light .live-session-funil .fp { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
    body.light .live-session-funil .fp.vsl { color: #15803d; background: #dcfce7; border-color: #86efac; }
    body.light .live-session-funil .fp.checkout { color: #c2410c; background: #ffedd5; border-color: #fdba74; }
    body.light .live-session-funil .fp.checkout.seguro { color: #b91c1c; background: #fee2e2; border-color: #fca5a5; }
    body.light .live-session-funil .fp.compra { color: #a16207; background: #fef3c7; border-color: #fcd34d; }
    .live-session-loc { color: #d1d5db; font-size: 0.78rem; white-space: nowrap; }
    .live-session-loc .flag { display: inline-block; margin-right: 4px; }
    .live-session-when { color: #8b949e; font-size: 0.75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .live-sessions-empty {
      text-align: center; color: #6b7280;
      padding: 40px 20px; font-size: 0.86rem; line-height: 1.6;
    }

    /* Pagination */
    .live-sessions-pagination {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 14px; gap: 12px;
    }
    .live-sessions-pagination-info { color: #8b949e; font-size: 0.76rem; }
    .live-sessions-pagination-controls { display: flex; gap: 6px; }
    .live-sessions-page-btn {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      color: #d1d5db;
      min-width: 32px; height: 32px;
      padding: 0 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.78rem; font-weight: 700;
      transition: all 0.15s;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .live-sessions-page-btn:hover:not(:disabled) { border-color: rgba(88,166,255,0.4); color: #58a6ff; }
    .live-sessions-page-btn.active {
      background: linear-gradient(135deg, rgba(88,166,255,0.2), rgba(88,166,255,0.1));
      border-color: rgba(88,166,255,0.5); color: #58a6ff;
    }
    .live-sessions-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

    /* Compact viewport: cards stack instead of table */
    @media (max-width: 720px) {
      .live-sessions-table thead { display: none; }
      .live-sessions-table, .live-sessions-table tbody, .live-sessions-table tr, .live-sessions-table td { display: block; width: 100%; }
      .live-sessions-table tbody tr { padding: 12px 14px; }
      .live-sessions-table tbody td { padding: 3px 0; border: none; }
      .live-session-title-cell { max-width: 100%; }
    }

    /* ═══════ Player modal — SaaS pro look ═══════ */
    .live-player-bg {
      position: fixed; inset: 0;
      background: rgba(6, 8, 15, 0.82);
      backdrop-filter: blur(12px);
      opacity: 0; pointer-events: none;
      transition: opacity 0.24s;
      z-index: 9600;
    }
    .live-player-bg.show { opacity: 1; pointer-events: auto; }
    .live-player-modal {
      position: fixed;
      top: 50%; left: 50%;
      width: min(1280px, 96vw); height: min(880px, 92vh);
      background: #0a0d13;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px;
      transform: translate(-50%, -50%) scale(0.96);
      opacity: 0; pointer-events: none;
      transition: opacity 0.22s, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 9700;
      display: flex; flex-direction: column;
      overflow: hidden;
      box-shadow: 0 60px 120px -20px rgba(0,0,0,0.8);
    }
    .live-player-modal.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
    /* Responsive: mobile/tablet menores */
    @media (max-width: 768px) {
      .live-player-modal { width: 100vw; height: 100vh; border-radius: 0; border: none; }
      .live-player-header { padding: 10px 14px; }
      .live-player-stage { padding: 12px; }
      .live-player-controls-bar { padding: 10px 14px; }
    }

    /* Header refinado */
    .live-player-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 20px;
      background: linear-gradient(180deg, #0d1117 0%, #0a0d13 100%);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      gap: 14px; flex-shrink: 0;
      min-height: 58px;
    }
    .live-player-meta {
      flex: 1; min-width: 0;
      display: flex; align-items: center; gap: 12px;
    }
    .live-player-devbadge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      background: rgba(88,166,255,0.12);
      border: 1px solid rgba(88,166,255,0.3);
      border-radius: 999px;
      font-size: 0.68rem; font-weight: 700;
      color: #58a6ff;
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }
    .live-player-devbadge.mobile { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.3); color: #a78bfa; }
    .live-player-devbadge.tablet { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3); color: #22c55e; }
    .live-player-title-block { min-width: 0; overflow: hidden; }
    .live-player-title {
      color: #f0f0f5; font-size: 0.92rem; font-weight: 700;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      letter-spacing: -0.01em;
    }
    .live-player-sub {
      color: #8b949e; font-size: 0.72rem; margin-top: 3px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .live-player-close {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #d1d5db;
      width: 34px; height: 34px; border-radius: 10px;
      font-size: 1.15rem; cursor: pointer; line-height: 1;
      transition: all 0.15s;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .live-player-close:hover { color: #f0f0f5; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }

    /* Stage: área do canvas centralizada */
    .live-player-stage {
      flex: 1; min-height: 0;
      display: flex; align-items: center; justify-content: center;
      background:
        radial-gradient(circle at 30% 20%, rgba(88,166,255,0.04), transparent 50%),
        radial-gradient(circle at 80% 90%, rgba(167,139,250,0.03), transparent 50%),
        #06090f;
      overflow: hidden;
      padding: 20px;
      position: relative;
    }
    /* Wrapper que mimetiza dispositivo (frame arredondado + shadow) */
    .live-player-canvas-frame {
      position: relative;
      display: flex; align-items: center; justify-content: center;
      background: #000;
      border-radius: 16px;
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 24px 60px -20px rgba(0,0,0,0.8),
        0 0 80px -20px rgba(88,166,255,0.15);
      max-width: 100%; max-height: 100%;
    }
    .live-player-canvas-frame.mobile,
    .live-player-canvas-frame.tablet { border-radius: 28px; }
    .live-player-canvas-frame.mobile::before,
    .live-player-canvas-frame.tablet::before {
      content: ''; position: absolute;
      top: 8px; left: 50%;
      transform: translateX(-50%);
      width: 60px; height: 5px;
      background: rgba(255,255,255,0.15);
      border-radius: 3px;
      z-index: 2;
      pointer-events: none;
    }
    /* Estica rrweb pra caber no frame */
    .live-player-canvas-frame .replayer-wrapper { position: relative !important; }
    /* Vídeo do funil na gravação: o quadro vem do player (shadow DOM), que o gravador não vê.
       O segundo do vídeo é anotado pelo track.js (bm_video) e mostrado aqui por cima. */
    .lp-video { position:absolute; z-index:5; left:12px; bottom:12px; display:flex; align-items:center; gap:8px; background:rgba(13,17,23,.92); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.5); white-space:nowrap; }
    .lp-video.sobre-player { bottom:auto; }
    .lp-video-ico { width:0; height:0; border-left:9px solid #3fb950; border-top:6px solid transparent; border-bottom:6px solid transparent; flex-shrink:0; }
    .lp-video.pausado .lp-video-ico { border:0; width:8px; height:11px; border-left:3px solid #e3b341; border-right:3px solid #e3b341; }
    .lp-video-bar { flex:1; min-width:60px; height:4px; background:rgba(255,255,255,.2); border-radius:2px; overflow:hidden; } .lp-video-bar i { display:block; height:100%; background:#3fb950; }
    .lp-video.pausado .lp-video-bar i { background:#e3b341; }
    /* Esconde o controller nativo dentro do frame (movemos ele pra barra full-width) */
    .live-player-canvas-frame .rr-controller { display: none !important; }
    .live-player-canvas-frame .rr-player {
      background: transparent !important;
    }

    /* Barra de controles full-width no rodapé do modal — separada do canvas */
    .live-player-controls-bar {
      flex-shrink: 0;
      background: linear-gradient(180deg, #0d1117 0%, #060a13 100%);
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 12px 22px;
    }
    /* Controller movido pra barra: reseta padding/background */
    .live-player-controls-bar .rr-controller {
      display: block !important;
      background: transparent !important;
      border-top: none !important;
      padding: 0 !important;
    }
    .live-player-controls-bar .rr-player {
      background: transparent !important;
      box-shadow: none !important;
    }
    .live-player-controls-bar .rr-player__frame { display: none !important; }

    .live-player-loading {
      display: flex; flex-direction: column; align-items: center; gap: 14px;
      color: #8b949e; font-size: 0.9rem;
    }
    .live-player-spinner {
      width: 40px; height: 40px;
      border: 3px solid rgba(255,255,255,0.1);
      border-top-color: #58a6ff;
      border-radius: 50%;
      animation: liveSpin 0.8s linear infinite;
    }
    @keyframes liveSpin { to { transform: rotate(360deg); } }

    /* ═══════ Overrides do rrweb-player pra visual SaaS ═══════ */
    .rr-player {
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }
    .rr-player__frame {
      background: #fff !important;
    }
    /* Barra de controle na parte inferior — completamente redesenhada */
    .rr-controller {
      background: linear-gradient(180deg, #0d1117 0%, #060a13 100%) !important;
      border-top: 1px solid rgba(255,255,255,0.08) !important;
      padding: 14px 22px !important;
    }
    .rr-timeline {
      background: rgba(255,255,255,0.06) !important;
      height: 5px !important;
      border-radius: 999px !important;
      margin-bottom: 12px !important;
      cursor: pointer !important;
    }
    .rr-progress {
      background: linear-gradient(90deg, #58a6ff, #22c55e) !important;
      border-radius: 999px !important;
      transition: width 0.05s linear !important;
    }
    .rr-progress__step {
      background: #fff !important;
      width: 14px !important; height: 14px !important;
      border: 2px solid #58a6ff !important;
      border-radius: 50% !important;
      top: -5px !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    }
    .rr-controller__btns {
      display: flex !important; align-items: center !important;
      gap: 10px !important; justify-content: flex-start !important;
    }
    .rr-controller__btns button {
      background: rgba(255,255,255,0.04) !important;
      border: 1px solid rgba(255,255,255,0.08) !important;
      border-radius: 8px !important;
      color: #d1d5db !important;
      padding: 6px 12px !important;
      font-size: 0.8rem !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.15s !important;
      font-family: inherit !important;
    }
    .rr-controller__btns button:hover {
      background: rgba(88,166,255,0.12) !important;
      border-color: rgba(88,166,255,0.35) !important;
      color: #58a6ff !important;
    }
    .rr-controller__btns button.active,
    .rr-controller__btns .switch {
      background: linear-gradient(135deg, #58a6ff, #1f6feb) !important;
      border-color: #58a6ff !important;
      color: #fff !important;
    }
    .rr-controller__btns > *:first-child {
      width: 36px !important; height: 36px !important;
      border-radius: 50% !important;
      padding: 0 !important;
      display: inline-flex !important; align-items: center !important; justify-content: center !important;
      background: linear-gradient(135deg, #22c55e, #16a34a) !important;
      border-color: transparent !important;
      color: #fff !important;
      box-shadow: 0 3px 12px rgba(34,197,94,0.4) !important;
    }
    .rr-controller__btns > *:first-child:hover {
      transform: scale(1.05);
      background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    }
    /* Timeline hover state */
    .rr-timeline:hover .rr-progress__step { transform: scale(1.15); }
    /* Info text ("Skip inactive", etc) */
    .rr-controller label,
    .rr-controller span:not(.rr-progress__step) {
      color: #8b949e !important;
      font-size: 0.76rem !important;
      font-weight: 500 !important;
    }
    /* Switch nativo do rrweb-player: escondido — usamos o toggle custom .bm-skip-toggle */
    .rr-controller__btns .switch { display: none !important; }
    /* Switch nativo do rrweb-player: quebrado visualmente — substituído pelo nosso */
    .rr-controller__btns .switch { display: none !important; }
    /* Rótulo do add-on de rede: "Adicionado" vira "Remover" no hover
       (.just-added segura o swap até o mouse sair da row após o clique) */
    .addon-row.selected .tl-remove { display: none; }
    .addon-row.selected:not(.just-added):hover .tl-added { display: none; }
    .addon-row.selected:not(.just-added):hover .tl-remove { display: inline; color: #f87171; }
    .addon-row.selected:not(.just-added):hover { border-color: rgba(239,68,68,0.45) !important; }
    .addon-row.selected:not(.just-added):hover .addon-toggle .icon-done { display: none !important; }

    /* ── Toggle de add-on dentro dos cards de plano ── */
    .plan-addon-row {
      display: flex; align-items: center; gap: 11px;
      margin: 14px 0 4px;
      padding: 11px 13px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 11px;
      cursor: pointer;
      transition: all 0.18s;
      text-align: left;
      user-select: none;
    }
    .plan-addon-row:hover { border-color: rgba(88,166,255,0.4); }
    .plan-addon-row.on {
      background: rgba(88,166,255,0.07);
      border-color: rgba(88,166,255,0.5);
    }
    .pa-switch {
      width: 34px; height: 19px; border-radius: 999px; flex: none;
      background: rgba(255,255,255,0.15);
      position: relative;
      transition: background 0.18s;
    }
    .plan-addon-row.on .pa-switch { background: linear-gradient(135deg, #58a6ff, #1f6feb); }
    .pa-knob {
      position: absolute; top: 2.5px; left: 3px;
      width: 14px; height: 14px; border-radius: 50%;
      background: #fff;
      transition: transform 0.18s;
    }
    .plan-addon-row.on .pa-knob { transform: translateX(14px); }
    .pa-info { min-width: 0; }
    .pa-title { font-size: 0.82rem; font-weight: 700; color: #e6edf3; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .pa-price { font-size: 0.72rem; font-weight: 700; color: #58a6ff; background: rgba(88,166,255,0.1); border-radius: 999px; padding: 1px 8px; }
    .pa-sub { font-size: 0.72rem; color: #8b949e; margin-top: 2px; }
    .plan-total-line {
      text-align: center; font-size: 0.82rem; color: #8b949e;
      margin: 6px 0 2px;
    }
    .plan-total-line strong { color: #e6edf3; font-size: 0.92rem; }
    body.light .plan-addon-row { background: #f8fafc; border-color: #e5e7eb; }
    body.light .plan-addon-row.on { background: #eff6ff; border-color: #93c5fd; }
    body.light .pa-title { color: #0f172a; }
    body.light .plan-total-line strong { color: #0f172a; }
    /* Sem o add-on Ao Vivo + Leads: abas somem da sidebar (SaaS profissional —
       usuário não vê o que não contratou; contratação pela aba Assinatura/planos) */
    /* Abas do add-on: VISÍVEIS com cadeado (desperta curiosidade — clique abre o teaser) */
    body.no-live-leads .sidebar-btn[data-tab="live"],
    body.no-live-leads .sidebar-btn[data-tab="leads"],
    body.no-live-leads .sidebar-btn[data-tab="email"] { position: relative; opacity: 0.7; }
    body.no-live-leads .sidebar-btn[data-tab="live"]:hover,
    body.no-live-leads .sidebar-btn[data-tab="leads"]:hover,
    body.no-live-leads .sidebar-btn[data-tab="email"]:hover { opacity: 1; }
    body.no-live-leads .sidebar-btn[data-tab="live"]::after,
    body.no-live-leads .sidebar-btn[data-tab="leads"]::after,
    body.no-live-leads .sidebar-btn[data-tab="email"]::after {
      content: '';
      position: absolute;
      top: 4px; right: 4px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background-color: #1f6feb;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
      background-size: 8px 8px;
      background-position: center;
      background-repeat: no-repeat;
      border: 1.5px solid #0d1117;
      box-shadow: 0 2px 6px rgba(31,111,235,0.55);
    }

    /* ── TEASER do add-on: prévia viva borrada + card flutuante ── */
    .addon-teaser {
      position: relative;
      min-height: 74vh;
      border-radius: 16px;
      overflow: hidden;
      margin: 8px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 20px;
    }
    .tz-demo {
      position: absolute; inset: 0;
      padding: 26px;
      filter: blur(7px) saturate(0.9);
      pointer-events: none;
      user-select: none;
      opacity: 0.85;
    }
    .tz-overlay {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at center, rgba(6,10,19,0.25) 0%, rgba(6,10,19,0.78) 100%);
    }
    .tz-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
    .tz-kpi {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 13px;
      padding: 16px 18px;
    }
    .tz-kpi-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; color: #8b949e; }
    .tz-kpi-val { font-size: 1.7rem; font-weight: 800; color: #e6edf3; margin-top: 4px; }
    .tz-kpi-val.accent { color: #22c55e; }
    .tz-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .tz-globe {
      position: relative;
      min-height: 300px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 13px;
      overflow: hidden;
    }
    .tz-globe-sphere {
      position: absolute; left: 50%; top: 55%;
      width: 240px; height: 240px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle at 34% 30%, rgba(88,166,255,0.35), rgba(13,30,60,0.9) 60%, #05070d 100%);
      box-shadow: 0 0 70px rgba(88,166,255,0.25), inset -18px -14px 50px rgba(0,0,0,0.6);
    }
    .tz-ping {
      position: absolute;
      width: 10px; height: 10px; border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 12px rgba(34,197,94,0.9);
      animation: tz-ping-anim 2.4s ease-out infinite;
    }
    .tz-ping.p1 { left: 44%; top: 40%; }
    .tz-ping.p2 { left: 56%; top: 58%; animation-delay: 0.8s; }
    .tz-ping.p3 { left: 49%; top: 66%; animation-delay: 1.6s; }
    @keyframes tz-ping-anim {
      0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
      70% { box-shadow: 0 0 0 16px rgba(34,197,94,0); }
      100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    }
    .tz-feed { display: flex; flex-direction: column; gap: 9px; }
    .tz-feed-row {
      display: flex; align-items: center; gap: 9px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 11px;
      padding: 12px 14px;
      font-size: 0.8rem; color: #d1d5db;
      animation: tz-slide-in 0.35s ease;
    }
    @keyframes tz-slide-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
    .tz-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 7px rgba(34,197,94,0.9); flex: none; }
    .tz-city { font-weight: 700; color: #e6edf3; }
    .tz-evt { color: #8b949e; flex: 1; }
    .tz-time { color: #22c55e; font-size: 0.7rem; font-weight: 700; }
    .tz-table { display: flex; flex-direction: column; gap: 8px; }
    .tz-trow {
      display: flex; align-items: center; gap: 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 11px;
      padding: 13px 16px;
      font-size: 0.82rem;
    }
    .tz-tname { font-weight: 700; color: #e6edf3; width: 110px; }
    .tz-temail { color: #8b949e; flex: 1; }
    .tz-tstatus { font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: rgba(88,166,255,0.12); color: #58a6ff; }
    .tz-tstatus.buyer { background: rgba(34,197,94,0.12); color: #22c55e; }
    .tz-tval { font-weight: 700; color: #e6edf3; width: 70px; text-align: right; }

    /* card flutuante */
    .tz-card {
      position: relative;
      z-index: 2;
      max-width: 460px;
      width: 100%;
      background: linear-gradient(180deg, rgba(17,24,38,0.97) 0%, rgba(10,14,24,0.97) 100%);
      border: 1px solid rgba(88,166,255,0.3);
      border-radius: 18px;
      padding: 30px 32px;
      text-align: center;
      box-shadow: 0 40px 100px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(88,166,255,0.06);
    }
    .tz-card-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(88,166,255,0.1);
      border: 1px solid rgba(88,166,255,0.35);
      color: #58a6ff;
      font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em;
      border-radius: 999px; padding: 5px 13px;
      margin-bottom: 14px;
    }
    .tz-card h3 { margin: 0 0 8px; font-size: 1.3rem; color: #e6edf3; letter-spacing: -0.01em; }
    .tz-card-sub { color: #8b949e; font-size: 0.88rem; line-height: 1.55; margin: 0 0 14px; }
    .tz-card-sub b { color: #d1d5db; }
    .tz-real { margin: 0 0 14px; display: flex; flex-direction: column; gap: 7px; }
    .tz-real-line {
      background: rgba(255,180,0,0.07);
      border: 1px solid rgba(255,180,0,0.25);
      color: #e6edf3;
      border-radius: 10px;
      padding: 9px 13px;
      font-size: 0.82rem;
      text-align: left;
    }
    .tz-price { margin-bottom: 16px; }
    .tz-price-val { font-size: 2.1rem; font-weight: 800; color: #e6edf3; }
    .tz-price-per { color: #8b949e; font-size: 0.95rem; }
    .tz-price-note { display: block; color: #8b949e; font-size: 0.75rem; margin-top: 4px; }
    body.light .tz-overlay { background: radial-gradient(ellipse at center, rgba(248,250,252,0.3) 0%, rgba(241,245,249,0.85) 100%); }
    body.light .tz-card { background: #ffffff; border-color: #bfdbfe; box-shadow: 0 40px 100px -30px rgba(15,23,42,0.35); }
    body.light .tz-card h3 { color: #0f172a; }
    body.light .tz-real-line { color: #334155; }
    body.light .tz-price-val { color: #0f172a; }


    /* ══════════ PAINEL ADMIN v2 ══════════ */
    .adm-sync { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #8b949e; }
    .adm-sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.8); animation: adm-pulse 2s infinite; }
    @keyframes adm-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
    .adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-bottom: 22px; }
    .adm-kpi { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 13px; padding: 15px 16px; }
    .adm-kpi-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; color: #8b949e; }
    .adm-kpi-val { font-size: 1.55rem; font-weight: 800; color: #e6edf3; margin: 4px 0 2px; white-space: nowrap; }
    .adm-kpi-val.accent { color: #58a6ff; }
    .adm-kpi-sub { font-size: 0.68rem; color: #8b949e; }
    .adm-kpi-sub.adm-kpi-alert { color: #f59e0b; font-weight: 600; }
    .adm-badge-held { background: #b45309 !important; }
    .adm-held { border: 1px solid rgba(245,158,11,0.35); background: rgba(245,158,11,0.07); border-radius: 10px; padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
    .adm-held-txt { font-size: 0.8rem; line-height: 1.45; color: #e6edf3; }
    .adm-held-when { font-size: 0.7rem; color: #8b949e; }
    body.light .adm-held-txt { color: #0f172a; }
    .adm-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
    .adm-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 0 12px; color: #8b949e; }
    .adm-search input { flex: 1; background: none; border: none; outline: none; color: #e6edf3; font-size: 0.85rem; padding: 10px 0; font-family: inherit; }
    .adm-select, .adm-input { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #e6edf3; padding: 9px 12px; font-size: 0.82rem; font-family: inherit; outline: none; cursor: pointer; }
    .adm-select.sm, .adm-input.sm { padding: 7px 10px; font-size: 0.8rem; }
    .adm-input { cursor: text; }
    .adm-refresh { background: rgba(88,166,255,0.1); border: 1px solid rgba(88,166,255,0.3); border-radius: 10px; color: #58a6ff; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; }
    .adm-refresh:hover { background: rgba(88,166,255,0.2); }
    .adm-table-wrap { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .adm-table { width: 100%; min-width: 920px; border-collapse: collapse; }
    .adm-table thead th { text-align: left; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; color: #8b949e; padding: 13px 16px; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; }
    .adm-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: background 0.12s; }
    .adm-table tbody tr:hover { background: rgba(88,166,255,0.05); }
    .adm-table tbody td { padding: 12px 16px; font-size: 0.83rem; color: #d1d5db; white-space: nowrap; }
    .adm-user-cell { display: flex; align-items: center; gap: 11px; }
    .adm-avatar { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #58a6ff, #1f6feb); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex: none; }
    .adm-avatar.lg { width: 46px; height: 46px; border-radius: 12px; font-size: 1.1rem; }
    .adm-user-name { font-weight: 700; color: #e6edf3; display: flex; align-items: center; gap: 6px; }
    .adm-user-mail { font-size: 0.74rem; color: #8b949e; }
    .adm-role-badge { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.05em; background: #58a6ff; color: #fff; border-radius: 4px; padding: 1px 5px; }
    .adm-status { font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
    .adm-addon-pill { display: inline-block; font-size: 0.64rem; font-weight: 700; background: rgba(88,166,255,0.12); color: #58a6ff; border-radius: 999px; padding: 2px 8px; margin: 1px 2px 1px 0; }
    .adm-muted { color: #565f6b; }
    .adm-use { display: flex; flex-direction: column; gap: 3px; }
    .adm-use-bar { width: 90px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
    .adm-use-bar span { display: block; height: 100%; background: linear-gradient(90deg, #58a6ff, #22c55e); border-radius: 999px; }
    .adm-use-txt { font-size: 0.68rem; color: #8b949e; }

    /* Drawer */
    .adm-drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 9600; }
    .adm-drawer-bg.show { opacity: 1; pointer-events: auto; }
    .adm-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 92vw; background: #0d1117; border-left: 1px solid rgba(255,255,255,0.1); transform: translateX(100%); transition: transform 0.24s cubic-bezier(0.16,1,0.3,1); z-index: 9601; display: flex; flex-direction: column; box-shadow: -30px 0 80px rgba(0,0,0,0.5); }
    .adm-drawer.show { transform: none; }
    .adm-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .adm-dr-head-user { display: flex; align-items: center; gap: 13px; }
    .adm-dr-name { font-weight: 700; font-size: 1.05rem; color: #e6edf3; display: flex; align-items: center; gap: 7px; }
    .adm-dr-mail { font-size: 0.78rem; color: #8b949e; }
    .adm-drawer-close { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #8b949e; width: 32px; height: 32px; font-size: 1.3rem; cursor: pointer; line-height: 1; }
    .adm-drawer-close:hover { color: #e6edf3; }
    .adm-drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
    .adm-dr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 18px; }
    .adm-dr-stat { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; padding: 12px 8px; text-align: center; }
    .adm-dr-stat .v { font-size: 1.3rem; font-weight: 800; color: #e6edf3; }
    .adm-dr-stat .l { font-size: 0.62rem; color: #8b949e; margin-top: 2px; }
    .adm-dr-sec { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; color: #58a6ff; text-transform: uppercase; margin: 20px 0 9px; }
    .adm-dr-row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.82rem; }
    .adm-dr-k { color: #8b949e; flex: none; }
    .adm-dr-v { color: #e6edf3; text-align: right; word-break: break-word; }
    .adm-dr-v .mono, .mono { font-family: ui-monospace, Menlo, monospace; font-size: 0.76rem; }
    .adm-ok { color: #22c55e; }
    .adm-warn { color: #f59e0b; font-size: 0.72rem; }
    .adm-dr-venda { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
    .adm-dr-venda-val { color: #8b949e; }
    .adm-actions { display: flex; flex-direction: column; gap: 13px; }
    .adm-act-group label { display: block; font-size: 0.72rem; color: #8b949e; margin-bottom: 6px; }
    .adm-act-row { display: flex; gap: 8px; }
    .adm-act-row.wrap { flex-wrap: wrap; }
    .adm-act-row .adm-select, .adm-act-row .adm-input { flex: 1; }
    .adm-btn { background: rgba(88,166,255,0.1); border: 1px solid rgba(88,166,255,0.3); border-radius: 9px; color: #58a6ff; padding: 8px 14px; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap; }
    .adm-btn:hover { background: rgba(88,166,255,0.2); }
    .adm-btn.danger { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: #f87171; }
    .adm-btn.danger:hover { background: rgba(239,68,68,0.18); }
    body.light .adm-kpi, body.light .adm-dr-stat, body.light .adm-search, body.light .adm-select, body.light .adm-input { background: #f8fafc; border-color: #e5e7eb; }
    body.light .adm-kpi-val, body.light .adm-user-name, body.light .adm-dr-name, body.light .adm-dr-v, body.light .adm-dr-stat .v { color: #0f172a; }
    body.light .adm-drawer { background: #ffffff; }
    body.light .adm-table thead th { background: #f8fafc; }
    body.light .adm-table tbody tr:hover { background: #f1f5f9; }

    /* ── Admin v2.1: ordenação de colunas ── */
    .adm-table thead th.adm-sortable { cursor: pointer; user-select: none; transition: color 0.12s; }
    .adm-table thead th.adm-sortable:hover { color: #58a6ff; }
    .adm-sort-ind::after { content: ''; display: inline-block; margin-left: 3px; opacity: 0.9; }
    .adm-sort-ind.asc::after  { content: '↑'; color: #58a6ff; }
    .adm-sort-ind.desc::after { content: '↓'; color: #58a6ff; }

    /* ── Admin v2.1: seções recolhíveis do drawer (dossiê sem poluição) ── */
    .adm-fold { border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; margin-top: 10px; overflow: hidden; }
    .adm-fold-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: rgba(255,255,255,0.02); border: none; padding: 11px 14px; cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 700; color: #d1d5db; transition: background 0.12s; }
    .adm-fold-head:hover { background: rgba(88,166,255,0.06); }
    .adm-fold-head .n { font-size: 0.66rem; font-weight: 800; background: rgba(88,166,255,0.14); color: #58a6ff; border-radius: 999px; padding: 2px 9px; margin-left: auto; }
    .adm-fold-head .chev { transition: transform 0.18s; color: #8b949e; flex: none; }
    .adm-fold.open .adm-fold-head .chev { transform: rotate(180deg); }
    .adm-fold-body { display: none; padding: 4px 14px 12px; }
    .adm-fold.open .adm-fold-body { display: block; }
    .adm-px-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.8rem; color: #d1d5db; }
    .adm-px-row:last-child { border-bottom: none; }
    .adm-px-row .adm-px-id { margin-left: auto; color: #8b949e; font-family: ui-monospace, Menlo, monospace; font-size: 0.72rem; }
    .adm-px-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
    .adm-audit-row { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.76rem; }
    .adm-audit-row:last-child { border-bottom: none; }
    .adm-audit-act { font-weight: 700; color: #d1d5db; }
    .adm-audit-det { color: #8b949e; margin-top: 1px; }
    .adm-audit-when { color: #565f6b; font-size: 0.68rem; margin-top: 1px; }

    /* ── Admin v2.1: chips de add-on de rede ── */
    .adm-net-chip { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: #8b949e; padding: 6px 13px; font-size: 0.76rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; }
    .adm-net-chip:hover { border-color: #58a6ff; color: #58a6ff; }
    .adm-net-chip.on { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.4); color: #22c55e; }
    .adm-net-chip.on:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.4); color: #f87171; }

    /* ── Admin v2.1: responsivo mobile (tabela tem scroll-x em QUALQUER largura) ── */
    @media (max-width: 680px) {
      .adm-kpis { grid-template-columns: repeat(2, 1fr); gap: 9px; }
      .adm-kpi { padding: 12px 13px; }
      .adm-kpi-val { font-size: 1.25rem; }
      .adm-drawer { width: 100vw; max-width: 100vw; }
    }

    body.light .adm-fold { border-color: #e5e7eb; }
    body.light .adm-fold-head { background: #f8fafc; color: #0f172a; }
    body.light .adm-px-row, body.light .adm-audit-act { color: #0f172a; }
    body.light .adm-net-chip { background: #f8fafc; border-color: #e5e7eb; }

    /* ── Admin v2.1: paginação (usuários + log) ── */
    .adm-pager { display: flex; align-items: center; gap: 10px; padding: 12px 4px 2px; font-size: 0.76rem; color: #8b949e; flex-wrap: wrap; }
    .adm-pager:empty { display: none; }
    .adm-pager .grow { flex: 1; }
    .adm-pager-btn { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #d1d5db; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; font-size: 0.9rem; transition: all 0.13s; }
    .adm-pager-btn:hover { border-color: #58a6ff; color: #58a6ff; }
    .adm-pager-btn:disabled { opacity: 0.3; pointer-events: none; }
    .adm-pager .adm-select.sm { padding: 6px 9px; font-size: 0.74rem; }
    body.light .adm-pager-btn { background: #f8fafc; border-color: #e5e7eb; color: #334155; }

    /* ══════════ FIM PAINEL ADMIN v2 ══════════ */

    /* ═══════════════════════════════════════════════════════════════
       BMT — TOUR GUIADO + ABA TUTORIAIS (módulo independente)
       Config-driven: tours definidos em BM_TOURS, zero acoplamento.
    ═══════════════════════════════════════════════════════════════ */
    /* Botão de ajuda ? (fixo no topo, ao lado do app switcher) */
    .bmt-help-btn { position: absolute; top: 18px; right: 114px; z-index: 9500; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #8b949e; font-size: 1rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; font-family: inherit; }
    .bmt-help-btn:hover { border-color: #58a6ff; color: #58a6ff; }
    body.has-pricing-overlay .bmt-help-btn, body.no-auth .bmt-help-btn { display: none; }
    .bmt-help-menu { position: absolute; top: 60px; right: 114px; z-index: 9502; background: #161b22; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 6px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); display: none; min-width: 230px; }
    .bmt-help-menu.open { display: block; animation: bmtFadeUp 0.16s ease; }
    .bmt-help-menu button { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; color: #d1d5db; padding: 9px 11px; border-radius: 8px; font-size: 0.82rem; cursor: pointer; font-family: inherit; text-align: left; }
    .bmt-help-menu button:hover { background: rgba(88,166,255,0.1); color: #58a6ff; }

    /* Spotlight (recorte claro + resto escurecido; alvo continua clicável) */
    .bmt-spot { position: fixed; z-index: 9990; pointer-events: none; border-radius: 12px; box-shadow: 0 0 0 3px rgba(88,166,255,0.85), 0 0 0 9999px rgba(2,6,14,0.66); transition: top 0.28s cubic-bezier(0.4,0,0.2,1), left 0.28s cubic-bezier(0.4,0,0.2,1), width 0.28s cubic-bezier(0.4,0,0.2,1), height 0.28s cubic-bezier(0.4,0,0.2,1), border-radius 0.28s; animation: bmtPulse 2s ease-in-out infinite; }
    .bmt-spot.bmt-hidden { display: none; }
    @keyframes bmtPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(88,166,255,0.85), 0 0 0 9999px rgba(2,6,14,0.66); } 50% { box-shadow: 0 0 0 6px rgba(88,166,255,0.45), 0 0 0 9999px rgba(2,6,14,0.66); } }
    /* Overlay puro (passo sem alvo = modal central) */
    .bmt-dim { position: fixed; inset: 0; z-index: 9989; background: rgba(2,6,14,0.66); display: none; }
    .bmt-dim.on { display: block; animation: bmtFade 0.2s ease; }

    /* Popover do passo */
    .bmt-pop { position: fixed; z-index: 9995; width: 360px; max-width: calc(100vw - 32px); background: #161b22; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,0.55); padding: 18px 18px 14px; animation: bmtFadeUp 0.22s ease; }
    .bmt-pop.bmt-center { top: 50% !important; left: 50% !important; transform: translate(-50%,-50%); width: 430px; }
    .bmt-pop.bmt-corner { top: 32px !important; right: 32px !important; left: auto !important; transform: none; }
    .bmt-pop-eyebrow { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #58a6ff; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .bmt-pop-step { color: #8b949e; font-weight: 700; letter-spacing: 0.02em; text-transform: none; }
    .bmt-pop-title { font-size: 1.02rem; font-weight: 800; color: #e6edf3; margin-bottom: 7px; line-height: 1.3; }
    .bmt-pop-body { font-size: 0.83rem; color: #a8b3bf; line-height: 1.62; }
    .bmt-pop-body b { color: #d1d5db; }
    .bmt-pop-tip { margin-top: 9px; font-size: 0.76rem; color: #8b949e; background: rgba(88,166,255,0.07); border: 1px solid rgba(88,166,255,0.18); border-radius: 9px; padding: 8px 10px; }
    .bmt-progress { height: 4px; border-radius: 99px; background: rgba(255,255,255,0.08); margin: 13px 0 11px; overflow: hidden; }
    .bmt-progress span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #58a6ff, #22c55e); transition: width 0.3s; }
    .bmt-pop-foot { display: flex; align-items: center; gap: 8px; }
    .bmt-btn { border-radius: 9px; padding: 8px 14px; font-size: 0.79rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.14s; }
    .bmt-btn-next { flex: 1; background: linear-gradient(135deg, #1f6feb, #58a6ff); border: none; color: #fff; }
    .bmt-btn-next:hover { filter: brightness(1.12); }
    .bmt-btn-ghost { background: none; border: 1px solid rgba(255,255,255,0.14); color: #8b949e; }
    .bmt-btn-ghost:hover { color: #d1d5db; border-color: rgba(255,255,255,0.3); }
    .bmt-btn-ghost:disabled { opacity: 0.3; pointer-events: none; }
    .bmt-skip { background: none; border: none; color: #565f6b; font-size: 0.72rem; cursor: pointer; font-family: inherit; padding: 4px; }
    .bmt-skip:hover { color: #8b949e; text-decoration: underline; }
    @keyframes bmtFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .bmt-pop.bmt-center { animation: bmtFadeC 0.22s ease; }
    @keyframes bmtFadeC { from { opacity: 0; transform: translate(-50%,-50%) scale(0.97); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
    @keyframes bmtFade { from { opacity: 0; } to { opacity: 1; } }

    /* Aba Tutoriais (hub) */
    .tut-hero { background: linear-gradient(135deg, rgba(31,111,235,0.14), rgba(34,197,94,0.07)); border: 1px solid rgba(88,166,255,0.22); border-radius: 16px; padding: 22px 24px; margin-bottom: 22px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
    .tut-hero-info { flex: 1; min-width: 240px; }
    .tut-hero h3 { margin: 0 0 5px; font-size: 1.15rem; color: #e6edf3; }
    .tut-hero p { margin: 0; font-size: 0.82rem; color: #8b949e; line-height: 1.55; }
    .tut-hero-ring { text-align: center; }
    .tut-hero-pct { font-size: 1.9rem; font-weight: 800; color: #58a6ff; line-height: 1; }
    .tut-hero-lbl { font-size: 0.66rem; color: #8b949e; margin-top: 3px; }
    .tut-hero-bar { width: 220px; height: 7px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 8px; }
    .tut-hero-bar span { display: block; height: 100%; background: linear-gradient(90deg, #58a6ff, #22c55e); border-radius: 99px; transition: width 0.4s; }
    .tut-sec { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #58a6ff; margin: 22px 0 11px; }
    .tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 13px; }
    .tut-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s, transform 0.15s; }
    .tut-card:hover { border-color: rgba(88,166,255,0.4); transform: translateY(-2px); }
    .tut-card-top { display: flex; align-items: center; gap: 10px; }
    .tut-card-ico { width: 34px; height: 34px; border-radius: 9px; background: rgba(88,166,255,0.12); color: #58a6ff; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex: none; }
    .tut-card-title { font-weight: 800; color: #e6edf3; font-size: 0.9rem; }
    .tut-card-done { margin-left: auto; color: #22c55e; font-size: 0.9rem; }
    .tut-card-desc { font-size: 0.76rem; color: #8b949e; line-height: 1.5; flex: 1; }
    .tut-card-bar { height: 4px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; }
    .tut-card-bar span { display: block; height: 100%; background: linear-gradient(90deg, #58a6ff, #22c55e); border-radius: 99px; }
    .tut-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .tut-card-meta { font-size: 0.68rem; color: #565f6b; }
    .tut-card-btn { background: rgba(88,166,255,0.1); border: 1px solid rgba(88,166,255,0.3); color: #58a6ff; border-radius: 8px; padding: 6px 13px; font-size: 0.74rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.14s; }
    .tut-card-btn:hover { background: rgba(88,166,255,0.2); }
    .tut-card-btn.redo { border-color: rgba(255,255,255,0.14); background: none; color: #8b949e; }

    /* Mobile: popover vira bottom-sheet */
    @media (max-width: 680px) {
      .bmt-pop, .bmt-pop.bmt-corner, .bmt-pop.bmt-center { top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw; max-width: 100vw; transform: none; border-radius: 18px 18px 0 0; }
      .bmt-help-btn { right: 110px; }
      .tut-hero { padding: 16px; }
    }

    /* Light mode */
    body.light .bmt-pop, body.light .bmt-help-menu { background: #ffffff; border-color: #e5e7eb; }
    body.light .bmt-pop-title, body.light .tut-card-title, body.light .tut-hero h3 { color: #0f172a; }
    body.light .bmt-pop-body { color: #475569; }
    body.light .bmt-help-menu button { color: #334155; }
    body.light .tut-card, body.light .bmt-help-btn { background: #f8fafc; border-color: #e5e7eb; }
    /* ══════════ FIM BMT ══════════ */

    /* ── Lock screen de add-on (Ao Vivo + Leads) ── */
    .addon-lock {
      display: flex; align-items: center; justify-content: center;
      min-height: 62vh; padding: 40px 20px;
    }
    .addon-lock-card {
      max-width: 480px; width: 100%;
      background: linear-gradient(180deg, rgba(88,166,255,0.05) 0%, rgba(13,17,23,0.6) 100%);
      border: 1px solid rgba(88,166,255,0.22);
      border-radius: 18px;
      padding: 36px 34px;
      text-align: center;
      box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
    }
    .addon-lock-icon {
      width: 58px; height: 58px; margin: 0 auto 16px;
      border-radius: 16px;
      background: rgba(88,166,255,0.1);
      border: 1px solid rgba(88,166,255,0.35);
      color: #58a6ff;
      display: flex; align-items: center; justify-content: center;
    }
    .addon-lock-card h3 { margin: 0 0 8px; font-size: 1.25rem; color: #e6edf3; }
    .addon-lock-sub { color: #8b949e; font-size: 0.9rem; line-height: 1.55; margin: 0 0 18px; }
    .addon-lock-card ul { list-style: none; margin: 0 0 20px; padding: 0; text-align: left; }
    .addon-lock-card ul li {
      display: flex; align-items: center; gap: 9px;
      color: #d1d5db; font-size: 0.86rem; padding: 5px 0;
    }
    .addon-lock-price { margin-bottom: 18px; }
    .addon-lock-price .alp-val { font-size: 2rem; font-weight: 800; color: #e6edf3; }
    .addon-lock-price .alp-per { color: #8b949e; font-size: 0.95rem; }
    .addon-lock-price .alp-note { display: block; color: #8b949e; font-size: 0.76rem; margin-top: 4px; }
    .addon-lock-cta {
      width: 100%;
      background: linear-gradient(135deg, #58a6ff, #1f6feb);
      border: none; border-radius: 12px;
      color: #fff; font-weight: 700; font-size: 0.95rem;
      padding: 13px 20px; cursor: pointer;
      transition: all 0.18s; font-family: inherit;
      box-shadow: 0 8px 24px -8px rgba(31,111,235,0.55);
    }
    .addon-lock-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(31,111,235,0.7); }
    body.light .addon-lock-card { background: #ffffff; border-color: #dbeafe; }
    body.light .addon-lock-card h3 { color: #0f172a; }
    body.light .addon-lock-card ul li { color: #334155; }
    body.light .addon-lock-price .alp-val { color: #0f172a; }
    /* ── Botões custom do player (toggle, abrir página, tela cheia) ── */
    .bm-player-btn {
      display: inline-flex !important; align-items: center !important; gap: 7px !important;
      background: rgba(255,255,255,0.04) !important;
      border: 1px solid rgba(255,255,255,0.1) !important;
      border-radius: 999px !important;
      color: #d1d5db !important;
      padding: 7px 14px !important;
      font-size: 0.76rem !important; font-weight: 600 !important;
      cursor: pointer !important;
      font-family: inherit !important;
      transition: all 0.15s !important;
      white-space: nowrap !important;
    }
    .bm-player-btn:hover {
      background: rgba(88,166,255,0.12) !important;
      border-color: rgba(88,166,255,0.35) !important;
      color: #58a6ff !important;
    }
    .bm-player-btn svg { flex: none; }
    .bm-mini-switch {
      width: 28px; height: 16px; border-radius: 999px;
      background: rgba(255,255,255,0.16);
      position: relative; flex: none;
      transition: background 0.18s;
    }
    .bm-mini-switch::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 12px; height: 12px; border-radius: 50%;
      background: #fff; transition: transform 0.18s;
    }
    .bm-skip-toggle.on { border-color: rgba(88,166,255,0.5) !important; color: #e6edf3 !important; }
    .bm-skip-toggle.on .bm-mini-switch { background: linear-gradient(135deg, #58a6ff, #1f6feb); }
    .bm-skip-toggle.on .bm-mini-switch::after { transform: translateX(12px); }
    /* Modal em tela cheia: ocupa tudo, replay centralizado */
    .live-player-modal:fullscreen {
      width: 100vw !important; height: 100vh !important;
      max-width: none !important; max-height: none !important;
      top: 0 !important; left: 0 !important;
      transform: none !important;
      border-radius: 0 !important; border: none !important;
      background: #05070d;
    }
    .live-player-modal:fullscreen .live-player-body { flex: 1; }
    body.light .bm-player-btn { background: #f1f5f9 !important; border-color: #e5e7eb !important; color: #475569 !important; }
    body.light .bm-player-btn:hover { background: rgba(37,99,235,0.06) !important; border-color: rgba(37,99,235,0.35) !important; color: #2563eb !important; }
    /* ── Badge AO VIVO do player ── */
    .live-player-livebadge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(239,68,68,0.12);
      border: 1px solid rgba(239,68,68,0.45);
      color: #f87171;
      font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
      border-radius: 999px; padding: 4px 12px;
      margin-right: 10px;
      animation: livebadge-pulse 2s ease-in-out infinite;
    }
    .live-player-livedot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #ef4444;
      box-shadow: 0 0 8px rgba(239,68,68,0.8);
    }
    @keyframes livebadge-pulse {
      0%, 100% { border-color: rgba(239,68,68,0.45); }
      50% { border-color: rgba(239,68,68,0.9); }
    }
    body.light .rr-controller__btns .switch { background: #f1f5f9 !important; border-color: #e5e7eb !important; }
    body.light .rr-controller__btns .switch .label, body.light .rr-controller__btns .switch span { color: #475569 !important; }
    /* Light mode overrides pro player */
    body.light .live-player-modal { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 60px 120px -20px rgba(15,23,42,0.25); }
    body.light .live-player-header { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border-bottom-color: #e5e7eb; }
    body.light .live-player-title { color: #0f172a; }
    body.light .live-player-sub { color: #64748b; }
    body.light .live-player-stage { background: radial-gradient(circle at 30% 20%, rgba(37,99,235,0.04), transparent 50%), radial-gradient(circle at 80% 90%, rgba(147,51,234,0.03), transparent 50%), #f8fafc; }
    body.light .live-player-controls-bar { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border-top-color: #e5e7eb; }
    body.light .live-player-close { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .live-player-close:hover { background: #e2e8f0; color: #0f172a; }
    body.light .live-player-sub { color: #64748b; }
    body.light .live-player-close { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .live-player-close:hover { background: #e2e8f0; color: #0f172a; }
    body.light .live-player-body {
      background:
        radial-gradient(circle at 30% 20%, rgba(37,99,235,0.05), transparent 50%),
        radial-gradient(circle at 80% 90%, rgba(147,51,234,0.03), transparent 50%),
        #f1f5f9;
    }
    body.light .live-player-canvas-frame {
      box-shadow:
        0 0 0 1px rgba(15,23,42,0.08),
        0 24px 60px -20px rgba(15,23,42,0.3);
    }
    body.light .rr-controller { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important; border-top-color: #e5e7eb !important; }
    body.light .rr-timeline { background: #e5e7eb !important; }
    body.light .rr-controller__btns button { background: #f1f5f9 !important; border-color: #e5e7eb !important; color: #475569 !important; }
    body.light .rr-controller__btns button:hover { background: rgba(37,99,235,0.06) !important; border-color: rgba(37,99,235,0.35) !important; color: #2563eb !important; }
    body.light .rr-controller__btns button.active { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; border-color: #2563eb !important; color: #fff !important; }
    body.light .rr-controller label, body.light .rr-controller span:not(.rr-progress__step) { color: #64748b !important; }

    /* Light mode */
    body.light .live-sessions-card { background: #ffffff; border-color: #e5e7eb; }
    body.light .live-sessions-title { color: #0f172a; }
    body.light .live-sessions-count { background: #f8fafc; border-color: #e5e7eb; color: #64748b; }
    body.light .live-sessions-hint { color: #64748b; }
    body.light .live-sessions-refresh { background: #f8fafc; border-color: #e5e7eb; color: #64748b; }
    body.light .live-sessions-refresh:hover { color: #2563eb; border-color: #2563eb; }
    body.light .live-sessions-search input { background: #f8fafc; border-color: #e5e7eb; color: #0f172a; }
    body.light .live-sessions-search input:focus { background: #ffffff; border-color: #2563eb; }
    body.light .live-sessions-search svg { color: #94a3b8; }
    body.light .live-sessions-filter { background: #f8fafc; border-color: #e5e7eb; color: #334155; }
    body.light .live-sessions-filter:hover { border-color: #2563eb; color: #0f172a; }
    body.light .live-sessions-table-wrap { background: #ffffff; border-color: #e5e7eb; }
    body.light .live-sessions-table thead th { background: #f8fafc; color: #64748b; border-bottom-color: #e5e7eb; }
    body.light .live-sessions-table thead th:hover { color: #0f172a; }
    body.light .live-sessions-table thead th.sort-asc,
    body.light .live-sessions-table thead th.sort-desc { color: #2563eb; }
    body.light .live-sessions-table tbody tr { border-bottom-color: #f1f5f9; }
    body.light .live-sessions-table tbody tr:hover { background: #eff6ff; }
    body.light .live-sessions-table tbody td { color: #334155; }
    body.light .live-session-title-txt { color: #0f172a; }
    body.light .live-session-path-txt { color: #1d4ed8; }
    body.light .live-session-dur { background: rgba(37,99,235,0.08); color: #2563eb; }
    body.light .live-session-devchip { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .live-session-devchip.mobile { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; }
    body.light .live-session-devchip.tablet { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
    body.light .live-session-devchip.desktop { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
    body.light .live-session-loc { color: #334155; }
    body.light .live-session-when { color: #64748b; }
    body.light .live-sessions-pagination-info { color: #64748b; }
    body.light .live-sessions-page-btn { background: #f8fafc; border-color: #e5e7eb; color: #334155; }
    body.light .live-sessions-page-btn:hover:not(:disabled) { border-color: #2563eb; color: #2563eb; }
    body.light .live-sessions-page-btn.active { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; color: #2563eb; }
    body.light .live-sessions-empty { color: #94a3b8; }
    body.light .live-player-modal { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 40px 100px -20px rgba(15,23,42,0.25); }
    body.light .live-player-header { background: #f8fafc; border-bottom-color: #f1f5f9; }
    body.light .live-player-meta { color: #0f172a; }
    body.light .live-player-close { background: #f1f5f9; border-color: #e5e7eb; color: #475569; }
    body.light .live-player-body { background: #0d1117; }
    body.light .live-player-loading { color: #64748b; }

    /* ── Drawer de detalhes do lead (ao clicar em evento no feed) ── */
    .live-drawer-bg {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(4px);
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s;
      z-index: 9600; /* acima do sininho (9500) pra bloquear cliques neles */
    }
    .live-drawer-bg.show { opacity: 1; pointer-events: auto; }
    .live-drawer {
      position: fixed; top: 0; right: 0;
      width: min(560px, 100vw); height: 100vh;
      background: #0d1117;
      border-left: 1px solid rgba(255,255,255,0.08);
      box-shadow: -24px 0 60px -12px rgba(0,0,0,0.6);
      transform: translateX(100%);
      transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 9700; /* acima do backdrop + do sininho */
      overflow-y: auto;
    }
    /* Esconde os controls fixos (sininho + app switcher) enquanto o drawer
       está aberto — evita colisão do X com esses ícones no canto superior direito */
    body.live-drawer-open #notifWrap,
    body.live-drawer-open #appSwitcherWrap { display: none !important; }
    .live-drawer.show { transform: translateX(0); }
    .live-drawer::-webkit-scrollbar { width: 8px; }
    .live-drawer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
    .live-drawer-body { padding: 24px 28px 40px; }
    .ldrawer-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; margin-bottom: 24px;
      padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .ldrawer-badge-lg {
      display: inline-block;
      padding: 3px 10px; border-radius: 6px;
      font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
      text-transform: uppercase; margin-bottom: 10px;
    }
    .ldrawer-badge-lg.pageview   { background: rgba(88,166,255,0.14); color: #58a6ff; }
    .ldrawer-badge-lg.click      { background: rgba(251,191,36,0.14); color: #fbbf24; }
    .ldrawer-badge-lg.scroll     { background: rgba(147,197,253,0.14); color: #93c5fd; }
    .ldrawer-badge-lg.engagement { background: rgba(34,197,94,0.14);  color: #22c55e; }
    .ldrawer-badge-lg.leave      { background: rgba(248,81,73,0.14);  color: #f85149; }
    .ldrawer-badge-lg.custom     { background: rgba(167,139,250,0.14); color: #a78bfa; }
    .ldrawer-title {
      font-size: 1.25rem; font-weight: 800; color: #f0f0f5;
      letter-spacing: -0.01em; line-height: 1.25;
      word-break: break-all;
    }
    .ldrawer-when { color: #8b949e; font-size: 0.8rem; margin-top: 6px; }
    .ldrawer-close {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      color: #d1d5db;
      font-size: 1.2rem; line-height: 1;
      width: 34px; height: 34px; border-radius: 8px;
      cursor: pointer; flex-shrink: 0;
      transition: all 0.15s;
    }
    .ldrawer-close:hover { color: #f0f0f5; background: rgba(255,255,255,0.1); }

    .ldrawer-section { margin-bottom: 22px; }
    .ldrawer-section-title {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
      color: #8b949e; text-transform: uppercase;
      margin-bottom: 10px;
    }
    .ldrawer-url {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 10px 12px;
      font-family: 'JetBrains Mono', 'Menlo', monospace;
      font-size: 0.76rem; color: #58a6ff;
      word-break: break-all;
      line-height: 1.5;
    }
    .ldrawer-kv-table { width: 100%; border-collapse: collapse; }
    .ldrawer-kv-table tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
    .ldrawer-kv-table tr:last-child { border-bottom: none; }
    .ldrawer-k {
      padding: 8px 10px 8px 0;
      color: #8b949e; font-size: 0.78rem; font-weight: 500;
      vertical-align: top; width: 130px;
    }
    .ldrawer-v {
      padding: 8px 0;
      color: #e6edf3; font-size: 0.82rem;
      word-break: break-all;
    }
    .ldrawer-v.mono { font-family: 'JetBrains Mono', 'Menlo', monospace; font-size: 0.76rem; color: #93c5fd; }
    .ldrawer-ua { font-size: 0.68rem !important; opacity: 0.8; line-height: 1.4; }
    .ldrawer-ref { color: #a78bfa; }
    .ldrawer-ref em { color: #6b7280; font-style: italic; }
    .ldrawer-json {
      background: #060a13;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 12px 14px;
      font-family: 'JetBrains Mono', 'Menlo', monospace;
      font-size: 0.74rem; color: #a78bfa;
      overflow-x: auto; margin: 0;
      line-height: 1.5;
    }
    /* Tags coloridas (origem, conexão) */
    .ldrawer-tag {
      display: inline-block;
      font-size: 0.7rem; font-weight: 700;
      padding: 3px 9px; border-radius: 6px;
      letter-spacing: 0.02em;
    }
    .ldrawer-tag.direct { background: rgba(148,163,184,0.14); color: #94a3b8; }
    .ldrawer-tag.search { background: rgba(34,197,94,0.14); color: #22c55e; }
    .ldrawer-tag.social { background: rgba(167,139,250,0.14); color: #a78bfa; }
    .ldrawer-tag.paid   { background: rgba(251,191,36,0.14); color: #fbbf24; }
    .ldrawer-tag.email  { background: rgba(88,166,255,0.14); color: #58a6ff; }
    .ldrawer-tag.other  { background: rgba(255,255,255,0.06); color: #8b949e; }
    .ldrawer-tag.conn   { background: rgba(88,166,255,0.14); color: #58a6ff; text-transform: uppercase; }
    /* Error section */
    .ldrawer-error {
      background: rgba(248,81,73,0.08);
      border: 1px solid rgba(248,81,73,0.3);
      border-radius: 8px;
      padding: 10px 12px;
      color: #f85149;
      font-family: 'JetBrains Mono', 'Menlo', monospace;
      font-size: 0.78rem;
      margin: 0 0 8px;
      overflow-x: auto;
      line-height: 1.5;
    }
    .ldrawer-error-loc {
      color: #8b949e; font-size: 0.72rem; margin-bottom: 8px;
      font-family: 'JetBrains Mono', 'Menlo', monospace;
    }
    /* Novos badges pros tipos de evento adicionais */
    .live-feed-badge.rage_click, .ldrawer-badge-lg.rage_click, .ldrawer-tl-badge.rage_click {
      background: rgba(248,81,73,0.18); color: #f85149;
    }
    .live-feed-badge.dead_click, .ldrawer-badge-lg.dead_click, .ldrawer-tl-badge.dead_click {
      background: rgba(148,163,184,0.18); color: #94a3b8;
    }
    .live-feed-badge.error, .ldrawer-badge-lg.error, .ldrawer-tl-badge.error {
      background: rgba(248,81,73,0.18); color: #f85149;
    }
    .live-feed-badge.copy, .ldrawer-badge-lg.copy, .ldrawer-tl-badge.copy {
      background: rgba(147,197,253,0.14); color: #93c5fd;
    }
    /* Light mode overrides */
    body.light .ldrawer-tag.direct { background: rgba(100,116,139,0.10); color: #475569; }
    body.light .ldrawer-tag.search { background: rgba(22,163,74,0.10); color: #16a34a; }
    body.light .ldrawer-tag.social { background: rgba(147,51,234,0.10); color: #9333ea; }
    body.light .ldrawer-tag.paid   { background: rgba(217,119,6,0.10);  color: #d97706; }
    body.light .ldrawer-tag.email  { background: rgba(37,99,235,0.10);  color: #1d4ed8; }
    body.light .ldrawer-tag.other  { background: #f1f5f9; color: #64748b; }
    body.light .ldrawer-tag.conn   { background: rgba(37,99,235,0.10); color: #1d4ed8; }
    body.light .ldrawer-error { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.3); color: #dc2626; }
    body.light .ldrawer-error-loc { color: #64748b; }

    /* Jornada da sessão — steps por página */
    .ldrawer-journey {
      display: flex; flex-direction: column;
      position: relative;
      padding-left: 4px;
    }
    .ldrawer-journey::before {
      content: '';
      position: absolute;
      left: 15px; top: 20px; bottom: 20px;
      width: 2px;
      background: linear-gradient(180deg, rgba(88,166,255,0.3), rgba(88,166,255,0.08));
    }
    .ldrawer-jstep {
      display: flex; gap: 12px;
      padding: 10px 12px 12px 0;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.15s;
      position: relative;
      z-index: 1;
    }
    .ldrawer-jstep:hover { background: rgba(88,166,255,0.05); }
    .ldrawer-jstep.current { background: rgba(88,166,255,0.08); }
    .ldrawer-jstep-dot {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: linear-gradient(135deg, #58a6ff, #388bfd);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.7rem; font-weight: 800;
      flex-shrink: 0;
      box-shadow: 0 0 0 3px #0a0d13, 0 2px 8px rgba(88,166,255,0.4);
      margin-top: 2px;
      z-index: 2;
    }
    .ldrawer-jstep.current .ldrawer-jstep-dot {
      background: linear-gradient(135deg, #22c55e, #16a34a);
      box-shadow: 0 0 0 3px #0a0d13, 0 0 0 5px rgba(34,197,94,0.3);
    }
    .ldrawer-jstep-body { flex: 1; min-width: 0; }
    .ldrawer-jstep-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; margin-bottom: 4px;
    }
    .ldrawer-jstep-path {
      color: #f0f0f5; font-size: 0.82rem; font-weight: 700;
      font-family: 'JetBrains Mono', 'Menlo', monospace;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      flex: 1; min-width: 0;
    }
    .ldrawer-jstep-time {
      color: #8b949e; font-size: 0.7rem;
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }
    .ldrawer-jstep-chips {
      display: flex; gap: 5px; flex-wrap: wrap;
      margin-top: 4px;
    }
    .ldrawer-jchip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px;
      background: rgba(255,255,255,0.04);
      color: #9ca3af;
      border-radius: 999px;
      font-size: 0.68rem; font-weight: 500;
    }
    .ldrawer-jchip b { color: #f0f0f5; font-weight: 800; }
    .ldrawer-jchip.severe {
      background: rgba(248,81,73,0.1);
      color: #fca5a5;
    }
    .ldrawer-jchip.severe b { color: #f85149; }
    .ldrawer-jstep-nointeract {
      color: #6b7280 !important;
      font-size: 0.72rem !important;
      font-style: italic;
      background: transparent;
      padding: 0;
    }
    .ldrawer-jstep-extras {
      color: #8b949e; font-size: 0.7rem;
      margin-top: 5px;
    }
    body.light .ldrawer-journey::before { background: linear-gradient(180deg, rgba(37,99,235,0.35), rgba(37,99,235,0.08)); }
    body.light .ldrawer-jstep:hover { background: #eff6ff; }
    body.light .ldrawer-jstep.current { background: #dbeafe; }
    body.light .ldrawer-jstep-dot { box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(37,99,235,0.4); }
    body.light .ldrawer-jstep.current .ldrawer-jstep-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(34,197,94,0.3); }
    body.light .ldrawer-jstep-path { color: #0f172a; }
    body.light .ldrawer-jstep-time { color: #64748b; }
    body.light .ldrawer-jchip { background: #f1f5f9; color: #475569; }
    body.light .ldrawer-jchip b { color: #0f172a; }
    body.light .ldrawer-jstep-extras { color: #64748b; }
    body.light .ldrawer-jstep-nointeract { color: #94a3b8 !important; }

    /* Timeline da sessão (LEGACY - mantido pra retrocompatibilidade) */
    .ldrawer-timeline { display: flex; flex-direction: column; gap: 4px; }
    .ldrawer-tl-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px; align-items: center;
      padding: 8px 10px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .ldrawer-tl-row:hover { background: rgba(88,166,255,0.06); border-color: rgba(88,166,255,0.25); }
    .ldrawer-tl-row.current { background: rgba(88,166,255,0.10); border-color: rgba(88,166,255,0.35); }
    .ldrawer-tl-badge {
      font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em;
      padding: 2px 6px; border-radius: 4px;
      text-transform: uppercase;
    }
    .ldrawer-tl-badge.pageview   { background: rgba(88,166,255,0.14); color: #58a6ff; }
    .ldrawer-tl-badge.click      { background: rgba(251,191,36,0.14); color: #fbbf24; }
    .ldrawer-tl-badge.scroll     { background: rgba(147,197,253,0.14); color: #93c5fd; }
    .ldrawer-tl-badge.engagement { background: rgba(34,197,94,0.14);  color: #22c55e; }
    .ldrawer-tl-badge.leave      { background: rgba(248,81,73,0.14);  color: #f85149; }
    .ldrawer-tl-badge.custom     { background: rgba(167,139,250,0.14); color: #a78bfa; }
    .ldrawer-tl-path {
      color: #e6edf3; font-size: 0.78rem;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ldrawer-tl-time { color: #6b7280; font-size: 0.72rem; white-space: nowrap; }

    /* Light mode drawer */
    body.light .live-drawer { background: #ffffff; border-left-color: #e5e7eb; box-shadow: -24px 0 60px -12px rgba(15,23,42,0.15); }
    body.light .ldrawer-header { border-bottom-color: #f1f5f9; }
    body.light .ldrawer-title { color: #0f172a; }
    body.light .ldrawer-when { color: #64748b; }
    body.light .ldrawer-close { background: #f8fafc; border-color: #e5e7eb; color: #475569; }
    body.light .ldrawer-close:hover { background: #f1f5f9; color: #0f172a; }
    body.light .ldrawer-section-title { color: #64748b; }
    body.light .ldrawer-url { background: #f8fafc; border-color: #e5e7eb; color: #1d4ed8; }
    body.light .ldrawer-kv-table tr { border-bottom-color: #f1f5f9; }
    body.light .ldrawer-k { color: #64748b; }
    body.light .ldrawer-v { color: #0f172a; }
    body.light .ldrawer-v.mono { color: #1d4ed8; }
    body.light .ldrawer-json { background: #0f172a; color: #93c5fd; border-color: #1e293b; }
    body.light .ldrawer-tl-row { background: #f8fafc; border-color: #e5e7eb; }
    body.light .ldrawer-tl-row:hover { background: #eff6ff; border-color: #bfdbfe; }
    body.light .ldrawer-tl-row.current { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.3); }
    body.light .ldrawer-tl-path { color: #0f172a; }
    body.light .ldrawer-tl-time { color: #64748b; }
    body.light .live-feed-path { color: #0f172a; }
    body.light .live-feed-meta { color: #64748b; }
    body.light .live-feed-time { color: #64748b; }
    body.light .live-feed-empty { color: #94a3b8; }
    body.light .live-install-card { background: #ffffff; border-color: #e5e7eb; }
    body.light .live-install-title { color: #0f172a; }
    body.light .live-install-hint { color: #64748b; }
    body.light .live-snippet { background: #0f172a; border-color: #1e293b; color: #93c5fd; }
    body.light .live-custom-section { border-top-color: #f1f5f9; }
    body.light .live-custom-title { color: #0f172a; }
    body.light .live-custom-hint { color: #64748b; }

    .dash-header { margin-bottom:22px; padding-top:8px; padding-right: 160px; /* safe zone p/ ícones fixos */ }
    @media (max-width: 700px) { .dash-header { padding-right: 100px; } }
    .dash-header h1 {
      font-size:1.65rem; font-weight:900; letter-spacing:-0.05em; color:#e6edf3; margin-bottom:4px;
    }
    .dash-header p { font-size:0.73rem; color:#6e7681; }

    /* ── Controls bar ── */
    .dash-controls-bar { display:flex; gap:6px; align-items:center; margin-bottom:22px; flex-wrap:wrap; }
    .dash-period-btn {
      padding:6px 14px; background:transparent; border:1px solid #30363d;
      border-radius:8px; color:#6e7681; font-size:0.72rem; font-weight:700;
      cursor:pointer; transition:all .17s; letter-spacing:.02em; white-space:nowrap;
    }
    .dash-period-btn:hover { border-color:#58a6ff44; color:#6b7280; background:#58a6ff08; }
    .dash-period-btn.active { background:#58a6ff; border-color:transparent; color:#fff; box-shadow:0 0 16px #58a6ff60; }
    /* Date range */
    .dash-cal-wrap { position:relative; }
    .dash-daterange-btn {
      display:flex; align-items:center; gap:7px; padding:6px 13px;
      background:transparent; border:1px solid #30363d; border-radius:8px;
      color:#6e7681; font-size:0.72rem; font-weight:600; cursor:pointer; transition:all .17s; white-space:nowrap;
    }
    .dash-daterange-btn:hover,.dash-daterange-btn.active { border-color:#58a6ff66; color:#f0f0f5; }
    .dash-daterange-btn svg { flex-shrink:0; }
    /* Refresh */
    .dash-refresh-btn {
      background:transparent; border:1px solid #30363d; border-radius:8px;
      color:#6e7681; font-size:1rem; padding:5px 11px; cursor:pointer; transition:all .17s; line-height:1.4;
    }
    .dash-refresh-btn:hover { border-color:#58a6ff55; color:#f0f0f5; }
    /* ── Filter dropdowns (Plataformas/Origem/Moeda) ─ design unificado ─ */
    .dash-plat-wrap,
    .dash-source-wrap,
    .dash-curr-wrap { position:relative; }

    .dash-plat-btn,
    .dash-source-btn-main,
    .dash-curr-btn-main {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(255,255,255,0.02);
      border:1px solid rgba(255,255,255,0.1);
      border-radius:9px;
      color:#c9d1d9;
      font-size:0.78rem; font-weight:600;
      padding:7px 13px;
      cursor:pointer; transition:all .15s;
      white-space:nowrap;
      letter-spacing:-0.005em;
      font-family:inherit;
    }
    .dash-plat-btn:hover,
    .dash-source-btn-main:hover,
    .dash-curr-btn-main:hover {
      border-color:rgba(88,166,255,0.4);
      color:#f0f0f5;
      background:rgba(88,166,255,0.06);
    }
    .dash-plat-btn.active,
    .dash-source-btn-main.active,
    .dash-curr-btn-main.active {
      background:rgba(88,166,255,0.1);
      border-color:rgba(88,166,255,0.4);
      color:#58a6ff;
    }
    .dash-source-wrap { margin-left:auto; }

    /* Dropdown menus — design consistent */
    .dash-plat-menu,
    .dash-source-menu,
    .dash-curr-menu {
      position:absolute; top:calc(100% + 6px); right:0; z-index:60;
      background:#0d1117;
      border:1px solid rgba(255,255,255,0.1);
      border-radius:11px;
      padding:5px;
      min-width:200px;
      box-shadow:0 16px 40px -12px rgba(0,0,0,0.6);
      animation:fadeDown .14s ease-out;
    }
    .dash-plat-menu { left:0; right:auto; min-width:160px; }
    .dash-curr-menu { min-width:160px; }
    @keyframes fadeDown { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
    .dash-plat-menu.hidden,
    .dash-source-menu.hidden,
    .dash-curr-menu.hidden { display:none; }

    .dash-plat-opt,
    .dash-source-opt,
    .dash-curr-opt {
      display:flex; align-items:center; gap:9px;
      padding:8px 12px;
      font-size:0.8rem; font-weight:500;
      color:#c9d1d9;
      border-radius:7px;
      cursor:pointer; transition:all 0.12s;
      white-space:nowrap;
    }
    .dash-plat-opt:hover,
    .dash-source-opt:hover,
    .dash-curr-opt:hover {
      background:rgba(88,166,255,0.08);
      color:#f0f0f5;
    }
    .dash-plat-opt.active,
    .dash-source-opt.active,
    .dash-curr-opt.active {
      background:rgba(88,166,255,0.12);
      color:#58a6ff;
      font-weight:600;
    }
    .dash-source-opt-divider {
      height:1px; background:rgba(255,255,255,0.06);
      margin:4px 8px;
    }
    .dash-source-dot {
      width:8px; height:8px; border-radius:50%;
      flex-shrink:0;
    }
    .dash-curr-opt small {
      margin-left:auto;
      color:#6b7280;
      font-size:0.7rem;
      font-weight:400;
    }
    .dash-curr-opt.active small { color:rgba(88,166,255,0.7); }

    /* Light mode */
    body.light .dash-plat-btn,
    body.light .dash-source-btn-main,
    body.light .dash-curr-btn-main {
      background:#fff; border-color:#e2e8f0; color:#475569;
    }
    body.light .dash-plat-btn.active,
    body.light .dash-source-btn-main.active,
    body.light .dash-curr-btn-main.active {
      background:rgba(88,166,255,0.08); color:#1f6feb; border-color:rgba(88,166,255,0.4);
    }
    body.light .dash-plat-menu,
    body.light .dash-source-menu,
    body.light .dash-curr-menu {
      background:#fff; border-color:#e2e8f0; box-shadow:0 16px 40px -12px rgba(0,0,0,0.15);
    }
    body.light .dash-plat-opt,
    body.light .dash-source-opt,
    body.light .dash-curr-opt { color:#475569; }
    body.light .dash-plat-opt:hover,
    body.light .dash-source-opt:hover,
    body.light .dash-curr-opt:hover { background:#f1f5f9; color:#1e293b; }
    /* Calendar dropdown */
    .dash-calendar {
      position:absolute; top:calc(100% + 8px); left:0; z-index:500;
      background:#0d1117; border:1px solid #30363d; border-radius:16px;
      padding:20px 24px 16px; box-shadow:0 24px 80px #000d;
      display:flex; flex-direction:column; gap:16px; min-width:580px;
    }
    .dash-calendar.hidden { display:none; }
    .dash-cal-panels { display:flex; gap:28px; }
    .dash-cal-panel { flex:1; }
    .dash-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
    .dash-cal-nav-btn {
      background:none; border:1px solid #30363d; color:#8b949e;
      cursor:pointer; padding:3px 10px; border-radius:7px; font-size:15px; transition:all .15s; line-height:1.4;
    }
    .dash-cal-nav-btn:hover { color:#fff; border-color:#58a6ff55; }
    .dash-cal-month { font-size:13px; font-weight:700; color:#e6edf3; letter-spacing:.02em; }
    .dash-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
    .dash-cal-dow { text-align:center; font-size:10px; color:#6e7681; padding:6px 0; font-weight:600; text-transform:uppercase; }
    .dash-cal-day {
      text-align:center; padding:7px 2px; font-size:12px; color:#8b949e;
      cursor:pointer; border-radius:7px; transition:background .12s,color .12s; user-select:none; line-height:1;
    }
    .dash-cal-day:hover:not(.empty) { background:#30363d; color:#fff; }
    .dash-cal-day.empty { pointer-events:none; }
    .dash-cal-day.today { color:#f0f0f5; font-weight:800; }
    .dash-cal-day.selected { background:#58a6ff !important; color:#fff !important; border-radius:7px; }
    .dash-cal-day.range-start { background:#58a6ff !important; color:#fff !important; border-radius:7px 0 0 7px; }
    .dash-cal-day.range-end   { background:#58a6ff !important; color:#fff !important; border-radius:0 7px 7px 0; }
    .dash-cal-day.in-range    { background:#58a6ff1a; color:#f0f0f5; border-radius:0; }
    .dash-cal-footer { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid #30363d; gap:12px; flex-wrap:wrap; }
    .dash-cal-hint { font-size:12px; color:#8b949e; flex:1; }
    .dash-cal-apply {
      padding:8px 22px; background:#58a6ff;
      border:none; border-radius:8px; color:#fff; font-size:12px; font-weight:700; cursor:pointer; transition:opacity .15s;
    }
    .dash-cal-apply:hover { opacity:.88; }
    .dash-cal-divider { width:1px; background:#30363d; align-self:stretch; }
    .dash-cal-time-row { display:flex; gap:20px; padding:12px 0 4px; border-top:1px solid #30363d; }
    .dash-cal-time-group { display:flex; flex-direction:column; gap:5px; }
    .dash-cal-time-label { font-size:10px; color:#8b949e; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
    .dash-cal-time-input {
      background:#0d1117; border:1px solid #30363d; border-radius:8px;
      color:#e6edf3; font-size:13px; padding:6px 10px; outline:none; cursor:pointer; font-family:inherit;
    }
    .dash-cal-time-input:focus { border-color:#58a6ff66; }

    /* ══ METRIC CARDS ══ */
    .dash-cards {
      display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px;
    }
    @media (min-width:700px)  { .dash-cards { grid-template-columns:repeat(3,1fr); } }
    @media (min-width:1200px) { .dash-cards { grid-template-columns:repeat(6,1fr); } }

    .dash-card {
      background:#161b22; border:1px solid #30363d; border-radius:14px;
      padding:18px 16px 15px; position:relative; overflow:hidden;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      /* no anim */
    }
    .dash-card:nth-child(1){animation-delay:.04s}
    .dash-card:nth-child(2){animation-delay:.08s}
    .dash-card:nth-child(3){animation-delay:.12s}
    .dash-card:nth-child(4){animation-delay:.16s}
    .dash-card:nth-child(5){animation-delay:.20s}
    .dash-card:nth-child(6){animation-delay:.24s}
    /* accent stripe */
    .dash-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background:var(--ca, #f0f0f5);
    }
    /* ambient orb */
    .dash-card::after {
      content:''; position:absolute; top:-24px; right:-24px;
      width:90px; height:90px; border-radius:50%;
      background:radial-gradient(circle, var(--co,#58a6ff1a) 0%, transparent 70%);
      pointer-events:none; animation:orbPulse 4s ease-in-out infinite;
    }
    .dash-card:hover {
      transform:translateY(-5px);
      border-color:var(--cb,#58a6ff33);
      box-shadow:var(--cg,0 14px 40px #58a6ff1a), 0 4px 20px #00000045;
    }
    /* Color tokens */
    .dash-card.c-green  { --ca:linear-gradient(90deg,#3fb950,#059669); --co:#3fb95020; --cb:#3fb95033; --cg:0 14px 40px #3fb95018; --ci:#3fb95018; --cib:#3fb95030; --cic:#3fb950; }
    .dash-card.c-amber  { --ca:linear-gradient(90deg,#f59e0b,#d97706); --co:#f59e0b1a; --cb:#f59e0b33; --cg:0 14px 40px #f59e0b18; --ci:#f59e0b18; --cib:#f59e0b30; --cic:#f59e0b; }
    .dash-card.c-purple { --ca:#f0f0f5; --co:#58a6ff20; --cb:#58a6ff33; --cg:0 14px 40px #58a6ff18; --ci:#58a6ff18; --cib:#58a6ff30; --cic:#f0f0f5; }
    .dash-card.c-teal   { --ca:linear-gradient(90deg,#14b8a6,#0d9488); --co:#14b8a620; --cb:#14b8a633; --cg:0 14px 40px #14b8a618; --ci:#14b8a618; --cib:#14b8a630; --cic:#2dd4bf; }
    .dash-card.c-orange { --ca:linear-gradient(90deg,#f97316,#ea580c); --co:#f9731620; --cb:#f9731633; --cg:0 14px 40px #f9731618; --ci:#f9731618; --cib:#f9731630; --cic:#fb923c; }
    .dash-card.c-blue   { --ca:linear-gradient(90deg,#3b82f6,#2563eb); --co:#3b82f620; --cb:#3b82f633; --cg:0 14px 40px #3b82f618; --ci:#3b82f618; --cib:#3b82f630; --cic:#60a5fa; }
    .dash-card.c-red    { --ca:linear-gradient(90deg,#f85149,#dc2626); --co:#f8514920; --cb:#f8514933; --cg:0 14px 40px #f8514918; --ci:#f8514918; --cib:#f8514930; --cic:#f87171; }
    .dash-card.c-emerald{ --ca:linear-gradient(90deg,#10b981,#059669); --co:#10b98120; --cb:#10b98133; --cg:0 14px 40px #10b98118; --ci:#10b98118; --cib:#10b98130; --cic:#34d399; }
    .dash-card.c-sky    { --ca:linear-gradient(90deg,#0ea5e9,#0284c7); --co:#0ea5e920; --cb:#0ea5e933; --cg:0 14px 40px #0ea5e918; --ci:#0ea5e918; --cib:#0ea5e930; --cic:#38bdf8; }
    .dash-card.c-indigo { --ca:linear-gradient(90deg,#6366f1,#4f46e5); --co:#6366f120; --cb:#6366f133; --cg:0 14px 40px #6366f118; --ci:#6366f118; --cib:#6366f130; --cic:#818cf8; }
    .dash-card.c-pink   { --ca:linear-gradient(90deg,#ec4899,#db2777); --co:#ec489920; --cb:#ec489933; --cg:0 14px 40px #ec489918; --ci:#ec489918; --cib:#ec489930; --cic:#f472b6; }
    .dash-card.c-cyan   { --ca:linear-gradient(90deg,#06b6d4,#0891b2); --co:#06b6d420; --cb:#06b6d433; --cg:0 14px 40px #06b6d418; --ci:#06b6d418; --cib:#06b6d430; --cic:#22d3ee; }
    .dash-card.c-violet { --ca:linear-gradient(90deg,#8b5cf6,#7c3aed); --co:#8b5cf620; --cb:#8b5cf633; --cg:0 14px 40px #8b5cf618; --ci:#8b5cf618; --cib:#8b5cf630; --cic:#a78bfa; }
    .dash-card.c-rose   { --ca:linear-gradient(90deg,#fb7185,#e11d48); --co:#fb718520; --cb:#fb718533; --cg:0 14px 40px #fb718518; --ci:#fb718518; --cib:#fb718530; --cic:#fb7185; }

    /* ── Personalização do dashboard (modo edição) ─────────────────── */
    .dash-customize-btn.editing { border-color:#58a6ff66; color:#58a6ff; box-shadow:0 0 0 3px #58a6ff1a; }
    .dash-edit-bar.hidden { display:none; }
    .dash-edit-bar {
      background:linear-gradient(180deg,#161b22,#12161d); border:1px solid #58a6ff33;
      border-radius:14px; padding:14px 16px; margin-bottom:14px;
      box-shadow:0 8px 30px #58a6ff0d;
    }
    .dash-edit-bar-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .dash-edit-info { display:flex; align-items:center; gap:8px; color:#8b949e; font-size:0.76rem; }
    .dash-edit-info svg { color:#58a6ff; flex-shrink:0; }
    .dash-edit-actions { display:flex; gap:8px; }
    .dash-edit-btn {
      border-radius:8px; padding:7px 16px; font-size:0.74rem; font-weight:600;
      cursor:pointer; transition:all .18s ease; border:1px solid #30363d;
      background:transparent; color:#c9d1d9; font-family:inherit;
    }
    .dash-edit-btn.ghost:hover { border-color:#8b949e; color:#f0f0f5; }
    .dash-edit-btn.primary {
      background:linear-gradient(135deg,#238636,#2ea043); border-color:transparent; color:#fff;
    }
    .dash-edit-btn.primary:hover { filter:brightness(1.12); box-shadow:0 4px 14px #2ea04340; }
    .dash-edit-group { margin-top:12px; }
    .dash-edit-group-title {
      font-size:0.64rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
      color:#6e7681; margin-bottom:7px;
    }
    .dash-edit-chips { display:flex; flex-wrap:wrap; gap:7px; }
    .dash-edit-chip {
      display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
      border-radius:999px; border:1px dashed #30363d; background:#0d1117;
      color:#8b949e; font-size:0.72rem; font-weight:600; cursor:pointer;
      transition:all .16s ease; user-select:none;
    }
    .dash-edit-chip:hover { border-color:#58a6ff66; color:#58a6ff; transform:translateY(-1px); }
    .dash-edit-chip svg { flex-shrink:0; }
    .dash-edit-chip.sec-on {
      border-style:solid; border-color:#2ea04355; color:#3fb950; background:#2ea0430d;
    }
    .dash-edit-chip.sec-on:hover { border-color:#3fb950; color:#3fb950; }
    /* Grade livre (GridStack) — cards CLEAN estilo SaaS: flat, sem chip/listra/orb,
       label discreto + (i), valor grande; cor SÓ onde tem significado (lucro/roi/margem) */
    .dash-grid { margin:0 -8px 8px; }
    .dash-grid .grid-stack-item-content { overflow:visible !important; }
    .dash-grid .dash-card {
      height:100%; display:flex; flex-direction:column; justify-content:flex-start;
      padding:15px 17px 13px; background:#161b22; border:1px solid #21262d;
      border-radius:12px; box-shadow:0 3px 16px #00000028;
    }
    .dash-grid .dash-card::before, .dash-grid .dash-card::after { display:none; }
    .dash-grid .dash-card:hover { transform:none; border-color:#30363d; box-shadow:0 6px 24px #00000038; }
    .dcard-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; gap:8px; }
    .dcard-label {
      font-size:0.78rem; font-weight:500; color:#98a1ad; letter-spacing:0.01em;
      text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .dcard-info { color:#3f4854; display:inline-flex; cursor:help; flex-shrink:0; transition:color .15s ease; }
    .dcard-info:hover { color:#8b949e; }
    /* Seções dentro da grade: preenchem o widget, com scroll interno e
       gráfico esticando junto quando o usuário redimensiona */
    .dash-grid .dsec-content { overflow:hidden !important; position:relative; }
    .dash-grid .dsec-content > .dash-chart-box,
    .dash-grid .dsec-content > .dash-conv-box,
    .dash-grid .dsec-content > .dash-top-box,
    .dash-grid .dsec-content > .dash-recent-wrap { height:100%; margin:0; }
    .dash-grid .dsec-content > .dash-top-box { overflow:auto; }
    /* donut ADAPTA ao tamanho do widget: título em cima, rosca preenchendo o
       meio (Chart.js redimensiona sozinho), legenda embaixo — sem vazio feio */
    .dash-grid .dsec-content > .dash-conv-box { display:flex; flex-direction:column; overflow:hidden; }
    .dash-grid .dsec-content .dash-conv-donut-wrap { flex:1 1 auto; min-height:0; height:auto; }
    .dash-grid .dsec-content .dash-conv-legend { flex-shrink:0; padding-top:10px; }
    .dash-grid .dsec-content > .dash-chart-box { display:flex; flex-direction:column; overflow:hidden; }
    .dash-grid .dsec-content .dash-chart-canvas-wrap { height:auto; flex:1 1 0; min-height:120px; }
    .dash-grid .dsec-content > .dash-recent-wrap { overflow:hidden; }
    .dash-grid .dsec-content .dash-recent-scroll { flex:1; min-height:0; max-height:none; overflow:auto; }
    .dash-grid.editing .dsec-content { cursor:grab; }
    .dash-grid .dsec-content .dash-card-x { top:9px; right:9px; }
    /* valor não pode quebrar linha, encolher nem estourar o card (fonte auto-ajusta via JS) */
    .dash-grid .dash-card-value {
      white-space:nowrap; overflow:hidden; margin-bottom:3px; flex-shrink:0;
      font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; color:#e6edf3;
    }
    .dash-grid .dash-card-value.pos { color:#3fb950; }
    .dash-grid .dash-card-value.neg { color:#f85149; }
    .dcard-sub { font-size:0.69rem; color:#6e7681; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:0; }
    body.light .dash-grid .dash-card { background:#fff; border-color:#e2e8f0; box-shadow:0 2px 10px #0f172a0a; }
    body.light .dash-grid .dash-card:hover { border-color:#cbd5e1; box-shadow:0 6px 20px #0f172a12; }
    body.light .dcard-label { color:#64748b; }
    body.light .dcard-info { color:#cbd5e1; }
    body.light .dcard-info:hover { color:#64748b; }
    body.light .dash-grid .dash-card-value { color:#0f172a; }
    body.light .dash-grid .dash-card-value.pos { color:#16a34a; }
    body.light .dash-grid .dash-card-value.neg { color:#dc2626; }
    /* Cards no modo edição */
    .dash-grid.editing .dash-card { cursor:grab; border-style:dashed; border-color:#58a6ff44; }
    .dash-grid.editing .dash-card:active { cursor:grabbing; }
    .dash-grid.editing .dash-card:hover { transform:none; }
    .dash-grid .grid-stack-placeholder > .placeholder-content {
      background:#58a6ff14; border:1.5px dashed #58a6ff55; border-radius:14px;
    }
    .dash-grid .ui-resizable-se { z-index:4; }
    .dash-card.dragging { opacity:0.35; border-color:#58a6ff; }
    .dash-card-x {
      position:absolute; top:7px; right:7px; z-index:3;
      width:22px; height:22px; border-radius:7px; border:1px solid #30363d;
      background:#0d1117e6; color:#8b949e; cursor:pointer; display:none;
      align-items:center; justify-content:center; transition:all .15s ease; padding:0;
    }
    /* ✕ só aparece no modo edição (sem precisar reconstruir a grade) */
    .dash-grid.editing .dash-card-x { display:flex; }
    /* animações ao vivo: card novo "pousa", card removido encolhe */
    @keyframes dcardIn { from { opacity:0; transform:scale(.9) translateY(8px); } to { opacity:1; transform:none; } }
    .dash-grid .grid-stack-item.dcard-in .dash-card { animation:dcardIn .3s cubic-bezier(.2,.7,.3,1); }
    .dash-grid .grid-stack-item.dcard-out .dash-card { transition:opacity .17s ease, transform .17s ease; opacity:0; transform:scale(.88); }
    @media (prefers-reduced-motion:reduce) {
      .dash-grid .grid-stack-item.dcard-in .dash-card { animation:none; }
    }
    .dash-card-x:hover { border-color:#f8514966; color:#f85149; background:#f851490d; }
    body.light .dash-edit-bar { background:#fff; border-color:#2563eb2e; box-shadow:0 8px 30px #2563eb0f; }
    body.light .dash-edit-chip { background:#f8fafc; border-color:#e2e8f0; color:#64748b; }
    body.light .dash-edit-chip:hover { border-color:#2563eb66; color:#2563eb; }
    body.light .dash-edit-chip.sec-on { border-color:#16a34a55; color:#16a34a; background:#16a34a0a; }
    body.light .dash-card-x { background:#ffffffe6; border-color:#e2e8f0; color:#64748b; }
    body.light .dash-grid.editing .dash-card { border-color:#2563eb44; }

    .dash-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
    .dash-card-icon {
      width:34px; height:34px; border-radius:10px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      background:var(--ci,#58a6ff18); border:1px solid var(--cib,#58a6ff28); color:var(--cic,#f0f0f5);
    }
    .dash-card-icon svg { width:16px; height:16px; }
    .dash-card-label { font-size:0.64rem; color:#6e7681; font-weight:700; text-transform:uppercase; letter-spacing:.09em; line-height:1.4; }
    .dcard-tag { margin-left:7px; font-size:0.62rem; font-weight:800; color:#8b949e; background:#6b728015; border:1px solid #6b728030; padding:1px 7px; border-radius:9px; letter-spacing:0; vertical-align:1px; }
    .dcard-tag:empty { display:none; }
    .dash-card-value {
      font-size:1.8rem; font-weight:900; color:#e6edf3; line-height:1.05;
      letter-spacing:-0.04em; font-variant-numeric:tabular-nums; margin-bottom:8px;
    }
    .dash-card-delta { font-size:0.67rem; font-weight:700; display:inline-flex; align-items:center; gap:3px; }
    .dash-card-delta.up   { color:#3fb950; }
    .dash-card-delta.down { color:#ef4444; }
    .dash-card-delta.neu  { color:#6e7681; }

    /* ── Main grid ── */
    /* align-items:start → o gráfico NÃO estica pra acompanhar o painel direito
       (com seções extras ligadas o box do gráfico ficava com um vazio enorme) */
    .dash-main-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px; align-items:start; }
    @media (min-width:900px) { .dash-main-grid { grid-template-columns:63% 1fr; } }

    /* ── Chart box ── */
    .dash-chart-box {
      background:#161b22; border:1px solid #30363d; border-radius:16px;
      padding:20px; position:relative; overflow:hidden;
    }
    .dash-chart-box::before {
      content:''; position:absolute; top:0; left:0; right:0; height:1px;
      background:linear-gradient(90deg,transparent,#58a6ff55 40%,#58a6ff55 60%,transparent);
    }
    .dash-chart-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
    .dash-chart-info .dash-chart-title { font-size:0.82rem; font-weight:800; color:#e6edf3; margin-bottom:2px; }
    .dash-chart-info .dash-chart-sub   { font-size:0.67rem; color:#6e7681; }
    .dash-chart-controls { display:flex; align-items:center; gap:12px; }
    .dash-chart-legend { display:flex; gap:14px; align-items:center; }
    .dash-chart-legend-item { display:flex; align-items:center; gap:5px; font-size:0.67rem; color:#8b949e; font-weight:600; }
    .dash-legend-toggle { cursor:pointer; padding:3px 8px; border-radius:6px; transition:all 0.15s; user-select:none; }
    .dash-legend-toggle:hover { background:rgba(255,255,255,0.05); }
    .dash-legend-toggle:not(.active) { opacity:0.35; }
    .dash-legend-toggle:not(.active) .dash-chart-legend-dot { background:#555 !important; }
    .dash-chart-legend-dot { width:7px; height:7px; border-radius:50%; }
    .dash-chart-type-btns { display:flex; gap:4px; flex-shrink:0; }
    .dash-chart-type-btn {
      width:28px; height:28px; border-radius:7px; background:transparent;
      border:1px solid #30363d; color:#6e7681; cursor:pointer;
      display:flex; align-items:center; justify-content:center; transition:all .17s;
    }
    .dash-chart-type-btn:hover { border-color:#58a6ff44; color:#f0f0f5; }
    .dash-chart-type-btn.active { background:#58a6ff22; border-color:#58a6ff55; color:#f0f0f5; }
    .dash-chart-canvas-wrap { position:relative; height:240px; }

    /* ── Right panel ── */
    .dash-right-panel { display:flex; flex-direction:column; gap:12px; }

    /* ── Donut box ── */
    .dash-conv-box { background:#161b22; border:1px solid #30363d; border-radius:16px; padding:18px; }
    .dash-conv-title { font-size:0.64rem; color:#6e7681; font-weight:700; text-transform:uppercase; letter-spacing:.09em; margin-bottom:12px; }
    .dash-conv-donut-wrap { position:relative; height:120px; margin-bottom:10px; }
    .dash-conv-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }
    .dash-conv-pct { font-size:1.45rem; font-weight:900; color:#e6edf3; line-height:1; letter-spacing:-0.03em; }
    .dash-conv-label { font-size:0.54rem; color:#6e7681; text-transform:uppercase; letter-spacing:.1em; margin-top:3px; }
    .dash-conv-legend { display:flex; justify-content:center; gap:14px; font-size:0.65rem; color:#6e7681; }
    .dash-conv-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; vertical-align:middle; }

    /* ── Top list box ── */
    .dash-top-box { background:#161b22; border:1px solid #30363d; border-radius:16px; padding:18px; }
    .dash-top-title { font-size:0.64rem; color:#6e7681; font-weight:700; text-transform:uppercase; letter-spacing:.09em; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
    .dash-top-row { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; margin-bottom:2px; transition:background .14s; cursor:default; }
    .dash-top-row:hover { background:#161b22; }
    .dash-top-rank { width:20px; height:20px; border-radius:5px; color:#6e7681; font-size:0.62rem; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#0d1117; border:1px solid #30363d; }
    .dash-top-rank.r1 { color:#fbbf24; background:#fbbf2410; border-color:#fbbf2425; }
    .dash-top-rank.r2 { color:#94a3b8; background:#94a3b810; border-color:#94a3b825; }
    .dash-top-rank.r3 { color:#f97316; background:#f9731610; border-color:#f9731625; }
    .dash-top-avatar { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:800; color:#fff; }
    .dash-top-info { flex:1; min-width:0; }
    .dash-top-name { font-size:0.76rem; color:#e6edf3; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dash-top-sub  { font-size:0.61rem; color:#6e7681; margin-top:1px; }
    .dash-top-val  { font-size:0.76rem; font-weight:800; color:#3fb950; flex-shrink:0; }

    /* ── Recent activity table ── */
    .dash-recent-wrap { background:#161b22; border:1px solid #30363d; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
    .dash-recent-header { padding:16px 20px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #30363d; flex-shrink:0; }
    .dash-recent-title { font-size:0.82rem; font-weight:800; color:#e6edf3; }
    .dash-recent-sub   { font-size:0.66rem; color:#6e7681; margin-top:2px; }
    .dash-recent-limit-wrap { position:relative; }
    .dash-recent-count { font-size:0.66rem; color:#f0f0f5; background:#58a6ff18; border:1px solid #58a6ff2e; border-radius:20px; padding:4px 14px; font-weight:700; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
    .dash-recent-count:hover { background:#58a6ff28; border-color:#58a6ff50; }
    .dash-recent-limit-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:50; background:#0d1117; border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:4px; min-width:140px; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
    .dash-recent-limit-menu.hidden { display:none; }
    .dash-recent-limit-opt { padding:8px 14px; font-size:0.72rem; color:#94a3b8; font-weight:600; border-radius:7px; cursor:pointer; transition:all 0.12s; white-space:nowrap; }
    .dash-recent-limit-opt:hover { background:rgba(255,255,255,0.1); color:#f0f0f5; }
    .dash-recent-limit-opt.active { color:#f0f0f5; background:rgba(255,255,255,0.12); }
    /* ── Filtros Atividade Recente ── */
    .dash-recent-filters { display:flex; align-items:center; gap:8px; padding:10px 20px; border-bottom:1px solid #30363d; flex-shrink:0; }
    .dash-recent-search-wrap { position:relative; flex:1; }
    .dash-recent-search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#64748b; pointer-events:none; }
    input[type="text"].dash-recent-search { width:100%; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:9px 12px 9px 42px; color:#e2e8f0; font-size:0.75rem; outline:none; box-sizing:border-box; transition:border-color 0.15s; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:normal; }
    input[type="text"].dash-recent-search:focus { border-color:rgba(255,255,255,0.4); }
    input[type="text"].dash-recent-search::placeholder { color:#94a3b8; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
    .dash-recent-select { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:7px 12px; color:#94a3b8; font-size:0.73rem; font-weight:600; outline:none; cursor:pointer; appearance:auto; min-width:140px; }
    .dash-recent-status-wrap { position:relative; }
    .dash-recent-filter-wrap { position:relative; }
    .dash-recent-filter-btn { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:7px 14px; color:#94a3b8; font-size:0.73rem; font-weight:600; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
    .dash-recent-filter-btn:hover { border-color:rgba(255,255,255,0.3); color:#f0f0f5; }
    .dash-recent-filter-btn.active { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.3); color:#f0f0f5; }
    .dash-recent-adv-filters { position:absolute; top:calc(100% + 6px); right:0; z-index:50; width:320px; background:#0d1117; border:1px solid rgba(255,255,255,0.15); border-radius:14px; padding:16px; box-shadow:0 12px 40px rgba(0,0,0,0.5); display:flex; flex-direction:column; gap:10px; }
    .dash-recent-adv-filters.hidden { display:none; }
    .dash-recent-adv-title { font-size:0.78rem; font-weight:700; color:#e6edf3; margin-bottom:2px; }
    .dash-recent-adv-row { display:flex; gap:8px; }
    .dash-recent-adv-field { flex:1; }
    .dash-recent-adv-label { font-size:0.62rem; font-weight:700; color:#4b5563; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:3px; display:block; }
    .dash-recent-adv-input { width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:8px 10px; color:#e2e8f0; font-size:0.75rem; outline:none; box-sizing:border-box; }
    .dash-recent-adv-input:focus { border-color:rgba(255,255,255,0.4); }
    .dash-recent-adv-input::placeholder { color:#334155; }
    .dash-recent-apply-btn { width:100%; padding:10px; border:none; border-radius:10px; background:#58a6ff; color:#fff; font-size:0.78rem; font-weight:700; cursor:pointer; margin-top:4px; transition:opacity 0.15s; }
    .dash-recent-apply-btn:hover { opacity:0.9; }

    .dash-recent-scroll { overflow-x:auto; overflow-y:auto; max-height:500px; flex:1; }
    .dash-recent-scroll::-webkit-scrollbar { width:4px; height:4px; }
    .dash-recent-scroll::-webkit-scrollbar-track { background:transparent; }
    .dash-recent-scroll::-webkit-scrollbar-thumb { background:#1e293b; border-radius:4px; }
    .dash-recent-table { width:100%; border-collapse:collapse; font-size:0.74rem; min-width:900px; }
    .dash-recent-table thead { position:sticky; top:0; z-index:2; }
    .dash-recent-table th { padding:9px 14px; text-align:left; color:#8b949e; font-weight:700; font-size:0.61rem; text-transform:uppercase; letter-spacing:.09em; border-bottom:1px solid #30363d; white-space:nowrap; background:#0d1117; }
    .dash-recent-table td { padding:12px 14px; border-bottom:1px solid #161b22; color:#e6edf3; vertical-align:middle; white-space:nowrap; font-size:0.78rem; }
    .dash-recent-table tbody tr { transition:background .12s; }
    .dash-recent-table tbody tr:hover td { background:#161b22; }
    .dash-recent-table tr:last-child td { border-bottom:none; }

    /* Status pills */
    .dash-status-pago {
      display:inline-flex; align-items:center; gap:5px;
      background:#3fb95012; color:#3fb950; border:1px solid #3fb95026;
      border-radius:20px; padding:3px 10px; font-size:0.64rem; font-weight:800; letter-spacing:.02em;
    }
    .dash-status-pago::before  { content:''; width:5px; height:5px; border-radius:50%; background:#3fb950; box-shadow:0 0 5px #3fb950; }
    .dash-status-gerado {
      display:inline-flex; align-items:center; gap:5px;
      background:#f59e0b12; color:#f59e0b; border:1px solid #f59e0b26;
      border-radius:20px; padding:3px 10px; font-size:0.64rem; font-weight:800; letter-spacing:.02em;
    }
    .dash-status-gerado::before { content:''; width:5px; height:5px; border-radius:50%; background:#f59e0b; box-shadow:0 0 5px #f59e0b; }
    /* Venda que voltou: reembolso (azul) e chargeback (vermelho) — a linha fica, o selo troca */
    .dash-status-reembolso, .dash-status-chargeback {
      display:inline-flex; align-items:center; gap:5px; cursor:help;
      border-radius:20px; padding:3px 10px; font-size:0.64rem; font-weight:800; letter-spacing:.02em;
    }
    .dash-status-reembolso  { background:#58a6ff12; color:#58a6ff; border:1px solid #58a6ff26; }
    .dash-status-chargeback { background:#f8514912; color:#f85149; border:1px solid #f8514926; }
    .dash-val-red { color:#f85149 !important; font-weight:700; }
    .dash-status-reembolso:hover, .dash-status-chargeback:hover { filter:brightness(1.25); }
    /* Cartão da linha do tempo do estorno (abre no clique do selo) */
    #bmEstornoPop { position:absolute; z-index:9999; min-width:260px; max-width:340px; background:#161b22; border:1px solid #30363d; border-radius:12px; padding:12px 14px 12px; box-shadow:0 12px 32px rgba(0,0,0,.45); font-size:0.78rem; color:#e6edf3; animation:bepIn .12s ease-out; }
    @keyframes bepIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
    #bmEstornoPop .bep-t { font-weight:800; font-size:0.8rem; padding-right:22px; }
    #bmEstornoPop .bep-s { color:#8b949e; font-size:0.7rem; margin-top:2px; }
    #bmEstornoPop .bep-l { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
    #bmEstornoPop .bep-i { display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
    #bmEstornoPop .bep-d { width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 6px currentColor; }
    #bmEstornoPop .bep-x { position:absolute; top:6px; right:8px; border:none; background:none; color:#8b949e; font-size:1.05rem; cursor:pointer; line-height:1; }
    #bmEstornoPop .bep-x:hover { color:#e6edf3; }
    body.light #bmEstornoPop { background:#fff; border-color:#e2e8f0; color:#0f172a; box-shadow:0 12px 32px rgba(15,23,42,.18); }

    .dash-val-green { color:#3fb950 !important; font-weight:700; }

    /* ── Aba Relatórios (integração BeepMi) ── */
    .rel-card { background:#0d1117; border:1px solid #21262d; border-radius:16px; padding:20px 22px; margin-bottom:16px; transition:border-color .2s, box-shadow .2s; }
    .rel-card:hover { border-color:#30363d; }
    .rel-pills { display:inline-flex; background:#0d1117; border:1px solid #21262d; border-radius:11px; padding:3px; gap:2px; }
    .rel-pill { background:transparent; border:none; color:#8b949e; font-size:12px; font-weight:600; padding:6px 13px; border-radius:8px; cursor:pointer; transition:all .15s; white-space:nowrap; }
    .rel-pill:hover { color:#e6edf3; background:#161b22; }
    .rel-pill.on { background:#1f6feb; color:#fff; box-shadow:0 2px 8px #1f6feb44; }
    .rel-refresh { width:34px; height:34px; border-radius:9px; background:#0d1117; border:1px solid #21262d; color:#8b949e; font-size:15px; cursor:pointer; transition:all .15s; }
    .rel-refresh:hover { color:#e6edf3; border-color:#30363d; transform:rotate(90deg); }
    /* ── Campanhas (drill-down profissional) ─────────────────────── */
    .cmp-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
    .cmp-tabs { display:flex; gap:2px; background:#0d1117; border:1px solid #21262d; border-radius:10px; padding:3px; }
    .cmp-tab { background:transparent; border:none; color:#8b949e; font-size:12px; font-weight:600; padding:6px 14px; border-radius:8px; cursor:pointer; transition:all .15s; white-space:nowrap; }
    .cmp-tab:hover { color:#e6edf3; }
    .cmp-tab.on { background:#1c2530; color:#e6edf3; box-shadow:0 1px 3px rgba(0,0,0,.3); }
    .cmp-search { background:#0d1117; border:1px solid #21262d; border-radius:10px; padding:7px 12px 7px 30px; color:#e6edf3; font-size:12px; width:190px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2.5"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>'); background-repeat:no-repeat; background-position:10px center; }
    .cmp-search:focus { outline:none; border-color:#58a6ff55; }
    .cmp-date { background:#0d1117; border:1px solid #21262d; border-radius:10px; padding:6px 10px; color:#e6edf3; font-size:12px; color-scheme:dark; font-family:inherit; cursor:pointer; }
    .cmp-date:hover { border-color:#30363d; }
    .cmp-crumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
    .cmp-crumb { display:inline-flex; align-items:center; gap:7px; background:#58a6ff14; border:1px solid #58a6ff33; color:#79b8ff; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:20px; }
    .cmp-crumb b { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cmp-crumb .x { cursor:pointer; opacity:.7; font-weight:800; } .cmp-crumb .x:hover { opacity:1; }
    .cmp-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; margin:0 0 14px; }
    .cmp-kpi { background:#0d1117; border:1px solid #1c2128; border-radius:12px; padding:10px 12px; }
    .cmp-kpi .l { color:#6b7280; font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin-bottom:4px; }
    .cmp-kpi .v { color:#e6edf3; font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
    .cmp-table-wrap { background:#0d1117; border:1px solid #1c2128; border-radius:14px; overflow:auto; }
    .cmp-table { width:100%; border-collapse:collapse; font-size:12.5px; min-width:980px; }
    .cmp-table thead th { position:sticky; top:0; background:#10151c; color:#6b7280; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:10px 12px; text-align:right; white-space:nowrap; cursor:pointer; user-select:none; border-bottom:1px solid #1c2128; z-index:1; }
    .cmp-table thead th:first-child { text-align:left; }
    .cmp-table thead th:hover { color:#8b949e; }
    .cmp-table thead th.sorted { color:#58a6ff; }
    .cmp-table tbody td { padding:9px 12px; text-align:right; color:#c9d1d9; font-variant-numeric:tabular-nums; white-space:nowrap; border-bottom:1px solid #161b22; }
    .cmp-table tbody td:first-child { text-align:left; }
    .cmp-table tbody tr:hover td { background:#11161d; }
    .cmp-table tbody tr.clickable { cursor:pointer; }
    .cmp-table tbody tr.hour-row td { background:#0a0e13; color:#8b949e; font-size:11.5px; padding:6px 12px; }
    .cmp-table tfoot td { padding:11px 12px; text-align:right; color:#e6edf3; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; background:#10151c; border-top:2px solid #21262d; }
    .cmp-table tfoot td:first-child { text-align:left; }
    .cmp-name { font-weight:700; color:#e6edf3; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cmp-sub { color:#6b7280; font-size:10.5px; margin-top:1px; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cmp-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 9px; border-radius:20px; text-transform:lowercase; }
    .cmp-badge.ok { background:#3fb95018; color:#3fb950; border:1px solid #3fb95033; }
    .cmp-badge.warn { background:#f59e0b18; color:#f59e0b; border:1px solid #f59e0b33; }
    .cmp-badge.off { background:#6b728018; color:#8b949e; border:1px solid #6b728033; }
    .cmp-empty { color:#6b7280; font-size:12.5px; text-align:center; padding:36px 16px; }
    .cmp-note { color:#6b7280; font-size:11px; margin-top:10px; }
    body.light .cmp-tabs, body.light .cmp-search, body.light .cmp-date { background:#f8fafc; border-color:#e2e8f0; color:#334155; }
    body.light .cmp-tab { color:#64748b; } body.light .cmp-tab.on { background:#fff; color:#0f172a; }
    body.light .cmp-kpi, body.light .cmp-table-wrap { background:#fff; border-color:#e2e8f0; }
    body.light .cmp-kpi .v, body.light .cmp-name { color:#0f172a; }
    body.light .cmp-table thead th, body.light .cmp-table tfoot td { background:#f8fafc; }
    body.light .cmp-table tbody td { color:#334155; border-bottom-color:#f1f5f9; }
    body.light .cmp-table tbody tr:hover td { background:#f8fafc; }
    body.light .cmp-table tbody tr.hour-row td { background:#fbfcfe; color:#64748b; }
    /* barra fechada (drill é opt-in) + pills com logo + mostrar mais */
    .cmp-cta { display:flex; align-items:center; justify-content:space-between; gap:14px; background:#0d1117; border:1px solid #1c2128; border-radius:14px; padding:16px 18px; cursor:pointer; transition:border-color .15s; }
    .cmp-cta:hover { border-color:#30363d; }
    .cmp-cta-title { font-weight:800; font-size:14px; color:#e6edf3; }
    .cmp-cta-sub { color:#6b7280; font-size:11.5px; margin-top:2px; }
    .cmp-cta-logos { display:flex; align-items:center; gap:6px; }
    .cmp-cta-open { color:#58a6ff; font-size:12.5px; font-weight:700; white-space:nowrap; }
    .cmp-plat-logo { width:26px; height:26px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
    .cmp-plat-logo img { width:16px; height:16px; object-fit:contain; filter:brightness(0) invert(1); }
    .cmp-plat-logo.wide img { width:22px; height:auto; }
    .cmp-pill-plat { display:inline-flex; align-items:center; gap:7px; }
    /* Criativos vencedores (TikTok) */
    .cre-bar-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
    .cre-sorts { display:inline-flex; gap:2px; background:#0d1117; border:1px solid #1c2128; border-radius:10px; padding:3px; flex-wrap:wrap; }
    .cre-sem { font-size:11px; color:#f59e0b; background:#f59e0b14; border:1px solid #f59e0b33; border-radius:20px; padding:4px 11px; font-weight:600; }
    .cre-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(400px, 1fr)); gap:12px; }
    .cre-card { display:flex; gap:14px; background:#0d1117; border:1px solid #1c2128; border-radius:14px; padding:14px; min-width:0; overflow:hidden; transition:border-color .15s, transform .15s, box-shadow .15s; }
    .cre-card:hover { border-color:#30363d; transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.28); }
    .cre-card.venc { border-color:#3fb95055; box-shadow:0 0 0 1px #3fb95022 inset; }
    .cre-thumb { position:relative; width:100px; height:178px; flex:0 0 100px; border-radius:10px; overflow:hidden; background:#0a0e13; cursor:pointer; }
    .cre-thumb img, .cre-thumb video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .cre-thumb video { opacity:0; transition:opacity .2s; }
    .cre-thumb.playing video { opacity:1; }
    .cre-noimg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#3d444d; }
    .cre-rank { position:absolute; top:6px; left:6px; background:rgba(0,0,0,.72); color:#fff; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:20px; backdrop-filter:blur(4px); }
    .cre-card.venc .cre-rank { background:#3fb950; color:#04100a; }
    .cre-kind { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,.72); color:#c9d1d9; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; }
    .cre-play { position:absolute; right:6px; bottom:6px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.92); color:#0d1117; display:flex; align-items:center; justify-content:center; }
    .cre-thumb.playing .cre-play { opacity:0; }
    .cre-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:7px; }
    .cre-head { display:flex; align-items:center; gap:7px; min-width:0; }
    .cre-title { font-weight:800; color:#e6edf3; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; }
    .cre-head .cmp-badge { flex:0 0 auto; }
    .cre-sub { color:#6b7280; font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    .cre-venc { flex:0 0 auto; font-size:9.5px; font-weight:800; color:#04100a; background:#3fb950; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.5px; }
    .cre-hero { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:8px; background:#0a0e13; border:1px solid #161b22; border-radius:10px; padding:8px 10px; min-width:0; }
    .cre-hero-item { min-width:0; }
    .cre-hero-item .l { color:#6b7280; font-size:9px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
    .cre-hero-item .v { font-size:15px; font-weight:800; letter-spacing:-.2px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
    .cre-tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px 10px; min-width:0; }
    .cre-tile { min-width:0; }
    .cre-tile .l { color:#6b7280; font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cre-tile .v { color:#e6edf3; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cre-tile .s { color:#6b7280; font-size:9.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cre-share { height:4px; background:#161b22; border-radius:4px; overflow:hidden; margin-top:auto; }
    .cre-share i { display:block; height:100%; background:linear-gradient(90deg,#3fb950,#58a6ff); border-radius:4px; transition:width .4s; }
    @media (max-width:900px) { .cre-grid { grid-template-columns:1fr; } }
    @media (max-width:560px) { .cre-card { flex-direction:column; } .cre-thumb { width:100%; height:200px; flex-basis:auto; } .cre-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
    body.light .cre-card, body.light .cre-sorts { background:#fff; border-color:#e2e8f0; }
    body.light .cre-card:hover { border-color:#cbd5e1; box-shadow:0 8px 24px rgba(15,23,42,.08); }
    body.light .cre-title, body.light .cre-tile .v { color:#0f172a; }
    body.light .cre-hero { background:#f8fafc; border-color:#e2e8f0; }
    body.light .cre-share { background:#f1f5f9; }
    body.light .cre-thumb { background:#f1f5f9; }
    .cmp-pill-plat img { height:12px; width:auto; }
    .cmp-pill-plat .sq { width:16px; height:16px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; }
    .cmp-pill-plat .sq img { width:10px; height:10px; filter:brightness(0) invert(1); }
    .cmp-more { display:block; width:100%; background:transparent; border:none; border-top:1px solid #1c2128; color:#58a6ff; font-size:12px; font-weight:700; padding:11px; cursor:pointer; }
    .cmp-more:hover { background:#11161d; }
    .cmp-close { background:transparent; border:1px solid #21262d; color:#8b949e; font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:9px; cursor:pointer; }
    .cmp-close:hover { color:#e6edf3; border-color:#30363d; }
    body.light .cmp-cta { background:#fff; border-color:#e2e8f0; }
    body.light .cmp-cta-title { color:#0f172a; }
    body.light .cmp-more { border-top-color:#f1f5f9; } body.light .cmp-more:hover { background:#f8fafc; }
    /* ── Motion premium (leve: transform/opacity só, rAF, reduced-motion ok) ── */
    @keyframes relRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
    .rel-rise { animation: relRise .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i,0) * 55ms); }
    .rel-card { animation: relRise .45s cubic-bezier(.16,1,.3,1) both; }
    .tilt3d { position:relative; transform-style:preserve-3d; transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease; }
    .tilt3d:hover { box-shadow:0 16px 36px rgba(0,0,0,.38); border-color:#30363d; z-index:2; }
    .t3d-shine { position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s;
      background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(255,255,255,.09), transparent 46%); }
    .tilt3d:hover .t3d-shine { opacity:1; }
    body.light .tilt3d:hover { box-shadow:0 14px 30px rgba(15,23,42,.12); border-color:#cbd5e1; }
    body.light .t3d-shine { background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(2,6,23,.05), transparent 46%); }
    @media (prefers-reduced-motion: reduce) {
      .rel-rise, .rel-card { animation: none !important; }
      .tilt3d, .tilt3d:hover { transform: none !important; }
    }
    .rel-spin { display:inline-block; width:13px; height:13px; border:2px solid #30363d; border-top-color:#1f6feb; border-radius:50%; animation:relspin .7s linear infinite; vertical-align:-2px; margin-right:6px; }
    @keyframes relspin { to { transform:rotate(360deg); } }
    /* ── Análise IA (aba Relatórios, 08/10/2026) ── */
    .ia-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:0 2px 12px; }
    .ia-head h2 { font-size:1.15rem; font-weight:800; margin:0; display:flex; align-items:center; gap:8px; }
    .ia-badge { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:20px; background:linear-gradient(90deg,#7c3aed33,#1f6feb33); border:1px solid #7c3aed66; color:#c4b5fd; }
    .ia-live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#3fb950; box-shadow:0 0 0 0 #3fb95099; animation:iaPulse 1.6s infinite; margin-right:4px; vertical-align:1px; }
    @keyframes iaPulse { 0% { box-shadow:0 0 0 0 #3fb95099 } 70% { box-shadow:0 0 0 8px #3fb95000 } 100% { box-shadow:0 0 0 0 #3fb95000 } }
    .ia-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
    @media (max-width:1100px) { .ia-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } }
    @media (max-width:640px) { .ia-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    .ia-kpi { background:#0d1117; border:1px solid #21262d; border-radius:14px; padding:12px 14px; min-width:0; }
    .ia-kpi .l { font-size:.7rem; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
    .ia-kpi .v { font-size:1.35rem; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
    .ia-kpi .s { font-size:.72rem; color:#8b949e; margin-top:2px; }
    .ia-kpi.red .v { color:#f85149; } .ia-kpi.green .v { color:#3fb950; } .ia-kpi.blue .v { color:#58a6ff; } .ia-kpi.orange .v { color:#f0883e; } .ia-kpi.purple .v { color:#c4b5fd; }
    .ia-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:14px; margin-bottom:14px; }
    @media (max-width:980px) { .ia-grid { grid-template-columns:1fr; } }
    .ia-card { background:#0d1117; border:1px solid #21262d; border-radius:16px; padding:18px 20px; min-width:0; }
    .ia-card.ai { border-color:#7c3aed55; background:linear-gradient(180deg,#120f1f,#0d1117 60%); }
    .ia-card h3 { margin:0 0 10px; font-size:.95rem; font-weight:800; display:flex; align-items:center; gap:8px; }
    .ia-resumo { font-size:.9rem; line-height:1.55; color:#e6edf3; margin:0 0 14px; }
    .ia-acao { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid #1c2128; }
    .ia-acao:first-of-type { border-top:none; }
    .ia-tag { flex:none; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:4px 8px; border-radius:7px; margin-top:1px; min-width:74px; text-align:center; }
    .ia-tag.desativar, .ia-tag.pausar { background:#f8514922; color:#f85149; border:1px solid #f8514944; }
    .ia-tag.escalar { background:#3fb95022; color:#3fb950; border:1px solid #3fb95044; }
    .ia-tag.ajustar, .ia-tag.investigar { background:#f0883e22; color:#f0883e; border:1px solid #f0883e44; }
    .ia-tag.manter, .ia-tag.aguardar { background:#58a6ff22; color:#58a6ff; border:1px solid #58a6ff44; }
    .ia-tag.modelar, .ia-tag.novos_titulos { background:#c4b5fd22; color:#c4b5fd; border:1px solid #c4b5fd55; }
    .ia-tag.mudar_pagina { background:#2dd4bf22; color:#2dd4bf; border:1px solid #2dd4bf55; }
    .ia-fazer { color:#e6edf3; font-size:.82rem; margin-top:4px; line-height:1.45; padding-left:8px; border-left:2px solid #30363d; }
    .ia-voto { display:inline-flex; gap:4px; margin-left:8px; }
    .ia-voto button { background:transparent; border:1px solid #30363d; color:#8b949e; border-radius:6px; font-size:11px; padding:1px 6px; cursor:pointer; }
    .ia-voto button.on { border-color:#3fb950; color:#3fb950; } .ia-voto button.off { border-color:#f85149; color:#f85149; }
    .ia-conf { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; }
    .ia-conf.ok { background:#3fb95022; color:#3fb950; } .ia-conf.warn { background:#f0883e22; color:#f0883e; }
    .ia-rx { font-size:.8rem; line-height:1.45; padding:8px 0; border-top:1px solid #1c2128; }
    .ia-rx b { color:#e6edf3; }
    .ia-alvo { font-weight:700; font-size:.86rem; }
    .ia-alvo small { color:#8b949e; font-weight:600; }
    .ia-mot { color:#c9d1d9; font-size:.82rem; margin-top:3px; line-height:1.45; }
    .ia-imp { color:#8b949e; font-size:.76rem; margin-top:2px; }
    .ia-pri { flex:none; font-size:10px; color:#6b7280; font-weight:700; margin-left:auto; white-space:nowrap; }
    .ia-diag { padding:8px 0; border-top:1px solid #1c2128; font-size:.83rem; line-height:1.45; }
    .ia-diag:first-of-type { border-top:none; }
    .ia-diag b { display:block; font-size:.84rem; }
    .ia-diag.alto b { color:#f85149; } .ia-diag.medio b { color:#f0883e; } .ia-diag.bom b { color:#3fb950; } .ia-diag.info b { color:#58a6ff; }
    .ia-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid #1c2128; color:#6b7280; font-size:.72rem; }
    .ia-btn { background:linear-gradient(90deg,#7c3aed,#1f6feb); border:none; color:#fff; font-weight:800; font-size:12px; padding:9px 16px; border-radius:9px; cursor:pointer; box-shadow:0 2px 10px #7c3aed44; white-space:nowrap; }
    .ia-btn:disabled { opacity:.6; cursor:default; }
    .ia-btn.ghost { background:#161b22; color:#c9d1d9; border:1px solid #30363d; box-shadow:none; }
    .ia-achado { display:flex; gap:8px; align-items:flex-start; padding:7px 0; border-top:1px solid #1c2128; font-size:.82rem; line-height:1.4; }
    .ia-achado:first-child { border-top:none; }
    .ia-achado .dot { flex:none; width:8px; height:8px; border-radius:50%; margin-top:6px; }
    .ia-achado.alto .dot { background:#f85149; } .ia-achado.medio .dot { background:#f0883e; } .ia-achado.bom .dot { background:#3fb950; }
    .ia-achado .q { color:#8b949e; font-size:.76rem; margin-top:1px; }
    .ia-table-wrap { overflow:auto; border:1px solid #21262d; border-radius:14px; background:#0d1117; }
    .ia-table { width:100%; border-collapse:collapse; font-size:.8rem; min-width:1000px; }
    .ia-table th { position:sticky; top:0; background:#10151c; color:#6b7280; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:10px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid #1c2128; }
    .ia-table th:first-child, .ia-table td:first-child { text-align:left; }
    .ia-table td { padding:9px 10px; text-align:right; border-bottom:1px solid #161b22; font-variant-numeric:tabular-nums; white-space:nowrap; }
    .ia-table tr.camp { cursor:pointer; } .ia-table tr.camp:hover td { background:#161b2288; }
    .ia-table tr.an td { background:#0a0e13; color:#9da7b3; font-size:.76rem; }
    .ia-table tr.an td:first-child { padding-left:28px; }
    .ia-rede { display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:6px; background:#161b22; color:#8b949e; border:1px solid #21262d; margin-right:6px; }
    .ia-pill { display:inline-block; font-size:10px; font-weight:800; padding:2px 7px; border-radius:20px; }
    .ia-pill.alto { background:#f8514922; color:#f85149; } .ia-pill.medio { background:#f0883e22; color:#f0883e; } .ia-pill.bom { background:#3fb95022; color:#3fb950; } .ia-pill.ok { background:#21262d; color:#8b949e; }
    .ia-bar { display:inline-block; height:6px; border-radius:3px; background:#1f6feb; vertical-align:middle; margin-left:6px; }
    .ia-empty { color:#6b7280; font-size:.86rem; padding:12px 2px; }
    .ia-nb-acc { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:.82rem; }
    .ia-dec { background:#0d1117; border:1px solid #21262d; border-radius:14px; margin-bottom:8px; overflow:hidden; }
    .ia-dec-row { display:grid; grid-template-columns:minmax(220px,1.1fr) minmax(0,1.6fr) minmax(220px,1fr); gap:14px; align-items:center; padding:12px 16px; cursor:pointer; }
    .ia-dec-row:hover { background:#161b2266; }
    @media (max-width:980px) { .ia-dec-row { grid-template-columns:1fr; gap:8px; } }
    .ia-dec-nome { font-weight:800; font-size:.9rem; line-height:1.3; min-width:0; }
    .ia-dec-nome small { display:block; color:#6b7280; font-weight:600; font-size:.72rem; margin-top:2px; }
    .ia-dec-nome .tit { display:block; color:#c9d1d9; font-weight:600; font-size:.8rem; font-style:italic; margin-top:3px; }
    .ia-chips { display:flex; flex-wrap:wrap; gap:6px; }
    .ia-chip { font-size:.74rem; font-weight:700; padding:3px 8px; border-radius:7px; background:#161b22; border:1px solid #21262d; color:#c9d1d9; white-space:nowrap; font-variant-numeric:tabular-nums; }
    .ia-chip small { color:#6b7280; font-weight:600; margin-left:3px; }
    .ia-chip.red { color:#f85149; border-color:#f8514944; } .ia-chip.green { color:#3fb950; border-color:#3fb95044; } .ia-chip.purple { color:#c4b5fd; border-color:#c4b5fd44; } .ia-chip.orange { color:#f0883e; border-color:#f0883e44; }
    .ia-dec-ia { display:flex; gap:10px; align-items:flex-start; min-width:0; }
    .ia-dec-ia .ia-tag { min-width:88px; }
    .ia-dec-ia .txt { font-size:.78rem; color:#c9d1d9; line-height:1.4; min-width:0; }
    .ia-dec-ia .txt.sem { color:#6b7280; }
    .ia-dec-an { border-top:1px solid #1c2128; background:#0a0e13; }
    .ia-dec-an .ia-dec-row { padding:10px 16px 10px 36px; cursor:default; }
    .ia-dec-an .ia-dec-row:hover { background:transparent; }
    .ia-dec-fazer { font-size:.78rem; color:#e6edf3; padding:0 16px 12px 16px; line-height:1.45; border-left:0; }
    .ia-dec-fazer span { display:block; padding-left:10px; border-left:2px solid #7c3aed66; }
    .ia-dec-outras { color:#8b949e; font-size:.8rem; padding:10px 16px; cursor:pointer; }
    .cmp-table td.cmp-ia { white-space:normal; min-width:220px; max-width:320px; text-align:left; font-size:.76rem; line-height:1.35; }
    .cmp-table td.cmp-leads { text-align:left; white-space:nowrap; font-size:.76rem; color:#c9d1d9; }
    .cmp-table th.cmp-left { text-align:left; }
    body.light .ia-dec { background:#fff; border-color:#e2e8f0; } body.light .ia-chip { background:#f8fafc; border-color:#e2e8f0; color:#334155; } body.light .ia-dec-an { background:#f8fafc; } body.light .ia-dec-ia .txt { color:#334155; }
    body.light .ia-kpi, body.light .ia-card, body.light .ia-table-wrap { background:#fff; border-color:#e2e8f0; }
    body.light .ia-card.ai { background:linear-gradient(180deg,#f5f3ff,#fff 60%); }
    body.light .ia-table th { background:#f8fafc; } body.light .ia-table tr.an td { background:#f8fafc; }
    body.light .ia-resumo { color:#1f2937; } body.light .ia-mot { color:#334155; }
    body.light .rel-card { background:#ffffff; border-color:#e2e8f0; }
    body.light .rel-pills, body.light .rel-refresh { background:#f8fafc; border-color:#e2e8f0; }
    body.light .rel-pill { color:#64748b; }
    body.light .rel-pill:hover { color:#0f172a; background:#eef2f6; }
    .rel-table { width:100%; border-collapse:collapse; font-size:12.5px; }
    .rel-table thead th { color:#8b949e; text-align:left; font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; padding:8px 12px; border-bottom:1px solid #30363d; }
    .rel-table tbody td { padding:10px 12px; border-top:1px solid #21262d; font-variant-numeric:tabular-nums; }
    .rel-table tbody tr { transition:background .12s; }
    .rel-table tbody tr:hover { background:#58a6ff0a; }
    body.light .rel-card { background:#ffffff; border-color:#e2e8f0; }
    body.light .rel-table thead th { border-color:#e2e8f0; color:#64748b; }
    body.light .rel-table tbody td { border-color:#eef2f6; }
    body.light .rel-table tbody tr:hover { background:#3b82f60a; }

    /* Clique-copia nas células da Atividade Recente (visual normal; só o TEXTO pisca ao copiar) */
    td.dash-cp { cursor: pointer; }
    td.dash-cp-flash, td.dash-cp-flash * { color: #3fb950 !important; transition: color .12s; }
    .dash-val-teal  { color:#2dd4bf !important; font-weight:700; }
    .dash-empty   { text-align:center; color:#30363d; padding:40px; font-size:0.76rem; }
    .dash-loading { text-align:center; color:#30363d; padding:50px; font-size:0.76rem; }

    /* ══════════════════════════════════════════════════════════════
       TEMA CLARO body.light overrides
    ══════════════════════════════════════════════════════════════ */

    /* ── Theme switch (segmented control SVG icons) ── */
    .theme-switch {
      display: inline-flex; gap: 2px;
      width: 100%; padding: 3px; margin-bottom: 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      box-sizing: border-box;
    }
    .theme-opt {
      flex: 1;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 7px;
      background: transparent; border: none; border-radius: 7px;
      cursor: pointer; color: #6b7280;
      transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
      font-family: inherit;
    }
    .theme-opt svg { width: 14px; height: 14px; display: block; }
    .theme-opt:hover { color: #f0f0f5; background: rgba(255,255,255,0.04); }
    .theme-opt.active {
      background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      color: #fff000;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    body.light .theme-switch { background: rgba(0,0,0,0.03); border-color: #e2e8f0; }
    body.light .theme-opt { color: #94a3b8; }
    body.light .theme-opt:hover { color: #1e293b; background: rgba(0,0,0,0.04); }
    body.light .theme-opt.active { background: #ffffff; color: #f59e0b; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

    /* Quando collapsed: empilha vertical pra caber em 56px */
    .sidebar.collapsed .theme-switch {
      flex-direction: column;
      padding: 2px;
      gap: 1px;
    }
    .sidebar.collapsed .theme-opt { padding: 5px; }
    .sidebar.collapsed:hover .theme-switch { flex-direction: row; padding: 3px; gap: 2px; }
    .sidebar.collapsed:hover .theme-opt { padding: 7px; }

    /* ── Botão único "Preferências" (tema + idioma) — abre popover ── */
    .sidebar-prefs-wrap {
      width: 100%;
      margin-bottom: 10px;
    }
    .sidebar-prefs-btn {
      display: flex; align-items: center; gap: 10px;
      width: 100%;
      padding: 8px 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      color: #9ca3af;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.82rem;
      font-weight: 600;
      transition: all 0.18s;
      text-align: left;
    }
    .sidebar-prefs-btn:hover { color: #f0f0f5; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
    .sidebar-prefs-btn.open { color: #58a6ff; border-color: rgba(88,166,255,0.35); background: rgba(88,166,255,0.06); }
    .sb-prefs-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; flex-shrink: 0;
    }
    .sb-prefs-icon svg { width: 15px; height: 15px; }
    .sb-prefs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Quando collapsed: só ícone, centralizado */
    .sidebar.collapsed .sidebar-prefs-btn { padding: 8px; justify-content: center; }
    .sidebar.collapsed .sb-prefs-label { display: none; }
    .sidebar.collapsed:hover .sidebar-prefs-btn { padding: 8px 12px; justify-content: flex-start; }
    .sidebar.collapsed:hover .sb-prefs-label { display: block; }

    /* Popover flutuante — position:fixed, JS calcula posição ao lado do btn */
    .sidebar-prefs-panel {
      position: fixed;
      z-index: 9999;
      min-width: 260px;
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 12px;
      box-shadow: 0 24px 56px -12px rgba(0,0,0,0.7);
      padding: 14px;
      opacity: 0; transform: translateY(6px) scale(0.98);
      transition: opacity 0.14s ease-out, transform 0.14s ease-out;
      pointer-events: none;
      display: none;
    }
    .sidebar-prefs-panel.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .sb-prefs-header {
      padding: 0 4px 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .sb-prefs-title {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
      color: #f0f0f5; text-transform: uppercase;
    }
    .sb-prefs-row { padding: 8px 0; }
    .sb-prefs-row + .sb-prefs-row { border-top: 1px solid rgba(255,255,255,0.04); margin-top: 4px; padding-top: 12px; }
    .sb-prefs-row-label {
      font-size: 0.7rem; font-weight: 600;
      color: #8b949e;
      margin-bottom: 8px;
      padding: 0 2px;
    }
    /* Reset .theme-opt style dentro do popover: mostra texto ao lado do ícone */
    .sidebar-prefs-panel .theme-switch { margin-bottom: 0; padding: 4px; }
    .sidebar-prefs-panel .theme-opt {
      gap: 8px;
      padding: 8px 10px;
      font-size: 0.78rem; font-weight: 600;
    }
    .sidebar-prefs-panel .theme-opt svg { width: 15px; height: 15px; }
    .theme-opt-lbl { display: inline-block; }
    .sidebar-prefs-panel .inapp-lang-switch { margin-bottom: 0; padding: 4px; }
    .sidebar-prefs-panel .inapp-lang-btn { padding: 8px 10px; font-size: 0.75rem; }

    /* Light mode overrides pro botão + popover */
    body.light .sidebar-prefs-btn {
      background: rgba(0,0,0,0.02);
      border-color: #e2e8f0;
      color: #475569;
    }
    body.light .sidebar-prefs-btn:hover { color: #0f172a; background: #f8fafc; border-color: #cbd5e1; }
    body.light .sidebar-prefs-btn.open { color: #2563eb; border-color: rgba(37,99,235,0.35); background: rgba(37,99,235,0.06); }
    body.light .sidebar-prefs-panel {
      background: #ffffff;
      border-color: #e5e7eb;
      box-shadow: 0 20px 50px -10px rgba(15,23,42,0.18);
    }
    body.light .sb-prefs-header { border-bottom-color: #f1f5f9; }
    body.light .sb-prefs-title { color: #0f172a; }
    body.light .sb-prefs-row + .sb-prefs-row { border-top-color: #f1f5f9; }
    body.light .sb-prefs-row-label { color: #64748b; }

    /* ── Language switch (segmented PT/EN/ES) — mesmo padrão do theme ── */
    .inapp-lang-switch {
      display: inline-flex; gap: 2px;
      width: 100%; padding: 3px; margin-bottom: 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      box-sizing: border-box;
    }
    .inapp-lang-btn {
      flex: 1;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 6px 4px;
      background: transparent; border: none; border-radius: 7px;
      cursor: pointer; color: #6b7280;
      font-family: inherit; font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.06em;
      transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .inapp-lang-btn:hover { color: #f0f0f5; background: rgba(255,255,255,0.04); }
    .inapp-lang-btn.active {
      background: linear-gradient(135deg, rgba(88,166,255,0.15), rgba(88,166,255,0.05));
      color: #58a6ff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    body.light .inapp-lang-switch { background: rgba(0,0,0,0.03); border-color: #e2e8f0; }
    body.light .inapp-lang-btn { color: #94a3b8; }
    body.light .inapp-lang-btn:hover { color: #1e293b; background: rgba(0,0,0,0.04); }
    body.light .inapp-lang-btn.active { background: #ffffff; color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

    /* Collapsed: vertical */
    .sidebar.collapsed .inapp-lang-switch {
      flex-direction: column; padding: 2px; gap: 1px;
    }
    .sidebar.collapsed .inapp-lang-btn { padding: 4px; font-size: 0.62rem; }
    .sidebar.collapsed:hover .inapp-lang-switch { flex-direction: row; padding: 3px; gap: 2px; }
    .sidebar.collapsed:hover .inapp-lang-btn { padding: 6px 4px; font-size: 0.68rem; }

    /* ── Body & backgrounds ── */
    body.light { background: #f5f7fa; color: #1e293b; }
    body.light .main-area { background: #f5f7fa; }
    body.light .content-area { background: #f5f7fa; }

    /* ── Sidebar ── */
    body.light .sidebar { background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%); border-right-color: #e2e8f0; }
    body.light .sidebar-logo-name { color: #1e293b; }
    body.light .sidebar-logo-sub { color: #f0f0f5; }
    body.light .sidebar-logo-icon svg path[fill="#ffffff"],
    body.light .sidebar-logo-icon svg rect[fill="#ffffff"],
    body.light .sidebar-logo-icon svg polygon[fill="#ffffff"] { fill: #1e293b; }
    body.light .login-logo-icon svg path[fill="#ffffff"],
    body.light .login-logo-icon svg rect[fill="#ffffff"],
    body.light .login-logo-icon svg polygon[fill="#ffffff"] { fill: #1e293b; }
    body.light .sidebar-section-label { color: #64748b; }
    body.light .sidebar-btn { color: #475569; }
    body.light .sidebar-btn:hover { background: rgba(255,255,255,0.06); color: #f0f0f5; }
    body.light .sidebar-btn.active { background: rgba(255,255,255,0.08); color: #f0f0f5; }
    body.light .sidebar-btn .sb-icon-wrap svg { stroke: #64748b; }
    body.light .sidebar-btn.active .sb-icon-wrap svg { stroke: #58a6ff; }
    body.light .sidebar-user { background: rgba(255,255,255,0.04); border-color: #e2e8f0; }
    body.light .sidebar-user-name { color: #1e293b; }
    body.light .sidebar-user-role { color: #64748b; }
    body.light .sidebar-avatar { background: #58a6ff; color: #fff; }
    body.light .sidebar-logout { color: #94a3b8; }
    body.light .sidebar-logout:hover { color: #e8445a; }
    body.light .sidebar-footer::before { background: linear-gradient(90deg, transparent, #e2e8f0, transparent); }
    body.light .theme-toggle { background: rgba(255,255,255,0.04); border-color: #e2e8f0; color: #475569; }

    /* ── Cards genéricos ── */
    body.light .card { background: #ffffff; border-color: #e2e8f0; }
    body.light .card-title { color: #1e293b; }
    body.light .card-sub { color: #64748b; }

    /* ── Inputs & buttons ── */
    body.light input[type="text"],
    body.light input[type="password"],
    body.light input[type="email"],
    body.light input[type="datetime-local"],
    body.light select,
    body.light textarea { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }
    body.light input::placeholder { color: #94a3b8; }
    body.light .pixel-row input { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }

    /* ── Dashboard ── */
    body.light .dash-header h1 { color: #1e293b; }
    body.light .dash-header p { color: #64748b; }
    body.light .dash-card { background: #ffffff; border-color: #e2e8f0; }
    body.light .dash-card-label { color: #64748b; }
    body.light .dash-card-value { color: #1e293b; }
    body.light .dash-card-icon { background: rgba(255,255,255,0.08); }
    body.light .dash-chart-box { background: #ffffff; border-color: #e2e8f0; }
    body.light .dash-chart-box::before { background: linear-gradient(90deg,transparent,rgba(255,255,255,0.15) 40%,rgba(255,255,255,0.15) 60%,transparent); }
    body.light .dash-chart-title { color: #1e293b; }
    body.light .dash-chart-sub { color: #94a3b8; }
    body.light .dash-chart-legend-item { color: #475569; }
    body.light .dash-chart-type-btn { border-color: #e2e8f0; color: #94a3b8; }
    body.light .dash-chart-type-btn.active { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); color: #f0f0f5; }
    body.light .dash-conv-box { background: #ffffff; border-color: #e2e8f0; }
    body.light .dash-conv-title { color: #475569; }
    body.light .dash-conv-pct { color: #1e293b; }
    body.light .dash-conv-label { color: #94a3b8; }
    body.light .dash-conv-legend { color: #475569; }
    body.light .dash-card-delta.neu { color: #94a3b8; }
    body.light .dash-top-box { background: #ffffff; border-color: #e2e8f0; }
    body.light .dash-top-title { color: #1e293b; }
    body.light .dash-top-row:hover { background: #f8fafc; }
    body.light .dash-top-name { color: #6e7681; }
    body.light .dash-top-sub { color: #64748b; }
    body.light .dash-top-val { color: #059669; }
    body.light .dash-top-rank { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }

    /* ── Dashboard controls ── */
    body.light .dash-period-btn { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .dash-period-btn.active { background: #58a6ff; color: #fff; border-color: #58a6ff; }
    body.light .dash-source-btn { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .dash-source-btn.active { background: #58a6ff; color: #fff; border-color: #58a6ff; }
    body.light .dash-refresh-btn { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .dash-plat-btn { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .dash-plat-btn.active { border-color: #58a6ff; color: #f0f0f5; }
    body.light .dash-plat-menu { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
    body.light .dash-plat-opt { color: #475569; }
    body.light .dash-plat-opt:hover { background: rgba(255,255,255,0.06); color: #f0f0f5; }
    body.light .dash-plat-opt.active { color: #f0f0f5; background: rgba(255,255,255,0.08); }
    body.light .dash-daterange-btn { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .dash-calendar { background: #ffffff; border-color: #e2e8f0; }

    /* ── Atividade Recente ── */
    body.light .dash-recent-wrap { background: #ffffff; border-color: #e2e8f0; }
    body.light .dash-recent-header { border-bottom-color: #e2e8f0; }
    body.light .dash-recent-title { color: #1e293b; }
    body.light .dash-recent-sub { color: #94a3b8; }
    body.light .dash-recent-table th { background: #f8fafc; color: #64748b; border-bottom-color: #e2e8f0; }
    body.light .dash-recent-table td { color: #6e7681; border-bottom-color: #f1f5f9; }
    body.light .dash-recent-table tbody tr:hover td { background: #f8fafc; }
    body.light .dash-recent-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; }
    body.light .dash-recent-filters { border-bottom-color: #e2e8f0; }
    body.light .dash-recent-search { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
    body.light .dash-recent-search::placeholder { color: #94a3b8; }
    body.light .dash-recent-search-icon { color: #94a3b8; }
    body.light .dash-recent-select { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
    body.light .dash-recent-filter-btn { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
    body.light .dash-recent-filter-btn:hover { border-color: rgba(255,255,255,0.3); color: #f0f0f5; }
    body.light .dash-recent-filter-btn.active { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); color: #f0f0f5; }
    body.light .dash-recent-adv-filters { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
    body.light .dash-recent-adv-title { color: #1e293b; }
    body.light .dash-recent-adv-label { color: #64748b; }
    body.light .dash-recent-adv-input { background: #f8fafc; border-color: #e2e8f0; color: #1e293b; }
    body.light .dash-recent-adv-input::placeholder { color: #94a3b8; }
    body.light .dash-recent-limit-menu { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
    body.light .dash-recent-limit-opt { color: #475569; }
    body.light .dash-recent-limit-opt:hover { background: rgba(255,255,255,0.06); color: #f0f0f5; }
    body.light .dash-recent-limit-opt.active { color: #f0f0f5; background: rgba(255,255,255,0.08); }

    /* ── Pixels tab ── */
    body.light .px-card { background: #ffffff; border-color: #e2e8f0; }
    body.light .px-card:hover { border-color: rgba(255,255,255,0.3); }
    body.light .px-name { color: #1e293b; }
    body.light .px-id { color: #64748b; }
    body.light .px-stat-label { color: #94a3b8; }
    body.light .px-stat-value { color: #6e7681; }

    /* ── Logs tab ── */
    body.light .logs-title { color: #1e293b; }
    body.light .logs-search { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }
    body.light .ev-type-select { background: #f1f5f9; border-color: #e2e8f0; color: #6e7681; }
    body.light .log-card { background: #ffffff; border-color: #e2e8f0; }
    body.light .log-card:hover { border-color: rgba(255,255,255,0.25); }
    body.light .log-card-customer { color: #6e7681; }
    body.light .log-card-date { color: #94a3b8; }
    body.light .log-card-sub { color: #94a3b8; }
    body.light .btn-logs-action { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .date-quick-btn { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .date-quick-btn.active { background: #58a6ff; color: #fff; border-color: #58a6ff; }
    body.light .logs-header { border-bottom-color: #e2e8f0; }

    /* ── Webhook tab ── */
    body.light .wh-row { background: #ffffff; border-color: #e2e8f0; }
    body.light .wh-plat-name { color: #1e293b; }
    body.light .wh-url-inline { background: #f8fafc; border-color: #e2e8f0; }
    body.light .wh-url-val { color: #6e7681; }
    body.light .btn-copy { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .btn-copy:hover { background: #e2e8f0; border-color: rgba(255,255,255,0.3); color: #f0f0f5; }
    body.light .wh-steps-wrap { background: #ffffff; border-color: #e2e8f0; }
    body.light .wh-steps-title { color: #475569; }
    body.light .wh-step-text { color: #6e7681; }
    body.light .wh-step-text b,
    body.light .wh-step-text strong,
    body.light .wh-highlight { color: #0f172a; font-weight: 700; }
    body.light .wh-step-num { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
    body.light .wh-section-title h2 { color: #0f172a; }
    body.light .wh-section-sub { color: #64748b; }
    body.light .wh-count { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }

    /* ── Ativar Pixel tab ── */
    body.light .ativar-form-card { background: #ffffff; border-color: #e2e8f0; }
    body.light .ativar-form-title { color: #1e293b; }
    body.light .ativar-form-sub { color: #475569; }
    body.light .ativar-form-sub b { color: #f0f0f5; }
    body.light .ativar-field-label { color: #475569; }
    body.light .ativar-events-card { background: #ffffff; border-color: #e2e8f0; }
    body.light .ativar-events-title { color: #475569; }
    body.light .ativar-event-row { background: #f8fafc; border-color: #e2e8f0; }
    body.light .ativar-event-name { color: #475569; }
    body.light .ativar-events-footer { border-top-color: #e2e8f0; }
    body.light .ativar-events-footer-lbl { color: #475569; }
    body.light .ativar-events-footer-val { color: #1e293b; }
    body.light .ativar-plat-tabs { background: #f1f5f9; border-color: #e2e8f0; }

    /* ── Testar tab ── */
    body.light .testar-form-card,
    body.light .testar-result-card { background: #ffffff; border-color: #e2e8f0; }
    body.light .testar-step-text { color: #475569; }
    body.light .testar-step-text b { color: #6e7681; }
    body.light .testar-label { color: #64748b; }
    body.light .testar-input { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }
    body.light .testar-result-empty-text { color: #94a3b8; }
    body.light .testar-result-empty-icon { background: #f1f5f9; border-color: #e2e8f0; }

    /* ── Histórico tab ── */
    body.light .hist-top h2 { color: #1e293b; }
    body.light .hist-stats { color: #64748b; }

    /* ── Plat picker ── */
    body.light .plat-picker { background: #f1f5f9; border-color: #e2e8f0; }
    body.light .plat-btn { color: #475569; }

    /* ── Status messages ── */
    body.light .status.ok { background: rgba(63,185,80,0.08); }
    body.light .status.err { background: rgba(248,81,73,0.06); }

    /* ── Logs count badge ── */
    body.light .logs-count { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }

    /* ── Logs toolbar extras ── */
    body.light .logs-filter-summary { color: #475569; }
    body.light .logs-toolbar { border-color: #e2e8f0; }
    body.light .log-empty-cards { color: #94a3b8; }

    /* ── Modal/overlay ── */
    body.light .modal-overlay { background: rgba(0,0,0,0.3); }
    body.light .modal-box { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
    body.light .modal-box::-webkit-scrollbar-thumb { background: #cbd5e1; }
    body.light .modal-title { color: #1e293b; }
    body.light .modal-header { border-bottom-color: #e2e8f0; }
    body.light .btn-close-modal { color: #94a3b8; border-color: #e2e8f0; }
    body.light .btn-close-modal:hover { color: #ef4444; border-color: rgba(239,68,68,0.3); }
    body.light .modal-section-title { color: #f0f0f5; }
    body.light .modal-field-label { color: #64748b; }
    body.light .modal-field-value { color: #1e293b; }
    body.light .modal-field-value.mono { color: #6e7681; }
    body.light .modal-field-value.muted { color: #64748b; }
    body.light .ttclid-box { background: #f1f5f9; border-color: #e2e8f0; color: #6e7681; }
    body.light .modal-footer { border-top-color: #e2e8f0; }
    body.light .btn-fechar { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .btn-fechar:hover { border-color: #58a6ff; color: #f0f0f5; }

    /* ── Section boxes (usado em Pixels, forms, etc) ── */
    body.light .section-box { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
    body.light .section-box-title { color: #475569; }
    body.light .section-box.scrollable { scrollbar-color: #cbd5e1 transparent; }

    /* ── Pixels tab cards de pixel ── */
    body.light .px-card { background: #ffffff; border-color: #e2e8f0; }
    body.light .px-name { color: #1e293b; }
    body.light .px-id,
    body.light .px-token { color: #64748b; background: #f1f5f9; }
    body.light .px-stat-label { color: #94a3b8; }
    body.light .px-stat-value { color: #6e7681; }
    body.light .px-actions button { color: #475569; border-color: #e2e8f0; background: #f8fafc; }
    body.light .px-actions button:hover { border-color: rgba(255,255,255,0.3); color: #f0f0f5; }
    body.light .btn-rm { color: #94a3b8; }
    body.light .btn-rm:hover { color: #ef4444; background: rgba(239,68,68,0.06); }

    /* ── Pixels page title ── */
    body.light .pixels-header h2,
    body.light h2 { color: #1e293b; }
    body.light .pixels-header p,
    body.light .page-sub { color: #64748b; }

    /* ── Badges (TikTok, Facebook, status) ── */
    body.light .ev-badge { opacity: 0.9; }
    body.light .mode-badge { opacity: 0.9; }
    body.light .dispatch-badge { opacity: 0.9; }

    /* ── Buttons genéricos ── */
    body.light .btn-add { background: #58a6ff; }
    body.light .btn-copy { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .btn-copy:hover { background: #e2e8f0; }
    body.light .btn-ver { background: rgba(255,255,255,0.06); border-color: #e2e8f0; color: #f0f0f5; }
    body.light .btn-clear { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .btn-clear:hover { border-color: #ef4444; color: #ef4444; }
    body.light .btn-pixel-logs { background: #f8fafc; border-color: #e2e8f0; color: #475569; }

    /* ── Live toggle ── */
    body.light .live-toggle { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }

    /* ── Filter banner ── */
    body.light .logs-filter-banner { background: rgba(255,255,255,0.06); border-color: #e2e8f0; }
    body.light .date-input { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }

    /* ── Webhook steps ── */
    body.light .wh-step-num { background: rgba(255,255,255,0.08); border-color: #e2e8f0; }
    body.light .wh-info-top .wh-plat-name { color: #1e293b; }
    body.light .wh-badge-active { color: #059669; }

    /* ── Ativar plat tabs ── */
    body.light .ativar-plat-tab { color: #475569; }
    body.light .ativar-event-count { color: #f0f0f5; background: rgba(255,255,255,0.06); }

    /* ── Hist cards ── */
    body.light .hist-card { background: #ffffff; border-color: #e2e8f0; }
    body.light .hist-name { color: #1e293b; }
    body.light .hist-date { color: #94a3b8; }
    body.light .hist-detail { color: #475569; }

    /* ── Scrollbars ── */
    body.light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
    body.light ::-webkit-scrollbar-track { background: #f1f5f9; }

    /* ── Generic text overrides ── */
    body.light .section-title { color: #1e293b; }
    body.light .section-sub { color: #64748b; }
    body.light .card-sub { color: #64748b; }
    body.light .card-title { color: #1e293b; }

    /* ── Catch-all: textos muito escuros/claros que ficam invisíveis ── */
    body.light .dash-conv-legend { color: #475569; }
    body.light .dash-chart-legend-item { color: #475569; }
    body.light .dash-top-sub { color: #64748b; }
    body.light .dash-top-rank { color: #f0f0f5; }
    body.light .dash-status-gerado { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: #d97706; }
    body.light .dash-status-reembolso  { background: rgba(37,99,235,0.08);  border-color: rgba(37,99,235,0.2);  color: #2563eb; }
    body.light .dash-status-chargeback { background: rgba(220,38,38,0.08);  border-color: rgba(220,38,38,0.2);  color: #dc2626; }
    body.light .dash-val-red { color: #dc2626 !important; }
    body.light .wh-page-sub { color: #64748b; }
    body.light .page-badge { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
    body.light .empty-pixels { color: #94a3b8; }

    /* ═══════════════════════════════════════════════
       PERFIL profile page
    ═══════════════════════════════════════════════ */
    #abaPerfil {
      max-width: 780px;
      margin: 0 auto;
      padding: 28px 24px 48px;
      box-sizing: border-box;
      /* no anim */
    }
    .perfil-header { margin-bottom: 28px; }
    .perfil-header h2 {
      font-size: 1.4rem;
      font-weight: 800;
      color: #e6edf3;
      margin-bottom: 4px;
      letter-spacing: -0.03em;
    }
    .perfil-header p {
      font-size: 0.82rem;
      color: #8b949e;
    }

    .perfil-card {
      background: #161b22;
      border: 1px solid #30363d;
      border-radius: 14px;
      padding: 28px;
      margin-bottom: 16px;
      position: relative;
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .perfil-card:hover { border-color: #3d444d; }
    .perfil-card--hero {
      border-top: none;
      border-image: none;
      position: relative;
    }
    .perfil-card--hero::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #f0f0f5, #388bfd, #1f6feb);
      border-radius: 14px 14px 0 0;
    }
    .perfil-card-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: #e6edf3;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .perfil-card-title svg {
      width: 16px;
      height: 16px;
      stroke: #8b949e;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .perfil-card-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .perfil-card-title-row .perfil-card-title { margin-bottom: 0; }

    /* Hero profile section */
    .perfil-hero {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }
    .perfil-avatar {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f0f0f5, #1f6feb);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.9rem;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.12), 0 4px 16px rgba(255,255,255,0.15);
      letter-spacing: -0.02em;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform 0.18s, box-shadow 0.18s;
    }
    .perfil-avatar:hover { transform: scale(1.03); box-shadow: 0 0 0 3px rgba(88,166,255,0.4), 0 8px 24px rgba(88,166,255,0.25); }
    .perfil-avatar img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      border-radius: 50%;
    }
    .perfil-avatar .avatar-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.55);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.18s;
      color: #fff;
      border-radius: 50%;
    }
    .perfil-avatar .avatar-overlay svg { width: 26px; height: 26px; }
    .perfil-avatar:hover .avatar-overlay { opacity: 1; }
    .perfil-avatar.uploading .avatar-overlay { opacity: 1; background: rgba(0,0,0,0.7); }
    .perfil-avatar .avatar-spinner {
      width: 20px; height: 20px;
      border: 2.5px solid rgba(255,255,255,0.25);
      border-top-color: #fff;
      border-radius: 50%;
      animation: bSpin 0.8s linear infinite;
    }
    @keyframes bSpin { to { transform: rotate(360deg); } }
    /* Sidebar avatar com img — bolinha (círculo) preenchida pelo GIF,
       sem borda azul aparecendo. Cover pra o GIF preencher inteiro sem
       letterbox; border-radius 50% pra virar círculo perfeito. */
    .sidebar-avatar { overflow: hidden; padding: 0 !important; position: relative; }
    .sidebar-avatar img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important; height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      display: block !important;
      border-radius: inherit;
    }
    .sidebar-avatar:has(img) {
      border-radius: 50% !important;
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }
    /* Header avatar (mesma regra) */
    .header-avatar { overflow: hidden; position: relative; }
    .header-avatar img { object-fit: cover !important; }
    .header-avatar:has(img) {
      border-radius: 50% !important;
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }
    .header-avatar img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important; height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      display: block !important;
      border-radius: inherit;
    }
    /* Perfil hero avatar — quando tem img, remove ring + gradient (mesma regra
       do sidebar-avatar). Fallback letter mantém o gradiente. */
    .perfil-avatar:has(img) {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }
    .perfil-avatar:has(img):hover {
      box-shadow: 0 8px 24px rgba(88,166,255,0.25) !important;
    }
    /* Perfil hero avatar img — também cover */
    .perfil-avatar img {
      width: 100% !important; height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
    }
    .perfil-hero-info { flex: 1; min-width: 0; }
    .perfil-hero-name {
      font-size: 1.2rem;
      font-weight: 800;
      color: #e6edf3;
      margin-bottom: 3px;
      letter-spacing: -0.02em;
    }
    .perfil-hero-email {
      font-size: 0.82rem;
      color: #8b949e;
      margin-bottom: 8px;
    }
    .perfil-role-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .perfil-role-badge--admin {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.25);
      color: #f0f0f5;
    }
    .perfil-role-badge--user {
      background: rgba(139,148,158,0.1);
      border: 1px solid rgba(139,148,158,0.2);
      color: #8b949e;
    }

    /* Stats row */
    .perfil-stats {
      display: flex;
      gap: 0;
      border-top: 1px solid #21262d;
      padding-top: 18px;
    }
    .perfil-stat {
      flex: 1;
      text-align: center;
      padding: 0 12px;
      border-right: 1px solid #21262d;
    }
    .perfil-stat:last-child { border-right: none; }
    .perfil-stat-label {
      font-size: 0.65rem;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
    }
    .perfil-stat-value {
      font-size: 0.82rem;
      font-weight: 600;
      color: #c9d1d9;
    }

    /* Security items */
    .perfil-security-item {
      background: #0d1117;
      border: 1px solid #21262d;
      border-radius: 10px;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      transition: border-color 0.2s;
    }
    .perfil-security-item:hover { border-color: #30363d; }
    .perfil-security-item:last-child { margin-bottom: 0; }
    .perfil-security-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .perfil-security-label {
      font-size: 0.82rem;
      font-weight: 600;
      color: #c9d1d9;
    }
    .perfil-security-desc {
      font-size: 0.72rem;
      color: #6e7681;
    }
    .perfil-badge-inactive {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background: rgba(248,81,73,0.1);
      border: 1px solid rgba(248,81,73,0.25);
      color: #f85149;
    }
    .perfil-btn {
      padding: 7px 18px;
      border-radius: 8px;
      border: 1px solid #30363d;
      background: #161b22;
      color: #c9d1d9;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      font-family: inherit;
    }
    .perfil-btn:hover {
      border-color: #58a6ff;
      color: #f0f0f5;
      background: rgba(255,255,255,0.06);
    }
    .perfil-btn-edit {
      padding: 5px 14px;
      border-radius: 6px;
      border: 1px solid #30363d;
      background: transparent;
      color: #f0f0f5;
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      font-family: inherit;
    }
    .perfil-btn-edit:hover {
      background: rgba(255,255,255,0.08);
      border-color: #58a6ff;
    }

    /* Info grid */
    .perfil-info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .perfil-field label {
      display: block;
      font-size: 0.7rem;
      font-weight: 600;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
    }
    .perfil-field input {
      width: 100%;
      padding: 9px 14px;
      border-radius: 8px;
      border: 1px solid #21262d;
      background: #0d1117;
      color: #8b949e;
      font-size: 0.82rem;
      font-family: inherit;
      outline: none;
    }
    .perfil-field input:focus {
      border-color: #30363d;
    }

    @media (max-width: 600px) {
      #abaPerfil { padding: 18px 10px 32px; }
      .perfil-card { padding: 18px 14px; }
      .perfil-hero { flex-direction: column; text-align: center; }
      .perfil-stats { flex-direction: column; gap: 14px; }
      .perfil-stat { border-right: none; border-bottom: 1px solid #21262d; padding-bottom: 12px; }
      .perfil-stat:last-child { border-bottom: none; padding-bottom: 0; }
      .perfil-info-grid { grid-template-columns: 1fr; }
      .perfil-security-item { flex-direction: column; gap: 10px; align-items: flex-start; }
    }

    /* ── Light mode: Perfil ── */
    body.light .perfil-header h2 { color: #1e293b; }
    body.light .perfil-header p { color: #64748b; }
    body.light .perfil-card { background: #ffffff; border-color: #e2e8f0; }
    body.light .perfil-card--hero { border-image: linear-gradient(90deg, #f0f0f5 0%, #388bfd 50%, #1f6feb 100%) 1; }
    body.light .perfil-card-title { color: #1e293b; }
    body.light .perfil-card-title svg { stroke: #64748b; }
    body.light .perfil-hero-name { color: #1e293b; }
    body.light .perfil-hero-email { color: #64748b; }
    body.light .perfil-role-badge--user { background: rgba(100,116,139,0.08); border-color: #e2e8f0; color: #64748b; }
    body.light .perfil-stats { border-top-color: #e2e8f0; }
    body.light .perfil-stat { border-right-color: #e2e8f0; }
    body.light .perfil-stat-label { color: #94a3b8; }
    body.light .perfil-stat-value { color: #1e293b; }
    body.light .perfil-security-item { background: #f8fafc; border-color: #e2e8f0; }
    body.light .perfil-security-label { color: #1e293b; }
    body.light .perfil-security-desc { color: #64748b; }
    body.light .perfil-btn { background: #ffffff; border-color: #e2e8f0; color: #475569; }
    body.light .perfil-btn:hover { border-color: #58a6ff; color: #f0f0f5; background: rgba(255,255,255,0.04); }
    body.light .perfil-btn-edit { color: #f0f0f5; border-color: #e2e8f0; }
    body.light .perfil-btn-edit:hover { background: rgba(255,255,255,0.06); border-color: #58a6ff; }
    body.light .perfil-field input { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
    body.light .perfil-badge-inactive { background: rgba(248,81,73,0.06); border-color: rgba(248,81,73,0.15); }

    /* ── Security expandable panels ── */
    .perfil-security-wrapper { margin-bottom: 10px; }
    .perfil-security-wrapper:last-child { margin-bottom: 0; }
    .perfil-security-wrapper .perfil-security-item { margin-bottom: 0; }

    .perfil-expand-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
      opacity: 0;
    }
    .perfil-expand-panel.open {
      max-height: 700px;
      opacity: 1;
    }
    .perfil-expand-inner {
      background: #0d1117;
      border: 1px solid #21262d;
      border-top: none;
      border-radius: 0 0 10px 10px;
      padding: 20px;
    }
    .perfil-expand-panel.open + .perfil-security-item,
    .perfil-security-item.panel-open {
      border-radius: 10px 10px 0 0;
    }

    /* Password form */
    .perfil-pwd-group {
      position: relative;
      margin-bottom: 14px;
    }
    .perfil-pwd-group label {
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      color: #6e7681;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
    }
    .perfil-pwd-group input {
      width: 100%;
      padding: 9px 42px 9px 14px;
      border-radius: 8px;
      border: 1px solid #21262d;
      background: #161b22;
      color: #e6edf3;
      font-size: 0.82rem;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }
    .perfil-pwd-group input:focus {
      border-color: #58a6ff;
    }
    .perfil-eye-toggle {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(2px);
      background: transparent;
      border: none;
      color: #6e7681;
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s;
    }
    .perfil-eye-toggle:hover { color: #f0f0f5; }
    .perfil-eye-toggle svg { width: 18px; height: 18px; }

    .perfil-pwd-actions {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }
    .perfil-edit-actions { display: flex; gap: 10px; }

    /* Editable state pros inputs */
    .perfil-field input.editable,
    .perfil-field input:not([readonly]):not([disabled]) {
      background: rgba(255,255,255,0.02);
      border-color: rgba(255,255,255,0.16);
    }
    .perfil-field input:not([readonly]):not([disabled]):focus {
      border-color: rgba(88,166,255,0.5);
      box-shadow: 0 0 0 3px rgba(88,166,255,0.1);
    }

    /* Session list */
    .perfil-session-item {
      display: flex; align-items: center; justify-content: space-between;
      gap: 14px; padding: 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      transition: border-color 0.18s, background 0.18s;
    }
    .perfil-session-item:hover { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); }
    .perfil-session-item.current { border-color: rgba(63,185,80,0.3); background: rgba(63,185,80,0.04); }
    .perfil-session-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
    .perfil-session-icon {
      width: 38px; height: 38px; border-radius: 10px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center;
      color: #9ca3af; flex-shrink: 0;
    }
    .perfil-session-icon svg { width: 18px; height: 18px; }
    .perfil-session-info { flex: 1; min-width: 0; }
    .perfil-session-title { color: #f0f0f5; font-weight: 700; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 8px; }
    .perfil-session-current-pill {
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 3px 8px; border-radius: 4px;
      background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid rgba(63,185,80,0.3);
    }
    .perfil-session-meta { color: #6b7280; font-size: 0.76rem; margin-top: 3px; }
    .perfil-session-revoke {
      padding: 6px 12px; border-radius: 7px; cursor: pointer;
      background: none; border: 1px solid rgba(255,255,255,0.08);
      color: #9ca3af; font-size: 0.76rem; font-weight: 700; font-family: inherit;
      transition: all 0.15s;
    }
    .perfil-session-revoke:hover { color: #f85149; border-color: rgba(248,81,73,0.35); background: rgba(248,81,73,0.05); }

    /* Email preferences */
    .perfil-pref-row {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 12px; border-radius: 10px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.05);
      cursor: pointer;
      transition: border-color 0.18s, background 0.18s;
    }
    .perfil-pref-row:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
    .perfil-pref-row input[type="checkbox"] {
      appearance: none; -webkit-appearance: none;
      width: 20px; height: 20px;
      border-radius: 5px;
      border: 1.5px solid rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.03);
      cursor: pointer; flex-shrink: 0;
      position: relative; margin-top: 2px;
      transition: all 0.15s;
    }
    .perfil-pref-row input[type="checkbox"]:checked {
      background: #58a6ff; border-color: #58a6ff;
    }
    .perfil-pref-row input[type="checkbox"]:checked::after {
      content: ''; position: absolute;
      left: 6px; top: 2px; width: 5px; height: 10px;
      border: solid #fff; border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .perfil-pref-title { color: #f0f0f5; font-weight: 700; font-size: 0.86rem; }
    .perfil-pref-desc  { color: #9ca3af; font-size: 0.76rem; margin-top: 3px; line-height: 1.5; }
    .perfil-pwd-save {
      padding: 8px 22px;
      border-radius: 8px;
      border: none;
      background: #58a6ff;
      color: #0d1117;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.2s, transform 0.1s;
    }
    .perfil-pwd-save:hover { background: #79b8ff; }
    .perfil-pwd-save:active { transform: scale(0.97); }
    .perfil-pwd-cancel {
      padding: 8px 22px;
      border-radius: 8px;
      border: 1px solid #30363d;
      background: transparent;
      color: #8b949e;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .perfil-pwd-cancel:hover { border-color: #6e7681; color: #c9d1d9; }

    .perfil-pwd-msg {
      font-size: 0.75rem;
      margin-top: 10px;
      padding: 8px 12px;
      border-radius: 6px;
      display: none;
    }
    .perfil-pwd-msg.error {
      display: block;
      background: rgba(248,81,73,0.1);
      border: 1px solid rgba(248,81,73,0.25);
      color: #f85149;
    }
    .perfil-pwd-msg.success {
      display: block;
      background: rgba(63,185,80,0.1);
      border: 1px solid rgba(63,185,80,0.25);
      color: #3fb950;
    }

    /* 2FA panel - wizard */
    .twofa-wizard { max-width: 360px; margin: 0 auto; text-align: center; }
    .twofa-step { display: none; animation: twofaFadeIn 0.3s ease; }
    .twofa-step.active { display: block; }
    @keyframes twofaFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    .twofa-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
    .twofa-dot { width: 10px; height: 10px; border-radius: 50%; background: #30363d; transition: color 0.12s, border-color 0.12s, background-color 0.12s, opacity 0.12s; }
    .twofa-dot.active { background: #58a6ff; box-shadow: 0 0 8px rgba(255,255,255,0.4); }
    .twofa-dots-label { font-size: 0.7rem; color: #6e7681; font-weight: 600; margin-left: 8px; }

    .twofa-title {
      font-size: 0.9rem;
      font-weight: 700;
      color: #e6edf3;
      margin-bottom: 4px;
    }
    .twofa-subtitle {
      font-size: 0.78rem;
      color: #8b949e;
      margin-bottom: 20px;
      line-height: 1.4;
    }
    .twofa-qr-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .twofa-qr-box {
      background: #ffffff;
      border-radius: 14px;
      padding: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
    }
    .twofa-qr-box canvas, .twofa-qr-box img { border-radius: 4px; display: block; width: 180px !important; height: 180px !important; }

    .twofa-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0;
    }
    .twofa-divider::before, .twofa-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #21262d;
    }
    .twofa-divider span {
      font-size: 0.7rem;
      color: #6e7681;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .twofa-manual-label {
      font-size: 0.72rem;
      color: #8b949e;
      margin-bottom: 10px;
      font-weight: 600;
      text-align: center;
    }
    .twofa-secret-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-bottom: 22px;
    }
    .twofa-secret-code {
      width: 100%;
      font-family: 'Courier New', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.15em;
      color: #f0f0f5;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 10px;
      padding: 12px 14px;
      text-align: center;
      font-weight: 700;
      user-select: all;
      word-break: break-all;
      line-height: 1.4;
    }
    .twofa-copy-btn {
      padding: 8px 20px;
      border-radius: 8px;
      border: 1px solid #30363d;
      background: #161b22;
      color: #c9d1d9;
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
      white-space: nowrap;
    }
    .twofa-copy-btn:hover { border-color: #58a6ff; color: #f0f0f5; background: rgba(255,255,255,0.06); }

    .twofa-next-btn {
      display: block;
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: none;
      background: linear-gradient(135deg, #f0f0f5 0%, #388bfd 100%);
      color: #ffffff;
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: opacity 0.2s, transform 0.1s;
      margin-bottom: 10px;
    }
    .twofa-next-btn:hover { opacity: 0.9; }
    .twofa-next-btn:active { transform: scale(0.97); }

    .twofa-cancel-link {
      display: block;
      background: none;
      border: none;
      color: #8b949e;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      padding: 8px;
      transition: color 0.2s;
    }
    .twofa-cancel-link:hover { color: #e6edf3; }

    .twofa-code-group {
      margin-bottom: 20px;
    }
    .twofa-code-group label {
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      color: #8b949e;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
    }
    .twofa-code-group input {
      width: 100%;
      height: 48px;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid #21262d;
      background: #161b22;
      color: #e6edf3;
      font-size: 1.5rem;
      font-family: 'Courier New', monospace;
      letter-spacing: 0.6em;
      text-align: center;
      font-weight: 700;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
    }
    .twofa-code-group input:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }

    .twofa-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .twofa-verify-btn {
      display: block;
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: none;
      background: linear-gradient(135deg, #3fb950 0%, #2ea043 100%);
      color: #ffffff;
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: opacity 0.2s, transform 0.1s;
    }
    .twofa-verify-btn:hover { opacity: 0.9; }
    .twofa-verify-btn:active { transform: scale(0.97); }

    .twofa-back-link {
      display: block;
      background: none;
      border: none;
      color: #8b949e;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      padding: 8px;
      transition: color 0.2s;
    }
    .twofa-back-link:hover { color: #e6edf3; }

    .twofa-msg {
      font-size: 0.75rem;
      margin-top: 12px;
      padding: 10px 14px;
      border-radius: 8px;
      display: none;
    }
    .twofa-msg.error {
      display: block;
      background: rgba(248,81,73,0.08);
      border: 1px solid rgba(248,81,73,0.2);
      color: #f85149;
    }
    .twofa-msg.success {
      display: block;
      background: rgba(63,185,80,0.08);
      border: 1px solid rgba(63,185,80,0.2);
      color: #3fb950;
    }

    .perfil-badge-activate {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background: rgba(248,81,73,0.1);
      border: 1px solid rgba(248,81,73,0.25);
      color: #f85149;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .perfil-badge-activate:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.3);
      color: #f0f0f5;
    }
    .perfil-badge-active {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background: rgba(63,185,80,0.1);
      border: 1px solid rgba(63,185,80,0.25);
      color: #3fb950;
    }

    /* ── Light mode: Security panels ── */
    body.light .perfil-expand-inner { background: #f8fafc; border-color: #e2e8f0; }
    body.light .perfil-pwd-group input { background: #ffffff; border-color: #e2e8f0; color: #1e293b; }
    body.light .perfil-pwd-group input:focus { border-color: #58a6ff; }
    body.light .perfil-pwd-group label { color: #64748b; }
    body.light .perfil-eye-toggle { color: #94a3b8; }
    body.light .perfil-eye-toggle:hover { color: #f0f0f5; }
    body.light .perfil-pwd-cancel { border-color: #e2e8f0; color: #64748b; }
    body.light .perfil-pwd-cancel:hover { border-color: #94a3b8; color: #1e293b; }
    body.light .twofa-title { color: #1e293b; }
    body.light .twofa-subtitle { color: #64748b; }
    body.light .twofa-manual-label { color: #64748b; }
    body.light .twofa-secret-code { background: #f0f7ff; color: #2563eb; border-color: rgba(37,99,235,0.25); }
    body.light .twofa-copy-btn { background: #ffffff; border-color: #e2e8f0; color: #475569; }
    body.light .twofa-copy-btn:hover { border-color: #58a6ff; color: #f0f0f5; background: #f0f7ff; }
    body.light .twofa-code-group input { background: #ffffff; border-color: #e2e8f0; color: #1e293b; }
    body.light .twofa-code-group input:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
    body.light .twofa-code-group label { color: #64748b; }
    body.light .twofa-qr-box { box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); }
    body.light .twofa-dot { background: #e2e8f0; }
    body.light .twofa-dot.active { background: #2563eb; box-shadow: 0 0 8px rgba(37,99,235,0.3); }
    body.light .twofa-divider::before, body.light .twofa-divider::after { background: #e2e8f0; }
    body.light .twofa-divider span { color: #94a3b8; }
    body.light .twofa-cancel-link { color: #64748b; }
    body.light .twofa-cancel-link:hover { color: #1e293b; }
    body.light .twofa-back-link { color: #64748b; }
    body.light .twofa-back-link:hover { color: #1e293b; }
    body.light .twofa-dots-label { color: #94a3b8; }
    body.light .perfil-badge-activate { background: rgba(248,81,73,0.06); border-color: rgba(248,81,73,0.15); }
    body.light .perfil-badge-activate:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: #2563eb; }

    /* ══════════════════════════════════════════════════════════
       TOAST NOTIFICATIONS (substitui alert/window.alert)
    ══════════════════════════════════════════════════════════ */
    #bmToastContainer {
      position: fixed; top: 20px; right: 20px;
      z-index: 99999;
      display: flex; flex-direction: column; gap: 10px;
      pointer-events: none;
      max-width: calc(100vw - 40px);
    }
    .bm-toast {
      pointer-events: auto;
      min-width: 280px; max-width: 420px;
      background: linear-gradient(180deg, rgba(20,22,32,0.96), rgba(13,17,23,0.98));
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 14px 16px;
      box-shadow: 0 18px 50px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
      display: flex; gap: 12px; align-items: flex-start;
      animation: bmToastIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    .bm-toast.success { border-color: rgba(63,185,80,0.35); }
    .bm-toast.error   { border-color: rgba(248,81,73,0.35); }
    .bm-toast.warn    { border-color: rgba(255,240,0,0.35); }
    .bm-toast.info    { border-color: rgba(255,255,255,0.35); }
    .bm-toast.leaving { animation: bmToastOut 0.28s ease-in both; }
    @keyframes bmToastIn {
      from { opacity: 0; transform: translateX(60px) scale(0.95); }
      to   { opacity: 1; transform: translateX(0) scale(1); }
    }
    @keyframes bmToastOut {
      from { opacity: 1; transform: translateX(0); }
      to   { opacity: 0; transform: translateX(60px) scale(0.95); }
    }
    .bm-toast-icon {
      width: 30px; height: 30px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .bm-toast.success .bm-toast-icon { background: rgba(63,185,80,0.12);  color: #3fb950; }
    .bm-toast.error   .bm-toast-icon { background: rgba(248,81,73,0.12);  color: #f85149; }
    .bm-toast.warn    .bm-toast-icon { background: rgba(255,240,0,0.1);   color: #fff000; }
    .bm-toast.info    .bm-toast-icon { background: rgba(255,255,255,0.12); color: #f0f0f5; }
    .bm-toast-icon svg { width: 18px; height: 18px; }
    .bm-toast-body { flex: 1; min-width: 0; }
    .bm-toast-title { color: #f0f0f5; font-weight: 800; font-size: 0.9rem; letter-spacing: -0.01em; }
    .bm-toast-msg { color: #c9d1d9; font-size: 0.82rem; line-height: 1.5; margin-top: 3px; }
    .bm-toast-close {
      background: none; border: none; cursor: pointer;
      color: #6b7280; padding: 2px;
      transition: color 0.15s;
    }
    .bm-toast-close:hover { color: #f0f0f5; }
    .bm-toast-close svg { width: 14px; height: 14px; }

    /* Confetti / celebration */
    .bm-confetti {
      position: fixed; inset: 0;
      pointer-events: none; z-index: 99998;
    }
    .bm-confetti span {
      position: absolute; top: -10px;
      width: 8px; height: 14px;
      animation: bmConfettiFall var(--dur, 3s) ease-in var(--delay, 0s) forwards;
      opacity: 0;
    }
    @keyframes bmConfettiFall {
      0%   { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0deg); }
      8%   { opacity: 1; }
      100% { opacity: 0; transform: translate3d(var(--drift, 50px), 110vh, 0) rotate(720deg); }
    }

    /* ══════════════════════════════════════════════════════════
       BILLING TAB Minha Assinatura (premium v2)
    ══════════════════════════════════════════════════════════ */
    @keyframes billingSpin { to { transform: rotate(360deg); } }
    @keyframes bFadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes bPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0.4); }
      50%      { box-shadow: 0 0 0 7px rgba(63,185,80,0); }
    }
    @keyframes bPulsePending {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255,240,0,0.4); }
      50%      { box-shadow: 0 0 0 7px rgba(255,240,0,0); }
    }
    @keyframes bShimmer {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    @keyframes bOrbDrift1 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%      { transform: translate(45px, -28px) scale(1.08); }
      66%      { transform: translate(-22px, 30px) scale(0.94); }
    }
    @keyframes bOrbDrift2 {
      0%, 100% { transform: translate(0, 0) scale(0.95); }
      50%      { transform: translate(-40px, 25px) scale(1.1); }
    }

    /* Container com background animado */
    .billing-wrap {
      max-width: 1140px; margin: 0 auto;
      padding: 28px 8px 80px;
      position: relative;
      isolation: isolate;
    }
    .billing-wrap::before,
    .billing-wrap::after {
      content: ''; position: absolute; pointer-events: none;
      border-radius: 50%; filter: blur(80px);
      z-index: -1;
    }
    .billing-wrap::before {
      width: 380px; height: 380px;
      background: radial-gradient(circle, rgba(255,240,0,0.07), transparent 60%);
      top: -50px; right: -100px;
      animation: bOrbDrift1 18s ease-in-out infinite;
    }
    .billing-wrap::after {
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 60%);
      top: 320px; left: -80px;
      animation: bOrbDrift2 22s ease-in-out infinite;
    }

    .billing-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
      animation: bFadeUp 0.5s ease-out both;
    }
    .billing-title {
      font-size: 2rem; color: #f0f0f5; font-weight: 800;
      letter-spacing: -0.025em; margin: 0;
      background: linear-gradient(135deg, #f4f4f6 0%, #9ca3af 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .billing-subtitle { color: #9ca3af; font-size: 0.95rem; margin-top: 6px; line-height: 1.5; }
    .billing-status-pill {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 16px; border-radius: 999px;
      font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em;
      text-transform: uppercase;
      backdrop-filter: blur(10px);
    }
    .billing-status-pill.active   { background: rgba(63,185,80,0.12);  color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
    .billing-status-pill.active .dot { animation: bPulse 2s ease-out infinite; }
    .billing-status-pill.pending  { background: rgba(255,159,0,0.1);   color: #ff9f00; border: 1px solid rgba(255,159,0,0.3); }
    .billing-status-pill.pending .dot { animation: bPulsePending 1.6s ease-out infinite; }
    .billing-status-pill.overdue  { background: rgba(248,81,73,0.1);   color: #f85149; border: 1px solid rgba(248,81,73,0.3); }
    .billing-status-pill.cancelled,
    .billing-status-pill.none     { background: rgba(255,255,255,0.04); color: #9ca3af; border: 1px solid rgba(255,255,255,0.1); }
    .billing-status-pill.legacy   { background: rgba(255,255,255,0.1);  color: #f0f0f5; border: 1px solid rgba(255,255,255,0.3); }
    .billing-status-pill .dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: currentColor;
    }

    .billing-card {
      --mx: 50%; --my: 50%;
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 24px 26px;
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
    }
    /* gradient border */
    .billing-card::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 16px; padding: 1px;
      background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 50%, rgba(255,255,255,0.03));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      pointer-events: none; opacity: 0.7;
      z-index: 1;
    }
    /* (Spotlight 3D removido — era caro com rAF + radial-gradient + blur) */
    .billing-card:hover {
      border-color: rgba(255,255,255,0.16);
      transform: translateY(-1px);
    }
    .billing-card > * { position: relative; z-index: 2; }

    /* Hero stat bento mostra o número grande + sparkline */
    .billing-hero {
      display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px;
      margin-top: 4px;
      animation: bFadeUp 0.55s ease-out both;
    }
    @media (max-width: 760px) { .billing-hero { grid-template-columns: 1fr; } }
    .hero-stat-card {
      padding: 28px 30px;
      position: relative;
      min-height: 180px;
      display: flex; flex-direction: column;
      justify-content: space-between;
    }
    .hero-stat-card .hero-label {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 0.72rem; color: #6b7280;
      font-weight: 800; letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .hero-stat-card .hero-label svg { width: 13px; height: 13px; }
    .hero-stat-card .hero-num {
      font-size: 4.2rem; font-weight: 900;
      letter-spacing: -0.045em; line-height: 0.95;
      background: linear-gradient(135deg, #f4f4f6 0%, #58a6ff 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 14px 0 4px;
    }
    .hero-stat-card .hero-sub { color: #9ca3af; font-size: 0.86rem; }
    .hero-sparkline {
      width: 100%; height: 56px; margin-top: 14px;
      overflow: visible; /* deixa a bolinha + glow renderizar fora do viewBox */
    }
    .hero-sparkline path.line {
      fill: none; stroke: url(#sparkStroke); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      stroke-dasharray: 600; stroke-dashoffset: 600;
      animation: bDrawLine 1.6s ease-out 0.3s forwards;
    }
    .hero-sparkline path.area { fill: url(#sparkFill); opacity: 0; animation: bFadeIn 0.6s ease-out 1.2s forwards; }
    .hero-sparkline circle.dot {
      fill: #58a6ff; opacity: 0;
      animation: bFadeIn 0.4s ease-out 1.6s forwards;
      filter: drop-shadow(0 0 4px rgba(88,166,255,0.8));
    }
    @keyframes bDrawLine { to { stroke-dashoffset: 0; } }
    @keyframes bFadeIn   { to { opacity: 1; } }

    .donut-card { padding: 28px 30px; display: flex; align-items: center; gap: 22px; min-height: 180px; }
    .donut-wrap { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
    .donut-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .donut-wrap .donut-bg { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 12; }
    .donut-wrap .donut-seg { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1); }
    .donut-wrap .donut-center {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .donut-wrap .donut-center .num { font-size: 1.55rem; font-weight: 900; color: #f0f0f5; letter-spacing: -0.02em; }
    .donut-wrap .donut-center .lbl { font-size: 0.62rem; color: #6b7280; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
    .donut-legend { display: flex; flex-direction: column; gap: 9px; flex: 1; }
    .donut-legend .legend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .donut-legend .legend-name { display: inline-flex; align-items: center; gap: 8px; color: #c9d1d9; font-size: 0.84rem; font-weight: 600; }
    .donut-legend .legend-dot { width: 8px; height: 8px; border-radius: 2px; }
    .donut-legend .legend-val { color: #f0f0f5; font-size: 0.82rem; font-weight: 800; }
    .billing-card-label {
      font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em;
      color: #6b7280; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .billing-card-label svg { width: 14px; height: 14px; }

    /* Stagger entrance for child cards */
    #billingContent .billing-card { animation: bFadeUp 0.55s ease-out both; }
    #billingContent .billing-grid-2 .billing-card:nth-child(1) { animation-delay: 0.08s; }
    #billingContent .billing-grid-2 .billing-card:nth-child(2) { animation-delay: 0.16s; }
    #billingContent > .billing-card:nth-of-type(2) { animation-delay: 0.24s; }
    #billingContent > .billing-card:nth-of-type(3) { animation-delay: 0.32s; }
    #billingContent > .billing-card:nth-of-type(4) { animation-delay: 0.40s; }
    #billingContent > .billing-card:nth-of-type(5) { animation-delay: 0.48s; }
    .overage-banner { animation: bFadeUp 0.5s ease-out both; }
    .billing-grid-2 {
      display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px;
      margin-top: 18px;
    }
    @media (max-width: 760px) { .billing-grid-2 { grid-template-columns: 1fr; } }

    .billing-plan-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 16px; margin-top: 16px; flex-wrap: wrap;
    }
    .billing-plan-name {
      font-size: 1.65rem; color: #f0f0f5; font-weight: 800;
      letter-spacing: -0.025em; line-height: 1.1;
    }
    .billing-plan-desc { color: #9ca3af; font-size: 0.88rem; margin-top: 6px; line-height: 1.5; max-width: 320px; }
    .billing-plan-price {
      display: inline-flex; align-items: baseline;
      font-variant-numeric: tabular-nums;
    }
    .billing-plan-price strong {
      font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em;
      line-height: 1;
      background: linear-gradient(135deg, #58a6ff 0%, #1f6feb 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .billing-plan-price .curr {
      font-size: 1rem; font-weight: 600;
      margin-right: 4px;
      color: #9ca3af;
      align-self: flex-start; padding-top: 6px;
    }
    .billing-plan-price .per {
      font-size: 0.82rem; font-weight: 500;
      margin-left: 6px;
      color: #6b7280;
    }
    .billing-meta-row {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
      margin-top: 22px; padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    @media (max-width: 600px) { .billing-meta-row { grid-template-columns: 1fr 1fr; } }
    .billing-meta-lbl {
      font-size: 0.68rem; color: #6b7280; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .billing-meta-val { color: #f0f0f5; font-size: 0.96rem; font-weight: 700; margin-top: 5px; }

    .billing-payment-block {
      margin-top: 16px;
      display: flex; align-items: center; gap: 14px;
      padding: 16px 18px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      transition: border-color 0.2s, background 0.2s;
    }
    .billing-payment-block:hover {
      border-color: rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
    }
    .pay-icon {
      width: 44px; height: 44px; border-radius: 10px;
      background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .pay-icon svg { width: 22px; height: 22px; color: #f0f0f5; }
    .pay-icon.pix svg { color: #00bca5; }

    /* Usage widget premium */
    .usage-main {
      display: flex; align-items: baseline; justify-content: space-between;
      margin-top: 18px; gap: 12px;
    }
    .usage-numbers .usage-total {
      font-size: 3rem; font-weight: 900; letter-spacing: -0.035em;
      line-height: 1;
      background: linear-gradient(135deg, #f4f4f6 0%, #9ca3af 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }
    .usage-numbers .usage-limit { color: #9ca3af; font-size: 0.88rem; margin-top: 6px; font-weight: 600; }
    .usage-percent {
      font-size: 1.4rem; font-weight: 900; color: #9ca3af;
      letter-spacing: -0.02em;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .usage-percent.warn { color: #ff9f00; background: rgba(255,159,0,0.08); border-color: rgba(255,159,0,0.25); }
    .usage-percent.over { color: #f85149; background: rgba(248,81,73,0.08); border-color: rgba(248,81,73,0.25); }
    .usage-bar-wrap {
      margin-top: 16px;
      width: 100%; height: 10px;
      background: rgba(255,255,255,0.04);
      border-radius: 999px; overflow: hidden;
      position: relative;
    }
    .usage-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #3fb950 0%, #f0f0f5 100%);
      border-radius: 999px;
      transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 16px -2px rgba(63,185,80,0.5);
    }
    .usage-bar-fill::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
      animation: bShimmer 2.4s linear infinite;
    }
    .usage-bar-fill.warn { background: linear-gradient(90deg, #58a6ff 0%, #ff9f00 100%); box-shadow: 0 0 16px -2px rgba(255,159,0,0.5); }
    .usage-bar-fill.over { background: linear-gradient(90deg, #ff9f00 0%, #f85149 100%); box-shadow: 0 0 16px -2px rgba(248,81,73,0.5); }

    .usage-breakdown {
      display: flex; gap: 10px; flex-wrap: wrap;
      margin-top: 20px; padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .usage-net-chip {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      padding: 8px 12px; border-radius: 9px;
      font-size: 0.8rem;
      transition: border-color 0.2s, transform 0.2s;
    }
    .usage-net-chip:hover { border-color: rgba(255,255,255,0.14); transform: translateY(-1px); }
    .usage-net-chip .net-name { color: #9ca3af; font-weight: 600; }
    .usage-net-chip .net-count { color: #f0f0f5; font-weight: 800; }
    .usage-net-chip .net-dot { width: 6px; height: 6px; border-radius: 50%; }
    .usage-net-chip[data-net="tiktok"]   .net-dot { background: #ff0050; }
    .usage-net-chip[data-net="facebook"] .net-dot { background: #1877f2; }
    .usage-net-chip[data-net="kwai"]     .net-dot { background: #ff8000; }
    .usage-net-chip[data-net="taboola"]  .net-dot { background: #9c27b0; }

    /* Networks grid premium com brand colors */
    .networks-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    }
    @media (max-width: 900px) { .networks-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .networks-grid { grid-template-columns: 1fr; } }
    .net-card {
      background: linear-gradient(180deg, rgba(20,22,32,0.6), rgba(13,17,23,0.8));
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 18px 16px 16px;
      display: flex; flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
      min-height: 200px;
    }
    .net-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--net-accent, #6b7280);
      opacity: 0.85;
    }
    .net-card[data-net="tiktok"]   { --net-accent: linear-gradient(90deg, #00f2ea, #ff0050); }
    .net-card[data-net="facebook"] { --net-accent: #1877f2; }
    .net-card[data-net="kwai"]     { --net-accent: linear-gradient(90deg, #ff8000, #ff5500); }
    .net-card[data-net="taboola"]  { --net-accent: linear-gradient(90deg, #9c27b0, #5b21b6); }

    .net-card:hover {
      transform: translateY(-3px);
      border-color: rgba(255,255,255,0.18);
      box-shadow: 0 18px 40px -22px rgba(0,0,0,0.7);
    }
    .net-card.active   { border-color: rgba(63,185,80,0.35); }
    .net-card.active::after {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(63,185,80,0.08), transparent 70%);
      pointer-events: none;
    }
    .net-card.included { border-color: rgba(255,255,255,0.3); }
    .net-card.pending  { border-color: rgba(255,159,0,0.35); }
    .net-card.legacy   { border-color: rgba(255,255,255,0.25); }

    .net-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
    .net-logo-wrap {
      display: inline-flex; align-items: center; gap: 9px;
    }
    .net-logo-icon {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 8px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .net-logo-icon svg { width: 16px; height: 16px; }
    .net-logo-name { font-size: 0.92rem; font-weight: 800; color: #f0f0f5; letter-spacing: -0.01em; }
    .net-status {
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
      backdrop-filter: blur(6px);
    }
    .net-card.active    .net-status { background: rgba(63,185,80,0.15);  color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
    .net-card.included  .net-status { background: rgba(255,255,255,0.12); color: #f0f0f5; border: 1px solid rgba(255,255,255,0.3); }
    .net-card.legacy    .net-status { background: rgba(255,255,255,0.1);  color: #f0f0f5; border: 1px solid rgba(255,255,255,0.25); }
    .net-card.pending   .net-status { background: rgba(255,159,0,0.12);  color: #ff9f00; border: 1px solid rgba(255,159,0,0.3); }
    .net-card.locked    .net-status,
    .net-card.available .net-status { background: rgba(255,255,255,0.06); color: #9ca3af; border: 1px solid rgba(255,255,255,0.08); }

    .net-meta { color: #9ca3af; font-size: 0.8rem; line-height: 1.55; flex: 1; }
    .net-meta strong { color: #f0f0f5; font-weight: 700; }
    .net-action {
      margin-top: 14px;
      background: linear-gradient(135deg, #f0f0f5 0%, #d4d4d8 100%);
      color: #07090f;
      border: none; border-radius: 9px;
      padding: 10px 14px;
      font-size: 0.82rem; font-weight: 800;
      cursor: pointer; font-family: inherit;
      transition: transform 0.15s, box-shadow 0.2s;
      box-shadow: 0 6px 14px -6px rgba(255,255,255,0.18);
    }
    .net-action:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px -8px rgba(255,255,255,0.32);
    }
    .net-action:disabled { opacity: 0.4; cursor: not-allowed; }
    .net-action.cancel {
      background: none; color: #9ca3af;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: none;
    }
    .net-action.cancel:hover { color: #f85149; border-color: rgba(248,81,73,0.3); background: rgba(248,81,73,0.05); }

    /* Overage banner */
    .overage-banner {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 18px;
      background: rgba(248,81,73,0.06);
      border: 1px solid rgba(248,81,73,0.25);
      border-radius: 12px;
      margin-bottom: 18px;
    }
    .overage-icon { font-size: 1.4rem; }
    .overage-info .overage-title { color: #f0f0f5; font-weight: 700; font-size: 0.92rem; }
    .overage-info .overage-detail { color: #c9d1d9; font-size: 0.82rem; margin-top: 2px; }

    /* Invoice filters */
    .inv-filter {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #9ca3af;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 0.74rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
    }
    .inv-filter:hover { color: #f0f0f5; border-color: rgba(255,255,255,0.16); }
    .inv-filter.active {
      background: #58a6ff;
      color: #ffffff;
      border-color: transparent;
    }
    .inv-filter span {
      display: inline-block;
      min-width: 16px;
      margin-left: 4px;
      padding: 1px 5px;
      border-radius: 999px;
      background: rgba(255,255,255,0.15);
      font-size: 0.65rem;
      font-weight: 800;
    }
    .inv-filter.active span { background: rgba(0,0,0,0.2); }

    /* Invoice row */
    .invoice-row {
      display: grid;
      grid-template-columns: 90px 1fr 110px 100px 130px;
      gap: 12px;
      align-items: center;
      padding: 14px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      transition: background 0.15s;
    }
    @media (max-width: 700px) {
      .invoice-row { grid-template-columns: 1fr 1fr; }
      .invoice-row .inv-due { grid-column: 1; }
      .invoice-row .inv-desc { grid-column: 1 / -1; order: 2; }
      .invoice-row .inv-value { text-align: left; }
      .invoice-row .inv-status { justify-self: end; }
      .invoice-row .inv-actions { grid-column: 1 / -1; justify-self: stretch; }
    }
    .invoice-row:hover { background: rgba(255,255,255,0.02); }
    .invoice-row .inv-due { color: #c9d1d9; font-size: 0.84rem; font-weight: 600; }
    .invoice-row .inv-due small { display: block; color: #6b7280; font-size: 0.7rem; margin-top: 2px; }
    .invoice-row .inv-desc { color: #f0f0f5; font-size: 0.86rem; }
    .invoice-row .inv-desc small { display: block; color: #6b7280; font-size: 0.72rem; margin-top: 2px; }
    .invoice-row .inv-value { color: #f0f0f5; font-weight: 800; font-size: 0.94rem; text-align: right; letter-spacing: -0.01em; }
    .invoice-row .inv-status { display: inline-flex; align-items: center; gap: 6px; }
    .inv-pill {
      font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
      text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
    }
    .inv-pill.paid     { background: rgba(63,185,80,0.12);  color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
    .inv-pill.pending  { background: rgba(255,159,0,0.1);   color: #ff9f00; border: 1px solid rgba(255,159,0,0.3); }
    .inv-pill.overdue  { background: rgba(248,81,73,0.1);   color: #f85149; border: 1px solid rgba(248,81,73,0.3); }
    .inv-pill.refunded { background: rgba(255,255,255,0.06); color: #9ca3af; border: 1px solid rgba(255,255,255,0.1); }
    .invoice-row .inv-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .inv-btn {
      background: rgba(88,166,255,0.1);
      border: 1px solid rgba(88,166,255,0.3);
      color: #58a6ff;
      padding: 6px 11px;
      border-radius: 7px;
      font-size: 0.74rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      transition: all 0.15s;
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .inv-btn:hover { background: rgba(88,166,255,0.18); border-color: rgba(88,166,255,0.5); }
    .inv-btn.secondary { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #9ca3af; }
    .inv-btn.secondary:hover { color: #f0f0f5; border-color: rgba(255,255,255,0.18); }
    .inv-btn svg { width: 12px; height: 12px; }

    /* Invoice type chip */
    .inv-type-chip {
      display: inline-block;
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #9ca3af;
      margin-right: 6px;
    }
    .inv-type-chip[data-t="overage"] { background: rgba(255,140,0,0.08); border-color: rgba(255,140,0,0.3); color: #ffa940; }
    .inv-type-chip[data-t="addon"]   { background: rgba(156,39,176,0.08); border-color: rgba(156,39,176,0.3); color: #c77dff; }
    .inv-type-chip[data-t="subscription"] { background: rgba(88,166,255,0.08); border-color: rgba(88,166,255,0.3); color: #58a6ff; }

    /* Payment history (existing) */
    .pay-history-table { width: 100%; border-collapse: collapse; }
    .pay-history-table th {
      text-align: left; padding: 8px 10px;
      font-size: 0.72rem; color: #6b7280; font-weight: 700;
      letter-spacing: 0.04em; text-transform: uppercase;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .pay-history-table td {
      padding: 10px;
      color: #c9d1d9; font-size: 0.84rem;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .pay-history-table .pay-pill {
      font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .pay-history-table .pay-pill.received { background: rgba(63,185,80,0.1); color: #3fb950; }
    .pay-history-table .pay-pill.pending  { background: rgba(255,159,0,0.08); color: #ff9f00; }
    .pay-history-table .pay-pill.overdue  { background: rgba(248,81,73,0.08); color: #f85149; }
    .pay-history-table .pay-pill.refunded { background: rgba(255,255,255,0.06); color: #9ca3af; }

    /* Buttons */
    .btn-billing-secondary {
      background: rgba(255,255,255,0.04); color: #f0f0f5;
      border: 1px solid rgba(255,255,255,0.1);
      padding: 9px 16px; border-radius: 8px;
      font-size: 0.85rem; font-weight: 600;
      cursor: pointer; font-family: inherit;
      transition: all 0.15s;
    }
    .btn-billing-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
    .btn-billing-primary {
      background: #58a6ff; color: #07090f;
      border: none;
      padding: 9px 16px; border-radius: 8px;
      font-size: 0.85rem; font-weight: 700;
      cursor: pointer; font-family: inherit;
      transition: background 0.15s;
    }
    .btn-billing-primary:hover { background: #fff; }
    .btn-danger {
      background: rgba(248,81,73,0.08); color: #f85149;
      border: 1px solid rgba(248,81,73,0.25);
      padding: 9px 18px; border-radius: 8px;
      font-size: 0.85rem; font-weight: 700;
      cursor: pointer; font-family: inherit;
      transition: all 0.15s;
    }
    .btn-danger:hover { background: rgba(248,81,73,0.16); border-color: rgba(248,81,73,0.4); }
    .billing-danger { border-color: rgba(248,81,73,0.18); }

    /* Generic modal */
    .bm-modal {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
      z-index: 9500;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    .bm-modal-box {
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 28px;
      max-width: 480px; width: 100%;
    }
    .bm-modal-box h3 {
      font-size: 1.2rem; color: #f0f0f5; font-weight: 700;
      margin: 0 0 12px;
    }
    .bm-modal-box p {
      color: #c9d1d9; font-size: 0.9rem; line-height: 1.6;
      margin: 0 0 12px;
    }
    .bm-modal-actions {
      display: flex; gap: 10px; justify-content: flex-end;
      margin-top: 20px;
    }
    .bm-btn-secondary, .bm-btn-danger, .bm-btn-primary {
      padding: 10px 18px; border-radius: 8px;
      font-size: 0.86rem; font-weight: 700;
      cursor: pointer; font-family: inherit;
      transition: all 0.15s; border: none;
    }
    .bm-btn-secondary {
      background: none; color: #9ca3af;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .bm-btn-secondary:hover { color: #f0f0f5; border-color: rgba(255,255,255,0.2); }
    .bm-btn-danger {
      background: rgba(248,81,73,0.15); color: #f85149;
      border: 1px solid rgba(248,81,73,0.35);
    }
    .bm-btn-danger:hover { background: rgba(248,81,73,0.25); }
    .bm-btn-primary {
      background: #58a6ff; color: #07090f;
    }
    .bm-btn-primary:hover { background: #fff; }

    /* ══════════════════════════════════════════════════════════
       PRICING + CHECKOUT OVERLAY (hard paywall após login)
    ══════════════════════════════════════════════════════════ */
    #pricingOverlay {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: #07090f;
      overflow-y: auto;
      display: none;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    /* Floating orbs no fundo (like login) */
    #pricingOverlay::before,
    #pricingOverlay::after {
      content: ''; position: fixed; pointer-events: none;
      border-radius: 50%; filter: blur(100px);
      z-index: 0;
    }
    #pricingOverlay::before {
      width: 520px; height: 520px;
      background: radial-gradient(circle, rgba(255,240,0,0.06), transparent 60%);
      top: 10%; right: -10%;
      animation: bOrbDrift1 22s ease-in-out infinite;
    }
    #pricingOverlay::after {
      width: 440px; height: 440px;
      background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 60%);
      bottom: 5%; left: -8%;
      animation: bOrbDrift2 26s ease-in-out infinite;
    }
    #pricingOverlay > * { position: relative; z-index: 1; }

    /* Pricing CTA polish */
    .pricing-logout {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.04); color: #f0f0f5;
      border: 1px solid rgba(255,255,255,0.12);
      padding: 9px 16px; border-radius: 9px;
      font-size: 0.85rem; font-weight: 700;
      cursor: pointer; font-family: inherit;
      transition: all 0.18s;
    }
    .pricing-logout:hover {
      background: rgba(248,81,73,0.08);
      border-color: rgba(248,81,73,0.3);
      color: #f85149;
    }
    .pricing-logout svg { width: 14px; height: 14px; }

    /* ── Editorial typography on pricing ─────────────────── */
    .pricing-container { padding: 72px 28px 96px; max-width: 1180px; }
    .pricing-eyebrow {
      display: inline-block;
      font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: #58a6ff;
      padding: 5px 12px;
      border: 1px solid rgba(88,166,255,0.25);
      border-radius: 999px;
      background: rgba(88,166,255,0.06);
      margin-bottom: 22px;
    }
    .pricing-hero {
      text-align: center; margin-bottom: 56px;
      max-width: 720px; margin-left: auto; margin-right: auto;
    }
    .pricing-hero h1 {
      font-size: 3rem; font-weight: 700;
      color: #f0f0f5; letter-spacing: -0.035em;
      line-height: 1.05;
      font-feature-settings: "ss01" on, "cv11" on;
    }
    .pricing-hero h1 .accent {
      color: #58a6ff;
      font-weight: 700;
    }
    .pricing-hero .pricing-sub {
      color: #9ca3af; font-size: 1.02rem;
      margin-top: 18px; line-height: 1.55;
      max-width: 560px; margin-left: auto; margin-right: auto;
    }

    /* Trust line: small, single-row, hairline divider */
    .pricing-trust-line {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; flex-wrap: wrap;
      margin: 28px auto 0; max-width: 760px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,0.06);
      color: #6b7280; font-size: 0.78rem;
    }
    .pricing-trust-line strong { color: #c9d1d9; font-weight: 600; }
    .pricing-trust-line .sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.15); display: inline-block; }

    /* FAQ */
    .pricing-faq {
      margin-top: 48px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    @media (max-width: 760px) { .pricing-faq { grid-template-columns: 1fr; } }
    /* Editorial FAQ — no per-item cards, hairline dividers, generous padding */
    .pricing-faq {
      max-width: 820px;
      margin: 0 auto;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .faq-item {
      border-bottom: 1px solid rgba(255,255,255,0.07);
      transition: background 0.18s;
    }
    .faq-item:hover { background: rgba(88,166,255,0.02); }
    .faq-q {
      width: 100%;
      display: flex; align-items: center; justify-content: space-between; gap: 18px;
      background: transparent; border: none;
      padding: 22px 4px;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      color: #f0f0f5;
      font-size: 0.98rem; font-weight: 600; letter-spacing: -0.012em;
      line-height: 1.4;
    }
    .faq-q .faq-chev {
      flex-shrink: 0; width: 18px; height: 18px;
      color: #6b7280;
      transition: transform 0.25s ease, color 0.2s;
    }
    .faq-item:hover .faq-q .faq-chev { color: #c9d1d9; }
    .faq-item.open .faq-q .faq-chev { transform: rotate(180deg); color: #58a6ff; }
    .faq-a {
      max-height: 0; overflow: hidden;
      transition: max-height 0.32s ease;
    }
    .faq-item.open .faq-a { max-height: 480px; }
    .faq-a p {
      font-size: 0.92rem; color: #9ca3af; line-height: 1.65;
      margin: 0; padding: 0 4px 24px;
      max-width: 680px;
    }

    .pricing-section-h {
      margin: 88px auto 28px;
      text-align: center;
      font-size: 1.7rem;
      color: #f0f0f5;
      font-weight: 700;
      letter-spacing: -0.025em;
    }
    .pricing-section-eyebrow {
      display: block; text-align: center;
      font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #6b7280;
      margin-bottom: 8px;
    }
    .pricing-topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(7,9,15,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 18px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    /* Brand: mesmo padrão da sidebar (logo 22px + pill "Tracker") */
    .pricing-topbar .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: inherit;
    }
    .pricing-topbar .brand:hover { text-decoration: none; }
    .pricing-topbar .brand img { height: 22px; width: auto; display: block; }
    .pricing-topbar .brand .brand-tracker {
      display: inline-block;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      padding: 3px 8px;
      border-radius: 5px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      color: #d1d5db;
      text-transform: uppercase;
      white-space: nowrap;
    }
    @media (max-width: 480px) {
      .pricing-topbar { padding: 14px 18px; }
    }
    .pricing-topbar-right {
      display: inline-flex; align-items: center; gap: 12px;
    }
    .pricing-logout {
      background: none; border: 1px solid rgba(255,255,255,0.1);
      color: #9ca3af; padding: 7px 14px; border-radius: 8px;
      font-size: 0.82rem; font-weight: 600; cursor: pointer;
      font-family: inherit; transition: all 0.15s;
    }
    .pricing-logout:hover { color: #f0f0f5; border-color: rgba(255,255,255,0.2); }

    .pricing-container {
      max-width: 1140px;
      margin: 0 auto;
      padding: 60px 28px 80px;
    }
    /* (Pricing hero v2 moved up; legacy rules below kept as harmless fallback) */
    .pricing-hero p {
      color: #9ca3af; font-size: 1.02rem;
      margin-top: 14px; max-width: 580px;
      margin-left: auto; margin-right: auto; line-height: 1.55;
    }

    .pricing-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 18px;
      overflow: hidden;
      background: #0a0d12;
    }
    .plan-card {
      background: #0a0d12;
      border-right: 1px solid rgba(255,255,255,0.06);
      padding: 36px 30px 32px;
      display: flex; flex-direction: column;
      position: relative;
      transition: background 0.2s;
    }
    .plan-card:last-child { border-right: none; }
    .plan-card:hover { background: #0d1117; }
    .plan-card.popular {
      background: #0d1117;
      box-shadow: inset 0 0 0 1px rgba(88,166,255,0.35);
      z-index: 2;
    }
    .plan-card.popular::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, #58a6ff 50%, transparent);
    }
    .plan-card .popular-badge {
      position: absolute; top: 22px; right: 22px;
      color: #58a6ff;
      font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      padding: 4px 10px;
      background: rgba(88,166,255,0.08);
      border: 1px solid rgba(88,166,255,0.25);
      border-radius: 4px;
    }
    .plan-card .plan-name {
      font-size: 0.82rem; font-weight: 700;
      color: #c9d1d9; letter-spacing: 0.06em; text-transform: uppercase;
    }
    .plan-card .plan-desc {
      color: #6b7280; font-size: 0.84rem;
      margin-top: 8px; line-height: 1.55; min-height: 40px;
    }
    .plan-card .plan-price {
      margin-top: 28px;
      display: flex; align-items: baseline;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" on;
    }
    .plan-card .plan-price .pp-currency {
      font-size: 1.1rem; color: #6b7280; font-weight: 500;
      margin-right: 4px;
      align-self: flex-start; padding-top: 14px;
    }
    .plan-card .plan-price strong {
      font-size: 3rem; color: #f0f0f5; font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
    }
    .plan-card .plan-price .pp-period {
      color: #6b7280; font-size: 0.82rem; margin-left: 6px;
      font-weight: 500;
    }
    .plan-card .plan-features {
      margin-top: 28px; padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,0.06);
      list-style: none; padding-left: 0;
      display: flex; flex-direction: column; gap: 12px;
      flex: 1;
    }
    .plan-card .plan-features li {
      font-size: 0.86rem; color: #c9d1d9;
      display: flex; align-items: flex-start; gap: 10px;
      line-height: 1.5;
    }
    .plan-card .plan-features li svg {
      flex-shrink: 0; width: 14px; height: 14px;
      color: #58a6ff; margin-top: 4px;
      opacity: 0.85;
    }
    .plan-card .btn-subscribe {
      margin-top: 28px;
      background: transparent;
      color: #c9d1d9;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 10px;
      padding: 12px;
      font-size: 0.88rem; font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: -0.005em;
      transition: background 0.18s, color 0.18s, border-color 0.18s;
    }
    .plan-card .btn-subscribe:hover {
      background: rgba(88,166,255,0.08);
      color: #58a6ff;
      border-color: rgba(88,166,255,0.4);
    }
    .plan-card.popular .btn-subscribe {
      background: #58a6ff; color: #07090f; border-color: #58a6ff;
    }
    .plan-card.popular .btn-subscribe:hover { background: #79b8ff; border-color: #79b8ff; }

    /* ── Add-ons section ─────────────────────────────────── */
    .addons-section {
      margin-top: 32px;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 18px;
      overflow: hidden;
      background: #0a0d12;
    }
    .addons-header {
      padding: 24px 28px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
    }
    .addons-header-left .addons-eyebrow {
      font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #6b7280;
    }
    .addons-header-left .addons-title {
      font-size: 1.15rem; font-weight: 700;
      color: #f0f0f5; letter-spacing: -0.02em;
      margin-top: 6px;
    }
    .addons-header-left .addons-sub {
      color: #9ca3af; font-size: 0.86rem;
      margin-top: 4px;
    }
    .addons-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    /* Cada addon vira card clicável (toggle on/off) */
    .addon-row {
      padding: 20px 24px;
      border-right: 1px solid rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: space-between;
      gap: 14px;
      cursor: pointer;
      transition: background 0.18s, border-color 0.18s;
      position: relative;
      user-select: none;
    }
    .addon-row:last-child { border-right: none; }
    .addon-row:hover:not(.selected) { background: rgba(255,255,255,0.02); }
    .addon-row.selected {
      background: rgba(88,166,255,0.05);
      box-shadow: inset 0 0 0 1px rgba(88,166,255,0.4);
    }
    .addon-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
    .addon-logo {
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.84rem; font-weight: 800; color: #f0f0f5;
      flex-shrink: 0;
    }
    .addon-logo svg { width: 18px; height: 18px; }
    .addon-name {
      font-size: 0.9rem; font-weight: 700; color: #f0f0f5;
      letter-spacing: -0.01em;
    }
    .addon-price {
      font-size: 0.78rem; color: #6b7280;
      margin-top: 2px;
      font-variant-numeric: tabular-nums;
    }
    .addon-price strong { color: #c9d1d9; font-weight: 600; }

    /* Toggle pill: muda visual conforme estado */
    .addon-toggle {
      flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px;
      border-radius: 999px;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.14);
      color: #c9d1d9;
      font-size: 0.74rem; font-weight: 700;
      letter-spacing: -0.005em;
      transition: all 0.18s;
      pointer-events: none; /* o click é no row inteiro */
    }
    .addon-row:hover:not(.selected) .addon-toggle {
      border-color: rgba(88,166,255,0.35);
      color: #58a6ff;
    }
    .addon-row.selected .addon-toggle {
      background: #58a6ff;
      border-color: #58a6ff;
      color: #07090f;
    }
    .addon-toggle svg { width: 13px; height: 13px; }
    .addon-toggle .icon-add  { display: inline-flex; }
    .addon-toggle .icon-done { display: none; }
    .addon-row.selected .addon-toggle .icon-add  { display: none; }
    .addon-row.selected .addon-toggle .icon-done { display: inline-flex; }

    /* Header da seção addons agora mostra pill com total selecionado */
    .addons-summary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 999px;
      font-size: 0.78rem; font-weight: 600;
      color: #9ca3af;
      font-variant-numeric: tabular-nums;
      transition: all 0.18s;
    }
    .addons-summary.has-selection {
      background: rgba(88,166,255,0.08);
      border-color: rgba(88,166,255,0.3);
      color: #58a6ff;
    }
    .addons-summary .as-count {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 18px;
      padding: 0 5px;
      border-radius: 9px;
      background: rgba(88,166,255,0.18);
      color: #58a6ff;
      font-size: 0.68rem; font-weight: 800;
    }
    .addons-summary.has-selection .as-count {
      background: rgba(88,166,255,0.25);
    }

    /* No checkout summary, exibe os addons selecionados como linhas extra */
    .summary-addon-line {
      display: flex; justify-content: space-between; align-items: center;
      padding: 8px 0;
      color: #c9d1d9; font-size: 0.84rem;
      font-variant-numeric: tabular-nums;
    }
    .summary-addon-line + .summary-addon-line { border-top: 1px solid rgba(255,255,255,0.04); }
    .summary-addon-line strong { color: #f0f0f5; font-weight: 600; }
    .summary-addons-block {
      margin: 14px 0;
      padding: 12px 14px;
      border: 1px solid rgba(88,166,255,0.2);
      background: rgba(88,166,255,0.04);
      border-radius: 10px;
    }
    .summary-addons-block .sab-eyebrow {
      font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: #58a6ff;
      margin-bottom: 6px;
    }

    /* 29/10: 3 adicionais lado a lado precisam de ~1.060px; abaixo disso o
       terceiro (MediaGo) saia cortado na borda. Empilha como no celular. */
    @media (max-width: 1240px) {
      .addons-grid { grid-template-columns: 1fr; }
      .addon-row { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
      .addon-row:last-child { border-bottom: none; }
    }
    @media (max-width: 900px) {
      .pricing-cards {
        grid-template-columns: 1fr;
        border-radius: 14px;
      }
      .plan-card {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
      }
      .plan-card:last-child { border-bottom: none; }
      .addons-grid { grid-template-columns: 1fr; }
      .addon-row { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
      .addon-row:last-child { border-bottom: none; }
      .pricing-hero h1 { font-size: 2rem; }
      .pricing-container { padding: 44px 18px 72px; }
    }

    /* ── Checkout view ─────────────────────────────────────── */
    .checkout-back {
      display: inline-flex; align-items: center; gap: 6px;
      color: #9ca3af; font-size: 0.86rem; text-decoration: none;
      margin-bottom: 24px; background: none; border: none; cursor: pointer;
      font-family: inherit;
    }
    .checkout-back:hover { color: #f0f0f5; }

    .checkout-grid {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 32px;
      align-items: start;
    }
    @media (max-width: 800px) {
      .checkout-grid { grid-template-columns: 1fr; gap: 20px; }
    }
    .checkout-form, .checkout-summary {
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 26px;
    }
    .checkout-form h2 {
      font-size: 1.15rem; color: #f0f0f5; font-weight: 700;
      margin-bottom: 6px;
    }
    .checkout-form .sub {
      color: #9ca3af; font-size: 0.86rem; margin-bottom: 22px;
    }
    /* ── Checkout field states (validation UX) ────────────── */
    .checkout-section-label {
      font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #6b7280;
      margin: 22px 0 12px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .checkout-section-label:first-of-type { padding-top: 0; border-top: none; margin-top: 8px; }

    .login-field { position: relative; }
    .login-field .field-err {
      font-size: 0.74rem; color: #f85149;
      margin-top: 5px; min-height: 0;
      max-height: 0; overflow: hidden;
      transition: max-height 0.18s ease;
    }
    .login-field.invalid .field-err { max-height: 36px; }
    .login-field.invalid .login-input {
      border-color: rgba(248,81,73,0.45);
      box-shadow: 0 0 0 3px rgba(248,81,73,0.08);
    }
    .login-field.valid .login-input {
      border-color: rgba(63,185,80,0.4);
    }
    .login-field .field-hint {
      font-size: 0.72rem; color: #6b7280;
      margin-top: 5px;
    }
    .login-field input[readonly] {
      background: rgba(255,255,255,0.015);
      cursor: not-allowed;
      color: #9ca3af;
    }

    /* Card number with brand icon */
    .card-input-wrap { position: relative; }
    .card-input-wrap .login-input { padding-right: 56px; }
    .card-brand-icon {
      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
      width: 36px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 4px;
      opacity: 0;
      transition: opacity 0.18s;
    }
    .card-brand-icon.show { opacity: 1; }
    .card-brand-icon svg { max-width: 100%; max-height: 100%; }

    .payment-tabs {
      display: flex; gap: 4px;
      background: rgba(255,255,255,0.03);
      padding: 4px; border-radius: 10px;
      margin-bottom: 22px;
    }
    .payment-tabs button {
      flex: 1; background: transparent; border: none;
      padding: 11px;
      color: #9ca3af; font-weight: 600; font-size: 0.88rem;
      border-radius: 8px; cursor: pointer;
      transition: all 0.15s; font-family: inherit;
    }
    .payment-tabs button:hover { color: #f0f0f5; }
    .payment-tabs button.active {
      background: #58a6ff; color: #07090f;
    }
    .checkout-card-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .checkout-summary h3 {
      font-size: 0.92rem; color: #9ca3af;
      text-transform: uppercase; letter-spacing: 0.08em;
      margin-bottom: 16px;
    }
    .summary-plan-name {
      font-size: 1.2rem; color: #f0f0f5; font-weight: 700;
    }
    .summary-plan-desc {
      color: #9ca3af; font-size: 0.84rem; margin-top: 4px;
    }
    .summary-features {
      margin-top: 18px; padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.06);
      list-style: none; padding-left: 0;
      display: flex; flex-direction: column; gap: 8px;
    }
    .summary-features li {
      font-size: 0.82rem; color: #c9d1d9;
      display: flex; align-items: flex-start; gap: 8px;
    }
    .summary-features li svg { flex-shrink: 0; width: 12px; height: 12px; color: #3fb950; margin-top: 4px; }
    .summary-total {
      margin-top: 20px; padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.08);
      display: flex; justify-content: space-between; align-items: baseline;
    }
    .summary-total .lbl { color: #9ca3af; font-size: 0.88rem; }
    .summary-total .val { font-size: 1.55rem; color: #f0f0f5; font-weight: 800; letter-spacing: -0.02em; }
    .summary-total .val .per { color: #6b7280; font-size: 0.8rem; font-weight: 500; margin-left: 4px; }

    .checkout-error {
      margin-top: 16px; padding: 12px 14px;
      background: rgba(248,81,73,0.06); border: 1px solid rgba(248,81,73,0.2);
      border-radius: 8px;
      color: #f85149; font-size: 0.84rem;
      display: none;
    }
    .checkout-error.show { display: block; }

    .btn-pay {
      width: 100%; margin-top: 18px;
      background: #58a6ff; color: #07090f;
      border: none; border-radius: 10px;
      padding: 14px;
      font-size: 0.96rem; font-weight: 700;
      letter-spacing: -0.01em;
      cursor: pointer; font-family: inherit;
      transition: background 0.18s, transform 0.1s;
    }
    .btn-pay:hover:not(:disabled) { background: #79b8ff; transform: translateY(-1px); }
    .btn-pay:disabled {
      opacity: 0.4; cursor: not-allowed;
      background: rgba(88,166,255,0.5);
    }

    /* ── PIX QR view (redesign) ────────────────────────────────── */
    .pix-qr-box {
      max-width: 560px; margin: 0 auto;
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 0; overflow: hidden;
    }
    .pix-qr-header {
      padding: 26px 32px 22px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      text-align: center;
    }
    .pix-qr-header .pix-eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 0.64rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: #58a6ff;
      padding: 4px 11px;
      background: rgba(88,166,255,0.08);
      border: 1px solid rgba(88,166,255,0.22);
      border-radius: 999px;
      margin-bottom: 14px;
    }
    .pix-qr-header .pix-eyebrow .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #58a6ff;
      box-shadow: 0 0 0 0 rgba(88,166,255,0.6);
      animation: pixDot 1.8s ease-out infinite;
    }
    @keyframes pixDot {
      0%   { box-shadow: 0 0 0 0 rgba(88,166,255,0.55); }
      70%  { box-shadow: 0 0 0 8px rgba(88,166,255,0); }
      100% { box-shadow: 0 0 0 0 rgba(88,166,255,0); }
    }
    .pix-qr-header h2 {
      font-size: 1.4rem; color: #f0f0f5; font-weight: 700;
      letter-spacing: -0.025em;
    }
    .pix-qr-header p.sub { color: #9ca3af; font-size: 0.9rem; margin-top: 6px; line-height: 1.5; }

    .pix-amount-block {
      text-align: center;
      padding: 24px 32px 8px;
    }
    .pix-amount-label {
      font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: #6b7280;
    }
    .pix-amount-value {
      font-size: 2.6rem; color: #f0f0f5; font-weight: 700;
      letter-spacing: -0.04em;
      margin-top: 6px;
      font-variant-numeric: tabular-nums;
    }
    .pix-amount-value .pp-curr { font-size: 1rem; font-weight: 500; color: #6b7280; margin-right: 4px; vertical-align: super; }
    .pix-amount-value .pp-cents { font-size: 1.4rem; color: #6b7280; font-weight: 500; }

    .pix-qr-image {
      background: #fff;
      padding: 18px;
      border-radius: 14px;
      margin: 20px auto 8px;
      max-width: 260px;
      box-shadow: 0 16px 40px -12px rgba(88,166,255,0.18);
    }
    .pix-qr-image img { width: 100%; height: auto; display: block; }

    .pix-or-divider {
      display: flex; align-items: center; gap: 14px;
      margin: 22px 32px 16px;
      color: #6b7280; font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
    }
    .pix-or-divider::before,
    .pix-or-divider::after {
      content: ''; flex: 1; height: 1px;
      background: rgba(255,255,255,0.07);
    }

    .pix-copy-row {
      display: flex; gap: 8px;
      padding: 0 32px;
    }
    .pix-copy-code {
      flex: 1;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 12px 14px;
      border-radius: 10px;
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 0.74rem;
      word-break: break-all;
      color: #9ca3af;
      text-align: left;
      max-height: 60px; overflow-y: auto;
      white-space: nowrap;
      overflow-x: auto;
    }
    .pix-copy-code::-webkit-scrollbar { height: 0; }
    .pix-copy-btn {
      flex-shrink: 0;
      background: rgba(88,166,255,0.1);
      border: 1px solid rgba(88,166,255,0.25);
      color: #58a6ff;
      padding: 0 16px;
      border-radius: 10px;
      font-size: 0.84rem; font-weight: 700;
      cursor: pointer; font-family: inherit;
      transition: all 0.15s;
      display: inline-flex; align-items: center; gap: 6px;
      white-space: nowrap;
    }
    .pix-copy-btn:hover { background: #58a6ff; color: #07090f; border-color: #58a6ff; }
    .pix-copy-btn.copied { color: #3fb950; border-color: rgba(63,185,80,0.4); background: rgba(63,185,80,0.1); }
    .pix-copy-btn.copied:hover { background: rgba(63,185,80,0.15); color: #3fb950; }
    .pix-copy-btn svg { width: 14px; height: 14px; }

    .pix-steps {
      padding: 22px 32px 8px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .pix-step {
      display: flex; flex-direction: column; gap: 6px;
      padding: 12px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 10px;
    }
    .pix-step-num {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(88,166,255,0.1);
      border: 1px solid rgba(88,166,255,0.3);
      color: #58a6ff;
      font-size: 0.74rem; font-weight: 800;
      display: inline-flex; align-items: center; justify-content: center;
      font-variant-numeric: tabular-nums;
    }
    .pix-step-text {
      color: #c9d1d9; font-size: 0.78rem; line-height: 1.45;
    }
    .pix-step-text strong { color: #f0f0f5; font-weight: 700; }

    .pix-status-bar {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      margin: 22px 32px 0;
      padding: 14px 16px;
      background: rgba(88,166,255,0.05);
      border: 1px solid rgba(88,166,255,0.18);
      border-radius: 10px;
      color: #58a6ff; font-size: 0.86rem; font-weight: 600;
    }
    .pix-spinner {
      width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid rgba(88,166,255,0.2); border-top-color: #58a6ff;
      animation: pixSpin 0.9s linear infinite;
      flex-shrink: 0;
    }
    @keyframes pixSpin { to { transform: rotate(360deg); } }

    .pix-footer-note {
      padding: 16px 32px 24px;
      text-align: center;
      color: #6b7280; font-size: 0.78rem;
      line-height: 1.5;
    }
    .pix-footer-note .checkout-back { margin-top: 8px; }

    @media (max-width: 600px) {
      .pix-steps { grid-template-columns: 1fr; }
      .pix-amount-value { font-size: 2.2rem; }
    }

    /* legacy compat (for invoice/addon PIX flows using old classes) */
    .pix-copy-block {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 12px;
      border-radius: 10px;
      font-family: 'SF Mono', 'Menlo', monospace;
      font-size: 0.72rem;
      word-break: break-all;
      color: #9ca3af;
      text-align: left;
      margin: 14px 0;
      max-height: 90px; overflow-y: auto;
    }
    .pix-status {
      display: inline-flex; align-items: center; gap: 9px;
      background: rgba(88,166,255,0.06);
      border: 1px solid rgba(88,166,255,0.2);
      padding: 10px 16px;
      border-radius: 999px;
      color: #58a6ff; font-size: 0.85rem; font-weight: 600;
      margin-bottom: 14px;
    }
    .pix-value-line {
      color: #f0f0f5; font-weight: 700; font-size: 1.05rem;
      margin-top: 8px;
    }

    /* ── Success state (redesign profissional) ────────────────── */
    .checkout-success-box {
      max-width: 540px; margin: 0 auto;
      background: #0d1117;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 0; overflow: hidden;
      animation: succFadeUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    @keyframes succFadeUp {
      from { opacity: 0; transform: translateY(20px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .succ-hero {
      padding: 42px 32px 28px;
      text-align: center;
      background: radial-gradient(circle at 50% 0%, rgba(63,185,80,0.08) 0%, transparent 70%);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .succ-check-wrap {
      width: 72px; height: 72px;
      margin: 0 auto 22px;
      border-radius: 50%;
      background: rgba(63,185,80,0.1);
      border: 1px solid rgba(63,185,80,0.3);
      display: flex; align-items: center; justify-content: center;
      position: relative;
      animation: succPulse 2.4s ease-out infinite;
    }
    @keyframes succPulse {
      0%   { box-shadow: 0 0 0 0 rgba(63,185,80,0.4); }
      70%  { box-shadow: 0 0 0 14px rgba(63,185,80,0); }
      100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); }
    }
    .succ-check-wrap svg {
      width: 36px; height: 36px;
      color: #3fb950;
    }
    .succ-check-wrap svg path {
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      animation: succDraw 0.6s ease-out 0.35s forwards;
    }
    @keyframes succDraw { to { stroke-dashoffset: 0; } }

    .succ-title {
      font-size: 1.5rem; color: #f0f0f5; font-weight: 700;
      letter-spacing: -0.025em; line-height: 1.2;
    }
    .succ-subtitle {
      color: #9ca3af; font-size: 0.92rem;
      margin-top: 8px; line-height: 1.55;
      max-width: 380px; margin-left: auto; margin-right: auto;
    }

    .succ-receipt {
      padding: 24px 32px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .succ-receipt-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 0;
      font-size: 0.86rem;
    }
    .succ-receipt-row + .succ-receipt-row { border-top: 1px solid rgba(255,255,255,0.04); }
    .succ-receipt-label { color: #6b7280; font-weight: 600; letter-spacing: 0.01em; }
    .succ-receipt-value {
      color: #f0f0f5; font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .succ-receipt-value.method-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 3px 10px; border-radius: 6px;
      background: rgba(88,166,255,0.1);
      border: 1px solid rgba(88,166,255,0.25);
      color: #58a6ff; font-size: 0.76rem; font-weight: 700;
      letter-spacing: 0.04em;
    }
    .succ-receipt-value.method-pill svg { width: 12px; height: 12px; }

    .succ-next {
      padding: 22px 32px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .succ-next-title {
      font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #6b7280;
      margin-bottom: 14px;
    }
    .succ-next-list {
      display: flex; flex-direction: column; gap: 12px;
    }
    .succ-next-item {
      display: flex; align-items: flex-start; gap: 12px;
    }
    .succ-next-item-icon {
      width: 28px; height: 28px;
      border-radius: 8px;
      background: rgba(88,166,255,0.08);
      border: 1px solid rgba(88,166,255,0.2);
      color: #58a6ff;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .succ-next-item-icon svg { width: 14px; height: 14px; }
    .succ-next-item-text {
      color: #c9d1d9; font-size: 0.86rem;
      line-height: 1.5;
    }
    .succ-next-item-text strong { color: #f0f0f5; font-weight: 700; }

    .succ-cta-wrap {
      padding: 22px 32px 28px;
      text-align: center;
    }
    .succ-cta {
      width: 100%;
      background: #58a6ff; color: #07090f;
      border: none; border-radius: 10px;
      padding: 14px;
      font-size: 0.92rem; font-weight: 700;
      letter-spacing: -0.005em;
      cursor: pointer; font-family: inherit;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: background 0.18s, transform 0.1s;
    }
    .succ-cta:hover { background: #79b8ff; transform: translateY(-1px); }
    .succ-cta svg { width: 14px; height: 14px; }
    .succ-redirect-note {
      margin-top: 12px;
      color: #6b7280; font-size: 0.78rem;
    }
    .succ-redirect-note strong { color: #c9d1d9; font-variant-numeric: tabular-nums; }

    /* ══════════════════════════════════════════════════════════════════════
       LIGHT MODE v2 — Paleta sharper estilo Linear/Stripe.
       Branco puro, pretos high-contrast, azul vibrante #2563eb.
       ══════════════════════════════════════════════════════════════════════ */

    /* Body + main — branco puro, sem tom acinzentado */
    body.light { background: #ffffff !important; color: #0a0e1a; }
    body.light .main-area, body.light .wrapper { background: #ffffff; }
    body.light * { -webkit-font-smoothing: antialiased; }

    /* ── SIDEBAR ── */
    body.light .sidebar {
      background: #ffffff !important;
      border-right: 1px solid #e2e8f0 !important;
    }
    body.light .sidebar-btn { color: #475569 !important; }
    body.light .sidebar-btn:hover { background: #f1f5f9 !important; color: #1e293b !important; }
    body.light .sidebar-btn.active { background: rgba(88,166,255,0.1) !important; color: #1f6feb !important; }
    body.light .sidebar-btn.active .sb-icon-wrap { color: #1f6feb !important; }
    body.light .sidebar-label, body.light .sidebar-label[data-section] {
      color: #94a3b8 !important;
    }
    body.light .sb-icon-wrap { color: #64748b; }
    body.light .sidebar-tracker-badge {
      background: #f1f5f9 !important;
      border-color: #e2e8f0 !important;
      color: #475569 !important;
    }
    body.light .sidebar-user {
      background: #f8fafc !important;
      border-color: #e2e8f0 !important;
    }
    body.light .sidebar-user-name { color: #1e293b !important; }
    body.light .sidebar-user-role { color: #64748b !important; }
    body.light .sidebar-logout {
      color: #64748b !important;
      border-color: #e2e8f0 !important;
    }
    body.light .sidebar-logout:hover {
      color: #e8445a !important;
      border-color: #e8445a !important;
    }
    /* Logo SVG no light mode:
       - paths brancos (wordmark BeepMi) → preto escuro (#0f172a)
       - paths amarelos (arcos do M) → azul brand (#1f6feb)
       Resultado: lockup limpo branco/preto/azul, sem amarelo conflitando */
    body.light .sidebar-logo-icon svg path[fill="#ffffff"],
    body.light .sidebar-logo-icon svg rect[fill="#ffffff"],
    body.light .sidebar-logo-icon svg polygon[fill="#ffffff"],
    body.light .sidebar-logo-compact svg path[fill="#ffffff"],
    body.light .sidebar-logo-compact svg rect[fill="#ffffff"],
    body.light .sidebar-logo-compact svg polygon[fill="#ffffff"] { fill: #0f172a !important; }
    /* Logo "Mi" real no light mode — mantém os arcos amarelos da brand
       mas em amber-400 (#fbbf24) pra contrastar com o fundo branco.
       Wordmark fica preto + arcos amarelos visíveis = identidade preservada. */
    body.light .sidebar-logo-icon svg path[fill="#fff000"],
    body.light .sidebar-logo-compact svg path[fill="#fff000"] {
      fill: #fbbf24 !important;
    }
    /* Compact logo box: caixinha clara com borda sutil, sem fundo escuro */
    body.light .sidebar-logo-compact {
      background: #ffffff !important;
      border: 1px solid #e5e7eb !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }
    /* ─── Tab Testar — cards hardcoded dark, override pra branco ─── */
    body.light .testar-form-card,
    body.light .testar-result-card {
      background: #ffffff !important;
      border-color: #e5e7eb !important;
      box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
    }
    body.light .testar-form-title,
    body.light .testar-result-title { color: #0f172a !important; }
    body.light .testar-form-sub,
    body.light .testar-step-text,
    body.light .testar-label,
    body.light .testar-optional { color: #64748b !important; }
    body.light .testar-form-sub b,
    body.light .testar-step-text b { color: #0f172a !important; }
    body.light .testar-step-num {
      background: #eff6ff !important;
      border-color: #bfdbfe !important;
      color: #1e40af !important;
    }
    body.light .testar-divider { border-top-color: #e5e7eb !important; }
    body.light .testar-input {
      background: #ffffff !important;
      border-color: #e5e7eb !important;
      color: #0f172a !important;
    }
    body.light .testar-input::placeholder { color: #94a3b8 !important; }
    body.light .testar-input:focus { border-color: #2563eb !important; }
    body.light .testar-result-badge {
      background: #f1f5f9 !important;
      border-color: #e5e7eb !important;
      color: #475569 !important;
    }
    body.light .testar-result-empty-icon {
      background: #f1f5f9 !important;
      border-color: #e5e7eb !important;
    }

    /* ─── Section titles em headers de tabs ─── */
    body.light .wh-section-title h2,
    body.light .hist-header h1,
    body.light .hist-title,
    body.light .ativar-form-card h2,
    body.light .ativar-form-card h3 { color: #0f172a !important; }

    /* ─── Ativar tab — highlights <b> invisíveis ─── */
    body.light .ativar-form-card b,
    body.light .ativar-form-card strong,
    body.light #totalLabel { color: #0f172a !important; }
    body.light .ativar-events-total-badge {
      color: #0f172a !important;
      background: #f1f5f9 !important;
      border-color: #e5e7eb !important;
    }
    body.light .ativar-events-footer-val { color: #0f172a !important; }

    /* ─── Email — tabs inativos quase invisíveis ─── */
    body.light .email-tabs button,
    body.light .email-tab-btn { color: #64748b !important; }
    body.light .email-tabs button.active,
    body.light .email-tab-btn.active {
      color: #1d4ed8 !important;
      background: #eff6ff !important;
      border-color: #bfdbfe !important;
    }
    /* Botão "Adicionar Domínio" verde → azul brand */
    body.light .domain-add-btn,
    body.light .domain-add-submit,
    body.light .email-section button.btn-primary {
      background: #2563eb !important;
      border-color: #1d4ed8 !important;
      color: #ffffff !important;
    }
    body.light .domain-add-btn:hover,
    body.light .domain-add-submit:hover { background: #1d4ed8 !important; }

    /* Billing — header "Minha Assinatura" + botões secundários */
    body.light #tab-billing h1,
    body.light #tab-billing h2,
    body.light #tab-billing .billing-page-title,
    body.light .billing-hero-title { color: #0f172a !important; }
    /* .billing-title usa gradient + text-fill transparent — sobrescreve em light */
    body.light .billing-title {
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      -webkit-text-fill-color: #0f172a !important;
      color: #0f172a !important;
    }
    body.light .billing-subtitle { color: #64748b !important; }
    /* Orbs decorativos (manchas amarelas no canto) — esconde em light pra
       não criar gradiente artificial que confunde a olho. */
    body.light .billing-wrap::before,
    body.light .billing-wrap::after { display: none !important; }
    /* "Mudar plano" / outros botões textuais escondidos */
    body.light .billing-card-action,
    body.light .billing-link-action {
      color: #2563eb !important;
      border-color: #bfdbfe !important;
    }
    body.light #tab-billing .billing-card h3,
    body.light #tab-billing .billing-section-label,
    body.light #tab-billing .billing-card-label { color: #475569 !important; }
    /* Exportar JSON / botões "ghost" no billing */
    body.light .billing-btn-ghost,
    body.light .billing-btn-secondary,
    body.light #tab-billing button[data-variant="ghost"] {
      background: #ffffff !important;
      border-color: #e5e7eb !important;
      color: #475569 !important;
    }
    body.light .billing-btn-ghost:hover,
    body.light .billing-btn-secondary:hover { background: #f8fafc !important; }

    /* ─── Period/Filter pills (dashboard, logs) ─── */
    body.light .range-pill,
    body.light .period-pill,
    body.light .hist-chip,
    body.light .date-pill,
    body.light .filter-pill {
      background: #ffffff !important;
      border-color: #e5e7eb !important;
      color: #475569 !important;
    }
    body.light .range-pill.active,
    body.light .period-pill.active,
    body.light .hist-chip.active,
    body.light .date-pill.active,
    body.light .filter-pill.active {
      background: #eff6ff !important;
      border-color: #bfdbfe !important;
      color: #1d4ed8 !important;
    }

    /* ─── Inline yellow links inside webhook setup steps ─── */
    body.light .wh-setup-steps b,
    body.light .wh-setup-steps strong,
    body.light .wh-setup-step a,
    body.light .wh-section-sub b { color: #0f172a !important; }

    /* Pricing topbar (mesma marca em /assinatura) — força preto */
    body.light .pricing-topbar .brand img { filter: brightness(0) !important; }
    /* Login overlay logo */
    body.light .auth-logo-row svg path[fill="#fff000"],
    body.light .login-card svg path[fill="#fff000"] { display: none !important; }
    body.light .auth-logo-row svg path[fill="#ffffff"],
    body.light .auth-logo-row svg rect[fill="#ffffff"],
    body.light .auth-logo-row svg polygon[fill="#ffffff"] { fill: #0f172a !important; }

    /* Refinamento sidebar light — divisores e fundos sutis pra dar coesão */
    body.light .sidebar { box-shadow: 1px 0 0 #e2e8f0; }
    body.light .sidebar-logo {
      border-bottom-color: #e2e8f0 !important;
    }
    body.light .sidebar-tracker-badge {
      background: rgba(88,166,255,0.1) !important;
      border-color: rgba(88,166,255,0.25) !important;
      color: #1f6feb !important;
    }

    /* Theme switch (sol/lua) */
    body.light .theme-switch {
      background: #f3f4f6 !important;
      border-color: #e5e7eb !important;
    }
    body.light .theme-opt { color: #9ca3af !important; }
    body.light .theme-opt.active {
      background: #ffffff !important;
      color: #2563eb !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }

    /* ── DASHBOARD CARDS — branco com sombra sutil (sem border, mais SaaS-grade) ── */
    body.light .dash-card {
      background: #ffffff !important;
      border: 1px solid #e5e7eb !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    }
    body.light .dash-card:hover {
      border-color: #d1d5db !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    }
    body.light .dash-card-label { color: #6b7280 !important; }
    body.light .dash-card-value { color: #0a0e1a !important; font-weight: 800 !important; }
    body.light .dash-card-icon {
      background: rgba(37,99,235,0.08) !important;
      color: #2563eb !important;
    }

    /* Dashboard filters */
    body.light .dash-date-btn,
    body.light .dash-cal-btn,
    body.light .dash-refresh-btn {
      background: #ffffff !important;
      border-color: #e5e7eb !important;
      color: #4b5563 !important;
    }
    body.light .dash-date-btn:hover {
      border-color: #2563eb !important;
      color: #2563eb !important;
      background: rgba(37,99,235,0.04) !important;
    }
    body.light .dash-date-btn.active {
      background: #2563eb !important;
      border-color: #2563eb !important;
      color: #ffffff !important;
      font-weight: 700 !important;
    }

    /* Charts e widgets */
    body.light .dash-chart-box,
    body.light .dash-donut-box,
    body.light .dash-top-box,
    body.light .dash-recent-wrap {
      background: #ffffff !important;
      border: 1px solid #e5e7eb !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    }
    body.light .dash-chart-title,
    body.light .dash-donut-title,
    body.light .dash-top-title,
    body.light .dash-recent-title {
      color: #0a0e1a !important;
      font-weight: 700 !important;
    }
    body.light .dash-chart-sub,
    body.light .dash-donut-sub,
    body.light .dash-top-sub,
    body.light .dash-recent-sub { color: #6b7280 !important; }
    body.light .dash-recent-header { border-color: #e5e7eb !important; }
    body.light .dash-recent-table th {
      background: #f9fafb !important;
      color: #6b7280 !important;
      border-color: #e5e7eb !important;
      font-weight: 700 !important;
    }
    body.light .dash-recent-table td {
      color: #1f2937 !important;
      border-color: #f3f4f6 !important;
    }

    /* ── GENERIC CARDS / BOXES (catch-all) ── */
    body.light .card,
    body.light .billing-card,
    body.light .perfil-card,
    body.light .pixel-row,
    body.light .integration-card,
    body.light .auth-card,
    body.light .testar-block,
    body.light .ativar-block,
    body.light .webhook-block,
    body.light .historico-table-wrap,
    body.light .logs-block,
    body.light .leads-card,
    body.light .email-card {
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
      color: #1e293b;
    }
    body.light .card h2, body.light .card h3, body.light .card h4,
    body.light .billing-card h2, body.light .billing-card h3,
    body.light .perfil-card h2, body.light .perfil-card h3 { color: #0f172a !important; }

    /* Inputs em todos os contextos */
    body.light input[type="text"],
    body.light input[type="email"],
    body.light input[type="password"],
    body.light input[type="tel"],
    body.light input[type="number"],
    body.light input[type="search"],
    body.light input[type="url"],
    body.light input[type="date"],
    body.light input[type="time"],
    body.light textarea,
    body.light select {
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
      color: #0f172a !important;
    }
    body.light input::placeholder { color: #94a3b8 !important; }
    body.light input:focus, body.light textarea:focus, body.light select:focus {
      border-color: #58a6ff !important;
      box-shadow: 0 0 0 3px rgba(88,166,255,0.1) !important;
    }

    /* Tables */
    body.light table { color: #1e293b; }
    body.light table th { background: #f8fafc !important; color: #475569 !important; border-color: #e2e8f0 !important; }
    body.light table td { border-color: #f1f5f9 !important; color: #1e293b !important; }
    body.light tr:hover td { background: #f8fafc !important; }

    /* Inactive banner (paywall soft) */
    body.light .inactive-banner {
      background: linear-gradient(90deg, rgba(88,166,255,0.06), rgba(88,166,255,0.02)) !important;
      border-color: rgba(88,166,255,0.3) !important;
    }
    body.light .inactive-banner .ib-title { color: #0f172a !important; }
    body.light .inactive-banner .ib-sub { color: #64748b !important; }

    /* Notification bell */
    body.light .notif-bell {
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
      color: #475569 !important;
    }
    body.light .notif-bell:hover { border-color: #58a6ff !important; color: #1f6feb !important; }

    /* Subtle text everywhere */
    body.light p, body.light span, body.light label, body.light div {
      color: inherit;
    }
    body.light .text-muted, body.light .muted { color: #64748b !important; }

    /* Auth/login (caso esteja visível) */
    body.light .auth-hero-title, body.light .auth-hero-title span { color: #0f172a !important; }

    /* Modal backdrop fica mais transparente no light */
    body.light .bm-modal { background: rgba(15,23,42,0.45) !important; }
    body.light .bm-modal-box {
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
      color: #1e293b;
    }
    body.light .bm-modal-box h3 { color: #0f172a !important; }

    /* Toasts */
    body.light .bm-toast {
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
      color: #1e293b !important;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    }
    body.light .bm-toast-title { color: #0f172a !important; }
    body.light .bm-toast-msg { color: #64748b !important; }

    /* Page header titles ("Pixels", "Logs", etc) — fix invisibilidade */
    body.light .page-header-left h1 { color: #0f172a !important; }
    body.light .page-header-left p { color: #64748b !important; }

    /* Platform pills (TikTok/Facebook/Kwai/Taboola) — usar brand colors apropriados pro fundo claro */
    body.light .plat-btn,
    body.light .ativar-plat-tab {
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
      color: #475569 !important;
    }
    body.light .plat-btn:hover,
    body.light .ativar-plat-tab:hover {
      background: #f8fafc !important;
      border-color: #cbd5e1 !important;
    }
    body.light .plat-btn.active-tt {
      background: rgba(255,0,80,0.06) !important;
      border-color: rgba(255,0,80,0.4) !important;
      color: #c50745 !important;
    }
    body.light .plat-btn.active-fb {
      background: rgba(24,119,242,0.06) !important;
      border-color: rgba(24,119,242,0.4) !important;
      color: #1877f2 !important;
    }
    body.light .plat-btn.active-kwai {
      background: rgba(255,80,0,0.06) !important;
      border-color: rgba(255,80,0,0.4) !important;
      color: #cc4000 !important;
    }
    body.light .plat-btn.active-tb {
      background: rgba(0,38,77,0.06) !important;
      border-color: rgba(0,38,77,0.4) !important;
      color: #00264D !important;
    }

    /* Network cards "REDES DESBLOQUEADAS" — branco com borda sutil */
    body.light .net-card {
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
      color: #1e293b !important;
    }
    body.light .net-card.included { border-color: #cbd5e1 !important; }
    body.light .net-card.active { border-color: rgba(63,185,80,0.45) !important; }
    body.light .net-card.pending { border-color: rgba(255,159,0,0.45) !important; }
    body.light .net-logo-name,
    body.light .net-meta { color: #475569 !important; }
    body.light .net-meta strong { color: #0f172a !important; }
    body.light .net-action {
      background: #1f6feb !important;
      color: #ffffff !important;
      border-color: #1f6feb !important;
    }
    body.light .net-action:hover { background: #1e40af !important; border-color: #1e40af !important; }
    body.light .net-action.cancel,
    body.light .net-action[disabled] {
      background: #f1f5f9 !important;
      color: #64748b !important;
      border-color: #e2e8f0 !important;
    }

    /* Billing — hero/sparkline section */
    body.light .billing-card,
    body.light .hero-stat-card,
    body.light .donut-card,
    body.light .usage-card {
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    }
    body.light .hero-num,
    body.light .donut-wrap .num,
    body.light .billing-plan-name,
    body.light .billing-plan-price strong {
      color: #0f172a !important;
      -webkit-text-fill-color: initial !important;
      background: none !important;
    }
    body.light .hero-stat-card .hero-num {
      background: linear-gradient(135deg, #0f172a 0%, #1f6feb 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
    body.light .billing-plan-price strong {
      background: linear-gradient(135deg, #1f6feb 0%, #0f172a 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
    body.light .hero-sub,
    body.light .billing-plan-desc,
    body.light .donut-center .lbl,
    body.light .donut-legend .legend-name {
      color: #64748b !important;
    }
    body.light .donut-legend .legend-val { color: #0f172a !important; }
    body.light .donut-wrap .donut-bg { stroke: #f1f5f9 !important; }

    /* Faturas (invoice rows) */
    body.light .invoice-row {
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
    }
    body.light .inv-desc,
    body.light .inv-value { color: #0f172a !important; }
    body.light .inv-due small,
    body.light .inv-desc small { color: #64748b !important; }

    /* Webhooks/Ativar/Testar section titles */
    body.light .section-title,
    body.light .form-section h3,
    body.light .form-section h2 { color: #0f172a !important; }

    /* Empty states */
    body.light .empty-state,
    body.light .dash-empty { color: #94a3b8 !important; }

    /* ═══════════ Entregáveis (mesmo desenho da aba Leads) ═══════════ */
    .etg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(430px, 1fr)); gap:14px; margin-bottom:26px; }
    @media (max-width:560px){ .etg-grid { grid-template-columns:1fr; } }
    .etg-grid > .leads-empty { grid-column:1 / -1; background:#161b22; border:1px dashed #30363d; border-radius:12px; }
    .etg-card { background:#161b22; border:1px solid #21262d; border-radius:12px; padding:18px 18px 14px; display:flex; flex-direction:column; gap:12px; transition:transform .15s, border-color .15s; min-width:0; }
    .etg-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,0.3); }
    .etg-card.off { opacity:.6; }
    .etg-card-top { display:flex; align-items:center; gap:12px; min-width:0; }
    .etg-avatar { width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; color:#fff; background:linear-gradient(135deg,#1f6feb,#2ea043); letter-spacing:-.3px; }
    .etg-card.off .etg-avatar { background:#30363d; color:#8b949e; }
    .etg-card-name { font-size:15px; font-weight:700; color:#e6edf3; display:flex; align-items:center; gap:8px; min-width:0; }
    .etg-card-name span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .etg-card-url { font-family:'Courier New',monospace; font-size:11.5px; color:#8b949e; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .etg-pill { font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 8px; white-space:nowrap; flex-shrink:0; }
    .etg-pill.on { background:rgba(46,160,67,0.18); color:#56d364; }
    .etg-pill.off { background:rgba(139,148,158,0.18); color:#8b949e; }
    .etg-chips { display:flex; flex-wrap:wrap; gap:5px; }
    .etg-chip { font-size:11px; font-weight:600; color:#c9d1d9; background:#0d1117; border:1px solid #30363d; border-radius:999px; padding:2px 9px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .etg-chip.all { color:#79b8ff; border-color:rgba(88,166,255,0.35); background:rgba(88,166,255,0.08); }
    .etg-card-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
    .etg-stat { background:#0d1117; border:1px solid #21262d; border-radius:9px; padding:9px 11px; min-width:0; }
    .etg-stat-l { font-size:10px; font-weight:600; color:#8b949e; text-transform:uppercase; letter-spacing:.5px; }
    .etg-stat-v { font-size:16px; font-weight:700; color:#e6edf3; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .etg-stat-v.ok { color:#56d364; } .etg-stat-v.bad { color:#f85149; } .etg-stat-v small { font-size:11px; font-weight:600; color:#8b949e; }
    .etg-prod-lista { max-height:220px; overflow-y:auto; background:#0d1117; border:1px solid #21262d; border-radius:9px; padding:4px; }
    .etg-prod { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:12.5px; color:#e6edf3; }
    .etg-prod:hover { background:rgba(255,255,255,0.05); }
    .etg-prod input { width:16px; height:16px; accent-color:#1f6feb; flex-shrink:0; margin:0; }
    .etg-prod-id { font-family:'Courier New',monospace; font-size:11.5px; color:#8b949e; flex-shrink:0; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .etg-prod-nome { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .etg-prod-n { font-size:11px; color:#6e7681; flex-shrink:0; }
    .etg-prod-vazio { font-size:12px; color:#6e7681; padding:12px; text-align:center; }
    [data-theme="light"] .etg-prod-lista { background:#f6f8fa; border-color:#e2e8f0; } [data-theme="light"] .etg-prod { color:#1a1a1a; }
    .etg-secret { display:flex; align-items:center; gap:8px; background:#0d1117; border:1px solid #21262d; border-radius:9px; padding:8px 8px 8px 12px; min-width:0; }
    .etg-secret-l { font-size:10px; font-weight:700; color:#8b949e; text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
    .etg-secret code { flex:1; min-width:0; font-family:'Courier New',monospace; font-size:12px; color:#e6edf3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .etg-card-actions { display:flex; gap:6px; flex-wrap:wrap; border-top:1px solid #21262d; padding-top:12px; }
    .etg-mini { padding:6px 11px !important; font-size:12px !important; gap:5px !important; }
    .etg-mini.danger { color:#f85149 !important; margin-left:auto; }
    .etg-mini.danger:hover { background:rgba(248,81,73,0.12) !important; border-color:rgba(248,81,73,0.4) !important; }
    .etg-docs { background:#161b22; border:1px solid #21262d; border-radius:12px; padding:22px 24px; margin-bottom:24px; }
    .etg-docs-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; }
    @media (max-width:1050px){ .etg-docs-grid { grid-template-columns:1fr; } }
    .etg-doc { display:flex; gap:12px; min-width:0; }
    .etg-doc > div:last-child { min-width:0; flex:1; }
    .etg-doc-n { width:26px; height:26px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; background:linear-gradient(135deg,#1f6feb,#388bfd); }
    .etg-doc-t { font-size:14px; font-weight:700; color:#e6edf3; margin:3px 0 6px; }
    .etg-docs p { font-size:12.5px; color:#8b949e; line-height:1.6; margin:0 0 10px; }
    .etg-docs p b, .etg-ul b { color:#e6edf3; }
    .etg-docs code { font-family:'Courier New',monospace; font-size:11.5px; background:#0d1117; border:1px solid #30363d; border-radius:5px; padding:1px 5px; color:#e6edf3; }
    .etg-code { font-family:'Courier New',monospace; font-size:11.5px; line-height:1.55; background:#0d1117; border:1px solid #21262d; border-radius:10px; padding:12px 14px; color:#c9d1d9; overflow-x:auto; margin:0 0 10px; white-space:pre; }
    .etg-code b { color:#79b8ff; }
    .etg-ul { margin:0; padding-left:18px; font-size:12.5px; color:#8b949e; line-height:1.65; }
    .etg-ul li { margin-bottom:4px; }
    .etg-log-head { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
    .etg-log-head h3 { margin:0; font-size:15px; font-weight:700; color:#e6edf3; }
    .etg-log-head span { font-size:12px; color:#6e7681; }
    .leads-table.etg-log tbody tr { cursor:default; }
    .leads-table.etg-log tbody td { white-space:nowrap; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
    .leads-table.etg-log .leads-empty { padding:36px 20px; }
    .etg-ms { color:#6e7681; font-size:11px; margin-left:6px; }
    .etg-res { font-weight:700; font-size:12.5px; display:block; }
    .etg-res.ok { color:#56d364; } .etg-res.bad { color:#f85149; } .etg-res.fila { color:#d29922; }
    .etg-res-sub { display:block; font-weight:500; color:#6e7681; font-size:11px; white-space:normal; max-width:320px; line-height:1.35; margin-top:2px; }
    .etg-ev { font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 9px; }
    .etg-ev.purchase { color:#56d364; background:rgba(46,160,67,0.18); } .etg-ev.refund { color:#f85149; background:rgba(248,81,73,0.18); } .etg-ev.teste { color:#d29922; background:rgba(210,153,34,0.18); }
    [data-theme="light"] .etg-card, [data-theme="light"] .etg-docs { background:#fff; border-color:#e2e8f0; }
    [data-theme="light"] .etg-stat, [data-theme="light"] .etg-secret, [data-theme="light"] .etg-code, [data-theme="light"] .etg-chip, [data-theme="light"] .etg-docs code { background:#f6f8fa; border-color:#e2e8f0; color:#24292f; }
    [data-theme="light"] .etg-card-name, [data-theme="light"] .etg-stat-v, [data-theme="light"] .etg-secret code, [data-theme="light"] .etg-doc-t, [data-theme="light"] .etg-log-head h3, [data-theme="light"] .etg-docs p b, [data-theme="light"] .etg-ul b { color:#1a1a1a; }
    [data-theme="light"] .etg-card-actions { border-color:#e2e8f0; }
    /* ═══════════ GridStack 2 e 6 colunas (celular/tablet) — o gridstack.min.css só traz 12 ═══════════ */
    .grid-stack.gs-2 > .grid-stack-item[gs-w="1"] { width: 50.0000%; }
    .grid-stack.gs-2 > .grid-stack-item[gs-w="2"] { width: 100.0000%; }
    .grid-stack.gs-2 > .grid-stack-item[gs-x="0"] { left: 0.0000%; }
    .grid-stack.gs-2 > .grid-stack-item[gs-x="1"] { left: 50.0000%; }
    .grid-stack.gs-2 > .grid-stack-item:not([gs-w]) { width: 50.0000%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-w="1"] { width: 16.6667%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-w="2"] { width: 33.3333%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-w="3"] { width: 50.0000%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-w="4"] { width: 66.6667%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-w="5"] { width: 83.3333%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-w="6"] { width: 100.0000%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-x="0"] { left: 0.0000%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-x="1"] { left: 16.6667%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-x="2"] { left: 33.3333%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-x="3"] { left: 50.0000%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-x="4"] { left: 66.6667%; }
    .grid-stack.gs-6 > .grid-stack-item[gs-x="5"] { left: 83.3333%; }
    .grid-stack.gs-6 > .grid-stack-item:not([gs-w]) { width: 16.6667%; }
    /* ═══════════ CAMADA MOBILE / TABLET (≤ 900px) ═══════════
       No toque não existe hover: a barra lateral vira menu que abre pelo ☰;
       os controles do topo (ajuda, produtos, sino) moram numa barra fixa;
       cabeçalhos e barras de botões quebram linha; nada fica cortado. */
    .mob-topbar { display: none; }
    .mob-backdrop { display: none; }
    @media (max-width: 900px) {
      .mob-topbar { display: flex; position: fixed; top: 0; left: 0; right: 0; height: 52px; background: #0a0e14; border-bottom: 1px solid #1c2333; z-index: 9400; align-items: center; gap: 10px; padding: 0 12px; box-sizing: border-box; }
      .mob-menu { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: #e6edf3; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; flex-shrink: 0; }
      .mob-brand { font-weight: 800; color: #f0f0f5; font-size: 15px; letter-spacing: -.2px; white-space: nowrap; }
      body.light .mob-topbar, [data-theme="light"] .mob-topbar { background: #fff; border-color: #e2e8f0; }
      body.light .mob-menu, [data-theme="light"] .mob-menu { color: #1a1a1a; border-color: #e2e8f0; background: #f6f8fa; }
      body.light .mob-brand, [data-theme="light"] .mob-brand { color: #1a1a1a; }
      .main-area, .main-area.collapsed { margin-left: 0 !important; padding: 62px 12px 28px !important; max-width: 100vw; }
      .sidebar, .sidebar.collapsed { width: 264px !important; transform: translateX(-104%); transition: transform .22s ease; box-shadow: none; z-index: 9600; overflow-y: auto; }
      .sidebar.mob-open { transform: none; box-shadow: 12px 0 40px -8px rgba(0,0,0,0.6); }
      .mob-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9550; }
      .mob-backdrop.on { display: block; }
      .bmt-help-btn { position: fixed !important; top: 8px !important; right: 104px !important; width: 36px; height: 36px; z-index: 9450; }
      .bmt-help-menu { position: fixed !important; top: 50px !important; right: 12px !important; max-width: calc(100vw - 24px); }
      .app-switcher-wrap { position: fixed !important; top: 8px !important; right: 58px !important; z-index: 9450; }
      .notif-wrap { position: fixed !important; top: 8px !important; right: 12px !important; z-index: 9450; }
      .inactive-banner { margin: 0 0 14px !important; }   /* ícones estão na barra fixa de cima: largura toda */
      .page-header, .leads-header, .wh-section-header, .bs-head, .dash-header, .hist-header, .logs-header, .perfil-hero, .billing-header, .ativar-header, .testar-header, .pixels-header { padding-right: 0 !important; flex-wrap: wrap; }
      .tab-content [class*="-actions"], .tab-content [class*="-controls"], .tab-content [class*="-toolbar"], .tab-content [class*="-filters"], .tab-content [class*="-tabs"], .tab-content [class*="-header"], .tab-content [class*="-head"], .tab-content [class*="-topbar"], .tab-content [class*="-row"] { flex-wrap: wrap; }
      .tab-content [class*="subnav"] { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .tab-content [class*="subnav"] > * { flex: 0 0 auto; }
      .tab-content { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
      .tab-content table { max-width: 100%; }
      .tab-content input:not([type=checkbox]):not([type=radio]), .tab-content select, .tab-content textarea { max-width: 100%; box-sizing: border-box; }
      .tab-content img, .tab-content svg, .tab-content video, .tab-content canvas, .tab-content iframe { max-width: 100%; }
      .leads-wrap { padding: 12px 0 !important; }
      .bm-modal { padding: 10px; align-items: flex-start; overflow-y: auto; }
      .bm-modal-box { max-width: calc(100vw - 20px) !important; margin: 10px auto; }
      /* colunas viram uma só; barras de botões quebram linha sem quebrar o texto do botão */
      /* minmax(0,1fr): com 1fr puro a coluna cresce até o conteúdo mais largo (456px num celular de 390) */
      .prefs3-wrap { grid-template-columns: minmax(0, 1fr) !important; }
      .prefs2-grid, .prefs2-row { grid-template-columns: minmax(0, 1fr) !important; }
      .prefs3-left, .prefs3-right, .prefs2-card, .prefs3-dash, .prefs3-secrows { min-width: 0; max-width: 100%; }
      .prefs3-secrows > button, .prefs3-secrows > * { max-width: 100%; box-sizing: border-box; }
      .tab-content.active > * { max-width: 100%; box-sizing: border-box; }
      .wh-url-inline, .log-card-main, .leads-actions, .etg-head-actions, .pcfg-top, .pcfg-actions, .bsp-barra, .bsp-acoes, .bsp-busca { flex-wrap: wrap !important; flex-shrink: 1 !important; max-width: 100%; }
      /* webhook: avatar em cima, URL inteira embaixo (antes a URL virava uma coluna de letras) */
      .wh-row { flex-wrap: wrap; }
      .wh-info { flex: 1 1 100%; width: 100%; }
      .bsp-busca input { flex: 1 1 160px; min-width: 0; }
      .send-field-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
      .tab-content [class*="tpl-"] { max-width: 100%; min-width: 0; box-sizing: border-box; }
      /* Dashboard no celular/tablet: cartões empilhados na ordem do desenho (KPIs 2 por linha, seções inteiras);
         o GridStack em 2 colunas invertia a ordem. Editar o desenho (arrastar) é coisa de mouse: fica escondido. */
      .dash-grid { display: flex !important; flex-wrap: wrap; gap: 10px; height: auto !important; min-height: 0 !important; margin: 0 0 8px !important; }
      .dash-grid > .grid-stack-item { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; left: auto !important; top: auto !important; transform: none !important; margin: 0 !important; }
      .dash-grid > .grid-stack-item:not([gs-id^="sec_"]) { width: calc(50% - 5px) !important; }
      .dash-grid > .grid-stack-item > .grid-stack-item-content { position: static !important; inset: auto !important; height: auto !important; }
      .dash-grid .dash-card { height: auto !important; min-height: 96px; }
      #dashCustomizeBtn, #dashEditBar { display: none !important; }
      /* página do Filtro: grades de regras (270px) e de imagens (400px) viram uma coluna que encolhe */
      .bs-rules, .bs-grid { grid-template-columns: minmax(0, 1fr) !important; grid-auto-columns: 0 !important; }
      /* cartões com grid-column:span 2 inline criavam uma 2ª coluna fantasma de 300px na grade de 1 coluna */
      .bs-rules > *, .bs-grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
      .bs-rule, .bs-slot, .bs-panel-b { max-width: 100%; min-width: 0; box-sizing: border-box; }
      .bs-dom-add, .bs-dom-row, .bs-slot > div { flex-wrap: wrap; }
      .wh-info, .log-card, .log-card-main > * { min-width: 0; }
      .wh-url-inline .btn-copy { flex-shrink: 1; }
      .wh-url-val { word-break: break-all; white-space: normal; }
      .tab-content [class*="subnav"] { flex-wrap: wrap; overflow: visible; }
      /* só quebra linha — NUNCA forçar display aqui: `.dash-edit-bar.hidden` reabria com display:flex (15/09) */
      .bs-head > div:last-child, .tab-content [class*="-btns"], .tab-content [class*="-bar"]:not(.hidden) { flex-wrap: wrap; }
      .tab-content button { white-space: nowrap; max-width: 100%; }
      .leads-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
      .leads-kpi { padding: 12px; gap: 10px; }
      .leads-kpi-icon { width: 34px; height: 34px; }
      .leads-kpi-value { font-size: 18px; }
      /* calendário do período: 580px absoluto estourava a tela — vira folha fixa com os 2 meses empilhados */
      .dash-calendar { position: fixed !important; left: 12px !important; right: 12px !important; top: 66px !important; min-width: 0 !important; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; padding: 14px 14px 12px; gap: 12px; z-index: 1200; }
      .dash-cal-panels { flex-direction: column; gap: 14px; }
      .dash-cal-divider { display: none; }
      .dash-cal-time-row { flex-wrap: wrap; gap: 10px; }
      .dash-cal-time-group { min-width: calc(50% - 5px); flex: 1 1 auto; }
      .dash-cal-time-input { max-width: 100%; width: 100%; box-sizing: border-box; }
      /* Velocidade: linha da conta Cloudflare — botão quebra para baixo em vez de sair da tela */
      .bs-borda-conta { flex-wrap: wrap; }
      .bs-borda-conta > b { min-width: 0; word-break: break-all; }
      .bs-borda-conta > button { margin-left: 0 !important; flex: 1 1 100%; }
      /* Relatórios: cartão da planilha e chamada "Campanhas em detalhe" — texto ficava numa coluna de 120px */
      .rel-sheet-row { flex-wrap: wrap; }
      .cmp-cta { flex-wrap: wrap; }
      .cmp-cta > div:last-child { width: 100%; justify-content: space-between; }
    }
  
      /* ══ Funil Ao Vivo ══ */
      .lf-switch { display:flex; gap:4px; background:#0d1117; border:1px solid #21262d; border-radius:11px; padding:4px; }
      .lf-switch-btn { display:flex; align-items:center; gap:7px; background:transparent; border:none; color:#8b949e; font-size:0.76rem; font-weight:700; padding:7px 16px; border-radius:8px; cursor:pointer; transition:color .18s, background .18s; }
      .lf-switch-btn:hover { color:#c9d1d9; }
      .lf-switch-btn.on { background:#1c2430; color:#58a6ff; }
      .live-wrap.funnel-mode > *:not(.live-header):not(#liveFunnelView) { display:none !important; }
      .lf-stage { position:relative; border:1px solid #21262d; border-radius:18px; background:#0a0e14; overflow:hidden; padding:34px 20px 24px; min-height:calc(100vh - 210px); display:flex; flex-direction:column; }
      .lf-grid-bg { position:absolute; inset:0; background-image:linear-gradient(#161b2255 1px, transparent 1px), linear-gradient(90deg, #161b2255 1px, transparent 1px); background-size:34px 34px; mask-image:radial-gradient(ellipse 95% 92% at 50% 45%, #000 0%, transparent 96%); pointer-events:none; }
      .lf-hero { position:relative; display:flex; flex-direction:column; align-items:center; margin-bottom:26px; }
      .lf-ring { position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center; }
      .lf-ring svg { position:absolute; inset:0; animation:lfSpin 22s linear infinite; }
      .lf-ring-text { font-size:9.5px; font-weight:800; letter-spacing:2.6px; fill:#4a5568; }
      .lf-hero-num { position:relative; font-size:2.6rem; font-weight:800; color:#e6edf3; text-shadow:0 0 28px rgba(88,166,255,.35); transition:transform .2s; }
      .lf-hero-num.tick { transform:scale(1.12); }
      .lf-hero-sub { color:#6e7681; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-top:6px; }
      .lf-orbit { position:absolute; inset:0; animation:lfSpin 16s linear infinite; pointer-events:none; }
      .lf-orbit .lf-orb { position:absolute; width:26px; height:26px; border-radius:50%; background:#0d1117; border:1px solid #30363d; display:flex; align-items:center; justify-content:center; animation:lfSpinRev 16s linear infinite; box-shadow:0 2px 8px rgba(0,0,0,.5); }
      .lf-orbit .lf-orb img { width:14px; height:14px; object-fit:contain; }
      @keyframes lfSpinRev { to { transform:rotate(-360deg); } }
      .lf-canvas-wrap { overflow:hidden; padding-bottom:8px; flex:1; display:flex; align-items:center; cursor:grab; touch-action:none; user-select:none; }
      .lf-canvas-wrap.panning { cursor:grabbing; }
      .lf-canvas { position:relative; display:flex; align-items:center; gap:70px; min-height:250px; padding:16px 26px; width:max-content; min-width:100%; margin:0 auto; }
      .lf-hint { position:absolute; right:16px; bottom:12px; color:#4a5568; font-size:0.62rem; font-weight:700; letter-spacing:.04em; pointer-events:none; z-index:2; }
      .lf-beam-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
      .lf-period { display:flex; align-items:center; gap:6px; margin:0 auto 18px; position:relative; z-index:1; flex-wrap:wrap; justify-content:center; }
      .lf-period-btn { background:#0d1117; border:1px solid #21262d; color:#8b949e; font-size:0.72rem; font-weight:800; padding:6px 14px; border-radius:9px; cursor:pointer; transition:color .18s, background .18s; }
      .lf-period-btn:hover { color:#c9d1d9; }
      .lf-period-btn.on { background:#1c2430; color:#58a6ff; border-color:#58a6ff44; }
      .lf-period-info { color:#4a5568; font-size:0.66rem; font-weight:700; margin-left:8px; }
      .lf-funil { position:relative; z-index:1; border:1px solid #1c2430; border-radius:16px; background:#0b1017cc; margin:0 auto 22px; padding:16px 18px 6px; }
      .lf-funil-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-bottom:4px; }
      .lf-funil-host { font-weight:800; color:#e6edf3; font-size:0.95rem; }
      .lf-funil-titulo { color:#6e7681; font-size:0.72rem; font-weight:700; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .lf-url { font-size:0.7rem; color:#8b949e; font-weight:700; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .lf-url a { color:#79b8ff; text-decoration:none; font-weight:800; }
      .lf-alerta { display:flex; gap:8px; align-items:flex-start; width:100%; margin-top:6px; padding:8px 10px; border-radius:8px; background:rgba(210,153,34,0.12); border:1px solid rgba(210,153,34,0.35); color:#e3b341; font-size:0.72rem; font-weight:600; line-height:1.45; }
      .lf-alerta svg { flex:none; margin-top:2px; }
      .lf-badges { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
      .lf-badge { background:#0d1117; border:1px solid #232b36; border-radius:10px; padding:3px 9px; font-size:0.66rem; color:#8b949e; font-weight:800; display:flex; align-items:center; gap:5px; }
      .lf-badge b { color:#e6edf3; } .lf-badge img { width:12px; height:12px; object-fit:contain; }
      .lf-badge.live b { color:#3fb950; }
      .lf-node-pct { font-size:0.6rem; color:#58a6ff; font-weight:800; margin-top:-4px; }
      .lf-node.chk .lf-node-c { border-color:#d29922aa; } .lf-node.chk .lf-node-count { color:#e3b341; }
      .lf-node.buy .lf-node-c { border-color:#3fb950aa; } .lf-node.buy .lf-node-count { color:#3fb950; }
      .lf-node.out .lf-node-c { border-style:dashed; }
      .lf-node.et .lf-node-c { border-color:#a371f7aa; width:56px; height:56px; } .lf-node.et .lf-node-count { color:#d2a8ff; font-size:1.05rem; }
      .lf-funil .lf-canvas-wrap { flex:none; align-items:flex-start; padding-bottom:0; }
      .lf-funil .lf-canvas { min-height:200px; gap:56px; }
      .lf-funil .lf-flow { gap:78px; }
      .lf-col-src { display:flex; flex-direction:column; gap:26px; position:relative; z-index:1; }
      .lf-flow { display:flex; align-items:center; gap:90px; position:relative; z-index:1; }
      .lf-node { display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; }
      .lf-node.rx { cursor:pointer; } .lf-node.rx:hover .lf-node-c { box-shadow:0 0 0 3px rgba(88,166,255,.25); }
      #rxDrawer { z-index:9800; } #rxDrawerBg { z-index:9790; }
      /* ===== Raio-X v3 (tela cheia) ===== */
      .rx-modal { position:fixed; inset:0; z-index:9800; display:none; } .rx-modal.show { display:block; } body.rx-aberto { overflow:hidden; }
      .rx-modal-bg { position:absolute; inset:0; background:rgba(1,4,9,.72); backdrop-filter:blur(6px); }
      .rx-modal-box { --rx-bg:#0b0f14; --rx-card:#11161d; --rx-card2:#161c25; --rx-line:#232b36; --rx-txt:#e6edf3; --rx-mut:#8b949e; --rx-dim:#6e7681; --rx-blue:#58a6ff; --rx-green:#3fb950; --rx-amber:#e3b341; --rx-red:#f85149; --rx-purple:#a371f7;
        position:absolute; inset:14px; background:var(--rx-bg); border:1px solid var(--rx-line); border-radius:18px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 40px 100px -20px rgba(0,0,0,.8); color:var(--rx-txt); font-size:13px; }
      body.light .rx-modal-box { --rx-bg:#f6f8fa; --rx-card:#ffffff; --rx-card2:#f1f4f8; --rx-line:#dfe4ea; --rx-txt:#1f2328; --rx-mut:#57606a; --rx-dim:#6e7781; --rx-blue:#0969da; --rx-green:#1a7f37; --rx-amber:#9a6700; --rx-red:#cf222e; --rx-purple:#8250df; }
      .rx-head { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--rx-line); background:var(--rx-card); }
      .rx-head-ico { width:38px; height:38px; border-radius:11px; background:rgba(88,166,255,.12); border:1px solid rgba(88,166,255,.3); color:var(--rx-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .rx-head-ico svg { width:19px; height:19px; }
      .rx-head-txt { min-width:0; flex:1; }
      .rx-eyebrow { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--rx-mut); }
      .rx-title { font-size:1.15rem; font-weight:900; letter-spacing:-.01em; line-height:1.2; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .rx-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
      .rx-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; border:1px solid var(--rx-line); background:var(--rx-card2); color:var(--rx-mut); font-size:11px; font-weight:600; max-width:420px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rx-chip svg { width:12px; height:12px; flex-shrink:0; }
      .rx-chip.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; }
      .rx-nav { display:flex; align-items:center; gap:6px; flex-shrink:0; }
      .rx-btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px; border-radius:9px; border:1px solid var(--rx-line); background:var(--rx-card2); color:var(--rx-txt); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; } .rx-btn:hover { border-color:var(--rx-blue); color:var(--rx-blue); } .rx-btn:disabled { opacity:.4; cursor:default; } .rx-btn svg { width:14px; height:14px; } .rx-btn.ico { width:32px; padding:0; justify-content:center; }
      .rx-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding:14px 18px 0; }
      .rx-kpi { background:var(--rx-card); border:1px solid var(--rx-line); border-radius:13px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; position:relative; }
      .rx-kpi-lbl { display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rx-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rx-kpi-lbl svg { width:14px; height:14px; flex-shrink:0; color:var(--c,var(--rx-blue)); }
      .rx-kpi-v { font-size:1.65rem; font-weight:900; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; } .rx-kpi-v small { font-size:.85rem; font-weight:800; color:var(--rx-mut); margin-left:4px; letter-spacing:0; }
      .rx-kpi-s { font-size:11px; color:var(--rx-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .rx-kpi::before { content:''; position:absolute; left:14px; right:14px; top:0; height:2px; border-radius:0 0 3px 3px; background:var(--c,transparent); opacity:.9; }
      .rx-kpi.v { --c:var(--rx-green); } .rx-kpi.a { --c:var(--rx-amber); } .rx-kpi.r { --c:var(--rx-red); } .rx-kpi.n { --c:var(--rx-blue); } .rx-kpi.p { --c:var(--rx-purple); }
      .rx-body { flex:1; display:grid; grid-template-columns:470px minmax(0,1fr); gap:14px; padding:14px 18px 18px; min-height:0; }
      .rx-page-col { display:flex; flex-direction:column; min-height:0; background:var(--rx-card); border:1px solid var(--rx-line); border-radius:14px; overflow:hidden; }
      .rx-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid var(--rx-line); }
      .rx-seg { display:inline-flex; background:var(--rx-card2); border:1px solid var(--rx-line); border-radius:9px; padding:2px; }
      .rx-seg button { border:0; background:transparent; color:var(--rx-mut); font-size:12px; font-weight:700; padding:5px 11px; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .rx-seg button svg { width:13px; height:13px; } .rx-seg button.on { background:var(--rx-blue); color:#fff; }
      .rx-canvas { position:relative; flex:1; overflow:auto; background:radial-gradient(circle at 50% 0, rgba(88,166,255,.06), transparent 60%), var(--rx-bg); }
      .rx-stage { position:relative; margin:16px auto 24px; display:flex; gap:10px; align-items:flex-start; justify-content:center; width:max-content; }
      .rx-page-wrap { position:relative; overflow:hidden; border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.55); background:#fff; border:1px solid rgba(255,255,255,.08); }
      .rx-page-frame { position:relative; transform-origin:0 0; }
      /* a folha do rrweb-player (carregada quando o Igor abre uma gravação) centra o
         .replayer-wrapper com left/top 50%: aqui ele tem de ficar colado no canto */
      .rx-page-frame .replayer-wrapper { position:relative !important; transform:none !important; left:0 !important; top:0 !important; margin:0 !important; } .rx-page-frame iframe { border:0; display:block !important; background:#fff; }
      .rx-page-frame .replayer-mouse, .rx-page-frame .replayer-mouse-tail { display:none !important; }
      .rx-ov { position:absolute; left:0; top:0; pointer-events:none; transform-origin:0 0; }
      .rx-ov-band { position:absolute; left:0; right:0; }
      .rx-ov-fold { position:absolute; left:0; right:0; border-top:2px dashed rgba(88,166,255,.95); } .rx-ov-fold span { position:absolute; left:8px; top:-10px; font-size:10px; font-weight:800; color:#fff; background:#1f6feb; padding:2px 8px; border-radius:6px; letter-spacing:.03em; }
      .rx-ov-queda { position:absolute; left:0; right:0; border-top:3px solid var(--rx-red); } .rx-ov-queda span { position:absolute; right:8px; top:-12px; font-size:10.5px; font-weight:900; color:#fff; background:#b62324; padding:3px 9px; border-radius:7px; box-shadow:0 4px 12px rgba(0,0,0,.4); }
      .rx-ov-box { position:absolute; border:2px solid rgba(88,166,255,.9); border-radius:8px; background:rgba(88,166,255,.10); box-shadow:0 0 0 2px rgba(0,0,0,.25); } .rx-ov-box.cta { border-color:var(--rx-green); background:rgba(63,185,80,.12); } .rx-ov-box.morto { border-color:var(--rx-red); background:rgba(248,81,73,.12); }
      .rx-ov-nota { position:absolute; left:12px; right:12px; top:12px; background:rgba(13,17,23,.92); color:#e6edf3; border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:9px 12px; font-size:12px; line-height:1.45; box-shadow:0 10px 30px rgba(0,0,0,.5); }
      .rx-ov-video { position:absolute; display:flex; align-items:center; gap:8px; background:rgba(13,17,23,.92); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rx-ov-video i { width:0; height:0; border-left:9px solid #3fb950; border-top:6px solid transparent; border-bottom:6px solid transparent; flex-shrink:0; } .rx-ov-video b { flex:1; min-width:50px; height:4px; background:rgba(255,255,255,.2); border-radius:2px; overflow:hidden; display:block; } .rx-ov-video b span { display:block; height:100%; background:#3fb950; }
      .rx-ov-pin { position:absolute; width:26px; height:26px; border-radius:50%; background:#1f6feb; color:#fff; font-weight:900; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px #fff, 0 6px 16px rgba(0,0,0,.45); pointer-events:auto; cursor:default; } .rx-ov-pin.cta { background:#238636; } .rx-ov-pin.morto { background:#b62324; } .rx-ov-pin.big { width:34px; height:34px; font-size:14px; }
      .rx-ruler { position:relative; width:64px; flex-shrink:0; border-radius:10px; overflow:hidden; border:1px solid var(--rx-line); background:var(--rx-card2); }
      .rx-ruler-cell { position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); border-top:1px solid rgba(0,0,0,.25); }
      .rx-ruler-cell.queda { outline:2px solid var(--rx-red); outline-offset:-2px; }
      .rx-ruler-top { position:absolute; top:-18px; left:0; right:0; text-align:center; font-size:9.5px; font-weight:800; letter-spacing:.08em; color:var(--rx-mut); text-transform:uppercase; }
      .rx-legend { display:flex; flex-wrap:wrap; gap:12px; padding:9px 12px; border-top:1px solid var(--rx-line); font-size:11px; color:var(--rx-mut); } .rx-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
      .rx-page-msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--rx-mut); font-size:13px; padding:0 40px; pointer-events:none; line-height:1.5; } .rx-page-msg svg { width:44px; height:44px; opacity:.45; margin-bottom:10px; }
      .rx-skel { width:360px; height:560px; border-radius:14px; margin:16px auto; background:linear-gradient(90deg,var(--rx-card2) 25%,var(--rx-line) 37%,var(--rx-card2) 63%); background-size:400% 100%; animation:rxSkel 1.4s ease infinite; } @keyframes rxSkel { 0% { background-position:100% 0 } 100% { background-position:0 0 } }
      .rx-side { overflow:auto; min-height:0; display:flex; flex-direction:column; gap:12px; padding-right:2px; }
      .rx-card { background:var(--rx-card); border:1px solid var(--rx-line); border-radius:14px; padding:14px 16px; }
      .rx-card-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .rx-card-t { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:900; letter-spacing:-.01em; } .rx-card-t svg { width:16px; height:16px; color:var(--rx-blue); } .rx-card-s { font-size:11px; color:var(--rx-mut); }
      .rx-diag { display:grid; grid-template-columns:30px 1fr; gap:10px; padding:11px 12px; border-radius:11px; background:var(--rx-card2); border:1px solid var(--rx-line); margin-top:8px; }
      .rx-diag-i { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; } .rx-diag-i svg { width:16px; height:16px; }
      .rx-diag.r .rx-diag-i { background:rgba(248,81,73,.14); color:var(--rx-red); } .rx-diag.a .rx-diag-i { background:rgba(227,179,65,.14); color:var(--rx-amber); } .rx-diag.v .rx-diag-i { background:rgba(63,185,80,.14); color:var(--rx-green); } .rx-diag.n .rx-diag-i { background:rgba(88,166,255,.14); color:var(--rx-blue); }
      .rx-diag-t { font-weight:800; font-size:13px; line-height:1.3; } .rx-diag-s { color:var(--rx-mut); font-size:12px; margin-top:3px; line-height:1.45; } .rx-diag-a { margin-top:6px; font-size:12px; line-height:1.45; } .rx-diag-a b { color:var(--rx-txt); }
      .rx-rows { display:grid; grid-template-columns:52px 1fr 54px; gap:4px 10px; align-items:center; font-variant-numeric:tabular-nums; }
      .rx-rows .l { font-size:11px; color:var(--rx-mut); text-align:right; } .rx-rows .r { font-size:11px; color:var(--rx-mut); text-align:right; white-space:nowrap; }
      .rx-bar { position:relative; height:16px; background:var(--rx-card2); border-radius:5px; overflow:hidden; } .rx-bar-in { height:100%; border-radius:5px; background:linear-gradient(90deg,#1f6feb,#58a6ff); } .rx-bar-in.q { background:linear-gradient(90deg,#b62324,#f85149); } .rx-bar-in.g { background:linear-gradient(90deg,#238636,#3fb950); } .rx-bar-in.a { background:linear-gradient(90deg,#9e6a03,#e3b341); }
      .rx-bar-txt { position:absolute; left:7px; top:0; line-height:16px; font-size:10.5px; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); }
      .rx-pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .rx-pill { padding:3px 10px; border-radius:999px; border:1px solid var(--rx-line); font-size:11px; font-weight:700; cursor:pointer; color:var(--rx-mut); background:var(--rx-card2); } .rx-pill.on { border-color:var(--rx-blue); color:#fff; background:var(--rx-blue); }
      .rx-el { display:grid; grid-template-columns:26px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--rx-line); } .rx-el:first-of-type { border-top:0; }
      .rx-el-n { width:26px; height:26px; border-radius:50%; background:#1f6feb; color:#fff; font-weight:900; font-size:12px; display:flex; align-items:center; justify-content:center; } .rx-el-n.cta { background:#238636; } .rx-el-n.morto { background:#b62324; } .rx-el-n.off { background:var(--rx-card2); color:var(--rx-mut); border:1px dashed var(--rx-line); }
      .rx-el-txt { font-weight:700; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rx-el-meta { font-size:11px; color:var(--rx-mut); margin-top:2px; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; }
      .rx-el-val { text-align:right; font-variant-numeric:tabular-nums; } .rx-el-val b { font-size:14px; } .rx-el-val span { display:block; font-size:10.5px; color:var(--rx-mut); }
      .rx-tag { display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:6px; font-size:10px; font-weight:800; letter-spacing:.02em; } .rx-tag svg { width:10px; height:10px; }
      .rx-tag.cta { background:rgba(63,185,80,.14); color:var(--rx-green); } .rx-tag.morto { background:rgba(248,81,73,.14); color:var(--rx-red); } .rx-tag.rage { background:rgba(227,179,65,.14); color:var(--rx-amber); } .rx-tag.nao { background:var(--rx-card2); color:var(--rx-mut); border:1px solid var(--rx-line); } .rx-tag.tipo { background:rgba(88,166,255,.12); color:var(--rx-blue); }
      .rx-ret { display:flex; align-items:flex-end; gap:2px; height:56px; margin:10px 0 4px; } .rx-ret-bar { flex:1; background:linear-gradient(180deg,#58a6ff,#1f6feb); border-radius:2px 2px 0 0; min-width:3px; } .rx-ret-bar.pitch { background:var(--rx-red); }
      .rx-mini { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .rx-mini div { background:var(--rx-card2); border:1px solid var(--rx-line); border-radius:10px; padding:8px 10px; } .rx-mini b { display:block; font-size:1.1rem; font-variant-numeric:tabular-nums; } .rx-mini span { font-size:10.5px; color:var(--rx-mut); }
      .rx-foot { font-size:11px; color:var(--rx-mut); line-height:1.5; display:flex; gap:8px; align-items:flex-start; } .rx-foot svg { width:14px; height:14px; flex-shrink:0; margin-top:1px; color:var(--rx-blue); }
      .rx-vazio { color:var(--rx-mut); padding:14px 0; font-size:12.5px; line-height:1.5; }
      .rx-sub-t { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rx-mut); margin:12px 0 4px; }
      /* Dossiê do lead (08/10/2026): a história inteira de um visitante, em ordem */
      .ds-body { flex:1; overflow:auto; padding:14px 18px 24px; display:flex; flex-direction:column; gap:12px; }
      .ds-visita { background:var(--rx-card); border:1px solid var(--rx-line); border-radius:14px; padding:14px 16px; }
      .ds-visita-h { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:10px; } .ds-visita-h b { font-size:13.5px; } .ds-visita-h .rx-chip { max-width:none; }
      .ds-linha { display:grid; grid-template-columns:62px 18px 1fr auto; gap:0 10px; align-items:start; padding:6px 0; border-top:1px dashed var(--rx-line); font-size:12.5px; } .ds-linha:first-of-type { border-top:0; }
      .ds-hora { font-variant-numeric:tabular-nums; color:var(--rx-mut); font-size:11.5px; padding-top:2px; }
      .ds-pt { width:10px; height:10px; border-radius:50%; background:var(--rx-blue); margin-top:4px; box-shadow:0 0 0 3px rgba(88,166,255,.15); } .ds-pt.et { background:var(--rx-purple); box-shadow:0 0 0 3px rgba(163,113,247,.15); } .ds-pt.ok { background:var(--rx-green); box-shadow:0 0 0 3px rgba(63,185,80,.15); } .ds-pt.x { background:var(--rx-red); box-shadow:0 0 0 3px rgba(248,81,73,.15); } .ds-pt.a { background:var(--rx-amber); box-shadow:0 0 0 3px rgba(227,179,65,.15); }
      .ds-txt b { font-weight:800; } .ds-txt .m { color:var(--rx-mut); font-size:11.5px; margin-top:1px; }
      .ds-dur { color:var(--rx-mut); font-size:11.5px; white-space:nowrap; font-variant-numeric:tabular-nums; padding-top:2px; }
      .live-session-dossie { display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:1px 8px; border-radius:6px; border:1px solid #30363d; color:#8b949e; font-size:0.62rem; font-weight:800; cursor:pointer; vertical-align:1px; } .live-session-dossie:hover { color:#58a6ff; border-color:#58a6ff; }
      body.light .live-session-dossie { border-color:#d0d7de; color:#57606a; }
      .rx-modal-box.ampliado .rx-body { grid-template-columns:1fr; } .rx-modal-box.ampliado .rx-side, .rx-modal-box.ampliado .rx-kpis { display:none; }
      @media (max-width:1100px) { .rx-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .rx-body { grid-template-columns:400px minmax(0,1fr); } }
      @media (max-width:900px) { .rx-modal-box { inset:0; border-radius:0; } .rx-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px 12px 0; } .rx-body { grid-template-columns:1fr; grid-template-rows:60vh auto; padding:10px 12px 12px; overflow:auto; } .rx-side { overflow:visible; } .rx-head { padding:10px 12px; } .rx-chip { max-width:220px; } .rx-nav .rx-btn:not(.ico) span { display:none; } }
      .lf-node-c { position:relative; width:64px; height:64px; border-radius:50%; background:linear-gradient(180deg,#131a24,#0d1117); border:1.5px solid #2b3441; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); transition:border-color .2s; }
      .lf-node:hover .lf-node-c { border-color:#58a6ff66; }
      .lf-node-c img { width:30px; height:30px; object-fit:contain; }
      .lf-node-c .lf-node-count { font-size:1.15rem; font-weight:800; color:#e6edf3; transition:transform .2s; }
      .lf-node-c .lf-node-count.tick { transform:scale(1.2); color:#79b8ff; }
      .lf-node-badge { position:absolute; top:-6px; right:-10px; background:linear-gradient(135deg,#58a6ff,#a371f7); color:#fff; font-size:0.62rem; font-weight:800; padding:2px 8px; border-radius:11px; box-shadow:0 2px 8px rgba(88,166,255,.4); }
      .lf-node-lbl { font-size:0.72rem; font-weight:800; color:#e6edf3; max-width:110px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .lf-node-sub { font-size:0.62rem; color:#6e7681; font-weight:700; margin-top:-4px; max-width:110px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .lf-src-node .lf-node-c { width:52px; height:52px; }
      .lf-src-node .lf-node-c img { width:24px; height:24px; }
      .lf-src-node .lf-node-lbl { font-size:0.66rem; color:#8b949e; }
      .lf-pass { position:absolute; z-index:2; background:#0d1117; border:1px solid #232b36; color:#8b949e; font-size:0.62rem; font-weight:800; padding:2px 9px; border-radius:11px; transform:translate(-50%,-50%); white-space:nowrap; }
      .lf-pass.good { color:#3fb950; border-color:#3fb95033; }
      .lf-beam-path { stroke:#232b36; stroke-width:2; fill:none; }
      .lf-beam-run { stroke:url(#lfBeamGrad); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-dasharray:16 84; animation:lfComet 1.7s linear infinite; filter:drop-shadow(0 0 5px rgba(88,166,255,.5)); }
      .lf-steps { position:relative; max-width:560px; margin:0 auto; }
      .lf-step { position:relative; background:linear-gradient(180deg, #10161f 0%, #0d1117 100%); border:1px solid #232b36; border-radius:15px; padding:15px 18px; display:flex; align-items:center; gap:14px; transition:border-color .2s; }
      .lf-step:hover { border-color:#33415580; }
      .lf-step-n { width:30px; height:30px; border-radius:9px; background:#58a6ff14; border:1px solid #58a6ff33; color:#79b8ff; font-weight:800; font-size:0.8rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
      .lf-step-info { flex:1; min-width:0; }
      .lf-step-name { font-weight:800; font-size:0.84rem; color:#e6edf3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .lf-step-path { font-size:0.66rem; color:#6e7681; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
      .lf-step-bar { height:4px; background:#161b22; border-radius:3px; margin-top:8px; overflow:hidden; }
      .lf-step-bar i { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, #58a6ff, #a371f7); transition:width .6s cubic-bezier(.2,.8,.2,1); }
      .lf-step-count { text-align:right; flex-shrink:0; }
      .lf-step-count b { display:block; font-size:1.5rem; font-weight:800; color:#e6edf3; line-height:1.1; transition:transform .2s; }
      .lf-step-count b.tick { transform:scale(1.15); color:#79b8ff; }
      .lf-step-count span { font-size:0.64rem; color:#6e7681; font-weight:700; }
      .lf-beam { position:relative; height:52px; display:flex; align-items:center; justify-content:center; }
      .lf-beam svg { position:absolute; left:50%; transform:translateX(-50%); height:52px; width:60px; overflow:visible; }
      .lf-beam-base { stroke:#232b36; stroke-width:2; fill:none; }
      .lf-beam-comet { stroke:url(#lfBeamGrad); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-dasharray:14 66; animation:lfComet 1.6s linear infinite; filter:drop-shadow(0 0 5px rgba(88,166,255,.55)); }
      .lf-beam-lbl { position:relative; background:#0d1117; border:1px solid #232b36; color:#8b949e; font-size:0.64rem; font-weight:800; padding:3px 11px; border-radius:12px; z-index:1; }
      .lf-beam-lbl.good { color:#3fb950; border-color:#3fb95033; }
      .lf-loader { display:flex; align-items:center; justify-content:center; gap:10px; color:#6e7681; font-size:0.78rem; padding:34px 0; }
      .lf-spin { width:18px; height:18px; border:2.5px solid #21262d; border-top-color:#58a6ff; border-radius:50%; animation:lfSpin .8s linear infinite; display:inline-block; }
      .lf-empty { text-align:center; color:#6e7681; font-size:0.78rem; padding:30px 16px; line-height:1.6; }
      @keyframes lfSpin { to { transform:rotate(360deg); } }
      @keyframes lfComet { to { stroke-dashoffset:-100; } }
      @media (prefers-reduced-motion: reduce) { .lf-ring svg, .lf-beam-comet, .lf-spin { animation:none; } }
    
          .ib-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
          @media (max-width: 860px) { .ib-kpis { grid-template-columns:repeat(2,1fr); } #inboxGrid { grid-template-columns:1fr !important; } }
          .ib-kpi { background:#0d1117; border:1px solid #21262d; border-radius:12px; padding:13px 15px; transition:border-color .18s; }
          .ib-kpi:hover { border-color:#30363d; }
          .ib-kpi-label { font-size:0.62rem; font-weight:800; color:#6e7681; text-transform:uppercase; letter-spacing:0.06em; display:flex; align-items:center; gap:6px; }
          .ib-kpi-val { font-size:1.35rem; font-weight:800; margin-top:4px; color:#e6edf3; }
          .ib-row { display:flex; gap:10px; padding:11px 13px; border-bottom:1px solid #1c2128; cursor:pointer; transition:background .15s; align-items:flex-start; }
          .ib-row:hover { background:#161b22; }
          .ib-row.sel { background:#161b22; box-shadow:inset 3px 0 0 #58a6ff; }
          .ib-av { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:12px; flex-shrink:0; letter-spacing:.4px; }
          .ib-pill { font-size:0.66rem; font-weight:700; padding:4px 12px; border-radius:16px; cursor:pointer; background:#6b728010; border:1px solid #30363d; color:#8b949e; transition:color .15s,border-color .15s; }
          .ib-pill:hover { color:#c9d1d9; border-color:#3d444d; }
          .ib-pill.on { background:#58a6ff14; border-color:#58a6ff50; color:#79b8ff; }
          .ib-search { width:100%; background:#010409; border:1px solid #30363d; border-radius:9px; padding:8px 12px 8px 32px; color:#e6edf3; font-size:0.75rem; transition:border-color .15s; }
          .ib-search:focus { outline:none; border-color:#58a6ff66; }
          .ib-composer { display:flex; gap:8px; padding:12px 14px; border-top:1px solid #21262d; background:#0d1117; align-items:flex-end; }
          .ib-composer textarea { flex:1; background:#010409; border:1px solid #30363d; border-radius:10px; padding:10px 12px; color:#e6edf3; font-size:0.78rem; resize:none; min-height:40px; max-height:140px; line-height:1.5; transition:border-color .15s; }
          .ib-composer textarea:focus { outline:none; border-color:#58a6ff66; }
          .ib-send { background:#238636; border:none; color:#fff; width:40px; height:40px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; }
          .ib-send:hover { background:#2ea043; }
          .ib-send:disabled { opacity:.5; cursor:default; }
          .ib-chip { font-size:0.62rem; font-weight:800; padding:3px 10px; border-radius:12px; white-space:nowrap; }
        

/* ══ Primeira pintura ══ */
/* Idioma do login: em EN/ES o texto em PT não aparece antes do JS traduzir. */
html.bm-lang-espera #loginOverlay { visibility: hidden; }
/* Aba pesada baixando: fio discreto no topo (some sozinho). */
html.bm-aba-carga::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100000; background: linear-gradient(90deg, transparent, #58a6ff, transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: bmAbaFio 1s linear infinite; }
@keyframes bmAbaFio { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { html.bm-aba-carga::after { animation: none; background: #58a6ff; opacity: .5; } }