body { transition: background-color 0.4s ease, color 0.4s ease; -webkit-tap-highlight-color: transparent; overflow-x: hidden; scroll-behavior: smooth; background-color: #F8FAFC; color: #0F172A; }
        .dark body { background-color: #020612; color: #F4F7FB; }
        .glass-card { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05); border-radius: 24px; }
        .dark .glass-card { background: linear-gradient(145deg, rgba(11,77,255,0.06) 0%, rgba(4,13,33,0.85) 100%); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7); }
        .nav-bg { background: rgba(255, 255, 255, 0.9); }
        .dark .nav-bg { background: rgba(2, 6, 18, 0.8); }
        .chat-bg { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }
        .dark .chat-bg { background: #151A23; border: 1px solid rgba(255,255,255,0.1); }
        .bg-surface { background: #F8FAFC; border: 1px solid #E2E8F0; }
        .dark .bg-surface { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); }
        .text-body { color: #475569; }
        .dark .text-body { color: #9CA3AF; }

        .glass-input { background: #F1F5F9 !important; border: 1px solid #E2E8F0 !important; color: #0F172A !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .glass-input:focus { background: #FFFFFF !important; border-color: #0B4DFF !important; outline: none; box-shadow: 0 0 0 3px rgba(11,77,255,0.2) !important; }
        .dark .glass-input { background: #0a1428 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: white !important; }
        .dark .glass-input:focus { border-color: #0B4DFF !important; }
        
        input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #F1F5F9 inset !important; -webkit-text-fill-color: #0F172A !important; }
        .dark input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #0a1428 inset !important; -webkit-text-fill-color: white !important; }
        
        .credit-card-bg { background: linear-gradient(135deg, #0B4DFF 0%, #040d21 100%); position: relative; overflow: hidden; transform-style: preserve-3d; perspective: 1000px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); color: white; }
        .credit-card-bg::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(245,183,0,0.15) 0%, transparent 50%); transform: rotate(30deg); pointer-events: none; z-index: 1; }
        
        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(11,77,255,0.3); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #0B4DFF; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        
        .app-view { display: none; opacity: 0; }
        .app-view.active { display: block; opacity: 1; animation: fade-in 0.4s ease forwards; }
        
        .tracker-container { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; margin-top: 15px; margin-bottom: 5px; }
        .tracker-line-bg { position: absolute; top: 50%; left: 15px; right: 15px; height: 4px; background: rgba(0,0,0,0.05); transform: translateY(-50%); z-index: 1; border-radius: 2px; }
        .dark .tracker-line-bg { background: rgba(255,255,255,0.1); }
        .tracker-line-fill { position: absolute; top: 50%; left: 15px; height: 4px; background: #00C853; transform: translateY(-50%); z-index: 2; border-radius: 2px; transition: width 0.5s ease; }
        .step-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 3; font-size: 14px; font-weight: bold; background: #F1F5F9; color: #94A3B8; border: 2px solid #E2E8F0; transition: all 0.3s ease; }
        .dark .step-circle { background: #1E293B; color: #64748B; border-color: #334155; }
        .step-active { background: #00C853 !important; color: white !important; border-color: #00C853 !important; box-shadow: 0 0 15px rgba(0,200,83,0.4); }
        .step-processing { background: #F5B700 !important; color: black !important; border-color: #F5B700 !important; box-shadow: 0 0 15px rgba(245,183,0,0.4); animation: pulse-glow 2s infinite; }
        .step-error { background: #FF3B30 !important; color: white !important; border-color: #FF3B30 !important; box-shadow: 0 0 15px rgba(255,59,48,0.4); }

        .chat-bubble-user { background: #0B4DFF; color: white; border-radius: 16px 16px 4px 16px; align-self: flex-end; }
        .chat-bubble-bot { background: #F1F5F9; color: #0F172A; border-radius: 16px 16px 16px 4px; align-self: flex-start; }
        .dark .chat-bubble-bot { background: #1E293B; color: #F8FAFC; }
        
        .typing-dot { width: 6px; height: 6px; background: #64748B; border-radius: 50%; animation: typing 1.4s infinite ease-in-out both; }
        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
        @keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
        
        .phone-mockup { width: 100%; max-width: 290px; height: 580px; background: #020612; border: 8px solid #1a233a; border-radius: 45px; position: relative; overflow: hidden; box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0,0,0,0.5); margin: 0 auto; }
        @media (max-width: 640px) { .phone-mockup { transform: scale(0.75); transform-origin: top center; margin-bottom: -100px; margin-top: 10px;} }
        .phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 25px; background: #1a233a; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; z-index: 20; }
        
        input[type="file"]::file-selector-button { background-color: #0B4DFF; color: white; border: none; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-weight: bold; margin-right: 15px; transition: all 0.3s; }
        input[type="file"]::file-selector-button:hover { background-color: #003be0; box-shadow: 0 5px 15px rgba(11,77,255,0.4); }

        .pin-btn { width: 60px; height: 60px; border-radius: 50%; font-size: 24px; font-weight: bold; background: rgba(0,0,0,0.04); display: flex; align-items: center; justify-content: center; transition: all 0.2s; border: 1px solid rgba(0,0,0,0.1); color: #0F172A; cursor: pointer; }
        .dark .pin-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; }
        .pin-btn:active, .pin-btn:hover { transform: scale(0.95); background: #0B4DFF !important; color: white !important; border-color: #0B4DFF !important; }
        
        .pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #0B4DFF; transition: all 0.3s; }
        .pin-dot.filled { background: #0B4DFF; box-shadow: 0 0 10px rgba(11,77,255,0.6); }

        #offline-banner { transition: top 0.3s ease; }
        #qr-reader { width: 100%; border: none !important; border-radius: 1rem; overflow: hidden; }
        #qr-reader__scan_region { background: black; }
        
        @media print {
            body * { visibility: hidden; }
            #modal-txn-details, #modal-txn-details * { visibility: visible; }
            #modal-txn-details { position: absolute; left: 0; top: 0; width: 100%; background: white !important; display: block !important; }
            #invoice-paper { box-shadow: none !important; border: none !important; margin: 0; width: 100%; max-width: none; background: white !important; color: black !important; }
            .no-print { display: none !important; }
            .dark #invoice-paper, .dark #modal-txn-details { background: white !important; color: black !important; }
            .dark .text-slate-900, .dark .text-white { color: #0F172A !important; }
            .dark .bg-gray-50 { background: #F8FAFC !important; }
        }


/* QuickSend mobile-first refinement */
@media (max-width: 767px) {
  body { min-width: 320px; padding-bottom: max(5.5rem, env(safe-area-inset-bottom)); }
  #main-nav .h-20 { height: 4rem; }
  #mobile-menu-dropdown { top: 4rem; }
  #app-content { padding-top: 4rem; }
  .glass-card { border-radius: 18px; }
  .phone-mockup { max-width: min(82vw, 280px); height: 520px; transform: none; margin-bottom: 0; }
  .pin-btn { width: 56px; height: 56px; }
  input, select, button { min-height: 44px; }
  #chat-widget { right: 0.75rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  #chat-panel { width: calc(100vw - 1.5rem); height: min(72vh, 520px); right: 0; }
  #layout-dashboard > div { height: 100dvh; }
  #layout-dashboard header { height: 4.5rem; padding-left: 1rem; padding-right: 1rem; }
  #main-scroll { padding: 1rem 1rem 7rem; }
  #digital-card { border-radius: 1.35rem; padding: 1.35rem; }
  #dash-balance { font-size: clamp(2rem, 11vw, 2.8rem); }
  .dash-content-tab { width: 100%; }
  .hist-item { padding: 1rem; border-radius: 1rem; }
  .tracker-container { padding-inline: 4px; }
  #modal-txn-details { align-items: flex-start; padding: 0.75rem; padding-top: max(0.75rem, env(safe-area-inset-top)); }
  #invoice-paper { border-radius: 1.25rem; max-height: calc(100dvh - 1.5rem); overflow: auto; }
  #transfer-confirm-modal > div,
  #pin-change-modal > div,
  #client-lock-screen > div { width: min(100%, 22rem); border-radius: 1.25rem; padding: 1.25rem; }
  .mobile-nav-btn { min-width: 3.75rem; border-radius: 0.9rem; }
  .mobile-nav-btn.text-brand-royal { background: rgba(11, 77, 255, 0.10); }
}

@supports (height: 100dvh) {
  #layout-dashboard .h-screen { height: 100dvh; }
}


/* QuickSend wallet-phone layout skin start */
:root {
  --wallet-ink: #090a0d;
  --wallet-muted: #6d717a;
  --wallet-paper: #f3f5f2;
  --wallet-panel: #e5e9e7;
  --wallet-lavender: #dad9ea;
  --wallet-black: #040405;
  --wallet-action: #5d626c;
  --wallet-green: #5f963f;
}

#layout-dashboard > div {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(231,235,233,0.98)),
    var(--wallet-paper) !important;
}

.dark #layout-dashboard > div {
  background:
    linear-gradient(180deg, rgba(35,37,42,0.88), rgba(18,19,23,0.98)),
    #17181d !important;
}

#layout-dashboard .glass-card {
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(10,12,16,0.06) !important;
  color: var(--wallet-ink);
  box-shadow: 0 18px 45px rgba(19,23,31,0.08) !important;
}

.dark #layout-dashboard .glass-card {
  background: rgba(245,247,245,0.9) !important;
  border-color: rgba(255,255,255,0.34) !important;
  color: var(--wallet-ink);
}

#layout-dashboard .text-body,
#layout-dashboard .dark\:text-white,
#layout-dashboard .dark\:text-gray-200,
#layout-dashboard .dark\:text-gray-500,
#layout-dashboard .text-slate-900 {
  color: var(--wallet-ink) !important;
}

#layout-dashboard .glass-input {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(11,13,18,0.08) !important;
  color: var(--wallet-ink) !important;
  border-radius: 18px !important;
}

#layout-dashboard .glass-input:focus {
  border-color: rgba(95,150,63,0.65) !important;
  box-shadow: 0 0 0 4px rgba(95,150,63,0.14) !important;
}

#digital-card {
  background: var(--wallet-lavender) !important;
  color: var(--wallet-ink) !important;
  box-shadow: none !important;
  border: 0 !important;
}

#digital-card::before {
  content: "$  MXN";
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 2;
  border-radius: 999px;
  background: rgba(255,255,255,0.52);
  color: var(--wallet-muted);
  padding: 0.28rem 0.52rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}

#digital-card::after {
  content: "+2.10%";
  position: absolute;
  left: 50%;
  bottom: -1.05rem;
  transform: translateX(-50%);
  z-index: 6;
  border: 3px solid var(--wallet-black);
  border-radius: 999px;
  background: var(--wallet-green);
  color: #fff;
  padding: 0.33rem 0.72rem;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 16px rgba(4,4,5,0.2);
}

#digital-card .card-content-3d {
  position: relative;
  z-index: 3;
  min-height: inherit;
}

#digital-card p[data-i18n="bal_avail"] {
  color: rgba(9,10,13,0.62) !important;
  font-weight: 900;
  letter-spacing: -0.01em;
}

#dash-balance {
  color: var(--wallet-ink) !important;
  text-shadow: none !important;
  letter-spacing: -0.055em !important;
}

#digital-card #eye-icon,
#digital-card button[onclick*="toggleBalance"] {
  color: rgba(9,10,13,0.62) !important;
}

#digital-card .ph-sim-card {
  display: none !important;
}

#recent-txns-container .hist-item,
#full-history-container .hist-item {
  background: rgba(255,255,255,0.82) !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(16,18,24,0.06) !important;
}

#recent-txns-container .hist-item .tracker-container,
#full-history-container .hist-item .tracker-container {
  opacity: 0.92;
}

#layout-dashboard .mobile-nav-btn {
  aspect-ratio: 1;
  min-width: 3.6rem;
  border-radius: 1.15rem;
}

#layout-dashboard .mobile-nav-btn.text-brand-royal {
  background: #eef0ff !important;
  color: var(--wallet-ink) !important;
}

@media (max-width: 767px) {
  body { background: var(--wallet-paper) !important; }

  #layout-dashboard > div {
    height: 100dvh !important;
    background: #f0f2ef !important;
  }

  #layout-dashboard header {
    position: absolute;
    inset: 0 0 auto 0;
    height: 4.75rem !important;
    padding: 1rem 1.15rem 0 !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 80 !important;
  }

  #dash-title {
    max-width: 12.5rem;
    white-space: normal;
    line-height: 0.95;
    font-size: 1.08rem !important;
    letter-spacing: -0.035em;
    color: var(--wallet-ink) !important;
  }

  #kyc-badge-header { display: none !important; }

  #layout-dashboard header button,
  #layout-dashboard header [onclick*="settings"] {
    background: rgba(255,255,255,0.36) !important;
    border: 0 !important;
    color: var(--wallet-ink) !important;
    box-shadow: none !important;
    width: 3.35rem !important;
    height: 3.35rem !important;
  }

  #notif-badge {
    border-color: var(--wallet-lavender) !important;
  }

  #main-scroll {
    padding: 0 0 calc(6.2rem + env(safe-area-inset-bottom)) !important;
    background: var(--wallet-paper) !important;
  }

  #kyc-warning-banner,
  #banned-warning-banner {
    margin: 0.85rem 0.85rem 0;
    border-radius: 1.35rem !important;
  }

  #dash-tab-home {
    width: 100%;
    max-width: 27.5rem !important;
    margin: 0 auto !important;
    background: var(--wallet-panel);
    border-radius: 0 0 2.15rem 2.15rem;
    overflow: hidden;
    padding-bottom: 1.25rem;
    box-shadow: 0 22px 55px rgba(15,17,22,0.1);
  }

  #dash-tab-home > .grid:first-child {
    display: block !important;
    margin: 0 !important;
    padding: 0 0.72rem 1.1rem !important;
    background: var(--wallet-black);
    border-radius: 0 0 2rem 2rem;
  }

  #dash-tab-home > .grid:first-child > div:first-child {
    margin: 0 -0.72rem;
  }

  #digital-card {
    min-height: 15.35rem;
    overflow: visible !important;
    border-radius: 0 0 1.72rem 1.72rem !important;
    padding: 5.4rem 1.35rem 5.25rem !important;
    transform: none !important;
  }

  #digital-card .card-content-3d > .flex:first-child {
    display: block !important;
    margin: 0 !important;
    text-align: center;
  }

  #digital-card p[data-i18n="bal_avail"] {
    position: absolute;
    top: -3.65rem;
    left: 0.1rem;
    max-width: 9.75rem;
    text-align: left;
    line-height: 1.02;
    font-size: 0.74rem !important;
    white-space: normal;
  }

  #digital-card p[data-i18n="bal_avail"]::before {
    content: "Wallet";
    display: block;
    color: var(--wallet-ink);
    font-size: 0.88rem;
    letter-spacing: -0.03em;
  }

  #dash-balance {
    display: block;
    width: 100%;
    margin-top: 1.6rem;
    overflow: visible !important;
    font-size: clamp(3.1rem, 15.5vw, 4.7rem) !important;
    line-height: 0.95;
    text-align: center;
  }

  #digital-card button[onclick*="toggleBalance"] {
    position: absolute;
    right: 0;
    top: -3.5rem;
    width: 3.35rem !important;
    height: 3.35rem !important;
    background: rgba(255,255,255,0.36) !important;
    border-radius: 999px !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 {
    position: absolute;
    left: 0.2rem;
    right: 0.2rem;
    bottom: -4.35rem;
    z-index: 8;
    display: flex !important;
    justify-content: space-between;
    gap: 4.2rem !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3.45rem;
    height: 3.45rem;
    transform: translate(-50%, -50%);
    border-radius: 1.05rem;
    background:
      radial-gradient(circle at 34% 34%, #0d0e12 0 0.18rem, transparent 0.2rem),
      radial-gradient(circle at 66% 34%, #0d0e12 0 0.18rem, transparent 0.2rem),
      radial-gradient(circle at 34% 66%, #0d0e12 0 0.18rem, transparent 0.2rem),
      radial-gradient(circle at 66% 66%, #0d0e12 0 0.18rem, transparent 0.2rem),
      #ececff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.2);
    pointer-events: none;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 3.35rem !important;
    border-radius: 1.05rem !important;
    background: var(--wallet-action) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    margin-top: 5.25rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: 4.75rem !important;
    padding: 0.62rem 0.35rem !important;
    border: 0 !important;
    border-radius: 1rem !important;
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button div {
    width: 2.45rem !important;
    height: 2.45rem !important;
    background: rgba(236,236,255,0.95) !important;
    color: var(--wallet-ink) !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button span {
    color: #fff !important;
    font-size: 0.64rem !important;
    line-height: 1.05;
    white-space: normal;
  }

  #dash-tab-home > .w-full.mt-4.mb-2,
  #dash-tab-home > .w-full.mt-4 {
    padding-inline: 0.72rem;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 .glass-card,
  #dash-tab-home > .w-full.mt-4 .glass-card,
  #recent-txns-container .hist-item {
    border-radius: 1.15rem !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 .glass-card {
    background: rgba(255,255,255,0.74) !important;
    padding: 1rem !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 h3 {
    font-size: 0.95rem !important;
  }

  #recent-txns-container .hist-item {
    padding: 1rem !important;
    margin-bottom: 0.58rem !important;
  }

  #recent-txns-container .hist-item .tracker-container,
  #recent-txns-container .hist-item .text-\[9px\] {
    display: none !important;
  }

  #layout-dashboard > div > .fixed.bottom-0 {
    left: 50% !important;
    right: auto !important;
    bottom: max(0.65rem, env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 1.2rem), 27.5rem) !important;
    transform: translateX(-50%);
    border: 0 !important;
    border-radius: 1.45rem !important;
    background: rgba(255,255,255,0.86) !important;
    box-shadow: 0 18px 45px rgba(9,10,13,0.16) !important;
    backdrop-filter: blur(22px);
    padding: 0.35rem !important;
  }

  #layout-dashboard > div > .fixed.bottom-0 > div {
    justify-content: space-between !important;
  }

  #layout-dashboard .mobile-nav-btn {
    min-width: 3rem !important;
    width: 3rem;
    height: 3rem;
    padding: 0 !important;
  }

  #layout-dashboard .mobile-nav-btn i {
    font-size: 1.35rem !important;
  }

  #dash-tab-deposit,
  #dash-tab-transfer,
  #dash-tab-p2p,
  #dash-tab-topup,
  #dash-tab-history,
  #dash-tab-settings {
    max-width: 27.5rem !important;
    min-height: 100%;
    padding: 5.2rem 0.9rem 1rem;
    background: var(--wallet-panel);
    border-radius: 0 0 2rem 2rem;
  }

  #dash-tab-deposit > .glass-card,
  #dash-tab-transfer > .glass-card,
  #dash-tab-p2p > .glass-card,
  #dash-tab-topup > .glass-card,
  #dash-tab-settings > .glass-card {
    border-radius: 1.4rem !important;
    padding: 1.15rem !important;
  }

  #dash-tab-history #full-history-container .hist-item {
    border-radius: 1.15rem !important;
    padding: 1rem !important;
  }

  #chat-widget {
    bottom: calc(5.85rem + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 768px) {
  #dash-tab-home {
    max-width: 72rem !important;
  }

  #digital-card {
    border-radius: 2rem !important;
  }

  #digital-card::before {
    top: 5rem;
  }

  #digital-card::after {
    bottom: 1.45rem;
    left: auto;
    right: 2rem;
    transform: none;
    border-width: 0;
  }

  #digital-card .card-content-3d > .flex:first-child {
    margin-bottom: 4.2rem !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 > button {
    border-radius: 1rem !important;
  }
}
/* QuickSend wallet-phone layout skin end */

/* QuickSend landing polish start */
body[data-page="home"],
html.dark body[data-page="home"] {
  background: var(--wallet-paper) !important;
  color: var(--wallet-ink) !important;
}

body[data-page="home"] #app-content {
  background: var(--wallet-paper) !important;
  color: var(--wallet-ink) !important;
}

body[data-page="home"] > .fixed.inset-0.pointer-events-none {
  display: none !important;
}

body[data-page="home"] #main-nav,
body[data-page="home"] #mobile-menu-dropdown {
  background: rgba(243,245,242,0.94) !important;
  border-color: rgba(9,10,13,0.08) !important;
  box-shadow: 0 12px 32px rgba(9,10,13,0.08) !important;
}

body[data-page="home"] #main-nav .text-body,
body[data-page="home"] #mobile-menu-dropdown .text-body,
body[data-page="home"] .dark\:text-white,
body[data-page="home"] .text-slate-900 {
  color: var(--wallet-ink) !important;
}

body[data-page="home"] .text-body,
body[data-page="home"] p.text-body {
  color: var(--wallet-muted) !important;
}

body[data-page="home"] .text-brand-royal,
body[data-page="home"] .hover\:text-brand-royal:hover {
  color: var(--wallet-ink) !important;
}

body[data-page="home"] .bg-brand-royal,
body[data-page="home"] button.bg-brand-royal,
body[data-page="home"] #chat-btn,
body[data-page="home"] #chat-panel .bg-brand-royal {
  background-color: var(--wallet-black) !important;
  box-shadow: 0 14px 30px rgba(9,10,13,0.18) !important;
}

body[data-page="home"] .border-brand-royal\/20,
body[data-page="home"] .border-brand-royal\/30 {
  border-color: rgba(9,10,13,0.12) !important;
}

body[data-page="home"] .bg-brand-royal\/10,
body[data-page="home"] .bg-brand-royal\/20 {
  background-color: rgba(9,10,13,0.08) !important;
}

body[data-page="home"] .glass-card,
body[data-page="home"] .bg-surface {
  background: rgba(255,255,255,0.74) !important;
  border-color: rgba(9,10,13,0.08) !important;
  color: var(--wallet-ink) !important;
  box-shadow: 0 16px 36px rgba(9,10,13,0.08) !important;
}

body[data-page="home"] .glass-input {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(9,10,13,0.1) !important;
  color: var(--wallet-ink) !important;
}

body[data-page="home"] .glass-input:focus {
  border-color: rgba(95,150,63,0.7) !important;
  box-shadow: 0 0 0 4px rgba(95,150,63,0.16) !important;
}

body[data-page="home"] .text-gradient-blue {
  color: var(--wallet-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

body[data-page="home"] .text-gradient-gold {
  color: var(--wallet-green) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

body[data-page="home"] #view-home > section:first-child {
  background:
    linear-gradient(180deg, rgba(218,217,234,0.55), rgba(243,245,242,0.98) 52%),
    var(--wallet-paper) !important;
}

body[data-page="home"] #view-home > section:first-child h1 {
  color: var(--wallet-ink) !important;
  letter-spacing: 0 !important;
}

body[data-page="home"] #view-home > section:first-child .inline-flex {
  background: rgba(255,255,255,0.74) !important;
  border-color: rgba(95,150,63,0.26) !important;
}

body[data-page="home"] #view-home > section:first-child button[onclick*="register"] {
  background: var(--wallet-black) !important;
  color: #fff !important;
  border-radius: 1.05rem !important;
  box-shadow: 0 16px 30px rgba(9,10,13,0.2) !important;
}

body[data-page="home"] #view-home > section:first-child button[onclick*="login"] {
  background: rgba(255,255,255,0.8) !important;
  color: var(--wallet-ink) !important;
  border-color: rgba(9,10,13,0.12) !important;
}

