/* ============================================================
   LevelUp Finance · styles.css
   Limpiado y consolidado: parches mergeados con reglas originales,
   !important redundantes eliminados.
   
   Tabla de contenidos (Ctrl+F para saltar):
   - Tokens y tema (variables CSS)
   - Reset y utilidades base
   - Pantalla de autenticación
   - Layout principal (sidebar, topbar, content)
   - Componentes (cards, formularios, modales, etc.)
   - Páginas específicas
   - Media queries (responsive)
   ============================================================ */
:root {
  --background: #ffffff;
  --foreground: #020817;
  --card: #ffffff;
  --card-foreground: #020817;
  --popover: #ffffff;
  --popover-foreground: #020817;
  --primary: #0f172a;
  --primary-foreground: #f8fafc;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;
  --destructive: #F26A78;
  --destructive-foreground: #f8fafc;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #94a3b8;
  --radius: 14px;
  --sidebar-width: 380px;
  --sidebar-collapsed: 78px;
  --green: #21A67A;
  --red: #E24A5A;
  --blue: #2F6BFF;
  --amber: #f59e0b;
  --violet: #8b5cf6;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
  --sidebar-full: 250px;
  --lf-sidebar-w: 250px;
  --lf-sidebar-collapsed: 78px;
  --orange: #F2A81D;
  --purple: #7C5CFF;
}

[data-theme="dark"] {
  --background: #09090b;
  --foreground: #f8fafc;
  --card: #0f1117;
  --card-foreground: #f8fafc;
  --popover: #0f1117;
  --popover-foreground: #f8fafc;
  --primary: #f8fafc;
  --primary-foreground: #020817;
  --secondary: #1e293b;
  --secondary-foreground: #f8fafc;
  --muted: #1e293b;
  --muted-foreground: #94a3b8;
  --accent: #1e293b;
  --accent-foreground: #f8fafc;
  --border: #1f2937;
  --input: #1f2937;
  --ring: #64748b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .24), 0 14px 34px rgba(0, 0, 0, .28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted-foreground);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.grow {
  flex: 1;
}

/* Auth */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--background);
}

.authCard {
  width: min(430px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.brand {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 10px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  overflow: hidden;
}

.brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.authCard h1 {
  text-align: center;
  margin: 0;
  font-size: 28px;
  letter-spacing: -.04em;
}

.authCard p {
  text-align: center;
  margin: 6px 0 22px;
  font-size: 14px;
  color: var(--muted-foreground);
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--muted);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 18px;
}

.tabs button {
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  border-radius: 9px;
  padding: 10px;
  font-weight: 650;
}

.tabs button.active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

label {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted-foreground);
  display: block;
  margin-bottom: 6px;
}

input,
select,
textarea {
  width: 100%;
  height: 42px;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--input);
  border-radius: 10px;
  padding: 0 12px;
  outline: none;
}

textarea {
  height: 86px;
  padding: 10px 12px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
}

.form {
  display: grid;
  gap: 12px;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.btn {
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none;
}

.btn.secondary {
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
}

.btn.danger {
  background: rgba(239, 68, 68, .10);
  color: var(--destructive);
  border: 1px solid rgba(239, 68, 68, .25);
}

.btn.green {
  background: #21A67A;
  color: #fff;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.alert {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--muted);
}

.alert.danger {
  background: rgba(239, 68, 68, .10);
  border-color: rgba(239, 68, 68, .25);
  color: #F26A78;
}

.alert.ok {
  background: rgba(22, 163, 74, .10);
  border-color: rgba(22, 163, 74, .25);
  color: #21A67A;
}

/* Layout */
.app {
  min-height: 100vh;
  background: var(--background);
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 250px;
  height: 100vh;
  background: var(--card);
  border-right: 1px solid var(--border);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .2s ease;
  min-width: 250px;
  max-width: 250px;
}

.sidebar.collapsed {
  width: 78px;
  min-width: 78px;
  max-width: 78px;
}

.main {
  min-height: 100vh;
  margin-left: 250px;
  transition: margin-left .2s ease;
  min-width: 0;
  width: auto;
}

.sidebar.collapsed+.main {
  margin-left: 78px;
  width: auto;
}

/* Sidebar expanded */
.sideTop {
  height: 78px;
  padding: 16px 18px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 0 0 auto;
}

.sideLogo {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 36px;
  cursor: pointer;
}

.sideLogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brandBlock {
  min-width: 0;
  flex: 1;
  padding-top: 1px;
}

.brandBlock b {
  display: block;
  font-size: 14px;
  line-height: 1.05;
  font-weight: 750;
  letter-spacing: -.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brandBlock span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.05;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brandChevron {
  width: 20px;
  height: 20px;
  margin: 4px 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  margin-top: 1px;
}

.brandChevron:hover {
  background: var(--accent);
}

.sideNav {
  flex: 1;
  padding: 0 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sideNav::-webkit-scrollbar {
  width: 6px;
}

.sideNav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.navSection {
  margin: 14px 10px 8px;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
}

.navBtn {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--foreground);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  text-align: left;
  margin: 0 0 6px;
  transition: background .15s ease;
  margin-bottom: 3px;
}

.navBtn:hover,
.navBtn.active {
  background: var(--accent);
  color: var(--accent-foreground);
}

.navIcon {
  width: 17px;
  height: 17px;
  min-width: 17px;
  display: grid;
  place-items: center;
  color: currentColor;
  flex: 0 0 17px;
}

.navIcon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
  display: block;
}

.navLabel {
  flex: 1;
  font-size: 13px;
  line-height: 1;
  font-weight: 450;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navBtn.active .navLabel {
  font-weight: 650;
}

.navArrow {
  width: 15px;
  height: 15px;
  margin-left: auto;
  display: grid;
  place-items: center;
}

.navArrow svg {
  width: 15px;
  height: 15px;
}

.sideFoot {
  height: 64px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  flex: 0 0 auto;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--foreground);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}

.sideFoot .avatar {
  width: 30px;
  height: 30px;
  min-width: 42px;
  flex: 0 0 30px;
  font-size: 11px;
}

.sideFootText {
  min-width: 0;
  flex: 1;
  line-height: 1.15;
}

.sideFootText b,
.sideFootText span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sideFootText span {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 10px;
  line-height: 1.1;
}

.sideFoot .btn {
  height: 28px;
  padding: 0 8px;
  font-size: 10px;
  border-radius: 8px;
  flex: 0 0 auto;
}

/* Sidebar collapsed exactly as rail */
.sidebar.collapsed .sideTop {
  height: 76px;
  justify-content: center;
  align-items: flex-start;
  padding: 16px 0 12px;
}

.sidebar.collapsed .sideLogo {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex: 0 0 36px;
}

.sidebar.collapsed .brandBlock,
.sidebar.collapsed .brandChevron,
.sidebar.collapsed .navSection,
.sidebar.collapsed .navLabel,
.sidebar.collapsed .navArrow,
.sidebar.collapsed .sideFoot {
  display: none !important;
}

.sidebar.collapsed .sideNav {
  padding: 0 12px 16px;
  align-items: center;
  gap: 7px;
}

.sidebar.collapsed .navBtn {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border-radius: 11px;
  justify-content: center;
  gap: 0;
}

.sidebar.collapsed .navIcon {
  width: 24px;
  height: 24px;
  min-width: 24px;
}

.sidebar.collapsed .navBtn.active {
  background: var(--accent);
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 64px;
  min-height: 64px;
  padding: 0 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
}

.collapseBtn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
  padding: 0;
}

.collapseBtn svg {
  width: 18px;
  height: 18px;
}

.topDivider {
  width: 1px;
  height: 26px;
  background: var(--border);
  display: block;
}

.topTabs {
  display: flex;
  align-items: center;
  gap: 30px;
  color: var(--muted-foreground);
  min-width: max-content;
}

.topTabs button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  font-weight: 450;
  letter-spacing: -.025em;
  padding: 6px 0;
  white-space: nowrap;
}

.topTabs button.active {
  color: var(--foreground);
  font-weight: 650;
}

.searchBox {
  width: min(250px, 24vw);
  height: 34px;
  min-width: 190px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: var(--muted-foreground);
  font-size: 12px;
}

.searchBox input {
  min-width: 0;
  height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.searchBox input:focus {
  box-shadow: none;
}

.keyHint {
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 10px;
  color: var(--muted-foreground);
  background: var(--muted);
  white-space: nowrap;
}

.topActions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
}

.circleAction {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--foreground);
  transition: background .15s ease, transform .15s ease;
  min-width: 34px;
}

.circleAction:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.userPill {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  max-width: 260px;
  overflow: hidden;
  font-size: 13px;
}

.userPill span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobileOnly {
  display: none !important;
}

/* Content */
.content {
  width: 100%;
  max-width: 1500px;
  padding: 42px 36px 56px;
  overflow: hidden;
}

.dashTop {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.dashTop h1 {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -.04em;
  margin: 0;
}

.dashTop .btn {
  margin-left: auto;
}

.pageTabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--muted);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 36px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.pageTabs::-webkit-scrollbar {
  display: none;
}

.pageTabs button {
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 16px;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.pageTabs button.active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .05);
}

.sectionHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.sectionHead h1 {
  font-size: 32px;
  margin: 0;
  letter-spacing: -.04em;
}

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

.card,
.table,
.reportBlock {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.card {
  padding: 24px;
}

.cardTitle {
  font-size: 15px;
  color: var(--foreground);
  font-weight: 700;
  margin-bottom: 12px;
}

.big {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.05em;
}

.sub {
  font-size: 14px;
  color: var(--muted-foreground);
  margin-top: 6px;
}

.balanceFeatured {
  position: relative;
  overflow: hidden;
  color: #fff;
  border: 0;
  background: radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .26), transparent 24%), linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #2563eb 140%);
}

.balanceFeatured:after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  right: -70px;
  top: -70px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.balanceFeatured .cardTitle,
.balanceFeatured .sub,
.balanceFeatured .big {
  color: #fff;
  position: relative;
  z-index: 1;
}

.balanceHint {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-top: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.mainChartGrid,
.chartsGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 18px;
  margin-bottom: 18px;
}

.grid2,
.analyticsGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 18px;
}

.reportGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.chartCard {
  min-height: 410px;
}

.chartHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

.chartHeader .cardTitle {
  font-size: 18px;
  margin-bottom: 4px;
}

.svgChart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.svgChart rect {
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
  transform-box: fill-box;
  transform-origin: center bottom;
  cursor: pointer;
}

