/* ================================================
   DESIGN TOKENS — Clean Modernism 2025
================================================ */
:root {
  /* Brand — emerald teal */
  --brand:        #0f9b91;
  --brand-dark:   #0b7a72;
  --brand-mid:    #11b3aa;
  --brand-light:  #ccf0ed;
  --brand-xlight: #e4f9f7;

  /* Superfícies */
  --bg:           #f0f2f5;
  --surface:      #ffffff;
  --surface-alt:  #f5f7fa;
  --surface-hover:#eceef2;
  --card-bg:      #ffffff;

  /* Glass */
  --glass-bg:        rgba(255,255,255,0.65);
  --glass-border:    rgba(255,255,255,0.45);
  --glass-blur:      12px;

  /* Texto */
  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #555555;
  --text-subtle:    #9ca3af;

  /* Bordas */
  --border:       #e2e5ea;
  --border-strong:#c8cdd5;
  --border-focus: #0f9b91;

  /* Semântico */
  --income:        #16a34a;
  --income-bg:     #f0fdf4;
  --income-border: #bbf7d0;

  --expense:        #dc2626;
  --expense-bg:     #fef2f2;
  --expense-border: #fecaca;

  --balance:        #2563eb;
  --balance-bg:     #eff6ff;
  --balance-border: #bfdbfe;

  --warning:        #d97706;
  --warning-bg:     #fffbeb;
  --warning-border: #fde68a;

  --neutral:        #64748b;
  --neutral-bg:     #f1f5f9;
  --neutral-border: #e2e8f0;

  /* Tipografia — Inter em tudo */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* Layout */
  --sidebar-w:       230px;
  --mobile-topbar-h: 52px;
  --bottom-nav-h:    60px;
  --content-max:     1400px;
  --content-px:      clamp(1.5rem, 3vw, 2.5rem);
  --section-gap:     1.25rem;

  /* Sidebar */
  --sidebar-bg:          #ffffff;
  --sidebar-border:      #e2e5ea;
  --sidebar-text:        #374151;
  --sidebar-muted:       #9ca3af;
  --sidebar-hover:       #f1f4f8;
  --sidebar-active:      #e0f5f3;
  --sidebar-active-text: #0f9b91;

  /* Tokens de raio — arredondamentos generosos */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* Sombras suaves */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 2px 8px -2px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 16px -4px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg:    0 12px 32px -8px rgba(0,0,0,0.12), 0 4px 8px -2px rgba(0,0,0,0.06);
  --shadow-brand: 0 8px 24px -4px rgba(15,155,145,0.3);

  /* Transições */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Escala de espaçamento — grade de 4 px */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
}

/* ================================================
   DARK MODE — Deep blue-gray Fintech palette 2025
================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Brand — neon emerald */
  --brand:        #34d399;
  --brand-dark:   #10b981;
  --brand-mid:    #6ee7b7;
  --brand-light:  rgba(52,211,153,0.14);
  --brand-xlight: rgba(52,211,153,0.06);

  /* Superfícies — profundo azulado (não preto puro) */
  --bg:           #0c1021;
  --surface:      #111827;
  --surface-alt:  #1e293b;
  --surface-hover:#283548;
  --card-bg:      #0f1929;

  /* Glass — dark mode */
  --glass-bg:        rgba(17,24,39,0.72);
  --glass-border:    rgba(255,255,255,0.08);
  --glass-blur:      16px;

  /* Texto — mais contraste */
  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #9ca5bd;
  --text-subtle:    #475569;

  /* Bordas — finas e sutis */
  --border:       rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --border-focus: #34d399;

  /* Semântico — cores vibrantes neon */
  --income:        #34d399;/* esmeralda neon */
  --income-bg:     rgba(52,211,153,0.1);
  --income-border: rgba(52,211,153,0.2);

  --expense:        #f472b6;/* magenta/coral */
  --expense-bg:     rgba(244,114,182,0.1);
  --expense-border: rgba(244,114,182,0.2);

  --balance:        #60a5fa;/* azul elétrico */
  --balance-bg:     rgba(96,165,250,0.1);
  --balance-border: rgba(96,165,250,0.2);

  --warning:        #fbbf24;
  --warning-bg:     rgba(251,191,36,0.1);
  --warning-border: rgba(251,191,36,0.2);

  --neutral:        #94a3b8;
  --neutral-bg:     rgba(148,163,184,0.08);
  --neutral-border: rgba(148,163,184,0.14);

  /* Sidebar — mais profunda */
  --sidebar-bg:          #080d1a;
  --sidebar-border:      rgba(255,255,255,0.06);
  --sidebar-text:        #94a3b8;
  --sidebar-muted:       #475569;
  --sidebar-hover:       rgba(255,255,255,0.04);
  --sidebar-active:      rgba(52,211,153,0.1);
  --sidebar-active-text: #34d399;

  /* Sombras — glow sutil colorido */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-sm: 0 2px 8px -2px rgba(0,0,0,0.6);
  --shadow-md: 0 8px 24px -6px rgba(0,0,0,0.5), 0 2px 8px -2px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 48px -8px rgba(0,0,0,0.65), 0 4px 12px -2px rgba(0,0,0,0.4);
  --shadow-brand: 0 8px 32px -4px rgba(52,211,153,0.25);
}

/* ================================================
   RESET E BASE
================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(14px, 0.82rem + 0.15vw, 16px);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  transition: background var(--t-smooth), color var(--t-smooth);
  overscroll-behavior-y: none;
}

/* Gradiente radial sutil no dark mode — efeito "nebula" fintech */
html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at 18% 45%, rgba(52,211,153,0.045) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 18%, rgba(96,165,250,0.04) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 88%, rgba(244,114,182,0.03) 0%, transparent 44%),
    var(--bg);
}

/* Valores monetários — alinhamento tabular (colunas não saltam ao atualizar) */
.kpi .value,
.stat-row strong,
.transaction-amount,
.breakdown-value,
.stats-card-value,
.whatif-value,
.col-currency,
tbody td {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  line-height: 1.2;
  font-weight: 700;
}

h1 {
  font-size: clamp(1.8rem, 1.25rem + 1.8vw, 2.75rem);
}

h2 {
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.45rem);
}

p { margin: 0; }

#app {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  position: relative;
}

/* ================================================
   SIDEBAR
================================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100dvh;
  z-index: 200;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.brand-logo {
  flex-shrink: 0;
  border-radius: 6px;
}

.sidebar-brand {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  white-space: nowrap;
  line-height: 1.2;
}

.sidebar-nav {
  flex: 1;
  padding: 0.75rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-md);
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--sidebar-text);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
  cursor: pointer;
  outline: none;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--text-primary);
}

.nav-item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

.nav-item--active {
  background: var(--sidebar-active);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

.nav-item--active:hover {
  background: var(--sidebar-active);
}

.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.75;
}

.nav-item--active .nav-icon {
  opacity: 1;
}

.sidebar-period {
  padding: 0.75rem 1rem 1.25rem;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-period-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sidebar-muted);
  margin-bottom: 0.4rem;
}

.period-selector {
  display: block;
}

.period-selector select {
  width: 100%;
  font-size: 0.855rem;
}

/* ================================================
   USER BUTTON
================================================ */
#userMenuWidget {
  padding: 0 0.75rem 0.5rem;
  position: relative;
}

.user-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  color: var(--text-primary);
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
  user-select: none;
}

.user-btn:hover,
.user-btn:focus-visible {
  background: var(--surface-hover);
  border-color: var(--brand);
  outline: none;
}

