/*
 * 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 2px 8px rgba(17, 25, 40, 0.07), 0 1px 2px rgba(17, 25, 40, 0.04);
  --mono-card-shadow: 0 4px 16px rgba(17, 25, 40, 0.09), 0 1px 3px rgba(17, 25, 40, 0.05);
  --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);
}

/* ── Messenger promo card ───────────────────────────────────────── */
.messenger-promo-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(30, 99, 71, 0.24) !important;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(46, 132, 92, 0.11) 0%, rgba(46, 132, 92, 0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,251,248,.98));
}
.messenger-promo-head {
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(38, 87, 65, 0.12);
}
.messenger-promo-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(31,107,76,.14), rgba(52,143,102,.2)) !important;
  color: #1f6b4c !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.messenger-promo-icon svg {
  width: 20px;
  height: 20px;
}
.messenger-promo-title-wrap {
  display: grid;
  gap: 6px;
}
.messenger-promo-chip {
  display: inline-flex;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(29, 99, 71, 0.11);
  border: 1px solid rgba(29, 99, 71, 0.2);
  color: #2b6a50;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.messenger-promo-card .card-head h3 {
  margin: 0 !important;
  letter-spacing: -.01em;
}
.messenger-promo-text {
  color: var(--mono-muted);
  margin: 12px 0 12px;
  line-height: 1.45;
  font-size: 16px;
}
.messenger-promo-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.messenger-promo-points span {
  font-size: 11px;
  font-weight: 700;
  color: #2d5e49;
  background: rgba(231, 242, 235, 0.95);
  border: 1px solid rgba(55, 116, 87, 0.18);
  border-radius: 999px;
  padding: 5px 10px;
}
.messenger-promo-btn {
  min-height: 48px;
  border-radius: 14px !important;
  border-color: rgba(30, 99, 71, 0.34) !important;
  background: linear-gradient(135deg, #245f45, #2f7a56) !important;
  color: #f2f7f3 !important;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.messenger-promo-btn:hover {
  background: linear-gradient(135deg, #2b6e4f, #378763) !important;
}

@media (max-width: 720px) {
  .messenger-promo-text {
    font-size: 15px;
  }
  .messenger-promo-btn {
    width: 100%;
    min-height: 46px;
  }
}

html,
body {
  background: var(--mono-bg) !important;
  color: var(--mono-text) !important;
  touch-action: manipulation !important;
  /* ── Scroll & overflow lockdown ── */
  overflow-x: hidden !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
}

/* ── Global: prevent ANY horizontal scroll leakage ─────────── */
#appScreen,
#appScreen.app-shell {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ── Smooth scroll on all scrollable containers ────────────── */
.app-content,
.app-header,
.bank-cards-track,
.tx-list,
.modal-body,
.bottom-sheet .sheet-body {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

/* ═══════════════════════════════════════════════════════════
   CARD ANIMATIONS — entrance, hover, shimmer
   ═══════════════════════════════════════════════════════════ */

/* Entrance — cards fade in + slide up on page load */
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bank-card {
  animation: cardEntrance 0.5s cubic-bezier(0.22, 0.68, 0, 1.1) both !important;
}
.bank-card:nth-child(2) { animation-delay: 0.08s !important; }
.bank-card:nth-child(3) { animation-delay: 0.16s !important; }

/* Hover lift — subtle 3D lift on desktop */
@media (hover: hover) {
  .bank-card {
    transition: transform 0.28s cubic-bezier(0.22, 0.68, 0, 1.1),
                box-shadow 0.28s ease !important;
  }
  .bank-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }
  .bank-card:active {
    transform: scale(0.98) !important;
    transition-duration: 0.1s !important;
  }
}

/* Gold shimmer — sweeping highlight on .bank-card-gold */
@keyframes goldShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.bank-card-gold .bank-card-front::before {
  background: linear-gradient(
    105deg,
    rgba(255,230,120,0) 0%,
    rgba(255,230,120,0.18) 40%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,230,120,0.18) 60%,
    rgba(255,230,120,0) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: goldShimmer 4s ease-in-out infinite !important;
  border-radius: 20px !important;
  inset: 0 !important;
  position: absolute !important;
  content: '' !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Quick-action button entrance stagger */
@keyframes qaFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qa-btn {
  animation: qaFadeIn 0.35s cubic-bezier(0.22, 0.68, 0, 1.1) both !important;
}
.qa-btn:nth-child(1) { animation-delay: 0.12s !important; }
.qa-btn:nth-child(2) { animation-delay: 0.18s !important; }
.qa-btn:nth-child(3) { animation-delay: 0.24s !important; }
.qa-btn:nth-child(4) { animation-delay: 0.30s !important; }

/* Balance number pulse on load */
@keyframes balancePulse {
  0%   { opacity: 0; transform: scale(0.92); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { transform: scale(1); }
}
.balance-amount {
  animation: balancePulse 0.6s cubic-bezier(0.22, 0.68, 0, 1.1) 0.1s both !important;
}

/* ── Content cards entrance (dashboard widgets) ──────────── */
@keyframes widgetSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.app-content .card,
.app-content .stat-card,
.app-content .exchange-card {
  animation: widgetSlideUp 0.4s cubic-bezier(0.22, 0.68, 0, 1.1) both !important;
}
.app-content .card:nth-child(1) { animation-delay: 0.05s !important; }
.app-content .card:nth-child(2) { animation-delay: 0.10s !important; }
.app-content .card:nth-child(3) { animation-delay: 0.15s !important; }
.app-content .card:nth-child(4) { animation-delay: 0.20s !important; }

/* Carousel dots — scale pulse on active */
.bc-dot.active {
  animation: dotPulse 0.3s cubic-bezier(0.22, 0.68, 0, 1.1) !important;
}
@keyframes dotPulse {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

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

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

#appScreen.app-shell, .auth-screen {
  background: var(--mono-bg) !important;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100dvh !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.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(15, 30, 66, 0.16), 0 2px 8px rgba(15, 30, 66, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !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: rgba(47, 74, 55, 0.55) !important;
  box-shadow: var(--mono-focus-ring) !important;
}

.field label {
  color: #4a5e52 !important;
}

.auth-submit {
  border-radius: 14px !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: calc(10px + env(safe-area-inset-top, 0px)) 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;
  max-height: none !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 8px 24px rgba(4, 16, 10, 0.20),
    0 2px 8px rgba(4, 16, 10, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !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;
}

/* ── Wipe variant styles from OUTER .bank-card ──────────────── */
/* styles.css sets background/box-shadow/::before on .bank-card-gold etc.
   Those paint on the outer container and overlap .bank-card-front content.
   Must be wiped so only .bank-card-bg (inside .bank-card-front) paints. */
.bank-card-gold,
.bank-card-dark,
.bank-card-navy,
.bank-card-forest,
.bank-card-camo,
.bank-card-rose,
.bank-card-slate {
  background: none !important;
  box-shadow:
    0 8px 24px rgba(4, 16, 10, 0.20),
    0 2px 8px rgba(4, 16, 10, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.bank-card-gold::before,
.bank-card-gold::after,
.bank-card-dark::before,
.bank-card-dark::after,
.bank-card-navy::before,
.bank-card-navy::after {
  display: none !important;
}

/* ── Card 3D flip — DISABLED, cards render flat with overflow:hidden ── */

/* Make .bank-card-inner non-3D, just a plain wrapper */
.bank-card-inner {
  position: absolute !important;
  inset: 0 !important;
  transform-style: flat !important;
}
.bank-card.is-flipped .bank-card-inner {
  transform: none !important;
}

/* Front face: just fill the card, no 3D needed */
.bank-card-front {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Back face: completely hidden */
.bank-card-back {
  display: none !important;
}

/* Pseudo overlays 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;
  border-radius: 20px !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 62% 54% at 88% 94%, rgba(0,0,0,0.08) 0%, transparent 60%) !important;
  border-radius: 20px !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: #ffffff !important;
  border: none !important;
  color: var(--mono-blue-top) !important;
  box-shadow: 0 2px 8px rgba(16, 24, 20, 0.10), 0 1px 2px rgba(16, 24, 20, 0.06) !important;
  transition: transform var(--mono-motion-fast) ease, box-shadow var(--mono-motion-fast) ease !important;
}

.qa-btn:hover .qa-icon {
  box-shadow: 0 4px 14px rgba(16, 24, 20, 0.14), 0 1px 3px rgba(16, 24, 20, 0.08) !important;
}

.qa-btn:active .qa-icon {
  transform: scale(0.92) !important;
  box-shadow: 0 1px 3px rgba(16, 24, 20, 0.08) !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: 600 !important;
  letter-spacing: 0.01em !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.96) !important;
  box-shadow: none !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: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  max-width: 460px !important;
  width: calc(100% - 20px) !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-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 390 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.notif-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.notif-panel {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  max-width: 460px !important;
  width: calc(100% - 20px) !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;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform 0.24s ease, opacity 0.24s ease, visibility 0.24s ease !important;
  z-index: 520 !important;
}

.notif-panel.open {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !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: #7f9485 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 6px 10px 7px !important;
  position: relative !important;
  transition: color 160ms ease, background 160ms ease, transform 130ms ease !important;
  min-width: 52px !important;
}

.nav-item svg,
.menu-btn svg {
  stroke: #7f9485 !important;
  transition: stroke 160ms ease !important;
}

.nav-item.active,
.nav-link.active,
.menu-btn.active {
  color: #1f6b4c !important;
  background: rgba(31, 107, 76, 0.11) !important;
}

.nav-item:active,
.menu-btn:active {
  transform: scale(0.86) !important;
}

.nav-item:focus-visible,
.menu-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(31,107,76,.3) !important;
}

/* Remove old dot indicator */
.nav-item.active::after,
.menu-btn.active::after {
  display: none !important;
}

.nav-item.active svg,
.nav-link.active svg,
.menu-btn.active svg {
  stroke: #1f6b4c !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 LAYOUT ≥960px — справжній sidebar, не phone frame   ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (min-width: 960px) and (max-width: 1199px) {

  /* Body: нейтральний фон */
  body {
    background: #eceee9 !important;
    overflow-y: hidden !important;
  }

  #appScreen.app-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    position: relative !important;
  }

  /* ── SIDEBAR (колишній app-header) ─────────────────────────── */
  .app-header {
    width: 380px !important;
    min-width: 380px !important;
    flex-shrink: 0 !important;
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 32px 20px 24px !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
  }

  /* Баланс на десктопі — трохи менший */
  .balance-amount {
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
  }

  /* Карусель карток у сайдбарі — компактна */
  .bank-cards-carousel {
    margin: 4px -20px 8px !important;
  }
  .bank-cards-track {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 2px !important;
    padding-bottom: 6px !important;
  }
  .bank-cards-track .bank-card {
    flex: 0 0 340px !important;
    width: 340px !important;
    height: 214px !important;
    min-height: 214px !important;
    max-height: none !important;
    aspect-ratio: unset !important;
  }

  /* Quick actions — 2×2 grid у сайдбарі */
  .quick-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px 0 0 !important;
  }
  .quick-actions .qa-btn {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    padding: 12px 8px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background .18s, transform .15s, border-color .18s !important;
  }
  .quick-actions .qa-btn:hover {
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.22) !important;
    transform: translateY(-2px) !important;
  }
  .quick-actions .qa-btn:active {
    transform: scale(.96) !important;
  }

  /* ── BOTTOM NAV → SIDEBAR NAV ───────────────────────────────── */
  .bottom-nav {
    position: sticky !important;
    bottom: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    margin-top: auto !important;
    transform: none !important;
    will-change: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    background: rgba(20,38,24,.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    padding: 12px 8px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    z-index: auto !important;
    flex-shrink: 0 !important;
  }

  /* Nav items — полірований десктопний стиль з left accent */
  .nav-item, .menu-btn.nav-item {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    position: relative !important;
    transition: background .18s, transform .12s !important;
    border-left: 3px solid transparent !important;
    margin-left: 0 !important;
  }
  .nav-item:hover {
    background: rgba(255,255,255,.08) !important;
  }
  .nav-item svg { width: 20px !important; height: 20px !important; opacity: .7 !important; transition: opacity .18s !important; }
  .nav-item:hover svg { opacity: 1 !important; }
  .nav-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -.01em !important;
    color: rgba(255,255,255,.7) !important;
    transition: color .18s, font-weight .18s !important;
  }
  .nav-item:hover .nav-label { color: rgba(255,255,255,.95) !important; }

  /* Active nav item — яскравий лівий бордер + виділений фон */
  .nav-item.active {
    background: rgba(255,255,255,.12) !important;
    border-left-color: #6bd47c !important;
  }
  .nav-item.active svg { stroke: #fff !important; opacity: 1 !important; }
  .nav-item.active .nav-label { color: #fff !important; font-weight: 700 !important; }
  .nav-item.active::after { display: none !important; }

  /* ── MAIN CONTENT AREA ──────────────────────────────────────── */
  .app-content {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: scroll !important; /* Force scrollbar to prevent layout shifts */
    overflow-x: hidden !important;
    padding: 36px 48px 48px !important;
    background: #eceee9 !important;
    /* Elegant scrollbar */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(47,74,55,.2) transparent !important;
  }
  .app-content::-webkit-scrollbar { width: 6px !important; }
  .app-content::-webkit-scrollbar-track { background: transparent !important; }
  .app-content::-webkit-scrollbar-thumb {
    background: rgba(47,74,55,.18) !important;
    border-radius: 3px !important;
  }
  .app-content::-webkit-scrollbar-thumb:hover {
    background: rgba(47,74,55,.32) !important;
  }

  /* Screens у main area — max-width для читабельності */
  .screen {
    max-width: 820px !important;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
  }

  /* Section titles більші на десктопі */
  .section-title {
    font-size: 32px !important;
  }

  /* Cards — cover full width with rounded corners */
  .card {
    border-radius: 18px !important;
    transition: box-shadow .2s, transform .2s !important;
  }
  .card:hover {
    box-shadow: 0 6px 24px rgba(17, 25, 40, .1) !important;
  }

  /* ── Dashboard grid layout ──────────────────────── */
  .stats-row,
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  /* Exchange rates — hover feedback */
  .rate-row,
  .exchange-rate-item {
    transition: background .15s !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
  }
  .rate-row:hover,
  .exchange-rate-item:hover {
    background: rgba(47,74,55,.05) !important;
  }

  /* Transaction rows — hover */
  .tx-item {
    transition: background .15s, transform .1s !important;
    border-radius: 12px !important;
  }
  .tx-item:hover {
    background: rgba(47,74,55,.04) !important;
  }

  /* Quick filter buttons — hover */
  .filter-btn,
  .period-btn {
    transition: background .15s, color .15s, border-color .15s !important;
  }
  .filter-btn:hover,
  .period-btn:hover {
    background: rgba(47,74,55,.08) !important;
    border-color: rgba(47,74,55,.2) !important;
  }

  /* ── Profile page polish ───────────────────────── */
  .profile-row,
  .setting-row {
    transition: background .15s !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin: 0 -18px !important;
  }
  .profile-row:hover,
  .setting-row:hover {
    background: rgba(47,74,55,.03) !important;
  }

  /* Транзакції — ширша таблиця */
  .tx-name,
  .tx-item .item-title { max-width: 320px !important; }

  /* Fix: body padding-bottom не потрібен */
  .app-content, .page-content, main {
    padding-bottom: 48px !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,.16) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: background .15s, transform .12s !important;
}
.qa-btn:active {
  transform: scale(.93) !important;
  background: rgba(255,255,255,.12) !important;
}
.qa-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.24) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.qa-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: rgba(255,255,255,.95) !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 calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid var(--mono-border-soft);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── UX / PWA Touch Rules ────────────────────────────────────────── */
.icon-btn, .nav-item, .qa-btn, .btn-accent, .tqr-chip, .tx-qf-chip, .bottom-nav, .auth-submit, .btn-primary, .btn-ghost, .tmt-btn {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

.item.item-clickable:active, .item-with-actions.item-clickable:active {
  background: rgba(0, 0, 0, 0.03) !important;
  transform: scale(0.99) !important;
}
.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); } }

/* ── Toast notifications — light theme fix ─────────────── */
.toast {
  background: rgba(22, 30, 24, 0.94) !important;
  color: #f2f6f1 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.20), 0 1px 4px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  font-weight: 500 !important;
}
.toast.success {
  background: rgba(18, 52, 30, 0.95) !important;
  color: #86efac !important;
  border-color: rgba(74,222,128,.20) !important;
}
.toast.warning {
  background: rgba(50, 35, 10, 0.95) !important;
  color: #fcd34d !important;
  border-color: rgba(251,191,36,.20) !important;
}
.toast.error {
  background: rgba(55, 14, 14, 0.95) !important;
  color: #fca5a5 !important;
  border-color: rgba(248,113,113,.20) !important;
}

/* ═══════════════════════════════════════════════════════════
   MODERN VISUAL REFRESH — v1
   ═══════════════════════════════════════════════════════════ */

/* ── App body: subtle noise texture on background ─── */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E") !important;
  background-size: 200px 200px !important;
  background-repeat: repeat !important;
}

/* ── Header: richer gradient + mesh glow ────────────── */
.app-header {
  background:
    radial-gradient(ellipse 80% 60% at 15% -20%, rgba(255,255,255,.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 80% at 90% 110%, rgba(47,74,55,.6) 0%, transparent 60%),
    linear-gradient(160deg, #1e3828 0%, #2f4a37 35%, #3d5e45 65%, #8aaa88 100%) !important;
}

/* ── Balance label: more stylish ───────────────────── */
.balance-label {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.65) !important;
  font-weight: 500 !important;
}

/* ── Quick actions: force single row, compact ──────── */
#dashboard .quick-actions,
.quick-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  display: grid !important;
  gap: 6px !important;
}
#dashboard .qa-btn,
.qa-btn {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 4px 8px !important;
  gap: 5px !important;
  border-radius: 16px !important;
  min-height: 64px !important;
}
#dashboard .qa-icon,
.qa-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
}
#dashboard .qa-label,
.qa-label {
  font-size: 9.5px !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
  width: 100% !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  color: rgba(20,26,21,.75) !important;
}

/* ── Dashboard & Profile cards: elegant surface ─────────────── */
#dashboard .card,
.profile-card,
#profile .card,
.screen > .card,
#recentTransactionsCard {
  background: linear-gradient(160deg, #ffffff 0%, #fcfffa 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  border-radius: 16px !important;
}

/* ── "Операції" card head ───────────────────────────── */
#recentTransactionsCard .card-head h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #141a15 !important;
}

/* ── All section titles ─────────────────────────────── */
.screen > .section-title,
h2.section-title,
h3.section-title,
.card-head h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ── "Усі" link button ─────────────────────────────── */
#recentTransactionsCard .card-head .btn-ghost,
.card-head .btn-ghost {
  background: rgba(47,74,55,.08) !important;
  border: none !important;
  color: var(--mono-blue-top) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  min-height: unset !important;
}

/* ── Bottom nav: pill active highlight ─────────────── */
.nav-item.active {
  background: rgba(47, 74, 55, 0.10) !important;
  border-radius: 14px !important;
}

/* ── Auth screen: richer gradient ─────────────────── */
.auth-screen {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(120,150,255,.25) 0%, transparent 60%),
    linear-gradient(180deg, #1e3870 0%, #274fb5 40%, #4a72d4 75%, #7da0df 100%) !important;
}

/* ══════════════════════════════════════════════════════
   DETAIL POLISH — мікро-покращення по всіх екранах
   ══════════════════════════════════════════════════════ */

/* 1. Auth — активний таб: червоний → військово-зелений */
.auth-tab.active {
  color: #1a3024 !important;
  border-bottom-color: #2f4a37 !important;
}
.auth-tab {
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  padding-bottom: 10px !important;
  transition: color .15s, border-color .15s !important;
}

/* 2. Auth — картка форми: трохи м'якша тінь + radius */
.auth-card {
  border-radius: 24px !important;
  box-shadow: 0 8px 40px rgba(10,20,60,.18), 0 2px 8px rgba(10,20,60,.10) !important;
}

/* 3. Auth — логотип: рамка → без рамки, чистий */
.auth-logo-box,
[class*="auth-logo"] {
  border: none !important;
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 18px !important;
}

/* 4. Toggle — зелений коли увімкнено (замість синього) */
.toggle-switch input:checked + .toggle-knob {
  background: #3a6647 !important;
  border-color: #2f5438 !important;
}

/* 5. Іконки секцій профілю — blue/purple → зелені тони */
.card-icon-wrap.blue {
  background: rgba(47,74,55,.11) !important;
  color: #2f4a37 !important;
}
.card-icon-wrap.blue svg {
  stroke: #2f4a37 !important;
  color: #2f4a37 !important;
}
.card-icon-wrap.purple {
  background: rgba(47,74,55,.08) !important;
  color: #2f4a37 !important;
}
.card-icon-wrap.purple svg {
  stroke: #2f4a37 !important;
  color: #2f4a37 !important;
}

/* 6. Фільтр-чіпи операцій — активний стан зелений */
.tx-qf-chip {
  border-radius: 20px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}
.tx-qf-chip.active {
  background: rgba(47,74,55,.12) !important;
  border-color: rgba(47,74,55,.28) !important;
  color: #1a3024 !important;
  font-weight: 600 !important;
}
.tx-qf-chip:hover {
  background: rgba(47,74,55,.07) !important;
  border-color: rgba(47,74,55,.18) !important;
  color: #253b2c !important;
}

/* 7. Застосувати — помітна кнопка (заповнена зелена) */
#transactions form > .btn-ghost,
#transactionsFilterForm .btn-ghost,
#transactions .btn-ghost[type="submit"],
button.btn-ghost:last-child {
  background: #2f4a37 !important;
  border-color: #2f4a37 !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
}
#transactions form > .btn-ghost:hover,
#transactions .btn-ghost[type="submit"]:hover {
  background: #3d5e45 !important;
  border-color: #3d5e45 !important;
}

/* 8. PDF / CSV кнопки — зелений відтінок */
#transactions .btn-ghost.btn-sm {
  background: rgba(47,74,55,.07) !important;
  border-color: rgba(47,74,55,.2) !important;
  color: #2a4030 !important;
  font-weight: 600 !important;
}
#transactions .btn-ghost.btn-sm:hover {
  background: rgba(47,74,55,.14) !important;
  border-color: rgba(47,74,55,.3) !important;
}

