/* style.css */

:root {
  --primary: #00a884;
  --primary-hover: #008f6c;
  --primary-light: #e6fcf5;
  --primary-border: #a7f3d0;
  --accent-purple: #8b5cf6;
  --accent-purple-hover: #7c3aed;
  --accent-purple-light: #faf5ff;
  --accent-purple-border: #d8b4fe;
  --accent-blue: #1d4ed8;
  --accent-blue-hover: #1e40af;
  --accent-blue-light: #eff6ff;
  --accent-blue-border: #bfdbfe;
  --pinned-gold: #eab308;
  --pinned-gold-dark: #ca8a04;
  --pinned-gold-light: #fefce8;
  --pinned-gold-border: #fde047;
  --success: #10b981;
  --success-hover: #059669;
  --success-light: #f0fdf4;
  --success-border: #bbf7d0;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: #fffbeb;
  --warning-border: #fde68a;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-light: #fef2f2;
  --danger-border: #fecaca;
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-sub: linear-gradient(180deg, #ffffff, #f7fbfe, #f7fbfe, #f7fbfe);
  --text-main: #000000;
  --text-muted: #64748b;
  --border: #cbd5e1;
  --border-light: #000000;
  --radius-sm: clamp(4px, 0.4vw, 8px);
  --radius-md: clamp(8px, 0.7vw, 12px);
  --radius-lg: clamp(10px, 1vw, 16px);
  --radius-xl: clamp(14px, 1.4vw, 24px);
  --radius-2xl: clamp(18px, 1.8vw, 32px);
  --radius-pill: 9999px;
  --font-main: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Roboto', system-ui, sans-serif;
  --font-code: 'Fira Code', Consolas, Monaco, monospace;
  --font-size-title: clamp(15px, 2.2vw, 36px);
  --font-size-subtitle: clamp(11px, 1.2vw, 18px);
  --font-size-body: clamp(12px, 1vw, 16px);
  --font-size-small: clamp(10px, 0.85vw, 14px);
  --font-size-card-val: clamp(18px, 2.4vw, 38px);
  --icon-size-base: clamp(14px, 1.2vw, 24px);
  --icon-size-lg: clamp(20px, 2vw, 44px);
  --z-base: 1;
  --z-card: 2;
  --z-sticky: 100;
  --z-bottom-nav: 2000;
  --z-pwa-banner: 4000;
  --z-modal-backdrop: 5000;
  --z-modal-content: 5001;
}

html[data-theme="dark"] {
  --bg-main: #0b0f19;
  --bg-card: #111827;
  --bg-card-sub: #1f2937;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border: #334155;
  --border-light: #1e293b;
  --primary-light: rgba(0, 168, 132, 0.16);
  --primary-border: rgba(0, 168, 132, 0.4);
  --accent-purple-light: rgba(139, 92, 246, 0.16);
  --accent-purple-border: rgba(139, 92, 246, 0.4);
  --accent-blue-light: rgba(29, 78, 216, 0.16);
  --accent-blue-border: rgba(29, 78, 216, 0.4);
  --pinned-gold-light: rgba(234, 179, 8, 0.15);
  --pinned-gold-border: rgba(234, 179, 8, 0.45);
  --success-light: rgba(16, 185, 129, 0.16);
  --success-border: rgba(16, 185, 129, 0.4);
  --danger-light: rgba(239, 68, 68, 0.16);
  --danger-border: rgba(239, 68, 68, 0.4);
  --warning-light: rgba(245, 158, 11, 0.16);
  --warning-border: rgba(245, 158, 11, 0.4);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  direction: ltr;
  text-align: left;
  scroll-behavior: smooth;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  direction: ltr;
  text-align: left;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-body);
  font-weight: 500;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  touch-action: pan-x pan-y;
  user-select: auto;
  -webkit-user-select: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-ellipsis,
.fricuit_truncate,
.u3v4w5x6y7z8a9b0c1d2e3f4g5h6i7j8,
.y3z4a5b6c7d8e9f0g1h2i3j4k5l6m7n8,
.r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a strong,
.r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a span,
.fricuit_nav_tile_text strong,
.fricuit_nav_tile_text span,
.o9p0q1r2s3t4u5v6w7x8y9z0a1b2c3d4e5 strong,
.o9p0q1r2s3t4u5v6w7x8y9z0a1b2c3d4e5 span,
.vcard_header span,
.vcard_footer span,
.n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 td,
.j3k4l5m6n7o8p9q0r1s2t3u4v5w6x7y8,
.transfer_recipient_actions_bar button span,
.fricuit_nav_tile_text div strong,
.batch_detail_row span,
.batch_report_header span,
.h3q8m1x7v4k9r2t6p5d0w8c3z7b1n9l h3,
.fricuit_logo_nav_title_box h3,
.fricuit_logo_nav_title_box span,
.tx_desc_truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
}

.j3k4l5m6n7o8p9q0r1s2t3u4v5w6x7y8,
.fricuit_multiline_clamp {
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
}

