:root {
  --bg: #f2f6f4;
  --app: #ffffff;
  --card: #ffffff;
  --text: #13231f;
  --muted: #6f7f7a;
  --line: #dce8e4;
  --primary: #004f3f;
  --primary-dark: #003b31;
  --amber: #d99a28;
  --danger: #bd3d38;
  --ok: #16824f;
  --shadow: 0 18px 44px rgba(13, 81, 71, 0.12);
  --type-caption: 11px;
  --type-meta: 12px;
  --type-small: 13px;
  --type-body: 14px;
  --type-body-lg: 15px;
  --type-card-title: 16px;
  --type-section-title: 17px;
  --type-page-title: 22px;
  --type-app-title: 26px;
  --type-hero-title: 32px;
  --type-display-title: 38px;
  --type-guide-title: 36px;
  --type-hero-lead: 24px;
  --type-number-sm: 18px;
  --type-number: 21px;
  --type-number-lg: 24px;
  --leading-tight: 1.2;
  --leading-title: 1.28;
  --leading-body: 1.55;
  /* Typography scale:
     caption/meta 11-12, body 14, card title 16, section 17,
     page title 22, app/brand title 26, hero/display 32/38,
     guide title 36, financial numbers 18/21/24. */
  font-family: "Segoe UI", "Dubai", "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(circle at top, rgba(16, 107, 92, 0.15), transparent 34%), var(--bg);
  font-family: "Segoe UI", "Dubai", "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
}

@media (max-width: 430px) {
  :root {
    --type-card-title: 15px;
    --type-section-title: 16px;
    --type-page-title: 19px;
    --type-app-title: 22px;
    --type-hero-title: 28px;
    --type-display-title: 32px;
    --type-guide-title: 31px;
    --type-hero-lead: 21px;
    --type-number-sm: 17px;
    --type-number: 19px;
    --type-number-lg: 22px;
  }
}

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

button {
  cursor: pointer;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.android-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.android-app {
  position: relative;
  width: min(430px, 100%);
  min-height: min(920px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid rgba(16, 107, 92, 0.16);
  border-radius: 28px;
  background: var(--app);
  box-shadow: var(--shadow);
}

.android-app,
.m-screen {
  overflow-x: hidden;
  scrollbar-width: none;
}

.android-app::-webkit-scrollbar,
.m-screen::-webkit-scrollbar,
.operations-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.m-screen {
  height: 100%;
  max-height: inherit;
  overflow-y: auto;
  padding: 14px 18px 96px;
  scrollbar-width: none;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 28px;
  margin-bottom: 18px;
  color: #070b0a;
  font-size: var(--type-section-title);
  font-weight: 700;
}

.home-header {
  display: grid;
  grid-template-columns: 1fr auto 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.app-topbar {
  margin-bottom: 10px;
}

.home-header button,
.header-icons button {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #111;
}

.home-header svg {
  width: 29px;
  height: 29px;
  stroke-width: 2.5;
}

.header-icons {
  display: flex;
  gap: 14px;
}

.header-icons i {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e79616;
}

.brand-title {
  color: var(--primary);
  font-size: var(--type-app-title);
  font-weight: 800;
}

.greeting {
  text-align: right;
  margin-bottom: 18px;
}

.greeting h2 {
  margin: 0 0 6px;
  font-size: var(--type-page-title);
  line-height: var(--leading-title);
}

.greeting p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-body-lg);
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 10px 0;
}

.screen-title-block {
  display: grid;
  align-content: center;
  min-height: 44px;
}

.screen-header h2 {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--type-page-title);
  line-height: var(--leading-tight);
}

.screen-title-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--primary);
  background: #eef7f4;
  font-size: var(--type-small);
  font-weight: 800;
  white-space: nowrap;
}

.avatar,
.m-mini {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: var(--primary);
}

.screen-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.screen-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-inline-start: auto;
}

.screen-header-actions .screen-actions {
  margin: 0;
}

.screen-back-button {
  flex: 0 0 auto;
}

.screen-back-button svg {
  width: 19px;
  height: 19px;
  transform: rotate(90deg);
}

.m-mini.icon-only {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

.m-mini.icon-only svg {
  width: 20px;
  height: 20px;
}

.budget-card {
  display: grid;
  grid-template-columns: 1fr 112px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 138px;
  padding: 18px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(135deg, #006246, #006f52 50%, #00573f);
  box-shadow: 0 18px 36px rgba(0, 90, 66, 0.24);
}

.budget-side {
  display: grid;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

.budget-side.end {
  text-align: right;
}

.budget-side span,
.budget-side small {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--type-small);
}

.budget-side strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--type-number-lg);
  line-height: 1;
}

.budget-side .soft {
  color: #71d99d;
  font-size: var(--type-number);
}

.money-inline {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.money-symbol {
  font-size: 0.72em;
  font-weight: 850;
  line-height: 1;
}

.money-symbol-img {
  display: block;
  width: 0.82em;
  height: 0.92em;
  object-fit: contain;
  transform: translateY(0.08em);
}

.budget-card .money-symbol-img {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

.home-budget-card .money-symbol-img {
  width: 1.26em;
  height: 1.3em;
  filter: brightness(0) invert(1);
  opacity: 0.96;
  transform: translateY(0.06em);
}

.home-budget-card .money-inline {
  gap: 0.2em;
  align-items: center;
}

.money-number {
  line-height: 1;
}

.money-compact {
  gap: 4px;
}

.budget-side em {
  justify-self: center;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.78);
  font-style: normal;
  font-size: var(--type-meta);
}

.budget-side .budget-compare {
  display: grid;
  gap: 3px;
  min-width: 132px;
  text-align: center;
}

.budget-side .budget-compare b {
  color: var(--primary);
  font-size: var(--type-body-lg);
  line-height: 1;
}

.budget-side .budget-compare small,
.budget-side .budget-compare span {
  color: rgba(0, 74, 54, 0.78);
  font-size: var(--type-meta);
}

.donut {
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#68ce8c calc(var(--value) * 1%), #ffffff 0);
  position: relative;
}

.donut::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: #00684d;
}

.donut b,
.donut span {
  position: relative;
  z-index: 1;
}

.donut b {
  font-size: var(--type-number-lg);
}

.donut span {
  margin-top: 30px;
  color: #fff;
  font-size: var(--type-meta);
  position: absolute;
}

.m-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e6e6;
}

.m-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.reference-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 14px 0;
  border: 1px solid #dedede;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.reference-actions button,
.bottom-nav button,
.section-title button,
.chips button {
  border: 0;
  border-radius: 18px;
  background: var(--card);
  color: var(--primary);
}

.reference-actions button {
  min-height: 86px;
  display: grid;
  place-items: center;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px;
  color: #202523;
  border-radius: 0;
  border-inline-start: 1px solid #dedede;
}

.reference-actions button:first-child {
  border-inline-start: 0;
}

.reference-actions span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: var(--primary);
  background: #eef6f1;
}

.reference-actions b {
  font-size: var(--type-body);
  line-height: 1.45;
  text-align: right;
}

.reference-actions svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.2;
}

.metric-strip span,
.tx-card span,
.category-row span,
.review-item span,
.empty,
.soft-note {
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: 1.6;
}

.m-card {
  padding: 16px;
  margin-top: 14px;
}

.ref-card,
.review-ref-card,
.m-card {
  border: 1px solid #dedede;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

.ref-card,
.review-ref-card {
  padding: 18px;
  margin-top: 14px;
}

.review-ref-card {
  border-color: #f2a51d;
  background: linear-gradient(90deg, #fffdf8, #fffaf0);
}

.trial-status-card,
.billing-card,
.onboarding-card {
  margin-top: 12px;
  border: 1px solid #dbe9e4;
  border-radius: 18px;
  background: #fff;
}

.trial-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
}

.trial-status-card span {
  color: var(--primary);
  font-weight: 800;
  font-size: var(--type-meta);
}

.trial-status-card strong {
  color: #20332e;
  font-size: var(--type-meta);
  line-height: 1.5;
  text-align: end;
}

.billing-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.billing-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.billing-card-head div {
  display: grid;
  gap: 5px;
}

.billing-card-head span,
.billing-status {
  color: var(--primary);
  font-size: var(--type-meta);
  font-weight: 800;
}

.billing-card-head strong {
  color: #20332e;
  font-size: var(--type-small);
  line-height: 1.5;
}

.billing-card-head em {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: var(--primary);
  background: #e8f5f1;
}

.billing-card-head svg {
  width: 20px;
  height: 20px;
}

.billing-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.billing-actions .m-button {
  min-height: 44px;
  padding-inline: 10px;
  font-size: var(--type-meta);
}

.billing-card small {
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: 1.6;
}

.subscription-flow-screen,
.subscription-pay-screen {
  display: grid;
  align-content: start;
  gap: 14px;
}

.subscription-pay-summary,
.subscription-pay-card,
.subscription-status-panel,
.subscription-plan-card,
.subscription-confirm-panel,
.subscription-card-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.subscription-status-panel,
.subscription-confirm-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.subscription-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.subscription-status-head div {
  display: grid;
  gap: 5px;
}

.subscription-status-head span {
  color: var(--muted);
  font-size: var(--type-meta);
}

.subscription-status-head strong {
  color: var(--text);
  font-size: var(--type-card-title);
}

.subscription-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: #eef2f0;
  color: #52645d;
  font-size: var(--type-caption);
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.subscription-state.is-active {
  background: #e6f6ee;
  color: var(--ok);
}

.subscription-state.is-danger {
  background: #fff0ef;
  color: var(--danger);
}

.subscription-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.subscription-info-grid p {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f7fbf9;
}

.subscription-info-grid span {
  color: var(--muted);
  font-size: var(--type-caption);
}

.subscription-info-grid strong {
  color: var(--text);
  font-size: var(--type-meta);
  line-height: 1.4;
}

.subscription-auto-renewal-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8eae2;
  border-radius: 8px;
  background: #f6fbf8;
}

.subscription-auto-renewal-card.is-cancelled {
  border-color: #eadfc6;
  background: #fffaf0;
}

.subscription-auto-renewal-card div {
  display: grid;
  gap: 4px;
}

.subscription-auto-renewal-card span {
  color: var(--primary);
  font-size: var(--type-caption);
  font-weight: 850;
}

.subscription-auto-renewal-card strong {
  color: var(--text);
  font-size: var(--type-small);
}

.subscription-auto-renewal-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: 1.6;
}

.subscription-flow-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.subscription-plans-list {
  display: grid;
  gap: 12px;
}

.subscription-plan-card {
  display: grid;
  gap: 13px;
  padding: 16px;
  position: relative;
}

.subscription-plan-card.is-featured {
  border-color: rgba(0, 79, 63, 0.42);
  box-shadow: 0 12px 32px rgba(0, 79, 63, 0.08);
}

.subscription-plan-card > em {
  width: max-content;
  padding: 4px 9px;
  border-radius: 8px;
  background: #e5f6ee;
  color: var(--primary);
  font-size: var(--type-caption);
  font-style: normal;
  font-weight: 850;
}

.subscription-plan-head {
  display: grid;
  gap: 5px;
}

.subscription-plan-head span {
  color: var(--primary);
  font-size: var(--type-meta);
  font-weight: 850;
}

.subscription-plan-head strong {
  color: var(--text);
  font-size: var(--type-number-lg);
  line-height: var(--leading-tight);
}

.subscription-plan-head small {
  color: var(--muted);
  font-size: var(--type-small);
  line-height: 1.5;
}

.subscription-plan-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscription-plan-card li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #27423a;
  font-size: var(--type-small);
}

.subscription-plan-card li svg {
  width: 16px;
  height: 16px;
  color: var(--ok);
}

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

.subscription-confirm-links a {
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary);
  background: #fbfdfc;
  text-decoration: none;
  font-size: var(--type-caption);
  font-weight: 850;
}

.subscription-terms-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #243e36;
  font-size: var(--type-small);
  font-weight: 800;
  line-height: 1.6;
}

.subscription-terms-check input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--primary);
}

.subscription-auto-renew-check {
  padding: 10px;
  border-radius: 8px;
  background: #f6fbf8;
}

@media (max-width: 380px) {
  .subscription-info-grid,
  .subscription-flow-actions,
  .subscription-pay-summary div,
  .subscription-confirm-links {
    grid-template-columns: 1fr;
  }
}

.subscription-pay-summary {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.subscription-pay-summary span {
  color: var(--primary);
  font-size: var(--type-meta);
  font-weight: 850;
}

.subscription-pay-summary strong {
  color: #10231d;
  font-size: var(--type-number-lg);
  line-height: var(--leading-tight);
}

.subscription-pay-summary p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-small);
}

.subscription-pay-summary div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.subscription-pay-summary small {
  display: grid;
  gap: 3px;
  padding: 9px;
  border-radius: 8px;
  background: #f5faf7;
  color: #486159;
  font-size: var(--type-caption);
  line-height: 1.4;
}

.subscription-card-form,
.subscription-pay-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.subscription-card-form label {
  display: grid;
  gap: 7px;
  color: #253d36;
  font-size: var(--type-small);
  font-weight: 800;
}

.subscription-card-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  color: var(--text);
  padding: 0 12px;
  font-size: var(--type-body-lg);
  outline: none;
}

.subscription-card-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 79, 63, 0.08);
}

.subscription-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.subscription-security-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: #eef8f2;
  color: #21483d;
  font-size: var(--type-meta);
  line-height: 1.6;
}

.subscription-security-note svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.subscription-invoices-list {
  display: grid;
  gap: 10px;
}

.subscription-invoice-row,
.subscription-invoice-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.subscription-invoice-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.subscription-invoice-row > button {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: start;
  font: inherit;
}

.subscription-invoice-row span,
.invoice-detail-head span,
.invoice-detail-grid span,
.invoice-amounts span {
  color: var(--muted);
  font-size: var(--type-caption);
}

.subscription-invoice-row strong {
  color: var(--text);
  font-size: var(--type-small);
  line-height: 1.4;
}

.subscription-invoice-row small {
  color: #64766f;
  font-size: var(--type-caption);
}

.subscription-invoice-row > div {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.subscription-invoice-row em,
.invoice-detail-head em {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 8px;
  background: #e6f6ee;
  color: var(--ok);
  font-size: var(--type-caption);
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.invoice-empty-state {
  justify-items: start;
}

.invoice-empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-small);
  line-height: 1.7;
}

.invoice-empty-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #edf8f3;
  color: var(--primary);
}

.invoice-empty-icon svg {
  width: 22px;
  height: 22px;
}

.subscription-invoice-detail {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.invoice-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.invoice-detail-head div {
  display: grid;
  gap: 5px;
}

.invoice-detail-head strong {
  color: var(--text);
  font-size: var(--type-card-title);
}

.invoice-detail-grid,
.invoice-amounts {
  display: grid;
  gap: 8px;
}

.invoice-detail-grid {
  grid-template-columns: 1fr 1fr;
}

.invoice-detail-grid p,
.invoice-amounts p {
  display: grid;
  gap: 5px;
  margin: 0;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f7fbf9;
}

.invoice-detail-grid strong,
.invoice-amounts strong {
  color: #17342b;
  font-size: var(--type-meta);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.invoice-amounts .is-total {
  background: #e9f7f1;
}

.invoice-amounts .is-total strong {
  color: var(--primary);
  font-size: var(--type-body-lg);
}

.invoice-detail-actions {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
  align-items: stretch;
}

.invoice-pdf-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--primary);
  text-decoration: none;
  font-size: var(--type-small);
  font-weight: 850;
}

.invoice-pdf-button svg {
  width: 18px;
  height: 18px;
}

.invoice-pdf-button.is-disabled {
  color: #7c8b86;
  background: #f4f7f6;
}

.invoice-qr-placeholder {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 92px;
  border: 1px dashed #bfd5ce;
  border-radius: 8px;
  background: #fbfdfc;
  color: var(--muted);
  text-align: center;
}

.invoice-qr-placeholder span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #edf8f3;
  color: var(--primary);
  font-weight: 900;
}

.invoice-qr-placeholder small {
  max-width: 96px;
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.35;
}

@media (max-width: 380px) {
  .invoice-detail-grid,
  .invoice-detail-actions {
    grid-template-columns: 1fr;
  }

  .subscription-invoice-row {
    grid-template-columns: 1fr;
  }

  .subscription-invoice-row > div {
    grid-template-columns: 1fr auto;
    justify-items: start;
    align-items: center;
  }
}

.plan-lock-card {
  border-color: #d7e4df;
  background: linear-gradient(180deg, #ffffff, #f7fbf9);
}

.access-gate-screen {
  display: grid;
  place-items: center;
  padding-bottom: 24px;
}

.access-gate-card {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 14px;
  border: 1px solid #dbe9e4;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #f5fbf8);
  padding: 26px 18px;
  text-align: center;
  box-shadow: 0 18px 42px rgba(13, 81, 71, 0.1);
}

.access-gate-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: var(--primary);
  background: #e8f7ef;
}

.access-gate-icon svg {
  width: 30px;
  height: 30px;
}

.access-gate-card h1 {
  margin: 0;
  color: var(--primary-dark);
  font-size: var(--type-page-title);
  line-height: var(--leading-title);
}

.access-gate-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
}

.access-gate-card > span {
  color: var(--primary);
  font-size: var(--type-small);
  font-weight: 800;
}

.access-gate-card .billing-card {
  width: 100%;
  text-align: initial;
}

.update-required-screen {
  justify-content: center;
  padding: 24px;
}

.update-required-card {
  width: min(460px, 100%);
  margin: auto;
  border: 1px solid rgba(0, 95, 75, 0.12);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 63, 52, 0.14);
  padding: 28px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.update-required-card h1 {
  margin: 0;
  color: var(--primary-dark);
  font-size: var(--type-app-title);
}

.update-required-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.update-required-card span {
  color: var(--muted);
  font-size: var(--type-body);
  font-weight: 700;
}

.update-banner {
  width: min(100%, 920px);
  margin: 0 auto 14px;
  border: 1px solid rgba(0, 95, 75, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, #effaf5, #ffffff);
  color: var(--primary-dark);
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  box-shadow: 0 14px 32px rgba(0, 63, 52, 0.08);
}

.update-banner div {
  display: grid;
  gap: 2px;
  margin-inline-end: auto;
}

.update-banner strong {
  font-size: var(--type-body-lg);
}

.update-banner span {
  color: var(--muted);
  font-size: var(--type-body);
  line-height: 1.6;
}

.update-banner .mini-button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  padding: 0 14px;
  font-weight: 800;
}