/* 9. Заголовки сторінок — гострі та впевнені */
.section-title,
#transactions .section-title,
#cards .section-title,
#profile .section-title,
#savings .section-title,
#analytics .section-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #111814 !important;
  line-height: 1.1 !important;
}
.section-header-row {
  align-items: center !important;
  padding: 6px 0 10px !important;
}

/* 10. Рядки профілю — тонкі роздільники */
.profile-info-row {
  padding: 13px 0 !important;
  border-bottom: 1px solid rgba(20,26,21,.065) !important;
}
.profile-info-row:last-child {
  border-bottom: none !important;
}
.profile-info-row dt {
  font-size: 10.5px !important;
  letter-spacing: .07em !important;
  font-weight: 600 !important;
  color: #4a5e52 !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
}
.profile-info-row dd {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #141a15 !important;
}

/* 11. Порожній стан — зрозумілий + розставлений */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 40px 20px !important;
  color: #5a7060 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 16px !important;
  background: rgba(47,74,55,.03) !important;
  border: 1.5px dashed rgba(47,74,55,.15) !important;
}

/* 12. Мс-стата — чистіший вигляд */
.ms-item {
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
.ms-label {
  font-size: 10px !important;
  letter-spacing: .07em !important;
  font-weight: 600 !important;
  color: #4a5e52 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
.ms-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* 13. Bottom nav — активна іконка та текст зелені (тільки мобілка) */
@media (max-width: 959px) {
  .nav-item.active svg {
    stroke: var(--mono-blue-top) !important;
    color: var(--mono-blue-top) !important;
  }
  .nav-item.active .nav-label {
    color: var(--mono-blue-top) !important;
    font-weight: 700 !important;
  }
}
.nav-item {
  border-radius: 14px !important;
  transition: background .15s !important;
}

/* 14. Модалка "Випустити картку" — виправити кольори Cancel/Submit */
#issueCardModal .btn-ghost,
.modal-actions .btn-ghost {
  border-color: rgba(47,74,55,.15) !important;
  background: rgba(47,74,55,.05) !important;
  color: #1a3024 !important;
  font-weight: 600 !important;
}
#issueCardModal .btn-ghost:hover,
.modal-actions .btn-ghost:hover {
  background: rgba(47,74,55,.1) !important;
  color: #111814 !important;
}

/* 15. Заголовок хедера: subtitle "Завантаження..." */
.header-subtitle,
.app-header .subtitle,
[class*="header-desc"] {
  font-size: 11px !important;
  opacity: .65 !important;
  letter-spacing: .01em !important;
}

/* 16. Баланс нуль / прочерк — не тривожний */
.balance-amount {
  letter-spacing: -0.04em !important;
}

/* 17. Картка-акордеон: тонший скелет помилки */
#cards .empty-state {
  color: #b05a50 !important;
  background: rgba(220,80,60,.04) !important;
  border-color: rgba(220,80,60,.18) !important;
}

/* 18. Кнопка QR / "Показати" — тема */
#showQrBtn, [id*="qr"], [id*="Qr"] {
  border-color: rgba(47,74,55,.2) !important;
  color: #2a4030 !important;
  font-weight: 600 !important;
}
#showQrBtn svg, [id*="qr"] svg {
  stroke: #2a4030 !important;
}

/* 19. Анімація: уніфікація плавних hover-ів */
.card, .ms-item, .btn-ghost, .tx-qf-chip, .nav-item, .qa-btn {
  transition-duration: 150ms !important;
  transition-timing-function: cubic-bezier(.25,.46,.45,.94) !important;
}

/* 20. Скролбар — ультра-тонкий зелений */
::-webkit-scrollbar { width: 3px !important; height: 3px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(47,74,55,.25) !important; border-radius: 99px !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(47,74,55,.45) !important; }

/* ══════════════════════════════════════════════════════
   ROUND 3 — ще дрібніші деталі
   ══════════════════════════════════════════════════════ */

/* 1. Аватар — повне коло + градієнт */
.avatar,
#userAvatar {
  border-radius: 999px !important;
  background: linear-gradient(145deg, #3d6b4a 0%, #2f4a37 60%, #1e3828 100%) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 2px 8px rgba(20,40,25,.25) !important;
}

/* 2. Точки навігації карток — тонкі / активна — виражена */
.bc-dot {
  width: 6px !important;
  height: 6px !important;
  background: rgba(255,255,255,.35) !important;
  border-radius: 999px !important;
  transition: width .2s ease, background .2s ease !important;
}
.bc-dot.active {
  width: 20px !important;
  background: rgba(255,255,255,.92) !important;
}

/* 3. Результат конвертера — помітний дисплей */
.conv-result {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1e3828 !important;
  background: rgba(47,74,55,.08) !important;
  border: 1px solid rgba(47,74,55,.14) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  text-align: center !important;
  letter-spacing: -.01em !important;
  font-feature-settings: "tnum" !important;
}

/* 4. Рядки курсів валют — сепаратори + вирівнювання */
.rate-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(20,26,21,.06) !important;
}
.rate-item:last-child { border-bottom: none !important; }
.rate-flag { font-size: 18px !important; line-height: 1 !important; }
.rate-code {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #253b2c !important;
  letter-spacing: .02em !important;
  flex: 1 !important;
}
.rate-val {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #141a15 !important;
  font-feature-settings: "tnum" !important;
  letter-spacing: -.01em !important;
}

/* 5. ms-item — розрізняти прихід / витрати кольором фону */
.ms-item.green {
  background: rgba(34,163,80,.08) !important;
  border-color: rgba(34,163,80,.18) !important;
}
.ms-item.red {
  background: rgba(220,60,60,.07) !important;
  border-color: rgba(220,60,60,.15) !important;
}
/* Менш кричущі кольори значень */
.ms-item.green .ms-value { color: #1a7d3a !important; }
.ms-item.red   .ms-value { color: #c0392b !important; }
.ms-item.green .ms-label svg { stroke: #22a350 !important; }
.ms-item.red   .ms-label svg { stroke: #c0392b !important; }

/* 6. Рядки налаштувань профілю — сепаратори */
.setting-row {
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(20,26,21,.06) !important;
}
.setting-row:last-child { border-bottom: none !important; }
.setting-label {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #141a15 !important;
}
.setting-desc {
  font-size: 12px !important;
  color: #5a7060 !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
}

/* 7. Швидкі посилання профілю — зелений відтінок (висока специфічність) */
#profile .profile-link-btn,
.profile-links-grid .profile-link-btn {
  background: rgba(47,74,55,.06) !important;
  border: 1px solid rgba(47,74,55,.14) !important;
  border-radius: 14px !important;
  color: #1a3024 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 13px 12px !important;
  transition: background .15s !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#profile .profile-link-btn:hover,
.profile-links-grid .profile-link-btn:hover {
  background: rgba(47,74,55,.12) !important;
  border-color: rgba(47,74,55,.22) !important;
}
/* Вийти — небезпечна дія */
#profileLogoutBtn {
  background: rgba(180,30,30,.06) !important;
  border-color: rgba(180,30,30,.18) !important;
  color: #9b2020 !important;
  font-weight: 700 !important;
}
#profileLogoutBtn:hover {
  background: rgba(180,30,30,.11) !important;
}

/* 8. Заголовки секцій профілю — чіткіша типографіка */
.card-head h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: #111814 !important;
}
#profile .card-head h3 {
  font-size: 18px !important;
  letter-spacing: -.025em !important;
}

/* 9. Значок рахунку — рядок балансу */
.balance-account-row,
[class*="account-row"],
.header-account {
  font-size: 12px !important;
  opacity: .65 !important;
  letter-spacing: .01em !important;
}

/* 10. conv-select — акуратні дропдауни */
.conv-select {
  background: rgba(47,74,55,.06) !important;
  border: 1px solid rgba(47,74,55,.16) !important;
  border-radius: 12px !important;
  color: #1e3828 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  appearance: auto !important;
}

/* 11. Input полів — уніфікована висота + фокус */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  min-height: 48px !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus {
  border-color: rgba(47,74,55,.5) !important;
  box-shadow: 0 0 0 3px rgba(47,74,55,.1) !important;
  outline: none !important;
}

/* 12. Карткові дії — spacing між картками дашборду */
#dashboard .card + .card,
#dashboard .ms-grid + .card {
  margin-top: 0 !important;
}
#dashboard > * + * {
  margin-top: 0 !important;
}

/* 13. Budget progress bar — якщо є */
[class*="budget-bar"], [class*="progress-bar"] {
  background: rgba(47,74,55,.1) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
}
[class*="budget-bar"] > *, [class*="progress-bar"] > * {
  background: linear-gradient(90deg, #2f4a37, #3d6b4a) !important;
  border-radius: 99px !important;
  transition: width .4s ease !important;
}

/* ── Додаткові дрібниці ────────────────────────────── */

/* "ВИДАЛИТИ PIN" — небезпечна дія → червоний стиль */
#pinCard .btn-ghost.btn-sm,
#pinStatusCard .btn-ghost.btn-sm,
[id*="pin"] .btn-ghost.btn-sm[style*="color"],
[id*="Pin"] .btn-ghost.btn-sm {
  background: rgba(180,30,30,.07) !important;
  border-color: rgba(180,30,30,.22) !important;
  color: #9b2020 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

/* Акордеон-секції профілю — чистіший вигляд */
.card .card-head[role="button"],
.card .card-head.collapsible,
[class*="accordion"] .card-head {
  cursor: pointer !important;
  user-select: none !important;
  border-radius: 12px !important;
  transition: background .15s !important;
}
.card .card-head[role="button"]:hover,
.card .card-head.collapsible:hover {
  background: rgba(47,74,55,.04) !important;
}

/* Іконки в швидких посиланнях — зелені */
.profile-link-btn svg,
.profile-links-grid svg {
  stroke: #2f4a37 !important;
  flex-shrink: 0 !important;
  opacity: .8 !important;
}
#profileLogoutBtn svg { stroke: #9b2020 !important; opacity: 1 !important; }

/* Лейбл "ЗАГАЛЬНИЙ БАЛАНС" — акуратніший */
.balance-label {
  font-size: 10px !important;
  letter-spacing: .10em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  opacity: .72 !important;
}

/* Рядок рахунку під балансом */
#headerAccount,
.header-account-row,
[id*="accountDisplay"] {
  font-size: 12px !important;
  font-feature-settings: "tnum" !important;
  opacity: .6 !important;
  letter-spacing: .02em !important;
}

/* Кнопки дій в хедері — рівніший розмір */
.header-actions button,
.app-header .icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
}
.header-actions button:hover,
.app-header .icon-btn:hover {
  background: rgba(255,255,255,.15) !important;
}

/* Copy-кнопка біля рахунку */
.copy-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  transition: background .15s !important;
}
.copy-btn:hover { background: rgba(255,255,255,.28) !important; }
.copy-btn svg { stroke: rgba(255,255,255,.85) !important; }

/* Картка з балансом у хедері — рівніші відступи */
.balance-block {
  padding: 4px 0 16px !important;
}
.balance-amount {
  font-size: 38px !important;
  line-height: 1.05 !important;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  MATURE SYSTEM — одне правило, єдина мова               ║
   ║  Принцип: один акцент (#2f4a37), один матеріал (white), ║
   ║  вся ієрархія — через шрифт, відступ, тінь              ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── СКАСУВАННЯ дитячих рішень ──────────────────────────── */
/* Прибираємо кольорові картки */
#budgetProgressCard,
#sparklineCard,
#dashboard .card:has(#currencyRates),
#dashboard .card:has(.conv-row) {
  background: #fff !important;
  border: none !important;
}

/* Прибираємо строкаті іконки qa */
.quick-actions .qa-btn:nth-child(1) .qa-icon,
.quick-actions .qa-btn:nth-child(2) .qa-icon,
.quick-actions .qa-btn:nth-child(3) .qa-icon,
.quick-actions .qa-btn:nth-child(4) .qa-icon {
  background: rgba(255,255,255,.18) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
}
.quick-actions .qa-btn:nth-child(1) .qa-icon svg,
.quick-actions .qa-btn:nth-child(2) .qa-icon svg,
.quick-actions .qa-btn:nth-child(3) .qa-icon svg,
.quick-actions .qa-btn:nth-child(4) .qa-icon svg {
  stroke: rgba(255,255,255,.90) !important;
}
.quick-actions .qa-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── 1. СИСТЕМА ПОВЕРХОНЬ ────────────────────────────────
   Фон: теплий нейтральний — не білий, не зелений
   Картка: чиста біла, одна мова тіні
   ─────────────────────────────────────────────────────── */
body {
  background-color: #f2f4f1 !important;
  background-image: none !important;
}

.card,
#dashboard .card,
#transactions .card,
#profile .card,
#cards .card,
#analytics .card,
#savings .card {
  background: #fff !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(15,23,18,.04), 0 4px 16px rgba(15,23,18,.06) !important;
}

/* ── 2. ХЕДЕР — мінімалістський і авторитетний ──────────
   Один темний колір без радіальних «ефектів»
   Вся увага — на цифрі балансу
   ─────────────────────────────────────────────────────── */
.app-header {
  background: #1a2e20 !important;
  padding-bottom: 32px !important;
}

/* ── 3. БАЛАНС — головна сцена ──────────────────────────
   Великий, чіткий, тільки число
   ─────────────────────────────────────────────────────── */
.balance-amount {
  font-size: 48px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: none !important;
}
.balance-label {
  font-size: 10px !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.45) !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
#headerAccount,
[id*="accountDisplay"],
.header-account-row {
  font-size: 12px !important;
  color: rgba(255,255,255,.38) !important;
  opacity: 1 !important;
  letter-spacing: .02em !important;
}

/* ── 4. ШВИДКІ ДІЇ — монохромні на темному тлі ─────────
   Правило: однорідний матеріал, різниця через іконку і текст
   ─────────────────────────────────────────────────────── */