.svgChart rect:hover {
  transform: scaleY(1.08);
  opacity: .92;
  filter: drop-shadow(0 8px 10px rgba(15, 23, 42, .18));
}

.legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted-foreground);
}

.legendItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legendDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, .04);
}

.donutWrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 190px;
}

.donut {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: transform .18s ease, filter .18s ease;
  cursor: pointer;
}

.donut:hover {
  transform: scale(1.045);
  filter: drop-shadow(0 12px 20px rgba(15, 23, 42, .16));
}

.donut:after {
  content: '';
  position: absolute;
  inset: 30px;
  background: var(--card);
  border-radius: 50%;
  border: 1px solid var(--border);
}

.donutCenter {
  position: absolute;
  inset: 45px;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 850;
  font-size: 13px;
  line-height: 1.15;
}

.chartSmallGrid {
  display: grid;
  gap: 18px;
}

.axisText {
  fill: var(--muted-foreground);
  font-size: 11px;
}

.barList {
  display: grid;
  gap: 14px;
}

.barLine {
  height: 10px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}

.barLine span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .35s ease, filter .18s ease, transform .18s ease;
  transform-origin: left center;
}

.barLine:hover span {
  filter: brightness(1.08);
  transform: scaleX(1.015);
}

.list {
  display: grid;
  gap: 0;
}

.listItem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.listItem:last-child {
  border-bottom: 0;
}

.initialBubble {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--muted);
  color: var(--foreground);
  display: grid;
  place-items: center;
  font-weight: 800;
  flex: 0 0 auto;
}

.amount.income {
  color: #21A67A;
}

.amount.expense {
  color: #E24A5A;
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
}

.toolbar input {
  max-width: 460px;
}