.update-banner .mini-button.ghost {
  background: #e8f3ef;
  color: var(--primary-dark);
}

.onboarding-card {
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #f7fbf9);
}

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

.onboarding-head span {
  display: block;
  color: var(--primary);
  font-size: var(--type-caption);
  font-weight: 800;
}

.onboarding-head h3 {
  margin: 3px 0 0;
  color: #14201d;
  font-size: var(--type-body-lg);
}

.onboarding-head button,
.onboarding-steps button {
  min-height: 34px;
  border: 0;
  border-radius: 14px;
  color: var(--primary);
  background: #eef7f4;
  font-weight: 800;
}

.onboarding-head button {
  padding: 0 12px;
  white-space: nowrap;
}

.onboarding-steps {
  display: grid;
  gap: 8px;
}

.onboarding-steps article {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e3ebe8;
  border-radius: 16px;
  background: #fff;
}

.onboarding-steps em {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--primary);
  background: #eef7f4;
  font-style: normal;
  font-weight: 900;
}

.onboarding-steps em svg {
  width: 17px;
  height: 17px;
}

.onboarding-steps strong {
  display: block;
  color: #16231f;
  font-size: var(--type-small);
}

.onboarding-steps p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: 1.4;
}

.onboarding-steps button {
  padding: 0 10px;
  font-size: var(--type-meta);
  white-space: nowrap;
}

.onboarding-steps article.done {
  background: #f8fbfa;
}

.review-ref-head,
.review-ref-row,
.ref-title,
.ref-category-row,
.last-row {
  display: grid;
  align-items: center;
}

.review-ref-head {
  grid-template-columns: 88px 1fr 44px;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eadfcb;
}

.review-ref-head button {
  min-height: 42px;
  border: 0;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #e69800, #d37a00);
  font-weight: 700;
}

.review-ref-head h3,
.ref-title h3 {
  margin: 0;
  font-size: var(--type-section-title);
}

.review-ref-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--type-small);
}

.review-ref-head > span,
.review-ref-row em,
.ref-category-row em {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #d98700;
  background: #fff1dc;
}

.review-ref-row {
  grid-template-columns: 90px 10px 100px 1fr 42px;
  gap: 10px;
  padding-top: 13px;
  font-size: var(--type-small);
}

.review-ref-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e69800;
}

.review-ref-row p,
.review-ref-row span {
  margin: 0;
  color: var(--muted);
}

.ref-title {
  grid-template-columns: auto 1fr;
  margin-bottom: 13px;
}

.ref-title button {
  border: 0;
  color: var(--primary);
  background: transparent;
  font-size: var(--type-body-lg);
}

.ref-title h3 {
  text-align: right;
}

.ref-category-list {
  display: grid;
}

.ref-category-list .ref-category-row {
  padding-inline: 0;
}

.ref-category-row {
  grid-template-columns: minmax(92px, auto) 42px minmax(90px, 1fr) 72px 42px;
  gap: 12px;
  min-height: 52px;
  border-top: 1px solid #e6e6e6;
}

.ref-category-row:first-child {
  border-top: 0;
}

.ref-category-row span,
.ref-category-row small {
  color: #1d2421;
}

.ref-category-row .category-amount {
  min-width: 90px;
  justify-self: start;
  text-align: left;
  white-space: nowrap;
}

.ref-category-row strong {
  text-align: right;
  font-size: var(--type-body-lg);
}

.ref-category-row em {
  color: var(--primary);
  background: #eef6f1;
}

.ref-line {
  height: 7px;
  border-radius: 999px;
  background: #e2e2e2;
  overflow: hidden;
}

.ref-line i {
  display: block;
  height: 100%;
  margin-inline-start: auto;
  margin-inline-end: 0;
  border-radius: inherit;
  background: var(--primary);
}

.ref-category-row.usage-warning .ref-line i {
  background: #d99a28;
}

.ref-category-row.usage-danger .ref-line i {
  background: #c94b3a;
}

.drawer-scrim {
  position: absolute;
  z-index: 30;
  inset: 0;
  background: rgba(19, 35, 31, 0.18);
}

.top-menu {
  position: absolute;
  z-index: 31;
  top: 10px;
  bottom: 10px;
  inset-inline-start: 10px;
  width: min(72%, 292px);
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 45px rgba(19, 35, 31, 0.18);
  backdrop-filter: blur(12px);
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.app-logo.mini {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #fff;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.top-menu p {
  margin: 12px 8px 5px;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.top-menu button {
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: var(--primary);
  background: transparent;
}

.top-menu button.active,
.top-menu button:hover {
  background: #eef7f4;
}

.top-menu button svg {
  width: 18px;
  height: 18px;
}

.top-menu button span {
  font-size: var(--type-small);
  font-weight: 700;
}

.is-ltr .top-menu {
  inset-inline-start: 10px;
  inset-inline-end: auto;
}

.loan-hero {
  width: 100%;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #006246, #006f52 58%, #00573f);
  box-shadow: 0 14px 28px rgba(0, 90, 66, 0.18);
}

.loan-hero {
  padding: 18px;
  margin-bottom: 12px;
}

.loan-hero span,
.loan-hero small {
  color: rgba(255, 255, 255, 0.78);
}

.loan-hero strong {
  display: block;
  margin: 8px 0 4px;
  font-size: var(--type-number-lg);
}

.loan-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.loan-form-card {
  margin-bottom: 12px;
}

.loan-card {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 14px;
  align-items: center;
  min-height: 105px;
  padding: 16px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: #fff;
  box-shadow: 0 12px 24px rgba(12, 33, 28, 0.06);
  text-align: inherit;
}

.loan-card.detail-top {
  margin-bottom: 12px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #006246, #006f52 58%, #00573f);
  box-shadow: 0 14px 28px rgba(0, 90, 66, 0.18);
}

.loan-card span,
.loan-card small {
  color: var(--muted);
}

.loan-card.detail-top span,
.loan-card.detail-top small {
  color: rgba(255, 255, 255, 0.78);
}

.loan-card.active {
  outline: 3px solid rgba(217, 154, 40, 0.38);
}

.loan-card strong {
  display: block;
  margin: 4px 0 7px;
  font-size: var(--type-section-title);
}

.loan-meter {
  display: grid;
  gap: 8px;
}

.loan-meter b {
  text-align: center;
  font-size: var(--type-number-sm);
}

.loan-card .m-track {
  background: rgba(255, 255, 255, 0.22);
}

.loan-card .m-fill {
  background: #9ae5b4;
}

.investment-home-card {
  margin-top: 12px;
}

.investment-home-body {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 12px;
}

.investment-donut {
  width: 108px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--segments));
  position: relative;
}

.investment-donut::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  background: #fff;
}

.investment-donut > div {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 1px;
  max-width: 72px;
}

.investment-donut strong {
  color: var(--primary);
  font-size: var(--type-meta);
  line-height: 1.15;
}

.investment-donut span {
  color: var(--muted);
  font-size: var(--type-caption);
}

.investment-legend {
  display: grid;
  gap: 7px;
}

.investment-legend button {
  display: grid;
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: inherit;
}

.investment-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.investment-legend span {
  font-size: var(--type-meta);
  font-weight: 700;
}

.investment-legend b {
  color: var(--primary);
  font-size: var(--type-caption);
}

.compact-empty {
  padding: 8px 0;
}

.investment-hero {
  display: grid;
  grid-template-columns: 1fr 112px;
  align-items: center;
  gap: 14px;
  padding: 18px;
  margin-bottom: 12px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #005f4b, #00785b 58%, #004b3c);
  box-shadow: 0 14px 28px rgba(0, 90, 66, 0.18);
}

.investment-hero span,
.investment-hero small {
  color: rgba(255, 255, 255, 0.78);
}

.investment-hero strong {
  display: block;
  margin: 8px 0 4px;
  font-size: var(--type-number-lg);
}

.mini-portfolio {
  width: 104px;
}

.mini-portfolio::before {
  background: #00644c;
}

.mini-portfolio strong,
.mini-portfolio span {
  color: #fff;
}

.investment-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.investment-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr auto 34px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.investment-card > em {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef7f4;
  font-style: normal;
}

.investment-card > em svg {
  width: 22px;
  height: 22px;
}

.investment-card-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.investment-card-main span,
.investment-card-main small {
  color: var(--muted);
  font-size: var(--type-caption);
}

.investment-card-main strong {
  font-size: var(--type-body);
}

.investment-card > b {
  color: var(--primary);
  font-size: var(--type-meta);
  white-space: nowrap;
}

.investment-form {
  margin-bottom: 12px;
}

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

.compact-form .m-button {
  grid-column: 1 / -1;
}

.loan-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.loan-stats div {
  padding: 10px;
  border-radius: 14px;
  background: #eef7f4;
}

.loan-stats span {
  color: var(--muted);
  font-size: var(--type-caption);
}

.loan-stats strong {
  display: block;
  margin-top: 4px;
  font-size: var(--type-meta);
}

.pay-form {
  grid-template-columns: 1fr 1fr;
}

.pay-form .m-button {
  grid-column: 1 / -1;
}

.payment-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.payment-list article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.payment-list article::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  order: -1;
}

.payment-list span {
  color: var(--muted);
  font-size: var(--type-meta);
}

.payment-list button {
  min-height: 30px;
  border: 0;
  border-radius: 10px;
  padding: 4px 9px;
  color: var(--danger);
  background: #fff1ef;
  font-size: var(--type-caption);
  font-weight: 700;
}

.compact-danger {
  min-height: 40px;
  margin: 4px 0 12px;
}

.category-editor,
.category-add-row {
  display: grid;
  gap: 10px;
}

.category-edit-row,
.category-add-row {
  display: grid;
  grid-template-columns: 1fr 110px auto;
  gap: 8px;
  align-items: end;
}

.remove-check {
  min-height: 48px;
  display: flex !important;
  align-items: center;
  gap: 6px !important;
  color: var(--danger) !important;
}

.remove-check input {
  width: auto;
  min-height: auto;
}

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

.report-stat {
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #006246, #00513f);
}

.report-stat span,
.report-donut p {
  color: var(--muted);
  font-size: var(--type-meta);
}

.report-stat strong {
  display: block;
  margin-top: 6px;
  font-size: var(--type-number-sm);
}

.report-bars {
  display: grid;
  gap: 10px;
}

.report-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.report-bar div {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
}

.report-bar span,
.report-bar small {
  color: var(--muted);
  font-size: var(--type-meta);
  font-style: normal;
}

.report-bar span {
  white-space: nowrap;
}

.report-bar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-bar i {
  height: 8px;
  border-radius: 99px;
  background: #e7ecea;
  overflow: hidden;
}

.report-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.column-chart {
  height: 150px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: end;
}

.column-chart div {
  height: 100%;
  display: grid;
  align-items: end;
  gap: 6px;
}

.column-chart i {
  width: 100%;
  min-height: 4px;
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(180deg, #0b8062, #9ae5b4);
}

.column-chart span {
  text-align: center;
  color: var(--muted);
  font-size: var(--type-caption);
}

.line-chart {
  width: 100%;
  height: 150px;
}

.line-chart polyline {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.line-chart circle {
  fill: var(--amber);
}

.report-donut {
  display: grid;
  place-items: center;
  gap: 8px;
}

.report-small {
  width: 118px;
  height: 118px;
}

.budget-total-card {
  padding: 12px;
  border-radius: 16px;
  background: #eef7f4;
}

.budget-total-form {
  gap: 8px;
}

.icon-fab {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 10px 18px rgba(0, 95, 75, 0.18);
}

.icon-fab svg {
  width: 22px;
  height: 22px;
}

.budget-list-card {
  padding: 14px;
}

.budget-total-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 9px;
  padding: 12px;
}

.budget-total-card > div {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.budget-total-card span {
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.35;
}

.budget-total-card strong {
  color: var(--primary);
  font-size: var(--type-card-title);
  line-height: 1.15;
}

.budget-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 9px;
}

.budget-view-tabs button {
  min-height: 34px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: #f7fbf9;
  font-size: var(--type-meta);
  font-weight: 800;
  line-height: 1.25;
}

.budget-view-tabs button.active {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.budget-category-list {
  display: grid;
  gap: 8px;
}

.budget-group-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: visible;
}

.budget-group-head {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr auto 20px;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  border: 0;
  color: var(--text);
  background: #fff;
  text-align: inherit;
}

.budget-group-head em {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--primary);
  background: #eef7f4;
  font-style: normal;
}

.budget-group-head em svg {
  width: 18px;
  height: 18px;
}

.budget-group-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.budget-group-head strong {
  font-size: var(--type-meta);
}

.budget-group-head span {
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.35;
}

.budget-group-head b {
  color: var(--primary);
  font-size: var(--type-meta);
  white-space: nowrap;
}

.budget-group-head i {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-style: normal;
  transition: transform 0.18s ease;
}

.budget-group-card.is-open .budget-group-head i {
  transform: rotate(180deg);
}

.budget-group-items {
  padding: 0 10px 8px;
}

.budget-summary-list {
  display: grid;
  gap: 6px;
}

.budget-summary-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr 92px 82px 34px;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 6px 0;
  border-top: 1px solid #e6ebe8;
}

.budget-summary-row.has-open-menu,
.tx-card.has-open-menu {
  z-index: 45;
}

.budget-summary-row:first-child {
  border-top: 0;
}

.budget-summary-row em,
.report-bar em {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--primary);
  background: #eef6f1;
  font-style: normal;
}

.budget-summary-row em svg,
.report-bar em svg {
  width: 19px;
  height: 19px;
}

.budget-summary-row strong {
  min-width: 0;
  font-size: var(--type-small);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.budget-summary-row span {
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.2;
}

.budget-summary-row b {
  color: var(--primary);
  font-size: var(--type-meta);
  text-align: end;
  white-space: nowrap;
}

.budget-row-action {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  color: var(--primary);
  background: #eef7f4;
}

.budget-row-action svg {
  width: 17px;
  height: 17px;
}

.budget-action-menu {
  position: absolute;
  inset-inline-end: 2px;
  top: 42px;
  z-index: 52;
  min-width: 112px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(12, 33, 28, 0.14);
}

.budget-action-menu.opens-up {
  top: auto;
  bottom: calc(100% - 6px);
}

.budget-action-menu button {
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: var(--type-meta);
  font-weight: 800;
  text-align: start;
}

.budget-action-menu button:last-child {
  color: var(--danger);
  background: #fff1ef;
}

.category-add-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(0, 95, 75, 0.28);
  border-radius: 16px;
  background: #fbfdfc;
}

.category-add-panel h3 {
  margin: 0;
  font-size: var(--type-body);
}

.budget-item-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.budget-item-fields label {
  min-width: 0;
}

.select-with-icon {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  align-items: center;
}

.select-with-icon em {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--primary);
  background: #eef6f1;
  font-style: normal;
}

.select-with-icon em svg {
  width: 20px;
  height: 20px;
}

.gold-icon {
  color: #d99a28 !important;
  background: #fff6df !important;
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.income-summary {
  color: #fff;
  background: linear-gradient(135deg, #006246, #00513f);
}

.income-summary span {
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--type-meta);
}

.income-summary strong {
  display: block;
  margin-top: 6px;
  font-size: var(--type-number-lg);
}

.income-list {
  display: grid;
  gap: 6px;
}

.income-source-row {
  grid-template-columns: 36px minmax(0, 1fr) minmax(110px, auto) 34px;
}

@media (max-width: 560px) {
  .category-edit-row,
  .category-add-row {
    grid-template-columns: 1fr;
  }

  .budget-summary-row,
  .income-source-row {
    grid-template-columns: 34px minmax(62px, 1fr) minmax(96px, auto) 32px;
    gap: 6px;
  }

  .budget-summary-row strong {
    font-size: var(--type-meta);
  }

  .budget-summary-row span,
  .budget-summary-row b {
    font-size: var(--type-caption);
  }

  .form-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .compact-form,
  .pay-form {
    grid-template-columns: 1fr;
  }

  .receivable-hero {
    grid-template-columns: 1fr;
  }

  .receivable-detail-money {
    grid-template-columns: 1fr;
  }

  .budget-total-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
  }

  .budget-total-card > div {
    padding: 7px 6px;
  }

  .budget-total-card span {
    font-size: var(--type-caption);
  }

  .budget-total-card strong {
    font-size: var(--type-body-lg);
  }

  .budget-view-tabs {
    gap: 5px;
    margin-bottom: 8px;
  }

  .budget-view-tabs button {
    min-height: 30px;
    padding: 3px 5px;
    border-radius: 10px;
    font-size: var(--type-caption);
  }

  .budget-group-head {
    grid-template-columns: 32px 1fr auto 18px;
    gap: 6px;
    min-height: 46px;
    padding: 6px 8px;
  }

  .budget-group-head em {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  .budget-group-head em svg {
    width: 16px;
    height: 16px;
  }

  .budget-group-head strong {
    font-size: var(--type-meta);
  }

  .budget-group-head span {
    font-size: var(--type-caption);
  }

  .budget-group-head b {
    font-size: var(--type-caption);
  }

  .receivable-money {
    grid-template-columns: 1fr 1fr;
  }

  .receivable-money small {
    grid-column: 1 / -1;
  }

  .loan-card {
    min-height: 96px;
    grid-template-columns: 1fr 78px;
  }

  .loan-stats {
    grid-template-columns: 1fr;
  }
}

.last-row {
  grid-template-columns: 62px 1fr 88px 32px;
  gap: 8px;
  min-height: 42px;
  border-top: 1px solid #e6e6e6;
}

.last-row:first-of-type {
  border-top: 0;
}

.last-row span,
.last-row small {
  color: var(--muted);
  font-size: var(--type-caption);
}

.last-row strong {
  color: var(--primary);
  font-size: var(--type-meta);
  text-align: end;
  white-space: nowrap;
}

.last-row div {
  display: grid;
  gap: 3px;
  text-align: right;
  min-width: 0;
}

.last-row b {
  font-size: var(--type-meta);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.last-row button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  color: var(--primary);
  background: #eef6f1;
}

.last-row button svg {
  width: 17px;
  height: 17px;
}

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

.section-title h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--type-section-title);
}

.section-title button {
  min-height: 34px;
  padding: 0 12px;
  background: #eef7f4;
}