.quick-actions .qa-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
.quick-actions .qa-icon svg {
  stroke: rgba(255,255,255,.88) !important;
}
.quick-actions .qa-label {
  color: rgba(255,255,255,.65) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.quick-actions .qa-btn:active .qa-icon {
  background: rgba(255,255,255,.20) !important;
}

/* ── 5. НАВБАР — frosted glass, без кольорів (mobile only) ───── */
@media (max-width: 959px) {
  .bottom-nav {
    background: rgba(242,244,241,.88) !important;
    backdrop-filter: saturate(200%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(200%) blur(24px) !important;
    border-top: 0.5px solid rgba(0,0,0,.08) !important;
    box-shadow: none !important;
  }
  .nav-item svg { stroke: #94a39a !important; }
  .nav-item .nav-label { color: #94a39a !important; font-weight: 500 !important; }
  .nav-item.active {
    background: transparent !important;
  }
  .nav-item.active svg { stroke: #1a2e20 !important; }
  .nav-item.active .nav-label { color: #1a2e20 !important; font-weight: 700 !important; }
}

/* ── 6. ТИПОГРАФІКА — ієрархія через weight і розмір ────
   Правило: h → 700+ чорний, body → 400–500 темно-сірий,
            label/caption → 400 мʼякий
   ─────────────────────────────────────────────────────── */
.section-title,
.card-head h3,
h2, h1 {
  color: #0d1810 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}
.card-head h3 {
  font-size: 16px !important;
}
.section-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}

/* ── 7. СТАТИСТИКА ms-item — сувора і чиста ─────────────
   Єдиний матеріал #f8f9f7, лише колір числа дає семантику
   ─────────────────────────────────────────────────────── */
.ms-item {
  background: #f6f8f5 !important;
  border: 1px solid rgba(0,0,0,.055) !important;
  border-radius: 16px !important;
}
.ms-item.green { background: #f6f8f5 !important; border-color: rgba(0,0,0,.055) !important; }
.ms-item.red   { background: #f6f8f5 !important; border-color: rgba(0,0,0,.055) !important; }
.ms-item.green .ms-value { color: #15803d !important; }
.ms-item.red   .ms-value { color: #b91c1c !important; }
.ms-label { color: #6b7b70 !important; font-weight: 600 !important; font-size: 10px !important; letter-spacing: .06em !important; text-transform: uppercase !important; }

/* ── 8. АКЦЕНТ — зелений тільки для дій ────────────────
   Primary button, active tab, focus ring — один і той самий
   ─────────────────────────────────────────────────────── */
.btn-primary,
.auth-submit,
.btn-accent {
  background: #1a2e20 !important;
  border-color: #1a2e20 !important;
  color: #fff !important;
  letter-spacing: .04em !important;
}
.btn-primary:hover, .auth-submit:hover {
  background: #243d2c !important;
}

/* ── 9. РЯДКИ КУРСІВ — сувора таблиця ───────────────────
   Прибираємо будь-який «дизайн» — просто чіткі дані
   ─────────────────────────────────────────────────────── */
.rate-item { border-bottom: 1px solid rgba(0,0,0,.06) !important; padding: 12px 0 !important; }
.rate-item:last-child { border-bottom: none !important; }
.rate-code { font-size: 14px !important; font-weight: 600 !important; color: #0d1810 !important; }
.rate-val { font-size: 14px !important; font-weight: 500 !important; color: #0d1810 !important; font-feature-settings: "tnum" !important; }
.rate-flag { font-size: 20px !important; }

/* ── 10. КОНВЕРТЕР — функціонально, без прикрас ─────────*/
.conv-result {
  background: #f6f8f5 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0d1810 !important;
  letter-spacing: -.01em !important;
  padding: 12px 16px !important;
  text-align: center !important;
}

/* ── 11. АВАТАР — один матеріал хедера ─────────────────*/
.avatar, #userAvatar {
  background: rgba(255,255,255,.15) !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.85) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
}

/* ── 12. КНОПКИ ДІЙ В ХЕДЕРІ ──────────────────────────*/
.header-actions button,
.app-header .icon-btn {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.75) !important;
  border-radius: 10px !important;
}
.header-actions button:hover,
.app-header .icon-btn:hover {
  background: rgba(255,255,255,.18) !important;
}
.header-actions button svg,
.app-header .icon-btn svg {
  stroke: rgba(255,255,255,.75) !important;
}

/* ── 13. ТОКЕНИ ТІНІ — єдина шкала ─────────────────────
   sm: елементи інтерфейсу
   md: картки
   lg: модалки і шторки
   ─────────────────────────────────────────────────────── */
.card { box-shadow: 0 1px 2px rgba(15,23,18,.04), 0 3px 12px rgba(15,23,18,.07) !important; }

/* ── 14. ПРИБИРАЄМО КОЛЬОРОВІ ТОНУВАННЯ ─────────────────
   Всі картки — білі. Диференціація через контент, не колір
   ─────────────────────────────────────────────────────── */
#recentTransactionsCard,
#sparklineCard,
#budgetProgressCard {
  background: #fff !important;
  border: none !important;
}

/* ── AUTH LOGO OVERHAUL ─────────────────────────────────── */

/* Прибираємо напівпрозору херню */
.auth-logo-mark {
  display: none !important;
}

/* Логотип — чистий, великий, без боксів */
.auth-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 0 8px !important;
}

.auth-logo h1 {
  font-size: 40px !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
}

.auth-logo h1 strong {
  font-weight: 800 !important;
  color: #fff !important;
}

/* Зелена підкреслюваюча лінія-акцент */
.auth-logo h1::after {
  content: '' !important;
  display: block !important;
  width: 28px !important;
  height: 2px !important;
  background: rgba(255,255,255,.5) !important;
  border-radius: 99px !important;
  margin: 10px auto 0 !important;
}

.auth-logo p {
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.45) !important;
  font-weight: 500 !important;
  margin: 4px 0 0 !important;
}

/* Прибираємо залишковий фон з auth-logo */
.auth-logo {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  FULL APP REFRESH — той самий принцип що auth logo       ║
   ║  Текст прямо на поверхні. Без боксів. Повітря. Впевненість║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── ХЕДЕР: авторитетна темна панель ───────────────────── */
.app-header {
  background: #1a2e20 !important;
  padding: 14px 20px 32px !important;
}

/* Верхній рядок: аватар + дії */
.header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 0 !important;
}

/* Аватар — тонкий обвід, без фону-градієнта */
.avatar, #userAvatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.30) !important;
  color: rgba(255,255,255,.75) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* "Кабінет" — дрібний, не перетягує увагу */
.header-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.90) !important;
  letter-spacing: -.01em !important;
}
.header-role {
  font-size: 11px !important;
  color: rgba(255,255,255,.38) !important;
  font-weight: 400 !important;
}

/* Кнопки дій — прозорі, без рамок */
.header-actions .icon-btn,
.header-actions button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.60) !important;
  padding: 6px !important;
  border-radius: 8px !important;
  transition: background .15s !important;
}
.header-actions .icon-btn:hover,
.header-actions button:hover {
  background: rgba(255,255,255,.08) !important;
}
.header-actions .icon-btn svg,
.header-actions button svg {
  stroke: rgba(255,255,255,.60) !important;
}

/* ── БАЛАНС: головна сцена ──────────────────────────────
   Принцип: число — єдиний герой, все інше — шепіт         */
.balance-block {
  padding: 20px 0 4px !important;
  text-align: left !important;
}
.balance-label {
  font-size: 10px !important;
  letter-spacing: .14em !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.38) !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.balance-amount {
  font-size: 52px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: .95 !important;
  color: #fff !important;
  text-shadow: none !important;
  display: block !important;
}
#headerAccount,
.header-account-row,
[id*="accountDisplay"] {
  font-size: 12px !important;
  color: rgba(255,255,255,.30) !important;
  letter-spacing: .02em !important;
  margin-top: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  opacity: 1 !important;
}

/* ── ШВИДКІ ДІЇ: mobile-only style ──────────────────────── */
@media (max-width: 959px) {
  .quick-actions {
    padding: 4px 0 8px !important;
    gap: 0 !important;
  }
  .quick-actions .qa-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 8px 4px 10px !important;
    gap: 7px !important;
    transition: opacity .15s !important;
  }
  .quick-actions .qa-btn:active { opacity: .6 !important; transform: none !important; }

  .quick-actions .qa-icon,
  #dashboard .quick-actions .qa-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1.5px solid rgba(255,255,255,.18) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .quick-actions .qa-icon svg {
    stroke: rgba(255,255,255,.85) !important;
    width: 20px !important;
    height: 20px !important;
  }
  .quick-actions .qa-label,
  #dashboard .quick-actions .qa-label {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.55) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    width: 100% !important;
  }
}

/* ── КАРТКИ: мінімалістська білосніжна поверхня ─────────
   Не тінь — hairline бордер. Внутрішнє повітря.          */
.card {
  background: #fff !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 20px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
}

/* ── ЗАГОЛОВКИ СЕКЦІЙ: editorial bold ──────────────────── */
.section-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #0d1810 !important;
  line-height: 1 !important;
  padding: 8px 0 6px !important;
}
.section-header-row {
  padding: 4px 0 12px !important;
  align-items: baseline !important;
}

/* card-head: лаконічніший */
.card-head {
  padding: 18px 18px 12px !important;
  border-bottom: 1px solid rgba(0,0,0,.055) !important;
}
.card-head h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0d1810 !important;
}
.card-body, .card > *:not(.card-head) {
  padding: 0 !important;
}