.user-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.user-btn-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.user-btn-avatar--initials {
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.user-btn-info {
  flex: 1;
  min-width: 0;
}

.user-btn-name {
  display: block;
  font-size: 0.79rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.user-btn-tier {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.user-btn-tier--basic   { color: var(--text-muted); }
.user-btn-tier--free    { color: var(--text-muted); }
.user-btn-tier--premium { color: #f59e0b; }
.user-btn-tier--pro     { color: #f59e0b; }

.user-btn-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--t-fast);
}

.user-btn[aria-expanded="true"] .user-btn-chevron {
  transform: rotate(180deg);
}

/* Dropdown menu */
.user-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0.75rem;
  right: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 300;
  overflow: hidden;
}

.user-menu-header {
  padding: 0.65rem 0.85rem;
}

.user-menu-header strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-header span {
  display: block;
  font-size: 0.71rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-tier {
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.user-menu-tier--basic   { color: var(--text-muted) !important; }
.user-menu-tier--free    { color: var(--text-muted) !important; }
.user-menu-tier--premium { color: #f59e0b !important; }
.user-menu-tier--pro     { color: #f59e0b !important; }

.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

.user-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: var(--surface-alt);
  outline: none;
}

.user-menu-signout:hover,
.user-menu-signout:focus-visible {
  color: var(--expense);
}

.user-menu-upgrade {
  color: #f59e0b;
  font-weight: 600;
}

.user-menu-upgrade:hover,
.user-menu-upgrade:focus-visible {
  background: rgba(245, 158, 11, 0.08);
  color: #d97706;
}

/* ================================================
   SIDEBAR VERSION BADGE — versão compacta clicável
================================================ */
.sidebar-version-badge {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 1rem 0.45rem;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.15s;
}
.sidebar-version-badge:hover {
  background: rgba(15, 155, 145, 0.06);
}
.sidebar-version-badge svg {
  color: var(--text-muted);
  opacity: 0.55;
  flex-shrink: 0;
}
.sidebar-version-text {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  background: none;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================
   PÁGINA SOBRE — Bento Grid
================================================ */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  gap: 1.25rem;
}

.about-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.about-card:hover {
  border-color: rgba(15, 155, 145, 0.3);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

/* Wide card: ocupa 2 colunas */
.about-card--wide {
  grid-column: span 2;
}
@media (max-width: 580px) {
  .about-card--wide { grid-column: span 1; }
}

.about-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 155, 145, 0.12);
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}
.about-card-icon svg {
  width: 18px;
  height: 18px;
  color: #0f9b91;
}
.about-card--plan .about-card-icon { background: rgba(139, 92, 246, 0.12); }
.about-card--plan .about-card-icon svg { color: #a78bfa; }
.about-card--backup .about-card-icon { background: rgba(16, 185, 129, 0.1); }
.about-card--backup .about-card-icon svg { color: #10b981; }
.about-card--id .about-card-icon { background: rgba(245, 158, 11, 0.1); }
.about-card--id .about-card-icon svg { color: #f59e0b; }
.about-card--changelog .about-card-icon { background: rgba(99, 102, 241, 0.1); }
.about-card--changelog .about-card-icon svg { color: #818cf8; }
.about-card--legal .about-card-icon { background: rgba(239, 68, 68, 0.08); }
.about-card--legal .about-card-icon svg { color: #f87171; }

.about-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

.about-card-hero {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.about-card-hero--mono {
  font-size: 0.82rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  word-break: break-all;
}

.about-card-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}
.about-card-sub strong {
  color: var(--text-secondary);
}

.about-plan-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(15, 155, 145, 0.15);
  color: #0f9b91;
}
.about-plan-badge--premium {
  background: rgba(139, 92, 246, 0.18);
  color: #a78bfa;
}
.about-plan-badge--pro {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.about-plan-badge--expired {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.about-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  width: fit-content;
}
.about-card-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.about-card-btn--accent {
  background: rgba(15, 155, 145, 0.12);
  border-color: rgba(15, 155, 145, 0.3);
  color: #0f9b91;
}
.about-card-btn--accent:hover {
  background: rgba(15, 155, 145, 0.22);
  border-color: rgba(15, 155, 145, 0.5);
  color: #10b981;
}

.about-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f9b91;
  text-decoration: none;
  text-underline-offset: 3px;
  margin-top: auto;
  transition: color 0.15s;
}
.about-card-link:hover {
  color: #10b981;
  text-decoration: underline;
}

/* Changelog preview list */
.about-changelog-preview {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.25rem 0;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border, rgba(255,255,255,.06));
  border-radius: 8px;
}
.changelog-entry {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.changelog-version {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: #818cf8;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.changelog-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Legal links */
.about-legal-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.15rem 0;
}
.about-legal-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f9b91;
  text-decoration: none;
  transition: color 0.15s;
}
.about-legal-link:hover { color: #10b981; text-decoration: underline; }

/* ================================================
   ADMINISTRAÇÃO — Deep Ocean
================================================ */
.admin-page-card {
  background: linear-gradient(180deg, rgba(15, 155, 145, 0.08) 0%, rgba(17, 24, 39, 0.9) 100%);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 18px;
}

.admin-page-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0.85rem;
}

.admin-kpi-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.admin-kpi-card span {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

.admin-kpi-card strong {
  font-size: 1.1rem;
  color: var(--text-primary);
  font-weight: 800;
}

.admin-users-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.admin-users-head h2 {
  font-size: 1rem;
  margin: 0;
}

.admin-users-head input {
  max-width: 340px;
  min-width: 220px;
  background: rgba(15, 23, 42, 0.75);
}

.admin-table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
  max-height: 520px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
  font-size: 0.79rem;
}

.admin-table thead th {
  position: sticky;
  top: 0;
  background: #0f172a;
  z-index: 1;
}

.admin-table th,
.admin-table td {
  padding: 0.6rem 0.65rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  text-align: left;
  vertical-align: middle;
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.16rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.admin-pill.is-premium { background: rgba(16, 185, 129, 0.18); color: #34d399; }
.admin-pill.is-free { background: rgba(100, 116, 139, 0.2); color: #cbd5e1; }
.admin-pill.is-approved { background: rgba(16, 185, 129, 0.18); color: #34d399; }
.admin-pill.is-pending { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.admin-pill.is-refunded { background: rgba(239, 68, 68, 0.18); color: #f87171; }

html:not([data-theme="dark"]) .admin-page-card {
  background: linear-gradient(180deg, rgba(15, 155, 145, 0.06) 0%, #ffffff 100%);
  border: 1px solid var(--border);
}

html:not([data-theme="dark"]) .admin-kpi-card {
  background: #ffffff;
  border-color: var(--border);
}

html:not([data-theme="dark"]) .admin-users-head input {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border);
}

html:not([data-theme="dark"]) .admin-users-head input::placeholder {
  color: var(--text-muted);
}

html:not([data-theme="dark"]) .admin-table thead th {
  background: #eef2f7;
  color: #475569;
}

html:not([data-theme="dark"]) .admin-table td {
  color: var(--text-secondary);
}

html:not([data-theme="dark"]) .admin-pill.is-premium {
  background: #dcfce7;
  color: #15803d;
}

html:not([data-theme="dark"]) .admin-pill.is-free {
  background: #e2e8f0;
  color: #334155;
}

html:not([data-theme="dark"]) .admin-pill.is-approved {
  background: #d1fae5;
  color: #047857;
}

html:not([data-theme="dark"]) .admin-pill.is-pending {
  background: #fef3c7;
  color: #b45309;
}

html:not([data-theme="dark"]) .admin-pill.is-refunded {
  background: #fee2e2;
  color: #b91c1c;
}

.admin-refund-btn {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  padding: 0.34rem 0.62rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.admin-promote-btn,
.admin-demote-btn {
  border-radius: 8px;
  padding: 0.34rem 0.62rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  margin-right: 0.28rem;
}

.admin-promote-btn {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.admin-demote-btn {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.admin-promote-btn:hover:not(:disabled),
.admin-demote-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.admin-promote-btn:disabled,
.admin-demote-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-refund-btn:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.22);
  transform: translateY(-1px);
}

.admin-refund-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(2, 6, 23, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
}

.admin-confirm-modal {
  width: min(100%, 480px);
  background: #0f172a;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 14px;
  padding: 1rem 1rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-confirm-modal h3 {
  font-size: 1rem;
  color: #f8fafc;
}

.admin-confirm-modal p {
  font-size: 0.82rem;
  color: #cbd5e1;
}

.admin-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.admin-btn-secondary,
.admin-btn-danger {
  border-radius: 9px;
  padding: 0.5rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}

.admin-btn-secondary {
  background: rgba(148, 163, 184, 0.14);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.28);
}

.admin-btn-danger {
  background: rgba(239, 68, 68, 0.2);
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.4);
}

/* ================================================
   THEME TOGGLE
================================================ */
.sidebar-theme-toggle {
  padding: 0 1.25rem 1rem;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.theme-toggle-btn {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  padding: 0;
}

.theme-toggle-btn:hover {
  background: var(--surface-hover);
  border-color: var(--brand);
  color: var(--brand);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.theme-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ================================================
   OVERLAY SIDEBAR MOBILE
================================================ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.sidebar-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ================================================
   MOBILE TOPBAR
================================================ */
.mobile-topbar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  height: var(--mobile-topbar-h);
  padding: 0 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

.mobile-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4.5px;
  width: 38px;
  height: 38px;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 1.75px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}

.hamburger:hover {
  background: var(--surface-alt);
  border-color: var(--border-strong);
}

.hamburger:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* ================================================
   LAYOUT PRINCIPAL
================================================ */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: auto;
}

.content-wrap {
  flex: 1;
  padding: 2rem var(--content-px) 3.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* ================================================
   CABEÇALHO DA PÁGINA
================================================ */
.page-header {
  padding-bottom: 0.15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.2rem;
}

h1 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--text-primary);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.page-subtitle {
  margin-top: 0.18rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ================================================
   CONTROLES GLOBAIS (input, select)
================================================ */
select,
input[type="text"],
input[type="number"],
input[type="date"] {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 0.6rem 0.85rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
  -webkit-appearance: none;
}

input,
select,
textarea {
  font-size: 16px !important;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  padding-right: 2rem;
}

select:focus,
input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(12, 107, 101, 0.15);
}

select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

input[type="checkbox"] {
  display: inline-block;
  width: auto;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none !important;
  accent-color: var(--brand);
  cursor: pointer;
}

/* ================================================
   KPI GRID — Bento Grid 2025
================================================ */
.kpi-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  /* Container Queries — cards são auto-ajustáveis ao container */
  container-type: inline-size;
  container-name: kpi-grid;
}

@container kpi-grid (max-width: 520px) {
  .kpi { padding: 1.1rem 1.1rem 0.9rem; }
  .kpi .value { font-size: 1.3rem; }
}

@container kpi-grid (min-width: 900px) {
  .kpi .value { font-size: 1.85rem; }
}

.kpi {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: var(--shadow-sm);
  animation: rise 320ms ease both;
  /* Stagger em cascata: JS define --stagger-i para cada card */
  animation-delay: calc(var(--stagger-i, 0) * 65ms);
  animation-fill-mode: both;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

.kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-strong);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transition: background var(--t-base);
}

.kpi:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.kpi .label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  line-height: 1.3;
}

.kpi-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  flex-shrink: 0;
  background: var(--surface-alt);
  color: var(--text-muted);
}

.kpi-icon svg {
  width: 17px;
  height: 17px;
}

.kpi .value {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.kpi-hint {
  margin-top: 0.55rem;
  font-size: 0.73rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Sparkline canvas dentro do KPI */
.kpi-sparkline {
  margin-top: 0.75rem;
  height: 32px;
  width: 100%;
  opacity: 0.7;
}

/* Variantes semânticas */
.kpi-income::before { background: var(--income); }
.kpi-income .value  { color: var(--income); }
.kpi-income .kpi-icon { color: var(--income); background: var(--income-bg); }

.kpi-expense::before { background: var(--expense); }
.kpi-expense .value  { color: var(--expense); }
.kpi-expense .kpi-icon { color: var(--expense); background: var(--expense-bg); }

.kpi-balance::before { background: var(--balance); }
.kpi-balance .value  { color: var(--balance); }
.kpi-balance .kpi-icon { color: var(--balance); background: var(--balance-bg); }

.kpi-debit::before,
.kpi-credit::before { background: var(--neutral); }
.kpi-debit .kpi-icon,
.kpi-credit .kpi-icon { color: var(--neutral); background: var(--neutral-bg); }

.kpi.alert::before,
.kpi-alert::before  { background: var(--warning); }
.kpi.alert .value,
.kpi-alert .value { color: var(--warning); }
.kpi-alert .kpi-icon { color: var(--warning); background: var(--warning-bg); }

/* Indicador de Saúde Financeira */
.kpi-health::before {
  height: 4px;
  background: linear-gradient(90deg, var(--expense) 0%, var(--warning) 40%, var(--income) 100%);
}
.kpi-health .health-indicator {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  transition: background var(--t-smooth), box-shadow var(--t-smooth);
}
.kpi-health .health-indicator.health-good {
  background: var(--income-bg);
  color: var(--income);
  box-shadow: 0 0 20px rgba(52,211,153,0.3);
}
.kpi-health .health-indicator.health-ok {
  background: var(--warning-bg);
  color: var(--warning);
  box-shadow: 0 0 20px rgba(251,191,36,0.3);
}
.kpi-health .health-indicator.health-bad {
  background: var(--expense-bg);
  color: var(--expense);
  box-shadow: 0 0 20px rgba(244,114,182,0.3);
}

/* ================================================
   CARD / PANEL — Glassmorphism 2025
================================================ */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  position: relative;
  isolation: isolate;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
  /* NÃO overflow:hidden — permite resize handles ficarem visíveis */
}

/* Gradient glow border on hover — pseudo-element mask trick */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(52,211,153,0.0) 0%,
    rgba(96,165,250,0.0) 50%,
    rgba(244,114,182,0.0) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-smooth), background var(--t-smooth);
}

html[data-theme="dark"] .card:hover::after {
  background: linear-gradient(135deg,
    rgba(52,211,153,0.45) 0%,
    rgba(96,165,250,0.2) 50%,
    rgba(244,114,182,0.12) 100%);
  opacity: 1;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: 1.1rem 1.5rem 0.85rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.card-header > .card-title,
.card-header > .card-subtitle {
  flex: none;
  width: auto;
}

.card-header.has-actions {
  padding-right: 4.5rem;
  flex-wrap: wrap;
}

.card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-feature-settings: "cv02";
}

html[data-theme="dark"] .card-title {
  color: var(--text-muted);
}

.card-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  width: 100%;
}

/* ================================================
   CARD CONTROLS (expandir / recolher)
================================================ */
.card-header-actions {
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.card-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--text-subtle);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}

.card-ctrl-btn svg {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.card-ctrl-btn:hover {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text-secondary);
}

.card-ctrl-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.card--collapsed .card-ctrl-collapse svg {
  transform: rotate(180deg);
  transition: transform var(--t-base);
}
.card-ctrl-collapse svg {
  transition: transform var(--t-base);
}

.card--collapsed > :not(.card-header) {
  display: none;
}
.card--collapsed {
  overflow: hidden;
}

/* Alças de redimensionamento dos cards (S / E / SE) */
.card-resize-handle {
  position: absolute;
  z-index: 20;
  opacity: 0;
  transition: opacity var(--t-base);
}

.card:hover .card-resize-handle,
.card--free:hover .card-resize-handle {
  opacity: 1;
}

/* Borda inferior */
.card-resize-s {
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 6px;
  cursor: s-resize;
}

.card-resize-s:hover,
.card-resize-s:active {
  background: linear-gradient(transparent, var(--brand));
  opacity: 1;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* Borda direita */
.card-resize-e {
  top: 16px;
  right: 0;
  bottom: 16px;
  width: 6px;
  cursor: e-resize;
}

.card-resize-e:hover,
.card-resize-e:active {
  background: linear-gradient(to right, transparent, var(--brand));
  opacity: 1;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

/* Canto inferior-direito (grip diagonal) */
.card-resize-se {
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: se-resize;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 3px;
  color: var(--text-subtle);
  border-bottom-right-radius: var(--r-lg);
}

.card-resize-se:hover,
.card-resize-se:active {
  color: var(--brand);
  opacity: 1;
}

/* ================================================
   FORMULÁRIO DE LANÇAMENTO (agora dentro do modal)
================================================ */
.quick-form {
  padding: 1rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.form-field label:not(.check-wrap) {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Spans por campo */
.ff-type   { grid-column: span 2; }
.ff-name   { grid-column: span 4; }
.ff-amount { grid-column: span 2; }
.ff-extra  { grid-column: span 2; }
.ff-date   { grid-column: span 1; }
.ff-check  { grid-column: span 1; justify-content: flex-end; }

.check-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.02em;
}

.check-wrap:hover {
  border-color: var(--brand);
  background: var(--brand-xlight);
}

.btn-submit {
  align-self: stretch;
  border: none;
  border-radius: var(--r-md);
  padding: 0.7rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--brand);
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.btn-submit:hover {
  background: var(--brand-mid);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}

.btn-submit:active {
  background: var(--brand-dark);
  box-shadow: none;
}

.btn-submit:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.btn-secondary {
  align-self: stretch;
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: 0.7rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.btn-secondary:active {
  background: rgba(0, 0, 0, 0.05);
  box-shadow: none;
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.btn-danger {
  align-self: stretch;
  border: none;
  border-radius: var(--r-md);
  padding: 0.7rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: #ef4444;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.btn-danger:hover {
  background: #dc2626;
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
  transform: translateY(-1px);
}

.btn-danger:active {
  background: #b91c1c;
  box-shadow: none;
}

.btn-danger:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* ================================================
   SECTION SPLIT (Reserva + Meta)
================================================ */
.section-split {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
}

.stats {
  padding: 0.25rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.stat-row:last-of-type {
  border-bottom: none;
}

.stat-row strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.progress-track {
  margin-top: 1rem;
  height: 8px;
  background: var(--border);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-dark), var(--brand));
  transition: width 600ms cubic-bezier(0.25, 1, 0.5, 1);
  min-width: 3px;
  position: relative;
}

/* Glow quando progresso >= 75% */
.progress-fill.progress-glow {
  box-shadow: 0 0 12px var(--brand), 0 0 4px var(--brand);
  background: linear-gradient(90deg, var(--brand), var(--brand-mid));
}

/* Pulsa quando >= 90% */
.progress-fill.progress-almost {
  animation: progress-pulse 1.5s ease-in-out infinite;
}

@keyframes progress-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--brand); }
  50%      { box-shadow: 0 0 20px var(--brand), 0 0 40px rgba(52,211,153,0.15); }
}

.progress-text {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ================================================
   TABELAS
================================================ */
.tables-section {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  align-items: start;
  overflow: visible;
}

.table-scroll {
  overflow: auto;
  max-height: 360px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ================================================
   DASHBOARD CANVAS (blocos livres)
================================================ */
.dashboard-canvas {
  position: relative;
  width: 100%;
  min-height: 500px;
  border-radius: var(--r-lg);
  transition: background-color 200ms ease, background-image 200ms ease;
}

/* Dot-grid aparece apenas ao arrastar/redimensionar */
.dashboard-canvas.canvas--editing {
  background-color: var(--surface-alt);
  background-image: radial-gradient(circle, var(--border) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  background-position: 0 0;
}

.card--free {
  position: absolute;
  box-sizing: border-box;
}

/* Cursor grab no header dos cards livres */
.drag-handle {
  cursor: grab;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Estado de arraste — lift com ghost leve e escala de elevação */
.card--dragging {
  opacity: 0.82;
  transform: scale(1.018) rotate(0.4deg);
  box-shadow:
    0 32px 64px -8px rgba(0,0,0,0.42),
    0 8px 20px -4px rgba(0,0,0,0.22),
    inset 0 0 0 1.5px var(--brand) !important;
  border-color: var(--brand) !important;
  border-width: 2px !important;
  transition: none !important;
  z-index: 100;
  /* Ghost translúcido: pseudo-element como halo de arraste */
}
.card--dragging::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--r-xl) + 6px);
  background: radial-gradient(ellipse at 50% 0%, rgba(52,211,153,0.12), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Snap magnético — transição mola ao soltar card na grade */
.card--snapping {
  transition:
    left  220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    top   220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    width 180ms ease,
    height 180ms ease !important;
}

/* Ghost de pré-visualização do split lado a lado */
.canvas-split-ghost {
  position: absolute;
  background: rgba(52,211,153,0.05);
  border: 1.5px dashed var(--brand);
  border-radius: var(--r-xl);
  pointer-events: none;
  z-index: 200;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ghost-appear 150ms ease both;
}

@keyframes ghost-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.canvas-split-ghost span {
  color: var(--brand);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
  background: var(--surface);
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

/* Card alvo pulsando enquanto conta 3s para auto-split */
.card--split-hint {
  outline: 1.5px dashed var(--brand);
  outline-offset: 2px;
  animation: split-pulse 0.9s ease-in-out infinite;
}
@keyframes split-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(45,212,191,0.25); }
  50%       { box-shadow: 0 0 0 8px rgba(45,212,191,0);   }
}

/* Impede que o título capture eventos de mouse durante o drag */
.drag-handle .card-title {
  pointer-events: none;
}

.btn-canvas-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  padding: 0.22rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.btn-canvas-reset:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-xlight);
}

.btn-canvas-reset:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Mobile: empilha cards em fluxo normal */
@media (max-width: 768px) {
  .card--free {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  .dashboard-canvas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: 0.85rem;
    min-height: 0;
    align-items: start;
  }

  .drag-handle {
    cursor: default;
  }
}

table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.8rem;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-alt);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}

tbody td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
  text-align: left;
  font-size: 0.85rem;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr {
  transition: background var(--t-fast);
}

tbody tr:hover td {
  background: var(--surface-hover);
}

.delete-btn, .edit-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.delete-btn:hover {
  background: var(--expense-bg);
  border-color: var(--expense-border);
  color: var(--expense);
}

.delete-btn:focus-visible {
  outline: 2px solid var(--expense);
  outline-offset: 2px;
}

.edit-btn:hover {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand);
}

.edit-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.action-group {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

/* ================================================
   BADGES DE STATUS
================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}

.badge-success {
  background: var(--income-bg);
  color: var(--income);
  border: 1px solid var(--income-border);
}

.badge-pending {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.badge-expense {
  background: var(--neutral-bg);
  color: var(--text-muted);
  border: 1px solid var(--neutral-border);
}

.badge-alert {
  background: var(--expense-bg);
  color: var(--expense);
  border: 1px solid var(--expense-border);
}

/* Estado vazio */
.table-scroll > p {
  padding: 1.25rem 1rem;
  color: var(--text-muted);
  font-size: 0.825rem;
  margin: 0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.825rem;
  text-align: center;
}

.empty-state-icon {
  font-size: 1.75rem;
  line-height: 1;
  opacity: 0.55;
}

/* ================================================
   TERMS GATE MODAL — aceitação de termos (z-index 9000)
================================================ */
#gfTermsGate {
  display: none;
}
#gfTermsGate.terms-gate-visible {
  display: block;
}

.terms-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 15, 26, 0.93);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.terms-gate-card {
  background: #111d2e;
  border: 1px solid rgba(15, 155, 145, 0.35);
  border-radius: 18px;
  padding: 1.75rem;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.terms-gate-header {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.terms-gate-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.terms-gate-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.terms-gate-body {
  max-height: 180px;
  overflow-y: auto;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.65;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  scroll-behavior: smooth;
}
.terms-gate-body p { margin: 0 0 0.55rem; }
.terms-gate-body p:last-child { margin-bottom: 0; }

.terms-link {
  color: #0f9b91;
  text-underline-offset: 2px;
  text-decoration: underline;
}
.terms-link:hover { color: #10b981; }

.terms-gate-check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  cursor: pointer;
  font-size: 0.83rem;
  color: var(--text-secondary);
  user-select: none;
}
.terms-gate-check input[type="checkbox"] {
  accent-color: #0f9b91;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
}

.terms-gate-btn {
  width: 100%;
  padding: 0.8rem;
  background: #0f9b91;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition: background 0.15s, opacity 0.15s;
}
.terms-gate-btn:not(:disabled):hover { background: #0c8278; }
.terms-gate-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 520px) {
  .terms-gate-card {
    border-radius: 14px;
    padding: 1.25rem;
  }
}

/* ================================================
   MODAL DE EDIÇÃO
================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, backdrop-filter 220ms ease;
}

.modal-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  transform: translateY(12px) scale(0.98);
  transition: transform 260ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.modal-overlay--visible .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: var(--r-md);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.modal-close svg {
  width: 16px;
  height: 16px;
}

.modal-close:hover {
  background: var(--expense-bg);
  border-color: var(--expense-border);
  color: var(--expense);
}

.modal-close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.modal-body {
  padding: 1.25rem 1.5rem;
}

.modal-fields {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.modal-fields .form-field label:not(.check-wrap) {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 520px) {
  .modal {
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
  }

  .modal-overlay--visible .modal {
    transform: translateY(0);
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .btn-submit,
  .modal-footer .btn-secondary {
    width: 100%;
    text-align: center;
  }
}

/* ================================================
   TOAST DE FEEDBACK
================================================ */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  background: var(--text-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
  max-width: 320px;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.success { background: #15803d; }
.toast.error   { background: var(--expense); }
.toast.info    { background: #92400e; }

/* ================================================
   ANIMAÇÕES
================================================ */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Skeleton loading — shimmer effect */
.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(
    90deg,
    var(--surface-alt) 25%,
    var(--surface-hover) 50%,
    var(--surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease infinite;
  pointer-events: none;
}

.skeleton-kpi {
  height: 115px;
  border-radius: var(--r-xl);
}

.skeleton-row {
  height: 18px;
  margin-bottom: var(--space-2);
  border-radius: var(--r-sm);
}

.skeleton-row:last-child {
  width: 55%;
}

.skeleton-title {
  height: 14px;
  width: 40%;
  margin-bottom: var(--space-3);
  border-radius: var(--r-sm);
  opacity: 0.7;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================
   RESPONSIVO — TABLET (769–1100px)
================================================ */
@media (min-width: 769px) and (max-width: 1100px) {
  :root { --sidebar-w: 200px; }

  .sidebar-brand { font-size: 0.85rem; }

  .form-row {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .ff-type   { grid-column: span 2; }
  .ff-name   { grid-column: span 4; }
  .ff-amount { grid-column: span 2; }
  .ff-extra  { grid-column: span 4; }
  .ff-date   { grid-column: span 3; }
  .ff-check  { grid-column: span 1; }
}

/* ================================================
   RESPONSIVO — MOBILE (≤768px): sidebar sobreposta
================================================ */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }

  .sidebar--open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .sidebar-overlay {
    display: block;
  }

  .mobile-topbar {
    display: flex;
  }

  .main-content {
    margin-left: 0;
    height: auto;
    overflow: visible;
    /* Limita o efeito de bounce/overscroll ao container, não ao body */
    overscroll-behavior-y: contain;
  }

  .content-wrap {
    padding: 1.5rem 1rem 3rem;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .kpi {
    min-height: 120px;
    padding: 1.25rem 1.15rem;
  }

  .kpi .value {
    font-size: 1.2rem;
    overflow-wrap: anywhere;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }

  .ff-type, .ff-amount, .ff-date, .ff-check { grid-column: span 1; }
  .ff-name, .ff-extra { grid-column: span 2; }
  .ff-check { justify-content: flex-start; }

  .tables-section {
    grid-template-columns: 1fr;
  }

  .table-scroll { max-height: 300px; }

  table { min-width: 460px; }

  .toast {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    max-width: none;
  }
}

/* ================================================
   DATA-DEVICE (JS-driven breakpoints)
================================================ */
body[data-device="desktop"] .tables-section {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

body[data-device="mobile"] .kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-device="mobile"] .tables-section {
  grid-template-columns: 1fr;
}

body[data-device="mobile"] .table-scroll {
  max-height: 300px;
}

body[data-device="mobile"] .form-row {
  grid-template-columns: 1fr 1fr;
}

body[data-device="mobile"] .ff-type,
body[data-device="mobile"] .ff-amount,
body[data-device="mobile"] .ff-date,
body[data-device="mobile"] .ff-check  { grid-column: span 1; }

body[data-device="mobile"] .ff-name,
body[data-device="mobile"] .ff-extra  { grid-column: span 2; }

body[data-device="mobile"] .ff-check  { justify-content: flex-start; }

/* Scroll horizontal disponível quando cards são redimensionados — já definido no bloco principal */

/* ================================================
   PAGE SECTIONS — NAVEGAÇÃO
================================================ */
.page-section {
  display: none !important;
  animation: fadeIn 260ms ease;
}

.page-section[style*="display: block"],
.page-section[data-visible="true"] {
  display: block !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================
   FILTROS — TRANSAÇÕES
================================================ */
.filter-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 0.9rem 1.25rem 1.25rem;
  align-items: end;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.filter-field label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.btn-secondary {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: var(--r-md);
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.btn-secondary:hover {
  background: var(--surface-alt);
  border-color: var(--brand);
  color: var(--brand);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Container de transações filtradas */
#transactionsContainer {
  padding: 0.6rem 1.25rem 1.25rem;
}

.transaction-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.transaction-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.transaction-item:hover {
  background: var(--surface-hover);
  border-color: var(--brand-light);
}

.transaction-info {
  flex: 1;
  min-width: 0;
}

.transaction-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transaction-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.transaction-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.transaction-amount-income { color: var(--income); }
.transaction-amount-expense { color: var(--expense); }
.transaction-amount-bill { color: var(--text-primary); }
.transaction-amount-reserve { color: var(--balance); }

/* ================================================
   ESTATÍSTICAS COMPARATIVAS — RELATÓRIOS
================================================ */
.stats-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding: 0 0 1.1rem;
}

.stats-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stats-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.stats-card-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.stats-card-change {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.2rem;
}

.stats-card-change.positive { color: var(--income); }
.stats-card-change.negative { color: var(--expense); }
.stats-card-change.neutral { color: var(--text-muted); }

/* ================================================
   ANÁLISE DE DISTRIBUIÇÃO
================================================ */
#expenseBreakdown,
#annualTrend,
#goalsProgress {
  padding: 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.breakdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.breakdown-label {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.breakdown-bar {
  height: 6px;
  background: var(--border);
  border-radius: var(--r-full);
  flex: 2;
  overflow: hidden;
  min-width: 60px;
}

.breakdown-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--brand);
  transition: width 500ms ease;
}

.breakdown-value {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 60px;
  text-align: right;
}

.breakdown-percent {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ================================================
   CONFIGURAÇÕES — FORMULÁRIOS
================================================ */
#settingsForm,
#goalForm,
#reserveForm {
  padding: 0.9rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

#settingsForm .form-row {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#goalForm .form-row,
#reserveForm .form-row {
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

#goalForm .form-field,
#reserveForm .form-field {
  grid-column: span 1;
}

/* ================================================
   ANIMAÇÕES
================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================
   FAB — Floating Action Button (novo lançamento)
================================================ */
.fab {
  position: fixed;
  bottom: 2rem;
  bottom: max(2rem, env(safe-area-inset-bottom, 0px) + 1.5rem);
  right: 2rem;
  z-index: 300;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-brand), var(--shadow-md);
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
  /* GPU layer: previne que teclado virtual mova o FAB no WebView Android */
  will-change: transform;
  transform: translateZ(0);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fab:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: var(--shadow-brand), var(--shadow-lg);
  background: var(--brand-mid);
}

.fab:active {
  transform: scale(0.95);
}

.fab:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.fab svg {
  width: 26px;
  height: 26px;
  transition: transform var(--t-base);
}

/* Quando modal de lançamento está aberto, gira o ícone */
.fab.fab--active svg {
  transform: rotate(45deg);
}

/* Modal de novo lançamento — versão slide-up */
.entry-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.entry-modal-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.entry-modal {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 600px;
  transform: translateY(100%);
  transition: transform 350ms cubic-bezier(0.34, 1.4, 0.64, 1);
  max-height: 85dvh;
  overflow-y: auto;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.entry-modal-overlay--visible .entry-modal {
  transform: translateY(0);
}

.entry-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
}

.entry-modal-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.entry-modal .quick-form {
  padding: 1.25rem 1.5rem 1.5rem;
}

.entry-modal .form-row {
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.entry-modal .ff-type   { grid-column: span 1; }
.entry-modal .ff-name   { grid-column: span 2; }
.entry-modal .ff-amount { grid-column: span 1; }
.entry-modal .ff-extra  { grid-column: span 1; }
.entry-modal .ff-date   { grid-column: span 1; }
.entry-modal .ff-check  { grid-column: span 1; }

@media (min-width: 769px) {
  .entry-modal {
    border-radius: var(--r-xl);
    max-width: 540px;
    margin-bottom: 5vh;
  }

  .entry-modal-overlay {
    align-items: center;
  }
}

/* ================================================
   PROJECTION CHART CARD
================================================ */
.projection-chart-wrap {
  flex: 1;
  min-height: 180px;
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.projection-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ================================================
   HEALTH SCORE — SVG Circular Gauge 2025
================================================ */
.health-gauge-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.health-gauge-wrap svg {
  display: block;
  width: 80px;
  height: 80px;
}

.health-gauge-track {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 6;
}

.health-gauge-fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transform-origin: center;
  transform: rotate(-90deg);
  /* --glow-size é definido inline pelo JS: 0px (score=0) → 10px (score=100) */
  filter: drop-shadow(0 0 var(--glow-size, 2px) currentColor);
  transition:
    stroke-dashoffset 900ms cubic-bezier(0.25, 1, 0.5, 1),
    stroke 600ms ease,
    filter 800ms ease;
}

.health-gauge-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}

.gauge-score {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gauge-grade {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

/* Glow pulse quando score crítico */
.health-gauge-fill.gauge-bad {
  animation: gauge-pulse 2s ease-in-out infinite;
}

@keyframes gauge-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
  50%       { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 20px currentColor); }
}

/* Mantém compatibilidade com badge legado (removível futuramente) */
.health-score-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  transition: background var(--t-smooth), color var(--t-smooth), box-shadow var(--t-smooth);
}

.health-score-ring.health-good {
  background: var(--income-bg);
  color: var(--income);
  box-shadow: 0 0 16px rgba(52,211,153,0.25);
}

.health-score-ring.health-ok {
  background: var(--warning-bg);
  color: var(--warning);
  box-shadow: 0 0 16px rgba(251,191,36,0.25);
}

.health-score-ring.health-bad {
  background: var(--expense-bg);
  color: var(--expense);
  box-shadow: 0 0 16px rgba(244,114,182,0.25);
}

.health-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}
/* ================================================
   RESPONSIVO — PAGE SECTIONS
================================================ */
@media (max-width: 768px) {
  .filter-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .transaction-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .transaction-amount {
    align-self: flex-end;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .stats-card {
    padding: 1rem;
  }

  .section-split {
    grid-template-columns: 1fr;
  }

  #settingsForm .form-row {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   DASHBOARD ERROR STATE
================================================ */
.dashboard-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-secondary);
  width: 100%;
}
.dashboard-error-state .error-icon {
  color: var(--warning);
  opacity: 0.85;
  width: 36px;
  height: 36px;
}
.dashboard-error-state p {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
}

/* ================================================
   WHATIF PANEL — Simulação "E se?"
================================================ */
.whatif-section {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.whatif-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 0.35rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.whatif-toggle-btn:hover,
.whatif-toggle-btn[aria-expanded="true"] {
  background: var(--brand-light);
  color: var(--brand);
  border-color: var(--brand);
}
html[data-theme="dark"] .whatif-toggle-btn {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
}
html[data-theme="dark"] .whatif-toggle-btn:hover,
html[data-theme="dark"] .whatif-toggle-btn[aria-expanded="true"] {
  background: var(--brand-light);
  color: var(--brand);
}

.whatif-panel {
  margin-top: var(--space-3);
}

.whatif-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

.whatif-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.5rem 0;
}

.whatif-items {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.whatif-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-md);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.whatif-item:has(input:not(:checked)) {
  opacity: 0.5;
  background: transparent;
}
.whatif-item input[type="checkbox"] {
  accent-color: var(--brand);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.whatif-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.whatif-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--neutral-bg);
  border-radius: var(--r-sm);
  padding: 0.1rem 0.4rem;
}
.whatif-value {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--expense);
}
html[data-theme="dark"] .whatif-value {
  color: #f472b6;
}

.whatif-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-md);
  background: var(--brand-light);
  border: 1px solid var(--brand);
  animation: whatif-appear 200ms ease both;
}
@keyframes whatif-appear {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.whatif-sum-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.whatif-sum-value {
  font-size: 0.85rem;
  color: var(--income);
  font-variant-numeric: tabular-nums;
}
.whatif-sum-hint {
  font-size: 0.68rem;
  color: var(--text-subtle);
  margin-left: auto;
}
html[data-theme="dark"] .whatif-summary {
  background: rgba(52,211,153,0.08);
  border-color: rgba(52,211,153,0.3);
}

/* ================================================
   PROJECTION DRILLDOWN — Popup de detalhes
================================================ */
.projection-drilldown {
  position: absolute;
  z-index: 250;
  min-width: 180px;
  max-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.65rem 0.85rem;
  animation: drilldown-pop 140ms cubic-bezier(0.34,1.56,0.64,1) both;
  pointer-events: auto;
}
@keyframes drilldown-pop {
  from { opacity: 0; transform: scale(0.88) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
html[data-theme="dark"] .projection-drilldown {
  background: #1e293b;
  border-color: rgba(255,255,255,0.1);
}
.drilldown-day {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
}
.drilldown-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  padding: 0.2rem 0;
  border-top: 1px solid var(--border);
}
.drilldown-row:first-of-type {
  border-top: none;
}
.drilldown-row span {
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drilldown-row strong {
  color: #f472b6;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.projection-drilldown-close {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: var(--r-sm);
}
.projection-drilldown-close:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* ================================================
   SAÍDAS — coluna de valor (tabular-nums + alinhamento)
================================================ */
.col-currency {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ================================================
   PRODUTO PREMIUM — Scroll, Overscroll, Gauge Anim
   Aparência de Software Instalado
================================================ */

/* Remove solavanco de bounce no scroll (modo app) */
html, body {
  overscroll-behavior: none;
}

/* Scrollbar customizada — webkit */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22);
}

/* Scrollbar Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
html[data-theme="dark"] * {
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

/* Gauge — animação de preenchimento ao abrir */
@keyframes gauge-fill-in {
  from { stroke-dashoffset: 440; opacity: 0.3; }
  to   { opacity: 1; }
}

.gauge-arc-fill {
  animation: gauge-fill-in 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: center;
}

/* Gauge glow pulsante (já existente, reforçado) */
@keyframes gauge-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(52,211,153,0.4)); }
  50%       { filter: drop-shadow(0 0 12px rgba(52,211,153,0.8)); }
}
html[data-theme="dark"] .gauge-arc-fill {
  animation: gauge-fill-in 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             gauge-glow     2.5s ease-in-out 1.2s infinite;
}

/* KPI cards — Bento spacing melhorado */
.kpi-grid {
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.kpi {
  padding: clamp(1rem, 2vw, 1.5rem);
}

.kpi .label {
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  letter-spacing: 0.06em;
}

.kpi .value {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-feature-settings: "tnum","cv02","cv03","cv11";
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 0.35rem;
}

/* Tabelas — mais densidade + ícones de categoria */
.transaction-item {
  padding: clamp(0.6rem, 1.5vw, 0.9rem) clamp(0.75rem, 2vw, 1.25rem);
  gap: clamp(0.5rem, 1vw, 1rem);
}

/* ================================================
   TELA DE ATIVAÇÃO DE LICENÇA
================================================ */
.license-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 16, 33, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.license-card {
  width: min(420px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: license-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme="dark"] .license-card {
  background: #131929;
  border-color: rgba(255,255,255,0.08);
}

@keyframes license-pop {
  from { opacity: 0; transform: scale(0.88) translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.license-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.license-logo span {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

html[data-theme="dark"] .license-logo span { color: #f1f5f9; }

.license-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0;
}

html[data-theme="dark"] .license-title { color: #f1f5f9; }

.license-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.license-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.license-input-wrap label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.license-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: 1rem;
  font-family: "SF Mono", "Fira Code", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--surface-alt);
  color: var(--text-primary);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  box-sizing: border-box;
}

html[data-theme="dark"] .license-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: #f1f5f9;
}

.license-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.15);
}

.license-input.is-error {
  border-color: var(--expense);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}

.license-error-msg {
  font-size: 0.8rem;
  color: var(--expense);
  min-height: 1.1rem;
}

.license-btn-primary {
  width: 100%;
  padding: 0.8rem 1.5rem;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  letter-spacing: 0.01em;
}

.license-btn-primary:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}

.license-btn-primary:active { transform: none; }

.license-trial-link {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.license-trial-link a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}

.license-trial-link a:hover { text-decoration: underline; }

/* ================================================
   BARRA DE EXPORTAÇÃO / IMPORTAÇÃO (flutuante)
================================================ */
.data-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-export,
.btn-import {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}

.btn-export:hover {
  border-color: var(--income);
  color: var(--income);
  background: var(--income-bg);
}

.btn-import:hover {
  border-color: var(--balance);
  color: var(--balance);
  background: var(--balance-bg);
}

html[data-theme="dark"] .btn-export,
html[data-theme="dark"] .btn-import {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: #94a3b8;
}

html[data-theme="dark"] .btn-export:hover {
  background: rgba(22,163,74,0.12);
  border-color: rgba(22,163,74,0.4);
  color: #4ade80;
}

html[data-theme="dark"] .btn-import:hover {
  background: rgba(37,99,235,0.12);
  border-color: rgba(37,99,235,0.4);
  color: #93c5fd;
}

html[data-theme="dark"] .btn-import-pdf:hover {
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.4);
  color: #c4b5fd;
}

