/* Nexo - Minimalist Design System */
:root {
  /* Neutros QUENTES: cinza frio ao lado de ambar puxa o ambar para o
     marrom. Mesmo par do editor da loja, para o sistema andar junto. */
  --bg-0: #f1eeec;
  --bg-1: #ffffff;
  --bg-2: #f7f5f4;
  --bg-3: #ebe6e2;
  --bg-4: #ded7d1;

  /* A marca. Tudo que e "o principal" pinta daqui: nav ativa, botao
     cheio, foco, o anel que corre em volta do botao. */
  --primary: #e07a1f;
  --primary-light: #c9691a;   /* hover ESCURECE: clarear ambar apaga */
  --primary-dark: #a85812;

  --text-1: #1b181c;
  --text-2: #544e57;
  --text-3: #847d88;
  --text-4: #9b949e;
  --text-5: #cec7c9;

  --border-1: #e3ddd9;
  --border-2: #d5cec9;
  --border-focus: #e07a1f;

  /* Semanticas: dinheiro que entra e que sai continua se lendo de
     relance. So foram aquecidas para conviver com o ambar. */
  --accent-blue: #3f6fd8;
  --accent-green: #3f8f4f;
  --accent-red: #b3452a;
  --accent-amber: #e07a1f;

  /* A escada de tons: e o que separa uma serie da outra nos graficos,
     no lugar do arco-iris. Cor aqui e hierarquia, nao enfeite. */
  --s1: #e07a1f;
  --s2: #c98a4e;
  --s3: #c2a385;
  --s4: #b8865f;
  --s5: #d8cdc2;
  --s6: #9c8e86;
  --s7: #cbbfb4;
  --s8: #a89ea4;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

  --transition: 150ms ease;
  --transition-slow: 250ms ease;

  --sidebar-w: 240px;
  --sidebar-full: 240px;   /* largura da barra expandida (usada no hover do rail) */
  --header-h: 56px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg-0: #0d0c0f;
  --bg-1: #161418;
  --bg-2: #1f1c21;
  --bg-3: #2a262c;
  --bg-4: #39343c;

  --primary: #f08a2b;
  --primary-light: #ffa153;   /* no escuro, hover CLAREIA */
  --primary-dark: #d2731c;

  --text-1: #f5f2f4;
  --text-2: #b7b0b6;
  --text-3: #857e86;
  --text-4: #6a636c;
  --text-5: #4a444d;

  --border-1: #2a262c;
  --border-2: #39343c;
  --border-focus: #f08a2b;

  --accent-blue: #6f9bef;
  --accent-green: #5cb36a;
  --accent-red: #e07a55;
  --accent-amber: #f08a2b;

  --s1: #f08a2b;
  --s2: #c47a3b;
  --s3: #a8703f;
  --s4: #96694a;
  --s5: #78584a;
  --s6: #5f5048;
  --s7: #4a444d;
  --s8: #6a636c;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  background: var(--bg-0);
  color: var(--text-1);
  /* Tamanho base do texto — controlado pelo usuário em Ajustes (10 níveis).
     Tudo em rem (Agenda, Tarefas, etc.) acompanha este valor. */
  font-size: var(--ui-font-size, 15px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cara de app (iPhone/Android): sem seleção azul ao tocar 2x, sem flash de toque,
   sem menu de copiar no toque longo. A digitação e a cópia continuam onde importa. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
button, a, .sidebar-item, .chip, .btn, .icon-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Onde o texto PRECISA ser selecionável/copiável (digitar, ditar, copiar valores) */
input, textarea, select, [contenteditable="true"], .selectable, .note-content, .diary-content {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--primary); color: var(--bg-1); }

/* ===== Layout ===== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas: "sidebar header" "sidebar main";
  min-height: 100vh;
  transition: grid-template-columns 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Animação do recolher/expandir: largura anima; ícones e textos entram suave */
.sidebar { transition: padding 0.24s ease; }
.sidebar .si-tx, .sidebar-logo-text { transition: opacity 0.15s ease; }
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }

/* ===== Sidebar ===== */
.sidebar {
  grid-area: sidebar;
  background: var(--bg-1);
  border-right: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.25rem;
  margin-bottom: 2rem;
}

.sidebar-logo-mark {
  width: 22px;
  height: 22px;
  background: var(--primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-logo-mark svg { width: 100%; height: 100%; display: block; }

/* Fontes em px de propósito: a base do app é 14px, então valores em rem
   ficavam pequenos demais aqui. px garante o menu legível como pedido. */
.sidebar-logo-text { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }

.sidebar-section { margin-bottom: 1.3rem; }

.sidebar-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 1.1rem;
  margin-bottom: 0.5rem;
}

.sidebar-section-link {
  display: flex; align-items: center; gap: 0.3rem; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  transition: color 0.15s;
}
.sidebar-section-link .sec-chev { opacity: 0; transform: translateX(-3px); transition: all 0.15s; }
.sidebar-section-link:hover { color: var(--text-2); }
.sidebar-section-link:hover .sec-chev { opacity: 1; transform: translateX(0); }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 0.7rem; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
  color: var(--text-2);
  font-size: 1.03rem;
  font-weight: 500;
  transition: all var(--transition);
  text-align: left;
  width: 100%;
  user-select: none;
}

.sidebar-item:hover { background: var(--bg-2); color: var(--text-1); }
.sidebar-item.active { background: var(--primary); color: var(--bg-1); }
.sidebar-item-icon {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sidebar-item-badge {
  margin-left: auto;
  background: var(--bg-2);
  color: var(--text-3);
  font-size: 0.8rem;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}
.sidebar-item.active .sidebar-item-badge { background: rgba(255,255,255,0.15); color: var(--bg-1); }

/* ===== Header ===== */
.header {
  grid-area: header;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

/* a busca do app é a barra do Nexo (nexo.css): a caixa de busca do topo saiu em 14/09/2026 */
.header-actions { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: all var(--transition);
  position: relative;
  font-size: 14px;
}

.icon-btn:hover { background: var(--bg-2); color: var(--text-1); }

/* Gerenciador de categorias */
.cat-block { border: 0.5px solid var(--border-1); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 10px; }
.cat-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cat-block-name { font-weight: 600; font-size: 0.9rem; }
.cat-subs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-2); border: 0.5px solid var(--border-1);
  border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 0.78rem;
}
.cat-del {
  border: none; background: none; color: var(--text-4); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 2px; display: inline-flex;
}
.cat-del:hover { color: var(--accent-red); }
.cat-sub-input { width: 130px; padding: 4px 8px; font-size: 0.78rem; }
.cat-add-parent { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--border-1); }
.cat-add-parent .form-input { flex: 1; }

/* Chips de prazo (tarefas) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px;
  border: 0.5px solid var(--border-1);
  background: var(--bg-2);
  color: var(--text-2);
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition);
}
.chip:hover { border-color: var(--primary); color: var(--text-1); }
.chip.active { background: var(--primary); color: var(--bg-1); border-color: var(--primary); }
.cat-selected { font-size: 0.75rem; color: var(--text-3); margin-top: 8px; min-height: 1rem; }

/* Seletor recolhível: ao escolher, as outras opções recolhem com animação
   (toque no chip escolhido, com a seta ⇄, para reabrir e trocar). */
.picker-collapse { gap: 0; }
.picker-collapse > .chip,
.picker-collapse > .comp-chip,
.picker-collapse > .acct-chip {
  max-width: 360px; margin: 0 6px 6px 0; overflow: hidden;
  transition: opacity .2s ease, transform .2s ease, max-width .28s ease,
              margin .22s ease, padding .22s ease, border-width .18s ease;
}
.comp-chips.picker-collapse > .comp-chip,
.acct-chips.picker-collapse > .acct-chip { margin: 0 8px 8px 0; }
.picker-collapse.collapsed > :not(.active) {
  max-width: 0 !important; opacity: 0; transform: scale(.82);
  margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
  border-width: 0 !important; pointer-events: none;
}
.picker-collapse.collapsed > .active { position: relative; padding-right: 30px; }
.picker-collapse.collapsed > .active::after {
  content: "\21C4"; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); font-size: 0.85em; font-weight: 700; opacity: 0.55; pointer-events: none;
}
.picker-collapse.collapsed > .active:hover::after { opacity: 1; }

/* bolinha de cor do módulo (categoria-pai) e swatches de "cor livre" */
.catdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.catnew-colors { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.catnew-colors-lb { font-size: 0.75rem; color: var(--text-3); margin-right: 2px; }
.catsw {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--c); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  transition: transform var(--transition), border-color var(--transition);
}
.catsw:hover { transform: scale(1.15); }
.catsw.sel { border-color: var(--text-1); transform: scale(1.1); }
.catsw-free { position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444); overflow: hidden; }
.catsw-free .catsw-free-ic { font-size: 0.7rem; filter: drop-shadow(0 0 1px rgba(0,0,0,0.4)); }
.catsw-free input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: none; padding: 0; }

/* ===== Seletor tipo menu (Empresa / Categoria): abre e fecha suave ===== */
.selp { position: relative; }
.selp + .selp { margin-top: 2px; }
.selp-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  background: var(--bg-1); cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.selp-head:hover { border-color: var(--border-2); }
.selp[data-open="1"] > .selp-head { border-color: var(--border-focus); }
.selp-cur { display: flex; align-items: center; gap: 10px; min-width: 0; }
.selp-cur-nm { font-weight: 600; color: var(--text-1); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selp-cur-nm.dim { color: var(--text-3); font-weight: 500; }

/* Empresa: depois de escolhida fica discreta (só o avatar) e expande no hover/abertura,
   deixando o foco na categoria (que é a parte mais cheia). */
.comp-sel .selp-head { transition: padding var(--transition), background var(--transition); }
.comp-sel:not(:hover):not([data-open="1"]) .selp-head { padding-top: 6px; padding-bottom: 6px; background: transparent; border-color: transparent; }
.comp-sel .selp-cur-nm { transition: max-width .26s ease, opacity .2s ease; max-width: 240px; }
.comp-sel:not(:hover):not([data-open="1"]) .selp-cur-nm { max-width: 0; opacity: 0; }
.comp-sel .selp-chev { transition: opacity var(--transition), transform 0.28s cubic-bezier(.4,0,.2,1); }
.comp-sel:not(:hover):not([data-open="1"]) .selp-chev { opacity: 0; }
.selp-chev { color: var(--text-3); flex-shrink: 0; transition: transform 0.28s cubic-bezier(.4,0,.2,1); }
.selp[data-open="1"] > .selp-head .selp-chev { transform: rotate(180deg); }

/* avatar limpo: quadrado arredondado com a inicial (ou ícone p/ Pessoal) */
.selp-ava {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.82rem; line-height: 1; letter-spacing: -0.01em;
}
.selp-ava-p { background: var(--bg-3); color: var(--text-2); }

/* gaveta animada por grid-rows (sem travar) */
.selp-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(.4,0,.2,1); }
.selp[data-open="1"] > .selp-drawer { grid-template-rows: 1fr; }
.selp-drawer-in { overflow: hidden; min-height: 0; }
.selp-menu {
  margin-top: 6px; border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  background: var(--bg-1); box-shadow: var(--shadow-md); padding: 5px; max-height: 264px; overflow-y: auto;
}
.selp-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: none; background: none; cursor: pointer; border-radius: 8px; color: var(--text-1); text-align: left;
  opacity: 0; transform: translateY(-5px); transition: opacity 0.25s ease, transform 0.25s ease, background var(--transition);
}
.selp[data-open="1"] .cat-lvl:not([hidden]) .selp-opt,
.selp[data-open="1"] > .selp-drawer .selp-menu > .selp-opt { opacity: 1; transform: none; }
.selp[data-open="1"] .selp-opt:nth-child(2) { transition-delay: 0.03s; }
.selp[data-open="1"] .selp-opt:nth-child(3) { transition-delay: 0.06s; }
.selp[data-open="1"] .selp-opt:nth-child(4) { transition-delay: 0.09s; }
.selp[data-open="1"] .selp-opt:nth-child(5) { transition-delay: 0.12s; }
.selp[data-open="1"] .selp-opt:nth-child(n+6) { transition-delay: 0.14s; }
.selp-opt:hover { background: var(--bg-2); }
.selp-opt.active { background: var(--bg-2); }
.selp-opt-nm { flex: 1; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selp-check { color: var(--accent-green); flex-shrink: 0; opacity: 0; transition: opacity var(--transition); }
.selp-opt.active .selp-check { opacity: 1; }
.selp-arrow { color: var(--text-4); flex-shrink: 0; }
.cat-subs-h { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-4); padding: 3px 10px 5px; }
.cat-back {
  width: 100%; display: flex; align-items: center; gap: 6px; padding: 7px 10px; margin-bottom: 2px;
  border: none; background: none; cursor: pointer; color: var(--text-3); font-size: 0.8rem; border-radius: 8px;
}
.cat-back:hover { background: var(--bg-2); color: var(--text-1); }
.subdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Busca dentro do seletor de categoria (escala pra qualquer nº de opções) */
.cat-search { position: relative; margin-bottom: 5px; }
.cat-search-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-4); pointer-events: none; }
.cat-search-input { width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-2); color: var(--text-1); font-size: 0.85rem; outline: none; transition: border-color var(--transition); }
.cat-search-input:focus { border-color: var(--border-focus); }
.cat-search-input::placeholder { color: var(--text-4); }
.selp-opt-nm mark { background: color-mix(in srgb, var(--accent-amber) 32%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.cat-lvl-search { max-height: 230px; overflow-y: auto; }

/* ícone (emoji) da categoria nas listas e no cabeçalho */
.cat-ico { font-size: 1.02rem; line-height: 1; width: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.selp-cur .cat-ico { font-size: 1.12rem; }

/* painel "nova categoria": título + grade de ícones */
.catnew-title { font-size: 0.82rem; font-weight: 700; color: var(--text-2); }
/* O editor de categoria com o estoque inteiro de ícones (14/09/2026): busca por palavra e grupos que rolam
   por dentro (lista flutuante no modal: aqui o overscroll contain é certo). O botão de ícone tem display
   próprio, então o [hidden] da busca precisa do !important para esconder de verdade. */
.catnew-icons { display: flex; flex-direction: column; gap: 6px; }
.caticon-top { display: flex; align-items: center; gap: 6px; }
.caticon-busca { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-1); background: var(--bg-1); color: var(--text-1); font: inherit; font-size: 0.8rem; }
.caticon-busca:focus { outline: none; border-color: var(--primary); }
.caticon-lista { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.caticon-lista > * { flex-shrink: 0; }
.caticon-grp-nm { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-4); margin: 0 0 4px 2px; }
.caticon-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.caticon-vazio { font-size: 0.78rem; color: var(--text-4); padding: 8px 2px; }
.caticon-sw[hidden], .caticon-grp[hidden], .caticon-vazio[hidden] { display: none !important; }

/* ===== O CLIENTE ACOMPANHA O PEDIDO (14/09/2026) =====
   acp = o notificador de etapa e o card do cliente; plp = o pagamento combinado; mped = Meus pedidos.
   O item do menu tem display proprio: o [hidden] precisa do !important para sumir de verdade. */
.sidebar-item[hidden] { display: none !important; }
.acp-card .acp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acp-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); }
.acp-status { font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--accent-amber) 16%, transparent); color: var(--accent-amber); }
.acp-status.production { background: color-mix(in srgb, var(--accent-blue) 16%, transparent); color: var(--accent-blue); }
.acp-status.delivered { background: color-mix(in srgb, var(--accent-green) 16%, transparent); color: var(--accent-green); }
.acp-status.cancelled { background: var(--bg-2); color: var(--text-4); }
.acp-atual { font-size: 1.35rem; font-weight: 800; line-height: 1.2; margin: 4px 0 10px; color: var(--text-1); text-wrap: balance; }
.acp-barra { height: 7px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.acp-barra i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
.acp-sub { font-size: 0.78rem; color: var(--text-3); margin-top: 7px; font-variant-numeric: tabular-nums; }
.acp-sub.atraso { color: var(--accent-red); font-weight: 600; }
.acp-passos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.acp-passos li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; border-radius: 999px; border: 1px solid var(--border-1); font-size: 0.76rem; color: var(--text-3); max-width: 100%; }
.acp-passos li.feita { color: var(--text-4); }
.acp-passos li.agora { border-color: var(--primary); color: var(--text-1); font-weight: 600; }
.acp-bola { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-2); flex: none; }
.acp-passos li.feita .acp-bola { background: var(--primary); border-color: var(--primary); }
.acp-passos li.agora .acp-bola { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.acp-pt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acp-pd { color: var(--text-4); font-variant-numeric: tabular-nums; }
.acp-ultima { margin-top: 10px; font-size: 0.74rem; color: var(--text-4); }
.acp-link .form-input { font-size: 0.78rem; }
.acp-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acp-dica { font-size: 0.74rem; color: var(--text-4); margin-top: 8px; line-height: 1.45; }
.acp-mini { background: none; border: 0; padding: 0; color: var(--text-3); font: inherit; text-decoration: underline; cursor: pointer; }
.acp-nexo { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; }
.acp-nexo .acp-dica { margin-top: 0; }
.note-meta .acp-olho { margin-right: 6px; }
.acp-olho.on { color: var(--primary); font-weight: 600; }
.acp-anexo { display: flex; flex-direction: column; gap: 4px; }
.acp-anexo > .acp-olho { background: none; border: 1px solid var(--border-1); border-radius: 8px; font-size: 0.7rem; color: var(--text-3); padding: 2px 6px; cursor: pointer; }
.acp-anexo > .acp-olho.on { color: var(--primary); border-color: var(--primary); }
.acp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.acp-chip { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acp-chip.espera { color: var(--accent-amber); background: color-mix(in srgb, var(--accent-amber) 14%, transparent); }
.acp-chip.ok { color: var(--accent-green); background: color-mix(in srgb, var(--accent-green) 14%, transparent); }
.acp-chip.ruim { color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 14%, transparent); }
.plp-opc { font-weight: 400; color: var(--text-4); font-size: 0.72rem; }
.plp-modo { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--bg-2); }
.plp-modo-bt { flex: 1; border: 0; background: none; padding: 7px 8px; border-radius: 8px; font: inherit; font-size: 0.82rem; color: var(--text-3); cursor: pointer; }
.plp-modo-bt.on { background: var(--text-1); color: var(--bg-1); font-weight: 600; }
.plp-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.plp-campo { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; color: var(--text-3); min-width: 0; }
.plp-check { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-2); align-self: end; padding-bottom: 9px; }
.plp-previa { margin-top: 10px; }
.plp-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.plp-lista > * { flex-shrink: 0; }
.plp-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 10px; padding: 7px 10px; border-radius: 8px; background: var(--bg-2); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.plp-lista li > .plp-rot { grid-area: 1 / 1; }
.plp-lista li > .plp-val { grid-area: 1 / 2; }
.plp-lista li > .plp-dt { grid-area: 2 / 1; font-size: 0.72rem; color: var(--text-4); }
.plp-lista li > .plp-st { grid-area: 2 / 2; }
.plp-lista.edit li { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 120px); gap: 8px; }
.plp-lista.edit li > * { grid-area: auto; }
.plp-lista li.pago .plp-val { color: var(--text-3); }
.plp-rot { color: var(--text-3); }
.plp-val { font-weight: 600; text-align: right; }
.plp-st { font-size: 0.7rem; color: var(--text-4); min-width: 58px; text-align: right; }
.plp-lista li.pago .plp-st { color: var(--accent-green); }
.plp-in-dt, .plp-in-val { height: 32px; padding: 0 8px; font-size: 0.8rem; min-width: 0; }
.plp-in-val { text-align: right; }
.plp-in-val.fixa { border-color: var(--primary); }
.plp-soma { margin-top: 6px; font-size: 0.78rem; font-weight: 600; }
.plp-soma.ok { color: var(--accent-green); }
.plp-soma.ruim, .plp-nota.ruim { color: var(--accent-red); }
.plp-nota { font-size: 0.78rem; color: var(--text-3); margin-top: 6px; }
.plp-resumo { font-size: 0.88rem; font-weight: 600; color: var(--text-1); }
.plp-aceite { margin-top: 6px; }
.plp-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.plp-tag.espera { color: var(--accent-amber); background: color-mix(in srgb, var(--accent-amber) 14%, transparent); }
.plp-tag.ok { color: var(--accent-green); background: color-mix(in srgb, var(--accent-green) 14%, transparent); }
.plp-tag.ruim { color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 14%, transparent); }
.plp-recado { margin-top: 6px; font-size: 0.8rem; color: var(--text-2); font-style: italic; }
.plp-total { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 0.8rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.plp-dif { margin-top: 8px; font-size: 0.76rem; color: var(--accent-red); }
.mped-lista { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.mped-card { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 16px; }
.mped-card.destaque { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.mped-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mped-logo, .mped-marca { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.mped-logo { object-fit: cover; box-shadow: 0 0 0 1px var(--border-1); }
.mped-marca { display: grid; place-items: center; color: #fff; font-weight: 800; }
.mped-emp { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mped-emp span { font-size: 0.8rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mped-sec { margin: 14px 0 6px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); }
.mped-itens, .mped-novs { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; }
.mped-itens li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border-1); }
.mped-novs li { padding: 6px 0; border-top: 1px solid var(--border-1); }
.mped-itens li:first-child, .mped-novs li:first-child { border-top: 0; }
.mped-novs small { display: block; color: var(--text-4); font-size: 0.72rem; }
.mped-resp { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mped-arqs { display: flex; flex-wrap: wrap; gap: 6px; }
.mped-arqs a { font-size: 0.8rem; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border-1); color: var(--text-2); text-decoration: none; }
.caticon-sw { width: 30px; height: 30px; border-radius: 8px; padding: 0; cursor: pointer; font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-1); border: 1px solid var(--border-1); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.caticon-sw:hover { border-color: var(--border-2); transform: scale(1.08); }
.caticon-sw.sel { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--bg-2); }
.caticon-sw.none { color: var(--text-4); }

/* --- Lançamento: escolha Despesa/Entrada + valor em destaque --- */
.tx-typeseg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.tx-type {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 8px 12px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-1); background: var(--bg-2);
  cursor: pointer; transition: all var(--transition); color: var(--text-3);
}
.tx-type svg { opacity: 0.8; transition: opacity var(--transition); }
.tx-type span { font-size: 0.95rem; font-weight: 700; color: var(--text-1); }
.tx-type small { font-size: 0.68rem; color: var(--text-4); }
.tx-type:hover { border-color: var(--border-2); }
.tx-type.expense.active { background: var(--accent-red); border-color: var(--accent-red); }
.tx-type.income.active  { background: var(--accent-green); border-color: var(--accent-green); }
.tx-type.active, .tx-type.active span { color: #fff; }
.tx-type.active small { color: rgba(255,255,255,0.82); }
.tx-type.active svg { opacity: 1; }

.tx-amount {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 18px 12px 20px; margin-bottom: 18px;
  border-radius: var(--radius-lg); background: var(--bg-2);
  border: 1px solid var(--border-1); transition: border-color var(--transition);
}
.tx-amount:focus-within { border-color: var(--border-focus); }
.tx-amount-cur { font-size: 1.25rem; font-weight: 600; color: var(--text-4); }
.tx-amount-inp {
  border: none; background: transparent; outline: none; padding: 0;
  font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em;
  text-align: center; width: 100%; max-width: 320px;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}
.tx-amount-inp::placeholder { color: var(--text-5); }
.tx-amount.expense .tx-amount-inp { color: var(--accent-red); }
.tx-amount.income  .tx-amount-inp { color: var(--accent-green); }

/* Animações globais */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(0.97); } }
/* A página só clareia de leve — quem faz o show são os itens entrando da esquerda */
.page-enter, .page-enter-right, .page-enter-left { animation: pageFade 0.35s ease; }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
.btn:active, .chip:active, .pagetab:active { transform: scale(0.96); }

/* Itens surgem vindo da esquerda, em sequência (da esquerda para a direita
   nas linhas; de cima para baixo nas listas). */
@keyframes revealLeft { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.stat-card, .card, .transaction-item, .task-item, .habit-card,
.client-card, .order-card, .week-day, .notif-item, .acc-card {
  animation: revealLeft 0.58s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
:is(.stat-card, .card, .transaction-item, .task-item, .habit-card, .client-card, .order-card, .week-day, .notif-item, .acc-card):nth-child(2) { animation-delay: 78ms; }
:is(.stat-card, .card, .transaction-item, .task-item, .habit-card, .client-card, .order-card, .week-day, .notif-item, .acc-card):nth-child(3) { animation-delay: 156ms; }
:is(.stat-card, .card, .transaction-item, .task-item, .habit-card, .client-card, .order-card, .week-day, .notif-item, .acc-card):nth-child(4) { animation-delay: 234ms; }
:is(.stat-card, .card, .transaction-item, .task-item, .habit-card, .client-card, .order-card, .week-day, .notif-item, .acc-card):nth-child(5) { animation-delay: 312ms; }
:is(.stat-card, .card, .transaction-item, .task-item, .habit-card, .client-card, .order-card, .week-day, .notif-item, .acc-card):nth-child(6) { animation-delay: 390ms; }
:is(.stat-card, .card, .transaction-item, .task-item, .habit-card, .client-card, .order-card, .week-day, .notif-item, .acc-card):nth-child(7) { animation-delay: 468ms; }
:is(.stat-card, .card, .transaction-item, .task-item, .habit-card, .client-card, .order-card, .week-day, .notif-item, .acc-card):nth-child(8) { animation-delay: 546ms; }
:is(.stat-card, .card, .transaction-item, .task-item, .habit-card, .client-card, .order-card, .week-day, .notif-item, .acc-card):nth-child(n+9) { animation-delay: 610ms; }

/* Hábitos: grade semanal (mesmo desenho da Agenda) */
.habwrap { overflow-x: auto; }
.habgrid {
  display: grid;
  grid-template-columns: minmax(220px, 1.9fr) repeat(7, minmax(52px, 1fr));   /* o nome inteiro, sem cortar */
  gap: 6px;
  min-width: 700px;
}
.hab-head {
  background: var(--bg-2);
  border: 0.5px solid var(--border-1);
  border-radius: var(--radius-md);
  text-align: center;
  padding: 7px 4px;
  animation: rise 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.hab-head .dow { font-size: 0.6rem; letter-spacing: 0.5px; color: var(--text-4); text-transform: uppercase; }
.hab-head .num { font-weight: 700; font-size: 0.95rem; }
.hab-head.today { background: var(--primary); border-color: var(--primary); color: var(--bg-1); }
.hab-head.today .dow { color: inherit; opacity: 0.7; }
.hab-name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0.5px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--card, var(--bg-2));
  animation: rise 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.hab-name .cat-del { opacity: 0; }
.hab-name:hover .cat-del { opacity: 1; }
@media (max-width: 768px) { .hab-name .cat-del { opacity: 1; } }
.hab-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-1);
  padding: 6px 0;
}
.hab-cell.today { border-color: var(--primary); }
.hab-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border-1);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all var(--transition);
}
.hab-dot:hover:not(:disabled) { border-color: var(--accent-green); transform: scale(1.12); }
.hab-dot.done { background: var(--accent-green); border-color: var(--accent-green); }
.hab-dot:disabled { opacity: 0.25; cursor: default; }

/* ===== Meu dia (14/09/2026): icone proprio, grupos por categoria e filtros =====
   Pedido dele: "icones diferentes para diferenciar" e "uma organizacao melhor com filtro". */
.hab-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hab-chip {
  height: 30px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-1);
  background: transparent; color: var(--text-2); font-size: 0.78rem; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; transition: background-color .2s cubic-bezier(.22,.61,.36,1), color .2s cubic-bezier(.22,.61,.36,1), border-color .2s cubic-bezier(.22,.61,.36,1);
}
.hab-chip:hover { border-color: var(--border-2); color: var(--text-1); }
.hab-chip.is-sel { background: var(--primary); border-color: var(--primary); color: var(--bg-1); }
.hab-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.hab-grupo { grid-column: 1 / -1; font-size: 0.72rem; color: var(--text-3); padding: 10px 2px 0; }
.hab-name { cursor: pointer; }
.hab-name:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hab-tile {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--hc); background: color-mix(in srgb, var(--hc) 16%, transparent);
}
.hab-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hab-nome b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.85rem; font-weight: 600; line-height: 1.25; }
.hab-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 0.7rem; color: var(--text-3); margin-top: 3px; }
.hab-meta span { display: inline-flex; align-items: center; gap: 3px; }
.hab-meta svg { width: 11px; height: 11px; flex-shrink: 0; }
.hab-name.novo { animation: habNovo 1.6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes habNovo { from { box-shadow: 0 0 0 2px var(--hc); } to { box-shadow: 0 0 0 0 transparent; } }
.hab-vazio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0.9rem 1rem; color: var(--text-3); font-size: 0.85rem; }
.hr-emoji svg { width: 15px; height: 15px; display: block; }

/* ===== Novo habito: cada parte aparece depois da anterior (14/09/2026) =====
   Nome -> icone -> cor -> categoria -> lembrete e botoes. Suave e longo, sem pulo, e toda
   entrada tem saida (apagar o nome recolhe tudo, de baixo para cima). A altura anda por
   grid-template-rows 0fr -> 1fr, sem medir nada em JS. --hbf-cor mora no .modal. */
.hbf { --hbf-curva: cubic-bezier(.22,.61,.36,1); }
.hbf-st {
  display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px);
  transition: grid-template-rows .5s var(--hbf-curva), opacity .42s var(--hbf-curva), transform .5s var(--hbf-curva);
}
.hbf-st.is-on { grid-template-rows: 1fr; opacity: 1; transform: none; }
.hbf-st > div { overflow: hidden; min-height: 0; }
.hbf-lb { font-size: 0.8rem; font-weight: 600; color: var(--text-2); margin: 16px 0 8px; display: flex; gap: 8px; align-items: center; }
.hbf-sug { font-size: 0.72rem; font-weight: 400; color: var(--text-4); transition: opacity .22s var(--hbf-curva); }
.hbf-erro { font-size: 0.8rem; color: var(--accent-red); margin-top: 6px; }
.hbf-erro:empty { margin-top: 0; }
.hbf-grade { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px; }
.hbf-grade-cores { gap: 10px; align-items: center; }
.hbf-it {
  opacity: 0; transform: translateY(6px) scale(.95);
  transition: opacity .32s var(--hbf-curva), transform .38s var(--hbf-curva), border-color .2s var(--hbf-curva),
    color .2s var(--hbf-curva), background-color .2s var(--hbf-curva), box-shadow .28s var(--hbf-curva);
}
.hbf-st.is-on .hbf-it {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 36ms + 150ms), calc(var(--i, 0) * 36ms + 150ms), 0s, 0s, 0s, 0s;
}
.hbf.hbf-pronto .hbf-st.is-on .hbf-it { transition-delay: 0s; }
.hbf-st.is-on .hbf-it.hbf-chega { opacity: 0; transform: translateY(6px) scale(.95); }
.hbf-ib {
  width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--border-1); padding: 0;
  background: transparent; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hbf-ib:hover { color: var(--text-1); border-color: var(--border-2); }
