/* Income / Expense summary: application theme across desktop, tablet and phone. */
body.theme-pro #app-screen .income-expense-ring-card {
  color: #f6f9fd !important;
  border: 2px solid rgba(105, 165, 215, 0.44) !important;
  background: linear-gradient(150deg, #1b2d47 0%, #101d31 100%) !important;
  box-shadow: 0 6px 0 #07131f, 0 18px 30px rgba(2, 9, 20, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
}

body.theme-pro #app-screen .income-expense-ring-card.income-card {
  border-color: rgba(71, 202, 145, 0.64) !important;
  background: linear-gradient(150deg, #173d34 0%, #102b25 100%) !important;
}

body.theme-pro #app-screen .income-expense-ring-card.balance-card {
  border-color: rgba(225, 183, 92, 0.68) !important;
  background: linear-gradient(150deg, #3b321e 0%, #272114 100%) !important;
}

body.theme-pro #app-screen .income-expense-ring-card.expense-card {
  border-color: rgba(235, 103, 111, 0.68) !important;
  background: linear-gradient(150deg, #40232b 0%, #2b171e 100%) !important;
}

body.theme-pro #app-screen .income-expense-ring-card::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 45%) !important;
}

body.theme-pro #app-screen .income-expense-ring-visual {
  box-shadow: inset 0 10px 18px rgba(255, 255, 255, 0.14), inset 0 -18px 28px rgba(0, 0, 0, 0.34), 0 8px 0 rgba(4, 14, 25, 0.78), 0 18px 28px rgba(1, 7, 16, 0.44) !important;
}

body.theme-pro #app-screen .income-expense-ring-visual::after {
  background: radial-gradient(circle at 35% 27%, #263b58 0%, #17283f 58%, #0e1b2e 100%) !important;
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.34), inset 0 7px 12px rgba(255, 255, 255, 0.1) !important;
}

body.theme-pro #app-screen .income-expense-ring-card .income-expense-ring-core :is(small, strong, span),
body.theme-pro #app-screen .income-expense-ring-card :is(.muted, p, h3) {
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42) !important;
}

body.theme-pro #app-screen .income-expense-summary-detail-card {
  color: #f6f9fd !important;
  border: 2px solid rgba(105, 165, 215, 0.42) !important;
  border-radius: 18px !important;
  background: linear-gradient(150deg, #192b45 0%, #101d31 100%) !important;
  box-shadow: 0 6px 0 #07131f, 0 17px 28px rgba(2, 9, 20, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.theme-pro #app-screen .income-expense-summary-detail-card > strong {
  color: #ffffff !important;
  font-size: 1rem;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(111, 175, 225, 0.34);
}

body.theme-pro #app-screen .income-expense-summary-row {
  color: #f6f9fd !important;
  border: 1px solid rgba(108, 172, 222, 0.48) !important;
  border-radius: 13px !important;
  background: linear-gradient(150deg, #203a59 0%, #162d48 100%) !important;
  box-shadow: 0 4px 0 #071522, 0 10px 17px rgba(2, 9, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.theme-pro #app-screen .income-expense-summary-row.income {
  border-color: rgba(66, 201, 142, 0.58) !important;
  background: linear-gradient(150deg, #1a493b 0%, #123429 100%) !important;
}

body.theme-pro #app-screen .income-expense-summary-row.balance {
  border-color: rgba(224, 183, 91, 0.58) !important;
  background: linear-gradient(150deg, #493b21 0%, #302816 100%) !important;
}

body.theme-pro #app-screen .income-expense-summary-row.expense {
  border-color: rgba(233, 104, 113, 0.58) !important;
  background: linear-gradient(150deg, #4a2831 0%, #321b22 100%) !important;
}

body.theme-pro #app-screen .income-expense-summary-detail-card :is(strong, small, span, .muted, .income-expense-summary-amount) {
  color: #ffffff !important;
}

body.theme-pro #app-screen .income-expense-summary-row small,
body.theme-pro #app-screen .income-expense-summary-detail-card > .stack > .muted {
  color: #b8c7d9 !important;
}

@media (max-width: 760px) {
  body.theme-pro #app-screen .income-expense-summary-shell,
  body.theme-pro #app-screen .income-expense-summary-detail-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

/* Income / Expense analysis: premium opaque theme cards with strong hierarchy. */
body.theme-pro #app-screen .income-expense-analysis-card {
  color: #f7fbff !important;
  border: 2px solid rgba(103, 163, 214, 0.5) !important;
  background: linear-gradient(155deg, #192b45 0%, #101d31 100%) !important;
  box-shadow: 0 7px 0 #07131f, 0 20px 34px rgba(2, 9, 20, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
}

body.theme-pro #app-screen .income-expense-analysis-card > summary {
  padding-bottom: 12px !important;
  border-bottom: 2px solid rgba(111, 175, 225, 0.32) !important;
}

body.theme-pro #app-screen .income-expense-analysis-card :is(h3, strong, p, span, label),
body.theme-pro #app-screen .income-expense-analysis-card :is(small, .muted) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

body.theme-pro #app-screen .income-expense-analysis-card :is(.income-expense-group-block, .panel-lite) {
  color: #f7fbff !important;
  border: 2px solid rgba(103, 163, 214, 0.46) !important;
  background: linear-gradient(150deg, #213955 0%, #172b44 100%) !important;
  box-shadow: 0 5px 0 #091725, 0 13px 22px rgba(2, 9, 20, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.theme-pro #app-screen button.income-expense-toggle-card,
body.theme-pro #app-screen button.income-expense-toggle-card.active {
  color: #ffffff !important;
  border: 2px solid rgba(119, 181, 230, 0.62) !important;
  background: linear-gradient(155deg, #244566 0%, #17324f 100%) !important;
  box-shadow: 0 5px 0 #081725, 0 12px 20px rgba(2, 9, 20, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}

body.theme-pro #app-screen button.income-expense-toggle-card.active {
  border-color: #d7b56d !important;
  background: linear-gradient(155deg, #36536e 0%, #203d5a 100%) !important;
}

body.theme-pro #app-screen .income-expense-analysis-card .secondary-btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 2px solid rgba(135, 188, 230, 0.62) !important;
  background: linear-gradient(180deg, #2b4b6d 0%, #193654 100%) !important;
  box-shadow: 0 4px 0 #081725, 0 10px 18px rgba(2, 9, 20, 0.38) !important;
}