* { box-sizing:border-box; }
  :root {
    /* color-scheme diz ao navegador que controles nativos (textarea, scrollbar,
       etc. que a gente eventualmente esquece de estilizar por completo) devem
       seguir claro/escuro também — rede de segurança contra "texto claro em
       cima de fundo branco nativo", que já aconteceu aqui uma vez. */
    color-scheme: light dark;
    --ink:#241f3d; --ink-soft:#6a6483; --paper:#fbf8f2; --paper-raised:#fff; --line:#e7e1d4;
    --blue:#2f5bff; --blue-deep:#1730a8; --blue-soft:#e5ebff;
    --coral:#ff6a4d; --coral-deep:#c73f28; --coral-soft:#ffe6de;
    --green:#17a672; --green-deep:#0d6b48; --green-soft:#dff5ea;
    --red:#e5443a; --red-deep:#a8281f; --red-soft:#fde3e0;
    --yellow:#c98a00; --yellow-deep:#7a5600; --yellow-soft:#fff3d6;
    --gray-soft:#eeece8; --gray-deep:#5c5770;
    --skel-a:#eeece8; --skel-b:#e2ddd0;
    --ink-fixed:#241f3d; --blue-deep-fixed:#1730a8; /* superfícies que ficam sempre escuras, claro ou escuro */
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --ink:#eeece8; --ink-soft:#a79fc4; --paper:#171526; --paper-raised:#211f30; --line:#37324c;
      --gray-soft:#2a2738; --gray-deep:#c9c4dc;
      --blue-deep:#9db1ff; --blue-soft:#1c2456;
      --coral-deep:#ff9d81; --coral-soft:#3d271e;
      --green-deep:#4fe3a4; --green-soft:#0f3527;
      --red-deep:#ff8b80; --red-soft:#3b1e1c;
      --yellow-deep:#ffcf6b; --yellow-soft:#3a2d10;
      --skel-a:#2a2738; --skel-b:#3a3650;
    }
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ink:#eeece8; --ink-soft:#a79fc4; --paper:#171526; --paper-raised:#211f30; --line:#37324c;
    --gray-soft:#2a2738; --gray-deep:#c9c4dc;
    --blue-deep:#9db1ff; --blue-soft:#1c2456;
    --coral-deep:#ff9d81; --coral-soft:#3d271e;
    --green-deep:#4fe3a4; --green-soft:#0f3527;
    --red-deep:#ff8b80; --red-soft:#3b1e1c;
    --yellow-deep:#ffcf6b; --yellow-soft:#3a2d10;
    --skel-a:#2a2738; --skel-b:#3a3650;
  }
  html, body { height:100%; }
  body { margin:0; background:var(--paper); font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); font-size:14px; overscroll-behavior-y:contain; }
  .mono { font-family:'JetBrains Mono',monospace; }
  .display { font-family:'Fredoka',sans-serif; font-weight:600; }
  a, button { color:inherit; text-decoration:none; font-family:inherit; }
  button { cursor:pointer; }
  svg { display:block; }
  input, textarea, select { font-family:inherit; }

  /* ================= app shell ================= */
  .shell { display:grid; grid-template-columns: 68px 1fr; height:100vh; }
  .content { min-width:0; height:100vh; overflow:hidden; position:relative; }
  .view { display:none; height:100%; }
  .view.active { display:grid; }
  .view-panel.active { display:flex; flex-direction:column; }
  .view.active.view-enter { animation:viewIn .38s cubic-bezier(.2,.85,.3,1); }
  @keyframes viewIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .view.active.view-enter, .msg, .modal-overlay, .modal-card { animation:none !important; } }

  /* rail */
  .rail { background:var(--ink-fixed); display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:6px; }
  .rail .logo-dot { width:34px; height:34px; border-radius:10px; background:var(--blue); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Fredoka',sans-serif; font-weight:700; font-size:15px; margin-bottom:18px; border:none; }
  .rail button { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.55); background:none; border:none; transition:background .18s ease, color .18s ease, transform .15s ease; }
  .rail button:active { transform:scale(.9); }
  .rail-search { margin-bottom:12px; }
  .rail-search:hover { color:#fff; }
  .rail button.active { background:rgba(255,255,255,0.12); color:#fff; }
  .rail button:hover { color:#fff; }

  /* ============ MAIL view (sidebar + list + reading) ============ */
  #view-mail.active { grid-template-columns: 232px 1fr; }

  /* mail-body: list + reading animate between "browsing" and "reading" via flex-grow/flex-basis
     (both are numeric/length values so browsers can transition them smoothly) */
  .mail-body { display:flex; min-width:0; min-height:0; height:100%; }
  .mail-body .list-col { flex-grow:1; flex-shrink:1; flex-basis:0%; min-width:280px; transition: flex-grow .5s cubic-bezier(.22,.9,.32,1), flex-basis .5s cubic-bezier(.22,.9,.32,1); }
  .mail-body .reading { flex-grow:0; flex-shrink:0; flex-basis:0px; opacity:0; pointer-events:none; transition: flex-grow .5s cubic-bezier(.22,.9,.32,1), flex-basis .5s cubic-bezier(.22,.9,.32,1), opacity .3s ease; }
  .mail-body.reading-open .list-col { flex-grow:0; flex-basis:340px; min-width:0; }
  .mail-body.reading-open .reading { flex-grow:1; flex-basis:0%; opacity:1; pointer-events:auto; }
  @media (max-width: 1480px) and (min-width:1181px) { .mail-body.reading-open .list-col { flex-basis:300px; } }

  .sidebar { background:var(--paper-raised); border-right:1px solid var(--line); padding:20px 14px 14px; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
  /* Uma rolagem só pra lateral inteira (nada de caixinhas com rolagem dentro): pastas, categorias, Lixeira/Spam e, no fim da lista, armazenamento/instalar/tema. */
  .side-scroll { flex:1; min-height:0; overflow-y:auto; margin:0 -14px; padding:0 14px 6px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; overscroll-behavior:contain; }
  .side-scroll::-webkit-scrollbar { width:6px; }
  .side-scroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:6px; }
  .side-foot { padding:10px 0 4px; }
  .side-foot .storage { margin-top:10px; }
  .sidebar h1 { font-size:15px; font-weight:800; margin:0 8px 16px; }
  /* Endereço do usuário no topo: quebra a linha À FORÇA quando passa da largura (nunca corta com "…", nunca estoura). */
  .sidebar h1.side-email { font-size:13.5px; line-height:1.3; overflow-wrap:anywhere; word-break:break-all; flex-shrink:0; }
  .sec-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:0 8px; margin:18px 0 6px; }
  .sec-label:first-of-type { margin-top:0; }
  .folder { display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:10px; font-weight:700; font-size:13.5px; color:var(--ink-soft); margin-bottom:2px; width:100%; background:none; border:1.5px solid transparent; text-align:left; transition:background .2s ease, border-color .2s ease, transform .15s ease; }
  .folder .fl { display:flex; align-items:center; gap:9px; }
  .folder .dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .folder.active { background:var(--blue-soft); color:var(--blue-deep); }
  .folder .count { font-size:10.5px; font-weight:800; color:#fff; background:var(--ink-soft); padding:1.5px 7px; border-radius:999px; min-width:17px; text-align:center; line-height:1.5; flex-shrink:0; transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .15s ease; }
  .folder .count[hidden] { display:none; }
  .folder.active .count { background:var(--blue); }
  .folder.count-pop .count { animation:popSel .35s cubic-bezier(.34,1.56,.64,1); }

  /* drag-and-drop: e-mail -> categoria */
  .msg { transition:background .18s ease, transform .18s cubic-bezier(.22,.9,.32,1), opacity .18s ease, box-shadow .18s ease; }
  .msg.dragging { opacity:.35; transform:scale(.97) rotate(-1.2deg); cursor:grabbing; }
  /* Imagem que segue o cursor ao arrastar — sem isso o navegador usa uma foto
     do card inteiro (largura total da lista, opacidade alta), cobrindo
     exatamente a categoria em que a pessoa quer soltar. Fixa, curta e
     semi-transparente pra sempre dar pra ver o que está embaixo. Fica fora da
     tela (top/left negativos) e só existe pra virar a drag image via
     `setDragImage` — nunca aparece no layout normal. */
  .drag-ghost-chip { position:fixed; top:-999px; left:-999px; width:150px; padding:8px 12px; border-radius:10px; background:var(--ink-fixed); color:#fff; white-space:nowrap; overflow:hidden; opacity:.6; pointer-events:none; }
  .drag-ghost-chip .dgc-name { font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; }
  .drag-ghost-chip .dgc-email { font-size:10.5px; font-weight:600; opacity:.75; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
  .msg-list.has-dragging .msg:not(.dragging) { pointer-events:none; }
  .drop-folder.drag-over { background:var(--blue-soft); border-color:var(--blue); transform:scale(1.035); box-shadow:0 8px 18px -10px rgba(47,91,255,0.4); }
  .drag-ghost { position:fixed; top:-1000px; left:-1000px; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:var(--paper-raised); border:1.5px solid var(--blue); box-shadow:0 10px 22px -8px rgba(36,31,61,0.4); opacity:0.82; max-width:170px; }
  .drag-ghost-avatar { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:9.5px; flex-shrink:0; }
  .drag-ghost-name { font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msg-flyer { position:fixed; z-index:400; pointer-events:none; border-radius:14px; background:var(--paper-raised); box-shadow:0 20px 40px -10px rgba(36,31,61,0.4); }
  .msg-collapsing { animation:msgCollapse .3s ease forwards; }
  @keyframes msgCollapse { to { opacity:0; transform:scale(.9); max-height:0; margin:0; padding-top:0; padding-bottom:0; border-width:0; } }

  /* long-press mobile: sheet "Mover para..." */
  .sheet-overlay { position:fixed; inset:0; background:rgba(23,19,43,0.5); z-index:300; display:flex; align-items:flex-end; animation:overlayIn .2s ease; }
  .sheet-overlay[hidden] { display:none; }
  .sheet-card { background:var(--paper-raised); width:100%; border-radius:22px 22px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom)); animation:sheetIn .28s cubic-bezier(.22,1.2,.36,1); }
  /* Lista de pastas pode crescer bastante (muitas categorias) — as outras
     sheets (mover tarefa, reordenar colunas) são sempre curtas o bastante pra
     nunca precisar disso. */
  #mobile-folder-sheet .sheet-card { max-height:80vh; overflow-y:auto; }
  @keyframes sheetIn { from { transform:translateY(100%); } to { transform:translateY(0); } }
  .sheet-handle { width:36px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 16px; }
  .sheet-title { font-weight:800; font-size:14.5px; margin-bottom:14px; }
  .sheet-opt { display:flex; align-items:center; gap:12px; width:100%; padding:13px 6px; border:none; background:none; font-weight:700; font-size:14px; color:var(--ink); border-bottom:1px solid var(--line); }
  .sheet-opt:last-child { border-bottom:none; }
  .sheet-opt .dot { width:10px; height:10px; border-radius:50%; }
  .sheet-reorder-row { display:flex; align-items:center; gap:12px; width:100%; padding:11px 6px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px; }
  .sheet-reorder-row:last-child { border-bottom:none; }
  .sheet-reorder-row .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .sheet-reorder-row .sr-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sheet-reorder-row .sr-btn { width:34px; height:34px; border-radius:10px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .sheet-reorder-row .sr-btn:disabled { opacity:.35; }
  .storage { margin-top:22px; padding:14px; border:1px solid var(--line); border-radius:14px; width:100%; background:none; text-align:left; display:block; }
  .storage[hidden] { display:none; }
  .storage:hover { border-color:var(--blue-soft); background:var(--blue-soft); }
  /* Enquanto a cota não chegou: esqueleto animado, sem "Ampliar espaço" e sem clique (não dá pra saber se a conta é ilimitada). */
  .storage:disabled { cursor:default; opacity:1; }
  .storage:disabled:hover { border-color:var(--line); background:none; }
  .storage:disabled:hover .storage-upgrade { text-decoration:none; }
  .storage.loading .storage-top span:last-child { display:block; width:58%; height:15px; border-radius:6px; color:transparent; overflow:hidden; background:linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 37%, var(--skel-a) 63%); background-size:400% 100%; animation:skeletonPulse 1.3s ease infinite; }
  .storage.loading .storage-bar { background:linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 37%, var(--skel-a) 63%); background-size:400% 100%; animation:skeletonPulse 1.3s ease infinite; }
  .storage.loading .storage-fill { width:0 !important; }
  @media (prefers-reduced-motion: reduce) { .storage.loading .storage-top span:last-child, .storage.loading .storage-bar { animation:none; } }
  .storage:hover .storage-upgrade { text-decoration:underline; }
  /* Empilhado (label em cima, valor embaixo) em vez do lado-a-lado do mock1: numa
     sidebar de 232px, "Armazenamento" + o valor real (que pode ser bem mais longo
     que o "380 MB de 1 GB" de exemplo do mock, ex. "1,7 GB de 5 GB") não cabem
     numa linha só e cada <span> quebra o próprio texto de forma feia. Empilhado
     sempre cabe, qualquer que seja o tamanho do valor. */
  .storage-top { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
  .storage-top span:first-child { font-size:11px; font-weight:700; color:var(--ink-soft); }
  .storage-top span:last-child { font-size:13px; font-weight:800; color:var(--ink); }
  .storage-bar { height:6px; border-radius:99px; background:var(--gray-soft); overflow:hidden; }
  .storage-fill { height:100%; width:38%; background:var(--blue); border-radius:99px; }
  .storage-upgrade { display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; color:var(--blue-deep); margin-top:10px; }
  .storage-upgrade[hidden] { display:none; }
  .storage-plan-tag { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:var(--green-deep); background:var(--green-soft); padding:3px 9px; border-radius:99px; margin-top:10px; }
  .install-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:10px; padding:11px; border-radius:12px; border:1.5px dashed var(--blue-soft); background:var(--blue-soft); color:var(--blue-deep); font-weight:800; font-size:12.5px; animation:installPulse 2.4s ease-in-out infinite; transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
  .install-btn:hover { transform:translateY(-2px); }
  .install-btn[hidden] { display:none; }
  @keyframes installPulse { 0%,100% { box-shadow:0 0 0 0 rgba(47,91,255,0.25); } 50% { box-shadow:0 0 0 6px rgba(47,91,255,0); } }
  .theme-toggle { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:10px; padding:10px; border-radius:12px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); font-weight:700; font-size:12.5px; transition:background .2s ease, color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1); }
  .theme-toggle:hover { color:var(--ink); border-color:var(--blue-soft); }
  .theme-toggle:active { transform:scale(.96); }

  .list-col { background:var(--paper-raised); border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; min-height:0; }
  .list-head { padding:18px 20px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
  .list-head h2 { font-size:18px; font-weight:800; margin:0; }
  .btn-dark { display:flex; align-items:center; gap:7px; background:var(--ink-fixed); color:#fff; font-weight:700; font-size:12.5px; padding:9px 14px; border-radius:10px; border:none; }
  .btn-dark:hover { background:var(--blue-deep-fixed); }
  /* .btn-dark já define display:flex acima, que ganha da regra padrão do
     navegador pro atributo hidden (mesma origem, e a nossa vem depois) — sem
     isto os "+ Novo X" continuariam visíveis mesmo com hidden (ver os 4 usos
     em webmail.html, todos substituídos pelo "+" flutuante). */
  .btn-dark[hidden] { display:none; }
  /* min-height:0 é necessário aqui: por padrão um item flex tem min-height:auto (não
     0), então dentro de um pai flex-column ele nunca encolhe além do próprio
     conteúdo — com muitas mensagens isso faz a lista inteira crescer e empurrar
     todo o layout pra baixo em vez de rolar dentro da própria caixa. Mock1 nunca
     pegou esse bug porque seu array de mensagens mockado é pequeno o bastante pra
     caber na tela sem estourar. */
  .msg-list { overflow-y:auto; flex:1; min-height:0; }
  .msg { display:flex; gap:12px; padding:13px 20px; border-bottom:1px solid var(--line); cursor:pointer; width:100%; background:none; border-left:none; border-right:none; border-top:none; text-align:left; transition:background .18s ease, transform .18s cubic-bezier(.22,.9,.32,1); opacity:0; transform:translateY(8px); animation:msgFadeIn .45s cubic-bezier(.2,.8,.2,1) both; max-height:200px; overflow:hidden; }
  .msg:hover { background:var(--gray-soft); }
  .msg:active { transform:scale(.985); }
  .msg.selected { background:var(--blue-soft); }
  @keyframes msgFadeIn { to { opacity:1; transform:translateY(0); } }
  .msg-loading-more { opacity:0; animation:msgFadeIn .35s cubic-bezier(.2,.8,.2,1) both; }
  .avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
  .msg-body { flex:1; min-width:0; }
  .msg-top { display:flex; justify-content:space-between; gap:8px; }
  .msg-name { font-weight:600; font-size:13.5px; }
  .msg-time { font-size:11.5px; color:var(--ink-soft); flex-shrink:0; }
  .msg-subj { font-size:13px; font-weight:500; margin-top:2px; }
  .msg-snip { font-size:12.5px; color:var(--ink-soft); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chips { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
  .chip { font-size:10px; font-weight:800; padding:3px 8px; border-radius:99px; }
  .flag-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }

  /* Voltou a rolar tudo junto, igual mock1 — a separação em cabeçalho/corpo/rodapé
     fixos (pedido anterior do Richard) ficou feia na prática e foi revertida. */
  .reading { background:var(--paper-raised); padding:32px 40px; overflow-y:auto; overflow-x:hidden; }
  .reading-top-row { margin-bottom:12px; display:flex; align-items:center; gap:9px; }
  .reading-top-row .icon-btn:hover { background:var(--blue-soft); color:var(--blue-deep); transform:translateX(-2px); }
  .reading-top-row .icon-btn { transition: background .2s ease, transform .2s ease; }
  .reading-inner { max-width:720px; }
  .reading-inner[hidden] { display:none; }
  .reading-skeleton[hidden] { display:none; }
  .reading-skeleton { max-width:720px; }
  .skel { background:linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 37%, var(--skel-a) 63%); background-size:400% 100%; animation:skeletonPulse 1.3s ease infinite; }
  @keyframes skeletonPulse { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
  /* Skeleton da lista de mensagens — sem equivalente no mock1 (lá os dados são um
     array estático, nunca precisou de estado de carregamento de verdade). */
  .msg-skel { display:flex; gap:12px; padding:13px 20px; align-items:center; }
  /* Linha de e-mail (mesmas medidas da .msg real): ver msgSkeletonRowHtml em mail.js */
  .msg-skel.is-row { align-items:flex-start; border-bottom:1px solid var(--line); }
  .mskel-flag { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
  .mskel-avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; }
  .mskel-body { flex:1; min-width:0; }
  .mskel-top { display:flex; justify-content:space-between; align-items:center; gap:8px; height:17px; }
  .mskel-name { height:12px; border-radius:6px; }
  .mskel-time { width:28px; height:10px; border-radius:5px; flex-shrink:0; }
  .mskel-subj { height:16px; margin-top:2px; display:flex; align-items:center; }
  .mskel-subj .skel { height:11px; border-radius:6px; }
  .mskel-chips { margin-top:6px; height:18px; }
  .mskel-chips-empty { height:0; }
  .mskel-chip { display:block; height:18px; border-radius:99px; }
  .msg-skel .skel-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0; }
  .msg-skel .skel-lines { flex:1; min-width:0; }
  .msg-skel .skel-line { height:11px; border-radius:6px; }
  .msg-skel .skel-line + .skel-line { margin-top:9px; }

  /* Skeletons de Contatos/Agenda/Tarefas/Notas — mesma técnica `.skel`, sem
     equivalente no mock1 (dados estáticos lá nunca precisaram de loading de
     verdade). Reaproveita o formato/classe do card real (contact-card,
     event-card, task-row, note-card) só trocando o conteúdo por barras
     animadas, pra já nascer do tamanho certo sem CSS novo pra cada um. */
  .contact-card.skel-card, .note-card.skel-card, .event-card.skel-card, .task-row.skel-row { cursor:default; }
  .note-card.skel-card { background:var(--gray-soft); }
  .skel-bar { display:block; height:11px; border-radius:6px; }
  .skel-avatar-round { width:44px; height:44px; border-radius:50%; flex-shrink:0; }
  .skel-dot-bar { width:4px; height:32px; border-radius:99px; flex-shrink:0; }
  .skel-check { width:20px; height:20px; border-radius:6px; flex-shrink:0; }
  .skel-dot-round { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .folder-skel { display:flex; align-items:center; gap:10px; padding:9px 10px; }
  .reading-inner.enter { animation:readIn .45s cubic-bezier(.2,.8,.2,1); }
  @keyframes readIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
  .reading-inner.enter-next { animation:readInNext .4s cubic-bezier(.2,.8,.2,1); }
  .reading-inner.enter-prev { animation:readInPrev .4s cubic-bezier(.2,.8,.2,1); }
  @keyframes readInNext { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } }
  @keyframes readInPrev { from { opacity:0; transform:translateY(-32px); } to { opacity:1; transform:translateY(0); } }
  .r-banner { display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:12px; font-size:13px; font-weight:700; line-height:1.5; margin-bottom:22px; }
  .r-banner.yellow { background:var(--yellow-soft); color:var(--yellow-deep); }
  .r-banner.red { background:var(--red-soft); color:var(--red-deep); }
  .r-from { display:flex; gap:13px; align-items:center; margin-bottom:22px; }
  .r-subj { font-size:24px; font-weight:800; margin-bottom:20px; line-height:1.28; }
  .r-text { font-size:14.5px; line-height:1.75; color:var(--ink-soft); max-width:62ch; overflow-x:auto; }
  /* E-mail com cores próprias no tema escuro: folha clara (usa as variáveis do tema claro dentro dela, então tudo que o
     app estiliza por var() -- citações, tabelas, links -- também fica legível). */
  :root[data-theme="dark"] .r-text.r-text-sheet {
    --ink:#241f3d; --ink-soft:#4a4560; --paper:#fbf8f2; --paper-raised:#fff; --line:#e7e1d4; --gray-soft:#eeece8; --gray-deep:#5c5770;
    --blue-deep:#1a3fd0; --blue-soft:#e4ebff; color-scheme:light;
    background:#fff; color:#1a1a1a; padding:18px 22px; border-radius:12px; border:1px solid var(--line);
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .r-text.r-text-sheet {
    --ink:#241f3d; --ink-soft:#4a4560; --paper:#fbf8f2; --paper-raised:#fff; --line:#e7e1d4; --gray-soft:#eeece8; --gray-deep:#5c5770;
    --blue-deep:#1a3fd0; --blue-soft:#e4ebff; color-scheme:light;
    background:#fff; color:#1a1a1a; padding:18px 22px; border-radius:12px; border:1px solid var(--line);
  } }
  /* E-mails HTML de verdade costumam ter uma <table> de layout com largura fixa
     em pixels (640px é comum) — mais larga que o espaço real disponível no
     painel de leitura em telas menores/normais. `max-width:100%` faz esses
     designs encolherem pra caber, em vez de vazar (o `overflow-x:auto` acima
     sozinho não pega isso: uma <table> com atributo width= força o layout a
     crescer mesmo com o pai tendo overflow, então precisa ser contida na
     própria tabela/imagem, não só no container). */
  .r-text table { max-width:100%; }
  /* `:not([width]):not([height])` é o ponto-chave: uma imagem que JÁ declara
     tamanho fixo (ex: um avatar/miniatura circular 80x80 do Mercado Livre,
     com width/height tanto no atributo HTML quanto no style inline) é quase
     sempre proposital e pequena — forçar max-width:100% nela faz o algoritmo
     de auto-layout da tabela encolher só a LARGURA dessa célula pra caber
     (porque a imagem "aceita" encolher), enquanto a ALTURA inline continua
     travada no valor original — resultado: imagem oval em vez de círculo, e
     o e-mail inteiro "esticado" na vertical (várias imagens assim empilhadas
     ficam mais altas que largas). Sem tamanho declarado, a imagem provavelmente
     é o que realmente estourava a largura antes (foto/banner no tamanho
     natural do arquivo) — essas continuam precisando do max-width:100%. */
  .r-text img:not([width]):not([height]) { max-width:100%; height:auto; }
  .card { border:1px solid var(--line); border-radius:14px; padding:18px; margin-top:24px; max-width:460px; }
  .card h4 { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 10px; }
  /* Uma linha só, rolando na horizontal, em vez de quebrar linha — com muitas
     categorias (contas reais chegam a 10+) quebrar linha deixava o rodapé fixo
     alto demais, comendo espaço de leitura do email. */
  .cat-picker { display:flex; gap:6px; flex-wrap:wrap; }
  .cat-opt { font-size:11.5px; font-weight:800; padding:6px 12px; border-radius:99px; border:1.5px solid var(--dot); background:none; color:var(--deep); display:inline-flex; align-items:center; gap:5px; transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
  .cat-opt:hover { transform:translateY(-1px); box-shadow:0 4px 10px -5px var(--dot); }
  .cat-opt.chosen { background:var(--dot); border-color:var(--dot); color:#fff; box-shadow:0 3px 10px -3px var(--dot); animation:popSel .35s cubic-bezier(.34,1.56,.64,1); }
  .cat-opt-check { display:none; flex-shrink:0; }
  .cat-opt.chosen .cat-opt-check { display:inline-flex; }

  /* editar categorias */
  .cat-edit-btn { width:34px; height:34px; border-radius:10px; background:var(--gray-soft); border:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .cat-edit-btn svg { width:15px; height:15px; }
  .cat-edit-btn:hover { background:var(--line); color:var(--ink); }
  .cat-row { display:flex; align-items:center; gap:9px; padding:9px 4px; border-bottom:1px solid var(--line); }
  .cat-row:last-child { border-bottom:none; }
  .dot-btn { width:18px; height:18px; border-radius:50%; flex-shrink:0; border:2px solid transparent; padding:0; cursor:pointer; }
  .dot-btn.chosen { border-color:var(--ink); }
  .recur-day-btn { width:30px; height:30px; border-radius:8px; border:1.5px solid var(--line); background:var(--paper-raised); color:var(--ink); font-size:11px; font-weight:800; cursor:pointer; font-family:inherit; }
  .recur-day-btn.chosen { background:var(--blue); border-color:var(--blue); color:#fff; }
  .cat-swatches { display:flex; gap:5px; flex-shrink:0; }
  .modal-input { width:100%; padding:11px 14px; border-radius:12px; border:1px solid var(--line); font-size:13.5px; font-family:inherit; outline:none; background:var(--paper-raised); color:var(--ink); box-sizing:border-box; }
  .modal-input:focus { border-color:var(--blue); }
  .modal-input:disabled { background:var(--gray-soft); color:var(--ink-soft); cursor:not-allowed; }
  textarea.modal-input { resize:vertical; min-height:90px; line-height:1.5; }
  select.modal-input { cursor:pointer; }
  .modal-field-row { display:flex; gap:10px; margin-top:10px; }
  .modal-mini-label { font-size:10.5px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin:12px 0 -2px; }
  .switch-row { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
  .switch-row > span:first-child { font-size:13px; font-weight:700; color:var(--ink); }
  .switch { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
  .switch input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
  .switch-track { position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .2s ease; pointer-events:none; }
  .switch-track::before { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform .2s cubic-bezier(.34,1.56,.64,1); box-shadow:0 1px 3px rgba(0,0,0,.3); }
  .switch input:checked + .switch-track { background:var(--blue); }
  .switch input:checked + .switch-track::before { transform:translateX(18px); }
  #event-edit-time:disabled, #event-edit-end-time:disabled { opacity:.45; cursor:not-allowed; }
  .btn-danger-ghost { background:var(--red-soft); color:var(--red-deep); font-weight:700; font-size:12.5px; padding:9px 14px; border-radius:10px; border:none; cursor:pointer; transition:background .15s ease, color .15s ease; }
  .btn-danger-ghost:hover { background:var(--red); color:#fff; }
  .task-edit-btn { width:22px; height:22px; border-radius:7px; background:none; border:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:auto; opacity:.5; cursor:pointer; transition:opacity .15s ease, background .15s ease, color .15s ease; }
  .task-edit-btn:hover { opacity:1; background:var(--gray-soft); color:var(--ink); }
  .cat-row input { flex:1; min-width:0; border:none; outline:none; background:none; font-size:13.5px; font-weight:700; color:var(--ink); padding:6px 8px; border-radius:8px; }
  .cat-row input:focus { background:var(--gray-soft); }
  .cat-row input:disabled { opacity:.6; cursor:not-allowed; }
  .cat-row .cat-del-btn { width:30px; height:30px; border-radius:9px; background:none; border:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .cat-row .cat-del-btn:disabled { visibility:hidden; }
  .cat-row .cat-del-btn:hover { background:var(--red-soft); color:var(--red); }
  /* Conflito de nome (duas categorias decodificando pro mesmo rótulo): o aviso PRECISA
     ficar visível, nunca escondido como as categorias padrão do sistema são. */
  .cat-row.cat-conflict { background:var(--yellow-soft); border-radius:10px; }
  .cat-row.cat-conflict .cat-del-btn:disabled { visibility:visible; opacity:.55; cursor:not-allowed; color:var(--yellow-deep); }
  .cat-conflict-badge { flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--yellow-deep); cursor:help; }
  .cat-add-row { display:flex; gap:8px; margin-top:14px; }
  .cat-add-row input { flex:1; padding:10px 14px; border-radius:10px; border:1px solid var(--line); font-size:13px; outline:none; background:var(--paper-raised); color:var(--ink); }
  .cat-add-row input:focus { border-color:var(--blue); }

  .msg-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
  .msg-action-btn { display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; border:1.5px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); font-weight:700; font-size:12.5px; transition:transform .15s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, background .15s ease, color .15s ease; }
  .msg-action-btn:hover { border-color:var(--blue-soft); color:var(--ink); }
  .msg-action-btn:active { transform:scale(.94); }
  .msg-action-btn.primary { background:var(--ink-fixed); border-color:var(--ink-fixed); color:#fff; }
  .msg-action-btn.primary:hover { background:var(--blue-deep-fixed); border-color:var(--blue-deep-fixed); color:#fff; }
  .msg-actions-sep { width:1px; height:22px; background:var(--line); margin:0 2px; }
  .msg-action-btn.warn:hover { border-color:var(--yellow); color:var(--yellow-deep); }
  .msg-action-btn.danger:hover { border-color:var(--red); color:var(--red); background:var(--red-soft); }
  .msg-action-btn:disabled { opacity:.6; cursor:progress; }
  @media (max-width:760px) { .msg-action-btn span, .msg-action-btn { font-size:12px; } .msg-actions { gap:6px; } .msg-action-btn { padding:9px 11px; } }
  @keyframes popSel { 0% { transform:scale(.85); } 55% { transform:scale(1.08); } 100% { transform:scale(1); } }
  @media (max-width:1480px) { .reading { padding:26px; } }

  /* ============ generic full-width panel views ============ */
  .view-panel .panel-head { padding:24px 32px 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .view-panel .panel-head h2 { font-size:22px; font-weight:800; margin:0; }
  .view-panel .panel-sub { font-size:12px; color:var(--ink-soft); font-weight:700; margin:2px 0 0; width:100%; }
  .view-panel .panel-body { padding:20px 32px 40px; overflow-y:auto; flex:1; }
  /* .sel-bar (mesma barra de seleção múltipla do e-mail, ver mail.js) usada
     aqui como irmã de panel-head/panel-body — não dentro de nenhum dos dois —
     pra se comportar exatamente como list-head/sel-bar/msg-list: cabeçalho e
     barra ficam parados, só o conteúdo (panel-body) rola por baixo. O padding
     próprio dela (20px, pensado pro gutter de 20px da lista de e-mail) precisa
     bater com o gutter de 32px/16px destas telas de painel. */
  .view-panel .sel-bar { padding-left:32px; padding-right:26px; }
  .search-box { display:flex; align-items:center; gap:8px; background:var(--gray-soft); border-radius:10px; padding:9px 13px; font-size:12.5px; color:var(--ink-soft); font-weight:700; width:220px; }
  .search-box input { border:none; background:none; outline:none; font-size:12.5px; font-weight:700; color:var(--ink); width:100%; }

  /* toast */
  .toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--ink-fixed); color:#fff; font-weight:700; font-size:12.5px; padding:12px 18px; border-radius:12px; display:flex; align-items:center; gap:9px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:1000; box-shadow:0 16px 34px -12px rgba(0,0,0,0.4); }
  .toast.show { opacity:1; transform:translate(-50%,0); }

  /* ================= mobile ================= */
  .bottom-tabs { display:none; position:fixed; left:0; right:0; bottom:0; height:calc(62px + env(safe-area-inset-bottom)); background:var(--paper-raised); border-top:1px solid var(--line); align-items:center; justify-content:space-around; z-index:80; padding-bottom:env(safe-area-inset-bottom); }
  .bottom-tabs button { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:800; color:var(--ink-soft); width:44px; height:44px; justify-content:center; background:none; border:none; }
  .bottom-tabs button.active { color:var(--blue-deep); }
  .mobile-topbar { display:none; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--paper-raised); }
  /* Vira <button> (era <span>) pra abrir o seletor de caixas — reset de estilo de
     botão nativo, mantendo a aparência de texto de título de sempre. Só fica
     clicável (cursor + seta) na seção de e-mail: .mtop-pickable, alternado por
     switchView() em app.js — nas outras seções o título é só informativo. */
  .mtop-title { flex:1; min-width:0; display:flex; align-items:center; gap:4px; background:none; border:none; padding:0; margin:0; color:inherit; font:inherit; text-align:left; cursor:default; }
  .mtop-title #mtop-title-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #mtop-title-chevron { flex-shrink:0; opacity:0; transition:opacity .15s ease; }
  .mobile-topbar.mtop-pickable .mtop-title { cursor:pointer; }
  .mobile-topbar.mtop-pickable #mtop-title-chevron { opacity:.5; }
  .mobile-topbar.mtop-pickable .mtop-title:active #mtop-title-chevron { opacity:.85; }
  /* Era <span> (nunca focável) — virou <button>, então precisa de foco visível
     pra navegação por teclado, mas sem o retângulo padrão do navegador ao
     simplesmente tocar/clicar (mesmo padrão de :focus-visible já usado em
     .cmdk-see-all). */
  .mtop-title:focus { outline:none; }
  .mtop-title:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }
  .mtop-search-btn { width:36px; height:36px; border-radius:10px; background:var(--gray-soft); border:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s ease, transform .15s ease; }
  /* Ícones de ação da seção ativa (editar categorias, selecionar...) — mesmo
     visual do botão de busca ao lado. Cada um só existe pra UMA seção
     (data-topbar-view) e #mobile-topbar[data-view] (setado em switchView, ver
     app.js) decide qual mostrar; por padrão nenhum aparece (nem em telas sem
     JS pra setar o atributo, nem em seções sem ação nenhuma, como Notas). */
  .mtop-actions { display:flex; align-items:center; gap:6px; }
  .mtop-action-btn { display:none; width:36px; height:36px; border-radius:10px; background:var(--gray-soft); border:none; color:var(--ink-soft); align-items:center; justify-content:center; flex-shrink:0; transition:background .15s ease, transform .15s ease; }
  .mtop-action-btn:active { transform:scale(.92); }
  #mobile-topbar[data-view="contacts"] .mtop-action-btn[data-topbar-view="contacts"],
  #mobile-topbar[data-view="tasks"] .mtop-action-btn[data-topbar-view="tasks"] { display:flex; }
  /* Botão real de cada seção (dentro do panel-head) fica escondido no celular
     — a ação equivalente mora agora em .mtop-actions, acima. Some junto o
     próprio título <h2> do painel: o mtop-title já mostra o nome da seção,
     duplicar embaixo era exatamente a "bizarrice" (Contatos/Contatos,
     Notas/Notas) que o Richard apontou. */
  @media (max-width:760px) {
    .panel-action-btn, .view-panel .panel-head h2 { display:none; }
  }
  .mtop-search-btn:active { transform:scale(.92); }
  .compose-fab { display:flex; position:fixed; right:28px; bottom:28px; width:54px; height:54px; border-radius:50%; background:var(--blue); color:#fff; align-items:center; justify-content:center; box-shadow:0 12px 24px -8px rgba(47,91,255,0.55); z-index:80; border:none; transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; }
  .compose-fab:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 18px 32px -8px rgba(47,91,255,0.6); }
  .compose-fab:active { transform:scale(.94); }
  @media (max-width: 760px) {
    /* html/body ficam travados em height:100% (regra base, linha ~43) —
       exatamente a altura da viewport, MESMO com conteúdo bem mais alto
       embaixo (overflow:visible deixa ele "vazar" visualmente, mas o BOX de
       html/body continua com a altura declarada). .mobile-topbar é filho
       direto do body e sticky; sticky fica limitado ao tamanho do CONTAINING
       BLOCK do elemento (a caixa de html/body, 100% = só a viewport), não ao
       conteúdo que na prática rola — sem isto ele desgruda do topo e some
       assim que a rolagem passa da altura da viewport (reproduzido: some
       exatamente depois de ~1 tela de rolagem, tanto no e-mail quanto nas
       outras seções — Richard: "não deixa o topbar ir embora quando rolo").
       auto aqui deixa a caixa crescer até a altura real do conteúdo, do
       mesmo jeito que .shell/.content já fazem logo abaixo. */
    html, body { height:auto; }
    body { padding-bottom:0; }
    .shell { display:block; height:auto; }
    .rail { display:none; }
    .content { height:auto; overflow:visible; }
    .view.active { display:block; }
    #view-mail.active { display:block; }
    .sidebar { display:none; }
    .mobile-topbar { display:flex; position:sticky; top:0; z-index:60; }
    .mail-body { display:block; }
    .list-col { border-right:none; min-height:calc(100vh - 54px); flex:none; width:100%; }
    .reading { display:none; width:100%; flex:none; padding:20px 18px; opacity:1; pointer-events:auto; }
    .mail-body.reading-open .list-col { display:none; }
    .mail-body.reading-open .reading { display:block; }
    .list-head { display:none; }
    .msg { padding:14px 16px; }
    .msg-skel.is-row { padding:14px 16px; }
    .mskel-avatar { width:42px; height:42px; }
    .avatar { width:42px; height:42px; }
    .bottom-tabs { display:flex; }
    .compose-fab { right:18px; bottom:calc(78px + env(safe-area-inset-bottom)); }
    .mail-body.reading-open .compose-fab { display:none; }
    body.has-bottom-tabs { padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
    .view-panel .panel-head { padding:18px 16px 0; }
    .view-panel .panel-body { padding:16px 16px 90px; }
    .view-panel .sel-bar { padding-left:16px; padding-right:12px; }
    .search-box { width:auto; flex:1; }
  }

  /* ============ generic full-width panel views (contacts, etc.) ============ */
  .view-panel { display:none; }
  .view-panel.active { display:flex; flex-direction:column; }
  .view-panel .panel-head { padding:24px 32px 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .view-panel .panel-head h2 { font-size:22px; font-weight:800; margin:0; }
  .view-panel .panel-sub { font-size:12px; color:var(--ink-soft); font-weight:700; margin:2px 0 0; width:100%; }
  .view-panel .panel-body { padding:20px 32px 40px; overflow-y:auto; flex:1; }

  /* contacts */
  .contact-group { margin-bottom:24px; border-radius:16px; padding:10px; margin-left:-10px; margin-right:-10px; }
  .contact-group .g-label { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; margin-bottom:10px; padding-left:10px; }
  .contact-group .g-dot { width:9px; height:9px; border-radius:50%; }
  .contacts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; }
  .contact-card { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; padding:14px 10px; border:1px solid var(--line); border-radius:16px; background:var(--paper-raised); cursor:pointer; transition:transform .25s cubic-bezier(.22,.9,.32,1), box-shadow .25s ease, border-color .25s ease, background .2s ease; }
  .contact-card:hover { border-color:var(--blue-soft); box-shadow:0 10px 22px -12px rgba(36,31,61,0.28); transform:translateY(-3px); }
  .contact-card .avatar { width:44px; height:44px; font-size:14px; }
  .contact-card .c-name { font-weight:800; font-size:12.5px; line-height:1.25; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .contact-card .c-email { font-size:10px; color:var(--ink-soft); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .contact-card.csel { border-color:var(--blue); background:var(--blue-soft); }
  .contact-card.dragging-contact { opacity:.4; }
  .c-check { display:none; position:absolute; top:8px; left:8px; width:20px; height:20px; border-radius:50%; border:2px solid var(--line); background:var(--paper-raised); align-items:center; justify-content:center; color:#fff; z-index:2; font-size:11px; font-weight:800; }
  .contact-card.selectable .c-check { display:flex; }
  .contact-card.csel .c-check { background:var(--blue); border-color:var(--blue); }
  .contact-group.drop-target-group { background:var(--blue-soft); outline:2px dashed var(--blue); outline-offset:-2px; transition:background .12s ease, outline-color .12s ease; }
  .contact-group.drop-target-group .g-label { color:var(--blue-deep); }
  .contact-drop-placeholder { border:2.5px dashed var(--line); border-radius:16px; min-height:112px; padding:14px 10px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; text-align:center; font-size:10.5px; font-weight:700; color:var(--ink-soft); transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s cubic-bezier(.34,1.56,.64,1); }
  .contact-group.drop-target-group .contact-drop-placeholder { border-color:var(--blue); background:var(--blue-soft); color:var(--blue-deep); transform:scale(1.04); }

  .modal-overlay { position:fixed; inset:0; background:rgba(23,19,43,0.5); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:300; padding:20px; }
  .modal-overlay[hidden] { display:none; }

  /* Foto do contato ampliada (clique no avatar, fora do modo de edição) — fundo mais escuro que o
     modal comum (é só a imagem, sem cartão) e a imagem entra com um "pop" de escala, não só opacidade. */
  .photo-lightbox-overlay { background:rgba(10,8,20,0.86); cursor:zoom-out; }
  .photo-lightbox-img { max-width:min(88vw, 480px); max-height:85vh; border-radius:20px; box-shadow:0 40px 90px -20px rgba(0,0,0,0.6); cursor:default; animation:photoLightboxIn .28s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes photoLightboxIn { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
  .photo-lightbox-close { position:absolute; top:18px; right:18px; background:rgba(255,255,255,.14); color:#fff; }
  .photo-lightbox-close:hover { background:rgba(255,255,255,.24); }
  @media (prefers-reduced-motion: reduce) { .photo-lightbox-img { animation:none; } }
  .modal-card { background:var(--paper-raised); border-radius:22px; width:100%; max-width:420px; max-height:90vh; overflow-y:auto; box-shadow:0 40px 80px -20px rgba(0,0,0,0.35); }
  .modal-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
  .modal-head h3 { font-size:16px; font-weight:800; margin:0; }
  .modal-body { padding:22px; }
  .modal-cur { font-size:12.5px; color:var(--ink-soft); font-weight:700; margin-bottom:18px; }
  .slider-label { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
  .slider-label b { font-size:26px; font-weight:800; font-family:'Fredoka',sans-serif; color:var(--blue-deep); }
  .slider-label span { font-size:11.5px; font-weight:700; color:var(--ink-soft); }
  input[type=range] { width:100%; accent-color:var(--blue); height:22px; }
  .slider-minmax { display:flex; justify-content:space-between; font-size:10.5px; font-weight:700; color:var(--ink-soft); margin-top:2px; }
  .rate-note { font-size:11.5px; color:var(--ink-soft); font-weight:600; margin-top:10px; }
  .period-pills { display:flex; gap:7px; margin-top:20px; }
  .period-pill { flex:1; text-align:center; padding:9px 6px 8px; border-radius:12px; border:1.5px solid var(--line); background:none; font-weight:800; font-size:12.5px; color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:2px; }
  .period-pill.active { border-color:var(--blue); background:var(--blue-soft); color:var(--blue-deep); }
  .period-pill .pp-save { font-size:9.5px; font-weight:800; color:var(--green-deep); }
  .period-pill.active .pp-save { color:var(--green-deep); }
  .price-summary .p-was { font-size:12.5px; font-weight:700; color:rgba(255,255,255,0.45); text-decoration:line-through; margin-right:8px; }
  .price-summary .p-save-badge { display:inline-flex; margin-left:8px; font-size:10.5px; font-weight:800; background:var(--green); color:#fff; padding:2px 8px; border-radius:99px; vertical-align:middle; }
  .price-summary { margin-top:18px; padding:16px; border-radius:16px; background:var(--ink-fixed); color:#fff; }
  .price-summary .p-main { font-size:26px; font-weight:800; font-family:'Fredoka',sans-serif; }
  .price-summary .p-main span { font-size:13px; font-weight:600; color:rgba(255,255,255,0.6); font-family:'Plus Jakarta Sans',sans-serif; }
  .price-summary .p-sub { font-size:11.5px; color:rgba(255,255,255,0.6); font-weight:700; margin-top:6px; }
  .modal-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--blue); color:#fff; font-weight:800; font-size:14.5px; padding:14px; border-radius:14px; border:none; margin-top:18px; }
  .modal-cta:hover { background:var(--blue-deep-fixed); }
  .modal-fine { display:flex; gap:8px; font-size:11px; color:var(--ink-soft); font-weight:600; line-height:1.5; margin-top:14px; }
  .renew-banner { display:none; align-items:center; gap:12px; background:var(--yellow-soft); color:var(--yellow-deep); padding:12px 18px; border-bottom:1px solid var(--line); font-size:12.5px; font-weight:700; position:fixed; top:0; left:68px; right:0; z-index:70; }
  .renew-banner.show { display:flex; }
  .renew-banner .rb-tag { font-size:9.5px; font-weight:800; background:rgba(122,86,0,0.12); padding:2px 8px; border-radius:99px; flex-shrink:0; }
  .renew-banner button { margin-left:auto; background:var(--yellow-deep); color:#fff; font-size:11.5px; font-weight:800; padding:7px 13px; border-radius:8px; border:none; flex-shrink:0; }
  .renew-banner .rb-dismiss { background:none; color:var(--yellow-deep); padding:6px; margin-left:6px; }
  .renew-banner .rb-dismiss[hidden] { display:none; }
  /* Alerta (vermelha): caixa cheia, ou espaço extra vencendo com a caixa maior que o limite normal */
  .renew-banner.danger { background:var(--red-soft); color:var(--red-deep); }
  .renew-banner.danger .rb-tag { background:rgba(180,40,30,0.14); }
  .renew-banner.danger button { background:var(--red-deep); }
  .renew-banner.danger .rb-dismiss { background:none; color:var(--red-deep); }
  @media (max-width:760px) { .renew-banner { left:0; top:54px; flex-wrap:wrap; } }
  .contact-card .c-del { position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:7px; background:var(--paper-raised); border:1px solid var(--line); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease; }
  .contact-card:hover .c-del { opacity:1; }
  .contact-card .c-del:hover { background:var(--red-soft); color:var(--red); border-color:var(--red-soft); }
  .cat-badge { font-size:9px; font-weight:800; padding:2px 7px; border-radius:99px; margin-top:2px; }

  .merge-opt { display:flex; align-items:center; gap:12px; width:100%; padding:12px; border:1.5px solid var(--line); border-radius:14px; background:none; margin-bottom:8px; cursor:pointer; text-align:left; font-family:inherit; color:var(--ink); }
  .merge-opt.chosen { border-color:var(--blue); background:var(--blue-soft); }
  .merge-opt .mo-text { flex:1; min-width:0; }
  .merge-opt .mo-name { font-weight:800; font-size:13px; display:block; color:var(--ink); }
  .merge-opt .mo-email { font-size:11px; color:var(--ink-soft); }
  .merge-opt .mo-check { width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; background:var(--paper-raised); }
  .merge-opt.chosen .mo-check { background:var(--blue); border-color:var(--blue); }

  /* seleção múltipla de contatos reaproveita .sel-bar — ver mail.js/webmail.html */
  .btn-dark { display:flex; align-items:center; gap:7px; background:var(--ink-fixed); color:#fff; font-weight:700; font-size:12.5px; padding:9px 14px; border-radius:10px; border:none; }
  .btn-dark:hover { background:var(--blue-deep-fixed); }
  /* .btn-dark já define display:flex acima, que ganha da regra padrão do
     navegador pro atributo hidden (mesma origem, e a nossa vem depois) — sem
     isto os "+ Novo X" continuariam visíveis mesmo com hidden (ver os 4 usos
     em webmail.html, todos substituídos pelo "+" flutuante). */
  .btn-dark[hidden] { display:none; }

  /* calendar */
  .agenda-group { margin-bottom:22px; }
  .agenda-group .a-label { font-size:12.5px; font-weight:800; color:var(--ink-soft); margin-bottom:10px; }
  .event-card { display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--paper-raised); margin-bottom:8px; transition:transform .2s cubic-bezier(.22,.9,.32,1), box-shadow .2s ease; cursor:pointer; }
  .event-card:hover { transform:translateX(3px); box-shadow:0 6px 16px -10px rgba(36,31,61,0.3); }
  .event-bar { width:4px; height:32px; border-radius:99px; flex-shrink:0; background:var(--blue); }
  .event-title { font-weight:800; font-size:13.5px; }
  .event-time { font-size:11.5px; color:var(--ink-soft); font-weight:700; }
  .agenda-empty { text-align:center; padding:36px 20px; color:var(--ink-soft); font-size:13px; font-weight:700; border:1.5px dashed var(--line); border-radius:16px; }

  .tmode-toggle { display:inline-flex; gap:4px; padding:4px; border-radius:12px; background:var(--gray-soft); flex-shrink:0; }
  .tmode-btn { padding:7px 14px; border-radius:9px; border:none; background:none; font-weight:800; font-size:12.5px; color:var(--ink-soft); cursor:pointer; font-family:inherit; transition:background .15s ease, color .15s ease; }
  .tmode-btn.active { background:var(--paper-raised); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }

  .kanban-board { display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch; }
  .kanban-board[hidden] { display:none; }
  .kanban-col { flex:0 0 250px; width:250px; min-width:0; background:var(--paper-raised); border:1.5px solid var(--line); border-radius:16px; padding:14px; min-height:90px; transition:border-color .15s ease, background .15s ease, opacity .15s ease; }
  .kanban-col.drop-target { border-color:var(--blue); background:var(--blue-soft); }
  .kanban-col.col-dragging { opacity:.4; }
  .kanban-col.col-drop-target { border-color:var(--ink); border-style:dashed; }
  .kanban-col-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-weight:800; font-size:13px; cursor:grab; padding:2px; margin-left:-2px; border-radius:8px; min-width:0; }
  .kanban-col-head:active { cursor:grabbing; }
  .kanban-col-grip { display:flex; flex-shrink:0; color:var(--ink-soft); }
  .kanban-col-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .kanban-col-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .kanban-col-count { margin-left:auto; flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-soft); font-weight:700; }
  .kanban-card { display:flex; flex-direction:column; gap:5px; padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:var(--paper); margin-bottom:8px; cursor:grab; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
  .kanban-card:hover { box-shadow:0 4px 10px rgba(0,0,0,.07); }
  .kanban-card.dragging { opacity:.35; }
  .kanban-card .kc-top { display:flex; align-items:center; gap:9px; }
  .kanban-card .task-title { font-size:12.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kanban-card .kc-due { padding-left:29px; }
  .kanban-empty { font-size:11.5px; color:var(--ink-soft); text-align:center; padding:16px 0; font-weight:700; }
  @media (max-width:760px) { .kanban-col { flex-basis:220px; } }

  .week-strip { display:flex; gap:8px; margin-bottom:24px; overflow-x:auto; }
  .week-strip[hidden] { display:none; }
  .day-chip { flex-shrink:0; width:64px; padding:12px 0; border-radius:14px; text-align:center; border:1px solid var(--line); background:var(--paper-raised); cursor:pointer; transition:background .22s ease, border-color .22s ease, transform .2s cubic-bezier(.34,1.56,.64,1); }
  .day-chip .dn { font-size:10.5px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; transition:color .22s ease; }
  .day-chip .dd { font-size:18px; font-weight:800; margin-top:2px; transition:color .22s ease; }
  .day-chip:hover { border-color:var(--blue-soft); }
  .day-chip:active { transform:scale(.93); }
  .day-chip.active { background:var(--blue); border-color:var(--blue); }
  .day-chip.active .dn, .day-chip.active .dd { color:#fff; }
  .day-chip.today:not(.active) { border-color:var(--blue); border-width:1.5px; }

  .month-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-shrink:0; }
  .month-nav-label { font-weight:800; font-size:16px; }
  .month-weekday-row { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; flex-shrink:0; }
  .month-weekday-row span { text-align:center; font-size:10.5px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; }
  .month-grid { display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:minmax(92px,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:24px; }
  .mcell { display:flex; flex-direction:column; align-items:stretch; text-align:left; gap:3px; padding:6px 6px 7px; border:none; background:var(--paper-raised); cursor:pointer; transition:background .15s ease; min-width:0; }
  .mcell:hover { background:var(--gray-soft); }
  .mcell.mout { background:var(--paper); }
  .mcell.mout .mnum { color:var(--ink-soft); opacity:.55; }
  /* Richard: "tira aquele fundo azul que fica qdo clico em alguma data --
     confunde, fica parecendo que tá marcando o dia de hoje" — depois: "melhor
     vc deixar esse fundo azul fixo realmente marcando o dia de hoje". O fundo
     azul não significa mais "selecionado", agora É o marcador fixo de "hoje"
     (movido pra `.mtoday` abaixo). "Selecionado" usa um contorno neutro,
     nunca azul, pra nunca mais competir visualmente com o marcador de hoje. */
  .mcell.msel:not(.mtoday) { box-shadow:inset 0 0 0 2px var(--ink-soft); }
  .mcell.drag-over { background:var(--blue-soft); outline:2px dashed var(--blue); outline-offset:-2px; }
  .mchip.dragging { opacity:.4; }
  .mchip.mchip-moving { opacity:.6; cursor:wait; pointer-events:none; animation:mchipMovingPulse 1s ease-in-out infinite; }
  @keyframes mchipMovingPulse { 0%,100% { opacity:.4; } 50% { opacity:.85; } }
  .mnum { font-size:12px; font-weight:700; color:var(--ink); width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .mcell.mtoday { background:var(--blue-soft); }
  .mcell.mtoday .mnum { background:var(--blue); color:#fff; font-weight:800; }
  .mchip { font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:filter .12s ease, transform .12s ease, box-shadow .12s ease; }
  /* Clicar num .mchip abre AQUELE evento; clicar no resto da célula abre o dia
     inteiro — sem feedback próprio do chip, os dois ficavam indistinguíveis
     (o hover da célula toda escurecia por igual). Precisa se destacar sozinho. */
  .mchip:hover { filter:brightness(0.9); transform:scale(1.04); box-shadow:0 2px 8px -3px rgba(0,0,0,0.35); }
  .mchip-more { font-size:9.5px; font-weight:800; color:var(--ink-soft); padding:0 6px; }
  @media (max-width:760px) {
    .mcell { padding:4px 3px 5px; gap:2px; }
    .mnum { font-size:10.5px; width:18px; height:18px; }
    .mchip { font-size:0; padding:0; height:5px; border-radius:3px; }
    .mchip-more { display:none; }
  }

  /* tasks */
  .task-group { margin-bottom:22px; }
  .task-group .t-label { font-size:12.5px; font-weight:800; color:var(--ink-soft); margin-bottom:10px; }
  .task-cat-chip { font-size:10px; font-weight:800; padding:3px 9px; border-radius:99px; margin-left:auto; flex-shrink:0; white-space:nowrap; }
  .task-priority-dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
  .task-desc-icon { font-size:11px; flex-shrink:0; line-height:1; }
  .task-due { font-size:10.5px; font-weight:700; color:var(--ink-soft); font-family:'JetBrains Mono',monospace; white-space:nowrap; flex-shrink:0; }
  .task-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--paper-raised); margin-bottom:8px; }
  .task-row .task-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-weight:700; font-size:13.5px; }
  .task-title.done { text-decoration:line-through; color:var(--ink-soft); }
  .task-check { width:20px; height:20px; border-radius:6px; border:2px solid var(--line); flex-shrink:0; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .task-check.done { background:var(--green); border-color:var(--green); color:#fff; }
  .task-del-btn { width:26px; height:26px; border-radius:8px; background:none; border:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .task-del-btn:hover { background:var(--red-soft); color:var(--red); }
  .tasks-empty { text-align:center; padding:16px 0; color:var(--ink-soft); font-size:12.5px; font-weight:700; }

  /* notes */
  .notes-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap:14px; }
  .note-card { border-radius:16px; padding:16px; font-size:12.5px; font-weight:700; line-height:1.5; min-height:120px; display:flex; flex-direction:column; cursor:pointer; background:var(--yellow-soft); color:var(--yellow-deep); transition:transform .22s cubic-bezier(.22,.9,.32,1), box-shadow .22s ease; position:relative; }
  .note-card:hover { transform:translateY(-4px) rotate(-.6deg); box-shadow:0 14px 26px -14px rgba(36,31,61,0.35); }
  /* Item de grid tem min-width:auto: uma URL longa sem espaço alargava a coluna e vazava do cartão. min-width:0 deixa
     o cartão encolher e a quebra forçada (anywhere) corta a palavra onde precisar, em quantas linhas for preciso. */
  .note-card { min-width:0; overflow:hidden; }
  .note-card .n-title { font-size:13.5px; font-weight:800; margin-bottom:8px; padding-right:24px; /* o × de apagar fica no canto */ overflow-wrap:anywhere; word-break:break-word; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; line-clamp:5; overflow:hidden; }
  .note-card .n-body { overflow-wrap:anywhere; word-break:break-word; min-width:0; }
  .note-card .n-body { flex:1; opacity:.85; overflow:hidden; }
  .note-card .n-del { position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:7px; background:rgba(0,0,0,0.08); border:none; color:inherit; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease; }
  .note-card:hover .n-del { opacity:1; }

  /* ============ COMPOSE view ============ */
  /* PixIA (assistente de escrita) escondida até ser implementada. Para voltar: grid-template-columns:1fr 320px e tirar o display:none do .pixia-panel. */
  #view-compose.active { grid-template-columns: 1fr; }
  @media (max-width:900px) { #view-compose.active { grid-template-columns: 1fr; } .pixia-panel { display:none; } }
  .compose-col { background:var(--paper-raised); overflow-y:auto; display:flex; flex-direction:column; }
  .compose-top { padding:18px 26px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
  .compose-top h2 { font-size:18px; font-weight:800; margin:0; }
  .icon-btn { width:36px; height:36px; border-radius:10px; background:var(--gray-soft); border:none; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
  .icon-btn[hidden] { display:none; }
  .icon-btn:hover { background:var(--line); color:var(--ink); }
  .compose-form { padding:22px 26px; flex:1; display:flex; flex-direction:column; }
  .f-row { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding:11px 0; }
  .f-row label { font-size:12px; font-weight:800; color:var(--ink-soft); width:56px; flex-shrink:0; }
  .f-row input { flex:1; border:none; outline:none; font-size:13.5px; font-weight:600; background:none; color:var(--ink); }
  .f-row input:disabled { color:var(--ink-soft); }
  .f-row.subj input { font-weight:800; font-size:14.5px; }
  .contact-suggest { display:none; position:absolute; top:100%; left:56px; right:0; margin-top:6px; background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 40px -16px rgba(0,0,0,0.35); max-height:260px; overflow-y:auto; z-index:20; }
  .contact-suggest.open { display:block; }
  .cs-item { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; }
  .cs-item:hover, .cs-item.active { background:var(--blue-soft); }
  .cs-item .avatar { width:26px; height:26px; font-size:10px; flex-shrink:0; }
  .cs-item .cs-text { min-width:0; flex:1; }
  .cs-item .cs-name { display:block; font-weight:800; font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cs-item .cs-email { display:block; font-size:11px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---- modal de contato: hero com foto grande + modo de edição ---- */
  .cm-hero { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
  .cm-avatar-wrap { position:relative; flex-shrink:0; }
  .cm-avatar-lg { width:68px; height:68px; font-size:22px; transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .15s ease; }
  /* Zoom/escurecer só quando dá pra clicar de verdade (trocar foto, modo de
     edição) — sem a classe .editing, o avatar em modo de visualização não
     dá nenhuma pista visual de ser clicável, porque não é. */
  .cm-avatar-wrap.editing { cursor:pointer; }
  .cm-avatar-wrap.editing:hover .cm-avatar-lg { transform:scale(1.04); filter:brightness(.82); }
  /* Fora do modo de edição, só dá pra clicar de verdade se tiver foto (não initials) — abre a foto
     ampliada (ver #photo-lightbox); o hover aqui é mais sutil que o de "trocar foto" acima, pra não
     confundir as duas ações. */
  .cm-avatar-wrap.has-photo:not(.editing) { cursor:zoom-in; }
  .cm-avatar-wrap.has-photo:not(.editing):hover .cm-avatar-lg { transform:scale(1.05); }
  .cm-avatar-edit { position:absolute; inset:0; margin:auto; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:2px solid var(--paper-raised); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:scale(.8); transition:opacity .15s ease, transform .15s cubic-bezier(.34,1.56,.64,1); }
  /* `display:flex` acima ganha da regra padrão do navegador pro atributo
     `[hidden]` (CSS de autor sempre vence o UA stylesheet, não é uma questão
     de especificidade) — sem isto o botão continua ocupando `inset:0` sobre o
     avatar inteiro, invisível (opacity:0) mas clicável, mesmo fora do modo de
     edição, onde `setCmEditMode` já seta `hidden=true`. Richard: "continuo
     podendo clicar no avatar... fora do modo de edição -- não deveria!". */
  .cm-avatar-edit[hidden] { display:none; }
  .cm-avatar-wrap.editing:hover .cm-avatar-edit { opacity:1; transform:scale(1); }
  .cm-hero-text { min-width:0; flex:1; }
  .cm-name-view { font-weight:800; font-size:16px; color:var(--ink); }
  .cm-email-view { font-size:12px; color:var(--ink-soft); margin-top:2px; }
  .cm-remove-photo-btn { background:none; border:none; color:var(--red-deep); font-size:11.5px; font-weight:700; cursor:pointer; padding:0 0 10px 0; margin-top:-10px; }
  .cm-edit-field { width:100%; border:1.5px solid var(--line); border-radius:10px; padding:8px 10px; font-family:inherit; font-size:13px; font-weight:600; background:var(--paper-raised); color:var(--ink); outline:none; transition:border-color .15s ease; }
  .cm-edit-field:focus { border-color:var(--blue); }
  .cm-name-input { font-weight:800; font-size:14.5px; margin-bottom:4px; }
  .cm-field-card h4 { display:flex; align-items:center; justify-content:space-between; }
  .cm-view-field { font-size:13px; color:var(--ink); line-height:1.6; }
  .cm-view-field:empty::before { content:'—'; color:var(--ink-soft); }
  .cm-field-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; animation:viewIn .15s ease; }
  .cm-field-row:last-child { margin-bottom:0; }
  .cm-field-row input { flex:1; }
  /* Lembretes: número PRIMEIRO (deve ficar pequeno e fixo) e o seletor de
     unidade depois (deve ocupar o resto) — o oposto do padrão genérico acima
     (input:flex:1 vs select com width:100% sem flex definido) fazia os dois
     brigarem pelo espaço e o número esmagava pra ~22px, ilegível mesmo pra
     "1440" (Richard: "nem dá pra ver o número por causa do CSS"). */
  .cm-field-row input.reminder-value { flex:0 0 68px; min-width:0; }
  .cm-field-row select.reminder-unit { flex:1; }
  .cm-field-remove { width:26px; height:26px; border-radius:8px; border:none; background:var(--red-soft); color:var(--red-deep); cursor:pointer; flex-shrink:0; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; transition:transform .15s ease; }
  .cm-field-remove:hover { transform:scale(1.08); }
  .cm-add-btn { background:none; border:1.5px dashed var(--line); border-radius:10px; padding:7px 10px; font-size:12px; font-weight:700; color:var(--ink-soft); cursor:pointer; width:100%; margin-top:6px; transition:border-color .15s ease, color .15s ease; }
  .cm-add-btn:hover { border-color:var(--blue); color:var(--blue); }
  .cm-card .card { transition:box-shadow .15s ease; }
  #cm-edit-actions.open { display:flex !important; animation:viewIn .18s ease; }
  .cm-type-select { border:1.5px solid var(--line); border-radius:10px; padding:8px 6px; font-family:inherit; font-size:12px; font-weight:700; background:var(--paper-raised); color:var(--ink-soft); outline:none; flex-shrink:0; }
  .cm-type-badge { font-size:10.5px; font-weight:800; color:var(--ink-soft); background:var(--gray-soft); border-radius:6px; padding:2px 7px; margin-right:6px; text-transform:uppercase; letter-spacing:.02em; }
  .cm-addr-block { border:1.5px solid var(--line); border-radius:14px; padding:10px; margin-bottom:8px; animation:viewIn .15s ease; }
  .cm-addr-block .cm-addr-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .cm-addr-block .cm-addr-head .cm-type-select { flex:1; }
  .cm-addr-block .cm-edit-field { margin-bottom:6px; }
  .cm-addr-block .cm-edit-field:last-child { margin-bottom:0; }
  .cm-addr-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .cm-addr-grid .cm-edit-field { margin-bottom:0; }
  .cm-view-field.cm-addr-view { margin-bottom:8px; }
  .cm-view-field.cm-addr-view:last-child { margin-bottom:0; }
  .compose-textarea { flex:1; min-height:220px; border:none; outline:none; resize:none; font-size:13.5px; line-height:1.7; padding:18px 0; font-family:inherit; color:var(--ink); background:none; }
  .compose-foot { display:flex; align-items:center; gap:14px; padding-top:16px; border-top:1px solid var(--line); }
  .btn-send { display:flex; align-items:center; gap:8px; background:var(--blue); color:#fff; font-weight:800; font-size:14px; padding:12px 24px; border-radius:12px; border:none; }
  .btn-send:hover { background:var(--blue-deep-fixed); }
  .btn-send:disabled { opacity:.6; cursor:default; }
  .attach-btn { width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:none; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
  .attach-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:99px; background:var(--gray-soft); color:var(--ink); }
  .attach-chip button { background:none; border:none; color:var(--ink-soft); font-weight:800; cursor:pointer; padding:0; line-height:1; }
  .attach-chip button:hover { color:var(--red); }
  .reading-attachments { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
  .reading-attachment { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); }
  .reading-attachment:hover { border-color:var(--blue-soft); background:var(--blue-soft); }
  .reading-attachment .att-size { color:var(--ink-soft); font-weight:600; font-size:10.5px; }

  .nested-msg-card { border:1.5px solid var(--line); border-radius:14px; margin-top:14px; overflow:hidden; }
  .nested-msg-head { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; background:var(--paper-raised); color:var(--ink-soft); }
  .nested-msg-head:hover { background:var(--gray-soft); }
  .nested-msg-head .nm-title { font-weight:800; font-size:13px; flex:1; color:var(--ink); }
  .nested-msg-head .nm-chevron { transition:transform .15s ease; flex-shrink:0; }
  .nested-msg-card.open .nm-chevron { transform:rotate(180deg); }
  .nested-msg-body { display:none; padding:14px; border-top:1px solid var(--line); font-size:13px; line-height:1.6; }
  .nested-msg-card.open .nested-msg-body { display:block; }
  .nested-msg-meta { font-size:11.5px; color:var(--ink-soft); margin-bottom:10px; }

  .pixia-panel { display:none !important; background:var(--ink-fixed); color:#fff; padding:24px 22px; overflow-y:auto; display:flex; flex-direction:column; }
  .pixia-head { display:flex; align-items:center; gap:9px; margin-bottom:4px; }
  .pixia-dot { width:9px; height:9px; border-radius:50%; background:var(--green); flex-shrink:0; box-shadow:0 0 0 3px rgba(23,166,114,0.25); }
  .pixia-title { font-weight:800; font-size:14.5px; }
  .pixia-sub { font-size:11.5px; color:rgba(255,255,255,0.55); font-weight:600; margin:6px 0 20px; line-height:1.5; }
  .pixia-btn { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#fff; font-weight:700; font-size:12.5px; padding:11px 13px; border-radius:12px; margin-bottom:8px; transition:background .15s ease, transform .15s ease; }
  .pixia-btn:hover { background:rgba(255,255,255,0.13); }
  .pixia-btn:active { transform:scale(.98); }
  .pixia-btn.busy { opacity:.6; pointer-events:none; }
  .pixia-btn svg { flex-shrink:0; color:var(--blue-soft); }
  .pixia-feedback { font-size:11.5px; color:rgba(255,255,255,0.6); font-weight:700; margin-top:6px; min-height:16px; }
  .pixia-foot { margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,0.12); font-size:10.5px; color:rgba(255,255,255,0.45); font-weight:700; line-height:1.6; display:flex; gap:8px; align-items:flex-start; }

  /* cores dinâmicas de categoria (nome -> cor é calculado no backend, ver
     webmail/serializers.py:hash_category_color) — paleta igual ao mock1 */
  .avatar.c-green, .chip.c-green { background:var(--green-soft); color:var(--green-deep); }
  .avatar.c-blue, .chip.c-blue { background:var(--blue-soft); color:var(--blue-deep); }
  .avatar.c-coral, .chip.c-coral { background:var(--coral-soft); color:var(--coral-deep); }
  .avatar.c-red, .chip.c-red { background:var(--red-soft); color:var(--red-deep); }
  .avatar.c-yellow, .chip.c-yellow { background:var(--yellow-soft); color:var(--yellow-deep); }
  .avatar.c-gray, .chip.c-gray { background:var(--gray-soft); color:var(--gray-deep); }
  .dot.c-green { background:var(--green); } .dot.c-blue { background:var(--blue); }
  .dot.c-coral { background:var(--coral); } .dot.c-red { background:var(--red); }
  .dot.c-yellow { background:var(--yellow); } .dot.c-gray { background:var(--ink-soft); }
  .flag-dot.c-green { background:var(--green); } .flag-dot.c-blue { background:var(--blue); }
  .flag-dot.c-coral { background:var(--coral); } .flag-dot.c-red { background:var(--red); }
  .flag-dot.c-yellow { background:var(--yellow); } .flag-dot.c-gray { background:var(--ink-soft); }
  .g-dot.c-green { background:var(--green); } .g-dot.c-blue { background:var(--blue); }
  .g-dot.c-coral { background:var(--coral); } .g-dot.c-red { background:var(--red); }
  .g-dot.c-yellow { background:var(--yellow); } .g-dot.c-gray { background:var(--ink-soft); }
  .msg.is-unread .msg-name, .msg.is-unread .msg-subj { font-weight:800; }
  /* Negrito sozinho não bastava no tema escuro (Richard: "difícil diferenciar lida de não lida") --
     lida também escurece a fonte pro padrão de qualquer cliente de e-mail (negrito+cor cheia = não lida,
     cor apagada = lida), não só o peso. */
  .msg:not(.is-unread) .msg-name, .msg:not(.is-unread) .msg-subj { color:var(--ink-soft); }
  .msg-empty { padding:60px 20px; text-align:center; color:var(--ink-soft); font-size:13px; font-weight:700; }

  /* ============ login page (novo, não existe no mock1) ============ */
  .login-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
  .login-card { width:100%; max-width:360px; background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:32px 28px; }
  .login-card h1 { font-size:18px; font-weight:800; margin:0 0 4px; }
  .login-card p { font-size:12.5px; color:var(--ink-soft); font-weight:600; margin:0 0 22px; }
  .login-field { margin-bottom:14px; }
  .login-field label { display:block; font-size:12px; font-weight:800; color:var(--ink-soft); margin-bottom:6px; }
  .login-field input { width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--line); font-size:13.5px; outline:none; background:var(--paper); color:var(--ink); }
  .login-field input:focus { border-color:var(--blue); }
  .pw-wrap { position:relative; }
  .pw-wrap input { padding-right:46px; display:block; }
  .pw-wrap input::-ms-reveal, .pw-wrap input::-ms-clear { display:none; }
  .pw-eye { position:absolute; right:5px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:none; border-radius:9px; background:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease, color .15s ease, transform .15s ease; }
  .pw-eye:hover { background:var(--gray-soft); color:var(--ink); }
  .pw-eye:active { transform:translateY(-50%) scale(.92); }
  .pw-eye:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
  .pw-eye.on { color:var(--blue); }
  .pw-eye .pw-ico { position:absolute; transition:opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1); }
  .pw-eye .pw-ico-hide { opacity:0; transform:scale(.6) rotate(-12deg); }
  .pw-eye.on .pw-ico-show { opacity:0; transform:scale(.6) rotate(12deg); }
  .pw-eye.on .pw-ico-hide { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) { .pw-eye, .pw-eye .pw-ico { transition:none; } }
  .login-error { font-size:12.5px; font-weight:700; color:var(--red-deep); background:var(--red-soft); padding:10px 12px; border-radius:10px; margin-bottom:14px; display:none; }
  .login-error.show { display:block; }
  .login-err-reload { display:inline; margin-top:6px; padding:5px 12px; border-radius:8px; border:1.5px solid currentColor; background:transparent; color:inherit; font:inherit; font-weight:800; cursor:pointer; transition:background .15s ease, color .15s ease; }
  .login-err-reload:hover { background:var(--red-deep); color:#fff; border-color:var(--red-deep); }
  .login-err-reload:focus-visible { outline:2px solid var(--red-deep); outline-offset:2px; }
  .login-captcha { margin:4px 0 18px; }
  .login-captcha:empty { margin:0; }
  /* O SDK do Sentinela (sentinela-sdk.js) tem paleta própria fixa (cartão
     escuro), de propósito -- não se adapta ao tema do site em nenhuma página
     onde roda, pra garantir contraste/legibilidade sempre. Não sobrescrevemos
     cor nenhuma aqui: só o espaço em volta (margem) e o aviso de "verificando"
     que o script deles não tem, usando as próprias variáveis de cor dele
     (--sen-sub etc, definidas em .sen-widget) pra ficar legível no cartão
     escuro deles independente do tema da nossa página. */
  .login-captcha .sen-mid { position:relative; }
  .login-captcha .sen-processing { position:absolute; inset:0; display:none; align-items:center; font-size:11px; color:var(--sen-sub, #95959f); }
  .login-captcha.sen-pending .sen-label,
  .login-captcha.sen-pending .sen-status { visibility:hidden; }
  .login-captcha.sen-pending .sen-processing { display:flex; }
  .login-submit { width:100%; padding:12px; border-radius:10px; border:none; background:var(--blue); color:#fff; font-weight:800; font-size:14px; }
  .login-submit:hover { background:var(--blue-deep-fixed); }
  .login-submit:disabled { opacity:.6; cursor:default; }
  .login-submit { transition:opacity .2s ease, background .15s ease; }
  /* Aguardando a verificação do Sentinela: travado de verdade (não clica nem com Enter) até o widget confirmar */
  .login-submit.needs-verification:disabled { opacity:.5; cursor:not-allowed; }
  /* Em andamento: igual ao botão do cadastro da landing (spinner branco 16px, borda 2.5px, giro .7s + texto) */
  .login-submit.is-busy { display:inline-flex; align-items:center; justify-content:center; gap:9px; opacity:.85; cursor:progress; }
  .btn-spinner { width:16px; height:16px; border-radius:50%; border:2.5px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:btnSpin .7s linear infinite; flex-shrink:0; }
  @keyframes btnSpin { to { transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration:1.6s; } }

  /* command palette — tela cheia, não modalzinho (ported do mock1) */
  /* ============ busca global (cmdk) ============ */
  .cmdk-overlay { position:fixed; inset:0; z-index:300; display:flex; justify-content:center; background:color-mix(in srgb, var(--paper) 97%, transparent); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); animation:cmdkBackdropIn .22s ease; }
  .cmdk-overlay[hidden] { display:none; }
  .cmdk-shell { width:100%; max-width:980px; height:100%; display:flex; flex-direction:column; padding:0 28px; animation:cmdkShellIn .32s cubic-bezier(.2,.9,.25,1); }
  @keyframes cmdkBackdropIn { from { opacity:0; } to { opacity:1; } }
  @keyframes cmdkShellIn { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
  @keyframes cmdkRise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  @keyframes cmdkSpin { to { transform:rotate(360deg); } }
  .cmdk-input-row { display:flex; align-items:center; gap:12px; padding:max(22px, env(safe-area-inset-top)) 2px 14px; flex-shrink:0; }
  .cmdk-field { flex:1; min-width:0; display:flex; align-items:center; gap:10px; height:54px; padding:0 8px 0 16px; background:var(--paper-raised); border:2px solid var(--line); border-radius:18px; transition:border-color .18s ease, box-shadow .18s ease; }
  .cmdk-field:focus-within { border-color:var(--blue); box-shadow:0 0 0 5px color-mix(in srgb, var(--blue) 16%, transparent), 0 14px 34px -18px rgba(47,91,255,.55); }
  .cmdk-lens { display:flex; color:var(--ink-soft); flex-shrink:0; transition:color .18s ease; }
  .cmdk-field:focus-within .cmdk-lens { color:var(--blue); }
  .cmdk-overlay.is-searching .cmdk-lens { display:none; }
  .cmdk-spin { width:19px; height:19px; flex-shrink:0; border-radius:50%; border:2.5px solid var(--blue-soft); border-top-color:var(--blue); animation:cmdkSpin .65s linear infinite; }
  .cmdk-spin[hidden] { display:none; }
  .cmdk-field input { flex:1; min-width:0; border:none; outline:none; font-size:19px; font-weight:700; background:none; color:var(--ink); font-family:inherit; letter-spacing:-0.01em; -webkit-appearance:none; appearance:none; }
  .cmdk-field input::-webkit-search-cancel-button { display:none; }
  .cmdk-field input::placeholder { color:var(--ink-soft); font-weight:600; }
  .cmdk-clear { width:34px; height:34px; border-radius:11px; border:none; background:var(--gray-soft); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:transform .15s ease, background .15s ease; }
  .cmdk-clear:hover { background:var(--line); transform:scale(1.06); }
  .cmdk-clear[hidden] { display:none; }
  .cmdk-esc { font-family:'JetBrains Mono',monospace; font-size:11px; background:var(--gray-soft); padding:6px 9px; border-radius:7px; color:var(--ink-soft); font-weight:800; flex-shrink:0; }
  .cmdk-chips { display:flex; gap:8px; padding:2px 2px 14px; overflow-x:auto; flex-shrink:0; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-bottom:1px solid var(--line); }
  .cmdk-chips::-webkit-scrollbar { display:none; }
  .cmdk-chips[hidden] { display:none; }
  .cmdk-chip { flex-shrink:0; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:99px; border:1.5px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); font:inherit; font-size:13px; font-weight:800; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
  .cmdk-chip b { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:800; opacity:.75; }
  .cmdk-chip:hover { border-color:var(--blue); color:var(--ink); }
  .cmdk-chip:active { transform:scale(.95); }
  .cmdk-chip.on { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 8px 18px -10px rgba(47,91,255,.7); }
  .cmdk-results { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:22px 2px 40px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
  .cmdk-results::-webkit-scrollbar { width:7px; }
  .cmdk-results::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
  .cmdk-group-label { display:flex; align-items:baseline; gap:12px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); padding:0 2px 10px; margin-top:26px; animation:cmdkRise .3s ease both; }
  .cmdk-group-label:first-child { margin-top:0; }
  .cmdk-group-note, .cmdk-loading-tag { text-transform:none; letter-spacing:0; font-weight:700; font-size:12px; }
  .cmdk-loading-tag { color:var(--blue); display:inline-flex; align-items:center; gap:7px; }
  .cmdk-loading-tag::before { content:''; width:11px; height:11px; border-radius:50%; border:2px solid var(--blue-soft); border-top-color:var(--blue); animation:cmdkSpin .65s linear infinite; }
  .cmdk-group-label .cmdk-see-all { margin-left:auto; }
  .cmdk-see-all { font-family:inherit; font-size:12.5px; font-weight:800; text-transform:none; letter-spacing:0; color:var(--blue); background:none; border:none; cursor:pointer; padding:4px 8px; border-radius:8px; transition:background .15s ease; }
  .cmdk-see-all:hover { background:var(--blue-soft); }
  .cmdk-see-all:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
  .cmdk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:10px; }
  .cmdk-item { display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:16px; border:1.5px solid var(--line); cursor:pointer; background:var(--paper-raised); min-width:0; animation:cmdkRise .32s cubic-bezier(.2,.9,.25,1) both; animation-delay:calc(var(--i, 0) * 28ms); transition:border-color .15s ease, transform .15s cubic-bezier(.22,.9,.32,1), box-shadow .18s ease, background .15s ease; }
  .cmdk-item:hover { border-color:color-mix(in srgb, var(--blue) 45%, var(--line)); }
  .cmdk-item.active { border-color:var(--blue); background:color-mix(in srgb, var(--blue-soft) 55%, var(--paper-raised)); box-shadow:0 12px 26px -16px rgba(47,91,255,.6); transform:translateY(-1px); }
  .cmdk-item:active { transform:scale(.99); }
  .cmdk-item > div { min-width:0; }
  .cmdk-icon { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--gray-soft); color:var(--ink-soft); }
  .cmdk-icon-cal { background:#e6f0ff; color:#2455d6; } .cmdk-icon-task { background:#e3f6ea; color:#18874a; } .cmdk-icon-note { background:#fff0d6; color:#a8650a; }
  @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .cmdk-icon-cal { background:#1d2a52; color:#9db6ff; } :root:not([data-theme="light"]) .cmdk-icon-task { background:#17382a; color:#7fdca6; } :root:not([data-theme="light"]) .cmdk-icon-note { background:#43330f; color:#f1bf6d; } }
  :root[data-theme="dark"] .cmdk-icon-cal { background:#1d2a52; color:#9db6ff; } :root[data-theme="dark"] .cmdk-icon-task { background:#17382a; color:#7fdca6; } :root[data-theme="dark"] .cmdk-icon-note { background:#43330f; color:#f1bf6d; }
  .cmdk-label { font-weight:800; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cmdk-sub { font-size:12px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
  .cmdk-item.done .cmdk-label { text-decoration:line-through; color:var(--ink-soft); }
  .cmdk-overlay mark { background:color-mix(in srgb, #ffd23f 62%, transparent); color:inherit; border-radius:4px; padding:0 2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
  /* e-mails: avatar + remetente/data na 1ª linha, assunto na 2ª (serve igual no celular) */
  .cmdk-email-list { display:flex; flex-direction:column; gap:8px; }
  .cmdk-email { gap:12px; }
  .cmdk-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
  .ce-main { flex:1; min-width:0; }
  .ce-top { display:flex; align-items:baseline; gap:8px; min-width:0; }
  .ce-sender { font-weight:800; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:0 1 auto; }
  .ce-folder { flex-shrink:0; font-size:10.5px; font-weight:800; letter-spacing:.03em; padding:2px 8px; border-radius:99px; background:var(--gray-soft); color:var(--ink-soft); }
  .ce-date { margin-left:auto; flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-soft); font-weight:700; }
  .ce-subject { font-size:13px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; font-weight:600; }
  .cmdk-email.unread .ce-subject { color:var(--ink); font-weight:800; }
  .cmdk-skel { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; border:1.5px solid var(--line); background:var(--paper-raised); margin-bottom:8px; animation:cmdkRise .3s ease both; animation-delay:calc(var(--i, 0) * 60ms); }
  .cmdk-skel .skel-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; }
  .cmdk-skel .skel-lines { flex:1; display:flex; flex-direction:column; gap:9px; }
  .cmdk-skel .skel-line { height:11px; border-radius:6px; }
  /* estados vazios */
  .cmdk-empty { padding:70px 20px 40px; text-align:center; color:var(--ink-soft); animation:cmdkRise .35s ease both; }
  .cmdk-empty-art { width:68px; height:68px; margin:0 auto 18px; border-radius:22px; display:flex; align-items:center; justify-content:center; background:var(--blue-soft); color:var(--blue); animation:cmdkFloat 3.2s ease-in-out infinite; }
  @keyframes cmdkFloat { 50% { transform:translateY(-6px); } }
  .cmdk-empty-title { font-size:17px; font-weight:800; color:var(--ink); margin-bottom:8px; overflow-wrap:anywhere; }
  .cmdk-empty-sub { font-size:13.5px; font-weight:600; max-width:420px; margin:0 auto; line-height:1.5; }
  .cmdk-empty-error { padding:26px 20px; margin-bottom:10px; border:1.5px dashed var(--line); border-radius:18px; }
  .cmdk-retry { margin-top:14px; height:38px; padding:0 18px; border-radius:12px; border:none; background:var(--blue); color:#fff; font:inherit; font-weight:800; font-size:13px; cursor:pointer; transition:transform .15s ease; }
  .cmdk-retry:active { transform:scale(.96); }
  .cmdk-recents { display:flex; flex-wrap:wrap; gap:8px; }
  .cmdk-recent { display:inline-flex; align-items:center; gap:8px; max-width:100%; height:36px; padding:0 14px; border-radius:99px; border:1.5px solid var(--line); background:var(--paper-raised); color:var(--ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer; animation:cmdkRise .3s ease both; animation-delay:calc(var(--i, 0) * 40ms); transition:border-color .15s ease, transform .15s ease; }
  .cmdk-recent span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cmdk-recent svg { color:var(--ink-soft); flex-shrink:0; }
  .cmdk-recent:hover { border-color:var(--blue); }
  .cmdk-recent:active { transform:scale(.96); }
  .cmdk-tip { margin-top:28px; text-align:center; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
  .cmdk-foot { display:flex; justify-content:center; gap:20px; padding:10px 0 max(12px, env(safe-area-inset-bottom)); border-top:1px solid var(--line); font-size:12px; font-weight:700; color:var(--ink-soft); flex-shrink:0; }
  .cmdk-foot kbd { font-family:'JetBrains Mono',monospace; font-size:10.5px; background:var(--gray-soft); padding:2px 6px; border-radius:5px; margin-right:3px; }
  @keyframes cmdkFlash { 0%,100% { box-shadow:0 0 0 0 rgba(47,91,255,0); } 25% { box-shadow:0 0 0 4px rgba(47,91,255,0.45); } }
  .cmdk-flash { animation:cmdkFlash 1s ease; }
  @media (max-width:760px) {
    .cmdk-shell { padding:0 14px; }
    .cmdk-input-row { gap:8px; padding-top:max(14px, env(safe-area-inset-top)); }
    .cmdk-field { height:50px; border-radius:16px; padding-left:13px; }
    .cmdk-field input { font-size:17px; }
    .cmdk-esc, .cmdk-foot { display:none; }
    .cmdk-grid { grid-template-columns:1fr; }
    .cmdk-results { padding-bottom:max(40px, env(safe-area-inset-bottom)); }
  }
  @media (hover:none) { .cmdk-foot { display:none; } }
  @media (prefers-reduced-motion:reduce) { .cmdk-overlay, .cmdk-shell, .cmdk-item, .cmdk-group-label, .cmdk-empty, .cmdk-empty-art, .cmdk-recent, .cmdk-skel { animation:none !important; } }

  /* ============ seleção múltipla na lista de e-mails ============
     Mesma linguagem visual da seleção de Contatos (.c-check) e mesma barra
     (.sel-bar, compartilhada com Contatos — ver webmail.html/contacts.js): o
     círculo de check aparece POR CIMA do avatar (sem deslocar o layout da
     linha), no hover (desktop) ou sempre que o modo de seleção está ativo. */
  .list-head-left { display:flex; align-items:center; gap:10px; min-width:0; }
  .sel-all-box { width:20px; height:20px; border-radius:6px; border:2px solid var(--line); background:var(--paper-raised); flex-shrink:0; padding:0; cursor:pointer; position:relative; transition:background .15s ease, border-color .15s ease, transform .15s cubic-bezier(.34,1.56,.64,1); }
  .sel-all-box:hover { border-color:var(--blue); }
  .sel-all-box:active { transform:scale(.9); }
  .sel-all-box.is-all, .sel-all-box.is-some { background:var(--blue); border-color:var(--blue); }
  .sel-all-box.is-all::after { content:''; position:absolute; left:4.5px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2.4px 2.4px 0; transform:rotate(45deg); }
  .sel-all-box.is-some::after { content:''; position:absolute; left:3px; right:3px; top:7px; height:2.4px; border-radius:2px; background:#fff; }
  .sel-all-box.is-loading { border-color:var(--blue); background:linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 37%, var(--skel-a) 63%); background-size:400% 100%; animation:skeletonPulse 1.1s ease infinite; }

  .sel-bar { display:flex; align-items:center; gap:10px; padding:10px 14px 10px 20px; background:var(--blue-deep-fixed); color:#fff; font-weight:700; font-size:13px; box-shadow:0 8px 16px -10px rgba(0,0,0,0.35); animation:selBarIn .22s cubic-bezier(.2,.8,.2,1) both; z-index:5; }
  .sel-bar[hidden] { display:none; }
  @keyframes selBarIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  .sel-bar .sel-all-box { border-color:rgba(255,255,255,.55); background:transparent; }
  .sel-bar .sel-all-box.is-all, .sel-bar .sel-all-box.is-some { background:#fff; border-color:#fff; }
  .sel-bar .sel-all-box.is-all::after { border-color:var(--blue-deep-fixed); }
  .sel-bar .sel-all-box.is-some::after { background:var(--blue-deep-fixed); }
  .sel-count { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sel-count .skel { display:inline-block; width:90px; height:11px; border-radius:6px; vertical-align:middle; opacity:.5; }
  .sel-btn { display:flex; align-items:center; gap:6px; border:none; border-radius:10px; padding:7px 12px; font-weight:800; font-size:12.5px; font-family:inherit; cursor:pointer; background:rgba(255,255,255,.15); color:#fff; transition:background .15s ease, transform .15s cubic-bezier(.34,1.56,.64,1); }
  .sel-btn:hover { background:rgba(255,255,255,.26); }
  .sel-btn:active, .sel-close:active { transform:scale(.94); }
  .sel-btn-danger { background:var(--red); }
  .sel-btn-danger:hover { background:var(--red-deep); }
  .sel-btn:disabled { opacity:.5; cursor:default; }
  .sel-btn[hidden] { display:none; } /* .sel-btn já tem display:flex — ver comentário em .btn-dark[hidden] */
  .sel-close { width:30px; height:30px; border-radius:9px; border:none; background:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.8; }
  .sel-close:hover { opacity:1; background:rgba(255,255,255,.12); }

  .msg { -webkit-touch-callout:none; }
  .msg-list.selecting .msg { user-select:none; -webkit-user-select:none; }
  /* align-self:flex-start: sem isso o wrapper (item flex da linha) estica até a altura da linha inteira — linhas com chip de categoria são mais altas, e o círculo de check (inset:0) virava oval. */
  .avatar-wrap { position:relative; flex-shrink:0; display:flex; align-self:flex-start; }
  .msg-check { position:absolute; inset:0; border-radius:50%; border:2px solid var(--line); background:color-mix(in srgb, var(--paper-raised) 45%, transparent); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.7); transition:opacity .15s ease, transform .18s cubic-bezier(.34,1.56,.64,1), background .15s ease, border-color .15s ease; pointer-events:none; }
  .msg-check::after { content:''; width:6px; height:11px; border:solid #fff; border-width:0 2.6px 2.6px 0; transform:rotate(45deg) translate(-1px,-1px); opacity:0; transition:opacity .12s ease; }
  @media (hover:hover) {
    .msg:hover .msg-check { opacity:1; transform:scale(1); pointer-events:auto; }
    .msg:hover .msg-check:hover { border-color:var(--blue); }
  }
  .msg-list.selecting .msg-check { opacity:1; transform:scale(1); pointer-events:auto; }
  .msg.is-checked { background:var(--blue-soft); }
  .msg.is-checked .msg-check { background:var(--blue); border-color:var(--blue); opacity:1; transform:scale(1); }
  .msg.is-checked .msg-check::after { opacity:1; }
  .msg.long-press-armed { background:var(--gray-soft); transition:background .4s ease; }
  .drag-ghost-chip .dgc-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-right:6px; border-radius:99px; background:var(--blue); font-size:10.5px; font-weight:800; }

  @media (max-width: 760px) {
    .sel-bar { position:sticky; top:54px; z-index:55; padding:10px 12px 10px 16px; }
    .sel-btn span { display:none; }
    .sel-btn { padding:8px 10px; }
  }

  /* ============ progresso de operação em lote (mover/excluir/spam) ============
     Fica visível do começo ao fim (diferente do toast, que some sozinho). Canto
     inferior direito no desktop pra não brigar com o toast (centro); no celular,
     largura cheia logo acima da barra de abas. */
  .bulk-progress { position:fixed; right:24px; bottom:24px; width:340px; max-width:calc(100vw - 32px); box-sizing:border-box; display:flex; align-items:center; gap:12px; padding:13px 14px 13px 16px; border-radius:14px; background:var(--ink-fixed); color:#fff; box-shadow:0 18px 38px -14px rgba(0,0,0,0.5); z-index:1001; opacity:0; transform:translateY(16px) scale(.98); pointer-events:none; transition:opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
  .bulk-progress.show { opacity:1; transform:none; pointer-events:auto; }
  .bp-icon { width:22px; height:22px; flex-shrink:0; border-radius:50%; position:relative; }
  .bulk-progress.is-running .bp-icon { border:2.5px solid rgba(255,255,255,.18); border-top-color:#fff; animation:bpSpin .8s linear infinite; box-sizing:border-box; }
  .bulk-progress.is-done .bp-icon { background:var(--green); animation:bpPop .35s cubic-bezier(.34,1.56,.64,1); }
  .bulk-progress.is-done .bp-icon::after { content:''; position:absolute; left:8px; top:4.5px; width:5px; height:10px; border:solid #fff; border-width:0 2.4px 2.4px 0; transform:rotate(45deg); }
  .bulk-progress.is-error .bp-icon { background:var(--red); animation:bpPop .35s cubic-bezier(.34,1.56,.64,1); }
  .bulk-progress.is-error .bp-icon::after { content:'!'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; }
  @keyframes bpSpin { to { transform:rotate(360deg); } }
  @keyframes bpPop { from { transform:scale(.4); } to { transform:scale(1); } }
  .bp-main { flex:1; min-width:0; }
  .bp-title { font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bp-sub { font-weight:700; font-size:11.5px; opacity:.7; margin-top:2px; font-variant-numeric:tabular-nums; }
  .bp-bar { height:4px; border-radius:99px; background:rgba(255,255,255,.14); margin-top:8px; overflow:hidden; }
  .bp-bar span { display:block; height:100%; width:0; border-radius:99px; background:var(--blue); transition:width .45s cubic-bezier(.2,.8,.2,1), background .25s ease; }
  .bulk-progress.is-running .bp-bar span { background-image:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%); background-size:200% 100%; animation:bpShimmer 1.1s linear infinite; }
  @keyframes bpShimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
  .bulk-progress.is-done .bp-bar span { background:var(--green); }
  .bulk-progress.is-error .bp-bar span { background:var(--red); }
  .bp-close { width:28px; height:28px; border-radius:8px; border:none; background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
  .bp-close[hidden] { display:none; }
  .bp-close:hover { background:rgba(255,255,255,.2); }

  /* Linhas sendo processadas: esmaecem na hora (a pessoa vê que "pegou") e
     encolhem até sumir quando o lote delas termina. !important porque a
     animação de entrada da .msg (fill both) fixa opacity:1. */
  .msg.is-leaving { opacity:.4 !important; pointer-events:none; transition:opacity .25s ease, max-height .3s ease, padding .3s ease; }
  .msg.is-gone { opacity:0 !important; max-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; border-bottom-width:0 !important; }

  @media (max-width: 760px) {
    .bulk-progress { left:16px; right:16px; width:auto; bottom:78px; }
  }

  /* ============ Seção "Conta" (Minha conta / Meus domínios) — ver static/js/account.js ============ */
  .mtop-avatar { width:32px; height:32px; border-radius:50%; background:var(--blue-soft); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0; border:none; padding:0; cursor:pointer; font-family:inherit; transition:transform .15s ease; }
  .mtop-avatar:active { transform:scale(.9); }
  .modal-input[hidden] { display:none; }
  .modal-overlay[id^="acc-"] .modal-input { margin-top:10px; }
  .modal-overlay[id^="acc-"] .modal-cur + .modal-input { margin-top:4px; }

  .acc-tabs { position:relative; display:flex; gap:0; margin-bottom:22px; border-bottom:1.5px solid var(--line); max-width:920px; }
  .acc-tab { background:none; border:none; cursor:pointer; font:inherit; font-weight:800; font-size:14px; color:var(--ink-soft); padding:11px 4px; margin-right:26px; transition:color .2s ease; }
  .acc-tab[hidden] { display:none; }
  .acc-tab.active { color:var(--ink); }
  .acc-tab-ind { position:absolute; bottom:-1.5px; left:0; width:0; height:2.5px; background:var(--blue); border-radius:2px; transition:left .3s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1); }
  .acc-panel { display:none; max-width:920px; }
  .acc-panel.active { display:block; animation:viewIn .35s ease; }

  .acc-card { background:var(--paper-raised); border:1px solid var(--line); border-radius:18px; padding:22px 24px; margin-bottom:18px; }
  .acc-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .acc-who { display:flex; align-items:center; gap:14px; min-width:0; }
  .acc-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; background:var(--blue-soft); color:var(--blue-deep); transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
  .acc-avatar-lg { width:46px; height:46px; font-size:15px; }
  .acc-row:hover .acc-avatar { transform:scale(1.1) rotate(-4deg); }
  .acc-email { font-family:'JetBrains Mono', monospace; font-weight:700; font-size:13.5px; word-break:break-all; }
  .acc-mono { font-family:'JetBrains Mono', monospace; font-weight:600; word-break:break-all; }
  .acc-sub, .acc-meta { font-size:12.5px; color:var(--ink-soft); font-weight:700; margin-top:3px; }
  .acc-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .acc-you { white-space:nowrap; display:inline-block; font-family:'Plus Jakarta Sans', sans-serif; font-size:10.5px; font-weight:800; background:var(--gray-soft); color:var(--gray-deep); padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:1px; }

  .acc-quota { margin-top:16px; }
  .acc-quota-bar { height:7px; border-radius:99px; background:var(--line); overflow:hidden; width:100%; max-width:240px; margin-top:8px; }
  .acc-quota-bar > span { display:block; height:100%; width:0%; background:var(--blue); border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.2,1), background .3s ease; }
  .acc-quota-bar.warn > span { background:var(--yellow); }
  .acc-quota-bar.full > span { background:var(--red); }
  .acc-quota-bar.skel { background-color:var(--skel-a); }
  .acc-quota-label { font-size:12px; color:var(--ink-soft); margin-top:6px; font-weight:700; }
  .acc-bulk-stats { margin-top:14px; }
  #acc-bulk-card .acc-actions { margin-top:14px; }
  #acc-bulk-card .msg-action-btn[hidden] { display:none; }
  .skel-line { height:12px; width:120px; border-radius:6px; margin-top:8px; background:linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 37%, var(--skel-a) 63%); background-size:400% 100%; animation:skeletonPulse 1.3s ease infinite; }

  .acc-pill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:999px; font-family:'Plus Jakarta Sans', sans-serif; vertical-align:1px; }
  .acc-pill.ok { background:var(--green-soft); color:var(--green-deep); }
  .acc-pill.warn { background:var(--yellow-soft); color:var(--yellow-deep); }
  .acc-pill.bad { background:var(--red-soft); color:var(--red-deep); }

  .acc-domain { padding:0; overflow:hidden; }
  .acc-domain-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 24px; cursor:pointer; user-select:none; transition:background .15s ease; }
  .acc-domain-head:hover { background:var(--blue-soft); }
  .acc-domain-head:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
  .acc-domain-left { display:flex; align-items:center; gap:14px; min-width:0; }
  .acc-chevron { flex-shrink:0; color:var(--ink-soft); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
  .acc-domain.expanded .acc-chevron { transform:rotate(180deg); }
  .acc-domain-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1); }
  .acc-domain.expanded .acc-domain-body { grid-template-rows:1fr; }
  .acc-domain-inner { overflow:hidden; padding:0 24px; }
  .acc-domain.expanded .acc-domain-inner { padding-bottom:8px; }

  .acc-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); flex-wrap:wrap; opacity:0; transform:translateX(-10px); animation:accRowIn .4s cubic-bezier(.2,.8,.2,1) forwards; }
  .acc-row-skel { opacity:1; transform:none; animation:none; }
  .acc-row-skel .acc-avatar { background-color:var(--skel-a); }
  .acc-row.leaving { animation:accRowOut .22s ease forwards; }
  .acc-row-main { flex:1; min-width:170px; }
  .acc-row .acc-actions { margin-left:auto; }
  @keyframes accRowIn { to { opacity:1; transform:none; } }
  @keyframes accRowOut { to { opacity:0; transform:translateX(14px) scale(.97); } }

  .acc-domain-locked .acc-domain-head { cursor:pointer; }
  .acc-domain-locked .acc-locked-icon { width:38px; height:38px; border-radius:12px; }
  .acc-locked { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 4px 14px; border-top:1px solid var(--line); }
  .acc-locked-icon { width:42px; height:42px; border-radius:14px; background:var(--yellow-soft); color:var(--yellow-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; animation:accLockPulse 2.4s ease infinite; }
  .acc-locked > div:nth-child(2) { flex:1; min-width:200px; }
  .acc-locked p, .acc-state p { margin:3px 0 0; font-size:13px; color:var(--ink-soft); font-weight:600; }
  @keyframes accLockPulse { 0%,100% { box-shadow:0 0 0 0 rgba(201,138,0,0.28); } 50% { box-shadow:0 0 0 7px rgba(201,138,0,0); } }
  .acc-state { text-align:center; padding:26px 12px 22px; border-top:1px solid var(--line); }
  .acc-state-title { font-weight:800; font-size:14.5px; margin-bottom:2px; }
  .acc-state .msg-action-btn { margin:14px auto 0; justify-content:center; }
  .acc-dns-warn { margin:4px 0 12px; padding:11px 14px; border-radius:12px; background:var(--red-soft); color:var(--red-deep); font-size:12.5px; font-weight:700; line-height:1.45; }

  .acc-dns-panel { border-top:1px solid var(--line); padding:16px 0 4px; }
  .acc-dns-toggle { display:inline-flex; align-items:center; gap:6px; }
  .acc-dns-live { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
  .acc-dns-live-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .acc-dns-live-label { font-weight:800; font-size:12.5px; min-width:44px; }
  .acc-dns-live-detail { font-size:11px; color:var(--ink-soft); font-family:'JetBrains Mono', monospace; word-break:break-all; flex-basis:100%; }
  .acc-dns-checked { font-size:11.5px; color:var(--ink-soft); font-weight:700; margin-bottom:14px; }
  .acc-dns-table { display:flex; flex-direction:column; gap:10px; }
  .acc-dns-row { background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; }
  .acc-dns-row-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
  .acc-dns-type { font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px; background:var(--blue-soft); color:var(--blue-deep); flex-shrink:0; }
  .acc-dns-name { font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; word-break:break-all; }
  .acc-dns-value { font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--ink-soft); word-break:break-all; background:var(--paper-raised); border-radius:8px; padding:8px 10px; margin-top:4px; }
  .acc-dns-note { font-size:11.5px; color:var(--ink-soft); font-weight:600; margin-top:6px; }
  .acc-dns-copy { background:none; border:1.5px solid var(--line); border-radius:8px; font:inherit; font-size:11px; font-weight:800; color:var(--ink-soft); padding:3px 9px; cursor:pointer; margin-left:auto; flex-shrink:0; }
  .acc-dns-copy:hover { color:var(--ink); border-color:var(--ink-soft); }
  .acc-dns-actions { margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

  .acc-form-error { font-size:12.5px; font-weight:700; color:var(--red-deep); min-height:0; max-height:0; opacity:0; overflow:hidden; transition:max-height .2s ease, opacity .2s ease, margin .2s ease; }
  .acc-form-error.show { max-height:60px; opacity:1; margin-top:10px; }
  .acc-submit { width:100%; justify-content:center; margin-top:14px; }
  .acc-submit:disabled { opacity:.6; cursor:progress; }
  .acc-preview { font-size:12.5px; color:var(--ink-soft); margin:8px 0 0; }
  .acc-admins-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  .acc-admin-chip { display:flex; align-items:center; gap:10px; justify-content:space-between; background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13px; }
  .acc-link-danger { background:none; border:none; color:var(--red-deep); font:inherit; font-weight:800; font-size:12.5px; cursor:pointer; padding:2px 4px; }
  .acc-link-danger:hover { text-decoration:underline; }
  .acc-only { font-size:11px; font-weight:800; color:var(--ink-soft); }

  @media (max-width:760px) {
    .acc-card { padding:18px 16px; }
    .acc-domain-head { padding:16px; }
    .acc-domain-inner { padding:0 16px; }
    .acc-row .acc-actions, .acc-domain-head .acc-actions { width:100%; margin-left:0; }
  }
  @media (prefers-reduced-motion: reduce) { .acc-row, .acc-panel.active, .acc-locked-icon { animation:none !important; opacity:1; transform:none; } }

  /* ---- Tela de login: botão de tema (claro/escuro) ---- */
  .login-theme-toggle { position:fixed; top:16px; right:16px; z-index:10; width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:color .15s ease, border-color .15s ease, transform .15s ease; }
  .login-theme-toggle:hover { color:var(--ink); border-color:var(--blue-soft); }
  .login-theme-toggle:active { transform:scale(.92); }
  .login-theme-toggle:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
  .login-theme-toggle svg { position:absolute; transition:opacity .25s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
  .login-theme-toggle .ic-moon { opacity:1; transform:rotate(0) scale(1); }
  .login-theme-toggle .ic-sun { opacity:0; transform:rotate(-90deg) scale(.5); }
  .login-theme-toggle.is-dark .ic-moon { opacity:0; transform:rotate(90deg) scale(.5); }
  .login-theme-toggle.is-dark .ic-sun { opacity:1; transform:rotate(0) scale(1); }
  @media (prefers-reduced-motion: reduce) { .login-theme-toggle, .login-theme-toggle svg { transition:none; } }

  /* Conta: o "+" flutuante não tem o que criar nesta seção */
  body.on-account-view .compose-fab { display:none; }
  /* Conta (tema escuro): o botão primário usa --ink-fixed (sempre escuro) e sumia no fundo escuro — vira azul */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .acc-actions .msg-action-btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
    :root:not([data-theme="light"]) .acc-actions .msg-action-btn.primary:hover { background:var(--blue-deep-fixed); border-color:var(--blue-deep-fixed); }
  }
  :root[data-theme="dark"] .acc-actions .msg-action-btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
  :root[data-theme="dark"] .acc-actions .msg-action-btn.primary:hover { background:var(--blue-deep-fixed); border-color:var(--blue-deep-fixed); }

  /* ---- Tela de login: "Esqueci minha senha" ---- */
  .login-shell { flex-direction:column; }
  .login-card[hidden] { display:none; }
  .login-swap { animation:loginSwap .35s cubic-bezier(.2,.8,.2,1); }
  @keyframes loginSwap { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
  .login-link { display:block; width:100%; margin-top:12px; padding:6px; background:none; border:none; color:var(--ink-soft); font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; border-radius:8px; transition:color .15s ease; }
  .login-link:hover { color:var(--blue-deep); text-decoration:underline; }
  .login-link:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
  .login-code { font-family:'JetBrains Mono', monospace; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
  .login-card .login-help { margin:14px 0 0; font-size:12px; line-height:1.5; text-align:center; }
  .login-done { text-align:center; }
  .login-done .login-submit { margin-top:6px; }
  .login-done-icon { width:62px; height:62px; margin:2px auto 16px; border-radius:50%; background:var(--green-soft); color:var(--green-deep); display:flex; align-items:center; justify-content:center; animation:loginPop .5s cubic-bezier(.34,1.56,.64,1) both; }
  .login-done-icon svg { stroke-dasharray:30; stroke-dashoffset:30; animation:loginDraw .45s .25s ease forwards; }
  @keyframes loginPop { from { transform:scale(.4); opacity:0; } to { transform:none; opacity:1; } }
  @keyframes loginDraw { to { stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce) { .login-swap, .login-done-icon, .login-done-icon svg { animation:none; stroke-dashoffset:0; } }

  /* ---- Conta: códigos de recuperação ---- */
  .acc-codes-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0 12px; }
  .acc-code { font-family:'JetBrains Mono', monospace; font-weight:600; font-size:13px; letter-spacing:.08em; text-align:center; padding:10px 6px; border-radius:10px; background:var(--blue-soft); color:var(--blue-deep); border:1px solid var(--line); user-select:all; opacity:0; transform:translateY(8px) scale(.96); animation:accCodeIn .4s cubic-bezier(.34,1.56,.64,1) forwards; }
  @keyframes accCodeIn { to { opacity:1; transform:none; } }
  .acc-codes-actions { display:flex; gap:8px; margin-bottom:14px; }
  .acc-codes-actions .msg-action-btn { flex:1; justify-content:center; }
  .acc-codes-ack { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; padding:10px 12px; border-radius:10px; background:var(--gray-soft); cursor:pointer; }
  .acc-codes-ack input { width:17px; height:17px; accent-color:var(--blue); flex-shrink:0; }
  @media (prefers-reduced-motion: reduce) { .acc-code { animation:none; opacity:1; transform:none; } }

  /* ============ Compra de espaço (storage.js) ============ */
  .bm-card { max-width:460px; }
  .bm-body { padding:18px 22px 22px; }
  .bm-step.bm-in { animation:bmIn .38s cubic-bezier(.2,.8,.2,1); }
  @keyframes bmIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
  .bm-skel { height:26px; border-radius:12px; margin-bottom:12px; }
  .bm-current { margin:0 0 12px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
  .bm-current strong { color:var(--ink); }
  .bm-chip { font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--green-soft); color:var(--green-deep); margin-left:6px; white-space:nowrap; }

  .bm-size { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:14px 16px 12px; }
  .bm-size-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
  .bm-size-label { font-size:12.5px; font-weight:800; color:var(--ink-soft); }
  .bm-size-val { font-family:'Fredoka', sans-serif; font-weight:700; font-size:30px; line-height:1.1; color:var(--blue-deep); display:inline-block; }
  .bm-pop { animation:bmPop .3s cubic-bezier(.34,1.56,.64,1); }
  @keyframes bmPop { 0% { transform:scale(.88); } 60% { transform:scale(1.08); } 100% { transform:scale(1); } }
  #bm-slider { -webkit-appearance:none; appearance:none; display:block; width:100%; height:8px; border-radius:99px; margin:12px 0 10px; outline:none; cursor:pointer; background:linear-gradient(90deg, var(--blue) var(--p, 0%), var(--line) var(--p, 0%)); }
  #bm-slider::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--blue); box-shadow:0 3px 10px rgba(47,91,255,.45); transition:transform .15s ease; }
  #bm-slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--blue); box-shadow:0 3px 10px rgba(47,91,255,.45); }
  #bm-slider:hover::-webkit-slider-thumb { transform:scale(1.15); }
  #bm-slider:active::-webkit-slider-thumb { transform:scale(1.28); }
  #bm-slider:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
  .bm-size-foot { display:flex; justify-content:space-between; gap:8px; font-size:11.5px; font-weight:700; color:var(--ink-soft); }
  .bm-total { color:var(--ink); font-weight:800; }

  .bm-pills { display:grid; grid-template-columns:repeat(3, 1fr); gap:9px; }
  .bm-pill { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:11px 6px 9px; border-radius:12px; border:1.5px solid var(--line); background:var(--paper-raised); color:var(--ink); font:inherit; cursor:pointer; transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, background .15s ease, box-shadow .2s ease; }
  .bm-pill:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--blue); }
  .bm-pill:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
  .bm-pill-label { font-weight:800; font-size:13px; }
  .bm-pill-off { font-size:11px; font-weight:800; color:var(--green-deep); }
  .bm-pill.active { border-color:var(--blue); background:var(--blue-soft); box-shadow:0 8px 18px -8px rgba(47,91,255,.55); transform:translateY(-2px) scale(1.03); }
  .bm-pill.active .bm-pill-label { color:var(--blue-deep); }
  .bm-pill:disabled { opacity:.38; cursor:not-allowed; }

  @keyframes bmSpin { to { transform:rotate(360deg); } }
  .bm-cta { width:100%; justify-content:center; }
  .bm-cta:disabled { opacity:.6; cursor:progress; }

  .bm-back { background:none; border:none; color:var(--ink-soft); font:inherit; font-weight:800; font-size:12.5px; cursor:pointer; padding:0 0 10px; }
  .bm-back:hover { color:var(--ink); }
  .bm-recap { display:flex; align-items:center; gap:6px; padding:12px 14px; border-radius:12px; background:var(--blue-soft); color:var(--blue-deep); font-size:13px; margin-bottom:14px; }
  .bm-recap span { margin-left:auto; font-weight:800; }
  .bm-field { display:block; margin-bottom:12px; }
  .bm-field > span { display:block; font-size:12px; font-weight:800; color:var(--ink-soft); margin-bottom:6px; }
  .bm-hint { font-size:11.5px; color:var(--ink-soft); font-weight:600; margin:0 0 8px; }

  .bm-pay-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
  .bm-pay-amount-group { display:flex; align-items:baseline; gap:8px; }
  .bm-pay-amount { font-family:'Fredoka', sans-serif; font-weight:700; font-size:28px; }
  /* O valor de verdade a cobrar (unique_amount do pangeia-pay) pode vir um pouco menor que o preço
     cheio (ajuste de reconciliação) — quando isso acontece, mostra o preço cheio riscado ao lado,
     como um desconto; nunca aparece se o valor único for igual ou maior. */
  .bm-pay-amount-old { font-size:13px; font-weight:700; color:var(--ink-soft); text-decoration:line-through; }
  .bm-pay-amount-old[hidden] { display:none; }
  .bm-countdown { font-family:'JetBrains Mono', monospace; font-weight:700; font-size:15px; padding:4px 10px; border-radius:10px; background:var(--gray-soft); color:var(--gray-deep); }
  .bm-countdown.late { background:var(--red-soft); color:var(--red-deep); animation:bmBlink 1s ease-in-out infinite; }
  @keyframes bmBlink { 50% { opacity:.55; } }
  .bm-qr-wrap { position:relative; width:216px; height:216px; margin:0 auto 14px; padding:8px; border-radius:18px; background:#fff; border:1px solid var(--line); overflow:hidden; box-shadow:0 12px 30px -14px rgba(0,0,0,.35); }
  .bm-qr-wrap img { display:block; width:200px; height:200px; image-rendering:pixelated; }
  .bm-qr-scan { position:absolute; left:0; right:0; height:46px; background:linear-gradient(180deg, rgba(47,91,255,0), rgba(47,91,255,.24), rgba(47,91,255,0)); animation:bmScan 2.4s ease-in-out infinite; pointer-events:none; }
  @keyframes bmScan { 0% { top:-46px; } 100% { top:216px; } }
  .bm-pix-row { display:flex; gap:8px; margin-bottom:14px; }
  .bm-pix { font-family:'JetBrains Mono', monospace; font-size:11.5px; text-overflow:ellipsis; }
  .bm-wait { display:flex; align-items:center; justify-content:center; gap:10px; padding:11px; border-radius:12px; background:var(--blue-soft); color:var(--blue-deep); font-size:13px; font-weight:800; text-align:center; }
  .bm-dot { flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--blue); animation:bmPulse 1.4s ease-out infinite; }
  @keyframes bmPulse { 0% { box-shadow:0 0 0 0 rgba(47,91,255,.55); } 100% { box-shadow:0 0 0 12px rgba(47,91,255,0); } }
  .bm-wait-off { background:var(--gray-soft); color:var(--gray-deep); }
  .bm-wait-off .bm-dot { animation:none; background:var(--ink-soft); }
  .bm-retry { display:flex; margin:10px auto 0; }
  .bm-retry[hidden] { display:none; }

  .bm-done { position:relative; text-align:center; padding-top:8px; overflow:hidden; }
  .bm-done h4 { margin:0 0 4px; font-size:22px; font-weight:800; }
  .bm-done p { margin:0 0 18px; font-size:13.5px; font-weight:600; color:var(--ink-soft); line-height:1.5; }
  .bm-done-icon { position:relative; width:78px; height:78px; margin:6px auto 16px; border-radius:50%; background:var(--green-soft); color:var(--green-deep); display:flex; align-items:center; justify-content:center; animation:bmPop .6s cubic-bezier(.34,1.56,.64,1) both; }
  .bm-done-icon::before, .bm-done-icon::after { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--green); opacity:0; animation:bmRing 1.6s ease-out .2s infinite; }
  .bm-done-icon::after { animation-delay:.9s; }
  @keyframes bmRing { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(1.9); opacity:0; } }
  .bm-done-icon svg { stroke-dasharray:30; stroke-dashoffset:30; animation:bmDraw .5s .3s ease forwards; }
  @keyframes bmDraw { to { stroke-dashoffset:0; } }
  .bm-confetti { position:absolute; left:50%; top:62px; width:0; height:0; pointer-events:none; }
  .bm-confetti i { position:absolute; width:8px; height:12px; border-radius:2px; opacity:0; animation:bmConf 1.15s var(--d, 0ms) cubic-bezier(.2,.7,.3,1) forwards; }
  @keyframes bmConf { 0% { opacity:1; transform:translate(0,0) rotate(0); } 100% { opacity:0; transform:translate(var(--x), var(--y)) rotate(var(--r)); } }

  .bm-empty { text-align:center; padding:18px 6px 8px; }
  .bm-empty-icon { width:56px; height:56px; margin:0 auto 12px; border-radius:18px; background:var(--blue-soft); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; animation:bmSpin 10s linear infinite; }
  .bm-empty strong { display:block; font-size:15px; margin-bottom:4px; }
  .bm-empty p { margin:0; font-size:13px; color:var(--ink-soft); font-weight:600; line-height:1.5; }

  @media (max-width:520px) {
    .bm-body { padding:16px 16px 20px; }
      .bm-pill { padding:10px 4px 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bm-step.bm-in, .bm-pop, .bm-qr-scan, .bm-dot, .bm-done-icon, .bm-done-icon::before, .bm-done-icon::after, .bm-empty-icon, .bm-confetti i, .bm-countdown.late { animation:none !important; }
    .bm-done-icon svg { stroke-dashoffset:0; animation:none; }
    .bm-confetti { display:none; }
  }

  /* Bounce por DNS: card que explica o que falta (mail.js: renderDnsBounce) */
  .dns-card { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:var(--red-soft); color:var(--red-deep); margin-bottom:22px; border:1px solid color-mix(in srgb, var(--red) 28%, transparent); animation:dnsIn .35s cubic-bezier(.2,.8,.2,1); }
  .dns-card[hidden] { display:none; }
  .dns-card-icon { flex-shrink:0; width:34px; height:34px; border-radius:11px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; }
  .dns-card-body strong { display:block; font-size:13.5px; font-weight:800; line-height:1.4; }
  .dns-card-body p { margin:4px 0 0; font-size:12.5px; font-weight:600; line-height:1.5; color:var(--ink); }
  .dns-card-body .msg-action-btn { margin-top:10px; }
  @keyframes dnsIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) { .dns-card { animation:none; } }

  /* ---- compra de espaço: passo de escolha ENXUTO (estilo do mock: cartão escuro de preço, 3 prazos) ---- */
  .bm-pills { margin-top:14px; }
  .bm-price { margin-top:14px; padding:14px 16px; border-radius:16px; background:var(--ink-fixed); color:#fff; text-align:left; }
  .bm-price-main { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .bm-price-val { font-family:'Fredoka', sans-serif; font-weight:700; font-size:32px; line-height:1.1; font-variant-numeric:tabular-nums; }
  .bm-price-old { font-size:13px; font-weight:700; color:rgba(255,255,255,.5); text-decoration:line-through; }
  .bm-price-off { display:inline-flex; font-size:11px; font-weight:800; background:var(--green); color:#fff; padding:2px 9px; border-radius:99px; align-self:center; }
  .bm-price-old[hidden], .bm-price-off[hidden] { display:none; }
  .bm-price-sub { font-size:12px; font-weight:700; color:rgba(255,255,255,.62); margin-top:4px; }
  .bm-cta { margin-top:12px; }
  .bm-rule { font-size:11.5px; color:var(--ink-soft); font-weight:600; line-height:1.45; margin:10px 0 0; text-align:center; }
  .bm-card .modal-body.bm-body { padding-top:16px; padding-bottom:18px; }
  .bm-card .bm-size { padding:12px 14px 10px; }
  .bm-card .bm-size-val { font-size:26px; }
  .bm-card #bm-slider { margin:10px 0 8px; }

  /* ============ Listas com no máximo 6 linhas e rolagem própria + "Outras caixas" ============ */
  /* 6 linhas × 39px (37px da linha + 2px de margem) = 234px; a 7ª só aparece rolando. */
  .scroll6 { max-height:234px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line) transparent; position:relative; }
  .scroll6::-webkit-scrollbar { width:6px; }
  .scroll6::-webkit-scrollbar-thumb { background:var(--line); border-radius:6px; }
  .scroll6.fade-b { -webkit-mask-image:linear-gradient(#000 calc(100% - 26px), transparent); mask-image:linear-gradient(#000 calc(100% - 26px), transparent); }
  .scroll6.fade-t { -webkit-mask-image:linear-gradient(transparent, #000 26px); mask-image:linear-gradient(transparent, #000 26px); }
  .scroll6.fade-t.fade-b { -webkit-mask-image:linear-gradient(transparent, #000 26px, #000 calc(100% - 26px), transparent); mask-image:linear-gradient(transparent, #000 26px, #000 calc(100% - 26px), transparent); }
  .oc-head { display:flex; align-items:center; justify-content:space-between; }
  .folder.oc-folder .fl { min-width:0; }
  .folder.oc-folder .fl .oc-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .oc-empty { margin:2px 4px 6px; padding:12px; border:1.5px dashed var(--line); border-radius:12px; text-align:center; font-size:12.5px; font-weight:600; color:var(--ink-soft); line-height:1.45; }
  .oc-empty button { margin-top:8px; }
  .oc-modal-list { max-height:300px; margin-bottom:12px; }
  .oc-add-row { gap:8px; }
  .oc-add-row .btn-dark { white-space:nowrap; flex-shrink:0; }
  .oc-add-row input { min-width:0; }
  .oc-add-row select { max-width:112px; min-width:0; border:1.5px solid var(--line); border-radius:10px; background:var(--paper-raised); color:var(--ink); font-size:12.5px; font-weight:700; padding:0 8px; }
  .oc-row-path { font-size:10.5px; font-weight:700; color:var(--ink-soft); padding:0 8px; }

  /* Retorno visual de criar / renomear / apagar caixas */
  @keyframes ocSpin { to { transform:rotate(360deg); } }
  @keyframes ocShimmer { from { background-position:-120px 0; } to { background-position:240px 0; } }
  @keyframes ocRemove { to { opacity:0; transform:translateX(-14px); max-height:0; padding-top:0; padding-bottom:0; margin:0; } }
  @keyframes ocFlash { 0% { background:var(--green-soft, #d9f3e8); box-shadow:0 0 0 0 rgba(23,166,114,.35); } 70% { box-shadow:0 0 0 7px rgba(23,166,114,0); } 100% { background:transparent; box-shadow:0 0 0 0 rgba(23,166,114,0); } }
  .oc-spin { display:inline-block; width:13px; height:13px; border:2px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:ocSpin .7s linear infinite; flex-shrink:0; vertical-align:-2px; margin-right:6px; }
  .oc-spin-light { border-color:rgba(255,255,255,.35); border-top-color:#fff; }
  .folder > .oc-spin { margin:0 2px 0 0; }
  .oc-status { display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; color:var(--ink-soft); white-space:nowrap; flex-shrink:0; padding-right:4px; }
  .cat-row.oc-busy, .folder.oc-busy { pointer-events:none; position:relative; background-image:linear-gradient(90deg, transparent, rgba(47,91,255,.10), transparent); background-size:120px 100%; background-repeat:no-repeat; animation:ocShimmer 1.1s linear infinite; }
  .cat-row.oc-busy input { opacity:.6; min-width:0; }
  .cat-row.oc-busy .cat-swatches { display:none; } /* o andamento ocupa o lugar das cores: o nome da categoria continua inteiro */
  .folder.oc-busy { color:var(--ink-soft); }
  .oc-removing { overflow:hidden; animation:ocRemove .3s ease forwards; pointer-events:none; }
  .oc-flash { animation:ocFlash 1.4s ease-out; border-radius:10px; }
  .oc-add-row .btn-dark:disabled { opacity:.85; cursor:progress; }
  @media (prefers-reduced-motion: reduce) { .oc-busy, .oc-removing, .oc-flash { animation:none !important; } .oc-removing { display:none; } }

  /* Seção encolhível das caixas extras (logo abaixo de Rascunhos): todas visíveis, sem rolagem própria */
  .oc-toggle { display:flex; align-items:center; gap:7px; background:none; border:none; padding:6px 10px; margin:2px 0 2px; width:100%; font:inherit; font-size:12px; font-weight:800; color:var(--ink-soft); cursor:pointer; border-radius:10px; text-align:left; transition:background .15s ease, color .15s ease; }
  .oc-toggle:hover { color:var(--ink); background:var(--gray-soft); }
  .oc-toggle:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
  .oc-chev { transition:transform .25s cubic-bezier(.34,1.56,.64,1); flex-shrink:0; }
  .oc[data-open="1"] .oc-chev { transform:rotate(90deg); }
  .oc-count { margin-left:auto; font-size:10px; font-weight:800; color:var(--ink-soft); background:var(--gray-soft); padding:1px 7px; border-radius:999px; }
  .oc-body { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .28s ease, opacity .22s ease; }
  .oc[data-open="1"] .oc-body { grid-template-rows:1fr; opacity:1; }
  .oc-inner { overflow:hidden; min-height:0; }
  .oc[hidden] { display:none; }
  @media (prefers-reduced-motion: reduce) { .oc-chev, .oc-body { transition:none; } }

  /* Celular: a barra lateral e o trilho (onde ficavam Sair, tema e instalar) não existem; aqui eles viram um cartão na tela Conta */
  .acc-mobile-only { display:none; }
  @media (max-width:760px) {
    .acc-mobile-only { display:block; margin-top:14px; padding:6px 8px; }
    .acc-app-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:10px 8px 4px; }
    .acc-app-row { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:0 8px; background:none; border:none; border-radius:10px; color:var(--ink); font:inherit; font-size:14px; font-weight:700; text-align:left; cursor:pointer; }
    .acc-app-row + .acc-app-row { border-top:1px solid var(--line); border-radius:0; }
    .acc-app-row:active { background:var(--gray-soft); }
    .acc-app-row[hidden] { display:none; }
    .acc-app-row svg { flex-shrink:0; color:var(--ink-soft); }
    .acc-app-danger, .acc-app-danger svg { color:var(--red-deep); }
    .acc-app-row.is-busy { opacity:.6; pointer-events:none; }
  }

  @media (pointer:coarse) { .contact-card, .kanban-card { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; } }
  @media (pointer:coarse) { .msg { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; } }

  .nav-bump { position:fixed; left:50%; top:50%; z-index:400; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:26px; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; background:color-mix(in srgb, var(--paper-raised) 78%, transparent); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border:1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow:0 18px 44px -14px rgba(23,19,43,.45); }
  .nav-bump img { width:44px; height:44px; border-radius:12px; }
  .nav-bump.show { animation:navBump .9s cubic-bezier(.2,.9,.25,1) both; }
  @keyframes navBump { 0% { opacity:0; transform:scale(.6); } 22% { opacity:1; transform:scale(1.06); } 40% { transform:scale(.98); } 60% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(.94); } }
  @media (prefers-reduced-motion:reduce) { .nav-bump.show { animation:navBumpFade .9s ease both; } @keyframes navBumpFade { 0%,100% { opacity:0; } 20%,60% { opacity:1; } } }
  svg[hidden] { display:none !important; } /* o atributo hidden não esconde <svg> sozinho: os dois ícones de tema apareciam juntos */

  .cmdk-sub-wrap { margin:14px 0 4px; text-align:center; }
  .cmdk-empty .cmdk-sub-wrap { margin-top:18px; }
  .cmdk-substr { height:36px; padding:0 16px; border-radius:99px; border:1.5px dashed var(--line); background:none; color:var(--blue); font:inherit; font-size:13px; font-weight:800; cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .15s ease; }
  .cmdk-substr:hover { background:var(--blue-soft); border-color:var(--blue); }
  .cmdk-substr:active { transform:scale(.96); }

  .rail .logo-dot { border:none; padding:0; cursor:pointer; background:linear-gradient(135deg, #2f5bff, #1730a8); box-shadow:0 8px 18px -10px rgba(47,91,255,.9); transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease; }
  .rail .logo-dot:hover { transform:translateY(-1px) scale(1.06); box-shadow:0 12px 22px -10px rgba(47,91,255,1); }
  .rail .logo-dot:active { transform:scale(.94); }
  .rail .logo-dot:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }

  /* e-mail sinalizado: o alerta SUBSTITUI o avatar (mesmo círculo), como no mockup da landing; linha com gradiente vermelho sutil */
  .avatar-alert { position:relative; transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
  .avatar-alert.alert-red { background:var(--red-soft); color:var(--red); }
  .avatar-alert.alert-yellow { background:var(--yellow-soft); color:var(--yellow); }
  .msg.flag-red { background:linear-gradient(90deg, rgba(229,68,58,0.06), transparent); }
  .msg.flag-yellow { background:linear-gradient(90deg, rgba(201,138,0,0.07), transparent); }
  .msg.flag-red.selected, .msg.flag-red.is-checked, .msg.flag-yellow.selected, .msg.flag-yellow.is-checked { background:var(--blue-soft); }
  .msg:hover .avatar-alert { transform:scale(1.05); }
  .cmdk-avatar.avatar-alert { width:40px; height:40px; }

  /* código-fonte da mensagem */
  .source-card { max-width:860px; }
  .source-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 22px 0; }
  .source-btn { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:11px; border:1.5px solid var(--line); background:var(--paper-raised); color:var(--ink); font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
  .source-btn:hover:not(:disabled) { border-color:var(--blue); }
  .source-btn:active:not(:disabled) { transform:scale(.96); }
  .source-btn:disabled { opacity:.45; cursor:default; }
  .source-btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
  .source-btn.done { background:var(--green); border-color:var(--green); color:#fff; }
  .source-btn.failed { background:var(--red); border-color:var(--red); color:#fff; }
  .source-wrap { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; margin-left:auto; }
  .source-size { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-soft); font-weight:700; min-width:48px; text-align:right; }
  .source-pre { white-space:pre-wrap; word-break:break-word; font-size:11.5px; line-height:1.55; max-height:60vh; overflow:auto; background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:14px; margin:0; user-select:text; -webkit-user-select:text; }
  .source-pre.nowrap { white-space:pre; word-break:normal; }
  .source-loading { display:flex; flex-direction:column; gap:12px; padding:18px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper-raised); }
  .source-skel { height:11px; border-radius:6px; display:block; }
  .source-error { text-align:center; padding:34px 16px; font-weight:700; color:var(--ink-soft); border:1.5px dashed var(--line); border-radius:12px; display:flex; flex-direction:column; align-items:center; gap:14px; }
  .source-error[hidden], .source-loading[hidden], .source-pre[hidden] { display:none; }
  @media (max-width:760px) { .source-tools { padding:12px 16px 0; } .source-wrap { margin-left:0; } .source-pre { max-height:55vh; } }