::-webkit-scrollbar-track {
  background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

i.fa-solid,
i.fa-brands,
i.fa-regular {
  display: inline-block;
  vertical-align: middle;
  font-size: var(--icon-size-base);
}

body.privacy_mode_active .privacy_sensitive {
  filter: blur(8px) !important;
  user-select: none !important;
  cursor: pointer;
}

/* ==========================================================================
   Minimalist Geometric Logo System (Pure Vector / CSS Architecture)
   ========================================================================== */
.app_icon_box_white {
  background: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: clamp(10px, 1vw, 16px) !important;
  aspect-ratio: 4 / 3 !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

.fricuit_geometric_logo_canvas {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3 !important;
  background: #ffffff !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

.fricuit_logo_vector_svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
  image-rendering: -webkit-optimize-contrast;
}

/* Fallback / Native Icon Image */
.app_icon_balanced_img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

.fricuit_interactive_logo_btn {
  cursor: pointer;
  position: relative;
  user-select: none;
}


/* ==========================================================================
   Birthday Celebratory Logo Design & Animations
   ========================================================================== */
.fricuit_birthday_active_logo {
  border-color: var(--pinned-gold) !important;
  animation: birthdayLogoPulse 2.4s ease-in-out infinite alternate !important;
}

.fricuit_birthday_hat_overlay {
  position: absolute;
  top: -16%;
  left: 10%;
  width: 44%;
  height: 48%;
  z-index: 10;
  pointer-events: none;
  transform-origin: bottom center;
  animation: partyHatWiggle 3s ease-in-out infinite;
}

.fricuit_birthday_sparkle_1 {
  position: absolute;
  top: 4%;
  right: 6%;
  width: 18%;
  height: 18%;
  z-index: 11;
  pointer-events: none;
  animation: sparkleTwinkle 1.8s ease-in-out infinite;
}

.fricuit_birthday_sparkle_2 {
  position: absolute;
  bottom: 40%;
  left: 20%;
  width: 14%;
  height: 14%;
  z-index: 11;
  pointer-events: none;
  animation: sparkleTwinkle 2.2s ease-in-out infinite 0.6s;
}

@keyframes partyHatWiggle {
  0%, 100% {
    transform: rotate(-14deg) scale(1);
  }
  50% {
    transform: rotate(-6deg) scale(1.08);
  }
}

@keyframes sparkleTwinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.6) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(45deg);
  }
}

/* ==========================================================================
   Virtual Currency Cards
   ========================================================================== */
.virtual_currency_card {
  border-radius: var(--radius-xl);
  padding: clamp(14px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  border: 2px solid var(--border-light);
  color: var(--text-main);
  background-color: var(--bg-card);
  min-height: 140px;
}

.virtual_currency_card.pinned_currency_highlight {
  border-color: var(--pinned-gold);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--pinned-gold-light) 100%);
}

.virtual_currency_card.base_currency_highlight {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--primary-light) 100%);
}

.vcard_market_ticker_strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  margin: 5px 0;
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-card-sub);
  border: 1px solid var(--border-light);
}

.ticker_buy {
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 3px;
}

.ticker_sell {
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 3px;
}