.category-list,
.tx-list,
.form,
.chips,
.budget-grid {
  display: grid;
  gap: 10px;
}

.category-row {
  display: grid;
  gap: 9px;
}

.category-row > div,
.rule-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.settings-actions {
  display: grid;
  gap: 10px;
}

.settings-action-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 2px 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfdfc;
  color: var(--ink);
  text-align: start;
}

.settings-action-card em {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--primary);
  background: #eef6f1;
  font-style: normal;
}

.settings-action-card em svg {
  width: 20px;
  height: 20px;
}

.settings-action-card span {
  font-size: var(--type-small);
  font-weight: 800;
}

.settings-action-card small {
  color: var(--muted);
  font-size: var(--type-caption);
}

.passkey-card {
  display: grid;
  gap: 14px;
}

.passkey-note,
.passkey-unavailable {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-small);
  line-height: 1.7;
}

.passkey-list {
  display: grid;
  gap: 10px;
}

.passkey-list > strong {
  color: var(--ink);
  font-size: var(--type-small);
}

.passkey-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(0, 95, 75, 0.1);
  border-radius: 12px;
  background: #f8fbf9;
}

.passkey-row em {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: var(--primary);
  background: rgba(0, 95, 75, 0.08);
  font-style: normal;
}

.passkey-row svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.passkey-row span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.passkey-row b {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--type-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.passkey-row small {
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.4;
}

.settings-action-card.danger em {
  color: var(--danger);
  background: #fff1ef;
}

.alert-card {
  border-color: rgba(217, 154, 40, 0.36);
  background: #fff9ed;
}

.alert-card p {
  margin: 8px 0 0;
  color: #7a5015;
}

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

.review-edit-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-top: 12px;
  border: 1px solid rgba(0, 95, 75, 0.12);
  border-radius: 18px;
  background: #fbfdfc;
}

.review-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.review-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.review-edit-card .review-head {
  margin-bottom: 0;
}

.review-type-field {
  display: grid;
  grid-template-columns: minmax(108px, 136px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 800;
}

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

.review-edit-grid label {
  display: grid;
  grid-template-columns: minmax(108px, 136px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 800;
}

.review-edit-grid input,
.review-edit-grid select,
.review-type-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(0, 95, 75, 0.16);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.review-edit-card .m-button {
  min-height: 42px;
}

.chips {
  grid-template-columns: repeat(3, 1fr);
}

.chips button {
  min-height: 38px;
  padding: 8px;
  background: #eef7f4;
}

.chips button:active,
.quick-actions button:active,
.bottom-nav button.active {
  color: #fff;
  background: var(--primary);
}

.tx-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr auto 32px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfdfc;
}

.operations-card {
  padding: 12px;
}

.operations-month-filter {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
  padding: 8px;
  border: 1px solid rgba(0, 95, 75, 0.12);
  border-radius: 18px;
  background: #f6fbf9;
}

.operations-month-filter strong {
  color: var(--ink);
  font-size: var(--type-body);
  font-weight: 900;
  text-align: center;
}

.operations-month-filter button {
  width: 42px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 95, 75, 0.14);
  border-radius: 14px;
  color: var(--primary);
  background: #fff;
}

.operations-month-filter button:first-child svg {
  transform: rotate(-90deg);
}

.operations-month-filter button:last-child svg {
  transform: rotate(90deg);
}

.operations-month-filter svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.operations-toolbar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.operations-toolbar::-webkit-scrollbar {
  display: none;
}

.operations-toolbar button {
  flex: 0 0 82px;
  inline-size: 82px;
  min-inline-size: 82px;
  min-height: 34px;
  padding: 4px 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: #f7fbf9;
  font-size: var(--type-meta);
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-toolbar button.active {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.operations-group-note {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: var(--type-caption);
  text-align: center;
}

.tx-group-list {
  display: grid;
  gap: 8px;
}

.tx-group-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: visible;
}

.tx-group-head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 22px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 14px;
  border: 0;
  color: var(--text);
  background: #fff;
  text-align: start;
}

.tx-group-head span {
  min-width: 0;
  font-size: var(--type-small);
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-group-head strong {
  color: var(--primary);
  font-size: var(--type-small);
  white-space: nowrap;
}

.tx-group-head em {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform 0.18s ease;
}

.tx-group-card.is-open .tx-group-head em {
  transform: rotate(180deg);
}

.tx-group-items {
  gap: 7px;
  padding: 0 10px 7px;
}

.financial-snapshot-card {
  display: grid;
  gap: 8px;
}

.financial-snapshot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.financial-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.financial-title span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--primary);
  background: #eef7f4;
}

.financial-title svg,
.financial-eye svg {
  width: 18px;
  height: 18px;
}

.financial-title h3 {
  margin: 0;
  font-size: var(--type-body-lg);
}

.financial-eye {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--primary);
  background: #fff;
}

.financial-primary {
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(0, 95, 75, 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, #f4fbf8, #fff);
  text-align: start;
}

.financial-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.financial-snapshot-grid > div {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: stretch;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f7fbf9;
  text-align: start;
}

.financial-metric-content {
  width: 100%;
  display: grid;
  grid-template-columns: 46px 1px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-inline: 0;
}

.financial-metric-content-primary {
  width: 100%;
  min-height: 58px;
  gap: 10px;
}

.financial-tile-icon {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eef7f4;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 95, 75, 0.06);
}

.financial-metric-content-primary .financial-tile-icon {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-radius: 16px;
}

.financial-metric-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.financial-icon-fallback {
  width: 25px;
  height: 25px;
  color: var(--primary);
}

.financial-metric-content-primary .financial-icon-fallback {
  width: 25px;
  height: 25px;
}

.financial-metric-divider {
  width: 1px;
  min-height: 42px;
  flex: 0 0 1px;
  background: rgba(12, 65, 50, 0.14);
}

.financial-metric-content-primary .financial-metric-divider {
  min-height: 40px;
}

.financial-metric-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
  padding-inline: 2px;
}

.financial-metric-copy span {
  color: var(--ink);
  font-size: var(--type-meta);
  font-weight: 700;
  line-height: 1.4;
}

.financial-metric-copy strong {
  color: var(--primary);
  font-size: var(--type-body-lg);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.financial-metric-content-primary .financial-metric-copy span {
  font-size: var(--type-small);
}

.financial-metric-content-primary .financial-metric-copy strong {
  font-size: var(--type-number);
}

.receivable-card span,
.support-ticket-list span,
.notification-row span {
  color: var(--muted);
  font-size: var(--type-meta);
}

.financial-snapshot-grid .financial-metric-copy strong {
  font-size: var(--type-body-lg);
}

@media (max-width: 430px) {
  .financial-snapshot-card {
    gap: 7px;
  }

  .financial-title span,
  .financial-eye {
    width: 32px;
    height: 32px;
    border-radius: 12px;
  }

  .financial-title svg,
  .financial-eye svg {
    width: 16px;
    height: 16px;
  }

  .financial-title h3 {
    font-size: var(--type-body);
  }

  .financial-primary {
    padding: 8px 10px;
  }

  .financial-snapshot-grid > div {
    min-height: 58px;
    padding: 4px 6px;
  }

  .financial-metric-content {
    width: 100%;
    grid-template-columns: 32px 1px minmax(0, 1fr);
    gap: 6px;
  }

  .financial-metric-content-primary {
    width: 100%;
    grid-template-columns: 42px 1px minmax(0, 1fr);
    min-height: 54px;
    gap: 10px;
  }

  .financial-tile-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 12px;
  }

  .financial-metric-content-primary .financial-tile-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 15px;
  }

  .financial-icon-fallback {
    width: 18px;
    height: 18px;
  }

  .financial-metric-content-primary .financial-icon-fallback {
    width: 23px;
    height: 23px;
  }

  .financial-metric-divider {
    min-height: 28px;
  }

  .financial-metric-content-primary .financial-metric-divider {
    min-height: 36px;
  }

  .financial-metric-copy span {
    font-size: var(--type-meta);
  }

  .financial-metric-copy strong,
  .financial-snapshot-grid .financial-metric-copy strong {
    font-size: var(--type-small);
  }

  .financial-metric-content-primary .financial-metric-copy strong {
    font-size: var(--type-number-sm);
  }
}

.receivable-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  padding: 18px;
  margin-bottom: 12px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #006246, #006f52 58%, #00573f);
  box-shadow: 0 14px 28px rgba(0, 90, 66, 0.18);
}

.receivable-hero > div {
  display: grid;
  gap: 5px;
}

.receivable-hero span,
.receivable-hero small {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--type-meta);
}

.receivable-hero strong {
  font-size: var(--type-number-lg);
}

.receivable-form {
  margin-bottom: 12px;
}

.receivable-list,
.support-ticket-list {
  display: grid;
  gap: 10px;
}

.receivable-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(12, 33, 28, 0.05);
}

.receivable-summary-card {
  width: 100%;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.receivable-summary-card:hover {
  border-color: rgba(0, 95, 75, 0.32);
  box-shadow: 0 14px 28px rgba(12, 33, 28, 0.08);
}

.receivable-card > div:first-child {
  display: grid;
  gap: 4px;
}

.receivable-money {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: center;
}

.receivable-money div {
  display: grid;
  gap: 3px;
}

.receivable-money b {
  color: var(--primary);
}

.receivable-detail-card {
  margin-top: 12px;
}

.receivable-detail-money {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.receivable-collect-form {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr auto;
  gap: 8px;
}

.receivable-collect-form input,
.receivable-collect-form select,
.receivable-collect-form button {
  min-height: 42px;
  border-radius: 12px;
}

.receivable-collect-form input,
.receivable-collect-form select {
  min-width: 0;
  border: 1px solid var(--line);
  padding: 0 10px;
}

.receivable-collect-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 800;
}

.receivable-collect-form button {
  border: 0;
  padding: 0 14px;
  color: #fff;
  background: var(--primary);
  font-weight: 800;
}

.support-ticket-list p,
.notification-row {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fcfa;
}

.notification-row {
  width: 100%;
  text-align: start;
  color: var(--text);
}

.notification-row.unread {
  border-color: rgba(0, 95, 75, 0.24);
  background: #eef8f3;
}

.operations-list {
  max-height: calc(100dvh - 210px);
  overflow-y: auto;
  padding-inline-end: 2px;
  scrollbar-width: none;
}

.expense-month-bar {
  margin-bottom: 10px;
}

.expense-month-bar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--type-meta);
}

.expense-month-bar select {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 0 13px;
  color: var(--text);
  background: #fff;
}

.expense-summary-hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 10px;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #005f4b, #00785b 60%, #004b3c);
  box-shadow: 0 14px 28px rgba(0, 90, 66, 0.16);
}

.expense-summary-hero div {
  display: grid;
  gap: 4px;
  align-content: center;
}

.expense-summary-hero span,
.expense-summary-hero small {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--type-caption);
}

.expense-summary-hero strong {
  font-size: var(--type-number);
}

.expense-summary-list {
  display: grid;
  gap: 9px;
}

.expense-summary-row {
  display: grid;
  grid-template-columns: 40px 1fr auto 44px;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}

.expense-summary-row.is-over {
  border-color: rgba(197, 76, 52, 0.2);
  background: #fff8f5;
}

.expense-summary-row > em {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--primary);
  background: #eef7f4;
  font-style: normal;
}

.expense-summary-row > em svg {
  width: 20px;
  height: 20px;
}

.expense-summary-main,
.expense-summary-money {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.expense-summary-main strong {
  font-size: var(--type-small);
}

.expense-summary-main span,
.expense-summary-money span,
.expense-summary-money small {
  color: var(--muted);
  font-size: var(--type-caption);
}

.expense-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e8e6;
}

.expense-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.expense-summary-money {
  text-align: left;
}

.expense-summary-money b {
  color: var(--primary);
  font-size: var(--type-meta);
  white-space: nowrap;
}

.expense-summary-row mark {
  min-width: 38px;
  padding: 6px 0;
  border-radius: 12px;
  color: var(--primary);
  background: #eef7f4;
  font-size: var(--type-caption);
  font-weight: 800;
  text-align: center;
}

.danger-text {
  color: #b94b35 !important;
}

.tx-card.is-income {
  border-color: rgba(0, 111, 82, 0.14);
  background: #eef9f3;
}

.tx-card.is-expense {
  border-color: rgba(197, 76, 52, 0.14);
  background: #fff5f2;
}

.tx-card.is-investment {
  border-color: rgba(216, 154, 40, 0.2);
  background: #fff7dc;
}

.tx-card.is-loan-payment {
  border-color: rgba(37, 99, 235, 0.16);
  background: #eff6ff;
}

.tx-card > em {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.72);
  font-style: normal;
}

.tx-card.is-expense > em {
  color: #b94b35;
}

.tx-card.is-investment > em {
  color: #b7791f;
}

.tx-card.is-loan-payment > em {
  color: #2563eb;
}

.tx-card > em svg {
  width: 17px;
  height: 17px;
}

.tx-main,
.tx-side {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tx-main strong {
  font-size: var(--type-meta);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-side {
  text-align: left;
}

.tx-side strong {
  color: var(--primary);
  font-size: var(--type-meta);
  white-space: nowrap;
}

.tx-card.is-expense .tx-side strong {
  color: #a9402f;
}

.tx-card.is-investment .tx-side strong {
  color: #9a6700;
}

.tx-card.is-loan-payment .tx-side strong {
  color: #1d4ed8;
}

.tx-side span {
  font-size: var(--type-caption);
}

.delete {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 11px;
  color: var(--danger);
  background: #fff0ef;
}

.tx-menu-dot {
  color: var(--primary);
  background: rgba(255, 255, 255, 0.8);
}

.tx-action-menu {
  position: absolute;
  z-index: 52;
  top: calc(100% - 8px);
  inset-inline-end: 10px;
  display: grid;
  gap: 4px;
  min-width: 168px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 32px rgba(16, 42, 34, 0.16);
}

.tx-card:nth-last-child(-n + 2) .tx-action-menu {
  top: auto;
  bottom: calc(100% - 8px);
}

.tx-action-menu.opens-down {
  top: calc(100% - 8px);
  bottom: auto;
}

.tx-action-menu.opens-up {
  top: auto;
  bottom: calc(100% - 8px);
}

.tx-action-menu button {
  min-height: 40px;
  width: 100%;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  background: #f6faf8;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.tx-action-menu button:last-child {
  color: var(--danger);
  background: #fff0ef;
}

.delete svg {
  width: 17px;
  height: 17px;
}

.form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: var(--type-small);
}

.form input,
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 13px;
  outline: 0;
  color: var(--text);
  background: #fbfdfc;
}

.form textarea {
  min-height: 130px;
  resize: vertical;
}

.password-toggle-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-toggle-field input {
  padding-inline-end: 50px !important;
}

.password-toggle-button {
  position: absolute;
  inset-inline-end: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  min-height: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  padding: 0;
}

.password-toggle-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(16, 107, 92, 0.12);
}

.m-button {
  min-height: 50px;
  border: 0;
  border-radius: 17px;
  padding: 0 16px;
  color: #fff;
  background: var(--primary);
}

.m-button.ghost {
  color: var(--primary);
  background: #eef7f4;
}

.otp-panel {
  display: grid;
  gap: 5px;
  border: 1px solid #cfe7de;
  border-radius: 16px;
  padding: 12px;
  color: var(--primary-dark);
  background: #eef8f4;
  text-align: center;
}

.otp-panel span {
  direction: ltr;
  font-weight: 900;
}

.otp-panel small {
  color: var(--muted);
  line-height: 1.6;
}

.import-preview-form {
  gap: 12px;
}

.import-preview-item {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdfc;
}

.import-preview-item .wide {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .import-preview-item {
    grid-template-columns: 1fr;
  }

  .import-preview-item .wide {
    grid-column: auto;
  }
}

.danger-button {
  background: var(--danger);
}

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

.tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 15px;
  color: var(--primary);
  background: #eef7f4;
}

.tabs button.active {
  color: #fff;
  background: var(--primary);
}

.soft-note {
  padding: 12px;
  border-radius: 16px;
  background: #eef7f4;
}

.receipt-preview {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.bottom-nav {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 7px 10px 16px;
  border: 0;
  border-top: 1px solid #dddddd;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(19, 35, 31, 0.12);
}

.bottom-nav button {
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 6px;
  background: transparent;
  color: var(--muted);
}

.bottom-nav button.active {
  color: var(--primary);
  background: transparent;
  border-radius: 0;
  font-weight: 700;
  box-shadow: inset 0 3px 0 var(--primary);
}

.bottom-nav svg {
  width: 19px;
  height: 19px;
}

.auth-mobile {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}

.auth-mobile .m-card {
  width: min(430px, 100%);
  margin: 0;
}

.app-unlock {
  background:
    radial-gradient(circle at top right, rgba(0, 95, 75, 0.12), transparent 32%),
    linear-gradient(180deg, #f7fbf9 0%, #eef6f3 100%);
}

.app-unlock-card {
  width: min(430px, 100%);
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid #dbe9e4;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(19, 35, 31, 0.12);
}

.app-unlock-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  font-size: var(--type-number-sm);
  font-weight: 900;
}

.app-unlock-heading {
  display: grid;
  gap: 8px;
}

.app-unlock-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: var(--type-hero-title);
  line-height: 1.1;
}

.app-unlock-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.app-unlock-form {
  display: grid;
  gap: 14px;
}

.app-unlock-form label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: var(--type-small);
  font-weight: 800;
}

