/*
 * Army Bank PWA — Monobank-style full redesign
 * Single source of truth for visual layer.
 * v39
 */

:root {
  --mono-bg: #e7ebe2;
  --mono-surface: #f7f9f4;
  --mono-surface-soft: #edf2e8;
  --mono-blue-top: #2f4a37;
  --mono-blue-mid: #46664a;
  --mono-blue-low: #a7b8a0;
  --mono-text: #141a15;
  --mono-muted: #7f8b80;
  --mono-muted-2: #a2ada2;
  --mono-danger: #f25461;
  --mono-success: #1fa055;
  --mono-ink: #1f2b22;
  --mono-shadow: 0 12px 30px rgba(17, 25, 40, 0.12);
  --mono-card-shadow: 0 14px 28px rgba(17, 25, 40, 0.16);
  --mono-radius-xl: 28px;
  --mono-radius-lg: 22px;
  --mono-radius-md: 16px;
  --mono-space-1: 8px;
  --mono-space-2: 12px;
  --mono-space-3: 16px;
  --mono-space-4: 20px;
  --mono-motion-fast: 180ms;
  --mono-motion-base: 260ms;
  --mono-border-soft: #dce4d8;
  --mono-border-strong: #ccd6c8;
  --mono-focus-ring: 0 0 0 3px rgba(70, 102, 74, 0.22);

  /* Legacy tokens remapped to the light military palette for fallback components */
  --bg: var(--mono-bg);
  --surface: var(--mono-surface);
  --surface2: var(--mono-surface-soft);
  --text: var(--mono-text);
  --text-2: #5f6f61;
  --muted: #8b978a;
  --border: rgba(20, 34, 21, 0.12);
  --border-2: rgba(20, 34, 21, 0.2);
}

html,
body {
  background: var(--mono-bg) !important;
  color: var(--mono-text) !important;
  touch-action: manipulation !important; /* disable double-tap zoom in PWA */
}

#appScreen .screen {
  display: none !important;
}

#appScreen .screen.active-screen {
  display: block !important;
}

#appScreen.app-shell {
  background: var(--mono-bg) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* Keep auth/app toggling reliable even when app-shell uses !important display rules */
#appScreen.app-shell.hidden {
  display: none !important;
}

#authScreen.auth-screen.hidden {
  display: none !important;
}