/* ── НАВБАР: mobile-only redesign ───────────────────────── */
@media (max-width: 959px) {
  .bottom-nav {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-top: 1px solid rgba(0,0,0,.07) !important;
    box-shadow: none !important;
    padding: 10px 8px 16px !important;
    gap: 0 !important;
    top: auto !important;
    bottom: 8px !important;
    left: 10px !important;
    right: 10px !important;
  }
  .nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 2px 4px !important;
    border-radius: 12px !important;
    background: transparent !important;
    transition: background .12s !important;
  }
  .nav-item svg {
    stroke: #9aa39e !important;
    width: 22px !important;
    height: 22px !important;
    stroke-width: 1.8 !important;
  }
  .nav-label {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #9aa39e !important;
    letter-spacing: .01em !important;
  }
  .nav-item.active {
    background: transparent !important;
  }
  .nav-item.active svg { stroke: #1a2e20 !important; stroke-width: 2.2 !important; }
  .nav-item.active .nav-label { color: #1a2e20 !important; font-weight: 700 !important; }
}

/* ── ТІЛО СТОРІНКИ: чиста нейтральна поверхня ─────────── */
body {
  background: #f1f3f0 !important;
  background-image: none !important;
}

/* ── РЯДКИ В КАРТКАХ: divider замість box-shadow ──────── */
.profile-info-row,
.rate-item,
.setting-row {
  padding: 13px 18px !important;
}
.profile-info-row { border-bottom: 1px solid rgba(0,0,0,.055) !important; }
.rate-item { border-bottom: 1px solid rgba(0,0,0,.055) !important; }
.setting-row { border-bottom: 1px solid rgba(0,0,0,.055) !important; }

/* ── КНОПКА ЗАСТОСУВАТИ — впевнена ─────────────────────── */
#transactions form .btn-ghost[type="submit"],
#transactions .btn-ghost[type="submit"],
button.btn-ghost[type="submit"] {
  background: #1a2e20 !important;
  border-color: #1a2e20 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  font-size: 13px !important;
}

/* ── MS ITEMS: чисті, без зайвого ───────────────────────── */
.ms-item {
  background: #f7f9f6 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}
.ms-item.green { background: #f7f9f6 !important; border-color: rgba(0,0,0,.06) !important; }
.ms-item.red   { background: #f7f9f6 !important; border-color: rgba(0,0,0,.06) !important; }
.ms-item.green .ms-value { color: #166534 !important; }
.ms-item.red   .ms-value { color: #991b1b !important; }
.ms-label {
  font-size: 9px !important;
  letter-spacing: .10em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #7a8c80 !important;
  margin-bottom: 6px !important;
}
.ms-value {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* ── ПУСТИЙ СТАН ─────────────────────────────────────────── */
.empty-state {
  padding: 48px 20px !important;
  color: #8a9e90 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 1.5px dashed rgba(0,0,0,.10) !important;
  border-radius: 16px !important;
}

.empty-state.hidden,
#cardsEmpty.hidden,
.hidden.empty-state {
  display: none !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  ANDROID FIX + DESIGN POLISH v3                              ║
   ║  1. Android Chrome fallbacks (backdrop-filter, safe-area)    ║
   ║  2. Touch optimization (tap delay, scroll smoothness)        ║
   ║  3. Font rendering parity iOS ↔ Android                     ║
   ║  4. Design refinements: transactions, inputs, modals         ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── ANDROID: backdrop-filter fallback ─────────────────────────
   На Android Chrome < 76 і WebView backdrop-filter не працює.
   Fallback: solid white з вищою непрозорістю                    */
@supports not (backdrop-filter: blur(1px)) {
  .bottom-nav {
    background: rgba(255,255,255,.97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    top: auto !important;
  }
  .app-modal,
  .bottom-sheet,
  .sheet-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ── ANDROID: Safe Area (gesture nav bar) ──────────────────────
   env() підтримується в Android Chrome 69+                      */
@media (max-width: 959px) {
  .bottom-nav {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  .app-content,
  .page-content,
  main {
    padding-bottom: max(80px, calc(64px + env(safe-area-inset-bottom))) !important;
  }
}

/* ── TOUCH: прибираємо 300ms затримку ──────────────────────────*/
a, button, .nav-item, .qa-btn, .card,
.profile-link-btn, .tx-item, .ms-item,
[role="button"], input, select, textarea {
  touch-action: manipulation !important;
}

/* ── FONT RENDERING: однаково на iOS і Android ─────────────────*/
body, html {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* ── SCROLL: нативна плавність на всіх платформах ─────────────*/
.app-content,
.page-content,
.card-body,
.tx-list,
.modal-body {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

/* ── ANDROID: GPU-compositing тільки для навбару ───────────────
   УВАГА: transform на .app-header ламає position:fixed дітей!
   translateZ тільки на самому nav                              */
@media (max-width: 959px) {
  .bottom-nav {
    transform: translateZ(0) !important;
    will-change: transform !important;
  }
}
/* app-header — БЕЗ transform (інакше nav буде відносним до нього) */

/* ── DESIGN v3: ТРАНЗАКЦІЇ — чисті, читабельні ─────────────────*/
.tx-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 18px !important;
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
  background: transparent !important;
  transition: background .12s !important;
}
.tx-item:last-child { border-bottom: none !important; }
.tx-item:active { background: rgba(0,0,0,.03) !important; }

/* Іконка-аватар транзакції */
.tx-icon,
.tx-item .item-icon,
.tx-item [class*="icon"] {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  background: #f0f3f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
.tx-icon svg,
.tx-item .item-icon svg { stroke: #4a6650 !important; width: 18px !important; height: 18px !important; }

/* Назва і дата */
.tx-name,
.tx-item .item-title,
.tx-item [class*="title"] {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0d1810 !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 160px !important;
}
.tx-date,
.tx-item .item-date,
.tx-item [class*="date"] {
  font-size: 11px !important;
  color: #9aada0 !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
}

/* Сума — tabular nums, зелено/червоно */
.tx-amount,
.tx-item .item-amount,
.tx-item [class*="amount"] {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}
.tx-amount.positive,
.tx-item.income .tx-amount,
.tx-item.credit .tx-amount,
[class*="amount"][class*="in"],
.tx-amount:not(.negative) { color: #166534 !important; }
.tx-amount.negative,
.tx-item.debit .tx-amount,
.tx-item.expense .tx-amount { color: #991b1b !important; }

/* ── DESIGN v3: INPUTS — чисті, без "пластику" ─────────────────*/
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
  background: #f6f8f5 !important;
  border: 1.5px solid rgba(0,0,0,.10) !important;
  border-radius: 14px !important;
  color: #0d1810 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s, background .15s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

/* ── НАЛШТУВАННЯ ДЕСКТОПА (виправлення overrides) ──────── */
@media (min-width: 768px) and (max-width: 959px) {
  #appScreen.app-shell {
    flex-direction: row !important;
    background: #1c261e !important; /* Глибокий благородний темний зелений сайдбмару */
  }
  .app-header {
    width: 380px !important;
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    padding: 32px 20px 24px !important;
    background: transparent !important;
    overflow-y: auto !important;
  }
  .app-content {
    flex: 1 !important;
    background: #f6f8f5 !important; /* Преміальний біло-зеленуватий фон контенту */
    padding: 32px 40px !important;
    max-width: none !important;
  }
  .bank-card {
    flex: 0 0 auto !important;
    width: 340px !important;
    height: 214px !important;
    min-height: 214px !important;
    margin: 0 auto !important;
    aspect-ratio: unset !important;
    max-height: none !important;
    flex-shrink: 0 !important;
  }
  .balance-amount {
    font-size: clamp(2rem, 2.5vw, 2.4rem) !important;
  }
  #heroBalance {
    white-space: normal !important;
    word-break: break-all !important;
  }
  .bottom-nav {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 12px 0 0 !important;
    margin: 30px 0 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
  }
  .nav-item {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 11px 16px !important;
    background: transparent !important;
    min-height: 40px !important;
    opacity: 1 !important;
    border-radius: 12px !important;
    border-left: 3px solid transparent !important;
    transition: background .18s !important;
  }
  .nav-item:hover {
    background: rgba(255,255,255,.08) !important;
  }
  .nav-item.active {
    background: rgba(255,255,255,0.12) !important;
    border-left-color: #6bd47c !important;
  }
  .nav-item .nav-label {
    display: inline !important;
    font-size: 14px !important;
    color: rgba(255,255,255,.7) !important;
    font-weight: 500 !important;
    transition: color .18s !important;
  }
  .nav-item:hover .nav-label {
    color: rgba(255,255,255,.95) !important;
  }
  .nav-item.active .nav-label {
    color: #fff !important;
    font-weight: 700 !important;
  }
  .nav-item svg {
    color: rgba(255,255,255,.7) !important;
    stroke: rgba(255,255,255,.7) !important;
    width: 20px !important;
    height: 20px !important;
    transition: opacity .18s !important;
  }
  .nav-item:hover svg {
    color: #fff !important;
    stroke: #fff !important;
  }
  .nav-item.active svg {
    color: #fff !important;
    stroke: #fff !important;
  }
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  background: #fff !important;
  border-color: #1a2e20 !important;
  box-shadow: 0 0 0 3px rgba(26,46,32,.10) !important;
}

/* ── DESIGN v3: PRIMARY BUTTON ──────────────────────────────────*/
.btn-primary,
button.btn-primary,
.btn[type="submit"]:not(.btn-ghost),
.submit-btn {
  background: #1a2e20 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  padding: 14px 24px !important;
  box-shadow: 0 2px 8px rgba(26,46,32,.25) !important;
  transition: opacity .15s, transform .12s !important;
  -webkit-tap-highlight-color: transparent !important;
}
.btn-primary:active,
button.btn-primary:active {
  opacity: .85 !important;
  transform: scale(.98) !important;
}

/* ── DESIGN v3: SHEET / MODAL ───────────────────────────────────*/
.bottom-sheet,
.modal-sheet,
[class*="sheet"] {
  border-radius: 24px 24px 0 0 !important;
  background: #fff !important;
  box-shadow: 0 -4px 32px rgba(0,0,0,.12) !important;
}
.sheet-handle,
[class*="handle"] {
  width: 36px !important;
  height: 4px !important;
  background: rgba(0,0,0,.12) !important;
  border-radius: 2px !important;
  margin: 10px auto 16px !important;
}

/* ── DESIGN v3: КАРТКА РАХУНКУ — ВИМКНЕНО ──────────────────────
   Ці правила конфліктували з системою банківських карт у vault-1:
   [class*="bank-card"] задавало зелений фон і паддінг КОЖНОМУ
   дочірньому елементу картки, перекриваючи gold/dark/navy градієнти.
   Залишаємо лише стилі для #cardVisual (на сторінці /cards). */
#cardVisual {
  background: linear-gradient(135deg, #1a2e20 0%, #2d5038 60%, #1a3a28 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(26,46,32,.32), 0 2px 8px rgba(26,46,32,.18) !important;
  color: #fff !important;
  padding: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
#cardVisual::before {
  content: '' !important;
  position: absolute !important;
  top: -40px !important;
  right: -40px !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.05) !important;
  pointer-events: none !important;
}

/* ── DESIGN v3: ТИПОГРАФІКА НА МАЛИХ ЕКРАНАХ (360px Android) ───*/
@media (max-width: 380px) {
  .balance-amount { font-size: 44px !important; }
  .section-title  { font-size: 24px !important; }
  .card-number    { font-size: 15px !important; letter-spacing: .14em !important; }
  .qa-icon,
  #dashboard .quick-actions .qa-icon {
    width: 42px !important;
    height: 42px !important;
  }
  .quick-actions .qa-label,
  #dashboard .quick-actions .qa-label { font-size: 9.5px !important; }
}

/* ── DESIGN v3: ПЛАВНІ ПЕРЕХОДИ МІЖ СТОРІНКАМИ ─────────────────*/
.page {
  transition: opacity .18s ease, transform .18s ease !important;
}
.page.hidden,
.page[style*="display: none"] {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── DESIGN v3: PROFILE LINKS — зрілий вигляд ──────────────────*/
#profile .profile-link-btn,
.profile-links-grid .profile-link-btn {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  transition: box-shadow .15s, transform .12s !important;
  padding: 16px !important;
}
#profile .profile-link-btn:active,
.profile-links-grid .profile-link-btn:active {
  transform: scale(.97) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
#profile .profile-link-icon,
.profile-link-icon {
  background: #f0f4f1 !important;
  border-radius: 12px !important;
  color: #1a2e20 !important;
  box-shadow: none !important;
}

/* ── DESIGN v3: ФІЛЬТРИ ТРАНЗАКЦІЙ ─────────────────────────────*/
.filter-chips,
.period-tabs,
[class*="filter-tabs"] {
  gap: 6px !important;
  padding: 4px 0 12px !important;
}
.chip,
.filter-chip,
.period-tab,
[class*="tab-btn"] {
  background: #fff !important;
  border: 1.5px solid rgba(0,0,0,.09) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5a7060 !important;
  padding: 6px 14px !important;
  transition: all .14s !important;
  -webkit-tap-highlight-color: transparent !important;
}
.chip.active,
.filter-chip.active,
.period-tab.active,
[class*="tab-btn"].active {
  background: #1a2e20 !important;
  border-color: #1a2e20 !important;
  color: #fff !important;
}

/* ── DESIGN v3: -webkit-tap-highlight скрізь ───────────────────*/
* { -webkit-tap-highlight-color: transparent !important; }

/* ── DESIGN v3: АНІМАЦІЯ СКЕЛЕТОН-ЛОАДЕР ───────────────────────*/
@keyframes skeleton-pulse {
  0%   { opacity: 1;   }
  50%  { opacity: 0.4; }
  100% { opacity: 1;   }
}
.skeleton,
[class*="skeleton"],
[class*="placeholder"] {
  background: #e8ebe6 !important;
  border-radius: 8px !important;
  animation: skeleton-pulse 1.4s ease-in-out infinite !important;
  color: transparent !important;
}

/* ── DESIGN v3: КУРС ВАЛЮТ — компактна панель ──────────────────*/
.rates-grid,
.ms-grid {
  gap: 8px !important;
  padding: 16px !important;
}

/* ── DESIGN v3: NOTICE / BADGE ──────────────────────────────────*/
.badge,
[class*="badge"],
.notice {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
}

/* ── DESIGN v3: SCROLLBAR (desktop preview) ─────────────────────*/
::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14) !important; border-radius: 2px !important; }

/* ── ФІНАЛ: FLEX-DIRECTION ДЛЯ QA-BTN (перезапис медіа) ────────
   Залишаємо в самому кінці — виграє за source order             */
.quick-actions .qa-btn {
  flex-direction: column !important;
  align-items: center !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  SCREEN TRANSITION ANIMATIONS                                ║
   ║  Плавні переходи між вкладками (overrides.js патчить JS)     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* --- Скидаємо старий slideUp, замінюємо на наш --- */
.screen.active-screen {
  animation: none !important;
}

/* --- Вхідний екран зліва направо (вперед) --- */
@keyframes screenEnterLTR {
  from { opacity: 0; transform: translateX(28px) scale(.985); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
/* --- Вхідний екран справа наліво (назад) --- */
@keyframes screenEnterRTL {
  from { opacity: 0; transform: translateX(-28px) scale(.985); }
  to   { opacity: 1; transform: translateX(0)     scale(1); }
}
/* --- Вихідний (fade + shrink) --- */
@keyframes screenExitLTR {
  from { opacity: 1; transform: translateX(0)     scale(1); }
  to   { opacity: 0; transform: translateX(-20px) scale(.985); }
}
@keyframes screenExitRTL {
  from { opacity: 1; transform: translateX(0)    scale(1); }
  to   { opacity: 0; transform: translateX(20px) scale(.985); }
}

.screen-enter-ltr {
  animation: screenEnterLTR 0.28s cubic-bezier(.22,.68,0,1.1) both !important;
}
.screen-enter-rtl {
  animation: screenEnterRTL 0.28s cubic-bezier(.22,.68,0,1.1) both !important;
}
.screen-exit {
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}
.screen-exit-ltr {
  animation: screenExitLTR 0.20s cubic-bezier(.4,0,.6,1) both !important;
}
.screen-exit-rtl {
  animation: screenExitRTL 0.20s cubic-bezier(.4,0,.6,1) both !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  CARD CAROUSEL — DEPTH EFFECT + PEEK                         ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* Mobile-only carousel depth effect + peek */
@media (max-width: 767px) {

/* Ширина карток: трохи менше 100vw щоб показати сусідню           */
.app-content {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}
.bank-cards-track {
  padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
  gap: 12px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-x: contain !important;
}

.bank-cards-track .bank-card {
  flex: 0 0 calc(100vw - 56px) !important;
  width: calc(100vw - 56px) !important;
  scroll-snap-align: center !important;
  margin-right: 0 !important;
  transform-origin: center center !important;
  will-change: transform, opacity !important;
}

.bank-cards-track .bank-card:first-child {
  transform: scale(1) !important;
  opacity: 1 !important;
}

} /* end @media max-width: 767px */

/* Dots — більші, виразніші */
.bc-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.25) !important;
  transition: transform .24s cubic-bezier(.22,.68,0,1.2), width .24s cubic-bezier(.22,.68,0,1.2), background .2s ease !important;
  display: inline-block !important;
  cursor: pointer !important;
}
.bc-dot.active {
  background: rgba(255,255,255,.90) !important;
  width: 18px !important;
  border-radius: 3px !important;
  animation: bankDotPulse .42s cubic-bezier(.22,.68,0,1.2) !important;
}

@keyframes bankDotPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  55% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Контейнер dots — centered */
#bankCardsDots,
.bank-cards-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 6px 0 4px !important;
}

/* ── Nav item tap feedback ────────────────────────────────────── */
.nav-item {
  transition: opacity .1s ease !important;
}
.nav-item:active {
  opacity: .6 !important;
}
/* Active indicator: pill під іконкою */
.nav-item.active::after {
  content: '' !important;
  display: block !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: #1a2e20 !important;
  margin: 0 auto !important;
  margin-top: -2px !important;
}

/* ── QA-btn tap animation ─────────────────────────────────────── */
.qa-btn:active .qa-icon {
  transform: scale(.88) !important;
  transition: transform .1s ease !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  DESKTOP OVERRIDES — найвищий пріоритет (кінець файлу)       ║
   ╚══════════════════════════════════════════════════════════════╝ */

@media (min-width: 960px) and (max-width: 1199px) {
  /* Quick actions — 2×2 у сайдбарі (перебиває repeat(4,...)) */
  .quick-actions,
  #dashboard .quick-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* QA btn — вертикальний з фоном у сайдбарі */
  .quick-actions .qa-btn {
    flex-direction: column !important;
    align-items: center !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    padding: 14px 8px !important;
    gap: 6px !important;
  }
  .quick-actions .qa-btn:hover {
    background: rgba(255,255,255,.13) !important;
    cursor: pointer !important;
  }
  .quick-actions .qa-icon,
  #dashboard .quick-actions .qa-icon {
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: rgba(255,255,255,.10) !important;
  }
  .quick-actions .qa-label,
  #dashboard .quick-actions .qa-label {
    font-size: 9px !important;
    color: rgba(255,255,255,.55) !important;
    text-align: center !important;
  }

  /* Екранні переходи на десктопі — вимкнути свайп-анімацію
     (на десктопі навігація кліком, не свайпом) */
  .screen-enter-ltr, .screen-enter-rtl {
    animation: screenFadeIn 0.18s ease both !important;
  }

  /* Content grid — 2 колонки для карток де можливо */
  #dashboard .card-grid,
  #dashboard [class*="grid"] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }

  /* Scrollbar у контент-зоні */
  .app-content::-webkit-scrollbar {
    width: 4px !important;
  }
  .app-content::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .app-content::-webkit-scrollbar-thumb {
    background: rgba(26,46,32,.18) !important;
    border-radius: 2px !important;
  }

  /* Картки на десктопі — більше внутрішнього простору */
  .card {
    padding: 0 !important;
  }
  .card-head {
    padding: 20px 24px 14px !important;
  }

  /* Section title на десктопі */
  .section-title {
    font-size: 28px !important;
    padding: 4px 0 16px !important;
  }

  /* Hide mobile-only active dot indicator */
  .nav-item.active::after {
    display: none !important;
  }

  /* Sidebar: показати username/role повністю */
  .header-name {
    font-size: 15px !important;
    color: rgba(255,255,255,.95) !important;
  }
  .header-role {
    font-size: 11px !important;
    color: rgba(255,255,255,.40) !important;
  }
}

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

/* ── PWA visual stability patch (mobile) ───────────────────────── */
@media (max-width: 959px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  #appScreen.app-shell {
    min-height: 100dvh !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .app-header,
  .app-content,
  .header-user,
  .header-info {
    min-width: 0 !important;
  }

  .header-top {
    gap: 8px !important;
  }

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

  .bank-cards-carousel {
    overflow: hidden !important;
  }

  .bank-cards-track {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
  }

  .quick-actions {
    width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .quick-actions .qa-btn,
  #dashboard .quick-actions .qa-btn {
    min-width: 0 !important;
  }

  .quick-actions .qa-label,
  #dashboard .quick-actions .qa-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Keep bottom nav geometry stable with safe area (no squeezed icons). */
  .bottom-nav {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 8px env(safe-area-inset-bottom, 0px) !important;
    align-items: stretch !important;
  }

  /* Generic safe-area rule above should not override tab-bar internals. */
  .bottom-nav,
  [class*="bottom-nav"] {
    --bottom-pad: 0px !important;
  }

  .nav-item,
  .menu-btn {
    min-width: 0 !important;
    justify-content: center !important;
  }

  .nav-item span,
  .menu-btn span {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .app-content {
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior-y: contain !important;
  }

  .notif-panel {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .modal-overlay {
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px)) !important;
  }

  .tc-overlay {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .tc-sheet {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
  }
}

@media (max-width: 420px) {
  .header-info {
    max-width: calc(100vw - 180px) !important;
  }

  .balance-amount {
    font-size: clamp(2.25rem, 12.2vw, 3.3rem) !important;
  }

  .qa-label {
    font-size: 10px !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }

  .nav-item,
  .menu-btn {
    font-size: 11px !important;
    padding: 7px 2px 8px !important;
  }

  .notif-panel {
    max-height: min(62vh, 500px) !important;
  }
}

/* ── Desktop visual stability patch ───────────────────────────── */
@media (min-width: 960px) and (max-width: 1199px) {
  body {
    overflow: hidden !important;
  }

  #appScreen.app-shell {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-header {
    width: 300px !important;
    min-width: 300px !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 18px 14px !important;
  }

  .header-info {
    max-width: calc(300px - 120px) !important;
  }

  .bank-cards-track {
    overflow-x: auto !important;
    padding-bottom: 10px !important;
  }

  .bank-cards-track .bank-card {
    max-height: none !important;
    aspect-ratio: 85.6 / 54 !important;
  }

  .quick-actions,
  #dashboard .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 8px 0 0 !important;
  }

  .quick-actions .qa-btn {
    padding: 12px 8px !important;
    min-height: 84px !important;
  }

  .quick-actions .qa-label,
  #dashboard .quick-actions .qa-label {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .bottom-nav {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: auto !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 16px !important;
  }

  .nav-item,
  .menu-btn.nav-item {
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  .nav-item span,
  .menu-btn span {
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .app-content {
    height: 100dvh !important;
    padding: 24px 28px 40px !important;
    overflow: auto !important;
  }

  .screen {
    max-width: 980px !important;
  }

  .card,
  #transactions .card,
  #profile .card,
  #recentTransactionsCard,
  #dashboardActionForms .card {
    padding: 18px !important;
  }

  .card-head,
  .cards-row > .card .card-head {
    padding: 0 !important;
    margin-bottom: 12px !important;
  }
}

/* ── Render polish + performance pack ─────────────────────────── */
:root {
  --app-vh: 1vh;
  --browser-ui-bottom: 0px;
}

#appScreen.app-shell {
  min-height: calc(var(--app-vh) * 100) !important;
}

.app-content {
  scrollbar-gutter: stable both-edges;
  contain: paint;
}

/* Large, dynamic lists: paint only when near viewport */
#recentTransactions,
#transactionsList,
#donationsList,
#goalsList,
#contactsList,
#securityLogList,
#sessionsList,
.cards-manage-list,
.achievements-grid,
.insights-list {
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

/* Smoother compositing for floating layers */
.notif-panel,
.tc-sheet,
.modal-box,
.bank-card-inner {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Do not transform app-header: it breaks fixed/sticky nav positioning */
.app-header {
  transform: none !important;
}

/* Auto quality profile for weaker devices */
.render-lite .notif-panel,
.render-lite .modal-overlay,
.render-lite .tc-overlay,
.render-lite .auth-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.render-lite #appScreen.app-loading #heroBalance,
.render-lite #appScreen.app-loading #userName,
.render-lite #appScreen.app-loading #heroAccount,
.no-animations #appScreen.app-loading #heroBalance,
.no-animations #appScreen.app-loading #userName,
.no-animations #appScreen.app-loading #heroAccount {
  animation: none !important;
  opacity: 0.78 !important;
}

.render-lite .screen.active-screen > .section-header-row,
.render-lite .screen.active-screen > .card,
.render-lite .screen.active-screen > .cards-row {
  animation: none !important;
}

.render-lite .qa-btn,
.render-lite .icon-btn,
.render-lite .btn-primary,
.render-lite .btn-accent,
.render-lite .btn-ghost {
  transition-duration: 120ms !important;
}

html.render-lite,
html.render-lite body,
html.render-lite .app-content,
html.no-animations,
html.no-animations body,
html.no-animations .app-content {
  scroll-behavior: auto !important;
}

.render-lite .bank-card,
.render-lite .qa-btn,
.render-lite .balance-amount,
.render-lite .app-content .card,
.no-animations .bank-card,
.no-animations .qa-btn,
.no-animations .balance-amount,
.no-animations .app-content .card {
  animation: none !important;
}

.render-lite .bank-card-gold .bank-card-front::before,
.no-animations .bank-card-gold .bank-card-front::before {
  animation: none !important;
  opacity: 0.22 !important;
}

.render-lite .bank-card-inner {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .app-content {
    scroll-behavior: auto !important;
  }

  .screen.active-screen > .section-header-row,
  .screen.active-screen > .card,
  .screen.active-screen > .cards-row,
  .qa-btn,
  .icon-btn,
  .btn-primary,
  .btn-accent,
  .btn-ghost,
  .bottom-nav,
  .notif-panel,
  .bank-card-inner {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Hotfix: mobile dashboard nav overlap + extra desktop polish ─────────── */
@media (max-width: 959px) {
  #appScreen.screen-dashboard .app-header {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #appScreen.screen-dashboard .quick-actions,
  #dashboard .quick-actions {
    margin-bottom: 10px !important;
  }
}

@media (min-width: 960px) and (max-width: 1199px) {
  .bank-cards-carousel {
    margin-bottom: 10px !important;
  }

  .quick-actions,
  #dashboard .quick-actions {
    margin-top: 6px !important;
  }
}

/* ── Cross-browser UI/UX hardening pack ───────────────────────── */
:root {
  color-scheme: light;
}

@supports not (height: 100dvh) {
  .auth-screen,
  #appScreen.app-shell {
    min-height: 100vh !important;
    height: auto !important;
  }
}

/* Reliable keyboard focus for all browsers */
:where(button, a, input, select, textarea, [role="button"], .nav-item, .qa-btn):focus-visible {
  outline: 2px solid #2f63d8 !important;
  outline-offset: 2px !important;
}

@supports not selector(:focus-visible) {
  :where(button, a, input, select, textarea, [role="button"], .nav-item, .qa-btn):focus {
    outline: 2px solid #2f63d8 !important;
    outline-offset: 2px !important;
  }
}

/* Touch ergonomics */
@media (hover: none) and (pointer: coarse) {
  .icon-btn,
  .qa-btn,
  .nav-item,
  .menu-btn,
  .btn-primary,
  .btn-accent,
  .btn-ghost,
  .auth-submit {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .nav-item,
  .menu-btn {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}

/* Feature fallbacks driven by JS profile classes */
.no-backdrop-filter .bottom-nav,
.no-backdrop-filter .notif-panel,
.no-backdrop-filter .auth-card,
.no-backdrop-filter .modal-overlay,
.no-backdrop-filter .tc-overlay,
.no-backdrop-filter .tc-sheet {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.no-backdrop-filter .bottom-nav {
  background: rgba(246, 249, 241, 0.98) !important;
}

.no-content-visibility #recentTransactions,
.no-content-visibility #transactionsList,
.no-content-visibility #donationsList,
.no-content-visibility #goalsList,
.no-content-visibility #contactsList,
.no-content-visibility #securityLogList,
.no-content-visibility #sessionsList,
.no-content-visibility .cards-manage-list,
.no-content-visibility .achievements-grid,
.no-content-visibility .insights-list {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

.no-scrollbar-gutter .app-content {
  padding-right: 16px !important;
}

/* Browser/OS specific stability */
.browser-firefox .app-content {
  scrollbar-width: thin;
}

.browser-firefox .bank-cards-track {
  scrollbar-width: none;
}

.os-ios .app-content {
  -webkit-overflow-scrolling: touch !important;
}

.os-ios #appScreen.screen-dashboard .app-header {
  padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important;
}

.os-ios .bottom-nav {
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
}

/* Prevent text clipping in very narrow browsers */
@media (max-width: 380px) {
  .header-name {
    font-size: 16px !important;
  }

  .header-role {
    font-size: 12px !important;
  }

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

/* Accessibility/contrast modes */
@media (forced-colors: active) {
  .bottom-nav,
  .card,
  .auth-card,
  .modal-box,
  .notif-panel {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    box-shadow: none !important;
  }

  .btn-primary,
  .btn-accent,
  .auth-submit,
  .btn-ghost {
    border: 1px solid CanvasText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
  }
}

@media (prefers-contrast: more) {
  .card,
  .auth-card,
  .modal-box,
  .notif-panel,
  .bottom-nav {
    border-color: rgba(20, 26, 21, 0.35) !important;
  }

  .muted,
  .header-role,
  .balance-label,
  .qa-label {
    color: #3c4a3f !important;
  }
}

/* ── Scroll/animation/overlay stability hardening ───────────────────────── */
html.app-scroll-locked,
body.app-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.app-scroll-locked .app-content {
  overscroll-behavior-y: none !important;
}

.app-content {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .app-content {
    scroll-behavior: auto !important;
  }
}

/* Guard against stale overlay hitboxes after class/state races */
#txDrawer.hidden,
#drawerBackdrop.hidden,
#receiptOverlay.hidden,
#statementOverlay.hidden,
#transferConfirmOverlay.hidden,
#confirmDialog.hidden,
#confirmBackdrop.hidden,
#pinLockOverlay.hidden,
#onboardingOverlay.hidden {
  pointer-events: none !important;
  visibility: hidden !important;
}

#notifOverlay,
#notifOverlay:not(.open) {
  pointer-events: none;
  visibility: hidden;
}

#notifPanel:not(.open) {
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ── Layering + keyboard-open stabilization ─────────────────────────────── */
:root {
  --z-nav: 500;
  --z-notif-panel: 520;
  --z-modal: 3000;
  --z-sheet: 4000;
  --z-toast: 7000;
}

.bottom-nav { z-index: var(--z-nav) !important; }
.notif-panel { z-index: var(--z-notif-panel) !important; }
.modal-overlay { z-index: var(--z-modal) !important; }
.tc-overlay,
.pin-overlay,
.onboarding-overlay { z-index: var(--z-sheet) !important; }
.toast { z-index: var(--z-toast) !important; }

.keyboard-open .bottom-nav,
.keyboard-open .notif-panel,
.keyboard-open #notifOverlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

.keyboard-open .bottom-nav {
  transform: translateY(130%) !important;
}

#appScreen.app-shell {
  isolation: isolate;
}

@media (max-width: 959px) {
  .keyboard-open .app-content {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .keyboard-open #appScreen.screen-dashboard .app-header {
    padding-bottom: 18px !important;
  }
}

/* ── Desktop Classic Bank Layout v2 (web-like desktop workspace) ───────── */
@media (min-width: 1200px) {
  html.desktop-classic body {
    overflow: hidden !important;
    background:
      radial-gradient(120% 100% at 106% -16%, rgba(196, 153, 67, 0.18) 0%, transparent 56%),
      radial-gradient(110% 90% at -14% 120%, rgba(54, 87, 65, 0.22) 0%, transparent 62%),
      linear-gradient(180deg, #e7eee7 0%, #dfe8e1 100%) !important;
  }

  html.desktop-classic #appScreen.app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 332px !important;
    grid-template-rows: 116px 64px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 16px !important;
    min-height: 100vh !important;
    height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: transparent !important;
    position: relative !important;
  }

  html.desktop-classic #appScreen.app-shell::before {
    content: '' !important;
    position: absolute !important;
    inset: 16px !important;
    border-radius: 22px !important;
    background:
      radial-gradient(150% 88% at 0% 0%, rgba(44, 72, 53, 0.16) 0%, rgba(44, 72, 53, 0) 58%),
      radial-gradient(120% 90% at 100% 100%, rgba(180, 140, 62, 0.14) 0%, rgba(180, 140, 62, 0) 62%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  html.desktop-classic .header-top,
  html.desktop-classic .balance-block,
  html.desktop-classic #sidebar.bottom-nav,
  html.desktop-classic .quick-actions,
  html.desktop-classic .app-content {
    position: relative !important;
    z-index: 1 !important;
  }

  html.desktop-classic .app-header {
    display: contents !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  html.desktop-classic .header-top {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    background: linear-gradient(135deg, #203727 0%, #2c4b37 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 26px rgba(22, 39, 29, 0.24) !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  html.desktop-classic .header-top::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    right: -24px !important;
    width: 200px !important;
    height: 120px !important;
    border-radius: 999px !important;
    background: radial-gradient(ellipse at center, rgba(222, 183, 94, 0.3) 0%, rgba(222, 183, 94, 0) 72%) !important;
    pointer-events: none !important;
  }

  html.desktop-classic .header-top .header-user {
    min-width: 0 !important;
  }

  html.desktop-classic .header-top .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  html.desktop-classic .header-top .icon-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.11) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #eef7ef !important;
    transition: transform .18s ease, background .18s ease !important;
  }

  html.desktop-classic .header-top .icon-btn:hover {
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.2) !important;
  }

  html.desktop-classic .header-name {
    color: #f4fbf4 !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  html.desktop-classic .header-role {
    color: rgba(238, 249, 239, 0.76) !important;
    font-size: 14px !important;
  }

  html.desktop-classic .balance-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    background: linear-gradient(145deg, #5a3f15 0%, #9a7030 52%, #3d2a0e 100%) !important;
    border: 1px solid rgba(255, 228, 168, 0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 26px rgba(52, 34, 12, 0.3) !important;
    padding: 14px 16px !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  html.desktop-classic .balance-label,
  html.desktop-classic .balance-amount,
  html.desktop-classic #heroAccount {
    color: #f4fbf4 !important;
  }

  html.desktop-classic .balance-label-row {
    justify-content: flex-start !important;
  }

  html.desktop-classic #appScreen .balance-amount {
    color: #f6fff6 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-shadow: none !important;
  }

  html.desktop-classic #appScreen.app-loading #heroBalance,
  html.desktop-classic #appScreen.app-loading #userName,
  html.desktop-classic #appScreen.app-loading #heroAccount {
    opacity: 0.78 !important;
  }

  html.desktop-classic .balance-label {
    font-size: 10px !important;
    letter-spacing: .11em !important;
    opacity: .8 !important;
  }

  html.desktop-classic .balance-amount {
    font-size: clamp(1.6rem, 1.95vw, 2.2rem) !important;
    line-height: 1.04 !important;
  }

  html.desktop-classic #sidebar.bottom-nav {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(41, 62, 48, 0.32) !important;
    background: rgba(28, 44, 33, 0.68) !important;
    box-shadow: 0 10px 20px rgba(20, 34, 21, 0.16) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    transform: none !important;
    opacity: 1 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  html.desktop-classic #sidebar.bottom-nav::before,
  html.desktop-classic #sidebar.bottom-nav::after {
    content: none !important;
  }

  html.desktop-classic #sidebar.bottom-nav.nav-hidden {
    transform: none !important;
    opacity: 1 !important;
  }

  html.desktop-classic #sidebar .nav-item {
    min-height: 48px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #e2efe3 !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
  }

  html.desktop-classic #sidebar .nav-item span {
    display: inline !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: inherit !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  html.desktop-classic #sidebar .nav-item svg {
    width: 17px !important;
    height: 17px !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  html.desktop-classic #sidebar .nav-item.active {
    background: linear-gradient(135deg, rgba(208, 227, 208, 0.94) 0%, rgba(235, 246, 226, 0.94) 100%) !important;
    border: 1px solid #c9ddca !important;
    color: #1f3327 !important;
    box-shadow: 0 6px 14px rgba(15, 30, 20, 0.2) !important;
  }

  html.desktop-classic #sidebar .nav-item:hover:not(.active) {
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(232, 243, 233, 0.24) !important;
  }

  html.desktop-classic .bank-cards-carousel {
    display: none !important;
  }

  html.desktop-classic .bank-cards-track {
    min-height: 176px !important;
    height: 100% !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 2px 0 8px !important;
  }

  html.desktop-classic .bank-card {
    flex: 0 0 340px !important;
    width: 340px !important;
    max-width: calc(100% - 8px) !important;
    aspect-ratio: 85.6 / 54 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-right: 0 !important;
  }

  html.desktop-classic .quick-actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(32, 52, 39, 0.35) !important;
    background: linear-gradient(180deg, #1f3327 0%, #273f30 100%) !important;
    box-shadow: 0 12px 24px rgba(18, 31, 23, 0.24) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto repeat(2, minmax(84px, 98px)) minmax(132px, 1fr) !important;
    gap: 10px !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  html.desktop-classic .quick-actions::before {
    content: 'Швидкі дії' !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    color: rgba(229, 241, 230, 0.92) !important;
    font-size: 11px !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    margin: 2px 2px 4px !important;
  }

  html.desktop-classic .quick-actions::after {
    content: 'ARM DESK' !important;
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    align-self: stretch !important;
    border-radius: 12px !important;
    border: 1px solid rgba(238, 245, 239, 0.16) !important;
    background:
      linear-gradient(150deg, rgba(234, 244, 235, 0.08) 0%, rgba(234, 244, 235, 0.03) 60%),
      radial-gradient(80% 85% at 95% 5%, rgba(213, 171, 85, 0.2) 0%, rgba(213, 171, 85, 0) 75%) !important;
    color: rgba(234, 245, 235, 0.78) !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 14px !important;
  }

  html.desktop-classic .qa-btn {
    min-height: 84px !important;
    height: auto !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f0f8f1 !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
  }

  html.desktop-classic .quick-actions .qa-btn:nth-child(1) { grid-column: 1 !important; grid-row: 2 !important; }
  html.desktop-classic .quick-actions .qa-btn:nth-child(2) { grid-column: 2 !important; grid-row: 2 !important; }
  html.desktop-classic .quick-actions .qa-btn:nth-child(3) { grid-column: 1 !important; grid-row: 3 !important; }
  html.desktop-classic .quick-actions .qa-btn:nth-child(4) { grid-column: 2 !important; grid-row: 3 !important; }

  html.desktop-classic .qa-btn:hover {
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
  }

  html.desktop-classic .quick-actions .qa-icon {
    background: rgba(244, 251, 245, 0.2) !important;
    color: #f5fff6 !important;
  }

  html.desktop-classic .quick-actions .qa-btn svg,
  html.desktop-classic .quick-actions .qa-icon svg {
    stroke: currentColor !important;
    opacity: 1 !important;
  }

  html.desktop-classic .quick-actions .qa-label {
    color: #f0f9f0 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }

  html.desktop-classic .quick-actions .qa-btn:nth-child(1) .qa-icon { background: linear-gradient(135deg, #2e8f56 0%, #1f6f43 100%) !important; }
  html.desktop-classic .quick-actions .qa-btn:nth-child(2) .qa-icon { background: linear-gradient(135deg, #2f6fb0 0%, #23568c 100%) !important; }
  html.desktop-classic .quick-actions .qa-btn:nth-child(3) .qa-icon { background: linear-gradient(135deg, #8b6b28 0%, #6f541f 100%) !important; }
  html.desktop-classic .quick-actions .qa-btn:nth-child(4) .qa-icon { background: linear-gradient(135deg, #7f3f53 0%, #653245 100%) !important; }

  html.desktop-classic .app-content {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable both-edges !important;
    padding: 16px !important;
    border-radius: 16px !important;
    border: 1px solid #d4e0d6 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%) !important;
    box-shadow: 0 8px 20px rgba(20, 34, 21, 0.08) !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .quick-actions {
    display: none !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .app-content {
    grid-column: 1 / 3 !important;
  }

  html.desktop-classic .screen {
    max-width: none !important;
    margin: 0 !important;
  }

  html.desktop-classic .section-title {
    font-family: "Cormorant Garamond", serif !important;
    font-size: clamp(34px, 3vw, 42px) !important;
    line-height: 0.95 !important;
    letter-spacing: 0.01em !important;
    color: #203327 !important;
    margin-bottom: 12px !important;
  }

  html.desktop-classic #dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr) !important;
    gap: 14px !important;
    align-items: start !important;
    position: relative !important;
  }

  html.desktop-classic #dashboard::before {
    content: 'ARM DESK' !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    color: rgba(34, 53, 41, 0.62) !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(60, 91, 69, 0.22) !important;
    background: rgba(249, 253, 249, 0.78) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  html.desktop-classic #dashboard > .section-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
  }

  html.desktop-classic #dashboard #recentTransactionsCard {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    min-height: 360px !important;
  }

  html.desktop-classic #dashboard .month-strip {
    grid-column: 2 !important;
    grid-row: 2 !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  html.desktop-classic #dashboard #sparklineCard {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin: 0 !important;
  }

  html.desktop-classic #dashboard .currency-card {
    grid-column: 1 / -1 !important;
  }

  html.desktop-classic #dashboard #velocityCard,
  html.desktop-classic #dashboard #topRecipientsCard,
  html.desktop-classic #dashboard #budgetProgressCard,
  html.desktop-classic #dashboard #dashboardActionForms {
    grid-column: 1 / -1 !important;
  }

  html.desktop-classic #dashboard .card {
    position: relative !important;
    overflow: hidden !important;
    border-color: #d7e2d8 !important;
    box-shadow: 0 10px 20px rgba(24, 39, 29, 0.08) !important;
  }

  html.desktop-classic #dashboard .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, rgba(48, 83, 61, 0.82) 0%, rgba(196, 154, 69, 0.76) 100%) !important;
    pointer-events: none !important;
  }

  html.desktop-classic #dashboard .ms-item {
    text-align: left !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    background: linear-gradient(180deg, #f4f8f3 0%, #ecf2ec 100%) !important;
  }

  html.desktop-classic #dashboard .ms-item.green {
    border-color: rgba(39, 111, 66, 0.24) !important;
  }

  html.desktop-classic #dashboard .ms-item.red {
    border-color: rgba(153, 56, 56, 0.24) !important;
  }

  html.desktop-classic .card-head h3 {
    color: #253a2d !important;
    letter-spacing: -0.01em !important;
  }

  /* Cards screen (desktop): compact list rows instead of glossy card tiles */
  html.desktop-classic #cards .cards-manage-list {
    gap: 8px !important;
  }

  html.desktop-classic #cards .card-manage-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #d9e2d6 !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  html.desktop-classic #cards .cmi-chip,
  html.desktop-classic #cards .cmi-design {
    display: none !important;
  }

  html.desktop-classic #cards .cmi-number {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    color: #1f3429 !important;
  }

  html.desktop-classic #cards .cmi-meta {
    margin-top: 4px !important;
    font-size: 12px !important;
    color: #6a7c6d !important;
  }

  html.desktop-classic #cards .cmi-right {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }

  html.desktop-classic #cards .cmi-actions {
    margin-left: 0 !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  html.desktop-classic #cards .btn-card-action {
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* ── Final Stability Layer (Phase 1) ─────────────────────────────────────── */
@media (max-width: 959px) {
  #appScreen.app-shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    height: auto !important;
  }

  .app-header {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .app-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-nav {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(0) !important;
  }

  /* Keep nav compositing cheap on mobile to avoid long-frame jank. */
  .bottom-nav {
    will-change: auto !important;
  }

  .bottom-nav.nav-hidden {
    will-change: transform !important;
  }
}

@media (min-width: 1200px) {
  html.desktop-classic #sidebar.bottom-nav {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    transform: none !important;
  }

  html.desktop-classic .app-content {
    min-height: 0 !important;
    height: auto !important;
    overflow: auto !important;
  }
}

/* Canonical 960-1199 layout guard to neutralize legacy cascade drift. */
@media (min-width: 960px) and (max-width: 1199px) {
  body {
    overflow: hidden !important;
  }

  #appScreen.app-shell {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-header {
    width: 300px !important;
    min-width: 300px !important;
    height: 100dvh !important;
    position: sticky !important;
    top: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 18px 14px !important;
  }

  #sidebar.bottom-nav {
    position: sticky !important;
    top: auto !important;
    bottom: 0 !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: auto !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 16px !important;
    transform: none !important;
  }

  .quick-actions,
  #dashboard .quick-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 8px 0 0 !important;
  }

  .quick-actions .qa-btn {
    min-height: 84px !important;
    padding: 12px 8px !important;
  }

  .quick-actions .qa-label,
  #dashboard .quick-actions .qa-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-transform: none !important;
  }

  .app-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100dvh !important;
    overflow: auto !important;
    padding: 24px 28px 40px !important;
  }
}