body[data-page="home"] .phone-mockup {
  background: var(--wallet-black) !important;
  border-color: var(--wallet-black) !important;
  box-shadow: 0 28px 58px rgba(9,10,13,0.28), inset 0 0 0 1px rgba(255,255,255,0.06) !important;
}

body[data-page="home"] .phone-notch {
  background: var(--wallet-black) !important;
}

body[data-page="home"] .phone-mockup > .bg-gradient-to-br {
  background: var(--wallet-lavender) !important;
  color: var(--wallet-ink) !important;
  border-radius: 0 0 1.85rem 1.85rem !important;
  box-shadow: none !important;
}

body[data-page="home"] .phone-mockup > .bg-gradient-to-br .w-8.h-8 {
  background: rgba(255,255,255,0.58) !important;
  border-color: rgba(255,255,255,0.58) !important;
  color: transparent !important;
  position: relative;
}

body[data-page="home"] .phone-mockup > .bg-gradient-to-br .w-8.h-8::after {
  content: "MXN";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--wallet-ink);
  font-size: 0.58rem;
  font-weight: 900;
}

body[data-page="home"] .phone-mockup > .bg-gradient-to-br i,
body[data-page="home"] .phone-mockup > .bg-gradient-to-br p {
  color: rgba(9,10,13,0.62) !important;
}

body[data-page="home"] .phone-mockup > .bg-gradient-to-br h3 {
  color: var(--wallet-ink) !important;
  font-size: clamp(2.25rem, 10vw, 2.85rem) !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
}

body[data-page="home"] .phone-mockup > .flex-1 {
  background: var(--wallet-panel) !important;
}

body[data-page="home"] .phone-mockup > .flex-1 .bg-white,
body[data-page="home"] .phone-mockup > .flex-1 .dark\:bg-white\/5 {
  background: rgba(255,255,255,0.82) !important;
  color: var(--wallet-ink) !important;
}

body[data-page="home"] .phone-mockup > .flex-1 span {
  color: var(--wallet-muted) !important;
}

body[data-page="home"] #calculator-section {
  background: var(--wallet-panel) !important;
  border-color: rgba(9,10,13,0.08) !important;
}

body[data-page="home"] #calculator-section h2,
body[data-page="home"] #calculator-section h3,
body[data-page="home"] #calculator-section .dark\:text-white {
  color: var(--wallet-ink) !important;
}

body[data-page="home"] #calculator-section .text-brand-royal {
  color: var(--wallet-ink) !important;
}

body[data-page="home"] #calculator-section .bg-brand-royal {
  background: var(--wallet-black) !important;
}

body[data-page="home"] #sim-target-currency {
  color: var(--wallet-ink) !important;
}

#digital-card::before {
  content: "MXN";
  min-width: 3.9rem;
  text-align: center;
  white-space: nowrap;
}

#dash-balance {
  white-space: nowrap;
  overflow: visible !important;
}

@media (max-width: 767px) {
  body[data-page="home"] #main-nav .h-20 {
    height: 4rem !important;
  }

  body[data-page="home"] #view-home > section:first-child {
    padding-top: 2.25rem !important;
    padding-bottom: 3rem !important;
  }

  body[data-page="home"] #view-home > section:first-child h1 {
    font-size: clamp(2.45rem, 13vw, 3.7rem) !important;
    line-height: 0.98 !important;
  }

  body[data-page="home"] #view-home > section:first-child p {
    font-size: 0.98rem !important;
  }

  body[data-page="home"] .phone-mockup {
    max-width: min(88vw, 20.5rem) !important;
    height: 35rem !important;
  }

  #digital-card::before {
    top: 7.15rem !important;
    padding: 0.34rem 0.68rem !important;
  }

  #dash-balance {
    margin-top: 2.05rem !important;
    font-size: clamp(3rem, 15vw, 4.15rem) !important;
    letter-spacing: 0 !important;
  }
}

@media (min-width: 768px) {
  body[data-page="home"] #view-home > section:first-child {
    min-height: calc(100vh - 5rem);
    display: flex;
    align-items: center;
  }

  #dash-balance {
    font-size: clamp(2.75rem, 6vw, 4.25rem) !important;
    letter-spacing: 0 !important;
  }
}
/* QuickSend landing polish end */

/* QuickSend mobile-first performance update start */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: auto !important;
}

#pwa-splash {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.app-view.active,
.dash-content-tab,
.animate-fade-in,
.animate-slide-up,
.animate-float {
  animation: none !important;
}

#layout-dashboard .dash-content-tab.hidden {
  display: none !important;
}

#layout-dashboard .dash-content-tab:not(.hidden) {
  display: block !important;
  opacity: 1 !important;
}

#layout-dashboard *,
body[data-page="home"] * {
  transition-duration: 120ms !important;
}

#layout-dashboard button:hover,
body[data-page="home"] button:hover {
  transform: none !important;
}

#digital-card::before {
  display: none !important;
}

#dash-balance {
  display: inline-flex !important;
  align-items: flex-end;
  justify-content: center;
  gap: 0.42rem;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible !important;
  letter-spacing: 0 !important;
  line-height: 0.92;
}

#dash-balance .money-amount {
  display: inline-block;
  min-width: 0;
}

#dash-balance .money-currency {
  display: inline-block;
  color: rgba(9,10,13,0.58);
  font-size: 0.24em;
  font-weight: 900;
  letter-spacing: 0 !important;
  line-height: 1;
  margin-bottom: 0.34em;
}

body[data-page="home"] .phone-mockup > .bg-gradient-to-br h3::after {
  content: " MXN";
  color: rgba(9,10,13,0.58);
  font-size: 0.28em;
  font-weight: 900;
  letter-spacing: 0 !important;
  vertical-align: baseline;
}

body[data-page="home"] #app-content {
  padding-top: 4rem !important;
}

body[data-page="home"] #view-home > section:first-child {
  min-height: auto;
}

body[data-page="home"] #view-home > section:first-child h1 {
  text-wrap: balance;
}

body[data-page="home"] #view-home > section:first-child p {
  max-width: 36rem;
}

body[data-page="home"] .phone-mockup {
  width: min(88vw, 20rem) !important;
  max-width: min(88vw, 20rem) !important;
  height: 32rem !important;
  transform: none !important;
  margin: 0 auto !important;
}

body[data-page="home"] .phone-mockup > .bg-gradient-to-br {
  padding-left: 1.05rem !important;
  padding-right: 1.05rem !important;
}

body[data-page="home"] .phone-mockup > .bg-gradient-to-br h3 {
  font-size: clamp(2.05rem, 11vw, 2.62rem) !important;
}

body[data-page="home"] #calculator-section .glass-card {
  border-radius: 1.4rem !important;
}

#layout-dashboard > div {
  min-width: 0;
}

#layout-dashboard input,
#layout-dashboard select,
#layout-dashboard textarea,
body[data-page="home"] input,
body[data-page="home"] select,
body[data-page="home"] textarea {
  font-size: 16px !important;
}

@media (max-width: 767px) {
  body {
    padding-bottom: 0 !important;
  }

  #layout-dashboard > div {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  #main-scroll {
    height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 calc(6.45rem + env(safe-area-inset-bottom)) !important;
  }

  #layout-dashboard header {
    height: 4.45rem !important;
    padding: 0.82rem 1rem 0 !important;
  }

  #dash-title {
    max-width: min(52vw, 12rem) !important;
    font-size: clamp(0.94rem, 4vw, 1.1rem) !important;
    line-height: 1.02 !important;
  }

  #dash-tab-home,
  #dash-tab-deposit,
  #dash-tab-transfer,
  #dash-tab-p2p,
  #dash-tab-topup,
  #dash-tab-history,
  #dash-tab-settings {
    width: min(100vw, 27.5rem) !important;
    max-width: min(100vw, 27.5rem) !important;
    margin: 0 auto !important;
  }

  #dash-tab-deposit,
  #dash-tab-transfer,
  #dash-tab-p2p,
  #dash-tab-topup,
  #dash-tab-history,
  #dash-tab-settings {
    padding: 5rem 0.82rem 1rem !important;
  }

  #digital-card {
    min-height: clamp(13.8rem, 57vw, 15.35rem) !important;
    padding: 4.85rem 1rem 5.15rem !important;
  }

  #dash-balance {
    margin-top: 1.72rem !important;
    font-size: clamp(2.55rem, 13.4vw, 3.95rem) !important;
  }

  #dash-balance .money-currency {
    font-size: clamp(0.64rem, 2.9vw, 0.92rem);
    margin-bottom: 0.38rem;
  }

  #digital-card button[onclick*="toggleBalance"] {
    top: -3.36rem !important;
    right: 0.05rem !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 {
    gap: clamp(3.45rem, 17vw, 4.2rem) !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) {
    margin-top: 5rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: 4.45rem !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 .glass-card,
  #dash-tab-home > .w-full.mt-4 .glass-card,
  #dash-tab-deposit > .glass-card,
  #dash-tab-transfer > .glass-card,
  #dash-tab-p2p > .glass-card,
  #dash-tab-topup > .glass-card,
  #dash-tab-settings > .glass-card {
    border-radius: 1.2rem !important;
    padding: 1rem !important;
  }

  #layout-dashboard label {
    white-space: normal !important;
  }

  #layout-dashboard .grid.grid-cols-2 {
    gap: 0.75rem !important;
  }

  #layout-dashboard input,
  #layout-dashboard select {
    min-height: 3.05rem !important;
  }

  #recent-txns-container .hist-item,
  #full-history-container .hist-item {
    padding: 0.9rem !important;
    overflow: hidden;
  }

  #recent-txns-container .hist-item > div:first-child,
  #full-history-container .hist-item > div:first-child {
    gap: 0.75rem !important;
  }

  #recent-txns-container .hist-item .text-right,
  #full-history-container .hist-item .text-right {
    min-width: 5.6rem;
  }

  #recent-txns-container .hist-item .text-right p:first-child,
  #full-history-container .hist-item .text-right p:first-child {
    font-size: 1rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  #layout-dashboard > div > .fixed.bottom-0 {
    height: auto !important;
    min-height: 3.85rem !important;
    max-height: 4.25rem !important;
    overflow: hidden !important;
  }

  #layout-dashboard .mobile-nav-btn {
    min-width: 2.85rem !important;
    width: 2.85rem !important;
    height: 2.85rem !important;
  }

  body[data-page="home"] #view-home > section:first-child {
    padding: 1.35rem 0 2.4rem !important;
  }

  body[data-page="home"] #view-home > section:first-child h1 {
    font-size: clamp(2.1rem, 11vw, 3.28rem) !important;
    line-height: 1 !important;
  }

  body[data-page="home"] #view-home > section:first-child p {
    font-size: 0.94rem !important;
    line-height: 1.55 !important;
    padding-inline: 0.15rem;
  }

  body[data-page="home"] #view-home > section:first-child .inline-flex {
    margin-bottom: 1.6rem !important;
  }

  body[data-page="home"] #view-home > section:first-child .flex.flex-col.sm\:flex-row {
    padding-inline: 0 !important;
  }

  body[data-page="home"] #calculator-section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

@media (max-width: 374px) {
  #digital-card {
    padding-left: 0.78rem !important;
    padding-right: 0.78rem !important;
  }

  #dash-balance {
    font-size: clamp(2.22rem, 12vw, 3.05rem) !important;
    gap: 0.28rem;
  }

  #dash-balance .money-currency {
    font-size: 0.6rem;
    margin-bottom: 0.35rem;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 4.7rem !important;
  }

  body[data-page="home"] #view-home > section:first-child h1 {
    font-size: clamp(1.9rem, 10.4vw, 2.6rem) !important;
  }

  body[data-page="home"] .phone-mockup {
    width: min(90vw, 18.4rem) !important;
    height: 30rem !important;
  }
}

@media (min-width: 768px) {
  #pwa-splash {
    display: none !important;
  }

  #main-scroll {
    scroll-behavior: auto !important;
  }

  #dash-balance {
    justify-content: flex-start;
    width: auto;
  }

  #dash-balance .money-currency {
    font-size: 0.22em;
    margin-bottom: 0.36em;
  }

  body[data-page="home"] #app-content {
    padding-top: 5rem !important;
  }

  body[data-page="home"] .phone-mockup {
    width: 19rem !important;
    max-width: 19rem !important;
    height: 36rem !important;
  }
}
/* QuickSend mobile-first performance update end */

/* QuickSend scroll freeze and CVR fixes start */
@media (max-width: 767px) {
  .backdrop-blur-2xl,
  .backdrop-blur-3xl,
  .backdrop-blur-xl,
  .backdrop-blur-md,
  .backdrop-blur-sm,
  .backdrop-blur {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #layout-dashboard .glass-card,
  #layout-dashboard .chat-bg,
  #layout-dashboard .nav-bg,
  body[data-page="home"] .glass-card,
  body[data-page="home"] .nav-bg {
    box-shadow: 0 8px 20px rgba(9,10,13,0.08) !important;
  }

  #layout-dashboard .fixed.inset-0.pointer-events-none,
  body > .fixed.inset-0.pointer-events-none {
    display: none !important;
  }

  #main-scroll {
    overscroll-behavior: contain;
    contain: layout paint style;
  }

  #dash-tab-home > .w-full,
  #dash-tab-deposit,
  #dash-tab-transfer,
  #dash-tab-p2p,
  #dash-tab-topup,
  #dash-tab-history,
  #dash-tab-settings,
  #recent-txns-container,
  #full-history-container {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
  }

  .hist-item {
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 1px 96px;
  }

  #dash-banners-track {
    transition-duration: 180ms !important;
  }

  .animate-pulse,
  .animate-bounce,
  .animate-ping,
  .animate-pulse-glow,
  .chart-path {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* QuickSend scroll freeze and CVR fixes end */

/* QuickSend responsive balance and notification fix start */
@media (max-width: 767px) {
  body[data-dash-tab="home"] #dash-title {
    display: none !important;
  }

  #layout-dashboard header {
    height: 4.25rem !important;
    padding: 0.82rem 0.95rem 0 !important;
    align-items: flex-start !important;
  }

  #layout-dashboard header .flex.items-center.gap-3.md\:gap-4 {
    gap: 0.72rem !important;
    margin-left: auto !important;
  }

  #layout-dashboard header button,
  #layout-dashboard header [onclick*="settings"] {
    width: 2.95rem !important;
    height: 2.95rem !important;
  }

  #dash-tab-home {
    max-width: 100% !important;
    border-radius: 0 0 1.85rem 1.85rem !important;
    padding-bottom: 1rem !important;
  }

  #dash-tab-home > .grid:first-child {
    padding: 0 0.62rem 0.95rem !important;
    border-radius: 0 0 1.85rem 1.85rem !important;
  }

  #digital-card {
    min-height: clamp(10.6rem, 46vw, 12.25rem) !important;
    padding: 3.95rem 0.92rem 3.58rem !important;
    border-radius: 0 0 1.42rem 1.42rem !important;
  }

  #digital-card .card-content-3d {
    min-height: 0 !important;
  }

  #digital-card p[data-i18n="bal_avail"] {
    top: -2.82rem !important;
    left: 0.08rem !important;
    max-width: min(13rem, 48vw) !important;
    font-size: 0.58rem !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    color: rgba(9,10,13,0.62) !important;
  }

  #digital-card p[data-i18n="bal_avail"]::before {
    font-size: 0.74rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  #digital-card button[onclick*="toggleBalance"] {
    top: -2.85rem !important;
    right: 0 !important;
  }

  #dash-balance {
    margin-top: 0.72rem !important;
    font-size: clamp(1.9rem, 9.8vw, 2.82rem) !important;
    line-height: 0.95 !important;
    gap: 0.24rem !important;
    text-shadow: 0 6px 14px rgba(9,10,13,0.16) !important;
  }

  #dash-balance .money-currency {
    font-size: clamp(0.52rem, 2.2vw, 0.68rem) !important;
    margin-bottom: 0.34rem !important;
    color: rgba(9,10,13,0.54) !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 {
    left: 0.62rem !important;
    right: 0.62rem !important;
    bottom: -3.05rem !important;
    gap: clamp(2.9rem, 13.8vw, 3.35rem) !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 > button {
    height: 2.72rem !important;
    border-radius: 0.9rem !important;
    font-size: 0.73rem !important;
    gap: 0.42rem !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3::after {
    width: 2.72rem !important;
    height: 2.72rem !important;
    border-radius: 0.86rem !important;
  }

  #digital-card::after {
    bottom: -0.72rem !important;
    font-size: 0.62rem !important;
    padding: 0.22rem 0.56rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) {
    margin-top: 3.75rem !important;
    gap: 0.56rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: 4.35rem !important;
    border-radius: 0.9rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button div {
    width: 2.28rem !important;
    height: 2.28rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button span {
    font-size: 0.6rem !important;
  }

  #notif-dropdown {
    inset: 4.65rem 0.68rem auto 0.68rem !important;
    top: 4.65rem !important;
    max-height: min(58vh, 25rem) !important;
    border-radius: 1.14rem !important;
    background: #eef0ed !important;
    color: #090a0d !important;
    border: 1px solid rgba(9,10,13,0.14) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.24) !important;
    overflow: hidden !important;
  }

  #notif-dropdown > div:first-child {
    padding: 0.95rem 1rem !important;
    background: #eef0ed !important;
    border-color: rgba(9,10,13,0.1) !important;
  }

  #notif-dropdown > div:first-child span {
    color: #090a0d !important;
    font-size: 0.9rem !important;
  }

  #notif-dropdown > div:first-child button {
    width: 2.4rem !important;
    height: 2.4rem !important;
    background: rgba(9,10,13,0.08) !important;
    color: #090a0d !important;
    border-radius: 0.78rem !important;
  }

  #notif-list {
    padding: 0.72rem !important;
    background: #07090f !important;
    color: #090a0d !important;
  }
}

@media (max-width: 390px) {
  #dash-balance {
    font-size: clamp(1.74rem, 9vw, 2.34rem) !important;
  }

  #dash-balance .money-currency {
    font-size: 0.5rem !important;
    margin-bottom: 0.28rem !important;
  }

  #digital-card {
    min-height: 10.35rem !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 {
    left: 0.5rem !important;
    right: 0.5rem !important;
    gap: 2.68rem !important;
  }
}

@media (min-width: 768px) {
  #dash-balance {
    max-width: 100%;
  }
}

#notif-dropdown {
  color: #090a0d !important;
}

#notif-list {
  scrollbar-width: thin;
}

#notif-list > p {
  color: #30343b !important;
  background: #f6f7f4 !important;
  border-color: rgba(9,10,13,0.1) !important;
}

.notif-item {
  margin-bottom: 0.62rem;
  padding: 0.85rem;
  border-radius: 1rem;
  background: #f7f8f4 !important;
  border: 1px solid rgba(9,10,13,0.1) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08) !important;
  color: #090a0d !important;
  opacity: 1 !important;
  pointer-events: auto;
}

.notif-item.is-unread {
  border-left: 0.26rem solid var(--brand-royal, #2563eb) !important;
  background: #ffffff !important;
}

.notif-item.is-read {
  opacity: 0.88 !important;
}

.notif-row {
  display: flex;
  gap: 0.76rem;
  align-items: flex-start;
}

.notif-icon {
  flex: 0 0 auto;
  margin-top: 0.12rem;
  font-size: 1.35rem;
}

.notif-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.notif-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}

.notif-title {
  margin: 0;
  color: #090a0d !important;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.notif-delete {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.62rem;
  background: rgba(9,10,13,0.08);
  color: #090a0d;
}

.notif-message {
  margin: 0.34rem 0 0;
  color: #30343b !important;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.notif-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.64rem;
  margin-top: 0.62rem;
  color: #6a707a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.61rem;
  line-height: 1.2;
}

.notif-meta > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.notif-read-btn {
  flex: 0 0 auto;
  width: max-content !important;
  min-width: max-content !important;
  border-radius: 999px;
  padding: 0.35rem 0.58rem;
  background: rgba(37,99,235,0.12);
  color: #1d4ed8;
  font-family: var(--font-body, inherit);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 374px) {
  .notif-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* QuickSend responsive balance and notification fix end */

/* QuickSend senior dashboard polish start */
@media (max-width: 767px) {
  body {
    background: #edf0ed !important;
  }

  #main-scroll {
    padding: 0 0 calc(6.8rem + env(safe-area-inset-bottom)) !important;
    background: #edf0ed !important;
  }

  #dash-tab-home {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
  }

  #dash-tab-home > .grid:first-child {
    display: block !important;
    margin: 0 !important;
    padding: 0 0.88rem 1.05rem !important;
    background: #050506 !important;
    border-radius: 0 0 1.9rem 1.9rem !important;
    box-shadow: none !important;
  }

  #dash-tab-home > .grid:first-child > div:first-child {
    margin: 0 -0.88rem 0.82rem !important;
  }

  #digital-card {
    min-height: 13.1rem !important;
    padding: 4.2rem 1.05rem 1.05rem !important;
    border-radius: 0 0 1.35rem 1.35rem !important;
    background: #deddf0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #digital-card .card-content-3d {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #digital-card .card-content-3d > .flex:first-child {
    margin: 0 !important;
    min-height: 0 !important;
  }

  #digital-card p[data-i18n="bal_avail"] {
    top: -2.9rem !important;
    left: 0.05rem !important;
    max-width: min(14.6rem, 54vw) !important;
    color: rgba(9,10,13,0.58) !important;
    font-size: 0.68rem !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  #digital-card p[data-i18n="bal_avail"]::before {
    font-size: 0.9rem !important;
    line-height: 1 !important;
    margin-bottom: 0.04rem;
    letter-spacing: 0 !important;
  }

  #digital-card button[onclick*="toggleBalance"] {
    top: -2.9rem !important;
    right: 0 !important;
    width: 2.95rem !important;
    height: 2.95rem !important;
    background: rgba(255,255,255,0.48) !important;
  }

  #dash-balance {
    margin-top: 0.45rem !important;
    font-size: clamp(2.18rem, 10.6vw, 3rem) !important;
    line-height: 0.92 !important;
    gap: 0.24rem !important;
    color: #050506 !important;
    text-shadow: 0 6px 14px rgba(9,10,13,0.14) !important;
  }

  #dash-balance .money-currency {
    font-size: clamp(0.56rem, 2.3vw, 0.72rem) !important;
    margin-bottom: 0.42rem !important;
    color: rgba(9,10,13,0.54) !important;
  }

  #digital-card::after {
    bottom: 4.34rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 2px solid #050506 !important;
    box-shadow: 0 6px 12px rgba(5,5,6,0.18) !important;
    font-size: 0.62rem !important;
    padding: 0.2rem 0.56rem !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 1.14rem !important;
    gap: 0.72rem !important;
    z-index: 7 !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3::after {
    display: none !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 > button {
    height: 3rem !important;
    border-radius: 1rem !important;
    background: #666c76 !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    gap: 0.48rem !important;
    box-shadow: none !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.62rem !important;
    margin-top: 0.78rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: 4.2rem !important;
    padding: 0.58rem 0.3rem !important;
    border-radius: 1rem !important;
    background: #171718 !important;
    color: #fff !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button div {
    width: 2.25rem !important;
    height: 2.25rem !important;
    background: #efefff !important;
    color: #11131a !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button span {
    color: #fff !important;
    font-size: 0.58rem !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  #dash-banners-container {
    width: calc(100% - 1.4rem) !important;
    margin: 1rem auto 0 !important;
    border-radius: 1.25rem !important;
    aspect-ratio: 2.05 / 1 !important;
    background: #090b10 !important;
    box-shadow: 0 14px 28px rgba(12,15,18,0.12) !important;
  }

  #dash-banners-track img {
    object-fit: contain !important;
    border-radius: 1.25rem !important;
  }

  #dash-banners-dots {
    bottom: 0.54rem !important;
    padding: 0.22rem 0.52rem !important;
    background: rgba(5,5,6,0.55) !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 {
    width: auto !important;
    margin: 1rem 0.85rem 0 !important;
    padding-bottom: 1rem !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 .glass-card {
    border-radius: 1.3rem !important;
    padding: 1rem !important;
    background: #fff !important;
    border: 1px solid rgba(12,15,18,0.08) !important;
    box-shadow: 0 12px 26px rgba(12,15,18,0.08) !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 .glass-card > .absolute {
    width: 5.25rem !important;
    height: 5.25rem !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 h3 {
    font-size: 1rem !important;
    line-height: 1.18 !important;
    margin-bottom: 0.86rem !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 .grid {
    gap: 0.78rem !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 label {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 input {
    min-height: 3rem !important;
    border-radius: 1rem !important;
    font-size: 1rem !important;
  }

  #dash-tab-home > .w-full.mt-4.mb-2 .bg-gray-100 {
    border-radius: 1rem !important;
    padding: 0.82rem !important;
  }

  #dash-tab-home > .w-full.mt-4 {
    width: auto !important;
    margin: 1rem 0.85rem 0 !important;
    padding-bottom: 6.2rem !important;
  }

  #layout-dashboard nav.fixed.bottom-0 {
    left: 50% !important;
    right: auto !important;
    bottom: max(0.55rem, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 1.1rem), 26rem) !important;
    height: 4.35rem !important;
    padding: 0.38rem 0.48rem !important;
    border-radius: 1.5rem !important;
    justify-content: space-between !important;
    overflow: visible !important;
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(12,15,18,0.08) !important;
    box-shadow: 0 16px 36px rgba(10,12,16,0.2) !important;
  }

  #layout-dashboard .mobile-nav-btn {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 1rem !important;
    padding: 0.35rem !important;
  }

  #layout-dashboard .mobile-nav-btn i {
    font-size: 1.34rem !important;
  }

  #chat-widget {
    right: 0.82rem !important;
    bottom: calc(5.35rem + env(safe-area-inset-bottom)) !important;
  }

  #chat-btn {
    width: 3.2rem !important;
    height: 3.2rem !important;
    box-shadow: 0 12px 28px rgba(11,77,255,0.35) !important;
  }

  #chat-btn i {
    font-size: 1.55rem !important;
  }
}