/* ── Auth ─────────────────────────────────────────── */
.auth-screen {
  background:
    radial-gradient(120% 80% at 10% -10%, rgba(83, 128, 255, 0.28) 0%, transparent 70%),
    linear-gradient(180deg, #274fb5 0%, #3f6fd8 52%, #7da0df 100%) !important;
}

.auth-glow {
  display: none !important;
}

.auth-logo h1,
.auth-logo h1 strong,
.auth-logo p {
  color: #ffffff !important;
}

.auth-logo p {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}

.auth-logo-mark {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.auth-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: none !important;
  border-radius: var(--mono-radius-lg) !important;
  box-shadow: 0 24px 48px rgba(15, 30, 66, 0.22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.auth-tab {
  color: #8c94a5 !important;
  border-bottom-color: transparent !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
}

.auth-tab.active {
  color: #191d26 !important;
  border-bottom-color: #ef5d67 !important;
}

.field input {
  background: #f5f7fb !important;
  border: 1px solid #dde3ef !important;
  border-radius: 14px !important;
  color: #161a22 !important;
}

.field input:focus {
  border-color: #92abe4 !important;
  box-shadow: 0 0 0 3px rgba(54, 105, 215, 0.12) !important;
}

.field label {
  color: #7f8798 !important;
}

.auth-submit {
  background: #ef5d67 !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
}

.auth-forgot button {
  color: #81899a !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

.auth-forgot button:hover {
  color: #4c5568 !important;
}

/* ── Header Hero ─────────────────────────────────── */
.app-header {
  background:
    radial-gradient(120% 120% at 0% -30%, rgba(255, 255, 255, 0.15) 0%, transparent 72%),
    linear-gradient(180deg, var(--mono-blue-top) 0%, var(--mono-blue-mid) 46%, var(--mono-blue-low) 100%) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 18px 14px !important;
  width: auto !important;
  height: auto !important;
  position: relative !important;
  overflow: visible !important;
}

.header-top {
  padding: 8px 0 10px !important;
}

.header-name {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.header-role {
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.02em !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.header-info {
  min-width: 0 !important;
  max-width: calc(100vw - 212px) !important;
}

.avatar {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.icon-btn {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  transition: background var(--mono-motion-fast) ease, transform var(--mono-motion-fast) ease, box-shadow var(--mono-motion-fast) ease !important;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.icon-btn:active {
  transform: scale(0.97) !important;
}

.icon-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--mono-focus-ring) !important;
}

/* ── Drawer: dark background needs light text ─── */
.drawer {
  color: rgba(255, 255, 255, 0.92) !important;
}
.drawer-info-row dt {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
.drawer-info-row dd {
  color: rgba(255, 255, 255, 0.92) !important;
}
.drawer-note-label {
  color: rgba(255, 255, 255, 0.6) !important;
}
.drawer-note-input {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.app-content .icon-btn,
.notif-panel .icon-btn,
.drawer .icon-btn,
.confirm-dialog .icon-btn {
  border-color: var(--mono-border-soft) !important;
  background: #f3f6fb !important;
  color: #5e6f89 !important;
}

.app-content .icon-btn:hover,
.notif-panel .icon-btn:hover,
.drawer .icon-btn:hover,
.confirm-dialog .icon-btn:hover {
  background: #eaf0f9 !important;
}

#notifBadge {
  border-color: rgba(20, 34, 64, 0.8) !important;
}

.balance-block {
  padding: 4px 0 10px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.balance-label {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

.balance-amount {
  color: #ffffff !important;
  font-size: clamp(2.45rem, 10.6vw, 4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

.balance-account {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

/* ── Card Carousel ───────────────────────────────── */
.bank-cards-carousel {
  margin-top: 4px !important;
  padding: 0 !important;
}

.bank-cards-track {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-padding-left: 0 !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
  gap: 12px !important;
  padding: 4px 0 20px !important;
}
.bank-cards-track::-webkit-scrollbar { display: none !important; }

.bank-card {
  flex: 0 0 100% !important;
  width: 100% !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  margin-right: 0 !important;
  /* ISO/IEC 7810 ID-1 credit card ratio 85.6×54mm */
  aspect-ratio: 85.6 / 54 !important;
  min-height: unset !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  /* Clean single ambient shadow */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  background: #1d2634 !important;
  overflow: hidden !important;
  position: relative !important;
}


.bank-card-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

/* Noise texture — hidden (too busy on small screens) */
.bank-card-noise {
  display: none !important;
}

.bank-card-content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  padding: 14px 16px 13px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.bank-card .bank-card-top,
.bank-card .bank-card-bottom,
.bank-card .bank-card-holder,
.bank-card .bank-card-expiry,
.bank-card .bank-card-network {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bank-card-logo-letter {
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.bank-card-logo-text,
.bank-card-type,
.bank-card-number,
.bank-card-name,
.bank-card-date,
.bank-card-label {
  color: rgba(255, 255, 255, 0.92) !important;
}

.bank-card-type {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.13) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.bank-card-number {
  margin-top: 6px !important;
  letter-spacing: 0.18em !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  font-variant-numeric: tabular-nums !important;
}

.bank-card-label {
  font-size: 10px !important;
  opacity: 0.65 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* ── Card colour variants ──────────────────────── */

/* Gold — warm metallic, lighter and more premium */
.bank-card-gold .bank-card-bg {
  background:
    linear-gradient(
      145deg,
      #3d2808 0%,
      #7a5018 22%,
      #c49030 46%,
      #8a6020 72%,
      #3a2408 100%
    ) !important;
}
.bank-card-gold::before {
  background: linear-gradient(
    135deg,
    rgba(255, 230, 120, 0.22) 0%,
    rgba(255, 215, 80, 0) 45%
  ) !important;
}

/* Navy — deep ocean blue */
.bank-card-navy .bank-card-bg {
  background:
    linear-gradient(
      148deg,
      #0b1520 0%,
      #162840 22%,
      #254a74 50%,
      #193258 76%,
      #0b1520 100%
    ) !important;
}

/* Forest — rich pine green */
.bank-card-forest .bank-card-bg {
  background:
    linear-gradient(
      150deg,
      #162018 0%,
      #28402c 25%,
      #3e6645 52%,
      #2d4832 76%,
      #162018 100%
    ) !important;
}

/* Camo — organic multi-tone */
.bank-card-camo .bank-card-bg {
  background:
    radial-gradient(110% 90% at 12% 20%, rgba(130, 135, 88, 0.65) 0%, rgba(130, 135, 88, 0) 44%),
    radial-gradient(110% 90% at 72% 75%, rgba(55, 70, 44, 0.72) 0%, rgba(55, 70, 44, 0) 44%),
    radial-gradient(80% 70% at 50% 50%, rgba(90, 108, 70, 0.40) 0%, rgba(90, 108, 70, 0) 60%),
    linear-gradient(148deg, #242f1e 0%, #3e5234 34%, #31422a 58%, #1e2918 100%) !important;
}

/* Rose — deep plum-rose */
.bank-card-rose .bank-card-bg {
  background:
    linear-gradient(
      148deg,
      #28152c 0%,
      #4e2658 24%,
      #7c3e70 50%,
      #512a5a 76%,
      #28152c 100%
    ) !important;
}

/* Slate — cool charcoal-blue */
.bank-card-slate .bank-card-bg {
  background:
    linear-gradient(
      148deg,
      #1e252d 0%,
      #364554 24%,
      #4e6070 52%,
      #374755 76%,
      #1e252d 100%
    ) !important;
}

/* Dark — near-black with subtle warmth (savings card) */
.bank-card-dark .bank-card-bg {
  background:
    linear-gradient(
      148deg,
      #0e1014 0%,
      #1c2430 26%,
      #263040 52%,
      #1a2130 76%,
      #0e1014 100%
    ) !important;
}

.bank-card-cta {
  background: #f2f6ee !important;
  border: 1px dashed #c8d4c2 !important;
  box-shadow: none !important;
}

.bank-card-cta::before,
.bank-card-cta::after {
  display: none !important;
}

.bank-card-blocked {
  filter: saturate(0.52) brightness(0.8) !important;
}

/* ── Card 3D flip ──────────────────────────────────── */
.bank-card {
  overflow: visible !important; /* allow 3D children to be visible outside */
  perspective: 900px !important;
  cursor: pointer !important;
}

/* Disable card-level pseudo overlays — replicated on .bank-card-front */
.bank-card::before,
.bank-card::after {
  display: none !important;
}

/* Inner wrapper that actually rotates — NO overflow:hidden (incompatible with preserve-3d) */
.bank-card-inner {
  position: absolute !important;
  inset: 0 !important;
  transform-style: preserve-3d !important;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.bank-card.is-flipped .bank-card-inner {
  transform: rotateY(180deg) !important;
}

/* Front & back faces */
.bank-card-front,
.bank-card-back {
  position: absolute !important;
  inset: 0 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
.bank-card-front { z-index: 1 !important; }

/* Restore sheen on front face */
.bank-card-front::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0) 45%) !important;
}
.bank-card-front::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: radial-gradient(ellipse 60% 50% at 88% 94%, rgba(0,0,0,0.16) 0%, transparent 55%) !important;
}
/* Gold sheen override */
.bank-card-gold .bank-card-front::before {
  background: linear-gradient(135deg, rgba(255,230,120,0.22) 0%, rgba(255,215,80,0) 45%) !important;
}

/* Back face — dark navy */
.bank-card-back {
  transform: rotateY(180deg) !important;
  background: linear-gradient(160deg, #18202e 0%, #1e2b3e 52%, #141a24 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1 !important;
}

/* Magnetic stripe */
.bank-card-mag-stripe {
  height: 38px !important;
  background: #050709 !important;
  margin-top: 18px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

/* Back body content */
.bank-card-back-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 8px 14px 10px !important;
}

/* Signature strip */
.bank-card-sig-strip {
  height: 34px !important;
  background: repeating-linear-gradient(
    90deg,
    #cdc5b0 0px, #cdc5b0 3px,
    #e2dac8 3px, #e2dac8 6px
  ) !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-right: 6px !important;
}

/* CVV box */
.bank-card-cvv-box {
  background: #ffffff !important;
  border-radius: 3px !important;
  padding: 3px 9px !important;
  text-align: center !important;
  min-width: 46px !important;
}
.bank-card-cvv-label {
  font-size: 7px !important;
  color: #999 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
.bank-card-cvv-value {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #111 !important;
  letter-spacing: 0.14em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.15 !important;
}
.bank-card-cvv-value.bc-loading {
  opacity: 0.35 !important;
}

/* Back footer */
.bank-card-back-footer {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
}
.bank-card-back-info {
  font-size: 8px !important;
  color: rgba(255,255,255,0.5) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.55 !important;
}
.bank-card-back-info strong { color: rgba(255,255,255,0.7) !important; }
.bank-card-tap-hint {
  font-size: 8px !important;
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: 0.03em !important;
  align-self: flex-end !important;
}

.bank-cards-dots {
  margin-top: 8px !important;
}

.bc-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.45) !important;
}

.bc-dot.active {
  width: 26px !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

/* ── Quick Actions ───────────────────────────────── */
.quick-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 6px 2px 4px !important;
}

.qa-btn {
  gap: 8px !important;
  border-radius: 16px !important;
  padding: 4px 0 6px !important;
  transition: transform var(--mono-motion-fast) ease, opacity var(--mono-motion-fast) ease !important;
}

.qa-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #202c24 !important;
  border: none !important;
  color: #eef4e7 !important;
  box-shadow: 0 8px 20px rgba(16, 24, 20, 0.24) !important;
  transition: transform var(--mono-motion-fast) ease, background var(--mono-motion-fast) ease !important;
}

.qa-btn:hover .qa-icon {
  background: #1a241d !important;
}

.qa-btn:active .qa-icon {
  transform: scale(0.95) translateY(1px) !important;
}

.qa-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--mono-focus-ring) !important;
}

.qa-label {
  color: #11141b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ── Main Content / Surfaces ─────────────────────── */
.app-content {
  padding: 12px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom, 0px)) !important;
  background: transparent !important;
  height: auto !important;
  overflow-y: auto !important;
  scroll-padding-bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom, 0px)) !important;
}

#pullRefreshIndicator {
  display: none !important;
}

#pullRefreshIndicator.visible {
  display: flex !important;
}

#dashboard {
  padding-top: 0 !important;
}

#dashboard .section-title {
  display: none !important;
}

#appScreen:not(.screen-dashboard) .app-header {
  padding-bottom: 8px !important;
}

#appScreen:not(.screen-dashboard) .balance-block,
#appScreen:not(.screen-dashboard) .bank-cards-carousel,
#appScreen:not(.screen-dashboard) .quick-actions {
  display: none !important;
}

#appScreen:not(.screen-dashboard) .app-content {
  padding-top: 10px !important;
}

.screen > .section-header-row,
.screen > .section-title,
.screen > .cards-row,
.screen > .card {
  margin-bottom: var(--mono-space-3) !important;
}

.screen > .cards-row:last-child,
.screen > .card:last-child {
  margin-bottom: 0 !important;
}

.cards-row {
  grid-template-columns: 1fr !important;
  gap: var(--mono-space-3) !important;
}

#dashboardActionForms.open {
  margin-top: var(--mono-space-3) !important;
}

#recentTransactionsCard {
  background: var(--mono-surface) !important;
  border: none !important;
  border-radius: var(--mono-radius-xl) !important;
  box-shadow: var(--mono-shadow) !important;
  padding: 18px 16px !important;
}

#recentTransactionsCard .card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

#recentTransactionsCard .card-head h3 {
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  color: var(--mono-text) !important;
}