/* ── Premium Refinement Layer (contrast + premium composition) ─────────── */
:root {
  --ab-premium-ink: #edf5ef;
  --ab-premium-ink-soft: rgba(237, 245, 239, 0.76);
  --ab-premium-surface: #f6f8f4;
}

/* Account row under balance: always readable, including inline-opacity button. */
#heroAccountCopyBtn {
  opacity: 1 !important;
  color: var(--ab-premium-ink-soft) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28) !important;
}

#heroAccountCopyBtn:hover,
#heroAccountCopyBtn:focus-visible {
  color: var(--ab-premium-ink) !important;
}

#heroAccountCopyBtn svg,
#heroAccount {
  color: inherit !important;
  stroke: currentColor !important;
}

/* Gentle render optimization for long dashboards on modern browsers. */
.app-content .card {
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}

@media (max-width: 959px) {
  body {
    background:
      radial-gradient(120% 85% at 50% -12%, rgba(198, 158, 74, 0.2) 0%, rgba(198, 158, 74, 0) 52%),
      linear-gradient(180deg, #ecf1eb 0%, #e6ede6 62%, #eef2ee 100%) !important;
  }

  #appScreen.screen-dashboard .app-header {
    background:
      radial-gradient(120% 88% at 86% -18%, rgba(214, 170, 74, 0.24) 0%, rgba(214, 170, 74, 0) 56%),
      linear-gradient(160deg, #0f3d29 0%, #184631 55%, #103624 100%) !important;
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    box-shadow: 0 18px 38px rgba(9, 24, 16, 0.34) !important;
  }

  #appScreen.screen-dashboard .header-top {
    margin-bottom: 6px !important;
  }

  #appScreen.screen-dashboard .header-name {
    color: #f3faf3 !important;
    letter-spacing: -0.01em !important;
    font-size: clamp(1.6rem, 4vw, 2rem) !important;
  }

  #appScreen.screen-dashboard .header-role {
    color: rgba(226, 237, 227, 0.8) !important;
    font-size: 13px !important;
  }

  #appScreen.screen-dashboard .balance-label {
    color: rgba(231, 241, 233, 0.86) !important;
  }

  #appScreen.screen-dashboard .balance-amount {
    color: #f8fff8 !important;
    text-shadow: 0 4px 20px rgba(5, 18, 11, 0.34) !important;
    font-size: clamp(2.9rem, 14vw, 4.6rem) !important;
  }

  #appScreen.screen-dashboard #heroAccountCopyBtn {
    margin-top: 8px !important;
    padding: 6px 10px !important;
    border-radius: 11px !important;
    background: rgba(236, 246, 237, 0.1) !important;
    border: 1px solid rgba(236, 246, 237, 0.17) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  #appScreen.screen-dashboard .bank-cards-carousel {
    margin-top: 8px !important;
  }

  #appScreen.screen-dashboard .bank-card {
    border-radius: 24px !important;
    box-shadow: 0 20px 40px rgba(6, 16, 10, 0.34) !important;
  }

  #appScreen.screen-dashboard .quick-actions {
    margin-top: 8px !important;
    gap: 12px !important;
  }

  #appScreen.screen-dashboard .qa-btn {
    border-radius: 18px !important;
    padding: 10px 8px !important;
    border: 1px solid rgba(226, 239, 229, 0.2) !important;
    background: linear-gradient(180deg, rgba(244, 251, 246, 0.19) 0%, rgba(244, 251, 246, 0.12) 100%) !important;
    box-shadow: 0 10px 20px rgba(9, 26, 17, 0.22) !important;
  }

  #appScreen.screen-dashboard .qa-icon {
    background: rgba(244, 251, 246, 0.24) !important;
    border: 1px solid rgba(244, 251, 246, 0.24) !important;
  }

  #appScreen.screen-dashboard .qa-label {
    color: rgba(240, 248, 241, 0.96) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
  }

  #appScreen.screen-dashboard #sidebar.bottom-nav {
    background: rgba(248, 250, 247, 0.88) !important;
    border: 1px solid rgba(47, 74, 55, 0.16) !important;
    box-shadow: 0 16px 30px rgba(27, 47, 34, 0.16) !important;
    backdrop-filter: blur(18px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
  }

  #appScreen.screen-dashboard #sidebar .nav-item span {
    font-weight: 650 !important;
    letter-spacing: 0.01em !important;
  }
}

@media (min-width: 1200px) {
  html.desktop-classic body {
    background:
      radial-gradient(100% 120% at 12% 0%, rgba(214, 176, 97, 0.14) 0%, rgba(214, 176, 97, 0) 55%),
      radial-gradient(115% 140% at 100% 100%, rgba(52, 90, 66, 0.16) 0%, rgba(52, 90, 66, 0) 62%),
      linear-gradient(180deg, #e8eee8 0%, #e3e9e3 100%) !important;
  }

  html.desktop-classic.ab-authed #appScreen {
    width: min(1520px, calc(100vw - 28px)) !important;
    min-height: calc(100vh - 28px) !important;
    height: calc(100vh - 28px) !important;
    margin: 14px auto !important;
    border-radius: 24px !important;
    border: 1px solid rgba(49, 77, 59, 0.16) !important;
    box-shadow: 0 24px 46px rgba(16, 33, 23, 0.14) !important;
    overflow: hidden !important;
    padding: 14px !important;
    gap: 12px !important;
    grid-template-columns: minmax(0, 1fr) 344px !important;
    grid-template-rows: 112px 60px minmax(0, 1fr) !important;
  }

  html.desktop-classic .app-header {
    border-radius: 18px !important;
    border: 1px solid rgba(240, 249, 241, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 28px rgba(14, 29, 20, 0.2) !important;
  }

  html.desktop-classic .header-name {
    font-size: 26px !important;
    letter-spacing: -0.012em !important;
  }

  html.desktop-classic .header-role {
    color: rgba(235, 245, 236, 0.78) !important;
  }

  html.desktop-classic .balance-block {
    border-radius: 16px !important;
    background:
      radial-gradient(130% 110% at 92% -8%, rgba(233, 199, 122, 0.28) 0%, rgba(233, 199, 122, 0) 58%),
      linear-gradient(155deg, #284f37 0%, #325c41 45%, #1f3d2b 100%) !important;
    border: 1px solid rgba(234, 247, 235, 0.16) !important;
    box-shadow: 0 14px 28px rgba(20, 37, 27, 0.24) !important;
  }

  html.desktop-classic #heroAccountCopyBtn {
    color: rgba(238, 249, 238, 0.88) !important;
  }

  html.desktop-classic #dashboard::before,
  html.desktop-classic .quick-actions::after {
    content: none !important;
  }

  html.desktop-classic .quick-actions {
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(39, 61, 47, 0.28) !important;
    background: linear-gradient(180deg, #1f3327 0%, #263d2f 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto repeat(2, minmax(90px, auto)) !important;
    gap: 10px !important;
  }

  html.desktop-classic .quick-actions::before {
    margin: 0 0 2px !important;
    color: rgba(228, 240, 229, 0.85) !important;
    letter-spacing: 0.1em !important;
  }

  html.desktop-classic .qa-btn {
    min-height: 90px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(240, 250, 241, 0.14) !important;
    background: linear-gradient(180deg, rgba(240, 250, 241, 0.13) 0%, rgba(240, 250, 241, 0.08) 100%) !important;
  }

  html.desktop-classic .qa-btn:hover {
    transform: translateY(-1px) !important;
    background: linear-gradient(180deg, rgba(244, 252, 246, 0.2) 0%, rgba(244, 252, 246, 0.12) 100%) !important;
  }

  html.desktop-classic .qa-label {
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  html.desktop-classic #sidebar.bottom-nav {
    border-radius: 14px !important;
    border: 1px solid rgba(39, 62, 48, 0.26) !important;
    background: rgba(27, 42, 32, 0.72) !important;
    box-shadow: 0 8px 18px rgba(18, 29, 21, 0.18) !important;
  }

  html.desktop-classic .app-content {
    background: var(--ab-premium-surface) !important;
    border: 1px solid rgba(46, 75, 55, 0.14) !important;
    box-shadow: 0 10px 24px rgba(16, 32, 23, 0.08) !important;
  }

  html.desktop-classic .section-title {
    font-size: clamp(32px, 2.5vw, 40px) !important;
    margin-bottom: 10px !important;
  }
}

@media (min-width: 960px) and (max-width: 1199px) {
  .bank-cards-track {
    gap: 12px !important;
    padding-top: 2px !important;
  }

  .bank-card {
    flex: 0 0 min(340px, calc(50vw - 34px)) !important;
    width: min(340px, calc(50vw - 34px)) !important;
    aspect-ratio: 85.6 / 54 !important;
    min-height: 186px !important;
    max-height: none !important;
    margin-right: 0 !important;
  }
}

/* ── Premium Direction 1: Luxe Fintech pass ─────────────────────────────── */
:root {
  --ab-luxe-gold: #ceb06f;
  --ab-luxe-gold-soft: rgba(206, 176, 111, 0.22);
  --ab-luxe-ink: #223429;
  --ab-luxe-surface: #f9fbf8;
  --ab-luxe-surface-2: #f2f6f1;
}

#appScreen.screen-dashboard .card {
  border-radius: 18px !important;
  border: 1px solid rgba(45, 74, 54, 0.1) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf7 100%) !important;
  box-shadow: 0 8px 20px rgba(15, 31, 21, 0.06) !important;
}

