:root{
  --bg: #0f1116;
  --surface: #151a24;
  --surface-2: #1b2130;
  --surface-3: #20283a;
  --stroke: #2a3244;
  --text: #edf1f7;
  --muted: #a5afc4;
  --shadow: 0 10px 28px rgba(9,12,20,0.45);
  --radius: 18px;
  --radius2: 12px;

  --accent: #16a34a;
  --accent-strong: #15803d;
  --accent-soft: rgba(22,163,74,0.18);
  --ring: rgba(22,163,74,0.35);

  --card: var(--surface);
  --card2: var(--surface-2);
  --chip: var(--surface-2);
  --input: #121827;
  --inputFocus: #182033;

  --gradA: linear-gradient(135deg, var(--accent), var(--accent-strong));
  --gradB: linear-gradient(135deg, rgba(22,163,74,0.2), rgba(21,128,61,0.2));

  /* Grid columns */
  --col-desc: minmax(0, 2.2fr);
  --col-value: minmax(0, 0.9fr);
  --col-date: minmax(0, 0.9fr);
  --col-cat: minmax(0, 1.1fr);
  --col-essential: minmax(0, 0.9fr);
  --col-btn: 42px;
  --col-del: 42px;
}

[data-theme="light"]{
  --bg: #f1f5fb;
  --surface: #f7f9fc;
  --surface-2: #e1e7ed;
  --surface-3: #e3eaf4;
  --stroke: #cfd8e6;
  --text: #0b1324;
  --muted: #5b6a83;
  --shadow: 0 10px 24px rgba(15,23,42,0.08);

  --card: var(--surface);
  --card2: var(--surface-2);
  --chip: var(--surface-2);
  --input: #edf0f4;
  --inputFocus: #e4ebf6;
  --accent-soft: rgba(22,163,74,0.12);
  --ring: rgba(22,163,74,0.25);
}

*{ box-sizing: border-box; }
html, body{
  overflow-x: hidden;
}
body{
  margin:0;
  font-family: "Manrope", "Segoe UI Variable Text", "SF Pro Text", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x:hidden;
}

.bg-orb{ display:none; }

.topbar{
  position: sticky;
  top:0;
  z-index: 10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
[data-theme="light"] .topbar{ background: var(--surface); }

.brand{ display:flex; align-items:center; gap:10px; }
.logo{
  width:42px; height:42px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: var(--accent);
  box-shadow: 0 6px 16px rgba(22,163,74,0.35);
}
.logo i{ color: white; }

.brand-text .title{ font-weight: 800; letter-spacing: -0.5px; }
.brand-text .subtitle{ font-size: 12px; color: var(--muted); margin-top:-2px; }

.topbar-actions{ display:flex; align-items:center; gap:10px; }

.email-toggle{
  display:none;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
  gap:8px;
  align-items:center;
}
[data-theme="light"] .email-toggle{
  color: var(--text);
  background: var(--surface-2);
}

.topbar-email{
  display:none;
  width:100%;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  color: var(--text);
  align-items:center;
  gap:8px;
  font-size: 12px;
}
.topbar-email.show{ display:flex; }
[data-theme="light"] .topbar-email{
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--stroke);
}

.container{
  position: relative;
  z-index:1;
  padding: 14px 14px 92px;
  max-width: 1100px;
  margin: 0 auto;
}

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.dashboard{ display:grid; gap: 14px; }
.dash-hero{ padding: 14px; }
.dash-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-actions{ display:flex; gap: 10px; flex-wrap: wrap; }
.dash-stats{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.stat-card{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
}
.stat-label{ font-size: 12px; color: var(--muted); font-weight: 900; }
.stat-value{ font-size: 20px; font-weight: 1100; margin-top: 6px; }

.months-grid{
  padding: 12px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.month-card{
  text-align:left;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap: 8px;
  color: var(--text);
}
.month-card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}
.month-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 8px;
}
.month-menu{ margin-left:auto; }
.month-menu .menu-btn{
  width:32px; height:32px;
  border-radius: 10px;
}
.month-menu .menu-pop{ top: 36px; }
.month-card.active{
  border-color: var(--accent);
  box-shadow: 0 12px 24px rgba(22,163,74,0.25);
}
.month-title{ font-weight: 1000; letter-spacing:-0.2px; }
.month-meta{ font-size: 12px; color: var(--muted); }
.month-cta{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
  opacity: 0.85;
}

