/* Estilos globais — paleta dark estilo Dashdark/Nubank
   ink-950 #0a0a0a · ink-900 #0d0d12 (bg) · ink-800 #15151c (cards)
   ink-700 #1f1f29 (borders/hover) · ink-600 #2a2a36 (soft) · ink-500 #3a3a48
   accent #820ad1 · accent-pink #d946ef · cyan2 #22d3ee · muted #9ca3af */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* ===== Toggle switch ===== */
.toggle-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  height: 38px;
}
.toggle-wrap input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  width: 36px; height: 20px;
  background: #2a2a36;
  border-radius: 12px;
  position: relative;
  transition: background 160ms;
  flex-shrink: 0;
}
.toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #cbd5e1;
  border-radius: 50%;
  transition: transform 160ms, background 160ms;
}
.toggle-wrap input:checked + .toggle-track {
  background: #a855f7;
}
.toggle-wrap input:checked + .toggle-track .toggle-thumb {
  transform: translateX(16px);
  background: #fff;
}
.toggle-label {
  font-size: 0.85rem;
  color: #e5e5e5;
}

/* ===== Titlebar customizada ===== */
#titlebar {
  height: 32px;
  background: #0a0a0a;
  border-bottom: 1px solid #1f1f29;
  display: flex; align-items: stretch;
  -webkit-app-region: drag;
  user-select: none;
  position: relative;
  z-index: 60;
}
.tb-drag {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  min-width: 0;
  -webkit-app-region: drag;
}
.tb-icon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.tb-title {
  font-size: 11px; color: #cbd5e1; font-weight: 500;
  letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-controls {
  display: flex; align-items: stretch;
  -webkit-app-region: no-drag;
}
.tb-btn {
  width: 46px; height: 32px;
  background: transparent; border: none;
  color: #cbd5e1; font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 100ms, color 100ms;
}
.tb-btn:hover { background: #1f1f29; color: #fff; }
.tb-btn-close:hover { background: #e81123; color: #fff; }
#tb-max-icon { font-size: 12px; line-height: 1; display: inline-block; }
#tb-max-icon.maximizado { font-size: 11px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a36; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a48; }

/* ------- Inputs ------- */
.input, .select, .textarea {
  width: 100%;
  background: #15151c;
  border: 1px solid #1f1f29;
  color: #ffffff;
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 180ms, box-shadow 180ms, background 180ms;
}
.input::placeholder, .textarea::placeholder { color: #6b7280; }
.input:hover, .select:hover, .textarea:hover { border-color: #2a2a36; }
.input:focus, .select:focus, .textarea:focus {
  border-color: #820ad1;
  background: #1a1a22;
  box-shadow: 0 0 0 3px rgba(130,10,209,0.12);
}
.label { display:block; font-size: 0.7rem; color:#9ca3af; margin-bottom: 0.35rem; font-weight: 500; letter-spacing: 0.01em; }

/* Olho na senha: o wrapper nasce em lib/ui.js (ativarOlhoSenha), não no HTML */
.campo-senha { position: relative; }
.campo-senha .input { padding-right: 2.5rem; }
.olho-senha {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  outline: none;
  transition: color 150ms, background 150ms, box-shadow 150ms;
}
.olho-senha:hover { color: #ffffff; background: rgba(255,255,255,0.06); }
.olho-senha:focus-visible {
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(130,10,209,0.12);
}

/* Search da sidebar */
.search-wrap { position: relative; }
.search-input {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #1f1f29;
  color: #e5e5e5;
  padding: 0.45rem 0.65rem 0.45rem 2rem;
  font-size: 0.78rem;
  border-radius: 0.55rem;
  outline: none;
  transition: border-color 180ms;
}
.search-input::placeholder { color: #6b7280; }
.search-input:focus { border-color: #820ad1; }
.search-wrap::before {
  content: '🔍';
  position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%);
  font-size: 0.65rem; opacity: 0.5; pointer-events: none;
}

/* ------- Buttons ------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 0.55rem;
  font-size: 0.8rem; font-weight: 500;
  transition: all 180ms;
  cursor: pointer; border: 0;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: #820ad1; color: white;
  box-shadow: 0 4px 14px rgba(130,10,209,0.3);
}
.btn-primary:hover {
  background: #9333ea;
  box-shadow: 0 6px 20px rgba(130,10,209,0.45);
  transform: translateY(-1px);
}
.btn-grad {
  background: linear-gradient(135deg, #d946ef 0%, #820ad1 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(217,70,239,0.3);
}
.btn-grad:hover {
  box-shadow: 0 6px 22px rgba(217,70,239,0.5);
  transform: translateY(-1px);
}
.btn-ghost { background:transparent; color:#9ca3af; }
.btn-ghost:hover { background:#15151c; color:#fff; }

/* Botões de ação na tabela de lançamentos — ícone + label sempre visível */
.btn-acao {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  min-width: 56px;
  background: #15151c;
  border: 1px solid #1f1f29;
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 140ms;
  line-height: 1;
}
.btn-acao:hover { background: #1f1f29; border-color: #2a2a36; color:#fff; transform: translateY(-1px); }
.btn-acao-icon { font-size: 0.95rem; line-height: 1; }
.btn-acao-label { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.01em; opacity: 0.85; }
.btn-acao-ok { color:#22c55e; border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.08); }
.btn-acao-ok:hover { background: rgba(34,197,94,0.15); color:#4ade80; border-color: rgba(34,197,94,0.5); }
.btn-acao-danger { color:#fca5a5; }
.btn-acao-danger:hover { background: rgba(239,68,68,0.12); color:#fecaca; border-color: rgba(239,68,68,0.3); }

/* Botão "trigger" pra menu de ações (⋮) */
.btn-menu-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #94a3b8; font-size: 1.1rem; cursor: pointer;
  transition: all 120ms;
}
.btn-menu-trigger:hover { background: #1f1f29; border-color: #2a2a36; color:#fff; }

/* Dropdown menu de ações */
.menu-acoes {
  position: fixed;
  background: #15151c;
  border: 1px solid #2a2a36;
  border-radius: 10px;
  padding: 4px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 100;
  display: flex; flex-direction: column;
}
.menu-acoes .menu-item {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none;
  color: #cbd5e1; font-size: 0.82rem;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: left; cursor: pointer;
  transition: background 100ms, color 100ms;
}
.menu-acoes .menu-item:hover { background: #1f1f29; color:#fff; }
.menu-acoes .menu-item-danger { color: #fca5a5; }
.menu-acoes .menu-item-danger:hover { background: rgba(239,68,68,0.12); color: #fecaca; }
.menu-acoes .menu-icon { width: 16px; text-align: center; opacity: 0.85; }
.menu-acoes .menu-sep { height: 1px; background: #1f1f29; margin: 4px 6px; }

/* ===== Changelog modal ===== */
.changelog-modal {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 60px);
  min-height: 0;
}
.changelog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #1f1f29;
  background: linear-gradient(180deg, rgba(168,85,247,0.08), transparent);
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}
.changelog-close {
  background: transparent; border: none;
  color: #94a3b8; font-size: 1.4rem; cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 6px;
  transition: background 120ms, color 120ms;
}
.changelog-close:hover { background: #1f1f29; color: #fff; }

.changelog-body {
  max-height: calc(100vh - 200px);  /* fallback explícito caso o flex chain falhe */
  overflow-y: auto;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
  /* Scrollbar mais visível pra deixar claro que dá pra rolar */
  scrollbar-width: thin;
  scrollbar-color: #3a3a48 #15151c;
}
.changelog-body::-webkit-scrollbar { width: 10px; }
.changelog-body::-webkit-scrollbar-track { background: #0d0d12; border-radius: 8px; }
.changelog-body::-webkit-scrollbar-thumb { background: #3a3a48; border-radius: 8px; border: 2px solid #0d0d12; }
.changelog-body::-webkit-scrollbar-thumb:hover { background: #4b5563; }

.cl-item {
  background: #15151c;
  border: 1px solid #1f1f29;
  border-radius: 10px;
  transition: border-color 140ms;
}
.cl-item:hover { border-color: #2a2a36; }

.cl-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent; border: none;
  color: #e5e5e5; cursor: pointer;
  font-size: 0.82rem;
  text-align: left;
}
.cl-versao {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  background: #0d0d12;
  border: 1px solid #2a2a36;
  padding: 2px 8px;
  border-radius: 4px;
  color: #cbd5e1;
}
.cl-badge-atual {
  font-size: 0.65rem;
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.3);
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
}
.cl-titulo { flex: 1; min-width: 0; font-weight: 500; }
.cl-data { font-family: ui-monospace, monospace; font-size: 0.7rem; color: #6b7280; }
.cl-arrow {
  color: #6b7280; font-size: 0.85rem;
  transition: transform 180ms;
}
.cl-item.aberto .cl-arrow { transform: rotate(180deg); }

.cl-body {
  display: none;
  padding: 6px 14px 14px;
  border-top: 1px solid #1f1f29;
  max-height: 320px;       /* limita a altura visível por versão */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a3a48 transparent;
}
.cl-body::-webkit-scrollbar { width: 8px; }
.cl-body::-webkit-scrollbar-thumb { background: #3a3a48; border-radius: 6px; }
.cl-body::-webkit-scrollbar-thumb:hover { background: #4b5563; }
.cl-item.aberto .cl-body { display: block; }

.cl-secao {
  border-left: 3px solid #2a2a36;
  padding: 6px 0 6px 12px;
  margin-top: 10px;
}
.cl-secao-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.cl-lista {
  margin: 0; padding-left: 16px;
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.45;
  list-style: disc;
}
.cl-lista li { margin: 4px 0; }
.cl-lista li::marker { color: #6b7280; }

.changelog-footer {
  display: flex; justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid #1f1f29;
  background: #0d0d12;
  border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
}

/* ====== Date Range Picker ====== */
.drp-wrap { position: relative; display: inline-block; width: 100%; }
.drp-button {
  width: 100%;
  display: flex; align-items: center; gap: 0.5rem;
  background: #15151c;
  border: 1px solid #1f1f29;
  color: #e5e5e5;
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 180ms, background 180ms;
}
.drp-button:hover { border-color: #2a2a36; background: #1a1a22; }
.drp-button .drp-label { flex: 1; text-align: left; }
.drp-button .drp-icon { opacity: 0.7; font-size: 0.9rem; }
.drp-button .drp-arrow { color:#6b7280; font-size: 0.8rem; }

.drp-popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  background: #15151c;
  border: 1px solid #2a2a36;
  border-radius: 0.85rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  display: grid;
  grid-template-columns: 160px 1fr;
  min-width: 600px;
  overflow: hidden;
}
.drp-popover.hidden { display: none; }

.drp-presets {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 8px;
  background: #0d0d12;
  border-right: 1px solid #1f1f29;
}
.drp-preset {
  text-align: left;
  background: transparent; border: none;
  color: #cbd5e1; font-size: 0.78rem;
  padding: 7px 10px;
  border-radius: 6px; cursor: pointer;
  transition: background 120ms, color 120ms;
}
.drp-preset:hover { background: #1f1f29; color: #fff; }
.drp-preset.ativo { background: rgba(168,85,247,0.18); color: #c084fc; }
.drp-preset.drp-clear { color: #6b7280; margin-top: auto; font-size: 0.72rem; }

.drp-cals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding: 12px;
}
.drp-cal { padding: 0 8px; }
.drp-cal + .drp-cal { border-left: 1px solid #1f1f29; }
.drp-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 8px;
}
.drp-cal-titulo { font-size: 0.85rem; font-weight: 600; color: #fff; }
.drp-cal-header button {
  background: transparent; border: none; color: #cbd5e1; cursor: pointer;
  width: 24px; height: 24px; border-radius: 6px; font-size: 1rem;
}
.drp-cal-header button:hover { background: #1f1f29; color:#fff; }

.drp-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 0.65rem; color: #6b7280; text-align: center;
  padding-bottom: 4px; border-bottom: 1px solid #1f1f29;
}
.drp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; padding-top: 4px;
}
.drp-day {
  aspect-ratio: 1;
  background: transparent; border: none;
  color: #cbd5e1; font-size: 0.74rem; cursor: pointer;
  border-radius: 6px;
  transition: background 100ms, color 100ms;
}
.drp-day:hover { background: #1f1f29; color: #fff; }
.drp-day.outro { color: #4b5563; cursor: default; pointer-events: none; }
.drp-day.range { background: rgba(168,85,247,0.15); color: #e5e5e5; border-radius: 0; }
.drp-day.range.start { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.drp-day.range.end   { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.drp-day.start, .drp-day.end {
  background: #a855f7 !important; color: #fff !important; font-weight: 600;
  border-radius: 6px !important;
}
.drp-day.hover-range { background: rgba(168,85,247,0.08); }

.drp-footer {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid #1f1f29;
  background: #0d0d12;
}
.drp-resumo { font-size: 0.78rem; color: #cbd5e1; }
.drp-acoes { display: flex; gap: 8px; }
.btn-danger {
  background:rgba(239,68,68,0.12);
  color:#fca5a5;
  border: 1px solid rgba(239,68,68,0.25);
}
.btn-danger:hover {
  background:rgba(239,68,68,0.22);
  color:#fff;
  border-color: rgba(239,68,68,0.5);
}
.btn-soft {
  background:#1f1f29;
  color:#e5e5e5;
  border: 1px solid #2a2a36;
}
.btn-soft:hover { background:#2a2a36; border-color:#3a3a48; color:#fff; }

/* ------- Cards (com leve gradient) ------- */
.card {
  background: linear-gradient(180deg, #15151c 0%, #121218 100%);
  border: 1px solid #1f1f29;
  border-radius: 0.85rem;
  transition: border-color 200ms, transform 200ms;
}
.card-hover:hover { border-color: rgba(130,10,209,0.4); }

/* ------- Tables ------- */
.table { width:100%; border-collapse: separate; border-spacing: 0; }
.table th {
  text-align: left; font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #6b7280; font-weight: 500;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid #1f1f29;
  border-right: 1px solid #1a1a22;
  background:#0d0d12;
  position: sticky; top: 0; z-index: 5;
  box-shadow: 0 1px 0 #1f1f29;
}
.table th:last-child { border-right: none; }
.table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #15151c;
  border-right: 1px solid #1a1a22;
  font-size: 0.8125rem;
  color: #e5e5e5;
}
.table td:last-child { border-right: none; }
.table tr { transition: background 120ms; }
.table tr:hover td { background: #15151c; }
.table tr:last-child td { border-bottom: none; }

/* Linhas com destaque por tipo (entrada/saída) — gradient na linha inteira */
.table tr.row-up   { background: linear-gradient(90deg, rgba(34,197,94,0.14) 0%, transparent 55%); }
.table tr.row-down { background: linear-gradient(90deg, rgba(239,68,68,0.14) 0%, transparent 55%); }
.table tr.row-up td,
.table tr.row-down td { background: transparent; }
.table tr.row-up   td:first-child { box-shadow: inset 3px 0 0 #22c55e; }
.table tr.row-down td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.table tr.row-up:hover   { background: linear-gradient(90deg, rgba(34,197,94,0.22) 0%, transparent 55%); }
.table tr.row-down:hover { background: linear-gradient(90deg, rgba(239,68,68,0.22) 0%, transparent 55%); }
.table tr.row-up:hover td,
.table tr.row-down:hover td { background: transparent; }

/* Transferência entre carteiras (spec 26): a terceira linha. Cinza de propósito — ela não é
   receita nem despesa, e o verde/vermelho é justamente o que a spec veio evitar que o dinheiro
   que só troca de bolso vestisse. */
.table tr.row-neutral { background: linear-gradient(90deg, rgba(148,163,184,0.12) 0%, transparent 55%); }
.table tr.row-neutral td { background: transparent; }
.table tr.row-neutral td:first-child { box-shadow: inset 3px 0 0 #94a3b8; }
.table tr.row-neutral:hover { background: linear-gradient(90deg, rgba(148,163,184,0.20) 0%, transparent 55%); }
.table tr.row-neutral:hover td { background: transparent; }

/* ------- Sidebar nav (com indicador lateral) ------- */
.nav-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: #9ca3af;
  font-size: 0.825rem; font-weight: 500;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: background 150ms, color 150ms;
}
.nav-link:hover { background: #15151c; color: #fff; }
.nav-link.active {
  background: linear-gradient(90deg, rgba(130,10,209,0.18) 0%, transparent 100%);
  color: #fff;
}
.nav-link.active::before {
  content: '';
  position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px;
  background: linear-gradient(180deg, #d946ef, #820ad1);
  border-radius: 0 3px 3px 0;
}
.nav-icon { width: 1rem; flex-shrink: 0; opacity: 0.85; text-align: center; }
.nav-group {
  padding: 0.4rem 0.5rem 0.25rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.nav-group:not(:first-child) { margin-top: 0.5rem; }

/* ------- Badges ------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.01em;
}
.badge-up   { background:rgba(34,197,94,0.14); color:#86efac; }
.badge-down { background:rgba(239,68,68,0.14); color:#fca5a5; }
.badge-neutral { background:#1f1f29; color:#cbd5e1; }

/* Delta (variação % dos KPIs) */
.delta {
  display: inline-flex; align-items: center; gap: 0.15rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6rem; font-weight: 700;
}
.delta-up { background: rgba(34,197,94,0.12); color: #86efac; }
.delta-down { background: rgba(239,68,68,0.12); color: #fca5a5; }

/* KPI icon box */
.kpi-icon {
  width: 38px; height: 38px;
  border-radius: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Glow ambiente */
.glow-purple {
  position: absolute; pointer-events: none;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(130,10,209,0.15) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

/* ------- Tabs ------- */
.tab-group {
  display: inline-flex;
  padding: 4px;
  background: #15151c;
  border: 1px solid #1f1f29;
  border-radius: 0.65rem;
  gap: 2px;
}
.tab-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem;
  border-radius: .5rem;
  font-size: .75rem; font-weight: 500;
  color: #9ca3af;
  background: transparent;
  border: 0; cursor: pointer;
  transition: background 180ms, color 180ms;
  white-space: nowrap;
}
.tab-btn:hover { color: #fff; background: #1f1f29; }
.tab-btn.active {
  background: linear-gradient(135deg, #d946ef 0%, #820ad1 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(217,70,239,0.3);
}

/* ------- Modal ------- */
.modal-backdrop {
  position:fixed;
  top: 32px; left: 0; right: 0; bottom: 0;   /* começa abaixo da titlebar (32px), senão o topo do modal fica escondido atrás dela */
  background:rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding: 0 16px;                           /* respiro lateral em janelas estreitas */
  z-index:40;
  animation: fadeIn 180ms ease-out;
}
.modal {
  width:100%; max-width: 520px;
  max-height: calc(100vh - 80px);            /* titlebar 32px + ~24px de margem simétrica em cima e embaixo */
  background:#15151c;
  border:1px solid #1f1f29;
  border-radius:1rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65);
  animation: modalIn 240ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* O conteúdo do modal rola internamente quando passa da altura da tela (ex.: compra
   parcelada com muitas parcelas em janela baixa) — mantém os botões de ação alcançáveis.
   O .modal já é flex-column com max-height; faltava o filho poder encolher e rolar. */
.modal > * {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal h2 { font-size: 1rem; font-weight:600; letter-spacing: -0.01em; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------- Toast ------- */

/* O posicionamento do container mora AQUI, e não nas classes Tailwind do
   #toast-root, por um motivo que só aparece quando já é tarde: o toast é
   justamente o que precisa surgir quando algo deu errado — e "algo deu errado"
   inclui o próprio Tailwind não ter baixado. Enquanto dependia do CDN, uma
   máquina sem internet fazia o aviso nascer no fim do <body>, fora da tela:
   clicar em "Entrar" com a senha errada não mostrava absolutamente nada. */
#toast-root {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  background:#15151c;
  border:1px solid #1f1f29;
  color:#e5e5e5;
  padding:.7rem 1rem;
  border-radius:.7rem;
  font-size:.8rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: modalIn 200ms ease-out;
  display: flex; align-items: center;
}
.toast.error {
  border-color:rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.08);
  color:#fecaca;
}
.toast.ok {
  border-color:rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.08);
  color:#bbf7d0;
}

/* ------- Utilitários gerais ------- */

/* 🔴 `.hidden` era a única coisa que separava a tela de login do app, e vinha só
   do Tailwind. `mostrarApp()` esconde o #auth-root adicionando esta classe —
   sem o CDN a classe não existia, nada era escondido, e entrar com a senha
   CERTA deixava a tela de login parada na frente do app já carregado. Do lado
   de quem usa, indistinguível de senha errada: o botão não fazia nada.
   O mesmo valia para o #app, que nasce com `hidden` e aparecia desde o começo,
   empurrado para baixo da dobra pela altura da tela de login. */
.hidden { display: none !important; }
.text-muted { color: #9ca3af; }
.divider { height: 1px; background: #1f1f29; }

/* Cores semânticas (garante que rendering não dependa do JIT do Tailwind CDN) */
.text-money-up { color: #22c55e !important; }
.text-money-down { color: #ef4444 !important; }

/* Alinhamento de tabela — th.text-right precisa vencer o text-align:left padrão de .table th */
.table th.text-right,
.table td.text-right { text-align: right; }
.table th.text-center,
.table td.text-center { text-align: center; }

/* ------- Seletor de emoji (lib/emojiPicker.js) ------- */
.emoji-picker {
  background: #0d0d12;
  border: 1px solid #1f1f29;
  border-radius: 0.75rem;
  overflow: hidden;
}
.ep-topo {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 1px solid #1f1f29;
}
.ep-preview {
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1;
  background: rgba(130,10,209,0.15);
  border: 1px solid rgba(130,10,209,0.45);
  border-radius: 0.6rem;
}
.ep-busca { font-size: 0.8rem; padding: 0.4rem 0.7rem; }

.ep-abas {
  display: flex; gap: 0.15rem;
  padding: 0.35rem 0.4rem 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid #1f1f29;
}
.ep-abas::-webkit-scrollbar { display: none; }
.ep-aba {
  flex-shrink: 0;
  padding: 0.3rem 0.5rem 0.4rem;
  font-size: 1rem; line-height: 1;
  border-bottom: 2px solid transparent;
  border-radius: 0.4rem 0.4rem 0 0;
  opacity: 0.5;
  transition: opacity 150ms, background 150ms, border-color 150ms;
}
.ep-aba:hover { opacity: 0.85; background: #15151c; }
.ep-aba.is-ativa { opacity: 1; background: #15151c; border-bottom-color: #820ad1; }

.ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr));
  gap: 0.15rem;
  padding: 0.4rem;
  height: 11.5rem;                 /* fixo: a grade não deve empurrar os botões do modal */
  overflow-y: auto;
  overscroll-behavior: contain;    /* rolar até o fim não arrasta o modal atrás */
}
.ep-grid::-webkit-scrollbar { width: 8px; }
.ep-grid::-webkit-scrollbar-thumb { background: #2a2a36; border-radius: 4px; }
.ep-grid::-webkit-scrollbar-thumb:hover { background: #3a3a48; }

.ep-item {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1;
  border-radius: 0.45rem;
  transition: background 120ms, transform 120ms;
}
.ep-item:hover { background: #1f1f29; transform: scale(1.12); }
.ep-item.is-sel { background: #820ad1; box-shadow: 0 0 0 2px rgba(130,10,209,0.35); }

.ep-vazio {
  grid-column: 1 / -1;
  padding: 2rem 0.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: #6b7280;
}

/* ==========================================================================
   IDENTIDADE NOVA — paleta indigo, ESCOPADA (spec 11)
   ==========================================================================

   🔴 Tudo aqui é `.tela-ident .id-*`, e não token global, de propósito.

   O `accent` do Tailwind (#820ad1, o roxo Nubank) é usado por Dashboard,
   Lançamentos, Cartões, Relatórios, auth, welcome e updates, e pelo
   `.nav-link.active` / `.btn-primary` / `.btn-grad` aqui neste arquivo.
   Trocar o valor dele pintaria as SETE telas de indigo — que é exatamente o
   que a spec 11 tirou de escopo (a identidade completa é spec própria).

   Então o indigo entra por classes novas que só existem no Perfil e em
   Configurações. Nada abaixo desta linha altera uma regra existente, e é isso
   que garante que as outras 5 telas continuem idênticas.

   As únicas exceções ao prefixo `.tela-ident` são as classes do rodapé da
   sidebar (`.id-perfil-*`, `.id-avatar`), porque o rodapé vive fora da view —
   ele é a PORTA do Perfil. Elas só casam com aquele bloco, que existe uma vez.
   ========================================================================== */

.tela-ident {
  --id-indigo:  #5F6BFF;
  --id-violet:  #9B7CFF;
  --id-card:    #17171B;
  --id-card-2:  #1F1F25;
  --id-line:    #26262C;
  --id-line-2:  #34343C;
  --id-text:    #F7F7F8;
  --id-text-2:  #C2C2CA;
  --id-muted:   #82828C;
  --id-ok:      #2ED08A;
  --id-warn-c:  #FFC061;
  --id-danger:  #FF5A6E;
}

.tela-ident .id-sub {
  font-size: 0.72rem;
  color: var(--id-muted);
  margin-bottom: 0.15rem;
}

/* ---- cabeçalho do Perfil: quem você é vem antes de tudo ---- */
.tela-ident .id-cabecalho {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(95,107,255,0.24);
  border-radius: 0.7rem;
  background:
    linear-gradient(120deg, rgba(95,107,255,0.16), rgba(155,124,255,0.05) 60%, transparent),
    var(--id-card);
}
.tela-ident .id-avatar-g {
  width: 46px; height: 46px; border-radius: 0.8rem; flex: none;
  background: linear-gradient(150deg, var(--id-violet), var(--id-indigo));
  color: #fff; font-weight: 800; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.tela-ident .id-nome-g { font-size: 0.97rem; font-weight: 700; line-height: 1.25; color: var(--id-text); }
.tela-ident .id-mail   { font-size: 0.72rem; color: var(--id-muted); }

/* ---- cards ---- */
.tela-ident .id-card {
  background: var(--id-card);
  border: 1px solid var(--id-line);
  border-radius: 0.7rem;
  padding: 0.85rem 0.95rem;
}
.tela-ident .id-card-titulo {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--id-muted);
  margin-bottom: 0.7rem;
}

/* ---- linha: rótulo + estado à esquerda, ação à direita ---- */
.tela-ident .id-linha {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.45rem 0;
}
/* O separador entre linhas.
   As quatro regras existem porque duas partes do Perfil são REDESENHADAS por
   render próprio (`#senha-escopo` e `#sync-bloco`, ambas `.id-grupo`), e um
   wrapper no meio quebra o `+` entre as linhas irmãs. Sem elas, a linha
   seguinte ao grupo perde o traço e os cards parecem colados. */
.tela-ident .id-linha + .id-linha,
.tela-ident .id-grupo > .id-linha + .id-linha,
.tela-ident .id-grupo + .id-linha,
.tela-ident .id-linha + .id-grupo > .id-linha:first-child { border-top: 1px solid var(--id-line); }
.tela-ident .id-rot { font-size: 0.8rem; color: var(--id-text); }
.tela-ident .id-val { font-size: 0.72rem; color: var(--id-muted); line-height: 1.5; }
.tela-ident .id-dir { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.tela-ident .id-mono {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.67rem; color: var(--id-muted);
  word-break: break-all;
}
.tela-ident .id-aviso { font-size: 0.7rem; color: var(--id-muted); line-height: 1.55; margin-top: 0.6rem; }
.tela-ident .id-aviso:empty { display: none; margin: 0; }
.tela-ident .id-warn { color: var(--id-warn-c); }
.tela-ident .id-card code {
  font-size: 0.68rem;
  background: var(--id-card-2);
  border: 1px solid var(--id-line);
  padding: 0.05rem 0.3rem; border-radius: 0.25rem;
}

/* ---- botões ---- */
.tela-ident .id-btn {
  font-size: 0.7rem; font-weight: 600;
  padding: 0.3rem 0.6rem; border-radius: 0.45rem;
  border: 1px solid var(--id-line-2);
  background: var(--id-card-2);
  color: var(--id-text-2);
  white-space: nowrap; cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.tela-ident .id-btn:hover { background: #2a2a32; border-color: #43434d; color: #fff; }
.tela-ident .id-btn:disabled { opacity: 0.5; cursor: default; }
.tela-ident .id-btn:disabled:hover { background: var(--id-card-2); border-color: var(--id-line-2); color: var(--id-text-2); }
.tela-ident .id-btn-pri {
  background: var(--id-indigo); border-color: var(--id-indigo); color: #fff;
}
.tela-ident .id-btn-pri:hover { background: #7480ff; border-color: #7480ff; color: #fff; }
.tela-ident .id-btn-per {
  background: transparent; border-color: rgba(255,90,110,0.4); color: #FF8593;
}
.tela-ident .id-btn-per:hover { background: rgba(255,90,110,0.14); border-color: rgba(255,90,110,0.6); color: #fff; }

/* ---- pílulas de estado ---- */
.tela-ident .id-pill {
  font-size: 0.62rem; font-weight: 600;
  padding: 0.1rem 0.4rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 0.28rem;
  white-space: nowrap; vertical-align: 1px;
}
.tela-ident .id-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: block; }
.tela-ident .id-pill-ok   { background: rgba(46,208,138,0.14); color: var(--id-ok); }
.tela-ident .id-pill-warn { background: rgba(255,192,97,0.14); color: var(--id-warn-c); }
/* Faixa GRATIS (spec 20): nem verde de "tudo certo", nem ambar de aviso.
   Sem assinatura deixou de ser um defeito a sinalizar e virou um estado a
   nomear — o ambar aqui treinava a pessoa a ignorar o card, e um card que se
   ensina a ignorar nao avisa nada no dia em que precisar avisar. */
.tela-ident .id-pill-neutro { background: rgba(255,255,255,0.08); color: var(--id-muted, #9aa0aa); }

/* ==========================================================================
   Rodapé da sidebar — a PORTA do Perfil (spec 11)
   Fora do `.tela-ident` porque vive na sidebar, não na view.
   ========================================================================== */
.id-perfil-btn {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.45rem;
  border-radius: 0.55rem;
  cursor: pointer;
  transition: background 150ms;
}
.id-perfil-btn:hover { background: #15151c; }
.id-perfil-btn.ativo { background: rgba(95,107,255,0.16); }
.id-perfil-btn.ativo .id-perfil-nome { color: #fff; }
.id-avatar {
  width: 27px; height: 27px; border-radius: 0.5rem; flex: none;
  background: linear-gradient(150deg, #9B7CFF, #5F6BFF);
  color: #fff; font-weight: 700; font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
}
.id-perfil-nome { font-size: 0.72rem; font-weight: 600; line-height: 1.25; color: #f3f4f6; }
.id-perfil-sub  { font-size: 0.6rem; color: #82828C; line-height: 1.25; }
.id-perfil-sub-warn { color: #FFC061; }
.id-perfil-chev { color: #82828C; font-size: 0.75rem; flex: none; }