#appScreen.screen-dashboard .card-head h3,
#appScreen.screen-dashboard .section-title {
  color: var(--ab-luxe-ink) !important;
}

#appScreen.screen-dashboard .chip,
#appScreen.screen-dashboard .badge,
#appScreen.screen-dashboard .tag-chip {
  border-radius: 999px !important;
}

@media (max-width: 959px) {
  #appScreen.screen-dashboard .app-header {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #appScreen.screen-dashboard .balance-block {
    padding-bottom: 18px !important;
  }

  #appScreen.screen-dashboard .balance-label-row {
    gap: 10px !important;
  }

  #appScreen.screen-dashboard #toggleBalanceBtn {
    opacity: 0.8 !important;
    color: rgba(242, 251, 244, 0.84) !important;
  }

  #appScreen.screen-dashboard .bank-card {
    border: 1px solid rgba(245, 233, 198, 0.24) !important;
  }

  #appScreen.screen-dashboard .bank-card-gold {
    box-shadow: 0 24px 46px rgba(11, 22, 15, 0.36), 0 0 0 1px rgba(214, 183, 109, 0.34) !important;
  }

  #appScreen.screen-dashboard .bank-card-dark,
  #appScreen.screen-dashboard .bank-card-navy {
    box-shadow: 0 24px 46px rgba(8, 18, 25, 0.36), 0 0 0 1px rgba(122, 150, 206, 0.28) !important;
  }

  #appScreen.screen-dashboard .quick-actions {
    padding-inline: 4px !important;
  }

  #appScreen.screen-dashboard .qa-btn {
    min-height: 92px !important;
  }

  #appScreen.screen-dashboard #sidebar.bottom-nav .nav-item.active {
    background: linear-gradient(180deg, #f7fbf7 0%, #edf4ee 100%) !important;
    border: 1px solid rgba(46, 75, 55, 0.2) !important;
    color: #22372a !important;
    box-shadow: 0 4px 10px rgba(23, 41, 30, 0.12) !important;
  }

  #appScreen.screen-dashboard #sidebar.bottom-nav .nav-item:not(.active) {
    color: rgba(33, 54, 41, 0.68) !important;
  }
}

@media (min-width: 1200px) {
  html.desktop-classic.ab-authed #appScreen {
    grid-template-columns: minmax(0, 1fr) 356px !important;
    grid-template-rows: 114px 60px minmax(0, 1fr) !important;
    gap: 14px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.2) 100%),
      linear-gradient(180deg, #edf3ee 0%, #e6ece7 100%) !important;
  }

  html.desktop-classic .header-top .icon-btn {
    border-radius: 12px !important;
    border: 1px solid rgba(248, 253, 249, 0.22) !important;
    background: linear-gradient(180deg, rgba(248, 253, 249, 0.16) 0%, rgba(248, 253, 249, 0.08) 100%) !important;
  }

  html.desktop-classic .balance-label {
    color: rgba(239, 249, 240, 0.8) !important;
    letter-spacing: 0.12em !important;
  }

  html.desktop-classic .balance-amount {
    font-size: clamp(1.75rem, 2.1vw, 2.36rem) !important;
  }

  html.desktop-classic #heroAccountCopyBtn {
    border: 1px solid rgba(236, 247, 237, 0.24) !important;
    border-radius: 10px !important;
    padding: 5px 9px !important;
    background: rgba(236, 247, 237, 0.08) !important;
  }

  html.desktop-classic #sidebar.bottom-nav {
    gap: 8px !important;
    padding: 8px !important;
  }

  html.desktop-classic #sidebar .nav-item {
    min-height: 50px !important;
    border-radius: 11px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
  }

  html.desktop-classic #sidebar .nav-item.active {
    background: linear-gradient(180deg, #f7fbf7 0%, #edf4ee 100%) !important;
    border: 1px solid rgba(45, 74, 54, 0.24) !important;
    box-shadow: 0 6px 12px rgba(19, 34, 25, 0.14) !important;
  }

  html.desktop-classic .app-content {
    border-radius: 16px !important;
    padding: 18px !important;
    background:
      radial-gradient(120% 80% at 98% -16%, var(--ab-luxe-gold-soft) 0%, rgba(206, 176, 111, 0) 58%),
      var(--ab-luxe-surface) !important;
  }

  html.desktop-classic #dashboard {
    grid-template-columns: minmax(0, 1.24fr) minmax(286px, 0.76fr) !important;
    gap: 16px !important;
  }

  html.desktop-classic #dashboard #recentTransactionsCard {
    min-height: 390px !important;
  }

  html.desktop-classic #dashboard .card {
    border: 1px solid rgba(42, 70, 51, 0.1) !important;
    box-shadow: 0 10px 22px rgba(16, 32, 23, 0.08) !important;
  }

  html.desktop-classic #dashboard .card::before {
    height: 1px !important;
    background: linear-gradient(90deg, rgba(68, 104, 79, 0.5) 0%, rgba(206, 176, 111, 0.56) 100%) !important;
  }

  html.desktop-classic .ms-item {
    border-radius: 12px !important;
    border: 1px solid rgba(44, 73, 53, 0.09) !important;
    background: linear-gradient(180deg, var(--ab-luxe-surface) 0%, var(--ab-luxe-surface-2) 100%) !important;
  }
}

/* ── iPhone Fit & Finish (mobile dashboard) ─────────────────────────────── */
@media (max-width: 767px) {
  #appScreen.screen-dashboard.app-shell {
    padding-top: 0 !important;
  }

  #appScreen.screen-dashboard .app-header {
    padding-top: max(20px, env(safe-area-inset-top, 0px)) !important;
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    border-bottom-left-radius: 34px !important;
    border-bottom-right-radius: 34px !important;
  }

  #appScreen.screen-dashboard .header-top {
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 6px 0 12px !important;
  }

  #appScreen.screen-dashboard .header-user {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 10px !important;
  }

  #appScreen.screen-dashboard .header-actions {
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  #appScreen.screen-dashboard .icon-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
  }

  #appScreen.screen-dashboard .header-info {
    max-width: calc(100vw - 184px) !important;
  }

  #appScreen.screen-dashboard .header-name {
    font-size: clamp(1.16rem, 5.2vw, 1.5rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.014em !important;
  }

  #appScreen.screen-dashboard .header-role {
    font-size: 12px !important;
    opacity: 0.92 !important;
  }

  #appScreen.screen-dashboard .balance-label {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }

  #appScreen.screen-dashboard .balance-amount {
    font-size: clamp(2.6rem, 14.2vw, 4.2rem) !important;
    line-height: 0.98 !important;
  }

  #appScreen.screen-dashboard #heroAccountCopyBtn {
    margin-top: 10px !important;
    padding: 7px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  /* Card clipping fix: remove conflicting vw math and align to header width. */
  #appScreen.screen-dashboard .bank-cards-carousel {
    margin: 10px 0 0 !important;
    overflow: visible !important;
  }

  #appScreen.screen-dashboard .bank-cards-track {
    gap: 12px !important;
    padding: 2px 0 18px !important;
    scroll-padding-left: 0 !important;
    scroll-padding-right: 0 !important;
  }

  #appScreen.screen-dashboard .bank-cards-track .bank-card,
  #appScreen.screen-dashboard .bank-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    aspect-ratio: 85.6 / 54 !important;
    border-radius: 24px !important;
  }

  #appScreen.screen-dashboard .bank-card-content {
    padding: 16px 18px 14px !important;
  }

  #appScreen.screen-dashboard .quick-actions {
    margin-top: 10px !important;
    padding-inline: 0 !important;
    gap: 10px !important;
  }

  #appScreen.screen-dashboard .qa-btn {
    min-height: 88px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(245, 252, 247, 0.2) 0%, rgba(245, 252, 247, 0.12) 100%) !important;
  }

  #appScreen.screen-dashboard .qa-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
  }

  #appScreen.screen-dashboard .qa-label {
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em !important;
  }
}

/* ── iPhone Premium Banking Pass v2 ─────────────────────────────────────── */
@media (max-width: 767px) {
  #appScreen.screen-dashboard .app-header {
    background:
      radial-gradient(140% 92% at 88% -22%, rgba(226, 186, 97, 0.2) 0%, rgba(226, 186, 97, 0) 54%),
      radial-gradient(128% 78% at 4% 100%, rgba(55, 112, 83, 0.24) 0%, rgba(55, 112, 83, 0) 60%),
      linear-gradient(158deg, #0e3f2a 0%, #124631 52%, #0c3724 100%) !important;
    box-shadow: 0 22px 42px rgba(7, 22, 14, 0.36) !important;
  }

  .os-ios #appScreen.screen-dashboard .app-header {
    padding-top: max(52px, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
  }

  #appScreen.screen-dashboard .avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(233, 244, 235, 0.42) !important;
    background: rgba(233, 244, 235, 0.1) !important;
  }

  #appScreen.screen-dashboard .header-name {
    color: #f3fbf4 !important;
    text-shadow: 0 2px 14px rgba(5, 17, 10, 0.22) !important;
  }

  #appScreen.screen-dashboard .header-role {
    color: rgba(226, 239, 229, 0.8) !important;
  }

  #appScreen.screen-dashboard .balance-block {
    text-align: center !important;
  }

  #appScreen.screen-dashboard #heroAccountCopyBtn {
    background: linear-gradient(180deg, rgba(239, 248, 240, 0.13) 0%, rgba(239, 248, 240, 0.08) 100%) !important;
    border-color: rgba(239, 248, 240, 0.2) !important;
  }

  #appScreen.screen-dashboard .bank-cards-track {
    gap: 14px !important;
    padding-bottom: 20px !important;
  }

  #appScreen.screen-dashboard .bank-card {
    border: 1px solid rgba(236, 244, 237, 0.18) !important;
    box-shadow: 0 24px 46px rgba(6, 18, 11, 0.34) !important;
  }

  #appScreen.screen-dashboard .bank-card-number {
    font-size: clamp(15px, 4.8vw, 18px) !important;
    letter-spacing: 0.16em !important;
  }

  #appScreen.screen-dashboard .bank-card-label {
    font-size: 9px !important;
    opacity: 0.72 !important;
  }

  #appScreen.screen-dashboard .bank-card-name,
  #appScreen.screen-dashboard .bank-card-date {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
  }

  #appScreen.screen-dashboard .quick-actions {
    gap: 11px !important;
    margin-top: 12px !important;
  }

  #appScreen.screen-dashboard .qa-btn {
    border: 1px solid rgba(236, 247, 238, 0.24) !important;
    box-shadow: 0 12px 22px rgba(10, 29, 19, 0.2) !important;
  }

  #appScreen.screen-dashboard .qa-icon {
    background: linear-gradient(180deg, rgba(241, 250, 243, 0.24) 0%, rgba(241, 250, 243, 0.16) 100%) !important;
    border: 1px solid rgba(241, 250, 243, 0.22) !important;
  }

  #appScreen.screen-dashboard #sidebar.bottom-nav {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 28px !important;
    background: rgba(244, 248, 243, 0.9) !important;
    border: 1px solid rgba(50, 79, 59, 0.16) !important;
    box-shadow: 0 18px 34px rgba(20, 39, 28, 0.18) !important;
    backdrop-filter: blur(20px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(165%) !important;
  }

  #appScreen.screen-dashboard #sidebar .nav-item {
    min-height: 54px !important;
    border-radius: 16px !important;
    padding: 6px 4px !important;
    gap: 3px !important;
    border: 1px solid transparent !important;
  }

  #appScreen.screen-dashboard #sidebar .nav-item svg {
    width: 22px !important;
    height: 22px !important;
  }

  #appScreen.screen-dashboard #sidebar .nav-item span {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
  }

  #appScreen.screen-dashboard #sidebar .nav-item.active {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8f3 100%) !important;
    border: 1px solid rgba(50, 78, 58, 0.2) !important;
    box-shadow: 0 7px 12px rgba(20, 39, 29, 0.12) !important;
  }

  #appScreen.screen-dashboard #sidebar .nav-item.active::after {
    content: none !important;
  }
}

/* ── Desktop Signature 2026 (modern premium visual language) ───────────── */
@media (min-width: 1200px) {
  html.desktop-classic body {
    background:
      radial-gradient(120% 140% at 8% -10%, rgba(219, 184, 110, 0.2) 0%, rgba(219, 184, 110, 0) 56%),
      radial-gradient(130% 160% at 100% 100%, rgba(44, 86, 62, 0.22) 0%, rgba(44, 86, 62, 0) 58%),
      linear-gradient(180deg, #e7eee8 0%, #e1e9e2 100%) !important;
  }

  html.desktop-classic.ab-authed #appScreen {
    width: min(1540px, calc(100vw - 24px)) !important;
    min-height: calc(100vh - 24px) !important;
    height: calc(100vh - 24px) !important;
    margin: 12px auto !important;
    padding: 14px !important;
    gap: 14px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(43, 74, 55, 0.15) !important;
    box-shadow: 0 28px 54px rgba(15, 31, 22, 0.15) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.18) 100%),
      linear-gradient(180deg, #edf3ee 0%, #e4ebe5 100%) !important;
    grid-template-columns: minmax(0, 1fr) 362px !important;
    grid-template-rows: 114px 62px minmax(0, 1fr) !important;
  }

  html.desktop-classic .app-header {
    border-radius: 18px !important;
    background:
      radial-gradient(130% 96% at 88% -28%, rgba(218, 182, 102, 0.24) 0%, rgba(218, 182, 102, 0) 56%),
      linear-gradient(154deg, #173f2b 0%, #1f4f37 54%, #153826 100%) !important;
    border: 1px solid rgba(238, 248, 239, 0.16) !important;
    box-shadow: 0 16px 30px rgba(13, 29, 20, 0.24) !important;
  }

  html.desktop-classic .header-top .icon-btn {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  html.desktop-classic .app-content {
    border-radius: 18px !important;
    border: 1px solid rgba(43, 73, 54, 0.14) !important;
    background:
      radial-gradient(112% 72% at 100% -10%, rgba(208, 176, 104, 0.12) 0%, rgba(208, 176, 104, 0) 56%),
      linear-gradient(180deg, #f9fcf8 0%, #f3f7f3 100%) !important;
    box-shadow: 0 12px 26px rgba(15, 31, 22, 0.1) !important;
    padding: 20px !important;
  }

  html.desktop-classic .section-title {
    font-size: clamp(34px, 2.6vw, 42px) !important;
    line-height: 0.96 !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.01em !important;
    color: #1f3429 !important;
  }

  html.desktop-classic #dashboard {
    grid-template-columns: minmax(0, 1.26fr) minmax(300px, 0.74fr) !important;
    gap: 16px !important;
  }

  html.desktop-classic #dashboard .card {
    border-radius: 16px !important;
    border: 1px solid rgba(44, 75, 55, 0.1) !important;
    box-shadow: 0 10px 20px rgba(15, 30, 22, 0.08) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  }

  html.desktop-classic #dashboard .card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(60, 94, 72, 0.2) !important;
    box-shadow: 0 16px 30px rgba(15, 30, 22, 0.12) !important;
  }

  html.desktop-classic #dashboard .card::before {
    height: 1px !important;
    background: linear-gradient(90deg, rgba(54, 86, 66, 0.46) 0%, rgba(206, 175, 104, 0.56) 100%) !important;
  }

  html.desktop-classic #dashboard #recentTransactionsCard {
    min-height: 420px !important;
  }

  html.desktop-classic .ms-item {
    border-radius: 13px !important;
    border: 1px solid rgba(45, 74, 54, 0.1) !important;
    background: linear-gradient(180deg, #fbfdfb 0%, #f1f6f1 100%) !important;
  }

  html.desktop-classic #sidebar.bottom-nav {
    border-radius: 15px !important;
    border: 1px solid rgba(40, 64, 49, 0.24) !important;
    background: rgba(23, 39, 30, 0.72) !important;
    box-shadow: 0 10px 20px rgba(15, 28, 20, 0.2) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  }

  html.desktop-classic #sidebar .nav-item {
    border-radius: 11px !important;
    border: 1px solid transparent !important;
    min-height: 50px !important;
  }

  html.desktop-classic #sidebar .nav-item:hover:not(.active) {
    border-color: rgba(232, 244, 234, 0.2) !important;
    background: rgba(240, 248, 241, 0.14) !important;
  }

  html.desktop-classic #sidebar .nav-item.active {
    background: linear-gradient(180deg, #fbfefb 0%, #eef5ef 100%) !important;
    border: 1px solid rgba(46, 74, 55, 0.22) !important;
    box-shadow: 0 8px 14px rgba(17, 30, 22, 0.14) !important;
  }

  html.desktop-classic .quick-actions {
    border-radius: 16px !important;
    border: 1px solid rgba(36, 60, 46, 0.3) !important;
    background:
      radial-gradient(120% 90% at 90% -20%, rgba(218, 184, 104, 0.18) 0%, rgba(218, 184, 104, 0) 56%),
      linear-gradient(180deg, #1e3327 0%, #263d2f 100%) !important;
    box-shadow: 0 14px 26px rgba(15, 29, 21, 0.24) !important;
  }

  html.desktop-classic .quick-actions::before {
    color: rgba(232, 242, 233, 0.88) !important;
    letter-spacing: 0.11em !important;
  }

  html.desktop-classic .qa-btn {
    border-radius: 13px !important;
    border: 1px solid rgba(242, 251, 243, 0.16) !important;
    background: linear-gradient(180deg, rgba(242, 251, 243, 0.14) 0%, rgba(242, 251, 243, 0.08) 100%) !important;
    box-shadow: none !important;
  }

  html.desktop-classic .qa-btn:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(242, 251, 243, 0.28) !important;
    background: linear-gradient(180deg, rgba(245, 253, 246, 0.2) 0%, rgba(245, 253, 246, 0.12) 100%) !important;
  }

  html.desktop-classic .qa-label {
    font-size: 12px !important;
    font-weight: 680 !important;
    color: #f2faf3 !important;
  }
}

/* ── Final Fit Pass (mobile bottom + desktop subsection harmony) ───────── */
@media (max-width: 767px) {
  #appScreen.screen-dashboard .app-header {
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #appScreen.screen-dashboard .quick-actions {
    margin-bottom: 20px !important;
  }

  #appScreen.screen-dashboard #sidebar.bottom-nav {
    min-height: 74px !important;
    height: auto !important;
    padding: 4px 6px max(6px, min(10px, env(safe-area-inset-bottom, 0px))) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 24px rgba(19, 35, 26, 0.16) !important;
  }

  #appScreen.screen-dashboard #sidebar .nav-item {
    min-height: 46px !important;
    padding: 4px 2px 5px !important;
    border-radius: 12px !important;
  }

  #appScreen.screen-dashboard #sidebar .nav-item span {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }
}

