* { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #070b14;
      --card: #0d1524;
      --border: rgba(139,92,246,0.18);
      --text: #f1f5f9;
      --muted: #94a3b8;
      --green: #22c55e;
      --blue: #3b82f6;
      --purple: #8b5cf6;
      --online: #22c55e;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: radial-gradient(ellipse at top, #12182a 0%, #070b14 55%);
      color: var(--text);
      min-height: 100vh;
      line-height: 1.45;
      padding-bottom: 100px;
    }
    /* Top bar */
    .topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px; position: sticky; top: 0; z-index: 30;
      background: rgba(7,11,20,0.92); backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .brand { display: flex; align-items: center; gap: 10px; }
    .logo {
      width: 48px; height: 48px; border-radius: 14px; overflow: hidden;
      box-shadow: 0 0 0 2px rgba(139,92,246,0.4);
    }
    .logo img { width: 100%; height: 100%; object-fit: cover; }
    .brand-name { font-size: 21px; font-weight: 800; letter-spacing: -0.4px; }
    .brand-name span { color: #a78bfa; }
    .top-actions { display: flex; gap: 8px; }
    .icon-btn {
      width: 38px; height: 38px; border-radius: 12px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
      color: #e2e8f0; font-size: 16px; display: flex; align-items: center; justify-content: center;
      cursor: pointer;
    }
    /* Online pill */
    .online-pill {
      margin: 12px 14px 0; display: inline-flex; align-items: center; gap: 8px;
      background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25);
      border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: #86efac;
    }
    .online-pill .dot {
      width: 8px; height: 8px; background: #22c55e; border-radius: 50%;
      box-shadow: 0 0 8px #22c55e; animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
      0%,100% { opacity: 1; } 50% { opacity: 0.45; }
    }
    /* Hero */
    .hero { padding: 16px 16px 8px; }
    .hero h1 {
      font-size: 22px; font-weight: 800; line-height: 1.25;
      margin-bottom: 8px;
    }
    .hero h1 .globe { margin-right: 4px; }
    .flags { font-size: 18px; letter-spacing: 4px; margin-bottom: 10px; }
    .hero p { font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
    .hero .highlight-line {
      color: #c4b5fd; font-size: 13.5px; margin-top: 8px;
    }
    /* Upload + account card */
    .setup-card {
      margin: 14px 14px;
      background: linear-gradient(145deg, rgba(99,102,241,0.12), rgba(14,165,233,0.08));
      border: 1px solid rgba(139,92,246,0.3);
      border-radius: 18px; padding: 14px;
    }
    .setup-row {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      margin-bottom: 12px;
    }
    .upload-btn {
      background: linear-gradient(90deg, #6366f1, #8b5cf6);
      color: white; border: none; border-radius: 999px;
      padding: 10px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
    }
    .user-mini {
      display: flex; align-items: center; gap: 8px;
      background: rgba(0,0,0,0.25); border-radius: 12px; padding: 6px 10px;
      font-size: 12px; color: var(--muted);
    }
    .user-mini .u-dot { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; }
    .fungua-btn {
      display: block; width: 100%; text-align: center; text-decoration: none;
      background: linear-gradient(90deg, #0f172a, #1e1b4b);
      border: 1.5px solid rgba(167,139,250,0.5);
      color: #86efac; font-weight: 900; font-size: 17px;
      padding: 16px; border-radius: 14px;
      letter-spacing: 1px;
      box-shadow: 0 0 24px rgba(34,197,94,0.2);
      text-transform: uppercase;
    }
    /* Stats */
    .stats-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      margin: 0 14px 14px;
    }
    .stat {
      border-radius: 16px; padding: 14px;
      position: relative; overflow: hidden;
    }
    .stat.faida {
      background: linear-gradient(145deg, #0a2e1c, #0d1524);
      border: 1px solid rgba(34,197,94,0.3);
    }
    .stat.salio {
      background: linear-gradient(145deg, #0c1e3a, #0d1524);
      border: 1px solid rgba(59,130,246,0.3);
    }
    .stat-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
    .stat-val { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
    .stat.faida .stat-val { color: #4ade80; }
    .stat.salio .stat-val { color: #60a5fa; }
    .toa-btn {
      margin-top: 12px; width: 100%; border: none; border-radius: 999px;
      padding: 13px 16px; font-weight: 800; font-size: 15px; cursor: pointer;
      background: linear-gradient(90deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%);
      color: white;
      box-shadow: 0 6px 20px rgba(239,68,68,0.4);
      letter-spacing: 0.3px;
    }
    .toa-btn:active { transform: scale(0.98); opacity: 0.95; }
    /* Section title */
    .choose-bar {
      margin: 8px 14px 14px; text-align: center;
      background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.25);
      border-radius: 999px; padding: 10px 14px;
      font-size: 13.5px; font-weight: 600; color: #c4b5fd;
    }
    /* Grid profiles */
    .grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
      padding: 0 12px 20px;
    }
    .person-card {
      background: #0d1524; border: 1px solid rgba(255,255,255,0.06);
      border-radius: 18px; overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    }
    .person-photo { position: relative; aspect-ratio: 1; overflow: hidden; }
    .person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .badge-online, .badge-offline {
      position: absolute; top: 10px; right: 10px;
      font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
      backdrop-filter: blur(6px);
    }
    .badge-online { background: rgba(34,197,94,0.9); color: white; }
    .badge-offline { background: rgba(239,68,68,0.9); color: white; }
    .person-body { padding: 10px 10px 12px; }
    .person-top { display: flex; justify-content: space-between; align-items: center; }
    .person-name { font-size: 14.5px; font-weight: 800; }
    .verified {
      display: inline-flex; align-items: center; justify-content: center;
      width: 14px; height: 14px; border-radius: 50%;
      background: #3b82f6; color: white; font-size: 9px; font-weight: 900;
    }
    .person-flag { font-size: 14px; }
    .person-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
    .person-tags { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
    .tag {
      font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
      background: rgba(139,92,246,0.15); color: #c4b5fd;
      border: 1px solid rgba(139,92,246,0.25);
    }
    .person-price {
      margin-top: 8px; background: rgba(34,197,94,0.12);
      border: 1px solid rgba(34,197,94,0.25); border-radius: 10px;
      padding: 6px 8px; font-size: 12px; font-weight: 700;
    }
    .person-price .usd { color: #4ade80; }
    .person-price .tzs { color: #86efac; }
    .person-price .mins { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; margin-top: 2px; }
    .btn-start {
      width: 100%; margin-top: 8px; border: none; border-radius: 12px;
      padding: 11px; font-size: 13.5px; font-weight: 800; cursor: pointer;
      background: linear-gradient(90deg, #4f46e5, #a855f7); color: white;
      box-shadow: 0 4px 14px rgba(139,92,246,0.35);
    }
    .btn-start:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
    .btn-view {
      width: 100%; margin-top: 6px; border: 1px solid rgba(255,255,255,0.1);
      background: transparent; color: #cbd5e1; border-radius: 12px;
      padding: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    }
    /* Notif ticker */
    .notif-ticker {
      margin: 10px 14px; display: flex; align-items: center; gap: 10px;
      background: linear-gradient(90deg, #0a1628, #0d1524);
      border: 1px solid rgba(34,197,94,0.25); border-radius: 12px;
      padding: 10px 12px; font-size: 12.5px;
    }
    .notif-icon {
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(34,197,94,0.2); display: flex; align-items: center; justify-content: center;
    }
    .notif-text strong { color: #4ade80; }
    .notif-text .region { color: #94a3b8; }
    @keyframes notifFade { from { opacity: 0; } to { opacity: 1; } }
    /* Float buttons */
    .float-install {
      position: fixed; bottom: 72px; left: 14px; z-index: 40;
      display: flex; align-items: center; gap: 9px;
      background: linear-gradient(135deg, #0f172a, #1e1b4b);
      border: 1.5px solid rgba(251,191,36,0.7);
      border-radius: 999px; padding: 9px 16px 9px 9px;
      color: white; font-weight: 800; font-size: 12.5px; cursor: pointer;
      box-shadow: 0 8px 28px rgba(251,191,36,0.35), 0 0 0 1px rgba(255,255,255,0.05) inset;
      backdrop-filter: blur(10px);
    }
    .float-install img {
      width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
      box-shadow: 0 0 0 2px rgba(251,191,36,0.4);
    }


    .support-float {
      position: fixed; bottom: 72px; right: 14px; z-index: 40;
      display: flex; align-items: center; gap: 10px;
      background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
      border: 2.5px solid rgba(255,255,255,0.45);
      border-radius: 999px; padding: 8px 18px 8px 8px;
      color: white; font-weight: 900; font-size: 12px; cursor: pointer;
      box-shadow: 0 12px 40px rgba(37,211,102,0.55), 0 0 28px rgba(18,140,126,0.35);
      line-height: 1.15;
      animation: supportShake 2.8s ease-in-out infinite;
      letter-spacing: 0.3px;
    }
    @keyframes supportShake {
      0%, 12%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
      2% { transform: translateX(-4px) rotate(-3deg); }
      4% { transform: translateX(4px) rotate(3deg); }
      6% { transform: translateX(-3px) rotate(-2deg); }
      8% { transform: translateX(3px) rotate(2deg); }
      10% { transform: translateX(0) rotate(0deg); }
      50% { transform: scale(1.06); box-shadow: 0 16px 48px rgba(37,211,102,0.7), 0 0 36px rgba(37,211,102,0.45); }
    }
    .support-icon-wrap {
      width: 44px; height: 44px; border-radius: 50%;
      background: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; position: relative;
      box-shadow: 0 4px 14px rgba(0,0,0,0.2);
      color: #25D366;
    }
    .support-live-dot {
      position: absolute; top: -2px; right: -2px;
      width: 14px; height: 14px; background: #ef4444;
      border-radius: 50%; border: 2.5px solid white;
      animation: pulse 1.1s infinite;
      box-shadow: 0 0 10px #ef4444;
    }
    .support-popup {
      position: fixed; bottom: 138px; right: 14px; z-index: 45;
      background: linear-gradient(165deg, #0b1f17 0%, #0a1628 100%);
      border: 2px solid rgba(37,211,102,0.5);
      border-radius: 22px; padding: 14px;
      width: 260px;
      display: none; flex-direction: column; gap: 8px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 40px rgba(37,211,102,0.2);
      animation: popIn 0.25s cubic-bezier(0.22,1,0.36,1);
      backdrop-filter: blur(14px);
    }
    .support-popup.show { display: flex; }
    .support-popup::before {
      content: '💬 Huduma · WhatsApp';
      display: block; text-align: center;
      font-size: 12px; font-weight: 800; color: #4ade80;
      letter-spacing: 0.4px; margin-bottom: 6px;
    }
    .support-option {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 14px; border-radius: 16px; text-decoration: none;
      color: white; font-weight: 800; font-size: 14px;
      background: rgba(37,211,102,0.1);
      border: 1px solid rgba(37,211,102,0.25);
      transition: background 0.15s, transform 0.1s;
    }
    .support-option:active {
      background: rgba(37,211,102,0.25); transform: scale(0.98);
    }
    .opt-icon {
      width: 40px; height: 40px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #25D366, #128C7E);
      font-size: 18px;
      box-shadow: 0 4px 12px rgba(37,211,102,0.35);
    }

    .toast {
      position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
      background: #1e293b; color: white; padding: 12px 18px; border-radius: 12px;
      font-size: 13px; z-index: 200; display: none;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4); max-width: 90%;
    }
    .toast.show { display: block; animation: notifFade 0.25s ease; }

    /* Duration modal modern */
    .dur-modal { text-align: center; padding: 22px 16px 16px; max-width: 360px; }
    .dur-icon {
      width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px;
      background: linear-gradient(135deg, #0d3d2e, #14532d);
      display: flex; align-items: center; justify-content: center; font-size: 22px;
      border: 1px solid rgba(34,197,94,0.35);
      box-shadow: 0 0 20px rgba(34,197,94,0.2);
    }
    .dur-heading { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
    .dur-hint { font-size: 12px; color: var(--muted); margin-bottom: 16px; line-height: 1.4; }
    .dur-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
      margin-bottom: 14px;
    }
    .dur-chip {
      background: #132036; border: 1.5px solid rgba(255,255,255,0.08);
      border-radius: 14px; padding: 12px 6px; cursor: pointer; color: white;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      transition: border-color 0.15s, transform 0.1s;
    }
    .dur-chip:active { transform: scale(0.96); }
    .dur-chip.active, .dur-chip:hover {
      background: linear-gradient(160deg, #0d3d2e, #14532d);
      border-color: #22c55e;
      box-shadow: 0 0 16px rgba(34,197,94,0.25);
    }
    .dur-chip .d-num { font-size: 22px; font-weight: 800; line-height: 1.1; }
    .dur-chip .d-label { font-size: 11px; color: #94a3b8; }
    .dur-chip.active .d-label, .dur-chip:hover .d-label { color: #86efac; }
    .dur-chip .d-pay { font-size: 11px; font-weight: 700; color: #4ade80; margin-top: 4px; }
    .dur-back {
      width: 100%; padding: 12px; border-radius: 12px;
      background: transparent; border: 1.5px solid rgba(255,255,255,0.12);
      color: #cbd5e1; font-weight: 600; font-size: 14px; cursor: pointer;
    }
    /* Chat panel like GlobeTalk */
    .chat-overlay { padding: 12px; align-items: stretch; }
    .chat-panel {
      background: #0a0f18; border-radius: 20px; width: 100%; max-width: 420px;
      margin: auto; display: flex; flex-direction: column;
      max-height: 92vh; border: 1px solid rgba(255,255,255,0.08);
      overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    .chat-header-row {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px; background: #0d1524;
    }
    .chat-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
    .chat-online { font-size: 11px; color: #4ade80; display: flex; align-items: center; gap: 4px; }
    .on-dot { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; }
    .chat-timer-pill {
      background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.35);
      color: #4ade80; font-weight: 800; font-size: 13px;
      padding: 6px 12px; border-radius: 999px; white-space: nowrap;
    }
    .chat-x {
      width: 32px; height: 32px; border-radius: 50%; border: none;
      background: rgba(255,255,255,0.08); color: white; font-size: 18px; cursor: pointer;
    }
    .chat-messages { flex: 1; min-height: 220px; max-height: 45vh; }
    .msg.them {
      background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3);
      color: #e2e8f0; border-radius: 14px 14px 14px 4px;
    }
    .msg.me {
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      border-radius: 14px 14px 4px 14px;
    }
    .msg.me .seen { font-size: 10px; opacity: 0.85; margin-top: 3px; text-align: right; }
    .msg.pay { border-radius: 12px; }
    .typing { padding: 6px 14px; font-size: 12px; color: #4ade80; display: none; }
    .typing.show { display: block; }
    .chat-input-row {
      padding: 10px 12px; gap: 8px; background: #0d1524;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .chat-input-row input {
      flex: 1; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
      background: #070b14; padding: 12px 14px; color: white; font-size: 14px;
    }
    .chat-send-btn {
      border: none; border-radius: 12px; padding: 0 18px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: white; font-weight: 800; font-size: 14px; cursor: pointer;
    }
    .chat-back-link {
      background: none; border: none; color: #64748b; font-size: 13px;
      padding: 8px; cursor: pointer; width: 100%;
    }
    /* Rotating profile images */
    .person-photo img.rotating { transition: opacity 0.5s ease; }

    .blue-ticks { color: #60a5fa; font-weight: 900; letter-spacing: -2px; }
    .msg.me .seen { font-size: 11px; opacity: 0.95; margin-top: 4px; text-align: right; color: rgba(255,255,255,0.9); }
    /* Ensure chat overlay always on top when shown */
    #chatOverlay.show { display: flex !important; z-index: 120; }
    #durationOverlay.show { display: flex !important; z-index: 110; }
    #successOverlay.show { display: flex !important; z-index: 130; }
    #successOverlay:not(.show) { display: none !important; }
    #durationOverlay:not(.show) { display: none !important; }
    #chatOverlay:not(.show) { display: none !important; pointer-events: none !important; }
    #durationOverlay:not(.show) { display: none !important; pointer-events: none !important; }
    #successOverlay:not(.show) { display: none !important; pointer-events: none !important; }
    .overlay:not(.show) { display: none !important; pointer-events: none !important; }

    /* SMS-style payment popups */
    .pay-popup-stack {
      position: fixed; top: 70px; left: 0; right: 0;
      z-index: 50; pointer-events: none;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      padding: 0 14px;
    }
    .pay-sms {
      pointer-events: auto;
      width: 100%; max-width: 360px;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border: 1px solid rgba(34,197,94,0.4);
      border-radius: 16px;
      padding: 12px 14px;
      display: flex; align-items: flex-start; gap: 12px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 20px rgba(34,197,94,0.15);
      animation: smsIn 0.4s cubic-bezier(0.22,1,0.36,1);
      backdrop-filter: blur(12px);
    }
    .pay-sms.out {
      animation: smsOut 0.35s ease forwards;
    }
    @keyframes smsIn {
      from { opacity: 0; transform: translateY(-24px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes smsOut {
      to { opacity: 0; transform: translateY(-16px) scale(0.96); }
    }
    .pay-sms-icon {
      width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
      background: linear-gradient(135deg, #22c55e, #16a34a);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      box-shadow: 0 4px 12px rgba(34,197,94,0.35);
    }
    .pay-sms-body { flex: 1; min-width: 0; }
    .pay-sms-title {
      font-size: 12px; font-weight: 700; color: #86efac;
      margin-bottom: 2px; letter-spacing: 0.2px;
    }
    .pay-sms-msg {
      font-size: 13.5px; color: #f1f5f9; line-height: 1.35;
    }
    .pay-sms-msg strong { color: #4ade80; }
    .pay-sms-meta {
      font-size: 11px; color: #94a3b8; margin-top: 4px;
    }


    .warn-box {
      margin: 4px 0 16px;
      padding: 14px 14px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(239,68,68,0.1));
      border: 1.5px solid rgba(251,191,36,0.45);
      color: #fde68a;
      font-size: 13.5px;
      line-height: 1.55;
      text-align: left;
      box-shadow: 0 0 20px rgba(251,191,36,0.12);
    }
    .warn-box strong {
      color: #fbbf24;
      font-weight: 800;
    }
    .warn-em {
      color: #fcd34d;
      font-weight: 700;
    }
    .warn-loss {
      color: #f87171;
      font-weight: 800;
    }



    /* Float: Channel + Support — size & colors */
    .float-channel {
      position: fixed; bottom: 138px; left: 14px; z-index: 40;
      display: flex; align-items: center; gap: 11px;
      background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
      border: 2px solid rgba(255,255,255,0.35);
      border-radius: 999px; padding: 11px 18px 11px 11px;
      color: white; font-weight: 800; font-size: 13px;
      text-decoration: none; line-height: 1.2;
      box-shadow: 0 10px 32px rgba(99,102,241,0.45);
      min-height: 56px;
    }
    .float-channel .ch-icon {
      width: 46px; height: 46px; border-radius: 50%;
      background: white; color: #6366f1;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      box-shadow: 0 3px 12px rgba(0,0,0,0.15);
      flex-shrink: 0;
    }
    .float-install {
      position: fixed; bottom: 72px; left: 14px; z-index: 40;
      display: flex; align-items: center; gap: 10px;
      background: linear-gradient(135deg, #1e1b4b, #0f172a);
      border: 2px solid #fbbf24;
      border-radius: 999px; padding: 10px 16px 10px 10px;
      color: white; font-weight: 800; font-size: 13px; cursor: pointer;
      box-shadow: 0 8px 28px rgba(251,191,36,0.3);
      min-height: 54px;
    }
    .float-install img {
      width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
      box-shadow: 0 0 0 2px rgba(251,191,36,0.45);
    }
    .support-float {
      position: fixed; bottom: 72px; right: 14px; z-index: 40;
      display: flex; align-items: center; gap: 11px;
      background: linear-gradient(135deg, #f97316 0%, #ef4444 55%, #ec4899 100%);
      border: 2px solid rgba(255,255,255,0.4);
      border-radius: 999px; padding: 11px 18px 11px 11px;
      color: white; font-weight: 900; font-size: 13px; cursor: pointer;
      box-shadow: 0 12px 36px rgba(239,68,68,0.5);
      line-height: 1.2;
      animation: supportShake 3s ease-in-out infinite;
      min-height: 56px;
    }
    @keyframes supportShake {
      0%, 14%, 100% { transform: translateX(0) rotate(0) scale(1); }
      2% { transform: translateX(-3px) rotate(-2deg); }
      4% { transform: translateX(3px) rotate(2deg); }
      6% { transform: translateX(-2px) rotate(-1deg); }
      8% { transform: translateX(2px) rotate(1deg); }
      10% { transform: translateX(0) rotate(0); }
      50% { transform: scale(1.05); box-shadow: 0 16px 44px rgba(249,115,22,0.55); }
    }
    .support-icon-wrap {
      width: 46px; height: 46px; border-radius: 50%;
      background: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; position: relative;
      box-shadow: 0 3px 12px rgba(0,0,0,0.2);
      color: #ef4444;
      flex-shrink: 0;
    }
    .support-live-dot {
      position: absolute; top: -2px; right: -2px;
      width: 13px; height: 13px; background: #22c55e;
      border-radius: 50%; border: 2.5px solid white;
      animation: pulse 1.2s infinite;
      box-shadow: 0 0 8px #22c55e;
    }
    .support-popup {
      position: fixed; bottom: 140px; right: 14px; z-index: 45;
      background: linear-gradient(165deg, #1c1018 0%, #0f172a 100%);
      border: 2px solid rgba(249,115,22,0.45);
      border-radius: 20px; padding: 14px;
      width: 260px;
      display: none; flex-direction: column; gap: 8px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.6);
      animation: popIn 0.25s ease;
    }
    .support-popup.show { display: flex; }
    .support-popup::before {
      content: 'Huduma kwa Wateja';
      display: block; text-align: center;
      font-size: 12px; font-weight: 800; color: #fb923c;
      letter-spacing: 0.3px; margin-bottom: 4px;
    }
    .support-option {
      display: flex; align-items: center; gap: 12px;
      padding: 14px; border-radius: 14px; text-decoration: none;
      color: white; font-weight: 800; font-size: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .support-option:active { background: rgba(249,115,22,0.2); }
    .opt-icon {
      width: 40px; height: 40px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #f97316, #ef4444);
      font-size: 18px;
    }

    .wd-modal { text-align: left; padding: 18px 16px 14px; max-width: 380px; }
    .wd-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
    .wd-x {
      width: 36px; height: 36px; border-radius: 12px; border: none;
      background: rgba(255,255,255,0.08); color: white; font-size: 18px; cursor: pointer;
      flex-shrink: 0;
    }
    .wd-title { font-size: 18px; font-weight: 800; }
    .wd-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
    .wd-salio {
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
    }
    .wd-salio-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
    .wd-salio-val { font-size: 28px; font-weight: 900; letter-spacing: -0.5px; }
    .wd-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #cbd5e1; }
    .wd-input {
      width: 100%; padding: 14px 16px; border-radius: 14px; margin-bottom: 12px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
      color: white; font-size: 15px; outline: none;
    }
    .wd-input:focus { border-color: #8b5cf6; }
    .wd-info {
      background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.3);
      border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: #c4b5fd;
      margin-bottom: 10px; line-height: 1.45;
    }
    .wd-warn {
      background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.4);
      border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: #fde68a;
      margin-bottom: 14px; line-height: 1.45;
    }
    .wd-warn strong { color: #fbbf24; }
    .wd-confirm {
      width: 100%; padding: 15px; border: none; border-radius: 999px;
      background: linear-gradient(90deg, #6366f1, #a855f7);
      color: white; font-weight: 800; font-size: 16px; cursor: pointer;
      box-shadow: 0 6px 20px rgba(139,92,246,0.35);
    }
    .wd-rudi {
      display: block; width: 100%; text-align: center; margin-top: 12px;
      background: none; border: none; color: #64748b; font-size: 13px; cursor: pointer;
    }


    /* ===== Chat UI (Lipwa style) ===== */
    .chat-overlay {
      padding: 0 !important;
      align-items: stretch !important;
      background: #070b14 !important;
    }
    #chatOverlay.show { display: flex !important; z-index: 120; }
    .chat-panel {
      background: #070b14;
      width: 100%; max-width: 480px;
      margin: 0 auto;
      display: flex; flex-direction: column;
      height: 100%; max-height: 100vh;
      border-radius: 0;
      border: none;
      box-shadow: none;
      overflow: hidden;
    }
    .chat-top-bar {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: #0c1220;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      flex-shrink: 0;
    }
    .chat-top-avatar {
      width: 44px; height: 44px; border-radius: 50%;
      object-fit: cover; border: 2px solid rgba(139,92,246,0.5);
    }
    .chat-top-meta { flex: 1; min-width: 0; }
    .chat-top-name {
      font-size: 16px; font-weight: 800; color: #f1f5f9;
      display: flex; align-items: center; gap: 6px;
    }
    .chat-typing-status {
      font-size: 12px; color: #a78bfa; margin-top: 1px;
    }
    .typing-dots::after {
      content: '';
      animation: dots 1.4s steps(4,end) infinite;
    }
    @keyframes dots {
      0% { content: ''; }
      25% { content: '.'; }
      50% { content: '..'; }
      75% { content: '...'; }
    }
    .chat-x {
      width: 36px; height: 36px; border-radius: 50%;
      border: none; background: rgba(255,255,255,0.08);
      color: #e2e8f0; font-size: 20px; cursor: pointer;
      flex-shrink: 0;
    }
    /* Muda / earnings bar */
    .muda-bar {
      margin: 12px 14px;
      background: linear-gradient(135deg, #4c1d95 0%, #1e3a8a 55%, #1d4ed8 100%);
      border-radius: 16px;
      padding: 12px 14px 10px;
      position: relative;
      box-shadow: 0 8px 24px rgba(79,70,229,0.35);
      flex-shrink: 0;
    }
    .muda-left {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 8px;
    }
    .muda-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #4ade80; box-shadow: 0 0 8px #4ade80;
      animation: pulse 1.5s infinite;
    }
    .muda-label {
      font-size: 11px; font-weight: 800; letter-spacing: 0.8px;
      color: rgba(255,255,255,0.9);
    }
    .muda-timer {
      position: absolute; top: 10px; right: 12px;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(6px);
      color: white; font-weight: 900; font-size: 14px;
      padding: 5px 12px; border-radius: 999px;
    }
    .muda-track {
      height: 5px; background: rgba(255,255,255,0.2);
      border-radius: 999px; overflow: hidden; margin-bottom: 8px;
    }
    .muda-fill {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, #4ade80, #38bdf8);
      border-radius: 999px;
      transition: width 1s linear;
    }
    .muda-earn {
      text-align: right; font-size: 13px; font-weight: 800;
      color: #4ade80;
    }
    .earn-plus { color: #86efac; }
    /* Messages */
    .chat-messages {
      flex: 1; overflow-y: auto; padding: 8px 14px 12px;
      display: flex; flex-direction: column; gap: 10px;
      background: #070b14; min-height: 0;
    }
    .msg {
      max-width: 82%; padding: 11px 14px;
      font-size: 14.5px; line-height: 1.4;
      word-wrap: break-word;
    }
    .msg.them {
      align-self: flex-start;
      background: #1a2332;
      color: #e2e8f0;
      border-radius: 16px 16px 16px 4px;
      border: none;
    }
    .msg.me {
      align-self: flex-end;
      background: linear-gradient(135deg, #22c55e, #16a34a);
      color: white;
      border-radius: 16px 16px 4px 16px;
      box-shadow: 0 4px 12px rgba(34,197,94,0.25);
    }
    .msg.me .seen {
      font-size: 11px; opacity: 0.9; margin-top: 4px; text-align: right;
    }
    .msg.pay {
      align-self: center; max-width: 92%; text-align: center;
      background: rgba(34,197,94,0.12);
      border: 1px solid rgba(34,197,94,0.3);
      color: #4ade80; font-weight: 700; font-size: 13px;
      border-radius: 12px;
    }
    .msg .time { font-size: 10px; opacity: 0.65; margin-top: 4px; }
    .typing {
      padding: 4px 16px 8px; font-size: 12px; color: #a78bfa;
      display: none; flex-shrink: 0;
    }
    .typing.show { display: block; }
    /* Input */
    .chat-input-row {
      display: flex; gap: 8px; padding: 10px 12px 14px;
      background: #0c1220;
      border-top: 1px solid rgba(255,255,255,0.05);
      flex-shrink: 0;
      align-items: center;
    }
    .chat-input-row input {
      flex: 1; border: 1px solid rgba(255,255,255,0.08);
      background: #111827; border-radius: 999px;
      padding: 13px 16px; color: white; font-size: 14.5px;
      outline: none;
    }
    .chat-input-row input::placeholder { color: #64748b; }
    .chat-input-row input:focus { border-color: rgba(34,197,94,0.4); }
    .chat-send-btn {
      border: none; border-radius: 999px;
      padding: 13px 20px;
      background: linear-gradient(135deg, #22c55e, #16a34a);
      color: white; font-weight: 800; font-size: 14.5px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(34,197,94,0.35);
      white-space: nowrap;
    }
    .chat-back-link { display: none; }
    .chat-progress-wrap { display: none; }
    .chat-header-row { display: none; }


    .chat-messages {
      background: #0a0e17;
      background-image: radial-gradient(ellipse at top, rgba(30,41,59,0.4) 0%, transparent 60%);
    }
    .msg.them {
      background: #1e293b;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      max-width: 78%;
    }
    .msg.me {
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      max-width: 78%;
    }
    .msg.pay { display: none !important; }


    .wd-networks {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
      margin-bottom: 14px;
    }
    .wd-net {
      border: 2px solid transparent; border-radius: 14px;
      padding: 12px 10px; cursor: pointer; text-align: left;
      display: flex; align-items: center; gap: 10px;
      font-weight: 700; color: #0f172a; transition: transform 0.1s, box-shadow 0.15s;
    }
    .wd-net:active { transform: scale(0.97); }
    .wd-net.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #22c55e; }
    .wd-net .net-logo {
      width: 36px; height: 36px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 900; font-size: 14px; color: white; flex-shrink: 0;
    }
    .wd-net .net-name { font-size: 13px; line-height: 1.2; }
    .wd-net .net-sub { font-size: 11px; opacity: 0.7; font-weight: 600; }
    .wd-net.mpesa { background: #ecfdf5; }
    .wd-net.mpesa .net-logo { background: #22c55e; }
    .wd-net.airtel { background: #fef2f2; color: #fff; }
    .wd-net.airtel { background: #ef4444; color: white; }
    .wd-net.airtel .net-logo { background: rgba(0,0,0,0.15); }
    .wd-net.airtel .net-sub { opacity: 0.85; color: rgba(255,255,255,0.9); }
    .wd-net.tigo { background: #3b82f6; color: white; }
    .wd-net.tigo .net-logo { background: rgba(0,0,0,0.15); font-size: 11px; }
    .wd-net.tigo .net-sub { color: rgba(255,255,255,0.85); }
    .wd-net.halo { background: #f59e0b; color: white; }
    .wd-net.halo .net-logo { background: rgba(0,0,0,0.15); }
    .wd-net.halo .net-sub { color: rgba(255,255,255,0.9); }
    .wd-submit {
      width: 100%; padding: 15px; border: none; border-radius: 999px;
      background: linear-gradient(90deg, #22c55e, #16a34a);
      color: white; font-weight: 800; font-size: 15px; cursor: pointer;
      box-shadow: 0 6px 20px rgba(34,197,94,0.4);
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .wd-salio-line {
      font-size: 14px; color: #94a3b8; margin-bottom: 12px;
    }
    .wd-salio-line strong { color: #4ade80; font-size: 16px; }


    /* ===== Overlays (modals) — CRITICAL ===== */
    .overlay {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(0,0,0,0.78) !important;
      display: none !important;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 14px;
      backdrop-filter: blur(6px);
      pointer-events: none;
    }
    .overlay.show {
      display: flex !important;
      pointer-events: auto !important;
    }
    #durationOverlay.show { display: flex !important; z-index: 110; pointer-events: auto !important; }
    #chatOverlay.show { display: flex !important; z-index: 120; pointer-events: auto !important; }
    #successOverlay.show { display: flex !important; z-index: 130; pointer-events: auto !important; }
    #durationOverlay:not(.show),
    #chatOverlay:not(.show),
    #successOverlay:not(.show),
    .overlay:not(.show) {
      display: none !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }
    .modal-box {
      background: #0f1a2e;
      border-radius: 20px;
      width: 100%;
      max-width: 380px;
      padding: 18px 16px 16px;
      border: 1px solid rgba(139,92,246,0.25);
      position: relative;
      max-height: 90vh;
      overflow-y: auto;
      pointer-events: auto;
    }


    .fail-modal {
      text-align: center; padding: 0 0 18px; overflow: hidden;
      max-width: 360px; border: 1px solid rgba(239,68,68,0.35);
      box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(239,68,68,0.12);
    }
    .fail-banner {
      background: linear-gradient(90deg, #dc2626, #ef4444, #f97316);
      padding: 14px 16px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      font-size: 16px; font-weight: 900; color: white;
      letter-spacing: 0.3px;
    }
    .fail-banner span { font-size: 20px; }
    .fail-body { padding: 18px 18px 0; }
    .fail-msg {
      font-size: 14.5px; color: #e2e8f0; line-height: 1.5;
      margin-bottom: 14px; text-align: left;
    }
    .fail-warn {
      background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(239,68,68,0.1));
      border: 1.5px solid rgba(251,191,36,0.45);
      border-radius: 14px; padding: 14px;
      font-size: 13.5px; line-height: 1.5; text-align: left;
      color: #fde68a; margin-bottom: 16px;
    }
    .fail-warn strong { color: #fbbf24; }
    .fail-warn .loss { color: #f87171; font-weight: 800; }
    .fail-account-btn {
      display: block; width: 100%; text-align: center; text-decoration: none;
      background: linear-gradient(90deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
      color: white !important;
      font-weight: 900; font-size: 15px;
      padding: 15px 16px; border-radius: 14px;
      letter-spacing: 0.5px;
      box-shadow: 0 8px 24px rgba(34,197,94,0.45);
      border: 2px solid rgba(255,255,255,0.25);
      margin-bottom: 10px;
      text-transform: uppercase;
    }
    .fail-account-btn:active { transform: scale(0.98); opacity: 0.95; }
    .fail-back {
      display: block; width: 100%; padding: 12px;
      background: transparent; border: 1.5px solid rgba(255,255,255,0.15);
      border-radius: 12px; color: #94a3b8; font-weight: 700;
      font-size: 14px; cursor: pointer;
    }


    /* Hongera success card */
    .hongera-card {
      background: linear-gradient(165deg, #16a34a 0%, #15803d 55%, #166534 100%) !important;
      border: none !important;
      border-radius: 24px !important;
      padding: 22px 18px 18px !important;
      max-width: 360px;
      box-shadow: 0 24px 60px rgba(22,163,74,0.45), 0 0 0 4px rgba(255,255,255,0.08);
      text-align: left;
      color: white;
    }
    .hongera-top {
      display: flex; align-items: flex-start; gap: 12px;
      margin-bottom: 14px;
    }
    .hongera-check {
      width: 48px; height: 48px; border-radius: 50%;
      background: rgba(255,255,255,0.2);
      border: 2.5px solid rgba(255,255,255,0.85);
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; flex-shrink: 0;
    }
    .hongera-title {
      font-size: 26px; font-weight: 900; line-height: 1.15;
      color: white; letter-spacing: -0.3px;
    }
    .hongera-sub {
      font-size: 13.5px; color: rgba(255,255,255,0.85);
      margin-top: 2px;
    }
    .hongera-line {
      height: 1px; background: rgba(255,255,255,0.25);
      margin: 12px 0 16px;
    }
    .hongera-amount {
      text-align: center; font-size: 22px; font-weight: 900;
      color: white; margin-bottom: 14px;
      letter-spacing: -0.3px;
    }
    .hongera-balance-note {
      background: rgba(255,255,255,0.18);
      border-radius: 14px; padding: 12px 14px;
      font-size: 13.5px; font-weight: 600;
      color: white; margin-bottom: 12px;
      display: flex; align-items: center; gap: 10px;
    }
    .hongera-warn {
      background: rgba(0,0,0,0.18);
      border: 1.5px solid rgba(253,224,71,0.45);
      border-radius: 14px; padding: 12px 14px;
      font-size: 13px; line-height: 1.45;
      color: #fef9c3; margin-bottom: 16px;
      display: flex; align-items: flex-start; gap: 10px;
    }
    .hongera-warn .hw-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
    .hongera-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; text-decoration: none;
      background: linear-gradient(90deg, #22d3ee, #06b6d4) !important;
      color: #0f172a !important;
      font-weight: 900; font-size: 15px;
      padding: 15px; border-radius: 14px;
      box-shadow: 0 8px 24px rgba(6,182,212,0.4);
      border: none; letter-spacing: 0.3px;
      text-transform: uppercase;
    }
    .hongera-back {
      display: block; width: 100%; margin-top: 10px;
      background: transparent; border: 1.5px solid rgba(255,255,255,0.35);
      color: white; font-weight: 700; font-size: 14px;
      padding: 12px; border-radius: 12px; cursor: pointer;
    }


    .wd-history-link {
      display: block; width: 100%; margin-top: 10px;
      text-align: center; background: transparent;
      border: 1.5px solid rgba(148,163,184,0.35);
      color: #94a3b8; font-weight: 700; font-size: 13px;
      padding: 11px; border-radius: 12px; cursor: pointer;
    }
    .wd-history-link:active { background: rgba(255,255,255,0.05); color: #e2e8f0; }
    .hist-modal {
      background: #f8fafc !important;
      color: #0f172a !important;
      border: none !important;
      border-radius: 20px !important;
      max-width: 400px;
      padding: 0 !important;
      overflow: hidden;
      max-height: 88vh;
      display: flex; flex-direction: column;
    }
    .hist-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 18px; border-bottom: 1px solid #e2e8f0;
      background: white;
    }
    .hist-header h3 {
      margin: 0; font-size: 18px; font-weight: 800; color: #0f172a;
    }
    .hist-x {
      width: 34px; height: 34px; border-radius: 10px; border: none;
      background: #f1f5f9; color: #64748b; font-size: 18px; cursor: pointer;
    }
    .hist-body {
      padding: 14px; overflow-y: auto; flex: 1;
      display: flex; flex-direction: column; gap: 12px;
    }
    .hist-card {
      background: #e0f2fe; border-radius: 16px; padding: 14px;
      border: 1px solid #bae6fd;
    }
    .hist-card-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
    .hist-card-title {
      font-weight: 800; font-size: 14px; color: #0f172a;
      display: flex; align-items: center; gap: 6px;
    }
    .hist-pending {
      background: #bae6fd; color: #0369a1;
      font-size: 11px; font-weight: 800;
      padding: 4px 10px; border-radius: 999px;
      display: flex; align-items: center; gap: 4px;
    }
    .hist-row {
      display: flex; justify-content: space-between;
      font-size: 13px; margin-bottom: 6px;
    }
    .hist-row .lab { color: #64748b; }
    .hist-row .val { color: #0f172a; font-weight: 700; }
    .hist-row .val.tx { color: #0284c7; }
    .hist-row .val.st { color: #dc2626; font-weight: 700; }
    .hist-note {
      margin-top: 10px; padding-top: 10px;
      border-top: 1px solid #bae6fd;
      font-size: 12px; color: #475569; line-height: 1.4;
    }
    .hist-empty {
      text-align: center; padding: 30px 16px; color: #64748b; font-size: 14px;
    }
    .hist-footer {
      padding: 12px 14px 16px; background: white;
      border-top: 1px solid #e2e8f0;
      display: flex; flex-direction: column; gap: 8px;
    }
    .hist-fungua {
      display: block; width: 100%; text-align: center; text-decoration: none;
      background: linear-gradient(90deg, #22c55e, #16a34a);
      color: white !important; font-weight: 900; font-size: 14px;
      padding: 14px; border-radius: 12px;
      box-shadow: 0 6px 18px rgba(34,197,94,0.35);
    }
    .hist-funga {
      width: 100%; border: none; border-radius: 12px;
      padding: 14px; font-weight: 800; font-size: 15px;
      background: #1e3a5f; color: white; cursor: pointer;
    }
.notif-popup{position:fixed;top:14px;left:50%;z-index:9999;margin:0;width:min(92vw,380px);
  transform:translate(-50%,-140%);opacity:0;transition:transform .45s cubic-bezier(.2,1.2,.4,1),opacity .3s;
  box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 0 1px rgba(34,197,94,.35);pointer-events:none;padding:12px 14px;font-size:13.5px}
.notif-popup.show{transform:translate(-50%,0);opacity:1}

/* === Huduma kwa Wateja — paneli mpya === */
.support-popup { width: 300px; }
.support-option { justify-content: flex-start; }
.support-option:active { background: rgba(255,255,255,0.12); }
.opt-icon.wa { background: linear-gradient(135deg, #25d366, #128c7e); }
.opt-icon.call { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.opt-icon.sms { background: linear-gradient(135deg, #f97316, #ef4444); }
.support-option .opt-text { display: flex; flex-direction: column; line-height: 1.25; }
.support-option .opt-text small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; color: rgba(255,255,255,0.6); }
.support-note { font-size: 10.5px; text-align: center; color: rgba(255,255,255,0.45); padding-top: 2px; }