.section-see-all {
  border: none !important;
  background: #e7ede4 !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  color: #5e6f60 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

#recentTransactions .item,
#transactionsList .item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #ebeff6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 13px 0 !important;
}

#recentTransactions .item:last-child,
#transactionsList .item:last-child {
  border-bottom: none !important;
}

#recentTransactions .item .item-body,
#transactionsList .item .item-body {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.tx-receipt-btn {
  flex-shrink: 0 !important;
  align-self: center !important;
}

.item .item-header strong,
.item .item-title {
  color: #161a22 !important;
  font-weight: 700 !important;
}

.item .muted,
.item-desc {
  color: #8e95a4 !important;
}

.tx-date-label {
  color: #4a5568 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
}

.amount,
.item-amount {
  font-weight: 700 !important;
}

.amount.in,
.item-amount.in {
  color: var(--mono-success) !important;
}

.amount.out,
.item-amount.out {
  color: #1a1f2b !important;
}

/* Action forms opened by quick buttons */
#dashboardActionForms {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  pointer-events: none !important;
  transition: max-height 0.35s ease, opacity 0.2s ease, margin-top 0.2s ease !important;
}

#dashboardActionForms.open {
  max-height: 1700px !important;
  opacity: 1 !important;
  margin-top: 12px !important;
  pointer-events: auto !important;
}

#dashboardActionForms .card {
  background: var(--mono-surface) !important;
  border: none !important;
  border-radius: var(--mono-radius-xl) !important;
  box-shadow: var(--mono-shadow) !important;
  padding: 16px !important;
}

#dashboardActionForms .card-head {
  margin-bottom: 12px !important;
  align-items: center !important;
}

#dashboardActionForms .card-head h3 {
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
  color: #141a26 !important;
}

#dashboardActionForms .card-icon-wrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
}

#dashboardActionForms .lbl {
  margin-bottom: 12px !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}

#dashboardActionForms .lbl:last-of-type {
  margin-bottom: 14px !important;
}

#dashboardActionForms .lbl input,
#dashboardActionForms .lbl select,
#dashboardActionForms .lbl textarea {
  min-height: 46px !important;
}

#dashboardActionForms .quick-amounts {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

#dashboardActionForms .qa-chip {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mono-border-soft) !important;
  background: #f3f6fb !important;
  color: #5f6f89 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  transition: transform var(--mono-motion-fast) ease, background var(--mono-motion-fast) ease, border-color var(--mono-motion-fast) ease, color var(--mono-motion-fast) ease !important;
}

#dashboardActionForms .qa-chip:hover {
  background: #e9eff9 !important;
  border-color: #ccd8ec !important;
  color: #2d3a50 !important;
}

#dashboardActionForms .qa-chip.active {
  background: #dfe9fb !important;
  border-color: #bccde8 !important;
  color: #20324f !important;
}

#dashboardActionForms .qa-chip:active {
  transform: scale(0.97) !important;
}

#dashboardActionForms .btn-accent {
  width: 100% !important;
}

.transfer-quick-recipients {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: -2px 0 12px !important;
}

.transfer-quick-recipients.hidden {
  display: none !important;
}

.tqr-chip {
  appearance: none !important;
  border: 1px solid #d3ddcf !important;
  background: #f3f7ef !important;
  color: #2f4834 !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  min-height: 30px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: transform var(--mono-motion-fast) ease, background var(--mono-motion-fast) ease, border-color var(--mono-motion-fast) ease, color var(--mono-motion-fast) ease !important;
}

.tqr-chip:hover {
  background: #e8f1e2 !important;
  border-color: #b9c9b3 !important;
  color: #1d3522 !important;
}

.tqr-chip:active {
  transform: scale(0.98) !important;
}

.tqr-chip:focus-visible {
  outline: none !important;
  box-shadow: var(--mono-focus-ring) !important;
}

.tx-quick-filters {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 8px 0 10px !important;
}

.tx-qf-chip {
  appearance: none !important;
  border: 1px solid #d6deea !important;
  background: #f5f8fd !important;
  color: #52627d !important;
  border-radius: 999px !important;
  min-height: 30px !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  transition: background var(--mono-motion-fast) ease, border-color var(--mono-motion-fast) ease, color var(--mono-motion-fast) ease, transform var(--mono-motion-fast) ease !important;
}

.tx-qf-chip:hover {
  background: #ecf2fb !important;
  border-color: #c6d3ea !important;
  color: #30415f !important;
}

.tx-qf-chip.active {
  background: #dde9fb !important;
  border-color: #bbcee9 !important;
  color: #1f3352 !important;
}

.tx-qf-chip:active {
  transform: scale(0.98) !important;
}

.tx-qf-chip:focus-visible {
  outline: none !important;
  box-shadow: var(--mono-focus-ring) !important;
}

.tx-qf-chip.tx-qf-clear {
  color: #7a889f !important;
}

.transfer-mode-toggle {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  background: #edf2f9 !important;
  border: 1px solid var(--mono-border-soft) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  margin: 2px 0 12px !important;
}

.tmt-btn {
  appearance: none !important;
  border: none !important;
  background: transparent !important;
  color: #63718b !important;
  min-height: 34px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  transition: background var(--mono-motion-fast) ease, color var(--mono-motion-fast) ease, transform var(--mono-motion-fast) ease, box-shadow var(--mono-motion-fast) ease !important;
}

.tmt-btn.active {
  background: #ffffff !important;
  color: #202b3f !important;
  box-shadow: 0 1px 6px rgba(16, 24, 38, 0.13) !important;
}

.tmt-btn:active {
  transform: scale(0.98) !important;
}

.tmt-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--mono-focus-ring) !important;
}

.lbl-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.card-lookup-status {
  min-width: 32px !important;
  text-align: right !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #8e98ab !important;
}

.card-lookup-status.ok {
  color: #1ea15a !important;
}

.card-lookup-status.pending {
  color: #5f6f89 !important;
}

.amount-input-wrap {
  position: relative !important;
}

.amount-input-wrap .amount-currency {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #7d899f !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  pointer-events: none !important;
}

.amount-input-wrap .amount-input {
  padding-left: 34px !important;
}

.card-num-input {
  letter-spacing: 0.05em !important;
}

/* ── Global Cards/Inputs ─────────────────────────── */
.screen:not(#dashboard) {
  background: transparent !important;
}

.card {
  background: var(--mono-surface) !important;
  border: none !important;
  border-radius: var(--mono-radius-lg) !important;
  box-shadow: var(--mono-shadow) !important;
  padding: 18px !important;
}

.lbl,
.card h3,
.card .card-title,
.section-title,
h2.section-title,
h3.section-title {
  color: var(--mono-text) !important;
}