.vcard_intl_badge {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.vcard_intl_badge.international {
  background: var(--accent-purple-light);
  color: var(--accent-purple);
  border: 1px solid var(--accent-purple-border);
}

.vcard_intl_badge.local {
  background: var(--bg-card-sub);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.vcard_pin_badge {
  background: var(--pinned-gold-light);
  color: var(--pinned-gold-dark);
  border: 1px solid var(--pinned-gold-border);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vcard_code_pill {
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: var(--bg-card-sub);
  color: var(--text-main);
}

/* ==========================================================================
   PWA & Top Headers
   ========================================================================== */
.m7q2x9k4v8p1z6r3t5n0w8c2y4h6d9s {
  position: fixed;
  top: clamp(6px, 1.2vw, 14px);
  left: 50%;
  width: calc(100% - clamp(12px, 2vw, 32px));
  max-width: 680px;
  background: var(--bg-card);
  border: 2px solid var(--primary-border);
  border-radius: var(--radius-xl);
  padding: clamp(8px, 1vw, 14px) clamp(12px, 1.5vw, 20px);
  z-index: var(--z-pwa-banner);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.m7q2x9k4v8p1z6r3t5n0w8c2y4h6d9s-content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.b8n3x7m5q1r9v4k6t2z0p8w5c3y7h1f {
  width: clamp(48px, 4.8vw, 60px);
  height: clamp(36px, 3.6vw, 45px);
}

.r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a strong {
  font-family: var(--font-main);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 800;
  color: var(--text-main);
}

.r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a span {
  font-family: var(--font-body);
  font-size: clamp(9px, 0.8vw, 12px);
  color: var(--text-muted);
}

.t6m1q8x3v9k4z7r2n5p0w6c8y3h1d9s {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.c9x4m7q2v8n1k5z3r6p0w9t4y7h2d8f {
  background: var(--primary);
  color: #ffffff;
  border: none;
  padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1.2vw, 18px);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.c9x4m7q2v8n1k5z3r6p0w9t4y7h2d8f:hover {
  background: var(--primary-hover);
}

.p3k8v1m6x9q4r7z2n5w0c8t3y6h1d9a {
  background: none;
  border: none;
  font-size: clamp(16px, 1.5vw, 24px);
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6 {
  width: 100%;
  min-height: 100vh;
  padding: clamp(6px, 1.5vw, 28px);
  display: flex;
  justify-content: center;
}

.b1c2d3e4f5g6h7i8j9k0l1m2n3o4p5q6 {
  width: 100%;
  max-width: 1540px;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 24px);
}

.c1d2e3f4g5h6i7j8k9l0m1n2o3p4q5r6 {
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(8px, 1.2vw, 18px) clamp(10px, 1.6vw, 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: clamp(4px, 0.8vw, 12px);
  z-index: var(--z-sticky);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.d1e2f3g4h5i6j7k8l9m0n1o2p3q4r5s6 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.e1f2g3h4i5j6k7l8m9n0o1p2q3r4s5t6,
.h7q2m9x5v3k8z1r6n4p0w7c9y2t5d8f {
  width: clamp(48px, 4.4vw, 64px);
  height: clamp(36px, 3.3vw, 48px);
}

.f1g2h3i4j5k6l7m8n9o0p1q2r3s4t5u6 h1 {
  font-family: var(--font-main);
  font-size: var(--font-size-title);
  color: var(--text-main);
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6 {
  padding: clamp(5px, 0.6vw, 10px) clamp(8px, 1vw, 16px);
  border-radius: var(--radius-pill);
  font-family: var(--font-main);
  font-size: var(--font-size-small);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background: var(--bg-card);
  color: var(--text-main);
  border: 2px solid var(--border-light);
}

.k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6.r1s2t3u4v5w6x7y8z9a0b1c2d3e4f5g6 {
  background: var(--warning-light);
  color: var(--warning-hover);
  border-color: var(--warning-border);
}

.u1v2w3x4y5z6a7b8c9d0e1f2g3h4i5j6 {
  display: block;
  width: 100%;
}

.a3b4c5d6e7f8g9h0i1j2k3l4m5n6o7p8 {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 22px);
  width: 100%;
  min-width: 0;
}

.c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8 {
  display: none;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 22px);
  width: 100%;
}

.c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8.a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7 {
  display: flex;
}

.d3e4f5g6h7i8j9k0l1m2n3o4p5q6r7s8 {
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(12px, 1.6vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 20px);
}

.f3g4h5i6j7k8l9m0n1o2p3q4r5s6t7u8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px dashed var(--border-light);
  padding-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.g3h4i5j6k7l8m9n0o1p2q3r4s5t6u7v8 {
  font-family: var(--font-main);
  font-size: clamp(13px, 1.3vw, 20px);
  font-weight: 900;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.j3k4l5m6n7o8p9q0r1s2t3u4v5w6x7y8 {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.6;
}

.k3l4m5n6o7p8q9r0s1t2u3v4w5x6y7z8 {
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(8px, 1.2vw, 16px);
  background: var(--bg-card-sub);
}

.l3m4n5o6p7q8r9s0t1u2v3w4x5y6z7a8 label {
  font-family: var(--font-main);
  font-size: var(--font-size-small);
  font-weight: 800;
  color: var(--text-main);
  display: block;
  margin-bottom: 6px;
}

.m3n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8 {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.m3n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8.s6t7u8v9w0x1y2z3a4b5c6d7e8f9g0h1 {
  direction: ltr;
}

.m3n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8 input {
  flex: 1;
  font-family: var(--font-code);
  font-size: clamp(10px, 0.85vw, 13px);
  font-weight: 700;
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: clamp(8px, 0.9vw, 12px);
  color: var(--text-main);
  text-align: left;
  min-width: 0;
  outline: none;
}

.m3n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8 input:focus {
  border-color: var(--primary);
}

/* ==========================================================================
   Transfer Inputs Grid & Summaries
   ========================================================================== */
.transfer_four_inputs_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  width: 100%;
}

.input_wrapper_send {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.transfer_recipient_actions_bar {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}

.transfer_recipient_actions_bar button {
  flex: 1 1 auto;
  min-width: clamp(110px, 14vw, 180px);
  padding: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 16px);
  font-size: var(--font-size-small);
}

.currency_mismatch_alert_box {
  background: var(--danger-light);
  border: 2px solid var(--danger-border);
  border-radius: var(--radius-xl);
  padding: clamp(12px, 1.5vw, 20px);
}

.mismatch_alert_header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  font-family: var(--font-main);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 900;
  margin-bottom: 6px;
}

#lbl_mismatch_warning_desc {
  font-size: var(--font-size-body);
  color: var(--danger-hover);
  line-height: 1.5;
  margin-bottom: 12px;
}

.mismatch_rates_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.mismatch_rate_card {
  background: var(--bg-card);
  border: 1.5px solid var(--danger-border);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mismatch_rate_card span {
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--text-muted);
}

.mismatch_rate_card strong {
  font-family: var(--font-code);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 900;
  color: var(--danger);
}

.q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8_4cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  width: 100%;
}

.r3s4t5u6v7w8x9y0z1a2b3c4d5e6f7g8 {
  padding: clamp(12px, 1.4vw, 20px);
  border-radius: var(--radius-xl);
  border: 2px solid var(--border-light);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-card);
  position: relative;
  min-width: 0;
}

.r3s4t5u6v7w8x9y0z1a2b3c4d5e6f7g8.interactive_currency_slot {
  cursor: pointer;
}


.t3u4v5w6x7y8z9a0b1c2d3e4f5g6h7i8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.u3v4w5x6y7z8a9b0c1d2e3f4g5h6i7j8 {
  font-family: var(--font-main);
  font-size: var(--font-size-small);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.slot_tag_badge {
  font-family: var(--font-main);
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-light);
  background: var(--bg-card-sub);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.slot_edit_hint {
  font-size: 11px;
}

.w3x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8 {
  font-family: var(--font-main);
  font-size: var(--font-size-card-val);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  word-break: break-all;
  font-weight: 900;
  direction: ltr;
  justify-content: flex-start;
}

.w3x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8 small {
  font-size: clamp(10px, 0.9vw, 16px);
  font-weight: 700;
  color: var(--text-muted);
}

.y3z4a5b6c7d8e9f0g1h2i3j4k5l6m7n8 {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9 {
  font-family: var(--font-main);
  font-size: clamp(9px, 0.75vw, 12px);
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-light);
  background: var(--bg-card-sub);
}

.q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8_10grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 20vw, 320px), 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}

.vcard_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-main);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 800;
  gap: 6px;
}