/* ================================================
   MODAL DE IMPORTAÇÃO DE EXTRATO PDF
================================================ */
.pdf-import-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: pimFadeIn 0.18s ease;
}

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

.pdf-import-modal {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 1rem;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  animation: pimSlideUp 0.2s cubic-bezier(0.22,1,0.36,1);
  overflow: hidden;
}

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

.pim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}

.pim-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  margin: 0;
}

.pim-title svg { color: #a78bfa; flex-shrink: 0; }

.pim-close {
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.pim-close:hover { background: rgba(239,68,68,0.15); color: #f87171; }

.pim-body {
  padding: 1.4rem;
  overflow-y: auto;
  flex: 1;
}

/* ── Passo 1: seleção ─────────── */
.pim-step { display: flex; flex-direction: column; gap: 1rem; }

.pim-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.pim-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  min-width: 60px;
}

.pim-select {
  flex: 1;
  min-width: 180px;
  background: var(--surface-2, rgba(255,255,255,0.05));
  border: 1.5px solid var(--border, rgba(255,255,255,0.12));
  color: var(--text-primary, #f1f5f9);
  border-radius: 0.5rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.pim-select:focus { border-color: #a78bfa; }
.pim-select option:disabled { color: var(--text-muted, #64748b); }

.pim-file-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  flex: 1;
}

.pim-btn-file {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  background: rgba(167,139,250,0.1);
  border: 1.5px solid rgba(167,139,250,0.35);
  color: #c4b5fd;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.pim-btn-file:hover {
  background: rgba(167,139,250,0.2);
  border-color: #a78bfa;
  color: #ede9fe;
}

.pim-filename {
  font-size: 0.82rem;
  color: var(--text-secondary, #94a3b8);
  font-style: italic;
}

.pim-error {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
  border-radius: 0.5rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.83rem;
}

/* ── Botões primário / secundário ─── */
.pim-btn-primary {
  align-self: flex-end;
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  border: none;
  color: #fff;
  border-radius: 0.6rem;
  padding: 0.6rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
  white-space: nowrap;
}
.pim-btn-primary:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.pim-btn-primary:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }

.pim-btn-secondary {
  background: transparent;
  border: 1.5px solid var(--border, rgba(255,255,255,0.1));
  color: var(--text-secondary, #94a3b8);
  border-radius: 0.6rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.pim-btn-secondary:hover { border-color: #94a3b8; color: #f1f5f9; }

/* ── Passo 2: resumo ─────────── */
.pim-summary {
  background: var(--surface-2, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 0.75rem;
  padding: 1rem 1.2rem;
}

.pim-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.pim-sum-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: rgba(255,255,255,0.04);
  border-radius: 0.6rem;
  padding: 0.6rem 0.5rem;
}

.pim-sum-item strong {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}
.pim-sum-item span {
  font-size: 0.75rem;
  color: var(--text-secondary, #94a3b8);
}

.pim-sum-new  strong { color: #4ade80; }
.pim-sum-skip strong { color: #64748b; }
.pim-sum-inc  strong { color: #60a5fa; }
.pim-sum-exp  strong { color: #f87171; }
.pim-sum-bill strong { color: #fbbf24; }

.pim-sum-breakdown {
  font-size: 0.79rem;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.5;
}

/* ── Tabela de preview ─────────── */
.pim-preview-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  border-radius: 0.6rem;
  max-height: 320px;
  overflow-y: auto;
}

.pim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.pim-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface, #1e293b);
}

.pim-table th {
  padding: 0.55rem 0.75rem;
  text-align: left;
  color: var(--text-secondary, #94a3b8);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.pim-th-amt { text-align: right; }

.pim-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}

.pim-td-desc {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary, #f1f5f9);
}

.pim-td-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.pim-debit  { color: #f87171; }
.pim-credit { color: #4ade80; }

.pim-row-dupe { opacity: 0.42; }
.pim-row-new  { }

.pim-badge-dupe,
.pim-badge-new {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.pim-badge-new  { background: rgba(74,222,128,0.12); color: #4ade80; }
.pim-badge-dupe { background: rgba(100,116,139,0.18); color: #94a3b8; }

.pim-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Passo 3: conclusão ────────── */
.pim-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  color: var(--text-primary, #f1f5f9);
}

.pim-done-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(74,222,128,0.15);
  border: 2px solid #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #4ade80;
  margin-bottom: 0.4rem;
}

.pim-done-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.88rem;
  color: var(--text-secondary, #94a3b8);
}

.pim-done-note {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  margin: 0;
}

@media (max-width: 560px) {
  .pdf-import-modal { max-height: 95vh; border-radius: 0.75rem; }
  .pim-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .pim-td-desc      { max-width: 150px; }
  .pim-actions      { flex-direction: column-reverse; }
  .pim-btn-primary,
  .pim-btn-secondary { width: 100%; justify-content: center; }
}

/* ================================================
   MODO PRODUTO — oculta URL bar no standalone
================================================ */
@media (display-mode: standalone) {
  .mobile-topbar {
    padding-top: env(safe-area-inset-top, 0px);
  }
  body {
    user-select: none;
    -webkit-user-select: none;
  }
  /* Permite selecionar em inputs e células de dados */
  input, textarea, [contenteditable], table td, .kpi .value {
    user-select: text;
    -webkit-user-select: text;
  }
}

/* ================================================
   TOUCH-ACTION — desabilita double-tap zoom em todos os interativos
================================================ */
button,
a,
[role="button"],
.nav-item,
.bottom-nav-item,
.fab,
.hamburger,
.btn-submit,
.btn-secondary,
.delete-btn,
.edit-btn,
.modal-close,
.card-ctrl-btn,
.check-wrap,
.whatif-toggle-btn,
.btn-canvas-reset,
.period-selector select,
select,
input,
label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ================================================
   BOTTOM NAVIGATION BAR (mobile only)
================================================ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
   z-index: 320;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px -4px rgba(0, 0, 0, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
  }
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--bottom-nav-h);
  min-width: 0;
  text-decoration: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color var(--t-fast);
  outline: none;
}

.bottom-nav-item svg {
  flex-shrink: 0;
}

.bottom-nav-item--active {
  color: var(--brand);
}

.bottom-nav-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.bottom-nav-item:active {
  opacity: 0.65;
}

html[data-theme="dark"] .bottom-nav {
  box-shadow: 0 -2px 20px -4px rgba(0, 0, 0, 0.4);
}

/* ================================================
   MOBILE — FAB e TOAST acima do Bottom Nav
================================================ */
@media (max-width: 768px) {
  .fab {
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 1.9rem);
    right: max(1rem, env(safe-area-inset-right));
  }

  .toast {
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 0.75rem);
    right: 1rem;
    left: 1rem;
    max-width: none;
  }

  /* Padding inferior do conteúdo: FAB (56px) + espaço + bottom nav */
  .content-wrap {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 5rem);
  }

  /* Impede zoom do iOS ao focar inputs (font-size mínimo 16px) */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: max(16px, 0.85rem);
  }

  /* Touch targets mínimos: 44×44 CSS px */
  .hamburger {
    width: 44px;
    height: 44px;
  }

  .modal-close {
    width: 44px;
    height: 44px;
  }

  .delete-btn,
  .edit-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .card-ctrl-btn {
    width: 44px;
    height: 44px;
  }

  .nav-item {
    min-height: 44px;
    padding: 0.6rem 0.65rem;
  }

  .btn-canvas-reset {
    min-height: 36px;
    padding: 0.35rem 0.75rem;
  }

  .btn-submit {
    min-height: 48px;
  }

  .btn-secondary {
    min-height: 44px;
  }
}

/* Standalone (APK): compensa safe-area-inset-bottom no Bottom Nav */
@media (display-mode: standalone) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .fab {
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 1.9rem);
  }
}

/* ================================================
   TABELA → CARDS DE LISTA (≤520px)
   Converte tabelas horizontais em cards empilhados,
   usando data-label (adicionado via JS) como rótulo.
================================================ */
@media (max-width: 520px) {
  .table-scroll {
    overflow: visible;
    max-height: none;
  }

  .table-scroll table {
    min-width: 0 !important;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Exibição em bloco para todos os elementos da tabela */
  .table-scroll table,
  .table-scroll thead,
  .table-scroll tbody,
  .table-scroll th,
  .table-scroll td,
  .table-scroll tr {
    display: block;
  }

  /* Oculta o cabeçalho visualmente (mantido para acessibilidade via aria) */
  .table-scroll thead tr {
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
  }

  /* Cada linha vira um card */
  .table-scroll tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: 0.65rem;
    padding: 0.6rem 0.85rem;
    background: var(--surface);
    position: relative;
    overflow: hidden;
    transition: transform 200ms ease, opacity 200ms ease;
  }

  /* Cada célula exibe rótulo via data-label */
  .table-scroll tbody td {
    border: none;
    padding: 0.2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    white-space: normal;
    min-height: 0;
    gap: 0.5rem;
  }

  .table-scroll tbody td::before {
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 4.5rem;
  }

  /* Linha de ações: sem rótulo, alinhar à direita */
  .table-scroll tbody td:last-child {
    padding-top: 0.45rem;
    border-top: 1px solid var(--border);
    margin-top: 0.3rem;
    justify-content: flex-end;
  }

  .table-scroll tbody td:last-child::before {
    display: none;
  }

  /* Botões de ação maiores dentro dos cards */
  .table-scroll .action-group {
    gap: 0.4rem;
  }

  .table-scroll .delete-btn,
  .table-scroll .edit-btn {
    min-height: 36px;
    padding: 0.4rem 0.85rem;
    font-size: 0.72rem;
  }

  /* Indica swipe disponível: borda esquerda brand */
  .table-scroll tbody tr[data-swipeable] {
    border-left: 3px solid var(--brand);
  }

  /* Animação de saída on swipe-delete */
  .table-scroll tbody tr.swipe-exit {
    transform: translateX(-110%) !important;
    opacity: 0;
    transition: transform 200ms ease, opacity 180ms ease !important;
  }
}

/* ================================================
   DESABILITAR HOVER EM DISPOSITIVOS TOUCH
   @media (hover: none) — cobre Android/iOS WebView
================================================ */
@media (hover: none) {
  /* KPI cards — sem lift no touch */
  .kpi:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
    border-color: var(--glass-border);
  }

  /* Cards — sem glow hover */
  .card:hover {
    box-shadow: var(--shadow-sm);
  }

  html[data-theme="dark"] .card:hover::after {
    opacity: 0;
  }

  /* Sidebar itens — sem hover */
  .nav-item:hover {
    background: transparent;
    color: var(--sidebar-text);
  }

  .nav-item--active:hover {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
  }

  /* FAB — sem scale no hover */
  .fab:hover {
    transform: translateZ(0);
    box-shadow: var(--shadow-brand), var(--shadow-md);
    background: var(--brand);
  }

  /* Botões — sem hover */
  .btn-submit:hover {
    background: var(--brand);
    box-shadow: none;
    transform: none;
  }

  .delete-btn:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
  }

  .edit-btn:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
  }

  /* Tabela — sem row hover */
  tbody tr:hover td {
    background: transparent;
  }

  .card-ctrl-btn:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-subtle);
  }

  .hamburger:hover {
    background: transparent;
    border-color: var(--border);
  }

  /* ── Estados :active para feedback tátil imediato ── */
  .kpi:active {
    box-shadow: var(--shadow-md);
    transform: scale(0.97) translateZ(0);
    transition: transform 80ms ease, box-shadow 80ms ease;
  }

  .fab:active {
    transform: scale(0.92) translateZ(0);
    transition: transform 80ms ease;
  }

  .btn-submit:active {
    background: var(--brand-dark);
    transform: scale(0.97);
    transition: transform 80ms ease;
  }

  .btn-secondary:active {
    background: var(--surface-hover);
    transform: scale(0.97);
  }

  .delete-btn:active {
    background: var(--expense-bg);
    border-color: var(--expense-border);
    color: var(--expense);
  }

  .edit-btn:active {
    background: var(--brand-light);
    border-color: var(--brand);
    color: var(--brand);
  }

  .nav-item:active {
    background: var(--sidebar-hover);
  }

  .hamburger:active {
    background: var(--surface-alt);
  }

  .card:active {
    box-shadow: var(--shadow-md);
  }

  .bottom-nav-item:active {
    opacity: 0.55;
  }

  .modal-close:active {
    background: var(--expense-bg);
    color: var(--expense);
  }
}