.card-head h3 {
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.lbl {
  font-size: 12px !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
}

.muted,
.card .muted,
.lbl span {
  color: var(--mono-muted) !important;
}

input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea,
.conv-input,
.conv-select {
  background: var(--mono-surface-soft) !important;
  border: 1px solid #dfe5f0 !important;
  border-radius: 12px !important;
  color: #171b24 !important;
}

input:focus,
select:focus,
textarea:focus,
.conv-input:focus,
.conv-select:focus {
  border-color: #9cb3e6 !important;
  box-shadow: 0 0 0 3px rgba(58, 101, 193, 0.12) !important;
  outline: none !important;
}

.btn-accent,
.btn-primary,
.auth-submit {
  background: #253428 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  min-height: 46px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  transition: transform var(--mono-motion-fast) ease, background var(--mono-motion-fast) ease, box-shadow var(--mono-motion-fast) ease !important;
}

.btn-ghost {
  background: #edf1f7 !important;
  border: 1px solid #c6d3e6 !important;
  color: #3a4d68 !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  transition: transform var(--mono-motion-fast) ease, background var(--mono-motion-fast) ease, border-color var(--mono-motion-fast) ease, color var(--mono-motion-fast) ease !important;
}

.btn-accent:hover,
.btn-primary:hover,
.auth-submit:hover {
  background: #314438 !important;
}

.btn-accent:active,
.btn-primary:active,
.auth-submit:active,
.btn-ghost:active {
  transform: scale(0.98) !important;
}

.btn-ghost:hover {
  background: #e8edf7 !important;
  border-color: var(--mono-border-strong) !important;
  color: #2b3d58 !important;
}

.btn-accent:focus-visible,
.btn-primary:focus-visible,
.auth-submit:focus-visible,
.btn-ghost:focus-visible {
  outline: none !important;
  box-shadow: var(--mono-focus-ring) !important;
}

/* ── Secondary screens: let active-screen mechanism work ─────── */
#appScreen #analytics.active-screen,
#appScreen #savings.active-screen,
#appScreen #payouts.active-screen,
#appScreen #donations.active-screen,
#appScreen #contacts.active-screen,
#appScreen #calendar.active-screen,
#appScreen #recurring.active-screen,
#appScreen #debts.active-screen {
  display: block !important;
}
.ams-item {
  background: var(--mono-surface) !important;
  border: 1px solid var(--mono-border-soft) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
.ams-item.green { border-color: rgba(31,160,85,.25) !important; }
.ams-item.red   { border-color: rgba(242,84,97,.25) !important; }
.ams-label {
  font-size: 10px !important;
  color: var(--mono-muted) !important;
}
.ams-sub { color: var(--mono-muted) !important; }
.cat-bar-wrap {
  background: var(--mono-border-strong) !important;
}
.cat-label { color: var(--mono-text) !important; }
#analytics .card {
  background: var(--mono-surface) !important;
  border: 1px solid var(--mono-border-soft) !important;
  box-shadow: var(--mono-shadow) !important;
}

#transactions .section-header-row,
#cards .section-header-row,
#profile .section-header-row {
  margin-bottom: 10px !important;
}

#transactions .section-title,
#cards .section-title,
#profile .section-title {
  margin-bottom: 0 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

#transactions .card {
  border-radius: var(--mono-radius-xl) !important;
  padding: 20px !important;
}

/* ── Search input fix: icon alignment ── */
#transactions .tx-search-wrap {
  position: relative !important;
}
#transactions .tx-search-icon {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#transactions .tx-search-wrap input[type="search"],
#transactionsFilters input,
#transactionsFilters select {
  min-height: 46px !important;
  padding-left: 38px !important;
}

#transactions .btn-ghost.btn-sm {
  min-height: 40px !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
}

/* Profile screen: cleaner hierarchy + readable controls */
#profile .card {
  border-radius: var(--mono-radius-xl) !important;
  padding: 16px !important;
}

#profile .card-head {
  margin-bottom: 6px !important;
}

#profile .card-head h3 {
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
}

#profile .profile-info-list {
  margin-top: 4px !important;
}

#profile .profile-info-row {
  padding: 13px 0 !important;
  border-bottom: 1px solid var(--mono-border-soft) !important;
}

#profile .profile-info-row dt {
  color: #3a4e63 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}

#profile .profile-info-row dd {
  color: #151b27 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

#profile .account-row dd {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

#profile .copy-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  border: 1px solid var(--mono-border-soft) !important;
  background: #f3f6fb !important;
  color: #62718a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--mono-motion-fast) ease, color var(--mono-motion-fast) ease, transform var(--mono-motion-fast) ease !important;
}

#profile .copy-btn:hover {
  background: #eaf0f9 !important;
  color: #1f2a3f !important;
}

#profile .copy-btn:active {
  transform: scale(0.95) !important;
}

#profile .settings-list {
  margin-top: 4px !important;
}

#profile .setting-row {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--mono-border-soft) !important;
  align-items: flex-start !important;
}

#profile .setting-label {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #151b27 !important;
}

#profile .setting-desc {
  font-size: 13px !important;
  color: #7f899d !important;
  line-height: 1.35 !important;
  margin-top: 3px !important;
}

.toggle-switch {
  position: relative !important;
  width: 46px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}

.toggle-switch input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.toggle-knob {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background: #d6deec !important;
  border: 1px solid #c6d1e2 !important;
  cursor: pointer !important;
  transition: background var(--mono-motion-fast) ease, border-color var(--mono-motion-fast) ease !important;
}

.toggle-knob::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(19, 28, 43, 0.22) !important;
  transition: transform var(--mono-motion-fast) ease !important;
}

.toggle-switch input:checked + .toggle-knob {
  background: #4a7ce8 !important;
  border-color: #3f72df !important;
}

.toggle-switch input:checked + .toggle-knob::before {
  transform: translateX(18px) !important;
}

.toggle-switch input:focus-visible + .toggle-knob {
  box-shadow: var(--mono-focus-ring) !important;
}

#pinStatusBadge.pin-status-badge {
  background: #f3f6fb !important;
  border: 1px solid var(--mono-border-soft) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  color: #495a74 !important;
}

#profile .profile-links-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#profile .profile-link-btn {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid var(--mono-border-soft) !important;
  background: #f8faff !important;
  color: #243247 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  justify-content: flex-start !important;
  transition: transform var(--mono-motion-fast) ease, background var(--mono-motion-fast) ease, border-color var(--mono-motion-fast) ease !important;
}

#profile .profile-link-btn:hover {
  background: #f0f5ff !important;
  border-color: #cfdbed !important;
}

#profile .profile-link-btn:active {
  transform: scale(0.98) !important;
}

#profile .profile-link-btn svg {
  color: #607290 !important;
}

#profile .list .item,
#profile .list .item-with-actions {
  border-bottom-color: var(--mono-border-soft) !important;
}

/* App blocks: one coherent visual system */
.card-head {
  margin-bottom: 12px !important;
}

.card-head h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #151b27 !important;
}

.card-icon-wrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
}

.empty-state {
  border-radius: 14px !important;
  border: 1px dashed var(--mono-border-strong) !important;
  background: #f7f9fd !important;
  color: #738097 !important;
  padding: 16px 14px !important;
  font-size: 13px !important;
}

.empty-state strong {
  color: #2a3447 !important;
  font-size: 14px !important;
}

/* Achievements */
#achieveCount {
  background: #edf2fa !important;
  border: 1px solid var(--mono-border-soft) !important;
  border-radius: 999px !important;
  padding: 4px 9px !important;
  color: #5f708a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.achievements-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.achieve-item {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 14px !important;
  border: 1px solid var(--mono-border-soft) !important;
  background: #f8faff !important;
  padding: 10px 12px !important;
}

.achieve-item.done {
  background: #eef8f2 !important;
  border-color: #cfe9da !important;
}

.achieve-item.locked {
  opacity: 0.9 !important;
}

.achieve-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #f0f5ff !important;
  border: 1px solid #dfe7f3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #3a5ea8 !important;
}

.achieve-item.done .achieve-icon {
  background: #eaf6ef !important;
  border-color: #c4e6d2 !important;
  color: #1a7a46 !important;
}

.achieve-body {
  min-width: 0 !important;
}

.achieve-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1b2435 !important;
}

.achieve-desc {
  margin-top: 2px !important;
  font-size: 12px !important;
  color: #7e8aa1 !important;
  line-height: 1.35 !important;
}

.achieve-check {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: #1ea15a !important;
  color: #fff !important;
}

.achieve-check.locked-icon {
  background: #f0f2f7 !important;
  color: #b0b8c9 !important;
}

/* Insights + forecast */
.insights-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.insight-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  border-radius: 12px !important;
  background: #f6f9ff !important;
  border: 1px solid var(--mono-border-soft) !important;
  padding: 10px 12px !important;
}