.thead,
.tr {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 120px;
  gap: 10px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

.thead {
  font-size: 12px;
  color: var(--muted-foreground);
  font-weight: 700;
  background: var(--muted);
}

.tr {
  font-size: 14px;
}

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

.right {
  text-align: right;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.iconBtn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  border-radius: 10px;
}

.metricList {
  display: grid;
  gap: 12px;
}

.metricRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.metricRow:last-child {
  border-bottom: 0;
}

.reportBlock {
  padding: 20px;
}

.reportBlock h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.reportBlock p {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.55;
  font-size: 14px;
}

.empty {
  text-align: center;
  color: var(--muted-foreground);
  padding: 42px 18px;
}

/* Modals */
.modalBack {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 100;
}

.modal {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.modalHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modalHead h3 {
  margin: 0;
}

@media(max-width:1180px) {
  :root {
    --sidebar-width: 320px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mainChartGrid,
  .chartsGrid,
  .grid2,
  .analyticsGrid,
  .reportGrid {
    grid-template-columns: 1fr;
  }

  .searchBox {
    width: 240px;
    min-width: 200px;
  }

  .topTabs {
    gap: 28px;
  }

  .topTabs button {
    font-size: 20px;
  }

  .content {
    padding: 44px 36px 60px;
  }

  .navLabel {
    font-size: 20px;
  }

  .navSection {
    font-size: 18px;
  }
}

@media(max-width:900px) {
  .app {
    display: block;
  }

  .sidebar,
  .sidebar.collapsed {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(360px, 78vw);
    height: 100vh;
    min-height: 0;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    min-width: 0;
    max-width: min(360px, 78vw);
    background: #fff;
    box-shadow: 24px 0 70px rgba(15, 23, 42, .24);
    transform: translateX(-110%);
    transition: transform .22s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .main,
  .sidebar.collapsed+.main {
    margin-left: 0;
    width: 100%;
  }

  .sideTop {
    height: 60px;
    padding: 10px 12px;
    align-items: center;
  }

  .sideLogo {
    width: 34px;
    height: 34px;
    min-width: 34px;
    flex: 0 0 34px;
  }

  .brandBlock,
  .brandChevron,
  .sidebar.collapsed .brandBlock,
  .sidebar.collapsed .brandChevron {
    display: block !important;
  }

  .brandBlock b {
    font-size: 13px;
  }

  .brandBlock span {
    font-size: 11px;
  }

  .sideNav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 8px 10px 10px;
    scrollbar-width: none;
  }

  .sideNav::-webkit-scrollbar {
    display: none;
  }

  .navSection,
  .sidebar.collapsed .navSection {
    display: block;
    margin: 22px 12px 12px;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    color: var(--muted);
  }

  .navBtn,
  .sidebar.collapsed .navBtn {
    width: 100%;
    min-width: max-content;
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 10px;
    margin: 0 0 6px;
    gap: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    color: var(--fg);
    text-align: left;
  }

  .navIcon,
  .sidebar.collapsed .navIcon {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  .navIcon svg {
    width: 20px;
    height: 20px;
  }

  .navLabel,
  .sidebar.collapsed .navLabel {
    display: block;
    font-size: 21px;
    line-height: 1;
    font-weight: 400;
    color: currentColor;
  }

  .navArrow,
  .sideFoot {
    display: none !important;
  }

  .topbar {
    height: auto;
    min-height: 64px;
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--card);
    display: grid;
    align-items: center;
    grid-template-columns: 42px 1px 42px minmax(36px, 1fr) auto auto;
    grid-template-areas: "panel div menu logo actions actions"
      "search search search search search search"
      "tabs tabs tabs tabs tabs tabs";
    column-gap: 10px;
    row-gap: 10px;
    border-bottom: 1px solid var(--line);
  }

  .collapseBtn {
    display: grid;
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .topDivider {
    display: block;
    height: 28px;
    order: 2;
    width: 1px;
    margin: 0 4px;
  }

  .topTabs {
    order: initial;
    width: 100%;
    overflow-x: auto;
    gap: 22px;
    scrollbar-width: none;
    padding: 2px 0 0;
    grid-area: tabs;
    display: flex;
  }

  .topTabs::-webkit-scrollbar {
    display: none;
  }

  .topTabs button {
    font-size: 15px;
    white-space: nowrap;
    line-height: 1;
    padding: 8px 0;
  }

  .searchBox {
    order: initial;
    width: 100%;
    min-width: 0;
    flex-basis: auto;
    height: 38px;
    font-size: 13px;
    margin-top: 2px;
    grid-area: search;
    margin: 0;
    border-radius: 11px;
  }

  .content {
    padding: 20px 14px 34px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-top: 24px;
  }

  .dashTop h1 {
    font-size: 34px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .userPill {
    display: none;
  }

  .topActions {
    margin-left: 0;
    gap: 8px;
    order: initial;
    display: flex;
    grid-area: actions;
    justify-self: end;
    align-items: center;
  }

  .mobileOnly {
    display: inline-flex !important;
  }
}

@media(max-width:560px) {
  .topbar {
    padding: 10px;
  }

  .topActions {
    gap: 8px;
  }

  .topActions .circleAction:nth-of-type(n+2) {
    display: none;
  }

  .content {
    padding: 22px 20px 38px;
  }

  .dashTop {
    flex-direction: column;
    align-items: stretch;
  }

  .dashTop .btn {
    width: 100%;
    margin-left: 0;
  }

  .pageTabs {
    width: 100%;
  }

  .pageTabs button {
    font-size: 16px;
  }

  .row,
  .row3 {
    grid-template-columns: 1fr;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar input {
    max-width: none;
  }

  .thead {
    display: none;
  }

  .tr {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .right {
    text-align: left;
  }

  .actions {
    justify-content: flex-start;
  }

  .donutWrap {
    display: grid;
    justify-items: center;
  }

  .big {
    font-size: 28px;
  }
}

.sideFootText b {
  font-size: 13px;
}

.sidebar.collapsed .navIcon,
.sidebar.collapsed .navIcon svg {
  width: 21px;
  height: 21px;
  min-width: 21px;
}

@media(max-width:900px) {

  .navIcon,
  .sidebar.collapsed .navIcon,
  .navIcon svg,
  .sidebar.collapsed .navIcon svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
  }
}

.sideFootText b {
  font-size: 11.5px;
  line-height: 1.1;
}

.sidebar.collapsed .navIcon,
.sidebar.collapsed .navIcon svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.userPill .avatar,
.avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

@media(max-width:900px) {

  .navIcon,
  .sidebar.collapsed .navIcon,
  .navIcon svg,
  .sidebar.collapsed .navIcon svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
  }
}

.sideLogo:hover {
  background: var(--card2);
}

.logoHome {
  appearance: none;
  -webkit-appearance: none;
}

.mobileBackdrop {
  display: none;
}

@media(max-width:900px) {
  body:has(.sidebar.mobile-open) {
    overflow: hidden;
  }

  .mobileBackdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .54);
    z-index: 90;
    backdrop-filter: blur(1px);
  }

  .sidebar.mobile-open,
  .sidebar.collapsed.mobile-open {
    transform: translateX(0);
  }

  .sideTop,
  .sidebar.collapsed .sideTop {
    height: 112px;
    padding: 26px 26px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    border-bottom: 0;
  }

  .sideLogo,
  .sidebar.collapsed .sideLogo {
    width: 50px;
    height: 50px;
    min-width: 50px;
    flex: 0 0 50px;
    border-radius: 14px;
    padding: 7px;
  }

  .brandBlock,
  .sidebar.collapsed .brandBlock {
    display: block;
    flex: 1;
    min-width: 0;
    padding-top: 1px;
  }

  .brandBlock b,
  .sidebar.collapsed .brandBlock b {
    display: block;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: -.03em;
    color: var(--fg);
  }

  .brandBlock span,
  .sidebar.collapsed .brandBlock span {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    line-height: 1.1;
    color: var(--fg);
  }

  .brandChevron,
  .sidebar.collapsed .brandChevron {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 3px 0 0 auto;
    color: var(--fg);
    font-size: 22px;
  }

  .sideNav,
  .sidebar.collapsed .sideNav {
    flex: 1;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 20px 20px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .navBtn.active,
  .sidebar.collapsed .navBtn.active {
    background: var(--card2);
  }

  .navIcon,
  .sidebar.collapsed .navIcon,
  .navIcon svg,
  .sidebar.collapsed .navIcon svg {
    width: 23px;
    height: 23px;
    min-width: 23px;
    flex: 0 0 23px;
  }

  .navArrow,
  .sidebar.collapsed .navArrow {
    display: grid;
    margin-left: auto;
  }

  .sideFoot,
  .sidebar.collapsed .sideFoot {
    height: 84px;
    padding: 16px 26px;
    border-top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
  }

  .sideFoot .avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 18px;
  }

  .sideFootText,
  .sidebar.collapsed .sideFootText {
    display: block;
    flex: 1;
    min-width: 0;
  }

  .sideFootText b {
    font-size: 20px;
    line-height: 1.1;
  }

  .sideFootText span {
    font-size: 18px;
    line-height: 1.1;
    color: var(--fg);
  }

  .sideFoot .btn {
    display: none;
  }

  .topMenuBtn,
  .collapseBtn {
    display: grid;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
  }

  .topActions .circleAction:nth-of-type(n+2) {
    display: none;
  }
}

@media(max-width:560px) {

  .sidebar,
  .sidebar.collapsed {
    width: 82vw;
    max-width: 82vw;
  }
}

.mobileTopLogo {
  display: none;
}

@media(max-width:900px) {
  .mobileTopLogo {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 6px;
    margin-right: 4px;
  }

  .mobileTopLogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .topMenuBtn {
    display: grid;
    order: 0;
  }

  .mobileTopLogo {
    order: 1;
  }

  .mobileBackdrop {
    display: none;
  }

  .mobileBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .56);
    z-index: 900;
    backdrop-filter: blur(1px);
  }

  .sidebar.mobile-open~.mobileBackdrop {
    display: block;
  }

  .mobileBackdrop[id="mobileBackdrop"] {
    display: block;
  }

  [data-theme="dark"] .sidebar,
  [data-theme="dark"] .sidebar.collapsed {
    background: var(--card);
  }

  .sidebar.mobile-open,
  .sidebar.collapsed.mobile-open {
    transform: translateX(0);
  }

  .sidebar.mobile-open .sideTop,
  .sidebar.collapsed.mobile-open .sideTop {
    height: 112px;
    padding: 26px 26px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    border-bottom: 0;
  }

  .sidebar.mobile-open .sideLogo,
  .sidebar.collapsed.mobile-open .sideLogo {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    flex: 0 0 50px;
    border-radius: 14px;
    padding: 7px;
    background: #fff;
  }

  .sidebar.mobile-open .sideLogo img,
  .sidebar.collapsed.mobile-open .sideLogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .sidebar.mobile-open .brandBlock,
  .sidebar.collapsed.mobile-open .brandBlock {
    display: block;
    flex: 1;
    min-width: 0;
    padding-top: 1px;
  }

  .sidebar.mobile-open .brandBlock b,
  .sidebar.collapsed.mobile-open .brandBlock b {
    display: block;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: -.03em;
    color: var(--fg);
  }

  .sidebar.mobile-open .brandBlock span,
  .sidebar.collapsed.mobile-open .brandBlock span {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    line-height: 1.1;
    color: var(--fg);
  }

  .sidebar.mobile-open .brandChevron,
  .sidebar.collapsed.mobile-open .brandChevron {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 3px 0 0 auto;
    color: var(--fg);
    font-size: 22px;
  }

  .sidebar.mobile-open .sideNav,
  .sidebar.collapsed.mobile-open .sideNav {
    flex: 1;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 20px 20px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar.mobile-open .navSection,
  .sidebar.collapsed.mobile-open .navSection {
    display: block;
    margin: 22px 12px 12px;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    color: var(--muted);
  }

  .sidebar.mobile-open .navBtn,
  .sidebar.collapsed.mobile-open .navBtn {
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
    margin: 0 0 6px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    background: transparent;
    color: var(--fg);
    text-align: left;
  }

  .sidebar.mobile-open .navBtn.active,
  .sidebar.collapsed.mobile-open .navBtn.active {
    background: var(--card2);
  }

  .sidebar.mobile-open .navIcon,
  .sidebar.collapsed.mobile-open .navIcon,
  .sidebar.mobile-open .navIcon svg,
  .sidebar.collapsed.mobile-open .navIcon svg {
    width: 23px;
    height: 23px;
    min-width: 23px;
    flex: 0 0 23px;
  }

  .sidebar.mobile-open .navLabel,
  .sidebar.collapsed.mobile-open .navLabel {
    display: block;
    font-size: 21px;
    line-height: 1;
    font-weight: 400;
    color: currentColor;
  }

  .sidebar.mobile-open .navArrow,
  .sidebar.collapsed.mobile-open .navArrow {
    display: grid;
    margin-left: auto;
  }

  .sidebar.mobile-open .sideFoot,
  .sidebar.collapsed.mobile-open .sideFoot {
    height: 84px;
    padding: 16px 26px;
    border-top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
  }

  [data-theme="dark"] .sidebar.mobile-open .sideFoot,
  [data-theme="dark"] .sidebar.collapsed.mobile-open .sideFoot {
    background: var(--card);
  }

  .sidebar.mobile-open .sideFoot .avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 18px;
  }

  .sidebar.mobile-open .sideFootText,
  .sidebar.collapsed.mobile-open .sideFootText {
    display: block;
    flex: 1;
    min-width: 0;
  }

  .sidebar.mobile-open .sideFootText b {
    font-size: 20px;
    line-height: 1.1;
  }

  .sidebar.mobile-open .sideFootText span {
    font-size: 18px;
    line-height: 1.1;
    color: var(--fg);
  }

  .sidebar.mobile-open .sideFoot .btn {
    display: none;
  }
}

@media(max-width:900px) {
  body {
    overflow-x: hidden;
  }

  .app,
  .main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Header móvil: logo a la izquierda */
  .mobileTopLogo {
    order: 0;
    display: grid;
    width: 38px;
    height: 38px;
    min-width: 38px;
    margin: 0;
    padding: 5px;
    border-radius: 11px;
  }

  .topMenuBtn,
  .collapseBtn {
    order: 1;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 11px;
  }

  .circleAction {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .topActions .circleAction:nth-of-type(n+2) {
    display: none;
  }

  .topActions .btn,
  #logoutBtn2 {
    height: 38px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 11px;
  }

  /* Drawer móvil más compacto */
  .sidebar.mobile-open .sideTop,
  .sidebar.collapsed.mobile-open .sideTop {
    height: 78px;
    padding: 16px 18px 10px;
    gap: 10px;
    align-items: flex-start;
  }

  .sidebar.mobile-open .sideLogo,
  .sidebar.collapsed.mobile-open .sideLogo {
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    padding: 5px;
  }

  .sidebar.mobile-open .brandBlock b,
  .sidebar.collapsed.mobile-open .brandBlock b {
    font-size: 15px;
    line-height: 1.05;
    font-weight: 750;
  }

  .sidebar.mobile-open .brandBlock span,
  .sidebar.collapsed.mobile-open .brandBlock span {
    font-size: 13px;
    line-height: 1.05;
    margin-top: 3px;
  }

  .sidebar.mobile-open .brandChevron,
  .sidebar.collapsed.mobile-open .brandChevron {
    width: 22px;
    height: 22px;
    font-size: 17px;
    margin-top: 0;
  }

  .sidebar.mobile-open .sideNav,
  .sidebar.collapsed.mobile-open .sideNav {
    padding: 0 14px 12px;
    gap: 0;
  }

  .sidebar.mobile-open .navSection,
  .sidebar.collapsed.mobile-open .navSection {
    margin: 14px 8px 7px;
    font-size: 12px;
    line-height: 1;
    color: var(--muted);
  }

  .sidebar.mobile-open .navBtn,
  .sidebar.collapsed.mobile-open .navBtn {
    height: 36px;
    min-height: 36px;
    padding: 0 9px;
    margin: 0 0 3px;
    gap: 9px;
    border-radius: 9px;
  }

  .sidebar.mobile-open .navIcon,
  .sidebar.collapsed.mobile-open .navIcon,
  .sidebar.mobile-open .navIcon svg,
  .sidebar.collapsed.mobile-open .navIcon svg {
    width: 17px;
    height: 17px;
    min-width: 17px;
    flex: 0 0 17px;
  }

  .sidebar.mobile-open .navLabel,
  .sidebar.collapsed.mobile-open .navLabel {
    font-size: 14px;
    line-height: 1;
    font-weight: 430;
  }

  .sidebar.mobile-open .navArrow,
  .sidebar.collapsed.mobile-open .navArrow {
    width: 15px;
    height: 15px;
  }

  .sidebar.mobile-open .sideFoot,
  .sidebar.collapsed.mobile-open .sideFoot {
    height: 62px;
    padding: 10px 18px;
    gap: 9px;
  }

  .sidebar.mobile-open .sideFoot .avatar,
  .sidebar.collapsed.mobile-open .sideFoot .avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 12px;
  }

  .sidebar.mobile-open .sideFootText b,
  .sidebar.collapsed.mobile-open .sideFootText b {
    font-size: 13px;
    line-height: 1.1;
  }

  .sidebar.mobile-open .sideFootText span,
  .sidebar.collapsed.mobile-open .sideFootText span {
    font-size: 12px;
    line-height: 1.1;
  }

  /* Contenido móvil: evitar cortes de datos */
  .dashTop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
  }

  .dashTop h1,
  .sectionHead h1 {
    font-size: 30px;
    line-height: 1.08;
  }

  .dashTop .btn,
  .sectionHead .btn {
    width: 100%;
    height: 44px;
    font-size: 15px;
  }

  .pageTabs {
    width: 100%;
    display: flex;
    overflow-x: auto;
    margin-bottom: 20px;
  }

  .pageTabs button {
    font-size: 15px;
    padding: 8px 13px;
    white-space: nowrap;
  }

  .cards,
  .cards[style],
  .cards[style*="grid-template"],
  .cards[style*="grid-template-columns"] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
  }

  .card {
    width: 100%;
    min-width: 0;
    padding: 20px;
    border-radius: 16px;
    overflow: hidden;
  }

  .balanceFeatured {
    min-height: auto;
    padding: 22px;
  }

  .cardTitle {
    font-size: 14px;
    line-height: 1.15;
  }

  .big {
    font-size: 30px;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
  }

  .sub {
    font-size: 13px;
  }

  .mainChartGrid,
  .chartsGrid,
  .grid2,
  .analyticsGrid,
  .reportGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
  }

  .chartCard {
    min-height: auto;
  }

  .svgChart {
    min-width: 0;
    width: 100%;
  }

  .sectionHead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .toolbar input,
  .toolbar select {
    width: 100%;
    max-width: none;
    height: 44px;
  }

  .table {
    width: 100%;
    overflow: hidden;
  }

  .tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
  }

  .tr .right,
  .right {
    text-align: left;
  }

  .amount,
  .mono {
    overflow-wrap: anywhere;
  }

  .listItem {
    align-items: flex-start;
  }

  /* Tarjetas/recurrentes: botones apilados y sin cortes */
  .list .card>div[style*="display:flex"] {
    flex-wrap: wrap;
  }

  .list .card button,
  .list .card .btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 6px;
  }

  .barLine {
    width: 100%;
  }

  .donutWrap {
    display: grid;
    justify-items: center;
  }
}