.goal-list{
  padding: 12px;
  display:grid;
  gap: 10px;
}
.goal-item{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
}
.goal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}
.goal-title{ font-weight: 1000; }
.goal-values{ font-size: 12px; color: var(--muted); font-weight: 900; }
.goal-bar{
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow:hidden;
  margin-top: 10px;
}
.goal-bar span{
  display:block;
  height:100%;
  background: var(--accent);
  width:0%;
}

body.is-dashboard .bottom-nav{
  display:none !important;
}

.icon-btn{
  width:42px; height:42px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: var(--surface-2);
  color: var(--text);
  cursor:pointer;
  display:grid; place-items:center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.icon-btn:hover{ background: var(--surface-3); }
.pill-btn{
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 700;
  cursor:pointer;
  display:flex; align-items:center; gap:10px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pill-btn.ghost{
  background: transparent;
}
.pill-btn:hover{ background: var(--surface-3); }

.user-chip{
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.user-chip .dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--accent);
}
.user-email{ font-size: 12px; color: var(--muted); max-width: 220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.grid{ display:grid; gap: 14px; }
.grid > *{ min-width: 0; }
.grid-hero{ margin-top: 14px; grid-template-columns: 1fr; }

.hero-card{ padding: 14px; }
.hero-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hero-head h2{ margin:0; letter-spacing:-0.4px; }
.muted{ color: var(--muted); }

.hero-body{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.hero-gauge{
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 10px;
  min-height: 220px;
  overflow:hidden;
}

.hero-stats{ display:grid; gap: 10px; }
.stat{ padding: 12px; border-radius: 18px; border:1px solid var(--stroke); background: var(--surface-2); }
.stat-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.stat .k{ font-weight: 800; font-size: 13px; color: var(--muted); }
.stat .v{ font-weight: 900; letter-spacing:-0.3px; }
.bar{ height: 8px; border-radius: 999px; background: var(--surface-3); overflow:hidden; margin-top: 10px; }
.bar span{ display:block; height:100%; width: 0%; background: var(--accent); border-radius:999px; }

.hero-foot{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.month-select{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
}

.month-scroller{
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  display:grid;
  gap: 10px;
}
.month-scroller-head{
  display:flex;
  align-items:center;
  gap: 10px;
}
.month-active{ font-weight: 1000; }
.month-scroll{
  display:flex;
  flex-direction: column;
  gap: 8px;
  max-height: 142px;
  overflow-y:auto;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}
.month-pill{
  border: 1px solid var(--stroke);
  background: var(--input);
  color: var(--text);
  width: 100%;
  height: 48px;
  padding: 6px;
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
  white-space: nowrap;
}
.month-pill.active{
  background: var(--accent-soft);
  border-color: var(--accent);
}

input, select, textarea{
  width:100%;
  border:1px solid var(--stroke);
  background: var(--input);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 10px;
  outline:none;
}
input:focus, select:focus, textarea:focus{
  background: var(--inputFocus);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

button:focus-visible,
.pill-btn:focus-visible,
.icon-btn:focus-visible,
.primary-btn:focus-visible,
.ghost-btn:focus-visible,
.google-btn:focus-visible,
.nav-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

::placeholder{
  color: rgba(165,175,196,0.7);
}
[data-theme="light"] ::placeholder{
  color: rgba(93,107,131,0.6);
}


input, select{ height: 42px; }
/* Melhor contraste dos options no DARK */
:root select option{
  background-color: var(--surface-2);
  color: var(--text);
}
[data-theme="light"] select option{
  background-color: var(--surface-2);
  color: var(--text);
}

.notes-area{
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px;
}
.notes-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.notes-title{ display:flex; align-items:center; gap:10px; }
.notes-area textarea{
  min-height: 120px;
  resize: vertical;
}

/* Cards */
.card-head{
  padding: 14px 14px 10px;
  display:flex; align-items:flex-start; justify-content:space-between; gap: 10px;
}
.card-head h3{ margin:0; letter-spacing:-0.3px; }
.card-head .right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.chip{
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--stroke);
  font-size: 12px;
  color: var(--muted);
}
.chip strong{ color: var(--text); }

.card-foot{
  padding: 0 14px 14px;
}
.add-row{
  width: 100%;
  border: 1px dashed var(--stroke);
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 16px;
  font-weight: 700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap: 10px;
}
.add-row:hover{ background: var(--surface-3); }

.table-wrap{
  padding: 8px 8px 0;
  margin-bottom: 10px;
  overflow-x: auto;
  overflow-y: visible;
  min-width: 0;            /* evita bug de grid */
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: 18px;
}

/* TABELA estilo planilha */
.data-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 0;
}
.data-table thead th{
  font-size: 12px;
  color: var(--muted);
  text-align: left;
  padding: 0 10px 6px;
  font-weight: 900;
}
.data-table tbody tr{
  background: transparent;
  border: 0;
}
.data-table tbody td{
  padding: 0;
  vertical-align: middle;
}
.rowbox{
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  max-width: 100%;
  min-width: 0;
}
.rowgrid{
  display:grid;
  gap: 8px;
  padding: 10px;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  border-bottom: 1px solid var(--stroke);
}

.rowgrid > *{
  min-width: 0;
}
.rowgrid input, .rowgrid select{ width: 100%; min-width: 0; }

/* layouts por tipo */
.rowgrid.income{
  grid-template-columns: var(--col-desc) var(--col-value) var(--col-date) var(--col-del);
}

.rowgrid.fixed{
  grid-template-columns: var(--col-desc) var(--col-value) var(--col-date) var(--col-cat) var(--col-del);
}

.rowgrid.vars{
  grid-template-columns: var(--col-desc) var(--col-value) var(--col-date) var(--col-cat) var(--col-essential) var(--col-del);
}

/* reservas você pode criar variáveis próprias, ex: */
:root{
  --col-goal: minmax(0, 1fr);
  --col-total: minmax(0, 1fr);
  --col-month: minmax(0, 1fr);
  --col-rest: minmax(0, 1fr);
}
.rowgrid.res{
  grid-template-columns: var(--col-desc) var(--col-goal) var(--col-total) var(--col-month) var(--col-rest) var(--col-del);
}

.row-menu{
  position: relative;
}

.cell-box{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 0;
}
.cell-label{
  display:none;
  font-size: 11px;
  color: var(--muted);
  font-weight: 900;
}
.row-menu summary{
  list-style: none;
}
.row-menu summary::-webkit-details-marker{
  display:none;
}
.menu-btn{
  width:42px; height:42px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: var(--surface-2);
  cursor:pointer;
  color: var(--text);
  display:grid; place-items:center;
}
.menu-pop{
  position:absolute;
  right:0;
  top: 48px;
  background: var(--card2);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--shadow);
  min-width: 140px;
  z-index: 5;
}
.menu-item{
  width:100%;
  border:0;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  text-align:left;
  cursor:pointer;
  font-weight: 900;
}
.menu-item:hover{
  background: var(--surface-3);
}
.menu-item.danger{
  color: rgba(255,120,140,0.95);
}

.table-head-grid{
  display: grid;
  gap: 8px;
  padding: 10px;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  align-items: center;
  border-bottom: 1px solid var(--stroke);
}

.table-head-grid.income{
  grid-template-columns: var(--col-desc) var(--col-value) var(--col-date) var(--col-del);
}
.table-head-grid.fixed{
  grid-template-columns: var(--col-desc) var(--col-value) var(--col-date) var(--col-cat) var(--col-del);
}
.table-head-grid.vars{
  grid-template-columns: var(--col-desc) var(--col-value) var(--col-date) var(--col-cat) var(--col-essential) var(--col-del);
}
.table-head-grid.res{
  grid-template-columns: var(--col-desc) var(--col-goal) var(--col-total) var(--col-month) var(--col-rest) var(--col-del);
}

.table-head-grid > div{ padding: 0; }
.table-head-grid .left{ text-align: left; } /* se quiser alinhar “Valor” */

.data-table tbody tr:last-child .rowgrid{
  border-bottom: 0;
}


.value-wrap{
  display:flex;
  align-items:center;
  gap: 0;
  min-width: 0;
}
.value-wrap input{ flex: 1; min-width: 0; }
.calc-open{
  width:42px; height:42px;
  border-radius: 0 16px 16px 0;
  border:1px solid var(--stroke);
  background: var(--surface-2);
  cursor:pointer;
  color: var(--text);
  display:grid; place-items:center;
}
.value-wrap input{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.calc-open{
  border-left: 0;
}
.del{
  width:42px; height:42px;
  border-radius: 16px;
  border:1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.12);
  cursor:pointer;
  color: #ef4444;
  display:grid; place-items:center;
}

/* Resumo */
.big-summary{ padding-bottom: 16px; }
.summary-grid{
  padding: 0 14px 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sum-item{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
}
.sum-item span{ color: var(--muted); font-weight: 900; font-size: 12px; }
.sum-item strong{ display:block; margin-top: 6px; font-size: 16px; letter-spacing:-0.2px; }
.sum-total{
  grid-column: 1 / -1;
  padding: 14px;
  border-radius: 20px;
  background: var(--accent);
  color: white;
}
.sum-total .label{ font-weight: 1000; opacity: 0.92; }
.sum-total .value{ font-weight: 1100; font-size: 28px; letter-spacing:-0.8px; margin-top: 6px; }
.sum-total .hint{ margin-top: 6px; opacity: 0.9; font-weight: 900; font-size: 12px; }

/* Charts – CORREÇÃO DO BUG (overflow + scroll jump) */
.charts-grid{
  padding: 12px 12px 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}
.mini-card{
  padding: 12px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  min-width: 0;
  overflow: hidden;
}
.mini-card h4{
  margin:0 0 10px;
  letter-spacing:-0.2px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 1000;
}
.chart-box{
  width: 100%;
  min-width: 0;
  height: 260px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--surface-3);
}
[data-theme="light"] .chart-box{ background: var(--surface-2); }
canvas{
  display:block;
  max-width:100% !important;
  width:100% !important;
  height:100% !important;
}

/* lista de categorias */
.category-list{
  padding: 12px 12px 16px;
  display:grid;
  gap: 10px;
}
.cat-item{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.cat-left{ display:flex; align-items:center; gap: 10px; }
.cat-dot{ width: 12px; height: 12px; border-radius: 999px; }
.cat-name{ font-weight: 1000; }
.cat-value{ font-weight: 1100; }

/* highlight */
.highlight-card{ padding: 14px; }
.highlight-body{
  margin-top: 10px;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  overflow:hidden;
  height: 260px;
  background: var(--surface-2);
}
.highlight-foot{
  margin-top: 10px;
  display:flex; flex-wrap:wrap; gap: 8px;
}
.pill{
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  font-size: 13px;
  color: var(--muted);
}
.pill strong{ color: var(--text); }

/* Tabs */
.tabs{ margin-top: 14px; }
.hidden{ display:none !important; }

/* Bottom Nav */
.bottom-nav{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 20;
  display:flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border-top: 1px solid var(--stroke);
}

.nav-btn{
  flex:1;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  border-radius: 18px;
  padding: 10px 8px;
  color: var(--muted);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  font-weight: 1000;
}
.nav-btn i{ font-size: 18px; }
.nav-btn span{ font-size: 12px; }
.nav-btn.active{
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--accent);
}

/* Modal + Drawer + Toast (mantidos do anterior) */
.modal{
  position: fixed;
  inset:0;
  z-index: 50;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,0.55);
  padding: 16px;
}
.modal-card{
  width: min(520px, 100%);
  background: var(--card2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--stroke);
}
.modal-body{ padding: 14px; display:grid; gap: 12px; }

.drawer{
  position: fixed;
  inset:0;
  z-index: 60;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background: rgba(0,0,0,0.55);
  padding: 14px;
}
.drawer-card{
  width: min(560px, 100%);
  background: var(--card2);
  border: 1px solid var(--stroke);
  border-radius: 26px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.drawer-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--stroke);
}
.drawer-title{ font-weight: 1100; letter-spacing:-0.3px; }
.drawer-sub{ font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 900; }
.drawer-body{ padding: 14px; display:grid; gap: 12px; }
.calc-row{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--surface-2);
}
.calc-value strong{ display:block; margin-top: 4px; font-size: 18px; }
.calc-input input{ width: 180px; }
.calc-actions{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-btn{
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  color: var(--text);
  padding: 12px;
  border-radius: 16px;
  font-weight: 1100;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap: 10px;
}
.calc-btn:hover{ background: var(--surface-3); }

.toast-root{
  position: fixed;
  left: 0; right: 0;
  top: 72px;
  z-index: 80;
  display:grid;
  gap: 10px;
  padding: 0 12px;
  pointer-events:none;
}
.toast{
  width: min(560px, calc(100% - 24px));
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  pointer-events:auto;
}
[data-theme="light"] .toast{ background: var(--surface); border-color: var(--stroke); }
.toast .msg{ font-weight: 900; }
.toast .x{ border:0; background:transparent; color: var(--muted); cursor:pointer; }

/* Auth page (mantém) */
.auth{ display:flex; align-items:center; min-height: calc(100vh - 70px); }
.auth-card{
  width:100%;
  display:grid;
  grid-template-columns: 1fr;
  overflow:hidden;
}
.auth-hero{
  padding: 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--stroke);
}
.auth-hero h1{ margin: 14px 0 8px; font-size: 26px; letter-spacing:-0.6px; }
.auth-hero p{ margin:0; color: var(--muted); line-height:1.35; font-weight: 700; }