.app-unlock-form input {
  width: 100%;
  min-height: 54px;
  border: 1px solid #dbe9e4;
  border-radius: 16px;
  padding: 0 14px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.app-unlock-form input:focus {
  outline: 3px solid rgba(0, 95, 75, 0.12);
  border-color: var(--primary);
}

.app-unlock .m-button {
  width: 100%;
  justify-content: center;
}

.app-unlock .m-button svg {
  width: 20px;
  height: 20px;
}

.app-unlock-message {
  min-height: 22px;
  margin: 0;
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
}

.app-unlock-message[data-type="error"] {
  color: #b42318;
}

.auth-hero {
  width: min(430px, 100%);
  margin-bottom: 14px;
  padding: 26px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(145deg, var(--primary-dark), var(--primary));
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.auth-hero .app-logo {
  width: 96px;
  height: 96px;
  border-radius: 26px;
  flex: 0 0 auto;
}

.logo-on-dark {
  background-image: url("/logo-mark-light.svg");
}

.logo-on-light {
  background-image: url("/logo-mark-dark.svg");
}

.auth-hero h1 {
  margin: 0;
  font-size: var(--type-display-title);
  line-height: 1;
}

.auth-hero p {
  margin: 18px 0 0;
  color: #d8ebe6;
  font-size: var(--type-body-lg);
  line-height: 1.7;
}

.web-login-note,
.store-start-card {
  border: 1px solid #dbe9e4;
  border-radius: 16px;
  background: #f4faf8;
}

.web-login-note {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.web-login-note strong,
.store-start-card strong {
  color: var(--primary);
  font-size: var(--type-small);
}

.web-login-note span,
.store-start-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-meta);
  line-height: 1.6;
}

.auth-switch,
.auth-inline-actions button {
  border: 0;
  color: var(--primary);
  background: transparent;
  font: inherit;
  font-size: var(--type-meta);
  font-weight: 800;
  cursor: pointer;
}

.auth-switch {
  justify-self: center;
  padding: 2px 4px;
}

.auth-inline-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.store-start-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.store-start-card span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--primary);
  background: #e8f5f1;
}

.store-start-card svg {
  width: 20px;
  height: 20px;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 10px;
  color: var(--primary);
  font-size: var(--type-meta);
  font-weight: 800;
}

.auth-links a {
  text-decoration: none;
}

.toast {
  position: fixed;
  inset-inline: 18px;
  bottom: 24px;
  z-index: 50;
  width: min(430px, calc(100% - 36px));
  margin-inline: auto;
  padding: 14px 16px;
  border-radius: 18px;
  color: #fff;
  text-align: center;
  background: var(--primary-dark);
  box-shadow: var(--shadow);
}

.danger {
  color: var(--danger) !important;
}

.ok {
  color: #bff3d9 !important;
}

@media (max-width: 560px) {
  .android-shell {
    display: block;
    padding: 0;
  }

  .android-app {
    width: 100%;
    min-height: 100vh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .m-screen {
    min-height: 100vh;
    max-height: none;
    padding: 18px 14px 98px;
  }

  .spend-card strong {
    font-size: var(--type-number-lg);
  }

  .budget-card {
    grid-template-columns: 1fr 96px 1fr;
    padding: 15px;
  }

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

  .budget-side strong {
    font-size: var(--type-number-lg);
  }

  .reference-actions b {
    font-size: var(--type-small);
  }

  .ref-category-row {
    grid-template-columns: 70px 34px 1fr 88px 38px;
    gap: 8px;
  }

  .review-ref-row,
  .last-row {
    grid-template-columns: 78px 80px 1fr 38px;
  }

  .review-ref-row i {
    display: none;
  }

  .review-ref-row p {
    display: none;
  }
}

@media (min-width: 900px) {
  .android-shell::before {
    content: "تصميم أندرويد";
    position: fixed;
    top: 28px;
    right: 34px;
    color: var(--muted);
    font-size: var(--type-small);
  }
}

/* Compact reference pass */
.m-screen {
  padding: 12px 16px 92px;
}

.status-bar {
  height: 24px;
  margin-bottom: 12px;
  font-size: var(--type-body-lg);
}

.home-header {
  margin-bottom: 10px;
}

.home-header button,
.header-icons button {
  width: 38px;
  height: 38px;
}

.home-header svg {
  width: 24px;
  height: 24px;
}

.brand-title {
  font-size: var(--type-app-title);
}

.greeting {
  margin-bottom: 12px;
}

.greeting h2 {
  font-size: var(--type-page-title);
}

.greeting p {
  font-size: var(--type-small);
}

.budget-card {
  min-height: 122px;
  padding: 14px;
  border-radius: 16px;
}

.budget-side span,
.budget-side small {
  font-size: var(--type-meta);
}

.budget-side strong {
  font-size: var(--type-number-lg);
}

.budget-side .soft {
  font-size: var(--type-number);
}

.budget-side em {
  margin-top: 4px;
  padding: 5px 9px;
  font-size: var(--type-caption);
}

.donut {
  width: 98px;
  height: 98px;
}

.donut::before {
  inset: 12px;
}

.donut b {
  font-size: var(--type-number-sm);
  transform: translateY(-6px);
}

.donut span {
  margin-top: 18px;
  font-size: var(--type-caption);
}

.reference-actions {
  margin: 10px 0;
  border-radius: 16px;
}

.reference-actions button {
  min-height: 58px;
  gap: 8px;
  padding: 7px 9px;
}

.reference-actions span {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.reference-actions b {
  font-size: var(--type-meta);
}

.reference-actions svg {
  width: 20px;
  height: 20px;
}

.ref-card,
.review-ref-card {
  padding: 14px;
  margin-top: 12px;
  border-radius: 16px;
}

.review-ref-head {
  grid-template-columns: 80px 1fr 38px;
  gap: 10px;
  padding-bottom: 11px;
}

.review-ref-head button {
  min-height: 36px;
}

.review-ref-head h3,
.ref-title h3 {
  font-size: var(--type-card-title);
}

.review-ref-head p {
  font-size: var(--type-meta);
}

.review-ref-head > span,
.review-ref-row em,
.last-row em,
.ref-category-row em {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.review-ref-row {
  grid-template-columns: 80px 8px 86px 1fr 36px;
  gap: 8px;
  padding-top: 10px;
  font-size: var(--type-meta);
}

.ref-title {
  margin-bottom: 8px;
}

.ref-title button {
  font-size: var(--type-small);
}

.ref-category-row {
  grid-template-columns: 66px 34px 1fr 104px 36px;
  gap: 8px;
  min-height: 44px;
}

.ref-category-row strong {
  font-size: var(--type-body);
}

.ref-line {
  height: 6px;
}

.last-row {
  grid-template-columns: 78px 80px 1fr 36px;
  gap: 8px;
  min-height: 48px;
}

.last-row span,
.last-row small {
  font-size: var(--type-caption);
}

.last-row strong {
  font-size: var(--type-meta);
}

.bottom-nav {
  padding: 5px 10px 12px;
}

.bottom-nav button {
  min-height: 50px;
}

.bottom-nav svg {
  width: 17px;
  height: 17px;
}

.bottom-nav span {
  font-size: var(--type-caption);
}

@media (max-width: 560px) {
  .budget-card {
    grid-template-columns: 1fr 86px 1fr;
    padding: 12px;
  }

  .donut {
    width: 90px;
    height: 90px;
  }

  .budget-side strong {
    font-size: var(--type-number);
  }

  .reference-actions b {
    font-size: var(--type-meta);
  }

  .ref-category-row {
    grid-template-columns: 58px 32px 1fr 88px 34px;
    gap: 7px;
  }
}

/* RTL refinement pass */
.home-header {
  grid-template-columns: 40px auto 1fr;
}

.header-icons {
  justify-content: flex-end;
}

.brand-title {
  font-size: var(--type-app-title);
}

.greeting h2 {
  font-size: var(--type-section-title);
}

.greeting p {
  font-size: var(--type-meta);
}

.budget-side {
  text-align: right;
}

.budget-side.left {
  text-align: center;
  justify-items: center;
}

.budget-side strong {
  font-size: var(--type-number);
}

.budget-side .soft {
  font-size: var(--type-card-title);
}

.budget-side span,
.budget-side small {
  font-size: var(--type-caption);
}

.reference-actions b {
  font-size: var(--type-caption);
}

.review-ref-head h3,
.ref-title h3 {
  font-size: var(--type-body);
}

.ref-title {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}

.ref-title h3 {
  text-align: right;
  font-size: var(--type-small);
}

.ref-title button {
  margin-inline-start: auto;
  font-size: var(--type-meta);
}

.ref-category-row {
  grid-template-columns: 28px 78px 1fr 30px 54px;
  min-height: 38px;
  gap: 7px;
}

.ref-category-row strong {
  font-size: var(--type-meta);
  text-align: right;
}

.ref-category-row span,
.ref-category-row small {
  font-size: var(--type-caption);
}

.ref-category-row em {
  width: 31px;
  height: 31px;
  border-radius: 11px;
}

.ref-category-row em svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.4;
}

.ref-title h3 {
  font-size: var(--type-small);
}

.ref-line {
  height: 5px;
}

@media (max-width: 560px) {
  .brand-title {
    font-size: var(--type-app-title);
  }

  .budget-side strong {
    font-size: var(--type-section-title);
  }

  .reference-actions b {
    font-size: var(--type-caption);
  }

  .ref-category-row {
    grid-template-columns: 28px 70px 1fr 28px 48px;
    gap: 6px;
  }

  .ref-category-row strong {
    font-size: var(--type-caption);
  }

  .ref-category-row span,
  .ref-category-row small {
    font-size: var(--type-caption);
  }
}

/* Force category bars to grow from the right */
.ref-line {
  position: relative;
  overflow: hidden;
}

.ref-line i {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  margin: 0;
}

/* English LTR layout */
.is-ltr .android-app {
  direction: ltr;
}

.is-ltr .home-header {
  grid-template-columns: 40px auto 1fr;
}

.is-ltr .home-header > button {
  grid-column: 1;
  justify-self: start;
}

.is-ltr .brand-title {
  grid-column: 2;
}

.is-ltr .header-icons {
  grid-column: 3;
  justify-content: flex-end;
  flex-direction: row;
  padding-right: 2px;
}

.is-ltr .greeting,
.is-ltr .budget-side,
.is-ltr .ref-title h3,
.is-ltr .ref-category-row strong,
.is-ltr .last-row div {
  text-align: left;
}

.is-ltr .budget-card {
  direction: ltr;
  grid-template-columns: 1fr 98px 1fr;
}

.is-ltr .budget-side.end {
  order: 3;
  text-align: right;
}

.is-ltr .donut {
  order: 2;
  justify-self: center;
}

.is-ltr .budget-side.left {
  order: 1;
  text-align: center;
}

.is-ltr .reference-actions {
  direction: ltr;
}

.is-ltr .reference-actions button {
  grid-template-columns: 42px 1fr;
  text-align: center;
}

.is-ltr .reference-actions b {
  text-align: center;
  line-height: 1.2;
}

.is-ltr .ref-title {
  flex-direction: row;
}

.is-ltr .ref-title button {
  margin-left: auto;
  margin-inline-start: auto;
  margin-right: 0;
  justify-self: end;
}

.is-ltr .ref-title h3 {
  order: 1;
}

.is-ltr .ref-title button {
  order: 2;
}

.is-ltr .ref-category-row {
  grid-template-columns: 34px 88px 1fr 32px 60px;
}

.is-ltr .ref-line i {
  left: 0;
  right: auto;
}

.is-ltr .last-row {
  grid-template-columns: 36px 1fr 82px 78px;
}

.is-ltr .tx-card {
  direction: ltr;
  grid-template-columns: 38px 1fr auto 34px;
}

.is-ltr .tx-main {
  text-align: left;
}

.is-ltr .tx-side {
  text-align: right;
}

.is-ltr .last-row em {
  grid-column: 1;
}

.is-ltr .last-row div {
  grid-column: 2;
}

.is-ltr .last-row strong {
  grid-column: 3;
}

.is-ltr .last-row > span {
  grid-column: 4;
}

@media (max-width: 560px) {
  .is-ltr .home-header {
    grid-template-columns: 36px auto 1fr;
  }

  .is-ltr .budget-card {
    grid-template-columns: 1fr 90px 1fr;
  }

  .is-ltr .ref-category-row {
    grid-template-columns: 30px 72px 1fr 28px 54px;
  }

  .is-ltr .last-row {
    grid-template-columns: 34px 1fr 70px 66px;
  }
}

/* Tighter cards pass */
.ref-card {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ref-title {
  margin-bottom: 5px;
}

.ref-category-row {
  min-height: 35px;
}

.last-row {
  min-height: 42px;
}

.ref-card .empty {
  padding: 8px 0;
}

/* Real Android device polish */
@media (max-width: 560px) {
  html,
  body,
  #app,
  .android-shell,
  .android-app {
    min-height: 100dvh;
    background: #fff;
  }

  .status-bar {
    display: none;
  }

  .m-screen {
    min-height: 100dvh;
    padding: 16px 15px 120px;
  }

  .home-header {
    margin-top: 2px;
    margin-bottom: 9px;
  }

  .home-header button,
  .header-icons button {
    width: 36px;
    height: 36px;
  }

  .home-header svg {
    width: 22px;
    height: 22px;
  }

  .brand-title {
    font-size: var(--type-app-title);
  }

  .greeting {
    margin-bottom: 10px;
  }

  .greeting h2 {
    font-size: var(--type-section-title);
    line-height: var(--leading-title);
  }

  .greeting p {
    font-size: var(--type-meta);
  }

  .budget-card {
    min-height: 118px;
    padding: 12px;
    grid-template-columns: 1fr 92px 1fr;
  }

  .donut {
    width: 92px;
    height: 92px;
  }

  .donut::before {
    inset: 13px;
  }

  .donut b {
    font-size: var(--type-section-title);
  }

  .donut span {
    font-size: var(--type-caption);
  }

  .budget-side span,
  .budget-side small {
    font-size: var(--type-caption);
  }

  .budget-side strong {
    font-size: var(--type-section-title);
  }

  .budget-side .soft {
    font-size: var(--type-body-lg);
  }

  .reference-actions {
    margin: 9px 0;
  }

  .reference-actions button {
    min-height: 54px;
    padding: 6px 7px;
    gap: 6px;
  }

  .reference-actions span {
    width: 34px;
    height: 34px;
  }

  .reference-actions b {
    font-size: var(--type-caption);
    line-height: 1.25;
  }

  .ref-card {
    margin-top: 10px;
    padding: 10px 11px;
  }

  .ref-title h3 {
    font-size: var(--type-meta);
  }

  .ref-title button {
    font-size: var(--type-meta);
  }

  .ref-category-row {
    grid-template-columns: 30px 62px 1fr 28px 46px;
    min-height: 34px;
    gap: 5px;
  }

  .ref-category-row strong {
    font-size: var(--type-caption);
    line-height: 1.1;
    white-space: nowrap;
  }

  .ref-category-row span,
  .ref-category-row small {
    font-size: var(--type-caption);
  }

  .ref-category-row em,
  .last-row em,
  .review-ref-head > span,
  .review-ref-row em {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .ref-category-row em svg,
  .last-row em svg {
    width: 18px;
    height: 18px;
  }

  .bottom-nav {
    bottom: 0;
    min-height: 64px;
    padding: 4px 10px 8px;
    border-top: 1px solid rgba(0, 95, 75, 0.12);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
  }

  .bottom-nav button {
    min-height: 48px;
    align-content: center;
  }

  .bottom-nav svg {
    width: 18px;
    height: 18px;
  }

  .bottom-nav span {
    font-size: var(--type-caption);
    line-height: 1.1;
    color: inherit;
  }

  .is-ltr .ref-category-row {
    grid-template-columns: 30px 70px 1fr 28px 52px;
  }
}

.last-row {
  grid-template-columns: 62px minmax(0, 1fr) 82px 30px;
  gap: 8px;
  min-height: 40px;
}

.last-row button {
  width: 30px;
  height: 30px;
}

.last-row button svg {
  width: 17px;
  height: 17px;
}

.is-ltr .last-row {
  grid-template-columns: 62px minmax(0, 1fr) 82px 30px;
}

.is-ltr .last-row > span,
.is-ltr .last-row div,
.is-ltr .last-row strong {
  grid-column: auto;
}

.is-ltr .last-row div {
  text-align: left;
}

@media (max-width: 420px) {
  .last-row {
    grid-template-columns: 52px minmax(0, 1fr) 72px 28px;
    gap: 6px;
  }

  .last-row span,
  .last-row strong,
  .last-row b {
    font-size: var(--type-caption);
  }
}

/* Keep app chrome fixed while only the page body scrolls. */
.android-app {
  height: min(920px, calc(100vh - 48px));
  min-height: 0;
  overflow: hidden;
}

.m-screen {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 24;
  margin-inline: -2px;
  padding: 6px 2px 8px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.bottom-nav {
  position: absolute;
  z-index: 25;
}

@media (max-width: 560px) {
  .operations-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .operations-toolbar button {
    min-height: 30px;
    padding: 3px 4px;
    border-radius: 10px;
    font-size: var(--type-caption);
    line-height: 1.2;
  }

  .tx-group-head {
    grid-template-columns: 1fr auto 18px;
    min-height: 38px;
    padding-block: 5px;
    gap: 6px;
  }

  .tx-group-head span,
  .tx-group-head strong {
    font-size: var(--type-meta);
  }

  .tx-group-head em {
    width: 18px;
    height: 18px;
  }

  .tx-group-items {
    padding-bottom: 6px;
  }

  .tx-card {
    grid-template-columns: 30px 1fr auto 28px;
    gap: 6px;
    padding-block: 6px;
  }

  .tx-card > em {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  .tx-card > em svg {
    width: 16px;
    height: 16px;
  }

  .tx-main strong {
    font-size: var(--type-meta);
  }

  .tx-side strong {
    font-size: var(--type-caption);
  }

  .tx-side span,
  .tx-card span {
    font-size: var(--type-caption);
  }

  .tx-card .delete {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  .receivable-collect-form {
    grid-template-columns: 1fr;
  }

  .android-shell {
    min-height: 100dvh;
    padding: 0;
  }

  .android-app {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .m-screen {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding-bottom: 96px !important;
  }
}

/* v59: keep the top chrome pinned from the first pixel and hide scrolled content behind it. */
.m-screen {
  padding-top: 0 !important;
  background: var(--app);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  margin-inline: -18px !important;
  margin-bottom: 12px;
  padding: 14px 18px 10px !important;
  background: var(--app) !important;
  border-bottom: 1px solid rgba(0, 95, 75, 0.08);
  box-shadow: 0 8px 18px rgba(255, 255, 255, 0.96);
}

.app-topbar::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -90px;
  height: 90px;
  background: var(--app);
}

.ref-category-row em,
.expense-summary-row > em,
.select-with-icon em,
.budget-item-row em,
.gold-icon {
  color: var(--primary) !important;
  background: #eef6f1 !important;
}

.tx-menu-spacer {
  width: 34px;
  height: 34px;
}

.tx-card.is-investment {
  border-color: rgba(216, 154, 40, 0.22);
  background: #fff8df;
}

.tx-card.is-loan-payment {
  border-color: rgba(37, 99, 235, 0.18);
  background: #eef6ff;
}

@media (max-width: 560px) {
  .receivable-hero {
    grid-template-columns: 1fr;
  }

  .receivable-money {
    grid-template-columns: 1fr 1fr;
  }

  .receivable-money small {
    grid-column: 1 / -1;
  }
}

/* consolidated UX pack: mobile-first navigation, notifications, reports, and cleaner forms */
.home-greeting-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 14px;
}

.home-greeting-row div {
  text-align: start;
}

.home-greeting-row span,
.home-greeting-row time {
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: 700;
}

.home-greeting-row h2 {
  margin: 4px 0 0;
  font-size: var(--type-page-title);
  line-height: var(--leading-title);
}

.bottom-nav {
  overflow: visible;
  border-radius: 28px 28px 0 0;
  padding: 9px 12px 12px;
  box-shadow: 0 -18px 32px rgba(0, 54, 42, 0.12);
}

.bottom-nav button {
  min-width: 0;
}

.bottom-nav .nav-add {
  transform: translateY(-24px);
  border-radius: 999px;
  width: 64px;
  height: 64px;
  color: #fff;
  background: linear-gradient(180deg, #0f9f74, #006b55);
  box-shadow: 0 18px 30px rgba(0, 95, 75, 0.28);
}

.bottom-nav .nav-add svg {
  width: 26px;
  height: 26px;
}

.bottom-nav .nav-add span {
  font-size: var(--type-caption);
  color: #fff;
}

.screen-header {
  margin-top: 10px;
}

.onboarding-card {
  margin-top: 12px;
}

.notifications-hero,
.report-hero,
.report-kpi-grid,
.asset-report-grid {
  display: grid;
  gap: 10px;
}

.notifications-hero {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 12px;
}

.notifications-hero div,
.report-hero,
.report-kpi-grid article,
.asset-report-grid div,
.guide-hero {
  border: 1px solid rgba(0, 95, 75, 0.1);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 12px 26px rgba(0, 54, 42, 0.06);
}

.notifications-hero span,
.report-hero span,
.report-kpi-grid span,
.asset-report-grid span {
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 700;
}

.notifications-hero strong,
.report-hero strong,
.report-kpi-grid strong,
.asset-report-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--primary);
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-row {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(0, 95, 75, 0.1);
  border-radius: 18px;
  background: #fff;
  padding: 12px;
}

.notification-row.unread {
  border-color: rgba(0, 116, 89, 0.28);
  background: #f4fbf7;
}

.notification-row > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
}

.notification-row em,
.more-grid em,
.quick-destination-grid em,
.guide-grid em,
.report-kpi-grid em {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--primary);
  background: #eef8f2;
}

.notification-row strong,
.notification-row small {
  display: block;
}

.notification-row small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.5;
}

.notification-actions {
  display: flex;
  gap: 8px;
}

.notification-actions button,
.report-action-row button,
.guide-grid button {
  border: 1px solid rgba(0, 95, 75, 0.16);
  border-radius: 12px;
  background: #fff;
  color: var(--primary);
  padding: 9px 12px;
  font-weight: 800;
}

.notification-actions button:last-child {
  color: #8a3b3b;
}

.more-section {
  margin-bottom: 12px;
}

.more-section h3 {
  margin: 0 0 12px;
}

.more-grid,
.quick-destination-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.more-grid button,
.quick-destination-grid button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 95, 75, 0.1);
  border-radius: 16px;
  background: #f8fcfa;
  padding: 12px;
  color: var(--ink);
  font-weight: 800;
}

.more-screen {
  padding-top: 24px !important;
}

.more-page-title {
  margin: 0 0 14px;
  color: #0a332d;
  font-size: var(--type-page-title);
  font-weight: 900;
  line-height: var(--leading-tight);
  text-align: right;
  letter-spacing: 0;
}

.more-list-section {
  margin-bottom: 13px;
  padding: 13px 12px 7px;
  border: 1px solid rgba(0, 63, 50, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 30px rgba(0, 54, 42, 0.06);
}

.more-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.more-section-heading em {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.more-section-heading svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.15;
}

.more-section-heading h3 {
  margin: 0;
  color: #102d28;
  font-size: var(--type-section-title);
  font-weight: 800;
  line-height: 1.25;
}

.more-list {
  display: grid;
}

.more-row {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  border-top: 1px solid rgba(0, 63, 50, 0.08);
  border-radius: 0;
  background: transparent;
  color: #162f2a;
  padding: 7px 0;
  text-align: right;
}

.more-row:first-child {
  border-top: 0;
}

.more-row:active {
  transform: scale(0.99);
}

.more-row em {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  color: #0b2f29;
  background: linear-gradient(135deg, #edf7f3, #e2f1ec);
  box-shadow: inset 0 0 0 1px rgba(0, 95, 75, 0.06);
}

.more-row svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.05;
}

.more-row span {
  min-width: 0;
  color: inherit;
  font-size: var(--type-body-lg);
  font-weight: 720;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-row.is-locked,
.top-menu button.is-locked,
.quick-destination-grid button.is-locked,
.settings-action-card.is-locked {
  color: #6f817b;
}

.more-row.is-locked em,
.top-menu button.is-locked svg,
.quick-destination-grid button.is-locked svg,
.settings-action-card.is-locked em {
  opacity: 0.72;
}

@media (max-width: 390px) {
  .more-screen {
    padding-top: 20px !important;
  }

  .more-page-title {
    margin-bottom: 12px;
    font-size: var(--type-page-title);
  }

  .more-list-section {
    padding: 12px 11px 7px;
    border-radius: 22px;
  }

  .more-section-heading h3 {
    font-size: var(--type-card-title);
  }

  .more-row {
    min-height: 48px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
  }

  .more-row em {
    width: 30px;
    height: 30px;
  }

  .more-row span {
    font-size: var(--type-body);
  }
}

.guide-hero {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: #fff;
  background: linear-gradient(135deg, #005f4b, #0f9f74);
}

.guide-hero span {
  color: rgba(255, 255, 255, 0.84);
}

.guide-grid {
  display: grid;
  gap: 10px;
}

.guide-grid article {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 95, 75, 0.1);
  border-radius: 18px;
  background: #fff;
  padding: 12px;
}

.guide-grid h3,
.guide-grid p {
  margin: 0;
}

.guide-grid p {
  color: var(--muted);
  line-height: 1.45;
}

.report-hero {
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 10px;
}

.report-hero input {
  min-width: 132px;
  border: 1px solid rgba(0, 95, 75, 0.14);
  border-radius: 12px;
  padding: 10px;
}

.report-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.report-action-row button:disabled {
  color: var(--muted);
  background: #f2f5f4;
}

.report-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.report-kpi-grid article {
  display: grid;
  gap: 7px;
}

.report-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.report-tabs button {
  flex: 0 0 auto;
  border: 1px solid rgba(0, 95, 75, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 9px 13px;
  font-weight: 800;
}

.report-tabs button.active {
  color: #fff;
  background: var(--primary);
}

.professional-report-card h4 {
  margin: 18px 0 8px;
}

.budget-report-meter {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #e8f1ed;
}

.budget-report-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f9f74, #f0b429);
}

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

.executive-summary,
.recommendation-list {
  display: grid;
  gap: 8px;
}

.executive-summary p,
.recommendation-list p {
  margin: 0;
  border-radius: 14px;
  background: #f5faf7;
  padding: 12px;
  color: var(--ink);
}

#transactionForm .form-actions,
#budgetItemForm .form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#transactionForm .m-button,
#budgetItemForm .m-button {
  min-height: 46px;
  padding: 11px 14px;
}

.search-panel {
  margin-bottom: 12px;
}

@media (max-width: 390px) {
  .report-kpi-grid,
  .asset-report-grid,
  .more-grid,
  .quick-destination-grid {
    grid-template-columns: 1fr;
  }

  .guide-grid article {
    grid-template-columns: 44px 1fr;
  }

  .guide-grid button {
    grid-column: 1 / -1;
  }
}

/* bottom navigation final reference treatment */
.bottom-nav {
  position: absolute !important;
  inset-inline: 14px !important;
  bottom: 10px !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: end !important;
  min-height: 92px !important;
  padding: 14px 14px 12px !important;
  overflow: visible !important;
  border: 1px solid rgba(0, 95, 75, 0.08) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 -16px 36px rgba(12, 45, 37, 0.12) !important;
  backdrop-filter: blur(18px) !important;
}

.bottom-nav::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 50%;
  width: 112px;
  height: 70px;
  border-radius: 0 0 70px 70px;
  background: var(--app);
  transform: translateX(-50%);
  box-shadow: inset 0 -1px 0 rgba(0, 95, 75, 0.08);
  pointer-events: none;
}

.bottom-nav button {
  position: relative;
  z-index: 1;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  min-width: 0 !important;
  min-height: 62px !important;
  gap: 7px !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #687671 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.bottom-nav button.active:not(.nav-add) {
  color: var(--primary) !important;
}

.bottom-nav button.active:not(.nav-add)::before {
  content: "";
  position: absolute;
  top: -11px;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
}

.bottom-nav svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.9 !important;
}

