* { 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: 10px; width: 100%; border: none; border-radius: 999px;
      padding: 9px; font-weight: 700; font-size: 13px; cursor: pointer;
      background: linear-gradient(90deg, #6366f1, #a855f7); color: white;
    }
    /* 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, #0ea5e9 0%, #6366f1 50%, #22c55e 100%);
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 999px; padding: 9px 16px 9px 9px;
      color: white; font-weight: 800; font-size: 11.5px; cursor: pointer;
      box-shadow: 0 10px 32px rgba(99,102,241,0.45), 0 0 20px rgba(34,197,94,0.2);
      line-height: 1.15;
      animation: supportPulse 2.2s ease-in-out infinite;
      text-transform: none;
      letter-spacing: 0.2px;
    }
    @keyframes supportPulse {
      0%, 100% { transform: scale(1); box-shadow: 0 10px 32px rgba(99,102,241,0.45), 0 0 20px rgba(34,197,94,0.2); }
      50% { transform: scale(1.04); box-shadow: 0 14px 40px rgba(34,197,94,0.5), 0 0 28px rgba(99,102,241,0.35); }
    }
    .support-icon-wrap {
      width: 40px; height: 40px; border-radius: 50%;
      background: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; position: relative;
      box-shadow: 0 3px 12px rgba(0,0,0,0.2);
      color: #6366f1;
    }
    .support-live-dot {
      position: absolute; top: -2px; right: -2px;
      width: 12px; height: 12px; background: #22c55e;
      border-radius: 50%; border: 2.5px solid white;
      animation: pulse 1.3s infinite;
      box-shadow: 0 0 8px #22c55e;
    }
    .support-popup {
      position: fixed; bottom: 130px; right: 14px; z-index: 45;
      background: linear-gradient(165deg, #121a2e, #0a1020);
      border: 1px solid rgba(99,102,241,0.35);
      border-radius: 18px; padding: 10px; width: 240px;
      display: none; flex-direction: column; gap: 6px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
      animation: popIn 0.22s ease;
    }
    @keyframes popIn {
      from { opacity: 0; transform: translateY(8px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .support-popup.show { display: flex; }
    .support-option {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 12px; border-radius: 12px; text-decoration: none;
      color: white; font-weight: 600; font-size: 13px;
      background: rgba(255,255,255,0.04);
    }
    .support-option:active { background: rgba(139,92,246,0.2); }
    .opt-icon {
      width: 32px; height: 32px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.08); font-size: 16px;
    }
    /* Modals - keep functional */
    .overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.75);
      display: none; align-items: center; justify-content: center;
      z-index: 100; padding: 14px; backdrop-filter: blur(6px);
    }
    .overlay.show { display: flex; }
    .modal-box {
      background: #0f1a2e; border-radius: 20px;
      width: 100%; max-width: 380px; padding: 18px 16px 16px;
      border: 1px solid rgba(139,92,246,0.2);
      position: relative; max-height: 90vh; overflow-y: auto;
    }
    .modal-close {
      position: absolute; top: 10px; right: 12px;
      background: rgba(255,255,255,0.08); border: none; color: white;
      width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer;
    }
    .dur-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .dur-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #8b5cf6; }
    .dur-title { font-size: 16px; font-weight: 700; }
    .dur-sub { font-size: 12px; color: var(--muted); }
    .dur-option {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px; border-radius: 14px; margin-bottom: 8px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
      cursor: pointer;
    }
    .dur-option:active { border-color: #8b5cf6; background: rgba(139,92,246,0.12); }
    .dur-option .mins { font-weight: 700; }
    .dur-option .pay { color: #4ade80; font-weight: 700; }
    /* Chat UI */
    .chat-overlay { flex-direction: column; padding: 0; }
    .chat-overlay.show { display: flex; }
    .chat-top {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px; background: #0d1524;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .chat-top-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #8b5cf6; }
    .chat-top-info { flex: 1; }
    .chat-top-name { font-weight: 700; font-size: 15px; }
    .chat-timer { font-size: 12px; color: #a78bfa; font-weight: 600; }
    .chat-progress-wrap { height: 3px; background: #1e293b; }
    .chat-progress { height: 100%; width: 0%; background: linear-gradient(90deg, #8b5cf6, #22c55e); transition: width 1s linear; }
    .chat-messages {
      flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
      background: #070b14;
    }
    .msg { max-width: 80%; padding: 10px 12px; border-radius: 14px; font-size: 14px; }
    .msg.me {
      align-self: flex-end;
      background: linear-gradient(135deg, #4f46e5, #7c3aed); color: white;
      border-bottom-right-radius: 4px;
    }
    .msg.them {
      align-self: flex-start; background: #1e293b; color: #e2e8f0;
      border-bottom-left-radius: 4px;
    }
    .msg.pay {
      align-self: center; max-width: 90%; text-align: center;
      background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.35);
      color: #4ade80; font-weight: 600; font-size: 13px;
    }
    .msg .time { font-size: 10px; opacity: 0.7; margin-top: 4px; }
    .msg.them .time { text-align: left; }
    .typing { display: none; padding: 4px 14px; font-size: 12px; color: var(--muted); }
    .typing.show { display: block; }
    .chat-input-row {
      display: flex; gap: 8px; padding: 10px 12px;
      background: #0d1524; border-top: 1px solid rgba(255,255,255,0.06);
    }
    .chat-input-row input {
      flex: 1; border: 1px solid rgba(255,255,255,0.1); background: #070b14;
      border-radius: 999px; padding: 11px 14px; color: white; font-size: 14px; outline: none;
    }
    .chat-send {
      border: none; border-radius: 50%; width: 44px; height: 44px;
      background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white;
      font-size: 18px; cursor: pointer;
    }
    .success-icon {
      width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
      background: linear-gradient(135deg, #22c55e, #0ea5e9);
      display: flex; align-items: center; justify-content: center; font-size: 28px;
    }
    .success-title { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 10px; }
    .success-text { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }
    .success-text .highlight { color: #4ade80; font-weight: 700; }
    .success-text .gold { color: #fbbf24; font-weight: 700; }
    .success-btn {
      display: block; width: 100%; text-align: center; text-decoration: none;
      background: linear-gradient(90deg, #4f46e5, #a855f7); color: white;
      font-weight: 800; font-size: 14px; padding: 14px; border-radius: 12px; border: none; cursor: pointer;
    }
    .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; }

    /* 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 {
      position: fixed; bottom: 128px; left: 14px; z-index: 40;
      display: flex; align-items: center; gap: 9px;
      background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 999px; padding: 9px 16px 9px 9px;
      color: white; font-weight: 800; font-size: 11.5px;
      text-decoration: none; line-height: 1.15;
      box-shadow: 0 10px 32px rgba(37,211,102,0.4);
      animation: supportPulse 2.4s ease-in-out infinite;
    }
    .float-channel .ch-icon {
      width: 40px; height: 40px; border-radius: 50%;
      background: white; color: #128C7E;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    }


    .success-back {
      display: block; width: 100%; margin-top: 10px;
      padding: 13px; border-radius: 12px;
      background: transparent;
      border: 1.5px solid rgba(255,255,255,0.15);
      color: #cbd5e1; font-weight: 700; font-size: 14px;
      cursor: pointer;
    }
    .success-back:active {
      background: rgba(255,255,255,0.06);
    }


    .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;
    }