.auth-forms{ padding: 18px; }
.segmented{
  display:flex;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 4px;
  gap:4px;
}
.seg-btn{
  flex:1;
  border:0;
  padding: 10px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor:pointer;
}
.seg-btn.active{
  background: var(--input);
  color: var(--text);
}
.form{ margin-top: 14px; display:flex; flex-direction:column; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field span{ font-size: 12px; color: var(--muted); font-weight: 900; }
.input-with-btn{
  display:flex;
  align-items:center;
  gap:8px;
}
.input-with-btn input{
  flex:1;
}
.input-btn{
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: var(--surface-2);
  color: var(--text);
  cursor:pointer;
  display:grid; place-items:center;
}
.primary-btn{
  border:0;
  background: var(--accent);
  color: white;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.primary-btn:hover{ background: var(--accent-strong); }
.ghost-btn{
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--text);
  padding: 11px 14px;
  border-radius: 16px;
  font-weight: 700;
  cursor:pointer;
}
.ghost-btn:hover{ background: var(--surface-2); }
.google-btn{
  border: 1px solid var(--stroke);
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.google-btn:hover{ background: var(--surface-3); }
.divider{
  margin: 14px 0;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.divider::before, .divider::after{ content:""; flex:1; height:1px; background: var(--stroke); }
.tiny-note{ font-size: 12px; color: var(--muted); margin: 12px 2px 0; line-height:1.35; font-weight: 700; }

/* Desktop */
@media (min-width: 920px){

:root{
  --col-desc: minmax(0, 2.6fr);
  --col-value: minmax(0, 0.9fr);
  --col-date: minmax(0, 1fr);
  --col-cat: minmax(0, 1.4fr);
  --col-essential: minmax(0, 1fr);
}

  .container{ padding: 16px 16px 24px; }
  .grid-hero{ grid-template-columns: 1.35fr 0.95fr; }
  .hero-body{ grid-template-columns: 1fr 0.95fr; }
  .hero-foot{ grid-template-columns: 260px 1fr; }
  .charts-grid{ grid-template-columns: 1fr 1fr; }
  .auth-card{ grid-template-columns: 1fr 1fr; }
  .auth-hero{ border-bottom: 0; border-right: 1px solid var(--stroke); }

  /* bottom nav vira “barra lateral” no topo */
  .bottom-nav{ position: sticky; top: 72px; bottom: auto; background: transparent; border-top:0; padding: 0; margin-top: 12px; }
  .nav-btn{ flex:0; width: 160px; flex-direction:row; justify-content:flex-start; padding: 12px 14px; }
  .nav-btn span{ font-size: 13px; }

  /* tabelas mais “adultas” no desktop */
}

@media (max-width: 720px){
  .cell-desc{ grid-area: desc; }
  .cell-value{ grid-area: value; }
  .cell-date{ grid-area: date; }
  .cell-cat{ grid-area: cat; }
  .cell-essential{ grid-area: essential; }
  .cell-menu{ grid-area: menu; }
  .cell-goal{ grid-area: goal; }
  .cell-total{ grid-area: total; }
  .cell-month{ grid-area: month; }
  .cell-rest{ grid-area: rest; }

  .topbar{ flex-wrap: wrap; }
  .topbar-actions{
    width: 100%;
    margin-top: 8px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .user-chip{ display:none; }
  .email-toggle{ display:flex; }
  .topbar-email{ order: 3; }

  .table-head-grid{ display:none; }

  .rowgrid.income{
    grid-template-columns: 1.4fr 1fr 42px;
    grid-template-areas:
      "desc desc menu"
      "value date menu";
  }
  .rowgrid.fixed{
    grid-template-columns: 1.4fr 1fr 1fr 42px;
    grid-template-areas:
      "desc desc date menu"
      "value cat cat menu";
  }
  .rowgrid.vars{
    grid-template-columns: 1.4fr 1fr 1fr 42px;
    grid-template-areas:
      "desc desc desc menu"
      "value cat cat  menu"
      "essential essential date menu";
  }
  .rowgrid.res{
    grid-template-columns: 1.4fr 1fr 1fr 42px;
    grid-template-areas:
      "desc desc desc menu"
      "goal total total menu"
      "month rest rest menu";
  }

  .rowgrid.vars{
    gap: 6px;
    padding: 8px;
  }

  .rowgrid.res{
    gap: 6px;
    padding: 8px;
  }
  .rowgrid.res input,
  .rowgrid.res select{
    height: 38px;
  }
  .cell-label{
    display:block;
  }

  .menu-pop{
    right: 0;
    left: auto;
  }
}

@media (max-width: 600px){
  :root{
    --col-desc: minmax(0, 1.6fr);
    --col-value: minmax(0, 1fr);
    --col-date: minmax(0, 1fr);
    --col-cat: minmax(0, 1fr);
    --col-essential: minmax(0, 1fr);
  }
}