.bottom-nav span {
  display: block !important;
  color: inherit !important;
  font-size: var(--type-meta) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.bottom-nav .nav-add {
  align-self: start !important;
  transform: translateY(-46px) !important;
  width: 78px !important;
  height: 78px !important;
  min-height: 78px !important;
  margin-inline: auto !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #118a59, #006b43) !important;
  box-shadow: 0 22px 34px rgba(0, 95, 75, 0.3) !important;
}

.bottom-nav .nav-add svg {
  width: 38px !important;
  height: 38px !important;
  stroke-width: 1.8 !important;
}

.bottom-nav .nav-add span {
  margin-top: -4px;
  font-size: var(--type-small) !important;
  color: #fff !important;
}

.nav-badge {
  position: absolute;
  top: 3px;
  inset-inline-end: calc(50% - 23px);
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #0f9f74;
  color: #fff;
  font-size: var(--type-caption);
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 95, 75, 0.22);
}

@media (max-width: 390px) {
  .bottom-nav {
    inset-inline: 10px !important;
    min-height: 86px !important;
    padding-inline: 9px !important;
  }

  .bottom-nav span {
    font-size: var(--type-caption) !important;
  }

  .bottom-nav .nav-add {
    width: 70px !important;
    height: 70px !important;
    min-height: 70px !important;
  }
}

/* bottom navigation correction: raised add circle with label below, no wrapped item */
.m-screen {
  padding-bottom: 142px !important;
}

.bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  min-height: 106px !important;
  padding: 18px 22px 14px !important;
}

.bottom-nav::before {
  display: none !important;
}

.bottom-nav button {
  min-height: 72px !important;
  gap: 10px !important;
}

.bottom-nav button.active:not(.nav-add)::before {
  top: -14px !important;
  width: 56px !important;
  height: 5px !important;
}

.bottom-nav .nav-add {
  width: auto !important;
  height: 72px !important;
  min-height: 72px !important;
  transform: none !important;
  color: #565f5d !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bottom-nav .nav-add-circle {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin-top: -64px;
  border: 9px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #118a59, #006b43);
  box-shadow: 0 22px 34px rgba(0, 95, 75, 0.24);
}

.bottom-nav .nav-add-circle svg {
  width: 42px !important;
  height: 42px !important;
  stroke-width: 1.8 !important;
}

.bottom-nav .nav-add > span {
  margin-top: -8px;
  color: #565f5d !important;
  font-size: var(--type-body-lg) !important;
  font-weight: 800 !important;
}

.nav-badge {
  top: 9px !important;
}

@media (max-width: 390px) {
  .bottom-nav {
    padding-inline: 14px !important;
  }

  .bottom-nav .nav-add-circle {
    width: 78px;
    height: 78px;
    margin-top: -58px;
  }
}

/* bottom navigation rebuild: one-piece compact bar with a small center rise */
.android-app {
  overflow-x: hidden !important;
}

.m-screen {
  padding-bottom: 104px !important;
}

.bottom-nav {
  position: absolute !important;
  inset-inline: 0 !important;
  bottom: 0 !important;
  z-index: 60 !important;
  width: auto !important;
  min-height: 82px !important;
  height: 82px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 0 !important;
  padding: 11px 8px 10px !important;
  overflow: visible !important;
  border: 1px solid rgba(0, 95, 75, 0.08) !important;
  border-bottom: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  background: #fff !important;
  box-shadow: 0 -12px 26px rgba(10, 44, 36, 0.12) !important;
  backdrop-filter: blur(14px) !important;
}

.bottom-nav::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -22px !important;
  left: 50% !important;
  z-index: 0 !important;
  width: 82px !important;
  height: 42px !important;
  border-radius: 44px 44px 0 0 !important;
  background: #fff !important;
  border: 1px solid rgba(0, 95, 75, 0.08) !important;
  border-bottom: 0 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 -8px 18px rgba(10, 44, 36, 0.06) !important;
  pointer-events: none !important;
}

.bottom-nav button {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #6b7773 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.bottom-nav button.active:not(.nav-add) {
  color: var(--primary) !important;
  background: transparent !important;
}

.bottom-nav button.active:not(.nav-add)::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  width: 44px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: var(--primary) !important;
  transform: translateX(-50%) !important;
}

.bottom-nav svg {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 2 !important;
}