.insight-icon {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.insight-text {
  font-size: 13px !important;
  color: #2a3449 !important;
  line-height: 1.35 !important;
}

.forecast-trend {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: #f4f7fc !important;
  border: 1px solid var(--mono-border-soft) !important;
  font-size: 13px !important;
  margin-bottom: 10px !important;
}

.forecast-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.forecast-item {
  background: #f8faff !important;
  border: 1px solid var(--mono-border-soft) !important;
  border-radius: 12px !important;
  padding: 10px 8px !important;
  text-align: center !important;
}

.forecast-period {
  font-size: 12px !important;
  color: #6f7e95 !important;
  margin-bottom: 4px !important;
}

.forecast-balance {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.forecast-balance.up {
  color: #1ea15a !important;
}

.forecast-balance.down {
  color: #d14a58 !important;
}

.forecast-change {
  margin-top: 3px !important;
  font-size: 11px !important;
}

/* Currency block */
.currency-rates {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.rate-item {
  background: #f7f9fd !important;
  border: 1px solid var(--mono-border-soft) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
}

.rate-flag {
  font-size: 16px !important;
}

.rate-code {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #6f7e96 !important;
}

.rate-val {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1d2a3f !important;
}

.currency-converter {
  border-top: 1px solid var(--mono-border-soft) !important;
  padding-top: 10px !important;
}

.conv-row {
  display: grid !important;
  grid-template-columns: 1fr 96px auto 96px !important;
  gap: 6px !important;
  align-items: center !important;
}

.conv-arrow {
  color: #7a879d !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.conv-result {
  margin-top: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #20314f !important;
  text-align: center !important;
}

/* Savings calculator */
.calc-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.calc-result {
  margin-top: 10px !important;
  border: 1px solid var(--mono-border-soft) !important;
  background: #f5f8fe !important;
  border-radius: 14px !important;
  padding: 12px !important;
}

.calc-main {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #151d2f !important;
}

/* Goal / donation / contacts list blocks */
#donationsList .item,
#goalsList .item-with-actions,
#contactsList .item-with-actions {
  border: 1px solid var(--mono-border-soft) !important;
  border-radius: 14px !important;
  background: #f8faff !important;
  padding: 11px 12px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--mono-border-soft) !important;
}

#donationsList .item:last-child,
#goalsList .item-with-actions:last-child,
#contactsList .item-with-actions:last-child {
  margin-bottom: 0 !important;
}

.pct-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 46px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: #e9eff9 !important;
  color: #2a4062 !important;
  border: 1px solid #cfdaeb !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.pct-badge.done {
  background: #e8f7ef !important;
  border-color: #c2e7d0 !important;
  color: #1c8a50 !important;
}

.item-btns {
  gap: 7px !important;
}

.btn-icon-danger,
.btn-icon-transfer,
.btn-icon-history {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  border: 1px solid var(--mono-border-soft) !important;
  background: #f3f6fb !important;
  color: #64758f !important;
  transition: transform var(--mono-motion-fast) ease, background var(--mono-motion-fast) ease !important;
}

.btn-icon-transfer {
  background: #edf4ff !important;
  border-color: #d4e1f8 !important;
  color: #2e63c8 !important;
}

.btn-icon-danger {
  background: #fff2f4 !important;
  border-color: #f4d0d6 !important;
  color: #bb4b59 !important;
}

.btn-icon-danger:hover,
.btn-icon-transfer:hover,
.btn-icon-history:hover {
  transform: scale(1.03) !important;
}

/* Sessions and security */
#securityLogList,
#sessionsList {
  margin-top: 8px !important;
}

.session-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border-radius: 12px !important;
  border: 1px solid var(--mono-border-soft) !important;
  background: #f8faff !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}

.session-item:last-child {
  margin-bottom: 0 !important;
}

.session-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1f2b41 !important;
}

.session-current {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: #e8f7ef !important;
  color: #1b8a50 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-right: 4px !important;
}

.session-dates {
  font-size: 12px !important;
  color: #7f8ba0 !important;
  margin-top: 2px !important;
}

/* Security log + budget cards */
.sec-log-loading,
.sec-log-error {
  border-radius: 12px !important;
  border: 1px dashed var(--mono-border-strong) !important;
  background: #f8faff !important;
  padding: 12px !important;
  font-size: 13px !important;
  color: #718198 !important;
}

.sec-log-error {
  color: #b24a58 !important;
}

.sec-log-item {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  border: 1px solid var(--mono-border-soft) !important;
  background: #f8faff !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}

.sec-log-item:last-child {
  margin-bottom: 0 !important;
}

.sec-log-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #eef3fb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

.sec-log-body {
  min-width: 0 !important;
  overflow: hidden !important;
}

.sec-log-action {
  font-size: 13px !important;
  color: #1e2a3f !important;
  font-weight: 600 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

.sec-log-date {
  margin-top: 2px !important;
  font-size: 12px !important;
  word-break: break-all !important;
}

.budget-limits-list,
.budget-progress-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.budget-limit-item,
.budget-progress-item {
  border-radius: 12px !important;
  border: 1px solid var(--mono-border-soft) !important;
  background: #f8faff !important;
  padding: 10px 12px !important;
}

.bl-header,
.bpi-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
}

.bl-type,
.bpi-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #253249 !important;
}

.bl-pct,
.bpi-amounts {
  margin-left: auto !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.bl-amounts {
  margin-top: 6px !important;
  font-size: 12px !important;
  color: #7a879e !important;
}

.bpi-bar {
  height: 8px !important;
  border-radius: 999px !important;
  background: #e9eef7 !important;
  overflow: hidden !important;
}

.bpi-fill {
  height: 100% !important;
  border-radius: inherit !important;
  background: #2f63d8 !important;
}

.bpi-fill.warn {
  background: #d68f37 !important;
}

.bpi-fill.over {
  background: #d14f5e !important;
}

@media (max-width: 420px) {
  .forecast-grid {
    grid-template-columns: 1fr !important;
  }

  .currency-rates {
    grid-template-columns: 1fr !important;
  }

  .conv-row {
    grid-template-columns: 1fr 1fr !important;
  }

  .conv-arrow {
    display: none !important;
  }
}

/* Cards screen: full styling for dynamic card list + controls */
.btn-accent-sm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mono-border-strong) !important;
  background: #f5f8fd !important;
  color: #1e2a3f !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  min-height: 40px !important;
  transition: transform var(--mono-motion-fast) ease, background var(--mono-motion-fast) ease !important;
}

.btn-accent-sm:hover {
  background: #edf3fd !important;
}

.btn-accent-sm:active {
  transform: scale(0.98) !important;
}

.cards-manage-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.card-manage-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: var(--mono-surface) !important;
  border-radius: var(--mono-radius-lg) !important;
  box-shadow: 0 10px 24px rgba(17, 25, 40, 0.1) !important;
  border: 1px solid var(--mono-border-soft) !important;
  padding: 16px !important;
  transition: transform var(--mono-motion-fast) ease, box-shadow var(--mono-motion-fast) ease !important;
}

.card-manage-item:active {
  transform: scale(0.995) !important;
}

.card-manage-item.closed {
  opacity: 0.78 !important;
}

.cmi-visual {
  min-width: 0 !important;
}

.cmi-chip {
  width: 26px !important;
  height: 20px !important;
  margin-bottom: 10px !important;
}