@media(max-width:420px) {
  .content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sidebar,
  .sidebar.collapsed {
    width: 84vw;
    max-width: 84vw;
  }

  .big {
    font-size: 27px;
  }

  .dashTop h1,
  .sectionHead h1 {
    font-size: 28px;
  }

  .topTabs {
    gap: 18px;
  }
}

.mobileMenuIconBtn {
  display: none;
}

@media(max-width:900px) {
  .topMenuBtn {
    grid-area: panel;
    order: initial;
    display: grid;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    margin: 0;
  }

  .mobileFirstDivider,
  .topDivider {
    grid-area: div;
    order: initial;
    display: block;
    width: 1px;
    height: 30px;
    margin: 0;
    background: var(--line);
  }

  .mobileMenuIconBtn {
    grid-area: menu;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--fg);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px rgba(15, 23, 42, .04);
  }

  .mobileMenuIconBtn span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--fg);
    border-radius: 999px;
    margin: 2px 0;
  }

  .mobileTopLogo {
    grid-area: logo;
    order: initial;
    justify-self: start;
    display: grid;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border: 0;
    background: transparent;
    padding: 4px;
    margin: 0;
    box-shadow: none;
  }

  .mobileTopLogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .topActions .circleAction {
    display: grid;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 999px;
  }

  .topActions .circleAction:nth-of-type(n+2) {
    display: none;
  }

  #logoutBtn2 {
    display: inline-flex;
    height: 42px;
    padding: 0 16px;
    font-size: 15px;
    border-radius: 12px;
  }

  .dashTop {
    margin-top: 0;
  }
}

@media(max-width:520px) {
  .topbar {
    grid-template-columns: 40px 1px 40px minmax(32px, 1fr) auto;
    grid-template-areas: "panel div menu logo actions"
      "search search search search search"
      "tabs tabs tabs tabs tabs";
    column-gap: 8px;
    padding: 9px 10px;
  }

  .topMenuBtn,
  .mobileMenuIconBtn,
  .mobileTopLogo {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .topActions .circleAction {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  #logoutBtn2 {
    height: 40px;
    padding: 0 13px;
    font-size: 14px;
  }

  .topTabs {
    gap: 20px;
  }

  .topTabs button {
    font-size: 14px;
  }
}

@media(max-width:900px) {
  .mobileMenuIconBtn {
    display: grid;
    place-items: center;
    color: var(--fg);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px rgba(15, 23, 42, .04);
  }

  .mobileMenuIconBtn .hambIcon {
    display: block;
    width: 20px;
    height: 20px;
    color: var(--fg);
    stroke: currentColor;
    opacity: 1;
    visibility: visible;
  }

  .mobileMenuIconBtn span {
    display: none;
  }
}

#bankBox.hidden,
#newBankBox.hidden {
  display: none;
}

@media(max-width:900px) {
  #bankBox.row {
    grid-template-columns: 1fr;
  }
}

.debtPanel {
  margin: 18px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
}

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

.debtPanelHead h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.debtPanelHead p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.debtPanelGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.debtTypeCard {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent), var(--card);
  border-radius: 16px;
  padding: 18px;
  min-width: 0;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.debtTypeCard:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

.debtTypeTop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.debtIcon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--card2);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: 0 0 42px;
}

.debtTypeTop h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.15;
}

.debtTypeTop p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.debtMetrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.debtMetrics div {
  background: var(--card2);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
}

.debtMetrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 7px;
}

.debtMetrics b {
  display: block;
  font-size: 20px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.debtFoot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.debtLoan .debtIcon {
  background: rgba(37, 99, 235, .10);
}

.debtFixed .debtIcon {
  background: rgba(245, 158, 11, .12);
}

.debtCard .debtIcon {
  background: rgba(139, 92, 246, .12);
}

@media(max-width:1180px) {
  .debtPanelGrid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:900px) {
  .debtPanel {
    padding: 16px;
    margin: 14px 0;
  }

  .debtPanelHead {
    flex-direction: column;
    align-items: stretch;
  }

  .debtPanelHead .btn {
    width: 100%;
  }

  .debtMetrics {
    grid-template-columns: 1fr;
  }

  .debtMetrics b {
    font-size: 24px;
  }
}

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

.debtOverviewCard {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.debtOverviewCard:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #2563eb;
}

.debtOverviewCard.fixed:before {
  background: #f59e0b;
}

.debtOverviewLabel {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.debtOverviewTitle {
  font-size: 15px;
  font-weight: 850;
  margin-bottom: 12px;
}

.debtOverviewAmount {
  font-size: 28px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.debtOverviewSub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
  font-weight: 650;
}

.debtPanelHead p {
  color: var(--muted);
  opacity: 1;
}

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

@media(max-width:900px) {
  .debtOverviewCards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .debtOverviewAmount {
    font-size: 26px;
  }
}

.debtPanel,
.debtTypeCard,
.debtOverviewCard {
  color: var(--fg);
}

.debtPanelHead h2,
.debtTypeTop h3,
.debtOverviewTitle {
  color: var(--fg);
  opacity: 1;
}

.debtPanelHead p,
.debtTypeTop p,
.debtMetrics span,
.debtFoot,
.debtFoot span,
.debtOverviewLabel,
.debtOverviewSub {
  color: var(--muted);
  opacity: 1;
  visibility: visible;
}

.debtMetrics b,
.debtOverviewAmount {
  color: var(--fg);
  opacity: 1;
  visibility: visible;
}

[data-theme="light"] .debtPanelHead p,
[data-theme="light"] .debtTypeTop p,
[data-theme="light"] .debtMetrics span,
[data-theme="light"] .debtFoot,
[data-theme="light"] .debtFoot span,
[data-theme="light"] .debtOverviewLabel,
[data-theme="light"] .debtOverviewSub {
  color: #475569;
  opacity: 1;
}

[data-theme="light"] .debtPanelHead h2,
[data-theme="light"] .debtTypeTop h3,
[data-theme="light"] .debtOverviewTitle,
[data-theme="light"] .debtMetrics b,
[data-theme="light"] .debtOverviewAmount {
  color: #0f172a;
  opacity: 1;
}

[data-theme="light"] .debtMetrics div {
  background: #f8fafc;
  border: 1px solid #e5eaf2;
}

[data-theme="light"] .debtTypeCard {
  background: #ffffff;
  border-color: #e1e7f0;
}

[data-theme="light"] .debtIcon {
  color: #0f172a;
}

.debtPanel {
  overflow: hidden;
}

.debtPanelGrid {
  align-items: stretch;
}

.debtTypeCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.debtMetrics {
  margin-top: 4px;
}

.debtFoot {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

@media(max-width:900px) {

  .debtPanelHead p,
  .debtTypeTop p,
  .debtMetrics span,
  .debtFoot span,
  .debtOverviewLabel,
  .debtOverviewSub {
    font-size: 12px;
  }

  .debtTypeTop h3 {
    font-size: 15px;
  }
}

.modernChartsPanel {
  margin: 18px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent), var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.modernChartsHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.modernChartsHead h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--fg);
}

.modernChartsHead p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.modernLegend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.modernLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.modernLegend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.kpiVisualGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kpiVisual {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  min-width: 0;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.kpiVisual:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.kpiVisualTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.kpiVisualTop span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.kpiVisualTop b {
  font-size: 18px;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-align: right;
}

.miniTrend {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.trendLine {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: drawTrend 1.3s ease forwards;
}

.trendArea {
  opacity: 0;
  animation: fadeInChart .9s ease .25s forwards;
}

.trendDot {
  opacity: 0;
  transform-origin: center;
  animation: popDot .5s ease 1.2s forwards;
}

.progressTrack {
  height: 8px;
  background: var(--card2);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}

.progressTrack i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: growBar .9s cubic-bezier(.2, .8, .2, 1) .2s forwards;
}

.debtPulse {
  height: 72px;
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(circle at center, rgba(37, 99, 235, .10), transparent 58%);
  border-radius: 14px;
  overflow: hidden;
}

.debtPulse span {
  position: absolute;
  width: max(36px, var(--size));
  height: max(36px, var(--size));
  border-radius: 999px;
  background: rgba(37, 99, 235, .14);
  animation: pulseDebt 1.8s ease-in-out infinite;
}

.debtPulse b,
.debtPulse small {
  position: relative;
  z-index: 1;
}

.debtPulse b {
  font-size: 16px;
  line-height: 1;
}

.debtPulse small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 26px;
  position: absolute;
}

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

.ringMetric {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  min-width: 0;
  transition: transform .18s ease, border-color .18s ease;
}

.ringMetric:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
}

.ringCircle {
  --deg: calc(var(--pct) * 3.6deg);
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: conic-gradient(var(--ring) 0deg, var(--ring) var(--deg), var(--card2) var(--deg) 360deg);
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 82px;
  animation: ringSpin .9s ease both;
}

.ringCircle:after {
  content: '';
  position: absolute;
  inset: 10px;
  background: var(--card);
  border-radius: 50%;
  border: 1px solid var(--line);
}

.ringCircle div {
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1;
}

.ringCircle b {
  display: block;
  font-size: 17px;
}

.ringCircle span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ringInfo {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.ringInfo strong {
  font-size: 19px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.ringInfo span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.modernBars {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 16px;
  padding: 18px;
  margin-top: 14px;
}

.modernBarsHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.modernBarsHead h3 {
  margin: 0;
  font-size: 17px;
}

.modernBarsHead span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.modernBarRows {
  display: grid;
  gap: 10px;
}

.modernBarRow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 12px;
  animation: fadeSlideUp .55s ease both;
  animation-delay: var(--delay);
}

.modernBarRow span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.modernBarRow b {
  text-align: right;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.modernBarTrack {
  position: relative;
  height: 22px;
  background: var(--card2);
  border-radius: 999px;
  overflow: hidden;
}

.modernBarTrack i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--w);
  transform: scaleX(0);
  transform-origin: left center;
  animation: growBar .85s cubic-bezier(.2, .8, .2, 1) forwards;
}

.modernBarTrack .in {
  left: 0;
  background: rgba(22, 163, 74, .85);
  border-radius: 999px 0 0 999px;
}

.modernBarTrack .out {
  right: 0;
  background: rgba(220, 38, 38, .80);
  transform-origin: right center;
  border-radius: 0 999px 999px 0;
}