.bottom-nav span {
  display: block !important;
  max-width: 100% !important;
  color: inherit !important;
  font-size: var(--type-caption) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bottom-nav .nav-add {
  height: 66px !important;
  min-height: 66px !important;
  align-content: end !important;
  color: #545f5b !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bottom-nav .nav-add-circle {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  margin-top: -28px !important;
  margin-bottom: 2px !important;
  border: 5px solid #fff !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #11945f, #006f47) !important;
  box-shadow: 0 14px 22px rgba(0, 95, 75, 0.24) !important;
}

.bottom-nav .nav-add-circle svg {
  width: 31px !important;
  height: 31px !important;
  stroke-width: 1.9 !important;
}

.bottom-nav .nav-add > span {
  margin: 0 !important;
  color: #545f5b !important;
  font-size: var(--type-caption) !important;
  font-weight: 800 !important;
}

.nav-badge {
  top: 7px !important;
  inset-inline-end: calc(50% - 22px) !important;
  min-width: 18px !important;
  height: 18px !important;
  font-size: var(--type-caption) !important;
}

@media (max-width: 390px) {
  .bottom-nav {
    min-height: 78px !important;
    height: 78px !important;
    padding-inline: 5px !important;
  }

  .bottom-nav svg {
    width: 19px !important;
    height: 19px !important;
  }

  .bottom-nav span,
  .bottom-nav .nav-add > span {
    font-size: var(--type-caption) !important;
  }

  .bottom-nav .nav-add-circle {
    width: 54px !important;
    height: 54px !important;
    margin-top: -25px !important;
  }
}

/* bottom navigation visual refinement: aligned labels, single soft bar, clean add button */
.m-screen {
  padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important;
}

.bottom-nav {
  --nav-surface: rgba(248, 251, 249, 0.94);
  --nav-muted: #6d7975;
  position: absolute !important;
  inset-inline: 0 !important;
  bottom: 0 !important;
  z-index: 70 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: end !important;
  width: auto !important;
  height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 0 !important;
  padding: 9px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: visible !important;
  border: 1px solid rgba(0, 95, 75, 0.07) !important;
  border-bottom: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background: var(--nav-surface) !important;
  box-shadow: 0 -10px 24px rgba(16, 54, 44, 0.09) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
}

.bottom-nav::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  z-index: 0 !important;
  width: 74px !important;
  height: 37px !important;
  border: 0 !important;
  border-radius: 42px 42px 0 0 !important;
  background: var(--nav-surface) !important;
  box-shadow: 0 -7px 18px rgba(16, 54, 44, 0.055) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

.bottom-nav button {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: 28px 17px !important;
  place-items: center !important;
  align-content: end !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  min-width: 0 !important;
  gap: 4px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--nav-muted) !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.bottom-nav button > svg {
  grid-row: 1 !important;
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.95 !important;
}

.bottom-nav button > span {
  grid-row: 2 !important;
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: var(--type-meta) !important;
  font-weight: 750 !important;
  line-height: 17px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bottom-nav button.active:not(.nav-add) {
  color: var(--primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bottom-nav button.active:not(.nav-add)::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  width: 42px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: var(--primary) !important;
  transform: translateX(-50%) !important;
}

.bottom-nav .nav-add {
  color: var(--nav-muted) !important;
  background: transparent !important;
}

.bottom-nav .nav-add-circle {
  position: absolute !important;
  top: -30px !important;
  left: 50% !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #118b5b 0%, #00734a 100%) !important;
  box-shadow: 0 14px 24px rgba(0, 95, 75, 0.22) !important;
  transform: translateX(-50%) !important;
}

.bottom-nav .nav-add-circle svg {
  width: 31px !important;
  height: 31px !important;
  stroke-width: 1.9 !important;
}

.bottom-nav .nav-add > span {
  grid-row: 2 !important;
  color: var(--nav-muted) !important;
  font-size: var(--type-meta) !important;
  line-height: 17px !important;
}

.nav-badge {
  top: 5px !important;
  inset-inline-end: calc(50% - 22px) !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #108f5e !important;
  color: #fff !important;
  font-size: var(--type-caption) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 18px !important;
}

@media (max-width: 390px) {
  .bottom-nav {
    height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    padding-inline: 5px !important;
  }

  .bottom-nav button {
    height: 53px !important;
    min-height: 53px !important;
    grid-template-rows: 26px 16px !important;
  }

  .bottom-nav button > svg {
    width: 20px !important;
    height: 20px !important;
  }

  .bottom-nav button > span,
  .bottom-nav .nav-add > span {
    font-size: var(--type-caption) !important;
    line-height: 16px !important;
  }

  .bottom-nav .nav-add-circle {
    top: -27px !important;
    width: 50px !important;
    height: 50px !important;
  }
}

/* final bottom nav alignment fix */
.bottom-nav {
  height: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  padding-top: 8px !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}

.bottom-nav::before {
  top: -12px !important;
  width: 66px !important;
  height: 26px !important;
  border-radius: 36px 36px 0 0 !important;
  box-shadow: 0 -4px 12px rgba(16, 54, 44, 0.04) !important;
}

.bottom-nav button {
  height: 54px !important;
  min-height: 54px !important;
  grid-template-rows: 29px 17px !important;
  align-content: end !important;
  gap: 3px !important;
}

.bottom-nav button.active:not(.nav-add)::before {
  top: -3px !important;
  width: 36px !important;
  height: 3px !important;
}

.bottom-nav .nav-add-circle {
  top: -18px !important;
  width: 48px !important;
  height: 48px !important;
  box-shadow: 0 10px 18px rgba(0, 95, 75, 0.2) !important;
}

.bottom-nav .nav-add-circle svg {
  width: 27px !important;
  height: 27px !important;
}

.bottom-nav button > span,
.bottom-nav .nav-add > span {
  align-self: end !important;
  height: 17px !important;
  line-height: 17px !important;
  margin: 0 !important;
}

.nav-badge {
  top: 4px !important;
}

@media (max-width: 390px) {
  .bottom-nav {
    height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-nav .nav-add-circle {
    top: -16px !important;
    width: 46px !important;
    height: 46px !important;
  }
}

/* bottom nav spacing polish: tighter icon-label rhythm and lower center button */
.bottom-nav button {
  grid-template-rows: 25px 16px !important;
  height: 54px !important;
  min-height: 54px !important;
  align-content: center !important;
  gap: 1px !important;
  transform: translateY(-3px) !important;
}

.bottom-nav button > svg {
  align-self: end !important;
  width: 21px !important;
  height: 21px !important;
}

.bottom-nav button > span,
.bottom-nav .nav-add > span {
  align-self: start !important;
  height: 16px !important;
  line-height: 16px !important;
  font-size: var(--type-caption) !important;
}

.bottom-nav .nav-add {
  transform: translateY(-3px) !important;
}

.bottom-nav .nav-add-circle {
  top: -11px !important;
  width: 47px !important;
  height: 47px !important;
}

.bottom-nav .nav-add-circle svg {
  width: 26px !important;
  height: 26px !important;
}

.bottom-nav::before {
  top: -14px !important;
  height: 28px !important;
}

.bottom-nav button.active:not(.nav-add)::before {
  top: -1px !important;
  width: 34px !important;
  height: 3px !important;
}

@media (max-width: 390px) {
  .bottom-nav button {
    grid-template-rows: 24px 16px !important;
    transform: translateY(-2px) !important;
  }

  .bottom-nav .nav-add {
    transform: translateY(-2px) !important;
  }

  .bottom-nav .nav-add-circle {
    top: -9px !important;
    width: 45px !important;
    height: 45px !important;
  }
}

/* bottom nav item vertical centering only: keep add circle/notch fixed */
.bottom-nav button:not(.nav-add) {
  grid-template-rows: 24px 16px !important;
  gap: 0 !important;
  transform: translateY(-6px) !important;
}

.bottom-nav button:not(.nav-add) > svg {
  align-self: end !important;
  margin-bottom: 0 !important;
}

.bottom-nav button:not(.nav-add) > span {
  align-self: start !important;
  line-height: 16px !important;
}

.bottom-nav .nav-add > span {
  transform: translateY(-3px) !important;
  line-height: 16px !important;
}

.bottom-nav button:not(.nav-add).active::before {
  top: 2px !important;
}

@media (max-width: 390px) {
  .bottom-nav button:not(.nav-add) {
    transform: translateY(-5px) !important;
  }

  .bottom-nav .nav-add > span {
    transform: translateY(-2px) !important;
  }
}

/* add-label baseline fix only */
.bottom-nav .nav-add > span {
  transform: translateY(-7px) !important;
}

@media (max-width: 390px) {
  .bottom-nav .nav-add > span {
    transform: translateY(-6px) !important;
  }
}

/* add-label size and baseline fix only */
.bottom-nav button.nav-add > span {
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--nav-muted) !important;
  font-size: var(--type-meta) !important;
  font-weight: 750 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  transform: translateY(-9px) !important;
}

@media (max-width: 390px) {
  .bottom-nav button.nav-add > span {
    font-size: var(--type-caption) !important;
    line-height: 16px !important;
    transform: translateY(-8px) !important;
  }
}

.bottom-nav button[data-view="more"] svg circle {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.55 !important;
}

/* home greeting row visual fix */
.home-greeting-row {
  align-items: center !important;
  gap: 10px !important;
  margin: 4px 0 10px !important;
  min-width: 0;
}

.home-greeting-row h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  color: var(--ink);
  font-size: var(--type-section-title) !important;
  font-weight: 800;
  line-height: 1.35 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
}

.home-greeting-row time {
  flex: 0 0 auto;
  max-width: 48%;
  color: var(--muted);
  font-size: var(--type-meta) !important;
  font-weight: 650 !important;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: end;
}

@media (max-width: 390px) {
  .home-greeting-row h2 {
    font-size: var(--type-body-lg) !important;
  }

  .home-greeting-row time {
    max-width: 45%;
    font-size: var(--type-caption) !important;
  }
}

/* owner polish: smaller greeting and tiny more circles */
.home-greeting-row {
  margin: 10px 0 14px !important;
}

.home-greeting-row h2 {
  font-size: var(--type-body-lg) !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

.bottom-nav button[data-view="more"] svg {
  width: 20px !important;
  height: 20px !important;
}

@media (max-width: 390px) {
  .home-greeting-row {
    margin: 9px 0 13px !important;
  }

  .home-greeting-row h2 {
    font-size: var(--type-body) !important;
  }
}

/* home greeting micro spacing and font polish */
.home-greeting-row {
  margin: 14px 0 18px !important;
}

.home-greeting-row h2 {
  font-size: var(--type-body) !important;
  line-height: 1.28 !important;
}

.home-greeting-row time {
  font-size: var(--type-caption) !important;
}

@media (max-width: 390px) {
  .home-greeting-row {
    margin: 12px 0 16px !important;
  }

  .home-greeting-row h2 {
    font-size: var(--type-small) !important;
  }

  .home-greeting-row time {
    font-size: var(--type-caption) !important;
  }
}

/* bottom nav notch color match */
.bottom-nav::before {
  background: var(--nav-surface, rgba(248, 251, 249, 0.94)) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
}

/* financial status card font weight polish */
.financial-metric-copy span {
  font-weight: 600 !important;
}

.financial-metric-copy strong,
.financial-snapshot-grid .financial-metric-copy strong {
  font-weight: 650 !important;
}

.financial-metric-content-primary .financial-metric-copy strong {
  font-weight: 700 !important;
}

/* Usage guide redesign */
.usage-guide-screen {
  padding-top: 12px;
  padding-bottom: 112px;
}

.usage-guide-header {
  position: relative;
  padding: 16px 8px 10px;
  text-align: center;
}

.usage-guide-logo {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 24px rgba(0, 54, 42, 0.12);
}

.usage-guide-title-block {
  max-width: 310px;
  margin: 0 auto;
  padding-top: 10px;
}

.usage-guide-title-block span {
  color: var(--primary);
  font-size: var(--type-body);
  font-weight: 750;
  line-height: 1.5;
}

.usage-guide-title-block h2 {
  margin: 8px 0 6px;
  color: #053d32;
  font-size: var(--type-guide-title);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

.usage-guide-title-block p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-body-lg);
  font-weight: 650;
  line-height: 1.6;
}

.usage-guide-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 82px;
  align-items: center;
  gap: 14px;
  margin: 16px 0 14px;
  padding: 22px 18px;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.15), transparent 34%),
    linear-gradient(135deg, #00624c, #08966b);
  box-shadow: 0 18px 34px rgba(0, 91, 71, 0.18);
}

.usage-guide-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  pointer-events: none;
}

.usage-guide-hero strong,
.usage-guide-hero p {
  position: relative;
  z-index: 1;
}

.usage-guide-hero strong {
  display: block;
  font-size: var(--type-hero-lead);
  font-weight: 900;
  line-height: 1.35;
}

.usage-guide-hero p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--type-body-lg);
  font-weight: 650;
  line-height: 1.7;
}

.usage-guide-hero em {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  color: #057352;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 24px rgba(0, 45, 33, 0.18);
}

.usage-guide-hero svg {
  width: 34px;
  height: 34px;
  stroke-width: 3;
}

.usage-guide-steps {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.usage-guide-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  right: 22px;
  bottom: 28px;
  border-right: 2px dashed rgba(0, 95, 75, 0.15);
  pointer-events: none;
}

.usage-step-card {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(0, 95, 75, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 28px rgba(0, 54, 42, 0.08);
  overflow: hidden;
}

.usage-step-main {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 54px minmax(0, 1fr) 62px;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 14px 14px 14px 12px;
  text-align: start;
}

.usage-step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--primary);
  background: #e8f4ef;
  font-size: var(--type-card-title);
  font-weight: 900;
}

.usage-step-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  color: var(--primary);
  background: #eef8f2;
  box-shadow: inset 0 0 0 1px rgba(0, 95, 75, 0.08);
}

.usage-step-icon svg {
  width: 25px;
  height: 25px;
}

.usage-step-copy {
  min-width: 0;
}

.usage-step-copy strong {
  display: block;
  color: #083d34;
  font-size: var(--type-number-sm);
  font-weight: 900;
  line-height: 1.35;
}

.usage-step-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: 650;
  line-height: 1.55;
}

.usage-step-action {
  justify-self: end;
  min-width: 54px;
  border: 1px solid rgba(0, 95, 75, 0.18);
  border-radius: 14px;
  padding: 9px 12px;
  color: var(--primary);
  background: #fbfdfc;
  font-size: var(--type-small);
  font-weight: 900;
  text-align: center;
}

.usage-step-card.is-open .usage-step-action {
  color: #fff;
  background: var(--primary);
}

.usage-step-detail {
  margin: 0 14px 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0, 95, 75, 0.09);
  background: #f6fbf8;
}

.usage-step-detail p,
.usage-step-detail ul {
  margin: 0;
  color: #23413a;
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.75;
}

.usage-step-detail p + p,
.usage-step-detail p + ul,
.usage-step-detail ul + p,
.usage-step-detail ul + ul {
  margin-top: 8px;
}

.usage-step-detail ul {
  padding: 0 18px 0 0;
}

.usage-step-detail li {
  margin: 3px 0;
}

.usage-guide-closing {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(0, 95, 75, 0.09);
  border-radius: 22px;
  background: linear-gradient(135deg, #eef7f4, #fbfdfc);
  box-shadow: 0 12px 26px rgba(0, 54, 42, 0.06);
}

.usage-guide-closing em {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #fff;
  background: var(--primary);
}

.usage-guide-closing svg {
  width: 25px;
  height: 25px;
  stroke-width: 3;
}

.usage-guide-closing strong {
  display: block;
  color: var(--primary);
  font-size: var(--type-section-title);
  font-weight: 900;
}

.usage-guide-closing p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--type-small);
  font-weight: 650;
  line-height: 1.6;
}

@media (max-width: 390px) {
  .usage-guide-title-block h2 {
    font-size: var(--type-guide-title);
  }

  .usage-guide-title-block p,
  .usage-guide-hero p {
    font-size: var(--type-small);
  }

  .usage-guide-hero {
    grid-template-columns: 1fr 62px;
    padding: 18px 15px;
  }

  .usage-guide-hero strong {
    font-size: var(--type-hero-lead);
  }

  .usage-guide-hero em {
    width: 58px;
    height: 58px;
    border-radius: 20px;
  }

  .usage-step-main {
    grid-template-columns: 32px 44px minmax(0, 1fr) 54px;
    gap: 8px;
    padding: 12px 12px 12px 10px;
  }

  .usage-step-number {
    width: 29px;
    height: 29px;
    font-size: var(--type-body);
  }

  .usage-step-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .usage-step-copy strong {
    font-size: var(--type-card-title);
  }

  .usage-step-copy small {
    font-size: var(--type-meta);
  }

  .usage-step-action {
    min-width: 48px;
    padding: 8px 9px;
    font-size: var(--type-meta);
  }
}

.accounts-screen {
  gap: 14px;
}

.accounts-screen > .locked-lite {
  display: none;
}

.account-tool-card {
  display: grid;
  gap: 14px;
}

.cash-account-card {
  border-color: rgba(0, 118, 92, 0.16);
  background:
    linear-gradient(135deg, rgba(0, 118, 92, 0.08), rgba(255, 255, 255, 0.92) 42%),
    #fff;
}

.cash-account-main {
  display: grid;
  gap: 12px;
}

.cash-account-balance {
  background: rgba(255, 255, 255, 0.86);
}

.cash-account-inline-form {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 95, 75, 0.1);
}

.cash-adjustment-history {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--muted);
  background: rgba(0, 118, 92, 0.06);
  font-size: var(--type-meta);
  font-weight: 750;
}

.cash-adjustment-history small {
  color: var(--text);
  font-size: var(--type-meta);
  font-weight: 750;
}

.account-tool-list {
  display: grid;
  gap: 10px;
}

.account-section-title {
  align-items: flex-start;
  gap: 12px;
}

.account-section-title > div:first-child {
  display: grid;
  gap: 3px;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.section-actions .mini-button,
.bank-account-actions .mini-button,
.inline-form-head .mini-button {
  min-height: 34px;
  border: 1px solid rgba(0, 104, 82, 0.14);
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  background: var(--primary);
  font-size: var(--type-meta);
  font-weight: 850;
}

.section-actions .mini-button.ghost,
.bank-account-actions .mini-button.ghost,
.inline-form-head .mini-button.ghost {
  color: var(--primary);
  background: #eef7f4;
}

.bank-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.bank-account-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(0, 95, 75, 0.1);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fcfa);
}