.cmi-number {
  color: #171c28 !important;
  font-size: 26px !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

.cmi-meta {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  color: #77839a !important;
  font-size: 13px !important;
}

.cmi-design {
  margin-top: 10px !important;
}

.cmi-design-head {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.cmi-design-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #67758c !important;
}

.cmi-design-palette {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

.cmi-design-dot {
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  border: 2px solid #d5ded0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(18, 26, 20, 0.2) !important;
  transition: transform var(--mono-motion-fast) ease, border-color var(--mono-motion-fast) ease, box-shadow var(--mono-motion-fast) ease !important;
}

.cmi-design-dot:hover {
  transform: scale(1.06) !important;
}

.cmi-design-dot.active {
  transform: scale(1.12) !important;
  border-color: #2f4b36 !important;
  box-shadow: 0 0 0 2px rgba(47, 75, 54, 0.18) !important;
}

.cmi-design-dot:disabled {
  opacity: 0.45 !important;
  cursor: default !important;
}

.cmi-design-dot.design-gold {
  background: linear-gradient(135deg, #7e611f 0%, #b58f34 100%) !important;
}

.cmi-design-dot.design-navy {
  background: linear-gradient(135deg, #24384f 0%, #4c647f 100%) !important;
}

.cmi-design-dot.design-forest {
  background: linear-gradient(135deg, #314332 0%, #5a7757 100%) !important;
}

.cmi-design-dot.design-camo {
  background:
    radial-gradient(85% 70% at 30% 30%, #7b8758 0%, #7b8758 35%, transparent 36%),
    radial-gradient(95% 75% at 65% 68%, #4d5b3b 0%, #4d5b3b 40%, transparent 41%),
    linear-gradient(135deg, #2f3f2a 0%, #596846 100%) !important;
}

.cmi-design-dot.design-rose {
  background: linear-gradient(135deg, #62394f 0%, #9b5f84 100%) !important;
}

.cmi-design-dot.design-slate {
  background: linear-gradient(135deg, #33404d 0%, #5f7285 100%) !important;
}

.cmi-right {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.cmi-status {
  border-radius: 999px !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.card-status-active {
  background: #e7f7ee !important;
  color: #1a8b4c !important;
}

.card-status-blocked {
  background: #fff4e7 !important;
  color: #b7791f !important;
}

.card-status-closed {
  background: #f2f4f8 !important;
  color: #7f8aa1 !important;
}

.cmi-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.btn-card-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mono-border-strong) !important;
  background: #f4f7fc !important;
  color: #253045 !important;
  padding: 7px 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: transform var(--mono-motion-fast) ease, background var(--mono-motion-fast) ease !important;
}

.btn-card-action:hover {
  background: #ebf1fb !important;
}

.btn-card-action:active {
  transform: scale(0.97) !important;
}

.btn-card-action.btn-block {
  background: #fff7eb !important;
  border-color: #f2d9b4 !important;
  color: #9a6323 !important;
}

.btn-card-action.btn-unblock {
  background: #e9f8f0 !important;
  border-color: #c2ead4 !important;
  color: #1b8751 !important;
}

.btn-close-card {
  border-color: #f2c4ca !important;
  background: #fff2f4 !important;
  color: #b73f4d !important;
}

@media (max-width: 420px) {
  .cmi-actions {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }
}

.loading-spinner-sm {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  border: 3px solid #dfe5f0 !important;
  border-top-color: #3b63c8 !important;
  margin: 16px auto !important;
  animation: spin 0.9s linear infinite !important;
}

.design-picker {
  margin-bottom: 12px !important;
}

.design-picker-label {
  display: block !important;
  margin-bottom: 8px !important;
  color: #6f7c95 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.design-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.design-opt {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid #d8e0ee !important;
  border-radius: 12px !important;
  background: #f8faff !important;
  color: #44506a !important;
  padding: 8px 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.design-opt.selected {
  border-color: #2f63d8 !important;
  box-shadow: 0 0 0 2px rgba(47, 99, 216, 0.14) !important;
  color: #1d2e58 !important;
}

.design-swatch {
  width: 100% !important;
  height: 24px !important;
  border-radius: 8px !important;
}

.swatch-gold {
  background: linear-gradient(120deg, #6d5418 0%, #a78b39 100%) !important;
}

.swatch-navy {
  background: linear-gradient(120deg, #1a2b55 0%, #223f80 100%) !important;
}

.swatch-forest {
  background: linear-gradient(120deg, #18362b 0%, #2f6a53 100%) !important;
}

.swatch-rose {
  background: linear-gradient(120deg, #4a1f36 0%, #82385d 100%) !important;
}

.swatch-slate {
  background: linear-gradient(120deg, #303745 0%, #4c5a70 100%) !important;
}

.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 3000 !important;
  background: rgba(12, 18, 30, 0.46) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.modal-overlay.hidden {
  display: none !important;
}

.modal-box {
  width: min(420px, 100%) !important;
  background: #ffffff !important;
  border-radius: var(--mono-radius-lg) !important;
  box-shadow: 0 18px 46px rgba(16, 24, 38, 0.22) !important;
  padding: 18px !important;
}

.modal-title {
  color: #111623 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

.modal-text {
  color: #6d7890 !important;
  font-size: 14px !important;
  margin-bottom: 14px !important;
}

.modal-actions {
  display: flex !important;
  gap: 8px !important;
}

.modal-actions .btn-danger,
.modal-actions .btn-ghost {
  flex: 1 !important;
}

/* ── Bottom Tab Bar ───────────────────────────────── */
.bottom-nav {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  height: 64px !important;
  min-height: 64px !important;
  border-radius: 36px !important;
  background: rgba(246, 249, 241, 0.96) !important;
  border: 1px solid rgba(32, 44, 35, 0.12) !important;
  box-shadow: 0 14px 30px rgba(18, 28, 20, 0.16) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 0 8px 0 !important;
  z-index: 500 !important;
  gap: 0 !important;
  transition: transform var(--mono-motion-base) ease, opacity var(--mono-motion-fast) ease !important;
  will-change: transform, opacity !important;
}

@media (max-width: 959px) {
  .bottom-nav.nav-hidden {
    transform: translateY(calc(120% + env(safe-area-inset-bottom, 0px))) !important;
    opacity: 0.01 !important;
    pointer-events: none !important;
  }
}

/* ── Notification panel (closed by default) ───────── */
.notif-panel {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: min(58vh, 470px) !important;
  overflow: auto !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 34px rgba(16, 24, 38, 0.18) !important;
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.24s ease, opacity 0.24s ease !important;
  z-index: 520 !important;
}

.notif-panel.open {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.notif-panel-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #edf1f7 !important;
}

.notif-panel-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #151922 !important;
  margin-right: auto !important;
}

.notif-list {
  padding: 8px 12px 12px !important;
}

.notif-item {
  background: #f5f7fb !important;
  border: 1px solid #e4ebf4 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}

.nav-item,
.menu-btn {
  color: var(--mono-muted-2) !important;
  border: none !important;
  background: transparent !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 7px 4px 8px !important;
  position: relative !important;
  transition: color var(--mono-motion-fast) ease, transform var(--mono-motion-fast) ease !important;
}

.nav-item svg,
.menu-btn svg {
  stroke: var(--mono-muted-2) !important;
}

.nav-item.active,
.nav-link.active,
.menu-btn.active {
  color: var(--mono-danger) !important;
  background: transparent !important;
}

.nav-item:active,
.menu-btn:active {
  transform: translateY(1px) !important;
}

.nav-item:focus-visible,
.menu-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--mono-focus-ring) !important;
}

.nav-item.active::after,
.menu-btn.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 20px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--mono-danger) !important;
}

.nav-item.active svg,
.nav-link.active svg,
.menu-btn.active svg {
  stroke: var(--mono-danger) !important;
}

.screen.active-screen > .section-header-row,
.screen.active-screen > .card,
.screen.active-screen > .cards-row {
  animation: monoRise var(--mono-motion-base) cubic-bezier(0.2, 0.7, 0.2, 1) both !important;
}

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

/* ── Desktop: centered app frame ─────────────────── */
@media (min-width: 960px) {
  #appScreen.app-shell {
    width: min(460px, calc(100vw - 24px)) !important;
    margin: 14px auto 20px !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    box-shadow: 0 26px 70px rgba(17, 27, 44, 0.24) !important;
    min-height: calc(100vh - 34px) !important;
    background: var(--mono-bg) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .app-header {
    border-radius: 0 !important;
    width: auto !important;
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }

  .app-content {
    max-width: none !important;
    padding: 12px 16px calc(var(--nav-h) + 30px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
  }

  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    width: min(440px, calc(100vw - 34px)) !important;
    transform: translateX(-50%) !important;
  }

  .screen {
    max-width: none !important;
    padding-bottom: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD VISUAL IMPROVEMENTS
   ══════════════════════════════════════════════════════════ */

/* Hero balance — larger, more air */
.balance-block {
  padding: 4px 0 20px !important;
}
.balance-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.82) !important;
  margin-bottom: 4px !important;
}
.balance-amount {
  font-size: clamp(2.8rem, 12vw, 4.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #fff 60%, rgba(255,255,255,.6)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.balance-account {
  font-size: 12px !important;
  color: rgba(255,255,255,.72) !important;
  margin-top: 6px !important;
  font-family: var(--font-mono, monospace) !important;
  letter-spacing: .05em !important;
}

/* Quick actions — crisper */
.quick-actions {
  gap: 10px !important;
  padding: 0 4px !important;
}
.qa-btn {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 13px 6px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.13) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: background .15s, transform .12s !important;
}
.qa-btn:active {
  transform: scale(.94) !important;
  background: rgba(255,255,255,.14) !important;
}
.qa-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.qa-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  color: rgba(255,255,255,.92) !important;
  text-transform: uppercase !important;
}

/* Dashboard cards — keep readable light surfaces */
#dashboard .card {
  border-radius: 20px !important;
  background: var(--mono-surface) !important;
  border: 1px solid var(--mono-border-soft) !important;
  box-shadow: var(--mono-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Month strip — badge style */
.month-strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
.ms-item {
  border-radius: 16px !important;
  padding: 12px 10px !important;
  background: #eef3e9 !important;
  border: 1px solid #d8e2d3 !important;
  text-align: center !important;
}
.ms-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #6c7c6e !important;
  margin-bottom: 5px !important;
}
.ms-value {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
.ms-item.green .ms-value { color: #4ade80 !important; }
.ms-item.red .ms-value   { color: #f87171 !important; }

/* ══════════════════════════════════════════════════════════
   TAX CONSULTANT SECTION
   ══════════════════════════════════════════════════════════ */

#tax {
  padding-bottom: 40px !important;
}

.tax-hero {
  text-align: center;
  padding: 28px 16px 24px;
}
.tax-hero-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
}
.tax-hero-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #182118;
  margin: 0 0 6px;
}
.tax-hero-sub {
  font-size: 12px;
  color: #5f6f61;
  margin: 0;
  line-height: 1.5;
}

/* Accordion card */
.tax-card {
  background: #f7faf4;
  border: 1px solid #d6dfd1;
  border-radius: 18px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .2s;
}
.tax-card[open] {
  border-color: #becbb8;
}
.tax-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.tax-card-head::-webkit-details-marker { display: none; }
.tax-card-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecf3e8;
  border-radius: 9px;
}
.tax-card-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #1f2a20;
  line-height: 1.3;
}
.tax-chevron {
  flex-shrink: 0;
  color: #708171;
  transition: transform .2s;
}
.tax-card[open] .tax-chevron {
  transform: rotate(180deg);
}
.tax-card-body {
  padding: 0 16px 18px;
  font-size: 13px;
  color: #3e4c3f;
  line-height: 1.6;
}
.tax-card-body p {
  margin: 0 0 12px;
}
.tax-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}
.tax-badge.green {
  background: #e8f5e8;
  color: #1f7a43;
  border: 1px solid #b8dcbc;
}
.tax-badge.orange {
  background: #fff2e5;
  color: #a85b1f;
  border: 1px solid #efcea9;
}
.tax-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #e4ece0;
  font-size: 13px;
}
.tax-row:last-of-type {
  border-bottom: none;
  margin-bottom: 10px;
}
.tax-row span:first-child {
  color: #516352;
  flex: 1;
}
.tax-val {
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
  color: #1f2b20;
}
.tax-val.green { color: #1d8248; }
.tax-val.orange { color: #a35518; }
.tax-val.red   { color: #b23b49; }
.tax-note {
  background: #edf4ea;
  border-left: 3px solid #9eb7a0;
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  font-size: 12px;
  color: #4b5e4c;
  margin-top: 12px;
  line-height: 1.5;
}
.tax-list {
  padding-left: 18px;
  margin: 8px 0 12px;
  color: #4a5a4b;
  font-size: 13px;
  line-height: 1.8;
}

/* Links card */
.tax-links-card {
  background: #f6faf3;
  border: 1px solid #d6dfd1;
  border-radius: 18px;
  padding: 18px 16px;
  margin-top: 10px;
}
.tax-links-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2a20;
  margin: 0 0 14px;
}
.tax-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.tax-link-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  background: #edf3e9;
  border: 1px solid #d2ded0;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #243124;
  text-decoration: none;
  transition: background .15s;
}
.tax-link-btn:hover {
  background: #e4ecde;
}
.tax-disclaimer {
  font-size: 11px;
  color: #5f705f;
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

/* ── PWA native-feel fixes ───────────────────────────────────────────────── */

/* 1. Prevent iOS Safari zoom on input focus (font-size must be ≥ 16px) */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* 2. Overscroll — no rubber-band bounce outside the app shell */
html, body {
  overscroll-behavior: none;
}

/* 3. Safe area — bottom nav / fixed bars clear iPhone home indicator */
.bottom-nav,
.bottom-bar,
.nav-bar,
[class*="bottom-nav"],
[class*="tab-bar"] {
  padding-bottom: calc(var(--bottom-pad, 0px) + env(safe-area-inset-bottom, 0px));
}

/* 4. Body bottom padding so content isn't hidden behind home indicator */
body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Bottom-sheet modal system (light theme) ─────────────────────────────── */
.tc-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.tc-overlay.hidden { display: none !important; }

.tc-sheet {
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 92dvh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 24px rgba(0,0,0,.10), 0 -1px 0 rgba(0,0,0,.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: sheetSlideUp .22s cubic-bezier(.32,1,.46,1) both;
}
@keyframes sheetSlideUp {
  from { transform: translateY(100%); opacity: .6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Drag handle */
.tc-handle {
  width: 40px; height: 4px;
  background: #d1d8d0;
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

/* Sheet header icon */
.tc-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 14px auto 8px;
  flex-shrink: 0;
}

/* Sheet title */
.tc-title {
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  color: var(--mono-text);
  margin: 0 0 14px;
  padding: 0 20px;
  flex-shrink: 0;
}

/* Scrollable body area */
.tc-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 18px;
  -webkit-overflow-scrolling: touch;
  color: var(--mono-text);
}

/* Sticky footer buttons */
.tc-footer {
  flex-shrink: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--mono-border-soft);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tc-confirm-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .1s;
}
.tc-confirm-btn:disabled { opacity: .45; cursor: not-allowed; }
.tc-confirm-btn:active:not(:disabled) { transform: scale(.98); }
.tc-cancel-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--mono-border-soft);
  color: var(--mono-muted);
  transition: background .15s;
}
.tc-cancel-btn:hover { background: var(--mono-surface-soft); }

/* Transfer confirm specific rows */
.tc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
}
.tc-label { opacity: .75; }
.tc-val { font-weight: 600; }

/* ── Calendar layout ──────────────────────── */
.cal-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.cal-month-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mono-text) !important;
  min-width: 120px !important;
  text-align: center !important;
}

/* ── Calendar grid ─────────────────────────── */
.cal-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  text-align: center !important;
  margin-bottom: 4px !important;
}
.cal-weekdays span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--mono-muted) !important;
  padding: 4px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important;
}
.cal-cell {
  aspect-ratio: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background .15s !important;
  position: relative !important;
}
.cal-cell:hover {
  background: var(--mono-surface-soft) !important;
}
.cal-cell.today .cal-day-num {
  background: var(--mono-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cal-day-num {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mono-text) !important;
  line-height: 1 !important;
}
.cal-dots {
  display: flex !important;
  gap: 2px !important;
  margin-top: 2px !important;
}
.cal-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
}
.cal-dot.in  { background: var(--mono-green) !important; }
.cal-dot.out { background: var(--mono-red) !important; }
.cal-cell.cal-empty { pointer-events: none !important; }

/* ── "Обійма" style — clean text blocks & card hierarchy ─── */

/* Sub-screen titles: bigger, bolder, warmer */
#savings > .section-title,
#payouts > .section-title,
#donations > .section-title,
#contacts > .section-title,
#debts > .section-title,
#recurring > .section-title,
#tax > .section-title,
#analytics > .section-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #141a15 !important;
  margin-bottom: 16px !important;
}

/* Card: warmer surface, more defined shadow, no harsh border */
.screen > .card,
.cards-row > .card {
  background: #fff !important;
  border: 1px solid #e8ede8 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04) !important;
  padding: 18px 16px !important;
}

/* Card head: tighter spacing, icon + title inline */
.screen > .card .card-head,
.cards-row > .card .card-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f0f3f0 !important;
}

.screen > .card .card-head h3,
.cards-row > .card .card-head h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #141a15 !important;
}