.hbf-ib.is-sug { border-color: var(--border-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-3) 24%, transparent); }
.hbf-ib.is-sel {
  border: 1.5px solid var(--hbf-cor, var(--text-2)); color: var(--hbf-cor, var(--text-1));
  background: color-mix(in srgb, var(--hbf-cor, var(--text-2)) 14%, transparent); box-shadow: none;
}
.hbf-sw { width: 28px; height: 28px; border-radius: 50%; border: none; padding: 0; cursor: pointer; }
.hbf-sw.is-sel { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--hbf-cor, var(--text-2)); }
.hbf-ch {
  height: 32px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-1); background: transparent;
  color: var(--text-2); font-size: 0.8rem; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; position: relative;
}
.hbf-ch:hover { border-color: var(--border-2); color: var(--text-1); }
.hbf-ch.is-sel { background: var(--primary); border-color: var(--primary); color: var(--bg-1); }
.hbf-ch.hbf-outra-lb.is-sel { background: transparent; color: var(--hbf-cor); border-color: var(--hbf-cor); }
.hbf-outra { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.hbf-nova { display: inline-flex; gap: 6px; align-items: center; }
.hbf-nova-in.form-input { width: 0; min-width: 0; padding: 0; border-width: 0; opacity: 0; height: 32px; transition: width .3s var(--hbf-curva), opacity .3s var(--hbf-curva); }
.hbf-nova-in.form-input.is-on { width: 170px; padding: 0 10px; border-width: 1px; opacity: 1; }
.hbf-titulo { display: flex; align-items: center; }
.hbf-tile {
  width: 0; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; opacity: 0;
  transform: scale(.8); overflow: hidden; color: var(--hbf-cor, var(--text-2)); background: color-mix(in srgb, var(--hbf-cor, var(--text-2)) 16%, transparent);
  transition: width .42s cubic-bezier(.22,.61,.36,1), margin .42s cubic-bezier(.22,.61,.36,1), opacity .34s cubic-bezier(.22,.61,.36,1),
    transform .42s cubic-bezier(.22,.61,.36,1), color .32s cubic-bezier(.22,.61,.36,1), background-color .32s cubic-bezier(.22,.61,.36,1);
}
.hbf-tile.is-on { width: 30px; margin-right: 10px; opacity: 1; transform: none; }
.hbf-aviso { margin-top: 16px; padding: 10px 12px; border: 1px solid var(--border-1); border-radius: var(--radius-md); }
.hbf-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; }
.hbf-toggle svg { color: var(--text-3); flex-shrink: 0; }
.hbf-hora { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.hbf-hora .form-input { width: 120px; }
.hbf-dias { display: flex; gap: 4px; flex-wrap: wrap; }
.hbf-dy {
  width: 34px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--border-1); background: transparent;
  color: var(--text-3); font-size: 0.78rem; cursor: pointer;
  transition: background-color .2s var(--hbf-curva), color .2s var(--hbf-curva), border-color .2s var(--hbf-curva);
}
.hbf-dy.is-on { background: var(--primary); border-color: var(--primary); color: var(--bg-1); }
.hbf-hint { font-size: 0.72rem; color: var(--text-3); margin-top: 8px; line-height: 1.4; }
/* Meu dia (14/09/2026): vezes por dia, nota e vários horários de lembrete */
.hbf-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hbf-meta .form-input { flex: 1; min-width: 180px; height: 34px; }
.hbf-conta { display: inline-flex; align-items: center; gap: 6px; }
.hbf-conta .hbf-ch { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 1rem; }
.hbf-conta .hbf-ch:disabled { opacity: .4; cursor: default; }
.hbf-conta span { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.hbf-horas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.hbf-hr { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--border-1); border-radius: 999px; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--text-1); }
.hbf-hr button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-4); cursor: pointer; font-size: 0.95rem; line-height: 1; }
.hbf-hr button:hover { color: var(--accent-red); background: var(--bg-2); }
.hbf-repete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.8rem; color: var(--text-3); }
.hbf-repete .form-input { width: auto; height: 32px; padding: 0 8px; }
.hbf-aviso .hbf-dias { margin-top: 10px; }
#hbfPerm:not(:empty) { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .hbf *, .hbf-tile { transition: none !important; } }

/* Diário: entradas anteriores editáveis */
.diary-entry { transition: border-color var(--transition), transform var(--transition); border: 0.5px solid transparent; border-radius: var(--radius-md); }
.diary-entry:hover { border-color: var(--primary); transform: translateX(2px); }
.diary-entry.editing { border-color: var(--primary); }
.diary-entry .cat-del { opacity: 0; transition: opacity var(--transition); }
.diary-entry:hover .cat-del, .diary-entry.editing .cat-del { opacity: 1; }
@media (max-width: 768px) { .diary-entry .cat-del { opacity: 1; } }

/* Botão "repetir" na linha de prazos */
.chip-repeat { display: inline-flex; align-items: center; gap: 5px; }
.chip-repeat svg { flex-shrink: 0; }

/* Selo de recorrência na tarefa */
.task-recur { display: inline-flex; align-items: center; gap: 3px; color: var(--primary); font-weight: 600; }
.task-recur svg { flex-shrink: 0; }

/* Etiquetas de tarefa */
.task-etq {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
}

/* Links/redes da empresa */
.company-links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; }
.company-link-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 0.5px solid var(--border-1);
  background: var(--bg-2);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text-2);
  text-decoration: none;
  transition: all var(--transition);
}
.company-link-pill:hover { border-color: var(--primary); color: var(--text-1); }

/* Ações rápidas na lista de transações */
.tx-act {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  opacity: 0.5;
}
.transaction-item:hover .tx-act { opacity: 1; }
.tx-act:hover { background: var(--bg-2); color: var(--text-1); }
.tx-act.danger:hover { background: var(--bg-2); color: var(--accent-red); }
@media (max-width: 768px) { .tx-act { opacity: 1; } }

/* A pagar / a receber */
.conta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0.65rem 0;
  border-bottom: 0.5px solid var(--border-1);
  animation: rise 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.conta-item:last-child { border-bottom: none; }
.conta-desc { font-size: 0.88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-meta { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.conta-valor { font-weight: 700; font-size: 0.9rem; }
.conta-valor.expense { color: var(--accent-red); }
.conta-valor.income { color: var(--accent-green); }
.conta-badge { font-weight: 600; }
.conta-badge.danger { color: var(--accent-red); }
.conta-badge.warn { color: var(--accent-amber, #d97706); }
.conta-item.danger { border-left: 2px solid var(--accent-red); border-radius: 0; padding-left: 8px; }

/* Gráfico de maiores gastos */
.gbar { margin-bottom: 0.7rem; animation: rise 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.gbar-head { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 4px; }
.gbar-head span { color: var(--text-2); }
.gbar-track { height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.gbar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  animation: gfill 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transform-origin: left;
}
@keyframes gfill { from { transform: scaleX(0); } }

/* Lançamento por voz */
.voice-status { text-align: center; padding: 0.5rem 0 1rem; }
.voice-mic {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 0.5px solid var(--border-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}
.voice-mic.listening {
  color: var(--accent-red);
  border-color: var(--accent-red);
  animation: micpulse 1.4s ease-in-out infinite;
}
@keyframes micpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.25); }
  50% { box-shadow: 0 0 0 14px rgba(220, 38, 38, 0); }
}
.voice-hint { font-size: 0.82rem; color: var(--text-3); line-height: 1.5; }
.voice-live { margin-top: 10px; font-size: 0.9rem; color: var(--text-1); min-height: 1.3rem; }
.voice-sum { border: 0.5px solid var(--border-1); border-radius: var(--radius-lg); padding: 4px 12px; animation: pop 0.2s ease; }
.voice-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 0.5px solid var(--border-1); font-size: 0.83rem; }
.voice-row:last-child { border-bottom: none; }
.voice-row span { color: var(--text-3); flex-shrink: 0; }
.voice-row b { text-align: right; }
#dictBtn.rec {
  color: var(--accent-red);
  border-color: var(--accent-red);
  animation: micpulse 1.4s ease-in-out infinite;
}

/* Barra de criar módulo */
.catadd-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  animation: rise 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.catadd-row .form-input { flex: 1; max-width: 340px; }

/* Acessibilidade: respeita 'reduzir movimento' */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* Categorias em módulos */
.modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.modcard {
  background: var(--card, var(--bg-2));
  border: 0.5px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  cursor: pointer;
  position: relative;
  animation: rise 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.modcard:hover:not(.open):not(.modcard-add) {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.modcard-chev {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  color: var(--text-4);
  transition: transform var(--transition), color var(--transition);
  display: flex;
}
.modcard:hover .modcard-chev { color: var(--primary); transform: translateX(2px); }
.modcard.open {
  grid-column: 1 / -1;
  cursor: default;
  border-color: var(--primary);
  animation: pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.modcard.open .cat-chip { animation: rise 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.modcard-head { display: flex; justify-content: space-between; align-items: center; }
.modcard-name { font-weight: 600; font-size: 0.95rem; }
.modcard-total-inline { font-weight: 500; font-size: 0.78rem; color: var(--text-3); margin-left: 8px; }
.modcard-meta { font-size: 0.72rem; color: var(--text-4); margin-top: 3px; }
.modcard-total { font-size: 0.98rem; color: var(--text-1); margin-top: 10px; font-weight: 700; letter-spacing: -0.01em; }
.mod-spend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-3);
}
.modcard-foot { margin-top: 10px; border-top: 0.5px solid var(--border-1); padding-top: 8px; }
.mod-budget { margin-top: 12px; padding-top: 10px; border-top: 0.5px solid var(--border-1); }
.mod-budget-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--text-3); margin-bottom: 6px; }
.mod-budget-input { width: 90px; padding: 4px 8px; text-align: right; }
.mod-budget-bar { height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.mod-budget-fill { height: 100%; background: var(--accent-green); border-radius: 4px; transition: width var(--transition); }
.mod-budget-fill.over { background: var(--accent-red); }
.mod-budget-info { font-size: 0.75rem; color: var(--text-3); margin-top: 5px; }
.mod-budget-info.over { color: var(--accent-red); font-weight: 600; }

/* Empresa em chips com avatar/logo */
.comp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 5px;
  border: 0.5px solid var(--border-1);
  background: var(--bg-2);
  color: var(--text-2);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.comp-chip:not(.active):hover { border-color: var(--text-4); color: var(--text-1); }
.comp-chip.active { border-color: var(--primary); background: var(--bg-3); color: var(--text-1); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary); }
.comp-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  object-fit: cover;
}

/* Prioridade em chips com ícone */
.prio-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 0.5px solid var(--border-1);
  background: var(--bg-2);
  color: var(--text-3);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.prio-chip svg { flex-shrink: 0; }
.prio-chip.low.active    { background: var(--accent-green); border-color: var(--accent-green); color: #fff; }
.prio-chip.medium.active { background: var(--accent-amber, #d97706); border-color: var(--accent-amber, #d97706); color: #fff; }
.prio-chip.high.active   { background: var(--accent-red); border-color: var(--accent-red); color: #fff; }
.prio-chip:not(.active):hover { border-color: var(--text-4); color: var(--text-1); }

/* Botões de navegação em ícone (assistente) */
.btn-icon-nav {
  width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Assistente em etapas (nova transação) */
.wizhead { display: flex; align-items: center; gap: 10px; margin-bottom: 1.1rem; }
.wizdots { display: flex; gap: 5px; align-items: center; }
.wizdot { width: 26px; height: 5px; padding: 0; border: none; border-radius: 3px; background: var(--bg-3); cursor: pointer; transition: all var(--transition); }
.wizdot.active { background: var(--primary); }
.wizdot.current { width: 34px; }
.wizdot:hover { opacity: 0.75; }
.wizlabel { font-size: 0.75rem; color: var(--text-3); }
.wizstep { display: none; }
.wizstep.active { display: block; animation: wizfade 0.18s ease; }
@keyframes wizfade { from { opacity: 0; transform: translateX(8px); } }

/* Abas internas dos grupos (Financeiro, Agenda, Meu dia) */
.pagetabs { display: flex; gap: 6px; margin: -0.4rem 0 0.85rem; flex-wrap: wrap; align-items: center; transition: gap .2s ease; }
/* Modo rápido: recolhe pras abas ativas e expande no hover */
.pagetabs:not(:hover) { gap: 0; overflow: hidden; }
.pagetabs:not(:hover) .pagetab:not(.active) { max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; pointer-events: none; }
.btn-icon-only { padding: 0.5rem; display: inline-flex; align-items: center; justify-content: center; }
.pagetab {
  padding: 6px 16px;
  border: 0.5px solid var(--border-1);
  background: var(--bg-2);
  color: var(--text-3);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  max-width: 280px; overflow: hidden; white-space: nowrap;
  transition: max-width .3s cubic-bezier(.4,0,.2,1), padding .24s ease, opacity .2s ease, color var(--transition), background var(--transition), border-color var(--transition);
}
.pagetab:hover { color: var(--text-1); border-color: var(--primary); }
.pagetab.active { background: var(--primary); color: var(--bg-1); border-color: var(--primary); }

/* Barra de navegação inferior (celular) */
.bottomnav { display: none; }
@media (max-width: 768px) {
  .bottomnav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--bg-1);
    border-top: 0.5px solid var(--border-1);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--text-4);
    font-size: 0.62rem;
    font-weight: 500;
    padding: 4px 0;
    cursor: pointer;
  }
  .bnav-item.active { color: var(--text-1); }
  .main { padding-bottom: 90px; }
}

/* Tela de login / setup */
.auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bg-2);
  z-index: 1000;
}
/* Login em duas colunas (split): painel de marca + formulário */
.auth-split {
  width: 100%;
  max-width: 860px;
  min-height: 520px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  animation: rise 0.35s ease both;
}
.auth-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #3b2f8f 0%, #4f46b8 45%, #2a2470 100%);
  color: #fff;
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.auth-nodes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; pointer-events: none; }
.auth-brand-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.auth-brand-logo svg { width: 34px; height: 34px; }
.auth-brand-copy { position: relative; z-index: 1; }
.auth-brand-copy h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; max-width: 16ch; }
.auth-brand-copy p { color: rgba(255,255,255,0.72); font-size: 0.9rem; line-height: 1.6; margin-top: 0.7rem; max-width: 32ch; }

.auth-form { padding: 2.75rem 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.auth-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.25rem; letter-spacing: -0.01em; }
.auth-subtitle { font-size: 0.85rem; color: var(--text-3); margin-bottom: 0.75rem; }
.auth-toggle { margin-top: 0.9rem; font-size: 0.82rem; color: var(--text-3); text-align: center; }
.auth-toggle a { color: var(--primary); font-weight: 600; text-decoration: none; }
.auth-label { display: block; font-size: 0.75rem; color: var(--text-3); margin: 0.9rem 0 0.35rem; font-weight: 500; }
.auth-field { position: relative; display: flex; align-items: center; }
.auth-field .auth-ic { position: absolute; left: 0.85rem; width: 17px; height: 17px; color: var(--text-4); pointer-events: none; }
.auth-input {
  width: 100%; height: 46px; border-radius: 11px;
  border: 1px solid var(--border-1); background: var(--bg-2); color: var(--text-1);
  font-size: 0.95rem; font-family: inherit; padding: 0 2.6rem 0 2.4rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(124,120,232,0.18); }
.auth-eye {
  position: absolute; right: 0.55rem; width: 30px; height: 30px; border: none; background: none;
  color: var(--text-4); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.auth-eye:hover { color: var(--text-2); }
.auth-eye.on { color: var(--primary); }
.auth-eye svg { width: 18px; height: 18px; }
.auth-cta { width: 100%; height: 48px; justify-content: center; margin-top: 1.4rem; font-size: 0.95rem; }
.auth-hint { font-size: 0.72rem; color: var(--text-4); margin-top: 0.5rem; }
.auth-error { color: var(--accent-red); font-size: 0.8rem; margin-top: 0.6rem; min-height: 1rem; }

@media (max-width: 640px) {
  .auth-split { grid-template-columns: 1fr; max-width: 400px; min-height: 0; }
  .auth-brand { padding: 1.6rem 1.6rem; min-height: 138px; gap: 1rem; }
  .auth-brand-logo { font-size: 1.15rem; }
  .auth-brand-copy h2 { font-size: 1.2rem; }
  .auth-brand-copy p { display: none; }
  .auth-form { padding: 1.75rem 1.6rem; }
}

/* Notificações */
.notif-wrap { position: relative; }
.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent-red);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  z-index: 50;
}
.notif-panel-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-1);
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--bg-1);
}
.notif-item {
  display: flex;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-1);
  cursor: pointer;
  transition: background var(--transition);
}
.notif-item:hover { background: var(--bg-2); }
.notif-item:last-child { border-bottom: none; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 0.35rem; flex-shrink: 0; }
.notif-dot.danger { background: var(--accent-red); }
.notif-dot.warn { background: var(--accent-amber, #d97706); }
.notif-item-title { font-size: 0.82rem; font-weight: 500; color: var(--text-1); }
.notif-item-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 0.1rem; }
/* Celular: painel de notificações vira uma folha quase full-width abaixo do header
   (antes ficava estreito/cortado, preso ao sino dentro do header com backdrop-filter). */
@media (max-width: 640px) {
  .notif-panel {
    position: fixed;
    top: 60px; left: 10px; right: auto;
    width: calc(100vw - 20px); max-width: none;
    max-height: 78vh;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  }
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.7rem;
  margin-left: 0.5rem;
}

/* ===== Main ===== */
.main {
  grid-area: main;
  padding: 1.75rem 2rem 3rem;
  overflow-x: hidden;
  width: 100%;
}

.page { display: none; animation: fadeIn 0.2s ease; }
.page.active { display: block; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.page-subtitle { color: var(--text-3); font-size: 0.85rem; margin-top: 0.2rem; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: var(--primary);
  color: var(--bg-1);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition);
  white-space: nowrap;
  border: 1px solid var(--primary);
}

.btn:hover { background: var(--primary-light); border-color: var(--primary-light); }
.btn:active { transform: scale(0.98); }

.btn-secondary { background: var(--bg-1); color: var(--text-1); border: 1px solid var(--border-2); }
.btn-secondary:hover { background: var(--bg-2); border-color: var(--text-4); }

.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--bg-2); color: var(--text-1); }

.btn-danger { background: var(--accent-red); border-color: var(--accent-red); }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.btn-sm { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.btn-icon { padding: 0.4rem; width: 28px; height: 28px; }
.btn-block { width: 100%; }

/* ===== Cards ===== */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: border-color var(--transition);
}

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.card-title { font-size: 0.9rem; font-weight: 600; }
.card-subtitle { font-size: 0.78rem; color: var(--text-3); margin-top: 0.1rem; }

/* ===== Stats Grid ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  transition: all var(--transition);
}

.stat-card:hover { border-color: var(--border-2); }

.stat-label { font-size: 0.78rem; color: var(--text-3); font-weight: 500; }
.stat-value { font-size: 1.5rem; font-weight: 600; margin-top: 0.25rem; letter-spacing: -0.02em; }
.stat-change { font-size: 0.75rem; margin-top: 0.4rem; }
.stat-change.positive { color: var(--accent-green); }
.stat-change.negative { color: var(--accent-red); }
.stat-change.neutral { color: var(--text-3); }

/* ===== Task List ===== */
.task-list { display: flex; flex-direction: column; gap: 0.4rem; }

.task-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  transition: all var(--transition);
  cursor: pointer;
}

.task-item:hover { border-color: var(--border-2); background: var(--bg-2); }
.task-item.completed { opacity: 0.5; }
.task-item.completed .task-title { text-decoration: line-through; }

.task-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--text-4);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  background: transparent;
  color: var(--bg-1);
  font-size: 11px;
  line-height: 1;
}

.task-checkbox:hover { border-color: var(--primary); }
.task-checkbox.checked { background: var(--primary); border-color: var(--primary); }

.task-content { flex: 1; min-width: 0; }
.task-title { font-weight: 500; font-size: 0.875rem; margin-bottom: 0.2rem; }
.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-3);
  align-items: center;
}

.task-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-2);
}

.task-priority {
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.task-priority.high { background: rgba(220, 38, 38, 0.1); color: var(--accent-red); }
.task-priority.medium { background: rgba(217, 119, 6, 0.1); color: var(--accent-amber); }
.task-priority.low { background: rgba(22, 163, 74, 0.1); color: var(--accent-green); }

.task-indicators { display: flex; gap: 0.6rem; font-size: 0.7rem; color: var(--text-3); }
.task-indicators span { display: flex; align-items: center; gap: 0.2rem; }

.task-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.task-progress-bar { flex: 1; height: 3px; background: var(--bg-2); border-radius: 2px; overflow: hidden; }
.task-progress-fill { height: 100%; background: var(--accent-green); border-radius: 2px; transition: width 0.3s ease; }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
  animation: fadeIn 0.15s ease;
}
.modal-overlay.active { display: flex; }

.modal {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn 0.15s ease;
  box-shadow: var(--shadow-lg);
}

@keyframes scaleIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

.modal-lg { max-width: 720px; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-1);
  position: sticky;
  top: 0;
  background: var(--bg-1);
  z-index: 1;
}

.modal-title { font-size: 0.95rem; font-weight: 600; }
.modal-body { padding: 1.25rem; }
.modal-footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border-1);
  justify-content: flex-end;
}

.modal-close {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 1.25rem;
  line-height: 1;
  transition: all var(--transition);
}
.modal-close:hover { background: var(--bg-2); color: var(--text-1); }

/* ===== Forms ===== */
.form-group { margin-bottom: 0.85rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }

.form-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--text-1);
  font-size: 0.875rem;
  transition: all var(--transition);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.05);
}

.form-textarea { resize: vertical; min-height: 70px; }
.form-help { font-size: 0.72rem; color: var(--text-4); margin-top: 0.25rem; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='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 0.5rem center;
  background-size: 14px;
  padding-right: 2rem;
}

/* ===== Tabs ===== */
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border-1); margin-bottom: 1rem; }
.tab {
  padding: 0.5rem 0.85rem;
  background: transparent;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition);
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-1); }
.tab.active { color: var(--text-1); border-bottom-color: var(--primary); }

/* ===== Empty State ===== */
.empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-3);
}
.empty-icon { font-size: 1.75rem; margin-bottom: 0.6rem; opacity: 0.4; }
.empty-title { font-size: 0.9rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.3rem; }
.empty-text { font-size: 0.8rem; margin-bottom: 0.85rem; }

/* ===== Toast ===== */
.toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 200;
}

.toast {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  font-size: 0.85rem;
  animation: slideInRight 0.2s ease;
}

@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.toast.success { border-left: 2px solid var(--accent-green); }
.toast.error { border-left: 2px solid var(--accent-red); }
.toast.info { border-left: 2px solid var(--accent-blue); }
.toast-icon { font-size: 0.9rem; }

/* ===== Grids ===== */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; }

/* ===== Company Card ===== */
.company-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
}

.company-card:hover { border-color: var(--border-2); }

.company-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.company-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--company-color, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bg-1);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.company-name { font-weight: 600; font-size: 0.875rem; }
.company-segment { font-size: 0.75rem; color: var(--text-3); margin-top: 0.1rem; }

.company-stats {
  display: flex;
  gap: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-1);
}
.company-stat { flex: 1; }
.company-stat-label { font-size: 0.7rem; color: var(--text-4); }
.company-stat-value { font-size: 0.9rem; font-weight: 600; margin-top: 0.1rem; }

/* ===== Finance ===== */
.balance-card {
  background: var(--primary);
  color: var(--bg-1);
  border-radius: var(--radius-lg);
  padding: 0.8rem 1.25rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.5rem;
}
.balance-card > .balance-label { width: 100%; }
.balance-label { font-size: 0.74rem; opacity: 0.72; display: flex; align-items: center; gap: 8px; }
.balance-value { font-size: 1.45rem; font-weight: 700; margin-top: 0; letter-spacing: -0.02em; }
/* botão de olho pra esconder o saldo */
.balance-eye { display: inline-flex; padding: 3px; border-radius: 6px; color: inherit; opacity: 0.8; cursor: pointer; background: none; border: none; }
.balance-eye:hover { opacity: 1; background: rgba(0,0,0,0.12); }
.balance-eye .eye-off { display: none; }
.balance-hidden .balance-eye .eye-on { display: none; }
.balance-hidden .balance-eye .eye-off { display: inline; }
/* valores borrados quando escondido (clicar no olho revela) */
.balance-hidden .balance-value,
.balance-hidden .balance-forecast b,
.balance-hidden .balance-meta-item .value { filter: blur(10px); user-select: none; pointer-events: none; }
.balance-meta { display: flex; gap: 1.1rem; margin: 0 0 0 auto; padding: 0; border: none; }
.balance-meta-item { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.balance-meta-item .label { font-size: 0.68rem; opacity: 0.6; }
.balance-meta-item .value { font-size: 0.82rem; font-weight: 600; margin-top: 0; }

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.85rem;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  margin-bottom: 0.4rem;
  transition: all var(--transition);
  cursor: pointer;
}
.transaction-item:hover { background: var(--bg-2); }
.transaction-item.pending { opacity: 0.6; }
.transaction-info { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.transaction-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-2);
  flex-shrink: 0;
}
.transaction-icon.income { background: rgba(22, 163, 74, 0.1); color: var(--accent-green); }
.transaction-icon.expense { background: rgba(220, 38, 38, 0.1); color: var(--accent-red); }
.transaction-name { font-weight: 500; font-size: 0.85rem; }
.transaction-meta { font-size: 0.72rem; color: var(--text-3); margin-top: 0.1rem; }
.transaction-amount { font-weight: 600; font-size: 0.875rem; flex-shrink: 0; }
.transaction-amount.income { color: var(--accent-green); }
.transaction-amount.expense { color: var(--accent-red); }

/* ===== Calendar ===== */
.calendar {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}
.calendar-title { font-size: 0.9rem; font-weight: 600; }
.calendar-nav { display: flex; gap: 0.15rem; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar-day-header {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-4);
  padding: 0.4rem;
}
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  position: relative;
  transition: all var(--transition);
  background: var(--bg-2);
  color: var(--text-2);
}
.calendar-day:hover { background: var(--bg-3); }
.calendar-day.other-month { opacity: 0.35; }
.calendar-day.today { background: var(--primary); color: var(--bg-1); font-weight: 600; }
.calendar-day.has-events::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 3px;
  height: 3px;
  background: var(--accent-amber);
  border-radius: 50%;
}
.calendar-day.today.has-events::after { background: var(--bg-1); }
.calendar-day.selected { box-shadow: inset 0 0 0 1.5px var(--primary); }

/* ===== Habits ===== */
.habit-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 1rem;
  transition: all var(--transition);
}
.habit-card.completed { border-color: var(--accent-green); background: rgba(22, 163, 74, 0.02); }
.habit-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.85rem; }
.habit-emoji { font-size: 1.25rem; }
.habit-name { font-weight: 600; flex: 1; font-size: 0.875rem; }
.habit-streak {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--bg-2);
  color: var(--text-2);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
}
.habit-progress-bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.7rem;
}
.habit-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; background: var(--primary); }
.habit-card.completed .habit-progress-fill { background: var(--accent-green); }

.habit-action {
  width: 100%;
  padding: 0.4rem;
  border-radius: var(--radius-md);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 500;
  transition: all var(--transition);
  border: 1px solid transparent;
}
.habit-action:hover { background: var(--primary); color: var(--bg-1); border-color: var(--primary); }
.habit-action.done { background: var(--accent-green); color: white; cursor: default; }
.habit-action.done:hover { background: var(--accent-green); border-color: var(--accent-green); }

/* ===== Filter Bar ===== */
.filter-bar {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}

.filter-chip {
  padding: 0.3rem 0.65rem;
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-3);
  transition: all var(--transition);
  cursor: pointer;
}
.filter-chip:hover { background: var(--bg-2); color: var(--text-1); }
.filter-chip.active { background: var(--primary); color: var(--bg-1); border-color: var(--primary); }
/* Modo rápido: cada grupo de filtro recolhe pro selecionado e expande no hover */
.filter-bar { transition: gap .2s ease; }
.filter-bar:not(:hover) { gap: 0; }
.filter-bar .filter-chip { max-width: 220px; overflow: hidden; white-space: nowrap; transition: max-width .3s cubic-bezier(.4,0,.2,1), padding .24s ease, opacity .2s ease, background var(--transition), color var(--transition), border-color var(--transition); }
.filter-bar:not(:hover) .filter-chip:not(.active) { max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; pointer-events: none; }
.filter-bar:not(:hover) .cl-flabel { margin-right: 8px; }
.filter-bar:not(:hover) .filter-chip.active { margin-right: 8px; }

/* ===== Detail Page ===== */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1rem;
  align-items: start;
}

.detail-section {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  margin-bottom: 0.75rem;
}
.detail-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}
.detail-section-title { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.detail-section-title .count { color: var(--text-4); font-weight: 500; font-size: 0.78rem; }

.subtask-item, .checkpoint-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  margin-bottom: 0.35rem;
  transition: all var(--transition);
}
.subtask-item:hover, .checkpoint-item:hover { background: var(--bg-3); }

.subtask-check, .checkpoint-marker {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--text-4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  background: transparent;
  cursor: pointer;
  color: white;
  font-size: 9px;
  line-height: 1;
}
.subtask-check:hover, .checkpoint-marker:hover { border-color: var(--primary); }
.subtask-check.checked, .checkpoint-marker.checked { background: var(--accent-green); border-color: var(--accent-green); }

.subtask-text, .checkpoint-text { flex: 1; font-size: 0.85rem; }
.subtask-text.done, .checkpoint-text.done { text-decoration: line-through; color: var(--text-4); }
.checkpoint-date { font-size: 0.7rem; color: var(--text-4); margin-top: 0.1rem; }

.note-item {
  padding: 0.7rem 0.85rem;
  background: var(--bg-2);
  border-left: 2px solid var(--primary);
  border-radius: var(--radius-md);
  margin-bottom: 0.4rem;
}
.note-content { font-size: 0.85rem; white-space: pre-wrap; }
.note-meta { font-size: 0.7rem; color: var(--text-4); margin-top: 0.3rem; }

.attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.4rem;
}
.attachment-item {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: var(--bg-2);
}
.attachment-item img { width: 100%; height: 100%; object-fit: cover; }
.attachment-item .file-icon {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-3);
}
.attachment-item .file-icon .ext { font-size: 0.65rem; margin-top: 0.2rem; }
.attachment-delete {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.attachment-item:hover .attachment-delete { opacity: 1; }

.upload-zone {
  aspect-ratio: 1;
  border: 1.5px dashed var(--border-2);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-4);
  font-size: 0.7rem;
  background: transparent;
  text-align: center;
  padding: 0.4rem;
}
.upload-zone:hover { border-color: var(--primary); color: var(--text-2); }
.upload-zone input { display: none; }

/* ===== Order Card ===== */
.order-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 1rem;
  cursor: pointer;
  transition: all var(--transition);
}
.order-card:hover { border-color: var(--border-2); }
.order-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.6rem; }
.order-client { font-weight: 600; font-size: 0.9rem; }
.order-company { font-size: 0.75rem; color: var(--text-3); margin-top: 0.15rem; }
.order-status {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  color: white;
  text-transform: lowercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.order-desc { font-size: 0.8rem; color: var(--text-3); margin-bottom: 0.6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.order-footer { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 0.6rem; border-top: 1px solid var(--border-1); }
.order-amount { font-weight: 600; font-size: 1rem; }
.order-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; font-size: 0.7rem; color: var(--text-3); }

/* Order items */
.order-item-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  margin-bottom: 0.35rem;
}

/* ===== Client Card ===== */
.client-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 1rem;
  cursor: pointer;
  transition: all var(--transition);
}
.client-card:hover { border-color: var(--border-2); }
.client-header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; }
.client-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
}
.client-name { font-weight: 600; font-size: 0.875rem; }
.client-company { font-size: 0.72rem; color: var(--text-3); margin-top: 0.1rem; }
.client-status {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  text-transform: lowercase;
  background: var(--bg-2);
  color: var(--text-3);
  flex-shrink: 0;
}
.client-status.active { background: rgba(22, 163, 74, 0.1); color: var(--accent-green); }
.client-stats {
  display: flex;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-1);
}
.client-stat { flex: 1; }
.client-stat-label { font-size: 0.7rem; color: var(--text-4); }
.client-stat-value { font-size: 0.9rem; font-weight: 600; margin-top: 0.1rem; }
.client-contact { margin-top: 0.6rem; font-size: 0.72rem; color: var(--text-3); display: flex; flex-direction: column; gap: 0.15rem; }

/* ===== Sidebar Item (company) ===== */
.company-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-md);
  color: var(--text-2);
  font-size: 1rem;
  transition: all var(--transition);
  width: 100%;
  text-align: left;
}
.company-link:hover { background: var(--bg-2); color: var(--text-1); }
.company-link .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* A LOGO DA EMPRESA no lugar da bolinha (14/09/2026): no menu ao lado, na etiqueta do lançamento e nas abas
   de Categorias. A bolinha vai junto, escondida, e volta se a imagem não carregar (.sem-logo). No menu, a
   bolinha ganha a mesma largura da logo, para os nomes das empresas ficarem alinhados com ou sem logo. */
.co-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.co-mark > span { display: none; }
.co-mark.sem-logo > .co-logo { display: none; }
.co-mark.sem-logo > span { display: block; }
.co-logo { display: block; width: 20px; height: 20px; border-radius: 6px; object-fit: cover; background: var(--bg-2); box-shadow: 0 0 0 1px var(--border-1); }
.company-link > .dot { margin: 0 6px; }
.company-link .co-mark { width: 20px; margin: -2px 0; }
.app.rail .company-link > .dot { margin: 0; }
.app.rail .company-link .co-logo { width: 26px; height: 26px; border-radius: 8px; }
.tx-scopechip .co-logo, .pagetab .co-logo { width: 16px; height: 16px; border-radius: 4px; }
.pagetab .co-mark { margin-right: 6px; }