@media (max-width: 390px) {
  #digital-card {
    min-height: 12.72rem !important;
    padding-left: 0.88rem !important;
    padding-right: 0.88rem !important;
  }

  #dash-balance {
    font-size: clamp(1.96rem, 10.1vw, 2.5rem) !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 {
    gap: 0.58rem !important;
  }

  #digital-card .card-content-3d > .flex.items-center.gap-3 > button {
    font-size: 0.7rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) {
    gap: 0.52rem !important;
  }
}

@media (min-width: 768px) {
  #dash-banners-container {
    border-radius: 1.6rem !important;
  }
}
/* QuickSend senior dashboard polish end */

/* QuickSend premium landing redesign start */
:root {
  --quicksend-ink: #07090f;
  --quicksend-ink-soft: #191d23;
  --quicksend-paper: #f7f9f2;
  --quicksend-panel: #ffffff;
  --quicksend-muted: #66716d;
  --quicksend-line: rgba(7, 9, 15, 0.1);
  --quicksend-green: #16a36b;
  --quicksend-green-dark: #0c724e;
  --quicksend-lime: #d5f36b;
  --quicksend-gold: #f0b735;
  --quicksend-blue-soft: #dce9ff;
  --quicksend-shadow: 0 24px 60px rgba(10, 14, 18, 0.14);
}

body[data-page="home"],
html.dark body[data-page="home"],
body[data-page="home"] #app-content {
  background: var(--quicksend-paper) !important;
  color: var(--quicksend-ink) !important;
}

body[data-page="home"] #app-content {
  padding-top: 4.25rem !important;
}

body[data-page="home"] > .fixed.inset-0.pointer-events-none {
  display: none !important;
}

body[data-page="home"] #main-nav {
  background: rgba(247, 249, 242, 0.92) !important;
  border-color: var(--quicksend-line) !important;
  box-shadow: 0 10px 30px rgba(7, 9, 15, 0.08) !important;
}

body[data-page="home"] #main-nav .h-20 {
  height: 4.25rem !important;
}

body[data-page="home"] #main-nav img,
body[data-page="home"] #mobile-menu-dropdown img {
  background: var(--quicksend-ink);
  border: 0 !important;
}

body[data-page="home"] #main-nav button,
body[data-page="home"] #main-nav select,
body[data-page="home"] #mobile-menu-dropdown button,
body[data-page="home"] #mobile-menu-dropdown select {
  color: var(--quicksend-ink) !important;
}

body[data-page="home"] #main-nav button[onclick*="register"],
body[data-page="home"] #mobile-menu-dropdown button[onclick*="register"] {
  background: var(--quicksend-ink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

body[data-page="home"] #mobile-menu-dropdown {
  top: 4.25rem !important;
  background: rgba(247, 249, 242, 0.98) !important;
  border-color: var(--quicksend-line) !important;
}

.quicksend-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
}

.quicksend-brand-text strong {
  color: var(--quicksend-ink);
  font-size: 1rem;
  letter-spacing: 0;
}

.quicksend-brand-text small {
  color: var(--quicksend-green-dark);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quicksend-container {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
}

.quicksend-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 4vw, 4rem) 0 2rem;
  background: var(--quicksend-paper) !important;
}

.quicksend-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.quicksend-hero__bg::before {
  content: "";
  position: absolute;
  inset: auto -12rem -10rem auto;
  width: min(58vw, 42rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--quicksend-blue-soft) 72%, transparent);
  opacity: 0.62;
}

.quicksend-hero__mark {
  position: absolute;
  right: clamp(1rem, 7vw, 8rem);
  top: clamp(1rem, 5vw, 4rem);
  width: clamp(8rem, 22vw, 18rem);
  opacity: 0.08;
  transform: rotate(-8deg);
}

.quicksend-hero__grid {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
}

.quicksend-hero__copy {
  max-width: 44rem;
  z-index: 2;
}

.quicksend-eyebrow,
.quicksend-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--quicksend-green-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quicksend-eyebrow {
  padding: 0.48rem 0.72rem;
  border: 1px solid rgba(22, 163, 107, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.quicksend-eyebrow__dot {
  width: 0.54rem;
  height: 0.54rem;
  border-radius: 50%;
  background: var(--quicksend-green);
  box-shadow: 0 0 0 0.32rem rgba(22, 163, 107, 0.12);
}

.quicksend-hero__title {
  margin: 1rem 0 0.7rem;
  color: var(--quicksend-ink) !important;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(3.2rem, 15vw, 6.5rem);
  line-height: 0.86;
  letter-spacing: 0 !important;
}

.quicksend-hero__title span {
  display: block;
}

.quicksend-hero__title span:last-child {
  color: var(--quicksend-green-dark);
  font-size: 0.58em;
  line-height: 1.08;
}

.quicksend-hero__lead {
  margin: 0;
  color: var(--quicksend-ink);
  font-size: clamp(1.15rem, 3.6vw, 2rem);
  font-weight: 800;
  line-height: 1.12;
  max-width: 34rem;
}

.quicksend-hero__desc {
  margin: 1rem 0 0;
  max-width: 38rem;
  color: var(--quicksend-muted) !important;
  font-size: clamp(0.98rem, 1.7vw, 1.12rem);
  line-height: 1.62;
}

.quicksend-actions {
  display: flex;
  gap: 0.72rem;
  margin-top: 1.45rem;
  flex-wrap: wrap;
}

.quicksend-btn {
  min-height: 3.15rem;
  padding: 0.92rem 1.1rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 900;
  font-size: 0.94rem;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.quicksend-btn--primary {
  background: var(--quicksend-ink) !important;
  color: #fff !important;
  box-shadow: 0 18px 36px rgba(7, 9, 15, 0.18) !important;
}

.quicksend-btn--secondary {
  background: #fff !important;
  color: var(--quicksend-ink) !important;
  border: 1px solid var(--quicksend-line) !important;
  box-shadow: none !important;
}

.quicksend-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.quicksend-trust-row > span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.55rem 0.68rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--quicksend-ink);
  font-size: 0.74rem;
  font-weight: 850;
}

.quicksend-trust-row i,
.quicksend-checks i {
  color: var(--quicksend-green);
}

.quicksend-product {
  justify-self: center;
  width: min(100%, 22rem);
}

.quicksend-device {
  position: relative;
  border: 0.58rem solid var(--quicksend-ink);
  border-radius: 2.1rem;
  background: var(--quicksend-ink);
  box-shadow: var(--quicksend-shadow);
  overflow: hidden;
}

.quicksend-device__top {
  height: 2.3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 0.8rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.quicksend-device__top > span:last-child {
  justify-self: end;
  display: flex;
  gap: 0.22rem;
}

.quicksend-device__pill {
  width: 4.8rem;
  height: 1.38rem;
  border-radius: 999px;
  background: #000;
}

.quicksend-wallet {
  background: #e8e9f7;
  color: var(--quicksend-ink);
  border-radius: 0 0 1.6rem 1.6rem;
  padding: 1rem;
  min-height: 14.5rem;
}

.quicksend-wallet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.quicksend-wallet__header p,
.quicksend-wallet__label {
  margin: 0;
  color: rgba(7, 9, 15, 0.58);
  font-size: 0.67rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quicksend-wallet__header strong {
  font-size: 1.05rem;
}

.quicksend-wallet__header button {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.54);
  color: var(--quicksend-ink);
}

.quicksend-wallet__label {
  margin-top: 2rem;
}

.quicksend-wallet__amount {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  margin-top: 0.28rem;
  color: var(--quicksend-ink);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0 !important;
}

.quicksend-wallet__amount span {
  font-size: clamp(2.25rem, 8vw, 3.35rem);
  white-space: nowrap;
}

.quicksend-wallet__amount small {
  margin-bottom: 0.3rem;
  color: rgba(7, 9, 15, 0.56);
  font-size: clamp(0.72rem, 2.6vw, 0.95rem);
  font-weight: 900;
  letter-spacing: 0 !important;
}

.quicksend-wallet__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.quicksend-wallet__actions button,
.quicksend-mini-grid button {
  min-width: 0;
  border: 0;
  border-radius: 1rem;
  font-weight: 900;
  letter-spacing: 0;
}

.quicksend-wallet__actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 3.1rem;
  background: #626974;
  color: #fff;
}

.quicksend-device__body {
  background: #f1f3ef;
  padding: 1rem;
}

.quicksend-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.quicksend-mini-grid button {
  min-height: 5.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  background: #fff;
  color: var(--quicksend-ink);
  font-size: 0.68rem;
}

.quicksend-mini-grid i {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8e9f7;
  font-size: 1.1rem;
}

.quicksend-activity {
  margin-top: 0.8rem;
  min-height: 4.2rem;
  border-radius: 1rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.78rem;
  gap: 0.7rem;
}

.quicksend-activity > div {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
}

.quicksend-activity strong {
  font-size: 0.76rem;
  color: var(--quicksend-green-dark);
}

.quicksend-activity small {
  display: block;
  color: var(--quicksend-muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.quicksend-status-dot {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--quicksend-lime);
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
}

.quicksend-status-dot::after {
  content: "";
  position: absolute;
  inset: 0.68rem;
  border-radius: 50%;
  background: var(--quicksend-green-dark);
}

.quicksend-security-chip {
  margin: 0.7rem auto 0;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: var(--quicksend-ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.quicksend-services,
.quicksend-security,
.quicksend-calculator,
.quicksend-final {
  padding: clamp(2.6rem, 7vw, 5.5rem) 0;
}

.quicksend-services {
  background: #fff;
}

.quicksend-section-head {
  max-width: 43rem;
}

.quicksend-section-head h2,
.quicksend-security h2,
.quicksend-calculator h2,
.quicksend-final h2 {
  margin: 0.65rem 0 0;
  color: var(--quicksend-ink) !important;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 0.98;
  letter-spacing: 0 !important;
}

.quicksend-section-head p,
.quicksend-security p,
.quicksend-calculator p,
.quicksend-final p {
  color: var(--quicksend-muted) !important;
  font-size: 1rem;
  line-height: 1.6;
}

.quicksend-service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.quicksend-service-card {
  border: 1px solid var(--quicksend-line);
  border-radius: 1.15rem;
  padding: 1.15rem;
  background: #f9faf6;
}

.quicksend-service-card > i {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.85rem;
  display: grid;
  place-items: center;
  background: var(--quicksend-ink);
  color: #fff;
  font-size: 1.35rem;
}

.quicksend-service-card h3,
.quicksend-security-list h3 {
  margin: 0.9rem 0 0;
  color: var(--quicksend-ink);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.1;
}

.quicksend-service-card p,
.quicksend-security-list p {
  margin: 0.55rem 0 0;
  color: var(--quicksend-muted) !important;
  font-size: 0.92rem;
  line-height: 1.5;
}

.quicksend-service-card button {
  margin-top: 1rem;
  color: var(--quicksend-green-dark);
  font-size: 0.86rem;
  font-weight: 900;
}

.quicksend-security {
  background: var(--quicksend-ink);
  color: #fff;
}

.quicksend-security .quicksend-kicker {
  color: var(--quicksend-lime);
}

.quicksend-security h2,
.quicksend-security p {
  color: #fff !important;
}

.quicksend-security__grid {
  display: grid;
  gap: 1.6rem;
}

.quicksend-security-list {
  display: grid;
  gap: 0.85rem;
}

.quicksend-security-list article {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1rem;
  background: rgba(255,255,255,0.05);
}

.quicksend-security-list i {
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 auto;
  border-radius: 0.85rem;
  display: grid;
  place-items: center;
  background: var(--quicksend-lime);
  color: var(--quicksend-ink);
  font-size: 1.3rem;
}

.quicksend-security-list h3 {
  color: #fff;
  margin-top: 0;
}

.quicksend-security-list p {
  color: rgba(255,255,255,0.72) !important;
}

.quicksend-calculator {
  background: var(--quicksend-paper) !important;
}

.quicksend-calculator__grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.quicksend-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.quicksend-checks span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.86rem;
  font-weight: 900;
}

.quicksend-calc-card {
  border: 1px solid var(--quicksend-line);
  border-radius: 1.25rem;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 16px 38px rgba(7, 9, 15, 0.08);
}

.quicksend-calc-card h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  color: var(--quicksend-ink);
  font-size: 1.05rem;
  font-weight: 900;
}

.quicksend-calc-card h3 i {
  color: var(--quicksend-gold);
}

.quicksend-form-stack {
  display: grid;
  gap: 0.85rem;
}

.quicksend-form-stack label {
  display: grid;
  gap: 0.48rem;
}

.quicksend-form-stack label > span,
.quicksend-rate-box span {
  color: var(--quicksend-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quicksend-form-stack select {
  justify-self: end;
  margin-top: -2rem;
  color: var(--quicksend-green-dark);
  font-weight: 900;
  background: transparent;
  outline: none;
}

.quicksend-input-wrap {
  position: relative;
}

.quicksend-input-wrap i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--quicksend-green-dark);
  font-size: 1.2rem;
}

.quicksend-input-wrap input {
  width: 100%;
  min-height: 3.6rem;
  border: 1px solid var(--quicksend-line);
  border-radius: 1rem;
  background: #fbfcf8;
  color: var(--quicksend-ink);
  padding: 0.85rem 1rem 0.85rem 3rem;
  font-size: 1.2rem !important;
  font-weight: 900;
  outline: none;
}

.quicksend-input-wrap input:focus {
  border-color: rgba(22, 163, 107, 0.6);
  box-shadow: 0 0 0 4px rgba(22, 163, 107, 0.12);
}

.quicksend-input-wrap--result input {
  color: var(--quicksend-green-dark);
}

.quicksend-swap-dot {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  justify-self: center;
  background: var(--quicksend-ink);
  color: #fff;
}

.quicksend-rate-box {
  display: grid;
  gap: 0.62rem;
  border-radius: 1rem;
  background: #f1f4ef;
  padding: 0.9rem;
}

.quicksend-rate-box > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.quicksend-rate-box strong {
  color: var(--quicksend-ink);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.9rem;
  text-align: right;
}

.quicksend-final {
  background: #fff;
}

.quicksend-final .quicksend-container {
  display: grid;
  gap: 1.1rem;
  align-items: center;
}

body[data-page="home"] #chat-btn {
  background: var(--quicksend-ink) !important;
  box-shadow: 0 14px 28px rgba(7, 9, 15, 0.22) !important;
}

body[data-page="home"] #chat-panel .bg-brand-royal {
  background: var(--quicksend-ink) !important;
}

@media (max-width: 374px) {
  .quicksend-container {
    width: min(100% - 1.3rem, 1180px);
  }

  .quicksend-hero__title {
    font-size: clamp(2.7rem, 14vw, 3.05rem);
  }

  .quicksend-wallet__amount span {
    font-size: 2rem;
  }

  .quicksend-wallet__actions button,
  .quicksend-mini-grid button {
    font-size: 0.62rem;
  }
}

@media (max-width: 767px) {
  body[data-page="home"] #main-nav .w-10.h-10 {
    width: 2.4rem !important;
    height: 2.4rem !important;
  }

  .quicksend-actions {
    flex-direction: column;
  }

  .quicksend-btn {
    width: 100%;
  }

  .quicksend-product {
    width: min(100%, 22.5rem);
  }
}

@media (min-width: 768px) {
  body[data-page="home"] #app-content {
    padding-top: 4.75rem !important;
  }

  body[data-page="home"] #main-nav .h-20 {
    height: 4.75rem !important;
  }

  .quicksend-hero {
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  .quicksend-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.72fr);
  }

  .quicksend-service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quicksend-security__grid,
  .quicksend-calculator__grid,
  .quicksend-final .quicksend-container {
    grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1fr);
  }

  .quicksend-calc-card {
    padding: 1.35rem;
  }

  .quicksend-final .quicksend-actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1120px) {
  .quicksend-hero {
    min-height: min(700px, calc(100dvh - 4.75rem));
    display: flex;
    align-items: center;
  }
}
/* QuickSend premium landing redesign end */

/* QuickSend reference wallet layout start */
:root {
  --ref-bg: #e8e8e7;
  --ref-surface: #ffffff;
  --ref-card: #f9f9ff;
  --ref-ink: #1b1d2a;
  --ref-muted: #7a7f93;
  --ref-line: rgba(62, 67, 91, 0.1);
  --ref-blue: #5660f3;
  --ref-blue-dark: #454dde;
  --ref-purple: #786cf1;
  --ref-green: #21b77a;
  --ref-red: #ec5e69;
  --ref-yellow: #f5bd4f;
  --ref-shadow: 0 28px 70px rgba(65, 69, 96, 0.15);
}

body[data-page="home"],
html.dark body[data-page="home"],
body[data-page="home"] #app-content {
  background: var(--ref-bg) !important;
  color: var(--ref-ink) !important;
}

body[data-page="home"] #app-content {
  padding-top: 4.35rem !important;
}

body[data-page="home"] #main-nav {
  background: rgba(232, 232, 231, 0.9) !important;
  border-color: rgba(30, 33, 45, 0.06) !important;
  box-shadow: none !important;
}

body[data-page="home"] #main-nav .h-20 {
  height: 4.35rem !important;
}

body[data-page="home"] #main-nav button,
body[data-page="home"] #main-nav select,
body[data-page="home"] #mobile-menu-dropdown button,
body[data-page="home"] #mobile-menu-dropdown select {
  color: var(--ref-ink) !important;
}

body[data-page="home"] #main-nav button[onclick*="register"],
body[data-page="home"] #mobile-menu-dropdown button[onclick*="register"] {
  background: var(--ref-blue) !important;
  color: #fff !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 14px 28px rgba(86, 96, 243, 0.22) !important;
}

body[data-page="home"] #mobile-menu-dropdown {
  top: 4.35rem !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--ref-line) !important;
}

.ref-container {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
}

.ref-hero {
  min-height: calc(100dvh - 4.35rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 2.3rem 0 3rem;
}

.ref-hero__grid {
  display: grid;
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
}

.ref-copy {
  max-width: 34rem;
}

.ref-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.1rem;
  padding: 0.46rem 0.78rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: var(--ref-blue-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(70, 74, 92, 0.06);
}

.ref-copy h1 {
  margin: 1rem 0 0.7rem;
  color: var(--ref-ink) !important;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(3.2rem, 11vw, 6.2rem);
  line-height: 0.88;
  letter-spacing: 0 !important;
}

.ref-copy h1 span {
  display: block;
}

.ref-copy h1 span:last-child {
  color: var(--ref-blue);
  font-size: 0.58em;
  line-height: 1.05;
}

.ref-lead {
  margin: 0;
  color: var(--ref-ink) !important;
  font-size: clamp(1.08rem, 2.6vw, 1.65rem);
  line-height: 1.16;
  font-weight: 900;
}

.ref-desc {
  margin: 1rem 0 0;
  color: var(--ref-muted) !important;
  font-size: 1rem;
  line-height: 1.65;
}

.ref-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.ref-btn {
  min-height: 3.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  padding: 0.85rem 1.08rem;
  border-radius: 1rem;
  font-size: 0.94rem;
  font-weight: 900;
}

.ref-btn--primary {
  background: var(--ref-blue) !important;
  color: #fff !important;
  box-shadow: 0 18px 34px rgba(86, 96, 243, 0.28) !important;
}

.ref-btn--light {
  background: #fff !important;
  color: var(--ref-ink) !important;
  border: 1px solid var(--ref-line) !important;
  box-shadow: 0 14px 28px rgba(64, 68, 89, 0.07) !important;
}

.ref-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.3rem);
}

.ref-phone {
  width: min(100%, 18.4rem);
  border-radius: 2.2rem;
  background: var(--ref-surface);
  box-shadow: var(--ref-shadow);
  color: var(--ref-ink);
  padding: 0.84rem;
}

.ref-phone--main {
  min-height: 34.2rem;
}

.ref-phone--side {
  width: min(100%, 17.2rem);
  min-height: 34rem;
  margin-top: 3.2rem;
}

.ref-phone__top,
.ref-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-bottom: 0.78rem;
}

.ref-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.ref-user small,
.ref-mini-header small,
.ref-balance-card p,
.ref-activity-item small {
  display: block;
  color: var(--ref-muted);
  font-size: 0.56rem;
  font-weight: 800;
}

.ref-user strong,
.ref-mini-header strong {
  display: block;
  color: var(--ref-ink);
  font-size: 0.76rem;
  line-height: 1.1;
}

.ref-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: #f1d3c3;
  color: #8c4b2a;
  font-size: 0.68rem;
  font-weight: 900;
}

