/* ───────────── RESET & VARIABLES ───────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #F4F3EF;
  --bg2:       #ECEAE3;
  --surface:   #FFFFFF;
  --border:    #E2DFD8;
  --text:      #1A1917;
  --text-2:    #6B6860;
  --text-3:    #A8A59F;
  --green:     #2D7A4F;
  --green-lt:  #EAF5EE;
  --red:       #C0392B;
  --red-lt:    #FDECEA;
  --accent:    #E8A838;
  --accent-lt: #FEF6E4;
  --blue:      #2563EB;
  --blue-lt:   #EFF6FF;
  --heat-0:    #EEECE7;
  --heat-1:    #FFE3DF;
  --heat-2:    #FFB8AE;
  --heat-3:    #F47E71;
  --heat-4:    #C94A40;
  --avatar-bg: #1A1917;
  --avatar-text: #FFFFFF;
  --balance-bg:#1A1917;
  --balance-muted: rgba(255,255,255,0.55);
  --balance-sub: rgba(255,255,255,0.4);
  --auth-brand-bg: #1A1917;
  --primary-bg: #1A1917;
  --primary-text: #FFFFFF;
  --primary-hover: #33302C;
  --radius:    16px;
  --shadow:    0 2px 12px rgba(26,25,23,0.07);
  --shadow-lg: 0 8px 32px rgba(26,25,23,0.12);
  --font-head: 'Clash Display', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
  --spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-theme="dark"] {
  --bg:        #111315;
  --bg2:       #1B1E21;
  --surface:   #181B1E;
  --border:    #2B3035;
  --text:      #F4F1EA;
  --text-2:    #B8B0A4;
  --text-3:    #7E766E;
  --green:     #58C783;
  --green-lt:  #153523;
  --red:       #F06B5F;
  --red-lt:    #3A1C1A;
  --accent:    #F0B84A;
  --accent-lt: #3A2B12;
  --blue:      #7BA7FF;
  --blue-lt:   #17253D;
  --heat-0:    #252A2E;
  --heat-1:    #442523;
  --heat-2:    #713630;
  --heat-3:    #B55047;
  --heat-4:    #F27669;
  --avatar-bg: #F0B84A;
  --avatar-text: #111315;
  --balance-bg:#050607;
  --balance-muted: rgba(255,255,255,0.62);
  --balance-sub: rgba(255,255,255,0.46);
  --auth-brand-bg: #0C0E10;
  --primary-bg: #F0B84A;
  --primary-text: #111315;
  --primary-hover: #DFA840;
  --shadow:    0 2px 12px rgba(0,0,0,0.28);
  --shadow-lg: 0 14px 42px rgba(0,0,0,0.45);
  color-scheme: dark;
}

html, body {
  min-height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; }

img, svg, canvas { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ───────────── UTILS ───────────── */
.hidden { display: none !important; }

/* ───────────── SCREEN WRAPPER ───────────── */
.screen { display: none; min-height: 100vh; animation: screenIn 0.36s var(--spring); }
.screen.active {
  display: flex;
  background: var(--bg);
  color: var(--text);
}

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