.vcard_balance {
  font-family: var(--font-main);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 900;
  direction: ltr;
  text-align: left;
  margin: 4px 0 2px 0;
}

.vcard_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-light);
  padding-top: 8px;
  margin-top: 6px;
}

/* ==========================================================================
   Modals & Popups System
   ========================================================================== */
#modal_currency_details {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 2vw, 24px);
}

#modal_currency_details > div {
  width: 100%;
  max-width: min(600px, 96vw);
  max-height: min(92vh, 880px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-2xl);
}

#modal_currency_details .h3n7v5k9q2m6x4r8t1y7p3c5w9j2a6 {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(10px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 16px);
}

.curr_modal_hero_banner {
  background: var(--bg-card-sub);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(12px, 1.8vw, 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 14px);
  min-width: 0;
}

.curr_code_pill {
  font-family: var(--font-code);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 800;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-border);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
  white-space: nowrap;
}

.btn_pin_currency_toggle {
  background: var(--bg-card);
  border: 2px solid var(--pinned-gold-border);
  color: var(--pinned-gold-dark);
  border-radius: var(--radius-pill);
  padding: clamp(5px, 0.7vw, 8px) clamp(10px, 1.2vw, 16px);
  font-family: var(--font-main);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn_pin_currency_toggle.is_pinned {
  background: var(--pinned-gold);
  color: #ffffff;
  border-color: var(--pinned-gold-dark);
}

.curr_modal_balance_display {
  border-top: 1px dashed var(--border-light);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.curr_modal_balance_display span.lbl_balance_title {
  font-size: clamp(11px, 0.9vw, 13px);
  color: var(--text-muted);
  font-weight: 800;
}

.curr_modal_balance_display .curr_bal_val_box {
  display: flex;
  align-items: baseline;
  gap: 6px;
  direction: ltr;
  justify-content: flex-start;
}

.curr_modal_balance_display strong#lbl_curr_modal_balance {
  font-family: var(--font-main);
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 900;
  color: var(--primary);
  line-height: 1.1;
  word-break: break-all;
}

.curr_modal_balance_display span#lbl_curr_modal_symbol {
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 800;
  color: var(--text-main);
}

.vcard_rate_calc_box {
  background: var(--bg-card-sub);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(10px, 1.4vw, 14px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vcard_usd_equiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
}

.vcard_usd_equiv strong {
  font-family: var(--font-code);
  color: var(--primary);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 900;
  direction: ltr;
}

.vcard_rate_formula {
  display: flex;
  flex-direction: column;
  font-size: clamp(10px, 0.85vw, 12px);
  color: var(--text-muted);
  font-family: var(--font-code);
  line-height: 1.4;
  word-break: break-all;
}

.curr_modal_actions_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1vw, 12px);
  margin-top: 4px;
}

.curr_modal_actions_grid button {
  width: 100%;
  padding: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 14px);
  font-size: clamp(11px, 0.9vw, 13px);
  min-height: clamp(38px, 3.2vw, 46px);
  white-space: nowrap;
}

.tx_modal_hero_banner {
  background: var(--bg-card-sub);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(14px, 2vw, 22px);
}

.tx_modal_info_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.tx_info_row {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tx_info_row span {
  font-size: var(--font-size-small);
  color: var(--text-muted);
  font-weight: 700;
}

.tx_info_row strong {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--text-main);
  word-break: break-word;
}

.tx_table_row_clickable {
  cursor: pointer;
}

.tx_table_row_clickable:hover td {
  background: var(--primary-light) !important;
}

/* ==========================================================================
   Batch Reports & Tables
   ========================================================================== */
.batch_images_report_box {
  background: var(--bg-card-sub);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(12px, 1.5vw, 20px);
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.batch_report_header {
  font-family: var(--font-main);
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
}

.batch_report_stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.batch_stat_item {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-small);
}

.batch_stat_item strong {
  font-size: clamp(13px, 1.2vw, 18px);
  font-family: var(--font-code);
}

.batch_report_details_list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.batch_detail_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: var(--font-size-small);
  gap: 8px;
}

.batch_detail_row.success {
  border-left: 4px solid var(--success);
}

.batch_detail_row.rejected {
  border-left: 4px solid var(--danger);
  color: var(--text-muted);
}