.ref-avatar--orange { background: #f2b56c; color: #7d4214; }
.ref-avatar--yellow { background: #f4c44e; color: #755900; }
.ref-avatar--blue { background: #b9d7f7; color: #27527c; }
.ref-avatar--green { background: #bde8d1; color: #236c4b; }
.ref-avatar--pink { background: #f2c6d4; color: #7a2e49; }

.ref-phone__top button {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(86, 96, 243, 0.22);
  color: var(--ref-blue);
}

.ref-balance-card {
  position: relative;
  min-height: 8.45rem;
  border-radius: 1rem;
  padding: 1rem;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15), transparent 30%),
    linear-gradient(135deg, var(--ref-blue), var(--ref-purple));
}

.ref-balance-card p,
.ref-balance-card small {
  color: rgba(255,255,255,0.72) !important;
}

.ref-balance-card strong {
  display: block;
  margin-top: 0.18rem;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.75rem, 5vw, 2rem);
  line-height: 1;
  letter-spacing: 0 !important;
}

.ref-balance-card > button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.ref-balance-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.42rem;
  margin-top: 0.85rem;
}

.ref-balance-actions button,
.ref-service-icons button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.26rem;
  font-size: 0.46rem;
  font-weight: 800;
}

.ref-balance-actions i {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ref-blue);
  font-size: 0.95rem;
}

.ref-service-panel,
.ref-send-tile,
.ref-transfer-strip {
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(69, 76, 111, 0.06);
}

.ref-service-panel {
  margin-top: 0.8rem;
  padding: 0.85rem;
}

.ref-service-panel h3,
.ref-list-head h3,
.ref-transfer-strip h3 {
  margin: 0;
  color: var(--ref-ink);
  font-size: 0.76rem;
  font-weight: 900;
}

.ref-service-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.66rem 0.5rem;
  margin-top: 0.78rem;
}

.ref-service-icons i {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.55rem;
  display: grid;
  place-items: center;
  color: var(--ref-blue);
  background: #f1f0ff;
  font-size: 0.95rem;
}

.ref-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.85rem 0 0.48rem;
}

.ref-list-head button {
  color: var(--ref-muted);
  font-size: 0.58rem;
  font-weight: 900;
}

.ref-activity-list {
  display: grid;
  gap: 0.48rem;
}

.ref-activity-item {
  min-height: 3.15rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem;
  border-radius: 0.82rem;
  background: #fff;
  box-shadow: 0 12px 24px rgba(69, 76, 111, 0.05);
}

.ref-activity-item strong {
  display: block;
  color: var(--ref-ink);
  font-size: 0.66rem;
  line-height: 1.08;
}

.ref-activity-item b {
  font-size: 0.64rem;
  font-weight: 900;
}

.ref-activity-item .credit { color: #2a92df; }
.ref-activity-item .debit { color: var(--ref-red); }

.ref-bottom-nav {
  height: 3.2rem;
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #a2a6b6;
}

.ref-bottom-nav span {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--ref-blue);
  transform: translateY(-0.45rem);
  box-shadow: 0 14px 28px rgba(86, 96, 243, 0.26);
}

.ref-mini-header {
  padding: 0.4rem 0.28rem 0;
}

.ref-mini-header > div:last-child {
  text-align: right;
}

.ref-send-tile {
  width: 100%;
  min-height: 5rem;
  display: grid;
  place-items: center;
  gap: 0.34rem;
  color: var(--ref-muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.ref-send-tile i {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ref-blue);
}

.ref-transfer-strip {
  margin-top: 0.78rem;
  padding: 0.85rem;
}

.ref-transfer-strip > div {
  display: flex;
  gap: 0.34rem;
  margin-top: 0.7rem;
}

.ref-activity-list--side .ref-activity-item {
  min-height: 3.35rem;
}

.ref-security,
.ref-calculator {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.ref-security {
  background: #fff;
}

.ref-security__grid,
.ref-calculator__grid {
  display: grid;
  gap: 1.4rem;
  align-items: center;
}

.ref-security h2,
.ref-calculator h2 {
  margin: 0.8rem 0 0;
  color: var(--ref-ink);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: 0 !important;
}

.ref-security p,
.ref-calculator p {
  color: var(--ref-muted) !important;
  line-height: 1.62;
}

.ref-pin-preview {
  justify-self: center;
  width: min(100%, 22rem);
  border-radius: 2rem;
  background: #f8f8ff;
  padding: 1.4rem;
  box-shadow: var(--ref-shadow);
  display: grid;
  grid-template-columns: repeat(4, 0.9rem);
  justify-content: center;
  gap: 0.65rem;
}

.ref-pin-mini-grid {
  grid-column: 1 / -1;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 4rem);
  justify-content: center;
  gap: 0.7rem;
}

.ref-pin-mini-grid span {
  width: 4rem;
  height: 4rem;
  border-radius: 1.15rem;
  background: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(69, 76, 111, 0.06);
}

.ref-calculator {
  background: var(--ref-bg);
}

.ref-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.ref-checks span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ref-ink);
  font-size: 0.86rem;
  font-weight: 900;
}

.ref-checks i {
  color: var(--ref-green);
}

.ref-calc-card {
  display: grid;
  gap: 0.9rem;
  border-radius: 1.35rem;
  background: #fff;
  padding: 1rem;
  box-shadow: var(--ref-shadow);
}

.ref-calc-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--ref-ink);
  font-size: 1rem;
  font-weight: 900;
}

.ref-calc-card label {
  display: grid;
  gap: 0.46rem;
}

.ref-calc-card label > span,
.ref-rate-box span {
  color: var(--ref-muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ref-calc-card select {
  justify-self: end;
  margin-top: -1.9rem;
  color: var(--ref-blue);
  font-weight: 900;
  background: transparent;
  outline: none;
}

.ref-input-wrap {
  position: relative;
}

.ref-input-wrap i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ref-blue);
}

.ref-input-wrap input {
  width: 100%;
  min-height: 3.45rem;
  border-radius: 1rem;
  border: 1px solid var(--ref-line);
  background: #f8f8ff;
  color: var(--ref-ink);
  padding: 0.85rem 1rem 0.85rem 2.8rem;
  font-size: 1.1rem !important;
  font-weight: 900;
  outline: none;
}

.ref-input-wrap--result input {
  color: var(--ref-blue);
}

.ref-rate-box {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border-radius: 1rem;
  background: #f8f8ff;
}

.ref-rate-box > div {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.ref-rate-box strong {
  color: var(--ref-ink);
  font-size: 0.83rem;
  text-align: right;
}

#client-lock-screen,
#transfer-confirm-modal,
#pin-change-modal {
  background:
    radial-gradient(circle at 20% 20%, rgba(86, 96, 243, 0.11), transparent 26rem),
    var(--ref-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#client-lock-screen > div,
#transfer-confirm-modal > div,
#pin-change-modal > div {
  width: min(100%, 23rem) !important;
  max-width: 23rem !important;
  border-radius: 2rem !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  background: rgba(255,255,255,0.94) !important;
  color: var(--ref-ink) !important;
  box-shadow: 0 28px 70px rgba(65, 69, 96, 0.18) !important;
  padding: 1.25rem !important;
}

#client-lock-screen > div::before,
#transfer-confirm-modal > div::before,
#pin-change-modal > div::before {
  content: "";
  display: block;
  width: 4.2rem;
  height: 0.35rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: #e8e8f4;
}

#client-lock-screen .w-16.h-16,
#transfer-confirm-modal .w-16.h-16,
#pin-change-modal .w-16.h-16 {
  width: 4.4rem !important;
  height: 4.4rem !important;
  border-radius: 1.35rem !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--ref-blue), var(--ref-purple)) !important;
  color: #fff !important;
  box-shadow: 0 16px 30px rgba(86, 96, 243, 0.28) !important;
}

#client-lock-screen h3,
#transfer-confirm-modal h3,
#pin-change-modal h3 {
  color: var(--ref-ink) !important;
  font-size: 1.35rem !important;
  letter-spacing: 0 !important;
}

#client-lock-screen p,
#transfer-confirm-modal p,
#pin-change-modal p {
  color: var(--ref-muted) !important;
  font-size: 0.86rem !important;
  line-height: 1.45 !important;
  max-width: 17rem;
  margin-left: auto;
  margin-right: auto;
}

#lock-pin-dots,
#pin-dots,
#pin-change-dots {
  margin-bottom: 1.25rem !important;
}

.pin-dot {
  width: 0.72rem !important;
  height: 0.72rem !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #dfe1ee !important;
  box-shadow: inset 0 0 0 1px rgba(62, 67, 91, 0.06) !important;
}

.pin-dot.filled {
  background: var(--ref-blue) !important;
  box-shadow: 0 0 0 0.32rem rgba(86, 96, 243, 0.12) !important;
}

#lock-pin-pad,
#pin-pad,
#pin-change-modal .grid.grid-cols-3 {
  max-width: 18rem !important;
  gap: 0.75rem !important;
}

.pin-btn {
  width: 100% !important;
  height: 4rem !important;
  border-radius: 1.15rem !important;
  background: #f8f8ff !important;
  border: 1px solid rgba(62, 67, 91, 0.08) !important;
  color: var(--ref-ink) !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 20px rgba(65, 69, 96, 0.06) !important;
}

.pin-btn.text-brand-success,
.pin-btn.text-brand-error {
  background: var(--ref-blue) !important;
  color: #fff !important;
}

#client-lock-screen button[onclick*="logout"] {
  display: inline-flex;
  justify-content: center;
  min-height: 2.7rem;
  align-items: center;
  width: 100%;
  border-radius: 1rem;
  background: #fff0f2;
  color: var(--ref-red) !important;
  text-decoration: none !important;
}

@media (max-width: 767px) {
  .ref-container {
    width: min(100% - 1.1rem, 1180px);
  }

  .ref-hero {
    min-height: auto;
    padding-top: 1.25rem;
  }

  .ref-copy h1 {
    font-size: clamp(2.85rem, 15vw, 4rem);
  }

  .ref-actions {
    flex-direction: column;
  }

  .ref-btn {
    width: 100%;
  }

  .ref-showcase {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .ref-phone {
    width: min(100%, 21rem);
  }

  .ref-phone--side {
    margin-top: 0;
  }

  .ref-phone--main {
    min-height: auto;
  }

  .ref-phone--side {
    min-height: auto;
  }

  .ref-security__grid,
  .ref-calculator__grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  body[data-page="home"] #app-content {
    padding-top: 4.8rem !important;
  }

  .ref-hero__grid {
    grid-template-columns: minmax(20rem, 0.78fr) minmax(33rem, 1.22fr);
  }

  .ref-security__grid,
  .ref-calculator__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1fr);
  }
}

@media (min-width: 1120px) {
  .ref-copy {
    transform: translateY(-0.8rem);
  }

  .ref-showcase {
    transform: scale(0.94);
    transform-origin: center;
  }
}
/* QuickSend reference wallet layout end */



/* QuickSend brand image polish */
.quicksend-logo-img,
img[src$="quicksend-logo.png"] {
  object-fit: contain !important;
  background: #ffffff !important;
  padding: 0.16rem !important;
}

.quicksend-brand-text strong,
.quicksend-brand-text strong {
  letter-spacing: 0 !important;
}

/* QuickSend dashboard final layout start */
:root {
  --qs-dash-bg: #edf3ef;
  --qs-dash-surface: rgba(255, 255, 255, 0.86);
  --qs-dash-panel: #ffffff;
  --qs-dash-ink: #07111f;
  --qs-dash-muted: #65716f;
  --qs-dash-line: rgba(7, 17, 31, 0.10);
  --qs-dash-navy: #082b4c;
  --qs-dash-teal: #17b8b6;
  --qs-dash-teal-dark: #0a7f85;
  --qs-dash-lime: #d8f36d;
  --qs-dash-gold: #f0b735;
  --qs-dash-red: #ef4f5f;
  --qs-dash-shadow: 0 24px 70px rgba(8, 43, 76, 0.14);
}

#layout-dashboard > .h-screen {
  background:
    radial-gradient(circle at 18% 8%, rgba(23, 184, 182, 0.18), transparent 24rem),
    radial-gradient(circle at 92% 10%, rgba(216, 243, 109, 0.22), transparent 22rem),
    linear-gradient(135deg, #f6faf7 0%, var(--qs-dash-bg) 100%) !important;
  color: var(--qs-dash-ink) !important;
}

#layout-dashboard .glass,
#layout-dashboard .glass-card,
#layout-dashboard .nav-bg {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

@media (min-width: 768px) {
  #layout-dashboard aside {
    width: 6.25rem !important;
    height: calc(100dvh - 2rem) !important;
    margin: 1rem 0 1rem 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 2rem !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow: var(--qs-dash-shadow) !important;
    overflow: visible !important;
  }

  #layout-dashboard aside .h-24 {
    height: auto !important;
    justify-content: center !important;
    padding: 1rem 0 1.1rem !important;
    border-color: var(--qs-dash-line) !important;
  }

  #layout-dashboard aside .h-24 img {
    width: 3.55rem !important;
    height: 3.55rem !important;
    border-radius: 1.2rem !important;
    border: 1px solid rgba(8, 43, 76, 0.1) !important;
    background: #fff !important;
    object-fit: contain !important;
    padding: 0.18rem !important;
  }

  #layout-dashboard aside .h-24 span,
  #layout-dashboard aside nav p,
  #layout-dashboard aside .p-5 span {
    display: none !important;
  }

  #layout-dashboard aside nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.72rem !important;
    padding: 1rem 0.6rem !important;
    overflow: visible !important;
  }

  #layout-dashboard .dash-nav-item {
    position: relative !important;
    width: 3.55rem !important;
    height: 3.55rem !important;
    min-height: 3.55rem !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 1.2rem !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--qs-dash-muted) !important;
    box-shadow: none !important;
  }

  #layout-dashboard .dash-nav-item i {
    font-size: 1.45rem !important;
    color: currentColor !important;
  }

  #layout-dashboard .dash-nav-item > span {
    position: absolute !important;
    left: 4.45rem !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(-0.35rem) !important;
    display: block !important;
    width: max-content !important;
    max-width: 14rem !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 999 !important;
    padding: 0.62rem 0.82rem !important;
    border-radius: 0.9rem !important;
    background: var(--qs-dash-ink) !important;
    color: #fff !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    box-shadow: 0 18px 38px rgba(7, 17, 31, 0.18) !important;
    transition: opacity 0.16s ease, transform 0.16s ease !important;
  }

  #layout-dashboard .dash-nav-item:hover > span {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
  }

  #layout-dashboard .dash-nav-item.active {
    background: linear-gradient(145deg, var(--qs-dash-navy), #0c415d) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 16px 32px rgba(8, 43, 76, 0.22) !important;
  }

  #layout-dashboard aside .p-5 {
    padding: 1rem 0.75rem !important;
    border-color: var(--qs-dash-line) !important;
  }

  #layout-dashboard aside .p-5 button {
    width: 3.55rem !important;
    height: 3.55rem !important;
    margin-inline: auto !important;
    padding: 0 !important;
    border-radius: 1.15rem !important;
    background: rgba(239, 79, 95, 0.10) !important;
  }

  #layout-dashboard aside .p-5 i {
    font-size: 1.35rem !important;
  }
}

#layout-dashboard .flex-1.flex.flex-col.h-full {
  padding: clamp(0.75rem, 2vw, 1rem) !important;
  gap: clamp(0.75rem, 2vw, 1rem) !important;
}

#layout-dashboard header {
  height: auto !important;
  min-height: 4.75rem !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: clamp(1.35rem, 3vw, 2rem) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 18px 48px rgba(8, 43, 76, 0.10) !important;
  padding: 0.9rem clamp(0.95rem, 2.5vw, 1.45rem) !important;
}

#dash-title {
  color: var(--qs-dash-ink) !important;
  font-family: "Space Grotesk", Inter, sans-serif !important;
  letter-spacing: 0 !important;
  font-size: clamp(1.2rem, 4.4vw, 1.9rem) !important;
  line-height: 1.05 !important;
}

#kyc-badge-header {
  border-radius: 999px !important;
}

#layout-dashboard header .bg-surface,
#dash-bell-btn,
#layout-dashboard header [onclick*="settings"] {
  background: #fff !important;
  border: 1px solid var(--qs-dash-line) !important;
  color: var(--qs-dash-ink) !important;
  box-shadow: 0 12px 30px rgba(8, 43, 76, 0.08) !important;
}

#layout-dashboard main#main-scroll {
  max-width: 73rem !important;
  margin-inline: auto !important;
  padding: 0 0 7.25rem !important;
  width: 100% !important;
  scrollbar-gutter: stable both-edges;
}

#layout-dashboard .dash-content-tab {
  max-width: 73rem !important;
}

#dash-tab-home {
  width: 100% !important;
  display: block;
}

#dash-tab-home > .grid:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr) !important;
  gap: clamp(0.9rem, 2.2vw, 1.3rem) !important;
  align-items: stretch !important;
  margin-bottom: 1rem !important;
}

#dash-tab-home > .grid:first-child > div {
  min-width: 0 !important;
}

#digital-card {
  min-height: clamp(17.5rem, 33vw, 22rem) !important;
  border-radius: clamp(1.65rem, 3vw, 2.35rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(216, 243, 109, 0.35), transparent 12rem),
    radial-gradient(circle at 12% 12%, rgba(23, 184, 182, 0.35), transparent 14rem),
    linear-gradient(135deg, #061f3d 0%, #08395b 48%, #0d7778 100%) !important;
  box-shadow: 0 28px 70px rgba(8, 43, 76, 0.26) !important;
  overflow: hidden !important;
}

#digital-card::before {
  content: "";
  position: absolute;
  inset: auto -5rem -8rem auto;
  width: 17rem;
  height: 17rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

#digital-card::after {
  content: "QuickSend";
  position: absolute;
  right: clamp(1.25rem, 3vw, 2rem);
  top: clamp(1.1rem, 2.4vw, 1.6rem);
  color: rgba(255, 255, 255, 0.14);
  font-size: clamp(2.2rem, 7vw, 4.8rem);
  font-weight: 900;
  letter-spacing: 0 !important;
  line-height: 1;
  pointer-events: none;
}

#digital-card .card-content-3d {
  position: relative !important;
  z-index: 1 !important;
  min-height: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

#digital-card p[data-i18n="bal_avail"] {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 2rem !important;
  margin-bottom: 0.8rem !important;
  padding: 0.45rem 0.75rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  white-space: normal !important;
}

#digital-card .ph-sim-card {
  display: none !important;
}

#dash-balance {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 0.36rem 0.55rem !important;
  max-width: 100% !important;
  color: #fff !important;
  font-size: clamp(2.55rem, 7vw, 5.25rem) !important;
  line-height: 0.86 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#dash-balance .money-amount {
  color: #fff !important;
  line-height: 0.88 !important;
  overflow-wrap: anywhere;
}

#dash-balance .money-currency {
  color: var(--qs-dash-lime) !important;
  font-size: clamp(0.9rem, 2vw, 1.2rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  transform: translateY(-0.1rem);
}

#digital-card button[onclick*="toggleBalance"] {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

#digital-card .flex.items-center.gap-3.md\:gap-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}

#digital-card button[onclick*="deposit"],
#digital-card button[onclick*="p2p"] {
  min-height: 3.65rem !important;
  border-radius: 1.15rem !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
}

#digital-card button[onclick*="deposit"] {
  background: #fff !important;
  color: var(--qs-dash-ink) !important;
}

#digital-card button[onclick*="p2p"] {
  background: var(--qs-dash-lime) !important;
  color: var(--qs-dash-ink) !important;
}

#dash-tab-home > .grid:first-child > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.75rem, 2vw, 1rem) !important;
}

#dash-tab-home > .grid:first-child > div:nth-child(2) > button {
  min-height: clamp(8rem, 15vw, 10.8rem) !important;
  border-radius: clamp(1.25rem, 2.5vw, 1.8rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  color: var(--qs-dash-ink) !important;
  box-shadow: 0 18px 48px rgba(8, 43, 76, 0.10) !important;
}

#dash-tab-home > .grid:first-child > div:nth-child(2) > button div {
  background: linear-gradient(145deg, rgba(23, 184, 182, 0.14), rgba(216, 243, 109, 0.24)) !important;
  color: var(--qs-dash-navy) !important;
}

#dash-tab-home > .grid:first-child > div:nth-child(2) > button span {
  color: var(--qs-dash-ink) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: center !important;
  line-height: 1.1 !important;
}

#dash-banners-container {
  border-radius: clamp(1.1rem, 2.5vw, 1.8rem) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow: var(--qs-dash-shadow) !important;
}

#dash-tab-home > .w-full.mt-4.mb-2 .glass-card,
#dash-tab-home > .w-full.mt-4 .glass-card,
#recent-txns-container > .glass-card {
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border-radius: clamp(1.25rem, 2.5vw, 1.9rem) !important;
  box-shadow: 0 18px 48px rgba(8, 43, 76, 0.09) !important;
}

#dash-tab-home > .w-full.mt-4.mb-2 h3,
#dash-tab-home > .w-full.mt-4 h3 {
  color: var(--qs-dash-ink) !important;
  letter-spacing: 0 !important;
}

#dash-tab-home .glass-input {
  border: 1px solid var(--qs-dash-line) !important;
  background: #fff !important;
  color: var(--qs-dash-ink) !important;
}

#dash-tab-home .bg-gray-100 {
  background: #f5f8f6 !important;
  border-color: var(--qs-dash-line) !important;
}

#notif-dropdown {
  border-radius: 1.4rem !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
}

#layout-dashboard .mobile-nav-btn {
  border-radius: 1.05rem !important;
}

@media (max-width: 767px) {
  #layout-dashboard > .h-screen {
    display: block !important;
    overflow: hidden !important;
  }

  #layout-dashboard .flex-1.flex.flex-col.h-full {
    height: 100dvh !important;
    padding: 0.75rem !important;
    gap: 0.75rem !important;
  }

  #layout-dashboard header {
    min-height: 4.35rem !important;
    border-radius: 1.45rem !important;
    padding: 0.8rem 0.9rem !important;
  }

  #layout-dashboard header .flex.items-center.gap-3.min-w-0 {
    min-width: 0 !important;
    flex: 1 !important;
  }

  #layout-dashboard header .flex.items-center.gap-3.md\:gap-4 {
    gap: 0.5rem !important;
  }

  #dash-title {
    font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
  }

  #dash-bell-btn,
  #layout-dashboard header [onclick*="settings"] {
    width: 2.65rem !important;
    height: 2.65rem !important;
  }

  #layout-dashboard main#main-scroll {
    padding: 0 0 6.4rem !important;
    overflow-x: hidden !important;
  }

  #dash-tab-home > .grid:first-child {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }

  #digital-card {
    min-height: 19.5rem !important;
    padding: 1.25rem !important;
  }

  #digital-card::after {
    top: 1rem;
    right: 1rem;
    font-size: 2.5rem;
  }

  #dash-balance {
    font-size: clamp(2.6rem, 15vw, 4.2rem) !important;
  }

  #digital-card .flex.justify-between.items-start.mb-10 {
    margin-bottom: 4rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: 6.8rem !important;
    padding: 0.75rem 0.35rem !important;
    border-radius: 1.15rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button div {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button i {
    font-size: 1.45rem !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button span {
    font-size: 0.68rem !important;
  }

  #dash-tab-home > .w-\[calc\(100\%\+2rem\)\],
  #dash-banners-container {
    width: 100% !important;
    margin-inline: 0 !important;
    border-radius: 1.25rem !important;
  }

  #layout-dashboard nav.md\:hidden {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: calc(env(safe-area-inset-bottom) + 0.65rem) !important;
    width: auto !important;
    height: 4.55rem !important;
    justify-content: space-around !important;
    padding: 0.55rem !important;
    border-radius: 1.65rem !important;
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid rgba(255,255,255,0.8) !important;
    box-shadow: 0 18px 46px rgba(8, 43, 76, 0.16) !important;
    overflow: visible !important;
    gap: 0.25rem !important;
  }

  #layout-dashboard .mobile-nav-btn {
    min-width: 3.05rem !important;
    width: 3.05rem !important;
    height: 3.05rem !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 1.15rem !important;
    color: var(--qs-dash-muted) !important;
  }

  #layout-dashboard .mobile-nav-btn.text-brand-royal,
  #layout-dashboard .mobile-nav-btn.active {
    background: var(--qs-dash-navy) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(8, 43, 76, 0.22) !important;
  }

  #layout-dashboard .mobile-nav-btn i {
    font-size: 1.35rem !important;
  }
}