.bank-account-card.is-default {
  border-color: rgba(0, 118, 92, 0.28);
  background: linear-gradient(180deg, #f7fdfb, #eef8f4);
}

.bank-account-top {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.bank-account-top em {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--primary);
  background: rgba(0, 118, 92, 0.08);
}

.bank-account-top svg {
  width: 21px;
  height: 21px;
}

.bank-account-top .bank-brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: #075f4b;
  background: linear-gradient(145deg, #e8f6f1, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(0, 118, 92, 0.08);
}

.bank-brand-mark span {
  display: block;
  max-width: 46px;
  overflow: hidden;
  text-align: center;
  color: inherit;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.bank-brand-snb { color: #006b55; background: linear-gradient(145deg, #e7f7f2, #ffffff); }
.bank-brand-rajhi { color: #0b5d9d; background: linear-gradient(145deg, #e8f2fb, #ffffff); }
.bank-brand-alinma { color: #7a4b1e; background: linear-gradient(145deg, #fff4e3, #ffffff); }
.bank-brand-riyad { color: #0b5a89; background: linear-gradient(145deg, #eaf6ff, #ffffff); }
.bank-brand-sab { color: #126c61; background: linear-gradient(145deg, #e9f7f4, #ffffff); }
.bank-brand-anb { color: #74431d; background: linear-gradient(145deg, #fff0df, #ffffff); }
.bank-brand-bilad { color: #8a1f2d; background: linear-gradient(145deg, #fff0f2, #ffffff); }
.bank-brand-jazira { color: #0e6d92; background: linear-gradient(145deg, #e9f8ff, #ffffff); }
.bank-brand-fransi { color: #375e9c; background: linear-gradient(145deg, #eef3ff, #ffffff); }

.bank-account-title {
  min-width: 0;
}

.bank-account-title strong {
  display: block;
  overflow: hidden;
  font-size: clamp(18px, 4vw, 23px);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-account-subtitle {
  color: var(--muted);
  font-size: var(--type-body);
  font-weight: 800;
  line-height: 1.4;
}

.bank-account-top strong,
.bank-account-meta strong,
.bank-account-balance strong {
  color: var(--text);
  font-weight: 900;
}

.bank-account-top small,
.bank-account-meta span,
.bank-account-balance span {
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 700;
  line-height: 1.45;
}

.status-pill {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--primary);
  background: #e8f6f1;
  font-size: var(--type-meta);
  font-weight: 900;
  white-space: nowrap;
}

.bank-account-balance,
.bank-account-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.bank-account-balance strong {
  color: var(--primary);
  font-size: var(--type-number-sm);
}

.bank-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bank-account-actions .danger-link {
  color: #a33131;
  background: #fff4f4;
  border-color: #f0c6c6;
}

.bank-account-form {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 95, 75, 0.1);
}

.inline-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  grid-column: 1 / -1;
}

.inline-form-head strong {
  color: var(--text);
  font-size: var(--type-body-lg);
  font-weight: 900;
}

.compact-checkbox {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 42px;
}

.compact-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.account-tool-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 95, 75, 0.08);
  border-radius: 16px;
  background: #fbfdfc;
}

.account-tool-row > em,
.account-tool-row > div > em {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--primary);
  background: rgba(0, 118, 92, 0.08);
}

.account-tool-row svg {
  width: 22px;
  height: 22px;
}

.account-tool-row span {
  min-width: 0;
}

.account-tool-row strong,
.account-tool-row small {
  display: block;
}

.account-tool-row strong {
  color: var(--text);
  font-weight: 900;
}

/* Latest UX polish overrides */
.ref-category-row {
  direction: rtl;
  grid-template-columns: 38px minmax(62px, 0.68fr) minmax(112px, 1.75fr) 34px minmax(108px, 118px);
  gap: 8px;
}

.ref-category-row .category-amount {
  min-width: 0;
  max-width: 118px;
  justify-self: end;
  text-align: left;
  padding-left: 18px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
}

.ref-category-row .ref-line {
  width: 100%;
  min-width: 76px;
}

.ref-category-row small {
  text-align: center;
  white-space: nowrap;
}

.last-row {
  position: relative;
}

.last-row.has-open-menu {
  z-index: 5;
}

.last-row > strong {
  white-space: nowrap;
}

.last-row-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-width: 168px;
  max-width: min(220px, calc(100vw - 40px));
  width: max-content;
}

.last-card {
  padding-bottom: 54px;
}

.last-card .last-row:nth-last-child(-n + 2) .last-row-menu,
.last-card .last-row:nth-last-child(-n + 2) .last-row-menu.opens-down {
  top: auto;
  bottom: calc(100% - 8px);
}

.last-row .tx-action-menu button {
  width: 100%;
  height: auto;
  min-height: 40px;
  padding: 0 14px;
  justify-content: center;
  white-space: nowrap;
}

.hidden-items-strip {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.hidden-items-strip > span {
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 850;
}

.hidden-items-strip article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px dashed rgba(0, 95, 75, 0.18);
  border-radius: 14px;
  background: #fbfdfc;
}

.budget-card {
  grid-template-columns: minmax(0, 1fr) 126px minmax(0, 1fr);
  gap: 16px;
  min-height: 172px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(88, 226, 132, 0.16), transparent 31%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.1), transparent 24%),
    linear-gradient(135deg, #004f3f 0%, #004637 54%, #00392f 100%);
  box-shadow: 0 20px 38px rgba(0, 62, 49, 0.26);
}

.budget-side {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-content: center;
  align-items: center;
}

.budget-side.end {
  justify-items: end;
  direction: rtl;
}

.budget-side.left {
  justify-items: stretch;
  text-align: center;
  direction: rtl;
}

.budget-side-icon {
  grid-column: 1;
  grid-row: 1;
}

.budget-side > span:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  font-size: 20px;
  line-height: 1.2;
}

.budget-side > strong,
.budget-side > span:not(.budget-side-icon):not(:nth-child(2)),
.budget-side .budget-compare {
  grid-column: 1 / -1;
}

.budget-side-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.budget-side-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

.budget-side span,
.budget-side small {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--type-body);
  font-weight: 850;
}

.budget-side strong {
  color: #fff;
  font-size: 34px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
}

.budget-side.end strong {
  min-width: 124px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  text-align: center;
}

.budget-side .soft {
  color: #fff;
  font-size: 30px;
}

.budget-side.left strong {
  font-size: 36px;
}

.budget-side .budget-compare {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas:
    "icon pct"
    "icon amount"
    "label label";
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 250px;
  margin-top: 2px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  text-align: right;
}

.budget-side .budget-compare::before {
  content: "↗";
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #5ce584;
  background: rgba(0, 62, 49, 0.34);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.budget-side .budget-compare b {
  grid-area: pct;
  color: #5ce584;
  font-size: 29px;
  font-weight: 950;
  line-height: 1;
}

.budget-side .budget-compare small {
  grid-area: amount;
}

.budget-side .budget-compare span {
  grid-area: label;
  margin-top: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.budget-side .budget-compare small,
.budget-side .budget-compare span {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--type-body);
  font-weight: 850;
}

.donut {
  width: 126px;
  height: 126px;
  background: conic-gradient(#5ce584 calc(var(--value) * 1%), rgba(255, 255, 255, 0.16) 0);
  box-shadow: 0 0 28px rgba(92, 229, 132, 0.18);
}

.donut::before {
  inset: 20px;
  background: #003f33;
}

.donut b {
  color: #fff;
  font-size: 36px;
  font-weight: 950;
  transform: translateY(-10px);
}

.donut span {
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--type-body-lg);
  font-weight: 850;
}

@media (max-width: 560px) {
  .budget-card {
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
    gap: 8px;
    min-height: 126px;
    padding: 13px;
    border-radius: 24px;
  }

  .budget-side {
    gap: 6px;
  }

  .budget-side-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .budget-side-icon svg {
    width: 18px;
    height: 18px;
  }

  .budget-side span,
  .budget-side small {
    font-size: var(--type-caption);
  }

  .budget-side > span:nth-child(2) {
    font-size: 15px;
  }

  .budget-side strong,
  .budget-side.left strong {
    font-size: 20px;
  }

  .budget-side.end strong {
    min-width: 0;
    width: 100%;
    padding: 7px 8px;
    border-radius: 11px;
  }

  .budget-side .soft {
    font-size: 19px;
  }

  .budget-side .budget-compare {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas:
      "icon pct"
      "icon amount"
      "label label";
    column-gap: 6px;
    row-gap: 3px;
    min-width: 0;
    max-width: 100%;
    padding: 7px 7px;
    border-radius: 12px;
    line-height: 1.25;
  }

  .budget-side .budget-compare::before {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }

  .budget-side .budget-compare b {
    font-size: 19px;
  }

  .budget-side .budget-compare span {
    margin-top: 4px;
    padding-top: 5px;
  }

  .budget-side .budget-compare small,
  .budget-side .budget-compare span {
    font-size: 10px;
    white-space: nowrap;
  }

  .donut {
    width: 84px;
    height: 84px;
  }

  .donut::before {
    inset: 13px;
  }

  .donut b {
    font-size: 21px;
    transform: translateY(-7px);
  }

  .donut span {
    margin-top: 20px;
    font-size: 10px;
  }
}

@media (max-width: 420px) {
  .budget-card {
    grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
    gap: 7px;
    min-height: 118px;
    padding: 12px;
    border-radius: 24px;
  }

  .budget-side {
    gap: 5px;
  }

  .budget-side-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .budget-side-icon svg {
    width: 17px;
    height: 17px;
  }

  .budget-side span,
  .budget-side small {
    font-size: var(--type-caption);
  }

  .budget-side > span:nth-child(2) {
    font-size: 13px;
  }

  .budget-side strong,
  .budget-side.left strong {
    font-size: 18px;
  }

  .budget-side.end strong {
    min-width: 0;
    width: 100%;
    padding: 7px 7px;
    border-radius: 10px;
  }

  .budget-side .soft {
    font-size: 18px;
  }

  .budget-side .budget-compare {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 5px;
    min-width: 0;
    max-width: 100%;
    padding: 7px 6px;
    border-radius: 11px;
    line-height: 1.25;
  }

  .budget-side .budget-compare::before {
    width: 26px;
    height: 26px;
    font-size: 18px;
  }

  .budget-side .budget-compare b {
    font-size: 17px;
  }

  .budget-side .budget-compare small,
  .budget-side .budget-compare span {
    font-size: 10px;
    white-space: nowrap;
  }

  .donut {
    width: 74px;
    height: 74px;
  }

  .donut::before {
    inset: 11px;
  }

  .donut b {
    font-size: 19px;
    transform: translateY(-7px);
  }

  .donut span {
    margin-top: 18px;
    font-size: 10px;
  }

  .ref-category-row {
    grid-template-columns: 34px minmax(48px, 0.62fr) minmax(68px, 1.55fr) 30px minmax(94px, 104px);
    gap: 6px;
  }

  .ref-category-row .category-amount {
    max-width: 104px;
    padding-left: 14px;
  }

  .ref-category-row strong,
  .ref-category-row small {
    font-size: var(--type-caption);
  }
}

.account-tool-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: 650;
  line-height: 1.45;
}

.account-tool-row.stacked {
  grid-template-columns: 1fr;
}

.account-tool-row.stacked > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.advanced-payment-field[hidden],
[data-import-linked-field][hidden],
[data-payment-account-wrapper][hidden] {
  display: none !important;
}

.credit-card-hero {
  margin-bottom: 12px;
}

.credit-card-list {
  display: grid;
  gap: 16px;
  margin-top: 0;
  container-type: inline-size;
}

.credit-liability-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(0, 95, 75, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 14%, rgba(0, 104, 82, 0.05), transparent 30%),
    linear-gradient(135deg, #ffffff, #fbfdfc);
  box-shadow: 0 14px 34px rgba(11, 38, 31, 0.08);
}

.credit-liability-main {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
}

.credit-card-logo,
.credit-provider-logo {
  inline-size: 56px;
  block-size: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #071d17;
  background: #e9f4ef;
  box-shadow: inset 0 0 0 1px rgba(0, 95, 75, 0.04);
}

.credit-card-logo svg {
  inline-size: 28px;
  block-size: 28px;
  stroke-width: 2.2;
}

.credit-provider-logo {
  font-size: var(--type-section-title);
  font-weight: 950;
}

.is-tabby .credit-provider-logo {
  background: linear-gradient(135deg, #8fffd8, #47e7ba);
}

.is-tamara .credit-provider-logo {
  background: linear-gradient(135deg, #ffd166, #ff7ea7 52%, #8d7bff);
}

.credit-liability-copy {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.credit-liability-copy strong {
  max-width: 100%;
  color: var(--ink);
  font-size: var(--type-card-title);
  font-weight: 950;
  line-height: var(--leading-title);
  overflow-wrap: anywhere;
}

.credit-card-mask {
  color: var(--muted);
  font-size: var(--type-section-title);
  font-weight: 700;
  direction: ltr;
  unicode-bidi: plaintext;
}

.credit-liability-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--type-body);
  font-weight: 800;
}

.credit-liability-status i {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: #159457;
}

.credit-liability-copy b {
  color: var(--ink);
  max-width: 100%;
  font-size: var(--type-number);
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.credit-liability-copy small {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(11, 38, 31, 0.12);
  color: var(--muted);
  font-size: var(--type-body);
  font-weight: 750;
  min-width: 0;
  overflow-wrap: anywhere;
}

.credit-liability-copy small svg {
  inline-size: 18px;
  block-size: 18px;
  color: #7c8b87;
}

.credit-liability-side {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding-top: 2px;
}

.credit-usage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.credit-usage-head strong {
  color: var(--ink);
  font-size: var(--type-number-sm);
  font-weight: 950;
}

.credit-usage-head em {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--primary);
  background: #e4f3ee;
}

.is-tamara .credit-usage-head em {
  color: #b86125;
  background: #fff0e7;
}

.credit-usage-head em svg {
  inline-size: 24px;
  block-size: 24px;
}

.credit-liability-side .m-track {
  min-width: 0;
  height: 12px;
  background: #edf0ef;
}

.credit-liability-side .m-fill {
  background: #159457;
}

.credit-liability-side > span {
  color: var(--muted);
  font-size: var(--type-body);
  font-weight: 750;
}

.credit-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.credit-card-actions .mini-button {
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  padding-inline: 8px;
  font-size: var(--type-body);
  font-weight: 900;
  background: #fff;
  white-space: nowrap;
}

.credit-card-actions svg {
  inline-size: 21px;
  block-size: 21px;
}

.credit-repay-button {
  color: #087a4c;
  border-color: rgba(8, 122, 76, 0.38);
}

.credit-delete-button {
  color: #a23c3c;
  border-color: rgba(162, 60, 60, 0.25);
  background: #fff8f8 !important;
}

@container (min-width: 900px) {
  .credit-liability-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    padding: 22px;
  }

  .credit-liability-side {
    align-content: space-between;
    min-height: 168px;
    padding-top: 4px;
  }
}

.sms-quick-card {
  display: grid;
  gap: 12px;
}

.sms-quick-card.is-collapsed {
  gap: 0;
}

.sms-quick-toggle {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: start;
}

.sms-quick-toggle h3 {
  margin: 0;
  font-size: var(--type-section-title);
  font-weight: 900;
}

.sms-quick-toggle span {
  flex: 0 0 32px;
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--primary);
  background: #e7f3ef;
}

.sms-quick-toggle svg {
  inline-size: 19px;
  block-size: 19px;
}

.sms-quick-body {
  display: grid;
  gap: 12px;
}

.locked-lite {
  border-style: dashed;
}

@media (max-width: 480px) {
  .review-edit-grid {
    grid-template-columns: 1fr;
  }

  .review-edit-grid label,
  .review-type-field {
    grid-template-columns: minmax(84px, 104px) minmax(0, 1fr);
  }

  .credit-liability-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  .credit-liability-main {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
  }

  .credit-card-logo,
  .credit-provider-logo {
    inline-size: 54px;
    block-size: 54px;
  }

  .credit-card-mask {
    font-size: var(--type-section-title);
  }

  .credit-liability-side {
    min-height: 0;
  }

  .credit-card-actions {
    grid-template-columns: 1fr 1fr;
  }

  .account-section-title {
    grid-template-columns: 1fr;
  }

  .section-actions,
  .bank-account-actions {
    width: 100%;
  }

  .section-actions .mini-button,
  .bank-account-actions .mini-button {
    flex: 1 1 120px;
  }

  .account-tool-row,
  .account-tool-row.stacked > div {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .account-tool-row .mini-button,
  .account-tool-row.stacked .mini-button {
    grid-column: 2;
    justify-self: start;
  }
}

.accounts-screen {
  gap: 14px;
}

.account-tool-card {
  display: grid;
  gap: 14px;
}

.account-tool-list {
  display: grid;
  gap: 10px;
}

.account-tool-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 95, 75, 0.08);
  border-radius: 16px;
  background: #fbfdfc;
}

.account-tool-row > em,
.account-tool-row > div > em {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--primary);
  background: rgba(0, 118, 92, 0.08);
}

.account-tool-row svg {
  width: 22px;
  height: 22px;
}

.account-tool-row span {
  min-width: 0;
}

.account-tool-row strong,
.account-tool-row small {
  display: block;
}

.account-tool-row strong {
  color: var(--text);
  font-weight: 900;
}

.account-tool-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
}

.account-tool-row.stacked {
  grid-template-columns: 1fr;
}

.account-tool-row.stacked > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.advanced-payment-field[hidden] {
  display: none !important;
}

.sms-quick-card {
  display: grid;
  gap: 12px;
}

.locked-lite {
  border-style: dashed;
}

