:root {
  --ink: #152728;
  --muted: #6f817f;
  --teal: #3d9484;
  --teal-dark: #2f7568;
  --green: #5fa84f;
  --green-soft: #e8f4e8;
  --mint: #e9f4f0;
  --sand: #f4f2ec;
  --line: #e4e9e6;
  --coral: #e07a62;
  --coral-soft: #fff0eb;
  --blue-soft: #eef3fb;
  --amber-soft: #fff6e8;
  --surface: #ffffff;
  --surface-2: #f7faf8;
  --bg: #f3f6f4;
  --hover: #f0f5f3;
  --nav-ink: #4a5c59;
  --sidebar-bg: rgba(255, 255, 255, 0.92);
  --header-bg: rgba(255, 255, 255, 0.98);
  --card-bg: rgba(255, 255, 255, 0.96);
  --card-line: rgba(228, 233, 230, 0.95);
  --input-bg: #ffffff;
  --popover-bg: #ffffff;
  --header-chip: #f3f5f7;
  --header-chip-line: #e8ecea;
  --chip-bg: #f7faf8;
  --chip-line: #e8efeb;
  --chart-ink: #152728;
  --chart-muted: #868e96;
  --chart-grid: rgba(21, 39, 40, 0.08);
  --chart-grid-strong: #d7dfdb;
  --shadow-sm: 0 2px 8px rgba(21, 39, 40, 0.04);
  --shadow-md: 0 10px 30px rgba(21, 39, 40, 0.08);
  --shadow-lg: 0 18px 44px rgba(21, 39, 40, 0.1);
  --skeleton: #eef2ef;
  --skeleton-shine: #f8faf8;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  color-scheme: light;
}

html.theme-dark {
  color-scheme: dark;
  --ink: #e7eeec;
  --muted: #b7c6c3;
  --teal: #4eaa99;
  --teal-dark: #7dcdc0;
  --green: #74c262;
  --green-soft: #1c2c20;
  --mint: #1a2c28;
  --sand: #222c2a;
  --line: #2d3936;
  --coral: #e8927d;
  --coral-soft: #2c201c;
  --blue-soft: #1a2230;
  --amber-soft: #2a2418;
  --surface: #1c2624;
  --surface-2: #24302d;
  --bg: #121918;
  --hover: #2a3834;
  --nav-ink: #b7c6c3;
  --sidebar-bg: rgba(18, 25, 24, 0.96);
  --header-bg: rgba(18, 25, 24, 0.96);
  --card-bg: #1c2624;
  --card-line: #2d3936;
  --input-bg: #161e1c;
  --popover-bg: #1c2624;
  --header-chip: #1c2624;
  --header-chip-line: #2d3936;
  --chip-bg: #24302d;
  --chip-line: #31403c;
  --chart-ink: #e7eeec;
  --chart-muted: #93a4a1;
  --chart-grid: rgba(231, 238, 236, 0.1);
  --chart-grid-strong: #3a4845;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.4);
  --skeleton: #2c3936;
  --skeleton-shine: #3a4a46;
}

* { box-sizing: border-box; }

html {
  overscroll-behavior-y: none;
  background: var(--bg);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(61, 148, 132, 0.08), transparent 28%),
    radial-gradient(circle at 20% 0%, rgba(224, 122, 98, 0.06), transparent 24%),
    var(--bg);
  font-family: "DM Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button { font: inherit; cursor: pointer; }

/* App layout + sidebar */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 248px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(12px);
  transition: transform 0.22s ease, width 0.22s ease, opacity 0.22s ease;
  z-index: 60;
}
html.sidebar-boot .sidebar {
  transition: none !important;
}
html.sidebar-pref-collapsed .sidebar {
  width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-100%);
  border-right: 0;
}

.sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 28px;
}

.sidebar__brand { font-size: 17px; text-decoration: none; }

.sidebar__toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--sand);
  color: #5c6d6b;
}