.f4g5h6i7j8k9l0m1n2o3p4q5r6s7t8u9 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(6px, 1vw, 14px);
}

.g4h5i6j7k8l9m0n1o2p3q4r5s6t7u8v9 {
  padding: clamp(8px, 1vw, 14px) clamp(10px, 1.2vw, 16px);
  border-radius: var(--radius-lg);
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  font-weight: 800;
  border: 2px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.g4h5i6j7k8l9m0n1o2p3q4r5s6t7u8v9:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.m4n5o6p7q8r9s0t1u2v3w4x5y6z7a8b9 {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-light);
  -webkit-overflow-scrolling: touch;
}

.n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  min-width: 440px;
}

.n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 th {
  color: var(--text-main);
  font-family: var(--font-main);
  font-weight: 800;
  font-size: var(--font-size-small);
  padding: clamp(8px, 1vw, 14px);
  background: var(--bg-card);
  border-bottom: 2px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

.n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 td {
  padding: clamp(8px, 1vw, 14px);
  background: var(--bg-card);
  color: var(--text-main);
  border-bottom: 2px solid var(--border-light);
}

.p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8e9 {
  text-align: center !important;
  color: var(--text-muted);
  padding: clamp(18px, 2.5vw, 32px) !important;
  font-family: var(--font-body);
  font-weight: 700;
}

.t4u5v6w7x8y9z0a1b2c3d4e5f6g7h8i9 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: clamp(10px, 1.2vw, 16px);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-light);
  background: var(--bg-card-sub);
}

.u4v5w6x7y8z9a0b1c2d3e4f5g6h7i8j9 {
  flex: 1;
  min-width: 130px;
}

.u4v5w6x7y8z9a0b1c2d3e4f5g6h7i8j9.v4w5x6y7z8a9b0c1d2e3f4g5h6i7j8k9 {
  flex: 2;
  min-width: 200px;
}

.d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-main);
  font-size: var(--font-size-small);
  font-weight: 800;
  color: var(--text-muted);
  border-top: 2px dashed var(--border);
  padding-top: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.m5n6o7p8q9r0s1t2u3v4w5x6y7z8a9b0 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m5n6o7p8q9r0s1t2u3v4w5x6y7z8a9b0 label {
  font-family: var(--font-main);
  font-size: var(--font-size-small);
  font-weight: 800;
  color: var(--text-main);
}

.x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8m9,
.z4a5b6c7d8e9f0g1h2i3j4k5l6m7n8o9,
.y6z7a8b9c0d1e2f3g4h5i6j7k8l9m0n1 {
  width: 100%;
  padding: clamp(8px, 0.9vw, 12px) clamp(10px, 1.2vw, 16px);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
}

.x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8m9:focus,
.z4a5b6c7d8e9f0g1h2i3j4k5l6m7n8o9:focus,
.y6z7a8b9c0d1e2f3g4h5i6j7k8l9m0n1:focus {
  border-color: var(--primary);
}

.x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8m9.o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9d0 {
  font-size: var(--font-size-body);
  direction: ltr;
  text-align: center;
}

.t5u6v7w8x9y0z1a2b3c4d5e6f7g8h9i0 {
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(8px, 1.2vw, 16px);
  margin-top: 10px;
  background: var(--bg-card-sub);
}

.u5v6w7x8y9z0a1b2c3d4e5f6g7h8i9j0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.v5w6x7y8z9a0b1c2d3e4f5g6h7i8j9k0,
.c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  font-weight: 800;
  cursor: pointer;
}

.v5w6x7y8z9a0b1c2d3e4f5g6h7i8j9k0 input,
.c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1 input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

.b6c7d8e9f0g1h2i3j4k5l6m7n8o9p0q1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.y5z6a7b8c9d0e1f2g3h4i5j6k7l8m9n0 {
  border-top: 2px dashed var(--border-light);
  padding-top: 12px;
  margin-top: 12px;
}

.d6e7f8g9h0i1j2k3l4m5n6o7p8q9r0s1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 18vw, 240px), 1fr));
  gap: 12px;
}

.i6j7k8l9m0n1o2p3q4r5s6t7u8v9w0x1 {
  background: var(--bg-card-sub);
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(10px, 1.2vw, 16px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
}

.j6k7l8m9n0o1p2q3r4s5t6u7v8w9x0y1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  gap: 8px;
}

.j6k7l8m9n0o1p2q3r4s5t6u7v8w9x0y1.l6m7n8o9p0q1r2s3t4u5v6w7x8y9z0a1 strong {
  color: var(--success);
}

.q6r7s8t9u0v1w2x3y4z5a6b7c8d9e0f1 {
  background: var(--bg-card-sub);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(10px, 1.2vw, 16px);
}

.p7q8r9s0t1u2v3w4x5y6z7a8b9c0d1e2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
}

