/* ══ bloco original: linhas 29–19280 ══ */
    /* ===== RESET ===== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    /* ═══════════════════════════════════════════════════════
   UI/UX PRO MAX — Qualidade, Acessibilidade, Interação
   Skill: Sales Intelligence Dashboard (WCAG AA)
═══════════════════════════════════════════════════════ */

    /* 1. prefers-reduced-motion — respeita preferência do SO */
    @media(prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* 2. Focus ring — navegação por teclado (WCAG AA) */
    :focus-visible {
      outline: 2px solid #f5c518;
      outline-offset: 3px;
      border-radius: 4px;
    }

    :focus:not(:focus-visible) {
      outline: none;
    }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid #f5c518;
      outline-offset: 0;
      border-radius: 6px;
    }

    /* 3. cursor: pointer — elementos interativos sem cursor definido */
    button,
    [role="button"],
    label[for],
    select,
    summary,
    [onclick],
    .tab,
    .sb-item,
    .card-title[onclick],
    .link-acc,
    .badge[onclick],
    .tbl tbody tr,
    .fu-card,
    .reat-card,
    .visit-card,
    .doc-item,
    .camp-type-btn,
    .prio-card,
    .ranking-card,
    .di-check-item,
    .di-sug-item,
    .di-pending-card,
    .funnel-visual-stage {
      cursor: pointer;
    }

    /* 4. Pipeline — bordas de status com espessura premium */
    .pl-card[style*="border-left"] {
      border-left-width: 4px !important;
      border-radius: 0 11px 11px 0 !important;
    }

    /* 5. Transições padronizadas — 150-300ms em todos os interativos */
    button:not([class*="pl-agent"]):not([class*="lg-"]):not([class*="act-"]):not([class*="adm-"]):not(.di-pend-wa):not(.di-pend-edit) {
      transition: all .2s cubic-bezier(.4, 0, .2, 1);
    }

    a {
      transition: color .15s ease, opacity .15s ease;
    }

    /* 6. Sales Intelligence Dashboard — tokens de cor por resultado */
    :root {
      --si-won: #22c55e;
      /* Venda Realizada / Fechamento */
      --si-lost: #ef4444;
      /* Perdido / Desqualificado */
      --si-prog: #3b82f6;
      /* Em atendimento / Negociação */
      --si-warn: #f97316;
      /* Proposta Enviada sem resposta / Dormindo */
      --si-gold: #f5c518;
      /* Meta atingida (= var(--acc)) */
      --si-neu: #64748b;
      /* Novo / neutro */
    }

    /* 7. Indicador de ativo no nav (acessibilidade) */
    .tab.active {
      position: relative;
    }

    .tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 2px;
      border-radius: 2px;
      background: var(--acc);
    }

    /* 8. Skeleton loader genérico (substituir spinners genéricos) */
    .skeleton {
      background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .04) 75%);
      background-size: 200% 100%;
      animation: skeleton-wave 1.6s infinite;
      border-radius: 6px;
    }

    @keyframes skeleton-wave {
      0% {
        background-position: 200% 0
      }

      100% {
        background-position: -200% 0
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .skeleton {
        animation: none;
        background: rgba(255, 255, 255, .05);
      }
    }

    /* ===== DESIGN TOKENS — CRM + OBJEÇÕES ===== */
    :root {
      --bg: #07090f;
      --surf: #0f1319;
      --card: #141923;
      --card2: #1a2030;
      --border: rgba(255, 255, 255, .09);
      --borderL: rgba(255, 255, 255, .05);
      --text: #eef2ff;
      --muted: #8892b0;
      --muted2: #64728f;
      --acc: #f5c518;
      --acc2: #e0a800;
      --acc-glow: rgba(245, 197, 24, .2);
      --green: #10d98a;
      --red: #ff4d6d;
      --blue: #4d9fff;
      --purple: #a855f7;
      --orange: #fb923c;
      /* Fase D — semânticos + data-viz (paridade com o tema claro) */
      --info: #4d9fff;
      --success: #10d98a;
      --danger: #ff4d6d;
      --warning: #fbbf24;
      --chart: #818cf8;
      --radius: 14px;
      --radius-sm: 10px;
      --radius-xs: 7px;
      --shadow: 0 4px 24px rgba(0, 0, 0, .4);
      --shadow-lg: 0 8px 48px rgba(0, 0, 0, .6);
      --trans: .2s cubic-bezier(.4, 0, .2, 1);
      --g-50: #ecfdf5;
      --g-100: #d1fae5;
      --g-200: #a7f3d0;
      --g-300: #6ee7b7;
      --g-400: #34d399;
      --g-500: #10b981;
      --g-600: #059669;
      --g-700: #047857;
      --g-800: #065f46;
      --g-900: #064e3b;
      --o-50: #fff7ed;
      --o-100: #ffedd5;
      --o-200: #fed7aa;
      --o-300: #fdba74;
      --o-400: #fb923c;
      --o-500: #f97316;
      --o-600: #ea580c;
      --s-50: #f8fafc;
      --s-100: #f1f5f9;
      --s-200: #e2e8f0;
      --s-300: #cbd5e1;
      --s-400: #94a3b8;
      --s-500: #64748b;
      --s-600: #475569;
      --s-700: #334155;
      --s-800: #1e293b;
      --s-900: #0f172a;
      --r-sm: 10px;
      --r-md: 14px;
      --r-lg: 20px;
      --r-xl: 28px;
      --r-full: 9999px;
      --sh-sm: 0 1px 2px rgba(0, 0, 0, .05);
      --sh-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -2px rgba(0, 0, 0, .05);
      --sh-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .05);
      --sh-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);
      --sh-glow: 0 0 40px rgba(16, 185, 129, .15);
      --ease: cubic-bezier(.4, 0, .2, 1);
      --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    }

    /* ===== DESIGN TOKENS — TEMA CLARO =====
       Override completo das variáveis CSS para tema claro.
       Herda para todos os descendentes via cascade.
       Não afeta tema escuro.
    ===================================================== */
    html[data-theme="light"],
    body[data-theme="light"] {
      --bg:         #f8fafc;
      --surf:       #f1f5f9;
      --card:       #ffffff;
      --card2:      #f8fafc;
      --border:     #e2e8f0;
      --borderL:    #eef2f6;
      --text:       #0f172a;
      --muted:      #475569;
      --muted2:     #64748b;
      --acc:        #f59e0b;
      --acc2:       #d97706;
      --acc-glow:   rgba(245, 158, 11, .14);
      --green:      #16a34a;
      --red:        #dc2626;
      --blue:       #2563eb;
      --purple:     #7c3aed;
      --orange:     #ea580c;
      --shadow:     0 2px 8px rgba(15, 23, 42, .06);
      --shadow-lg:  0 8px 28px rgba(15, 23, 42, .10);
      /* Novos tokens de tema claro */
      --primary:        #2563eb;
      --primary-soft:   rgba(37, 99, 235, .10);
      --primary-border: rgba(37, 99, 235, .22);
      --brand:          #f59e0b;
      --brand-soft:     rgba(245, 158, 11, .12);
      --brand-border:   rgba(245, 158, 11, .26);
      --success:        #16a34a;
      --danger:         #dc2626;
      --warning:        #f59e0b;
      --info:           #2563eb;
      --chart:          #6366f1;
      --shadow-soft:    0 18px 50px rgba(15, 23, 42, .08);
    }

    /* Fundo do body no tema claro com gradiente suave */
    body[data-theme="light"] {
      background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .04), transparent 34%),
        #f8fafc !important;
      color: #0f172a;
    }

    /* ═══════════════════════════════════════════════════════════════
       TEMA CLARO — WhatsApp Hub (panes Automação/Web/Oficial)
       As telas usam cores escuras inline; aqui adaptamos ao modo claro.
       ═══════════════════════════════════════════════════════════════ */
    /* Container raiz do Hub */
    body[data-theme="light"] #module-wa { background: #f8fafc !important; }
    /* Panes de conteúdo */
    body[data-theme="light"] #wa-pane-automacao,
    body[data-theme="light"] #wa-pane-web,
    body[data-theme="light"] #wa-pane-oficial { background: #f8fafc !important; }
    /* Cards internos (fundos escuros → branco). Cobre #hex E rgb(). */
    body[data-theme="light"] #module-wa [style*="background:#0"],
    body[data-theme="light"] #module-wa [style*="background: #0"],
    body[data-theme="light"] #module-wa [style*="background:#1"],
    body[data-theme="light"] #module-wa [style*="background: #1"],
    body[data-theme="light"] #module-wa [style*="background:rgb(10"],
    body[data-theme="light"] #module-wa [style*="background: rgb(10"],
    body[data-theme="light"] #module-wa [style*="background:rgb(13"],
    body[data-theme="light"] #module-wa [style*="background: rgb(13"],
    body[data-theme="light"] #module-wa [style*="background:rgba(255,255,255,0.0"],
    body[data-theme="light"] #module-wa [style*="background: rgba(255, 255, 255, 0.0"] {
      background: #ffffff !important;
      border-color: rgba(15, 23, 42, .10) !important;
    }
    /* Textos brancos/claros → escuros legíveis */
    body[data-theme="light"] #module-wa [style*="color:#fff"],
    body[data-theme="light"] #module-wa [style*="color: #fff"],
    body[data-theme="light"] #module-wa h2[style*="color:#fff"],
    body[data-theme="light"] #module-wa h3[style*="color:#fff"],
    body[data-theme="light"] #module-wa h4[style*="color:#fff"] { color: #0f172a !important; }
    /* Textos secundários (cinza claro) → cinza médio */
    body[data-theme="light"] #module-wa [style*="color:#d1d5db"],
    body[data-theme="light"] #module-wa [style*="color:#8892b0"],
    body[data-theme="light"] #module-wa [style*="color:#a0aec0"],
    body[data-theme="light"] #module-wa [style*="color:#cbd5e1"],
    body[data-theme="light"] #module-wa [style*="color:#94a3b8"],
    body[data-theme="light"] #module-wa p[style*="color:#"] { color: #475569 !important; }
    /* Bordas escuras translúcidas → bordas claras */
    body[data-theme="light"] #module-wa [style*="border:1px solid rgba(255,255,255"],
    body[data-theme="light"] #module-wa [style*="border: 1px solid rgba(255, 255, 255"],
    body[data-theme="light"] #module-wa [style*="border-top:1px solid rgba(255,255,255"] {
      border-color: rgba(15, 23, 42, .10) !important;
    }
    /* Verde do ImobPilot e acentos: mantidos (são cores de marca/ação) */
    body[data-theme="light"] #module-wa [style*="color:#10b981"],
    body[data-theme="light"] #module-wa [style*="color:#25d366"],
    body[data-theme="light"] #module-wa [style*="color:#f5c518"],
    body[data-theme="light"] #module-wa [style*="color:#3b82f6"] { /* preserva cor de marca */ }

    /* ===== BODY — módulo controla fundo ===== */
    body {
      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      font-size: 13px;
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      line-height: 1.5
    }

    body[data-module="crm"],
    body[data-module="prioridades"],
    body[data-module="reativacao"],
    body[data-module="agenda"],
    body[data-module="documentacao"],
    body[data-module="comissao"],
    body[data-module="campanhas"] {
      background: var(--bg);
      color: var(--text)
    }

    body[data-module="objecoes"] {
      background: var(--s-100);
      color: var(--s-900)
    }

    body[data-module="crm"]::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(245, 197, 24, .04) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(77, 159, 255, .04) 0%, transparent 60%)
    }

    /* ===== MASTER NAV ===== */

    /* ═══════════════════════════════════════
   DOCUMENTAÇÃO / PAC — STYLES
═══════════════════════════════════════ */
    /* KPI Grid */
    .doc-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 12px;
      margin-bottom: 24px
    }

    .doc-kpi {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: border-color .2s, transform .2s
    }

    .doc-kpi:hover {
      border-color: rgba(245, 197, 24, .3);
      transform: translateY(-2px)
    }

    .doc-kpi-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0
    }

    .doc-kpi-data {
      display: flex;
      flex-direction: column;
      gap: 1px
    }

    .doc-kpi-num {
      font-size: 24px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -.8px;
      line-height: 1
    }

    .doc-kpi-lbl {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      line-height: 1.3
    }

    /* Filters Bar */
    .doc-filters {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap
    }

    .doc-filter-pill {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 11.5px;
      font-weight: 600;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      transition: all .18s;
      font-family: inherit;
      white-space: nowrap
    }

    .doc-filter-pill:hover {
      border-color: rgba(255, 255, 255, .15);
      color: var(--text)
    }

    .doc-filter-pill.active {
      background: rgba(245, 197, 24, .12);
      border-color: rgba(245, 197, 24, .3);
      color: #fbbf24
    }

    .doc-search {
      flex: 1;
      min-width: 200px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 12.5px;
      color: var(--text);
      outline: none;
      font-family: inherit;
      transition: border-color .18s
    }

    .doc-search:focus {
      border-color: rgba(245, 197, 24, .4)
    }

    .doc-search::placeholder {
      color: var(--muted)
    }

    /* Lead Card */
    .doc-lead-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color .2s, box-shadow .2s;
      margin-bottom: 12px
    }

    .doc-lead-card:hover {
      border-color: rgba(255, 255, 255, .1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, .15)
    }

    .doc-lead-card.border-green {
      border-left: 3px solid #10b981
    }

    .doc-lead-card.border-yellow {
      border-left: 3px solid #fbbf24
    }

    .doc-lead-card.border-red {
      border-left: 3px solid #ef4444
    }

    .doc-lead-card.border-blue {
      border-left: 3px solid #3b82f6
    }

    .doc-lead-card.border-purple {
      border-left: 3px solid #8b5cf6
    }

    /* Card Header (clickable to expand) */
    .doc-card-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      cursor: pointer;
      gap: 12px;
      flex-wrap: wrap;
      transition: background .15s
    }

    .doc-card-hdr:hover {
      background: rgba(255, 255, 255, .02)
    }

    .doc-card-lead-info {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0
    }

    .doc-card-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0
    }

    .doc-card-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .doc-card-meta {
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 1px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap
    }

    .doc-card-meta span {
      white-space: nowrap
    }

    .doc-card-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      flex-wrap: wrap
    }

    /* PAC Badge */
    .doc-pac-badge {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      padding: 4px 10px;
      border-radius: 20px;
      white-space: nowrap
    }

    .doc-pac-badge.pac-nao-iniciado {
      background: rgba(107, 118, 148, .1);
      color: #6b7694;
      border: 1px solid rgba(107, 118, 148, .2)
    }

    .doc-pac-badge.pac-coleta {
      background: rgba(251, 191, 36, .08);
      color: #fbbf24;
      border: 1px solid rgba(251, 191, 36, .2)
    }

    .doc-pac-badge.pac-pendente {
      background: rgba(239, 68, 68, .08);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, .2)
    }

    .doc-pac-badge.pac-completa {
      background: rgba(59, 130, 246, .08);
      color: #3b82f6;
      border: 1px solid rgba(59, 130, 246, .2)
    }

    .doc-pac-badge.pac-enviado {
      background: rgba(139, 92, 246, .08);
      color: #a78bfa;
      border: 1px solid rgba(139, 92, 246, .2)
    }

    .doc-pac-badge.pac-analise {
      background: rgba(251, 146, 60, .08);
      color: #fb923c;
      border: 1px solid rgba(251, 146, 60, .2)
    }

    .doc-pac-badge.pac-aprovado {
      background: rgba(16, 185, 129, .08);
      color: #10b981;
      border: 1px solid rgba(16, 185, 129, .2)
    }

    .doc-pac-badge.pac-recusado {
      background: rgba(239, 68, 68, .08);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, .2)
    }

    .doc-pac-badge.pac-venda-pendente {
      background: rgba(245, 197, 24, .08);
      color: #f5c518;
      border: 1px solid rgba(245, 197, 24, .2)
    }

    .doc-pac-badge.pac-venda-realizada {
      background: rgba(16, 217, 138, .08);
      color: #10d98a;
      border: 1px solid rgba(16, 217, 138, .2)
    }

    /* Progress Bar */
    .doc-progress-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 20px 12px
    }

    .doc-progress-bar {
      flex: 1;
      height: 6px;
      background: rgba(255, 255, 255, .06);
      border-radius: 4px;
      overflow: hidden
    }

    .doc-progress-fill {
      height: 100%;
      border-radius: 4px;
      transition: width .4s cubic-bezier(.4, 0, .2, 1);
      background: linear-gradient(90deg, #fbbf24, #10b981)
    }

    .doc-progress-fill.low {
      background: linear-gradient(90deg, #ef4444, #f97316)
    }

    .doc-progress-fill.mid {
      background: linear-gradient(90deg, #fbbf24, #f59e0b)
    }

    .doc-progress-fill.high {
      background: linear-gradient(90deg, #10b981, #059669)
    }

    .doc-progress-pct {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--muted);
      white-space: nowrap;
      min-width: 80px;
      text-align: right
    }

    /* Alert Chip */
    .doc-alert {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10.5px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      margin: 0 4px 4px 0
    }

    .doc-alert-warn {
      background: rgba(251, 191, 36, .08);
      color: #fbbf24;
      border: 1px solid rgba(251, 191, 36, .12)
    }

    .doc-alert-danger {
      background: rgba(239, 68, 68, .08);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, .12)
    }

    .doc-alert-info {
      background: rgba(59, 130, 246, .08);
      color: #3b82f6;
      border: 1px solid rgba(59, 130, 246, .12)
    }

    .doc-alert-success {
      background: rgba(16, 185, 129, .08);
      color: #10b981;
      border: 1px solid rgba(16, 185, 129, .12)
    }

    /* Alerts Row */
    .doc-alerts-row {
      padding: 0 20px 10px;
      display: flex;
      flex-wrap: wrap
    }

    /* Expandable Body */
    .doc-card-body {
      display: none;
      padding: 0 20px 20px;
      animation: docSlideDown .25s ease
    }

    .doc-card-body.open {
      display: block
    }

    @keyframes docSlideDown {
      from {
        opacity: 0;
        transform: translateY(-8px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* Checklist Groups */
    .doc-checklist-group {
      margin-bottom: 16px
    }

    .doc-checklist-group-title {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border)
    }

    .doc-check-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 6px
    }

    /* Individual Check Item */
    .doc-check-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 7px;
      cursor: pointer;
      transition: background .12s;
      user-select: none
    }

    .doc-check-item:hover {
      background: rgba(255, 255, 255, .03)
    }

    .doc-check-box {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      border: 2px solid rgba(255, 255, 255, .15);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .2s;
      font-size: 10px;
      color: transparent
    }

    .doc-check-item.checked .doc-check-box {
      background: #10b981;
      border-color: #10b981;
      color: #fff
    }

    .doc-check-item.na .doc-check-box {
      background: rgba(107, 118, 148, .2);
      border-color: rgba(107, 118, 148, .3);
      color: #6b7694
    }

    .doc-check-item.urgent .doc-check-box {
      border-color: #ef4444
    }

    .doc-check-label {
      font-size: 12.5px;
      color: var(--text);
      transition: opacity .15s
    }

    .doc-check-item.checked .doc-check-label {
      opacity: .5;
      text-decoration: line-through
    }

    .doc-check-date {
      font-size: 9.5px;
      color: var(--muted);
      margin-left: auto;
      white-space: nowrap
    }

    /* Action Buttons Row */
    .doc-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      margin-top: 16px
    }

    .doc-act-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 14px;
      border-radius: 7px;
      font-size: 11.5px;
      font-weight: 600;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .03);
      color: var(--muted);
      cursor: pointer;
      transition: all .15s;
      font-family: inherit;
      white-space: nowrap
    }

    .doc-act-btn:hover {
      background: rgba(255, 255, 255, .06);
      color: var(--text);
      border-color: rgba(255, 255, 255, .12)
    }

    .doc-act-btn.primary {
      background: rgba(245, 197, 24, .1);
      border-color: rgba(245, 197, 24, .25);
      color: #fbbf24
    }

    .doc-act-btn.primary:hover {
      background: rgba(245, 197, 24, .18)
    }

    .doc-act-btn.success {
      background: rgba(16, 185, 129, .1);
      border-color: rgba(16, 185, 129, .25);
      color: #10b981
    }

    .doc-act-btn.success:hover {
      background: rgba(16, 185, 129, .18)
    }

    .doc-act-btn.wa {
      background: rgba(37, 211, 102, .1);
      border-color: rgba(37, 211, 102, .25);
      color: #25d366
    }

    .doc-act-btn.wa:hover {
      background: rgba(37, 211, 102, .18)
    }

    .doc-act-btn.danger {
      background: rgba(239, 68, 68, .08);
      border-color: rgba(239, 68, 68, .2);
      color: #ef4444
    }

    .doc-act-btn.danger:hover {
      background: rgba(239, 68, 68, .15)
    }

    /* Notes Input */
    .doc-notes-area {
      width: 100%;
      background: var(--card2, rgba(255, 255, 255, .02));
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 12px;
      color: var(--text);
      outline: none;
      font-family: inherit;
      resize: vertical;
      min-height: 50px;
      margin-top: 12px;
      transition: border-color .18s
    }

    .doc-notes-area:focus {
      border-color: rgba(245, 197, 24, .3)
    }

    .doc-notes-area::placeholder {
      color: var(--muted)
    }

    /* WhatsApp Modal */
    .doc-wa-overlay {
      position: fixed;
      inset: 0;
      z-index: 8000;
      background: rgba(0, 0, 0, .65);
      backdrop-filter: blur(6px);
      display: none;
      align-items: center;
      justify-content: center;
      animation: docFadeIn .2s ease
    }

    .doc-wa-overlay.open {
      display: flex
    }

    @keyframes docFadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .doc-wa-box {
      background: var(--card, #0f1319);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 90%;
      max-width: 560px;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
      animation: docModalSlide .25s ease
    }

    @keyframes docModalSlide {
      from {
        transform: translateY(20px);
        opacity: 0
      }

      to {
        transform: translateY(0);
        opacity: 1
      }
    }

    .doc-wa-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--border)
    }

    .doc-wa-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text)
    }

    .doc-wa-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: none;
      background: rgba(255, 255, 255, .05);
      color: var(--muted);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s
    }

    .doc-wa-close:hover {
      background: rgba(255, 255, 255, .1);
      color: var(--text)
    }

    .doc-wa-body {
      padding: 20px 24px
    }

    .doc-wa-msg {
      background: rgba(255, 255, 255, .02);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.7;
      white-space: pre-wrap;
      max-height: 300px;
      overflow-y: auto
    }

    .doc-wa-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 16px 24px 20px;
      border-top: 1px solid var(--border)
    }

    .doc-wa-btn {
      padding: 10px 18px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .doc-wa-btn.green {
      background: #25d366;
      color: #fff
    }

    .doc-wa-btn.green:hover {
      background: #1ebe5d;
      transform: translateY(-1px)
    }

    .doc-wa-btn.gold {
      background: rgba(245, 197, 24, .12);
      color: #fbbf24;
      border: 1px solid rgba(245, 197, 24, .25)
    }

    .doc-wa-btn.gold:hover {
      background: rgba(245, 197, 24, .2)
    }

    .doc-wa-btn.ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border)
    }

    .doc-wa-btn.ghost:hover {
      background: rgba(255, 255, 255, .05);
      color: var(--text)
    }

    /* Expand Arrow */
    .doc-expand-arrow {
      font-size: 11px;
      color: var(--muted);
      transition: transform .25s;
      display: inline-block
    }

    .doc-expand-arrow.open {
      transform: rotate(180deg)
    }

    /* Empty State */
    .doc-empty {
      text-align: center;
      padding: 60px 24px;
      color: var(--muted)
    }

    .doc-empty-icon {
      font-size: 40px;
      display: block;
      margin-bottom: 12px
    }

    .doc-empty-text {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px
    }

    .doc-empty-sub {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.6
    }


    /* ═══════════════════════════════════════
   PLANEJAMENTO DE COMISSÃO — STYLES
═══════════════════════════════════════ */
    .comm-kpi-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
      margin-bottom: 24px
    }

    .comm-kpi-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 18px;
      text-align: center;
      transition: border-color .2s, transform .2s
    }

    .comm-kpi-card:hover {
      border-color: rgba(245, 197, 24, .3);
      transform: translateY(-2px)
    }

    .comm-kpi-card .kv {
      font-size: 22px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -.6px;
      line-height: 1.1
    }

    .comm-kpi-card .kl {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--muted);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .comm-kpi-card.accent .kv {
      color: #fbbf24
    }

    .comm-kpi-card.green .kv {
      color: #10b981
    }

    .comm-kpi-card.red .kv {
      color: #ef4444
    }

    .comm-kpi-card.blue .kv {
      color: #3b82f6
    }

    /* Progress bar */
    .comm-progress {
      margin-bottom: 24px
    }

    .comm-progress-bar {
      height: 10px;
      background: rgba(255, 255, 255, .06);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 6px
    }

    .comm-progress-fill {
      height: 100%;
      border-radius: 6px;
      transition: width .5s cubic-bezier(.4, 0, .2, 1)
    }

    .comm-progress-fill.p-red {
      background: linear-gradient(90deg, #ef4444, #f97316)
    }

    .comm-progress-fill.p-yellow {
      background: linear-gradient(90deg, #fbbf24, #f59e0b)
    }

    .comm-progress-fill.p-blue {
      background: linear-gradient(90deg, #3b82f6, #6366f1)
    }

    .comm-progress-fill.p-green {
      background: linear-gradient(90deg, #10b981, #059669)
    }

    .comm-progress-text {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      text-align: right
    }

    /* Simulator */
    .comm-sim {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 24px
    }

    .comm-sim-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .comm-sim-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px
    }

    .comm-sim-field label {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      display: block;
      margin-bottom: 4px
    }

    .comm-sim-field input {
      width: 100%;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text);
      outline: none;
      font-family: inherit;
      transition: border-color .18s;
      box-sizing: border-box
    }

    .comm-sim-field input:focus {
      border-color: rgba(245, 197, 24, .4)
    }

    /* Result Panel */
    .comm-result {
      background: rgba(245, 197, 24, .04);
      border: 1px solid rgba(245, 197, 24, .12);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 24px
    }

    .comm-result-title {
      font-size: 13px;
      font-weight: 800;
      color: #fbbf24;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .comm-result-text {
      font-size: 13px;
      color: var(--text);
      line-height: 1.8
    }

    .comm-result-text strong {
      color: #fbbf24
    }

    /* Scenarios */
    .comm-scenarios {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 14px;
      margin-bottom: 24px
    }

    .comm-scenario {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      transition: border-color .2s
    }

    .comm-scenario:hover {
      border-color: rgba(255, 255, 255, .12)
    }

    .comm-scenario-tag {
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: 3px 8px;
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 10px
    }

    .comm-scenario-tag.conservador {
      background: rgba(239, 68, 68, .1);
      color: #ef4444
    }

    .comm-scenario-tag.realista {
      background: rgba(59, 130, 246, .1);
      color: #3b82f6
    }

    .comm-scenario-tag.agressivo {
      background: rgba(16, 185, 129, .1);
      color: #10b981
    }

    .comm-scenario-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--muted);
      padding: 4px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .04)
    }

    .comm-scenario-row:last-child {
      border-bottom: none
    }

    .comm-scenario-row .sv {
      font-weight: 700;
      color: var(--text)
    }

    /* Action Plan */
    .comm-action {
      background: rgba(16, 185, 129, .04);
      border: 1px solid rgba(16, 185, 129, .12);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 24px
    }

    .comm-action-title {
      font-size: 13px;
      font-weight: 800;
      color: #10b981;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .comm-action-text {
      font-size: 13px;
      color: var(--text);
      line-height: 1.8
    }

    /* Section sep */
    .comm-section {
      margin-bottom: 8px
    }

    .comm-section-title {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border)
    }

    /* Improved table */
    .comm-table-wrap {
      overflow-x: auto;
      margin-bottom: 24px
    }

    .comm-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px
    }

    .comm-table th {
      text-align: left;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted);
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap
    }

    .comm-table td {
      padding: 10px 12px;
      color: var(--text);
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      white-space: nowrap
    }

    .comm-table tr:hover td {
      background: rgba(255, 255, 255, .02)
    }

    .comm-status-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 4px;
      text-transform: capitalize
    }

    .comm-status-badge.cs-prevista {
      background: rgba(59, 130, 246, .1);
      color: #3b82f6
    }

    .comm-status-badge.cs-pendente {
      background: rgba(251, 191, 36, .1);
      color: #fbbf24
    }

    .comm-status-badge.cs-recebida {
      background: rgba(16, 185, 129, .1);
      color: #10b981
    }

    .comm-status-badge.cs-cancelada {
      background: rgba(107, 118, 148, .1);
      color: #6b7694
    }

    .comm-table-actions {
      display: flex;
      gap: 6px
    }

    .comm-table-btn {
      padding: 4px 8px;
      border-radius: 5px;
      font-size: 10px;
      font-weight: 600;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
      white-space: nowrap
    }

    .comm-table-btn:hover {
      background: rgba(255, 255, 255, .06);
      color: var(--text)
    }

    .comm-table-btn.green:hover {
      border-color: rgba(16, 185, 129, .4);
      color: #10b981
    }

    .comm-table-btn.red:hover {
      border-color: rgba(239, 68, 68, .4);
      color: #ef4444
    }

    /* ═══════════════════════════════════════
   CAMPANHAS MANUAIS — STYLES
═══════════════════════════════════════ */
    /* Lead selector */
    .camp-lead-sel {
      margin-bottom: 20px
    }

    .camp-lead-select {
      width: 100%;
      max-width: 500px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text);
      outline: none;
      font-family: inherit
    }

    .camp-lead-select:focus {
      border-color: rgba(245, 197, 24, .4)
    }

    /* Filters */
    .camp-filters-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px
    }

    .camp-pill {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      transition: all .18s;
      font-family: inherit
    }

    .camp-pill:hover {
      border-color: rgba(255, 255, 255, .15);
      color: var(--text)
    }

    .camp-pill.active {
      background: rgba(245, 197, 24, .12);
      border-color: rgba(245, 197, 24, .3);
      color: #fbbf24
    }

    /* Triggers */
    .camp-triggers-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 8px;
      margin-bottom: 24px
    }

    .camp-trigger {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      cursor: pointer;
      transition: all .18s;
      user-select: none
    }

    .camp-trigger:hover {
      border-color: rgba(255, 255, 255, .12)
    }

    .camp-trigger.active {
      background: rgba(245, 197, 24, .06);
      border-color: rgba(245, 197, 24, .25)
    }

    .camp-trigger-name {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px
    }

    .camp-trigger-desc {
      font-size: 10.5px;
      color: var(--muted);
      line-height: 1.4
    }

    /* Message Cards */
    .camp-msg-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 24px
    }

    .camp-msg-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color .2s
    }

    .camp-msg-card:hover {
      border-color: rgba(255, 255, 255, .1)
    }

    .camp-msg-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      cursor: pointer;
      transition: background .15s
    }

    .camp-msg-hdr:hover {
      background: rgba(255, 255, 255, .02)
    }

    .camp-msg-type {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .camp-msg-type-icon {
      font-size: 18px
    }

    .camp-msg-type-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text)
    }

    .camp-msg-type-tag {
      font-size: 9px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 4px;
      text-transform: uppercase
    }

    .camp-msg-body {
      display: none;
      padding: 0 18px 16px;
      animation: docSlideDown .25s ease
    }

    .camp-msg-body.open {
      display: block
    }

    .camp-msg-text {
      background: rgba(255, 255, 255, .02);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.7;
      white-space: pre-wrap;
      margin-bottom: 12px
    }

    .camp-msg-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    /* Generator */
    .camp-gen {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 24px
    }

    .camp-gen-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .camp-gen-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
      margin-bottom: 16px
    }

    .camp-gen-field label {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      display: block;
      margin-bottom: 4px
    }

    .camp-gen-field input,
    .camp-gen-field select,
    .camp-gen-field textarea {
      width: 100%;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text);
      outline: none;
      font-family: inherit;
      box-sizing: border-box
    }

    .camp-gen-field textarea {
      resize: vertical;
      min-height: 60px
    }

    .camp-gen-field input:focus,
    .camp-gen-field select:focus,
    .camp-gen-field textarea:focus {
      border-color: rgba(245, 197, 24, .4)
    }

    .camp-gen-results {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 16px
    }

    .camp-gen-option {
      background: rgba(255, 255, 255, .02);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px
    }

    .camp-gen-option-tag {
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 3px 8px;
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 8px
    }

    .camp-gen-option-tag.consultiva {
      background: rgba(59, 130, 246, .1);
      color: #3b82f6
    }

    .camp-gen-option-tag.direta {
      background: rgba(251, 191, 36, .1);
      color: #fbbf24
    }

    .camp-gen-option-tag.emocional {
      background: rgba(236, 72, 153, .1);
      color: #ec4899
    }

    .camp-gen-option-text {
      font-size: 13px;
      color: var(--text);
      line-height: 1.7;
      white-space: pre-wrap;
      margin-bottom: 10px
    }


    /* ═══════════════════════════════════════
   CONFIGURAR META ADS — STYLES v2
═══════════════════════════════════════ */
    .meta-kpi-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
      margin-bottom: 24px
    }

    .meta-kpi {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      text-align: center;
      transition: border-color .2s, transform .2s
    }

    .meta-kpi:hover {
      transform: translateY(-2px);
      border-color: rgba(24, 119, 242, .3)
    }

    .meta-kpi-icon {
      font-size: 20px;
      margin-bottom: 4px
    }

    .meta-kpi-val {
      font-size: 20px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -.5px
    }

    .meta-kpi-lbl {
      font-size: 10px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-top: 2px
    }

    .meta-kpi.blue .meta-kpi-val {
      color: #3b82f6
    }

    .meta-kpi.green .meta-kpi-val {
      color: #10b981
    }

    .meta-kpi.yellow .meta-kpi-val {
      color: #fbbf24
    }

    .meta-kpi.red .meta-kpi-val {
      color: #ef4444
    }

    /* Tabs */
    .meta-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 24px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--border);
      padding-bottom: 0
    }

    .meta-tab {
      padding: 10px 18px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      font-family: inherit;
      transition: all .18s;
      white-space: nowrap
    }

    .meta-tab:hover {
      color: var(--text)
    }

    .meta-tab.active {
      color: #3b82f6;
      border-bottom-color: #3b82f6
    }

    /* Tab panels */
    .meta-panel {
      display: none
    }

    .meta-panel.active {
      display: block
    }

    /* Checklist */
    .meta-checklist {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 24px
    }

    .meta-check-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      transition: border-color .18s
    }

    .meta-check-row.done {
      border-color: rgba(16, 185, 129, .2)
    }

    .meta-check-num {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      flex-shrink: 0;
      border: 2px solid var(--border);
      color: var(--muted)
    }

    .meta-check-row.done .meta-check-num {
      background: #10b981;
      border-color: #10b981;
      color: #fff
    }

    .meta-check-info {
      flex: 1;
      min-width: 0
    }

    .meta-check-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text)
    }

    .meta-check-desc {
      font-size: 11px;
      color: var(--muted);
      margin-top: 1px
    }

    .meta-check-row.done .meta-check-title {
      opacity: .6;
      text-decoration: line-through
    }

    .meta-check-action {
      flex-shrink: 0
    }

    /* Campaign form */
    .meta-form {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 24px
    }

    .meta-form-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .meta-form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 14px
    }

    .meta-form-field label {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      display: block;
      margin-bottom: 4px
    }

    .meta-form-field input,
    .meta-form-field select,
    .meta-form-field textarea {
      width: 100%;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 12.5px;
      color: var(--text);
      outline: none;
      font-family: inherit;
      box-sizing: border-box;
      transition: border-color .18s
    }

    .meta-form-field input:focus,
    .meta-form-field select:focus,
    .meta-form-field textarea:focus {
      border-color: rgba(24, 119, 242, .4)
    }

    .meta-form-field textarea {
      resize: vertical;
      min-height: 60px
    }

    .meta-form-field .meta-hint {
      font-size: 10px;
      color: var(--muted);
      margin-top: 3px;
      font-style: italic
    }

    /* Campaign cards */
    .meta-camp-grid {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .meta-camp-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 20px;
      transition: border-color .2s
    }

    .meta-camp-card:hover {
      border-color: rgba(24, 119, 242, .2)
    }

    .meta-camp-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap
    }

    .meta-camp-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text)
    }

    .meta-camp-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 3px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .meta-camp-status {
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 4px
    }

    .meta-camp-status.ativa {
      background: rgba(16, 185, 129, .1);
      color: #10b981;
      border: 1px solid rgba(16, 185, 129, .2)
    }

    .meta-camp-status.pausada {
      background: rgba(251, 191, 36, .1);
      color: #fbbf24;
      border: 1px solid rgba(251, 191, 36, .2)
    }

    .meta-camp-status.teste {
      background: rgba(59, 130, 246, .1);
      color: #3b82f6;
      border: 1px solid rgba(59, 130, 246, .2)
    }

    .meta-camp-status.encerrada {
      background: rgba(107, 118, 148, .1);
      color: #6b7694;
      border: 1px solid rgba(107, 118, 148, .2)
    }

    .meta-camp-actions {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      flex-wrap: wrap
    }

    /* Integration status */
    .meta-integ-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 24px
    }

    .meta-integ-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px
    }

    .meta-integ-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .meta-integ-dot.green {
      background: #10b981
    }

    .meta-integ-dot.yellow {
      background: #fbbf24
    }

    .meta-integ-dot.red {
      background: #ef4444
    }

    .meta-integ-dot.gray {
      background: #6b7694
    }

    .meta-integ-label {
      font-size: 12.5px;
      color: var(--text);
      flex: 1
    }

    .meta-integ-val {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted)
    }

    /* Best practices */
    .meta-tips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px
    }

    .meta-tip {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px
    }

    .meta-tip-icon {
      font-size: 18px;
      margin-bottom: 6px
    }

    .meta-tip-text {
      font-size: 12px;
      color: var(--text);
      line-height: 1.6
    }

    /* Warning/security banner */
    .meta-warn-banner {
      background: rgba(239, 68, 68, .04);
      border: 1px solid rgba(239, 68, 68, .12);
      border-radius: var(--radius);
      padding: 14px 18px;
      font-size: 12px;
      color: #ef4444;
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.6
    }

    /* Admin only section */
    .meta-admin-section {
      background: rgba(139, 92, 246, .04);
      border: 1px solid rgba(139, 92, 246, .12);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 24px
    }

    .meta-admin-title {
      font-size: 13px;
      font-weight: 800;
      color: #a78bfa;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px
    }


    /* ── META ADS BACKEND STYLES ── */
    .meta-mode-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 16px;
      margin-bottom: 24px
    }

    .meta-mode-card {
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      cursor: pointer;
      transition: all .22s;
      position: relative;
      overflow: hidden
    }

    .meta-mode-card:hover {
      border-color: rgba(59, 130, 246, .3);
      transform: translateY(-2px)
    }

    .meta-mode-card.selected {
      border-color: #3b82f6;
      background: rgba(59, 130, 246, .03)
    }

    .meta-mode-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 4px;
      letter-spacing: .06em
    }

    .meta-mode-badge.available {
      background: rgba(16, 185, 129, .1);
      color: #10b981;
      border: 1px solid rgba(16, 185, 129, .2)
    }

    .meta-mode-badge.recommended {
      background: rgba(59, 130, 246, .1);
      color: #3b82f6;
      border: 1px solid rgba(59, 130, 246, .2)
    }

    .meta-mode-icon {
      font-size: 32px;
      margin-bottom: 12px
    }

    .meta-mode-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px
    }

    .meta-mode-desc {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 14px
    }

    .meta-backend-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 16px
    }

    .meta-backend-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .meta-flow {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 24px
    }

    .meta-flow-step {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      position: relative;
      padding: 14px 0
    }

    .meta-flow-step:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 15px;
      top: 40px;
      bottom: 0;
      width: 2px;
      background: var(--border)
    }

    .meta-flow-num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      flex-shrink: 0;
      background: rgba(59, 130, 246, .1);
      color: #3b82f6;
      border: 2px solid rgba(59, 130, 246, .2);
      z-index: 1
    }

    .meta-flow-step.done .meta-flow-num {
      background: #10b981;
      border-color: #10b981;
      color: #fff
    }

    .meta-flow-info {
      flex: 1;
      min-width: 0
    }

    .meta-flow-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text)
    }

    .meta-flow-desc {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
      line-height: 1.5
    }

    .meta-endpoint {
      background: rgba(255, 255, 255, .02);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .meta-endpoint-method {
      font-size: 10px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 4px;
      font-family: 'Courier New', monospace
    }

    .meta-endpoint-method.get {
      background: rgba(16, 185, 129, .1);
      color: #10b981
    }

    .meta-endpoint-method.post {
      background: rgba(59, 130, 246, .1);
      color: #3b82f6
    }

    .meta-endpoint-path {
      font-size: 12px;
      color: var(--text);
      font-family: 'Courier New', monospace
    }

    .meta-endpoint-desc {
      font-size: 10.5px;
      color: var(--muted);
      margin-left: auto
    }

    .meta-alert {
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 12px;
      margin-bottom: 8px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.5
    }

    .meta-alert.warn {
      background: rgba(251, 191, 36, .06);
      border: 1px solid rgba(251, 191, 36, .12);
      color: #fbbf24
    }

    .meta-alert.error {
      background: rgba(239, 68, 68, .06);
      border: 1px solid rgba(239, 68, 68, .12);
      color: #ef4444
    }

    .meta-alert.info {
      background: rgba(59, 130, 246, .06);
      border: 1px solid rgba(59, 130, 246, .12);
      color: #3b82f6
    }

    .meta-alert.success {
      background: rgba(16, 185, 129, .06);
      border: 1px solid rgba(16, 185, 129, .12);
      color: #10b981
    }

    #master-nav {
      position: sticky;
      top: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 0;
      background: rgba(8, 11, 20, .96);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      padding: 0 24px;
      height: 48px;
      box-shadow: 0 1px 0 rgba(245, 197, 24, .08), 0 4px 20px rgba(0, 0, 0, .3)
    }

    #master-nav-label {
      font-size: 10px;
      font-weight: 700;
      color: #4a5270;
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-right: 14px;
      white-space: nowrap
    }

    .master-btn {
      padding: 0 18px;
      height: 48px;
      display: flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 600;
      color: #4a5568;
      border: none;
      background: transparent;
      border-bottom: 2px solid transparent;
      transition: all .25s cubic-bezier(.4, 0, .2, 1);
      user-select: none;
      white-space: nowrap;
      margin-bottom: -2px;
      font-family: inherit;
      letter-spacing: -.1px
    }

    .master-btn:hover {
      color: #f0f4ff
    }

    .master-btn.active {
      color: #fbbf24;
      border-bottom-color: #fbbf24;
      text-shadow: 0 0 20px rgba(251, 191, 36, .15)
    }

    #module-crm,
    #module-obj {
      min-height: calc(100vh - 44px)
    }

    /* ══════════════ CRM STYLES ══════════════ */
    input,
    select,
    textarea,
    button {
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 13px
    }

    input[type=date]::-webkit-calendar-picker-indicator {
      filter: invert(.5) brightness(1.5)
    }

    select option {
      background: #1a2030;
      color: var(--text)
    }

    a {
      text-decoration: none;
      color: inherit
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 5px
    }

    ::-webkit-scrollbar-track {
      background: transparent
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .12);
      border-radius: 4px
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, .2)
    }

    #root {
      position: relative;
      z-index: 1
    }

    #header {
      background: rgba(15, 19, 25, .9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      padding: 0 28px;
      display: flex;
      align-items: center;
      height: 60px;
      position: sticky;
      top: 0;
      z-index: 200;
      gap: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    #header::-webkit-scrollbar {
      display: none
    }

    #logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-right: 20px;
      cursor: pointer
    }

    #logo-icon {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--acc), var(--acc2));
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 20px var(--acc-glow);
      flex-shrink: 0
    }

    #logo-text {
      font-weight: 700;
      font-size: 13.5px;
      letter-spacing: -.2px;
      white-space: nowrap;
      background: linear-gradient(135deg, #fff 0%, var(--acc) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent
    }

    .tab {
      padding: 0 16px;
      height: 60px;
      display: flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--muted);
      border-bottom: 2px solid transparent;
      transition: all var(--trans);
      user-select: none;
      white-space: nowrap;
      position: relative
    }

    .tab:hover {
      color: var(--text)
    }

    .tab.active {
      color: var(--text);
      border-bottom-color: var(--acc);
      font-weight: 600
    }

    .tab-icon {
      font-size: 15px;
      opacity: .7;
      transition: opacity var(--trans)
    }

    .tab.active .tab-icon,
    .tab:hover .tab-icon {
      opacity: 1
    }

    .tab-badge {
      background: var(--red);
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      padding: 2px 5px;
      border-radius: 20px;
      line-height: 1;
      min-width: 16px;
      text-align: center;
      animation: pulse-badge 2s infinite
    }

    @keyframes pulse-badge {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .7
      }
    }

    #hright {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 8px
    }

    #hinfo {
      font-size: 11.5px;
      color: var(--muted);
      margin-right: 4px;
      white-space: nowrap
    }

    .h-btn {
      padding: 7px 12px;
      border-radius: var(--radius-xs);
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .04);
      color: var(--muted);
      transition: all var(--trans);
      white-space: nowrap
    }

    .h-btn:hover {
      background: rgba(255, 255, 255, .08);
      color: var(--text);
      border-color: rgba(255, 255, 255, .12)
    }

    .btn-pri {
      padding: 8px 18px;
      border-radius: var(--radius-xs);
      cursor: pointer;
      background: linear-gradient(135deg, var(--acc), var(--acc2));
      color: #000;
      font-size: 13px;
      font-weight: 700;
      border: none;
      user-select: none;
      white-space: nowrap;
      transition: all var(--trans);
      box-shadow: 0 0 20px var(--acc-glow)
    }

    .btn-pri:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 30px rgba(245, 197, 24, .4)
    }

    .btn-pri:active {
      transform: translateY(0)
    }

    /* ══════════════════════════════════════════════
   CTA GLOW — Borda premium com tracking de mouse
══════════════════════════════════════════════ */
    .cta-glow {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(250, 204, 21, .65) !important;
      box-shadow:
        0 0 0 1px rgba(250, 204, 21, .18),
        0 14px 34px rgba(250, 204, 21, .18),
        inset 0 1px 0 rgba(255, 255, 255, .35) !important;
      transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        filter .18s ease !important;
    }

    .cta-glow::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      padding: 2px;
      background: radial-gradient(180px circle at var(--cta-x, 50%) var(--cta-y, 50%),
          rgba(255, 255, 255, .72),
          rgba(250, 204, 21, .28) 35%,
          transparent 70%);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask-composite: exclude;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
      z-index: 0;
    }

    .cta-glow:hover {
      transform: translateY(-1px) !important;
      filter: brightness(1.04);
      border-color: rgba(250, 204, 21, .95) !important;
      box-shadow:
        0 0 0 1px rgba(250, 204, 21, .28),
        0 18px 42px rgba(250, 204, 21, .26),
        0 0 26px rgba(250, 204, 21, .18),
        inset 0 1px 0 rgba(255, 255, 255, .42) !important;
    }

    .cta-glow:hover::before {
      opacity: 1
    }

    .cta-glow:active {
      transform: translateY(0) scale(.99) !important
    }

    .cta-ripple {
      position: absolute;
      border-radius: 999px;
      background: rgba(255, 255, 255, .35);
      transform: scale(0);
      animation: ctaRipple .65s ease-out forwards;
      pointer-events: none;
      z-index: 1;
    }

    @keyframes ctaRipple {
      to {
        transform: scale(2.4);
        opacity: 0
      }
    }

    [data-theme="light"] .cta-glow {
      border-color: rgba(202, 138, 4, .75) !important;
      box-shadow:
        0 0 0 1px rgba(202, 138, 4, .18),
        0 14px 34px rgba(202, 138, 4, .16) !important;
    }

    [data-theme="light"] .cta-glow:hover {
      border-color: rgba(202, 138, 4, .95) !important;
    }

    #main {
      padding: 28px;
      max-width: 1600px;
      margin: 0 auto
    }

    #module-crm .panel {
      display: none;
      animation: fadeIn .3s ease
    }

    #module-crm .panel.active {
      display: block
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(6px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      transition: border-color var(--trans)
    }

    .card:hover {
      border-color: rgba(255, 255, 255, .12)
    }

    .card-p {
      padding: 22px
    }

    .card-title {
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .8px;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .card-title::before {
      content: '';
      width: 3px;
      height: 12px;
      background: var(--acc);
      border-radius: 2px;
      display: inline-block
    }

    .g4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 22px
    }

    .kpi {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px 22px;
      position: relative;
      overflow: hidden;
      transition: all var(--trans);
      cursor: default
    }

    .kpi:hover {
      border-color: rgba(255, 255, 255, .14);
      transform: translateY(-2px);
      box-shadow: var(--shadow)
    }

    .kpi-bg {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity var(--trans)
    }

    .kpi:hover .kpi-bg {
      opacity: 1
    }

    .kpi-glow {
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      top: -40px;
      right: -40px;
      filter: blur(40px);
      transition: opacity var(--trans)
    }

    .kpi-label {
      font-size: 11px;
      color: var(--muted);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .7px;
      margin-bottom: 10px
    }

    .kpi-val {
      font-size: 34px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -1px;
      transition: all .5s ease
    }

    .kpi-sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 7px;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .g2 {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 16px;
      margin-bottom: 22px
    }

    .g2r {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 16px;
      margin-bottom: 22px
    }

    /* Dashboard Funil Row — 3 colunas: Funil de Vendas | Funil Visual | Leads por Origem */
    .dashboard-funnel-row {
      display: grid;
      grid-template-columns: minmax(320px, 1.3fr) minmax(240px, .85fr) minmax(240px, .85fr);
      gap: 16px;
      margin-bottom: 22px;
      align-items: start
    }

    @media(max-width:1300px) {
      .dashboard-funnel-row {
        grid-template-columns: 1fr 1fr
      }

      .dashboard-funnel-row .leads-origin-card {
        grid-column: 1/-1
      }
    }

    @media(max-width:700px) {
      .dashboard-funnel-row {
        grid-template-columns: 1fr
      }

      .dashboard-funnel-row .leads-origin-card {
        grid-column: unset
      }
    }

    .g21 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 18px
    }

    .gp {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      align-items: start
    }

    .g3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 22px
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      border-width: 1px;
      border-style: solid;
      transition: all var(--trans)
    }

    .alert-banner {
      padding: 13px 18px;
      border-radius: var(--radius-sm);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      transition: all var(--trans);
      border: 1px solid
    }

    .alert-banner:hover {
      transform: translateX(4px)
    }

    .funnel-row {
      margin-bottom: 14px
    }

    .funnel-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px
    }

    .funnel-label {
      font-size: 12px;
      font-weight: 500;
      color: var(--text)
    }

    .funnel-num {
      font-size: 12px;
      font-weight: 700
    }

    .funnel-track {
      background: rgba(255, 255, 255, .05);
      border-radius: 6px;
      height: 9px;
      overflow: hidden
    }

    .funnel-bar {
      height: 100%;
      border-radius: 6px;
      width: 0;
      transition: width 1.2s cubic-bezier(.4, 0, .2, 1)
    }

    /* Funil Visual (novo card) */
    .funnel-visual-chart {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 4px 0
    }

    .funnel-visual-stage {
      border-radius: 8px;
      min-height: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px;
      gap: 8px;
      font-size: 11.5px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      transition: transform .15s ease, filter .15s ease, opacity .15s;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
    }

    .funnel-visual-stage:hover {
      transform: translateX(3px);
      filter: brightness(1.1)
    }

    .funnel-visual-stage:active {
      transform: scale(.98)
    }

    .fvs-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      font-size: 11px
    }

    .fvs-count {
      font-size: 13px;
      font-weight: 900;
      flex-shrink: 0
    }

    .fvs-pct {
      font-size: 10px;
      font-weight: 600;
      opacity: .78;
      flex-shrink: 0;
      min-width: 30px;
      text-align: right
    }

    .fvs-empty {
      text-align: center;
      color: var(--muted);
      font-size: 12.5px;
      padding: 24px 0;
      line-height: 1.5
    }

    .tbl {
      width: 100%;
      border-collapse: collapse
    }

    .tbl thead {
      position: sticky;
      top: 0;
      z-index: 1
    }

    .tbl th {
      text-align: left;
      padding: 12px 16px;
      font-size: 10.5px;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .7px;
      border-bottom: 1px solid var(--border);
      background: var(--card);
      user-select: none;
      white-space: nowrap
    }

    .tbl th.sortable {
      cursor: pointer;
      transition: color var(--trans)
    }

    .tbl th.sortable:hover {
      color: var(--text)
    }

    .tbl td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--borderL);
      transition: background var(--trans)
    }

    .tbl tr:hover td {
      background: rgba(255, 255, 255, .03)
    }

    .tbl-wrap {
      overflow: auto;
      border-radius: var(--radius);
      border: 1px solid var(--border)
    }

    .filters {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
      flex-wrap: wrap;
      align-items: center
    }

    .inp {
      padding: 8px 13px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: var(--radius-xs);
      color: var(--text);
      outline: none;
      transition: all var(--trans)
    }

    .inp:focus {
      border-color: rgba(245, 197, 24, .4);
      background: rgba(245, 197, 24, .04);
      box-shadow: 0 0 0 3px rgba(245, 197, 24, .08)
    }

    .sel {
      padding: 8px 13px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: var(--radius-xs);
      color: var(--text);
      cursor: pointer;
      outline: none;
      transition: all var(--trans)
    }

    .sel:focus {
      border-color: rgba(245, 197, 24, .4)
    }

    .btn-sm {
      padding: 7px 12px;
      border-radius: var(--radius-xs);
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .04);
      color: var(--muted);
      transition: all var(--trans);
      white-space: nowrap
    }

    .btn-sm:hover {
      background: rgba(255, 255, 255, .08);
      color: var(--text)
    }

    .btn-sec {
      padding: 8px 18px;
      border-radius: var(--radius-xs);
      cursor: pointer;
      background: rgba(255, 255, 255, .06);
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
      border: 1px solid var(--border);
      transition: all var(--trans)
    }

    .btn-sec:hover {
      background: rgba(255, 255, 255, .1);
      color: var(--text)
    }

    .btn-edit {
      padding: 5px 11px;
      border-radius: 6px;
      cursor: pointer;
      background: rgba(255, 255, 255, .05);
      color: var(--text);
      font-size: 11px;
      font-weight: 500;
      border: 1px solid var(--border);
      transition: all var(--trans)
    }

    .btn-edit:hover {
      background: rgba(245, 197, 24, .12);
      color: var(--acc);
      border-color: rgba(245, 197, 24, .3)
    }

    .btn-del {
      padding: 5px 11px;
      border-radius: 6px;
      cursor: pointer;
      background: rgba(255, 77, 109, .06);
      color: var(--red);
      font-size: 11px;
      font-weight: 500;
      border: 1px solid rgba(255, 77, 109, .2);
      transition: all var(--trans)
    }

    .btn-del:hover {
      background: rgba(255, 77, 109, .15);
      border-color: var(--red)
    }

    .pag {
      display: flex;
      gap: 5px;
      align-items: center;
      justify-content: center;
      padding-top: 16px
    }

    .pag-btn {
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      background: rgba(255, 255, 255, .04);
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
      border: 1px solid var(--border);
      transition: all var(--trans)
    }

    .pag-btn.active {
      background: var(--acc);
      color: #000;
      border-color: var(--acc);
      font-weight: 700
    }

    .pag-btn:hover:not(.active) {
      background: rgba(255, 255, 255, .08);
      color: var(--text)
    }

    .pag-info {
      font-size: 12px;
      color: var(--muted);
      padding: 0 6px
    }

    .pl-col-hd {
      padding: 10px 14px;
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px
    }

    .pl-cnt {
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .pl-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 13px;
      cursor: pointer;
      transition: all var(--trans)
    }

    .pl-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow)
    }

    .pl-empty {
      padding: 20px;
      text-align: center;
      color: var(--muted2);
      font-size: 12px;
      border: 1px dashed rgba(255, 255, 255, .07);
      border-radius: var(--radius-sm)
    }

    .fu-section {
      margin-bottom: 24px
    }

    .fu-sec-title {
      font-size: 11.5px;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 8px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid;
      letter-spacing: .05px
    }

    .fu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10px
    }

    .fu-card {
      background: rgba(20, 25, 35, .95);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 11px;
      padding: 14px 15px;
      cursor: pointer;
      transition: border-color .18s, box-shadow .2s, transform .18s
    }

    .fu-card:hover {
      border-color: rgba(245, 197, 24, .35);
      transform: translateY(-1px);
      box-shadow: 0 6px 24px rgba(0, 0, 0, .32)
    }

    /* ══════════════════════════════════════════
   UI REFINEMENTS — Professional SaaS Layer
══════════════════════════════════════════ */

    /* — Tabs — mais refinadas, emojis menores */
    .tab {
      padding: 0 15px;
      font-size: 12px;
      font-weight: 500;
      gap: 5px;
      letter-spacing: .05px
    }

    .tab.active {
      font-weight: 700
    }

    .tab-icon {
      font-size: 12px;
      opacity: .45;
      transition: opacity var(--trans)
    }

    .tab.active .tab-icon,
    .tab:hover .tab-icon {
      opacity: .75
    }

    /* — Header utility buttons — discretos, semânticos */
    .h-btn {
      font-size: 11.5px;
      font-weight: 500;
      border-radius: 8px;
      padding: 6px 13px;
      border-color: rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .03);
      color: var(--muted);
      letter-spacing: .05px
    }

    .h-btn:hover {
      background: rgba(255, 255, 255, .07);
      border-color: rgba(255, 255, 255, .13);
      color: var(--text)
    }

    #hright {
      gap: 6px
    }

    /* — Primary CTA — bem definido */
    .btn-pri {
      padding: 8px 18px;
      border-radius: 8px;
      font-size: 12.5px;
      letter-spacing: .05px;
      font-weight: 700
    }

    /* — Pipeline kanban column — */
    #kanban {
      display: flex !important;
      flex-direction: row;
      gap: 12px;
      overflow-x: auto;
      overflow-y: auto;
      align-items: start;
      padding-bottom: 16px;
      -webkit-overflow-scrolling: touch;
      max-height: calc(100dvh - 200px);
      scrollbar-width: thin;
      scrollbar-color: rgba(100, 116, 139, .35) transparent
    }

    #kanban::-webkit-scrollbar {
      height: 6px;
      width: 6px
    }

    #kanban::-webkit-scrollbar-track {
      background: transparent
    }

    #kanban::-webkit-scrollbar-thumb {
      background: rgba(100, 116, 139, .35);
      border-radius: 99px
    }

    #kanban::-webkit-scrollbar-thumb:hover {
      background: rgba(100, 116, 139, .6)
    }

    #kanban>div {
      min-width: 300px;
      flex: 0 0 300px
    }

    .pl-col-hd {
      padding: 12px 14px;
      margin-bottom: 0;
      border-radius: 10px 10px 0 0
    }

    /* — Pipeline lead cards — hierarquia limpa */
    .pl-card {
      background: rgba(20, 25, 35, .95);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 11px;
      padding: 13px 14px;
      transition: border-color .18s, box-shadow .2s, transform .18s
    }

    .pl-card:hover {
      border-color: rgba(255, 255, 255, .13);
      box-shadow: 0 6px 28px rgba(0, 0, 0, .38);
      transform: translateY(-1px)
    }

    .pl-card[draggable="true"] {
      cursor: grab
    }

    .pl-card[draggable="true"]:active {
      cursor: grabbing
    }

    .pl-card.pl-dragging {
      opacity: .3;
      transform: scale(.96) !important;
      box-shadow: none !important;
      border-color: rgba(255, 255, 255, .15) !important
    }

    .pl-cnt.drag-over {
      background: rgba(245, 197, 24, .07);
      border-radius: 8px;
      outline: 2px dashed rgba(245, 197, 24, .35);
      outline-offset: -4px
    }

    /* ══════════════════════════════════════════
   CENTRAL DE AJUDA — módulo #module-ajuda
   Premium redesign — animado e fluido
══════════════════════════════════════════ */

    /* ── Keyframes ── */
    @keyframes ajudaFloat {

      0%,
      100% {
        transform: translateY(0) rotate(0deg)
      }

      33% {
        transform: translateY(-12px) rotate(1.5deg)
      }

      66% {
        transform: translateY(-6px) rotate(-1deg)
      }
    }

    @keyframes ajudaOrb {

      0%,
      100% {
        transform: translate(0, 0) scale(1)
      }

      25% {
        transform: translate(30px, -20px) scale(1.08)
      }

      50% {
        transform: translate(-10px, 30px) scale(.94)
      }

      75% {
        transform: translate(-28px, -10px) scale(1.04)
      }
    }

    @keyframes ajudaReveal {
      from {
        opacity: 0;
        transform: translateY(28px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes ajudaBadgePop {
      from {
        opacity: 0;
        transform: scale(.85) translateY(-6px)
      }

      to {
        opacity: 1;
        transform: scale(1) translateY(0)
      }
    }

    @keyframes ajudaLineGrow {
      from {
        width: 0
      }

      to {
        width: 100%
      }
    }

    @keyframes kbdPress {

      0%,
      100% {
        transform: translateY(0);
        box-shadow: 0 3px 0 rgba(0, 0, 0, .4)
      }

      50% {
        transform: translateY(2px);
        box-shadow: 0 1px 0 rgba(0, 0, 0, .4)
      }
    }

    @keyframes glowPulse {

      0%,
      100% {
        opacity: .5
      }

      50% {
        opacity: 1
      }
    }

    /* ── Módulo base ── */
    #module-ajuda {
      display: none;
      min-height: 100vh;
      background: var(--bg);
      padding: 0;
      transition: margin var(--trans)
    }

    /* ══════════════════════════════════════════════════════
   CENTRAL DE AJUDA — .help-* (escopado, sem CSS global)
══════════════════════════════════════════════════════ */

.help-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

#module-ajuda::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .016;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}

/* ══ HERO ══ */
.help-hero {
  text-align: center;
  padding: 56px 20px 40px;
  position: relative;
  overflow: hidden;
}
.help-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.help-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .28;
}
.help-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(77,159,255,.45), transparent 70%);
  top: -200px; left: -100px;
}
.help-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(245,197,24,.35), transparent 70%);
  top: -120px; right: -80px;
}
.help-orb-3 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(168,85,247,.3), transparent 70%);
  bottom: -80px; left: 50%;
  transform: translateX(-50%);
}
.help-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(77,159,255,.1);
  border: 1px solid rgba(77,159,255,.25);
  color: #4d9fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
}
.help-hero-title {
  font-size: clamp(26px, 5vw, 42px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin: 0 0 12px;
  position: relative;
}
.help-hero-title span {
  background: linear-gradient(90deg, #f5c518, #fb923c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.help-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.55);
  max-width: 460px;
  margin: 0 auto 28px;
  line-height: 1.6;
  position: relative;
}

/* ── Search ── */
.help-search-wrap {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
}
.help-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.help-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 48px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.1);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.help-search-input::placeholder { color: rgba(255,255,255,.3); }
.help-search-input:focus {
  border-color: rgba(77,159,255,.55);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(77,159,255,.12), 0 8px 32px rgba(0,0,0,.3);
}
.help-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: background .15s;
}
.help-search-clear:hover { background: rgba(255,255,255,.2); }
.help-results-count {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255,255,255,.4);
  font-weight: 500;
}
.help-results-count #helpResultsNum { color: #4d9fff; font-weight: 700; }

/* ══ FILTERS ══ */
.help-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
.help-cat {
  padding: 7px 16px;
  border-radius: 99px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.help-cat:hover { background: rgba(255,255,255,.09); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.18); }
.help-cat.active { background: rgba(77,159,255,.15); border-color: rgba(77,159,255,.4); color: #4d9fff; }

/* ══ GRID ══ */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .help-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.help-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 20px;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.help-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,30%), rgba(255,255,255,.04) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.help-card:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.065); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.help-card:hover::before { opacity: 1; }

.help-card-top { display: flex; align-items: flex-start; gap: 14px; }
.help-card-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hic) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hic) 25%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--hic, #4d9fff);
}
.help-card-icon svg { width: 20px; height: 20px; }
.help-card-meta { flex: 1; min-width: 0; }
.help-card-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase;
  background: color-mix(in srgb, var(--hbc) 12%, transparent);
  color: var(--hbc, #4d9fff);
  border: 1px solid color-mix(in srgb, var(--hbc) 22%, transparent);
  margin-bottom: 4px;
}
.help-card-title { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.3; }
.help-card-desc { font-size: 12.5px; color: rgba(255,255,255,.5); line-height: 1.6; margin: 0; flex: 1; }
.help-card-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }

.help-btn-expand {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.help-btn-expand svg { width: 13px; height: 13px; transition: transform .2s ease; flex-shrink: 0; }
.help-btn-expand:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }
.help-card.expanded .help-btn-expand svg { transform: rotate(90deg); }
.help-card.expanded .help-btn-expand { background: rgba(77,159,255,.12); border-color: rgba(77,159,255,.3); color: #4d9fff; }

.help-btn-nav {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.45); font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s; white-space: nowrap; margin-left: auto;
}
.help-btn-nav:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.22); }

.help-card-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.4,0,.2,1);
}

.help-tips { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.help-tips li { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.55; padding-left: 16px; position: relative; }
.help-tips li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: rgba(77,159,255,.7); }
.help-tips li strong { color: rgba(255,255,255,.8); font-weight: 600; }

.help-callout {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(77,159,255,.07); border: 1px solid rgba(77,159,255,.18);
  font-size: 11.5px; color: rgba(255,255,255,.5); line-height: 1.5;
}
.help-callout svg { width: 14px; height: 14px; color: #4d9fff; flex-shrink: 0; margin-top: 1px; }

/* ══ EMPTY STATE ══ */
.help-empty { text-align: center; padding: 64px 24px; }
.help-empty-icon {
  width: 72px; height: 72px; border-radius: 20px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; color: rgba(255,255,255,.25);
}
.help-empty-icon svg { width: 32px; height: 32px; }
.help-empty-title { font-size: 20px; font-weight: 800; color: rgba(255,255,255,.7); margin-bottom: 8px; }
.help-empty-text { font-size: 13px; color: rgba(255,255,255,.35); max-width: 360px; margin: 0 auto 24px; line-height: 1.65; }
.help-empty-btn {
  padding: 10px 24px; border-radius: 10px;
  background: rgba(77,159,255,.12); border: 1px solid rgba(77,159,255,.3);
  color: #4d9fff; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .18s;
}
.help-empty-btn:hover { background: rgba(77,159,255,.2); border-color: rgba(77,159,255,.5); }

/* ══ SECTIONS ══ */
.help-sec { margin-top: 40px; }
.help-sec-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800; color: rgba(255,255,255,.85);
  letter-spacing: -.3px; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.help-sec-title svg { width: 18px; height: 18px; color: rgba(255,255,255,.4); flex-shrink: 0; }

.help-reveal { opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s ease; }
.help-reveal.visible { opacity: 1; transform: none; }

/* ══ FAQ ══ */
.help-faq { display: flex; flex-direction: column; gap: 6px; }
.help-faq-item { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; transition: border-color .18s; }
.help-faq-item.open { border-color: rgba(255,255,255,.14); }
.help-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: rgba(255,255,255,.03); border: none;
  color: rgba(255,255,255,.78); font-size: 13.5px; font-weight: 600; font-family: inherit;
  text-align: left; cursor: pointer; transition: background .15s, color .15s;
}
.help-faq-q:hover { background: rgba(255,255,255,.06); color: #fff; }
.help-faq-chev { width: 18px; height: 18px; flex-shrink: 0; color: rgba(255,255,255,.3); transition: transform .25s ease; }
.help-faq-item.open .help-faq-chev { transform: rotate(180deg); color: #4d9fff; }
.help-faq-body { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.4,0,.2,1); }
.help-faq-item.open .help-faq-body { max-height: 300px; }
.help-faq-inner { padding: 12px 18px 16px; font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.7; border-top: 1px solid rgba(255,255,255,.06); }
.help-faq-inner strong { color: rgba(255,255,255,.8); }

/* ══ KEYBOARD SHORTCUTS ══ */
.help-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.help-key { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); transition: background .15s; }
.help-key:hover { background: rgba(255,255,255,.06); }
.help-key kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 28px; padding: 0 8px; border-radius: 7px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-bottom: 2px solid rgba(255,255,255,.2);
  font-size: 11px; font-weight: 700; font-family: monospace; color: rgba(255,255,255,.75); flex-shrink: 0;
}
.help-key span { font-size: 12px; color: rgba(255,255,255,.45); }

/* ══ GLOSSARY ══ */
.help-gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.help-gloss-item { padding: 12px 16px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); transition: background .15s; }
.help-gloss-item:hover { background: rgba(255,255,255,.06); }
.help-gloss-term { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.8); margin-bottom: 4px; }
.help-gloss-def { font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.55; }

/* ══ FOOTER ══ */
.help-footer {
  text-align: center; padding: 40px 0 16px;
  border-top: 1px solid rgba(255,255,255,.06); margin-top: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.help-onboard-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 24px; border-radius: 12px;
  background: rgba(77,159,255,.1); border: 1px solid rgba(77,159,255,.28);
  color: #4d9fff; font-size: 13.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .2s;
}
.help-onboard-btn svg { width: 16px; height: 16px; }
.help-onboard-btn:hover { background: rgba(77,159,255,.18); border-color: rgba(77,159,255,.45); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(77,159,255,.2); }
.help-footer-text { font-size: 12px; color: rgba(255,255,255,.22); margin: 0; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .help-hero { padding: 36px 14px 32px; }
  .help-wrap { padding: 0 14px 80px; }
  .help-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .help-cats::-webkit-scrollbar { display: none; }
  .help-keys { grid-template-columns: 1fr; }
  .help-gloss { grid-template-columns: 1fr; }
  .help-card-footer { flex-wrap: wrap; }
  .help-btn-nav { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════
   CENTRAL DE AJUDA — TEMA CLARO (completo)
   Cobre hero, busca, filtros, cards, FAQ, glossário, rodapé.
   Não altera layout nem tema escuro.
══════════════════════════════════════════════════════════ */

/* ── Hero ── */
[data-theme="light"] #module-ajuda { background: #f8fafc; }
[data-theme="light"] .help-orb { opacity: .09; }
[data-theme="light"] .help-hero-badge {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.22);
  color: #2563eb;
}
[data-theme="light"] .help-hero-title { color: #0f172a; }
[data-theme="light"] .help-hero-sub   { color: #475569; }

/* ── Busca ── */
[data-theme="light"] .help-search-icon { color: #94a3b8; }
[data-theme="light"] .help-search-input {
  background: #ffffff;
  border-color: rgba(15,23,42,.14);
  color: #0f172a;
  box-shadow: 0 4px 16px rgba(15,23,42,.06);
}
[data-theme="light"] .help-search-input::placeholder { color: #94a3b8; }
[data-theme="light"] .help-search-input:focus {
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10), 0 4px 16px rgba(15,23,42,.06);
  background: #ffffff;
}
[data-theme="light"] .help-search-clear { background: rgba(15,23,42,.08); color: #475569; }
[data-theme="light"] .help-search-clear:hover { background: rgba(15,23,42,.14); }
[data-theme="light"] .help-results-count { color: #64748b; }
[data-theme="light"] .help-results-count #helpResultsNum { color: #2563eb; }

/* ── Filtros / categorias ── */
[data-theme="light"] .help-cat {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  color: #475569;
}
[data-theme="light"] .help-cat:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: rgba(15,23,42,.18);
}
[data-theme="light"] .help-cat.active {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.28);
  color: #2563eb;
}

/* ── Cards ── */
[data-theme="light"] .help-card {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
}
[data-theme="light"] .help-card::before {
  background: radial-gradient(circle at var(--mx,50%) var(--my,30%),
    rgba(15,23,42,.025) 0%, transparent 65%);
}
[data-theme="light"] .help-card:hover {
  border-color: rgba(15,23,42,.18);
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(15,23,42,.10);
  transform: translateY(-2px);
}
[data-theme="light"] .help-card-title { color: #0f172a; }
[data-theme="light"] .help-card-desc  { color: #475569; }

/* ── Botões dentro do card ── */
[data-theme="light"] .help-btn-expand {
  background: #f1f5f9;
  border-color: rgba(15,23,42,.10);
  color: #475569;
}
[data-theme="light"] .help-btn-expand:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: rgba(15,23,42,.18);
}
[data-theme="light"] .help-card.expanded .help-btn-expand {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.28);
  color: #2563eb;
}
[data-theme="light"] .help-btn-nav {
  background: transparent;
  border-color: rgba(37,99,235,.20);
  color: #2563eb;
}
[data-theme="light"] .help-btn-nav:hover {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.36);
  color: #1d4ed8;
}

/* ── Tips (expandido) ── */
[data-theme="light"] .help-tips li { color: #475569; }
[data-theme="light"] .help-tips li::before { background: rgba(37,99,235,.55); }
[data-theme="light"] .help-tips li strong { color: #0f172a; }
[data-theme="light"] .help-callout {
  background: rgba(37,99,235,.07);
  border-color: rgba(37,99,235,.16);
  color: #475569;
}

/* ── Títulos de seção ── */
[data-theme="light"] .help-sec-title {
  color: #0f172a;
  border-bottom-color: rgba(15,23,42,.09);
}
[data-theme="light"] .help-sec-title svg { color: #94a3b8; }

/* ── FAQ ── */
[data-theme="light"] .help-faq-item { border-color: rgba(15,23,42,.09); }
[data-theme="light"] .help-faq-item.open { border-color: rgba(15,23,42,.18); }
[data-theme="light"] .help-faq-q {
  background: #f8fafc;
  color: #0f172a;
  border: none;
}
[data-theme="light"] .help-faq-q:hover { background: #f1f5f9; color: #0f172a; }
[data-theme="light"] .help-faq-chev { color: #94a3b8; }
[data-theme="light"] .help-faq-item.open .help-faq-chev { color: #2563eb; }
[data-theme="light"] .help-faq-inner {
  border-top-color: rgba(15,23,42,.08);
  color: #334155;
}
[data-theme="light"] .help-faq-inner strong { color: #0f172a; }

/* ── Atalhos de teclado ── */
[data-theme="light"] .help-key { background: #f8fafc; border-color: rgba(15,23,42,.08); }
[data-theme="light"] .help-key:hover { background: #f1f5f9; }
[data-theme="light"] .help-key kbd {
  background: #ffffff;
  border-color: rgba(15,23,42,.18);
  border-bottom-color: rgba(15,23,42,.28);
  color: #334155;
}
[data-theme="light"] .help-key span { color: #475569; }

/* ── Glossário ── */
[data-theme="light"] .help-gloss-item { background: #f8fafc; border-color: rgba(15,23,42,.08); }
[data-theme="light"] .help-gloss-item:hover { background: #f1f5f9; }
[data-theme="light"] .help-gloss-term { color: #0f172a; }
[data-theme="light"] .help-gloss-def  { color: #475569; }

/* ── Estado vazio ── */
[data-theme="light"] .help-empty-icon { background: #f1f5f9; border-color: rgba(15,23,42,.10); color: #94a3b8; }
[data-theme="light"] .help-empty-title { color: #334155; }
[data-theme="light"] .help-empty-text  { color: #64748b; }
[data-theme="light"] .help-empty-btn {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.28);
  color: #2563eb;
}
[data-theme="light"] .help-empty-btn:hover {
  background: rgba(37,99,235,.16);
  border-color: rgba(37,99,235,.40);
}

/* ── Rodapé ── */
[data-theme="light"] .help-footer { border-top-color: rgba(15,23,42,.09); }
[data-theme="light"] .help-onboard-btn {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.26);
  color: #2563eb;
}
[data-theme="light"] .help-onboard-btn:hover {
  background: rgba(37,99,235,.16);
  border-color: rgba(37,99,235,.40);
  box-shadow: 0 6px 20px rgba(37,99,235,.14);
}
[data-theme="light"] .help-footer-text { color: #94a3b8; }

/* ══════════════════════════════════════════════════════
   RELATÓRIOS COMERCIAIS — .reports-* (escopado)
══════════════════════════════════════════════════════ */

.reports-wrap { max-width: 1100px; margin: 0 auto; padding: 0 0 80px; }

/* ══ HERO ══ */
.reports-hero {
  position: relative; overflow: hidden;
  padding: 48px 24px 36px; text-align: center;
  border-radius: 20px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(77,159,255,.06) 0%, rgba(168,85,247,.04) 100%);
  border: 1px solid rgba(255,255,255,.07);
}
.reports-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.reports-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .22; }
.reports-orb-1 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(77,159,255,.5), transparent 70%); top:-220px; left:-100px; }
.reports-orb-2 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(245,197,24,.4), transparent 70%); top:-140px; right:-80px; }
.reports-orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(168,85,247,.35), transparent 70%); bottom:-100px; left:50%; transform:translateX(-50%); }
.reports-hero-content { position: relative; z-index: 1; }
.reports-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: 99px;
  background: rgba(77,159,255,.1); border: 1px solid rgba(77,159,255,.25);
  color: #4d9fff; font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; margin-bottom: 18px;
}
.reports-hero-title {
  font-size: clamp(24px, 4.5vw, 40px); font-weight: 900;
  color: #fff; letter-spacing: -1.5px; line-height: 1.1; margin: 0 0 10px;
}
.reports-hero-title span { background: linear-gradient(90deg, #f5c518, #fb923c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.reports-hero-sub { font-size: 14px; color: rgba(255,255,255,.55); max-width: 540px; margin: 0 auto 10px; line-height: 1.6; }
.reports-hero-note { font-size: 12.5px; color: rgba(255,255,255,.3); font-style: italic; max-width: 520px; margin: 0 auto; }

/* ══ GUIA ══ */
.reports-guide-bar { margin-bottom: 0; }
.reports-guide-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 18px; border-radius: 12px 12px 0 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.7); font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: background .15s, color .15s;
}
.reports-guide-toggle:hover { background: rgba(255,255,255,.07); color: #fff; }
.reports-guide-chev { margin-left: auto; transition: transform .25s ease; color: rgba(255,255,255,.35); flex-shrink: 0; }
.reports-guide-toggle.open .reports-guide-chev { transform: rotate(180deg); }
.reports-guide-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.09); border-top: none;
  border-radius: 0 0 12px 12px; margin-bottom: 20px;
}
.reports-guide-panel.open { max-height: 600px; }
.reports-guide-intro { padding: 20px 22px 0; font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.7; }
.reports-guide-impact { color: rgba(245,197,24,.75); font-style: italic; margin-top: 8px; }
.reports-guide-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 16px 22px 22px;
}
@media(max-width:720px){ .reports-guide-cards { grid-template-columns: 1fr 1fr; } }
@media(max-width:480px){ .reports-guide-cards { grid-template-columns: 1fr; } }
.reports-guide-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.reports-guide-card strong { font-size: 12.5px; color: rgba(255,255,255,.85); display: block; margin-bottom: 4px; }
.reports-guide-card p { font-size: 11.5px; color: rgba(255,255,255,.42); line-height: 1.55; margin: 0; }
.reports-guide-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(77,159,255,.15); border: 1px solid rgba(77,159,255,.3);
  color: #4d9fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ══ FILTROS ══ */
.reports-filters {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.reports-filters-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.reports-filter-group { display: flex; flex-direction: column; gap: 5px; }
.reports-filter-label { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .5px; }
.reports-filter-sel {
  height: 36px; padding: 0 10px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85); font-size: 12.5px; font-family: inherit;
  outline: none; cursor: pointer; transition: border-color .15s, background .15s;
  min-width: 130px;
}
.reports-filter-sel:focus { border-color: rgba(77,159,255,.5); background: rgba(255,255,255,.09); }
.reports-filter-sel option { background: #1a1d2e; color: #fff; }
.reports-filter-custom { display: flex; align-items: center; gap: 4px; }
.reports-filter-date {
  height: 36px; padding: 0 10px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85); font-size: 12px; font-family: inherit; outline: none;
}
.reports-filter-date:focus { border-color: rgba(77,159,255,.5); }
.reports-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ══ BOTÕES ══ */
.reports-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: 9px;
  font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .18s; white-space: nowrap; border: 1px solid transparent;
}
.reports-btn-primary { background: rgba(77,159,255,.15); border-color: rgba(77,159,255,.35); color: #4d9fff; }
.reports-btn-primary:hover { background: rgba(77,159,255,.25); border-color: rgba(77,159,255,.55); transform: translateY(-1px); }
.reports-btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.reports-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
.reports-btn-print { background: rgba(245,197,24,.1); border-color: rgba(245,197,24,.3); color: #f5c518; }
.reports-btn-print:hover { background: rgba(245,197,24,.18); border-color: rgba(245,197,24,.5); transform: translateY(-1px); }
.reports-btn-sm { height: 30px; padding: 0 12px; font-size: 11.5px; }
.reports-btn-green { background: rgba(16,217,138,.1); border-color: rgba(16,217,138,.3); color: #10d98a; }
.reports-btn-green:hover { background: rgba(16,217,138,.18); }
.reports-btn-red { background: rgba(255,77,109,.1); border-color: rgba(255,77,109,.3); color: #ff4d6d; }

/* ══ ABAS ══ */
.reports-tabs-nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 16px; overflow-x: auto;
}
.reports-tabs-nav::-webkit-scrollbar { display: none; }
.reports-tab-btn {
  padding: 8px 14px; border-radius: 9px; border: none;
  background: transparent; color: rgba(255,255,255,.45);
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.reports-tab-btn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }
.reports-tab-btn.active { background: rgba(77,159,255,.15); color: #4d9fff; border: 1px solid rgba(77,159,255,.3); }

/* ══ PAINÉIS ══ */
.reports-panel { display: none; }
.reports-panel.active { display: block; }

/* ══ KPI CARDS ══ */
.reports-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
@media(max-width:1000px){ .reports-kpi-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:600px){ .reports-kpi-grid { grid-template-columns: repeat(2,1fr); } }
.reports-kpi {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 16px 14px; position: relative; overflow: hidden;
  transition: border-color .2s, background .2s, transform .2s;
}
.reports-kpi:hover { border-color: rgba(255,255,255,.16); transform: translateY(-2px); }
.reports-kpi-icon {
  width: 36px; height: 36px; border-radius: 10px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.reports-kpi-label { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.reports-kpi-val { font-size: 26px; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.reports-kpi-sub { font-size: 11px; color: rgba(255,255,255,.35); }
.reports-kpi-bar { height: 3px; border-radius: 99px; background: rgba(255,255,255,.06); margin-top: 10px; overflow: hidden; }
.reports-kpi-bar-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }

/* ══ INSIGHT BOX ══ */
.reports-insight {
  border-radius: 12px; padding: 14px 16px; margin-bottom: 20px;
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(77,159,255,.07); border: 1px solid rgba(77,159,255,.2);
}
.reports-insight-icon { flex-shrink: 0; font-size: 18px; margin-top: 1px; }
.reports-insight-body { flex: 1; }
.reports-insight-title { font-size: 12px; font-weight: 800; color: #4d9fff; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.reports-insight ul { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 4px; }
.reports-insight li { font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.5; }
.reports-insight-warn { background: rgba(245,197,24,.07); border-color: rgba(245,197,24,.2); }
.reports-insight-warn .reports-insight-title { color: #f5c518; }
.reports-insight-success { background: rgba(16,217,138,.07); border-color: rgba(16,217,138,.2); }
.reports-insight-success .reports-insight-title { color: #10d98a; }

/* ══ SEÇÃO ══ */
.reports-sec { margin-bottom: 24px; }
.reports-sec-title {
  font-size: 13px; font-weight: 800; color: rgba(255,255,255,.8);
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 14px;
  letter-spacing: -.2px;
}
.reports-sec-title svg { color: rgba(255,255,255,.35); flex-shrink: 0; }

/* ══ TABELA ══ */
.reports-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); }
.reports-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.reports-table th {
  padding: 10px 12px; text-align: left;
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.45);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap;
}
.reports-table td { padding: 10px 12px; color: rgba(255,255,255,.75); border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.reports-table tr:last-child td { border-bottom: none; }
.reports-table tr:hover td { background: rgba(255,255,255,.03); }
.reports-table .reports-badge {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
}
.reports-table .num-col { font-weight: 800; color: #fff; }
.reports-table .muted { color: rgba(255,255,255,.35); }

/* ══ FUNIL ══ */
.reports-funnel { display: flex; flex-direction: column; gap: 6px; }
.reports-funnel-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  transition: background .15s;
}
.reports-funnel-row:hover { background: rgba(255,255,255,.06); }
.reports-funnel-label { min-width: 150px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.8); }
.reports-funnel-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.reports-funnel-bar-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }
.reports-funnel-count { min-width: 40px; text-align: right; font-weight: 800; color: #fff; font-size: 13px; }
.reports-funnel-pct { min-width: 44px; text-align: right; font-size: 11px; color: rgba(255,255,255,.4); }
.reports-funnel-arrow { color: rgba(255,255,255,.2); font-size: 11px; }

/* ══ PROGRESS BAR ══ */
.reports-progress { margin-bottom: 16px; }
.reports-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.reports-progress-track { height: 10px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.reports-progress-fill { height: 100%; border-radius: 99px; transition: width .6s ease; background: linear-gradient(90deg, #4d9fff, #7c3aed); }

/* ══ ESTADO VAZIO ══ */
.reports-empty {
  text-align: center; padding: 56px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.reports-empty-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.reports-empty-title { font-size: 18px; font-weight: 800; color: rgba(255,255,255,.6); }
.reports-empty-text { font-size: 13px; color: rgba(255,255,255,.3); max-width: 340px; line-height: 1.65; }

/* ══ MODAL EXPORT ══ */
.reports-export-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.reports-export-modal.open { opacity: 1; pointer-events: all; }
.reports-export-box {
  background: #1a1d2e; border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 28px; width: 90%; max-width: 600px; max-height: 90vh;
  display: flex; flex-direction: column; gap: 16px;
}
.reports-export-box h3 { margin: 0; font-size: 18px; font-weight: 800; color: #fff; }
.reports-export-textarea {
  width: 100%; min-height: 280px; padding: 14px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8); font-size: 12px; font-family: 'Courier New', monospace;
  line-height: 1.6; resize: vertical; outline: none; box-sizing: border-box;
}
.reports-export-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ══ LIGHT THEME ══ */
[data-theme="light"] .reports-hero { background: linear-gradient(135deg, rgba(77,159,255,.04), rgba(168,85,247,.02)); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .reports-guide-toggle { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); color: rgba(0,0,0,.65); }
[data-theme="light"] .reports-filters { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .reports-filter-sel { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.8); }
[data-theme="light"] .reports-filter-sel option { background: #fff; color: #111; }
[data-theme="light"] .reports-kpi { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .reports-table th { background: rgba(0,0,0,.04); color: rgba(0,0,0,.45); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .reports-table td { color: rgba(0,0,0,.7); border-color: rgba(0,0,0,.06); }

/* ══════════════════════════════════════════════════════
   AGENTE PIPELINE — FAB override + panel + chips + lock
══════════════════════════════════════════════════════ */

/* FAB pill para Pipeline IA */
.crm-fab.pipeline-ai-active {
  background: linear-gradient(135deg, rgba(77,159,255,.22), rgba(168,85,247,.2));
  border-color: rgba(77,159,255,.42);
  box-shadow: 0 0 36px rgba(77,159,255,.24), 0 8px 28px rgba(0,0,0,.65);
  color: #4d9fff;
  width: auto; min-width: 56px;
  border-radius: 28px;
  padding: 0 18px 0 12px;
  gap: 10px;
  height: 56px;
}
.crm-fab.pipeline-ai-active:hover {
  transform: scale(1.04);
  box-shadow: 0 0 56px rgba(77,159,255,.36), 0 12px 40px rgba(0,0,0,.8);
}
.crm-fab.pipeline-ai-active .crm-fab-ring {
  border-color: rgba(77,159,255,.3);
}
.pipeline-ai-float-labels {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2;
}
.pipeline-ai-float-name {
  font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -.2px;
}
.pipeline-ai-float-sub {
  font-size: 9.5px; color: rgba(255,255,255,.45); letter-spacing: .1px;
}

/* Panel overrides for pipeline theme */
#crm-fab-panel.pipeline-ai-panel {
  border-color: rgba(77,159,255,.2);
  box-shadow: 0 24px 80px rgba(0,0,0,.9), 0 0 64px rgba(77,159,255,.09);
}
#crm-fab-panel.pipeline-ai-panel .crm-fab-head {
  background: linear-gradient(135deg, rgba(77,159,255,.05), rgba(168,85,247,.04));
  border-bottom-color: rgba(77,159,255,.12);
}
#crm-fab-panel.pipeline-ai-panel .crm-fab-head-ico {
  background: rgba(77,159,255,.14); color: #4d9fff;
}

/* ── Quick action chips ── */
.pipeline-ai-chips {
  display: flex; gap: 6px; padding: 10px 14px;
  overflow-x: auto; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  scrollbar-width: none;
}
.pipeline-ai-chips::-webkit-scrollbar { display: none; }
.pipeline-ai-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 99px;
  background: rgba(77,159,255,.07); border: 1px solid rgba(77,159,255,.16);
  color: rgba(255,255,255,.6); font-size: 10.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: all .15s; flex-shrink: 0;
}
.pipeline-ai-chip:hover {
  background: rgba(77,159,255,.15); border-color: rgba(77,159,255,.38);
  color: #fff;
}
.pipeline-ai-chip.flash {
  background: rgba(77,159,255,.22); border-color: rgba(77,159,255,.5); color: #4d9fff;
}

/* ── Reset button (in header) ── */
.pipeline-ai-reset {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 7px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.35); font-size: 10px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .15s;
}
.pipeline-ai-reset:hover {
  background: rgba(255,80,80,.1); border-color: rgba(255,80,80,.22);
  color: rgba(255,140,140,.75);
}

/* ── Plan lock overlay ── */
.pipeline-ai-locked {
  position: absolute; inset: 0;
  background: rgba(8,9,14,.94); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 28px 22px;
  z-index: 10; gap: 10px; border-radius: inherit;
}
.pipeline-ai-locked-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.22);
  display: flex; align-items: center; justify-content: center;
  color: #f5c518; margin-bottom: 2px;
}
.pipeline-ai-locked-title { font-size: 15px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.3px; }
.pipeline-ai-locked-text { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.65; max-width: 290px; margin: 0; }
.pipeline-ai-locked-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; border-radius: 10px;
  background: rgba(245,197,24,.12); border: 1px solid rgba(245,197,24,.3);
  color: #f5c518; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .18s; margin-top: 6px;
}
.pipeline-ai-locked-btn:hover { background: rgba(245,197,24,.22); border-color: rgba(245,197,24,.5); }

/* ── No key warning (inline in empty state) ── */
.pipeline-ai-no-key {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 22px 20px; gap: 8px;
}
.pipeline-ai-no-key-title { font-size: 12.5px; font-weight: 700; color: #fbbf24; }
.pipeline-ai-no-key-text { font-size: 11.5px; color: rgba(255,255,255,.45); line-height: 1.6; max-width: 280px; }
.pipeline-ai-no-key-btn {
  padding: 6px 16px; border-radius: 8px;
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25);
  color: #fbbf24; font-size: 11.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all .15s;
}
.pipeline-ai-no-key-btn:hover { background: rgba(251,191,36,.2); }

/* ══════════════════════════════════════════════════════
   DASHBOARD WHATSAPP FLOAT
══════════════════════════════════════════════════════ */
.dashboard-wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 3500;
  display: none; /* controlled by JS */
  align-items: center; gap: 10px;
  padding: 0 18px 0 12px; height: 54px; border-radius: 27px;
  background: linear-gradient(135deg, rgba(37,211,102,.2), rgba(18,140,126,.16));
  border: 1px solid rgba(37,211,102,.38);
  box-shadow: 0 0 28px rgba(37,211,102,.2), 0 8px 28px rgba(0,0,0,.6);
  cursor: pointer; font-family: inherit;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  color: #25d366; backdrop-filter: blur(16px);
}
.dashboard-wa-float:hover {
  transform: scale(1.05);
  box-shadow: 0 0 48px rgba(37,211,102,.3), 0 12px 40px rgba(0,0,0,.8);
}
.dashboard-wa-float-labels {
  display: flex; flex-direction: column; line-height: 1.2;
}
.dashboard-wa-float-name { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -.2px; }
.dashboard-wa-float-sub { font-size: 9.5px; color: rgba(255,255,255,.45); letter-spacing: .1px; }
.dashboard-wa-float-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(37,211,102,.25);
  animation: waFloatRing 2.8s ease-out infinite;
  pointer-events: none; width: 68px; height: 68px;
}
.dashboard-wa-float-ring:nth-child(2) { width: 82px; height: 82px; animation-delay: .9s; }
@keyframes waFloatRing { 0% { opacity:.5; transform:scale(.88); } 100% { opacity:0; transform:scale(1.35); } }

/* Light theme adjustments */
[data-theme="light"] .pipeline-ai-locked { background: rgba(240,242,255,.97); }
[data-theme="light"] .pipeline-ai-locked-title { color: #1a1d2e; }
[data-theme="light"] .pipeline-ai-locked-text { color: rgba(0,0,0,.55); }
[data-theme="light"] .pipeline-ai-chip { color: rgba(0,0,0,.55); }

/* ── Lead Score badge ── */
    .pl-score {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 18px;
      border-radius: 9px;
      font-size: 10px;
      font-weight: 800;
      padding: 0 5px;
      flex-shrink: 0;
      letter-spacing: -.2px
    }

    .pl-score-hi {
      background: rgba(16, 217, 138, .15);
      color: #10d98a;
      border: 1px solid rgba(16, 217, 138, .3)
    }

    .pl-score-md {
      background: rgba(245, 197, 24, .15);
      color: #f5c518;
      border: 1px solid rgba(245, 197, 24, .3)
    }

    .pl-score-lo {
      background: rgba(255, 77, 109, .12);
      color: #ff4d6d;
      border: 1px solid rgba(255, 77, 109, .25)
    }

    /* ── Dormindo badge ── */
    .pl-dormindo {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 9.5px;
      font-weight: 700;
      color: #ff4d6d;
      background: rgba(255, 77, 109, .1);
      border: 1px solid rgba(255, 77, 109, .22);
      border-radius: 6px;
      padding: 1px 6px;
      animation: dormPulse 2.4s ease-in-out infinite
    }

    @keyframes dormPulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .6
      }
    }

    .pl-card.pl-dormindo-card {
      border-color: rgba(255, 77, 109, .3) !important
    }

    /* ── Nota inline ── */
    .pl-card-obs {
      font-size: 10.5px;
      color: var(--muted2);
      font-style: italic;
      margin-top: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-top: 1px solid rgba(255, 255, 255, .04);
      padding-top: 5px
    }

    /* ── Régua (cadência) tooltip ── */
    .pl-cadencia {
      font-size: 10px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 6px;
      margin-top: 5px;
      display: inline-flex;
      align-items: center;
      gap: 4px
    }

    .pl-cad-fire {
      background: rgba(251, 146, 60, .1);
      color: #fb923c;
      border: 1px solid rgba(251, 146, 60, .25)
    }

    .pl-cad-warn {
      background: rgba(245, 197, 24, .1);
      color: #f5c518;
      border: 1px solid rgba(245, 197, 24, .25)
    }

    .pl-cad-ok {
      background: rgba(16, 217, 138, .08);
      color: #10d98a;
      border: 1px solid rgba(16, 217, 138, .2)
    }

    /* ── Pipeline Velocity ── */
    .pl-velocity {
      font-size: 10px;
      color: var(--muted2);
      margin: 4px 14px 6px;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .pl-velocity-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .2);
      flex-shrink: 0
    }

    /* ── Tags nos cards ── */
    .pl-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      margin-top: 4px
    }

    .pl-tag {
      font-size: 9.5px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 5px;
      background: rgba(129, 140, 248, .12);
      color: #818cf8;
      border: 1px solid rgba(129, 140, 248, .2)
    }

    /* ── Metas no dashboard ── */
    .meta-bar-wrap {
      background: rgba(255, 255, 255, .05);
      border-radius: 6px;
      height: 8px;
      overflow: hidden;
      margin: 6px 0
    }

    .meta-bar {
      height: 100%;
      border-radius: 6px;
      transition: width 1s ease .2s;
      background: linear-gradient(90deg, #f5c518, #f5c518cc)
    }

    .meta-bar.done {
      background: linear-gradient(90deg, #10d98a, #34d399)
    }

    .meta-item {
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .meta-item:last-child {
      border-bottom: none
    }

    .meta-lbl {
      font-size: 11.5px;
      color: var(--muted);
      font-weight: 500
    }

    .meta-nums {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text)
    }

    /* ── Calculadora ── */
    #calc-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .7);
      z-index: 8000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      backdrop-filter: blur(4px)
    }

    #calc-box {
      background: #161b27;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 18px;
      padding: 28px;
      width: 100%;
      max-width: 440px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .6)
    }

    .calc-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .calc-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px
    }

    .calc-field {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .calc-lbl {
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: .3px
    }

    .calc-inp {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      padding: 9px 12px;
      font-family: inherit;
      outline: none;
      transition: border-color .15s
    }

    .calc-inp:focus {
      border-color: rgba(245, 197, 24, .4)
    }

    .calc-results {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 12px;
      padding: 16px;
      margin-top: 14px
    }

    .calc-res-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      font-size: 12.5px
    }

    .calc-res-row:last-child {
      border-bottom: none;
      padding-top: 10px;
      margin-top: 4px;
      border-top: 1px solid rgba(255, 255, 255, .1)
    }

    .calc-res-lbl {
      color: var(--muted)
    }

    .calc-res-val {
      font-weight: 700;
      color: var(--text)
    }

    .calc-res-val.hi {
      color: #10d98a
    }

    .calc-res-val.acc {
      color: #f5c518
    }

    /* ── Proposta compartilhável ── */
    #share-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .75);
      z-index: 8100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      backdrop-filter: blur(4px)
    }

    #share-box {
      background: #161b27;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 18px;
      padding: 28px;
      width: 100%;
      max-width: 460px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .6)
    }

    .share-link-box {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 10px;
      padding: 12px;
      font-size: 11.5px;
      color: var(--muted);
      word-break: break-all;
      margin: 12px 0;
      max-height: 80px;
      overflow-y: auto;
      user-select: all
    }

    .pl-card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 5px
    }

    .pl-card-name {
      font-weight: 700;
      font-size: 13px;
      flex: 1;
      word-break: break-word;
      color: var(--text);
      line-height: 1.3;
      letter-spacing: -.1px
    }

    .pl-card-qual {
      font-size: 13px;
      margin-left: 6px;
      flex-shrink: 0;
      opacity: .9
    }

    .pl-card-emp {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .pl-card-mid {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 5px;
      min-height: 18px
    }

    .pl-card-val {
      font-size: 12px;
      color: #b87fff;
      font-weight: 700;
      letter-spacing: -.3px
    }

    .pl-card-corretor {
      font-size: 10.5px;
      color: var(--muted2);
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .pl-card-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, .04)
    }

    .pl-card-tel {
      font-size: 11px;
      color: var(--green);
      font-weight: 500;
      text-decoration: none;
      transition: color .15s;
      display: inline-flex;
      align-items: center;
      gap: 3px
    }

    .pl-card-tel:hover {
      color: #34d399
    }

    .pl-card-wa-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      background: rgba(37, 211, 102, .12);
      border: 1px solid rgba(37, 211, 102, .25);
      border-radius: 6px;
      color: #25d366;
      cursor: pointer;
      transition: background .15s, border-color .15s, transform .1s;
      flex-shrink: 0;
      padding: 0;
    }

    .pl-card-wa-btn:hover {
      background: rgba(37, 211, 102, .22);
      border-color: rgba(37, 211, 102, .45);
      transform: scale(1.08);
    }

    .pl-card-wa-btn:active {
      transform: scale(.95);
    }

    .pl-card-fu {
      font-size: 10px;
      color: var(--orange);
      font-weight: 600;
      background: rgba(251, 146, 60, .1);
      padding: 2px 7px;
      border-radius: 4px;
      border: 1px solid rgba(251, 146, 60, .18);
      white-space: nowrap
    }

    /* — Tag/Badge — mais clean */
    .tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 5px;
      font-size: 10px;
      font-weight: 600;
      background: rgba(255, 255, 255, .05);
      color: rgba(255, 255, 255, .45);
      border: 1px solid rgba(255, 255, 255, .08);
      letter-spacing: .1px
    }

    /* — Botões de agente dentro do card — */
    .pl-card-agents {
      display: flex;
      gap: 5px;
      margin: 6px 0 4px
    }

    .pl-agent-btn {
      flex: 1;
      padding: 5px 0;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all .15s;
      font-family: inherit;
      letter-spacing: .02em;
      white-space: nowrap
    }

    .pl-agent-btn.sdr {
      background: rgba(245, 197, 24, .08);
      color: #f5c518;
      border: 1px solid rgba(245, 197, 24, .18)
    }

    .pl-agent-btn.sdr:hover {
      background: rgba(245, 197, 24, .2);
      border-color: rgba(245, 197, 24, .4);
      transform: translateY(-1px)
    }

    .pl-agent-btn.closer {
      background: rgba(255, 51, 102, .07);
      color: #ff3366;
      border: 1px solid rgba(255, 51, 102, .15)
    }

    .pl-agent-btn.closer:hover {
      background: rgba(255, 51, 102, .2);
      border-color: rgba(255, 51, 102, .35);
      transform: translateY(-1px)
    }

    /* — Empty column state — */
    .pl-empty {
      padding: 22px 14px;
      text-align: center;
      color: var(--muted2);
      font-size: 11.5px;
      border: 1px solid rgba(255, 255, 255, .04);
      border-radius: 10px;
      background: rgba(255, 255, 255, .01);
      letter-spacing: .1px
    }

    /* — Column guide card — mais executivo */
    .col-guide {
      padding: 0 0 10px
    }

    .col-guide-inner {
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: 10px;
      padding: 11px 13px
    }

    .col-guide-label {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: -.1px;
      margin-bottom: 4px;
      text-transform: none
    }

    .col-guide-desc {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 7px;
      line-height: 1.55
    }

    .col-guide-steps {
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .col-guide-step {
      display: flex;
      align-items: flex-start;
      gap: 5px;
      font-size: 10.5px;
      color: var(--muted2);
      line-height: 1.45
    }

    .col-guide-step-arrow {
      color: var(--acc);
      font-weight: 700;
      flex-shrink: 0;
      opacity: .7
    }

    /* — Valor no pipeline header — */
    .pl-col-val {
      font-size: 10px;
      color: var(--muted);
      padding: 0 14px 9px;
      font-weight: 500;
      letter-spacing: .1px
    }

    /* — Badge status — ligeiramente maior, mais legível — */
    .badge {
      padding: 3px 10px;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .05px
    }

    /* — Botão salvar modal — */
    #m-save {
      letter-spacing: .1px
    }

    /* ══ TIPOGRAFIA — Aumentar legibilidade geral ══ */
    body {
      font-size: 14px
    }

    input,
    select,
    textarea,
    button {
      font-size: 14px
    }

    .tab {
      font-size: 13px;
      padding: 0 16px
    }

    .tab-icon {
      font-size: 14px
    }

    .master-btn {
      font-size: 13px
    }

    #master-nav-label {
      font-size: 11px
    }

    .h-btn {
      font-size: 12.5px;
      padding: 7px 14px
    }

    .btn-pri {
      font-size: 13px
    }

    .btn-sm,
    .btn-sec {
      font-size: 13px
    }

    /* Pipeline cards */
    .pl-card-name {
      font-size: 14px
    }

    .pl-card-emp {
      font-size: 12.5px
    }

    .pl-card-corretor {
      font-size: 12px
    }

    .pl-card-tel {
      font-size: 12px
    }

    .pl-card-fu {
      font-size: 11.5px
    }

    .pl-card-val {
      font-size: 13px
    }

    .pl-col-val {
      font-size: 11.5px
    }

    /* Pipeline guide */
    .col-guide-label {
      font-size: 13px
    }

    .col-guide-desc {
      font-size: 12.5px
    }

    .col-guide-step {
      font-size: 12px
    }

    /* Tags & badges */
    .tag {
      font-size: 11px;
      color: rgba(255, 255, 255, .65)
    }

    .badge {
      font-size: 12px;
      padding: 4px 11px
    }

    /* KPI / cards */
    .kpi-label {
      font-size: 12.5px
    }

    .kpi-sub {
      font-size: 12px
    }

    .card-title {
      font-size: 13px
    }

    /* Table */
    .tbl th {
      font-size: 12.5px
    }

    .tbl td {
      font-size: 13px
    }

    .sbar-label {
      font-size: 13px
    }

    /* Follow-ups */
    .fu-hero-sub {
      font-size: 13px
    }

    .fu-hero-stat-lbl {
      font-size: 11.5px
    }

    .fu-sec-title {
      font-size: 14px
    }

    .fu-tip {
      font-size: 13px
    }

    /* Modal next steps */
    .modal-nxt-hd {
      font-size: 11px
    }

    .modal-nxt-txt {
      font-size: 13.5px
    }

    .modal-nxt-txt strong {
      font-size: 13.5px
    }

    /* Modal labels */
    .mlbl {
      font-size: 11px
    }

    .msec {
      font-size: 11px
    }

    .minp,
    .msel,
    .mtxt {
      font-size: 14px
    }

    /* Empty / muted states */
    .pl-empty {
      font-size: 12.5px
    }

    #hinfo {
      font-size: 12.5px
    }

    /* — Responsividade — */
    @media(max-width:900px) {
      .gp {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media(max-width:650px) {
      .gp {
        grid-template-columns: repeat(2, 1fr)
      }

      .g4 {
        grid-template-columns: repeat(2, 1fr)
      }

      .g2 {
        grid-template-columns: 1fr
      }

      .g2r {
        grid-template-columns: 1fr
      }

      #hright .h-btn {
        display: none
      }

      #hinfo {
        display: none
      }
    }

    @media(max-width:440px) {
      .gp {
        grid-template-columns: 1fr
      }

      .g4 {
        grid-template-columns: 1fr
      }
    }

    /* ===== FOLLOW-UP EXPERT HERO ===== */
    .fu-hero {
      background: linear-gradient(135deg, rgba(245, 197, 24, .07) 0%, rgba(77, 159, 255, .05) 100%);
      border: 1px solid rgba(245, 197, 24, .18);
      border-radius: var(--radius);
      padding: 20px 24px;
      margin-bottom: 26px;
      display: flex;
      align-items: flex-start;
      gap: 18px
    }

    .fu-hero-ico {
      width: 48px;
      height: 48px;
      border-radius: 13px;
      background: linear-gradient(135deg, var(--acc), #e0a800);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
      box-shadow: 0 0 24px rgba(245, 197, 24, .25)
    }

    .fu-hero-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 5px;
      letter-spacing: -.3px
    }

    .fu-hero-sub {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.65
    }

    .fu-hero-stats {
      display: flex;
      gap: 16px;
      margin-top: 14px;
      flex-wrap: wrap
    }

    .fu-hero-stat {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: var(--radius-xs);
      padding: 8px 14px;
      text-align: center
    }

    .fu-hero-stat-num {
      font-size: 18px;
      font-weight: 800;
      color: var(--acc);
      line-height: 1
    }

    .fu-hero-stat-lbl {
      font-size: 10px;
      color: var(--muted);
      margin-top: 3px;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    /* ===== FOLLOW-UP SECTION TIP ===== */
    .fu-tip {
      border-left: 3px solid var(--acc);
      background: rgba(255, 255, 255, .02);
      border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
      padding: 10px 14px;
      margin-bottom: 12px;
      font-size: 11.5px;
      color: var(--muted);
      line-height: 1.65
    }

    .fu-tip strong {
      color: var(--text);
      font-weight: 700
    }

    /* ===== PIPELINE COLUMN GUIDE — ver UI REFINEMENTS acima ===== */

    /* ===== MODAL NEXT STEPS ===== */
    #modal-nxt {
      display: none;
      margin-top: 16px;
      border-radius: var(--radius-xs);
      overflow: hidden;
      border: 1px solid rgba(245, 197, 24, .2);
      background: linear-gradient(135deg, rgba(245, 197, 24, .03), rgba(77, 159, 255, .02))
    }

    #modal-nxt.visible {
      display: block
    }

    .modal-nxt-hd {
      padding: 9px 15px;
      background: rgba(245, 197, 24, .09);
      border-bottom: 1px solid rgba(245, 197, 24, .15);
      font-size: 10px;
      font-weight: 800;
      color: var(--acc);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .modal-nxt-body {
      padding: 12px 15px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .modal-nxt-step {
      display: flex;
      align-items: flex-start;
      gap: 10px
    }

    .modal-nxt-num {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(245, 197, 24, .15);
      color: var(--acc);
      font-size: 10px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px
    }

    .modal-nxt-txt {
      font-size: 11.5px;
      line-height: 1.55
    }

    .modal-nxt-txt strong {
      color: var(--text);
      display: block;
      font-weight: 700;
      margin-bottom: 1px
    }

    .modal-nxt-txt span {
      color: var(--muted)
    }

    #overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .75);
      backdrop-filter: blur(8px);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 16px
    }

    #overlay.open {
      display: flex
    }

    #modal {
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 18px;
      width: 100%;
      max-width: 740px;
      max-height: 92vh;
      overflow-y: auto;
      box-shadow: 0 30px 100px rgba(0, 0, 0, .8);
      animation: modalIn .25s cubic-bezier(.4, 0, .2, 1)
    }

    @keyframes modalIn {
      from {
        opacity: 0;
        transform: scale(.97) translateY(10px)
      }

      to {
        opacity: 1;
        transform: scale(1) translateY(0)
      }
    }

    #mhd {
      padding: 18px 26px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      background: var(--card);
      z-index: 1;
      border-radius: 18px 18px 0 0
    }

    #mbody {
      padding: 22px 26px
    }

    .msec {
      font-size: 10px;
      color: var(--acc);
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 12px;
      margin-top: 6px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .mfg {
      display: grid;
      gap: 13px;
      margin-bottom: 6px
    }

    .mfg.c2 {
      grid-template-columns: 1fr 1fr
    }

    .mfg.c3 {
      grid-template-columns: 1fr 1fr 1fr
    }

    .mfg.c4 {
      grid-template-columns: 1fr 1fr 1fr 1fr
    }

    .mfld {
      margin-bottom: 13px
    }

    .mlbl {
      font-size: 10px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: .5px;
      margin-bottom: 5px;
      display: block;
      text-transform: uppercase
    }

    .minp {
      width: 100%;
      padding: 9px 13px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: var(--radius-xs);
      color: var(--text);
      outline: none;
      transition: all var(--trans)
    }

    .minp:focus {
      border-color: rgba(245, 197, 24, .5);
      background: rgba(245, 197, 24, .03);
      box-shadow: 0 0 0 3px rgba(245, 197, 24, .08)
    }

    .msel {
      width: 100%;
      padding: 9px 13px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: var(--radius-xs);
      color: var(--text);
      cursor: pointer;
      outline: none;
      transition: all var(--trans)
    }

    .msel:focus {
      border-color: rgba(245, 197, 24, .5)
    }

    .mtxt {
      width: 100%;
      padding: 9px 13px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: var(--radius-xs);
      color: var(--text);
      outline: none;
      resize: vertical;
      min-height: 75px;
      transition: all var(--trans)
    }

    .mtxt:focus {
      border-color: rgba(245, 197, 24, .5)
    }

    .mbtns {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border)
    }

    #wa-hint {
      padding: 10px 14px;
      background: rgba(16, 217, 138, .06);
      border-radius: var(--radius-xs);
      margin-bottom: 12px;
      font-size: 12px;
      color: var(--green);
      border: 1px solid rgba(16, 217, 138, .2);
      display: none
    }

    #dup-warn {
      padding: 10px 14px;
      background: rgba(255, 77, 109, .06);
      border-radius: var(--radius-xs);
      margin-bottom: 10px;
      font-size: 12px;
      color: var(--red);
      border: 1px solid rgba(255, 77, 109, .2);
      display: none
    }

    .sbar-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid var(--borderL)
    }

    .sbar-row:last-child {
      border: none
    }

    .sbar-label {
      font-size: 12px;
      flex: 1;
      font-weight: 500
    }

    .sbar-track {
      flex: 2;
      height: 5px;
      background: rgba(255, 255, 255, .06);
      border-radius: 3px;
      overflow: hidden
    }

    .sbar-fill {
      height: 100%;
      border-radius: 3px;
      width: 0;
      transition: width 1s cubic-bezier(.4, 0, .2, 1)
    }

    .sbar-num {
      font-size: 12px;
      font-weight: 700;
      min-width: 28px;
      text-align: right
    }

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

    .link-acc {
      font-size: 12px;
      color: var(--acc);
      cursor: pointer;
      font-weight: 500;
      transition: opacity var(--trans)
    }

    .link-acc:hover {
      opacity: .75
    }

    .wa-btn {
      color: var(--green);
      font-size: 15px;
      transition: transform var(--trans);
      display: inline-block
    }

    .wa-btn:hover {
      transform: scale(1.2)
    }

    .dias-ok {
      color: var(--green);
      font-weight: 600;
      font-size: 12px
    }

    .dias-warn {
      color: var(--orange);
      font-weight: 600;
      font-size: 12px
    }

    .dias-bad {
      color: var(--red);
      font-weight: 600;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 3px
    }

    #module-crm .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      color: var(--muted2);
      text-align: center;
      gap: 12px
    }

    #module-crm .empty-icon {
      font-size: 40px;
      opacity: .4
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 8px;
      border-radius: 5px;
      font-size: 10px;
      font-weight: 600;
      background: rgba(255, 255, 255, .06);
      color: var(--muted)
    }

    #crm-toast {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .toast-item {
      padding: 12px 18px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      box-shadow: var(--shadow-lg);
      animation: toastIn .3s ease;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 220px;
      border: 1px solid
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(20px) scale(.95)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    .toast-success {
      background: rgba(16, 217, 138, .12);
      color: var(--green);
      border-color: rgba(16, 217, 138, .25)
    }

    .toast-error {
      background: rgba(255, 77, 109, .12);
      color: var(--red);
      border-color: rgba(255, 77, 109, .25)
    }

    .toast-info {
      background: rgba(77, 159, 255, .12);
      color: var(--blue);
      border-color: rgba(77, 159, 255, .25)
    }

    /* ══════════════ CRM AGENTE IA — COLUNA ══════════════ */
    .col-ai-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      border: none;
      background: rgba(245, 197, 24, .1);
      color: #f5c518;
      cursor: pointer;
      font-size: 12px;
      transition: all .18s;
      flex-shrink: 0;
      padding: 0;
      line-height: 1
    }

    .col-ai-btn:hover {
      background: rgba(245, 197, 24, .26);
      transform: scale(1.12);
      box-shadow: 0 0 8px rgba(245, 197, 24, .25)
    }

    .crm-ai-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .42);
      backdrop-filter: blur(4px);
      z-index: 3000
    }

    .crm-ai-overlay.open {
      display: block
    }

    .crm-ai-panel {
      position: fixed;
      top: 0;
      right: -480px;
      width: min(456px, 95vw);
      height: 100%;
      background: rgba(9, 10, 16, .98);
      border-left: 1px solid rgba(245, 197, 24, .12);
      z-index: 3001;
      display: flex;
      flex-direction: column;
      transition: right .32s cubic-bezier(.4, 0, .2, 1);
      box-shadow: -24px 0 80px rgba(0, 0, 0, .75)
    }

    .crm-ai-panel.open {
      right: 0
    }

    .crm-ai-hd {
      padding: 18px 20px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-shrink: 0;
      background: rgba(245, 197, 24, .02)
    }

    .crm-ai-title {
      font-size: 14px;
      font-weight: 700;
      color: #e8eaf6;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 3px
    }

    .crm-ai-sub {
      font-size: 11px;
      color: #404668;
      margin-bottom: 5px
    }

    .crm-ai-stage-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .4px;
      border: 1px solid
    }

    .crm-ai-close-btn {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      border: none;
      background: rgba(255, 255, 255, .05);
      color: #5c6080;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .18s;
      flex-shrink: 0;
      line-height: 1
    }

    .crm-ai-close-btn:hover {
      background: rgba(255, 77, 109, .15);
      color: #ff4d6d
    }

    .crm-ai-leads-bar {
      padding: 8px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      flex-shrink: 0;
      min-height: 38px;
      align-items: center
    }

    .crm-ai-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .08);
      color: #8890b4;
      cursor: pointer;
      transition: all .18s
    }

    .crm-ai-chip:hover {
      background: rgba(245, 197, 24, .1);
      border-color: rgba(245, 197, 24, .25);
      color: #f5c518
    }

    .crm-ai-chip.hot {
      background: rgba(255, 77, 109, .07);
      border-color: rgba(255, 77, 109, .18);
      color: #ff6b87
    }

    .crm-ai-chip.warm {
      background: rgba(251, 146, 60, .07);
      border-color: rgba(251, 146, 60, .18);
      color: #fb923c
    }

    .crm-ai-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 13px;
      scroll-behavior: smooth
    }

    .crm-ai-msgs::-webkit-scrollbar {
      width: 3px
    }

    .crm-ai-msgs::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .08);
      border-radius: 2px
    }

    .crm-ai-msg {
      display: flex;
      gap: 9px;
      align-items: flex-start
    }

    .crm-ai-av {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .crm-ai-av.ai {
      background: rgba(245, 197, 24, .11);
      color: #f5c518
    }

    .crm-ai-av.user {
      background: rgba(77, 159, 255, .11);
      color: #4d9fff
    }

    .crm-ai-msg-name {
      font-size: 10px;
      color: #404668;
      font-weight: 600;
      letter-spacing: .5px;
      margin-bottom: 4px;
      text-transform: uppercase
    }

    .crm-ai-bubble {
      font-size: 12.5px;
      color: #b0b4cc;
      line-height: 1.68;
      background: rgba(255, 255, 255, .035);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 10px;
      padding: 11px 14px
    }

    .crm-ai-msg.user .crm-ai-bubble {
      background: rgba(77, 159, 255, .07);
      border-color: rgba(77, 159, 255, .14);
      color: #a8c8ff
    }

    .crm-ai-bubble strong {
      color: #f5c518;
      font-weight: 700
    }

    .crm-ai-bubble em {
      color: #00d4ff;
      font-style: normal
    }

    .crm-ai-bubble h4 {
      color: #e8eaf6;
      font-size: 11px;
      font-weight: 700;
      margin: 10px 0 4px;
      letter-spacing: .7px;
      text-transform: uppercase;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, .06)
    }

    .crm-ai-bubble h4:first-child {
      margin-top: 0;
      padding-top: 0;
      border: none
    }

    .crm-ai-bubble p {
      margin: 4px 0
    }

    .crm-ai-bubble ul {
      margin: 4px 0;
      padding-left: 16px
    }

    .crm-ai-bubble li {
      margin: 3px 0
    }

    .crm-ai-dots {
      display: flex;
      gap: 5px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 10px
    }

    .crm-ai-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #f5c518;
      opacity: .3;
      animation: crmDot 1.2s ease-in-out infinite
    }

    .crm-ai-dot:nth-child(2) {
      animation-delay: .2s
    }

    .crm-ai-dot:nth-child(3) {
      animation-delay: .4s
    }

    @keyframes crmDot {

      0%,
      80%,
      100% {
        transform: scale(.75);
        opacity: .25
      }

      40% {
        transform: scale(1.05);
        opacity: .9
      }
    }

    .crm-ai-footer {
      padding: 12px 14px;
      border-top: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
      background: rgba(6, 7, 12, .98)
    }

    .crm-ai-inp {
      flex: 1;
      padding: 9px 13px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 9px;
      color: #e8eaf6;
      font-size: 13px;
      outline: none;
      transition: border-color .2s;
      font-family: inherit
    }

    .crm-ai-inp:focus {
      border-color: rgba(245, 197, 24, .35);
      background: rgba(245, 197, 24, .025)
    }

    .crm-ai-inp::placeholder {
      color: #2e3250
    }

    .crm-ai-inp:disabled {
      opacity: .45
    }

    .crm-ai-send-btn {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      border: none;
      background: rgba(245, 197, 24, .13);
      color: #f5c518;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .18s;
      flex-shrink: 0
    }

    .crm-ai-send-btn:hover:not(:disabled) {
      background: rgba(245, 197, 24, .26);
      transform: scale(1.06)
    }

    .crm-ai-send-btn:disabled {
      opacity: .3;
      cursor: default
    }

    /* ══════════════ CRM ASSISTENTE IA — FAB ══════════════ */
    .crm-fab {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 3500;
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, rgba(245, 197, 24, .18), rgba(251, 146, 60, .2));
      border: 1px solid rgba(245, 197, 24, .36);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 32px rgba(245, 197, 24, .18), 0 8px 28px rgba(0, 0, 0, .6);
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
      color: #f5c518;
      font-family: inherit;
      backdrop-filter: blur(16px)
    }

    .crm-fab:hover {
      transform: scale(1.1);
      box-shadow: 0 0 52px rgba(245, 197, 24, .32), 0 12px 40px rgba(0, 0, 0, .8)
    }

    .crm-fab-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(245, 197, 24, .28);
      animation: crmFabRing 2.6s ease-out infinite;
      pointer-events: none
    }

    .crm-fab-ring:nth-child(1) {
      width: 72px;
      height: 72px;
      animation-delay: 0s
    }

    .crm-fab-ring:nth-child(2) {
      width: 88px;
      height: 88px;
      animation-delay: .75s
    }

    @keyframes crmFabRing {
      0% {
        opacity: .55;
        transform: scale(.9)
      }

      100% {
        opacity: 0;
        transform: scale(1.3)
      }
    }

    .crm-fab-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #f5c518;
      color: #0a0b10;
      font-size: 9px;
      font-weight: 800;
      padding: 2px 5px;
      border-radius: 8px;
      letter-spacing: .3px;
      pointer-events: none
    }

    .crm-fab-panel {
      position: fixed;
      bottom: 96px;
      right: 28px;
      z-index: 3501;
      width: 480px;
      max-height: calc(100vh - 140px);
      background: rgba(8, 9, 14, .98);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(245, 197, 24, .14);
      border-radius: 20px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .85), 0 0 50px rgba(245, 197, 24, .06);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      transform: translateY(20px) scale(.95);
      pointer-events: none;
      transition: all .38s cubic-bezier(.34, 1.56, .64, 1)
    }

    .crm-fab-panel.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto
    }

    .crm-fab-head {
      padding: 16px 18px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      background: rgba(245, 197, 24, .025)
    }

    .crm-fab-head-ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(245, 197, 24, .12);
      color: #f5c518;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .crm-fab-head-title {
      font-size: 14px;
      font-weight: 700;
      color: #e8eaf6
    }

    .crm-fab-head-sub {
      font-size: 11px;
      color: #404668;
      margin-top: 2px
    }

    .crm-fab-close {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      border: none;
      background: rgba(255, 255, 255, .05);
      color: #5c6080;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .18s;
      flex-shrink: 0
    }

    .crm-fab-close:hover {
      background: rgba(255, 77, 109, .15);
      color: #ff4d6d
    }

    .crm-fab-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      scroll-behavior: smooth
    }

    .crm-fab-msgs::-webkit-scrollbar {
      width: 3px
    }

    .crm-fab-msgs::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .08);
      border-radius: 2px
    }

    .crm-fab-msg {
      display: flex;
      gap: 9px;
      align-items: flex-start
    }

    .crm-fab-av {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .crm-fab-av.ai {
      background: rgba(245, 197, 24, .12);
      color: #f5c518
    }

    .crm-fab-av.user {
      background: rgba(77, 159, 255, .12);
      color: #4d9fff
    }

    .crm-fab-msg-name {
      font-size: 10px;
      color: #404668;
      font-weight: 600;
      letter-spacing: .5px;
      margin-bottom: 4px;
      text-transform: uppercase
    }

    .crm-fab-bubble {
      font-size: 12.5px;
      color: #b0b4cc;
      line-height: 1.68;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 10px;
      padding: 11px 13px
    }

    .crm-fab-msg.user .crm-fab-bubble {
      background: rgba(77, 159, 255, .07);
      border-color: rgba(77, 159, 255, .14);
      color: #a8c8ff
    }

    .crm-fab-bubble strong {
      color: #f5c518;
      font-weight: 700
    }

    .crm-fab-bubble em {
      color: #00d4ff;
      font-style: normal
    }

    .crm-fab-bubble h4 {
      color: #e8eaf6;
      font-size: 11px;
      font-weight: 700;
      margin: 10px 0 4px;
      letter-spacing: .7px;
      text-transform: uppercase;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, .06)
    }

    .crm-fab-bubble h4:first-child {
      margin-top: 0;
      padding-top: 0;
      border: none
    }

    .crm-fab-bubble p {
      margin: 4px 0
    }

    .crm-fab-bubble ul {
      margin: 4px 0;
      padding-left: 16px
    }

    .crm-fab-bubble li {
      margin: 3px 0
    }

    .crm-fab-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 28px 20px;
      gap: 12px;
      text-align: center;
      color: #404668;
      flex: 1
    }

    .crm-fab-empty svg {
      opacity: .25
    }

    .crm-fab-empty p {
      font-size: 12px;
      line-height: 1.65
    }

    .crm-fab-empty strong {
      color: #6b7694
    }

    .crm-fab-dots {
      display: flex;
      gap: 5px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 10px
    }

    .crm-fab-foot {
      padding: 11px 13px;
      border-top: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
      background: rgba(6, 7, 12, .98)
    }

    .crm-fab-inp {
      flex: 1;
      padding: 9px 13px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 9px;
      color: #e8eaf6;
      font-size: 13px;
      outline: none;
      transition: border-color .2s;
      font-family: inherit
    }

    .crm-fab-inp:focus {
      border-color: rgba(245, 197, 24, .35);
      background: rgba(245, 197, 24, .02)
    }

    .crm-fab-inp::placeholder {
      color: #2e3250
    }

    .crm-fab-inp:disabled {
      opacity: .45
    }

    .crm-fab-send {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      border: none;
      background: rgba(245, 197, 24, .13);
      color: #f5c518;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .18s;
      flex-shrink: 0
    }

    .crm-fab-send:hover:not(:disabled) {
      background: rgba(245, 197, 24, .26);
      transform: scale(1.06)
    }

    .crm-fab-send:disabled {
      opacity: .3;
      cursor: default
    }

    .crm-fab-cfg {
      padding: 8px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      display: flex;
      gap: 14px;
      align-items: center;
      flex-shrink: 0;
      background: rgba(255, 255, 255, .01);
      flex-wrap: wrap
    }

    .crm-fab-cfg-grp {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-shrink: 0
    }

    .crm-fab-cfg-lbl {
      font-size: 10px;
      color: #404668;
      font-weight: 700;
      letter-spacing: .6px;
      text-transform: uppercase;
      white-space: nowrap
    }

    .crm-fab-sel {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 7px;
      color: #9ca3af;
      padding: 4px 8px;
      font-size: 11px;
      outline: none;
      cursor: pointer;
      font-family: inherit;
      -webkit-appearance: none;
      appearance: none;
      transition: border-color .18s
    }

    .crm-fab-sel:focus {
      border-color: rgba(245, 197, 24, .3);
      color: #e8eaf6
    }

    .crm-fab-mode-grp {
      display: flex;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 7px;
      padding: 2px;
      gap: 2px
    }

    .crm-fab-mode-btn {
      padding: 3px 11px;
      border-radius: 5px;
      border: none;
      background: transparent;
      color: #5c6080;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
      font-family: inherit
    }

    .crm-fab-mode-btn {
      display: flex;
      align-items: center;
      gap: 5px
    }

    .crm-fab-mode-btn.active[data-mode="sdr"] {
      background: rgba(245, 197, 24, .13);
      color: #f5c518
    }

    .crm-fab-mode-btn.active[data-mode="closer"] {
      background: rgba(255, 51, 102, .12);
      color: #ff3366
    }

    /* Agent badge in FAB empty state */
    .crm-fab-agent-badge {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-bottom: 4px
    }

    .crm-fab-agent-badge.sdr {
      background: rgba(245, 197, 24, .12);
      color: #f5c518;
      box-shadow: 0 0 20px rgba(245, 197, 24, .15)
    }

    .crm-fab-agent-badge.closer {
      background: rgba(255, 51, 102, .12);
      color: #ff3366;
      box-shadow: 0 0 20px rgba(255, 51, 102, .15)
    }

    @media(max-width:600px) {
      .crm-fab-panel {
        width: calc(100vw - 24px);
        right: 12px;
        bottom: 80px
      }
    }

    /* ══════════════ MOTOR DE CONVERSÃO — DARK GLASS ══════════════ */
    #module-obj {
      background: #050508;
      color: #e8eaf6
    }

    .mc-bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden
    }

    .mc-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
      animation: mcOrb 25s ease-in-out infinite
    }

    .mc-orb-1 {
      width: 620px;
      height: 620px;
      background: #00d4ff;
      top: -20%;
      left: -10%;
      opacity: .1;
      animation-delay: 0s
    }

    .mc-orb-2 {
      width: 520px;
      height: 520px;
      background: #7c3aed;
      bottom: -15%;
      right: -8%;
      opacity: .09;
      animation-delay: -10s
    }

    .mc-orb-3 {
      width: 360px;
      height: 360px;
      background: #00e87c;
      top: 40%;
      left: 55%;
      opacity: .06;
      animation-delay: -18s
    }

    @keyframes mcOrb {

      0%,
      100% {
        transform: translate(0, 0) scale(1)
      }

      33% {
        transform: translate(30px, -50px) scale(1.08)
      }

      66% {
        transform: translate(-25px, 35px) scale(.92)
      }
    }

    .mc-grid {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%)
    }

    .mc-wrapper {
      position: relative;
      z-index: 1
    }

    /* HEADER */
    .mc-header {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(5, 5, 8, .94);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(0, 212, 255, .1)
    }

    .mc-header::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .6), rgba(124, 58, 237, .5), transparent)
    }

    .mc-header-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 12px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap
    }

    .mc-brand {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .mc-brand-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .12), rgba(124, 58, 237, .18));
      border: 1px solid rgba(0, 212, 255, .28);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      box-shadow: 0 0 20px rgba(0, 212, 255, .12), inset 0 0 12px rgba(0, 212, 255, .06)
    }

    .mc-brand-name {
      font-size: .98rem;
      font-weight: 900;
      letter-spacing: -.02em;
      color: #e8eaf6;
      line-height: 1
    }

    .mc-brand-sub {
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #3a3d50;
      margin-top: 3px
    }

    .mc-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap
    }

    .mc-ctrl-grp {
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .mc-ctrl-lbl {
      font-size: .54rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #3a3d50
    }

    .mc-select {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 9px;
      color: #e8eaf6;
      padding: 8px 30px 8px 11px;
      font-size: .76rem;
      font-weight: 700;
      cursor: pointer;
      outline: none;
      transition: all .2s;
      font-family: inherit;
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' fill='none' viewBox='0 0 24 24' stroke='%233a3d50' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 9px center
    }

    .mc-select:focus {
      border-color: rgba(0, 212, 255, .4);
      box-shadow: 0 0 0 3px rgba(0, 212, 255, .08)
    }

    .mc-select option {
      background: #0c0d14;
      color: #e8eaf6
    }

    .mc-toggle-grp {
      display: flex;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 9px;
      padding: 3px;
      gap: 2px
    }

    .mc-toggle {
      padding: 6px 13px;
      border-radius: 7px;
      border: none;
      background: transparent;
      color: #5c6080;
      font-size: .72rem;
      font-weight: 700;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
      font-family: inherit
    }

    .mc-toggle.active {
      background: rgba(0, 212, 255, .1);
      color: #00d4ff;
      box-shadow: 0 0 14px rgba(0, 212, 255, .08)
    }

    .mc-mode-grp {
      display: flex;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 9px;
      padding: 3px;
      gap: 2px
    }

    .mc-mode-btn {
      padding: 6px 15px;
      border-radius: 7px;
      border: none;
      background: transparent;
      color: #5c6080;
      font-size: .69rem;
      font-weight: 900;
      cursor: pointer;
      transition: all .2s;
      letter-spacing: .06em;
      font-family: inherit
    }

    .mc-mode-btn.active[data-mode="sdr"] {
      background: rgba(251, 191, 36, .12);
      color: #fbbf24;
      box-shadow: 0 0 14px rgba(251, 191, 36, .08)
    }

    .mc-mode-btn.active[data-mode="closer"] {
      background: rgba(255, 51, 102, .12);
      color: #ff3366;
      box-shadow: 0 0 14px rgba(255, 51, 102, .1)
    }

    .mc-mode-ind {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 13px;
      border-radius: 9px;
      font-size: .66rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      border: 1px solid rgba(255, 255, 255, .08)
    }

    #module-obj[data-mode="sdr"] .mc-mode-ind {
      background: rgba(251, 191, 36, .07);
      color: #fbbf24;
      border-color: rgba(251, 191, 36, .2)
    }

    #module-obj[data-mode="closer"] .mc-mode-ind {
      background: rgba(255, 51, 102, .07);
      color: #ff3366;
      border-color: rgba(255, 51, 102, .2)
    }

    .mc-mode-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      animation: mcPulse 1.5s infinite;
      flex-shrink: 0
    }

    #module-obj[data-mode="sdr"] .mc-mode-dot {
      background: #fbbf24;
      box-shadow: 0 0 8px #fbbf24
    }

    #module-obj[data-mode="closer"] .mc-mode-dot {
      background: #ff3366;
      box-shadow: 0 0 8px #ff3366
    }

    @keyframes mcPulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .4;
        transform: scale(.6)
      }
    }

    /* NAV */
    .mc-nav {
      background: rgba(5, 5, 8, .75);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      position: sticky;
      top: 70px;
      z-index: 35
    }

    .mc-nav-inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 7px 28px;
      display: flex;
      gap: 5px
    }

    .mc-tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid transparent;
      background: transparent;
      color: #5c6080;
      border-radius: 9px;
      padding: 9px 18px;
      cursor: pointer;
      font-weight: 700;
      font-size: .78rem;
      transition: all .22s;
      user-select: none;
      font-family: inherit
    }

    .mc-tab-btn svg {
      width: 14px;
      height: 14px
    }

    .mc-tab-btn:hover {
      color: #e8eaf6;
      background: rgba(255, 255, 255, .04)
    }

    .mc-tab-btn.active {
      background: rgba(0, 212, 255, .08);
      color: #00d4ff;
      border-color: rgba(0, 212, 255, .2);
      box-shadow: 0 0 18px rgba(0, 212, 255, .05)
    }

    /* PAGE */
    .mc-page {
      max-width: 1440px;
      margin: 0 auto;
      padding: 26px 28px 80px
    }

    /* LAYOUT */
    .mc-layout {
      display: grid;
      grid-template-columns: 390px 1fr;
      gap: 22px;
      align-items: start
    }

    /* GLASS CARD */
    .mc-glass {
      background: rgba(255, 255, 255, .033);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 16px;
      overflow: hidden;
      transition: border-color .2s
    }

    .mc-glass:hover {
      border-color: rgba(255, 255, 255, .11)
    }

    /* ASIDE */
    .mc-aside-sticky {
      position: sticky;
      top: calc(70px + 46px + 16px)
    }

    .mc-search-head {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 20px 0;
      margin-bottom: 14px
    }

    .mc-search-icon-box {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .12), rgba(124, 58, 237, .12));
      border: 1px solid rgba(0, 212, 255, .22);
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: inset 0 0 10px rgba(0, 212, 255, .08)
    }

    .mc-search-icon-box svg {
      width: 19px;
      height: 19px;
      color: #00d4ff
    }

    .mc-search-head-text h3 {
      font-size: .9rem;
      font-weight: 800;
      color: #e8eaf6;
      line-height: 1.2
    }

    .mc-search-head-text p {
      font-size: .7rem;
      color: #5c6080;
      margin-top: 2px;
      font-weight: 500
    }

    .mc-search-body {
      padding: 0 20px 20px
    }

    .mc-search-box {
      position: relative;
      margin-bottom: 10px
    }

    .mc-search-inp {
      width: 100%;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 11px;
      padding: 13px 42px 13px 42px;
      font-size: .88rem;
      font-weight: 600;
      outline: none;
      background: rgba(255, 255, 255, .04);
      color: #e8eaf6;
      transition: all .22s;
      font-family: inherit
    }

    .mc-search-inp::placeholder {
      color: #2e3048;
      font-weight: 500
    }

    .mc-search-inp:focus {
      border-color: rgba(0, 212, 255, .38);
      background: rgba(0, 212, 255, .04);
      box-shadow: 0 0 0 3px rgba(0, 212, 255, .07)
    }

    .mc-search-ico {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: #2e3048;
      pointer-events: none
    }

    .mc-search-ico svg {
      width: 16px;
      height: 16px
    }

    .mc-clear-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: rgba(255, 255, 255, .07);
      color: #5c6080;
      width: 27px;
      height: 27px;
      border-radius: 50%;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      transition: .15s;
      font-family: inherit
    }

    .mc-clear-btn:hover {
      background: rgba(255, 255, 255, .13)
    }

    .mc-clear-btn.visible {
      display: inline-flex
    }

    .mc-clear-btn svg {
      width: 12px;
      height: 12px
    }

    .mc-search-meta {
      display: flex;
      justify-content: space-between;
      font-size: .68rem;
      color: #5c6080;
      margin-bottom: 15px;
      font-weight: 600
    }

    .mc-section-lbl {
      font-size: .6rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #2e3048;
      margin-bottom: 9px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .mc-section-lbl::before {
      content: '';
      width: 14px;
      height: 1px;
      background: rgba(0, 212, 255, .35);
      display: inline-block
    }

    .mc-chips {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-bottom: 16px
    }

    .mc-chip {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      color: #5c6080;
      border-radius: 999px;
      padding: 5px 12px;
      cursor: pointer;
      font-size: .7rem;
      font-weight: 700;
      transition: all .18s;
      user-select: none;
      font-family: inherit
    }

    .mc-chip:hover {
      border-color: rgba(0, 212, 255, .28);
      color: #00d4ff
    }

    .mc-chip.active {
      background: rgba(0, 212, 255, .1);
      color: #00d4ff;
      border-color: rgba(0, 212, 255, .32);
      box-shadow: 0 0 10px rgba(0, 212, 255, .07)
    }

    .mc-quick-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-bottom: 6px
    }

    .mc-quick-btn {
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 11px;
      background: rgba(255, 255, 255, .03);
      padding: 11px;
      text-align: left;
      cursor: pointer;
      transition: all .18s;
      position: relative;
      overflow: hidden;
      font-family: inherit
    }

    .mc-quick-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(180deg, #00d4ff, #7c3aed);
      opacity: 0;
      transition: .18s
    }

    .mc-quick-btn:hover {
      border-color: rgba(0, 212, 255, .22);
      background: rgba(0, 212, 255, .05);
      transform: translateY(-1px)
    }

    .mc-quick-btn:hover::before {
      opacity: 1
    }

    .mc-quick-btn strong {
      display: block;
      font-size: .72rem;
      color: #b0b4cc;
      margin-bottom: 2px;
      line-height: 1.3;
      font-weight: 700
    }

    .mc-quick-btn span {
      display: block;
      font-size: .6rem;
      color: #2e3048;
      font-weight: 600
    }

    /* SUGGESTIONS */
    .mc-suggestions {
      margin: 0 0 6px;
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 11px;
      overflow: hidden;
      display: none
    }

    .mc-suggestions.visible {
      display: block
    }

    .mc-sug-item {
      width: 100%;
      border: none;
      background: rgba(255, 255, 255, .03);
      text-align: left;
      padding: 11px 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 11px;
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      transition: .14s;
      font-family: inherit
    }

    .mc-sug-item:last-child {
      border-bottom: none
    }

    .mc-sug-item:hover,
    .mc-sug-item.active {
      background: rgba(0, 212, 255, .07)
    }

    .mc-sug-rank {
      width: 25px;
      height: 25px;
      border-radius: 7px;
      background: rgba(255, 255, 255, .05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .62rem;
      font-weight: 900;
      color: #5c6080;
      flex-shrink: 0;
      transition: .18s
    }

    .mc-sug-item.active .mc-sug-rank,
    .mc-sug-item:hover .mc-sug-rank {
      background: rgba(0, 212, 255, .14);
      color: #00d4ff
    }

    .mc-sug-content {
      flex: 1;
      min-width: 0
    }

    .mc-sug-title {
      font-size: .8rem;
      font-weight: 700;
      color: #b0b4cc;
      line-height: 1.3
    }

    .mc-sug-meta {
      font-size: .63rem;
      color: #5c6080;
      font-weight: 600;
      margin-top: 1px
    }

    .mc-sug-score {
      font-size: .6rem;
      font-weight: 900;
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(0, 212, 255, .08);
      color: #00d4ff;
      white-space: nowrap;
      border: 1px solid rgba(0, 212, 255, .18)
    }

    /* EMPTY STATE */
    .mc-empty {
      background: rgba(255, 255, 255, .02);
      border: 1px dashed rgba(255, 255, 255, .07);
      border-radius: 20px;
      padding: 52px 32px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px
    }

    .mc-empty-icon {
      width: 76px;
      height: 76px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .1), rgba(124, 58, 237, .1));
      border: 1px solid rgba(0, 212, 255, .18);
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: mcFloat 3.5s ease-in-out infinite
    }

    .mc-empty-icon svg {
      width: 32px;
      height: 32px;
      color: #00d4ff
    }

    @keyframes mcFloat {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-8px)
      }
    }

    .mc-empty h2 {
      font-size: 1.2rem;
      font-weight: 900;
      color: #e8eaf6;
      letter-spacing: -.02em
    }

    .mc-empty>p {
      color: #5c6080;
      max-width: 460px;
      font-size: .86rem;
      line-height: 1.6
    }

    .mc-empty-steps {
      display: grid;
      gap: 9px;
      width: 100%;
      max-width: 420px;
      text-align: left
    }

    .mc-empty-step {
      display: flex;
      align-items: center;
      gap: 13px;
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 11px;
      padding: 13px 15px;
      transition: .22s
    }

    .mc-empty-step:hover {
      border-color: rgba(0, 212, 255, .18);
      background: rgba(0, 212, 255, .04)
    }

    .mc-step-n {
      width: 29px;
      height: 29px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .15), rgba(124, 58, 237, .15));
      border: 1px solid rgba(0, 212, 255, .28);
      color: #00d4ff;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .78rem;
      font-weight: 900;
      flex-shrink: 0
    }

    .mc-step-t {
      font-size: .8rem;
      color: #5c6080;
      font-weight: 600
    }

    /* RESULT */
    .mc-result-grid {
      display: grid;
      gap: 18px;
      animation: mcReveal .4s cubic-bezier(.34, 1.56, .64, 1)
    }

    @keyframes mcReveal {
      from {
        opacity: 0;
        transform: translateY(14px) scale(.98)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    .mc-result-hd {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 15px;
      padding: 20px 24px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap
    }

    .mc-result-hd h2 {
      font-size: 1.3rem;
      font-weight: 900;
      color: #e8eaf6;
      letter-spacing: -.02em;
      line-height: 1.2
    }

    .mc-cat-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 7px;
      padding: 5px 11px;
      background: rgba(0, 212, 255, .07);
      border: 1px solid rgba(0, 212, 255, .18);
      border-radius: 999px;
      font-size: .65rem;
      font-weight: 800;
      color: #00d4ff;
      text-transform: uppercase;
      letter-spacing: .07em
    }

    .mc-score-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 999px;
      padding: 9px 15px;
      font-size: .72rem;
      font-weight: 800;
      color: #e8eaf6;
      white-space: nowrap;
      flex-shrink: 0
    }

    .mc-score-dot {
      width: 7px;
      height: 7px;
      background: #00d4ff;
      border-radius: 50%;
      box-shadow: 0 0 8px #00d4ff;
      animation: mcPulse 2s infinite
    }

    /* 3 BLOCKS */
    .mc-blocks {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px
    }

    .mc-block {
      border-radius: 15px;
      padding: 20px;
      border: 1px solid;
      position: relative;
      overflow: hidden;
      transition: all .22s
    }

    .mc-block::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      filter: blur(40px);
      opacity: 0;
      transition: opacity .22s
    }

    .mc-block:hover {
      transform: translateY(-2px)
    }

    .mc-block:hover::before {
      opacity: 1
    }

    .mc-block-lbl {
      font-size: .55rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .16em;
      margin-bottom: 13px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .mc-block-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .mc-block-text {
      font-size: .88rem;
      line-height: 1.65;
      font-weight: 500
    }

    /* DIAGNÓSTICO — amber */
    .mc-block-diag {
      background: rgba(251, 191, 36, .045);
      border-color: rgba(251, 191, 36, .18)
    }

    .mc-block-diag::before {
      background: #fbbf24
    }

    .mc-block-diag .mc-block-lbl {
      color: #fbbf24
    }

    .mc-block-diag .mc-block-dot {
      background: #fbbf24;
      box-shadow: 0 0 7px #fbbf24
    }

    .mc-block-diag .mc-block-text {
      color: #c0c2d4
    }

    /* SCRIPT DE SUCESSO — violet */
    .mc-block-script {
      background: rgba(124, 58, 237, .045);
      border-color: rgba(124, 58, 237, .18)
    }

    .mc-block-script::before {
      background: #7c3aed
    }

    .mc-block-script .mc-block-lbl {
      color: #a78bfa
    }

    .mc-block-script .mc-block-dot {
      background: #7c3aed;
      box-shadow: 0 0 7px #7c3aed
    }

    .mc-block-script .mc-block-text {
      color: #c0c2d4;
      font-size: .9rem;
      font-weight: 600
    }

    /* QUEBRA DE OBJEÇÃO — neon green */
    .mc-block-quebra {
      background: rgba(0, 232, 124, .035);
      border-color: rgba(0, 232, 124, .16)
    }

    .mc-block-quebra::before {
      background: #00e87c
    }

    .mc-block-quebra .mc-block-lbl {
      color: #00e87c
    }

    .mc-block-quebra .mc-block-dot {
      background: #00e87c;
      box-shadow: 0 0 7px #00e87c
    }

    .mc-block-quebra .mc-block-text {
      color: #e8eaf6;
      font-size: .94rem;
      font-weight: 700;
      line-height: 1.55
    }

    /* SUPPORT */
    .mc-support {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    .mc-sup-card {
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 14px;
      padding: 18px
    }

    .mc-sup-card.dark {
      background: linear-gradient(135deg, rgba(124, 58, 237, .06), rgba(0, 212, 255, .04));
      border-color: rgba(124, 58, 237, .18)
    }

    .mc-sup-lbl {
      font-size: .57rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .13em;
      color: #2e3048;
      margin-bottom: 11px;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .mc-sup-lbl::before {
      content: '';
      width: 11px;
      height: 1px;
      background: rgba(255, 255, 255, .18)
    }

    .mc-tactic-list {
      padding-left: 17px;
      display: grid;
      gap: 6px
    }

    .mc-tactic-list li {
      font-size: .8rem;
      color: #7a7f96;
      line-height: 1.5
    }

    .mc-tactic-list li::marker {
      color: #7c3aed
    }

    .mc-next-q {
      font-size: .95rem;
      font-weight: 800;
      color: #e8eaf6;
      line-height: 1.45
    }

    /* ACTIONS */
    .mc-actions {
      display: flex;
      gap: 9px;
      flex-wrap: wrap
    }

    .mc-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 10px;
      background: rgba(255, 255, 255, .04);
      padding: 10px 16px;
      cursor: pointer;
      font-weight: 700;
      font-size: .77rem;
      transition: all .18s;
      color: #5c6080;
      font-family: inherit
    }

    .mc-action-btn svg {
      width: 13px;
      height: 13px
    }

    .mc-action-btn:hover {
      border-color: rgba(0, 212, 255, .28);
      color: #00d4ff;
      background: rgba(0, 212, 255, .06);
      transform: translateY(-1px)
    }

    .mc-action-primary {
      background: linear-gradient(135deg, rgba(0, 212, 255, .1), rgba(124, 58, 237, .1));
      color: #00d4ff;
      border-color: rgba(0, 212, 255, .22)
    }

    .mc-action-primary:hover {
      box-shadow: 0 0 22px rgba(0, 212, 255, .14)
    }

    /* RECENT */
    .mc-recent-lbl {
      font-size: .58rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .13em;
      color: #2e3048;
      margin-bottom: 9px
    }

    .mc-recent-list {
      display: grid;
      gap: 5px
    }

    .mc-recent-item {
      display: flex;
      align-items: center;
      gap: 11px;
      border: 1px solid rgba(255, 255, 255, .05);
      background: rgba(255, 255, 255, .02);
      border-radius: 10px;
      padding: 10px 13px;
      cursor: pointer;
      transition: .18s;
      font: inherit;
      text-align: left;
      width: 100%
    }

    .mc-recent-item:hover {
      border-color: rgba(0, 212, 255, .18);
      background: rgba(0, 212, 255, .04);
      transform: translateX(3px)
    }

    .mc-recent-dot {
      width: 6px;
      height: 6px;
      background: linear-gradient(135deg, #00d4ff, #7c3aed);
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 5px rgba(0, 212, 255, .3)
    }

    .mc-recent-text strong {
      display: block;
      font-size: .78rem;
      color: #b0b4cc;
      font-weight: 700
    }

    .mc-recent-text span {
      font-size: .65rem;
      color: #5c6080;
      font-weight: 600
    }

    /* TRAINING */
    .mc-training-layout {
      display: grid;
      gap: 20px
    }

    .mc-training-hero {
      padding: 26px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .06), rgba(124, 58, 237, .05));
      border: 1px solid rgba(0, 212, 255, .14);
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px
    }

    .mc-training-hero h2 {
      font-size: 1.05rem;
      font-weight: 900;
      color: #e8eaf6;
      display: flex;
      align-items: center;
      gap: 9px
    }

    .mc-training-hero h2 svg {
      width: 19px;
      height: 19px;
      color: #00d4ff
    }

    .mc-training-hero p {
      font-size: .8rem;
      color: #5c6080;
      margin-top: 4px
    }

    .mc-count-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 15px;
      border-radius: 999px;
      background: rgba(0, 212, 255, .08);
      color: #00d4ff;
      font-size: .72rem;
      font-weight: 800;
      border: 1px solid rgba(0, 212, 255, .22)
    }

    .mc-training-toolbar {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 13px;
      padding: 16px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 11px;
      align-items: center
    }

    .mc-training-inp-wrap {
      position: relative
    }

    .mc-training-inp-wrap svg {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      color: #2e3048;
      pointer-events: none
    }

    .mc-training-inp {
      width: 100%;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 9px;
      padding: 10px 14px 10px 38px;
      font-size: .83rem;
      font-weight: 600;
      outline: none;
      background: rgba(255, 255, 255, .04);
      color: #e8eaf6;
      transition: .22s;
      font-family: inherit
    }

    .mc-training-inp::placeholder {
      color: #2e3048
    }

    .mc-training-inp:focus {
      border-color: rgba(0, 212, 255, .32);
      box-shadow: 0 0 0 3px rgba(0, 212, 255, .06)
    }

    .mc-training-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
      gap: 16px
    }

    .mc-training-card {
      background: rgba(255, 255, 255, .028);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 15px;
      padding: 20px;
      display: grid;
      gap: 13px;
      transition: .28s
    }

    .mc-training-card:hover {
      border-color: rgba(0, 212, 255, .18);
      background: rgba(0, 212, 255, .04);
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(0, 212, 255, .06)
    }

    .mc-training-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 11px;
      border-radius: 999px;
      background: rgba(0, 212, 255, .07);
      color: #00d4ff;
      font-size: .65rem;
      font-weight: 800;
      border: 1px solid rgba(0, 212, 255, .18);
      width: fit-content
    }

    .mc-training-card h3 {
      font-size: .92rem;
      font-weight: 800;
      color: #e8eaf6;
      line-height: 1.3
    }

    .mc-training-details {
      display: grid;
      gap: 7px;
      border-top: 1px solid rgba(255, 255, 255, .05);
      padding-top: 13px
    }

    .mc-training-detail {
      display: flex;
      gap: 7px;
      font-size: .77rem;
      color: #5c6080;
      line-height: 1.45
    }

    .mc-training-detail svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
      color: #00d4ff;
      margin-top: 2px
    }

    /* TOAST */
    #obj-toast {
      position: fixed;
      right: 24px;
      bottom: 24px;
      background: rgba(8, 10, 16, .97);
      backdrop-filter: blur(16px);
      color: #e8eaf6;
      padding: 13px 20px;
      border-radius: 13px;
      border: 1px solid rgba(0, 212, 255, .18);
      box-shadow: 0 0 36px rgba(0, 212, 255, .08), 0 8px 32px rgba(0, 0, 0, .6);
      opacity: 0;
      transform: translateY(14px) scale(.95);
      pointer-events: none;
      transition: all .32s cubic-bezier(.34, 1.56, .64, 1);
      font-size: .84rem;
      font-weight: 700;
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 10px
    }

    #obj-toast.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto
    }

    .toast-icon {
      width: 27px;
      height: 27px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .15), rgba(124, 58, 237, .15));
      border: 1px solid rgba(0, 212, 255, .28);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .toast-icon svg {
      width: 13px;
      height: 13px;
      color: #00d4ff
    }

    /* AI FAB */
    .mc-ai-fab {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 45;
      width: 58px;
      height: 58px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .14), rgba(124, 58, 237, .22));
      border: 1px solid rgba(0, 212, 255, .32);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 36px rgba(0, 212, 255, .16), 0 8px 30px rgba(0, 0, 0, .6);
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
      color: #00d4ff;
      font-family: inherit;
      backdrop-filter: blur(16px)
    }

    .mc-ai-fab:hover {
      transform: scale(1.1);
      box-shadow: 0 0 56px rgba(0, 212, 255, .3), 0 12px 40px rgba(0, 0, 0, .8)
    }

    .mc-ai-fab svg {
      width: 24px;
      height: 24px
    }

    .mc-fab-ring {
      position: absolute;
      inset: -9px;
      border-radius: 50%;
      border: 1px solid rgba(0, 212, 255, .18);
      animation: mcRing 2.5s ease-in-out infinite;
      pointer-events: none
    }

    .mc-fab-ring:nth-child(2) {
      animation-delay: .9s
    }

    @keyframes mcRing {

      0%,
      100% {
        opacity: .5;
        transform: scale(1)
      }

      50% {
        opacity: 0;
        transform: scale(1.45)
      }
    }

    .mc-fab-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: linear-gradient(135deg, #7c3aed, #5b21b6);
      color: #fff;
      font-size: .53rem;
      font-weight: 900;
      padding: 3px 7px;
      border-radius: 999px;
      letter-spacing: .06em;
      border: 1.5px solid rgba(255, 255, 255, .12)
    }

    /* AI PANEL */
    .mc-ai-panel {
      position: fixed;
      bottom: 96px;
      right: 28px;
      z-index: 46;
      width: 500px;
      max-height: calc(100vh - 136px);
      background: rgba(6, 7, 12, .98);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(0, 212, 255, .13);
      border-radius: 22px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .85), 0 0 50px rgba(0, 212, 255, .05);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      transform: translateY(24px) scale(.94);
      pointer-events: none;
      transition: all .4s cubic-bezier(.34, 1.56, .64, 1)
    }

    .mc-ai-panel.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto
    }

    .mc-ai-head {
      padding: 18px 22px 15px;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(180deg, rgba(0, 212, 255, .04), transparent);
      flex-shrink: 0
    }

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

    .mc-ai-head-ico {
      width: 41px;
      height: 41px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .14), rgba(124, 58, 237, .2));
      border: 1px solid rgba(0, 212, 255, .22);
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .mc-ai-head-ico svg {
      width: 19px;
      height: 19px;
      color: #00d4ff
    }

    .mc-ai-title {
      font-size: .92rem;
      font-weight: 800;
      color: #e8eaf6
    }

    .mc-ai-sub {
      font-size: .64rem;
      color: #5c6080;
      font-weight: 600;
      margin-top: 2px
    }

    .mc-ai-close {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .08);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .18s;
      color: #5c6080;
      font-family: inherit
    }

    .mc-ai-close:hover {
      background: rgba(255, 255, 255, .1);
      color: #e8eaf6
    }

    .mc-ai-close svg {
      width: 14px;
      height: 14px
    }

    .mc-ai-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 15px 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      min-height: 160px;
      max-height: 380px
    }

    .mc-ai-msg {
      display: flex;
      gap: 10px;
      animation: aiMsgIn .35s cubic-bezier(.34, 1.56, .64, 1)
    }

    @keyframes aiMsgIn {
      from {
        opacity: 0;
        transform: translateY(10px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .mc-ai-av {
      width: 31px;
      height: 31px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .mc-ai-av.user {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1)
    }

    .mc-ai-av.bot {
      background: linear-gradient(135deg, rgba(0, 212, 255, .14), rgba(124, 58, 237, .18));
      border: 1px solid rgba(0, 212, 255, .22)
    }

    .mc-ai-av svg {
      width: 14px;
      height: 14px;
      color: #7a7f96
    }

    .mc-ai-av.bot svg {
      color: #00d4ff
    }

    .mc-ai-msg-body {
      flex: 1;
      min-width: 0
    }

    .mc-ai-msg-name {
      font-size: .6rem;
      font-weight: 800;
      color: #2e3048;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .mc-ai-msg-text {
      font-size: .83rem;
      color: #b0b4cc;
      line-height: 1.55
    }

    .mc-ai-msg-time {
      font-size: .58rem;
      color: #2e3048;
      margin-top: 3px
    }

    .mc-ai-blks {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 7px
    }

    .mc-ai-blk {
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid;
      transition: .18s
    }

    .mc-ai-blk:hover {
      transform: translateY(-1px)
    }

    .mc-ai-blk-head {
      padding: 8px 12px;
      font-size: .57rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .1em;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .mc-ai-blk-head svg {
      width: 11px;
      height: 11px
    }

    .mc-ai-blk-body {
      padding: 10px 12px 11px;
      font-size: .81rem;
      line-height: 1.55
    }

    .mc-ai-blk-diag {
      border-color: rgba(251, 191, 36, .22);
      background: rgba(251, 191, 36, .04)
    }

    .mc-ai-blk-diag .mc-ai-blk-head {
      background: rgba(251, 191, 36, .07);
      color: #fbbf24
    }

    .mc-ai-blk-diag .mc-ai-blk-body {
      color: #b0b4cc
    }

    .mc-ai-blk-script {
      border-color: rgba(124, 58, 237, .28);
      background: rgba(124, 58, 237, .04)
    }

    .mc-ai-blk-script .mc-ai-blk-head {
      background: rgba(124, 58, 237, .09);
      color: #a78bfa
    }

    .mc-ai-blk-script .mc-ai-blk-body {
      color: #c0c2d4;
      font-weight: 600
    }

    .mc-ai-blk-quebra {
      border-color: rgba(0, 232, 124, .22);
      background: rgba(0, 232, 124, .04)
    }

    .mc-ai-blk-quebra .mc-ai-blk-head {
      background: rgba(0, 232, 124, .07);
      color: #00e87c
    }

    .mc-ai-blk-quebra .mc-ai-blk-body {
      color: #e8eaf6;
      font-weight: 700
    }

    .mc-ai-blk-raw {
      border-color: rgba(255, 255, 255, .07);
      background: rgba(255, 255, 255, .025)
    }

    .mc-ai-blk-raw .mc-ai-blk-body {
      color: #b0b4cc
    }

    .mc-ai-typing {
      display: flex;
      gap: 5px;
      padding: 7px 0
    }

    .mc-ai-typing span {
      width: 8px;
      height: 8px;
      background: #00d4ff;
      border-radius: 50%;
      animation: aiType 1.4s ease-in-out infinite;
      opacity: .35
    }

    .mc-ai-typing span:nth-child(2) {
      animation-delay: .2s
    }

    .mc-ai-typing span:nth-child(3) {
      animation-delay: .4s
    }

    @keyframes aiType {

      0%,
      60%,
      100% {
        transform: translateY(0);
        opacity: .35
      }

      30% {
        transform: translateY(-7px);
        opacity: 1
      }
    }

    .mc-ai-err {
      background: rgba(255, 51, 102, .06);
      border: 1px solid rgba(255, 51, 102, .18);
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .mc-ai-err p {
      font-size: .8rem;
      color: #ff7090;
      line-height: 1.4
    }

    .mc-ai-err-retry {
      width: fit-content;
      padding: 7px 15px;
      background: rgba(255, 51, 102, .12);
      color: #ff3366;
      border: 1px solid rgba(255, 51, 102, .28);
      border-radius: 8px;
      cursor: pointer;
      font-weight: 700;
      font-size: .74rem;
      transition: .18s;
      font-family: inherit
    }

    .mc-ai-err-retry:hover {
      background: rgba(255, 51, 102, .22)
    }

    .mc-ai-foot {
      padding: 13px 20px 17px;
      border-top: 1px solid rgba(255, 255, 255, .05);
      flex-shrink: 0
    }

    .mc-ai-inp-row {
      display: flex;
      gap: 8px
    }

    .mc-ai-inp {
      flex: 1;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 12px;
      padding: 11px 15px;
      font-size: .86rem;
      font-weight: 600;
      outline: none;
      background: rgba(255, 255, 255, .04);
      color: #e8eaf6;
      transition: .22s;
      font-family: inherit
    }

    .mc-ai-inp::placeholder {
      color: #2e3048;
      font-weight: 500
    }

    .mc-ai-inp:focus {
      border-color: rgba(0, 212, 255, .32);
      box-shadow: 0 0 0 3px rgba(0, 212, 255, .07)
    }

    .mc-ai-inp:disabled {
      opacity: .35;
      cursor: not-allowed
    }

    .mc-ai-send {
      width: 46px;
      height: 46px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .18), rgba(124, 58, 237, .22));
      border: 1px solid rgba(0, 212, 255, .28);
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #00d4ff;
      transition: .22s;
      font-family: inherit;
      box-shadow: 0 4px 14px rgba(0, 212, 255, .1)
    }

    .mc-ai-send:hover:not(:disabled) {
      transform: scale(1.06);
      box-shadow: 0 6px 22px rgba(0, 212, 255, .22)
    }

    .mc-ai-send:disabled {
      opacity: .28;
      cursor: not-allowed;
      transform: none
    }

    .mc-ai-send svg {
      width: 17px;
      height: 17px
    }

    .mc-ai-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30px 20px;
      text-align: center;
      gap: 12px
    }

    .mc-ai-empty-ico {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, rgba(0, 212, 255, .1), rgba(124, 58, 237, .1));
      border: 1px solid rgba(0, 212, 255, .18);
      border-radius: 17px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .mc-ai-empty-ico svg {
      width: 24px;
      height: 24px;
      color: #00d4ff
    }

    .mc-ai-empty p {
      font-size: .8rem;
      color: #5c6080;
      line-height: 1.5;
      max-width: 300px
    }

    .mc-ai-empty strong {
      color: #7a7f96
    }

    .mc-ai-sug {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(0, 212, 255, .07);
      color: #00d4ff;
      border: 1px solid rgba(0, 212, 255, .18);
      border-radius: 999px;
      padding: 8px 17px;
      cursor: pointer;
      font-weight: 700;
      font-size: .76rem;
      box-shadow: 0 4px 14px rgba(0, 212, 255, .08);
      transition: .22s;
      margin-top: 8px;
      width: 100%;
      justify-content: center;
      font-family: inherit
    }

    .mc-ai-sug:hover {
      background: rgba(0, 212, 255, .13);
      transform: translateY(-1px)
    }

    .mc-ai-sug svg {
      width: 14px;
      height: 14px
    }

    .hidden {
      display: none !important
    }

    /* RESPONSIVE */
    @media(max-width:1100px) {
      .mc-layout {
        grid-template-columns: 1fr
      }

      .mc-aside-sticky {
        position: static
      }

      .mc-blocks {
        grid-template-columns: 1fr
      }

      .mc-support {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:720px) {
      .mc-header-inner {
        flex-direction: column;
        align-items: flex-start
      }

      .mc-controls {
        width: 100%
      }

      .mc-blocks {
        grid-template-columns: 1fr
      }

      .mc-page {
        padding: 14px 14px 60px
      }

      .mc-ai-panel {
        width: calc(100vw - 24px);
        right: 12px;
        bottom: 76px
      }

      .mc-training-toolbar {
        grid-template-columns: 1fr
      }
    }

    :focus-visible {
      outline: 2px solid #00d4ff;
      outline-offset: 2px
    }

    .bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: .35;
      animation: orbFloat 20s ease-in-out infinite
    }

    .bg-orb:nth-child(1) {
      width: 500px;
      height: 500px;
      background: var(--g-200);
      top: -10%;
      left: -5%;
      animation-delay: 0s
    }

    .bg-orb:nth-child(2) {
      width: 400px;
      height: 400px;
      background: var(--o-200);
      bottom: -10%;
      right: -5%;
      animation-delay: -7s
    }

    .bg-orb:nth-child(3) {
      width: 300px;
      height: 300px;
      background: var(--g-100);
      top: 40%;
      left: 50%;
      animation-delay: -14s
    }

    @keyframes orbFloat {

      0%,
      100% {
        transform: translate(0, 0) scale(1)
      }

      33% {
        transform: translate(30px, -40px) scale(1.05)
      }

      66% {
        transform: translate(-20px, 30px) scale(.95)
      }
    }

    .app-wrapper {
      position: relative;
      z-index: 1
    }

    .top-bar {
      background: linear-gradient(135deg, var(--o-500), #dc2626);
      color: #fff;
      text-align: center;
      padding: 10px 20px;
      font-weight: 700;
      font-size: .78rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      position: relative;
      overflow: hidden
    }

    .top-bar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, .06) 10px, rgba(255, 255, 255, .06) 20px)
    }

    .top-bar span {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .obj-header {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(6, 78, 59, .92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .header-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px
    }

    .brand-stack {
      display: flex;
      align-items: center;
      gap: 16px
    }

    .brand-logo {
      width: 46px;
      height: 46px;
      background: linear-gradient(135deg, var(--g-400), var(--g-600));
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(16, 185, 129, .3);
      flex-shrink: 0
    }

    .brand-logo svg {
      width: 24px;
      height: 24px;
      color: #fff
    }

    .brand-title {
      font-size: 1.15rem;
      font-weight: 900;
      letter-spacing: -.01em;
      line-height: 1.1
    }

    .brand-subtitle {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: .75;
      margin-top: 2px
    }

    .brand-claim {
      display: none;
      font-size: .82rem;
      font-weight: 600;
      opacity: .85;
      border-left: 2px solid rgba(255, 255, 255, .15);
      padding-left: 18px;
      max-width: 300px;
      line-height: 1.35
    }

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

    .stat-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--r-full);
      padding: 8px 14px;
      font-size: .74rem;
      font-weight: 700;
      backdrop-filter: blur(8px)
    }

    .stat-pill svg {
      width: 14px;
      height: 14px;
      opacity: .7
    }

    .manager-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: var(--r-full);
      padding: 8px 14px;
      font-size: .74rem;
      font-weight: 700;
      backdrop-filter: blur(8px)
    }

    .manager-pill svg {
      width: 14px;
      height: 14px;
      opacity: .7
    }

    .nav-bar {
      background: rgba(255, 255, 255, .8);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--s-200);
      position: sticky;
      top: 118px;
      z-index: 35
    }

    .nav-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 10px 24px;
      display: flex;
      gap: 8px
    }

    .tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 2px solid transparent;
      background: var(--s-100);
      color: var(--s-600);
      border-radius: var(--r-full);
      padding: 10px 22px;
      cursor: pointer;
      font-weight: 700;
      font-size: .86rem;
      transition: all .25s var(--ease);
      user-select: none;
      font-family: inherit
    }

    .tab-btn svg {
      width: 16px;
      height: 16px
    }

    .tab-btn:hover {
      background: var(--g-50);
      color: var(--g-700)
    }

    .tab-btn.active {
      background: var(--g-700);
      color: #fff;
      border-color: var(--g-700);
      box-shadow: 0 4px 16px rgba(5, 150, 105, .3)
    }

    .page {
      max-width: 1400px;
      margin: 0 auto;
      padding: 24px 24px 60px
    }

    .call-layout {
      display: grid;
      grid-template-columns: 440px 1fr;
      gap: 24px;
      align-items: start
    }

    #module-obj .panel {
      background: rgba(255, 255, 255, .85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(226, 232, 240, .7);
      border-radius: var(--r-lg);
      box-shadow: var(--sh-lg);
      overflow: hidden
    }

    #module-obj .panel-solid {
      background: #fff;
      backdrop-filter: none
    }

    .panel-pad {
      padding: 22px
    }

    .search-aside {
      position: sticky;
      top: 180px
    }

    .search-aside .panel {
      display: flex;
      flex-direction: column
    }

    .search-header {
      padding: 22px 22px 0
    }

    .search-hero {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 6px
    }

    .search-icon-circle {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, var(--g-500), var(--g-700));
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 20px rgba(16, 185, 129, .25);
      flex-shrink: 0
    }

    .search-icon-circle svg {
      width: 22px;
      height: 22px;
      color: #fff
    }

    .search-hero-text h2 {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--s-900);
      line-height: 1.2
    }

    .search-hero-text p {
      font-size: .78rem;
      color: var(--s-500);
      margin-top: 2px
    }

    .search-body {
      padding: 16px 22px 22px
    }

    .search-box {
      position: relative;
      margin-bottom: 10px
    }

    .search-input {
      width: 100%;
      border: 2px solid var(--s-200);
      border-radius: var(--r-md);
      padding: 15px 44px 15px 44px;
      font-size: .92rem;
      font-weight: 600;
      outline: none;
      background: rgba(248, 250, 252, .8);
      color: var(--s-900);
      transition: all .25s var(--ease)
    }

    .search-input::placeholder {
      color: var(--s-400);
      font-weight: 500
    }

    .search-input:focus {
      border-color: var(--g-500);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(16, 185, 129, .1), var(--sh-md)
    }

    .search-icon-left {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--s-400);
      pointer-events: none;
      transition: color .2s
    }

    .search-icon-left svg {
      width: 18px;
      height: 18px
    }

    .search-input:focus~.search-icon-left {
      color: var(--g-500)
    }

    .search-clear {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: var(--s-200);
      color: var(--s-600);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      transition: .15s
    }

    .search-clear:hover {
      background: var(--s-300)
    }

    .search-clear.visible {
      display: inline-flex
    }

    .search-clear svg {
      width: 14px;
      height: 14px
    }

    .search-meta {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      font-size: .74rem;
      color: var(--s-500);
      margin-bottom: 16px;
      font-weight: 600
    }

    .section-label-sm {
      font-size: .7rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--s-500);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .section-label-sm svg {
      width: 14px;
      height: 14px
    }

    .chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 18px
    }

    .chip {
      background: rgba(241, 245, 249, .8);
      border: 1.5px solid var(--s-200);
      color: var(--s-700);
      border-radius: var(--r-full);
      padding: 7px 14px;
      cursor: pointer;
      font-size: .76rem;
      font-weight: 700;
      transition: all .2s var(--ease);
      user-select: none
    }

    .chip:hover {
      border-color: var(--g-400);
      color: var(--g-700);
      background: var(--g-50)
    }

    .chip.active {
      background: var(--g-600);
      color: #fff;
      border-color: var(--g-600);
      box-shadow: 0 2px 10px rgba(5, 150, 105, .25)
    }

    .quick-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .quick-btn {
      border: 1.5px solid var(--s-200);
      border-radius: var(--r-md);
      background: rgba(248, 250, 252, .6);
      padding: 13px;
      text-align: left;
      cursor: pointer;
      transition: all .25s var(--ease);
      position: relative;
      overflow: hidden;
      font-family: inherit
    }

    .quick-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(180deg, var(--g-400), var(--g-600));
      opacity: 0;
      transition: opacity .2s
    }

    .quick-btn:hover {
      border-color: var(--g-400);
      transform: translateY(-2px);
      box-shadow: var(--sh-lg);
      background: #fff
    }

    .quick-btn:hover::before {
      opacity: 1
    }

    .quick-btn strong {
      display: block;
      font-size: .8rem;
      color: var(--s-800);
      margin-bottom: 3px;
      line-height: 1.3
    }

    .quick-btn span {
      display: block;
      font-size: .68rem;
      color: var(--s-500);
      font-weight: 600
    }

    .suggestions-panel {
      margin: 12px 22px 22px;
      border: 1.5px solid var(--s-200);
      border-radius: var(--r-md);
      overflow: hidden;
      background: #fff;
      display: none;
      box-shadow: var(--sh-xl)
    }

    .suggestions-panel.visible {
      display: block
    }

    .suggestion-item {
      width: 100%;
      border: none;
      background: #fff;
      text-align: left;
      padding: 13px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid var(--s-100);
      transition: .15s;
      font-family: inherit
    }

    .suggestion-item:last-child {
      border-bottom: none
    }

    .suggestion-item:hover,
    .suggestion-item.active {
      background: var(--g-50)
    }

    .suggestion-rank {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--s-100);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .72rem;
      font-weight: 800;
      color: var(--s-600);
      flex-shrink: 0;
      transition: all .2s
    }

    .suggestion-item.active .suggestion-rank,
    .suggestion-item:hover .suggestion-rank {
      background: var(--g-500);
      color: #fff;
      box-shadow: 0 2px 8px rgba(16, 185, 129, .3)
    }

    .suggestion-content {
      flex: 1;
      min-width: 0
    }

    .suggestion-title {
      font-size: .86rem;
      font-weight: 700;
      color: var(--s-800);
      line-height: 1.3
    }

    .suggestion-meta {
      font-size: .7rem;
      color: var(--s-500);
      font-weight: 600;
      margin-top: 2px
    }

    .suggestion-score {
      font-size: .68rem;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: var(--r-full);
      background: var(--g-50);
      color: var(--g-700);
      white-space: nowrap
    }

    .result-shell {
      display: grid;
      gap: 24px
    }

    #module-obj .empty-state {
      background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(236, 253, 245, .6));
      border: 2px dashed var(--s-200);
      border-radius: var(--r-xl);
      padding: 48px 32px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      backdrop-filter: blur(12px)
    }

    #module-obj .empty-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--g-100), var(--g-200));
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
      animation: floatIcon 3s ease-in-out infinite
    }

    #module-obj .empty-icon svg {
      width: 36px;
      height: 36px;
      color: var(--g-600)
    }

    @keyframes floatIcon {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-8px)
      }
    }

    #module-obj .empty-state h2 {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--s-900)
    }

    #module-obj .empty-state>p {
      color: var(--s-500);
      max-width: 500px;
      font-size: .9rem;
      line-height: 1.5
    }

    .empty-steps {
      display: grid;
      gap: 12px;
      width: 100%;
      max-width: 480px;
      text-align: left;
      margin-top: 4px
    }

    .empty-step {
      display: flex;
      align-items: center;
      gap: 14px;
      background: rgba(255, 255, 255, .8);
      border: 1.5px solid var(--s-200);
      border-radius: var(--r-md);
      padding: 16px 18px;
      transition: all .3s var(--ease)
    }

    .empty-step:hover {
      border-color: var(--g-300);
      transform: translateX(4px)
    }

    .step-num {
      width: 34px;
      height: 34px;
      background: linear-gradient(135deg, var(--g-500), var(--g-700));
      color: #fff;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .84rem;
      font-weight: 800;
      flex-shrink: 0;
      box-shadow: 0 3px 10px rgba(5, 150, 105, .25)
    }

    .step-text {
      font-size: .86rem;
      color: var(--s-700);
      font-weight: 600
    }

    .result-card {
      display: grid;
      gap: 24px;
      animation: revealUp .5s var(--ease-spring)
    }

    @keyframes revealUp {
      from {
        opacity: 0;
        transform: translateY(20px) scale(.98)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    .result-main-panel {
      display: grid;
      gap: 22px
    }

    .result-header {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap
    }

    .result-header-text h2 {
      font-size: 1.4rem;
      font-weight: 900;
      line-height: 1.2;
      color: var(--s-900);
      background: linear-gradient(135deg, var(--s-900), var(--s-700));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .result-category {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      padding: 5px 12px;
      background: var(--g-50);
      border: 1px solid var(--g-200);
      border-radius: var(--r-full);
      font-size: .74rem;
      font-weight: 800;
      color: var(--g-700)
    }

    .result-category svg {
      width: 12px;
      height: 12px
    }

    .score-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--g-50), var(--g-100));
      border: 1.5px solid var(--g-200);
      border-radius: var(--r-full);
      padding: 10px 16px;
      font-size: .78rem;
      font-weight: 800;
      color: var(--g-800);
      white-space: nowrap;
      flex-shrink: 0
    }

    .score-dot {
      width: 8px;
      height: 8px;
      background: var(--g-500);
      border-radius: 50%;
      animation: pulse 2s infinite;
      box-shadow: 0 0 8px rgba(16, 185, 129, .4)
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .5;
        transform: scale(.8)
      }
    }

    .response-block {
      background: linear-gradient(135deg, rgba(236, 253, 245, .8), rgba(209, 250, 229, .5));
      border: 1.5px solid var(--g-200);
      border-left: 6px solid var(--g-500);
      border-radius: var(--r-md);
      padding: 22px;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(8px)
    }

    .response-block::after {
      content: '';
      position: absolute;
      top: -20px;
      right: -20px;
      width: 80px;
      height: 80px;
      background: var(--g-200);
      border-radius: 50%;
      opacity: .3
    }

    .response-label {
      font-size: .68rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--g-700);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .response-label svg {
      width: 14px;
      height: 14px
    }

    .response-text {
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1.5;
      color: var(--s-900);
      position: relative;
      z-index: 1
    }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    .section-card {
      background: rgba(255, 255, 255, .7);
      border: 1.5px solid var(--s-200);
      border-radius: var(--r-md);
      padding: 20px;
      transition: all .25s var(--ease);
      backdrop-filter: blur(8px)
    }

    .section-card:hover {
      box-shadow: var(--sh-lg);
      border-color: var(--s-300)
    }

    .card-label {
      font-size: .68rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .card-label svg {
      width: 14px;
      height: 14px
    }

    .card-label.green {
      color: var(--g-700)
    }

    .card-label.orange {
      color: var(--o-600)
    }

    .card-label.slate {
      color: var(--s-600)
    }

    .card-label.dark {
      color: var(--s-800)
    }

    .hook-card {
      background: linear-gradient(135deg, rgba(255, 247, 237, .8), rgba(254, 215, 170, .4));
      border-color: var(--o-300) !important;
      border-left: 6px solid var(--o-500)
    }

    .hook-card p {
      font-size: .9rem;
      color: var(--s-800);
      font-weight: 600;
      line-height: 1.5
    }

    .next-question {
      font-size: .96rem;
      font-weight: 800;
      color: var(--s-900);
      line-height: 1.45
    }

    .strategy-text {
      font-size: .88rem;
      color: var(--s-700);
      line-height: 1.55
    }

    .tactic-list {
      padding-left: 22px;
      display: grid;
      gap: 8px
    }

    .tactic-list li {
      font-size: .86rem;
      color: var(--s-700);
      line-height: 1.45
    }

    .tactic-list li::marker {
      color: var(--g-500)
    }

    .support-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    .support-highlight {
      background: linear-gradient(135deg, rgba(209, 250, 229, .6), rgba(167, 243, 208, .3));
      border: 1.5px solid var(--g-200);
      border-left: 6px solid var(--g-600);
      border-radius: var(--r-md);
      padding: 20px;
      backdrop-filter: blur(8px)
    }

    .support-highlight .card-label {
      color: var(--g-800)
    }

    .support-highlight p {
      font-size: .86rem;
      color: var(--s-800);
      line-height: 1.55
    }

    .method-list {
      padding-left: 22px;
      display: grid;
      gap: 8px
    }

    .method-list li {
      font-size: .84rem;
      color: var(--s-700);
      line-height: 1.45
    }

    .method-list li::marker {
      color: var(--g-500)
    }

    .actions-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .action-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1.5px solid var(--s-200);
      border-radius: var(--r-md);
      background: rgba(255, 255, 255, .8);
      padding: 12px 20px;
      cursor: pointer;
      font-weight: 700;
      font-size: .84rem;
      transition: all .25s var(--ease);
      color: var(--s-800);
      backdrop-filter: blur(8px);
      font-family: inherit
    }

    .action-btn svg {
      width: 16px;
      height: 16px
    }

    .action-btn:hover {
      border-color: var(--g-400);
      transform: translateY(-2px);
      box-shadow: var(--sh-lg)
    }

    .action-btn.primary {
      background: linear-gradient(135deg, var(--g-600), var(--g-700));
      border-color: var(--g-700);
      color: #fff;
      box-shadow: 0 4px 16px rgba(5, 150, 105, .25)
    }

    .action-btn.primary:hover {
      box-shadow: 0 8px 24px rgba(5, 150, 105, .35)
    }

    .micro-copy {
      color: var(--s-500);
      font-size: .74rem;
      font-weight: 500;
      margin-top: 6px
    }

    .bottom-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px
    }

    .recent-panel {
      display: grid;
      gap: 12px
    }

    .recent-list {
      display: grid;
      gap: 6px
    }

    .recent-item {
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1.5px solid var(--s-200);
      background: rgba(255, 255, 255, .6);
      border-radius: var(--r-sm);
      padding: 12px 14px;
      cursor: pointer;
      transition: all .25s var(--ease);
      font: inherit;
      text-align: left;
      width: 100%
    }

    .recent-item:hover {
      border-color: var(--g-400);
      background: var(--g-50);
      transform: translateX(4px);
      box-shadow: var(--sh-md)
    }

    .recent-dot {
      width: 8px;
      height: 8px;
      background: linear-gradient(135deg, var(--g-400), var(--g-600));
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 6px rgba(16, 185, 129, .3)
    }

    .recent-item-text strong {
      display: block;
      font-size: .84rem;
      color: var(--s-800);
      font-weight: 700
    }

    .recent-item-text span {
      font-size: .7rem;
      color: var(--s-500);
      font-weight: 600
    }

    .helper-card {
      background: linear-gradient(160deg, var(--s-800), var(--s-900));
      color: #fff;
      border-radius: var(--r-xl);
      padding: 26px;
      border: 1px solid rgba(255, 255, 255, .06);
      position: relative;
      overflow: hidden
    }

    .helper-card::before {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 120px;
      height: 120px;
      background: linear-gradient(135deg, var(--g-500), var(--g-700));
      border-radius: 50%;
      opacity: .08
    }

    .helper-card h3 {
      font-size: .92rem;
      font-weight: 800;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .helper-card h3 svg {
      width: 18px;
      height: 18px;
      color: var(--g-400)
    }

    .helper-card ul {
      padding-left: 20px;
      display: grid;
      gap: 12px
    }

    .helper-card li {
      font-size: .82rem;
      color: rgba(255, 255, 255, .8);
      line-height: 1.5
    }

    .helper-card li::marker {
      color: var(--g-400)
    }

    .training-layout {
      display: grid;
      gap: 24px
    }

    .training-hero {
      background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(236, 253, 245, .7));
      border: 1.5px solid var(--g-200);
      backdrop-filter: blur(12px)
    }

    .training-hero-inner {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap
    }

    .training-hero h2 {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--s-900);
      display: flex;
      align-items: center;
      gap: 10px
    }

    .training-hero h2 svg {
      width: 22px;
      height: 22px;
      color: var(--g-600)
    }

    .training-hero p {
      font-size: .84rem;
      color: var(--s-500);
      margin-top: 4px
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: var(--r-full);
      background: linear-gradient(135deg, var(--g-600), var(--g-700));
      color: #fff;
      font-size: .74rem;
      font-weight: 800;
      box-shadow: 0 4px 12px rgba(5, 150, 105, .25)
    }

    .pill svg {
      width: 14px;
      height: 14px
    }

    .training-toolbar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center
    }

    .training-search {
      width: 100%;
      border: 2px solid var(--s-200);
      border-radius: var(--r-md);
      padding: 12px 16px 12px 40px;
      font-size: .88rem;
      font-weight: 600;
      outline: none;
      background: rgba(255, 255, 255, .8);
      color: var(--s-900);
      transition: all .25s var(--ease)
    }

    .training-search:focus {
      border-color: var(--g-500);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(16, 185, 129, .1)
    }

    .training-search-wrap {
      position: relative
    }

    .training-search-wrap svg {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      color: var(--s-400);
      pointer-events: none
    }

    .training-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 18px
    }

    .training-card {
      background: rgba(255, 255, 255, .85);
      border: 1.5px solid var(--s-200);
      border-radius: var(--r-lg);
      padding: 22px;
      display: grid;
      gap: 14px;
      transition: all .3s var(--ease);
      backdrop-filter: blur(12px)
    }

    .training-card:hover {
      border-color: var(--g-400);
      box-shadow: var(--sh-xl);
      transform: translateY(-3px)
    }

    .training-card .pill {
      background: var(--g-50);
      color: var(--g-700);
      border: 1px solid var(--g-200);
      box-shadow: none;
      width: fit-content
    }

    .training-card h3 {
      font-size: 1rem;
      font-weight: 800;
      color: var(--s-900);
      line-height: 1.3
    }

    .training-card p {
      font-size: .82rem;
      color: var(--s-700);
      line-height: 1.5
    }

    .training-card p strong {
      color: var(--s-800)
    }

    .training-card-details {
      display: grid;
      gap: 8px;
      border-top: 1px solid var(--s-100);
      padding-top: 14px;
      margin-top: 2px
    }

    .training-detail {
      display: flex;
      gap: 8px;
      font-size: .8rem;
      color: var(--s-600);
      line-height: 1.4
    }

    .training-detail svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: var(--g-500);
      margin-top: 2px
    }

    #obj-toast {
      position: fixed;
      right: 24px;
      bottom: 24px;
      background: linear-gradient(135deg, var(--s-800), var(--s-900));
      color: #fff;
      padding: 14px 22px;
      border-radius: var(--r-md);
      border: 1px solid rgba(255, 255, 255, .08);
      box-shadow: var(--sh-xl);
      opacity: 0;
      transform: translateY(16px) scale(.95);
      pointer-events: none;
      transition: all .35s var(--ease-spring);
      font-size: .86rem;
      font-weight: 700;
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 10px
    }

    #obj-toast.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto
    }

    .toast-icon {
      width: 30px;
      height: 30px;
      background: linear-gradient(135deg, var(--g-400), var(--g-600));
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .toast-icon svg {
      width: 16px;
      height: 16px;
      color: #fff
    }

    .hidden {
      display: none !important
    }

    .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    .ai-fab {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 45;
      width: 62px;
      height: 62px;
      background: linear-gradient(135deg, #059669, #047857);
      border: 3px solid rgba(255, 255, 255, .25);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 32px rgba(5, 150, 105, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
      color: #fff;
      font-family: inherit
    }

    .ai-fab:hover {
      transform: scale(1.1);
      box-shadow: 0 12px 40px rgba(5, 150, 105, .55)
    }

    .ai-fab svg {
      width: 28px;
      height: 28px;
      position: relative;
      z-index: 1
    }

    .ai-fab-badge {
      position: absolute;
      top: -3px;
      right: -3px;
      background: linear-gradient(135deg, #f97316, #ea580c);
      color: #fff;
      font-size: .58rem;
      font-weight: 900;
      padding: 3px 8px;
      border-radius: 999px;
      letter-spacing: .06em;
      border: 2px solid rgba(255, 255, 255, .3);
      box-shadow: 0 2px 8px rgba(234, 88, 12, .4)
    }

    .ai-fab-ring {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 2px solid rgba(16, 185, 129, .4);
      animation: aiRing 2.5s ease-in-out infinite;
      pointer-events: none
    }

    .ai-fab-ring:nth-child(2) {
      animation-delay: .8s
    }

    @keyframes aiRing {

      0%,
      100% {
        opacity: .7;
        transform: scale(1)
      }

      50% {
        opacity: 0;
        transform: scale(1.35)
      }
    }

    .ai-panel {
      position: fixed;
      bottom: 100px;
      right: 28px;
      z-index: 46;
      width: 480px;
      max-height: calc(100vh - 140px);
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1.5px solid var(--s-200);
      border-radius: 24px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .12), 0 0 0 1px rgba(255, 255, 255, .5) inset;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      transform: translateY(24px) scale(.94);
      pointer-events: none;
      transition: all .4s cubic-bezier(.34, 1.56, .64, 1)
    }

    .ai-panel.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto
    }

    .ai-panel-head {
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--s-100);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(180deg, rgba(236, 253, 245, .4), transparent);
      flex-shrink: 0
    }

    .ai-panel-head-left {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .ai-head-icon {
      width: 46px;
      height: 46px;
      background: linear-gradient(135deg, #059669, #047857);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(5, 150, 105, .3)
    }

    .ai-head-icon svg {
      width: 24px;
      height: 24px;
      color: #fff
    }

    .ai-head-title {
      font-size: 1.02rem;
      font-weight: 800;
      color: var(--s-900)
    }

    .ai-head-sub {
      font-size: .72rem;
      color: var(--s-500);
      font-weight: 600;
      margin-top: 2px
    }

    .ai-panel-close {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--s-100);
      border: 1.5px solid var(--s-200);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .2s;
      color: var(--s-600);
      font-family: inherit
    }

    .ai-panel-close:hover {
      background: var(--s-200);
      color: var(--s-800)
    }

    .ai-panel-close svg {
      width: 16px;
      height: 16px
    }

    .ai-messages {
      flex: 1;
      overflow-y: auto;
      padding: 18px 24px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-height: 180px;
      max-height: 400px
    }

    .ai-msg {
      display: flex;
      gap: 12px;
      animation: aiMsgIn .35s cubic-bezier(.34, 1.56, .64, 1)
    }

    @keyframes aiMsgIn {
      from {
        opacity: 0;
        transform: translateY(10px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .ai-msg-av {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: .72rem;
      font-weight: 900
    }

    .ai-msg-av.user {
      background: linear-gradient(135deg, var(--s-600), var(--s-800));
      color: #fff
    }

    .ai-msg-av.bot {
      background: linear-gradient(135deg, #059669, #047857);
      color: #fff
    }

    .ai-msg-av svg {
      width: 16px;
      height: 16px
    }

    .ai-msg-body {
      flex: 1;
      min-width: 0
    }

    .ai-msg-name {
      font-size: .68rem;
      font-weight: 800;
      color: var(--s-500);
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .ai-msg-text {
      font-size: .86rem;
      color: var(--s-800);
      line-height: 1.55
    }

    .ai-msg-time {
      font-size: .62rem;
      color: var(--s-400);
      margin-top: 4px
    }

    .ai-blocks {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 8px
    }

    .ai-blk {
      border-radius: 12px;
      overflow: hidden;
      border: 1.5px solid;
      transition: all .2s
    }

    .ai-blk:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
    }

    .ai-blk-head {
      padding: 9px 14px;
      font-size: .66rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .ai-blk-head svg {
      width: 13px;
      height: 13px
    }

    .ai-blk-body {
      padding: 10px 14px 12px;
      font-size: .84rem;
      line-height: 1.55
    }

    .ai-blk-meaning {
      border-color: #fed7aa;
      background: rgba(255, 247, 237, .4)
    }

    .ai-blk-meaning .ai-blk-head {
      background: rgba(255, 237, 213, .7);
      color: #c2410c
    }

    .ai-blk-meaning .ai-blk-body {
      color: var(--s-800)
    }

    .ai-blk-strategy {
      border-color: #a7f3d0;
      background: rgba(236, 253, 245, .4)
    }

    .ai-blk-strategy .ai-blk-head {
      background: rgba(209, 250, 229, .6);
      color: #047857
    }

    .ai-blk-strategy .ai-blk-body {
      color: var(--s-800)
    }

    .ai-blk-reply {
      border-color: #6ee7b7;
      background: rgba(209, 250, 229, .3)
    }

    .ai-blk-reply .ai-blk-head {
      background: rgba(167, 243, 208, .5);
      color: #065f46
    }

    .ai-blk-reply .ai-blk-body {
      color: var(--s-900);
      font-weight: 600;
      font-size: .88rem
    }

    .ai-blk-next {
      border-color: var(--s-300);
      background: rgba(241, 245, 249, .5)
    }

    .ai-blk-next .ai-blk-head {
      background: rgba(226, 232, 240, .5);
      color: var(--s-700)
    }

    .ai-blk-next .ai-blk-body {
      color: var(--s-900);
      font-weight: 700
    }

    .ai-typing {
      display: flex;
      gap: 5px;
      padding: 8px 0
    }

    .ai-typing span {
      width: 9px;
      height: 9px;
      background: var(--g-500);
      border-radius: 50%;
      animation: aiType 1.4s ease-in-out infinite
    }

    .ai-typing span:nth-child(2) {
      animation-delay: .2s
    }

    .ai-typing span:nth-child(3) {
      animation-delay: .4s
    }

    @keyframes aiType {

      0%,
      60%,
      100% {
        transform: translateY(0);
        opacity: .3
      }

      30% {
        transform: translateY(-8px);
        opacity: 1
      }
    }

    .ai-err {
      background: #fef2f2;
      border: 1.5px solid #fecaca;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .ai-err p {
      font-size: .84rem;
      color: #991b1b;
      line-height: 1.4
    }

    .ai-err-retry {
      width: fit-content;
      padding: 8px 18px;
      background: linear-gradient(135deg, #dc2626, #b91c1c);
      color: #fff;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 700;
      font-size: .8rem;
      transition: .2s;
      font-family: inherit
    }

    .ai-err-retry:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(185, 28, 28, .3)
    }

    .ai-panel-foot {
      padding: 16px 24px 20px;
      border-top: 1px solid var(--s-100);
      background: linear-gradient(0deg, rgba(248, 250, 252, .5), transparent);
      flex-shrink: 0
    }

    .ai-input-row {
      display: flex;
      gap: 10px
    }

    .ai-input {
      flex: 1;
      border: 2px solid var(--s-200);
      border-radius: 14px;
      padding: 13px 18px;
      font-size: .9rem;
      font-weight: 600;
      outline: none;
      background: rgba(248, 250, 252, .6);
      color: var(--s-900);
      transition: all .25s var(--ease)
    }

    .ai-input::placeholder {
      color: var(--s-400);
      font-weight: 500
    }

    .ai-input:focus {
      border-color: #059669;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(5, 150, 105, .1)
    }

    .ai-input:disabled {
      opacity: .5;
      cursor: not-allowed
    }

    .ai-send {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #059669, #047857);
      border: none;
      border-radius: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      transition: all .25s cubic-bezier(.34, 1.56, .64, 1);
      box-shadow: 0 4px 16px rgba(5, 150, 105, .3);
      font-family: inherit
    }

    .ai-send:hover:not(:disabled) {
      transform: scale(1.06);
      box-shadow: 0 6px 24px rgba(5, 150, 105, .4)
    }

    .ai-send:disabled {
      opacity: .4;
      cursor: not-allowed;
      transform: none
    }

    .ai-send svg {
      width: 20px;
      height: 20px
    }

    .ai-empty-msg {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 36px 24px;
      text-align: center;
      gap: 14px
    }

    .ai-empty-icon {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, var(--g-100), var(--g-200));
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .ai-empty-icon svg {
      width: 30px;
      height: 30px;
      color: #059669
    }

    .ai-empty-msg p {
      font-size: .86rem;
      color: var(--s-500);
      line-height: 1.5;
      max-width: 320px
    }

    .ai-empty-msg strong {
      color: var(--s-700)
    }

    .ai-search-suggest {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, #059669, #047857);
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 9px 18px;
      cursor: pointer;
      font-weight: 700;
      font-size: .82rem;
      box-shadow: 0 4px 16px rgba(5, 150, 105, .3);
      transition: all .25s var(--ease);
      margin-top: 10px;
      width: 100%;
      justify-content: center;
      font-family: inherit
    }

    .ai-search-suggest:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(5, 150, 105, .4)
    }

    .ai-search-suggest svg {
      width: 16px;
      height: 16px
    }

    @media(min-width:1100px) {
      .brand-claim {
        display: block
      }
    }

    @media(max-width:1080px) {
      .call-layout {
        grid-template-columns: 1fr
      }

      .search-aside {
        position: static
      }

      .two-col,
      .support-grid,
      .bottom-row {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:720px) {
      .header-inner {
        flex-wrap: wrap
      }

      .brand-claim {
        display: none
      }

      .header-right {
        width: 100%;
        justify-content: flex-start
      }

      .quick-grid {
        grid-template-columns: 1fr
      }

      .search-input {
        font-size: .88rem
      }

      .response-text {
        font-size: 1rem
      }

      .page {
        padding: 16px 16px 40px
      }

      .nav-inner {
        padding: 8px 16px
      }

      .result-header {
        flex-direction: column
      }

      .stat-pill {
        display: none
      }
    }

    @media(max-width:720px) {
      .ai-panel {
        width: calc(100vw - 24px);
        right: 12px;
        bottom: 90px;
        max-height: calc(100vh - 110px);
        border-radius: 20px
      }

      .ai-fab {
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px
      }

      .ai-fab svg {
        width: 24px;
        height: 24px
      }

      .ai-messages {
        padding: 14px 16px;
        max-height: 320px
      }

      .ai-panel-head,
      .ai-panel-foot {
        padding: 14px 16px
      }
    }

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

    /* ═══════════════════════════════════════════════════════════════════
   REDESIGN VISUAL — Profissional · Anti-IA · Premium
   Prioridade: fonte → cores → tipografia → espaçamento → componentes
═══════════════════════════════════════════════════════════════════ */

    /* ── 1. FONTE ── */
    body,
    input,
    select,
    textarea,
    button {
      font-family: 'Outfit', system-ui, -apple-system, sans-serif !important
    }

    /* ── 2. CRM: fundo limpo — sem glow radial ── */
    body[data-module="crm"]::before {
      display: none
    }

    body[data-module="crm"] {
      background: #0d0f1a
    }

    body[data-module="objecoes"] {
      background: #f4f6f9
    }

    /* ── 3. MASTER NAV ── */
    #master-nav {
      height: 48px;
      padding: 0 26px;
      background: rgba(10, 12, 20, .99);
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    #master-nav-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .12em;
      color: #252840;
      margin-right: 14px
    }

    .master-btn {
      font-size: 13px;
      font-weight: 600;
      height: 48px;
      padding: 0 17px;
      letter-spacing: -.05px;
      margin-bottom: -1px
    }

    .master-btn:hover {
      color: #dde3ff
    }

    .master-btn.active {
      color: #fbbf24;
      border-bottom-color: #fbbf24;
      text-shadow: 0 0 20px rgba(251, 191, 36, .15)
    }

    /* ── 4. CRM HEADER ── */
    #header {
      height: 56px;
      padding: 0 28px;
      background: rgba(13, 15, 26, .97);
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      top: 0;
    }

    #logo-text {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -.4px
    }

    #logo-icon {
      border-radius: 10px
    }

    /* ── 5. TABS ── */
    .tab {
      font-size: 13px;
      font-weight: 500;
      padding: 0 18px;
      letter-spacing: -.05px;
      height: 56px
    }

    .tab.active {
      font-weight: 700
    }

    .tab-icon {
      font-size: 12px;
      opacity: .35
    }

    .tab.active .tab-icon,
    .tab:hover .tab-icon {
      opacity: .65
    }

    #module-crm .panel,
    #module-obj .panel {
      min-height: unset
    }

    /* ── 6. BOTÕES ── */
    .btn-pri {
      padding: 9px 22px;
      border-radius: 9px;
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: -.1px;
      box-shadow: 0 2px 14px rgba(245, 197, 24, .2);
    }

    .btn-pri:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 22px rgba(245, 197, 24, .32)
    }

    .btn-pri:active {
      transform: scale(.98);
      box-shadow: none
    }

    .btn-sec {
      padding: 8px 20px;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 500
    }

    .btn-sec:active {
      transform: scale(.98)
    }

    .btn-sm {
      font-size: 12.5px;
      padding: 7px 13px;
      border-radius: 8px
    }

    .btn-sm:active {
      transform: scale(.98)
    }

    .h-btn {
      padding: 7px 14px;
      font-size: 12.5px;
      font-weight: 500;
      border-radius: 8px
    }

    .btn-edit {
      font-size: 11.5px;
      padding: 5px 12px;
      border-radius: 7px
    }

    .btn-del {
      font-size: 11.5px;
      padding: 5px 12px;
      border-radius: 7px
    }

    /* ── 7. ESPAÇAMENTO PRINCIPAL ── */
    #main {
      padding: 28px 32px;
      max-width: 1600px
    }

    /* ── 8. CARDS ── */
    .card {
      border-radius: 16px
    }

    .card:hover {
      border-color: rgba(255, 255, 255, .1)
    }

    .card-p {
      padding: 24px
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: none;
      letter-spacing: -.05px;
      color: var(--text);
      opacity: .8;
      margin-bottom: 20px;
    }

    .card-title::before {
      width: 3px;
      height: 13px;
      border-radius: 2px
    }

    /* ── 9. KPI CARDS ── */
    .g4 {
      gap: 20px;
      margin-bottom: 26px
    }

    .kpi {
      padding: 22px 24px;
      border-radius: 16px
    }

    .kpi:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 36px rgba(0, 0, 0, .38)
    }

    .kpi-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .65px;
      margin-bottom: 12px;
      opacity: .5;
    }

    .kpi-val {
      font-size: 36px;
      font-weight: 800;
      letter-spacing: -1.5px;
      line-height: 1
    }

    .kpi-sub {
      font-size: 12px;
      margin-top: 10px;
      opacity: .6
    }

    /* ── 10. GRIDS ── */
    .g2,
    .g2r,
    .g3 {
      gap: 20px;
      margin-bottom: 24px
    }

    .g21 {
      gap: 16px;
      margin-top: 20px
    }

    /* ── 11. TABELA ── */
    .tbl th {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .55px;
      padding: 12px 16px;
      opacity: .5;
    }

    .tbl td {
      padding: 12px 16px;
      font-size: 13.5px
    }

    .tbl-wrap {
      border-radius: 14px
    }

    /* ── 12. BADGES: menos pílula, mais clean ── */
    .badge {
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 9px;
      letter-spacing: .05px
    }

    .tab-badge {
      border-radius: 20px
    }

    /* ── 13. INPUTS ── */
    .inp {
      font-size: 13.5px;
      padding: 9px 14px;
      border-radius: 9px
    }

    .sel {
      font-size: 13.5px;
      padding: 9px 14px;
      border-radius: 9px
    }

    .minp,
    .msel,
    .mtxt {
      font-size: 14px;
      padding: 10px 14px;
      border-radius: 9px
    }

    .minp:focus {
      border-color: rgba(245, 197, 24, .45);
      box-shadow: 0 0 0 3px rgba(245, 197, 24, .08)
    }

    .msel:focus {
      border-color: rgba(245, 197, 24, .45)
    }

    .mtxt:focus {
      border-color: rgba(245, 197, 24, .45)
    }

    /* ── 14. MODAL ── */
    #modal {
      border-radius: 20px;
      max-width: 760px
    }

    #mhd {
      padding: 22px 30px;
      border-radius: 20px 20px 0 0
    }

    #mbody {
      padding: 24px 30px
    }

    .msec {
      font-size: 10px;
      letter-spacing: 1.2px;
      padding-bottom: 10px;
      margin-bottom: 16px;
      margin-top: 14px;
    }

    .mlbl {
      font-size: 10.5px;
      letter-spacing: .35px;
      margin-bottom: 6px;
      opacity: .7
    }

    .mfg {
      gap: 15px
    }

    .mfg.c2 {
      grid-template-columns: 1fr 1fr
    }

    .mfg.c3 {
      grid-template-columns: 1fr 1fr 1fr
    }

    .mfld {
      margin-bottom: 14px
    }

    .mbtns {
      padding-top: 16px;
      margin-top: 18px;
      gap: 10px
    }

    /* ── 15. PIPELINE KANBAN ── */
    .gp {
      gap: 14px
    }

    .pl-card {
      padding: 14px 16px;
      border-radius: 12px
    }

    .pl-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .38)
    }

    .pl-card-name {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -.1px
    }

    .pl-col-hd {
      border-radius: 12px 12px 0 0;
      padding: 12px 14px
    }

    .pl-empty {
      border-radius: 10px;
      font-size: 12px;
      padding: 22px 14px
    }

    /* ── 16. FOLLOW-UPS ── */
    .fu-hero {
      padding: 22px 26px;
      border-radius: 16px
    }

    .fu-hero-title {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -.3px
    }

    .fu-sec-title {
      font-size: 13.5px;
      font-weight: 700;
      padding: 10px 16px;
      border-radius: 10px;
      letter-spacing: -.05px
    }

    .fu-card {
      border-radius: 12px;
      padding: 16px
    }

    .fu-card:hover {
      transform: translateY(-1px)
    }

    .fu-hero-stat {
      border-radius: 10px;
      padding: 10px 16px
    }

    .fu-hero-stat-num {
      font-size: 20px;
      font-weight: 800
    }

    /* ── 17. ALERT BANNER ── */
    .alert-banner {
      border-radius: 12px;
      padding: 14px 20px;
      font-size: 13.5px
    }

    .alert-banner:hover {
      transform: translateX(3px)
    }

    /* ── 18. TOAST ── */
    .toast-item {
      border-radius: 10px;
      font-size: 13.5px;
      font-weight: 600
    }

    /* ── 19. PAGINAÇÃO ── */
    .pag-btn {
      font-size: 12.5px;
      border-radius: 7px
    }

    /* ── 20. TAGS ── */
    .tag {
      border-radius: 5px;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px
    }

    /* ── 21. SCROLLBAR ── */
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 4px
    }

    /* ── 22. SCROLLBAR — CRM AI PANELS ── */
    .crm-ai-panel,
    .crm-fab-panel {
      border-radius: 20px
    }

    .crm-fab {
      border-radius: 50%
    }

    .crm-fab-panel {
      border-radius: 20px;
      right: 28px
    }

    /* ═══════════════════════════════════════════════════════
   MÓDULO OBJEÇÕES — Anti-IA · Refinamento cirúrgico
═══════════════════════════════════════════════════════ */

    /* Orbs quase invisíveis — fim da estética "AI" */
    .mc-orb {
      opacity: .035 !important;
      animation: none !important;
      filter: blur(100px) !important
    }

    .mc-grid {
      opacity: .4
    }

    /* Header mais sóbrio — master-nav oculto, top em 0 */
    .mc-header {
      top: 0;
      background: rgba(8, 10, 18, .98);
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .mc-nav {
      top: 66px
    }

    .mc-aside-sticky {
      top: calc(66px + 48px + 14px)
    }

    .mc-header::after {
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent)
    }

    .mc-brand-name {
      font-size: .98rem;
      font-weight: 800;
      letter-spacing: -.02em
    }

    .mc-brand-sub {
      font-size: .55rem;
      letter-spacing: .1em;
      color: #2a2d42
    }

    /* Nav objeções */
    .mc-nav {
      background: rgba(6, 8, 15, .88)
    }

    .mc-tab-btn {
      font-size: .78rem;
      font-weight: 700;
      border-radius: 8px;
      padding: 9px 17px
    }

    .mc-tab-btn.active {
      background: rgba(0, 212, 255, .08);
      color: #00d4ff;
      border-color: rgba(0, 212, 255, .22)
    }

    /* Glass cards */
    .mc-glass {
      border-radius: 16px;
      border-color: rgba(255, 255, 255, .07)
    }

    .mc-glass:hover {
      border-color: rgba(255, 255, 255, .11)
    }

    /* Chips menos pílula */
    .mc-chip {
      border-radius: 8px;
      font-size: .72rem;
      font-weight: 700;
      padding: 5px 12px
    }

    .mc-chip.active {
      border-radius: 8px
    }

    /* Search input */
    .mc-search-inp {
      border-radius: 11px;
      font-size: .88rem
    }

    .mc-search-inp:focus {
      border-color: rgba(0, 212, 255, .4);
      box-shadow: 0 0 0 3px rgba(0, 212, 255, .07)
    }

    /* Resultado header */
    .mc-result-hd {
      border-radius: 16px;
      padding: 22px 26px
    }

    .mc-result-hd h2 {
      font-size: 1.25rem;
      font-weight: 900;
      letter-spacing: -.02em
    }

    /* 3 Blocos de resultado */
    .mc-block {
      border-radius: 14px;
      padding: 20px
    }

    .mc-block-lbl {
      font-size: .58rem;
      letter-spacing: .12em;
      margin-bottom: 14px
    }

    .mc-block-text {
      font-size: .88rem;
      line-height: 1.68
    }

    .mc-block-script .mc-block-text {
      font-size: .9rem
    }

    .mc-block-quebra .mc-block-text {
      font-size: .94rem
    }

    /* Support cards */
    .mc-sup-card {
      border-radius: 14px;
      padding: 20px
    }

    .mc-tactic-list li,
    .mc-next-q {
      font-size: .83rem
    }

    .mc-next-q {
      font-size: .95rem;
      font-weight: 800
    }

    /* Botões de ação */
    .mc-action-btn {
      border-radius: 10px;
      font-size: .8rem;
      font-weight: 600;
      padding: 10px 18px
    }

    .mc-action-btn:active {
      transform: scale(.97)
    }

    /* Quick buttons */
    .mc-quick-btn {
      border-radius: 10px;
      padding: 12px
    }

    .mc-quick-btn strong {
      font-size: .75rem
    }

    /* Empty state */
    .mc-empty {
      border-radius: 20px;
      padding: 48px 28px
    }

    .mc-empty h2 {
      font-size: 1.15rem;
      font-weight: 900;
      letter-spacing: -.02em
    }

    .mc-empty-step {
      border-radius: 10px;
      padding: 13px 15px
    }

    .mc-step-n {
      border-radius: 9px
    }

    /* Recent items */
    .mc-recent-item {
      border-radius: 10px
    }

    /* Training cards */
    .mc-training-card {
      border-radius: 16px;
      padding: 22px
    }

    .mc-training-card:hover {
      transform: translateY(-2px)
    }

    .mc-training-card h3 {
      font-size: .94rem;
      font-weight: 800
    }

    .mc-training-hero {
      border-radius: 16px;
      padding: 24px 28px
    }

    .mc-training-hero h2 {
      font-size: 1rem;
      font-weight: 900;
      letter-spacing: -.02em
    }

    /* Suggestions */
    .mc-suggestions {
      border-radius: 12px
    }

    .mc-sug-rank {
      border-radius: 7px
    }

    /* AI panel */
    .mc-ai-panel {
      border-radius: 20px
    }

    .mc-ai-title {
      font-size: .92rem;
      font-weight: 800
    }

    .mc-ai-close {
      border-radius: 50%
    }

    /* Espaçamento das páginas */
    .mc-page {
      padding: 24px 32px 80px
    }

    .mc-layout {
      gap: 24px
    }

    /* Score pill */
    .mc-score-pill {
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 800
    }

    .mc-cat-pill {
      border-radius: 6px;
      font-size: .63rem;
      font-weight: 800;
      letter-spacing: .06em
    }

    /* Toast do módulo Objeções */
    #obj-toast {
      border-radius: 14px;
      font-size: .85rem;
      font-weight: 700
    }

    /* Toggles e mode buttons */
    .mc-toggle {
      border-radius: 7px;
      font-size: .73rem;
      font-weight: 700;
      padding: 6px 14px
    }

    .mc-mode-btn {
      border-radius: 7px;
      font-size: .7rem;
      font-weight: 900;
      padding: 6px 15px
    }

    /* ═══════════════════════════════════════════════════════
   RESPONSIVIDADE APRIMORADA
═══════════════════════════════════════════════════════ */
    @media(max-width:900px) {
      .mc-blocks {
        grid-template-columns: 1fr
      }

      .mc-support {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:768px) {
      #main {
        padding: 20px 16px
      }

      .card-p {
        padding: 18px
      }

      .kpi {
        padding: 18px 20px
      }

      .kpi-val {
        font-size: 30px;
        letter-spacing: -1px
      }

      .g4 {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 18px
      }

      .g2,
      .g2r,
      .g3 {
        gap: 14px
      }

      .mc-page {
        padding: 16px 16px 60px
      }

      .mc-blocks {
        grid-template-columns: 1fr
      }

      .fu-hero {
        padding: 18px 20px
      }

      #header {
        padding: 0 16px
      }

      #master-nav {
        padding: 0 16px
      }

      .mc-header-inner {
        padding: 10px 16px
      }
    }

    @media(max-width:480px) {
      .g4 {
        grid-template-columns: 1fr;
        gap: 12px
      }

      .kpi-val {
        font-size: 28px
      }

      .btn-pri {
        padding: 9px 18px;
        font-size: 13px
      }

      #mhd {
        padding: 18px 20px
      }

      #mbody {
        padding: 18px 20px
      }
    }

    /* ═══════════════════════════════════════════════════
   CAPA CINEMATOGRÁFICA — OCAF BENEFÍCIOS
═══════════════════════════════════════════════════ */
    /* ═══ CAPA CINEMATOGRÁFICA ═══ */
    @keyframes capaEnter {
      from {
        opacity: 0;
        transform: translateY(32px) scale(.97)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    @keyframes capaFadeOut {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        pointer-events: none
      }
    }

    @keyframes capaGlowFloat {

      0%,
      100% {
        transform: translate(0, 0) scale(1)
      }

      33% {
        transform: translate(18px, -24px) scale(1.06)
      }

      66% {
        transform: translate(-12px, 16px) scale(.95)
      }
    }

    @keyframes capaShimmer {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    @keyframes capaLogoEntrance {
      0% {
        transform: scale(.4);
        opacity: 0;
        filter: blur(20px)
      }

      60% {
        transform: scale(1.08);
        opacity: 1;
        filter: blur(0)
      }

      80% {
        transform: scale(.96)
      }

      100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0)
      }
    }

    @keyframes capaLogoFloat {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-8px)
      }
    }

    @keyframes capaDotFloat {

      0%,
      100% {
        transform: translate(0, 0);
        opacity: var(--o)
      }

      25% {
        transform: translate(12px, -18px);
        opacity: calc(var(--o) * 1.4)
      }

      50% {
        transform: translate(-8px, -30px);
        opacity: var(--o)
      }

      75% {
        transform: translate(16px, -12px);
        opacity: calc(var(--o) * 0.7)
      }
    }

    @keyframes capaRingSpin {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    @keyframes capaBtnShine {
      0% {
        left: -100%
      }

      100% {
        left: 200%
      }
    }

    @keyframes capaDivPulse {

      0%,
      100% {
        opacity: .5;
        width: 40px
      }

      50% {
        opacity: 1;
        width: 56px
      }
    }

    @keyframes capaFeatBorderGlow {
      0% {
        background-position: 0% 50%
      }

      100% {
        background-position: 200% 50%
      }
    }

    #capa-ocaf {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: #020408;
      display: block;
      height: 100vh;
      min-height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      scroll-behavior: smooth;
      font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    }

    #capa-ocaf.saindo {
      animation: capaFadeOut .45s ease forwards
    }

    /* Ambient Glow System
       FIXED + viewport-size: o fundo (galáxia/Via Láctea/estrelas) precisa cobrir a TELA
       INTEIRA. Como #capa-ocaf tem overflow-y:auto e o hub é mais alto que a tela, um filho
       `absolute; inset:0` resolvia altura só da 1ª dobra (cortava o fundo na metade). `fixed`
       prende ao viewport e cobre 100vw×100vh sempre, mesmo rolando o hub. */
    .capa-ambient {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0;
      pointer-events: none;
      overflow: hidden
    }

    .capa-glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(140px);
      pointer-events: none;
      will-change: transform
    }

    .capa-glow--gold {
      width: min(900px, 100vw);
      height: min(900px, 100vw);
      background: radial-gradient(circle, rgba(245, 197, 24, .12) 0%, rgba(245, 197, 24, .04) 40%, transparent 70%);
      top: -25%;
      left: -15%;
      animation: capaGlowFloat 22s ease-in-out infinite;
    }

    .capa-glow--cyan {
      width: min(800px, 95vw);
      height: min(800px, 95vw);
      background: radial-gradient(circle, rgba(6, 182, 212, .07) 0%, rgba(6, 182, 212, .03) 40%, transparent 70%);
      bottom: -20%;
      right: -15%;
      animation: capaGlowFloat 28s ease-in-out infinite reverse;
    }

    .capa-glow--violet {
      width: min(600px, 75vw);
      height: min(600px, 75vw);
      background: radial-gradient(circle, rgba(124, 58, 237, .06) 0%, rgba(124, 58, 237, .02) 40%, transparent 70%);
      top: 30%;
      right: 15%;
      animation: capaGlowFloat 32s ease-in-out infinite 5s;
    }

    .capa-noise {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: .028;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 128px 128px;
    }

    .capa-grid-bg {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: .04;
      background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, black 30%, transparent 80%);
    }

    /* Aurora Ribbon */
    .capa-aurora {
      position: absolute;
      top: 8%;
      left: -30%;
      width: 160%;
      height: 55%;
      background: linear-gradient(115deg,
          transparent 15%,
          rgba(245, 197, 24, .06) 25%,
          rgba(6, 182, 212, .05) 38%,
          rgba(124, 58, 237, .06) 48%,
          rgba(251, 146, 60, .04) 58%,
          rgba(245, 197, 24, .05) 68%,
          transparent 80%);
      filter: blur(80px);
      transform: rotate(-6deg);
      animation: capaAurora 20s ease-in-out infinite alternate;
      z-index: 1;
    }

    @keyframes capaAurora {
      0% {
        transform: rotate(-6deg) translateX(-8%) scaleY(0.9);
        opacity: .5
      }

      50% {
        transform: rotate(-3deg) translateX(0%) scaleY(1.1);
        opacity: .9
      }

      100% {
        transform: rotate(-1deg) translateX(8%) scaleY(1);
        opacity: .7
      }
    }

    /* Mesh Gradient */
    .capa-mesh {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(ellipse 40% 35% at 20% 60%, rgba(245, 197, 24, .04) 0%, transparent 70%),
        radial-gradient(ellipse 35% 40% at 80% 30%, rgba(6, 182, 212, .03) 0%, transparent 70%),
        radial-gradient(ellipse 50% 30% at 50% 90%, rgba(124, 58, 237, .03) 0%, transparent 70%);
    }

    /* Vignette */
    .capa-vignette {
      position: absolute;
      inset: 0;
      z-index: 3;
      background: radial-gradient(ellipse 82% 78% at 50% 45%, transparent 52%, rgba(2, 4, 8, .5) 100%);
      pointer-events: none;
    }

    /* Full-Screen Animated Canvas (fixed: cobre o viewport inteiro, igual ao .capa-ambient) */
    .capa-canvas {
      position: fixed;
      inset: 0;
      z-index: 1;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
    }

    /* Content Container */
    .capa-inner {
      position: relative;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 64px 28px 96px;
      min-height: 100%;
      margin: 0 auto;
      max-width: 880px;
      width: 100%;
      animation: capaEnter .9s cubic-bezier(.22, 1, .36, 1) both;
    }

    /* Geometric Brand Icon */
    .capa-geo-icon {
      position: relative;
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .capa-geo-hex {
      position: absolute;
      width: 48px;
      height: 48px;
      border: 2px solid rgba(245, 197, 24, .35);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      animation: capaHexSpin 12s linear infinite;
    }

    .capa-geo-hex--2 {
      width: 36px;
      height: 36px;
      border-color: rgba(245, 197, 24, .18);
      animation-direction: reverse;
      animation-duration: 18s;
    }

    .capa-geo-pulse {
      width: 8px;
      height: 8px;
      background: #f5c518;
      border-radius: 50%;
      box-shadow: 0 0 16px rgba(245, 197, 24, .5), 0 0 40px rgba(245, 197, 24, .2);
      animation: capaGeopulse 3s ease-in-out infinite;
    }

    @keyframes capaHexSpin {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    @keyframes capaGeopulse {

      0%,
      100% {
        transform: scale(1);
        box-shadow: 0 0 16px rgba(245, 197, 24, .5), 0 0 40px rgba(245, 197, 24, .2)
      }

      50% {
        transform: scale(1.3);
        box-shadow: 0 0 24px rgba(245, 197, 24, .7), 0 0 60px rgba(245, 197, 24, .3)
      }
    }

    /* CRM Name Badge */
    .capa-crm-name {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 10px 0 6px;
      animation: capaEnter .9s cubic-bezier(.22, 1, .36, 1) .15s both;
    }

    .capa-crm-bracket {
      font-size: clamp(14px, 2vw, 18px);
      font-weight: 300;
      color: rgba(245, 197, 24, .3);
      line-height: 1;
    }

    .capa-crm-text {
      font-size: clamp(13px, 2.2vw, 17px);
      font-weight: 800;
      letter-spacing: 8px;
      color: rgba(255, 255, 255, .55);
      text-transform: uppercase;
      background: linear-gradient(90deg, rgba(255, 255, 255, .4), rgba(245, 197, 24, .5), rgba(255, 255, 255, .4));
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: capaCrmShimmer 6s ease-in-out infinite;
    }

    @keyframes capaCrmShimmer {
      0% {
        background-position: 100% 50%
      }

      50% {
        background-position: 0% 50%
      }

      100% {
        background-position: 100% 50%
      }
    }

    /* Title */
    .capa-title {
      font-size: clamp(36px, 7vw, 62px);
      font-weight: 900;
      letter-spacing: -2px;
      line-height: 1;
      color: #fff;
      margin-bottom: 6px;
    }

    .capa-title-accent {
      background: linear-gradient(135deg, #f5c518 0%, #fbbf24 40%, #f59e0b 100%);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: capaShimmer 4s ease-in-out infinite;
    }

    /* Divider */
    .capa-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 16px 0 14px;
      height: 2px;
    }

    .capa-divider span {
      display: block;
      width: 48px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #f5c518, transparent);
      border-radius: 2px;
      animation: capaDivPulse 3s ease-in-out infinite;
    }

    /* Subtitle */
    .capa-sub {
      font-size: clamp(10px, 1.6vw, 12.5px);
      font-weight: 700;
      color: rgba(245, 197, 24, .7);
      text-transform: uppercase;
      letter-spacing: 4px;
      margin-bottom: 16px;
    }

    /* Description */
    .capa-desc {
      font-size: clamp(13px, 1.5vw, 15px);
      font-weight: 400;
      color: #64748b;
      line-height: 1.8;
      max-width: 500px;
      margin: 0 auto 36px;
    }

    /* Feature Cards */
    .capa-features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      width: 100%;
      max-width: 720px;
      margin-bottom: 32px;
    }

    .capa-feat {
      position: relative;
      background: rgba(8, 11, 20, .74);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      min-height: 150px;
      padding: 24px 22px;
      backdrop-filter: blur(14px);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
      cursor: default;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }

    .capa-feat:hover {
      transform: translateY(-3px);
      border-color: rgba(250, 204, 21, .28);
      background: rgba(12, 16, 28, .86);
    }

    .capa-feat-icon-wrap {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(250, 204, 21, .08);
      border: 1px solid rgba(250, 204, 21, .18);
      margin: 0 auto 14px;
    }

    .capa-feat-icon {
      font-size: 18px
    }

    .capa-feat-label {
      font-size: 12px;
      font-weight: 700;
      color: #e2e8f0;
      line-height: 1.4;
      letter-spacing: -.1px;
    }

    /* Stats Bar */
    .capa-stats {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 36px;
      padding: 12px 28px;
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 255, 255, .04);
      border-radius: 40px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .capa-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px
    }

    .capa-stat-num {
      font-size: 15px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.5px
    }

    .capa-stat-lbl {
      font-size: 9px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .capa-stat-sep {
      width: 1px;
      height: 28px;
      background: rgba(255, 255, 255, .06)
    }

    /* Buttons */
    .capa-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 34px;
      margin-bottom: 24px;
    }

    .capa-btn-pri {
      min-width: 220px;
      height: 54px;
      padding: 0 26px;
      border-radius: 14px;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: .01em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
      background: linear-gradient(135deg, #facc15, #eab308);
      color: #07090f;
      border: 1px solid rgba(250, 204, 21, .75);
      box-shadow: 0 12px 28px rgba(250, 204, 21, .18);
      font-family: inherit;
      white-space: nowrap;
      line-height: 1.2;
    }

    .capa-btn-pri:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 36px rgba(250, 204, 21, .26);
    }

    .capa-btn-pri:active {
      transform: translateY(0);
    }

    .capa-btn-sec {
      min-width: 220px;
      height: 54px;
      padding: 0 26px;
      border-radius: 14px;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: .01em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
      background: rgba(255, 255, 255, .035);
      color: rgba(255, 255, 255, .88);
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
      font-family: inherit;
      white-space: nowrap;
      line-height: 1.2;
    }

    .capa-btn-sec:hover {
      transform: translateY(-2px);
      border-color: rgba(250, 204, 21, .42);
      background: rgba(250, 204, 21, .06);
      color: #fff;
    }

    .capa-btn-sec:active {
      transform: translateY(0);
    }

    /* Footer Note */
    .capa-footer-note {
      font-size: 10px;
      font-weight: 500;
      color: #334155;
      letter-spacing: .5px;
      margin: 0;
    }

    /* Responsive */
    @media(max-width:768px) {
      .capa-btns {
        flex-direction: column;
        gap: 12px;
        width: 100%;
      }

      .capa-btn-pri,
      .capa-btn-sec {
        width: min(100%, 320px);
      }

      .capa-inner {
        padding: 40px 18px 120px;
      }

      .capa-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }

      .capa-stats {
        flex-direction: column;
        gap: 8px;
        border-radius: 16px;
      }

      .capa-stat-sep {
        width: 40px;
        height: 1px;
      }

      #wa-float-btn {
        right: 18px !important;
        bottom: 18px !important;
        transform: scale(.92);
      }
    }

    @media(max-width:480px) {
      .capa-features {
        grid-template-columns: 1fr;
      }
    }

    /* ═══ PRISM LAYER (Landing Gate) ═══ */
    .premium-prism-bg {
      position: relative;
      overflow: hidden
    }

    .prism-layer {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden
    }

    .prism-orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(34px);
      opacity: .72;
      mix-blend-mode: screen;
      animation: prismFloat 11s ease-in-out infinite alternate;
    }

    .prism-orb-1 {
      width: 420px;
      height: 420px;
      right: 18%;
      top: 4%;
      background: rgba(250, 204, 21, .28);
      animation-delay: 0s
    }

    .prism-orb-2 {
      width: 520px;
      height: 520px;
      right: -8%;
      top: 20%;
      background: rgba(251, 146, 60, .24);
      animation-delay: -3s
    }

    .prism-orb-3 {
      width: 460px;
      height: 460px;
      left: 18%;
      bottom: -18%;
      background: rgba(132, 0, 255, .16);
      animation-delay: -6s
    }

    .prism-shape {
      position: absolute;
      right: 12%;
      top: 47%;
      width: min(560px, 54vw);
      height: min(560px, 54vw);
      transform: translateY(-50%) rotate(38deg);
      background: linear-gradient(135deg,
          rgba(255, 255, 255, .13),
          rgba(250, 204, 21, .16) 28%,
          rgba(251, 146, 60, .10) 56%,
          rgba(244, 63, 94, .12));
      clip-path: polygon(50% 0%, 100% 62%, 50% 100%, 0% 62%);
      border: 1px solid rgba(255, 255, 255, .14);
      box-shadow:
        0 0 90px rgba(250, 204, 21, .14),
        0 0 150px rgba(251, 146, 60, .10),
        inset 0 0 80px rgba(255, 255, 255, .07);
      opacity: .72;
      animation: prismRotate 24s linear infinite;
      z-index: 2;
    }

    .prism-grid {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: .14;
      background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(circle at 58% 42%, black, transparent 68%);
    }

    @keyframes prismFloat {
      from {
        transform: translate3d(0, 0, 0) scale(1)
      }

      to {
        transform: translate3d(36px, -28px, 0) scale(1.07)
      }
    }

    @keyframes prismRotate {
      from {
        transform: translateY(-50%) rotate(32deg)
      }

      to {
        transform: translateY(-50%) rotate(392deg)
      }
    }

    .premium-prism-bg .lg-hero-inner,
    .premium-prism-bg .capa-inner {
      position: relative;
      z-index: 5;
    }

    @media(max-width:768px) {
      .prism-shape {
        right: 50%;
        top: 42%;
        width: 88vw;
        height: 88vw;
        transform: translate(50%, -50%) rotate(38deg);
        opacity: .42;
      }

      .prism-orb {
        filter: blur(28px);
        opacity: .5
      }
    }


    /* ═══════════════════════════════════════════════════
   MÓDULO OCAF — CENTRAL DE OBJEÇÕES BENEFÍCIOS
═══════════════════════════════════════════════════ */
    #module-ocaf-obj {
      display: none;
      min-height: 100vh;
      background: #07080f;
      font-family: 'Outfit', system-ui, sans-serif;
    }

    .ocaf-hd {
      position: sticky;
      top: 0;
      z-index: 200;
      background: rgba(7, 8, 15, .97);
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 0 28px;
      height: 60px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .ocaf-hd-logo {
      height: 30px;
      width: auto;
      object-fit: contain;
      filter: brightness(1.1)
    }

    .ocaf-hd-title {
      flex: 1;
      font-size: 14.5px;
      font-weight: 700;
      color: rgba(255, 255, 255, .82);
      letter-spacing: .1px;
    }

    .ocaf-hd-back {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .65);
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 13px;
      font-weight: 600;
      padding: 7px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .2s, color .2s;
    }

    .ocaf-hd-back:hover {
      background: rgba(255, 255, 255, .13);
      color: #fff
    }

    .ocaf-body {
      max-width: 1160px;
      margin: 0 auto;
      padding: 44px 24px 80px
    }

    .ocaf-hero-title {
      font-size: clamp(22px, 4vw, 34px);
      font-weight: 900;
      letter-spacing: -1px;
      background: linear-gradient(135deg, #f5c518, #fdeaa7);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 6px;
    }

    .ocaf-hero-sub {
      font-size: 15px;
      color: rgba(255, 255, 255, .45);
      margin-bottom: 36px
    }

    .ocaf-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 34px
    }

    .ocaf-filter-chip {
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 7px;
      border: 1px solid rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .04);
      color: rgba(255, 255, 255, .58);
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
    }

    .ocaf-filter-chip:hover {
      background: rgba(245, 197, 24, .1);
      border-color: rgba(245, 197, 24, .28);
      color: rgba(255, 255, 255, .88);
    }

    .ocaf-filter-chip.active {
      background: rgba(245, 197, 24, .14);
      border-color: rgba(245, 197, 24, .48);
      color: #f5c518;
    }

    .ocaf-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
      gap: 18px;
    }

    .ocaf-card {
      background: rgba(255, 255, 255, .032);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 16px;
      padding: 24px;
      transition: border-color .22s, background .22s, transform .2s;
    }

    .ocaf-card:hover {
      border-color: rgba(245, 197, 24, .2);
      background: rgba(245, 197, 24, .025);
      transform: translateY(-2px);
    }

    .ocaf-cat-pill {
      display: inline-block;
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 6px;
      background: rgba(245, 197, 24, .1);
      color: #f5c518;
      border: 1px solid rgba(245, 197, 24, .18);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    .ocaf-card-title {
      font-size: 16px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 18px;
      line-height: 1.35;
    }

    .ocaf-block {
      margin-bottom: 14px
    }

    .ocaf-block-label {
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, .32);
      text-transform: uppercase;
      letter-spacing: .9px;
      margin-bottom: 5px;
    }

    .ocaf-block-text {
      font-size: 13.5px;
      color: rgba(255, 255, 255, .72);
      line-height: 1.65
    }

    .ocaf-block-text.resposta {
      color: rgba(210, 235, 255, .82)
    }

    .ocaf-copy-btn {
      margin-top: 18px;
      width: 100%;
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 12.5px;
      font-weight: 700;
      padding: 9px 16px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .09);
      color: rgba(255, 255, 255, .55);
      cursor: pointer;
      transition: all .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
    }

    .ocaf-copy-btn:hover {
      background: rgba(245, 197, 24, .1);
      border-color: rgba(245, 197, 24, .28);
      color: #f5c518;
    }

    .ocaf-copy-btn svg {
      flex-shrink: 0
    }

    #ocaf-toast {
      position: fixed;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: rgba(20, 24, 40, .96);
      border: 1px solid rgba(245, 197, 24, .28);
      color: #f5c518;
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 13px;
      font-weight: 600;
      padding: 10px 22px;
      border-radius: 10px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .22s, transform .22s;
      z-index: 9999;
      white-space: nowrap;
    }

    #ocaf-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    @media(max-width:640px) {
      .ocaf-grid {
        grid-template-columns: 1fr
      }

      .ocaf-body {
        padding: 28px 16px 60px
      }

      .ocaf-hd {
        padding: 0 18px
      }
    }

    /* ═══════════════════════════════════════════════
   CONFIGURAÇÕES — Meta Lead Ads
═══════════════════════════════════════════════ */
    .cfg-security-banner {
      background: rgba(245, 158, 11, .07);
      border: 1px solid rgba(245, 158, 11, .2);
      border-radius: 10px;
      padding: 13px 16px;
      margin-bottom: 22px;
      font-size: 12.5px;
      color: rgba(255, 200, 80, .85);
      line-height: 1.65;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    .cfg-security-banner strong {
      color: var(--acc)
    }

    .cfg-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-bottom: 18px
    }

    .cfg-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 22px 24px;
      margin-bottom: 18px;
    }

    .cfg-card:last-child {
      margin-bottom: 0
    }

    .cfg-card-title {
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: var(--acc);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cfg-dot {
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .cfg-dot.on {
      background: #22c55e;
      box-shadow: 0 0 8px rgba(34, 197, 94, .5)
    }

    .cfg-dot.off {
      background: #ef4444
    }

    .cfg-dot.warn {
      background: #f59e0b
    }

    .cfg-status-row {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 16px;
    }

    .cfg-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .cfg-stat {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px
    }

    .cfg-stat-val {
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -1px;
      line-height: 1;
      margin-bottom: 4px
    }

    .cfg-stat-lbl {
      font-size: 11px;
      color: var(--muted);
      font-weight: 600
    }

    .cfg-fld {
      margin-bottom: 13px
    }

    .cfg-fld:last-child {
      margin-bottom: 0
    }

    .cfg-lbl {
      display: block;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 5px
    }

    .cfg-inp,
    .cfg-sel {
      width: 100%;
      background: var(--surf);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 13.5px;
      padding: 9px 13px;
      border-radius: 9px;
      outline: none;
      transition: border-color .15s;
      box-sizing: border-box;
    }

    .cfg-inp:focus,
    .cfg-sel:focus {
      border-color: rgba(245, 197, 24, .4)
    }

    .cfg-inp.readonly {
      opacity: .45;
      cursor: default
    }

    .cfg-inp-row {
      display: flex;
      gap: 8px;
      align-items: flex-end
    }

    .cfg-inp-row .cfg-inp {
      flex: 1
    }

    .cfg-icon-btn {
      background: var(--surf);
      border: 1px solid var(--border);
      color: var(--muted);
      border-radius: 9px;
      padding: 9px 12px;
      cursor: pointer;
      font-size: 13px;
      transition: all .15s;
      white-space: nowrap;
    }

    .cfg-icon-btn:hover {
      border-color: var(--acc);
      color: var(--acc)
    }

    .cfg-hint {
      font-size: 11px;
      color: var(--muted2);
      margin-top: 4px;
      line-height: 1.5
    }

    .cfg-btns {
      display: flex;
      gap: 10px;
      margin-top: 18px;
      flex-wrap: wrap
    }

    .cfg-backend-note {
      background: rgba(77, 159, 255, .06);
      border: 1px solid rgba(77, 159, 255, .18);
      border-radius: 9px;
      padding: 12px 16px;
      font-size: 11.5px;
      color: rgba(140, 195, 255, .82);
      line-height: 1.65;
      margin-top: 14px;
    }

    .cfg-backend-note code {
      background: rgba(77, 159, 255, .14);
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 11px;
      color: #7ec8ff;
    }

    .cfg-map-table {
      width: 100%;
      border-collapse: collapse
    }

    .cfg-map-table th {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .5px;
      padding: 0 0 10px 0;
      text-align: left;
    }

    .cfg-map-table td {
      padding: 5px 0;
      vertical-align: middle
    }

    .cfg-map-table td:first-child {
      font-size: 12.5px;
      color: var(--text);
      font-weight: 600;
      padding-right: 10px;
      white-space: nowrap;
      font-family: monospace;
    }

    .cfg-map-arrow {
      color: var(--muted2);
      padding: 0 8px;
      font-size: 13px;
      text-align: center
    }

    .cfg-map-sel {
      width: 100%;
      background: var(--surf);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 12.5px;
      padding: 7px 10px;
      border-radius: 7px;
      outline: none;
      transition: border-color .15s;
    }

    .cfg-map-sel:focus {
      border-color: rgba(245, 197, 24, .4)
    }

    .cfg-rules-list {
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .cfg-rule-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      cursor: pointer;
      transition: border-color .15s, background .15s;
    }

    .cfg-rule-row:hover {
      border-color: rgba(245, 197, 24, .18)
    }

    .cfg-rule-row.active {
      border-color: rgba(245, 197, 24, .3);
      background: rgba(245, 197, 24, .03)
    }

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

    .cfg-toggle input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute
    }

    .cfg-toggle-slider {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, .12);
      border-radius: 10px;
      cursor: pointer;
      transition: background .2s;
    }

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

    .cfg-toggle input:checked+.cfg-toggle-slider {
      background: var(--acc)
    }

    .cfg-toggle input:checked+.cfg-toggle-slider::before {
      transform: translateX(16px)
    }

    .cfg-rule-info {
      flex: 1
    }

    .cfg-rule-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px
    }

    .cfg-rule-desc {
      font-size: 11.5px;
      color: var(--muted);
      line-height: 1.45
    }

    .cfg-hist-wrap {
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 10px
    }

    .cfg-hist-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 680px
    }

    .cfg-hist-table th {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: var(--muted);
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      background: var(--card);
    }

    .cfg-hist-table td {
      font-size: 12.5px;
      color: var(--text);
      padding: 10px 14px;
      border-bottom: 1px solid var(--borderL);
    }

    .cfg-hist-table tbody tr:last-child td {
      border-bottom: none
    }

    .cfg-hist-table tbody tr:hover td {
      background: rgba(255, 255, 255, .02)
    }

    .cfg-hist-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11.5px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 5px;
    }

    .cfg-hist-status.ok {
      background: rgba(16, 217, 138, .1);
      color: #10d98a
    }

    .cfg-hist-status.err {
      background: rgba(255, 77, 109, .1);
      color: #ff4d6d
    }

    .cfg-hist-status.dup {
      background: rgba(245, 197, 24, .1);
      color: #f5c518
    }

    .cfg-empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--muted2);
      font-size: 13px
    }

    @media(max-width:900px) {
      .cfg-grid {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:480px) {
      .cfg-stats {
        grid-template-columns: 1fr 1fr
      }

      .cfg-btns {
        flex-wrap: wrap
      }
    }

    /* ── Área IA inline dentro do card do pipeline ── */
    .pl-card-ai-area {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .06)
    }

    .pl-card-ai-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px
    }

    .pl-card-ai-badge {
      font-size: 10px;
      font-weight: 800;
      padding: 2px 9px;
      border-radius: 5px;
      letter-spacing: .3px
    }

    .pl-card-ai-badge.sdr {
      background: rgba(245, 197, 24, .12);
      color: #f5c518;
      border: 1px solid rgba(245, 197, 24, .22)
    }

    .pl-card-ai-badge.closer {
      background: rgba(255, 51, 102, .1);
      color: #ff4d73;
      border: 1px solid rgba(255, 51, 102, .22)
    }

    .pl-card-ai-close {
      background: none;
      border: none;
      color: rgba(255, 255, 255, .3);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      padding: 2px 5px;
      border-radius: 4px;
      transition: color .15s, background .15s
    }

    .pl-card-ai-close:hover {
      color: rgba(255, 255, 255, .7);
      background: rgba(255, 255, 255, .07)
    }

    .pl-card-ai-dots {
      display: flex;
      gap: 4px;
      align-items: center;
      padding: 8px 0
    }

    .pl-card-ai-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(245, 197, 24, .35);
      animation: plAiDot .9s ease-in-out infinite
    }

    .pl-card-ai-dot:nth-child(2) {
      animation-delay: .18s
    }

    .pl-card-ai-dot:nth-child(3) {
      animation-delay: .36s
    }

    @keyframes plAiDot {

      0%,
      80%,
      100% {
        transform: scale(1);
        opacity: .4
      }

      40% {
        transform: scale(1.35);
        opacity: 1;
        background: rgba(245, 197, 24, .9)
      }
    }

    .pl-card-ai-content {
      font-size: 12px;
      color: rgba(255, 255, 255, .78);
      line-height: 1.65
    }

    .pl-card-ai-content h4 {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .7px;
      color: #f5c518;
      margin: 9px 0 4px;
      padding-bottom: 3px;
      border-bottom: 1px solid rgba(245, 197, 24, .14)
    }

    .pl-card-ai-content p {
      margin: 4px 0;
      font-size: 12px;
      line-height: 1.6
    }

    .pl-card-ai-content ul {
      margin: 4px 0;
      padding-left: 14px
    }

    .pl-card-ai-content li {
      font-size: 12px;
      line-height: 1.6;
      margin-bottom: 2px
    }

    .pl-card-ai-content strong {
      color: rgba(255, 255, 255, .95)
    }

    .pl-card-ai-copy {
      margin-top: 8px;
      width: 100%;
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: 11px;
      font-weight: 600;
      padding: 6px;
      border-radius: 6px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .42);
      cursor: pointer;
      transition: all .15s
    }

    .pl-card-ai-copy:hover {
      background: rgba(245, 197, 24, .08);
      border-color: rgba(245, 197, 24, .2);
      color: #f5c518
    }

    /* ── AI card: header + controles + corpo colapsável ── */
    .pl-card-ai-header {
      display: flex;
      align-items: center;
      gap: 7px;
      padding-bottom: 7px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      margin-bottom: 8px;
      cursor: default
    }

    .pl-card-ai-agent-label {
      flex: 1;
      font-size: 10px;
      font-weight: 600;
      color: rgba(255, 255, 255, .32);
      letter-spacing: .2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .pl-card-ai-ctrl {
      display: flex;
      gap: 3px;
      flex-shrink: 0
    }

    .pl-card-ai-ctrl-btn {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, .09);
      background: rgba(255, 255, 255, .04);
      color: rgba(255, 255, 255, .38);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .14s;
      padding: 0;
      font-family: monospace
    }

    .pl-card-ai-ctrl-btn:hover {
      background: rgba(255, 255, 255, .1);
      border-color: rgba(255, 255, 255, .18);
      color: #fff
    }

    .pl-card-ai-ctrl-btn.ai-close:hover {
      background: rgba(248, 113, 113, .12);
      border-color: rgba(248, 113, 113, .28);
      color: #f87171
    }

    .pl-card-ai-body {
      overflow: hidden;
      transition: max-height .32s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
      max-height: 2400px;
      opacity: 1
    }

    .pl-card-ai-body.collapsed {
      max-height: 0 !important;
      opacity: 0;
      pointer-events: none
    }

    .pl-card-ai-area.has-response {
      border-top: 1px solid rgba(255, 255, 255, .07);
      padding-top: 10px;
      margin-top: 10px
    }

    /* ── Card de orientação Meta Ads ── */
    .cfg-meta-guide {
      background: linear-gradient(135deg, rgba(24, 119, 242, .08) 0%, rgba(45, 70, 180, .06) 100%);
      border: 1px solid rgba(24, 119, 242, .2);
      border-radius: var(--radius);
      padding: 22px 24px;
      margin-bottom: 20px
    }

    .cfg-meta-guide-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px
    }

    .cfg-meta-guide-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, #1877f2, #42a5f5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0
    }

    .cfg-meta-guide-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 3px
    }

    .cfg-meta-guide-sub {
      font-size: 12px;
      color: rgba(100, 160, 255, .8);
      font-weight: 500
    }

    .cfg-meta-guide-body {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .62);
      line-height: 1.7;
      margin-bottom: 16px
    }

    .cfg-meta-guide-steps {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 10px
    }

    .cfg-meta-guide-step {
      background: rgba(24, 119, 242, .07);
      border: 1px solid rgba(24, 119, 242, .14);
      border-radius: 10px;
      padding: 12px 14px
    }

    .cfg-meta-guide-step-num {
      font-size: 10px;
      font-weight: 800;
      color: rgba(100, 160, 255, .7);
      letter-spacing: .5px;
      text-transform: uppercase;
      margin-bottom: 4px
    }

    .cfg-meta-guide-step-txt {
      font-size: 12px;
      color: rgba(255, 255, 255, .68);
      line-height: 1.5
    }

    /* ══════════════════════════════════════════
   MOTOR DE IA — aba de configuração
══════════════════════════════════════════ */
    .ai-mot-guide {
      background: linear-gradient(135deg, rgba(124, 58, 237, .09) 0%, rgba(0, 212, 255, .05) 100%);
      border: 1px solid rgba(124, 58, 237, .22);
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 22px
    }

    .ai-mot-guide-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px
    }

    .ai-mot-guide-icon {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      background: linear-gradient(135deg, #7c3aed, #00d4ff);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
      box-shadow: 0 4px 18px rgba(124, 58, 237, .35)
    }

    .ai-mot-guide-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 3px
    }

    .ai-mot-guide-sub {
      font-size: 12px;
      color: rgba(124, 58, 237, .8);
      font-weight: 600
    }

    .ai-mot-guide-body {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .62);
      line-height: 1.72;
      margin-bottom: 16px
    }

    .ai-mot-guide-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px
    }

    .ai-mot-guide-item {
      background: rgba(124, 58, 237, .06);
      border: 1px solid rgba(124, 58, 237, .14);
      border-radius: 10px;
      padding: 13px 14px
    }

    .ai-mot-guide-item-name {
      font-size: 11px;
      font-weight: 800;
      color: rgba(180, 140, 255, .9);
      letter-spacing: .4px;
      text-transform: uppercase;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .ai-mot-guide-item-desc {
      font-size: 11.5px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.52
    }

    /* Card principal de configuração */
    .ai-mot-card {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 16px
    }

    .ai-mot-card-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .ai-mot-card-title::before {
      content: '';
      display: block;
      width: 3px;
      height: 16px;
      border-radius: 2px;
      background: linear-gradient(180deg, #7c3aed, #00d4ff)
    }

    /* Seletor de provedor */
    .ai-prov-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 18px
    }

    @media(max-width:600px) {
      .ai-prov-grid {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:600px) {
      #ai-agent-status-wrap {
        grid-template-columns: 1fr
      }
    }

    .ai-prov-btn {
      position: relative;
      padding: 14px 12px;
      border-radius: 12px;
      border: 2px solid rgba(255, 255, 255, .07);
      background: rgba(255, 255, 255, .03);
      cursor: pointer;
      transition: all .18s;
      text-align: left
    }

    .ai-prov-btn:hover {
      border-color: rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .05)
    }

    .ai-prov-btn.selected {
      border-color: rgba(124, 58, 237, .6);
      background: rgba(124, 58, 237, .08);
      box-shadow: 0 0 20px rgba(124, 58, 237, .15)
    }

    .ai-prov-logo {
      font-size: 22px;
      margin-bottom: 6px
    }

    .ai-prov-name {
      font-size: 12px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 2px
    }

    .ai-prov-desc {
      font-size: 11px;
      color: rgba(255, 255, 255, .4);
      line-height: 1.4
    }

    .ai-prov-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 9px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 20px;
      letter-spacing: .3px
    }

    .ai-prov-badge.free {
      background: rgba(34, 197, 94, .12);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, .2)
    }

    .ai-prov-badge.paid {
      background: rgba(245, 197, 24, .09);
      color: #f5c518;
      border: 1px solid rgba(245, 197, 24, .2)
    }

    .ai-prov-badge.custom {
      background: rgba(0, 212, 255, .09);
      color: #00d4ff;
      border: 1px solid rgba(0, 212, 255, .2)
    }

    .ai-prov-check {
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #7c3aed;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      color: #fff
    }

    .ai-prov-btn.selected .ai-prov-check {
      display: flex
    }

    /* ── Motor IA v2: grid renderizado por JS (cards são <button>) ── */
    .ai-prov-btn {
      font-family: inherit;
      color: inherit;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px
    }

    /* ✓ agora indica CHAVE SALVA no provedor (verde), independente da seleção */
    .ai-prov-btn.ai-prov-configured .ai-prov-check {
      display: flex;
      background: #22c55e
    }

    /* Guia colapsável "Como obter sua chave" */
    .ai-guide-acc {
      margin: 4px 0 18px;
      border: 1px solid rgba(245, 197, 24, .18);
      border-radius: 11px;
      background: rgba(245, 197, 24, .04);
      overflow: hidden
    }

    .ai-guide-head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 11px 14px;
      border: none;
      background: transparent;
      color: #f5c518;
      font: 700 12px/1.3 inherit;
      font-family: inherit;
      cursor: pointer;
      text-align: left
    }

    .ai-guide-chev {
      transition: transform .18s
    }

    .ai-guide-acc.open .ai-guide-chev {
      transform: rotate(180deg)
    }

    .ai-guide-body {
      display: none;
      padding: 2px 14px 13px;
    }

    .ai-guide-acc.open .ai-guide-body {
      display: block
    }

    .ai-guide-step {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      margin-bottom: 8px;
      font-size: 11.5px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.5
    }

    .ai-guide-num {
      flex: 0 0 17px;
      height: 17px;
      border-radius: 50%;
      background: rgba(245, 197, 24, .14);
      color: #f5c518;
      font-size: 10px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px
    }

    .ai-guide-link {
      display: inline-block;
      margin-top: 4px;
      font-size: 11.5px;
      font-weight: 700;
      color: #f5c518;
      text-decoration: none
    }

    .ai-guide-link:hover {
      text-decoration: underline
    }

    /* Filtro por caso de uso (NVIDIA) */
    .ai-nv-tagbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px
    }

    .ai-nv-tag {
      padding: 4px 11px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .04);
      color: rgba(255, 255, 255, .55);
      font: 700 10.5px/1 inherit;
      font-family: inherit;
      cursor: pointer;
      transition: all .15s
    }

    .ai-nv-tag:hover {
      border-color: rgba(255, 255, 255, .25)
    }

    .ai-nv-tag.active {
      border-color: rgba(245, 197, 24, .5);
      background: rgba(245, 197, 24, .1);
      color: #f5c518
    }

    /* Aviso: cofre indisponível (fallback texto puro) */
    .ai-plain-warn {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 14px;
      padding: 10px 13px;
      border: 1px solid rgba(251, 191, 36, .3);
      border-radius: 10px;
      background: rgba(251, 191, 36, .07);
      color: #fbbf24;
      font-size: 11.5px;
      line-height: 1.5
    }

    /* Campos de configuração */
    .ai-field-group {
      margin-bottom: 16px
    }

    .ai-field-label {
      font-size: 11.5px;
      font-weight: 700;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .ai-field-inp {
      width: 100%;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 9px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text);
      font-family: inherit;
      outline: none;
      transition: border .15s;
      box-sizing: border-box
    }

    .ai-field-inp:focus {
      border-color: rgba(124, 58, 237, .5);
      background: rgba(124, 58, 237, .05)
    }

    .ai-field-inp::placeholder {
      color: rgba(255, 255, 255, .2)
    }

    .ai-field-select {
      width: 100%;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 9px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--text);
      font-family: inherit;
      outline: none;
      cursor: pointer;
      transition: border .15s;
      box-sizing: border-box;
      appearance: none;
      -webkit-appearance: none
    }

    .ai-field-select:focus {
      border-color: rgba(124, 58, 237, .5)
    }

    .ai-field-select option {
      background: #0d0f1a;
      color: #fff
    }

    .ai-key-wrap {
      position: relative
    }

    .ai-key-wrap .ai-field-inp {
      padding-right: 44px
    }

    .ai-key-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: rgba(255, 255, 255, .3);
      cursor: pointer;
      font-size: 14px;
      padding: 4px
    }

    .ai-key-toggle:hover {
      color: rgba(255, 255, 255, .7)
    }

    /* Status e botões de ação */
    .ai-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 20px
    }

    .ai-btn-save {
      padding: 10px 24px;
      border-radius: 9px;
      border: none;
      background: linear-gradient(135deg, #7c3aed, #5b21b6);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all .18s;
      font-family: inherit
    }

    .ai-btn-save:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(124, 58, 237, .4)
    }

    .ai-btn-test {
      padding: 10px 20px;
      border-radius: 9px;
      border: 1px solid rgba(0, 212, 255, .25);
      background: rgba(0, 212, 255, .07);
      color: #00d4ff;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all .18s;
      font-family: inherit
    }

    .ai-btn-test:hover {
      background: rgba(0, 212, 255, .14);
      border-color: rgba(0, 212, 255, .45)
    }

    .ai-test-status {
      font-size: 12px;
      font-weight: 600;
      padding: 8px 14px;
      border-radius: 8px;
      display: none
    }

    .ai-test-status.ok {
      background: rgba(34, 197, 94, .1);
      border: 1px solid rgba(34, 197, 94, .2);
      color: #4ade80
    }

    .ai-test-status.err {
      background: rgba(248, 113, 113, .1);
      border: 1px solid rgba(248, 113, 113, .2);
      color: #f87171
    }

    /* ══ TOAST SYSTEM ══ */
    #toast-container {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 99999;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none
    }

    .toast {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      font-family: 'Outfit', system-ui, sans-serif;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
      pointer-events: all;
      transform: translateX(120%);
      opacity: 0;
      transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
      max-width: 340px;
      line-height: 1.4
    }

    .toast.show {
      transform: translateX(0);
      opacity: 1
    }

    .toast.hide {
      transform: translateX(120%);
      opacity: 0;
      transition: all .2s ease
    }

    .toast.t-success {
      background: #0d1f16;
      border: 1px solid rgba(74, 222, 128, .3);
      color: #4ade80
    }

    .toast.t-error {
      background: #1f0d0d;
      border: 1px solid rgba(248, 113, 113, .3);
      color: #f87171
    }

    .toast.t-info {
      background: #0d1220;
      border: 1px solid rgba(245, 197, 24, .25);
      color: #f5c518
    }

    .toast.t-warn {
      background: #1f1a0d;
      border: 1px solid rgba(251, 191, 36, .3);
      color: #fbbf24
    }

    .toast-icon {
      font-size: 16px;
      flex-shrink: 0
    }

    /* Motor ativo */
    .ai-active-banner {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(124, 58, 237, .08);
      border: 1px solid rgba(124, 58, 237, .2);
      border-radius: 12px;
      padding: 14px 18px;
      margin-bottom: 22px
    }

    .ai-active-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 8px rgba(74, 222, 128, .6);
      flex-shrink: 0
    }

    .ai-active-info {
      flex: 1
    }

    .ai-active-label {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .38);
      letter-spacing: .4px;
      text-transform: uppercase;
      margin-bottom: 2px
    }

    .ai-active-value {
      font-size: 13px;
      font-weight: 800;
      color: var(--text)
    }

    /* ===== LEAD HISTORY TIMELINE ===== */
    .hist-section {
      margin-top: 16px;
      padding: 14px 16px;
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 10px
    }

    .hist-header {
      font-size: 10px;
      font-weight: 800;
      color: rgba(255, 255, 255, .35);
      letter-spacing: .5px;
      text-transform: uppercase;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .hist-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      max-height: 180px;
      overflow-y: auto
    }

    .hist-item {
      display: flex;
      gap: 10px;
      padding: 7px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      font-size: 11.5px
    }

    .hist-item:last-child {
      border-bottom: none
    }

    .hist-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 3px
    }

    .hist-dot.status {
      background: #f5c518
    }

    .hist-dot.note {
      background: #4d9fff
    }

    .hist-dot.created {
      background: #10d98a
    }

    .hist-dot.fin {
      background: #a855f7
    }

    .hist-body {
      flex: 1;
      line-height: 1.4
    }

    .hist-text {
      color: rgba(255, 255, 255, .75);
      font-weight: 500
    }

    .hist-ts {
      color: rgba(255, 255, 255, .28);
      font-size: 10.5px;
      margin-top: 1px
    }

    .hist-add-row {
      display: flex;
      gap: 8px;
      margin-top: 10px
    }

    .hist-add-input {
      flex: 1;
      padding: 6px 10px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      color: var(--text);
      font-size: 12px;
      font-family: inherit;
      outline: none
    }

    .hist-add-input:focus {
      border-color: rgba(245, 197, 24, .3)
    }

    .hist-add-btn {
      padding: 6px 12px;
      background: rgba(245, 197, 24, .12);
      border: 1px solid rgba(245, 197, 24, .25);
      border-radius: 8px;
      color: #f5c518;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap
    }

    .hist-add-btn:hover {
      background: rgba(245, 197, 24, .2)
    }

    .hist-empty {
      text-align: center;
      color: rgba(255, 255, 255, .2);
      font-size: 11.5px;
      padding: 10px 0
    }

    /* ═══════════════════════════════════════════
   SIDEBAR NAVEGAÇÃO LATERAL
═══════════════════════════════════════════ */
    #sb {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: 72px;
      z-index: 8000;
      background: linear-gradient(180deg, #080b13 0%, #07090f 100%);
      border-right: 1px solid rgba(255, 255, 255, .07);
      display: none;
      flex-direction: column;
      align-items: center;
      padding: 10px 0 0;
      overflow: hidden;
      box-shadow: 3px 0 24px rgba(0, 0, 0, .5);
    }

    body.sb-active #sb {
      display: flex
    }

    body.sb-active #master-nav {
      display: none !important
    }

    body.sb-active #header {
      top: 0
    }

    body.sb-active .mc-header {
      top: 0
    }

    body.sb-active .mc-nav {
      top: 70px
    }

    body.sb-active #wa-float-btn {
      display: none !important
    }

    body.sb-active #wa-panel {
      display: none !important
    }

    body.sb-active #wa-panel-overlay {
      display: none !important
    }

    body.sb-active #module-crm,
    body.sb-active #module-obj,
    body.sb-active #module-wa,
    body.sb-active #module-ocaf-obj,
    body.sb-active #module-prospeccao,
    body.sb-active #module-ajuda,
    body.sb-active #module-admin,
    body.sb-active #module-usage-analytics,
    body.sb-active #module-prioridades,
    body.sb-active #module-reativacao,
    body.sb-active #module-agenda,
    body.sb-active #module-documentacao,
    body.sb-active #module-comissao,
    body.sb-active #module-campanhas,
    body.sb-active #module-eficiencia,
    body.sb-active #module-lgpd,
    body.sb-active #module-lgpd-admin {
      margin-left: 76px
    }

    .sb-logo {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      flex-shrink: 0;
      background: linear-gradient(135deg, #f5c518, #e09b00);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      cursor: pointer;
      margin-bottom: 10px;
      box-shadow: 0 4px 16px rgba(245, 197, 24, .32);
      transition: transform .2s, box-shadow .2s;
    }

    .sb-logo:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 22px rgba(245, 197, 24, .5)
    }

    .sb-logo.active {
      box-shadow: 0 0 0 2px #fff, 0 6px 22px rgba(245, 197, 24, .55);
      transform: scale(1.04)
    }

    .sb-item {
      width: 58px;
      height: 52px;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      cursor: pointer;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, .35);
      font-family: Outfit, sans-serif;
      position: relative;
      flex-shrink: 0;
      transition: background .16s, color .16s, transform .13s;
    }

    .sb-item:hover {
      background: rgba(255, 255, 255, .07);
      color: rgba(255, 255, 255, .85);
      transform: scale(1.05)
    }

    .sb-item:active {
      transform: scale(.97)
    }

    .sb-item.active {
      background: rgba(245, 197, 24, .13);
      color: #f5c518
    }

    .sb-item.sb-wa {
      color: rgba(37, 211, 102, .55)
    }

    .sb-item.sb-wa:hover {
      background: rgba(37, 211, 102, .08);
      color: #25d366
    }

    .sb-item.sb-wa.active {
      background: rgba(37, 211, 102, .14);
      color: #25d366
    }

    .sb-icon {
      font-size: 18px;
      line-height: 1;
      text-align: center
    }

    .sb-lbl {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      line-height: 1;
      text-align: center
    }

    .sb-item.active .sb-lbl {
      color: inherit
    }

    .sb-tip {
      position: absolute;
      left: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%);
      background: #1c2038;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 8px;
      padding: 5px 11px;
      font-size: 11.5px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .14s;
      z-index: 9999;
      box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
    }

    .sb-tip::before {
      content: '';
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      border: 5px solid transparent;
      border-right-color: #1c2038;
    }

    .sb-item:hover .sb-tip {
      opacity: 1
    }

    .sb-sep {
      width: 34px;
      height: 1px;
      background: rgba(255, 255, 255, .08);
      margin: 5px 0;
      flex-shrink: 0
    }

    .sb-space {
      flex: 1
    }

    .sb-badge {
      position: absolute;
      top: 5px;
      right: 5px;
      background: #f5c518;
      color: #07090f;
      font-size: 8px;
      font-weight: 800;
      min-width: 15px;
      height: 15px;
      border-radius: 8px;
      padding: 0 3px;
      display: none;
      align-items: center;
      justify-content: center;
      font-family: Outfit, sans-serif;
      border: 1.5px solid #07090f;
      box-sizing: border-box;
    }

    /* ═══════════════════════════════════════════
   MÓDULO WHATSAPP EMBUTIDO
═══════════════════════════════════════════ */
    #module-wa {
      display: none;
      flex-direction: column;
      min-height: 100vh;
      background: #0a0e17;
    }

    #module-wa.sb-show {
      display: flex
    }

    #module-wa.wa-has-safe-fallback {
      display: flex !important;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background:
        radial-gradient(80% 120% at 50% 0%, rgba(37,211,102,.10), transparent 58%),
        linear-gradient(180deg, #070a13 0%, #0a0e17 100%) !important;
    }

    #module-wa.wa-has-safe-fallback > :not(#wa-safe-fallback) {
      display: none !important;
    }

    #wa-safe-fallback[hidden] {
      display: none !important;
    }

    #wa-safe-fallback {
      width: 100%;
      min-height: 100vh;
      padding: 28px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .wa-safe-fallback-card {
      width: min(100%, 460px);
      padding: 30px 28px;
      border-radius: 18px;
      text-align: center;
      color: #eef2ff;
      background: linear-gradient(180deg, rgba(17,24,39,.96), rgba(7,10,19,.98));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
    }

    .wa-safe-fallback-icon {
      width: 42px;
      height: 42px;
      margin: 0 auto 14px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      font-weight: 900;
      color: #04130d;
      background: linear-gradient(135deg, #25d366, #10b981);
      box-shadow: 0 12px 28px rgba(16,185,129,.22);
    }

    .wa-safe-fallback-kicker {
      margin: 0 0 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #25d366;
    }

    .wa-safe-fallback-card h3 {
      margin: 0 0 10px;
      font-size: 20px;
      line-height: 1.25;
      font-weight: 800;
      color: #fff;
    }

    .wa-safe-fallback-card p:not(.wa-safe-fallback-kicker) {
      margin: 0 auto 20px;
      max-width: 34ch;
      font-size: 13px;
      line-height: 1.6;
      color: rgba(238,242,255,.70);
    }

    #wa-safe-retry-btn {
      height: 40px;
      padding: 0 18px;
      border: 0;
      border-radius: 11px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      color: #04130d;
      background: #25d366;
      box-shadow: 0 12px 28px rgba(37,211,102,.18);
    }

    #wa-safe-retry-btn:hover {
      filter: brightness(1.05);
    }

    body[data-theme="light"] #module-wa.wa-has-safe-fallback {
      background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
    }

    body[data-theme="light"] .wa-safe-fallback-card {
      color: #0f172a;
      background: #ffffff;
      border-color: rgba(15,23,42,.10);
      box-shadow: 0 24px 60px rgba(15,23,42,.12);
    }

    body[data-theme="light"] .wa-safe-fallback-card h3 {
      color: #0f172a;
    }

    body[data-theme="light"] .wa-safe-fallback-card p:not(.wa-safe-fallback-kicker) {
      color: #475569;
    }

    .wa-mod-hdr {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 20px;
      background: #0d1117;
      border-bottom: 1px solid rgba(37, 211, 102, .16);
      flex-shrink: 0;
      min-height: 52px;
      box-sizing: border-box;
    }

    .wa-mod-logo {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(135deg, #25d366, #128c7e);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .wa-mod-info {
      flex: 1;
      min-width: 0
    }

    .wa-mod-title {
      font-size: 13.5px;
      font-weight: 800;
      color: #fff
    }

    .wa-mod-sub {
      font-size: 11px;
      color: rgba(255, 255, 255, .38);
      margin-top: 1px
    }

    .wa-mod-acts {
      margin-left: auto;
      display: flex;
      gap: 7px;
      flex-shrink: 0;
      align-items: center
    }

    .wa-hbtn {
      padding: 6px 13px;
      border-radius: 9px;
      border: 1px solid rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .06);
      color: rgba(255, 255, 255, .7);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: Outfit, sans-serif;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all .15s;
      white-space: nowrap;
    }

    .wa-hbtn:hover {
      background: rgba(255, 255, 255, .12);
      color: #fff;
      border-color: rgba(255, 255, 255, .22)
    }

    .wa-hbtn.g {
      background: rgba(37, 211, 102, .1);
      color: #25d366;
      border-color: rgba(37, 211, 102, .28)
    }

    .wa-hbtn.g:hover {
      background: rgba(37, 211, 102, .2);
      border-color: rgba(37, 211, 102, .45)
    }

    /* WA Hub — Split Screen Layout */
    #wa-chat-list {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .1) transparent
    }

    #wa-chat-list::-webkit-scrollbar {
      width: 4px
    }

    #wa-chat-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .1);
      border-radius: 2px
    }

    #wa-messages-box {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .08) transparent
    }

    #wa-messages-box::-webkit-scrollbar {
      width: 4px
    }

    #wa-messages-box::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .08);
      border-radius: 2px
    }

    #wa-quick-scripts-bar {
      scrollbar-width: none
    }

    #wa-quick-scripts-bar::-webkit-scrollbar {
      display: none
    }

    .wa-chat-sidebar {
      width: 320px;
      border-right: 1px solid rgba(255, 255, 255, .07);
      display: flex;
      flex-direction: column;
      background: #0d0f1a;
      flex-shrink: 0
    }

    .wa-chat-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #07090f;
      min-width: 0
    }

    @media(max-width:767px) {
      .wa-chat-sidebar {
        width: 100%
      }

      .wa-chat-main {
        display: none
      }

      #module-wa .wa-chat-sidebar.wa-has-active~.wa-chat-main {
        display: flex
      }

      #module-wa .wa-chat-sidebar.wa-has-active {
        display: none
      }
    }

    /* Mobile → bottom navigation */
    @media(max-width:767px) {
      #sb {
        width: 100vw;
        height: 58px;
        flex-direction: row;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, .09);
        padding: 0 2px;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: space-around;
        align-items: center;
        backdrop-filter: blur(16px);
        background: rgba(7, 9, 15, .97);
      }

      .sb-logo {
        display: none
      }

      .sb-sep,
      .sb-space {
        display: none
      }

      .sb-tip {
        display: none
      }

      .sb-item {
        width: 50px;
        height: 50px;
        border-radius: 10px
      }

      .sb-icon {
        font-size: 17px
      }

      .sb-lbl {
        font-size: 7.5px
      }

      body.sb-active #module-crm,
      body.sb-active #module-obj,
      body.sb-active #module-wa,
      body.sb-active #module-ocaf-obj,
      body.sb-active #module-prospeccao,
      body.sb-active #module-ajuda,
      body.sb-active #module-admin,
      body.sb-active #module-usage-analytics,
      body.sb-active #module-prioridades,
      body.sb-active #module-reativacao,
      body.sb-active #module-agenda,
      body.sb-active #module-documentacao,
      body.sb-active #module-comissao,
      body.sb-active #module-campanhas,
      body.sb-active #module-eficiencia,
      body.sb-active #module-lgpd,
      body.sb-active #module-lgpd-admin {
        margin-left: 0;
        margin-bottom: 58px
      }

      .wa-mod-hdr {
        padding: 8px 14px
      }

      .wa-hbtn span:not(.ico) {
        display: none
      }

      .wa-land-card {
        padding: 28px 20px
      }
    }

    /* ═══════════════════════════════════════════════════════
   DASHBOARD INTELIGENTE — 7 melhorias abaixo dos KPIs
═══════════════════════════════════════════════════════ */
    #dashboard-inteligente {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 4px;
    }

    /* Seção genérica */
    .di-section {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 20px 22px;
    }

    .di-section-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: .02em;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .di-section-title span {
      font-size: 16px;
    }

    /* ── Melhoria 1: Prioridades do Dia ── */
    .prio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 12px;
    }

    .prio-card {
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: border-color .18s, background .18s;
      position: relative;
      overflow: hidden;
    }

    .prio-card:hover {
      background: rgba(255, 255, 255, .055);
    }

    .prio-card-accent {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      border-radius: 3px 0 0 3px;
    }

    .prio-card-num {
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
    }

    .prio-card-title {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text);
      margin-top: 2px;
    }

    .prio-card-desc {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
    }

    .prio-card-cta {
      margin-top: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--acc);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      text-align: left;
      opacity: .85;
      transition: opacity .15s;
    }

    .prio-card-cta:hover {
      opacity: 1;
    }

    .prio-card-zero .prio-card-num {
      color: var(--muted2);
    }

    .prio-card-zero .prio-card-accent {
      background: var(--border) !important;
    }

    /* ── Melhoria 2: Leads que Esfriam ── */
    .di-chart-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .di-chart-bars {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 80px;
    }

    .di-bar-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      flex: 1;
    }

    .di-bar {
      width: 100%;
      border-radius: 4px 4px 0 0;
      background: linear-gradient(180deg, var(--acc2), var(--acc));
      transition: height .6s cubic-bezier(.22, 1, .36, 1);
      min-height: 4px;
    }

    .di-bar-lbl {
      font-size: 9.5px;
      color: var(--muted);
      font-weight: 600;
    }

    .di-bar-val {
      font-size: 10px;
      color: var(--text);
      font-weight: 700;
    }

    .di-chart-note {
      font-size: 10.5px;
      color: var(--muted2);
      font-style: italic;
      margin-top: 4px;
    }

    /* ── Melhoria 3: Ranking de Ações ── */
    .ranking-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
    }

    .ranking-card {
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      text-align: center;
    }

    .ranking-card-icon {
      font-size: 22px;
      margin-bottom: 6px;
    }

    .ranking-card-today {
      font-size: 26px;
      font-weight: 800;
      color: var(--text);
      line-height: 1;
    }

    .ranking-card-label {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }

    .ranking-card-avg {
      font-size: 11px;
      color: var(--muted2);
      margin-top: 2px;
    }

    .ranking-arrow-up {
      color: #10d98a;
      font-weight: 800;
    }

    .ranking-arrow-down {
      color: #ff4d6d;
      font-weight: 800;
    }

    .ranking-arrow-eq {
      color: var(--muted2);
    }

    .ranking-log-btn {
      font-size: 11px;
      font-weight: 600;
      color: var(--acc);
      background: rgba(245, 197, 24, .08);
      border: 1px solid rgba(245, 197, 24, .18);
      border-radius: 8px;
      padding: 5px 12px;
      cursor: pointer;
      margin-top: 10px;
      transition: background .15s;
    }

    .ranking-log-btn:hover {
      background: rgba(245, 197, 24, .15);
    }

    /* ── Melhoria 4: Alerta Contextual ── */
    .di-alerta {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(255, 193, 7, .07);
      border: 1px solid rgba(255, 193, 7, .2);
      border-radius: 12px;
      padding: 14px 18px;
    }

    .di-alerta-msg {
      flex: 1;
      font-size: 13px;
      color: var(--text);
      line-height: 1.5;
    }

    .di-alerta-btn {
      font-size: 11.5px;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      padding: 7px 14px;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity .15s;
    }

    .di-alerta-btn:hover {
      opacity: .8;
    }

    .di-alerta-close {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted);
      margin-left: 6px;
    }

    .di-alerta-more {
      background: rgba(245, 197, 24, .12);
      border: 1px solid rgba(245, 197, 24, .3);
      color: var(--acc);
    }

    /* ── Melhoria 5: Checklist do Dia ── */
    .di-checklist {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .di-check-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .02);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: background .15s;
    }

    .di-check-item:hover {
      background: rgba(255, 255, 255, .045);
    }

    .di-check-item.done {
      opacity: .5;
    }

    .di-check-item.done .di-check-text {
      text-decoration: line-through;
      color: var(--muted2);
    }

    .di-check-box {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      border: 2px solid var(--border);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      transition: background .15s, border-color .15s;
      margin-top: 1px;
    }

    .di-check-item.done .di-check-box {
      background: var(--green);
      border-color: var(--green);
      color: #fff;
    }

    .di-check-text {
      font-size: 12.5px;
      color: var(--text);
      line-height: 1.4;
    }

    .di-checklist-footer {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 4px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .di-conclude-btn {
      font-size: 12px;
      font-weight: 600;
      border-radius: 9px;
      padding: 8px 18px;
      cursor: pointer;
      border: none;
      background: rgba(16, 217, 138, .12);
      color: var(--green);
      border: 1px solid rgba(16, 217, 138, .22);
      transition: background .15s;
    }

    .di-conclude-btn:hover {
      background: rgba(16, 217, 138, .22);
    }

    /* ── Melhoria 6: Previsão de Comissão ── */
    .comm-prev-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    @media(max-width:640px) {
      .comm-prev-grid {
        grid-template-columns: 1fr;
      }
    }

    .comm-prev-val {
      font-size: 28px;
      font-weight: 800;
      color: var(--green);
      line-height: 1;
    }

    .comm-prev-sub {
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 4px;
    }

    .comm-prev-prog-wrap {
      background: rgba(255, 255, 255, .06);
      border-radius: 6px;
      height: 8px;
      overflow: hidden;
      margin-top: 12px;
    }

    .comm-prev-prog {
      height: 100%;
      border-radius: 6px;
      background: linear-gradient(90deg, var(--green), #34d399);
      transition: width 1s cubic-bezier(.22, 1, .36, 1);
    }

    .comm-prev-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 6px;
    }

    /* ── Melhoria 7: Busca Rápida ── */
    .di-busca-wrap {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .di-busca-inp {
      width: 100%;
      padding: 11px 16px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text);
      font-size: 13px;
      outline: none;
      transition: border-color .18s;
      font-family: Outfit, sans-serif;
    }

    .di-busca-inp:focus {
      border-color: rgba(245, 197, 24, .4);
    }

    .di-busca-inp::placeholder {
      color: var(--muted2);
    }

    #sugestoesBusca {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .di-sug-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      cursor: pointer;
      font-size: 12.5px;
      color: var(--text);
      transition: background .15s, border-color .15s;
    }

    .di-sug-item:hover {
      background: rgba(245, 197, 24, .06);
      border-color: rgba(245, 197, 24, .2);
    }

    .di-sug-icon {
      font-size: 16px;
      flex-shrink: 0;
    }

    .di-sug-text {
      flex: 1;
      line-height: 1.4;
    }

    .di-sug-action {
      font-size: 11px;
      color: var(--acc);
      font-weight: 600;
      background: rgba(245, 197, 24, .08);
      border: 1px solid rgba(245, 197, 24, .2);
      border-radius: 6px;
      padding: 3px 9px;
      white-space: nowrap;
    }

    /* ── Pendentes de Atualização ── */
    .di-pending-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .di-pending-card {
      display: flex;
      align-items: stretch;
      border-radius: 11px;
      border: 1px solid var(--border);
      overflow: hidden;
      background: rgba(255, 255, 255, .025);
      transition: background .15s, border-color .15s;
    }

    .di-pending-card:hover {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .1);
    }

    .di-pend-stripe {
      width: 4px;
      flex-shrink: 0;
    }

    .di-pend-body {
      flex: 1;
      padding: 10px 12px;
      min-width: 0;
    }

    .di-pend-line1 {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .di-pend-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
    }

    .di-pend-status {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 5px;
      white-space: nowrap;
      flex-shrink: 0;
      letter-spacing: .03em;
    }

    .di-pend-days {
      font-size: 11.5px;
      font-weight: 800;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .di-pend-line2 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 5px;
      flex-wrap: wrap;
    }

    .di-pend-qual {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .di-pend-phone {
      font-size: 11.5px;
      font-weight: 600;
      color: #4ade80;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .di-pend-phone:hover {
      text-decoration: underline;
    }

    .di-pend-obs {
      font-size: 11px;
      color: var(--muted2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
      flex: 1;
      font-style: italic;
    }

    .di-pend-actions {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 8px 10px;
      align-items: flex-end;
      justify-content: center;
      flex-shrink: 0;
    }

    .di-pend-wa {
      font-size: 11px;
      font-weight: 700;
      padding: 5px 11px;
      border-radius: 7px;
      border: 1px solid rgba(74, 222, 128, .25);
      cursor: pointer;
      background: rgba(74, 222, 128, .08);
      color: #4ade80;
      font-family: inherit;
      white-space: nowrap;
      transition: all .15s;
    }

    .di-pend-wa:hover {
      background: rgba(74, 222, 128, .2);
      border-color: rgba(74, 222, 128, .45);
    }

    .di-pend-edit {
      font-size: 11px;
      font-weight: 700;
      padding: 5px 11px;
      border-radius: 7px;
      border: 1px solid rgba(245, 197, 24, .2);
      cursor: pointer;
      background: rgba(245, 197, 24, .07);
      color: #f5c518;
      font-family: inherit;
      white-space: nowrap;
      transition: all .15s;
    }

    .di-pend-edit:hover {
      background: rgba(245, 197, 24, .18);
      border-color: rgba(245, 197, 24, .4);
    }

    .di-pending-empty {
      text-align: center;
      padding: 22px 0;
      color: var(--green);
      font-size: 13px;
      font-weight: 600;
    }

    .di-pending-footer {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--muted);
    }

    .di-pending-footer-link {
      color: var(--acc);
      font-weight: 600;
      cursor: pointer;
      background: none;
      border: none;
      font-size: 12px;
      font-family: inherit;
    }

    .di-pending-footer-link:hover {
      text-decoration: underline;
    }

    /* Light theme overrides */
    [data-theme="light"] .prio-card {
      background: rgba(15, 23, 42, .02);
    }

    [data-theme="light"] .prio-card:hover {
      background: rgba(15, 23, 42, .04);
    }

    [data-theme="light"] .di-section {
      background: #ffffff;
    }

    [data-theme="light"] .ranking-card {
      background: rgba(15, 23, 42, .02);
    }

    [data-theme="light"] .di-check-item {
      background: rgba(15, 23, 42, .02);
    }

    [data-theme="light"] .di-check-item:hover {
      background: rgba(15, 23, 42, .04);
    }

    [data-theme="light"] .di-pending-card {
      background: rgba(15, 23, 42, .02);
      border-color: rgba(15, 23, 42, .08);
    }

    [data-theme="light"] .di-pending-card:hover {
      background: rgba(15, 23, 42, .04);
      border-color: rgba(15, 23, 42, .14);
    }

    [data-theme="light"] .di-pend-name {
      color: #0f172a;
    }

    [data-theme="light"] .di-pend-qual {
      color: #64748b;
    }

    [data-theme="light"] .di-pend-obs {
      color: #94a3b8;
    }

    [data-theme="light"] .di-pend-wa {
      background: rgba(22, 163, 74, .08);
      color: #16a34a;
      border-color: rgba(22, 163, 74, .25);
    }

    [data-theme="light"] .di-pend-wa:hover {
      background: rgba(22, 163, 74, .16);
    }

    [data-theme="light"] .di-pend-edit {
      background: rgba(202, 138, 4, .07);
      color: #92400e;
      border-color: rgba(202, 138, 4, .2);
    }

    [data-theme="light"] .di-pend-edit:hover {
      background: rgba(202, 138, 4, .15);
    }

    [data-theme="light"] .di-pending-footer {
      border-color: rgba(15, 23, 42, .1);
      color: #64748b;
    }

    [data-theme="light"] .di-busca-inp {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, .12);
      color: #0f172a;
    }

    [data-theme="light"] .di-sug-item {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .di-sug-item:hover {
      background: rgba(202, 138, 4, .06);
    }

    [data-theme="light"] .di-alerta {
      background: rgba(202, 138, 4, .06);
      border-color: rgba(202, 138, 4, .2);
    }

    /* ═══════════════════════════════════════════════════════
   LANDING GATE — tela de vendas / ativação de licença
═══════════════════════════════════════════════════════ */
    #landing-gate {
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: #07090f;
      overflow-y: auto;
      font-family: 'Outfit', sans-serif;
    }

    /* hero */
    .lg-hero {
      position: relative;
      overflow: hidden;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 24px 80px;
    }

    .lg-hero-bg {
      position: absolute;
      inset: 0;
      pointer-events: none
    }

    .lg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      animation: ajudaOrb 18s ease-in-out infinite
    }

    .lg-orb-1 {
      width: 520px;
      height: 520px;
      background: radial-gradient(circle, rgba(245, 197, 24, .14), transparent 70%);
      top: -120px;
      left: 50%;
      transform: translateX(-50%)
    }

    .lg-orb-2 {
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(77, 159, 255, .10), transparent 70%);
      bottom: 0;
      right: 5%;
      animation-delay: -7s;
      animation-duration: 14s
    }

    .lg-orb-3 {
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(16, 217, 138, .08), transparent 70%);
      top: 30%;
      left: 5%;
      animation-delay: -3s;
      animation-duration: 20s
    }

    .lg-hero-inner {
      position: relative;
      z-index: 1;
      max-width: 760px;
      text-align: center;
    }

    .lg-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(245, 197, 24, .08);
      border: 1px solid rgba(245, 197, 24, .2);
      color: rgba(245, 197, 24, .9);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .5px;
      padding: 6px 16px;
      border-radius: 99px;
      margin-bottom: 28px;
      animation: ajudaBadgePop .6s cubic-bezier(.34, 1.56, .64, 1) both;
    }

    .lg-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #f5c518;
      animation: glowPulse 2s ease-in-out infinite
    }

    .lg-title {
      font-size: clamp(38px, 6vw, 72px);
      font-weight: 900;
      color: #fff;
      letter-spacing: -2px;
      line-height: 1.05;
      margin-bottom: 20px;
      text-wrap: balance;
      animation: ajudaReveal .8s cubic-bezier(.22, 1, .36, 1) .15s both;
    }

    .lg-title span {
      background: linear-gradient(135deg, #f5c518 0%, #fb923c 60%, #ff4d6d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    /* ── Animated Text Cycle ── */
    .animated-text-cycle {
      display: inline-block;
      position: relative;
      white-space: nowrap;
      font-weight: 900;
      background: linear-gradient(135deg, #facc15, #fb923c, #ef4444);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      transition: opacity .28s ease, transform .28s ease, filter .28s ease;
      will-change: opacity, transform, filter;
    }

    .animated-text-cycle.is-exiting {
      opacity: 0;
      transform: translateY(16px);
      filter: blur(8px)
    }

    .animated-text-cycle.is-entering {
      opacity: 0;
      transform: translateY(-16px);
      filter: blur(8px)
    }

    .animated-text-cycle.is-visible {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0)
    }

    @media(max-width:768px) {
      .animated-text-cycle {
        white-space: normal;
        display: inline
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .animated-text-cycle {
        transition: none !important;
        transform: none !important;
        filter: none !important
      }
    }

    .lg-sub {
      font-size: clamp(15px, 2vw, 18px);
      color: rgba(255, 255, 255, .5);
      max-width: 580px;
      margin: 0 auto 40px;
      line-height: 1.7;
      animation: ajudaReveal .8s cubic-bezier(.22, 1, .36, 1) .3s both;
    }

    .lg-cta-row {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      animation: ajudaReveal .8s cubic-bezier(.22, 1, .36, 1) .45s both
    }

    .lg-btn-buy {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #f5c518;
      color: #07090f;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -.2px;
      padding: 16px 32px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
      box-shadow: 0 4px 32px rgba(245, 197, 24, .35);
    }

    .lg-btn-buy:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 8px 48px rgba(245, 197, 24, .5)
    }

    .lg-btn-buy:active {
      transform: scale(.97)
    }

    .lg-btn-activate {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .05);
      color: rgba(255, 255, 255, .65);
      font-size: 14px;
      font-weight: 600;
      padding: 16px 28px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .1);
      cursor: pointer;
      transition: all .2s;
    }

    .lg-btn-activate:hover {
      background: rgba(255, 255, 255, .09);
      color: #fff;
      border-color: rgba(255, 255, 255, .2)
    }

    /* stats bar */
    .lg-stats {
      display: flex;
      gap: 40px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 60px;
      padding-top: 40px;
      border-top: 1px solid rgba(255, 255, 255, .06);
      animation: ajudaReveal .8s cubic-bezier(.22, 1, .36, 1) .6s both;
    }

    .lg-stat-val {
      font-size: 28px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -1px
    }

    .lg-stat-lbl {
      font-size: 12px;
      color: rgba(255, 255, 255, .35);
      margin-top: 4px;
      font-weight: 500
    }

    /* features section */
    .lg-section {
      max-width: 1000px;
      margin: 0 auto;
      padding: 80px 24px
    }

    .lg-sec-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(245, 197, 24, .7);
      margin-bottom: 12px
    }

    .lg-sec-title {
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 800;
      color: #fff;
      letter-spacing: -1px;
      line-height: 1.15;
      margin-bottom: 10px;
      text-wrap: balance
    }

    .lg-sec-sub {
      font-size: 15px;
      color: rgba(255, 255, 255, .4);
      max-width: 500px;
      line-height: 1.65
    }

    .lg-features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-top: 48px;
    }

    .lg-feat {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 16px;
      padding: 24px;
      transition: border-color .25s, background .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
      position: relative;
      overflow: hidden;
    }

    .lg-feat:hover {
      border-color: rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .05);
      transform: translateY(-3px)
    }

    .lg-feat-icon {
      font-size: 26px;
      margin-bottom: 14px;
      display: inline-block
    }

    .lg-feat-title {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 7px
    }

    .lg-feat-desc {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .38);
      line-height: 1.6
    }

    /* pricing */
    .lg-pricing-wrap {
      max-width: 1040px;
      margin: 0 auto;
      padding: 0 24px 100px
    }

    .lg-pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 48px
    }

    .lg-plan {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 20px;
      padding: 32px 28px;
      position: relative;
      transition: transform .25s, box-shadow .25s;
      display: flex;
      flex-direction: column;
    }

    .lg-plan:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(0, 0, 0, .4)
    }

    .lg-plan-pro {
      background: linear-gradient(145deg, rgba(245, 197, 24, .07), rgba(251, 146, 60, .04));
      border-color: rgba(245, 197, 24, .3);
      box-shadow: 0 0 0 1px rgba(245, 197, 24, .12), 0 8px 40px rgba(245, 197, 24, .08);
    }

    .lg-plan-pro:hover {
      box-shadow: 0 0 0 1px rgba(245, 197, 24, .25), 0 20px 60px rgba(245, 197, 24, .12)
    }

    .lg-plan-badge {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, #f5c518, #fb923c);
      color: #07090f;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .5px;
      padding: 4px 16px;
      border-radius: 99px;
      white-space: nowrap;
    }

    .lg-plan-name {
      font-size: 13px;
      font-weight: 800;
      color: rgba(255, 255, 255, .55);
      letter-spacing: .6px;
      text-transform: uppercase;
      margin-bottom: 4px
    }

    .lg-plan-sub {
      font-size: 12px;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 16px;
      font-weight: 500
    }

    .lg-plan-price {
      font-size: 46px;
      font-weight: 900;
      color: #fff;
      letter-spacing: -2px;
      line-height: 1
    }

    .lg-plan-price sup {
      font-size: 20px;
      font-weight: 700;
      vertical-align: top;
      margin-top: 10px;
      color: rgba(255, 255, 255, .6)
    }

    .lg-plan-price-note {
      font-size: 12px;
      color: rgba(255, 255, 255, .3);
      margin-top: 6px
    }

    .lg-plan-desc {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .4);
      margin-top: 10px;
      margin-bottom: 4px;
      line-height: 1.55
    }

    .lg-plan-divider {
      height: 1px;
      background: rgba(255, 255, 255, .07);
      margin: 20px 0
    }

    .lg-plan-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1
    }

    .lg-plan-features li {
      font-size: 13px;
      color: rgba(255, 255, 255, .55);
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.45
    }

    .lg-plan-features li::before {
      content: '✓';
      color: #10d98a;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px
    }

    .lg-plan-features li.no::before {
      content: '✗';
      color: rgba(255, 255, 255, .2)
    }

    .lg-plan-features li.no {
      color: rgba(255, 255, 255, .25)
    }

    .lg-plan-cta {
      display: block;
      width: 100%;
      text-align: center;
      padding: 14px;
      border-radius: 10px;
      margin-top: 28px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      border: none;
      transition: all .2s cubic-bezier(.34, 1.56, .64, 1);
      text-decoration: none;
    }

    .lg-plan-cta-ghost {
      background: rgba(255, 255, 255, .06);
      color: rgba(255, 255, 255, .7);
      border: 1px solid rgba(255, 255, 255, .1)
    }

    .lg-plan-cta-ghost:hover {
      background: rgba(255, 255, 255, .1);
      color: #fff
    }

    .lg-plan-cta-pro {
      background: linear-gradient(135deg, #f5c518, #fb923c);
      color: #07090f;
      box-shadow: 0 4px 24px rgba(245, 197, 24, .3)
    }

    .lg-plan-cta-pro:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 40px rgba(245, 197, 24, .45)
    }

    /* billing toggle */
    .billing-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin: 28px auto 0;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 40px;
      padding: 4px;
      width: fit-content
    }

    .toggle-option {
      padding: 8px 22px;
      border-radius: 36px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, .45);
      transition: all .2s ease;
      white-space: nowrap;
      letter-spacing: .01em
    }

    .toggle-option.active {
      background: linear-gradient(135deg, #f5c518, #fb923c);
      color: #07090f;
      box-shadow: 0 2px 12px rgba(245, 197, 24, .3)
    }

    .toggle-option .toggle-badge {
      display: inline-block;
      margin-left: 6px;
      padding: 2px 7px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      background: rgba(34, 197, 94, .2);
      color: #4ade80;
      vertical-align: middle;
      line-height: 1.4
    }

    .toggle-option.active .toggle-badge {
      background: rgba(7, 9, 15, .2);
      color: #07090f
    }

    .plan-savings {
      font-size: 11.5px;
      color: #4ade80;
      font-weight: 600;
      margin-top: 7px;
      min-height: 18px;
      transition: opacity .2s
    }

    .plan-savings:empty {
      min-height: 0;
      margin-top: 0
    }

    /* footer da landing */
    .lg-footer {
      text-align: center;
      padding: 40px 24px 60px;
      border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .lg-footer-title {
      font-size: 18px;
      font-weight: 700;
      color: rgba(255, 255, 255, .6);
      margin-bottom: 8px
    }

    .lg-footer-sub {
      font-size: 13px;
      color: rgba(255, 255, 255, .25);
      margin-bottom: 24px
    }

    .lg-already {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, .45);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      background: none;
      transition: color .2s;
      text-decoration: underline;
      text-decoration-color: transparent;
    }

    .lg-already:hover {
      color: rgba(255, 255, 255, .8);
      text-decoration-color: rgba(255, 255, 255, .4)
    }

    /* horizontal divider between sections */
    .lg-sep {
      width: 80px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .4), transparent);
      margin: 0 auto 48px
    }

    /* guarantee */
    .lg-guarantee {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: rgba(16, 217, 138, .06);
      border: 1px solid rgba(16, 217, 138, .2);
      border-radius: 12px;
      padding: 14px 22px;
      margin-top: 24px;
      font-size: 13px;
      color: rgba(16, 217, 138, .85);
      font-weight: 500;
    }

    /* ── Google Sign-In button ── */
    .lg-btn-google {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      color: #1f1f1f;
      font-size: 15px;
      font-weight: 600;
      font-family: 'Outfit', sans-serif;
      padding: 14px 28px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      transition: box-shadow .2s, transform .2s cubic-bezier(.34, 1.56, .64, 1);
      box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
      white-space: nowrap;
    }

    .lg-btn-google:hover {
      box-shadow: 0 4px 24px rgba(0, 0, 0, .28);
      transform: translateY(-2px) scale(1.02)
    }

    .lg-btn-google:active {
      transform: scale(.97)
    }

    .lg-btn-google:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none
    }

    .lg-btn-google svg {
      flex-shrink: 0
    }

    /* Auth error block on landing */
    #lg-auth-error {
      display: none;
      align-items: flex-start;
      gap: 14px;
      background: rgba(255, 77, 109, .07);
      border: 1px solid rgba(255, 77, 109, .25);
      border-radius: 14px;
      padding: 20px 22px;
      max-width: 500px;
      margin: 0 auto 0;
      animation: ajudaReveal .4s cubic-bezier(.22, 1, .36, 1) both;
    }

    .lg-auth-error-icon {
      font-size: 22px;
      flex-shrink: 0;
      margin-top: 1px
    }

    .lg-auth-error-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #ff4d6d;
      margin-bottom: 4px
    }

    .lg-auth-error-msg {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .5);
      line-height: 1.6
    }

    .lg-auth-error-email {
      font-size: 11px;
      color: rgba(255, 255, 255, .3);
      margin-top: 6px;
      font-style: italic
    }

    .lg-auth-retry {
      margin-top: 14px;
      background: none;
      border: 1px solid rgba(255, 77, 109, .3);
      color: rgba(255, 77, 109, .8);
      font-size: 12px;
      font-weight: 600;
      padding: 7px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: all .2s;
    }

    .lg-auth-retry:hover {
      background: rgba(255, 77, 109, .08);
      border-color: rgba(255, 77, 109, .5);
      color: #ff4d6d
    }

    /* Loading spinner inline */
    @keyframes lgSpin {
      to {
        transform: rotate(360deg)
      }
    }

    .lg-spinner {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 2px solid rgba(31, 31, 31, .15);
      border-top-color: #1f1f1f;
      animation: lgSpin .7s linear infinite;
    }

    /* ── User badge no sidebar ── */
    .sb-user {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      margin: 0 6px 6px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 10px;
      cursor: default;
      min-width: 0;
    }

    .sb-user-photo {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      border: 1.5px solid rgba(255, 255, 255, .12);
    }

    .sb-user-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(135deg, #f5c518, #fb923c);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: #07090f;
    }

    .sb-user-info {
      flex: 1;
      min-width: 0;
      overflow: hidden
    }

    .sb-user-name {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .8);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .sb-user-role {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .2px;
      margin-top: 1px
    }

    .sb-logout {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      flex-shrink: 0;
      background: rgba(255, 77, 109, .08);
      border: 1px solid rgba(255, 77, 109, .15);
      color: rgba(255, 77, 109, .6);
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
      padding: 0;
    }

    .sb-logout:hover {
      background: rgba(255, 77, 109, .16);
      color: #ff4d6d;
      border-color: rgba(255, 77, 109, .4)
    }

    /* viewer: desabilita ações destrutivas */
    body[data-role="viewer"] .btn-novo-lead,
    body[data-role="viewer"] .modal-save-btn,
    body[data-role="viewer"] [onclick*="openModal('add'"],
    body[data-role="viewer"] [onclick*="saveLead"] {
      opacity: .4;
      pointer-events: none;
      cursor: not-allowed;
    }

    /* ── ACTIVATION MODAL ── */
    #act-overlay {
      position: fixed;
      inset: 0;
      z-index: 999999;
      background: rgba(0, 0, 0, .75);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    #act-overlay.open {
      display: flex
    }

    .act-box {
      background: #0f1319;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 20px;
      padding: 40px 36px;
      max-width: 440px;
      width: 100%;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .7);
      animation: ajudaReveal .45s cubic-bezier(.22, 1, .36, 1) both;
    }

    .act-icon {
      font-size: 36px;
      margin-bottom: 16px;
      display: block
    }

    .act-title {
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.5px;
      margin-bottom: 6px
    }

    .act-sub {
      font-size: 13px;
      color: rgba(255, 255, 255, .4);
      margin-bottom: 28px;
      line-height: 1.55
    }

    .act-label {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .4);
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 8px
    }

    .act-inp {
      width: 100%;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      color: #fff;
      font-size: 15px;
      font-family: 'Outfit', monospace;
      font-weight: 600;
      letter-spacing: 2px;
      padding: 14px 16px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      text-transform: uppercase;
    }

    .act-inp:focus {
      border-color: rgba(245, 197, 24, .5);
      box-shadow: 0 0 0 3px rgba(245, 197, 24, .1)
    }

    .act-inp::placeholder {
      color: rgba(255, 255, 255, .2);
      letter-spacing: 1px;
      text-transform: none
    }

    .act-btn {
      width: 100%;
      margin-top: 16px;
      background: linear-gradient(135deg, #f5c518, #fb923c);
      color: #07090f;
      font-size: 14px;
      font-weight: 800;
      padding: 15px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      transition: all .2s cubic-bezier(.34, 1.56, .64, 1);
      box-shadow: 0 4px 24px rgba(245, 197, 24, .25);
    }

    .act-btn:hover {
      transform: translateY(-1px) scale(1.02);
      box-shadow: 0 8px 36px rgba(245, 197, 24, .4)
    }

    .act-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none
    }

    .act-msg {
      margin-top: 14px;
      font-size: 12.5px;
      font-weight: 600;
      text-align: center;
      min-height: 20px
    }

    .act-msg.ok {
      color: #10d98a
    }

    .act-msg.err {
      color: #ff4d6d
    }

    .act-msg.loading {
      color: rgba(255, 255, 255, .45)
    }

    .act-back {
      display: block;
      margin-top: 20px;
      text-align: center;
      font-size: 12px;
      color: rgba(255, 255, 255, .3);
      cursor: pointer;
      border: none;
      background: none;
      transition: color .2s;
    }

    .act-back:hover {
      color: rgba(255, 255, 255, .6)
    }

    @media(max-width:600px) {
      .lg-title {
        font-size: 36px;
        letter-spacing: -1px
      }

      .lg-plan {
        padding: 24px 20px
      }

      .act-box {
        padding: 28px 22px
      }
    }

    /* ════════════════════════════════════════════════════════════
   REDESIGN — Sidebar + CTAs
   Substitui padrões genéricos de IA por design mais intencional
════════════════════════════════════════════════════════════ */

    /* Oculta master-nav permanentemente — navegação via sidebar */
    #master-nav {
      display: none !important;
    }

    /* ── Sidebar — estrutura com scroll interno ── */
    #sb {
      width: 76px;
      background: #07090f;
      border-right: 1px solid rgba(255, 255, 255, .06);
      padding: 8px 0 0;
      box-shadow: none;
      gap: 0;
      overflow: hidden;
      /* corta overflow; scroll acontece só no .sb-nav */
    }

    /* Logo e user badge nunca encolhem */
    #sb>.sb-logo {
      flex-shrink: 0;
    }

    #sb-user-badge {
      flex-shrink: 0;
      width: 100%;
    }

    /* Área scrollável — ocupa todo o espaço entre logo e user badge */
    .sb-nav {
      flex: 1;
      min-height: 0;
      /* necessário para flex scroll funcionar */
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 4px 0 8px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .1) transparent;
    }

    .sb-nav::-webkit-scrollbar {
      width: 3px;
    }

    .sb-nav::-webkit-scrollbar-track {
      background: transparent;
    }

    .sb-nav::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .12);
      border-radius: 999px;
    }

    .sb-nav::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, .22);
    }

    /* Logo / home ── squircle dourado */
    .sb-logo {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      background: #f5c518;
      box-shadow: 0 2px 8px rgba(245, 197, 24, .22);
      margin-bottom: 12px;
      transition: box-shadow .18s, transform .18s;
    }

    .sb-logo:hover {
      transform: none;
      box-shadow: 0 4px 16px rgba(245, 197, 24, .38);
    }

    .sb-logo.active {
      box-shadow: 0 0 0 2px rgba(255, 255, 255, .18), 0 4px 16px rgba(245, 197, 24, .35);
      transform: none;
    }

    /* Itens — sem scale, com left-indicator ativo */
    .sb-item {
      width: 64px;
      height: 52px;
      border-radius: 10px;
      gap: 4px;
      color: rgba(255, 255, 255, .3);
      transition: background .15s, color .15s;
      position: relative;
    }

    /* indicador lateral esquerdo para item ativo */
    .sb-item::before {
      content: '';
      position: absolute;
      left: -0px;
      top: 50%;
      transform: translateY(-50%);
      width: 2.5px;
      height: 0;
      border-radius: 0 2px 2px 0;
      background: #f5c518;
      transition: height .18s cubic-bezier(.22, 1, .36, 1);
    }

    .sb-item.active::before {
      height: 22px;
      left: -0px;
    }

    .sb-item:hover {
      background: rgba(255, 255, 255, .05);
      color: rgba(255, 255, 255, .7);
      transform: none;
      /* remove scale que causa layout shift */
    }

    .sb-item:active {
      transform: translateY(1px);
      background: rgba(255, 255, 255, .08);
    }

    .sb-item.active {
      background: rgba(245, 197, 24, .09);
      color: #f5c518;
    }

    /* WhatsApp — verde mais suave */
    .sb-item.sb-wa {
      color: rgba(37, 211, 102, .45);
    }

    .sb-item.sb-wa:hover {
      background: rgba(37, 211, 102, .06);
      color: #25d366;
    }

    .sb-item.sb-wa.active {
      background: rgba(37, 211, 102, .1);
      color: #25d366;
    }

    /* Ícones */
    .sb-icon {
      font-size: 17px;
      line-height: 1;
    }

    /* Labels — legíveis, não apenas decorativas */
    .sb-lbl {
      font-size: 8.5px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      line-height: 1;
      text-align: center;
      opacity: .8;
      max-width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sb-item.active .sb-lbl {
      opacity: 1;
    }

    /* Tooltip */
    .sb-tip {
      left: calc(100% + 10px);
      background: #111520;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 7px;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, .85);
      box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
    }

    .sb-tip::before {
      border-right-color: #111520;
    }

    /* Separador */
    .sb-sep {
      width: 32px;
      height: 1px;
      background: rgba(255, 255, 255, .07);
      margin: 6px 0;
    }

    /* Badge de follow-ups */
    .sb-badge {
      top: 6px;
      right: 6px;
      font-size: 7.5px;
      font-weight: 800;
      min-width: 14px;
      height: 14px;
      border-radius: 7px;
      border: 1.5px solid #07090f;
    }

    /* Admin item — integrado, não inline */
    #sb-admin-btn {
      background: transparent !important;
      border-left: none !important;
      color: rgba(245, 197, 24, .45) !important;
    }

    #sb-admin-btn:hover {
      background: rgba(245, 197, 24, .07) !important;
      color: #f5c518 !important;
    }

    #sb-admin-btn.active {
      background: rgba(245, 197, 24, .1) !important;
      color: #f5c518 !important;
    }

    /* User badge — compacto e limpo */
    .sb-user {
      margin: 0 5px 5px;
      padding: 7px 8px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 9px;
    }

    .sb-user-photo,
    .sb-user-avatar {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      /* squircle em vez de círculo */
      border: none;
    }

    .sb-user-avatar {
      background: linear-gradient(135deg, #f5c518 0%, #e09b00 100%);
      font-size: 11px;
      font-weight: 800;
    }

    .sb-user-name {
      font-size: 10.5px;
      font-weight: 700;
      color: rgba(255, 255, 255, .75);
    }

    .sb-user-role {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .sb-logout {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: transparent;
      border: 1px solid rgba(255, 77, 109, .12);
      color: rgba(255, 77, 109, .45);
    }

    .sb-logout:hover {
      background: rgba(255, 77, 109, .1);
      color: #ff4d6d;
      border-color: rgba(255, 77, 109, .3);
    }

    /* ── CTAs do CRM — sem fingerprint de IA ── */

    /* Botão primário — flat, sem glow, sem gradiente diagonal */
    .btn-pri {
      padding: 8px 16px;
      background: #f5c518;
      color: #07090f;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: -.02em;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: none;
      /* remove glow */
      transition: background .15s, transform .12s, box-shadow .15s;
      font-family: inherit;
    }

    .btn-pri:hover {
      background: #ffd43b;
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(245, 197, 24, .25);
    }

    .btn-pri:active {
      transform: translateY(0) scale(.98);
      background: #e6b800;
      box-shadow: none;
    }

    /* Botões secundários do header (Importar / Backup / CSV) */
    .h-btn {
      padding: 7px 13px;
      border-radius: 7px;
      font-size: 12px;
      font-weight: 500;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .45);
      cursor: pointer;
      transition: background .14s, color .14s, border-color .14s;
      font-family: inherit;
      letter-spacing: .01em;
    }

    .h-btn:hover {
      background: rgba(255, 255, 255, .06);
      color: rgba(255, 255, 255, .8);
      border-color: rgba(255, 255, 255, .16);
    }

    .h-btn:active {
      transform: scale(.98);
      background: rgba(255, 255, 255, .08);
    }

    /* btn-sm nos painéis internos */
    .btn-sm {
      padding: 6px 12px;
      border-radius: 7px;
      font-size: 12px;
      font-weight: 500;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .5);
      cursor: pointer;
      transition: all .14s;
      font-family: inherit;
    }

    .btn-sm:hover {
      background: rgba(255, 255, 255, .06);
      color: rgba(255, 255, 255, .8);
      border-color: rgba(255, 255, 255, .15);
    }

    .btn-sm:active {
      transform: scale(.98);
    }

    /* btn-sec — contorno suave */
    .btn-sec {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 500;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, .12);
      color: rgba(255, 255, 255, .55);
      cursor: pointer;
      transition: all .15s;
      font-family: inherit;
    }

    .btn-sec:hover {
      background: rgba(255, 255, 255, .05);
      color: rgba(255, 255, 255, .85);
      border-color: rgba(255, 255, 255, .2);
    }

    .btn-sec:active {
      transform: scale(.98);
    }

    /* Tabs do CRM header — estado ativo mais limpo */
    #header .tab {
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: -.01em;
      color: rgba(255, 255, 255, .42);
      transition: color .15s;
    }

    #header .tab:hover {
      color: rgba(255, 255, 255, .75);
    }

    #header .tab.active {
      color: #f5c518;
      font-weight: 600;
    }

    /* ═══════════════════════════════════════════════════
   TEMA CLARO — [data-theme="light"]
═══════════════════════════════════════════════════ */
    [data-theme="dark"] {
      --bg: #07090f;
      --surf: #0f1319;
      --card: #141923;
      --card2: #1a2030;
      --border: rgba(255, 255, 255, .09);
      --borderL: rgba(255, 255, 255, .05);
      --text: #eef2ff;
      --muted: #8892b0;
      --muted2: #64728f;
      --acc: #f5c518;
      --acc2: #e0a800;
      --acc-glow: rgba(245, 197, 24, .2);
      --green: #10d98a;
      --red: #ff4d6d;
      --blue: #4d9fff;
      --purple: #a855f7;
      --orange: #fb923c;
      --shadow: 0 4px 24px rgba(0, 0, 0, .4);
      --shadow-lg: 0 8px 48px rgba(0, 0, 0, .6);
    }

    /* ─── TEMA CLARO — variáveis ─────────────────────────── */
    [data-theme="light"] {
      --bg: #f8fafc;
      --surf: #ffffff;
      --card: #ffffff;
      --card2: #f1f5f9;
      --border: rgba(15, 23, 42, .12);
      --borderL: rgba(15, 23, 42, .07);
      /* muted2 escurecido para garantir contraste WCAG AA em fundo branco */
      --text: #0f172a;
      --muted: #475569;
      --muted2: #64748b;
      --acc: #ca8a04;
      --acc2: #a16207;
      --acc-glow: rgba(202, 138, 4, .15);
      --green: #15803d;
      --red: #dc2626;
      --blue: #2563eb;
      --purple: #7c3aed;
      --orange: #c2410c;
      --shadow: 0 2px 12px rgba(15, 23, 42, .08);
      --shadow-lg: 0 8px 32px rgba(15, 23, 42, .12);
    }

    /* ─── TEMA CLARO — body e layout principal ──────────── */
    [data-theme="light"] body,
    [data-theme="light"] body[data-module="crm"] {
      background: #f8fafc;
      color: #0f172a;
    }

    /* ─── Header ─────────────────────────────────────────── */
    [data-theme="light"] #header {
      background: rgba(255, 255, 255, .97);
      border-bottom: 1px solid rgba(15, 23, 42, .1);
      backdrop-filter: blur(16px);
    }

    [data-theme="light"] #header .tab {
      color: #64748b;
    }

    [data-theme="light"] #header .tab:hover {
      color: #0f172a;
    }

    [data-theme="light"] #header .tab.active {
      color: #ca8a04;
    }

    [data-theme="light"] #hinfo {
      color: #475569;
    }

    [data-theme="light"] #logo-text {
      background: linear-gradient(135deg, #ca8a04 0%, #0f172a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ─── Botões utilitários (h-btn, btn-sm, btn-sec) ──── */
    [data-theme="light"] .h-btn {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .14);
      color: #475569;
    }

    [data-theme="light"] .h-btn:hover {
      background: #f1f5f9;
      border-color: rgba(15, 23, 42, .22);
      color: #0f172a;
    }

    [data-theme="light"] .btn-sm {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .14);
      color: #475569;
    }

    [data-theme="light"] .btn-sm:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    [data-theme="light"] .btn-sec {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .14);
      color: #475569;
    }

    [data-theme="light"] .btn-sec:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    /* ─── Paginação ──────────────────────────────────────── */
    [data-theme="light"] .pag-btn {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .14);
      color: #475569;
    }

    [data-theme="light"] .pag-btn:hover:not(.active) {
      background: #f1f5f9;
      color: #0f172a;
    }

    [data-theme="light"] .pag-info {
      color: #64748b;
    }

    /* ─── Cards genéricos ────────────────────────────────── */
    [data-theme="light"] .card,
    [data-theme="light"] .lead-card,
    [data-theme="light"] .pipe-card,
    [data-theme="light"] .kpi-card {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
      color: #0f172a;
    }

    [data-theme="light"] .card:hover {
      border-color: rgba(15, 23, 42, .18);
    }

    [data-theme="light"] .card-title {
      color: #64748b;
    }

    [data-theme="light"] .card-title::before {
      background: #ca8a04;
    }

    /* ─── KPI Cards ──────────────────────────────────────── */
    [data-theme="light"] .kpi {
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .kpi:hover {
      border-color: rgba(15, 23, 42, .18);
    }

    [data-theme="light"] .kpi-label {
      color: #64748b;
    }

    [data-theme="light"] .kpi-sub {
      color: #64748b;
      opacity: 1;
    }

    [data-theme="light"] .kpi-val {
      color: #0f172a;
    }

    /* ─── Inputs, selects, textareas ─────────────────────── */
    [data-theme="light"] input,
    [data-theme="light"] select,
    [data-theme="light"] textarea,
    [data-theme="light"] .inp,
    [data-theme="light"] .sel {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .16);
      color: #0f172a;
    }

    [data-theme="light"] input::placeholder,
    [data-theme="light"] textarea::placeholder {
      color: #94a3b8;
    }

    [data-theme="light"] .inp:focus,
    [data-theme="light"] .sel:focus {
      border-color: rgba(202, 138, 4, .5);
      background: #fffdf5;
    }

    /* ─── Tabelas ────────────────────────────────────────── */
    [data-theme="light"] .tbl th {
      background: #f8fafc;
      color: #475569;
      border-bottom-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .tbl td {
      color: #0f172a;
    }

    [data-theme="light"] .tbl tr:hover td {
      background: rgba(15, 23, 42, .03);
    }

    /* ─── Pipeline — colunas ─────────────────────────────── */
    [data-theme="light"] .pipe-col {
      background: #f1f5f9;
    }

    [data-theme="light"] .pipe-col-hdr {
      background: #e2e8f0;
    }

    /* ─── Pipeline — cards ───────────────────────────────── */
    [data-theme="light"] .pl-card {
      background: #ffffff !important;
      border-color: rgba(15, 23, 42, .1) !important;
      color: #0f172a;
    }

    [data-theme="light"] .pl-card:hover {
      border-color: rgba(15, 23, 42, .2) !important;
      box-shadow: 0 4px 16px rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .pl-card-name {
      color: #0f172a;
    }

    [data-theme="light"] .pl-card-emp {
      color: #475569;
    }

    [data-theme="light"] .pl-card-corretor {
      color: #64748b;
    }

    [data-theme="light"] .pl-card-obs {
      color: #64748b;
      border-top-color: rgba(15, 23, 42, .08);
    }

    [data-theme="light"] .pl-card-foot {
      border-top-color: rgba(15, 23, 42, .08);
    }

    [data-theme="light"] .pl-card-val {
      color: #7c3aed;
    }

    [data-theme="light"] .pl-empty {
      color: #94a3b8;
      border-color: rgba(15, 23, 42, .1);
    }

    /* ─── Pipeline — IA / agentes nos cards ──────────────── */
    [data-theme="light"] .pl-card-ai-area {
      border-top-color: rgba(15, 23, 42, .08);
    }

    [data-theme="light"] .pl-card-ai-content {
      color: #334155;
    }

    [data-theme="light"] .pl-card-ai-content strong {
      color: #0f172a;
    }

    [data-theme="light"] .pl-card-ai-close {
      color: #94a3b8;
    }

    [data-theme="light"] .pl-card-ai-close:hover {
      color: #475569;
      background: rgba(15, 23, 42, .06);
    }

    [data-theme="light"] .pl-card-ai-agent-label {
      color: #94a3b8;
    }

    [data-theme="light"] .pl-card-ai-ctrl-btn {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, .12);
      color: #64748b;
    }

    [data-theme="light"] .pl-card-ai-ctrl-btn:hover {
      background: #f1f5f9;
      border-color: rgba(15, 23, 42, .2);
      color: #0f172a;
    }

    [data-theme="light"] .pl-card-ai-copy {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, .12);
      color: #64748b;
    }

    [data-theme="light"] .pl-card-ai-copy:hover {
      background: #fffdf5;
      border-color: rgba(202, 138, 4, .3);
      color: #ca8a04;
    }

    [data-theme="light"] .pl-card-ai-area.has-response {
      border-top-color: rgba(15, 23, 42, .08);
    }

    [data-theme="light"] .pl-card-ai-header {
      border-bottom-color: rgba(15, 23, 42, .08);
    }

    /* ─── Follow-up cards ────────────────────────────────── */
    [data-theme="light"] .fu-card {
      background: #ffffff !important;
      border-color: rgba(15, 23, 42, .1) !important;
      color: #0f172a;
    }

    [data-theme="light"] .fu-card:hover {
      border-color: rgba(202, 138, 4, .4) !important;
      box-shadow: 0 4px 16px rgba(15, 23, 42, .1);
    }

    /* ─── Modais ─────────────────────────────────────────── */
    [data-theme="light"] .modal-box,
    [data-theme="light"] .pl-imodal-box {
      background: #ffffff;
      color: #0f172a;
    }

    [data-theme="light"] .pl-imodal-hdr {
      border-bottom-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .pl-imodal-title {
      color: #0f172a;
    }

    [data-theme="light"] .pl-imodal-sub {
      color: #64748b;
    }

    [data-theme="light"] .pl-imodal-lbl {
      color: #64748b;
    }

    [data-theme="light"] .pl-imodal-msg {
      color: #334155;
    }

    [data-theme="light"] .pl-imodal-close {
      color: #94a3b8;
    }

    [data-theme="light"] .pl-imodal-sec {
      border-bottom-color: rgba(15, 23, 42, .08);
    }

    [data-theme="light"] .pl-imodal-check-item {
      color: #334155;
    }

    [data-theme="light"] .pl-imodal-check-item.done {
      color: #15803d;
    }

    [data-theme="light"] .pl-imodal-foot {
      border-top-color: rgba(15, 23, 42, .1);
      background: #f8fafc;
    }

    /* ─── Intelligence badges no pipeline ────────────────── */
    [data-theme="light"] .pl-stage-suggest {
      color: #64748b;
    }

    [data-theme="light"] .pl-doc-mini {
      background: rgba(15, 23, 42, .03);
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .pl-doc-mini-bar {
      background: rgba(15, 23, 42, .1);
    }

    /* ─── Stat pills (capa/landing) ──────────────────────── */
    [data-theme="light"] .stat-pill {
      background: rgba(15, 23, 42, .06);
      border-color: rgba(15, 23, 42, .12);
      color: #0f172a;
    }

    /* ─── Módulo Admin ───────────────────────────────────── */
    [data-theme="light"] .adm-btn-refresh {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .14);
      color: #475569;
    }

    [data-theme="light"] .adm-btn-refresh:hover {
      color: #0f172a;
      border-color: rgba(15, 23, 42, .24);
    }

    [data-theme="light"] .adm-panel {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .adm-label {
      color: #64748b;
    }

    [data-theme="light"] .adm-input,
    [data-theme="light"] .adm-select,
    [data-theme="light"] .adm-textarea {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, .14);
      color: #0f172a;
    }

    [data-theme="light"] .adm-tab {
      color: #64748b;
    }

    [data-theme="light"] .adm-tab:hover {
      color: #0f172a;
    }

    [data-theme="light"] .adm-tab.active {
      color: #ca8a04;
      border-bottom-color: #ca8a04;
    }

    [data-theme="light"] .adm-tabs {
      border-bottom-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .adm-stat {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .adm-stat-num {
      color: #0f172a;
    }

    [data-theme="light"] .adm-stat-lbl {
      color: #64748b;
    }

    [data-theme="light"] .adm-header-title {
      color: #0f172a;
    }

    [data-theme="light"] .adm-header-sub {
      color: #475569;
    }

    /* ─── Pipeline Health Panel ──────────────────────────── */
    [data-theme="light"] #pipeline-health-panel {
      background: rgba(15, 128, 55, .06);
      border-color: rgba(15, 128, 55, .2);
      color: #0f172a;
    }

    /* ─── Filtros e search no pipeline/lista ─────────────── */
    [data-theme="light"] #pl-search,
    [data-theme="light"] #pl-fq,
    [data-theme="light"] #pl-fc,
    [data-theme="light"] #lista-search,
    [data-theme="light"] #lista-status,
    [data-theme="light"] #lista-qual {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .16);
      color: #0f172a;
    }

    /* ─── Módulos novos (Prioridades, Reativação, Docs, etc.) */
    [data-theme="light"] .mod-hdr {
      color: #0f172a;
    }

    [data-theme="light"] .mod-card,
    [data-theme="light"] .mod-section {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
      color: #0f172a;
    }

    [data-theme="light"] .mod-empty {
      color: #94a3b8;
    }

    /* ─── Tooltips ───────────────────────────────────────── */
    [data-theme="light"] .sb-theme-btn .sb-tip {
      /* tooltip já tem bg escuro fixo, ok em qualquer tema */
      background: #1e293b;
      color: #f1f5f9;
    }

    /* ─── Pipeline intel lock (plano) ────────────────────── */
    [data-theme="light"] .pl-intel-lock {
      color: #94a3b8;
      background: rgba(15, 23, 42, .04);
      border-color: rgba(15, 23, 42, .1);
    }

    /* ─── Modal de ação inteligente ─────────────────────── */
    [data-theme="light"] #pl-intel-modal {
      background: rgba(15, 23, 42, .55);
    }

    [data-theme="light"] .pl-imodal-foot {
      background: #f8fafc;
      border-top: 1px solid rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .pl-imodal-act.outline {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .16);
      color: #334155;
    }

    [data-theme="light"] .pl-imodal-act.outline:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    [data-theme="light"] .pl-imodal-check-item:not(.done) {
      color: #64748b;
    }

    [data-theme="light"] .pl-imodal-check-item.done {
      color: #15803d;
    }

    /* ─── Stage confirm box ─────────────────────────────── */
    [data-theme="light"] .pl-stage-confirm {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .pl-stage-confirm-txt {
      color: #334155;
    }

    [data-theme="light"] .pl-stage-confirm-no {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .14);
      color: #475569;
    }

    /* ─── Relatórios / gráficos ──────────────────────────── */
    [data-theme="light"] #rel-kpis .kpi,
    [data-theme="light"] #rel-financeiro .kpi {
      background: #ffffff;
    }

    /* ─── Overlay (modal de lead) ────────────────────────── */
    [data-theme="light"] .overlay-box,
    [data-theme="light"] #overlay .overlay-box {
      background: #ffffff;
      color: #0f172a;
    }

    [data-theme="light"] .m-label {
      color: #475569;
      font-weight: 600;
    }

    [data-theme="light"] .m-section-title {
      color: #0f172a;
    }

    /* ─── Cadência hint nos cards ────────────────────────── */
    [data-theme="light"] .pl-cadencia {
      opacity: 1;
    }

    /* ─── Área de exited columns (Perdido/Desqualificado) ── */
    [data-theme="light"] #exited-cols .pl-col {
      background: #f1f5f9;
    }

    /* ─── Pipeline velocity dot ──────────────────────────── */
    [data-theme="light"] .pl-velocity-dot {
      background: rgba(15, 23, 42, .2);
    }

    [data-theme="light"] .pl-velocity {
      color: #64748b;
    }

    /* ─── Column guide steps ──────────────────────────────── */
    [data-theme="light"] .col-guide-step {
      color: #64748b;
    }

    /* ─── Cfg hint / empty states ────────────────────────── */
    [data-theme="light"] .cfg-hint {
      color: #64748b;
    }

    [data-theme="light"] .cfg-empty {
      color: #64748b;
    }

    [data-theme="light"] #module-crm .empty-state {
      color: #94a3b8;
    }

    /* ─── Garantia final: nenhum rgba(255,255,255,...) visível
       no conteúdo principal em tema claro ────────────── */
    [data-theme="light"] #module-crm .btn-sm,
    [data-theme="light"] #module-crm .btn-sec,
    [data-theme="light"] #module-crm .h-btn,
    [data-theme="light"] #module-crm .pag-btn {
      background: #ffffff;
      color: #475569;
    }

    [data-theme="light"] #module-crm .btn-pri {
      color: #000;
    }

    /* ════════════════════════════════════════════════════════════
   TEMA CLARO — correções de legibilidade abrangentes
   Apenas cores de texto, fundo de cards, inputs e labels.
   Não altera layout, funcionalidade ou tema escuro.
════════════════════════════════════════════════════════════ */

    /* ── Base: garantir texto escuro em qualquer módulo ──────── */
    [data-theme="light"] #module-crm,
    [data-theme="light"] #module-obj,
    [data-theme="light"] #module-wa,
    [data-theme="light"] #module-ajuda,
    [data-theme="light"] #module-admin,
    [data-theme="light"] #module-prioridades,
    [data-theme="light"] #module-reativacao,
    [data-theme="light"] #module-agenda,
    [data-theme="light"] #module-documentacao,
    [data-theme="light"] #module-comissao,
    [data-theme="light"] #module-campanhas {
      color: #0f172a;
    }

    /* ── Agenda Inteligente — tema claro ──────── */
    [data-theme="light"] .agenda-title-area h2 {
      background: linear-gradient(135deg, #0f172a 0%, #475569 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
    [data-theme="light"] .agenda-title-area p {
      color: #475569;
    }
    [data-theme="light"] .agenda-status-badge {
      background: rgba(15, 23, 42, 0.04);
      border-color: rgba(15, 23, 42, 0.08);
      color: #475569;
    }
    [data-theme="light"] .agenda-btn-secondary {
      background: rgba(15, 23, 42, 0.04);
      color: #0f172a;
      border: 1px solid rgba(15, 23, 42, 0.1);
    }
    [data-theme="light"] .agenda-btn-secondary:hover {
      background: rgba(15, 23, 42, 0.08);
      border-color: rgba(15, 23, 42, 0.2);
    }
    [data-theme="light"] .agenda-tab {
      color: #64748b;
    }
    [data-theme="light"] .agenda-tab:hover {
      color: #0f172a;
    }
    [data-theme="light"] .agenda-tab.active {
      background: #0f172a;
      color: #fff;
      box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15);
    }
    [data-theme="light"] .agenda-event-card {
      background: #ffffff;
      border-color: rgba(15, 23, 42, 0.08);
    }
    [data-theme="light"] .agenda-event-card:hover {
      border-color: rgba(15, 23, 42, 0.18);
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    }
    [data-theme="light"] .agenda-event-time {
      border-right-color: rgba(15, 23, 42, 0.08);
    }
    [data-theme="light"] .agenda-event-time strong {
      color: #0f172a;
    }
    [data-theme="light"] .agenda-event-time span {
      color: #64748b;
    }
    [data-theme="light"] .agenda-event-details h4 {
      color: #0f172a;
    }
    [data-theme="light"] .agenda-event-details p {
      color: #475569;
    }
    [data-theme="light"] .agenda-empty {
      background: rgba(15, 23, 42, 0.01);
      border-color: rgba(15, 23, 42, 0.1);
    }
    [data-theme="light"] .agenda-empty h3 {
      color: #0f172a;
    }
    [data-theme="light"] .agenda-empty p {
      color: #64748b;
    }
    [data-theme="light"] .agenda-empty-state h3 {
      color: #0f172a;
    }
    [data-theme="light"] .agenda-empty-state p {
      color: #475569;
    }
    [data-theme="light"] .agenda-view-panel {
      background: rgba(15, 23, 42, 0.02);
      border-color: rgba(15, 23, 42, 0.08);
    }
    [data-theme="light"] .agenda-empty-state {
      background:
        radial-gradient(circle at 50% 0%, rgba(34,197,94,.08), transparent 36%),
        rgba(15, 23, 42, 0.01);
      border-color: rgba(15, 23, 42, 0.12);
    }

    /* ── Follow-up hero stat cards (fundos brancos quase invisíveis) */
    [data-theme="light"] .fu-hero-stat {
      background: rgba(15, 23, 42, .05) !important;
      border-color: rgba(15, 23, 42, .1) !important;
    }

    [data-theme="light"] .fu-hero-stat-lbl {
      color: #475569;
    }

    /* ── Follow-up card msg (texto branco em caixa branca) ─────── */
    [data-theme="light"] .fu-card-msg {
      color: #334155;
      background: rgba(15, 23, 42, .04);
      border-color: rgba(15, 23, 42, .1);
    }

    /* ── Tags genéricas ─────────────────────────────────────── */
    [data-theme="light"] .tag {
      color: #475569;
      background: rgba(15, 23, 42, .06);
      border-color: rgba(15, 23, 42, .1);
    }

    /* ── Funnel do dashboard ─────────────────────────────────── */
    [data-theme="light"] .funnel-label {
      color: #475569;
    }

    [data-theme="light"] .funnel-row {
      border-color: transparent;
    }

    [data-theme="light"] .funnel-track {
      background: rgba(15, 23, 42, .06);
    }

    /* Funil Visual — tema claro */
    [data-theme="light"] #sales-funnel-visual-card {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .fvs-empty {
      color: #64748b;
    }

    [data-theme="light"] .funnel-visual-stage {
      color: #fff;
    }

    /* estágios mantêm texto branco pois têm fundo colorido */

    /* ── Alert banner do dashboard ──────────────────────────── */
    [data-theme="light"] .alert-banner {
      background: rgba(220, 38, 38, .05) !important;
      border-color: rgba(220, 38, 38, .18) !important;
      color: #dc2626 !important;
    }

    /* ── Dias tags (dias-ok/warn/bad) ───────────────────────── */
    [data-theme="light"] .dias-ok {
      color: #15803d;
    }

    [data-theme="light"] .dias-warn {
      color: #b45309;
    }

    [data-theme="light"] .dias-bad {
      color: #dc2626;
    }

    /* ── Módulo Ajuda — todos os elementos com cor branca ───── */
    [data-theme="light"] #module-ajuda {
      background: #f8fafc;
    }

    [data-theme="light"] .ajuda-hero-sub {
      color: #475569;
    }

    [data-theme="light"] .ajuda-sec-title {
      color: #64748b;
    }

    [data-theme="light"] .ajuda-sec-title::after {
      background: linear-gradient(90deg, rgba(15, 23, 42, .12), transparent);
    }

    [data-theme="light"] .ajuda-step {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .ajuda-step:hover {
      border-color: rgba(202, 138, 4, .3);
      box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .ajuda-step-title {
      color: #0f172a;
    }

    [data-theme="light"] .ajuda-step-desc {
      color: #475569;
    }

    [data-theme="light"] .ajuda-mod {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .ajuda-mod:hover {
      border-color: rgba(202, 138, 4, .3);
    }

    [data-theme="light"] .ajuda-mod-name {
      color: #0f172a;
    }

    [data-theme="light"] .ajuda-mod-desc {
      color: #475569;
    }

    [data-theme="light"] .ajuda-tip-title {
      color: #0f172a;
    }

    [data-theme="light"] .ajuda-tip-desc {
      color: #475569;
    }

    [data-theme="light"] .ajuda-faq-q {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
      color: #0f172a;
    }

    [data-theme="light"] .ajuda-faq-q:hover {
      background: #f8fafc;
    }

    [data-theme="light"] .ajuda-faq-a-inner {
      border-top-color: rgba(15, 23, 42, .08);
      color: #334155;
    }

    [data-theme="light"] .ajuda-key {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .ajuda-key:hover {
      border-color: rgba(202, 138, 4, .3);
      background: #f8fafc;
    }

    [data-theme="light"] .ajuda-key-name {
      color: #0f172a;
    }

    [data-theme="light"] .ajuda-key-desc {
      color: #475569;
    }

    [data-theme="light"] .ajuda-gloss-item {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .ajuda-gloss-item:hover {
      border-color: rgba(202, 138, 4, .3);
    }

    [data-theme="light"] .ajuda-gloss-term {
      color: #0f172a;
    }

    [data-theme="light"] .ajuda-gloss-def {
      color: #475569;
    }

    /* ── Configurações — campos e textos ─────────────────────── */
    [data-theme="light"] .cfg-card {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
      color: #0f172a;
    }

    [data-theme="light"] .cfg-card-title {
      color: #0f172a;
    }

    [data-theme="light"] .cfg-stat {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .cfg-stat-val {
      color: #0f172a;
    }

    [data-theme="light"] .cfg-stat-lbl {
      color: #64748b;
    }

    [data-theme="light"] .cfg-lbl {
      color: #475569;
    }

    [data-theme="light"] .cfg-inp,
    [data-theme="light"] .cfg-sel {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .16);
      color: #0f172a;
    }

    [data-theme="light"] .cfg-backend-note {
      color: #475569;
    }

    [data-theme="light"] .cfg-map-table th {
      color: #475569;
      border-bottom-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .cfg-map-table td {
      color: #0f172a;
    }

    [data-theme="light"] .cfg-rule-row {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, .1);
      color: #0f172a;
    }

    [data-theme="light"] .cfg-rule-row:hover {
      border-color: rgba(202, 138, 4, .2);
    }

    [data-theme="light"] .cfg-rule-row.active {
      background: rgba(202, 138, 4, .04);
    }

    [data-theme="light"] .cfg-meta-guide-body {
      color: #334155;
    }

    [data-theme="light"] .cfg-meta-guide-step-txt {
      color: #475569;
    }

    [data-theme="light"] .cfg-security-banner {
      background: rgba(37, 99, 235, .05);
      border-color: rgba(37, 99, 235, .18);
      color: #1e40af;
    }

    /* ── Motor IA — guia e configuração ─────────────────────── */
    [data-theme="light"] .ai-mot-guide-body {
      color: #334155;
    }

    [data-theme="light"] .ai-mot-guide-item-desc {
      color: #475569;
    }

    [data-theme="light"] .ai-prov-btn {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .12);
      color: #0f172a;
    }

    [data-theme="light"] .ai-prov-btn:hover {
      border-color: rgba(202, 138, 4, .3);
      background: #fffdf5;
    }

    [data-theme="light"] .ai-prov-name {
      color: #0f172a;
    }

    [data-theme="light"] .ai-prov-desc {
      color: #475569;
    }

    [data-theme="light"] .ai-field-label {
      color: #475569;
    }

    [data-theme="light"] .ai-field-inp {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .16);
      color: #0f172a;
    }

    [data-theme="light"] .ai-field-inp::placeholder {
      color: #94a3b8;
    }

    [data-theme="light"] .ai-field-select {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .16);
      color: #0f172a;
    }

    [data-theme="light"] .ai-active-label {
      color: #64748b;
    }

    [data-theme="light"] .ai-key-toggle {
      color: #94a3b8;
    }

    [data-theme="light"] .ai-key-toggle:hover {
      color: #475569;
    }

    /* ── Motor IA v2 — pares light das classes novas ── */
    [data-theme="light"] .ai-guide-acc {
      background: rgba(245, 197, 24, .07);
      border-color: rgba(202, 138, 4, .3);
    }

    [data-theme="light"] .ai-guide-head {
      color: #a16207 !important;
    }

    [data-theme="light"] .ai-guide-step {
      color: #475569 !important;
    }

    [data-theme="light"] .ai-guide-num {
      background: rgba(202, 138, 4, .14);
      color: #a16207 !important;
    }

    [data-theme="light"] .ai-guide-link {
      color: #a16207 !important;
    }

    [data-theme="light"] .ai-nv-tag {
      background: #f1f5f9;
      border-color: rgba(15, 23, 42, .14);
      color: #475569 !important;
    }

    [data-theme="light"] .ai-nv-tag.active {
      background: rgba(202, 138, 4, .1);
      border-color: rgba(202, 138, 4, .45);
      color: #a16207 !important;
    }

    [data-theme="light"] .ai-plain-warn {
      background: rgba(202, 138, 4, .08);
      border-color: rgba(202, 138, 4, .3);
      color: #92400e !important;
    }

    /* ── Motor IA — histórico de ações ──────────────────────── */
    [data-theme="light"] .hist-header {
      color: #64748b;
    }

    [data-theme="light"] .hist-item {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, .08);
    }

    [data-theme="light"] .hist-text {
      color: #334155;
    }

    [data-theme="light"] .hist-ts {
      color: #94a3b8;
    }

    [data-theme="light"] .hist-empty {
      color: #94a3b8;
    }

    /* ── WhatsApp Hub header ─────────────────────────────────── */
    [data-theme="light"] .wa-mod-hdr {
      background: #ffffff;
      border-bottom-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .wa-mod-title {
      color: #0f172a;
    }

    [data-theme="light"] .wa-mod-sub {
      color: #475569;
    }

    /* ── Documentação — pending checkbox border ──────────────── */
    [data-theme="light"] .doc-item-check.pending {
      border-color: rgba(15, 23, 42, .25);
    }

    [data-theme="light"] .doc-card {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .doc-status {
      color: #0f172a;
    }

    /* ── Visitas / Agenda ────────────────────────────────────── */
    [data-theme="light"] .visit-card {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .visit-field {
      color: #475569;
    }

    [data-theme="light"] .visit-field strong {
      color: #0f172a;
    }

    [data-theme="light"] .visit-actions {
      border-top-color: rgba(15, 23, 42, .08);
    }

    /* ── Comissões ───────────────────────────────────────────── */
    [data-theme="light"] .comm-kpi {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .comm-table th {
      color: #475569;
      border-bottom-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .comm-table td {
      color: #0f172a;
      border-bottom-color: rgba(15, 23, 42, .06);
    }

    [data-theme="light"] .comm-table tr:hover td {
      background: rgba(15, 23, 42, .025);
    }

    /* ── Campanhas ───────────────────────────────────────────── */
    [data-theme="light"] .camp-type-btn {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .12);
      color: #0f172a;
    }

    [data-theme="light"] .camp-type-btn:hover {
      border-color: rgba(202, 138, 4, .35);
    }

    [data-theme="light"] .camp-type-btn.selected {
      background: rgba(202, 138, 4, .05);
      border-color: #ca8a04;
    }

    [data-theme="light"] .camp-type-name {
      color: #0f172a;
    }

    [data-theme="light"] .camp-type-desc {
      color: #475569;
    }

    [data-theme="light"] .camp-lead-row {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
    }

    /* ── Módulo de reativação ────────────────────────────────── */
    [data-theme="light"] .reat-card {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .1);
      color: #0f172a;
    }

    [data-theme="light"] .reat-name {
      color: #0f172a;
    }

    [data-theme="light"] .reat-meta {
      color: #475569;
    }

    [data-theme="light"] .reat-days {
      color: #dc2626;
    }

    /* ── Relatórios — textos e seções ───────────────────────── */
    [data-theme="light"] .rel-sec-title {
      color: #0f172a;
    }

    [data-theme="light"] .rel-label {
      color: #475569;
    }

    [data-theme="light"] .rel-val {
      color: #0f172a;
    }

    [data-theme="light"] #rel-kpis {
      background: transparent;
    }

    /* ── Modal de lead (overlay) — garantir todos os campos ─── */
    [data-theme="light"] #overlay {
      background: rgba(15, 23, 42, .55);
    }

    [data-theme="light"] .m-val {
      color: #0f172a;
    }

    [data-theme="light"] .m-row {
      border-bottom-color: rgba(15, 23, 42, .06);
    }

    [data-theme="light"] .m-section-sep {
      border-color: rgba(15, 23, 42, .08);
    }

    [data-theme="light"] .m-history-item {
      border-color: rgba(15, 23, 42, .08);
      color: #334155;
    }

    [data-theme="light"] .m-history-ts {
      color: #94a3b8;
    }

    [data-theme="light"] .m-inp,
    [data-theme="light"] .m-sel,
    [data-theme="light"] .m-textarea {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .16);
      color: #0f172a;
    }

    [data-theme="light"] .m-inp::placeholder,
    [data-theme="light"] .m-textarea::placeholder {
      color: #94a3b8;
    }

    /* ── Campos do modal Editar Lead (.minp / .msel / .mtxt) — modo claro ── */
    [data-theme="light"] .minp,
    [data-theme="light"] .msel,
    [data-theme="light"] .mtxt {
      background: #ffffff;
      border-color: rgba(15, 23, 42, .16);
      color: #0f172a;
    }

    [data-theme="light"] .minp:focus,
    [data-theme="light"] .msel:focus,
    [data-theme="light"] .mtxt:focus {
      border-color: #d97706;
      background: #fffbf0;
      box-shadow: 0 0 0 3px rgba(217, 119, 6, .10);
    }

    [data-theme="light"] .minp::placeholder,
    [data-theme="light"] .mtxt::placeholder {
      color: #94a3b8;
    }

    /* Opções nativas do select ficam legíveis no modo claro */
    [data-theme="light"] .msel option {
      background: #ffffff;
      color: #0f172a;
    }

    [data-theme="light"] .msel option:checked {
      background: #fef3c7;
      color: #92400e;
    }

    /* ── Pipeline Intel modal — textos que podem ser brancos ─── */
    [data-theme="light"] .pl-imodal-commission-grid {
      color: #0f172a;
    }

    [data-theme="light"] .pl-imodal-box .pl-stage-badge {
      color: #0f172a;
    }

    /* ── Dashboard Inteligente — textos das novas seções ─────── */
    [data-theme="light"] .di-section-title {
      color: #0f172a;
    }

    [data-theme="light"] .prio-card-title {
      color: #0f172a;
    }

    [data-theme="light"] .prio-card-desc {
      color: #475569;
    }

    [data-theme="light"] .prio-card-zero .prio-card-num {
      color: #94a3b8;
    }

    [data-theme="light"] .ranking-card-today {
      color: #0f172a;
    }

    [data-theme="light"] .ranking-card-label {
      color: #475569;
    }

    [data-theme="light"] .ranking-card-avg {
      color: #64748b;
    }

    [data-theme="light"] .di-check-text {
      color: #334155;
    }

    [data-theme="light"] .di-check-item.done .di-check-text {
      color: #64748b;
    }

    [data-theme="light"] .di-bar-val {
      color: #0f172a;
    }

    [data-theme="light"] .di-bar-lbl {
      color: #475569;
    }

    [data-theme="light"] .di-chart-note {
      color: #64748b;
    }

    [data-theme="light"] .di-sug-text {
      color: #334155;
    }

    [data-theme="light"] .comm-prev-sub {
      color: #475569;
    }

    [data-theme="light"] .comm-prev-meta {
      color: #64748b;
    }

    [data-theme="light"] .di-checklist-footer {
      border-top-color: rgba(15, 23, 42, .1);
    }

    [data-theme="light"] .di-alerta-msg {
      color: #0f172a;
    }

    [data-theme="light"] .di-bar {
      background: linear-gradient(180deg, #ca8a04, #a16207);
    }

    /* ── Plan lock card ──────────────────────────────────────── */
    [data-theme="light"] .plan-lock {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, .1);
      color: #0f172a;
    }

    [data-theme="light"] .plan-lock-title {
      color: #0f172a;
    }

    [data-theme="light"] .plan-lock-desc {
      color: #475569;
    }

    /* ── Misc: funnel exited section ─────────────────────────── */
    [data-theme="light"] #exited span[style*="color:var(--muted)"] {
      color: #64748b !important;
    }

    /* ── Link accent ─────────────────────────────────────────── */
    [data-theme="light"] .link-acc {
      color: #ca8a04;
    }

    [data-theme="light"] .link-acc:hover {
      color: #a16207;
    }

    /* ════════════════════════════════════════════════════════════
       TEMA CLARO — CORREÇÕES GLOBAIS DE CARDS, INPUTS E BOTÕES
       Aplica-se após todos os overrides específicos de módulo.
       Não afeta sidebar (#sb) nem tema escuro.
    ════════════════════════════════════════════════════════════ */

    /* ── Módulos com fundo claro ──────────────────────────────── */
    [data-theme="light"] #module-crm,
    [data-theme="light"] #module-obj,
    [data-theme="light"] #module-wa,
    [data-theme="light"] #module-ajuda,
    [data-theme="light"] #module-admin,
    [data-theme="light"] #module-prioridades,
    [data-theme="light"] #module-reativacao,
    [data-theme="light"] #module-agenda,
    [data-theme="light"] #module-documentacao,
    [data-theme="light"] #module-comissao,
    [data-theme="light"] #module-campanhas,
    [data-theme="light"] #module-dashboard {
      color: #0f172a;
    }

    /* ── Cards genéricos ──────────────────────────────────────── */
    [data-theme="light"] .premium-card,
    [data-theme="light"] .module-card {
      background: #ffffff;
      color: #0f172a;
      border: 1px solid rgba(15,23,42,.10);
      box-shadow: 0 18px 50px rgba(15,23,42,.07);
    }
    [data-theme="light"] .premium-card h1,
    [data-theme="light"] .premium-card h2,
    [data-theme="light"] .premium-card h3,
    [data-theme="light"] .premium-card h4,
    [data-theme="light"] .module-card h1,
    [data-theme="light"] .module-card h2,
    [data-theme="light"] .module-card h3 { color: #0f172a; }
    [data-theme="light"] .premium-card p,
    [data-theme="light"] .module-card p   { color: #475569; }

    /* ── Títulos e textos globais ─────────────────────────────── */
    [data-theme="light"] h1,
    [data-theme="light"] h2,
    [data-theme="light"] h3 { color: #0f172a; }

    /* ── Landing page: fundo sempre escuro → título sempre branco ── */
    [data-theme="light"] .lg-title { color: #ffffff !important; }
    /* span do gradiente: mantém -webkit-text-fill-color do próprio estilo */
    [data-theme="light"] .lg-title span {
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
    }

    /* ── Sub-capa (OCAF Benefícios): fundo sempre escuro → brancos ── */
    [data-theme="light"] .capa-title       { color: #ffffff !important; }
    [data-theme="light"] .capa-title-accent {
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
    }
    [data-theme="light"] .capa-crm-text    { color: rgba(255,255,255,.55) !important; }
    [data-theme="light"] .capa-crm-bracket { color: rgba(245,197,24,.30) !important; }
    [data-theme="light"] .capa-sub         { color: rgba(245,197,24,.80) !important; }
    [data-theme="light"] .capa-desc        { color: rgba(255,255,255,.60) !important; }
    [data-theme="light"] .capa-feat-label  { color: rgba(255,255,255,.70) !important; }

    /* Prevenir texto branco em fundo claro */
    [data-theme="light"] #module-crm *:not(#sb):not(#sb *),
    [data-theme="light"] #module-ajuda *:not(#sb):not(#sb *),
    [data-theme="light"] #module-admin *:not(#sb):not(#sb *),
    [data-theme="light"] #module-agenda *:not(#sb):not(#sb *),
    [data-theme="light"] #module-documentacao *:not(#sb):not(#sb *),
    [data-theme="light"] #module-comissao *:not(#sb):not(#sb *),
    [data-theme="light"] #module-campanhas *:not(#sb):not(#sb *),
    [data-theme="light"] #module-reativacao *:not(#sb):not(#sb *),
    [data-theme="light"] #module-prioridades *:not(#sb):not(#sb *) {
      /* Corrige herança de color:white do modo escuro */
      color: inherit;
    }

    /* ── Botão primário amarelo/laranja ───────────────────────── */
    [data-theme="light"] .premium-btn-primary {
      background: linear-gradient(135deg, #facc15, #f59e0b);
      color: #111827;
      border: 1px solid rgba(245,158,11,.35);
      box-shadow: 0 14px 34px rgba(245,158,11,.18);
    }
    [data-theme="light"] .premium-btn-primary:hover {
      box-shadow: 0 18px 40px rgba(245,158,11,.28);
      filter: brightness(1.04);
    }

    /* ── Botão secundário azul ────────────────────────────────── */
    [data-theme="light"] .premium-btn-secondary {
      background: #ffffff;
      color: #2563eb;
      border: 1px solid rgba(37,99,235,.24);
    }
    [data-theme="light"] .premium-btn-secondary:hover {
      background: rgba(37,99,235,.08);
    }

    /* ── Badges — padronizar para azul/amarelo ────────────────── */
    [data-theme="light"] .help-badge,
    [data-theme="light"] .badge {
      background: rgba(37,99,235,.10);
      color: #2563eb;
      border: 1px solid rgba(37,99,235,.22);
    }
    [data-theme="light"] .help-badge.brand,
    [data-theme="light"] .help-badge.highlight,
    [data-theme="light"] .badge.brand {
      background: rgba(245,158,11,.12);
      color: #b45309;
      border: 1px solid rgba(245,158,11,.26);
    }

    /* ── Skeleton loader no tema claro ───────────────────────── */
    [data-theme="light"] .skeleton {
      background: linear-gradient(90deg,
        rgba(15,23,42,.04) 25%,
        rgba(15,23,42,.08) 50%,
        rgba(15,23,42,.04) 75%);
      background-size: 200% 100%;
    }

    /* ── Módulos: fundo do body controlado por módulo ─────────── */
    body[data-theme="light"][data-module="crm"],
    body[data-theme="light"][data-module="prioridades"],
    body[data-theme="light"][data-module="reativacao"],
    body[data-theme="light"][data-module="agenda"],
    body[data-theme="light"][data-module="documentacao"],
    body[data-theme="light"][data-module="comissao"],
    body[data-theme="light"][data-module="campanhas"],
    body[data-theme="light"] {
      background:
        radial-gradient(circle at 20%  0%, rgba(37,99,235,.07), transparent 32%),
        radial-gradient(circle at 85%  8%, rgba(245,158,11,.07), transparent 30%),
        #f8fafc;
      color: #0f172a;
    }

    /* Sidebar escura no tema dark */
    html:not([data-theme="light"]) #sb,
    body:not([data-theme="light"]) #sb {
      color-scheme: dark;
    }

    html:not([data-theme="light"]) #sb {
      background: #020617 !important;
      border-right-color: rgba(255, 255, 255, .07) !important;
    }

    html:not([data-theme="light"]) #sb .sb-item {
      color: #94a3b8;
    }

    html:not([data-theme="light"]) #sb .sb-item:hover {
      background: rgba(255, 255, 255, .07);
      color: #e2e8f0;
    }

    html:not([data-theme="light"]) #sb .sb-item.active {
      background: rgba(245, 197, 24, .12);
      color: #f5c518;
    }

    html:not([data-theme="light"]) #sb .sb-lbl {
      color: inherit;
    }

    html:not([data-theme="light"]) #sb .sb-sep {
      background: rgba(255, 255, 255, .06) !important;
    }

    html:not([data-theme="light"]) #sb-user-badge {
      background: #020617 !important;
      border-top-color: rgba(255, 255, 255, .07) !important;
    }

    /* ── Botão de toggle de tema na sidebar ── */
    .sb-theme-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 18px;
      transition: background .15s;
      position: relative;
      flex-shrink: 0;
    }

    .sb-theme-btn:hover {
      background: rgba(255, 255, 255, .07);
    }

    .sb-theme-btn .sb-tip {
      position: absolute;
      left: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%);
      background: #1e293b;
      color: #f1f5f9;
      font-size: 11px;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 8px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s;
      z-index: 9999;
    }

    .sb-theme-btn:hover .sb-tip {
      opacity: 1;
    }

    /* ── Controle de tamanho de fonte ── */
    .sb-font-ctrl {
      display: flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0
    }

    .sb-font-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--muted);
      font-weight: 800;
      font-family: inherit;
      transition: background .15s, color .15s, opacity .15s;
      flex-shrink: 0;
    }

    .sb-font-btn:hover {
      background: rgba(255, 255, 255, .07);
      color: var(--text)
    }

    .sb-font-btn:disabled,
    .sb-font-btn[data-disabled] {
      opacity: .28;
      cursor: not-allowed
    }

    .sb-font-btn#font-decrease-btn {
      font-size: 12px
    }

    .sb-font-btn#font-increase-btn {
      font-size: 14px
    }

    [data-theme="light"] .sb-font-btn:hover {
      background: rgba(15, 23, 42, .07)
    }

    /* ═══════════════════════════════════════════════════
   CAPA — YouTube hero video + logo
═══════════════════════════════════════════════════ */

    @media(prefers-reduced-motion:reduce) {}

    .hero-logo {
      width: clamp(140px, 20vw, 260px);
      height: auto;
      object-fit: contain;
      margin-bottom: 28px;
      background: transparent !important;
      filter: drop-shadow(0 0 60px rgba(245, 197, 24, .28)) drop-shadow(0 0 20px rgba(245, 197, 24, .12));
      animation:
        capaLogoEntrance 1.5s cubic-bezier(.22, 1, .36, 1) .2s both,
        capaLogoFloat 4s ease-in-out 1.7s infinite;
    }

    @media(max-width:768px) {
      .hero-logo {
        width: clamp(110px, 30vw, 180px);
        margin-bottom: 20px;
      }

      .hero-video-bg iframe {
        width: 300vw;
        height: 56.25vw;
        min-height: 100%;
      }

      .capa-inner {
        padding: 36px 16px 32px;
      }

      .capa-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      .capa-btn-pri,
      .capa-btn-sec {
        font-size: 14px;
        padding: 12px 24px;
      }
    }

    @media(max-width:380px) {
      .capa-btns {
        flex-direction: column;
        width: 100%;
      }

      .capa-btn-pri,
      .capa-btn-sec {
        width: 100%;
        text-align: center;
      }
    }

    /* ═══════════════════════════════════════════════════
   PIPELINE INTELIGENTE — alertas, CTAs, modal
═══════════════════════════════════════════════════ */
    .pl-intel-wrap {
      margin: 6px 0 4px;
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .pl-intel-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 7px;
      font-size: 10.5px;
      font-weight: 700;
      cursor: pointer;
      transition: opacity .14s;
      width: fit-content;
    }

    .pl-intel-badge:hover {
      opacity: .75
    }

    .pl-intel-badge.info {
      background: rgba(77, 159, 255, .12);
      color: #4d9fff
    }

    .pl-intel-badge.warning {
      background: rgba(245, 197, 24, .12);
      color: #f5c518
    }

    .pl-intel-badge.danger {
      background: rgba(255, 77, 109, .14);
      color: #ff4d6d
    }

    .pl-intel-badge.success {
      background: rgba(16, 217, 138, .12);
      color: #10d98a
    }

    .pl-intel-ctas {
      display: flex;
      gap: 5px;
      flex-wrap: wrap
    }

    .pl-intel-btn {
      font-size: 10.5px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: all .14s;
      white-space: nowrap;
      line-height: 1.4;
    }

    .pl-intel-btn.primary {
      background: rgba(245, 197, 24, .15);
      color: #f5c518
    }

    .pl-intel-btn.primary:hover {
      background: rgba(245, 197, 24, .28)
    }

    .pl-intel-btn.wa {
      background: rgba(37, 211, 102, .12);
      color: #25d366
    }

    .pl-intel-btn.wa:hover {
      background: rgba(37, 211, 102, .22)
    }

    .pl-intel-lock {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 9px;
      border-radius: 7px;
      background: rgba(168, 85, 247, .07);
      border: 1px solid rgba(168, 85, 247, .15);
      font-size: 10px;
      color: #a855f7;
      font-weight: 600;
      cursor: pointer;
      transition: all .14s;
      width: fit-content;
    }

    .pl-intel-lock:hover {
      background: rgba(168, 85, 247, .14)
    }

    .pl-stage-suggest {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10.5px;
      color: var(--muted);
      flex-wrap: wrap
    }

    .pl-stage-suggest-btn {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 5px;
      background: rgba(168, 85, 247, .12);
      color: #a855f7;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: background .14s;
    }

    .pl-stage-suggest-btn:hover {
      background: rgba(168, 85, 247, .22)
    }

    .pl-doc-mini {
      margin-top: 5px;
      padding: 7px 10px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      border-radius: 8px;
    }

    .pl-doc-mini-hdr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--muted);
    }

    .pl-doc-mini-bar {
      width: 100%;
      height: 3px;
      border-radius: 3px;
      background: rgba(255, 255, 255, .08);
      overflow: hidden
    }

    .pl-doc-mini-fill {
      height: 100%;
      border-radius: 3px;
      transition: width .3s
    }

    /* Modal de ação rápida do pipeline */
    #pl-intel-modal {
      position: fixed;
      inset: 0;
      z-index: 9500;
      background: rgba(0, 0, 0, .72);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    #pl-intel-modal.open {
      display: flex
    }

    .pl-imodal-box {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      width: 100%;
      max-width: 520px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow-lg);
    }

    .pl-imodal-hdr {
      padding: 20px 22px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
    }

    .pl-imodal-badge {
      font-size: 11px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .pl-imodal-badge.info {
      background: rgba(77, 159, 255, .12);
      color: #4d9fff
    }

    .pl-imodal-badge.warning {
      background: rgba(245, 197, 24, .12);
      color: #f5c518
    }

    .pl-imodal-badge.danger {
      background: rgba(255, 77, 109, .12);
      color: #ff4d6d
    }

    .pl-imodal-badge.success {
      background: rgba(16, 217, 138, .12);
      color: #10d98a
    }

    .pl-imodal-title-wrap {
      flex: 1;
      min-width: 0
    }

    .pl-imodal-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      line-height: 1.3
    }

    .pl-imodal-sub {
      font-size: 12.5px;
      color: var(--muted);
      margin-top: 4px;
      line-height: 1.5
    }

    .pl-imodal-close {
      background: transparent;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
      padding: 2px;
      flex-shrink: 0;
    }

    .pl-imodal-close:hover {
      color: var(--text)
    }

    .pl-imodal-body {
      padding: 18px 22px
    }

    .pl-imodal-sec {
      margin-bottom: 18px
    }

    .pl-imodal-lbl {
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .pl-imodal-msg {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.65;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .pl-imodal-checklist {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .pl-imodal-check-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      padding: 6px 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .03);
    }

    .pl-imodal-check-item.done {
      color: #10d98a
    }

    .pl-imodal-check-item:not(.done) {
      color: var(--muted)
    }

    .pl-imodal-chk {
      font-weight: 700;
      width: 14px;
      flex-shrink: 0
    }

    .pl-imodal-foot {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 14px 22px 20px;
      border-top: 1px solid var(--border);
    }

    .pl-imodal-act {
      font-size: 13px;
      font-weight: 700;
      padding: 9px 16px;
      border-radius: 9px;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: transform .14s;
    }

    .pl-imodal-act:hover {
      transform: translateY(-1px)
    }

    .pl-imodal-act:active {
      transform: scale(.97)
    }

    .pl-imodal-act.primary {
      background: #f5c518;
      color: #07090f
    }

    .pl-imodal-act.wa {
      background: #25d366;
      color: #fff
    }

    .pl-imodal-act.outline {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text)
    }

    .pl-imodal-act.danger-outline {
      background: transparent;
      border: 1px solid rgba(255, 77, 109, .3);
      color: #ff4d6d
    }

    .pl-stage-confirm {
      margin-top: 14px;
      padding: 12px 14px;
      background: rgba(168, 85, 247, .07);
      border: 1px solid rgba(168, 85, 247, .2);
      border-radius: 10px;
      display: none;
    }

    .pl-stage-confirm.open {
      display: block
    }

    .pl-stage-confirm-txt {
      font-size: 13px;
      color: var(--text);
      margin-bottom: 10px;
      line-height: 1.5
    }

    .pl-stage-confirm-btns {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .pl-stage-confirm-yes {
      font-size: 12.5px;
      font-weight: 700;
      padding: 7px 16px;
      border-radius: 7px;
      border: none;
      cursor: pointer;
      background: #a855f7;
      color: #fff;
      font-family: inherit;
      transition: opacity .14s;
    }

    .pl-stage-confirm-yes:hover {
      opacity: .85
    }

    .pl-stage-confirm-no {
      font-size: 12.5px;
      font-weight: 600;
      padding: 7px 14px;
      border-radius: 7px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-family: inherit;
    }
  



  /* ═══ CSS: AGENDA INTELIGENTE ═══ */
  #module-agenda {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.agenda-wrap {
  width: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 80px;
  box-sizing: border-box;
  display: block;
  background: transparent;
  color: var(--text);
  font-family: inherit;
}

.agenda-header,
.agenda-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 24px;
  margin-bottom: 40px;
}

.agenda-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 100%;
}

.agenda-hero-actions .agenda-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.agenda-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 32px;
}

.agenda-mode-card {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.agenda-mode-card p {
  max-width: 100%;
  overflow-wrap: break-word;
}

.agenda-view-panel {
  margin-top: 22px;
  width: 100%;
  min-height: 320px;
  border-radius: 24px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  padding: 24px;
  box-sizing: border-box;
}

.agenda-empty-state {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(34,197,94,.10), transparent 36%),
    rgba(255,255,255,.025);
  border: 1px dashed rgba(255,255,255,.14);
  padding: 32px 20px;
}

.agenda-empty-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
  font-size: 28px;
  margin-bottom: 4px;
}

.agenda-empty-state h3 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.agenda-empty-state p {
  margin: 0;
  max-width: 520px;
  color: rgba(255,255,255,.64);
  line-height: 1.55;
  font-size: 15px;
}

.agenda-btn-success {
  max-width: 100%;
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #fff;
  border: none;
  box-shadow: 0 8px 20px rgba(34,197,94,0.25);
}

.agenda-btn-success:hover {
  box-shadow: 0 12px 25px rgba(34,197,94,0.35);
  transform: translateY(-2px);
}

@media (max-width: 1100px) {
  .agenda-header,
  .agenda-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .agenda-hero-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .agenda-mode-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .agenda-btn {
    width: 100%;
    justify-content: center;
  }

  .agenda-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
  .agenda-title-area h2 {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 12px 0;
    background: linear-gradient(135deg, #ffffff 0%, #a3a3a3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
  }
  .agenda-title-area p {
    color: rgba(255,255,255,0.5);
    margin: 0;
    font-size: 15px;
    max-width: 600px;
    line-height: 1.6;
  }
  .agenda-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    color: #a3a3a3;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .agenda-status-badge span {
    color: #facc15;
    animation: pulseBadge 2s infinite;
  }
  @keyframes pulseBadge {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
  }
  .agenda-actions {
    display: flex;
    gap: 16px;
  }
  .agenda-btn {
    appearance: none;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .agenda-btn-primary {
    background: linear-gradient(135deg, #10d98a, #047857);
    color: #fff;
    box-shadow: 0 8px 20px rgba(16,217,138,0.25);
  }
  .agenda-btn-primary:hover {
    box-shadow: 0 12px 25px rgba(16,217,138,0.35);
    transform: translateY(-2px);
  }
  .agenda-btn-secondary {
    background: rgba(255,255,255,0.04);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .agenda-btn-secondary:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
  }
  .agenda-info-box {
    background: linear-gradient(90deg, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0.02) 100%);
    border-left: 3px solid #3b82f6;
    padding: 20px 24px;
    border-radius: 12px;
    margin-bottom: 32px;
  }
  .agenda-info-box h4 { margin: 0 0 6px; color: #60a5fa; font-size: 15px; font-weight: 700; }
  .agenda-info-box p { margin: 0; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; }
  
  .agenda-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 32px;
    background: rgba(255,255,255,0.03);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
  }
  .agenda-tab {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
  }
  .agenda-tab:hover {
    color: rgba(255,255,255,0.8);
  }
  .agenda-tab.active {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 10px rgba(255,255,255,0.1);
  }
  
  .agenda-content-area {
    min-height: 400px;
  }
  .agenda-empty {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255,255,255,0.01);
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 20px;
  }
  .agenda-empty h3 { margin: 0 0 12px; font-size: 20px; color: #fff; font-weight: 700; }
  .agenda-empty p { margin: 0; color: rgba(255,255,255,0.4); font-size: 15px; }
  
  /* Cards de Evento */
  .agenda-event-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 16px;
    display: flex;
    align-items: stretch;
    gap: 20px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .agenda-event-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .agenda-event-time {
    width: 90px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .agenda-event-time strong { font-size: 22px; color: #fff; line-height: 1; margin-bottom: 6px; font-weight: 800; }
  .agenda-event-time span { font-size: 12px; color: rgba(255,255,255,0.3); font-weight: 600; text-transform: uppercase; }
  
  .agenda-event-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .agenda-event-details h4 {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }
  .agenda-event-details p {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
  }
  .agenda-event-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .agenda-tag {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
  }
  .agenda-tag.tag-ligacao { background: rgba(56,189,248,0.1); color: #38bdf8; border: 1px solid rgba(56,189,248,0.2); }
  .agenda-tag.tag-followup { background: rgba(250,204,21,0.1); color: #facc15; border: 1px solid rgba(250,204,21,0.2); }
  .agenda-tag.tag-visita { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
  .agenda-tag.tag-documentacao { background: rgba(251,146,60,0.1); color: #fb923c; border: 1px solid rgba(251,146,60,0.2); }
  .agenda-tag.tag-venda { background: rgba(168,85,247,0.1); color: #c084fc; border: 1px solid rgba(168,85,247,0.2); }
  
  .agenda-event-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
  }
  .agenda-event-actions button {
    width: 100%;
    justify-content: center;
  }
  
  /* Modal Premium */
  .agenda-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .agenda-modal-overlay.active {
    display: flex;
    opacity: 1;
  }
  .agenda-modal-box {
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.8);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .agenda-modal-overlay.active .agenda-modal-box {
    transform: scale(1);
  }
  .agenda-modal-header {
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .agenda-modal-header h3 { margin: 0; font-size: 20px; font-weight: 800; color: #fff; }
  .agenda-modal-close {
    background: rgba(255,255,255,0.05);
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }
  .agenda-modal-close:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
  }
  .agenda-modal-body {
    padding: 32px;
    overflow-y: auto;
  }
  .agenda-form-group {
    margin-bottom: 20px;
  }
  .agenda-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .agenda-input {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px 16px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    transition: all 0.2s ease;
    box-sizing: border-box;
  }
  .agenda-input:focus {
    outline: none;
    border-color: #10d98a;
    background: rgba(16,217,138,0.02);
    box-shadow: 0 0 0 3px rgba(16,217,138,0.1);
  }
  .agenda-modal-footer {
    padding: 24px 32px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(0,0,0,0.3);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }



/* NOVO CSS DA CONFIGURACAO DO BACKEND */
.agenda-backend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.agenda-btn {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}

.agenda-btn:hover {
  transform: translateY(-2px);
}

.agenda-btn-success {
  background: linear-gradient(135deg, #22c55e, #10b981);
  color: #03130a;
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 14px 36px rgba(16,185,129,.22);
}

.agenda-btn-dark {
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.92);
}

.agenda-btn-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border-color: rgba(139,92,246,.5);
}

.agenda-btn-outline {
  background: rgba(56,189,248,.06);
  color: #38bdf8;
  border-color: rgba(56,189,248,.35);
}

.agenda-btn-danger {
  background: rgba(239,68,68,.08);
  color: #ef4444;
  border-color: rgba(239,68,68,.35);
}

.agenda-backend-card {
  margin-top: 28px;
  padding: 28px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 0%, rgba(56,189,248,.10), transparent 32%),
    rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.30);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.agenda-backend-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.agenda-backend-head h2 {
  margin: 6px 0 10px;
  font-size: clamp(24px, 2.1vw, 36px);
  line-height: 1.1;
  color: #fff;
}

.agenda-backend-head p {
  margin: 0;
  max-width: 980px;
  color: rgba(255,255,255,.70);
  line-height: 1.55;
  font-size: 15px;
}

.agenda-kicker {
  color: #38bdf8;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.agenda-backend-mode {
  min-width: 180px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.22);
}

.agenda-backend-mode span {
  display: block;
  color: rgba(255,255,255,.56);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.agenda-backend-mode strong {
  color: #38bdf8;
  font-size: 22px;
}

.agenda-backend-form label > span {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.agenda-backend-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.agenda-backend-input-row input {
  width: 100%;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: #fff;
  padding: 0 18px;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.agenda-backend-input-row input::placeholder {
  color: rgba(255,255,255,.38);
}

.agenda-backend-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.agenda-status-box {
  min-height: 92px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.07);
}

.agenda-status-box span {
  display: block;
  color: rgba(255,255,255,.52);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.agenda-status-box strong {
  color: rgba(255,255,255,.92);
  font-size: 16px;
}

.agenda-backend-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  color: rgba(255,255,255,.58);
  font-size: 13px;
}

.agenda-endpoints {
  margin-top: 28px;
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.agenda-endpoints summary {
  cursor: pointer;
  padding: 18px 22px;
  color: #fff;
  font-weight: 900;
  list-style: none;
}

.agenda-endpoints-list {
  padding: 0 22px 22px;
  display: grid;
  gap: 10px;
}

.agenda-endpoint-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.agenda-endpoint-row code {
  color: #38bdf8;
  font-weight: 800;
}

.agenda-endpoint-row span {
  color: rgba(255,255,255,.68);
}

@media (max-width: 1100px) {
  .agenda-backend-head {
    flex-direction: column;
  }
  .agenda-backend-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agenda-endpoint-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .agenda-wrap {
    padding: 22px 16px 96px;
  }
  .agenda-backend-card {
    padding: 20px;
  }
  .agenda-backend-input-row {
    grid-template-columns: 1fr;
  }
  .agenda-backend-status-grid {
    grid-template-columns: 1fr;
  }
  .agenda-backend-actions {
    flex-direction: column;
  }
  .agenda-btn {
    width: 100%;
  }
}


/* ══ bloco original: linhas 19281–19332 ══ */
.native-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: #050816;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 24px 70px rgba(0,0,0,.52),
    0 0 0 1px rgba(250,204,21,.08);
  transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
}

/* iframe e div do player YouTube ficam na própria camada GPU */
.native-video-frame iframe,
.native-video-frame > div {
  will-change: transform;
}

.native-video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at 50% 0%, rgba(250,204,21,.12), transparent 42%);
}

.native-hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #050816;
}

.native-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .native-hero-video {
    display: none;
  }
}

/* ── Facade hero video — hover no botão play ── */
#hero-video-wrapper:hover #hero-play-btn {
  transform: scale(1.13);
  box-shadow:
    0 12px 50px rgba(230,57,70,0.72),
    0 0 0 18px rgba(230,57,70,0.22);
}



/* ══ bloco original: linhas 22073–22483 ══ */
    .pros-pro-wrap {
      width: 100%;
      min-height: 100vh;
      padding: 34px 42px 90px;
      background:
        radial-gradient(circle at 15% 5%, rgba(34,197,94,.12), transparent 28%),
        radial-gradient(circle at 85% 0%, rgba(251,146,60,.10), transparent 30%),
        #050707;
      color: #fff;
      overflow-y: auto;
    }

    .pros-pro-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
      gap: 26px;
      padding: 34px;
      border-radius: 28px;
      background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
      border: 1px solid rgba(34,197,94,.28);
      box-shadow: 0 24px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
      position: relative;
      overflow: hidden;
    }

    .pros-pro-badge {
      display: inline-flex;
      width: fit-content;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(34,197,94,.12);
      border: 1px solid rgba(34,197,94,.30);
      color: #22c55e;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: 12px;
    }

    .pros-pro-hero h1 {
      margin: 18px 0 12px;
      font-size: clamp(42px, 4.4vw, 76px);
      line-height: .95;
      font-weight: 950;
      letter-spacing: -.05em;
    }

    .pros-pro-hero p {
      margin: 0;
      color: rgba(255,255,255,.78);
      font-size: 18px;
      line-height: 1.55;
    }

    .pros-pro-actions {
      display: flex;
      gap: 15px;
      margin: 20px 0;
    }

    .pros-pro-btn {
      border: 0;
      outline: none;
      min-height: 46px;
      padding: 0 18px;
      border-radius: 14px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }

    .pros-pro-btn-primary {
      background: linear-gradient(135deg, #22c55e, #16a34a);
      color: #02130a;
      box-shadow: 0 14px 36px rgba(34,197,94,.22);
    }

    .pros-pro-btn-secondary {
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.92);
      border: 1px solid rgba(255,255,255,.14);
    }

    .pros-pro-btn-ghost {
      background: rgba(250,204,21,.08);
      color: #facc15;
      border: 1px solid rgba(250,204,21,.22);
    }

    .pros-pro-btn:hover {
      transform: translateY(-2px);
    }

    .pros-pro-hero-right small {
      display: block;
      color: rgba(255,255,255,.5);
      font-size: 13px;
    }

    .pros-pro-section {
      margin-top: 32px;
      padding: 28px;
      border-radius: 26px;
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 18px 60px rgba(0,0,0,.28);
    }

    .pros-pro-section-head {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 22px;
    }

    .pros-pro-section-head span {
      color: #22c55e;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .pros-pro-section-head h2 {
      margin: 4px 0 0;
      font-size: clamp(26px, 2.4vw, 42px);
      line-height: 1.05;
      letter-spacing: -.03em;
    }

    .pros-pro-grid {
      display: grid;
      gap: 18px;
    }

    .pros-pro-grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pros-pro-card,
    .pros-pro-step-card {
      border-radius: 22px;
      padding: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .pros-pro-card:hover,
    .pros-pro-step-card:hover {
      transform: translateY(-3px);
      border-color: rgba(34,197,94,.38);
      background: linear-gradient(180deg, rgba(34,197,94,.075), rgba(255,255,255,.028));
    }

    .pros-pro-card h3,
    .pros-pro-step-card h3 {
      margin: 0 0 10px;
      color: #fff;
      font-size: 20px;
      font-weight: 900;
    }

    .pros-pro-card p,
    .pros-pro-step-card p {
      margin: 0;
      color: rgba(255,255,255,.72);
      line-height: 1.55;
      font-size: 15px;
    }

    .pros-pro-steps-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(220px, 1fr));
      gap: 18px;
    }

    .pros-pro-step-number {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: rgba(34,197,94,.12);
      border: 1px solid rgba(34,197,94,.34);
      color: #22c55e;
      font-size: 24px;
      font-weight: 950;
      margin-bottom: 18px;
    }

    .pros-pro-step-card blockquote {
      margin: 14px 0;
      padding: 12px 14px;
      border-left: 3px solid #fb923c;
      color: rgba(255,255,255,.86);
      background: rgba(251,146,60,.08);
      border-radius: 12px;
      font-style: italic;
      font-size: 14px;
    }

    .pros-pro-drawer {
      position: fixed; top: 0; right: -550px; width: 450px; height: 100%; background: #fff; color: #333; box-shadow: -5px 0 30px rgba(0,0,0,0.5); z-index: 9999; transition: right 0.3s ease; display: flex; flex-direction: column;
    }
    .pros-pro-drawer.active { right: 0; }
    .pros-pro-drawer-header {
      padding: 20px; background: #0a0a0a; color: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #22c55e;
    }
    .pros-pro-drawer-header h2 { margin: 0; font-size: 18px; font-family: "Montserrat", sans-serif; text-transform: uppercase; }
    .pros-pro-drawer-header .close-btn { background: #333; color: #fff; border: none; padding: 6px 12px; font-size: 11px; cursor: pointer; border-radius: 4px; font-weight: bold; }
    .pros-pro-drawer-header .close-btn:hover { background: #fb923c; }
    .pros-pro-drawer-content { padding: 20px; overflow-y: auto; flex: 1; }
    
    .pros-pro-content-shell .section-block { margin-bottom: 25px; }
    .pros-pro-content-shell .section-title { font-size: 13px; font-weight: bold; color: #0a0a0a; border-bottom: 1px solid #eee; padding-bottom: 6px; margin-bottom: 10px; text-transform: uppercase; }
    .pros-pro-content-shell .lead-text { font-size: 14px; line-height: 1.6; color: #444; margin: 0; }
    .pros-pro-content-shell .context-list { padding-left: 20px; margin: 0; }
    .pros-pro-content-shell .context-list li { font-size: 14px; line-height: 1.6; color: #444; margin-bottom: 8px; }
    .pros-pro-content-shell .script-box { background: #f5fdf8; border-left: 4px solid #22c55e; padding: 15px; font-size: 14px; font-style: italic; color: #0d6d3d; border-radius: 4px; }
    .pros-pro-content-shell .hook-box { background: #fff5f0; border-left: 4px solid #fb923c; padding: 15px; font-size: 14px; font-style: italic; color: #c94c16; border-radius: 4px; }
    .pros-pro-content-shell .action-grid { display: grid; gap: 10px; }
    .pros-pro-content-shell .action-box { padding: 12px; font-size: 13px; border-radius: 4px; line-height: 1.5; }
    .pros-pro-content-shell .pos { background: #eef9f2; color: #0a4f27; border: 1px solid #cce8d6; }
    .pros-pro-content-shell .neg { background: #fdf2f2; color: #822020; border: 1px solid #f5d6d6; }
    .pros-pro-content-shell .chef-tip { text-align: center; font-weight: bold; color: #22c55e; padding: 15px; border: 1px dashed #ccc; border-radius: 6px; font-size: 14px; }

    @media (max-width: 1200px) {
      .pros-pro-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .pros-pro-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .pros-pro-hero {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      .pros-pro-wrap {
        padding: 22px 16px 90px;
      }

      .pros-pro-grid-4,
      .pros-pro-steps-grid {
        grid-template-columns: 1fr;
      }

      .pros-pro-section {
        padding: 20px;
      }
      .pros-pro-drawer { width: 100%; right: -100%; }
    }

    .pros-pro-tests-section {
      border-color: rgba(34,197,94,.22);
      background:
        radial-gradient(circle at 15% 0%, rgba(34,197,94,.10), transparent 30%),
        rgba(255,255,255,.035);
    }

    .pros-pro-tests-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-top: 22px;
    }

    .pros-pro-test-card {
      min-height: 128px;
      padding: 22px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
    }

    .pros-pro-test-card strong {
      font-size: 30px;
      line-height: 1;
      font-weight: 950;
      color: #22c55e;
    }

    .pros-pro-test-card span {
      color: rgba(255,255,255,.72);
      font-size: 14px;
      line-height: 1.45;
    }

    .pros-pro-tests-callout {
      margin-top: 18px;
      padding: 20px 22px;
      border-radius: 20px;
      background: rgba(34,197,94,.08);
      border: 1px solid rgba(34,197,94,.18);
    }

    .pros-pro-tests-callout h3 {
      margin: 0 0 8px;
      color: #fff;
      font-size: 20px;
      font-weight: 900;
    }

    .pros-pro-tests-callout p {
      margin: 0;
      color: rgba(255,255,255,.74);
      line-height: 1.55;
    }

    /* TSK MODAL STYLES RESTORED */
    .tsk-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 20px;
      font-family: "Roboto", sans-serif;
    }
    .tsk-modal.tsk-active {
      display: flex;
    }
    .tsk-dialog {
      background: #111;
      color: #fff;
      width: 100%;
      max-width: 800px;
      border-radius: 16px;
      border: 1px solid #333;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      max-height: 90vh;
      display: flex;
      flex-direction: column;
    }
    .tsk-header {
      padding: 24px;
      border-bottom: 1px solid #222;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-shrink: 0;
    }
    .tsk-eyebrow {
      color: #22c55e;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }
    .tsk-title {
      font-size: 22px;
      font-weight: 900;
      margin: 0 0 8px 0;
    }
    .tsk-subtitle {
      font-size: 13px;
      color: #999;
      margin: 0;
      line-height: 1.5;
    }
    .tsk-close {
      background: rgba(255,255,255,0.1);
      border: none;
      color: #fff;
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
    }
    .tsk-close:hover { background: rgba(255,255,255,0.2); }
    .tsk-body {
      padding: 24px;
      background: #0a0a0a;
      overflow-y: auto;
      flex: 1;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
    }

    @media (max-width: 1100px) {
      .pros-pro-tests-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .pros-pro-tests-grid {
        grid-template-columns: 1fr;
      }
    }
  


/* ══ bloco original: linhas 32872–33315 ══ */
    #wa-float-btn {
      position: fixed;
      bottom: 32px;
      right: 28px;
      z-index: 99970;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: linear-gradient(145deg, #25d366 0%, #128c7e 100%);
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(37, 211, 102, .45), 0 1px 6px rgba(0, 0, 0, .35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s;
    }

    #wa-float-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 30px rgba(37, 211, 102, .6)
    }

    #wa-float-btn.panel-open {
      transform: rotate(90deg) scale(1.05)
    }

    #wa-fab-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #f5c518;
      color: #07090f;
      font-size: 9px;
      font-weight: 800;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      padding: 0 4px;
      display: none;
      align-items: center;
      justify-content: center;
      font-family: Outfit, sans-serif;
      border: 1.5px solid #07090f;
      box-sizing: border-box;
    }

    #wa-panel-overlay {
      position: fixed;
      inset: 0;
      z-index: 99971;
      background: rgba(0, 0, 0, .42);
      backdrop-filter: blur(3px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s;
    }

    #wa-panel-overlay.open {
      opacity: 1;
      pointer-events: all
    }

    #wa-panel {
      position: fixed;
      right: -430px;
      top: 0;
      bottom: 0;
      width: 420px;
      max-width: 100vw;
      background: #0a0e17;
      border-left: 1px solid rgba(37, 211, 102, .18);
      z-index: 99972;
      display: flex;
      flex-direction: column;
      transition: right .32s cubic-bezier(.4, 0, .2, 1);
      box-shadow: -12px 0 52px rgba(0, 0, 0, .7);
    }

    #wa-panel.open {
      right: 0
    }

    .wap-hdr {
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      background: linear-gradient(180deg, rgba(37, 211, 102, .06) 0%, transparent 100%);
    }

    .wap-hdr-icon {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(145deg, #25d366, #128c7e);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .wap-hdr-info {
      flex: 1;
      min-width: 0
    }

    .wap-hdr-title {
      font-size: 13.5px;
      font-weight: 800;
      color: #fff;
      letter-spacing: .01em
    }

    .wap-hdr-sub {
      font-size: 11px;
      color: rgba(255, 255, 255, .38);
      margin-top: 1px
    }

    .wap-hbtn {
      width: 31px;
      height: 31px;
      border-radius: 8px;
      flex-shrink: 0;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .09);
      color: rgba(255, 255, 255, .55);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: all .15s;
      font-family: Outfit, sans-serif;
    }

    .wap-hbtn:hover {
      background: rgba(37, 211, 102, .15);
      color: #25d366;
      border-color: rgba(37, 211, 102, .3)
    }

    .wap-body {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden
    }

    .wap-body::-webkit-scrollbar {
      width: 3px
    }

    .wap-body::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .1);
      border-radius: 4px
    }

    .wap-section {
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .055)
    }

    .wap-section-label {
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, .25);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 10px
    }

    .wap-btn {
      width: 100%;
      padding: 11px 14px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      font-family: Outfit, sans-serif;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
      text-align: left;
      transition: transform .12s, opacity .15s;
    }

    .wap-btn:last-child {
      margin-bottom: 0
    }

    .wap-btn:hover {
      opacity: .92;
      transform: translateY(-1px)
    }

    .wap-btn:active {
      transform: translateY(0)
    }

    .wap-btn.green {
      background: linear-gradient(135deg, #25d366, #128c7e);
      color: #fff;
      box-shadow: 0 3px 14px rgba(37, 211, 102, .28)
    }

    .wap-btn.ghost {
      background: rgba(37, 211, 102, .08);
      color: #25d366;
      border: 1px solid rgba(37, 211, 102, .22)
    }

    .wap-btn.neutral {
      background: rgba(255, 255, 255, .06);
      color: rgba(255, 255, 255, .65);
      border: 1px solid rgba(255, 255, 255, .09)
    }

    .wap-btn-icon {
      font-size: 18px;
      flex-shrink: 0;
      width: 22px;
      text-align: center
    }

    .wap-btn-lbl {
      flex: 1
    }

    .wap-btn-lbl small {
      display: block;
      font-size: 10.5px;
      font-weight: 400;
      opacity: .65;
      margin-top: 1px;
      line-height: 1.35
    }

    .wap-cfg-row {
      display: flex;
      gap: 7px;
      align-items: center
    }

    .wap-cfg-input {
      flex: 1;
      padding: 8px 11px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 8px;
      color: #fff;
      font-family: Outfit, sans-serif;
      font-size: 12.5px;
      outline: none;
    }

    .wap-cfg-input:focus {
      border-color: rgba(37, 211, 102, .4);
      background: rgba(255, 255, 255, .08)
    }

    .wap-cfg-input::placeholder {
      color: rgba(255, 255, 255, .25)
    }

    .wap-cfg-save {
      padding: 8px 13px;
      background: rgba(37, 211, 102, .12);
      color: #25d366;
      border: 1px solid rgba(37, 211, 102, .28);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      font-family: Outfit, sans-serif;
      white-space: nowrap;
      transition: background .15s;
    }

    .wap-cfg-save:hover {
      background: rgba(37, 211, 102, .24)
    }

    .wap-search-wrap {
      position: relative;
      padding: 10px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .wap-search-icon {
      position: absolute;
      left: 27px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 13px;
      color: rgba(255, 255, 255, .3);
      pointer-events: none
    }

    .wap-search-inp {
      width: 100%;
      padding: 8px 12px 8px 34px;
      box-sizing: border-box;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 8px;
      color: #fff;
      font-family: Outfit, sans-serif;
      font-size: 12.5px;
      outline: none;
    }

    .wap-search-inp:focus {
      border-color: rgba(37, 211, 102, .35);
      background: rgba(255, 255, 255, .08)
    }

    .wap-search-inp::placeholder {
      color: rgba(255, 255, 255, .28)
    }

    .wap-leads-hdr {
      padding: 8px 16px 4px;
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, .25);
      text-transform: uppercase;
      letter-spacing: .1em
    }

    .wap-lead-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .035);
      transition: background .12s;
      cursor: default;
    }

    .wap-lead-item:hover {
      background: rgba(255, 255, 255, .04)
    }

    .wap-lead-av {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      text-transform: uppercase;
    }

    .wap-lead-info {
      flex: 1;
      min-width: 0
    }

    .wap-lead-name {
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .wap-lead-sub {
      font-size: 11px;
      color: rgba(255, 255, 255, .38);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 1px
    }

    .wap-lead-tel {
      font-size: 11px;
      color: rgba(255, 255, 255, .45);
      margin-top: 2px
    }

    .wap-lead-cta {
      display: flex;
      gap: 5px;
      flex-shrink: 0;
      align-items: center
    }

    .wap-send-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      background: rgba(37, 211, 102, .14);
      color: #25d366;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .14s, transform .12s;
    }

    .wap-send-btn:hover {
      background: rgba(37, 211, 102, .3);
      transform: scale(1.12)
    }

    .wap-empty {
      padding: 36px 16px;
      text-align: center;
      color: rgba(255, 255, 255, .28);
      font-size: 13px
    }

    .wap-empty-icon {
      font-size: 36px;
      margin-bottom: 10px
    }

    @media(max-width:600px) {
      #wa-panel {
        width: 100vw
      }

      #wa-float-btn {
        bottom: 80px;
        right: 14px
      }
    }
  


/* ══ bloco original: linhas 33680–35260 ══ */
    #welcomeOverlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .82);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      backdrop-filter: blur(6px);
      opacity: 1;
      transition: opacity .35s
    }

    #onboarding-box {
      background: linear-gradient(145deg, #161b27, #1e2538);
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 20px;
      padding: 36px 40px;
      max-width: 520px;
      width: 100%;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .65);
      position: relative
    }

    .ob-logo {
      font-size: 32px;
      margin-bottom: 4px;
      text-align: center
    }

    .ob-title {
      font-size: 22px;
      font-weight: 800;
      color: #fff;
      text-align: center;
      letter-spacing: -.4px;
      margin-bottom: 6px
    }

    .ob-sub {
      font-size: 13px;
      color: rgba(255, 255, 255, .5);
      text-align: center;
      margin-bottom: 28px;
      line-height: 1.5
    }

    .ob-steps {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 28px
    }

    .ob-step {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 16px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 12px
    }

    .ob-step-num {
      width: 28px;
      height: 28px;
      min-width: 28px;
      border-radius: 50%;
      background: rgba(245, 197, 24, .15);
      border: 1px solid rgba(245, 197, 24, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: #f5c518
    }

    .ob-step-body {
      flex: 1
    }

    .ob-text {
        font-size: 12.5px;
        color: rgba(255, 255, 255, .6);
        margin-bottom: 16px;
        line-height: 1.5
    }

    .ob-step-title {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 3px
    }

    .ob-step-desc {
      font-size: 11.5px;
      color: rgba(255, 255, 255, .45);
      line-height: 1.5
    }

    .ob-step-desc a {
      color: #818cf8;
      text-decoration: none
    }

    .ob-btn {
      width: 100%;
      padding: 14px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f5c518, #e6b800);
      color: #000;
      font-size: 14px;
      font-weight: 800;
      border: none;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: .3px;
      transition: opacity .15s;
      box-shadow: 0 4px 20px rgba(245, 197, 24, .3)
    }

    .ob-btn:hover {
      opacity: .9
    }

    .ob-skip {
      text-align: center;
      margin-top: 14px;
      font-size: 11.5px;
      color: rgba(255, 255, 255, .3);
      cursor: pointer;
      transition: color .15s
    }

    .ob-skip:hover {
      color: rgba(255, 255, 255, .55)
    }

    @media(max-width:520px) {
      #onboarding-box {
        padding: 24px 20px
      }

      .ob-title {
        font-size: 18px
      }
    }

    /* ══════════════════════════════════════════
   ADMIN MODULE — Usuários Autorizados
══════════════════════════════════════════ */
    /* Visibilidade do botão admin é controlada 100% via JS (updateAdminMenuVisibility)
   — CSS não usa !important aqui para não bloquear inline style do JS */
    body[data-role="corretor"] #adm-nav-btn,
    body[data-role="viewer"] #adm-nav-btn,
    body[data-role="manager"] #adm-nav-btn {
      display: none
    }

    #module-admin {
      min-height: calc(100vh - 44px);
      background: var(--bg);
      color: var(--text)
    }

    .adm-wrap {
      max-width: 1320px;
      margin: 0 auto;
      padding: 28px 24px 60px
    }

    .adm-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 28px;
      gap: 16px;
      flex-wrap: wrap
    }

    .adm-header-title {
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.4px
    }

    .adm-header-sub {
      font-size: 13px;
      color: var(--muted);
      margin-top: 4px;
      max-width: 560px
    }

    .adm-btn-refresh {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 16px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--trans);
      font-family: inherit;
      white-space: nowrap
    }

    .adm-btn-refresh:hover {
      color: var(--text);
      border-color: rgba(255, 255, 255, .2)
    }

    .adm-stats {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-bottom: 28px
    }

    @media(max-width:900px) {
      .adm-stats {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media(max-width:600px) {
      .adm-stats {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .adm-stat {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 18px
    }

    .adm-stat-green {
      border-top: 3px solid var(--green)
    }

    .adm-stat-red {
      border-top: 3px solid var(--red)
    }

    .adm-stat-orange {
      border-top: 3px solid var(--orange)
    }

    .adm-stat-blue {
      border-top: 3px solid var(--blue)
    }

    .adm-stat-num {
      font-size: 28px;
      font-weight: 800;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      letter-spacing: -.5px
    }

    .adm-stat-lbl {
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 2px;
      font-weight: 500
    }

    .adm-tabs {
      display: flex;
      gap: 4px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 0;
      overflow-x: auto;
      scrollbar-width: none
    }

    .adm-tabs::-webkit-scrollbar {
      display: none
    }

    .adm-tab {
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      border: none;
      background: transparent;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      white-space: nowrap;
      transition: all .18s;
      font-family: inherit
    }

    .adm-tab:hover {
      color: var(--text)
    }

    .adm-tab.active {
      color: var(--acc);
      border-bottom-color: var(--acc)
    }

    .adm-panel {
      background: var(--card);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 var(--radius) var(--radius);
      padding: 24px;
      margin-bottom: 28px
    }

    .adm-form-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 18px;
      letter-spacing: -.2px
    }

    .adm-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    @media(max-width:640px) {
      .adm-form-grid {
        grid-template-columns: 1fr
      }
    }

    .adm-field {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .adm-field-full {
      grid-column: 1/-1
    }

    .adm-label {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .adm-input,
    .adm-select,
    .adm-textarea {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      padding: 9px 12px;
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: border-color .15s;
      width: 100%
    }

    .adm-input:focus,
    .adm-select:focus,
    .adm-textarea:focus {
      border-color: var(--acc)
    }

    .adm-textarea {
      resize: vertical;
      min-height: 180px;
      line-height: 1.6
    }

    .adm-check-row {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none
    }

    .adm-check-row input[type=checkbox] {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: var(--acc)
    }

    .adm-check-label {
      font-size: 13px;
      color: var(--text)
    }

    .adm-form-actions {
      margin-top: 20px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .adm-btn-primary {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 10px 20px;
      border-radius: var(--radius-sm);
      border: none;
      background: var(--acc);
      color: #000;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all .18s;
      font-family: inherit
    }

    .adm-btn-primary:hover {
      background: var(--acc2);
      transform: translateY(-1px)
    }

    .adm-btn-primary:active {
      transform: translateY(0)
    }

    .adm-btn-secondary {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 10px 20px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--card2);
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all .18s;
      font-family: inherit
    }

    .adm-btn-secondary:hover {
      color: var(--text);
      border-color: rgba(255, 255, 255, .2)
    }

    .adm-btn-danger {
      background: rgba(255, 77, 109, .15);
      color: var(--red);
      border: 1px solid rgba(255, 77, 109, .2);
      border-radius: var(--radius-xs);
      padding: 5px 10px;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s
    }

    .adm-btn-danger:hover {
      background: rgba(255, 77, 109, .25)
    }

    .adm-btn-action {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--radius-xs);
      padding: 5px 9px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      color: var(--muted);
      transition: all .15s;
      white-space: nowrap
    }

    .adm-btn-action:hover {
      color: var(--text);
      border-color: rgba(255, 255, 255, .2)
    }

    .adm-batch-hint {
      background: rgba(77, 159, 255, .07);
      border: 1px solid rgba(77, 159, 255, .15);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      margin-bottom: 14px;
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.7
    }

    .adm-batch-hint code {
      background: rgba(255, 255, 255, .06);
      border-radius: 4px;
      padding: 1px 6px;
      font-size: 11.5px;
      color: var(--blue)
    }

    .adm-batch-defaults {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--border)
    }

    .adm-batch-result {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 16px;
      margin-top: 16px;
      font-size: 13px;
      line-height: 1.8
    }

    .adm-filters {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border)
    }

    .adm-search {
      flex: 1;
      min-width: 200px
    }

    .adm-filter-sel {
      min-width: 130px;
      flex: 0
    }

    .adm-table-wrap {
      overflow-x: auto;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border)
    }

    .adm-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px
    }

    .adm-table th {
      background: var(--card2);
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 10px 12px;
      text-align: left;
      white-space: nowrap;
      border-bottom: 1px solid var(--border)
    }

    .adm-table td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--borderL);
      color: var(--text);
      vertical-align: middle
    }

    .adm-table tr:last-child td {
      border-bottom: none
    }

    .adm-table tr:hover td {
      background: rgba(255, 255, 255, .025)
    }

    .adm-loading {
      text-align: center;
      color: var(--muted);
      padding: 32px !important
    }

    .adm-empty {
      text-align: center;
      color: var(--muted);
      padding: 40px !important
    }

    .adm-actions-cell {
      display: flex;
      gap: 5px;
      flex-wrap: wrap
    }

    .adm-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 700
    }

    .adm-badge-active {
      background: rgba(16, 217, 138, .12);
      color: var(--green)
    }

    .adm-badge-inactive {
      background: rgba(136, 146, 176, .1);
      color: var(--muted)
    }

    .adm-badge-blocked {
      background: rgba(255, 77, 109, .12);
      color: var(--red)
    }

    .adm-badge-expired {
      background: rgba(251, 146, 60, .12);
      color: var(--orange)
    }

    .adm-plan-starter {
      display: inline-flex;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      background: rgba(136, 146, 176, .12);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .adm-plan-pro {
      display: inline-flex;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      background: rgba(77, 159, 255, .12);
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .adm-plan-premium {
      display: inline-flex;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      background: rgba(245, 197, 24, .12);
      color: var(--acc);
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .adm-role-admin {
      color: #f5c518;
      font-weight: 600
    }

    .adm-role-manager {
      color: var(--blue);
      font-weight: 600
    }

    .adm-role-corretor {
      color: var(--green);
      font-weight: 600
    }

    .adm-role-viewer {
      color: var(--purple);
      font-weight: 600
    }

    .adm-edit-modal-inner {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0, 0, 0, .75);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    .adm-edit-box {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      width: 100%;
      max-width: 640px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-lg)
    }

    .adm-edit-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px 16px;
      border-bottom: 1px solid var(--border)
    }

    .adm-edit-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text)
    }

    .adm-edit-close {
      background: transparent;
      border: none;
      color: var(--muted);
      cursor: pointer;
      padding: 4px;
      transition: color .15s;
      line-height: 0
    }

    .adm-edit-close:hover {
      color: var(--text)
    }

    .adm-edit-body {
      padding: 22px;
      overflow-y: auto;
      flex: 1
    }

    .adm-edit-footer {
      padding: 14px 22px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 10px
    }

    /* ══════════════════════════════════════════════════════════════
   MÓDULOS NOVOS — Prioridades · Agenda · Doc · Comissão · Campanhas · Reativação
══════════════════════════════════════════════════════════════ */

    /* Container padrão dos novos módulos */
    .mod-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 24px 80px
    }

    .mod-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 28px;
      flex-wrap: wrap
    }

    .mod-hdr-left {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .mod-hdr-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0
    }

    .mod-hdr-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.4px;
      line-height: 1.2
    }

    .mod-hdr-sub {
      font-size: 12.5px;
      color: var(--muted);
      margin-top: 2px
    }

    /* Grupos de seção */
    .mod-section {
      margin-bottom: 32px
    }

    .mod-section-title {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border)
    }

    /* Cards de prioridade/status */
    .prio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 14px
    }

    .prio-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: border-color .18s
    }

    .prio-card:hover {
      border-color: rgba(245, 197, 24, .3)
    }

    .prio-card-top {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .prio-card-icon {
      font-size: 20px;
      flex-shrink: 0
    }

    .prio-card-count {
      font-size: 28px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -1px;
      line-height: 1
    }

    .prio-card-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--muted)
    }

    .prio-card-desc {
      font-size: 12px;
      color: rgba(255, 255, 255, .4);
      line-height: 1.5
    }

    .prio-card-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--acc);
      background: rgba(245, 197, 24, .08);
      border: 1px solid rgba(245, 197, 24, .2);
      border-radius: 7px;
      padding: 6px 12px;
      cursor: pointer;
      transition: all .15s;
      font-family: inherit
    }

    .prio-card-cta:hover {
      background: rgba(245, 197, 24, .15);
      border-color: rgba(245, 197, 24, .4)
    }

    .prio-card.urgent {
      border-color: rgba(255, 77, 109, .25)
    }

    .prio-card.urgent:hover {
      border-color: rgba(255, 77, 109, .5)
    }

    /* Cards de Follow-up / Reativação */
    .fu-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .fu-card-top {
      display: flex;
      align-items: flex-start;
      gap: 12px
    }

    .fu-card-info {
      flex: 1;
      min-width: 0
    }

    .fu-card-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .fu-card-reason {
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 2px;
      line-height: 1.4
    }

    .fu-card-msg {
      font-size: 12px;
      color: rgba(255, 255, 255, .5);
      background: rgba(255, 255, 255, .04);
      border-radius: 8px;
      padding: 10px 12px;
      line-height: 1.55;
      border: 1px solid var(--border)
    }

    .fu-card-actions {
      display: flex;
      gap: 7px;
      flex-wrap: wrap
    }

    .fu-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11.5px;
      font-weight: 600;
      border-radius: 7px;
      padding: 6px 12px;
      cursor: pointer;
      transition: all .14s;
      border: 1px solid;
      font-family: inherit
    }

    .fu-btn-wa {
      background: rgba(37, 211, 102, .09);
      border-color: rgba(37, 211, 102, .25);
      color: #25d366
    }

    .fu-btn-wa:hover {
      background: rgba(37, 211, 102, .18);
      border-color: rgba(37, 211, 102, .45)
    }

    .fu-btn-copy {
      background: rgba(77, 159, 255, .09);
      border-color: rgba(77, 159, 255, .25);
      color: var(--blue)
    }

    .fu-btn-copy:hover {
      background: rgba(77, 159, 255, .18)
    }

    .fu-btn-done {
      background: rgba(16, 217, 138, .09);
      border-color: rgba(16, 217, 138, .25);
      color: var(--green)
    }

    .fu-btn-done:hover {
      background: rgba(16, 217, 138, .18)
    }

    .fu-btn-archive {
      background: rgba(136, 146, 176, .08);
      border-color: rgba(136, 146, 176, .18);
      color: var(--muted)
    }

    .fu-btn-archive:hover {
      background: rgba(136, 146, 176, .15)
    }

    /* Score badge */
    .score-badge {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 800;
      border-radius: 5px;
      padding: 2px 8px;
      letter-spacing: .02em
    }

    .score-hot {
      background: rgba(16, 217, 138, .14);
      color: var(--green)
    }

    .score-warm {
      background: rgba(245, 197, 24, .14);
      color: var(--acc)
    }

    .score-cold {
      background: rgba(255, 77, 109, .14);
      color: var(--red)
    }

    /* Agenda / Visitas */
    .visit-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 14px
    }

    .visit-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px
    }

    .visit-card-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px
    }

    .visit-status {
      display: inline-flex;
      padding: 3px 10px;
      border-radius: 5px;
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em
    }

    .vs-agendada {
      background: rgba(77, 159, 255, .14);
      color: var(--blue)
    }

    .vs-confirmada {
      background: rgba(124, 58, 237, .14);
      color: var(--purple)
    }

    .vs-realizada {
      background: rgba(16, 217, 138, .14);
      color: var(--green)
    }

    .vs-nao-compareceu {
      background: rgba(255, 77, 109, .14);
      color: var(--red)
    }

    .vs-reagendar {
      background: rgba(251, 146, 60, .14);
      color: var(--orange)
    }

    .vs-convertida {
      background: rgba(245, 197, 24, .14);
      color: var(--acc)
    }

    .visit-field {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 4px
    }

    .visit-field strong {
      color: var(--text);
      font-weight: 600
    }

    .visit-actions {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border)
    }

    /* Documentação */
    .doc-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px
    }

    .doc-checklist {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 12px 0
    }

    .doc-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12.5px
    }

    .doc-item-check {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 2px solid;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px
    }

    .doc-item-check.done {
      background: rgba(16, 217, 138, .18);
      border-color: var(--green);
      color: var(--green)
    }

    .doc-item-check.pending {
      border-color: rgba(255, 255, 255, .2);
      color: transparent
    }

    .doc-status {
      display: inline-flex;
      padding: 3px 10px;
      border-radius: 5px;
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase
    }

    .ds-pendente {
      background: rgba(251, 146, 60, .12);
      color: var(--orange)
    }

    .ds-incompleta {
      background: rgba(255, 77, 109, .12);
      color: var(--red)
    }

    .ds-analise {
      background: rgba(77, 159, 255, .12);
      color: var(--blue)
    }

    .ds-enviada {
      background: rgba(124, 58, 237, .12);
      color: var(--purple)
    }

    .ds-aprovada {
      background: rgba(16, 217, 138, .12);
      color: var(--green)
    }

    /* Comissão — KPIs */
    .comm-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 28px
    }

    .comm-kpi {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px
    }

    .comm-kpi-val {
      font-size: 24px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -1px;
      line-height: 1
    }

    .comm-kpi-lbl {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
      font-weight: 600
    }

    .comm-kpi.accent .comm-kpi-val {
      color: var(--acc)
    }

    .comm-kpi.green .comm-kpi-val {
      color: var(--green)
    }

    .comm-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px
    }

    .comm-table th {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--muted);
      padding: 8px 12px;
      text-align: left;
      border-bottom: 1px solid var(--border)
    }

    .comm-table td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--borderL);
      color: var(--text);
      vertical-align: middle
    }

    .comm-status {
      display: inline-flex;
      padding: 2px 9px;
      border-radius: 5px;
      font-size: 10.5px;
      font-weight: 700
    }

    .cs-prevista {
      background: rgba(77, 159, 255, .12);
      color: var(--blue)
    }

    .cs-pendente {
      background: rgba(251, 146, 60, .12);
      color: var(--orange)
    }

    .cs-recebida {
      background: rgba(16, 217, 138, .12);
      color: var(--green)
    }

    .cs-cancelada {
      background: rgba(136, 146, 176, .1);
      color: var(--muted)
    }

    /* Campanhas */
    .camp-type-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
      margin-bottom: 20px
    }

    .camp-type-btn {
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      cursor: pointer;
      text-align: left;
      transition: all .18s;
      font-family: inherit
    }

    .camp-type-btn:hover {
      border-color: rgba(245, 197, 24, .35)
    }

    .camp-type-btn.selected {
      border-color: #f5c518;
      background: rgba(245, 197, 24, .06)
    }

    .camp-type-icon {
      font-size: 22px;
      margin-bottom: 8px
    }

    .camp-type-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text)
    }

    .camp-type-desc {
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 3px;
      line-height: 1.4
    }

    .camp-filter-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 18px;
      align-items: flex-end
    }

    .camp-filter-group {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .camp-filter-lbl {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .camp-filter-sel {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      padding: 8px 12px;
      font-family: inherit;
      min-width: 140px
    }

    .camp-lead-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 9px;
      background: var(--card);
      border: 1px solid var(--border);
      margin-bottom: 8px
    }

    .camp-lead-name {
      flex: 1;
      font-size: 13px;
      font-weight: 600;
      color: var(--text)
    }

    .camp-lead-meta {
      font-size: 11.5px;
      color: var(--muted)
    }

    /* Tela de bloqueio de plano */
    .plan-lock {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 60px 24px;
      gap: 16px
    }

    .plan-lock-icon {
      font-size: 40px
    }

    .plan-lock-title {
      font-size: 18px;
      font-weight: 800;
      color: var(--text)
    }

    .plan-lock-desc {
      font-size: 13px;
      color: var(--muted);
      max-width: 380px;
      line-height: 1.6
    }

    .plan-lock-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #f5c518;
      color: #07090f;
      font-size: 13.5px;
      font-weight: 700;
      padding: 11px 24px;
      border-radius: 9px;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: transform .15s
    }

    .plan-lock-cta:hover {
      transform: translateY(-1px)
    }

    /* Form inline */
    .mod-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    @media(max-width:640px) {
      .mod-form-grid {
        grid-template-columns: 1fr
      }
    }

    .mod-field {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .mod-label {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--muted)
    }

    .mod-input,
    .mod-select,
    .mod-textarea {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      padding: 9px 12px;
      font-family: inherit;
      width: 100%;
      box-sizing: border-box;
      transition: border .15s
    }

    .mod-input:focus,
    .mod-select:focus,
    .mod-textarea:focus {
      outline: none;
      border-color: rgba(245, 197, 24, .45)
    }

    .mod-textarea {
      resize: vertical;
      min-height: 80px
    }

    .mod-form-actions {
      display: flex;
      gap: 10px;
      margin-top: 6px
    }

    .mod-btn-primary {
      padding: 9px 22px;
      background: #f5c518;
      color: #07090f;
      font-size: 13px;
      font-weight: 700;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: transform .14s
    }

    .mod-btn-primary:hover {
      transform: translateY(-1px)
    }

    .mod-btn-secondary {
      padding: 9px 18px;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: all .14s
    }

    .mod-btn-secondary:hover {
      color: var(--text);
      border-color: rgba(255, 255, 255, .2)
    }

    /* Sidebar separador visual de grupo */
    .sb-group-lbl {
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .18);
      padding: 10px 0 4px;
      align-self: flex-start;
      padding-left: 10px;
      width: 100%
    }

    @media(max-width:768px) {
      .sb-group-lbl {
        display: none
      }
    }

    /* Estados vazios */
    .mod-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 48px 24px;
      gap: 12px;
      text-align: center
    }

    .mod-empty-icon {
      font-size: 36px;
      opacity: .4
    }

    .mod-empty-text {
      font-size: 13px;
      color: var(--muted);
      max-width: 300px;
      line-height: 1.6
    }
  


/* ══ bloco original: linhas 38897–39032 ══ */
    #onboarding-overlay {
      position: fixed;
      inset: 0;
      z-index: 999999;
      background: rgba(0, 0, 0, 0.55);
      pointer-events: auto;
      transition: opacity 0.3s ease;
      font-family: 'Outfit', system-ui, -apple-system, sans-serif;
      display: none;
    }

    #onboarding-highlight {
      position: absolute;
      border: 2px solid #facc15;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(250, 204, 21, 0.3);
      transition: all 0.4s ease;
      pointer-events: none;
    }

    #onboarding-card {
      position: absolute;
      width: 320px;
      background: #111827;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 14px;
      padding: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      color: #fff;
    }

    #onboarding-progress {
      font-size: 11px;
      color: #9ca3af;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      font-weight: 600;
    }

    #onboarding-title {
      margin: 0 0 8px;
      font-size: 16px;
      font-weight: 800;
      color: #facc15;
      letter-spacing: -0.01em;
    }

    #onboarding-text {
      margin: 0 0 20px;
      font-size: 13px;
      line-height: 1.5;
      color: #d1d5db;
    }

    .onboarding-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .onb-btn-sec,
    .onb-btn-ghost {
      background: rgba(255, 255, 255, 0.05);
      color: #fff;
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      transition: 0.2s;
    }

    .onb-btn-ghost {
      background: transparent;
      color: #9ca3af;
      padding: 8px;
    }

    .onb-btn-ghost:hover {
      color: #fff;
    }

    .onb-btn-sec:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .onb-btn-pri {
      background: linear-gradient(135deg, #facc15, #eab308);
      color: #07090f;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: 0.2s;
    }

    .onb-btn-pri:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(250, 204, 21, 0.25);
    }

    #onboarding-cursor {
      position: absolute;
      width: 16px;
      height: 16px;
      background: radial-gradient(circle, #facc15 40%, rgba(250, 204, 21, 0) 80%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1000000;
      transition: all 0.4s ease;
      animation: onbPulse 2s infinite;
    }

    @keyframes onbPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4);
      }

      70% {
        box-shadow: 0 0 0 10px rgba(250, 204, 21, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
      }
    }


/* ══════════════════════════════════════════════════════════════════
   TEMA CLARO — PADRONIZAÇÃO VISUAL DE MÓDULOS
   Cobre: Motor de Conversão, Central de Objeções, Manual Pro,
          Agenda Inteligente, Motor IA, WhatsApp, Pipeline (gaps).
   Regras: somente cor/contraste. Layout/funcionalidade intactos.
   Tema escuro não alterado.
══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. MOTOR DE CONVERSÃO  (module-obj / mc-*)
   Fundo escuro + orbs coloridos → fundo claro, orbs discretos
──────────────────────────────────────────────────────────────── */

/* Fundo do módulo */
[data-theme="light"] #module-obj {
  background: #f8fafc;
  color: #0f172a;
}

/* Orbs animados — quase invisíveis no tema claro */
[data-theme="light"] .mc-orb-1 {
  background: rgba(37, 99, 235, .45);
  opacity: .04;
}
[data-theme="light"] .mc-orb-2 {
  background: rgba(245, 158, 11, .45);
  opacity: .04;
}
[data-theme="light"] .mc-orb-3 {
  background: rgba(16, 185, 129, .35);
  opacity: .03;
}

/* Grade de fundo */
[data-theme="light"] .mc-grid {
  background-image:
    linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px);
}

/* Header fixo */
[data-theme="light"] .mc-header {
  background: rgba(248, 250, 252, .96);
  border-bottom-color: rgba(15,23,42,.10);
  backdrop-filter: blur(24px);
}
[data-theme="light"] .mc-header::after {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.3), rgba(245,158,11,.25), transparent);
}

/* Brand */
[data-theme="light"] .mc-brand-name { color: #0f172a; }
[data-theme="light"] .mc-brand-sub  { color: #64748b; }
[data-theme="light"] .mc-brand-icon {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.28);
  color: #b45309;
}

/* Controles / selects */
[data-theme="light"] .mc-ctrl-lbl { color: #64748b; }
[data-theme="light"] .mc-select {
  background: #ffffff;
  border-color: rgba(15,23,42,.14);
  color: #0f172a;
}
[data-theme="light"] .mc-toggle-grp {
  background: #f1f5f9;
  border-color: rgba(15,23,42,.10);
}
[data-theme="light"] .mc-toggle {
  color: #64748b;
}
[data-theme="light"] .mc-toggle.active {
  background: #2563eb;
  color: #ffffff;
}

/* Nav de abas */
[data-theme="light"] .mc-nav {
  background: rgba(248,250,252,.94);
  border-bottom-color: rgba(15,23,42,.08);
}
[data-theme="light"] .mc-tab-btn {
  color: #64748b;
}
[data-theme="light"] .mc-tab-btn:hover {
  color: #0f172a;
  background: rgba(15,23,42,.04);
}
[data-theme="light"] .mc-tab-btn.active {
  background: rgba(37,99,235,.10);
  color: #2563eb;
  border-color: rgba(37,99,235,.22);
  box-shadow: none;
}

/* Glass cards genéricos */
[data-theme="light"] .mc-glass {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 4px 24px rgba(15,23,42,.07);
}
[data-theme="light"] .mc-glass:hover {
  border-color: rgba(15,23,42,.18);
}

/* Search head */
[data-theme="light"] .mc-search-icon-box {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.22);
  color: #2563eb;
}
[data-theme="light"] .mc-search-title { color: #0f172a; }
[data-theme="light"] .mc-search-sub   { color: #64748b; }

/* Blocos de conteúdo — desaturar para tema claro */
[data-theme="light"] .mc-block {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
}
[data-theme="light"] .mc-block-lbl   { color: #475569; }
[data-theme="light"] .mc-block-text  { color: #334155; }

/* Bloco diagnóstico (amber) */
[data-theme="light"] .mc-block-diag {
  background: rgba(245,158,11,.06);
  border-color: rgba(245,158,11,.20);
}
[data-theme="light"] .mc-block-diag .mc-block-lbl { color: #b45309; }
[data-theme="light"] .mc-block-diag .mc-block-text { color: #334155; }

/* Bloco script (violet) */
[data-theme="light"] .mc-block-script {
  background: rgba(124,58,237,.06);
  border-color: rgba(124,58,237,.16);
}
[data-theme="light"] .mc-block-script .mc-block-lbl { color: #7c3aed; }
[data-theme="light"] .mc-block-script .mc-block-text { color: #334155; }

/* Bloco objeção (red) */
[data-theme="light"] .mc-block-obj {
  background: rgba(220,38,38,.05);
  border-color: rgba(220,38,38,.16);
}
[data-theme="light"] .mc-block-obj .mc-block-lbl { color: #dc2626; }
[data-theme="light"] .mc-block-obj .mc-block-text { color: #334155; }

/* Bloco gatilho (green) */
[data-theme="light"] .mc-block-gate {
  background: rgba(22,163,74,.05);
  border-color: rgba(22,163,74,.16);
}
[data-theme="light"] .mc-block-gate .mc-block-lbl { color: #16a34a; }
[data-theme="light"] .mc-block-gate .mc-block-text { color: #334155; }

/* Seção de treinamento / base */
[data-theme="light"] .mc-train-sec { color: #0f172a; }
[data-theme="light"] .mc-train-lbl { color: #64748b; }
[data-theme="light"] .mc-seg-title { color: #0f172a; }
[data-theme="light"] .mc-seg-sub   { color: #64748b; }


/* ────────────────────────────────────────────────────────────────
   2. CENTRAL DE OBJEÇÕES  (module-ocaf-obj / ocaf-*)
──────────────────────────────────────────────────────────────── */

[data-theme="light"] #module-ocaf-obj {
  background: #f8fafc;
  color: #0f172a;
}

/* Header fixo */
[data-theme="light"] .ocaf-hd {
  background: rgba(248,250,252,.97);
  border-bottom-color: rgba(15,23,42,.10);
}
[data-theme="light"] .ocaf-hd-title { color: #0f172a; }
[data-theme="light"] .ocaf-hd-back {
  background: #ffffff;
  border-color: rgba(15,23,42,.12);
  color: #475569;
}
[data-theme="light"] .ocaf-hd-back:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Hero */
[data-theme="light"] .ocaf-hero-title {
  background: linear-gradient(135deg, #d97706, #b45309);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .ocaf-hero-sub { color: #475569; }

/* Filtros */
[data-theme="light"] .ocaf-filter-chip {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  color: #475569;
}
[data-theme="light"] .ocaf-filter-chip:hover {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.28);
  color: #b45309;
}
[data-theme="light"] .ocaf-filter-chip.active {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.40);
  color: #b45309;
}

/* Cards */
[data-theme="light"] .ocaf-card {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
}
[data-theme="light"] .ocaf-card:hover {
  border-color: rgba(245,158,11,.28);
  background: #fffdf7;
  box-shadow: 0 8px 28px rgba(15,23,42,.10);
}
[data-theme="light"] .ocaf-cat-pill {
  background: rgba(245,158,11,.10);
  color: #b45309;
  border-color: rgba(245,158,11,.22);
}
[data-theme="light"] .ocaf-card-title { color: #0f172a; }
[data-theme="light"] .ocaf-block-label { color: #94a3b8; }
[data-theme="light"] .ocaf-block-text  { color: #334155; }
[data-theme="light"] .ocaf-block-text.resposta { color: #1e40af; }

/* Botão copiar */
[data-theme="light"] .ocaf-copy-btn {
  background: #f8fafc;
  border-color: rgba(15,23,42,.10);
  color: #475569;
}
[data-theme="light"] .ocaf-copy-btn:hover {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.28);
  color: #b45309;
}


/* ────────────────────────────────────────────────────────────────
   3. MANUAL PRO / PROSPECÇÃO  (module-prospeccao / pros-*)
──────────────────────────────────────────────────────────────── */

[data-theme="light"] #module-prospeccao {
  background: #f8fafc;
  color: #0f172a;
}
[data-theme="light"] .pros-pro-wrap {
  background:
    radial-gradient(circle at 15% 5%, rgba(37,99,235,.06), transparent 28%),
    radial-gradient(circle at 85% 0%,  rgba(245,158,11,.06), transparent 30%),
    #f8fafc;
  color: #0f172a;
}

/* Hero */
[data-theme="light"] .pros-pro-hero {
  background: #ffffff;
  border-color: rgba(15,23,42,.12);
  box-shadow: 0 24px 80px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="light"] .pros-pro-hero h1 { color: #0f172a; }
[data-theme="light"] .pros-pro-hero p  { color: #475569; }
[data-theme="light"] .pros-pro-badge {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.24);
  color: #2563eb;
}

/* Botões */
[data-theme="light"] .pros-pro-btn-secondary {
  background: #f1f5f9;
  color: #334155;
  border-color: rgba(15,23,42,.14);
}
[data-theme="light"] .pros-pro-btn-secondary:hover { background: #e2e8f0; }
[data-theme="light"] .pros-pro-btn-ghost {
  background: rgba(245,158,11,.10);
  color: #b45309;
  border-color: rgba(245,158,11,.26);
}

/* ── Step cards (Pré-call, Abertura, Conexão…) — tudo escuro no tema claro ── */
[data-theme="light"] .pros-pro-step-card {
  background: #ffffff;
  border-color: rgba(15,23,42,.12);
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
}
[data-theme="light"] .pros-pro-step-card:hover {
  border-color: rgba(245,158,11,.30);
  background: #fffdf7;
  box-shadow: 0 8px 28px rgba(15,23,42,.10);
}
[data-theme="light"] .pros-pro-card h3,
[data-theme="light"] .pros-pro-step-card h3 {
  color: #0f172a;
}
[data-theme="light"] .pros-pro-card p,
[data-theme="light"] .pros-pro-step-card p {
  color: #334155;
}
[data-theme="light"] .pros-pro-step-card p strong {
  color: #0f172a;
}
[data-theme="light"] .pros-pro-step-number {
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.26);
  color: #16a34a;
}
[data-theme="light"] .pros-pro-step-card blockquote {
  background: rgba(245,158,11,.08);
  border-left-color: #f59e0b;
  color: #334155;
}
[data-theme="light"] .pros-pro-steps-grid .pros-pro-btn-ghost {
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.28);
  color: #b45309;
  font-weight: 700;
}

/* Conteúdo geral */
[data-theme="light"] .pros-pro-section h2  { color: #0f172a; }
[data-theme="light"] .pros-pro-section h3  { color: #0f172a; }
[data-theme="light"] .pros-pro-section p   { color: #475569; }
[data-theme="light"] .pros-pro-card {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
  color: #0f172a;
}
[data-theme="light"] .pros-pro-card:hover {
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 8px 28px rgba(15,23,42,.10);
}
[data-theme="light"] .pros-pro-step-num {
  background: rgba(37,99,235,.10);
  color: #2563eb;
  border-color: rgba(37,99,235,.22);
}
[data-theme="light"] .pros-pro-tip {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.22);
  color: #334155;
}

/* Estatísticas do hero */
[data-theme="light"] .pros-pro-hero-right small { color: #64748b; }
[data-theme="light"] .pros-pro-stat-num  { color: #0f172a; }
[data-theme="light"] .pros-pro-stat-desc { color: #64748b; }


/* ────────────────────────────────────────────────────────────────
   4. AGENDA INTELIGENTE — gaps restantes  (agenda-*)
   (as sobreposições básicas já existem nas linhas 17595-17671)
──────────────────────────────────────────────────────────────── */

/* Cabeçalho hero — borda branca → cinza sutil */
[data-theme="light"] .agenda-header,
[data-theme="light"] .agenda-hero {
  border-bottom-color: rgba(15,23,42,.10);
}

/* Painel de visualização */
[data-theme="light"] .agenda-view-panel {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 4px 24px rgba(15,23,42,.06);
}

/* Estado vazio */
[data-theme="light"] .agenda-empty-state {
  background: #f8fafc;
  border-color: rgba(15,23,42,.10);
}
[data-theme="light"] .agenda-empty-icon {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.20);
}

/* Tabs */
[data-theme="light"] .agenda-tabs {
  background: #f1f5f9;
  border-color: rgba(15,23,42,.08);
}
[data-theme="light"] .agenda-tab {
  color: #64748b;
}
[data-theme="light"] .agenda-tab:hover { color: #0f172a; }
[data-theme="light"] .agenda-tab.active {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(15,23,42,.18);
}

/* Botões da agenda */
[data-theme="light"] .agenda-btn-dark {
  background: #f1f5f9;
  color: #334155;
  border-color: rgba(15,23,42,.12);
}
[data-theme="light"] .agenda-btn-dark:hover { background: #e2e8f0; }
[data-theme="light"] .agenda-btn-outline {
  background: rgba(37,99,235,.08);
  color: #2563eb;
  border-color: rgba(37,99,235,.28);
}
[data-theme="light"] .agenda-btn-outline:hover {
  background: rgba(37,99,235,.14);
}
[data-theme="light"] .agenda-btn-purple {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  color: #fff;
}

/* Info box */
[data-theme="light"] .agenda-info-box {
  background: rgba(37,99,235,.06);
  border-left-color: #2563eb;
}
[data-theme="light"] .agenda-info-box h4 { color: #2563eb; }
[data-theme="light"] .agenda-info-box p  { color: #475569; }

/* Formulário de label */
[data-theme="light"] .agenda-form-group label { color: #64748b; }
[data-theme="light"] .agenda-input {
  background: #ffffff;
  border-color: rgba(15,23,42,.14);
  color: #0f172a;
}
[data-theme="light"] .agenda-input::placeholder { color: #94a3b8; }
[data-theme="light"] .agenda-input:focus {
  border-color: rgba(37,99,235,.45);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

/* Modo grid (cards inline-styled que precisam override) */
[data-theme="light"] .agenda-mode-card {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.18) !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.07);
}
/* h4 e p têm color inline (#fff, rgba(255,255,255,…)) — forçar escuro */
[data-theme="light"] .agenda-mode-card h4 {
  color: #0f172a !important;
}
[data-theme="light"] .agenda-mode-card p {
  color: #475569 !important;
}
/* badge "Ativo agora" azul claro → azul mais visível no claro */
[data-theme="light"] #ag-local-badge {
  background: rgba(37,99,235,.10) !important;
  color: #2563eb !important;
}
/* badge "Requer configuração" */
[data-theme="light"] #ag-backend-badge {
  background: rgba(15,23,42,.06) !important;
  color: #64748b !important;
}

/* Backend config card */
[data-theme="light"] .agenda-backend-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(37,99,235,.06), transparent 32%),
    #ffffff;
  border-color: rgba(15,23,42,.12);
  box-shadow: 0 20px 70px rgba(15,23,42,.08);
}
[data-theme="light"] .agenda-backend-head h2   { color: #0f172a; }
[data-theme="light"] .agenda-backend-head p    { color: #475569; }
[data-theme="light"] .agenda-kicker             { color: #2563eb; }
[data-theme="light"] .agenda-backend-mode {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.20);
}
[data-theme="light"] .agenda-backend-mode span   { color: #64748b; }
[data-theme="light"] .agenda-backend-mode strong { color: #2563eb; }

[data-theme="light"] .agenda-backend-form label > span { color: #475569; }

[data-theme="light"] .agenda-backend-input-row input {
  background: #ffffff;
  border-color: rgba(15,23,42,.14);
  color: #0f172a;
}
[data-theme="light"] .agenda-backend-input-row input::placeholder { color: #94a3b8; }

/* Status boxes */
[data-theme="light"] .agenda-status-box {
  background: #f8fafc;
  border-color: rgba(15,23,42,.10);
}
[data-theme="light"] .agenda-status-box span { color: #64748b; }

/* Modal */
[data-theme="light"] .agenda-modal-footer {
  background: #f8fafc;
  border-top-color: rgba(15,23,42,.08);
}


/* ────────────────────────────────────────────────────────────────
   5. MOTOR IA  (module-admin / ai-*)
   Completa a cobertura parcial existente
──────────────────────────────────────────────────────────────── */

/* Container do card Motor IA */
[data-theme="light"] .ai-mot-guide {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 4px 24px rgba(15,23,42,.06);
}
[data-theme="light"] .ai-mot-guide-head    { border-bottom-color: rgba(15,23,42,.08); }
[data-theme="light"] .ai-mot-guide-icon {
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.24);
}
[data-theme="light"] .ai-mot-guide-title { color: #0f172a; }
[data-theme="light"] .ai-mot-guide-sub   { color: #64748b; }

/* Grid de itens */
[data-theme="light"] .ai-mot-guide-item {
  background: #f8fafc;
  border-color: rgba(15,23,42,.08);
}
[data-theme="light"] .ai-mot-guide-item:hover { border-color: rgba(245,158,11,.28); }
[data-theme="light"] .ai-mot-guide-item-name { color: #0f172a; }

/* Card do motor */
[data-theme="light"] .ai-mot-card {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 4px 24px rgba(15,23,42,.06);
}
[data-theme="light"] .ai-mot-card-title {
  color: #0f172a;
  border-bottom-color: rgba(15,23,42,.08);
}
[data-theme="light"] .ai-mot-card-title::before {
  background: linear-gradient(135deg, rgba(245,158,11,.15), transparent);
}

/* Badges de provider */
[data-theme="light"] .ai-prov-badge {
  background: rgba(15,23,42,.06);
  color: #475569;
  border-color: rgba(15,23,42,.12);
}
[data-theme="light"] .ai-prov-badge.free {
  background: rgba(22,163,74,.10);
  color: #16a34a;
  border-color: rgba(22,163,74,.22);
}
[data-theme="light"] .ai-prov-badge.paid {
  background: rgba(37,99,235,.10);
  color: #2563eb;
  border-color: rgba(37,99,235,.22);
}
[data-theme="light"] .ai-prov-badge.custom {
  background: rgba(245,158,11,.10);
  color: #b45309;
  border-color: rgba(245,158,11,.24);
}

/* Botão selecionado */
[data-theme="light"] .ai-prov-btn.selected {
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.40);
  box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}

/* Check icon */
[data-theme="light"] .ai-prov-check {
  background: rgba(245,158,11,.14);
  color: #b45309;
}
[data-theme="light"] .ai-prov-btn.selected .ai-prov-check {
  background: #f59e0b;
  color: #ffffff;
}

/* Banner de ativo */
[data-theme="light"] .ai-active-banner {
  background: rgba(22,163,74,.08);
  border-color: rgba(22,163,74,.22);
}
[data-theme="light"] .ai-active-dot  { background: #16a34a; }
[data-theme="light"] .ai-active-info { color: #0f172a; }
[data-theme="light"] .ai-active-value { color: #0f172a; font-weight: 700; }

/* Botões de ação */
[data-theme="light"] .ai-btn-save {
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #111827;
  border-color: rgba(245,158,11,.35);
}
[data-theme="light"] .ai-btn-test {
  background: #ffffff;
  color: #2563eb;
  border-color: rgba(37,99,235,.24);
}
[data-theme="light"] .ai-btn-test:hover { background: rgba(37,99,235,.06); }


/* ────────────────────────────────────────────────────────────────
   6. WHATSAPP HUB  (module-wa)
   O módulo usa inline styles quase totalmente.
   Sobrescreve container + subseção wa-autonomo (que usa classes).
──────────────────────────────────────────────────────────────── */

/* Container principal */
[data-theme="light"] #module-wa {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* Top bar (inline-styled) — override via filho direto */
[data-theme="light"] #module-wa > div:first-child {
  background: #ffffff !important;
  border-bottom-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.06) !important;
}
[data-theme="light"] #module-wa h2 { color: #0f172a !important; }

/* Tab switcher */
[data-theme="light"] #btn-wa-auto,
[data-theme="light"] #btn-wa-web,
[data-theme="light"] #btn-wa-oficial,
[data-theme="light"] #btn-wa-autonomo {
  color: #475569 !important;
}
[data-theme="light"] #btn-wa-auto {
  background: #2563eb !important;
  color: #ffffff !important;
}

/* Panes */
[data-theme="light"] #wa-pane-automacao,
[data-theme="light"] #wa-pane-web,
[data-theme="light"] #wa-pane-oficial,
[data-theme="light"] #wa-pane-autonomo {
  background: transparent !important;
}

/* Cards dentro dos panes (inline-styled) */
[data-theme="light"] #module-wa [style*="background:rgba(16,185,129,0.04)"],
[data-theme="light"] #module-wa [style*="background: rgba(16,185,129,0.04)"] {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.10) !important;
}

/* Tutorial / guia dentro do WA */
[data-theme="light"] #module-wa h3 { color: #0f172a !important; }
[data-theme="light"] #module-wa h4 { color: #334155 !important; }
[data-theme="light"] #module-wa p  { color: #475569 !important; }

/* wa-mod-hdr (WhatsApp Autônomo) — complemento */
[data-theme="light"] .wa-mod-hdr {
  background: #ffffff;
  border-bottom-color: rgba(15,23,42,.10);
  box-shadow: 0 4px 20px rgba(15,23,42,.06);
}
[data-theme="light"] .wa-mod-title { color: #0f172a; }
[data-theme="light"] .wa-mod-sub   { color: #64748b; }
[data-theme="light"] .wa-mod-acts  { border-top-color: rgba(15,23,42,.08); }


/* ────────────────────────────────────────────────────────────────
   7. PIPELINE  — gaps de contraste residuais
──────────────────────────────────────────────────────────────── */

/* Colunas do kanban */
[data-theme="light"] .pipe-col {
  background: #f1f5f9;
  border-color: rgba(15,23,42,.10);
}
[data-theme="light"] .pipe-col-hdr { border-bottom-color: rgba(15,23,42,.08); }

/* Health panel */
[data-theme="light"] #pipeline-health-panel {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
}

/* Inputs de busca / filtro */
[data-theme="light"] #pl-search,
[data-theme="light"] #pl-fq,
[data-theme="light"] #pl-fc {
  background: #ffffff;
  border-color: rgba(15,23,42,.12);
  color: #0f172a;
}
[data-theme="light"] #pl-search::placeholder,
[data-theme="light"] #pl-fq::placeholder  { color: #94a3b8; }


/* ────────────────────────────────────────────────────────────────
   8. DOCUMENTAÇÃO / MANUAL PAC  (doc-* / mod-*)
   Complementa a cobertura parcial existente
──────────────────────────────────────────────────────────────── */

/* Header do módulo */
[data-theme="light"] .mod-hdr {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 4px 24px rgba(15,23,42,.06);
}
[data-theme="light"] .mod-hdr-title { color: #0f172a; }
[data-theme="light"] .mod-hdr-sub   { color: #64748b; }
[data-theme="light"] .mod-hdr-icon {
  background: rgba(16,185,129,.10) !important;
}

/* KPI cards */
[data-theme="light"] .doc-kpi {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
}
[data-theme="light"] .doc-kpi:hover { border-color: rgba(245,158,11,.22); }
[data-theme="light"] .doc-kpi-num { color: #0f172a; }
[data-theme="light"] .doc-kpi-lbl { color: #64748b; }

/* Filtros */
[data-theme="light"] .doc-filters { background: transparent; }
[data-theme="light"] .doc-filter-pill {
  background: #ffffff;
  border-color: rgba(15,23,42,.10);
  color: #475569;
}
[data-theme="light"] .doc-filter-pill:hover {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme="light"] .doc-filter-pill.active {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.28);
  color: #2563eb;
}

/* Botões de ação */
[data-theme="light"] .doc-act-btn {
  background: #f1f5f9;
  border-color: rgba(15,23,42,.10);
  color: #475569;
}
[data-theme="light"] .doc-act-btn.primary {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.24);
  color: #2563eb;
}
[data-theme="light"] .doc-act-btn:hover { background: #e2e8f0; }
[data-theme="light"] .doc-act-btn.primary:hover { background: rgba(37,99,235,.16); }


/* ────────────────────────────────────────────────────────────────
   9. CORREÇÕES GLOBAIS — contraste final
   Previne texto branco herdado de módulos em fundos claros
──────────────────────────────────────────────────────────────── */

/* Qualquer h1/h2/h3/h4 que ainda esteja branco em módulo claro */
[data-theme="light"] #module-crm     h1, [data-theme="light"] #module-crm     h2,
[data-theme="light"] #module-crm     h3, [data-theme="light"] #module-crm     h4,
[data-theme="light"] #module-obj     h1, [data-theme="light"] #module-obj     h2,
[data-theme="light"] #module-obj     h3, [data-theme="light"] #module-obj     h4,
[data-theme="light"] #module-ocaf-obj h1, [data-theme="light"] #module-ocaf-obj h2,
[data-theme="light"] #module-ocaf-obj h3, [data-theme="light"] #module-ocaf-obj h4,
[data-theme="light"] #module-prospeccao h2, [data-theme="light"] #module-prospeccao h3,
[data-theme="light"] #module-agenda  h3, [data-theme="light"] #module-agenda  h4,
[data-theme="light"] #module-admin   h3, [data-theme="light"] #module-admin   h4,
[data-theme="light"] #module-documentacao h3, [data-theme="light"] #module-documentacao h4 {
  color: #0f172a;
}

/* Status / badges inline com cores muito fortes */
[data-theme="light"] .tag,
[data-theme="light"] .badge-pill {
  border: 1px solid currentColor;
  opacity: .85;
}

/* Textos muted que ficam brancos */
[data-theme="light"] .text-muted,
[data-theme="light"] .muted { color: #64748b; }

/* Fundos de cards que ainda usam glass escuro */
[data-theme="light"] [class*="-glass"],
[data-theme="light"] [class*="glass-"] {
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.10);
}

/* Inputs genéricos sem classe específica */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15,23,42,.14);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #94a3b8; }

/* Separadores */
[data-theme="light"] hr,
[data-theme="light"] [class*="-sep"],
[data-theme="light"] [class*="-divider"] {
  border-color: rgba(15,23,42,.08);
}

/* Skeleton no tema claro */
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
    rgba(15,23,42,.05) 25%,
    rgba(15,23,42,.09) 50%,
    rgba(15,23,42,.05) 75%);
  background-size: 200% 100%;
}

/* ── FIM — PADRONIZAÇÃO VISUAL TEMA CLARO ── */

/* ═══════════════════════════════════════════════════════════
   MINI CALENDÁRIO — AGENDA INTELIGENTE
═══════════════════════════════════════════════════════════ */
.agenda-mini-cal {
  margin: 0 0 16px 0;
  padding: 16px 20px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}

.agenda-mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.agenda-mini-cal-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.03em;
  text-transform: capitalize;
  flex: 1;
  text-align: center;
}

.agenda-mini-cal-nav {
  background: none;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.agenda-mini-cal-nav:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.90);
}

.agenda-mini-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}
.agenda-mini-cal-weekdays span {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 0;
}

.agenda-mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.agenda-mini-cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 4px 1px 3px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  gap: 2px;
}
.agenda-mini-cal-day:hover {
  background: rgba(255,255,255,0.07);
}
.agenda-mini-cal-day.empty {
  cursor: default;
  pointer-events: none;
}

.agenda-mini-cal-day-num {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  line-height: 1;
}

/* Today */
.agenda-mini-cal-day.today {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.30);
}
.agenda-mini-cal-day.today .agenda-mini-cal-day-num {
  color: #f59e0b;
  font-weight: 800;
}

/* Selected day */
.agenda-mini-cal-day.selected {
  background: #2563eb;
  border-color: rgba(37,99,235,0.80);
}
.agenda-mini-cal-day.selected .agenda-mini-cal-day-num {
  color: #ffffff;
  font-weight: 700;
}
.agenda-mini-cal-day.today.selected {
  background: #2563eb;
  border-color: #2563eb;
}

/* Event dot */
.agenda-mini-cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}
.agenda-mini-cal-day.selected .agenda-mini-cal-dot {
  background: rgba(255,255,255,0.85);
}
/* Spacer for days without events (keeps row height stable) */
.agenda-mini-cal-dot-none {
  width: 4px;
  height: 4px;
  flex-shrink: 0;
}

/* ── Mini-cal tema claro — contornos definidos ── */
[data-theme="light"] .agenda-mini-cal {
  background: #ffffff;
  border: 1.5px solid #1e293b;          /* borda escura e visível */
  box-shadow: 0 3px 16px rgba(15,23,42,0.10);
}

[data-theme="light"] .agenda-mini-cal-title {
  color: #0f172a;
  font-weight: 800;
}

[data-theme="light"] .agenda-mini-cal-nav {
  border: 1.5px solid #334155;          /* botões com borda escura */
  color: #0f172a;
}
[data-theme="light"] .agenda-mini-cal-nav:hover {
  background: #f1f5f9;
  border-color: #0f172a;
  color: #0f172a;
}

[data-theme="light"] .agenda-mini-cal-weekdays span {
  color: #475569;
  font-weight: 700;
}

[data-theme="light"] .agenda-mini-cal-day-num {
  color: #0f172a;
  font-weight: 600;
}

/* Cada célula de dia com borda sutil para delimitação */
[data-theme="light"] .agenda-mini-cal-day {
  border: 1px solid rgba(15,23,42,0.08);
}
[data-theme="light"] .agenda-mini-cal-day.empty {
  border-color: transparent;
}
[data-theme="light"] .agenda-mini-cal-day:hover {
  background: #f1f5f9;
  border-color: rgba(15,23,42,0.22);
}

[data-theme="light"] .agenda-mini-cal-day.today {
  background: rgba(245,158,11,0.12);
  border: 2px solid #b45309;            /* borda âmbar sólida para hoje */
}
[data-theme="light"] .agenda-mini-cal-day.today .agenda-mini-cal-day-num {
  color: #92400e;
  font-weight: 900;
}

[data-theme="light"] .agenda-mini-cal-day.selected {
  background: #1e293b;                  /* azul-escuro/slate para selecionado */
  border: 2px solid #0f172a;
}
[data-theme="light"] .agenda-mini-cal-day.selected .agenda-mini-cal-day-num {
  color: #ffffff;
  font-weight: 700;
}
[data-theme="light"] .agenda-mini-cal-day.today.selected {
  background: #1e40af;
  border-color: #1e3a8a;
}
[data-theme="light"] .agenda-mini-cal-day.selected .agenda-mini-cal-dot {
  background: rgba(255,255,255,0.90);
}

[data-theme="light"] .agenda-mini-cal-dot {
  background: #d97706;                  /* ponto âmbar mais saturado */
  width: 5px;
  height: 5px;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — TEMA CLARO
   O #sb é excluído dos seletores globais de módulo
   (via :not(#sb):not(#sb *)), então precisa de bloco próprio.
═══════════════════════════════════════════════════════════ */

/* ── Sidebar — TEMA CLARO ────────────────────────────────── */
/* Container */
[data-theme="light"] #sb {
  background: #ffffff !important;
  border-right: 1px solid rgba(15,23,42,0.12) !important;
  box-shadow: 3px 0 20px rgba(15,23,42,0.08) !important;
  color-scheme: light !important;
}

/* Logo / ícone da marca */
[data-theme="light"] .sb-logo {
  box-shadow: 0 4px 16px rgba(245,197,24,0.30);
}
[data-theme="light"] .sb-logo.active {
  box-shadow: 0 0 0 2px #0f172a, 0 6px 22px rgba(245,197,24,0.40);
}

/* Itens de navegação — ícones e labels mais fortes no claro */
[data-theme="light"] #sb .sb-item {
  color: rgba(15,23,42,0.72) !important;  /* era 0.45 — mais visível */
  background: transparent !important;
}
[data-theme="light"] #sb .sb-item .sb-icon {
  filter: none;                           /* garante emojis sem filtro */
  opacity: 1 !important;
}
[data-theme="light"] #sb .sb-item .sb-lbl {
  color: rgba(15,23,42,0.72) !important;
  font-weight: 800 !important;            /* label mais bold no claro */
}
[data-theme="light"] #sb .sb-item:hover {
  background: rgba(15,23,42,0.07) !important;
  color: #0f172a !important;
}
[data-theme="light"] #sb .sb-item:hover .sb-lbl {
  color: #0f172a !important;
}
[data-theme="light"] #sb .sb-item.active {
  background: rgba(245,197,24,0.16) !important;
  color: #92400e !important;
}
[data-theme="light"] #sb .sb-item.active .sb-lbl {
  color: #92400e !important;
  font-weight: 900 !important;
}

/* WhatsApp */
[data-theme="light"] #sb .sb-item.sb-wa {
  color: #15803d !important;              /* verde sólido — era 55% opacidade */
}
[data-theme="light"] #sb .sb-item.sb-wa .sb-lbl {
  color: #15803d !important;
}
[data-theme="light"] #sb .sb-item.sb-wa:hover {
  background: rgba(21,128,61,0.09) !important;
  color: #166534 !important;
}
[data-theme="light"] #sb .sb-item.sb-wa.active {
  background: rgba(21,128,61,0.14) !important;
  color: #166534 !important;
}

/* Admin button */
[data-theme="light"] #sb-admin-btn {
  color: rgba(15,23,42,0.72) !important;
}
[data-theme="light"] #sb-admin-btn:hover {
  background: rgba(15,23,42,0.07) !important;
  color: #0f172a !important;
}
[data-theme="light"] #sb-admin-btn.active {
  background: rgba(245,197,24,0.16) !important;
  color: #92400e !important;
}

/* Separador */
[data-theme="light"] #sb .sb-sep {
  background: rgba(15,23,42,0.09) !important;
}

/* User badge */
[data-theme="light"] #sb-user-badge {
  background: #f8fafc !important;
  border-top-color: rgba(15,23,42,0.09) !important;
}

/* Tooltip (aparece ao hover) — mantém escuro para legibilidade universal */
[data-theme="light"] .sb-tip {
  background: #1e293b !important;
  border-color: rgba(15,23,42,0.20) !important;
  color: #ffffff !important;
}
[data-theme="light"] .sb-tip::before {
  border-right-color: #1e293b !important;
}

/* Badge de notificação */
[data-theme="light"] #sb .sb-badge {
  background: #f59e0b !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD REFINADO — KPI CARDS PREMIUM
   Visual mais limpo, hierarquia clara, paleta reduzida
═══════════════════════════════════════════════════════════ */

/* KPI card limpo — acento colorido no topo, número em grafite */
.kpi.kpi-clean {
  position: relative;
  border-top: 3px solid var(--kpi-accent, #e2e8f0);
  border-left: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  overflow: visible;
}
.kpi.kpi-clean:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  border-top-color: var(--kpi-accent, #e2e8f0);
}

/* Label em caixa alta, pequena, cinza */
.kpi.kpi-clean .kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 8px;
}

/* Número principal: grande, grafite — não colorido */
.kpi.kpi-clean .kpi-val {
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
}

/* Subtítulo discreto */
.kpi.kpi-clean .kpi-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 0;
}

/* Funil de Vendas — barra única sem gradiente */
.funnel-bar-brand {
  height: 100%;
  border-radius: 6px;
  background: var(--acc, #f59e0b);
  opacity: .75;
  transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
}
.funnel-track {
  background: rgba(255,255,255,.06);
}
.funnel-num {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}
.funnel-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

/* Alert banner — mais suave, menos agressivo */
.alert-followup {
  background: rgba(239,68,68,.05) !important;
  border-color: rgba(239,68,68,.15) !important;
  color: #b91c1c !important;
  font-size: 13px;
  gap: 10px;
  align-items: center;
}
.alert-followup strong { color: #dc2626; }
.alert-followup u { color: #dc2626; font-weight: 600; text-decoration-thickness: 1px; }

.alert-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: alertPulse 2s ease-in-out infinite;
}
@keyframes alertPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}

/* Card-title mais refinado */
.card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 18px;
}
.card-title::before {
  background: var(--acc);
  border-radius: 2px;
}

/* ── Overrides tema claro para os novos KPIs ── */
[data-theme="light"] .kpi.kpi-clean {
  background: #ffffff;
  border-right-color: rgba(15,23,42,.08);
  border-bottom-color: rgba(15,23,42,.08);
  box-shadow: 0 1px 4px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04);
}
[data-theme="light"] .kpi.kpi-clean:hover {
  box-shadow: 0 4px 16px rgba(15,23,42,.10);
}
[data-theme="light"] .kpi.kpi-clean .kpi-val {
  color: #0f172a;
}
[data-theme="light"] .kpi.kpi-clean .kpi-label {
  color: #94a3b8;
}
[data-theme="light"] .kpi.kpi-clean .kpi-sub {
  color: #64748b;
}
[data-theme="light"] .funnel-track {
  background: rgba(15,23,42,.06);
}
[data-theme="light"] .funnel-bar-brand {
  opacity: .85;
}
[data-theme="light"] .funnel-num {
  color: #475569;
}
[data-theme="light"] .alert-followup {
  background: rgba(239,68,68,.04) !important;
  border-color: rgba(239,68,68,.14) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PIPELINE — VISUAL REFINEMENT (SaaS Premium)
   Substitui fundos coloridos por layout neutro com acento sutil
   ═══════════════════════════════════════════════════════════════ */

/* ── Base: novos helpers aplicados via JS ─────────────────── */
.pl-col-hd-clean {
  background: var(--col-bg, rgba(255,255,255,.03));
  border-top: 3px solid var(--col-accent, #64748b);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pl-col-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.pl-col-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pl-col-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  line-height: 1.4;
}
.col-guide-inner-clean {
  border-top: 2px solid var(--col-guide-accent, rgba(100,116,139,.25));
}

/* ── Light theme — column wrapper ─────────────────────────── */
[data-theme="light"] #kanban > div {
  background: #f1f5f9 !important;
  border: 1px solid rgba(15,23,42,.09) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

/* ── Light theme — column header ──────────────────────────── */
[data-theme="light"] .pl-col-hd-clean {
  background: #ffffff !important;
  border-top: 3px solid var(--col-accent, #94a3b8) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}
[data-theme="light"] .pl-col-name {
  color: #1e293b !important;
}

/* ── Light theme — guide card ─────────────────────────────── */
[data-theme="light"] .col-guide-inner-clean {
  background: #ffffff !important;
  border-top-color: rgba(15,23,42,.10) !important;
}
[data-theme="light"] .col-guide-desc {
  color: #475569 !important;
}
[data-theme="light"] .col-guide-step {
  color: #334155 !important;
}
[data-theme="light"] .col-guide-step-arrow {
  color: #94a3b8 !important;
}

/* ── Light theme — pl-cnt drop zone ──────────────────────── */
[data-theme="light"] .pl-cnt {
  background: transparent !important;
}
[data-theme="light"] .pl-cnt.drag-over {
  background: rgba(245,197,24,.07) !important;
}

/* ── Light theme — pl-col-val (total da etapa) ────────────── */
[data-theme="light"] .pl-col-val {
  background: rgba(15,23,42,.03) !important;
  border-color: rgba(15,23,42,.07) !important;
  color: #334155 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   REFACTOR UI PREMIUM — Fase 1: Dashboard KPI cards + Leads por Origem
   Bloco de override anexado (vence por ordem de fonte). Reversível:
   basta remover este bloco. Usa as variáveis de tema existentes.
═══════════════════════════════════════════════════════════════════ */

/* ── KPI cards premium ── */
.kpi.kpi-premium {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: var(--r-lg, 18px);
  box-shadow: var(--sh-sm, 0 1px 2px rgba(0,0,0,.05));
}
.kpi.kpi-premium:hover {
  box-shadow: var(--sh-lg, 0 10px 15px -3px rgba(0,0,0,.08));
  transform: translateY(-2px);
}
.kpi.kpi-premium .kpi-premium-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.kpi.kpi-premium .kpi-label { margin-bottom: 0; }
.kpi.kpi-premium .kpi-ico {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--kpi-accent, #64748b);
  background: rgba(100, 116, 139, .12);                                  /* fallback */
  background: color-mix(in srgb, var(--kpi-accent, #64748b) 13%, transparent);
}
.kpi.kpi-premium .kpi-val { font-size: 30px; }
.kpi.kpi-premium .kpi-premium-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.kpi.kpi-premium .kpi-sub { margin-top: 0; }
.kpi.kpi-premium .kpi-spark {
  width: 72px;
  height: 24px;
  flex-shrink: 0;
  overflow: visible;
}
.kpi.kpi-premium .kpi-spark-line {
  fill: none;
  stroke: var(--kpi-accent, #64748b);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.kpi.kpi-premium .kpi-spark-area { stroke: none; }
.kpi.kpi-premium .kpi-spark-base {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.kpi.kpi-premium .kpi-spark-dot {
  fill: var(--card);
  stroke: var(--kpi-accent, #64748b);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

/* ── Leads por Origem — donut + legenda ── */
.origem-chart-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.origem-donut { flex-shrink: 0; }
.origem-donut .donut-seg {
  transition: stroke-width .18s var(--ease, ease);
  stroke-linecap: butt;
}
.origem-donut-num {
  text-anchor: middle;
  font-size: 22px;
  font-weight: 800;
  fill: var(--text);
}
.origem-donut-lbl {
  text-anchor: middle;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  fill: var(--muted);
}
.origem-legend {
  flex: 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.origem-leg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.origem-leg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.origem-leg-name {
  color: var(--muted);
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.origem-leg-val { color: var(--text); font-weight: 700; }
.origem-leg-pct {
  color: var(--muted);
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}
@media (max-width: 560px) {
  .origem-chart-wrap { justify-content: center; }
}

/* ── Botão "Voltar para o Funil Visual" (data-action="back-to-visual-funnel") ── */
.fv-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--sh-sm, 0 1px 2px rgba(0, 0, 0, .05));
  cursor: pointer;
  transition: background .16s var(--ease, ease), border-color .16s, box-shadow .16s, transform .12s;
}
.fv-back-btn:hover {
  background: var(--surf);
  border-color: var(--acc);
  box-shadow: var(--sh-md, 0 4px 6px -1px rgba(0, 0, 0, .07));
}
.fv-back-btn:active { transform: translateY(1px); }
.fv-back-btn svg { flex-shrink: 0; color: var(--acc); }
/* ── fim Fase 1 ── */

/* ═══════════════════════════════════════════════════════════════════
   REFACTOR UI PREMIUM — Fase 2: Sidebar horizontal (desktop ≥ 992px)
   Override anexado (vence por ordem de fonte). Mobile (≤767px bottom-nav)
   e tablet (768–991px rail compacto) ficam INALTERADOS. Reversível.
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  #sb {
    width: 210px;
    align-items: stretch;
    padding: 10px 0 0;
  }
  /* conteúdo acompanha a nova largura da sidebar */
  body.sb-active #module-crm,
  body.sb-active #module-obj,
  body.sb-active #module-wa,
  body.sb-active #module-ocaf-obj,
  body.sb-active #module-prospeccao,
  body.sb-active #module-ajuda,
  body.sb-active #module-admin,
  body.sb-active #module-usage-analytics,
  body.sb-active #module-prioridades,
  body.sb-active #module-reativacao,
  body.sb-active #module-agenda,
  body.sb-active #module-documentacao,
  body.sb-active #module-comissao,
  body.sb-active #module-campanhas,
  body.sb-active #module-eficiencia,
  body.sb-active #module-lgpd,
  body.sb-active #module-lgpd-admin {
    margin-left: 210px;
  }
  /* logo/brand: ver bloco "Sidebar brand" abaixo */
  .sb-nav {
    align-items: stretch;
    gap: 3px;
    padding: 4px 9px 8px;
  }
  /* item = linha horizontal [ícone] Texto */
  .sb-item {
    width: 100%;
    height: 44px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 11px;
    padding: 0 13px;
    border-radius: 12px;
  }
  .sb-item:hover { transform: none; }
  .sb-icon {
    font-size: 18px;
    width: 22px;
    min-width: 22px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sb-lbl {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    flex: 1 1 auto;
    min-width: 0;
  }
  .sb-item .sb-tip { display: none; }            /* labels visíveis → tooltip dispensável */
  .sb-item.active::before { height: 24px; }
  .sb-sep { width: calc(100% - 24px); margin-left: 12px; }
  .sb-font-ctrl { justify-content: center; }
  #theme-toggle-btn.sb-item { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════
   REFACTOR UI PREMIUM — Fase 3: Topbar dropdowns (Configurações / Marketing)
   Override anexado. JS em app.js (tbToggleDropdown / tbDdAction). Reversível.
═══════════════════════════════════════════════════════════════════ */
.tb-dropdown { position: relative; display: inline-flex; flex-shrink: 0; }
.tb-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.tb-dd-btn:hover { background: var(--surf); border-color: var(--acc); }
.tb-dd-btn[aria-expanded="true"] { background: var(--surf); border-color: var(--acc); }
.tb-dd-btn .tb-dd-caret { opacity: .7; transition: transform .18s var(--ease, ease); }
.tb-dd-btn[aria-expanded="true"] .tb-dd-caret { transform: rotate(180deg); }
.tb-dd-menu {
  position: fixed;                 /* relocado p/ body via JS → escapa overflow/backdrop-filter do #header */
  top: 60px;                       /* fallback; JS reposiciona pelo retângulo do botão */
  right: 16px;
  min-width: 186px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--sh-lg, 0 10px 24px rgba(0, 0, 0, .18));
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 99999;                  /* acima de cards, alertas, FABs e header */
}
.tb-dd-menu.open { display: flex; animation: tbDdIn .14s var(--ease, ease); }
@keyframes tbDdIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tb-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .13s;
}
.tb-dd-item:hover { background: var(--surf); }
.tb-dd-item .tb-dd-ico { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.tb-dd-sep { height: 1px; background: var(--border); margin: 4px 8px; flex-shrink: 0; }
.tb-dd-item--section { font-weight: 600; color: var(--acc); }
@media (max-width: 767px) {
  .tb-dd-btn span { display: none; }             /* compacto no mobile: só ícone + seta */
  .tb-dd-btn { padding: 6px 8px; }
}
/* ── fim Fases 2 e 3 ── */

/* ═══════════════════════════════════════════════════════════════════
   REFACTOR UI PREMIUM — Ajustes finos Sidebar/Topbar
   (1) Oculta itens duplicados que foram para os dropdowns da Topbar.
       Os elementos/IDs/onclick permanecem no DOM (funções intactas).
   (2) Marca "IMOBPILOT BETA" no topo da sidebar.
   Reversível: remover este bloco (e a classe sb-moved no HTML).
═══════════════════════════════════════════════════════════════════ */
.sb-item.sb-moved { display: none !important; }

/* Marca — visível no desktop; compacto/mobile mostram só o squircle */
.sb-logo-mark { display: inline-flex; align-items: center; justify-content: center; }
.sb-brand { display: none; }
@media (min-width: 992px) {
  #sb > .sb-logo {
    width: auto;
    height: auto;
    margin: 2px 0 14px 14px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  #sb > .sb-logo .sb-logo-mark {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    background: #f5c518;
    box-shadow: 0 2px 8px rgba(245, 197, 24, .22);
  }
  .sb-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .4px;
    color: var(--text);
    line-height: 1;
    white-space: nowrap;
  }
  .sb-brand-badge {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .6px;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--acc);
    color: #07090f;
  }
}
/* ── fim ajustes finos ── */

/* ═══════════════════════════════════════════════════════════════════
   REFACTOR UI PREMIUM — Fase 5: Cards do Pipeline
   Compacto por padrão + toggle expandir/recolher + ações diretas.
   Override anexado (vence por ordem). Reversível: remover este bloco.
═══════════════════════════════════════════════════════════════════ */
.pl-card-top-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
/* Toggle expandir/recolher */
.pl-card-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.pl-card-toggle:hover { background: var(--surf); color: var(--text); }
.pl-card-toggle svg { transition: transform .2s var(--ease, ease); }
.pl-card.pl-expanded .pl-card-toggle svg { transform: rotate(180deg); }

/* Detalhes — ocultos por padrão (modo compacto) */
.pl-card-details {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.pl-card.pl-expanded .pl-card-details {
  display: block;
  animation: plDetIn .16s var(--ease, ease);
}
@keyframes plDetIn { from { opacity: 0; } to { opacity: 1; } }

/* (UX) Card compacto ↔ expandido — corpo completo oculto por padrão */
.pl-card-expand { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.pl-card.pl-card-open .pl-card-expand { display: block; animation: plExpandIn .18s var(--ease, ease); }
.pl-card.pl-card-open .pl-card-toggle svg { transform: rotate(180deg); }
@keyframes plExpandIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* (Fase 1+2) Agentes: render estruturado (agentRenderStructured) + histórico agent_runs */
.ag-structured { display:flex; flex-direction:column; gap:8px; }
.ag-rc { border:1px solid var(--border); border-radius:10px; padding:9px 11px; background:var(--surf, rgba(255,255,255,.02)); }
.ag-rc-h { font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.ag-rc-b { font-size:12.5px; line-height:1.55; color:var(--text); }
.ag-rc-b ul { margin:2px 0 0; padding-left:16px; } .ag-rc-b li { margin:2px 0; }
.ag-rc.ag-ins { border-color:#1fb37a55; } .ag-rc.ag-msg .ag-suggmsg { white-space:pre-wrap; }
.ag-rc.ag-prep { border-color:#818cf855; background:rgba(129,140,248,.08); }
.ag-meta { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.ag-acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.ag-btn { border:1px solid var(--border); background:var(--surf); color:var(--text); font:600 11.5px/1 inherit; padding:7px 11px; border-radius:8px; cursor:pointer; }
.ag-btn-primary { background:#1fb37a; border-color:#1fb37a; color:#fff; }
.ag-runs-ov { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:16px; }
.ag-runs-panel { background:var(--card, #15171c); border:1px solid var(--border); border-radius:14px; width:min(560px,96vw); max-height:82vh; overflow:auto; box-shadow:0 16px 48px rgba(0,0,0,.4); }
.ag-runs-h { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:inherit; }
.ag-runs-x { background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; }
.ag-runs-body { padding:12px 16px; display:flex; flex-direction:column; gap:10px; font-size:12.5px; }
.ag-run { border:1px solid var(--border); border-radius:10px; padding:9px 11px; }
.ag-run-h { font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.ag-run-s { color:var(--text); line-height:1.5; }
.ag-run-m, .ag-run-a { margin-top:5px; color:var(--text); line-height:1.5; }
/* (Fase 4) status de aceitação no histórico */
.ag-run-fb { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:1px 6px; border-radius:6px; }
.ag-fb-used { background:rgba(31,179,122,.18); color:#1fb37a; }
.ag-fb-copied { background:rgba(129,140,248,.18); color:#a5b4fc; }
.ag-fb-reformulated { background:rgba(251,191,36,.18); color:#fbbf24; }
.ag-fb-none { background:var(--surf); color:var(--muted); }

/* (Fase 3) Memória do atendimento no card */
.pl-mem { margin-bottom:8px; }
.pl-mem-box { margin-top:8px; padding:9px 10px; border:1px solid rgba(129,140,248,.22); border-radius:10px; background:linear-gradient(135deg,rgba(129,140,248,.08),rgba(129,140,248,.025)); }
.pl-mem-empty { font-size:11px; color:var(--muted); padding:6px 9px; border:1px dashed rgba(129,140,248,.28); border-radius:9px; background:rgba(255,255,255,.02); }
.pl-mem-h { font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#a5b4fc; margin-bottom:5px; }
.pl-mem-s { font-size:12px; line-height:1.5; color:var(--text); background:rgba(129,140,248,.07); border:1px solid rgba(129,140,248,.22); border-radius:9px; padding:8px 10px; }
.pl-mem-grid { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.pl-mem-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:5px 8px; border:1px solid rgba(129,140,248,.22); border-radius:999px; background:rgba(129,140,248,.08); color:var(--text); font-size:10.8px; line-height:1.35; }
.pl-mem-chip b { color:#a5b4fc; font-weight:800; }
.pl-mem-facts { margin:6px 0 0; padding-left:16px; font-size:11.5px; color:var(--text); }
.pl-mem-facts li { margin:2px 0; }
/* (Fase 5) edição humana de fatos: aviso + ✎ inline + input/botões */
.pl-mem-disc { font-size:10px; color:var(--muted); margin:1px 0 6px; font-style:italic; }
.pl-mem-facts li .pl-mem-edit { background:none; border:none; cursor:pointer; color:var(--muted); font-size:11px; padding:0 4px; margin-left:4px; line-height:1; opacity:.55; transition:opacity .15s,color .15s; }
.pl-mem-facts li:hover .pl-mem-edit { opacity:1; }
.pl-mem-facts li .pl-mem-edit:hover { color:#a5b4fc; }
.pl-mem-fi { font-size:11.5px; padding:2px 6px; border:1px solid rgba(129,140,248,.4); border-radius:6px; background:var(--card2); color:var(--text); width:auto; min-width:120px; max-width:60%; }
.pl-mem-eb { font-size:10.5px; padding:2px 7px; margin-left:4px; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--text); cursor:pointer; }
.pl-mem-eb.pl-mem-save { border-color:rgba(129,140,248,.5); color:#a5b4fc; }
.pl-mem-eb.pl-mem-del { border-color:rgba(248,113,113,.45); color:#f87171; }
.pl-mem-eb:hover { filter:brightness(1.15); }

/* ── (Fase 6) 🔔 Lembretes Inteligentes do Agente — PREMIUM ── */
#smart-reminders-area { margin:20px 0 8px; }
#smart-reminders-area:empty { display:none; }
/* painel-mãe com moldura gradiente sutil */
.sr-panel { position:relative; border-radius:18px; padding:18px 18px 16px; background:
  linear-gradient(180deg, rgba(129,140,248,.07), rgba(129,140,248,0) 60%), var(--card);
  border:1px solid rgba(129,140,248,.22); box-shadow:0 10px 30px rgba(15,23,42,.18); overflow:hidden; }
.sr-panel::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,#ef4444,#f59e0b,#818cf8,#6366f1); opacity:.9; }
.sr-panel-head { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.sr-ph-icon { width:42px; height:42px; flex-shrink:0; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:21px; background:linear-gradient(135deg,#818cf8,#6366f1); box-shadow:0 6px 18px rgba(99,102,241,.4); }
.sr-ph-txt { flex:1; min-width:0; }
.sr-ph-title { font-size:16px; font-weight:800; color:var(--text); letter-spacing:.2px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sr-ph-pro { font-size:9px; font-weight:800; letter-spacing:.6px; padding:2px 8px; border-radius:999px; color:#fff; background:linear-gradient(135deg,#818cf8,#6366f1); }
.sr-ph-sub { font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4; }
.sr-ph-count { flex-shrink:0; min-width:34px; height:34px; padding:0 10px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; color:#a5b4fc; background:rgba(129,140,248,.14); border:1px solid rgba(129,140,248,.3); }
/* estados */
.sr-empty { text-align:center; padding:30px 16px; }
.sr-empty-ico { font-size:34px; }
.sr-empty-t { font-size:14px; font-weight:700; color:var(--text); margin-top:8px; }
.sr-empty-s { font-size:12px; color:var(--muted); margin-top:3px; }
.sr-loading { font-size:13px; color:var(--muted); padding:22px 4px; display:flex; align-items:center; gap:10px; }
.sr-spin { width:15px; height:15px; border-radius:50%; border:2px solid rgba(129,140,248,.3); border-top-color:#818cf8; display:inline-block; animation:srSpin .7s linear infinite; }
@keyframes srSpin { to { transform:rotate(360deg); } }
.sr-lock { text-align:center; max-width:520px; margin:6px auto; padding:18px; }
.sr-lock-ico { width:54px; height:54px; margin:0 auto 12px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; background:rgba(129,140,248,.14); }
.sr-lock-h { font-size:15px; font-weight:800; color:#a5b4fc; margin:0 0 7px; }
.sr-lock-t { font-size:12.5px; color:var(--muted); line-height:1.6; margin:0 auto 14px; max-width:430px; }
/* grid de cards */
.sr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.sr-card { position:relative; border:1px solid var(--border); border-radius:15px; padding:15px 16px 14px; background:var(--card); display:flex; flex-direction:column; gap:7px; overflow:hidden; transition:transform .16s, box-shadow .16s, border-color .16s; }
.sr-card:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(15,23,42,.22); border-color:rgba(129,140,248,.4); }
.sr-ribbon { position:absolute; left:0; top:0; bottom:0; width:4px; }
.sr-card.sr-hi .sr-ribbon { background:linear-gradient(180deg,#ef4444,#b91c1c); }
.sr-card.sr-md .sr-ribbon { background:linear-gradient(180deg,#f59e0b,#d97706); }
.sr-card.sr-lo .sr-ribbon { background:linear-gradient(180deg,#64748b,#475569); }
.sr-card-top { display:flex; align-items:center; gap:8px; }
.sr-type-ico { font-size:16px; }
.sr-type { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; flex:1; min-width:0; }
.sr-prio { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:3px 9px; border-radius:999px; color:#fff; flex-shrink:0; }
.sr-hi .sr-prio { background:#ef4444; }
.sr-md .sr-prio { background:#f59e0b; }
.sr-lo .sr-prio { background:#64748b; }
.sr-name { font-size:15.5px; font-weight:800; color:var(--text); }
.sr-stage { margin:-1px 0 1px; }
.sr-stage-chip { font-size:10.5px; font-weight:600; color:var(--muted); background:rgba(127,127,127,.12); border:1px solid var(--border); padding:2px 9px; border-radius:999px; }
.sr-reason { font-size:12.5px; color:var(--text); line-height:1.5; opacity:.92; }
.sr-action { font-size:12px; color:#818cf8; font-weight:600; line-height:1.45; display:flex; gap:6px; background:rgba(129,140,248,.08); border-radius:9px; padding:7px 9px; }
.sr-action-ico { flex-shrink:0; }
.sr-msg { margin:2px 0; }
.sr-msg:empty { display:none; }
.sr-msg-load, .sr-msg-err { font-size:11.5px; padding:6px 0; }
.sr-msg-load { color:var(--muted); }
.sr-msg-err { color:#f87171; }
.sr-msg-out { background:rgba(129,140,248,.07); border:1px solid rgba(129,140,248,.2); border-radius:9px; padding:8px 10px; }
.sr-btns { display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; }
.sr-btn { font-size:11.5px; font-weight:600; padding:7px 12px; border-radius:9px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; font-family:inherit; transition:filter .15s, border-color .15s, transform .1s; }
.sr-btn:hover { filter:brightness(1.08); border-color:#818cf8; }
.sr-btn:active { transform:scale(.97); }
.sr-btn-primary { background:linear-gradient(135deg,#818cf8,#6366f1); border:none; color:#fff; box-shadow:0 4px 12px rgba(99,102,241,.3); }
.sr-btn-ghost { color:var(--muted); border-style:dashed; }
.ag-pro-section { margin-top:18px; padding-top:16px; border-top:1px solid rgba(129,140,248,.18); }
.ag-pro-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ag-pro-title { font-size:15px; font-weight:900; color:var(--text); letter-spacing:.15px; }
.ag-pro-sub { font-size:12px; color:var(--muted); line-height:1.45; margin-top:2px; }
.ag-pro-count { min-width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:14px; font-weight:900; color:#c4b5fd; background:rgba(129,140,248,.12); border:1px solid rgba(129,140,248,.26); }
.ag-pro-card { background:linear-gradient(180deg,rgba(129,140,248,.055),rgba(129,140,248,.015)),var(--card); }
.ag-pro-card .sr-type { color:#a5b4fc; }
.ag-pac-summary { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.ag-pac-summary span { font-size:11.5px; color:var(--muted); border:1px solid var(--border); background:rgba(127,127,127,.07); border-radius:999px; padding:5px 10px; }
.ag-pac-summary b { color:var(--text); }
.ag-pac-group { margin-top:14px; }
.ag-pac-group-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.ag-pac-group-title { font-size:13px; font-weight:900; color:var(--text); }
.ag-pac-group-sub { font-size:11.5px; color:var(--muted); line-height:1.45; margin-top:2px; }
.ag-pac-group-count { min-width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:9px; font-size:12px; font-weight:900; color:var(--text); background:rgba(127,127,127,.08); border:1px solid var(--border); }
.ag-pac-meta { display:flex; flex-wrap:wrap; gap:6px; margin:1px 0 2px; }
.ag-pac-meta span { font-size:10.5px; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:3px 7px; background:rgba(127,127,127,.06); }
.ag-pac-empty { font-size:12px; color:var(--muted); border:1px dashed var(--border); border-radius:12px; padding:12px 14px; background:rgba(127,127,127,.04); }
.ag-pac-empty-main { margin-top:10px; text-align:center; }
.ag-pac-status-ignored { opacity:.78; }
.ag-pac-status-reviewed { border-color:rgba(34,197,94,.28); }
.ag-safe-ov { position:fixed; inset:0; z-index:9998; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(15,23,42,.62); backdrop-filter:blur(10px); }
.ag-safe-ov[hidden] { display:none; }
.ag-safe-modal { width:min(720px,calc(100vw - 28px)); max-height:calc(100vh - 36px); overflow:auto; border:1px solid rgba(129,140,248,.28); border-radius:16px; background:linear-gradient(180deg,rgba(129,140,248,.08),rgba(15,23,42,.02)),var(--card); box-shadow:0 24px 80px rgba(0,0,0,.38); padding:18px; }
.ag-safe-small { width:min(520px,calc(100vw - 28px)); }
.ag-safe-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.ag-safe-kicker { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.35px; color:#a5b4fc; }
.ag-safe-head h3 { margin:2px 0 0; font-size:18px; line-height:1.2; color:var(--text); }
.ag-safe-x { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--border); background:rgba(127,127,127,.08); color:var(--muted); cursor:pointer; font:700 15px/1 inherit; }
.ag-safe-x:hover { color:var(--text); border-color:rgba(129,140,248,.45); }
.ag-safe-copy { margin:0 0 12px; color:var(--muted); font-size:12.5px; line-height:1.55; }
.ag-safe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ag-safe-card { min-width:0; border:1px solid var(--border); border-radius:12px; background:rgba(127,127,127,.055); padding:11px 12px; }
.ag-safe-card > span, .ag-safe-row span { display:block; margin-bottom:4px; font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.28px; color:var(--muted); }
.ag-safe-card > b, .ag-safe-row b { display:block; color:var(--text); font-size:12.5px; line-height:1.45; word-break:break-word; }
.ag-safe-wide { grid-column:1 / -1; }
.ag-safe-row { padding:8px 0; border-top:1px solid rgba(127,127,127,.14); }
.ag-safe-row:first-of-type { border-top:0; padding-top:2px; }
.ag-safe-card ul { margin:7px 0 0; padding-left:18px; color:var(--muted); font-size:12px; line-height:1.6; }
.ag-safe-footnote { margin:12px 2px 0; color:var(--muted); font-size:12.5px; line-height:1.55; }
.ag-safe-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:14px; }
[data-theme="light"] .ag-safe-ov { background:rgba(15,23,42,.42); }
[data-theme="light"] .ag-safe-modal { background:linear-gradient(180deg,rgba(99,102,241,.08),rgba(255,255,255,.96)),#fff; box-shadow:0 24px 70px rgba(15,23,42,.22); }
@media (max-width:720px){ .ag-safe-grid { grid-template-columns:1fr; } .ag-safe-modal { padding:15px; } .ag-safe-actions { justify-content:stretch; } .ag-safe-actions .sr-btn { flex:1 1 auto; } }
@media (max-width:560px){ .sr-grid { grid-template-columns:1fr; } .sr-panel { padding:14px; } }

/* ── (Fix persistência) Banner de migração local → nuvem (admin/dono) ── */
.crm-migrate-banner { position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:9999; display:flex; align-items:center; gap:14px; max-width:760px; width:calc(100% - 32px); padding:12px 16px; border-radius:14px; background:linear-gradient(135deg,#1e2740,#141923); border:1px solid rgba(129,140,248,.4); box-shadow:0 12px 40px rgba(0,0,0,.45); color:#eef2ff; font-size:13px; }
.crm-migrate-banner b { color:#a5b4fc; }
.crm-migrate-banner span { flex:1; line-height:1.45; }
.crm-migrate-banner button { font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:9px; border:none; background:linear-gradient(135deg,#818cf8,#6366f1); color:#fff; cursor:pointer; white-space:nowrap; font-family:inherit; }
.crm-migrate-banner .crm-migrate-x { background:transparent; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6); padding:6px 10px; }
.crm-migrate-banner button:hover { filter:brightness(1.08); }

/* ── (Fix P1) Área própria "Histórico IA" no card (separada dos Agentes especiais) ── */
.pl-hist-area { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); }
.pl-hist-lbl { font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); }
.ag-runs-empty { font-size:13px; color:var(--muted); padding:14px 4px; }

/* ── (Fase 6) Banners de Modo Demonstração (Eficiência + Lembretes) ── */
.eff-demo-banner, .sr-demo-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-radius:12px; background:linear-gradient(135deg,rgba(129,140,248,.14),rgba(99,102,241,.06)); border:1px solid rgba(129,140,248,.3); font-size:12.5px; color:var(--text); }
.eff-demo-banner b, .sr-demo-banner b { color:#818cf8; font-weight:800; letter-spacing:.2px; }
.eff-demo-sub { font-size:11.5px; color:var(--muted); }
.sr-demo-banner { margin-bottom:12px; }
.eff-demo-dot { width:9px; height:9px; border-radius:50%; background:#818cf8; box-shadow:0 0 0 0 rgba(129,140,248,.6); animation:effPulse 1.8s infinite; }
@keyframes effPulse { 0%{box-shadow:0 0 0 0 rgba(129,140,248,.5);} 70%{box-shadow:0 0 0 8px rgba(129,140,248,0);} 100%{box-shadow:0 0 0 0 rgba(129,140,248,0);} }
.eff-fbtn:disabled { opacity:.55; cursor:default; }
/* Switch "Modo demonstração" no header da Eficiência IA */
.eff-demo-switch { min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 3px; cursor:pointer; user-select:none; }
.eff-demo-switch input { position:absolute; opacity:0; width:0; height:0; }
.eff-demo-switch-ui { width:38px; height:21px; border-radius:999px; background:var(--border); position:relative; transition:background .2s; flex-shrink:0; }
.eff-demo-switch-ui::after { content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.eff-demo-switch input:checked + .eff-demo-switch-ui { background:linear-gradient(135deg,#818cf8,#6366f1); }
.eff-demo-switch input:checked + .eff-demo-switch-ui::after { transform:translateX(17px); }
.eff-demo-switch-lbl { font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }
.eff-demo-switch input:checked ~ .eff-demo-switch-lbl { color:#818cf8; }
.eff-demo-switch input:focus-visible + .eff-demo-switch-ui { outline:3px solid rgba(124,140,255,.36); outline-offset:3px; }

/* ── (Fase 6) 📊 Painel Eficiência IA ── */
.efficiency-area { display:flex; flex-direction:column; gap:16px; }
.eff-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:46px 20px; color:var(--muted); font-size:13px; text-align:center; border:1px dashed var(--border); border-radius:14px; }
.eff-empty-ico { font-size:34px; opacity:.7; }
.eff-filters { display:flex; gap:8px; }
.eff-fbtn { font-size:12px; font-weight:600; padding:6px 14px; border-radius:9px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; font-family:inherit; }
.eff-fbtn.active { background:linear-gradient(135deg,#818cf8,#6366f1); border-color:transparent; color:#fff; }
.eff-fbtn:hover:not(.active) { border-color:#818cf8; }
.eff-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.eff-metric-card { border:1px solid var(--border); border-radius:14px; padding:15px 16px; background:var(--card); display:flex; flex-direction:column; gap:3px; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:transform .15s, box-shadow .15s; }
.eff-metric-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(99,102,241,.12); }
.eff-mc-ico { font-size:18px; }
.eff-mc-val { font-size:26px; font-weight:800; color:var(--text); line-height:1.1; }
.eff-mc-lbl { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.eff-mc-green { border-left:3px solid #16a34a; }
.eff-mc-green .eff-mc-val { color:#16a34a; }
.eff-mc-indigo { border-left:3px solid #6366f1; }
.eff-mc-indigo .eff-mc-val { color:#6366f1; }
.eff-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:880px){ .eff-cols { grid-template-columns:1fr; } }
.eff-block { border:1px solid var(--border); border-radius:14px; padding:15px 16px; background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.04); }
.eff-block-h { font-size:13px; font-weight:800; color:var(--text); margin-bottom:12px; }
.eff-agent-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.eff-agent-table th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--border); }
.eff-agent-table td { padding:8px; border-bottom:1px solid var(--border); color:var(--text); }
.eff-agent-table tr:last-child td { border-bottom:none; }
.eff-rate { font-weight:700; color:#6366f1; }
.eff-trend { display:flex; align-items:flex-end; gap:4px; height:140px; padding-top:6px; }
.eff-trend-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px; min-width:0; }
.eff-trend-bar { width:70%; max-width:22px; min-height:2px; background:linear-gradient(180deg,#818cf8,#6366f1); border-radius:4px 4px 0 0; transition:height .25s; }
.eff-trend-col:hover .eff-trend-bar { filter:brightness(1.15); }
.eff-trend-x { font-size:8.5px; color:var(--muted); white-space:nowrap; transform:rotate(-45deg); transform-origin:center; height:14px; overflow:visible; }
.eff-top-leads .eff-lead-row { display:flex; align-items:center; gap:10px; padding:9px 6px; border-bottom:1px solid var(--border); font-size:12.5px; }
.eff-top-leads .eff-lead-row:last-child { border-bottom:none; }
.eff-top-leads .eff-lead-row:hover { background:rgba(129,140,248,.06); }
.eff-lead-name { font-weight:600; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eff-lead-stage { font-size:11px; color:var(--muted); }
.eff-lead-runs { font-size:11px; font-weight:700; color:#6366f1; background:rgba(129,140,248,.12); padding:2px 9px; border-radius:999px; }
/* barra de uso por agente (visualiza o "trabalho de cada agente") */
.eff-agent-row td { vertical-align:middle; }
.eff-usebar { height:6px; border-radius:999px; background:rgba(129,140,248,.15); overflow:hidden; margin-top:5px; }
.eff-usebar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#818cf8,#6366f1); }
.eff-agent-name { display:flex; align-items:center; gap:8px; font-weight:600; }
.eff-agent-dot { width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#818cf8,#6366f1); flex-shrink:0; }
/* acento gradiente no topo dos metric cards premium */
.eff-metric-card { position:relative; overflow:hidden; }
.eff-metric-card::after { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#818cf8,#6366f1); opacity:.85; }
.eff-mc-green::after { background:linear-gradient(90deg,#16a34a,#15803d); }
.eff-mc-indigo::after { background:linear-gradient(90deg,#6366f1,#4f46e5); }
.eff-mc-ico { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(129,140,248,.14); margin-bottom:4px; }

/* ════ (Fix) TEMA CLARO — overrides explícitos (a cascata de --card legada quebrava nesta área) ════ */
body[data-theme="light"] .sr-panel { background:linear-gradient(180deg,rgba(99,102,241,.05),rgba(99,102,241,0) 60%),#ffffff; border-color:#e2e8f0; box-shadow:0 10px 30px rgba(15,23,42,.08); }
body[data-theme="light"] .sr-card,
body[data-theme="light"] .eff-metric-card,
body[data-theme="light"] .eff-block { background:#ffffff; border-color:#e2e8f0; }
body[data-theme="light"] .eff-empty,
body[data-theme="light"] .sr-empty { border-color:#e2e8f0; }
body[data-theme="light"] .sr-ph-title,
body[data-theme="light"] .sr-name,
body[data-theme="light"] .eff-mc-val,
body[data-theme="light"] .eff-block-h,
body[data-theme="light"] .sr-empty-t,
body[data-theme="light"] .eff-agent-table td,
body[data-theme="light"] .eff-lead-name { color:#0f172a; }
body[data-theme="light"] .sr-ph-sub,
body[data-theme="light"] .sr-reason,
body[data-theme="light"] .sr-stage-chip,
body[data-theme="light"] .eff-mc-lbl,
body[data-theme="light"] .sr-empty-s,
body[data-theme="light"] .eff-lead-stage,
body[data-theme="light"] .eff-trend-x,
body[data-theme="light"] .sr-type { color:#475569; }
body[data-theme="light"] .eff-agent-table th { color:#64748b; border-color:#e2e8f0; }
body[data-theme="light"] .eff-agent-table td,
body[data-theme="light"] .eff-top-leads .eff-lead-row { border-color:#eef2f6; }
body[data-theme="light"] .eff-mc-green .eff-mc-val { color:#16a34a; }
body[data-theme="light"] .eff-mc-indigo .eff-mc-val { color:#6366f1; }
body[data-theme="light"] .sr-stage-chip { background:#f1f5f9; border-color:#e2e8f0; }
body[data-theme="light"] .sr-btn { color:#334155; border-color:#e2e8f0; }
body[data-theme="light"] .sr-btn-ghost { color:#64748b; }
body[data-theme="light"] .eff-fbtn { color:#334155; border-color:#e2e8f0; }
body[data-theme="light"] .eff-action, body[data-theme="light"] .sr-action { color:#4f46e5; }

/* ═══════════════════════════════════════════════════════════════
   EFICIÊNCIA IA — BUSINESS INTELLIGENCE PREMIUM
═══════════════════════════════════════════════════════════════ */
#module-eficiencia {
  --eff-bg:#080c14;
  --eff-surface:#101722;
  --eff-surface-2:#141d2b;
  --eff-border:rgba(148,163,184,.16);
  --eff-text:#f4f7fb;
  --eff-muted:#91a0b5;
  --eff-primary:#7c8cff;
  --eff-primary-2:#5367e9;
  --eff-success:#2dd4a7;
  --eff-warning:#f6b94b;
  --eff-danger:#fb7185;
  width:auto;
  max-width:100%;
  min-width:0;
  min-height:100vh;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 82% -10%,rgba(83,103,233,.13),transparent 32rem),
    radial-gradient(circle at 8% 18%,rgba(45,212,167,.06),transparent 26rem),
    var(--eff-bg);
}
#module-eficiencia *,#module-eficiencia *::before,#module-eficiencia *::after { box-sizing:border-box; }
#module-eficiencia .mod-wrap { width:100%; max-width:1280px; min-width:0; margin:0 auto; padding:30px 28px 72px; }
#module-eficiencia .eff-header {
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px;
  width:100%; max-width:100%; min-width:0;
  margin:0 0 18px; padding:24px 26px; border:1px solid var(--eff-border); border-radius:20px;
  background:linear-gradient(135deg,rgba(124,140,255,.12),rgba(16,23,34,.96) 48%,rgba(45,212,167,.06));
  box-shadow:0 22px 60px rgba(0,0,0,.23);
}
#module-eficiencia .eff-header::after { content:''; position:absolute; width:240px; height:240px; right:10%; top:-210px; border-radius:50%; background:var(--eff-primary); filter:blur(60px); opacity:.22; pointer-events:none; }
.eff-header-left,.eff-header-right,.eff-title-line { position:relative; z-index:1; }
.eff-title-line { display:flex; align-items:center; gap:14px; }
.eff-title-icon { width:46px; height:46px; display:grid; place-items:center; flex:none; color:#c9d0ff; border:1px solid rgba(124,140,255,.28); border-radius:14px; background:rgba(124,140,255,.12); }
.eff-title-icon svg,.eff-mc-ico svg,.eff-insight-icon svg,.eff-alert > span svg,.eff-all-covered > svg,.btn-eff-refresh svg,.btn-eff-export svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.eff-header h1 { margin:0; color:var(--eff-text); font-size:25px; line-height:1.15; letter-spacing:-.035em; }
.eff-header p { max-width:620px; margin:5px 0 0; color:var(--eff-muted); font-size:12.5px; line-height:1.55; }
.eff-header-right { display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.eff-maturity-badge,.eff-demo-badge { display:inline-flex; align-items:center; min-height:34px; padding:0 11px; border-radius:999px; border:1px solid var(--eff-border); font-size:10px; font-weight:800; letter-spacing:.03em; white-space:nowrap; }
.eff-maturity-badge strong { margin-right:5px; font-size:12px; }
.eff-maturity-badge.seed { color:#b6c1cf; background:rgba(148,163,184,.08); }
.eff-maturity-badge.growth { color:#86efac; border-color:rgba(34,197,94,.24); background:rgba(34,197,94,.09); }
.eff-maturity-badge.advanced { color:#93c5fd; border-color:rgba(59,130,246,.26); background:rgba(59,130,246,.1); }
.eff-maturity-badge.expert { color:#fcd34d; border-color:rgba(245,158,11,.28); background:rgba(245,158,11,.1); }
.eff-demo-badge { color:#c7d2fe; border-color:rgba(124,140,255,.3); background:rgba(124,140,255,.12); }
.btn-eff-refresh,.btn-eff-export { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 14px; border:1px solid var(--eff-border); border-radius:10px; color:var(--eff-text); background:rgba(255,255,255,.035); font:700 11px/1 inherit; cursor:pointer; transition:background .18s,border-color .18s,transform .18s; }
.btn-eff-export { color:#07111f; border-color:var(--eff-primary); background:linear-gradient(135deg,#9aa6ff,#7c8cff); }
.btn-eff-refresh:hover,.btn-eff-export:hover { transform:translateY(-1px); border-color:rgba(124,140,255,.55); }
.btn-eff-refresh:focus-visible,.btn-eff-export:focus-visible,.eff-fbtn:focus-visible,.eff-lead-row:focus-visible,.eff-alert button:focus-visible { outline:3px solid rgba(124,140,255,.35); outline-offset:2px; }

#module-eficiencia .efficiency-area { width:100%; max-width:100%; min-width:0; display:flex; flex-direction:column; gap:16px; color:var(--eff-text); }
.eff-toolbar { width:100%; max-width:100%; min-width:0; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:5px 2px 1px; }
.eff-toolbar-label,.eff-data-note { display:block; color:var(--eff-muted); font-size:10px; font-weight:700; letter-spacing:.06em; }
.eff-toolbar-label { margin-bottom:7px; text-transform:uppercase; }
.eff-data-note { text-align:right; }
.eff-filters { display:flex; gap:7px; }
.eff-fbtn { min-height:44px; padding:0 14px; color:var(--eff-muted); border:1px solid var(--eff-border); border-radius:10px; background:rgba(255,255,255,.025); font:700 11px/1 inherit; cursor:pointer; transition:background .18s,color .18s,border-color .18s; }
.eff-fbtn.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--eff-primary),var(--eff-primary-2)); box-shadow:0 8px 18px rgba(83,103,233,.2); }
.eff-fbtn:hover:not(.active) { color:var(--eff-text); border-color:rgba(124,140,255,.4); }
.eff-loading { min-height:300px; display:flex; align-items:center; justify-content:center; gap:13px; border:1px solid var(--eff-border); border-radius:18px; background:var(--eff-surface); }
.eff-loading > span { width:22px; height:22px; border:2px solid rgba(124,140,255,.18); border-top-color:var(--eff-primary); border-radius:50%; animation:effSpin .75s linear infinite; }
.eff-loading > div { display:flex; flex-direction:column; gap:3px; }
.eff-loading strong { font-size:13px; }
.eff-loading small { color:var(--eff-muted); font-size:10.5px; }
@keyframes effSpin { to { transform:rotate(360deg); } }

#module-eficiencia .eff-card { width:100%; max-width:100%; min-width:0; color:var(--eff-text); border:1px solid var(--eff-border); border-radius:16px; background:linear-gradient(155deg,var(--eff-surface-2),var(--eff-surface)); box-shadow:0 12px 32px rgba(0,0,0,.12); }
#module-eficiencia .eff-metrics { width:100%; max-width:100%; min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:13px; }
#module-eficiencia .eff-metric-card { min-height:162px; position:relative; overflow:hidden; padding:18px; display:block; border-left:1px solid var(--eff-border); }
#module-eficiencia .eff-metric-card::after { height:2px; opacity:.8; background:linear-gradient(90deg,var(--eff-primary),transparent); }
#module-eficiencia .eff-metric-card.success::after { background:linear-gradient(90deg,var(--eff-success),transparent); }
#module-eficiencia .eff-metric-card.accent::after { background:linear-gradient(90deg,var(--eff-warning),transparent); }
#module-eficiencia .eff-metric-card.time::after { background:linear-gradient(90deg,#38bdf8,transparent); }
.eff-metric-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; min-height:34px; }
#module-eficiencia .eff-mc-ico { width:34px; height:34px; display:grid; place-items:center; margin:0; color:#b8c1ff; border-radius:10px; background:rgba(124,140,255,.1); }
.eff-metric-card.success .eff-mc-ico { color:#6ee7c7; background:rgba(45,212,167,.1); }
.eff-metric-card.accent .eff-mc-ico { color:#fbd38d; background:rgba(246,185,75,.1); }
.eff-metric-card.time .eff-mc-ico { color:#7dd3fc; background:rgba(56,189,248,.1); }
#module-eficiencia .eff-mc-val { margin-top:13px; color:var(--eff-text); font-size:31px; font-weight:750; line-height:1; letter-spacing:-.04em; }
.eff-mc-val small { color:var(--eff-muted); font-size:12px; font-weight:700; letter-spacing:0; }
#module-eficiencia .eff-mc-lbl { margin-top:7px; color:var(--eff-text); font-size:11px; font-weight:750; letter-spacing:.02em; text-transform:none; }
.eff-mc-micro { margin:5px 0 0; color:var(--eff-muted); font-size:10.5px; line-height:1.45; }
.eff-compare { margin-top:1px; padding:4px 7px; border-radius:999px; font-size:8.5px; font-weight:800; white-space:nowrap; }
.eff-compare.up { color:#6ee7c7; background:rgba(45,212,167,.09); }
.eff-compare.down { color:#fda4af; background:rgba(251,113,133,.09); }
.eff-metric-progress { height:4px; margin-top:12px; overflow:hidden; border-radius:999px; background:rgba(148,163,184,.11); }
.eff-metric-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--eff-warning),#f97316); transition:width .6s ease; }

.eff-main-grid { width:100%; max-width:100%; min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px; }
.eff-main-grid.lower { grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); }
.eff-section { width:100%; max-width:100%; min-width:0; padding:20px; }
.eff-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:17px; }
.eff-section-head > div > span { display:block; margin-bottom:5px; color:var(--eff-primary); font-size:8.5px; font-weight:850; letter-spacing:.14em; }
.eff-section-head h2 { margin:0; color:var(--eff-text); font-size:16px; letter-spacing:-.02em; }
.eff-section-head > p { max-width:280px; margin:0; color:var(--eff-muted); font-size:10.5px; line-height:1.45; text-align:right; }
.eff-table-wrap { width:100%; max-width:100%; min-width:0; overflow-x:auto; scrollbar-color:var(--eff-primary) transparent; }
#module-eficiencia .eff-agent-table { min-width:560px; color:var(--eff-text); font-size:11.5px; }
#module-eficiencia .eff-agent-table th { padding:8px 9px; color:var(--eff-muted); border-color:var(--eff-border); font-size:8.5px; letter-spacing:.08em; }
#module-eficiencia .eff-agent-table td { padding:11px 9px; color:var(--eff-text); border-color:rgba(148,163,184,.09); }
.eff-agent-table tr.never-used { opacity:.54; }
#module-eficiencia .eff-agent-name { gap:9px; }
.eff-agent-name > span:last-child { display:flex; flex-direction:column; gap:2px; text-transform:capitalize; }
.eff-agent-name small { color:var(--eff-muted); font-size:8.5px; font-weight:500; }
#module-eficiencia .eff-agent-dot { width:8px; height:8px; background:var(--eff-danger); }
#module-eficiencia .eff-agent-dot.medium { background:var(--eff-warning); }
#module-eficiencia .eff-agent-dot.high { background:var(--eff-success); }
.eff-rate-wrap { display:grid; grid-template-columns:35px minmax(80px,1fr); align-items:center; gap:8px; }
.eff-rate-wrap strong { color:var(--eff-text); font-size:10.5px; }
#module-eficiencia .eff-usebar { height:6px; margin:0; background:rgba(148,163,184,.1); }
#module-eficiencia .eff-usebar span { display:block; height:100%; border-radius:inherit; background:var(--eff-danger); transition:width .6s ease; }
#module-eficiencia .eff-usebar span.medium { background:var(--eff-warning); }
#module-eficiencia .eff-usebar span.high { background:var(--eff-success); }

.eff-chart-legend { display:flex; gap:12px; color:var(--eff-muted); font-size:9px; white-space:nowrap; }
.eff-chart-legend span { display:flex; align-items:center; gap:5px; }
.eff-chart-legend i { width:8px; height:8px; display:block; border-radius:2px; background:var(--eff-primary); }
.eff-chart-legend i.used { background:var(--eff-success); }
.eff-chart { height:205px; display:flex; align-items:flex-end; gap:3px; padding:15px 2px 0; border-bottom:1px solid var(--eff-border); background:linear-gradient(to top,rgba(148,163,184,.035) 1px,transparent 1px); background-size:100% 25%; }
.eff-chart-col { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.eff-chart-bars { width:100%; height:calc(100% - 23px); display:flex; align-items:flex-end; justify-content:center; gap:2px; }
.eff-chart-bars > span { width:min(10px,42%); min-height:2px; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#9aa6ff,var(--eff-primary-2)); transition:height .6s ease; }
.eff-chart-bars > span.used { background:linear-gradient(180deg,#6ee7c7,#0f9f7b); }
.eff-chart-col small { height:18px; padding-top:6px; color:var(--eff-muted); font-size:7.5px; white-space:nowrap; }
.eff-chart-summary { margin:13px 0 0; color:var(--eff-muted); font-size:10.5px; }
.eff-chart-summary strong { color:var(--eff-text); }

.eff-lead-list,.eff-alert-list { display:grid; gap:8px; }
#module-eficiencia .eff-lead-row { width:100%; min-height:56px; display:flex; align-items:center; gap:10px; padding:9px 10px; color:var(--eff-text); text-align:left; border:1px solid rgba(148,163,184,.09); border-radius:11px; background:rgba(255,255,255,.018); font:inherit; cursor:pointer; transition:background .16s,border-color .16s; }
#module-eficiencia .eff-lead-row:hover:not(:disabled) { border-color:rgba(124,140,255,.32); background:rgba(124,140,255,.06); }
#module-eficiencia .eff-lead-row:disabled { cursor:default; }
.eff-lead-rank { width:28px; height:28px; display:grid; place-items:center; flex:none; color:#cbd2ff; border-radius:8px; background:rgba(124,140,255,.1); font-size:10px; font-weight:850; }
.eff-lead-main { display:flex; flex-direction:column; flex:1; min-width:0; gap:3px; }
.eff-lead-main strong { overflow:hidden; color:var(--eff-text); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.eff-lead-main small { color:var(--eff-muted); font-size:9px; }
.eff-lead-action { color:var(--eff-muted); font-size:9px; }
#module-eficiencia .eff-lead-runs { color:#cbd2ff; background:rgba(124,140,255,.1); font-size:9px; }
.eff-alert { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px; border:1px solid rgba(246,185,75,.18); border-radius:11px; background:rgba(246,185,75,.055); }
.eff-alert > span { width:32px; height:32px; display:grid; place-items:center; color:#fbd38d; border-radius:9px; background:rgba(246,185,75,.1); }
.eff-alert strong { color:var(--eff-text); font-size:10.5px; line-height:1.4; }
.eff-alert p { margin:3px 0 0; color:var(--eff-muted); font-size:9px; line-height:1.4; }
.eff-alert button { min-height:36px; padding:0 10px; color:#fbd38d; border:1px solid rgba(246,185,75,.22); border-radius:9px; background:transparent; font:750 9px/1 inherit; cursor:pointer; }
.eff-all-covered { min-height:90px; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--eff-success); }
.eff-all-covered > svg { width:28px; height:28px; }
.eff-all-covered > div { display:flex; flex-direction:column; gap:3px; }
.eff-all-covered strong { color:var(--eff-text); font-size:11px; }
.eff-all-covered span { color:var(--eff-muted); font-size:9.5px; }

.eff-insight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.eff-insight { min-height:92px; display:flex; align-items:flex-start; gap:11px; padding:13px; border:1px solid rgba(124,140,255,.14); border-radius:12px; background:rgba(124,140,255,.035); }
.eff-insight.attention { border-color:rgba(246,185,75,.16); background:rgba(246,185,75,.035); }
.eff-insight.demo { border-color:rgba(56,189,248,.18); background:rgba(56,189,248,.04); }
.eff-insight-icon { width:34px; height:34px; display:grid; place-items:center; flex:none; color:#b8c1ff; border-radius:10px; background:rgba(124,140,255,.1); }
.eff-insight.attention .eff-insight-icon { color:#fbd38d; background:rgba(246,185,75,.1); }
.eff-insight.demo .eff-insight-icon { color:#7dd3fc; background:rgba(56,189,248,.1); }
.eff-insight strong { color:var(--eff-text); font-size:10.5px; }
.eff-insight p { margin:4px 0 0; color:var(--eff-muted); font-size:9.8px; line-height:1.5; }
.eff-insight p strong { color:var(--eff-text); }
#module-eficiencia .eff-empty { min-height:190px; color:var(--eff-muted); border-color:var(--eff-border); background:var(--eff-surface); }
#module-eficiencia .eff-empty.compact { min-height:100px; padding:25px; }
#module-eficiencia .eff-empty-ico { width:42px; height:42px; display:grid; place-items:center; color:var(--eff-primary); }
#module-eficiencia .eff-empty-ico svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; }
#module-eficiencia .eff-empty button { min-height:40px; padding:0 14px; border:1px solid var(--eff-border); border-radius:10px; color:var(--eff-text); background:var(--eff-surface-2); cursor:pointer; }
.eff-empty-state { min-height:320px; display:grid; grid-template-columns:auto minmax(0,1fr); align-content:center; align-items:center; gap:18px 20px; padding:34px; }
.eff-empty-state-icon { width:58px; height:58px; display:grid; place-items:center; align-self:start; color:#c6ceff; border:1px solid rgba(124,140,255,.24); border-radius:17px; background:rgba(124,140,255,.1); }
.eff-empty-state-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.eff-empty-eyebrow { display:block; margin-bottom:7px; color:var(--eff-primary); font-size:9px; font-weight:850; letter-spacing:.14em; }
.eff-empty-state h2 { margin:0; color:var(--eff-text); font-size:clamp(20px,3vw,28px); line-height:1.18; letter-spacing:-.03em; }
.eff-empty-state p { max-width:680px; margin:9px 0 0; color:var(--eff-muted); font-size:12.5px; line-height:1.65; }
.eff-empty-steps { grid-column:2; display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:9px; margin-top:4px; }
.eff-empty-steps span { min-height:54px; display:flex; align-items:center; gap:9px; padding:10px 12px; color:var(--eff-muted); border:1px solid rgba(148,163,184,.11); border-radius:11px; background:rgba(255,255,255,.018); font-size:10px; line-height:1.4; }
.eff-empty-steps strong { width:23px; height:23px; display:grid; place-items:center; flex:none; color:#d8ddff; border-radius:7px; background:rgba(124,140,255,.12); font-size:9px; }

body[data-theme="light"] #module-eficiencia {
  --eff-bg:#f4f7fb;
  --eff-surface:#ffffff;
  --eff-surface-2:#fbfdff;
  --eff-border:#dce4ee;
  --eff-text:#122033;
  --eff-muted:#536277;
  --eff-primary:#5265dd;
  --eff-primary-2:#3649bd;
  --eff-success:#087f63;
  --eff-warning:#a65f00;
  --eff-danger:#be304b;
  background:radial-gradient(circle at 84% -10%,rgba(82,101,221,.09),transparent 32rem),#f4f7fb;
}
body[data-theme="light"] #module-eficiencia .eff-header { background:linear-gradient(135deg,#eef1ff,#fff 52%,#effcf8); box-shadow:0 18px 45px rgba(30,45,70,.07); }
body[data-theme="light"] #module-eficiencia .eff-card { background:linear-gradient(155deg,#fff,#fafdff); box-shadow:0 8px 25px rgba(30,45,70,.055); }
body[data-theme="light"] .btn-eff-refresh { background:#fff; }
body[data-theme="light"] .btn-eff-export { color:#fff; }
body[data-theme="light"] .eff-fbtn { background:#fff; }
body[data-theme="light"] #module-eficiencia .eff-lead-row { background:#fbfdff; }
body[data-theme="light"] .eff-alert { border-color:#f1d9af; background:#fff9ed; }
body[data-theme="light"] .eff-insight { background:#f7f8ff; }
body[data-theme="light"] .eff-insight.attention { background:#fff9ed; }
body[data-theme="light"] .eff-demo-switch-ui { background:#cbd5e1; }
body[data-theme="light"] .eff-demo-switch-lbl { color:#475569; }
body[data-theme="light"] .eff-empty-state-icon { color:#4659ca; border-color:#cfd6ff; background:#eef1ff; }
body[data-theme="light"] .eff-empty-steps span { border-color:#e2e8f0; background:#fbfdff; }
body[data-theme="light"] .eff-empty-steps strong { color:#3649bd; background:#e8ecff; }

@media (max-width:1050px) {
  #module-eficiencia .eff-header { align-items:flex-start; flex-direction:column; }
  .eff-header-right { width:100%; justify-content:flex-start; }
  .eff-main-grid,.eff-main-grid.lower { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  #module-eficiencia .mod-wrap { padding:18px 14px 88px; }
  #module-eficiencia .eff-header { padding:18px; border-radius:16px; }
  .eff-title-line { align-items:flex-start; flex-wrap:wrap; }
  .eff-title-icon { width:40px; height:40px; }
  .eff-header h1 { font-size:22px; }
  .eff-header-right { display:grid; grid-template-columns:1fr 1fr; }
  .eff-maturity-badge,.eff-demo-switch { grid-column:span 1; }
  .btn-eff-refresh,.btn-eff-export { width:100%; }
  #module-eficiencia .eff-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .eff-toolbar { align-items:flex-start; flex-direction:column; }
  .eff-data-note { text-align:left; }
  .eff-section-head { flex-direction:column; }
  .eff-section-head > p { max-width:none; text-align:left; }
  .eff-insight-grid { grid-template-columns:1fr; }
  .eff-alert { grid-template-columns:34px minmax(0,1fr); }
  .eff-alert button { grid-column:2; justify-self:start; }
  .eff-empty-state { min-height:0; grid-template-columns:1fr; padding:24px 20px; }
  .eff-empty-state-icon { align-self:auto; }
  .eff-empty-steps { grid-column:1; grid-template-columns:1fr; }
}
@media (max-width:460px) {
  #module-eficiencia .eff-metrics { grid-template-columns:1fr; }
  .eff-header-right { grid-template-columns:1fr; }
  .eff-maturity-badge,.eff-demo-switch { grid-column:auto; }
  .eff-filters { width:100%; }
  .eff-fbtn { flex:1; padding:0 8px; }
  .eff-lead-action { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .eff-loading > span,.eff-demo-dot { animation:none; }
  .eff-metric-progress span,#module-eficiencia .eff-usebar span,.eff-chart-bars > span,.btn-eff-refresh,.btn-eff-export { transition:none; }
}
@media print {
  body.eff-print-mode > *:not(#module-eficiencia),body.eff-print-mode #sb,body.eff-print-mode .eff-header-right,body.eff-print-mode .eff-toolbar,body.eff-print-mode .lgpd-strip { display:none !important; }
  body.eff-print-mode #module-eficiencia { display:block !important; margin:0 !important; background:#fff !important; --eff-bg:#fff; --eff-surface:#fff; --eff-surface-2:#fff; --eff-border:#d6dde7; --eff-text:#111827; --eff-muted:#4b5563; }
  body.eff-print-mode #module-eficiencia .mod-wrap { max-width:none; padding:0; }
  body.eff-print-mode #module-eficiencia .eff-header,body.eff-print-mode #module-eficiencia .eff-card { box-shadow:none; break-inside:avoid; }
  body.eff-print-mode #module-eficiencia::after { content:'Gerado pelo ImobPilot IA · ' attr(data-print-date); display:block; margin-top:20px; color:#4b5563; font-size:10px; text-align:center; }
}

/* (S7 LGPD) faixa de privacidade */
.lgpd-strip { margin-top:4px; border:1px solid var(--border); border-radius:14px; padding:15px 16px; background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.04); }
.lgpd-strip-h { font-size:13px; font-weight:800; color:var(--text); margin-bottom:5px; }
.lgpd-strip-b { font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:11px; max-width:640px; }
.lgpd-strip-btns { display:flex; flex-wrap:wrap; gap:8px; }
body[data-theme="light"] .lgpd-strip { background:#ffffff; border-color:#e2e8f0; }
body[data-theme="light"] .lgpd-strip-h { color:#0f172a; }
body[data-theme="light"] .lgpd-strip-b { color:#475569; }

/* ═══════════════════════════════════════════════════════════════
   CENTRAL DE PRIVACIDADE & LGPD
═══════════════════════════════════════════════════════════════ */
#module-lgpd {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, .09), transparent 30rem),
    radial-gradient(circle at 95% 12%, rgba(59, 130, 246, .08), transparent 28rem),
    var(--bg);
  color: var(--text);
}
/* LGPD-3 admin module: paint a full THEME-AWARE shell (bg = var(--bg): dark
   #07090f / light #f8fafc) so the sidebar offset never reveals white gutters
   and switching to the module shows no white flash. The centered .la-wrap
   sits on top; box-sizing avoids overflow with the sidebar margin. */
#module-lgpd-admin {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
}
.lgpd-page { max-width: 1240px; margin: 0 auto; padding: 34px 30px 70px; }
.lgpd-page-top { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.lgpd-page-kicker, .lgpd-eyebrow, .lgpd-panel-head > span {
  display:block; color:#2dd4bf; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.lgpd-page-top h1 { margin:7px 0 8px; font-size:clamp(28px, 4vw, 44px); line-height:1.05; letter-spacing:-.035em; }
.lgpd-page-top p { margin:0; max-width:650px; color:var(--muted); font-size:14px; line-height:1.65; }
.lgpd-refresh, .lgpd-btn, .lgpd-text-btn, .lgpd-accept-btn, .lgpd-retry-btn {
  min-height:44px; border-radius:11px; border:1px solid var(--border); font:700 12px/1.2 inherit; cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.lgpd-refresh { display:inline-flex; align-items:center; gap:8px; padding:0 15px; color:var(--text); background:var(--card); }
.lgpd-refresh svg { width:16px; height:16px; }
.lgpd-refresh:hover, .lgpd-btn:hover, .lgpd-text-btn:hover, .lgpd-accept-btn:hover, .lgpd-retry-btn:hover { transform:translateY(-1px); }
.lgpd-hero-card {
  position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:28px;
  padding:30px; margin-bottom:18px; border:1px solid rgba(45,212,191,.2); border-radius:22px;
  background:linear-gradient(125deg, rgba(15,118,110,.2), rgba(15,23,42,.72) 48%, rgba(37,99,235,.13));
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.lgpd-hero-orb { position:absolute; width:260px; height:260px; right:18%; top:-180px; border-radius:50%; background:#2dd4bf; filter:blur(65px); opacity:.17; pointer-events:none; }
.lgpd-hero-copy { position:relative; max-width:720px; }
.lgpd-hero-copy h2 { margin:8px 0 9px; font-size:clamp(22px, 3.2vw, 35px); line-height:1.14; letter-spacing:-.03em; }
.lgpd-hero-copy p { margin:0; color:var(--muted); line-height:1.6; font-size:13px; }
.lgpd-status-card { position:relative; display:flex; align-items:center; gap:12px; min-width:225px; padding:15px 17px; border:1px solid rgba(255,255,255,.1); border-radius:15px; background:rgba(5,10,20,.42); backdrop-filter:blur(14px); }
.lgpd-status-dot { width:10px; height:10px; border-radius:50%; flex:none; box-shadow:0 0 0 5px rgba(245,158,11,.1); background:#f59e0b; }
.lgpd-status-dot.ok { background:#2dd4bf; box-shadow:0 0 0 5px rgba(45,212,191,.11); }
.lgpd-status-card div { display:flex; flex-direction:column; gap:3px; }
.lgpd-status-card small, .lgpd-status-card span { color:var(--muted); font-size:10px; }
.lgpd-status-card strong { color:var(--text); font-size:13px; }
.lgpd-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.lgpd-panel { position:relative; overflow:hidden; min-height:245px; padding:23px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(155deg, var(--card), var(--surf)); box-shadow:0 10px 30px rgba(0,0,0,.08); }
.lgpd-panel-icon { position:absolute; top:20px; right:21px; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:rgba(45,212,191,.1); color:#2dd4bf; font-size:20px; }
.lgpd-panel-head h3 { margin:7px 0 7px; font-size:19px; letter-spacing:-.02em; }
.lgpd-panel-head p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.lgpd-action-stack { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.lgpd-btn { padding:0 16px; color:var(--text); background:var(--surf); }
.lgpd-btn.primary { color:#042f2e; border-color:#2dd4bf; background:#2dd4bf; }
.lgpd-btn.danger { color:#fca5a5; border-color:rgba(248,113,113,.26); background:rgba(127,29,29,.12); }
.lgpd-accept-summary { min-height:72px; margin:20px 0 10px; padding:13px 14px; border:1px solid var(--border); border-radius:12px; background:rgba(45,212,191,.04); }
.lgpd-accept-summary > div { display:flex; flex-direction:column; gap:4px; }
.lgpd-accept-summary small, .lgpd-accept-summary span { color:var(--muted); font-size:10.5px; }
.lgpd-accept-summary strong { font-size:13px; }
.lgpd-text-btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 13px; color:#5eead4; background:transparent; }
.lgpd-check-list { display:grid; gap:12px; margin:22px 0 0; padding:0; list-style:none; }
.lgpd-check-list li { position:relative; padding-left:25px; color:var(--muted); font-size:12px; line-height:1.52; }
.lgpd-check-list li::before { content:'✓'; position:absolute; left:0; top:-1px; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; color:#042f2e; background:#2dd4bf; font-size:10px; font-weight:900; }
.lgpd-check-list.system li::before { color:#dbeafe; background:#2563eb; }
.lgpd-requests { grid-column:1 / -1; min-height:0; }
.lgpd-request-list { display:grid; gap:8px; margin-top:18px; }
.lgpd-request-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 14px; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.018); }
.lgpd-request-row > div { display:flex; flex-direction:column; gap:3px; }
.lgpd-request-row strong { font-size:12px; }
.lgpd-request-row span, .lgpd-empty-requests { color:var(--muted); font-size:10.5px; }
.lgpd-request-status { padding:5px 9px; border-radius:999px; color:#fbbf24 !important; background:rgba(245,158,11,.1); font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.lgpd-request-status.done { color:#5eead4 !important; background:rgba(45,212,191,.1); }
.lgpd-empty-requests { padding:18px 0; text-align:center; }
.lgpd-legal-note { margin:18px 2px 0; color:var(--muted); font-size:10.5px; text-align:center; }
.lgpd-state { min-height:240px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:13px; }
.lgpd-state-error { flex-direction:column; color:#fca5a5; }
.lgpd-state-error button { border:0; background:none; color:#5eead4; cursor:pointer; font-weight:800; }
.lgpd-spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:#2dd4bf; border-radius:50%; animation:lgpd-spin .8s linear infinite; }
@keyframes lgpd-spin { to { transform:rotate(360deg); } }

body.lgpd-modal-open { overflow:hidden !important; }
.lgpd-modal-overlay[hidden] { display:none !important; }
.lgpd-modal-overlay { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:18px; background:rgba(2,6,12,.84); backdrop-filter:blur(12px); }
.lgpd-modal { position:relative; width:min(760px, 100%); max-height:calc(100vh - 36px); overflow:auto; padding:28px; border:1px solid rgba(45,212,191,.23); border-radius:22px; background:linear-gradient(155deg, #101923, #080d14 65%); color:#eef7f6; box-shadow:0 35px 100px rgba(0,0,0,.55); }
.lgpd-modal-close { position:absolute; top:17px; right:17px; width:40px; height:40px; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#b7c4c6; background:rgba(255,255,255,.04); font-size:22px; cursor:pointer; }
.lgpd-modal-brand { display:flex; align-items:center; gap:10px; margin-bottom:23px; }
.lgpd-modal-shield { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#5eead4; background:rgba(45,212,191,.1); border:1px solid rgba(45,212,191,.2); }
.lgpd-modal-shield svg { width:21px; height:21px; }
.lgpd-modal-brand > div { display:flex; flex-direction:column; gap:2px; }
.lgpd-modal-brand span { font-size:11px; font-weight:900; letter-spacing:.14em; }
.lgpd-modal-brand small { color:#819092; font-size:9px; }
.lgpd-modal-heading { padding-right:40px; }
.lgpd-version-pill { display:inline-flex; padding:5px 8px; border:1px solid rgba(45,212,191,.2); border-radius:999px; color:#5eead4; background:rgba(45,212,191,.07); font-size:9px; font-weight:800; letter-spacing:.06em; }
.lgpd-modal-heading h2 { margin:12px 0 7px; font-size:27px; letter-spacing:-.03em; }
.lgpd-modal-heading p { margin:0; color:#91a2a5; font-size:12px; }
.lgpd-memo-copy { max-height:310px; overflow:auto; margin:22px 0; padding:19px; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:rgba(255,255,255,.025); scrollbar-color:#2dd4bf transparent; }
.lgpd-memo-section + .lgpd-memo-section { margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); }
.lgpd-memo-section h4 { margin:0 0 6px; color:#e9f5f3; font-size:12px; }
.lgpd-memo-section p { margin:0; color:#9eadaf; font-size:11.5px; line-height:1.65; }
.lgpd-signature { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lgpd-field { display:flex; flex-direction:column; gap:6px; }
.lgpd-field label { color:#9eadaf; font-size:10px; font-weight:800; }
.lgpd-field input { min-height:44px; padding:0 12px; border:1px solid rgba(255,255,255,.1); border-radius:10px; outline:none; color:#eef7f6; background:rgba(255,255,255,.035); font:500 12px/1 inherit; }
.lgpd-field input[readonly] { color:#829194; }
.lgpd-field input:focus { border-color:#2dd4bf; box-shadow:0 0 0 3px rgba(45,212,191,.1); }
.lgpd-checkbox { grid-column:1 / -1; display:flex; align-items:flex-start; gap:10px; padding:13px; border:1px solid rgba(255,255,255,.08); border-radius:11px; cursor:pointer; }
.lgpd-checkbox input { width:18px; height:18px; flex:none; margin:0; accent-color:#2dd4bf; }
.lgpd-checkbox span { color:#a9b8ba; font-size:11px; line-height:1.5; }
.lgpd-modal-error { grid-column:1 / -1; padding:10px 12px; border:1px solid rgba(248,113,113,.3); border-radius:9px; color:#fecaca; background:rgba(127,29,29,.16); font-size:11px; }
.lgpd-modal-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:10px; }
.lgpd-retry-btn { padding:0 14px; color:#a9b8ba; background:transparent; }
.lgpd-accept-btn { padding:0 18px; color:#032d2b; border-color:#2dd4bf; background:linear-gradient(135deg,#5eead4,#2dd4bf); box-shadow:0 10px 26px rgba(45,212,191,.14); }
.lgpd-accept-btn:disabled { cursor:wait; opacity:.65; transform:none; }
.lgpd-evidence-note { grid-column:1 / -1; margin:0; color:#708083; font-size:9.5px; line-height:1.5; text-align:center; }
.lgpd-strip { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.lgpd-strip-b { margin-bottom:0; }

body[data-theme="light"] #module-lgpd {
  background:
    radial-gradient(circle at 18% 0%, rgba(13,148,136,.08), transparent 30rem),
    radial-gradient(circle at 95% 12%, rgba(37,99,235,.06), transparent 28rem),
    #f6f9fb;
}
body[data-theme="light"] .lgpd-hero-card { border-color:rgba(13,148,136,.18); background:linear-gradient(125deg,#ecfdf9,#fff 52%,#eff6ff); box-shadow:0 20px 50px rgba(15,23,42,.07); }
body[data-theme="light"] .lgpd-status-card { border-color:#dbe7e5; background:rgba(255,255,255,.78); }
body[data-theme="light"] .lgpd-panel { border-color:#dce7e6; background:linear-gradient(155deg,#fff,#f8fbfb); box-shadow:0 10px 30px rgba(15,23,42,.055); }
body[data-theme="light"] .lgpd-accept-summary, body[data-theme="light"] .lgpd-request-row { border-color:#dce7e6; background:#f7fbfa; }
body[data-theme="light"] .lgpd-btn.danger { color:#b91c1c; border-color:#fecaca; background:#fff7f7; }
body[data-theme="light"] .lgpd-text-btn { color:#0f766e; }

@media (max-width:760px) {
  .lgpd-page { padding:24px 15px 90px; }
  .lgpd-page-top { align-items:flex-start; flex-direction:column; }
  .lgpd-refresh { width:100%; justify-content:center; }
  .lgpd-hero-card { grid-template-columns:1fr; padding:22px; }
  .lgpd-status-card { min-width:0; width:100%; }
  .lgpd-grid { grid-template-columns:1fr; }
  .lgpd-requests { grid-column:auto; }
  .lgpd-modal { padding:22px 17px; border-radius:18px; }
  .lgpd-signature { grid-template-columns:1fr; }
  .lgpd-checkbox, .lgpd-modal-error, .lgpd-modal-actions, .lgpd-evidence-note { grid-column:auto; }
  .lgpd-modal-actions { flex-direction:column-reverse; }
  .lgpd-retry-btn, .lgpd-accept-btn { width:100%; }
  .lgpd-strip { align-items:flex-start; flex-direction:column; }
  .lgpd-strip .sr-btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .lgpd-spinner { animation-duration:1.8s; }
  .lgpd-refresh, .lgpd-btn, .lgpd-text-btn, .lgpd-accept-btn, .lgpd-retry-btn { transition:none; }
}

/* (Intent) mensagem-primeiro: observação curta, "ver análise" recolhível, reformular */
.ag-obs { font-size:12px; color:var(--muted); margin:2px 0 4px; line-height:1.5; }
.ag-more { margin-top:6px; }
.ag-more > summary { cursor:pointer; font-size:11px; font-weight:700; color:var(--muted); list-style:none; }
.ag-more > summary::-webkit-details-marker { display:none; }
.ag-more > summary::before { content:'▸ '; }
.ag-more[open] > summary::before { content:'▾ '; }
.ag-more[open] > summary { margin-bottom:6px; }
.ocaf-reform { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; font-size:11px; color:var(--muted); }
.ocaf-reform button { border:1px solid var(--border); background:var(--surf); color:var(--text); font:600 11px/1 inherit; padding:5px 9px; border-radius:7px; cursor:pointer; }
.ocaf-reform button:hover { filter:brightness(1.1); }

/* Linha de ações diretas */
.pl-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.pl-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--card2, var(--surf));
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background .14s, color .14s, border-color .14s, transform .1s;
}
.pl-act svg { flex-shrink: 0; }
.pl-act:hover { color: var(--text); border-color: var(--muted2, var(--muted)); }
.pl-act:active { transform: translateY(1px); }
/* WhatsApp com prioridade visual */
.pl-act-wa {
  color: var(--green);
  background: rgba(37, 211, 102, .10);
  border-color: rgba(37, 211, 102, .35);
}
.pl-act-wa:hover {
  color: #fff;
  background: #25d366;
  border-color: #25d366;
}
@media (max-width: 600px) {
  .pl-act { flex: 1 1 auto; justify-content: center; }
}
/* ── fim Fase 5 ── */

/* ═══════════════════════════════════════════════════════════════════
   REFACTOR UI — Fase 6: Card do Pipeline humanizado
   Temperatura (palavra+bolinha), orientação promovida, 1 ação primária,
   assistente recolhido. Override anexado (vence por ordem). Reversível.
═══════════════════════════════════════════════════════════════════ */
/* Temperatura: bolinha + palavra, no lugar do número de Lead Score */
.pl-card-temp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.pl-card-temp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Orientação (régua) promovida — ocupa a largura, acima do botão principal */
.pl-card-nudge {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.4;
}
/* Ação primária — conversar no WhatsApp (verde, largura cheia) */
.pl-card-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 8px;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: #1faf63;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.pl-card-primary svg { flex-shrink: 0; }
.pl-card-primary:hover { background: #25d366; }
.pl-card-primary:active { transform: translateY(1px); }
/* Assistente de abordagem — recolhido, discreto (substitui SDR/Closer) */
.pl-assist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 4px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #9b8cff;
  transition: color .15s;
}
.pl-assist-toggle svg { flex-shrink: 0; }
.pl-assist-toggle:hover { color: #b9adff; }
[data-theme="light"] .pl-card-temp { color: var(--muted); }
[data-theme="light"] .pl-assist-toggle { color: #6d5ad6; }
.pl-card-primary span { letter-spacing: .01em; }
/* Telefone discreto (a ação principal é o botão verde — não competir em cor) */
.pl-card-foot .pl-card-tel { color: var(--muted); font-weight: 500; }
.pl-card-foot .pl-card-tel:hover { color: var(--green); }
/* Ações secundárias — 3 colunas iguais, ícone sobre o rótulo (alinhado e premium) */
.pl-card-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pl-card-actions .pl-act { flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 7px 3px; font-size: 10px; line-height: 1.2; text-align: center; white-space: normal; }
.pl-card-actions .pl-act svg { margin-bottom: 1px; }
/* Mover de etapa (‹ Voltar / Avançar ›) — alternativa ao arrastar */
.pl-card-move {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.pl-move-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.pl-move-btn svg { flex-shrink: 0; }
.pl-move-btn:hover:not(:disabled) { color: var(--text); border-color: var(--muted2, var(--muted)); background: var(--surf); }
.pl-move-btn:disabled { opacity: .3; cursor: default; }
[data-theme="light"] .pl-card-move { border-top-color: rgba(0, 0, 0, .06); }
.pl-card-move { align-items: center; }
.pl-move-arrow { padding: 5px 7px; flex-shrink: 0; }
.pl-move-select { flex: 1; min-width: 0; height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--card2, var(--surf)); color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.pl-move-select:hover { color: var(--text); border-color: var(--muted2, var(--muted)); background: var(--surf); }
.pl-move-select:focus { outline: none; border-color: var(--acc, #6b7cff); }
/* Cards de agente (modal): 2 colunas para "Como ajuda" + "Como usar" — preenche o vazio */
.agent-guidance-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.agent-steps-list { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.agent-steps-list li { margin: 0 0 5px; }
.agent-steps-list strong { color: var(--text); font-weight: 600; }
@media (max-width: 560px) { .agent-guidance-cols { grid-template-columns: 1fr; gap: 10px; } }
/* "Quando NÃO acionar" — orienta o corretor leigo a não gastar crédito à toa */
.agent-no-trigger {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(148, 163, 184, .06);
  border: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.agent-no-trigger svg { flex-shrink: 0; margin-top: 1px; color: var(--orange); width: 15px; height: 15px; }
.agent-no-trigger strong { color: var(--text); font-weight: 600; }
[data-theme="light"] .agent-no-trigger { background: rgba(15, 23, 42, .03); }

/* ═══ Banner de follow-up vencido — CTA premium (SaaS de alto nível) ═══ */
.alert-followup-pro {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: rgba(239, 68, 68, .06);
  border: 1px solid rgba(239, 68, 68, .18);
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.alert-followup-pro:hover {
  background: rgba(239, 68, 68, .09);
  border-color: rgba(239, 68, 68, .32);
  box-shadow: 0 6px 20px rgba(239, 68, 68, .12);
  transform: translateY(-1px);
}
.alert-followup-pro:focus-visible { outline: 2px solid rgba(239, 68, 68, .5); outline-offset: 2px; }
.afp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(239, 68, 68, .14);
  color: #ef4444;
  flex-shrink: 0;
}
.afp-icon svg { width: 20px; height: 20px; }
.afp-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.afp-title { font-size: 13.5px; font-weight: 700; color: #f87171; letter-spacing: -.1px; }
.afp-sub { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.afp-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 9px 15px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s, transform .1s;
}
.afp-cta svg { width: 14px; height: 14px; transition: transform .15s; }
.alert-followup-pro:hover .afp-cta { background: #dc2626; }
.alert-followup-pro:hover .afp-cta svg { transform: translateX(3px); }
[data-theme="light"] .alert-followup-pro { background: rgba(239, 68, 68, .05); border-color: rgba(239, 68, 68, .18); }
[data-theme="light"] .afp-title { color: #dc2626; }
@media (max-width: 560px) {
  .alert-followup-pro { gap: 11px; padding: 12px; }
  .afp-sub { display: none; }
}

/* ═══ Follow-ups acionáveis (card + modo foco) ═══ */
.fu-card-pro .fu-card-click { cursor: pointer; }
.fu-nudge { font-size: 11px; color: var(--muted); line-height: 1.45; background: rgba(148, 163, 184, .07); border-radius: 7px; padding: 6px 9px; margin: 2px 0 8px; }
.fu-primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border: none; border-radius: 9px; background: #1faf63; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s; }
.fu-primary svg { flex-shrink: 0; }
.fu-primary:hover { background: #25d366; }
.fu-primary:active { transform: translateY(1px); }
.fu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.fu-act { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.fu-act svg { flex-shrink: 0; }
.fu-act:hover { color: var(--text); border-color: var(--muted2, var(--muted)); background: var(--surf); }
.fu-act-done { color: #10d98a; border-color: rgba(16, 217, 138, .3); }
.fu-act-done:hover { color: #fff; background: #10b981; border-color: #10b981; }
.fu-snooze { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.fu-snooze-lbl { font-size: 10.5px; color: var(--muted2); }
.fu-chip { padding: 3px 9px; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--muted); font-family: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.fu-chip:hover { color: var(--text); border-color: var(--muted2, var(--muted)); background: var(--surf); }
.fu-hero-cta-row { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fu-hero-cta-hint { font-size: 11.5px; color: var(--muted); }
.fu-start-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: none; border-radius: 10px; background: #185fa5; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s, box-shadow .15s, transform .12s; }
.fu-start-btn svg { flex-shrink: 0; }
.fu-start-btn:hover { background: #1f6fbf; box-shadow: 0 6px 20px rgba(24, 95, 165, .25); transform: translateY(-1px); }
.fu-zero { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #10d98a; }
.fu-demo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.fu-demo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.fu-demo-btn svg { flex-shrink: 0; }
.fu-demo-btn:hover { color: var(--text); border-color: var(--muted2, var(--muted)); background: var(--surf); }
.fu-demo-clear:hover { color: #ff6b6b; border-color: rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .08); }
.fu-demo-hint { font-size: 10.5px; color: var(--muted2); }
/* Modo foco — overlay */
.fu-focus-ov { position: fixed; inset: 0; z-index: 9000; background: rgba(7, 9, 15, .72); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fuFocusIn .18s ease; }
@keyframes fuFocusIn { from { opacity: 0; } to { opacity: 1; } }
.fu-focus-card { width: 100%; max-width: 420px; background: var(--card, #11151c); border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.fu-focus-top { display: flex; justify-content: space-between; align-items: center; }
.fu-focus-count { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fu-focus-x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
.fu-focus-x:hover { color: var(--text); }
.fu-focus-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin: 12px 0 16px; }
.fu-focus-bar span { display: block; height: 100%; background: #185fa5; transition: width .25s ease; }
.fu-focus-name { font-size: 19px; font-weight: 700; }
.fu-focus-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 7px 0 14px; }
.fu-focus-msg { font-size: 12.5px; color: var(--muted); line-height: 1.5; background: rgba(148, 163, 184, .08); border-radius: 10px; padding: 11px 13px; margin-bottom: 16px; font-style: italic; }
.fu-focus-msg-lbl { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted2); margin-bottom: 5px; font-style: normal; }
.fu-focus-primary { font-size: 14px; padding: 12px; }
.fu-focus-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.fu-focus-actions .fu-act { padding: 11px 4px; font-size: 12.5px; }
.fu-focus-snooze { justify-content: center; }
.fu-focus-done { text-align: center; }
.fu-focus-emoji { font-size: 44px; margin-bottom: 8px; }
.fu-focus-h { font-size: 20px; font-weight: 700; }
.fu-focus-sub { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 8px 0 18px; }
.fu-focus-close-btn { padding: 10px 22px; border: none; border-radius: 9px; background: #185fa5; color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
[data-theme="light"] .fu-focus-ov { background: rgba(15, 23, 42, .55); }
[data-theme="light"] .fu-focus-card { background: #fff; }

/* ═══ Calculadora ImobPilot — overlay com o app da pasta (iframe) ═══ */
.calc-ov { position: fixed; inset: 0; z-index: 9500; background: #0a0c12; display: flex; flex-direction: column; animation: fuFocusIn .18s ease; }
.calc-topbar { height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #0f1320; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.calc-topbar-title { font-size: 13px; font-weight: 600; color: #e2e8f0; display: flex; align-items: center; gap: 8px; }
.calc-topbar-title svg { flex-shrink: 0; color: #f5c518; }
.calc-close { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; transition: background .14s, color .14s; }
.calc-close svg { flex-shrink: 0; }
.calc-close:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.calc-frame { flex: 1; width: 100%; border: none; display: block; background: #f7f9fb; }

/* ═══ Botão de Análise no card + visualizador (copiar) ═══ */
.pl-analise-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 7px; padding: 7px; border-radius: 8px; font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; border: 1px solid; transition: background .14s, color .14s, border-color .14s; }
.pl-analise-btn svg { flex-shrink: 0; }
.pl-analise-btn.none { color: #10d98a; border-color: rgba(16, 217, 138, .35); background: rgba(16, 217, 138, .08); }
.pl-analise-btn.none:hover { background: rgba(16, 217, 138, .16); }
.pl-analise-btn.has { color: #ff5a6a; border-color: rgba(255, 77, 109, .4); background: rgba(255, 77, 109, .1); }
.pl-analise-btn.has:hover { background: rgba(255, 77, 109, .18); }
.analise-ov { position: fixed; inset: 0; z-index: 9600; background: rgba(7, 9, 15, .72); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fuFocusIn .18s ease; }
.analise-card { width: 100%; max-width: 460px; max-height: 86vh; overflow: auto; background: var(--card, #11151c); border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.analise-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.analise-title { font-size: 16px; font-weight: 700; color: var(--text); }
.analise-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.analise-x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; flex-shrink: 0; }
.analise-x:hover { color: var(--text); }
.analise-scorebar { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 10px; }
.analise-score { font-size: 38px; font-weight: 800; line-height: 1; }
.analise-status { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.analise-texto { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 12.5px; line-height: 1.6; color: var(--muted); background: rgba(148, 163, 184, .06); border: 1px solid var(--border); border-radius: 10px; padding: 13px; margin: 0; }
.analise-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.analise-copy { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: none; border-radius: 9px; background: #185fa5; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s; }
.analise-copy:hover { background: #1f6fbf; }
[data-theme="light"] .analise-ov { background: rgba(15, 23, 42, .55); }
[data-theme="light"] .analise-card { background: #fff; }
/* ── fim Fase 6 ── */

/* ═══════════════════════════════════════════════════════════════════
   REFINAMENTO CROMÁTICO — TEMA CLARO (corporativo / premium)
   Tudo escopado em [data-theme="light"] → o tema escuro NÃO é afetado.
   Reversível: remover este bloco. Cores semânticas da paleta recomendada.
═══════════════════════════════════════════════════════════════════ */

/* ── Sidebar — neutra, texto slate, ícones dessaturados parciais ── */
[data-theme="light"] #sb {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}
[data-theme="light"] .sb-item { color: #334155; }
[data-theme="light"] .sb-item .sb-lbl { color: #334155; }
[data-theme="light"] .sb-sep { background: #e2e8f0; }
/* Dessaturação PARCIAL e elegante dos emojis/ícones (não vira P&B) */
[data-theme="light"] .sb-icon {
  filter: saturate(0.6) brightness(0.95);
  opacity: 0.9;
}
[data-theme="light"] .sb-item:hover { background: #f1f5f9; color: #0f172a; }
[data-theme="light"] .sb-item:hover .sb-icon { opacity: 1; }
[data-theme="light"] .sb-item.active { background: #fff7ed; color: #b45309; }
[data-theme="light"] .sb-item.active .sb-lbl { color: #b45309; }
[data-theme="light"] .sb-item.active .sb-icon { filter: saturate(1); opacity: 1; }  /* ativo mais vivo */
[data-theme="light"] .sb-item.active::before { background: #d97706; }
[data-theme="light"] .sb-item.sb-wa { color: #475569; }
[data-theme="light"] .sb-brand { color: #0f172a; }
[data-theme="light"] .sb-brand-badge { background: #f59e0b; color: #ffffff; }
[data-theme="light"] .sb-font-btn { color: #475569; border-color: #e2e8f0; background: #ffffff; }
[data-theme="light"] .sb-user-name { color: #0f172a; }

/* ── Topbar — botões Config/Marketing neutros (não-CTA) ── */
/* ── Sidebar: links CRM diretos ── */
.sb-crm-link { color: var(--muted); }
.sb-crm-link:hover { color: var(--text); }
.sb-crm-link.active { color: var(--acc); }

[data-theme="light"] .tb-dd-btn { background: #ffffff; border-color: #e2e8f0; color: #334155; }
[data-theme="light"] .tb-dd-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
[data-theme="light"] .tb-dd-btn[aria-expanded="true"] { background: #fff7ed; border-color: #fdba74; color: #b45309; }
[data-theme="light"] .tb-dd-menu { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 24px rgba(15, 23, 42, .10); }
[data-theme="light"] .tb-dd-item { color: #334155; }
[data-theme="light"] .tb-dd-item:hover { background: #f1f5f9; }
[data-theme="light"] .tb-dd-sep { background: #e2e8f0; }
[data-theme="light"] .tb-dd-item--section { color: #b45309; }
[data-theme="light"] .sb-crm-link { color: #475569; }
[data-theme="light"] .sb-crm-link:hover { color: #0f172a; }
[data-theme="light"] .sb-crm-link.active { color: #d97706; }

/* ── Cards / KPIs — barra superior neutra, sombra leve ── */
[data-theme="light"] .card-title::before { background: #cbd5e1; }
[data-theme="light"] .kpi.kpi-premium { box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
[data-theme="light"] .kpi.kpi-premium:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, .10); }

/* ── Alerta — chama atenção sem dominar ── */
[data-theme="light"] .alert-banner,
[data-theme="light"] .alert-followup {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
}
[data-theme="light"] .alert-followup strong,
[data-theme="light"] .alert-followup u { color: #b91c1c !important; }
[data-theme="light"] .alert-dot { background: #dc2626 !important; }

/* ── Barras (Funil de Vendas / Metas) — trilhas neutras, labels slate ── */
[data-theme="light"] .funnel-track { background: #e2e8f0 !important; }
[data-theme="light"] .funnel-label { color: #334155 !important; }

/* ── Funil Visual — reduzir peso/saturação (hues semânticos mantidos) ── */
[data-theme="light"] .funnel-visual-stage {
  box-shadow: none !important;
  filter: saturate(0.85);
}

/* ── WhatsApp flutuante — mantém verde, sombra reduzida ── */
[data-theme="light"] #dashboard-wa-float,
[data-theme="light"] .dashboard-wa-float {
  box-shadow: 0 4px 14px rgba(16, 185, 129, .28) !important;
}
/* ── fim refinamento cromático claro ── */

/* ═══════════════════════════════════════════════════════════════════
   UX — Acessos WhatsApp (ImobPilot-Zap / WhatsApp Web) + botão Voltar
   Micro-ícones, cores suaves, hover suave, tema claro/escuro. Reversível.
═══════════════════════════════════════════════════════════════════ */
.wa-acc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.wa-acc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.wa-acc svg { flex-shrink: 0; }
.wa-acc:active { transform: translateY(1px); }
/* ImobPilot-Zap — principal no contexto de atendimento (verde suave, não forte) */
.wa-acc-zap {
  color: #10b981;
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .30);
}
.wa-acc-zap:hover { background: rgba(16, 185, 129, .20); border-color: rgba(16, 185, 129, .45); }
/* WhatsApp Web — secundário / discreto (neutro) */
.wa-acc-web {
  color: #64748b;
  background: rgba(148, 163, 184, .10);
  border-color: rgba(148, 163, 184, .28);
}
.wa-acc-web:hover { background: rgba(148, 163, 184, .18); color: #475569; }
[data-theme="light"] .wa-acc-web { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
[data-theme="light"] .wa-acc-web:hover { background: #e2e8f0; }

/* Botão "← Voltar para Templates Prontos" (injetado no topo do Hub WhatsApp) */
.tpl-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 24px 0;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--sh-sm, 0 1px 2px rgba(0, 0, 0, .06));
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .12s;
}
.tpl-back-btn:hover { background: var(--surf); border-color: var(--acc); }
.tpl-back-btn:active { transform: translateY(1px); }
.tpl-back-btn svg { flex-shrink: 0; color: var(--acc); }
/* ── fim acessos WhatsApp + voltar ── */

/* ═══════════════════════════════════════════════════════════════════
   PIPELINE — botões externos do card (ImobPilot-Zap / WhatsApp Web)
   + botão flutuante "Voltar para o Pipeline". Cores suaves, tema-aware.
═══════════════════════════════════════════════════════════════════ */
/* ImobPilot-Zap — principal de atendimento (verde suave) */
.pl-act.pl-act-zap {
  color: var(--green);
  background: rgba(37, 211, 102, .12);
  border-color: rgba(37, 211, 102, .35);
}
.pl-act.pl-act-zap:hover { color: #fff; background: #25d366; border-color: #25d366; }
/* WhatsApp Web — secundário/discreto (neutro, herda .pl-act) */
.pl-act.pl-act-web { color: var(--muted); }
.pl-act.pl-act-web:hover { color: var(--text); border-color: var(--muted2, var(--muted)); }

/* Botão flutuante "← Voltar para o Pipeline" */
.pipeline-back-btn {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--sh-lg, 0 8px 24px rgba(0, 0, 0, .18));
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .12s;
}
.pipeline-back-btn:hover {
  background: var(--surf);
  border-color: var(--acc);
  transform: translateX(-50%) translateY(-1px);
}
.pipeline-back-btn svg { flex-shrink: 0; color: var(--acc); }
@media (max-width: 767px) {
  .pipeline-back-btn { top: auto; bottom: 70px; }   /* acima do bottom-nav no mobile */
}
/* ── fim Pipeline botões externos + voltar ── */

/* ═══════════════════════════════════════════════════════════════════
   CONFIGURAÇÃO AGENTE DE IA — Fase 1 (UI shell, dentro do módulo admin)
   Área separada do "Motor de IA". Reaproveita classes adm-*. Reversível.
═══════════════════════════════════════════════════════════════════ */
.agentai-stub-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surf);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.agentai-microcopy { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.agentai-status-row { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: 12.5px; flex-wrap: wrap; }
.agentai-status-label { color: var(--muted); font-weight: 500; }
.agentai-status-val { color: var(--text); font-weight: 600; }
/* ── fim Configuração Agente de IA (Fase 1) ── */

/* ═══ Configuração Agente de IA — Etapa 3 (feedback de integração) ═══ */
.agentai-statebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.agentai-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .3px; }
.agentai-badge-on { color: #16a34a; background: rgba(22, 163, 74, .12); border: 1px solid rgba(22, 163, 74, .30); }
.agentai-badge-off { color: var(--muted); background: rgba(148, 163, 184, .12); border: 1px solid var(--border); }
.agentai-last { font-size: 12px; color: var(--muted); }
.agentai-last-ok { color: #16a34a; }
.agentai-last-err { color: #dc2626; }
.agentai-alert {
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}
.agentai-alert-muted { color: var(--muted); background: var(--surf); }
.agentai-alert-warn { color: #b45309; background: rgba(245, 158, 11, .10); border-color: rgba(245, 158, 11, .30); }
.agentai-alert-error { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.agentai-masked { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.agentai-loading { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: auto; display: inline-flex; align-items: center; }
/* ── fim Configuração Agente de IA (Etapa 3) ── */

/* ═══ Configuração Agente de IA — Fase 4 (Comportamento dos Agentes) ═══ */
.agentai-subtabs { display: flex; gap: 6px; margin: 4px 0 18px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.agentai-subtab {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 7px 14px; cursor: pointer; transition: background .15s, color .15s;
}
.agentai-subtab:hover { background: var(--surf); color: var(--text); }
.agentai-subtab.active { color: var(--acc); background: var(--surf); border-color: var(--border); }

.agentai-bhv-notice {
  font-size: 12px; line-height: 1.5; color: var(--text);
  background: var(--surf); border: 1px solid var(--border); border-left: 3px solid var(--acc);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
}
.agentai-bhv-list { display: flex; flex-direction: column; gap: 10px; }
.agentai-bhv-empty { font-size: 12.5px; color: var(--muted); padding: 18px; text-align: center; }

.agentai-bhv-card { border: 1px solid var(--border); border-radius: var(--r-md, 12px); background: var(--card); overflow: hidden; }
.agentai-bhv-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; cursor: pointer; transition: background .14s;
}
.agentai-bhv-head:hover { background: var(--surf); }
.agentai-bhv-head-l { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.agentai-bhv-caret { color: var(--muted); font-size: 12px; transition: transform .18s var(--ease, ease); }
.agentai-bhv-card.agentai-bhv-open .agentai-bhv-caret { transform: rotate(90deg); }
.agentai-bhv-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.agentai-bhv-plans { display: inline-flex; gap: 4px; flex-shrink: 0; }

.agentai-plan-badge { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: .3px; text-transform: uppercase; }
.agentai-plan-starter { color: #2563eb; background: rgba(37, 99, 235, .12); }
.agentai-plan-pro { color: #7c3aed; background: rgba(124, 58, 237, .12); }
.agentai-plan-premium { color: #d97706; background: rgba(217, 119, 6, .14); }
.agentai-plan-off { opacity: .28; filter: grayscale(1); }

.agentai-bhv-body { padding: 4px 14px 16px; border-top: 1px solid var(--border); }
.agentai-bhv-desc { font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.agentai-bhv-field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; }
.agentai-bhv-prompt { min-height: 96px; resize: vertical; font-family: inherit; line-height: 1.5; }
.agentai-bhv-field textarea.adm-input { resize: vertical; font-family: inherit; line-height: 1.5; }
.agentai-bhv-row2 { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: start; }
.agentai-bhv-plans-ck { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text); padding-top: 6px; }
.agentai-bhv-plans-ck label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.agentai-bhv-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
@media (max-width: 640px) { .agentai-bhv-row2 { grid-template-columns: 1fr; } }
/* ── fim Comportamento dos Agentes (Fase 4) ── */

/* ═══ Fase 5A — Acessos visuais dos agentes + modal placeholder ═══ */
.agent-access-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.agent-access-bar-modal { margin: 8px 0 12px; }
.agent-access {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--text); background: var(--card); border: 1px solid var(--border);
  border-radius: 9px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.agent-access:hover { background: var(--surf); border-color: var(--acc); box-shadow: var(--sh-sm, 0 1px 2px rgba(0, 0, 0, .05)); }
.agent-access:active { transform: translateY(1px); }
.agent-access-ico { flex-shrink: 0; color: var(--acc); }
.agent-access-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; color: var(--muted); background: var(--surf); border: 1px solid var(--border);
}
.wa-acc.wa-acc-agent { color: var(--muted); background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .22); }
.wa-acc.wa-acc-agent:hover { color: var(--text); }
.agent-access-soon { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 1px 5px; border-radius: 999px; background: rgba(245, 158, 11, .14); color: #b45309; margin-left: 2px; }

/* Modal placeholder dos agentes */
.agent-ph-modal { position: fixed; inset: 0; z-index: 12000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .55); }
.agent-ph-box { width: min(440px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); box-shadow: var(--sh-xl, 0 20px 50px rgba(0, 0, 0, .3)); overflow: hidden; }
.agent-ph-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; }
.agent-ph-title-wrap { display: flex; align-items: center; gap: 11px; }
.agent-ph-ico { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--surf); font-size: 19px; }
.agent-ph-title { font-size: 15px; font-weight: 800; color: var(--text); }
.agent-ph-badges { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.agent-ph-badge-suggest { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; color: #7c3aed; background: rgba(124, 58, 237, .12); }
.agent-ph-badge-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--muted); background: var(--surf); border: 1px solid var(--border); }
.agent-ph-close { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 13px; }
.agent-ph-close:hover { background: var(--surf); color: var(--text); }
.agent-ph-body { padding: 0 18px 6px; }
.agent-ph-desc { font-size: 13px; color: var(--text); line-height: 1.55; margin: 4px 0 12px; }
.agent-ph-msg { font-size: 12px; color: var(--muted); line-height: 1.55; background: var(--surf); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.agent-ph-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 18px 18px; }
/* ── fim Fase 5A ── */

/* ═══ Agentes de IA — card premium unificado + modal premium ═══ */
.agent-premium-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 22px; }
.agent-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; margin: 0 0 22px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-sm, 0 1px 2px rgba(0, 0, 0, .05));
  transition: border-color .16s, box-shadow .16s, transform .12s;
  overflow: hidden;
}
.agent-premium-grid .agent-card { margin: 0; }
.agent-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity: .45;
}
.agent-card:hover { border-color: var(--acc); box-shadow: var(--sh-md, 0 6px 18px rgba(0, 0, 0, .08)); transform: translateY(-1px); }
.agent-card.agent-card-soon { opacity: .82; }

.agent-card-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agent-card-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; color: var(--acc);
  background: rgba(245, 158, 11, .12);
  background: color-mix(in srgb, var(--acc) 14%, transparent);
}
.agent-card-title { font-size: 14.5px; font-weight: 800; color: var(--text); letter-spacing: -.2px; margin-right: auto; }
.agent-card-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; color: #7c3aed; background: rgba(124, 58, 237, .12); white-space: nowrap; }
.agent-card-badge-plan { color: #2563eb; background: rgba(37, 99, 235, .12); }
.agent-card-badge-plan.plan-pro { color: #7c3aed; background: rgba(124, 58, 237, .12); }
.agent-card-badge-plan.plan-premium { color: #d97706; background: rgba(217, 119, 6, .14); }
.agent-card-status { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; color: var(--muted); background: var(--surf); border: 1px solid var(--border); white-space: nowrap; }
.agent-card-status-ready { color: #16a34a; background: rgba(22, 163, 74, .10); border-color: rgba(22, 163, 74, .28); }

.agent-card-subtitle { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.agent-card-benefits { display: flex; gap: 7px; flex-wrap: wrap; }
.agent-card-benefits span { font-size: 11px; font-weight: 600; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: var(--surf); border: 1px solid var(--border); }
.agent-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.agent-card-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: #07090f; background: var(--acc); border: 1px solid var(--acc);
  border-radius: 9px; padding: 8px 14px; cursor: pointer;
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.agent-card-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 4px 12px var(--acc-glow, rgba(245, 158, 11, .25)); }
.agent-card-btn-primary:active { transform: translateY(1px); }
.agent-card-btn-primary[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; }
.agent-card-btn-config {
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); background: transparent; border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 12px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.agent-card-btn-config:hover { background: var(--surf); color: var(--text); border-color: var(--muted2, var(--muted)); }
@media (max-width: 640px) { .agent-card-actions { flex-direction: column; align-items: stretch; } }

/* Modal premium */
.agent-modal-premium { box-shadow: var(--sh-xl, 0 24px 60px rgba(0, 0, 0, .35)); }
.agent-ph-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }
.agent-ph-col { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surf); }
.agent-ph-col-h { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.agent-ph-will .agent-ph-col-h { color: #16a34a; }
.agent-ph-wont .agent-ph-col-h { color: #dc2626; }
.agent-ph-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.agent-ph-col li { font-size: 11.5px; color: var(--text); line-height: 1.4; padding-left: 14px; position: relative; }
.agent-ph-will li::before { content: '✓'; position: absolute; left: 0; color: #16a34a; font-weight: 700; }
.agent-ph-wont li::before { content: '✕'; position: absolute; left: 0; color: #dc2626; font-weight: 700; }
@media (max-width: 520px) { .agent-ph-cols { grid-template-columns: 1fr; } }
/* ── fim card/modal Agentes de IA ── */

/* ═══ Agentes de IA — cards PRO (orientação de uso + contador de créditos) ═══ */
.agent-card-pro { gap: 12px; }
.agent-card-badge-ia { color: #0e7490; background: rgba(14, 116, 144, .12); }
[data-theme="light"] .agent-card-badge-ia { color: #0e7490; background: rgba(14, 116, 144, .10); }

.agent-card-guidance { display: flex; flex-direction: column; gap: 10px; }
.agent-block-h { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 5px; }
.agent-help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.agent-help-list li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.agent-help-list li::before { content: ''; position: absolute; left: 3px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }

.agent-card-details { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px dashed var(--border); }
.agent-when-use p, .agent-output-preview p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.agent-output-preview p { color: var(--text); background: var(--surf); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; }

/* Contador de créditos */
.agent-card-usage { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surf); display: flex; flex-direction: column; gap: 7px; }
.agent-usage-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.agent-usage-used { font-size: 12px; font-weight: 700; color: var(--text); }
.agent-usage-cost { font-size: 11.5px; color: var(--muted); }
.agent-usage-cost strong { color: var(--text); }
.agent-usage-reset { font-size: 11px; color: var(--muted); }
.agent-usage-bar { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; }
.agent-usage-bar > span { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--acc), var(--acc2, var(--acc))); transition: width .35s ease; }
.agent-usage-bar > span.agent-usage-mid { background: linear-gradient(90deg, #f59e0b, #f97316); }
.agent-usage-bar > span.agent-usage-high { background: linear-gradient(90deg, #f97316, #dc2626); }
.agent-card-usage.agent-usage-connected .agent-usage-used { color: var(--text); }

/* Botão "Entender uso" (ghost) */
.agent-card-btn-ghost { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: transparent; border: 1px dashed var(--border); border-radius: 9px; padding: 7px 12px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.agent-card-btn-ghost:hover { color: var(--text); border-color: var(--muted2, var(--muted)); background: var(--surf); }
.agent-card-btn-ghost[aria-expanded="true"] { color: var(--acc); border-color: var(--acc); border-style: solid; }
/* ── fim cards PRO Agentes de IA ── */

/* Botão "Refinar com IA" nos cards da Central de Objeções (abre o Objection Agent) */
.ocaf-ai-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #07090f; background: var(--acc); border: 1px solid var(--acc); border-radius: 9px; padding: 7px 12px; cursor: pointer; transition: filter .15s, transform .1s, box-shadow .15s; }
.ocaf-ai-btn:hover { filter: brightness(1.05); box-shadow: 0 4px 12px var(--acc-glow, rgba(245, 158, 11, .25)); }
.ocaf-ai-btn:active { transform: translateY(1px); }
/* ── fim Refinar com IA ── */

/* ═══ Etapa 1B — UX do modal dos agentes (arrastável + chat + cabeçalho de lead) ═══ */
#agent-ph-head { cursor: move; touch-action: none; }
.agent-ph-box { will-change: transform; }
.agent-ph-box.dragging { transition: none !important; user-select: none; box-shadow: var(--sh-xl, 0 24px 60px rgba(0, 0, 0, .45)); }

/* Cabeçalho "Orientações para: [lead]" */
.agent-ph-leadhdr { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text); background: var(--surf); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; }
.agent-ph-leadhdr strong { color: var(--acc); }
.agent-ph-leadhdr .agent-ph-leadhdr-sub { color: var(--muted); }

/* Ações do resultado (Copiar + extras como "Adicionar ao checklist") */
.agent-ph-result-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agent-ph-extra-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #07090f; background: var(--green, #16a34a); border: 1px solid var(--green, #16a34a); border-radius: 9px; padding: 8px 13px; cursor: pointer; transition: filter .15s, transform .1s; }
.agent-ph-extra-btn:hover { filter: brightness(1.06); }
.agent-ph-extra-btn:active { transform: translateY(1px); }
.agent-ph-extra-btn[disabled] { opacity: .55; cursor: default; filter: grayscale(.3); }

/* Chat com o agente (Objection) */
.agent-ph-chat { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.agent-ph-chat-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--acc); }
.agent-ph-chat-input { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; font-size: 13px; line-height: 1.45; color: var(--text); background: var(--surf); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.agent-ph-chat-input:focus { outline: none; border-color: var(--acc); }
.agent-ph-center-btn { padding-left: 10px; padding-right: 10px; }

@media (max-width: 640px) {
  #agent-ph-head { cursor: default; touch-action: auto; }
  .agent-ph-center-btn { display: none; }
  .agent-ph-box { transform: none !important; }   /* mobile: sempre centralizado */
}
/* Botão "✨ IA" por lead no módulo Documentação/PAC (abre o Documentation Agent) */
.doc-ia-btn { display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); border: 1px solid var(--acc); border-radius: 8px; padding: 4px 9px; cursor: pointer; transition: filter .15s, transform .1s; }
.doc-ia-btn:hover { filter: brightness(1.08); }
.doc-ia-btn:active { transform: translateY(1px); }
/* ── fim Etapa 1B modal UX ── */

/* ═══ Modal dos agentes — leitura confortável (header/rodapé fixos, corpo rolável) ═══ */
.agent-ph-box { display: flex; flex-direction: column; max-height: 88vh; }
.agent-ph-head, .agent-ph-foot { flex-shrink: 0; }
.agent-ph-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.agent-ph-foot { flex-wrap: wrap; }

/* Portão de repetição do Dashboard Agent */
.agent-ph-gate { margin-top: 6px; background: var(--surf); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.agent-ph-gate-q { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.agent-ph-gate-btns { display: flex; flex-direction: column; gap: 8px; }
.agent-ph-gate-btns button { width: 100%; justify-content: center; }
.agent-ph-gate-note { font-size: 12.5px; color: var(--text); line-height: 1.5; }

/* Checklist estruturado (lista de tarefas sugeridas) */
.agent-ph-checklist { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surf); }
.agent-ph-checklist-h { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--acc); margin-bottom: 7px; }
.agent-ph-checklist-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.agent-ph-checklist-list li { position: relative; padding-left: 18px; font-size: 12.5px; line-height: 1.4; color: var(--text); }
.agent-ph-checklist-list li::before { content: '☐'; position: absolute; left: 0; color: var(--acc); }

/* Ações fixas no rodapé (Copiar / Adicionar ao checklist) — alinhadas com os demais botões */
.agent-ph-foot .agent-ph-extra-btn { margin-top: 0; }
.agent-ph-foot { align-items: center; }
/* ── fim modal UX agentes ── */

/* ═══ Capa/Landing — marca IMOBPILOT + selo BETA ═══ */
.lg-brand { display: inline-flex; align-items: center; gap: 12px; margin: 0 auto 22px; animation: ajudaReveal .8s cubic-bezier(.22, 1, .36, 1) both; }
.lg-brand-logo { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(145deg, #ffd84d, #f5c518); box-shadow: 0 6px 18px rgba(245, 197, 24, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.lg-brand-name { font-size: clamp(22px, 3.4vw, 30px); font-weight: 900; letter-spacing: 1.5px; color: #fff; line-height: 1; }
.lg-brand-beta { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #07090f; background: linear-gradient(145deg, #ffd84d, #f5c518); padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(245, 197, 24, .35); align-self: flex-start; margin-top: 2px; }
@media (max-width: 640px) {
  .lg-brand { gap: 10px; margin-bottom: 18px; }
  .lg-brand-logo { width: 34px; height: 34px; border-radius: 10px; }
  .lg-brand-name { font-size: 20px; letter-spacing: 1px; }
  .lg-brand-beta { font-size: 10px; padding: 2px 7px; }
}
/* ── fim marca IMOBPILOT ── */

/* ═══════════════════════════════════════════════════════════════════
   Agentes de IA — REDESIGN "Swiss Minimal Pro" (ui-ux-pro-max)
   Apenas visual. Override por especificidade (.agent-card-pro). Não muda markup/lógica.
   Direção: superfície neutra, borda fina, elevação sutil, acento dourado CONTIDO,
   ícones de linha monocromáticos, badges sóbrios, microinterações discretas.
   ═══════════════════════════════════════════════════════════════════ */

/* Card: respiro generoso, borda fina, elevação suave; remove a barra dourada de topo */
.agent-card.agent-card-pro {
  gap: 14px;
  padding: 20px 20px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .05);
  transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease), transform .2s var(--ease, ease);
}
.agent-card.agent-card-pro::before { content: none; }      /* tira o gradiente dourado de topo (cara de "ferramenta IA") */
.agent-card.agent-card-pro:hover {
  border-color: var(--muted2, var(--muted));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}
.agent-card.agent-card-pro.agent-card-soon { opacity: .9; }
.agent-card.agent-card-pro.agent-card-soon:hover { transform: none; }

/* Ícone NEUTRO (não dourado) + stroke fino consistente */
.agent-card-pro .agent-card-icon {
  width: 36px; height: 36px; border-radius: 9px;
  color: var(--muted); background: var(--surf); border: 1px solid var(--border);
  transition: color .2s, border-color .2s;
}
.agent-card-pro:hover .agent-card-icon { color: var(--text); border-color: var(--muted2, var(--muted)); }
.agent-card-pro .agent-card-icon svg { stroke-width: 1.75; }

/* Título / subtítulo: hierarquia clara, tabular onde couber */
.agent-card-pro .agent-card-title { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.agent-card-pro .agent-card-subtitle { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Badges sóbrios — "IA Assistiva" vira ghost discreto; plano outline; status semântico */
.agent-card-pro .agent-card-badge-ia {
  color: var(--muted); background: transparent; border: 1px solid var(--border);
  font-weight: 600; letter-spacing: .4px;
}
.agent-card-pro .agent-card-badge-plan {
  color: var(--muted); background: transparent; border: 1px solid var(--border); font-weight: 700;
}
.agent-card-pro .agent-card-badge-plan.plan-pro { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 42%, var(--border)); background: transparent; }
.agent-card-pro .agent-card-badge-plan.plan-premium { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 55%, var(--border)); background: transparent; }
.agent-card-pro .agent-card-status { font-weight: 600; border: 1px solid var(--border); }
.agent-card-pro .agent-card-status-ready { color: #16a34a; background: color-mix(in srgb, #16a34a 10%, transparent); border-color: color-mix(in srgb, #16a34a 28%, transparent); }
.agent-card-pro.agent-card-soon .agent-card-status { color: var(--muted); background: var(--surf); border-color: var(--border); }

/* Guidance: cabeçalhos discretos, bullets neutros (sem dourado) */
.agent-card-pro .agent-block-h { color: var(--muted2, var(--muted)); letter-spacing: .5px; }
.agent-card-pro .agent-help-list li { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.agent-card-pro .agent-help-list li::before { background: var(--muted); }
.agent-card-pro .agent-card-details { border-top-color: var(--border); }

/* Contador de créditos: track neutro, números tabulares (fill dourado já é sóbrio) */
.agent-card-pro .agent-card-usage { border-radius: 11px; }
.agent-card-pro .agent-usage-bar { height: 6px; background: var(--border); }
.agent-card-pro .agent-usage-used, .agent-card-pro .agent-usage-reset { font-variant-numeric: tabular-nums; }

/* Ações: 1 CTA primário dourado, secundários neutros; microinteração discreta */
.agent-card-pro .agent-card-btn-primary { border-radius: 9px; font-weight: 700; box-shadow: none; transition: filter .15s, transform .1s, box-shadow .15s; }
.agent-card-pro .agent-card-btn-primary:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--acc) 22%, transparent); }
.agent-card-pro .agent-card-btn-config, .agent-card-pro .agent-card-btn-ghost { color: var(--muted); border-color: var(--border); border-radius: 9px; }
.agent-card-pro .agent-card-btn-config:hover, .agent-card-pro .agent-card-btn-ghost:hover { color: var(--text); border-color: var(--muted2, var(--muted)); background: var(--surf); }

/* Acessibilidade: respeita reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .agent-card.agent-card-pro, .agent-card.agent-card-pro:hover { transition: none; transform: none; }
}
/* ── fim redesign Swiss Minimal Pro ── */

/* ═══════════════════════════════════════════════════════════════════════════
   FUNDAÇÃO DE TEMAS — Fase A (ui-ux-pro-max)
   Tokens semânticos claro/escuro + aliasing legado→novo. Anexado no FIM:
   vence os blocos :root anteriores (inclui o duplicado) por ordem de origem.
   NÃO altera markup/lógica. Reversível: basta remover este bloco.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* superfícies (escuro em camadas, sem preto puro) */
  --bg: #070B14; --bg-soft: #0B1020;
  --surface: #111827; --surface-soft: #151C2B; --surface-elevated: #1A2233; --surface-overlay: #0F172A;
  --border: rgba(148, 163, 184, .18); --border-strong: rgba(148, 163, 184, .28);
  /* texto (contraste reforçado) */
  --text: #F8FAFC; --text-body: #E2E8F0; --text-muted: #AAB7CC; --text-soft: #7C8AA5;
  /* marca âmbar (premium, não gritante) + on-primary escuro */
  --primary: #FACC15; --primary-hover: #F59E0B; --primary-soft: rgba(250, 204, 21, .12); --primary-border: rgba(250, 204, 21, .28); --on-primary: #0F172A;
  /* semânticos */
  --success: #22C55E; --success-soft: rgba(34, 197, 94, .12);
  --danger: #FB7185; --danger-soft: rgba(251, 113, 133, .12);
  --warning: #F59E0B; --warning-soft: rgba(245, 158, 11, .12);
  --info: #60A5FA; --info-soft: rgba(96, 165, 250, .12);
  --purple: #A78BFA; --purple-soft: rgba(167, 139, 250, .12);
  /* sombras + focus por tema */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .6);
  --focus-ring: 0 0 0 3px rgba(250, 204, 21, .35);
  /* ALIASES legado → novo (atualiza todo o app sem editar componentes) */
  --surf: var(--bg-soft);
  --card: var(--surface);
  --card2: var(--surface-elevated);
  --borderL: rgba(148, 163, 184, .10);
  --muted: var(--text-muted);
  --muted2: var(--text-soft);
  --acc: var(--primary);
  --acc2: var(--primary-hover);
  --acc-glow: rgba(250, 204, 21, .20);
  --green: var(--success);
  --red: var(--danger);
  --blue: var(--info);
  --brand: var(--primary); --brand-soft: var(--primary-soft); --brand-border: var(--primary-border);
  /* escala de sombra legada → nova (profundidade premium nos cards/modais) */
  --shadow: var(--shadow-md);
  --sh-sm: var(--shadow-sm); --sh-md: var(--shadow-md); --sh-lg: var(--shadow-lg); --sh-xl: var(--shadow-lg);
}
html[data-theme="light"],
body[data-theme="light"] {
  --bg: #F8FAFC; --bg-soft: #F1F5F9;
  --surface: #FFFFFF; --surface-soft: #F8FAFC; --surface-elevated: #FFFFFF; --surface-overlay: #FFFFFF;
  --border: #E2E8F0; --border-strong: #CBD5E1;
  --text: #0F172A; --text-body: #334155; --text-muted: #64748B; --text-soft: #94A3B8;
  --primary: #F59E0B; --primary-hover: #D97706; --primary-soft: #FFF7ED; --primary-border: #FDBA74; --on-primary: #0F172A;
  --success: #16A34A; --success-soft: #DCFCE7;
  --danger: #DC2626; --danger-soft: #FEE2E2;
  --warning: #D97706; --warning-soft: #FEF3C7;
  --info: #2563EB; --info-soft: #DBEAFE;
  --purple: #7C3AED; --purple-soft: #EDE9FE;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, .08);
  --shadow-lg: 0 18px 50px rgba(15, 23, 42, .10);
  --focus-ring: 0 0 0 3px rgba(245, 158, 11, .30);
  --surf: var(--bg-soft);
  --card: var(--surface);
  --card2: var(--surface-soft);
  --borderL: #EEF2F6;
  --muted: var(--text-muted);
  --muted2: var(--text-soft);
  --acc: var(--primary);
  --acc2: var(--primary-hover);
  --acc-glow: rgba(245, 158, 11, .14);
  --green: var(--success);
  --red: var(--danger);
  --blue: var(--info);
  --brand: var(--primary); --brand-soft: var(--primary-soft); --brand-border: var(--primary-border);
  --shadow: var(--shadow-md);
  --sh-sm: var(--shadow-sm); --sh-md: var(--shadow-md); --sh-lg: var(--shadow-lg); --sh-xl: var(--shadow-lg);
}
/* foco visível premium (acessibilidade AA) — outline não conflita com a sombra dos elementos */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* transição suave ao alternar tema (sem flash) */
body, .sidebar, .topbar, .card, .modal, .agent-card, .agent-ph-box {
  transition: background-color .25s var(--ease, ease), border-color .25s var(--ease, ease), color .25s var(--ease, ease);
}
@media (prefers-reduced-motion: reduce) {
  body, .sidebar, .topbar, .card, .modal, .agent-card, .agent-ph-box { transition: none; }
}
/* ── fim fundação de temas (Fase A) ── */

/* ═══════════════════════════════════════════════════════════════════════════
   REFINO DE COMPONENTES — Fase B (ui-ux-pro-max)
   Override escopado (vence por ordem de origem). Só visual; usa tokens da Fase A.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inputs / selects / textarea — fundo por TEMA, borda visível, foco premium ── */
.inp, .sel, .minp, .msel, .mtxt, .adm-input, .adm-select, .di-busca-inp, .camp-lead-select, .comm-sim-field input, .comm-sim-field select {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  transition: border-color .16s var(--ease, ease), box-shadow .16s var(--ease, ease), background-color .16s var(--ease, ease);
}
.inp::placeholder, .minp::placeholder, .mtxt::placeholder, .adm-input::placeholder, .di-busca-inp::placeholder { color: var(--text-soft); opacity: 1; }
.inp:focus, .sel:focus, .minp:focus, .msel:focus, .mtxt:focus, .adm-input:focus, .adm-select:focus, .di-busca-inp:focus, .camp-lead-select:focus {
  outline: none;
  border-color: var(--primary-border);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}
.inp:disabled, .minp:disabled, .msel:disabled, .mtxt:disabled, .adm-input:disabled, .adm-select:disabled {
  opacity: .55; cursor: not-allowed; background: var(--bg-soft);
}

/* ── Botões — estados premium consistentes (primário/secundário/danger) ── */
.btn-pri, .adm-btn-primary {
  background: var(--primary); color: var(--on-primary);
  border: 1px solid var(--primary); box-shadow: var(--shadow-sm); font-weight: 700;
  transition: background-color .16s var(--ease, ease), border-color .16s var(--ease, ease), transform .1s var(--ease, ease), box-shadow .16s var(--ease, ease);
}
.btn-pri:hover, .adm-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-pri:active, .adm-btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-pri:disabled, .adm-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.2); }
.btn-sec, .adm-btn-secondary {
  background: var(--surface-soft); color: var(--text-body); border: 1px solid var(--border);
  transition: background-color .16s var(--ease, ease), border-color .16s var(--ease, ease), color .16s var(--ease, ease);
}
.btn-sec:hover, .adm-btn-secondary:hover { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.adm-btn-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent); }
.adm-btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ── Badges/chips — semânticos e discretos ── */
.badge { border-radius: 999px; letter-spacing: .2px; }
.chip { border-radius: 999px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text-body); }
.chip:hover { border-color: var(--border-strong); background: var(--surface); }

/* ── WhatsApp flutuante — verde controlado, integrado nos 2 temas (sem glow gritante) ── */
.dashboard-wa-float {
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, #25d366 40%, transparent);
  box-shadow: var(--shadow-md);
  color: #16a34a; backdrop-filter: none;
}
.dashboard-wa-float:hover { transform: scale(1.04); box-shadow: var(--shadow-lg); }
.dashboard-wa-float-name { color: var(--text); }
.dashboard-wa-float-sub { color: var(--text-muted); }
.dashboard-wa-float-ring { border-color: color-mix(in srgb, #25d366 28%, transparent); }

/* ── Funil/charts — barras com destaque âmbar contido, labels contrastados ── */
.di-bar { background: linear-gradient(180deg, var(--primary), var(--primary-hover)); }
.di-bar-lbl { color: var(--text-muted); }
.di-bar-val { color: var(--text); }

/* ── Estados vazios — discretos ── */
.di-pending-empty, .doc-empty, .empty-state, .leads-empty { color: var(--text-soft); }

/* ── Cards: profundidade premium consistente (já herdam tokens; reforço suave) ── */
.di-section, .di-pending-card { box-shadow: var(--shadow-sm); }
/* ── fim refino de componentes (Fase B) ── */

/* ═══════════════════════════════════════════════════════════════════════
   WA CONNECTION SCREEN — tokens + componentes
   Adapta dark ↔ light sem tocar no layout ou na lógica do QR Code.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --wa-card-bg:          #0d1120;
  --wa-card-bg-warn:     #110d08;
  --wa-card-main-bg:     #0a0d18;
  --wa-card-border:      rgba(255,255,255,0.06);
  --wa-card-border-main: rgba(255,255,255,0.08);
  --wa-card-border-warn: rgba(249,115,22,0.14);
  --wa-card-title:       #e2e8f0;
  --wa-card-title-warn:  #fed7aa;
  --wa-card-text:        #8892b0;
  --wa-card-text-warn:   #92400e;
  --wa-card-muted:       #475569;
  --wa-steps-bg:         #0a0d18;
  --wa-steps-border:     rgba(255,255,255,0.07);
  --wa-steps-label:      #374151;
  --wa-step-chevron:     #1e293b;
}
[data-theme="light"] {
  --wa-card-bg:          #ffffff;
  --wa-card-bg-warn:     #fff7ed;
  --wa-card-main-bg:     #ffffff;
  --wa-card-border:      #e2e8f0;
  --wa-card-border-main: #e2e8f0;
  --wa-card-border-warn: rgba(249,115,22,0.30);
  --wa-card-title:       #0f172a;
  --wa-card-title-warn:  #c2410c;
  --wa-card-text:        #334155;
  --wa-card-text-warn:   #9a3412;
  --wa-card-muted:       #64748b;
  --wa-steps-bg:         #f8fafc;
  --wa-steps-border:     #e2e8f0;
  --wa-steps-label:      #64748b;
  --wa-step-chevron:     #94a3b8;
}

.wa-idle-wrap { flex:1;display:flex;flex-direction:column;align-items:center;padding:28px 20px 48px;gap:20px;overflow-y:auto; }
.wa-idle-cols { display:flex;flex-wrap:wrap;gap:20px;width:100%;max-width:870px;align-items:flex-start; }

.wa-main-card {
  flex:0 0 290px;min-width:260px;
  background:var(--wa-card-main-bg);
  border:1px solid var(--wa-card-border-main);
  border-top:2px solid #10b981;
  border-radius:16px;padding:32px 26px;
  display:flex;flex-direction:column;align-items:center;gap:22px;
  box-shadow:0 8px 40px rgba(0,0,0,0.45);
}
[data-theme="light"] .wa-main-card { box-shadow:0 4px 24px rgba(0,0,0,0.08); }

.wa-main-card__title { font-size:16px;font-weight:800;color:var(--wa-card-title);margin:0 0 8px;letter-spacing:-0.02em;line-height:1.35;text-align:center; }
.wa-main-card__desc  { font-size:12px;color:var(--wa-card-text);line-height:1.65;margin:0;text-align:center; }
.wa-main-card__note  { font-size:10.5px;color:var(--wa-card-muted);margin:0; }

.wa-info-stack { flex:1 1 280px;min-width:260px;display:flex;flex-direction:column;gap:10px; }

.wa-info-card {
  background:var(--wa-card-bg);
  border:1px solid var(--wa-card-border);
  border-radius:10px;padding:13px 15px;
}
.wa-info-card--warn {
  background:var(--wa-card-bg-warn);
  border-color:var(--wa-card-border-warn);
}
[data-theme="light"] .wa-info-card { box-shadow:0 1px 4px rgba(0,0,0,0.06); }

.wa-info-card__head  { display:flex;align-items:center;gap:8px;margin-bottom:5px; }
.wa-info-card__title { font-size:12px;font-weight:700;color:var(--wa-card-title);line-height:1.3; }
.wa-info-card--warn .wa-info-card__title { color:var(--wa-card-title-warn); }
.wa-info-card__text  { margin:0;font-size:11.5px;color:var(--wa-card-text);line-height:1.6; }
.wa-info-card--warn .wa-info-card__text  { color:var(--wa-card-text-warn); }

.wa-steps-strip {
  width:100%;max-width:870px;
  background:var(--wa-steps-bg);
  border:1px solid var(--wa-steps-border);
  border-radius:14px;padding:20px 24px;
}
.wa-steps-label   { margin:0 0 16px;font-size:10px;color:var(--wa-steps-label);font-weight:700;letter-spacing:0.09em;text-transform:uppercase; }
.wa-steps-row     { display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px; }
.wa-step          { flex:1 1 150px;min-width:130px;display:flex;align-items:flex-start;gap:10px; }
.wa-step__title   { margin:0 0 2px;font-size:12px;font-weight:700;color:var(--wa-card-title);line-height:1.3; }
.wa-step__desc    { margin:0;font-size:10.5px;color:var(--wa-card-muted);line-height:1.45; }
.wa-step__chevron { display:flex;align-items:center;padding-top:6px;color:var(--wa-step-chevron);font-size:16px;font-weight:300;flex-shrink:0; }
/* ── fim WA connection screen ── */


/* ══════════════════════════════════════════════════════════════════════════
   SUBCAPA / HUB — Cards do Menu Principal dentro de #capa-ocaf
   Preserva fundo/animações da capa-ocaf. Apenas capa-inner é substituído.
══════════════════════════════════════════════════════════════════════════ */

/* Override do capa-inner para o hub de módulos */
#capa-ocaf .capa-hub {
  max-width: 1120px;
  align-items: stretch;
  text-align: left;
  padding: 48px 28px 80px;
}

/* ── Cabeçalho do hub ── */
.hub-header {
  text-align: center;
  margin-bottom: 52px;
}
/* ângulo animável do anel de luz (com fallback se @property não existir) */
@property --hub-ring-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.hub-badge {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 34px;
  border-radius: 999px;
  background: rgba(245,197,24,.08);
  border: 1px solid rgba(245,197,24,.24);
  color: #ffe07a;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 900;                 /* negrito premium em evidência */
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 28px;
  box-shadow: 0 0 40px rgba(245,197,24,.18), inset 0 0 16px rgba(245,197,24,.06);
  text-shadow: 0 0 20px rgba(245,197,24,.45);
}
/* ponto de status */
.hub-badge::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffe07a;
  box-shadow: 0 0 12px rgba(245,197,24,1);
  flex-shrink: 0;
  z-index: 1;
}
/* anel de luz girando em loop (borda iluminada) */
.hub-badge::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2.2px;
  background: conic-gradient(from var(--hub-ring-angle),
    rgba(245,197,24,0) 0deg,
    rgba(245,197,24,0) 210deg,
    rgba(245,197,24,.45) 268deg,
    #ffe9a3 296deg,
    #ffffff 308deg,
    #ffe9a3 320deg,
    rgba(245,197,24,.45) 348deg,
    rgba(245,197,24,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  animation: hubBadgeRing 3.4s linear infinite;
}
@keyframes hubBadgeRing {
  to { --hub-ring-angle: 360deg; }
}
.hub-title {
  font-size: clamp(29px, 4.4vw, 48px);
  font-weight: 800;
  color: #f6f8ff;
  line-height: 1.08;
  margin: 0 0 18px;
  letter-spacing: -.025em;
  text-wrap: balance;
  text-shadow: 0 1px 30px rgba(8,12,24,.6);
}
.hub-title b,
.hub-title .hub-title-accent {
  font-weight: 800;
  color: #f5c518;                    /* fallback */
  background: linear-gradient(110deg, #f5c518 0%, #ffe9a3 28%, #f59e0b 52%, #ffe9a3 74%, #f5c518 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: hubTitleShimmer 5.5s ease-in-out infinite;
}
@keyframes hubTitleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hub-sub {
  font-size: clamp(14px, 1.7vw, 16.5px);
  color: #b3bdd4;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  text-wrap: balance;
}

/* A Subcapa/Hub tem fundo premium SEMPRE escuro → texto claro nos 2 temas.
   Anula o "[data-theme=light] h1,h2,h3 { color:#0f172a }" global que
   escurecia os títulos da Subcapa, deixando-os ilegíveis no modo claro. */
[data-theme="light"] .hub-title      { color: #f6f8ff; }
[data-theme="light"] .hub-card-title { color: #f4f7ff; }
[data-theme="light"] .hub-sub        { color: #b3bdd4; }
[data-theme="light"] .hub-card-desc  { color: #97a1ba; }
[data-theme="light"] .hub-card-cta   { color: #f4f7ff; }
[data-theme="light"] .hub-block-label { color: rgba(255,255,255,.22); }

/* ── Blocos ── */
.hub-block {
  margin-bottom: 48px;
  width: 100%;
}
.hub-block-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.20);
  margin-bottom: 14px;
  padding-left: 2px;
}

/* ── Cabeçalho de seção (premium) ── */
.hub-block-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-left: 2px;
}
.hub-block-index {
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #f5c518;
  letter-spacing: .04em;
  padding: 4px 9px;
  border: 1px solid rgba(245,197,24,.32);
  border-radius: 7px;
  background: rgba(245,197,24,.08);
  flex-shrink: 0;
  line-height: 1;
}
.hub-block-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #f5c518;
  flex-shrink: 0;
}
.hub-block-ico svg { width: 16px; height: 16px; }
.hub-block-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #dde4f4;
  white-space: nowrap;
}
.hub-block-rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 24px;
  background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0));
}
.hub-block-count {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.42);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .02em;
}
@media (max-width: 480px) {
  .hub-block-name { letter-spacing: .1em; font-size: 12px; }
  .hub-block-count { display: none; }
}
/* Sub-capa sempre escura → mantém legível também no tema claro */
[data-theme="light"] .hub-block-name  { color: #dde4f4; }
[data-theme="light"] .hub-block-index { color: #f5c518; }
[data-theme="light"] .hub-block-count { color: rgba(255,255,255,.42); }

/* ── Grids ── */
.hub-grid {
  display: grid;
  gap: 22px;
  width: 100%;
}
.hub-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hub-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .hub-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .hub-grid-2,
  .hub-grid-3 { grid-template-columns: 1fr; }
  #capa-ocaf .capa-hub { padding: 32px 16px 60px; }
}

/* ── Cards (premium / referência cinematográfica) ──
   Acento por categoria via --hub-accent (R,G,B). Sempre dark (a Subcapa
   tem fundo premium independente do tema → consistência light/dark garantida). */
.hub-card {
  --hub-accent: 245,197,24;            /* fallback (amber) */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(18,24,46,.92) 0%, rgba(11,15,28,.96) 46%, rgba(7,10,20,.98) 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  padding: 26px 26px 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 232px;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease;
  box-shadow: 0 6px 26px rgba(0,0,0,.5);
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* leve gradiente interno (luz no topo) + keyline de acento no topo */
.hub-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(var(--hub-accent),.75), rgba(var(--hub-accent),.12) 58%, rgba(var(--hub-accent),0)) top left / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 38%);
  opacity: .85;
  pointer-events: none;
  z-index: 0;
  transition: opacity .28s ease;
}
.hub-card:hover::before,
.hub-card:focus-visible::before { opacity: 1; }
/* brilho colorido (canto inferior) — surge no hover/focus */
.hub-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -38%;
  width: 122%;
  height: 78%;
  transform: translateX(-50%);
  background: radial-gradient(60% 60% at 50% 100%, rgba(var(--hub-accent),.22), rgba(var(--hub-accent),0) 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}
.hub-card > * { position: relative; z-index: 1; }

.hub-card:hover,
.hub-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(var(--hub-accent),.45);
  box-shadow:
    0 22px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(var(--hub-accent),.20),
    0 18px 50px -22px rgba(var(--hub-accent),.55);
}
.hub-card:hover::after,
.hub-card:focus-visible::after { opacity: 1; }
.hub-card:focus-visible {
  box-shadow:
    0 0 0 3px rgba(var(--hub-accent),.45),
    0 22px 60px rgba(0,0,0,.6);
}
.hub-card:active { transform: translateY(-2px); }

/* Acentos por categoria */
.hub-card.accent-blue   { --hub-accent: 99,102,241; }
.hub-card.accent-green  { --hub-accent: 16,217,138; }
.hub-card.accent-purple { --hub-accent: 168,85,247; }
.hub-card.accent-amber  { --hub-accent: 245,197,24; }
.hub-card.accent-cyan   { --hub-accent: 34,211,238; }
.hub-card.accent-orange { --hub-accent: 249,115,22; }
.hub-card.accent-slate  { --hub-accent: 148,163,184; }

.hub-card-num {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.22);
  letter-spacing: .08em;
  z-index: 2;
}

/* Tags (pill + ícone) */
.hub-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  width: fit-content;
  line-height: 1;
}
.hub-tag svg { width: 13px; height: 13px; flex-shrink: 0; }
.hub-tag-blue   { background:rgba(99,102,241,.14);  color:#a5b4fc; border:1px solid rgba(99,102,241,.34); }
.hub-tag-green  { background:rgba(16,217,138,.13);  color:#34e3a8; border:1px solid rgba(16,217,138,.30); }
.hub-tag-purple { background:rgba(168,85,247,.15);  color:#c4a0fc; border:1px solid rgba(168,85,247,.34); }
.hub-tag-amber  { background:rgba(245,197,24,.13);  color:#f7d046; border:1px solid rgba(245,197,24,.32); }
.hub-tag-cyan   { background:rgba(34,211,238,.12);  color:#5fdcf0; border:1px solid rgba(34,211,238,.30); }
.hub-tag-orange { background:rgba(249,115,22,.13);  color:#fb923c; border:1px solid rgba(249,115,22,.32); }
.hub-tag-slate  { background:rgba(148,163,184,.13); color:#aab6c8; border:1px solid rgba(148,163,184,.30); }

/* Conteúdo do card */
.hub-card-title {
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 800;
  color: #f4f7ff;
  margin: 2px 0 0;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.hub-card-desc {
  font-size: 13.5px;
  color: #97a1ba;
  line-height: 1.62;
  margin: 0;
  flex: 1;
  max-width: 44ch;
}
.hub-card-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  margin: 6px 0 2px;
}
.hub-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
}
.hub-card-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hub-card-cta {
  font-size: 14px;
  font-weight: 700;
  color: #f4f7ff;
  letter-spacing: -.005em;
}
.hub-card-cta-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,.42);
  letter-spacing: .005em;
}
.hub-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #e7ecf7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s, transform .2s, color .2s;
}
.hub-arrow svg { width: 17px; height: 17px; }
.hub-card:hover .hub-arrow,
.hub-card:focus-visible .hub-arrow {
  background: rgba(var(--hub-accent),.16);
  border-color: rgba(var(--hub-accent),.55);
  color: #fff;
  transform: translateX(4px);
}
/* Entrada em cascata (stagger). 'backwards' aplica o estado inicial durante o
   delay (sem flash) e devolve o estilo normal ao fim (hover continua funcionando). */
@keyframes hubCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hub-grid .hub-card {
  animation: hubCardIn .52s cubic-bezier(.22,.61,.36,1) backwards;
}
.hub-grid .hub-card:nth-child(1) { animation-delay: .04s; }
.hub-grid .hub-card:nth-child(2) { animation-delay: .10s; }
.hub-grid .hub-card:nth-child(3) { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .hub-card, .hub-arrow, .hub-card::after, .hub-card::before { transition: none; }
  .hub-card:hover, .hub-card:focus-visible { transform: none; }
  .hub-grid .hub-card { animation: none; }
  .hub-badge::after,
  .hub-title b,
  .hub-title .hub-title-accent { animation: none; }
}

/* ── Rodapé do hub ── */
.hub-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  width: 100%;
}
.hub-footer-link {
  font-size: 11.5px;
  color: rgba(255,255,255,.26);
  text-decoration: none;
  transition: color .18s;
}
.hub-footer-link:hover { color: rgba(255,255,255,.50); }
.hub-footer-sep { color: rgba(255,255,255,.14); font-size: 11px; }

/* ══════════════════════════════════════════════════════════════════════════
   PLACEHOLDERS — Locação Pro e Treinamentos
══════════════════════════════════════════════════════════════════════════ */
.eco-placeholder-module {
  position: fixed;
  inset: 0;
  z-index: 9100;
  overflow-y: auto;
  background: radial-gradient(ellipse at 20% 30%, rgba(78,80,240,.08) 0%, transparent 50%), #020408;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eco-ph-inner {
  position: relative;
  max-width: 580px;
  width: 100%;
  margin: 0 auto;
  padding: 56px 32px 48px;
  text-align: center;
}
.eco-voltar-btn {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: #8892b0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.eco-voltar-btn:hover {
  background: rgba(245,197,24,.10);
  border-color: rgba(245,197,24,.30);
  color: #f5c518;
}
.eco-ph-icon  { font-size: 54px; margin-bottom: 18px; line-height: 1; }
.eco-ph-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  background: rgba(245,197,24,.12);
  border: 1px solid rgba(245,197,24,.25);
  color: #f5c518;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eco-ph-title {
  font-size: 26px;
  font-weight: 700;
  color: #eef2ff;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
.eco-ph-desc {
  font-size: 14px;
  color: #8892b0;
  line-height: 1.65;
  margin: 0 0 18px;
}
.eco-ph-info {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.32);
  font-size: 12.5px;
  margin-top: 4px;
}
.eco-ph-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 18px;
}
.eco-ph-cat {
  padding: 6px 15px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: #8892b0;
  font-size: 12.5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÃO GLOBAL "Menu" — aparece em todos os módulos quando sb-active
   Retorna ao capa-ocaf via voltarMenuPrincipal()
══════════════════════════════════════════════════════════════════════════ */
/* O botão "Menu" agora vive DENTRO da sidebar como item de navegação
   (.sb-item.sb-back). Some na Subcapa e aparece nos módulos (body.sb-active). */
#hub-voltar-btn { display: none; }
body.sb-active #hub-voltar-btn { display: flex; }
.sb-item.sb-back { color: #f5c518; }
.sb-item.sb-back .sb-lbl { opacity: 1; }
.sb-item.sb-back:hover {
  background: rgba(245,197,24,.12);
  color: #f5c518;
}
.sb-back-sep { display: none; }
body.sb-active .sb-back-sep { display: block; }

/* Itens que pertencem à nova área (Subcapa/Menu Principal) NÃO aparecem
   no menu interno do CRM — continuam acessíveis pelos cards do Menu Principal. */
#sb .sb-item[data-sb="ocaf"],
#sb .sb-item[data-sb="ia"],
#sb .sb-item[data-sb="manual"],
#sb .sb-item[data-sb="ajuda"] { display: none !important; }

/* ── Sidebar refinada: ícones SVG unificados, contraste, grupos ── */
#sb .sb-icon svg { width: 19px; height: 19px; display: block; }
#sb .sb-item        { color: rgba(255,255,255,.55); }   /* +contraste (era .30) */
#sb .sb-item:hover  { color: rgba(255,255,255,.92); }
#sb .sb-item.active { color: #f5c518; }
#sb .sb-item.sb-wa        { color: rgba(37,211,102,.62); }
#sb .sb-item.sb-wa:hover  { color: #25d366; }
#sb .sb-item.sb-admin     { background: rgba(245,197,24,.06); }

/* Rótulos de grupo (substituem as linhas "apagadas") */
.sb-group {
  width: 100%;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.34);
  margin: 13px 0 3px;
  user-select: none;
  flex-shrink: 0;
}
#sb .sb-font-ctrl { margin-top: 4px; }

/* Badge BETA mais polido */
.sb-brand-badge {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 5px;
  background: rgba(245,197,24,.16);
  color: #f5c518;
  vertical-align: middle;
}

/* Mobile (bottom nav): rótulos de grupo não cabem na barra inferior */
@media (max-width: 767px) {
  .sb-group { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD — KPIs estilo SaaS (Fase A)
   Superfície neutra + 1 acento mínimo (dot). Cor só com significado.
   Usa tokens de tema (--card/--border/--text) → consistente light/dark.
════════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 15px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.kpi-card:hover {
  border-color: var(--kpi-accent);
  border-color: color-mix(in srgb, var(--kpi-accent) 45%, var(--border));
  box-shadow: 0 6px 22px rgba(15,23,42,.07);
  transform: translateY(-1px);
}
.kpi-card-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.kpi-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kpi-accent, var(--muted));
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpi-accent) 16%, transparent);
}
.kpi-card-val {
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi-card--alert .kpi-card-val { color: var(--danger); }
.kpi-card-sub {
  font-size: 10.5px;
  color: var(--muted2);
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD — Funil "Taxa de Conversão" (Fase B)
   Rampa monocromática (1 tom, opacidade por etapa) em vez de arco-íris.
   Trilho usa token de tema → visível em light e dark.
════════════════════════════════════════════════════════════ */
.funnel-list {
  --funnel-accent: var(--chart);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.funnel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.funnel-name {
  min-width: 140px;
  color: var(--muted);
  font-size: 11px;
}
.funnel-track {
  flex: 1;
  background: var(--border);
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}
.funnel-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--funnel-accent);
  transition: width 1s ease;
}
.funnel-val {
  min-width: 40px;
  text-align: right;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD/TABELAS — Badges estilo SaaS (Fase C)
   Dot + texto dessaturado (sem emoji). Cor só no dot; texto e fundo
   suavizados via color-mix com o tema → legível em light e dark.
════════════════════════════════════════════════════════════ */
.badge-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  vertical-align: middle;
  /* fallback neutro caso color-mix não exista */
  color: var(--text);
  background: rgba(127,127,127,.08);
  border: 1px solid rgba(127,127,127,.18);
  /* tema-aware: tinge suavemente a partir do --badge-c */
  color: color-mix(in srgb, var(--badge-c) 62%, var(--text));
  background: color-mix(in srgb, var(--badge-c) 9%, transparent);
  border-color: color-mix(in srgb, var(--badge-c) 24%, transparent);
}
.badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--badge-c, currentColor);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   META ADS — Modo Corretor / Modo Administrador
════════════════════════════════════════════════════════════ */
.meta-view-switch {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 6px 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; width: fit-content;
}
.meta-view-switch-lbl { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .03em; padding-left: 6px; }
.meta-view-btn {
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: transparent; border: none; border-radius: 999px;
  padding: 6px 14px; cursor: pointer; transition: .16s;
}
.meta-view-btn:hover { color: var(--text); }
.meta-view-btn.active { background: var(--acc); color: #1a1400; }

.meta-cc { display: none; margin-bottom: 22px; }
body.meta-corretor .meta-cc { display: block; }
body.meta-corretor .meta-tab--tech { display: none !important; }
body.meta-corretor #meta-intro-tech { display: none; }

.meta-cc-card {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 30px 26px; text-align: center;
  max-width: 620px; margin: 0 auto; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.meta-cc-card.ok   { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: color-mix(in srgb, var(--success) 5%, var(--card)); }
.meta-cc-card.warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.meta-cc-card.err  { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.meta-cc-ico { font-size: 34px; line-height: 1; margin-bottom: 12px; }
.meta-cc-title { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.01em; margin: 0 0 8px; }
.meta-cc-sub { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 auto 20px; max-width: 460px; }
.meta-cc-btn {
  font-size: 14px; font-weight: 700; color: #1a1400; background: var(--acc);
  border: 1px solid transparent; border-radius: 10px; padding: 12px 24px;
  cursor: pointer; transition: .16s; min-height: 44px;
}
.meta-cc-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.meta-cc-btn.ghost  { background: transparent; border-color: var(--border); color: var(--text); }
.meta-cc-btn.ghost:hover { border-color: var(--acc); filter: none; }
.meta-cc-btn.danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); color: var(--danger); }
.meta-cc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.meta-cc-foot { font-size: 11.5px; color: var(--muted2); margin-top: 16px; line-height: 1.5; }
.meta-cc-sel {
  display: block; width: 100%; max-width: 380px; margin: 0 auto 16px;
  padding: 11px 13px; font-size: 13.5px; min-height: 44px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
}
.meta-cc-auto { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 9px; }
.meta-cc-spin {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block;
  border: 2px solid color-mix(in srgb, var(--acc) 30%, transparent);
  border-top-color: var(--acc); animation: metaCCspin .7s linear infinite;
}
@keyframes metaCCspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .meta-cc-spin { animation: none; } }

/* ════════════════════════════════════════════════════════════
   ONBOARDING GUIADO META ADS — journey vivo (auto-detecta o passo)
════════════════════════════════════════════════════════════ */
.meta-jr {
  max-width: 660px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 26px 26px 12px;
  box-shadow: var(--shadow-md, 0 12px 34px rgba(0,0,0,.22));
}
.meta-jr.is-complete { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); }
.meta-jr-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.meta-jr-ring {
  --pct: 0; position: relative; width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--acc) calc(var(--pct) * 1%), color-mix(in srgb, var(--acc) 14%, transparent) 0);
  transition: background .5s ease;
}
.meta-jr.is-complete .meta-jr-ring { background: conic-gradient(var(--success) 100%, var(--success) 0); }
.meta-jr-ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--card); }
.meta-jr-ring span {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 13.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
}
.meta-jr-head-txt h3 { font-size: 18.5px; font-weight: 800; color: var(--text); margin: 0 0 4px; letter-spacing: -.015em; }
.meta-jr-head-txt p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }

.meta-jr-steps { position: relative; }
.meta-jr-step { display: flex; gap: 14px; padding-bottom: 20px; }
.meta-jr-rail { position: relative; flex-shrink: 0; display: flex; justify-content: center; width: 34px; }
.meta-jr-step:not(:last-child) .meta-jr-rail::after {
  content: ""; position: absolute; top: 34px; bottom: -20px; left: 50%; transform: translateX(-50%);
  width: 2px; background: var(--border); transition: background .3s ease;
}
.meta-jr-step.is-done .meta-jr-rail::after { background: color-mix(in srgb, var(--success) 60%, var(--border)); }
.meta-jr-dot {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; flex-shrink: 0; z-index: 1;
  border: 2px solid var(--border); background: var(--card); color: var(--muted2);
  transition: border-color .22s, background .22s, color .22s, box-shadow .22s;
}
.meta-jr-dot svg { width: 16px; height: 16px; }
.meta-jr-step.is-active .meta-jr-dot {
  border-color: var(--acc); color: var(--acc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 16%, transparent);
}
.meta-jr-step.is-done .meta-jr-dot { border-color: var(--success); background: var(--success); color: #fff; }
.meta-jr-body { flex: 1; padding-top: 4px; min-width: 0; }
.meta-jr-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.meta-jr-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.meta-jr-step.is-pending .meta-jr-title,
.meta-jr-step.is-pending .meta-jr-desc { opacity: .5; }
.meta-jr-chip {
  font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.meta-jr-chip.jr-done   { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); }
.meta-jr-chip.jr-active { color: var(--acc);     background: color-mix(in srgb, var(--acc) 13%, transparent); }
.meta-jr-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 4px 0 0; }
.meta-jr-action { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.meta-jr-action .meta-cc-btn { padding: 9px 16px; font-size: 13px; min-height: 40px; }
.meta-jr-guide {
  width: 100%; margin-top: 10px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px 12px 30px;
}
.meta-jr-guide ol { margin: 0; padding-left: 4px; }
.meta-jr-guide li { font-size: 12.5px; color: var(--text); line-height: 1.95; }
.meta-jr-wait { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.meta-jr-foot { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; text-align: center; }
.meta-jr-link { background: none; border: none; color: var(--muted2); font-size: 12px; cursor: pointer; text-decoration: underline; }
.meta-jr-link:hover { color: var(--danger); }
@media (max-width: 480px) {
  .meta-jr { padding: 20px 16px 8px; }
  .meta-jr-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.meta-jr-demo {
  max-width: 660px; margin: 0 auto 12px; font-size: 12px; color: var(--muted);
  background: color-mix(in srgb, var(--acc) 7%, transparent);
  border: 1px dashed color-mix(in srgb, var(--acc) 35%, var(--border));
  border-radius: 12px; padding: 9px 14px; text-align: center; line-height: 1.5;
}
.meta-jr-demo.on { background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--text); }
.meta-jr-demo .meta-jr-link { color: var(--acc); }
.meta-jr.is-demo { box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 28%, transparent), var(--shadow-md, 0 12px 34px rgba(0,0,0,.22)); }
.meta-jr-extlink { display: inline-flex; align-items: center; margin-top: 10px; text-decoration: none; }
.meta-jr-expired {
  max-width: 660px; margin: 0 auto 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between;
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  border-radius: 14px; padding: 14px 18px;
}
.meta-jr-expired-txt { font-size: 13px; color: var(--text); line-height: 1.5; flex: 1 1 280px; }
.meta-jr-expired .meta-cc-btn { flex: 0 0 auto; }

/* ════════════════════════════════════════════════════════════
   LANDING HERO PRO — hero premium SaaS (sempre dark, autocontida)
════════════════════════════════════════════════════════════ */
.landing-hero-pro {
  --hero-bg: #070a14;
  --hero-surface: #0e1320;
  --hero-surface-2: #151b2b;
  --hero-border: rgba(255,255,255,.08);
  --hero-text: #f4f6fb;
  --hero-muted: #9aa3b8;
  --hero-yellow: #f5c518;
  --hero-orange: #fb923c;
  --hero-danger: #f4748b;
  --hero-green: #34d39a;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px clamp(18px, 5vw, 64px) 40px;
  background: var(--hero-bg);
  color: var(--hero-text);
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* fundo: gradiente sutil + grid quase imperceptível + brilho dourado discreto */
.hero-bg-pro {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(37,52,92,.45), transparent 55%),
    radial-gradient(90% 70% at 92% 96%, rgba(245,197,24,.10), transparent 60%),
    linear-gradient(180deg, #070a14 0%, #080b16 50%, #060810 100%);
}
.hero-bg-pro::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
}

/* ── Topbar ── */
.hero-topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto 44px;
}
.hero-brand { display: inline-flex; align-items: center; gap: 11px; }
.hero-brand-logo {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #ffd84a, #f5b818);
  box-shadow: 0 6px 18px rgba(245,197,24,.28);
}
.hero-brand-name { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.hero-brand-beta {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #1a1400;
  background: var(--hero-yellow); padding: 3px 8px; border-radius: 6px;
}
.hero-badge-top {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: #e7d9a6;
  background: rgba(245,197,24,.06);
  border: 1px solid rgba(245,197,24,.26);
  border-radius: 999px; padding: 8px 16px;
}
.hero-badge-dot { font-size: 13px; }

/* ── Shell 2 colunas ── */
.hero-shell {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.18fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  max-width: 1240px; margin: 0 auto;
}
.hero-copy { max-width: 560px; }
.hero-title {
  font-size: clamp(34px, 5.2vw, 62px); font-weight: 800; line-height: 1.05;
  letter-spacing: -.03em; color: #fff; margin: 0 0 22px; text-wrap: balance;
}
.hero-title-grad {
  background: linear-gradient(100deg, #ffd23f 0%, #fb923c 48%, #f4748b 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub-pro {
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7; color: #aab2c5;
  margin: 0 0 16px; max-width: 540px;
}
.hero-groq { color: var(--hero-yellow); font-weight: 700; }
/* frase de reforço (conversão) + nota de IA (substitui a linha técnica do GROQ) */
.hero-reforco { font-size: clamp(14.5px, 1.5vw, 17px); font-weight: 700; color: #fff; line-height: 1.5; letter-spacing: -.01em; margin: 0 0 22px; max-width: 540px; }
.hero-ia-note { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #c2cad8; margin: 0 0 30px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .045); }
.hero-ia-dot { color: var(--hero-yellow); font-size: 13px; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-btn-primary, .hero-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 700; min-height: 54px; padding: 0 26px;
  border-radius: 14px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s, border-color .18s;
  font-family: inherit;
}
.hero-btn-primary {
  color: #1a1400; border: none;
  background: linear-gradient(160deg, #ffd84a, #f5b818);
  box-shadow: 0 10px 30px -8px rgba(245,197,24,.5);
}
.hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(245,197,24,.6); }
.hero-btn-primary:active { transform: translateY(0); }
.hero-btn-arrow { transition: transform .18s ease; }
.hero-btn-primary:hover .hero-btn-arrow { transform: translateX(3px); }
.hero-btn-secondary {
  color: #eef1f8; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14);
}
.hero-btn-secondary:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.06); }
.hero-g-ico { flex-shrink: 0; }

/* erro de auth (preservado) — fica oculto até o JS exibir */
#lg-auth-error.hero-auth-error { display: none; align-items: flex-start; gap: 12px;
  background: rgba(244,116,139,.08); border: 1px solid rgba(244,116,139,.28); border-radius: 14px; padding: 16px 18px; }
#lg-auth-error.hero-auth-error[style*="flex"], #lg-auth-error.hero-auth-error.show { display: flex; }
.hero-auth-error .lg-auth-error-title { font-weight: 800; color: #f4748b; font-size: 14px; }
.hero-auth-error .lg-auth-error-msg { font-size: 12.5px; color: var(--hero-muted); line-height: 1.55; margin-top: 3px; }
.hero-auth-error .lg-auth-error-email { font-size: 12px; color: var(--hero-yellow); margin-top: 4px; }
.hero-auth-error .lg-auth-retry { margin-top: 10px; background: none; border: none; color: #f4748b; font-weight: 700; cursor: pointer; font-size: 13px; }

/* ── Mockup do CRM ── */
.hero-dashboard-preview { perspective: 1600px; }
.crm-preview-card {
  background: linear-gradient(165deg, #11151f 0%, #0c0f18 100%);
  border: 1px solid rgba(255,255,255,.09); border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03);
  transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin: left center;
  font-size: 11px; color: #cdd4e2;
}
.cpc-topbar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.015); }
.cpc-logo { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(160deg,#ffd84a,#f5b818); display: inline-flex; align-items: center; justify-content: center; }
.cpc-logo-name { font-weight: 800; font-size: 12px; color: #fff; letter-spacing: -.01em; }
.cpc-top-right { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.cpc-ico { color: #7d869b; font-size: 13px; display: inline-flex; }
.cpc-ico svg { width: 13px; height: 13px; }
.cpc-user { display: inline-flex; align-items: center; gap: 7px; }
.cpc-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(140deg,#3b82f6,#6366f1); color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.cpc-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.cpc-user-meta b { font-size: 10.5px; color: #eaeefb; }
.cpc-user-meta i { font-size: 8.5px; color: #7d869b; font-style: normal; }
.cpc-body { display: grid; grid-template-columns: 150px 1fr; }
.cpc-sidebar { display: flex; flex-direction: column; gap: 1px; padding: 12px 10px; border-right: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.012); }
.cpc-nav { display: flex; align-items: center; gap: 9px; font-size: 10.5px; color: #8a93a8; padding: 7px 9px; border-radius: 7px; white-space: nowrap; }
.cpc-nav svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .85; }
.cpc-nav.is-active { background: rgba(245,197,24,.12); color: #f5d046; font-weight: 700; }
.cpc-nav.is-active svg { opacity: 1; }
.cpc-main { padding: 14px 16px; min-width: 0; }
.cpc-h { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.cpc-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 12px; }
.cpc-kpi { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.cpc-kpi-lbl { font-size: 8.5px; color: #818aa0; }
.cpc-kpi-val { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; }
.cpc-kpi-delta { font-size: 8px; color: #34d39a; font-weight: 600; }
.cpc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.cpc-panel { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 11px; padding: 12px; }
.cpc-panel-h { font-size: 10.5px; font-weight: 700; color: #c7cedd; margin-bottom: 10px; }
.cpc-funnel { display: flex; flex-direction: column; gap: 11px; }
.cpc-fstage { display: grid; grid-template-columns: 62px 1fr 24px; align-items: center; gap: 10px; }
.cpc-fname { font-size: 9.5px; color: #9aa3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpc-ftrack { height: 8px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.cpc-fbar { display: block; height: 100%; border-radius: 5px; }
.cpc-fbar.f1 { background: linear-gradient(90deg,#3b82f6,#60a5fa); }
.cpc-fbar.f2 { background: linear-gradient(90deg,#14b8a6,#2dd4bf); }
.cpc-fbar.f3 { background: linear-gradient(90deg,#22c55e,#4ade80); }
.cpc-fbar.f4 { background: linear-gradient(90deg,#f97316,#fb923c); }
.cpc-fbar.f5 { background: linear-gradient(90deg,#e5466c,#f4748b); }
.cpc-fnum { font-size: 10px; color: #fff; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cpc-actlist, .cpc-scrlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cpc-actlist li { display: flex; align-items: center; gap: 9px; }
.cpc-act-ic { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.cpc-act-ic svg { width: 13px; height: 13px; }
.cpc-act-ic.ic-green  { color: #34d39a; background: rgba(52,211,154,.14); }
.cpc-act-ic.ic-blue   { color: #60a5fa; background: rgba(96,165,250,.14); }
.cpc-act-ic.ic-amber  { color: #f5c518; background: rgba(245,197,24,.14); }
.cpc-act-ic.ic-violet { color: #a78bfa; background: rgba(167,139,250,.14); }
.cpc-actlist b { display: block; font-size: 9.5px; color: #e4e9f5; font-weight: 600; }
.cpc-actlist i { font-size: 8px; color: #7d869b; font-style: normal; }
.cpc-scrlist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9.5px; color: #c2cad9; }
.cpc-tag { font-size: 7.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; }
.cpc-tag.sdr { color: #60a5fa; background: rgba(96,165,250,.16); }
.cpc-tag.closer { color: #fb923c; background: rgba(251,146,60,.16); }
.cpc-ia { display: flex; flex-direction: column; }
.cpc-ia-star { color: var(--hero-yellow); }
.cpc-ia-desc { font-size: 9.5px; color: #9aa3b8; line-height: 1.5; margin: 0 0 12px; }
.cpc-ia-btn { align-self: flex-start; font-size: 9.5px; font-weight: 700; color: #1a1400; background: var(--hero-yellow); padding: 7px 12px; border-radius: 8px; }

/* ── Faixa de métricas ── */
.hero-metrics {
  display: grid; grid-template-columns: repeat(4,1fr);
  max-width: 1240px; margin: 56px auto 0; padding: 24px clamp(14px,3vw,30px);
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px; box-shadow: 0 18px 50px -28px rgba(0,0,0,.6);
}
.hero-metric { text-align: center; padding: 0 18px; }
.hero-metric + .hero-metric { border-left: 1px solid rgba(255,255,255,.07); }
.hero-metric-val { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(160deg,#ffe27a,#f5b818); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-metric-lbl { font-size: 12px; color: #97a0b4; margin-top: 6px; line-height: 1.4; }

/* ── Tema claro: a hero é sempre dark; anula o [data-theme=light] h1/h2/h3 global ── */
[data-theme="light"] .landing-hero-pro,
[data-theme="light"] .landing-hero-pro .hero-title,
[data-theme="light"] .landing-hero-pro .cpc-h,
[data-theme="light"] .landing-hero-pro .cpc-kpi-val { color: #fff; }
[data-theme="light"] .landing-hero-pro .hero-brand-name,
[data-theme="light"] .landing-hero-pro .cpc-logo-name { color: #fff; }

/* ── Responsivo ── */
@media (max-width: 980px) {
  .hero-shell { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { max-width: 640px; margin: 0 auto; text-align: center; }
  .hero-sub-pro, .hero-reforco { margin-left: auto; margin-right: auto; }
  .hero-cta-row { justify-content: center; }
  .crm-preview-card { transform: none; }
  .hero-dashboard-preview { perspective: none; max-width: 620px; margin: 0 auto; }
  .hero-topbar { justify-content: center; }
}
@media (max-width: 560px) {
  .hero-cta-row { flex-direction: column; }
  .hero-btn-primary, .hero-btn-secondary { width: 100%; }
  .hero-metrics { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .hero-metric:nth-child(odd) { border-left: none; }
  .hero-metric:nth-child(3), .hero-metric:nth-child(4) { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); }
  .cpc-kpis { grid-template-columns: 1fr 1fr; }
  .cpc-body { grid-template-columns: 1fr; }
  .cpc-sidebar { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .cpc-nav { display: none; } .cpc-nav.is-active { display: inline-block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AGENTES DE IA — REPAGINAÇÃO "PREMIUM AAA" (2026-06-13; COMPACTADO 2026-06-13)
   Anexado no FIM: vence o bloco "Swiss Minimal Pro" por ordem do cascade.
   Direção: impacto + clareza, porém COMPACTO (cards menores a pedido do dono):
   tipografia reduzida ~25%, padding/ícone/botões menores, profundidade e brilho
   âmbar mantidos. Só visual — não muda markup/lógica/IDs.
   Usa apenas tokens (--primary, --surface-*, --text-*…): claro E escuro.
   Reversível: basta remover este bloco.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card: superfície em camadas + aurora âmbar sutil + profundidade premium ── */
.agent-card.agent-card-pro {
  gap: 12px;
  padding: 17px 18px 15px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 15px;
  background:
    radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 52%),
    radial-gradient(120% 80% at 0% 100%, color-mix(in srgb, var(--info, #60A5FA) 6%, transparent), transparent 55%),
    linear-gradient(162deg, var(--surface-elevated, var(--card2)), var(--surface, var(--card)));
  box-shadow:
    0 1px 0 0 color-mix(in srgb, #fff 6%, transparent) inset,
    0 18px 44px -22px rgba(0, 0, 0, .55),
    0 2px 8px -2px rgba(0, 0, 0, .28);
  transition: transform .26s var(--ease, cubic-bezier(.4,0,.2,1)), box-shadow .26s, border-color .26s;
}
/* fio de luz âmbar no topo (premium, contido) */
.agent-card.agent-card-pro::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; border: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 75%, transparent), transparent);
  opacity: .6; transition: opacity .26s;
}
.agent-card.agent-card-pro:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border-strong, var(--border)));
  box-shadow:
    0 1px 0 0 color-mix(in srgb, #fff 9%, transparent) inset,
    0 28px 60px -24px rgba(0, 0, 0, .62),
    0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent),
    0 10px 40px -12px color-mix(in srgb, var(--primary) 26%, transparent);
}
.agent-card.agent-card-pro:hover::before { opacity: 1; }
.agent-card.agent-card-pro.agent-card-soon { opacity: .92; }
.agent-card.agent-card-pro.agent-card-soon:hover { transform: none; }

/* ── Cabeçalho: ícone GRANDE com brilho âmbar + título grande ── */
.agent-card-pro .agent-card-header { gap: 10px; row-gap: 6px; }
.agent-card-pro .agent-card-icon {
  width: 40px; height: 40px; border-radius: 11px;
  color: var(--primary);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 60%),
    color-mix(in srgb, var(--primary) 10%, var(--surface, var(--card)));
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border));
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--primary) 50%, transparent), 0 1px 0 0 color-mix(in srgb,#fff 10%,transparent) inset;
  transition: transform .26s var(--ease, ease), box-shadow .26s, color .26s;
}
.agent-card-pro:hover .agent-card-icon {
  color: var(--primary); transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--primary) 65%, transparent), 0 1px 0 0 color-mix(in srgb,#fff 14%,transparent) inset;
}
.agent-card-pro .agent-card-icon svg { width: 19px; height: 19px; stroke-width: 2; }
.agent-card-pro .agent-card-title {
  font-size: 16px; font-weight: 800; letter-spacing: -.4px; color: var(--text);
  line-height: 1.18;
}

/* ── Badges: maiores, premium, com leitura clara nos 2 temas ── */
.agent-card-pro .agent-card-badge,
.agent-card-pro .agent-card-status { font-size: 9.5px; padding: 3px 9px; letter-spacing: .4px; }
.agent-card-pro .agent-card-badge-ia {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  font-weight: 700;
}
.agent-card-pro .agent-card-badge-plan {
  color: var(--info, #60A5FA);
  background: color-mix(in srgb, var(--info, #60A5FA) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--info, #60A5FA) 30%, transparent);
  font-weight: 800;
}
.agent-card-pro .agent-card-status-ready {
  color: var(--success, #22C55E);
  background: color-mix(in srgb, var(--success, #22C55E) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--success, #22C55E) 34%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #22C55E) 8%, transparent);
  font-weight: 800;
}

/* ── Subtítulo: maior, corpo legível ── */
.agent-card-pro .agent-card-subtitle {
  font-size: 12.5px; line-height: 1.5; color: var(--text-body, var(--text));
  font-weight: 450;
}

/* ── Faixa de benefícios (chips) — novo, premium ── */
.agent-card-pro .agent-card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-card-pro .agent-card-tags span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--text-body, var(--text));
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface, var(--card)));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}
.agent-card-pro .agent-card-tags span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 80%, transparent);
}

/* ── Guidance: cabeçalhos de seção com acento + listas GRANDES ── */
.agent-card-pro .agent-card-guidance { gap: 11px; }
.agent-card-pro .agent-guidance-cols { gap: 16px; }
.agent-card-pro .agent-block-h {
  font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--primary); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.agent-card-pro .agent-block-h::before {
  content: ''; width: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
}
.agent-card-pro .agent-help-list { gap: 6px; }
.agent-card-pro .agent-help-list li {
  font-size: 12.5px; line-height: 1.5; color: var(--text); font-weight: 500;
  padding-left: 18px;
}
.agent-card-pro .agent-help-list li::before {
  width: 6px; height: 6px; left: 3px; top: 7px;
  background: var(--primary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 70%, transparent);
}
.agent-card-pro .agent-steps-list {
  font-size: 12.5px; line-height: 1.5; color: var(--text-body, var(--muted));
  counter-reset: agstep; list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 7px;
}
.agent-card-pro .agent-steps-list li {
  position: relative; padding-left: 29px; margin: 0; min-height: 20px; display: flex; align-items: flex-start;
}
.agent-card-pro .agent-steps-list li::before {
  counter-increment: agstep; content: counter(agstep);
  position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--on-primary, #0F172A);
  background: linear-gradient(150deg, var(--primary), var(--primary-hover, var(--acc2, var(--primary))));
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--primary) 60%, transparent);
}
.agent-card-pro .agent-steps-list strong { color: var(--text); font-weight: 800; }

/* ── "Quando não acionar": callout premium maior ── */
.agent-card-pro .agent-no-trigger {
  font-size: 12px; line-height: 1.5; padding: 10px 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--warning, #F59E0B) 9%, var(--surface, var(--card)));
  border: 1px solid color-mix(in srgb, var(--warning, #F59E0B) 26%, var(--border));
  color: var(--text-body, var(--text)); gap: 11px;
}
.agent-card-pro .agent-no-trigger svg { width: 16px; height: 16px; color: var(--warning, #F59E0B); }
.agent-card-pro .agent-no-trigger strong { color: var(--text); }

/* ── Showcase "exemplo de resultado" (novo, sempre visível no SDR) ── */
.agent-card-pro .agent-showcase {
  border-radius: 12px; padding: 12px 13px;
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 60%),
    var(--surface-soft, var(--surf));
  border: 1px solid var(--border);
}
.agent-card-pro .agent-showcase-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text-soft, var(--muted2)); margin-bottom: 7px;
}
.agent-card-pro .agent-showcase-h svg { width: 14px; height: 14px; color: var(--primary); }
.agent-card-pro .agent-showcase-msg {
  font-size: 12.5px; line-height: 1.55; color: var(--text-body, var(--text));
  background: var(--surface, var(--card)); border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 10px; padding: 10px 12px; font-style: italic;
}
.agent-card-pro .agent-showcase-tail {
  margin-top: 7px; font-size: 11.5px; color: var(--text-soft, var(--muted)); display: flex; align-items: center; gap: 7px;
}
.agent-card-pro .agent-showcase-tail strong { color: var(--primary); font-weight: 800; font-style: normal; }

/* ── Créditos / uso: respiro maior ── */
.agent-card-pro .agent-card-usage { border-radius: 11px; padding: 10px 12px; }
.agent-card-pro .agent-usage-cost { font-size: 11.5px; }
.agent-card-pro .agent-usage-cost strong { color: var(--primary); }

/* ── Ações: CTA primário GRANDE e premium ── */
.agent-card-pro .agent-card-actions { gap: 8px; margin-top: 2px; }
.agent-card-pro .agent-card-btn-primary {
  font-size: 13px; font-weight: 800; letter-spacing: .1px;
  padding: 10px 18px; border-radius: 10px;
  background: linear-gradient(145deg, var(--primary), var(--primary-hover, var(--acc2, var(--primary))));
  color: var(--on-primary, #0F172A);
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--primary) 60%, transparent), 0 1px 0 0 color-mix(in srgb,#fff 22%,transparent) inset;
}
.agent-card-pro .agent-card-btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--primary) 72%, transparent), 0 1px 0 0 color-mix(in srgb,#fff 28%,transparent) inset;
  transform: translateY(-1px);
}
.agent-card-pro .agent-card-btn-config,
.agent-card-pro .agent-card-btn-ghost {
  font-size: 12px; font-weight: 700; padding: 9px 13px; border-radius: 10px;
}

/* ── Responsivo: mantém grande mas respira em telas estreitas ── */
@media (max-width: 560px) {
  .agent-card.agent-card-pro { padding: 15px 14px 13px; border-radius: 13px; }
  .agent-card-pro .agent-card-title { font-size: 15px; }
  .agent-card-pro .agent-help-list li { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-card.agent-card-pro, .agent-card.agent-card-pro:hover,
  .agent-card-pro .agent-card-icon, .agent-card-pro:hover .agent-card-icon { transition: none; transform: none; }
}
/* ── Nota "leia cada item" (info, premium) — orienta o corretor leigo ── */
.agent-card-pro .agent-card-note {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12px; line-height: 1.45; padding: 9px 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--info, #60A5FA) 10%, var(--surface, var(--card)));
  border: 1px solid color-mix(in srgb, var(--info, #60A5FA) 28%, var(--border));
  color: var(--text-body, var(--text));
}
.agent-card-pro .agent-card-note svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--info, #60A5FA); }
.agent-card-pro .agent-card-note strong { color: var(--text); font-weight: 800; }

/* ═══ Identidade de cor por agente — só o ícone + acentos sutis do "quadro" (2026-06-13)
   Conteúdo (bullets, chips, passos, CTA, nota) segue âmbar/azul p/ coesão da marca.
   Cor definida em --ag por data-action; cai em --primary se faltar. ═══ */
.agent-card-pro[data-action="dashboard-agent"]     { --ag: var(--primary); }
.agent-card-pro[data-action="followup-agent"]      { --ag: var(--info, #60A5FA); }
.agent-card-pro[data-action="sdr-agent"]           { --ag: var(--purple, #A78BFA); }
.agent-card-pro[data-action="objection-agent"]     { --ag: var(--danger, #FB7185); }
.agent-card-pro[data-action="documentation-agent"] { --ag: var(--warning, #F59E0B); }
.agent-card-pro[data-action="whatsapp-agent"]      { --ag: var(--success, #22C55E); }

.agent-card-pro .agent-card-icon {
  color: var(--ag, var(--primary));
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--ag, var(--primary)) 28%, transparent), transparent 60%),
    color-mix(in srgb, var(--ag, var(--primary)) 11%, var(--surface, var(--card)));
  border-color: color-mix(in srgb, var(--ag, var(--primary)) 36%, var(--border));
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ag, var(--primary)) 52%, transparent), 0 1px 0 0 color-mix(in srgb, #fff 10%, transparent) inset;
}
.agent-card-pro:hover .agent-card-icon {
  color: var(--ag, var(--primary));
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--ag, var(--primary)) 66%, transparent), 0 1px 0 0 color-mix(in srgb, #fff 14%, transparent) inset;
}
/* fio de luz do topo e moldura do hover acompanham a cor do agente */
.agent-card.agent-card-pro::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ag, var(--primary)) 78%, transparent), transparent);
}
.agent-card.agent-card-pro:hover {
  border-color: color-mix(in srgb, var(--ag, var(--primary)) 40%, var(--border-strong, var(--border)));
  box-shadow:
    0 1px 0 0 color-mix(in srgb, #fff 9%, transparent) inset,
    0 28px 60px -24px rgba(0, 0, 0, .62),
    0 0 0 1px color-mix(in srgb, var(--ag, var(--primary)) 16%, transparent),
    0 10px 40px -12px color-mix(in srgb, var(--ag, var(--primary)) 28%, transparent);
}
/* ── fim repaginação Premium AAA ── */

/* ═══════════════════════════════════════════════════════════════════════════
   ECOSSISTEMA IMOBPILOT — hub radial (logo central + 10 módulos orbitando)
   Mobile-first: grid. Desktop (≥1240px): layout radial real com posicionamento
   absoluto (--x/--y vindos do JS), linhas SVG e órbitas animadas.
   Só tokens semânticos; tema claro e escuro. Markup data-driven em app.js.
   ═══════════════════════════════════════════════════════════════════════════ */
.eco-hub { display: flex; flex-direction: column; align-items: center; }
.eco-hub .hub-sub { max-width: 660px; }

/* ── Palco: grade (mobile/tablet) ── */
.eco-stage {
  position: relative;
  width: 100%; max-width: 640px;
  margin: 8px auto 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  align-items: stretch;
}
.eco-stage .eco-links, .eco-stage .eco-ring { display: none; }   /* sem cromo radial fora do desktop */

/* ── Núcleo (logo) ── */
.eco-core {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; padding: 4px 0 12px;
}
.eco-core-mark {
  width: 74px; height: 74px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-primary, #0F172A);
  background: linear-gradient(150deg, var(--primary), var(--primary-hover, var(--acc2, var(--primary))));
  box-shadow: 0 14px 38px -12px color-mix(in srgb, var(--primary) 58%, transparent),
              0 0 0 6px color-mix(in srgb, var(--primary) 9%, transparent),
              0 1px 0 0 color-mix(in srgb, #fff 25%, transparent) inset;
}
.eco-core-mark svg { width: 37px; height: 37px; stroke-width: 2; }
.eco-core-name { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--text); line-height: 1; }
.eco-core-tag { font-size: 10px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--text-soft, var(--muted2)); }

/* ── Card de módulo (compacto) ── */
.eco-node {
  --accent: var(--primary);
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px 16px 15px; border-radius: 16px; text-align: left; color: var(--text);
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%),
    linear-gradient(168deg, var(--surface-elevated, var(--card2)), var(--surface, var(--card)));
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: transform .22s var(--ease, cubic-bezier(.4, 0, .2, 1)), box-shadow .22s, border-color .22s;
  opacity: 0; animation: ecoNodeIn .5s var(--ease, ease) forwards;
}
.eco-node::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent), transparent);
  opacity: .5; transition: opacity .22s;
}
.eco-node:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55),
              0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
              0 8px 28px -10px color-mix(in srgb, var(--accent) 28%, transparent);
}
.eco-node:hover::before { opacity: 1; }
.eco-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.eco-node:active { transform: translateY(-1px); }
.eco-node-num { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 800; color: var(--text-soft, var(--muted2)); opacity: .55; font-variant-numeric: tabular-nums; }
.eco-node-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface, var(--card)));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}
.eco-node-ico svg { width: 21px; height: 21px; }
.eco-node-title { font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; color: var(--text); line-height: 1.2; }
.eco-node-desc { font-size: 12px; line-height: 1.45; color: var(--text-muted, var(--muted)); }
.eco-node-cta { margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.eco-node-cta svg { width: 13px; height: 13px; transition: transform .2s; }
.eco-node:hover .eco-node-cta svg { transform: translateX(3px); }
.eco-node-sub { margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--text-soft, var(--muted2)); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.eco-node-sub:hover { color: var(--accent); }
.eco-node-sub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ── Cores de identidade por módulo (tokens; cyan/slate c/ ajuste por tema) ── */
.eco-node.eco-blue   { --accent: var(--info, #60A5FA); }
.eco-node.eco-green  { --accent: var(--success, #22C55E); }
.eco-node.eco-purple { --accent: var(--purple, #A78BFA); }
.eco-node.eco-amber  { --accent: var(--primary); }
.eco-node.eco-orange { --accent: var(--warning, #F59E0B); }
.eco-node.eco-cyan   { --accent: #22D3EE; }
.eco-node.eco-slate  { --accent: #94A3B8; }
html[data-theme="light"] .eco-node.eco-cyan, body[data-theme="light"] .eco-node.eco-cyan { --accent: #0E7490; }
html[data-theme="light"] .eco-node.eco-slate, body[data-theme="light"] .eco-node.eco-slate { --accent: #475569; }

/* ── Linhas / órbitas (só desktop) ── */
.eco-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.eco-link { stroke: color-mix(in srgb, var(--text-soft, #94A3B8) 26%, transparent); stroke-width: 1; stroke-dasharray: 2.5 4; vector-effect: non-scaling-stroke; animation: ecoDash 28s linear infinite; }
.eco-svg-ring { fill: none; stroke: color-mix(in srgb, var(--text-soft, #94A3B8) 15%, transparent); stroke-width: 1; stroke-dasharray: 1.5 5; vector-effect: non-scaling-stroke; }
.eco-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; }
.eco-ring-1 { width: 322px; height: 322px; border: 1px dashed color-mix(in srgb, var(--text-soft, #94A3B8) 26%, transparent); animation: ecoSpin 70s linear infinite; }
.eco-ring-2 { width: 214px; height: 214px; border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); animation: ecoSpin 52s linear infinite reverse; }

@keyframes ecoNodeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ecoSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ecoDash { to { stroke-dashoffset: -120; } }

.eco-footer { margin-top: 20px; }

/* ── Tablet: grade de 3 colunas ── */
@media (min-width: 768px) and (max-width: 1239px) {
  .eco-stage { max-width: 920px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* ── Mobile estreito: 1 coluna ── */
@media (max-width: 410px) {
  .eco-stage { grid-template-columns: 1fr; }
}

/* ── Desktop: layout RADIAL real ── */
@media (min-width: 1240px) {
  .eco-stage {
    display: block; position: relative;
    max-width: 1100px; height: 700px;
    margin: 22px auto 6px;
  }
  .eco-stage .eco-links, .eco-stage .eco-ring { display: block; }
  .eco-core {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    grid-column: auto; padding: 0; z-index: 3;
  }
  .eco-core-mark { width: 92px; height: 92px; border-radius: 24px; }
  .eco-core-mark svg { width: 45px; height: 45px; }
  .eco-core-name { font-size: 25px; }
  .eco-node {
    position: absolute; left: var(--x, 50%); top: var(--y, 50%);
    transform: translate(-50%, -50%);
    width: 212px; z-index: 2;
  }
  .eco-node:hover { transform: translate(-50%, -50%) scale(1.045); z-index: 6; }
  .eco-node:active { transform: translate(-50%, -50%) scale(1.02); }
}

/* ── Acessibilidade: respeita movimento reduzido (mantém posicionamento) ── */
@media (prefers-reduced-motion: reduce) {
  .eco-node { opacity: 1 !important; animation: none !important; transition: none !important; }
  .eco-ring, .eco-link { animation: none !important; }
}
/* ── fim Ecossistema radial ── */

/* ═══════════════════════════════════════════════════════════════════════════
   ECOSSISTEMA — EFEITOS IMERSIVOS (sistema vivo + profundidade 3D)
   Pulsos de energia nas linhas, núcleo respirando com auréola, foco no hover,
   parallax 3D e cards de vidro (desktop). Mobile fica leve (só núcleo respira).
   Tudo desligado em prefers-reduced-motion. Só visual.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pulsos de energia viajando do centro até cada módulo (desktop; svg oculto no mobile) */
.eco-pulse-line {
  fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 3 600; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px currentColor);
  animation: ecoPulse 2.7s linear infinite;
}
@keyframes ecoPulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -520; } }

/* Foco no hover/teclado: a linha do módulo acende; as demais recuam */
.eco-link { transition: opacity .25s, stroke .25s; }
.eco-has-focus .eco-link:not(.eco-line-on),
.eco-has-focus .eco-pulse-line:not(.eco-line-on) { opacity: .12; }
.eco-link.eco-line-on { stroke: color-mix(in srgb, var(--text) 45%, transparent); opacity: 1; }
.eco-pulse-line.eco-line-on { stroke-width: 2.4; animation-duration: 1.2s; }

/* Núcleo vivo: respira + auréola de energia girando atrás do logo */
.eco-core-mark { position: relative; animation: ecoBreath 4.6s ease-in-out infinite; }
.eco-core-mark::after {
  content: ''; position: absolute; inset: -30px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0%, color-mix(in srgb, var(--primary) 55%, transparent) 10%, transparent 26%,
    color-mix(in srgb, var(--info, #60A5FA) 45%, transparent) 50%, transparent 68%,
    color-mix(in srgb, var(--primary) 50%, transparent) 88%, transparent 100%);
  filter: blur(15px); opacity: .6;
  animation: ecoAura 13s linear infinite;
}
@keyframes ecoBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes ecoAura { to { transform: rotate(360deg); } }

/* Desktop: profundidade 3D (parallax por camadas) + vidro fosco nos cards */
@media (min-width: 1240px) {
  .eco-hub { perspective: 1500px; }
  .eco-stage { transform-style: preserve-3d; transition: transform .3s ease-out; will-change: transform; }
  .eco-core { transform: translate(-50%, -50%) translateZ(60px); }
  .eco-node { transform: translate(-50%, -50%) translateZ(26px); }
  .eco-node:hover { transform: translate(-50%, -50%) translateZ(50px) scale(1.05); }
  .eco-node:active { transform: translate(-50%, -50%) translateZ(42px) scale(1.02); }
  .eco-node {
    background:
      radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 55%),
      color-mix(in srgb, var(--surface-elevated, var(--card2)) 60%, transparent);
    -webkit-backdrop-filter: blur(13px) saturate(1.15);
    backdrop-filter: blur(13px) saturate(1.15);
    border-color: color-mix(in srgb, #fff 9%, var(--border));
    box-shadow: 0 1px 0 0 color-mix(in srgb, #fff 8%, transparent) inset, 0 12px 32px -16px rgba(0, 0, 0, .6);
  }
}

/* Movimento reduzido: estático, mantém posicionamento */
@media (prefers-reduced-motion: reduce) {
  .eco-pulse-line, .eco-core-mark, .eco-core-mark::after { animation: none !important; }
  .eco-core-mark::after { opacity: .35; }
  .eco-stage { transition: none !important; }
}
/* ── fim efeitos imersivos ── */

/* ═══ Performance: Calculadora / Locação Pro abrem como overlay em tela cheia.
   Enquanto abertos, ocultamos o hub atrás (#capa-ocaf) — isso PAUSA canvas,
   pulsos, auréola, parallax e os backdrop-filter dos cards, liberando GPU/CPU
   para o iframe carregar rápido. Reexibido ao fechar (classe ov-open no body). ═══ */
body.ov-open #capa-ocaf { display: none !important; }
/* Defesa extra (caso o hub não esteja oculto): desliga os efeitos caros sob overlay */
body.ov-open .eco-node { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.ov-open .eco-pulse-line,
body.ov-open .eco-link,
body.ov-open .eco-ring,
body.ov-open .eco-core-mark,
body.ov-open .eco-core-mark::after { animation: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ECOSSISTEMA — CAMADA 3 "SURREAL" (desktop): linhas que se desenham na entrada,
   campo de estrelas atrás da órbita e bordas iridescentes nos cards.
   Performático: desenho e estrelas são leves; iridescente só "acende" no hover.
   Tudo desktop-only e desligado em prefers-reduced-motion / sob overlay.
   ═══════════════════════════════════════════════════════════════════════════ */
@property --ir { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* Linhas se desenhando do centro até o módulo (entrada, uma vez) */
.eco-link {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: ecoDraw .9s ease-out forwards;
}
.eco-svg-ring { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ecoDraw 1.1s ease-out .1s forwards; }
@keyframes ecoDraw { to { stroke-dashoffset: 0; } }

/* Campo de estrelas/poeira atrás da órbita (oculto fora do desktop) */
.eco-stars { display: none; }
.eco-stage .eco-stars {
  position: absolute; inset: -4%; z-index: 0; pointer-events: none; border-radius: 50%;
  opacity: .55;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 24%, color-mix(in srgb, var(--text) 55%, transparent), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 16%, color-mix(in srgb, var(--info, #60A5FA) 70%, transparent), transparent 60%),
    radial-gradient(1.4px 1.4px at 84% 62%, color-mix(in srgb, var(--text) 45%, transparent), transparent 60%),
    radial-gradient(1px 1px at 32% 78%, color-mix(in srgb, var(--primary) 70%, transparent), transparent 60%),
    radial-gradient(1.3px 1.3px at 58% 88%, color-mix(in srgb, var(--text) 40%, transparent), transparent 60%),
    radial-gradient(1px 1px at 8% 60%, color-mix(in srgb, var(--purple, #A78BFA) 65%, transparent), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 34%, color-mix(in srgb, var(--text) 50%, transparent), transparent 60%),
    radial-gradient(1px 1px at 46% 10%, color-mix(in srgb, var(--text) 45%, transparent), transparent 60%),
    radial-gradient(1.2px 1.2px at 24% 46%, color-mix(in srgb, var(--info, #60A5FA) 55%, transparent), transparent 60%),
    radial-gradient(1px 1px at 66% 50%, color-mix(in srgb, var(--text) 40%, transparent), transparent 60%);
  background-repeat: no-repeat;
}
@keyframes ecoStars { 0%, 100% { transform: translateY(0) scale(1); opacity: .42; } 50% { transform: translateY(-10px) scale(1.015); opacity: .62; } }

@media (min-width: 1240px) {
  .eco-stage .eco-stars { display: block; animation: ecoStars 16s ease-in-out infinite; }

  /* Bordas iridescentes (holográficas): sutis em repouso, vivas no hover */
  .eco-node::after {
    content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--ir, 0deg),
      color-mix(in srgb, var(--accent) 65%, transparent), #a78bfa, #22d3ee, var(--primary), color-mix(in srgb, var(--accent) 65%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .3; transition: opacity .25s; z-index: 1;
  }
  .eco-node:hover::after { opacity: .9; animation: ecoIrid 4.5s linear infinite; }
}
@keyframes ecoIrid { to { --ir: 360deg; } }

/* Acessibilidade / overlay: nada de desenho, drift ou rotação iridescente */
@media (prefers-reduced-motion: reduce) {
  .eco-link, .eco-svg-ring { stroke-dashoffset: 0 !important; animation: none !important; }
  .eco-stars { animation: none !important; }
  .eco-node:hover::after { animation: none !important; }
}
body.ov-open .eco-stars { animation: none !important; }
body.ov-open .eco-node:hover::after { animation: none !important; }
/* ── fim Camada 3 surreal ── */

/* ═══════════════════════════════════════════════════════════════════════════
   FUNDO GALÁXIA (capa do Ecossistema): núcleo cósmico + 3 camadas de estrelas.
   Estrelas via tiles de gradiente (baratas); drift por transform (composite,
   sem repaint) + leve twinkle. Combina com o hub radial. Desligado em
   prefers-reduced-motion; no mobile fica estático (leve). Pausa sob overlay
   porque o #capa-ocaf é ocultado por body.ov-open.
   ═══════════════════════════════════════════════════════════════════════════ */
.capa-galaxy {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 56% 40% at 24% 30%, rgba(102, 88, 234, .09) 0%, transparent 58%),    /* nuvem índigo */
    radial-gradient(ellipse 50% 38% at 80% 70%, rgba(172, 74, 224, .08) 0%, transparent 58%),     /* magenta/violeta */
    radial-gradient(ellipse 44% 34% at 70% 16%, rgba(48, 150, 230, .06) 0%, transparent 58%),     /* azul cósmico */
    radial-gradient(ellipse 42% 32% at 14% 80%, rgba(26, 194, 200, .05) 0%, transparent 58%),     /* teal */
    radial-gradient(ellipse 80% 54% at 50% 52%, rgba(84, 114, 220, .03) 0%, transparent 62%),
    radial-gradient(circle at 50% 44%, rgba(245, 197, 24, .035) 0%, transparent 32%);
}
/* Faixa de Via Láctea (brilho difuso diagonal) */
.capa-milkyway {
  position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: linear-gradient(118deg,
    transparent 34%,
    rgba(140, 158, 240, .18) 42%,
    rgba(200, 172, 250, .40) 50%,
    rgba(140, 172, 240, .18) 58%,
    transparent 66%);
  filter: blur(20px);
}
/* Rio de estrelas concentrado ao longo da Via Láctea (máscara diagonal) */
.capa-stars-band {
  position: absolute; inset: -25%; z-index: 0; pointer-events: none; opacity: 1;
  background-repeat: repeat; background-size: 104px 104px;
  background-image:
    radial-gradient(.9px .9px at 12px 18px, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(.8px .8px at 40px 60px, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 70px 30px, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(.8px .8px at 95px 80px, rgba(220,230,255,.7), transparent 60%),
    radial-gradient(.8px .8px at 55px 100px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 20px 95px, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(.8px .8px at 105px 15px, rgba(200,210,255,.65), transparent 60%),
    radial-gradient(.8px .8px at 85px 112px, rgba(255,255,255,.7), transparent 60%);
  -webkit-mask: linear-gradient(118deg, transparent 41%, #000 47%, #000 53%, transparent 59%);
  mask: linear-gradient(118deg, transparent 41%, #000 47%, #000 53%, transparent 59%);
}
.capa-stars {
  position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background-repeat: repeat; will-change: transform;
}
.capa-stars-1 {
  opacity: .72; background-size: 120px 120px;
  background-image:
    radial-gradient(1px 1px at 24px 32px, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 96px 18px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 140px 70px, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 58px 120px, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 120px 150px, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px 1px at 10px 92px, rgba(255,255,255,.45), transparent 60%);
  animation: capaStarDriftA 170s ease-in-out infinite alternate;
}
.capa-stars-2 {
  opacity: .92; background-size: 185px 185px;
  background-image:
    radial-gradient(2px 2px at 40px 50px, rgba(255,255,255,1), transparent 58%),
    radial-gradient(1.8px 1.8px at 200px 36px, rgba(220,235,255,.9), transparent 58%),
    radial-gradient(2px 2px at 120px 200px, rgba(255,255,255,.95), transparent 58%),
    radial-gradient(1.7px 1.7px at 225px 150px, rgba(255,245,230,.85), transparent 58%),
    radial-gradient(1.5px 1.5px at 90px 110px, rgba(255,255,255,.8), transparent 58%),
    radial-gradient(1.5px 1.5px at 160px 90px, rgba(210,225,255,.8), transparent 58%);
  animation: capaStarDriftB 230s ease-in-out infinite alternate;
}
.capa-stars-3 {
  opacity: 1; background-size: 250px 250px;
  background-image:
    radial-gradient(2.6px 2.6px at 70px 80px, rgba(255,255,255,1), transparent 52%),
    radial-gradient(2.3px 2.3px at 270px 60px, rgba(150,195,255,1), transparent 52%),
    radial-gradient(2.3px 2.3px at 170px 270px, rgba(205,170,255,.95), transparent 52%),
    radial-gradient(2.1px 2.1px at 310px 210px, rgba(150,235,225,.9), transparent 52%),
    radial-gradient(2px 2px at 120px 150px, rgba(255,250,235,.95), transparent 52%),
    radial-gradient(2px 2px at 220px 200px, rgba(255,255,255,.9), transparent 52%);
  animation: capaStarDriftA 260s ease-in-out infinite alternate, capaTwinkle 6.5s ease-in-out infinite;
}
@keyframes capaStarDriftA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2.5%, -4%, 0); } }
@keyframes capaStarDriftB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(3%, -3%, 0); } }
@keyframes capaTwinkle { 0%, 100% { opacity: .85; } 50% { opacity: .52; } }

/* Mobile: estrelas estáticas (sem drift) p/ manter leve */
@media (max-width: 1023px) {
  .capa-stars-1, .capa-stars-2, .capa-stars-3 { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .capa-stars-1, .capa-stars-2, .capa-stars-3 { animation: none !important; }
}
/* ── fim fundo galáxia ── */

/* ═══════════════════════════════════════════════════════════════════════════
   ECOSSISTEMA — MÓDULOS COMO PLANETAS (redesenho premium 2026-06-13)
   O card retangular vira um "planeta" redondo (orb com ícone) + rótulo.
   Mobile/tablet: cartão arredondado (orb à esquerda + texto, tudo visível).
   Desktop: planetas alinhados na órbita (orb + nome; descrição/CTA revelam no
   hover/foco). Override no fim → vence o cascade. Mantém ações/IDs/acessibilidade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base (mobile/tablet): cartão arredondado com orb + corpo */
.eco-node {
  flex-direction: row; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 22px; text-align: left;
  background: linear-gradient(165deg, var(--surface-elevated, var(--card2)), var(--surface, var(--card)));
  border: 1px solid var(--border);
}
.eco-node::before { display: none; }   /* sem barra de topo */

/* Orb = o planeta */
.eco-orb {
  position: relative; flex-shrink: 0;
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--accent) 60%, #fff) 0%, var(--accent) 44%, color-mix(in srgb, var(--accent) 55%, #000) 100%);
  box-shadow:
    0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent),
    0 1px 0 0 color-mix(in srgb, #fff 45%, transparent) inset,
    0 -7px 13px -7px color-mix(in srgb, #000 55%, transparent) inset;
  transition: box-shadow .25s, transform .25s;
}
.eco-orb::before {   /* atmosfera (anel difuso ao redor do planeta) */
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: .7; transition: opacity .25s, inset .25s;
}
.eco-orb .eco-node-ico { width: auto; height: auto; border: none; background: none; color: #fff; }
.eco-orb .eco-node-ico svg { width: 26px; height: 26px; }
.eco-node-num {
  position: absolute; top: -3px; right: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; color: var(--text);
  background: var(--surface, var(--card)); border: 1px solid var(--border);
}

/* Corpo (texto) */
.eco-node-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eco-node-title { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -.2px; line-height: 1.2; }
.eco-node-desc { font-size: 12px; line-height: 1.4; color: var(--text-muted, var(--muted)); }
.eco-node-cta { margin-top: 2px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--accent); }
.eco-node-cta svg { width: 12px; height: 12px; transition: transform .2s; }
.eco-node:hover .eco-node-cta svg { transform: translateX(3px); }
.eco-node-sub { margin-top: 4px; }

.eco-node:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.eco-node:hover .eco-orb { transform: scale(1.04); box-shadow: 0 12px 26px -6px color-mix(in srgb, var(--accent) 82%, transparent), 0 1px 0 0 color-mix(in srgb,#fff 50%,transparent) inset, 0 -7px 13px -7px color-mix(in srgb,#000 55%,transparent) inset; }
.eco-node:hover .eco-orb::before { opacity: 1; inset: -8px; }

/* ── DESKTOP: planetas alinhados na órbita ── */
@media (min-width: 1240px) {
  .eco-node {
    flex-direction: column; align-items: center; gap: 0; text-align: center;
    width: 90px; padding: 0; background: none; border: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transform: translate(-50%, -50%) translateZ(26px);
  }
  .eco-node::after { display: none; }   /* sem borda iridescente retangular */
  .eco-node:hover { transform: translate(-50%, -50%) translateZ(56px) scale(1.06); z-index: 10; border: none; }
  .eco-node:active { transform: translate(-50%, -50%) translateZ(46px) scale(1.03); }

  .eco-orb { width: 90px; height: 90px; }
  .eco-orb .eco-node-ico svg { width: 35px; height: 35px; }
  .eco-node-num { width: 20px; height: 20px; font-size: 10px; top: 0; right: 0; }

  .eco-node-body { align-items: center; gap: 0; position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: 152px; }
  .eco-node-title { font-size: 13.5px; }
  /* descrição + CTA + sublink ocultas; revelam no hover/foco (sem empurrar vizinhos) */
  .eco-node-desc, .eco-node-cta, .eco-node-sub {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .3s ease, opacity .22s ease, margin .3s ease;
  }
  .eco-node-desc { max-width: 150px; }
  .eco-node:hover .eco-node-desc, .eco-node:focus-within .eco-node-desc,
  .eco-node:hover .eco-node-cta, .eco-node:focus-within .eco-node-cta,
  .eco-node:hover .eco-node-sub, .eco-node:focus-within .eco-node-sub { max-height: 64px; opacity: 1; }
  .eco-node:hover .eco-node-desc, .eco-node:focus-within .eco-node-desc { margin-top: 5px; }
}
/* ── fim módulos como planetas ── */

/* ═══════════════════════════════════════════════════════════════════════════
   ECOSSISTEMA — MODO "SOBRENATURAL" (2026-06-13)
   Feixes de energia brilhantes sol→planeta, planeta girando no hover, mais
   estrelas + 2ª Via Láctea. Desktop-only (beams/spin); pausa sob overlay e em
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Superfície do planeta que gira no hover (ícone fica parado) */
.eco-orb::before { z-index: -1; }
.eco-orb::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 22%, transparent 46%),
    radial-gradient(circle at 75% 77%, rgba(0,0,0,.42) 0%, transparent 54%),
    conic-gradient(from 0deg, transparent, rgba(255,255,255,.12) 18%, transparent 40%, rgba(0,0,0,.14) 62%, transparent 84%);
  opacity: .9;
}
.eco-orb .eco-node-ico { position: relative; z-index: 1; }
@keyframes ecoPlanetSpin { to { transform: rotate(360deg); } }
/* Planeta gira sempre (devagar) no desktop e acelera no hover/foco */
@media (min-width: 1240px) {
  .eco-orb::after { animation: ecoPlanetSpin 34s linear infinite; }
  .eco-node:hover .eco-orb::after, .eco-node:focus-within .eco-orb::after { animation-duration: 4.5s; }
}
@media (prefers-reduced-motion: reduce) { .eco-orb::after { animation: none !important; } }

/* Feixes brilhantes sol→planeta (desktop) */
@media (min-width: 1240px) {
  .eco-link { opacity: .42; stroke-width: 1.3; filter: drop-shadow(0 0 2.5px currentColor); }
  .eco-link.eco-line-on { opacity: 1; stroke-width: 2; filter: drop-shadow(0 0 6px currentColor); }
  .eco-pulse-line { stroke-width: 2; filter: drop-shadow(0 0 5px currentColor); }
  .eco-node:hover .eco-orb { box-shadow: 0 0 0 1px color-mix(in srgb, #fff 35%, transparent) inset, 0 0 34px -2px color-mix(in srgb, var(--accent) 75%, transparent), 0 1px 0 0 color-mix(in srgb,#fff 55%,transparent) inset, 0 -7px 13px -7px color-mix(in srgb,#000 55%,transparent) inset; }
}

/* Mais estrelas (4ª camada) + 2ª Via Láctea cruzando em outro ângulo */
.capa-stars-4 {
  opacity: .7; background-size: 104px 104px;
  background-image:
    radial-gradient(.8px .8px at 16px 22px, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(.7px .7px at 60px 50px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(.9px .9px at 100px 30px, rgba(220,235,255,.7), transparent 60%),
    radial-gradient(.7px .7px at 40px 95px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(.8px .8px at 115px 100px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(.7px .7px at 80px 120px, rgba(200,215,255,.5), transparent 60%);
  animation: capaStarDriftB 300s ease-in-out infinite alternate;
}
.capa-milkyway-2 {
  background: linear-gradient(56deg, transparent 38%, rgba(160,140,240,.15) 45%, rgba(130,190,246,.29) 50%, rgba(160,140,240,.15) 55%, transparent 62%);
}
.capa-stars-band-2 {
  -webkit-mask: linear-gradient(56deg, transparent 43%, #000 48%, #000 52%, transparent 57%);
  mask: linear-gradient(56deg, transparent 43%, #000 48%, #000 52%, transparent 57%);
}
@media (max-width: 1023px) { .capa-stars-4 { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .capa-stars-4 { animation: none !important; } }
/* ── fim modo sobrenatural ── */

/* ═══════════════════════════════════════════════════════════════════════════
   HUB — PLANETAS MAIORES + NÚCLEO (o maior planeta) + RÓTULOS NÍTIDOS +
   TÍTULO EM MEIA-LUA (2026-06-13). Anexado no fim → vence o cascade.
   Desktop ≥1240px ganha o título curvo (SVG textPath) ao redor do círculo de
   planetas + halo/sombra; o header reto é ocultado nesse breakpoint.
   Só visual; markup/ações/IDs intactos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Núcleo nítido (o hub é SEMPRE escuro → texto claro nos 2 temas) */
.eco-core-name { color: #fff; text-shadow: 0 2px 18px rgba(2,6,16,.7); }
.eco-core-tag { color: #d4ddf2; text-shadow: 0 1px 8px rgba(2,6,16,.6); }
/* No mobile/tablet os planetas têm fundo de card (tema) → mantém var(--text).
   No desktop os planetas ficam sobre a galáxia (sem card) → rótulos brancos (abaixo). */

/* Título/subtítulo curvos: ocultos por padrão (mobile/tablet usam o header reto) */
.eco-arc { display: none; }

/* A meia-lua (SVG curvo) foi DESLIGADA a pedido — texto volta ao horizontal. */
.eco-arc { display: none !important; }

@media (min-width: 1240px) {
  /* TÍTULO HORIZONTAL com LETRAS GRANDES (cabeçalho reto restaurado) */
  .eco-hub .hub-header { display: block; margin-bottom: 16px; }
  .eco-hub .hub-badge { margin-bottom: 13px; }
  .eco-hub .hub-title { display: block; font-size: clamp(34px, 4.4vw, 49px); margin-bottom: 9px; }
  .eco-hub .hub-sub { display: block; font-size: 16px; max-width: 680px; }

  /* Palco: anel arredondado e alinhado (cabe inteiro abaixo do cabeçalho) */
  .eco-stage { max-width: 1060px; height: 600px; margin: 4px auto 6px; }

  /* PLANETAS (redondos) */
  .eco-node { width: 108px; }
  .eco-orb { width: 106px; height: 106px; }
  .eco-orb .eco-node-ico svg { width: 42px; height: 42px; }
  .eco-node-num { width: 21px; height: 21px; font-size: 10px; }
  .eco-node-body { width: 180px; top: calc(100% + 10px); }
  /* Rótulos nítidos sobre o fundo (sem card no desktop) */
  .eco-node-title { font-size: 15px; color: #fff; text-shadow: 0 1px 10px rgba(2,6,16,.8), 0 0 2px rgba(2,6,16,.7); }
  .eco-node-desc { color: #dfe6f5; }

  /* NÚCLEO = o MAIOR planeta (redondo), centrado no centro do anel */
  .eco-core-mark {
    width: 158px; height: 158px; border-radius: 50%;
    background:
      radial-gradient(circle at 36% 30%, #fff3c4 0%, var(--primary) 48%, color-mix(in srgb, var(--primary) 58%, #000) 100%);
    box-shadow:
      0 0 0 11px color-mix(in srgb, var(--primary) 12%, transparent),
      0 24px 64px -16px color-mix(in srgb, var(--primary) 72%, transparent),
      0 0 84px -4px color-mix(in srgb, var(--primary) 55%, transparent),
      0 2px 0 0 color-mix(in srgb, #fff 55%, transparent) inset,
      0 -14px 26px -12px color-mix(in srgb, #000 55%, transparent) inset;
  }
  .eco-core-mark svg { width: 72px; height: 72px; }
  /* PLANETA centrado no centro do palco (onde linhas/anéis convergem); nome/selo absolutos abaixo */
  .eco-core { gap: 0; }
  .eco-core-name {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: 29px; margin: 0;
  }
  .eco-core-tag {
    position: absolute; top: calc(100% + 54px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: 11px; letter-spacing: 3px; margin: 0;
  }
}
/* ── fim hub (título horizontal) ── */

/* ═══ REMOVER NEBLINA (a pedido): sem nebulosa/Via-Láctea difusa/mesh/aurora/glows.
   Mantém o fundo escuro + estrelas + faixa de estrelas (céu limpo). ═══ */
.capa-galaxy, .capa-milkyway, .capa-milkyway-2, .capa-mesh { background: none !important; }
.capa-aurora, .capa-glow { display: none !important; }
/* ── fim remover neblina ── */


/* ═══════════════════════════════════════════════════════════════════════════
   AGENTE DO PAINEL — Redesign Premium "pnl2"  (compacto • 2 colunas • dark SaaS)
   Escopo 100% isolado em .agent-card.pnl2 + classes .pnl-*. Anexado no FIM:
   vence o "Swiss Minimal Pro" por ordem de origem. NÃO toca em outros cards.
   Hooks de JS intactos (.agent-card-usage[data-usage-*], .agent-card-details).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ┌─ Card raiz: superfície em camadas, glow dourado sutil, bandas internas ─┐ */
.agent-card.pnl2 {
  position: relative;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-elevated, #1A2233) 0%, var(--surface, #111827) 48%, var(--surface, #111827) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 32px -14px rgba(0, 0, 0, .55);
  transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease), transform .2s var(--ease, ease);
}
.agent-card.pnl2::after {                /* brilho premium no topo, bem contido */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 130px; pointer-events: none;
  background: radial-gradient(120% 80% at 16% -16%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%);
}
.agent-card.pnl2:hover {
  border-color: color-mix(in srgb, var(--acc) 30%, var(--border-strong, var(--border)));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 42px -16px rgba(0, 0, 0, .6);
  transform: translateY(-2px);
}
/* └─ /raiz ─┘ */

/* ┌─ HEADER BAND ─┐ */
.pnl2 .pnl-head { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px 14px; border-bottom: 1px solid var(--border); }
.pnl2 .pnl-ic { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--acc); background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 18%, transparent), color-mix(in srgb, var(--acc) 5%, transparent)); border: 1px solid color-mix(in srgb, var(--acc) 32%, var(--border)); box-shadow: 0 4px 14px -6px var(--acc-glow); }
.pnl2 .pnl-head-main { min-width: 0; flex: 1; }
.pnl2 .pnl-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pnl2 .pnl-title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: var(--text); line-height: 1.1; }
.pnl2 .pnl-sub { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted, var(--muted)); max-width: 70ch; }
.pnl2 .pnl-sub strong { color: var(--text-body, var(--text)); font-weight: 700; }
/* badges sóbrios e pequenos */
.pnl2 .pnl-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted, var(--muted)); background: color-mix(in srgb, var(--surface) 55%, transparent); white-space: nowrap; line-height: 1; }
.pnl2 .pnl-badge-ia { color: var(--text-soft, var(--muted)); }
.pnl2 .pnl-badge-plan { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 42%, var(--border)); }
.pnl2 .pnl-badge-ok { color: #34d399; border-color: color-mix(in srgb, #34d399 34%, transparent); display: inline-flex; align-items: center; gap: 5px; }
.pnl2 .pnl-badge-ok i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 22%, transparent); }
/* └─ /HEADER ─┘ */

/* ┌─ BODY GRID (2 colunas no desktop) ─┐ */
.pnl2 .pnl-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 15px 18px 16px; }
.pnl2 .pnl-col { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.pnl2 .pnl-kicker { font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--text-soft, var(--muted)); }
/* bullets compactos com check dourado */
.pnl2 .pnl-bul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pnl2 .pnl-bul li { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.4; color: var(--text-body, var(--text)); }
.pnl2 .pnl-bul li::before { content: ""; position: absolute; left: 0; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: color-mix(in srgb, var(--acc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
.pnl2 .pnl-bul li::after { content: ""; position: absolute; left: 4.6px; top: 5px; width: 3px; height: 6px; border: solid var(--acc); border-width: 0 1.6px 1.6px 0; transform: rotate(40deg); }
.pnl2 .pnl-bul strong { color: var(--text); font-weight: 700; }
/* quando usar / não usar — compacto */
.pnl2 .pnl-when { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; padding-top: 9px; border-top: 1px dashed var(--border); }
.pnl2 .pnl-when span { position: relative; padding-left: 18px; font-size: 11.5px; line-height: 1.35; color: var(--text-muted, var(--muted)); }
.pnl2 .pnl-when-yes::before { content: "✓"; position: absolute; left: 0; color: #34d399; font-weight: 800; }
.pnl2 .pnl-when-no::before { content: "✕"; position: absolute; left: 0; color: var(--text-soft, #7C8AA5); font-weight: 800; }
/* steps numerados compactos */
.pnl2 .pnl-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 6px; }
.pnl2 .pnl-steps li { counter-increment: s; position: relative; padding-left: 26px; font-size: 12.5px; line-height: 1.4; color: var(--text-body, var(--text)); min-height: 18px; display: flex; align-items: center; }
.pnl2 .pnl-steps li::before { content: counter(s); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--on-primary, #0F172A); background: linear-gradient(160deg, var(--acc), var(--acc2)); }
.pnl2 .pnl-steps strong { color: var(--text); font-weight: 700; }
/* showcase — mini-card premium com filete dourado */
.pnl2 .pnl-show { margin: 4px 0 0; padding: 11px 13px 11px 14px; border: 1px solid var(--border); border-left: 2px solid var(--acc); border-radius: 11px; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 5%, var(--surface-soft, #151C2B)), var(--surface, #111827)); }
.pnl2 .pnl-show-h { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--acc); margin: 0 0 6px; }
.pnl2 .pnl-show-h::before { content: "“"; font-size: 17px; line-height: 0; position: relative; top: 4px; color: var(--acc); opacity: .85; }
.pnl2 .pnl-show-q { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-body, var(--text)); font-style: italic; }
.pnl2 .pnl-show-tail { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--text-muted, var(--muted)); }
/* └─ /BODY ─┘ */

/* ┌─ FOOTER BAND: créditos + ações ─┐ */
.pnl2 .pnl-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 13px 18px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-soft, #0B1020) 50%, transparent); }
/* créditos — barra fina premium (override do .agent-card-usage SÓ aqui) */
.pnl2 .pnl-usage { flex: 1 1 270px; min-width: 210px; border: 0; padding: 0; background: transparent; border-radius: 0; gap: 6px; }
.pnl2 .pnl-usage-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pnl2 .pnl-usage-text { font-size: 11.5px; font-weight: 600; color: var(--text-muted, var(--muted)); font-variant-numeric: tabular-nums; }
.pnl2 .pnl-usage.agent-usage-connected .pnl-usage-text { color: var(--text); }
.pnl2 .pnl-usage-cost { font-size: 10.5px; font-weight: 700; color: var(--acc); white-space: nowrap; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--acc) 34%, var(--border)); border-radius: 999px; }
.pnl2 .pnl-usage-bar { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.pnl2 .pnl-usage-reset { font-size: 10.5px; color: var(--text-soft, var(--muted)); font-variant-numeric: tabular-nums; }
/* ações — primário dourado destacado, secundário/terciário sóbrios */
.pnl2 .pnl-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pnl2 .pnl-btn { font-family: inherit; font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 9px 14px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: filter .15s, transform .1s, box-shadow .15s, background .15s, color .15s, border-color .15s; }
.pnl2 .pnl-btn:active { transform: translateY(1px); }
.pnl2 .pnl-btn-primary { color: var(--on-primary, #0F172A); background: linear-gradient(160deg, var(--acc), var(--acc2)); box-shadow: 0 6px 18px -6px var(--acc-glow); }
.pnl2 .pnl-btn-primary svg { width: 14px; height: 14px; }
.pnl2 .pnl-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 26px -8px var(--acc-glow); }
.pnl2 .pnl-btn-sec { color: var(--text-body, var(--text)); background: transparent; border-color: var(--border-strong, var(--border)); }
.pnl2 .pnl-btn-sec:hover { color: var(--text); border-color: color-mix(in srgb, var(--acc) 40%, var(--border)); background: color-mix(in srgb, var(--acc) 8%, transparent); }
.pnl2 .pnl-btn-ghost { color: var(--text-muted, var(--muted)); background: transparent; border: 1px dashed var(--border); }
.pnl2 .pnl-btn-ghost:hover { color: var(--text); border-color: var(--text-soft, var(--muted)); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.pnl2 .pnl-btn-ghost[aria-expanded="true"] { color: var(--acc); border-color: var(--acc); border-style: solid; }
/* └─ /FOOTER ─┘ */

/* ┌─ DETALHES (toggle "Entender uso" → JS força display:flex) ─┐ */
.pnl2 .agent-card-details.pnl-details { position: relative; z-index: 1; gap: 16px; flex-direction: row; flex-wrap: wrap; padding: 14px 18px 16px; border-top: 1px dashed var(--border); }
.pnl2 .pnl-det-block { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pnl2 .pnl-det-block p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-muted, var(--muted)); }
.pnl2 .pnl-det-block.pnl-det-tips { flex-basis: 100%; }
.pnl2 .pnl-det-tips .pnl-bul li { font-size: 12px; color: var(--text-muted, var(--muted)); }
.pnl2 .pnl-det-tips .pnl-bul strong { color: var(--text, #eef2ff); }
/* └─ /DETALHES ─┘ */

/* ┌─ RESPONSIVO ─┐ */
@media (max-width: 880px) {
  .pnl2 .pnl-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .pnl2 .pnl-head { padding: 14px 14px 12px; }
  .pnl2 .pnl-grid { padding: 14px; }
  .pnl2 .pnl-foot { padding: 12px 14px; gap: 12px; }
  .pnl2 .pnl-actions { width: 100%; }
  .pnl2 .pnl-btn-primary { flex: 1 1 auto; justify-content: center; }
  .pnl2 .pnl-title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-card.pnl2, .agent-card.pnl2:hover { transition: none; transform: none; }
}
/* └─ /RESPONSIVO ─┘ */
/* ── fim redesign Agente do Painel "pnl2" ── */

/* ═══════════════════════════════════════════════════════════════════════════
   Agente do Painel — INTERAÇÃO INLINE no card (sem modal). Escopo .pnl-inline / .pnl-*.
   Skeleton premium + cards de resultado + mini chat + empty/erro. Responsivo.
   ═══════════════════════════════════════════════════════════════════════════ */
.pnl2 .pnl-inline { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 14px 18px 4px; animation: pnlInlineIn .28s var(--ease, ease) both; }
.pnl2 .pnl-inline[hidden] { display: none; }
@keyframes pnlInlineIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pnl2 .pnl-inline-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pnl2 .pnl-inline-x { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted, var(--muted)); cursor: pointer; font-size: 13px; line-height: 1; transition: color .15s, border-color .15s, background .15s; }
.pnl2 .pnl-inline-x:hover { color: var(--text); border-color: var(--text-soft, var(--muted)); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.pnl2 .pnl-greet { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--acc) 26%, var(--border)); border-radius: 11px; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 7%, var(--surface-soft, #151C2B)), var(--surface, #111827)); }
.pnl2 .pnl-greet[hidden] { display: none; }
.pnl2 .pnl-greet-ic { font-size: 15px; line-height: 1.4; flex: 0 0 auto; }
.pnl2 .pnl-greet-tx { font-size: 12.5px; line-height: 1.5; color: var(--text-body, var(--text)); }
.pnl2 .pnl-greet-tx strong { color: var(--text); font-weight: 700; }
.pnl2 .pnl-inline-scroll { max-height: 420px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-right: 2px; }
.pnl2 .pnl-inline-scroll::-webkit-scrollbar { width: 7px; }
.pnl2 .pnl-inline-scroll::-webkit-scrollbar-thumb { background: var(--border-strong, var(--border)); border-radius: 999px; }

/* skeleton premium */
.pnl2 .pnl-skel { padding: 6px 0 12px; }
.pnl2 .pnl-skel-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-muted, var(--muted)); font-weight: 600; margin-bottom: 11px; }
.pnl2 .pnl-skel-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 var(--acc-glow); animation: pnlPulse 1.1s ease-in-out infinite; }
@keyframes pnlPulse { 0%, 100% { opacity: .5; box-shadow: 0 0 0 0 var(--acc-glow); } 50% { opacity: 1; box-shadow: 0 0 0 5px transparent; } }
.pnl2 .pnl-skel-bars { display: flex; flex-direction: column; gap: 8px; }
.pnl2 .pnl-skel-bars span { height: 11px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-soft, #151C2B) 25%, color-mix(in srgb, var(--acc) 12%, var(--surface-elevated, #1A2233)) 37%, var(--surface-soft, #151C2B) 63%); background-size: 400% 100%; animation: pnlShimmer 1.4s ease infinite; }
.pnl2 .pnl-skel-bars span:nth-child(1) { width: 92%; } .pnl2 .pnl-skel-bars span:nth-child(2) { width: 78%; } .pnl2 .pnl-skel-bars span:nth-child(3) { width: 64%; }
@keyframes pnlShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* resultado: grid de cards compactos */
.pnl2 .pnl-res { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 10px; }
.pnl2 .pnl-rc { border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; background: linear-gradient(180deg, var(--surface-soft, #151C2B), var(--surface, #111827)); }
.pnl2 .pnl-rc-sum { grid-column: 1 / -1; border-left: 2px solid var(--acc); }
.pnl2 .pnl-rc-prio { grid-column: 1 / -1; }
.pnl2 .pnl-rc-h { font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--text-soft, var(--muted)); margin-bottom: 6px; }
.pnl2 .pnl-rc-risk .pnl-rc-h { color: #f59e0b; } .pnl2 .pnl-rc-opp .pnl-rc-h { color: #34d399; } .pnl2 .pnl-rc-sum .pnl-rc-h { color: var(--acc); }
.pnl2 .pnl-rc-b { font-size: 12.5px; line-height: 1.5; color: var(--text-body, var(--text)); }
.pnl2 .pnl-rc-b p { margin: 0; }
.pnl2 .pnl-rc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pnl2 .pnl-rc-list li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.4; color: var(--text-body, var(--text)); }
.pnl2 .pnl-rc-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.pnl2 .pnl-rc-risk .pnl-rc-list li::before { background: #f59e0b; } .pnl2 .pnl-rc-opp .pnl-rc-list li::before { background: #34d399; }
.pnl2 .pnl-rc-ins { grid-column: 1 / -1; border-left: 2px solid color-mix(in srgb, var(--acc) 60%, transparent); } .pnl2 .pnl-rc-ins .pnl-rc-h { color: var(--acc); }
.pnl2 .pnl-rc-miss .pnl-rc-h { color: #f59e0b; } .pnl2 .pnl-rc-miss .pnl-rc-list li::before { background: #f59e0b; }
.pnl2 .pnl-rc-meta { grid-column: 1 / -1; background: transparent; border: 0; padding: 2px 0 0; }
.pnl2 .pnl-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted, var(--muted)); padding: 3px 10px; margin-right: 7px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.pnl2 .pnl-chip b { color: var(--text); text-transform: capitalize; }

/* empty / erro inline */
.pnl2 .pnl-empty { padding: 8px 0 14px; }
.pnl2 .pnl-empty-h { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.pnl2 .pnl-empty-sub { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-soft, var(--muted)); margin-bottom: 6px; }
.pnl2 .pnl-empty-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted, var(--muted)); }
.pnl2 .pnl-err { padding: 10px 12px; margin-bottom: 10px; border: 1px solid color-mix(in srgb, #ef4444 35%, var(--border)); border-radius: 10px; background: color-mix(in srgb, #ef4444 8%, transparent); color: #fca5a5; font-size: 12.5px; line-height: 1.5; }

/* mini chat */
.pnl2 .pnl-msgs { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; }
.pnl2 .pnl-msg { max-width: 92%; font-size: 12.5px; line-height: 1.5; padding: 8px 11px; border-radius: 12px; }
.pnl2 .pnl-msg-user { align-self: flex-end; color: var(--on-primary, #0F172A); background: linear-gradient(160deg, var(--acc), var(--acc2)); border-bottom-right-radius: 4px; }
.pnl2 .pnl-msg-ai { align-self: flex-start; color: var(--text-body, var(--text)); background: var(--surface-soft, #151C2B); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.pnl2 .pnl-typing { color: var(--text-muted, var(--muted)); font-style: italic; }
.pnl2 .pnl-msg-err { color: #fca5a5; }

/* barra de chat */
.pnl2 .pnl-chatbar { padding: 8px 0 12px; border-top: 1px dashed var(--border); margin-top: 2px; }
.pnl2 .pnl-chatbar[hidden] { display: none; }
.pnl2 .pnl-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pnl2 .pnl-quick button { font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text-muted, var(--muted)); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.pnl2 .pnl-quick button:hover { color: var(--text); border-color: color-mix(in srgb, var(--acc) 40%, var(--border)); background: color-mix(in srgb, var(--acc) 8%, transparent); }
.pnl2 .pnl-inrow { display: flex; align-items: flex-end; gap: 8px; }
.pnl2 .pnl-inrow textarea { flex: 1; resize: none; font-family: inherit; font-size: 12.5px; line-height: 1.4; color: var(--text); background: var(--surf, #0f1319); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; max-height: 110px; transition: border-color .15s; }
.pnl2 .pnl-inrow textarea:focus { outline: none; border-color: color-mix(in srgb, var(--acc) 50%, var(--border)); }
.pnl2 .pnl-inline-send { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; border: 0; cursor: pointer; color: var(--on-primary, #0F172A); background: linear-gradient(160deg, var(--acc), var(--acc2)); font-size: 14px; transition: filter .15s; }
.pnl2 .pnl-inline-send:hover { filter: brightness(1.06); }

@media (max-width: 880px) {
  .pnl2 .pnl-res { grid-template-columns: 1fr; }
  .pnl2 .pnl-inline-scroll { max-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .pnl2 .pnl-inline, .pnl2 .pnl-skel-dot, .pnl2 .pnl-skel-bars span { animation: none; }
}
/* ── fim Agente do Painel inline ── */

/* Cards do agente DENTRO do modal antigo (#agent-ph-text) — Documentação/Objeções.
   1 coluna (modal é estreito) + reset, p/ a resposta nunca aparecer como JSON/texto solto. */
.aip-modal { display: block; }
.aip-modal .pnl-res { grid-template-columns: 1fr; gap: 9px; padding: 0; }
.aip-modal .pnl-rc { background: linear-gradient(180deg, var(--surface-soft, #151C2B), var(--surface, #141923)); }
/* ── fim cards no modal ── */

/* Gating VISUAL por plano (UX) — card bloqueado + badge de upgrade + CTA desabilitado.
   Backend continua sendo a autoridade; isto é só aparência/conversão. */
.agent-card.agent-locked { opacity: .9; }
.pnl2 .pnl-badge.pnl-badge-upgrade { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 48%, var(--border)); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.pnl2 .pnl-btn-primary.pnl-btn-locked, .pnl2 .pnl-btn-primary[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.45); box-shadow: none; }
.pnl2 .pnl-btn-primary.pnl-btn-locked:hover, .pnl2 .pnl-btn-primary[disabled]:hover { filter: grayscale(.45); box-shadow: none; }
/* ── fim gating de plano ── */

/* ═══════════════════════════════════════════════════════════════════════════
   HISTÓRICO DOS AGENTES — drawer por lead+agente (.ahist-*). Não é central:
   mostra 1 agente/contexto. Premium dark, escaneável, responsivo.
   ═══════════════════════════════════════════════════════════════════════════ */
.ahist-ov { position: fixed; inset: 0; z-index: 99992; display: flex; justify-content: flex-end; background: rgba(3, 6, 14, .58); backdrop-filter: blur(2px); }
.ahist-ov[hidden] { display: none; }
.ahist-panel { width: 460px; max-width: 94vw; height: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, #111827, #0d1320); border-left: 1px solid rgba(148, 163, 184, .22); box-shadow: -18px 0 40px -16px rgba(0, 0, 0, .6); animation: ahistIn .24s ease both; }
@keyframes ahistIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.ahist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; border-bottom: 1px solid rgba(148, 163, 184, .16); }
.ahist-title { font-size: 14px; font-weight: 800; color: #f8fafc; letter-spacing: -.2px; }
.ahist-head-acts { display: flex; align-items: center; gap: 8px; }
.ahist-clear { font-family: inherit; font-size: 11px; font-weight: 700; color: #fca5a5; background: transparent; border: 1px solid rgba(239, 68, 68, .35); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.ahist-clear:hover { background: rgba(239, 68, 68, .1); }
.ahist-x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, .22); background: transparent; color: #aab7cc; cursor: pointer; font-size: 13px; }
.ahist-x:hover { color: #f8fafc; }
.ahist-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid rgba(148, 163, 184, .12); }
.ahist-fbtn { font-family: inherit; font-size: 11px; font-weight: 600; color: #aab7cc; background: transparent; border: 1px solid rgba(148, 163, 184, .2); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.ahist-fbtn.on, .ahist-fbtn:hover { color: #0f172a; background: linear-gradient(160deg, var(--acc, #f5c518), var(--acc2, #e0a800)); border-color: transparent; }
.ahist-list { flex: 1; overflow-y: auto; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.ahist-empty { color: #8892b0; font-size: 12.5px; text-align: center; padding: 30px 12px; }
.ahist-item { border: 1px solid rgba(148, 163, 184, .16); border-radius: 12px; padding: 11px 13px; background: #151c2b; }
.ahist-it-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.ahist-date { font-size: 11px; font-weight: 600; color: #7c8aa5; font-variant-numeric: tabular-nums; }
.ahist-risk { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; color: #aab7cc; border: 1px solid rgba(148, 163, 184, .25); }
.ahist-risk.ahist-risk-alto { color: #fca5a5; border-color: rgba(239, 68, 68, .4); }
.ahist-risk.ahist-risk-medio { color: #f59e0b; border-color: rgba(245, 158, 11, .4); }
.ahist-risk.ahist-risk-baixo { color: #34d399; border-color: rgba(52, 211, 153, .4); }
.ahist-sum { font-size: 12.5px; line-height: 1.45; color: #e2e8f0; }
.ahist-det { margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(148, 163, 184, .16); display: flex; flex-direction: column; gap: 8px; }
.ahist-f b { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #7c8aa5; margin-bottom: 3px; }
.ahist-f p { margin: 0; font-size: 12px; line-height: 1.45; color: #e2e8f0; }
.ahist-ul { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.45; color: #e2e8f0; }
.ahist-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.ahist-acts button { font-family: inherit; font-size: 11px; font-weight: 600; color: #aab7cc; background: transparent; border: 1px solid rgba(148, 163, 184, .2); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.ahist-acts button:hover { color: #f8fafc; border-color: rgba(148, 163, 184, .4); }
.ahist-acts .ahist-del { color: #fca5a5; border-color: rgba(239, 68, 68, .3); }
.ahist-acts .ahist-del:hover { background: rgba(239, 68, 68, .1); }

/* botão "🕘 Histórico" no header inline do agente */
.pnl2 .pnl-inline-bar .pnl-hist-btn { margin-left: auto; margin-right: 8px; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text-muted, #8892b0); background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.pnl2 .pnl-inline-bar .pnl-hist-btn:hover { color: var(--text, #eef2ff); border-color: var(--text-soft, #7c8aa5); }
/* botão Histórico na lista de Documentação/PAC */
.doc-hist-btn { font-family: inherit; font-size: 11px; font-weight: 600; color: var(--muted, #8892b0); background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; cursor: pointer; margin-left: 6px; }
.doc-hist-btn:hover { color: var(--text, #eef2ff); border-color: var(--muted, #8892b0); }

@media (max-width: 560px) { .ahist-panel { width: 100vw; max-width: 100vw; border-left: 0; } }
/* ── fim histórico dos agentes ── */

/* ═══════════════════════════════════════════════════════════════════════════
   Fase C — Card de PENDING ACTION (confirmação humana) no modal do agente.
   Aditivo, escopado em .agent-ph-pending / .aphp-*. NÃO redesenha a UI.
   ═══════════════════════════════════════════════════════════════════════════ */
.agent-ph-pending { margin-top: 12px; }
.aphp-card { border: 1px solid color-mix(in srgb, var(--acc, #f59e0b) 38%, var(--border)); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--acc, #f59e0b) 7%, var(--surface, #141923)); display: flex; flex-direction: column; gap: 7px; }
.aphp-h { display: flex; align-items: center; gap: 8px; }
.aphp-badge { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: var(--acc, #f59e0b); border: 1px solid color-mix(in srgb, var(--acc, #f59e0b) 40%, var(--border)); }
.aphp-badge.aphp-risk-alto { color: #ef4444; border-color: color-mix(in srgb, #ef4444 42%, var(--border)); }
.aphp-badge.aphp-risk-baixo { color: #16a34a; border-color: color-mix(in srgb, #16a34a 38%, var(--border)); }
.aphp-title { font-size: 13.5px; font-weight: 700; color: var(--text, #eef2ff); }
.aphp-desc { font-size: 12.5px; line-height: 1.5; color: var(--muted, #8892b0); }
.aphp-draftbox { font-size: 12.5px; line-height: 1.5; color: var(--text, #eef2ff); white-space: pre-wrap; background: var(--surf, #0f1319); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; }
.aphp-msg { font-size: 12px; min-height: 0; }
.aphp-msg.aphp-ok { color: #16a34a; }
.aphp-msg.aphp-err { color: #ef4444; }
.aphp-msg.aphp-loading { color: var(--muted, #8892b0); }
.aphp-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.aphp-confirm, .aphp-cancel { font-family: inherit; font-size: 12.5px; font-weight: 700; border-radius: 9px; padding: 8px 14px; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s; }
.aphp-confirm { color: var(--on-primary, #0F172A); background: linear-gradient(160deg, var(--acc, #f59e0b), var(--acc2, #d97706)); }
.aphp-confirm:hover { filter: brightness(1.06); }
.aphp-cancel { color: var(--muted, #8892b0); background: transparent; border-color: var(--border); }
.aphp-cancel:hover { color: var(--text, #eef2ff); border-color: var(--muted, #8892b0); }
.aphp-confirm[disabled], .aphp-cancel[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.3); }
/* ── fim Fase C pending action ── */


/* ═══════════════════════════════════════════════════════════════════════════
   ECOSSISTEMA — SELETOR DE PLANETAS (substitui o hub radial)
   Portado de preview-seletor.html. TUDO escopado sob #capa-ocaf.
   Cor temática por módulo via --ps-accent (setada no JS em #capa-ocaf), isolada
   do --accent do app. Só transform/opacity/filter; desligado em reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Neutraliza o grid/radial do hub antigo quando o stage hospeda o seletor.
   ID + 2 classes vence qualquer regra .eco-stage (inclusive em media query). */
#capa-ocaf .eco-stage.eco-stage--psel {
  display: flex; flex-direction: column; gap: 10px;
  position: relative; width: min(1500px, calc(100vw - 96px)); max-width: min(1500px, calc(100vw - 96px)); align-self: stretch;
  height: auto !important; min-height: 0; margin: 0 auto; padding: 0; overflow-x: clip;
  transform: none !important; transform-style: flat;
}
#capa-ocaf .eco-stage.eco-stage--psel .eco-links,
#capa-ocaf .eco-stage.eco-stage--psel .eco-ring,
#capa-ocaf .eco-stage.eco-stage--psel .eco-core { display: none !important; }
/* a saudação grande passa a ser o topo do seletor; o cabeçalho estático antigo sai */
#capa-ocaf .eco-hub > .eco-header { display: none; }
/* dá respiro vertical: o hub do seletor ocupa a altura útil da capa */
#capa-ocaf .eco-hub.capa-hub { max-width: min(1500px, calc(100vw - 80px)); height: 100dvh; box-sizing: border-box; padding: clamp(10px,2vh,24px) 28px clamp(10px,2vh,20px); justify-content: flex-start; }
/* tudo em UMA tela: hub-content flexível, dock/rodapé fixos embaixo (igual ao modelo) */
#capa-ocaf .eco-hub.capa-hub > .eco-stage.eco-stage--psel { flex: 1 1 auto; min-height: 0; }
#capa-ocaf .eco-stage.eco-stage--psel > .psel { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: clamp(6px,1.4vh,16px); }
#capa-ocaf .eco-stage.eco-stage--psel > .psel > .psel-stage { min-height: 0; }
#capa-ocaf .eco-stage.eco-stage--psel .psel-orb { max-height: 100%; }
#capa-ocaf .eco-stage.eco-stage--psel .psel-info { max-height: 100%; }
/* fundo limpo (estilo protótipo): esconde a constelação/grade/faixas da capa sob o seletor */
#capa-ocaf:has(.eco-stage--psel) #capa-canvas,
#capa-ocaf:has(.eco-stage--psel) .capa-grid-bg,
#capa-ocaf:has(.eco-stage--psel) .capa-stars-band { display: none !important; }

/* tokens locais (capa é sempre dark, então o seletor é dark em ambos os temas) */
#capa-ocaf .psel {
  --ps-text:#eef3ff; --ps-muted:#a7b6d6; --ps-muted2:#73839f;
  --ps-glass:rgba(255,255,255,.05); --ps-glass2:rgba(255,255,255,.09);
  --ps-stroke:rgba(255,255,255,.10); --ps-stroke2:rgba(255,255,255,.16);
  --ps-card:rgba(13,19,36,.66); --ps-card-2:rgba(9,13,26,.50);
  --ps-ease:cubic-bezier(.22,1,.36,1);
  position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; color: var(--ps-text);
}
#capa-ocaf { --ps-accent:#5b9dff; }

/* ---- Saudação grande ---- */
#capa-ocaf .psel-top { position: relative; text-align: center; padding: clamp(4px,1.6vh,16px) clamp(16px,3vw,40px) 2px; }
#capa-ocaf .psel-welcome { display: inline-block; line-height: 1.06; }
#capa-ocaf .psel-hw1 { display: block; font-size: clamp(14px,1.3vw,20px); font-weight: 500; color: var(--ps-muted); letter-spacing: 2.4px; text-transform: uppercase; }
#capa-ocaf .psel-hw1 b { color: #fff; font-weight: 700; transition: color .5s var(--ps-ease); }
#capa-ocaf .psel-hw2 {
  display: block; margin-top: 8px; font-size: clamp(34px,5vw,70px); font-weight: 800; letter-spacing: .5px; line-height: .96;
  background: linear-gradient(180deg,#ffffff 0%, #d6e4ff 52%, color-mix(in srgb, var(--ps-accent) 78%,#fff) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 34px color-mix(in srgb, var(--ps-accent) 42%, transparent));
  transition: filter .5s var(--ps-ease); animation: pselWelcomeIn .9s var(--ps-ease) both;
}
@keyframes pselWelcomeIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }
#capa-ocaf .psel-hint { position: absolute; top: 50%; right: clamp(8px,2vw,30px); transform: translateY(-50%); margin: 0; font-size: 12px; color: var(--ps-muted2); display: inline-flex; gap: 8px; align-items: center; }
#capa-ocaf .psel-kbd { font: 600 11px/1 'Inter', system-ui, sans-serif; padding: 5px 8px; border: 1px solid var(--ps-stroke2); border-radius: 8px; background: var(--ps-glass2); color: #cdd9f2; box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); }

/* ---- Palco: planeta + info ---- */
#capa-ocaf .psel-stage { display: grid; grid-template-columns: minmax(380px,1.08fr) minmax(380px,.92fr); align-items: center; gap: clamp(40px,6vw,110px); padding: 0 clamp(12px,2.5vw,44px); min-height: 0; }

/* Planeta */
#capa-ocaf .psel-planet-zone { position: relative; display: grid; place-items: center; min-height: 0; }
#capa-ocaf .psel-orb {
  position: relative; width: clamp(340px, min(38vw, 54vh), 560px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .5s var(--ps-ease), opacity .4s var(--ps-ease);
  animation: pselFloaty 8s ease-in-out infinite;
}
/* brilho externo amplo (presença/halo) */
#capa-ocaf .psel-orb::before {
  content: ""; position: absolute; inset: -16%; border-radius: 50%; z-index: -2; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--ps-accent) 34%, transparent) 0%, color-mix(in srgb, var(--ps-accent) 12%, transparent) 38%, transparent 66%);
  opacity: .85;
}
/* halo atmosférico fino abraçando a esfera (mais forte no lado da luz) */
#capa-ocaf .psel-orb::after {
  content: ""; position: absolute; inset: 13%; border-radius: 50%; z-index: 0; pointer-events: none;
  box-shadow:
    0 0 14px 1px color-mix(in srgb, var(--ps-accent) 42%, transparent),
    -4px -5px 18px -2px color-mix(in srgb, var(--ps-accent) 34%, #cfe0ff);
  opacity: .55;
}
/* Anel 3D em duas metades (montado pelo renderEcosystem; só com .psel-orb--ring):
   a metade de TRÁS fica sob a bola e a da FRENTE sobre ela → o anel "atravessa". */
#capa-ocaf .psel-ring3d {
  position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; display: none;
  transform: rotateX(76deg);
  background: radial-gradient(circle,
    transparent 53.5%,
    color-mix(in srgb, var(--ps-accent) 40%, #d7dfee) 55% 57.5%,
    transparent 57.5% 58.8%,
    color-mix(in srgb, var(--ps-accent) 26%, #8f9cb6) 58.8% 62.5%,
    transparent 62.5% 63.6%,
    color-mix(in srgb, var(--ps-accent) 34%, #b7c2d8) 63.6% 65.2%,
    transparent 65.6%);
  opacity: .72;
}
#capa-ocaf .psel-orb--ring .psel-ring3d { display: block; }
#capa-ocaf .psel-ring3d-back  { clip-path: inset(0 0 50% 0); z-index: 0; opacity: .5; }
#capa-ocaf .psel-ring3d-front { clip-path: inset(50% 0 0 0); z-index: 2; }
#capa-ocaf .psel-ball {
  position: absolute; inset: 14%; border-radius: 50%; overflow: hidden; z-index: 1;
  background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--ps-accent) 46%,#060a14) 0%, color-mix(in srgb, var(--ps-accent) 30%,#04060d) 54%, #03050c 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ps-accent) 30%, transparent),
    0 0 20px 1px color-mix(in srgb, var(--ps-accent) 40%, transparent),
    0 34px 100px -22px color-mix(in srgb, var(--ps-accent) 62%, transparent),
    0 0 140px 10px color-mix(in srgb, var(--ps-accent) 20%, transparent);
  transition: box-shadow .5s var(--ps-ease);
}
/* Superfície: textura procedural grayscale (data-URL via JS) TINGIDA pelo accent
   por background-blend-mode. O [data-tex] antigo permanece como fallback sem canvas. */
#capa-ocaf .psel-surface {
  position: absolute; inset: 0; border-radius: 50%;
  background-repeat: repeat; background-position: 0 0;
  background-color: color-mix(in srgb, var(--ps-accent) 60%, #081020);
  background-blend-mode: overlay;
  animation: pselPlanetSpin var(--ps-spin,18s) linear infinite;
}
@keyframes pselPlanetSpin { to { background-position: -200% 0; } }
/* Nuvens do planeta oceânico: camada alpha girando ~1.45× mais rápido (paralaxe) */
#capa-ocaf .psel-clouds {
  position: absolute; inset: 0; border-radius: 50%; display: none; pointer-events: none;
  background-repeat: repeat; background-position: 0 0; background-size: 200% 100%;
  animation: pselPlanetSpin calc(var(--ps-spin,18s) / 1.45) linear infinite;
  opacity: .8; filter: blur(.4px);
}
/* Iluminação: specular + luz de dia + TERMINADOR (dia→noite) com lado noturno
   quase preto (só luz ambiente) — fonte de luz fixa no alto-esquerdo (30%/25%). */
#capa-ocaf .psel-shade {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.32) 0%, rgba(255,255,255,.10) 9%, transparent 20%),
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.10) 0%, transparent 52%),
    radial-gradient(115% 115% at 30% 25%, transparent 36%, rgba(2,4,10,.18) 54%, rgba(2,4,10,.55) 71%, rgba(1,2,6,.86) 87%, rgba(0,1,4,.96) 100%);
}
/* Sombra do anel projetada no hemisfério inferior (só quando o planeta tem anel) */
#capa-ocaf .psel-orb--ring .psel-shade::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(176deg, transparent 56%, rgba(0,2,8,.26) 61%, rgba(0,2,8,.10) 65%, transparent 69%);
}
/* Limbo: atmosfera acesa no lado da luz + queda profunda no lado noturno */
#capa-ocaf .psel-ball::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow:
    inset 3px 4px 14px rgba(255,255,255,.15),
    inset 0 0 30px -4px color-mix(in srgb, var(--ps-accent) 52%, transparent),
    inset -18px -22px 48px -10px rgba(1,3,9,.85); }
/* Fallbacks procedurais CSS (usados só se o canvas falhar — o JS não injeta bg) */
#capa-ocaf .psel-surface[data-tex="bands"],
#capa-ocaf .psel-surface[data-tex="gas"] {
  background-image:
    repeating-linear-gradient(92deg, transparent 0 7%, rgba(255,255,255,.05) 7% 8.4%, transparent 8.4% 16%),
    repeating-linear-gradient(3deg, color-mix(in srgb, var(--ps-accent) 90%,#fff) 0 3.5%, var(--ps-accent) 3.5% 9%, color-mix(in srgb, var(--ps-accent) 50%,#000) 9% 14%, color-mix(in srgb, var(--ps-accent) 72%,#000) 14% 21%);
  background-size: 55% 100%, 100% 100%;
}
#capa-ocaf .psel-surface[data-tex="spots"],
#capa-ocaf .psel-surface[data-tex="rock"] {
  background-color: color-mix(in srgb, var(--ps-accent) 55%,#070a12);
  background-image:
    radial-gradient(circle at 26% 34%, color-mix(in srgb,#fff 55%,var(--ps-accent)) 0 3%, transparent 5.5%),
    radial-gradient(circle at 68% 62%, color-mix(in srgb,#000 50%,var(--ps-accent)) 0 5%, transparent 7.5%),
    radial-gradient(circle at 48% 82%, color-mix(in srgb,#fff 30%,var(--ps-accent)) 0 2.4%, transparent 4.5%),
    radial-gradient(circle at 84% 22%, color-mix(in srgb,#000 40%,var(--ps-accent)) 0 4%, transparent 6.5%);
  background-size: 46% 58%, 54% 70%, 38% 50%, 50% 64%;
}
#capa-ocaf .psel-surface[data-tex="swirl"],
#capa-ocaf .psel-surface[data-tex="ice"],
#capa-ocaf .psel-surface[data-tex="ocean"] {
  background-image:
    repeating-linear-gradient(118deg, color-mix(in srgb, var(--ps-accent) 88%,#fff) 0 2.6%, var(--ps-accent) 2.6% 7%, color-mix(in srgb, var(--ps-accent) 52%,#000) 7% 12%, color-mix(in srgb, var(--ps-accent) 74%,#000) 12% 19%);
  background-size: 66% 100%;
}
#capa-ocaf .psel-aura {
  position: absolute; inset: 0; border-radius: 50%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--ps-accent) 55%, transparent), transparent 40%, color-mix(in srgb, var(--ps-accent) 30%, transparent) 60%, transparent);
  filter: blur(22px); opacity: .7; animation: pselSpin 16s linear infinite;
}
/* círculo-guia bem discreto (presença orbital, sem "cromo" artificial) */
#capa-ocaf .psel-ring { position: absolute; inset: -4%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ps-accent) 16%, transparent); box-shadow: 0 0 22px -10px color-mix(in srgb, var(--ps-accent) 35%, transparent); animation: pselRingPulse 6s ease-in-out infinite; }
@keyframes pselRingPulse { 0%,100% { opacity: .35; } 50% { opacity: .6; } }
#capa-ocaf .psel-ico { position: relative; z-index: 3; width: 30%; height: 30%; color: #fff; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
#capa-ocaf .psel-ico svg { width: 100%; height: 100%; }
#capa-ocaf .psel-num { position: absolute; bottom: clamp(0px,2vh,14px); left: 50%; transform: translateX(-50%); font: 700 13px/1 'Inter', system-ui, sans-serif; letter-spacing: 4px; color: color-mix(in srgb, var(--ps-accent) 55%, var(--ps-muted2)); }

/* Painel de informação */
#capa-ocaf .psel-info {
  max-width: 552px; padding: clamp(24px,2.4vw,38px) clamp(26px,2.4vw,40px); border-radius: 26px;
  background:
    radial-gradient(140% 92% at 100% 0%, color-mix(in srgb, var(--ps-accent) 14%, transparent), transparent 58%),
    linear-gradient(165deg, var(--ps-card), var(--ps-card-2));
  border: 1px solid var(--ps-stroke2);
  box-shadow: 0 44px 100px -52px #000, 0 0 0 1px rgba(255,255,255,.02) inset, 0 1px 0 rgba(255,255,255,.05) inset;
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  transition: opacity .45s var(--ps-ease), transform .55s var(--ps-ease), border-color .5s var(--ps-ease), background .5s var(--ps-ease);
}
#capa-ocaf .psel-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: 2.8px; text-transform: uppercase; color: color-mix(in srgb, var(--ps-accent) 80%,#fff); margin-bottom: clamp(12px,1.6vh,18px); }
#capa-ocaf .psel-eyebrow .psel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ps-accent); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--ps-accent) 80%, transparent); animation: pselRingPulse 2.6s ease-in-out infinite; }
#capa-ocaf .psel-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 0 clamp(12px,1.6vh,18px) 10px; padding: 6px 11px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ps-accent) 46%, transparent);
  background: color-mix(in srgb, var(--ps-accent) 18%, rgba(255,255,255,.04));
  color: #f7fbff; font: 800 10px/1 'Inter', system-ui, sans-serif; letter-spacing: 1.8px; text-transform: uppercase;
  box-shadow: 0 0 18px -10px var(--ps-accent), inset 0 1px 0 rgba(255,255,255,.12);
}
#capa-ocaf .psel-badge[hidden] { display: none !important; }
#capa-ocaf .psel-title { font-size: clamp(28px,4.1vw,46px); line-height: 1.03; font-weight: 800; letter-spacing: -1.2px; margin: 0 0 12px; color: #fff; }
#capa-ocaf .psel-tagline { font-size: 15px; line-height: 1.55; color: var(--ps-muted); margin: 0 0 clamp(12px,1.6vh,18px); max-width: 44ch; }
#capa-ocaf .psel-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(12px,1.6vh,18px); }
#capa-ocaf .psel-tag { font-size: 11.5px; font-weight: 600; color: #cfdcf5; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--ps-stroke2); transition: background .25s, border-color .25s, color .25s; }
#capa-ocaf .psel-feat { list-style: none; padding: 0; margin: 0 0 clamp(12px,1.8vh,20px); display: grid; gap: clamp(9px,1.2vh,13px); }
#capa-ocaf .psel-feat li { display: flex; gap: 12px; align-items: center; font-size: 14.5px; line-height: 1.4; color: #d8e2f6; }
#capa-ocaf .psel-feat svg { width: 22px; height: 22px; flex: 0 0 auto; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--ps-accent) 88%,#fff), var(--ps-accent)); border-radius: 50%; padding: 4px; box-sizing: border-box; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ps-accent) 35%, transparent), 0 6px 16px -7px var(--ps-accent); }
#capa-ocaf .psel-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 2px; }
#capa-ocaf .psel-highlight { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ps-muted); }
#capa-ocaf .psel-highlight svg { width: 15px; height: 15px; color: var(--ps-accent); flex: 0 0 auto; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ps-accent) 55%, transparent)); }
#capa-ocaf .psel-cta {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 14px 24px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ps-accent) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ps-accent) 96%, #fff), color-mix(in srgb, var(--ps-accent) 70%, #0a1830));
  color: #fff; font: 700 15px/1 'Inter', system-ui, sans-serif; letter-spacing: .2px;
  box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--ps-accent) 88%, transparent), inset 0 1px 0 rgba(255,255,255,.34);
  transition: transform .18s var(--ps-ease), box-shadow .25s, filter .2s;
}
#capa-ocaf .psel-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -14px var(--ps-accent); filter: brightness(1.06); }
#capa-ocaf .psel-cta svg { width: 17px; height: 17px; transition: transform .2s; }
#capa-ocaf .psel-cta:hover svg { transform: translateX(3px); }
#capa-ocaf .psel-sub { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--ps-muted2); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: inherit; }
#capa-ocaf .psel-sub:hover { color: var(--ps-accent); }

/* crossfade ao trocar */
#capa-ocaf .eco-stage--psel.psel-swapping .psel-orb { opacity: 0; transform: scale(.72) translateY(10px); }
#capa-ocaf .eco-stage--psel.psel-swapping .psel-info { opacity: 0; transform: translateX(14px); }

/* Seletor inferior */
#capa-ocaf .psel-selector { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; width: 100%; max-width: min(1360px, calc(100vw - 48px)); margin: 0 auto; padding: clamp(12px,1.8vh,22px) 0 clamp(8px,1.4vh,16px); }
#capa-ocaf .psel-track {
  flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none;
  padding: 8px 10px; border-radius: 20px;
  background: linear-gradient(180deg, var(--ps-card), var(--ps-card-2)); border: 1px solid var(--ps-stroke2);
  box-shadow: 0 30px 70px -38px #000, inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
}
#capa-ocaf .psel-track::-webkit-scrollbar { display: none; }
#capa-ocaf .psel-item {
  --psc: #60A5FA; position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 16px; border-radius: 13px; cursor: pointer; box-sizing: border-box;
  border: 1px solid transparent; background: transparent; color: var(--ps-muted2);
  font: 600 13px/1 'Inter', system-ui, sans-serif; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ps-ease);
}
#capa-ocaf .psel-item:hover { transform: translateY(-1px); }
#capa-ocaf .psel-item[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 18px; height: 2.5px; border-radius: 3px; background: var(--psc); box-shadow: 0 0 9px 1px var(--psc);
}
#capa-ocaf .psel-lbl { white-space: nowrap; }
#capa-ocaf .psel-item:hover { background: var(--ps-glass2); color: var(--ps-text); }
#capa-ocaf .psel-sel-ico { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; color: var(--psc); background: color-mix(in srgb, var(--psc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--psc) 32%, transparent); }
#capa-ocaf .psel-sel-ico svg { width: 18px; height: 18px; }
#capa-ocaf .psel-item-badge {
  margin-left: -2px; padding: 4px 7px; border-radius: 999px;
  color: color-mix(in srgb, var(--psc) 70%, #fff);
  background: color-mix(in srgb, var(--psc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--psc) 26%, transparent);
  font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
}
#capa-ocaf .psel-item[aria-selected="true"] {
  color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--psc) 30%, transparent), color-mix(in srgb, var(--psc) 15%, transparent));
  border-color: color-mix(in srgb, var(--psc) 60%, transparent);
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--psc) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
}
#capa-ocaf .psel-item[aria-selected="true"] .psel-sel-ico { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--psc) 85%,#fff), var(--psc)); border-color: transparent; box-shadow: 0 0 18px -2px var(--psc); }
#capa-ocaf .psel-arrow {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--ps-card), var(--ps-card-2)); border: 1px solid var(--ps-stroke2); color: #dbe6ff;
  box-shadow: 0 18px 40px -24px #000, inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .2s, transform .15s var(--ps-ease), border-color .2s, color .2s, box-shadow .2s;
}
#capa-ocaf .psel-arrow:hover { color: #fff; border-color: color-mix(in srgb, var(--ps-accent) 55%, var(--ps-stroke2)); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--ps-accent) 60%, #000); }
#capa-ocaf .psel-arrow:active { transform: scale(.92); }
#capa-ocaf .psel-arrow svg { width: 20px; height: 20px; }
#capa-ocaf .psel-arrow:focus-visible, #capa-ocaf .psel-item:focus-visible, #capa-ocaf .psel-cta:focus-visible, #capa-ocaf .psel-sub:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 3px; }

@keyframes pselFloaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pselSpin { to { transform: rotate(360deg); } }

/* ---- Camada de efeitos cósmicos (montada em #capa-ocaf, z entre canvas e conteúdo) ---- */
#capa-ocaf .psel-sky { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
  background: radial-gradient(135% 105% at 50% -12%, #0c1730 0%, #070c1c 44%, #03040b 100%); }
#capa-ocaf .psel-sky::before, #capa-ocaf .psel-sky::after { content: ""; position: absolute; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; }
#capa-ocaf .psel-sky::before { width: 62vmax; height: 62vmax; top: -28vmax; left: 50%; transform: translateX(-50%); opacity: .5; background: radial-gradient(circle, color-mix(in srgb, var(--ps-accent) 24%, transparent) 0%, transparent 62%); }
#capa-ocaf .psel-sky::after { width: 46vmax; height: 46vmax; bottom: -26vmax; right: -8vmax; opacity: .24; background: radial-gradient(circle, color-mix(in srgb, var(--ps-accent) 16%, #16244a) 0%, transparent 64%); }
/* feixes verticais de luz suaves (atmosfera, como na referência) */
#capa-ocaf .psel-beam {
  position: absolute; top: -12%; left: var(--bx,50%); width: var(--bw,8vw); height: 124%;
  transform: translateX(-50%); pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ps-accent) 22%, transparent) 32%, color-mix(in srgb, var(--ps-accent) 7%, transparent) 68%, transparent);
  filter: blur(30px); opacity: var(--bo,.4); animation: pselBeam 9s ease-in-out infinite var(--bd,0s);
}
@keyframes pselBeam { 0%,100% { opacity: calc(var(--bo,.4) * .55); } 50% { opacity: var(--bo,.4); } }
#capa-ocaf .psel-star {
  position: absolute; top: var(--t); left: var(--l);
  width: var(--s,2px); height: var(--s,2px); border-radius: 50%;
  background: var(--c,#fff); box-shadow: 0 0 var(--b,6px) var(--sp,.6px) var(--c,#fff);
  opacity: var(--o,.8); animation: pselTw var(--tw,4s) ease-in-out infinite var(--d,0s);
}
@keyframes pselTw { 0%,100% { opacity: var(--o,.8); transform: scale(1); } 50% { opacity: .18; transform: scale(.6); } }
/* faixa de via-láctea diagonal, bem sutil (profundidade de fundo) */
#capa-ocaf .psel-mway {
  position: absolute; inset: -12%; pointer-events: none; opacity: .55; filter: blur(2px);
  background:
    linear-gradient(112deg, transparent 28%, rgba(126,150,205,.045) 40%, rgba(168,186,228,.10) 50%, rgba(126,150,205,.045) 60%, transparent 72%),
    radial-gradient(38% 22% at 68% 34%, rgba(150,170,220,.07), transparent 70%),
    radial-gradient(30% 18% at 24% 66%, rgba(140,160,210,.05), transparent 70%);
}
/* estrelas de destaque: cruz de difração discreta */
#capa-ocaf .psel-star--big::before, #capa-ocaf .psel-star--big::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 15px;
  background: linear-gradient(to bottom, transparent, var(--c,#fff), transparent);
  transform: translate(-50%,-50%); opacity: .65;
}
#capa-ocaf .psel-star--big::after { transform: translate(-50%,-50%) rotate(90deg); }
/* Luas: esferas sombreadas em órbita INCLINADA (rotate: x compõe com o spin do
   transform) — z-index alterna no keyframe p/ a lua passar ATRÁS e NA FRENTE. */
#capa-ocaf .psel-sat { position: absolute; inset: -7%; border-radius: 50%; pointer-events: none; z-index: 2; rotate: x 66deg; }
#capa-ocaf .psel-sat::before {
  content: ""; position: absolute; top: 50%; left: -5px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #eef3ff 0%, #9daccb 42%, #39415c 76%, #131826 100%);
  box-shadow: 0 0 8px -1px color-mix(in srgb, var(--ps-accent) 45%, #fff);
}
#capa-ocaf .psel-sat-1 { animation: pselSpin 17s linear infinite, pselSatDepth 17s linear infinite; }
#capa-ocaf .psel-sat-2 { animation: pselSpin 27s linear infinite, pselSatDepth 27s linear infinite; animation-delay: -13s; }
#capa-ocaf .psel-sat-2::before { width: 7px; height: 7px; margin-top: -3.5px; opacity: .85; }
/* topo da órbita (≈ um quarto do giro) = lado de trás do planeta */
@keyframes pselSatDepth { 0%, 12.4% { z-index: 2; } 12.5%, 37.5% { z-index: 0; } 37.6%, 100% { z-index: 2; } }


/* Notebook: reduz gap e colunas (planeta escala via clamp) */
@media (max-width: 1280px) {
  #capa-ocaf .psel-stage { grid-template-columns: minmax(320px,1.08fr) minmax(320px,.92fr); gap: clamp(28px,4vw,72px); }
}
/* Tablet: 1 coluna, planeta protagonista em cima */
@media (max-width: 1040px) {
  #capa-ocaf .psel-stage { grid-template-columns: 1fr; gap: clamp(16px,3vh,28px); text-align: center; padding: 0 clamp(16px,4vw,40px); justify-items: center; }
  #capa-ocaf .psel-orb { width: clamp(280px, 52vw, 400px); }
  #capa-ocaf .psel-info { margin: 0 auto; max-width: 560px; text-align: left; }
  #capa-ocaf .psel-eyebrow { justify-content: flex-start; }
  #capa-ocaf .psel-hint { display: none; }
}
/* Mobile: empilha, planeta presente, CTA full-width, dock rolável */
@media (max-width: 560px) {
  #capa-ocaf .psel-hw2 { letter-spacing: .5px; }
  #capa-ocaf .psel-orb { width: clamp(240px, 68vw, 320px); }
  #capa-ocaf .psel-info { padding: 20px; border-radius: 20px; }
  #capa-ocaf .psel-badge { margin-left: 0; }
  #capa-ocaf .psel-cta { width: 100%; justify-content: center; }
  #capa-ocaf .psel-cta-row { justify-content: center; }
  #capa-ocaf .psel-selector { max-width: calc(100vw - 24px); }
  #capa-ocaf .psel-track { flex: 1; }
}

/* Movimento reduzido: tudo estático */
@media (prefers-reduced-motion: reduce) {
  #capa-ocaf .psel-orb, #capa-ocaf .psel-surface, #capa-ocaf .psel-clouds, #capa-ocaf .psel-aura,
  #capa-ocaf .psel-ring, #capa-ocaf .psel-ring3d,
  #capa-ocaf .psel-hw2, #capa-ocaf .psel-star, #capa-ocaf .psel-beam,
  #capa-ocaf .psel-sat-1, #capa-ocaf .psel-sat-2, #capa-ocaf .psel-eyebrow .psel-dot { animation: none !important; }
  #capa-ocaf .psel-orb, #capa-ocaf .psel-info { transition: opacity .2s linear !important; }
}

/* Defesa: com overlay/módulo aberto a capa some (display:none), então os FX param sozinhos */
/* ── fim Seletor de Planetas ── */

/* Finance ImobPilot — modal premium "Em breve" */
.eco-soon-modal { position: fixed; inset: 0; z-index: 9800; display: grid; place-items: center; padding: 24px; }
.eco-soon-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.eco-soon-card {
  position: relative; width: min(520px, calc(100vw - 32px)); padding: 34px 30px 28px; border-radius: 24px;
  color: #eef3ff; text-align: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(34,197,94,.18), transparent 58%),
    linear-gradient(165deg, rgba(13,19,36,.94), rgba(6,10,22,.96));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 100px -48px #000, 0 0 0 1px rgba(255,255,255,.03) inset, 0 1px 0 rgba(255,255,255,.08) inset;
}
.eco-soon-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #dbe6ff;
  cursor: pointer; font-size: 20px; line-height: 1;
}
.eco-soon-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.eco-soon-icon {
  width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: radial-gradient(circle at 34% 28%, #b7ffd5 0%, #22c55e 48%, #064e3b 100%);
  box-shadow: 0 18px 42px -14px rgba(34,197,94,.72), 0 1px 0 rgba(255,255,255,.42) inset;
}
.eco-soon-icon svg { width: 32px; height: 32px; }
.eco-soon-badge {
  display: inline-flex; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px;
  color: #bbf7d0; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.28);
  font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase;
}
.eco-soon-card h2 { margin: 0 0 12px; font-size: clamp(25px, 5vw, 34px); line-height: 1.05; color: #fff; letter-spacing: -.6px; }
.eco-soon-card p { margin: 0 auto 22px; max-width: 42ch; color: #aebddd; font-size: 14.5px; line-height: 1.6; }
.eco-soon-ok {
  display: inline-flex; align-items: center; justify-content: center; min-width: 128px; min-height: 44px; padding: 0 18px;
  border-radius: 13px; border: 1px solid rgba(34,197,94,.58);
  color: #fff; background: linear-gradient(180deg, #32d678, #168a4c);
  font: 800 14px/1 'Inter', system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 16px 36px -16px rgba(34,197,94,.72), inset 0 1px 0 rgba(255,255,255,.26);
}
.eco-soon-ok:hover { filter: brightness(1.05); transform: translateY(-1px); }
.eco-soon-close:focus-visible, .eco-soon-ok:focus-visible { outline: 2px solid #86efac; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .eco-soon-ok:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   AGENDA INTELIGENTE — UX SIMPLES / CRM-FIRST
══════════════════════════════════════════════════════════════════ */
.agenda-google-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0 24px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.agenda-google-main,
.agenda-google-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.agenda-google-main { min-width: 0; }
.agenda-google-main > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.agenda-google-main strong { color: var(--text); font-size: 14px; }
.agenda-google-main > div > span { color: var(--muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.agenda-google-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  color: #60a5fa;
  background: rgba(59,130,246,.11);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 13px;
}
.agenda-google-icon svg { width: 22px; height: 22px; }
.agenda-google-controls[hidden] { display: none !important; }
.agenda-status-badge.connected {
  color: #4ade80;
  border-color: rgba(74,222,128,.22);
  background: rgba(74,222,128,.08);
}
.agenda-status-badge.connected span { color: #4ade80; animation: none; }
.agenda-switch {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.agenda-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.agenda-switch > span {
  width: 38px;
  height: 22px;
  position: relative;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .18s ease, border-color .18s ease;
}
.agenda-switch > span::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}
.agenda-switch input:checked + span {
  background: #2563eb;
  border-color: #2563eb;
}
.agenda-switch input:checked + span::after { transform: translateX(16px); }
.agenda-switch input:focus-visible + span { outline: 3px solid rgba(59,130,246,.28); outline-offset: 2px; }

.agenda-advanced {
  margin-top: 28px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.agenda-advanced[hidden] { display: none !important; }
.agenda-advanced > summary {
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.agenda-advanced > summary::-webkit-details-marker { display: none; }
.agenda-advanced > summary::after {
  content: "⌄";
  margin-left: auto;
  font-size: 18px;
  transition: transform .18s ease;
}
.agenda-advanced[open] > summary::after { transform: rotate(180deg); }
.agenda-advanced-content {
  padding: 0 18px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.agenda-advanced-content .agenda-backend-card { margin-top: 18px; }

body.agenda-modal-open { overflow: hidden; }
.agenda-modal-box { max-width: 760px; }
.agenda-modal-header { align-items: flex-start; }
.agenda-modal-header > div { min-width: 0; }
.agenda-modal-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.agenda-modal-kicker {
  display: block;
  margin-bottom: 5px;
  color: #60a5fa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.agenda-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.agenda-form-span-2 { grid-column: span 2; }
.agenda-form-group label { text-transform: none; letter-spacing: 0; color: var(--muted); }
.agenda-form-group label > span { color: #fb7185; }
.agenda-form-group small {
  display: block;
  margin-top: 6px;
  color: var(--muted2);
  font-size: 11.5px;
}
.agenda-textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.agenda-input-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
.agenda-form-error {
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 10px;
  background: rgba(239,68,68,.09);
  color: #fca5a5;
  font-size: 12.5px;
  line-height: 1.45;
}
.agenda-form-error[hidden] { display: none; }
.agenda-google-options {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 14px;
  background: rgba(59,130,246,.055);
}
.agenda-check-row {
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}
.agenda-check-row input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: #2563eb; }
.agenda-check-row input:disabled { cursor: not-allowed; opacity: .45; }
.agenda-check-row > span { display: flex; flex-direction: column; gap: 3px; }
.agenda-check-row strong { color: var(--text); font-size: 13px; }
.agenda-check-row small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.agenda-info-box-modal { max-width: 520px; }
.agenda-info-box-modal .agenda-modal-body p {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
.agenda-info-box-modal .agenda-consent-note {
  margin-top: 14px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 12px;
  border-radius: 10px;
  background: rgba(59,130,246,.07);
  border: 1px solid rgba(59,130,246,.14);
}
.agenda-btn:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.agenda-btn-compact { min-height: 36px; padding: 0 11px; font-size: 11.5px; border-radius: 9px; }
.agenda-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.agenda-section-title span { color: #60a5fa; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.agenda-section-title h3 { margin: 4px 0 0; color: var(--text); font-size: 17px; }
.agenda-event-google {
  border-color: rgba(59,130,246,.25);
  background: linear-gradient(145deg, rgba(59,130,246,.08), rgba(59,130,246,.025));
}
.agenda-tag-google { color: #93c5fd; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.24); }
.agenda-tag-crm { color: #86efac; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2); }
.agenda-tag-neutral { color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.agenda-tag.tag-reuniao { color: #a5b4fc; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2); }
.agenda-mini-cal-day {
  appearance: none;
  font: inherit;
  color: inherit;
}
.agenda-mini-cal-day:focus-visible,
.agenda-btn:focus-visible,
.agenda-tab:focus-visible,
.agenda-modal-close:focus-visible,
.agenda-advanced > summary:focus-visible {
  outline: 3px solid rgba(59,130,246,.3);
  outline-offset: 2px;
}

[data-theme="light"] .agenda-google-card,
[data-theme="light"] .agenda-advanced {
  background: #fff;
  border-color: rgba(15,23,42,.1);
  box-shadow: 0 4px 18px rgba(15,23,42,.05);
}
[data-theme="light"] .agenda-google-icon { color: #2563eb; }
[data-theme="light"] .agenda-switch > span {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
[data-theme="light"] .agenda-advanced-content { border-top-color: rgba(15,23,42,.08); }
[data-theme="light"] .agenda-modal-box {
  background: #fff;
  border-color: rgba(15,23,42,.1);
  color: #0f172a;
  box-shadow: 0 30px 80px rgba(15,23,42,.24);
}
[data-theme="light"] .agenda-modal-header { border-bottom-color: rgba(15,23,42,.08); }
[data-theme="light"] .agenda-modal-header h3 { color: #0f172a; }
[data-theme="light"] .agenda-modal-close { background: #f1f5f9; color: #475569; }
[data-theme="light"] .agenda-modal-close:hover { background: #e2e8f0; color: #0f172a; }
[data-theme="light"] .agenda-form-error { color: #b91c1c; background: #fef2f2; }
[data-theme="light"] .agenda-google-options { background: #eff6ff; border-color: #bfdbfe; }
[data-theme="light"] .agenda-tag-neutral { background: #f1f5f9; border-color: #e2e8f0; }
[data-theme="light"] .agenda-event-google { background: #eff6ff; border-color: #bfdbfe; }

@media (max-width: 900px) {
  .agenda-google-card { align-items: flex-start; flex-direction: column; }
  .agenda-google-controls { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .agenda-modal-overlay { padding: 0; align-items: flex-end; }
  .agenda-modal-box {
    max-height: 94dvh;
    border-radius: 22px 22px 0 0;
  }
  .agenda-modal-header,
  .agenda-modal-body,
  .agenda-modal-footer { padding-left: 18px; padding-right: 18px; }
  .agenda-modal-header { padding-top: 20px; padding-bottom: 16px; }
  .agenda-modal-body { padding-top: 20px; padding-bottom: 20px; }
  .agenda-modal-footer {
    padding-top: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .agenda-form-grid { grid-template-columns: 1fr; gap: 0; }
  .agenda-form-span-2 { grid-column: span 1; }
  .agenda-modal-footer .agenda-btn { width: auto; flex: 1; }
  .agenda-google-controls { flex-direction: column; align-items: stretch; }
  .agenda-google-controls .agenda-btn { width: 100%; }
  .agenda-switch { width: 100%; }
  .agenda-event-card { flex-direction: column; padding: 18px; gap: 14px; }
  .agenda-event-time { width: auto; border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
  .agenda-event-actions { flex-direction: row; flex-wrap: wrap; }
  .agenda-event-actions .agenda-btn { width: auto; flex: 1; min-width: 110px; }
  .agenda-section-title { align-items: flex-start; flex-direction: column; }
  .agenda-section-title .agenda-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .agenda-modal-overlay,
  .agenda-modal-box,
  .agenda-btn,
  .agenda-switch > span,
  .agenda-switch > span::after { transition: none !important; }
  .agenda-status-badge span { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   AGENDA V2 — REDESIGN PREMIUM (SaaS: Linear / Notion Calendar / Cron)
   2026-06-26 · só visual/UX · usa tokens existentes (auto dark/light)
   Regras no fim do arquivo: vencem por ordem-fonte. Não altera comportamento.
   ════════════════════════════════════════════════════════════════════════ */

/* Tokens semânticos da Agenda (auto-flip por tema; reaproveitam os globais) */
:root {
  --ag-gap: 18px;
  --ag-panel: var(--card);
  --ag-panel-2: var(--surf);
  --ag-line: var(--border);
  --ag-line-soft: var(--borderL);
  --ag-ring: var(--acc);
  --ag-elev: 0 1px 2px rgba(0,0,0,.18), 0 8px 28px rgba(0,0,0,.28);
  --ag-elev-hover: 0 2px 6px rgba(0,0,0,.22), 0 14px 40px rgba(0,0,0,.40);
  --ag-visita: var(--blue);
  --ag-ligacao: var(--purple);
  --ag-followup: var(--orange);
  --ag-reuniao: var(--green);
  --ag-documentacao: var(--acc);
  --ag-venda: var(--green);
}
body[data-theme="light"] {
  --ag-elev: 0 1px 2px rgba(15,23,42,.04), 0 10px 30px rgba(15,23,42,.08);
  --ag-elev-hover: 0 2px 6px rgba(15,23,42,.06), 0 16px 44px rgba(15,23,42,.12);
}

#module-agenda { color: var(--text); }

/* ── HEADER EXECUTIVO COMPACTO ─────────────────────────────────────────── */
#module-agenda .agenda-wrap { display: flex; flex-direction: column; gap: 14px; }
#module-agenda .agenda-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 18px 20px; border: 1px solid var(--ag-line); border-radius: var(--radius);
  background:
    radial-gradient(95% 120% at 100% 0%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--card2) 92%, var(--surf)), var(--card));
  box-shadow: var(--ag-elev);
}
/* Hotfix dark: fundo neutro/premium e sem brilho amarelo lateral.
   Scoped em [data-theme="dark"] (não afeta o modo claro, que usa a regra por tokens acima).
   Maior especificidade que "#module-agenda .agenda-hero" para vencer com segurança. */
[data-theme="dark"] #module-agenda .agenda-hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(59, 130, 246, .10), transparent 32%),
    linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(17, 24, 39, .98));
  border-color: rgba(148, 163, 184, .18);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
/* Botão continua amarelo, mas o HALO amarelo (que vazava sobre o fundo à direita)
   vira sombra neutra — só dentro da hero, sem tocar no botão do modal/outros. */
[data-theme="dark"] #module-agenda .agenda-hero-actions .agenda-btn-primary {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
[data-theme="dark"] #module-agenda .agenda-hero-actions .agenda-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .42);
}
#module-agenda .agenda-title-area { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#module-agenda .agenda-title-area h2 { margin: 2px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
#module-agenda .agenda-title-area p { margin: 0; font-size: 13px; color: var(--muted); max-width: 60ch; line-height: 1.45; }
#module-agenda .agenda-hero-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Badge de status no topo do header */
#module-agenda .agenda-status-badge {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em;
  color: var(--muted); background: var(--surf); border: 1px solid var(--ag-line);
}
#module-agenda .agenda-status-badge span[aria-hidden] { color: var(--muted2); font-size: 9px; }
#module-agenda .agenda-status-badge.connected { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
#module-agenda .agenda-status-badge.connected span[aria-hidden] { color: var(--green); }

/* ── BARRA GOOGLE CALENDAR (premium, parte do header) ──────────────────── */
#module-agenda .agenda-google-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border: 1px solid var(--ag-line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--card2)); box-shadow: var(--ag-elev);
}
#module-agenda .agenda-google-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
#module-agenda .agenda-google-icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 11px; color: var(--acc);
  background: color-mix(in srgb, var(--acc) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
}
#module-agenda .agenda-google-icon svg { width: 21px; height: 21px; }
#module-agenda #agenda-google-status-card.is-connected .agenda-google-icon { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); border-color: color-mix(in srgb, var(--green) 28%, transparent); }
#module-agenda .agenda-google-main > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#module-agenda #agenda-google-status-title { font-size: 14px; font-weight: 700; color: var(--text); }
#module-agenda #agenda-google-status-detail { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42ch; }
#module-agenda .agenda-google-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Chip "Sincronização ativa" injetado quando conectado */
.agenda-sync-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 26%, transparent);
}
.agenda-sync-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }

/* ── RESUMO RÁPIDO (cards compactos) ───────────────────────────────────── */
.agenda-summary { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin: 2px 0 4px; }
.agenda-sum-card {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px; min-width: 0;
  border: 1px solid var(--ag-line); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--card), var(--card2)); box-shadow: var(--ag-elev);
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.agenda-sum-card:hover { transform: translateY(-2px); box-shadow: var(--ag-elev-hover); border-color: color-mix(in srgb, var(--text) 14%, var(--ag-line)); }
.agenda-sum-ic { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; color: var(--muted); background: var(--surf); border: 1px solid var(--ag-line-soft); }
.agenda-sum-ic svg { width: 17px; height: 17px; }
.agenda-sum-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.agenda-sum-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); }
.agenda-sum-val { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-sum-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-sum-brand .agenda-sum-ic { color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); border-color: color-mix(in srgb, var(--acc) 24%, transparent); }
.agenda-sum-info .agenda-sum-ic { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); border-color: color-mix(in srgb, var(--blue) 24%, transparent); }
.agenda-sum-green .agenda-sum-ic { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 24%, transparent); }
.agenda-sum-warn .agenda-sum-ic { color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); border-color: color-mix(in srgb, var(--orange) 24%, transparent); }

/* ── LAYOUT PRINCIPAL: calendário (esq) + Agenda do dia (dir) ───────────── */
.agenda-main-grid { display: grid; grid-template-columns: minmax(0,1fr) 366px; gap: var(--ag-gap); align-items: start; margin-top: 4px; }
.agenda-main-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.agenda-main-right { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; }

/* ── TABS — SEGMENTED CONTROL PREMIUM ──────────────────────────────────── */
#module-agenda .agenda-tabs {
  display: inline-flex; gap: 3px; padding: 4px; align-self: flex-start; border: 1px solid var(--ag-line);
  border-radius: 12px; background: var(--surf); box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
#module-agenda .agenda-tab {
  padding: 7px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; border: 1px solid transparent; transition: all var(--trans); user-select: none; white-space: nowrap;
}
#module-agenda .agenda-tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
#module-agenda .agenda-tab.active {
  color: var(--text); background: var(--card); border-color: var(--ag-line);
  box-shadow: 0 1px 2px rgba(0,0,0,.18); font-weight: 700;
}
#module-agenda .agenda-tab.active { color: var(--acc); }

/* ── CALENDÁRIO PREMIUM (grande) ───────────────────────────────────────── */
#module-agenda .agenda-mini-cal {
  border: 1px solid var(--ag-line); border-radius: var(--radius); padding: 16px 16px 18px;
  background: linear-gradient(180deg, var(--card), var(--card2)); box-shadow: var(--ag-elev);
}
#module-agenda .agenda-mini-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#module-agenda .agenda-mini-cal-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--text); text-transform: capitalize; }
#module-agenda .agenda-mini-cal-nav {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; cursor: pointer;
  color: var(--muted); background: var(--surf); border: 1px solid var(--ag-line); font-size: 17px; line-height: 1; transition: all var(--trans);
}
#module-agenda .agenda-mini-cal-nav:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 18%, var(--ag-line)); background: var(--card); }
#module-agenda .agenda-mini-cal-weekdays { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 8px; }
#module-agenda .agenda-mini-cal-weekdays span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted2); }
#module-agenda .agenda-mini-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
#module-agenda .agenda-mini-cal-day {
  position: relative; aspect-ratio: 1 / .92; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--ag-line-soft); border-radius: 11px; cursor: pointer; background: var(--surf);
  color: var(--text); font-family: inherit; transition: all var(--trans);
}
#module-agenda .agenda-mini-cal-day.empty { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
#module-agenda .agenda-mini-cal-day:hover { background: var(--card); border-color: color-mix(in srgb, var(--text) 16%, var(--ag-line)); transform: translateY(-1px); box-shadow: var(--ag-elev); }
#module-agenda .agenda-mini-cal-day-num { font-size: 14px; font-weight: 600; }
#module-agenda .agenda-mini-cal-day.today { border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: color-mix(in srgb, var(--acc) 10%, var(--surf)); }
#module-agenda .agenda-mini-cal-day.today .agenda-mini-cal-day-num { color: var(--acc); font-weight: 800; }
#module-agenda .agenda-mini-cal-day.selected { border-color: var(--ag-ring); background: color-mix(in srgb, var(--acc) 18%, var(--surf)); box-shadow: 0 0 0 1px var(--ag-ring); }
#module-agenda .agenda-mini-cal-day.selected .agenda-mini-cal-day-num { color: var(--acc); font-weight: 800; }
#module-agenda .agenda-mini-cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 22%, transparent); }
#module-agenda .agenda-mini-cal-dot-none { width: 5px; height: 5px; }

/* ── ÁREA DE CONTEÚDO (Hoje/Semana/Mês/Lista) ──────────────────────────── */
#module-agenda .agenda-view-panel { border: 1px solid var(--ag-line); border-radius: var(--radius); padding: 16px; background: linear-gradient(180deg, var(--card), var(--card2)); box-shadow: var(--ag-elev); }
#module-agenda .agenda-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#module-agenda .agenda-section-title span:first-child,
#module-agenda .agenda-section-title > div > span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }
#module-agenda .agenda-section-title h3 { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--text); }

/* ── CARDS DE EVENTO (views Hoje/Semana/Lista) ─────────────────────────── */
#module-agenda .agenda-event-card {
  display: flex; align-items: stretch; gap: 14px; padding: 13px 15px; margin-bottom: 10px;
  border: 1px solid var(--ag-line); border-left: 3px solid var(--muted2); border-radius: var(--radius-sm);
  background: var(--card); box-shadow: var(--ag-elev); transition: all var(--trans);
}
#module-agenda .agenda-event-card:hover { transform: translateY(-1px); box-shadow: var(--ag-elev-hover); border-left-color: var(--acc); }
#module-agenda .agenda-event-card.agenda-event-google { border-left-color: var(--blue); background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 4%, var(--card)), var(--card)); }
#module-agenda .agenda-event-time { display: flex; flex-direction: column; gap: 2px; min-width: 56px; text-align: left; }
#module-agenda .agenda-event-time strong { font-size: 15px; font-weight: 800; color: var(--text); }
#module-agenda .agenda-event-time span { font-size: 11px; color: var(--muted2); }
#module-agenda .agenda-event-details { flex: 1; min-width: 0; }
#module-agenda .agenda-event-details h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }
#module-agenda .agenda-event-details p { margin: 0 0 7px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
#module-agenda .agenda-event-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#module-agenda .agenda-event-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; }

/* Tags de tipo + origem (pílulas premium) */
.agenda-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; background: var(--surf); color: var(--muted); border: 1px solid var(--ag-line); }
.agenda-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.agenda-tag.tag-visita { color: var(--ag-visita); }
.agenda-tag.tag-ligacao { color: var(--ag-ligacao); }
.agenda-tag.tag-followup { color: var(--ag-followup); }
.agenda-tag.tag-reuniao { color: var(--ag-reuniao); }
.agenda-tag.tag-documentacao { color: var(--ag-documentacao); }
.agenda-tag.tag-venda { color: var(--ag-venda); }
.agenda-tag-google { color: var(--blue) !important; }
.agenda-tag-crm { color: var(--green) !important; }
.agenda-tag-neutral { color: var(--muted2) !important; }
.agenda-chip-origin { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; border: 1px solid var(--ag-line); }
.agenda-chip-origin.g { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); border-color: color-mix(in srgb, var(--blue) 24%, transparent); }
.agenda-chip-origin.c { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 24%, transparent); }
.agenda-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.agenda-pill-ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.agenda-pill-warn { color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); }

/* ── PAINEL "AGENDA DO DIA" (coluna direita) ───────────────────────────── */
.agenda-day-panel, .agenda-upcoming { border: 1px solid var(--ag-line); border-radius: var(--radius); background: linear-gradient(180deg, var(--card), var(--card2)); box-shadow: var(--ag-elev); padding: 16px; }
.agenda-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.agenda-day-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }
.agenda-day-head h3 { margin: 3px 0 0; font-size: 17px; font-weight: 800; color: var(--text); text-transform: capitalize; }
.agenda-day-list { display: flex; flex-direction: column; gap: 9px; }
.agenda-day-item { display: flex; align-items: stretch; gap: 12px; padding: 11px 12px; border: 1px solid var(--ag-line); border-left: 3px solid var(--muted2); border-radius: var(--radius-sm); background: var(--card); transition: all var(--trans); }
.agenda-day-item:hover { transform: translateX(2px); border-left-color: var(--acc); box-shadow: var(--ag-elev); }
.agenda-day-item.is-google { border-left-color: var(--blue); }
.agenda-day-item.is-crm { border-left-color: var(--green); }
.agenda-day-time { display: flex; flex-direction: column; gap: 1px; min-width: 48px; }
.agenda-day-time strong { font-size: 14px; font-weight: 800; color: var(--text); }
.agenda-day-time span { font-size: 10.5px; color: var(--muted2); }
.agenda-day-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.agenda-day-title { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.agenda-day-client { font-size: 12px; color: var(--muted); }
.agenda-day-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 1px; }
.agenda-day-meet { align-self: center; padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; text-decoration: none; color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 26%, transparent); transition: all var(--trans); }
.agenda-day-meet:hover { background: color-mix(in srgb, var(--green) 20%, transparent); }

/* Empty state premium (comercial) */
.agenda-day-empty, .agenda-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 30px 18px; }
.agenda-day-empty svg, .agenda-empty-icon { width: 44px; height: 44px; color: var(--muted2); opacity: .9; margin-bottom: 2px; }
.agenda-empty-icon { font-size: 38px; line-height: 1; }
.agenda-day-empty strong, .agenda-empty-state h3 { font-size: 14.5px; font-weight: 700; color: var(--text); margin: 0; }
.agenda-day-empty p, .agenda-empty-state p { font-size: 12.5px; color: var(--muted); margin: 0; max-width: 34ch; line-height: 1.5; }
.agenda-day-empty .agenda-btn, .agenda-empty-state .agenda-btn { margin-top: 8px; }

/* ── PRÓXIMOS COMPROMISSOS ─────────────────────────────────────────────── */
.agenda-up-head { margin-bottom: 12px; }
.agenda-up-list { display: flex; flex-direction: column; gap: 2px; }
.agenda-up-item { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--ag-line-soft); }
.agenda-up-item:last-child { border-bottom: none; }
.agenda-up-date { display: flex; flex-direction: column; align-items: center; min-width: 44px; padding: 4px 0; border-radius: 8px; background: var(--surf); border: 1px solid var(--ag-line-soft); }
.agenda-up-date strong { font-size: 12px; font-weight: 800; color: var(--text); }
.agenda-up-date span { font-size: 10px; color: var(--muted2); }
.agenda-up-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.agenda-up-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-up-empty { font-size: 12.5px; color: var(--muted); padding: 6px 2px; }

/* ── HIERARQUIA DE BOTÕES ──────────────────────────────────────────────── */
#module-agenda .agenda-btn, .agenda-modal .agenda-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 10px; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; border: 1px solid var(--ag-line); background: var(--card); color: var(--text);
  transition: all var(--trans); white-space: nowrap;
}
#module-agenda .agenda-btn:hover, .agenda-modal .agenda-btn:hover { transform: translateY(-1px); box-shadow: var(--ag-elev); }
#module-agenda .agenda-btn:active, .agenda-modal .agenda-btn:active { transform: translateY(0); }
#module-agenda .agenda-btn:focus-visible, .agenda-modal .agenda-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
#module-agenda .agenda-btn:disabled, .agenda-modal .agenda-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
#module-agenda .agenda-btn-compact, .agenda-modal .agenda-btn-compact { height: 32px; padding: 0 12px; font-size: 12px; }
#module-agenda .agenda-btn-primary, .agenda-modal .agenda-btn-primary, #module-agenda .agenda-btn-success {
  color: #0b0c10; border-color: transparent;
  background: linear-gradient(180deg, var(--acc), var(--acc2)); box-shadow: 0 4px 14px var(--acc-glow);
}
#module-agenda .agenda-btn-primary:hover, .agenda-modal .agenda-btn-primary:hover, #module-agenda .agenda-btn-success:hover { box-shadow: 0 6px 20px var(--acc-glow); filter: brightness(1.04); }
#module-agenda .agenda-btn-secondary, .agenda-modal .agenda-btn-secondary { background: var(--surf); color: var(--text); border-color: var(--ag-line); }
#module-agenda .agenda-btn-secondary:hover, .agenda-modal .agenda-btn-secondary:hover { border-color: color-mix(in srgb, var(--text) 20%, var(--ag-line)); background: var(--card); }
#module-agenda .agenda-btn-danger, .agenda-modal .agenda-btn-danger { background: transparent; color: var(--red); border-color: color-mix(in srgb, var(--red) 32%, transparent); }
#module-agenda .agenda-btn-danger:hover, .agenda-modal .agenda-btn-danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
#module-agenda .agenda-btn-dark, #module-agenda .agenda-btn-outline, #module-agenda .agenda-btn-purple { background: var(--surf); color: var(--text); border-color: var(--ag-line); }

/* Switch "Exibir eventos" */
#module-agenda .agenda-switch { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }

/* ── MODAL NOVO AGENDAMENTO (profissional) ─────────────────────────────── */
.agenda-modal-overlay { background: rgba(5,8,15,.62); backdrop-filter: blur(6px); }
body[data-theme="light"] .agenda-modal-overlay { background: rgba(15,23,42,.34); }
.agenda-modal-box { border: 1px solid var(--ag-line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-lg), 0 0 0 1px var(--ag-line-soft); overflow: hidden; }
.agenda-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid var(--ag-line); background: linear-gradient(180deg, var(--card2), var(--card)); }
.agenda-modal-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.agenda-modal-header h3 { margin: 4px 0 2px; font-size: 19px; font-weight: 800; color: var(--text); }
.agenda-modal-header p { margin: 0; font-size: 12.5px; color: var(--muted); }
.agenda-modal-close { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--ag-line); background: var(--surf); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; transition: all var(--trans); }
.agenda-modal-close:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 20%, var(--ag-line)); }
.agenda-modal-body { padding: 18px 22px; max-height: min(70vh, 640px); overflow-y: auto; }
.agenda-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--ag-line); background: var(--card2); }

/* Seções do formulário */
.agenda-form-section { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 6px 0 -2px; }
.agenda-form-section:first-child { margin-top: 0; }
.agenda-form-section span { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted2); white-space: nowrap; }
.agenda-form-section::after { content: ""; flex: 1; height: 1px; background: var(--ag-line); }
.agenda-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.agenda-form-span-2 { grid-column: 1 / -1; }
.agenda-form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.agenda-form-group label { font-size: 12px; font-weight: 600; color: var(--muted); }
.agenda-form-group label span { color: var(--red); }
.agenda-input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ag-line); background: var(--surf);
  color: var(--text); font-size: 13.5px; font-family: inherit; transition: all var(--trans);
}
.agenda-input::placeholder { color: var(--muted2); }
.agenda-input:hover { border-color: color-mix(in srgb, var(--text) 16%, var(--ag-line)); }
.agenda-input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-glow); background: var(--card); }
.agenda-input.agenda-input-invalid { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.agenda-textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.agenda-form-group small { font-size: 11px; color: var(--muted2); }
.agenda-form-error { grid-column: 1 / -1; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); border: 1px solid color-mix(in srgb, var(--red) 26%, transparent); }

/* Bloco Google no modal */
.agenda-google-options { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid var(--ag-line); border-radius: 12px; background: var(--surf); }
.agenda-check-row { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.agenda-check-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--acc); cursor: pointer; flex-shrink: 0; }
.agenda-check-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .5; }
.agenda-check-row span { display: flex; flex-direction: column; gap: 1px; }
.agenda-check-row strong { font-size: 13px; font-weight: 700; color: var(--text); }
.agenda-check-row small { font-size: 11.5px; color: var(--muted); }
.agenda-check-row input:disabled ~ span strong { color: var(--muted); }

/* Modal de info Google + nota de consentimento */
.agenda-info-box-modal { max-width: 460px; }
.agenda-consent-note { font-size: 11.5px; color: var(--muted2); border-left: 2px solid var(--ag-line); padding-left: 10px; margin-top: 12px; line-height: 1.5; }

/* ── CONFIGURAÇÃO AVANÇADA (admin) — discreta ──────────────────────────── */
#module-agenda .agenda-advanced { margin-top: 8px; border: 1px solid var(--ag-line); border-radius: var(--radius); background: var(--surf); }
#module-agenda .agenda-advanced > summary { padding: 13px 16px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; list-style: none; }
#module-agenda .agenda-advanced > summary::-webkit-details-marker { display: none; }
#module-agenda .agenda-advanced[open] > summary { border-bottom: 1px solid var(--ag-line); color: var(--text); }
#module-agenda .agenda-advanced-content { padding: 16px; }

/* ── RESPONSIVO ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .agenda-summary { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1024px) {
  .agenda-main-grid { grid-template-columns: 1fr; }
  .agenda-main-right { position: static; flex-direction: row; flex-wrap: wrap; }
  .agenda-main-right > section { flex: 1 1 320px; }
}
@media (max-width: 720px) {
  #module-agenda .agenda-hero { flex-direction: column; align-items: stretch; gap: 14px; }
  #module-agenda .agenda-hero-actions { flex-direction: column; align-items: stretch; }
  #module-agenda .agenda-hero-actions .agenda-btn { width: 100%; }
  #module-agenda .agenda-google-card { flex-direction: column; align-items: stretch; }
  #module-agenda .agenda-google-main { width: 100%; max-width: 100%; }
  #module-agenda #agenda-google-status-title,
  #module-agenda #agenda-google-status-detail { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  #module-agenda .agenda-google-controls { justify-content: space-between; }
  .agenda-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #module-agenda .agenda-tabs { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .agenda-main-right { flex-direction: column; }
  .agenda-form-grid { grid-template-columns: 1fr; }
  .agenda-modal-overlay { padding: 0; }
  .agenda-modal-box { width: 100%; max-width: 100%; min-height: 100dvh; border-radius: 0; }
  .agenda-modal-body { max-height: none; flex: 1; }
}
@media (max-width: 460px) {
  .agenda-summary { grid-template-columns: 1fr; }
  #module-agenda .agenda-mini-cal-grid { gap: 4px; }
  #module-agenda .agenda-mini-cal-day { min-height: 40px; border-radius: 9px; }
}

/* Acessibilidade: foco visível consistente */
#module-agenda .agenda-tab:focus-visible,
#module-agenda .agenda-mini-cal-day:focus-visible,
#module-agenda .agenda-mini-cal-nav:focus-visible,
.agenda-check-row input:focus-visible,
.agenda-switch input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   REATIVAÇÃO DE LEADS — central premium (2026-06-26) · usa tokens (auto tema)
   ════════════════════════════════════════════════════════════════════════ */
#reativacao-body .rtv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0 0 16px; }
#reativacao-body .rtv-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, var(--card), var(--card2)); box-shadow: var(--shadow); border-left: 3px solid var(--muted2); }
#reativacao-body .rtv-kpi-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted2); }
#reativacao-body .rtv-kpi-val { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.15; }
#reativacao-body .rtv-kpi-sub { font-size: 11.5px; color: var(--muted); }
#reativacao-body .rtv-kpi-warn { border-left-color: var(--orange); }
#reativacao-body .rtv-kpi-info { border-left-color: var(--blue); }
#reativacao-body .rtv-kpi-green { border-left-color: var(--green); }
#reativacao-body .rtv-kpi-brand { border-left-color: var(--acc); }

#reativacao-body .rtv-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
#reativacao-body .rtv-chips { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surf); }
#reativacao-body .rtv-chip { padding: 7px 14px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); font: 600 12.5px/1 inherit; cursor: pointer; transition: all .18s; white-space: nowrap; }
#reativacao-body .rtv-chip:hover { color: var(--text); }
#reativacao-body .rtv-chip.active { color: var(--acc); background: var(--card); border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
#reativacao-body .rtv-selects { display: inline-flex; gap: 8px; flex-wrap: wrap; }
#reativacao-body .rtv-select { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surf); color: var(--text); font: 600 12.5px/1 inherit; cursor: pointer; }
#reativacao-body .rtv-select:hover { border-color: var(--muted2); }

#reativacao-body .rtv-count { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
#reativacao-body .rtv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
#reativacao-body .rtv-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, var(--card), var(--card2)); box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s, border-color .18s; }
#reativacao-body .rtv-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--text) 14%, var(--border)); }
#reativacao-body .rtv-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#reativacao-body .rtv-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
#reativacao-body .rtv-card-phone { font-size: 12px; color: var(--muted); margin-top: 1px; }
#reativacao-body .rtv-prio { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
#reativacao-body .rtv-meta { display: flex; flex-wrap: wrap; gap: 6px; }
#reativacao-body .rtv-stage { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
#reativacao-body .rtv-tag { font-size: 11px; font-weight: 600; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: var(--surf); border: 1px solid var(--borderL); }
#reativacao-body .rtv-info { display: grid; gap: 5px; padding: 10px 0; border-top: 1px solid var(--borderL); border-bottom: 1px solid var(--borderL); }
#reativacao-body .rtv-info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
#reativacao-body .rtv-info-row span { color: var(--muted2); flex: 0 0 auto; }
#reativacao-body .rtv-info-row b { color: var(--text); font-weight: 600; text-align: right; }
#reativacao-body .rtv-msg { font-size: 12.5px; line-height: 1.5; color: var(--muted); background: var(--surf); border: 1px solid var(--borderL); border-radius: 10px; padding: 10px 12px; }
#reativacao-body .rtv-actions { display: flex; flex-wrap: wrap; gap: 7px; }
#reativacao-body .rtv-btn { display: inline-flex; align-items: center; justify-content: center; height: 33px; padding: 0 13px; border-radius: 9px; font: 700 12px/1 inherit; cursor: pointer; text-decoration: none; border: 1px solid var(--border); background: var(--surf); color: var(--text); transition: all .16s; }
#reativacao-body .rtv-btn:hover { transform: translateY(-1px); border-color: var(--muted2); }
#reativacao-body .rtv-btn-primary { background: linear-gradient(180deg, var(--acc), var(--acc2)); color: #0b0c10; border-color: transparent; }
#reativacao-body .rtv-btn-wa { color: var(--green); border-color: color-mix(in srgb, var(--green) 32%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
#reativacao-body .rtv-btn-ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
#reativacao-body .rtv-btn-ghost { color: var(--muted); }
#reativacao-body .rtv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 20px; }
#reativacao-body .rtv-empty-ic { font-size: 40px; line-height: 1; }
#reativacao-body .rtv-empty strong { font-size: 15px; font-weight: 700; color: var(--text); }
#reativacao-body .rtv-empty p { font-size: 13px; color: var(--muted); margin: 0; max-width: 38ch; line-height: 1.5; }
@media (max-width: 880px) { #reativacao-body .rtv-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } #reativacao-body .rtv-filters { flex-direction: column; align-items: stretch; } #reativacao-body .rtv-chips { overflow-x: auto; } }
@media (max-width: 520px) { #reativacao-body .rtv-grid { grid-template-columns: 1fr; } }

/* ===== LEADS · IMPORTAÇÃO / EXPORTAÇÃO (dropdown + modal de prévia) ===== */
.leads-io-dd { position: relative; display: inline-block; }
.leads-io-dd-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 244px; background: var(--card, #161a23); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.45); padding: 6px; z-index: 1200; display: none; }
.leads-io-dd.open .leads-io-dd-menu { display: block; animation: lioFade .14s ease; }
@keyframes lioFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.leads-io-dd-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text, #e8ecf3); font-size: 13px; font-weight: 600; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.leads-io-dd-menu button:hover { background: color-mix(in srgb, var(--accent, #4d9fff) 16%, transparent); }
.leads-io-dd-sep { height: 1px; background: var(--border, rgba(255,255,255,.08)); margin: 4px 6px; }
.leads-io-dd-hint { font-size: 11px; color: var(--muted, #8a93a6); padding: 8px 10px 4px; line-height: 1.5; }

.leads-io-overlay { position: fixed; inset: 0; background: rgba(6,9,16,.62); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 9700; padding: 18px; }
.leads-io-modal { width: min(720px, 96vw); max-height: 88vh; overflow: auto; background: var(--card, #161a23); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.55); padding: 18px 20px 16px; animation: lioFade .16s ease; }
.leads-io-modal .lio-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.leads-io-modal .lio-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--text, #e8ecf3); }
.leads-io-modal .lio-x { background: transparent; border: 0; color: var(--muted, #8a93a6); font-size: 16px; cursor: pointer; line-height: 1; padding: 4px; border-radius: 8px; }
.leads-io-modal .lio-x:hover { background: rgba(255,255,255,.08); color: var(--text, #e8ecf3); }
.leads-io-modal .lio-stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.leads-io-modal .lio-stat { border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 12px; padding: 10px 8px; text-align: center; background: rgba(255,255,255,.02); }
.leads-io-modal .lio-stat b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--text, #e8ecf3); }
.leads-io-modal .lio-stat span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted, #8a93a6); }
.leads-io-modal .lio-stat.ok b { color: #10d98a; }
.leads-io-modal .lio-stat.warn b { color: #fbbf24; }
.leads-io-modal .lio-stat.dup b { color: #a855f7; }
.leads-io-modal .lio-stat.err b { color: #ff4d6d; }
.leads-io-modal .lio-tblwrap { border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 12px; overflow: auto; max-height: 320px; margin-bottom: 12px; }
.leads-io-modal .lio-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.leads-io-modal .lio-tbl th { position: sticky; top: 0; background: var(--card, #161a23); text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--muted, #8a93a6); padding: 9px 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,.1)); }
.leads-io-modal .lio-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,.05)); color: var(--text, #e8ecf3); white-space: nowrap; }
.leads-io-modal .lio-warn { color: #fbbf24; font-size: 11.5px; white-space: normal; }
.leads-io-modal .lio-more { padding: 8px 10px; font-size: 11.5px; color: var(--muted, #8a93a6); }
.leads-io-modal .lio-empty { padding: 22px; text-align: center; color: var(--muted, #8a93a6); font-size: 13px; border: 1px dashed var(--border, rgba(255,255,255,.12)); border-radius: 12px; margin-bottom: 12px; }
.leads-io-modal .lio-note { font-size: 12.5px; color: var(--muted, #8a93a6); margin-bottom: 10px; line-height: 1.5; }
.leads-io-modal .lio-note.okmsg { color: #10d98a; }
.leads-io-modal .lio-lgpd { font-size: 11.5px; color: var(--muted, #8a93a6); background: color-mix(in srgb, var(--accent, #4d9fff) 9%, transparent); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 10px; padding: 9px 11px; margin-bottom: 14px; line-height: 1.5; }
.leads-io-modal .lio-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 560px) { .leads-io-modal .lio-stats { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD COMMAND CENTER (Painel v2)
   Reordena os blocos do Painel via flex order (sem mover HTML) e estiliza as
   novas seções: header executivo, KPIs de decisão, "O que fazer agora", etc.
   Usa tokens existentes (--card2/--border/--text/--muted/--acc) → dark+light.
════════════════════════════════════════════════════════════════════════ */
/* HOTFIX: o Painel só usa flex QUANDO ativo. Sem `.active` herda o display:none global
   dos painéis (`#module-crm .panel`). A regra ativa tem especificidade (2,3,0) → vence
   `#module-crm .panel.active` (1,2,0) sem precisar de !important. */
#module-crm #tab-dashboard.panel.dash-v2 { display: none; }
#module-crm #tab-dashboard.panel.active.dash-v2 { display: flex; flex-direction: column; gap: 18px; }
.dash-v2 > * { margin-bottom: 0 !important; }
.dash-v2 > #alert-banner:empty,
.dash-v2 > #smart-reminders-area:empty,
.dash-v2 > #agenda-reminders-dash:empty { display: none; }
.dash-v2 #metas-dash .card { margin-bottom: 0; }
/* Ordem visual (HTML permanece no lugar) — cada bloco tem order ÚNICO
   (antes #agenda-reminders-dash e #dash-hero dividiam order:1 e o desempate
   era a posição no DOM; sequência renumerada preservando o visual atual). */
.dash-v2 > #alert-banner { order: 0; }
.dash-v2 > #dash-hero { order: 1; }
.dash-v2 > #agenda-reminders-dash { order: 2; }
.dash-v2 > #kpis { order: 3; }
.dash-v2 > #whatsapp-notifications-area { order: 4; }
.dash-v2 > #metas-dash { order: 5; }
.dash-v2 > #dash-action-center { order: 6; }
.dash-v2 > .agent-card.pnl2 { order: 7; }
.dash-v2 > #smart-reminders-area { order: 8; }
.dash-v2 > .dashboard-funnel-row { order: 9; }
.dash-v2 > #metricas-av-card { order: 10; }
.dash-v2 > #dash-recent-card { order: 11; }
.dash-v2 > #dashboard-inteligente { order: 12; }

/* — Severidade (tokens semânticos: acompanham claro/escuro) — */
.dash-severity-high { --sev: var(--danger, #ff4d6d); }
.dash-severity-medium { --sev: var(--warning, #f5b50a); }
.dash-severity-low { --sev: var(--success, #10d98a); }

/* — 1. HEADER EXECUTIVO — */
.dash-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; background: var(--card2, #161a23); background: linear-gradient(135deg, color-mix(in srgb, var(--acc, #4d9fff) 12%, var(--card2, #161a23)), var(--card2, #161a23)); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 16px; padding: 18px 20px; }
.dash-hero-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--acc, #4d9fff); }
.dash-hero-title { font-size: 22px; font-weight: 800; color: var(--text); margin: 4px 0 2px; }
.dash-hero-sub { font-size: 13px; color: var(--muted); margin: 0 0 11px; }
.dash-summary-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.dash-summary-line b { font-weight: 800; }
.dash-summary-line i { color: var(--muted2, var(--muted)); font-style: normal; }
.dash-summary-line .dash-sum-warn b { color: var(--danger, #ff4d6d); }
.dash-hero-refresh { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(127,127,127,.1); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; cursor: pointer; flex-shrink: 0; font-family: inherit; }
.dash-hero-refresh:hover { color: var(--text); border-color: var(--acc, #4d9fff); }

/* — 2. COMMAND BAR (KPIs) — */
.dash-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.dash-kpi-card { position: relative; overflow: hidden; background: var(--card2, #161a23); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 14px; padding: 14px 15px; }
.dash-kpi-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kpi-accent, #4d9fff); opacity: .9; }
.dash-kpi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dash-kpi-label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.dash-kpi-ico { color: var(--kpi-accent, #4d9fff); opacity: .92; display: flex; }
.dash-kpi-val { font-size: 23px; font-weight: 800; color: var(--text); margin-top: 8px; line-height: 1.1; letter-spacing: -.3px; }
.dash-kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.dash-kpi-prog { height: 5px; background: rgba(127,127,127,.18); border-radius: 99px; margin-top: 9px; overflow: hidden; }
.dash-kpi-prog-bar { height: 100%; border-radius: 99px; transition: width .6s ease; }
.dash-kpi-click { cursor: pointer; transition: border-color .15s, transform .15s; }
.dash-kpi-click:hover { border-color: var(--kpi-accent, #4d9fff); transform: translateY(-1px); }

/* — 3. O QUE FAZER AGORA — */
.dash-section-title { font-size: 16px; font-weight: 800; color: var(--text); margin: 0; }
.dash-section-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.dash-action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.dash-action-card { display: flex; flex-direction: column; gap: 6px; background: var(--card2, #161a23); border: 1px solid var(--border, rgba(255,255,255,.08)); border-left: 3px solid var(--sev, #6b7694); border-radius: 12px; padding: 13px 14px; }
.dash-act-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dash-act-type { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--sev, var(--muted)); }
.dash-act-time { font-size: 12px; font-weight: 700; color: var(--text); background: rgba(127,127,127,.14); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.dash-act-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-act-reason { font-size: 12px; color: var(--muted); }
.dash-act-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.dash-act-val { font-size: 13px; font-weight: 800; color: var(--text); }
.dash-act-ctas { display: flex; gap: 6px; margin-left: auto; }
/* Texto escuro sobre o âmbar da marca (--acc) — #fff reprovava contraste nos 2 temas */
.dash-act-cta { font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 8px; background: var(--acc, #4d9fff); color: var(--on-primary, #0F172A); border: 1px solid transparent; cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1.2; }
.dash-act-cta:hover { filter: brightness(1.07); }
.dash-act-cta.ghost { background: transparent; color: var(--text); border-color: var(--border); }

/* — Empty state premium (genérico) — */
.wa-msg-panel:empty { display: none; }
.wa-msg-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #22c55e 22%, var(--border, rgba(255,255,255,.08)));
  border-radius: 16px;
  padding: 16px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, #22c55e 16%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, #0f172a 76%, #22c55e 7%), var(--card2, #161a23));
}
.wa-msg-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.09) 42%, transparent 72%);
  opacity: 0;
  transform: translateX(-55%);
}
.wa-msg-shell.has-new::before { animation: waMsgSweep 2.8s ease-in-out infinite; }
.wa-msg-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.wa-msg-titlewrap { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.wa-msg-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #22c55e;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.26);
  flex: 0 0 auto;
}
.wa-msg-icon svg { width: 21px; height: 21px; }
.wa-msg-kicker {
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .42px;
  text-transform: uppercase;
  color: #22c55e;
}
.wa-msg-titlewrap h3 { margin: 0; font-size: 18px; line-height: 1.16; color: var(--text); }
.wa-msg-titlewrap p:not(.wa-msg-kicker) { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.wa-msg-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(34,197,94,.24);
  background: rgba(34,197,94,.1);
  color: color-mix(in srgb, #22c55e 88%, white);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.wa-msg-live span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(34,197,94,.12);
}
.wa-msg-live.is-blinking span { animation: waMsgBlink 1.05s ease-in-out infinite; }
.wa-msg-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 10px;
  margin-bottom: 12px;
}
.wa-msg-stat {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
  border-radius: 12px;
  padding: 10px 12px;
}
.wa-msg-stat.hot { border-color: rgba(34,197,94,.24); background: rgba(34,197,94,.075); }
.wa-msg-stat b {
  display: block;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-msg-stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.wa-msg-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.wa-msg-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-left: 3px solid var(--wa-msg-priority, #64748b);
  border-radius: 13px;
  padding: 13px;
  background: color-mix(in srgb, var(--card2, #161a23) 88%, #ffffff 4%);
}
.wa-msg-card.priority-alta { --wa-msg-priority: #22c55e; }
.wa-msg-card.priority-media { --wa-msg-priority: #38bdf8; }
.wa-msg-card.priority-baixa { --wa-msg-priority: #64748b; }
.wa-msg-card-pulse {
  position: absolute;
  inset: -42% auto auto -18%;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--wa-msg-priority) 34%, transparent), transparent 68%);
  opacity: .22;
  pointer-events: none;
  transform: scale(.86);
}
.wa-msg-card.is-unread .wa-msg-card-pulse { animation: waMsgPulse 1.25s ease-in-out infinite; }
.wa-msg-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.wa-msg-priority {
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .32px;
  text-transform: uppercase;
  color: var(--wa-msg-priority);
}
.wa-msg-card h4 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.22;
  overflow-wrap: anywhere;
}
.wa-msg-status {
  flex: 0 0 auto;
  max-width: 46%;
  text-align: right;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.wa-msg-preview {
  position: relative;
  z-index: 1;
  margin: 9px 0 7px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.42;
}
.wa-msg-meta {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 11.5px;
  margin-bottom: 10px;
}
.wa-msg-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.wa-msg-actions button {
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  padding: 7px 10px;
}
.wa-msg-actions button.primary {
  border-color: color-mix(in srgb, #22c55e 48%, transparent);
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #04130a;
}
.wa-msg-actions button.ghost { background: transparent; color: var(--muted); }
.wa-msg-actions button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, #22c55e 34%, var(--border)); }
.wa-msg-actions button:focus-visible {
  outline: 2px solid color-mix(in srgb, #22c55e 80%, white);
  outline-offset: 2px;
}
.wa-msg-empty {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px dashed rgba(34,197,94,.26);
  border-radius: 13px;
  padding: 18px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
}
.wa-msg-empty strong { color: var(--text); font-size: 14px; }
.wa-msg-empty span { font-size: 12.5px; }

@keyframes waMsgBlink {
  0%, 100% { opacity: .48; transform: scale(.84); }
  50% { opacity: 1; transform: scale(1.18); }
}
@keyframes waMsgPulse {
  0%, 100% { opacity: .16; transform: scale(.82); }
  50% { opacity: .42; transform: scale(1.06); }
}
@keyframes waMsgSweep {
  0%, 55% { opacity: 0; transform: translateX(-55%); }
  70% { opacity: .62; }
  100% { opacity: 0; transform: translateX(55%); }
}

[data-theme="light"] .wa-msg-shell {
  background:
    radial-gradient(circle at 12% 0%, rgba(34,197,94,.16), transparent 34%),
    linear-gradient(135deg, #f8fffb, #ffffff);
  border-color: rgba(22,163,74,.2);
}
[data-theme="light"] .wa-msg-stat,
[data-theme="light"] .wa-msg-card,
[data-theme="light"] .wa-msg-empty { background: rgba(15,23,42,.025); }
[data-theme="light"] .wa-msg-actions button { background: #fff; }

@media (max-width: 760px) {
  .wa-msg-shell { padding: 14px; border-radius: 14px; }
  .wa-msg-head { flex-direction: column; align-items: stretch; }
  .wa-msg-live { width: fit-content; }
  .wa-msg-stats { grid-template-columns: 1fr; }
  .wa-msg-list { grid-template-columns: 1fr; }
  .wa-msg-status { max-width: none; text-align: left; }
  .wa-msg-card-top { flex-direction: column; }
  .wa-msg-actions button { flex: 1 1 calc(50% - 7px); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-msg-shell.has-new::before,
  .wa-msg-live.is-blinking span,
  .wa-msg-card.is-unread .wa-msg-card-pulse {
    animation: none !important;
  }
  .wa-msg-actions button:hover { transform: none; }
}

.dash-empty-state { text-align: center; padding: 30px 18px; border: 1px dashed var(--border); border-radius: 14px; margin-top: 12px; }
.dash-empty-ic { font-size: 34px; line-height: 1; }
.dash-empty-t { font-size: 15px; font-weight: 800; color: var(--text); margin-top: 8px; }
.dash-empty-d { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* — 4. COPILOTO (Agente do Painel) compacto — */
.dash-agent-compact { padding: 14px 16px !important; }
.dash-agent-compact .pnl-grid,
.dash-agent-compact .pnl-details,
.dash-agent-compact .pnl-show { display: none !important; }
.dash-agent-compact .pnl-sub { font-size: 12.5px; }

/* — 5. PERFORMANCE DO FUNIL — */
.dashboard-funnel-row { align-items: stretch; }
.dashboard-funnel-row > .card { display: flex; flex-direction: column; }
.dash-panel-card { display: flex; flex-direction: column; }
.dash-panel-sub { font-size: 11.5px; color: var(--muted); margin-top: -6px; margin-bottom: 12px; font-weight: 400; }
.dash-gargalo { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255,77,109,.08); border: 1px solid rgba(255,77,109,.22); font-size: 12.5px; color: var(--text); line-height: 1.4; }
.dash-gargalo .dash-garg-ic { font-size: 15px; }
.dash-exit-block { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.dash-exit-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted2, var(--muted)); margin-bottom: 6px; }

/* — 6. DINHEIRO / MÉTRICAS — */
#metricas-av .kpi-card--money { border-color: color-mix(in srgb, #10d98a 35%, var(--border)); background: color-mix(in srgb, #10d98a 7%, var(--card2, #161a23)); }
#metricas-av .kpi-card--money .kpi-card-val { color: #10d98a; }

/* — 7. ATIVIDADE RECENTE premium — */
.dash-recent-tbl tbody tr.dash-recent-row { transition: background .12s; }
.dash-recent-tbl tbody tr.dash-recent-row:hover { background: rgba(127,127,127,.06); }
.dash-recent-tbl tbody tr.dash-recent-overdue td:first-child { box-shadow: inset 3px 0 0 #ff4d6d; }
.dash-recent-tbl tbody tr.dash-recent-hot td:first-child { box-shadow: inset 3px 0 0 #10d98a; }
.dash-recent-next { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* — Dashboard Inteligente (secundário) — */
.dash-di-head { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 8px 0 2px; border-top: 1px solid var(--border); margin-top: 2px; }

/* — Metas empty state + Smart Reminders fallback — */
.dash-metas-empty .dash-metas-empty-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-metas-empty-ic { font-size: 24px; }
.dash-metas-empty-in strong { display: block; font-size: 14px; color: var(--text); }
.dash-metas-empty-in span { font-size: 12px; color: var(--muted); }
.dash-metas-empty-in button { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--acc, #4d9fff); background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-family: inherit; }
.dash-sr-fallback { background: var(--card2, #161a23); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; }
.dash-sr-fb-head { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 9px; }
.dash-sr-fb-rows { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; }
.dash-sr-fb-row { font-size: 12.5px; color: var(--muted); background: rgba(127,127,127,.1); padding: 5px 10px; border-radius: 8px; }
.dash-sr-fb-row b { color: var(--text); font-weight: 800; }

/* — Responsividade — */
@media (max-width: 1100px) { .dash-kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 980px) { .dash-hero { flex-direction: column; } .dash-action-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .dash-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-action-grid { grid-template-columns: 1fr; }
  .dash-hero-title { font-size: 19px; }
  .dash-recent-tbl th:nth-child(3), .dash-recent-tbl td:nth-child(3),
  .dash-recent-tbl th:nth-child(6), .dash-recent-tbl td:nth-child(6) { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD INTELLIGENCE V2 — forecast, comissão, velocity, gargalos,
   oportunidades, origem, comparativo de períodos, insights e qualidade.
   Integra ao Command Center (Fase 1); dark + light; responsivo.
════════════════════════════════════════════════════════════════════════ */
/* Ordem: Intelligence entre o funil (7) e as métricas; reposiciona os demais. */
.dash-v2 > #dash-intelligence { order: 9; }
.dash-v2 > #metricas-av-card { order: 10; }
.dash-v2 > #dash-recent-card { order: 11; }
.dash-v2 > #dashboard-inteligente { order: 12; }
.dash-v2 > #dash-intelligence:empty { display: none; }

.dash-intelligence { display: flex; flex-direction: column; gap: 14px; }
.dash-intel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dash-period-toggle { display: inline-flex; background: rgba(127,127,127,.1); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.dash-period-toggle button { font-size: 11.5px; font-weight: 700; color: var(--muted); background: transparent; border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer; font-family: inherit; }
.dash-period-toggle button.on { background: var(--card2, #161a23); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.dash-period-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); background: var(--card2, #161a23); border: 1px solid var(--border); border-radius: 12px; padding: 11px 15px; }
.dash-period-summary b { color: var(--text); font-weight: 800; }
.dash-period-summary em { margin-left: auto; font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted2, var(--muted)); }

.dash-intel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-intel-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.dash-intel-col-a, .dash-intel-col-b { display: flex; flex-direction: column; gap: 14px; }
.dash-forecast-card, .dash-velocity-card, .dash-opportunity-list-wrap, .dash-origin-performance, .dash-insights-wrap, .dash-data-quality { background: var(--card2, #161a23); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; }
.dash-intel-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.dash-confidence-chip { font-size: 10.5px; font-weight: 800; color: var(--cc, #888); border: 1px solid var(--cc, #888); background: transparent; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.dash-forecast-val, .dash-velocity-big { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; letter-spacing: -.4px; }
.dash-intel-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dash-intel-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; font-style: italic; }
.dash-intel-insuf { font-size: 12.5px; color: var(--muted2, var(--muted)); padding: 14px 0; text-align: center; }
.dash-intel-ok { font-size: 12.5px; color: #10d98a; padding: 8px 0; }

.dash-probability-list { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.dash-prob-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 5px 6px; border-radius: 8px; }
.dash-prob-row:hover { background: rgba(127,127,127,.06); }
.dash-prob-name { font-size: 12.5px; font-weight: 700; color: var(--text); flex-shrink: 0; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-prob-meta { font-size: 11px; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.dash-probability-meter { flex: 1; height: 6px; background: rgba(127,127,127,.18); border-radius: 99px; overflow: hidden; min-width: 36px; }
.dash-probability-meter i { display: block; height: 100%; background: linear-gradient(90deg, #4d9fff, #10d98a); border-radius: 99px; }
.dash-prob-pct { font-size: 12px; font-weight: 800; color: var(--text); flex-shrink: 0; width: 34px; text-align: right; }

.dash-money-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-money-grid > div { background: rgba(127,127,127,.06); border-radius: 10px; padding: 9px 10px; }
.dash-money-grid small { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.dash-money-grid b { font-size: 15px; font-weight: 800; color: var(--text); }
.dash-intel-mini { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.dash-intel-mini > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.dash-intel-mini > div:hover { background: rgba(127,127,127,.06); }
.dash-intel-mini b { color: var(--text); font-weight: 700; }

.dash-velocity-big { font-size: 24px; }
.dash-bottleneck-list { display: flex; flex-direction: column; gap: 8px; }
.dash-bottleneck-row { border-left: 3px solid var(--sev, #888); padding: 7px 10px; background: rgba(127,127,127,.05); border-radius: 8px; }
.dash-bn-stage { font-size: 13px; font-weight: 800; color: var(--text); }
.dash-bn-motivo { font-size: 12px; color: var(--muted); margin-top: 1px; }
.dash-bn-acao { font-size: 11.5px; color: var(--muted2, var(--muted)); font-style: italic; margin-top: 3px; }

.dash-opportunity-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dash-opportunity-card { background: rgba(127,127,127,.05); border: 1px solid var(--border); border-radius: 11px; padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; }
.dash-opp-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dash-opp-name { font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-opp-chance { font-size: 13px; font-weight: 800; color: #10d98a; flex-shrink: 0; }
.dash-opp-meta { font-size: 11.5px; color: var(--muted); }
.dash-opp-motivo { font-size: 11.5px; color: var(--muted2, var(--muted)); }
.dash-opp-ctas { display: flex; gap: 6px; margin-top: 3px; }

.dash-origin-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dash-origin-tbl th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.dash-origin-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.dash-origin-tbl th:not(:first-child), .dash-origin-tbl td:not(:first-child) { text-align: right; }

.dash-intel-ai-cta { font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7c3aed, #4d9fff); border: 0; border-radius: 8px; padding: 6px 11px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.dash-insights-wrap { display: flex; flex-direction: column; gap: 8px; }
.dash-insight-card { border-left: 3px solid var(--sev, #888); background: rgba(127,127,127,.05); border-radius: 8px; padding: 9px 11px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dash-insight-text { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.dash-insight-cta { font-size: 11.5px; font-weight: 700; color: var(--acc, #4d9fff); background: transparent; border: 0; cursor: pointer; white-space: nowrap; font-family: inherit; }

.dash-dq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-dq-list li { font-size: 12.5px; color: var(--text); padding: 6px 10px; border-left: 3px solid var(--sev, #888); background: rgba(127,127,127,.05); border-radius: 7px; }

@media (max-width: 900px) { .dash-intel-grid, .dash-intel-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .dash-period-summary { font-size: 12px; gap: 10px; }
  .dash-opportunity-list { grid-template-columns: 1fr; }
  .dash-origin-tbl th:nth-child(4), .dash-origin-tbl td:nth-child(4) { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   CSP P3 — utilitárias de visibilidade (alvo da migração de `style="display:none"`).
   Sem !important: o JS que faz `el.style.display = 'block'/'flex'` continua sobrepondo
   (inline > classe). A migração em massa dos ~690 styles inline fica DIFERIDA por
   segurança (muito código lê `el.style.display`); ver docs/security/csp-enforcement-plan.md.
════════════════════════════════════════════════════════════════════════ */
.is-hidden { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   AGENTES · TOKEN SAVER (Fase V1) — badges/lote/economia. Aditivo, tema-aware.
   Cache: ♻️ resposta reaproveitada · Lote: barra "Gerar todas" · Economia: linha.
   ════════════════════════════════════════════════════════════════════════ */
.ag-cache-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
  color:#34d399;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.28);
  border-radius:999px;padding:2px 9px;margin:0 0 8px;letter-spacing:.2px}
.ag-local{font-size:13px;line-height:1.6}
.ag-local p{margin:0}
.ag-local strong{color:var(--accent,#6366f1)}
.sr-batch-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;
  padding:10px 14px;border-radius:12px;background:rgba(99,102,241,.08);
  border:1px solid rgba(99,102,241,.22)}
.sr-batch-hint{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.4}
[data-theme="light"] .sr-batch-hint{color:rgba(15,23,42,.55)}
.sr-batch-bar .sr-btn{flex:0 0 auto}
.sr-econ{margin-top:14px;padding:9px 14px;border-radius:10px;font-size:11.5px;line-height:1.5;
  color:#34d399;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2)}
.sr-econ b{color:#10b981;font-weight:800}
[data-theme="light"] .sr-econ{color:#047857;background:rgba(16,185,129,.1)}
.ag-local-tag{display:inline-block;font-size:10px;font-weight:700;color:#94a3b8;
  background:rgba(148,163,184,.14);border-radius:999px;padding:2px 8px;margin:0 0 6px;letter-spacing:.2px}

/* ════════════════════════════════════════════════════════════════════════
   AGENTES UI (2026-06-29) — Seletor de lead (Retorno/Closer) + banner de
   refino (Objeções). Premium, tema-aware. Frontend only · suggest-only.
   ════════════════════════════════════════════════════════════════════════ */
.fu-lead-sel{position:relative;margin:10px 0 4px}
.fu-sel-trigger{display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 12px;border-radius:12px;
  background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(99,102,241,.06));
  border:1px solid rgba(129,140,248,.34);transition:border-color .15s,background .15s}
.fu-sel-trigger:hover{border-color:rgba(129,140,248,.6)}
.fu-sel-ic{font-size:15px;flex:0 0 auto}
.fu-sel-label{flex:1 1 auto;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fu-sel-label.fu-sel-has{color:#fff}
.fu-sel-caret{flex:0 0 auto;font-size:11px;color:rgba(255,255,255,.5)}
.fu-sel-clear{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-size:11px;line-height:1;padding:0}
.fu-sel-clear:hover{background:rgba(255,255,255,.22);color:#fff}
.fu-sel-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:#1a1c2b;border:1px solid rgba(129,140,248,.3);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.45);overflow:hidden}
.fu-sel-search{width:100%;box-sizing:border-box;padding:10px 12px;border:none;outline:none;background:rgba(255,255,255,.04);color:#fff;font-size:13px;font-family:inherit;border-bottom:1px solid rgba(255,255,255,.08)}
.fu-sel-search::placeholder{color:rgba(255,255,255,.4)}
.fu-sel-list{max-height:280px;overflow-y:auto}
.fu-sel-item{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;cursor:pointer;padding:9px 12px;border:none;background:transparent;border-bottom:1px solid rgba(255,255,255,.05);font-family:inherit;transition:background .12s}
.fu-sel-item:hover{background:rgba(129,140,248,.14)}
.fu-sel-item-top{display:flex;align-items:center;gap:8px}
.fu-sel-item-name{flex:1 1 auto;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fu-sel-item-flag{flex:0 0 auto;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;letter-spacing:.2px}
.fu-sel-item-flag.fu-overdue{color:#fca5a5;background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.3)}
.fu-sel-item-flag.fu-today{color:#fcd34d;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.3)}
.fu-sel-item-flag.fu-stale{color:#cbd5e1;background:rgba(148,163,184,.16);border:1px solid rgba(148,163,184,.3)}
.fu-sel-item-meta{font-size:11.5px;color:rgba(255,255,255,.55)}
.fu-sel-empty{padding:16px 12px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.5)}
.obj-refine-banner{margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(99,102,241,.08));border:1px solid rgba(168,85,247,.34)}
.obj-rf-head{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#e9d5ff}
.obj-rf-ic{font-size:14px}
.obj-rf-obj{margin-top:5px;font-size:13.5px;font-weight:700;color:#fff}
.obj-rf-base{margin-top:5px;font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.5}
.obj-rf-base-lbl{font-weight:700;color:rgba(255,255,255,.75)}
[data-theme="light"] .fu-sel-label{color:#64748b}
[data-theme="light"] .fu-sel-label.fu-sel-has{color:#0f172a}
[data-theme="light"] .fu-sel-caret{color:#94a3b8}
[data-theme="light"] .fu-sel-pop{background:#fff;border-color:rgba(99,102,241,.25);box-shadow:0 16px 40px rgba(15,23,42,.18)}
[data-theme="light"] .fu-sel-search{background:#f8fafc;color:#0f172a;border-bottom-color:#e2e8f0}
[data-theme="light"] .fu-sel-search::placeholder{color:#94a3b8}
[data-theme="light"] .fu-sel-item{border-bottom-color:#f1f5f9}
[data-theme="light"] .fu-sel-item:hover{background:rgba(99,102,241,.1)}
[data-theme="light"] .fu-sel-item-name{color:#0f172a}
[data-theme="light"] .fu-sel-item-meta{color:#64748b}
[data-theme="light"] .fu-sel-clear{background:rgba(15,23,42,.08);color:#475569}
[data-theme="light"] .obj-rf-head{color:#7c3aed}
[data-theme="light"] .obj-rf-obj{color:#0f172a}
[data-theme="light"] .obj-rf-base{color:#475569}
[data-theme="light"] .obj-rf-base-lbl{color:#334155}

/* (Fase 3A) Executor com confirmação — botão "Revisar ação" da ação preparada. */
.ag-btn-review{margin-top:8px;display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(16,185,129,.06));
  border:1px solid rgba(16,185,129,.34);color:#34d399;font-weight:700}
.ag-btn-review:hover{border-color:rgba(16,185,129,.6)}
[data-theme="light"] .ag-btn-review{color:#047857;background:rgba(16,185,129,.1)}
/* (Fase 3A) ações de follow-up no chat inline do Agente de Retorno. */
.ag-acts-followup{margin-top:8px}

/* WhatsApp Agent V1 - resposta assistida, suggest-only. */
#wa-zap-v2 .zap-ia-card .zap-ia-act:not(.wa-agent-act){display:none}
.wa-agent-panel{padding:12px 14px 10px;border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(16,185,129,.10),rgba(59,130,246,.07)),#0f172a}
.wa-agent-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.wa-agent-head b{font-size:13px;font-weight:800;color:#f8fafc}
.wa-agent-head span{max-width:520px;font-size:11.5px;line-height:1.45;color:#94a3b8;text-align:right}
.wa-agent-actions{display:flex;flex-wrap:wrap;gap:7px}
.wa-agent-actions button{border:1px solid rgba(16,185,129,.28);background:rgba(15,23,42,.72);
  color:#d1fae5;border-radius:999px;padding:7px 10px;font-size:11.5px;font-weight:750;cursor:pointer}
.wa-agent-actions button:hover{border-color:rgba(16,185,129,.58);background:rgba(16,185,129,.14)}
.wa-agent-result{display:none;margin-top:10px;padding:11px 12px;border-radius:11px;background:rgba(15,23,42,.82);
  border:1px solid rgba(148,163,184,.22);font-size:12.5px;line-height:1.55;color:#f8fafc}
.wa-agent-result.show{display:block}
.wa-agent-result.is-error,#wa-zap-ia-result.is-error{border-color:rgba(248,113,113,.36)!important}
.wa-agent-main{font-size:13px;line-height:1.58;color:var(--zap-text,#f8fafc);white-space:normal;word-break:break-word}
.wa-agent-meta{display:flex;justify-content:space-between;gap:12px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(148,163,184,.16);font-size:11.5px}
.wa-agent-meta span{color:var(--zap-muted,#94a3b8)}
.wa-agent-meta b{color:var(--zap-text,#f8fafc);text-align:right}
.wa-agent-note{margin-top:8px;padding:8px 9px;border-radius:9px;background:rgba(16,185,129,.09);
  border:1px solid rgba(16,185,129,.18);color:#a7f3d0;font-size:11.5px;line-height:1.45}
.wa-agent-note.warn{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.30);color:#fcd34d}
.wa-agent-variants{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wa-agent-chip{font-size:11px!important;padding:6px 9px!important}
@media (max-width:760px){
  .wa-agent-panel{padding:10px 12px}
  .wa-agent-head{flex-direction:column;gap:3px}
  .wa-agent-head span{text-align:left;max-width:none}
  .wa-agent-actions{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .wa-agent-actions button{white-space:nowrap}
}
[data-theme="light"] .wa-agent-panel{background:linear-gradient(135deg,rgba(16,185,129,.10),rgba(59,130,246,.06)),#fff;border-top-color:rgba(15,23,42,.08)}
[data-theme="light"] .wa-agent-head b{color:#0f172a}
[data-theme="light"] .wa-agent-head span{color:#64748b}
[data-theme="light"] .wa-agent-actions button{background:#f8fafc;color:#047857;border-color:rgba(16,185,129,.30)}
[data-theme="light"] .wa-agent-main{color:#0f172a}
[data-theme="light"] .wa-agent-meta b{color:#0f172a}

/* ════════════════════════════════════════════════════════════════════════
   FUNIL PREMIUM (Fase UX 2 · 2026-07-04) — repaginada visual do card do
   pipeline. Anexado no fim (vence por ordem). Tokens dark+light; ZERO
   mudança em drag/drop ou lógica — só classes novas + unificação visual.
════════════════════════════════════════════════════════════════════════ */
/* Card: sombra tokenizada + elevação sutil (não interfere no drag) */
.pl-card { box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.3)); border-radius: 12px; }
.pl-card:hover { box-shadow: var(--shadow-md, var(--shadow-sm)); }
.pl-card:focus-within { border-color: var(--border-strong, var(--border)); }

/* Mini-ficha de negócio (compacto): valor forte + empreendimento truncado */
.pl-card-deal { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; min-width: 0; }
.pl-deal-val { font-size: 13.5px; font-weight: 800; color: var(--success, #10d98a); letter-spacing: -.2px; white-space: nowrap; }
.pl-deal-emp { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Follow-up com estado (vencido/hoje) no chip do rodapé */
.pl-card-fu.pl-fu-overdue { color: var(--danger, #ff4d6d); background: var(--danger-soft, rgba(255,77,109,.12)); border-color: color-mix(in srgb, var(--danger, #ff4d6d) 35%, transparent); }
.pl-card-fu.pl-fu-today { color: var(--warning, #f59e0b); background: var(--warning-soft, rgba(245,158,11,.12)); border-color: color-mix(in srgb, var(--warning, #f59e0b) 35%, transparent); }

/* Chip "Xd sem contato" (substitui o emoji 💤) */
.pl-stale-row { margin: 6px 0 0; }
.pl-chip-stale { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--muted); background: rgba(127,127,127,.12); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }

/* Grupos do card expandido com micro-headers */
.pl-grp { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--borderL, var(--border)); }
.pl-grp-h { font-size: 9.5px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; color: var(--muted2, var(--muted)); margin-bottom: 7px; }

/* Bloco "Agentes especiais" — sai do inline style, tokens nos 2 temas */
.pl-special-agents { margin-top: 2px; padding: 8px; border-radius: 10px; background: var(--purple-soft, rgba(129,140,248,.08)); border: 1px solid color-mix(in srgb, var(--purple, #a78bfa) 26%, transparent); }
.pl-special-title { font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--purple, #a5b4fc); margin-bottom: 6px; }
.pl-special-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pl-special-cfg { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--warning, #fbbf24); font-size: 10px; font-weight: 700; cursor: pointer; font-family: inherit; padding: 2px 0; }

/* Família única de botões do card (altura/raio/tipografia consistentes) */
.pl-act, .pl-assist-toggle, .pl-analise-btn { min-height: 28px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.pl-mem-h, .pl-hist-lbl { display: inline-flex; align-items: center; gap: 5px; }

/* Empty state da coluna */
.pl-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 18px 10px; border: 1px dashed var(--border); border-radius: 10px; background: rgba(127,127,127,.04); }

@media (prefers-reduced-motion: reduce) {
  .pl-card, .pl-card:hover { transition: none; }
}
/* Pontos de estado (substituem emojis nos badges de cadência/inteligência) */
.pl-nudge-dot, .pl-intel-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: currentColor; margin-right: 6px; flex-shrink: 0; vertical-align: middle; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
/* Tema claro: a regra global `[data-theme="light"] #module-crm :not(#sb)...{color:inherit}`
   (legado) anula cor por classe — estas exceções pontuais devolvem a cor semântica. */
[data-theme="light"] #module-crm .pl-deal-val { color: var(--success) !important; }
[data-theme="light"] #module-crm .pl-special-title { color: var(--purple) !important; }
[data-theme="light"] #module-crm .pl-special-cfg { color: var(--warning) !important; }
[data-theme="light"] #module-crm .pl-card-fu.pl-fu-overdue { color: var(--danger) !important; }
[data-theme="light"] #module-crm .pl-card-fu.pl-fu-today { color: var(--warning) !important; }
[data-theme="light"] #module-crm .pl-chip-stale,
[data-theme="light"] #module-crm .pl-grp-h,
[data-theme="light"] #module-crm .pl-empty { color: var(--muted) !important; }

/* ════════════════════════════════════════════════════════════════════════
   REATIVAÇÃO V2 (Fase UX 2 · 2026-07-04) — cadência de tentativas, variações
   de mensagem e priorização visual. Anexado no fim; tokens dark+light.
════════════════════════════════════════════════════════════════════════ */
/* Prioridade via tokens semânticos (antes: hex inline no JS) */
#reativacao-body .rtv-prio-alta { color: var(--danger, #ff4d6d); border: 1px solid color-mix(in srgb, var(--danger, #ff4d6d) 30%, transparent); background: var(--danger-soft, rgba(255,77,109,.12)); }
#reativacao-body .rtv-prio-media { color: var(--warning, #fbbf24); border: 1px solid color-mix(in srgb, var(--warning, #fbbf24) 30%, transparent); background: var(--warning-soft, rgba(251,191,36,.12)); }
#reativacao-body .rtv-prio-baixa { color: var(--muted); border: 1px solid var(--border); background: rgba(127,127,127,.1); }

/* Badge de cadência (tentativas registradas) */
#reativacao-body .rtv-att { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: var(--info, #4d9fff); background: var(--info-soft, rgba(77,159,255,.12)); border: 1px solid color-mix(in srgb, var(--info, #4d9fff) 28%, transparent); }
#reativacao-body .rtv-att-zero { color: var(--muted); background: var(--surf); border-color: var(--borderL, var(--border)); }
#reativacao-body .rtv-att-warn { color: var(--warning, #fbbf24); background: var(--warning-soft, rgba(251,191,36,.12)); border-color: color-mix(in srgb, var(--warning, #fbbf24) 30%, transparent); }

/* Medidor de prioridade (score 0–100) */
#reativacao-body .rtv-score { height: 5px; border-radius: 999px; background: rgba(127,127,127,.16); overflow: hidden; }
#reativacao-body .rtv-score-bar { height: 100%; border-radius: 999px; background: var(--muted); transition: width .5s ease; }
#reativacao-body .rtv-score-bar.rtv-prio-alta { background: var(--danger, #ff4d6d); border: none; }
#reativacao-body .rtv-score-bar.rtv-prio-media { background: var(--warning, #fbbf24); border: none; }
#reativacao-body .rtv-score-bar.rtv-prio-baixa { background: var(--muted2, var(--muted)); border: none; }

/* Chips de variação da mensagem (Retomada / Novidade / Última tentativa) */
#reativacao-body .rtv-msg-chips { display: flex; gap: 5px; flex-wrap: wrap; }
#reativacao-body .rtv-msg-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surf); color: var(--muted); font: 700 11px/1 inherit; cursor: pointer; transition: all .15s; }
#reativacao-body .rtv-msg-chip:hover { color: var(--text); border-color: var(--muted2, var(--muted)); }
#reativacao-body .rtv-msg-chip.active { color: var(--on-primary, #0F172A); background: var(--acc); border-color: transparent; }

/* Tempo parado com cor progressiva */
#reativacao-body .rtv-days-15 { color: var(--warning, #fbbf24); border-color: color-mix(in srgb, var(--warning, #fbbf24) 30%, transparent); }
#reativacao-body .rtv-days-30 { color: var(--danger, #ff4d6d); border-color: color-mix(in srgb, var(--danger, #ff4d6d) 30%, transparent); }

/* Empty state com SVG */
#reativacao-body .rtv-empty-ic { color: var(--success, #10d98a); display: flex; justify-content: center; margin-bottom: 8px; }

/* Tema claro: exceções à regra global color:inherit do módulo */
[data-theme="light"] #module-reativacao .rtv-prio-alta,
[data-theme="light"] #module-reativacao .rtv-days-30 { color: var(--danger) !important; }
[data-theme="light"] #module-reativacao .rtv-prio-media,
[data-theme="light"] #module-reativacao .rtv-att-warn,
[data-theme="light"] #module-reativacao .rtv-days-15 { color: var(--warning) !important; }
[data-theme="light"] #module-reativacao .rtv-att { color: var(--info) !important; }
[data-theme="light"] #module-reativacao .rtv-att-zero,
[data-theme="light"] #module-reativacao .rtv-prio-baixa { color: var(--muted) !important; }
[data-theme="light"] #module-reativacao .rtv-msg-chip.active { color: var(--on-primary, #0F172A) !important; }
[data-theme="light"] #module-reativacao .rtv-empty-ic { color: var(--success) !important; }

/* ════════════════════════════════════════════════════════════════════════
   LEADS LISTA PREMIUM (Fase UX 2 · 2026-07-04) — identidade por linha,
   ações SVG, chips com estado. Anexado no fim; tokens dark+light.
   ZERO mudança em sort/paginação/filtros — só classes do row template.
════════════════════════════════════════════════════════════════════════ */
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--card, #141923); }
.lst-row { cursor: pointer; transition: background .12s; }
.lst-row:nth-child(even) td { background: rgba(127,127,127,.03); }
.lst-row:hover td { background: rgba(127,127,127,.08); }

/* Identidade: avatar de iniciais com cor da qualidade */
.lst-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lst-av { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: var(--text); background: rgba(127,127,127,.14); border: 1px solid var(--border); }
.lst-av-hot { color: var(--danger, #ff4d6d); background: var(--danger-soft, rgba(255,77,109,.12)); border-color: color-mix(in srgb, var(--danger, #ff4d6d) 30%, transparent); }
.lst-av-warm { color: var(--warning, #fb923c); background: var(--warning-soft, rgba(251,146,60,.12)); border-color: color-mix(in srgb, var(--warning, #fb923c) 30%, transparent); }
.lst-av-cold { color: var(--info, #4d9fff); background: var(--info-soft, rgba(77,159,255,.12)); border-color: color-mix(in srgb, var(--info, #4d9fff) 30%, transparent); }
.lst-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lst-flex { display: flex; align-items: center; gap: 6px; }
.lst-dim { color: var(--muted); font-size: 12px; }
.lst-dim2 { color: var(--muted2, var(--muted)); }
.lst-trunc { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst-val { color: var(--success, #10d98a); font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* Follow-up com estado (mesma régua do funil) */
.lst-fu { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; color: var(--muted); background: rgba(127,127,127,.1); border: 1px solid var(--border); }
.lst-fu-overdue { color: var(--danger, #ff4d6d); background: var(--danger-soft, rgba(255,77,109,.12)); border-color: color-mix(in srgb, var(--danger, #ff4d6d) 35%, transparent); }
.lst-fu-today { color: var(--warning, #f59e0b); background: var(--warning-soft, rgba(245,158,11,.12)); border-color: color-mix(in srgb, var(--warning, #f59e0b) 35%, transparent); }

/* Ações por linha — botões SVG consistentes com o funil */
.lst-actions { display: flex; gap: 5px; align-items: center; }
.lst-btn { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; border: 1px solid var(--border); background: var(--card2, var(--surf)); color: var(--muted); cursor: pointer; text-decoration: none; transition: color .14s, border-color .14s, background .14s, transform .1s; }
.lst-btn:hover { color: var(--text); border-color: var(--muted2, var(--muted)); }
.lst-btn:active { transform: translateY(1px); }
.lst-btn-wa { color: #25d366; border-color: rgba(37,211,102,.3); background: rgba(37,211,102,.1); }
.lst-btn-wa:hover { color: #25d366; background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.45); }
.lst-btn-del:hover { color: var(--danger, #ff4d6d); border-color: color-mix(in srgb, var(--danger, #ff4d6d) 40%, transparent); background: var(--danger-soft, rgba(255,77,109,.1)); }

/* Empty state */
.empty-state .empty-icon svg { color: var(--muted2, var(--muted)); }

/* Tema claro: exceções à regra global color:inherit do módulo */
[data-theme="light"] #module-crm .lst-val { color: var(--success) !important; }
[data-theme="light"] #module-crm .lst-fu-overdue { color: var(--danger) !important; }
[data-theme="light"] #module-crm .lst-fu-today { color: var(--warning) !important; }
[data-theme="light"] #module-crm .lst-av-hot { color: var(--danger) !important; }
[data-theme="light"] #module-crm .lst-av-warm { color: var(--warning) !important; }
[data-theme="light"] #module-crm .lst-av-cold { color: var(--info) !important; }
[data-theme="light"] #module-crm .lst-btn-wa { color: #1da851 !important; }
[data-theme="light"] #module-crm .lst-dim, [data-theme="light"] #module-crm .lst-fu { color: var(--muted) !important; }
[data-theme="light"] #module-crm .tbl thead th { background: var(--surface, #fff); }

/* ════════════════════════════════════════════════════════════════════════
   FASE UX 1 — Painel/cards vendáveis (2026-07-03, baixo risco, só visual)
   Anexado no fim (vence por ordem de origem). Tokens dark+light já resolvem
   os 2 temas. Escopo: Dashboard Command Center + header do CRM.
════════════════════════════════════════════════════════════════════════ */
/* Header limpo: utilitários Importar/Backup/CSV ocultos (funções seguem em
   Leads → Import/Export, sidebar → Backup e dropdown Configurações). */
#header .hdr-utils { display: none !important; }

/* Cards do Painel: sombra padronizada + estados hover/focus visíveis */
.dash-kpi-card, .dash-action-card { box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.3)); }
.dash-action-card { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.dash-action-card:hover,
.dash-action-card:focus-within { border-color: var(--border-strong, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow-md, var(--shadow-sm)); }
@media (prefers-reduced-motion: reduce) {
  .dash-action-card, .dash-action-card:hover, .dash-action-card:focus-within { transform: none; transition: none; }
}

/* Ícone SVG nos cards de ação (substitui os emojis 🔴🔥🟡📨😴📅) */
.dash-act-type { display: inline-flex; align-items: center; gap: 6px; }
.dash-act-ico { display: inline-flex; color: var(--sev, var(--muted)); flex-shrink: 0; }

/* Empty state de primeiro uso do Painel (0 leads) */
.dash-first-use { padding: 34px 22px; }
.dash-first-use .dash-empty-t { font-size: 16px; margin-top: 0; }
.dash-first-use .dash-empty-d { max-width: 480px; margin: 6px auto 0; }
.dash-first-use .dash-act-cta { margin-top: 14px; padding: 8px 18px; font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════════
   SB-TIP GLOBAL (2026-07-04) — portal no document.body.
   A .sb-tip interna permanece no DOM só como fonte de texto.
════════════════════════════════════════════════════════════════════════ */
#sb .sb-tip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#sb-global-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  max-width: 260px;
  width: max-content;
  white-space: normal;
  line-height: 1.45;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  background: var(--card2);
  background: linear-gradient(145deg, color-mix(in srgb, var(--card2) 92%, var(--surf)), color-mix(in srgb, var(--card) 88%, var(--surf)));
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -4px, 0);
  transition: opacity .16s var(--ease, ease), transform .16s var(--ease, ease), visibility .16s var(--ease, ease);
}
#sb-global-tooltip::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: inherit;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left-color: color-mix(in srgb, var(--border) 80%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent);
  transform: translateY(-50%) rotate(45deg);
}
#sb-global-tooltip.is-left::before {
  left: auto;
  right: -6px;
  border-left: 0;
  border-bottom: 0;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-right-color: color-mix(in srgb, var(--border) 80%, transparent);
  border-top-color: color-mix(in srgb, var(--border) 80%, transparent);
}
#sb-global-tooltip.is-bottom::before {
  left: 50%;
  right: auto;
  top: -6px;
  border-left: 1px solid var(--border);
  border-bottom: 0;
  border-right: 0;
  border-top: 1px solid var(--border);
  border-left-color: color-mix(in srgb, var(--border) 80%, transparent);
  border-top-color: color-mix(in srgb, var(--border) 80%, transparent);
  transform: translateX(-50%) rotate(45deg);
}
#sb-global-tooltip.is-top::before {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -6px;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-right-color: color-mix(in srgb, var(--border) 80%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent);
  transform: translateX(-50%) rotate(45deg);
}
#sb-global-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}
#sb-global-tooltip b {
  display: block;
  margin-bottom: 3px;
  color: var(--acc);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#sb-global-tooltip span {
  display: block;
  color: var(--muted);
}
#sb-global-tooltip [hidden] { display: none !important; }
[data-theme="light"] #sb-global-tooltip {
  background: var(--card);
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 94%, var(--surf)), color-mix(in srgb, var(--card2) 88%, var(--surf)));
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .72);
}

@media (max-width: 768px), (hover: none), (pointer: coarse) {
  #sb-global-tooltip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #sb-global-tooltip { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   META ADS UX POLISH V1 — badge de origem, contexto da captação,
   banner de status da jornada corretor
   ═══════════════════════════════════════════════════════════════ */

/* Badge de origem no card do lead (Pipeline/Funil) */
.badge-source {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .35px;
  text-transform: uppercase;
  line-height: 1.7;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-source-meta { background: rgba(59, 130, 246, .12); color: #60a5fa; border-color: rgba(59, 130, 246, .25); }
.badge-source-whatsapp { background: rgba(37, 211, 102, .10); color: #25d366; border-color: rgba(37, 211, 102, .22); }
.badge-source-manual { background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .45); border-color: rgba(255, 255, 255, .08); }
.pl-card-foot-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

/* Contexto da captação (modal do lead) */
.capture-ctx {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 14px;
  padding: 12px 14px;
  margin: 2px 0 8px;
  background: rgba(59, 130, 246, .05);
  border: 1px solid rgba(59, 130, 246, .14);
  border-radius: 10px;
}
.capture-ctx-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  margin-bottom: 2px;
}
.capture-ctx-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Banner de status da jornada (tela Meta Ads, visão corretor) */
.meta-jr-status {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.55;
}
.meta-jr-status.ok { background: rgba(16, 185, 129, .08); border: 1px solid rgba(16, 185, 129, .22); color: #34d399; }
.meta-jr-status.pending { background: rgba(245, 197, 24, .07); border: 1px solid rgba(245, 197, 24, .2); color: #f5c518; }

/* Overrides OBRIGATÓRIOS do tema claro — regra nuclear em
   [data-theme="light"] #module-crm *:not(#sb):not(#sb *) { color: inherit }
   Pipeline, modal (#overlay) e tela Meta (#tab-config) estão dentro de #module-crm. */
body[data-theme="light"] #module-crm .badge-source-meta { background: rgba(37, 99, 235, .08); color: #2563eb !important; border-color: rgba(37, 99, 235, .25); }
body[data-theme="light"] #module-crm .badge-source-whatsapp { background: rgba(5, 150, 105, .08); color: #059669 !important; border-color: rgba(5, 150, 105, .22); }
body[data-theme="light"] #module-crm .badge-source-manual { background: rgba(15, 23, 42, .05); color: #64748b !important; border-color: rgba(15, 23, 42, .10); }
body[data-theme="light"] #module-crm .capture-ctx { background: rgba(37, 99, 235, .05); border-color: rgba(37, 99, 235, .16); }
body[data-theme="light"] #module-crm .capture-ctx-lbl { color: #64748b !important; }
body[data-theme="light"] #module-crm .capture-ctx-val { color: #0f172a !important; }
body[data-theme="light"] #module-crm .meta-jr-status.ok { background: rgba(5, 150, 105, .07); border-color: rgba(5, 150, 105, .25); color: #047857 !important; }
body[data-theme="light"] #module-crm .meta-jr-status.pending { background: rgba(180, 130, 10, .07); border-color: rgba(180, 130, 10, .28); color: #92400e !important; }

/* ═══════════════════════════════════════════════════════════════
   WHATSAPP INTEGRATIONS UX READINESS V1
   Badges de status honesto das abas WhatsApp (Web / Automação / Oficial)
   ═══════════════════════════════════════════════════════════════ */
.badge-recomendado,
.badge-beta,
.badge-tecnico {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}
.badge-recomendado { background: rgba(16, 185, 129, .12); color: #10b981; border-color: rgba(16, 185, 129, .3); }
.badge-beta { background: rgba(245, 158, 11, .12); color: #fbbf24; border-color: rgba(245, 158, 11, .35); }
.badge-tecnico { background: rgba(148, 163, 184, .1); color: #94a3b8; border-color: rgba(148, 163, 184, .25); font-weight: 700; text-transform: none; letter-spacing: 0; }

/* Hooks estruturais (estilo principal é inline, coerente com o restante da área WA) */
.wa-info-card { min-width: 0; }
.wa-warning-card { box-shadow: 0 3px 12px rgba(0, 0, 0, .12); }
.wa-dev-docs-toggle { user-select: none; }

/* Tema claro: badges legíveis sobre fundo claro (regras nucleares do light
   em #module-wa miram [style*=...], então as classes precisam de override próprio) */
body[data-theme="light"] #module-wa .badge-recomendado { background: rgba(5, 150, 105, .1); color: #047857 !important; border-color: rgba(5, 150, 105, .3); }
body[data-theme="light"] #module-wa .badge-beta { background: rgba(180, 130, 10, .1); color: #92400e !important; border-color: rgba(180, 130, 10, .35); }
body[data-theme="light"] #module-wa .badge-tecnico { background: rgba(15, 23, 42, .06); color: #475569 !important; border-color: rgba(15, 23, 42, .15); }

/* ═══════════════════════════════════════════════════════════════════════
   CAMPANHAS DE RELACIONAMENTO — ImobPilot-Zap (Envio Assistido V1)
   Pane #wa-pane-campanhas dentro de #module-wa. Base dark; overrides light
   ao final (regras nucleares do light em #module-wa exigem override por classe).
   ═══════════════════════════════════════════════════════════════════════ */
.zap-campaigns .zc-wrap { width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; }

.zap-campaigns .zc-header-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zap-campaigns .zc-title { font-size: 19px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.02em; }
.zap-campaigns .zc-badge-mode { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.3); text-transform: uppercase; letter-spacing: .04em; }
.zap-campaigns .zc-subtitle { color: #8892b0; font-size: 13px; margin: 6px 0 0; line-height: 1.6; }
.zap-campaigns .zc-notice { margin-top: 12px; font-size: 12px; line-height: 1.6; color: #fbbf24; background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.18); border-radius: 10px; padding: 10px 14px; }

.zap-campaigns .zc-resume-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.3); border-radius: 12px; padding: 12px 16px; color: #c4b5fd; font-size: 13px; font-weight: 600; }
.zap-campaigns .zc-resume-actions { display: flex; gap: 8px; }

.zap-campaign-stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zap-campaign-stepper .zc-step { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 12.5px; font-weight: 600; }
.zap-campaign-stepper .zc-step-n { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 800; color: #94a3b8; }
.zap-campaign-stepper .zc-step.active { color: #e2e8f0; }
.zap-campaign-stepper .zc-step.active .zc-step-n { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.5); color: #34d399; }
.zap-campaign-stepper .zc-step.done .zc-step-n { background: rgba(16,185,129,.25); border-color: rgba(16,185,129,.5); color: #10b981; }
.zap-campaign-stepper .zc-step-sep { flex: 0 0 26px; height: 1px; background: rgba(255,255,255,.12); }

.zap-campaign-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.zap-campaign-card .zc-card-title { font-size: 14px; font-weight: 800; color: #e2e8f0; letter-spacing: -0.01em; }
.zap-campaign-card .zc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

.zap-campaigns .zc-select { width: 100%; max-width: 340px; background: #111422; color: #e2e8f0; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-family: inherit; }
.zap-campaigns .zc-textarea { width: 100%; background: #111422; color: #e2e8f0; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; font-family: inherit; line-height: 1.6; resize: vertical; }
.zap-campaigns .zc-textarea:focus, .zap-campaigns .zc-select:focus { outline: none; border-color: rgba(16,185,129,.55); }

.zap-campaign-queue { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; max-height: 340px; overflow-y: auto; }
.zap-campaigns .zc-lead-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; font-size: 13px; }
.zap-campaigns .zc-lead-row:last-child { border-bottom: none; }
.zap-campaigns .zc-lead-row:hover { background: rgba(255,255,255,.03); }
.zap-campaigns .zc-lead-disabled { opacity: .5; cursor: not-allowed; }
.zap-campaigns .zc-lead-name { color: #e2e8f0; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-campaigns .zc-lead-phone { color: #64748b; font-size: 12px; flex-shrink: 0; }
.zap-campaigns .zc-lead-disabled .zc-lead-phone { color: #f87171; font-weight: 600; }
.zap-campaigns .zc-counter { color: #94a3b8; font-size: 12.5px; font-weight: 700; }
.zap-campaigns .zc-empty { color: #64748b; font-size: 13px; padding: 18px; text-align: center; border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; }

.zap-campaigns .zc-btn { padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; font-family: inherit; transition: all .18s ease; }
.zap-campaigns .zc-btn:disabled { opacity: .45; cursor: not-allowed; }
.zap-campaigns .zc-btn-primary { background: #10b981; color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.25); }
.zap-campaigns .zc-btn-primary:not(:disabled):hover { background: #0ea371; }
.zap-campaigns .zc-btn-ghost { background: rgba(255,255,255,.06); color: #cbd5e1; border: 1px solid rgba(255,255,255,.12); }
.zap-campaigns .zc-btn-ghost:hover { background: rgba(255,255,255,.1); }
.zap-campaigns .zc-btn-danger { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.zap-campaigns .zc-btn-danger:hover { background: rgba(239,68,68,.2); }

.zap-campaigns .zc-microcopy { color: #64748b; font-size: 12px; line-height: 1.55; }
.zap-campaigns .zc-img-attached { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(16,185,129,.05); border: 1px solid rgba(16,185,129,.2); border-radius: 12px; padding: 10px 14px; }
.zap-campaigns .zc-img-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.zap-campaigns .zc-img-meta { color: #94a3b8; font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zap-campaign-preview { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 14px; }
.zap-campaign-preview .zc-preview-title { font-size: 13px; font-weight: 800; color: #e2e8f0; }
.zap-campaign-preview .zc-preview-sub { font-size: 12px; color: #64748b; margin: 2px 0 10px; }
.zap-campaigns .zc-wa-bg { background-color: #0b141a; border-radius: 10px; padding: 18px; }
.zap-campaigns .zc-wa-bubble { max-width: 320px; margin-left: auto; background: #005c4b; border-radius: 10px 2px 10px 10px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.zap-campaigns .zc-wa-img { width: 100%; border-radius: 8px; margin-bottom: 6px; display: block; }
.zap-campaigns .zc-wa-text { color: #e9edef; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.zap-campaigns .zc-wa-time { color: rgba(233,237,239,.6); font-size: 10.5px; text-align: right; margin-top: 4px; }

.zap-campaigns .zc-summary { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
.zap-campaigns .zc-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.zap-campaigns .zc-sum-row:last-child { border-bottom: none; }
.zap-campaigns .zc-sum-row span { color: #8892b0; }
.zap-campaigns .zc-sum-row b { color: #e2e8f0; font-weight: 700; text-align: right; }

.zap-campaigns .zc-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #cbd5e1; line-height: 1.55; cursor: pointer; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 14px; }
.zap-campaigns .zc-consent input { margin-top: 3px; flex-shrink: 0; }
.zap-campaigns .zc-warn { color: #fbbf24; font-size: 12px; font-weight: 600; }
.zap-campaigns .zc-paused-note { color: #fbbf24; font-size: 12.5px; font-weight: 600; margin-right: auto; }

.zap-campaigns .zc-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: #e2e8f0; }
.zap-campaigns .zc-progress-mini { color: #94a3b8; font-size: 12px; font-weight: 600; }
.zap-campaigns .zc-progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; }
.zap-campaigns .zc-progress-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 999px; transition: width .4s ease; }
.zap-campaigns .zc-run-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.zap-campaigns .zc-queue-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.zap-campaigns .zc-queue-row:last-child { border-bottom: none; }
.zap-campaigns .zc-item-err { color: #f87171; font-size: 11px; margin-top: 2px; }

.zap-campaigns .zc-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.zap-campaigns .zc-badge-pendente { background: rgba(148,163,184,.1); color: #94a3b8; border: 1px solid rgba(148,163,184,.25); }
.zap-campaigns .zc-badge-enviando { background: rgba(59,130,246,.12); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.zap-campaigns .zc-badge-enviado { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.3); }
.zap-campaigns .zc-badge-falhou { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.zap-campaigns .zc-badge-pulado { background: rgba(251,191,36,.1); color: #fbbf24; border: 1px solid rgba(251,191,36,.25); }

/* Mobile: sem overflow horizontal */
@media (max-width: 640px) {
  #wa-pane-campanhas { padding: 14px !important; }
  .zap-campaigns .zc-wa-bubble { max-width: 100%; }
  .zap-campaign-card { padding: 14px; }
  .zap-campaigns .zc-sum-row, .zap-campaigns .zc-queue-row, .zap-campaigns .zc-lead-row { flex-wrap: wrap; }
}

/* Tema claro: regras nucleares do light em #module-wa anulam cor por classe —
   cada cor precisa de override próprio com !important */
body[data-theme="light"] #module-wa .zc-title { color: #0f172a !important; }
body[data-theme="light"] #module-wa .zc-subtitle { color: #475569 !important; }
body[data-theme="light"] #module-wa .zc-badge-mode { background: rgba(5,150,105,.1); color: #047857 !important; border-color: rgba(5,150,105,.3); }
body[data-theme="light"] #module-wa .zc-notice { background: rgba(180,130,10,.08); color: #92400e !important; border-color: rgba(180,130,10,.3); }
body[data-theme="light"] #module-wa .zc-resume-banner { background: rgba(139,92,246,.08); color: #6d28d9 !important; border-color: rgba(139,92,246,.3); }
body[data-theme="light"] #module-wa .zap-campaign-stepper .zc-step { color: #64748b !important; }
body[data-theme="light"] #module-wa .zap-campaign-stepper .zc-step.active { color: #0f172a !important; }
body[data-theme="light"] #module-wa .zap-campaign-stepper .zc-step-n { background: rgba(15,23,42,.05); border-color: rgba(15,23,42,.15); color: #475569 !important; }
body[data-theme="light"] #module-wa .zap-campaign-stepper .zc-step.active .zc-step-n,
body[data-theme="light"] #module-wa .zap-campaign-stepper .zc-step.done .zc-step-n { background: rgba(5,150,105,.12); border-color: rgba(5,150,105,.4); color: #047857 !important; }
body[data-theme="light"] #module-wa .zap-campaign-stepper .zc-step-sep { background: rgba(15,23,42,.12); }
body[data-theme="light"] #module-wa .zap-campaign-card { background: #ffffff; border-color: rgba(15,23,42,.1); box-shadow: 0 4px 16px rgba(15,23,42,.06); }
body[data-theme="light"] #module-wa .zap-campaign-card .zc-card-title { color: #0f172a !important; }
body[data-theme="light"] #module-wa .zc-select, body[data-theme="light"] #module-wa .zc-textarea { background: #f8fafc; color: #0f172a !important; border-color: rgba(15,23,42,.15); }
body[data-theme="light"] #module-wa .zc-lead-name { color: #0f172a !important; }
body[data-theme="light"] #module-wa .zc-lead-phone { color: #64748b !important; }
body[data-theme="light"] #module-wa .zc-lead-disabled .zc-lead-phone { color: #dc2626 !important; }
body[data-theme="light"] #module-wa .zc-lead-row:hover { background: rgba(15,23,42,.03); }
body[data-theme="light"] #module-wa .zc-lead-row, body[data-theme="light"] #module-wa .zc-queue-row, body[data-theme="light"] #module-wa .zc-sum-row { border-color: rgba(15,23,42,.07); }
body[data-theme="light"] #module-wa .zap-campaign-queue, body[data-theme="light"] #module-wa .zc-summary { border-color: rgba(15,23,42,.12); }
body[data-theme="light"] #module-wa .zc-counter { color: #475569 !important; }
body[data-theme="light"] #module-wa .zc-empty { color: #64748b !important; border-color: rgba(15,23,42,.15); }
body[data-theme="light"] #module-wa .zc-btn-ghost { background: rgba(15,23,42,.05); color: #334155 !important; border-color: rgba(15,23,42,.14); }
body[data-theme="light"] #module-wa .zc-btn-primary { color: #fff !important; }
body[data-theme="light"] #module-wa .zc-btn-danger { color: #dc2626 !important; }
body[data-theme="light"] #module-wa .zc-microcopy { color: #64748b !important; }
body[data-theme="light"] #module-wa .zc-img-meta { color: #475569 !important; }
body[data-theme="light"] #module-wa .zap-campaign-preview { background: #f8fafc; border-color: rgba(15,23,42,.1); }
body[data-theme="light"] #module-wa .zap-campaign-preview .zc-preview-title { color: #0f172a !important; }
body[data-theme="light"] #module-wa .zap-campaign-preview .zc-preview-sub { color: #64748b !important; }
body[data-theme="light"] #module-wa .zc-wa-bg { background-color: #e5ddd5; }
body[data-theme="light"] #module-wa .zc-wa-bubble { background: #d9fdd3; }
body[data-theme="light"] #module-wa .zc-wa-text { color: #111b21 !important; }
body[data-theme="light"] #module-wa .zc-wa-time { color: rgba(17,27,33,.5) !important; }
body[data-theme="light"] #module-wa .zc-sum-row span { color: #64748b !important; }
body[data-theme="light"] #module-wa .zc-sum-row b { color: #0f172a !important; }
body[data-theme="light"] #module-wa .zc-consent { background: rgba(15,23,42,.03); color: #334155 !important; border-color: rgba(15,23,42,.12); }
body[data-theme="light"] #module-wa .zc-warn, body[data-theme="light"] #module-wa .zc-paused-note { color: #b45309 !important; }
body[data-theme="light"] #module-wa .zc-progress-head { color: #0f172a !important; }
body[data-theme="light"] #module-wa .zc-progress-mini { color: #64748b !important; }
body[data-theme="light"] #module-wa .zc-progress-bar { background: rgba(15,23,42,.08); }
body[data-theme="light"] #module-wa .zc-badge-pendente { background: rgba(100,116,139,.1); color: #475569 !important; }
body[data-theme="light"] #module-wa .zc-badge-enviando { background: rgba(37,99,235,.1); color: #1d4ed8 !important; }
body[data-theme="light"] #module-wa .zc-badge-enviado { background: rgba(5,150,105,.1); color: #047857 !important; }
body[data-theme="light"] #module-wa .zc-badge-falhou { background: rgba(220,38,38,.08); color: #dc2626 !important; }
body[data-theme="light"] #module-wa .zc-badge-pulado { background: rgba(180,130,10,.1); color: #92400e !important; }

/* ═══════════════════════════════════════════════════════════════════════
   CENTRAL DE AJUDA V1 — .hlp-* (novo namespace, não colide com .help-*)
   Top-resultados, chips de busca, "Comece por aqui", tutoriais rápidos,
   grupos de FAQ, flash de foco e FAB "?" global. Overrides light ao final
   (regra nuclear do tema claro anula cor por classe nos #module-*).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Top resultados (ranking) ── */
.hlp-top-results { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: center; }
.hlp-top-item { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #e2e8f0; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .18s ease; max-width: 100%; }
.hlp-top-item:hover { background: rgba(245,197,24,.12); border-color: rgba(245,197,24,.4); }
.hlp-top-kind { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #f5c518; }
.hlp-top-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Chips de sugestão/histórico ── */
.hlp-search-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.hlp-chip { padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #94a3b8; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .18s ease; }
.hlp-chip:hover { color: #e2e8f0; border-color: rgba(255,255,255,.28); }
.hlp-chip-hist { border-style: dashed; }

/* ── Comece por aqui ── */
.hlp-start { background: linear-gradient(135deg, rgba(245,197,24,.07), rgba(255,255,255,.02)); border: 1px solid rgba(245,197,24,.22); border-radius: 16px; padding: 18px 20px; margin: 22px 0 8px; display: flex; flex-direction: column; gap: 14px; }
.hlp-start-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hlp-start-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(245,197,24,.12); border: 1px solid rgba(245,197,24,.3); display: flex; align-items: center; justify-content: center; color: #f5c518; flex-shrink: 0; }
.hlp-start-icon svg { width: 22px; height: 22px; }
.hlp-start-txt { flex: 1; min-width: 220px; }
.hlp-start-title { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.hlp-start-desc { font-size: 12.5px; color: #94a3b8; line-height: 1.6; margin: 4px 0 0; }
.hlp-start-btn { padding: 10px 18px; border-radius: 10px; background: #f5c518; color: #111422; font-size: 13px; font-weight: 800; border: none; cursor: pointer; font-family: inherit; transition: all .18s ease; }
.hlp-start-btn:hover { filter: brightness(1.08); }
.hlp-start-links { display: flex; flex-wrap: wrap; gap: 8px; }
.hlp-start-link { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #cbd5e1; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .18s ease; }
.hlp-start-link:hover { border-color: rgba(245,197,24,.4); color: #f5c518; }

/* ── Tutoriais rápidos ── */
.hlp-sec-sub { font-size: 12.5px; color: #64748b; margin: -6px 0 14px; line-height: 1.6; }
.hlp-tut-list { display: flex; flex-direction: column; gap: 10px; }
.hlp-tut { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; transition: border-color .2s ease; }
.hlp-tut.open { border-color: rgba(245,197,24,.3); }
.hlp-tut-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; }
.hlp-tut-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; background: rgba(245,197,24,.1); color: #f5c518; border: 1px solid rgba(245,197,24,.25); flex-shrink: 0; }
.hlp-tut-title { flex: 1; font-size: 13.5px; font-weight: 700; color: #e2e8f0; }
.hlp-tut-chev { color: #64748b; transition: transform .25s ease; flex-shrink: 0; }
.hlp-tut.open .hlp-tut-chev { transform: rotate(180deg); }
.hlp-tut-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.hlp-tut-steps { margin: 0; padding: 4px 18px 12px 38px; display: flex; flex-direction: column; gap: 7px; }
.hlp-tut-steps li { font-size: 12.5px; color: #94a3b8; line-height: 1.6; }
.hlp-tut-steps li::marker { color: #f5c518; font-weight: 700; }
.hlp-tut-foot { padding: 0 18px 14px; display: flex; justify-content: flex-end; }
.hlp-video-slot { margin: 4px 18px 12px; border: 1px dashed rgba(255,255,255,.14); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; color: #64748b; font-size: 12px; font-weight: 600; }
.hlp-video-slot.is-soon svg { opacity: .5; }

/* ── Grupos de FAQ ── */
.hlp-faq-group { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin: 18px 0 6px; padding-left: 2px; }
.hlp-faq-group:first-child { margin-top: 0; }

/* ── Flash de foco (ajuda contextual) ── */
@keyframes hlpFlash {
  0% { box-shadow: 0 0 0 0 rgba(245,197,24,.55); }
  60% { box-shadow: 0 0 0 8px rgba(245,197,24,.12); }
  100% { box-shadow: 0 0 0 0 rgba(245,197,24,0); }
}
.hlp-flash { animation: hlpFlash 1.7s ease-out 1; border-color: rgba(245,197,24,.5) !important; }
@media (prefers-reduced-motion: reduce) { .hlp-flash { animation: none; } }

/* ── FAB "?" global (fora do módulo — bottom acima do WA float do dashboard) ── */
#hlpFab { position: fixed; right: 28px; bottom: 94px; width: 40px; height: 40px; border-radius: 50%; background: rgba(17,20,34,.92); color: #f5c518; border: 1px solid rgba(245,197,24,.35); font-size: 18px; font-weight: 800; font-family: inherit; cursor: pointer; z-index: 3400; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: all .2s ease; }
#hlpFab:hover { transform: scale(1.08); background: rgba(245,197,24,.15); }
@media (max-width: 640px) { #hlpFab { right: 16px; bottom: 86px; width: 38px; height: 38px; } }

/* ── Tema claro (regra nuclear: overrides por classe com !important) ── */
body[data-theme="light"] #module-ajuda .hlp-top-item { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.14); color: #334155 !important; }
body[data-theme="light"] #module-ajuda .hlp-top-item:hover { background: rgba(180,130,10,.08); border-color: rgba(180,130,10,.35); }
body[data-theme="light"] #module-ajuda .hlp-top-kind { color: #92400e !important; }
body[data-theme="light"] #module-ajuda .hlp-chip { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.13); color: #64748b !important; }
body[data-theme="light"] #module-ajuda .hlp-chip:hover { color: #0f172a !important; border-color: rgba(15,23,42,.3); }
body[data-theme="light"] #module-ajuda .hlp-start { background: rgba(180,130,10,.05); border-color: rgba(180,130,10,.22); }
body[data-theme="light"] #module-ajuda .hlp-start-icon { background: rgba(180,130,10,.1); border-color: rgba(180,130,10,.3); color: #92400e !important; }
body[data-theme="light"] #module-ajuda .hlp-start-title { color: #0f172a !important; }
body[data-theme="light"] #module-ajuda .hlp-start-desc { color: #475569 !important; }
body[data-theme="light"] #module-ajuda .hlp-start-btn { background: #b45309; color: #fff !important; }
body[data-theme="light"] #module-ajuda .hlp-start-link { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.13); color: #334155 !important; }
body[data-theme="light"] #module-ajuda .hlp-start-link:hover { color: #92400e !important; border-color: rgba(180,130,10,.4); }
body[data-theme="light"] #module-ajuda .hlp-sec-sub { color: #64748b !important; }
body[data-theme="light"] #module-ajuda .hlp-tut { background: #ffffff; border-color: rgba(15,23,42,.1); }
body[data-theme="light"] #module-ajuda .hlp-tut.open { border-color: rgba(180,130,10,.35); }
body[data-theme="light"] #module-ajuda .hlp-tut-badge { background: rgba(180,130,10,.08); color: #92400e !important; border-color: rgba(180,130,10,.25); }
body[data-theme="light"] #module-ajuda .hlp-tut-title { color: #0f172a !important; }
body[data-theme="light"] #module-ajuda .hlp-tut-chev { color: #94a3b8 !important; }
body[data-theme="light"] #module-ajuda .hlp-tut-steps li { color: #475569 !important; }
body[data-theme="light"] #module-ajuda .hlp-tut-steps li::marker { color: #b45309; }
body[data-theme="light"] #module-ajuda .hlp-video-slot { border-color: rgba(15,23,42,.16); color: #64748b !important; }
body[data-theme="light"] #module-ajuda .hlp-faq-group { color: #64748b !important; }
body[data-theme="light"] #module-ajuda .hlp-flash { border-color: rgba(180,130,10,.5) !important; }
body[data-theme="light"] #hlpFab { background: #ffffff; color: #92400e !important; border-color: rgba(180,130,10,.4); box-shadow: 0 6px 20px rgba(15,23,42,.15); }
body[data-theme="light"] #hlpFab:hover { background: rgba(180,130,10,.08); }

/* ═══════════════════════════════════════════════════════════════════════
   CENTRAL DE TREINAMENTO (Ajuda V2) — trilhas guiadas com progresso
   (.hlp-track*). Base dark; overrides light ao final (regra nuclear).
   ═══════════════════════════════════════════════════════════════════════ */
.hlp-training { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 6px; }
.hlp-training:empty { display: none; }
.hlp-training-title { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.hlp-training-sub { font-size: 12.5px; color: #64748b; line-height: 1.6; margin: 4px 0 0; max-width: 640px; }

.hlp-track { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; transition: border-color .25s ease; }
.hlp-track.is-complete { border-color: rgba(16,185,129,.35); }
.hlp-track-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hlp-track-meta { flex: 1; min-width: 220px; }
.hlp-track-title { font-size: 14.5px; font-weight: 800; color: #e2e8f0; }
.hlp-track-desc { font-size: 12px; color: #64748b; line-height: 1.55; margin: 3px 0 0; }
.hlp-track-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 150px; }
.hlp-track-count { font-size: 11.5px; font-weight: 700; color: #94a3b8; }
.hlp-track-chip { font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.35); }
.hlp-track-bar { width: 150px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.hlp-track-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f5c518, #34d399); transition: width .35s ease; }

.hlp-track-steps { display: flex; flex-direction: column; }
.hlp-track-step { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.hlp-track-step:last-child { border-bottom: none; }
.hlp-track-check { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.hlp-track-check input { width: 17px; height: 17px; accent-color: #10b981; cursor: pointer; }
.hlp-track-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.25); color: #f5c518; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hlp-track-step.done .hlp-track-num { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.4); color: #34d399; }
.hlp-track-txt { flex: 1; min-width: 0; }
.hlp-track-step-title { font-size: 13px; font-weight: 700; color: #e2e8f0; }
.hlp-track-step.done .hlp-track-step-title { color: #64748b; text-decoration: line-through; text-decoration-color: rgba(16,185,129,.5); }
.hlp-track-step-desc { font-size: 11.5px; color: #64748b; line-height: 1.5; margin-top: 1px; }
.hlp-track-acts { display: flex; gap: 8px; flex-shrink: 0; }
.hlp-track-btn { padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #cbd5e1; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .18s ease; white-space: nowrap; }
.hlp-track-btn:hover { border-color: rgba(245,197,24,.4); color: #f5c518; }
.hlp-track-btn-go { background: rgba(16,185,129,.09); border-color: rgba(16,185,129,.3); color: #34d399; }
.hlp-track-btn-go:hover { background: rgba(16,185,129,.16); color: #34d399; border-color: rgba(16,185,129,.5); }

@media (max-width: 640px) {
  .hlp-track { padding: 14px; }
  .hlp-track-step { flex-wrap: wrap; }
  .hlp-track-acts { width: 100%; justify-content: flex-end; }
  .hlp-track-progress { align-items: flex-start; }
}

/* ── Tema claro (overrides por classe com !important — regra nuclear) ── */
body[data-theme="light"] #module-ajuda .hlp-training-title { color: #0f172a !important; }
body[data-theme="light"] #module-ajuda .hlp-training-sub { color: #64748b !important; }
body[data-theme="light"] #module-ajuda .hlp-track { background: #ffffff; border-color: rgba(15,23,42,.1); }
body[data-theme="light"] #module-ajuda .hlp-track.is-complete { border-color: rgba(5,150,105,.4); }
body[data-theme="light"] #module-ajuda .hlp-track-title { color: #0f172a !important; }
body[data-theme="light"] #module-ajuda .hlp-track-desc { color: #64748b !important; }
body[data-theme="light"] #module-ajuda .hlp-track-count { color: #475569 !important; }
body[data-theme="light"] #module-ajuda .hlp-track-chip { background: rgba(5,150,105,.1); color: #047857 !important; border-color: rgba(5,150,105,.35); }
body[data-theme="light"] #module-ajuda .hlp-track-bar { background: rgba(15,23,42,.08); }
body[data-theme="light"] #module-ajuda .hlp-track-step { border-color: rgba(15,23,42,.07); }
body[data-theme="light"] #module-ajuda .hlp-track-num { background: rgba(180,130,10,.08); border-color: rgba(180,130,10,.3); color: #92400e !important; }
body[data-theme="light"] #module-ajuda .hlp-track-step.done .hlp-track-num { background: rgba(5,150,105,.1); border-color: rgba(5,150,105,.4); color: #047857 !important; }
body[data-theme="light"] #module-ajuda .hlp-track-step-title { color: #0f172a !important; }
body[data-theme="light"] #module-ajuda .hlp-track-step.done .hlp-track-step-title { color: #94a3b8 !important; }
body[data-theme="light"] #module-ajuda .hlp-track-step-desc { color: #64748b !important; }
body[data-theme="light"] #module-ajuda .hlp-track-btn { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.14); color: #334155 !important; }
body[data-theme="light"] #module-ajuda .hlp-track-btn:hover { color: #92400e !important; border-color: rgba(180,130,10,.4); }
body[data-theme="light"] #module-ajuda .hlp-track-btn-go { background: rgba(5,150,105,.07); border-color: rgba(5,150,105,.3); color: #047857 !important; }
body[data-theme="light"] #module-ajuda .hlp-track-btn-go:hover { background: rgba(5,150,105,.12); }

/* ═══════════════════════════════════════════════════════════════════════
   ONBOARDING V2 (OV2-A) — menu do FAB "?" (Tour desta tela · Ajuda) e
   botão de tour no welcome. O tour em si reusa o CSS do motor existente
   (#onboarding-overlay/highlight/cursor/card). Overrides light ao final.
   ═══════════════════════════════════════════════════════════════════════ */
.tour2-menu { position: fixed; right: 24px; bottom: 142px; z-index: 3401; display: flex; flex-direction: column; gap: 4px; background: rgba(13,16,28,.97); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.45); min-width: 240px; }
.tour2-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: 8px; background: transparent; color: #e2e8f0; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-align: left; transition: background .15s ease; }
.tour2-menu-item:hover { background: rgba(245,197,24,.1); }
.tour2-menu-ico { font-size: 15px; flex-shrink: 0; }
@media (max-width: 640px) { .tour2-menu { right: 12px; bottom: 132px; min-width: 210px; } }

/* Botão secundário de tour no welcome (#onboarding-box) */
.ob-btn-tour { background: rgba(245,197,24,.12) !important; color: #f5c518 !important; border: 1px solid rgba(245,197,24,.35) !important; margin-bottom: 8px; }
.ob-btn-tour:hover { background: rgba(245,197,24,.2) !important; }

/* Tema claro (o menu vive fora dos #module-* — override direto) */
body[data-theme="light"] .tour2-menu { background: #ffffff; border-color: rgba(15,23,42,.14); box-shadow: 0 12px 34px rgba(15,23,42,.18); }
body[data-theme="light"] .tour2-menu-item { color: #1e293b !important; }
body[data-theme="light"] .tour2-menu-item:hover { background: rgba(180,130,10,.08); }
body[data-theme="light"] .ob-btn-tour { background: rgba(180,130,10,.1) !important; color: #92400e !important; border-color: rgba(180,130,10,.35) !important; }

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM FLOATING ACTIONS — ImobPilot-Zap + onboarding local
═══════════════════════════════════════════════════════════════════ */
#wa-float-btn.premium-float-action {
  right: 28px; bottom: 28px; width: auto; min-width: 0; height: 58px; padding: 0 17px 0 8px;
  border-radius: 18px; display: inline-flex; gap: 10px; color: var(--text);
  background: color-mix(in srgb, var(--card) 82%, var(--green));
  border: 1px solid color-mix(in srgb, var(--green) 46%, var(--border));
  box-shadow: 0 14px 38px color-mix(in srgb, var(--green) 22%, transparent), 0 12px 26px rgba(0,0,0,.3);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: transform .22s var(--ease, ease), box-shadow .22s var(--ease, ease), border-color .22s var(--ease, ease);
}
#wa-float-btn.premium-float-action:hover, #wa-float-btn.premium-float-action.quick-open, #wa-float-btn.premium-float-action.panel-open { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 18px 44px color-mix(in srgb, var(--green) 31%, transparent), 0 14px 30px rgba(0,0,0,.38); }
#wa-float-btn.premium-float-action:focus-visible, #hlpFab:focus-visible, .wa-quick-panel button:focus-visible, .tour2-menu button:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.premium-float-action-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: var(--text); background: linear-gradient(145deg, var(--green), color-mix(in srgb, var(--green) 62%, var(--card))); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 7px 14px color-mix(in srgb, var(--green) 31%, transparent); }
.premium-float-action-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.18; white-space: nowrap; }
.premium-float-action-copy strong { font-size: 12px; letter-spacing: -.1px; }
.premium-float-action-copy small { margin-top: 3px; color: var(--muted); font-size: 9.5px; font-weight: 650; }
#wa-float-btn.premium-float-action #wa-fab-badge { top: -6px; right: -6px; border-color: var(--card); background: var(--acc); color: var(--card); box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.wa-quick-panel { position: fixed; right: 28px; bottom: 98px; z-index: 99974; width: min(350px, calc(100vw - 32px)); box-sizing: border-box; padding: 18px; border: 1px solid color-mix(in srgb, var(--green) 37%, var(--border)); border-radius: 20px; color: var(--text); background: color-mix(in srgb, var(--card) 93%, transparent); box-shadow: 0 24px 66px rgba(0,0,0,.46); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); transform-origin: bottom right; animation: premiumFloatPanelIn .22s var(--ease, ease) both; }
.wa-quick-panel[hidden] { display: none; }
.wa-quick-topline { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .12px; }
.wa-quick-status { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 17%, transparent); }
.wa-quick-head { display: flex; gap: 11px; align-items: flex-start; padding-right: 24px; }
.wa-quick-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--green) 82%, var(--card)); }
.wa-quick-head h2 { margin: 0; color: var(--text); font-size: 15px; letter-spacing: -.25px; }
.wa-quick-head p { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.wa-quick-close { position: absolute; top: 13px; right: 13px; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--muted); font: 500 20px/1 inherit; cursor: pointer; transition: background .16s var(--ease, ease), color .16s var(--ease, ease); }
.wa-quick-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.wa-quick-cta { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--green) 52%, transparent); border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--green) 78%, var(--card)); box-shadow: 0 7px 18px color-mix(in srgb, var(--green) 18%, transparent); font: 700 12px/1.2 inherit; cursor: pointer; transition: transform .16s var(--ease, ease), filter .16s var(--ease, ease); }
.wa-quick-cta:hover { transform: translateY(-1px); filter: brightness(1.07); }.wa-quick-cta span { font-size: 16px; }.wa-quick-footnote { margin: 11px 0 0; color: var(--muted2); font-size: 9.5px; line-height: 1.4; text-align: center; }

#hlpFab { right: 28px; bottom: 98px; width: auto; height: 48px; min-width: 0; padding: 0 14px 0 6px; display: inline-flex; align-items: center; gap: 8px; border-radius: 15px; border-color: color-mix(in srgb, var(--acc) 47%, var(--border)); color: var(--text); background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 10px 27px rgba(0,0,0,.28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#hlpFab:hover { transform: translateY(-3px); color: var(--text); background: color-mix(in srgb, var(--acc) 12%, var(--card)); box-shadow: 0 15px 32px color-mix(in srgb, var(--acc) 18%, transparent); }
.hlp-fab-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: var(--card); background: var(--acc); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); font-size: 17px; font-weight: 850; }.hlp-fab-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; white-space: nowrap; }.hlp-fab-copy strong { font-size: 11px; letter-spacing: .1px; }.hlp-fab-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 650; }
.tour2-menu { right: 28px; bottom: 156px; z-index: 99974; gap: 6px; min-width: min(326px, calc(100vw - 32px)); padding: 8px; border-color: color-mix(in srgb, var(--acc) 34%, var(--border)); border-radius: 20px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 24px 66px rgba(0,0,0,.46); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); animation: premiumFloatPanelIn .22s var(--ease, ease) both; }
.tour2-menu-head { display: flex; flex-direction: column; padding: 8px 9px 9px; }.tour2-menu-head strong { margin-top: 4px; color: var(--text); font-size: 14px; letter-spacing: -.15px; }.tour2-menu-head > span:last-child { margin-top: 3px; color: var(--muted); font-size: 10.5px; line-height: 1.35; }.tour2-menu-kicker { color: var(--acc); font-size: 8.5px; font-weight: 850; letter-spacing: .16em; }
.tour2-menu-item { gap: 10px; padding: 10px; border: 1px solid transparent; border-radius: 13px; color: var(--text); }.tour2-menu-item:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); border-color: color-mix(in srgb, var(--acc) 22%, transparent); }.tour2-menu-item.is-featured { background: color-mix(in srgb, var(--acc) 12%, transparent); border-color: color-mix(in srgb, var(--acc) 27%, transparent); }.tour2-menu-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, transparent); font-size: 15px; }.tour2-menu-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }.tour2-menu-copy strong { color: var(--text); font-size: 11.5px; }.tour2-menu-copy small { margin-top: 3px; color: var(--muted); font-size: 9.5px; font-weight: 500; }.tour2-menu-arrow { color: var(--muted2); font-size: 15px; }
@keyframes premiumFloatPanelIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 640px) { #wa-float-btn.premium-float-action { right: 14px; bottom: 18px; height: 54px; padding-right: 13px; } .premium-float-action-icon { width: 39px; height: 39px; border-radius: 12px; } .premium-float-action-copy small { display: none; } .wa-quick-panel { right: 14px; bottom: 84px; width: calc(100vw - 28px); } #hlpFab { right: 14px; bottom: 82px; height: 44px; padding-right: 11px; } .hlp-fab-icon { width: 32px; height: 32px; } .hlp-fab-copy small { display: none; } .tour2-menu { right: 14px; bottom: 136px; min-width: 0; width: calc(100vw - 28px); } }
@media (prefers-reduced-motion: reduce) { #wa-float-btn.premium-float-action, #hlpFab, .wa-quick-panel, .tour2-menu, .wa-quick-cta { transition: none; animation: none; } }

/* ════════════════════════════════════════════════════════════════════════
   MANUAL PRO — PAINEL DE PROGRESSO (Fase 5 · polish AAA)
   Injetado por JS em #prosp-progress-panel, no topo de #module-prospeccao.
   Tematizado por variáveis locais (dark default → override light).
   #module-prospeccao NÃO está na regra nuclear color:inherit, mas o bloco
   light abaixo é explícito (com !important) para blindar text-colors.
════════════════════════════════════════════════════════════════════════ */
#prosp-progress-panel {
  --pp-green: #22c55e; --pp-green-soft: rgba(34,197,94,.14);
  --pp-orange: #fb923c; --pp-orange-soft: rgba(251,146,60,.16);
  --pp-gold: #facc15;
  --pp-text: #ffffff; --pp-muted: rgba(255,255,255,.55);
  --pp-surface: linear-gradient(135deg, rgba(34,197,94,.10), rgba(255,255,255,.03));
  --pp-border: rgba(34,197,94,.28);
  --pp-chip-bg: rgba(255,255,255,.06); --pp-chip-border: rgba(255,255,255,.12);
  --pp-track: rgba(255,255,255,.10); --pp-divider: rgba(255,255,255,.08);
}
.prosp-panel {
  margin: 0 0 22px; padding: 20px 22px; border-radius: 22px;
  background: var(--pp-surface); border: 1px solid var(--pp-border);
  box-shadow: 0 14px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--pp-text); box-sizing: border-box; max-width: 100%;
}
.prosp-panel__head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.prosp-panel__eyebrow { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-muted); }
.prosp-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prosp-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  background: var(--pp-chip-bg); border: 1px solid var(--pp-chip-border);
  font-size: 13px; font-weight: 800; color: var(--pp-text); line-height: 1;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.prosp-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.prosp-chip--streak { background: var(--pp-orange-soft); border-color: color-mix(in srgb, var(--pp-orange) 40%, transparent); color: #fdba74; }
.prosp-chip--level { background: var(--pp-green-soft); border-color: color-mix(in srgb, var(--pp-green) 40%, transparent); color: var(--pp-green); }

.prosp-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; align-items: center; }
.prosp-meter__label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--pp-muted); margin-bottom: 7px; }
.prosp-bar { height: 8px; border-radius: 999px; background: var(--pp-track); overflow: hidden; }
.prosp-bar__fill { height: 100%; width: var(--pp-fill, 0%); border-radius: 999px; transition: width .5s cubic-bezier(.22,1,.36,1); }
.prosp-bar__fill--green { background: linear-gradient(90deg, var(--pp-green), #16a34a); box-shadow: 0 0 12px color-mix(in srgb, var(--pp-green) 40%, transparent); }
.prosp-bar__fill--orange { background: linear-gradient(90deg, var(--pp-orange), #f59e0b); box-shadow: 0 0 12px color-mix(in srgb, var(--pp-orange) 40%, transparent); }

.prosp-stats { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.prosp-stat { display: flex; flex-direction: column; gap: 4px; }
.prosp-stat__num { font-size: 22px; font-weight: 900; line-height: 1; color: var(--pp-text); font-family: 'Montserrat', sans-serif; }
.prosp-stat__cap { font-size: 11px; color: var(--pp-muted); }

.prosp-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--pp-green-soft); border: 1px solid color-mix(in srgb, var(--pp-green) 26%, transparent); }
.prosp-next__ic { font-size: 16px; }
.prosp-next__txt { font-size: 13px; color: var(--pp-text); }
.prosp-next__txt strong { color: var(--pp-green); }
.prosp-next__go { margin-left: auto; border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px; font: 800 12px/1 inherit; color: #02130a; background: linear-gradient(135deg, var(--pp-green), #16a34a); transition: transform .16s ease, box-shadow .16s ease; }
.prosp-next__go:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--pp-green) 35%, transparent); }
.prosp-next__go:focus-visible { outline: 2px solid var(--pp-green); outline-offset: 2px; }
.prosp-next--done { background: var(--pp-chip-bg); border-color: var(--pp-chip-border); }

.prosp-panel__medals { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pp-divider); }
.prosp-medal { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--pp-gold); background: color-mix(in srgb, var(--pp-gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pp-gold) 40%, transparent); transition: transform .16s ease; }
.prosp-medal:hover { transform: translateY(-1px); }
.prosp-medal-empty { font-size: 12px; color: var(--pp-muted); }

@media (max-width: 560px) {
  .prosp-panel { padding: 16px; }
  .prosp-panel__grid { grid-template-columns: 1fr; gap: 14px; }
  .prosp-stats { justify-content: space-between; gap: 12px; }
  .prosp-next__go { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .prosp-bar__fill, .prosp-chip, .prosp-next__go, .prosp-medal { transition: none; }
}

/* ── Tema claro: accent verde→azul (padrão do módulo); text-colors com !important ── */
[data-theme="light"] #prosp-progress-panel {
  --pp-green: #2563eb; --pp-green-soft: rgba(37,99,235,.10);
  --pp-orange: #b45309; --pp-orange-soft: rgba(245,158,11,.12);
  --pp-gold: #b45309;
  --pp-text: #0f172a; --pp-muted: #64748b;
  --pp-surface: linear-gradient(135deg, rgba(37,99,235,.06), #ffffff);
  --pp-border: rgba(37,99,235,.20);
  --pp-chip-bg: #f1f5f9; --pp-chip-border: rgba(15,23,42,.10);
  --pp-track: rgba(15,23,42,.08); --pp-divider: rgba(15,23,42,.08);
}
[data-theme="light"] #module-prospeccao .prosp-panel { box-shadow: 0 14px 44px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8); }
[data-theme="light"] #module-prospeccao .prosp-chip,
[data-theme="light"] #module-prospeccao .prosp-stat__num,
[data-theme="light"] #module-prospeccao .prosp-next__txt { color: var(--pp-text) !important; }
[data-theme="light"] #module-prospeccao .prosp-panel__eyebrow,
[data-theme="light"] #module-prospeccao .prosp-meter__label,
[data-theme="light"] #module-prospeccao .prosp-stat__cap,
[data-theme="light"] #module-prospeccao .prosp-medal-empty { color: var(--pp-muted) !important; }
[data-theme="light"] #module-prospeccao .prosp-chip--level,
[data-theme="light"] #module-prospeccao .prosp-next__txt strong { color: var(--pp-green) !important; }
[data-theme="light"] #module-prospeccao .prosp-chip--streak { color: #b45309 !important; }
[data-theme="light"] #module-prospeccao .prosp-medal { color: var(--pp-gold) !important; }
[data-theme="light"] #module-prospeccao .prosp-next__go { color: #ffffff !important; }

/* ════════════════════════════════════════════════════════════════════════
   MANUAL PRO — DESIGN SYSTEM DO MODAL DE TESTES (Fase 6)
   Estiliza as classes tsk-* que o app.js já emite mas estavam SEM CSS
   (cards, botões, opções, pills, progresso, questão, blocos). O modal vive
   no NÍVEL DO BODY (fora de #module-*), então o tema claro é keyado em
   .tsk-dialog — sem necessidade da regra nuclear color:inherit / !important.
   Namespaced em .tsk-* (não afeta outros módulos).
════════════════════════════════════════════════════════════════════════ */
.tsk-dialog {
  --tk-bg: #111418; --tk-body: #0b0e11; --tk-text: #eef2f0; --tk-muted: #98a6ad;
  --tk-border: rgba(255,255,255,.10); --tk-card: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  --tk-green: #22c55e; --tk-green-soft: rgba(34,197,94,.14); --tk-orange: #fb923c; --tk-blue: #38bdf8;
  --tk-track: rgba(255,255,255,.10); --tk-chip: rgba(255,255,255,.06); --tk-chip-bd: rgba(255,255,255,.14);
  /* vars usadas por estilos inline legados do render (antes indefinidas) */
  --dream-orange: #fb923c; --pnl-blue: #38bdf8;
}
[data-theme="light"] .tsk-dialog {
  --tk-bg: #ffffff; --tk-body: #f6f8fa; --tk-text: #0f172a; --tk-muted: #5b6b76;
  --tk-border: #e2e8f0; --tk-card: #ffffff;
  --tk-green: #2563eb; --tk-green-soft: rgba(37,99,235,.08); --tk-orange: #b45309; --tk-blue: #2563eb;
  --tk-track: rgba(15,23,42,.08); --tk-chip: #f1f5f9; --tk-chip-bd: rgba(15,23,42,.12);
  --dream-orange: #ea7317; --pnl-blue: #2563eb;
}

/* Re-tema da casca (sobrescreve as regras dark hardcoded via cascade) */
.tsk-dialog { background: var(--tk-bg); color: var(--tk-text); border: 1px solid var(--tk-border); }
[data-theme="light"] .tsk-dialog { box-shadow: 0 20px 60px rgba(15,23,42,.16); }
.tsk-header { background: color-mix(in srgb, var(--tk-green) 5%, var(--tk-bg)); border-bottom: 1px solid var(--tk-border); }
.tsk-header-copy { display: flex; flex-direction: column; gap: 3px; }
.tsk-eyebrow { color: var(--tk-green); }
.tsk-title { color: var(--tk-text); }
.tsk-subtitle { color: var(--tk-muted); }
.tsk-close { background: var(--tk-chip); border: 1px solid var(--tk-border); color: var(--tk-text); }
.tsk-close:hover { background: color-mix(in srgb, var(--tk-green) 12%, var(--tk-chip)); }
.tsk-body { background: var(--tk-body); color: var(--tk-text); }
.tsk-surface { display: block; }

/* Toolbar */
.tsk-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.tsk-section-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--tk-text); }
.tsk-section-text { margin: 4px 0 0; font-size: 13px; color: var(--tk-muted); }
.tsk-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Grids de cartões */
.tsk-area-grid, .tsk-test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

/* Cartão (o próprio <button> é clicável) */
.tsk-card { display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; padding: 18px; border-radius: 16px; cursor: pointer; color: var(--tk-text); background: var(--tk-card); border: 1px solid var(--tk-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; font-family: inherit; }
.tsk-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tk-green) 45%, transparent); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.tsk-card:focus-visible { outline: 2px solid var(--tk-green); outline-offset: 2px; }
.tsk-card-meta { display: flex; gap: 7px; flex-wrap: wrap; }
.tsk-pill { font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; color: var(--tk-muted); background: var(--tk-chip); border: 1px solid var(--tk-chip-bd); }
.tsk-card-title { margin: 2px 0 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--tk-text); }
.tsk-card-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tk-muted); }

/* Progresso */
.tsk-progress-shell { margin-bottom: 18px; }
.tsk-progress-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--tk-muted); margin-bottom: 7px; }
.tsk-progress-track { height: 8px; border-radius: 999px; background: var(--tk-track); overflow: hidden; }
.tsk-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--tk-green), #16a34a); box-shadow: 0 0 12px color-mix(in srgb, var(--tk-green) 40%, transparent); transition: width .5s cubic-bezier(.22,1,.36,1); }

/* Cartão de questão */
.tsk-question-card { padding: 22px; border-radius: 16px; background: var(--tk-card); border: 1px solid var(--tk-border); }
.tsk-question-text { margin: 0 0 20px; font-weight: 700; line-height: 1.4; color: var(--tk-text); }

/* Opções (o próprio <button> = opção; estado real .tsk-selected) */
.tsk-options { display: flex; flex-direction: column; gap: 11px; }
.tsk-option { display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left; padding: 14px 15px; border-radius: 13px; cursor: pointer; color: var(--tk-text); background: var(--tk-chip); border: 1px solid var(--tk-border); transition: border-color .15s ease, background .15s ease; font-family: inherit; }
.tsk-option:hover { border-color: color-mix(in srgb, var(--tk-green) 45%, transparent); background: color-mix(in srgb, var(--tk-green) 7%, var(--tk-chip)); }
.tsk-option:focus-visible { outline: 2px solid var(--tk-green); outline-offset: 2px; }
.tsk-option-label { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font-weight: 900; color: var(--tk-muted); background: var(--tk-track); border: 1px solid var(--tk-border); }
.tsk-option-text { font-size: 14px; line-height: 1.5; padding-top: 3px; }
.tsk-option.tsk-selected { border-color: var(--tk-green); background: var(--tk-green-soft); box-shadow: inset 0 0 0 1px var(--tk-green); }
.tsk-option.tsk-selected .tsk-option-label { color: #02130a; background: var(--tk-green); border-color: var(--tk-green); }
[data-theme="light"] .tsk-option.tsk-selected .tsk-option-label { color: #fff; }

/* Navegação */
.tsk-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

/* Botões */
.tsk-button, .tsk-button-secondary, .tsk-button-ghost { font: 800 13px/1 inherit; padding: 12px 20px; border-radius: 11px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; border: 1px solid transparent; }
.tsk-button { color: #02130a; background: linear-gradient(135deg, var(--tk-green), #16a34a); box-shadow: 0 10px 24px color-mix(in srgb, var(--tk-green) 26%, transparent); }
.tsk-button:hover { transform: translateY(-1px); }
[data-theme="light"] .tsk-button { color: #ffffff; }
.tsk-button-secondary { color: var(--tk-text); background: var(--tk-chip); border-color: var(--tk-chip-bd); }
.tsk-button-secondary:hover { background: color-mix(in srgb, var(--tk-green) 8%, var(--tk-chip)); }
.tsk-button-ghost { color: var(--tk-muted); background: transparent; border-color: var(--tk-border); }
.tsk-button-ghost:hover { color: var(--tk-text); border-color: var(--tk-chip-bd); }
.tsk-button:disabled, .tsk-button-ghost:disabled, .tsk-button-secondary:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.tsk-button:focus-visible, .tsk-button-secondary:focus-visible, .tsk-button-ghost:focus-visible { outline: 2px solid var(--tk-green); outline-offset: 2px; }

/* Blocos do resultado (o resto do resultado é inline no render) */
.tsk-block { padding: 16px 18px; border-radius: 14px; background: var(--tk-card); border: 1px solid var(--tk-border); margin-bottom: 12px; }

/* Responsivo */
@media (max-width: 560px) {
  .tsk-area-grid, .tsk-test-grid { grid-template-columns: 1fr; }
  .tsk-nav .tsk-button, .tsk-nav .tsk-button-ghost { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tsk-card, .tsk-option, .tsk-button, .tsk-button-secondary, .tsk-button-ghost, .tsk-progress-bar { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   USG-DASH — Mapa de Uso (admin) · #module-usage-analytics
   Módulo NOVO, fora da regra nuclear color:inherit (precedente
   #module-prospeccao/.prosp-*): tema por vars locais --usg-* no
   próprio módulo, dark default + override [data-theme="light"].
   Paleta do app: verde #22c55e · laranja #fb923c · base #050707.
   ═══════════════════════════════════════════════════════════════ */
#module-usage-analytics {
  --usg-card: rgba(255, 255, 255, .055);
  --usg-border: rgba(255, 255, 255, .14);
  --usg-text: #f2f8f4;
  --usg-muted: #b9c6bd;
  --usg-green: #22c55e;
  --usg-orange: #fb923c;
  /* Fundo próprio (padrão #module-admin): body[data-module] só pinta os
     módulos da lista antiga — sem isto o fundo cai no branco default do
     navegador e o modo ESCURO fica todo claro. var(--bg) segue o tema. */
  min-height: calc(100vh - 44px);
  background: var(--bg);
  color: var(--usg-text);
}
[data-theme="light"] #module-usage-analytics {
  --usg-card: #ffffff;
  --usg-border: #dfe7e2;
  --usg-text: #0f172a;
  --usg-muted: #475569;
  --usg-green: #16a34a;
  --usg-orange: #ea580c;
}
.usg-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }
.usg-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.usg-title { font-size: 22px; font-weight: 800; color: var(--usg-text); letter-spacing: .01em; }
.usg-sub { font-size: 13px; color: var(--usg-muted); margin-top: 4px; max-width: 640px; line-height: 1.5; }
.usg-period { display: flex; gap: 6px; }
.usg-period-btn { border: 1px solid var(--usg-border); background: var(--usg-card); color: var(--usg-muted); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.usg-period-btn:hover { color: var(--usg-text); }
.usg-period-btn.on { border-color: var(--usg-green); color: var(--usg-text); background: color-mix(in srgb, var(--usg-green) 10%, transparent); }
.usg-period-btn:focus-visible { outline: 2px solid var(--usg-green); outline-offset: 2px; }

.usg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.usg-kpi { background: var(--usg-card); border: 1px solid var(--usg-border); border-radius: 14px; padding: 14px 16px; }
.usg-kpi-ico { font-size: 18px; margin-bottom: 6px; }
.usg-kpi-val { font-size: 22px; font-weight: 800; color: var(--usg-text); font-variant-numeric: tabular-nums; line-height: 1.15; word-break: break-word; }
.usg-kpi-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--usg-muted); margin-top: 3px; }
.usg-kpi-hint { font-size: 11px; color: var(--usg-muted); margin-top: 4px; }

.usg-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.usg-card { background: var(--usg-card); border: 1px solid var(--usg-border); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; }
.usg-charts .usg-card { margin-bottom: 0; }
.usg-card-title { font-size: 13px; font-weight: 800; color: var(--usg-text); margin-bottom: 12px; letter-spacing: .01em; }
.usg-card canvas { width: 100%; display: block; }

.usg-table-wrap { overflow-x: auto; }
.usg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
.usg-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--usg-muted); padding: 8px 12px; border-bottom: 1px solid var(--usg-border); }
.usg-table td { padding: 9px 12px; border-bottom: 1px solid var(--usg-border); color: var(--usg-text); font-variant-numeric: tabular-nums; }
.usg-table tbody tr:last-child td { border-bottom: none; }
.usg-table tbody tr:hover td { background: color-mix(in srgb, var(--usg-green) 4%, transparent); }
.usg-table-more { font-size: 12px; color: var(--usg-muted); padding: 10px 12px 2px; }

.usg-empty { text-align: center; color: var(--usg-muted); font-size: 14px; padding: 46px 16px; line-height: 1.7; background: var(--usg-card); border: 1px dashed var(--usg-border); border-radius: 14px; }
.usg-empty-sub { font-size: 12px; opacity: .8; }

@media (max-width: 760px) {
  .usg-charts { grid-template-columns: 1fr; }
  .usg-header { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .usg-period-btn { transition: none; }
}

/* ── USG-DASH v2: UX upgrade (toolbar, tendência diária, hbars CSS,
      badges de engajamento, drill-down, busca/sort, skeleton) ── */
#module-usage-analytics { --usg-red: #ef4444; --usg-skel: rgba(255, 255, 255, .06); }
[data-theme="light"] #module-usage-analytics { --usg-red: #dc2626; --usg-skel: #e7ece8; }

.usg-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.usg-refresh { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--usg-border); background: var(--usg-card); color: var(--usg-muted); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.usg-refresh:hover { color: var(--usg-text); border-color: var(--usg-green); }
.usg-refresh:disabled { opacity: .6; cursor: wait; }
.usg-refresh.loading .usg-refresh-ico { display: inline-block; animation: usgSpin 1s linear infinite; }
@keyframes usgSpin { to { transform: rotate(360deg); } }
.usg-updated { font-size: 11px; color: var(--usg-muted); }

.usg-kpi--alert { border-color: color-mix(in srgb, var(--usg-red) 45%, transparent); }
.usg-kpi--alert .usg-kpi-val { color: var(--usg-red); }

.usg-trend-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.usg-cols { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding-top: 6px; }
.usg-col { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; }
.usg-col-area { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.usg-col-bar { display: block; width: 100%; border-radius: 4px 4px 2px 2px; min-height: 3px; background: color-mix(in srgb, var(--usg-green) 55%, transparent); transition: height .5s ease; }
.usg-col--today .usg-col-bar { background: var(--usg-green); }
.usg-col--today .usg-col-lbl { color: var(--usg-text); font-weight: 700; }
.usg-col-lbl { font-size: 9.5px; color: var(--usg-muted); text-align: center; margin-top: 5px; overflow: hidden; white-space: nowrap; }
.usg-split-lbls { font-size: 12px; color: var(--usg-muted); }
.usg-split-bar { height: 6px; border-radius: 999px; overflow: hidden; margin-top: 5px; min-width: 160px; background: color-mix(in srgb, var(--usg-orange) 45%, transparent); }
.usg-split-seg { display: block; height: 100%; background: var(--usg-green); }

.usg-hbar { display: grid; grid-template-columns: 118px 1fr 72px; gap: 8px; align-items: center; padding: 4px 0; font-size: 12px; }
.usg-hbar-lbl { color: var(--usg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usg-hbar-track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--usg-text) 5%, transparent); overflow: hidden; }
.usg-hbar-fill { display: block; height: 100%; border-radius: 999px; width: 0; transition: width .5s ease; background: linear-gradient(90deg, var(--usg-green), color-mix(in srgb, var(--usg-green) 45%, transparent)); }
.usg-hbars--actions .usg-hbar-fill { background: linear-gradient(90deg, var(--usg-orange), color-mix(in srgb, var(--usg-orange) 45%, transparent)); }
.usg-hbar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--usg-text); font-weight: 700; white-space: nowrap; }
.usg-hbar-val em { font-style: normal; color: var(--usg-muted); font-weight: 600; font-size: 10.5px; }
.usg-hbars-none { font-size: 12px; color: var(--usg-muted); padding: 8px 0; }
.usg-losers { font-size: 11.5px; color: var(--usg-muted); border-top: 1px dashed var(--usg-border); margin-top: 10px; padding-top: 9px; }

.usg-tbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.usg-tbar .usg-card-title { margin-bottom: 0; }
.usg-tsearch { margin-left: auto; background: transparent; border: 1px solid var(--usg-border); border-radius: 999px; color: var(--usg-text); font-size: 12px; padding: 6px 12px; width: 200px; }
.usg-tsearch:focus-visible { outline: 2px solid var(--usg-green); outline-offset: 1px; }
.usg-tmeta { font-size: 11px; color: var(--usg-muted); }
.usg-table { min-width: 640px; }
.usg-table th.usg-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.usg-table th.usg-sortable:hover { color: var(--usg-text); }
.usg-sort-ind { font-size: 8px; margin-left: 3px; }
.usg-badge { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.usg-badge--today { background: color-mix(in srgb, var(--usg-green) 18%, transparent); color: var(--usg-green); }
.usg-badge--recent { border: 1px solid color-mix(in srgb, var(--usg-green) 45%, transparent); color: var(--usg-green); }
.usg-badge--cool { background: color-mix(in srgb, var(--usg-orange) 16%, transparent); color: var(--usg-orange); }
.usg-badge--risk { background: color-mix(in srgb, var(--usg-red) 16%, transparent); color: var(--usg-red); }
.usg-row-toggle { background: none; border: none; color: var(--usg-muted); cursor: pointer; font-size: 11px; padding: 2px 4px; transition: transform .15s ease; }
tr.usg-open .usg-row-toggle { transform: rotate(90deg); color: var(--usg-green); }
.usg-table tbody tr.usg-clickable { cursor: pointer; }
tr.usg-detail > td { background: color-mix(in srgb, var(--usg-green) 3%, transparent); padding: 14px 16px; }
.usg-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.usg-detail-grid .usg-hbar { grid-template-columns: 92px 1fr 44px; font-size: 11.5px; }
.usg-detail-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--usg-muted); font-weight: 700; margin-bottom: 6px; }
.usg-detail-foot { font-size: 11.5px; color: var(--usg-muted); margin-top: 12px; }
.usg-table-none { font-size: 12.5px; color: var(--usg-muted); padding: 14px 4px; }
.usg-table-more { padding: 12px 4px 2px; text-align: center; }

.usg-skel { border-radius: 14px; background: linear-gradient(100deg, var(--usg-skel) 40%, color-mix(in srgb, var(--usg-skel) 40%, transparent) 50%, var(--usg-skel) 60%); background-size: 200% 100%; animation: usgShimmer 1.2s linear infinite; }
.usg-skel-bar { height: 18px; margin: 8px 0; }
.usg-skel-row { height: 34px; margin: 6px 0; border-radius: 8px; }
@keyframes usgShimmer { to { background-position: -200% 0; } }

.usg-empty-ico { font-size: 34px; margin-bottom: 6px; }
.usg-empty b { color: var(--usg-text); font-size: 15px; }
.usg-empty-list { text-align: left; max-width: 440px; margin: 14px auto 0; font-size: 12.5px; list-style: none; padding: 0; line-height: 1.9; }
.usg-empty-btn { margin-top: 16px; cursor: pointer; }

@media (max-width: 768px) {
  .usg-detail-grid { grid-template-columns: 1fr; }
  .usg-tsearch { margin-left: 0; width: 100%; order: 3; }
}
@media (max-width: 480px) {
  .usg-kpis { grid-template-columns: repeat(2, 1fr); }
  .usg-cols { gap: 2px; }
  .usg-hbar { grid-template-columns: 96px 1fr 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .usg-skel, .usg-refresh.loading .usg-refresh-ico { animation: none; }
  .usg-col-bar, .usg-hbar-fill, .usg-row-toggle { transition: none; }
}

/* ── USG-DASH: reforço de contraste claro/escuro (letras "apagadas") ── */
/* Herança segura de cor em todo o módulo (defensivo contra regras globais) */
#module-usage-analytics .usg-wrap { color: var(--usg-text); }

/* Tema claro: cards brancos sobre #f8fafc precisam de sombra p/ não sumir */
[data-theme="light"] #module-usage-analytics .usg-card,
[data-theme="light"] #module-usage-analytics .usg-kpi {
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

/* Labels pequenos mais legíveis nos dois temas */
#module-usage-analytics .usg-kpi-lbl { font-size: 11px; color: var(--usg-muted); }
#module-usage-analytics .usg-kpi-hint { color: var(--usg-muted); opacity: .95; }
#module-usage-analytics .usg-col-lbl { font-size: 10px; color: var(--usg-muted); }
#module-usage-analytics .usg-table th { color: var(--usg-muted); font-weight: 800; }
#module-usage-analytics .usg-sub,
#module-usage-analytics .usg-updated,
#module-usage-analytics .usg-tmeta,
#module-usage-analytics .usg-meta { color: var(--usg-muted); }

/* Trilha das barras mais visível (antes 5% quase sumia) */
#module-usage-analytics .usg-hbar-track { background: color-mix(in srgb, var(--usg-text) 10%, transparent); }
[data-theme="light"] #module-usage-analytics .usg-hbar-track { background: #eef2f0; }

/* Colunas diárias no claro: verde mais denso p/ contraste sobre branco */
[data-theme="light"] #module-usage-analytics .usg-col-bar { background: color-mix(in srgb, var(--usg-green) 70%, transparent); }
[data-theme="light"] #module-usage-analytics .usg-col--today .usg-col-bar { background: var(--usg-green); }

/* Chips/botões da toolbar mais firmes no claro */
[data-theme="light"] #module-usage-analytics .usg-period-btn,
[data-theme="light"] #module-usage-analytics .usg-refresh { background: #ffffff; border-color: #d3ddd6; color: #334155; }
[data-theme="light"] #module-usage-analytics .usg-period-btn.on { background: color-mix(in srgb, var(--usg-green) 12%, #ffffff); color: #0f172a; }

/* ═══════════════════════════════════════════════════════════════
   AIU — Consumo de IA (Fase B2) · segunda visão do #module-usage-analytics
   Reusa o sistema visual .usg-* (mesmas vars de tema); adiciona um acento
   violeta (--aiu-accent) só p/ IA + teal p/ tokens. Fica FORA da regra
   nuclear do tema claro (como todo o #module-usage-analytics).
   ═══════════════════════════════════════════════════════════════ */
#module-usage-analytics { --aiu-accent: #a78bfa; --aiu-accent-strong: #8b5cf6; --aiu-teal: #2dd4bf; }
[data-theme="light"] #module-usage-analytics { --aiu-accent: #7c3aed; --aiu-accent-strong: #6d28d9; --aiu-teal: #0d9488; }

/* Barra de troca de visão (Mapa de Uso / Consumo de IA) */
.usg-viewbar { max-width: 1180px; margin: 0 auto; padding: 22px 20px 0; }
.usg-viewswitch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--usg-border); background: var(--usg-card); border-radius: 999px; }
.usg-view-btn { border: none; background: transparent; color: var(--usg-muted); font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: color .15s ease, background .15s ease; }
.usg-view-btn:hover { color: var(--usg-text); }
.usg-view-btn.on { color: var(--usg-text); background: color-mix(in srgb, var(--aiu-accent) 20%, transparent); }
.usg-view-btn:focus-visible { outline: 2px solid var(--aiu-accent); outline-offset: 2px; }
#usg-viewswitch .usg-view-btn.on[data-view="engagement"] { background: color-mix(in srgb, var(--usg-green) 16%, transparent); }
.aiu-metricswitch { padding: 3px; }
.aiu-metricswitch .usg-view-btn { padding: 4px 12px; font-size: 11.5px; }

/* Barras por métrica: custo=violeta, tokens=teal, chamadas/agente=verde (default) */
.aiu-bars--cost .usg-hbar-fill { background: linear-gradient(90deg, var(--aiu-accent-strong), color-mix(in srgb, var(--aiu-accent) 40%, transparent)); }
.aiu-bars--tokens .usg-hbar-fill { background: linear-gradient(90deg, var(--aiu-teal), color-mix(in srgb, var(--aiu-teal) 40%, transparent)); }
.aiu-sub { font-style: normal; color: var(--usg-muted); font-weight: 600; font-size: 10.5px; }

/* Colunas de tendência por métrica */
.aiu-col--cost .usg-col-bar { background: color-mix(in srgb, var(--aiu-accent) 62%, transparent); }
.aiu-col--cost.usg-col--today .usg-col-bar { background: var(--aiu-accent-strong); }
.aiu-col--tokens .usg-col-bar { background: color-mix(in srgb, var(--aiu-teal) 60%, transparent); }
.aiu-col--tokens.usg-col--today .usg-col-bar { background: var(--aiu-teal); }

/* KPI de custo com acento violeta */
.aiu-kpi--cost { border-color: color-mix(in srgb, var(--aiu-accent) 45%, transparent); }
.aiu-kpi--cost .usg-kpi-val { color: var(--aiu-accent-strong); }
[data-theme="light"] .aiu-kpi--cost .usg-kpi-val { color: var(--aiu-accent); }

/* Selo "estimado" */
.aiu-est { display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 1px 7px; vertical-align: middle; color: var(--usg-orange); background: color-mix(in srgb, var(--usg-orange) 16%, transparent); border: 1px solid color-mix(in srgb, var(--usg-orange) 40%, transparent); }
.aiu-est--sm { font-size: 8.5px; padding: 0 5px; }

/* Painel de saúde operacional (erros) */
.aiu-errgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.aiu-err { background: color-mix(in srgb, var(--usg-text) 3%, transparent); border: 1px solid var(--usg-border); border-radius: 12px; padding: 12px 10px; text-align: center; }
.aiu-err-ico { font-size: 16px; }
.aiu-err-val { font-size: 20px; font-weight: 800; color: var(--usg-text); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px; }
.aiu-err-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--usg-muted); margin-top: 3px; }
.aiu-err--bad { border-color: color-mix(in srgb, var(--usg-red) 45%, transparent); background: color-mix(in srgb, var(--usg-red) 8%, transparent); }
.aiu-err--bad .aiu-err-val { color: var(--usg-red); }

/* Tabela por corretor */
.aiu-table { min-width: 760px; }
.aiu-td-model { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiu-td-err { color: var(--usg-red); font-weight: 700; }
.aiu-csv-btn { cursor: pointer; }

@media (max-width: 760px) {
  .aiu-charts { grid-template-columns: 1fr; }
  .usg-viewbar { padding: 18px 16px 0; }
}
@media (max-width: 480px) {
  .aiu-errgrid { grid-template-columns: repeat(2, 1fr); }
  .aiu-metricswitch { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .usg-view-btn { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   AIR — Roteamento de IA (Fase C3) · 3a visão do #module-usage-analytics
   Reusa vars de tema --usg-* / acento --aiu-accent (violeta). Editor de
   configuração admin (não é dashboard). Dark+light+mobile; sem overlap.
   ═══════════════════════════════════════════════════════════════ */
.air-callout { display: grid; gap: 6px; background: color-mix(in srgb, var(--aiu-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--aiu-accent) 32%, transparent); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; }
.air-callout-row { font-size: 12.5px; color: var(--usg-text); line-height: 1.5; }

.air-body { display: grid; gap: 12px; }
.air-card { background: var(--usg-card); border: 1px solid var(--usg-border); border-radius: 14px; padding: 16px 18px; }
[data-theme="light"] #module-usage-analytics .air-card { box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.air-card-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.air-card-top .usg-card-title { margin-bottom: 0; }
.air-enabled-lbl { font-size: 12px; font-weight: 700; color: var(--usg-muted); }
.air-sub-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--usg-muted); margin: 14px 0 8px; }
.air-hint { font-size: 12px; color: var(--usg-muted); line-height: 1.5; margin-bottom: 10px; }

.air-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.air-grid--models { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.air-f { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.air-f > span { font-size: 11px; font-weight: 700; color: var(--usg-muted); }
.air-f--wide { grid-column: 1 / -1; }
.air-f input, .air-f select { background: transparent; border: 1px solid var(--usg-border); border-radius: 9px; color: var(--usg-text); font-size: 12.5px; padding: 8px 10px; width: 100%; }
.air-f input:focus-visible, .air-f select:focus-visible { outline: 2px solid var(--aiu-accent); outline-offset: 1px; }
.air-f select option { color: #111; }

.air-chk-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.air-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--usg-text); cursor: pointer; }
.air-chk--locked { color: var(--usg-muted); cursor: not-allowed; }

/* Switch (toggle) */
.air-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.air-switch input { opacity: 0; width: 0; height: 0; }
.air-switch span { position: absolute; inset: 0; background: color-mix(in srgb, var(--usg-text) 20%, transparent); border-radius: 999px; transition: background .15s ease; }
.air-switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; }
.air-switch input:checked + span { background: var(--aiu-accent); }
.air-switch input:checked + span::before { transform: translateX(18px); }
.air-switch input:focus-visible + span { outline: 2px solid var(--aiu-accent); outline-offset: 2px; }
.air-switch--lg { width: 46px; height: 25px; }
.air-switch--lg span::before { width: 19px; height: 19px; }
.air-switch--lg input:checked + span::before { transform: translateX(21px); }

/* Editor da cadeia de fallback */
.air-fb-list { display: grid; gap: 6px; margin-bottom: 10px; }
.air-fb-item { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--usg-text) 4%, transparent); border: 1px solid var(--usg-border); border-radius: 10px; padding: 7px 10px; }
.air-fb-pos { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--aiu-accent) 22%, transparent); color: var(--aiu-accent-strong); font-size: 11px; font-weight: 800; }
[data-theme="light"] #module-usage-analytics .air-fb-pos { color: var(--aiu-accent); }
.air-fb-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--usg-text); }
.air-fb-ctl { display: inline-flex; gap: 4px; }
.air-fb-btn { border: 1px solid var(--usg-border); background: var(--usg-card); color: var(--usg-muted); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 12px; line-height: 1; }
.air-fb-btn:hover:not(:disabled) { color: var(--usg-text); border-color: var(--aiu-accent); }
.air-fb-btn:disabled { opacity: .4; cursor: not-allowed; }
.air-fb-btn--rm:hover:not(:disabled) { color: var(--usg-red); border-color: var(--usg-red); }
.air-fb-none { font-size: 12px; color: var(--usg-muted); padding: 6px 0; }
.air-fb-add { display: flex; gap: 8px; align-items: center; }
.air-fb-add select { flex: 1; max-width: 260px; background: transparent; border: 1px solid var(--usg-border); border-radius: 9px; color: var(--usg-text); font-size: 12.5px; padding: 8px 10px; }

/* Regras por agente */
.air-agents { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.air-agent { border: 1px solid var(--usg-border); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--usg-text) 2.5%, transparent); }
.air-agent-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.air-agent-name { font-size: 13px; font-weight: 800; color: var(--usg-text); line-height: 1.2; }
.air-agent-name em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--usg-muted); }
.air-agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.air-agent-grid .air-f--wide { grid-column: 1 / -1; }

/* Barra de ação (salvar/descartar) */
.air-actionbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; background: color-mix(in srgb, var(--usg-card) 92%, var(--usg-border)); border: 1px solid var(--usg-border); border-radius: 14px; backdrop-filter: blur(6px); }
.air-dirty { margin-right: auto; font-size: 12px; font-weight: 700; color: var(--usg-orange); }
.air-actionbar-btns { display: flex; gap: 10px; }
.air-btn { border: 1px solid var(--usg-border); background: var(--usg-card); color: var(--usg-text); font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.air-btn--ghost { color: var(--usg-muted); }
.air-btn--ghost:hover { color: var(--usg-text); border-color: var(--usg-muted); }
.air-btn--primary { background: var(--aiu-accent); border-color: var(--aiu-accent); color: #fff; }
.air-btn--primary:hover { background: var(--aiu-accent-strong); border-color: var(--aiu-accent-strong); }
.air-btn--primary:disabled { opacity: .6; cursor: wait; }
.air-btn--attn { box-shadow: 0 0 0 3px color-mix(in srgb, var(--aiu-accent) 30%, transparent); }
.air-btn:focus-visible { outline: 2px solid var(--aiu-accent); outline-offset: 2px; }

.air-errbox { text-align: left; color: var(--usg-red); font-size: 12.5px; }
.air-errbox ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; }

@media (max-width: 760px) {
  .air-agents { grid-template-columns: 1fr; }
  .air-actionbar { flex-direction: column; align-items: stretch; }
  .air-actionbar-btns { justify-content: stretch; }
  .air-btn { flex: 1; }
  .air-dirty { margin-right: 0; text-align: center; }
}
@media (max-width: 480px) {
  .air-agent-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .air-switch span, .air-switch span::before, .air-btn { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   IMÓVEIS · EMPREENDIMENTOS (IMV) — Fase 3
   Overlay body-level (#imv-overlay, fora dos #module-* → sem regra
   nuclear do tema claro). Tematizado por vars locais --imv-* no
   .imv-modal: dark default + override [data-theme="light"].
   Paleta do app: verde #22c55e · laranja #fb923c · base #050707.
   ═══════════════════════════════════════════════════════════════ */
.imv-overlay { position: fixed; inset: 0; background: rgba(6, 9, 16, .62); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 9700; padding: 18px; }

.imv-modal {
  /* tokens (dark default) */
  --imv-bg: rgba(13, 16, 28, .97);
  --imv-card: rgba(255, 255, 255, .035);
  --imv-border: rgba(255, 255, 255, .09);
  --imv-text: #e6efe9;
  --imv-muted: #93a29a;
  --imv-green: #22c55e;
  --imv-orange: #fb923c;
  --imv-danger: #f87171;
  --imv-input-bg: rgba(255, 255, 255, .05);
  width: min(880px, 100%); max-height: min(86vh, 780px); overflow-y: auto;
  background: var(--imv-bg); color: var(--imv-text);
  border: 1px solid var(--imv-border); border-radius: 18px;
  padding: 20px 22px 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(34, 197, 94, .06);
}
[data-theme="light"] .imv-modal {
  --imv-bg: #ffffff;
  --imv-card: #f4f7f5;
  --imv-border: #dbe4de;
  --imv-text: #17251c;
  --imv-muted: #5b6b61;
  --imv-green: #16a34a;
  --imv-orange: #ea7317;
  --imv-danger: #dc2626;
  --imv-input-bg: #f8faf9;
  box-shadow: 0 24px 70px rgba(15, 30, 20, .18);
}
.imv-modal-sm { width: min(620px, 100%); }

.imv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.imv-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--imv-text); letter-spacing: .01em; }
.imv-head-sub { font-size: 12px; font-weight: 600; color: var(--imv-muted); margin-left: 8px; }
.imv-x { border: 1px solid var(--imv-border); background: var(--imv-card); color: var(--imv-muted); width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 13px; line-height: 1; transition: color .15s ease, border-color .15s ease; }
.imv-x:hover { color: var(--imv-text); border-color: var(--imv-green); }

.imv-banner { background: color-mix(in srgb, var(--imv-orange) 12%, transparent); border: 1px solid color-mix(in srgb, var(--imv-orange) 40%, transparent); color: var(--imv-text); font-size: 12px; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.imv-leadbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--imv-muted); background: var(--imv-card); border: 1px solid var(--imv-border); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.imv-leadbar b { color: var(--imv-text); }
#imv-lead-hint { font-size: 12px; }

.imv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.imv-toolbar-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.imv-select { flex: 1; min-width: 200px; max-width: 420px; background: var(--imv-input-bg); color: var(--imv-text); border: 1px solid var(--imv-border); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; }
.imv-meta { font-size: 12px; color: var(--imv-muted); margin: 2px 2px 10px; }

.imv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.imv-chip { border: 1px solid var(--imv-border); background: var(--imv-card); color: var(--imv-muted); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.imv-chip b { color: var(--imv-text); margin-left: 3px; }
.imv-chip:hover { color: var(--imv-text); }
.imv-chip.on { border-color: var(--imv-green); color: var(--imv-text); background: color-mix(in srgb, var(--imv-green) 10%, transparent); }

.imv-table-wrap { overflow-x: auto; border: 1px solid var(--imv-border); border-radius: 12px; }
.imv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
.imv-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--imv-muted); padding: 9px 12px; border-bottom: 1px solid var(--imv-border); background: var(--imv-card); }
.imv-table td { padding: 9px 12px; border-bottom: 1px solid var(--imv-border); color: var(--imv-text); }
.imv-table tbody tr:last-child td { border-bottom: none; }
.imv-table tbody tr:hover td { background: color-mix(in srgb, var(--imv-green) 4%, transparent); }
.imv-money { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--imv-green); white-space: nowrap; }
.imv-row-acts { white-space: nowrap; text-align: right; }
.imv-ico { border: none; background: transparent; cursor: pointer; font-size: 13px; padding: 2px 4px; opacity: .65; transition: opacity .15s ease; }
.imv-ico:hover { opacity: 1; }

.imv-pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; border-radius: 999px; padding: 3px 10px; border: 1px solid transparent; }
.imv-pill-ok { color: var(--imv-green); background: color-mix(in srgb, var(--imv-green) 12%, transparent); border-color: color-mix(in srgb, var(--imv-green) 35%, transparent); }
.imv-pill-warn { color: var(--imv-orange); background: color-mix(in srgb, var(--imv-orange) 12%, transparent); border-color: color-mix(in srgb, var(--imv-orange) 35%, transparent); }
.imv-pill-off { color: var(--imv-muted); background: var(--imv-card); border-color: var(--imv-border); }

.imv-empty { text-align: center; color: var(--imv-muted); font-size: 13px; padding: 26px 12px; line-height: 1.6; }
.imv-actions-center { display: flex; justify-content: center; margin-top: 14px; }

.imv-btn { border: 1px solid var(--imv-border); background: var(--imv-card); color: var(--imv-text); font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 8px 14px; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.imv-btn:hover { transform: translateY(-1px); border-color: var(--imv-green); }
.imv-btn-sm { font-size: 11.5px; padding: 5px 10px; }
.imv-btn-primary { background: linear-gradient(135deg, var(--imv-green), color-mix(in srgb, var(--imv-green) 70%, #0c7a3a)); border-color: transparent; color: #06210f; }
[data-theme="light"] .imv-btn-primary { color: #ffffff; }
.imv-btn-primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--imv-green) 35%, transparent); }
.imv-btn-danger { color: var(--imv-danger); }
.imv-btn-danger:hover { border-color: var(--imv-danger); }
.imv-btn:focus-visible, .imv-x:focus-visible, .imv-chip:focus-visible { outline: 2px solid var(--imv-green); outline-offset: 2px; }

/* Formulários */
.imv-form { display: flex; flex-direction: column; gap: 10px; }
.imv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.imv-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.imv-fld { display: flex; flex-direction: column; gap: 4px; }
.imv-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--imv-muted); }
.imv-inp { background: var(--imv-input-bg); color: var(--imv-text); border: 1px solid var(--imv-border); border-radius: 10px; padding: 9px 12px; font-size: 13px; width: 100%; }
.imv-inp:focus { outline: none; border-color: var(--imv-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--imv-green) 15%, transparent); }
.imv-form-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Botão discreto no modal de edição do lead (dentro de #module-crm →
   tema claro cobre via override par abaixo, padrão da regra nuclear) */
.imv-manage-link { float: right; border: 1px solid rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .08); color: #22c55e; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 4px 10px; cursor: pointer; transition: background .15s ease; }
.imv-manage-link:hover { background: rgba(34, 197, 94, .16); }
[data-theme="light"] #module-crm .imv-manage-link { color: #16a34a !important; border-color: rgba(22, 163, 74, .4); background: rgba(22, 163, 74, .07); }

/* Responsivo */
@media (max-width: 560px) {
  .imv-overlay { padding: 10px; }
  .imv-modal { padding: 16px 14px 18px; max-height: 92vh; }
  .imv-grid2, .imv-grid3 { grid-template-columns: 1fr; }
  .imv-toolbar { flex-direction: column; align-items: stretch; }
  .imv-select { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .imv-btn, .imv-chip, .imv-x, .imv-ico { transition: none; }
}

/* IMV — Fase 4 (importação de planilha) */
.imv-actions-center { gap: 8px; flex-wrap: wrap; align-items: center; }
.imv-btn-ghosty { border-style: dashed; font-weight: 600; opacity: .85; }
.imv-btn-ghosty:hover { opacity: 1; }
/* IMV — seletor de unidade (picker do card) */
.imv-dim { color: var(--imv-muted); font-weight: 500; font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════
   COMMERCIAL ONBOARDING V1 (COB) — "🚀 Primeiros Passos"
   Card de ativação no topo do painel (#tab-dashboard, dentro de
   #module-crm). Acento verde (vendas). Dark default + overrides de
   cor no tema claro (a regra nuclear [data-theme=light] #module-crm *
   força color:inherit, então texto precisa de !important). CLS ~0:
   sem reflow em hover; transições só de cor/opacidade/transform.
   ═══════════════════════════════════════════════════════════════ */
#module-crm .cob-card {
  --cob-acc: var(--green, #10d98a);
  --cob-acc-2: color-mix(in srgb, var(--green, #10d98a) 55%, #3b82f6);
  background:
    radial-gradient(120% 140% at 100% 0, color-mix(in srgb, var(--cob-acc) 12%, transparent), transparent 60%),
    var(--card, #141923);
  border: 1px solid color-mix(in srgb, var(--cob-acc) 26%, var(--border, rgba(255,255,255,.09)));
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}
[data-theme="light"] #module-crm .cob-card { box-shadow: 0 6px 20px rgba(15, 23, 42, .07); }

.cob-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cob-title { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: .01em; line-height: 1.25; }
.cob-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; max-width: 560px; }
.cob-head-ctl { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.cob-count { font-size: 12px; font-weight: 800; color: var(--cob-acc); font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--cob-acc) 14%, transparent); }
.cob-collapse { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border, rgba(255,255,255,.09)); background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.cob-collapse:hover { color: var(--text); border-color: var(--cob-acc); }
.cob-collapse-ico { display: inline-block; transition: transform .2s ease; }
.cob-card--collapsed .cob-collapse-ico { transform: rotate(-90deg); }

.cob-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cob-progress-bar { flex: 1; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; min-width: 120px; }
.cob-progress-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cob-acc), var(--cob-acc-2)); transition: width .55s cubic-bezier(.4, 0, .2, 1); }
.cob-progress-lbl { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }

.cob-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.cob-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border, rgba(255,255,255,.09)); border-radius: 12px; background: color-mix(in srgb, var(--text) 2.5%, transparent); transition: border-color .15s ease, background .15s ease, opacity .2s ease; }
.cob-step:hover { border-color: color-mix(in srgb, var(--cob-acc) 40%, transparent); background: color-mix(in srgb, var(--cob-acc) 5%, transparent); }
.cob-step--done { background: color-mix(in srgb, var(--cob-acc) 8%, transparent); border-color: color-mix(in srgb, var(--cob-acc) 32%, transparent); }
.cob-step--later { opacity: .6; }

.cob-check { flex: none; width: 26px; height: 26px; padding: 0; border: none; background: none; cursor: pointer; display: grid; place-items: center; }
.cob-check-ring { width: 24px; height: 24px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 26%, transparent); color: transparent; display: grid; place-items: center; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.cob-check:hover .cob-check-ring { border-color: var(--cob-acc); }
.cob-step--done .cob-check-ring { background: var(--cob-acc); border-color: var(--cob-acc); color: #04120c; transform: scale(1); animation: cobPop .3s ease; }
@keyframes cobPop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.cob-step-body { min-width: 0; }
.cob-step-title { font-size: 13.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.cob-step-ico { font-size: 15px; }
.cob-step--done .cob-step-title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cob-acc) 60%, transparent); text-decoration-thickness: 2px; }
.cob-step-value { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.cob-step-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.cob-cta { border: none; background: linear-gradient(135deg, var(--cob-acc), var(--cob-acc-2)); color: #04120c; font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 8px 15px; cursor: pointer; white-space: nowrap; transition: transform .12s ease, box-shadow .15s ease, filter .15s ease; }
.cob-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--cob-acc) 40%, transparent); filter: brightness(1.03); }
.cob-cta:active { transform: translateY(0); }
.cob-later { border: 1px solid var(--border, rgba(255,255,255,.09)); background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 7px 12px; cursor: pointer; white-space: nowrap; transition: color .15s ease, border-color .15s ease; }
.cob-later:hover { color: var(--text); border-color: var(--muted); }
.cob-done-pill { font-size: 11.5px; font-weight: 800; color: var(--cob-acc); white-space: nowrap; }

.cob-foot { margin-top: 12px; text-align: right; }
.cob-reset { background: none; border: none; color: var(--muted); font-size: 11.5px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 4px; }
.cob-reset:hover { color: var(--text); }

.cob-celebrate { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--cob-acc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cob-acc) 34%, transparent); }
.cob-celebrate-ico { font-size: 28px; flex: none; }
.cob-celebrate-txt { flex: 1; min-width: 0; }
.cob-celebrate-txt b { color: var(--text); font-size: 14px; }
.cob-celebrate-sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

/* Tema claro: a regra nuclear #module-crm * força color:inherit — restaura as cores. */
[data-theme="light"] #module-crm .cob-title,
[data-theme="light"] #module-crm .cob-step-title,
[data-theme="light"] #module-crm .cob-celebrate-txt b { color: var(--text) !important; }
[data-theme="light"] #module-crm .cob-sub,
[data-theme="light"] #module-crm .cob-step-value,
[data-theme="light"] #module-crm .cob-progress-lbl,
[data-theme="light"] #module-crm .cob-later,
[data-theme="light"] #module-crm .cob-reset,
[data-theme="light"] #module-crm .cob-collapse,
[data-theme="light"] #module-crm .cob-celebrate-sub { color: var(--muted) !important; }
[data-theme="light"] #module-crm .cob-count,
[data-theme="light"] #module-crm .cob-done-pill { color: var(--green, #16a34a) !important; }
[data-theme="light"] #module-crm .cob-cta { color: #04120c !important; }
[data-theme="light"] #module-crm .cob-check-ring { color: transparent !important; }
[data-theme="light"] #module-crm .cob-step--done .cob-check-ring { color: #04120c !important; }

@media (max-width: 620px) {
  #module-crm .cob-card { padding: 15px 15px; }
  .cob-step { grid-template-columns: auto 1fr; }
  .cob-step-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 38px; }
  .cob-cta { flex: 1; text-align: center; }
  .cob-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .cob-progress-fill, .cob-check-ring, .cob-cta, .cob-collapse-ico, .cob-collapse, .cob-step, .cob-later { transition: none; }
  .cob-step--done .cob-check-ring { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   CENTRAL DE AJUDA V4 — "Pergunte ao ImobPilot" (.hlp-ask)
   Camada local + IA opcional. Overrides light no fim (regra nuclear
   do #module-ajuda anula cor por classe — ver bloco V1).
   ══════════════════════════════════════════════════════════════════ */
#module-ajuda .hlp-ask { margin: 18px 0 6px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,212,59,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,212,59,.22); }
#module-ajuda .hlp-ask-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#module-ajuda .hlp-ask-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(255,212,59,.12); border: 1px solid rgba(255,212,59,.3); }
#module-ajuda .hlp-ask-copy strong { display: block; font-size: 1.02rem; font-weight: 800; color: #ffe9a8; }
#module-ajuda .hlp-ask-copy small { font-size: .8rem; color: rgba(226,232,240,.6); }
#module-ajuda .hlp-ask-row { display: flex; gap: 10px; }
#module-ajuda .hlp-ask-input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 12px; background: rgba(2,6,16,.5); border: 1px solid rgba(148,163,184,.25); color: #e2e8f0; font-size: .95rem; outline: none; }
#module-ajuda .hlp-ask-input:focus { border-color: rgba(255,212,59,.55); box-shadow: 0 0 0 3px rgba(255,212,59,.12); }
#module-ajuda .hlp-ask-btn { padding: 12px 22px; border: none; border-radius: 12px; font-weight: 800; font-size: .92rem; cursor: pointer; color: #201500; background: linear-gradient(135deg, #ffe066, #f5b301); box-shadow: 0 6px 18px rgba(245,179,1,.25); }
#module-ajuda .hlp-ask-btn:hover { filter: brightness(1.06); }
#module-ajuda .hlp-ask-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
#module-ajuda .hlp-ask-chips-lbl { font-size: .74rem; letter-spacing: .4px; color: rgba(226,232,240,.5); }
#module-ajuda .hlp-ask-answer { margin-top: 14px; }
#module-ajuda .hlp-ask-card { border-radius: 14px; padding: 16px 18px; background: rgba(2,6,16,.45); border: 1px solid rgba(148,163,184,.18); }
#module-ajuda .hlp-ask-kind { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #f5b301; background: rgba(255,212,59,.1); border: 1px solid rgba(255,212,59,.28); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
#module-ajuda .hlp-ask-title { font-size: 1.05rem; font-weight: 800; color: #f1f5f9; margin-bottom: 6px; }
#module-ajuda .hlp-ask-body { font-size: .9rem; line-height: 1.55; color: rgba(226,232,240,.75); margin: 0 0 6px; }
#module-ajuda .hlp-ask-steps { margin: 4px 0 6px 18px; padding: 0; font-size: .9rem; line-height: 1.6; color: rgba(226,232,240,.78); }
#module-ajuda .hlp-ask-steps li { margin-bottom: 3px; }
#module-ajuda .hlp-ask-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#module-ajuda .hlp-ask-act { padding: 8px 14px; border-radius: 10px; font-size: .82rem; font-weight: 700; cursor: pointer; color: #ffe9a8; background: rgba(255,212,59,.08); border: 1px solid rgba(255,212,59,.3); }
#module-ajuda .hlp-ask-act:hover { background: rgba(255,212,59,.16); }
#module-ajuda .hlp-ask-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(148,163,184,.18); }
#module-ajuda .hlp-ask-nores strong { display: block; color: #f1f5f9; font-size: .95rem; margin-bottom: 4px; }
#module-ajuda .hlp-ask-nores span { font-size: .85rem; color: rgba(226,232,240,.6); }
#module-ajuda .hlp-ask-empty { font-size: .88rem; color: rgba(226,232,240,.65); padding: 10px 4px; }
#module-ajuda .hlp-ask-ai-row { margin-top: 12px; }
#module-ajuda .hlp-ask-ai-btn { padding: 10px 16px; border-radius: 10px; font-size: .85rem; font-weight: 800; cursor: pointer; color: #dbeafe; background: rgba(124,58,237,.14); border: 1px solid rgba(124,58,237,.45); }
#module-ajuda .hlp-ask-ai-btn:hover { background: rgba(124,58,237,.24); }
#module-ajuda .hlp-ask-ai-btn:disabled { opacity: .6; cursor: wait; }
#module-ajuda .hlp-ask-ai-out { margin-top: 12px; border-radius: 12px; padding: 14px 16px; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.3); }
#module-ajuda .hlp-ask-ai-txt { font-size: .9rem; line-height: 1.6; color: #e9e2ff; white-space: pre-wrap; }
#module-ajuda .hlp-ask-ai-disc { margin-top: 8px; font-size: .72rem; color: rgba(226,232,240,.45); }
@media (max-width: 640px) {
  #module-ajuda .hlp-ask-row { flex-direction: column; }
  #module-ajuda .hlp-ask-btn { width: 100%; }
}
/* light overrides (regra nuclear color:inherit exige !important por token) */
body[data-theme="light"] #module-ajuda .hlp-ask { background: rgba(180,130,10,.06); border-color: rgba(180,130,10,.25); }
body[data-theme="light"] #module-ajuda .hlp-ask-ico { background: rgba(180,130,10,.1); border-color: rgba(180,130,10,.3); }
body[data-theme="light"] #module-ajuda .hlp-ask-copy strong { color: #92400e !important; }
body[data-theme="light"] #module-ajuda .hlp-ask-copy small { color: #64748b !important; }
body[data-theme="light"] #module-ajuda .hlp-ask-input { background: #fff; border-color: rgba(15,23,42,.18); color: #0f172a !important; }
body[data-theme="light"] #module-ajuda .hlp-ask-chips-lbl { color: #94a3b8 !important; }
body[data-theme="light"] #module-ajuda .hlp-ask-card { background: #fff; border-color: rgba(15,23,42,.12); }
body[data-theme="light"] #module-ajuda .hlp-ask-kind { color: #92400e !important; background: rgba(180,130,10,.08); border-color: rgba(180,130,10,.3); }
body[data-theme="light"] #module-ajuda .hlp-ask-title { color: #0f172a !important; }
body[data-theme="light"] #module-ajuda .hlp-ask-body, body[data-theme="light"] #module-ajuda .hlp-ask-steps { color: #334155 !important; }
body[data-theme="light"] #module-ajuda .hlp-ask-act { color: #92400e !important; background: rgba(180,130,10,.07); border-color: rgba(180,130,10,.32); }
body[data-theme="light"] #module-ajuda .hlp-ask-nores strong { color: #0f172a !important; }
body[data-theme="light"] #module-ajuda .hlp-ask-nores span, body[data-theme="light"] #module-ajuda .hlp-ask-empty { color: #64748b !important; }
body[data-theme="light"] #module-ajuda .hlp-ask-ai-btn { color: #5b21b6 !important; background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.35); }
body[data-theme="light"] #module-ajuda .hlp-ask-ai-out { background: rgba(124,58,237,.05); border-color: rgba(124,58,237,.22); }
body[data-theme="light"] #module-ajuda .hlp-ask-ai-txt { color: #312e81 !important; }
body[data-theme="light"] #module-ajuda .hlp-ask-ai-disc { color: #94a3b8 !important; }
   ONBOARDING V2-C — MODO TREINAMENTO
   .tour-train-next (prompt pós-tour) e .tour-offer (chip 1x/tela) são
   body-level (fora da regra nuclear). .hlp-train-tour vive no #module-ajuda
   → overrides light obrigatórios no fim.
   ══════════════════════════════════════════════════════════════════ */
.tour-train-next { position: fixed; inset: 0; z-index: 4600; display: flex; align-items: center; justify-content: center; background: rgba(2,6,16,.55); backdrop-filter: blur(3px); }
.tour-train-card { width: min(440px, calc(100vw - 48px)); border-radius: 18px; padding: 24px 26px; background: #0d1526; border: 1px solid rgba(255,212,59,.35); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(255,212,59,.12); font-family: inherit; }
.tour-train-kicker { font-size: .68rem; font-weight: 800; letter-spacing: 1.6px; color: #f5b301; margin-bottom: 10px; }
.tour-train-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 14px; }
.tour-train-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffe066, #f5b301); box-shadow: 0 0 12px rgba(245,179,1,.5); transition: width .4s ease; }
.tour-train-title { font-size: 1.06rem; color: #e2e8f0; }
.tour-train-title strong { color: #ffe9a8; font-weight: 800; }
.tour-train-sub { font-size: .84rem; color: rgba(226,232,240,.6); margin: 6px 0 16px; }
.tour-train-actions { display: flex; gap: 10px; }
.tour-train-go { flex: 1; padding: 12px 0; border: none; border-radius: 12px; font-weight: 800; font-size: .95rem; cursor: pointer; color: #201500; background: linear-gradient(135deg, #ffe066, #f5b301); box-shadow: 0 6px 20px rgba(245,179,1,.3); }
.tour-train-go:hover { filter: brightness(1.06); }
.tour-train-stop { padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: .88rem; cursor: pointer; color: rgba(226,232,240,.7); background: transparent; border: 1px solid rgba(148,163,184,.3); }
.tour-train-stop:hover { color: #e2e8f0; border-color: rgba(148,163,184,.5); }

.tour-offer { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3450; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 999px; background: rgba(10,16,32,.97); border: 1px solid rgba(255,212,59,.35); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(255,212,59,.1); animation: tourOfferIn .45s ease; }
@keyframes tourOfferIn { from { opacity: 0; transform: translateX(-50%) translateY(18px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.tour-offer.is-out { opacity: 0; transform: translateX(-50%) translateY(14px); transition: all .5s ease; }
.tour-offer-ico { color: #f5b301; font-size: 15px; }
.tour-offer-txt { font-size: .85rem; color: rgba(226,232,240,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-offer-txt strong { color: #ffe9a8; }
.tour-offer-go { flex-shrink: 0; padding: 8px 16px; border: none; border-radius: 999px; font-weight: 800; font-size: .8rem; cursor: pointer; color: #201500; background: linear-gradient(135deg, #ffe066, #f5b301); }
.tour-offer-go:hover { filter: brightness(1.07); }
.tour-offer-x { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; font-size: 12px; color: rgba(226,232,240,.55); background: rgba(255,255,255,.06); }
.tour-offer-x:hover { color: #e2e8f0; background: rgba(255,255,255,.12); }
@media (max-width: 640px) { .tour-offer-txt { font-size: .78rem; } }

#module-ajuda .hlp-train-tour { display: flex; align-items: center; gap: 16px; margin: 14px 0; padding: 16px 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,212,59,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,212,59,.25); }
#module-ajuda .hlp-train-tour-ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(255,212,59,.12); border: 1px solid rgba(255,212,59,.3); }
#module-ajuda .hlp-train-tour-copy { flex: 1; min-width: 0; }
#module-ajuda .hlp-train-tour-copy strong { display: block; font-size: .98rem; font-weight: 800; color: #ffe9a8; }
#module-ajuda .hlp-train-tour-copy small { display: block; font-size: .8rem; color: rgba(226,232,240,.6); margin-top: 2px; }
#module-ajuda .hlp-train-tour-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 10px; }
#module-ajuda .hlp-train-tour-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffe066, #f5b301); transition: width .4s ease; }
#module-ajuda .hlp-train-tour-pct { display: inline-block; margin-top: 6px; font-size: .72rem; font-weight: 700; color: #f5b301; }
#module-ajuda .hlp-train-tour-btn { flex-shrink: 0; padding: 11px 22px; border: none; border-radius: 12px; font-weight: 800; font-size: .88rem; cursor: pointer; color: #201500; background: linear-gradient(135deg, #ffe066, #f5b301); box-shadow: 0 6px 18px rgba(245,179,1,.25); }
#module-ajuda .hlp-train-tour-btn:hover { filter: brightness(1.06); }
#module-ajuda .hlp-train-tour-done { flex-shrink: 0; font-weight: 900; font-size: .95rem; color: #22e5a6; }
@media (max-width: 640px) { #module-ajuda .hlp-train-tour { flex-direction: column; align-items: flex-start; } #module-ajuda .hlp-train-tour-btn { width: 100%; } }
/* light overrides (regra nuclear) */
body[data-theme="light"] #module-ajuda .hlp-train-tour { background: rgba(180,130,10,.06); border-color: rgba(180,130,10,.25); }
body[data-theme="light"] #module-ajuda .hlp-train-tour-ico { background: rgba(180,130,10,.1); border-color: rgba(180,130,10,.3); }
body[data-theme="light"] #module-ajuda .hlp-train-tour-copy strong { color: #92400e !important; }
body[data-theme="light"] #module-ajuda .hlp-train-tour-copy small { color: #64748b !important; }
body[data-theme="light"] #module-ajuda .hlp-train-tour-bar { background: rgba(15,23,42,.08); }
body[data-theme="light"] #module-ajuda .hlp-train-tour-pct { color: #92400e !important; }
body[data-theme="light"] #module-ajuda .hlp-train-tour-done { color: #047857 !important; }
   ONBOARDING V2-D — "preparar para revisar" (suggest-only)
   #tourPrepBtn vive no card do tour (overlay body-level); .tour-prep-modal
   é body-level — fora da regra nuclear (estética dark consistente c/ overlay).
   ══════════════════════════════════════════════════════════════════ */
.tour-prep-btn { display: block; width: 100%; margin: 12px 0 4px; padding: 11px 14px; border-radius: 12px; font-weight: 700; font-size: .85rem; cursor: pointer; text-align: center; color: #e9e2ff; background: rgba(124,58,237,.16); border: 1px dashed rgba(124,58,237,.55); transition: background .2s ease; }
.tour-prep-btn:hover { background: rgba(124,58,237,.28); }
.tour-prep-modal { position: fixed; inset: 0; z-index: 4700; display: flex; align-items: center; justify-content: center; background: rgba(2,6,16,.6); backdrop-filter: blur(3px); }
.tour-prep-card { width: min(520px, calc(100vw - 40px)); border-radius: 18px; padding: 24px 26px; background: #0d1526; border: 1px solid rgba(124,58,237,.45); box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 46px rgba(124,58,237,.18); }
.tour-prep-kicker { font-size: .68rem; font-weight: 800; letter-spacing: 1.6px; color: #b794f6; margin-bottom: 8px; }
.tour-prep-title { font-size: 1.08rem; font-weight: 800; color: #f1f5f9; margin-bottom: 12px; }
.tour-prep-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px; border-radius: 12px; padding: 14px 16px; font-size: .92rem; line-height: 1.55; font-family: inherit; color: #e2e8f0; background: rgba(2,6,16,.55); border: 1px solid rgba(148,163,184,.25); outline: none; }
.tour-prep-text:focus { border-color: rgba(124,58,237,.6); box-shadow: 0 0 0 3px rgba(124,58,237,.14); }
.tour-prep-disc { margin: 10px 0 14px; font-size: .75rem; line-height: 1.5; color: rgba(226,232,240,.5); }
.tour-prep-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tour-prep-copy { flex: 1; min-width: 120px; padding: 11px 0; border: none; border-radius: 12px; font-weight: 800; font-size: .9rem; cursor: pointer; color: #201500; background: linear-gradient(135deg, #ffe066, #f5b301); box-shadow: 0 6px 18px rgba(245,179,1,.25); }
.tour-prep-copy:hover { filter: brightness(1.06); }
.tour-prep-ai { padding: 11px 16px; border-radius: 12px; font-weight: 700; font-size: .85rem; cursor: pointer; color: #e9e2ff; background: rgba(124,58,237,.16); border: 1px solid rgba(124,58,237,.5); }
.tour-prep-ai:hover { background: rgba(124,58,237,.28); }
.tour-prep-ai:disabled { opacity: .6; cursor: wait; }
.tour-prep-close { padding: 11px 16px; border-radius: 12px; font-weight: 600; font-size: .85rem; cursor: pointer; color: rgba(226,232,240,.7); background: transparent; border: 1px solid rgba(148,163,184,.3); }
.tour-prep-close:hover { color: #e2e8f0; border-color: rgba(148,163,184,.5); }
@media (max-width: 560px) { .tour-prep-actions { flex-direction: column; } .tour-prep-copy { width: 100%; } }

/* ══════════════════════════════════════════════════════════════════
   HERO VIDEO SHOWCASE — moldura premium + tela grande + loop
   Envolve o #hero-video-wrapper (16:9). Área da capa/landing (dark-only,
   fora da regra nuclear dos #module-*). Vídeo institucional em loop.
   ══════════════════════════════════════════════════════════════════ */
.hero-video-showcase {
  position: relative;
  width: 100%;
  max-width: 1180px;            /* tela grande (antes 900px) */
  margin: 64px auto 40px;
  padding: 0 8px;
  isolation: isolate;
}
/* glow ambiente premium atrás do quadro (dourado + azul, sutil) */
.hero-video-showcase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 92%;
  height: 84%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 40px;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(250,204,21,.16), transparent 70%),
    radial-gradient(70% 70% at 50% 80%, rgba(45,127,249,.14), transparent 72%);
  filter: blur(46px);
  pointer-events: none;
}
.hero-video-showcase-head {
  text-align: center;
  margin-bottom: 22px;
}
.hero-video-kicker {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(250,204,21,.92);
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(250,204,21,.08);
  border: 1px solid rgba(250,204,21,.25);
}
.hero-video-heading {
  margin: 14px 0 0;
  font-size: clamp(1.4rem, 3.4vw, 2.35rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #f5f8ff;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
/* moldura maior ganha borda/sombra premium reforçadas */
.hero-video-showcase .native-video-frame {
  border-radius: 26px;
  border: 1px solid rgba(250,204,21,.18);
  box-shadow:
    0 40px 110px rgba(0,0,0,.6),
    0 0 0 1px rgba(250,204,21,.1),
    0 0 70px rgba(45,127,249,.12);
}
@media (max-width: 720px) {
  .hero-video-showcase { margin: 44px auto 30px; padding: 0 4px; }
  .hero-video-showcase-head { margin-bottom: 16px; }
  .hero-video-showcase .native-video-frame { border-radius: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   BILLING FRONTEND V1 — Planos e Assinatura (#tab-planos em #module-crm)
   Namespace .bill-*. Vars locais (dark default) + overrides de tema claro.
   #module-crm tem a regra nuclear light color:inherit -> toda cor precisa de
   override [data-theme="light"] #module-crm .bill-*{color:var()!important}.
═══════════════════════════════════════════════════════════════════ */
#tab-planos {
  --bill-ink: #e8edf6;
  --bill-muted: #97a4bb;
  --bill-card: #0e1526;
  --bill-card-2: #0b1120;
  --bill-border: rgba(255, 255, 255, .09);
  --bill-gold: #f5c518;
  --bill-purple: #818cf8;
  --bill-success: #22c55e;
  --bill-warning: #fb923c;
  --bill-danger: #f87171;
}
.bill-panel { max-width: 1060px; margin: 0 auto; padding: 6px 2px 40px; }
.bill-head { margin: 6px 0 20px; }
.bill-title { font-size: 24px; font-weight: 800; color: var(--bill-ink); margin: 0 0 6px; letter-spacing: -.01em; }
.bill-sub { font-size: 14px; color: var(--bill-muted); margin: 0; line-height: 1.55; max-width: 60ch; }

/* A. Minha Assinatura */
.bill-status-card {
  background: linear-gradient(160deg, var(--bill-card), var(--bill-card-2));
  border: 1px solid var(--bill-border); border-radius: 16px; padding: 18px 18px 16px; margin-bottom: 26px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.bill-status-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bill-status-kicker { font-size: 11px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; color: var(--bill-gold); }
.bill-status-pill {
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  color: var(--bill-muted); background: rgba(255, 255, 255, .06); border: 1px solid var(--bill-border);
}
.bill-status-pill.bill-st-active { color: #052e16; background: var(--bill-success); border-color: transparent; }
.bill-status-pill.bill-st-pending { color: #3a2400; background: var(--bill-warning); border-color: transparent; }
.bill-status-pill.bill-st-past_due { color: #3a2400; background: var(--bill-warning); border-color: transparent; }
.bill-status-pill.bill-st-canceled { color: #3a0d0d; background: var(--bill-danger); border-color: transparent; }
.bill-status-pill.bill-st-inactive { color: var(--bill-muted); }
.bill-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.bill-kv { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px dashed var(--bill-border); }
.bill-k { font-size: 11.5px; color: var(--bill-muted); font-weight: 600; }
.bill-v { font-size: 15px; color: var(--bill-ink); font-weight: 700; }
.bill-status-note { font-size: 12px; color: var(--bill-muted); line-height: 1.55; margin: 14px 0 0; }
.bill-status-note b { color: var(--bill-ink); font-weight: 700; }
.bill-muted { color: var(--bill-muted); font-size: 13.5px; padding: 8px 0; }
.bill-error { color: var(--bill-danger); font-size: 13.5px; font-weight: 600; padding: 8px 0; }

/* B. Planos disponíveis */
.bill-plans-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.bill-plans-title { font-size: 18px; font-weight: 800; color: var(--bill-ink); margin: 0; }
.bill-cycle-toggle { display: inline-flex; background: rgba(255, 255, 255, .05); border: 1px solid var(--bill-border); border-radius: 999px; padding: 3px; }
.bill-cycle-btn {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--bill-muted); cursor: pointer;
  background: transparent; border: 0; border-radius: 999px; padding: 7px 16px; transition: .18s;
}
.bill-cycle-btn.active { color: #0b0b0d; background: var(--bill-gold); box-shadow: 0 3px 10px rgba(245, 197, 24, .3); }
.bill-cycle-save { font-size: 10.5px; font-weight: 700; opacity: .85; margin-left: 4px; }
.bill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bill-plan-card {
  position: relative; display: flex; flex-direction: column; background: linear-gradient(160deg, var(--bill-card), var(--bill-card-2));
  border: 1px solid var(--bill-border); border-radius: 16px; padding: 20px 18px; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.bill-plan-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.bill-plan-card-featured { border-color: rgba(245, 197, 24, .55); box-shadow: 0 0 0 1px rgba(245, 197, 24, .25), 0 16px 40px rgba(245, 197, 24, .10); }
.bill-plan-card-current { border-color: rgba(129, 140, 248, .6); }
.bill-plan-badge {
  position: absolute; top: -10px; left: 18px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #0b0b0d; background: var(--bill-gold); padding: 3px 10px; border-radius: 999px;
}
.bill-plan-name { font-size: 18px; font-weight: 800; color: var(--bill-ink); margin: 2px 0 3px; text-transform: uppercase; letter-spacing: .04em; }
.bill-plan-tag { font-size: 12.5px; color: var(--bill-muted); margin: 0 0 8px; line-height: 1.4; }
.bill-plan-pill {
  display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.35; color: var(--bill-gold);
  background: rgba(245, 197, 24, .1); border: 1px solid rgba(245, 197, 24, .3); border-radius: 999px; padding: 4px 10px; margin: 2px 0 12px;
}
.bill-plan-price { margin: 2px 0 1px; }
.bill-plan-amt { font-size: 32px; font-weight: 800; color: var(--bill-ink); letter-spacing: -.02em; }
.bill-plan-cyclelabel { font-size: 12px; font-weight: 600; color: var(--bill-muted); }
.bill-plan-eq { font-size: 12px; font-weight: 700; color: var(--bill-gold); margin-top: 3px; min-height: 15px; }
.bill-plan-eq-empty { color: transparent; }
.bill-plan-desc { font-size: 12.5px; color: var(--bill-muted); line-height: 1.5; margin: 12px 0 12px; }
.bill-plan-feats { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bill-feat { position: relative; padding-left: 22px; font-size: 13px; color: var(--bill-ink); line-height: 1.4; }
.bill-feat::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--bill-success); font-weight: 800; }
.bill-feat-off { color: var(--bill-muted); opacity: .68; }
.bill-feat-off::before { content: "✕"; color: var(--bill-muted); font-weight: 800; }
.bill-actions { margin-top: auto; }
.bill-btn {
  font: inherit; font-size: 14px; font-weight: 800; width: 100%; cursor: pointer; padding: 11px 14px; border-radius: 11px;
  border: 0; color: #0b0b0d; background: linear-gradient(135deg, #ffe066, var(--bill-gold)); transition: filter .16s, opacity .16s;
}
.bill-btn:hover { filter: brightness(1.05); }
.bill-btn:disabled { cursor: default; }
.bill-btn-loading { opacity: .7; cursor: progress; }
.bill-btn-current { background: rgba(129, 140, 248, .16); color: var(--bill-purple); border: 1px solid rgba(129, 140, 248, .5); }
.bill-fineprint { font-size: 11.5px; color: var(--bill-muted); line-height: 1.5; margin: 18px 0 0; text-align: center; }

/* ── Tema claro: vence a regra nuclear color:inherit de #module-crm ── */
[data-theme="light"] #tab-planos {
  --bill-ink: #0f172a; --bill-muted: #5b6b85; --bill-card: #ffffff; --bill-card-2: #f8fafc; --bill-border: #e2e8f0;
}
[data-theme="light"] #module-crm .bill-title,
[data-theme="light"] #module-crm .bill-plans-title,
[data-theme="light"] #module-crm .bill-plan-name,
[data-theme="light"] #module-crm .bill-plan-amt,
[data-theme="light"] #module-crm .bill-v,
[data-theme="light"] #module-crm .bill-feat,
[data-theme="light"] #module-crm .bill-status-note b { color: var(--bill-ink) !important; }
[data-theme="light"] #module-crm .bill-sub,
[data-theme="light"] #module-crm .bill-muted,
[data-theme="light"] #module-crm .bill-k,
[data-theme="light"] #module-crm .bill-plan-tag,
[data-theme="light"] #module-crm .bill-plan-cur,
[data-theme="light"] #module-crm .bill-plan-per,
[data-theme="light"] #module-crm .bill-status-note,
[data-theme="light"] #module-crm .bill-fineprint,
[data-theme="light"] #module-crm .bill-cycle-btn { color: var(--bill-muted) !important; }
[data-theme="light"] #module-crm .bill-plan-desc,
[data-theme="light"] #module-crm .bill-plan-cyclelabel,
[data-theme="light"] #module-crm .bill-feat-off { color: var(--bill-muted) !important; }
[data-theme="light"] #module-crm .bill-status-kicker { color: #a17c00 !important; }
[data-theme="light"] #module-crm .bill-plan-eq { color: #a17c00 !important; }
[data-theme="light"] #module-crm .bill-plan-pill { color: #a17c00 !important; background: rgba(245, 197, 24, .14); border-color: rgba(161, 124, 0, .32); }
[data-theme="light"] #module-crm .bill-cycle-btn.active { color: #0b0b0d !important; }
[data-theme="light"] #module-crm .bill-btn { color: #0b0b0d !important; }
[data-theme="light"] #module-crm .bill-btn-current { color: #4f46e5 !important; }
[data-theme="light"] #module-crm .bill-error { color: #dc2626 !important; }
[data-theme="light"] #module-crm .bill-feat::before { color: #16a34a !important; }
[data-theme="light"] #module-crm .bill-feat-off::before { color: var(--bill-muted) !important; }
[data-theme="light"] .bill-status-card,
[data-theme="light"] .bill-plan-card { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
[data-theme="light"] .bill-status-pill.bill-st-active { color: #052e16 !important; }

/* ── Responsivo ── */
@media (max-width: 860px) {
  .bill-grid { grid-template-columns: 1fr; }
  .bill-status-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   PUBLIC BILLING ONBOARDING — modal "Criar acesso ao ImobPilot" (capa pública).
   Vive fora do #module-crm (capa é sempre escura); estilo próprio .bpo-*.
═══════════════════════════════════════════════════════════════════ */
.bpo-overlay {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(4, 6, 12, .74); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.bpo-overlay[hidden] { display: none; }
.bpo-card {
  position: relative; width: 100%; max-width: 440px; background: linear-gradient(165deg, #10182b, #0a1020);
  border: 1px solid rgba(245, 197, 24, .22); border-radius: 20px; padding: 26px 24px 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03);
  color: #e8edf6; animation: bpoIn .22s ease;
}
@keyframes bpoIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bpo-card { animation: none; } }
.bpo-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #cbd5e1; font-size: 15px; line-height: 1;
}
.bpo-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.bpo-head { margin-bottom: 16px; }
.bpo-kicker { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #f5c518; margin-bottom: 8px; }
.bpo-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; color: #fff; }
.bpo-sub { font-size: 13px; color: #9aa7bd; line-height: 1.5; margin: 0; }
.bpo-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(245, 197, 24, .07); border: 1px solid rgba(245, 197, 24, .22); border-radius: 13px; padding: 13px 15px; margin-bottom: 16px;
}
.bpo-plan-row { display: flex; align-items: baseline; gap: 8px; }
.bpo-plan-name { font-size: 16px; font-weight: 800; color: #fff; }
.bpo-plan-cycle { font-size: 12px; font-weight: 700; color: #f5c518; }
.bpo-plan-price { font-size: 20px; font-weight: 800; color: #fff; }
.bpo-plan-price span { font-size: 12px; font-weight: 600; color: #9aa7bd; }
.bpo-explain { font-size: 12.5px; color: #9aa7bd; line-height: 1.55; margin: 0 0 16px; }
.bpo-explain strong { color: #e8edf6; }
.bpo-btn {
  font: inherit; font-size: 15px; font-weight: 800; width: 100%; cursor: pointer; padding: 13px 16px; border-radius: 12px; border: 0;
  transition: filter .16s, opacity .16s;
}
.bpo-btn-primary { color: #0b0b0d; background: linear-gradient(135deg, #ffe066, #f5c518); box-shadow: 0 6px 20px rgba(245, 197, 24, .25); }
.bpo-btn-primary:hover { filter: brightness(1.05); }
.bpo-btn:disabled { opacity: .7; cursor: progress; }
.bpo-status { margin-top: 12px; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #9aa7bd; }
.bpo-status[hidden] { display: none; }
.bpo-status-info { color: #93c5fd; }
.bpo-status-success { color: #4ade80; }
.bpo-status-error { color: #f87171; }
.bpo-fine { font-size: 11px; color: #6b7688; line-height: 1.5; margin: 16px 0 0; text-align: center; }
@media (max-width: 480px) { .bpo-card { padding: 22px 18px 18px; border-radius: 16px; } .bpo-title { font-size: 20px; } }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION SHELL (M1) — hambúrguer + drawer off-canvas ≤768px.
   Aditivo: desktop (>768px) fica 100% inalterado (elementos display:none).
═══════════════════════════════════════════════════════════════════════ */
#mnav-btn, #mnav-drawer, #mnav-backdrop { display: none; }

@media (max-width: 768px) {
  /* impede overflow horizontal da página (inclui clipar o drawer off-canvas) */
  html, body { overflow-x: hidden; }

  /* na shell do CRM em mobile, o rail de 72px fica oculto e o conteúdo usa a largura toda,
     mesmo se sb-active for reativado pela navegação — o drawer passa a ser a navegação. */
  body.crm-shell-active.sb-active #sb { display: none !important; }
  body.crm-shell-active.sb-active [id^="module-"] { margin-left: 0 !important; }
  /* master-nav (quando visível) rola horizontal sem clipar */
  #master-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Botão hambúrguer — só dentro do CRM (após login) ── */
  body.mnav-enabled #mnav-btn {
    display: inline-flex; align-items: center; gap: 7px;
    position: fixed; top: 10px; left: 10px; z-index: 9985;
    min-height: 44px; padding: 0 14px 0 12px;
    background: rgba(10, 14, 22, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #eaf2f6; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .55); cursor: pointer;
  }
  body.mnav-enabled #mnav-btn:active { transform: scale(.97); }
  .mnav-btn-lbl { letter-spacing: .01em; }
  /* some quando o drawer está aberto (evita duplicidade sob o backdrop) */
  body.mnav-open #mnav-btn { opacity: 0; pointer-events: none; }

  /* ── Backdrop ── */
  /* ⚠ #mnav-backdrop (id) sobrepõe o atributo [hidden]; com inset:0 ele cobre a tela
     inteira. Por isso pointer-events fica NONE por padrão (deixa TODOS os cliques da
     página passarem — inclusive no ☰) e só vira AUTO quando o drawer está aberto (.show).
     Sem isto, o overlay invisível intercepta todo clique no mobile. */
  #mnav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 9990;
    background: rgba(4, 6, 10, .55); opacity: 0; transition: opacity .25s ease;
    pointer-events: none;
  }
  #mnav-backdrop[hidden] { display: none; }
  #mnav-backdrop.show { opacity: 1; pointer-events: auto; }

  /* ── Drawer off-canvas ── */
  #mnav-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 9995;
    width: min(84vw, 320px); max-width: 320px;
    background: linear-gradient(180deg, #0a0e16 0%, #07090f 100%);
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 6px 0 34px -8px rgba(0, 0, 0, .7);
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    will-change: transform; overscroll-behavior: contain;
    pointer-events: none;   /* off-canvas fechado não intercepta clique; volta a auto quando aberto */
  }
  #mnav-drawer.open { transform: translateX(0); pointer-events: auto; }

  .mnav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex: none;
  }
  .mnav-brand { font: 800 15px/1 system-ui, sans-serif; letter-spacing: .12em; color: #eaf2f6; }
  .mnav-close {
    display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -6px -6px 0;
    background: none; border: 0; color: #9fb0bd; cursor: pointer; border-radius: 10px;
  }
  .mnav-close:hover { color: #fff; background: rgba(255, 255, 255, .06); }

  .mnav-list {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 28px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto;
  }
  .mnav-item {
    display: flex; align-items: center; gap: 14px; width: 100%;
    min-height: 48px; padding: 10px 14px; text-align: left;
    background: none; border: 0; border-radius: 11px; cursor: pointer;
    color: #cdd8e0; font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  .mnav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
  .mnav-item:active { background: rgba(255, 255, 255, .09); transform: scale(.99); }
  .mnav-item:focus-visible { outline: 2px solid #35b6c0; outline-offset: -2px; }
  .mnav-ico { display: grid; place-items: center; width: 24px; height: 24px; flex: none; color: #7fd6dd; }
  .mnav-ico svg { width: 20px; height: 20px; }
  .mnav-ico-emoji { font-size: 17px; color: inherit; }
  .mnav-lbl { flex: 1 1 auto; }

  /* Não deixar FABs flutuantes cobrirem ações quando o drawer está aberto */
  body.mnav-open #wa-float-btn,
  body.mnav-open #crm-fab,
  body.mnav-open #crm-fab-panel { display: none !important; }

  /* trava o scroll do body enquanto o drawer está aberto */
  body.mnav-open { overflow: hidden; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #mnav-drawer { transition: none; }
  #mnav-backdrop { transition: none; }
}

/* ============================================================
   CSP-E1B — hover/focus migrados de on* inline para CSS
   (script-src sem unsafe-inline não cobre atributos on*=).
   Reproduzem EXATAMENTE os valores dos handlers removidos.
   Cor dinâmica de categoria via var --cat-cor (definida no
   style inline do elemento a partir de cat.cor, hex de código).
   ============================================================ */
[data-csp-action="sim-category"]:hover {
  border-color: var(--cat-cor);
  background: #f5fdf8;
}
[data-csp-action="sim-start"]:hover {
  border-color: var(--cat-cor);
  background: #f8f8f8;
}
#sim-input:focus {
  border-color: var(--cat-cor);
}
.cool-bar:hover {
  opacity: 0.8;
}
.exited-lead-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.wa-hint-link:hover {
  background: rgba(16, 217, 138, 0.2);
}