@media (min-width: 1200px) {
  /* Sub-screens: remove stretched controls and restore visual rhythm */
  html.desktop-classic #appScreen:not(.screen-dashboard) .app-content {
    padding: 22px 28px 34px !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .screen {
    max-width: 1120px !important;
    margin: 0 auto !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .screen > .section-header-row,
  html.desktop-classic #appScreen:not(.screen-dashboard) .screen > .card,
  html.desktop-classic #appScreen:not(.screen-dashboard) .screen > .cards-row {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .cards-row {
    gap: 14px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .card {
    border-radius: 14px !important;
    padding: 16px 16px 14px !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .lbl,
  html.desktop-classic #appScreen:not(.screen-dashboard) .form-compact,
  html.desktop-classic #appScreen:not(.screen-dashboard) form:not(.auth-form):not(#loginForm):not(#registerForm) {
    max-width: 640px !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .lbl input,
  html.desktop-classic #appScreen:not(.screen-dashboard) .lbl select,
  html.desktop-classic #appScreen:not(.screen-dashboard) .lbl textarea {
    min-height: 44px !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .btn-primary,
  html.desktop-classic #appScreen:not(.screen-dashboard) .btn-accent,
  html.desktop-classic #appScreen:not(.screen-dashboard) .btn-ghost,
  html.desktop-classic #appScreen:not(.screen-dashboard) button[type="submit"] {
    width: auto !important;
    min-width: 160px !important;
    max-width: 320px !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    border-radius: 11px !important;
    align-self: flex-start !important;
    justify-content: center !important;
  }

  html.desktop-classic #transactionsFilters.filters-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
    gap: 10px !important;
    align-items: end !important;
  }
}

/* ── Desktop Screen-Stack Guard (prevents mixed-screen overlays) ───────── */
@media (min-width: 1200px) {
  html.desktop-classic #appScreen .app-content {
    position: relative !important;
    isolation: isolate !important;
  }

  html.desktop-classic #appScreen .screen {
    display: none !important;
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html.desktop-classic #appScreen .screen.active-screen {
    display: block !important;
    z-index: 2 !important;
  }

  html.desktop-classic #appScreen .screen.screen-exit,
  html.desktop-classic #appScreen .screen-exit,
  html.desktop-classic #appScreen .screen-exit-ltr,
  html.desktop-classic #appScreen .screen-exit-rtl {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ── Install Banner Harmonization (non-blocking on mobile) ─────────────── */
html.install-banner-visible #appScreen .app-content {
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 767px) {
  .install-banner {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px) !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    z-index: 1800 !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35) !important;
  }

  .install-banner-icon {
    font-size: 18px !important;
  }

  .install-banner-text b {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .install-banner-text span {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    color: rgba(226, 239, 231, 0.9) !important;
  }

  .install-banner-btn {
    padding: 9px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
  }

  .install-banner-close {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ── Desktop Harmony Pass (final) ─────────────────────────────────────── */
@media (min-width: 1200px) {
  html.desktop-classic.ab-authed #appScreen.app-shell {
    width: min(1540px, calc(100vw - 26px)) !important;
    min-height: calc(100vh - 26px) !important;
    height: calc(100vh - 26px) !important;
    margin: 13px auto !important;
    padding: 12px !important;
    gap: 12px !important;
    grid-template-columns: minmax(0, 1fr) 328px !important;
    grid-template-rows: 98px 56px auto minmax(0, 1fr) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(47, 75, 56, 0.15) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.2) 100%),
      linear-gradient(180deg, #ecf2ed 0%, #e4ebe5 100%) !important;
    box-shadow: 0 26px 50px rgba(15, 33, 23, 0.14) !important;
  }

  html.desktop-classic .header-top {
    border-radius: 16px !important;
    padding: 14px 16px !important;
  }

  html.desktop-classic .header-name {
    font-size: clamp(1.95rem, 2.15vw, 2.4rem) !important;
    letter-spacing: -0.016em !important;
  }

  html.desktop-classic .balance-block {
    border-radius: 16px !important;
    padding: 12px 14px !important;
    background:
      radial-gradient(140% 110% at 92% -10%, rgba(224, 191, 114, 0.2) 0%, rgba(224, 191, 114, 0) 58%),
      linear-gradient(145deg, #244c35 0%, #2e5a3f 50%, #1c3d2a 100%) !important;
  }

  html.desktop-classic #sidebar.bottom-nav {
    padding: 7px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(44, 67, 52, 0.26) !important;
    background: rgba(33, 51, 39, 0.72) !important;
    box-shadow: 0 10px 20px rgba(16, 30, 21, 0.16) !important;
  }

  html.desktop-classic #sidebar .nav-item {
    min-height: 42px !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
    gap: 7px !important;
  }

  html.desktop-classic #sidebar .nav-item span {
    font-size: 13px !important;
    letter-spacing: 0.01em !important;
  }

  html.desktop-classic #sidebar .nav-item.active {
    background: linear-gradient(180deg, #ffffff 0%, #f2f7f2 100%) !important;
    border: 1px solid rgba(43, 71, 52, 0.2) !important;
    box-shadow: 0 7px 13px rgba(16, 31, 22, 0.14) !important;
  }

  html.desktop-classic .app-content {
    grid-column: 1 / 3 !important;
    grid-row: 4 !important;
    border-radius: 16px !important;
    padding: 14px 16px 18px !important;
    border: 1px solid rgba(45, 73, 54, 0.14) !important;
    background: linear-gradient(180deg, #fbfdfb 0%, #f4f8f4 100%) !important;
    box-shadow: 0 10px 24px rgba(16, 33, 23, 0.08) !important;
  }

  html.desktop-classic #dashboard #recentTransactionsCard {
    min-height: 280px !important;
  }

  html.desktop-classic .quick-actions {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(36, 60, 46, 0.3) !important;
    background:
      radial-gradient(120% 92% at 90% -18%, rgba(216, 182, 102, 0.16) 0%, rgba(216, 182, 102, 0) 58%),
      linear-gradient(180deg, #1f3327 0%, #263d2f 100%) !important;
    box-shadow: 0 14px 28px rgba(15, 29, 21, 0.22) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: auto minmax(78px, auto) !important;
    gap: 8px !important;
    align-content: stretch !important;
  }

  html.desktop-classic .quick-actions::before {
    grid-column: 1 / -1 !important;
    margin: 0 0 2px !important;
    color: rgba(231, 242, 233, 0.88) !important;
    letter-spacing: 0.1em !important;
  }

  html.desktop-classic .quick-actions::after {
    content: none !important;
    display: none !important;
  }

  html.desktop-classic .quick-actions .qa-btn:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html.desktop-classic .qa-btn {
    min-height: 78px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(242, 251, 243, 0.14) !important;
    background: linear-gradient(180deg, rgba(242, 251, 243, 0.14) 0%, rgba(242, 251, 243, 0.08) 100%) !important;
    padding: 8px 6px !important;
  }

  html.desktop-classic .qa-icon {
    width: 40px !important;
    height: 40px !important;
  }

  html.desktop-classic .qa-label {
    text-transform: none !important;
    font-size: 11px !important;
    font-weight: 680 !important;
    letter-spacing: 0.01em !important;
  }
}

/* ── Desktop Cockpit (reference-style rebuild) ─────────────────────────── */
@media (min-width: 1200px) {
  html.desktop-cockpit body {
    background: #eef2f8 !important;
    overflow: hidden !important;
  }

  html.desktop-cockpit.ab-authed #appScreen.app-shell {
    display: grid !important;
    grid-template-columns: 262px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #eef2f8 !important;
    overflow: hidden !important;
  }

  html.desktop-cockpit #appScreen.app-shell::before {
    content: none !important;
    display: none !important;
  }

  html.desktop-cockpit .app-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    column-gap: 0 !important;
    align-content: start !important;
    height: 100vh !important;
    padding: 14px 12px !important;
    border-right: 1px solid #d8dfec !important;
    background: linear-gradient(180deg, #f8f9fd 0%, #f2f5fb 100%) !important;
    overflow: hidden !important;
  }

  html.desktop-cockpit .app-header > * {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  html.desktop-cockpit .header-top,
  html.desktop-cockpit .balance-block,
  html.desktop-cockpit #sidebar.bottom-nav,
  html.desktop-cockpit .bank-cards-carousel,
  html.desktop-cockpit .quick-actions {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html.desktop-cockpit #sidebar.bottom-nav {
    grid-row: 2 !important;
  }

  html.desktop-cockpit .balance-block {
    grid-row: 3 !important;
  }

  html.desktop-cockpit .bank-cards-carousel {
    grid-row: 4 !important;
  }

  html.desktop-cockpit .quick-actions {
    grid-row: 5 !important;
  }

  html.desktop-cockpit .header-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 4px !important;
    min-height: 0 !important;
  }

  html.desktop-cockpit .header-top::before {
    content: none !important;
    display: none !important;
  }

  html.desktop-cockpit .header-user {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html.desktop-cockpit .header-info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  html.desktop-cockpit #appScreen.screen-dashboard .avatar,
  html.desktop-cockpit .avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #e7edf8 !important;
    border: 1px solid #d4dff1 !important;
    color: #516184 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html.desktop-cockpit .header-name {
    color: #263758 !important;
    font-size: 20px !important;
    letter-spacing: -0.015em !important;
    line-height: 1.1 !important;
    width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html.desktop-cockpit .header-role {
    color: #7b88a5 !important;
    font-size: 12px !important;
    width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html.desktop-cockpit #messengerBtn,
  html.desktop-cockpit #notifBtn,
  html.desktop-cockpit #pushBtn {
    display: none !important;
  }

  html.desktop-cockpit .header-actions {
    gap: 6px !important;
    margin-left: auto !important;
  }

  html.desktop-cockpit .header-top .icon-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    border: 1px solid #d4dff1 !important;
    background: #e7edf8 !important;
    color: #5b6d90 !important;
  }

  html.desktop-cockpit .balance-block {
    background: #ffffff !important;
    border: 1px solid #d8dfec !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(53, 74, 111, 0.08) !important;
    padding: 10px 11px !important;
    text-align: left !important;
  }

  html.desktop-cockpit .balance-label-row {
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  html.desktop-cockpit .balance-label {
    color: #7f8ca8 !important;
    font-size: 10px !important;
    letter-spacing: 0.09em !important;
  }

  html.desktop-cockpit .balance-amount {
    color: #2f4670 !important;
    font-size: clamp(1.35rem, 1.6vw, 1.86rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.012em !important;
    text-shadow: none !important;
  }

  html.desktop-cockpit #heroAccountCopyBtn,
  html.desktop-cockpit #heroAccount {
    color: #7788a9 !important;
    font-size: 12px !important;
    text-shadow: none !important;
  }

  html.desktop-cockpit #sidebar.bottom-nav {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  html.desktop-cockpit #sidebar.bottom-nav::before,
  html.desktop-cockpit #sidebar.bottom-nav::after {
    content: none !important;
    display: none !important;
  }

  html.desktop-cockpit #sidebar .nav-item,
  html.desktop-cockpit #sidebar .menu-btn.nav-item {
    min-height: 42px !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    padding: 0 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    color: #6b7894 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.desktop-cockpit #sidebar .nav-item svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #8ca0c4 !important;
  }

  html.desktop-cockpit #sidebar .nav-item span {
    font-size: 14px !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em !important;
    color: #6b7894 !important;
  }

  html.desktop-cockpit #sidebar .nav-item:hover:not(.active) {
    background: #edf2fb !important;
    border-color: #dce4f3 !important;
  }

  html.desktop-cockpit #sidebar .nav-item.active {
    background: #e8eefb !important;
    border-color: #cfdbf5 !important;
    box-shadow: inset 3px 0 0 #4f84ff !important;
    color: #2f4d80 !important;
  }

  html.desktop-cockpit #sidebar .nav-item.active svg {
    stroke: #4f84ff !important;
  }

  html.desktop-cockpit #sidebar .nav-item.active span {
    color: #2f4d80 !important;
  }

  html.desktop-cockpit .bank-cards-carousel {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    min-height: 0 !important;
  }

  html.desktop-cockpit .bank-cards-dots {
    display: none !important;
  }

  html.desktop-cockpit .bank-cards-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    align-content: start !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html.desktop-cockpit .bank-card {
    width: auto !important;
    max-width: none !important;
    min-height: 98px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    flex: none !important;
    margin-right: 0 !important;
    border-radius: 12px !important;
  }

  html.desktop-cockpit .bank-card-bg,
  html.desktop-cockpit .bank-card-noise,
  html.desktop-cockpit .bank-card-chip,
  html.desktop-cockpit .bank-card-network {
    display: none !important;
  }

  html.desktop-cockpit .bank-card .bank-card-front {
    border-radius: 12px !important;
    border: 1px solid #d7deec !important;
    background: #ffffff !important;
    box-shadow: 0 5px 12px rgba(54, 77, 114, 0.08) !important;
  }

  html.desktop-cockpit .bank-card-content {
    padding: 10px 11px !important;
    gap: 8px !important;
  }

  html.desktop-cockpit .bank-card-logo-text,
  html.desktop-cockpit .bank-card-type,
  html.desktop-cockpit .bank-card-number,
  html.desktop-cockpit .bank-card-name,
  html.desktop-cockpit .bank-card-date {
    color: #415378 !important;
  }

  html.desktop-cockpit .bank-card-number {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
  }

  html.desktop-cockpit .bank-card-label {
    color: #92a0bd !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  html.desktop-cockpit .quick-actions {
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto repeat(2, minmax(72px, auto)) !important;
    gap: 8px !important;
    align-content: start !important;
  }

  html.desktop-cockpit .quick-actions::before {
    content: 'Швидкі дії' !important;
    grid-column: 1 / -1 !important;
    margin: 0 2px !important;
    color: #8491ad !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
  }

  html.desktop-cockpit .quick-actions::after {
    content: none !important;
    display: none !important;
  }

  html.desktop-cockpit .quick-actions .qa-btn:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html.desktop-cockpit .qa-btn {
    min-height: 72px !important;
    border-radius: 10px !important;
    border: 1px solid #d8e1f0 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 10px rgba(56, 77, 111, 0.08) !important;
    color: #445b84 !important;
    padding: 6px !important;
  }

  html.desktop-cockpit .qa-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: #eef3fc !important;
    border: 1px solid #dbe5f5 !important;
    color: #4f7ac5 !important;
  }

  html.desktop-cockpit .qa-label {
    color: #526381 !important;
    font-size: 12px !important;
    text-transform: none !important;
    font-weight: 650 !important;
  }

  html.desktop-cockpit .app-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    height: 100vh !important;
    overflow: auto !important;
    padding: 18px 20px 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(180deg, #f6f8fc 0%, #eef2f8 100%) !important;
  }

  html.desktop-cockpit #dashboard {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 14px !important;
    align-content: start !important;
  }

  html.desktop-cockpit .section-title {
    grid-column: 1 / -1 !important;
    font-size: 31px !important;
    line-height: 1.02 !important;
    margin-bottom: 2px !important;
    color: #2d3f61 !important;
    letter-spacing: -0.02em !important;
  }

  html.desktop-cockpit #dashboard .card {
    border-radius: 12px !important;
    border: 1px solid #d8dfec !important;
    background: #ffffff !important;
    box-shadow: 0 10px 20px rgba(61, 80, 111, 0.08) !important;
  }

  html.desktop-cockpit #dashboard .card::before {
    height: 1px !important;
    background: #e8edf7 !important;
  }

  html.desktop-cockpit #dashboard #recentTransactionsCard {
    grid-column: 1 !important;
    min-height: 380px !important;
  }

  html.desktop-cockpit #dashboard > .card:nth-of-type(2) {
    grid-column: 2 !important;
    min-height: 220px !important;
  }

  html.desktop-cockpit #dashboard .month-strip,
  html.desktop-cockpit #dashboard .sparkline-card,
  html.desktop-cockpit #dashboard .velocity-card,
  html.desktop-cockpit #dashboard #topRecipientsCard,
  html.desktop-cockpit #dashboard #budgetProgressCard,
  html.desktop-cockpit #dashboard #dashboardActionForms {
    grid-column: 1 / -1 !important;
  }

  html.desktop-cockpit #appScreen:not(.screen-dashboard) .app-content {
    padding: 20px 26px 34px !important;
  }

  html.desktop-cockpit #appScreen:not(.screen-dashboard) .quick-actions {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  html.desktop-classic #appScreen .app-content,
  html.desktop-cockpit #appScreen .app-content {
    position: relative !important;
    isolation: isolate !important;
  }

  html.desktop-classic #appScreen .screen,
  html.desktop-cockpit #appScreen .screen {
    display: none !important;
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
  }

  html.desktop-classic #appScreen .screen.active-screen,
  html.desktop-cockpit #appScreen .screen.active-screen {
    display: block !important;
    z-index: 2 !important;
  }

  html.desktop-classic #appScreen .screen.screen-exit,
  html.desktop-classic #appScreen .screen-exit,
  html.desktop-classic #appScreen .screen-exit-ltr,
  html.desktop-classic #appScreen .screen-exit-rtl,
  html.desktop-cockpit #appScreen .screen.screen-exit,
  html.desktop-cockpit #appScreen .screen-exit,
  html.desktop-cockpit #appScreen .screen-exit-ltr,
  html.desktop-cockpit #appScreen .screen-exit-rtl {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .app-content,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .app-content {
    padding: 24px 30px 40px !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .screen.active-screen,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .screen.active-screen {
    max-width: 1120px !important;
    margin: 0 auto !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .screen.active-screen > .section-header-row,
  html.desktop-classic #appScreen:not(.screen-dashboard) .screen.active-screen > .card,
  html.desktop-classic #appScreen:not(.screen-dashboard) .screen.active-screen > .cards-row,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .screen.active-screen > .section-header-row,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .screen.active-screen > .card,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .screen.active-screen > .cards-row {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .cards-row,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .card,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .card {
    border-radius: 16px !important;
    padding: 18px !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .lbl,
  html.desktop-classic #appScreen:not(.screen-dashboard) .form-compact,
  html.desktop-classic #appScreen:not(.screen-dashboard) form:not(.auth-form):not(#loginForm):not(#registerForm),
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .lbl,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .form-compact,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) form:not(.auth-form):not(#loginForm):not(#registerForm) {
    max-width: 720px !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .lbl input,
  html.desktop-classic #appScreen:not(.screen-dashboard) .lbl select,
  html.desktop-classic #appScreen:not(.screen-dashboard) .lbl textarea,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .lbl input,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .lbl select,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .lbl textarea {
    min-height: 46px !important;
    border-radius: 11px !important;
    padding: 11px 13px !important;
  }

  html.desktop-classic #appScreen:not(.screen-dashboard) .btn-primary,
  html.desktop-classic #appScreen:not(.screen-dashboard) .btn-accent,
  html.desktop-classic #appScreen:not(.screen-dashboard) .btn-ghost,
  html.desktop-classic #appScreen:not(.screen-dashboard) button[type="submit"],
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .btn-primary,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .btn-accent,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) .btn-ghost,
  html.desktop-cockpit #appScreen:not(.screen-dashboard) button[type="submit"] {
    width: auto !important;
    min-width: 168px !important;
    max-width: 320px !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    border-radius: 11px !important;
    align-self: flex-start !important;
  }

  html.desktop-classic #transactionsFilters.filters-row,
  html.desktop-cockpit #transactionsFilters.filters-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
    gap: 10px !important;
    align-items: end !important;
  }

  html.desktop-classic #cards .cards-manage-list,
  html.desktop-cockpit #cards .cards-manage-list {
    gap: 8px !important;
  }

  html.desktop-classic #cards .card-manage-item,
  html.desktop-cockpit #cards .card-manage-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  html.desktop-classic #cards .cmi-chip,
  html.desktop-classic #cards .cmi-design,
  html.desktop-cockpit #cards .cmi-chip,
  html.desktop-cockpit #cards .cmi-design {
    display: none !important;
  }

  html.desktop-classic #cards .cmi-number,
  html.desktop-cockpit #cards .cmi-number {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
  }
}