@media (max-width: 390px) {
  #dash-tab-home > .grid:first-child > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: 6.1rem !important;
  }
}

@media (min-width: 1180px) {
  #layout-dashboard main#main-scroll {
    padding-right: 0.5rem !important;
  }
}
/* QuickSend dashboard final layout end */


/* QuickSend canonical responsive dashboard start */
:root {
  --qs-app-bg: #f4f8f6;
  --qs-ink: #07111f;
  --qs-muted: #687473;
  --qs-line: rgba(7, 17, 31, 0.11);
  --qs-panel: rgba(255, 255, 255, 0.9);
  --qs-navy: #063354;
  --qs-teal: #0d8b8d;
  --qs-mint: #dff0db;
  --qs-lime: #d9f66f;
  --qs-shadow: 0 18px 46px rgba(6, 51, 84, 0.14);
}

#layout-dashboard,
#layout-dashboard * {
  box-sizing: border-box !important;
  min-width: 0;
  letter-spacing: 0 !important;
}

#layout-dashboard > .h-screen {
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(13, 139, 141, 0.16), transparent 18rem),
    radial-gradient(circle at 92% 5%, rgba(217, 246, 111, 0.2), transparent 16rem),
    linear-gradient(180deg, #fbfdfb 0%, var(--qs-app-bg) 100%) !important;
  color: var(--qs-ink) !important;
  overflow: hidden !important;
}

#layout-dashboard .flex-1.flex.flex-col.h-full {
  width: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  padding: clamp(0.7rem, 2vw, 1rem) !important;
  gap: clamp(0.65rem, 2vw, 1rem) !important;
}

#layout-dashboard header {
  min-height: 3.9rem !important;
  height: auto !important;
  flex: 0 0 auto !important;
  border-radius: clamp(1.15rem, 3vw, 1.65rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 14px 34px rgba(6, 51, 84, 0.1) !important;
  padding: 0.72rem clamp(0.8rem, 2vw, 1.1rem) !important;
}

#dash-title {
  font-size: clamp(1.05rem, 4vw, 1.55rem) !important;
  line-height: 1.08 !important;
  color: var(--qs-ink) !important;
  max-width: 100% !important;
}

#dash-bell-btn,
#layout-dashboard header [onclick*="settings"],
#layout-dashboard header .bg-surface {
  width: clamp(2.55rem, 10vw, 3rem) !important;
  height: clamp(2.55rem, 10vw, 3rem) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--qs-ink) !important;
  border: 1px solid var(--qs-line) !important;
  box-shadow: 0 12px 24px rgba(6, 51, 84, 0.09) !important;
}

#layout-dashboard main#main-scroll {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: min(100%, 73rem) !important;
  margin: 0 auto !important;
  padding: 0 0 calc(5.8rem + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

#layout-dashboard .dash-content-tab {
  width: 100% !important;
  max-width: min(100%, 73rem) !important;
  margin-inline: auto !important;
}

#dash-tab-home {
  display: block !important;
  gap: 0 !important;
}

#dash-tab-home > .grid:first-child {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.8rem !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 0 0.9rem !important;
}

#dash-tab-home > .grid:first-child > div {
  width: 100% !important;
}

#digital-card {
  width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  border-radius: clamp(1.2rem, 5vw, 1.75rem) !important;
  padding: clamp(1rem, 4vw, 1.35rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  background:
    linear-gradient(135deg, rgba(6, 51, 84, 0.98) 0%, rgba(8, 79, 98, 0.98) 48%, rgba(11, 132, 126, 0.98) 100%) !important;
  box-shadow: 0 18px 44px rgba(6, 51, 84, 0.22) !important;
  overflow: hidden !important;
  transform: none !important;
  perspective: none !important;
}

#digital-card::before,
#digital-card::after,
#digital-card .card-content-3d::before,
#digital-card .card-content-3d::after {
  content: none !important;
  display: none !important;
}

#digital-card .card-content-3d {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(1.1rem, 5vw, 1.65rem) !important;
  transform: none !important;
}

#digital-card .flex.justify-between.items-start.mb-10 {
  margin: 0 !important;
  gap: 0.7rem !important;
  align-items: flex-start !important;
}

#digital-card p[data-i18n="bal_avail"] {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 0.55rem !important;
  padding: 0.28rem 0.58rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.13) !important;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: clamp(0.62rem, 2.8vw, 0.78rem) !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  overflow: visible !important;
}

#digital-card .ph-sim-card {
  display: none !important;
}

#dash-balance {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 0.25rem 0.45rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(2.05rem, 11vw, 3.35rem) !important;
  line-height: 0.95 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-shadow: none !important;
}

#dash-balance .money-amount,
#dash-balance > span:first-child {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

#dash-balance .money-currency,
#dash-balance > span:last-child {
  color: var(--qs-lime) !important;
  font-size: clamp(0.72rem, 3vw, 0.92rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-0.08rem) !important;
  white-space: nowrap !important;
}

#digital-card button[onclick*="toggleBalance"] {
  width: 2.2rem !important;
  height: 2.2rem !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

#digital-card .flex.items-center.gap-3.md\:gap-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.6rem !important;
  margin: 0 !important;
}

#digital-card button[onclick*="deposit"],
#digital-card button[onclick*="p2p"] {
  min-height: 3.15rem !important;
  max-width: 100% !important;
  padding: 0.75rem 0.7rem !important;
  border-radius: 1rem !important;
  font-size: clamp(0.76rem, 3.3vw, 0.92rem) !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  transform: none !important;
}

#digital-card button[onclick*="deposit"] {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--qs-ink) !important;
}

#digital-card button[onclick*="p2p"] {
  background: rgba(217, 246, 111, 0.96) !important;
  color: var(--qs-ink) !important;
}

#dash-tab-home > .grid:first-child > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  width: 100% !important;
}

#dash-tab-home > .grid:first-child > div:nth-child(2) > button {
  min-height: 6.1rem !important;
  height: auto !important;
  padding: 0.75rem 0.55rem !important;
  border-radius: 1.1rem !important;
  border: 1px solid var(--qs-line) !important;
  background: var(--qs-panel) !important;
  color: var(--qs-ink) !important;
  box-shadow: 0 12px 26px rgba(6, 51, 84, 0.09) !important;
  transform: none !important;
}

#dash-tab-home > .grid:first-child > div:nth-child(2) > button div {
  width: 2.75rem !important;
  height: 2.75rem !important;
  background: linear-gradient(145deg, rgba(13, 139, 141, 0.12), rgba(217, 246, 111, 0.26)) !important;
  color: var(--qs-navy) !important;
}

#dash-tab-home > .grid:first-child > div:nth-child(2) > button span {
  display: block !important;
  max-width: 100% !important;
  color: var(--qs-ink) !important;
  font-size: clamp(0.78rem, 3.3vw, 0.9rem) !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
}

#dash-banners-container,
#dash-tab-home > .w-\[calc\(100\%\+2rem\)\] {
  width: 100% !important;
  margin-inline: 0 !important;
  border-radius: 1.15rem !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 17.5rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  box-shadow: var(--qs-shadow) !important;
}

#dash-banners-track img,
#dash-banners-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#dash-tab-home > .w-full.mt-4.mb-2,
#dash-tab-home > .w-full.mt-4 {
  margin-top: 0.9rem !important;
}

#dash-tab-home .glass-card,
#recent-txns-container > .glass-card {
  border-radius: 1.15rem !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 12px 30px rgba(6, 51, 84, 0.08) !important;
}

#notif-dropdown {
  width: min(calc(100vw - 1.5rem), 24rem) !important;
  max-height: min(70dvh, 32rem) !important;
  color: var(--qs-ink) !important;
}

#layout-dashboard nav.md\:hidden {
  position: fixed !important;
  left: 0.75rem !important;
  right: 0.75rem !important;
  bottom: calc(env(safe-area-inset-bottom) + 0.65rem) !important;
  width: auto !important;
  height: 4.35rem !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0.15rem !important;
  padding: 0.48rem !important;
  border-radius: 1.45rem !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 18px 44px rgba(6, 51, 84, 0.18) !important;
  overflow: visible !important;
}

#layout-dashboard .mobile-nav-btn {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 3.25rem !important;
  height: 3.15rem !important;
  padding: 0 !important;
  border-radius: 1rem !important;
  display: grid !important;
  place-items: center !important;
  color: #667572 !important;
  background: transparent !important;
}

#layout-dashboard .mobile-nav-btn.active,
#layout-dashboard .mobile-nav-btn.text-brand-royal {
  color: #fff !important;
  background: var(--qs-navy) !important;
  box-shadow: 0 12px 24px rgba(6, 51, 84, 0.22) !important;
}

#layout-dashboard .mobile-nav-btn i {
  font-size: clamp(1.25rem, 6vw, 1.55rem) !important;
}

#layout-dashboard input,
#layout-dashboard select,
#layout-dashboard textarea {
  max-width: 100% !important;
  font-size: 16px !important;
}

#layout-dashboard .animate-fade-in,
#layout-dashboard .animate-slide-up,
#layout-dashboard .animate-float {
  animation: none !important;
}

@media (max-width: 359px) {
  #layout-dashboard .flex-1.flex.flex-col.h-full {
    padding: 0.55rem !important;
  }

  #dash-balance {
    font-size: clamp(1.8rem, 10vw, 2.35rem) !important;
  }

  #digital-card button[onclick*="deposit"],
  #digital-card button[onclick*="p2p"] {
    font-size: 0.72rem !important;
    padding-inline: 0.45rem !important;
  }

  #layout-dashboard nav.md\:hidden {
    left: 0.5rem !important;
    right: 0.5rem !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  #dash-tab-home > .grid:first-child > div:nth-child(2) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: 5.8rem !important;
  }
}

@media (min-width: 768px) {
  #layout-dashboard > .h-screen {
    display: flex !important;
  }

  #layout-dashboard aside {
    width: 5.75rem !important;
    height: calc(100dvh - 2rem) !important;
    margin: 1rem 0 1rem 1rem !important;
    border-radius: 1.6rem !important;
    background: rgba(255, 255, 255, 0.84) !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    box-shadow: var(--qs-shadow) !important;
  }

  #layout-dashboard main#main-scroll {
    padding: 0 0 2rem !important;
  }

  #dash-tab-home > .grid:first-child {
    grid-template-columns: minmax(0, 1.12fr) minmax(17rem, 0.88fr) !important;
    gap: clamp(0.95rem, 2vw, 1.25rem) !important;
  }

  #digital-card {
    min-height: clamp(15.5rem, 28vw, 19rem) !important;
    padding: clamp(1.25rem, 2.4vw, 1.75rem) !important;
  }

  #dash-balance {
    font-size: clamp(2.6rem, 5.8vw, 4.6rem) !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: clamp(7.4rem, 14vw, 9.4rem) !important;
  }
}

@media (min-width: 1180px) {
  #layout-dashboard .flex-1.flex.flex-col.h-full {
    padding-inline: 1.2rem !important;
  }

  #dash-tab-home > .grid:first-child {
    grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr) !important;
  }
}
/* QuickSend canonical responsive dashboard end */


/* QuickSend premium dashboard visual hardening start */
body[data-page="dashboard"] {
  background: #f6faf8 !important;
}

body[data-page="dashboard"] #layout-dashboard {
  --qs-premium-bg: #f6faf8;
  --qs-premium-ink: #07111f;
  --qs-premium-muted: #677572;
  --qs-premium-card: #ffffff;
  --qs-premium-line: rgba(7, 17, 31, 0.1);
  --qs-premium-navy: #042f4f;
  --qs-premium-teal: #0c8c8d;
  --qs-premium-lime: #d9f66f;
  --qs-premium-shadow: 0 18px 44px rgba(4, 47, 79, 0.14);
  color: var(--qs-premium-ink) !important;
}

body[data-page="dashboard"] #layout-dashboard,
body[data-page="dashboard"] #layout-dashboard * {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

body[data-page="dashboard"] #layout-dashboard > .h-screen {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  width: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(12, 140, 141, 0.16), transparent 18rem),
    radial-gradient(circle at 92% 2%, rgba(217, 246, 111, 0.16), transparent 16rem),
    linear-gradient(180deg, #fbfdfc 0%, var(--qs-premium-bg) 100%) !important;
}

body[data-page="dashboard"] #layout-dashboard .flex-1.flex.flex-col.h-full {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100dvh !important;
  gap: clamp(0.7rem, 2vw, 1rem) !important;
  padding: clamp(0.7rem, 2vw, 1rem) !important;
  overflow: hidden !important;
}

body[data-page="dashboard"] #layout-dashboard header {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 30 !important;
  height: auto !important;
  min-height: 4.1rem !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  padding: 0.78rem clamp(0.85rem, 2.2vw, 1.2rem) !important;
  border-radius: clamp(1.1rem, 3.2vw, 1.55rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(4, 47, 79, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-page="dashboard"] #layout-dashboard header .flex.items-center.gap-3.min-w-0 {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body[data-page="dashboard"] #dash-title {
  display: block !important;
  max-width: 100% !important;
  color: var(--qs-premium-ink) !important;
  font-size: clamp(1rem, 4.2vw, 1.45rem) !important;
  line-height: 1.08 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-page="dashboard"] #layout-dashboard header .flex.items-center.gap-3.md\:gap-4 {
  position: relative !important;
  margin-left: auto !important;
  gap: clamp(0.45rem, 2vw, 0.75rem) !important;
}

body[data-page="dashboard"] #dash-bell-btn,
body[data-page="dashboard"] #layout-dashboard header [onclick*="settings"],
body[data-page="dashboard"] #layout-dashboard header .bg-surface {
  width: clamp(2.55rem, 10vw, 3rem) !important;
  height: clamp(2.55rem, 10vw, 3rem) !important;
  padding: 0 !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
  background: #f7faf8 !important;
  color: var(--qs-premium-ink) !important;
  border: 1px solid var(--qs-premium-line) !important;
  box-shadow: none !important;
}

body[data-page="dashboard"] #layout-dashboard main#main-scroll {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: min(100%, 74rem) !important;
  margin: 0 auto !important;
  padding: 0 0 calc(6.2rem + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-padding-bottom: calc(6.2rem + env(safe-area-inset-bottom)) !important;
}

body[data-page="dashboard"] #dash-tab-home {
  width: 100% !important;
  max-width: min(100%, 74rem) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.82rem !important;
  width: 100% !important;
  margin: 0 0 0.9rem !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div,
body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:first-child {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: auto !important;
}

body[data-page="dashboard"] #digital-card {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 11.9rem !important;
  margin: 0 !important;
  padding: clamp(1rem, 4.3vw, 1.35rem) !important;
  border-radius: clamp(1.18rem, 5vw, 1.65rem) !important;
  overflow: hidden !important;
  transform: none !important;
  perspective: none !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(217, 246, 111, 0.17), transparent 8rem),
    linear-gradient(135deg, #042f4f 0%, #075c70 52%, #0b9386 100%) !important;
  box-shadow: var(--qs-premium-shadow) !important;
}

body[data-page="dashboard"] #digital-card::before,
body[data-page="dashboard"] #digital-card::after,
body[data-page="dashboard"] #digital-card .card-content-3d::before,
body[data-page="dashboard"] #digital-card .card-content-3d::after,
body[data-page="dashboard"] #digital-card .card-content-3d > .flex.items-center.gap-3::after {
  content: none !important;
  display: none !important;
}

body[data-page="dashboard"] #digital-card .card-content-3d {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(1.25rem, 5vw, 1.65rem) !important;
  transform: none !important;
}

body[data-page="dashboard"] #digital-card .card-content-3d > .flex:first-child {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  min-height: 0 !important;
  margin: 0 !important;
  gap: 0.75rem !important;
}

body[data-page="dashboard"] #digital-card .card-content-3d > .flex:first-child > .min-w-0 {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

body[data-page="dashboard"] #digital-card p[data-i18n="bal_avail"] {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 0.58rem !important;
  padding: 0.28rem 0.56rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.13) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(0.62rem, 2.7vw, 0.77rem) !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  letter-spacing: 0.03em !important;
}

body[data-page="dashboard"] #digital-card p[data-i18n="bal_avail"]::before {
  content: none !important;
  display: none !important;
}

body[data-page="dashboard"] #digital-card .ph-sim-card {
  display: none !important;
}

body[data-page="dashboard"] #digital-card .card-content-3d > .flex:first-child .flex.items-center.gap-3 {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  margin: 0 !important;
}

body[data-page="dashboard"] #dash-balance {
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 0.38rem !important;
  width: auto !important;
  max-width: calc(100% - 2.75rem) !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 9.2vw, 2.95rem) !important;
  line-height: 0.95 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums !important;
}

body[data-page="dashboard"] #dash-balance .money-amount {
  display: inline-block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

body[data-page="dashboard"] #dash-balance .money-currency {
  display: inline-block !important;
  flex: 0 0 auto !important;
  color: var(--qs-premium-lime) !important;
  font-size: clamp(0.7rem, 2.7vw, 0.86rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: translateY(-0.06rem) !important;
  white-space: nowrap !important;
}

body[data-page="dashboard"] #digital-card button[onclick*="toggleBalance"] {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  flex: 0 0 2.25rem !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

body[data-page="dashboard"] #digital-card .card-content-3d > .flex.items-center.gap-3,
body[data-page="dashboard"] #digital-card .card-content-3d > .flex.items-center.gap-3.md\:gap-4 {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.65rem !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 1 !important;
}

body[data-page="dashboard"] #digital-card .card-content-3d > .flex.items-center.gap-3 > button {
  width: 100% !important;
  min-height: 3.12rem !important;
  height: auto !important;
  padding: 0.72rem 0.62rem !important;
  border-radius: 0.95rem !important;
  color: var(--qs-premium-ink) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: clamp(0.76rem, 3.1vw, 0.9rem) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

body[data-page="dashboard"] #digital-card .card-content-3d > .flex.items-center.gap-3 > button[onclick*="p2p"] {
  background: rgba(217, 246, 111, 0.96) !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.72rem !important;
  width: 100% !important;
  margin: 0 !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
  min-height: 5.15rem !important;
  height: auto !important;
  padding: 0.72rem 0.55rem !important;
  border-radius: 1rem !important;
  background: #ffffff !important;
  border: 1px solid var(--qs-premium-line) !important;
  color: var(--qs-premium-ink) !important;
  box-shadow: 0 10px 24px rgba(4, 47, 79, 0.08) !important;
  transform: none !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button div {
  width: 2.45rem !important;
  height: 2.45rem !important;
  background: linear-gradient(145deg, rgba(12, 140, 141, 0.12), rgba(217, 246, 111, 0.26)) !important;
  color: var(--qs-premium-navy) !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button i {
  font-size: 1.35rem !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button span {
  color: var(--qs-premium-ink) !important;
  font-size: clamp(0.75rem, 3.2vw, 0.9rem) !important;
  line-height: 1.07 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
}

body[data-page="dashboard"] #dash-banners-container,
body[data-page="dashboard"] #dash-tab-home > .w-\[calc\(100\%\+2rem\)\] {
  width: 100% !important;
  margin: 0.95rem 0 0 !important;
  border-radius: 1rem !important;
  aspect-ratio: 16 / 7 !important;
  max-height: 11rem !important;
  overflow: hidden !important;
  border: 1px solid var(--qs-premium-line) !important;
  box-shadow: 0 10px 24px rgba(4, 47, 79, 0.08) !important;
}

body[data-page="dashboard"] #dash-tab-home .glass-card,
body[data-page="dashboard"] #recent-txns-container > .glass-card {
  border-radius: 1rem !important;
  background: #ffffff !important;
  border: 1px solid var(--qs-premium-line) !important;
  color: var(--qs-premium-ink) !important;
  box-shadow: 0 10px 24px rgba(4, 47, 79, 0.08) !important;
}

body[data-page="dashboard"] #dash-tab-home > .w-full.mt-4.mb-2,
body[data-page="dashboard"] #dash-tab-home > .w-full.mt-4 {
  margin-top: 0.95rem !important;
}

body[data-page="dashboard"] #dash-tab-home > .w-full.mt-4.mb-2 .glass-card {
  padding: 1rem !important;
}

body[data-page="dashboard"] #dash-tab-home > .w-full.mt-4.mb-2 h3 {
  color: var(--qs-premium-ink) !important;
  font-size: 1rem !important;
  line-height: 1.15 !important;
}

body[data-page="dashboard"] #layout-dashboard nav.md\:hidden,
body[data-page="dashboard"] #layout-dashboard nav.fixed.bottom-0 {
  position: fixed !important;
  z-index: 90 !important;
  left: 0.75rem !important;
  right: 0.75rem !important;
  bottom: calc(env(safe-area-inset-bottom) + 0.65rem) !important;
  width: auto !important;
  height: 4.28rem !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 0.15rem !important;
  padding: 0.48rem !important;
  border-radius: 1.35rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(7, 17, 31, 0.08) !important;
  box-shadow: 0 18px 40px rgba(4, 47, 79, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  transform: none !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn {
  width: 100% !important;
  max-width: 3.15rem !important;
  height: 3.05rem !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 0.95rem !important;
  color: #65726f !important;
  background: transparent !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.active,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.text-brand-royal {
  color: #ffffff !important;
  background: var(--qs-premium-navy) !important;
  box-shadow: 0 10px 22px rgba(4, 47, 79, 0.22) !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn i {
  font-size: clamp(1.2rem, 5.8vw, 1.48rem) !important;
  filter: none !important;
}

body[data-page="dashboard"] #chat-widget {
  right: 1rem !important;
  bottom: calc(5.45rem + env(safe-area-inset-bottom)) !important;
}

body[data-page="dashboard"] #chat-btn {
  width: 3.15rem !important;
  height: 3.15rem !important;
  box-shadow: 0 14px 28px rgba(11, 77, 255, 0.26) !important;
}

body[data-page="dashboard"] #notif-dropdown {
  width: min(calc(100vw - 1.5rem), 24rem) !important;
  max-height: min(70dvh, 32rem) !important;
  color: var(--qs-premium-ink) !important;
}

@media (max-width: 359px) {
  body[data-page="dashboard"] #layout-dashboard .flex-1.flex.flex-col.h-full {
    padding: 0.55rem !important;
  }

  body[data-page="dashboard"] #dash-balance {
    font-size: clamp(1.7rem, 8.7vw, 2.25rem) !important;
  }

  body[data-page="dashboard"] #digital-card .card-content-3d > .flex.items-center.gap-3 > button {
    padding-inline: 0.42rem !important;
    font-size: 0.7rem !important;
  }
}

@media (max-width: 767px) {
  body[data-page="dashboard"] #digital-card {
    min-height: 11.2rem !important;
  }

  body[data-page="dashboard"] #digital-card .card-content-3d {
    gap: 1.08rem !important;
  }

  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: 4.85rem !important;
    height: 4.85rem !important;
    padding: 0.55rem 0.45rem !important;
  }

  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button div {
    width: 2.18rem !important;
    height: 2.18rem !important;
  }

  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button span {
    font-size: clamp(0.72rem, 3vw, 0.82rem) !important;
  }
}

