/* ============================================================
   FONTES self-hosted (Fase 2) — sem CDN. Roboto (corpo, tem figuras
   tabulares) + Sora (marca). woff2 latin + latin-ext em /public/fonts.
   ============================================================ */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/roboto-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/roboto-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/roboto-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/roboto-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/roboto-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/roboto-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/sora-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/sora-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sora-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/sora-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/roboto-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/roboto-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:200;font-display:swap;src:url('/fonts/sora-200-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:200;font-display:swap;src:url('/fonts/sora-200-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   DESIGN TOKENS (Fase 2) — camada dupla: primitivos + semântica.
   As telas devem consumir SÓ a semântica (--surface-*, --text-*, --border-*,
   --action-*, --state-*). Direção: Slate frio + acento laranja da marca.
   Migração das telas p/ estes tokens = Fase 3.
   ============================================================ */
:root {
  /* primitivos: neutro (slate frio; 900 = sora-night da marca) */
  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1;
  --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1E293B; --slate-900:#0E1016;
  /* primitivos: marca */
  --brand-50:#FFF3EE; --brand-100:#FEE4D8; --brand-200:#FDC7AE; --brand-300:#FBA47C;
  --brand-400:#F87D46; --brand-500:#F15A22; --brand-600:#D64C18; --brand-700:#B03C11;
  --brand-action:#C2481A; --brand-action-hover:#A83E12;   /* fundo de botão c/ texto branco = AA */
  /* primitivos: estados */
  --green-50:#ECFDF5; --green-200:#A7F3D0; --green-700:#047857;
  --amber-50:#FFFBEB; --amber-200:#FDE68A; --amber-700:#B45309;
  --red-50:#FEF2F2;   --red-200:#FECACA;   --red-700:#B91C1C;
  --blue-50:#EFF6FF;  --blue-200:#BFDBFE;  --blue-700:#1D4ED8;
  /* primitivos: paleta de dados (chart) — daltônico-segura, ordenada p/ separação em cinza */
  --chart-1:#0EA5E9; --chart-2:#F15A22; --chart-3:#16A34A; --chart-4:#8B5CF6;
  --chart-5:#EAB308; --chart-6:#EC4899; --chart-7:#14B8A6; --chart-8:#64748B;
  --var-pos:#2563EB; --var-neg:#EA580C;   /* variância +/- (sempre com seta+sinal; != estados) */

  /* semântica */
  --surface-page:var(--slate-50); --surface-card:#FFFFFF; --surface-sunken:var(--slate-100);
  --border-subtle:var(--slate-200); --border-strong:var(--slate-300);
  --text-primary:var(--slate-900); --text-secondary:var(--slate-600); --text-muted:var(--slate-400);
  --action-primary:var(--brand-action); --action-primary-hover:var(--brand-action-hover);
  --focus-ring:var(--brand-500);
  --state-success-bg:var(--green-50); --state-success-border:var(--green-200); --state-success-text:var(--green-700);
  --state-warning-bg:var(--amber-50); --state-warning-border:var(--amber-200); --state-warning-text:var(--amber-700);
  --state-danger-bg:var(--red-50);   --state-danger-border:var(--red-200);   --state-danger-text:var(--red-700);
  --state-info-bg:var(--blue-50);    --state-info-border:var(--blue-200);    --state-info-text:var(--blue-700);

  /* não-cor */
  --radius-sm:.5rem; --radius-md:.75rem; --radius-lg:1rem; --radius-pill:9999px;
  --border-hairline:1px; --border-emphasis:2px;
  --elev-1:0 1px 2px rgba(2,6,23,.06);
  --elev-2:0 4px 12px -4px rgba(2,6,23,.10);
  --elev-3:0 16px 40px -16px rgba(2,6,23,.20);   /* só modal/drawer */
}
/* tema escuro: remapeia a MESMA semântica (unifica a antiga camada --d-*) */
:root.dark, html.dark {
  --surface-page:#0E1116; --surface-card:#15181C; --surface-sunken:#1A1E23;
  --border-subtle:#23282F; --border-strong:#353B43;
  --text-primary:#E6E8EB; --text-secondary:#A3ABB5; --text-muted:#8B939D;
  --state-success-bg:rgba(22,163,74,.15); --state-warning-bg:rgba(217,119,6,.16);
  --state-danger-bg:rgba(220,38,38,.15);  --state-info-bg:rgba(37,99,235,.16);
  --action-primary:var(--brand-action); --action-primary-hover:var(--brand-action-hover);
}
/* figuras tabulares (KPI/colunas numéricas) — requisito duro */
.num { font-variant-numeric: tabular-nums; }

html, body { font-family: 'Roboto', sans-serif; background: #FFFFFF; }
    /* Datepickers nativos com aparência consistente */
    input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
    input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
    /* Scrollbar discreta */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 8px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }
    /* Spinner de botão desativado a pedido: nenhum botão do sistema mostra o círculo
       girando (o botão ainda desabilita brevemente durante a ação = feedback suficiente). */
    .spinner {
      width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.4);
      border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
      display: none !important; vertical-align: middle;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Entradas */
    .fade-in { animation: fade .3s ease both; }
    @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

    /* Stagger de entrada (campos do login) */
    .stagger > * { animation: rise .5s cubic-bezier(.16,1,.3,1) both; }
    .stagger > *:nth-child(1) { animation-delay: .05s; }
    .stagger > *:nth-child(2) { animation-delay: .10s; }
    .stagger > *:nth-child(3) { animation-delay: .15s; }
    .stagger > *:nth-child(4) { animation-delay: .20s; }
    .stagger > *:nth-child(5) { animation-delay: .25s; }
    .stagger > *:nth-child(6) { animation-delay: .30s; }
    .stagger > *:nth-child(7) { animation-delay: .35s; }
    .stagger > *:nth-child(8) { animation-delay: .40s; }
    .stagger > *:nth-child(9) { animation-delay: .45s; }
    .stagger > *:nth-child(n+10) { animation-delay: .5s; }

    /* Feedback tátil em botões primários/ação — afunda com mola no toque (Apple: response no pointer-down) */
    .tactile { transition: transform .13s cubic-bezier(.2,.9,.3,1.25), background-color .15s ease, box-shadow .15s ease; }
    .tactile:active { transform: scale(.96); }

    /* Botões só-ícone (header + ações): o SVG do lucide é fill:none (só traço). No
       Safari, clicar EM CIMA do traço faz o SVG virar o alvo do evento e o clique não
       dispara o handler do botão-pai — por isso "só funciona clicando um pouco acima /
       no canto". pointer-events:none no ícone joga TODO clique pro botão; display:block
       centra o ícone. Vale p/ qualquer botão com ícone (header, ações, chips, etc). */
    button svg, button i[data-lucide], a[role="button"] svg { pointer-events: none; }
    header button svg, #sidebarTopToggle svg, #themeToggle svg, #notifBtn svg,
    #newProjectBtn svg, #mobileMenuBtn svg { display: block; }

    /* Skeleton loading */
    .skeleton { background: linear-gradient(90deg,#eef1f4 25%,#e2e7ec 37%,#eef1f4 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: .5rem; }
    @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

    /* Cabeçalhos ordenáveis da tabela financeira */
    .fsort { cursor: pointer; user-select: none; transition: color .12s ease; white-space: nowrap; }
    .fsort:hover, .fsort:focus-visible { color: var(--slate-900); outline: none; }
    .fsort::after { content: '\2195'; opacity: .3; margin-left: .35em; font-size: .9em; font-weight: 700; }
    .fsort-right::after { margin-left: .3em; }
    .fsort.asc::after  { content: '\2191'; opacity: .95; color: var(--brand-500); }
    .fsort.desc::after { content: '\2193'; opacity: .95; color: var(--brand-500); }

    @media (prefers-reduced-motion: reduce) {
      .fade-in, .skeleton, .stagger > * { animation: none !important; }
      .tactile { transition: none; }
    }
  

    /* ===== Página cheia por menu (no lugar de modal flutuante) =====
       Aplicada aos 6 menu-modais: ocupam a área à direita da sidebar, sem backdrop;
       o card interno vira a página inteira (scroll interno preservado). --mp-left =
       largura da sidebar (setada por JS; 0 no mobile / sidebar oculta). */
    .menu-page {
      left: var(--mp-left, 0) !important;
      top: var(--mp-top, 0) !important;      /* começa abaixo do header global (que fica sempre visível) */
      z-index: 20 !important;                /* abaixo do header (z-30): o header global fica por cima */
      background: transparent !important;
      padding: 0 !important;
      transition: left .22s cubic-bezier(.2,.8,.2,1);
    }
    /* display:block só quando aberto — senão sobreporia o .hidden e todos ficariam visíveis */
    .menu-page:not(.hidden) { display: block !important; }
    .menu-page > div {
      width: 100% !important; max-width: none !important;
      height: 100% !important; max-height: none !important;
      border-radius: 0 !important; box-shadow: none !important;
    }

    /* Card Caixa do mês — laranja escurecido p/ texto branco passar AA (branco/#C2481A = 4.96:1);
       vira vermelho quando o saldo é negativo (sinal honesto, não o mesmo laranja triunfante). */
    .cash-card { background: linear-gradient(140deg, #C2481A 0%, #963310 100%); padding: 1.15rem 1.35rem; }
    .cash-card.cash-neg { background: linear-gradient(140deg, #B02A1E 0%, #7C1B15 100%); }
    /* Caixa compartilhada em modo "só leitura" (permission=read): esconde toda ação de mutação */
    .cash-readonly .cash-mut { display: none !important; }
    /* Card "Resultado do mês" — 3 zonas: eyebrow · headline+fluxo · rodapé detalhado */
    .cash-eyebrow { display:flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.74); margin-bottom:.9rem; }
    .cash-hero { display:flex; align-items:stretch; gap:1.1rem; flex-wrap:wrap; }
    .cash-hero-main { display:flex; flex-direction:column; justify-content:center; min-width:10rem; flex:1 1 12rem; }
    .cash-hero-val { font-size:clamp(1.9rem,4.2vw,2.5rem); font-weight:800; line-height:1.02; letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
    .cash-hero-lbl { font-size:.72rem; color:rgba(255,255,255,.68); margin-top:.2rem; }
    .cash-flow { display:flex; flex-direction:column; justify-content:center; gap:.4rem; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15); border-radius:.85rem; padding:.65rem .9rem; min-width:12.5rem; flex:0 1 auto; }
    .cash-flow-item { display:flex; align-items:center; justify-content:space-between; gap:1.75rem; }
    .cash-flow-lbl { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:rgba(255,255,255,.85); }
    .cash-flow-val { font-size:.98rem; font-weight:600; font-variant-numeric:tabular-nums; }
    .cash-foot { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:.95rem; padding-top:.8rem; border-top:1px solid rgba(255,255,255,.17); }
    .cash-foot-item { display:flex; flex-direction:column; gap:.12rem; min-width:0; padding:0 .9rem; }
    .cash-foot-item:first-child { padding-left:0; }
    .cash-foot-item + .cash-foot-item { border-left:1px solid rgba(255,255,255,.14); }
    .cash-foot-lbl { font-size:.67rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.62); }
    .cash-foot-val { font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; }

    /* ===== Caixa simples (modal #cashModal — Saldo/Poupança/Entrada-Saída/Movimentos).
       Escopado no container: o card "Caixa do mês" da Início (acima) já usa a classe
       .cash-hero com outro layout/semântica; sem o escopo #cashModal os dois colidiriam
       (mesmo nome, contextos diferentes — ver nota "CSS class collision" do projeto). */
    #cashModal .cash-hero { display:block; background:var(--brand-500); color:#fff; }
    #cashModal .cash-hero-label { font-size:.8rem; opacity:.9; }
    #cashModal .cash-hero-num { font-size:2rem; font-weight:800; line-height:1.1; margin-top:2px; }
    /* Negativo: --slate-900 (primitivo fixo, não reflui no dark) em vez de um pastel
       claro — testado 5.6:1 no brand-500 (#ffe0d6 do rascunho ficava em 2.7:1, abaixo
       até do mínimo de texto grande). */
    #cashModal .cash-hero-num.cash-neg-num { color:var(--slate-900); }
    #cashModal .cash-pou { background:var(--surface-card); border:1px solid var(--border-subtle); }
    #cashModal .cash-pou-label { font-size:.8rem; color:var(--text-muted); }
    #cashModal .cash-pou-num { font-size:1.25rem; font-weight:700; color:var(--text-primary); }
    #cashModal .cash-btn-ghost { display:inline-flex; align-items:center; gap:.35rem; min-height:40px; padding:.5rem .8rem; border-radius:var(--radius-md); border:1px solid var(--border-subtle); background:var(--surface-card); color:var(--text-secondary); font-size:.85rem; font-weight:600; cursor:pointer; transition:background-color .15s ease,border-color .15s ease; }
    #cashModal .cash-btn-ghost:hover { border-color:var(--action-primary); color:var(--text-primary); }
    #cashModal .cash-action { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:52px; border-radius:var(--radius-md); font-weight:700; font-size:.95rem; cursor:pointer; border:1px solid transparent; transition:filter .15s ease; }
    #cashModal .cash-action:hover { filter:brightness(1.05); }
    #cashModal .cash-action-in { background:var(--state-success-bg); color:var(--state-success-text); border-color:var(--state-success-border); }
    #cashModal .cash-action-out { background:var(--state-danger-bg); color:var(--state-danger-text); border-color:var(--state-danger-border); }
    /* Dark: só --state-*-bg é remapeado em html.dark (ver :root.dark acima); *-text/*-border
       ficam nos tons 700 "para fundo claro" e caem p/ ~2.7:1/~5.8:1 sobre o bg translúcido
       escuro. Reusa os mesmos tons já usados no dark-skin p/ text-green-700/text-red-700
       (linhas ~656-658) — testados ~8.4:1 e ~5.8:1 aqui. */
    /* Botões Entrada/Saída têm fill sólido + texto branco no bloco .cash-dark (abaixo);
       não sobrescrever a cor do texto aqui. */
    /* caixa compartilhada só-leitura: esconde entrada/saída/guardar/resgatar, ajustar e o apagar */
    #cashModal.cash-readonly .cash-action,
    #cashModal.cash-readonly .cash-btn-ghost,
    #cashModal.cash-readonly .cash-adj,
    #cashModal.cash-readonly .cash-mov-pay,
    #cashModal.cash-readonly .cash-mov-edit,
    #cashModal.cash-readonly .cash-mov-del { display:none; }
    #cashModal .cash-mov-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); }
    #cashModal .cash-mov-desc { font-size:.9rem; font-weight:500; color:var(--text-primary); }
    #cashModal .cash-mov-date { font-size:.72rem; color:var(--text-muted); }
    #cashModal .cash-mov-val { font-size:.95rem; font-weight:700; }
    #cashModal .cash-in { color:var(--state-success-text); }
    html.dark #cashModal .cash-in { color:#7BD45A; } /* verde alinhado ao botão Entrada (#56AB2F) */
    #cashModal .cash-out { color:var(--text-primary); }
    #cashModal .cash-mov-neutral { color:var(--text-muted); }
    #cashModal .cash-mov-del { color:var(--text-muted); font-size:1.1rem; line-height:1; padding:2px 6px; border-radius:6px; cursor:pointer; background:none; border:none; }
    #cashModal .cash-mov-del:hover { color:var(--state-danger-text); }
    html.dark #cashModal .cash-mov-del:hover { color:#f87171; } /* --state-danger-text fixo (~2.75:1 no dark) */
    #cashModal .cash-empty { color:var(--text-muted); font-size:.9rem; text-align:center; padding:20px; border:1px dashed var(--border-subtle); border-radius:var(--radius-md); }

    /* Extrato por mês: pencils de ajuste (hero/poupança), navegador de mês sticky,
       resumo do mês e linha do extrato com indicador de tipo (dot) + saldo corrente.
       Mesmo escopo #cashModal (ver nota acima). */
    #cashModal .cash-adj { display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:34px; border:none; background:none; color:var(--text-muted); cursor:pointer; border-radius:8px; }
    #cashModal .cash-adj:hover { color:var(--action-primary); background:var(--surface-sunken); }
    #cashModal .cash-hero .cash-adj { color:rgba(255,255,255,.85); }
    #cashModal .cash-hero .cash-adj:hover { color:#fff; background:rgba(255,255,255,.15); }
    #cashModal .cash-month-nav { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--surface-card); padding:4px 0; z-index:1; }
    #cashModal .cash-month-label { font-weight:600; color:var(--text-primary); font-size:.95rem; }
    #cashModal .cash-month-summary { display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--text-muted); padding:4px 2px 8px; }
    #cashModal .cash-month-summary b { color:var(--text-primary); font-weight:700; }
    #cashModal .cash-ext-row { display:flex; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px solid var(--border-subtle); }
    #cashModal .cash-ext-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--text-muted); }
    #cashModal .cash-ext-dot.is-in { background:var(--state-success-text); }
    #cashModal .cash-ext-dot.is-out { background:var(--state-danger-text); }
    #cashModal .cash-ext-dot.is-neutral { background:var(--text-muted); }
    /* Dark: só --state-*-bg é remapeado em html.dark (ver :root.dark acima); *-text fica
       no tom 700 "pensado p/ fundo claro" e some sobre o fundo escuro num dot de 8px.
       Reusa os mesmos hex fixos já usados em .cash-action-in/out e .cash-in acima. */
    html.dark #cashModal .cash-ext-dot.is-in { background:#4ade80; }
    html.dark #cashModal .cash-ext-dot.is-out { background:#f87171; }
    #cashModal .cash-ext-main { min-width:0; flex:1; display:flex; flex-direction:column; }
    #cashModal .cash-ext-desc { font-size:.9rem; font-weight:500; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #cashModal .cash-ext-date { font-size:.72rem; color:var(--text-muted); }
    #cashModal .cash-ext-nums { display:flex; align-items:center; gap:10px; flex-shrink:0; }
    #cashModal .cash-ext-val { font-weight:700; font-size:.9rem; }
    /* --text-muted já é usado sem override no dark p/ texto similar nesta mesma seção
       (.cash-mov-date, .cash-pou-label) — mesmo contraste, sem necessidade de --text-secondary. */
    #cashModal .cash-ext-run { font-size:.78rem; color:var(--text-muted); min-width:96px; text-align:right; }

    /* ===== Caixa · dark cinematic (SEMPRE preto, independe do tema do app) =====
       Escopo .cash-dark nos 4 modais (#cashModal/#cashEntryModal/#cashSaveModal/#cashAdjModal).
       Paleta moderna sobre preto + botões Apple (press/foco AA/44px) + superfícies do navegador
       temizadas. Mode = Operate: escanabilidade primeiro, marca nos detalhes. */
    .cash-dark {
      --cx-card: #14171C; --cx-card-2: #1B1F27; --cx-field: #1A1E25;
      --cx-text: #F4F6F8; --cx-text-2: #AEB6C2; --cx-muted: #767E8B;
      --cx-border: rgba(255,255,255,.09); --cx-border-2: rgba(255,255,255,.16);
      --cx-brand: #F15A22; --cx-in: #56AB2F; --cx-out: #FF416C; --cx-neutral: #94A3B8;
    }
    .cash-dark ::selection { background: rgba(241,90,34,.32); color: #fff; }
    /* card do modal */
    .cash-dark > div { box-shadow: 0 30px 80px -24px rgba(0,0,0,.75), 0 0 0 1px var(--cx-border); }
    .cash-dark .bg-white { background: var(--cx-card); }
    .cash-dark .text-sora-night { color: var(--cx-text); }
    .cash-dark .text-slate-500, .cash-dark .text-slate-600, .cash-dark .text-slate-700 { color: var(--cx-text-2); }
    .cash-dark .text-slate-400 { color: var(--cx-muted); }
    .cash-dark .text-slate-400:hover, .cash-dark .hover\:text-slate-700:hover { color: var(--cx-text); }
    .cash-dark .border-slate-100 { border-color: var(--cx-border); }
    .cash-dark .border-slate-300 { border-color: var(--cx-border-2); }
    .cash-dark .bg-slate-100 { background: rgba(255,255,255,.06); }
    .cash-dark .hover\:bg-slate-50:hover { background: rgba(255,255,255,.07); }
    .cash-dark .input { background: var(--cx-field); color: var(--cx-text); border-color: var(--cx-border-2); caret-color: var(--cx-brand); }
    .cash-dark .input::placeholder { color: var(--cx-muted); }
    .cash-dark .input:focus { border-color: var(--cx-brand); box-shadow: 0 0 0 3px rgba(241,90,34,.28); }
    .cash-dark input[type="checkbox"] { accent-color: var(--cx-brand); }
    /* botões Apple: press instantâneo, foco AA visível, alvo ≥44px, sem lag */
    .cash-dark button:focus-visible, .cash-dark .cash-adj:focus-visible { outline: 2px solid var(--cx-brand); outline-offset: 2px; border-radius: 12px; }
    .cash-dark .tactile { transition: transform .12s cubic-bezier(.2,.8,.2,1), background-color .15s ease, filter .15s ease; }
    .cash-dark .tactile:active { transform: scale(.975); }
    /* segmentado Entrada/Saída */
    .cash-dark .cdir-btn { color: var(--cx-text-2); border-radius: 8px; transition: color .15s, background-color .15s; }
    .cash-dark .cdir-btn.active { background: var(--cx-card-2); color: var(--cx-text); box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); }

    /* Hero saldo: superfície cinematográfica com brilho de marca sutil (material, não halo) */
    #cashModal.cash-dark .cash-hero { background: linear-gradient(158deg, #1C212A 0%, #0E1116 72%); border: 1px solid var(--cx-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 44px -20px rgba(0,0,0,.7); position: relative; overflow: hidden; }
    #cashModal.cash-dark .cash-hero::after { content: ""; position: absolute; top: -40%; right: -20%; width: 60%; height: 160%; background: radial-gradient(closest-side, rgba(241,90,34,.16), transparent 70%); pointer-events: none; }
    #cashModal.cash-dark .cash-hero-label { color: var(--cx-text-2); letter-spacing: .04em; text-transform: uppercase; font-size: .7rem; font-weight: 600; }
    #cashModal.cash-dark .cash-hero-num { color: #fff; font-weight: 800; letter-spacing: -.025em; font-size: 2.2rem; }
    #cashModal.cash-dark .cash-hero-num.cash-neg-num { color: var(--cx-out); }
    /* Poupança */
    #cashModal.cash-dark .cash-pou { background: var(--cx-card-2); border: 1px solid var(--cx-border); }
    #cashModal.cash-dark .cash-pou-label { color: var(--cx-text-2); letter-spacing: .03em; text-transform: uppercase; font-size: .68rem; font-weight: 600; }
    #cashModal.cash-dark .cash-pou-num { color: #fff; font-weight: 700; letter-spacing: -.01em; }
    /* Ações Entrada/Saída (botões "tinted" iOS) */
    #cashModal.cash-dark .cash-action { border-radius: 14px; font-weight: 650; letter-spacing: -.01em; min-height: 52px; transition: transform .12s cubic-bezier(.2,.8,.2,1), filter .15s ease; }
    #cashModal.cash-dark .cash-action:active { transform: scale(.97); }
    #cashModal.cash-dark .cash-action:hover { filter: brightness(1.08); }
    #cashModal.cash-dark .cash-action-in { background: linear-gradient(180deg, #63BF38 0%, #56AB2F 100%); color: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 20px -10px rgba(86,171,47,.55); text-shadow: 0 1px 2px rgba(0,0,0,.22); }
    #cashModal.cash-dark .cash-action-out { background: linear-gradient(180deg, #FF5C82 0%, #FF416C 100%); color: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 20px -10px rgba(255,65,108,.55); text-shadow: 0 1px 2px rgba(0,0,0,.22); }
    /* Ghost (Guardar/Resgatar) + Ajustar */
    #cashModal.cash-dark .cash-btn-ghost { background: rgba(255,255,255,.05); border: 1px solid var(--cx-border); color: var(--cx-text-2); border-radius: 12px; min-height: 40px; transition: transform .12s cubic-bezier(.2,.8,.2,1), background-color .15s, color .15s; }
    #cashModal.cash-dark .cash-btn-ghost:hover { background: rgba(255,255,255,.10); color: var(--cx-text); }
    #cashModal.cash-dark .cash-btn-ghost:active { transform: scale(.97); }
    #cashModal.cash-dark .cash-adj { color: var(--cx-muted); min-width: 34px; min-height: 34px; border-radius: 10px; transition: background-color .15s, color .15s; }
    #cashModal.cash-dark .cash-adj:hover { color: #fff; background: rgba(255,255,255,.08); }
    #cashModal.cash-dark .cash-hero .cash-adj { color: rgba(255,255,255,.75); }
    #cashModal.cash-dark .cash-hero .cash-adj:hover { color: #fff; background: rgba(255,255,255,.14); }

    /* Extrato */
    #cashModal.cash-dark .cash-month-nav { position: sticky; top: 0; z-index: 1; background: rgba(20,23,28,.86); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--cx-border); padding: 6px 2px; margin: 0 -2px; }
    #cashModal.cash-dark .cash-month-label { color: #fff; font-weight: 650; letter-spacing: -.01em; }
    #cashModal.cash-dark .cash-month-summary { color: var(--cx-text-2); }
    #cashModal.cash-dark .cash-month-summary b { color: #fff; }
    #cashModal.cash-dark .cash-ext-row { border-bottom: 1px solid var(--cx-border); border-radius: 10px; transition: background-color .12s ease; }
    #cashModal.cash-dark .cash-ext-row:hover { background: rgba(255,255,255,.035); }
    #cashModal.cash-dark .cash-ext-desc { color: var(--cx-text); }
    #cashModal.cash-dark .cash-ext-date { color: var(--cx-muted); }
    #cashModal.cash-dark .cash-ext-run { color: var(--cx-muted); }
    #cashModal.cash-dark .cash-ext-agendado { color: #F0B429; font-weight: 600; font-size: .72rem; }
    #cashModal.cash-dark .cash-mov-pay { color: var(--cx-in); background: rgba(45,212,191,.12); border: none; border-radius: 8px; min-width: 26px; min-height: 26px; cursor: pointer; font-size: .8rem; line-height: 1; }
    #cashModal.cash-dark .cash-mov-pay:hover { background: rgba(45,212,191,.24); }
    #cashModal.cash-dark .cash-mov-edit { color: var(--cx-muted); background: none; border: none; border-radius: 8px; min-width: 26px; min-height: 26px; cursor: pointer; font-size: .82rem; line-height: 1; }
    #cashModal.cash-dark .cash-mov-edit:hover { color: #fff; background: rgba(255,255,255,.08); }
    #cashModal.cash-dark .cash-month-nav { justify-content: flex-start; gap: 6px; }
    #cashModal.cash-dark .cash-month-label { flex: 1; text-align: center; }
    #cashModal.cash-dark .cash-alltoggle { color: var(--cx-text-2); background: rgba(255,255,255,.06); border: 1px solid var(--cx-border); border-radius: 999px; padding: 3px 10px; font-size: .72rem; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s; }
    #cashModal.cash-dark .cash-alltoggle:hover { color: #fff; background: rgba(255,255,255,.12); }
    #cashModal.cash-dark .cash-ext-dot { box-shadow: 0 0 0 3px rgba(255,255,255,.03); }
    #cashModal.cash-dark .cash-ext-dot.is-in { background: var(--cx-in); box-shadow: 0 0 8px rgba(86,171,47,.55); }
    #cashModal.cash-dark .cash-ext-dot.is-out { background: var(--cx-out); box-shadow: 0 0 8px rgba(255,65,108,.5); }
    #cashModal.cash-dark .cash-ext-dot.is-neutral { background: var(--cx-neutral); }
    #cashModal.cash-dark .cash-ext-val.cash-in { color: #7BD45A; }
    #cashModal.cash-dark .cash-ext-val.cash-out { color: var(--cx-text); }
    #cashModal.cash-dark .cash-ext-val.cash-mov-neutral { color: var(--cx-muted); }
    #cashModal.cash-dark .cash-mov-del { color: var(--cx-muted); border-radius: 8px; transition: color .15s, background-color .15s; }
    #cashModal.cash-dark .cash-mov-del:hover { color: var(--cx-out); background: rgba(251,113,133,.12); }
    #cashModal.cash-dark .cash-empty { color: var(--cx-muted); border: 1px dashed var(--cx-border); }
    /* Resumo do mês (cash-in/out reaproveitados no summary) */
    #cashModal.cash-dark .cash-in { color: #7BD45A; }
    #cashModal.cash-dark .cash-out { color: var(--cx-text); }
    /* Seletor de caixa compartilhada (owner switcher) no dark */
    .cash-dark .cown-trigger { background: rgba(255,255,255,.05); border: 1px solid var(--cx-border); color: var(--cx-text-2); }
    .cash-dark .cown-trigger:hover { background: rgba(255,255,255,.10); color: var(--cx-text); }
    .cash-dark .cown-menu { background: var(--cx-card-2); border: 1px solid var(--cx-border-2); box-shadow: 0 20px 50px -18px rgba(0,0,0,.8); }
    .cash-dark .cown-opt { color: var(--cx-text-2); }
    .cash-dark .cown-opt:hover, .cash-dark .cown-opt:focus { background: rgba(255,255,255,.06); color: var(--cx-text); }
    .cash-dark .cown-head { color: var(--cx-muted); }
    /* scrollbar do modal */
    .cash-dark > div::-webkit-scrollbar { width: 10px; }
    .cash-dark > div::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
    .cash-dark > div::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: padding-box; }

    /* Acessibilidade: menos movimento / transparência / mais contraste */
    @media (prefers-reduced-motion: reduce) {
      .cash-dark .tactile, .cash-dark .cash-action, .cash-dark .cash-btn-ghost { transition: background-color .15s ease, color .15s ease; }
      .cash-dark .tactile:active, .cash-dark .cash-action:active, .cash-dark .cash-btn-ghost:active { transform: none; }
    }
    @media (prefers-reduced-transparency: reduce) {
      #cashModal.cash-dark .cash-month-nav { background: var(--cx-card); backdrop-filter: none; }
    }
    @media (prefers-contrast: more) {
      .cash-dark { --cx-border: rgba(255,255,255,.24); --cx-text-2: #C8CFD8; --cx-muted: #969DA9; }
    }
    /* telas estreitas: solta o saldo corrente pra descrição do movimento respirar */
    @media (max-width: 430px) {
      #cashModal.cash-dark .cash-ext-run { min-width: auto; font-size: .72rem; }
      #cashModal.cash-dark .cash-ext-val { font-size: .82rem; }
      #cashModal.cash-dark .cash-ext-nums { gap: 8px; }
    }

    /* Empty-state "tudo em dia" do hero. Light: verde suave. Dark: superfície neutra
       (grafite) + só o ícone em mint — positivo sem "lavar" de verde no fundo escuro. */
    .hero-allclear { display:flex; align-items:center; gap:.85rem; border-radius:1rem; padding:1rem 1.25rem; border:1px solid #bbf7d0; background:#f0fdf4; }
    .hero-allclear-icon { width:2.25rem; height:2.25rem; border-radius:.75rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#dcfce7; color:#16a34a; }
    .hero-allclear-title { font-size:.875rem; font-weight:600; color:#166534; }
    .hero-allclear-sub { font-size:.75rem; color:#16a34a; margin-top:.1rem; }
    html.dark .hero-allclear { background:#1b222c; border-color:rgba(255,255,255,.09); }
    html.dark .hero-allclear-icon { background:rgba(16,185,129,.16); color:#6ee7b7; }

    /* Card de atenção "danger" (ex.: Faturas vencidas) — mesma cor do botão Saída (#FF416C), texto branco. */
    .attn-danger { background:linear-gradient(180deg,#FF5C82 0%,#FF416C 100%); color:#fff; border-color:rgba(255,255,255,.14); box-shadow:0 10px 26px -12px rgba(255,65,108,.5); }
    .attn-danger p, .attn-danger span, .attn-danger i { color:#fff; }
    .attn-danger .opacity-80 { opacity:.9; }

    /* Cards de atenção "warn" (Entregas/A vencer) — #FEB47B com texto branco (sombra p/ legibilidade). */
    .attn-warn { background:linear-gradient(180deg,#FFB347 0%,#F59E2E 100%); color:#fff; border-color:rgba(255,255,255,.22); box-shadow:0 10px 26px -12px rgba(255,179,71,.5); }
    .attn-warn p, .attn-warn span, .attn-warn i { color:#fff; }
    .attn-warn p, .attn-warn span { text-shadow:0 1px 2px rgba(0,0,0,.30); }
    .attn-warn .opacity-80 { opacity:.92; }
    html.dark .hero-allclear-title { color:#e6ebf2; }
    html.dark .hero-allclear-sub { color:#94a3b8; }

    /* Donut "Saúde do Portfólio" — legenda realçável + arcos com hover (glow+escala) e
       entrada desenhando (stroke-dashoffset). Efeito idêntico ao componente de referência. */
    .hl-row { transition: background-color .18s ease; cursor: default; }
    .hl-row.hl-active { background: #f1f5f9; }
    html.dark .hl-row.hl-active { background: #22272e; }
    .donut-seg { transform-origin: 50% 50%; cursor: pointer;
      transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .2s ease-out;
      animation: donutDraw .9s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0s); }
    @keyframes donutDraw { from { stroke-dashoffset: var(--circ, 0); } to { stroke-dashoffset: var(--off, 0); } }
    .donut-seg.on { transform: scale(1.035); }
    .donut-center { transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
    .donut-center.swap { opacity: 0; transform: scale(.92); }
    @media (prefers-reduced-motion: reduce) {
      .donut-seg { transition: filter .2s ease; animation: none; }
      .donut-seg.on { transform: none; }
      .donut-center { transition: opacity .12s ease; }
    }

    .input { width: 100%; border: 1px solid var(--slate-200); background-color: var(--slate-50); border-radius: var(--radius-md); padding: .65rem .85rem; font-size: .9rem; color: var(--slate-800); outline: none; transition: border-color .15s, box-shadow .15s, background-color .15s; }
    .input:hover { border-color: var(--slate-300); }
    .input:focus { border-color: var(--brand-500); background-color: var(--surface-card); box-shadow: 0 0 0 3px rgba(241,90,34,.15); }
    .input::placeholder { color: var(--slate-400); }
    .input:disabled { opacity: .55; cursor: not-allowed; }
    /* Toast de atualização da PWA (nova versão disponível) */
    #updateToast { position: fixed; z-index: 40; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; align-items: center; gap: .75rem; background: var(--slate-900); color: #fff; border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: .7rem .9rem; font-size: .875rem; max-width: calc(100vw - 2rem); animation: updateToastIn .3s ease both; }
    /* keyframe próprio: mantém o translateX(-50%) em TODOS os frames (o `fade` zerava o transform e descentralizava) */
    @keyframes updateToastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
    #updateToast.hidden { display: none; }
    #updateReloadBtn { background: var(--brand-500); color: #fff; font-weight: 600; border-radius: var(--radius-sm); padding: .35rem .8rem; font-size: .85rem; transition: background .15s; white-space: nowrap; }
    #updateReloadBtn:hover { background: var(--brand-600); }
    #updateDismissBtn { color: var(--slate-400); font-size: 1.15rem; line-height: 1; padding: 0 .25rem; }
    #updateDismissBtn:hover { color: #fff; }
    @media (prefers-reduced-motion: reduce) { #updateToast { animation: none; } }
    textarea.input { resize: vertical; min-height: 76px; }

    /* Selects: seta custom (remove a seta nativa) */
    select.input {
      appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.4rem;
    }
    select.input::-ms-expand { display: none; }

    /* Flatpickr — accent laranja */
    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
    .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
      background: var(--brand-500); border-color: var(--brand-500); color: #fff;
    }
    .flatpickr-day.inRange { background: #FEE9DF; border-color: #FEE9DF; box-shadow: -5px 0 0 #FEE9DF, 5px 0 0 #FEE9DF; }
    .flatpickr-day.today { border-color: var(--brand-500); }
    .flatpickr-day.today:hover { background: var(--brand-500); color: #fff; }
    .flatpickr-months .flatpickr-month, .flatpickr-current-month { color: var(--slate-900); }
    .flatpickr-weekday { color: #94a3b8; }

    /* Seletor segmentado (Categoria) */
    .seg { background: var(--slate-100); border-radius: var(--radius-md); padding: .3rem; }
    .seg-btn { display: flex; align-items: center; justify-content: center; gap: .45rem; border-radius: var(--radius-sm); padding: .55rem .5rem; font-size: .9rem; font-weight: 500; color: var(--slate-500); transition: all .15s; }
    .seg-btn:hover { color: var(--slate-900); }
    .seg-btn.active { background: var(--surface-card); color: var(--brand-500); box-shadow: var(--elev-1); }
    .cseg-btn { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); padding: .5rem; font-size: .85rem; font-weight: 500; color: var(--slate-500); transition: all .15s; }
    .cseg-btn:hover { color: var(--slate-900); }
    .cseg-btn.active { background: var(--surface-card); color: var(--brand-500); box-shadow: var(--elev-1); }
    .dseg-btn, .vmode-btn { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); padding: .5rem; font-size: .85rem; font-weight: 500; color: var(--slate-500); transition: all .15s; }
    .dseg-btn:hover, .vmode-btn:hover { color: var(--slate-900); }
    .dseg-btn.active, .vmode-btn.active { background: var(--surface-card); color: var(--brand-500); box-shadow: var(--elev-1); }
    /* Área: segmentado COMPACTO (secundário) — menor que o toggle de Direção;
       nowrap p/ "Marketing"/"Empresa" não quebrarem em 2 linhas (botão chunky) no mobile. */
    #f_area_wrap .seg { padding: .2rem; }
    .aseg-btn { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); padding: .35rem .4rem; font-size: .78rem; font-weight: 500; color: var(--slate-500); white-space: nowrap; transition: all .15s; }
    .aseg-btn:hover { color: var(--slate-900); }
    .aseg-btn.active { background: var(--surface-card); color: var(--brand-500); box-shadow: var(--elev-1); }
    .aseg-btn:disabled { opacity: .55; cursor: not-allowed; }
    html.dark .aseg-btn { color: var(--d-fg3); }
    html.dark .aseg-btn.active { background: var(--d-surface); color: var(--brand-500); }
    .aseg-btn.hidden { display: none !important; }
    /* Segmented do Caixa pessoal (receita/despesa, pago/pendente) */
    .cdir-btn, .cstatus-btn { color: var(--slate-500); transition: all .15s; }
    .cdir-btn.active, .cstatus-btn.active { background: var(--surface-card); color: var(--slate-900); box-shadow: var(--elev-1); }
    html.dark .cdir-btn, html.dark .cstatus-btn { color: var(--d-fg3); }
    html.dark .cdir-btn.active, html.dark .cstatus-btn.active { background: var(--d-surface); color: var(--d-fg); }

    /* Sem spinners nos number */
    input[type=number].input::-webkit-inner-spin-button,
    input[type=number].input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    input[type=number].input { -moz-appearance: textfield; }

    /* Datepicker nativo estilizado */
    input[type=date].input { position: relative; padding-right: 2.4rem; }
    input[type=date].input::-webkit-calendar-picker-indicator {
      position: absolute; right: .7rem; width: 18px; height: 18px; cursor: pointer; opacity: .55;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F15A22' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
      background-size: 18px; background-repeat: no-repeat;
    }
    input[type=date].input:hover::-webkit-calendar-picker-indicator { opacity: 1; }

    /* Campo com prefixo (R$) */
    .field-prefix { position: relative; }
    .field-prefix > span { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--slate-400); font-size: .85rem; pointer-events: none; }
    .field-prefix > input { padding-left: 2.3rem; }

    /* Slider de progresso */
    input[type=range].range-orange { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--radius-pill); background: var(--slate-200); outline: none; }
    input[type=range].range-orange::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-500); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; }
    input[type=range].range-orange::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-500); border: 3px solid #fff; cursor: pointer; }
    /* Inputs pill da tela de login */
    .pill-input { width: 100%; border: 1px solid var(--slate-200); background-color: var(--slate-50); border-radius: var(--radius-pill); padding: .8rem 1rem .8rem 2.75rem; outline: none; font-size: .9rem; color: var(--slate-800); transition: border-color .15s, box-shadow .15s, background-color .15s; }
    .pill-input:focus { border-color: var(--brand-500); background-color: var(--surface-card); box-shadow: 0 0 0 3px rgba(241,90,34,.15); }
    .pill-input::placeholder { color: var(--slate-400); }
    /* Select pill com seta custom (remove seta nativa) */
    select.pill-input {
      appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.8rem; cursor: pointer;
    }
    select.pill-input::-ms-expand { display: none; }
    /* Abas sublinhado (tabela do dashboard) */
    .tab-btn2 { color: var(--slate-400); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
    .tab-btn2:hover { color: var(--slate-900); }
    .tab-btn2.active { color: var(--brand-500); border-bottom-color: var(--brand-500); }
    .dashcat-btn { color: var(--slate-600); transition: background-color .15s, color .15s; }
    .dashcat-btn:hover { color: var(--slate-900); }
    .dashcat-btn.active { background: var(--slate-900); color: #fff; }

    /* Chips de filtro */
    .chip { font-size: .8rem; padding: .35rem .85rem; border-radius: var(--radius-pill); border: 1px solid var(--slate-200); color: var(--slate-500); transition: all .15s; white-space: nowrap; }
    .chip:hover { border-color: var(--slate-300); color: var(--slate-900); }
    .chip.active { background: var(--slate-900); color: #fff; border-color: var(--slate-900); }

    /* Itens de navegação da sidebar */
    /* ===== Sidebar sempre aberta, com rótulos ===== */
    #sidebarSpacer { width: 248px; }
    #sidebar { position: fixed; top: 0; left: 0; height: 100dvh; width: 248px; z-index: 40;
      padding: 18px 14px; display: flex; flex-direction: column; gap: 2px;
      background: linear-gradient(180deg, var(--slate-50) 0%, var(--slate-100) 100%); border-right: 1px solid var(--slate-200); }
    /* Mobile (≤768, Mobile-h da escala): esconde a sidebar desktop + spacer — nav vai pelo #mobileMenu (hambúrguer).
       Necessário porque #sidebar{display:flex} (id, especificidade 100) vence o .hidden do Tailwind. */
    @media (max-width: 768px) {
      #sidebar, #sidebarSpacer { display: none !important; }
    }
    .nav-label { opacity: 1; white-space: nowrap; }
    /* cabeçalho de grupo (sempre visível) */
    .nav-section { height: auto; overflow: visible; padding: 15px 0 5px; }
    .nav-section span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #aab0b8; font-weight: 700; padding: 0 12px; }
    /* itens */
    .nav-item { position: relative; display: flex; align-items: center; gap: .7rem; width: 100%; height: 42px;
      padding: 0 12px; border-radius: var(--radius-md); color: #565c66; font-weight: 500; font-size: .925rem;
      transition: background-color .16s ease, color .16s ease, transform .12s cubic-bezier(.2,.9,.3,1.2); }
    .nav-item svg { flex-shrink: 0; opacity: .82; }
    .nav-item:hover { background: #f3f4f6; color: var(--slate-900); }
    .nav-item:active { transform: scale(.98); }
    .nav-item.active { background: linear-gradient(180deg, var(--brand-500) 0%, #E24E1B 100%); color: #fff; font-weight: 600;
      box-shadow: 0 10px 20px -10px rgba(241,90,34,.6), 0 2px 4px -1px rgba(241,90,34,.35); }
    .nav-item.active svg { opacity: 1; }
    .nav-item.active:hover { background: linear-gradient(180deg, var(--brand-500) 0%, #E24E1B 100%); color: #fff; }
    .nav-item.active::before { content: none; }
    /* divisor entre grupos */
    .sidebar-divider { height: 1px; background: var(--slate-200); margin: 11px 8px; }
    /* pontos de notificação: chip à direita do rótulo */
    #financeNavDot, #usersNavDot { position: static; margin-left: auto; }

    /* transição suave ao minimizar/expandir/ocultar */
    #sidebar, #sidebarSpacer { transition: width .22s cubic-bezier(.2,.8,.2,1), transform .24s cubic-bezier(.2,.8,.2,1); }
    #sidebarTopToggle svg { transition: transform .2s ease; }

    /* ===== Sidebar totalmente oculta (padrão macOS toggleSidebar) — classe .sidebar-hidden em #dashboard ===== */
    #dashboard.sidebar-hidden #sidebarSpacer { width: 0; }
    #dashboard.sidebar-hidden #sidebar { transform: translateX(-100%); }
    #dashboard.sidebar-hidden #sidebarTopToggle svg { transform: scaleX(-1); }

    /* ===== Sidebar minimizada (rail de ícones) — classe .sidebar-min em #dashboard ===== */
    #dashboard.sidebar-min #sidebarSpacer { width: 76px; }
    #dashboard.sidebar-min #sidebar { width: 76px; padding-left: 12px; padding-right: 12px; }
    #dashboard.sidebar-min .nav-label { display: none; }
    #dashboard.sidebar-min .nav-section { display: none; }
    #dashboard.sidebar-min .brand-logo { margin: 0 auto; }
    #dashboard.sidebar-min .nav-item { justify-content: center; gap: 0; padding: 0; }
    #dashboard.sidebar-min .sidebar-divider { margin: 11px 10px; }
    /* ícone da toolbar espelha ao recolher (aponta p/ expandir) */
    #dashboard.sidebar-min #sidebarTopToggle svg { transform: scaleX(-1); }
    /* dot de alerta vai p/ o canto do ícone quando minimizado */
    #dashboard.sidebar-min #financeNavDot, #dashboard.sidebar-min #usersNavDot { position: absolute; top: 6px; right: 16px; margin: 0; }
    .mnav { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: var(--radius-md); color: var(--slate-600); font-size: .95rem; text-align: left; transition: background-color .15s, color .15s; }
    .mnav svg { flex-shrink: 0; opacity: .82; }
    .mnav:hover { background: var(--slate-100); color: var(--slate-900); }
    .mnav.active { background: linear-gradient(180deg, var(--brand-500) 0%, #E24E1B 100%); color: #fff; font-weight: 600; }
    .mnav.active svg { opacity: 1; }
    .mnav.active:hover { background: linear-gradient(180deg, var(--brand-500) 0%, #E24E1B 100%); color: #fff; }
    .mnav-sair { color: #dc2626; }
    .mnav-sair:hover { background: #fef2f2; color: #dc2626; }

    /* Donut "Gastos por categoria" (Caixa pessoal) — SVG custom com hover/glow/legenda */
    .cdonut-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-top: .25rem; }
    .cdonut-ring { position: relative; }
    .cdonut-svg { transform: rotate(-90deg); overflow: visible; display: block; }
    .cdonut-bg { stroke: rgba(148,163,184,.16); }
    .cdonut-seg { cursor: pointer; transform-origin: center; transform-box: fill-box; will-change: transform, filter; transition: filter .2s ease-out, transform .2s ease-out; animation: cdonutDraw .9s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes cdonutDraw { from { stroke-dashoffset: var(--draw); } to { stroke-dashoffset: var(--off); } }
    .cdonut-seg.active { transform: scale(1.04); filter: brightness(1.12) drop-shadow(0 0 5px currentColor); }
    .cdonut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; gap: .1rem; }
    .cdonut-c-label { font-size: .72rem; font-weight: 500; color: #64748b; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cdonut-c-val { font-size: 1.35rem; font-weight: 700; color: var(--slate-900); line-height: 1.1; }
    .cdonut-c-pct { font-size: .8rem; font-weight: 500; color: #94a3b8; min-height: 1em; }
    .cdonut-legend { display: flex; flex-direction: column; gap: .1rem; width: 100%; }
    .cdonut-leg { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .4rem .5rem; border-radius: .5rem; text-align: left; transition: background-color .15s; }
    .cdonut-leg:hover, .cdonut-leg.active { background: rgba(148,163,184,.12); }
    .cdonut-dot { width: .7rem; height: .7rem; border-radius: 999px; flex-shrink: 0; }
    .cdonut-leg-name { font-size: .85rem; color: #334155; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cdonut-leg-val { font-size: .85rem; font-weight: 600; color: #64748b; }
    @media (prefers-reduced-motion: reduce) { .cdonut-seg { animation: none; } }

    /* Tooltip do gráfico de projeção (estilo PointsChart) */
    .cflow-tip { background: var(--surface-card); border: 1px solid var(--slate-200); border-radius: var(--radius-md); box-shadow: var(--elev-2); padding: .5rem .7rem; font-size: .8rem; min-width: 128px; }
    .cflow-tip-date { color: #64748b; font-size: .72rem; margin-bottom: .2rem; }
    .cflow-tip-val { color: var(--slate-900); font-weight: 500; display: flex; align-items: center; gap: .4rem; }
    .cflow-tip-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--brand-500); display: inline-block; flex-shrink: 0; }
    .cflow-tip-chg { font-size: .72rem; margin-top: .15rem; }
    html.dark .cflow-tip { background: #15181c; border-color: #2a2f36; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
    html.dark .cflow-tip-date { color: #98a0aa; }
    html.dark .cflow-tip-val { color: #eef1f4; }
    /* Tooltip DEFAULT do ApexCharts (finance/progresso/análise) no dark — o theme:'dark' do Apex
       não é confiável (timing/updateOptions), então força fundo escuro + texto claro via tokens. */
    html.dark .apexcharts-tooltip.apexcharts-theme-light,
    html.dark .apexcharts-tooltip.apexcharts-theme-dark,
    html.dark .apexcharts-tooltip { background: var(--surface-card) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; }
    html.dark .apexcharts-tooltip-title { background: var(--surface-sunken) !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; }
    html.dark .apexcharts-tooltip-text, html.dark .apexcharts-tooltip-text-y-value, html.dark .apexcharts-tooltip-y-group { color: var(--text-primary) !important; }
    html.dark .apexcharts-tooltip-text-y-label { color: var(--text-secondary) !important; }
    html.dark .apexcharts-xaxistooltip, html.dark .apexcharts-yaxistooltip { background: var(--surface-card) !important; border-color: var(--border-subtle) !important; color: var(--text-primary) !important; }
    html.dark .apexcharts-xaxistooltip-text, html.dark .apexcharts-yaxistooltip-text { color: var(--text-primary) !important; }
    html.dark .apexcharts-xaxistooltip-bottom:before { border-bottom-color: var(--border-subtle) !important; }
    html.dark .apexcharts-xaxistooltip-bottom:after { border-bottom-color: var(--surface-card) !important; }
    /* .hidden precisa vencer o display:flex de .nav-item/.mnav (senão o menu não some por papel) */
    .nav-item.hidden, .mnav.hidden { display: none !important; }
    /* Ilustração do login (espírito da floresta) */
    @keyframes soraFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    @keyframes soraDust  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes soraBlink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
    .sora-float { animation: soraFloat 6s ease-in-out infinite; }
    .sora-dust  { animation: soraDust 4.5s ease-in-out infinite; }
    .sora-eyes  { transform-box: fill-box; transform-origin: center; animation: soraBlink 6.5s ease-in-out infinite; }
    @keyframes soraGlow { 0%, 100% { opacity: 0.22; } 50% { opacity: 1; } }
    .sora-fly { animation: soraGlow 3s ease-in-out infinite; }
    @keyframes soraHop { 0% { transform: translateY(0); } 28% { transform: translateY(-18px); } 52% { transform: translateY(0); } 68% { transform: translateY(-7px); } 100% { transform: translateY(0); } }
    .sora-hop { animation: soraHop 0.75s ease-out; }
    #soraSpirit { cursor: pointer; }
    @keyframes soraFall { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 12% { opacity: 0.95; } 100% { transform: translateY(346px) rotate(260deg); opacity: 0; } }
    .sora-leaf { transform-box: fill-box; transform-origin: center; animation: soraFall 2.3s cubic-bezier(.4,0,.7,1) forwards; }
    @media (prefers-reduced-motion: reduce) { .sora-float, .sora-dust, .sora-eyes, .sora-fly, .sora-hop, .sora-leaf { animation: none; } }

    /* Foco visível global (acessibilidade) */
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px;
    }

    /* Ícones Lucide (tamanhos) */
    .lu { width: 17px; height: 17px; }
    .lu-sm { width: 15px; height: 15px; }
    .lu-xs { width: 12px; height: 12px; display: inline; vertical-align: -1px; }
    [data-lucide] { display: inline-block; } /* placeholder até virar svg */

    /* Impressão: só a folha visível (recibo/compartilhar) aparece */
    @media print {
      body * { visibility: hidden !important; }
      .print-sheet, .print-sheet * { visibility: visible !important; }
      .print-sheet { position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
      .no-print { display: none !important; }
      #receiptModal, #shareCompanyModal { position: static; background: none; padding: 0; }
    }

    /* Skip link (a11y): visível só quando focado por teclado */
    .skip-link {
      position: fixed; left: 12px; top: -60px; z-index: 60;
      background: var(--slate-900); color: #fff; padding: 10px 16px; border-radius: var(--radius-md);
      font-size: 14px; font-weight: 600; transition: top .15s;
    }
    .skip-link:focus { top: 12px; }

    /* Touch targets ≥44px e inputs 16px (anti-zoom iOS) no mobile (≤768, escala Mobile-h) */
    @media (max-width: 768px) {
      input, select, textarea { font-size: 16px !important; }
      .chip, .tab-btn2, .dashcat-btn { min-height: 44px; display: inline-flex; align-items: center; }
      .fin-edit, .fin-del, .fin-receipt, .sys-edit, .sys-del, #finPrev, #finNext { min-width: 44px; min-height: 44px; }
    }

    /* Headers ordenáveis */
    .th-sort { cursor: pointer; user-select: none; transition: color .15s; }
    .th-sort:hover { color: var(--slate-900); }
    .th-sort.sorted { color: var(--brand-500); }
    .sort-arrow { font-size: .8em; }

    /* Linha focada (teclado) */
    tr.proj-row.kbd-focus { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

    /* Tabelas responsivas → cards no mobile (≤768, escala Mobile-h) */
    @media (max-width: 768px) {
      #projectsTable, #projectsTable tbody, #projectsTable tr, #projectsTable td,
      #financeTable, #financeTable thead, #financeTable tbody, #financeTable tr, #financeTable td { display: block; width: auto; }
      #projectsTable thead, #financeTable thead { display: none; }
      #projectsTable tbody tr, #financeTable tbody tr { border: 1px solid #eef1f4; border-radius: .9rem; margin: .5rem; padding: .4rem 0; }
      #projectsTable tbody td, #financeTable tbody td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem 1rem; }
      #projectsTable tbody td[data-label]::before, #financeTable tbody td[data-label]::before { content: attr(data-label); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 600; }
      #projectsTable tbody td.cell-name { padding-top: .7rem; }
      #projectsTable tbody td.cell-chevron { display: none; }
      #projectsTable tbody td.cell-progress > div { flex: 1; max-width: 62%; }
    }

    /* =========================================================================
       PADRÃO DE DESIGN v2 (princípios Apple) — camada compartilhada.
       Vale para todas as telas: mexe em classes/estruturas reusadas.
       ========================================================================= */

    /* ---- Tipografia: tracking específico por tamanho (display aperta) ---- */
    .font-brand { letter-spacing: -0.021em; }
    h1, h2, .display-tight { letter-spacing: -0.028em; text-wrap: balance; }
    h3 { letter-spacing: -0.014em; }
    /* Dígitos que alinham em colunas/valores */
    .tabular, .tabular-nums, td.num, .num { font-variant-numeric: tabular-nums; }

    /* ---- Materiais & profundidade: superfície translúcida reutilizável ---- */
    .material {
      background: rgba(255,255,255,.68);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
    /* Modais/folhas: materializam (blur+escala) em vez de só aparecer */
    @keyframes sheetIn { from { opacity: 0; transform: scale(.985) translateY(6px); } to { opacity: 1; transform: none; } }
    .sheet-in > div, .sheet-in > aside, .sheet-in > form { animation: sheetIn .26s cubic-bezier(.2,.8,.2,1) both; }

    /* ---- Cards: elevação padrão + hover-lift (Apple: superfícies respondem) ---- */
    .card-lift { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; }
    .card-lift:hover { transform: translateY(-2px); box-shadow: var(--elev-3); }

    /* Spotlight: brilho da marca seguindo o cursor no hover (KPIs). --mx/--my setados por JS. */
    .spotlight { position: relative; isolation: isolate; }
    .spotlight::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
      background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(241,90,34,.10), transparent 62%);
      opacity: 0; transition: opacity .25s ease;
    }
    .spotlight:hover::before { opacity: 1; }
    .spotlight > * { position: relative; z-index: 1; }
    @media (prefers-reduced-motion: reduce) { .spotlight::before { transition: none; } }

    /* ---- Card de cliente: reusa .spotlight (glow da marca) + .card-lift (elevação) e
       acrescenta micro-interações (borda pega a marca, chevron desliza, avatar cresce). ---- */
    .cli-card:hover { border-color: color-mix(in srgb, var(--brand-500) 45%, var(--slate-200)); }
    html.dark .cli-card:hover { border-color: color-mix(in srgb, var(--brand-500) 45%, #2a2f36); }
    .cli-card .cli-chevron { transition: transform .2s cubic-bezier(.2,.8,.2,1), color .2s ease; }
    .cli-card:hover .cli-chevron { transform: translateX(3px); color: var(--brand-500); }
    .cli-card .cli-avatar { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
    .cli-card:hover .cli-avatar { transform: scale(1.06); }
    @media (prefers-reduced-motion: reduce) { .cli-card .cli-chevron, .cli-card .cli-avatar { transition: none; } }

    /* ---- Tabelas: faixa de severidade na borda + header fixo translúcido ---- */
    /* Estado codificado na forma, não só na pílula de texto. */
    tr.proj-row, #financeTable tbody tr { position: relative; }
    tr.proj-row::after, #financeTable tbody tr.fin-row::after {
      content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
      border-radius: 0 3px 3px 0; background: transparent; transition: background .15s;
    }
    tr.proj-row.sev-late::after,  #financeTable tbody tr.sev-late::after  { background: #dc2626; }
    tr.proj-row.sev-soon::after,  #financeTable tbody tr.sev-soon::after  { background: #f59e0b; }
    tr.proj-row.sev-ok::after,    #financeTable tbody tr.sev-ok::after    { background: #16a34a; }
    tr.proj-row.sev-none::after                                          { background: transparent; }
    /* header colável nas tabelas longas (desktop). Fundo OPACO (sem backdrop-filter):
       backdrop-filter + position:sticky faz o Safari PINTAR o elemento deslocado do
       layout, desalinhando o clique (bug real). Opaco evita isso e o header segue fixo. */
    @media (min-width: 769px) {
      #projectsTable thead th, #financeTable thead th {
        position: sticky; top: 0; z-index: 5;
        background: #ffffff;
      }
    }

    /* ---- Drawer lateral: interruptível/arrastável (JS dirige 1:1) ---- */
    /* Enquanto o dedo arrasta, sem transição (segue o dedo); ao soltar, mola assenta. */
    #drawerPanel { transition: transform .3s cubic-bezier(.2,.86,.3,1); }
    #drawerPanel.dragging { transition: none; }
    #drawerPanel .drawer-grip {
      position: sticky; top: 0; display: flex; justify-content: center; padding: 8px 0 2px;
      touch-action: none; cursor: grab; z-index: 2;
    }
    #drawerPanel .drawer-grip::before {
      content: ''; width: 38px; height: 4px; border-radius: 999px; background: #cbd5e1;
    }
    #drawerPanel .drawer-grip:active { cursor: grabbing; }

    /* ---- Kanban: cards arrastáveis com mola (Pointer Events) ---- */
    .lead-card { touch-action: pan-y; }
    .lead-card.springing { will-change: transform; }
    .lead-card.grabbing { cursor: grabbing; box-shadow: 0 24px 50px -18px rgba(2,6,23,.4); position: relative; z-index: 30; }
    .lead-drop.projecting { outline: 2px solid rgba(241,90,34,.5); background: rgba(241,90,34,.06) !important; }

    /* Estados vazios compactos (não desperdiçar a dobra) */
    .empty-slim { min-height: 96px !important; height: auto !important; }

    @media (prefers-reduced-motion: reduce) {
      .card-lift, #drawerPanel, .lead-card { transition: none !important; }
      .card-lift:hover { transform: none; }
      .sheet-in > div, .sheet-in > aside, .sheet-in > form { animation: none !important; }
    }
    @media (prefers-reduced-transparency: reduce) {
      .material, #projectsTable thead th, #financeTable thead th { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    }

    /* ==========================================================================
       TEMA ESCURO — skin que remapeia as classes Tailwind mais usadas + os
       componentes custom. Ativado por .dark no <html> (toggle no header,
       persiste em localStorage; respeita prefers-color-scheme). Accent laranja
       mantido. Cobre ~90% da UI; cantos raros podem precisar de ajuste pontual.
    ========================================================================== */
    html.dark {
      --d-page:#0e1116; --d-surface:#15181c; --d-s2:#1a1e23; --d-s3:#22272e; --d-s4:#2a2f36;
      --d-line0:#1c2026; --d-line:#23282f; --d-line2:#2a2f36; --d-line3:#353b43;
      --d-fg:#e6e8eb; --d-fg2:#c8cfd8; --d-fg3:#a3abb5; --d-fg4:#8b939d;
      color-scheme: dark;
    }
    html.dark, html.dark body { background: var(--d-page); color: var(--d-fg); }

    /* Backgrounds */
    /* canvas do app (classe arbitrária bg-[#F6F7F9]) -> fundo escuro; dá profundidade
       aos cards (bg-white -> surface, um tom acima do canvas) e faz o hero aparecer */
    html.dark .bg-\[\#F6F7F9\] { background-color: var(--d-page) !important; }
    html.dark .bg-white { background-color: var(--d-surface) !important; }
    html.dark .bg-slate-50 { background-color: var(--d-s2) !important; }
    html.dark .bg-slate-100 { background-color: var(--d-s3) !important; }
    html.dark .bg-slate-200 { background-color: var(--d-s4) !important; }
    html.dark .bg-slate-300 { background-color:#333941 !important; }
    html.dark .bg-slate-400 { background-color:#4b525a !important; }
    html.dark .bg-sora-gray { background-color: var(--d-s2) !important; }
    html.dark .bg-sora-night, html.dark .bg-sora-night\/90 { background-color:#20252c !important; }
    html.dark .bg-white\/85, html.dark .bg-white\/95, html.dark .bg-white\/80 { background-color: rgba(20,23,27,.82) !important; }
    html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-slate-50\/70:hover { background-color: var(--d-s3) !important; }
    html.dark .hover\:bg-slate-200:hover { background-color: var(--d-s4) !important; }
    html.dark .hover\:bg-red-50\/70:hover, html.dark .hover\:bg-red-50\/40:hover { background-color: rgba(220,38,38,.18) !important; }
    /* tints semânticos */
    html.dark .bg-red-50, html.dark .bg-red-50\/40 { background-color: rgba(220,38,38,.15) !important; }
    html.dark .bg-green-50, html.dark .bg-green-50\/60 { background-color: rgba(22,163,74,.15) !important; }
    html.dark .bg-amber-50, html.dark .bg-amber-50\/60 { background-color: rgba(217,119,6,.16) !important; }
    html.dark .bg-orange-50, html.dark .bg-orange-50\/60 { background-color: rgba(241,90,34,.16) !important; }
    html.dark .bg-blue-50 { background-color: rgba(37,99,235,.16) !important; }
    /* Pills de status (bg-*-100): sem remap, o fundo ficava claro no dark enquanto o texto
       (já remapeado p/ tom claro logo abaixo) sumia — claro-no-claro, ex.: "Pendente" âmbar.
       Fundo translúcido escuro casa com o texto claro e recupera o contraste. */
    html.dark .bg-red-100   { background-color: rgba(220,38,38,.18) !important; }
    html.dark .bg-green-100 { background-color: rgba(22,163,74,.18) !important; }
    html.dark .bg-amber-100 { background-color: rgba(217,119,6,.22) !important; }
    html.dark .hover\:bg-red-50:hover { background-color: rgba(220,38,38,.2) !important; }
    html.dark .hover\:bg-orange-50:hover { background-color: rgba(241,90,34,.2) !important; }

    /* Texto */
    html.dark .text-slate-900 { color:#eef1f4 !important; }
    html.dark .text-slate-800 { color:#dde2e8 !important; }
    html.dark .text-slate-700 { color: var(--d-fg2) !important; }
    html.dark .text-slate-600 { color:#b3bbc5 !important; }
    html.dark .text-slate-500 { color: var(--d-fg3) !important; }
    html.dark .text-slate-400 { color: var(--d-fg4) !important; }
    html.dark .text-slate-300 { color:#8b939d !important; }
    /* headings de display (font-brand Sora) têm traço fino: quase-branco no escuro
       p/ não parecerem apagados */
    html.dark .text-sora-night { color:#f4f7fa !important; }
    html.dark .text-red-700, html.dark .text-red-600, html.dark .text-red-500, html.dark .text-red-400, html.dark .text-red-300 { color:#f87171 !important; }
    html.dark .text-green-700, html.dark .text-green-600, html.dark .text-green-300 { color:#4ade80 !important; }
    html.dark .text-amber-800, html.dark .text-amber-700, html.dark .text-amber-600 { color:#fbbf24 !important; }
    html.dark .placeholder-slate-400::placeholder, html.dark .placeholder-slate-300::placeholder { color: var(--d-fg4) !important; }

    /* Bordas */
    html.dark .border-slate-50 { border-color: var(--d-line0) !important; }
    html.dark .border-slate-100 { border-color: var(--d-line) !important; }
    html.dark .border-slate-200, html.dark .border-slate-200\/70 { border-color: var(--d-line2) !important; }
    html.dark .border-slate-300 { border-color: var(--d-line3) !important; }
    html.dark .divide-slate-100 > * + * { border-color: var(--d-line) !important; }

    /* Componentes custom */
    html.dark .input { background-color: var(--d-s2); border-color: var(--d-line2); color: var(--d-fg); }
    html.dark .input::placeholder { color: var(--d-fg4); }
    html.dark .input:hover { border-color:#3a4148; }
    html.dark .input:focus { background-color: var(--d-surface); border-color:var(--brand-500); }
    html.dark .chip { border-color: var(--d-line2); color: var(--d-fg3); }
    html.dark .chip:hover { border-color:#3a4148; color: var(--d-fg); }
    html.dark .chip.active { background:#e6e8eb; color:#0E1016; border-color:#e6e8eb; }
    html.dark .seg { background: var(--d-s3); }
    html.dark .seg-btn, html.dark .cseg-btn, html.dark .dseg-btn, html.dark .vmode-btn { color: var(--d-fg3); }
    html.dark .seg-btn.active, html.dark .cseg-btn.active, html.dark .dseg-btn.active, html.dark .vmode-btn.active { background: var(--d-surface); color:var(--brand-500); }
    html.dark .fsort:hover, html.dark .fsort:focus-visible, html.dark .th-sort:hover,
    html.dark .seg-btn:hover, html.dark .cseg-btn:hover, html.dark .dseg-btn:hover, html.dark .vmode-btn:hover { color: var(--d-fg); }
    html.dark .skeleton { background: linear-gradient(90deg,#1a1e23 25%,#242a31 37%,#1a1e23 63%); background-size:400% 100%; }
    html.dark ::-webkit-scrollbar-thumb { background:#333941; }
    html.dark ::-webkit-scrollbar-thumb:hover { background:#434b54; }
    html.dark .sidebar-divider { background:#23282f; }
    /* Sidebar: o gradiente branco do #sidebar (id + background shorthand) não é
       pego pelo override de .bg-white — precisa de regra própria. */
    html.dark #sidebar { background: linear-gradient(180deg,#15181c 0%,#111417 100%) !important; border-right-color:#23282f !important; }
    html.dark .nav-item { color:#eef0f3; }
    html.dark .nav-item svg { opacity:1; }
    html.dark .nav-item:hover { background:#22272e; color:#ffffff; }
    html.dark .nav-item.active, html.dark .nav-item.active:hover { color:#fff; }
    /* Logo Studio Sora branca só no tema escuro (arcos = stroke, ponto = fill) */
    html.dark .brand-logo { stroke: #fff; }
    html.dark .brand-logo circle { fill: #fff; }
    /* Flatpickr — popup do calendário no tema escuro (accent laranja preservado) */
    html.dark .flatpickr-calendar { background:#15181c; box-shadow:0 8px 28px rgba(0,0,0,.55); border:1px solid #23282f; }
    html.dark .flatpickr-calendar.arrowTop:before, html.dark .flatpickr-calendar.arrowTop:after { border-bottom-color:#15181c; }
    html.dark .flatpickr-calendar.arrowBottom:before, html.dark .flatpickr-calendar.arrowBottom:after { border-top-color:#15181c; }
    html.dark .flatpickr-months .flatpickr-month, html.dark .flatpickr-current-month, html.dark .flatpickr-current-month input.cur-year { color:#eef1f4; }
    html.dark .flatpickr-monthDropdown-months { background:#15181c; color:#eef1f4; }
    html.dark .flatpickr-months .flatpickr-prev-month svg, html.dark .flatpickr-months .flatpickr-next-month svg { fill:#c8cfd8; }
    html.dark .flatpickr-months .flatpickr-prev-month:hover svg, html.dark .flatpickr-months .flatpickr-next-month:hover svg { fill:var(--brand-500); }
    html.dark .flatpickr-weekday { color:#8b939d; }
    html.dark .flatpickr-day { color:#dde2e8; }
    html.dark .flatpickr-day:hover, html.dark .flatpickr-day:focus { background:#22272e; border-color:#22272e; }
    html.dark .flatpickr-day.prevMonthDay, html.dark .flatpickr-day.nextMonthDay, html.dark .flatpickr-day.flatpickr-disabled { color:#4b525a; }
    html.dark .flatpickr-day.inRange { background:#3a2419; border-color:#3a2419; box-shadow:-5px 0 0 #3a2419,5px 0 0 #3a2419; }
    html.dark .flatpickr-day.today { border-color:var(--brand-500); }
    html.dark span.flatpickr-weekday, html.dark .flatpickr-weekdays { background:transparent; }
    html.dark .numInputWrapper span.arrowUp:after { border-bottom-color:#8b939d; }
    html.dark .numInputWrapper span.arrowDown:after { border-top-color:#8b939d; }
    html.dark .nav-section span { color:#98a0aa; }
    html.dark .mnav { color:#c8cfd8; }
    html.dark .mnav:hover { background:#22272e; color:#fff; }
    html.dark .mnav.active, html.dark .mnav.active:hover { background: linear-gradient(180deg, var(--brand-500) 0%, #E24E1B 100%); color:#fff; }
    html.dark .mnav-sair { color:#f87171; }
    html.dark .mnav-sair:hover { background:#2a1618; color:#f87171; }
    html.dark .cdonut-bg { stroke: rgba(148,163,184,.14); }
    html.dark .cdonut-c-label { color:#98a0aa; }
    html.dark .cdonut-c-val { color:#eef1f4; }
    html.dark .cdonut-c-pct { color:#8b939d; }
    html.dark .cdonut-leg-name { color:#dde2e8; }
    html.dark .cdonut-leg-val { color:#98a0aa; }
    html.dark .cdonut-leg:hover, html.dark .cdonut-leg.active { background: rgba(148,163,184,.14); }
    /* superfícies translúcidas claras (headers/toolbars .material) -> escuras */
    html.dark .material { background: rgba(20,23,27,.72) !important; }
    html.dark .pill-input:focus { background-color:#15181c; }
    html.dark input[type=range].range-orange { background:#2a2f36; }
    /* thead sob reduced-transparency não pode voltar a branco no dark */
    html.dark #projectsTable thead th, html.dark #financeTable thead th { background: var(--d-s2) !important; }
    /* sombras mais suaves no escuro */
    html.dark .card-lift:hover { box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* =====================================================================
   BOARD STUDIO — mundo dark cinematic do Brainstorming (sempre escuro,
   independente do tema do app). Fonte Sora, laranja=ação, índigo=canvas/IA,
   verde=presença, azul=projeto. Escopado em .bstudio p/ não vazar.
   ===================================================================== */
.bstudio {
  --bg:#07090D; --surf:#0F141B; --raise:#161C24; --raise2:#1B222C;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --ink:#E7ECF3; --mut:#8892A0; --faint:#5A6472;
  --orange:#F15A22; --oranged:#D94E1B; --indigo:#7C3AED; --indigo2:#A78BFA;
  --green:#43D17F; --blue:#8BC0FF; --yellow:#FDE68A;
  position:relative; border-radius:26px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(241,90,34,.10), transparent 42%),
    radial-gradient(90% 80% at 6% 108%, rgba(124,58,237,.12), transparent 46%),
    var(--surf);
  border:1px solid var(--line);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
  color:var(--ink); font-family:'Sora', system-ui, sans-serif;
}
.bstudio *::-webkit-scrollbar{width:9px;height:9px}
.bstudio *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
.bstudio *::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);background-clip:padding-box}

/* ---- topbar ---- */
.bstudio-top{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);position:relative;z-index:2}
.bstudio-ws{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:15px;background:linear-gradient(145deg,var(--orange),var(--indigo));box-shadow:0 6px 18px -6px rgba(241,90,34,.5)}
.bstudio-wsname{font-size:14px;font-weight:600;color:var(--ink);line-height:1.1}
.bstudio-wssub{font-size:11px;color:var(--faint);display:inline-flex;align-items:center;gap:3px}
.bstudio-crumb{font-size:14px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bstudio-crumb b{color:var(--ink);font-weight:600}
.bstudio-title{font-family:'Sora';font-size:14px;font-weight:600;color:var(--ink);background:transparent;border:0;outline:0;min-width:60px;max-width:220px}
.bstudio-title::placeholder{color:var(--faint)}
.bstudio-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--blue);background:rgba(139,192,255,.10);border:1px solid rgba(139,192,255,.18);padding:4px 10px;border-radius:999px;white-space:nowrap}
.bstudio-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.bstudio-live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(67,209,127,.16)}
.bstudio-avstack{display:flex}
.bstudio-avstack .av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;border:2px solid var(--surf);margin-left:-8px}
.bstudio-avstack .av:first-child{margin-left:0}
.bstudio-share{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:#fff;font-weight:600;font-size:13px;padding:8px 16px;border-radius:11px;border:0;cursor:pointer;box-shadow:0 8px 20px -8px rgba(241,90,34,.6);transition:transform .12s,background .12s}
.bstudio-share:hover{background:var(--oranged);transform:translateY(-1px)}
.bstudio-back{display:inline-flex;align-items:center;gap:4px;color:var(--mut);font-size:13px;background:transparent;border:0;cursor:pointer;padding:6px 8px;border-radius:8px}
.bstudio-back:hover{color:var(--ink);background:rgba(255,255,255,.05)}

/* ---- body: rail | canvas | panel ---- */
.bstudio-body{display:flex;gap:0;height:72vh}
.bstudio-rail{width:60px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;border-right:1px solid var(--line)}
.brail-btn{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--mut);background:transparent;border:1px solid transparent;cursor:pointer;transition:all .12s}
.brail-btn:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.brail-btn.is-active{color:#fff;background:var(--orange);border-color:transparent;box-shadow:0 8px 18px -8px rgba(241,90,34,.7)}
.brail-btn.ai{color:#fff;background:linear-gradient(145deg,var(--indigo),#6D28D9);box-shadow:0 8px 18px -8px rgba(124,58,237,.7)}
.brail-btn.ai:hover{filter:brightness(1.1)}
.brail-sep{width:22px;height:1px;background:var(--line);margin:4px 0}
.brail-spacer{flex:1}

/* ---- canvas ---- */
.bstudio-canvasWrap{position:relative;flex:1;min-width:0}
.bstudio-canvas{position:absolute;inset:0;overflow:hidden;touch-action:none;
  background-color:#0A0E13;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.1px, transparent 1.2px);
  background-size:22px 22px;background-position:-1px -1px}
/* toolbar flutuante + zoom + gerar */
.bstudio-float{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;display:flex;align-items:center;gap:2px;background:rgba(15,20,27,.82);backdrop-filter:blur(12px);border:1px solid var(--line2);border-radius:14px;padding:5px;box-shadow:0 16px 40px -12px rgba(0,0,0,.7)}
.bfloat-btn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--mut);background:transparent;border:0;cursor:pointer}
.bfloat-btn:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.bfloat-btn.is-active{color:#fff;background:var(--orange)}
.bstudio-zoom{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:2px;background:rgba(15,20,27,.82);backdrop-filter:blur(12px);border:1px solid var(--line2);border-radius:12px;padding:3px}
.bzoom-btn{width:30px;height:30px;border-radius:8px;color:var(--mut);background:transparent;border:0;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center}
.bzoom-btn:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.bzoom-val{font-size:12px;color:var(--mut);min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
/* picker de templates dark */
.bstudio-tpl{position:absolute;left:74px;bottom:16px;background:var(--raise);border:1px solid var(--line2);border-radius:14px;padding:10px;width:230px;box-shadow:0 20px 50px -12px rgba(0,0,0,.7);z-index:5}
.bstudio-tpl p{font-size:11px;font-weight:600;color:var(--mut);padding:0 2px 8px}
.btpl-btn{font-size:12px;border-radius:9px;border:1px solid var(--line);padding:9px 4px;color:var(--mut);background:transparent;cursor:pointer;transition:all .12s}
.btpl-btn:hover{border-color:var(--indigo);color:var(--indigo2);background:rgba(124,58,237,.08)}

/* ---- painel direito (abas fixas) ---- */
.bstudio-panel{width:340px;flex-shrink:0;border-left:1px solid var(--line);display:flex;flex-direction:column}
.bpanel-tabs{display:flex;gap:4px;padding:12px 12px 0}
.bpanel-tab{font-size:13px;font-weight:600;color:var(--mut);padding:8px 12px;border-radius:10px 10px 0 0;background:transparent;border:0;cursor:pointer;position:relative}
.bpanel-tab:hover{color:var(--ink)}
.bpanel-tab.is-active{color:var(--ink)}
.bpanel-tab.is-active::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--orange)}
.bpanel-tab.ai.is-active::after{background:var(--indigo2)}
.bpanel-divider{height:1px;background:var(--line);margin-top:-1px}
.bpane{flex:1;min-height:0;display:none;flex-direction:column}
.bpane.is-active{display:flex}

/* ---- chat (Discussão) ---- */
.bchat-list{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:14px}
.bmsg{display:flex;gap:9px}
.bmsg-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;margin-top:2px}
.bmsg-main{min-width:0;flex:1;font-family:'Roboto',sans-serif}
.bmsg-head{display:flex;align-items:baseline;gap:7px}
.bmsg-name{font-size:12.5px;font-weight:600;color:var(--ink)}
.bmsg-time{font-size:10.5px;color:var(--faint)}
.bbubble{margin-top:3px;font-size:13.5px;line-height:1.45;color:#D7DDE6;background:var(--raise);border:1px solid var(--line);border-radius:4px 12px 12px 12px;padding:8px 11px;word-wrap:break-word}
.bmsg.mine{flex-direction:row-reverse}
.bmsg.mine .bmsg-main{display:flex;flex-direction:column;align-items:flex-end}
.bmsg.mine .bbubble{background:linear-gradient(145deg,var(--orange),#E24E1B);border-color:transparent;color:#fff;border-radius:12px 4px 12px 12px}
.bmsg.mine .bmsg-head{flex-direction:row-reverse}
.bmention{color:var(--indigo2);background:rgba(124,58,237,.15);border-radius:5px;padding:0 4px;font-weight:600}
.bmsg-foot{display:flex;align-items:center;gap:8px;margin-top:5px}
.brx{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--mut);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:2px 8px;cursor:pointer}
.brx.mine{color:var(--orange);border-color:rgba(241,90,34,.4);background:rgba(241,90,34,.10)}
.brx-add{color:var(--faint);font-size:13px;cursor:pointer;background:none;border:0;padding:0 2px}
.brx-add:hover{color:var(--indigo2)}
.bthread{font-size:11px;color:var(--blue);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.bthread:hover{text-decoration:underline}
.bsys{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mut);justify-content:center;padding:2px 0}
.bsys .ic{width:20px;height:20px;border-radius:6px;background:rgba(67,209,127,.14);color:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.btyping{font-size:11.5px;color:var(--faint);font-style:italic;padding:2px 14px 8px;display:flex;align-items:center;gap:7px}
.btyping .av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
/* card anexado (attachment) na mensagem */
.battach{display:flex;align-items:center;gap:10px;margin-top:7px;background:var(--raise2);border:1px solid var(--line);border-radius:11px;padding:9px 11px;cursor:pointer;transition:border-color .12s}
.battach:hover{border-color:var(--line2)}
.battach .thumb{width:38px;height:30px;border-radius:6px;border:1px dashed var(--line2);flex-shrink:0}
.battach .t{font-size:12.5px;font-weight:600;color:var(--ink)}
.battach .s{font-size:10.5px;color:var(--faint)}

/* ---- composer ---- */
.bcomposer{border-top:1px solid var(--line);padding:10px;display:flex;align-items:center;gap:8px}
.bcomposer .clip{color:var(--faint);background:none;border:0;cursor:pointer;flex-shrink:0}
.bcomposer .clip:hover{color:var(--mut)}
.bcomposer input{flex:1;background:var(--raise);border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:var(--ink);font-size:13px;outline:0;min-width:0;font-family:'Roboto',sans-serif}
.bcomposer input:focus{border-color:rgba(241,90,34,.5)}
.bcomposer input::placeholder{color:var(--faint)}
.bcomposer .send{width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bcomposer .send:hover{background:var(--oranged)}

/* ---- Notas / Sora AI panes ---- */
.bpane-body{flex:1;overflow-y:auto;padding:14px}
.bstudio .codex-editor,.bstudio .ce-block__content,.bstudio .ce-toolbar__content{color:var(--ink)}
.bstudio .ce-paragraph[data-placeholder]:empty::before{color:var(--faint)}
.bai-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px}
.bai-act{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mut);background:var(--raise);border:1px solid var(--line);border-radius:11px;padding:10px 11px;cursor:pointer;transition:all .12s}
.bai-act:hover{border-color:var(--indigo);color:var(--indigo2);background:rgba(124,58,237,.08)}
.bai-head{display:flex;align-items:center;gap:7px;padding:12px 14px 0;color:var(--indigo2);font-size:12px;font-weight:600}
.bai-head .muted{margin-left:auto;color:var(--faint);font-weight:400;font-size:10.5px}

/* Board Studio — pill "Excluir" contextual (aparece acima da seleção; marquee + Cmd+A) */
.bdel-pill{position:absolute;transform:translate(-50%,-100%);display:inline-flex;align-items:center;gap:5px;background:#DC2626;color:#fff;font-size:12.5px;font-weight:600;border:0;border-radius:10px;padding:7px 13px;cursor:pointer;box-shadow:0 8px 22px -6px rgba(220,38,38,.6),0 0 0 1px rgba(0,0,0,.25);z-index:8;white-space:nowrap;font-family:'Sora',system-ui,sans-serif}
.bdel-pill:hover{background:#B91C1C}
/* Componentes do board que setam display próprio (inline-flex/flex): como app.css
   carrega DEPOIS do tailwind.css e têm mesma especificidade, o `display` deles venceria
   o `.hidden` (display:none) do Tailwind e o elemento nunca sumiria. Regra .classe.hidden
   (especificidade maior) garante que .hidden esconde. */
.bdel-pill.hidden, .breply-chip.hidden, .btyping.hidden{display:none}
/* card da galeria: botão excluir (hover) */
.bboard-card{position:relative}
.bboard-del{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;background:rgba(255,255,255,.7);opacity:0;transition:opacity .12s,color .12s,background .12s}
.bboard-card:hover .bboard-del{opacity:1}
.bboard-del:hover{color:#DC2626;background:#FEE2E2}

/* Board Studio — cursores remotos ao vivo (D3) */
.bstudio .bcursor{position:absolute;top:0;left:0;pointer-events:none;z-index:7;transition:transform .25s ease-out;will-change:transform}
.bcursor-dot{position:absolute;width:13px;height:13px;border-radius:2px 50% 50% 50%;background:var(--cc,#7C3AED);transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.45)}
.bcursor-lbl{position:absolute;left:13px;top:11px;white-space:nowrap;font-size:11px;font-weight:600;color:#fff;background:var(--cc,#7C3AED);padding:2px 7px;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,.45);font-family:'Sora',system-ui,sans-serif}

/* Board Studio — indicador "digitando…" (D4) */
.btyping-dots{display:inline-flex;gap:3px;align-items:center}
.btyping-dots i{width:4px;height:4px;border-radius:50%;background:var(--indigo2);display:inline-block;animation:btd 1s infinite ease-in-out}
.btyping-dots i:nth-child(2){animation-delay:.15s}
.btyping-dots i:nth-child(3){animation-delay:.3s}
@keyframes btd{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* Board Studio — threads / respostas (D5) */
.breply-btn{color:var(--faint);font-size:11px;background:none;border:0;cursor:pointer}
.breply-btn:hover{color:var(--blue)}
.bthread{display:inline-block;margin-top:6px;font-size:11.5px;color:var(--blue);background:none;border:0;cursor:pointer;font-weight:600}
.bthread:hover{text-decoration:underline}
.breplies{margin-top:8px;padding-left:12px;border-left:2px solid var(--line2);display:flex;flex-direction:column;gap:10px}
.breplies .bmsg{gap:7px}
.breplies .bmsg-av{width:22px;height:22px;font-size:10px}
.breplies .bbubble{font-size:12.5px;padding:6px 9px}
.breply-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;margin:0 10px;border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.breply-chip b{color:var(--ink)}
.breply-chip span{display:inline-flex;align-items:center;gap:5px}
.breply-chip button{color:var(--faint);background:none;border:0;cursor:pointer;font-size:13px}
.breply-chip button:hover{color:var(--ink)}

/* Board Studio — tela cheia (Fullscreen API); .is-fs espelha o estado do browser */
.bstudio.is-fs{height:100vh;border-radius:0;border:0;box-shadow:none;display:flex;flex-direction:column}
.bstudio.is-fs .bstudio-body{flex:1;height:auto;min-height:0}
.bstudio:fullscreen{height:100vh;border-radius:0}
.bstudio:-webkit-full-screen{height:100vh;border-radius:0}

/* =====================================================================
   Board Studio — DISCUSSÃO estilo SLACK (dark). Linhas com avatar+nome+hora,
   agrupamento, ações no hover, reações, threads, composer bordado.
   ===================================================================== */
.bchat-list{flex:1;overflow-y:auto;padding:10px 0 6px;display:flex;flex-direction:column}
.smsg{position:relative;display:flex;gap:8px;padding:4px 14px}
.smsg:hover{background:rgba(255,255,255,.035)}
.smsg.grouped{padding-top:1px;padding-bottom:1px}
.smsg-gutter{width:36px;flex-shrink:0;display:flex;justify-content:flex-end;align-items:flex-start;padding-top:2px}
.smsg-av{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;font-family:'Sora',sans-serif}
.smsg-hovertime{font-size:9.5px;color:var(--faint);opacity:0;line-height:18px;font-variant-numeric:tabular-nums}
.smsg.grouped:hover .smsg-hovertime{opacity:1}
.smsg-main{min-width:0;flex:1;font-family:'Roboto',system-ui,sans-serif}
.smsg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:1px}
.smsg-name{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:700;color:var(--ink)}
.smsg-time{font-size:10.5px;color:var(--faint)}
.smsg-body{font-size:13.5px;line-height:1.46;color:#D7DDE6;word-wrap:break-word;overflow-wrap:anywhere}
/* ações no hover (reagir/responder) */
.smsg-actions{position:absolute;top:-12px;right:12px;display:none;gap:2px;background:var(--raise);border:1px solid var(--line2);border-radius:9px;padding:3px;box-shadow:0 8px 20px -8px rgba(0,0,0,.7);z-index:2}
.smsg:hover > .smsg-actions{display:flex}
.sact{width:28px;height:28px;border-radius:7px;background:transparent;border:0;color:var(--mut);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.sact:hover{background:rgba(255,255,255,.08);color:var(--ink)}
/* reações */
.rx-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.rx-wrap:empty{display:none}
.srx{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--mut);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:1px 8px;cursor:pointer;line-height:1.7}
.srx:hover{border-color:var(--line2)}
.srx.mine{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.45);color:#CDBEFB}
.srx b{font-weight:600}
.srx-add{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;border-radius:999px;border:1px dashed var(--line2);background:transparent;color:var(--faint);cursor:pointer;font-size:13px}
.srx-add:hover{color:var(--indigo2);border-color:var(--indigo)}
/* thread */
.sthread{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;color:var(--blue);background:none;border:0;cursor:pointer;padding:1px 0;font-family:'Sora',sans-serif}
.sthread b{font-weight:700}
.sthread:hover{text-decoration:underline}
.sreplies{margin-top:6px;display:flex;flex-direction:column;gap:1px;border-left:2px solid var(--line2);padding-left:8px}
.smsg.sreply{padding:2px 0}
.smsg.sreply:hover{background:transparent}
.smsg.sreply .smsg-gutter{width:26px}
.smsg.sreply .smsg-av{width:26px;height:26px;font-size:11px;border-radius:7px}
.smsg.sreply .smsg-name{font-size:12.5px}
.smsg.sreply .smsg-body{font-size:12.5px}
.smsg.sreply > .smsg-actions{top:-10px}
/* composer estilo Slack: caixa bordada */
.bcomposer{border-top:1px solid var(--line);padding:0;display:block}
.bcomposer{margin:0}
.bstudio .bcomposer{display:flex;align-items:center;gap:6px;margin:8px 12px 12px;padding:5px 6px 5px 12px;border:1px solid var(--line2);border-radius:12px;background:var(--surf);border-top:1px solid var(--line2)}
.bstudio .bcomposer:focus-within{border-color:rgba(124,58,237,.55)}
.bstudio .bcomposer input{flex:1;background:transparent;border:0;border-radius:0;padding:7px 0;color:var(--ink);font-size:13.5px;outline:0;min-width:0;font-family:'Roboto',sans-serif}
.bstudio .bcomposer input::placeholder{color:var(--faint)}
.bstudio .bcomposer .send{width:32px;height:32px;border-radius:8px;background:var(--orange);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bstudio .bcomposer .send:hover{background:var(--oranged)}
.bstudio .bcomposer .clip{color:var(--faint);background:none;border:0;cursor:pointer;flex-shrink:0;display:flex}
.bstudio .bcomposer .clip:hover{color:var(--mut)}

/* Board Studio — membros do board (canal Slack): topbar + painel adicionar pessoas */
.bmembers-wrap{position:relative;display:flex;align-items:center;gap:6px}
.bmembers-empty{font-size:11px;color:var(--faint)}
.bstudio-addppl{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mut);background:transparent;border:1px dashed var(--line2);cursor:pointer;flex-shrink:0}
.bstudio-addppl:hover{color:var(--ink);border-color:var(--indigo);background:rgba(124,58,237,.08)}
.bmembers-panel{position:absolute;top:calc(100% + 8px);right:0;width:280px;max-height:70vh;overflow-y:auto;background:var(--raise);border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 60px -16px rgba(0,0,0,.8);z-index:20;padding:10px;font-family:'Roboto',sans-serif}
.bmembers-panel.hidden{display:none}
.bmembers-head{display:flex;align-items:center;justify-content:space-between;font-family:'Sora',sans-serif;font-size:13px;font-weight:600;color:var(--ink);padding:2px 2px 8px}
.bmembers-head button{background:none;border:0;color:var(--faint);cursor:pointer;font-size:14px}
.bmembers-head button:hover{color:var(--ink)}
.bmembers-list{display:flex;flex-direction:column;gap:2px}
.bmembers-row,.bmembers-addrow{display:flex;align-items:center;gap:9px;padding:6px;border-radius:9px;width:100%;text-align:left;background:transparent;border:0}
.bmembers-addrow{cursor:pointer}
.bmembers-addrow:hover,.bmembers-row:hover{background:rgba(255,255,255,.04)}
.bmembers-row .av,.bmembers-addrow .av{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;font-family:'Sora',sans-serif}
.bmembers-name{flex:1;min-width:0;font-size:13px;color:var(--ink);display:flex;flex-direction:column;line-height:1.2;overflow:hidden}
.bmembers-name small{font-size:10.5px;color:var(--faint);font-weight:400}
.bmembers-x{background:none;border:0;color:var(--faint);cursor:pointer;font-size:12px;padding:2px 4px;border-radius:6px}
.bmembers-x:hover{color:#F87171;background:rgba(248,113,113,.1)}
.bmembers-plus{color:var(--indigo2);display:flex;flex-shrink:0}
.bmembers-sub{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:12px 4px 6px}
.bmembers-search{display:flex;align-items:center;gap:6px;background:var(--surf);border:1px solid var(--line);border-radius:9px;padding:5px 9px;margin-bottom:4px;color:var(--faint)}
.bmembers-search input{flex:1;background:transparent;border:0;outline:0;color:var(--ink);font-size:12.5px;min-width:0;font-family:'Roboto',sans-serif}
.bmembers-search input::placeholder{color:var(--faint)}
.bmembers-add{display:flex;flex-direction:column;gap:1px;max-height:220px;overflow-y:auto}
.bmembers-none{font-size:12px;color:var(--faint);padding:8px 6px}

/* Board Studio — Notas: cabeçalho + expandir p/ "página" Notion + salvo */
.bnotes-head{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.bnotes-label{font-family:'Sora',sans-serif;font-size:12px;font-weight:600;color:var(--mut)}
.bnotes-saved{margin-left:auto;font-size:10.5px;color:var(--faint);white-space:nowrap}
.bnotes-expand{width:28px;height:28px;border-radius:7px;color:var(--mut);background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bnotes-expand:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.bnotes-scroll{flex:1;overflow-y:auto;min-height:0}
.bnotes-title{display:block;width:100%;background:transparent;border:0;outline:0;font-family:'Sora',sans-serif;font-weight:700;color:var(--ink);font-size:17px;line-height:1.25;padding:12px 14px 4px}
.bnotes-title::placeholder{color:var(--faint)}
.bstudio #brainEditor{padding:8px 12px}
/* backdrop + página Notion centralizada sobre o board */
.bnotes-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);z-index:200}
.bnotes-backdrop.hidden{display:none}
.bnotes-expanded{position:fixed!important;top:4vh;bottom:4vh;left:50%;transform:translateX(-50%);width:min(840px,94vw);z-index:201;background:var(--raise);border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 50px 140px -20px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);display:flex!important;flex-direction:column;overflow:hidden}
.bnotes-expanded .bnotes-head{padding:12px 20px}
.bnotes-expanded .bnotes-title{font-size:clamp(26px,3.4vw,34px);font-weight:800;padding:46px 72px 6px}
.bnotes-expanded #brainEditor{padding:0 72px 64px}
.bnotes-expanded .ce-block__content,.bnotes-expanded .ce-toolbar__content{max-width:none}
.bnotes-expanded .ce-paragraph{font-size:16px;line-height:1.7;color:#D9DEE6}
.bnotes-expanded .ce-header{color:var(--ink)}
@media (max-width:640px){ .bnotes-expanded .bnotes-title{padding:32px 24px 6px} .bnotes-expanded #brainEditor{padding:0 24px 48px} }

/* Board Studio — Notas: menu de páginas (múltiplos docs por board) */
.bnotes-menu{position:absolute;top:44px;left:10px;right:10px;z-index:30;background:var(--raise);border:1px solid var(--line2);border-radius:12px;box-shadow:0 20px 50px -16px rgba(0,0,0,.8);padding:6px;max-height:60vh;overflow-y:auto}
.bnotes-menu.hidden{display:none}
.bnotes-expanded .bnotes-menu{left:20px;width:300px;right:auto}
.bnotes-pageitem{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;color:var(--mut);font-size:13px;font-family:'Roboto',sans-serif}
.bnotes-pageitem:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.bnotes-pageitem.active{background:rgba(124,58,237,.14);color:#CDBEFB}
.bnotes-pagename{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnotes-pagex{background:none;border:0;color:var(--faint);cursor:pointer;font-size:11px;padding:2px 5px;border-radius:5px;opacity:0}
.bnotes-pageitem:hover .bnotes-pagex{opacity:1}
.bnotes-pagex:hover{color:#F87171;background:rgba(248,113,113,.12)}
.bnotes-pagenew{display:flex;align-items:center;gap:7px;width:100%;padding:8px;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;background:none;border-left:0;border-right:0;border-bottom:0;color:var(--indigo2);font-size:12.5px;font-weight:600;cursor:pointer;font-family:'Sora',sans-serif}
.bnotes-pagenew:hover{background:rgba(124,58,237,.08)}

/* Card "Runway" — Projeção de saldo (KPI + sparkline). Cores verde/vermelho vêm inline do JS
   (dark-aware); aqui só estrutura + overrides de dark p/ os textos neutros. */
.runway{display:flex;flex-direction:column;min-height:220px}
.runway-label{font-size:12px;font-weight:500;color:#64748b}
.runway-num{font-size:34px;line-height:1.08;font-weight:700;letter-spacing:-.02em;margin-top:3px}
.runway-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#eef2f6)}
.runway-cell{display:flex;flex-direction:column;gap:3px;min-width:0}
.runway-k{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8}
.runway-v{font-size:13.5px;font-weight:600;color:var(--slate-900,#0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.runway-spark{position:relative;margin-top:auto;padding-top:16px}
.runway-spark svg{display:block;width:100%}
.runway-cursor{position:absolute;top:0;left:0;width:1px;opacity:0;pointer-events:none;transition:opacity .12s ease}
.runway-hd{position:absolute;top:0;left:0;width:9px;height:9px;border-radius:999px;border:1.5px solid #fff;opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .12s ease}
html.dark .runway-hd{border-color:#15181c}
.runway-tip{position:absolute;top:0;left:0;opacity:0;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;z-index:5;transition:opacity .1s ease}
.runway-spark.is-anim .runway-line{stroke-dasharray:900;stroke-dashoffset:900;animation:rwdraw .9s ease forwards}
@keyframes rwdraw{to{stroke-dashoffset:0}}
html.dark .runway-label{color:#98a0aa}
html.dark .runway-k{color:#8b939d}
html.dark .runway-v{color:#eef1f4}
html.dark .runway-trio{border-color:#2a2f36}

/* ============================================================
   Caixa pessoal — seletor de dono (avatar-pill switcher)
   Substitui o <select> nativo. Consome só semântica (--surface/-text/-border),
   então light/dark saem de graça. Classes prefixadas .cown (evita colisão global).
   Bônus: dropdown custom não sofre o bug do <select> nativo em container fixed+scroll.
   ============================================================ */
.cown{position:relative;display:inline-flex}
.cown-trigger{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .5rem .3rem .35rem;
  background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
  cursor:pointer;font-family:'Sora',sans-serif;max-width:230px;
  transition:border-color .16s ease,box-shadow .16s ease,transform .13s cubic-bezier(.2,.9,.3,1.25)}
.cown-trigger:hover{border-color:var(--brand-500)}
.cown-trigger:active{transform:scale(.97)}
.cown-trigger:focus-visible{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(241,90,34,.18)}
.cown[data-open="1"] .cown-trigger{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(241,90,34,.16)}
.cown-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1}
.cown-av svg{width:15px;height:15px;stroke:#fff}
.cown-av--me{background:var(--brand-500)}
.cown-name{font-size:.82rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cown-ro{flex-shrink:0;display:inline-flex;color:var(--text-muted)}
.cown-ro svg{width:13px;height:13px}
.cown-chev{flex-shrink:0;color:var(--text-muted);transition:transform .2s cubic-bezier(.2,.9,.3,1.25)}
.cown-chev svg{width:15px;height:15px;display:block}
.cown[data-open="1"] .cown-chev{transform:rotate(180deg);color:var(--brand-500)}

.cown-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:246px;max-width:320px;
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--elev-3);padding:.35rem;transform-origin:top left;
  animation:cownIn .16s cubic-bezier(.16,1,.3,1) both}
@keyframes cownIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.cown-head{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
  padding:.35rem .55rem .3rem}
.cown-opt{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.5rem .55rem;
  border:none;background:transparent;border-radius:calc(var(--radius-md) - 2px);cursor:pointer;
  font-family:'Sora',sans-serif;transition:background-color .12s ease}
.cown-opt:hover,.cown-opt:focus-visible{background:var(--surface-sunken);outline:none}
.cown-opt[aria-checked="1"]{background:color-mix(in srgb,var(--brand-500) 12%,transparent)}
.cown-opt-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.cown-opt-name{font-size:.86rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cown-opt-sub{font-size:.7rem;color:var(--text-muted);display:inline-flex;align-items:center;gap:.25rem}
.cown-opt-sub svg{width:11px;height:11px}
.cown-check{flex-shrink:0;color:var(--brand-500);opacity:0;transition:opacity .12s ease}
.cown-check svg{width:17px;height:17px;display:block}
.cown-opt[aria-checked="1"] .cown-check{opacity:1}
.cown-sep{height:1px;background:var(--border-subtle);margin:.3rem .3rem}

/* ============================================================
   Comercial — tabela de Prospecção (triagem). Tokens semânticos → dark de graça.
   Classes prefixadas .prosp (evita colisão global).
   ============================================================ */
.stab-btn{color:var(--text-secondary)}
.stab-btn[aria-pressed="true"]{background:var(--surface-card);color:var(--brand-500);box-shadow:var(--elev-1)}
.prosp-wrap{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
.prosp-tbl{width:100%;border-collapse:collapse;font-size:13px}
.prosp-tbl th{position:sticky;top:0;background:var(--surface-sunken);color:var(--text-secondary);font-weight:600;text-align:left;padding:8px 12px;white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.prosp-tbl td{padding:9px 12px;border-top:1px solid var(--border-subtle);color:var(--text-primary);vertical-align:top}
.prosp-row{cursor:pointer;transition:background-color .12s ease}
.prosp-row:hover{background:var(--surface-sunken)}
.prosp-gancho{color:var(--text-secondary);max-width:220px;white-space:normal}
.prio{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 8px}
.prio-A{background:var(--state-danger-bg);color:var(--state-danger-text)}
.prio-B{background:var(--state-warning-bg);color:var(--state-warning-text)}
.prio-C{background:var(--surface-sunken);color:var(--text-muted)}
.prosp-late{color:var(--state-danger-text);font-weight:700}
.prosp-empty{padding:48px 16px;text-align:center;color:var(--text-muted);font-size:13px}
.prosp-empty b{color:var(--text-secondary);display:block;margin-bottom:4px;font-size:14px}

/* ============================================================
   BASE UI — primitivos genéricos (.card, .btn-primary/ghost/danger)
   consumidos pelos módulos do Hub de Gestão (40–44) desde as tasks
   T6–T10, mas ainda sem CSS até esta task (T12). Construídos 100%
   sobre tokens semânticos (--surface-*, --text-*, --border-*,
   --action-*, --state-*) → dark "de graça", mesmo padrão da seção
   Comercial/Prospecção acima. Reutilizáveis por qualquer tela.
   ============================================================ */
.card{background:var(--surface-card);border:1px solid var(--border-subtle)}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--action-primary);color:#fff;font-weight:600;font-size:.85rem;line-height:1.2;padding:.5rem .9rem;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:background-color .15s ease}
.btn-primary:hover{background:var(--action-primary-hover)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}

.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:none;border:none;color:var(--text-secondary);font-size:.85rem;line-height:1.2;padding:.5rem .7rem;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.btn-ghost:hover{background:var(--surface-sunken);color:var(--text-primary)}
.btn-ghost:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--state-danger-text);color:#fff;font-weight:600;font-size:.85rem;line-height:1.2;padding:.5rem .9rem;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:background-color .15s ease}
.btn-danger:hover{background:color-mix(in srgb, var(--state-danger-text) 85%, black)}

/* ============================================================
   HUB DE GESTÃO DE PROJETO (Task 12) — 4 abas: Calendário / Plano /
   Tarefas / Notas&links (public/js/40-44-hub*.js, #viewHub no index).
   Mesma filosofia de tokens semânticos da seção acima → SEM overrides
   html.dark nesta seção (tudo já remapeia sozinho via :root.dark).
   ============================================================ */
.hub-tab{color:var(--text-secondary);background:none;border-bottom:2px solid transparent;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.hub-tab:hover{color:var(--text-primary)}
.hub-tab.active{color:var(--text-primary);border-bottom-color:var(--action-primary);font-weight:600}
.hub-panel{min-height:200px}

/* -- Calendário -- */
.hub-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.hub-cal-dow{text-align:center;font-size:.7rem;color:var(--text-muted);padding:2px 0}
.hub-cal-cell{min-height:92px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:4px;position:relative}
.hub-cal-empty{background:transparent;border-color:transparent}
.hub-cal-today{outline:2px solid var(--action-primary);outline-offset:-1px}
.hub-cal-daynum{font-size:.75rem;color:var(--text-muted)}
.hub-cal-ev{display:block;width:100%;text-align:left;font-size:.7rem;padding:2px 4px;border-radius:4px;margin-top:2px;color:#fff;border:none;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-cal-add{position:absolute;top:4px;right:4px;opacity:0;font-size:.8rem;line-height:1;padding:2px;background:none;border:none;cursor:pointer;color:var(--text-muted)}
.hub-cal-cell:hover .hub-cal-add,.hub-cal-add:focus-visible{opacity:.6}

/* -- Pílulas por pilar: cor SEMÂNTICA de estado, não categórica —
   Prato=info, Processo=warning, Marca=success; Comunidade usa a marca
   (não há 5º estado semântico livre). Variantes .hub-cal-ev.hub-pill-*
   viram chip sólido (fundo = tom -text, texto branco) dentro da célula. */
.hub-pill{display:inline-block;padding:1px 8px;border-radius:var(--radius-pill);font-size:.7rem;font-weight:600}
.hub-pill-prato{background:var(--state-info-bg);color:var(--state-info-text)}
.hub-pill-processo{background:var(--state-warning-bg);color:var(--state-warning-text)}
.hub-pill-marca{background:var(--state-success-bg);color:var(--state-success-text)}
.hub-pill-comunidade{background:var(--brand-100);color:var(--brand-700)}
.hub-cal-ev.hub-pill-prato{background:var(--state-info-text)}
.hub-cal-ev.hub-pill-processo{background:var(--state-warning-text)}
.hub-cal-ev.hub-pill-marca{background:var(--state-success-text)}
.hub-cal-ev.hub-pill-comunidade{background:var(--brand-500)}

/* -- Tarefas: toggle kanban/lista + kanban + linha de lista -- */
.hub-viewtoggle{display:inline-flex;gap:2px;background:var(--surface-sunken);border-radius:var(--radius-md);padding:3px}
.hub-viewtoggle .btn-ghost{padding:.35rem .7rem;font-size:.8rem}
.hub-viewtoggle .btn-ghost.active{background:var(--surface-card);color:var(--brand-500);box-shadow:var(--elev-1);font-weight:600}
.hub-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hub-kcol{background:var(--surface-sunken);border-radius:var(--radius-md);padding:8px}
.hub-kcol-head{font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.hub-kcol-body{min-height:80px}
.hub-kcol-body.drop-hover{outline:2px dashed var(--action-primary);border-radius:var(--radius-sm)}
.hub-task{cursor:pointer}
.hub-task.dragging{opacity:.5}
.hub-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.hub-dot-a_fazer{background:var(--text-muted)}
.hub-dot-fazendo{background:var(--state-warning-text)}
.hub-dot-feito{background:var(--state-success-text)}
.hub-task-row,.hub-link-row{background:var(--surface-card);border:1px solid var(--border-subtle)}

/* -- Campos dos modais (evento/tarefa/link) — não usam .input, então
   levam o próprio estilo (mesmo glow de foco do .input/.pill-input) -- */
.hub-field{display:block;margin-bottom:8px;font-size:.8rem;color:var(--text-secondary)}
.hub-field span{display:block;margin-bottom:2px}
.hub-field input,.hub-field select,.hub-field textarea{width:100%;border:1px solid var(--border-subtle);background:var(--surface-card);color:var(--text-primary);border-radius:var(--radius-sm);padding:.5rem .65rem;font-size:.85rem;font-family:inherit;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.hub-field input:focus,.hub-field select:focus,.hub-field textarea:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(241,90,34,.15)}
.hub-field textarea{resize:vertical}

/* -- Blocos de Plano/Notas: título inline-editável + textarea markdown.
   O input de título das Notas (44-hub-notes.js) não carrega a classe
   .hub-block-title — o seletor de atributo cobre os dois módulos. */
.hub-block-title,.hub-panel input[data-f="title"]{background:none;border:none;width:100%;outline:none;color:var(--text-primary);padding:2px 4px;border-radius:var(--radius-sm);transition:background-color .15s ease}
.hub-block-title:focus,.hub-panel input[data-f="title"]:focus{background:var(--surface-sunken)}
.hub-block-body{width:100%;border:1px solid var(--border-subtle);background:var(--surface-card);color:var(--text-primary);border-radius:var(--radius-sm);padding:.6rem .75rem;font-size:.85rem;font-family:inherit;outline:none;resize:vertical;transition:border-color .15s ease,box-shadow .15s ease}
.hub-block-body:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(241,90,34,.15)}

/* -- Modal (evento/tarefa/link): backdrop fixo sem scroll próprio;
   o scroll fica no card estático interno (gotcha Safari select+fixed). -- */
.hub-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.hub-modal{background:var(--surface-card);padding:16px;width:100%;max-width:420px;max-height:90vh;overflow:auto}
.hub-danger{color:var(--state-danger-text)}

/* -- Estados vazios -- */
.hub-empty{color:var(--text-muted);font-size:.85rem;padding:12px;text-align:center}
.hub-empty-sm{color:var(--text-muted);font-size:.75rem;padding:8px;text-align:center}

/* -- Preview de markdown (Plano/Notas, subset seguro renderizado por mdToHtml) -- */
.hub-md h2{font-size:1.1rem;font-weight:700;margin:.4rem 0;color:var(--text-primary)}
.hub-md h3{font-size:1rem;font-weight:600;margin:.3rem 0;color:var(--text-primary)}
.hub-md h4{font-size:.9rem;font-weight:600;margin:.25rem 0;color:var(--text-primary)}
.hub-md ul{list-style:disc;padding-left:1.2rem;margin:.25rem 0}
.hub-md p{margin:.25rem 0;color:var(--text-secondary)}
.hub-md a{color:var(--action-primary);text-decoration:underline}