@media (max-width: 480px) {
  .account-tool-row,
  .account-tool-row.stacked > div {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .account-tool-row .mini-button,
  .account-tool-row.stacked .mini-button {
    grid-column: 2;
    justify-self: start;
  }
}

/* Final isolated reference-style home budget card */
.budget-card-ref {
  direction: ltr !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(124px, 23vw, 176px) minmax(0, 1fr) !important;
  grid-template-areas: "expenses ring budget" !important;
  align-items: center !important;
  gap: clamp(14px, 2.6vw, 28px) !important;
  min-height: clamp(172px, 23vw, 222px) !important;
  padding: clamp(18px, 3vw, 30px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: clamp(26px, 4vw, 36px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(92, 229, 132, 0.18), transparent 30%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.1), transparent 24%),
    linear-gradient(135deg, #004f3f 0%, #004738 55%, #003a30 100%) !important;
  box-shadow: 0 20px 40px rgba(0, 62, 49, 0.25) !important;
}

.budget-card-ref > .budget-side.left {
  grid-area: expenses !important;
}

.budget-card-ref > .donut {
  grid-area: ring !important;
}

.budget-card-ref > .budget-side.end {
  grid-area: budget !important;
}

.budget-card-ref > .budget-side {
  direction: ltr !important;
  display: grid !important;
  grid-template-columns: clamp(40px, 5vw, 54px) minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(8px, 1.4vw, 14px) clamp(10px, 1.8vw, 16px) !important;
  min-width: 0 !important;
  text-align: right !important;
}

.budget-card-ref .budget-side-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  display: inline-grid !important;
  place-items: center !important;
  width: clamp(40px, 5vw, 54px) !important;
  height: clamp(40px, 5vw, 54px) !important;
  border-radius: clamp(12px, 1.8vw, 16px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.budget-card-ref .budget-side-icon svg {
  width: 60% !important;
  height: 60% !important;
  stroke-width: 2.5 !important;
}

.budget-card-ref > .budget-side > span.budget-side-icon + span {
  direction: rtl !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(15px, 2.3vw, 23px) !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-align: right !important;
}

.budget-card-ref > .budget-side > strong,
.budget-card-ref > .budget-side > span:not(.budget-side-icon):not(:nth-child(2)),
.budget-card-ref > .budget-side > em {
  direction: rtl !important;
  grid-column: 1 / -1 !important;
}

.budget-card-ref > .budget-side.left > strong {
  justify-self: start !important;
  max-width: 100% !important;
  color: #fff !important;
  font-size: clamp(22px, 4vw, 42px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.budget-card-ref > .budget-side.end > span:not(.budget-side-icon):not(:nth-child(2)) {
  justify-self: end !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: clamp(13px, 1.7vw, 18px) !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.budget-card-ref > .budget-side.end > strong {
  justify-self: end !important;
  width: min(100%, 224px) !important;
  min-width: 0 !important;
  padding: clamp(8px, 1.5vw, 14px) clamp(10px, 2vw, 18px) !important;
  border-radius: clamp(12px, 2vw, 18px) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
  font-size: clamp(20px, 3.3vw, 34px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.budget-card-ref > .budget-side.end > strong.soft {
  font-size: clamp(18px, 2.9vw, 30px) !important;
}

.budget-card-ref .budget-compare {
  direction: rtl !important;
  display: grid !important;
  grid-template-columns: clamp(30px, 4.8vw, 46px) minmax(0, 1fr) !important;
  grid-template-areas:
    "icon pct"
    "icon amount"
    "label label" !important;
  align-items: center !important;
  justify-self: start !important;
  width: min(100%, 250px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(9px, 1.5vw, 14px) !important;
  column-gap: clamp(7px, 1.4vw, 12px) !important;
  row-gap: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: clamp(14px, 2vw, 20px) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  text-align: right !important;
}

.budget-card-ref .budget-compare::before {
  content: "↗" !important;
  grid-area: icon !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(30px, 4.8vw, 44px) !important;
  height: clamp(30px, 4.8vw, 44px) !important;
  border-radius: 50% !important;
  color: #5ce584 !important;
  background: rgba(0, 62, 49, 0.34) !important;
  font-size: clamp(20px, 3vw, 30px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.budget-card-ref .budget-compare b {
  grid-area: pct !important;
  color: #5ce584 !important;
  font-size: clamp(23px, 4vw, 36px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.budget-card-ref .budget-compare small {
  grid-area: amount !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(13px, 2vw, 20px) !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.budget-card-ref .budget-compare span {
  grid-area: label !important;
  margin-top: 6px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: clamp(12px, 1.8vw, 17px) !important;
  font-weight: 850 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.budget-card-ref > .donut {
  width: clamp(116px, 22vw, 172px) !important;
  height: clamp(116px, 22vw, 172px) !important;
  background: conic-gradient(#5ce584 calc(var(--value) * 1%), rgba(255, 255, 255, 0.16) 0) !important;
  box-shadow: 0 0 30px rgba(92, 229, 132, 0.18) !important;
}

.budget-card-ref > .donut::before {
  inset: clamp(17px, 3vw, 26px) !important;
  background: #003f33 !important;
}

.budget-card-ref > .donut b {
  color: #fff !important;
  font-size: clamp(34px, 6vw, 56px) !important;
  font-weight: 950 !important;
  transform: translateY(-10px) !important;
}

.budget-card-ref > .donut span {
  margin-top: clamp(28px, 4vw, 43px) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(13px, 2.1vw, 21px) !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

@media (max-width: 560px) {
  .budget-card-ref {
    grid-template-columns: minmax(0, 1fr) 98px minmax(0, 1fr) !important;
    gap: 9px !important;
    min-height: 150px !important;
    padding: 14px !important;
  }

  .budget-card-ref > .budget-side {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .budget-card-ref .budget-side-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  .budget-card-ref > .budget-side > span.budget-side-icon + span {
    font-size: 14px !important;
  }

  .budget-card-ref > .budget-side.left > strong,
  .budget-card-ref > .budget-side.end > strong {
    font-size: 19px !important;
  }

  .budget-card-ref > .budget-side.end > span:not(.budget-side-icon):not(:nth-child(2)),
  .budget-card-ref .budget-compare small,
  .budget-card-ref .budget-compare span {
    font-size: 10px !important;
  }

  .budget-card-ref .budget-compare {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    padding: 8px !important;
    column-gap: 6px !important;
  }

  .budget-card-ref .budget-compare::before {
    width: 28px !important;
    height: 28px !important;
    font-size: 19px !important;
  }

  .budget-card-ref .budget-compare b {
    font-size: 20px !important;
  }

  .budget-card-ref > .donut {
    width: 98px !important;
    height: 98px !important;
  }

  .budget-card-ref > .donut::before {
    inset: 15px !important;
  }

  .budget-card-ref > .donut b {
    font-size: 29px !important;
    transform: translateY(-8px) !important;
  }

  .budget-card-ref > .donut span {
    margin-top: 23px !important;
    font-size: 11px !important;
  }
}

/* Home budget summary: rebuilt card matching the approved reference */
.is-legacy-budget-card[hidden] {
  display: none !important;
}

.home-budget-card {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(118px, 22vw, 172px) minmax(0, 1fr);
  grid-template-areas: "expenses ring budget";
  align-items: center;
  gap: clamp(14px, 2.6vw, 28px);
  min-height: clamp(168px, 24vw, 224px);
  padding: clamp(18px, 3vw, 30px);
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: clamp(26px, 4vw, 36px);
  background:
    radial-gradient(circle at 50% 42%, rgba(92, 229, 132, 0.18), transparent 30%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.1), transparent 24%),
    linear-gradient(135deg, #004f3f 0%, #004738 55%, #003a30 100%);
  box-shadow: 0 20px 40px rgba(0, 62, 49, 0.25);
}

.hbc-expenses {
  grid-area: expenses;
}

.hbc-ring-wrap {
  grid-area: ring;
  display: grid;
  place-items: center;
  min-width: 0;
}

.hbc-budget {
  grid-area: budget;
}

.hbc-panel {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: clamp(10px, 1.7vw, 18px);
}

.hbc-title {
  display: flex;
  align-items: center;
  gap: clamp(9px, 1.5vw, 14px);
  min-width: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(15px, 2.25vw, 24px);
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
}

.hbc-title > span:last-child {
  direction: rtl;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}

.hbc-budget .hbc-title,
.hbc-budget .hbc-label {
  justify-self: end;
}

.hbc-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(40px, 5vw, 54px);
  height: clamp(40px, 5vw, 54px);
  border-radius: clamp(12px, 1.8vw, 16px);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.12);
}

.hbc-icon svg {
  width: 60%;
  height: 60%;
  stroke-width: 2.5;
}

.hbc-main-amount {
  direction: rtl;
  justify-self: start;
  color: #fff;
  font-size: clamp(24px, 4.4vw, 44px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.hbc-compare {
  direction: rtl;
  display: grid;
  grid-template-columns: clamp(32px, 5vw, 46px) minmax(0, 1fr);
  grid-template-areas:
    "icon pct"
    "icon amount"
    "label label";
  align-items: center;
  justify-self: start;
  width: min(100%, 256px);
  min-width: 0;
  padding: clamp(10px, 1.6vw, 15px);
  gap: 4px clamp(8px, 1.4vw, 12px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: clamp(14px, 2.2vw, 20px);
  background: rgba(255, 255, 255, 0.08);
  font-style: normal;
}

.hbc-trend-mark {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: clamp(32px, 5vw, 46px);
  height: clamp(32px, 5vw, 46px);
  border-radius: 50%;
  color: #5ce584;
  background: rgba(0, 62, 49, 0.34);
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 950;
  line-height: 1;
}

.hbc-compare b {
  grid-area: pct;
  color: #5ce584;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 950;
  line-height: 1;
}

.hbc-compare strong {
  grid-area: amount;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(13px, 2vw, 20px);
  line-height: 1;
  white-space: nowrap;
}

.hbc-compare > span:last-child {
  grid-area: label;
  margin-top: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(12px, 1.8vw, 17px);
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.hbc-label {
  direction: rtl;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(13px, 1.75vw, 18px);
  font-weight: 850;
  line-height: 1;
}

.hbc-pill {
  direction: rtl;
  justify-self: end;
  width: min(100%, 224px);
  min-width: 0;
  padding: clamp(9px, 1.6vw, 15px) clamp(10px, 2vw, 18px);
  border-radius: clamp(12px, 2vw, 18px);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: clamp(20px, 3.3vw, 34px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.hbc-budget > i {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.hbc-donut {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(118px, 22vw, 172px);
  height: clamp(118px, 22vw, 172px);
  border-radius: 50%;
  background: conic-gradient(#5ce584 calc(var(--value) * 1%), rgba(255, 255, 255, 0.16) 0);
  box-shadow: 0 0 30px rgba(92, 229, 132, 0.18);
}

.hbc-donut::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 3vw, 27px);
  border-radius: 50%;
  background: #003f33;
}

.hbc-donut b,
.hbc-donut span {
  position: relative;
  z-index: 1;
}

.hbc-donut b {
  color: #fff;
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 950;
  line-height: 1;
  transform: translateY(-10px);
}

.hbc-donut span {
  position: absolute;
  margin-top: clamp(28px, 4vw, 43px);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(13px, 2.1vw, 21px);
  font-weight: 850;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .home-budget-card {
    grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr);
    gap: 8px;
    min-height: 146px;
    padding: 14px;
    border-radius: 26px;
  }

  .hbc-panel {
    gap: 8px;
  }

  .hbc-title {
    gap: 7px;
    font-size: 13px;
  }

  .hbc-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .hbc-main-amount,
  .hbc-pill {
    font-size: 19px;
  }

  .hbc-label,
  .hbc-compare strong,
  .hbc-compare > span:last-child {
    font-size: 10px;
  }

  .hbc-compare {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 8px;
    gap: 3px 6px;
    border-radius: 12px;
  }

  .hbc-trend-mark {
    width: 28px;
    height: 28px;
    font-size: 19px;
  }

  .hbc-compare b {
    font-size: 20px;
  }

  .hbc-compare > span:last-child {
    margin-top: 4px;
    padding-top: 5px;
  }

  .hbc-pill {
    padding: 8px;
    border-radius: 11px;
  }

  .hbc-donut {
    width: 94px;
    height: 94px;
  }

  .hbc-donut::before {
    inset: 15px;
  }

  .hbc-donut b {
    font-size: 29px;
    transform: translateY(-8px);
  }

  .hbc-donut span {
    margin-top: 23px;
    font-size: 11px;
  }
}

/* Budget card hard reset: scale from the card width, not the viewport */
.home-budget-card {
  container-type: inline-size;
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(62px, 18%) minmax(0, 32%);
  justify-content: space-between;
  align-items: center;
  gap: 3%;
  min-height: clamp(126px, 32cqw, 220px);
  padding: clamp(12px, 3.2cqw, 28px);
  overflow: hidden;
}

.hbc-panel {
  min-width: 0;
  gap: clamp(5px, 1.6cqw, 16px);
}

.hbc-title {
  gap: clamp(5px, 1.4cqw, 14px);
  font-size: clamp(9px, 2.25cqw, 19px);
  line-height: 1.08;
}

.hbc-title > span:last-child {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.hbc-icon {
  width: clamp(26px, 7.2cqw, 54px);
  height: clamp(26px, 7.2cqw, 54px);
  border-radius: clamp(8px, 2cqw, 16px);
}

.hbc-main-amount {
  font-size: clamp(13px, 3.6cqw, 34px);
}

.hbc-label {
  font-size: clamp(8.5px, 1.55cqw, 15px);
}

.hbc-pill {
  width: 100%;
  padding: clamp(7px, 1.8cqw, 14px) clamp(6px, 2cqw, 18px);
  border-radius: clamp(10px, 2.2cqw, 18px);
  font-size: clamp(13px, 3cqw, 28px);
}

.hbc-compare {
  width: 100%;
  grid-template-columns: clamp(24px, 6.4cqw, 46px) minmax(0, 1fr);
  padding: clamp(7px, 1.8cqw, 14px);
  gap: clamp(3px, .9cqw, 5px) clamp(5px, 1.4cqw, 12px);
  border-radius: clamp(11px, 2.4cqw, 20px);
}

.hbc-trend-mark {
  width: clamp(24px, 6.4cqw, 46px);
  height: clamp(24px, 6.4cqw, 46px);
  font-size: clamp(17px, 4cqw, 30px);
}

.hbc-compare b {
  font-size: clamp(15px, 3.7cqw, 29px);
}

.hbc-compare strong {
  font-size: clamp(8.5px, 1.8cqw, 16px);
}

.hbc-compare > span:last-child {
  margin-top: clamp(3px, .9cqw, 7px);
  padding-top: clamp(4px, 1.1cqw, 9px);
  font-size: clamp(8px, 1.5cqw, 14px);
}

.hbc-donut {
  width: clamp(62px, 18cqw, 138px);
  height: clamp(62px, 18cqw, 138px);
}

.hbc-donut::before {
  inset: clamp(9px, 2.6cqw, 22px);
}

.hbc-donut b {
  font-size: clamp(18px, 5.2cqw, 43px);
  transform: translateY(clamp(-10px, -1.6cqw, -6px));
}

.hbc-donut span {
  margin-top: clamp(15px, 4cqw, 34px);
  font-size: clamp(8px, 1.75cqw, 16px);
}

@container (max-width: 430px) {
  .home-budget-card {
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
    gap: 6px;
    min-height: 120px;
    padding: 11px;
  }

  .hbc-title {
    font-size: 8.8px;
    gap: 4px;
  }

  .hbc-icon {
    width: 24px;
    height: 24px;
  }

  .hbc-main-amount,
  .hbc-pill {
    font-size: 12.5px;
  }

  .hbc-compare {
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 6px;
  }

  .hbc-trend-mark {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }

  .hbc-compare b {
    font-size: 13.5px;
  }

  .hbc-compare strong,
  .hbc-compare > span:last-child,
  .hbc-label {
    font-size: 8px;
  }

  .hbc-donut {
    width: 62px;
    height: 62px;
  }

  .hbc-donut::before {
    inset: 9px;
  }

  .hbc-donut b {
    font-size: 18px;
    transform: translateY(-6px);
  }

  .hbc-donut span {
    margin-top: 15px;
    font-size: 7.5px;
  }
}

/* Figma redraw final pass: mobile-safe proportions */
.home-budget-card {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(104px, 18.5vw, 150px) minmax(0, 1fr);
  grid-template-areas: "expenses ring budget";
  align-items: center;
  gap: clamp(9px, 1.8vw, 18px);
  min-height: clamp(126px, 17.5vw, 174px);
  padding: clamp(13px, 2.3vw, 22px);
  overflow: hidden;
  border-radius: clamp(24px, 4vw, 34px);
}

.hbc-expenses {
  grid-area: expenses;
  transform: translateY(clamp(-9px, -1.1vw, -4px));
}
.hbc-ring-wrap { grid-area: ring; }
.hbc-budget { grid-area: budget; }

.hbc-panel {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: clamp(6px, 1.1vw, 12px);
}

.hbc-title {
  display: flex;
  align-items: center;
  gap: clamp(7px, 1.15vw, 13px);
  min-width: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(15px, 2.1vw, 24px);
  font-weight: 950;
  line-height: 1.12;
  white-space: nowrap;
}

.hbc-title > span:last-child {
  direction: rtl;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.hbc-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(36px, 4.7vw, 52px);
  height: clamp(36px, 4.7vw, 52px);
  border-radius: clamp(12px, 1.8vw, 16px);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.12);
}

.hbc-icon svg {
  width: 60%;
  height: 60%;
}

.hbc-main-amount,
.hbc-pill {
  direction: rtl;
  color: #fff;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.hbc-main-amount {
  justify-self: start;
  font-size: clamp(14px, 2.35vw, 25px);
}

.hbc-previous-month {
  direction: ltr;
  display: grid;
  justify-self: start;
  gap: clamp(6px, 1.1vw, 12px);
  margin-top: clamp(5px, 1vw, 12px);
  min-width: 0;
}

.hbc-previous-title {
  justify-self: start;
}

.hbc-title-no-icon {
  padding-inline-start: 0;
}

.hbc-previous-amount {
  justify-self: start;
}

.hbc-budget .hbc-title,
.hbc-budget .hbc-label,
.hbc-budget .hbc-pill {
  justify-self: end;
}

.hbc-label {
  direction: rtl;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(13.5px, 1.85vw, 20px);
  font-weight: 850;
  line-height: 1;
}

.hbc-pill {
  width: min(100%, 178px);
  min-width: 0;
  padding: clamp(5px, .9vw, 9px) clamp(7px, 1.2vw, 12px);
  border-radius: clamp(10px, 1.6vw, 15px);
  background: rgba(255, 255, 255, 0.09);
  font-size: clamp(14px, 2.35vw, 25px);
  text-align: center;
}

.hbc-budget > i {
  justify-self: end;
  width: min(100%, 168px);
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.hbc-compare {
  direction: rtl;
  display: grid;
  grid-template-columns: clamp(22px, 3.15vw, 34px) minmax(0, 1fr);
  grid-template-areas:
    "icon pct"
    "icon amount"
    "label label";
  align-items: center;
  justify-self: start;
  width: min(100%, 162px);
  min-width: 0;
  padding: clamp(5px, .9vw, 8px);
  gap: 3px clamp(6px, 1.05vw, 10px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: clamp(11px, 1.6vw, 16px);
  background: rgba(255, 255, 255, 0.08);
}

.hbc-trend-mark {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: clamp(22px, 3.15vw, 34px);
  height: clamp(22px, 3.15vw, 34px);
  border-radius: 50%;
  color: #5ce584;
  background: rgba(0, 62, 49, 0.34);
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 950;
  line-height: 1;
}

.hbc-compare b {
  grid-area: pct;
  color: #5ce584;
  font-size: clamp(16px, 2.6vw, 25px);
  font-weight: 950;
  line-height: 1;
}

.hbc-compare strong {
  grid-area: amount;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(9px, 1.35vw, 14px);
  line-height: 1;
  white-space: nowrap;
}

.hbc-compare > span:last-child {
  grid-area: label;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(8px, 1.18vw, 12.5px);
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.hbc-donut {
  --hbc-ring: #5ce584;
  --hbc-ring-shadow: rgba(92, 229, 132, 0.18);
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(104px, 18.5vw, 150px);
  height: clamp(104px, 18.5vw, 150px);
  border-radius: 50%;
  background: conic-gradient(var(--hbc-ring) calc(var(--value) * 1%), rgba(255, 255, 255, 0.16) 0);
  box-shadow: 0 0 30px var(--hbc-ring-shadow);
}

.hbc-donut.is-warning {
  --hbc-ring: #f4c542;
  --hbc-ring-shadow: rgba(244, 197, 66, 0.2);
}

.hbc-donut.is-danger {
  --hbc-ring: #ff5a57;
  --hbc-ring-shadow: rgba(255, 90, 87, 0.22);
}

.hbc-donut::before {
  content: "";
  position: absolute;
  inset: clamp(12px, 1.75vw, 17px);
  border-radius: 50%;
  background: #003f33;
}

.hbc-donut b,
.hbc-donut span {
  position: relative;
  z-index: 1;
}

.hbc-donut b {
  color: #fff;
  font-size: clamp(21px, 3.35vw, 32px);
  font-weight: 950;
  line-height: 1;
  transform: translateY(-7px);
}

.hbc-donut span {
  position: absolute;
  margin-top: clamp(23px, 3.25vw, 34px);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(10.8px, 1.75vw, 17.5px);
  font-weight: 850;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .home-budget-card {
    grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
    gap: 6px;
    min-height: 132px;
    padding: 10px;
    border-radius: 24px;
  }

  .hbc-panel {
    gap: 4px;
  }

  .hbc-title {
    gap: 6px;
    font-size: 11.3px;
    line-height: 1.08;
  }

  .hbc-expenses {
    transform: translateY(-5px);
  }

  .hbc-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
  }

  .hbc-main-amount,
  .hbc-pill {
    font-size: 12.4px;
  }

  .hbc-previous-month {
    gap: 4px;
    margin-top: 5px;
  }

  .hbc-label,
  .hbc-compare strong,
  .hbc-compare > span:last-child {
    font-size: 9.8px;
  }

  .hbc-pill {
    width: min(100%, 78px);
    padding: 4px;
    border-radius: 8px;
  }

  .hbc-budget > i {
    width: min(100%, 72px);
  }

  .hbc-compare {
    grid-template-columns: 18px minmax(0, 1fr);
    width: min(100%, 78px);
    padding: 4px;
    gap: 2px 4px;
    border-radius: 9px;
  }

  .hbc-trend-mark {
    width: 18px;
    height: 18px;
    font-size: 13px;
  }

  .hbc-compare b {
    font-size: 13px;
  }

  .hbc-compare > span:last-child {
    margin-top: 3px;
    padding-top: 4px;
  }

  .hbc-donut {
    width: 100px;
    height: 100px;
  }

  .hbc-donut::before {
    inset: 11px;
  }

  .hbc-donut b {
    font-size: 20px;
    transform: translateY(-6px);
  }

  .hbc-donut span {
    margin-top: 21px;
    font-size: 9.6px;
  }
}

/* Bank account card final alignment: keep bank mark and name on one row */
.bank-account-card .bank-account-top {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
}

.bank-account-card .bank-brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 17px;
}

.bank-account-card .bank-brand-mark span {
  max-width: 50px;
  font-size: 12px;
}

.bank-account-card .bank-account-title strong {
  font-size: clamp(21px, 5vw, 28px);
  line-height: 1.08;
}

@media (max-width: 480px) {
  .bank-account-card .bank-account-top {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 11px;
  }

  .bank-account-card .bank-brand-mark {
    width: 52px;
    height: 52px;
  }

  .bank-account-card .bank-account-title strong {
    font-size: clamp(20px, 6.1vw, 25px);
  }
}