@media (min-width: 430px) and (max-width: 767px) {
  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: 5rem !important;
  }
}

@media (min-width: 768px) {
  body[data-page="dashboard"] #layout-dashboard aside {
    width: 5.75rem !important;
    height: calc(100dvh - 2rem) !important;
    margin: 1rem 0 1rem 1rem !important;
    border-radius: 1.55rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(7, 17, 31, 0.08) !important;
    box-shadow: var(--qs-premium-shadow) !important;
  }

  body[data-page="dashboard"] #layout-dashboard main#main-scroll {
    padding-bottom: 1.4rem !important;
  }

  body[data-page="dashboard"] #dash-tab-home > .grid:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem) !important;
    gap: clamp(0.95rem, 2vw, 1.25rem) !important;
  }

  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div,
  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:first-child,
  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) {
    grid-column: auto !important;
  }

  body[data-page="dashboard"] #layout-dashboard nav.md\:hidden,
  body[data-page="dashboard"] #layout-dashboard nav.fixed.bottom-0 {
    display: none !important;
  }

  body[data-page="dashboard"] #digital-card {
    min-height: clamp(15rem, 26vw, 18rem) !important;
    padding: clamp(1.25rem, 2.2vw, 1.65rem) !important;
  }

  body[data-page="dashboard"] #dash-balance {
    font-size: clamp(2.6rem, 5.5vw, 4.35rem) !important;
  }

  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: clamp(7rem, 13vw, 8.8rem) !important;
  }
}

@media (min-width: 1180px) {
  body[data-page="dashboard"] #dash-tab-home > .grid:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem) !important;
  }
}
/* QuickSend premium dashboard visual hardening end */

/* QuickSend senior fintech audit polish start */
body[data-page="dashboard"] {
  --qs-ink: #07111f;
  --qs-muted: #60716f;
  --qs-line: rgba(7, 17, 31, 0.09);
  --qs-card: #ffffff;
  --qs-navy: #033553;
  --qs-teal: #078f8a;
  --qs-lime: #d9f66f;
  --qs-gold: #f3b51b;
  --qs-shadow-soft: 0 18px 48px rgba(4, 47, 79, 0.12);
  --qs-shadow-card: 0 14px 34px rgba(4, 47, 79, 0.10);
  background:
    radial-gradient(circle at top left, rgba(7, 143, 138, 0.13), transparent 28rem),
    linear-gradient(180deg, #f6faf8 0%, #eef5f2 48%, #f9fbfa 100%) !important;
  color: var(--qs-ink) !important;
}

body[data-page="dashboard"] #layout-dashboard,
body[data-page="dashboard"] #layout-dashboard > div,
body[data-page="dashboard"] #layout-dashboard .flex-1.flex.flex-col.h-full {
  background: transparent !important;
}

body[data-page="dashboard"] #layout-dashboard header {
  max-width: min(100%, 74rem) !important;
  margin: 0 auto clamp(0.85rem, 2vw, 1.25rem) !important;
  border-radius: clamp(1.1rem, 3vw, 1.45rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 12px 34px rgba(4, 47, 79, 0.08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body[data-page="dashboard"] #layout-dashboard main#main-scroll {
  max-width: min(100%, 74rem) !important;
  padding-inline: clamp(0.78rem, 2vw, 1.25rem) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(4, 53, 83, 0.25) transparent !important;
}

body[data-page="dashboard"] #dash-tab-home {
  max-width: min(100%, 74rem) !important;
  gap: clamp(0.8rem, 2vw, 1.05rem) !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child {
  align-items: stretch !important;
  gap: clamp(0.85rem, 2vw, 1.15rem) !important;
  margin-bottom: clamp(0.8rem, 2vw, 1rem) !important;
}

body[data-page="dashboard"] #digital-card {
  isolation: isolate !important;
  min-height: clamp(13.4rem, 28vw, 18.4rem) !important;
  padding: clamp(1.08rem, 3.2vw, 1.65rem) !important;
  border-radius: clamp(1.25rem, 3.5vw, 1.75rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(217, 246, 111, 0.22), transparent 7.5rem),
    radial-gradient(circle at 8% 105%, rgba(255, 255, 255, 0.16), transparent 9rem),
    linear-gradient(135deg, #04253f 0%, #075569 54%, #078f8a 100%) !important;
  box-shadow: 0 24px 54px rgba(3, 53, 83, 0.24) !important;
}

body[data-page="dashboard"] #digital-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: auto -16% -34% auto !important;
  width: min(17rem, 52vw) !important;
  aspect-ratio: 1 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  z-index: 0 !important;
}

body[data-page="dashboard"] #digital-card::after,
body[data-page="dashboard"] #digital-card .card-content-3d::before,
body[data-page="dashboard"] #digital-card .card-content-3d::after,
body[data-page="dashboard"] #digital-card .card-content-3d > .flex.items-center.gap-3::after {
  content: none !important;
  display: none !important;
}

body[data-page="dashboard"] #digital-card .card-content-3d {
  min-height: 100% !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  gap: clamp(1rem, 3vw, 1.45rem) !important;
}

body[data-page="dashboard"] #digital-card p[data-i18n="bal_avail"] {
  margin-bottom: clamp(0.45rem, 1.8vw, 0.72rem) !important;
  padding: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(0.64rem, 2.2vw, 0.78rem) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

body[data-page="dashboard"] #dash-balance {
  max-width: min(100%, 38rem) !important;
  color: #ffffff !important;
  font-size: clamp(2.65rem, 12.8vw, 4.85rem) !important;
  letter-spacing: 0 !important;
  line-height: 0.92 !important;
  overflow: visible !important;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.22) !important;
}

body[data-page="dashboard"] #dash-balance .money-amount,
body[data-page="dashboard"] #dash-balance > span:first-child {
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}

body[data-page="dashboard"] #dash-balance .money-currency,
body[data-page="dashboard"] #dash-balance > span:last-child {
  padding: 0.24rem 0.48rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--qs-lime) !important;
  font-size: clamp(0.78rem, 2.6vw, 0.98rem) !important;
  line-height: 1 !important;
  transform: translateY(-0.08rem) !important;
}

body[data-page="dashboard"] #digital-card button[onclick*="toggleBalance"] {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

body[data-page="dashboard"] #digital-card .card-content-3d > .flex.items-center.gap-3,
body[data-page="dashboard"] #digital-card .card-content-3d > .flex.items-center.gap-3.md\:gap-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.58rem, 2vw, 0.78rem) !important;
}

body[data-page="dashboard"] #digital-card button[onclick*="deposit"],
body[data-page="dashboard"] #digital-card button[onclick*="p2p"] {
  min-height: clamp(3.05rem, 8vw, 3.55rem) !important;
  border-radius: 1rem !important;
  font-size: clamp(0.76rem, 2.6vw, 0.94rem) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12) !important;
}

body[data-page="dashboard"] #digital-card button[onclick*="p2p"] {
  background: var(--qs-lime) !important;
  border-color: rgba(217, 246, 111, 0.75) !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) {
  gap: clamp(0.62rem, 1.8vw, 0.88rem) !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
  min-height: clamp(5.2rem, 15vw, 7.4rem) !important;
  border-radius: clamp(1rem, 3vw, 1.3rem) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%) !important;
  border: 1px solid rgba(7, 17, 31, 0.08) !important;
  box-shadow: var(--qs-shadow-card) !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button div {
  background: linear-gradient(145deg, rgba(7, 143, 138, 0.14), rgba(217, 246, 111, 0.3)) !important;
  color: var(--qs-navy) !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button span {
  color: var(--qs-ink) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body[data-page="dashboard"] #dash-banners-container,
body[data-page="dashboard"] #dash-tab-home > .w-\[calc\(100\%\+2rem\)\] {
  border-radius: clamp(1.05rem, 3vw, 1.35rem) !important;
  border: 1px solid rgba(7, 17, 31, 0.08) !important;
  box-shadow: var(--qs-shadow-soft) !important;
}

body[data-page="dashboard"] #dash-tab-home .glass-card,
body[data-page="dashboard"] #recent-txns-container > .glass-card,
body[data-page="dashboard"] #kyc-resubmit-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(7, 17, 31, 0.08) !important;
  box-shadow: var(--qs-shadow-card) !important;
  color: var(--qs-ink) !important;
}

body[data-page="dashboard"] #dash-tab-home > .w-full.mt-4.mb-2 .glass-card,
body[data-page="dashboard"] #dash-tab-home > .w-full.mt-4 .glass-card {
  border-radius: clamp(1.1rem, 3vw, 1.45rem) !important;
  padding: clamp(1rem, 2.4vw, 1.35rem) !important;
}

body[data-page="dashboard"] .glass-input,
body[data-page="dashboard"] input,
body[data-page="dashboard"] select,
body[data-page="dashboard"] textarea {
  border-color: rgba(7, 17, 31, 0.1) !important;
}

body[data-page="dashboard"] #kyc-resubmit-card {
  border-radius: clamp(1.1rem, 3vw, 1.45rem) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 252, 251, 0.96)) !important;
  border-color: rgba(243, 181, 27, 0.28) !important;
}

body[data-page="dashboard"] #kyc-resubmit-card label {
  background: #ffffff !important;
  border-color: rgba(7, 17, 31, 0.1) !important;
  box-shadow: 0 10px 22px rgba(4, 47, 79, 0.06) !important;
}

body[data-page="dashboard"] #kyc-resubmit-submit {
  background: linear-gradient(135deg, #0b4dff, #033553) !important;
  box-shadow: 0 14px 26px rgba(11, 77, 255, 0.22) !important;
}

body[data-page="dashboard"] #layout-dashboard nav.fixed.bottom-0 {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(7, 17, 31, 0.08) !important;
  box-shadow: 0 18px 44px rgba(4, 47, 79, 0.18) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.active,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.text-brand-royal {
  background: linear-gradient(135deg, #033553, #075569) !important;
}

body[data-page="dashboard"] #chat-btn {
  background: linear-gradient(135deg, #0b4dff, #033553) !important;
}

@media (max-width: 767px) {
  body[data-page="dashboard"] #layout-dashboard header {
    padding: 0.78rem !important;
  }

  body[data-page="dashboard"] #layout-dashboard main#main-scroll {
    padding-inline: 0.78rem !important;
    padding-bottom: calc(6.15rem + env(safe-area-inset-bottom)) !important;
  }

  body[data-page="dashboard"] #digital-card {
    min-height: 13rem !important;
  }

  body[data-page="dashboard"] #dash-balance {
    font-size: clamp(2.45rem, 12vw, 3.55rem) !important;
    max-width: 100% !important;
  }

  body[data-page="dashboard"] #digital-card .card-content-3d > .flex:first-child {
    gap: 0.55rem !important;
  }

  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button {
    min-height: 5.15rem !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) {
  body[data-page="dashboard"] #dash-tab-home > .grid:first-child {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr) !important;
  }

  body[data-page="dashboard"] #layout-dashboard main#main-scroll {
    padding-bottom: 1.5rem !important;
  }

  body[data-page="dashboard"] #digital-card {
    min-height: clamp(15.8rem, 24vw, 18.8rem) !important;
  }
}
/* QuickSend senior fintech audit polish end */

/* QuickSend premium icon system start */
body[data-page="dashboard"] {
  --qs-icon-ink: #033553;
  --qs-icon-teal: #078f8a;
  --qs-icon-lime: #d9f66f;
  --qs-icon-gold: #f3b51b;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button div {
  position: relative !important;
  border-radius: 1.05rem !important;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,0.86), transparent 36%),
    linear-gradient(145deg, rgba(7,143,138,0.16), rgba(217,246,111,0.28)) !important;
  color: var(--qs-icon-ink) !important;
  border: 1px solid rgba(3, 53, 83, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 10px 20px rgba(4,47,79,0.08) !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button div i,
body[data-page="dashboard"] #digital-card button i,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn i {
  line-height: 1 !important;
  display: block !important;
  transform-origin: center !important;
}

body[data-page="dashboard"] #dash-tab-home > .grid:first-child > div:nth-child(2) > button:hover div i {
  transform: translateY(-1px) scale(1.04) !important;
}

body[data-page="dashboard"] #digital-card button[onclick*="deposit"] i,
body[data-page="dashboard"] #digital-card button[onclick*="p2p"] i {
  width: 1.72rem !important;
  height: 1.72rem !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(3, 53, 83, 0.08) !important;
}

body[data-page="dashboard"] #digital-card button[onclick*="p2p"] i {
  background: rgba(3, 53, 83, 0.14) !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn {
  isolation: isolate !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn i {
  font-size: clamp(1.23rem, 5.4vw, 1.48rem) !important;
  color: currentColor !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.active i,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.text-brand-royal i {
  color: #ffffff !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.active::after,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.text-brand-royal::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0.32rem !important;
  width: 0.35rem !important;
  height: 0.35rem !important;
  border-radius: 999px !important;
  background: var(--qs-icon-lime) !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0 0 3px rgba(217,246,111,0.18) !important;
}

body[data-page="dashboard"] .hist-item .qs-txn-icon {
  border-radius: 1.05rem !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.9), transparent 35%),
    linear-gradient(145deg, rgba(3,53,83,0.09), rgba(7,143,138,0.14)) !important;
  color: var(--qs-icon-ink) !important;
  border: 1px solid rgba(3,53,83,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 10px 22px rgba(4,47,79,0.08) !important;
}

body[data-page="dashboard"] .hist-item[data-status="approved"] .qs-txn-icon,
body[data-page="dashboard"] .hist-item[data-status="completed"] .qs-txn-icon {
  background: linear-gradient(145deg, rgba(0,200,83,0.14), rgba(217,246,111,0.28)) !important;
  color: #087947 !important;
}

body[data-page="dashboard"] .hist-item[data-status="pending"] .qs-txn-icon,
body[data-page="dashboard"] .hist-item[data-status="info_needed"] .qs-txn-icon {
  background: linear-gradient(145deg, rgba(243,181,27,0.16), rgba(255,255,255,0.86)) !important;
  color: #a16207 !important;
}

body[data-page="dashboard"] .hist-item[data-status="rejected"] .qs-txn-icon {
  background: linear-gradient(145deg, rgba(255,60,56,0.15), rgba(255,255,255,0.86)) !important;
  color: #b42318 !important;
}

body[data-page="dashboard"] .tracker-container .step-circle {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 6px 14px rgba(4,47,79,0.08) !important;
}

body[data-page="dashboard"] .tracker-container .step-circle i {
  font-size: 0.92rem !important;
}

body[data-page="dashboard"] #notif-list .notif-icon,
body[data-page="dashboard"] #kyc-resubmit-card i,
body[data-page="dashboard"] #modal-txn-details i {
  line-height: 1 !important;
}
/* QuickSend premium icon system end */

/* QuickSend global layout fluency polish start */
:root {
  --qs-page-bg: #f5faf8;
  --qs-page-ink: #07111f;
  --qs-page-muted: #64736f;
  --qs-page-line: rgba(7,17,31,0.09);
  --qs-page-card: rgba(255,255,255,0.92);
  --qs-page-navy: #033553;
  --qs-page-teal: #078f8a;
  --qs-page-blue: #0b4dff;
  --qs-page-gold: #f3b51b;
  --qs-page-lime: #d9f66f;
  --qs-radius-lg: 1.35rem;
  --qs-radius-md: 1.05rem;
  --qs-shadow-soft: 0 16px 44px rgba(4,47,79,0.10);
  --qs-shadow-strong: 0 24px 60px rgba(4,47,79,0.16);
}

html {
  scroll-behavior: smooth !important;
  background: var(--qs-page-bg) !important;
}

body {
  text-rendering: geometricPrecision !important;
  letter-spacing: 0 !important;
  overflow-x: hidden !important;
}

body[data-page="home"],
body[data-page="login"],
body[data-page="register"] {
  background:
    radial-gradient(circle at 8% 0%, rgba(7,143,138,0.13), transparent 26rem),
    radial-gradient(circle at 94% 12%, rgba(217,246,111,0.16), transparent 22rem),
    linear-gradient(180deg, #f8fbfa 0%, #eef6f3 54%, #f9fbfa 100%) !important;
  color: var(--qs-page-ink) !important;
}

body[data-page="home"] #app-content,
body[data-page="login"] #app-content,
body[data-page="register"] #app-content {
  padding-top: clamp(4.85rem, 10vw, 5.6rem) !important;
}

body[data-page="home"] #main-nav,
body[data-page="login"] #main-nav,
body[data-page="register"] #main-nav {
  background: rgba(255,255,255,0.82) !important;
  border-bottom: 1px solid rgba(7,17,31,0.07) !important;
  box-shadow: 0 10px 28px rgba(4,47,79,0.07) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body[data-page="home"] #main-nav .max-w-7xl,
body[data-page="login"] #main-nav .max-w-7xl,
body[data-page="register"] #main-nav .max-w-7xl {
  max-width: min(100%, 76rem) !important;
}

.quicksend-brand-text strong {
  color: var(--qs-page-ink) !important;
  letter-spacing: 0.02em !important;
}

.quicksend-brand-text small {
  color: var(--qs-page-muted) !important;
}

body[data-page="home"] #mobile-menu-dropdown,
body[data-page="login"] #mobile-menu-dropdown,
body[data-page="register"] #mobile-menu-dropdown {
  background: rgba(255,255,255,0.96) !important;
  border-color: var(--qs-page-line) !important;
}

body[data-page="login"] #view-login > div,
body[data-page="register"] #view-register > div {
  min-height: calc(100dvh - 5.6rem) !important;
  padding: clamp(1rem, 4vw, 2rem) !important;
}

body[data-page="login"] #view-login .glass-card,
body[data-page="register"] #view-register .glass-card,
body[data-page="dashboard"] .dash-content-tab > .glass-card,
body[data-page="dashboard"] .dash-content-tab > div > .glass-card {
  border-radius: var(--qs-radius-lg) !important;
  background: var(--qs-page-card) !important;
  border: 1px solid rgba(7,17,31,0.08) !important;
  box-shadow: var(--qs-shadow-soft) !important;
  color: var(--qs-page-ink) !important;
}

body[data-page="login"] #view-login .glass-card,
body[data-page="register"] #view-register .glass-card {
  overflow: hidden !important;
  max-width: min(100%, 30rem) !important;
}

body[data-page="register"] #view-register .glass-card {
  max-width: min(100%, 37rem) !important;
}

body[data-page="login"] #view-login .glass-card::before,
body[data-page="register"] #view-register .glass-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 0.28rem !important;
  background: linear-gradient(90deg, var(--qs-page-navy), var(--qs-page-teal), var(--qs-page-lime)) !important;
}

body[data-page="login"] #view-login h2,
body[data-page="register"] #view-register h2,
body[data-page="dashboard"] .dash-content-tab h3 {
  letter-spacing: 0 !important;
}

.glass-input,
input,
select,
textarea {
  min-height: 3.15rem !important;
  border-radius: 0.95rem !important;
  border: 1px solid rgba(7,17,31,0.10) !important;
  background: rgba(255,255,255,0.88) !important;
  color: var(--qs-page-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.glass-input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(11,77,255,0.45) !important;
  box-shadow: 0 0 0 4px rgba(11,77,255,0.10), inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

button.bg-brand-royal,
button.bg-brand-success,
.ref-btn--primary,
#btn-login,
#btn-final-register,
#btn-submit-dep,
#btn-submit-tf,
#btn-submit-tu,
#btn-submit-p2p {
  border-radius: 0.95rem !important;
  box-shadow: 0 14px 28px rgba(11,77,255,0.18) !important;
  transform: translateZ(0) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

button.bg-brand-royal:hover,
button.bg-brand-success:hover,
.ref-btn--primary:hover,
#btn-login:hover,
#btn-final-register:hover,
#btn-submit-dep:hover,
#btn-submit-tf:hover,
#btn-submit-tu:hover,
#btn-submit-p2p:hover {
  transform: translateY(-1px) translateZ(0) !important;
  filter: saturate(1.04) !important;
  box-shadow: 0 18px 34px rgba(11,77,255,0.22) !important;
}

body[data-page="home"] .ref-container {
  width: min(100% - 2rem, 76rem) !important;
  margin-inline: auto !important;
}

body[data-page="home"] .ref-hero {
  padding: clamp(2rem, 5vw, 4.2rem) 0 clamp(1.6rem, 4vw, 3rem) !important;
}

body[data-page="home"] .ref-hero__grid {
  align-items: center !important;
  gap: clamp(1.25rem, 4vw, 3rem) !important;
}

body[data-page="home"] .ref-copy h1 {
  letter-spacing: 0 !important;
  line-height: 0.96 !important;
  color: var(--qs-page-ink) !important;
  font-size: clamp(2.45rem, 6.8vw, 5.2rem) !important;
}

body[data-page="home"] .ref-lead,
body[data-page="home"] .ref-desc {
  color: var(--qs-page-muted) !important;
  max-width: 38rem !important;
}

body[data-page="home"] .ref-pill,
body[data-page="home"] .ref-btn,
body[data-page="home"] .ref-phone,
body[data-page="home"] .ref-calc-card,
body[data-page="home"] .ref-security,
body[data-page="home"] .ref-service-panel,
body[data-page="home"] .ref-transfer-strip {
  border-color: rgba(7,17,31,0.08) !important;
  box-shadow: var(--qs-shadow-soft) !important;
}

body[data-page="home"] .ref-phone {
  background: rgba(255,255,255,0.94) !important;
}

body[data-page="home"] .ref-showcase {
  transform: translateZ(0) !important;
}

body[data-page="dashboard"] .dash-content-tab {
  max-width: min(100%, 64rem) !important;
}

body[data-page="dashboard"] #dash-tab-home {
  max-width: min(100%, 74rem) !important;
}

body[data-page="dashboard"] #dash-tab-deposit,
body[data-page="dashboard"] #dash-tab-transfer,
body[data-page="dashboard"] #dash-tab-p2p,
body[data-page="dashboard"] #dash-tab-topup,
body[data-page="dashboard"] #dash-tab-settings {
  max-width: min(100%, 46rem) !important;
}

body[data-page="dashboard"] #dash-tab-history {
  max-width: min(100%, 60rem) !important;
}

body[data-page="dashboard"] .dash-content-tab > .mb-5,
body[data-page="dashboard"] .dash-content-tab > .mb-6,
body[data-page="dashboard"] .dash-content-tab > .flex:first-child {
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}

body[data-page="dashboard"] .dash-content-tab form {
  gap: clamp(0.82rem, 2vw, 1.08rem) !important;
}

body[data-page="dashboard"] label {
  letter-spacing: 0.02em !important;
}

body[data-page="dashboard"] #qr-modal > div,
#transfer-confirm-modal > div,
#pin-change-modal > div,
#modal-txn-details .relative {
  border-radius: var(--qs-radius-lg) !important;
  box-shadow: var(--qs-shadow-strong) !important;
}

#chat-panel {
  border-radius: var(--qs-radius-lg) !important;
  border: 1px solid rgba(7,17,31,0.08) !important;
  box-shadow: var(--qs-shadow-strong) !important;
}

#toast-container > div {
  border-radius: var(--qs-radius-md) !important;
}