.n9o0p1q2r3s4t5u6v7w8x9y0z1a2b3c4d5 {
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(12px, 1.4vw, 18px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.n9o0p1q2r3s4t5u6v7w8x9y0z1a2b3c4d5.selected_contact_highlight {
  border-color: var(--primary);
  background: var(--primary-light);
}

.o9p0q1r2s3t4u5v6w7x8y9z0a1b2c3d4e5 strong {
  font-family: var(--font-main);
  font-size: clamp(12px, 1.1vw, 16px);
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.o9p0q1r2s3t4u5v6w7x8y9z0a1b2c3d4e5 span {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}

.o3p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8 {
  padding: 0 15px;
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-weight: 800;
  font-size: var(--font-size-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: clamp(38px, 3.2vw, 48px);
  border: 2px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-main);
}

.o3p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.b7c8d9e0f1g2h3i4j5k6l7m8n9o0p1q2 {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

.b7c8d9e0f1g2h3i4j5k6l7m8n9o0p1q2:hover {
  background: var(--primary-hover) !important;
}

.x7y8z9a0b1c2d3e4f5g6h7i8j9k0l1m2 {
  background: var(--danger);
  color: #ffffff;
  border: none;
  padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1.2vw, 16px);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-weight: 800;
  font-size: var(--font-size-small);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.x7y8z9a0b1c2d3e4f5g6h7i8j9k0l1m2:hover {
  background: var(--danger-hover);
}

.f5g6h7i8j9k0l1m2n3o4p5q6r7s8t9u0,
.l4m5n6o7p8q9r0s1t2u3v4w5x6y7z8a9 {
  background: none;
  border: none;
  font-family: var(--font-main);
  font-size: var(--font-size-small);
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.z7a8b9c0d1e2f3g4h5i6j7k8l9m0n1o2 {
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(12px, 1.8vw, 24px);
  background: var(--bg-card);
}

.a8b9c0d1e2f3g4h5i6j7k8l9m0n1o2p3 {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  gap: 12px;
  align-items: center;
}

.d8e9f0g1h2i3j4k5l6m7n8o9p0q1r2s3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2t3 {
  width: clamp(38px, 3.5vw, 50px);
  height: clamp(38px, 3.5vw, 50px);
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 1.2vw, 18px);
  color: var(--primary);
}

.e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2t3:hover {
  transform: rotate(180deg);
  background: var(--primary-light);
  border-color: var(--primary-border);
}

.i8j9k0l1m2n3o4p5q6r7s8t9u0v1w2x3 {
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 16px);
  font-family: var(--font-main);
  font-size: var(--font-size-small);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card-sub);
}

/* ==========================================================================
   Currency Pickers & QR Display Box
   ========================================================================== */
.currency_picker_search_box {
  width: 100%;
  position: relative;
  margin-bottom: 12px;
}

.currency_picker_search_box input {
  width: 100%;
  padding: clamp(8px, 1vw, 12px) 14px clamp(8px, 1vw, 12px) 38px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
}

.currency_picker_search_box i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.currency_picker_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15vw, 220px), 1fr));
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}

.currency_picker_item {
  padding: 10px 12px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  user-select: none;
}

.currency_picker_item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.currency_picker_item strong {
  font-family: var(--font-main);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 800;
  color: var(--text-main);
}

.currency_picker_item span {
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

.currency_picker_auto_btn {
  width: 100%;
  padding: clamp(10px, 1.2vw, 14px);
  border: 2px dashed var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 12px;
}

#qr_canvas_wrapper {
  background: #ffffff !important;
  border: 2px solid var(--border-light);
  border-radius: 16px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px !important;
  margin: 4px auto !important;
  max-width: 100%;
}

.qr_viewfinder_box {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: clamp(220px, 35vw, 300px);
  background: #000000;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--primary-border);
}

.qr_scanner_reticle_frame {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border: 2.5px solid rgba(0, 168, 132, 0.85);
  border-radius: 16px;
  pointer-events: none;
  overflow: hidden;
}

.qr_scanner_laser_line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #00a884 50%, transparent 100%);
}

@keyframes qrLaserScan {
  0% { top: 5%; opacity: 0.8; }
  50% { opacity: 1; }
  100% { top: 92%; opacity: 0.8; }
}

/* ==========================================================================
   POS Terminal & Kiosk Screen
   ========================================================================== */
.pos_kiosk_fullscreen_modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-card);
  z-index: var(--z-modal-backdrop);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.pos_kiosk_container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(14px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pos_kiosk_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-light);
  padding-bottom: 16px;
}

.pos_kiosk_header h2 {
  font-family: var(--font-main);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pos_close_btn {
  background: none;
  border: none;
  font-size: clamp(24px, 2.5vw, 36px);
  cursor: pointer;
  color: var(--text-muted);
}

.pos_close_btn:hover {
  color: var(--danger);
}

.pos_kiosk_body {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(16px, 2.2vw, 32px);
}

.pos_numpad_pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pos_amount_display {
  background: var(--bg-card-sub);
  border: 2px solid var(--border-light);
  border-radius: 16px;
  padding: clamp(12px, 1.6vw, 22px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-code);
  font-weight: 900;
  direction: ltr;
}

.pos_currency_select {
  font-family: var(--font-main);
  font-size: 10px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--text-main);
  font-weight: 800;
  max-width: 90px;
}

.pos_keypad_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
}

.pos_key_btn {
  height: clamp(52px, 5.5vw, 76px);
  font-family: var(--font-code);
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 800;
  border-radius: 14px;
  border: 2px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
}

.pos_key_btn:active {
  background: var(--primary-light);
}

.pos_key_clear {
  background: var(--danger-light);
  color: var(--danger-hover);
  border-color: var(--danger-border);
}