@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px) scale(0.995); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ───────────── AUTH SCREENS ───────────── */
.auth-wrap {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

.auth-brand {
  background: var(--auth-brand-bg);
  flex-direction: column;
  gap: 32px;
}

.auth-brand-inner { color: #fff; max-width: 380px; }
.brand-logo { font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; letter-spacing: -1px; }
.brand-logo span { color: var(--accent); }
.brand-tagline { font-size: 1.05rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin-top: 12px; }
.brand-stats { margin-top: 48px; display: flex; flex-direction: column; gap: 16px; }
.brand-stat {
  background: rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(255,255,255,0.1);
}
.brand-stat-val { font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; }
.brand-stat-lbl { font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-top: 2px; }

.auth-form-panel { flex-direction: column; background: var(--surface); }
.auth-form-inner { width: 100%; max-width: 380px; }
.auth-title { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; margin-bottom: 6px; }
.auth-sub { color: var(--text-2); font-size: 0.92rem; margin-bottom: 36px; }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.field input, .field select {
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  background: var(--bg);
  color: var(--text);
  transition: var(--transition);
  outline: none;
}
.field input:focus, .field select:focus { border-color: var(--text); background: var(--surface); }
.field input::placeholder { color: var(--text-3); }

body[data-theme="dark"] .field input,
body[data-theme="dark"] .field select,
body[data-theme="dark"] .filter-group select {
  color-scheme: dark;
}

body[data-theme="dark"] .field input:-webkit-autofill,
body[data-theme="dark"] .field input:-webkit-autofill:hover,
body[data-theme="dark"] .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out;
}

.pwd-rules { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.rule {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  transition: var(--transition);
}
.rule.ok { color: var(--green); }
.rule-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: var(--transition);
  flex-shrink: 0;
}
.rule.ok .rule-dot { background: var(--green); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-primary { background: var(--primary-bg); color: var(--primary-text); width: 100%; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 16px rgba(0,0,0,0.18); }

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

.btn-accent { background: var(--accent); color: #111315; }
.btn-accent:hover { background: #d69a2e; }

.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: #245f3e; }
.btn-danger { background: var(--red); color: #fff; border: 1.5px solid var(--red); }
.btn-danger:hover { filter: brightness(1.08); transform: translateY(-1px); }

body[data-theme="dark"] .btn-green {
  color: #111315;
}

body[data-theme="dark"] .btn-green:hover {
  background: #4DB874;
  color: #111315;
}

.btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn-outline:hover { background: var(--bg); }

.btn-sm {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 0.84rem;
  border-radius: 8px;
}

.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: 10px; }

.auth-link {
  text-align: center;
  margin-top: 24px;
  font-size: 0.88rem;
  color: var(--text-2);
}
.auth-link a { color: var(--text); font-weight: 500; cursor: pointer; text-decoration: underline; }
.auth-back-link { display: flex; justify-content: center; }

/* ───────────── APP LAYOUT ───────────── */
.dev-reset-link {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.45;
}

.dev-reset-link a {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.app-wrap { display: flex; flex-direction: column; min-height: 100vh; width: 100%; background: var(--bg); }

.app-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.nav-logo { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.5px; }
.nav-logo span { color: var(--accent); }

.nav-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 9px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  transition: var(--transition);
}

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

.theme-toggle-track {
  position: relative;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background: var(--border);
  transition: var(--transition);
}

.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: var(--transition);
}

.theme-toggle.active .theme-toggle-track {
  background: var(--accent);
}

.theme-toggle.active .theme-toggle-thumb {
  transform: translateX(20px);
  background: #1A1917;
}

.theme-toggle-label {
  font-size: 0.78rem;
  font-weight: 600;
}

.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-text);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-logout {
  font-size: 0.84rem;
  color: var(--text-2);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: var(--transition);
}
.nav-logout:hover { background: var(--bg); color: var(--text); }

.app-content {
  flex: 1;
  padding: 40px 32px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* ───────────── HOME SCREEN ───────────── */
.home-header { margin-bottom: 32px; }
.home-title { font-family: var(--font-head); font-size: 2rem; font-weight: 700; }
.cards-period-label {
  margin: 0 0 11px 2px;
  color: var(--text-3);
  font-size: .73rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}

.card {
  background: var(--surface);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: var(--transition);
  min-width: 0;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.card-label {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.card-label-lucide { width: 16px; height: 16px; color: var(--accent); flex: 0 0 16px; }
.card-value {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  word-break: break-word;
}
.card-value.green { color: var(--green); }
.card-value.red { color: var(--red); }
.card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.card-icon.green { background: var(--green-lt); }
.card-icon.red { background: var(--red-lt); }
.card-icon.accent { background: var(--accent-lt); }

.card-balance { background: var(--balance-bg); color: #fff; }
.card-balance .card-label { color: var(--balance-muted); }
.card-balance .card-value { color: #fff; }
.limit-card .card-value { color: var(--accent); }
.limit-form-card { max-width: 560px; margin: 0 auto; }
.field-hint {
  display: block;
  margin-top: 8px;
  color: var(--text-3);
  font-size: 0.78rem;
}

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.quick-actions-column { padding-top: 37px; }

.section-title {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.section-title a {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: underline;
}

.section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.action-menu {
  position: relative;
}

.action-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: var(--transition);
  z-index: 30;
}

.action-menu.open .action-menu-list {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.action-menu-list button {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.action-menu-list button:hover {
  background: var(--bg);
  color: var(--accent);
}

.tx-list { display: flex; flex-direction: column; gap: 1px; }

.tx-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.tx-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.tx-item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.tx-item:only-child { border-radius: var(--radius); }
.tx-item:hover { background: var(--bg); transform: translateX(2px); }

.tx-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.category-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tx-info { flex: 1; min-width: 0; }
.tx-desc {
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-cat { font-size: 0.78rem; color: var(--text-3); margin-top: 1px; }
.tx-right { text-align: right; flex-shrink: 0; }
.tx-val { font-family: var(--font-head); font-size: 0.98rem; font-weight: 600; }
.tx-val.pos { color: var(--green); }
.tx-val.neg { color: var(--red); }
.tx-date { font-size: 0.75rem; color: var(--text-3); margin-top: 1px; }

.quick-actions {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.qa-btn {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 10px;
  text-align: left;
  min-height: 60px;
  color: var(--text);
  font: inherit;
}
.qa-btn:last-child { margin-bottom: 0; }
.qa-btn:hover { border-color: var(--text); background: var(--surface); transform: translateX(3px); }

.qa-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qa-icon svg { width: 17px; height: 17px; }

.qa-text { min-width: 0; }
.qa-text strong { display: block; font-size: 0.9rem; font-weight: 500; }
.qa-text span { font-size: 0.78rem; color: var(--text-3); }

/* ───────────── INSERT SCREEN ───────────── */
.insert-wrap {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

#screen-insert .app-content {
  display: flex;
  justify-content: center;
}

.page-header { margin-bottom: 32px; }
.page-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px 8px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-lt) 64%, var(--surface));
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
  margin-bottom: 18px;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--accent) 9%, transparent);
  transition: var(--transition);
}
.page-back svg { width: 16px; height: 16px; color: var(--accent); transition: transform .22s var(--spring); }
.page-back:hover {
  border-color: var(--accent);
  background: var(--accent-lt);
  transform: translateY(-2px);
  box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 14%, transparent);
}
.page-back:hover svg { transform: translateX(-2px); }
.page-back:active { transform: translateY(0); }

.page-title { font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; }
.page-sub { font-size: 0.9rem; color: var(--text-2); margin-top: 4px; }

/* ───────────── SETTINGS SCREEN ───────────── */
.settings-page { max-width: 1080px; width: 100%; }
.settings-simple-title { display: flex; align-items: center; gap: 12px; }
.settings-emblem {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: linear-gradient(145deg, var(--accent-lt), color-mix(in srgb, var(--surface) 78%, var(--accent)));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 13%, transparent);
}
.settings-emblem svg { width: 20px; height: 20px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.settings-card,
.settings-session-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.settings-card { padding: 28px; }
.settings-card-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 26px; }
.settings-card-heading h2,
.settings-session-card h2 { margin: 0; font-family: var(--font-head); font-size: 1.02rem; }
.settings-card-heading p,
.settings-session-card p { margin: 4px 0 0; color: var(--text-3); font-size: .78rem; line-height: 1.5; }
.settings-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  color: var(--blue);
  background: var(--blue-lt);
}
.settings-card-icon.security { color: var(--accent); background: var(--accent-lt); }
.settings-card-icon svg { width: 17px; height: 17px; }
.settings-card .field small { display: block; margin-top: 7px; color: var(--text-3); font-size: .7rem; line-height: 1.45; }
.settings-card input[readonly] { color: var(--text-3); cursor: not-allowed; background: var(--bg2); }
.settings-card .btn { width: 100%; margin-top: 4px; }
.settings-session-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 24px;
  border-color: color-mix(in srgb, var(--red) 24%, var(--border));
  background: linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--red-lt) 38%, var(--surface)));
}
.settings-logout {
  appearance: none;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--red) 42%, var(--border));
  background: var(--surface);
  color: var(--red);
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
}
.settings-logout svg { width: 16px; height: 16px; }
.settings-logout:hover { color: #fff; background: var(--red); border-color: var(--red); transform: translateY(-1px); }

.form-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.type-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--border);
}

.type-btn {
  flex: 1;
  min-height: 46px;
  padding: 11px;
  font-size: 0.9rem;
  font-weight: 500;
  border: none;
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.type-btn.active.entrada { background: var(--green-lt); color: var(--green); }
.type-btn.active.saida { background: var(--red-lt); color: var(--red); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .field.full { grid-column: 1 / -1; }

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.form-actions .btn { flex: 1 1 180px; }

.schedule-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 0;
  border: 0;
  background: transparent;
}
.schedule-checks,
.schedule-details { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.schedule-details { margin-left: auto; }
.recurring-check {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  white-space: nowrap;
}
.field .recurring-check > input[type="checkbox"] {
  appearance: auto !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 18px;
  accent-color: var(--accent);
}
.recurring-duration {
  display: flex;
  align-items: center;
  gap: 9px;
}
.recurring-duration > label {
  margin: 0;
  color: var(--text-3);
  font-size: .72rem;
  text-transform: none;
}
.recurring-duration > div { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: .74rem; }
.recurring-duration input {
  width: 66px;
  min-height: 38px;
  padding: 7px 9px;
  text-align: center;
}

/* ───────────── DETAIL SCREEN ───────────── */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}

.chart-bar-wrap {
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 42%),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--bg2)));
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  min-width: 0;
}