/* ===== Week Grid ===== */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  min-height: 500px;
}

.week-day {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.week-day.today {
  border-color: var(--primary);
  background: var(--bg-1);
  box-shadow: 0 0 0 1px var(--primary);
}

.week-day-header {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border-1);
  text-align: center;
  background: var(--bg-2);
}

.week-day.today .week-day-header {
  background: var(--primary);
  color: var(--bg-1);
}

/* Cabeçalho do dia clicável: adicionar tarefa direto naquele dia */
.wdh-click { position: relative; cursor: pointer; transition: filter 0.12s; }
.wdh-click:hover { filter: brightness(1.18); }
.wdh-plus {
  position: absolute; top: 6px; right: 28px;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 6px;
  color: inherit; opacity: 0; transform: scale(0.7);
  transition: opacity 0.15s, transform 0.15s;
}
.wdh-click:hover .wdh-plus { opacity: 0.85; transform: scale(1); }
@media (hover: none) { .wdh-plus { opacity: 0.5; transform: scale(1); } }

/* Zona vazia do dia: hover revela ícones de tarefa/evento/transação (abrem os modais originais) */
.week-quick { flex: 1; min-height: 46px; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; }
.wq-btns {
  display: flex; gap: 6px; opacity: 0; transform: translateY(4px) scale(0.92);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.week-quick:hover .wq-btns { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
@media (hover: none) { .wq-btns { opacity: 0.6; transform: none; pointer-events: auto; } }
.wq-btn {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border-1);
  background: var(--bg-2); color: var(--text-3); display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: all 0.12s;
}
.wq-btn:hover { color: var(--text-1); border-color: var(--border-2); background: var(--bg-1); transform: translateY(-1px); }

.week-day-name {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.week-day-number {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.week-day-items {
  flex: 1;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
  /* CADA DIA ROLA POR DENTRO (14/09/2026, pedido dele: "uma barra de rolagem em cada
     modulo de dia para nao expandir a tela ao infinito"). Um domingo com quinze gastos
     esticava a semana inteira; agora so a lista daquele dia rola, e o cabecalho do dia
     e o rodape com o saldo ficam no lugar. */
  overflow-y: auto;
  /* SEM overscroll-behavior: contain. Ele prendia a rodinha na caixa do dia MESMO sem nada
     para rolar: com o mouse parado sobre um dia vazio a pagina nao descia ("preciso tirar o
     mouse de cima da caixa e fazer o scroll"), e no fim de uma lista cheia tambem nao. Sem
     ele a lista rola enquanto tem para onde ir, e depois a rodinha segue para a pagina.
     Medido num Chrome de verdade: tests/e2e_agenda_navegador.py */
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.week-day-items::-webkit-scrollbar { width: 6px; }
.week-day-items::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.week-day-items::-webkit-scrollbar-track { background: transparent; }
/* Numa lista que rola, item com overflow escondido pode ENCOLHER (o minimo dele vira 0) em
   vez de empurrar a rolagem: as linhas do dia saiam espremidas. Nenhum filho encolhe. */
.week-day-items > * { flex-shrink: 0; }
/* A semana tem altura propria: a janela menos o que vem acima dela (topo, titulo e a
   barra da semana), nunca menos que 460px. A linha do grid e minmax(0, 1fr) para a
   coluna caber nessa altura em vez de crescer com o conteudo. */
.week-grid {
  height: max(460px, calc(100vh - 316px));
  height: max(460px, calc(100dvh - 316px));
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.week-day { min-height: 0; }

.week-empty {
  flex: 1;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  opacity: 0.4;
  min-height: 40px;
}

.week-item {
  background: var(--bg-2);
  border-left: 2px solid var(--text-4);
  padding: 0.3rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: all var(--transition);
  overflow: hidden;
}

.week-item:hover { background: var(--bg-3); }

.week-item.event { border-left-color: var(--accent-blue); }
.week-item.task { border-left-color: var(--accent-amber); cursor: grab; }
.week-item.task:active { cursor: grabbing; }
/* Prévia de repetição ("fantasminha"): esmaecida e tracejada, só pra VER a rotina */
.week-item.task.projected {
  cursor: pointer; opacity: 0.6; background: transparent;
  border-left-style: dashed; border-top: 1px dashed var(--border-1);
  border-right: 1px dashed var(--border-1); border-bottom: 1px dashed var(--border-1);
}
.week-item.task.projected:hover { opacity: 0.95; background: var(--bg-2); }
.week-item.task.projected .week-text { color: var(--text-3); }
.week-recur-ic { display: inline-flex; align-items: center; color: var(--text-4); flex-shrink: 0; margin-right: 1px; }

/* Repetir: pular fim de semana + aviso de escopo vazio nas etiquetas */
.rep-we { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.8rem; color: var(--text-2); cursor: pointer; }
.rep-we input { width: 15px; height: 15px; accent-color: var(--primary); }
.tag-empty { font-size: 0.75rem; color: var(--text-4); align-self: center; }

/* Prévia da tarefa no hover (subtarefas, checkpoints, notas, anexos...) */
.task-preview {
  position: fixed; z-index: 400; width: 246px; max-width: calc(100vw - 16px);
  background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45); padding: 11px 13px; pointer-events: none;
  opacity: 0; transform: translateY(4px) scale(0.98); transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.22,1,0.36,1);
}
.task-preview.show { opacity: 1; transform: translateY(0) scale(1); }
.tp-head { display: flex; align-items: center; gap: 7px; }
.tp-title { font-size: 0.85rem; font-weight: 700; color: var(--text-1); line-height: 1.25; }
.tp-desc { font-size: 0.75rem; color: var(--text-3); margin-top: 5px; line-height: 1.4; }
.tp-metarow { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 0.72rem; color: var(--text-3); }
.tp-metarow span { display: inline-flex; align-items: center; gap: 4px; }
.tp-metarow svg { width: 12px; height: 12px; }
.tp-dot { width: 8px; height: 8px; border-radius: 2px; }
.tp-rows { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.tp-row { display: flex; align-items: center; gap: 7px; font-size: 0.76rem; color: var(--text-2); }
.tp-ic { color: var(--text-4); display: flex; }
.tp-ic svg { width: 14px; height: 14px; }
.tp-val { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-1); }
.tp-bar { width: 46px; height: 4px; border-radius: 2px; background: var(--bg-3); overflow: hidden; flex-shrink: 0; }
.tp-bar div { height: 100%; background: var(--accent-green); border-radius: 2px; }
.tp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.tp-tag { font-size: 0.66rem; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border-1); }
.week-check { flex-shrink: 0; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--text-4); background: none; color: var(--bg-1); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: all 0.12s; }
.week-check:hover { border-color: var(--accent-green); }
.week-check svg { width: 10px; height: 10px; }
.week-check.checked { background: var(--accent-green); border-color: var(--accent-green); }
.week-item.task.done { border-left-color: var(--accent-green); opacity: 0.7; }
.week-item.task.done .week-text { text-decoration: line-through; color: var(--text-3); }
.week-item.task.done .week-dot { opacity: 0.4; }

/* Tarefa atrasada (pendente com o dia já passado) */
.week-item.task.late {
  border-left-color: var(--accent-red);
  background: color-mix(in srgb, var(--accent-red) 9%, var(--bg-2));
}
.week-item.task.late .week-text { color: var(--accent-red); font-weight: 600; }
.week-late {
  flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-red); color: #fff; font-size: 0.66rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  animation: latePulse 1.6s ease-in-out infinite;
}
@keyframes latePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}
.wdh-late {
  position: absolute; top: 6px; right: 7px; left: auto;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent-red); color: #fff; font-size: 0.66rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  animation: latePulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .week-late, .wdh-late { animation: none; } }
.week-congrats { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; color: var(--accent-green); background: color-mix(in srgb, var(--accent-green) 12%, transparent); border-radius: 6px; padding: 5px 7px; margin-top: 2px; animation: pop 0.35s ease both; }
.week-congrats .wc-emoji { font-size: 0.9rem; }

/* Arrastar tarefa entre dias */
.drag-source { opacity: 0.35; }
.drag-ghost {
  position: fixed; z-index: 9999; pointer-events: none; margin: 0;
  box-shadow: 0 10px 26px rgba(0,0,0,0.4); transform: scale(1.03) rotate(-1.5deg);
  opacity: 0.97;
}
.week-day-drop {
  outline: 2px dashed var(--primary); outline-offset: -2px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
body.week-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.week-dragging .week-item.task { touch-action: none; }
.week-moved {
  display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0;
  color: var(--primary); font-size: 0.6rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.week-item.order { border-left-color: var(--primary); }
.week-item.delivery { border-left-color: var(--accent-green); background: rgba(22, 163, 74, 0.05); }
.week-item.income { border-left-color: var(--accent-green); }
.week-item.expense { border-left-color: var(--accent-red); }

.week-time {
  font-size: 0.65rem;
  color: var(--text-4);
  font-weight: 500;
  flex-shrink: 0;
}

.week-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.week-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-4);
  flex-shrink: 0;
}
.week-dot.high { background: var(--accent-red); }
.week-dot.medium { background: var(--accent-amber); }
.week-dot.low { background: var(--text-4); }

@media (max-width: 900px) {
  .week-grid { grid-template-columns: repeat(7, minmax(120px, 1fr)); overflow-x: auto; }
  .week-day { min-width: 120px; }
}

/* ===== Mobile ===== */
.mobile-toggle { display: none; }
.theme-toggle { font-size: 14px; }

@media (max-width: 900px) {
  :root { --sidebar-w: 200px; }
  .detail-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "header" "main"; }
  .sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 260px;
    height: 100dvh;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    transition: left var(--transition-slow);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { left: 0; }
  .mobile-toggle { display: flex; }
  .main { padding: 1.25rem 1rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .header { padding: 0 1rem; }
  .header-actions { flex: 1; min-width: 0; }   /* sem a caixa de busca, a barra do Nexo ocupa o meio do topo */
  .page-title { font-size: 1.25rem; }
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 40;
  display: none;
}
.sidebar-overlay.active { display: block; }

/* Hide emoji-heavy UI in favor of text */
.icon-text { display: inline-block; }
.icon-emoji { display: none; }

.no-emoji .icon-emoji { display: inline-block; }
.no-emoji .icon-text { display: none; }

/* ===== Áreas seguras (notch / Dynamic Island do iPhone) =====
   O PWA desenha sob a barra de status; estes paddings empurram o conteúdo
   para fora do recorte da câmera. Em telas sem notch, env() vale 0. */
.app {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.header { padding-top: env(safe-area-inset-top, 0px); }
.sidebar { padding-top: calc(1.25rem + env(safe-area-inset-top, 0px)); }
.auth-screen {
  padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.toast-container { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 768px) {
  .bottomnav {
    padding-left: calc(4px + env(safe-area-inset-left, 0px));
    padding-right: calc(4px + env(safe-area-inset-right, 0px));
  }
  .main { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* App instalado (tela cheia): folga mínima garantida sob a barra de status,
   mesmo se o aparelho reportar inset menor que o recorte real */
@media (display-mode: standalone) {
  .header {
    padding-top: max(env(safe-area-inset-top, 0px), 14px);
    padding-bottom: 4px;
  }
  .sidebar { padding-top: calc(1.25rem + max(env(safe-area-inset-top, 0px), 14px)); }
}

/* ===== Dashboard comparativo de empresas ===== */
.page-title-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.page-title-row .page-subtitle { width: 100%; margin-top: 2px; }
.dash-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.34rem 0.7rem; font-size: 0.82rem; font-weight: 600;
  color: var(--text-2); background: var(--bg-2);
  border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  cursor: pointer; transition: all 0.15s;
}
.dash-toggle:hover { border-color: var(--border-2); color: var(--text-1); }
.dash-toggle.active { background: var(--primary); color: var(--bg-1); border-color: var(--primary); }
.dash-toggle svg { flex-shrink: 0; }

.comp-dash {
  background: var(--bg-1); border: 1px solid var(--border-1);
  border-radius: var(--radius-xl); padding: 1.25rem; margin-bottom: 1.25rem;
  animation: rise 0.28s ease both;
}
.cd-loading, .cd-empty, .cd-hint { color: var(--text-3); font-size: 0.88rem; }
.cd-hint { background: var(--bg-2); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; margin: 0.25rem 0 1rem; }

.cd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
.cd-kpi { background: var(--bg-2); border-radius: var(--radius-lg); padding: 0.8rem 0.9rem; }
.cd-kpi-label { font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.cd-kpi-value { font-size: 1.3rem; font-weight: 700; margin-top: 0.2rem; }
.cd-kpi-value.pos { color: var(--accent-green); }
.cd-kpi-value.neg { color: var(--accent-red); }
.cd-kpi-sub { font-size: 0.72rem; color: var(--text-4); margin-top: 0.1rem; }

.cd-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
.cd-hl { border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 0.7rem 0.85rem; }
.cd-hl-label { font-size: 0.72rem; color: var(--text-3); }
.cd-hl-comp { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; margin: 0.3rem 0 0.15rem; }
.cd-hl-val { font-size: 1.05rem; font-weight: 700; }
.cd-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

.cd-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-bottom: 1.25rem; }
.cd-chart-title { font-size: 0.82rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.75rem; }

.cd-donut-card { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-xl); padding: 1rem 1.1rem; }
.cd-donut-body { display: flex; align-items: center; gap: 1rem; }
.cd-donut-wrap { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.cd-donut { width: 100%; height: 100%; transform: rotate(0deg); animation: cdSpinIn 0.6s ease both; }
@keyframes cdSpinIn { from { opacity: 0; transform: rotate(-25deg) scale(0.9); } to { opacity: 1; transform: rotate(0) scale(1); } }
.cd-seg { transition: opacity 0.18s, stroke-width 0.18s; cursor: default; }
.cd-donut-wrap:hover .cd-seg { opacity: 0.32; }
.cd-donut-wrap:hover .cd-seg:hover { opacity: 1; }
.cd-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.cd-center-val { font-size: 0.98rem; font-weight: 700; color: var(--text-1); line-height: 1.1; text-align: center; max-width: 82px; }
.cd-center-val.pos { color: var(--accent-green); }
.cd-center-val.neg { color: var(--accent-red); }
.cd-center-lbl { font-size: 0.62rem; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.cd-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cd-leg { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.cd-leg-name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-leg-val { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-leg-val.neg { color: var(--accent-red); }
.cd-leg-pct { min-width: 34px; text-align: right; font-size: 0.72rem; color: var(--text-4); font-variant-numeric: tabular-nums; }

.cd-table-wrap { overflow-x: auto; }
.cd-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; white-space: nowrap; }
.cd-table th { text-align: right; font-weight: 600; color: var(--text-3); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-1); }
.cd-table th:first-child, .cd-table .cd-td-name { text-align: left; }
.cd-table td { text-align: right; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border-1); font-variant-numeric: tabular-nums; }
.cd-table tr:last-child td { border-bottom: none; }
.cd-td-name { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.cd-table td.pos { color: var(--accent-green); }
.cd-table td.neg { color: var(--accent-red); }

@media (max-width: 768px) {
  .cd-kpis, .cd-highlights { grid-template-columns: repeat(2, 1fr); }
  .cd-charts { grid-template-columns: 1fr; }
}

/* ===== Nexo Drive ===== */
.dv-meter { height: 6px; background: var(--bg-2); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.dv-meter-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent-blue)); border-radius: 4px; transition: width 0.4s; min-width: 2px; }
.dv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
.dv-crumbs { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 600; flex-wrap: wrap; }
.dv-arrow { width: 30px; height: 30px; border: 1px solid var(--border-1); background: var(--bg-2); color: var(--text-2); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.12s; flex-shrink: 0; }
.dv-arrow:hover:not(:disabled) { color: var(--text-1); border-color: var(--border-2); }
.dv-arrow:disabled { opacity: 0.35; cursor: default; }
.lbl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; margin-right: 3px; }
.dv-labels { display: flex; gap: 3px; margin-top: 5px; flex-wrap: wrap; }
.dv-labels .lbl-dot { margin: 0; width: 8px; height: 8px; }
.dv-name .dv-rename-input { width: 100%; font-size: 0.82rem; font-weight: 600; font-family: inherit; background: var(--bg-2); border: 1px solid var(--primary); border-radius: 5px; color: var(--text-1); padding: 1px 5px; }
.dv-name[onclick] { cursor: text; }
.dv-fgear { display: inline-flex; align-items: center; }
/* Gerenciar filtros */
.fm-sec-title { font-size: 0.75rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.fm-list { display: flex; flex-direction: column; }
.fm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--border-1); }
.fm-row:last-child { border-bottom: none; }
.fm-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-2); cursor: pointer; }
.fm-check input { width: 15px; height: 15px; accent-color: var(--primary); }
.fm-lbl { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.fm-lbl input[type=color] { width: 26px; height: 26px; border: none; background: none; padding: 0; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.fm-lblname { flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text-1); font-size: 0.85rem; padding: 4px 6px; font-family: inherit; }
.fm-lblname:hover, .fm-lblname:focus { border-color: var(--border-2); background: var(--bg-2); outline: none; }
.fm-ord { display: flex; gap: 3px; flex-shrink: 0; }
.fm-ord-btn { width: 26px; height: 26px; border: 1px solid var(--border-1); background: var(--bg-2); color: var(--text-3); border-radius: 6px; cursor: pointer; font-size: 0.8rem; }
.fm-ord-btn:hover:not(:disabled) { color: var(--text-1); }
.fm-ord-btn:disabled { opacity: 0.3; cursor: default; }
.fm-ord-btn.del:hover { color: var(--accent-red); }
.fm-add { display: flex; gap: 8px; margin-top: 0.9rem; align-items: center; }
.fm-add .form-input { flex: 1; }
.fm-add input[type=color] { width: 38px; height: 36px; border: 1px solid var(--border-1); background: none; padding: 0; border-radius: 8px; cursor: pointer; }
.dv-crumb { color: var(--text-3); cursor: default; }
.dv-crumb.cur { color: var(--text-1); }
.dv-crumb:not(.cur) { cursor: pointer; }
.dv-crumb:not(.cur):hover { color: var(--text-1); }
.dv-sep { color: var(--text-4); }
.dv-tools { display: flex; align-items: center; gap: 8px; }
.dv-search { width: 160px; height: 36px; }
.dv-vtog { display: flex; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); overflow: hidden; }
.dv-vtog button { background: none; border: none; color: var(--text-4); padding: 7px 9px; cursor: pointer; display: flex; }
.dv-vtog button.on { background: var(--bg-1); color: var(--text-1); }

.dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dv-item { position: relative; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: border-color 0.12s; }
.dv-item:hover { border-color: var(--border-2); }
.dv-thumbwrap { position: relative; height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dv-thumbwrap svg { width: 32px; height: 32px; }
.dv-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-ext { font-size: 0.92rem; font-weight: 800; letter-spacing: 0.03em; }
.dv-body { padding: 9px 11px 11px; }
.dv-name { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-sub { font-size: 0.7rem; color: var(--text-4); margin-top: 2px; }
.dv-badge { position: absolute; top: 6px; left: 6px; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: rgba(10,10,12,0.55); color: #fff; z-index: 2; }
.dv-badge.star { color: #f59e0b; font-size: 0.75rem; padding: 1px 5px; }
.dv-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 1px; opacity: 0; background: rgba(10,10,12,0.55); border-radius: 8px; padding: 2px; transition: opacity 0.12s; z-index: 3; }
.dv-item:hover .dv-acts { opacity: 1; }
.dv-acts button { background: none; border: none; border-radius: 6px; color: #fff; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dv-acts button:hover { background: rgba(255,255,255,0.18); }
.dv-acts svg { width: 13px; height: 13px; }
@media (hover: none) { .dv-acts { opacity: 1; } }
.dv-empty { color: var(--text-4); text-align: center; padding: 2.5rem 1rem; font-size: 0.88rem; }
.dv-nav { display: flex; gap: 4px; margin-bottom: 1rem; flex-wrap: wrap; }
.dv-navbtn { padding: 6px 12px; font-size: 0.82rem; font-weight: 500; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 20px; cursor: pointer; transition: all 0.12s; }
.dv-navbtn:hover { color: var(--text-1); }
.dv-navbtn.on { background: var(--primary); color: var(--bg-1); border-color: var(--primary); }
.dv-drop { outline: 2px dashed var(--primary); outline-offset: -2px; background: color-mix(in srgb, var(--primary) 12%, transparent) !important; }

/* Visualizador de prévia */
.dvp-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,0.88); display: flex; flex-direction: column; animation: alarmIn 0.2s ease both; padding-top: env(safe-area-inset-top, 0px); }
.dvp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; color: #fff; }
.dvp-name { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvp-actions { display: flex; gap: 8px; flex-shrink: 0; }
.dvp-btn { background: rgba(255,255,255,0.12); color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.dvp-btn:hover { background: rgba(255,255,255,0.2); }
.dvp-body { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 16px; min-height: 0; }
.dvp-media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.dvp-frame { width: 100%; height: 100%; border: none; background: #fff; border-radius: 6px; }
.dvp-audio { width: 100%; max-width: 480px; }
.dvp-audio audio { width: 100%; }

.dv-shared { position: absolute; top: 11px; right: 11px; font-size: 0.6rem; font-weight: 700; color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); padding: 2px 6px; border-radius: 5px; }
.dv-list .dv-shared { position: static; }

.sh-linkrow { display: flex; gap: 8px; margin-bottom: 10px; }
.sh-linkrow .form-input { flex: 1; min-width: 0; }
.sh-note { font-size: 0.75rem; color: var(--text-4); margin-bottom: 4px; }
.sh-opt { padding: 0.7rem 0; border-top: 1px solid var(--border-1); }
.sh-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-2); cursor: pointer; }
.sh-check input { width: 16px; height: 16px; accent-color: var(--primary); }

.dv-list { display: block; border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.dv-list .dv-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border: none; border-bottom: 1px solid var(--border-1); border-radius: 0; overflow: visible; }
.dv-list .dv-item:last-child { border-bottom: none; }
.dv-list .dv-thumbwrap { width: 38px; height: 38px; border-radius: 8px; }
.dv-list .dv-thumbwrap svg { width: 20px; height: 20px; }
.dv-list .dv-body { padding: 0; min-width: 0; }
.dv-list .dv-sub { margin: 0; }
.dv-list .dv-badge { display: none; }
.dv-list .dv-acts { position: static; opacity: 1; background: none; padding: 0; gap: 2px; }
.dv-list .dv-acts button { color: var(--text-4); }
.dv-list .dv-acts button:hover { color: var(--text-1); background: var(--bg-2); }
@media (max-width: 640px) { .dv-search { width: 110px; } .dv-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }

/* ===== Kanban de produção ===== */
.kanban-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0.9rem; flex-wrap: wrap; }
.kanban-hint { font-size: 0.78rem; color: var(--text-4); }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { background: var(--bg-0); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 10px; min-height: 140px; transition: background 0.12s, outline 0.12s; }
.kanban-col-drop { outline: 2px dashed var(--primary); outline-offset: -2px; background: color-mix(in srgb, var(--primary) 9%, transparent); }
.kanban-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; font-weight: 700; color: var(--text-2); margin-bottom: 10px; padding: 0 2px; }
.kanban-cnt { color: var(--text-4); font-weight: 600; }
.kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kanban-empty { flex: 1; min-height: 50px; }
.kanban-card { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 9px; padding: 10px; cursor: grab; transition: border-color 0.12s; }
.kanban-card:hover { border-color: var(--border-2); }
.kanban-card:active { cursor: grabbing; }
.kc-client { font-size: 0.85rem; font-weight: 600; }
.kc-desc { font-size: 0.75rem; color: var(--text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.kc-val { font-size: 0.85rem; font-weight: 700; color: var(--accent-green); }
.kc-items { font-size: 0.7rem; color: var(--text-4); }
body.week-dragging .kanban-card { touch-action: none; }

/* ===== Pedido: itens (linhas) ===== */
.order-item-add { display: flex; gap: 6px; align-items: center; }
.order-items-empty { font-size: 0.78rem; color: var(--text-4); padding: 0.3rem 0; }
.order-item-row {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border-1); font-size: 0.85rem;
}
.order-item-row:last-child { border-bottom: none; }
.oi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-qty { color: var(--text-3); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oi-sub { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Painel da empresa: abas + catálogo de produtos ===== */
.cd-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-1); margin-bottom: 1.1rem; overflow-x: auto; }
.cd-tab {
  padding: 0.7rem 0.95rem; font-size: 0.88rem; font-weight: 500; color: var(--text-3);
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color 0.15s;
}
.cd-tab:hover { color: var(--text-1); }
.cd-tab.active { color: var(--text-1); border-bottom-color: var(--primary); }

.prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.prod-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px;
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.prod-card:hover { border-color: var(--border-2); }
.prod-thumb { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.prod-thumb.has-img { background-size: cover; background-position: center; }

.prod-photo-zone { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.prod-photo-preview {
  width: 68px; height: 68px; border-radius: 12px; flex: 0 0 auto;
  background: var(--bg-2); border: 1px dashed var(--border-2);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.prod-photo-plus { font-size: 0.72rem; color: var(--text-4); font-weight: 600; }
.prod-photo-actions { display: flex; flex-direction: column; gap: 6px; }
.prod-photo-hint { font-size: 0.72rem; color: var(--text-4); }
.prod-photo-zone.uploading .prod-photo-preview { opacity: 0.5; }
/* Galeria de fotos do produto (editor rico) */
.prod-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.prod-gallery.uploading { opacity: 0.6; }
.pg-tile { position: relative; width: 76px; height: 76px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--border-1); overflow: hidden; }
.pg-rm { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; cursor: pointer; line-height: 1; }
.pg-mk { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fbbf24; font-size: 12px; cursor: pointer; line-height: 1; }
.pg-cover { position: absolute; bottom: 0; left: 0; right: 0; background: var(--primary, #f59e0b); color: #fff; font-size: 0.6rem; font-weight: 700; text-align: center; padding: 2px 0; letter-spacing: .04em; }
.pg-add { width: 76px; height: 76px; border-radius: 10px; border: 1.5px dashed var(--border-2); background: var(--bg-2); color: var(--text-3); font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.prod-attrs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.pa-row { display: flex; gap: 7px; align-items: center; }
.pa-k { flex: 0 0 40%; }
.pa-v { flex: 1; }
.pa-rm { flex: 0 0 30px; height: 30px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--bg-2); color: var(--accent-red, #ef4444); cursor: pointer; font-size: 13px; }
/* variações do produto: opções + grade */
.vr-opts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.vr-row { display: flex; gap: 7px; align-items: center; }
.vr-k { flex: 0 0 34%; }
.vr-v { flex: 1; }
.vr-grid { border: 1px solid var(--border-1); border-radius: 10px; overflow: hidden; margin-top: 10px; }
.vr-h, .vr-r { display: grid; grid-template-columns: 1.4fr .9fr .8fr 1fr; }
.vr-h { background: var(--bg-2); font-size: 0.64rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.vr-h div, .vr-r div { padding: 7px 8px; border-bottom: 1px solid var(--border-1); min-width: 0; }
.vr-r:last-child div { border-bottom: 0; }
.vr-lbl { font-size: 0.78rem; font-weight: 600; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-r input { width: 100%; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 6px; padding: 5px 7px; color: var(--text-1); font-size: 0.78rem; font-family: inherit; outline: 0; }
.vr-r input:focus { border-color: var(--primary, #f59e0b); }
.vr-hint { font-size: 0.72rem; color: var(--text-4); margin-top: 6px; }
.notif-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.notif-steps li { font-size: 0.9rem; line-height: 1.5; color: var(--text-2); }
.notif-steps li b { color: var(--text-1); font-weight: 600; }
.prod-info { flex: 1; min-width: 0; }
.prod-name { font-size: 0.92rem; font-weight: 600; }
.prod-meta { font-size: 0.75rem; color: var(--text-3); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prod-badge { font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; letter-spacing: 0.02em; }
.prod-price { margin-top: 7px; font-size: 0.92rem; font-weight: 700; }
.prod-price small { font-weight: 500; color: var(--text-4); font-size: 0.72rem; }
.prod-del { flex: 0 0 auto; color: var(--text-4); }
.prod-del:hover { color: var(--accent-red); }
@media (max-width: 640px) { .prod-grid { grid-template-columns: 1fr; } }

/* Histórico de mudança de datas (detalhe da tarefa) */
.date-hist { display: flex; flex-direction: column; gap: 0.5rem; }
.date-hist-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; padding-left: 0.6rem; border-left: 2px solid var(--border-2); }
.date-hist-move { color: var(--text-2); font-weight: 500; }
.date-hist-arrow { color: var(--primary); font-weight: 700; margin: 0 2px; }
.date-hist-when { color: var(--text-4); font-size: 0.72rem; white-space: nowrap; }

/* ===== Alarme de tarefa (tela cheia, arraste para desligar) ===== */
.alarm-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(circle at 50% 30%, rgba(37,99,235,0.28), rgba(0,0,0,0.82) 70%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: alarmIn 0.3s ease both;
  padding-top: max(20px, env(safe-area-inset-top, 0px));
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}
@keyframes alarmIn { from { opacity: 0; } to { opacity: 1; } }
.alarm-card {
  width: 100%; max-width: 400px; text-align: center;
  background: var(--bg-1); border: 1px solid var(--border-2);
  border-radius: 24px; padding: 2rem 1.5rem 1.5rem;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  animation: alarmPop 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes alarmPop { from { transform: scale(0.9) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.alarm-bell {
  width: 88px; height: 88px; margin: 0 auto 1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent-amber) 18%, transparent);
  color: var(--accent-amber);
  animation: alarmRing 1s ease-in-out infinite;
}
@keyframes alarmRing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); } 40% { transform: rotate(11deg); }
  60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); }
}
.alarm-now { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-1); line-height: 1; }
.alarm-title { font-size: 1.25rem; font-weight: 700; color: var(--text-1); margin-top: 0.85rem; word-break: break-word; }
.alarm-msg { font-size: 0.92rem; color: var(--accent-amber); font-weight: 600; margin-top: 0.35rem; }
.alarm-company { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-3); margin-top: 0.5rem; }
.alarm-company .dot { width: 9px; height: 9px; border-radius: 50%; }

.alarm-slide {
  position: relative; height: 60px; margin-top: 1.75rem;
  background: var(--bg-3); border-radius: 30px; overflow: hidden;
  display: flex; align-items: center; user-select: none; touch-action: none;
}
.alarm-slide-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 56px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-green) 55%, transparent), color-mix(in srgb, var(--accent-green) 30%, transparent));
  border-radius: 30px;
}
.alarm-slide-label {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 0.82rem; color: var(--text-3); font-weight: 600;
  pointer-events: none; animation: alarmHint 1.6s ease-in-out infinite;
  padding-left: 44px;
}
@keyframes alarmHint { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.alarm-thumb {
  position: absolute; left: 4px; top: 4px; width: 52px; height: 52px;
  border-radius: 50%; background: var(--accent-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; box-shadow: 0 3px 10px rgba(0,0,0,0.3); z-index: 2;
}
.alarm-thumb:active { cursor: grabbing; }
.alarm-snooze {
  margin-top: 1rem; background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 0.85rem; font-weight: 600; padding: 0.4rem 1rem;
}
.alarm-snooze:hover { color: var(--text-1); }

/* ===== Agenda: legenda em ícone (janelinha no hover) ===== */
.legend-wrap { position: relative; display: flex; }
.legend-btn { color: var(--text-4); }
.legend-wrap:hover .legend-btn, .legend-wrap.open .legend-btn { color: var(--text-1); }
.legend-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  min-width: 190px; background: var(--bg-1); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); padding: 4px 0 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(-6px) scale(0.96); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.legend-wrap:hover .legend-pop, .legend-wrap.open .legend-pop {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.legend-pop-title { font-size: 0.7rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 14px 6px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-2); padding: 4px 14px; }

/* ===== Tema do app: seletor em ícones-pílula (nome animado) ===== */
.sp-title { font-size: 0.72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 14px 8px; }
.theme-pills-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 4px 12px 12px; overflow: hidden; }
.tpill {
  display: inline-flex; align-items: center; gap: 0; height: 42px; padding: 5px; border-radius: 22px;
  border: 1px solid var(--border-1); background: var(--bg-2); color: var(--text-3);
  cursor: pointer; overflow: hidden; transition: all 0.26s cubic-bezier(0.22, 1, 0.36, 1); flex: 0 0 auto;
}
.tpill-ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tpill-ic svg { width: 15px; height: 15px; }
.tpill-nm { max-width: 0; opacity: 0; font-size: 0.82rem; font-weight: 600; white-space: nowrap; transition: max-width 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s, padding 0.26s; }
.tpill:hover .tpill-nm { max-width: 110px; opacity: 1; padding: 0 10px 0 7px; }
.tpill:hover { color: var(--text-1); border-color: var(--border-2); }
.tpill.active { color: #fff; border-color: transparent; }
.tpill.active:hover { color: #fff; }
#stylePanel { overflow: hidden; width: 320px; }
.tpill-classico .tpill-ic { background: rgba(124,120,232,0.2); color: #a5a1f0; }
.tpill-vidro .tpill-ic { background: rgba(167,139,250,0.22); color: #c4b5fd; }
.tpill-min .tpill-ic { background: rgba(240,185,11,0.2); color: #f0b90b; }
.tpill-vivid .tpill-ic { background: rgba(251,113,133,0.22); color: #fb7185; }
.tpill-classico.active { background: #4f46b8; }
.tpill-vidro.active { background: #7c3aed; }
.tpill-min.active { background: #a16207; }
.tpill-vivid.active { background: linear-gradient(135deg, #f43f5e, #8b5cf6); }
.tpill.active .tpill-ic { background: rgba(255,255,255,0.22); color: #fff; }

/* ===== Temas do app inteiro: acento + cantos por variante ===== */
:root[data-app-theme="vidro"] { --primary: #a78bfa; --primary-light: #c4b5fd; --border-focus: #a78bfa; --radius-sm: 6px; --radius-md: 9px; --radius-lg: 12px; --radius-xl: 16px; }
:root[data-app-theme="min"]   { --primary: #f0b90b; --primary-light: #fbbf24; --border-focus: #f0b90b; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; }
:root[data-app-theme="vivid"] { --primary: #fb7185; --primary-light: #f9a8b4; --border-focus: #fb7185; --radius-sm: 5px; --radius-md: 7px; --radius-lg: 10px; --radius-xl: 14px; }
[data-theme="dark"][data-app-theme="vidro"] { --bg-2: #201d2e; }
[data-theme="dark"][data-app-theme="min"] { --bg-2: #161616; --border-1: #1c1c1c; }
/* Texto legível em cima do acento colorido (nossos acentos são claros → texto escuro) */
:root:is([data-app-theme="vidro"],[data-app-theme="min"],[data-app-theme="vivid"]) :is(.sidebar-item.active, .chip.active, .filter-chip.active, .pagetab.active, .dash-toggle.active, .dv-navbtn.on, .calendar-day.today, .hab-head.today, .habit-action:hover, .task-checkbox.checked, .btn:not(.btn-secondary):not(.btn-ghost):not(.btn-danger)) { color: #18181b; }
:root[data-app-theme="vivid"] .btn:not(.btn-secondary):not(.btn-ghost):not(.btn-danger) { background: linear-gradient(135deg, #fb7185, #c4b5fd); }

/* ---- Estilo 2: Vidro (glass) ---- */
[data-app-theme="vidro"] .week-grid {
  background: linear-gradient(135deg, #17162b 0%, #101018 55%, #1a1424 100%);
  padding: 12px; border-radius: 16px;
}
[data-app-theme="vidro"] .week-grid .week-day {
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
[data-app-theme="vidro"] .week-grid .week-day.today { border-color: rgba(124,120,232,0.8); box-shadow: 0 0 24px rgba(124,120,232,0.25); }
[data-app-theme="vidro"] .week-grid .week-day-header { background: transparent; border-bottom: none; padding-top: 0.65rem; }
[data-app-theme="vidro"] .week-grid .week-day.today .week-day-header { background: transparent; color: inherit; }
[data-app-theme="vidro"] .week-grid .week-day.today .week-day-number { color: #7c78e8; }
[data-app-theme="vidro"] .week-grid .week-day.today .week-day-header::after { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: #7c78e8; margin: 5px auto 0; }
[data-app-theme="vidro"] .week-grid .week-item { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.07); border-left-width: 1px; border-radius: 9px; }
[data-app-theme="vidro"] .week-grid .week-item.task.done { border-color: rgba(255,255,255,0.05); }
[data-app-theme="vidro"] .week-grid .week-item.task.late { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.4); }
[data-app-theme="vidro"] .week-grid .week-item.task.late .week-text { color: #fca5a5; }
[data-app-theme="vidro"] .week-grid .week-congrats { color: #6ee7b7; background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.25); border-radius: 9px; }
[data-app-theme="vidro"] .week-grid .wq-btn { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); }

/* ---- Estilo 3: Minimalista ---- */
[data-app-theme="min"] .week-grid { gap: 0; background: transparent; }
[data-app-theme="min"] .week-grid .week-day { background: transparent; border: none; border-radius: 0; border-left: 1px solid var(--border-1); padding: 0 10px; overflow: visible; }
[data-app-theme="min"] .week-grid .week-day:first-child { border-left: none; }
[data-app-theme="min"] .week-grid .week-day.today { box-shadow: none; }
[data-app-theme="min"] .week-grid .week-day-header { background: transparent; display: flex; align-items: baseline; justify-content: flex-start; gap: 7px; text-align: left; padding: 6px 0 10px; border-bottom: 1px solid var(--border-1); margin-bottom: 8px; }
[data-app-theme="min"] .week-grid .week-day.today .week-day-header { background: transparent; color: inherit; border-bottom: 2px solid var(--accent-amber); }
[data-app-theme="min"] .week-grid .week-day-name { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--text-4); opacity: 1; }
[data-app-theme="min"] .week-grid .week-day-number { font-size: 1.5rem; font-weight: 300; margin-top: 0; }
[data-app-theme="min"] .week-grid .week-day.today .week-day-number { font-weight: 700; color: var(--accent-amber); }
[data-app-theme="min"] .week-grid .wdh-plus { top: 4px; right: 0; }
[data-app-theme="min"] .week-grid .wdh-late { position: static; margin-left: auto; }
[data-app-theme="min"] .week-grid .week-day-items { padding: 0; gap: 0.45rem; }
[data-app-theme="min"] .week-grid .week-item { background: transparent; border: none; border-radius: 0; padding: 2px 0; font-size: 0.78rem; }
[data-app-theme="min"] .week-grid .week-item:hover { background: transparent; opacity: 0.85; }
[data-app-theme="min"] .week-grid .week-item.task.late { background: transparent; }
[data-app-theme="min"] .week-grid .week-item.task.late .week-text { color: #f87171; }
[data-app-theme="min"] .week-grid .week-congrats { background: transparent; padding: 2px 0; }
[data-app-theme="min"] .week-grid .wq-btn { background: transparent; }

/* ---- Estilo 4: Vibrante ---- */
[data-app-theme="vivid"] .week-grid .week-day { border-radius: 14px; transition: transform 0.15s, box-shadow 0.15s; }
[data-app-theme="vivid"] .week-grid .week-day-header { color: #fff; border-bottom: none; }
[data-app-theme="vivid"] .week-grid .week-day:nth-child(1) .week-day-header { background: linear-gradient(135deg, #f43f5e, #fb7185); }
[data-app-theme="vivid"] .week-grid .week-day:nth-child(2) .week-day-header { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
[data-app-theme="vivid"] .week-grid .week-day:nth-child(3) .week-day-header { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
[data-app-theme="vivid"] .week-grid .week-day:nth-child(4) .week-day-header { background: linear-gradient(135deg, #10b981, #34d399); }
[data-app-theme="vivid"] .week-grid .week-day:nth-child(5) .week-day-header { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
[data-app-theme="vivid"] .week-grid .week-day:nth-child(6) .week-day-header { background: linear-gradient(135deg, #ec4899, #f472b6); }
[data-app-theme="vivid"] .week-grid .week-day:nth-child(7) .week-day-header { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
[data-app-theme="vivid"] .week-grid .week-day.today { box-shadow: inset 0 0 0 2px #fff, 0 8px 24px rgba(0,0,0,0.4); transform: translateY(-3px); border-color: transparent; }
[data-app-theme="vivid"] .week-grid .week-day.today .week-day-header { color: #fff; }
[data-app-theme="vivid"] .week-grid .week-day-number { font-weight: 800; }
[data-app-theme="vivid"] .week-grid .wdh-late { background: #fff; color: #dc2626; }
[data-app-theme="vivid"] .week-grid .week-item { border: none; border-radius: 20px; padding: 0.35rem 0.65rem; }
[data-app-theme="vivid"] .week-grid .week-item.task.done { background: rgba(34,197,94,0.12); }
[data-app-theme="vivid"] .week-grid .week-item.task.late { background: rgba(239,68,68,0.15); }
[data-app-theme="vivid"] .week-grid .week-congrats { color: #fff; background: linear-gradient(135deg, #10b981, #34d399); border-radius: 20px; justify-content: center; }

/* ===== Cor por empresa nas tarefas ===== */
/* A barra da esquerda identifica a empresa (ou Pessoal). A cor vem inline (style="border-left-color").
   Status (feita / atrasada) continua sinalizado pelo texto, fundo e badge — nunca pela cor da empresa. */
.week-item.task { border-left-width: 3px; }
:root:is([data-app-theme="vidro"], [data-app-theme="min"], [data-app-theme="vivid"]) .week-grid .week-item.task {
  border-left-style: solid;
  border-left-width: 3px;
}

/* Lista de tarefas (página Tarefas): mesma barra + etiqueta da empresa com o ponto colorido */
.task-item.has-comp { border-left: 3px solid var(--comp); }
.task-tag.comp-tag { gap: 4px; }
.comp-dot2 { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Legenda: amostra da cor da empresa */
.legend-bar { width: 3px; height: 13px; border-radius: 2px; flex-shrink: 0; }

/* ===== Menu lateral: ícones + modo recolhido (rail) ===== */
.si-ic { width: 19px; height: 19px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: width var(--transition-slow), height var(--transition-slow); }
.si-ic svg { width: 100%; height: 100%; display: block; }

/* ===== O zoom de dock na barra recolhida =====
   Cresce o ESPACO, nao a escala: assim os vizinhos sao empurrados em vez
   de ficarem por baixo, e o canto arredondado nunca corta o icone.
   O vizinho imediato cresce um pouco menos, o seguinte menos ainda — e
   isso que faz o movimento parecer o dock do Mac e nao um pulo. */
.app.rail .sidebar-nav .sidebar-item,
.app.rail .company-link,
.app.rail .sidebar-section-link {
  transition: background var(--transition), color var(--transition),
    padding var(--transition-slow), transform var(--transition-slow);
}
.app.rail .sidebar-nav .sidebar-item:hover { padding: 0.95rem 0; transform: translateX(3px); z-index: 3; }
.app.rail .sidebar-nav .sidebar-item:hover .si-ic { width: 27px; height: 27px; }
.app.rail .sidebar-nav .sidebar-item:hover + .sidebar-item,
.app.rail .sidebar-nav .sidebar-item:has(+ .sidebar-item:hover) { padding: 0.75rem 0; transform: translateX(1px); z-index: 2; }
.app.rail .sidebar-nav .sidebar-item:hover + .sidebar-item .si-ic,
.app.rail .sidebar-nav .sidebar-item:has(+ .sidebar-item:hover) .si-ic { width: 23px; height: 23px; }
.app.rail .sidebar-nav .sidebar-item:hover + .sidebar-item + .sidebar-item,
.app.rail .sidebar-nav .sidebar-item:has(+ .sidebar-item + .sidebar-item:hover) { padding: 0.65rem 0; }
.app.rail .sidebar-nav .sidebar-item:hover + .sidebar-item + .sidebar-item .si-ic,
.app.rail .sidebar-nav .sidebar-item:has(+ .sidebar-item + .sidebar-item:hover) .si-ic { width: 21px; height: 21px; }
/* no toque nao existe hover: o zoom sairia como um tranco ao encostar */
@media (hover: none) {
  .app.rail .sidebar-nav .sidebar-item:hover { padding: 0.55rem 0; transform: none; }
  .app.rail .sidebar-nav .sidebar-item:hover .si-ic { width: 19px; height: 19px; }
}

/* ===== A LINHA QUE CORRE EM VOLTA DO BOTAO =====
   A mesma linha viva que cerca o painel do editor, agora reagindo a
   qualquer botao. `pathLength=100` faz o tracejado trabalhar em
   porcentagem: nada para medir, uma animacao serve qualquer tamanho.
   As duas metades saem do mesmo canto, correm por lados opostos e se
   encontram do outro lado. */
.anelbt { position: fixed; z-index: 900; pointer-events: none; overflow: visible; }
.anelbt[hidden] { display: none !important; }
.anelbt rect {
  fill: none; stroke: var(--primary); stroke-width: 1.5;
  stroke-dasharray: 100; vector-effect: non-scaling-stroke;
}
.anelbt .b1 { stroke-dashoffset: 100; animation: btcorre1 .62s cubic-bezier(.22,.61,.36,1) forwards; }
.anelbt .b2 { stroke-dashoffset: -100; animation: btcorre2 .62s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes btcorre1 { to { stroke-dashoffset: 50; } }
@keyframes btcorre2 { to { stroke-dashoffset: -50; } }
.anelbt .b3 {
  stroke-dasharray: 13 100; stroke-width: 2.2; opacity: 0;
  stroke: color-mix(in srgb, var(--primary) 45%, #fff);
  animation: btacende .4s .5s ease forwards, btgira 4.5s .5s linear infinite;
}
@keyframes btacende { to { opacity: .85; } }
@keyframes btgira { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .anelbt rect { animation: none !important; stroke-dashoffset: 0 !important; }
  .anelbt .b3 { display: none; }
}
.sec-ic { display: none; }
.sidebar-item, .company-link, .sidebar-section-link { position: relative; }

.rail-btn {
  margin-left: auto; width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--radius-sm);
  color: var(--text-4); cursor: pointer; transition: all var(--transition);
}
.rail-btn svg { width: 15px; height: 15px; }
.rail-btn:hover { background: var(--bg-2); color: var(--text-1); }

/* --- Recolhido (rail): barra estreita (só ícones), no PRÓPRIO grid.
   Clique no botão alterna; o conteúdo reflui. Sem overlay/hover (que travava). --- */
.app.rail { --sidebar-w: 66px; }

@media (min-width: 901px) {
  .app.rail .sidebar { overflow: hidden; }
  .app.rail .sidebar-logo { padding: 0 0.4rem; justify-content: center; gap: 0; }
  .app.rail .sidebar-logo-mark { display: none; }   /* no recolhido sobra só o botão de expandir */
  .app.rail .sidebar-logo-text { display: none; }
  .app.rail .rail-btn { margin: 0 auto; }            /* botão fica visível e centralizado pra reexpandir */
  .app.rail .rail-btn svg { transform: scaleX(-1); }

  .app.rail .si-tx { display: none; }
  .app.rail .sidebar-section-title:not(.sidebar-section-link) { visibility: hidden; height: 0; margin: 0; overflow: hidden; }
  .app.rail .sidebar-section { margin-bottom: 0.6rem; }
  .app.rail .sidebar-nav { padding: 0 0.5rem; gap: 3px; }
  .app.rail :is(.sidebar-item, .company-link, .sidebar-section-link) { justify-content: center; padding: 0.55rem 0; gap: 0; }
  .app.rail .sec-ic { display: flex; }
  .app.rail .sec-chev { display: none; }
  /* botao com width:auto encolhe ate o icone: o de Negocios grudava na esquerda da barra.
     A largura da coluna menos as margens, igual aos itens das outras secoes. */
  .app.rail .sidebar-section-link { margin: 0 0.5rem 0.4rem; border-radius: var(--radius-md); padding: 0.55rem 0; width: calc(100% - 1rem); }
  .app.rail .sidebar-section-link:hover { background: var(--bg-2); color: var(--text-1); }
  /* Badge vira bolinha no canto do ícone */
  .app.rail .sidebar-item-badge {
    position: absolute; top: 2px; right: 6px; margin: 0;
    min-width: 15px; padding: 0 3px; font-size: 0.6rem; line-height: 15px; height: 15px;
    background: var(--primary); color: var(--bg-1); border-radius: 8px;
  }
  .app.rail .sidebar-item.active .sidebar-item-badge { background: var(--bg-1); color: var(--text-1); }
  :root:is([data-app-theme="vidro"], [data-app-theme="min"], [data-app-theme="vivid"]) .app.rail .sidebar-item-badge { color: #18181b; }
  .app.rail .company-link .dot { width: 10px; height: 10px; }
}

/* No celular a sidebar já é gaveta — o rail vira sidebar normal */
@media (max-width: 900px) {
  .app.rail { --sidebar-w: 220px; }
  .rail-btn { display: none; }
}

/* ===== Contas, cofrinhos e investimentos ===== */
.wallet-total {
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1.5rem; align-items: center;
}
.wt-label { font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.wt-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.wt-toggles { display: flex; gap: 6px; grid-row: 1 / 3; align-self: start; flex-wrap: wrap; justify-content: flex-end; }
.wt-tg {
  display: flex; align-items: center; gap: 7px; padding: 7px 11px;
  background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--transition); color: var(--text-3); font-size: 0.78rem;
}
.wt-tg:hover { border-color: var(--border-2); }
.wt-tg.on { color: var(--text-1); border-color: var(--primary); }
.wt-tg-box {
  width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--text-4); display: flex; align-items: center; justify-content: center;
}
.wt-tg.on .wt-tg-box { background: var(--primary); border-color: var(--primary); color: var(--bg-1); }
:root:is([data-app-theme="vidro"],[data-app-theme="min"],[data-app-theme="vivid"]) .wt-tg.on .wt-tg-box { color: #18181b; }
.wt-tg-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.wt-tg:not(.on) .wt-tg-val { opacity: 0.45; text-decoration: line-through; }
.wt-parts { display: flex; gap: 14px; align-items: center; font-size: 0.78rem; color: var(--text-3); }
.wt-rate { padding: 2px 8px; background: var(--bg-2); border-radius: 20px; font-variant-numeric: tabular-nums; }

.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.acc-card {
  background: var(--bg-1); border: 1px solid var(--border-1); border-top: 3px solid var(--acc);
  border-radius: var(--radius-lg); padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem;
  transition: all var(--transition);
}
.acc-card:hover { border-color: var(--border-2); }
.acc-head { display: flex; align-items: center; gap: 0.6rem; }
.acc-ic {
  width: 32px; height: 32px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc);
}
.acc-id { min-width: 0; flex: 1; }
.acc-name { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-sub { font-size: 0.72rem; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-flag { font-size: 0.62rem; color: var(--text-4); border: 1px solid var(--border-1); border-radius: 20px; padding: 1px 7px; }
.acc-menu { opacity: 0; transition: opacity var(--transition); }
.acc-card:hover .acc-menu { opacity: 1; }
.acc-bal { display: flex; align-items: baseline; justify-content: space-between; }
.acc-bal-lb { font-size: 0.74rem; color: var(--text-3); }
.acc-bal-vl { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.acc-sec { border-top: 1px solid var(--border-1); padding-top: 0.6rem; }
.acc-sec-h { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-3); margin-bottom: 6px; }
.acc-sec-h b { color: var(--text-1); font-variant-numeric: tabular-nums; }
.acc-pot, .acc-inv {
  padding: 7px 9px; border-radius: var(--radius-sm); background: var(--bg-2);
  margin-bottom: 5px; cursor: pointer; transition: all var(--transition);
}
.acc-pot:hover, .acc-inv:hover { filter: brightness(1.12); }
.acc-pot-top, .acc-inv-top, .acc-inv-bot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.acc-pot-nm, .acc-inv-nm { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-pot-vl, .acc-inv-vl { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.acc-pot-vl i { color: var(--text-4); font-style: normal; font-weight: 400; }
.acc-pot-bar { height: 4px; background: var(--bg-1); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.acc-pot-bar div { height: 100%; border-radius: 3px; transition: width 0.3s; }
.acc-inv-bot { margin-top: 3px; }
.acc-inv-tx { font-size: 0.68rem; color: var(--text-4); }
.acc-inv-gn { font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-inv-gn.up { color: var(--accent-green); }
.acc-inv-gn.down { color: var(--accent-red); }
.acc-foot { display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--border-1); padding-top: 0.6rem; margin-top: auto; }
.acc-act {
  font-size: 0.7rem; color: var(--text-3); background: none; border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm); padding: 3px 8px; cursor: pointer; transition: all var(--transition);
}
.acc-act:hover { color: var(--text-1); border-color: var(--primary); border-style: solid; }
.acc-tot { margin-left: auto; font-size: 0.72rem; color: var(--text-3); }
.acc-tot b { color: var(--text-1); font-variant-numeric: tabular-nums; }

/* Busca de banco */
.bank-pick { position: relative; }
.bank-results {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  max-height: 240px; overflow-y: auto; background: var(--bg-1);
  border: 1px solid var(--border-2); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.bank-results.open { display: block; }
.bank-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px;
  background: none; border: none; cursor: pointer; text-align: left; color: var(--text-2); font-size: 0.8rem;
}
.bank-row:hover { background: var(--bg-2); color: var(--text-1); }
.bank-code {
  font-size: 0.65rem; font-variant-numeric: tabular-nums; color: var(--text-4);
  background: var(--bg-2); border-radius: 4px; padding: 1px 5px; min-width: 32px; text-align: center; flex-shrink: 0;
}
.bank-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-none { padding: 12px; font-size: 0.78rem; color: var(--text-4); line-height: 1.5; }

/* Cores da conta */
.color-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.color-dot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: all var(--transition); padding: 0;
}
.color-dot:hover { transform: scale(1.12); }
.color-dot.on { border-color: var(--text-1); box-shadow: 0 0 0 2px var(--bg-1) inset; }
.color-custom { width: 24px; height: 24px; padding: 0; border: 1px solid var(--border-2); border-radius: 50%; background: none; cursor: pointer; }

/* Prévia do rendimento */
.inp-suffix { position: relative; display: flex; align-items: center; }
.inp-suffix input { padding-right: 42px; }
.inp-suffix span { position: absolute; right: 10px; font-size: 0.75rem; color: var(--text-4); pointer-events: none; }
.inv-preview { background: var(--bg-2); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; margin-bottom: 1rem; }
.inv-pv-row { display: flex; align-items: baseline; gap: 8px; font-size: 0.8rem; color: var(--text-3); }
.inv-pv-row b { font-size: 1rem; color: var(--text-1); font-variant-numeric: tabular-nums; }
.inv-pv-row i { font-style: normal; color: var(--text-4); font-size: 0.75rem; }
.inv-pv-src { font-size: 0.68rem; color: var(--text-4); margin-top: 2px; }
.inv-pv-sim { font-size: 0.78rem; color: var(--text-2); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border-1); }
.inv-pv-sim i { font-style: normal; color: var(--accent-green); }
.inv-pv-warn { font-size: 0.66rem; color: var(--text-4); margin-top: 4px; line-height: 1.4; }
.inv-pv-none { font-size: 0.78rem; color: var(--text-4); }

/* Correção do valor real */
.inv-real { border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 0.8rem; margin-bottom: 1rem; }
.inv-real-t { font-size: 0.82rem; }
.inv-real-t b { font-variant-numeric: tabular-nums; }
.inv-real-s { font-size: 0.7rem; color: var(--text-4); margin-top: 3px; line-height: 1.45; }
.inv-real-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin-top: 0.7rem; }
.inv-corr-h { font-size: 0.68rem; color: var(--text-4); margin: 0.7rem 0 4px; }
.inv-corr { display: flex; gap: 8px; align-items: center; font-size: 0.72rem; padding: 3px 0; }
.inv-corr-dt { color: var(--text-4); flex-shrink: 0; }
.inv-corr-df { font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.inv-corr-df.up { color: var(--accent-green); }
.inv-corr-df.down { color: var(--accent-red); }
.inv-corr-rs { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Painel de taxas */
.rates-intro { font-size: 0.78rem; color: var(--text-3); line-height: 1.5; margin-bottom: 1rem; }
.rates-list { display: flex; flex-direction: column; gap: 2px; }
.rates-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; background: var(--bg-2); border-radius: var(--radius-sm); }
.rates-row.stale { border-left: 2px solid var(--accent-amber); }
.rates-nm { font-size: 0.8rem; }
.rates-vl { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; grid-row: 1 / 3; align-self: center; }
.rates-dt { font-size: 0.66rem; color: var(--text-4); }
.rates-src { display: none; }
.rates-none { font-size: 0.8rem; color: var(--text-4); line-height: 1.5; }
.form-hint { font-weight: 400; color: var(--text-4); font-size: 0.7rem; }

@media (max-width: 700px) {
  .wallet-total { grid-template-columns: 1fr; }
  .wt-toggles { grid-row: auto; justify-content: flex-start; }
  .acc-grid { grid-template-columns: 1fr; }
  .inv-real-row { grid-template-columns: 1fr; }
}

/* Investimentos-base: chips de sugestão no formulário */
.inv-bases { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-base-chip { font-size: 0.74rem; }

/* Toggle "no total" no cartão da conta (controle de visualização) */
.acc-total-tg {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 0.68rem; color: var(--text-4); background: none;
  border: 1px solid var(--border-1); border-radius: 20px; padding: 3px 9px 3px 5px;
  cursor: pointer; transition: all var(--transition);
}
.acc-total-tg:hover { border-color: var(--border-2); color: var(--text-2); }
.acc-total-tg.on { color: var(--text-2); border-color: var(--acc); }
.acc-total-box {
  width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--text-4); display: flex; align-items: center; justify-content: center;
}
.acc-total-tg.on .acc-total-box { background: var(--acc); border-color: var(--acc); color: #fff; }

/* ===== Tamanho do texto (Ajustes) ===== */
.fs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fs-nudge {
  display: inline-flex; align-items: baseline; gap: 1px; flex-shrink: 0;
  padding: 6px 11px; border: 1px solid var(--border-2); border-radius: var(--radius-md);
  background: var(--bg-2); color: var(--text-2); cursor: pointer; font-weight: 600;
  font-size: 0.85rem; transition: all var(--transition);
}
.fs-nudge.big { font-size: 1.1rem; }
.fs-nudge span { font-size: 0.7em; }
.fs-nudge:hover { border-color: var(--primary); color: var(--text-1); }
.fs-levels { display: flex; align-items: flex-end; gap: 4px; flex: 1; min-width: 160px; }
.fs-dot {
  flex: 1; display: flex; align-items: flex-end; justify-content: center;
  height: 34px; padding: 0; background: none; border: none; cursor: pointer;
}
.fs-dot span {
  display: block; width: 100%; max-width: 22px; border-radius: 4px 4px 2px 2px;
  background: var(--border-2); transition: background var(--transition);
}
.fs-dot:hover span { background: var(--text-4); }
.fs-dot.on span { background: var(--primary); }
:root:is([data-app-theme="vidro"],[data-app-theme="min"],[data-app-theme="vivid"]) .fs-dot.on span { background: var(--primary); }
.fs-level-label { font-size: 0.78rem; color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.fs-preview {
  margin-top: 0.9rem; padding: 0.7rem 0.85rem; background: var(--bg-2);
  border-radius: var(--radius-md); color: var(--text-2); line-height: 1.5;
}

/* Faixas neon nas bordas ao arrastar uma tarefa (zona de troca de semana).
   Altura total da tela — a extremidade inteira ativa, não um ponto só. */
.edge-zone {
  position: fixed; top: 0; bottom: 0; width: 68px; z-index: 9997;
  pointer-events: none; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
}
.edge-zone.left { left: 0; }
.edge-zone.right { right: 0; }
/* Durante o arraste, a zona já aparece sutil (mostra onde dá pra transferir) */
body.week-dragging .edge-zone { opacity: 0.55; }
/* Brilho neon na borda, esmaecendo pra dentro */
.edge-zone::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(var(--edge-dir, 90deg),
    color-mix(in srgb, var(--primary) 42%, transparent), transparent);
}
.edge-zone.left { --edge-dir: 90deg; }
.edge-zone.right { --edge-dir: 270deg; }
/* Linha neon acesa na quina, altura toda */
.edge-zone::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 4px;
  background: var(--primary);
  box-shadow: 0 0 10px 2px var(--primary), 0 0 22px 6px color-mix(in srgb, var(--primary) 60%, transparent);
}
.edge-zone.left::after { left: 0; }
.edge-zone.right::after { right: 0; }
/* Ativa (ponteiro na zona): neon forte + pulso na faixa inteira */
body.week-dragging .edge-zone.active { opacity: 1; }
.edge-zone.active { animation: edgeZonePulse 0.85s ease-in-out infinite; }
.edge-zone.active::before { background: linear-gradient(var(--edge-dir, 90deg),
  color-mix(in srgb, var(--primary) 70%, transparent), transparent); }
@keyframes edgeZonePulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
/* Etiqueta girada acompanhando a faixa vertical */
.edge-zone-label {
  position: relative; writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap;
  color: var(--primary); text-shadow: 0 0 8px color-mix(in srgb, var(--primary) 70%, transparent);
  opacity: 0; transition: opacity 0.2s ease;
}
.edge-zone.right .edge-zone-label { transform: rotate(180deg); }
.edge-zone.active .edge-zone-label { opacity: 1; }

/* ===== Catálogo de investimentos (form de conta tipo Investimento) ===== */
.inv-catalog { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; padding: 2px; }
.inv-cat-card {
  text-align: left; width: 100%; cursor: pointer;
  background: var(--bg-2); border: 1.5px solid var(--border-1); border-radius: var(--radius-md);
  padding: 10px 12px; transition: all var(--transition); display: flex; flex-direction: column; gap: 4px;
}
.inv-cat-card:hover { border-color: var(--border-2); }
.inv-cat-card.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--bg-2)); }
.icc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.icc-name { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }
.icc-tag { font-size: 0.62rem; font-weight: 600; color: var(--primary); border: 1px solid var(--primary); border-radius: 20px; padding: 1px 6px; }
:root:is([data-app-theme="vidro"],[data-app-theme="min"],[data-app-theme="vivid"]) .icc-tag { color: var(--text-2); }
.icc-risk { font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.icc-risk.risk-low { background: color-mix(in srgb, var(--accent-green) 18%, transparent); color: var(--accent-green); }
.icc-risk.risk-mid { background: color-mix(in srgb, var(--accent-amber) 20%, transparent); color: var(--accent-amber); }
.icc-risk.risk-high { background: color-mix(in srgb, var(--accent-red) 18%, transparent); color: var(--accent-red); }
.icc-rate { font-size: 0.82rem; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.icc-rate i { font-style: normal; font-weight: 400; color: var(--text-4); font-size: 0.72rem; }
.icc-meta { display: flex; flex-direction: column; gap: 1px; font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.icc-meta b { color: var(--text-2); font-weight: 600; }

/* ===== Menu de Investimentos ===== */
.inv-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 1.25rem;
}
.inv-summary > div { background: var(--bg-1); padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 3px; }
.is-lb { font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.is-vl { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.is-vl.up { color: var(--accent-green); }
.is-vl.down { color: var(--accent-red); }
.inv-list { display: flex; flex-direction: column; gap: 8px; }
.inv-row {
  display: flex; align-items: center; gap: 12px; padding: 0.85rem 1rem;
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--transition);
}
.inv-row:hover { border-color: var(--border-2); background: var(--bg-2); }
.ir-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ir-main { flex: 1; min-width: 0; }
.ir-name { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-sub { font-size: 0.75rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-vals { text-align: right; flex-shrink: 0; }
.ir-vl { font-weight: 700; font-variant-numeric: tabular-nums; }
.ir-gn { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ir-gn.up { color: var(--accent-green); }
.ir-gn.down { color: var(--accent-red); }
@media (max-width: 640px) { .inv-summary { grid-template-columns: 1fr; } }

/* Cofrinho: guardar/tirar + info do modal */
.acc-pot-nm { cursor: pointer; }
.acc-pot-nm:hover { text-decoration: underline; }
.acc-pot-acts { display: flex; gap: 6px; margin-top: 6px; }
.acc-pot-act {
  font-size: 0.68rem; color: var(--text-3); background: none;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 2px 9px; cursor: pointer; transition: all var(--transition);
}
.acc-pot-act:hover { color: var(--text-1); border-color: var(--primary); }
.cof-move-info { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; margin-bottom: 1rem; }
.cof-quick { display: flex; gap: 6px; margin-top: 8px; }
.cof-quick .chip { font-size: 0.72rem; cursor: pointer; }

/* ===== Rede social (perfil, busca, conexões) ===== */
.me-card { display: flex; align-items: center; gap: 14px; }
.me-avatar, .conn-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: var(--bg-1);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem;
}
:root:is([data-app-theme="vidro"],[data-app-theme="min"],[data-app-theme="vivid"]) .me-avatar,
:root:is([data-app-theme="vidro"],[data-app-theme="min"],[data-app-theme="vivid"]) .conn-av { color: #18181b; }
.conn-av { width: 38px; height: 38px; font-size: 0.95rem; }
.me-info { flex: 1; min-width: 0; }
.me-name { font-weight: 700; font-size: 1.05rem; }
.me-handle { color: var(--text-3); font-size: 0.85rem; }
.me-vis { display: flex; gap: 6px; flex-wrap: wrap; }
.me-tag { font-size: 0.66rem; color: var(--text-3); border: 1px solid var(--border-2); border-radius: 20px; padding: 2px 8px; }
.people-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.people-none { font-size: 0.82rem; color: var(--text-4); padding: 8px 2px; line-height: 1.5; }
.conn-block .card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 0.8rem; }
.conn-badge { font-size: 0.72rem; background: var(--primary); color: var(--bg-1); border-radius: 20px; padding: 1px 8px; font-weight: 700; }
:root:is([data-app-theme="vidro"],[data-app-theme="min"],[data-app-theme="vivid"]) .conn-badge { color: #18181b; }
.conn-empty { font-size: 0.83rem; color: var(--text-4); line-height: 1.5; }
.conn-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-1); }
.conn-row:first-of-type { border-top: none; }
.people-results .conn-row { border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 8px 12px; }
.conn-id { flex: 1; min-width: 0; }
.conn-nm { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-hd { font-size: 0.76rem; color: var(--text-3); }
.conn-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.conn-status { font-size: 0.76rem; color: var(--text-4); }
.conn-status.ok { color: var(--accent-green); font-weight: 600; }
.btn-sm { padding: 4px 12px; font-size: 0.8rem; }

/* Tarefa compartilhada */
.task-shared-banner {
  margin-top: 8px; font-size: 0.8rem; color: var(--text-2);
  background: color-mix(in srgb, var(--primary) 12%, var(--bg-2));
  border-left: 3px solid var(--primary); border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.task-shared-tag {
  font-size: 0.68rem; font-weight: 600; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 20px; padding: 1px 8px;
}
:root:is([data-app-theme="vidro"],[data-app-theme="min"],[data-app-theme="vivid"]) .task-shared-tag { color: var(--text-2); }
.share-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
.share-list .conn-row { border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 8px 12px; }

/* Equipe da empresa */
.team-list { display: flex; flex-direction: column; gap: 6px; }
.team-list .conn-row { border-top: 1px solid var(--border-1); }
.team-list .conn-row:first-child { border-top: none; }

/* Empréstimos */
.loan-row .conn-nm b { font-variant-numeric: tabular-nums; }
.loan-dir { font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 20px; }
.loan-dir.up { color: var(--accent-green); background: color-mix(in srgb, var(--accent-green) 15%, transparent); }
.loan-dir.down { color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 15%, transparent); }
.loan-due { font-size: 0.7rem; }
.loan-due.late { color: var(--accent-red); font-weight: 600; }

/* Conta conjunta (só leitura) */
.acc-card.acc-shared { border-style: dashed; }
.acc-shared-tag { font-size: 0.64rem; font-weight: 700; color: var(--primary); border: 1px solid var(--primary); border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
:root:is([data-app-theme="vidro"],[data-app-theme="min"],[data-app-theme="vivid"]) .acc-shared-tag { color: var(--text-2); }
.acc-ro-note { font-size: 0.72rem; color: var(--text-4); }
.cd-section-title { font-size: 0.9rem; font-weight: 700; color: var(--text-2); }

/* Menu lateral: sem barra de rolagem — rola pela posição do mouse (initSidebarScroll) */
.sidebar { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: auto; }
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Convite por link */
.invite-link-row { display: flex; gap: 8px; align-items: center; }
.invite-link-row .form-input { flex: 1; font-size: 0.82rem; font-family: monospace; }
.auth-invite {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: var(--radius-md); padding: 9px 12px; margin: 4px 0 14px;
  font-size: 0.85rem; line-height: 1.45; color: var(--text-1);
}

/* Passo 3 da transação: alternador Pago/Agendar */
.seg-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-toggle .chip { flex: 1 1 auto; justify-content: center; text-align: center; }

/* Painel inline de nova categoria (form de transação) */
.catnew-inline { flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-2); }

/* Saldo previsto (após pendentes) no card do Financeiro */
.balance-forecast { width: 100%; margin-top: 2px; font-size: 0.8rem; opacity: 0.9; }
.balance-forecast b { font-weight: 700; }
.balance-forecast b.up { color: var(--accent-green); }
.balance-forecast b.down { color: var(--accent-red); }

/* Seletor de conta por chips/ícones (form de transação) */
.acct-chips, .comp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-chip, .comp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border-1); background: var(--bg-2); color: inherit; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.acct-chip:hover, .comp-chip:hover { border-color: var(--primary); }
.acct-chip.active, .comp-chip.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); }
.acct-chip-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; flex: none; }
.acct-chip-ic.none { color: var(--text-4, #888); background: var(--bg-2); font-weight: 700; }
.acct-chip-tx { display: flex; flex-direction: column; line-height: 1.15; }
.acct-chip-nm { font-size: 0.84rem; font-weight: 600; }
.acct-chip-bal { font-size: 0.72rem; opacity: 0.7; }
.chip-star { color: #f5b301; font-size: 0.85em; }

/* Gráfico de rosca — "Onde você mais gasta" */
/* Gráfico de gastos maior, preenchendo o card lateral: rosca centralizada + legenda alinhada em grade */
.donut-row { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.donut-wrap { position: relative; width: 200px; height: 200px; flex: none; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.donut-center span { font-size: 0.62rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; }
.donut-center b { font-size: 1.15rem; font-weight: 700; }
.donut-legend { width: 100%; display: flex; flex-direction: column; gap: 2px; }
/* cada linha da legenda é um botão clicável (abre o extrato da categoria).
   grid com colunas fixas → nome, barra, valor e % ficam perfeitamente alinhados. */
.dleg {
  display: grid; grid-template-columns: 13px minmax(0, 1fr) 54px max-content 42px;
  align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; color: inherit; font: inherit; font-size: 0.82rem;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; transition: background .12s;
}
.dleg:hover { background: var(--bg-2); }
.dleg-dot { width: 11px; height: 11px; border-radius: 3px; }
.dleg-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dleg-bar { height: 6px; border-radius: 3px; background: var(--border-1, var(--bg-2)); overflow: hidden; }
.dleg-bar > span { display: block; height: 100%; border-radius: 3px; }
.dleg-money { font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dleg-pct { text-align: right; opacity: 0.6; font-variant-numeric: tabular-nums; }
.dleg-hint { font-size: 0.72rem; color: var(--text-4); text-align: center; margin-top: 6px; }

/* Diálogo de confirmação no app (substitui o confirm do navegador) */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; transition: opacity .15s; padding: 20px; }
.confirm-overlay.active { opacity: 1; }
.confirm-box { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 16px; padding: 22px; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.5); transform: translateY(8px); transition: transform .15s; }
.confirm-overlay.active .confirm-box { transform: translateY(0); }
.confirm-title { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.confirm-msg { font-size: 0.88rem; opacity: 0.82; margin-bottom: 18px; line-height: 1.45; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-danger { background: var(--accent-red, #ef4444); color: #fff; border-color: transparent; }
.btn-danger:hover { filter: brightness(1.08); }

/* Filtro de escopo do Financeiro + gráfico melhorado */
/* Barra de período do Financeiro (dia/semana/mês/personalizado) */
.fin-period { display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* Seletor segmentado "modo rápido": recolhe pro item ativo, expande no hover */
.finseg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 999px; padding: 3px; overflow: hidden; max-width: 100%; }
.finseg-track { display: inline-flex; gap: 2px; }
.finseg-it {
  border: none; background: none; cursor: pointer; padding: 6px 14px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; color: var(--text-3); white-space: nowrap; max-width: 220px; overflow: hidden;
  transition: max-width .3s cubic-bezier(.4,0,.2,1), padding .24s ease, opacity .22s ease, color var(--transition), background var(--transition);
}
.finseg-it.active { background: var(--primary); color: var(--bg-1); }
.finseg-it:hover:not(.active) { color: var(--text-1); }
.finseg:not(:hover) .finseg-it:not(.active) { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; pointer-events: none; }
.finp-modes { display: inline-flex; gap: 2px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 999px; padding: 3px; }
.finp-mode { border: none; background: none; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--text-3); transition: color var(--transition), background var(--transition); }
.finp-mode:hover { color: var(--text-1); }
.finp-mode.active { background: var(--primary); color: var(--bg-1); }
.finp-nav { display: inline-flex; align-items: center; gap: 6px; }
.finp-arrow { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-1); background: var(--bg-1); border-radius: 8px; color: var(--text-2); cursor: pointer; transition: all var(--transition); }
.finp-arrow:hover { border-color: var(--border-2); color: var(--text-1); background: var(--bg-2); }
/* Rótulo do período: curto (09/2026) por padrão, nome completo no hover */
.finp-label { display: inline-flex; align-items: baseline; justify-content: center; overflow: hidden; font-size: 0.9rem; font-weight: 700; color: var(--text-1); text-align: center; }
.finp-label .lbl-short, .finp-label .lbl-full { white-space: nowrap; transition: max-width .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
.finp-label .lbl-short { max-width: 130px; }
.finp-label .lbl-full { max-width: 0; opacity: 0; }
.finp-nav:hover .lbl-short { max-width: 0; opacity: 0; }
.finp-nav:hover .lbl-full { max-width: 240px; opacity: 1; }
.finp-today { border: none; background: var(--bg-3); color: var(--text-2); cursor: pointer; padding: 5px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; margin-left: 4px; }
.finp-today:hover { background: var(--bg-4); color: var(--text-1); }
.finp-custom { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.finp-custom .form-input { width: auto; padding: 6px 10px; font-size: 0.82rem; }
.finp-until { color: var(--text-3); font-size: 0.8rem; }
.finp-close { border: 1px solid var(--border-1); background: var(--bg-1); color: var(--text-2); cursor: pointer; padding: 6px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; margin-left: 6px; white-space: nowrap; transition: all var(--transition); }
.finp-close:hover { border-color: var(--accent-red); color: var(--accent-red); }

/* Período personalizado: chip + popover no design do Nexo */
.finp-rangewrap { position: relative; display: inline-flex; }
.finp-rangechip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-1); background: var(--bg-1); color: var(--text-1); cursor: pointer; padding: 6px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.finp-rangechip:hover { border-color: var(--border-2); }
.finp-rangechip .finp-chev { color: var(--text-4); transition: transform .28s cubic-bezier(.4,0,.2,1); }
.finp-rangewrap.open .finp-chev, .finp-rangewrap:hover .finp-chev { transform: rotate(180deg); }
.finp-pop { min-width: 252px; right: auto; left: 0; }
.finp-pop-t { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-4); padding: 4px 8px 8px; }
.finp-pop-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.finp-pop-row > span { width: 34px; font-size: 0.8rem; color: var(--text-3); }
.finp-pop-row .form-input { flex: 1; padding: 6px 10px; font-size: 0.82rem; }
.finp-pop-presets { display: flex; gap: 6px; padding: 8px 8px 4px; }
.finp-pop-presets button { flex: 1; border: 1px solid var(--border-1); background: var(--bg-2); color: var(--text-2); cursor: pointer; padding: 6px; border-radius: 8px; font-size: 0.76rem; font-weight: 600; }
.finp-pop-presets button:hover { border-color: var(--border-2); color: var(--text-1); }
.finp-close.done { background: rgba(22,163,74,0.12); border-color: transparent; color: var(--accent-green); }
.finp-close.done:hover { border-color: var(--accent-green); }
@media (max-width: 560px) { .fin-period { justify-content: center; } .finp-label { min-width: 108px; font-size: 0.84rem; } }

/* Bloco de fechamento dentro do extrato */
.ext-fech { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; margin: 2px 0 14px; border: 1px dashed var(--border-2); border-radius: var(--radius-lg); background: var(--bg-2); }
.ext-fech.fechado { border-style: solid; border-color: transparent; background: rgba(22,163,74,0.08); }
.ext-fech-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ext-fech-t { font-size: 0.82rem; color: var(--text-2); }
.ext-fech-badge { font-size: 0.85rem; font-weight: 700; color: var(--accent-green); }
.ext-fech-meta { font-size: 0.72rem; color: var(--text-3); }
@media print { .ext-fech .btn { display: none; } .ext-fech { border-color: var(--border-2); } }

.fin-scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0.35rem 0 1rem; transition: gap .2s ease; }
/* Modo rápido: escopo recolhe pro selecionado e expande no hover */
.fin-scope:not(:hover) { gap: 0; }
.fin-scope:not(:hover) .pagetab:not(.active) { max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; pointer-events: none; }
.fin-scope:not(:hover) .fin-scope-lb { margin-right: 8px; }
.fin-scope-lb { font-size: 0.75rem; color: var(--text-3); margin-right: 2px; white-space: nowrap; }
.fin-scope .pagetab { display: inline-flex; align-items: center; line-height: 1.25; }
.scope-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex: none; }
.chart-scope-tag { font-size: 0.72rem; opacity: 0.6; }
.chart-insight { font-size: 0.84rem; margin-bottom: 0.9rem; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); }
.chart-insight i { opacity: 0.65; font-style: normal; }

/* ===== Extrato animado ===== */
.extrato-overlay { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s ease; }
.extrato-overlay.active { opacity: 1; }
.extrato-modal { position: relative; width: 100%; max-width: 640px; background: var(--bg-1); border: 1px solid var(--border-1);
  border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,0.5); padding: 22px 22px 26px; transform: translateY(10px) scale(0.99);
  transition: transform .2s ease; }
.extrato-overlay.active .extrato-modal { transform: translateY(0) scale(1); }
.extrato-close { position: absolute; top: 12px; right: 14px; font-size: 1.5rem; line-height: 1; color: var(--text-3);
  background: none; border: none; cursor: pointer; z-index: 2; }
.extrato-close:hover { color: var(--text-1); }

.extrato-loading { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.ext-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--border-1); border-top-color: var(--primary); animation: extspin 0.7s linear infinite; }
@keyframes extspin { to { transform: rotate(360deg); } }
.ext-load-msg { font-size: 0.9rem; color: var(--text-3); text-align: center; }

.ext-head { margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ext-head-kicker { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-4); }
.ext-export { display: flex; gap: 6px; flex-shrink: 0; }
.ext-export .btn { display: inline-flex; align-items: center; gap: 5px; }

/* Impressão do extrato: esconde o resto e mostra só o modal (usuário salva em PDF) */
@media print {
  body.printing-extrato > *:not(.extrato-overlay) { display: none !important; }
  body.printing-extrato .extrato-overlay { position: static; opacity: 1; background: none; display: block; }
  body.printing-extrato .extrato-modal { position: static; transform: none; box-shadow: none; border: none;
    max-width: 100%; max-height: none; overflow: visible; color: #000; background: #fff; }
  body.printing-extrato .extrato-close, body.printing-extrato .ext-export { display: none !important; }
}
.ext-head-title { font-size: 1.5rem; font-weight: 800; margin-top: 3px; }
.ext-head-sub { font-size: 0.78rem; font-weight: 600; margin-left: 6px; }
.ext-head-sub.up { color: var(--accent-green); } .ext-head-sub.down { color: var(--accent-red); }

@keyframes extRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ext-sec { opacity: 0; animation: extRise .4s ease forwards; }

.ext-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.ext-tile { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ext-tile-lb { font-size: 0.72rem; color: var(--text-3); }
.ext-tile-v { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ext-tile.up .ext-tile-v { color: var(--accent-green); } .ext-tile.down .ext-tile-v { color: var(--accent-red); }

.ext-block { margin-top: 16px; }
.ext-block-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ext-block-t { font-size: 0.88rem; font-weight: 700; }
.ext-block-h .up { color: var(--accent-green); } .ext-block-h .down { color: var(--accent-red); }
.ext-count { font-size: 0.72rem; color: var(--text-4); font-weight: 500; margin-left: 4px; }

.ext-cat { display: grid; grid-template-columns: 12px minmax(0,1fr) 60px max-content 40px; align-items: center; gap: 10px; padding: 5px 0; font-size: 0.83rem; }
.ext-cat-dot { width: 11px; height: 11px; border-radius: 3px; }
.ext-cat-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-cat-bar { height: 6px; border-radius: 3px; background: var(--border-1); overflow: hidden; }
.ext-cat-bar > span { display: block; height: 100%; border-radius: 3px; }
.ext-cat-money { font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ext-cat-money.up { color: var(--accent-green); } .ext-cat-money.down { color: var(--accent-red); }
.ext-cat-pct { text-align: right; opacity: 0.6; font-variant-numeric: tabular-nums; }

.ext-tx { display: grid; grid-template-columns: 22px 1fr max-content; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-1); font-size: 0.84rem; }
.ext-tx:last-child { border-bottom: none; }
.ext-tx-arrow { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; background: var(--bg-2); }
.ext-tx-arrow.income { color: var(--accent-green); } .ext-tx-arrow.expense { color: var(--accent-red); }
.ext-tx-main { display: flex; flex-direction: column; min-width: 0; }
.ext-tx-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-tx-meta { font-size: 0.72rem; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-tx-val { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ext-tx-val.income { color: var(--accent-green); } .ext-tx-val.expense { color: var(--accent-red); }
.ext-pend { font-size: 0.82rem; color: var(--text-2); background: var(--bg-2); border-radius: 10px; padding: 9px 12px; margin-bottom: 4px; }
.ext-pend b { font-weight: 700; } .ext-pend .up { color: var(--accent-green); } .ext-pend .down { color: var(--accent-red); }
@media (max-width: 520px) { .ext-tiles { grid-template-columns: 1fr; } }

/* Categoria ativa na legenda (quando filtra a lista) */
.dleg.active-cat { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-1); }
/* Barra do filtro de categoria acima da lista de transações */
.txfilter-bar:empty { display: none; }
.txfilter-bar { margin: 0 0 8px; }
.txcat-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 999px; padding: 4px 6px 4px 12px; }
.txcat-chip .txcat-nm { font-weight: 600; }
.txcat-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.txcat-chip .up { color: var(--accent-green); } .txcat-chip .down { color: var(--accent-red); }
.txcat-chip button { border: none; background: var(--bg-3); color: var(--text-2); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.txcat-chip button:hover { background: var(--accent-red); color: #fff; }

/* ===== Financeiro — Opção C ===== */
.fin-head-actions { display: flex; align-items: center; gap: 8px; }

/* Menu "⋯ mais" do cabeçalho — consolida ações secundárias */
.hdrmenu { position: relative; display: inline-flex; }
.hdrmenu-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 214px;
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 5px;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
/* abre no HOVER (com a mesma animação) e também no clique (fixa aberto) */
.hdrmenu:hover > .hdrmenu-panel,
.hdrmenu.open > .hdrmenu-panel { opacity: 1; transform: none; pointer-events: auto; }
.hdrmenu-it {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: none; background: none; cursor: pointer; border-radius: 8px; color: var(--text-1);
  font-size: 0.86rem; font-weight: 500; text-align: left; transition: background var(--transition);
}
.hdrmenu-it:hover { background: var(--bg-2); }
.hdrmenu-it.danger { color: var(--accent-red); }
.hdrmenu-it.danger svg { color: var(--accent-red); }
.hdrmenu-it svg { color: var(--text-3); flex-shrink: 0; }

/* Barra de ações que abre PRO LADO no hover (⋯ vira ícones) */
.actbar { display: inline-flex; align-items: center; }
.actbar-track { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; max-width: 0; opacity: 0; transition: max-width .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, margin-right .2s ease; }
.actbar:hover .actbar-track, .actbar.open .actbar-track { max-width: 180px; opacity: 1; margin-right: 6px; }
.actbar-it, .actbar-trigger { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--bg-2); border: 1px solid var(--border-1); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.actbar-it:hover, .actbar-trigger:hover { background: var(--bg-3); color: var(--text-1); border-color: var(--border-2); }
.actbar-it.done { color: var(--accent-green); border-color: color-mix(in srgb, var(--accent-green) 40%, transparent); }

/* Menu do avatar (perfil) */
.avatar-wrap { position: relative; }
.avatar-wrap .avatar { cursor: pointer; border: none; }
.avatar-panel { min-width: 230px; }
.avp-sec { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-4); padding: 8px 11px 4px; }
.avp-div { height: 1px; background: var(--border-1); margin: 5px 4px; }
.avatar-panel .theme-pills-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px 6px; }

/* Interruptor Rápido / Guiado */
.uimode-seg { display: flex; gap: 4px; padding: 2px 6px 4px; }
.uimode-pill { flex: 1; border: 1px solid var(--border-1); background: var(--bg-1); color: var(--text-2); cursor: pointer; padding: 7px 8px; border-radius: 8px; font: inherit; font-size: 0.78rem; font-weight: 600; transition: all var(--transition); }
.uimode-pill:hover { border-color: var(--border-2); color: var(--text-1); }
.uimode-pill.on { background: var(--primary); color: var(--bg-1); border-color: var(--primary); }

/* ===== MODO GUIADO: neutraliza os "recolher no hover" — tudo fica sempre aberto ===== */
[data-ui-mode="guiado"] .finseg .finseg-it { max-width: 220px !important; padding-left: 14px !important; padding-right: 14px !important; opacity: 1 !important; pointer-events: auto !important; }
[data-ui-mode="guiado"] .pagetabs { gap: 6px !important; overflow: visible !important; }
[data-ui-mode="guiado"] .pagetabs .pagetab { max-width: 280px !important; padding-left: 16px !important; padding-right: 16px !important; border-width: 0.5px !important; opacity: 1 !important; pointer-events: auto !important; }
[data-ui-mode="guiado"] .actbar-it { pointer-events: auto !important; }
[data-ui-mode="guiado"] .comp-sel .selp-head { padding-top: 9px !important; padding-bottom: 9px !important; background: var(--bg-1) !important; border-color: var(--border-1) !important; }
[data-ui-mode="guiado"] .comp-sel .selp-cur-nm { max-width: 240px !important; opacity: 1 !important; }
[data-ui-mode="guiado"] .comp-sel .selp-chev { opacity: 1 !important; }
[data-ui-mode="guiado"] .finp-label .lbl-short { max-width: 0 !important; opacity: 0 !important; }
[data-ui-mode="guiado"] .finp-label .lbl-full { max-width: 260px !important; opacity: 1 !important; }
[data-ui-mode="guiado"] .actbar-track { max-width: 200px !important; opacity: 1 !important; margin-right: 6px !important; }
[data-ui-mode="guiado"] .filter-bar { gap: 0.4rem !important; }
[data-ui-mode="guiado"] .filter-bar .filter-chip { max-width: 220px !important; padding-left: .65rem !important; padding-right: .65rem !important; border-width: 1px !important; opacity: 1 !important; pointer-events: auto !important; }
[data-ui-mode="guiado"] .fin-scope { gap: 8px !important; }
[data-ui-mode="guiado"] .fin-scope .pagetab { max-width: 280px !important; padding-left: 16px !important; padding-right: 16px !important; border-width: 0.5px !important; opacity: 1 !important; pointer-events: auto !important; }

/* Menu de seções: ícone + barra que expande PRO LADO (transform/opacity, sem travar) */
.fmenu { position: relative; display: inline-flex; align-items: center; }
.fmenu-icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--bg-2); border: 1px solid var(--border-1); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; }
.fmenu:hover .fmenu-icon, .fmenu.open .fmenu-icon { background: var(--primary); color: var(--bg-1); border-color: var(--primary); }
.fmenu-bar { position: absolute; right: calc(100% + 8px); top: 50%; display: flex; gap: 5px; white-space: nowrap; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 999px; padding: 5px;
  transform: translateY(-50%) translateX(12px); opacity: 0; visibility: hidden; pointer-events: none; box-shadow: var(--shadow-lg); z-index: 50;
  transition: opacity .18s ease, transform .18s cubic-bezier(.4,0,.2,1), visibility .18s; }
.fmenu:hover .fmenu-bar, .fmenu:focus-within .fmenu-bar, .fmenu.open .fmenu-bar { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.fmenu-it { font-size: 0.8rem; color: var(--text-2); background: none; border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.fmenu-it:hover { background: var(--bg-3); color: var(--text-1); }
.fmenu-it.on { background: var(--primary); color: var(--bg-1); font-weight: 600; }

/* Menu unificado da Agenda (visão + filtro num ícone que expande) */
.agm-icon { width: auto !important; padding: 0 12px; gap: 8px; }
.agm-cur { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.agm-bar { align-items: center; }
.agm-lb { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-4); padding: 0 2px; }
.agm-it { font-size: 0.8rem; color: var(--text-2); background: none; border: none; border-radius: 999px; padding: 6px 11px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; transition: background .12s, color .12s; }
.agm-it:hover { background: var(--bg-3); color: var(--text-1); }
.agm-it.on { background: var(--primary); color: var(--bg-1); font-weight: 600; }
.agm-sep { width: 1px; height: 18px; background: var(--border-1); margin: 0 4px; }
.agm-it .scope-dot { margin-right: 5px; }
@media (max-width: 640px) { .agmenu .fmenu-bar { left: auto; right: 0; } .agm-cur { display: none; } }

/* Resumo do topo: saldo (branco) + entradas (verde) + saídas (vermelho) */
.fin-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 14px 20px; margin-bottom: 1rem; }
.fin-sum-saldo .fin-sum-lb { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.fin-sum-v { color: var(--text-1) !important; font-size: 1.5rem; font-weight: 700; margin-top: 1px; }
.fin-sum-kv { display: flex; flex-direction: column; }
.fin-sum-k { font-size: 0.7rem; color: var(--text-3); }
.balance-value2 { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.balance-value2.up { color: var(--accent-green); } .balance-value2.down { color: var(--accent-red); }
.fin-sum-meta { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.78rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fin-sum-meta i { font-style: normal; color: var(--text-4); margin-right: 4px; }
.fin-sum-meta .up { color: var(--accent-green); } .fin-sum-meta .down { color: var(--accent-red); }
.balance-hidden .fin-sum-v, .balance-hidden .balance-value2, .balance-hidden .fin-sum-meta { filter: blur(9px); user-select: none; }

/* Bloco do gráfico em foco */
.fin-chart { margin-bottom: 0.85rem; }
.fin-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.fin-toggle { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 999px; padding: 2px; }
.fin-toggle .ftg { font-size: 0.78rem; border: none; background: none; color: var(--text-2); padding: 5px 15px; border-radius: 999px; cursor: pointer; transition: .15s; }
.fin-toggle .ftg.active.out { background: var(--accent-red); color: #fff; font-weight: 600; }
.fin-toggle .ftg.active.in { background: var(--accent-green); color: #04120a; font-weight: 600; }
.fin-chart-body { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fin-donut { position: relative; width: 200px; height: 200px; flex: none; }
.fin-donut svg { overflow: visible; }
.fin-donut .fseg { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: stroke-width .16s ease, opacity .2s ease, transform .2s cubic-bezier(.34,1.4,.5,1); }
.fin-donut .fseg:hover { stroke-width: 7; }
.fin-donut.has-sel .fseg:not(.sel) { opacity: .28; }
.fin-donut .fseg.sel { stroke-width: 8; transform: scale(1.05); }
@keyframes fsegIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.fin-donut.enter .fseg { animation: fsegIn .5s cubic-bezier(.34,1.3,.5,1) backwards; }
.fin-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.fin-donut-center span { font-size: 0.62rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.fin-donut-center b { font-size: 1.2rem; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.fin-tip { position: absolute; pointer-events: none; background: #000; color: #fff; border: 1px solid var(--border-1); border-radius: 8px; padding: 6px 10px; font-size: 0.72rem; white-space: nowrap; z-index: 40; opacity: 0; transform: translate(-50%,-6px); transition: opacity .12s, transform .12s; }
.fin-tip.show { opacity: 1; transform: translate(-50%,-10px); } .fin-tip b { font-weight: 600; } .fin-tip span { color: var(--text-3); margin-left: 6px; }
.fin-chart-body .donut-legend { flex: 1; min-width: 220px; }

.txmode-chip { display: inline-block; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 3px 11px; }
.txmode-chip.out { background: color-mix(in srgb, var(--accent-red) 16%, transparent); color: var(--accent-red); }
.txmode-chip.in { background: color-mix(in srgb, var(--accent-green) 18%, transparent); color: var(--accent-green); }

.fin-bycompany { margin-top: 0.85rem; }
.fin-bc-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 18px; }
.fin-bc-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-1); font-size: 0.85rem; }
.fin-bc-nm { display: flex; align-items: center; gap: 8px; } .fin-bc-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Metas do mês (alerta) */
.fin-metas { margin-bottom: 1rem; }
.fin-metas-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.fin-metas-cfg { background: none; border: none; color: var(--primary); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.fin-meta-row { padding: 7px 0; border-top: 1px solid var(--border-1); }
.fin-meta-row:first-of-type { border-top: none; }
.fin-meta-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.fin-meta-nm { font-size: 0.88rem; font-weight: 600; }
.fin-meta-badge { font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.fin-meta-badge.near { background: color-mix(in srgb, var(--accent-amber) 20%, transparent); color: var(--accent-amber); }
.fin-meta-badge.over { background: color-mix(in srgb, var(--accent-red) 20%, transparent); color: var(--accent-red); }
.fin-meta-bar { height: 7px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.fin-meta-fill { height: 100%; border-radius: 999px; background: var(--accent-green); transition: width 0.5s ease; }
.fin-meta-fill.near { background: var(--accent-amber); }
.fin-meta-fill.over { background: var(--accent-red); }
.fin-meta-info { font-size: 0.76rem; color: var(--text-4); margin-top: 4px; }
.fin-meta-info.over { color: var(--accent-red); font-weight: 600; }

/* Comparativo mês a mês */
.fin-cmp { margin-top: 0.85rem; }
.fin-cmp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0.9rem; flex-wrap: wrap; }
.fin-cmp-leg { display: flex; gap: 12px; font-size: 0.74rem; color: var(--text-4); }
.fin-cmp-leg span { display: inline-flex; align-items: center; gap: 5px; }
.fin-cmp-leg .dot { width: 9px; height: 9px; border-radius: 2px; }
.fin-cmp-leg .dot.in { background: var(--accent-green); } .fin-cmp-leg .dot.out { background: var(--accent-red); }
.fin-cmp-cols { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.fin-cmp-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fin-cmp-col.cur .fin-cmp-ml { color: var(--text-1); font-weight: 800; }
.fin-cmp-col.cur .fin-cmp-bars { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.fin-cmp-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 92px; width: 100%; border-radius: 6px 6px 0 0; padding: 0 2px; }
.fin-cmp-bar { width: 42%; max-width: 16px; border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.5s ease; }
.fin-cmp-bar.in { background: var(--accent-green); } .fin-cmp-bar.out { background: var(--accent-red); }
.fin-cmp-ml { font-size: 0.72rem; color: var(--text-4); text-transform: capitalize; }
.fin-cmp-saldo { font-size: 0.72rem; font-weight: 700; }
.fin-cmp-saldo.up { color: var(--accent-green); } .fin-cmp-saldo.down { color: var(--accent-red); }

@media (max-width: 640px) {
  .fmenu-bar { right: auto; left: 0; top: calc(100% + 6px); transform: translateY(-6px); }
  .fmenu:hover .fmenu-bar, .fmenu.open .fmenu-bar { transform: translateY(0); }
  .fin-sum-meta { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fin-donut .fseg, .fmenu-bar { transition: none !important; animation: none !important; } }

/* ===== Formulários por empresa + filtragem de clientes ===== */
.client-type-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); vertical-align: middle; }

/* ===== CRM: etiquetas de cliente ===== */
.ctag { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--tc, var(--primary)) 16%, transparent);
  color: var(--tc, var(--primary)); border: 1px solid color-mix(in srgb, var(--tc, var(--primary)) 40%, transparent); }
.client-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 8px; }
.client-tagsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 1rem; padding: 10px 14px;
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); }
.ctb-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-4); font-weight: 600; }
.ctb-empty { font-size: 0.82rem; color: var(--text-4); }
.ctb-edit { margin-left: auto; background: none; border: none; color: var(--primary); font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 2px 4px; }

/* ===== CRM: interações (timeline) ===== */
.client-inter { margin-bottom: 1rem; }
.ci-add { display: flex; gap: 7px; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.ci-add .ci-type { max-width: 130px; flex-shrink: 0; }
.ci-add .ci-note { flex: 1; min-width: 160px; }
.ci-remind { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--text-3); }
.ci-remind input[type=date] { padding: 0.35rem 0.5rem; font-size: 0.8rem; width: 145px; }
.ci-timeline { display: flex; flex-direction: column; }
.ci-item { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-1); position: relative; }
.ci-item:first-child { border-top: none; }
.ci-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.ci-body { flex: 1; min-width: 0; }
.ci-top { display: flex; align-items: baseline; gap: 8px; }
.ci-typ { font-size: 0.8rem; font-weight: 700; }
.ci-when { font-size: 0.72rem; color: var(--text-4); }
.ci-text { font-size: 0.88rem; color: var(--text-2); margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.ci-remind-line { margin-top: 6px; }
.ci-remind-badge { font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; }
.ci-remind-badge.up { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.ci-remind-badge.today { background: color-mix(in srgb, var(--accent-amber) 20%, transparent); color: var(--accent-amber); }
.ci-remind-badge.over { background: color-mix(in srgb, var(--accent-red) 18%, transparent); color: var(--accent-red); }
.ci-remind-badge.done { background: color-mix(in srgb, var(--accent-green) 16%, transparent); color: var(--accent-green); text-decoration: none; }
.ci-del { background: none; border: none; color: var(--text-4); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; align-self: flex-start; }
.ci-del:hover { color: var(--accent-red); }
.ci-empty { color: var(--text-4); font-size: 0.85rem; padding: 0.5rem 0; }

/* ===== CRM: modal de escolher etiquetas ===== */
.tagpick-row { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.tagpick-row:hover { background: var(--bg-2); }
.tagpick-row.on { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.tagpick-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--primary); flex-shrink: 0; }
.tagpick-row.on .tagpick-check { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.tagpick-uses { margin-left: auto; font-size: 0.72rem; color: var(--text-4); }
.tagpick-del { background: none; border: none; color: var(--text-4); font-size: 1.1rem; cursor: pointer; padding: 0 4px; }
.tagpick-del:hover { color: var(--accent-red); }
.tagpick-empty { color: var(--text-4); font-size: 0.85rem; padding: 0.5rem 0; }
.tagpick-new { display: flex; gap: 7px; align-items: center; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--border-1); }
.tagpick-new .form-input { flex: 1; }
.tagpick-color { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--border-1); border-radius: 8px; background: none; cursor: pointer; flex-shrink: 0; }

/* ===== Modelos de tarefa ===== */
.tpl-row { display: flex; align-items: center; gap: 9px; padding: 10px 6px; border-top: 1px solid var(--border-1); }
.tpl-row:first-child { border-top: none; }
.tpl-main { flex: 1; min-width: 0; cursor: pointer; }
.tpl-name { font-size: 0.9rem; font-weight: 600; }
.tpl-meta { font-size: 0.75rem; color: var(--text-4); margin-top: 2px; }
.tpl-del { background: none; border: none; color: var(--text-4); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.tpl-del:hover { color: var(--accent-red); }
.tpl-empty { color: var(--text-4); font-size: 0.85rem; padding: 0.5rem 0; }
.tpl-foot { display: flex; align-items: center; gap: 10px; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border-1); flex-wrap: wrap; }
.tpl-hint { font-size: 0.75rem; color: var(--text-4); }

/* botão "excluir" discreto no comentário do pedido */
.note-del { background: none; border: none; color: var(--text-4); font-size: 0.72rem; cursor: pointer; margin-left: 8px; padding: 0; }
.note-del:hover { color: var(--accent-red); }
/* credencial (login/senha) no detalhe do cliente */
.cred-row { display: flex; align-items: center; gap: 8px; }
.cred-val { font-family: ui-monospace, monospace; letter-spacing: .02em; }
.cred-btn { padding: 2px 8px !important; font-size: 0.72rem !important; }
/* construtor do formulário */
.fb-field { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto auto; gap: 8px; align-items: center; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 8px; }
.fb-field .form-input, .fb-field .form-select { padding: 0.4rem 0.55rem; font-size: 0.8rem; }
.fb-req-lb { font-size: 0.72rem; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fb-type-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 999px; padding: 4px 6px 4px 12px; }
.fb-type-chip button { border: none; background: var(--bg-3); color: var(--text-2); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; }
.fb-type-chip button:hover { background: var(--accent-red); color: #fff; }
@media (max-width: 640px) { .fb-field { grid-template-columns: 1fr 1fr; } }
/* lista de formulários (vários por empresa) */
.form-row-item { border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; background: var(--bg-1); }
.fri-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fri-head b { font-size: 0.9rem; }
.fri-count { font-size: 0.72rem; color: var(--text-4); white-space: nowrap; }
.fri-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.fri-actions .btn { padding: 3px 9px; font-size: 0.72rem; }

/* Painel do admin — lista de usuários */
.admin-users { display: flex; flex-direction: column; }
.admin-user { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-1); }
.admin-user:last-child { border-bottom: none; }
.admin-user.is-off { opacity: 0.6; }
.au-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--primary); color: var(--bg-1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; }
.au-main { flex: 1; min-width: 0; }
.au-name { font-weight: 600; font-size: 0.92rem; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.au-badge { font-size: 0.66rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.au-badge.admin { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); }
.au-badge.master { background: color-mix(in srgb, #f5b301 22%, transparent); color: #f5b301; border: 1px solid color-mix(in srgb, #f5b301 45%, transparent); }
.au-badge.off { background: color-mix(in srgb, var(--accent-red) 18%, transparent); color: var(--accent-red); }
.au-badge.on { background: color-mix(in srgb, var(--accent-green) 20%, transparent); color: var(--accent-green); }

/* Selo de plano (SaaS) + segurança no painel admin */
.plan-badge { font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; }
.plan-badge.pro { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); }
.plan-badge.basico { background: color-mix(in srgb, #14b8a6 18%, transparent); color: #14b8a6; border: 1px solid color-mix(in srgb, #14b8a6 45%, transparent); }
.plan-badge.trial { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #f59e0b; border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); }
.plan-badge.none { background: var(--bg-2); color: var(--text-4); border: 1px solid var(--border-2); }
.stat-warn { color: var(--accent-red); }
.admin-note-warn { font-size: 0.8rem; color: var(--accent-amber, #d97706); background: color-mix(in srgb, var(--accent-amber, #d97706) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-amber, #d97706) 30%, transparent); border-radius: var(--radius-lg); padding: 8px 12px; margin: -0.4rem 0 1rem; }
.lf-top { font-size: 0.76rem; color: var(--text-3); padding: 0.4rem 0.6rem 0.6rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lf-ip { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 999px; padding: 1px 9px; font-variant-numeric: tabular-nums; }
.lf-ip b { color: var(--accent-red); }

/* Ferramentas — hub de recursos do negócio */
/* Cards uniformes e alinhados: todos do mesmo tamanho (align-items:stretch,
   conteúdo compacto idêntico). A descrição abre num POPOVER por cima — nunca
   muda o tamanho do card, então as vizinhas nunca reagem junto. */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: stretch; }
.tool-card { position: relative; z-index: 1; min-height: 100px; display: flex; align-items: center; gap: 14px; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; transition: border-color 0.22s ease, box-shadow 0.28s ease, border-radius 0.2s ease; }
.tool-card:hover, .tool-card.open { z-index: 6; border-color: color-mix(in srgb, var(--tc) 55%, var(--border-1)); box-shadow: 0 14px 34px -20px var(--tc), 0 8px 22px -22px #000; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tool-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tool-card.soon { opacity: 0.62; cursor: default; }
.tool-card.soon:hover, .tool-card.soon.open { opacity: 1; }
.tc-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--tc, var(--primary)); flex-shrink: 0; box-shadow: 0 8px 20px -10px var(--tc, var(--primary)); transition: transform 0.34s cubic-bezier(.34,1.4,.5,1); }
.tool-card:hover .tc-ic, .tool-card.open .tc-ic { transform: scale(1.07) rotate(-4deg); }
.tc-ic svg { width: 22px; height: 22px; }
.tc-body { flex: 1; min-width: 0; }
.tc-name { font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.tc-badge { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--bg-2); color: var(--text-4); border: 1px solid var(--border-2); border-radius: 999px; padding: 2px 7px; flex-shrink: 0; }
.tc-tag { font-size: 0.8rem; color: var(--text-3); margin-top: 3px; }
/* popover ancorado no card — some por cima do layout, sem empurrar nada */
.tc-reveal { position: absolute; left: -1px; right: -1px; top: 100%; background: var(--bg-1); border: 1px solid color-mix(in srgb, var(--tc) 55%, var(--border-1)); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: 0 22px 40px -24px #000, 0 16px 40px -26px var(--tc); padding: 0 16px; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-6px); pointer-events: none; z-index: 6; transition: max-height 0.32s cubic-bezier(.22,1,.36,1), opacity 0.22s ease, transform 0.28s cubic-bezier(.22,1,.36,1), padding 0.22s ease; }
.tool-card:hover .tc-reveal, .tool-card.open .tc-reveal { max-height: 240px; opacity: 1; transform: none; padding: 8px 16px 15px; pointer-events: auto; }
.tc-revin { display: block; }
.tc-accent { display: block; height: 2px; width: 30px; background: var(--tc); border-radius: 2px; margin-bottom: 9px; }
.tc-meta { font-size: 0.72rem; color: var(--text-4); margin-bottom: 6px; }
.tc-desc { font-size: 0.8rem; color: var(--text-3); line-height: 1.45; }
.tc-trail { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; align-self: center; }
.tc-go { color: var(--text-4); display: flex; transition: transform 0.25s ease; }
.tool-card:hover .tc-go { transform: translateX(3px); }
.tc-info { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--bg-2); color: var(--text-3); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.tc-info:hover { color: var(--text-1); border-color: var(--text-4); }
.tc-info.on { background: var(--tc); border-color: var(--tc); color: #fff; }
@media (prefers-reduced-motion: reduce) { .tool-card, .tc-ic, .tc-reveal, .tc-go { transition: none; } }

/* Cartão de visita (QR) */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.qr-card { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.qr-img { background: #fff; border-radius: 12px; padding: 10px; width: 100%; max-width: 220px; }
.qr-img img { display: block; width: 100%; height: auto; }
.qr-title { font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qr-url { font-size: 0.8rem; color: var(--primary); font-variant-numeric: tabular-nums; word-break: break-all; }
.qr-url.off { color: var(--text-4); }
.qr-warn { font-size: 0.75rem; color: var(--accent-amber, #d97706); }
.qr-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.qr-empty { display: flex; align-items: center; gap: 12px; width: 100%; }
.qr-empty .lb-av { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; flex-shrink: 0; }

/* Catálogo digital — gerenciador (config + produtos) */
.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cat-main { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cat-side { position: sticky; top: 16px; }
.cat-pvpanel { display: flex; flex-direction: column; }
.cat-phone { width: 100%; max-width: 290px; margin: 0 auto; aspect-ratio: 10 / 19; border: 9px solid #17171b; border-radius: 30px; overflow: hidden; background: #0b0b0d; box-shadow: 0 16px 40px -20px #000; }
.cat-phone iframe { width: 100%; height: 100%; border: 0; display: block; background: #0b0b0d; }
.cat-pvhint { font-size: 0.72rem; color: var(--text-4); margin-top: 10px; line-height: 1.5; text-align: center; }
@media (max-width: 1080px) { .cat-layout { grid-template-columns: 1fr; } .cat-side { position: static; } }
@media (max-width: 680px) { .cat-main { grid-template-columns: 1fr; } }
/* ===== Vitrine — editor estúdio (rail + painel + prévia), no padrão do editor de bio ===== */
.cs-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cs-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.cs-title b { font-weight: 800; }
.cs-status { font-size: 0.72rem; font-weight: 700; color: var(--text-4); }
.cs-status.on { color: #22c55e; }
.cs-topacts { margin-left: auto; display: flex; gap: 8px; }
.cs { display: flex; border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-1); height: calc(100vh - 150px); min-height: 520px; }
.cs-rail { flex: 0 0 96px; background: var(--bg-2); border-right: 1px solid var(--border-1); display: flex; flex-direction: column; padding: 8px; gap: 3px; overflow-y: auto; }
.cs-rail::-webkit-scrollbar { width: 0; }
.cs-tool { position: relative; border: 0; background: transparent; color: var(--text-3); border-radius: 10px; padding: 11px 4px 9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 600; transition: 0.14s; }
.cs-tool:hover { background: var(--bg-1); color: var(--text-1); }
.cs-tool.on { background: var(--primary); color: var(--bg-1); }
.cs-ic { font-size: 18px; line-height: 1; }
.cs-tn { text-align: center; line-height: 1.1; }
.cs-badge { position: absolute; top: 4px; right: 10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-red, #dc2626); color: #fff; font-size: 0.6rem; font-weight: 800; display: grid; place-items: center; }
.cs-tool.on .cs-badge { background: var(--bg-1); color: var(--primary); }
.cs-panel { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 18px 20px 30px; }
.cs-sectitle { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1rem; margin-bottom: 16px; }
.cs-secadd { margin-left: auto; }
.cs-hint { font-size: 0.76rem; color: var(--text-4); line-height: 1.5; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.cs-canvas { flex: 0 0 316px; border-left: 1px solid var(--border-1); background: var(--bg-2); padding: 14px; display: flex; flex-direction: column; }
.cs-canvashead { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; font-weight: 700; color: var(--text-3); margin-bottom: 10px; }
.cs-phone { aspect-ratio: auto; max-width: 100%; flex: 1; min-height: 0; margin: 0; }
@media (max-width: 900px) {
  .cs { flex-direction: column; height: auto; }
  .cs-rail { flex: none; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-1); }
  .cs-tool { flex: 0 0 auto; min-width: 66px; }
  .cs-badge { right: 6px; }
  .cs-canvas { flex: none; border-left: 0; border-top: 1px solid var(--border-1); }
  .cs-phone { height: 460px; flex: none; max-width: 290px; margin: 0 auto; }
}
.cat-coupons { margin-top: 16px; }
.cpn-list { display: flex; flex-direction: column; gap: 8px; }
.cpn-row { display: flex; align-items: center; gap: 12px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; padding: 10px 12px; flex-wrap: wrap; }
.cpn-row.off { opacity: 0.55; }
.cpn-code { font-family: var(--mono, ui-monospace, monospace); font-weight: 800; font-size: 0.9rem; letter-spacing: .03em; background: var(--bg-1); border: 1px dashed var(--border-2); border-radius: 8px; padding: 5px 10px; color: var(--text-1); }
.cpn-info { font-size: 0.8rem; color: var(--text-3); flex: 1; min-width: 140px; }
.cpn-info b { color: var(--text-1); }
.cpn-acts { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.rvm-list { display: flex; flex-direction: column; gap: 8px; }
.rvm-row { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; padding: 10px 12px; }
.rvm-top { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; flex-wrap: wrap; }
.rvm-stars { color: #f59e0b; letter-spacing: 1px; }
.rvm-prod { color: var(--text-3); }
.rvm-date { color: var(--text-4); font-size: 0.72rem; }
.rvm-cm { font-size: 0.82rem; color: var(--text-2); line-height: 1.45; margin-top: 5px; }
/* Pedidos da loja (painel do dono) */
.so-list { display: flex; flex-direction: column; gap: 8px; }
.so-row { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; padding: 11px 13px; flex-wrap: wrap; }
.so-row.done { opacity: 0.6; }
.so-main { flex: 1; min-width: 180px; }
.so-head { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; flex-wrap: wrap; }
.so-items { font-size: 0.82rem; color: var(--text-2); line-height: 1.4; margin-top: 4px; }
.so-tot { font-size: 0.9rem; font-weight: 800; margin-top: 5px; font-variant-numeric: tabular-nums; }
.so-sub { font-size: 0.74rem; font-weight: 500; color: var(--text-4); }
.so-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
/* Linhas de nota fiscal e entrega dentro do pedido */
.so-end { font-size: 0.76rem; color: var(--text-3); line-height: 1.45; margin-top: 4px; }
.so-end.obs { color: var(--text-2); font-style: italic; }
.so-end.falta { color: var(--warning, #f59e0b); }
/* Situação do pagamento — o que decide se o pedido pode ser separado */
.pay-tag { font-size: 0.66rem; font-weight: 800; border-radius: 5px; padding: 2px 7px;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.pay-tag.pay-wait  { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.pay-tag.pay-check { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #2563eb; }
.pay-tag.pay-ok    { background: color-mix(in srgb, #16a34a 18%, transparent); color: #15803d; }
.pay-tag.pay-no    { background: color-mix(in srgb, #dc2626 16%, transparent); color: #b91c1c; }
@media (prefers-color-scheme: dark) {
  .pay-tag.pay-wait  { color: #fbbf24; }
  .pay-tag.pay-check { color: #93c5fd; }
  .pay-tag.pay-ok    { color: #4ade80; }
  .pay-tag.pay-no    { color: #fca5a5; }
}
/* Ferramentas — utilitários (calculadora, pix, recibo, etc.) */
.tool-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 820px; }
/* casca das ferramentas de link: ajustes e resultados; ao lado, o que o cliente ve, divulgar, como funciona */
.tshell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.tshell.solo { grid-template-columns: minmax(0, 1fr); }
.tshell-main { min-width: 0; }
.tshell-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.tphone { border-radius: 26px; border: 7px solid var(--bg-2); box-shadow: 0 0 0 1px var(--border-2), 0 18px 40px -20px rgba(0,0,0,.35); overflow: hidden; background: #fff; aspect-ratio: 9 / 16; max-height: 440px; }
.tphone iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.tsee-abrir { display: inline-block; margin-top: 10px; font-size: 0.78rem; color: var(--text-3); text-decoration: none; }
.tsee-abrir:hover { color: var(--text-1); }
.tshare-url { font-size: 0.8rem; color: var(--text-2); font-variant-numeric: tabular-nums; word-break: break-all; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.tshare-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.tqr { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.tqr img { width: 84px; height: 84px; background: #fff; border-radius: 10px; padding: 5px; flex: none; }
.tqr span { font-size: 0.76rem; color: var(--text-3); line-height: 1.4; }
.tcomo ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 8px; font-size: 0.84rem; color: var(--text-2); line-height: 1.45; }
.tcomo ol li::marker { color: var(--text-4); font-weight: 700; }
.tcomo-pq { margin-top: 12px; font-size: 0.8rem; color: var(--text-3); line-height: 1.45; border-top: 1px solid var(--border-1); padding-top: 10px; }
.tcomo-pq b { display: block; font-size: 0.68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); margin-bottom: 3px; }
@media (max-width: 960px) { .tshell { grid-template-columns: 1fr; } .tshell-side { position: static; } .tphone { max-width: 320px; } }
@media (max-width: 720px) { .tool-wrap { grid-template-columns: 1fr; } }
.tool-notif { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: color-mix(in srgb, var(--primary, #f59e0b) 10%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--primary, #f59e0b) 35%, var(--border-1)); border-radius: var(--radius-lg); padding: 12px 15px; margin-bottom: 14px; }
.tool-notif-txt { flex: 1; min-width: 200px; font-size: 0.85rem; line-height: 1.45; color: var(--text-2); }
.tool-notif .btn { white-space: nowrap; }
.calc-out { display: flex; flex-direction: column; gap: 14px; }
.calc-big { display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 16px; }
.calc-lbl { font-size: 0.72rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.calc-val { font-size: 1.9rem; font-weight: 800; color: var(--primary, var(--text-1)); font-variant-numeric: tabular-nums; }
.calc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.calc-cell { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; padding: 11px; display: flex; flex-direction: column; gap: 3px; }
.calc-sub { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.calc-hint { font-size: 0.75rem; color: var(--text-4); line-height: 1.5; }
/* Pesquisa de mercado (calculadora de preço) */
.mk-load { font-size: 0.85rem; color: var(--text-3); padding: 14px; text-align: center; background: var(--bg-2); border: 1px dashed var(--border-1); border-radius: 12px; }
.mk-res { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mk-range { display: flex; flex-direction: column; gap: 3px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 12px; padding: 14px 16px; }
.mk-range .mk-lbl { font-size: 0.7rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.mk-range .mk-v { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mk-cells { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mk-cell { display: flex; flex-direction: column; gap: 3px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; padding: 11px 13px; }
.mk-cell .mk-lbl { font-size: 0.68rem; color: var(--text-4); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.mk-cell b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.mk-note { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; background: var(--bg-2); border-left: 3px solid var(--primary, #f43f5e); border-radius: 0 8px 8px 0; padding: 9px 12px; }
.mk-disc { font-size: 0.7rem; color: var(--text-4); line-height: 1.4; }
.rc-preview { min-height: 120px; }
.rc-doc { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 20px; }
.rc-h { font-size: 0.72rem; letter-spacing: .2em; color: var(--text-3); font-weight: 700; }
.rc-amt { font-size: 1.7rem; font-weight: 800; margin: 5px 0 12px; font-variant-numeric: tabular-nums; }
.rc-body { font-size: 0.92rem; line-height: 1.6; color: var(--text-1); }
.rc-line { font-size: 0.8rem; color: var(--text-3); margin-top: 7px; }
.rc-sign { margin-top: 28px; border-top: 1px solid var(--border-2); padding-top: 6px; font-weight: 700; }
.rc-sign span { display: block; font-size: 0.68rem; color: var(--text-4); font-weight: 400; }
.rc-foot { margin-top: 16px; font-size: 0.66rem; color: var(--text-4); text-align: center; }
.pix-res { display: flex; flex-direction: column; gap: 8px; }
.pix-qr { background: #fff; border-radius: 12px; padding: 12px; width: 100%; max-width: 220px; margin: 0 auto 6px; }
.pix-qr img { width: 100%; display: block; }
.pix-code { font-family: var(--mono, ui-monospace, monospace); font-size: 0.72rem; word-break: break-all; }
/* Tool owner pages (orçamento/agenda/fidelidade/NPS) */
.q-row { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; flex-wrap: wrap; }
.q-row.done { opacity: 0.6; }
.q-main { flex: 1; min-width: 160px; }
.q-name { font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.q-phone { font-size: 0.72rem; color: var(--text-3); font-weight: 500; }
.q-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.q-date { font-size: 0.7rem; color: var(--text-4); font-weight: 500; }
.q-msg { font-size: 0.82rem; color: var(--text-2); line-height: 1.45; margin-top: 4px; white-space: pre-wrap; }
.q-acts { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.nps-stats { text-align: center; padding: 8px 0 4px; }
.nps-big { font-size: 3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.nps-cap { font-size: 0.8rem; color: var(--text-3); margin-top: 4px; }
.nps-bars { display: flex; gap: 14px; justify-content: center; margin: 14px 0 4px; flex-wrap: wrap; }
.nps-b { font-size: 0.82rem; font-weight: 700; }
.nps-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; color: #08160c; font-weight: 800; font-size: 0.72rem; padding: 0 5px; }
.loy-stamps { font-size: 0.9rem; letter-spacing: 2px; color: var(--primary, #f43f5e); margin-top: 4px; }
.loy-stamps b { font-size: 0.75rem; color: var(--text-3); letter-spacing: 0; margin-left: 6px; }
.cat-panel { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 16px; }
.cat-sec { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; margin-bottom: 14px; }
.cat-hint { font-size: 0.78rem; color: var(--text-4); line-height: 1.5; margin: -8px 0 10px; }
.cat-count { font-size: 0.72rem; font-weight: 700; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 999px; padding: 1px 8px; }
.cat-logorow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cat-logo { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px; background-size: cover; background-position: center; flex-shrink: 0; }
.cat-logobtns { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-field { display: block; margin-bottom: 12px; }
.cat-lbl { display: block; font-size: 0.75rem; color: var(--text-3); margin-bottom: 5px; font-weight: 600; }
.cat-inp, .cat-slug input { width: 100%; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 8px; padding: 9px 11px; color: var(--text-1); font-size: 0.9rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.cat-inp:focus, .cat-slug:focus-within { border-color: var(--accent-blue, #3b82f6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue, #3b82f6) 20%, transparent); }
.cat-slug { display: flex; align-items: center; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 8px; padding: 0 4px 0 11px; }
.cat-slug .cat-pre { font-size: 0.82rem; color: var(--text-4); flex-shrink: 0; }
.cat-slug input { border: 0; background: transparent; padding: 9px 4px; box-shadow: none !important; }
.cat-slugstat { font-size: 0.72rem; margin-top: 5px; display: inline-block; font-weight: 600; color: var(--text-4); }
.cat-slugstat.ok { color: var(--accent-green, #22c55e); }
.cat-slugstat.bad { color: var(--accent-red, #ef4444); }
.cat-row2 { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.cat-colorf { margin-bottom: 12px; }
.cat-color { width: 52px; height: 38px; padding: 2px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 8px; cursor: pointer; }
.cat-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-2); margin-bottom: 12px; cursor: pointer; }
.cat-check input { width: 17px; height: 17px; accent-color: var(--accent-blue, #3b82f6); cursor: pointer; }
.cat-urlbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 8px; padding: 9px 11px; margin: 4px 0 14px; }
.cat-url { font-size: 0.8rem; color: var(--accent-blue, #3b82f6); text-decoration: none; font-weight: 600; word-break: break-all; }
.cat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Aparência da loja (editor de tema) */
.ap-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.ap-themes .thm { border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ap-themes .thm-mini { width: 100%; aspect-ratio: 5/7; border-radius: 8px; overflow: hidden; border: 2px solid var(--border-1); transition: .15s; display: flex; flex-direction: column; }
.ap-themes .thm.on .thm-mini { border-color: var(--accent-blue, #3b82f6); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue, #3b82f6) 40%, transparent); }
.ap-themes .tm-h { height: 38%; display: flex; align-items: center; justify-content: center; }
.ap-themes .tm-dot { width: 12px; height: 12px; border-radius: 4px; }
.ap-themes .tm-g { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; }
.ap-themes .tm-g i { border-radius: 3px; }
.ap-themes .thm-n { font-size: 9.5px; color: var(--text-3); font-weight: 600; }
.ap-themes .thm.on .thm-n { color: var(--text-1); }
.ap-sws { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ap-sws .sw { width: 28px; height: 28px; border-radius: 7px; border: 0; cursor: pointer; position: relative; padding: 0; }
.ap-sws .sw.on { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--text-1); }
.ap-sws .sw.custom { background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #ec4899, #ef4444); overflow: hidden; }
.ap-sws .sw.custom input { position: absolute; inset: -6px; width: 160%; height: 160%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.ap-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.ap-fonts .fbtn { border: 1px solid var(--border-1); background: var(--bg-2); border-radius: 8px; padding: 8px 10px; cursor: pointer; text-align: left; color: var(--text-1); font-size: 1.1rem; font-weight: 700; display: flex; align-items: baseline; gap: 7px; }
.ap-fonts .fbtn.on { border-color: var(--accent-blue, #3b82f6); box-shadow: 0 0 0 1px var(--accent-blue, #3b82f6); }
.ap-fonts .fbtn span { font-size: 0.68rem; color: var(--text-3); font-family: var(--ui, inherit); font-weight: 600; }
.ap .seg { display: flex; gap: 6px; margin-bottom: 10px; }
.ap .seg button { flex: 1; border: 1px solid var(--border-1); background: var(--bg-2); color: var(--text-2); border-radius: 8px; padding: 8px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.ap .seg button.on { background: var(--primary, #fafafa); border-color: var(--primary, #fafafa); color: var(--bg-1, #09090b); }

/* Link na bio — página de listagem no app */
.lb-list { display: flex; flex-direction: column; gap: 10px; }
.lb-sec { font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-4); margin-bottom: 2px; }
.lb-card { display: flex; align-items: center; gap: 14px; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 14px; }
.lb-av { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; flex-shrink: 0; }
.lb-main { flex: 1; min-width: 0; }
.lb-title { font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-sub { font-size: 0.78rem; color: var(--text-3); margin-top: 1px; }
.lb-urlrow { margin-top: 4px; }
.lb-url { font-size: 0.78rem; color: var(--primary); text-decoration: none; font-variant-numeric: tabular-nums; }
.lb-url:hover { text-decoration: underline; }
.lb-url.off { color: var(--text-4); }
.lb-badge { font-size: 0.64rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em; background: var(--bg-2); color: var(--text-4); border: 1px solid var(--border-2); }
.lb-badge.on { color: var(--accent-green); border-color: color-mix(in srgb, var(--accent-green) 45%, transparent); background: color-mix(in srgb, var(--accent-green) 12%, transparent); }
.lb-badge.off { color: var(--text-4); }
.lb-badge.pend { color: var(--accent-amber, #f59e0b); border-color: color-mix(in srgb, var(--accent-amber, #f59e0b) 45%, transparent); background: color-mix(in srgb, var(--accent-amber, #f59e0b) 12%, transparent); }
.lb-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* checklist da loja: barra, os seis passos e o proximo em um clique */
.lb-loja { align-items: flex-start; }
.lb-loja .lb-actions { align-self: center; }
.lb-check { margin-top: 10px; }
.lb-prog { height: 4px; border-radius: 2px; background: var(--bg-2); border: 1px solid var(--border-1); overflow: hidden; max-width: 420px; }
.lb-prog i { display: block; height: 100%; background: var(--accent-green); border-radius: 2px; transition: width .55s cubic-bezier(.2,.7,.2,1); }
.lb-passos { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.lb-passo { font-size: 0.74rem; color: var(--text-3); text-decoration: none; white-space: nowrap; transition: color .15s; }
.lb-passo:hover { color: var(--text-1); }
.lb-passo.ok { color: var(--accent-green); }
.lb-next { display: inline-block; margin-top: 8px; font-size: 0.8rem; font-weight: 700; color: var(--text-1); text-decoration: none;
  border: 1px solid var(--border-2); background: var(--bg-2); border-radius: 8px; padding: 6px 11px; transition: background .15s, border-color .15s; }
.lb-next:hover { border-color: var(--text-3); }
.lb-next.done { color: var(--accent-green); border-color: transparent; background: color-mix(in srgb, var(--accent-green) 10%, transparent); }
@media (max-width: 560px) { .lb-card { flex-wrap: wrap; } .lb-actions { width: 100%; } .lb-actions .btn { flex: 1; } }
.au-sub { font-size: 0.78rem; color: var(--text-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.au-meta { font-size: 0.72rem; color: var(--text-4); margin-top: 3px; }
.au-actions { display: flex; gap: 5px; flex-wrap: wrap; flex: none; }
.au-actions .btn { padding: 4px 10px; font-size: 0.75rem; }
@media (max-width: 640px) { .admin-user { flex-wrap: wrap; } .au-actions { width: 100%; } }
/* sessões ativas */
.au-sess { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-1); }
.au-sess:last-child { border-bottom: none; }
.aus-user { font-size: 0.86rem; font-weight: 600; } .aus-user .mut { color: var(--text-4); font-weight: 400; }
.aus-meta { font-size: 0.72rem; color: var(--text-4); margin-top: 2px; }
/* atividades */
.au-act { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border-1); }
.au-act:last-child { border-bottom: none; }
.aa-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--text-4); }
.aa-dot.new { background: var(--accent-green); } .aa-dot.del { background: var(--accent-red); }
.aa-desc { font-size: 0.82rem; } .aa-meta { font-size: 0.7rem; color: var(--text-4); margin-top: 1px; }
/* filtros da lista de clientes */
.cl-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; }
.cl-filters .filter-bar { margin: 0; }
.cl-flabel { font-size: 0.7rem; color: var(--text-4); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.cl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.filter-chip .cl-dot { vertical-align: middle; }

/* Renomear categoria + animação do painel de nova categoria */
.cat-edit { background: none; border: none; color: var(--text-4, #888); cursor: pointer; font-size: 0.82em; padding: 0 2px 0 6px; opacity: 0.7; }
.cat-edit:hover { opacity: 1; color: var(--primary); }
@keyframes catnewIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.catnew-inline { animation: catnewIn .18s ease; }
.modcard-foot { display: flex; gap: 8px; }

/* Tela de categorias — lista clara com acoes sempre visiveis */
@keyframes catRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.catlist { display: flex; flex-direction: column; gap: 8px; margin-top: 0.9rem; }
.catrow { border: 1px solid var(--border-1, rgba(255,255,255,0.09)); border-radius: 12px; overflow: hidden; background: var(--bg-1); animation: catRowIn .22s ease both; }
.catrow.open { border-color: var(--primary); }
.catrow-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.catrow-head:hover { background: var(--bg-2); }
.catrow-chev { display: inline-flex; transition: transform .15s; opacity: 0.55; flex: none; }
.catrow-chev.open { transform: rotate(90deg); }
.catrow-name { font-weight: 600; font-size: 0.92rem; }
.catrow-meta { font-size: 0.76rem; opacity: 0.55; }
.catrow-acts { margin-left: auto; display: flex; gap: 4px; flex: none; }
.cat-iconbtn { background: none; border: none; color: var(--text-3, #9aa); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex; align-items: center; }
.cat-iconbtn:hover { background: var(--bg-2); color: var(--text-1, #fff); }
.cat-iconbtn.danger:hover { background: color-mix(in srgb, var(--accent-red, #ef4444) 18%, transparent); color: var(--accent-red, #ef4444); }
.catrow-body { padding: 6px 14px 14px; border-top: 1px solid var(--border-1, var(--bg-2)); }
.cat-subadd { display: flex; gap: 8px; margin-top: 10px; }
.cat-subadd .form-input { flex: 1; }
.cat-empty { font-size: 0.8rem; opacity: 0.45; padding: 4px 2px; }

/* Categorias reformulada: cards com avatar de ícone/cor */
.catav { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; flex: none; line-height: 1; }
.catav-lg { width: 42px; height: 42px; border-radius: 11px; font-size: 1.28rem; }
.catcard { border: 1px solid var(--border-1); border-radius: 12px; overflow: hidden; background: var(--bg-1); animation: catRowIn .22s ease both; }
.catcard.open { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.catcard-head { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; }
.catcard-head:hover { background: var(--bg-2); }
.catcard-main { flex: 1; min-width: 0; }
.catcard-name { font-weight: 700; font-size: 0.94rem; color: var(--text-1); }
.catcard-meta { font-size: 0.76rem; color: var(--text-3); margin-top: 1px; }
.catcard-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.catcard-chev { display: inline-flex; color: var(--text-4); transition: transform .18s; margin-left: 2px; }
.catcard-chev.open { transform: rotate(90deg); }
.catcard-body { padding: 4px 14px 14px; border-top: 1px solid var(--border-1); }
.cat-sublist { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 4px; }
.cat-subrow { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 4px; border-radius: 8px; }
.cat-subrow:hover { background: var(--bg-2); }
.cat-subrow-nm { flex: 1; font-size: 0.86rem; color: var(--text-1); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-subrow-val { font-size: 0.78rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cat-iconbtn.sm { padding: 4px; }
.cat-addsub { margin-top: 4px; }
.caned-modal { max-width: 440px; }
.caned { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.caned-title { font-size: 1rem; font-weight: 700; color: var(--text-1); }
.caned-acts { display: flex; gap: 8px; margin-top: 2px; }

/* Tooltip com o nome de cada ícone no menu recolhido (rail).
   position:fixed no body (via JS) porque o rail tem overflow:hidden e cortaria um ::after. */
.rail-tip {
  position: fixed; transform: translateY(-50%) translateX(-4px);
  background: var(--bg-1, #17171b); color: var(--text-1, #fff);
  border: 1px solid var(--border-1, rgba(255,255,255,0.14));
  padding: 5px 10px; border-radius: 8px; font-size: 0.76rem; font-weight: 500; white-space: nowrap;
  z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.45); pointer-events: none;
  display: none;                      /* escondido por padrão (sem depender de transição de opacity) */
  transform: translateY(-50%) translateX(0);
}
.rail-tip.show { display: block; }

/* Cartões de crédito na tela central */
.cards-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1rem; }
.ccard { flex: 1 1 240px; min-width: 220px; border: 1px solid var(--border-1, rgba(255,255,255,0.12)); border-radius: 14px; padding: 14px 16px; background: var(--bg-1, rgba(255,255,255,0.02)); }
.ccard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ccard-name { font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 7px; }
.ccard-dot { width: 9px; height: 9px; border-radius: 3px; }
.ccard-due { font-size: 0.72rem; opacity: 0.55; }
.ccard-fatura { font-size: 0.82rem; opacity: 0.85; }
.ccard-fatura b { font-size: 1.05rem; font-weight: 700; margin-left: 4px; }
.ccard-bar { height: 6px; border-radius: 4px; background: var(--border-1, var(--border-1)); overflow: hidden; margin: 9px 0 5px; }
.ccard-bar > span { display: block; height: 100%; border-radius: 4px; }
.ccard-lim { font-size: 0.74rem; opacity: 0.65; }

/* Subcategorias com cores diferentes no seletor de categoria */
.subchip { border-color: color-mix(in srgb, var(--sc) 55%, transparent) !important; background: color-mix(in srgb, var(--sc) 12%, transparent) !important; }
.subchip:hover { border-color: var(--sc) !important; background: color-mix(in srgb, var(--sc) 20%, transparent) !important; }
.subchip.active { background: color-mix(in srgb, var(--sc) 30%, transparent) !important; border-color: var(--sc) !important; color: var(--text-1) !important; }
.subdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Etiquetas coloridas em eventos: bolinhas na agenda + badges no dashboard */
.wk-tagdots { display: inline-flex; gap: 3px; margin-left: auto; align-items: center; flex-shrink: 0; }
.wk-tagdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tag-badge { display: inline-flex; align-items: center; font-size: 0.68rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent);
  background: color-mix(in srgb, var(--sc) 12%, transparent); color: var(--text-2); }
.tag-badge .subdot { width: 6px; height: 6px; margin-right: 5px; }

/* Bolinha clicável pra trocar a cor da etiqueta no gerenciador */
.tag-dot-btn { width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; padding: 0; border: 1px solid rgba(0,0,0,0.15); cursor: pointer; flex-shrink: 0; transition: transform 0.12s ease; }
.tag-dot-btn:hover { transform: scale(1.25); }

/* Botão flutuante $ na Agenda — liga/desliga o financeiro */
.week-money-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 11px; border-radius: 999px; border: 1px solid var(--border-1); background: var(--bg-2); color: var(--text-2); cursor: pointer; box-shadow: var(--shadow-lg); font-size: 0.84rem; font-weight: 600; transition: transform .15s, border-color .15s, color .15s; }
.week-money-fab:hover { transform: translateY(-2px); }
.week-money-fab .wmf-ic { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--border-1); color: var(--text-2); font-weight: 800; }
.week-money-fab.on { border-color: var(--accent-green); color: var(--accent-green); }
.week-money-fab.on .wmf-ic { background: var(--accent-green); color: #fff; }
@media (max-width: 900px) { .week-money-fab { bottom: 82px; right: 16px; } }

/* Financeiro na agenda: escondido; revela ao passar o mouse no $ do dia, ou com o botão $ global ligado */
.week-item.money { display: none; }
.week-day.peek-money .week-item.money,
.week-grid.money-on .week-item.money { display: flex; }
/* símbolo $ no cabeçalho do dia */
.wd-coin { position: absolute; left: 6px; top: 8px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-1); background: var(--bg-1); color: var(--text-3); font-weight: 800; font-size: 0.72rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0.55; transition: opacity .12s, color .12s, background .12s; z-index: 2; }
.wd-coin:hover { opacity: 1; color: var(--accent-green); border-color: var(--accent-green); }
.week-day.peek-money .wd-coin, .week-grid.money-on .wd-coin { opacity: 1; color: var(--accent-green); }
.week-day-header { position: relative; }

/* ícone da transação na agenda + animação ao revelar o financeiro */
.wk-money-ic { font-size: 0.9rem; line-height: 1; margin-right: 5px; flex-shrink: 0; }
.week-grid.money-on .week-item.money { animation: moneyIn .3s cubic-bezier(.4,0,.2,1) both; }
@keyframes moneyIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
/* saída animada ao DESLIGAR o financeiro (a classe .money-leaving segura o display:flex enquanto a animação roda) */
.week-grid.money-on.money-leaving .week-item.money { animation: moneyOut .26s cubic-bezier(.4,0,.2,1) both; }
@keyframes moneyOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }

/* rodapé de cada dia: saldo do dia + resumo de tarefas */
.week-day-foot { padding: 7px 10px; border-top: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; margin-top: auto; }
.wdf-tasks { color: var(--text-3); }
.wdf-money { display: none; align-items: baseline; gap: 8px; }
.week-day.peek-money .wdf-money, .week-grid.money-on .wdf-money { display: flex; animation: moneyIn .3s ease both; }
.week-grid.money-on.money-leaving .wdf-money { animation: moneyOut .26s ease both; }
.wdf-net { font-weight: 800; font-variant-numeric: tabular-nums; }
.wdf-net.up { color: var(--accent-green); } .wdf-net.down { color: var(--accent-red); }
.wdf-spent { color: var(--text-4); font-size: 0.68rem; }

/* dois menus compactos da agenda (Visão / Ver) */
.agm-seg + .agm-seg { margin-left: 4px; }
.agm-seg .scope-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* notificador da transação (hover na agenda) */
.tx-preview { min-width: 220px; max-width: 300px; }
.txp-head { display: flex; align-items: flex-start; gap: 9px; }
.txp-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; background: var(--bg-2); }
.txp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.txp-desc { font-weight: 700; font-size: 0.88rem; color: var(--text-1); }
.txp-cat { font-size: 0.72rem; color: var(--text-3); }
.txp-val { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.9rem; flex-shrink: 0; }
.txp-val.income { color: var(--accent-green); } .txp-val.expense { color: var(--accent-red); }
.txp-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-1); font-size: 0.72rem; color: var(--text-3); align-items: center; }
.txp-meta .tp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.txp-paid.yes { color: var(--accent-green); } .txp-paid.no { color: var(--accent-amber); }

/* Agenda: coluna do dia selecionado expande + destaque
   (sem transição no grid-template-columns: o Chrome trava a interpolação de fr) */
.week-day { transition: box-shadow 0.15s ease; }
.week-day.selected { box-shadow: 0 0 0 2px var(--primary); border-radius: var(--radius-md); }

/* Painel inferior (dashboard da semana) */
.week-panel { margin-top: 0.9rem; border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--bg-1); overflow: hidden; }
.wp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-1); }
.wp-card { background: var(--bg-1); border: none; padding: 9px 8px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 3px; transition: background .12s; color: var(--text-2); }
.wp-card:hover { background: var(--bg-2); }
.wp-card.active { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.wp-card.today .wp-card-day b { color: var(--primary); }
.wp-card-day { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.75; }
.wp-card-day b { font-size: 0.95rem; }
.wp-card-tasks { font-size: 0.72rem; opacity: 0.7; }
.wp-card-money { font-size: 0.74rem; color: var(--accent-red); font-weight: 600; }
.wp-late { color: var(--accent-red); }
.wp-detail { padding: 14px 16px; }
.wp-detail-head { font-weight: 700; font-size: 0.92rem; margin-bottom: 10px; text-transform: capitalize; }
.wp-hint { font-weight: 400; font-size: 0.75rem; opacity: 0.55; text-transform: none; }
.wp-totals { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.wp-tot { display: flex; flex-direction: column; }
.wp-tot span { font-size: 0.7rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em; }
.wp-tot b { font-size: 1.2rem; }
.wp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .wp-cols { grid-template-columns: 1fr; } }
.wp-col-h { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; margin-bottom: 8px; }
.wp-task { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-1); cursor: pointer; font-size: 0.84rem; }
.wp-task:hover { opacity: 0.85; }
.wp-task.done { opacity: 0.55; text-decoration: line-through; }
.wp-task.projected { opacity: 0.6; border-bottom-style: dashed; }
.wp-task.projected .wp-task-tt { color: var(--text-3); }
.wp-task.projected .wp-task-meta { font-style: italic; }
.wp-task-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-4); }
.wp-task-dot.high { background: var(--accent-amber); }
.wp-task-tt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-task-meta { font-size: 0.72rem; opacity: 0.55; white-space: nowrap; }
.wp-ev { font-size: 0.82rem; padding: 6px 0; opacity: 0.85; }
.wp-fin { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 3px 0; }
.wp-txrow { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 4px 0; border-bottom: 1px solid var(--border-1); opacity: 0.9; }
.wp-empty { font-size: 0.8rem; opacity: 0.5; padding: 6px 0; }
.week-panel .up { color: var(--accent-green); font-weight: 600; }
.week-panel .down { color: var(--accent-red); font-weight: 600; }

/* Hábitos de hoje (Início) — linhas compactas com círculo de check */
.habit-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-1); border-radius: 12px; background: var(--bg-1); cursor: pointer; transition: background .15s, border-color .15s, transform .08s; }
.habit-row + .habit-row { margin-top: 8px; }
.habit-row:hover { border-color: color-mix(in srgb, var(--hc) 55%, var(--border-1)); }
.habit-row:active { transform: scale(0.995); }
.habit-row.done { border-color: color-mix(in srgb, var(--hc) 45%, transparent); background: color-mix(in srgb, var(--hc) 9%, transparent); }
.habit-check { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border-1); background: transparent; color: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.habit-check svg { width: 15px; height: 15px; }
.habit-check:hover { border-color: var(--hc); color: color-mix(in srgb, var(--hc) 55%, transparent); }
.habit-row.done .habit-check { background: var(--hc); border-color: var(--hc); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--hc) 40%, transparent); }
.habit-ic { font-size: 1.25rem; flex: none; line-height: 1; }
.habit-info { flex: 1; min-width: 0; }
.habit-nm { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-sub { font-size: 0.74rem; opacity: 0.62; margin-top: 1px; }
.habit-flame { font-weight: 700; }
.habit-done-tag { font-size: 0.72rem; font-weight: 700; color: var(--hc); flex: none; }

/* Hábitos de hoje (Início) — minimalista com barra de progresso */
.habit-min { padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.habit-min:hover { background: var(--bg-2); }
.habit-min + .habit-min { margin-top: 3px; }
.habit-min-top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.habit-min-ic { font-size: 1.02rem; line-height: 1; flex: none; }
.habit-min-nm { font-weight: 600; font-size: 0.88rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-min.done .habit-min-nm { opacity: 0.6; }
.habit-min-cnt { font-size: 0.74rem; opacity: 0.6; font-variant-numeric: tabular-nums; flex: none; }
.habit-min-streak { font-size: 0.74rem; font-weight: 700; color: var(--hc); flex: none; }
.habit-min-bar { height: 6px; border-radius: 4px; background: var(--border-1); overflow: hidden; }
.habit-min-fill { height: 100%; border-radius: 4px; background: var(--hc); transition: width .3s ease; }

/* Hábitos de hoje (Início) — anel de progresso */
.habit-ring { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.habit-ring:hover { background: var(--bg-2); }
.habit-ring + .habit-ring { margin-top: 3px; }
.hr-ring { position: relative; width: 36px; height: 36px; flex: none; }
.hr-ring svg { display: block; }
.hr-ring svg circle:last-child { transition: stroke-dasharray .35s ease; }
.hr-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hr-emoji { font-size: 0.9rem; line-height: 1; }
.hr-check { color: var(--hc); }
.hr-check svg { width: 15px; height: 15px; }
.hr-info { flex: 1; min-width: 0; }
.hr-nm { font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habit-ring.done .hr-nm { opacity: 0.72; }
.hr-sub { font-size: 0.73rem; opacity: 0.55; margin-top: 1px; }
.hr-streak { font-size: 0.76rem; font-weight: 700; color: var(--hc); flex: none; }

/* Tela pública de captação de cliente (/?cliente=TOKEN) */
.intake-screen { position: fixed; inset: 0; overflow-y: auto; background: var(--bg-0, var(--bg-1)); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; z-index: 200; }
.intake-card { width: 100%; max-width: 460px; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.3)); }
.intake-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.intake-badge { width: 44px; height: 44px; border-radius: 12px; color: #fff; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; flex: none; }
.intake-comp { font-size: 1.1rem; font-weight: 700; }
.intake-sub { font-size: 0.8rem; opacity: 0.6; }
.intake-card .form-label { display: block; margin: 12px 0 5px; font-size: 0.78rem; opacity: 0.85; }
.intake-submit { width: 100%; margin-top: 18px; background: var(--ic, var(--primary)); color: #fff; border: none; padding: 12px; font-weight: 600; border-radius: var(--radius-md); }
.intake-submit:disabled { opacity: 0.6; }
.intake-foot { text-align: center; font-size: 0.72rem; opacity: 0.5; margin-top: 12px; }
.intake-bad { text-align: center; padding: 30px 10px; font-weight: 600; }
.intake-bad span { font-weight: 400; font-size: 0.85rem; opacity: 0.6; }
.intake-done { text-align: center; padding: 26px 10px; }
.intake-check { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-green); color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.intake-done h3 { margin: 0 0 6px; }
.intake-done p { opacity: 0.65; font-size: 0.9rem; }

/* ============ Compras & Preços ============ */
/* Lista de compras */
.cmp-list { display: flex; flex-direction: column; gap: 8px; }
.cmp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); cursor: pointer; transition: border-color .12s, transform .12s; }
.cmp-row:hover { border-color: var(--text-4); transform: translateY(-1px); }
.cmp-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmp-row-est { font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.cmp-src { font-size: 0.62rem; font-weight: 700; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; background: var(--border-1); color: var(--text-2); }
.cmp-row-meta { font-size: 0.76rem; color: var(--text-3); }
.cmp-row-total { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap; }

/* Grid de preços (comparador) */
.pc-search { margin: -0.2rem 0 0.8rem; }
.pc-search .form-input { max-width: 320px; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pc-none { color: var(--text-4); font-size: 0.85rem; padding: 1rem; }
.pc-card { text-align: left; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .12s, transform .12s; }
.pc-card:hover { border-color: var(--text-4); transform: translateY(-1px); }
.pc-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pc-name { font-weight: 700; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-last { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-1); }
.pc-last small { font-weight: 600; color: var(--text-4); font-size: 0.72em; }
.pc-last.down { color: var(--accent-green); }
.pc-last.up { color: var(--accent-red); }
.pc-card-bot { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.74rem; color: var(--text-3); align-items: center; }
.pc-range b { color: var(--text-2); font-variant-numeric: tabular-nums; }
.pc-cheap { color: var(--accent-green); font-weight: 600; }

/* Modal do histórico de preço */
.pch-chart { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 8px 6px; }
.pch-svg { width: 100%; height: auto; display: block; }
.pch-line { fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.pch-area { fill: var(--primary); opacity: .08; }
.pch-grid { stroke: var(--border-1); stroke-width: 1; stroke-dasharray: 3 3; }
.pch-ylab, .pch-xlab { fill: var(--text-4); font-size: 11px; font-variant-numeric: tabular-nums; }
.pch-summary { font-size: 0.84rem; color: var(--text-2); margin: 12px 2px; line-height: 1.5; }
.pch-summary b.cheap { color: var(--accent-green); }
.pch-summary b.dear { color: var(--accent-red); }
.pch-table { display: flex; flex-direction: column; gap: 2px; }
.pch-row { display: grid; grid-template-columns: 66px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; font-size: 0.82rem; }
.pch-row:nth-child(odd) { background: var(--bg-1); }
.pch-row.cheap { background: var(--bg-1); box-shadow: inset 3px 0 0 var(--accent-green); }
.pch-row-date { color: var(--text-3); font-size: 0.76rem; }
.pch-row-est { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pch-row-price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap; }
.pch-row.cheap .pch-row-price { color: var(--accent-green); }

/* Formulário de compra */
.pf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-itlabel { display: block; margin: 6px 0; }
.pf-items { display: flex; flex-direction: column; gap: 6px; }
.pf-item { display: grid; grid-template-columns: 1fr 50px 52px 92px 118px auto; gap: 6px; align-items: center; }
.pf-item .form-input { padding: 8px 9px; }
.pf-i-cat { font-size: 0.78rem; min-width: 0; }
.pf-i-price { display: flex; align-items: center; gap: 4px; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 0 8px; }
.pf-i-price span { color: var(--text-4); font-size: 0.78rem; }
.pf-i-priceinp { border: none; background: transparent; color: var(--text-1); width: 100%; padding: 8px 0; font-variant-numeric: tabular-nums; outline: none; }
.pf-i-total { display: none; }
.pf-i-del { background: none; border: none; color: var(--text-4); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.pf-i-del:hover { color: var(--accent-red); background: var(--bg-1); }
.pf-additem { margin-top: 8px; }
.pf-total { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--border-1); font-size: 0.85rem; color: var(--text-3); }
.pf-total b { font-size: 1.15rem; color: var(--text-1); font-variant-numeric: tabular-nums; }
.pf-summary { margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 5px; }
.pf-sum-line { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.85rem; color: var(--text-3); }
.pf-sum-line > span:last-child, .pf-sum-line b { font-variant-numeric: tabular-nums; color: var(--text-2); }
.pf-sum-total { margin-top: 3px; padding-top: 7px; border-top: 1px dashed var(--border-1); color: var(--text-2); }
.pf-sum-total b { font-size: 1.2rem; color: var(--text-1); }
.pf-disc-wrap { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); }
.pf-disc-inp { width: 70px; text-align: right; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 6px; padding: 4px 6px; color: var(--text-1); font-variant-numeric: tabular-nums; font-size: 0.82rem; outline: none; }
.pv-total-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.pv-tl { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pv-tl .pv-disc { color: var(--accent-green); }
.pv-tl-total { margin-top: 3px; padding-top: 7px; border-top: 1px solid var(--border-1); color: var(--text-2); }
.pv-tl-total b { font-size: 1.2rem; color: var(--text-1); }

/* ============ Tela de Economia ============ */
.eco-hero { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 20px; text-align: center; margin-bottom: 1.1rem; }
.eco-hero-label { font-size: 0.76rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.eco-hero-value { font-size: 2.2rem; font-weight: 800; color: var(--accent-green); font-variant-numeric: tabular-nums; margin: 4px 0; line-height: 1.1; }
.eco-hero-sub { font-size: 0.82rem; color: var(--text-3); }
.eco-sec { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 1.3rem 0 .6rem; font-weight: 700; }
.eco-sec small { color: var(--text-4); font-weight: 600; }
.eco-opps, .eco-mkts { display: flex; flex-direction: column; gap: 8px; }
.eco-none { color: var(--text-4); font-size: 0.85rem; padding: 1rem; text-align: center; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); }
.eco-opp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); }
.eco-opp-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eco-opp-name { font-weight: 700; color: var(--text-1); }
.eco-opp-detail { font-size: 0.77rem; color: var(--text-3); }
.eco-opp-detail b.up { color: var(--accent-red); font-variant-numeric: tabular-nums; }
.eco-opp-detail b.down { color: var(--accent-green); font-variant-numeric: tabular-nums; }
.eco-opp-save { color: var(--accent-green); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.eco-opp-save small { display: block; font-size: 0.62rem; font-weight: 600; color: var(--text-4); }
.eco-mkt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); }
.eco-mkt-rank { font-weight: 800; color: var(--text-4); font-size: 0.9rem; width: 26px; flex-shrink: 0; }
.eco-mkt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.eco-mkt-name { font-weight: 700; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco-mkt-bar { height: 5px; background: var(--bg-1); border-radius: 3px; overflow: hidden; }
.eco-mkt-bar span { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.eco-mkt-stats { text-align: right; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; flex-shrink: 0; }
.eco-mkt-wins { font-size: 0.72rem; color: var(--accent-amber); font-weight: 700; }
.eco-mkt-spent { font-size: 0.8rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pf-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-2); margin: 6px 0 12px; cursor: pointer; }
.pf-check input { width: 16px; height: 16px; }

/* Detalhe da compra */
.pv-meta { font-size: 0.8rem; color: var(--text-3); margin-bottom: 12px; text-transform: capitalize; }
.pv-items { display: flex; flex-direction: column; }
.pv-item { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid var(--border-1); }
.pv-item-name { color: var(--text-1); font-weight: 600; }
.pv-item-qty { color: var(--text-4); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-item-total { font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: 0.85rem; color: var(--text-3); }
.pv-total b { font-size: 1.2rem; color: var(--text-1); font-variant-numeric: tabular-nums; }
.pv-del { color: var(--accent-red); }

/* Leitura de nota por IA: chip de cota + tela "lendo…" */
.cmp-aiquota { align-self: center; font-size: 0.72rem; color: var(--text-3); background: var(--bg-1); border: 1px solid var(--border-1); padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-reading-spin { width: 38px; height: 38px; margin: 0 auto 16px; border: 3px solid var(--border-1); border-top-color: var(--primary); border-radius: 50%; animation: aiSpin .8s linear infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ai-reading-title { font-weight: 700; color: var(--text-1); font-size: 1.05rem; }
.ai-reading-sub { color: var(--text-3); font-size: 0.83rem; margin-top: 5px; }

/* Modal de leitura por QR (NFC-e) */
.nfce-hint { font-size: 0.9rem; color: var(--text-2); line-height: 1.5; margin: 0 0 12px; }
.nfce-input { width: 100%; resize: vertical; font-size: 0.8rem; font-family: inherit; word-break: break-all; }
.nfce-note { font-size: 0.74rem; color: var(--text-4); margin: 8px 0 0; }
.pf-warn { font-size: 0.82rem; color: var(--accent-amber); background: var(--bg-1); border: 1px solid var(--accent-amber); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.nfce-scan-btn { width: 100%; justify-content: center; }
.nfce-or { text-align: center; color: var(--text-4); font-size: 0.76rem; margin: 12px 0 8px; }

/* Scanner de QR ao vivo */
.qr-scan-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-weight: 600; color: var(--text-1); font-size: 0.9rem; }
.qr-scan-x { background: none; border: none; color: var(--text-2); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.qr-video-wrap { position: relative; background: #000; width: 100%; aspect-ratio: 1 / 1; max-height: 62vh; overflow: hidden; }
.qr-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-frame { position: absolute; inset: 16%; border: 3px solid rgba(255,255,255,0.9); border-radius: 16px; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.35); pointer-events: none; }
.qr-scan-hint { text-align: center; padding: 14px 16px; color: var(--text-2); font-size: 0.85rem; }

/* Selo de origem da transação (veio de uma nota lida) */
.tx-src { display: inline-flex; align-items: center; gap: 3px; font-size: 0.62rem; font-weight: 700; letter-spacing: .02em; padding: 1px 6px; border-radius: 999px; margin-left: 8px; background: var(--border-1); color: var(--text-2); vertical-align: middle; white-space: nowrap; }
.tx-src.nfce { color: var(--accent-green); border: 1px solid var(--accent-green); background: transparent; }
.tx-src.ia { color: var(--primary); border: 1px solid var(--primary); background: transparent; }
.tx-src.pedido { color: var(--accent-amber, #d97706); border: 1px solid var(--accent-amber, #d97706); background: transparent; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

/* ---- Vínculo de transação com pedido (saída de empresa) ---- */
.tx-order-sec { animation: txOrderIn 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes txOrderIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tx-origseg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tx-orig {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 8px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-1); background: var(--bg-2);
  cursor: pointer; transition: all var(--transition); color: var(--text-3);
}
.tx-orig span { font-size: 0.9rem; font-weight: 700; color: var(--text-1); }
.tx-orig svg { opacity: 0.8; transition: opacity var(--transition); }
.tx-orig:hover { border-color: var(--border-2); }
.tx-orig.active { background: var(--text-1); border-color: var(--text-1); }
.tx-orig.active span { color: var(--bg-1); }
.tx-orig.active svg { opacity: 1; color: var(--bg-1); }
.tx-order-pick { margin-top: 10px; animation: txOrderIn 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
.tx-order-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--bg-2); color: var(--text-4); }
.tx-order-search-inp { flex: 1; border: 0; background: transparent; padding: 11px 0; font-size: 0.88rem; color: var(--text-1); outline: none; }
.tx-order-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 210px; overflow-y: auto; }
.tx-order-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-1); background: var(--bg-2); cursor: pointer;
  transition: all var(--transition); color: var(--text-1);
}
.tx-order-opt:hover { border-color: var(--border-2); }
.tx-order-opt.active { border-color: var(--text-1); background: color-mix(in srgb, var(--text-1) 8%, var(--bg-2)); }
.tx-order-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tx-order-opt-nm { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-order-opt-sub { font-size: 0.72rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-order-opt-ck { opacity: 0; flex-shrink: 0; color: var(--text-1); transition: opacity var(--transition); }
.tx-order-opt.active .tx-order-opt-ck { opacity: 1; }
.tx-order-empty { text-align: center; padding: 14px 8px; font-size: 0.82rem; color: var(--text-4); }

/* ---- Passo 1: Escopo (Pessoal / Empresa) ---- */
.tx-scopeseg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tx-scope {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 15px 8px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-1); background: var(--bg-2);
  cursor: pointer; transition: all var(--transition); color: var(--text-3);
}
.tx-scope span { font-size: 0.92rem; font-weight: 700; color: var(--text-1); }
.tx-scope svg { opacity: 0.8; transition: opacity var(--transition); }
.tx-scope:hover { border-color: var(--border-2); }
.tx-scope.active { background: var(--text-1); border-color: var(--text-1); }
.tx-scope.active span { color: var(--bg-1); }
.tx-scope.active svg { opacity: 1; color: var(--bg-1); }
.tx-colist { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; animation: txOrderIn 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
.tx-colist[hidden] { display: none; }   /* o display:flex acima sobrepõe o hidden padrão do HTML */
.tx-colist .form-label { margin-bottom: 2px; }
.tx-corow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-1); background: var(--bg-2); cursor: pointer;
  transition: all var(--transition); color: var(--text-1);
}
.tx-corow:hover { border-color: var(--border-2); }
.tx-corow.active { border-color: var(--text-1); background: color-mix(in srgb, var(--text-1) 8%, var(--bg-2)); }
.tx-corow-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.tx-corow-nm { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-corow-ck { opacity: 0; flex-shrink: 0; color: var(--text-1); transition: opacity var(--transition); }
.tx-corow.active .tx-corow-ck { opacity: 1; }

/* Chip de escopo no topo do modal */
.tx-scopechip-wrap:not(:empty) { padding: 4px 16px 0; }
.tx-scopechip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 4px 11px; font-size: 0.72rem; font-weight: 700; letter-spacing: .01em; }
.tx-scopechip-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--text-4); }
.tx-scopechip.pessoal { background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text-2); }
.tx-scopechip.empresa { background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary); }

/* Resumo de margem no detalhe do pedido */
.order-margin { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 4px; }
.order-margin-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-2); }
.order-margin-row .neg { color: var(--accent-red); }
.order-margin-row.total { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border-1); font-size: 0.95rem; font-weight: 700; color: var(--text-1); }
.order-margin-row.total .pos { color: var(--accent-green); }
.order-margin-row.total .neg { color: var(--accent-red); }

@media (max-width: 640px) {
  .pf-grid2 { grid-template-columns: 1fr; gap: 8px; }
  .pf-item { grid-template-columns: 52px 58px 1fr 32px; grid-template-areas: "nm nm nm nm" "qt un pr dl" "ct ct ct ct"; gap: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-1); }
  .pf-i-name { grid-area: nm; }
  .pf-i-qty { grid-area: qt; }
  .pf-i-unit { grid-area: un; }
  .pf-i-price { grid-area: pr; }
  .pf-i-cat { grid-area: ct; }
  .pf-i-del { grid-area: dl; justify-self: center; }
  .pc-grid { grid-template-columns: 1fr 1fr; }
}

/* Detalhe da compra: itens agrupados por categoria */
.pv-group { margin-bottom: 10px; }
.pv-group-head { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 2px 5px; border-bottom: 1px solid var(--border-1); font-size: 0.74rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.pv-group-head small { color: var(--text-4); font-weight: 600; }
.pv-group-sub { color: var(--text-1); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }

/* ══ Estoque: o livro de movimento ══════════════════════════════════════════
   Tudo com prefixo estq- de propósito. Nome de classe reaproveitado já quebrou
   layout aqui antes, e o detector não pega "mesmo nome, dois componentes". */
.estq-secao { font-size: 0.74rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin: 1.1rem 0 0.5rem; }

/* O que vai faltar: fica ANTES da tabela porque é o que faz alguém agir hoje */
.estq-alertas { margin-top: 1rem; }
.estq-alertas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.estq-alerta { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; padding: 9px 11px; background: var(--bg-1); border: 1px solid var(--border-1); border-left: 3px solid var(--accent-amber); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.estq-alerta:hover { background: var(--bg-2); border-color: var(--border-2); }
.estq-alerta-nome { flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estq-alerta-saldo { font-size: 0.74rem; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.estq-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
.estq-tag-zero { background: color-mix(in srgb, var(--accent-red) 14%, var(--bg-1)); color: var(--accent-red); }
.estq-tag-baixo { background: color-mix(in srgb, var(--accent-amber) 16%, var(--bg-1)); color: var(--primary-dark); }

/* A tabela de saldos */
.estq-busca { margin: 1rem 0 0.6rem; }
.estq-tabela { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.estq-cab, .estq-linha { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 110px 80px; align-items: center; gap: 10px; padding: 9px 14px; }
.estq-cab { font-size: 0.7rem; font-weight: 700; color: var(--text-4); text-transform: uppercase; letter-spacing: .04em; background: var(--bg-2); border-bottom: 1px solid var(--border-1); }
.estq-linha { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--border-1); cursor: pointer; font: inherit; color: var(--text-1); transition: background var(--transition); }
.estq-linha:first-of-type { border-top: 0; }
.estq-linha:hover { background: var(--bg-2); }
.estq-linha-zerado { box-shadow: inset 3px 0 0 var(--accent-red); }
.estq-linha-baixo { box-shadow: inset 3px 0 0 var(--accent-amber); }
.estq-prod { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.estq-nome { font-size: 0.87rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estq-meta { font-size: 0.72rem; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estq-n { text-align: right; font-size: 0.83rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.estq-saldo { font-weight: 700; color: var(--text-1); }
.estq-saldo em, .estq-mov-qtd em { font-style: normal; font-size: 0.72rem; color: var(--text-4); font-weight: 500; }
.estq-min { color: var(--text-4); }

/* O livro: cada linha é uma frase — quanto, o quê, por quê, e o saldo que ficou */
.estq-livro { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.estq-livro-ficha { margin-top: 2px; max-height: 42vh; overflow-y: auto; }
.estq-mov { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border-1); }
.estq-mov:first-child { border-top: 0; }
.estq-mov-qtd { text-align: right; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.estq-mov-qtd.pos { color: var(--accent-green); }
.estq-mov-qtd.neg { color: var(--accent-red); }
.estq-mov-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.estq-mov-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.estq-mov-tipo { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--bg-3); color: var(--text-2); }
.estq-t-entrada, .estq-t-devolucao { background: color-mix(in srgb, var(--accent-green) 15%, var(--bg-1)); color: var(--accent-green); }
.estq-t-saida { background: color-mix(in srgb, var(--accent-blue) 13%, var(--bg-1)); color: var(--accent-blue); }
.estq-t-perda { background: color-mix(in srgb, var(--accent-red) 14%, var(--bg-1)); color: var(--accent-red); }
.estq-t-inventario, .estq-t-ajuste { background: color-mix(in srgb, var(--accent-amber) 16%, var(--bg-1)); color: var(--primary-dark); }
.estq-mov-prod { font-size: 0.85rem; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estq-mov-org { font-size: 0.72rem; color: var(--text-4); }
.estq-mov-obs { font-size: 0.76rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estq-mov-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.estq-mov-saldo { font-size: 0.78rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.estq-mov-data { font-size: 0.7rem; color: var(--text-4); }

/* A ficha do produto, dentro do modal */
.estq-ficha-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding: 12px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); }
.estq-ficha-topo > div { display: flex; flex-direction: column; gap: 3px; }
.estq-ficha-lbl { font-size: 0.7rem; color: var(--text-4); text-transform: uppercase; letter-spacing: .03em; }
.estq-ficha-val { font-size: 1.05rem; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.estq-ficha-val em { font-style: normal; font-size: 0.75rem; color: var(--text-4); font-weight: 500; }
.estq-ficha-acoes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

/* Aviso do saldo futuro no formulário de movimento */
.estq-dica { margin-top: 8px; padding: 7px 10px; border-radius: var(--radius-md); background: var(--bg-2); color: var(--text-2); font-size: 0.78rem; }
.estq-dica-ruim { background: color-mix(in srgb, var(--accent-red) 10%, var(--bg-1)); color: var(--accent-red); font-weight: 600; }

/* Contagem */
.estq-conta-aviso { margin: 0.2rem 0 0.8rem; font-size: 0.8rem; color: var(--text-3); }
.estq-conta { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.estq-conta-linha { display: grid; grid-template-columns: minmax(0, 1fr) 130px 70px; gap: 10px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border-1); cursor: text; }
.estq-conta-linha:first-child { border-top: 0; }
.estq-conta-inp { text-align: right; font-variant-numeric: tabular-nums; }
.estq-conta-dif { text-align: right; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.estq-conta-dif.ok { color: var(--text-4); font-weight: 500; }
.estq-conta-dif.pos { color: var(--accent-green); }
.estq-conta-dif.neg { color: var(--accent-red); }
.estq-conta-rodape { display: flex; gap: 8px; margin-top: 12px; }
.estq-conta-rodape .form-input { flex: 1; }

@media (max-width: 720px) {
  /* No celular a tabela vira ficha: custo médio e mínimo saem da linha
     (moram na ficha), e o que fica é o que se lê de relance — nome e saldo. */
  .estq-cab { display: none; }
  .estq-linha { grid-template-columns: minmax(0, 1fr) auto; padding: 11px 12px; }
  .estq-linha .estq-n:not(.estq-saldo) { display: none; }
  .estq-mov { grid-template-columns: 76px minmax(0, 1fr); row-gap: 4px; }
  .estq-mov-dir { grid-column: 2; flex-direction: row; gap: 8px; align-items: baseline; }
  .estq-conta-linha { grid-template-columns: minmax(0, 1fr) 96px 54px; }
  .estq-conta-rodape { flex-direction: column; }
}

/* ══ TELA SERVIDOR ════════════════════════════════════════════════════
   Ela le a sentinela e desenha. As cores sao as semanticas que ja existem
   (--accent-green / --accent-red / --primary): estado de servidor e a mesma
   familia de "dinheiro que entra e que sai" — se le de relance ou nao serve. */
.sv-faixa { display: flex; gap: 14px; align-items: center; padding: 14px 18px;
  border-radius: 12px; border: 1px solid var(--border-1); background: var(--bg-1); }
.sv-faixa-boa { border-left: 4px solid var(--accent-green); }
.sv-faixa-ruim { border-left: 4px solid var(--accent-red); background: color-mix(in srgb, var(--accent-red) 6%, var(--bg-1)); }
.sv-faixa-t { font-size: .98rem; font-weight: 700; }
.sv-faixa-ruim .sv-faixa-t { color: var(--accent-red); }
.sv-faixa-s { font-size: .84rem; color: var(--text-2); margin-top: 2px; }

/* a idade da medida fica GRUDADA no titulo de proposito: verde sem ela e
   mentira esperando a vez, entao as duas informacoes andam juntas */
.sv-idade { font-size: .8rem; color: var(--text-2); background: var(--bg-1);
  border: 1px solid var(--border-1); padding: 7px 12px; border-radius: 999px;
  font-variant-numeric: tabular-nums; }
.sv-idade.velha { color: var(--accent-red); border-color: var(--accent-red);
  font-weight: 700; }

.sv-sub { font-size: .8rem; color: var(--text-3); }
.sv-tab { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sv-tab thead th { text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); font-weight: 700; padding: 10px 14px; }
.sv-tab tbody td { padding: 12px 14px; border-top: 1px solid var(--border-1); vertical-align: middle; }
.sv-linha-ruim { background: color-mix(in srgb, var(--accent-red) 5%, transparent); }
.sv-nome { font-weight: 600; }
.sv-dono { font-weight: 400; color: var(--text-3); }
.sv-end, .sv-motivo { font-size: .78rem; color: var(--text-3); }
.sv-num { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sv-porta { font-weight: 700; color: var(--text-1); }
.sv-ver { font-size: .74rem; background: var(--bg-2); border: 1px solid var(--border-1);
  padding: 2px 7px; border-radius: 6px; color: var(--text-2); }
.sv-sim { color: var(--accent-green); font-weight: 600; }
.sv-nao { color: var(--accent-red); font-weight: 700; }

.sv-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem;
  font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sv-chip i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.sv-ok { background: color-mix(in srgb, var(--accent-green) 12%, var(--bg-1)); color: var(--accent-green); }
.sv-ok i { background: var(--accent-green); }
.sv-dsv { background: var(--bg-2); color: var(--text-2); }
.sv-dsv i { background: var(--text-3); }
.sv-fora { background: color-mix(in srgb, var(--accent-red) 12%, var(--bg-1)); color: var(--accent-red); }
.sv-fora i { background: var(--accent-red); }
.sv-sem { background: color-mix(in srgb, var(--primary) 12%, var(--bg-1)); color: var(--primary-dark); }
.sv-sem i { background: var(--primary); }

.sv-incs { display: flex; flex-direction: column; gap: 2px; }
.sv-inc { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 12px;
  padding: 10px 0; border-top: 1px solid var(--border-1); }
.sv-inc:first-child { border-top: none; }
.sv-inc-t { grid-area: 1 / 1; font-size: .88rem; font-weight: 600; }
.sv-inc-s { grid-area: 2 / 1; font-size: .78rem; color: var(--text-3); }
.sv-inc-q { grid-area: 1 / 2 / span 2 / auto; align-self: center; font-size: .8rem;
  color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-inc.aberto .sv-inc-t { color: var(--accent-red); }

.sv-rodape { margin: 1rem 0 0; font-size: .78rem; color: var(--text-4); text-align: center; }

/* No celular o cabecalho aperta: o titulo, o carimbo de idade e o botao nao
   cabem na mesma linha, e o carimbo — que e metade do valor desta tela — saia
   para fora. Aqui ele passa para a linha de baixo, inteiro, em vez de sumir. */
@media (max-width: 560px) {
  .page-header:has(.sv-idade) { flex-direction: column; align-items: stretch; }
  .page-header:has(.sv-idade) > div:last-child { justify-content: space-between; }
  .sv-idade { flex-shrink: 0; }
}

@media (max-width: 720px) {
  .sv-tab thead { display: none; }
  .sv-tab tbody td { display: block; padding: 4px 14px; border-top: none; }
  .sv-tab tbody tr { display: block; border-top: 1px solid var(--border-1); padding: 10px 0; }
}

/* ===== Nova transacao: ferramentas, menus que dobram e a IA no campo =====
   (21/09/2026) A regra e uma so: CHEGAR numa tela abre as opcoes dela;
   ESCOLHER dobra o grupo e deixa a resposta com um "trocar" ao lado. Com
   mouse, passar por cima de um grupo dobrado ja revela -- no toque nao
   existe hover, entao o "trocar" e o caminho.                            */

.modal-tx {
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  overflow: hidden;
  /* duracao pura e curva separadas: juntar as duas num "animation:" com
     outra curva deixa duas timing-functions e o navegador joga a regra
     inteira fora, em silencio */
  --tx-t1: 260ms;
  --tx-t2: 420ms;
  --tx-e: cubic-bezier(.22, .61, .36, 1);
  --tx-r: var(--tx-t1) var(--tx-e);
  --tx-l: var(--tx-t2) var(--tx-e);
}
.modal-tx > .modal-header,
.modal-tx > .tx-scopechip-wrap { flex-shrink: 0; }
.modal-tx form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* so o miolo rola: o rodape fica onde a pessoa alcanca */
.tx-rolo { flex: 1; min-height: 0; overflow-y: auto; }
.tx-rolo > * { flex-shrink: 0; }
.modal-tx .modal-footer { flex-shrink: 0; }

/* --- as ferramentas do cabecalho --- */
.tx-head { gap: 10px; }
.tx-head .modal-title { flex: 1; min-width: 0; }
.tx-tools { display: flex; align-items: center; gap: 2px; background: var(--bg-2);
  border: 1px solid var(--border-1); border-radius: 10px; padding: 2px; }
.tx-tool { width: 30px; height: 30px; border-radius: 8px; border: none; background: none;
  color: var(--text-3); display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition); }
.tx-tool:hover { background: var(--bg-1); color: var(--text-1); }
.tx-tool:active { transform: scale(0.9); }
.tx-tool.active { background: var(--text-1); color: var(--bg-1); }
.tx-tool-n { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 8px; background: var(--accent-red); color: #fff;
  font-size: 0.58rem; font-weight: 800; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 0 0 2px var(--bg-2); }
.tx-tool.active .tx-tool-n { box-shadow: 0 0 0 2px var(--text-1); }
/* o display do autor vence o atributo hidden: sem esta linha a bolha
   aparece com "0" mesmo escondida */
.tx-tool-n[hidden] { display: none; }
.tx-toolsep { width: 1px; height: 20px; background: var(--border-1); flex-shrink: 0; }

/* --- o grupo que dobra --- */
.tx-dobra { margin-bottom: 0.85rem; }
.tx-lb { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tx-abrir { padding: 2px 8px; font-size: 0.72rem; display: none; }
.tx-dobra.dobrada .tx-abrir { display: inline-flex; }
.tx-gav { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--tx-l), opacity var(--tx-r); }
/* Recorte COM folga, sem mexer no layout.

   overflow-clip-margin manda o navegador cortar 6px DEPOIS da borda, em
   vez de exatamente nela. E a propriedade feita para isto.

   As duas tentativas anteriores erraram por caminhos opostos: folga nos
   quatro lados deixou o miolo 12px mais largo e nasceu barra horizontal;
   so na vertical, a folga ainda SOBRA para fora da gaveta e soma altura
   ao pai, e nasceu barra vertical. Aqui nada sobra: a caixa continua do
   tamanho do conteudo, e so o RECORTE e maior.

   Onde overflow-clip-margin nao existe (Safari antigo), "overflow: clip"
   corta na borda, como era antes -- perde-se a folga, nao o layout.   */
.tx-gav > div { overflow: clip; overflow-clip-margin: 6px; min-height: 0; }
.tx-gav.aberta { grid-template-rows: 1fr; opacity: 1; }
.tx-dobra > .tx-gav.todos { grid-template-rows: 1fr; opacity: 1; }
.tx-dobra > .tx-gav.um { grid-template-rows: 0fr; opacity: 0; }
.tx-dobra.dobrada > .tx-gav.todos { grid-template-rows: 0fr; opacity: 0; }
.tx-dobra.dobrada > .tx-gav.um { grid-template-rows: 1fr; opacity: 1; }
/* a gaveta da data escolhida a dedo mora dentro do grupo */
.tx-gav.calendario { margin-top: 0; transition: grid-template-rows var(--tx-l),
  opacity var(--tx-r), margin-top var(--tx-l); }
.tx-gav.calendario.aberta { margin-top: 8px; }
/* dobrado, o cartao do tipo perde a legenda e metade da altura -- mas
   guarda a cor, que e o que diz "dinheiro saindo" de relance */
.tx-dobra.dobrada .tx-type { flex-direction: row; gap: 8px; padding: 9px 12px; }
.tx-dobra.dobrada .tx-type small { display: none; }
.tx-dobra.dobrada .tx-type span { font-size: 0.88rem; }
.tx-um-cheio { display: grid; grid-template-columns: 1fr; }

/* --- o valor dobrado: a mesma caixa do .tx-amount, so que baixinha --- */
.tx-valorum { display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md);
  padding: 8px 14px; text-align: left; cursor: pointer;
  transition: border-color var(--transition); }
.tx-valorum .cur { font-size: 0.82rem; font-weight: 600; color: var(--text-4); }
.tx-valorum b { flex: 1; text-align: right; font-size: 1.25rem; font-weight: 800;
  letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.tx-valorum.expense b { color: var(--accent-red); }
.tx-valorum.income b { color: var(--accent-green); }

/* --- a barra de digitacao com a IA dentro --- */
.tx-campo { display: flex; align-items: center; gap: 6px; background: var(--bg-1);
  border: 1px solid var(--border-2); border-radius: var(--radius-md); padding-right: 6px;
  transition: border-color var(--transition), box-shadow var(--transition); }
.tx-campo:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24,24,27,0.05); }
.tx-campo .form-input { flex: 1; min-width: 0; border: none; background: none; }
.tx-campo .form-input:focus { border: none; box-shadow: none; }
.tx-ia { flex-shrink: 0; display: flex; align-items: center; }
.tx-ia-chip { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer;
  padding: 4px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; max-width: 190px;
  background: color-mix(in srgb, var(--accent-green) 13%, transparent);
  color: color-mix(in srgb, var(--accent-green) 80%, var(--text-1));
  animation: txia var(--tx-t2) cubic-bezier(.34, 1.56, .64, 1) both;
  transition: background var(--transition), transform var(--transition); }
.tx-ia-chip:hover { background: color-mix(in srgb, var(--accent-green) 22%, transparent); }
.tx-ia-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes txia { from { opacity: 0; transform: translateX(12px) scale(0.84); } }
.tx-ia-proc { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem;
  color: var(--text-4); padding: 4px 6px; }
.tx-fa { animation: txfaisca 1s ease-in-out infinite; transform-origin: center; }
@keyframes txfaisca { 0%, 100% { opacity: 0.3; transform: scale(0.88); }
                      50% { opacity: 1; transform: scale(1.15); } }
.tx-pts { display: inline-flex; gap: 3px; }
.tx-pts i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-4);
  animation: txpt 1s infinite; }
.tx-pts i:nth-child(2) { animation-delay: 0.15s; }
.tx-pts i:nth-child(3) { animation-delay: 0.3s; }
@keyframes txpt { 0%, 60%, 100% { opacity: 0.22; } 30% { opacity: 1; } }
.tx-iapq { font-size: 0.7rem; color: var(--text-4); margin-top: 5px; min-height: 16px;
  line-height: 1.35; }
.tx-iapq b { color: var(--text-2); font-weight: 600; }
/* a grafia boa que a IA oferece: tocar nela conserta o texto */
.tx-corrige { border: none; background: none; padding: 0 1px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--primary);
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--transition); }
.tx-corrige:hover { color: var(--primary-dark); }
.tx-iapq.nova { animation: txsobe var(--tx-r) both; }
@keyframes txsobe { from { opacity: 0; transform: translateY(4px); } }

/* --- a figurinha da categoria; a que a IA escolheu leva a faisca --- */
.tx-ic { position: relative; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0; }
.tx-ic .tx-ic-fa { position: absolute; right: -5px; bottom: -4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bg-1); display: flex; align-items: center;
  justify-content: center; color: var(--accent-green);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-green) 35%, transparent); }
.tx-ic .tx-ic-fa svg { width: 8px; height: 8px; animation: none; }

/* --- o passo entra de um lado e o velho sai pelo outro ---
   Os .wizstep continuam TODOS no formulario: se so o atual existisse,
   saveTransaction() nao acharia os campos dos outros. O que muda e que o
   que sai ganha .saindo e fica visivel, por cima, durante a troca.      */
.tx-trilho { position: relative; overflow: hidden; transition: height var(--tx-l); }
/* o wizfade do app tambem mexe em transform, e ANIMACAO vence TRANSICAO:
   enquanto ele rodava, a entrada do passo nao saia do lugar */
.modal-tx .wizstep.active { animation: none; }
.modal-tx .wizstep.saindo { display: block; position: absolute; inset: 0 0 auto 0; width: 100%; }
.modal-tx .wizstep.entra-dir { opacity: 0; transform: translateX(26px); }
.modal-tx .wizstep.entra-esq { opacity: 0; transform: translateX(-26px); }
.modal-tx .wizstep.anda { transition: opacity var(--tx-r), transform var(--tx-l); }
.modal-tx .wizstep.sai-dir { opacity: 0; transform: translateX(-26px); }
.modal-tx .wizstep.sai-esq { opacity: 0; transform: translateX(26px); }
.modal-tx .wizdot { transition: width var(--tx-l), background var(--tx-r); }

/* --- o mouse revela, e toda opcao reage --- */
@media (hover: hover) and (pointer: fine) {
  .tx-dobra.dobrada:hover > .tx-gav.todos { grid-template-rows: 1fr; opacity: 1; }
  .tx-dobra.dobrada:hover > .tx-gav.um { grid-template-rows: 0fr; opacity: 0; }
  .tx-dobra.dobrada:hover > .tx-gav { transition-delay: 0.15s; }
  .tx-dobra.dobrada > .tx-gav { transition-delay: 0s; }
  .modal-tx .tx-scope, .modal-tx .tx-type, .modal-tx .tx-corow, .modal-tx .chip,
  .tx-valorum, .modal-tx .tx-order-opt {
    transition: border-color var(--transition), background var(--transition),
                transform var(--transition), box-shadow var(--transition); }
  .modal-tx .tx-scope:hover, .modal-tx .tx-type:hover, .modal-tx .tx-corow:hover,
  .modal-tx .chip:hover, .tx-valorum:hover, .modal-tx .tx-order-opt:hover {
    border-color: var(--primary); transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(27, 24, 28, 0.08); }
  .modal-tx .selp-opt:hover { background: var(--bg-2); box-shadow: inset 2px 0 0 var(--primary); }
  /* forma de pagamento e conta usam o recolhimento que o app ja tem: o
     mouse por cima revela as outras, igual aos grupos que dobram */
  .modal-tx .picker-collapse.collapsed:hover > :not(.active) {
    max-width: 360px !important; opacity: 1; transform: none;
    margin: 0 6px 6px 0 !important; padding-left: 0.45rem !important;
    padding-right: 0.45rem !important; border-width: 1px !important;
    pointer-events: auto; transition-delay: .15s; }
  .modal-tx .acct-chips.picker-collapse.collapsed:hover > :not(.active) {
    margin: 0 8px 8px 0 !important; padding-left: 0.4rem !important;
    padding-right: 0.7rem !important; }
  .modal-tx .picker-collapse.collapsed:hover > .active::after { opacity: 0; }
}

/* --- a tela de arrumar categorias --- */
.arr-grupo { display: flex; flex-direction: column; gap: 1px; background: var(--border-1);
  border: 1px solid var(--border-1); border-radius: var(--radius-md); overflow: hidden; }
.arr-linha { display: flex; align-items: center; gap: 11px; background: var(--bg-1);
  padding: 10px 13px; cursor: pointer; transition: background var(--transition); }
.arr-linha:hover { background: var(--bg-2); }
.arr-ck { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--primary); }
.arr-tx { flex: 1; min-width: 0; }
.arr-tx b { display: block; font-size: 0.85rem; font-weight: 600; }
.arr-tx small { display: block; font-size: 0.7rem; color: var(--text-4); line-height: 1.35; }
.arr-marca { flex-shrink: 0; font-size: 0.72rem; color: var(--text-3);
  font-variant-numeric: tabular-nums; }
.arr-destino { flex-shrink: 0; max-width: 210px; font-size: 0.78rem; padding: 5px 8px; }
@media (max-width: 560px) {
  .arr-linha { flex-wrap: wrap; }
  .arr-destino { max-width: 100%; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-trilho, .tx-cena.anda, .tx-gav, .modal-tx .wizdot { transition: none; }
  .tx-ia-chip, .tx-fa, .tx-pts i, .tx-iapq.nova { animation: none; }
}

/* ═══ Ler a nota: a escolha, o buraco negro e o visor ═══
   A poeira e canvas por cima do overlay; o modal e DOM. Os dois andam
   juntos: o modal encolhe e gira enquanto os pontos caem, e cresce de novo
   quando o nucleo abre. So as cores do sistema entram na poeira. */
/* width/height explicitos: canvas e elemento SUBSTITUIDO -- com `inset:0`
   e width:auto ele desenha no tamanho do BITMAP (o dobro, num monitor
   retina) e a poeira cai fora da tela. */
.nota-po { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 140;
  pointer-events: none; }
/* o desfoque do overlay sai de cena durante a animacao: refazer um
   backdrop-filter a cada quadro, por baixo de um canvas de tela cheia,
   e dos gastos mais caros que existem no celular */
.modal-overlay.nota-anima { backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal.nota-colapso { animation: none; will-change: transform; transform-origin: 50% 50%; }

.nota-cab { display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 18px 10px; gap: 12px; }
.nota-cab h3 { margin: 0; font-size: 1rem; letter-spacing: -.2px; }
.nota-cab p { margin: 3px 0 0; font-size: 0.75rem; color: var(--text-3); line-height: 1.45; }
.nota-x { width: 26px; height: 26px; border-radius: var(--radius-sm); display: flex;
  align-items: center; justify-content: center; color: var(--text-3); font-size: 1.3rem;
  line-height: 1; flex-shrink: 0; transition: all var(--transition); }
.nota-x:hover { background: var(--bg-2); color: var(--text-1); }

.nota-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 18px 0; }
.nota-tile { position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: 18px 14px 15px; text-align: left; min-height: 158px; display: flex;
  flex-direction: column; justify-content: space-between; border: 1px solid transparent;
  color: #fff; transition: transform .22s cubic-bezier(.34,1.3,.5,1), box-shadow .22s ease; }
/* Os dois ladrilhos saem dos TOKENS, nao de hex fixo: no tema escuro o
   --text-1 e claro, entao o ladrilho do QR inverte junto com o resto do app
   (e a poeira, que le os mesmos tokens, continua batendo com ele). */
.nota-tile.qr { color: var(--bg-1);
  background: linear-gradient(155deg, color-mix(in srgb, var(--text-1) 88%, var(--bg-1)), var(--text-1)); }
.nota-tile.fo { color: #fff;
  background: linear-gradient(155deg, var(--primary-light), var(--primary-dark)); }
:root:is([data-app-theme="vidro"],[data-app-theme="min"],[data-app-theme="vivid"]) .nota-tile.fo { color: #18181b; }
.nota-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.nota-tile:active { transform: translateY(-1px) scale(.985); }
.nota-tile-ic { width: 40px; height: 40px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, currentColor 16%, transparent); }
.nota-tile b { display: block; font-size: 0.95rem; margin-top: 12px; }
.nota-tile small { display: block; font-size: 0.7rem; line-height: 1.4; margin-top: 3px;
  color: color-mix(in srgb, currentColor 80%, transparent); }
.nota-onda { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, currentColor 55%, transparent), transparent 58%); }
.nota-tile.bate .nota-onda { animation: notaOnda .42s ease-out; }
@keyframes notaOnda { 0% { opacity: .85; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.5); } }

.nota-rodape { display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px 15px; font-size: 0.7rem; color: var(--text-4); }
.nota-rodape button { font-size: 0.7rem; color: var(--text-2); text-decoration: underline;
  text-underline-offset: 2px; }
.nota-rodape button:hover { color: var(--primary); }

/* o visor: a camera de verdade, com mira e varredura */
.nota-visor { position: relative; }
.nota-mira { position: absolute; inset: 19%; border-radius: 16px; pointer-events: none; }
/* O escuro em volta da mira em QUATRO RETANGULOS, e nao num
   `box-shadow: 0 0 0 100vmax`: aquela sombra e uma area de pintura do
   tamanho de duas telas, que o navegador refaz a cada passo da escala
   enquanto o modal cresce -- e que estoura o limite de textura da camada,
   o que aparece como a moldura cortada. */
.nota-escuro { position: absolute; inset: 0; pointer-events: none; }
.nota-escuro i { position: absolute; background: rgba(8,6,10,.52); }
.nota-escuro i:nth-child(1) { left: 0; right: 0; top: 0; height: 19%; }
.nota-escuro i:nth-child(2) { left: 0; right: 0; bottom: 0; height: 19%; }
.nota-escuro i:nth-child(3) { top: 19%; bottom: 19%; left: 0; width: 19%; }
.nota-escuro i:nth-child(4) { top: 19%; bottom: 19%; right: 0; width: 19%; }
.nota-mira i { position: absolute; width: 26px; height: 26px; border: 3px solid var(--primary);
  border-radius: 6px; }
.nota-mira i:nth-child(1) { left: -3px; top: -3px; border-right: none; border-bottom: none;
  border-top-left-radius: 12px; }
.nota-mira i:nth-child(2) { right: -3px; top: -3px; border-left: none; border-bottom: none;
  border-top-right-radius: 12px; }
.nota-mira i:nth-child(3) { left: -3px; bottom: -3px; border-right: none; border-top: none;
  border-bottom-left-radius: 12px; }
.nota-mira i:nth-child(4) { right: -3px; bottom: -3px; border-left: none; border-top: none;
  border-bottom-right-radius: 12px; }
.nota-mira.achou i { border-color: var(--accent-green); }
.nota-mira.achou { animation: notaTrava .4s cubic-bezier(.34,1.5,.5,1); }
/* em transform, nao em inset: mexer no inset recalcula layout 60 vezes por
   segundo e ainda desencontra a mira do escuro que a cerca */
@keyframes notaTrava { 0%,100% { transform: scale(1); } 55% { transform: scale(.93); } }
.nota-varre { position: absolute; left: 19%; right: 19%; height: 2px; top: 19%;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: 0 0 16px 3px color-mix(in srgb, var(--primary) 60%, transparent);
  animation: notaVarre 1.9s cubic-bezier(.45,0,.55,1) infinite; pointer-events: none; }
@keyframes notaVarre { 0%,100% { top: 20%; } 50% { top: 79%; } }
.nota-topo { position: absolute; left: 0; right: 0; top: 0; display: flex;
  justify-content: space-between; align-items: center; padding: 12px 14px; z-index: 3;
  color: rgba(255,255,255,.9); font-size: 0.76rem; font-weight: 600; }
.nota-topo button { color: rgba(255,255,255,.78); font-size: 1.4rem; line-height: 1;
  width: 28px; height: 28px; border-radius: 6px; background: rgba(0,0,0,.35); }
.nota-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: var(--bg-1); border-top: 1px solid var(--border-1); }
.nota-pe .dica { font-size: 0.78rem; color: var(--text-2); display: flex; align-items: center;
  gap: 8px; min-width: 0; }
.nota-pe .dica span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-pisca { width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  animation: notaPisca 1.1s ease-in-out infinite; flex-shrink: 0; }
.nota-pisca.ok { background: var(--accent-green); animation: none; }
@keyframes notaPisca { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* a tela que o buraco abre quando a escolha foi a foto */
.nota-quadro { position: relative; width: 100%; aspect-ratio: 1/1; max-height: 62vh;
  background: #0c0a0e; overflow: hidden; display: flex; align-items: center;
  justify-content: center; }
.nota-foco-in { position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 7px; color: rgba(255,255,255,.92); text-align: center;
  padding: 0 18px; }
.nota-foco-in b { font-size: 0.95rem; }
.nota-foco-in small { font-size: 0.74rem; color: rgba(255,255,255,.6); line-height: 1.45; }
.nota-foco-in svg { width: 30px; height: 30px; opacity: .85; }

/* a foto da lista sendo lida: a propria foto, com a faixa passando */
.nota-foto { position: relative; background: #121016; overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 240px;
  max-height: 58vh; }
.nota-foto img { display: block; max-width: 100%; max-height: 58vh; object-fit: contain; }
.nota-scan { position: absolute; left: 0; right: 0; height: 64px; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary) 26%, transparent) 78%, var(--primary));
  border-bottom: 2px solid var(--primary);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--primary) 45%, transparent);
  animation: notaScan 2.1s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes notaScan { 0% { top: -64px; } 100% { top: 100%; } }
.nota-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
  z-index: 4; }
.nota-flash.on { animation: notaFlash .42s ease-out; }
@keyframes notaFlash { 0% { opacity: .9; } 100% { opacity: 0; } }

@media (max-width: 420px) {
  .nota-tiles { grid-template-columns: 1fr; }
  .nota-tile { min-height: 0; flex-direction: row; align-items: center; gap: 12px;
    padding: 13px 14px; }
  .nota-tile b { margin-top: 0; }
  .nota-tile-ic { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .nota-varre, .nota-pisca, .nota-scan { animation: none; }
  .nota-varre { top: 49%; }
}