:root{
    --bg:#0a0a0c;
    --surface:#15151a;
    --surface2:#1d1d24;
    --line:#272731;
    --orange:#ff5e1a;
    --orange2:#ff8a3d;
    --white:#f5f5f7;
    --muted:#9a9aa4;
    --green:#2ecc71;
    --radius:18px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--white);
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    min-height:100vh;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display{font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}
  ::-webkit-scrollbar{display:none;}

  /* ---------- TOP APP HEADER (Play Store style) ---------- */
  .topbar{
    position:sticky; top:0; z-index:50;
    background:linear-gradient(180deg, rgba(10,10,12,0.97), rgba(10,10,12,0.85));
    backdrop-filter:blur(10px);
    padding:14px 18px 10px;
    border-bottom:1px solid var(--line);
  }
  .store-row{display:flex; align-items:center; gap:12px;}
  .app-icon{
    width:54px; height:54px; border-radius:16px;
    background:#0a0a0c;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex-shrink:0;
    box-shadow:0 6px 18px rgba(255,94,26,0.35);
  }
  .app-icon img{ width:100%; height:100%; object-fit:cover; }
  .store-meta{flex:1; min-width:0;}
  .store-meta h1{
    font-family:'Orbitron','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; font-size:15px; margin:0 0 3px;
    font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  }
  .store-meta .dev{font-size:12px; color:var(--muted); font-weight:500;}
  .rating-row{display:flex; gap:10px; margin-top:6px; font-size:11px; color:var(--muted);}
  .rating-row b{color:var(--white);}
  .star{color:var(--orange2);}

  .notif-btn{
    position:relative; flex-shrink:0;
    width:38px; height:38px; border-radius:50%;
    background:var(--surface2); border:1px solid var(--line);
    color:var(--white); display:flex; align-items:center; justify-content:center;
    cursor:pointer; margin-left:10px;
  }
  .notif-btn:active{transform:scale(0.92);}
  .notif-badge{
    position:absolute; top:-2px; right:-2px;
    min-width:16px; height:16px; padding:0 4px; border-radius:99px;
    background:var(--orange); color:#fff; font-size:10px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--bg); font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }

  .notif-item{
    display:flex; gap:12px; padding:14px; border-radius:16px;
    background:var(--surface); border:1px solid var(--line); margin-bottom:10px;
    cursor:pointer;
  }
  .notif-item.unread{ border-color:var(--orange); background:rgba(255,94,26,0.06); }
  .notif-icon{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--surface2); display:flex; align-items:center; justify-content:center;
    color:var(--orange2);
  }
  .notif-body{ flex:1; min-width:0; }
  .notif-title{ font-size:13.5px; font-weight:700; margin-bottom:2px; }
  .notif-text{ font-size:12.5px; color:var(--muted); line-height:1.4; }
  .notif-time{ font-size:10.5px; color:var(--muted); margin-top:5px; }
  .notif-dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:4px; }
  .notif-delete-btn{
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    background:var(--surface2); border:1px solid var(--line);
    color:var(--muted); display:flex; align-items:center; justify-content:center;
    cursor:pointer; align-self:center;
  }
  .notif-delete-btn:hover{ color:#ff7a5c; border-color:#ff4b37; }
  .notif-delete-btn:active{ transform:scale(0.9); }

  /* ---------- TABS ---------- */
  .tabs{
    display:flex; gap:6px; overflow-x:auto; padding:14px 14px 0; margin:0;
    scrollbar-width:none;
  }
  .tab-btn{
    flex-shrink:0;
    padding:9px 16px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--muted);
    font-size:13px; font-weight:600;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    white-space:nowrap;
    cursor:pointer;
    transition:all .2s ease;
  }
  .tab-btn.active{
    background:var(--orange);
    color:#fff;
    border-color:var(--orange);
    box-shadow:0 4px 14px rgba(255,94,26,0.35);
  }

  .screen{ padding:18px; padding-bottom:32px; max-width:720px; margin:0 auto; }
  .hidden{display:none !important;}

  /* ---------- HERO / LEARN CARD ---------- */
  .hero-card{
    background:linear-gradient(135deg, var(--surface2), var(--surface));
    border:1px solid var(--line);
    border-radius:24px;
    padding:22px;
    margin-bottom:18px;
    position:relative;
    overflow:hidden;
  }
  .hero-card::before{
    content:"";
    position:absolute; top:-40px; right:-40px;
    width:140px; height:140px;
    background:radial-gradient(circle, rgba(255,94,26,0.35), transparent 70%);
  }
  .eyebrow{
    font-size:11px; text-transform:uppercase; letter-spacing:1.2px;
    color:var(--orange2); font-weight:700; margin-bottom:8px; display:block;
  }
  .hero-card h2{font-size:22px; margin:0 0 8px; line-height:1.25;}
  .hero-card p{font-size:14px; color:var(--muted); margin:0 0 16px; line-height:1.55;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--orange); color:#fff;
    border:none; border-radius:999px;
    padding:12px 22px;
    font-weight:700; font-size:14px;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(255,94,26,0.3);
    transition:transform .15s ease;
  }
  .btn:active{transform:scale(0.96);}
  .btn.ghost{
    background:transparent; color:var(--white);
    border:1px solid var(--line);
    box-shadow:none;
  }

  /* ---------- SECTION LABELS ---------- */
  .section-label{
    font-size:13px; font-weight:700; color:var(--white);
    margin:26px 0 12px; display:flex; align-items:center; gap:8px;
  }
  .section-label .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);}
  .section-sub{font-size:12px; color:var(--muted); margin:-8px 0 14px;}

  /* ---------- MESSAGE CARDS ---------- */
  .msg-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:12px;
    position:relative;
  }
  .msg-tag{
    display:inline-block;
    font-size:10.5px; font-weight:700;
    padding:4px 10px; border-radius:999px;
    background:rgba(255,94,26,0.15);
    color:var(--orange2);
    margin-bottom:10px;
    text-transform:uppercase;
    letter-spacing:0.4px;
  }
  .msg-text{
    font-size:14px; line-height:1.6; color:#e8e8ec;
    white-space:pre-wrap;
    margin-bottom:12px;
  }
  .msg-actions{display:flex; gap:8px;}
  .copy-btn{
    flex:1;
    background:var(--surface2);
    border:1px solid var(--line);
    color:var(--white);
    padding:10px;
    border-radius:12px;
    font-size:13px; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:6px;
    cursor:pointer;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    transition:all .15s ease;
  }
  .copy-btn:active{transform:scale(0.97);}
  .copy-btn.copied{background:var(--green); border-color:var(--green); color:#fff;}

  /* ---------- TACTIC CARDS (icebreaker especial) ---------- */
  .tactic-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:12px;
    display:flex; gap:14px; align-items:flex-start;
  }
  .tactic-emoji{
    width:42px; height:42px; flex-shrink:0;
    background:var(--surface2);
    border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
  }
  .tactic-card h4{font-size:14px; margin:0 0 4px;}
  .tactic-card p{font-size:13px; color:var(--muted); margin:0; line-height:1.5;}

  /* ---------- TRACKER ---------- */
  .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
  .stat-box{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px;
  }
  .stat-box .num{font-size:26px; font-weight:800; font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}
  .stat-box .lbl{font-size:11.5px; color:var(--muted); margin-top:2px;}
  .stat-box.accent .num{color:var(--orange2);}
  .progress-wrap{margin-bottom:18px;}
  .progress-top{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:6px;}
  .progress-bar{height:10px; background:var(--surface2); border-radius:999px; overflow:hidden;}
  .progress-fill{height:100%; background:linear-gradient(90deg, var(--orange), var(--orange2)); border-radius:999px; transition:width .4s ease;}
  .counter-row{display:flex; gap:10px; margin-bottom:10px; align-items:center;}
  .counter-label{flex:1; font-size:13.5px; font-weight:600;}
  .stepper{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px;}
  .step-btn{
    width:30px; height:30px; border-radius:50%;
    background:var(--surface2); border:none; color:var(--white);
    font-size:16px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .step-val{min-width:26px; text-align:center; font-weight:700; font-size:14px;}
  .reset-link{
    text-align:center; font-size:12.5px; color:var(--muted);
    margin-top:18px; text-decoration:underline; cursor:pointer;
  }

  /* ---------- OBJECTIONS ACCORDION ---------- */
  .acc-item{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    margin-bottom:10px;
    overflow:hidden;
  }
  .acc-head{
    padding:14px 16px;
    display:flex; justify-content:space-between; align-items:center;
    cursor:pointer;
    font-size:13.5px; font-weight:700;
  }
  .acc-head .arrow{transition:transform .2s ease; color:var(--orange2);}
  .acc-item.open .arrow{transform:rotate(180deg);}
  .acc-body{
    max-height:0; overflow:hidden; transition:max-height .25s ease;
    padding:0 16px;
  }
  .acc-item.open .acc-body{padding:0 16px 16px;}
  .acc-body .msg-text{font-size:13.5px;}

  /* ---------- STATUS DO CLIENTE (recolhível) ----------
     Igual ao acordeão de Objeções, mas independente (não fecha outros
     quando abre — aqui só existe 1 por vez na tela). Fica fechado por
     padrão porque o quadro Kanban da tela de Clientes já é o jeito
     principal de mudar o status; isso aqui é o fallback (funciona em
     qualquer dispositivo, inclusive touch, já que arrastar no quadro só
     funciona com mouse). O status atual fica visível no cabeçalho mesmo
     fechado, pra não precisar abrir só pra conferir qual é. */
  .collapse-section{
    background:var(--surface); border:1px solid var(--line);
    border-radius:16px; overflow:hidden; margin-bottom:18px;
  }
  .collapse-head{
    padding:14px 16px; display:flex; align-items:center; gap:10px;
    cursor:pointer;
  }
  .collapse-head .section-label{ flex-shrink:0; }
  .collapse-current{
    flex:1; min-width:0; text-align:right;
    font-size:12.5px; font-weight:700; color:var(--orange2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .collapse-arrow{ color:var(--orange2); transition:transform .2s ease; flex-shrink:0; }
  .collapse-section.open .collapse-arrow{ transform:rotate(180deg); }
  .collapse-body{
    max-height:0; overflow:hidden; transition:max-height .25s ease;
    padding:0 16px;
  }
  .collapse-section.open .collapse-body{ padding:0 16px 16px; }

  /* ---------- BOTTOM NAV (like installed app) ---------- */
  .bottomnav{
    position:fixed; bottom:0; left:0; right:0;
    background:rgba(15,15,18,0.97);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    display:flex; justify-content:space-around;
    padding:10px 6px 14px;
    z-index:60;
  }
  .nav-btn{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; color:var(--muted);
    font-size:10.5px; font-weight:600; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    cursor:pointer; padding:4px 8px;
  }
  .nav-btn .ic{font-size:19px;}
  .nav-btn.active{color:var(--orange2);}

  /* ---------- MODAL: O que é Social Selling ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.7);
    backdrop-filter:blur(4px);
    display:flex; align-items:flex-end; justify-content:center;
    z-index:100; opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  .modal-overlay.show{opacity:1; pointer-events:all;}
  .modal-sheet{
    background:var(--bg);
    border-radius:26px 26px 0 0;
    border-top:1px solid var(--line);
    width:100%; max-width:720px;
    max-height:88vh; overflow-y:auto;
    padding:8px 20px 30px;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.32,.72,0,1);
  }
  .modal-overlay.show .modal-sheet{transform:translateY(0);}
  .modal-handle{
    width:40px; height:4px; background:var(--line);
    border-radius:99px; margin:10px auto 18px;
  }
  .modal-sheet h2{font-size:21px; margin:6px 0 4px;}
  .modal-sheet .lead{font-size:13.5px; color:var(--muted); margin-bottom:20px; line-height:1.6;}
  .concept-block{
    border-left:3px solid var(--orange); padding-left:14px; margin-bottom:18px;
  }
  .concept-block h4{font-size:14.5px; margin:0 0 4px;}
  .concept-block p{font-size:13.5px; color:var(--muted); line-height:1.6; margin:0;}
  .close-modal{
    position:sticky; top:0; float:right;
    background:var(--surface2); border:1px solid var(--line);
    width:32px; height:32px; border-radius:50%;
    color:var(--white); font-size:15px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; margin-left:auto;
  }

  /* ---------- CHECKLIST (Posicionamento) ---------- */
  .check-item{
    display:flex; align-items:center; gap:12px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:13px 14px;
    margin-bottom:9px;
    cursor:pointer;
    transition:all .15s ease;
  }
  .check-item.done{border-color:var(--orange); background:rgba(255,94,26,0.08);}
  .check-box{
    width:22px; height:22px; border-radius:7px;
    border:2px solid var(--line);
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; color:#fff;
    transition:all .15s ease;
  }
  .check-item.done .check-box{background:var(--orange); border-color:var(--orange);}
  .check-text{font-size:13.5px; font-weight:600; flex:1;}
  .check-item.done .check-text{color:var(--muted); text-decoration:line-through;}

  .cadence-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:12px;
    display:flex; gap:14px;
  }
  .cadence-day{
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    background:var(--orange); color:#fff; font-weight:800;
    display:flex; align-items:center; justify-content:center; font-size:14px;
    font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .cadence-card .msg-tag{margin-bottom:6px;}

  .form-pill-row{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
  .form-pill{
    font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px;
    background:var(--surface2); color:var(--orange2); border:1px solid var(--line);
  }

  /* ---------- SECTION CARDS GRID (Home) ----------
     auto-fit em vez de contagem fixa por breakpoint: o número de colunas
     se ajusta sozinho a QUALQUER largura de janela (sem sobrar vazio nem
     precisar de um breakpoint novo pra cada monitor). minmax(230px,1fr)
     = cada card nunca fica menor que 230px, mas cresce pra preencher o
     espaço disponível — em tela larga cabem mais colunas na mesma linha
     em vez de ficar preso em 4 com sobra do lado. */
  .section-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px;
    margin-bottom:6px;
  }
  .sec-card{
    border-radius:18px; padding:16px;
    cursor:pointer; position:relative; overflow:hidden;
    transition:transform .15s ease;
    box-shadow:0 6px 16px rgba(0,0,0,0.25);
  }
  .sec-card:active{transform:scale(0.96);}
  .sec-card::before{
    content:""; position:absolute; right:-22px; top:-22px;
    width:90px; height:90px; border-radius:50%;
    background:rgba(255,255,255,0.10);
  }
  .sec-card .sc-icon{font-size:26px; margin-bottom:8px; color:var(--orange2);}
  .sec-card .sc-name{font-size:13.5px; font-weight:800; color:var(--orange2); line-height:1.3;}
  .sec-card .sc-sub{font-size:11.5px; color:rgba(255,255,255,0.65); margin-top:2px;}
  .sec-card.c-posicionamento,
  .sec-card.c-rapport,
  .sec-card.c-taticas,
  .sec-card.c-objecoes,
  .sec-card.c-tracker,
  .sec-card.c-bunch,
  .sec-card.c-scp,
  .sec-card.c-escalada,
  .sec-card.c-clientes,
  .sec-card.c-metas,
  .sec-card.c-formulario,
  .sec-card.c-treinamento,
  .sec-card.c-mensagens,
  .sec-card.c-cnpj,
  .sec-card.c-opencnpj,
  .sec-card.c-clientes-reais{
    background:linear-gradient(135deg, #15151a, #0a0a0c);
    border:1px solid var(--line);
  }
  .sec-card::before{ background:rgba(255,94,26,0.08); }

  /* ---------- SCREEN HEADER (voltar) ---------- */
  .screen-header{
    display:flex; align-items:center; gap:12px;
    margin-bottom:16px;
  }
  .back-btn{
    width:38px; height:38px; border-radius:50%;
    background:var(--surface); border:1px solid var(--line);
    color:var(--white); font-size:17px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0;
  }
  .back-btn:active{transform:scale(0.92);}
  .screen-header h1{font-size:17px; margin:0; font-weight:800;}
  .screen-header h1.wrap-title{ flex:1; min-width:0; line-height:1.3; }

  /* ====================== CLIENTES — linha superior (busca + ordenação) ====================== */
  .clientes-top-row{ margin-bottom:14px; }
  .crm-sort-wrap{
    display:flex; align-items:center; gap:8px; width:100%;
    background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:11px 14px; margin-top:10px; color:var(--muted);
    cursor:pointer; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .crm-sort-wrap span{ color:var(--white); font-size:13.5px; }
  .custom-select{ position:relative; }
  .custom-select-list{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:80;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    overflow:hidden; box-shadow:0 14px 36px rgba(0,0,0,0.5);
    display:none;
  }
  .custom-select-list.show{ display:block; }
  .custom-select-opt{
    padding:12px 14px; font-size:13.5px; color:var(--white);
    cursor:pointer; border-bottom:1px solid var(--line);
  }
  .custom-select-opt:last-child{ border-bottom:none; }
  .custom-select-opt:hover{ background:var(--surface2); }
  .custom-select-opt.selected{ color:var(--orange2); font-weight:700; background:rgba(255,94,26,0.08); }

  /* ====================== CRM CLIENTES ====================== */
  .crm-search{
    display:flex; align-items:center; gap:10px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:11px 14px; margin-bottom:14px;
  }
  .crm-search input{
    flex:1; background:none; border:none; outline:none;
    color:var(--white); font-size:14px; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .crm-search input::placeholder{color:var(--muted);}

  /* Barra compacta de Clientes: ícone de busca (expande um input só quando
     clicado, pra não ocupar uma barra inteira parada na tela) + contador +
     título do quadro, tudo numa linha só em vez de 3 linhas empilhadas. */
  .crm-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
  .crm-search-btn{
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    background:var(--surface2); border:1px solid var(--line); color:var(--white);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .crm-search-btn:active{ transform:scale(0.92); }
  .crm-search-btn.active{ background:var(--orange); border-color:var(--orange); color:#fff; }
  .crm-search-input{
    flex:0 0 0; width:0; min-width:0; opacity:0; padding:0; margin:0;
    background:var(--surface); border:1px solid transparent; border-radius:12px;
    color:var(--white); font-size:14px; outline:none; overflow:hidden;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    transition:flex-basis .2s ease, opacity .15s ease, padding .2s ease;
  }
  .crm-search-input.show{ flex:1 1 160px; width:auto; opacity:1; padding:9px 12px; border-color:var(--line); }
  .crm-search-input::placeholder{ color:var(--muted); }
  .crm-count-inline{
    font-size:12px; color:var(--muted); white-space:nowrap;
    display:flex; align-items:center; gap:6px;
  }
  .crm-count-inline .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; }
  .crm-count-inline b{ color:var(--orange2); }

  /* Ordenação dos cards do Kanban de Leads (2026-08-20, pedido por Alam)
     — select simples, mesmo visual dos inputs da toolbar. */
  .crm-sort-select{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    color:var(--white); font-size:12.5px; padding:8px 10px; outline:none;
    color-scheme:dark; flex-shrink:0;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }

  .fab{
    position:fixed; right:20px; bottom:24px; z-index:55;
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg, var(--orange), #d4380d);
    color:#fff; font-size:26px; border:none;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 22px rgba(255,94,26,0.45);
    cursor:pointer;
  }
  .fab:active{transform:scale(0.92);}

  /* ====================== ASSISTENTE IA ======================
     Botão flutuante fica sempre visível (todas as telas, diferente do
     .fab de "+" que só aparece em Clientes/Formulário) — por isso do lado
     ESQUERDO, pra nunca colidir com o .fab quando os dois coexistem na
     mesma tela. Fica acima do bottomnav (bottom:90px, o .fab usa 24px). */
  .ai-fab{
    position:fixed; left:20px; bottom:90px; z-index:56;
    width:50px; height:50px; border-radius:50%;
    background:linear-gradient(135deg, #6a5bff, #a35bff);
    color:#fff; border:none;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 22px rgba(122,91,255,0.45);
    cursor:pointer;
  }
  .ai-fab:active{ transform:scale(0.92); }

  .ai-modal-sheet{ display:flex; flex-direction:column; max-height:80vh; }
  .ai-lead-badge{
    display:flex; align-items:center; gap:6px;
    background:rgba(122,91,255,0.12); color:#b3a3ff;
    border:1px solid rgba(122,91,255,0.35); border-radius:999px;
    padding:6px 12px; font-size:12px; font-weight:600;
    margin-bottom:14px; align-self:flex-start;
  }
  .ai-lead-badge b{ color:#fff; }
  .ai-messages{
    flex:1; overflow-y:auto; min-height:180px;
    display:flex; flex-direction:column; gap:10px;
    margin-bottom:12px; padding-right:2px;
  }
  .ai-msg{
    max-width:85%; padding:10px 13px; border-radius:14px;
    font-size:13.5px; line-height:1.5; white-space:pre-wrap;
  }
  .ai-msg-model{
    align-self:flex-start; background:var(--surface); border:1px solid var(--line);
    border-bottom-left-radius:4px;
  }
  .ai-msg-user{
    align-self:flex-end; background:linear-gradient(135deg, #6a5bff, #a35bff);
    color:#fff; border-bottom-right-radius:4px;
  }
  .ai-msg-loading{ color:var(--muted); font-style:italic; }
  /* Trecho que veio como **negrito**/### título na resposta da IA — em vez
     de tentar deixar em negrito de verdade, fica laranja (formatAiText()
     em js/ai.js já troca os marcadores de markdown por essas classes). */
  .ai-msg .ai-highlight{ color:var(--orange2); font-weight:700; }
  .ai-msg .ai-heading{ color:var(--orange2); font-weight:800; display:block; margin:2px 0 4px; }

  /* Chips de pergunta rápida — só aparecem enquanto a conversa é só a
     saudação inicial (ver renderAiSuggestions em js/ai.js). Clicar já
     manda a pergunta, sem precisar digitar. */
  .ai-suggestions{
    display:none; flex-wrap:wrap; gap:8px; margin-bottom:12px; flex-shrink:0;
  }
  .ai-suggestion-chip{
    background:rgba(122,91,255,0.10); border:1px solid rgba(122,91,255,0.35);
    color:#c9bfff; border-radius:999px; padding:8px 14px; font-size:12.5px;
    font-weight:600; cursor:pointer; text-align:left;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .ai-suggestion-chip:active{ transform:scale(0.96); }
  .ai-suggestion-chip:hover{ background:rgba(122,91,255,0.18); }
  .ai-input-row{
    display:flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:6px 6px 6px 14px; flex-shrink:0;
  }
  .ai-input-row textarea{
    flex:1; background:none; border:none; outline:none; resize:none;
    color:var(--white); font-size:14px; line-height:1.4; max-height:100px;
    padding:8px 0; margin:0; display:block;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .ai-input-row textarea::placeholder{ color:var(--muted); }
  .ai-send-btn{
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, #6a5bff, #a35bff); border:none; color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .ai-send-btn:active{ transform:scale(0.92); }
  .ai-clear-btn{
    background:none; border:none; color:var(--muted); font-size:12px;
    text-decoration:underline; cursor:pointer; margin:10px auto 0; flex-shrink:0;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }

  /* Full-bleed genérico: qualquer elemento com essa classe vaza até a borda
     real da janela, ignorando o max-width/centralização do .screen pai —
     mesma técnica usada no .kanban-board logo abaixo (left:50% +
     margin-left:-50vw recentraliza baseado na viewport inteira). Usado no
     título e na barra de busca de Clientes (screen-header/crm-toolbar/
     section-sub com essa classe extra) pra alinhar com o quadro Kanban,
     que também é full-bleed — sem isso, o título ficava "flutuando" numa
     coluna central enquanto o quadro ia até a borda.
     IMPORTANTE: NÃO tentar resolver isso tirando a centralização do
     #screen-clientes inteiro (margin:0 auto → 0) — já tentamos e quebra a
     conta do full-bleed do quadro, que assume que o .screen pai está
     centralizado (é assim que o left:50%/-50vw se cancela certinho e
     sobra exatamente na borda). Alinhar só os elementos do topo com essa
     classe, sem mexer no .screen, é a forma segura. */
  .crm-fullbleed{
    position:relative; left:50%; right:50%;
    width:100vw; max-width:100vw;
    margin-left:-50vw; margin-right:-50vw;
    padding-left:18px; padding-right:18px;
    box-sizing:border-box;
  }

  /* ====================== QUADRO DE CLIENTES (KANBAN) ======================
     Colunas = etapas do funil (STATUS_OPTIONS, 12 no total). Rola na
     horizontal (igual um Trello/ClickUp) — cada coluna tem largura fixa,
     então isso funciona tanto no celular (arrasta os dedos) quanto no
     desktop (scroll do mouse/trackpad).
     O board "escapa" da largura limitada do .screen (max-width:1100/1280
     + centralizado) e usa a LARGURA TOTAL da janela — técnica clássica de
     full-bleed: left:50% + margin-left:-50vw recentraliza baseado na
     viewport inteira, não no container pai. Sem isso, com 12 colunas o
     board ficava preso na coluna central estreita e cortava cedo demais. */
  .kanban-board{
    display:flex; gap:12px; overflow-x:auto; padding-bottom:10px;
    position:relative; left:50%; right:50%;
    width:100vw; max-width:100vw;
    margin-left:-50vw; margin-right:-50vw;
    padding-left:18px; padding-right:18px;
  }
  /* Normalmente os scrollbars do app ficam escondidos (visual de app
     instalado) — aqui a barra fica visível de propósito, porque com 12
     colunas não dá pra ver tudo de cara, e sem indicação visual a pessoa
     não percebia que dava pra rolar pro lado (ver feedback do Alam). */
  .kanban-board::-webkit-scrollbar{ display:block; height:8px; }
  .kanban-board::-webkit-scrollbar-track{ background:var(--surface); border-radius:99px; }
  .kanban-board::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
  .kanban-board::-webkit-scrollbar-thumb:hover{ background:var(--orange2); }
  .kanban-board{ scrollbar-width:thin; scrollbar-color:var(--line) var(--surface); }
  .kanban-col{
    flex:0 0 240px; width:240px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:12px;
    display:flex; flex-direction:column; max-height:70vh;
    transition:border-color .15s ease, background .15s ease;
  }
  .kanban-col.drag-over{ border-color:var(--orange); background:rgba(255,94,26,0.06); }
  .kanban-col-head{
    display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-shrink:0;
    padding:0 2px;
  }
  .kanban-col-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .kanban-col-title{
    flex:1; min-width:0; font-size:12.5px; font-weight:800; color:var(--white);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .kanban-col-count{
    font-size:11px; font-weight:700; color:var(--muted);
    background:var(--surface2); border-radius:999px; padding:2px 8px; flex-shrink:0;
  }
  /* Ícone "?" nas colunas do Kanban de Clientes (2026-08-19b) — explica o
     que cada status significa, num mini modal (clienteStatusInfoModalOverlay). */
  .kanban-col-help{
    flex-shrink:0; width:18px; height:18px; border-radius:50%;
    background:none; border:1px solid var(--line); color:var(--muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    padding:0;
  }
  .kanban-col-help:hover{ border-color:var(--orange2); color:var(--orange2); }
  .kanban-col-cards{ overflow-y:auto; flex:1; min-height:40px; }
  .kanban-col-empty{ font-size:11.5px; color:var(--muted); text-align:center; padding:16px 4px; }
  .kanban-card{
    background:var(--surface2); border:1px solid var(--line); border-radius:12px;
    padding:11px; margin-bottom:8px; cursor:grab;
  }
  .kanban-card:last-child{ margin-bottom:0; }
  .kanban-card:active{ cursor:grabbing; }
  .kanban-card.dragging{ opacity:0.4; }
  .kanban-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
  .kanban-card-top .client-avatar{ width:32px; height:32px; font-size:12px; }
  .kanban-card .client-name{ font-size:13px; }
  .kanban-card .client-empresa{ font-size:11.5px; }
  .kanban-card .client-meta{ font-size:10px; }

  .client-avatar{
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, var(--orange), #d4380d);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; color:#fff; font-size:15px;
    font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .client-name{font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .client-empresa{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .client-meta{font-size:10.5px; color:var(--muted); margin-top:3px;}

  /* Indicador de pagamento atrasado no card do Kanban de Clientes
     (js/clientes-reais.js) — bolinha vermelha piscante no canto, pra bater
     o olho sem precisar abrir o cliente. */
  .kanban-card{ position:relative; }
  .kanban-card-overdue-dot{
    position:absolute; top:8px; right:8px; width:9px; height:9px;
    border-radius:50%; background:#ff4b37;
    box-shadow:0 0 0 0 rgba(255,75,55,0.6);
    animation:overduePulse 1.6s ease-in-out infinite;
  }
  @keyframes overduePulse{
    0%{ box-shadow:0 0 0 0 rgba(255,75,55,0.55); }
    70%{ box-shadow:0 0 0 6px rgba(255,75,55,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,75,55,0); }
  }

  /* Banner de cobrança (Detalhe do cliente, #crPagamentoBanner) — 3
     estados: em dia (neutro/discreto), vence hoje (laranja), atrasado
     (vermelho, com animação leve pra chamar atenção). */
  .pagamento-banner{
    display:flex; align-items:center; gap:12px;
    border-radius:var(--radius); padding:14px 16px; margin-bottom:18px;
    border:1px solid var(--line); background:var(--surface);
  }
  .pagamento-banner-icon{ flex-shrink:0; display:flex; }
  .pagamento-banner-body{ flex:1; min-width:0; }
  .pagamento-banner-title{ font-size:13.5px; font-weight:800; }
  .pagamento-banner-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
  .pagamento-banner.vencehoje{ border-color:#ffc828; background:rgba(255,200,40,0.09); }
  .pagamento-banner.vencehoje .pagamento-banner-icon{ color:#ffd24d; }
  .pagamento-banner.atrasado{ border-color:#ff4b37; background:rgba(255,75,55,0.09); animation:overduePulse 2s ease-in-out infinite; }
  .pagamento-banner.atrasado .pagamento-banner-icon{ color:#ff7a5c; }
  .pagamento-banner.emdia .pagamento-banner-icon{ color:#4ade80; }
  .pagamento-banner-btn{
    flex-shrink:0; background:var(--orange); color:#fff; border:none;
    border-radius:12px; padding:10px 16px; font-size:12.5px; font-weight:700;
    cursor:pointer; white-space:nowrap;
  }
  .pagamento-banner-btn:hover{ background:var(--orange2); }

  /* Bloco de Cenário Inicial no Detalhe do cliente (#crCenarioInicialWrap)
     — igual ao .cnpj-result-grid (label pequeno em cima, valor embaixo),
     protegido/só-leitura por design (mudanças viram histórico, não editam
     esses campos direto). */
  .cenario-inicial-grid{ display:flex; flex-direction:column; gap:10px; }
  .cenario-inicial-grid > div{ display:flex; flex-direction:column; gap:2px; }
  .cenario-inicial-grid b{ font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
  .cenario-inicial-grid span{ font-size:13.5px; color:var(--white); white-space:pre-wrap; }

  .badge-temp{
    font-size:10px; font-weight:800; padding:4px 9px; border-radius:999px;
    display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  }
  .badge-temp.frio{background:rgba(59,140,255,0.18); color:#6fa8ff;}
  .badge-temp.morno{background:rgba(255,200,40,0.18); color:#ffd24d;}
  .badge-temp.quente{background:rgba(255,75,55,0.18); color:#ff7a5c;}

  .empty-state{
    text-align:center; padding:50px 20px; color:var(--muted);
  }
  .empty-state .es-icon{font-size:42px; margin-bottom:12px;}
  .empty-state p{font-size:13.5px; margin:0;}

  /* Form */
  .form-group{margin-bottom:14px;}
  .form-group label{
    display:block; font-size:12px; font-weight:700; color:var(--muted);
    margin-bottom:6px; text-transform:uppercase; letter-spacing:0.3px;
  }
  .form-group input, .form-group select, .form-group textarea{
    width:100%; background:var(--surface); border:1px solid var(--line);
    border-radius:12px; padding:12px 14px; color:var(--white);
    font-size:14px; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; outline:none;
  }
  .form-group select{ color-scheme:dark; }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus{
    border-color:var(--orange);
  }
  .form-group textarea{resize:vertical; min-height:80px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .form-section-title{
    font-size:13px; font-weight:800; color:var(--orange2);
    margin:22px 0 12px; text-transform:uppercase; letter-spacing:0.5px;
    display:flex; align-items:center; gap:8px;
  }

  /* Detail header */
  .client-hero{
    background:linear-gradient(135deg, var(--surface2), var(--surface));
    border:1px solid var(--line); border-radius:22px; padding:22px;
    text-align:center; margin-bottom:18px;
  }
  .client-hero-avatar{
    width:72px; height:72px; border-radius:50%; margin:0 auto 12px;
    background:linear-gradient(135deg, var(--orange), #d4380d);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; color:#fff; font-size:26px;
    font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .client-hero h2{font-size:19px; margin:0 0 3px;}
  .client-hero .ch-empresa{font-size:13px; color:var(--muted); margin-bottom:3px;}
  .client-hero .ch-local{font-size:12px; color:var(--muted); margin-bottom:12px;}
  .quick-actions{display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
  .qa-btn{
    /* 2026-08-20: aumentado de 48px pra 56px (Alam pediu ícones maiores
       e todos do mesmo tamanho) — os SVGs de dentro também foram todos
       pro mesmo 24x24 (eram 19x19), acompanhando o botão maior. */
    width:56px; height:56px; border-radius:50%; flex-shrink:0;
    background:var(--surface2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-size:19px; cursor:pointer; text-decoration:none;
    color:var(--orange2);
  }
  .qa-btn:active{transform:scale(0.9);}
  .qa-btn.disabled{opacity:0.3; pointer-events:none;}

  /* Cores oficiais de cada app (2026-08-19, pedido por Alam: "fica mais
     bonito e destacado") — só o ÍCONE muda de cor (via `color`, que
     alimenta o currentColor usado nos SVGs), o fundo do botão continua
     neutro (var(--surface2)) igual os outros, pra não quebrar a
     consistência visual da fileira. Instagram (qaInstaPessoal/
     qaInstaEmpresa/crQaInstagram) foi atualizado em 2026-08-20 pra usar
     o gradiente oficial de verdade (Alam mandou o print do logo) —
     <linearGradient> dentro do próprio SVG, não dá mais pra fazer só com
     `color`/currentColor, por isso não tem mais classe .qa-instagram
     aqui. */
  .qa-btn.qa-whatsapp{ color:#25D366; }
  /* Facebook (qaFacebook) atualizado em 2026-08-20: o path antigo era 1
     cor só (currentColor) — o "f" ficava com a cor de FUNDO do botão em
     vez de branco (não batia com a logo real). Virou círculo azul sólido
     + "f" branco por cima, cores fixas, mesma técnica dos outros logos
     multicoloridos — sem uso de `color` aqui. */
  /* Maps (qaMaps/crQaMaps) atualizado em 2026-08-20 pro pin colorido de
     verdade (gradiente vermelho→amarelo→verde→azul, Alam mandou o
     print) — mesma técnica de <linearGradient> dentro do SVG, sem usar
     `color` aqui. */
  /* Meta (qaMetaAds/crQaMetaBM) atualizado em 2026-08-20 pro logo real
     do infinito (gradiente azul, Alam mandou o print) — deixou de usar
     essa técnica de `color`, ver <linearGradient> dentro do SVG em
     index.html. */
  /* 2026-08-20: Drive (crQaDrive), Onboarding/Google Forms
     (crQaOnboarding) e Gravação (crQaGravacao) não usam essa técnica de
     `color` — Alam mandou o print do logo de verdade de cada um e os
     ícones viraram a logo oficial multicolorida (cores/gradiente fixos
     em cada <path>/<circle>/<rect>/<linearGradient> do SVG, ver
     index.html), não dá pra fazer isso só com currentColor.
     Gravação virou o logo do Tactiq (nuvem com bolinhas, gradiente
     rosa→roxo) em 2026-08-20b — Alam avisou que as gravações não são
     feitas pelo Google Meet, são pelo Tactiq. */
  /* Ícone de Cardápio Digital (crQaCardapio) muda de cor E de desenho
     (ver CARDAPIO_PLATAFORMA_ICONE em js/clientes-reais.js) conforme a
     plataforma escolhida no formulário do cliente (cr_cardapioDigital).
     Essa `color` só é usada de verdade quando a plataforma NÃO tem ícone
     próprio em CARDAPIO_PLATAFORMA_ICONE (cai no genérico, que usa
     currentColor) — pras que já têm ícone com cores fixas (Anota Aí,
     Brendi, Cardápio Web), fica só como reforço/fallback, sem efeito
     visual direto. iFood, Anota Aí, Brendi e Cardápio Web: cores
     CONFIRMADAS pelos prints que o Alam mandou. Cardap.io: ainda NÃO
     CONFIRMADA (pesquisei mas não consegui achar o hex oficial — busca
     por texto não revela CSS, Brandfetch bloqueou acesso, navegação pro
     site foi bloqueada pela política desse ambiente) — cor provisória
     até o Alam mandar o print do logo. */
  .qa-btn.qa-cardapio-ifood{ color:#EA1D2C; }
  .qa-btn.qa-cardapio-anotaai{ color:#1C9BEF; }
  .qa-btn.qa-cardapio-brendi{ color:#E8433F; }
  .qa-btn.qa-cardapio-cardapioio{ color:#2F80ED; }
  .qa-btn.qa-cardapio-cardapioweb{ color:#7B2FBE; }
  .qa-btn.qa-cardapio-saipos{ color:#E8791A; }

  .mini-stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px;}
  .mini-stat{
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:11px 8px; text-align:center;
  }
  .mini-stat .ms-num{font-size:18px; font-weight:800; color:var(--orange2); font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}
  .mini-stat .ms-lbl{font-size:9.5px; color:var(--muted); margin-top:2px; line-height:1.3;}

  /* Prévia da importação de planilha de leads (js/import-leads.js,
     2026-08-19) — lista rolável com os leads que serão criados. */
  .import-lead-preview-list{
    max-height:320px; overflow-y:auto; background:var(--surface);
    border:1px solid var(--line); border-radius:14px; padding:4px 14px;
  }
  .import-lead-preview-item{ padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .import-lead-preview-item:last-child{ border-bottom:none; }

  /* Mini-dashboard de Clientes (js/clientes-reais.js) — a MOLDURA do card
     (não só o conteúdo de dentro) precisa ficar estreita e centralizada,
     não esticada de ponta a ponta da tela. Antes tinha a classe
     .crm-fullbleed (técnica de "sangrar" até a borda real da tela, usada
     de propósito no board/toolbar do Kanban, que precisam disso pra
     rolagem horizontal) — só que aplicada nesse card também, sobrava um
     vão vazio enorme DENTRO da própria borda dele (o conteúdo já tinha
     sido travado em max-width:760px antes, mas a moldura continuava indo
     até a borda da tela). Removida a classe .crm-fullbleed do HTML e
     travada a largura do card em si aqui. */
  /* 2026-08-19g: as duas tentativas anteriores erraram em direções
     opostas — uma grudava a MOLDURA do card na borda real da viewport
     (x=0, "ficou demais pra esquerda"), a outra centralizava o card
     dentro da .screen com margin:0 auto, o que também não bate com o
     Kanban (a .screen em si já nasce deslocada da borda, por causa do
     max-width:min(1800px,92vw) + margin:0 auto — então um card
     centralizado NA .screen não fica alinhado com a 1ª coluna do
     Kanban, que sangra até a viewport via .crm-fullbleed). O pedido
     real (visto no desenho ASCII do Alam) é a borda ESQUERDA do card
     bater exatamente com a borda esquerda da 1ª coluna do Kanban,
     quando empilhados. A 1ª coluna do Kanban começa em: borda real da
     viewport (x=0, técnica .crm-fullbleed) + padding-left do próprio
     .crm-fullbleed (18px aqui no mobile, 40px no breakpoint de
     1100px+ — ver regra ".kanban-board, .crm-fullbleed" mais abaixo).
     Reaplica a mesma técnica de sangria (left:50%/-50vw), mas soma o
     padding-left diretamente na margem, pra moldura do card (não só o
     conteúdo de dentro) nascer exatamente nesse x — sem depender da
     centralização da .screen. */
  #clientesReaisDashWrap{
    position:relative; left:50%; right:auto;
    margin-left:calc(-50vw + 18px); margin-right:0; margin-top:0; margin-bottom:18px;
    width:min(820px, calc(100vw - 36px)); max-width:none;
  }

  /* Card "sem satisfação marcada ainda" do mini-dashboard de Clientes
     (js/clientes-reais.js) — mesmo tratamento visual (borda/fundo/
     padding) do .mini-stat ao lado, pra alinhar certinho com as
     caixinhas de baixo em vez de ficar um texto solto sem moldura. */
  .dash-empty-card{
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:16px; display:flex; align-items:center; justify-content:center;
    text-align:center; color:var(--muted); font-size:12.5px; width:100%;
    min-height:72px; box-sizing:border-box;
  }

  .pill-select{display:flex; flex-wrap:wrap; gap:7px;}
  .pill-opt{
    font-size:12px; font-weight:600; padding:8px 13px; border-radius:999px;
    background:var(--surface); border:1px solid var(--line); color:var(--muted);
    cursor:pointer; transition:all .15s ease;
  }
  .pill-opt.selected{background:var(--orange); border-color:var(--orange); color:#fff; font-weight:700;}
  .pill-opt.tag-opt.selected{background:var(--surface2); border-color:var(--orange); color:var(--orange2);}

  .temp-row{display:flex; gap:8px;}
  .temp-opt{
    flex:1; text-align:center; padding:12px 6px; border-radius:14px;
    border:1px solid var(--line); background:var(--surface);
    cursor:pointer; font-size:12.5px; font-weight:700; color:var(--muted);
  }
  .temp-opt.selected.frio{background:rgba(59,140,255,0.18); border-color:#3b8cff; color:#6fa8ff;}
  .temp-opt.selected.morno{background:rgba(255,200,40,0.18); border-color:#ffc828; color:#ffd24d;}
  .temp-opt.selected.quente{background:rgba(255,75,55,0.18); border-color:#ff4b37; color:#ff7a5c;}

  /* Satisfação do cliente (área Clientes, js/clientes-reais.js) — mesmo
     componente visual do seletor de temperatura (.temp-row/.temp-opt), só
     com 4 opções/cores em vez de 3. */
  .temp-opt.selected.ruim{background:rgba(255,75,55,0.18); border-color:#ff4b37; color:#ff7a5c;}
  .temp-opt.selected.media{background:rgba(255,200,40,0.18); border-color:#ffc828; color:#ffd24d;}
  .temp-opt.selected.boa{background:rgba(46,204,113,0.18); border-color:#2ecc71; color:#4ade80;}
  .temp-opt.selected.excelente{background:rgba(59,140,255,0.18); border-color:#3b8cff; color:#6fa8ff;}
  .badge-temp.ruim{background:rgba(255,75,55,0.18); color:#ff7a5c;}
  .badge-temp.media{background:rgba(255,200,40,0.18); color:#ffd24d;}
  .badge-temp.boa{background:rgba(46,204,113,0.18); color:#4ade80;}
  .badge-temp.excelente{background:rgba(59,140,255,0.18); color:#6fa8ff;}

  .timeline{position:relative; padding-left:22px;}
  .timeline::before{
    content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px;
    background:var(--line);
  }
  .tl-item{position:relative; margin-bottom:16px;}
  .tl-item::before{
    content:""; position:absolute; left:-22px; top:3px;
    width:11px; height:11px; border-radius:50%;
    background:var(--orange); border:2px solid var(--bg);
  }
  .tl-date{font-size:11px; color:var(--orange2); font-weight:700; margin-bottom:2px; display:flex; align-items:center; gap:5px;}
  .tl-tipo-icon{display:inline-flex; opacity:0.85;}
  .tl-tipo-icon svg{display:block;}
  .tl-event{font-size:13.5px; font-weight:600; white-space:pre-wrap;}
  .tl-top-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:2px;}
  .tl-actions{display:flex; gap:6px;}
  .tl-action-btn{
    width:24px; height:24px; border-radius:50%;
    background:var(--surface2); border:1px solid var(--line);
    color:var(--muted); display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0;
  }
  .tl-action-btn:active{ transform:scale(0.9); }
  .tl-action-btn:hover{ color:var(--orange2); border-color:var(--orange); }

  .tl-edit-textarea{
    width:100%; min-height:64px; background:var(--surface2);
    border:1px solid var(--line); border-radius:12px; padding:11px 13px;
    color:var(--white); font-size:13.5px; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    outline:none; resize:vertical; margin-bottom:8px;
  }
  .tl-edit-textarea:focus{ border-color:var(--orange); }
  .tl-edit-actions{ display:flex; justify-content:flex-end; gap:8px; }

  .notes-box{
    width:100%; min-height:110px; background:var(--surface);
    border:1px solid var(--line); border-radius:14px; padding:13px;
    color:var(--white); font-size:13.5px; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    outline:none; resize:vertical;
  }
  .notes-box:focus{border-color:var(--orange);}

  .dash-row{display:flex; gap:8px; margin-bottom:8px;}
  .dash-card{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:18px; margin-bottom:18px;
  }
  .dash-card .dash-bar-wrap{margin-bottom:16px;}
  .dash-card .dash-bar-wrap:last-child{margin-bottom:0;}
  .dash-bar-wrap{flex:1;}
  .dash-bar-top{display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--white); margin-bottom:6px;}
  .dash-bar-top span:last-child{color:var(--orange2); font-weight:800; font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}
  .dash-bar-bg{height:10px; background:var(--surface2); border-radius:99px; overflow:hidden;}
  .dash-bar-fill{height:100%; border-radius:99px; transition:width .4s ease;}

  /* Pizza de "Leads por temperatura" do Dashboard, em SVG puro
     (renderDashboard()/describePieSlicePath() em crm.js, 2026-08-18j) —
     nome de cada categoria com linha guia apontando pra fora da fatia
     (estilo gráfico de planilha), número+porcentagem dentro da própria
     fatia. Sem lista de legenda embaixo (era isso que deixava o card
     "muito alto" na versão anterior em CSS/conic-gradient). */
  .temp-pie-svg{ width:100%; max-width:400px; height:auto; display:block; margin:0 auto; }
  .temp-pie-caption{ text-align:center; font-size:12px; color:var(--muted); margin-top:2px; }
  .donut-slice-text{ font-size:13px; font-weight:800; font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
  .donut-slice-pct{ font-size:9.5px; font-weight:700; opacity:0.85; }
  .donut-outer-label{ font-size:11.5px; font-weight:700; }

  /* Gráfico de torres (colunas) do Dashboard — "Status dos leads"
     (renderDashboard() em crm.js). Altura de cada coluna é normalizada
     pelo MAIOR valor entre os status (não pelo total), pra sempre ter
     pelo menos uma coluna cheia e o gráfico ficar legível mesmo com poucos
     clientes. Rolagem horizontal cobre as 11 etapas do funil sem espremer
     no mobile. */
  .status-chart-wrap{
    display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
    height:170px; overflow-x:auto; padding:4px 2px 6px;
  }
  .status-chart-col{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    flex-shrink:0; width:auto; min-width:46px; height:100%;
    animation: fadeInUp 0.4s ease both;
  }
  .status-chart-count{
    font-size:11.5px; font-weight:800; color:var(--white); margin-bottom:5px;
    font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .status-chart-bar-track{ flex:1; display:flex; align-items:flex-end; width:18px; margin:0 auto; }
  .status-chart-bar{
    width:100%; min-height:3px; border-radius:6px 6px 2px 2px;
    transition:height .5s cubic-bezier(0.34,1.2,0.64,1);
  }
  .status-chart-label{
    font-size:8.5px; color:var(--muted); margin-top:7px; text-align:center;
    line-height:1.25; white-space:nowrap; padding:0 2px;
  }
  .funnel-row{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:11px 14px; margin-bottom:7px; font-size:12.5px; font-weight:600;
  }
  .funnel-row .fn-num{color:var(--orange2); font-weight:800; font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}

  /* ====================== METAS ====================== */
  .goal-card{
    background:linear-gradient(135deg, var(--surface2), var(--surface));
    border:1px solid var(--line); border-radius:var(--radius);
    padding:18px; margin-bottom:18px;
  }
  .goal-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
  .goal-row:last-child{margin-bottom:0;}
  .goal-row .gr-label{font-size:13px; color:var(--muted); font-weight:600;}
  .goal-row .gr-value{font-size:15px; font-weight:800; color:var(--orange2); font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;}
  .goal-period-tag{
    display:inline-block; font-size:10.5px; font-weight:700; padding:3px 10px;
    border-radius:999px; background:rgba(255,94,26,0.15); color:var(--orange2);
    text-transform:uppercase; letter-spacing:0.4px; margin-bottom:12px;
  }

  .cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .cal-nav-btn{
    width:34px; height:34px; border-radius:50%; background:var(--surface);
    border:1px solid var(--line); color:var(--white); font-size:16px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .cal-nav-title{font-size:14px; font-weight:800; text-transform:capitalize;}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:8px;}
  .cal-dow{text-align:center; font-size:10px; color:var(--muted); font-weight:700; padding-bottom:4px;}
  .cal-day{
    aspect-ratio:1; border-radius:10px; display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:600; color:var(--muted); background:var(--surface);
    border:1px solid var(--line); cursor:pointer; position:relative;
  }
  .cal-day.empty{visibility:hidden; pointer-events:none;}
  .cal-day.today{border-color:var(--orange); color:var(--white);}
  .cal-day.has-1{background:rgba(255,94,26,0.18); color:var(--white);}
  .cal-day.has-2{background:rgba(255,94,26,0.40); color:#fff;}
  .cal-day.has-3{background:linear-gradient(135deg, var(--orange), #d4380d); color:#fff;}
  .cal-legend{display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted); justify-content:flex-end;}

  .compare-toggle{display:flex; gap:8px; margin-bottom:12px;}
  .compare-toggle-btn{
    flex:1; padding:10px; border-radius:12px;
    background:var(--surface); border:1px solid var(--line);
    color:var(--muted); font-weight:700; font-size:13px; cursor:pointer;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .compare-toggle-btn.active{ background:var(--orange); color:#fff; border-color:var(--orange); }
  .compare-metric{ margin-bottom:20px; }
  .compare-metric:last-child{ margin-bottom:0; }
  .compare-metric-top{ display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:9px; }
  .compare-bar-row{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
  .compare-bar-row:last-child{ margin-bottom:0; }
  .compare-bar-label{ font-size:10.5px; color:var(--muted); width:56px; flex-shrink:0; }
  .compare-bar-val{ font-size:11px; font-weight:800; color:var(--white); width:26px; text-align:right; flex-shrink:0; font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }

  /* ====================== PERFIL (zona limpa) ====================== */
  .profile-placeholder{
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(135deg, var(--surface2), var(--surface));
    border:1px solid var(--line); border-radius:var(--radius);
    padding:18px; margin-bottom:24px;
  }
  .profile-placeholder-avatar{
    width:52px; height:52px; border-radius:50%; flex-shrink:0;
    background:var(--surface2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color:var(--orange2);
  }
  .profile-placeholder-name{ font-size:15px; font-weight:800; }
  .profile-placeholder-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

  .settings-banner{
    display:flex; align-items:center; gap:14px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:16px;
    cursor:pointer;
  }
  .settings-banner:active{ transform:scale(0.98); }
  .settings-banner-icon{
    width:42px; height:42px; border-radius:13px; flex-shrink:0;
    background:var(--surface2); display:flex; align-items:center; justify-content:center;
    color:var(--orange2);
  }
  .settings-banner-body{ flex:1; min-width:0; }
  .settings-banner-title{ font-size:14px; font-weight:700; }
  .settings-banner-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
  .settings-banner-arrow{ color:var(--muted); flex-shrink:0; }

  /* Configurações de notificações (modal notifSettingsModalOverlay) */
  .notif-set-list{ display:flex; flex-direction:column; gap:12px; margin-top:6px; max-height:60vh; overflow-y:auto; }
  .notif-set-item{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; }
  .notif-set-top{ display:flex; align-items:center; gap:12px; }
  .notif-set-body{ flex:1; min-width:0; }
  .notif-set-title{ font-size:13.5px; font-weight:700; }
  .notif-set-desc{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4; }
  .notif-set-switch{
    width:42px; height:24px; border-radius:999px; flex-shrink:0; position:relative; cursor:pointer;
    background:var(--surface2); border:1px solid var(--line); transition:background .15s, border-color .15s;
  }
  .notif-set-switch.on{ background:var(--orange); border-color:var(--orange); }
  .notif-set-switch-knob{
    position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
    background:#fff; transition:left .15s;
  }
  .notif-set-switch.on .notif-set-switch-knob{ left:20px; }
  .notif-set-freq-row{ display:flex; align-items:center; gap:10px; margin-top:12px; }
  .notif-set-freq-row.disabled{ opacity:0.4; pointer-events:none; }
  .notif-set-freq-label{ font-size:12px; color:var(--muted); flex-shrink:0; }
  .notif-set-freq-row .pill-select{ gap:6px; }
  .notif-set-freq-row .pill-opt{ padding:5px 12px; font-size:12px; }

  .credits-btn{
    display:block; width:100%; text-align:center;
    background:none; border:none; color:var(--muted);
    font-size:11.5px; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    padding:20px 10px 6px; cursor:pointer; line-height:1.5;
  }
  .credits-btn:hover{ color:var(--orange2); }
  .credit-card{
    display:flex; align-items:center; gap:13px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:14px; margin-bottom:12px;
  }
  .credit-card-avatar{
    width:44px; height:44px; border-radius:13px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; color:#fff; font-size:14px;
    font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  /* Popup de novidades por versão (checkNovidadesPopup em app-init.js) */
  .novidades-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; max-height:50vh; overflow-y:auto; }
  .novidade-item{ display:flex; gap:11px; align-items:flex-start; }
  .novidade-dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:6px; }
  .novidade-titulo{ font-weight:700; font-size:13.5px; color:var(--white); margin-bottom:2px; }
  .novidade-desc{ font-size:12.5px; color:var(--muted); line-height:1.5; }

  /* Botão de novidades no topbar (#novidadesTopbarBtn) — fica "chamando
     atenção" (pulsando + bolinha laranja) só enquanto a versão atual
     ainda não foi vista nesse aparelho. updateNovidadesBtnState()
     (app-init.js) adiciona/remove essa classe; some assim que o usuário
     fecha o popup (automático ou clicando no próprio botão). */
  .novidades-btn-animated{ position:relative; animation:novidadesPulse 1.6s ease-in-out infinite; color:var(--orange2); }
  .novidades-btn-animated::after{
    content:""; position:absolute; top:2px; right:2px;
    width:8px; height:8px; border-radius:50%;
    background:var(--orange); border:2px solid var(--bg);
  }
  @keyframes novidadesPulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.16); }
  }
  .credit-card-avatar-axd{ background:linear-gradient(135deg, var(--orange), #d4380d); }
  .credit-card-avatar-amorim{ background:linear-gradient(135deg, #2b2b33, #45454f); }
  .credit-card-body{ flex:1; min-width:0; }
  .credit-card-role{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; font-weight:700; }
  .credit-card-name{ font-size:14.5px; font-weight:800; margin-top:1px; }
  .credit-ig-btn{
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background:var(--surface2); border:1px solid var(--line);
    color:var(--orange2); display:flex; align-items:center; justify-content:center;
    text-decoration:none;
  }
  .credit-ig-btn:active{ transform:scale(0.92); }

  /* ====================== FORMULÁRIO ====================== */
  .fm-lead-card{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:14px; margin-bottom:10px;
  }
  .fm-charts-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-bottom:20px; }
  .fm-chart-item{ padding:16px !important; min-width:0; overflow:hidden; }
  .fm-chart-title-wrap{ display:flex; align-items:center; gap:6px; margin-bottom:14px; min-width:0; }
  .fm-chart-title{
    flex:1; min-width:0; font-size:11.5px; font-weight:700; color:var(--muted);
    letter-spacing:0.2px; line-height:1.4;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .fm-chart-expand-btn{
    flex-shrink:0; width:20px; height:20px; border-radius:50%;
    background:var(--surface2); border:1px solid var(--line); color:var(--muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .fm-chart-expand-btn:hover{ color:var(--orange2); border-color:rgba(255,94,26,0.4); }
  .donut-wrap{ flex-direction:column; align-items:flex-start; }
  .donut-legend{ min-width:unset; width:100%; margin-top:10px; }
  .fm-lead-card.fm-hot{ border-color:var(--orange); background:rgba(255,94,26,0.06); }

  /* Card do último lead com que o usuário interagiu */
  .fm-lead-card{ position:relative; }
  .fm-lead-card.fm-lead-last{
    border-color:#3B82F6;
    box-shadow:0 0 0 1px #3B82F6, 0 8px 24px rgba(59,130,246,0.18);
  }
  .fm-last-tag{
    position:absolute; top:-9px; left:14px;
    display:flex; align-items:center; gap:4px;
    background:#3B82F6; color:#fff; font-size:9.5px; font-weight:800;
    padding:3px 9px; border-radius:99px; letter-spacing:0.2px;
    text-transform:uppercase;
  }

  /* ====================== BUSCAR CNPJ (js/cnpj.js) ====================== */
  .cnpj-result-card{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:18px; animation:fadeInUp 0.35s ease both;
  }
  .cnpj-result-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .cnpj-result-top h3{ font-size:16px; font-weight:800; line-height:1.3; }
  .cnpj-result-status{
    flex-shrink:0; font-size:11px; font-weight:700; color:var(--orange2);
    background:rgba(255,94,26,0.12); border-radius:99px; padding:4px 10px;
    white-space:nowrap;
  }
  .cnpj-result-sub{ font-size:12.5px; color:var(--muted); margin-top:3px; }
  .cnpj-result-grid{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
  .cnpj-result-grid > div{ display:flex; flex-direction:column; gap:2px; }
  .cnpj-result-grid b{ font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
  .cnpj-result-grid span{ font-size:13.5px; color:var(--white); }

  /* Lista de sócios/administradores (2026-08-18n) — mostrada abaixo do
     grid de campos, um por linha, separados por uma linha fina. */
  .cnpj-result-socios{ margin-top:16px; }
  .cnpj-result-socios > b{
    display:block; margin-bottom:8px; font-size:11px; color:var(--muted);
    font-weight:600; text-transform:uppercase; letter-spacing:0.3px;
  }
  .cnpj-socio-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 0; border-top:1px solid var(--line); font-size:13px; color:var(--white);
  }
  .cnpj-socio-item:first-of-type{ border-top:none; padding-top:0; }
  .cnpj-socio-role{ flex-shrink:0; font-size:11.5px; color:var(--muted); text-align:right; }

  /* ====================== MENSAGENS AUTOMÁTICAS + DOCUMENTO FIXADO ====================== */
  .msg-tpl-item{
    display:flex; align-items:flex-start; gap:12px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:13px 14px; margin-bottom:10px;
  }
  .msg-tpl-body{ flex:1; min-width:0; }
  .msg-tpl-name{ font-size:13px; font-weight:700; margin-bottom:3px; }
  .msg-tpl-text{ font-size:11.5px; color:#c2c2cc; line-height:1.45; white-space:pre-wrap; }
  .msg-tpl-actions{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
  .msg-tpl-action-btn{
    width:28px; height:28px; border-radius:50%;
    background:var(--surface2); border:1px solid var(--line); color:var(--muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .msg-tpl-action-btn:hover{ color:var(--orange2); border-color:rgba(255,94,26,0.4); }
  .msg-tpl-action-btn.danger:hover{ color:#ff7a5c; border-color:#ff4b37; }

  .wa-choice-option{
    width:100%; display:flex; align-items:flex-start; gap:13px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:14px; margin-bottom:8px;
    cursor:pointer; text-align:left; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .wa-choice-option:hover{ border-color:rgba(37,211,102,0.4); }
  .wa-choice-icon{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:rgba(37,211,102,0.12); color:#25d366;
    display:flex; align-items:center; justify-content:center;
  }
  .wa-choice-body{ flex:1; min-width:0; }
  .wa-choice-title{ font-size:13.5px; font-weight:700; color:var(--white); }
  .wa-choice-sub{
    font-size:11.5px; color:#c2c2cc; margin-top:2px; line-height:1.4;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .wa-choice-sub.expanded{ white-space:pre-wrap; overflow:visible; text-overflow:unset; }
  .wa-choice-expand-btn{
    flex-shrink:0; width:26px; height:26px; border-radius:50%;
    background:var(--surface2); border:1px solid var(--line); color:var(--muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    margin-top:2px; transition:transform .2s ease;
  }
  .wa-choice-expand-btn:hover{ color:var(--orange2); border-color:rgba(255,94,26,0.4); }
  .wa-choice-expand-btn.expanded{ transform:rotate(180deg); }
  .wa-manage-link{ color:var(--orange2); font-weight:700; text-decoration:none; }
  .wa-manage-link-block{ display:block; text-align:center; padding:12px; font-size:12.5px; }

  /* ====================== MENSAGENS (área central) ======================
     screen-mensagens: onde mensagens são criadas/editadas (Clientes e
     Formulário só escolhem/enviam, não criam mais nada nas próprias telas
     — ver seção 5/4B do CONHECIMENTO). */
  .msg-tpl-top{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
  .msg-tpl-top .msg-tpl-name{ margin-bottom:0; }
  .msg-tpl-category{
    font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px;
    background:rgba(255,94,26,0.12); color:var(--orange2); flex-shrink:0;
    text-transform:uppercase; letter-spacing:0.3px;
  }

  /* Seletor de categoria (Ambos/Só Clientes/Só Formulário) — mesmo padrão
     visual do seletor de temperatura (.temp-row/.temp-opt), só que sem
     cor fixa por opção (usa a cor laranja padrão do app ao selecionar). */
  .msgcat-row{ display:flex; gap:8px; }
  .msgcat-opt{
    flex:1; text-align:center; padding:11px 6px; border-radius:14px;
    border:1px solid var(--line); background:var(--surface);
    cursor:pointer; font-size:12px; font-weight:700; color:var(--muted);
  }
  .msgcat-opt.selected{ background:rgba(255,94,26,0.15); border-color:var(--orange); color:var(--orange2); }

  /* Chips de referência dos códigos {nome}/{negocio} — ficam logo abaixo
     do textarea da mensagem, tocar já insere o código no cursor. */
  .msg-placeholder-row{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px;
  }
  .msg-placeholder-hint{ font-size:11.5px; color:var(--muted); }
  .msg-placeholder-chip{
    background:var(--surface2); border:1px solid var(--line); color:var(--orange2);
    border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:700;
    cursor:pointer; font-family:'SFMono-Regular',Consolas,monospace;
  }
  .msg-placeholder-chip:hover{ border-color:rgba(255,94,26,0.4); }
  .msg-placeholder-chip:active{ transform:scale(0.94); }

  /* Linha de assistência da IA — input de descrição + botão de gerar,
     lado a lado no desktop e empilhados no mobile (ver breakpoint). */
  .ai-assist-row{
    display:flex; flex-direction:column; gap:8px; margin-bottom:18px;
    background:rgba(122,91,255,0.06); border:1px solid rgba(122,91,255,0.25);
    border-radius:14px; padding:12px;
  }
  .ai-assist-row input{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:11px 13px; color:var(--white); font-size:13px; outline:none;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .ai-assist-row input:focus{ border-color:#7a5bff; }
  .ai-assist-row input::placeholder{ color:var(--muted); }
  .ai-assist-row .btn.ghost{
    border-color:rgba(122,91,255,0.4); color:#b3a3ff; justify-content:center;
  }
  .ai-assist-row .btn.ghost:hover{ border-color:#7a5bff; }

  /* ====================== MODAL DE CONFIRMAÇÃO CUSTOMIZADO ====================== */
  .confirm-sheet{ text-align:center; max-width:380px; }

  /* Modal de explicação dos status do Kanban de Clientes
     (clienteStatusInfoModalOverlay) — em telas estreitas, `width:100%`
     do .modal-sheet base "come" a margem lateral quando a tela já é mais
     estreita que o max-width:380px do .confirm-sheet (o cap só ajuda em
     telas MAIORES que 380px — numa tela de 375px, por ex, 100% já é
     menor que 380px, então a margem simplesmente não existe e o modal
     cola nas bordas). Corrigido garantindo pelo menos 16px de respiro de
     cada lado, em qualquer tamanho de tela. */
  .status-info-sheet{ width:calc(100% - 32px); max-width:380px; }
  .confirm-icon{
    width:52px; height:52px; border-radius:50%; margin:4px auto 16px;
    background:rgba(245,158,11,0.12); color:#f59e0b;
    display:flex; align-items:center; justify-content:center;
  }
  .confirm-icon.danger{ background:rgba(239,68,68,0.12); color:#ef4444; }
  .confirm-sheet h2{ margin-bottom:8px; }
  .confirm-sheet .lead{ color:var(--muted); font-size:13.5px; }
  .confirm-modal-input{
    width:100%; background:var(--surface2); border:1px solid var(--line);
    border-radius:12px; padding:11px 13px; color:var(--white); font-size:14px;
    outline:none; margin-bottom:16px; text-align:center; letter-spacing:2px;
  }
  .confirm-modal-input:focus{ border-color:var(--orange); }

  .fm-lead-header{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .fm-lead-avatar{
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, var(--orange), #d4380d);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; color:#fff; font-size:14px;
    font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .fm-lead-info{ flex:1; min-width:0; }
  .fm-lead-name{ font-size:14px; font-weight:700; }
  .fm-lead-date{font-size:10.5px; color:var(--orange2); font-weight:700; margin-top:1px;}
  .fm-lead-negocio{font-size:10.5px; color:var(--muted); margin-top:1px;}
  .fm-lead-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
  .fm-badge{
    font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px;
    background:var(--surface2); color:var(--muted); border:1px solid var(--line);
  }
  .fm-badge.hot{ background:rgba(255,94,26,0.18); color:var(--orange2); border-color:var(--orange); }
  .fm-lead-actions{ display:flex; gap:8px; margin-bottom:8px; }
  .fm-lead-actions:last-child{ margin-bottom:0; }
  .fm-lead-actions-secondary{ margin-top:0; flex-wrap:wrap; gap:6px; }
  .fm-lead-actions-secondary .fm-advance-btn{ flex:1; justify-content:center; }
  .fm-action-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:9px; border-radius:12px;
    background:var(--surface2); border:1px solid var(--line);
    color:var(--white); font-size:12.5px; font-weight:600;
    text-decoration:none; cursor:pointer; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    -webkit-appearance:none; appearance:none; margin:0;
  }
  .fm-action-btn:active{ transform:scale(0.96); }
  .fm-action-btn.wa{ background:rgba(37,211,102,0.1); border-color:rgba(37,211,102,0.3); color:#25d366; }
  .fm-action-btn.em{ background:rgba(255,94,26,0.1); border-color:rgba(255,94,26,0.3); color:var(--orange2); }

  .fm-filter-wrap{ margin-bottom:14px; display:flex; flex-direction:column; gap:10px; }
  .fm-tabs{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
  .fm-tab{
    flex-shrink:0; padding:8px 13px; border-radius:999px;
    background:var(--surface); border:1px solid var(--line);
    color:var(--muted); font-size:12.5px; font-weight:700;
    cursor:pointer; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; display:flex; align-items:center; gap:6px;
  }
  .fm-tab.active{ background:var(--orange); color:#fff; border-color:var(--orange); }
  .fm-tab.fm-tab-hot{ border-color:rgba(239,68,68,0.4); color:#fca5a5; }
  .fm-tab.fm-tab-hot.active{ background:#EF4444; border-color:#EF4444; color:#fff; }
  .fm-tab.fm-tab-warm{ border-color:rgba(245,158,11,0.4); color:#fcd34d; }
  .fm-tab.fm-tab-warm.active{ background:#F59E0B; border-color:#F59E0B; color:#fff; }
  .fm-tab-count{
    background:rgba(255,255,255,0.2); color:#fff;
    font-size:10.5px; padding:1px 7px; border-radius:99px; font-weight:800;
  }
  .fm-tab:not(.active) .fm-tab-count{ background:var(--surface2); color:var(--muted); }

  .fm-status-badge{
    font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px;
    display:inline-flex; align-items:center; gap:4px;
  }
  .fm-status-badge.novo{ background:rgba(156,163,175,0.18); color:#9ca3af; }
  .fm-status-badge.respondido{ background:rgba(59,130,246,0.18); color:#60a5fa; }
  .fm-status-badge.avaliado{ background:rgba(34,197,94,0.18); color:#4ade80; }

  .fm-advance-btn{
    display:inline-flex; align-items:center; gap:5px;
    padding:7px 11px; border-radius:10px; font-size:11.5px; font-weight:700;
    cursor:pointer; border:1px solid; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .fm-advance-btn.to-respondido{ background:rgba(59,130,246,0.1); border-color:rgba(59,130,246,0.3); color:#60a5fa; }
  .fm-advance-btn.to-avaliado{ background:rgba(34,197,94,0.1); border-color:rgba(34,197,94,0.3); color:#4ade80; }
  .fm-advance-btn.undo{ background:var(--surface2); border-color:var(--line); color:var(--muted); font-size:10.5px; }

  /* Lead "Talvez" — destaque amarelo âmbar */
  .fm-lead-card.fm-maybe{
    border-color:rgba(245,158,11,0.5);
    background:rgba(245,158,11,0.05);
  }
  .fm-badge.maybe{
    background:rgba(245,158,11,0.18); color:#fbbf24;
    border:1px solid rgba(245,158,11,0.3);
  }
  .fm-badge.hot{
    background:rgba(255,94,26,0.18); color:var(--orange2);
    border:1px solid rgba(255,94,26,0.3);
  }
  /* Botão "Avaliar e abrir WhatsApp" */
  .fm-advance-btn.avaliar-wa{
    background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.35);
    color:#4ade80; font-size:11.5px;
  }

  .donut-wrap{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
  .donut-css-wrap{ position:relative; flex-shrink:0; }
  .donut-css{
    width:160px; height:160px; border-radius:50%;
    position:relative;
    animation: donutIn 0.6s cubic-bezier(0.34,1.2,0.64,1) both;
  }
  .donut-hole{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:96px; height:96px; border-radius:50%;
    background:var(--surface);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow: 0 0 0 1px var(--line);
  }
  .donut-total{
    font-size:24px; font-weight:800; line-height:1;
    font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .donut-sub-label{
    font-size:9px; color:var(--muted); text-transform:uppercase;
    letter-spacing:0.4px; margin-top:5px; text-align:center;
    padding:0 8px; line-height:1.3;
  }
  .donut-legend{ flex:1; min-width:160px; }
  .donut-legend-item{
    display:flex; align-items:flex-start; gap:9px; margin-bottom:11px;
    animation: fadeInUp 0.35s ease both;
  }
  .donut-legend-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; margin-top:3px; }
  .donut-legend-label{ flex:1; color:var(--white); font-size:12.5px; min-width:0; line-height:1.4; word-break:break-word; }
  .donut-legend-val{
    display:flex; align-items:baseline; justify-content:flex-end; gap:4px;
    font-weight:800; font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
    white-space:nowrap; font-size:12.5px;
    min-width:52px; flex-shrink:0; text-align:right;
  }
  .donut-legend-pct{ font-size:10.5px; font-weight:700; opacity:0.75; }
  @keyframes donutIn{
    from{ opacity:0; transform:scale(0.6) rotate(-120deg); }
    to{ opacity:1; transform:scale(1) rotate(0deg); }
  }
  @keyframes fadeInUp{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .form-list-card{
    display:flex; align-items:center; gap:14px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:16px; margin-bottom:12px;
    cursor:pointer;
  }
  .form-list-card:active{ transform:scale(0.98); }
  .form-list-icon{
    width:46px; height:46px; border-radius:13px; flex-shrink:0;
    background:linear-gradient(135deg, var(--orange), #d4380d);
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .form-list-body{ flex:1; min-width:0; }
  .form-list-name{ font-size:13.5px; font-weight:700; line-height:1.35; margin-bottom:3px; }
  .form-list-meta{ font-size:11.5px; color:var(--muted); }
  .form-list-count{ font-size:12px; font-weight:800; color:var(--orange2); font-family:'Plus Jakarta Sans','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; white-space:nowrap; }

  .form-list-delete{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    background:var(--surface2); border:1px solid var(--line);
    color:var(--muted); display:flex; align-items:center; justify-content:center;
    cursor:pointer; margin-left:6px;
  }
  .form-list-delete:hover{ color:#ff7a5c; border-color:#ff4b37; }
  .form-list-delete:active{ transform:scale(0.9); }

  .form-warning{
    display:flex; gap:10px; align-items:flex-start;
    background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.35);
    border-radius:14px; padding:13px 14px; margin-bottom:18px;
    color:#fcd34d; font-size:12.5px; line-height:1.5;
  }
  .form-warning b{ color:#fff; }
  .cal-legend .leg-box{width:10px; height:10px; border-radius:3px;}

  .day-form-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;}
  .day-form-row label{font-size:13px; font-weight:600; color:var(--white);}
  .day-form-row input{
    width:80px; background:var(--surface); border:1px solid var(--line);
    border-radius:10px; padding:9px 12px; color:var(--white); font-size:14px;
    text-align:center; font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; outline:none;
  }
  .day-form-row input:focus{border-color:var(--orange);}

  /* ====================== SPLASH SCREEN ====================== */
  #splashScreen{
    position:fixed; inset:0; z-index:9999;
    background:radial-gradient(circle at 50% 30%, #1a1a1f 0%, #0a0a0c 70%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition:opacity .5s ease, visibility .5s ease;
  }
  #splashScreen.fade-out{ opacity:0; visibility:hidden; pointer-events:none; }
  .splash-logo-wrap{
    width:150px; height:150px; border-radius:50%;
    box-shadow:0 0 0 4px rgba(255,94,26,0.25), 0 0 50px rgba(255,94,26,0.35);
    margin-bottom:26px;
    animation:splashPulse 2s ease-in-out infinite;
    overflow:hidden;
  }
  .splash-logo-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
  @keyframes splashPulse{
    0%, 100%{ box-shadow:0 0 0 4px rgba(255,94,26,0.25), 0 0 40px rgba(255,94,26,0.3); transform:scale(1); }
    50%{ box-shadow:0 0 0 8px rgba(255,94,26,0.15), 0 0 65px rgba(255,94,26,0.5); transform:scale(1.03); }
  }
  .splash-name{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:26px; font-weight:800; letter-spacing:0.5px;
    margin-bottom:6px;
  }
  .splash-name .sn-white{ color:#f5f5f7; }
  .splash-name .sn-orange{ color:var(--orange); }
  .splash-sub{
    font-size:12.5px; color:var(--muted); letter-spacing:1.5px;
    text-transform:uppercase; margin-bottom:34px;
  }
  .splash-dots{ display:flex; gap:7px; }
  .splash-dots span{
    width:8px; height:8px; border-radius:50%;
    background:var(--orange);
    animation:splashDot 1.2s ease-in-out infinite;
  }
  .splash-dots span:nth-child(2){ animation-delay:.15s; }
  .splash-dots span:nth-child(3){ animation-delay:.3s; }
  @keyframes splashDot{
    0%, 80%, 100%{ opacity:0.25; transform:scale(0.8); }
    40%{ opacity:1; transform:scale(1.15); }
  }
  .splash-credit{
    position:absolute; bottom:28px; left:0; right:0;
    text-align:center; font-size:11px; color:var(--muted);
    letter-spacing:0.4px;
  }

  .toast{
    position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--green); color:#fff; font-weight:700; font-size:13px;
    padding:10px 20px; border-radius:999px; opacity:0;
    transition:all .25s ease; z-index:200; pointer-events:none;
    box-shadow:0 8px 24px rgba(0,0,0,0.3);
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  /* ====================== ADAPTAÇÃO PARA DESKTOP/PC ======================
     Em telas largas: a Home (hub com a grade de seções) e listas/dashboards
     usam a largura toda disponível. Telas de detalhe, formulário e leitura
     (mensagens, táticas, objeções etc) ficam numa coluna central confortável,
     como é padrão em apps desktop — em vez de esticar texto borda a borda.
     Os modais passam a ser caixas de diálogo centralizadas na tela. */
  @media (min-width: 760px){
    html, body{ background:#050506; }
    #app-frame{ background:var(--bg); min-height:100vh; }

    .topbar{ padding:18px 40px 14px; }
    /* max-width:min(Npx, Xvw) em vez de um número fixo — cresce junto com
       a janela (fluido) até o teto, em vez de travar num valor e deixar
       vazio nas laterais em monitor largo (ver CONHECIMENTO, "Layout
       fluido"). Vale pra todo max-width de tela/topbar/bottomnav daqui
       pra frente neste arquivo, não só essas duas linhas. */
    .store-row{ max-width:min(1400px, 92vw); margin:0 auto; }
    .tabs{ max-width:min(1400px, 92vw); margin:0 auto; padding:14px 0 0; }

    /* Largura padrão confortável pra leitura (telas de detalhe/forms/texto) */
    .screen{ max-width:760px; padding:28px 40px 48px; }

    /* Home e telas com listas/grade usam a largura cheia do hub */
    #screen-home, #screen-clientes, #screen-tracker,
    #screen-formulario, #screen-formulario-detalhe,
    #screen-metas, #screen-cliente-form, #screen-cliente-detalhe,
    #screen-treinamento, #screen-mensagens, #screen-cnpj-lookup,
    #screen-opencnpj-lookup, #screen-clientes-reais, #screen-cliente-real-form,
    #screen-cliente-real-detalhe, #screen-importar-leads{ max-width:min(1400px, 92vw); }

    /* Linha da IA no formulário de mensagem: lado a lado no desktop
       (empilhado só faz sentido na tela estreita do celular). */
    .ai-assist-row{ flex-direction:row; align-items:center; }
    .ai-assist-row input{ flex:1; }
    .ai-assist-row .btn.ghost{ flex-shrink:0; }

    /* Formulário de cliente: 2 colunas lado a lado (Dados pessoais/Contato
       à esquerda, Redes sociais/Empresa à direita) — as divs .form-two-col
       e .form-col já existiam no HTML mas nunca tinham CSS, então sempre
       caíam numa coluna só, mesmo em telas largas. */
    .form-two-col{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0 28px; }

    /* Detalhe de cliente: coluna principal (status, temperatura, tags,
       histórico, notas) à esquerda + coluna fixa (avatar, contatos rápidos,
       mini-stats) à direita (2026-08-18b: invertido a pedido de Alam — a
       ordem no HTML continua igual, .detalhe-col-fixa primeiro; quem troca
       o lado visual é `order`, então não precisou mexer no JS que preenche
       os dois lados). Mesma situação original: classes existiam sem CSS. */
    .detalhe-two-col{ display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
    .detalhe-col-fixa{ order:2; }
    .detalhe-col-principal{ order:1; }

    /* Quadro de clientes: no desktop as colunas ficam um pouco mais largas
       (cabe mais texto) e o respiro nas bordas acompanha o padding maior
       do .screen (o full-bleed em si — left:50%/-50vw — já é o mesmo em
       qualquer tamanho de tela, só o padding interno muda aqui). O
       .crm-fullbleed do título/barra de busca acompanha o mesmo padding,
       senão os dois desalinham de novo no desktop. */
    .kanban-board, .crm-fullbleed{ padding-left:40px; padding-right:40px; }
    .kanban-col{ flex-basis:270px; width:270px; max-height:min(70vh, 640px); }

    /* Acompanha a mudança de padding acima (18px -> 40px): a moldura do
       card do mini-dashboard de Clientes precisa continuar batendo com
       a borda esquerda da 1ª coluna do Kanban também nesse breakpoint. */
    #clientesReaisDashWrap{
      margin-left:calc(-50vw + 40px);
      width:min(820px, calc(100vw - 80px));
    }

    /* Metas: card de metas e card de comparação lado a lado no topo (o
       rótulo "Comparação com período anterior" e o toggle Semana/Mês ficam
       DENTRO do dash-card, senão ele nasce mais baixo que o card de Metas
       ao lado e os dois ficam desalinhados no topo). Funil e calendário
       ficam full-width abaixo, fora do grid. */
    .metas-two-col{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0 24px; align-items:stretch; margin-bottom:6px; }
    /* stretch faz os 2 cards terem a mesma altura (o mais baixo esticado
       até igualar o mais alto) — sem isso ficavam com alturas diferentes,
       cada um do tamanho do próprio conteúdo. */
    .metas-two-col > .metas-col{ display:flex; flex-direction:column; }
    .metas-two-col .goal-card{ flex:1; display:flex; flex-direction:column; }
    .metas-two-col .goal-card .btn{ margin-top:auto; }
    .metas-two-col > .metas-col > .dash-card{ flex:1; }

    .funnel-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:18px; }
    .funnel-grid .funnel-row{
      flex-direction:column; align-items:flex-start; gap:8px;
      margin-bottom:0; padding:16px;
    }
    .funnel-grid .funnel-row .fn-num{ font-size:24px; }

    /* Calendário: em telas largas, full-width ficava gigante e feio (célula
       de dia enorme). Volta a ser um cartão pequeno e centralizado, do
       jeito que já era visualmente, só que agora numa tela mais larga. */
    .cal-card{ max-width:420px; margin:0 auto; }
    /* A dica "Toque num dia..." ficava largura total (esquerda), enquanto
       o calendário acima encolheu e centralizou — os dois desalinhados
       davam a impressão da frase "batendo" torto no card. Alinha a dica
       com a mesma largura/centro do card do calendário. */
    .cal-card + .section-sub{ max-width:420px; margin:10px auto 0; text-align:center; }

    /* Formulário: mini-stats em 4 colunas iguais, gráficos em grade 2x2 + lista ao lado */
    /* Gráficos em 2 colunas no breakpoint 760px */
    .fm-charts-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
    /* No desktop cada donut fica vertical (SVG em cima, legenda abaixo) pra caber nas colunas */
    .fm-chart-item .donut-wrap{ flex-direction:column; align-items:center; }
    .fm-chart-item .donut-legend{ width:100%; margin-top:12px; }
    /* Leads em 2 colunas */
    #fmList{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-content:start; }
    #fmList .fm-lead-card{ margin-bottom:0; }

    .hero-card{ padding:28px 32px; }
    .section-grid{ gap:14px; }
    .sec-card{ padding:20px; }

    .crm-search{ max-width:560px; }
    .clientes-top-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
    .clientes-top-row .crm-search{ flex:1; min-width:280px; margin-bottom:0; }
    .crm-sort-wrap{ margin-top:0; min-width:240px; }

    /* Bottom nav passa a ocupar a largura útil do hub, não a tela toda */
    .bottomnav{
      left:50%; right:auto; transform:translateX(-50%);
      width:100%; max-width:min(1400px, 92vw);
      justify-content:flex-start; gap:48px;
      padding:12px 40px 16px;
      border-radius:0;
    }
    .fab{ left:auto; right:max(30px, calc(50vw - 670px)); }

    /* Modais como diálogo centralizado, não bottom-sheet */
    .modal-overlay{ align-items:center; padding:24px; }
    .modal-sheet{
      width:100%; max-width:640px; max-height:85vh;
      border-radius:24px; border-top:none; border:1px solid var(--line);
      box-shadow:0 30px 90px rgba(0,0,0,0.6);
      transform:translateY(16px) scale(0.98);
    }
    .modal-overlay.show .modal-sheet{ transform:translateY(0) scale(1); }
    .modal-handle{ display:none; }
  }

  @media (min-width: 1100px){
    .store-row{ max-width:min(1800px, 92vw); }
    .tabs{ max-width:min(1800px, 92vw); }
    #screen-home, #screen-clientes, #screen-tracker,
    #screen-formulario, #screen-formulario-detalhe,
    #screen-metas, #screen-cliente-form, #screen-cliente-detalhe,
    #screen-treinamento, #screen-mensagens, #screen-cnpj-lookup,
    #screen-opencnpj-lookup, #screen-clientes-reais, #screen-cliente-real-form,
    #screen-cliente-real-detalhe, #screen-importar-leads{ max-width:min(1800px, 92vw); }
    .detalhe-two-col{ grid-template-columns:1fr 340px; }
    .bottomnav{ max-width:min(1800px, 92vw); }
    .fab{ right:max(30px, calc(50vw - 860px)); }

    /* 4 gráficos em linha e leads em 3 colunas em telas grandes */
    .fm-charts-row{ grid-template-columns:repeat(4,minmax(0,1fr)); }
    #fmList{ grid-template-columns:repeat(3,1fr); }

  }

  /* ====================== TELAS DE CONTEÚDO/FORMAÇÃO EM GRID 2 COLUNAS (desktop) ======================
     Posicionamento, Rapport, Táticas, Objeções, BUNCH, SCP e Escalada são telas de
     leitura com várias fichas (tactic-card/msg-card/acc-item/check-item/cadence-card)
     empilhadas. No mobile isso é uma coluna só, o que é certo. Em telas largas, ficar
     tudo numa coluna de 760px deixa metade da tela vazia (visual "só pra celular").
     Aqui a tela vira um grid de 2 colunas: elementos estruturais (título, hero-card,
     section-label/sub) ocupam a largura toda, e as fichas repetidas ficam lado a lado. */
  @media (min-width: 900px){
    /* Objeções fica de fora do grid: os acc-item expandem/recolhem (accordion),
       e num grid de 2 colunas isso estica a linha toda e sobra vazio no vizinho.
       Só ganha uma coluna mais larga pra não ficar apertado. */
    #screen-objecoes{ max-width:min(1200px, 90vw); }

    #screen-posicionamento, #screen-rapport, #screen-taticas,
    #screen-bunch, #screen-scp, #screen-escalada{
      max-width:min(1600px, 92vw);
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:14px;
      align-content:start;
    }
    #screen-posicionamento > *, #screen-rapport > *, #screen-taticas > *,
    #screen-bunch > *, #screen-scp > *, #screen-escalada > *{
      grid-column:1 / -1;
    }
    #screen-posicionamento > .check-item, #screen-posicionamento > .tactic-card,
    #screen-rapport > .msg-card, #screen-rapport > .cadence-card,
    #screen-taticas > .tactic-card, #screen-taticas > .msg-card,
    #screen-bunch > .tactic-card, #screen-bunch > .msg-card,
    #screen-scp > .tactic-card, #screen-scp > .msg-card,
    #screen-escalada > .msg-card, #screen-escalada > .tactic-card{
      grid-column:span 1;
      margin-bottom:0;
    }
  }

  @media (min-width: 1400px){
    /* Em telas bem largas (>1400px), sobe pra 3 colunas nas telas de
       fichas curtas (tactic-card), pra ocupar a largura toda lado a lado
       em vez de esticar só 2 colunas gigantes com muita margem interna. */
    #screen-posicionamento, #screen-taticas, #screen-bunch, #screen-scp,
    #screen-escalada{
      max-width:min(1900px, 92vw);
      grid-template-columns:repeat(3, 1fr);
    }
    #screen-rapport{ max-width:min(1700px, 92vw); }
    #screen-objecoes{ max-width:min(1300px, 90vw); }
  }

  /* ====================== FIREBASE AUTH ====================== */
  .profile-logged-card{
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(135deg, rgba(255,94,26,0.12), var(--surface));
    border:1px solid rgba(255,94,26,0.3); border-radius:var(--radius);
    padding:18px; margin-bottom:24px; position:relative;
  }
  .profile-logged-avatar{ position:relative; flex-shrink:0; }
  .profile-logged-avatar img{ border:2px solid rgba(255,94,26,0.4); }
  .profile-logged-avatar > svg{ width:52px; height:52px; padding:10px; border-radius:50%; background:var(--surface2); }
  .profile-sync-dot{
    position:absolute; bottom:0; right:0;
    width:12px; height:12px; border-radius:50%;
    background:#22c55e; border:2px solid var(--bg);
  }
  .profile-logged-info{ flex:1; min-width:0; }
  .profile-logged-name{ font-size:15px; font-weight:800; }
  .profile-logged-email{ font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .profile-logged-sync{ display:flex; align-items:center; gap:4px; font-size:10.5px; color:#4ade80; margin-top:5px; }
  .profile-logout-btn{ padding:8px 14px !important; font-size:12px !important; flex-shrink:0; }

  .google-btn{
    width:100%; justify-content:center; gap:10px;
    background:var(--surface); border:1px solid var(--line);
    color:var(--white); padding:13px; border-radius:14px;
    font-size:14.5px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; margin-bottom:16px;
    font-family:'Inter','Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  }
  .google-btn:active{ transform:scale(0.98); }
  .google-btn:hover{ border-color:rgba(255,94,26,0.4); }

  .profile-visitante-card{
    display:flex; align-items:center; gap:14px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:18px; margin-bottom:16px;
  }

  .topbar-user-dot{
    width:8px; height:8px; border-radius:50%;
    background:#22c55e; position:absolute; bottom:-1px; right:-1px;
    border:2px solid var(--bg);
  }
  .notif-btn{ position:relative; }