@media (max-width: 767px) {
  body[data-page="home"] .ref-hero__grid,
  body[data-page="home"] .ref-calculator__grid,
  body[data-page="home"] .ref-security__grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="home"] .ref-showcase {
    margin-top: 0.4rem !important;
  }

  body[data-page="home"] .ref-phone--side {
    display: none !important;
  }

  body[data-page="home"] .ref-copy h1 {
    font-size: clamp(2.35rem, 14vw, 4rem) !important;
  }

  body[data-page="login"] #view-login .glass-card,
  body[data-page="register"] #view-register .glass-card,
  body[data-page="dashboard"] .dash-content-tab > .glass-card,
  body[data-page="dashboard"] .dash-content-tab > div > .glass-card {
    border-radius: 1.15rem !important;
    padding: clamp(1rem, 4vw, 1.25rem) !important;
  }

  body[data-page="register"] #form-register .grid.grid-cols-2,
  body[data-page="dashboard"] .grid.grid-cols-2 {
    gap: 0.72rem !important;
  }

  #chat-panel {
    width: calc(100vw - 1.5rem) !important;
    max-height: 72dvh !important;
    right: -0.2rem !important;
  }
}

@media (min-width: 768px) {
  body[data-page="dashboard"] .dash-content-tab > .glass-card,
  body[data-page="dashboard"] .dash-content-tab > div > .glass-card {
    padding: clamp(1.35rem, 2.6vw, 1.85rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}
/* QuickSend global layout fluency polish end */



/* QuickSend professional feedback system start */
#toast-container {
  top: max(1rem, env(safe-area-inset-top)) !important;
  right: max(1rem, env(safe-area-inset-right)) !important;
  width: min(calc(100vw - 2rem), 26rem) !important;
  max-width: none !important;
  padding: 0 !important;
  gap: 0.65rem !important;
}

.qs-toast {
  --qs-toast-accent: #0b4dff;
  --qs-toast-soft: #eef4ff;
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2rem;
  gap: 0.78rem;
  align-items: start;
  width: 100%;
  overflow: hidden;
  padding: 0.9rem 0.82rem 0.95rem;
  border: 1px solid rgba(7, 17, 31, 0.1);
  border-left: 4px solid var(--qs-toast-accent);
  border-radius: 0.9rem !important;
  color: #07111f;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(7, 17, 31, 0.18);
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(1rem, -0.3rem, 0);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}

.dark .qs-toast { color: #f7f9fc; background: rgba(13, 23, 39, 0.98); border-color: rgba(255,255,255,0.1); }
.qs-toast--visible { opacity: 1; transform: translate3d(0, 0, 0); }
.qs-toast--leaving { opacity: 0; transform: translate3d(0.75rem, 0, 0); }
.qs-toast--success { --qs-toast-accent: #0f9f6e; --qs-toast-soft: #e9f9f2; }
.qs-toast--error { --qs-toast-accent: #df3c4c; --qs-toast-soft: #fff0f2; }
.qs-toast--warning { --qs-toast-accent: #c78200; --qs-toast-soft: #fff7df; }
.qs-toast--info { --qs-toast-accent: #0b4dff; --qs-toast-soft: #eef4ff; }
.dark .qs-toast--success { --qs-toast-soft: rgba(15,159,110,0.16); }
.dark .qs-toast--error { --qs-toast-soft: rgba(223,60,76,0.16); }
.dark .qs-toast--warning { --qs-toast-soft: rgba(199,130,0,0.16); }
.dark .qs-toast--info { --qs-toast-soft: rgba(11,77,255,0.16); }

.qs-toast__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--qs-toast-accent); background: var(--qs-toast-soft); font-size: 1.1rem; }
.qs-toast__content { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding-top: 0.05rem; }
.qs-toast__title { color: inherit; font-size: 0.92rem; line-height: 1.25; font-weight: 800; }
.qs-toast__message { margin-top: 0.2rem; color: #5d6878; font-size: 0.79rem; line-height: 1.45; font-weight: 520; overflow-wrap: anywhere; }
.dark .qs-toast__message { color: #b8c1cf; }
.qs-toast__action { margin-top: 0.55rem; padding: 0; border: 0; color: var(--qs-toast-accent); background: transparent; font-size: 0.78rem; font-weight: 800; }
.qs-toast__action:hover { text-decoration: underline; }
.qs-toast__close { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 0.55rem; color: #647083; background: transparent; transition: color 160ms ease, background 160ms ease; }
.qs-toast__close:hover { color: #07111f; background: rgba(7,17,31,0.06); }
.dark .qs-toast__close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.qs-toast__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--qs-toast-accent); transform-origin: left; animation: qs-toast-progress var(--qs-toast-duration, 5200ms) linear forwards; }
.qs-toast--paused .qs-toast__progress { animation-play-state: paused; }
.qs-toast--pulse { animation: qs-toast-pulse 340ms ease; }
@keyframes qs-toast-progress { to { transform: scaleX(0); } }
@keyframes qs-toast-pulse { 50% { transform: scale(1.018); } }

.notif-item { border-radius: 0.85rem !important; }
.notif-item.is-unread { border-left: 3px solid #0b4dff !important; background: rgba(11,77,255,0.055) !important; }
.notif-title { letter-spacing: 0 !important; }
.notif-message { line-height: 1.48 !important; }

@media (max-width: 540px) {
  #toast-container { top: max(0.75rem, env(safe-area-inset-top)) !important; left: 0.75rem !important; right: 0.75rem !important; width: auto !important; }
  .qs-toast { grid-template-columns: 2.25rem minmax(0, 1fr) 1.85rem; gap: 0.68rem; padding: 0.82rem 0.72rem 0.88rem; }
  .qs-toast__icon { width: 2.25rem; height: 2.25rem; }
  .qs-toast__title { font-size: 0.88rem; }
  .qs-toast__message { font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .qs-toast, .qs-toast__progress { animation: none !important; transition: none !important; }
}
/* QuickSend professional feedback system end */


/* QuickSend transaction workflow animation start */
.qs-tx-motion {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.qs-tx-motion--show { opacity: 1; pointer-events: auto; }
.qs-tx-motion__panel {
  width: min(100%, 27rem);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 1.65rem;
  padding: 1.35rem;
  color: #f8fafc;
  background: linear-gradient(145deg, rgba(4,13,33,0.98), rgba(7,17,31,0.96));
  box-shadow: 0 28px 90px rgba(0,0,0,0.48);
  transform: translateY(0.7rem) scale(0.98);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.qs-tx-motion--show .qs-tx-motion__panel { transform: translateY(0) scale(1); }
.qs-tx-motion__orb {
  width: 4.7rem;
  height: 4.7rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 1.45rem;
  color: white;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.24), rgba(11,77,255,0.92) 52%, rgba(6,38,118,0.96));
  box-shadow: 0 18px 44px rgba(11,77,255,0.36);
  position: relative;
}
.qs-tx-motion__orb::after {
  content: "";
  position: absolute;
  inset: -0.45rem;
  border: 2px solid rgba(255,255,255,0.16);
  border-top-color: rgba(245,183,0,0.95);
  border-radius: 1.8rem;
  animation: qs-tx-spin 1.2s linear infinite;
}
.qs-tx-motion__orb i { font-size: 2rem; }
.qs-tx-motion--success .qs-tx-motion__orb { background: linear-gradient(135deg, #0f9f6e, #22c55e); box-shadow: 0 18px 44px rgba(34,197,94,0.28); }
.qs-tx-motion--error .qs-tx-motion__orb { background: linear-gradient(135deg, #df3c4c, #ef4444); box-shadow: 0 18px 44px rgba(239,68,68,0.28); }
.qs-tx-motion--success .qs-tx-motion__orb::after,
.qs-tx-motion--error .qs-tx-motion__orb::after { animation: none; border-color: rgba(255,255,255,0.24); }
.qs-tx-motion__eyebrow {
  margin: 0;
  text-align: center;
  color: #f5b700;
  font-size: 0.67rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.qs-tx-motion__title {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
}
.qs-tx-motion__subtitle {
  margin: 0.55rem auto 0;
  max-width: 22rem;
  text-align: center;
  color: #b8c1cf;
  font-size: 0.88rem;
  line-height: 1.45;
}
.qs-tx-motion__amount {
  min-height: 3.25rem;
  margin: 1rem 0;
  display: grid;
  place-items: center;
  gap: 0.18rem;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 1.1rem;
  background: rgba(255,255,255,0.055);
}
.qs-tx-motion__amount:empty { display: none; }
.qs-tx-motion__amount strong { font-size: 1.35rem; line-height: 1; font-weight: 950; }
.qs-tx-motion__amount span { max-width: 92%; color: #94a3b8; font-size: 0.72rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-tx-motion__track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.qs-tx-motion__track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0b4dff, #f5b700, #22c55e);
  transition: width 260ms ease;
}
.qs-tx-motion__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.qs-tx-motion__step {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.62rem 0.35rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.9rem;
  color: #94a3b8;
  background: rgba(255,255,255,0.035);
  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
}
.qs-tx-motion__step.is-active { color: white; border-color: rgba(245,183,0,0.36); background: rgba(245,183,0,0.10); }
.qs-tx-motion__step.is-active i { animation: qs-tx-spin 1s linear infinite; }
.qs-tx-motion__step.is-done { color: #86efac; border-color: rgba(34,197,94,0.28); background: rgba(34,197,94,0.08); }
.qs-tx-motion__note {
  margin: 1rem 0 0;
  color: #7f8da3;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 700;
}
@keyframes qs-tx-spin { to { transform: rotate(360deg); } }
@media (max-width: 540px) {
  .qs-tx-motion { align-items: end; }
  .qs-tx-motion__panel { border-radius: 1.45rem 1.45rem max(1.45rem, env(safe-area-inset-bottom)) max(1.45rem, env(safe-area-inset-bottom)); padding: 1.15rem; }
  .qs-tx-motion__orb { width: 4.25rem; height: 4.25rem; }
  .qs-tx-motion__title { font-size: 1.35rem; }
  .qs-tx-motion__steps { gap: 0.32rem; }
  .qs-tx-motion__step { font-size: 0.6rem; padding: 0.58rem 0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qs-tx-motion, .qs-tx-motion__panel, .qs-tx-motion__track span { transition: none !important; }
  .qs-tx-motion__orb::after, .qs-tx-motion__step.is-active i { animation: none !important; }
}
/* QuickSend transaction workflow animation end */


/* QuickSend premium image navigation icons */
.qs-nav-icon-img {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.58rem;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(3, 53, 83, 0.12);
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.mobile-nav-btn .qs-nav-icon-img {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 0.74rem;
}

.dash-nav-item.active .qs-nav-icon-img,
.mobile-nav-btn.active .qs-nav-icon-img,
.mobile-nav-btn.text-brand-royal .qs-nav-icon-img,
.qs-nav-icon-img.qs-nav-icon-active {
  transform: translateY(-1px) scale(1.08);
  box-shadow: 0 12px 24px rgba(3, 53, 83, 0.24), 0 0 0 3px rgba(181, 238, 65, 0.22);
}

.qs-cta-icon-img {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 0.52rem;
  object-fit: cover;
  box-shadow: 0 8px 16px rgba(3, 53, 83, 0.16);
}

.qs-action-icon-shell {
  width: 3.55rem;
  height: 3.55rem;
  border-radius: 1.05rem;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(7,17,31,0.08);
  box-shadow: 0 12px 26px rgba(4,47,79,0.12);
}

.qs-action-icon-img {
  width: 3.05rem;
  height: 3.05rem;
  border-radius: 0.92rem;
  object-fit: cover;
  transition: transform 180ms ease;
}

.group:hover .qs-action-icon-img {
  transform: scale(1.06);
}

@media (max-width: 767px) {
  body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn {
    overflow: visible !important;
  }
}


/* QuickSend premium navigation final polish */
body[data-page="dashboard"] #layout-dashboard nav.fixed.bottom-0 {
  left: clamp(0.8rem, 3.5vw, 1.35rem) !important;
  right: clamp(0.8rem, 3.5vw, 1.35rem) !important;
  bottom: calc(env(safe-area-inset-bottom) + 0.78rem) !important;
  height: 4.6rem !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0.22rem !important;
  padding: 0.58rem 0.62rem !important;
  border-radius: 1.45rem !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(7, 17, 31, 0.075) !important;
  box-shadow: 0 18px 40px rgba(3, 53, 83, 0.16), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn {
  position: relative !important;
  width: 100% !important;
  max-width: 3.25rem !important;
  height: 3.32rem !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 1.05rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.16rem;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 999px;
  background: #cfff4a;
  box-shadow: 0 0 0 4px rgba(207, 255, 74, 0.2);
  opacity: 0;
  transform: translateX(-50%) scale(0.65);
  transition: opacity 160ms ease, transform 160ms ease;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.active::after,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.text-brand-royal::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn .qs-nav-icon-img,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn i {
  width: 2.18rem !important;
  height: 2.18rem !important;
  min-width: 2.18rem !important;
  min-height: 2.18rem !important;
  border-radius: 0.78rem !important;
  display: grid !important;
  place-items: center !important;
  object-fit: cover !important;
  color: #5f6c69 !important;
  background: rgba(255,255,255,0.66) !important;
  border: 1px solid rgba(7,17,31,0.055) !important;
  box-shadow: 0 8px 18px rgba(4,47,79,0.08) !important;
  filter: none !important;
  transform: none !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn i {
  font-size: 1.34rem !important;
  line-height: 1 !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.active .qs-nav-icon-img,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.text-brand-royal .qs-nav-icon-img,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn .qs-nav-icon-img.qs-nav-icon-active,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.active i,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.text-brand-royal i {
  width: 2.34rem !important;
  height: 2.34rem !important;
  min-width: 2.34rem !important;
  min-height: 2.34rem !important;
  transform: translateY(-0.12rem) scale(1.02) !important;
  background: #07364e !important;
  color: #ffffff !important;
  border-color: rgba(207,255,74,0.34) !important;
  box-shadow: 0 12px 22px rgba(3,53,83,0.22), 0 0 0 3px rgba(207,255,74,0.12) !important;
}

body[data-page="dashboard"] #layout-dashboard .dash-nav-item .qs-nav-icon-img {
  width: 1.82rem !important;
  height: 1.82rem !important;
  border-radius: 0.7rem !important;
  box-shadow: 0 8px 16px rgba(4,47,79,0.09) !important;
}

body[data-page="dashboard"] #layout-dashboard .dash-nav-item.active .qs-nav-icon-img {
  transform: scale(1.03) !important;
  box-shadow: 0 10px 20px rgba(3,53,83,0.18), 0 0 0 3px rgba(207,255,74,0.16) !important;
}


/* QuickSend premium nav active specificity fix */
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.active,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.text-brand-royal {
  background: rgba(3, 53, 83, 0.045) !important;
  color: #07364e !important;
  box-shadow: inset 0 0 0 1px rgba(3, 53, 83, 0.045) !important;
}


/* QuickSend premium notification center */
#dash-bell-btn.qs-bell-btn {
  isolation: isolate;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 12px 28px rgba(3, 53, 83, 0.10), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

.dark #dash-bell-btn.qs-bell-btn {
  background: rgba(9,18,36,0.92) !important;
}

#dash-bell-btn.qs-bell-btn[aria-expanded="true"] {
  color: #07364e !important;
  box-shadow: 0 14px 30px rgba(3, 53, 83, 0.16), 0 0 0 4px rgba(207,255,74,0.16) !important;
}

#notif-dropdown.qs-notif-panel {
  max-height: min(72vh, 43rem) !important;
  overflow: hidden !important;
  border-radius: 1.55rem !important;
  border: 1px solid rgba(7, 17, 31, 0.08) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 28px 70px rgba(2, 20, 36, 0.22), inset 0 1px 0 rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(24px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.22) !important;
}

.dark #notif-dropdown.qs-notif-panel {
  border-color: rgba(255,255,255,0.09) !important;
  background: rgba(5, 12, 27, 0.97) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.qs-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(7,17,31,0.07);
  background: linear-gradient(135deg, rgba(246,250,252,0.98), rgba(235,247,243,0.92));
}

.dark .qs-notif-head {
  border-bottom-color: rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(7,18,39,0.98), rgba(4,43,54,0.72));
}

.qs-notif-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.qs-notif-head-icon {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 0.9rem;
  display: grid;
  place-items: center;
  color: #07364e;
  background: #cfff4a;
  box-shadow: 0 10px 22px rgba(207,255,74,0.22);
}

.qs-notif-title {
  display: block;
  color: #07111f;
  font-weight: 950;
  font-size: 0.95rem;
  line-height: 1.1;
}

.dark .qs-notif-title { color: #fff; }

.qs-notif-subtitle {
  margin: 0.24rem 0 0;
  color: #74807d;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.qs-notif-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.qs-notif-count,
.qs-notif-mark-all,
.qs-notif-close {
  border: 1px solid rgba(7,17,31,0.08);
  background: rgba(255,255,255,0.78);
  color: #07111f;
  box-shadow: 0 8px 18px rgba(3,53,83,0.08);
}

.dark .qs-notif-count,
.dark .qs-notif-mark-all,
.dark .qs-notif-close {
  border-color: rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.qs-notif-count {
  min-width: 1.6rem;
  height: 1.6rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #ff3b30;
  border-color: rgba(255,59,48,0.35);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 950;
}

.qs-notif-mark-all {
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
}

.qs-notif-close {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.72rem;
}

#notif-list.qs-notif-list {
  flex: 1;
  min-height: 12rem;
  overflow-y: auto;
  padding: 0.72rem;
  display: grid;
  gap: 0.62rem;
  background: rgba(246,250,252,0.72);
}

.dark #notif-list.qs-notif-list {
  background: rgba(2,6,18,0.72);
}

.qs-notif-empty {
  min-height: 12rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.65rem;
  padding: 1.6rem 1rem;
  text-align: center;
  color: #7a8583;
}

.qs-notif-empty span {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 1.05rem;
  display: grid;
  place-items: center;
  background: rgba(3,53,83,0.08);
  color: #07364e;
  font-size: 1.45rem;
}

.dark .qs-notif-empty span { background: rgba(255,255,255,0.07); color: #cfff4a; }

.qs-notif-empty h3 {
  margin: 0;
  color: #07111f;
  font-size: 1rem;
  font-weight: 950;
}

.dark .qs-notif-empty h3 { color: #fff; }

.qs-notif-empty p {
  max-width: 17rem;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
}

.qs-notif-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem !important;
  border: 1px solid rgba(7,17,31,0.07) !important;
  background: rgba(255,255,255,0.9) !important;
  box-shadow: 0 10px 28px rgba(3,53,83,0.08) !important;
}

.dark .qs-notif-card {
  border-color: rgba(255,255,255,0.075) !important;
  background: rgba(255,255,255,0.045) !important;
}

.qs-notif-card.is-unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 0.22rem;
  border-radius: 999px;
  background: #145bff;
}

.qs-notif-card-top {
  display: flex;
  gap: 0.78rem;
  padding: 0.82rem;
}

.qs-notif-icon {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  border-radius: 0.82rem;
  display: grid !important;
  place-items: center !important;
  font-size: 1.14rem !important;
  background: rgba(20,91,255,0.1);
  color: #145bff;
}

.qs-notif-card.is-success .qs-notif-icon { background: rgba(34,197,94,0.12); color: #16a34a; }
.qs-notif-card.is-error .qs-notif-icon { background: rgba(255,59,48,0.12); color: #ff3b30; }
.qs-notif-card.is-warning .qs-notif-icon { background: rgba(245,183,0,0.16); color: #c78300; }

.qs-notif-copy {
  min-width: 0;
  flex: 1;
}

.qs-notif-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.65rem;
}

.qs-notif-card-title {
  margin: 0;
  color: #07111f;
  font-size: 0.88rem;
  line-height: 1.25;
  font-weight: 950;
}

.dark .qs-notif-card-title { color: #fff; }

.qs-notif-message {
  margin: 0.32rem 0 0;
  color: #5f6c69;
  font-size: 0.78rem;
  line-height: 1.4;
}

.dark .qs-notif-message { color: #b8c1cf; }

.qs-notif-delete {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  display: grid !important;
  place-items: center !important;
  border-radius: 0.62rem;
  border: 1px solid rgba(7,17,31,0.06);
  background: rgba(7,17,31,0.035);
  color: #72807d;
}

.dark .qs-notif-delete { border-color: rgba(255,255,255,0.07); background: rgba(255,255,255,0.045); }

.qs-notif-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.65rem;
  color: #8a9693;
  font-size: 0.66rem;
  font-weight: 800;
}

.qs-notif-type {
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  background: rgba(3,53,83,0.07);
  color: #07364e;
}

.dark .qs-notif-type { background: rgba(255,255,255,0.07); color: #cdd6e3; }

.qs-notif-read-btn {
  margin-left: auto;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  background: #07364e !important;
  color: #fff !important;
  font-size: 0.66rem !important;
  font-weight: 950 !important;
}

@media (max-width: 640px) {
  #notif-dropdown.qs-notif-panel {
    inset: auto max(0.75rem, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 5.85rem) max(0.75rem, env(safe-area-inset-left)) !important;
    top: auto !important;
    width: auto !important;
    max-height: min(70vh, 35rem) !important;
    border-radius: 1.45rem !important;
  }
  .qs-notif-head { padding: 0.9rem; }
  .qs-notif-mark-all { padding: 0 0.62rem; }
  .qs-notif-subtitle { display: none; }
}
/* QuickSend premium notification center end */


/* QuickSend visual motion polish final */
:root {
  --qs-motion-fast: 160ms;
  --qs-motion-mid: 260ms;
  --qs-motion-slow: 420ms;
  --qs-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --qs-motion-spring: cubic-bezier(.16, 1, .3, 1);
}

html {
  scroll-behavior: smooth;
}

body,
#layout-dashboard,
#main-scroll {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#main-scroll {
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.app-view,
.glass-card,
.hist-item,
.qs-toast,
.qs-notif-card,
.qs-tx-motion__panel,
.mobile-nav-btn,
.dash-nav-item,
.qs-nav-icon-img,
.qs-action-icon-img,
button {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body[data-page="login"] #view-login .glass-card,
body[data-page="register"] #view-register .glass-card {
  animation: qs-auth-rise 480ms var(--qs-motion-spring) both !important;
}

body[data-page="home"] .animate-fade-in,
#layout-dashboard .animate-fade-in {
  animation: qs-fade-up 520ms var(--qs-motion-spring) both !important;
}

body[data-page="home"] .animate-slide-up,
#layout-dashboard .animate-slide-up {
  animation: qs-slide-up 560ms var(--qs-motion-spring) both !important;
}

body[data-page="home"] .animate-float,
#layout-dashboard .animate-float {
  animation: qs-float-soft 6.5s ease-in-out infinite !important;
}

#layout-dashboard .dash-content-tab.qs-tab-enter {
  animation: qs-tab-enter 320ms var(--qs-motion-spring) both !important;
  will-change: transform, opacity;
}

#layout-dashboard .glass-card,
body[data-page="home"] .glass-card,
body[data-page="login"] .glass-card,
body[data-page="register"] .glass-card,
.hist-item,
.qs-notif-card {
  transform: translateZ(0);
  transition:
    transform var(--qs-motion-mid) var(--qs-motion-ease),
    box-shadow var(--qs-motion-mid) var(--qs-motion-ease),
    border-color var(--qs-motion-mid) var(--qs-motion-ease),
    background-color var(--qs-motion-mid) var(--qs-motion-ease),
    opacity var(--qs-motion-mid) var(--qs-motion-ease) !important;
}

@media (hover: hover) and (pointer: fine) {
  #layout-dashboard .glass-card:hover,
  body[data-page="home"] .glass-card:hover,
  .hist-item:hover {
    transform: translate3d(0, -0.16rem, 0);
  }
}

#layout-dashboard button,
body[data-page="home"] button,
body[data-page="login"] button,
body[data-page="register"] button,
#layout-dashboard a,
body[data-page="home"] a {
  touch-action: manipulation;
  transition:
    transform var(--qs-motion-fast) var(--qs-motion-ease),
    box-shadow var(--qs-motion-mid) var(--qs-motion-ease),
    background-color var(--qs-motion-mid) var(--qs-motion-ease),
    border-color var(--qs-motion-mid) var(--qs-motion-ease),
    color var(--qs-motion-mid) var(--qs-motion-ease) !important;
}

#layout-dashboard button:active,
body[data-page="home"] button:active,
body[data-page="login"] button:active,
body[data-page="register"] button:active {
  transform: translate3d(0, 1px, 0) scale(0.985);
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn,
body[data-page="dashboard"] #layout-dashboard .dash-nav-item {
  transition:
    transform var(--qs-motion-mid) var(--qs-motion-spring),
    background-color var(--qs-motion-mid) var(--qs-motion-ease),
    box-shadow var(--qs-motion-mid) var(--qs-motion-ease),
    color var(--qs-motion-mid) var(--qs-motion-ease) !important;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.active,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn.text-brand-royal {
  animation: qs-nav-press 360ms var(--qs-motion-spring) both;
}

body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn .qs-nav-icon-img,
body[data-page="dashboard"] #layout-dashboard .mobile-nav-btn i,
.qs-action-icon-img {
  transition:
    transform var(--qs-motion-mid) var(--qs-motion-spring),
    box-shadow var(--qs-motion-mid) var(--qs-motion-ease),
    filter var(--qs-motion-mid) var(--qs-motion-ease) !important;
}

.tracker-line-fill,
.qs-tx-motion__track span {
  transition: width 460ms var(--qs-motion-spring) !important;
}

.step-circle,
.qs-tx-motion__step {
  transition:
    transform var(--qs-motion-mid) var(--qs-motion-spring),
    background-color var(--qs-motion-mid) var(--qs-motion-ease),
    border-color var(--qs-motion-mid) var(--qs-motion-ease),
    color var(--qs-motion-mid) var(--qs-motion-ease),
    box-shadow var(--qs-motion-mid) var(--qs-motion-ease) !important;
}

.step-processing,
.qs-tx-motion__step.is-active {
  animation: qs-status-breathe 1.7s ease-in-out infinite !important;
}

.qs-toast {
  transform: translate3d(0, -0.8rem, 0) scale(0.985) !important;
  transition:
    opacity 240ms var(--qs-motion-ease),
    transform 300ms var(--qs-motion-spring),
    box-shadow 240ms var(--qs-motion-ease) !important;
}

.qs-toast--visible {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.qs-toast--leaving {
  opacity: 0 !important;
  transform: translate3d(0, -0.45rem, 0) scale(0.985) !important;
}

#notif-dropdown.qs-notif-panel:not(.hidden) {
  animation: qs-popover-in 260ms var(--qs-motion-spring) both;
  transform-origin: top right;
}

.qs-notif-card {
  animation: qs-list-item-in 260ms var(--qs-motion-spring) both;
}

.qs-tx-motion {
  transition: opacity 260ms var(--qs-motion-ease) !important;
}

.qs-tx-motion__panel {
  opacity: 0;
  transform: translate3d(0, 1.1rem, 0) scale(0.965) !important;
  transition:
    opacity 260ms var(--qs-motion-ease),
    transform 360ms var(--qs-motion-spring) !important;
}

.qs-tx-motion--show .qs-tx-motion__panel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.qs-tx-motion__orb {
  overflow: hidden;
  transform: translateZ(0);
}

.qs-tx-motion__orb::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,0.26) 46%, transparent 64%);
  transform: translateX(-42%) rotate(12deg);
  animation: qs-orb-shine 2.4s ease-in-out infinite;
}

.qs-tx-motion__orb i {
  position: relative;
  z-index: 1;
}

.qs-tx-motion__track span {
  background-size: 200% 100% !important;
  animation: qs-track-flow 1.6s linear infinite;
}

.chat-bubble-user,
.chat-bubble-bot {
  animation: qs-message-in 260ms var(--qs-motion-spring) both !important;
  transform-origin: bottom;
}

@keyframes qs-auth-rise {
  from { opacity: 0; transform: translate3d(0, 1.25rem, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes qs-fade-up {
  from { opacity: 0; transform: translate3d(0, 0.85rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes qs-slide-up {
  from { opacity: 0; transform: translate3d(0, 1.35rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes qs-float-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -0.42rem, 0); }
}

@keyframes qs-tab-enter {
  from { opacity: 0; transform: translate3d(0, 0.65rem, 0) scale(0.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes qs-nav-press {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes qs-status-breathe {
  0%, 100% { transform: translateZ(0) scale(1); box-shadow: 0 0 0 rgba(245,183,0,0); }
  50% { transform: translateZ(0) scale(1.025); box-shadow: 0 0 20px rgba(245,183,0,0.24); }
}

@keyframes qs-popover-in {
  from { opacity: 0; transform: translate3d(0, -0.55rem, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes qs-list-item-in {
  from { opacity: 0; transform: translate3d(0, 0.42rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes qs-orb-shine {
  0%, 45% { transform: translateX(-58%) rotate(12deg); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translateX(58%) rotate(12deg); opacity: 0; }
}

@keyframes qs-track-flow {
  to { background-position: 200% 0; }
}

@keyframes qs-message-in {
  from { opacity: 0; transform: translate3d(0, 0.35rem, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 640px) {
  #notif-dropdown.qs-notif-panel:not(.hidden) {
    transform-origin: bottom center;
    animation-name: qs-sheet-in;
  }
  @keyframes qs-sheet-in {
    from { opacity: 0; transform: translate3d(0, 0.9rem, 0) scale(0.985); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  #main-scroll {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* QuickSend visual motion polish final end */


/* QuickSend fintech motion discipline + loading states */
.qs-update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 100002;
  width: min(calc(100vw - 1.5rem), 34rem);
  transform: translate3d(-50%, 1rem, 0);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem;
  border-radius: 1.15rem;
  background: #07111f;
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 18px 50px rgba(2, 8, 20, .28);
  transition: opacity 220ms var(--qs-motion-ease), transform 260ms var(--qs-motion-spring);
}
.qs-update-banner.is-visible { opacity: 1; pointer-events: auto; transform: translate3d(-50%, 0, 0); }
.qs-update-banner strong { display:block; font-size:.86rem; font-weight:950; }
.qs-update-banner span { display:block; margin-top:.1rem; color:#aab6c4; font-size:.72rem; font-weight:700; }
.qs-update-banner button { border:0; font-weight:950; }
#qs-update-now { margin-left:auto; border-radius:.85rem; padding:.7rem .85rem; background:#eaff82; color:#033553; font-size:.74rem; white-space:nowrap; }
#qs-update-dismiss { width:2.25rem; height:2.25rem; border-radius:.85rem; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:#fff; }

.qs-skeleton-list { display:grid; gap:.82rem; }
.qs-skeleton-card { min-height:5.6rem; display:flex; align-items:center; gap:.9rem; padding:1rem !important; overflow:hidden; position:relative; }
.qs-skeleton-card::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation:qs-skeleton-shimmer 1.25s ease-in-out infinite; }
.qs-skeleton-icon, .qs-skeleton-copy span, .qs-skeleton-amount { background:rgba(100,116,139,.16); border-radius:999px; }
.dark .qs-skeleton-icon, .dark .qs-skeleton-copy span, .dark .qs-skeleton-amount { background:rgba(255,255,255,.09); }
.qs-skeleton-icon { width:3rem; height:3rem; flex:0 0 auto; border-radius:1rem; }
.qs-skeleton-copy { flex:1; display:grid; gap:.48rem; }
.qs-skeleton-copy span { display:block; height:.68rem; }
.qs-skeleton-copy span:nth-child(1) { width:64%; }
.qs-skeleton-copy span:nth-child(2) { width:42%; }
.qs-skeleton-copy span:nth-child(3) { width:78%; height:.48rem; opacity:.65; }
.qs-skeleton-amount { width:4.7rem; height:1.15rem; flex:0 0 auto; }
@keyframes qs-skeleton-shimmer { 100% { transform:translateX(100%); } }

.qs-stepper-4 {
  position: relative;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items:start;
  gap:.25rem;
  margin-top:1.25rem;
  padding-top:.1rem;
}
.qs-stepper-line { position:absolute; left:2rem; right:2rem; top:1rem; height:3px; border-radius:99px; background:rgba(100,116,139,.18); overflow:hidden; }
.qs-stepper-line span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #0B4DFF, #00C853); transition:width 420ms var(--qs-motion-spring); }
.qs-step { position:relative; z-index:1; display:grid; justify-items:center; gap:.38rem; min-width:0; color:#94a3b8; }
.qs-step-dot { width:2rem; height:2rem; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#eef2f7; border:1px solid rgba(100,116,139,.2); font-size:.95rem; box-shadow:0 5px 12px rgba(15,23,42,.05); }
.dark .qs-step-dot { background:#101b2f; border-color:rgba(255,255,255,.08); }
.qs-step-label { max-width:4.7rem; text-align:center; font-size:.58rem; line-height:1.05; font-weight:950; text-transform:uppercase; letter-spacing:.04em; }
.qs-step.is-done .qs-step-dot { background:#00C853; border-color:#00C853; color:#fff; }
.qs-step.is-current .qs-step-dot { background:#F5B700; border-color:#F5B700; color:#07111f; box-shadow:0 0 0 4px rgba(245,183,0,.12); }
.qs-step.is-error .qs-step-dot { background:#FF3B30; border-color:#FF3B30; color:#fff; box-shadow:0 0 0 4px rgba(255,59,48,.12); }
.qs-step.is-done .qs-step-label { color:#00a84d; }
.qs-step.is-current .qs-step-label { color:#b77900; }
.qs-step.is-error .qs-step-label { color:#FF3B30; }

body[data-page="dashboard"] .animate-float,
body[data-page="dashboard"] .mobile-nav-btn.active,
body[data-page="dashboard"] .mobile-nav-btn.text-brand-royal,
body[data-page="dashboard"] .dash-nav-item.active {
  animation: none !important;
}

body[data-page="dashboard"] .glass-card:hover,
body[data-page="dashboard"] .hist-item:hover {
  transform: translate3d(0, -.08rem, 0) !important;
}

body[data-page="dashboard"] #digital-card,
body[data-page="home"] .ref-hero,
body[data-page="home"] [data-i18n="hero_btn_open"],
body[data-page="dashboard"] .step-processing,
body[data-page="dashboard"] .qs-step.is-current .qs-step-dot,
body[data-page="dashboard"] .qs-step.is-error .qs-step-dot {
  will-change: auto;
}

@media (max-width: 767px) {
  .dark .glass-card,
  #layout-dashboard .glass-card,
  #layout-dashboard .nav-bg,
  #layout-dashboard nav.fixed.bottom-0,
  #notif-dropdown,
  #chat-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body[data-page="dashboard"] .glass-card:hover,
  body[data-page="dashboard"] .hist-item:hover {
    transform:none !important;
  }
  .qs-update-banner {
    bottom: calc(6.2rem + env(safe-area-inset-bottom));
    align-items:flex-start;
  }
  .qs-update-banner strong { font-size:.8rem; }
  .qs-update-banner span { font-size:.66rem; }
  #qs-update-now { padding:.65rem .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html, body, #main-scroll { scroll-behavior:auto !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .qs-skeleton-card::after { animation:none !important; opacity:0; }
}
/* QuickSend fintech motion discipline + loading states end */


/* QuickSend WhatsApp-style support workflow + transaction help */
#recent-txns-container .hist-item,
#full-history-container .hist-item {
  overflow: hidden !important;
}

body[data-page="dashboard"] .qs-txn-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: .85rem !important;
  width: 100% !important;
}

body[data-page="dashboard"] .qs-txn-main {
  display: flex !important;
  align-items: center !important;
  gap: .82rem !important;
  min-width: 0 !important;
}

body[data-page="dashboard"] .qs-txn-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}

body[data-page="dashboard"] .qs-txn-title {
  color: #07111f !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.dark body[data-page="dashboard"] .qs-txn-title,
body.dark[data-page="dashboard"] .qs-txn-title {
  color: #fff !important;
}

body[data-page="dashboard"] .qs-txn-meta {
  color: #64748b !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-top: .28rem !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

body[data-page="dashboard"] .qs-txn-status {
  font-size: .72rem !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  margin-top: .25rem !important;
}

body[data-page="dashboard"] .qs-txn-amount {
  min-width: 6.1rem !important;
  max-width: 42vw !important;
  text-align: right !important;
}

body[data-page="dashboard"] .qs-txn-amount p {
  color: #07111f !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: clamp(.98rem, 4.3vw, 1.35rem) !important;
  font-weight: 950 !important;
  line-height: 1.03 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

body[data-page="dashboard"] .qs-txn-amount span {
  display: block !important;
  color: #94a3b8 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin-top: .25rem !important;
  white-space: nowrap !important;
}

body[data-page="dashboard"] #modal-txn-details .border-b {
  gap: .75rem !important;
  align-items: flex-start !important;
}

body[data-page="dashboard"] #modal-txn-details #inv-id,
body[data-page="dashboard"] #modal-txn-details #inv-name,
body[data-page="dashboard"] #modal-txn-details #inv-method,
body[data-page="dashboard"] #modal-txn-details #inv-receiver {
  min-width: 0 !important;
  max-width: min(64vw, 24rem) !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body[data-page="dashboard"] #modal-txn-details #inv-method .inline-flex {
  max-width: 100% !important;
}

@media (max-width: 430px) {
  body[data-page="dashboard"] .hist-item {
    padding: .88rem !important;
  }

  body[data-page="dashboard"] .qs-txn-card-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .65rem !important;
  }

  body[data-page="dashboard"] .qs-txn-amount {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    text-align: left !important;
    padding-left: calc(3rem + .82rem) !important;
  }

  body[data-page="dashboard"] .qs-txn-amount p {
    font-size: 1rem !important;
  }

  body[data-page="dashboard"] .qs-txn-meta {
    font-size: .68rem !important;
  }
}

#chat-widget #chat-btn {
  box-shadow: 0 12px 30px rgba(3,53,83,.28) !important;
}
#chat-panel {
  width: min(94vw, 24rem) !important;
  height: min(78vh, 38rem) !important;
  border-radius: 1.55rem !important;
  border: 1px solid rgba(8, 20, 36, .10) !important;
  overflow: hidden !important;
}
#chat-panel > div:first-child {
  background: linear-gradient(135deg, #033553, #075f68) !important;
  padding: 1rem !important;
}
#chat-messages {
  background:
    radial-gradient(circle at 20% 0%, rgba(208,255,90,.08), transparent 32%),
    linear-gradient(180deg, #eef7f4, #f8fafc) !important;
  gap: 0 !important;
}
.dark #chat-messages {
  background:
    radial-gradient(circle at 20% 0%, rgba(208,255,90,.08), transparent 32%),
    linear-gradient(180deg, #061426, #020612) !important;
}
.qs-chat-row { display:flex; flex-direction:column; width:100%; margin:.42rem 0; }
.qs-chat-row.is-user { align-items:flex-end; }
.qs-chat-row.is-bot { align-items:flex-start; }
.qs-chat-row > span {
  margin: 0 0 .2rem .35rem;
  color: #0b6b74;
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dark .qs-chat-row > span { color: #95d8df; }
.chat-bubble-user,
.chat-bubble-bot {
  max-width: min(86%, 20rem) !important;
  padding: .78rem .88rem !important;
  font-size: .86rem !important;
  line-height: 1.42 !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
}
.chat-bubble-user {
  background: #0b5cff !important;
  color: #fff !important;
  border-radius: 1.05rem 1.05rem .22rem 1.05rem !important;
}
.chat-bubble-bot {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 1.05rem 1.05rem 1.05rem .22rem !important;
}
.dark .chat-bubble-bot {
  background: rgba(255,255,255,.08) !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,.08);
}
.qs-chat-suggestions {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:.5rem;
  margin:.75rem 0;
}
.qs-chat-suggestions button {
  min-height: 3.2rem;
  border: 1px solid rgba(3,53,83,.10);
  border-radius: 1rem;
  background: rgba(255,255,255,.82);
  color: #033553;
  font-size: .68rem;
  font-weight: 950;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.22rem;
}
.dark .qs-chat-suggestions button {
  background: rgba(255,255,255,.07);
  color:#eaff82;
  border-color: rgba(255,255,255,.08);
}
.qs-chat-agent-cta { display:flex; justify-content:flex-start; margin:.65rem 0; }
.qs-chat-agent-cta button {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border:0;
  border-radius:999px;
  background:#033553;
  color:white;
  padding:.76rem 1rem;
  font-size:.76rem;
  font-weight:950;
  box-shadow: 0 10px 24px rgba(3,53,83,.22);
}
.qs-chat-agent-note,
.qs-chat-system-pill {
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin:.62rem auto;
  padding:.48rem .72rem;
  border-radius:999px;
  background:rgba(3,53,83,.08);
  color:#52616f;
  font-size:.64rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.dark .qs-chat-agent-note,
.dark .qs-chat-system-pill {
  background:rgba(255,255,255,.08);
  color:#aab6c4;
}
.qs-chat-txn-card {
  margin-top:.68rem;
  padding:.72rem;
  border-radius:.9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
}
.chat-bubble-bot .qs-chat-txn-card {
  background:#f1f7ff;
  border-color:rgba(11,92,255,.12);
}
.dark .chat-bubble-bot .qs-chat-txn-card {
  background:rgba(11,92,255,.12);
  border-color:rgba(255,255,255,.10);
}
.qs-chat-txn-card span {
  display:block;
  color:inherit;
  opacity:.68;
  font-size:.58rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.qs-chat-txn-card strong { display:block; font-size:.78rem; line-height:1.2; margin:.12rem 0; }
.qs-chat-txn-card small { display:block; opacity:.78; font-size:.62rem; font-weight:800; }
.qs-chat-txn-card button {
  border:0;
  border-radius:.75rem;
  background:#eaff82;
  color:#033553;
  padding:.55rem .7rem;
  font-size:.64rem;
  font-weight:950;
  white-space:nowrap;
}
.qs-txn-help-composer {
  margin: .85rem 0 1rem;
  padding: .88rem;
  border-radius: 1.15rem;
  background: #ffffff;
  border: 1px solid rgba(3,53,83,.10);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}
.dark .qs-txn-help-composer {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
}
.qs-txn-help-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.68rem;
}
.qs-txn-help-head span {
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  color:#033553;
  font-size:.76rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.dark .qs-txn-help-head span { color:#eaff82; }
.qs-txn-help-head button {
  width:2rem;
  height:2rem;
  border:0;
  border-radius:.75rem;
  background:#eef4f7;
  color:#033553;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dark .qs-txn-help-head button {
  background:rgba(255,255,255,.08);
  color:#fff;
}
.qs-txn-help-summary {
  padding:.75rem;
  border-radius:.92rem;
  background:linear-gradient(135deg, rgba(3,53,83,.08), rgba(7,95,104,.08));
  margin-bottom:.72rem;
}
.qs-txn-help-summary strong {
  display:block;
  color:#07111f;
  font-size:.86rem;
  font-weight:950;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.dark .qs-txn-help-summary strong { color:#fff; }
.qs-txn-help-summary small {
  display:block;
  margin-top:.22rem;
  color:#64748b;
  font-size:.66rem;
  font-weight:850;
}
.dark .qs-txn-help-summary small { color:#b9c6d4; }
.qs-txn-help-label {
  color:#64748b;
  font-size:.7rem;
  font-weight:850;
  margin:.15rem 0 .55rem;
}
.dark .qs-txn-help-label { color:#b9c6d4; }
.qs-txn-help-suggestions {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.45rem;
  margin-bottom:.68rem;
}
.qs-txn-help-suggestions button {
  min-height:2.45rem;
  border:1px solid rgba(3,53,83,.10);
  border-radius:.9rem;
  background:#f8fbff;
  color:#033553;
  padding:.45rem .55rem;
  font-size:.68rem;
  font-weight:950;
  line-height:1.15;
  text-align:left;
}
.qs-txn-help-suggestions button:active {
  transform: scale(.98);
}
.dark .qs-txn-help-suggestions button {
  background:rgba(255,255,255,.08);
  color:#f8fafc;
  border-color:rgba(255,255,255,.10);
}
.qs-txn-help-form {
  display:grid !important;
  gap:.55rem !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}
.qs-txn-help-form textarea {
  width:100%;
  min-height:5.8rem;
  resize:vertical;
  border:1px solid rgba(3,53,83,.12);
  border-radius:1rem;
  background:#f8fafc;
  color:#07111f;
  padding:.78rem .85rem;
  font-size:.85rem;
  font-weight:750;
  outline:none;
}
.qs-txn-help-form textarea:focus {
  border-color:#0b5cff;
  box-shadow:0 0 0 4px rgba(11,92,255,.10);
}
.dark .qs-txn-help-form textarea {
  background:rgba(2,6,18,.72);
  color:#fff;
  border-color:rgba(255,255,255,.10);
}
.qs-txn-help-form button {
  min-height:2.85rem;
  border:0;
  border-radius:1rem;
  background:linear-gradient(135deg, #0b5cff, #033553);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.48rem;
  font-size:.82rem;
  font-weight:950;
  box-shadow:0 12px 24px rgba(11,92,255,.20);
}
.qs-txn-actions { margin-top:.9rem; display:flex; justify-content:flex-end; }
.qs-txn-help-btn {
  display:inline-flex;
  align-items:center;
  gap:.44rem;
  min-height:2.35rem;
  padding:.62rem .95rem;
  border:1px solid rgba(3,53,83,.18);
  border-radius:999px;
  background:linear-gradient(135deg, #033553, #075f68) !important;
  color:#ffffff !important;
  font-size:.76rem;
  font-weight:950;
  line-height:1 !important;
  text-shadow:none !important;
  box-shadow:0 10px 22px rgba(3,53,83,.16);
}
.qs-txn-help-btn i,
.qs-txn-help-btn span {
  color:#ffffff !important;
  opacity:1 !important;
}
.dark .qs-txn-help-btn {
  background:linear-gradient(135deg, #033553, #075f68) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.18) !important;
}
@media (max-width: 430px) {
  .qs-txn-actions {
    justify-content:stretch !important;
  }
  .qs-txn-help-btn {
    justify-content:center !important;
    width:100% !important;
    min-height:2.55rem !important;
    font-size:.8rem !important;
  }
}
#chat-panel form {
  background:#fff !important;
  border-top:1px solid rgba(15,23,42,.08) !important;
}
.dark #chat-panel form {
  background:#07111f !important;
  border-top-color:rgba(255,255,255,.08) !important;
}
#chat-panel .qs-txn-help-form,
.dark #chat-panel .qs-txn-help-form {
  background:transparent !important;
  border:0 !important;
}
@media (max-width: 640px) {
  #chat-widget { right: .9rem !important; }
  #chat-panel {
    position: fixed !important;
    left: .75rem !important;
    right: .75rem !important;
    bottom: calc(5.9rem + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: min(74dvh, 36rem) !important;
    max-height: 74dvh !important;
  }
  .qs-chat-suggestions { grid-template-columns: 1fr; }
}