/* ── Mobile Bottom Area Final Fix (single source of truth) ───────────── */
@media (max-width: 767px) {
  #dashboard .quick-actions,
  .quick-actions {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  #dashboard .quick-actions .qa-btn,
  .quick-actions .qa-btn {
    min-height: 96px !important;
    border-radius: 18px !important;
    padding: 10px 8px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.12) 100%) !important;
    border: 1px solid rgba(255,255,255,0.24) !important;
    box-shadow: 0 10px 22px rgba(8, 20, 14, 0.18), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  .quick-actions .qa-icon,
  #dashboard .quick-actions .qa-icon {
    box-shadow: 0 6px 14px rgba(10, 28, 18, 0.24), inset 0 1px 0 rgba(255,255,255,.22) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
  }

  .bottom-nav {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(244, 250, 245, 0.96) 0%, rgba(232, 241, 234, 0.94) 100%) !important;
    border: 1px solid rgba(40, 65, 48, 0.12) !important;
    box-shadow: 0 14px 34px rgba(9, 21, 15, 0.17), 0 2px 8px rgba(9, 21, 15, 0.1) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  }

  .bottom-nav .nav-item,
  .bottom-nav .menu-btn.nav-item {
    min-height: 56px !important;
    border-radius: 18px !important;
    padding: 7px 4px 8px !important;
  }

  .bottom-nav .nav-item.active,
  .bottom-nav .menu-btn.nav-item.active {
    background: linear-gradient(180deg, #fcfffc 0%, #f2f8f3 100%) !important;
    box-shadow: 0 6px 14px rgba(19, 35, 24, 0.14), inset 0 1px 0 rgba(255,255,255,.8) !important;
  }

  .bottom-nav .nav-item.active svg,
  .bottom-nav .menu-btn.nav-item.active svg {
    transform: translateY(-1px) scale(1.04) !important;
    color: #1d422e !important;
  }

  .bottom-nav .nav-item.active span,
  .bottom-nav .menu-btn.nav-item.active span {
    color: #1d422e !important;
    font-weight: 700 !important;
  }

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

/* ── Mobile Dashboard: stable lower area + swipe depth animation (final) ── */
@media (max-width: 767px) {
  #dashboard .quick-actions,
  .quick-actions {
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    gap: 10px !important;
  }

  #dashboard .quick-actions .qa-btn,
  .quick-actions .qa-btn {
    min-height: 92px !important;
    border-radius: 17px !important;
    padding: 9px 8px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.11) 100%) !important;
    border: 1px solid rgba(255,255,255,0.23) !important;
    box-shadow: 0 8px 16px rgba(8, 22, 14, 0.15), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  }

  .bottom-nav {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(244,249,244,.96), rgba(233,241,234,.94)) !important;
    border: 1px solid rgba(35, 63, 45, 0.11) !important;
    box-shadow: 0 10px 24px rgba(10, 24, 16, 0.14), 0 2px 8px rgba(10,24,16,0.08) !important;
  }

  .bottom-nav .nav-item,
  .bottom-nav .menu-btn.nav-item {
    min-height: 54px !important;
    border-radius: 16px !important;
    padding: 6px 4px 7px !important;
  }

  .bottom-nav .nav-item.active,
  .bottom-nav .menu-btn.nav-item.active {
    background: linear-gradient(180deg, #ffffff 0%, #f2f8f3 100%) !important;
    box-shadow: 0 4px 10px rgba(18, 34, 24, 0.12) !important;
  }

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

  .bank-cards-track {
    scroll-snap-type: x mandatory !important;
  }

  .bank-cards-track .bank-card {
    transition: transform .24s ease, opacity .24s ease, filter .24s ease !important;
    transform: scale(.965) !important;
    opacity: .88 !important;
    filter: saturate(.94) !important;
  }

  .bank-cards-track .bank-card.is-active {
    transform: scale(1) !important;
    opacity: 1 !important;
    filter: saturate(1) !important;
  }

  .bank-cards-track .bank-card.is-prev,
  .bank-cards-track .bank-card.is-next {
    transform: scale(.978) !important;
    opacity: .95 !important;
  }

  html.no-animations .bank-cards-track .bank-card,
  body.no-animations .bank-cards-track .bank-card {
    transition: transform .18s ease, opacity .18s ease, filter .18s ease !important;
  }
}

/* ── Card layer hotfix: keep dashboard cards strictly front-face only ── */
#bankCardsTrack .bank-card-inner,
#bankCardsTrack .bank-card.is-flipped .bank-card-inner {
  transform: none !important;
  transform-style: flat !important;
}

#bankCardsTrack .bank-card-back,
#bankCardsTrack .bank-card.is-flipped .bank-card-back {
  display: none !important;
}

#bankCardsTrack .bank-card-front {
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* ── Mobile final: dots animation + no blank tail under app ────────────── */
@media (max-width: 767px) {
  #appScreen.app-shell {
    min-height: 100svh !important;
    height: 100svh !important;
  }

  body.ab-authed {
    overflow: hidden !important;
  }

  #appScreen.screen-dashboard .app-content {
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #bankCardsDots .bc-dot {
    transition: transform .26s ease, width .26s ease, opacity .2s ease !important;
    opacity: .72 !important;
  }

  #bankCardsDots .bc-dot.active {
    opacity: 1 !important;
    animation: bankDotPulse .44s cubic-bezier(.22,.68,0,1.2) !important;
  }

  html.no-animations #bankCardsDots .bc-dot,
  body.no-animations #bankCardsDots .bc-dot {
    transition: transform .2s ease, width .2s ease, opacity .18s ease !important;
  }
}

/* ── Dashboard card flip restored (monobank-inspired back face) ─────────── */
#bankCardsTrack .bank-card {
  perspective: 1200px !important;
}

#bankCardsTrack .bank-card-inner {
  transform-style: preserve-3d !important;
  transition: transform .52s cubic-bezier(.22,.68,0,1.02) !important;
}

#bankCardsTrack .bank-card.is-flipped .bank-card-inner {
  transform: rotateY(180deg) !important;
}

#bankCardsTrack .bank-card-front,
#bankCardsTrack .bank-card-back {
  position: absolute !important;
  inset: 0 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

#bankCardsTrack .bank-card-back {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  transform: rotateY(180deg) !important;
  background: linear-gradient(158deg, #11171f 0%, #1b2430 52%, #0f141b 100%) !important;
  border: 1px solid rgba(237, 244, 246, 0.14) !important;
}

#bankCardsTrack .bank-card-mag-stripe {
  margin-top: 14px !important;
  height: 34px !important;
  background: linear-gradient(180deg, #0a0e12 0%, #05070a 100%) !important;
}

#bankCardsTrack .bank-card-back-body {
  padding: 10px 14px 12px !important;
}

#bankCardsTrack .bank-card-sig-strip {
  margin-top: 8px !important;
  background: linear-gradient(90deg, #e7e8df 0%, #f2f3ec 100%) !important;
  border-radius: 8px !important;
}

#bankCardsTrack .bank-card-cvv-box {
  background: #f7f8f2 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(17, 24, 39, 0.18) !important;
}

#bankCardsTrack .bank-card-cvv-label {
  color: rgba(35, 46, 62, 0.75) !important;
}

#bankCardsTrack .bank-card-cvv-value {
  color: #121a24 !important;
  letter-spacing: .08em !important;
}

@media (max-width: 767px) {
  html.ab-authed body {
    overflow: hidden !important;
  }

  #appScreen.screen-dashboard .bank-cards-track {
    touch-action: pan-x !important;
    overflow-x: auto !important;
  }

  #appScreen.screen-dashboard .app-content {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── No fake cards state ─────────────────────────────────────────────── */
#bankCardsTrack .bank-cards-empty {
  width: 100% !important;
  min-height: 148px !important;
  border-radius: 20px !important;
  border: 1px dashed rgba(236, 247, 238, 0.28) !important;
  background: linear-gradient(180deg, rgba(241, 250, 243, 0.12) 0%, rgba(241, 250, 243, 0.06) 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px !important;
  text-align: center !important;
}

#bankCardsTrack .bank-cards-empty-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(239, 248, 241, 0.92) !important;
}

#bankCardsTrack .bank-cards-empty-sub {
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: rgba(222, 238, 226, 0.78) !important;
}

#bankCardsTrack .bank-cards-empty-btn {
  margin-top: 2px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(236, 247, 238, 0.28) !important;
  background: rgba(242, 251, 244, 0.14) !important;
  color: rgba(244, 251, 246, 0.95) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
}

/* ── Dashboard gesture balance: vertical page scroll + horizontal card swipe ── */
@media (max-width: 767px) {
  #appScreen.screen-dashboard .bank-cards-track {
    touch-action: auto !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
  }

  #appScreen.screen-dashboard .quick-actions {
    touch-action: pan-y !important;
  }
}

/* ── Mobile Stability Final (single source of truth) ───────────────────── */
@media (max-width: 767px) {
  html,
  body {
    height: 100% !important;
    min-height: 100% !important;
  }

  html.ab-authed body {
    background: radial-gradient(140% 120% at 50% 100%, #0f6a46 0%, #0d5b3d 42%, #0a4a33 100%) !important;
  }

  #appScreen.app-shell {
    min-height: 100dvh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #appScreen .app-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px) + var(--browser-ui-bottom, 0px)) !important;
    scroll-padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px) + var(--browser-ui-bottom, 0px)) !important;
  }

  #appScreen.screen-dashboard .app-header {
    padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px) + var(--browser-ui-bottom, 0px)) !important;
  }

  #appScreen #sidebar.bottom-nav {
    position: fixed !important;
    z-index: 120 !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px + var(--browser-ui-bottom, 0px)) !important;
    min-height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px 7px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

}

/* ── HOTFIX 2026-04-10: mobile main scroll + bottom overlap stability ──── */
@media (max-width: 959px) {
  :root {
    --ab-mobile-nav-height: 72px;
    --ab-mobile-nav-gap: 8px;
  }

  html.app-browser-mode #authScreen.auth-screen {
    min-height: calc(100dvh - var(--browser-ui-bottom, 0px)) !important;
    padding-bottom: calc(14px + var(--browser-ui-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #appScreen.screen-dashboard .app-header {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #appScreen.screen-dashboard .app-content {
    min-height: max(36svh, 260px) !important;
  }

  #appScreen .app-content {
    padding-bottom: calc(
      var(--ab-mobile-nav-height) +
      var(--ab-mobile-nav-gap) +
      18px +
      env(safe-area-inset-bottom, 0px) +
      var(--browser-ui-bottom, 0px)
    ) !important;
    scroll-padding-bottom: calc(
      var(--ab-mobile-nav-height) +
      var(--ab-mobile-nav-gap) +
      18px +
      env(safe-area-inset-bottom, 0px) +
      var(--browser-ui-bottom, 0px)
    ) !important;
  }

  #appScreen #sidebar.bottom-nav {
    bottom: calc(
      env(safe-area-inset-bottom, 0px) +
      var(--ab-mobile-nav-gap) +
      var(--browser-ui-bottom, 0px)
    ) !important;
    min-height: calc(var(--ab-mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(var(--ab-mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* iOS Safari (browser mode): keep bank tabbar above browser toolbar */
  html.os-ios.browser-safari.app-browser-mode #appScreen #sidebar.bottom-nav {
    bottom: calc(max(62px, var(--browser-ui-bottom, 0px)) + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.os-ios.browser-safari.app-browser-mode #appScreen .app-content {
    padding-bottom: calc(
      var(--ab-mobile-nav-height) +
      20px +
      max(62px, var(--browser-ui-bottom, 0px)) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
    scroll-padding-bottom: calc(
      var(--ab-mobile-nav-height) +
      20px +
      max(62px, var(--browser-ui-bottom, 0px)) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  /* Re-enable hide-on-scroll behavior for bottom nav */
  #appScreen #sidebar.bottom-nav.nav-hidden {
    transform: translateY(calc(132% + var(--browser-ui-bottom, 0px))) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Browser mode: nav must stay visible to avoid "missing tabbar" UX */
  html.app-browser-mode #appScreen #sidebar.bottom-nav.nav-hidden {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Browser-mode nav visual polish */
  html.app-browser-mode #appScreen #sidebar.bottom-nav {
    z-index: 160 !important;
    border: 1px solid rgba(233, 243, 236, 0.78) !important;
    box-shadow: 0 10px 26px rgba(5, 24, 15, 0.24) !important;
    backdrop-filter: blur(10px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  }

  /* Compact dashboard after first scroll for cleaner rhythm */
  #appScreen.screen-dashboard.dashboard-scrolled .bank-cards-carousel {
    margin-top: 0 !important;
  }

  #appScreen.screen-dashboard.dashboard-scrolled .bank-cards-track {
    padding-bottom: 12px !important;
  }

  #appScreen.screen-dashboard.dashboard-scrolled .quick-actions,
  #appScreen.screen-dashboard.dashboard-scrolled #dashboard .quick-actions {
    gap: 8px !important;
    padding-top: 4px !important;
  }

  #appScreen.screen-dashboard.dashboard-scrolled .quick-actions .qa-btn,
  #appScreen.screen-dashboard.dashboard-scrolled #dashboard .quick-actions .qa-btn {
    min-height: 76px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  #appScreen.screen-dashboard.dashboard-scrolled #dashboardActionForms.open {
    margin-top: 8px !important;
  }
}

/* ── HOTFIX 2026-04-10-2: stable true card back (Safari/iOS-safe) ─────── */
#bankCardsTrack .bank-card-inner {
  transform: none !important;
  transform-style: preserve-3d !important;
  transition: none !important;
}

#bankCardsTrack .bank-card-front,
#bankCardsTrack .bank-card-back {
  position: absolute !important;
  inset: 0 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  transition: transform .46s cubic-bezier(.22,.68,0,1.02) !important;
  z-index: 1 !important;
}

#bankCardsTrack .bank-card-front {
  transform: rotateY(0deg) translateZ(0.1px) !important;
}

#bankCardsTrack .bank-card-back {
  transform: rotateY(180deg) translateZ(0.1px) !important;
  display: flex !important;
}

#bankCardsTrack .bank-card.is-flipped .bank-card-front {
  transform: rotateY(-180deg) translateZ(0.1px) !important;
}

#bankCardsTrack .bank-card.is-flipped .bank-card-back {
  transform: rotateY(0deg) translateZ(0.1px) !important;
}

/* ── HOTFIX 2026-04-10-3: realistic bank-card back composition ────────── */
#bankCardsTrack .bank-card-back {
  border: 1px solid rgba(235, 242, 238, 0.2) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

#bankCardsTrack .bank-card-gold .bank-card-back {
  background: linear-gradient(140deg, #b17f1b 0%, #d8a63a 46%, #8f6620 100%) !important;
}

#bankCardsTrack .bank-card-navy .bank-card-back,
#bankCardsTrack .bank-card-dark .bank-card-back,
#bankCardsTrack .bank-card-slate .bank-card-back {
  background: linear-gradient(148deg, #1a2434 0%, #243249 52%, #131c2b 100%) !important;
}

#bankCardsTrack .bank-card-forest .bank-card-back,
#bankCardsTrack .bank-card-camo .bank-card-back {
  background: linear-gradient(145deg, #2a5a42 0%, #3f7858 52%, #1d4331 100%) !important;
}

#bankCardsTrack .bank-card-rose .bank-card-back {
  background: linear-gradient(145deg, #6c2f43 0%, #934663 50%, #512234 100%) !important;
}

#bankCardsTrack .bank-card-back-topline {
  height: 16px !important;
  padding: 3px 12px 0 !important;
  font-size: 7px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

#bankCardsTrack .bank-card-mag-stripe {
  margin-top: 2px !important;
  height: 30px !important;
  background: linear-gradient(180deg, #090b0f 0%, #1a1e24 100%) !important;
}

#bankCardsTrack .bank-card-back-body {
  padding: 10px 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

#bankCardsTrack .bank-card-sig-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

#bankCardsTrack .bank-card-sig-strip {
  height: 24px !important;
  margin-top: 0 !important;
  border-radius: 4px !important;
  padding: 0 8px !important;
  justify-content: flex-start !important;
  background: repeating-linear-gradient(
    90deg,
    #efeee9 0px, #efeee9 8px,
    #e4e2db 8px, #e4e2db 16px
  ) !important;
}

#bankCardsTrack .bank-card-sig-text {
  font-size: 8px !important;
  font-family: "JetBrains Mono", monospace !important;
  color: rgba(31, 38, 49, 0.82) !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#bankCardsTrack .bank-card-cvv-box {
  min-width: 52px !important;
  border-radius: 4px !important;
  padding: 2px 8px 3px !important;
}

#bankCardsTrack .bank-card-cvv-label {
  font-size: 6px !important;
  line-height: 1.1 !important;
}

#bankCardsTrack .bank-card-cvv-value {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

#bankCardsTrack .bank-card-security-note {
  font-size: 7px !important;
  line-height: 1.32 !important;
  color: rgba(248, 251, 249, 0.82) !important;
}

#bankCardsTrack .bank-card-full-number {
  min-height: 11px !important;
  margin-top: 1px !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  color: rgba(243, 249, 245, 0.9) !important;
  font-variant-numeric: tabular-nums !important;
}

#bankCardsTrack .bank-card-back-footer {
  margin-top: auto !important;
  align-items: center !important;
}

#bankCardsTrack .bank-card-back-info {
  font-size: 8px !important;
  color: rgba(244, 250, 246, 0.8) !important;
}

#bankCardsTrack .bank-card-back-network svg {
  width: 32px !important;
  height: 20px !important;
}

/* ── HOTFIX 2026-04-11-4: CVV readability + loading/error states ───────── */
#bankCardsTrack .bank-card-cvv-box {
  background: #fdfefe !important;
  border: 1px solid rgba(10, 18, 22, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
  position: relative !important;
}

#bankCardsTrack .bank-card-cvv-value {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #0d1720 !important;
  letter-spacing: .14em !important;
  min-width: 3ch !important;
  text-align: center !important;
}

#bankCardsTrack .bank-card-cvv-hint {
  margin-top: 1px !important;
  font-size: 7px !important;
  line-height: 1.05 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(18, 33, 42, 0.54) !important;
  text-align: center !important;
}

#bankCardsTrack .bank-card-cvv-box::after {
  content: "SEC"; /* subtle security mark */
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 6px;
  letter-spacing: .12em;
  color: rgba(16, 30, 39, 0.38);
  font-weight: 700;
}

#bankCardsTrack .bank-card-cvv-value.bc-loading {
  opacity: .72 !important;
  animation: cvvPulse .72s ease-in-out infinite !important;
}

#bankCardsTrack .bank-card-cvv-value.cvv-error {
  color: #8a1f2e !important;
  opacity: .92 !important;
}

#bankCardsTrack .bank-card-full-number {
  font-family: "JetBrains Mono", monospace !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  opacity: .96 !important;
}

#bankCardsTrack .bank-card.is-flipped .bank-card-front {
  pointer-events: none !important;
}

#bankCardsTrack .bank-card.is-flipped .bank-card-back {
  pointer-events: auto !important;
}

@keyframes cvvPulse {
  0%,100% { opacity: .56; }
  50% { opacity: .95; }
}

/* ── HOTFIX 2026-04-11-07: reliable vertical scroll on mobile main ────── */
@media (max-width: 959px) {
  html.ab-authed,
  html.ab-authed body {
    height: 100% !important;
    min-height: 100% !important;
  }

  html.ab-authed body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #appScreen.app-shell {
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
  }

  #appScreen .app-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding-bottom: calc(
      var(--ab-mobile-nav-height, 72px) +
      26px +
      env(safe-area-inset-bottom, 0px) +
      max(0px, var(--browser-ui-bottom, 0px))
    ) !important;
    scroll-padding-bottom: calc(
      var(--ab-mobile-nav-height, 72px) +
      30px +
      env(safe-area-inset-bottom, 0px) +
      max(0px, var(--browser-ui-bottom, 0px))
    ) !important;
  }
}

/* ── HOTFIX 2026-04-11-08: anti-stuck vertical scroll safeguard ───────── */
@media (max-width: 959px) {
  html.ab-authed:not(.app-scroll-locked) body {
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  html.ab-authed:not(.app-scroll-locked) #appScreen .app-content {
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
}