/* List items in cards: clean rows with subtle separator */
.screen .card .item,
.cards-row .card .item {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #f0f3f0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.screen .card .item:last-child,
.cards-row .card .item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.screen .card .item:first-child,
.cards-row .card .item:first-child {
  padding-top: 0 !important;
}

/* Item header: bold title + amount on same line */
.screen .card .item .item-header,
.cards-row .card .item .item-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
}

.screen .card .item .item-header strong,
.cards-row .card .item .item-header strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #141a15 !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.screen .card .item .item-header .amount,
.cards-row .card .item .item-header .amount {
  font-size: 15px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* Item subtitle */
.screen .card .item .muted,
.cards-row .card .item .muted {
  font-size: 12px !important;
  color: #8a9490 !important;
  line-height: 1.4 !important;
}

/* Empty state: warmer & cleaner */
.screen .card .empty-state,
.cards-row .card .empty-state {
  background: #f9fbf9 !important;
  border: 1.5px dashed #cdd8cd !important;
  border-radius: 14px !important;
  padding: 24px 16px !important;
  text-align: center !important;
}

.screen .card .empty-state strong {
  font-size: 15px !important;
  color: #2e3a2f !important;
}

/* Form labels inside cards: clean uppercase micro-label */
.screen .card .lbl,
.cards-row .card .lbl {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5a6a5c !important;
  letter-spacing: .04em !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin-bottom: 12px !important;
}

/* Quick amount chips */
.screen .card .amount-chips,
.screen .card [class*="chips"],
.cards-row .card .amount-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}