.sidebar__toggle svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar__toggle:hover { background: #e7f1ed; color: var(--teal); }

.sidebar__group {
  margin: 0 0 8px 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.sidebar__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.sidebar__link {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--nav-ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.sidebar__link:hover { background: var(--hover); color: var(--teal-dark); }

.sidebar__link.is-active {
  background: var(--mint);
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 1px var(--line);
}

.app-main {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 45;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(21, 39, 40, 0.04);
  backdrop-filter: blur(10px);
}

.app-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 0 clamp(16px, 3vw, 28px);
}

.app-header__left,
.app-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.app-header__right {
  justify-content: flex-end;
  flex-shrink: 0;
}

.topbar-menu {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  flex-shrink: 0;
}

.topbar-menu svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.topbar-menu:hover { background: var(--hover); }

.sidebar-open {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

.app-layout.sidebar-collapsed .sidebar {
  width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-100%);
  border-right: 0;
}

.page-shell {
  width: min(1680px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 40px;
  flex: 1;
  min-width: 0;
}

.topbar-period {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-header .topbar-filter {
  padding: 8px 12px;
  margin: 0;
  background: var(--header-chip);
  border: 1px solid var(--header-chip-line);
  border-radius: 16px;
  box-shadow: none;
  white-space: nowrap;
}

.topbar-filter[hidden] {
  display: none !important;
}

.topbar__brand {
  font-size: 17px;
  white-space: nowrap;
}

.app-header .month-control,
.app-header .year-control {
  padding: 6px 8px;
  background: var(--header-chip);
  border: 1px solid var(--header-chip-line);
  border-radius: 16px;
  box-shadow: none;
  backdrop-filter: none;
  gap: 4px;
  position: relative;
}

.app-header .month-picker-wrap {
  position: static;
}

.app-header .calendar-popover {
  left: auto;
  right: 0;
  transform: none;
  animation-name: calendarInFlush;
}

.app-header .year-control {
  padding: 4px 6px;
  gap: 2px;
  border-radius: 14px;
  flex-shrink: 0;
}

.month-control[hidden],
.year-control[hidden] {
  display: none !important;
}

.app-header .month-label {
  min-width: 132px;
  padding: 2px 6px;
  text-align: center;
}

.app-header .year-control .month-label {
  min-width: 72px;
  padding: 2px 4px;
}

.app-header .month-label small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.app-header .year-control .month-label small {
  font-size: 10px;
}

.app-header .month-label span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.app-header .year-control .month-label span {
  font-size: 13px;
}

.app-header .arrow {
  width: 32px;
  height: 32px;
  background: transparent;
  border-radius: 999px;
}

.app-header .year-control .arrow {
  width: 28px;
  height: 28px;
}

.app-header .arrow:hover {
  background: var(--hover);
  transform: none;
}

.app-header .icon-button {
  background: var(--header-chip);
  border: 1px solid var(--header-chip-line);
  box-shadow: none;
}

.app-header .profile {
  gap: 0;
  flex-shrink: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.7px;
  font-size: 18px;
}
.brand span span { color: var(--teal); }
.brand-mark {
  width: 28px;
  height: 28px;
  padding: 7px 6px 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.5px;
  border-radius: 8px;
  background: #152728;
}
.brand-mark i {
  display: block;
  width: 3.5px;
  background: #fff;
  border-radius: 1.5px;
}
.brand-mark i:nth-child(1) { height: 6px; }
.brand-mark i:nth-child(2) { height: 10px; }
.brand-mark i:nth-child(3) { height: 14px; }
.profile { display: flex; gap: 16px; align-items: center; }
.icon-button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  position: relative;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.icon-button.is-spinning svg {
  animation: refresh-spin 0.8s linear infinite;
}

@keyframes refresh-spin {
  to { transform: rotate(360deg); }
}

.icon-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.icon-button svg,
.arrow svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pull-refresh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 0;
  pointer-events: none;
  color: var(--teal-dark);
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.15s ease;
}
.pull-refresh.is-visible {
  opacity: 1;
}
.pull-refresh__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}
.pull-refresh.is-ready .pull-refresh__icon {
  transform: rotate(180deg);
  border-color: rgba(61, 148, 132, 0.35);
  color: var(--teal);
}
.pull-refresh.is-refreshing .pull-refresh__icon {
  animation: refresh-spin 0.8s linear infinite;
  transform: none;
}
.pull-refresh__icon svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pull-refresh__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.pull-refresh.is-ready .pull-refresh__label,
.pull-refresh.is-refreshing .pull-refresh__label {
  color: var(--teal-dark);
}

@media (pointer: coarse) {
  #refreshDashboard {
    display: none !important;
  }
  .pull-refresh {
    display: flex;
  }
}
.notification:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--coral);
  border: 2px solid var(--bg);
  border-radius: 50%;
  top: 7px;
  right: 6px;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #d6e5d4, #c8dcc5);
  color: #3d6646;
  font-size: 11px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar--lg {
  width: 52px;
  height: 52px;
  font-size: 15px;
}
.user-menu {
  position: relative;
  z-index: 55;
}
.user-chip {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  line-height: 0;
}
.user-chip:hover .avatar,
.user-chip:focus-visible .avatar {
  box-shadow: 0 0 0 3px rgba(61, 148, 132, 0.22);
}
.user-menu__popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(240px, calc(100vw - 24px));
  padding: 10px;
  background: var(--popover-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 80;
}
.user-menu__popover[hidden] {
  display: none !important;
}
.user-menu__who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.user-menu__who-copy {
  min-width: 0;
}
.user-menu__who-copy strong {
  display: block;
  font-size: 14px;
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu__who-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.user-menu__item {
  width: 100%;
  display: block;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 14px;
  font-weight: 600;
}
.user-menu__item:hover {
  background: var(--mint);
}
.user-menu__item--danger {
  color: var(--coral);
}
.user-menu__item--danger:hover {
  background: var(--coral-soft);
}
.user-photo-field {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.user-photo-field__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.users-table .user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.users-table .user-cell .avatar {
  width: 32px;
  height: 32px;
  font-size: 10px;
  box-shadow: none;
}

/* Hero */
.hero {
  margin-top: 56px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  position: relative;
  z-index: 40;
}
.eyebrow {
  margin: 0 0 8px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(34px, 5vw, 48px);
  letter-spacing: -2px;
  font-weight: 600;
}
.month-control {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 50;
}
.month-picker-wrap { position: relative; z-index: 51; }
.arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #5c6d6b;
  background: var(--sand);
  border: 0;
  border-radius: 11px;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.arrow:hover {
  background: #e7f1ed;
  color: var(--teal);
  transform: translateY(-1px);
}
.month-label {
  min-width: 140px;
  text-align: center;
  border: 0;
  background: transparent;
  padding: 2px 6px;
  color: inherit;
}
.month-label span { display: block; font-size: 14px; font-weight: 700; }
.month-label small { color: var(--muted); font-size: 11px; }
.month-label:hover span { color: var(--teal); }

/* Calendar */
.calendar-popover {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(292px, calc(100vw - 24px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--popover-bg);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  animation: calendarIn 0.18s ease;
}
.calendar-popover[hidden] { display: none; }
@keyframes calendarIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes calendarInFlush {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.calendar-header strong { font-size: 16px; letter-spacing: -0.3px; }
.calendar-nav {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--sand);
  color: #5c6d6b;
  font-size: 18px;
  line-height: 1;
}
.calendar-nav:hover { background: #e7f1ed; color: var(--teal); }
.calendar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calendar-month {
  padding: 11px 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--nav-ink);
  font-size: 12px;
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.calendar-month:hover {
  background: var(--hover);
  border-color: var(--line);
  color: var(--teal);
  transform: translateY(-1px);
}
.calendar-month.is-selected {
  background: linear-gradient(145deg, var(--teal), var(--teal-dark));
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 8px 18px rgba(61, 148, 132, 0.28);
}
.calendar-month.is-current:not(.is-selected) {
  border-color: var(--teal);
  background: var(--mint);
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 1px rgba(61, 148, 132, 0.12);
}
.calendar-month.is-future { opacity: 0.72; }

.hero--compact {
  margin-top: 12px;
}

/* Monthly dashboard */
.dashboard-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.balance-timeline-card,
.variation-card {
  height: 100%;
}
.panel-card {
  padding: 22px 24px;
  border: 1px solid var(--card-line);
  border-radius: 20px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}
.panel-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.panel-card__subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.panel-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.panel-card__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 16px;
  flex-shrink: 0;
}
.panel-card__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.panel-card__icon--teal { background: var(--mint); color: var(--teal-dark); }
.panel-card__icon--blue { background: #4f73b8; color: #fff; }
.panel-card__icon--blue svg {
  fill: currentColor;
  stroke: none;
}
.panel-card__icon--purple { background: #f0ebff; color: #6b5bb5; }
.panel-card__icon--amber { background: var(--amber-soft); color: #c9923d; }

.balance-timeline-card .panel-card__head { margin-bottom: 18px; }
.balance-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.balance-timeline__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding: 10px 0;
  position: relative;
}
.balance-timeline__item[hidden] {
  display: none !important;
}
.balance-timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 34px;
  bottom: -6px;
  border-left: 2px dashed #d8e3df;
}
.balance-timeline__marker {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef3fb;
  color: #4f73b8;
  flex-shrink: 0;
}
.balance-timeline__marker svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.balance-timeline__item--current .balance-timeline__marker {
  background: #4f73b8;
  box-shadow: 0 0 0 4px rgba(79, 115, 184, 0.14);
}
.balance-timeline__item--forecast .balance-timeline__marker {
  background: #f3f5f7;
  color: #8b9997;
}
.balance-timeline__item--forecast.is-settled .balance-timeline__marker {
  background: #e8f5ef;
  color: #3d8f6a;
}
.balance-timeline__copy strong {
  display: block;
  margin-bottom: 2px;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.8px;
  line-height: 1.1;
}
.balance-timeline__copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.balance-timeline__item--current .balance-timeline__copy strong {
  font-size: clamp(26px, 2.8vw, 32px);
}
.balance-timeline.is-compact .balance-timeline__item--initial::after {
  bottom: -16px;
}

.variation-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.variation-card__metric {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 8px;
}
.variation-card__metric strong {
  margin: 0;
  font-size: clamp(28px, 3vw, 34px);
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--ink);
}
.variation-card--positive .variation-card__metric strong { color: #4a9a3f; }
.variation-card--negative .variation-card__metric strong { color: #d4644f; }
.variation-card__percent {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.variation-card--positive .variation-card__percent {
  background: rgba(95, 168, 79, 0.14);
  color: #4a9a3f;
}
.variation-card--negative .variation-card__percent {
  background: rgba(224, 122, 98, 0.14);
  color: #d4644f;
}
.variation-card .comparison {
  margin: 0 0 4px;
  color: #8b9997;
  font-size: 12px;
  line-height: 1.45;
}
.variation-card .balance-target-block {
  margin-top: auto;
  padding-top: 16px;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
}
.variation-card .balance-target-status {
  color: var(--ink);
  font-size: 13px;
}
.variation-card .balance-target {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  color: #657573;
  font-size: 14px;
  line-height: 1.3;
}
.variation-card .balance-target-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.variation-card .balance-target-value {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.variation-card .balance-target-percent {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}

.overview-section { margin-top: 24px; }
.section-heading {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.overview-grid--totals {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}
.overview-card {
  padding: 18px 18px 16px;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  min-height: 132px;
}
.overview-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #657573;
  font-size: 12px;
  font-weight: 600;
}
.overview-card__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  flex-shrink: 0;
}
.overview-card__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.overview-card__icon--blue { background: #eef3fb; color: #4f73b8; }
.overview-card__icon--green { background: var(--green-soft); color: var(--green); }
.overview-card__icon--red { background: var(--coral-soft); color: var(--coral); }
.overview-card strong {
  display: block;
  margin: 0 0 10px;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.7px;
  line-height: 1.1;
}
.overview-card--blue strong { color: #4f73b8; }
.overview-card--green strong { color: #4a9a3f; }
.overview-card--red strong { color: #d4644f; }
.overview-card .comparison {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.overview-card--blue .comparison {
  background: rgba(79, 115, 184, 0.14);
  color: #4f73b8;
}
.overview-card--green .comparison {
  background: rgba(95, 168, 79, 0.14);
  color: #4a9a3f;
}
.overview-card--red .comparison {
  background: rgba(224, 122, 98, 0.14);
  color: #d4644f;
}
.overview-card .comparison .up,
.overview-card .comparison .down,
.overview-card .comparison .neutral {
  color: inherit;
  font-weight: 700;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.panel-card__head--compact {
  margin-bottom: 16px;
}
.panel-card__head--compact .panel-card__title {
  margin: 0;
}
.detail-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.detail-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
}
.detail-total span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.detail-total strong {
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -0.4px;
}
.detail-total__values {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-left: auto;
}
.detail-average {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}
.detail-average__label {
  white-space: nowrap;
}
.detail-average strong {
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}
.detail-stat {
  padding: 14px;
  border-radius: 14px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
}
.detail-stat span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.detail-stat strong {
  font-size: 18px;
  letter-spacing: -0.4px;
}
.detail-stat--income {
  background: var(--green-soft);
  border-color: var(--chip-line);
}
.detail-stat--income strong { color: var(--green); }
.detail-stat__values {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.detail-stat .detail-average,
.detail-stat .detail-average__label {
  display: inline-flex;
  align-items: baseline;
  margin-bottom: 0;
}
.detail-stat .detail-average strong,
.detail-stat--income .detail-average strong {
  color: var(--muted);
  font-size: 14px;
}
.detail-stat--expense {
  background: var(--coral-soft);
  border-color: var(--chip-line);
}
.detail-stat--expense strong { color: var(--coral); }

.expense-ranking-card {
  margin-top: 18px;
}

.expense-ranking__head {
  margin-bottom: 18px;
}

.expense-ranking__head .panel-card__title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.7px;
}

.expense-ranking__empty {
  margin: 0;
  padding: 28px 12px;
  color: #82908e;
  text-align: center;
  font-size: 13px;
}

.ranking-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ranking-chart__plot {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.ranking-row__label {
  overflow: hidden;
  color: #42514f;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-row__track {
  position: relative;
  min-height: 34px;
  border-radius: 8px;
  background: #f3f6f4;
}

.ranking-row__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 56px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  cursor: default;
  transition: width 0.35s ease, filter 0.15s ease;
}

.ranking-row__bar::after {
  content: attr(data-hint);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 2;
  padding: 6px 10px;
  border-radius: 8px;
  background: #2f3d3b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 8px 18px rgba(31, 45, 42, 0.18);
}

.ranking-row__bar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  z-index: 2;
  border: 6px solid transparent;
  border-top-color: #2f3d3b;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.15s ease;
}

.ranking-row__bar:hover,
.ranking-row__bar:focus-visible {
  filter: brightness(1.04);
  outline: none;
}

.ranking-row__bar:hover::after,
.ranking-row__bar:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ranking-row__bar:hover::before,
.ranking-row__bar:focus-visible::before {
  opacity: 1;
}

.ranking-row__percent {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.ranking-axis {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  margin-top: 4px;
}

.ranking-axis__spacer {
  display: block;
}

.ranking-axis__scale {
  position: relative;
  min-height: 34px;
}

.ranking-axis__grid {
  position: absolute;
  inset: 0 0 18px;
  pointer-events: none;
}

.ranking-axis__gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e7ece9;
  transform: translateX(-50%);
}

.ranking-axis__labels {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  color: #9aa8a6;
  font-size: 11px;
  font-weight: 600;
}

.expense-ranking-card.is-loading .expense-ranking__body {
  opacity: 0.55;
  pointer-events: none;
}

.panel-card.is-loading .value-slot,
.overview-card.is-loading .value-slot,
.overview-card.is-loading .comparison,
.variation-card.is-loading .comparison,
.totais-card.is-loading .value-slot {
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 50%, var(--skeleton) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 8px;
  color: transparent;
  min-height: 1em;
}
.overview-card.is-loading .comparison { min-height: 0.85em; }

/* Summary cards */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
  position: relative;
  z-index: 1;
}
.summary-card {
  min-height: 196px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #657573;
  font-size: 13px;
  font-weight: 600;
}
.card-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 500;
}
.income-icon { background: var(--green-soft); color: var(--green); }
.expense-icon { background: var(--coral-soft); color: var(--coral); }
.balance-icon { color: #d9f2e8; background: #ffffff20; }
.summary-card strong {
  display: block;
  margin: 18px 0 8px;
  font-size: clamp(24px, 3vw, 28px);
  letter-spacing: -1.1px;
}
.summary-card p { margin: 0; color: #8b9997; font-size: 12px; }
.card-bar-wrap {
  margin-top: auto;
  padding-top: 18px;
}
.card-bar {
  overflow: hidden;
  height: 10px;
  border-radius: 99px;
  background: #eff2ef;
}
.card-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
}
.income-card .card-bar i { background: linear-gradient(90deg, #7fbe6f, var(--green)); }
.expense-card .card-bar i { background: linear-gradient(90deg, #ef9a86, var(--coral)); }
.card-share {
  display: block;
  margin-top: 8px;
  color: #8b9997;
  font-size: 11px;
  font-weight: 600;
}
.income-card .card-share { color: #6a9a5e; }
.expense-card .card-share { color: #c97864; }
.income-card,
.expense-card {
  display: flex;
  flex-direction: column;
}

/* Balance card */
.balance-card {
  min-height: 214px;
  border: 0;
  color: #fff;
  background: linear-gradient(145deg, #1f4c4b 0%, #2a6360 55%, #245856 100%);
  box-shadow: 0 16px 34px rgba(31, 76, 75, 0.22);
  padding: 0;
}
.balance-card__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 214px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.balance-card:hover { transform: translateY(-2px); }
.balance-card--negative {
  background: linear-gradient(145deg, #8f3a32 0%, #b84f44 55%, #a8443a 100%);
  box-shadow: 0 16px 34px rgba(143, 58, 50, 0.24);
}
.balance-card .card-heading { color: #dcebe6; margin-bottom: 2px; }
.balance-card--negative .card-heading { color: #ffe3df; }
.balance-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 12px 0 8px;
}
.balance-amount strong {
  margin: 0;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.05;
}
.balance-percent {
  font-size: clamp(13px, 1.8vw, 16px);
  font-weight: 600;
  letter-spacing: -0.3px;
  opacity: 0.88;
  color: #d5efe5;
}
.balance-card--negative .balance-percent { color: #ffe8e4; }
.balance-card .comparison {
  margin: 0 0 4px;
  color: #c0d6d0;
  font-size: 12px;
  line-height: 1.45;
}
.balance-card--negative .comparison { color: #ffd8d2; }
.balance-card .comparison .up { color: #d4f1d0; }
.balance-card .comparison .down { color: #ffd2c6; }
.balance-card--negative .comparison .up { color: #ffe8e4; }
.balance-card--negative .comparison .down { color: #ffd2c6; }
.balance-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: auto;
  padding-top: 14px;
}
.balance-badge {
  padding: 6px 12px;
  border: 1px solid #ffffff28;
  border-radius: 99px;
  color: #d5efe5;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.balance-card--negative .balance-badge {
  color: #ffe8e4;
  border-color: #ffffff30;
  background: rgba(255, 255, 255, 0.08);
}
.balance-target-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.balance-card .balance-target-status {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 1.2;
  color: #fff;
}
.balance-target {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(213, 239, 229, 0.72);
}
.balance-card--negative .balance-target {
  color: rgba(255, 232, 228, 0.72);
}
.balance-target-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.82;
}
.balance-target-value {
  font-weight: 600;
  letter-spacing: -0.2px;
  color: rgba(255, 255, 255, 0.88);
}
.balance-card--negative .balance-target-value {
  color: rgba(255, 255, 255, 0.9);
}
.balance-target-percent {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.72;
}
.balance-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  right: -60px;
  bottom: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, #65aa94 0%, transparent 70%);
  opacity: 0.35;
  pointer-events: none;
}
.balance-card--negative .balance-glow {
  background: radial-gradient(circle, #ff8a7a 0%, transparent 70%);
  opacity: 0.28;
}

/* Metric cards (costs / pending) */
.secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.metric-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 220px;
  padding: 22px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.metric-card__header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.metric-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  flex-shrink: 0;
}
.metric-card__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.costs-icon { background: var(--blue-soft); color: #4f73b8; }
.expenses-icon { background: #f0ebff; color: #6b5bb5; }
.pending-icon { background: var(--amber-soft); color: #c9923d; }
.metric-card h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.4px;
}
.metric-card__subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.metric-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.metric-stat {
  padding: 14px;
  border-radius: 14px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
}
.metric-stat--income { background: var(--green-soft); border-color: var(--chip-line); }
.metric-stat--expense { background: var(--coral-soft); border-color: var(--chip-line); }
.metric-stat__label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.metric-stat strong {
  display: block;
  font-size: 22px;
  letter-spacing: -0.8px;
}
.metric-stat--income strong { color: var(--green); }
.metric-stat--expense strong { color: var(--coral); }
.metric-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.metric-card__footer strong {
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.5px;
}

/* Bottom grid */
.bottom-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) 1.05fr;
  gap: 18px;
  margin-top: 18px;
}

.bottom-grid--single {
  grid-template-columns: 1fr;
}

.bottom-grid--single .closing-card {
  min-height: 156px;
}

/* Annual view */
.hero-filters {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.year-control {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 50;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: #4a5c59;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.filter-check.is-disabled {
  opacity: 0.62;
  cursor: not-allowed;
  box-shadow: none;
}

.filter-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.filter-check__box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid #c5d0cc;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background 0.15s, border-color 0.15s;
}

.filter-check input:checked + .filter-check__box {
  background: var(--teal);
  border-color: var(--teal);
}

.filter-check input:checked + .filter-check__box::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.year-pick { font-size: 13px; }

.calendar-popover--years { width: min(240px, calc(100vw - 24px)); }

.annual-balance-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.details-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.category-panel {
  margin-top: 18px;
  padding: 22px 24px 20px;
}

.category-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 4px;
}
.category-panel__total {
  flex: 0 0 auto;
  text-align: right;
}
.category-panel__total span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.category-panel__total strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  letter-spacing: -0.4px;
}

.category-panel .panel-card__title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.7px;
}

.category-panel .category-list {
  margin-top: 18px;
}

.category-toggle {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--chip-bg);
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.category-toggle:hover {
  background: var(--hover);
  border-color: var(--line);
}

.category-panel.is-loading .category-list,
.category-panel.is-loading .category-toggle {
  opacity: 0.55;
  pointer-events: none;
}

.view[hidden] { display: none !important; }

.category-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--mint);
  color: var(--teal-dark);
  font-size: 17px;
  line-height: 1;
}
.category-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.category-icon.tone-coral { background: #fff0eb; color: #c45c48; }
.category-icon.tone-teal { background: #e8f4f0; color: #2f7568; }
.category-icon.tone-blue { background: #eef3fb; color: #2a56b0; }
.category-icon.tone-green { background: #e8f4e8; color: #2f7544; }
.category-icon.tone-purple { background: #f3eef8; color: #6a4c93; }
.category-icon.tone-amber { background: #fff6e8; color: #9a6b12; }
.category-icon.tone-rose { background: #fdecef; color: #a14b62; }
.category-icon.tone-slate { background: #eef1f3; color: #4d5c66; }
.category-row {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 13px 14px;
  border: 0;
  border-top: 1px solid #eef1ed;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.category-list > li:first-child .category-row { border-top: 0; }
.category-row:hover { background: #f7faf8; }
.category-row.is-open { background: #f3f8f6; }
.category-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.category-row__body { min-width: 0; }
.category-row__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  gap: 12px;
  align-items: center;
}
.category-value strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.category-value span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.category-chevron { color: var(--muted); }
.category-chevron svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.category-share {
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 99px;
  background: #eef2ef;
  overflow: hidden;
}
.category-share i {
  display: block;
  width: var(--share);
  height: 100%;
  border-radius: inherit;
  background: var(--bar, var(--teal));
}

.category-item-head {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
}

.category-bar { margin-left: 46px; }

.category-item--others .category-icon { background: #edf3f0; font-size: 15px; }

/* Insight card (annual result) */
.insight-card {
  position: relative;
  overflow: hidden;
  min-height: 156px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}
.insight-card__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--teal), #6fb0a2);
}
.insight-card__content { padding-left: 8px; }
.insight-card h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  letter-spacing: -0.6px;
}
.insight-card__hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.insight-card__metric {
  min-width: 112px;
  padding: 14px 16px;
  text-align: center;
  border-radius: 16px;
  background: var(--green-soft);
  color: var(--teal-dark);
  transition: background 0.25s, color 0.25s;
}
.insight-card__metric strong {
  display: block;
  font-size: 26px;
  letter-spacing: -1px;
  line-height: 1.1;
}
.insight-card__metric span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.82;
}
.insight-card__metric--negative {
  background: var(--coral-soft);
  color: var(--coral);
}
.insight-card__metric--positive {
  background: var(--green-soft);
  color: var(--teal-dark);
}

/* Closing card */
.closing-card {
  position: relative;
  overflow: hidden;
  min-height: 156px;
  padding: 24px;
  color: #eff9f4;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #5b998e, #4a877d);
  box-shadow: 0 16px 34px rgba(91, 153, 142, 0.22);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.closing-card--negative {
  background: linear-gradient(145deg, #9a4038, #c0564b);
  box-shadow: 0 16px 34px rgba(154, 64, 56, 0.22);
}
.closing-card--positive {
  background: linear-gradient(145deg, #5b998e, #4a877d);
}
.closing-card__glow {
  position: absolute;
  width: 160px;
  height: 160px;
  right: -50px;
  top: -50px;
  border: 24px solid #ffffff12;
  border-radius: 50%;
}
.closing-card .tip-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 11px;
  color: #4b887e;
  background: #ddf0e9;
}
.closing-card .eyebrow { color: #daf0e8; }
.closing-card h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  letter-spacing: -0.6px;
}
.closing-balance {
  margin: 10px 0 0;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
}
.closing-card > p:last-child {
  width: 90%;
  margin: 8px 0 0;
  color: #dbece6;
  font-size: 12px;
  line-height: 1.45;
}
.closing-card--negative > p:last-child { color: #ffe3df; }

/* Categories */
.category-section {
  margin-top: 20px;
  padding: 26px 28px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}
.category-section .section-heading { display: block; }
.category-section h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.7px;
}
.category-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.category-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #eef1ed;
  border-radius: 16px;
  overflow: hidden;
}
.category-item {
  padding: 14px 16px;
  background: var(--card-bg);
  border-top: 1px solid var(--line);
}
.category-item:first-child { border-top: 0; }
.category-copy { min-width: 0; }
.category-parent {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.category-name {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-meta {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.category-value {
  font-size: 15px;
  letter-spacing: -0.4px;
  white-space: nowrap;
}
.category-bar {
  overflow: hidden;
  height: 4px;
  margin-top: 10px;
  margin-left: 46px;
  border-radius: 99px;
  background: #eef2ef;
}
.category-bar i {
  display: block;
  width: var(--share);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fb0a2, var(--teal));
}
.category-item--others { background: #fafcfb; }
.empty-categories {
  padding: 28px;
  color: #82908e;
  text-align: center;
  font-size: 13px;
}

/* Comparisons & loading */
.comparison { font-weight: 600; }
.comparison .up,
.comparison .down {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.comparison .up { color: var(--green); }
.comparison .down { color: var(--coral); }
.comparison .neutral { color: #7b8b89; }
.balance-card .comparison .up { color: #d4f1d0; }
.balance-card .comparison .down { color: #ffd2c6; }
.balance-card--negative .comparison .up { color: #ffe8e4; }
.balance-card--negative .comparison .down { color: #ffd2c6; }

.summary-card.is-loading .value-slot,
.metric-card.is-loading .value-slot,
.insight-card.is-loading .value-slot {
  color: transparent;
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 50%, var(--skeleton) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 8px;
  min-height: 1em;
}
.balance-card.is-loading .value-slot,
.balance-card.is-loading .balance-percent,
.balance-card.is-loading .balance-target-value,
.balance-card.is-loading .balance-target-percent,
.balance-card.is-loading .balance-target-status {
  background: linear-gradient(90deg, #ffffff20 25%, #ffffff35 50%, #ffffff20 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 6px;
  color: transparent;
}
.balance-card.is-loading .balance-percent,
.balance-card.is-loading .balance-target-percent { min-width: 2.5em; }
.balance-card.is-loading .balance-target-value { min-width: 4.5em; display: inline-block; }
.insight-card.is-loading .insight-card__metric strong,
.closing-card.is-loading .closing-balance {
  color: transparent;
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 50%, var(--skeleton) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 8px;
  min-height: 1em;
  display: inline-block;
  min-width: 4.5em;
}
.closing-card.is-loading .closing-balance {
  background: linear-gradient(90deg, #ffffff20 25%, #ffffff35 50%, #ffffff20 75%);
}
.category-section.is-loading .category-list { opacity: 0.55; pointer-events: none; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.data-note {
  margin: 22px 0 0;
  text-align: center;
  color: #a0abaa;
  font-size: 11px;
}

@media (max-width: 1100px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secondary-grid { grid-template-columns: 1fr; }
  .details-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .summary-grid { grid-template-columns: 1fr; }
  .secondary-grid { grid-template-columns: 1fr; }
  .bottom-grid { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    box-shadow: var(--shadow-lg);
    z-index: 70;
  }
  .app-layout.sidebar-collapsed .sidebar,
  html.sidebar-pref-collapsed .sidebar { transform: translateX(-110%); }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(21, 39, 40, 0.42);
    cursor: pointer;
  }
  .sidebar-backdrop[hidden] {
    display: none !important;
  }
  body.sidebar-drawer-open {
    overflow: hidden;
  }
}

@media (max-width: 760px) {
  .page-shell { width: min(100% - 30px, 560px); padding-top: 18px; }
  .app-header__inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 8px 12px;
  }
  .app-header__left {
    gap: 2px;
    flex-shrink: 0;
  }
  .app-header__right {
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
  }
  .topbar-period {
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
    justify-content: flex-end;
    align-items: center;
  }
  .topbar-menu,
  .app-header .icon-button,
  .app-header .month-control .arrow,
  .app-header .year-control .arrow {
    width: 36px;
    height: 36px;
  }
  .app-header .avatar {
    width: 34px;
    height: 34px;
    font-size: 10px;
  }
  .app-header .profile {
    gap: 8px;
  }
  .topbar-menu svg,
  .app-header .icon-button svg,
  .app-header .arrow svg {
    width: 17px;
  }
  .topbar__brand {
    gap: 0;
  }
  .topbar__brand .brand-mark {
    width: 36px;
    height: 36px;
    padding: 8px 7px 7px;
    border-radius: 10px;
    gap: 3px;
  }
  .topbar__brand .brand-mark i {
    width: 4px;
    border-radius: 1.5px;
  }
  .topbar__brand .brand-mark i:nth-child(1) { height: 8px; }
  .topbar__brand .brand-mark i:nth-child(2) { height: 13px; }
  .topbar__brand .brand-mark i:nth-child(3) { height: 18px; }
  .topbar__brand span:not(.brand-mark) {
    display: none;
  }
  .app-header .topbar-filter {
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 12px;
    gap: 8px;
  }
  .app-header .topbar-filter .filter-check__box {
    width: 15px;
    height: 15px;
  }
  .app-header .month-control,
  .app-header .year-control {
    height: 36px;
    padding: 0 4px;
    border-radius: 12px;
    align-items: center;
  }
  .app-header .month-control {
    flex: 1;
    min-width: 0;
    max-width: 210px;
    justify-content: space-between;
  }
  .app-header .year-control {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    justify-content: center;
    gap: 0;
    padding: 0 1px;
  }
  .app-header .month-label {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7px 4px 1px;
    line-height: 1;
    transform: translateY(1px);
  }
  .app-header .month-label span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.2px;
  }
  .app-header .month-label small {
    margin-top: 0;
    font-size: 9px;
    line-height: 1;
  }
  .app-header .year-control .month-label {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 0;
  }
  .app-header .year-control .month-label span {
    font-size: 12px;
    letter-spacing: -0.2px;
  }
  .app-header .year-control .month-label small {
    display: none;
  }
  .app-header .year-control .arrow {
    width: 24px;
    height: 24px;
  }
  .app-header .year-control .arrow svg {
    width: 14px;
  }
  .app-header .profile {
    margin-left: 0;
  }
  .app-header .icon-button {
    border-radius: 10px;
  }
  .dashboard-top { grid-template-columns: 1fr; }
  .hero { margin-top: 36px; display: block; }
  .hero-filters { margin-top: 18px; }
  .overview-grid { grid-template-columns: 1fr; }
  .detail-stats { grid-template-columns: 1fr; }
  .summary-card { min-height: 168px; }
  .metric-card { min-height: auto; }
  .insight-card { flex-direction: column; align-items: flex-start; }
  .insight-card__metric { width: 100%; }
  .category-section { padding: 20px; }
  .category-item-head { grid-template-columns: 30px 1fr auto; gap: 10px; }
  .category-icon { width: 32px; height: 32px; font-size: 15px; }
  .category-bar { margin-left: 42px; }
  .category-panel__head { flex-direction: column; align-items: stretch; }
  .category-panel__total { text-align: left; }
  .category-row { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding-left: 12px; padding-right: 12px; }
  .category-row__top { gap: 10px; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--primary {
  background: var(--teal);
  color: #fff;
}
.btn--primary:hover { background: var(--teal-dark); }
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--hover); }
.btn--danger {
  background: var(--coral);
  color: #fff;
}
.btn--danger:hover { background: #c9654d; }

.debts-panel__head,
.goals-panel__head,
.users-panel__head {
  align-items: center;
}
.panel-add-btn {
  flex-shrink: 0;
}

/* Dívidas */
.debts-panel {
  padding: 22px 24px 18px;
}
.debts-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.debts-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.debts-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.modal .debts-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.modal .debts-table {
  min-width: 480px;
}
.debts-table th,
.debts-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.debts-table th {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f7faf8;
}
.debts-table tr:last-child td { border-bottom: 0; }
.debts-empty td {
  color: var(--muted);
  text-align: center;
  padding: 28px 16px;
}
.debt-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}
.debt-link:hover { color: var(--teal-dark); text-decoration: underline; }
.debt-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.debt-action {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
}
.debt-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.debt-action:hover {
  color: var(--teal-dark);
  border-color: #cfe3dd;
  background: #f3faf7;
}
.debt-action--danger:hover {
  color: #b4533c;
  border-color: #f0cfc4;
  background: var(--coral-soft);
}
.debt-type {
  display: inline-block;
  font-weight: 600;
  font-size: 13px;
}
.debt-type--payment { color: var(--teal-dark); }
.debt-type--adjustment { color: #8a6a2f; }
.debt-type--interest { color: #b4533c; }
.debts-table td small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.debts-settled {
  margin-top: 28px;
  padding: 18px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(232, 244, 232, 0.95), rgba(233, 244, 240, 0.72));
  border: 1px solid #cfe6d4;
}
.debts-settled__head {
  margin-bottom: 14px;
}
.debts-settled__title {
  margin: 0 0 4px;
  font-size: 18px;
  color: #2f6b45;
}
.debts-settled .category-subtitle {
  color: #4d7a5d;
}
.debts-table-wrap--settled {
  border-color: #b9dcc5;
  background: rgba(255, 255, 255, 0.55);
}
.debts-table--settled th {
  background: #dff0e4;
  color: #3f6f52;
}
.debts-table--settled td {
  background: rgba(255, 255, 255, 0.35);
}
.debts-table--settled .debt-link {
  color: #2f6b45;
}
.debts-settled .data-note {
  color: #4d7a5d;
}

.users-panel {
  padding: 22px 24px 18px;
}
.users-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.users-table {
  min-width: 480px;
}
.users-table .debt-link + small,
.users-table .user-badge--admin {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f4ef;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.users-table .user-badge--admin {
  background: #eef2f8;
  color: #3d5a80;
}
.users-table .user-notify-meta {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.user-notify-fields {
  margin: 8px 0 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.user-notify-fields legend {
  padding: 0;
  font-size: 14px;
  font-weight: 650;
}
.user-notify-fields .field-hint {
  margin: 6px 0 12px;
}

/* Modals */
body.modal-open { overflow: hidden; }
.modal[hidden] { display: none !important; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 39, 40, 0.42);
}
.modal__dialog {
  position: relative;
  width: min(480px, 100%);
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: min(92dvh, 720px);
  overflow: auto;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.modal__dialog--wide { width: min(720px, 100%); }
.modal__dialog--confirm { width: min(420px, 100%); }
.modal__dialog--activity {
  width: min(520px, 100%);
  max-height: min(92dvh, 840px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal__dialog--activity .modal__head {
  flex-shrink: 0;
  padding-bottom: 4px;
}
.modal__dialog--activity .activity-form {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.modal__dialog--activity .modal__actions {
  position: sticky;
  bottom: 0;
  margin: 8px -20px -20px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, transparent), var(--surface) 28%);
  border-top: 1px solid var(--line);
}
.confirm-message {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}
.modal__head h3 {
  margin: 0;
  font-size: 20px;
}
.modal__close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}
.modal__close:hover { color: var(--ink); }
.modal__body {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px 20px;
}
.modal__body input,
.modal__body select,
.modal__body textarea,
.modal__body .btn {
  min-width: 0;
  max-width: 100%;
}
.modal__summary {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.modal__actions--stack {
  flex-direction: column;
  align-items: stretch;
}
.modal__actions--stack .btn {
  width: 100%;
  justify-content: center;
}
.btn--danger-outline {
  background: #fff;
  color: #b42318;
  border: 1px solid rgba(180, 35, 24, 0.35);
}
.btn--danger-outline:hover {
  background: #fff5f4;
}
.field {
  display: grid;
  gap: 6px;
}
.field span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.activity-once-date__field .activity-once-date__text {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.activity-once-date__field .activity-once-date__text.is-empty {
  color: var(--muted);
  font-weight: 500;
}
.field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; /* evita zoom automático no iOS ao focar */
}
.field input:focus {
  outline: 2px solid rgba(61, 148, 132, 0.25);
  border-color: var(--teal);
}
.field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
}
.field select:focus {
  outline: 2px solid rgba(61, 148, 132, 0.25);
  border-color: var(--teal);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field-row--times {
  gap: 8px;
}
.field.is-disabled,
.activity-form .field.is-disabled {
  opacity: 0.55;
}
.field.is-disabled input,
.field.is-disabled select,
#activityFormOnceDateWrap.is-disabled input,
#activityFormRemindWrap.is-disabled input {
  background: #f0f3f2;
  color: var(--muted);
  cursor: not-allowed;
}
#activityFormOnceDateWrap.is-disabled,
#activityFormRemindWrap.is-disabled {
  opacity: 0.55;
}
.activity-once-date__field {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.activity-once-date__field:disabled {
  background: #f0f3f2;
  color: var(--muted);
  cursor: not-allowed;
}
.activity-once-date__field:not(:disabled):hover {
  border-color: rgba(61, 148, 132, 0.45);
}
.activity-once-date__text {
  font-size: 15px;
  font-weight: 600;
}
.activity-once-date__icon {
  width: 22px;
  height: 22px;
  color: var(--teal-dark);
  flex: 0 0 auto;
}
.activity-once-date__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.modal__dialog--mini-cal {
  width: min(340px, calc(100vw - 24px));
  max-height: min(88dvh, 520px);
  padding-bottom: 8px;
}
#activityOnceDateModal {
  z-index: 130;
}
.modal__dialog--mini-cal .modal__body {
  padding-top: 10px;
  padding-bottom: 14px;
}
.activity-mini-cal {
  width: 100%;
  max-width: 100%;
  padding: 4px 2px 2px;
  overflow: hidden;
}
.activity-mini-cal__head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.activity-mini-cal__title {
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-transform: capitalize;
}
.activity-mini-cal__nav {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--mint);
  color: var(--teal-dark);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.activity-mini-cal__nav:hover {
  background: #dceee8;
}
.activity-mini-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 4px;
}
.activity-mini-cal__weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 0;
}
.activity-mini-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.activity-mini-cal__day {
  aspect-ratio: 1;
  min-width: 0;
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.activity-mini-cal__day.is-muted {
  color: #b7c4c1;
  font-weight: 500;
}
.activity-mini-cal__day.is-today {
  box-shadow: inset 0 0 0 1.5px rgba(61, 148, 132, 0.55);
}
.activity-mini-cal__day.is-selected {
  background: var(--teal);
  color: #fff;
  box-shadow: none;
}
.activity-mini-cal__day:not(:disabled):hover {
  background: rgba(61, 148, 132, 0.12);
}
.activity-mini-cal__day.is-selected:hover {
  background: var(--teal-dark);
}
.field__time {
  min-height: 40px;
  padding: 6px 8px;
  font-variant-numeric: tabular-nums;
  appearance: none;
  -webkit-appearance: none;
}
.field__time::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
}
.field--check {
  display: flex;
  align-items: center;
  gap: 10px;
}
.field--check input {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  accent-color: var(--teal-dark);
}
.field--check span {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.field-hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.debt-trace-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f7faf8;
}
.debt-trace-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.debt-trace-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  color: var(--muted);
  font-size: 13px;
}
.debt-trace-stats strong { color: var(--ink); }

.debt-trace-list {
  display: grid;
  gap: 10px;
}
.debt-trace-empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafcfb;
}
.debt-trace-item {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.debt-trace-item__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px 12px;
  align-items: center;
}
.debt-trace-item__info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.debt-trace-item__info time {
  color: var(--muted);
  font-size: 12px;
}
.debt-trace-item__amount {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.debt-trace-item__note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Goals — scroll da página (sem overflow aninhado que corta o card) */
#viewMetas.view--active {
  display: block;
}
.goals-panel {
  padding: 22px 24px 18px;
}
.goals-scroll {
  min-width: 0;
}
.goals-panel__top {
  margin-bottom: 12px;
}
.goals-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.goals-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f7faf8;
  border: 1px solid rgba(207, 227, 221, 0.9);
}
.goals-summary[hidden] {
  display: none !important;
}
.goals-summary__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.goals-summary__label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.goals-summary__hint {
  color: var(--muted);
  font-size: 12px;
}
.goals-summary__value {
  color: var(--ink);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.goals-list {
  display: grid;
  align-content: start;
  gap: 10px;
}
.goals-list--completed {
  margin-top: 4px;
}
.goals-list--completed .goal-item {
  background: #f7faf8;
}
.goals-completed {
  margin-top: 16px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}
.goals-completed[hidden] {
  display: none !important;
}
.goals-completed__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px 2px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.goals-completed__toggle-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.goals-completed__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.goals-completed__subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.goals-completed__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}
.goals-completed.is-open .goals-completed__chevron {
  transform: rotate(180deg);
}
.goals-completed__body {
  padding-bottom: 4px;
}
.goals-completed__body[hidden] {
  display: none !important;
}
.goal-item--completed .goal-item__title {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 500;
}
.goal-item--completed .goal-item__amount {
  color: var(--muted);
}
.goals-empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafcfb;
}
.goal-item {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.goal-item--completed .goal-item__row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.goal-item.is-dragging {
  position: relative;
  z-index: 5;
  border-color: rgba(61, 148, 132, 0.45);
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}
.goal-item__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  gap: 10px 12px;
  align-items: center;
}
.goal-item__handle {
  display: none;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7faf8;
  color: var(--muted);
  touch-action: none;
  cursor: grab;
}
.goal-item__handle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.goal-item__priority {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eef6f3;
  color: var(--teal-dark);
  font-size: 14px;
  font-weight: 700;
}
.goal-item__info {
  min-width: 0;
}
.goal-item__title {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  overflow-wrap: anywhere;
}
.goal-item__title:hover {
  color: var(--teal-dark);
  text-decoration: underline;
}
.goal-item__amount {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.goal-item__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.goal-item__actions .debt-action:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (pointer: coarse) {
  .goal-item__handle {
    display: grid;
  }
  .goal-item__move {
    display: none !important;
  }
  body.goals-dragging {
    overflow: hidden;
    touch-action: none;
    user-select: none;
  }
}

@media (max-width: 720px) {
  .debts-panel__head,
  .goals-panel__head,
  .users-panel__head {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .debts-panel__head .panel-add-btn,
  .goals-panel__head .panel-add-btn,
  .users-panel__head .panel-add-btn {
    width: auto;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #d7e6e1;
    background: #eef6f3;
    color: var(--teal-dark);
    font-size: 0;
    box-shadow: none;
  }
  .debts-panel__head .panel-add-btn::after,
  .goals-panel__head .panel-add-btn::after,
  .users-panel__head .panel-add-btn::after {
    content: attr(data-short-label);
    font-size: 13px;
    font-weight: 600;
  }
  .debts-panel__head .panel-add-btn:hover,
  .goals-panel__head .panel-add-btn:hover,
  .users-panel__head .panel-add-btn:hover {
    background: #e3f1ec;
  }
  .goal-item__row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "handle priority info actions"
      "handle priority amount actions";
  }
  .goal-item__handle { grid-area: handle; align-self: start; }
  .goal-item__priority { grid-area: priority; align-self: start; }
  .goal-item__info { grid-area: info; }
  .goal-item__amount {
    grid-area: amount;
    text-align: left;
    font-size: 14px;
  }
  .goal-item__actions { grid-area: actions; align-self: start; }
  .goal-item--completed .goal-item__row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "info actions"
      "amount actions";
  }
  .goal-item--completed .goal-item__info { grid-area: info; }
  .goal-item--completed .goal-item__amount { grid-area: amount; }
  .goal-item--completed .goal-item__actions { grid-area: actions; }
  .debt-trace-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .debt-trace-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .debt-trace-stats span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(228, 233, 230, 0.9);
  }
  #debtTraceModal .modal__dialog {
    width: min(100%, calc(100vw - 24px));
  }
}

/* Login */
body.login-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: auto;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(61, 148, 132, 0.28), transparent 62%),
    radial-gradient(ellipse 42% 36% at 100% 100%, rgba(224, 122, 98, 0.16), transparent 58%),
    radial-gradient(ellipse 36% 28% at 0% 80%, rgba(61, 148, 132, 0.1), transparent 60%),
    var(--bg);
}
.login-shell {
  width: min(100%, 420px);
}
.login-card {
  padding: 44px 32px 32px;
  border: 1px solid var(--card-line);
  border-radius: 28px;
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0 0 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.9px;
  font-size: 28px;
  line-height: 1;
}
.login-brand .brand-mark {
  width: 56px;
  height: 56px;
  padding: 14px 12px 12px;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(21, 39, 40, 0.16);
}
.login-brand .brand-mark i { width: 5px; }
.login-brand .brand-mark i:nth-child(1) { height: 12px; }
.login-brand .brand-mark i:nth-child(2) { height: 20px; }
.login-brand .brand-mark i:nth-child(3) { height: 28px; }
.login-brand > span > span { color: var(--teal); }
.login-kicker {
  margin: 18px 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.login-lead {
  margin: 0 0 28px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
}
.login-google {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.login-google[hidden] {
  display: none;
}
html.theme-dark .login-google,
html.theme-dark .login-google iframe {
  color-scheme: light;
}
.login-status {
  margin: 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.login-status[hidden] {
  display: none;
}
.login-error {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--coral-soft);
  color: #b4533c;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.login-note {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.sidebar__submenu {
  margin-top: 8px;
}
.sidebar__group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: #8a9a97;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.sidebar__group-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.sidebar__group-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.sidebar__submenu-items {
  display: grid;
  gap: 4px;
}
.sidebar__submenu-items[hidden] {
  display: none !important;
}
.sidebar__logout {
  color: var(--muted);
}

/* Activities */
#viewAtividades.view--active {
  display: block;
}
.activities-panel {
  padding: 22px 24px 18px;
}
.activities-scroll {
  min-width: 0;
}
.activities-panel__top {
  margin-bottom: 12px;
}
.activities-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.activities-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f7faf8;
  border: 1px solid rgba(207, 227, 221, 0.9);
}
.activities-summary[hidden] {
  display: none !important;
}
.activities-summary__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.activities-summary__label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.activities-summary__hint {
  color: var(--muted);
  font-size: 12px;
}
.activities-summary__value {
  color: var(--ink);
  font-size: 18px;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.activities-list {
  display: grid;
  align-content: start;
  gap: 10px;
}
.activities-list--completed .activity-item,
.activities-list--offday .activity-item {
  background: #f7faf8;
}
.activities-empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafcfb;
}
.activity-item {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.activity-item__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
}
.activity-item__info {
  min-width: 0;
}
.activity-item__title {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  overflow-wrap: anywhere;
}
.activity-item__title:hover {
  color: var(--teal-dark);
  text-decoration: underline;
}
.activity-item__meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.activity-item__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.activity-item__done {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}
.activity-item--completed .activity-item__title {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 500;
}
.activities-completed,
.activities-offday {
  margin-top: 16px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}
.activities-completed[hidden],
.activities-offday[hidden] {
  display: none !important;
}
.activities-completed__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px 2px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.activities-completed__toggle-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.activities-completed__title,
.activities-offday__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.activities-completed__subtitle,
.activities-offday__subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.activities-completed__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}
.activities-completed.is-open .activities-completed__chevron {
  transform: rotate(180deg);
}
.activities-completed__body[hidden] {
  display: none !important;
}
.activities-offday__head {
  padding: 14px 2px 10px;
}
.activities-entries {
  margin-top: 16px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}
.activities-entries[hidden] {
  display: none !important;
}
.activities-entries__head {
  padding: 14px 2px 10px;
}
.activities-entries__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.activities-entries__subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.activities-list--entries .activity-item {
  background: #f7faf8;
}
.activity-item__title--static {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.activity-days {
  display: grid;
  gap: 8px;
}
.activity-days.is-disabled {
  opacity: 0.55;
}
.activity-days.is-disabled .activity-day {
  cursor: not-allowed;
  background: #f4f6f5;
}
.activity-days__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.activity-days__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.activity-day {
  display: grid;
  place-items: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.activity-day input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.activity-day span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.activity-day:has(input:checked) {
  border-color: rgba(61, 148, 132, 0.55);
  background: #eef6f3;
}
.activity-day:has(input:checked) span {
  color: var(--teal-dark);
}
.activity-form__section {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 12px;
  background: #fbfcfc;
}
.activity-form__section legend {
  padding: 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.activity-form__section--checks {
  gap: 10px;
}
.field--flush span {
  display: none;
}
.field--flush select {
  width: 100%;
}

@media (max-width: 720px) {
  .modal {
    padding: 8px;
    align-items: end;
    justify-items: stretch;
  }
  .modal__dialog--activity {
    width: 100%;
    max-height: min(92dvh, 100%);
    border-radius: 16px 16px 10px 10px;
  }
  .modal__dialog--activity .modal__head {
    padding: 12px 14px 0;
  }
  .modal__dialog--activity .modal__head h3 {
    font-size: 17px;
  }
  .modal__dialog--activity .activity-form {
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .modal__dialog--activity .modal__actions {
    margin: 6px -14px -12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .activity-form .field-row--times {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .activity-form .field__time {
    min-height: 36px;
    padding: 4px 6px;
    font-size: 15px;
    border-radius: 10px;
  }
  .activity-form__section {
    padding: 10px 12px;
    gap: 8px;
  }
  .activity-mini-cal__day {
    min-height: 34px;
    font-size: 12px;
    border-radius: 8px;
  }
  .activity-mini-cal__nav {
    width: 34px;
    height: 34px;
  }
  .modal__dialog--mini-cal {
    width: min(100%, calc(100vw - 16px));
    border-radius: 16px;
  }
  .activity-form .field-hint {
    font-size: 12px;
  }
  .activity-day {
    min-height: 34px;
  }
  .field-row:not(.field-row--times) {
    grid-template-columns: 1fr;
  }
  .activities-panel__head {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .activities-panel__head .panel-add-btn {
    width: auto;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #d7e6e1;
    background: #eef6f3;
    color: var(--teal-dark);
    font-size: 0;
    box-shadow: none;
  }
  .activities-panel__head .panel-add-btn::after {
    content: attr(data-short-label);
    font-size: 13px;
    font-weight: 600;
  }
  .activity-item__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .activity-item__actions {
    justify-content: flex-start;
  }
  .activity-days__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Activity calendar */
#viewCalendario.view--active {
  display: block;
}
.activity-calendar-panel {
  padding: 22px 24px 20px;
}
.activity-calendar__top {
  margin-bottom: 18px;
}
.activity-calendar__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.activity-calendar__subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.activity-calendar__toolbar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.activity-calendar__add {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  white-space: nowrap;
}
.activity-calendar__filter {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d7e6e1;
  background: #fff;
  color: var(--teal-dark);
}
.activity-calendar__filter svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.activity-calendar__filter:hover {
  background: #eef6f3;
}
.activity-search {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal__dialog--search {
  width: min(440px, calc(100vw - 24px));
  max-height: min(88dvh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal__dialog--search .modal__head {
  padding: 14px 16px 0;
}
.modal__dialog--search .modal__head h3 {
  font-size: 17px;
}
.modal__dialog--search .activity-search {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 10px 16px 16px;
  gap: 8px;
}
.activity-search__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}
.activity-search__btn {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
}
.activity-search__results {
  display: grid;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  margin-top: 2px;
}
.activity-search__empty,
.activity-search__hint {
  margin: 0;
  padding: 8px 2px;
  color: var(--muted);
  font-size: 13px;
}
.activity-search__item {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.activity-search__item:hover {
  border-color: rgba(61, 148, 132, 0.45);
  background: #f7fbf9;
}
.activity-search__item strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.activity-search__item small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.activity-calendar__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.activity-calendar__label {
  min-width: 160px;
  text-align: center;
  font-size: 15px;
  color: var(--ink);
}
.activity-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.activity-calendar__weekdays span {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 0;
}
.activity-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.activity-calendar__cell {
  position: relative;
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #fafcfb;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px;
}
.activity-calendar__cell--empty {
  background: transparent;
  pointer-events: none;
  min-height: 52px;
}
.activity-calendar__cell:hover {
  border-color: rgba(61, 148, 132, 0.35);
  background: #f3f8f6;
}
.activity-calendar__cell.is-today {
  background: #e8f4f0;
  border-color: rgba(61, 148, 132, 0.55);
  color: var(--teal-dark);
}
.activity-calendar__cell.is-today:hover {
  background: #dff0ea;
}
.activity-calendar__cell.has-done,
.activity-calendar__cell.has-pending:not(.has-done) {
  /* Keep default cell background; status is shown by the dots only. */
  background: #fafcfb;
  border-color: transparent;
  color: var(--ink);
}
.activity-calendar__cell.has-done:hover,
.activity-calendar__cell.has-pending:not(.has-done):hover {
  border-color: rgba(61, 148, 132, 0.35);
  background: #f3f8f6;
}
.activity-calendar__cell.is-today.has-done,
.activity-calendar__cell.is-today.has-pending {
  background: #e8f4f0;
  border-color: rgba(61, 148, 132, 0.55);
  color: var(--teal-dark);
}
.activity-calendar__cell.is-today.has-done:hover,
.activity-calendar__cell.is-today.has-pending:hover {
  background: #dff0ea;
}
.activity-calendar__cell.is-selected {
  outline: 2px solid rgba(61, 148, 132, 0.45);
  outline-offset: 1px;
}
.activity-calendar__day {
  line-height: 1;
}
.activity-calendar__dots {
  position: absolute;
  bottom: 7px;
  display: inline-flex;
  gap: 4px;
}
.activity-calendar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.activity-calendar__dot--done {
  background: var(--teal);
}
.activity-calendar__dot--pending {
  background: #c45448;
}
.activity-calendar__detail {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.activity-calendar__detail[hidden] {
  display: none !important;
}
.activity-calendar__detail-head {
  margin-bottom: 10px;
}
.activity-calendar__detail-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.activity-calendar__detail-subtitle {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.activity-calendar__detail-list {
  display: grid;
  gap: 8px;
}
.activity-calendar__detail-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.activity-calendar__detail-item.is-open {
  background: #fff7f6;
  border-color: rgba(196, 84, 72, 0.22);
}
.activity-calendar__detail-item.is-planned {
  background: #f7faf8;
  border-color: rgba(61, 148, 132, 0.18);
}
.activity-calendar__detail-item.is-done,
.activity-calendar__detail-item.is-entry {
  background: #fff;
}
.activity-calendar__detail-time {
  display: grid;
  gap: 4px;
  justify-items: start;
  font-variant-numeric: tabular-nums;
  color: var(--teal-dark);
}
.activity-calendar__detail-item.is-open .activity-calendar__detail-time {
  color: #9a3f36;
}
.activity-calendar__detail-item.is-planned .activity-calendar__detail-time {
  color: var(--teal-dark);
}
.activity-calendar__status-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #eef6f3;
  color: var(--teal-dark);
}
.activity-calendar__detail-item.is-open .activity-calendar__status-icon {
  background: #fdeceb;
  color: #c45448;
}
.activity-calendar__detail-item.is-planned .activity-calendar__status-icon {
  background: #e8f4f0;
  color: var(--teal);
}
.activity-calendar__detail-item.is-entry .activity-calendar__status-icon {
  background: #eef2f6;
  color: #4d6472;
}
.activity-calendar__status-icon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.activity-calendar__detail-item p {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.activity-calendar__detail-item small {
  color: var(--muted);
  font-size: 12px;
}
.activity-calendar__detail-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.activity-calendar__done {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12px;
}

@media (max-width: 720px) {
  .activity-calendar__head {
    flex-direction: column;
    align-items: stretch;
  }
  .activity-calendar__toolbar {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .activity-calendar__add {
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    font-size: 0;
  }
  .activity-calendar__add::after {
    content: attr(data-short-label);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }
  .activity-calendar__filter {
    min-width: 40px;
    min-height: 40px;
    padding: 0 10px;
    justify-content: center;
  }
  .activity-calendar__filter span {
    display: none;
  }
  .activity-calendar__filter svg {
    width: 18px;
    height: 18px;
  }
  .activity-search__results {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .modal__dialog--search {
    width: 100%;
    max-height: min(90dvh, 100%);
    border-radius: 16px 16px 10px 10px;
  }
  .activity-calendar__nav {
    flex: 1;
    justify-content: space-between;
    min-width: 0;
  }
  .activity-calendar__label {
    min-width: 0;
    flex: 1;
    font-size: 14px;
  }
  .activity-calendar__cell {
    min-height: 44px;
    border-radius: 12px;
  }
  .activity-calendar__detail-item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
  }
  .activity-calendar__detail-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Conciliação — estrutura da ReconciliationView (organizze-pluggy) */
.recon-view,
#reconSetupModal,
#reconHistoryModal,
#reconSplitModal,
#annualCategoryModal {
  --recon-green: #2f8f4e;
  --recon-green-dark: #257640;
  --recon-green-deep: #1d6b38;
  --recon-green-tint: #e7f6ea;
  --recon-ink: #1c2420;
  --recon-muted: #6d7872;
  --recon-border: #e3e8e4;
  --recon-surface: #ffffff;
  --recon-surface-2: #f4f6f3;
}

html.theme-dark .recon-view,
html.theme-dark #reconSetupModal,
html.theme-dark #reconHistoryModal,
html.theme-dark #reconSplitModal,
html.theme-dark #annualCategoryModal {
  --recon-green-deep: #7dcea0;
  --recon-green-tint: #1c2c20;
  --recon-ink: var(--ink);
  --recon-muted: var(--muted);
  --recon-border: var(--line);
  --recon-surface: var(--card-bg);
  --recon-surface-2: var(--surface-2);
}
.recon-view {
  display: grid;
  gap: 0;
  width: min(100%, 820px);
  margin-inline: auto;
}
.recon-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  background: var(--recon-surface);
  border: 1px solid var(--recon-border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 20px 22px 14px;
  margin-bottom: 14px;
}
.recon-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}
.recon-hero-copy {
  min-width: 0;
}
.recon-hero h1 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 1.85rem);
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--recon-ink);
}
.recon-hero-copy p,
.recon-hero > p {
  margin: 4px 0 0;
  max-width: 36rem;
  color: var(--recon-muted);
  font-size: 0.92rem;
  line-height: 1.4;
}
.recon-toolbar-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 180px;
}
.recon-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.recon-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--recon-border);
  border-radius: 12px;
  background: #fff;
  color: var(--recon-ink);
  cursor: pointer;
}
.recon-settings-btn:hover {
  border-color: var(--recon-green);
  color: var(--recon-green);
}
.recon-view .recon-toolbar-actions .btn {
  border: 0;
  border-radius: 12px;
  min-height: 44px;
  padding: 0 18px;
  background: var(--recon-green);
  color: #fbf7ea;
  font-weight: 700;
}
.recon-view .recon-toolbar-actions .btn:hover:not(:disabled) {
  background: var(--recon-green-dark);
}
.recon-view .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.recon-sync-link {
  color: var(--recon-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: #c5cdc0;
}
.recon-sync-link:hover {
  color: var(--recon-green-deep);
}
.recon-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -6px;
  padding-top: 4px;
  border-top: 1px solid var(--recon-border);
}
.recon-month-arrow {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #868e96;
  font-size: 28px;
  line-height: 1;
}
.recon-month-arrow:hover:not(:disabled) {
  background: #f1f3f5;
  color: var(--recon-ink);
}
.recon-month-label {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--recon-ink);
  text-align: center;
}
.recon-month-label:hover:not(:disabled) {
  color: var(--recon-green);
}
.status-banner {
  display: flex;
  align-items: center;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--recon-green-tint);
  color: var(--recon-green-deep);
  border: 1px solid color-mix(in srgb, var(--recon-green) 28%, var(--recon-border));
  font-size: 0.9rem;
  font-weight: 650;
}
.status-banner.is-warn {
  background: #fff6e8;
  color: #8a4f0a;
  border-color: #f0d7b4;
}
.status-banner.is-busy {
  background: #eef2fb;
  color: #33415c;
  border-color: #d5def0;
}
.recon-history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 0 0 16px;
  padding: 8px 2px 12px;
  border-bottom: 1px solid var(--recon-border);
}
.recon-history-label {
  color: var(--recon-muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.recon-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recon-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--recon-border);
  background: var(--recon-surface);
  color: var(--recon-ink);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.84rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.recon-history-chip:hover {
  border-color: var(--recon-green);
}
.recon-history-chip strong {
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--recon-green);
}
.recon-history-chip.is-muted strong {
  color: var(--recon-muted);
}
.recon-setup {
  margin-bottom: 16px;
  border: 1px solid var(--recon-border);
  border-radius: 18px;
  background: var(--recon-surface);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px 14px;
}
.recon-setup summary {
  cursor: pointer;
  font-weight: 700;
}
.recon-history[hidden],
.status-banner[hidden],
.recon-unmapped[hidden],
.recon-setup[hidden],
#reconItemForm[hidden],
#reconSetupNotice[hidden] {
  display: none !important;
}
.recon-item-form {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--recon-border);
  border-radius: 16px;
  background: var(--recon-surface-2);
}
.recon-item-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #5c6560;
}
.recon-item-form input {
  min-height: 44px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--recon-border);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: var(--recon-ink);
  font: inherit;
  font-weight: 500;
}
.recon-item-form .btn {
  min-height: 44px;
}
.recon-setup-hint {
  margin: 0;
  color: var(--recon-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}
.recon-accounts {
  display: grid;
  gap: 12px;
}
.recon-connection {
  border: 1px solid var(--recon-border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.recon-connection__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f7f8f6;
  border-bottom: 1px solid var(--recon-border);
}
.recon-connection__head strong {
  min-width: 0;
  font-size: 0.98rem;
}
.recon-connection__empty {
  margin: 0;
  padding: 14px;
  color: var(--recon-muted);
  font-size: 0.88rem;
}
.recon-account {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px 16px;
  align-items: center;
  padding: 14px;
}
.recon-account + .recon-account {
  border-top: 1px solid var(--recon-border);
}
.recon-account__copy {
  flex: 1 1 auto;
  min-width: 0;
}
.recon-account__copy strong,
.recon-account__copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recon-account__copy span {
  color: var(--recon-muted);
  font-size: 13px;
}
.recon-account__dest {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5c6560;
}
.recon-account select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--recon-border);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: var(--recon-ink);
  font: inherit;
  font-weight: 600;
}
.recon-setup-empty {
  margin: 0;
  color: var(--recon-muted);
  font-size: 14px;
}
#reconSetupModal .modal__dialog {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 24px));
  max-width: 100%;
  max-height: min(92dvh, 760px);
  overflow: hidden;
}
#reconSetupModal .modal__head {
  flex-shrink: 0;
}
.recon-setup-modal {
  display: grid;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.recon-setup-modal .recon-item-form {
  margin-top: 0;
}
#reconHistoryModal .modal__dialog,
#annualCategoryModal .modal__dialog {
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 24px));
  max-height: min(92dvh, 720px);
  padding: 8px 0 0;
  border-radius: 22px;
  overflow: hidden;
}
.recon-history-sheet__grab {
  display: block;
  width: 36px;
  height: 4px;
  margin: 2px auto 0;
  border-radius: 999px;
  background: #d7dee8;
  flex-shrink: 0;
}
#reconHistoryModal .modal__close,
#annualCategoryModal .modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}
.recon-history-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 20px calc(18px + env(safe-area-inset-bottom, 0px));
}
.recon-history-sheet__body h3 {
  margin: 0 36px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.recon-history-sheet__sub {
  margin: 4px 0 16px;
  color: var(--muted);
  font-size: 13px;
}
.recon-history-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.recon-history-summary strong {
  display: block;
  font-size: 16px;
  color: var(--ink);
}
.recon-history-summary p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.recon-history-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.recon-history-stats span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
}
.recon-history-stats strong {
  font-size: 15px;
  font-weight: 750;
  color: var(--ink);
}
.recon-history-kicker {
  margin: 18px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.annual-category-month {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.annual-category-month__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.annual-category-month__chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.annual-category-month.is-collapsed .annual-category-month__chevron {
  transform: rotate(-90deg);
}
.annual-category-month .recon-history-kicker { margin: 0; }
.annual-category-month strong {
  color: #e07a62;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.recon-history-list {
  display: grid;
}
.recon-history-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
}
.recon-history-mark {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.recon-history-mark.is-done {
  background: #2f8f4e;
  color: #fff;
}
.recon-history-mark.is-done svg {
  width: 14px;
  height: 14px;
}
.recon-history-mark.is-current {
  border: 2px solid #2f7ae0;
  background: #fff;
}
.recon-history-mark.is-current::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2f7ae0;
}
.recon-history-mark.is-pending {
  border: 2px solid #d5ddd8;
  background: #fff;
}
.recon-history-mark.is-expense {
  background: #fff0eb;
  color: #e07a62;
}
.recon-history-mark.is-expense svg {
  width: 12px;
  height: 12px;
}
.recon-history-row__side.is-expense { color: #e07a62; }
.annual-subcats {
  margin-top: 14px;
  padding: 4px 12px 2px;
  border-radius: 14px;
  background: #f4f7f5;
}
.annual-subcats__title {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.annual-subcats ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.annual-subcats li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #e4ebe7;
}
.annual-subcats li:first-child { border-top: 0; }
.annual-subcats span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.annual-subcats strong {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.annual-category-search {
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #e3ebe7;
  border-radius: 12px;
  background: #f7faf8;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.annual-category-search:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  background: #fff;
}
.category-sheet-ring {
  position: relative;
  width: 44px;
  height: 44px;
}
.category-sheet-ring svg {
  width: 44px;
  height: 44px;
  transform: rotate(-90deg);
}
.category-sheet-ring circle {
  fill: none;
  stroke-width: 3.5;
}
.category-sheet-ring .track { stroke: #e7eeea; }
.category-sheet-ring .arc { stroke: var(--teal); }
.category-sheet-ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 750;
}
.recon-history-row__main {
  min-width: 0;
}
.recon-history-row__main strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
}
.recon-history-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.recon-history-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.recon-history-badge.is-installment {
  background: #eef3ff;
  color: #2a56b0;
}
.recon-history-badge.is-split {
  background: #f8f1e6;
  color: #8a5a12;
}
.recon-history-badge.is-transfer {
  background: #e7f6ee;
  color: #1c7a42;
}
.recon-history-desc {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}
.recon-history-desc small {
  display: inline-block;
  min-width: 4.6rem;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.annual-entry-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}
.recon-history-row__main p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.recon-history-undo {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f7ae0;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.recon-history-undo:hover:not(:disabled) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.recon-history-undo:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.recon-history-row__side {
  text-align: right;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.recon-history-row__side strong {
  display: block;
  font-size: 14px;
  font-weight: 750;
}
.recon-history-row__side.is-done { color: #2f8f4e; }
.recon-history-row__side.is-current { color: #2f7ae0; }
.recon-history-row__side.is-pending { color: var(--muted); }
.recon-history-empty {
  margin: 8px 0;
  color: var(--muted);
  font-size: 14px;
}
.recon-category {
  position: relative;
}
.recon-category__trigger {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--recon-border);
  border-radius: 12px;
  padding: 6px 12px;
  background: #fff;
  color: var(--recon-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.recon-category__trigger::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid var(--recon-muted);
  border-bottom: 2px solid var(--recon-muted);
  transform: translateY(-2px) rotate(45deg);
}
.recon-category.is-open .recon-category__trigger {
  border-color: var(--recon-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--recon-green) 18%, transparent);
}
.recon-category__current {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.recon-category__current span,
.recon-category__option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recon-category__current .is-placeholder {
  color: var(--recon-muted);
  font-weight: 550;
}
.recon-category__meta {
  color: var(--recon-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.recon-category__menu {
  display: none;
}
.recon-category__menu.is-floating {
  position: fixed;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--recon-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(28, 36, 32, 0.16);
}
.recon-category__menu.is-floating .recon-category__list {
  max-height: none;
  min-height: 0;
}
.recon-category__search {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--recon-border);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--recon-surface-2);
  color: var(--recon-ink);
  font: inherit;
}
.recon-category__list {
  max-height: 280px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 2px;
}
.recon-category__heading {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 8px 0 2px;
  padding: 6px 8px 4px;
  background: #fff;
  color: var(--recon-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.recon-category__heading:first-child {
  margin-top: 2px;
}
.recon-category__parent {
  margin: 8px 10px 0;
  color: #454843;
  font-size: 12px;
  font-weight: 750;
}
.recon-category__option {
  width: 100%;
  display: grid;
  gap: 1px;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  background: transparent;
  color: var(--recon-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.recon-category__option:hover,
.recon-category__option.is-selected {
  background: var(--recon-green-tint);
}
.recon-category__option.is-selected {
  color: var(--recon-green-deep);
}
.recon-category__option.is-filtered-out,
.recon-category__heading.is-filtered-out,
.recon-category__parent.is-filtered-out {
  display: none !important;
}
.recon-category__empty {
  margin: 8px;
  color: var(--recon-muted);
  font-size: 13px;
}
.recon-create-form select,
.recon-split-description,
.recon-split-amount,
.recon-filter-search input {
  min-height: 42px;
  border: 1px solid var(--recon-border);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: var(--recon-ink);
  font: inherit;
}
.recon-unmapped {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff6e8;
  color: #8a4f0a;
  border: 1px solid #f0d7b4;
}
.recon-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(140px, 1.2fr) auto;
  align-items: end;
  gap: 10px;
  margin: 0 0 8px;
}
.recon-filter-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5c6560;
}
.recon-filter-field select,
.recon-filter-field input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--recon-border);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: var(--recon-ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
}
.recon-filters > .btn {
  min-height: 42px;
  align-self: end;
}
.recon-filter-search-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--recon-border);
  background: var(--recon-surface);
  color: var(--recon-ink);
  display: grid;
  place-items: center;
}
.recon-filter-search-btn.is-active {
  border-color: var(--recon-green);
  color: var(--recon-green-deep);
  background: var(--recon-green-tint);
}
.recon-filter-search {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.recon-filter-search input {
  flex: 1;
}
.recon-filter-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--recon-muted);
  font-size: 0.84rem;
}
.recon-filter-meta button {
  border: 0;
  background: transparent;
  color: #8a4f0a;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  padding: 0;
}
.recon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.recon-card {
  position: relative;
  z-index: 0;
  background: var(--recon-surface);
  border: 1px solid var(--recon-border);
  border-radius: 16px;
  padding: 16px 18px;
  display: grid;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.recon-card:has(.recon-category.is-open) {
  z-index: 4;
}
.recon-card.is-busy {
  pointer-events: none;
}
.recon-card-busy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--recon-surface) 86%, transparent);
  color: var(--ink);
  font-weight: 650;
}
.recon-card-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--recon-border);
  border-top-color: var(--accent, var(--ink));
  border-radius: 50%;
  animation: refresh-spin 0.8s linear infinite;
}
.recon-card-main {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}
.recon-card-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.recon-card-meta strong {
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.recon-card-meta > span {
  color: var(--recon-muted);
  font-size: 0.85rem;
}
.recon-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recon-view .badge,
.recon-history-modal .badge {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #f1f1f1;
  color: #454843;
}
.recon-view .badge.kind-bank,
.recon-history-modal .badge.kind-bank { background: #e8f0e2; color: #3d5c2e; }
.recon-view .badge.kind-credit,
.recon-history-modal .badge.kind-credit { background: #e8eef8; color: #2f4f7a; }
.recon-view .badge.kind-invoice,
.recon-history-modal .badge.kind-invoice { background: #f8ebe2; color: #7a4020; }
.recon-view .badge.kind-transfer,
.recon-history-modal .badge.kind-transfer { background: #e4eef8; color: #2a4f73; }
.recon-view .badge.kind-installment,
.recon-history-modal .badge.kind-installment { background: #efe8f8; color: #5a3d7a; }
.recon-amount {
  font-weight: 750;
  font-size: 1.05rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.recon-amount-stack {
  display: grid;
  justify-items: end;
  gap: 1px;
  flex-shrink: 0;
  text-align: right;
}
.recon-amount-stack span {
  color: var(--recon-muted);
  font-size: 11px;
  line-height: 1.25;
  max-width: 11rem;
}
.recon-amount-stack strong {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.recon-amount.neg { color: #a31f1f; }
.recon-amount.pos { color: #2f6b2f; }
.suggestions {
  display: grid;
  gap: 8px;
}
.suggestions-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.suggestions-head strong { font-size: 0.92rem; }
.suggestions-info { position: relative; }
.suggestions-info-btn {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--recon-border);
  background: var(--recon-surface-2);
  color: var(--recon-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}
.suggestions-info-btn:hover + .match-hint-tooltip,
.suggestions-info-btn:focus + .match-hint-tooltip,
.match-hint-badge:hover + .match-hint-tooltip,
.match-hint-badge:focus + .match-hint-tooltip {
  opacity: 1;
  visibility: visible;
}
.match-hint { position: relative; display: inline-flex; }
.match-hint-tooltip {
  position: absolute;
  z-index: 3;
  left: 0;
  top: calc(100% + 6px);
  width: max-content;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #1c2420;
  color: #f4f7f5;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
}
.match-hint-tooltip strong { display: block; margin-bottom: 4px; }
.suggestions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.suggestions li {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f7f8f6;
  border: 1px solid var(--recon-border);
}
.suggestion-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.suggestion-body > span { font-weight: 650; }
.suggestion-body small { color: var(--recon-muted); }
.suggestion-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.suggestion-amount-block {
  display: grid;
  justify-items: end;
  gap: 2px;
}
.suggestion-amount {
  font-size: 0.98rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.suggestion-amount.neg { color: #a31f1f; }
.suggestion-amount.pos { color: #2f6b2f; }
.match-hint-badge {
  border: 0;
  background: transparent;
  color: var(--recon-muted);
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0;
}
.suggestion-side .match-hint-tooltip {
  left: auto;
  right: 0;
}
.recon-view .suggestion-side .btn,
.recon-view .recon-create-form .btn {
  border: 0;
  border-radius: 12px;
  min-height: 40px;
  min-width: 104px;
  padding: 0 16px;
  background: var(--recon-green);
  color: #fbf7ea;
  font-weight: 700;
}
.recon-view .suggestion-side .btn:hover:not(:disabled),
.recon-view .recon-create-form .btn:hover:not(:disabled) {
  background: var(--recon-green-dark);
}
.no-suggestions {
  margin: 0;
  color: var(--recon-muted);
  font-size: 0.9rem;
}
.history-hint {
  padding: 10px 12px;
  border: 1px solid var(--recon-border);
  border-radius: 12px;
  background: var(--recon-surface-2);
}
.history-hint-summary {
  margin: 0;
  color: var(--recon-muted);
  font-size: 0.88rem;
}
.history-hint-actions {
  display: flex;
}
.history-hint-actions .btn {
  border: 0;
  border-radius: 12px;
  min-height: 40px;
  padding: 0 16px;
  background: var(--recon-green);
  color: #fbf7ea;
  font-weight: 700;
}
.recon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recon-view .recon-actions .btn.ghost,
.recon-view .recon-filter-search .btn.ghost,
.recon-view .recon-create-form .btn.ghost {
  background: transparent;
  color: var(--recon-ink);
  border: 1px solid var(--recon-border);
  border-radius: 12px;
  min-height: 40px;
  padding: 0 14px;
  font-weight: 650;
}
.create-destination {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--recon-surface-2);
  border: 1px solid var(--recon-border);
}
.create-destination-row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
}
.create-destination-row span {
  color: var(--recon-muted);
  font-size: 0.84rem;
  font-weight: 600;
}
.create-destination-row strong.neg { color: #b42318; }
.create-destination-row strong.pos { color: #027a48; }
.recon-create-form {
  display: grid;
  gap: 10px;
}
.recon-create-form label,
.recon-field {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 650;
  color: #454843;
}
.recon-splits {
  display: grid;
  gap: 10px;
}
.recon-split {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--recon-border);
  border-radius: 14px;
  background: #fff;
}
.recon-split__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 750;
}
.recon-split__head .btn {
  min-height: 32px;
  padding: 0 10px;
}
.recon-split-description {
  width: 100%;
  min-width: 0;
}
.recon-split-amount.is-locked {
  background: var(--recon-surface-2);
  color: var(--recon-ink);
}
.recon-splits > .btn.ghost {
  justify-self: start;
}
.recon-split-balance {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}
.recon-split-balance.is-ok { color: var(--recon-green-deep); }
.recon-split-balance.is-warn { color: #8a4f0a; }
.recon-split-modal p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.45;
}
.recon-split-modal label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.recon-split-modal input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  font: inherit;
}
#reconSplitModal .modal__dialog {
  width: min(420px, calc(100vw - 24px));
  overflow-x: hidden;
}
#reconSplitModal .modal__actions {
  flex-wrap: wrap;
}
#reconSplitModal .modal__actions .btn {
  flex: 1 1 8rem;
}
.recon-empty-card {
  background: var(--recon-surface);
  border: 1px solid var(--recon-border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 32px 20px;
  text-align: center;
  color: var(--recon-muted);
}
.recon-empty-card strong {
  display: block;
  color: var(--recon-ink);
  margin-bottom: 6px;
  font-size: 1.05rem;
}
.recon-empty-card p { margin: 0; }
.recon-remove {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
}

@media (max-width: 800px) {
  body:has(#viewConciliacao:not([hidden])),
  body:has(#viewConciliacao:not([hidden])) .app-layout,
  body:has(#viewConciliacao:not([hidden])) .app-main {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  .page-shell:has(#viewConciliacao:not([hidden])) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: clip;
  }
  #viewConciliacao {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  .recon-view {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: clip;
  }
  .recon-hero,
  .recon-queue,
  .recon-card,
  .recon-filters,
  .recon-history,
  .status-banner,
  .recon-list {
    min-width: 0;
    max-width: 100%;
  }
  .recon-hero { padding: 16px 16px 12px; }
  .recon-hero h1 { font-size: 1.45rem; }
  .recon-hero > p,
  .recon-card-meta strong,
  .recon-card-meta > span,
  .suggestion-body > span,
  .suggestion-body small {
    overflow-wrap: anywhere;
  }
  .recon-hero-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .recon-toolbar-actions,
  .recon-toolbar-row { min-width: 0; }
  .recon-toolbar-actions { align-items: center; }
  .recon-toolbar-row {
    flex-wrap: wrap;
    justify-content: center;
  }
  .recon-view .recon-toolbar-actions .btn { min-width: 0; }
  .recon-item-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .recon-item-form input,
  .recon-item-form .btn,
  .recon-item-form label {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
  }
  .recon-account {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .recon-card { padding: 12px; }
  .recon-card-main {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
  }
  .recon-amount,
  .recon-amount-stack {
    align-self: flex-end;
    flex-shrink: 1;
    max-width: 100%;
  }
  .recon-amount-stack span {
    max-width: 100%;
    white-space: normal;
  }
  .recon-month {
    min-width: 0;
    max-width: 100%;
  }
  .recon-month-label {
    min-width: 0;
    font-size: 1.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .recon-filters,
  .recon-history,
  .status-banner,
  .recon-queue {
    width: 100%;
    max-width: 100%;
  }
  .recon-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .recon-filter-field--search,
  .recon-filters > .btn {
    grid-column: 1 / -1;
  }
  .recon-view .recon-actions .btn.ghost {
    flex: 1 1 7.5rem;
    min-width: 0;
    padding: 0 10px;
  }
  .suggestions li {
    flex-wrap: wrap;
    gap: 8px;
  }
  .suggestion-side {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }
  .recon-view .suggestion-side .btn { min-width: 0; padding: 0 12px; }
  #reconSetupModal .modal__dialog,
  #reconSplitModal .modal__dialog,
  #confirmModal .modal__dialog {
    width: min(100%, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: min(92dvh, 100%);
    border-radius: 16px 16px 12px 12px;
  }
  #reconHistoryModal .modal__dialog,
  #annualCategoryModal .modal__dialog {
    width: min(100%, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: min(92dvh, 100%);
    border-radius: 22px;
  }
  #reconSplitModal .recon-split-modal {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .recon-history-row { min-width: 0; }
  .recon-history-stats strong { font-size: 14px; }
}

.parcelas-title {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.parcelas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
  gap: 20px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.parcelas-main,
.parcelas-side,
.parcelas-panel,
.parcelas-list,
.parcelas-hero {
  min-width: 0;
  max-width: 100%;
}

.parcelas-hero {
  padding: 22px 24px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, #3b8ef0 0%, #2f7ae0 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(47, 122, 224, 0.18);
}

.parcelas-hero__kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.92;
}

.parcelas-hero__value {
  margin: 6px 0 8px;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.parcelas-hero__value small {
  font-size: 0.55em;
  font-weight: 650;
}

.parcelas-hero__detail {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.92;
  overflow-wrap: anywhere;
}

.parcelas-search {
  display: block;
  width: 100%;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #e6ebe8;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  box-shadow: var(--shadow-sm);
}

.parcelas-search:focus {
  outline: 2px solid rgba(47, 122, 224, 0.28);
  border-color: #8eb7ef;
}

.parcelas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parcela-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #e7eeea;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: inherit;
  font: inherit;
  text-align: left;
}

.parcela-card:hover {
  border-color: #d3e3f8;
}

.parcela-card:focus-visible {
  outline: 2px solid #2f7ae0;
  outline-offset: 2px;
}

.parcela-ring {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.parcela-ring svg {
  width: 46px;
  height: 46px;
  transform: rotate(-90deg);
}

.parcela-ring circle {
  fill: none;
  stroke: #e6eef8;
  stroke-width: 3.5;
}

.parcela-ring circle + circle {
  stroke: #2f7ae0;
  stroke-linecap: round;
}

.parcela-ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #2a3a4a;
}

.parcela-card__name {
  display: block;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parcela-card__meta {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.parcela-card__meta--mobile,
.parcela-card__aside {
  display: none;
}

.parcela-card__values {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, auto));
  gap: 16px;
  text-align: right;
}

.parcela-card__values span {
  display: block;
  margin-bottom: 2px;
  color: #8b9894;
  font-size: 12px;
}

.parcela-card__values strong {
  font-size: 15px;
  font-weight: 700;
}

.parcelas-side {
  position: sticky;
  top: 16px;
}

.parcelas-panel {
  padding: 18px 16px 16px;
  border: 1px solid #e7eeea;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.parcelas-panel h2 {
  margin: 0;
  font-size: 18px;
}

.parcelas-panel__lead,
.parcelas-panel__hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.parcelas-bars {
  display: flex;
  gap: 6px;
  align-items: end;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 18px;
  min-height: 148px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.parcelas-bar {
  display: flex;
  flex: 0 0 54px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 54px;
  height: 148px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8b9894;
}

.parcelas-bar__value {
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.parcelas-bar__fill {
  width: 100%;
  height: var(--bar);
  min-height: 4px;
  border-radius: 7px 7px 3px 3px;
  background: #d7e7fb;
}

.parcelas-bar__label {
  font-size: 12px;
  text-transform: lowercase;
}

.parcelas-bar.is-selected {
  color: #2f7ae0;
  font-weight: 700;
}

.parcelas-bar.is-selected .parcelas-bar__fill {
  background: #2f7ae0;
}

.parcelas-bar:hover .parcelas-bar__fill {
  background: #b9d4f6;
}

.parcelas-bar.is-selected:hover .parcelas-bar__fill {
  background: #2569c4;
}

.parcelas-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #e8f2ff;
  color: #1d4f91;
  font-size: 14px;
  font-weight: 650;
}

.parcelas-chip button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
}

.parcelas-panel__hint {
  margin-top: 10px;
}

.parcelas-relief {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #fff6d8;
}

.parcelas-relief p {
  margin: 0;
  color: #8a6a1f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.parcelas-relief strong {
  display: block;
  margin: 4px 0;
  color: #1d2430;
  font-size: 28px;
  letter-spacing: -0.03em;
}

.parcelas-relief strong small {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 650;
}

.parcelas-relief span {
  color: #6d5a32;
  font-size: 13px;
}

.parcelas-empty {
  margin: 8px 0;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 900px) {
  .parcelas-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .parcelas-side {
    position: static;
  }

  .parcelas-hero {
    padding: 18px 16px 16px;
  }

  .parcelas-hero__value {
    font-size: 34px;
  }

  .parcela-card {
    grid-template-columns: 46px minmax(0, 1fr) max-content;
    gap: 12px;
    width: 100%;
    padding: 12px;
  }

  .parcela-card__values,
  .parcela-card__meta--desk {
    display: none;
  }

  .parcela-card__meta--mobile,
  .parcela-card__aside {
    display: block;
  }

  .parcela-card__aside {
    justify-self: end;
  }

  .parcela-card__aside {
    text-align: right;
  }

  .parcela-card__aside strong {
    display: block;
    color: #e15d5d;
    font-size: 16px;
  }

  .parcela-card__aside span {
    color: var(--muted);
    font-size: 12px;
  }
}

.recorrencias-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.recorrencias-tag {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.recorrencias-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 22px 26px 20px;
  border-radius: 18px;
  background: linear-gradient(90deg, #3b8ef0 0%, #2f7ae0 70%, #2a72d6 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(47, 122, 224, 0.18);
}

.recorrencias-hero__kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.92;
}

.recorrencias-hero__value {
  margin: 8px 0 0;
  color: #ffd0d4;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.recorrencias-hero__side {
  text-align: right;
}

.recorrencias-hero__side strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
}

.recorrencias-hero__side span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.9;
}

.recorrencias-sheet {
  padding: 18px 18px 8px;
  border: 1px solid #e7eeea;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.recorrencias-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.recorrencias-sheet__head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.recorrencias-sheet__head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.recorrencias-search {
  width: min(280px, 100%);
  padding: 10px 12px 10px 36px;
  border: 1px solid #e6ebe8;
  border-radius: 12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236f817f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3 3'/%3E%3C/svg%3E") 12px 50% no-repeat,
    #fff;
  color: var(--ink);
  font: inherit;
}

.recorrencias-search:focus {
  outline: 2px solid rgba(47, 122, 224, 0.28);
  border-color: #8eb7ef;
}

.recorrencias-table-wrap { overflow-x: auto; }

.recorrencias-table {
  width: 100%;
  border-collapse: collapse;
}

.recorrencias-table th {
  padding: 10px 12px;
  background: #f7f8f7;
  color: #8b9894;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.recorrencias-table th:first-child { border-radius: 10px 0 0 10px; }
.recorrencias-table th:last-child { border-radius: 0 10px 10px 0; text-align: right; }

.recorrencias-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #eef2f0;
  font-size: 14px;
  vertical-align: middle;
}

.recorrencias-table tr:last-child td { border-bottom: 0; }

.recorrencias-item { font-weight: 700; }

.recorrencias-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #3d4f4c;
  font-weight: 600;
}

.recorrencias-category i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f4f1ea;
  color: #8a735c;
}

.recorrencias-category svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recorrencias-when,
.recorrencias-origin { color: #4d5e5b; }

.recorrencias-money {
  color: var(--coral);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.recorrencias-empty {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.recorrencias-note {
  margin: 4px 2px 12px;
  color: #7d8d8a;
  font-size: 12.5px;
  line-height: 1.45;
}

.recorrencias-chart {
  margin-top: 16px;
  padding: 18px 18px 8px;
  border: 1px solid #e7eeea;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.recorrencias-chart h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.recorrencias-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 12px 28px;
  align-items: center;
}

.recorrencias-cats {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recorrencias-cats li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid #f1f3f2;
  border-radius: 12px;
  cursor: pointer;
}

.recorrencias-cats li.is-hot { background: #f6f8f7; }

.recorrencias-cats li > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}

.recorrencias-cats li > i svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recorrencias-cats .name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recorrencias-cats .amount { text-align: right; }

.recorrencias-cats .amount strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}

.recorrencias-cats .amount small {
  color: #8b9894;
  font-size: 12px;
}

.recorrencias-total {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin: 8px 8px 10px;
  color: #6f817f;
  font-size: 14px;
}

.recorrencias-total strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.recorrencias-plot {
  position: relative;
  display: grid;
  place-items: center;
}

.recorrencias-plot svg {
  width: min(320px, 100%);
  height: auto;
}

.recorrencias-slice { cursor: pointer; }

.recorrencias-halo {
  opacity: 0;
  pointer-events: none;
}

.recorrencias-halo.is-hot { opacity: 0.28; }

.recorrencias-hint {
  position: absolute;
  z-index: 2;
  min-width: 112px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(21, 39, 40, 0.12);
}

.recorrencias-hint[hidden] { display: none; }

.recorrencias-hint strong {
  display: block;
  font-weight: 600;
}

.recorrencias-hint b {
  display: block;
  margin-top: 2px;
  font-size: 16px;
}

.recorrencias-hint span {
  display: block;
  margin-top: 2px;
  color: #8b9894;
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 860px) {
  .recorrencias-hero { flex-direction: column; align-items: flex-start; }
  .recorrencias-hero__side { text-align: left; }
  .recorrencias-hero__value { font-size: 34px; }
  .recorrencias-sheet__head { flex-direction: column; align-items: stretch; }
  .recorrencias-search { width: 100%; }
  .recorrencias-split { grid-template-columns: 1fr; }
}

body.parcela-sheet-open { overflow: hidden; }

.parcela-sheet[hidden] { display: none !important; }

.parcela-sheet {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.parcela-sheet__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(28, 32, 36, 0.46);
}

.parcela-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: min(92vh, 760px);
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -12px 40px rgba(20, 24, 28, 0.18);
  animation: parcela-sheet-in 0.18s ease-out;
}

@keyframes parcela-sheet-in {
  from { transform: translateY(18px); }
  to { transform: translateY(0); }
}

.parcela-sheet__grab {
  width: 36px;
  height: 4px;
  margin: 8px auto 4px;
  border-radius: 4px;
  background: #dedee3;
  flex-shrink: 0;
}

.parcela-sheet__close {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f2f2f4;
  color: #6b6b70;
  font-size: 22px;
  line-height: 1;
}

.parcela-sheet__close:hover { background: #e8e8ec; }

.parcela-sheet__title {
  margin: 6px 52px 0 20px;
  color: #1c1c1e;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  flex-shrink: 0;
}

.parcela-sheet__scroll {
  overflow: auto;
  padding: 2px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

.parcela-sheet__subtitle {
  margin: 4px 0 0;
  color: #8e8e93;
  font-size: 14px;
}

.parcela-sheet__ignore {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #2f62e3;
  font-size: 15px;
  font-weight: 650;
}

.parcela-sheet__ignore:hover { color: #1f4ec4; }

.parcela-sheet__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.parcela-sheet__ring {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}

.parcela-sheet__ring svg {
  width: 54px;
  height: 54px;
  transform: rotate(-90deg);
}

.parcela-sheet__ring circle {
  fill: none;
  stroke: #ececef;
  stroke-width: 3.4;
}

.parcela-sheet__ring circle + circle {
  stroke: #1f9d55;
  stroke-linecap: round;
}

.parcela-sheet__progress strong {
  display: block;
  color: #1c1c1e;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.parcela-sheet__progress span {
  display: block;
  margin-top: 2px;
  color: #8e8e93;
  font-size: 13px;
}

.parcela-sheet__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.parcela-sheet__stats span {
  display: block;
  margin-bottom: 2px;
  color: #8e8e93;
  font-size: 13px;
}

.parcela-sheet__stats strong {
  display: block;
  color: #1c1c1e;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.parcela-sheet__kicker {
  margin: 22px 0 2px;
  color: #8e8e93;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.parcela-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.parcela-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #efeff2;
}

.parcela-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

.parcela-mark svg {
  width: 14px;
  height: 14px;
}

.parcela-mark--paid { background: #1f9d55; }

.parcela-mark--current { background: #2f62e3; }

.parcela-mark--pending {
  background: #fff;
  border: 2px solid #d5d5da;
}

.parcela-line__text {
  flex: 1;
  min-width: 0;
}

.parcela-line__month {
  display: block;
  color: #1c1c1e;
  font-size: 15px;
  font-weight: 700;
}

.parcela-line__index {
  margin: 2px 0 0;
  color: #8e8e93;
  font-size: 13px;
}

.parcela-line__side {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.parcela-line__side strong {
  font-size: 15px;
  font-weight: 700;
}

.parcela-line__side--paid { color: #1f9d55; }
.parcela-line__side--pending { color: #8d939c; }
.parcela-line__side--current { color: #2f62e3; }

@media (max-width: 420px) {
  .parcela-sheet__stats strong { font-size: 14px; }
  .parcela-line__side { gap: 4px; font-size: 13px; }
  .parcela-line__side strong { font-size: 14px; }
}


.pluggy-config-form {
  display: grid;
  gap: 12px;
  max-width: 460px;
  margin-top: 18px;
}
.pluggy-config-form .btn {
  justify-self: start;
}

.compare-view {
  width: min(100%, 820px);
  margin-inline: auto;
  display: grid;
  gap: 16px;
}
.compare-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.compare-hero h1 {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  letter-spacing: -0.045em;
  font-weight: 800;
}
.compare-hero p {
  margin: 6px 0 0;
  max-width: 36rem;
  color: var(--muted);
  line-height: 1.45;
}
.compare-hero .btn {
  border: 0;
  border-radius: 12px;
  min-height: 42px;
  padding: 0 16px;
  background: var(--teal);
  color: #f7fffc;
  font-weight: 700;
}
.compare-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.compare-summary article {
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.compare-summary span,
.compare-summary small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.compare-summary strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.compare-summary strong.is-ok { color: #1d6b38; }
.compare-summary strong.is-off { color: #9a3412; }
.compare-section header h2 {
  margin: 8px 0 0;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}
.compare-section header p {
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: 0.86rem;
}
.compare-list {
  display: grid;
  gap: 10px;
}
.compare-card {
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 12px;
}
.compare-card.is-off {
  border-color: #f0d7b4;
}
.compare-card__head,
.compare-pair {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.compare-card__head strong,
.compare-pair__label {
  display: block;
  font-size: 1rem;
}
.compare-card__head span,
.compare-pair__label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.compare-card__head div span {
  display: block;
  margin-top: 2px;
}
.compare-card__figures,
.compare-pair__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.compare-card__figures p,
.compare-pair__values p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f7f6;
}
.compare-card__figures small,
.compare-pair__values small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.compare-card__figures strong,
.compare-pair__values strong {
  display: block;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.compare-pair {
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.compare-pair__values {
  flex: 1;
}
.compare-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}
.compare-pill.is-ok {
  background: #e7f6ea;
  color: #1d6b38;
}
.compare-pill.is-off {
  background: #fff6e8;
  color: #9a3412;
}
.compare-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  background: #f6f7f6;
}
.compare-month strong {
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}
.compare-month__arrow {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}
.compare-month__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.compare-future {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}
.compare-gaps p {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare-gaps ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.compare-gaps li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
}
.compare-gaps small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
}
.compare-gaps span {
  font-size: 0.88rem;
}
.compare-gaps strong {
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.compare-empty {
  margin: 0;
  color: var(--muted);
}
@media (max-width: 720px) {
  .compare-hero,
  .compare-card__head,
  .compare-pair {
    flex-direction: column;
  }
  .compare-summary {
    grid-template-columns: 1fr;
  }
}

/* Investimentos */
.invest-page {
  --invest-gap: 16px;
  display: grid;
  gap: var(--invest-gap);
}
.invest-head {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  min-height: 36px;
}
.invest-head .panel-card__title {
  font-size: 16px;
  line-height: 1.2;
}
.invest-head .panel-card__subtitle {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invest-head .btn {
  flex-shrink: 0;
  min-height: 32px;
  margin-left: auto;
  padding: 0 12px;
  font-size: 13px;
}
.invest-empty,
.invest-empty-card p,
.invest-config__hint,
.invest-flow header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.invest-empty-card {
  padding: 28px 24px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
}
.invest-empty-card strong {
  display: block;
  margin-bottom: 6px;
}
.invest-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--invest-gap);
}
#investBody {
  display: grid;
  gap: var(--invest-gap);
}
.invest-kpi,
.invest-gauge,
.invest-history,
.invest-flow,
.invest-balances {
  margin: 0;
  border: 1px solid rgba(228, 233, 230, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-sm);
}
.invest-kpi {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
}
.invest-kpi span,
.invest-history header span,
.invest-gauge__top > div span,
.invest-gauge__value span,
.invest-balances span,
.invest-history li span {
  color: var(--muted);
  font-size: 12px;
}
.invest-kpi strong {
  font-size: 22px;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.invest-kpi small {
  color: var(--muted);
  font-size: 12px;
}
.invest-kpi strong.is-in,
.invest-history__amount.is-in { color: var(--green); }
.invest-kpi strong.is-out,
.invest-history__amount.is-out { color: var(--coral); }
.invest-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.85fr);
  gap: var(--invest-gap);
  align-items: start;
}
.invest-main,
.invest-gauges {
  display: grid;
  gap: var(--invest-gap);
}
.invest-gauge {
  padding: 16px 18px 14px;
}
.invest-gauge--reserve {
  background: #f3faf6;
}
.invest-gauge__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.invest-gauge__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  color: var(--teal);
}
.invest-gauge__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.invest-gauge--reserve .invest-gauge__icon { color: var(--green); }
.invest-gauge__top strong {
  display: block;
  font-size: 14px;
}
.invest-gauge__value {
  text-align: right;
}
.invest-gauge__value strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.invest-gauge--reserve .invest-gauge__value strong { color: var(--green); }
.invest-gauge--worth .invest-gauge__value strong { color: var(--teal-dark); }
.invest-gauge__track {
  height: 8px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(21, 39, 40, 0.08);
  overflow: hidden;
}
.invest-gauge__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}
.invest-gauge--reserve .invest-gauge__track span { background: var(--green); }
.invest-balances {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 6px 18px;
  list-style: none;
}
.invest-balances li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.invest-balances li:first-child { border-top: 0; }
.invest-balances strong {
  font-variant-numeric: tabular-nums;
}
.invest-history,
.invest-flow {
  padding: 16px 18px 8px;
}
.invest-history header,
.invest-flow header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.invest-history h3,
.invest-flow h3 {
  margin: 0;
  font-size: 15px;
}
.invest-flow header {
  display: block;
}
.invest-flow header p { margin-top: 4px; }
.invest-history ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 480px;
  overflow: auto;
}
.invest-history li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.invest-history__empty {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.invest-history li > div strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invest-history__mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 700;
}
.invest-history__mark.is-in { background: var(--green-soft); color: var(--green); }
.invest-history__mark.is-out { background: var(--coral-soft); color: var(--coral); }
.invest-history__amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.invest-flow__legend {
  display: flex;
  gap: 14px;
  margin: 10px 0 8px;
  color: var(--muted);
  font-size: 12px;
}
.invest-flow__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.invest-flow__legend i,
.invest-flow__bars span {
  display: block;
  width: 8px;
  border-radius: 999px;
}
.invest-flow__legend i { height: 8px; }
.invest-flow__legend i.is-in,
.invest-flow__bars span.is-in { background: var(--green); }
.invest-flow__legend i.is-out,
.invest-flow__bars span.is-out { background: var(--coral); }
.invest-flow__plot {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: 180px;
  padding-top: 8px;
}
.invest-flow__col {
  flex: 1;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.invest-flow__col small {
  color: var(--muted);
  font-size: 10px;
  text-transform: lowercase;
}
.invest-flow__col.is-current small {
  color: var(--ink);
  font-weight: 700;
}
.invest-flow__bars {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
.invest-flow__bars span {
  width: 7px;
  min-height: 0;
}
.invest-flow__totals {
  margin: 12px 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.invest-flow__totals strong {
  color: var(--ink);
  font-weight: 650;
}
.invest-config__accounts {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.invest-config__accounts legend {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
#investAccountList {
  display: grid;
  gap: 6px;
  max-height: 280px;
  overflow: auto;
}
.invest-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.invest-pick input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}
.invest-pick em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}
@media (max-width: 980px) {
  .invest-kpis { grid-template-columns: 1fr 1fr; }
  .invest-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .invest-gauge__top { grid-template-columns: auto minmax(0, 1fr); }
  .invest-gauge__value { grid-column: 2; text-align: left; }
  .invest-kpis { grid-template-columns: 1fr; }
  .invest-head { flex-wrap: wrap; }
}

.totais-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.totais-card {
  padding: 22px 26px 20px;
  border: 1px solid rgba(228, 233, 230, 0.95);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.totais-card__title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.totais-card__subtitle {
  margin: -10px 0 12px;
  color: #8b9b99;
  font-size: 14px;
}
.totais-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.totais-metric span {
  display: block;
  color: #7d8c8a;
  font-size: 14px;
  font-weight: 500;
}
.totais-metric strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.totais-metric small {
  display: block;
  margin-top: 8px;
  color: #8b9b99;
  font-size: 13px;
}
.totais-value--income,
.totais-value--positive { color: #2ea85a; }
.totais-value--expense,
.totais-value--negative { color: #e07b7b; }
.totais-chart-wrap {
  position: relative;
}
.totais-chart {
  height: 256px;
}
.totais-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}
.totais-hit { cursor: pointer; }
.totais-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  color: #6f817f;
  font-size: 13px;
  font-weight: 600;
}
.totais-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.totais-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.totais-swatch--income { background: #3dcc78; }
.totais-swatch--expense { background: #e7a4a4; }
.totais-hint {
  position: absolute;
  z-index: 3;
  min-width: 168px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #1c1c1e;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 14px 32px rgba(21, 39, 40, 0.22);
}
.totais-hint[hidden] { display: none; }
.totais-hint__month {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}
.totais-hint__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
}
.totais-hint__row + .totais-hint__row { margin-top: 4px; }
.totais-hint__row span { color: #c8c8cc; font-weight: 500; }
.totais-hint__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.totais-hint__row--income b { color: #3dcc78; }
.totais-hint__row--expense b { color: #e07b7b; }
@media (max-width: 720px) {
  .totais-card { padding: 16px; }
  .totais-card__title { font-size: 18px; margin-bottom: 14px; }
  .totais-metrics { gap: 10px; }
  .totais-metric span,
  .totais-metric small { font-size: 12px; }
  .totais-metric strong { font-size: 16px; }
  .totais-chart { height: 208px; }
  .totais-hint { min-width: 148px; padding: 10px 12px; font-size: 12px; }
}

.metas-proto-banner {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff6e8;
  color: #8a5a20;
  font-size: 13px;
  font-weight: 600;
}
.metas-proto-head { margin-bottom: 18px; }
.metas-proto-title {
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: -0.6px;
}
.metas-proto-lead {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 52rem;
}
.metas-proto-card {
  margin-bottom: 12px;
  padding: 14px 16px 12px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}
.metas-proto-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.metas-proto-card__head h2 {
  margin: 0;
  font-size: 18px;
}
.metas-proto-hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.metas-proto-hero strong {
  font-size: 42px;
  letter-spacing: -1.2px;
  line-height: 1;
}
.metas-proto-hero span { color: var(--muted); font-size: 14px; }
.metas-proto-track {
  height: 8px;
  margin: 10px 0 8px;
  border-radius: 999px;
  background: var(--chip-bg);
  overflow: hidden;
}
.metas-proto-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2ea85a;
}
.metas-proto-hero-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #5c6d6b;
  font-size: 14px;
}
.metas-proto-foot {
  margin: 8px 0 12px;
  color: #7d8c8a;
  font-size: 13px;
}
.metas-proto-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.metas-proto-chips > div {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
}
.metas-proto-chips span,
.metas-proto-chips small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.metas-proto-chips strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 18px;
}
.metas-proto-details {
  margin-top: 16px;
}
.metas-proto-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.metas-proto-period { margin-top: 16px; }
.metas-proto-period h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
.metas-proto-period-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.metas-proto-period-grid span,
.metas-proto-period-grid small {
  display: block;
  color: #7d8c8a;
  font-size: 12px;
}
.metas-proto-period-grid strong {
  display: block;
  margin: 4px 0;
  font-size: 18px;
}
.metas-proto-bars { margin-top: 14px; }
.metas-proto-bars > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  color: #5c6d6b;
  font-size: 13px;
}
.metas-proto-bars i {
  height: 8px;
  border-radius: 999px;
  background: #eef2ef;
  overflow: hidden;
}
.metas-proto-bars b {
  display: block;
  height: 100%;
  background: #e0b14a;
}
.metas-proto-note,
.metas-proto-copy {
  margin: 0 0 8px;
  color: #8b9b99;
  font-size: 12px;
  line-height: 1.4;
}
.metas-proto-details .metas-proto-note { margin-top: 12px; margin-bottom: 0; }
.metas-proto-list { display: flex; flex-direction: column; gap: 0; }
.metas-goal {
  display: grid;
  gap: 5px;
  padding: 12px 0 10px;
  border-top: 1px dashed var(--line);
}
.metas-goal:first-child { border-top: 0; padding-top: 2px; }
.metas-goal:last-child { padding-bottom: 0; }
.metas-goal__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.metas-goal__head > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
}
.metas-goal__head strong { font-size: 14px; line-height: 1.3; }
.metas-goal__date {
  color: #868e96;
  font-size: 12px;
  white-space: nowrap;
}
.metas-pace {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #868e96;
}
.metas-pace.is-ahead,
.metas-pace.is-done { color: #2f9e44; }
.metas-pace.is-on_track { color: #2f9e44; }
.metas-pace.is-behind { color: #e03131; }
.metas-goal__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.3;
  color: #5f6f6d;
}
.metas-goal__row strong { color: var(--ink); }
.metas-goal .metas-proto-track { height: 5px; margin: 1px 0 2px; }
.metas-proto-track--debt i { background: #e07b7b; }
.metas-goal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: #868e96;
  font-size: 12px;
  line-height: 1.35;
}
.metas-goal__eta { color: var(--ink); }
.metas-goal__eta strong { color: #2f9e44; }
.metas-goal__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.metas-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--chip-bg);
  color: var(--ink);
  cursor: pointer;
}
.metas-icon-btn:hover { background: var(--hover); }
.metas-icon-btn.is-danger { color: var(--coral); }
.metas-icon-btn.is-danger:hover { background: var(--coral-soft); }
.metas-icon-btn svg { width: 18px; height: 18px; display: block; }
.metas-proto-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 6px;
}
.metas-proto-kpis span {
  display: block;
  color: #7d8c8a;
  font-size: 12px;
}
.metas-proto-kpis strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  overflow-wrap: anywhere;
}
.metas-proto-debt-share {
  margin: 0 0 8px;
  color: #c45c48;
  font-size: 12px;
  font-weight: 600;
}
.metas-proto-forecast12 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 8px;
}
.metas-proto-forecast12 small {
  color: #8b9b99;
  font-size: 12px;
  font-weight: 600;
}
.metas-proto-forecast12 span {
  color: #868e96;
  font-size: 13px;
  font-weight: 600;
}
.metas-proto-forecast12 strong {
  font-size: 16px;
  letter-spacing: -0.2px;
  line-height: 1.1;
}
.metas-proto-forecast12 strong.pos { color: #2f9e44; }
.metas-proto-forecast12 strong.neg { color: #e03131; }
.metas-proto-forecast12[hidden] { display: none; }
.metas-proto-range {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 8px;
  color: #868e96;
  font-size: 13px;
}
.metas-proto-range strong { color: var(--ink); font-weight: 700; }
.metas-proto-range .pos { color: #2f9e44; font-weight: 700; }
.metas-proto-range .neg { color: #e03131; font-weight: 700; }
.metas-proto-range--debt { margin-bottom: 10px; }
.metas-proto-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 6px;
  color: #868e96;
  font-size: 12px;
  font-weight: 600;
}
.metas-proto-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.metas-proto-legend .is-wealth { background: #2f9e44; }
.metas-proto-legend .is-debt { background: #e03131; }
.metas-proto-chart-wrap {
  position: relative;
  overflow: visible;
}
.metas-proto-chart {
  height: 280px;
  min-height: 280px;
  overflow: visible;
}
.metas-proto-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  max-width: 100%;
}
.metas-proto-hint {
  position: absolute;
  z-index: 3;
  min-width: 168px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #1c1c1e;
  color: #fff;
  font-size: 13px;
  pointer-events: none;
  box-shadow: 0 14px 32px rgba(21, 39, 40, 0.22);
}
.metas-proto-hint[hidden] { display: none; }
.metas-proto-hint strong { display: block; margin-bottom: 6px; }
.metas-proto-hint span { display: flex; justify-content: space-between; gap: 16px; margin-top: 3px; }
.metas-proto-hint .pos { color: #3dcc78; }
.metas-proto-hint .neg { color: #e07b7b; }
@media (max-width: 860px) {
  .metas-proto-chips,
  .metas-proto-period-grid { grid-template-columns: 1fr; }
  .metas-proto-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }
  .metas-proto-kpis strong { font-size: 16px; }
  .metas-proto-bars > div { grid-template-columns: 1fr; }
  .metas-goal {
    gap: 5px;
    padding: 12px 0 10px;
  }
  .metas-goal__head { gap: 8px; }
  .metas-goal__actions { justify-content: flex-end; }
  .metas-proto-card { padding: 12px 12px 10px; overflow: visible; }
  .metas-proto-copy { margin-bottom: 8px; }
  .metas-proto-chart { height: 260px; min-height: 260px; }
  .metas-proto-hero strong { font-size: 32px; }
}

#viewConfiguracao {
  display: grid;
  gap: 16px;
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 420px;
  margin-top: 18px;
}

.theme-picker__btn {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
}

.theme-picker__btn:hover {
  background: var(--hover);
}

.theme-picker__btn.is-active {
  border-color: var(--teal);
  background: var(--mint);
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 1px var(--teal);
}

html.theme-dark .user-menu__item:hover,
html.theme-dark .btn--danger-outline,
html.theme-dark .debts-table,
html.theme-dark .users-table,
html.theme-dark table {
  color: var(--ink);
}

html.theme-dark .btn--danger-outline {
  background: var(--surface);
}

html.theme-dark .btn--danger-outline:hover {
  background: var(--coral-soft);
}

html.theme-dark input,
html.theme-dark select,
html.theme-dark textarea {
  background-color: var(--input-bg);
  color: var(--ink);
  border-color: var(--line);
}

html.theme-dark .sidebar__toggle,
html.theme-dark .calendar-nav {
  color: var(--nav-ink);
}

html.theme-dark .sidebar__toggle:hover,
html.theme-dark .calendar-nav:hover {
  background: var(--hover);
}

html.theme-dark .brand-mark {
  background: #24302d;
  box-shadow: inset 0 0 0 1px rgba(231, 238, 236, 0.16);
}

html.theme-dark .brand-mark i {
  background: #e7eeec;
}

html.theme-dark .balance-timeline__item:not(:last-child)::after {
  border-left-color: #3a4845;
}

html.theme-dark .balance-timeline__marker {
  background: #1c2a38;
  color: #9eb8e4;
}

html.theme-dark .balance-timeline__item--forecast .balance-timeline__marker {
  background: #2a3532;
  color: #b7c6c3;
}

html.theme-dark .balance-timeline__item--forecast.is-settled .balance-timeline__marker {
  background: var(--green-soft);
  color: var(--green);
}

html.theme-dark .icon-button,
html.theme-dark .month-control,
html.theme-dark .year-control,
html.theme-dark .filter-check {
  background: var(--header-chip);
  border-color: var(--header-chip-line);
  color: var(--ink);
}

html.theme-dark .filter-check__box,
html.theme-dark .activity-once-date__field,
html.theme-dark .debt-action {
  background: var(--input-bg);
  border-color: var(--line);
  color: var(--ink);
}

html.theme-dark .metas-goal__actions .metas-icon-btn,
html.theme-dark .metas-icon-btn {
  background: var(--chip-bg);
  border-color: var(--chip-line);
  color: var(--ink);
  box-shadow: none;
}

html.theme-dark .metas-icon-btn.is-danger {
  color: var(--coral);
}

html.theme-dark .metas-icon-btn.is-danger:hover {
  background: var(--coral-soft);
}

html.theme-dark .panel-card,
html.theme-dark .overview-card,
html.theme-dark .summary-card,
html.theme-dark .metric-card,
html.theme-dark .insight-card,
html.theme-dark .category-section,
html.theme-dark .category-item,
html.theme-dark .category-item--others,
html.theme-dark .category-row,
html.theme-dark .login-card,
html.theme-dark .debts-table-wrap,
html.theme-dark .users-panel,
html.theme-dark .recon-card,
html.theme-dark .invest-card,
html.theme-dark .invest-empty-card,
html.theme-dark .invest-kpi,
html.theme-dark .invest-gauge,
html.theme-dark .invest-history,
html.theme-dark .invest-flow,
html.theme-dark .invest-balances,
html.theme-dark .totais-card,
html.theme-dark .compare-summary article,
html.theme-dark .compare-card,
html.theme-dark .parcela-card,
html.theme-dark .parcelas-panel,
html.theme-dark .parcela-sheet__panel,
html.theme-dark .recorrencias-sheet,
html.theme-dark .recorrencias-chart,
html.theme-dark .recorrencias-hint,
html.theme-dark .goal-item,
html.theme-dark .debt-trace-item,
html.theme-dark .activity-item,
html.theme-dark .activity-day,
html.theme-dark .activity-search__item,
html.theme-dark .activity-calendar__filter,
html.theme-dark .activity-calendar__detail-item,
html.theme-dark .activity-calendar__detail-item.is-done,
html.theme-dark .activity-calendar__detail-item.is-entry,
html.theme-dark .recon-hero,
html.theme-dark .recon-empty-card,
html.theme-dark .recon-connection,
html.theme-dark .recon-settings-btn,
html.theme-dark .recon-split,
html.theme-dark .recon-category__trigger,
html.theme-dark .recon-category__menu.is-floating,
html.theme-dark .recon-category__heading,
html.theme-dark .modal__dialog {
  background: var(--card-bg);
  border-color: var(--card-line);
  color: var(--ink);
}

html.theme-dark .detail-stat,
html.theme-dark .detail-total,
html.theme-dark .metric-stat,
html.theme-dark .metas-proto-chips > div,
html.theme-dark .category-list,
html.theme-dark .category-toggle,
html.theme-dark .debts-table th,
html.theme-dark .recorrencias-table th,
html.theme-dark .goals-summary,
html.theme-dark .activities-summary,
html.theme-dark .debt-trace-header,
html.theme-dark .goal-item__handle,
html.theme-dark .activity-form__section,
html.theme-dark .compare-card__figures p,
html.theme-dark .compare-pair__values p,
html.theme-dark .compare-month,
html.theme-dark .recon-connection__head,
html.theme-dark .suggestions li,
html.theme-dark .annual-subcats,
html.theme-dark .annual-category-search,
html.theme-dark .recon-history-badge,
html.theme-dark .parcela-sheet__close,
html.theme-dark .invest-pick,
html.theme-dark .invest-gauge__icon {
  background: var(--chip-bg);
  border-color: var(--chip-line);
  color: var(--ink);
}

html.theme-dark .detail-stat--income,
html.theme-dark .metric-stat--income,
html.theme-dark .insight-card__metric,
html.theme-dark .insight-card__metric--positive,
html.theme-dark .detail-stat--expense,
html.theme-dark .metric-stat--expense,
html.theme-dark .insight-card__metric--negative {
  background: var(--chip-bg);
  border-color: var(--chip-line);
  color: var(--muted);
}

html.theme-dark .insight-card__metric strong,
html.theme-dark .insight-card__metric--positive strong {
  color: var(--green);
}

html.theme-dark .insight-card__metric--negative strong {
  color: var(--coral);
}

html.theme-dark .panel-card__icon--teal,
html.theme-dark .panel-card__icon--purple,
html.theme-dark .expenses-icon,
html.theme-dark .category-icon {
  background: var(--mint);
}

html.theme-dark .category-row:hover,
html.theme-dark .category-row.is-open,
html.theme-dark .activity-search__item:hover,
html.theme-dark .activity-calendar__cell:hover,
html.theme-dark .activity-calendar__cell.has-done:hover,
html.theme-dark .activity-calendar__cell.has-pending:not(.has-done):hover,
html.theme-dark .recon-month-arrow:hover:not(:disabled),
html.theme-dark .recorrencias-cats li.is-hot,
html.theme-dark .goals-list--completed .goal-item,
html.theme-dark .activities-list--completed .activity-item,
html.theme-dark .activities-list--offday .activity-item,
html.theme-dark .activities-list--entries .activity-item,
html.theme-dark .metas-icon-btn:hover {
  background: var(--hover);
}

html.theme-dark .pull-refresh__icon {
  background: var(--card-bg);
}

html.theme-dark .status-banner.is-warn,
html.theme-dark .recon-unmapped,
html.theme-dark .compare-pill.is-off,
html.theme-dark .metas-proto-banner,
html.theme-dark .parcelas-relief {
  background: var(--amber-soft);
  border-color: #5a4a28;
  color: #e8c48a;
}

html.theme-dark .compare-card.is-off {
  border-color: #5a4a28;
}

html.theme-dark .status-banner.is-busy {
  background: var(--blue-soft);
  border-color: #31405c;
  color: #b8c8e8;
}

html.theme-dark .compare-pill.is-ok {
  background: var(--green-soft);
  color: #7dcea0;
}

html.theme-dark .compare-summary strong.is-ok {
  color: #7dcea0;
}

html.theme-dark .compare-summary strong.is-off {
  color: #e8b48a;
}

html.theme-dark .compare-month__arrow,
html.theme-dark .parcela-mark--pending,
html.theme-dark .recon-history-mark.is-current,
html.theme-dark .recon-history-mark.is-pending {
  background: var(--surface-2);
  color: var(--ink);
}

html.theme-dark .totais-card__subtitle,
html.theme-dark .totais-metric span,
html.theme-dark .totais-metric small,
html.theme-dark .totais-legend,
html.theme-dark .parcela-card__values span,
html.theme-dark .recorrencias-when,
html.theme-dark .recorrencias-origin,
html.theme-dark .recorrencias-category,
html.theme-dark .recorrencias-note,
html.theme-dark .recorrencias-hint span {
  color: var(--muted);
}

html.theme-dark .recorrencias-category i {
  background: var(--sand);
  color: #c4b29a;
}

html.theme-dark .recorrencias-table td,
html.theme-dark .recorrencias-cats li {
  border-color: var(--line);
}

html.theme-dark .parcelas-search {
  background: var(--input-bg);
  border-color: var(--line);
  color: var(--ink);
}

html.theme-dark .recorrencias-search {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2393a4a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3 3'/%3E%3C/svg%3E") 12px 50% no-repeat,
    var(--input-bg);
  border-color: var(--line);
  color: var(--ink);
}

html.theme-dark .parcela-ring span {
  color: var(--ink);
}

html.theme-dark .parcela-ring circle {
  stroke: #31403c;
}

html.theme-dark .activity-calendar__cell,
html.theme-dark .activity-calendar__cell.has-done,
html.theme-dark .activity-calendar__cell.has-pending:not(.has-done),
html.theme-dark .goals-empty,
html.theme-dark .activities-empty,
html.theme-dark .debt-trace-empty {
  background: var(--surface-2);
  color: var(--ink);
}

html.theme-dark .activity-calendar__cell.is-today,
html.theme-dark .activity-calendar__cell.is-today:hover,
html.theme-dark .invest-gauge--reserve {
  background: var(--mint);
  border-color: rgba(78, 170, 153, 0.45);
  color: var(--teal-dark);
}

html.theme-dark .activity-calendar__detail-item.is-open {
  background: var(--coral-soft);
  border-color: rgba(232, 146, 125, 0.28);
}

html.theme-dark .activity-calendar__detail-item.is-planned {
  background: var(--mint);
}

html.theme-dark .activity-calendar__status-icon {
  background: var(--mint);
  color: var(--teal-dark);
}

html.theme-dark .activity-calendar__detail-item.is-open .activity-calendar__status-icon {
  background: var(--coral-soft);
  color: var(--coral);
}

html.theme-dark .activity-calendar__filter:hover {
  background: var(--hover);
}

html.theme-dark .recon-item-form input,
html.theme-dark .recon-account select,
html.theme-dark .recon-create-form select,
html.theme-dark .recon-split-description,
html.theme-dark .recon-split-amount,
html.theme-dark .recon-filter-search input,
html.theme-dark .recon-filter-field select,
html.theme-dark .recon-filter-field input {
  background: var(--input-bg);
  color: var(--ink);
  border-color: var(--line);
}

html.theme-dark .recon-view .badge,
html.theme-dark .recon-history-modal .badge {
  background: var(--chip-bg);
  color: var(--ink);
}

html.theme-dark .category-icon.tone-coral {
  background: var(--coral-soft);
  color: var(--coral);
}

html.theme-dark .category-icon.tone-amber {
  background: var(--amber-soft);
  color: #e8c48a;
}

html.theme-dark .category-icon.tone-purple {
  background: #262038;
  color: #b9a8e0;
}

html.theme-dark .category-icon.tone-rose {
  background: #2c1c22;
  color: #e0a0b0;
}

html.theme-dark .field.is-disabled input,
html.theme-dark .field.is-disabled select,
html.theme-dark #activityFormOnceDateWrap.is-disabled input,
html.theme-dark #activityFormRemindWrap.is-disabled input,
html.theme-dark .activity-once-date__field:disabled,
html.theme-dark .activity-days.is-disabled .activity-day {
  background: var(--surface-2);
}

html.theme-dark .ranking-row__label {
  color: var(--ink);
}

html.theme-dark .ranking-axis__labels,
html.theme-dark .overview-card__head,
html.theme-dark .card-heading,
html.theme-dark .variation-card .comparison,
html.theme-dark .variation-card .balance-target,
html.theme-dark .summary-card p,
html.theme-dark .card-share,
html.theme-dark .expense-ranking__empty,
html.theme-dark .empty-categories,
html.theme-dark .recon-item-form label,
html.theme-dark .recon-account__dest,
html.theme-dark .recon-filter-field,
html.theme-dark .recon-category__parent,
html.theme-dark .recon-create-form label,
html.theme-dark .recon-field,
html.theme-dark .metas-proto-hero-row,
html.theme-dark .metas-proto-bars > div,
html.theme-dark .metas-goal__row {
  color: var(--muted);
}

html.theme-dark .ranking-axis__gridline {
  background: var(--chart-grid-strong);
}

html.theme-dark .ranking-row__track {
  background: var(--surface-2);
}

html.theme-dark .category-icon.tone-teal {
  background: var(--mint);
  color: #7dcdc0;
}

html.theme-dark .category-icon.tone-blue {
  background: var(--blue-soft);
  color: #8fb0e8;
}

html.theme-dark .category-icon.tone-green {
  background: var(--green-soft);
  color: #86d07a;
}

html.theme-dark .category-icon.tone-slate {
  background: var(--surface-2);
  color: var(--ink);
}

html.theme-dark .category-share {
  background: var(--surface-2);
}

html.theme-dark .category-sheet-ring .track {
  stroke: var(--line);
}

html.theme-dark .recon-history-row__main strong,
html.theme-dark .recon-history-row__side strong,
html.theme-dark .category-value strong,
html.theme-dark .category-sheet-ring span {
  color: var(--ink);
}

.variacoes-lead {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.variacoes-chart {
  padding: 14px 14px 6px;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  background: var(--card-bg);
  color: var(--ink);
}
.variacoes-head,
.variacoes-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 118px;
  gap: 12px;
  align-items: center;
}
.variacoes-head { align-items: end; padding-bottom: 6px; }
.variacoes-row { padding: 7px 0; border-top: 1px solid var(--line); }
.variacoes-months,
.variacoes-plot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
}
.variacoes-months span,
.variacoes-month-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.variacoes-months span.is-current,
.variacoes-month-label { color: var(--ink); }
.variacoes-month-label { text-align: right; font-size: 11px; }
.variacoes-name {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.variacoes-name:hover { color: var(--teal-dark); }
.variacoes-plot { height: 40px; align-items: end; }
.variacoes-col {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.variacoes-col.is-current { background: var(--mint); }
.variacoes-col__bar {
  width: min(14px, 80%);
  border-radius: 4px 4px 2px 2px;
  background: #c5e4dc;
}
.variacoes-col.is-current .variacoes-col__bar { background: var(--teal); }
.variacoes-col.is-empty .variacoes-col__bar { height: 2px !important; background: var(--chart-grid-strong); }
.variacoes-col.is-above::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #c45c48;
}
.variacoes-col:hover .variacoes-col__bar,
.variacoes-col:focus-visible .variacoes-col__bar { background: var(--teal-dark); }
.variacoes-value { text-align: right; }
.variacoes-value strong { display: block; font-size: 13px; letter-spacing: -0.3px; }
.variacoes-value strong.is-alert { color: #c45c48; }
.variacoes-value span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.variacoes-tip {
  position: fixed;
  z-index: 40;
  transform: translate(-50%, calc(-100% - 8px));
  padding: 7px 9px;
  border-radius: 8px;
  background: #152728;
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
}
.variacoes-tip[hidden] { display: none !important; }
.variacoes-empty { margin: 0; color: var(--muted); }
html.theme-dark .variacoes-col.is-current { background: rgba(78, 170, 153, 0.16); }
html.theme-dark .variacoes-col__bar { background: #3e6b62; }
html.theme-dark .variacoes-col.is-current .variacoes-col__bar { background: var(--teal); }
html.theme-dark .variacoes-col.is-empty .variacoes-col__bar { background: var(--chart-grid-strong); }
html.theme-dark .variacoes-col:hover .variacoes-col__bar,
html.theme-dark .variacoes-col:focus-visible .variacoes-col__bar { background: var(--teal-dark); }
html.theme-dark .variacoes-col.is-above::before { background: var(--coral); }
html.theme-dark .variacoes-value strong.is-alert { color: var(--coral); }
html.theme-dark .variacoes-tip {
  background: var(--ink);
  color: var(--bg);
}
@media (max-width: 860px) {
  .variacoes-head,
  .variacoes-row { grid-template-columns: 108px minmax(0, 1fr) 104px; gap: 8px; }
}