:root {
  color-scheme: dark;
  --bg: #050505;
  --bg-soft: #0d0d0e;
  --surface: rgba(255, 255, 255, 0.075);
  --surface-strong: rgba(255, 255, 255, 0.12);
  --surface-border: rgba(255, 255, 255, 0.16);
  --text: #f7f7f7;
  --muted: rgba(255, 255, 255, 0.62);
  --faint: rgba(255, 255, 255, 0.38);
  --accent: #ffffff;
  --accent-text: #050505;
  --danger: #ff8d8d;
  --success: #c9ffd8;
  --warning: #ffe6a1;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --sidebar: 252px;
}

body.light-theme {
  color-scheme: light;
  --bg: #ececee;
  --bg-soft: #f7f7f8;
  --surface: rgba(255, 255, 255, 0.58);
  --surface-strong: rgba(255, 255, 255, 0.82);
  --surface-border: rgba(0, 0, 0, 0.10);
  --text: #0c0c0d;
  --muted: rgba(0, 0, 0, 0.58);
  --faint: rgba(0, 0, 0, 0.34);
  --accent: #090909;
  --accent-text: #ffffff;
  --shadow: 0 24px 70px rgba(34, 34, 38, 0.16);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 15% -10%, rgba(255, 255, 255, .10), transparent 33%),
    radial-gradient(circle at 100% 90%, rgba(255, 255, 255, .08), transparent 35%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.ambient {
  position: fixed;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .22;
  z-index: -1;
}
.ambient-a { width: 420px; height: 420px; top: -180px; right: -130px; background: #fff; }
.ambient-b { width: 360px; height: 360px; bottom: -180px; left: -140px; background: #777; }

.glass {
  background: linear-gradient(145deg, var(--surface-strong), var(--surface));
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  backdrop-filter: blur(28px) saturate(125%);
}

.auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-card {
  width: min(100%, 470px);
  border-radius: 36px;
  padding: 36px;
}
.auth-card.compact { width: min(100%, 390px); text-align: center; }
.brand-mark {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  margin-bottom: 24px;
  background: linear-gradient(145deg, #fff, #bdbdbd);
  color: #050505;
  font-size: 34px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 #fff, 0 18px 38px rgba(0, 0, 0, .28);
}
.brand-mark.small { width: 46px; height: 46px; border-radius: 17px; font-size: 22px; margin: 0; flex: 0 0 auto; }
.auth-card.compact .brand-mark { margin-inline: auto; }
.auth-card h1 { margin: 6px 0 10px; font-size: clamp(30px, 6vw, 46px); line-height: 1.02; letter-spacing: -.045em; }
.eyebrow { margin: 0; color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .14em; }
.muted { color: var(--muted); line-height: 1.55; }
.small-copy { font-size: 13px; }
.form-message { min-height: 22px; color: var(--danger); }

.app-shell { min-height: 100vh; padding: 18px; }
.sidebar {
  position: fixed;
  inset: 18px auto 18px 18px;
  width: var(--sidebar);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand-row { display: flex; align-items: center; gap: 13px; padding: 4px 4px 24px; }
.brand-row strong { display: block; font-size: 21px; letter-spacing: -.03em; }
.brand-row span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.nav-list { display: grid; gap: 8px; }
.nav-button, .mobile-nav-button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-button {
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border-radius: 15px;
  color: var(--muted);
  font-weight: 650;
  transition: .18s ease;
}
.nav-button:hover, .nav-button.active { color: var(--text); background: rgba(255,255,255,.10); transform: translateX(2px); }
body.light-theme .nav-button:hover, body.light-theme .nav-button.active { background: rgba(0,0,0,.07); }
.sidebar-footer { margin-top: auto; display: flex; gap: 8px; }

.main-content { margin-left: calc(var(--sidebar) + 22px); min-width: 0; padding-bottom: 10px; }
.topbar {
  position: sticky;
  top: 18px;
  z-index: 15;
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.topbar h1 { margin: 3px 0 0; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.045em; }
.topbar-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.status-pill {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--surface-border);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.status-pill.online { color: var(--success); }
.status-pill.syncing { color: var(--warning); }

.view { display: none; animation: viewIn .24s ease; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.month-toolbar, .section-toolbar {
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.month-toolbar { justify-content: center; }
.month-picker-wrap { text-align: center; }
.month-picker-wrap span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 3px; }
.month-picker-wrap input { width: 180px; text-align: center; border: 0; background: transparent; color: var(--text); font-weight: 750; font-size: 17px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.metric-card { border-radius: var(--radius-lg); padding: 20px; min-height: 150px; display: flex; flex-direction: column; }
.metric-card.featured { background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(210,210,210,.72)); color: #060606; }
body.light-theme .metric-card.featured { background: linear-gradient(145deg, #111, #3b3b3d); color: #fff; }
.metric-card span { color: var(--muted); font-size: 13px; }
.metric-card.featured span, .metric-card.featured small { color: rgba(0,0,0,.58); }
body.light-theme .metric-card.featured span, body.light-theme .metric-card.featured small { color: rgba(255,255,255,.64); }
.metric-card strong { margin-top: auto; font-size: clamp(25px, 3vw, 40px); letter-spacing: -.05em; }
.metric-card small { margin-top: 7px; color: var(--muted); line-height: 1.3; }
.money { transition: filter .2s ease, opacity .2s ease; }
body.privacy-mode .money { filter: blur(8px); user-select: none; }

.dashboard-grid, .simulator-grid, .settings-grid { display: grid; gap: 14px; }
.dashboard-grid { grid-template-columns: 1.05fr .95fr; margin-bottom: 14px; }
.simulator-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px; }
.panel h2, .section-toolbar h2 { margin: 4px 0 0; font-size: clamp(21px, 2.2vw, 29px); letter-spacing: -.035em; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.big-percent { font-size: 30px; font-weight: 800; letter-spacing: -.04em; }
.progress-track { height: 12px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--surface-border); }
body.light-theme .progress-track { background: rgba(0,0,0,.06); }
.progress-fill { width: 0%; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }
.split-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.split-stats > div { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.06); }
body.light-theme .split-stats > div { background: rgba(0,0,0,.045); }
.split-stats span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.split-stats strong { font-size: 20px; }

.category-chart { display: grid; gap: 12px; }
.category-row { display: grid; grid-template-columns: minmax(95px, 130px) 1fr auto; align-items: center; gap: 10px; }
.category-row span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-row strong { font-size: 12px; }
.category-bar { height: 9px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
body.light-theme .category-bar { background: rgba(0,0,0,.08); }
.category-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

.list-stack { display: grid; gap: 9px; }
.list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 17px;
  padding: 12px 13px;
  background: rgba(255,255,255,.045);
}
body.light-theme .list-item { background: rgba(255,255,255,.40); }
.list-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.09); font-weight: 800; }
.list-main { min-width: 0; }
.list-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-main small { display: block; margin-top: 3px; color: var(--muted); }
.list-value { text-align: right; }
.list-value strong { display: block; }
.list-value small { color: var(--muted); }
.list-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; grid-column: 2 / -1; }
.action-chip {
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  padding: 6px 9px;
  font-size: 11px;
  cursor: pointer;
}
.action-chip.danger { color: var(--danger); }
.income-value { color: var(--success); }
.expense-value { color: var(--text); }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.installment-card { border-radius: var(--radius-lg); padding: 18px; }
.installment-card h3 { margin: 8px 0 5px; font-size: 21px; letter-spacing: -.03em; }
.installment-card p { margin: 0; color: var(--muted); }
.installment-meta { display: grid; gap: 8px; margin-top: 16px; }
.installment-meta div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.installment-meta span { color: var(--muted); }

.form-stack, .form-grid { display: grid; gap: 13px; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.full-width { grid-column: 1 / -1; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
input, select, textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  outline: none;
  transition: .18s ease;
}
textarea { resize: vertical; }
body.light-theme input, body.light-theme select, body.light-theme textarea { background: rgba(255,255,255,.66); }
input:focus, select:focus, textarea:focus { border-color: rgba(255,255,255,.45); box-shadow: 0 0 0 4px rgba(255,255,255,.07); }
body.light-theme input:focus, body.light-theme select:focus, body.light-theme textarea:focus { border-color: rgba(0,0,0,.32); box-shadow: 0 0 0 4px rgba(0,0,0,.055); }
.pin-input { text-align: center; font-size: 32px; letter-spacing: .26em; }
.separated { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--surface-border); }
.button-row { display: flex; gap: 9px; flex-wrap: wrap; }
.button-column { display: grid; gap: 10px; }

.button, .icon-button, .text-button, .segment {
  appearance: none;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.button:active, .icon-button:active, .segment:active { transform: scale(.97); }
.button { min-height: 46px; padding: 11px 16px; border-radius: 15px; font-weight: 750; }
.button.small { min-height: 39px; padding: 8px 13px; border-radius: 13px; font-size: 13px; }
.button.primary { background: var(--accent); color: var(--accent-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(0,0,0,.20); }
.button.ghost { background: rgba(255,255,255,.07); color: var(--text); border: 1px solid var(--surface-border); }
body.light-theme .button.ghost { background: rgba(255,255,255,.62); }
.icon-button { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid var(--surface-border); font-size: 20px; }
.text-button { background: transparent; color: var(--muted); padding: 6px; font-weight: 700; }
.file-button { display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 14px; }
.file-button input { display: none; }
.segmented { display: flex; gap: 6px; flex-wrap: wrap; }
.segment { background: transparent; color: var(--muted); border-radius: 999px; padding: 8px 12px; }
.segment.active { background: var(--accent); color: var(--accent-text); }

.sync-box { margin-top: 15px; padding: 12px; display: flex; justify-content: space-between; gap: 10px; align-items: center; border-radius: 14px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 13px; }
.empty-state { color: var(--muted); text-align: center; padding: 24px 10px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0,0,0,.64);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.modal-card { width: min(100%, 720px); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 30px; padding: 22px; }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.modal-heading h2 { margin: 4px 0 0; font-size: 28px; letter-spacing: -.04em; }

.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: grid; gap: 8px; width: min(360px, calc(100% - 40px)); }
.toast { padding: 13px 15px; border-radius: 15px; background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow); animation: toastIn .2s ease; }
.toast.error { background: #441a1a; color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

.mobile-nav { display: none; }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --sidebar: 0px; }
  .app-shell { padding: 10px 10px calc(92px + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .main-content { margin: 0; }
  .topbar { top: 10px; border-radius: 23px; padding: 14px 15px; align-items: flex-start; }
  .topbar-actions .status-pill, #syncButton { display: none; }
  .topbar h1 { font-size: 27px; }
  .dashboard-grid, .simulator-grid, .settings-grid { grid-template-columns: 1fr; }
  .mobile-nav {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 40;
    border-radius: 22px;
    padding: 7px;
  }
  .mobile-nav-button { min-height: 46px; border-radius: 16px; color: var(--muted); font-size: 12px; font-weight: 750; }
  .mobile-nav-button.active { background: var(--accent); color: var(--accent-text); }
}

@media (max-width: 620px) {
  .auth-card { padding: 26px 20px; border-radius: 28px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { min-height: 132px; padding: 15px; border-radius: 19px; }
  .metric-card strong { font-size: 25px; }
  .metric-card span { font-size: 11px; }
  .metric-card small { font-size: 10px; }
  .panel { padding: 16px; border-radius: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .full-width { grid-column: auto; }
  .card-grid { grid-template-columns: 1fr; }
  .list-item { grid-template-columns: auto minmax(0,1fr); }
  .list-value { grid-column: 2; text-align: left; }
  .list-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .topbar-actions { gap: 5px; }
  #quickAddButton { font-size: 0; width: 40px; padding: 0; }
  #quickAddButton::after { content: '+'; font-size: 22px; }
  .month-toolbar { padding: 10px; }
  .month-picker-wrap input { width: 150px; }
  .split-stats { grid-template-columns: 1fr; }
  .section-toolbar { align-items: flex-start; }
  .category-row { grid-template-columns: 92px 1fr; }
  .category-row strong { grid-column: 2; }
  .toast-region { bottom: calc(90px + env(safe-area-inset-bottom)); right: 12px; width: calc(100% - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Fausel Flow 2.0 — identidade e autenticação por conta */
.brand-logo {
  display: block;
  object-fit: cover;
  border-radius: 26%;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.18);
}
.auth-logo {
  width: 82px;
  height: 82px;
  margin: 0 0 24px;
}
.auth-card.compact .auth-logo { margin-inline: auto; }
.brand-logo-small {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 17px;
}
.account-logo {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 18px;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 24px 0 16px;
  padding: 5px;
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}
.auth-tab {
  appearance: none;
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  font-weight: 760;
  cursor: pointer;
}
.auth-tab.active {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(0,0,0,.18);
}
.form-message.neutral { color: var(--muted); }
.account-highlight {
  padding: 12px 14px;
  border-radius: 15px;
  border: 1px solid var(--surface-border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 750;
  overflow-wrap: anywhere;
}
.loading-card { overflow: hidden; }
.loading-orbit {
  position: relative;
  width: 42px;
  height: 42px;
  margin: 22px auto 0;
  border: 1px solid var(--surface-border);
  border-radius: 50%;
}
.loading-orbit span {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 15px;
  top: -5px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 18px rgba(255,255,255,.45);
  transform-origin: 5px 26px;
  animation: orbit 1.15s linear infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }
.account-card {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
}
.account-card strong,
.account-card span { display: block; }
.account-card strong { overflow-wrap: anywhere; }
.account-card span { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.install-panel { grid-column: 1 / -1; }
.version-badge {
  display: inline-flex;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .04em;
}

@media (max-width: 620px) {
  .auth-screen { align-items: start; padding: max(18px, env(safe-area-inset-top)) 14px 24px; }
  .auth-card { margin-top: 3vh; }
  .auth-logo { width: 72px; height: 72px; border-radius: 22px; }
  .auth-card h1 { font-size: 34px; }
  .account-card { align-items: flex-start; }
}

/* Correção 2.1 — desbloqueio confiável no Safari/iPhone */
.lock-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.button:disabled { opacity: .62; cursor: wait; transform: none; }
#lockMessage:not(:empty) { margin-top: 8px; }

/* Fausel Flow 3.0 — interface preta premium */
:root {
  --bg: #000;
  --bg-soft: #070708;
  --surface: rgba(255,255,255,.035);
  --surface-strong: rgba(255,255,255,.075);
  --surface-border: rgba(255,255,255,.105);
  --text: #f6f7f9;
  --muted: rgba(235,238,244,.56);
  --faint: rgba(235,238,244,.34);
  --accent: #0a84ff;
  --accent-text: #fff;
  --success: #4bdc78;
  --danger: #ff5d55;
  --warning: #ffc857;
  --shadow: 0 28px 90px rgba(0,0,0,.68);
}
body {
  background:
    radial-gradient(circle at 72% -10%, rgba(73,96,128,.16), transparent 30%),
    radial-gradient(circle at -10% 88%, rgba(36,48,70,.15), transparent 32%),
    #000;
}
body.light-theme { /* 3.0 fica propositalmente premium escuro */
  color-scheme: dark;
  --bg: #000; --bg-soft:#070708; --surface:rgba(255,255,255,.035); --surface-strong:rgba(255,255,255,.075);
  --surface-border:rgba(255,255,255,.105); --text:#f6f7f9; --muted:rgba(235,238,244,.56); --faint:rgba(235,238,244,.34);
  --accent:#0a84ff; --accent-text:#fff;
}
.glass {
  background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.025) 68%);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 24px 70px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(30px) saturate(125%);
  -webkit-backdrop-filter: blur(30px) saturate(125%);
}
.sidebar { background: rgba(9,9,10,.76); }
.topbar { background: rgba(6,6,7,.74); }
.brand-row strong { font-weight: 790; }
.nav-button.active { background: rgba(255,255,255,.075); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.button.primary { background: linear-gradient(180deg, #168cff, #0878e7); }
.segment.active { background: rgba(10,132,255,.17); color: #7bc0ff; box-shadow: inset 0 0 0 1px rgba(10,132,255,.35); }

.balance-hero {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: clamp(22px,4vw,34px);
  margin-bottom: 14px;
  min-height: 250px;
}
.balance-hero::after {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  right: -90px; top: -120px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 0 80px rgba(74,123,170,.10);
}
.balance-hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; position:relative; z-index:1; }
.balance-main { display:block; margin-top:12px; font-size:clamp(44px,7vw,82px); line-height:.96; letter-spacing:-.065em; font-weight:790; }
.balance-hint { margin:12px 0 0; color:var(--muted); font-size:14px; }
.balance-side { min-width:220px; display:grid; grid-template-columns:1fr; gap:5px; padding:16px 18px; border-radius:21px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.07); }
.balance-side span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-top:5px; }
.balance-side strong { font-size:20px; }
.balance-progress-row { position:absolute; left:clamp(22px,4vw,34px); right:clamp(22px,4vw,34px); bottom:28px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; }
.balance-progress-row .progress-track { height:7px; background:rgba(255,255,255,.065); }
.balance-progress-row .progress-fill { background:linear-gradient(90deg,#4a5566,#0a84ff); }
.commitment-inline { font-size:13px; color:var(--muted); }
.premium-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mini-metric { min-height:126px; }
.mini-metric strong { font-size:clamp(24px,3vw,36px); }
.income-metric strong { color:var(--success); }
.expense-metric strong { color:var(--danger); }
.future-preview-panel { min-height:100%; }
.future-preview { display:grid; gap:10px; padding:0; text-align:left; }
.future-preview-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.065); }
.future-preview-row span { color:var(--muted); text-transform:capitalize; }

.premium-installment { position:relative; overflow:hidden; }
.installment-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.installment-progress-ring { --progress:0%; width:58px; height:58px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:conic-gradient(#0a84ff var(--progress),rgba(255,255,255,.07) 0); position:relative; }
.installment-progress-ring::after { content:''; position:absolute; inset:5px; background:#101011; border-radius:50%; }
.installment-progress-ring strong { position:relative; z-index:1; font-size:11px; }
.installment-total { font-size:28px; font-weight:760; margin-top:8px !important; color:var(--text) !important; }
.installment-interest { margin-top:8px; min-height:20px; }
.interest-positive { color:#ffb04a; }
.interest-zero { color:var(--success); }
.interest-unknown { color:var(--muted); }

.financing-preview { border-radius:18px; border:1px dashed rgba(255,255,255,.12); padding:14px; color:var(--muted); background:rgba(255,255,255,.025); }
.financing-preview.ready { border-style:solid; color:var(--text); }
.financing-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.financing-summary-grid > div { padding:12px; border-radius:14px; background:rgba(255,255,255,.04); }
.financing-summary-grid span { display:block; color:var(--muted); font-size:11px; margin-bottom:5px; }
.financing-summary-grid strong { display:block; font-size:14px; }
.simulator-financing-summary { border-radius:20px; padding:12px; margin-bottom:12px; }
.simulation-months .list-value small { max-width:190px; }

.future-toolbar { margin-bottom:14px; }
.future-timeline { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0; text-align:left; }
.future-month-card { border-radius:22px; padding:18px; overflow:hidden; }
.future-month-card.good { border-color:rgba(75,220,120,.18); }
.future-month-card.warning { border-color:rgba(255,200,87,.22); }
.future-month-card.danger { border-color:rgba(255,93,85,.28); }
.future-month-main { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.future-free { display:block; margin-top:7px; font-size:28px; letter-spacing:-.035em; }
.future-month-main small { display:block; margin-top:3px; color:var(--muted); }
.future-month-numbers { display:grid; gap:7px; min-width:160px; }
.future-month-numbers span { display:flex; justify-content:space-between; gap:14px; color:var(--muted); font-size:12px; }
.future-month-numbers strong { color:var(--text); }
.future-bar { height:5px; margin-top:16px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); }
.future-bar i { display:block; height:100%; background:linear-gradient(90deg,#394350,#0a84ff); border-radius:inherit; }

@media (max-width:860px) {
  .mobile-nav { grid-template-columns:repeat(5,1fr); padding:6px; }
  .mobile-nav-button { font-size:10px; padding:0 3px; }
  .balance-hero { min-height:270px; }
  .balance-hero-top { gap:16px; }
  .balance-side { min-width:185px; }
  .future-timeline { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .app-shell { padding:8px 8px calc(88px + env(safe-area-inset-bottom)); }
  .topbar { background:rgba(0,0,0,.78); border-radius:20px; }
  .balance-hero { border-radius:24px; padding:20px; min-height:318px; }
  .balance-hero-top { display:block; }
  .balance-main { font-size:50px; }
  .balance-side { margin-top:18px; min-width:0; grid-template-columns:1fr 1fr; column-gap:14px; }
  .balance-progress-row { left:20px; right:20px; bottom:20px; }
  .premium-metrics { grid-template-columns:1fr 1fr; }
  .premium-metrics .metric-card:last-child { grid-column:1/-1; }
  .mini-metric { min-height:110px; }
  .financing-summary-grid { grid-template-columns:1fr; }
  .future-month-main { display:block; }
  .future-month-numbers { margin-top:14px; min-width:0; }
  .mobile-nav { left:7px; right:7px; bottom:calc(7px + env(safe-area-inset-bottom)); border-radius:20px; }
}

/* Fausel Flow 4.0 — temas + central de planejamento */
body.light-theme {
  color-scheme: light;
  --bg: #f4f5f7;
  --bg-soft: #ffffff;
  --surface: rgba(255,255,255,.68);
  --surface-strong: rgba(255,255,255,.92);
  --surface-border: rgba(17,24,39,.10);
  --text: #111216;
  --muted: rgba(17,24,39,.58);
  --faint: rgba(17,24,39,.36);
  --accent: #0a84ff;
  --accent-text: #fff;
  --success: #167d3f;
  --danger: #d92d20;
  --warning: #9a6700;
  --shadow: 0 22px 70px rgba(25,32,45,.12);
  background:
    radial-gradient(circle at 72% -10%, rgba(10,132,255,.10), transparent 28%),
    radial-gradient(circle at -10% 88%, rgba(120,130,150,.11), transparent 30%),
    #f4f5f7;
}
body.light-theme .ambient-a { background:#a7cfff; opacity:.20; }
body.light-theme .ambient-b { background:#c7cbd3; opacity:.24; }
body.light-theme .glass {
  background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.62) 68%);
  border-color: rgba(17,24,39,.09);
  box-shadow: 0 22px 60px rgba(25,32,45,.11), inset 0 1px 0 rgba(255,255,255,.90);
}
body.light-theme .sidebar { background: rgba(249,250,252,.84); }
body.light-theme .topbar { background: rgba(249,250,252,.82); }
body.light-theme .status-pill,
body.light-theme .future-preview-row,
body.light-theme .financing-summary-grid > div,
body.light-theme .account-card,
body.light-theme .list-icon,
body.light-theme .list-item { background: rgba(255,255,255,.68); }
body.light-theme .installment-progress-ring::after { background:#f7f8fa; }
body.light-theme .future-bar,
body.light-theme .goal-progress { background: rgba(17,24,39,.08); }
body.light-theme .balance-side { background: rgba(255,255,255,.58); border-color: rgba(17,24,39,.08); }
body.light-theme .balance-hero::after { border-color: rgba(10,132,255,.10); }
body.light-theme .financing-preview { background: rgba(255,255,255,.54); border-color: rgba(17,24,39,.12); }
body.light-theme input,
body.light-theme select,
body.light-theme textarea { background: rgba(255,255,255,.78); }

.field-hint { display:block; margin-top:5px; color:var(--muted); font-size:11px; line-height:1.35; }
.planner-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.planner-wide { grid-column:1/-1; }
.inline-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:4px 0 16px; }
.inline-stats > div { padding:13px 14px; border-radius:16px; border:1px solid var(--surface-border); background:rgba(255,255,255,.035); }
.inline-stats span { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.inline-stats strong { font-size:20px; }
.attention-item { border-color:rgba(255,200,87,.35); }

.credit-card-card { border-radius:24px; padding:20px; min-height:220px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; }
.credit-card-card::after { content:''; position:absolute; width:180px; height:180px; border-radius:50%; right:-70px; top:-80px; border:1px solid rgba(10,132,255,.16); pointer-events:none; }
.credit-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.credit-card-top h3 { margin:5px 0 0; font-size:25px; letter-spacing:-.035em; }
.credit-card-numbers { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:auto; }
.credit-card-numbers span { display:block; color:var(--muted); font-size:11px; margin-bottom:5px; }
.credit-card-numbers strong { font-size:20px; }
.credit-card-card > small { color:var(--muted); }

.liberation-panel { margin-bottom:14px; }
.liberation-timeline { display:grid; gap:9px; }
.liberation-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border-radius:16px; border:1px solid var(--surface-border); background:rgba(255,255,255,.035); }
.liberation-row strong,.liberation-row small,.liberation-row span { display:block; }
.liberation-row small,.liberation-row span { color:var(--muted); font-size:11px; margin-top:3px; }
.liberation-row > div:last-child { text-align:right; }

.goal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.goal-card { padding:17px; border-radius:19px; }
.goal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.goal-head h3 { margin:4px 0 0; font-size:20px; }
.goal-progress { height:7px; margin:14px 0 10px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.07); }
.goal-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4a5566,#0a84ff); }
.goal-values { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; }
.goal-card > small { display:block; margin-top:10px; color:var(--muted); line-height:1.4; }
.goal-card .button-row { margin-top:12px; }

.budget-stack { display:grid; gap:10px; }
.budget-row { padding:14px; border-radius:17px; border:1px solid var(--surface-border); background:rgba(255,255,255,.03); }
.budget-row.over { border-color:rgba(255,93,85,.35); }
.budget-row.over .goal-progress i { background:var(--danger); }
.budget-title,.budget-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.budget-title span,.budget-foot { color:var(--muted); font-size:12px; }

.net-worth-card { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.net-worth-card > div { padding:14px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid var(--surface-border); }
.net-worth-card .net-main { grid-column:1/-1; }
.net-worth-card span,.net-worth-card strong { display:block; }
.net-worth-card span { color:var(--muted); font-size:11px; margin-bottom:5px; }
.net-worth-card strong { font-size:21px; }
.net-worth-card .net-main strong { font-size:30px; }

.close-summary { display:grid; gap:12px; }
.close-hero { padding:16px; border-radius:18px; border:1px solid var(--surface-border); background:rgba(255,255,255,.035); }
.close-hero span,.close-hero small { display:block; color:var(--muted); }
.close-hero strong { display:block; margin:6px 0 3px; font-size:36px; letter-spacing:-.04em; }
.close-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.close-grid > div { padding:12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--surface-border); }
.close-grid span,.close-grid strong { display:block; }
.close-grid span { color:var(--muted); font-size:11px; margin-bottom:4px; }
.saved-close { margin:0; color:var(--success); font-size:12px; }

.simulation-compare { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.saved-sim { padding:16px; border-radius:18px; }
.saved-sim h3 { margin:4px 0 13px; }
.saved-sim-values { display:grid; gap:6px; }
.saved-sim-values span { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; }
.saved-sim-values b { color:var(--text); }
.saved-sim .button-row { margin-top:12px; }

.comparison-panel { margin-top:14px; padding:16px; border-radius:20px; border:1px solid rgba(10,132,255,.23); background:linear-gradient(145deg,rgba(10,132,255,.09),rgba(255,255,255,.025)); }
.comparison-head h3 { margin:5px 0 14px; font-size:19px; line-height:1.25; }
.comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.comparison-grid > div { padding:13px; border-radius:15px; border:1px solid var(--surface-border); background:rgba(0,0,0,.12); }
body.light-theme .comparison-grid > div { background:rgba(255,255,255,.55); }
.comparison-grid span,.comparison-grid strong,.comparison-grid small { display:block; }
.comparison-grid span,.comparison-grid small { color:var(--muted); }
.comparison-grid strong { font-size:22px; margin:5px 0; }

@media (max-width: 1100px) {
  .planner-grid { grid-template-columns:1fr; }
  .planner-wide { grid-column:auto; }
  .simulation-compare { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .mobile-nav { grid-template-columns:repeat(6,1fr); }
  .goal-grid,.simulation-compare { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .inline-stats,.credit-card-numbers,.comparison-grid,.net-worth-card,.close-grid { grid-template-columns:1fr; }
  .net-worth-card .net-main { grid-column:auto; }
  .liberation-row { align-items:flex-start; }
  .mobile-nav-button { font-size:9px; }
}