/* ═══════════════════════════════════════════════════════════
   PWA ADAPTIVE — Global mobile/responsive polish
   ═══════════════════════════════════════════════════════════ */

/* 1. Dynamic viewport height — prevents content hiding behind iOS keyboard */
#appScreen.app-shell {
  min-height: 100dvh !important;
}

/* 2. Touch targets — minimum 44×44px (WCAG 2.5.5) */
.nav-item,
.menu-btn {
  min-height: 44px !important;
  padding: 8px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-card-action {
  min-height: 44px !important;
  padding: 10px 16px !important;
}

.qa-btn {
  min-height: 72px !important;
}

/* 3. Header info — prevent truncation on tiny phones */
.header-info {
  max-width: min(calc(100vw - 96px), 220px) !important;
}

/* 4. Scrollbars hidden on touch devices */
@media (hover: none) and (pointer: coarse) {
  .app-content,
  .bank-cards-track,
  [class*="scroll"] {
    scrollbar-width: none !important;
  }
  .app-content::-webkit-scrollbar,
  .bank-cards-track::-webkit-scrollbar,
  [class*="scroll"]::-webkit-scrollbar {
    display: none !important;
  }
}

/* 5. Small phones (≤ 480px) — Quick Actions 2×2 */
@media (max-width: 480px) {
  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .qa-btn {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    min-height: 56px !important;
  }

  .qa-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  .qa-label {
    font-size: 13px !important;
    text-align: left !important;
  }
}

/* 6. Very small phones (≤ 360px) — grids single column */
@media (max-width: 360px) {
  .month-strip {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .ams-item {
    padding: 10px 8px !important;
  }

  .balance-amount {
    font-size: clamp(2rem, 12vw, 2.8rem) !important;
  }

  .app-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .nav-item span {
    font-size: 9px !important;
  }
}

/* 7. Landscape on small phones — compact header + PIN */
@media (orientation: landscape) and (max-height: 500px) {
  .app-header {
    padding: 4px 12px !important;
    min-height: 44px !important;
  }

  .balance-block {
    margin-bottom: 8px !important;
  }

  .balance-amount {
    font-size: 2rem !important;
  }

  .pin-key {
    width: 56px !important;
    height: 56px !important;
    font-size: 20px !important;
  }

  .bottom-nav {
    height: 48px !important;
    min-height: 48px !important;
  }

  .nav-item {
    min-height: 48px !important;
    padding: 6px 4px !important;
  }

  .nav-item span {
    display: none !important;
  }

  .app-content {
    padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 8. Tablet (640–959px) — wider card + roomier spacing */
@media (min-width: 640px) and (max-width: 959px) {
  .screen > .card,
  .cards-row > .card {
    border-radius: 20px !important;
  }

  .app-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* 9. Overscroll — prevent pull-to-refresh on the app shell */
#appScreen.app-shell {
  overscroll-behavior: contain !important;
}

/* 10. Focus-visible outline for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--mono-blue-mid) !important;
  outline-offset: 2px !important;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--mono-blue-mid) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ── QR Code Block ───────────────────────────────── */
.qr-toggle-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 12px !important;
  padding: 11px 16px !important;
  background: #f5f8ff !important;
  border: 1px solid #d6e0f7 !important;
  border-radius: 12px !important;
  color: #3a5ea8 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 150ms ease, border-color 150ms ease !important;
}
.qr-toggle-btn:hover {
  background: #eaf0fd !important;
  border-color: #b8caf0 !important;
}
.qr-toggle-btn:active { transform: scale(0.98) !important; }

.qr-wrap {
  margin-top: 12px !important;
}

.qr-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 24px 20px !important;
  background: #fff !important;
  border: 1px solid #e4ead4 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
}

.qr-frame {
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid #e8ede8 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  display: inline-flex !important;
}

.qr-img {
  width: 160px !important;
  height: 160px !important;
  display: block !important;
  border-radius: 4px !important;
}

.qr-account-num {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1b2435 !important;
  letter-spacing: 0.06em !important;
  font-variant-numeric: tabular-nums !important;
}

.qr-caption {
  font-size: 12px !important;
  color: #8a97a8 !important;
  text-align: center !important;
}

/* ── Analytics — no overflow, full width ────────── */
#analytics {
  overflow-x: hidden !important;
}

.analytics-month-summary {
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#analytics .cards-row,
#analytics .analytics-bottom-row {
  overflow: hidden !important;
  width: 100% !important;
}

#analyticsBarChart,
.bar-chart {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* ── Transactions Filters — mobile grid ─────────── */
#transactionsFilters.filters-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  overflow: visible !important;
  flex-wrap: unset !important;
}

#transactionsFilters .lbl {
  flex: unset !important;
  min-width: 0 !important;
}

#transactionsFilters button[type="submit"] {
  grid-column: 1 / -1 !important;
  min-height: 46px !important;
}

/* ── PIN overlay light-theme compat ─────────────────────────────────────── */
.pin-overlay {
  background: var(--mono-bg) !important;
}
.pin-title {
  color: var(--mono-text) !important;
}
.pin-subtitle {
  color: var(--mono-muted) !important;
}
.pin-key {
  background: var(--mono-surface-soft) !important;
  border-color: var(--mono-border-soft) !important;
  color: var(--mono-text) !important;
}
.pin-key:hover {
  background: var(--mono-surface) !important;
}
.pin-key:active {
  transform: scale(.92) !important;
  background: var(--mono-border-soft) !important;
}
.pin-key-back { color: var(--mono-muted) !important; }
.pin-dot { border-color: var(--mono-success) !important; }
.pin-dot.filled { background: var(--mono-success) !important; }
.pin-error { color: var(--mono-danger) !important; }

/* ── Onboarding overlay light-theme compat ──────────────────────────────── */
.onboarding-card {
  background: var(--mono-surface) !important;
  border-color: var(--mono-border-soft) !important;
  color: var(--mono-text) !important;
}

/* ── Receipt colors: use theme vars ─────────────────────────────────────── */
.receipt-amount[data-dir="in"] { color: var(--mono-success) !important; }
.receipt-amount[data-dir="out"] { color: var(--mono-blue-mid) !important; }

/* ── Drawer loading spinner ─────────────────────────────────────────────── */
.drawer-loading::after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  margin: 8px auto;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: rgba(255,255,255,.7);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }