* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: #050814;
  color: #ffffff;
  padding-bottom: 90px;
}

.app-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 15px;
}

/* TOP HEADER */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

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

.logo-icon {
  background: #6366f1;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.brand-title {
  font-size: 20px;
  font-weight: bold;
}

.brand-sub {
  font-size: 11px;
  color: #94a3b8;
}

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

.icon-btn {
  background: #1e293b;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 16px;
  border: 1px solid #334155;
}

.badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #3b82f6;
  color: white;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* WELCOME BANNER */
.welcome-banner {
  background: linear-gradient(135deg, #090e28 0%, #101942 100%);
  border: 1px solid #1e295d;
  border-radius: 16px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.banner-title {
  color: #a855f7;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 6px;
}

.banner-text p {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.4;
  max-width: 280px;
}

.banner-mic {
  font-size: 40px;
  opacity: 0.8;
}

/* BALANCE CARD */
.balance-card {
  background: linear-gradient(180deg, #101636 0%, #0b0f26 100%);
  border: 1px solid #1d285c;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

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

.salio-label {
  font-size: 12px;
  color: #94a3b8;
  letter-spacing: 1px;
}

.level-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
}

.balance-amount {
  font-size: 34px;
  font-weight: bold;
  text-align: center;
  margin: 10px 0 2px;
}

.balance-sub {
  text-align: center;
  color: #22c55e;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 15px;
}

.balance-actions {
  display: flex;
  gap: 10px;
}

.btn-balance {
  flex: 1;
  padding: 12px 8px;
  border-radius: 10px;
  border: none;
  font-weight: bold;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-withdraw { background: #3b82f6; color: white; }
.btn-support { background: #6366f1; color: white; }

/* ACTIVE ACCOUNT BUTTON */
.btn-active-account {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  text-decoration: none;
  padding: 16px;
  border-radius: 14px;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* SUPPLIERS SECTION */
.suppliers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.suppliers-header h3 { font-size: 15px; color: #e2e8f0; }
.suppliers-header a { color: #6366f1; text-decoration: none; font-size: 12px; }

.supplier-card {
  background: #0b0f24;
  border: 1px solid #1a2342;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 15px;
}

.supplier-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.supplier-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #334155;
}

.supplier-name {
  font-weight: bold;
  font-size: 14px;
}

.blue-tick {
  background: #3b82f6;
  color: white;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 50%;
}

.supplier-type {
  font-size: 11px;
  color: #64748b;
}

.payout-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 13px;
}

.message-box {
  background: #060919;
  border: 1px solid #151d36;
  padding: 12px;
  border-radius: 10px;
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 12px;
}

.rec-label {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.timer { color: #64748b; }

.action-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.btn-record {
  flex: 1;
  background: #ef4444;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.3s ease;
}

.btn-record.recording {
  background: #dc2626;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

.btn-play {
  background: #1e293b;
  color: white;
  border: 1px solid #334155;
  width: 42px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-send {
  width: 100%;
  background: #151d33;
  color: #475569;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 12px;
  cursor: not-allowed;
  transition: all 0.3s ease;
}

.btn-send.ready {
  background: #3b82f6;
  color: #ffffff;
  cursor: pointer;
}

.disabled-btn {
  opacity: 0.6;
  cursor: not-allowed !important;
  pointer-events: none;
}

.supplier-footer {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: #64748b;
}

.verified-text { color: #10b981; }

/* FLOATING WHATSAPP BUTTON */
.whatsapp-float {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover { transform: scale(1.1); }

/* POPUP MODAL STYLING */
.custom-modal {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85); z-index: 99999;
  display: flex; justify-content: center; align-items: center;
}

.modal-content {
  background: #0e142e; padding: 22px; border-radius: 20px;
  width: 90%; max-width: 400px; position: relative; border: 1px solid #1e295d;
}

/* WHATSAPP POPUP SPECIFIC DESIGNS */
.modal-phone-icon {
  width: 50px;
  height: 50px;
  background: #1e295d;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 12px;
}

.modal-title-custom {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 6px;
}

.modal-sub-custom {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 20px;
}

.modal-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #060919;
  border: 1px solid #1e295d;
  padding: 14px;
  border-radius: 14px;
  text-decoration: none;
  color: white;
  text-align: left;
  transition: background 0.2s ease;
}

.option-card:hover {
  background: #111838;
}

.option-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.whatsapp-color { background: rgba(37, 211, 102, 0.15); color: #25d366; }
.group-color { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.sms-color { background: rgba(54, 213, 176, 0.15); color: #36d5b0; }

.option-text h4 {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 2px;
}

.option-text p {
  font-size: 11px;
  color: #64748b;
}

.option-arrow {
  margin-left: auto;
  color: #64748b;
  font-size: 14px;
}

.btn-close-outline {
  width: 100%;
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 12px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  font-size: 13px;
}

.close-btn { position: absolute; right: 15px; top: 10px; font-size: 24px; cursor: pointer; color: #94a3b8; }
.form-control { width: 100%; padding: 12px; margin: 6px 0 14px; border-radius: 8px; border: 1px solid #1e295d; background: #060919; color: #fff; }
.btn-primary { width: 100%; background: #3b82f6; color: #fff; padding: 12px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
.error-box { background: rgba(239, 68, 68, 0.15); border: 1px solid #ef4444; padding: 15px; border-radius: 10px; text-align: center; color: #f87171; font-size: 13px; line-height: 1.4; }
.btn-active-account-popup { display: block; margin-top: 12px; background: #22c55e; color: #fff; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: bold; text-align: center; }

.text-center { text-align: center; }
.success-icon { font-size: 45px; margin-bottom: 10px; }
.success-title { color: #22c55e; font-size: 18px; margin-bottom: 5px; }
.success-sub { font-size: 12px; color: #94a3b8; margin-bottom: 15px; }

.reward-box {
  background: #060919;
  border: 1px dashed #22c55e;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.reward-label { font-size: 11px; color: #94a3b8; }
.reward-amount { color: #22c55e; font-size: 26px; font-weight: bold; margin: 5px 0; }
.reward-status { font-size: 11px; color: #10b981; font-weight: 500; }

.btn-success-close {
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  padding: 14px;
  font-size: 14px;
}

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* BOTTOM NAVIGATION */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #080c1e; border-top: 1px solid #161f3d;
  display: flex; justify-space: around; align-items: center;
  padding: 8px 0; height: 65px; z-index: 1000;
}

.nav-item {
  display: flex; flex-direction: column; align-items: center;
  color: #64748b; text-decoration: none; font-size: 10px;
}

.nav-item.active { color: #6366f1; }
.nav-icon { font-size: 18px; margin-bottom: 2px; }

.nav-mic-center { position: relative; top: -15px; }
.mic-bubble {
  width: 50px; height: 50px; background: #6366f1;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 22px;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
/* INSTALL APP — TOP FLOATING NOTIFICATION */

/* =========================================================
   VOICEPESA - SMALL TOP INSTALL NOTIFICATION
   One authoritative rule set. Never fullscreen.
   ========================================================= */
#installNotice.install-notice {
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 300px !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 7px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 13px !important;
  border: 1px solid rgba(236,72,153,.55) !important;
  background: rgba(12,15,32,.98) !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.38), 0 0 15px rgba(236,72,153,.20) !important;
  z-index: 2147483000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(-50%, -130%, 0) scale(.96) !important;
  transition: none !important;
}

#installNotice.install-notice.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: customerOrderInstallInOut 4.2s cubic-bezier(.22,1,.36,1) forwards !important;
}

#installNotice.install-notice::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 14px !important;
  pointer-events: none !important;
  box-shadow: 0 0 13px rgba(168,85,247,.16) !important;
}

#installNotice .install-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  background: linear-gradient(145deg,#ec4899,#a855f7) !important;
  box-shadow: 0 0 10px rgba(236,72,153,.30) !important;
}

#installNotice .install-notice-text {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow: hidden !important;
}

#installNotice .install-notice-text strong {
  font-size: 10px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#installNotice .install-notice-text span {
  font-size: 8.5px !important;
  line-height: 1.15 !important;
  color: #cbd5e1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#installNotice .install-notice-install {
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 7px 9px !important;
  color: #fff !important;
  background: linear-gradient(135deg,#ec4899,#a855f7) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 0 9px rgba(236,72,153,.25) !important;
}

@keyframes customerOrderInstallInOut {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -130%, 0) scale(.96);
  }
  12% {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  72% {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -130%, 0) scale(.96);
  }
}

.install-toast {
  position: fixed !important;
  left: 50% !important;
  bottom: 154px !important;
  transform: translateX(-50%) translateY(8px) !important;
  z-index: 2147483001 !important;
  background: #111838 !important;
  border: 1px solid #334155 !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: .25s ease !important;
  max-width: 88vw !important;
  text-align: center !important;
}
.install-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 360px) {
  #installNotice.install-notice {
    top: 8px !important;
    width: 286px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* =========================================================
   VOICEPESA — PREMIUM CLEAN THEME
   Visual-only redesign; existing JS/functionality preserved.
   ========================================================= */
:root {
  --bg-0: #06111c;
  --bg-1: #081a28;
  --panel: rgba(10, 28, 42, .88);
  --panel-2: rgba(14, 35, 49, .82);
  --line: rgba(119, 174, 194, .20);
  --text: #f3f7f8;
  --muted: #91a6b2;
  --teal: #20c9a6;
  --teal-2: #0da99c;
  --gold: #d7b05c;
  --gold-soft: #f0cf78;
  --coral: #e85b69;
  --navy: #0b2031;
}

html { background: var(--bg-0); }
body {
  min-height: 100vh;
  background:
    radial-gradient(700px 420px at 15% -5%, rgba(20, 117, 116, .18), transparent 62%),
    radial-gradient(600px 380px at 100% 25%, rgba(35, 88, 126, .14), transparent 60%),
    linear-gradient(180deg, #06111c 0%, #071725 48%, #06121e 100%);
  color: var(--text);
  padding-bottom: 86px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, transparent 0 38%, rgba(255,255,255,.018) 50%, transparent 62%);
  opacity: .65;
}

.app-container { max-width: 560px; padding: 14px 14px 24px; }

.top-header {
  position: relative;
  min-height: 58px;
  margin-bottom: 12px;
  gap: 9px;
}
.menu-btn {
  width: 38px; height: 38px; flex: 0 0 38px;
  border: 0; background: transparent; color: #dbe7eb;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.brand { gap: 9px; flex: 1; }
.logo-icon {
  width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(145deg, rgba(220,190,91,.95), rgba(19,120,108,.9));
  border: 1px solid rgba(245,222,139,.55);
  box-shadow: 0 7px 18px rgba(0,0,0,.24);
  font-size: 20px;
}
.brand-title { font-size: 19px; letter-spacing: -.35px; line-height: 1.05; }
.brand-title span { color: #f4f7f8; }
.brand-title em { color: var(--gold-soft); font-style: normal; }
.brand-sub { color: #a9c0cc; font-size: 10.5px; margin-top: 3px; }
.brand-sub i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--teal); margin-left:3px; }
.header-icons { gap: 7px; }
.icon-btn {
  width: 37px; height: 37px; background: rgba(13,31,45,.82);
  border: 1px solid rgba(145,180,192,.18); box-shadow: none;
}
.badge { background: var(--coral); width: 12px; height: 12px; font-size: 7px; }

.welcome-banner {
  min-height: 126px;
  margin-bottom: 12px;
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(214,177,83,.46);
  background:
    radial-gradient(280px 130px at 100% 50%, rgba(190,145,50,.22), transparent 70%),
    linear-gradient(110deg, rgba(16,54,64,.97), rgba(7,31,42,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.14);
  position: relative; overflow: hidden;
}
.welcome-banner::after { content:""; position:absolute; width:190px; height:190px; border:1px solid rgba(211,181,101,.12); border-radius:50%; right:-55px; top:-68px; }
.banner-mic {
  flex: 0 0 55px; width:55px; height:55px; border-radius:50%;
  display:grid; place-items:center; font-size:27px;
  color:#dffdf8; background:rgba(15,157,137,.20);
  border:1px solid rgba(44,215,185,.48);
  box-shadow: 0 0 0 5px rgba(22,171,151,.05);
  z-index: 1;
}
.banner-text { flex: 1; z-index: 1; }
.banner-heading { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.banner-heading span { font-size:17px; font-weight:800; }
.banner-heading b { color:var(--gold-soft); border:1px solid rgba(240,207,120,.4); background:rgba(213,173,77,.12); padding:4px 8px; border-radius:999px; font-size:9px; }
.banner-text p { color:#b7c9d0; font-size:10.5px; line-height:1.45; max-width:310px; }
.banner-wave { color:rgba(224,191,94,.55); font-size:38px; transform:rotate(-4deg); position:absolute; right:43px; top:36px; z-index:1; }
.banner-arrow { position:absolute; right:10px; top:42px; width:37px; height:37px; border-radius:50%; background:rgba(24,43,47,.75); border:1px solid rgba(224,191,94,.2); display:grid; place-items:center; font-size:28px; z-index:2; }

.balance-card {
  display:grid; grid-template-columns: minmax(115px,1.05fr) 1px minmax(185px,1.7fr);
  align-items:center; gap:13px;
  padding:13px 12px; margin-bottom:12px; border-radius:17px;
  background:linear-gradient(135deg, rgba(10,31,47,.97), rgba(8,25,39,.92));
  border:1px solid rgba(95,148,171,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.balance-main { position:relative; padding-left:0; }
.wallet-mark { color:#d6eb91; font-size:18px; margin-bottom:2px; }
.salio-label { font-size:9px; color:#9db1ba; letter-spacing:.7px; }
.balance-amount { font-size:26px; margin:3px 0 0; text-align:left; letter-spacing:-.6px; }
.balance-sub { text-align:left; color:#32d1aa; font-size:9px; margin:2px 0 0; }
.balance-divider { width:1px; height:52px; background:rgba(154,184,195,.20); }
.balance-actions { gap:8px; }
.btn-balance { min-height:55px; padding:9px 10px; border-radius:12px; font-size:10px; line-height:1.2; border:1px solid transparent; }
.btn-withdraw { background:linear-gradient(135deg,#1dc3a4,#109e91); color:#06201c; box-shadow:0 7px 16px rgba(18,188,157,.12); }
.btn-support { background:linear-gradient(135deg,#172f55,#13233f); color:#edf5f7; border-color:rgba(124,155,204,.24); }
.btn-balance span { font-weight:800; }

.btn-active-account {
  min-height:51px; padding:10px 14px; margin-bottom:16px;
  border-radius:15px; gap:9px; justify-content:flex-start;
  background:linear-gradient(100deg,#11b89d,#1bc7a7); color:#061b18;
  border:1px solid rgba(115,238,211,.42); box-shadow:0 8px 22px rgba(11,177,151,.14);
  font-size:13px;
}
.btn-active-account .cta-crown { width:29px; height:29px; border-radius:50%; display:grid; place-items:center; background:rgba(255,231,150,.22); color:#fff1bd; }
.btn-active-account b { margin-left:auto; background:#e7bd62; color:#33250b; border-radius:999px; padding:6px 11px; font-size:9px; }

.suppliers-header { margin-bottom:9px; }
.suppliers-header h3 { font-size:17px; letter-spacing:-.2px; }
.suppliers-header h3 span { color:#20d0a8; margin-right:5px; }
.suppliers-header a { color:#91b2dd; font-size:10px; }

.supplier-card {
  padding:12px; margin-bottom:10px; border-radius:16px;
  background:linear-gradient(145deg, rgba(12,35,51,.97), rgba(8,25,39,.95));
  border:1px solid rgba(93,145,166,.20);
  box-shadow:0 9px 22px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.02);
}
.supplier-top { margin-bottom:8px; }
.supplier-info { gap:8px; }
.avatar-img { width:38px; height:38px; border:1px solid rgba(130,170,180,.35); }
.supplier-name { font-size:12.5px; }
.supplier-type { font-size:9.5px; color:#8fa5b0; margin-top:2px; }
.blue-tick { background:#2498dc; font-size:7px; padding:1px 3px; }
.payout-badge { padding:5px 9px; font-size:10.5px; color:#5ce0c0; background:rgba(12,183,147,.13); border-color:rgba(27,205,171,.22); }
.message-box { padding:8px 9px; margin-bottom:7px; border-radius:10px; background:rgba(5,18,29,.44); border-color:rgba(99,142,157,.12); font-size:10px; line-height:1.42; color:#c3d0d5; }
.rec-label { font-size:9px; margin-bottom:6px; color:#9cafb8; }
.timer { color:#9db0ba; }
.action-row { gap:7px; margin-bottom:6px; }
.btn-record { min-height:34px; padding:8px 10px; border-radius:9px; background:linear-gradient(90deg,#e9495d,#ee5869); font-size:10.5px; box-shadow:0 5px 12px rgba(226,70,89,.10); }
.btn-record.recording { background:#c93649; }
.btn-play { width:38px; min-height:34px; border-radius:9px; background:rgba(20,42,59,.95); border-color:rgba(109,150,165,.24); font-size:14px; }
.btn-send { padding:9px; border-radius:9px; font-size:10px; margin-bottom:7px; background:rgba(22,39,53,.88); }
.btn-send.ready { background:linear-gradient(90deg,#0c9f87,#18b99f); color:#06201c; }
.supplier-footer { gap:6px; font-size:8px; color:#718995; }
.verified-text { color:#35caa8; }

.whatsapp-float { width:48px; height:48px; right:14px; bottom:76px; font-size:23px; background:#20c979; box-shadow:0 8px 20px rgba(20,180,104,.25); }

.custom-modal { background:rgba(2,10,16,.78); backdrop-filter:blur(8px); }
.modal-content { background:linear-gradient(145deg,#0c2434,#081a28); border:1px solid rgba(106,159,177,.24); box-shadow:0 24px 60px rgba(0,0,0,.35); }
.option-card { background:rgba(6,20,31,.72); border-color:rgba(107,152,166,.18); }
.form-control { background:#071824; border-color:rgba(102,150,165,.22); }
.btn-primary { background:linear-gradient(90deg,#12b69a,#1cc6a5); color:#06201c; }

.bottom-nav {
  left:50%; right:auto; transform:translateX(-50%); width:min(560px,100%);
  height:64px; padding:7px 8px 6px;
  background:rgba(6,20,32,.94); border-top:1px solid rgba(107,151,165,.17);
  backdrop-filter:blur(14px); box-shadow:0 -8px 28px rgba(0,0,0,.18);
}
.nav-item { flex:1; font-size:9px; color:#829aa8; gap:2px; }
.nav-item.active { color:#f0cc70; }
.nav-icon { font-size:19px; line-height:1; margin-bottom:2px; }
.nav-item.active::after { content:""; width:30px; height:2px; border-radius:4px; background:#e7c15f; margin-top:2px; }

#coInstallNotification, #installNotice.install-notice { background:#0b1f2d !important; border-color:rgba(215,176,92,.35) !important; box-shadow:0 10px 28px rgba(0,0,0,.35) !important; }
#coInstallNotification .co-mic, #installNotice .install-avatar { background:linear-gradient(145deg,#12ad97,#d1aa54) !important; box-shadow:none !important; }
#coInstallNotification .co-install, #installNotice .install-notice-install { background:linear-gradient(135deg,#13b69c,#d5b15f) !important; color:#102019 !important; box-shadow:none !important; }

@media (max-width: 390px) {
  .app-container { padding-left:10px; padding-right:10px; }
  .balance-card { grid-template-columns: 92px 1px 1fr; gap:9px; }
  .btn-balance { font-size:9px; padding:8px 7px; }
  .banner-wave { display:none; }
  .banner-text p { max-width:250px; }
}

/* =========================================================
   VOICEPESA — SAMSUNG-STYLE TOP NOTIFICATION
   Compact pill notification: no edge-lighting / side effects.
   ========================================================= */
.co-top-notification {
  position: fixed;
  top: 12px;
  left: 50%;
  width: min(318px, calc(100vw - 34px));
  min-height: 48px;
  transform: translate3d(-50%, -125%, 0) scale(.92);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 7px 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(74, 151, 205, .72);
  background: rgba(10, 11, 14, .96);
  box-shadow:
    0 8px 22px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 18px rgba(38, 126, 196, .13);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  z-index: 2147483647;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  will-change: transform, opacity;
}

/* A second, very subtle inner ring reproduces the layered Samsung-like pill. */
.co-top-notification::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(100, 170, 220, .10);
  pointer-events: none;
}

.co-top-notification::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -18px;
  height: 28px;
  border-radius: 50%;
  background: rgba(56, 145, 210, .08);
  filter: blur(12px);
  pointer-events: none;
}

.co-top-notification.co-visible {
  visibility: visible;
  pointer-events: auto;
  animation: coSamsungNotification 5s cubic-bezier(.22,.9,.25,1) forwards;
}

.co-notification-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: #4c8dcc;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 7px rgba(0,0,0,.35);
  position: relative;
  z-index: 1;
}

.co-notification-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
  z-index: 1;
}

.co-notification-copy strong {
  color: #f5f6f7;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.co-notification-copy span {
  color: #c0c3c7;
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.co-notification-action {
  flex: 0 0 auto;
  min-height: 31px;
  max-width: 88px;
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  background: #f1f3f4;
  color: #111315;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 7px rgba(0,0,0,.25);
}

.co-notification-action:active {
  transform: scale(.96);
}

/* Small accent changes only; the notification keeps one coherent premium style. */
.co-top-notification[data-type="channel"] .co-notification-icon {
  background: #20b968;
}

.co-top-notification[data-type="support"] .co-notification-icon {
  background: #c39b45;
}

@keyframes coSamsungNotification {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -125%, 0) scale(.92);
  }
  10% {
    opacity: 1;
    transform: translate3d(-50%, 2px, 0) scale(1.015);
  }
  17% {
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  82% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  91% {
    opacity: .96;
    transform: translate3d(-50%, -2px, 0) scale(.99);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -125%, 0) scale(.92);
  }
}

.co-install-toast {
  position: fixed;
  left: 50%;
  bottom: 82px;
  width: min(390px, calc(100vw - 24px));
  transform: translate(-50%, 18px);
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(7,24,34,.97);
  color: #e7f2f2;
  border: 1px solid rgba(82,184,164,.24);
  box-shadow: 0 14px 30px rgba(0,0,0,.30);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2147483647;
  transition: opacity .22s ease, transform .22s ease;
}
.co-install-toast.co-toast-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Customer Care remains the primary support action. */
.balance-actions .btn-support {
  position: relative;
  background: linear-gradient(135deg, #173a58 0%, #14506a 52%, #147f77 100%);
  border: 1px solid rgba(74, 216, 188, .40);
  color: #f4fbfa;
  box-shadow: 0 7px 20px rgba(15,130,116,.20), inset 0 1px 0 rgba(255,255,255,.06);
  min-height: 55px;
}
.balance-actions .btn-support::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  top: 7px;
  right: 7px;
  border-radius: 50%;
  background: #37e0b8;
  box-shadow: 0 0 0 4px rgba(55,224,184,.10);
}
.balance-actions .btn-support:hover,
.balance-actions .btn-support:focus-visible {
  filter: brightness(1.10);
  outline: none;
}

@media (max-width: 390px) {
  .co-top-notification {
    width: calc(100vw - 28px);
    top: 9px;
    min-height: 46px;
    padding: 5px 6px 5px 7px;
    gap: 7px;
  }
  .co-notification-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 14px;
  }
  .co-notification-copy strong { font-size: 9.5px; }
  .co-notification-copy span { font-size: 8.2px; }
  .co-notification-action { min-height: 29px; padding: 6px 9px; font-size: 7.8px; }
}

@media (prefers-reduced-motion: reduce) {
  .co-top-notification.co-visible {
    animation: none;
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}


/* =========================================================
   SUPPLIERS — DATE CARD + 30-CARD DAILY ROTATION
   ========================================================= */
.suppliers-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:11px;
}
.suppliers-title-wrap { min-width:0; }
.suppliers-title-wrap h3 { margin:0; }
.suppliers-title-wrap small {
  display:block;
  margin-top:3px;
  color:#7893a0;
  font-size:8.5px;
  font-weight:600;
}
.supplier-date-card {
  flex:0 0 auto;
  min-width:128px;
  padding:7px 9px;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(16,39,54,.96),rgba(8,24,37,.96));
  border:1px solid rgba(86,151,171,.26);
  box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025);
  text-align:right;
}
.supplier-date-main { display:flex; flex-direction:column; gap:1px; }
.supplier-date-main b { color:#dffaf2; font-size:9.5px; text-transform:capitalize; }
.supplier-date-main span { color:#91aab5; font-size:8px; white-space:nowrap; }
.supplier-time { margin-top:2px; color:#36d5b0; font-size:10px; font-weight:800; letter-spacing:.3px; font-variant-numeric:tabular-nums; }
.suppliers-list { min-height:100px; transition:opacity .2s ease, transform .2s ease; }
.suppliers-list.supplier-refreshing { opacity:.35; transform:translateY(4px); }

/* =========================================================
   TOP NOTIFICATION — LARGER + PRIORITY DOT/SPARK ANIMATION
   No edge-lighting; only small notification particles.
   ========================================================= */
.co-top-notification {
  position:fixed;
  top:12px;
  left:50%;
  width:min(390px,calc(100vw - 22px));
  min-height:66px;
  transform:translate3d(-50%,-135%,0) scale(.90);
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 9px 8px 10px;
  border-radius:18px;
  border:1px solid rgba(74,151,205,.78);
  background:rgba(8,11,15,.975);
  box-shadow:0 10px 28px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025) inset,0 5px 22px rgba(38,126,196,.16);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  z-index:2147483647;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:visible;
  will-change:transform,opacity;
}
.co-top-notification::before {
  content:"";
  position:absolute;
  inset:3px;
  border-radius:15px;
  border:1px solid rgba(100,170,220,.11);
  pointer-events:none;
}
.co-top-notification::after {
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:-16px;height:24px;border-radius:50%;
  background:rgba(56,145,210,.08);filter:blur(11px);pointer-events:none;
}
.co-top-notification.co-visible {
  visibility:visible;
  pointer-events:auto;
  animation:coSamsungNotification 5.2s cubic-bezier(.22,.9,.25,1) forwards;
}
.co-notification-icon {
  width:43px;height:43px;min-width:43px;border-radius:50%;display:grid;place-items:center;
  font-size:19px;background:#4c8dcc;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 3px 10px rgba(0,0,0,.38);position:relative;z-index:2;
}
.co-notification-copy { min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;position:relative;z-index:2; }
.co-notification-copy strong { color:#f6f8fa;font-size:13px;line-height:1.12;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.co-notification-copy span { color:#c6ccd1;font-size:11px;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.co-notification-action {
  flex:0 0 auto;min-height:37px;max-width:108px;border:0;border-radius:999px;padding:9px 12px;
  background:#f1f3f4;color:#111315;font-size:10px;font-weight:850;line-height:1;cursor:pointer;position:relative;z-index:3;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.co-notification-action:active { transform:scale(.96); }
.co-top-notification[data-type="channel"] .co-notification-icon { background:#20b968; }
.co-top-notification[data-type="support"] .co-notification-icon { background:#c39b45; }

.co-notification-spark {
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  background:#74cfff;
  box-shadow:0 0 8px rgba(116,207,255,.85);
  opacity:0;z-index:1;pointer-events:none;
}
.co-notification-spark.spark-1 { left:-8px;top:22%; }
.co-notification-spark.spark-2 { left:-13px;top:56%;width:4px;height:4px; }
.co-notification-spark.spark-3 { left:18px;top:-7px;width:4px;height:4px; }
.co-notification-spark.spark-4 { right:-8px;top:25%;width:5px;height:5px; }
.co-notification-spark.spark-5 { right:-13px;top:62%;width:4px;height:4px; }
.co-notification-spark.spark-6 { right:42px;top:-8px;width:4px;height:4px; }
.co-top-notification.co-visible .co-notification-spark { animation:coNotificationSpark 5.2s ease-out forwards; }
.co-top-notification.co-visible .spark-2,.co-top-notification.co-visible .spark-5 { animation-delay:.12s; }
.co-top-notification.co-visible .spark-3,.co-top-notification.co-visible .spark-6 { animation-delay:.22s; }
@keyframes coNotificationSpark {
  0% { opacity:0; transform:scale(.2) translateY(5px); }
  9% { opacity:1; transform:scale(1.25) translateY(0); }
  18% { opacity:.85; transform:scale(.75) translateY(-2px); }
  35%,78% { opacity:.8; transform:scale(1) translateY(0); }
  88% { opacity:.35; transform:scale(.6) translateY(-2px); }
  100% { opacity:0; transform:scale(.1) translateY(-5px); }
}
@keyframes coSamsungNotification {
  0% { opacity:0; transform:translate3d(-50%,-135%,0) scale(.90); }
  10% { opacity:1; transform:translate3d(-50%,2px,0) scale(1.015); }
  17% { transform:translate3d(-50%,0,0) scale(1); }
  82% { opacity:1; transform:translate3d(-50%,0,0) scale(1); }
  91% { opacity:.97; transform:translate3d(-50%,-2px,0) scale(.99); }
  100% { opacity:0; transform:translate3d(-50%,-135%,0) scale(.90); }
}

@media (max-width:390px) {
  .supplier-date-card { min-width:118px; padding:6px 8px; }
  .supplier-date-main b { font-size:9px; }
  .supplier-date-main span { font-size:7.5px; }
  .supplier-time { font-size:9.5px; }
  .co-top-notification { width:calc(100vw - 16px); min-height:64px; gap:9px; padding:8px; }
  .co-notification-icon { width:41px;height:41px;min-width:41px;font-size:18px; }
  .co-notification-copy strong { font-size:12px; }
  .co-notification-copy span { font-size:10.5px; }
  .co-notification-action { min-height:35px; padding:8px 10px; font-size:9.5px; }
}

/* =========================================================
   REGISTRATION GUIDE + PAYMENT GUIDE ADDITIONS
   ========================================================= */
body.modal-open { overflow: hidden; }

.btn-active-account {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.payment-guide-card {
  width: 100%;
  margin: 10px 0 18px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  border-radius: 18px;
  border: 1px solid rgba(64, 221, 194, .25);
  background: linear-gradient(135deg, rgba(9, 37, 51, .96), rgba(7, 28, 40, .94));
  box-shadow: 0 10px 25px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.payment-guide-card:hover,
.payment-guide-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(64, 221, 194, .48);
  outline: none;
}
.payment-guide-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(29, 207, 174, .12);
  border: 1px solid rgba(54, 225, 195, .25);
  font-size: 20px;
}
.payment-guide-copy { min-width: 0; flex: 1; }
.payment-guide-copy h3 {
  margin: 0 0 3px;
  color: #edf9f7;
  font-size: 14px;
  line-height: 1.25;
}
.payment-guide-copy p {
  margin: 0;
  color: #87a8b3;
  font-size: 11px;
  line-height: 1.35;
}
.payment-guide-arrow { color: #36d8b9; font-size: 28px; line-height: 1; }

.registration-guide-modal {
  z-index: 10000;
  padding: 18px 14px 28px;
  background: rgba(1, 9, 16, .82);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  overflow-y: auto;
}
.registration-guide-content {
  position: relative;
  width: min(100%, 660px);
  max-height: calc(100vh - 34px);
  overflow-y: auto;
  padding: 28px 26px 25px;
  border-radius: 27px;
  border: 1px solid rgba(22, 185, 235, .38);
  background:
    radial-gradient(circle at 50% 0%, rgba(14, 105, 150, .18), transparent 35%),
    linear-gradient(145deg, #0b2035, #071827 72%);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.035);
}
.registration-guide-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(125, 158, 178, .22);
  background: rgba(4, 17, 29, .52);
  color: #9cb0bf;
  font-size: 35px;
  line-height: 1;
  cursor: pointer;
}
.registration-guide-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(4, 64, 91, .5);
  border: 1px solid rgba(10, 190, 246, .5);
  box-shadow: 0 0 25px rgba(0, 173, 240, .14);
  font-size: 34px;
}
.registration-guide-content h3 {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: clamp(25px, 5vw, 36px);
  letter-spacing: .8px;
  font-weight: 900;
}
.registration-guide-subtitle {
  max-width: 520px;
  margin: 15px auto 27px;
  text-align: center;
  color: #9cb0bf;
  font-size: clamp(15px, 3.4vw, 20px);
  line-height: 1.55;
}
.registration-video-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 19px;
  background: #000;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.registration-video-wrap video {
  display: block;
  width: 100%;
  max-height: min(55vh, 560px);
  min-height: 190px;
  object-fit: contain;
  background: #000;
}
.registration-guide-cta {
  margin-top: 22px;
  min-height: 68px;
  padding: 0 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px;
  text-decoration: none;
  background: linear-gradient(135deg, #0bdca4, #05d68e);
  color: #031e18;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 10px 25px rgba(0, 215, 158, .16);
}
.registration-guide-cta span { font-size: 38px; line-height: 1; }
.registration-guide-cta:hover { filter: brightness(1.06); }

.payment-placeholder-modal { z-index: 10001; }
.payment-placeholder-content { position: relative; }
.payment-placeholder-icon { font-size: 42px; margin-bottom: 8px; }
.payment-placeholder-content h3 { color: #fff; }
.payment-placeholder-content p { color: #9cb0bf; line-height: 1.5; }

@media (max-width: 520px) {
  .registration-guide-modal { padding: 10px 8px 18px; }
  .registration-guide-content { padding: 23px 18px 19px; border-radius: 24px; }
  .registration-guide-close { top: 12px; right: 12px; width: 48px; height: 48px; }
  .registration-guide-icon { width: 68px; height: 68px; margin-bottom: 14px; }
  .registration-guide-subtitle { margin-top: 11px; margin-bottom: 21px; }
  .registration-video-wrap { border-radius: 17px; }
  .registration-video-wrap video { max-height: 48vh; min-height: 180px; }
  .registration-guide-cta { min-height: 64px; margin-top: 16px; border-radius: 17px; font-size: 18px; padding: 0 20px; }
}

/* =========================================================
   PAYMENT GUIDE — NETWORK SELECTOR + INSTRUCTIONS
   ========================================================= */
.payment-network-modal,
.payment-instructions-modal {
  z-index: 10002;
  padding: 14px;
  background: rgba(1, 8, 14, .84);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
}

.payment-network-content,
.payment-instructions-content {
  position: relative;
  width: min(100%, 500px);
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  padding: 27px 20px 21px;
  border-radius: 25px;
  background: linear-gradient(145deg, #0b2233, #071724 78%);
  border: 1px solid rgba(42, 215, 188, .27);
  box-shadow: 0 25px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}

.payment-modal-close {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(155,181,193,.22);
  border-radius: 50%;
  background: rgba(4,17,27,.68);
  color: #b8c8d0;
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
}
.payment-modal-close:hover { background: rgba(10,31,44,.95); color:#fff; }

.payment-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(24,201,170,.12);
  border: 1px solid rgba(37,219,190,.38);
  color: #58e3ca;
  font-size: 25px;
  font-weight: 900;
}
.payment-network-content h3,
.payment-instructions-content h3 {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 23px;
  font-weight: 900;
}
.payment-network-subtitle,
.payment-instructions-subtitle {
  max-width: 410px;
  margin: 9px auto 20px;
  text-align: center;
  color: #91aab7;
  font-size: 12px;
  line-height: 1.5;
}

.payment-network-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.network-payment-btn {
  min-height: 84px;
  display: grid;
  grid-template-columns: 43px 1fr 20px;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.14);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 9px 24px rgba(0,0,0,.16);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.network-payment-btn:hover,
.network-payment-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  outline: none;
  box-shadow: 0 13px 30px rgba(0,0,0,.25);
}
.network-payment-btn b { font-size: 27px; line-height: 1; justify-self:end; }
.network-logo {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  font-size: 20px;
  font-weight: 1000;
}
.network-mpesa { background: #fff; color: #169b7b; border-color: rgba(255,255,255,.8); }
.network-mpesa .network-logo { background:#16a37e; color:#fff; }
.network-mpesa b { color:#138b70; }
.network-airtel { background: #e5253f; color: #fff; border-color: rgba(255,120,135,.45); }
.network-airtel .network-logo { background: rgba(255,255,255,.18); color:#fff; }
.network-airtel b { color:#fff; }
.network-mix { background: #176bc4; color: #ffd94d; border-color: rgba(95,171,255,.4); }
.network-mix .network-logo { background: rgba(255,216,68,.16); color:#ffdf55; }
.network-mix b { color:#ffdf55; }
.network-halo { background: #f58a20; color: #fff; border-color: rgba(255,192,110,.45); }
.network-halo .network-logo { background: rgba(255,255,255,.18); color:#fff; }
.network-halo b { color:#fff; }

.payment-back-btn {
  margin: 0 0 12px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: #7fd8ca;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.payment-instructions-icon {
  width: 57px;
  height: 57px;
  margin: 0 auto 11px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 1000;
  border: 1px solid rgba(255,255,255,.2);
}
.payment-instructions-icon.mpesa-icon { background:#fff; color:#159879; }
.payment-instructions-icon.airtel-icon { background:#e5253f; color:#fff; }
.payment-instructions-icon.mix-icon { background:#176bc4; color:#ffdc4e; }
.payment-instructions-icon.halo-icon { background:#f58a20; color:#fff; }

.payment-instructions-subtitle { margin-bottom: 14px; }
.payment-instructions-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.payment-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(6,24,37,.8);
  border: 1px solid rgba(112,153,167,.15);
  color: #d9e6ea;
  font-size: 12px;
  line-height: 1.42;
}
.payment-step-number {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(36,207,177,.13);
  color: #5be0c7;
  font-size: 11px;
  font-weight: 900;
}

.payment-recipient-card {
  margin-top: 10px;
  padding: 13px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(17,87,88,.34), rgba(7,37,50,.72));
  border: 1px solid rgba(50,213,181,.28);
}
.payment-recipient-label {
  color: #82a5b0;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 5px;
}
.payment-recipient-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.payment-recipient-row strong {
  color: #fff;
  font-size: 22px;
  letter-spacing: .7px;
}
.copy-payment-btn {
  min-width: 76px;
  padding: 8px 11px;
  border: 1px solid rgba(50,220,190,.28);
  border-radius: 9px;
  background: #12b99b;
  color: #03221c;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.copy-payment-btn.copied { background:#22c55e; color:#042617; }
.payment-recipient-name {
  margin-top: 5px;
  color: #9fd0c8;
  font-size: 9px;
  line-height: 1.35;
}
.payment-done-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 13px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg,#12c6a3,#0cdb9b);
  color: #03241c;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 440px) {
  .payment-network-modal,
  .payment-instructions-modal { padding: 8px; }
  .payment-network-content,
  .payment-instructions-content { padding: 23px 14px 16px; border-radius: 22px; }
  .payment-network-content h3,
  .payment-instructions-content h3 { font-size: 20px; }
  .payment-network-subtitle,
  .payment-instructions-subtitle { font-size: 11px; margin-bottom: 16px; }
  .payment-network-grid { gap: 9px; }
  .network-payment-btn { min-height: 78px; grid-template-columns: 37px 1fr 15px; gap:7px; padding:9px; font-size:12px; border-radius:14px; }
  .network-logo { width:37px; height:37px; font-size:17px; }
  .network-payment-btn b { font-size:22px; }
  .payment-step { font-size:11px; grid-template-columns:26px 1fr; padding:9px; }
  .payment-step-number { width:26px; height:26px; }
}

/* PAYMENT CONFIRMATION / WHATSAPP */
.payment-confirm-area {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(92, 216, 198, .16);
  text-align: center;
}

.payment-confirm-title {
  color: #f5f8fb;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 5px;
}

.payment-confirm-subtitle {
  color: #8da5b8;
  font-size: 12px;
  line-height: 1.5;
  margin: 0 auto 12px;
  max-width: 330px;
}

.payment-whatsapp-btn {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(55, 221, 178, .45);
  border-radius: 16px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #12cfa0, #0bbf8f);
  color: #06251e;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.18), 0 0 18px rgba(20, 207, 160, .13);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.payment-whatsapp-btn:hover,
.payment-whatsapp-btn:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 0 22px rgba(20, 207, 160, .2);
  outline: none;
}

.payment-whatsapp-camera {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.22);
  color: #06251e;
  font-size: 17px;
  flex: 0 0 auto;
}

.payment-whatsapp-arrow {
  font-size: 24px;
  line-height: 1;
  margin-left: auto;
}

@media (max-width: 480px) {
  .payment-confirm-title { font-size: 16px; }
  .payment-whatsapp-btn { font-size: 12px; min-height: 56px; padding: 10px 12px; }
}


/* =========================================================
   VOICEPESA — PREMIUM WELCOME + 18+ AGE GATE
   ========================================================= */
body.voicepesa-locked { overflow: hidden !important; }
.voicepesa-gate {
  position: fixed; inset: 0; z-index: 2147483646;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; overflow-y: auto;
  background:
    radial-gradient(700px 500px at 50% 0%, rgba(91,72,194,.32), transparent 62%),
    radial-gradient(500px 360px at 0% 100%, rgba(18,180,153,.14), transparent 60%),
    linear-gradient(145deg, #050817 0%, #0b1030 52%, #080d22 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: voicepesaGateIn .45s ease both;
}
.voicepesa-gate::before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.32;
  background-image: radial-gradient(rgba(255,255,255,.18) .7px, transparent .7px);
  background-size: 20px 20px;
}
.voicepesa-gate-card {
  width: min(100%, 520px); position:relative; z-index:1;
  border:1px solid rgba(165,142,255,.42); border-radius:30px;
  padding:22px 20px 18px;
  background: linear-gradient(180deg, rgba(20,25,65,.96), rgba(8,13,35,.98));
  box-shadow: 0 30px 90px rgba(0,0,0,.62), 0 0 45px rgba(111,78,255,.16), inset 0 1px 0 rgba(255,255,255,.07);
  text-align:center;
}
.voicepesa-available {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  max-width:100%; padding:11px 16px; border-radius:999px;
  color:#071b16; background:linear-gradient(135deg,#23d99f,#0fbf87);
  box-shadow:0 8px 24px rgba(20,208,151,.22);
  font-size:11px; font-weight:900; letter-spacing:.35px;
}
.voicepesa-flags { margin:13px 0 2px; font-size:25px; letter-spacing:3px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.voicepesa-logo {
  width:82px; height:82px; margin:15px auto 11px; border-radius:50%;
  display:grid; place-items:center; font-size:39px;
  background:radial-gradient(circle at 35% 30%, #2e2a70, #0a0d29 70%);
  border:2px solid #c7a84b; outline:4px solid rgba(133,92,255,.4);
  box-shadow:0 0 0 8px rgba(130,91,255,.08), 0 0 32px rgba(110,67,255,.42);
}
.voicepesa-gate h1 { margin:0 0 10px; color:#fff; font-size:clamp(28px,7vw,42px); line-height:1.05; font-weight:950; letter-spacing:-1.2px; }
.voicepesa-gate-intro { color:#c6cede; font-size:13px; line-height:1.65; max-width:455px; margin:0 auto 17px; }
.voicepesa-age-panel {
  display:flex; align-items:center; gap:14px; text-align:left; padding:14px; margin-bottom:11px;
  border:1px solid rgba(255,255,255,.10); border-radius:18px;
  background:linear-gradient(135deg,rgba(32,39,89,.86),rgba(18,23,57,.92));
}
.voicepesa-age-icon {
  width:70px; height:70px; flex:0 0 70px; border:5px solid #ff4054; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:#16162a; font-size:25px; font-weight:950;
  box-shadow:0 0 18px rgba(255,64,84,.16);
}
.voicepesa-age-icon span { font-size:17px; margin-left:1px; }
.voicepesa-age-panel strong { display:block; color:#ff6171; font-size:18px; margin-bottom:4px; }
.voicepesa-age-panel p { color:#c8cfdd; font-size:11.5px; line-height:1.45; }
.voicepesa-check-row {
  position:relative; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  padding:15px; border:1px solid rgba(142,155,255,.23); border-radius:17px;
  background:rgba(5,10,29,.76); transition:.22s ease;
}
.voicepesa-check-row:hover { border-color:rgba(158,137,255,.6); transform:translateY(-1px); }
.voicepesa-check-row input { position:absolute; opacity:0; pointer-events:none; }
.voicepesa-custom-check {
  width:28px; height:28px; flex:0 0 28px; border:2px solid #77809a; border-radius:7px;
  display:grid; place-items:center; color:transparent; background:#070b1c; font-weight:950; font-size:18px;
  transition:.2s ease;
}
.voicepesa-check-row input:checked + .voicepesa-custom-check { color:#071b16; background:#21d49d; border-color:#21d49d; box-shadow:0 0 0 4px rgba(33,212,157,.12); }
.voicepesa-check-row > span:last-child { min-width:0; }
.voicepesa-check-row strong { display:block; color:#fff; font-size:14px; }
.voicepesa-check-row small { display:block; color:#7f8ba4; font-size:10.5px; margin-top:3px; }
.voicepesa-enter-btn {
  width:100%; border:0; border-radius:17px; padding:16px 15px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:#fff; background:linear-gradient(135deg,#7657ff,#4d3be2);
  box-shadow:0 12px 30px rgba(95,69,236,.28); font-size:14px; font-weight:950;
  cursor:pointer; transition:.22s ease;
}
.voicepesa-enter-btn b { font-size:20px; }
.voicepesa-enter-btn:disabled { background:linear-gradient(135deg,#6a6b70,#4e5056); color:#d6d7da; box-shadow:none; cursor:not-allowed; opacity:.75; }
.voicepesa-enter-btn:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 15px 35px rgba(95,69,236,.38); }
.voicepesa-enter-btn:not(:disabled):active { transform:translateY(0); }
.voicepesa-enter-btn.is-loading { cursor:wait; }
.voicepesa-gate-note { color:#6f7b94; font-size:9.5px; line-height:1.5; margin:10px 8px 0; }
.voicepesa-gate.age-confirmed .voicepesa-check-row { border-color:rgba(33,212,157,.48); background:rgba(11,35,36,.68); }
.voicepesa-gate.gate-closing { animation:voicepesaGateOut .55s ease forwards; pointer-events:none; }
@keyframes voicepesaGateIn { from { opacity:0; transform:scale(1.015); } to { opacity:1; transform:scale(1); } }
@keyframes voicepesaGateOut { to { opacity:0; transform:scale(1.025); visibility:hidden; } }
@media (max-width:390px) {
  .voicepesa-gate { padding:10px; }
  .voicepesa-gate-card { border-radius:24px; padding:16px 13px 14px; }
  .voicepesa-available { font-size:9px; padding:9px 11px; }
  .voicepesa-flags { font-size:20px; letter-spacing:1px; }
  .voicepesa-gate-intro { font-size:11.5px; }
  .voicepesa-age-panel strong { font-size:16px; }
  .voicepesa-check-row { padding:12px; }
  .voicepesa-enter-btn { padding:14px 10px; font-size:12px; }
}

/* =========================================================
   VOICEPESA V3 — CLEAN PROFESSIONAL UI + GUIDED AGE GATE
   ========================================================= */
:root{
  --vp-bg:#070b18;
  --vp-surface:#0d1326;
  --vp-surface-2:#111a31;
  --vp-border:rgba(148,163,184,.14);
  --vp-text:#f8fafc;
  --vp-muted:#91a0b9;
  --vp-primary:#6d5dfc;
  --vp-primary-2:#4f46e5;
  --vp-success:#18c58b;
}

body{background:radial-gradient(900px 420px at 50% -120px,rgba(109,93,252,.18),transparent 65%),var(--vp-bg);color:var(--vp-text);}
.app-container{max-width:520px;padding:18px 16px 104px;}

/* SVG icon system — no emoji UI */
.svg-icon,.btn-icon,.inline-icon,.mini-icon,.nav-icon svg,.logo-icon img,.voicepesa-logo img{display:block;}
.svg-icon,.btn-icon,.inline-icon,.mini-icon,.nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.btn-icon{flex:0 0 19px;width:19px;height:19px;}
.inline-icon{display:inline-block;width:15px;height:15px;vertical-align:-3px;margin-right:5px;}
.mini-icon{display:inline-block;width:14px;height:14px;vertical-align:-2px;}

.top-header{padding:4px 2px 15px;margin-bottom:8px;border-bottom:1px solid rgba(148,163,184,.08);}
.menu-btn{width:40px;height:40px;border-radius:12px;background:#0e162b;border:1px solid var(--vp-border);color:#dce4f2;font-size:20px;}
.logo-icon{width:42px;height:42px;border-radius:13px;overflow:hidden;background:#10152d;border:1px solid rgba(109,93,252,.35);box-shadow:0 8px 24px rgba(0,0,0,.22);}
.logo-icon img{width:100%;height:100%;object-fit:cover;}
.brand-title{font-size:21px;letter-spacing:-.5px;}
.brand-title span{color:#fff}.brand-title em{color:#8b7cff;font-style:normal;}
.brand-sub{color:#7f8ca5;font-size:10px;letter-spacing:.25px;}
.icon-btn{background:#0e162b;border-color:var(--vp-border);color:#cbd5e1;}
.icon-btn .svg-icon{width:18px;height:18px;}

.welcome-banner,.balance-card,.supplier-card,.payment-guide-card{border-color:var(--vp-border);background:linear-gradient(145deg,#10172d,#0b1122);box-shadow:0 10px 30px rgba(0,0,0,.18);}
.welcome-banner{padding:16px;border-radius:18px;margin-bottom:14px;}
.banner-mic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(109,93,252,.12);border:1px solid rgba(109,93,252,.24);color:#a79cff;flex:0 0 48px;}
.banner-mic .svg-icon{width:24px;height:24px;}
.banner-heading{display:flex;align-items:center;gap:7px;}
.banner-heading span{font-weight:850;color:#fff}.banner-heading b{font-size:10px;color:#a99fff;background:rgba(109,93,252,.12);padding:4px 7px;border-radius:999px;}
.banner-text p{color:#8f9cb4;}
.banner-wave{color:#4f46e5;opacity:.7;}.banner-arrow{color:#cbd5e1;}

.balance-card{padding:18px;border-radius:20px;margin-bottom:14px;}
.balance-main{position:relative}.wallet-mark{display:none;}
.balance-amount{font-size:36px;letter-spacing:-1px;}
.balance-sub{color:#27d89b;}
.balance-actions{gap:10px;}
.btn-balance{min-height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.08);box-shadow:none;gap:7px;}
.btn-withdraw{background:linear-gradient(135deg,#5369ff,#4653d9);}.btn-support{background:#151e35;}
.chevron{font-size:20px;line-height:1;color:#cbd5e1;margin-left:auto;}

.btn-active-account{min-height:54px;border-radius:15px;margin-bottom:14px;background:linear-gradient(135deg,#7568ff,#4d46d9);box-shadow:0 12px 28px rgba(79,70,229,.2);gap:8px;}
.btn-active-account .btn-icon{width:20px;height:20px;}.btn-active-account b{margin-left:auto;font-size:12px;white-space:nowrap;}.cta-arrow{font-size:20px;opacity:.8;}
.payment-guide-card{padding:14px 15px;border-radius:16px;}
.payment-guide-icon{width:42px;height:42px;border-radius:12px;background:rgba(24,197,139,.1);border:1px solid rgba(24,197,139,.2);color:#22d3a0;display:grid;place-items:center;}
.payment-guide-icon .svg-icon{width:21px;height:21px;}

.suppliers-header{margin:22px 2px 12px;}
.suppliers-header h3{font-size:16px;}.suppliers-header h3 span{display:none;}
.supplier-date-card{background:#0d1428;border:1px solid var(--vp-border);border-radius:12px;padding:8px 10px;}
.supplier-card{padding:15px;border-radius:18px;margin-bottom:12px;}
.avatar-img{width:42px;height:42px;border-color:#26324c;}
.supplier-name{font-size:13px}.supplier-type{color:#73809a;}
.blue-tick{display:inline-grid;place-items:center;width:15px;height:15px;padding:0;font-size:9px;}
.payout-badge{font-size:12px;padding:6px 9px;}
.message-box{background:#080e1d;border-color:rgba(148,163,184,.1);font-size:12px;}
.rec-label{align-items:center;gap:8px;}.timer{margin-left:auto;white-space:nowrap;}
.action-row{gap:8px;}
.btn-record{min-height:44px;border-radius:11px;background:linear-gradient(135deg,#f0445b,#d9364c);}
.btn-record .btn-icon{width:17px;height:17px;}
.btn-play{width:44px;border-radius:11px;}
.btn-send{min-height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:7px;}
.btn-send.ready{background:linear-gradient(135deg,#4f72ff,#4f46e5);}
.supplier-footer{font-size:9.5px;color:#65738d;}

.bottom-nav{background:rgba(8,12,27,.94);border-top:1px solid rgba(148,163,184,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.nav-icon{display:grid;place-items:center;height:22px;}.nav-icon svg{width:19px;height:19px;}.nav-item.active{color:#8b7cff;}
.whatsapp-float{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#20c997,#12a87d);box-shadow:0 12px 28px rgba(18,168,125,.25);display:grid;place-items:center;}
.whatsapp-float .svg-icon{width:24px;height:24px;}

.custom-modal{background:rgba(2,5,15,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.modal-content,.registration-guide-content,.payment-network-content,.payment-instructions-content{background:linear-gradient(145deg,#111a31,#0a1021);border:1px solid rgba(148,163,184,.14);box-shadow:0 24px 70px rgba(0,0,0,.5);border-radius:22px;}
.registration-guide-icon,.payment-modal-icon,.modal-phone-icon,.success-icon{display:grid;place-items:center;}
.registration-guide-icon .svg-icon,.payment-modal-icon .svg-icon,.modal-phone-icon .svg-icon,.success-icon .svg-icon{width:28px;height:28px;}

/* Welcome gate: clean version inspired by the supplied reference video. */
.voicepesa-gate{background:radial-gradient(700px 500px at 50% 0%,rgba(109,93,252,.26),transparent 62%),linear-gradient(145deg,#050817,#0b1030 52%,#080d22);}
.voicepesa-gate-card{width:min(100%,520px);padding:24px 21px 18px;border-radius:28px;background:linear-gradient(180deg,rgba(18,24,61,.98),rgba(7,12,31,.99));border:1px solid rgba(140,124,255,.42);}
.voicepesa-available{gap:8px;padding:11px 15px;font-size:10px;letter-spacing:.45px;}
.voicepesa-available .svg-icon{width:17px;height:17px;}
.voicepesa-region{margin:11px 0 0;color:#6f7b97;font-size:9px;letter-spacing:2px;font-weight:800;}
.voicepesa-logo{width:86px;height:86px;margin:15px auto 11px;padding:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#30286e,#080b25 72%);border:2px solid #c8a84e;outline:4px solid rgba(133,92,255,.35);box-shadow:0 0 0 8px rgba(130,91,255,.06),0 0 32px rgba(110,67,255,.35);}
.voicepesa-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.voicepesa-gate h1{font-size:clamp(29px,7vw,42px);margin-bottom:10px;letter-spacing:-1.3px;}
.voicepesa-gate-intro{font-size:12.5px;line-height:1.65;color:#bec8da;}
.voicepesa-age-panel{padding:14px;border-radius:18px;background:linear-gradient(135deg,rgba(32,39,89,.8),rgba(18,23,57,.9));}
.voicepesa-age-icon{width:66px;height:66px;flex-basis:66px;border-width:4px;font-size:24px;}
.voicepesa-check-row{padding:15px;border-radius:17px;background:#070c1d;border-color:rgba(142,155,255,.22);}
.voicepesa-check-row strong{font-size:13.5px;}
.voicepesa-check-row small{font-size:10px;}
.voicepesa-enter-btn{min-height:52px;border-radius:15px;background:linear-gradient(135deg,#7568ff,#4d46d9);}
.voicepesa-enter-btn b{font-size:19px;}

  50%{transform:translateX(-112%) translateY(47px) scale(.94);}
}

.co-notification-icon{display:grid;place-items:center;}.notify-icon{width:21px;height:21px;}
.co-notification-icon .notify-icon{color:#fff;}

@media (max-width:390px){
  .app-container{padding-left:12px;padding-right:12px;}
  .voicepesa-gate{padding:9px;}
  .voicepesa-gate-card{padding:17px 13px 14px;border-radius:24px;}
  .voicepesa-logo{width:70px;height:70px;margin:10px auto 8px;}
  .voicepesa-gate h1{font-size:29px;}
  .voicepesa-gate-intro{font-size:11.5px;}
  .voicepesa-age-panel{padding:10px;}.voicepesa-age-icon{width:58px;height:58px;flex-basis:58px;font-size:21px;}
}


/* =========================================================
   VOICEPESA PREMIUM THEME — FINAL POLISH
   ========================================================= */
:root{
  --vp-premium-bg:#070a16;
  --vp-premium-surface:#0d1224;
  --vp-premium-surface-2:#11182e;
  --vp-premium-line:rgba(154,167,255,.16);
  --vp-premium-purple:#7c5cff;
  --vp-premium-cyan:#35e0c2;
  --vp-premium-gold:#f1c96b;
}

body{
  background:
    radial-gradient(circle at 15% 8%,rgba(124,92,255,.13),transparent 28%),
    radial-gradient(circle at 88% 24%,rgba(53,224,194,.08),transparent 24%),
    linear-gradient(180deg,#070a16 0%,#090d1c 48%,#070a14 100%);
}

.app-container{background:transparent;}
.top-header{
  background:rgba(7,10,22,.76)!important;
  border-bottom:1px solid var(--vp-premium-line)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.20);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.brand-title{letter-spacing:-.04em;}
.brand-title span{color:#f4f6ff!important;}
.brand-title em{color:var(--vp-premium-cyan)!important;font-style:normal;}

.balance-card,.supplier-card,.payment-guide-card,.welcome-banner{
  border:1px solid rgba(154,167,255,.14)!important;
  background:linear-gradient(145deg,rgba(17,24,46,.96),rgba(9,13,28,.98))!important;
  box-shadow:0 18px 45px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)!important;
}

.balance-actions .btn-support{
  background:linear-gradient(135deg,#1b1741 0%,#252052 48%,#123e4b 100%)!important;
  border:1px solid rgba(124,92,255,.40)!important;
  color:#f8f8ff!important;
  box-shadow:0 10px 28px rgba(72,55,174,.24),inset 0 1px 0 rgba(255,255,255,.07)!important;
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease!important;
}
.balance-actions .btn-support:hover,.balance-actions .btn-support:focus-visible{
  transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 14px 32px rgba(72,55,174,.34),0 0 18px rgba(124,92,255,.12)!important;
}
.balance-actions .btn-support::after{background:var(--vp-premium-cyan)!important;box-shadow:0 0 12px rgba(53,224,194,.55)!important;}

.btn-active-account{
  background:linear-gradient(135deg,#8065ff 0%,#5a4be0 52%,#3b31a8 100%)!important;
  border:1px solid rgba(177,161,255,.34)!important;
  box-shadow:0 14px 32px rgba(92,70,220,.30),0 0 26px rgba(124,92,255,.10)!important;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease!important;
}
.btn-active-account:hover,.btn-active-account:focus-visible{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 18px 38px rgba(92,70,220,.38),0 0 30px rgba(124,92,255,.16)!important;}
.btn-active-account .cta-arrow{display:grid;place-items:center;width:24px;height:24px;}
.btn-active-account .cta-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* Premium floating customer-care control with side label */
.whatsapp-float{
  width:auto!important;height:54px!important;min-width:54px!important;
  padding:0 10px 0 12px!important;
  border-radius:17px!important;
  right:18px!important;bottom:84px!important;
  display:flex!important;flex-direction:row-reverse!important;gap:10px!important;
  background:linear-gradient(135deg,#181442,#27205e 55%,#123d43)!important;
  border:1px solid rgba(124,92,255,.46)!important;
  box-shadow:0 12px 30px rgba(38,28,110,.40),0 0 22px rgba(124,92,255,.14)!important;
  overflow:visible!important;
}
.whatsapp-float::before,.whatsapp-float::after{
  content:"";position:absolute;inset:-2px;border-radius:19px;pointer-events:none;
}
.whatsapp-float::before{
  border:1px solid rgba(53,224,194,.34);
  animation:vpNeonPulse 2.1s ease-in-out infinite;
}
.whatsapp-float::after{
  inset:-7px;border:1px solid rgba(124,92,255,.20);
  filter:blur(2px);animation:vpNeonPulse 2.1s ease-in-out .65s infinite;
}
.whatsapp-float-icon{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,#35e0c2,#1ba990)!important;
  color:#061512;box-shadow:0 0 18px rgba(53,224,194,.28);
  position:relative;z-index:1;
}
.whatsapp-float-icon .svg-icon{width:21px!important;height:21px!important;stroke:currentColor;}
.whatsapp-float-label{
  position:relative;z-index:1;white-space:nowrap;
  color:#f5f3ff;font-size:11px;font-weight:800;letter-spacing:.01em;
  text-shadow:0 0 12px rgba(124,92,255,.25);
}
.whatsapp-float:hover{transform:translateY(-2px) scale(1.015)!important;}

@keyframes vpNeonPulse{
  0%,100%{opacity:.25;box-shadow:0 0 0 rgba(124,92,255,0)}
  50%{opacity:1;box-shadow:0 0 18px rgba(124,92,255,.35),0 0 28px rgba(53,224,194,.12)}
}

/* Remove decorative text-symbols that looked like emoji/icons */
.banner-wave{font-size:0!important;}
.banner-wave::before{content:"";display:block;width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--vp-premium-cyan),transparent);box-shadow:0 0 10px rgba(53,224,194,.35);}

.voicepesa-enter-btn b{display:grid!important;place-items:center;}
.voicepesa-enter-btn b svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

@media(max-width:520px){
  .whatsapp-float{right:12px!important;bottom:82px!important;}
  .whatsapp-float-label{font-size:10px;}
}
@media(max-width:360px){
  .whatsapp-float{min-width:50px!important;padding:0 8px!important;gap:7px!important;}
  .whatsapp-float-label{font-size:9px;}
  .whatsapp-float-icon{width:33px;height:33px;}
}

/* =========================================================
   VOICEPESA — CLEAN PREMIUM REVISION
   ========================================================= */
.menu-btn .svg-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.logo-icon{width:44px!important;height:44px!important;border-radius:14px!important;overflow:hidden;background:#080d1c!important;box-shadow:0 0 22px rgba(124,92,255,.18)!important;}
.logo-icon img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:inherit!important;}

/* Keep the welcome banner focused: no Premium badge or decorative clutter. */
.welcome-banner{min-height:76px!important;padding:15px 16px!important;border-radius:18px!important;}
.welcome-banner .banner-text{width:100%!important;}
.welcome-banner .banner-heading{display:block!important;}
.welcome-banner .banner-heading span{font-size:19px!important;font-weight:900!important;letter-spacing:-.02em;}
.welcome-banner .banner-heading b,.welcome-banner .banner-mic,.welcome-banner .banner-wave,.welcome-banner .banner-arrow{display:none!important;}
.welcome-banner .banner-text p{margin:5px 0 0!important;max-width:100%!important;font-size:11px!important;line-height:1.5!important;color:#aeb9cf!important;}

/* Compact balance card — less visual weight, more breathing room. */
.balance-card{padding:15px!important;border-radius:20px!important;margin:10px 0 10px!important;}
.balance-main{padding:0!important;}
.wallet-mark{width:36px!important;height:36px!important;border-radius:11px!important;}
.wallet-mark .svg-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.salio-label{font-size:9px!important;letter-spacing:.11em!important;}
.balance-amount{font-size:25px!important;line-height:1.1!important;margin:3px 0!important;}
.balance-sub{font-size:9px!important;}
.balance-divider{margin:11px 0!important;}
.balance-actions{gap:8px!important;}
.balance-actions .btn-balance{min-height:47px!important;border-radius:13px!important;padding:9px 10px!important;font-size:11px!important;}
.balance-actions .btn-support{min-height:47px!important;}

/* Premium registration CTA with green neon edge, while retaining the clean core. */
.btn-active-account{
  position:relative!important;overflow:visible!important;
  background:linear-gradient(135deg,#5f49d8 0%,#7657f4 52%,#4632ae 100%)!important;
  border:1px solid rgba(177,161,255,.38)!important;
  border-radius:16px!important;
  padding:13px 14px!important;
  margin-bottom:12px!important;
  box-shadow:0 13px 30px rgba(67,49,166,.28),0 0 0 1px rgba(49,241,176,.10)!important;
}
.btn-active-account::before{
  content:"";position:absolute;inset:-2px;border-radius:18px;pointer-events:none;
  border:1px solid rgba(53,224,194,.55);
  box-shadow:0 0 8px rgba(53,224,194,.28),0 0 18px rgba(53,224,194,.18);
  animation:vpRegistrationNeon 2.25s ease-in-out infinite;
}
.btn-active-account .btn-icon{width:18px!important;height:18px!important;}
.btn-active-account b{font-size:9px!important;padding:5px 8px!important;}
@keyframes vpRegistrationNeon{0%,100%{opacity:.28;filter:brightness(.9)}50%{opacity:1;filter:brightness(1.2)}}

/* Section title uses a real icon, never a text symbol. */
.section-title-icon{display:inline-grid!important;place-items:center!important;width:20px;height:20px;margin-right:5px;border-radius:6px;background:rgba(124,92,255,.12);vertical-align:-5px;}
.section-title-icon .svg-icon{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}

/* VoicePesa v7 — clean solid-color floating controls. */
.floating-actions{
  position:fixed;right:14px;bottom:78px;z-index:1200;
  display:flex;flex-direction:row;align-items:center;gap:8px;
}
.floating-action{
  position:relative;display:flex;align-items:center;gap:9px;
  min-height:50px;padding:0 12px;border-radius:15px;text-decoration:none;
  color:#fff;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 24px rgba(0,0,0,.34);
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
  overflow:visible;
}
.floating-action:hover{transform:translateY(-2px);filter:brightness(1.08);}
/* No gradients: each action has one strong, readable color. */
.floating-sms{background:#6d4aff;flex-direction:row;}
.floating-channel{background:#18b968;flex-direction:row-reverse;}
.floating-action-icon{
  position:relative;z-index:1;width:34px;height:34px;flex:0 0 34px;
  border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);
}
.floating-action-icon .svg-icon{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.floating-action-label{position:relative;z-index:1;white-space:nowrap;font-size:9.5px;font-weight:900;letter-spacing:.01em;}
/* Keep the controls aligned to the main content width on larger screens. */
@media (min-width:700px){
  .floating-actions{left:50%;right:auto;width:min(100% - 28px, 520px);transform:translateX(-50%);justify-content:space-between;pointer-events:none;}
  .floating-action{pointer-events:auto;}
}
@media (max-width:699px){
  .floating-actions{left:14px;right:14px;justify-content:space-between;}
  .floating-action{min-width:0;max-width:48%;padding:0 9px;}
  .floating-action-label{font-size:9px;}
}
/* Remove old floating styling from the retired single control. */
.whatsapp-float{display:none!important;}

/* Compact payment guide so the page does not feel card-heavy. */
.payment-guide-card{min-height:54px!important;padding:10px 12px!important;border-radius:15px!important;margin:8px 0 13px!important;gap:9px!important;}
.payment-guide-icon{width:34px!important;height:34px!important;flex-basis:34px!important;}
.payment-guide-copy h3{font-size:11px!important;}

/* Tanzania availability card: strong green surface with white type. */
.voicepesa-available{background:#159447!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 10px 24px rgba(21,148,71,.18)!important;}
.voicepesa-available strong,.voicepesa-available .svg-icon{color:#fff!important;stroke:#fff!important;}
.voicepesa-region{color:#fff!important;font-weight:800!important;letter-spacing:.06em;}


/* VoicePesa final polish v8 */
.floating-sms{
  background:#6d4aff!important;
  color:#fff!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
  text-align:left!important;
  border:1px solid rgba(25,199,161,.72)!important;
  box-shadow:0 0 0 1px rgba(25,199,161,.22),0 0 18px rgba(25,199,161,.46),0 10px 28px rgba(0,0,0,.34)!important;
}
.floating-sms .svg-icon{order:0!important;margin-left:0!important;margin-right:10px!important;}
.floating-channel{
  background:#18b968!important;
  color:#fff!important;
  flex-direction:row-reverse!important;
  border:1px solid rgba(24,185,104,.7)!important;
}
.registration-cta,.register-cta,.signup-cta,[class*="register"]{ }

/* =========================================================
   VOICEPESA v8 — FINAL CTA / GUIDANCE POLISH
   ========================================================= */
/* Jisajili Hapa: solid green with a purple neon edge. */
.btn-active-account{
  background:#18b968!important;
  color:#fff!important;
  border:1px solid rgba(24,185,104,.78)!important;
  box-shadow:0 10px 26px rgba(24,185,104,.20),0 0 0 1px rgba(118,87,255,.38),0 0 24px rgba(118,87,255,.34)!important;
  animation:vpRegisterPurpleGlow 2.2s ease-in-out infinite!important;
}
.btn-active-account b{
  background:#7657ff!important;
  color:#fff!important;
  border:1px solid rgba(190,178,255,.45)!important;
  box-shadow:0 0 12px rgba(118,87,255,.42)!important;
}
.btn-active-account:hover,.btn-active-account:focus-visible{
  background:#18b968!important;
  filter:brightness(1.06)!important;
  box-shadow:0 14px 34px rgba(24,185,104,.26),0 0 0 1px rgba(118,87,255,.55),0 0 34px rgba(118,87,255,.48)!important;
}
@keyframes vpRegisterPurpleGlow{
  0%,100%{box-shadow:0 10px 26px rgba(24,185,104,.20),0 0 0 1px rgba(118,87,255,.34),0 0 20px rgba(118,87,255,.28)}
  50%{box-shadow:0 12px 30px rgba(24,185,104,.25),0 0 0 1px rgba(118,87,255,.68),0 0 32px rgba(118,87,255,.52)}
}

/* Floating Customer Care: icon is explicitly on the far left. */
.floating-sms{flex-direction:row!important;justify-content:flex-start!important;}
.floating-sms .floating-action-icon{order:-1!important;margin-left:0!important;margin-right:0!important;}
.floating-sms .floating-action-label{order:1!important;}
.floating-sms::after{
  content:"";position:absolute;inset:-2px;border-radius:17px;pointer-events:none;
  border:1px solid rgba(24,185,104,.68);
  box-shadow:0 0 18px rgba(24,185,104,.40),0 0 30px rgba(24,185,104,.18);
  animation:vpCareGreenGlow 2s ease-in-out infinite;
}
@keyframes vpCareGreenGlow{
  0%,100%{opacity:.55;box-shadow:0 0 14px rgba(24,185,104,.32),0 0 24px rgba(24,185,104,.12)}
  50%{opacity:1;box-shadow:0 0 22px rgba(24,185,104,.58),0 0 36px rgba(24,185,104,.24)}
}

  38%{transform:translate(-50%,2px) scale(1.025)!important}
  68%{transform:translate(-50%,0) scale(1)!important}
}

/* =========================================================
   VOICEPESA v9 — THREE-PANEL WALLET CARD
   ========================================================= */
.balance-card.balance-trio{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  padding:9px!important;
  border-radius:20px!important;
  background:#0b1020!important;
  border:1px solid rgba(118,87,255,.18)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.28)!important;
}
.balance-trio .balance-tile{
  min-width:0!important;
  min-height:108px!important;
  border:0!important;
  border-radius:15px!important;
  padding:11px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  color:#fff!important;
  position:relative!important;
  overflow:hidden!important;
}
.balance-trio .balance-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%);
}
.balance-tile-available{background:#159447!important;box-shadow:0 8px 20px rgba(21,148,71,.20)!important;}
.balance-tile-withdrawn{background:#7657ff!important;box-shadow:0 8px 20px rgba(118,87,255,.22)!important;}
.balance-tile-action{background:#18b968!important;box-shadow:0 8px 20px rgba(24,185,104,.20)!important;cursor:pointer;font:inherit;}
.balance-tile-icon{width:31px!important;height:31px!important;border-radius:9px!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.15)!important;margin-bottom:7px!important;position:relative;z-index:1;}
.balance-tile-icon .svg-icon{width:17px!important;height:17px!important;fill:none!important;stroke:#fff!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.balance-tile-label{font-size:8px!important;line-height:1.2!important;font-weight:900!important;letter-spacing:.05em!important;color:#fff!important;position:relative;z-index:1;}
.balance-tile-amount{font-size:14px!important;line-height:1.2!important;margin-top:5px!important;letter-spacing:-.2px!important;position:relative;z-index:1;white-space:nowrap!important;}
.balance-tile-action-text{font-size:12px!important;margin-top:5px!important;position:relative;z-index:1;}
.balance-trio .balance-divider,.balance-trio .balance-main,.balance-trio .balance-actions{display:none!important;}
@media(max-width:390px){
  .balance-card.balance-trio{gap:6px!important;padding:7px!important;}
  .balance-trio .balance-tile{min-height:102px!important;padding:9px 5px!important;border-radius:13px!important;}
  .balance-tile-label{font-size:7px!important;}
  .balance-tile-amount{font-size:12px!important;}
}

/* Final wallet layout */
.balance-card.balance-trio{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:auto 1fr!important;
  gap:8px!important;
  padding:11px!important;
  margin-bottom:14px!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,#0d1426,#080d1b)!important;
  border:1px solid rgba(118,87,255,.24)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.balance-card-heading{
  grid-column:1/-1!important;
  padding:2px 4px 1px!important;
  color:#aebbd0!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:1.35px!important;
  text-align:left!important;
}
.balance-trio .balance-tile{
  min-width:0!important;
  min-height:104px!important;
  border:0!important;
  border-radius:15px!important;
  padding:11px 7px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  color:#fff!important;
  position:relative!important;
  overflow:hidden!important;
}
.balance-trio .balance-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 48%);
}
.balance-tile-available{background:#159447!important;box-shadow:0 8px 20px rgba(21,148,71,.22)!important;}
.balance-tile-withdrawn{background:#7657ff!important;box-shadow:0 8px 20px rgba(118,87,255,.24)!important;}
.balance-tile-action{background:#18b968!important;box-shadow:0 8px 20px rgba(24,185,104,.22)!important;cursor:pointer;font:inherit;}
.balance-tile-icon{width:31px!important;height:31px!important;border-radius:9px!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.15)!important;margin-bottom:7px!important;position:relative;z-index:1;}
.balance-tile-icon .svg-icon{width:17px!important;height:17px!important;fill:none!important;stroke:#fff!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.balance-tile-label{font-size:8px!important;line-height:1.2!important;font-weight:900!important;letter-spacing:.05em!important;color:#fff!important;position:relative;z-index:1;}
.balance-tile-amount{font-size:14px!important;line-height:1.2!important;margin-top:5px!important;letter-spacing:-.2px!important;position:relative;z-index:1;white-space:nowrap!important;}
.balance-tile-action-text{font-size:12px!important;margin-top:5px!important;position:relative;z-index:1!important;}
.balance-trio .balance-divider,.balance-trio .balance-main,.balance-trio .balance-actions{display:none!important;}

/* Clean 18+ alignment */
.voicepesa-age-icon{display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;}
.voicepesa-age-icon .age-number,.voicepesa-age-icon .age-plus{display:inline-block!important;line-height:1!important;margin:0!important;}
.voicepesa-age-icon .age-number{font-size:25px!important;}
.voicepesa-age-icon .age-plus{font-size:19px!important;transform:translateY(-1px);}

@media(max-width:390px){
  .balance-card.balance-trio{gap:6px!important;padding:9px!important;}
  .balance-trio .balance-tile{min-height:98px!important;padding:9px 4px!important;border-radius:13px!important;}
  .balance-card-heading{font-size:8px!important;padding-left:3px!important;}
  .balance-tile-label{font-size:6.7px!important;}
  .balance-tile-amount{font-size:11.5px!important;}
  .balance-tile-action-text{font-size:11px!important;}
}


/* Age gate interaction indicators */
.voicepesa-check-row .voicepesa-custom-check{
  position:relative!important;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease!important;
}
.voicepesa-check-row input:not(:checked) + .voicepesa-custom-check{
  border-color:#21d49d!important;
  box-shadow:0 0 0 2px rgba(33,212,157,.08),0 0 14px rgba(33,212,157,.24)!important;
  animation:vpCheckboxIndicator 1.25s ease-in-out infinite!important;
}
.voicepesa-check-row input:checked + .voicepesa-custom-check{
  animation:none!important;
}
@keyframes vpCheckboxIndicator{
  0%,100%{opacity:.48;box-shadow:0 0 0 1px rgba(33,212,157,.04),0 0 7px rgba(33,212,157,.10);}
  50%{opacity:1;box-shadow:0 0 0 3px rgba(33,212,157,.14),0 0 22px rgba(33,212,157,.46);}
}

.voicepesa-enter-btn:disabled{
  background:linear-gradient(135deg,#7657ff,#4d3be2)!important;
  color:#fff!important;
  opacity:.92!important;
  cursor:pointer!important;
  box-shadow:0 12px 30px rgba(95,69,236,.28)!important;
  animation:vpEnterIndicator 1.25s ease-in-out infinite!important;
}
.voicepesa-enter-btn:not(:disabled){
  animation:none!important;
}
@keyframes vpEnterIndicator{
  0%,100%{transform:translateY(0) scale(1);box-shadow:0 10px 25px rgba(95,69,236,.22);}
  50%{transform:translateY(-3px) scale(1.012);box-shadow:0 16px 34px rgba(95,69,236,.38);}
}

/* Final age-gate focus: guide only the checkbox card, never the enter button. */
.voicepesa-check-row{
  animation:vpAgeCardIndicator 1.25s ease-in-out infinite!important;
}
.voicepesa-check-row input:checked ~ span,
.voicepesa-check-row input:checked + .voicepesa-custom-check{
  animation:none!important;
}
.voicepesa-check-row input:checked ~ span:last-child{
  animation:none!important;
}
.voicepesa-check-row input:checked ~ .voicepesa-custom-check{
  animation:none!important;
}
.voicepesa-enter-btn:disabled{
  background:linear-gradient(135deg,#6a6b70,#4e5056)!important;
  color:#d6d7da!important;
  opacity:.75!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
  animation:none!important;
  transform:none!important;
}
.voicepesa-enter-btn:not(:disabled){
  animation:none!important;
  transform:none!important;
  box-shadow:0 12px 30px rgba(95,69,236,.28)!important;
}
@keyframes vpAgeCardIndicator{
  0%,100%{
    border-color:rgba(142,155,255,.23);
    box-shadow:0 0 0 0 rgba(33,212,157,0),0 0 0 rgba(33,212,157,0);
  }
  50%{
    border-color:rgba(33,212,157,.82);
    box-shadow:0 0 0 3px rgba(33,212,157,.10),0 0 22px rgba(33,212,157,.30);
  }
}
.voicepesa-check-row input:not(:checked) + .voicepesa-custom-check{
  animation:vpCheckboxIndicator 1.25s ease-in-out infinite!important;
}
.voicepesa-check-row input:checked + .voicepesa-custom-check{
  animation:none!important;
}

.voicepesa-check-guide{
  display:flex;
  align-items:center;
  gap:11px;
  margin:13px 0 11px;
  padding:13px 14px;
  border:1px solid rgba(33,212,157,.28);
  border-radius:16px;
  background:rgba(7,12,29,.72);
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}
.voicepesa-guide-finger{
  flex:0 0 auto;
  font-size:34px;
  line-height:1;
  filter:drop-shadow(0 3px 8px rgba(255,213,79,.16));
}
.voicepesa-check-guide p{
  margin:0;
  color:#d7deeb;
  font-size:11.5px;
  line-height:1.5;
}
.voicepesa-check-guide p strong:first-child{color:#ffe38a;}
.voicepesa-check-guide p strong:last-child{color:#fff;}
.voicepesa-age-panel{grid-template-columns:58px minmax(0,1fr)!important;align-items:center!important;}
.voicepesa-age-icon{
  display:grid!important;
  place-items:center!important;
  width:58px!important;
  height:58px!important;
  flex-basis:58px!important;
}
.voicepesa-age-icon svg{
  width:30px!important;
  height:30px!important;
  fill:none!important;
  stroke:#25d39d!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
@media(max-width:390px){
  .voicepesa-check-guide{padding:11px 12px;gap:9px;}
  .voicepesa-guide-finger{font-size:31px;}
  .voicepesa-check-guide p{font-size:10.5px;}
  .voicepesa-age-panel{grid-template-columns:52px minmax(0,1fr)!important;}
  .voicepesa-age-icon{width:52px!important;height:52px!important;flex-basis:52px!important;}
  .voicepesa-age-icon svg{width:27px!important;height:27px!important;}
}

/* VOICEPESA NEON DASHBOARD V20 */
:root{
  --vp-bg:#061022;
  --vp-panel:#0b1930;
  --vp-panel-2:#0d203b;
  --vp-text:#f8fbff;
  --vp-muted:#9bb0cf;
  --vp-cyan:#16e6ff;
  --vp-green:#18e58a;
  --vp-blue:#1689ff;
  --vp-purple:#7242ff;
  --vp-pink:#ef2e63;
}
html{background:var(--vp-bg);}
body{
  min-height:100vh;
  background:
    radial-gradient(65% 34% at 50% -2%, rgba(12,105,91,.36), transparent 70%),
    radial-gradient(45% 28% at 100% 42%, rgba(0,123,255,.12), transparent 70%),
    linear-gradient(180deg,#06101f 0%,#061225 48%,#061021 100%);
  color:var(--vp-text);
  padding-bottom:92px;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.55;
  background:
    radial-gradient(28rem 16rem at -8% 18%,rgba(0,255,190,.10),transparent 68%),
    radial-gradient(30rem 18rem at 110% 78%,rgba(0,136,255,.12),transparent 70%);
}
.app-container{
  width:min(980px,100%);
  max-width:980px;
  margin:0 auto;
  padding:18px 22px 30px;
}
.top-header{
  display:flex;align-items:center;justify-content:space-between;
  min-height:92px;padding:4px 4px 18px;margin-bottom:14px;
  border-bottom:1px solid rgba(31,103,160,.45);
}
.brand{gap:16px;align-items:center}
.logo-icon{
  width:74px;height:74px;border-radius:20px;padding:7px;
  background:linear-gradient(145deg,#071b3c,#101e46 45%,#061b33);
  border:1px solid rgba(25,214,255,.65);
  box-shadow:0 0 0 3px rgba(12,119,255,.10),0 0 24px rgba(0,211,255,.28),inset 0 0 20px rgba(81,47,255,.18);
}
.logo-icon img{width:100%;height:100%;object-fit:contain}
.brand-title{font-size:36px;line-height:1;font-weight:850;letter-spacing:-1.2px;color:#fff}
.brand-title em{font-style:normal;color:#12e4ff}
.brand-sub{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:17px;color:#a9c0e5}
.brand-sub i{width:19px;height:19px;border-radius:50%;background:#17d99a;display:inline-block;position:relative;box-shadow:0 0 12px rgba(23,217,154,.3)}
.brand-sub i::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#072016;font-size:12px;font-weight:900}
.header-icons{gap:13px}
.icon-btn{
  width:58px;height:58px;border-radius:50%;border:1px solid rgba(48,132,205,.52);
  background:linear-gradient(145deg,#102b4c,#0a1b35);color:#d9eaff;
  box-shadow:inset 0 0 18px rgba(19,124,221,.10),0 5px 18px rgba(0,0,0,.2)
}
.icon-btn .svg-icon{width:28px;height:28px;stroke-width:1.7}
.badge{top:-4px;right:-3px;width:29px;height:29px;background:#ef345c;font-size:14px;box-shadow:0 0 12px rgba(239,52,92,.32)}
.menu-btn{display:none!important}
.welcome-banner{display:none!important}
.balance-card.balance-trio{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  padding:0;background:none;border:0;margin:8px 0 20px;
}
.balance-card-heading{display:none}
.balance-tile{
  position:relative;min-height:190px;border-radius:24px;padding:22px 22px 20px;
  overflow:hidden;border:1px solid rgba(255,255,255,.13);color:#fff;
  box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
}
.balance-tile::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-35px;height:80px;border-radius:50%;transform:rotate(-6deg);background:rgba(255,255,255,.11);filter:blur(1px)}
.balance-tile-available{background:linear-gradient(135deg,#0da66f 0%,#0bcb91 45%,#16b7c8 100%);box-shadow:0 18px 36px rgba(0,204,153,.16),inset 0 1px rgba(255,255,255,.22)}
.balance-tile-withdrawn{background:linear-gradient(135deg,#5b31d9 0%,#7b45f1 48%,#4934ce 100%);box-shadow:0 18px 36px rgba(104,58,240,.20),inset 0 1px rgba(255,255,255,.22)}
.balance-tile-action{background:linear-gradient(135deg,#087fd9 0%,#0d9be8 45%,#1670df 100%);cursor:pointer;box-shadow:0 18px 36px rgba(0,130,255,.18),inset 0 1px rgba(255,255,255,.22)}
.balance-tile-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;margin-bottom:13px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 15px rgba(255,255,255,.08)}
.balance-tile-icon .svg-icon{width:31px;height:31px;stroke-width:1.8}
.balance-tile-label{font-size:20px;font-weight:850;line-height:1.05;letter-spacing:-.3px;z-index:1}
.balance-tile-amount,.balance-tile-action-text{font-size:31px;line-height:1.1;margin-top:13px;font-weight:900;z-index:1;letter-spacing:.2px}
.balance-tile-action-text{font-size:25px;margin-top:13px}
.btn-active-account{
  width:100%;min-height:110px;margin:0 0 18px;padding:17px 26px;border-radius:25px;
  justify-content:flex-start;gap:18px;background:linear-gradient(110deg,#09d88e 0%,#0fc8b5 40%,#078fff 100%);
  border:1px solid rgba(116,255,248,.7);color:#fff;box-shadow:0 0 0 1px rgba(0,246,231,.14),0 10px 32px rgba(0,198,240,.19),inset 0 1px rgba(255,255,255,.25);position:relative;overflow:hidden
}
.btn-active-account::after{content:"";position:absolute;right:-6%;bottom:-58%;width:62%;height:180%;border-radius:50%;border:2px solid rgba(255,255,255,.13);transform:rotate(-28deg)}
.btn-active-account .btn-icon{width:46px;height:46px;flex:0 0 46px}
.btn-active-account span:not(.cta-arrow){font-size:28px;font-weight:900;z-index:1}
.btn-active-account .cta-arrow{display:grid;place-items:center;z-index:1}.cta-arrow .svg-icon{width:28px;height:28px}
.btn-active-account b{margin-left:auto;z-index:1;background:linear-gradient(135deg,#5a2cff,#7348f9);padding:12px 20px;border-radius:22px;font-size:20px;box-shadow:0 8px 22px rgba(53,25,168,.25);white-space:nowrap}
.payment-guide-card{
  min-height:92px;margin-bottom:24px;border-radius:20px;padding:14px 20px;
  background:linear-gradient(145deg,#0a1a30,#08182b);border:1px solid rgba(0,184,255,.45);
  display:flex;align-items:center;gap:16px;box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 0 24px rgba(0,127,255,.04)
}
.payment-guide-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(0,223,240,.10);border:1px solid rgba(0,223,240,.35);color:#12e4ff;flex:0 0 auto}.payment-guide-icon .svg-icon{width:30px;height:30px}
.payment-guide-copy h3{font-size:20px;margin-bottom:4px}.payment-guide-copy p{font-size:15px;color:#91acd2}.payment-guide-arrow{margin-left:auto;color:#14e3ff}.payment-guide-arrow .svg-icon{width:30px;height:30px}
.suppliers-header{margin:2px 0 14px;align-items:center}.suppliers-header h3{font-size:27px;color:#f7fbff}.suppliers-header small{font-size:15px;color:#9db3d3;display:block;margin-top:6px}.section-title-icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#122c55,#0c1e39);border:1px solid #23538c;color:#a9c8ef;margin-right:8px;vertical-align:middle}.section-title-icon .svg-icon{width:24px;height:24px}
.supplier-date-card{min-width:245px;padding:12px 16px;border-radius:20px;background:linear-gradient(145deg,#0d2545,#091a32);border:1px solid rgba(51,125,197,.42);display:flex;align-items:center;gap:13px}.supplier-date-card::before{content:"";width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#17345b,#0d2340);border:1px solid #27598d;display:block;box-shadow:inset 0 0 15px rgba(0,153,255,.09)}.supplier-date-main{font-size:14px;color:#a9bbd8;line-height:1.3}.supplier-date-main b{display:block;color:#fff;font-size:17px}.supplier-time{margin-left:auto;color:#11e6ad;font-size:20px;font-weight:900;white-space:nowrap}
.suppliers-list{display:grid;grid-template-columns:1fr;gap:14px}.supplier-card{background:linear-gradient(145deg,#09182d,#071426);border:1px solid rgba(33,85,135,.48);border-radius:22px;padding:18px;margin:0;box-shadow:0 14px 28px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035)}
.supplier-top{margin-bottom:14px}.avatar-img{width:60px;height:60px;border:2px solid #254b77}.supplier-name{font-size:20px}.supplier-type{font-size:14px;color:#9bb0cf;margin-top:3px}.blue-tick{background:#1397ee;font-size:11px;padding:2px 6px}.payout-badge{padding:8px 15px;font-size:19px;border-radius:24px;color:#10e6d0;background:rgba(10,205,188,.10);border:1px solid rgba(10,205,188,.42);box-shadow:0 0 14px rgba(0,213,201,.10)}
.message-box{background:#071225;border:1px solid #193d66;padding:14px 17px;border-radius:18px;font-size:18px;color:#e2eafa;line-height:1.45;margin-bottom:12px}.rec-label{font-size:14px;color:#a7bad8;margin-bottom:10px}.rec-label strong{color:#bdd0ea}.timer{color:#b2c2dc;font-size:15px}.inline-icon{width:20px;height:20px;color:#fff;margin-right:8px}.action-row{gap:10px;margin-bottom:12px}.btn-record{min-height:58px;padding:13px 18px;border-radius:28px;background:linear-gradient(100deg,#ff3b62,#ee174f);box-shadow:0 8px 20px rgba(239,36,81,.18);font-size:17px}.btn-record.recording{background:linear-gradient(100deg,#dc1748,#b70f39)}.btn-play{width:58px;border-radius:18px;background:#102541;border:1px solid #244e7b}.btn-play .btn-icon{width:25px;height:25px}
.supplier-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}.supplier-quick-btn{min-height:58px;border-radius:18px;padding:10px 14px;display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:14px;font-weight:800;border:1px solid rgba(255,255,255,.10)}.supplier-quick-btn .btn-icon{width:25px;height:25px;flex:0 0 auto}.supplier-quick-btn span{min-width:0}.supplier-quick-btn b{margin-left:auto;font-size:27px;font-weight:400}.customer-care-btn{background:linear-gradient(120deg,#6137ea,#4e20c9);box-shadow:0 8px 20px rgba(91,45,220,.16)}.whatsapp-btn{background:linear-gradient(120deg,#0dcf75,#0cbf9d);box-shadow:0 8px 20px rgba(0,208,133,.15)}.btn-send{
  width:100%!important;min-height:52px!important;margin:0 0 12px!important;padding:11px 16px!important;border-radius:16px!important;
  display:none!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  background:linear-gradient(135deg,#172b45,#10233c)!important;color:#8ea5c3!important;
  border:1px solid rgba(54,100,149,.65)!important;box-shadow:inset 0 1px rgba(255,255,255,.06)!important;
  font-size:14px!important;font-weight:850!important;
}
.btn-send.ready{display:flex!important;background:linear-gradient(135deg,#0fcf8a 0%,#0dbfa0 48%,#178cf0 100%)!important;color:#fff!important;border-color:rgba(95,255,225,.65)!important;box-shadow:0 10px 26px rgba(0,204,164,.18),inset 0 1px rgba(255,255,255,.25)!important;cursor:pointer!important}
.btn-send:disabled{opacity:.72!important;cursor:not-allowed!important}
.btn-send .btn-icon{width:20px!important;height:20px!important}
.audio-toggle.audio-playing{border-color:rgba(16,226,255,.72)!important;box-shadow:0 0 18px rgba(0,213,255,.18),inset 0 0 16px rgba(0,213,255,.06)!important;color:#16e7ff!important}
.supplier-footer{display:none!important}
.bottom-nav{height:86px;padding:8px 0 7px;background:rgba(5,15,31,.96);border-top:1px solid rgba(38,84,135,.65);box-shadow:0 -10px 30px rgba(0,0,0,.22);justify-content:space-around}.nav-item{font-size:14px;min-width:90px;gap:4px;color:#91a9cf}.nav-item.active{color:#12e6ff}.nav-icon .svg-icon{width:28px;height:28px}.nav-item.active::after{content:"";width:95px;height:4px;border-radius:5px;background:#13e5ff;box-shadow:0 0 12px rgba(19,229,255,.45);margin-top:3px}
.floating-actions{display:none}
@media (max-width:720px){
  .app-container{padding:13px 14px 25px}.top-header{min-height:72px;padding-bottom:12px}.logo-icon{width:58px;height:58px;border-radius:17px}.brand{gap:10px}.brand-title{font-size:27px}.brand-sub{font-size:13px;margin-top:5px}.brand-sub i{width:15px;height:15px}.brand-sub i::after{font-size:9px}.header-icons{gap:7px}.icon-btn{width:47px;height:47px}.icon-btn .svg-icon{width:23px;height:23px}.badge{width:23px;height:23px;font-size:11px}
  .balance-card.balance-trio{gap:9px}.balance-tile{min-height:142px;padding:13px 8px;border-radius:19px}.balance-tile-icon{width:42px;height:42px;border-radius:13px;margin-bottom:9px}.balance-tile-icon .svg-icon{width:23px;height:23px}.balance-tile-label{font-size:13px}.balance-tile-amount{font-size:21px;margin-top:9px}.balance-tile-action-text{font-size:17px;margin-top:9px}
  .btn-active-account{min-height:84px;padding:11px 13px;gap:10px;border-radius:20px}.btn-active-account .btn-icon{width:37px;height:37px;flex-basis:37px}.btn-active-account span:not(.cta-arrow){font-size:20px}.btn-active-account b{font-size:14px;padding:9px 11px;border-radius:17px}.cta-arrow .svg-icon{width:22px;height:22px}
  .payment-guide-card{min-height:70px;padding:10px 13px;border-radius:17px;gap:11px}.payment-guide-icon{width:43px;height:43px;border-radius:12px}.payment-guide-copy h3{font-size:14px}.payment-guide-copy p{font-size:11px}.payment-guide-arrow .svg-icon{width:23px;height:23px}
  .suppliers-header{gap:8px}.suppliers-header h3{font-size:19px}.suppliers-header small{font-size:11px}.section-title-icon{width:34px;height:34px;border-radius:10px}.supplier-date-card{min-width:160px;padding:8px 10px;gap:7px;border-radius:15px}.supplier-date-card::before{width:34px;height:34px;border-radius:10px}.supplier-date-main{font-size:10px}.supplier-date-main b{font-size:12px}.supplier-time{font-size:13px}
  .supplier-card{padding:13px;border-radius:18px}.avatar-img{width:48px;height:48px}.supplier-name{font-size:15px}.supplier-type{font-size:11px}.payout-badge{font-size:14px;padding:6px 10px}.message-box{font-size:14px;padding:12px 13px;border-radius:15px}.rec-label{font-size:11px}.btn-record{min-height:50px;font-size:14px}.btn-play{width:50px}.supplier-quick-actions{gap:7px}.supplier-quick-btn{min-height:49px;padding:8px 10px;font-size:10px;border-radius:15px}.supplier-quick-btn .btn-icon{width:21px;height:21px}.supplier-quick-btn b{font-size:22px}.bottom-nav{height:70px}.nav-item{font-size:11px;min-width:65px}.nav-icon .svg-icon{width:23px;height:23px}.nav-item.active::after{width:64px;height:3px}
}
@media (max-width:380px){.balance-tile-label{font-size:11px}.balance-tile-amount{font-size:18px}.balance-tile-action-text{font-size:15px}.supplier-date-card{min-width:145px}.supplier-date-card::before{display:none}.supplier-time{font-size:11px}.btn-active-account span:not(.cta-arrow){font-size:17px}.btn-active-account b{font-size:12px}}



/* VoicePesa v21 — floating quick actions + reference neon palette */
.floating-actions{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:88px!important;
  transform:translateX(-50%)!important;
  width:min(calc(100vw - 28px), 920px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  z-index:1300!important;
  pointer-events:none!important;
}
.floating-action{
  pointer-events:auto!important;
  position:relative!important;
  min-height:58px!important;
  flex:1 1 0!important;
  max-width:440px!important;
  padding:9px 16px!important;
  border-radius:22px!important;
  display:flex!important;
  align-items:center!important;
  text-decoration:none!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:-.15px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.25)!important;
  overflow:hidden!important;
  transition:transform .2s ease,filter .2s ease!important;
}
.floating-action::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 42%,rgba(255,255,255,.08))!important;
  pointer-events:none!important;
}
.floating-action:hover{transform:translateY(-3px)!important;filter:brightness(1.08)!important}
.floating-sms{
  background:linear-gradient(135deg,#6435ff 0%,#3e54f4 52%,#087df1 100%)!important;
  box-shadow:0 14px 34px rgba(68,61,255,.34),0 0 28px rgba(57,95,255,.18),inset 0 1px rgba(255,255,255,.28)!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
}
.floating-channel{
  background:linear-gradient(135deg,#08c86e 0%,#0bd09a 52%,#08aee0 100%)!important;
  box-shadow:0 14px 34px rgba(0,211,137,.28),0 0 28px rgba(0,221,188,.16),inset 0 1px rgba(255,255,255,.28)!important;
  flex-direction:row-reverse!important;
  justify-content:flex-start!important;
}
.floating-action-icon{
  width:42px!important;height:42px!important;flex:0 0 42px!important;
  border-radius:15px!important;display:grid!important;place-items:center!important;
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:inset 0 0 16px rgba(255,255,255,.08)!important;
  position:relative!important;z-index:1!important;
}
.floating-action-icon .svg-icon{width:24px!important;height:24px!important;stroke:#fff!important;fill:none!important;stroke-width:1.9!important}
.floating-action-label{position:relative!important;z-index:1!important;white-space:nowrap!important;font-size:14px!important;font-weight:900!important}
.floating-sms .floating-action-label{margin-left:11px!important}
.floating-channel .floating-action-label{margin-right:11px!important}
.supplier-quick-actions{display:none!important}

/* Keep the dashboard cards as independent cards; use the screenshot's luminous fintech palette. */
.balance-tile{
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.25)!important;
}
.balance-tile-available{
  background:linear-gradient(135deg,#0aa96f 0%,#06d795 48%,#13b7ca 100%)!important;
  box-shadow:0 18px 40px rgba(0,220,158,.20),0 0 24px rgba(0,235,210,.10),inset 0 1px rgba(255,255,255,.28)!important;
}
.balance-tile-withdrawn{
  background:linear-gradient(135deg,#6133e1 0%,#7d42f2 48%,#4931d1 100%)!important;
  box-shadow:0 18px 40px rgba(112,63,244,.24),0 0 25px rgba(121,78,255,.12),inset 0 1px rgba(255,255,255,.28)!important;
}
.balance-tile-action{
  background:linear-gradient(135deg,#087bd8 0%,#0d9be9 48%,#176fe0 100%)!important;
  box-shadow:0 18px 40px rgba(0,135,255,.22),0 0 25px rgba(0,164,255,.11),inset 0 1px rgba(255,255,255,.28)!important;
}
.btn-active-account{
  background:linear-gradient(120deg,#09c989 0%,#08cfa8 38%,#087fe8 100%)!important;
  border:1px solid rgba(255,255,255,.25)!important;
  box-shadow:0 16px 38px rgba(0,207,178,.22),0 0 28px rgba(0,191,255,.13),inset 0 1px rgba(255,255,255,.28)!important;
}
.supplier-card,.payment-guide-card{
  background:linear-gradient(145deg,rgba(10,29,55,.96),rgba(5,17,35,.96))!important;
  border-color:rgba(35,112,187,.52)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.045)!important;
}
.supplier-card{border-radius:22px!important}
.message-box{
  background:linear-gradient(145deg,#071529,#081b31)!important;
  border-color:rgba(36,93,151,.72)!important;
}
.btn-record{
  background:linear-gradient(100deg,#ff4a55 0%,#f11d59 52%,#dc0d68 100%)!important;
  box-shadow:0 10px 28px rgba(239,27,84,.25),0 0 20px rgba(255,55,92,.08)!important;
}
.bottom-nav{
  background:rgba(5,16,34,.96)!important;
  border-top-color:rgba(42,104,166,.58)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
@media (max-width:720px){
  .floating-actions{
    left:14px!important;right:14px!important;bottom:78px!important;
    width:auto!important;transform:none!important;gap:8px!important;
  }
  .floating-action{
    min-height:52px!important;padding:7px 9px!important;border-radius:19px!important;
  }
  .floating-action-label{font-size:10px!important}
  .floating-action-icon{width:35px!important;height:35px!important;flex-basis:35px!important;border-radius:12px!important}
  .floating-action-icon .svg-icon{width:21px!important;height:21px!important}
  .floating-sms .floating-action-label{margin-left:7px!important}
  .floating-channel .floating-action-label{margin-right:7px!important}
}



/* =========================================================
   VOICEPESA V23 — SATURATED PREMIUM NEON FINTECH PALETTE
   ========================================================= */
:root{
  --vp-neon-green:#00f58a;
  --vp-neon-green-2:#00c96b;
  --vp-neon-purple:#8a2bff;
  --vp-neon-purple-2:#5a20ff;
  --vp-neon-blue:#008cff;
  --vp-neon-cyan:#00e8ff;
}

/* Header: one dedicated voice control replaces notification/profile controls. */
.header-icons{display:flex!important;align-items:center!important;gap:0!important;}
.voice-header-control{
  width:58px!important;height:58px!important;border-radius:19px!important;
  border:1px solid rgba(0,232,255,.58)!important;
  background:linear-gradient(145deg,#071f3f 0%,#063d5d 48%,#07172f 100%)!important;
  color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;
  gap:7px!important;padding:0 10px!important;cursor:pointer!important;position:relative!important;overflow:hidden!important;
  box-shadow:0 0 0 1px rgba(0,140,255,.18),0 0 18px rgba(0,225,255,.26),0 9px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.24)!important;
}
.voice-header-control::before{content:"";position:absolute;inset:-1px;background:linear-gradient(120deg,rgba(0,232,255,.18),transparent 45%,rgba(138,43,255,.18));pointer-events:none;}
.voice-wave-icon{height:30px;display:flex;align-items:center;justify-content:center;gap:3px;position:relative;z-index:1;}
.voice-wave-icon i{display:block;width:3px;border-radius:999px;background:#00f0ff;box-shadow:0 0 9px rgba(0,240,255,.9);animation:vpWave .85s ease-in-out infinite alternate;}
.voice-wave-icon i:nth-child(1){height:10px;animation-delay:-.45s}.voice-wave-icon i:nth-child(2){height:19px;animation-delay:-.28s}.voice-wave-icon i:nth-child(3){height:27px;animation-delay:-.08s}.voice-wave-icon i:nth-child(4){height:18px;animation-delay:-.32s}.voice-wave-icon i:nth-child(5){height:11px;animation-delay:-.52s}
.voice-control-state{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;position:relative;z-index:1;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);}
.voice-control-state .svg-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.voice-header-control:not(.audio-playing) .voice-wave-icon i{animation-play-state:paused;opacity:.58;}
.voice-header-control.audio-playing{border-color:rgba(0,245,138,.76)!important;box-shadow:0 0 0 1px rgba(0,245,138,.18),0 0 24px rgba(0,245,138,.34),0 9px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.24)!important;color:#fff!important;}
.voice-header-control.audio-playing .voice-wave-icon i{background:#00ff9a;box-shadow:0 0 10px rgba(0,255,154,.95);}
@keyframes vpWave{from{transform:scaleY(.55);opacity:.62}to{transform:scaleY(1);opacity:1}}

/* Deep, saturated, luminous dashboard cards. */
.balance-tile{border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 18px 42px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.34),inset 0 -22px 38px rgba(0,0,0,.10)!important;}
.balance-tile-available{
  background:linear-gradient(135deg,#008f55 0%,#00d979 42%,#00ffc2 72%,#00aeea 100%)!important;
  box-shadow:0 20px 46px rgba(0,238,154,.28),0 0 34px rgba(0,255,198,.22),inset 0 1px rgba(255,255,255,.38),inset 0 -26px 42px rgba(0,77,62,.16)!important;
}
.balance-tile-withdrawn{
  background:linear-gradient(135deg,#3c0bbd 0%,#7120ff 42%,#a22bff 68%,#4b21e8 100%)!important;
  box-shadow:0 20px 46px rgba(119,36,255,.34),0 0 36px rgba(145,45,255,.24),inset 0 1px rgba(255,255,255,.38),inset 0 -26px 42px rgba(35,0,90,.16)!important;
}
.balance-tile-action{
  background:linear-gradient(135deg,#005bc9 0%,#008eff 44%,#00c8ff 70%,#0068f2 100%)!important;
  box-shadow:0 20px 46px rgba(0,137,255,.34),0 0 36px rgba(0,201,255,.23),inset 0 1px rgba(255,255,255,.38),inset 0 -26px 42px rgba(0,38,100,.16)!important;
}
.balance-tile-icon{background:rgba(255,255,255,.20)!important;border-color:rgba(255,255,255,.30)!important;box-shadow:inset 0 0 18px rgba(255,255,255,.12),0 0 14px rgba(255,255,255,.08)!important;}

.btn-active-account{
  background:linear-gradient(115deg,#00df83 0%,#00f0b5 36%,#00bfff 68%,#0077ff 100%)!important;
  border-color:rgba(157,255,247,.9)!important;
  box-shadow:0 18px 42px rgba(0,207,203,.28),0 0 36px rgba(0,220,255,.24),inset 0 1px rgba(255,255,255,.38)!important;
}
.btn-active-account b{background:linear-gradient(135deg,#6d18ff,#9d2cff)!important;box-shadow:0 0 24px rgba(145,42,255,.55),inset 0 1px rgba(255,255,255,.3)!important;}

/* Record/send controls: bold and clearly separated. */
.btn-record{background:linear-gradient(100deg,#ff234e 0%,#ff005d 50%,#d900ff 100%)!important;box-shadow:0 12px 32px rgba(255,0,86,.32),0 0 24px rgba(255,0,137,.16)!important;border:1px solid rgba(255,150,190,.45)!important;}
.btn-record.recording{background:linear-gradient(100deg,#ff003d,#c90052,#8f00ff)!important;}
.btn-play{background:linear-gradient(145deg,#073d70,#075e91,#004bbd)!important;border-color:rgba(0,196,255,.55)!important;box-shadow:0 0 20px rgba(0,150,255,.20),inset 0 1px rgba(255,255,255,.18)!important;}
.btn-send{margin-top:10px!important;margin-bottom:0!important;min-height:56px!important;border-radius:18px!important;}
.btn-send.ready{background:linear-gradient(110deg,#00e676 0%,#00d98a 35%,#00c9d9 70%,#168cff 100%)!important;border-color:rgba(119,255,235,.9)!important;box-shadow:0 14px 32px rgba(0,220,170,.32),0 0 28px rgba(0,230,220,.20),inset 0 1px rgba(255,255,255,.35)!important;}

/* Floating actions: vivid premium colors while remaining outside cards. */
.floating-sms{background:linear-gradient(135deg,#5b00ff 0%,#7430ff 45%,#006cff 100%)!important;border-color:rgba(172,137,255,.82)!important;box-shadow:0 16px 38px rgba(76,0,255,.42),0 0 34px rgba(66,95,255,.28),inset 0 1px rgba(255,255,255,.34)!important;}
.floating-channel{background:linear-gradient(135deg,#00d86b 0%,#00f19a 48%,#00b9ed 100%)!important;border-color:rgba(134,255,218,.86)!important;box-shadow:0 16px 38px rgba(0,224,131,.38),0 0 34px rgba(0,226,213,.26),inset 0 1px rgba(255,255,255,.34)!important;}
.floating-action-icon{background:rgba(255,255,255,.20)!important;border-color:rgba(255,255,255,.30)!important;box-shadow:inset 0 0 18px rgba(255,255,255,.12),0 0 16px rgba(255,255,255,.08)!important;}
.floating-action-label{text-shadow:0 1px 10px rgba(0,0,0,.28)!important;}

/* Keep the actual supplier cards dark/clean; color energy comes from controls, not clutter. */
.supplier-card{background:linear-gradient(145deg,#07182f,#061226)!important;border-color:rgba(24,116,196,.62)!important;box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05)!important;}
.message-box{background:linear-gradient(145deg,#061327,#071b32)!important;border-color:rgba(24,100,171,.76)!important;}

@media(max-width:720px){
  .voice-header-control{width:50px!important;height:50px!important;border-radius:16px!important;}
  .voice-wave-icon{height:25px;gap:2.5px}.voice-wave-icon i{width:2.7px}.voice-control-state{width:23px;height:23px;border-radius:7px}.voice-control-state .svg-icon{width:12px;height:12px}
  .balance-tile-available,.balance-tile-withdrawn,.balance-tile-action{box-shadow:0 14px 30px rgba(0,0,0,.28),0 0 22px rgba(0,210,255,.13),inset 0 1px rgba(255,255,255,.34)!important;}
  .btn-send.ready{min-height:52px!important;font-size:13px!important;}
}


/* =========================================================
   VOICEPESA V24 — MOBILE LOCK + BOLD PREMIUM COLORS + INSTALL
   ========================================================= */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}
body {
  min-width: 0 !important;
  overscroll-behavior-x: none;
}
.app-container {
  width: 100% !important;
  max-width: 980px !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.top-header,
.brand,
.header-icons,
.balance-card,
.suppliers-header,
.supplier-card,
.payment-guide-card,
.btn-active-account,
.floating-actions,
.action-row,
.supplier-top {
  min-width: 0 !important;
  max-width: 100% !important;
}
.brand { flex: 1 1 auto !important; }
.brand > div:last-child { min-width: 0 !important; }

/* Header install control: compact card with the real VoicePesa logo. */
.header-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}
.install-app-control {
  height: 58px !important;
  min-width: 126px !important;
  padding: 5px 10px 5px 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0,245,154,.82) !important;
  background: linear-gradient(145deg,#071b3d 0%,#073f58 52%,#07172f 100%) !important;
  color: #fff !important;
  cursor: pointer !important;
  box-shadow: 0 0 0 1px rgba(0,150,255,.18), 0 0 22px rgba(0,226,190,.26), inset 0 1px rgba(255,255,255,.26) !important;
}
.install-app-logo {
  width: 47px !important;
  height: 47px !important;
  flex: 0 0 47px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  padding: 5px !important;
  background: linear-gradient(145deg,#0b1b4b,#062c4d) !important;
  border: 1px solid rgba(0,232,255,.70) !important;
  box-shadow: 0 0 16px rgba(0,232,255,.24), inset 0 0 12px rgba(138,43,255,.16) !important;
}
.install-app-logo img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.install-app-copy {
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  letter-spacing: .1px !important;
}
.install-app-control:active { transform: scale(.97); }

/* Make the three main cards unmistakably saturated and luminous. */
.balance-card.balance-trio {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.balance-tile {
  min-width: 0 !important;
  border-color: rgba(255,255,255,.38) !important;
  filter: saturate(1.22) contrast(1.05) !important;
}
.balance-tile-available {
  background: linear-gradient(135deg,#007b42 0%,#00c96b 38%,#00f59a 67%,#00d9df 100%) !important;
  box-shadow: 0 18px 42px rgba(0,235,137,.42), 0 0 42px rgba(0,255,190,.28), inset 0 2px rgba(255,255,255,.42), inset 0 -24px 42px rgba(0,64,45,.14) !important;
}
.balance-tile-withdrawn {
  background: linear-gradient(135deg,#3000a8 0%,#5b00e8 34%,#8f16ff 64%,#c000ff 100%) !important;
  box-shadow: 0 18px 42px rgba(119,0,255,.48), 0 0 44px rgba(169,24,255,.30), inset 0 2px rgba(255,255,255,.42), inset 0 -24px 42px rgba(37,0,80,.14) !important;
}
.balance-tile-action {
  background: linear-gradient(135deg,#0046b8 0%,#006fff 35%,#00a9ff 64%,#00d9ff 100%) !important;
  box-shadow: 0 18px 42px rgba(0,126,255,.48), 0 0 44px rgba(0,205,255,.30), inset 0 2px rgba(255,255,255,.42), inset 0 -24px 42px rgba(0,39,95,.14) !important;
}
.balance-tile-icon {
  background: rgba(255,255,255,.24) !important;
  border-color: rgba(255,255,255,.40) !important;
  box-shadow: inset 0 0 20px rgba(255,255,255,.17), 0 0 18px rgba(255,255,255,.10) !important;
}

.btn-active-account {
  background: linear-gradient(110deg,#00c96a 0%,#00f59a 30%,#00d8e9 62%,#007dff 100%) !important;
  border-color: rgba(142,255,241,.96) !important;
  box-shadow: 0 18px 44px rgba(0,225,174,.40), 0 0 42px rgba(0,215,255,.30), inset 0 2px rgba(255,255,255,.40) !important;
}
.btn-active-account b {
  background: linear-gradient(135deg,#6500ff,#a900ff) !important;
  box-shadow: 0 0 28px rgba(161,0,255,.65), inset 0 1px rgba(255,255,255,.38) !important;
}

.payment-guide-card {
  border-color: rgba(0,203,255,.62) !important;
  box-shadow: 0 12px 28px rgba(0,125,255,.16), inset 0 1px rgba(255,255,255,.06) !important;
}
.payout-badge {
  color: #00ffe0 !important;
  background: linear-gradient(135deg,rgba(0,255,170,.22),rgba(0,135,255,.18)) !important;
  border-color: rgba(0,255,208,.65) !important;
  box-shadow: 0 0 20px rgba(0,242,203,.22) !important;
}
.btn-record {
  background: linear-gradient(100deg,#ff174b 0%,#ff005c 42%,#ff00a8 72%,#9b00ff 100%) !important;
  box-shadow: 0 14px 34px rgba(255,0,91,.42), 0 0 28px rgba(255,0,166,.24) !important;
}
.btn-play {
  background: linear-gradient(145deg,#003c9f,#0069e8,#00a9ff) !important;
  border-color: rgba(0,220,255,.78) !important;
  box-shadow: 0 0 26px rgba(0,159,255,.30), inset 0 1px rgba(255,255,255,.24) !important;
}
.btn-send.ready {
  background: linear-gradient(110deg,#00db73 0%,#00f09a 34%,#00d8dc 68%,#007eff 100%) !important;
  box-shadow: 0 15px 34px rgba(0,231,171,.42), 0 0 30px rgba(0,229,230,.28), inset 0 1px rgba(255,255,255,.40) !important;
}

/* Floating actions stay outside cards and use the same saturated palette. */
.floating-actions {
  z-index: 9998 !important;
  pointer-events: none !important;
}
.floating-action { pointer-events: auto !important; }
.floating-sms {
  background: linear-gradient(135deg,#4b00ff 0%,#7500ff 42%,#006dff 100%) !important;
  border-color: rgba(190,154,255,.95) !important;
  box-shadow: 0 18px 42px rgba(74,0,255,.54), 0 0 34px rgba(93,72,255,.36), inset 0 1px rgba(255,255,255,.38) !important;
}
.floating-channel {
  background: linear-gradient(135deg,#00c95e 0%,#00f39a 46%,#00cde8 100%) !important;
  border-color: rgba(145,255,225,.96) !important;
  box-shadow: 0 18px 42px rgba(0,225,126,.50), 0 0 34px rgba(0,235,217,.34), inset 0 1px rgba(255,255,255,.38) !important;
}
.floating-action-icon {
  background: rgba(255,255,255,.24) !important;
  border-color: rgba(255,255,255,.42) !important;
  box-shadow: inset 0 0 18px rgba(255,255,255,.15), 0 0 16px rgba(255,255,255,.10) !important;
}

/* Prevent the mobile dashboard from becoming wider than the viewport. */
@media (max-width: 720px) {
  .app-container { padding: 12px 12px 105px !important; }
  .top-header { min-height: 64px !important; padding-bottom: 11px !important; gap: 7px !important; }
  .logo-icon { width: 52px !important; height: 52px !important; border-radius: 15px !important; }
  .brand { gap: 8px !important; }
  .brand-title { font-size: clamp(22px,7vw,30px) !important; }
  .brand-sub { font-size: 10px !important; white-space: nowrap !important; }
  .brand-sub i { width: 10px !important; height: 10px !important; }
  .header-icons { gap: 6px !important; }
  .voice-header-control { width: 48px !important; height: 48px !important; border-radius: 15px !important; padding: 0 7px !important; }
  .install-app-control { height: 48px !important; min-width: 92px !important; padding: 4px 7px 4px 4px !important; border-radius: 15px !important; gap: 5px !important; }
  .install-app-logo { width: 39px !important; height: 39px !important; flex-basis: 39px !important; border-radius: 11px !important; padding: 4px !important; }
  .install-app-copy { font-size: 9px !important; }
  .balance-card.balance-trio { gap: 8px !important; padding: 0 !important; }
  .balance-tile { min-height: 150px !important; padding: 13px 7px 12px !important; border-radius: 18px !important; }
  .balance-tile-icon { width: 43px !important; height: 43px !important; border-radius: 13px !important; margin-bottom: 9px !important; }
  .balance-tile-icon .svg-icon { width: 23px !important; height: 23px !important; }
  .balance-tile-label { font-size: clamp(8px,2.7vw,12px) !important; }
  .balance-tile-amount { font-size: clamp(16px,4.8vw,23px) !important; margin-top: 9px !important; }
  .balance-tile-action-text { font-size: clamp(13px,4vw,18px) !important; margin-top: 9px !important; }
  .btn-active-account { min-height: 82px !important; padding: 12px 14px !important; border-radius: 19px !important; gap: 10px !important; }
  .btn-active-account .btn-icon { width: 31px !important; height: 31px !important; flex-basis: 31px !important; }
  .btn-active-account span:not(.cta-arrow) { font-size: clamp(18px,5.7vw,26px) !important; }
  .btn-active-account b { padding: 8px 10px !important; font-size: 10px !important; }
  .payment-guide-card { min-height: 70px !important; padding: 11px 13px !important; gap: 10px !important; }
  .payment-guide-copy h3 { font-size: 13px !important; }
  .payment-guide-copy p { font-size: 10px !important; }
  .suppliers-header { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(112px,38%) !important; gap: 8px !important; align-items: center !important; }
  .suppliers-header h3 { font-size: 18px !important; line-height: 1.05 !important; }
  .suppliers-header small { font-size: 9px !important; }
  .supplier-date-card { min-width: 0 !important; width: 100% !important; padding: 7px 8px !important; gap: 7px !important; border-radius: 14px !important; }
  .supplier-date-card::before { width: 32px !important; height: 32px !important; border-radius: 10px !important; flex: 0 0 32px !important; }
  .supplier-date-main b { font-size: 10px !important; }
  .supplier-date-main span { font-size: 7px !important; white-space: nowrap !important; }
  .supplier-time { font-size: 9px !important; }
  .supplier-card { width: 100% !important; overflow: hidden !important; }
  .supplier-top { gap: 7px !important; }
  .supplier-info { min-width: 0 !important; }
  .supplier-name { font-size: 13px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .supplier-type { font-size: 9px !important; }
  .payout-badge { flex: 0 0 auto !important; font-size: 11px !important; padding: 6px 8px !important; }
  .message-box { font-size: 11px !important; }
  .rec-label { font-size: 9px !important; }
  .action-row { width: 100% !important; }
  .btn-record { min-width: 0 !important; font-size: 11px !important; }
  .btn-play { flex: 0 0 42px !important; width: 42px !important; }
  .floating-actions { left: 10px !important; right: 10px !important; bottom: 76px !important; width: auto !important; gap: 7px !important; }
  .floating-action { min-width: 0 !important; width: calc(50% - 3.5px) !important; min-height: 50px !important; padding: 6px 7px !important; border-radius: 18px !important; }
  .floating-action-label { font-size: clamp(8px,2.5vw,10px) !important; white-space: nowrap !important; }
}

@media (max-width: 390px) {
  .app-container { padding-left: 9px !important; padding-right: 9px !important; }
  .logo-icon { width: 48px !important; height: 48px !important; }
  .brand-title { font-size: 22px !important; }
  .brand-sub { font-size: 8.5px !important; }
  .voice-header-control { width: 45px !important; height: 45px !important; }
  .install-app-control { min-width: 82px !important; width: 82px !important; height: 45px !important; }
  .install-app-logo { width: 35px !important; height: 35px !important; flex-basis: 35px !important; }
  .install-app-copy { font-size: 8px !important; }
  .balance-card.balance-trio { gap: 6px !important; }
  .balance-tile { min-height: 135px !important; padding-left: 4px !important; padding-right: 4px !important; }
  .balance-tile-label { font-size: 7.5px !important; }
  .balance-tile-amount { font-size: 15px !important; }
  .balance-tile-action-text { font-size: 12px !important; }
  .suppliers-header { grid-template-columns: minmax(0,1fr) 118px !important; }
  .suppliers-header h3 { font-size: 16px !important; }
  .floating-action-label { font-size: 7.7px !important; }
}



/* VoicePesa V25 — final reference layout */
:root{
  --vp-bg:#061226;
  --vp-panel:#081a31;
  --vp-line:rgba(30,125,205,.55);
  --vp-cyan:#00e7ff;
  --vp-green:#00e58a;
  --vp-purple:#742cff;
  --vp-blue:#087eff;
}

/* Mobile stability */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
}
body{
  background:
    radial-gradient(520px 300px at 0% 18%,rgba(0,198,255,.08),transparent 68%),
    radial-gradient(500px 330px at 100% 55%,rgba(91,35,255,.08),transparent 70%),
    linear-gradient(180deg,#040c19 0%,#061328 52%,#04101f 100%)!important;
}
.app-container{
  width:100%!important;
  max-width:760px!important;
  margin:0 auto!important;
  padding:14px 14px 112px!important;
}

/* Header: logo starts the row, no hamburger/menu */
.top-header{
  min-height:72px!important;
  margin-bottom:12px!important;
  padding:0 0 11px!important;
  border-bottom:1px solid rgba(23,103,171,.34)!important;
}
.menu-btn{display:none!important}
.logo-icon{
  width:58px!important;height:58px!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,#07143c,#092a4b)!important;
  border:1px solid rgba(0,232,255,.72)!important;
  box-shadow:0 0 18px rgba(0,198,255,.20),0 0 10px rgba(116,44,255,.14)!important;
}
.logo-icon img{width:100%!important;height:100%!important;object-fit:contain!important}
.brand{gap:10px!important}
.brand-title{font-size:29px!important;letter-spacing:-.8px!important}
.brand-title span{color:#f6f8ff!important}
.brand-title em{color:#00dff2!important}
.brand-sub{font-size:12px!important;color:#91add0!important}
.brand-sub i{width:10px!important;height:10px!important;background:#00d7a1!important;box-shadow:0 0 8px rgba(0,215,161,.45)!important}

/* Header controls */
.header-icons{gap:7px!important}
.voice-header-control{
  width:50px!important;height:50px!important;border-radius:16px!important;
  background:linear-gradient(145deg,#071b3b,#073c59)!important;
  border:1px solid rgba(0,213,255,.62)!important;
  box-shadow:0 0 17px rgba(0,214,255,.20)!important;
}
.install-app-control{
  height:50px!important;min-width:116px!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#081c40,#0b3151)!important;
  border:1px solid rgba(0,241,164,.70)!important;
  box-shadow:0 0 19px rgba(0,219,185,.18)!important;
}
.install-app-logo{width:41px!important;height:41px!important;border-radius:12px!important}
.install-app-copy{font-size:11px!important}

/* Three premium balance tiles */
.balance-card.balance-trio{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:11px!important;
  padding:0!important;
  margin:7px 0 18px!important;
  background:none!important;
  border:0!important;
}
.balance-tile{
  min-width:0!important;
  min-height:154px!important;
  padding:14px 8px 12px!important;
  border-radius:19px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  filter:none!important;
}
.balance-tile::after{
  background:linear-gradient(160deg,transparent 48%,rgba(255,255,255,.12) 49%,transparent 70%)!important;
}
.balance-tile-available{
  background:linear-gradient(135deg,#087f4b 0%,#00c96c 42%,#00e69c 68%,#00b8d7 100%)!important;
  box-shadow:0 15px 32px rgba(0,222,145,.20),0 0 20px rgba(0,240,195,.10),inset 0 1px rgba(255,255,255,.30)!important;
}
.balance-tile-withdrawn{
  background:linear-gradient(135deg,#3c13b7 0%,#6421e8 45%,#8d2cff 70%,#5a25dd 100%)!important;
  box-shadow:0 15px 32px rgba(119,43,255,.22),0 0 20px rgba(144,45,255,.10),inset 0 1px rgba(255,255,255,.30)!important;
}
.balance-tile-action{
  background:linear-gradient(135deg,#075dc8 0%,#087fe9 45%,#00aef2 72%,#0874e8 100%)!important;
  box-shadow:0 15px 32px rgba(0,137,255,.22),0 0 20px rgba(0,190,255,.11),inset 0 1px rgba(255,255,255,.30)!important;
}
.balance-tile-icon{
  width:44px!important;height:44px!important;border-radius:13px!important;
  margin-bottom:9px!important;
  background:rgba(255,255,255,.17)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:inset 0 0 14px rgba(255,255,255,.08)!important;
}
.balance-tile-icon .svg-icon{width:23px!important;height:23px!important}
.balance-tile-label{font-size:12px!important;line-height:1.12!important}
.balance-tile-amount{font-size:22px!important;margin-top:9px!important}
.balance-tile-action-text{font-size:17px!important;margin-top:9px!important}

/* Main CTA */
.btn-active-account{
  min-height:84px!important;
  margin:0 0 16px!important;
  padding:12px 14px!important;
  border-radius:20px!important;
  gap:11px!important;
  background:linear-gradient(115deg,#00c976 0%,#00e69b 32%,#00cfe5 62%,#0879ee 100%)!important;
  border:1px solid rgba(136,255,239,.72)!important;
  box-shadow:0 14px 32px rgba(0,216,173,.20),0 0 22px rgba(0,207,255,.12),inset 0 1px rgba(255,255,255,.28)!important;
}
.btn-active-account .btn-icon{width:34px!important;height:34px!important;flex-basis:34px!important}
.btn-active-account span:not(.cta-arrow){font-size:22px!important}
.btn-active-account b{
  padding:9px 12px!important;font-size:11px!important;border-radius:18px!important;
  background:linear-gradient(135deg,#6723ef,#8d27ff)!important;
  box-shadow:0 0 17px rgba(132,39,255,.35)!important;
}

/* Payment guide */
.payment-guide-card{
  min-height:70px!important;
  margin:0 0 18px!important;
  padding:11px 13px!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,#07182d,#061225)!important;
  border:1px solid rgba(0,164,245,.52)!important;
  box-shadow:0 9px 22px rgba(0,70,150,.10)!important;
}
.payment-guide-icon{width:42px!important;height:42px!important;border-radius:12px!important}
.payment-guide-copy h3{font-size:13px!important}
.payment-guide-copy p{font-size:10px!important}
.payment-guide-arrow .svg-icon{width:23px!important;height:23px!important}

/* Suppliers */
.suppliers-header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(150px,38%)!important;
  gap:9px!important;
  align-items:center!important;
  margin:0 0 12px!important;
}
.suppliers-header h3{font-size:20px!important;color:#f5f8ff!important}
.suppliers-header small{font-size:10px!important;color:#8ea9cd!important;margin-top:5px!important}
.section-title-icon{
  width:34px!important;height:34px!important;border-radius:10px!important;
  background:linear-gradient(145deg,#101f49,#091d3a)!important;
  border:1px solid rgba(75,106,220,.62)!important;
  color:#00e7ff!important;
}
.supplier-date-card{
  min-width:0!important;width:100%!important;
  padding:8px 9px!important;border-radius:15px!important;
  background:linear-gradient(145deg,#0a2344,#07182e)!important;
  border:1px solid rgba(38,119,202,.55)!important;
}
.supplier-date-card::before{width:34px!important;height:34px!important;border-radius:10px!important}
.supplier-date-main b{font-size:11px!important}
.supplier-date-main span{font-size:8px!important}
.supplier-time{font-size:11px!important;color:#00e5d2!important}

/* Supplier cards remain dark and readable */
.supplier-card{
  width:100%!important;
  padding:13px!important;
  border-radius:19px!important;
  background:linear-gradient(145deg,#07182e,#061225)!important;
  border:1px solid rgba(28,105,178,.56)!important;
  box-shadow:0 13px 28px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.035)!important;
}
.avatar-img{width:48px!important;height:48px!important}
.supplier-name{font-size:14px!important}
.supplier-type{font-size:10px!important;color:#8ea8c9!important}
.payout-badge{
  font-size:12px!important;padding:6px 9px!important;
  color:#00f0dc!important;background:rgba(0,215,185,.10)!important;
  border:1px solid rgba(0,238,211,.52)!important;
}
.message-box{
  font-size:12px!important;line-height:1.42!important;
  padding:12px 13px!important;border-radius:15px!important;
  background:linear-gradient(145deg,#061327,#071a31)!important;
  border:1px solid rgba(30,97,164,.65)!important;
}
.rec-label{font-size:9.5px!important}
.btn-record{
  min-height:50px!important;border-radius:26px!important;
  background:linear-gradient(100deg,#ff3155 0%,#f90065 52%,#c600ff 100%)!important;
  box-shadow:0 10px 24px rgba(255,0,96,.22)!important;
}
.btn-play{
  flex:0 0 44px!important;width:44px!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#063f83,#076cc5)!important;
  border-color:rgba(0,205,255,.62)!important;
}
.btn-send{display:none!important}

/* Floating contact buttons: detached from every card */
.floating-actions{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:82px!important;
  transform:translateX(-50%)!important;
  width:min(calc(100vw - 22px),720px)!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:9px!important;
  z-index:9998!important;
  pointer-events:none!important;
}
.floating-action{
  pointer-events:auto!important;
  width:calc(50% - 4.5px)!important;
  min-height:51px!important;
  padding:6px 8px!important;
  border-radius:19px!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:0 13px 28px rgba(0,0,0,.34),0 0 20px rgba(0,190,255,.10)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:hidden!important;
}
.floating-action::before{
  background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 45%)!important;
}
.floating-sms{
  background:linear-gradient(135deg,#5721ef 0%,#7132f5 50%,#1479ef 100%)!important;
}
.floating-channel{
  background:linear-gradient(135deg,#00bd69 0%,#00db93 52%,#00b8d6 100%)!important;
}
.floating-action-icon{
  width:36px!important;height:36px!important;flex-basis:36px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.25)!important;
}
.floating-action-icon .svg-icon{width:21px!important;height:21px!important}
.floating-action-label{font-size:10px!important;text-shadow:none!important}
.floating-sms .floating-action-label{margin-left:6px!important}
.floating-channel .floating-action-label{margin-right:6px!important}

/* Bottom navigation */
.bottom-nav{
  height:70px!important;
  background:rgba(4,13,29,.98)!important;
  border-top:1px solid rgba(32,102,170,.58)!important;
  box-shadow:0 -10px 26px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(12px)!important;
}
.nav-item{font-size:11px!important;min-width:65px!important;color:#8ba7ca!important}
.nav-icon .svg-icon{width:23px!important;height:23px!important}
.nav-item.active{color:#00e7ff!important}
.nav-item.active::after{width:64px!important;height:3px!important;background:#00e7ff!important;box-shadow:0 0 10px rgba(0,231,255,.35)!important}

/* Small screens */
@media(max-width:390px){
  .app-container{padding-left:9px!important;padding-right:9px!important}
  .brand-title{font-size:22px!important}
  .brand-sub{font-size:8.5px!important}
  .logo-icon{width:48px!important;height:48px!important}
  .voice-header-control{width:45px!important;height:45px!important}
  .install-app-control{width:82px!important;min-width:82px!important;height:45px!important}
  .install-app-logo{width:35px!important;height:35px!important}
  .install-app-copy{font-size:8px!important}
  .balance-card.balance-trio{gap:6px!important}
  .balance-tile{min-height:145px!important}
  .balance-tile-label{font-size:10px!important}
  .balance-tile-amount{font-size:18px!important}
  .balance-tile-action-text{font-size:15px!important}
  .btn-active-account span:not(.cta-arrow){font-size:18px!important}
  .btn-active-account b{font-size:9px!important;padding:8px 9px!important}
  .suppliers-header{grid-template-columns:minmax(0,1fr) minmax(125px,39%)!important}
  .supplier-date-card::before{display:none!important}
  .supplier-time{font-size:9px!important}
  .floating-actions{left:8px!important;right:8px!important;width:auto!important;bottom:76px!important}
  .floating-action{min-height:48px!important;padding:5px 6px!important;border-radius:17px!important}
  .floating-action-icon{width:33px!important;height:33px!important;flex-basis:33px!important}
  .floating-action-label{font-size:8.5px!important}
}

/* FINAL MOBILE FIXES — compact date/time card and no inner placeholder box */
.supplier-date-card{
  min-width:0 !important;
  width:168px !important;
  max-width:168px !important;
  padding:9px 11px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:1px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.supplier-date-card::before{display:none !important;content:none !important;}
.supplier-date-main{
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:1px !important;
  line-height:1.15 !important;
  overflow:hidden !important;
}
.supplier-date-main b{
  font-size:12px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}
.supplier-date-main span{
  font-size:9px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}
.supplier-time{
  width:100% !important;
  margin:2px 0 0 !important;
  font-size:13px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  text-align:right !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}
@media (max-width:390px){
  .supplier-date-card{width:154px !important;max-width:154px !important;padding:8px 9px !important;}
  .supplier-date-main b{font-size:11px !important;}
  .supplier-date-main span{font-size:8px !important;}
  .supplier-time{font-size:11px !important;}
}

/* FINAL DATE/TIME CARD BALANCE FIX */
.supplier-date-card{
  width:100% !important;
  max-width:132px !important;
  min-width:0 !important;
  padding:8px 9px !important;
  box-sizing:border-box !important;
  align-self:center !important;
  justify-self:end !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  overflow:hidden !important;
}
.supplier-date-main{
  width:100% !important;
  align-items:center !important;
  text-align:center !important;
  overflow:hidden !important;
}
.supplier-date-main b{
  font-size:11px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}
.supplier-date-main span{
  font-size:8px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}
.supplier-time{
  width:100% !important;
  margin:2px 0 0 !important;
  text-align:center !important;
  font-size:13px !important;
  line-height:1.05 !important;
  letter-spacing:.1px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
@media (max-width:390px){
  .suppliers-header{grid-template-columns:minmax(0,1fr) 128px !important;}
  .supplier-date-card{max-width:128px !important;padding:7px 7px !important;}
  .supplier-date-main b{font-size:10px !important;}
  .supplier-date-main span{font-size:7.5px !important;}
  .supplier-time{font-size:12px !important;}
}