.pos_qr_pane {
  background: var(--bg-card-sub);
  border: 2px solid var(--border-light);
  border-radius: 20px;
  padding: clamp(16px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.pos_qr_canvas_box {
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid var(--border-light);
  max-width: 100%;
}

.pos_bill_actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.sec_checklist_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-card-sub);
  border: 2px solid var(--border-light);
  font-size: var(--font-size-body);
  gap: 8px;
}

.sec_checklist_item.completed {
  border-color: var(--success-border);
}

/* ==========================================================================
   Navigation Modals & Full Menus
   ========================================================================== */
.fricuit_logo_nav_modal {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-modal-backdrop);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(8px, 2.5vw, 36px) clamp(6px, 1.5vw, 20px);
  overflow-y: auto;
}

.fricuit_logo_nav_backdrop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(11, 15, 25, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1;
}

.fricuit_logo_nav_container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-2xl);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(14px, 2vw, 28px);
  margin-top: auto;
  margin-bottom: auto;
}

.fricuit_logo_nav_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-light);
  padding-bottom: 14px;
}

.fricuit_logo_nav_title_box {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fricuit_logo_nav_title_box h3 {
  font-family: var(--font-main);
  font-size: clamp(14px, 1.4vw, 22px);
  font-weight: 900;
  color: var(--text-main);
  margin: 0;
}

.fricuit_logo_nav_title_box span {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

.fricuit_logo_nav_close_btn {
  background: var(--danger-light);
  border: 2px solid var(--danger-border);
  width: clamp(32px, 3.2vw, 42px);
  height: clamp(32px, 3.2vw, 42px);
  border-radius: 50%;
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--danger-hover);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fricuit_logo_nav_search_bar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.fricuit_logo_nav_search_bar i {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  font-size: 15px;
  pointer-events: none;
}

.fricuit_logo_nav_search_bar input {
  width: 100%;
  padding: clamp(10px, 1.2vw, 14px) 16px clamp(10px, 1.2vw, 14px) 42px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-light);
  background: var(--bg-card-sub);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 600;
  outline: none;
}

.fricuit_logo_nav_search_bar input:focus {
  border-color: var(--primary);
  background: var(--bg-card);
}

.fricuit_logo_nav_body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(85vh - 220px);
  overflow-y: auto;
  padding-right: 4px;
  padding-left: 2px;
}

.fricuit_nav_group_card {
  background: var(--bg-card-sub);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fricuit_nav_group_label {
  font-family: var(--font-main);
  font-size: var(--font-size-small);
  font-weight: 900;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
}

.fricuit_nav_grid_links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 20vw, 280px), 1fr));
  gap: 10px;
}

.fricuit_nav_tile {
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: clamp(10px, 1.2vw, 16px);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}

.fricuit_nav_tile:hover {
  border-color: var(--primary);
}

.fricuit_nav_tile.a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7 {
  border-color: var(--primary);
  background: var(--primary-light);
}

.fricuit_nav_tile_text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.fricuit_nav_tile_text strong {
  font-family: var(--font-main);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 800;
  color: var(--text-main);
}

.fricuit_nav_tile_text span {
  font-family: var(--font-body);
  font-size: clamp(9px, 0.8vw, 12px);
  color: var(--text-muted);
}

/* ==========================================================================
   Bottom Navigation Bar
   ========================================================================== */
.q4m8x2v7k1r9t5p3n6d0h8w4c7z2b9l {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100vw;
  height: clamp(54px, 7.5vw, 68px);
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 2px solid var(--border-light);
  z-index: var(--z-bottom-nav);
  padding: 4px 6px;
}

.x7q2m9v4k1r8t5p3n6d0h7w2c9z4b8l {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  height: 100%;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  user-select: none;
  padding: 2px 0;
  min-width: 0;
}

.p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l i {
  font-size: clamp(14px, 1.8vw, 20px);
}

.p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l span {
  font-family: var(--font-main);
  font-size: clamp(8px, 0.9vw, 11px);
  font-weight: 800;
  white-space: nowrap;
}

.p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l.a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7 {
  color: var(--primary);
}

/* ==========================================================================
   General Dialog Modals
   ========================================================================== */
.w5m9x2q7v1k8r4t6p3n0d7h9c2z5b8l {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal-backdrop);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(8px, 2vw, 20px);
}