.modernBarTrack:hover .in,
.modernBarTrack:hover .out {
  filter: brightness(1.08);
}

@keyframes growBar {
  to {
    transform: scaleX(1);
  }
}

@keyframes drawTrend {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeInChart {
  to {
    opacity: 1;
  }
}

@keyframes popDot {
  0% {
    opacity: 0;
    transform: scale(.4);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseDebt {

  0%,
  100% {
    transform: scale(.92);
    opacity: .55;
  }

  50% {
    transform: scale(1.08);
    opacity: .95;
  }
}

@keyframes ringSpin {
  0% {
    filter: blur(2px);
    transform: rotate(-12deg) scale(.96);
    opacity: .3;
  }

  100% {
    filter: blur(0);
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media(max-width:1180px) {

  .kpiVisualGrid,
  .ringGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:900px) {
  .modernChartsPanel {
    padding: 16px;
  }

  .modernChartsHead {
    flex-direction: column;
    align-items: stretch;
  }

  .kpiVisualGrid,
  .ringGrid {
    grid-template-columns: 1fr;
  }

  .modernBarRow {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .modernBarRow b {
    grid-column: 2;
    text-align: left;
  }

  .ringInfo strong {
    font-size: 22px;
  }
}

.modernChartsPanel {
  color: var(--fg);
}

.modernChartsPanel h2,
.modernChartsPanel h3,
.modernChartsPanel strong,
.modernChartsPanel b,
.modernChartsPanel .mono,
.modernChartsPanel .kpiVisualTop b,
.modernChartsPanel .ringInfo strong,
.modernChartsPanel .modernBarRow b {
  color: var(--fg);
  opacity: 1;
  visibility: visible;
}

.modernChartsPanel p,
.modernLegend,
.modernLegend span,
.kpiVisualTop span,
.ringInfo span,
.ringCircle span,
.modernBarsHead span,
.modernBarRow span,
.debtPulse small {
  color: var(--muted);
  opacity: 1;
  visibility: visible;
}

[data-theme="light"] .modernChartsPanel {
  background: #ffffff;
  border-color: #e1e7f0;
}

[data-theme="light"] .modernChartsPanel h2,
[data-theme="light"] .modernChartsPanel h3,
[data-theme="light"] .modernChartsPanel strong,
[data-theme="light"] .modernChartsPanel b,
[data-theme="light"] .modernChartsPanel .mono,
[data-theme="light"] .modernChartsPanel .modernBarRow b,
[data-theme="light"] .modernChartsPanel .kpiVisualTop b,
[data-theme="light"] .modernChartsPanel .ringInfo strong {
  color: #0f172a;
  opacity: 1;
}

[data-theme="light"] .modernChartsPanel p,
[data-theme="light"] .modernLegend,
[data-theme="light"] .modernLegend span,
[data-theme="light"] .kpiVisualTop span,
[data-theme="light"] .ringInfo span,
[data-theme="light"] .ringCircle span,
[data-theme="light"] .modernBarsHead span,
[data-theme="light"] .modernBarRow span,
[data-theme="light"] .debtPulse small {
  color: #475569;
  opacity: 1;
}

[data-theme="light"] .kpiVisual,
[data-theme="light"] .ringMetric,
[data-theme="light"] .modernBars {
  background: #ffffff;
  border-color: #e1e7f0;
}

[data-theme="light"] .progressTrack,
[data-theme="light"] .modernBarTrack {
  background: #eef2f7;
}

[data-theme="light"] .ringCircle:after {
  background: #ffffff;
  border-color: #e1e7f0;
}

[data-theme="light"] .debtPulse {
  background: radial-gradient(circle at center, rgba(37, 99, 235, .13), transparent 58%);
}

.modernChartsPanel .amount.income {
  color: #21A67A;
}

.modernChartsPanel .amount.expense {
  color: #E24A5A;
}

[data-theme="light"] .modernChartsPanel .amount.income {
  color: #21A67A;
}

[data-theme="light"] .modernChartsPanel .amount.expense {
  color: #E24A5A;
}

.modernChartsPanel .kpiVisualTop {
  min-height: 38px;
}

.modernChartsPanel .kpiVisualTop span {
  font-size: 12px;
  font-weight: 800;
}

.modernChartsPanel .kpiVisualTop b {
  font-size: 17px;
  font-weight: 900;
}

.modernChartsPanel .modernBarRow span {
  font-weight: 800;
}

.modernChartsPanel .modernBarRow b {
  font-weight: 850;
}

.modernChartsPanel .ringCircle b {
  color: var(--fg);
  opacity: 1;
}

[data-theme="light"] .modernChartsPanel .ringCircle b {
  color: #0f172a;
}

.modernChartsPanel .trendLine,
.modernChartsPanel .trendDot,
.modernChartsPanel .trendArea,
.modernChartsPanel .progressTrack i,
.modernChartsPanel .modernBarTrack i {
  opacity: 1;
  visibility: visible;
}

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

  .modernChartsPanel .modernBarRow b {
    grid-column: 1 / -1;
    text-align: left;
    padding-left: 54px;
  }
}

.monthlyCompareCard {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 18px;
  padding: 20px;
  margin-top: 14px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .04);
}

.monthlyCompareHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.monthlyCompareHead h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
  color: var(--fg);
}

.monthlyCompareHead p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.monthlyLegend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.monthlyLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.monthlyLegend i {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 999px;
}

.monthlyLegend .in {
  background: #21A67A;
}

.monthlyLegend .out {
  background: #E24A5A;
}

.monthlyLegend .net {
  background: var(--blue);
}

.monthlyCompareGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(64px, 1fr));
  gap: 12px;
  align-items: end;
  overflow-x: auto;
  padding: 8px 2px 4px;
  scrollbar-width: thin;
}

.monthGroup {
  min-width: 64px;
  display: grid;
  justify-items: center;
  gap: 8px;
  animation: fadeSlideUp .55s ease both;
  animation-delay: var(--delay);
}

.monthBars {
  height: 170px;
  width: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  padding: 10px 7px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(148, 163, 184, .10), rgba(148, 163, 184, .05));
  border: 1px solid var(--line);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.monthBars:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
  border-color: #cbd5e1;
}

.monthBars i {
  width: 13px;
  min-height: 4px;
  border-radius: 999px 999px 4px 4px;
  transform: scaleY(0);
  transform-origin: bottom center;
  animation: growMonthBar .9s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--delay) + .15s);
}

.incomeBar {
  height: var(--h);
  background: linear-gradient(180deg, #35C89A, #21A67A);
}

.expenseBar {
  height: var(--h);
  background: linear-gradient(180deg, #F26A78, #E24A5A);
}

.monthGroup strong {
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.monthGroup span {
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
  max-width: 82px;
}

.monthGroup .positive {
  color: #21A67A;
  font-weight: 850;
}

.monthGroup .negative {
  color: #E24A5A;
  font-weight: 850;
}

[data-theme="light"] .monthlyCompareCard {
  background: #ffffff;
  border-color: #e1e7f0;
}

[data-theme="light"] .monthlyCompareHead h3 {
  color: #0f172a;
}

[data-theme="light"] .monthlyCompareHead p,
[data-theme="light"] .monthlyLegend,
[data-theme="light"] .monthGroup strong {
  color: #475569;
}

@keyframes growMonthBar {
  to {
    transform: scaleY(1);
  }
}

@media(max-width:900px) {
  .monthlyCompareCard {
    padding: 16px;
  }

  .monthlyCompareHead {
    flex-direction: column;
    align-items: stretch;
  }

  .monthlyCompareGrid {
    grid-template-columns: repeat(12, 72px);
    gap: 10px;
  }

  .monthBars {
    height: 150px;
    width: 46px;
  }
}

.visualAnalysisPanel {
  margin: 18px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow);
  color: var(--fg);
}

.visualAnalysisHead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.visualAnalysisHead h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--fg);
}

.visualAnalysisHead p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

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

.metricVisualCard {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 17px;
  background: var(--card);
  min-width: 0;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.metricVisualCard:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.metricVisualCard span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 10px;
}

.metricVisualCard b {
  display: block;
  color: var(--fg);
  font-size: 25px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.metricVisualCard small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-top: 9px;
}

.metricProgress {
  height: 9px;
  background: var(--card2);
  border-radius: 999px;
  margin-top: 14px;
  overflow: hidden;
}

.metricProgress i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: growBar .9s cubic-bezier(.2, .8, .2, 1) forwards;
}

.metricVisualCard.income .metricProgress i {
  background: #21A67A;
}

.metricVisualCard.expense .metricProgress i {
  background: #E24A5A;
}

.metricVisualCard.net.positive .metricProgress i {
  background: #21A67A;
}

.metricVisualCard.net.negative .metricProgress i {
  background: #E24A5A;
}

.metricVisualCard.debt .metricProgress i {
  background: var(--blue);
}

.metricVisualCard.income b {
  color: #21A67A;
}

.metricVisualCard.expense b {
  color: #E24A5A;
}

.metricVisualCard.net.positive b {
  color: #21A67A;
}

.metricVisualCard.net.negative b {
  color: #E24A5A;
}

.metricVisualCard.debt b {
  color: var(--blue);
}

.visualSplitGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 14px;
}

.netLineCard,
.topExpensesCard,
.upgradedExpenseCard,
.upgradedDebtChart {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .04);
  min-width: 0;
}

.netLineSvg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.netLinePath {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawTrend 1.3s ease forwards;
}

.netDot {
  opacity: 0;
  animation: popDot .45s ease 1s forwards;
  stroke: var(--card);
  stroke-width: 2;
}

.netDot.positive {
  fill: #21A67A;
}

.netDot.negative {
  fill: #E24A5A;
}

.topExpenseRows {
  display: grid;
  gap: 13px;
}

.topExpenseRow {
  animation: fadeSlideUp .5s ease both;
  animation-delay: var(--delay);
}

.topExpenseHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--fg);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 7px;
}

.topExpenseHead b {
  color: var(--fg);
  overflow-wrap: anywhere;
}

.topExpenseBar,
.expenseDistBar {
  height: 10px;
  background: var(--card2);
  border-radius: 999px;
  overflow: hidden;
}

.topExpenseBar i,
.expenseDistBar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: growBar .85s cubic-bezier(.2, .8, .2, 1) forwards;
}

.upgradedChartCard .chartHeader,
.upgradedExpenseCard .chartHeader,
.upgradedDebtChart .chartHeader {
  align-items: flex-start;
}

.upgradedSvgChart .animatedSvgBar {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
  animation: growSvgBar .9s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: var(--delay);
  cursor: pointer;
}

.upgradedSvgChart .animatedSvgBar:hover {
  filter: brightness(1.08) drop-shadow(0 8px 8px rgba(15, 23, 42, .15));
  opacity: .95;
}

.monthlySvgGroup .netMonth {
  font-size: 10px;
  font-weight: 800;
}

.netPositive {
  fill: #21A67A;
  color: #21A67A;
}

.netNegative {
  fill: #E24A5A;
  color: #E24A5A;
}

.expenseDistLayout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.modernDonut {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  animation: ringSpin .9s ease both;
  margin: auto;
}

.modernDonut:after {
  content: '';
  position: absolute;
  inset: 36px;
  background: var(--card);
  border-radius: 50%;
  border: 1px solid var(--line);
}

.modernDonut .donutCenter {
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  gap: 4px;
}

.modernDonut .donutCenter b {
  color: var(--fg);
  font-size: 21px;
  line-height: 1.05;
  max-width: 130px;
  overflow-wrap: anywhere;
}

.modernDonut .donutCenter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.expenseDistRows {
  display: grid;
  gap: 12px;
}

.expenseDistRow {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 1.2fr) 112px 54px;
  gap: 10px;
  align-items: center;
  animation: fadeSlideUp .5s ease both;
  animation-delay: var(--delay);
}

.expenseDistName {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--fg);
  min-width: 0;
}

.expenseDistName span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expenseDistRow b {
  color: var(--fg);
  font-size: 13px;
  text-align: right;
}

.expenseDistRow small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.debtChartLayout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.debtDonut {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  animation: ringSpin .9s ease both;
  margin: auto;
}

.debtDonut:after {
  content: '';
  position: absolute;
  inset: 32px;
  background: var(--card);
  border-radius: 50%;
  border: 1px solid var(--line);
}

.debtDonut div {
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  gap: 4px;
}

.debtDonut b {
  color: var(--fg);
  font-size: 18px;
  line-height: 1.05;
  max-width: 110px;
  overflow-wrap: anywhere;
}

.debtDonut span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.debtTypeRows {
  display: grid;
  gap: 13px;
}

.debtTypeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 115px;
  gap: 10px;
  align-items: center;
  animation: fadeSlideUp .5s ease both;
  animation-delay: var(--delay);
}

.debtTypeRow>div:first-child {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.debtColor {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.debtTypeRow strong {
  color: var(--fg);
  font-size: 13px;
  line-height: 1.1;
}

.debtTypeRow small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.debtTypeRow b {
  color: var(--fg);
  font-size: 13px;
  text-align: right;
}

.debtTypeRow .barLine {
  grid-column: 1 / -1;
  height: 9px;
}

.monthlyCompareCard {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 18px;
  padding: 20px;
  margin-top: 14px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .04);
}

.monthlyCompareHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.monthlyCompareHead h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
  color: var(--fg);
}

.monthlyCompareHead p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.monthlyLegend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.monthlyLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.monthlyLegend i {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 999px;
}

.monthlyLegend .in {
  background: #21A67A;
}

.monthlyLegend .out {
  background: #E24A5A;
}

.monthlyLegend .net {
  background: var(--blue);
}

.monthlyCompareGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(64px, 1fr));
  gap: 12px;
  align-items: end;
  overflow-x: auto;
  padding: 8px 2px 4px;
  scrollbar-width: thin;
}

.monthGroup {
  min-width: 64px;
  display: grid;
  justify-items: center;
  gap: 8px;
  animation: fadeSlideUp .55s ease both;
  animation-delay: var(--delay);
}

.monthBars {
  height: 170px;
  width: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  padding: 10px 7px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(148, 163, 184, .10), rgba(148, 163, 184, .05));
  border: 1px solid var(--line);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.monthBars:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
  border-color: #cbd5e1;
}

.monthBars i {
  width: 13px;
  min-height: 4px;
  border-radius: 999px 999px 4px 4px;
  transform: scaleY(0);
  transform-origin: bottom center;
  animation: growMonthBar .9s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--delay) + .15s);
}

.incomeBar {
  height: var(--h);
  background: linear-gradient(180deg, #35C89A, #21A67A);
}

.expenseBar {
  height: var(--h);
  background: linear-gradient(180deg, #F26A78, #E24A5A);
}

.monthGroup strong {
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.monthGroup span {
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
  max-width: 82px;
}

.monthGroup .positive {
  color: #21A67A;
  font-weight: 850;
}

.monthGroup .negative {
  color: #E24A5A;
  font-weight: 850;
}

@keyframes growSvgBar {
  to {
    transform: scaleY(1);
  }
}

@keyframes growMonthBar {
  to {
    transform: scaleY(1);
  }
}

[data-theme="light"] .visualAnalysisPanel,
[data-theme="light"] .netLineCard,
[data-theme="light"] .topExpensesCard,
[data-theme="light"] .upgradedExpenseCard,
[data-theme="light"] .upgradedDebtChart,
[data-theme="light"] .monthlyCompareCard,
[data-theme="light"] .metricVisualCard {
  background: #ffffff;
  border-color: #e1e7f0;
}

[data-theme="light"] .visualAnalysisPanel h2,
[data-theme="light"] .visualAnalysisPanel h3,
[data-theme="light"] .visualAnalysisPanel b,
[data-theme="light"] .visualAnalysisPanel strong,
[data-theme="light"] .upgradedExpenseCard b,
[data-theme="light"] .upgradedDebtChart b {
  color: #0f172a;
}

[data-theme="light"] .visualAnalysisPanel p,
[data-theme="light"] .visualAnalysisPanel small,
[data-theme="light"] .visualAnalysisPanel span,
[data-theme="light"] .upgradedExpenseCard small,
[data-theme="light"] .upgradedDebtChart small {
  color: #475569;
}

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

  .visualSplitGrid,
  .expenseDistLayout,
  .debtChartLayout {
    grid-template-columns: 1fr;
  }

  .modernDonut,
  .debtDonut {
    margin: 0 auto;
  }

  .expenseDistRow {
    grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr) 105px 50px;
  }
}

@media(max-width:900px) {
  .visualAnalysisPanel {
    padding: 16px;
  }

  .visualAnalysisHead,
  .monthlyCompareHead {
    flex-direction: column;
    align-items: stretch;
  }

  .metricVisualCards {
    grid-template-columns: 1fr;
  }

  .expenseDistRow {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .expenseDistRow b,
  .expenseDistRow small {
    text-align: left;
  }

  .debtTypeRow {
    grid-template-columns: 1fr;
  }

  .debtTypeRow b {
    text-align: left;
  }

  .monthlyCompareGrid {
    grid-template-columns: repeat(12, 72px);
    gap: 10px;
  }

  .monthBars {
    height: 150px;
    width: 46px;
  }
}

[data-theme="light"] .visualAnalysisPanel,
[data-theme="light"] .expense3DCard,
[data-theme="light"] .debt3DCard,
[data-theme="light"] .netLineCard,
[data-theme="light"] .topExpensesCard,
[data-theme="light"] .upgradedChartCard,
[data-theme="light"] .monthlyCompareCard {
  background: #ffffff;
  border-color: #dce5f2;
  color: #0f172a;
}

.visualAnalysisPanel h2,
.visualAnalysisPanel h3,
.visualAnalysisPanel .cardTitle,
.expense3DCard .cardTitle,
.debt3DCard .cardTitle,
.monthlyCompareCard .cardTitle,
.topExpensesCard .cardTitle,
.netLineCard .cardTitle,
.upgradedChartCard .cardTitle {
  color: #0f172a;
  opacity: 1;
  visibility: visible;
}

.visualAnalysisPanel p,
.visualAnalysisPanel .sub,
.visualAnalysisPanel small,
.expense3DCard .sub,
.debt3DCard .sub,
.monthlyCompareCard .sub,
.topExpensesCard .sub,
.netLineCard .sub,
.upgradedChartCard .sub {
  color: #52637a;
  opacity: 1;
  visibility: visible;
}

[data-theme="dark"] .visualAnalysisPanel h2,
[data-theme="dark"] .visualAnalysisPanel h3,
[data-theme="dark"] .visualAnalysisPanel .cardTitle,
[data-theme="dark"] .expense3DCard .cardTitle,
[data-theme="dark"] .debt3DCard .cardTitle {
  color: var(--fg);
}

[data-theme="dark"] .visualAnalysisPanel p,
[data-theme="dark"] .visualAnalysisPanel .sub,
[data-theme="dark"] .visualAnalysisPanel small,
[data-theme="dark"] .expense3DCard .sub,
[data-theme="dark"] .debt3DCard .sub {
  color: var(--muted);
}

.metricVisualCard span,
.metricVisualCard small {
  color: #52637a;
  opacity: 1;
}

.metricVisualCard b {
  color: #0f172a;
  opacity: 1;
}

.metricVisualCard.income b {
  color: #21A67A;
}

.metricVisualCard.expense b {
  color: #E24A5A;
}

.metricVisualCard.net.positive b {
  color: #21A67A;
}

.metricVisualCard.net.negative b {
  color: #E24A5A;
}

.metricVisualCard.debt b {
  color: #2F6BFF;
}

.metricVisualCard.income .metricProgress i {
  background: #21A67A;
}

.metricVisualCard.expense .metricProgress i {
  background: #E24A5A;
}

.metricVisualCard.net.positive .metricProgress i {
  background: #21A67A;
}

.metricVisualCard.net.negative .metricProgress i {
  background: #E24A5A;
}

.metricVisualCard.debt .metricProgress i {
  background: #2F6BFF;
}

.expense3DCard,
.debt3DCard {
  overflow: visible;
  position: relative;
}

.expense3DLayout,
.debt3DLayout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  overflow: visible;
  padding: 8px 0 4px;
}

.debt3DLayout {
  grid-template-columns: 250px minmax(0, 1fr);
}

.pie3DWrap {
  width: 280px;
  min-height: 240px;
  display: grid;
  place-items: center;
  position: relative;
  perspective: 900px;
  overflow: visible;
}

.pie3DWrap.small {
  width: 230px;
  min-height: 210px;
}

.pie3DShadow {
  position: absolute;
  width: 78%;
  height: 34px;
  bottom: 18px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .18);
  filter: blur(18px);
  transform: rotateX(68deg);
  opacity: .55;
}

.pie3D {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  transform: rotateX(58deg) rotateZ(-18deg);
  transform-style: preserve-3d;
  box-shadow: 0 16px 0 rgba(15, 23, 42, .13),
    0 28px 40px rgba(15, 23, 42, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .45);
  animation: pie3DIn .9s ease both;
  transition: transform .22s ease, filter .22s ease;
}

.pie3D:hover {
  transform: rotateX(52deg) rotateZ(-18deg) translateY(-5px);
  filter: saturate(1.05) contrast(1.03);
}

.pie3D.debtPie {
  width: 190px;
  height: 190px;
}

.pie3D:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .35), transparent 42%, rgba(0, 0, 0, .12));
  pointer-events: none;
}

.pie3DCenter {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #dce5f2;
  box-shadow: inset 0 0 16px rgba(15, 23, 42, .05), 0 8px 18px rgba(15, 23, 42, .10);
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 14px;
  transform: translateZ(12px);
}

.debtPie .pie3DCenter {
  width: 96px;
  height: 96px;
  padding: 10px;
}

.pie3DCenter b {
  display: block;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.05;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.debtPie .pie3DCenter b {
  font-size: 16px;
}

.pie3DCenter span {
  display: block;
  color: #52637a;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 750;
  margin-top: 4px;
}

.pieHotspot {
  position: absolute;
  width: 44%;
  height: 44%;
  z-index: 5;
  cursor: pointer;
}

.pieHotspot.h1 {
  top: 0;
  right: 4%;
}

.pieHotspot.h2 {
  right: 0;
  bottom: 12%;
}

.pieHotspot.h3 {
  bottom: 0;
  left: 28%;
}

.pieHotspot.h4 {
  left: 0;
  bottom: 18%;
}

.pieHotspot.h5 {
  top: 12%;
  left: 0;
}

.pieHotspot.h6 {
  top: 0;
  left: 28%;
}

.pieHotspot.h7 {
  top: 28%;
  left: 28%;
}

.pieHotspot:hover:after,
.expense3DRow:hover:after,
.debt3DRow:hover:after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) rotateX(-58deg);
  background: #0f172a;
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .22);
  z-index: 30;
  pointer-events: none;
}

.expense3DRow,
.debt3DRow {
  position: relative;
}

.expense3DRows,
.debt3DRows {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.expense3DRow {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(160px, 1.2fr) 118px 60px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .16s ease, transform .16s ease;
  animation: fadeSlideUp .5s ease both;
  animation-delay: var(--delay);
}

.expense3DRow:hover,
.debt3DRow:hover {
  background: #f8fafc;
  transform: translateX(2px);
}

.expense3DName {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
}

.expense3DName i,
.debt3DName i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c);
  flex: 0 0 11px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent);
}

.expense3DName span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense3DBar,
.debt3DBar {
  height: 11px;
  background: #edf2f7;
  border-radius: 999px;
  overflow: hidden;
}

.expense3DBar em,
.debt3DBar em {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--c);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: growBar .85s cubic-bezier(.2, .8, .2, 1) forwards;
}

.expense3DRow strong,
.expense3DRow small {
  color: #0f172a;
  opacity: 1;
  text-align: right;
  font-weight: 850;
}

.expense3DRow small {
  color: #52637a;
  font-size: 12px;
}

.debt3DRows {
  gap: 14px;
}

.debt3DRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  animation: fadeSlideUp .5s ease both;
  animation-delay: var(--delay);
}

.debt3DName {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.debt3DName span {
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debt3DName small {
  grid-column: 2;
  color: #52637a;
  font-size: 12px;
  font-weight: 750;
}

.debt3DRow b {
  color: #0f172a;
  font-size: 14px;
  text-align: right;
}

.debt3DBar {
  grid-column: 1 / -1;
}

.topExpenseHead span,
.topExpenseHead b,
.expenseDistName,
.expenseDistRow b,
.debtTypeRow strong,
.debtTypeRow b {
  color: #0f172a;
  opacity: 1;
}

.monthGroup strong,
.axisText,
.modernLegend,
.monthlyLegend {
  color: #52637a;
  fill: #52637a;
  opacity: 1;
}

.legendItem,
.modernLegend span,
.monthlyLegend span {
  color: #334155;
  opacity: 1;
}

@keyframes pie3DIn {
  0% {
    opacity: 0;
    transform: rotateX(62deg) rotateZ(-22deg) scale(.88);
  }

  100% {
    opacity: 1;
    transform: rotateX(58deg) rotateZ(-18deg) scale(1);
  }
}

@media(max-width:1180px) {

  .expense3DLayout,
  .debt3DLayout {
    grid-template-columns: 1fr;
  }

  .pie3DWrap,
  .pie3DWrap.small {
    width: 100%;
  }

  .expense3DRow {
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) 110px 54px;
  }
}

@media(max-width:900px) {
  .pie3D {
    width: 200px;
    height: 200px;
  }

  .pie3D.debtPie {
    width: 180px;
    height: 180px;
  }

  .pie3DCenter {
    width: 102px;
    height: 102px;
  }

  .expense3DRow {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px;
  }

  .expense3DRow strong,
  .expense3DRow small {
    text-align: left;
  }

  .debt3DRow {
    grid-template-columns: 1fr;
  }

  .debt3DRow b {
    text-align: left;
  }

  .pieHotspot:hover:after,
  .expense3DRow:hover:after,
  .debt3DRow:hover:after {
    display: none;
  }
}

.chartsGrid {
  align-items: stretch;
}

.expense3DCard,
.debt3DCard {
  border-radius: 24px;
  padding: 26px;
  background: radial-gradient(circle at 18% 10%, rgba(47, 107, 255, .06), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid #d9e3f2;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .06),
    0 2px 4px rgba(15, 23, 42, .03);
  overflow: hidden;
  min-height: 440px;
}

.expense3DCard .chartHeader,
.debt3DCard .chartHeader {
  margin-bottom: 18px;
}

.expense3DCard .cardTitle,
.debt3DCard .cardTitle {
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: #0f172a;
  font-weight: 900;
}

.expense3DCard .sub,
.debt3DCard .sub {
  color: #64748b;
  font-size: 14px;
  margin-top: 7px;
  font-weight: 500;
}

.expense3DLayout {
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  min-height: 310px;
}

.debt3DLayout {
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 310px;
}

.pie3DWrap {
  width: 330px;
  min-height: 280px;
  justify-self: center;
  isolation: isolate;
}

.pie3DWrap.small {
  width: 285px;
  min-height: 260px;
}

.pie3DShadow {
  width: 76%;
  height: 30px;
  bottom: 28px;
  background: rgba(15, 23, 42, .20);
  filter: blur(16px);
  opacity: .42;
}

.pie3D {
  width: 260px;
  height: 260px;
  transform: rotateX(50deg) rotateZ(-16deg);
  box-shadow: 0 18px 0 rgba(15, 23, 42, .12),
    0 32px 48px rgba(15, 23, 42, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .55);
  outline: 1px solid rgba(255, 255, 255, .55);
}

.pie3D.debtPie {
  width: 225px;
  height: 225px;
}

.pie3D:hover {
  transform: rotateX(46deg) rotateZ(-16deg) translateY(-4px);
}

.pie3D:before {
  background: linear-gradient(145deg, rgba(255, 255, 255, .46), transparent 34%, rgba(15, 23, 42, .10) 72%, rgba(15, 23, 42, .18));
  mix-blend-mode: soft-light;
}

.pie3DCenter {
  width: 116px;
  height: 116px;
  padding: 12px;
  transform: rotateX(-50deg) rotateZ(16deg) translateZ(18px);
  background: rgba(255, 255, 255, .96);
  border: 1px solid #dbe5f3;
  box-shadow: inset 0 0 18px rgba(15, 23, 42, .04),
    0 12px 24px rgba(15, 23, 42, .12);
}

.debtPie .pie3DCenter {
  width: 104px;
  height: 104px;
}

.pie3DCenter b {
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #0f172a;
  transform: none;
}

.debtPie .pie3DCenter b {
  font-size: 15px;
}

.pie3DCenter span {
  font-size: 10px;
  color: #64748b;
  font-weight: 800;
  text-transform: lowercase;
}

.expense3DRows,
.debt3DRows {
  gap: 12px;
  align-content: center;
}

.expense3DRow {
  grid-template-columns: minmax(210px, 1.15fr) minmax(140px, .9fr) 112px 54px;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(248, 250, 252, .70);
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .55);
}

.expense3DRow:hover {
  background: #ffffff;
  border-color: #dbe5f3;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .07);
  transform: translateX(0) translateY(-1px);
}

.expense3DName {
  gap: 10px;
  font-size: 14px;
  min-width: 0;
}

.expense3DName i,
.debt3DName i {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent);
}

.expense3DName span {
  color: #0f172a;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense3DBar,
.debt3DBar {
  height: 12px;
  background: #edf2f7;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
}

.expense3DBar em,
.debt3DBar em {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 88%, #ffffff 12%), var(--c));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 24%, transparent);
}

.expense3DRow strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.expense3DRow small {
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.debt3DRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(248, 250, 252, .78);
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .65);
  border: 1px solid transparent;
}

.debt3DRow:hover {
  background: #ffffff;
  border-color: #dbe5f3;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}

.debt3DName {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  min-width: 0;
}

.debt3DName span {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.15;
}

.debt3DName small {
  grid-column: 2 / 4;
  color: #52637a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}

.debt3DRow b {
  justify-self: end;
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.debt3DRow .debt3DBar {
  width: 100%;
  grid-column: 1;
}

.pieHotspot:hover:after,
.expense3DRow:hover:after,
.debt3DRow:hover:after {
  background: #101827;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .28);
  font-size: 12px;
  z-index: 80;
}

/* Mejorar tarjetas visuales superiores */
.visualAnalysisPanel {
  background: radial-gradient(circle at 5% 10%, rgba(47, 107, 255, .045), transparent 30%),
    #ffffff;
  border-color: #dce5f2;
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .05);
}

.metricVisualCard {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-color: #dfe8f5;
  border-radius: 18px;
}

.metricVisualCard span {
  color: #41526a;
  opacity: 1;
}

.metricVisualCard small {
  color: #52637a;
  opacity: 1;
}

@media(max-width:1360px) {

  .expense3DLayout,
  .debt3DLayout {
    grid-template-columns: 1fr;
  }

  .expense3DRow {
    grid-template-columns: minmax(190px, 1fr) minmax(130px, .8fr) 110px 52px;
  }

  .debt3DRow b {
    justify-self: start;
  }
}

@media(max-width:900px) {

  .expense3DCard,
  .debt3DCard {
    padding: 18px;
    min-height: auto;
  }

  .pie3DWrap,
  .pie3DWrap.small {
    width: 100%;
    min-height: 230px;
  }

  .pie3D {
    width: 210px;
    height: 210px;
  }

  .pie3D.debtPie {
    width: 200px;
    height: 200px;
  }

  .pie3DCenter {
    width: 96px;
    height: 96px;
  }

  .expense3DRow {
    grid-template-columns: 1fr;
  }

  .expense3DRow strong,
  .expense3DRow small {
    text-align: left;
  }
}

.chartJsDoughnutCard {
  border-radius: 24px;
  padding: 26px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid #d9e3f2;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .03);
  min-height: 430px;
  overflow: hidden;
}

.chartJsDoughnutCard .cardTitle {
  color: #0f172a;
  font-size: 22px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.035em;
}

.chartJsDoughnutCard .sub {
  color: #64748b;
  font-size: 14px;
  margin-top: 7px;
  font-weight: 500;
}

.chartJsDoughnutLayout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding-top: 14px;
}

.chartJsDoughnutLayout.debt {
  grid-template-columns: 280px minmax(0, 1fr);
}

.chartJsCanvasBox {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border-radius: 28px;
  background: radial-gradient(circle at center, rgba(47, 107, 255, .05), transparent 58%);
}

.chartJsDoughnutLayout.debt .chartJsCanvasBox {
  width: 250px;
  height: 250px;
}

.chartJsCanvasBox canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 18px 22px rgba(15, 23, 42, .12));
}

.chartJsFallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  padding: 18px;
  background: #f8fafc;
  border: 1px dashed #d9e3f2;
  border-radius: 18px;
}

.chartJsLegendRows {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.chartJsLegendRow {
  display: grid;
  grid-template-columns: minmax(210px, 1.15fr) minmax(150px, .9fr) 118px 54px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(248, 250, 252, .78);
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .65);
  animation: fadeSlideUp .5s ease both;
  animation-delay: var(--delay);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.chartJsLegendRow.debt {
  grid-template-columns: minmax(210px, 1fr) 120px 54px;
}

.chartJsLegendRow:hover {
  background: #ffffff;
  border-color: #dbe5f3;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}

.legendLabel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
}

.legendLabel i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c);
  flex: 0 0 12px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent);
}

.legendLabel span {
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legendSub {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  margin-left: 22px;
  margin-top: -6px;
}

.legendBar {
  height: 12px;
  background: #edf2f7;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
}

.legendBar em {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 88%, #ffffff 12%), var(--c));
  border-radius: 999px;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 24%, transparent);
  transform-origin: left center;
  animation: growBar .85s cubic-bezier(.2, .8, .2, 1) forwards;
}

.chartJsLegendRow b {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  text-align: right;
}

.chartJsLegendRow small {
  color: #52637a;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  text-align: right;
}

[data-theme="dark"] .chartJsDoughnutCard {
  background: var(--card);
  border-color: var(--line);
}

[data-theme="dark"] .chartJsDoughnutCard .cardTitle,
[data-theme="dark"] .legendLabel,
[data-theme="dark"] .legendLabel span,
[data-theme="dark"] .chartJsLegendRow b {
  color: var(--fg);
}

[data-theme="dark"] .chartJsDoughnutCard .sub,
[data-theme="dark"] .chartJsLegendRow small,
[data-theme="dark"] .legendSub {
  color: var(--muted);
}

[data-theme="dark"] .chartJsLegendRow {
  background: rgba(15, 23, 42, .22);
}

@media(max-width:1360px) {

  .chartJsDoughnutLayout,
  .chartJsDoughnutLayout.debt {
    grid-template-columns: 1fr;
  }

  .chartJsCanvasBox,
  .chartJsDoughnutLayout.debt .chartJsCanvasBox {
    width: 280px;
    height: 280px;
  }

  .chartJsLegendRow,
  .chartJsLegendRow.debt {
    grid-template-columns: minmax(190px, 1fr) minmax(130px, .8fr) 110px 52px;
  }

  .chartJsLegendRow.debt .legendSub {
    grid-column: 1 / -1;
  }
}

@media(max-width:900px) {
  .chartJsDoughnutCard {
    padding: 18px;
    min-height: auto;
  }

  .chartJsCanvasBox,
  .chartJsDoughnutLayout.debt .chartJsCanvasBox {
    width: min(260px, 72vw);
    height: min(260px, 72vw);
  }

  .chartJsLegendRow,
  .chartJsLegendRow.debt {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .chartJsLegendRow b,
  .chartJsLegendRow small {
    text-align: left;
  }

  .legendSub {
    margin-left: 22px;
  }
}

.cardDebtSummaryCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.cardDebtSummaryCard {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cardColor, var(--blue));
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.cardDebtSummaryTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.cardDebtSummaryTop span {
  font-weight: 900;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardDebtSummaryTop b {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.cardDebtSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cardDebtSummaryGrid small,
.cardDebtMetaGrid span,
.cardDebtFilterMeta span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 5px;
}

.cardDebtSummaryGrid strong,
.cardDebtMetaGrid b,
.cardDebtFilterMeta b {
  color: var(--fg);
  font-size: 16px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.cardDebtFilterPanel {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
}

.cardDebtFilterPanel label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 7px;
}

.cardDebtFilterPanel select {
  width: 100%;
}

.cardDebtFilterMeta {
  background: var(--card2);
  border-radius: 12px;
  padding: 11px 14px;
  min-width: 170px;
}

.cardDebtListItem {
  padding: 18px;
}

.cardDebtListMain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 18px;
  align-items: stretch;
}

.cardDebtInfo {
  min-width: 0;
}

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

.cardDebtMetaGrid div {
  background: var(--card2);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}

.cardDebtActionsRight {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.cardDebtActionsRight .btn {
  width: 100%;
  justify-content: center;
  white-space: normal;
  min-height: 38px;
}

@media(max-width:1200px) {
  .cardDebtSummaryCards {
    grid-template-columns: 1fr;
  }

  .cardDebtSummaryGrid {
    grid-template-columns: 1fr;
  }

  .cardDebtFilterPanel {
    grid-template-columns: 1fr;
  }

  .cardDebtListMain {
    grid-template-columns: 1fr;
  }

  .cardDebtActionsRight {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 14px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .cardDebtActionsRight .btn {
    width: auto;
  }
}

@media(max-width:700px) {
  .cardDebtMetaGrid {
    grid-template-columns: 1fr;
  }

  .cardDebtActionsRight {
    flex-direction: column;
  }

  .cardDebtActionsRight .btn {
    width: 100%;
  }
}

.cardDebtSummaryCards,
.cardDebtFilterPanel,
.cardDebtListItem {
  color: var(--foreground);
}

.cardDebtSummaryCard,
.cardDebtFilterPanel,
.cardDebtListItem,
.cardDebtMetaGrid div,
.cardDebtFilterMeta {
  opacity: 1;
  visibility: visible;
}

.cardDebtSummaryTop span,
.cardDebtSummaryGrid strong,
.cardDebtFilterMeta b,
.cardDebtMetaGrid b,
.cardDebtListItem h3,
.cardDebtListItem .cardTitle,
.cardDebtListItem .mono,
.cardDebtListItem strong,
.cardDebtListItem b {
  color: var(--foreground);
  opacity: 1;
  visibility: visible;
}

.cardDebtSummaryTop b,
.cardDebtSummaryGrid small,
.cardDebtFilterPanel label,
.cardDebtFilterMeta span,
.cardDebtMetaGrid span,
.cardDebtListItem .sub,
.cardDebtListItem .muted,
.cardDebtInfo .sub,
.cardDebtInfo small {
  color: var(--muted-foreground);
  opacity: 1;
  visibility: visible;
}

.cardDebtMetaGrid div,
.cardDebtFilterMeta {
  background: var(--muted);
  border: 1px solid var(--border);
}

.cardDebtFilterPanel select,
.cardDebtFilterPanel option {
  color: var(--foreground);
  background: var(--card);
}

[data-theme="light"] .cardDebtSummaryCard,
[data-theme="light"] .cardDebtFilterPanel,
[data-theme="light"] .cardDebtListItem {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .cardDebtMetaGrid div,
[data-theme="light"] .cardDebtFilterMeta {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .cardDebtSummaryTop span,
[data-theme="light"] .cardDebtSummaryGrid strong,
[data-theme="light"] .cardDebtFilterMeta b,
[data-theme="light"] .cardDebtMetaGrid b,
[data-theme="light"] .cardDebtListItem h3,
[data-theme="light"] .cardDebtListItem .cardTitle,
[data-theme="light"] .cardDebtListItem .mono,
[data-theme="light"] .cardDebtListItem strong,
[data-theme="light"] .cardDebtListItem b {
  color: #0f172a;
  opacity: 1;
}

[data-theme="light"] .cardDebtSummaryTop b,
[data-theme="light"] .cardDebtSummaryGrid small,
[data-theme="light"] .cardDebtFilterPanel label,
[data-theme="light"] .cardDebtFilterMeta span,
[data-theme="light"] .cardDebtMetaGrid span,
[data-theme="light"] .cardDebtListItem .sub,
[data-theme="light"] .cardDebtListItem .muted,
[data-theme="light"] .cardDebtInfo .sub,
[data-theme="light"] .cardDebtInfo small {
  color: #475569;
  opacity: 1;
}

[data-theme="light"] .cardDebtActionsRight {
  border-left-color: #e2e8f0;
}

[data-theme="dark"] .cardDebtMetaGrid div,
[data-theme="dark"] .cardDebtFilterMeta {
  background: rgba(148, 163, 184, .08);
  border-color: var(--border);
}

/* Evita que textos pequeños de deuda se pierdan por herencia de estilos previos */
.cardDebtSummaryCards *:not(.btn),
.cardDebtFilterPanel *:not(.btn),
.cardDebtListItem *:not(.btn) {
  text-shadow: none;
}

/* ajuste mínimo para mostrar pago mes actual sin alterar diseño general */
.cardDebtSummaryGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cardDebtFilterPanel {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px) auto auto auto;
}

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

  .cardDebtFilterPanel {
    grid-template-columns: 1fr 1fr;
  }

  .cardDebtFilterPanel>div:first-child {
    grid-column: 1/-1;
  }
}

@media(max-width:700px) {
  .cardDebtSummaryGrid {
    grid-template-columns: 1fr;
  }

  .cardDebtFilterPanel {
    grid-template-columns: 1fr;
  }

  .cardDebtFilterPanel>div:first-child {
    grid-column: auto;
  }
}