.bar-chart { margin-top: 24px; display: flex; flex-direction: column; gap: 17px; }
.bar-row { display: flex; flex-direction: column; gap: 7px; }
.bar-label {
  font-size: 0.8rem;
  color: var(--text-2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.bar-category { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.bar-category .category-icon { width: 15px; height: 15px; }
.bar-track { height: 11px; background: color-mix(in srgb, var(--bg2) 82%, transparent); border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--bar-start), var(--bar-end)); box-shadow: 0 0 18px color-mix(in srgb, var(--bar-start) 30%, transparent); transition: width 1s cubic-bezier(0.4,0,0.2,1); }

.compare-chart { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.compare-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 4px;
}
.compare-summary span,
.compare-summary small {
  color: var(--text-3);
  font-size: 0.8rem;
}
.compare-summary strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-head);
  font-size: 1.6rem;
}
.compare-summary strong.pos { color: var(--green); }
.compare-summary strong.neg { color: var(--red); }
.compare-row { display: flex; flex-direction: column; gap: 8px; }
.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.86rem;
}
.compare-head span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.compare-head i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.compare-head strong { font-family: var(--font-head); }
.compare-track {
  height: 18px;
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.compare-fill {
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
.compare-fill.green { background: linear-gradient(90deg, var(--green), #68d892); }
.compare-fill.red { background: linear-gradient(90deg, var(--red), #ff7f75); }
.compare-fill.accent { background: linear-gradient(90deg, var(--accent), #ffd978); }
.compare-fill { box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 5px 16px color-mix(in srgb, currentColor 18%, transparent); }
.compare-fill.accent.danger { background: var(--red); }
.compare-row.limit {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 16px; justify-content: center; }
.leg-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.evolution-card,
.heatmap-card {
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--green) 8%, transparent), transparent 32%),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 94%, var(--bg2)));
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  grid-column: 1 / -1;
}
.line-chart { height: 276px; min-width:0; max-width:100%; position: relative; margin-top: 14px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.line-chart svg { display:block; max-width:none; overflow:visible; }
.evolution-card { min-width:0; }
.line-chart.is-scrollable { border-bottom:1px solid var(--border); }

.chart-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.chart-card-heading p { margin-top: 5px; color: var(--text-3); font-size: .79rem; }
.chart-legend,
.heatmap-legend { display: flex; align-items: center; gap: 15px; color: var(--text-2); font-size: .76rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch { width: 20px; height: 3px; border-radius: 99px; display: inline-block; }
.legend-swatch.income { background: linear-gradient(90deg, var(--green), #87e4ae); }
.legend-swatch.expense { background: linear-gradient(90deg, var(--red), #ff9b91); }

.heatmap-card {
  background:
    radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--red) 7%, transparent), transparent 34%),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 94%, var(--bg2)));
}
.heatmap-legend { gap: 5px; white-space: nowrap; }
.heatmap-legend i { width: 14px; height: 14px; border-radius: 4px; display: block; }
.heat-level-0 { background: var(--heat-0); }
.heat-level-1 { background: var(--heat-1); }
.heat-level-2 { background: var(--heat-2); }
.heat-level-3 { background: var(--heat-3); }
.heat-level-4 { background: var(--heat-4); }
.spending-heatmap {
  margin-top: 28px;
  padding: 4px 2px 10px;
}
.heatmap-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.heatmap-month-nav strong {
  min-width: 190px;
  text-align: center;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 650;
}
.heatmap-month-nav button {
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: var(--transition);
}
.heatmap-month-nav button svg { width: 18px; height: 18px; }
.heatmap-month-nav button:hover:not(:disabled) { color: var(--red); border-color: var(--red); transform: translateY(-1px); }
.heatmap-month-nav button:disabled { opacity: .28; cursor: not-allowed; }
.heatmap-month-view { width: min(100%, 560px); margin: 0 auto; }
.heatmap-weekday-labels {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-3);
  font-size: .66rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}
.month-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.heat-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 48%, transparent);
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1;
  cursor: default;
  transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}
.heat-level-3,
.heat-level-4 { color: #fff; }
.heat-cell:hover:not(.outside-month) { transform: scale(1.08); filter: brightness(1.08); border-color: var(--text-2); z-index: 2; }
.heat-cell.outside-month { visibility: hidden; pointer-events: none; }
.heat-cell.future-day { opacity: .3; background: var(--heat-0); border-style: dashed; }
.heat-cell.today { outline: 2px solid var(--accent); outline-offset: 2px; }

.filter-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(130px, 0.8fr) minmax(190px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.filter-group {
  min-width: 0;
}

.filter-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.filter-group select {
  width: 100%;
  min-height: 42px;
  padding: 0 38px 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
  transition: var(--transition);
}

.filter-group select:hover,
.filter-group select:focus {
  border-color: var(--text);
  background: var(--surface);
}

.filter-clear {
  min-height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #111;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.filter-clear:hover:not(:disabled) {
  border-color: var(--accent);
  color: #111;
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.filter-clear:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.filter-group input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
}

.bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-height: 0;
  margin: 0;
  padding: 0 18px;
  overflow: hidden;
  opacity: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent-lt) 78%, var(--surface)), var(--surface));
  transform: translateY(-6px);
  transition: max-height .28s var(--spring), margin .28s var(--spring), padding .28s var(--spring), opacity .2s ease, transform .28s var(--spring);
}

.bulk-toolbar.active {
  max-height: 100px;
  margin: 0 0 14px;
  padding: 13px 16px;
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  transform: translateY(0);
}