.w5m9x2q7v1k8r4t6p3n0d7h9c2z5b8l > div {
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.h3q8m1x7v4k9r2t6p5d0w8c3z7b1n9l {
  background: var(--bg-card-sub);
  padding: clamp(10px, 1.4vw, 16px) clamp(12px, 1.8vw, 20px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-light);
  gap: 8px;
}

.h3q8m1x7v4k9r2t6p5d0w8c3z7b1n9l h3 {
  font-family: var(--font-main);
  font-size: clamp(13px, 1.3vw, 17px);
  font-weight: 900;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.h3n7v5k9q2m6x4r8t1y7p3c5w9j2a6 {
  padding: clamp(12px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.6;
}

.k4m9x1q7v3r8t5p2n6d0h4w9c7z1b8l {
  padding: clamp(10px, 1.2vw, 16px) clamp(14px, 1.8vw, 22px);
  background: var(--bg-card-sub);
  border-top: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.i7m2x8q4v9k3n5r1t6y8p4c7w2h9j5 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  direction: ltr;
}

.m8q3x7v1k9r4t6p2n5d0h8w3c7z1b6l {
  padding: clamp(10px, 1.2vw, 16px);
  font-family: var(--font-code);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 800;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(40px, 4.2vw, 52px);
}

.m8q3x7v1k9r4t6p2n5d0h8w3c7z1b6l:active {
  background: var(--primary-light);
}

.m8q3x7v1k9r4t6p2n5d0h8w3c7z1b6l.action-btn {
  font-family: var(--font-main);
  font-size: var(--font-size-small);
  background: var(--bg-card-sub);
  color: var(--text-muted);
}

.c9v3k7x1m8q4n6r2t9y5p3w8h4j7a6 {
  font-family: var(--font-main);
  font-size: var(--font-size-small);
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--danger-light);
  color: var(--danger-hover);
  border: 2px solid var(--danger-border);
}

.c9v3k7x1m8q4n6r2t9y5p3w8h4j7a6.active {
  background: var(--success-light);
  color: var(--success-hover);
  border-color: var(--success-border);
}

.w7x8y9z0a1b2c3d4e5f6g7h8i9j0k1l2 {
  background: var(--danger-light);
  border: 2px dashed var(--danger-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  color: var(--danger-hover);
}

.h6q3m8x1v9k4r7t2p5d0w8c6z1b9n4l {
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(12px, 1.8vw, 24px);
  margin-top: 16px;
  background: var(--bg-card);
}

.b4q8x2m7n5k1v9r3t6y4p8c2w7h5j9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.b4q8x2m7n5k1v9r3t6y4p8c2w7h5j9 h4 {
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 6px;
}

.a7k2m9x4p6v1n8q3r5t7y2w9c4h6j8 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 18vw, 240px), 1fr));
  gap: 14px;
}

.d2m8q5x9v4k7n1r6t3y8p5c9w2h4j7 {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.g5q9x3m7k4v1n8r6t2y5p9c4w7h3j8, .a6b7c8d9e0f1g2h3i4j5k6l7m8n9o0p1 { margin-top: 8px; }
.z4m7x1q9v3k8r5t2p6d0h7w4c1b9n8l, .q5r6s7t8u9v0w1x2y3z4a5b6c7d8e9f0 { margin-top: 14px; }
.f8r3k6v9m2q5n7t1y4p8c6w3h9j2a7, .w6x7y8z9a0b1c2d3e4f5g6h7i8j9k0l1 { margin-top: 20px; }


/* ==========================================================================
   Responsive Breakpoints & Media Queries
   ========================================================================== */
@media (min-width: 2560px) {
  .b1c2d3e4f5g6h7i8j9k0l1m2n3o4p5q6 {
    max-width: 2400px;
  }
  .q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8_4cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1200px) {
  .q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8_4cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .transfer_four_inputs_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  body {
    padding-bottom: 74px;
  }
  .q4m8x2v7k1r9t5p3n6d0h8w4c7z2b9l {
    display: block;
  }
  .pos_kiosk_body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6 {
    padding: 6px;
  }
  .c1d2e3f4g5h6i7j8k9l0m1n2o3p4q5r6 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
  }
  .q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8_4cards {
    grid-template-columns: 1fr;
  }
  .transfer_four_inputs_grid {
    grid-template-columns: 1fr;
  }
  .q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8_10grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .a8b9c0d1e2f3g4h5i6j7k8l9m0n1o2p3 {
    grid-template-columns: 1fr;
  }
  .d8e9f0g1h2i3j4k5l6m7n8o9p0q1r2s3 {
    margin-top: 0;
  }
  .fricuit_nav_grid_links {
    grid-template-columns: 1fr;
  }
  .transfer_recipient_actions_bar button {
    flex: 1 1 100%;
  }
  .curr_modal_actions_grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8_10grid {
    grid-template-columns: 1fr;
  }
  .f4g5h6i7j8k9l0m1n2o3p4q5r6s7t8u9 {
    grid-template-columns: repeat(2, 1fr);
  }
  .curr_modal_balance_display {
    flex-direction: column;
    align-items: flex-start;
  }
  .curr_modal_balance_display .curr_bal_val_box {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 320px) {
  .f4g5h6i7j8k9l0m1n2o3p4q5r6s7t8u9 {
    grid-template-columns: 1fr;
  }
  .a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6 {
    padding: 2px;
  }
  .curr_modal_hero_banner {
    padding: 8px;
  }
}

/* ==========================================================================
   Print Optimization
   ========================================================================== */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .q4m8x2v7k1r9t5p3n6d0h8w4c7z2b9l,
  .c1d2e3f4g5h6i7j8k9l0m1n2o3p4q5r6,
  .m7q2x9k4v8p1z6r3t5n0w8c2y4h6d9s,
  .q4r5s6t7u8v9w0x1y2z3a4b5c6d7e8f9,
  .fricuit_logo_nav_modal,
  .transfer_recipient_actions_bar,
  .w5m9x2q7v1k8r4t6p3n0d7h9c2z5b8l,
  button {
    display: none !important;
  }
  .n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 th,
  .n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 td {
    border: 1px solid #000000 !important;
    color: #000000 !important;
  }
}