/* ══ 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;
      --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);
    }

    /* ===== 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: 32px;
      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)
    }

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

    /* ── Grain overlay ── */
    #module-ajuda::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .018;
      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 ── */
    .ajuda-hero {
      text-align: center;
      padding: 56px 20px 48px;
      position: relative;
      overflow: hidden
    }

    .ajuda-hero-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden
    }

    .ajuda-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      animation: ajudaOrb 14s ease-in-out infinite
    }

    .ajuda-orb-1 {
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(245, 197, 24, .18), transparent 70%);
      top: -80px;
      left: 50%;
      transform: translateX(-50%);
      animation-duration: 16s
    }

    .ajuda-orb-2 {
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(129, 140, 248, .12), transparent 70%);
      bottom: 0;
      right: 10%;
      animation-delay: -6s;
      animation-duration: 12s
    }

    .ajuda-orb-3 {
      width: 140px;
      height: 140px;
      background: radial-gradient(circle, rgba(16, 217, 138, .1), transparent 70%);
      bottom: 20px;
      left: 8%;
      animation-delay: -3s;
      animation-duration: 18s
    }

    /* floating shapes */
    .ajuda-shape {
      position: absolute;
      pointer-events: none;
      animation: ajudaFloat linear infinite
    }

    .ajuda-shape-1 {
      width: 6px;
      height: 6px;
      background: #f5c518;
      border-radius: 50%;
      opacity: .35;
      top: 25%;
      left: 12%;
      animation-duration: 7s
    }

    .ajuda-shape-2 {
      width: 4px;
      height: 4px;
      background: #818cf8;
      border-radius: 50%;
      opacity: .25;
      top: 40%;
      right: 14%;
      animation-duration: 9s;
      animation-delay: -3s
    }

    .ajuda-shape-3 {
      width: 8px;
      height: 8px;
      border: 1px solid rgba(245, 197, 24, .3);
      border-radius: 2px;
      top: 60%;
      left: 6%;
      animation-duration: 11s;
      animation-delay: -5s;
      transform-origin: center
    }

    .ajuda-shape-4 {
      width: 5px;
      height: 5px;
      background: #10d98a;
      border-radius: 50%;
      opacity: .2;
      top: 20%;
      right: 8%;
      animation-duration: 13s;
      animation-delay: -8s
    }

    .ajuda-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(245, 197, 24, .08);
      border: 1px solid rgba(245, 197, 24, .22);
      border-radius: 100px;
      padding: 5px 16px;
      font-size: 11px;
      font-weight: 700;
      color: #f5c518;
      letter-spacing: .6px;
      text-transform: uppercase;
      margin-bottom: 20px;
      animation: ajudaBadgePop .6s cubic-bezier(.34, 1.56, .64, 1) .1s both;
      position: relative;
      z-index: 1
    }

    .ajuda-hero-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #f5c518;
      opacity: .8;
      animation: glowPulse 2s ease-in-out infinite
    }

    .ajuda-hero-title {
      font-size: 38px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -1px;
      line-height: 1.1;
      margin-bottom: 14px;
      text-wrap: balance;
      animation: ajudaReveal .7s cubic-bezier(.22, 1, .36, 1) .2s both;
      position: relative;
      z-index: 1
    }

    .ajuda-hero-title span {
      background: linear-gradient(135deg, #f5c518, #fb923c);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .ajuda-hero-sub {
      font-size: 14px;
      color: rgba(255, 255, 255, .48);
      max-width: 480px;
      margin: 0 auto;
      line-height: 1.65;
      animation: ajudaReveal .7s cubic-bezier(.22, 1, .36, 1) .35s both;
      position: relative;
      z-index: 1
    }

    /* ── Seção ── */
    .ajuda-sec {
      margin-bottom: 44px;
      position: relative;
      z-index: 1
    }

    .ajuda-sec-title {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .3);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .ajuda-sec-title span {
      white-space: nowrap
    }

    .ajuda-sec-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, .1), transparent)
    }

    /* ── Reveal on scroll ── */
    .ajuda-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1)
    }

    .ajuda-reveal.visible {
      opacity: 1;
      transform: translateY(0)
    }

    /* ── Steps (início rápido) ── */
    .ajuda-steps {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
      position: relative
    }

    .ajuda-step {
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 18px;
      padding: 22px 20px;
      position: relative;
      overflow: hidden;
      transition: border-color .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
      cursor: default
    }

    .ajuda-step::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(245, 197, 24, .04), transparent 60%);
      opacity: 0;
      transition: opacity .3s
    }

    .ajuda-step:hover {
      border-color: rgba(245, 197, 24, .25);
      transform: translateY(-4px) scale(1.01);
      box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(245, 197, 24, .08)
    }

    .ajuda-step:hover::before {
      opacity: 1
    }

    .ajuda-step-num {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(245, 197, 24, .2), rgba(245, 197, 24, .08));
      border: 1px solid rgba(245, 197, 24, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      color: #f5c518;
      margin-bottom: 14px;
      box-shadow: 0 4px 12px rgba(245, 197, 24, .15)
    }

    .ajuda-step-title {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
      letter-spacing: -.2px
    }

    .ajuda-step-desc {
      font-size: 12px;
      color: rgba(255, 255, 255, .42);
      line-height: 1.6
    }

    .ajuda-step-action {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 14px;
      font-size: 12px;
      font-weight: 700;
      color: #f5c518;
      cursor: pointer;
      transition: gap .2s, opacity .2s;
      position: relative
    }

    .ajuda-step-action::after {
      content: '→';
      transition: transform .2s
    }

    .ajuda-step-action:hover {
      opacity: .85;
      gap: 8px
    }

    /* ── Módulos grid ── */
    .ajuda-modules {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 12px
    }

    .ajuda-mod {
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 14px;
      padding: 18px 16px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), border-color .25s, box-shadow .25s
    }

    /* spotlight effect */
    .ajuda-mod::before {
      content: '';
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 70%);
      pointer-events: none;
      transform: translate(var(--mx, 50%), var(--my, 50%)) translate(-50%, -50%);
      opacity: 0;
      transition: opacity .3s
    }

    .ajuda-mod:hover {
      transform: translateY(-3px) scale(1.02);
      border-color: rgba(255, 255, 255, .14);
      box-shadow: 0 12px 32px rgba(0, 0, 0, .3)
    }

    .ajuda-mod:hover::before {
      opacity: 1
    }

    .ajuda-mod-icon {
      font-size: 24px;
      margin-bottom: 10px;
      display: inline-block;
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    .ajuda-mod:hover .ajuda-mod-icon {
      transform: scale(1.15) rotate(-4deg)
    }

    .ajuda-mod-name {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px;
      letter-spacing: -.1px
    }

    .ajuda-mod-desc {
      font-size: 11px;
      color: rgba(255, 255, 255, .38);
      line-height: 1.55
    }

    .ajuda-mod-badge {
      display: inline-block;
      margin-top: 9px;
      font-size: 9px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 5px;
      letter-spacing: .4px;
      text-transform: uppercase
    }

    /* ── Lead Score explicado ── */
    .ajuda-score-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 10px;
      margin-bottom: 14px
    }

    .ajuda-score-card {
      border-radius: 12px;
      padding: 14px;
      border: 1px solid;
      transition: transform .25s
    }

    .ajuda-score-card:hover {
      transform: translateY(-2px)
    }

    /* ── Dicas ── */
    .ajuda-tips {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 10px
    }

    .ajuda-tip {
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 255, 255, .05);
      border-left: 2.5px solid transparent;
      border-radius: 12px;
      padding: 16px;
      transition: background .25s, border-left-color .25s, transform .25s
    }

    .ajuda-tip:hover {
      background: rgba(255, 255, 255, .04);
      transform: translateX(3px)
    }

    .ajuda-tip-title {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -.1px
    }

    .ajuda-tip-desc {
      font-size: 11.5px;
      color: rgba(255, 255, 255, .4);
      line-height: 1.6
    }

    /* ── FAQ — smooth accordion ── */
    .ajuda-faq {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .ajuda-faq-item {
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 13px;
      overflow: hidden;
      transition: border-color .25s, box-shadow .25s
    }

    .ajuda-faq-item.open {
      border-color: rgba(245, 197, 24, .18);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .2)
    }

    .ajuda-faq-q {
      padding: 16px 18px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      user-select: none;
      transition: background .2s;
      gap: 12px
    }

    .ajuda-faq-q:hover {
      background: rgba(255, 255, 255, .03)
    }

    .ajuda-faq-q-text {
      flex: 1;
      text-wrap: pretty
    }

    /* arrow icon replaced with animated chevron */
    .faq-chevron {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background: rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1)
    }

    .faq-chevron svg {
      width: 10px;
      height: 10px;
      stroke: rgba(255, 255, 255, .4);
      stroke-width: 2.5;
      transition: stroke .2s
    }

    .ajuda-faq-item.open .faq-chevron {
      transform: rotate(180deg);
      background: rgba(245, 197, 24, .15)
    }

    .ajuda-faq-item.open .faq-chevron svg {
      stroke: #f5c518
    }

    /* smooth height */
    .ajuda-faq-a {
      max-height: 0;
      overflow: hidden;
      padding: 0 18px;
      font-size: 12.5px;
      color: rgba(255, 255, 255, .48);
      line-height: 1.75;
      transition: max-height .4s cubic-bezier(.4, 0, .2, 1), padding .35s cubic-bezier(.4, 0, .2, 1), opacity .3s
    }

    .ajuda-faq-a-inner {
      border-top: 1px solid rgba(255, 255, 255, .06);
      padding-top: 12px;
      padding-bottom: 16px
    }

    .ajuda-faq-item.open .ajuda-faq-a {
      max-height: 600px;
      padding: 0 18px;
      opacity: 1
    }

    /* ── Atalhos ── */
    .ajuda-keys {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 8px
    }

    .ajuda-key {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      background: rgba(255, 255, 255, .025);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .06);
      transition: background .2s, border-color .2s
    }

    .ajuda-key:hover {
      background: rgba(255, 255, 255, .045);
      border-color: rgba(255, 255, 255, .1)
    }

    .ajuda-key kbd {
      background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
      border: 1px solid rgba(255, 255, 255, .14);
      border-bottom: 2px solid rgba(0, 0, 0, .35);
      border-radius: 6px;
      padding: 4px 9px;
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      font-family: ui-monospace, monospace;
      min-width: 24px;
      text-align: center;
      display: inline-block;
      transition: transform .1s, border-bottom-width .1s;
      cursor: default
    }

    .ajuda-key:hover kbd {
      animation: kbdPress .35s ease
    }

    .ajuda-key-desc {
      font-size: 11.5px;
      color: rgba(255, 255, 255, .45)
    }

    /* ── Glossário ── */
    .ajuda-gloss {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 10px
    }

    .ajuda-gloss-item {
      padding: 14px 16px;
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 12px;
      transition: background .2s, border-color .2s, transform .2s
    }

    .ajuda-gloss-item:hover {
      background: rgba(255, 255, 255, .045);
      border-color: rgba(255, 255, 255, .1);
      transform: translateY(-1px)
    }

    .ajuda-gloss-term {
      font-size: 12.5px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px;
      letter-spacing: -.1px
    }

    .ajuda-gloss-def {
      font-size: 11.5px;
      color: rgba(255, 255, 255, .38);
      line-height: 1.55
    }

    /* ── Rodapé da ajuda ── */
    .ajuda-footer {
      text-align: center;
      padding: 40px 0 16px;
      border-top: 1px solid rgba(255, 255, 255, .05);
      margin-top: 16px
    }

    /* ── Responsive ── */
    @media(max-width:600px) {
      .ajuda-hero-title {
        font-size: 26px;
        letter-spacing: -.5px
      }

      .ajuda-wrap {
        padding: 0 14px 80px
      }

      .ajuda-hero {
        padding: 40px 14px 36px
      }
    }

    /* ── 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-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 */
    .capa-ambient {
      position: absolute;
      inset: 0;
      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 70% 60% at 50% 45%, transparent 40%, rgba(2, 4, 8, .7) 100%);
      pointer-events: none;
    }

    /* Full-Screen Animated Canvas */
    .capa-canvas {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      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
    }

    /* 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-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 {
      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
    }

    .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-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 {
        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 — 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;
    }

    /* ── 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;
    }

    /* Sidebar SEMPRE escura — independente do tema */
    #sb,
    #sb *:not(.sb-lbl):not(.sb-tip) {
      color-scheme: dark;
    }

    #sb {
      background: #020617 !important;
      border-right-color: rgba(255, 255, 255, .07) !important;
    }

    #sb .sb-item {
      color: #94a3b8;
    }

    #sb .sb-item:hover {
      background: rgba(255, 255, 255, .07);
      color: #e2e8f0;
    }

    #sb .sb-item.active {
      background: rgba(245, 197, 24, .12);
      color: #f5c518;
    }

    #sb .sb-lbl {
      color: inherit;
    }

    #sb .sb-sep {
      background: rgba(255, 255, 255, .06) !important;
    }

    #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);
      }
    }