.bulk-toolbar-copy { display: flex; flex-direction: column; gap: 2px; }
.bulk-toolbar-copy strong { font-size: .9rem; }
.bulk-toolbar-copy span { color: var(--text-2); font-size: .76rem; }
.bulk-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tx-table {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.tx-table-header {
  display: grid;
  grid-template-columns: 42px 2fr 1.5fr 1fr 1fr 160px;
  gap: 0;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.tx-table-header span {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.tx-row {
  display: grid;
  grid-template-columns: 42px 2fr 1.5fr 1fr 1fr 160px;
  gap: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: var(--transition);
}
.tx-row:last-child { border-bottom: none; }
.tx-row:hover { background: var(--bg); transform: translateY(-1px); box-shadow: var(--shadow); }
.tx-row.selected { background: color-mix(in srgb, var(--accent-lt) 62%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }

.tx-select-cell { display: flex; align-items: center; justify-content: flex-start; }
.tx-checkbox {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.tx-row-desc {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 0;
  line-height: 1.4;
}
.tx-row-category-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
}
.tx-row-category-icon .category-icon { width: 15px; height: 15px; }

.tx-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-lt);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: middle;
}
.tx-row-cat {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 500;
}
.tx-row-date { font-size: 0.82rem; color: var(--text-2); }
.tx-row-val {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
}
.tx-row-type {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
}

/* ───────────── CATEGORY COLORS ───────────── */
.cat-alimentacao { background: #FEF3C7; color: #92400E; }
.cat-transporte  { background: #DBEAFE; color: #1E40AF; }
.cat-saude       { background: #FCE7F3; color: #9D174D; }
.cat-lazer       { background: #D1FAE5; color: #065F46; }
.cat-moradia     { background: #EDE9FE; color: #4C1D95; }
.cat-contas      { background: #FFF1D6; color: #9A5A09; }
.cat-educacao    { background: #FEE2E2; color: #991B1B; }
.cat-salario     { background: #D1FAE5; color: #065F46; }
.cat-freelance   { background: #E0F2FE; color: #075985; }
.cat-outros      { background: var(--bg2); color: var(--text-2); }

body[data-theme="dark"] .cat-alimentacao { background: #3A2B12; color: #F0B84A; }
body[data-theme="dark"] .cat-transporte  { background: #17253D; color: #9DBBFF; }
body[data-theme="dark"] .cat-saude       { background: #381929; color: #F7A4CB; }
body[data-theme="dark"] .cat-lazer,
body[data-theme="dark"] .cat-salario     { background: #153523; color: #58C783; }
body[data-theme="dark"] .cat-moradia     { background: #261C3C; color: #C6B4FF; }
body[data-theme="dark"] .cat-contas      { background: #342711; color: #F3C66B; }
body[data-theme="dark"] .cat-educacao    { background: #3A1C1A; color: #F06B5F; }
body[data-theme="dark"] .cat-freelance   { background: #142C3A; color: #7DD3FC; }

/* ───────────── TOAST ───────────── */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--text);
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 0.88rem;
  box-shadow: var(--shadow-lg);
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  z-index: 1000;
  max-width: min(320px, calc(100vw - 32px));
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }

/* ───────────── FEATURE MODAL ───────────── */
body.modal-open { overflow: hidden; }

.feature-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.feature-modal.show { display: flex; }

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.confirm-modal.show {
  display: flex;
}

.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(6px);
}

.confirm-panel {
  position: relative;
  width: min(420px, 100%);
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modalPop 0.22s ease;
}

.confirm-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-lt);
  color: var(--red);
  font-weight: 800;
}

.confirm-title {
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 700;
}

.confirm-text {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.45;
  margin-top: 4px;
}

.confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.confirm-actions .btn {
  width: auto;
}

.feature-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26,25,23,0.56);
}

.feature-modal-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 30px;
  animation: modalPop 0.22s ease;
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.feature-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-2);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.feature-modal-close:hover {
  border-color: var(--text);
  color: var(--text);
  background: var(--surface);
}

.feature-modal-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent-lt);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.feature-modal-title {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.feature-modal-sub {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 440px;
}

.feature-list {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.feature-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.feature-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
}

.feature-item strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.feature-item p {
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.45;
}

.feature-modal-action { margin-top: 2px; }

/* ───────────── EMPTY STATE ───────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-3); }
.empty-state-icon { font-size: 2.5rem; margin-bottom: 12px; }
.empty-state p { font-size: 0.9rem; line-height: 1.5; }

/* ───────────── RESPONSIVE ───────────── */
@media (max-width: 1024px) {
  .home-grid { grid-template-columns: 1fr; }
  .quick-actions-column { padding-top: 0; }
  .detail-grid { grid-template-columns: 1fr; }
  .evolution-card,
  .heatmap-card { grid-column: auto; }
  .app-content { padding: 28px 20px; }
  .tx-table-header,
  .tx-row {
    grid-template-columns: 38px 2fr 1.2fr 1fr 1fr 140px;
  }
}

@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-panel { padding: 32px 20px; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .app-nav { padding: 0 20px; }
  .chart-bar-wrap,
  .evolution-card,
  .heatmap-card,
  .form-card,
  .quick-actions,
  .card { padding: 22px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-session-card { grid-column: auto; }
}

@media (max-width: 680px) {
  .app-content {
    padding-top: 20px;
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
  }
  .app-nav {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: 10px;
    padding-left: max(14px, env(safe-area-inset-left));
    min-height: auto;
    gap: 10px;
    align-items: flex-start;
  }
  .nav-right { width: 100%; justify-content: flex-end; }
  .home-title { font-size: 1.6rem; }
  .page-title { font-size: 1.5rem; }
  .page-back { min-height: 44px; padding-inline: 13px 16px; }
  .chart-card-heading { flex-direction: column; gap: 12px; }
  .chart-legend,
  .heatmap-legend { align-self: flex-start; }
  .settings-emblem { width: 42px; height: 42px; border-radius: 13px; }
  .settings-card { padding: 22px; }
  .settings-session-card { align-items: flex-start; flex-direction: column; }
  .settings-logout { width: 100%; justify-content: center; min-height: 46px; }
  .cards-grid { grid-template-columns: 1fr; gap: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field.full { grid-column: auto; }
  .btn {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 0.88rem;
  }
  .btn-sm {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 0.8rem;
  }
  .form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .form-actions .btn {
    width: auto;
    min-height: 44px;
  }

  .tx-item {
    align-items: flex-start;
    padding: 14px;
  }
  .tx-right {
    text-align: left;
    width: 100%;
  }
  .tx-item {
    flex-wrap: wrap;
  }
  .tx-info {
    min-width: calc(100% - 52px);
  }

  .tx-table {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }

  .tx-table-header {
    display: none;
  }

  .tx-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
  }

  .tx-row > .tx-select-cell { position: absolute; top: 14px; right: 14px; }
  .tx-row { position: relative; padding-right: 46px; }

  .tx-row:last-child {
    margin-bottom: 0;
  }

  .tx-row > div:nth-child(2),
  .tx-row > div:nth-child(3),
  .tx-row > div:nth-child(4),
  .tx-row > div:nth-child(5),
  .tx-row > div:nth-child(6) {
    justify-self: stretch;
  }

  .tx-row-date,
  .tx-row-val {
    font-size: 0.9rem;
  }

  .tx-row > div:last-child {
    display: flex !important;
    justify-content: stretch !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }

  .tx-row > div:last-child .btn {
    flex: 1 1 120px;
  }

  .bar-label {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .schedule-options { align-items: flex-start; flex-direction: column; }
  .schedule-checks { align-items: flex-start; flex-direction: column; gap: 12px; }
  .schedule-details { width: 100%; margin-left: 0; }
  .recurring-duration { width: 100%; justify-content: space-between; }

  .filter-clear {
    width: 100%;
  }

  .bulk-toolbar.active { align-items: flex-start; flex-direction: column; max-height: 180px; }
  .bulk-toolbar-actions { width: 100%; }
  .bulk-toolbar-actions .btn { flex: 1 1 140px; }

  .toast {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .auth-panel { padding: 24px 16px; }
  .auth-form-inner { max-width: 100%; }
  .auth-title { font-size: 1.6rem; }
  .auth-sub { margin-bottom: 28px; }
  .app-content {
    padding-top: 16px;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .chart-bar-wrap,
  .evolution-card,
  .heatmap-card,
  .form-card,
  .quick-actions,
  .card { padding: 18px; }
  .settings-card,
  .settings-session-card { padding: 18px; }
  .form-actions .btn {
    min-height: 42px;
  }
  .nav-logo { font-size: 1.2rem; }
  .nav-avatar { width: 34px; height: 34px; }
  .line-chart { height: 276px; }
  .heatmap-month-nav { gap: 8px; }
  .heatmap-month-nav strong { min-width: 150px; font-size: .9rem; }
  .heatmap-weekday-labels,
  .month-heatmap-grid { gap: 5px; }
  .heat-cell { border-radius: 8px; font-size: .7rem; }
  .legend { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .page-back,
  .page-back svg,
  .heat-cell,
  .heatmap-month-nav button,
  .settings-logout { transition: none; }
}

/* Organização por carteiras */
.wallet-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0}
.wallet-toolbar label{display:flex;align-items:center;gap:10px;font-size:13px}
.wallet-toolbar select,.wallet-filter{border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--surface);color:var(--text, #eee);max-width:240px}
.wallet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0}
.wallet-card{border:1px solid var(--border, #35383b);border-radius:16px;padding:22px;background:var(--surface);min-width:0}
.wallet-kind{font-size:10px;letter-spacing:1px;color:var(--text-2)}
.wallet-card h3{margin:10px 0 18px;overflow-wrap:anywhere}.wallet-card p,.wallet-card small{font-size:12px;color:var(--text-2)}
.wallet-amount{font-size:26px;overflow-wrap:anywhere}.wallet-breakdown{display:grid;gap:8px;margin:18px 0;font-size:12px}.wallet-breakdown span{display:flex;justify-content:space-between;gap:12px}
.wallet-forms{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}.wallet-forms .form-card{width:100%;max-width:none;margin:0}
.wallet-forms h2,#screen-categories h2,#screen-wallets h2{font-size:20px;margin-bottom:18px}
.wallet-forms .field,#category-create-form .field{margin-bottom:16px}.wallet-hint{font-size:12px;line-height:1.6;color:var(--text-2);margin:10px 0 18px}
.wallet-payment{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border, #35383b);padding:14px 0}.wallet-payment p{font-size:12px;margin-top:6px}
.category-chips{display:flex;flex-wrap:wrap;gap:8px}.category-chips span{font-size:13px;border:1px solid var(--border, #35383b);padding:8px 12px;border-radius:20px}.category-chips .custom-chip{border-color:#b49552}
#screen-categories .form-card{max-width:640px;margin:24px 0} [hidden]{display:none!important}
@media(max-width:700px){.wallet-forms{grid-template-columns:1fr}.wallet-grid{grid-template-columns:1fr}.wallet-toolbar .btn{flex:1}.wallet-toolbar label{width:100%}}

/* Gestão: mesmos limites e alinhamento para formulário e listas. */
#screen-categories .form-card{max-width:none;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
#category-create-form .field{margin:0;min-width:0}
#category-create-form .btn{width:100%;margin:0;align-self:stretch}
#category-list{align-items:stretch}
#category-list .wallet-card{margin:0}
.wallet-forms{grid-template-columns:1fr}
.organization-delete{display:block;margin-top:20px}
.category-chips .custom-chip{display:inline-flex;align-items:center;gap:8px}
.category-delete{border:0;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer;min-width:24px;min-height:24px;border-radius:50%}
.category-delete:hover{background:var(--border)}
.category-delete:focus-visible{outline:2px solid var(--accent)}
@media(max-width:700px){#screen-categories .form-card{grid-template-columns:1fr}}

#screen-wallets #wallet-list{grid-template-columns:repeat(2,minmax(0,1fr))}
#wallet-list .wallet-card{display:flex;flex-direction:column;align-items:flex-start}
#wallet-list .wallet-card h3{margin:0 0 18px}
#wallet-list .organization-delete{margin-top:auto}
@media(max-width:700px){#screen-wallets #wallet-list{grid-template-columns:1fr}}

.nav-avatar{border:0;cursor:pointer;font:inherit}.nav-avatar:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.category-icon-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}.category-icon-picker button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer}.category-icon-picker button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-lt)}.category-icon-picker svg{width:22px;height:22px}.category-icon-picker span{font-size:12px}
#category-create-form .full{grid-column:1/-1}.closing-form{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin-bottom:16px}.closing-form label{display:grid;gap:6px;font-size:12px}.closing-form input{width:90px}.filter-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.filter-group input,.closing-form input{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}

.category-color-control{display:flex;align-items:center;gap:14px}.category-color-control input[type="color"]{width:64px;height:44px;padding:4px;cursor:pointer}.category-color-control span{border:2px solid #f2b84b;border-radius:20px;padding:9px 14px;font-size:13px}

/* Consistent actions, responsive period controls and profile menu. */
.quick-actions { display: grid; grid-auto-rows: 1fr; gap: 10px; }
.quick-actions .qa-btn { width: 100%; height: 100%; min-height: 84px; margin: 0; box-sizing: border-box; }
.qa-text { overflow-wrap: anywhere; }
.qa-text span { display: block; }
.home-filters label { flex: 1 1 220px; min-width: 0; }
.home-filters select, .home-filters input { flex: 1; min-width: 0; width: 100%; max-width: none; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface); color: var(--text); font: inherit; }
.profile-menu { position: relative; }
.profile-menu-list { position: absolute; right: 0; top: calc(100% + 10px); width: 200px; max-width: calc(100vw - 32px); z-index: 100; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); }
.profile-menu-list[hidden] { display: none; }
.profile-menu-list button { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.profile-menu-list button:hover, .profile-menu-list button:focus-visible { background: var(--bg); }
.nav-avatar, .profile-avatar-preview { position: relative; overflow: hidden; }
.nav-avatar img, .profile-avatar-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-preview { width: 76px; height: 76px; border-radius: 50%; background: var(--accent); color: #20252b; display: grid; place-items: center; font-size: 32px; flex-shrink: 0; }
.avatar-editor { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.avatar-editor > div:last-child { min-width: 0; }
.avatar-upload { white-space: normal; cursor: pointer; }
.avatar-symbols { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.avatar-symbols button { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--accent); color: #20252b; font-size: 26px; cursor: pointer; }
.avatar-symbols button:focus-visible, .avatar-symbols button:hover { outline: 2px solid var(--text); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.avatar-editor:focus-within .avatar-upload { outline: 2px solid var(--accent); outline-offset: 2px; }
.insert-import { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.insert-import .btn { min-height: 44px; }
#profile-card { scroll-margin-top: 20px; }
@media(max-width: 600px) {
  .home-filters label { flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .avatar-editor { align-items: flex-start; flex-wrap: wrap; }
  .insert-import, .insert-import .action-menu, .insert-import .btn { width: 100%; }
  .insert-import .action-menu-list { right: 0; left: 0; width: 100%; }
}

/* Import review: header and footer stay separate from the scrollable movements. */
#import-review { margin: auto; box-sizing: border-box; width: min(980px, calc(100vw - 32px)); height: min(900px, calc(100dvh - 40px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--border); border-radius: 20px; color: var(--text); background: var(--bg); overflow: hidden; box-shadow: 0 24px 80px rgb(0 0 0 / .3); }
#import-review::backdrop { background: rgb(0 0 0 / .66); }
#import-review [hidden] { display: none !important; }
#import-review-form { height: 100%; display: flex; flex-direction: column; margin: 0; min-height: 0; }
.import-review-header { flex: none; padding: 24px 28px 22px; border-bottom: 1px solid var(--border); background: var(--surface); }
.import-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.import-eyebrow { font-size: 10px; letter-spacing: .14em; font-weight: 700; color: var(--text-2); }
#import-review-title { font-size: 24px; line-height: 1.25; margin: 6px 0 8px; }
.import-intro { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0; }
.import-close { flex: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--bg); cursor: pointer; font-size: 26px; line-height: 1; }
.import-top-grid { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(0,1.5fr); align-items: end; gap: 24px; margin-top: 22px; }
#import-review label:not(.import-include):not(.import-remember) { display: grid; gap: 8px; font-size: 12px; font-weight: 500; min-width: 0; }
#import-review input:not([type=checkbox]), #import-review select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--bg); font: inherit; font-size: 14px; }
#import-review input:focus-visible, #import-review select:focus-visible, #import-review button:focus-visible, #import-review summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.import-totals { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 10px; }
.import-totals > div { min-width: 0; display: grid; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.import-totals span { color: var(--text-2); font-size: 11px; }
.import-totals strong { font-size: 16px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#import-review .income { color: var(--green); }
#import-review .expense { color: var(--red); }
.import-review-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 28px 24px; scrollbar-gutter: stable; }
.import-help, .import-rules { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; margin-bottom: 12px; padding: 0 14px; font-size: 12px; }
.import-help > summary, .import-rules > summary { padding: 12px 0; cursor: pointer; color: var(--text-2); }
.import-help p, .import-rules p { font-size: 12px; line-height: 1.6; margin: 0 0 14px; color: var(--text-2); }
#import-review-rule-warning:empty, #import-review-status:empty { display: none; }
#import-review-rule-warning { font-size: 13px; line-height: 1.5; color: var(--text); }
.import-rule-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.import-rule-item span { min-width: 0; overflow-wrap: anywhere; }
.import-rule-item small { display: block; margin-top: 5px; color: var(--text-2); }
.import-review-toolbar { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; margin: 0 0 12px; }
#import-review-visible { margin: 0 0 12px; font-size: 11px; }
#import-review-rows { display: grid; gap: 16px; }
.import-review-row { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); min-width: 0; }
.import-row-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#import-review .import-include { display: flex; align-items: center; gap: 12px; font-size: 13px; cursor: pointer; min-width: 0; }
.import-include small { display: block; font-size: 11px; color: var(--text-2); margin-top: 5px; }
#import-review input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.import-amount { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.import-status-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 16px 32px; }
.import-badge { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 10px; font-weight: 600; background: var(--bg); }
.import-badge.review { color: var(--text); border-color: var(--accent); }
.import-badge.suggested, .import-badge.reviewed { color: var(--green); }
.import-badge.saved { color: var(--blue); }
.import-excluded { font-size: 11px; color: var(--text-2); }
.import-row-fields { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 16px; }
.import-reason { font-size: 12px; line-height: 1.5; color: var(--text-2); margin: 12px 0; }
.import-row-bottom { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.original-description { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; font-size: 12px; color: var(--text-2); }
.original-description summary { padding: 8px 0; cursor: pointer; }
.original-description p { line-height: 1.6; margin: 6px 0; }
.import-mark-reviewed { padding: 8px 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#import-review .import-remember { display: flex; align-items: center; gap: 10px; padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--border); font-size: 12px; cursor: pointer; }
.import-remember small { display: block; font-size: 11px; line-height: 1.4; color: var(--text-2); margin-top: 4px; }
.import-duplicate { opacity: .7; }
.import-review-footer { flex: none; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; padding: 18px 28px; border-top: 1px solid var(--border); background: var(--surface); }
#import-review-status { flex-basis: 100%; font-size: 13px; line-height: 1.5; margin: 0; }
#import-review-summary { margin: 0; font-size: 12px; color: var(--text-2); }
.import-footer-actions { display: flex; gap: 12px; margin-left: auto; }
#import-review .btn { width: auto; min-height: 44px; margin: 0; }
#import-review .btn-primary { min-width: 220px; }
@media(max-width:700px) {
 #import-review { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
 #import-review-form { overflow-y:auto; overscroll-behavior:contain; }
 .import-review-header { padding: calc(14px + env(safe-area-inset-top)) 16px 14px; }
 #import-review-title { font-size: 18px; margin:4px 0 0; }
 .import-title-row { gap:10px; align-items:center; }
 .import-eyebrow { font-size:9px; letter-spacing:.08em; }
 .import-close { width:44px; height:44px; font-size:24px; }
 .import-top-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
 .import-totals { grid-template-columns: .7fr 1fr 1fr; gap: 8px; }
 .import-totals > div { padding: 8px; gap: 5px; }
 .import-totals span { font-size:10px; }
 .import-totals strong { font-size: 12px; white-space: normal; }
 .import-review-scroll { flex:none; overflow:visible; padding: 12px 14px 18px; scrollbar-gutter: auto; }
 .import-review-toolbar { grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 0; }
 .import-intro { display: none; }
 #import-review-rows { gap:12px; }
 .import-review-row { padding: 12px; border-radius:12px; }
 .import-row-fields { grid-template-columns: 1fr; gap: 10px; }
 .import-row-heading { flex-wrap:wrap; gap:8px; }
 #import-review .import-include { font-size:12px; gap:8px; }
 .import-amount { font-size: 14px; margin-left:auto; }
 .import-status-line { margin:10px 0; gap:6px; }
 .import-reason, .original-description, .import-mark-reviewed { font-size:11px; }
 .import-reason { margin:10px 0; }
 #import-review .import-remember { font-size:11px; padding-top:10px; }
 .import-help, .import-rules { font-size:11px; margin-bottom:8px; padding:0 10px; }
 .import-help > summary, .import-rules > summary { padding:13px 0; line-height:1.4; }
 .import-review-footer { position:sticky; bottom:0; z-index:2; margin-top:auto; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 8px; box-shadow:0 -4px 16px rgba(0,0,0,.1); }
 #import-review-summary { width: 100%; text-align: center; font-size:11px; line-height:1.4; }
 .import-footer-actions { width: 100%; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px; }
 #import-review .btn { font-size:12px; padding:10px 12px; line-height:1.4; }
 #import-review .btn-primary { min-width: 0; padding: 10px; }
 #import-review label:not(.import-include):not(.import-remember) { font-size:11px; gap:5px; }
 #import-review input:not([type=checkbox]), #import-review select { font-size: 13px; padding:9px 10px; min-height:44px; font-weight:400; }
}
@media(max-width:360px) { .import-row-heading { gap: 8px; } .import-amount { font-size: 14px; } .import-totals > div { padding: 8px; } .import-totals strong { font-size: 11px; } .import-totals span { font-size: 10px; } }

/* Home: hierarquia, filtros e resumo visual. Escopo exclusivo da visão geral. */
#screen-home .home-dashboard { max-width:1240px; padding:32px 32px 32px; }
#screen-home .home-secondary-nav { display:flex; align-items:center; gap:28px; min-height:66px; border-bottom:1px solid var(--border); margin-bottom:32px; overflow-x:auto; }
#screen-home .home-secondary-nav button, #screen-home .home-tab-current { display:inline-flex; align-items:center; gap:8px; flex:none; min-height:66px; padding:0; font:inherit; font-size:13px; background:none; border:0; color:var(--text-2); white-space:nowrap; }
#screen-home .home-secondary-nav button { cursor:pointer; }
#screen-home .home-secondary-nav svg { width:16px; height:16px; }
#screen-home .home-tab-current { color:var(--text); font-weight:700; border-bottom:2px solid var(--accent); }
#screen-home .home-overview-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
#screen-home .home-eyebrow { font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--text-3); margin:0 0 10px; }
#screen-home .home-title { margin:0 0 8px; font-size:30px; line-height:1.2; }
#screen-home .home-intro { margin:0; color:var(--text-2); font-size:13px; line-height:1.6; }
#screen-home .home-primary-actions { display:flex; gap:10px; flex-shrink:0; }
#screen-home .home-primary-actions .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; min-height:44px; margin:0; padding:12px 16px; font-size:12px; white-space:nowrap; }
#screen-home .home-primary-actions svg { width:17px; height:17px; flex-shrink:0; }
#screen-home .home-filter-panel { padding:18px 20px; border:1px solid var(--border); background:var(--surface); border-radius:12px; margin-bottom:26px; }
#screen-home .home-filters { display:grid; grid-template-columns:minmax(180px,1fr) minmax(160px,240px); gap:16px; margin:0; align-items:end; }
#screen-home .home-filters label { display:flex; flex-direction:column; gap:8px; min-width:0; font-size:12px; font-weight:600; color:var(--text-2); }
#screen-home .home-filters select, #screen-home .home-filters input { width:100%; min-width:0; min-height:44px; margin:0; }
#screen-home #home-period-help { margin:10px 0 0; line-height:1.5; font-size:11px; }
#screen-home #home-period-help:empty { display:none; }
#screen-home .cards-period-label { margin:0 0 12px; }
#screen-home .cards-grid { gap:14px; margin-bottom:24px; grid-template-columns:1.15fr 1fr 1fr 1fr; }
#screen-home .card { min-width:0; min-height:152px; padding:22px; align-items:flex-start; }
#screen-home .card-label { font-size:10px; line-height:1.6; min-height:16px; }
#screen-home .card-value { font-size:clamp(20px,2.2vw,28px); margin:12px 0 10px; line-height:1.2; }
#screen-home .home-card-note { margin:0; color:var(--text-3); font-size:10px; line-height:1.5; }
#screen-home .card-balance .home-card-note { color:var(--balance-muted); }
#screen-home .home-inline-link { background:none; border:0; padding:4px 0; color:var(--text-2); font:inherit; font-size:12px; cursor:pointer; text-align:left; line-height:1.5; }
#screen-home .limit-card .home-inline-link { font-size:10px; padding:0; text-decoration:underline; text-underline-offset:3px; }
#screen-home .home-grid { grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:24px; align-items:start; }
#screen-home .home-panel { min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
#screen-home .home-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:22px 24px; border-bottom:1px solid var(--border); }
#screen-home .home-panel-heading h2 { margin:0; font-family:var(--font-head); font-size:16px; line-height:1.4; }
#screen-home .home-panel-heading p { margin:6px 0 0; font-size:11px; color:var(--text-3); line-height:1.5; }
#screen-home .home-panel-heading > button { flex-shrink:0; }
#screen-home .tx-list { border:0; border-radius:0; box-shadow:none; }
#screen-home .tx-item { padding:18px 24px; gap:12px; }
#screen-home .tx-info { min-width:0; }
#screen-home .tx-desc { font-size:13px; }
#screen-home .tx-cat { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
#screen-home .tx-right { flex-shrink:0; }
#screen-home .tx-val { font-size:13px; }
#screen-home .tx-date { font-size:10px; }
#screen-home .home-spending-total { padding:22px 24px 18px; display:flex; flex-direction:column; gap:8px; }
#screen-home .home-spending-total > span { font-size:11px; color:var(--text-3); }
#screen-home .home-spending-total strong { font-size:25px; font-family:var(--font-head); }
#screen-home .home-category-list { list-style:none; padding:0 24px 24px; margin:0; display:grid; gap:18px; }
#screen-home .home-category-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; font-size:11px; line-height:1.5; }
#screen-home .home-category-name { display:flex; align-items:center; gap:7px; min-width:0; overflow-wrap:anywhere; color:var(--text-2); }
#screen-home .home-category-dot { width:6px; height:6px; flex-shrink:0; border-radius:50%; }
#screen-home .home-category-heading strong { font-size:11px; flex-shrink:0; }
#screen-home .home-category-meter { display:flex; align-items:center; gap:10px; margin-top:8px; }
#screen-home .home-category-track { flex:1; height:5px; border-radius:8px; overflow:hidden; background:var(--bg); }
#screen-home .home-category-track span { display:block; height:100%; border-radius:8px; }
#screen-home .home-category-percent { min-width:28px; text-align:right; font-size:10px; color:var(--text-3); }
#screen-home .home-report-link { width:100%; padding:16px 24px; border:0; border-top:1px solid var(--border); background:none; color:var(--text-2); font:inherit; font-size:12px; text-align:left; display:flex; justify-content:space-between; cursor:pointer; }
#screen-home .home-empty { display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; padding:42px 24px; min-height:260px; }
#screen-home .home-empty-icon { display:grid; place-items:center; width:44px; height:44px; background:var(--bg); border-radius:12px; color:var(--text-3); margin-bottom:16px; }
#screen-home .home-empty-icon svg { width:20px; height:20px; }
#screen-home .home-empty strong { font-size:13px; line-height:1.5; }
#screen-home .home-empty p { font-size:12px; line-height:1.7; color:var(--text-3); max-width:260px; margin:8px 0 12px; }
#screen-home .home-dashboard-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:26px; color:var(--text-3); font-size:11px; }
#screen-home button:hover { filter:brightness(1.08); }
#screen-home button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:1000px) {
 #screen-home .home-overview-header { align-items:flex-start; flex-direction:column; }
 #screen-home .cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #screen-home .home-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; }
 #screen-home .home-panel-heading, #screen-home .tx-item { padding:18px; }
 #screen-home .home-spending-total { padding:20px 18px; }
 #screen-home .home-category-list { padding:0 18px 20px; }
}
@media(max-width:760px) {
 #screen-home .home-dashboard { padding:26px 20px 24px; }
 #screen-home .home-secondary-nav { gap:22px; margin-bottom:26px; }
 #screen-home .home-secondary-nav button, #screen-home .home-tab-current { min-height:58px; font-size:12px; }
 #screen-home .home-secondary-nav { min-height:58px; }
 #screen-home .home-grid { grid-template-columns:1fr; }
 #screen-home .home-dashboard-footer { flex-direction:column; align-items:flex-start; gap:6px; }
}
@media(max-width:480px) {
 #screen-home .home-dashboard { padding:22px 16px 24px; }
 #screen-home .home-title { font-size:26px; }
 #screen-home .home-primary-actions { width:100%; display:grid; grid-template-columns:1.15fr 1fr; gap:8px; }
 #screen-home .home-primary-actions .btn { font-size:11px; padding:12px 8px; gap:6px; white-space:normal; }
 #screen-home .home-primary-actions svg { width:16px; height:16px; }
 #screen-home .home-filter-panel { padding:16px; margin-bottom:22px; }
 #screen-home .home-filters { grid-template-columns:1fr; gap:14px; }
 #screen-home .home-filters select, #screen-home .home-filters input { font-size:16px; }
 #screen-home .cards-grid { gap:10px; }
 #screen-home .card { padding:16px 12px; min-height:142px; }
 #screen-home .card-value { font-size:20px; overflow-wrap:anywhere; }
 #screen-home .card-label { font-size:9px; min-height:29px; }
 #screen-home .home-card-note { font-size:9px; }
 #screen-home .home-panel-heading { padding:18px 16px; }
 #screen-home .home-panel-heading h2 { font-size:14px; }
 #screen-home .tx-item { padding:16px; gap:9px; }
 #screen-home .tx-icon { width:32px; height:32px; flex-shrink:0; }
 #screen-home .tx-val, #screen-home .tx-desc { font-size:12px; }
}

/* Navegação financeira compartilhada no cabeçalho das telas autenticadas. */
.app-nav { background:transparent; border-bottom-color:transparent; transition:background-color .2s ease, box-shadow .2s ease; }
.app-nav.is-scrolled { background:var(--surface); box-shadow:0 1px 0 var(--border), 0 4px 16px rgba(0,0,0,.12); }
.app-nav .finance-nav { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:stretch; align-self:stretch; gap:4px; min-width:0; }
.finance-nav button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 12px; min-height:52px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--text-2); font:inherit; font-size:12px; white-space:nowrap; cursor:pointer; }
.finance-nav button svg { width:15px; height:15px; flex-shrink:0; }
.finance-nav button:hover { color:var(--text); background:var(--bg); }
.finance-nav button.active { color:var(--text); border-bottom-color:var(--accent); font-weight:700; }
.finance-nav button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.limit-card #home-limit-action { display:inline; min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--text-2); font-weight:400; text-decoration:underline; text-underline-offset:3px; }
.limit-card #home-limit-action:hover { color:var(--text); filter:none; transform:none; }
.settings-preference-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--border); }
.settings-preference-row > div { min-width:0; display:grid; gap:5px; }
.settings-preference-row strong { font-size:13px; }
.settings-preference-row small { color:var(--text-2); line-height:1.45; }
.help-page { max-width:1120px; }
.help-hero { margin-bottom:28px; }
.help-symbol { display:grid; place-items:center; width:52px; height:52px; margin-bottom:16px; border:1px solid color-mix(in srgb, var(--accent) 60%, var(--border)); border-radius:15px; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.help-symbol svg { width:27px; height:27px; }
.help-kicker { margin-bottom:10px; color:var(--text-3); font-size:10px; font-weight:700; letter-spacing:.14em; }
.help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.help-card { display:flex; gap:16px; min-width:0; padding:22px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.help-card-highlight { border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
.help-step { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:10px; background:var(--accent); color:#20252b; font-family:var(--font-head); font-size:12px; font-weight:700; }
.help-card h2 { margin:0 0 8px; font-family:var(--font-head); font-size:16px; line-height:1.35; }
.help-card p { margin:0; color:var(--text-2); font-size:12px; line-height:1.7; }
.help-card strong { color:var(--text); }
.help-link { display:inline-flex; gap:8px; align-items:center; margin-top:15px; padding:0; border:0; background:none; color:var(--text); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.help-link span { color:var(--accent); font-size:16px; transition:transform .2s ease; }
.help-link:hover span { transform:translateX(3px); }
.help-note { display:flex; gap:14px; align-items:flex-start; margin-top:18px; padding:18px 20px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
.help-note > svg { flex:none; width:20px; height:20px; color:var(--accent); }
.help-note strong { font-size:13px; }
.help-note p { margin:6px 0 0; color:var(--text-2); font-size:12px; line-height:1.6; }
@media(max-width:900px) {
  .app-nav { padding:0 20px; }
  .app-nav .finance-nav { position:static; transform:none; order:3; flex-basis:100%; margin:0; min-height:48px; overflow-x:auto; }
  .app-nav { flex-wrap:wrap; min-height:64px; }
  .finance-nav button { min-height:46px; padding:0 10px; font-size:11px; }
  .app-nav .nav-right { margin-left:auto; }
}
@media(max-width:480px) {
  .app-nav { padding:0 16px; }
  .app-nav .finance-nav { gap:0; margin-left:-4px; margin-right:-4px; }
  .finance-nav button { flex:1 0 auto; padding:0 8px; gap:5px; font-size:10px; }
  .finance-nav button svg { width:14px; height:14px; }
  .settings-preference-row { align-items:flex-start; flex-direction:column; }
  .settings-preference-row .btn { width:100%; }
  .help-grid { grid-template-columns:1fr; gap:10px; }
  .help-card { padding:18px 16px; gap:12px; }
  .help-card h2 { font-size:14px; }
  .help-note { padding:16px; }
}

/* Mobile: cabeçalho compacto e navegação fixa inferior somente nas telas autenticadas. */
@media(max-width:700px) {
  .screen.active { animation:none; }
  .app-nav { position:sticky; top:0; z-index:100; display:flex; flex-wrap:nowrap; align-items:center; min-height:58px; height:58px; padding:0 14px; background:transparent; border-bottom:0; backdrop-filter:none; }
  .app-nav .nav-logo { flex:none; margin:0; font-size:1rem; line-height:1; white-space:nowrap; }
  .app-nav .nav-logo span { display:inline; }
  .app-nav .nav-right { display:flex; align-items:center; gap:7px; width:auto; margin-left:auto; flex:none; }
  .app-nav .theme-toggle { min-height:32px; padding:4px 6px; gap:0; }
  .app-nav .theme-toggle-label { display:none; }
  .app-nav .theme-toggle-track { width:34px; height:18px; }
  .app-nav .theme-toggle-thumb { width:12px; height:12px; top:3px; left:3px; }
  .app-nav .theme-toggle.active .theme-toggle-thumb { transform:translateX(16px); }
  .app-nav .nav-avatar { width:32px; height:32px; }
  .screen.active { min-height:100dvh; }
  .app-nav .finance-nav { position:fixed; left:0; right:0; bottom:0; z-index:110; display:flex; align-items:stretch; justify-content:space-around; width:100%; height:calc(64px + env(safe-area-inset-bottom)); min-height:64px; margin:0; padding:5px 4px env(safe-area-inset-bottom); box-sizing:border-box; transform:none; overflow:visible; border-top:1px solid transparent; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .app-nav .finance-nav, .app-nav .finance-nav.is-scrolled { border-top-color:var(--border); background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 -8px 24px rgba(0,0,0,.12); transition:none; }
  .finance-nav button { flex:1 1 0; min-width:0; min-height:0; height:54px; padding:5px 2px 4px; flex-direction:column; gap:4px; border-bottom:2px solid transparent; font-size:0; }
  .finance-nav button span { display:none; }
  .finance-nav button svg { width:20px; height:20px; }
  .finance-nav button.active { color:var(--accent); border-bottom-color:var(--accent); }
  .app-content, #screen-home .home-dashboard { padding-bottom:calc(120px + env(safe-area-inset-bottom)); }
  #screen-home .home-filters label { gap:5px; font-size:10px; }
  #screen-home .home-filters select, #screen-home .home-filters input { min-height:40px; padding:8px 10px; font-size:13px; }
  #screen-home .home-filter-panel { padding:14px; }
  .help-symbol { width:46px; height:46px; margin-bottom:13px; }
  .help-symbol svg { width:23px; height:23px; }
}
@media(max-width:700px) {
  body:not([data-theme="dark"]) .app-nav .finance-nav.is-scrolled { border-top-color:var(--border); background:var(--surface); }
  /* A solid header preserves contrast without trapping the fixed bottom nav. */
  .app-nav { -webkit-backdrop-filter:none; transition:background-color .2s ease, box-shadow .2s ease; }
  .app-nav.is-scrolled { background:var(--surface); box-shadow:0 1px 0 var(--border), 0 4px 16px rgba(0,0,0,.12); }
  .spending-heatmap { margin-top:18px; }
  .heatmap-month-nav { gap:8px; margin-bottom:16px; }
  .heatmap-month-nav strong { min-width:0; flex:1; font-size:13px; }
  .heatmap-month-nav button { flex:none; width:44px; height:44px; }
  #filter-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; }
  #filter-row .filter-group label { font-size:10px; letter-spacing:0; }
  #filter-row select, #filter-row input { box-sizing:border-box; width:100%; min-width:0; min-height:42px; font-size:12px; padding-left:8px; padding-right:20px; }
  #filter-row .filter-group-wide, #filter-row .filter-group:has(#filter-invoice) { grid-column:1 / -1; }
  #screen-home .home-filters select, #screen-home .home-filters input { font-size:12px; min-width:0; }
  .screen select {
    box-sizing:border-box; display:block; width:100%; min-width:0; max-width:100%;
    height:44px; min-height:44px; font-size:12px; line-height:1.4;
    padding:8px 28px 8px 10px; -webkit-appearance:none; appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 15px) 19px,calc(100% - 11px) 19px;
    background-size:4px 4px; background-repeat:no-repeat;
  }
  .screen input[type="date"], .screen input[type="month"] {
    box-sizing:border-box; display:block; width:100%; min-width:0; max-width:100%;
    height:44px; min-height:44px; font-size:12px; line-height:1.4;
    padding:8px 10px; -webkit-appearance:none; appearance:none;
  }
  .screen input::-webkit-date-and-time-value { min-width:0; text-align:left; font:inherit; }
  .screen input::-webkit-datetime-edit { min-width:0; padding:0; font:inherit; }
  #filter-row .filter-group:has(input[type="date"]) { grid-column:1 / -1; }
  .wallet-toolbar { min-width:0; }
  .wallet-toolbar > label { display:grid; min-width:0; width:100%; gap:6px; font-size:11px; }
  .wallet-toolbar .wallet-filter { width:100%; max-width:100%; font-size:12px; }
  .evolution-card .chart-card-heading { gap:12px; }
  .evolution-card .chart-legend { flex-wrap:wrap; gap:12px; font-size:11px; }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .app-nav .finance-nav.is-scrolled { background:var(--surface); }
    body:not([data-theme="dark"]) .app-nav .finance-nav.is-scrolled { background:var(--surface); }
  }
}