/* ===== airtime-cash.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
      .ac-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
      body.has-bottom-nav .ac-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
      .ac-root *, .ac-root *::before, .ac-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
      .ac-root button { font-family:inherit; }
      /* Light-on-green spinner for the gradient buttons */
      .ac-root .spinner { border-color:rgba(255,255,255,.35); border-top-color:#FFFFFF; }

      .ac-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
      .ac-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
      .ac-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
      .ac-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
      .ac-icon-btn svg { width:17px; height:17px; }
      .ac-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
      .ac-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

      .ac-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; display:flex; flex-direction:column; gap:16px; }
      .ac-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:6px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
      .ac-sec { padding:16px 0; }
      .ac-sec + .ac-sec { border-top:1px solid #F1F3F7; }
      .ac-label { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 10px; }
      .ac-note { font-size:12.5px; color:#667085; line-height:1.5; margin:0; }
      .ac-note svg { width:13px; height:13px; display:inline; vertical-align:-2px; }

      /* Network tiles */
      .ac-net-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
      .ac-net { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:12px; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; }
      .ac-net:active { transform:scale(.96); }
      .ac-net img { width:44px; height:44px; border-radius:999px; object-fit:cover; flex-shrink:0; }
      .ac-net span { font-size:12px; font-weight:600; color:#344054; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
      .ac-net.selected { border-color:#0B7A7A; background:#E1F5F5; }
      .ac-net.selected span { color:#0B7A7A; }

      /* Fields */
      .ac-field { position:relative; display:flex; align-items:center; }
      .ac-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
      .ac-field-icon svg { width:16px; height:16px; }
      .ac-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
      .ac-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
      .ac-input::placeholder { color:#98A2B3; }
      .ac-input.field-error { border-color:#B42318; }
      .ac-pad-r { padding-right:44px; }
      .ac-eye { position:absolute; right:8px; display:flex; padding:6px; border:none; background:transparent; color:#98A2B3; cursor:pointer; border-radius:8px; }
      .ac-eye:hover { color:#475467; }
      .ac-eye svg { width:16px; height:16px; }

      /* Amount box */
      .ac-amt { display:flex; align-items:center; gap:8px; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease; }
      .ac-amt:focus-within { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
      .ac-amt.field-error { border-color:#B42318; }
      .ac-amt-prefix { font-family:'Sora',sans-serif; font-size:18px; font-weight:700; color:#98A2B3; flex-shrink:0; }
      .ac-amt input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'Sora',sans-serif; font-size:20px; font-weight:700; color:#101828; }
      .ac-amt input::placeholder { color:#98A2B3; }

      .ac-hint { font-size:12px; color:#98A2B3; margin:8px 0 0; line-height:1.5; }
      .ac-err { font-size:12px; color:#B42318; margin:6px 0 0; }

      /* Conditions list styling */
      .ac-conditions-list { font-size:13px; color:#344054; line-height:1.7; margin:12px 0 0; padding:0; list-style:none; }
      .ac-conditions-list li { margin:8px 0; padding-left:28px; position:relative; }
      .ac-conditions-list li::before { content:attr(data-num); position:absolute; left:0; font-weight:700; color:#0B7A7A; min-width:24px; }

      /* Step-3 recipient + reference */
      .ac-recipient { font-family:'Sora',sans-serif; font-size:22px; font-weight:700; letter-spacing:.3px; color:#0B7A7A; margin:0; word-break:break-all; }
      .ac-ref-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; }
      .ac-ref-label { font-size:12px; color:#667085; flex-shrink:0; }
      .ac-ref-value { font-family:'Sora',sans-serif; font-size:13.5px; font-weight:600; letter-spacing:.3px; color:#101828; word-break:break-all; text-align:right; }

      /* Buttons */
      .ac-submit { width:100%; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
      .ac-submit:hover:not(:disabled) { filter:brightness(1.06); }
      .ac-submit:active { transform:scale(.98); }
      .ac-submit:disabled { opacity:.6; cursor:not-allowed; }
      .ac-ghost { width:100%; margin-top:8px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; font-weight:600; font-size:14px; border-radius:12px; padding:12px 16px; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
      .ac-ghost:hover { border-color:#0B7A7A; color:#0B7A7A; }

      /* ---------- Light result modal (scoped overrides) ---------- */
      #result-overlay { background:rgba(16,24,40,.55); }
      #result-overlay .result-card { background:#FFFFFF; border:1px solid #E6EAF0; box-shadow:0 20px 50px rgba(16,24,40,.25); }
      #result-overlay .result-title { color:#101828; }
      #result-overlay .result-message { color:#667085; }
      #result-overlay .close-btn { color:#98A2B3; }
      #result-overlay .close-btn:hover { color:#101828; }
      #result-overlay .result-icon.success { background:#E1F5F5; color:#0B7A7A; border-color:#0B7A7A; }
      #result-overlay .result-icon.error { background:#FEF3F2; color:#B42318; border-color:#B42318; }
      #result-overlay .result-icon.pending { background:#FFFAEB; color:#B54708; border-color:#B54708; }

      @media (max-width:380px) {
        .ac-content { padding:16px 12px 28px; }
        .ac-net img { height:36px; }
        .ac-conditions-list li { font-size:12px; }
      }


/* ===== airtime.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .ar-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .ar-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .ar-root *, .ar-root *::before, .ar-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .ar-root button { font-family:inherit; }

        .ar-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .ar-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .ar-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .ar-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .ar-icon-btn svg { width:17px; height:17px; }
        .ar-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .ar-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .ar-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; }
        .ar-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:6px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .ar-sec { padding:16px 0; }
        .ar-sec + .ar-sec { border-top:1px solid #F1F3F7; }
        .ar-label { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 10px; }

        /* Network tiles */
        .ar-net-grid { display:grid; grid-template-columns:repeat(4,minmax(0,72px)); justify-content:center; gap:8px; }
        .ar-net { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px 9px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:10px; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; }
        .ar-net:active { transform:scale(.96); }
        .ar-net img { width:30px; height:30px; border-radius:999px; object-fit:cover; flex-shrink:0; }
        .ar-net span { font-size:10.5px; font-weight:600; color:#344054; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
        .ar-net.selected { border-color:#0B7A7A; background:#E1F5F5; }
        .ar-net.selected span { color:#0B7A7A; }

        /* Fields */
        .ar-field { position:relative; display:flex; align-items:center; }
        .ar-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
        .ar-field-icon svg { width:16px; height:16px; }
        .ar-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .ar-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .ar-input::placeholder { color:#98A2B3; }
        .ar-input.field-error { border-color:#B42318; }
        .ar-pad-r { padding-right:44px; }
        .ar-eye { position:absolute; right:8px; display:flex; padding:6px; border:none; background:transparent; color:#98A2B3; cursor:pointer; border-radius:8px; }
        .ar-eye:hover { color:#475467; }
        .ar-eye svg { width:16px; height:16px; }

        /* Amount */
        .ar-amt { display:flex; align-items:center; gap:8px; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .ar-amt:focus-within { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .ar-amt.field-error { border-color:#B42318; }
        .ar-amt-prefix { font-family:'Sora',sans-serif; font-size:18px; font-weight:700; color:#98A2B3; flex-shrink:0; }
        .ar-amt input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'Sora',sans-serif; font-size:20px; font-weight:700; color:#101828; }
        .ar-amt input::placeholder { color:#98A2B3; }
        .ar-quick { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
        .ar-chip { padding:7px 14px; border-radius:999px; border:1px solid #E6EAF0; background:#FFFFFF; color:#667085; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s ease; }
        .ar-chip:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .ar-chip:active { transform:scale(.96); }
        .ar-chip.selected { border-color:#0B7A7A; background:#E1F5F5; color:#0B7A7A; }
        #kind-switch { margin-top:0; }

        /* Select dropdowns (international airtime) */
        .ar-select { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:12px 38px 12px 12px; cursor:pointer; text-overflow:ellipsis; }
        .ar-input.ar-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; }
        .ar-select:disabled { opacity:.6; cursor:not-allowed; }

        .ar-hint { font-size:12px; color:#98A2B3; margin:8px 0 0; }
        .ar-err { font-size:12px; color:#B42318; margin:6px 0 0; }

        /* Submit */
        .ar-submit { width:100%; margin-top:16px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .ar-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .ar-submit:active { transform:scale(.98); }
        .ar-submit:disabled { opacity:.6; cursor:not-allowed; }

        /* Light result modal (scoped overrides of the shared overlay) */
        #result-overlay { background:rgba(16,24,40,.55); }
        #result-overlay .result-card { background:#FFFFFF; border:1px solid #E6EAF0; box-shadow:0 20px 50px rgba(16,24,40,.25); }
        #result-overlay .result-title { color:#101828; }
        #result-overlay .result-message { color:#667085; }
        #result-overlay .close-btn { color:#98A2B3; }
        #result-overlay .close-btn:hover { color:#101828; }
        #result-overlay .result-icon.success { background:#E1F5F5; color:#0B7A7A; border-color:#0B7A7A; }
        #result-overlay .result-icon.error { background:#FEF3F2; color:#B42318; border-color:#B42318; }
        #result-overlay .result-icon.pending { background:#FFFAEB; color:#B54708; border-color:#B54708; }

        @media (max-width:360px) {
          .ar-net-grid { gap:6px; }
          .ar-net { padding:8px 2px 7px; gap:5px; }
          .ar-net img { width:26px; height:26px; }
          .ar-net span { font-size:9.5px; }
          .ar-content { padding:16px 12px 28px; }
        }


/* ===== dashboard.js ===== */
/* Full-viewport fixed surface: immune to shell padding/centering,
           scrolls internally, topbar sticks to its top edge. */
        .dd-root {
          position:fixed; inset:0; z-index:95;
          display:flex; flex-direction:column;
          background:#F4F6FA; color:#101828;
          font-family:'Inter',ui-sans-serif,system-ui;
          overflow:hidden;
          -webkit-tap-highlight-color: transparent; /* kills the dark tap flash */
        }
        body.has-bottom-nav .dd-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .dd-root *, .dd-root *::before, .dd-root *::after { box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
        .dd-root button { font-family:inherit; }

        /* ---------- Main ---------- */
        .dd-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .dd-topbar {
          position:sticky; top:0; z-index:40;
          display:flex; align-items:center; gap:10px;
          padding:calc(16px + env(safe-area-inset-top)) 24px 12px; /* breathing room from the top */
          background:rgba(255,255,255,.92);
          -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
          border-bottom:1px solid #E6EAF0;
        }
        .dd-user-text { min-width:0; flex:1; margin-top:5px; }
        .dd-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .dd-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .dd-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
        .dd-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .dd-icon-btn svg { width:17px; height:17px; }
        .dd-icon-btn.profile { border-radius:999px; background:#E1F5F5; border-color:transparent; color:#0B7A7A; }
        .dd-icon-btn.profile:hover { background:rgba(11,122,122,.16); }
        .dd-content { width:100%; max-width:1080px; margin:0 auto; padding:24px; display:flex; flex-direction:column; gap:20px; }
        .dd-section-title { font-family:'Sora',sans-serif; font-size:14.5px; font-weight:700; color:#101828; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
        .dd-section-title svg { width:15px; height:15px; color:#0B7A7A; }

        /* ---------- Announcement ---------- */
        .dd-announce { display:flex; align-items:flex-start; gap:10px; background:#FAF0CA; border:1px solid #F4D35E; color:#6B4E14; border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.5; }
        .dd-announce svg { color:#C9A227; margin-top:1px; flex-shrink:0; }
        .dd-announce strong { color:#C9A227; }
        .dd-announce a { color:#C9A227; font-weight:600; text-decoration:underline; margin-left:4px; }
        .dd-announce-close { background:none; border:none; color:#8A6A24; cursor:pointer; padding:2px; flex-shrink:0; }
        .dd-announce-close:hover { color:#6B4E14; }

        /* ---------- Balance hero (darker green grade) ---------- */
        .dd-balance { position:relative; overflow:hidden; border-radius:14px; padding:14px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 55%,#0A4F4F 100%); color:#FFFFFF; box-shadow:0 8px 20px rgba(10,79,79,.3); }
        .dd-balance::before { content:''; position:absolute; top:-50px; right:-40px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.08); }
        .dd-balance::after { content:''; position:absolute; bottom:-60px; right:50px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.06); }
        .dd-bal-row { display:flex; align-items:center; gap:8px; position:relative; z-index:1; }
        .dd-bal-label { font-size:11.5px; opacity:.85; }
        .dd-eye { color:rgba(255,255,255,.8); cursor:pointer; display:flex; padding:2px; }
        .dd-eye:hover { color:#FFFFFF; }
        .dd-eye svg { width:12px; height:12px; }
        .dd-bal-amount { font-family:'Sora',sans-serif; font-size:24px; font-weight:700; letter-spacing:-.5px; margin-top:4px; min-height:30px; display:flex; align-items:center; position:relative; z-index:1; font-variant-numeric:tabular-nums; }
        .dd-bal-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; position:relative; z-index:1; }
        .dd-btn-light { background:#FFFFFF; color:#0A4F4F; font-weight:700; font-size:12px; border:none; border-radius:8px; padding:7px 12px; display:inline-flex; gap:6px; align-items:center; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
        .dd-btn-light:hover { box-shadow:0 6px 16px rgba(0,0,0,.22); }
        .dd-btn-light svg { width:13px; height:13px; }
        .dd-btn-ghostw { background:rgba(255,255,255,.14); color:#FFFFFF; border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .15s ease; }
        .dd-btn-ghostw:hover { background:rgba(255,255,255,.22); }
        .dd-btn-light .spinner { border-color:rgba(11,122,122,.25); border-top-color:#0B7A7A; }
        .dd-btn-light:disabled { opacity:.75; cursor:default; }
        .dd-fund-panel { margin-top:12px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.35); position:relative; z-index:1; }
        .dd-fund-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 0; }
        .dd-fund-label { font-size:10.5px; opacity:.8; margin:0; }
        .dd-fund-value { font-family:'Sora',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.3px; margin:1px 0 0; }
        .dd-copy-btn { display:inline-flex; gap:5px; align-items:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#FFFFFF; border-radius:7px; padding:4px 8px; font-size:11px; font-weight:600; cursor:pointer; flex-shrink:0; }
        .dd-copy-btn:hover { background:rgba(255,255,255,.26); }
        .dd-copy-btn svg { width:12px; height:12px; }
        .dd-note { font-size:11px; opacity:.85; line-height:1.45; margin:4px 0 0; }
        .dd-note svg { width:12px; height:12px; display:inline; vertical-align:-2px; }

        /* ---------- Services ---------- */
        .dd-svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
        .dd-svc { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:10px; padding:10px 6px 9px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; transition:box-shadow .2s ease, transform .15s ease, border-color .15s ease; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; user-select:none; }
        .dd-svc:hover { border-color:#0B7A7A; box-shadow:none; background:#FFFFFF; }
        .dd-svc:active { transform:scale(.97); }
        .dd-svc-icon { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; }
        .dd-svc-icon svg { width:15px; height:15px; }
        .dd-svc-name { font-size:10.5px; font-weight:600; color:#344054; text-align:center; line-height:1.25; }

        /* ---------- Activity ---------- */
        .dd-act-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:4px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .dd-act-row { display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
        .dd-act-row + .dd-act-row { border-top:1px solid #F1F3F7; }
        .dd-act-icon { width:34px; height:34px; border-radius:999px; border:1px solid #E6EAF0; background:#F9FAFB; color:#667085; display:grid; place-items:center; flex-shrink:0; }
        .dd-act-icon svg { width:15px; height:15px; }
        .dd-act-icon.credit { color:#0B7A7A; background:#E1F5F5; border-color:transparent; }
        .dd-act-icon.debit { color:#B42318; background:#FEF3F2; border-color:transparent; }
        .dd-act-info { flex:1; min-width:0; }
        .dd-act-title { margin:0; font-size:13px; font-weight:600; color:#101828; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .dd-act-sub { margin:1px 0 0; font-size:11.5px; color:#98A2B3; }
        .dd-act-amt { font-family:'Sora',sans-serif; font-size:13px; font-weight:600; flex-shrink:0; font-variant-numeric:tabular-nums; }
        .dd-act-amt.credit { color:#0B7A7A; }
        .dd-act-amt.debit { color:#B42318; }
        .dd-empty { text-align:center; padding:28px 12px; color:#98A2B3; font-size:13px; }
        .dd-empty svg { width:22px; height:22px; display:block; margin:0 auto 8px; color:#98A2B3; }
        .dd-skel { background:linear-gradient(90deg,#EEF1F5 25%,#F7F9FB 37%,#EEF1F5 63%); background-size:400% 100%; animation:dd-pulse 1.4s ease infinite; border-radius:8px; }
        @keyframes dd-pulse { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }

        /* ---------- Responsive ---------- */
        @media (max-width:640px) {
          .dd-content { padding:16px; gap:16px; }
          .dd-topbar { padding:calc(14px + env(safe-area-inset-top)) 14px 10px; }
          .dd-icon-btn { width:34px; height:34px; }
          .dd-icon-btn svg { width:16px; height:16px; }
          .dd-name { font-size:15px; }
          .dd-balance { padding:12px; }
          .dd-bal-amount { font-size:21px; }
          .dd-svc-grid { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }
        }
        @media (max-width:380px) {
          .dd-topbar { gap:6px; }
          .dd-icon-btn { width:32px; height:32px; }
        }

        /* ---------- Theme Toggle ---------- */
        .theme-toggle {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          border: 1px solid #E6EAF0;
          background: #FFFFFF;
          color: #101828;
          border-radius: 999px;
          padding: 8px 12px;
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          transition: border-color .15s ease, background .15s ease;
        }
        .theme-toggle:hover { border-color: #0B7A7A; }
        .theme-toggle__icon { display:inline-flex; align-items:center; justify-content:center; }
        .theme-toggle__label { line-height:1; }


/* ===== data.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .da-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .da-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .da-root *, .da-root *::before, .da-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .da-root button { font-family:inherit; }

        .da-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .da-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .da-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .da-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .da-icon-btn svg { width:17px; height:17px; }
        .da-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .da-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .da-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; }
        .da-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:6px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .da-sec { padding:16px 0; }
        .da-sec + .da-sec { border-top:1px solid #F1F3F7; }
        .da-label { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 10px; }
        .da-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
        .da-label-row .da-label { margin:0; }
        .da-balance { font-size:12px; color:#98A2B3; flex-shrink:0; }

        /* Network tiles */
        .da-net-grid { display:grid; grid-template-columns:repeat(4,minmax(0,72px)); justify-content:center; gap:8px; }
        .da-net { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px 9px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:10px; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; }
        .da-net:active { transform:scale(.96); }
        .da-net img { width:30px; height:30px; border-radius:999px; object-fit:cover; flex-shrink:0; }
        .da-net span { font-size:10.5px; font-weight:600; color:#344054; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
        .da-net.selected { border-color:#0B7A7A; background:#E1F5F5; }
        .da-net.selected span { color:#0B7A7A; }

        /* Plan trigger row */
        .da-trigger { width:100%; display:flex; align-items:center; gap:10px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:10px; padding:12px; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
        .da-trigger:hover { border-color:#0B7A7A; }
        .da-trigger-icon { color:#98A2B3; display:flex; flex-shrink:0; }
        .da-trigger-icon svg { width:16px; height:16px; }
        .da-trigger-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600; color:#101828; text-align:left; }
        .da-trigger-price { font-family:'Sora',sans-serif; font-size:13.5px; font-weight:600; color:#0B7A7A; flex-shrink:0; }
        .da-chev { color:#98A2B3; flex-shrink:0; }
        .da-chev svg { width:16px; height:16px; }

        /* Fields */
        .da-field { position:relative; display:flex; align-items:center; }
        .da-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
        .da-field-icon svg { width:16px; height:16px; }
        .da-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .da-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .da-input::placeholder { color:#98A2B3; }
        .da-input.field-error { border-color:#B42318; }
        .da-pad-r { padding-right:44px; }
        .da-eye { position:absolute; right:8px; display:flex; padding:6px; border:none; background:transparent; color:#98A2B3; cursor:pointer; border-radius:8px; }
        .da-eye:hover { color:#475467; }
        .da-eye svg { width:16px; height:16px; }

        /* Amount mirror */
        .da-amt { display:flex; align-items:center; gap:8px; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease; }
        .da-amt.field-error { border-color:#B42318; }
        .da-amt-prefix { font-family:'Sora',sans-serif; font-size:18px; font-weight:700; color:#98A2B3; flex-shrink:0; }
        .da-amt input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'Sora',sans-serif; font-size:20px; font-weight:700; color:#101828; }
        .da-amt input::placeholder { color:#98A2B3; }

        .da-hint { font-size:12px; color:#98A2B3; margin:8px 0 0; }
        .da-err { font-size:12px; color:#B42318; margin:6px 0 0; }

        /* Submit */
        .da-submit { width:100%; margin-top:16px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .da-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .da-submit:active { transform:scale(.98); }
        .da-submit:disabled { opacity:.6; cursor:not-allowed; }

        /* ---------- Light bottom sheet (scoped overrides) ---------- */
        #data-sheet-overlay { background:rgba(16,24,40,.5); }
        #data-sheet { background:#FFFFFF; border:1px solid #E6EAF0; border-bottom:none; }
        #data-sheet .sheet-handle { background:#D9E2EC; }
        #data-sheet .sheet-close { background:#F9FAFB; border:1px solid #E6EAF0; color:#667085; }
        #data-sheet .sheet-close:hover { border-color:#0B7A7A; color:#0B7A7A; }
        #data-sheet .sheet-title { color:#101828; }
        #data-sheet .sheet-tabs-label { color:#667085; }
        #data-sheet .sheet-option { color:#101828; border-bottom:1px solid #F1F3F7; }
        #data-sheet .sheet-option:last-child { border-bottom:none; }
        #data-sheet .sheet-option:active { background:#F9FAFB; }
        #data-sheet .sheet-option .opt-price { color:#101828; }
        #data-sheet .sheet-empty { color:#98A2B3; }

        /* ---------- Light result modal (scoped overrides) ---------- */
        #result-overlay { background:rgba(16,24,40,.55); }
        #result-overlay .result-card { background:#FFFFFF; border:1px solid #E6EAF0; box-shadow:0 20px 50px rgba(16,24,40,.25); }
        #result-overlay .result-title { color:#101828; }
        #result-overlay .result-message { color:#667085; }
        #result-overlay .close-btn { color:#98A2B3; }
        #result-overlay .close-btn:hover { color:#101828; }
        #result-overlay .result-icon.success { background:#E1F5F5; color:#0B7A7A; border-color:#0B7A7A; }
        #result-overlay .result-icon.error { background:#FEF3F2; color:#B42318; border-color:#B42318; }
        #result-overlay .result-icon.pending { background:#FFFAEB; color:#B54708; border-color:#B54708; }

        @media (max-width:360px) {
          .da-net-grid { gap:6px; }
          .da-net { padding:8px 2px 7px; gap:5px; }
          .da-net img { width:26px; height:26px; }
          .da-net span { font-size:9.5px; }
          .da-content { padding:16px 12px 28px; }
        }


/* ===== electricity.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .el-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .el-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .el-root *, .el-root *::before, .el-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .el-root button { font-family:inherit; }

        .el-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .el-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .el-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .el-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .el-icon-btn svg { width:17px; height:17px; }
        .el-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .el-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .el-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; }
        .el-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:6px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .el-sec { padding:16px 0; }
        .el-sec + .el-sec { border-top:1px solid #F1F3F7; }
        .el-label { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 10px; }
        .el-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 10px; }
        .el-label-row .el-label { margin:0; }
        .el-balance { font-size:12px; color:#98A2B3; flex-shrink:0; }

        /* Provider trigger row */
        .el-trigger { width:100%; display:flex; align-items:center; gap:10px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:10px; padding:12px; cursor:pointer; transition:border-color .15s ease; }
        .el-trigger:hover { border-color:#0B7A7A; }
        .el-trigger-icon { color:#98A2B3; display:flex; flex-shrink:0; }
        .el-trigger-icon svg { width:16px; height:16px; }
        .el-trigger-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600; color:#101828; text-align:left; }
        .el-chev { color:#98A2B3; flex-shrink:0; display:flex; }
        .el-chev svg { width:16px; height:16px; }

        /* Meter type segmented control */
        .el-mt-row { display:flex; gap:8px; }
        .el-mt { flex:1; padding:12px 10px; border:1px solid #E6EAF0; background:#FFFFFF; border-radius:10px; font-size:13.5px; font-weight:600; color:#667085; cursor:pointer; transition:all .15s ease; }
        .el-mt:active { transform:scale(.97); }
        .el-mt.selected { border-color:#0B7A7A; background:#E1F5F5; color:#0B7A7A; }

        /* Fields */
        .el-field { position:relative; display:flex; align-items:center; }
        .el-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
        .el-field-icon svg { width:16px; height:16px; }
        .el-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .el-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .el-input::placeholder { color:#98A2B3; }
        .el-input.field-error { border-color:#B42318; }
        .el-pad-r { padding-right:44px; }
        .el-eye { position:absolute; right:8px; display:flex; padding:6px; border:none; background:transparent; color:#98A2B3; cursor:pointer; border-radius:8px; }
        .el-eye:hover { color:#475467; }
        .el-eye svg { width:16px; height:16px; }
        /* Light re-skin of the shared status classes used by the logic */
        .meter-status-text { font-size:12px; margin-top:8px; }
        .meter-status-text.ok { color:#0B7A7A; font-weight:600; }
        .meter-status-text.checking { color:#98A2B3; }

        /* Quick amount chips */
        .el-chip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
        .el-chip { padding:11px 6px; border:1px solid #E6EAF0; border-radius:10px; background:#FFFFFF; color:#667085; font-family:'Sora',sans-serif; font-size:13px; font-weight:700; text-align:center; cursor:pointer; transition:all .15s ease; }
        .el-chip:active { transform:scale(.96); }
        .el-chip.selected { border-color:#0B7A7A; background:#E1F5F5; color:#0B7A7A; }

        /* Amount box */
        .el-amt { display:flex; align-items:center; gap:8px; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease; }
        .el-amt:focus-within { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .el-amt.field-error { border-color:#B42318; }
        .el-amt-prefix { font-family:'Sora',sans-serif; font-size:18px; font-weight:700; color:#98A2B3; flex-shrink:0; }
        .el-amt input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'Sora',sans-serif; font-size:20px; font-weight:700; color:#101828; }
        .el-amt input::placeholder { color:#98A2B3; }

        .el-hint { font-size:12px; color:#98A2B3; margin:8px 0 0; line-height:1.5; }
        .el-err { font-size:12px; color:#B42318; margin:6px 0 0; }

        /* Submit */
        .el-submit { width:100%; margin-top:16px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .el-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .el-submit:active { transform:scale(.98); }
        .el-submit:disabled { opacity:.6; cursor:not-allowed; }

        /* ---------- Manual validate button (meter) ---------- */
        .el-field { gap:8px; }
        #meter-input { flex:1; min-width:0; }
        .el-validate-btn { flex-shrink:0; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:13px; border:none; border-radius:10px; padding:0 16px; height:44px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 14px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; white-space:nowrap; }
        .el-validate-btn:hover:not(:disabled) { filter:brightness(1.06); }
        .el-validate-btn:active { transform:scale(.98); }
        .el-validate-btn:disabled { opacity:.6; cursor:not-allowed; }

        /* ---------- Light bottom sheet (scoped overrides) ---------- */
        #disco-sheet-overlay { background:rgba(16,24,40,.5); }
        #disco-sheet { background:#FFFFFF; border:1px solid #E6EAF0; border-bottom:none; }
        #disco-sheet .sheet-handle { background:#D9E2EC; }
        #disco-sheet .sheet-close { background:#F9FAFB; border:1px solid #E6EAF0; color:#667085; }
        #disco-sheet .sheet-close:hover { border-color:#0B7A7A; color:#0B7A7A; }
        #disco-sheet .sheet-title { color:#101828; }
        #disco-sheet .sheet-option { color:#101828; border-bottom:1px solid #F1F3F7; }
        #disco-sheet .sheet-option:last-child { border-bottom:none; }
        #disco-sheet .sheet-option:active { background:#F9FAFB; }
        #disco-sheet .sheet-option .opt-price { color:#101828; }
        #disco-sheet .sheet-empty { color:#98A2B3; }

        /* ---------- Light result modal (scoped overrides) ---------- */
        #result-overlay { background:rgba(16,24,40,.55); }
        #result-overlay .result-card { background:#FFFFFF; border:1px solid #E6EAF0; box-shadow:0 20px 50px rgba(16,24,40,.25); }
        #result-overlay .result-title { color:#101828; }
        #result-overlay .result-message { color:#667085; }
        #result-overlay .close-btn { color:#98A2B3; }
        #result-overlay .close-btn:hover { color:#101828; }
        #result-overlay .result-icon.success { background:#E1F5F5; color:#0B7A7A; border-color:#0B7A7A; }
        #result-overlay .result-icon.error { background:#FEF3F2; color:#B42318; border-color:#B42318; }
        #result-overlay .result-icon.pending { background:#FFFAEB; color:#B54708; border-color:#B54708; }
        .el-details { margin-top:14px; text-align:left; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px; }
        .el-details-label { margin:0 0 4px; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#98A2B3; }
        .el-details-token { margin:0 0 10px; font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:#101828; word-break:break-all; }
        .el-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
        .el-details-grid span { display:block; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#98A2B3; margin-bottom:2px; }
        .el-details-grid b { font-size:12.5px; color:#101828; font-variant-numeric:tabular-nums; }

        @media (max-width:380px) {
          .el-content { padding:16px 12px 28px; }
          .el-chip-grid { grid-template-columns:repeat(2,1fr); }
        }


/* ===== exam-pin.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .xp-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .xp-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .xp-root *, .xp-root *::before, .xp-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .xp-root button { font-family:inherit; }

        .xp-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .xp-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .xp-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .xp-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .xp-icon-btn svg { width:17px; height:17px; }
        .xp-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .xp-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .xp-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; }
        .xp-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:6px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .xp-sec { padding:16px 0; }
        .xp-sec + .xp-sec { border-top:1px solid #F1F3F7; }
        .xp-label { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 10px; }
        .xp-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 10px; }
        .xp-label-row .xp-label { margin:0; }
        .xp-max { font-size:12px; color:#98A2B3; flex-shrink:0; }

        /* Exam type trigger row */
        .xp-trigger { width:100%; display:flex; align-items:center; gap:10px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:10px; padding:12px; cursor:pointer; transition:border-color .15s ease; }
        .xp-trigger:hover { border-color:#0B7A7A; }
        .xp-trigger-icon { color:#98A2B3; display:flex; flex-shrink:0; }
        .xp-trigger-icon svg { width:16px; height:16px; }
        .xp-trigger-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600; color:#101828; text-align:left; }
        .xp-trigger-price { font-family:'Sora',sans-serif; font-size:13.5px; font-weight:600; color:#0B7A7A; flex-shrink:0; }
        .xp-chev { color:#98A2B3; flex-shrink:0; display:flex; }
        .xp-chev svg { width:16px; height:16px; }

        /* Quantity box */
        .xp-amt { display:flex; align-items:center; gap:8px; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease; }
        .xp-amt:focus-within { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .xp-amt.field-error { border-color:#B42318; }
        .xp-amt-prefix { font-family:'Sora',sans-serif; font-size:18px; font-weight:700; color:#98A2B3; flex-shrink:0; }
        .xp-amt input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'Sora',sans-serif; font-size:20px; font-weight:700; color:#101828; }
        .xp-amt input::placeholder { color:#98A2B3; }
        .xp-total-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid #F1F3F7; }
        .xp-total-label { font-size:12.5px; color:#667085; }
        .xp-total-value { font-family:'Sora',sans-serif; font-size:15px; font-weight:700; color:#0B7A7A; font-variant-numeric:tabular-nums; }

        /* PIN field */
        .xp-field { position:relative; display:flex; align-items:center; gap:8px; }
        #profile-input { flex:1; min-width:0; }
        .xp-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
        .xp-field-icon svg { width:16px; height:16px; }
        .xp-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .xp-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .xp-input::placeholder { color:#98A2B3; }
        .xp-input.field-error { border-color:#B42318; }
        .xp-pad-r { padding-right:44px; }
        .xp-eye { position:absolute; right:8px; display:flex; padding:6px; border:none; background:transparent; color:#98A2B3; cursor:pointer; border-radius:8px; }
        .xp-eye:hover { color:#475467; }
        .xp-eye svg { width:16px; height:16px; }

        .xp-hint { font-size:12px; color:#98A2B3; margin:8px 0 0; }
        .xp-err { font-size:12px; color:#B42318; margin:6px 0 0; }

        /* Submit */
        .xp-submit { width:100%; margin-top:16px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .xp-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .xp-submit:active { transform:scale(.98); }
        .xp-submit:disabled { opacity:.6; cursor:not-allowed; }

        /* ---------- Light bottom sheet (scoped overrides) ---------- */
        #exam-sheet-overlay { background:rgba(16,24,40,.5); }
        #exam-sheet { background:#FFFFFF; border:1px solid #E6EAF0; border-bottom:none; }
        #exam-sheet .sheet-handle { background:#D9E2EC; }
        #exam-sheet .sheet-close { background:#F9FAFB; border:1px solid #E6EAF0; color:#667085; }
        #exam-sheet .sheet-close:hover { border-color:#0B7A7A; color:#0B7A7A; }
        #exam-sheet .sheet-title { color:#101828; }
        #exam-sheet .sheet-option { color:#101828; border-bottom:1px solid #F1F3F7; }
        #exam-sheet .sheet-option:last-child { border-bottom:none; }
        #exam-sheet .sheet-option:active { background:#F9FAFB; }
        #exam-sheet .sheet-option .opt-price { color:#101828; }
        #exam-sheet .sheet-empty { color:#98A2B3; }

        /* ---------- Light result modal (scoped overrides) ---------- */
        #result-overlay { background:rgba(16,24,40,.55); }
        #result-overlay .result-card { background:#FFFFFF; border:1px solid #E6EAF0; box-shadow:0 20px 50px rgba(16,24,40,.25); }
        #result-overlay .result-title { color:#101828; }
        #result-overlay .result-message { color:#667085; }
        #result-overlay .close-btn { color:#98A2B3; }
        #result-overlay .close-btn:hover { color:#101828; }
        #result-overlay .result-icon.success { background:#E1F5F5; color:#0B7A7A; border-color:#0B7A7A; }
        #result-overlay .result-icon.error { background:#FEF3F2; color:#B42318; border-color:#B42318; }
        #result-overlay .result-icon.pending { background:#FFFAEB; color:#B54708; border-color:#B54708; }
        #result-overlay .btn-primary { background:#0B7A7A; color:#FFFFFF; border:none; box-shadow:none; }
        #result-overlay .btn-ghost { background:#FFFFFF; color:#475467; border:1px solid #E6EAF0; }

        @media (max-width:380px) {
          .xp-content { padding:16px 12px 28px; }
        }


/* ===== forgot-password.js ===== */
/* Full-viewport light surface — same shell language as the restyled login */
        .fp-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; align-items:center; justify-content:center; padding:32px 16px; -webkit-tap-highlight-color:transparent; }
        .fp-root::before { content:''; position:fixed; top:-140px; left:50%; transform:translateX(-50%); width:560px; height:340px; background:radial-gradient(closest-side, rgba(23,162,162,.16), transparent); pointer-events:none; }
        .fp-root *, .fp-root *::before, .fp-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .fp-root button { font-family:inherit; }
        .fp-root .spinner { border-color:rgba(255,255,255,.35); border-top-color:#FFFFFF; }

        .fp-wrap { position:relative; width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; }
        .fp-brand-mark {
          width: 64px;
          height: 64px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          border-radius: 50%;
          margin-bottom: 15px;
          border: 2px solid #128F8F;
          background: transparent;
        }
        .fp-brand-mark img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: block;
        }
        .fp-brand-mark svg { width:24px; height:24px; }

        .fp-card { width:100%; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:16px; padding:28px 24px; box-shadow:0 12px 32px rgba(16,24,40,.08); }
        .fp-title { font-family:'Sora',sans-serif; font-size:22px; font-weight:700; letter-spacing:-.3px; color:#101828; margin:0 0 6px; }
        .fp-sub { font-size:13px; color:#667085; line-height:1.5; margin:0 0 20px; }
        .fp-sub strong { color:#101828; }

        .fp-back { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:#667085; font-size:12.5px; font-weight:600; cursor:pointer; padding:0; margin:0 0 14px; transition:color .15s ease; }
        .fp-back:hover { color:#0B7A7A; }
        .fp-back svg { width:16px; height:16px; }

        /* Fields */
        .fp-group { margin-bottom:14px; }
        .fp-label { display:block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 6px; }
        .fp-field { position:relative; display:flex; align-items:center; }
        .fp-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
        .fp-field-icon svg { width:16px; height:16px; }
        .fp-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .fp-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .fp-input::placeholder { color:#98A2B3; }
        .fp-input.field-error { border-color:#B42318; }
        .fp-pad-r { padding-right:44px; }
        .fp-input:-webkit-autofill,
        .fp-input:-webkit-autofill:hover,
        .fp-input:-webkit-autofill:focus {
          -webkit-text-fill-color:#101828;
          -webkit-box-shadow:0 0 0px 1000px #F9FAFB inset;
          transition:background-color 9999s ease-in-out 0s;
        }
        .fp-eye { position:absolute; right:8px; display:flex; padding:6px; border:none; background:transparent; color:#98A2B3; cursor:pointer; border-radius:8px; }
        .fp-eye:hover { color:#475467; }
        .fp-eye svg { width:16px; height:16px; }
        .fp-err { font-size:12px; color:#B42318; margin:6px 0 0; }
        /* OTP-style code input */
        .fp-code { text-align:center; letter-spacing:8px; padding-left:12px; padding-right:12px; font-family:'Sora',sans-serif; font-size:18px; font-weight:700; }
        .fp-code::placeholder { letter-spacing:4px; font-size:15px; }

        /* Buttons + links */
        .fp-submit { width:100%; margin-top:4px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:10px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .fp-submit:disabled { opacity:.6; cursor:not-allowed; }

        /* ---------- Rate-limit modal ---------- */
        .fp-ratelimit-overlay { position:fixed; inset:0; z-index:110; background:rgba(16,24,40,.5); display:flex; align-items:center; justify-content:center; padding:16px; }
        .fp-ratelimit-overlay.hidden { display:none; }
        .fp-ratelimit-card { width:100%; max-width:360px; background:#FFFFFF; border-radius:16px; padding:28px 24px; text-align:center; box-shadow:0 20px 48px rgba(16,24,40,.18); }
        .fp-ratelimit-icon { width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:#FEF3C7; color:#B45309; display:flex; align-items:center; justify-content:center; }
        .fp-ratelimit-icon svg { width:24px; height:24px; }
        .fp-ratelimit-title { font-size:17px; font-weight:700; color:#101828; margin:0 0 8px; }
        .fp-ratelimit-message { font-size:14px; color:#475467; line-height:1.5; margin:0 0 16px; }
        .fp-ratelimit-countdown { font-size:14.5px; font-weight:700; color:#0B6B6B; margin:0 0 20px; }
        .fp-ratelimit-card .fp-submit { margin-top:0; }
        .fp-ratelimit-card .fp-submit:disabled { background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); }
        .fp-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .fp-submit:active { transform:scale(.98); }
        .fp-submit:disabled { opacity:.6; cursor:not-allowed; }
        .fp-alt { text-align:center; font-size:13px; color:#667085; margin:18px 0 0; }
        .fp-link { color:#0B7A7A; font-weight:600; cursor:pointer; }
        .fp-link:hover { text-decoration:underline; }
        .fp-foot { font-size:11.5px; color:#98A2B3; margin:16px 0 0; text-align:center; }

        @media (max-width:380px) {
          .fp-root { padding:24px 12px; }
          .fp-card { padding:24px 18px; }
        }


/* ===== login.js ===== */
/* Full-viewport light surface — same shell language as the restyled app */
        .lg-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; align-items:center; justify-content:center; padding:32px 16px; -webkit-tap-highlight-color:transparent; }
        .lg-root::before { content:''; position:fixed; top:-140px; left:50%; transform:translateX(-50%); width:560px; height:340px; background:radial-gradient(closest-side, rgba(29,184,112,.16), transparent); pointer-events:none; }
        .lg-root *, .lg-root *::before, .lg-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .lg-root button { font-family:inherit; }
        .lg-root .spinner { border-color:rgba(255,255,255,.35); border-top-color:#FFFFFF; }

        .lg-wrap { position:relative; width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; }
        .lg-brand-mark {
          width: 64px;
          height: 64px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          border-radius: 50%;
          margin-bottom: 15px;
          border: 2px solid #128F8F;
          background: transparent;
          cursor:pointer;
          text-decoration:none;
        }
        .lg-brand-mark img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: block;
        }
        .lg-brand-mark svg { width:24px; height:24px; }
        .lg-home-link { font-size:12.5px; color:#667085; text-decoration:none; margin:-6px 0 18px; display:inline-block; }
        .lg-home-link:hover { color:#0B7A7A; text-decoration:underline; }

        .lg-card { width:100%; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:16px; padding:28px 24px; box-shadow:0 12px 32px rgba(16,24,40,.08); }
        .lg-title { font-family:'Sora',sans-serif; font-size:22px; font-weight:700; letter-spacing:-.3px; color:#101828; margin:0 0 6px; }
        .lg-sub { font-size:13px; color:#667085; line-height:1.5; margin:0 0 22px; }

        .lg-label { display:block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 6px; }
        .lg-field { position:relative; display:flex; align-items:center; margin-bottom:14px; }
        .lg-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
        .lg-field-icon svg { width:16px; height:16px; }
        .lg-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .lg-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,70,.12); }
        .lg-input::placeholder { color:#98A2B3; }
        .lg-input.field-error { border-color:#B42318; }
        .lg-input:-webkit-autofill,
        .lg-input:-webkit-autofill:hover,
        .lg-input:-webkit-autofill:focus {
          -webkit-text-fill-color:#101828;
          -webkit-box-shadow:0 0 0px 1000px #F9FAFB inset;
          transition:background-color 9999s ease-in-out 0s;
        }
        .lg-pad-r { padding-right:44px; }
        .lg-eye { position:absolute; right:8px; display:flex; padding:6px; border:none; background:transparent; color:#98A2B3; cursor:pointer; border-radius:8px; }
        .lg-eye:hover { color:#475467; }
        .lg-eye svg { width:16px; height:16px; }
        .lg-err { font-size:12px; color:#B42318; margin:-6px 0 12px; }

        .lg-submit { width:100%; margin-top:4px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:10px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,65,.25); transition:filter .15s ease, transform .15s ease; }
        .lg-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .lg-submit:active { transform:scale(.98); }
        .lg-submit:disabled { opacity:.6; cursor:not-allowed; }

        /* Password step: email chip + switch */
        .lg-chip-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:#667085; margin:0 0 10px; }
        .lg-chip { display:inline-flex; align-items:center; gap:6px; background:#F4F6FA; border:1px solid #E6EAF0; border-radius:999px; padding:4px 10px 4px 5px; font-size:13px; font-weight:600; color:#101828; }
        .lg-chip-avatar { width:20px; height:20px; border-radius:999px; background:#0B7A7A; color:#FFFFFF; display:grid; place-items:center; font-size:10px; font-weight:700; font-family:'Sora',sans-serif; }
        .lg-switch { font-size:12.5px; color:#98A2B3; margin:0 0 18px; }
        .lg-link { color:#0B7A7A; font-weight:600; cursor:pointer; }
        .lg-link:hover { text-decoration:underline; }
        .lg-alt { text-align:center; font-size:13px; color:#667085; margin:18px 0 0; }
        .lg-foot { font-size:11.5px; color:#98A2B3; margin:16px 0 0; text-align:center; }

        @media (max-width:380px) {
          .lg-card { padding:24px 18px; }
          .lg-root { padding:24px 12px; }
        }


/* ===== profile.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .pr-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .pr-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .pr-root *, .pr-root *::before, .pr-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .pr-root button { font-family:inherit; }
        .pr-root .spinner { border-color:rgba(255,255,255,.35); border-top-color:#FFFFFF; }

        .pr-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .pr-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .pr-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .pr-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .pr-icon-btn svg { width:17px; height:17px; }
        .pr-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .pr-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .pr-spacer { flex:1; }

        .pr-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; display:flex; flex-direction:column; gap:16px; }
        .pr-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .pr-section-title { font-family:'Sora',sans-serif; font-size:14.5px; font-weight:700; color:#101828; margin:4px 2px 10px; }

        /* Identity card */
        .pr-id { display:flex; align-items:center; gap:14px; padding:18px 16px; }
        .pr-avatar { width:52px; height:52px; border-radius:999px; background:#E1F5F5; color:#0B7A7A; font-family:'Sora',sans-serif; font-size:17px; font-weight:700; display:grid; place-items:center; flex-shrink:0; }
        .pr-id-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:0; }
        .pr-id-sub { font-size:12.5px; color:#667085; margin:2px 0 0; overflow:hidden; text-overflow:ellipsis; }

        /* Wallet hero */
        .pr-hero { position:relative; overflow:hidden; border-radius:14px; padding:18px 16px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 55%,#0A4F4F 100%); color:#FFFFFF; box-shadow:0 12px 30px rgba(10,79,79,.28); }
        .pr-hero-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
        .pr-hero-label { font-size:12.5px; opacity:.85; margin:0; }
        .pr-hero-amount { font-family:'Sora',sans-serif; font-size:26px; font-weight:700; letter-spacing:-.5px; margin:4px 0 0; font-variant-numeric:tabular-nums; }
        .pr-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.4px; flex-shrink:0; }
        .pr-badge.active { background:#E1F5F5; color:#0B7A7A; }
        .pr-badge.none { background:#FFFAEB; color:#B54708; }
        #account-badge { background:rgba(255,255,255,.18); color:#FFFFFF; }
        .pr-hero-note { font-size:12px; opacity:.85; line-height:1.5; margin:10px 0 0; }

        /* Security rows */
        .pr-row { display:flex; align-items:center; gap:12px; padding:14px 16px; }
        .pr-tile { width:38px; height:38px; border-radius:10px; background:#F9FAFB; border:1px solid #E6EAF0; display:grid; place-items:center; color:#475467; flex-shrink:0; }
        .pr-tile svg { width:17px; height:17px; }
        .pr-row-info { flex:1; min-width:0; }
        .pr-row-title { font-size:13.5px; font-weight:600; color:#101828; margin:0; }
        .pr-row-sub { font-size:12px; color:#667085; margin:2px 0 0; }
        .pr-pin-wrap { padding:0 16px 16px; }
        .pr-ghost { width:100%; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; font-weight:600; font-size:14px; border-radius:12px; padding:12px 16px; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
        .pr-ghost:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .pr-ghost.danger { color:#B42318; border-color:#FECDCA; background:#FEF3F2; }
        .pr-ghost.danger:hover { border-color:#B42318; background:#FEE4E2; }
        .pr-pin-form { margin-top:10px; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:12px; padding:14px; }
        .pr-field-group { margin-bottom:12px; }
        .pr-label { display:block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 6px; }
        .pr-input { width:100%; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:10px; padding:11px 12px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
        .pr-input:focus { border-color:#0B7A7A; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .pr-input::placeholder { color:#98A2B3; }
        .pr-err { font-size:12px; color:#B42318; margin:6px 0 0; }
        .pr-submit { width:100%; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:12px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .pr-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .pr-submit:disabled { opacity:.6; cursor:not-allowed; }

        @media (max-width:380px) {
          .pr-content { padding:16px 12px 28px; }
        }


/* ===== recharge-pin.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .rp-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .rp-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .rp-root *, .rp-root *::before, .rp-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .rp-root button { font-family:inherit; }

        .rp-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .rp-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .rp-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .rp-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .rp-icon-btn svg { width:17px; height:17px; }
        .rp-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .rp-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .rp-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; }
        .rp-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:6px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .rp-sec { padding:16px 0; }
        .rp-sec + .rp-sec { border-top:1px solid #F1F3F7; }
        .rp-label { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 10px; }
        .rp-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 10px; }
        .rp-label-row .rp-label { margin:0; }
        .rp-max { font-size:12px; color:#98A2B3; flex-shrink:0; }

        /* Network tiles */
        .rp-net-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
        .rp-net { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:12px; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; }
        .rp-net:active { transform:scale(.96); }
        .rp-net img { width:44px; height:44px; border-radius:999px; object-fit:cover; flex-shrink:0; }
        .rp-net span { font-size:12px; font-weight:600; color:#344054; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
        .rp-net.selected { border-color:#0B7A7A; background:#E1F5F5; }
        .rp-net.selected span { color:#0B7A7A; }

        /* Denomination cards */
        .rp-plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
        .rp-plan { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 6px 12px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:12px; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; }
        .rp-plan:active { transform:scale(.96); }
        .rp-plan-den { font-family:'Sora',sans-serif; font-size:15px; font-weight:700; color:#101828; }
        .rp-plan-price { font-size:11.5px; font-weight:600; color:#667085; }
        .rp-plan-price em { font-style:normal; font-size:10px; font-weight:400; color:#98A2B3; }
        .rp-plan.selected { border-color:#0B7A7A; background:#E1F5F5; }
        .rp-plan.selected .rp-plan-den { color:#0B7A7A; }
        .rp-plan.selected .rp-plan-price { color:#0B7A7A; }

        /* Quantity box */
        .rp-amt { display:flex; align-items:center; gap:8px; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease; }
        .rp-amt:focus-within { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .rp-amt.field-error { border-color:#B42318; }
        .rp-amt-prefix { font-family:'Sora',sans-serif; font-size:18px; font-weight:700; color:#98A2B3; flex-shrink:0; }
        .rp-amt input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'Sora',sans-serif; font-size:20px; font-weight:700; color:#101828; }
        .rp-amt input::placeholder { color:#98A2B3; }
        .rp-total-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid #F1F3F7; }
        .rp-total-label { font-size:12.5px; color:#667085; }
        .rp-total-value { font-family:'Sora',sans-serif; font-size:15px; font-weight:700; color:#0B7A7A; font-variant-numeric:tabular-nums; }

        /* PIN field */
        .rp-field { position:relative; display:flex; align-items:center; }
        .rp-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
        .rp-field-icon svg { width:16px; height:16px; }
        .rp-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .rp-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .rp-input::placeholder { color:#98A2B3; }
        .rp-input.field-error { border-color:#B42318; }
        .rp-pad-r { padding-right:44px; }
        .rp-eye { position:absolute; right:8px; display:flex; padding:6px; border:none; background:transparent; color:#98A2B3; cursor:pointer; border-radius:8px; }
        .rp-eye:hover { color:#475467; }
        .rp-eye svg { width:16px; height:16px; }

        .rp-hint { font-size:12px; color:#98A2B3; margin:8px 0 0; }
        .rp-err { font-size:12px; color:#B42318; margin:6px 0 0; }
        .rp-empty { grid-column:1/-1; text-align:center; padding:24px 12px; color:#98A2B3; font-size:13px; }

        /* Submit */
        .rp-submit { width:100%; margin-top:16px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .rp-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .rp-submit:active { transform:scale(.98); }
        .rp-submit:disabled { opacity:.6; cursor:not-allowed; }

        .rp-skel { border-radius:12px; background:linear-gradient(90deg,#EEF1F5 25%,#F7F9FB 37%,#EEF1F5 63%); background-size:400% 100%; animation:rp-pulse 1.4s ease infinite; }
        @keyframes rp-pulse { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }

        /* ---------- Light result modal (scoped overrides) ---------- */
        #result-overlay { background:rgba(16,24,40,.55); }
        #result-overlay .result-card { background:#FFFFFF; border:1px solid #E6EAF0; box-shadow:0 20px 50px rgba(16,24,40,.25); }
        #result-overlay .result-title { color:#101828; }
        #result-overlay .result-message { color:#667085; }
        #result-overlay .close-btn { color:#98A2B3; }
        #result-overlay .close-btn:hover { color:#101828; }
        #result-overlay .result-icon.success { background:#E1F5F5; color:#0B7A7A; border-color:#0B7A7A; }
        #result-overlay .result-icon.error { background:#FEF3F2; color:#B42318; border-color:#B42318; }
        #result-overlay .result-icon.pending { background:#FFFAEB; color:#B54708; border-color:#B54708; }
        #result-overlay .btn-primary { background:#0B7A7A; color:#FFFFFF; border:none; box-shadow:none; }
        #result-overlay .btn-ghost { background:#FFFFFF; color:#475467; border:1px solid #E6EAF0; }

        @media (max-width:380px) {
          .rp-content { padding:16px 12px 28px; }
          .rp-plan-grid { grid-template-columns:repeat(2,1fr); }
          .rp-net img { height:36px; }
        }


/* ===== signup.js ===== */
/* Full-viewport light surface — same shell language as the restyled login */
        .sg-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; align-items:center; justify-content:center; padding:32px 16px; -webkit-tap-highlight-color:transparent; }
        .sg-root::before { content:''; position:fixed; top:-140px; left:50%; transform:translateX(-50%); width:560px; height:340px; background:radial-gradient(closest-side, rgba(23,162,162,.16), transparent); pointer-events:none; }
        .sg-root *, .sg-root *::before, .sg-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .sg-root button { font-family:inherit; }
        .sg-root .spinner { border-color:rgba(255,255,255,.35); border-top-color:#FFFFFF; }

        .sg-wrap { position:relative; width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; }
        .sg-brand-mark img { width:100%; height:100%; object-fit:cover; display:block; }

        .sg-brand-mark {
        width: 64px;
        height: 64px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 50%;
        margin-bottom: 15px;
        border: 2px solid #128F8F;
        background: transparent;
        }

        .sg-brand-mark img {
          width: 100%;
          height: 100%;
          object-fit: contain; /* use cover if you want crop */
          display: block;
        }
        .sg-brand-mark svg { width:24px; height:24px; }

        .sg-card { width:100%; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:16px; padding:28px 24px; box-shadow:0 12px 32px rgba(16,24,40,.08); }
        .sg-title { font-family:'Sora',sans-serif; font-size:22px; font-weight:700; letter-spacing:-.3px; color:#101828; margin:0 0 6px; }
        .sg-sub { font-size:13px; color:#667085; line-height:1.5; margin:0 0 20px; }

        /* Steps head + progress */
        .sg-steps-head { display:flex; align-items:center; gap:10px; margin:0 0 18px; }
        .sg-step-label { font-family:'Sora',sans-serif; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#667085; flex-shrink:0; }
        .sg-progress { flex:1; height:4px; border-radius:999px; background:#E6EAF0; overflow:hidden; }
        .sg-progress-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#128F8F,#0B6B6B); transition:width .3s ease; }
        .sg-viewport { overflow:hidden; }
        .sg-track { display:flex; transition:transform .35s ease; }
        .sg-panel { flex:0 0 100%; min-width:100%; }

        /* Fields */
        .sg-group { margin-bottom:14px; }
        .sg-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .sg-label { display:block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 6px; }
        .sg-field { position:relative; display:flex; align-items:center; }
        .sg-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
        .sg-field-icon svg { width:16px; height:16px; }
        .sg-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .sg-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .sg-input::placeholder { color:#98A2B3; }
        .sg-input.field-error { border-color:#B42318; }
        .sg-no-icon { padding-left:12px; }
        .sg-pad-r { padding-right:44px; }
        .sg-input:-webkit-autofill,
        .sg-input:-webkit-autofill:hover,
        .sg-input:-webkit-autofill:focus {
          -webkit-text-fill-color:#101828;
          -webkit-box-shadow:0 0 0px 1000px #F9FAFB inset;
          transition:background-color 9999s ease-in-out 0s;
        }
        .sg-eye { position:absolute; right:8px; display:flex; padding:6px; border:none; background:transparent; color:#98A2B3; cursor:pointer; border-radius:8px; }
        .sg-eye:hover { color:#475467; }
        .sg-eye svg { width:16px; height:16px; }
        .sg-err { font-size:12px; color:#B42318; margin:6px 0 0; }

        /* Buttons */
        .sg-submit { width:100%; margin-top:4px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:10px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .sg-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .sg-submit:active { transform:scale(.98); }
        .sg-submit:disabled { opacity:.6; cursor:not-allowed; }
        .sg-submit svg { width:15px; height:15px; }
        .sg-ghost { width:100%; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; font-weight:600; font-size:14px; border-radius:10px; padding:12px 16px; cursor:pointer; margin-bottom:10px; transition:border-color .15s ease, color .15s ease; }
        .sg-ghost:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .sg-terms { font-size:11.5px; color:#98A2B3; text-align:center; line-height:1.5; margin:14px 0 0; }
        .sg-alt { text-align:center; font-size:13px; color:#667085; margin:18px 0 0; }
        .sg-link { color:#0B7A7A; font-weight:600; cursor:pointer; }
        .sg-link:hover { text-decoration:underline; }
        .sg-foot { font-size:11.5px; color:#98A2B3; margin:16px 0 0; text-align:center; }

        @media (max-width:380px) {
          .sg-root { padding:24px 12px; }
          .sg-card { padding:24px 18px; }
          .sg-grid2 { grid-template-columns:1fr; gap:0; }
        }


/* ===== support.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .su-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .su-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .su-root *, .su-root *::before, .su-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .su-root button { font-family:inherit; }

        .su-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .su-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .su-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .su-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .su-icon-btn svg { width:17px; height:17px; }
        .su-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .su-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .su-spacer { flex:1; }
        .su-head-tile { width:38px; height:38px; border-radius:999px; background:#E1F5F5; color:#0B7A7A; display:grid; place-items:center; flex-shrink:0; }
        .su-head-tile svg { width:18px; height:18px; }

        .su-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; display:flex; flex-direction:column; gap:14px; }

        /* Tabs */
        .su-tabs { display:flex; gap:8px; }
        .su-tab { flex:1; padding:10px 8px; border-radius:999px; border:1px solid #E6EAF0; background:#FFFFFF; color:#667085; font-size:12.5px; font-weight:600; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
        .su-tab:active { transform:scale(.97); }
        .su-tab.active { border-color:#0B7A7A; background:#E1F5F5; color:#0B7A7A; }

        /* Cards + rows */
        .su-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .su-rows { padding:4px 16px; }
        .su-row { display:flex; align-items:center; gap:12px; padding:13px 0; text-decoration:none; }
        .su-row + .su-row { border-top:1px solid #F1F3F7; }
        .su-tile { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; }
        .su-tile svg { width:16px; height:16px; }
        .su-row-info { flex:1; min-width:0; }
        .su-row-title { display:block; font-size:13.5px; font-weight:600; color:#101828; }
        .su-row-sub { display:block; font-size:12px; color:#667085; margin-top:1px; overflow:hidden; text-overflow:ellipsis; }
        .su-chev { color:#98A2B3; flex-shrink:0; display:flex; }
        .su-chev svg { width:16px; height:16px; }

        /* FAQ accordion */
        .su-faq { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:12px; padding:0 14px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .su-faq + .su-faq { margin-top:10px; }
        .su-faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 0; background:transparent; border:none; color:#101828; font-size:13.5px; font-weight:600; cursor:pointer; text-align:left; }
        .su-faq-chev { color:#667085; flex-shrink:0; transition:transform .15s ease; width:16px; height:16px; }
        .su-faq-q.open .su-faq-chev { transform:rotate(180deg); }
        .su-faq-a { font-size:12.5px; color:#667085; line-height:1.55; border-top:1px solid #F1F3F7; padding:10px 0 13px; margin:0; }

        /* Hours & office */
        .su-hours-head { display:flex; gap:12px; align-items:flex-start; padding:14px 16px 8px; }
        .su-hours-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 16px; }
        .su-hours-row:last-child { padding-bottom:14px; }
        .su-hours-day { font-size:12.5px; color:#667085; }
        .su-hours-val { font-size:12.5px; font-weight:600; color:#101828; text-align:right; }
        .su-note { font-size:12px; color:#667085; line-height:1.5; margin:0 2px; }

        @media (max-width:380px) {
          .su-content { padding:16px 12px 28px; }
          .su-tabs { gap:6px; }
          .su-tab { font-size:11.5px; padding:9px 6px; }
        }


/* ===== transaction.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .rc-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .rc-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .rc-root *, .rc-root *::before, .rc-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .rc-root button { font-family:inherit; }

        .rc-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .rc-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .rc-topbar .rc-spacer { flex:1; }
        .rc-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .rc-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .rc-icon-btn svg { width:17px; height:17px; }
        .rc-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .rc-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .rc-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; display:flex; flex-direction:column; gap:16px; }

        /* Hero */
        .rc-hero-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:24px 16px 20px; text-align:center; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .rc-hero-amount { font-family:'Sora',sans-serif; font-size:30px; font-weight:700; letter-spacing:-.5px; color:#101828; margin:0; font-variant-numeric:tabular-nums; }
        .rc-hero-sub { font-size:12.5px; color:#667085; margin:6px 0 12px; }
        .rc-status { display:inline-block; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.5px; }
        .rc-status.success { background:#E1F5F5; color:#0B7A7A; }
        .rc-status.failed { background:#FEF3F2; color:#B42318; }
        .rc-status.pending { background:#FFFAEB; color:#B54708; }

        /* Timeline */
        .rc-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:4px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .rc-card.pad { padding:16px; }
        .rc-timeline { padding:16px 0 4px; }
        .rc-step { position:relative; display:flex; gap:12px; padding-bottom:18px; }
        .rc-step::before { content:''; position:absolute; left:13px; top:30px; bottom:2px; width:2px; background:#E6EAF0; }
        .rc-step:last-child { padding-bottom:0; }
        .rc-step:last-child::before { display:none; }
        .rc-step-icon { width:28px; height:28px; border-radius:999px; display:grid; place-items:center; background:#F9FAFB; border:2px solid #E6EAF0; color:#98A2B3; flex-shrink:0; z-index:1; }
        .rc-step-icon svg { width:14px; height:14px; }
        .rc-step.done .rc-step-icon { color:#0B7A7A; border-color:#0B7A7A; background:#E1F5F5; }
        .rc-step.active .rc-step-icon { color:#B54708; border-color:#B54708; background:#FFFAEB; }
        .rc-step.failed .rc-step-icon { color:#B42318; border-color:#B42318; background:#FEF3F2; }
        .rc-step-title { margin:0; font-size:13.5px; font-weight:600; color:#101828; }
        .rc-step-time { font-size:11.5px; font-weight:400; color:#98A2B3; margin-left:6px; }
        .rc-step-sub { margin:2px 0 0; font-size:12px; color:#667085; }

        /* Detail rows */
        .rc-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; }
        .rc-row + .rc-row { border-top:1px solid #F1F3F7; }
        .rc-row-label { margin:0 0 2px; font-size:12px; color:#667085; }
        .rc-row-value { margin:0; font-size:13.5px; font-weight:600; color:#101828; font-family:'Sora',sans-serif; text-align:right; word-break:break-all; }
        .rc-copy { display:inline-flex; gap:5px; align-items:center; background:none; border:none; color:#0B7A7A; font-size:12px; font-weight:600; cursor:pointer; padding:4px 0; flex-shrink:0; }
        .rc-copy:hover { color:#0A6B6B; }
        .rc-copy svg { width:13px; height:13px; }

        /* PIN / token cards */
        .rc-date-label { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#98A2B3; margin:14px 2px 8px; }
        .rc-pin { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:12px; padding:12px 14px; margin-top:10px; }
        .rc-pin-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
        .rc-pin-badge { font-size:10.5px; font-weight:700; letter-spacing:.4px; color:#0B7A7A; background:#E1F5F5; padding:3px 8px; border-radius:999px; }
        .rc-pin-amount { font-size:12.5px; font-weight:600; color:#667085; }
        .rc-pin-value { font-family:'Sora',sans-serif; font-size:15px; font-weight:600; color:#101828; letter-spacing:.3px; word-break:break-all; margin:8px 0; }
        .rc-pin-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:8px; border-top:1px dashed #E6EAF0; }
        .rc-pin-serial { font-size:11px; color:#98A2B3; font-family:'Sora',sans-serif; }
        .rc-pin-dial { margin:6px 0 0; font-size:11px; color:#98A2B3; font-family:'Sora',sans-serif; }
        .rc-note { font-size:12px; color:#667085; line-height:1.5; margin:8px 0 0; }
        .rc-note.danger { color:#B42318; }

        /* Actions */
        .rc-section-title { font-family:'Sora',sans-serif; font-size:14.5px; font-weight:700; color:#101828; margin:4px 2px 10px; }
        .rc-action-row { display:flex; align-items:center; gap:12px; width:100%; padding:12px 0; background:transparent; border:none; cursor:pointer; text-align:left; text-decoration:none; }
        .rc-action-row + .rc-action-row { border-top:1px solid #F1F3F7; }
        .rc-action-icon { width:38px; height:38px; border-radius:10px; background:#F9FAFB; border:1px solid #E6EAF0; display:grid; place-items:center; color:#475467; flex-shrink:0; }
        .rc-action-icon svg { width:16px; height:16px; }
        .rc-action-icon.danger { color:#B42318; background:#FEF3F2; border-color:transparent; }
        .rc-action-info { flex:1; min-width:0; }
        .rc-action-title { display:block; font-size:13.5px; font-weight:600; color:#101828; }
        .rc-action-title.danger { color:#B42318; }
        .rc-action-sub { display:block; font-size:12px; color:#98A2B3; margin-top:1px; }
        .rc-action-chevron { color:#98A2B3; flex-shrink:0; }
        .rc-action-chevron svg { width:16px; height:16px; }

        /* Share */
        .rc-submit { width:100%; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .rc-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .rc-submit:active { transform:scale(.98); }
        .rc-submit svg { width:15px; height:15px; }

        .rc-empty { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; text-align:center; padding:32px 12px; color:#98A2B3; font-size:13px; }

        @media (max-width:380px) {
          .rc-content { padding:16px 12px 28px; }
        }


/* ===== transactions.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .txr-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .txr-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .txr-root *, .txr-root *::before, .txr-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .txr-root button { font-family:inherit; }

        .txr-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .txr-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .txr-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .txr-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .txr-icon-btn svg { width:17px; height:17px; }
        .txr-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .txr-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .txr-content { width:100%; max-width:560px; margin:0 auto; padding:16px 16px 32px; display:flex; flex-direction:column; gap:14px; }

        /* Search */
        .txr-search { display:flex; align-items:center; gap:10px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:12px; padding:0 14px; transition:border-color .15s ease, box-shadow .15s ease; }
        .txr-search:focus-within { border-color:#0B7A7A; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .txr-search svg { width:16px; height:16px; color:#98A2B3; flex-shrink:0; }
        .txr-search input { flex:1; min-width:0; border:none; outline:none; background:transparent; padding:12px 0; font-size:13.5px; color:#101828; }
        .txr-search input::placeholder { color:#98A2B3; }

        /* Status tabs */
        .txr-tabs { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
        .txr-tabs::-webkit-scrollbar { display:none; }
        .txr-tab { flex-shrink:0; padding:8px 16px; border-radius:999px; border:1px solid #E6EAF0; background:#FFFFFF; color:#667085; font-size:12.5px; font-weight:600; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
        .txr-tab:active { transform:scale(.97); }
        .txr-tab.active { border-color:#0B7A7A; background:#E1F5F5; color:#0B7A7A; }

        /* Date groups */
        .txr-date { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#98A2B3; margin:4px 2px 8px; }
        .txr-day { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:4px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); margin-bottom:14px; }
        .txr-row { display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
        .txr-row + .txr-row { border-top:1px solid #F1F3F7; }
        .txr-row.static { cursor:default; }
        .txr-row.disabled { opacity:.6; cursor:default; pointer-events:none; }
        .txr-icon { width:34px; height:34px; border-radius:999px; flex-shrink:0; display:grid; place-items:center; background:#F9FAFB; border:1px solid #E6EAF0; color:#667085; }
        .txr-icon svg { width:15px; height:15px; }
        .txr-icon.credit, .txr-icon.success { color:#0B7A7A; background:#E1F5F5; border-color:transparent; }
        .txr-icon.pending { color:#B54708; background:#FFFAEB; border-color:transparent; }
        .txr-icon.failed { color:#B42318; background:#FEF3F2; border-color:transparent; }
        .txr-info { flex:1; min-width:0; }
        .txr-title { margin:0; font-size:13.5px; font-weight:600; color:#101828; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .txr-sub { margin:1px 0 0; font-size:12px; color:#98A2B3; }
        .txr-amt { font-family:'Sora',sans-serif; font-size:13.5px; font-weight:600; flex-shrink:0; color:#101828; font-variant-numeric:tabular-nums; }

        /* ---------- View PIN quick action (transaction list) ---------- */
        .txr-viewpin { flex-shrink:0; background:#E8F6F4; color:#0B6B6B; border:1px solid #BFE8E3; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; cursor:pointer; white-space:nowrap; }
        .txr-viewpin:hover { background:#DCF1EE; }
        .txr-viewpin:active { transform:scale(.97); }
        .txr-amt.credit { color:#0B7A7A; }
        .txr-amt.pending { color:#B54708; }
        .txr-amt.failed { color:#B42318; }

        /* Pagination */
        .txr-pagination { display:flex; align-items:center; gap:10px; }
        .txr-pagebtn { flex:1; padding:10px 14px; border-radius:10px; border:1px solid #E6EAF0; background:#FFFFFF; color:#475467; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .txr-pagebtn:hover:not(:disabled) { border-color:#0B7A7A; color:#0B7A7A; }
        .txr-pagebtn:disabled { opacity:.5; cursor:not-allowed; }
        .txr-pageind { font-family:'Sora',sans-serif; font-size:12px; color:#667085; flex-shrink:0; }

        /* States */
        .txr-empty { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; text-align:center; padding:32px 12px; color:#98A2B3; font-size:13px; }
        .txr-empty svg { width:22px; height:22px; display:block; margin:0 auto 8px; color:#98A2B3; }
        .txr-skel-row { display:flex; align-items:center; gap:12px; padding:12px 0; }
        .txr-skel-row + .txr-skel-row { border-top:1px solid #F1F3F7; }
        .txr-skel { background:linear-gradient(90deg,#EEF1F5 25%,#F7F9FB 37%,#EEF1F5 63%); background-size:400% 100%; animation:txr-pulse 1.4s ease infinite; border-radius:8px; }
        @keyframes txr-pulse { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }

        @media (max-width:380px) {
          .txr-content { padding:12px 12px 28px; }
        }


/* ===== tv.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .tv-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .tv-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .tv-root *, .tv-root *::before, .tv-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .tv-root button { font-family:inherit; }

        .tv-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .tv-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .tv-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .tv-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .tv-icon-btn svg { width:17px; height:17px; }
        .tv-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .tv-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .tv-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; }
        .tv-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:6px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .tv-sec { padding:16px 0; }
        .tv-sec + .tv-sec { border-top:1px solid #F1F3F7; }
        .tv-label { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 10px; }

        /* Provider tiles */
        .tv-provider-grid { display:grid; grid-template-columns:repeat(3,84px); justify-content:center; gap:8px; }
        .tv-provider { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px 9px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:10px; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; }
        .tv-provider:active { transform:scale(.96); }
        .tv-provider img { width:100%; max-width:56px; height:30px; object-fit:contain; border-radius:6px; flex-shrink:0; }
        .tv-provider span { font-size:10.5px; font-weight:600; color:#344054; }
        .tv-provider.selected { border-color:#0B7A7A; background:#E1F5F5; }
        .tv-provider.selected span { color:#0B7A7A; }

        /* Plan trigger row */
        .tv-trigger { width:100%; display:flex; align-items:center; gap:10px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:10px; padding:12px; cursor:pointer; transition:border-color .15s ease; }
        .tv-trigger:hover { border-color:#0B7A7A; }
        .tv-trigger-icon { color:#98A2B3; display:flex; flex-shrink:0; }
        .tv-trigger-icon svg { width:16px; height:16px; }
        .tv-trigger-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600; color:#101828; text-align:left; }
        .tv-trigger-price { font-family:'Sora',sans-serif; font-size:13.5px; font-weight:600; color:#0B7A7A; flex-shrink:0; }
        .tv-chev { color:#98A2B3; flex-shrink:0; display:flex; }
        .tv-chev svg { width:16px; height:16px; }

        /* Fields */
        .tv-field { position:relative; display:flex; align-items:center; }
        .tv-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
        .tv-field-icon svg { width:16px; height:16px; }
        .tv-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .tv-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .tv-input::placeholder { color:#98A2B3; }
        .tv-input.field-error { border-color:#B42318; }
        .tv-pad-r { padding-right:44px; }
        .tv-eye { position:absolute; right:8px; display:flex; padding:6px; border:none; background:transparent; color:#98A2B3; cursor:pointer; border-radius:8px; }
        .tv-eye:hover { color:#475467; }
        .tv-eye svg { width:16px; height:16px; }
        /* Light re-skin of the shared status classes used by the logic */
        .meter-status-text { font-size:12px; margin-top:8px; }
        .meter-status-text.ok { color:#0B7A7A; font-weight:600; }
        .meter-status-text.checking { color:#98A2B3; }

        .tv-hint { font-size:12px; color:#98A2B3; margin:8px 0 0; }
        .tv-err { font-size:12px; color:#B42318; margin:6px 0 0; }

        /* Submit */
        .tv-submit { width:100%; margin-top:16px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .tv-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .tv-submit:active { transform:scale(.98); }
        .tv-submit:disabled { opacity:.6; cursor:not-allowed; }

        /* ---------- Manual validate button (smartcard) ---------- */
        .tv-field { gap:8px; }
        #smartcard-input { flex:1; min-width:0; }
        .tv-validate-btn { flex-shrink:0; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:13px; border:none; border-radius:10px; padding:0 16px; height:44px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 14px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; white-space:nowrap; }
        .tv-validate-btn:hover:not(:disabled) { filter:brightness(1.06); }
        .tv-validate-btn:active { transform:scale(.98); }
        .tv-validate-btn:disabled { opacity:.6; cursor:not-allowed; }

        /* ---------- Light bottom sheet (scoped overrides) ---------- */
        #tv-sheet-overlay { background:rgba(16,24,40,.5); }
        #tv-sheet { background:#FFFFFF; border:1px solid #E6EAF0; border-bottom:none; }
        #tv-sheet .sheet-handle { background:#D9E2EC; }
        #tv-sheet .sheet-close { background:#F9FAFB; border:1px solid #E6EAF0; color:#667085; }
        #tv-sheet .sheet-close:hover { border-color:#0B7A7A; color:#0B7A7A; }
        #tv-sheet .sheet-title { color:#101828; }
        #tv-sheet .sheet-option { color:#101828; border-bottom:1px solid #F1F3F7; }
        #tv-sheet .sheet-option:last-child { border-bottom:none; }
        #tv-sheet .sheet-option:active { background:#F9FAFB; }
        #tv-sheet .sheet-option .opt-price { color:#101828; }
        #tv-sheet .sheet-empty { color:#98A2B3; }

        /* ---------- Light result modal (scoped overrides) ---------- */
        #result-overlay { background:rgba(16,24,40,.55); }
        #result-overlay .result-card { background:#FFFFFF; border:1px solid #E6EAF0; box-shadow:0 20px 50px rgba(16,24,40,.25); }
        #result-overlay .result-title { color:#101828; }
        #result-overlay .result-message { color:#667085; }
        #result-overlay .close-btn { color:#98A2B3; }
        #result-overlay .close-btn:hover { color:#101828; }
        #result-overlay .result-icon.success { background:#E1F5F5; color:#0B7A7A; border-color:#0B7A7A; }
        #result-overlay .result-icon.error { background:#FEF3F2; color:#B42318; border-color:#B42318; }
        #result-overlay .result-icon.pending { background:#FFFAEB; color:#B54708; border-color:#B54708; }

        @media (max-width:380px) {
          .tv-content { padding:16px 12px 28px; }
          .tv-provider img { height:30px; }
        }


/* ===== verify.js ===== */
/* Full-viewport light surface — same shell language as login/signup */
        .vf-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; align-items:center; justify-content:center; padding:32px 16px; -webkit-tap-highlight-color:transparent; }
        .vf-root::before { content:''; position:fixed; top:-140px; left:50%; transform:translateX(-50%); width:560px; height:340px; background:radial-gradient(closest-side, rgba(23,162,162,.16), transparent); pointer-events:none; }
        .vf-root *, .vf-root *::before, .vf-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .vf-root button { font-family:inherit; }
        .vf-root .spinner { border-color:rgba(255,255,255,.35); border-top-color:#FFFFFF; }

        .vf-wrap { position:relative; width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; }
        .vf-brand-mark {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          border: 2px solid #128F8F;
          background: transparent;
          display: grid;
          place-items: center;
          margin-bottom: 15px;
          overflow: hidden;
        }
        .vf-brand-mark img { width:100%; height:100%; object-fit:contain; display:block; }
        .vf-brand-mark svg { width:24px; height:24px; }

        .vf-card { width:100%; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:16px; padding:28px 24px; box-shadow:0 12px 32px rgba(16,24,40,.08); text-align:center; }
        .vf-icon { width:44px; height:44px; border-radius:11px; background:#F4F6FA; border:1px solid #E6EAF0; display:grid; place-items:center; margin:0 auto 16px; }
        .vf-icon svg { width:20px; height:20px; color:#17A2A2; }

        .vf-title { font-family:'Sora',sans-serif; font-size:22px; font-weight:700; letter-spacing:-.3px; color:#101828; margin:0 0 6px; }
        .vf-sub { font-size:13px; color:#667085; line-height:1.5; margin:0 0 22px; }
        .vf-sub b { color:#101828; font-weight:600; }

        .vf-code-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:8px; }
        .vf-code-input { width:100%; aspect-ratio:1; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; font-size:20px; font-weight:700; text-align:center; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .vf-code-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .vf-code-input.field-error { border-color:#B42318; }
        .vf-err { font-size:12px; color:#B42318; margin:4px 0 0; text-align:center; }

        .vf-submit { width:100%; margin-top:18px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:10px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .vf-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .vf-submit:active { transform:scale(.98); }
        .vf-submit:disabled { opacity:.6; cursor:not-allowed; }

        .vf-resend { text-align:center; font-size:13.5px; color:#667085; margin:18px 0 0; }
        .vf-link { color:#0B7A7A; font-weight:600; cursor:pointer; }
        .vf-link:hover { text-decoration:underline; }
        .vf-link[data-disabled="true"] { opacity:.5; pointer-events:none; }
        .vf-alt { text-align:center; font-size:13px; color:#667085; margin:14px 0 0; }
        .vf-foot { font-size:11.5px; color:#98A2B3; margin:16px 0 0; text-align:center; }

        @media (max-width:380px) {
          .vf-card { padding:24px 18px; }
          .vf-root { padding:24px 12px; }
          .vf-code-input { font-size:17px; }
        }


/* ===== withdraw.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .wd-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .wd-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .wd-root *, .wd-root *::before, .wd-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .wd-root button { font-family:inherit; }

        .wd-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .wd-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .wd-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .wd-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .wd-icon-btn svg { width:17px; height:17px; }
        .wd-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .wd-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .wd-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; }
        .wd-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:6px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .wd-sec { padding:16px 0; }
        .wd-sec + .wd-sec { border-top:1px solid #F1F3F7; }
        .wd-label { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#667085; margin:0 0 10px; }

        /* Bank trigger row */
        .wd-trigger { width:100%; display:flex; align-items:center; gap:10px; background:#FFFFFF; border:1px solid #E6EAF0; border-radius:10px; padding:12px; cursor:pointer; transition:border-color .15s ease; }
        .wd-trigger:hover { border-color:#0B7A7A; }
        .wd-trigger-icon { color:#98A2B3; display:flex; flex-shrink:0; }
        .wd-trigger-icon svg { width:16px; height:16px; }
        .wd-trigger-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600; color:#101828; text-align:left; }
        .wd-chev { color:#98A2B3; flex-shrink:0; display:flex; }
        .wd-chev svg { width:16px; height:16px; }

        /* Fields */
        .wd-field { position:relative; display:flex; align-items:center; }
        .wd-field-icon { position:absolute; left:12px; color:#98A2B3; display:flex; pointer-events:none; }
        .wd-field-icon svg { width:16px; height:16px; }
        .wd-input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:12px 12px 12px 38px; font-size:14px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .wd-input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .wd-input::placeholder { color:#98A2B3; }
        .wd-input.field-error { border-color:#B42318; }

        /* Amount box */
        .wd-amt { display:flex; align-items:center; gap:8px; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease; }
        .wd-amt:focus-within { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .wd-amt.field-error { border-color:#B42318; }
        .wd-amt-prefix { font-family:'Sora',sans-serif; font-size:18px; font-weight:700; color:#98A2B3; flex-shrink:0; }
        .wd-amt input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'Sora',sans-serif; font-size:20px; font-weight:700; color:#101828; }
        .wd-amt input::placeholder { color:#98A2B3; }

        /* Light re-skin of the shared resolve-status classes */
        .meter-status-text { font-size:12px; margin-top:8px; }
        .meter-status-text.ok { color:#0B7A7A; font-weight:600; }
        .meter-status-text.checking { color:#98A2B3; }

        .wd-err { font-size:12px; color:#B42318; margin:6px 0 0; }

        /* Submit */
        .wd-submit { width:100%; margin-top:16px; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .wd-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .wd-submit:active { transform:scale(.98); }
        .wd-submit:disabled { opacity:.6; cursor:not-allowed; }
        .wd-submit svg { width:16px; height:16px; }

        /* ---------- Light bottom sheet (scoped overrides) ---------- */
        #wd-sheet-overlay { background:rgba(16,24,40,.5); }
        #wd-sheet { background:#FFFFFF; border:1px solid #E6EAF0; border-bottom:none; }
        #wd-sheet .sheet-handle { background:#D9E2EC; }
        #wd-sheet .sheet-close { background:#F9FAFB; border:1px solid #E6EAF0; color:#667085; }
        #wd-sheet .sheet-close:hover { border-color:#0B7A7A; color:#0B7A7A; }
        #wd-sheet .sheet-title { color:#101828; }
        #wd-sheet .sheet-option { color:#101828; border-bottom:1px solid #F1F3F7; }
        #wd-sheet .sheet-option:last-child { border-bottom:none; }
        #wd-sheet .sheet-option:active { background:#F9FAFB; }
        #wd-sheet .sheet-empty { color:#98A2B3; }
        .wd-sheet-search { position:relative; display:flex; align-items:center; margin:0 2px 10px; }
        .wd-sheet-search svg { position:absolute; left:12px; width:14px; height:14px; color:#98A2B3; pointer-events:none; }
        .wd-sheet-search input { width:100%; background:#F9FAFB; border:1px solid #E6EAF0; border-radius:10px; padding:10px 12px 10px 34px; font-size:13px; color:#101828; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
        .wd-sheet-search input:focus { border-color:#0B7A7A; background:#FFFFFF; box-shadow:0 0 0 3px rgba(11,122,122,.12); }
        .wd-sheet-search input::placeholder { color:#98A2B3; }

        @media (max-width:380px) {
          .wd-content { padding:16px 12px 28px; }
        }


/* ===== withdrawal-detail.js ===== */
/* Full-viewport fixed surface — same shell language as the dashboard */
        .wdx-root { position:fixed; inset:0; z-index:95; background:#F4F6FA; color:#101828; font-family:'Inter',ui-sans-serif,system-ui; overflow:hidden; display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
        body.has-bottom-nav .wdx-root { bottom:calc(76px + env(safe-area-inset-bottom)); }
        .wdx-root *, .wdx-root *::before, .wdx-root *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        .wdx-root button { font-family:inherit; }

        .wdx-main { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; }
        .wdx-topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #E6EAF0; }
        .wdx-icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#FFFFFF; border:1px solid #E6EAF0; color:#475467; display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
        .wdx-icon-btn:hover { border-color:#0B7A7A; color:#0B7A7A; }
        .wdx-icon-btn svg { width:17px; height:17px; }
        .wdx-greet { font-size:11.5px; color:#667085; margin:0; white-space:nowrap; }
        .wdx-name { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:#101828; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .wdx-content { width:100%; max-width:560px; margin:0 auto; padding:20px 16px 32px; display:flex; flex-direction:column; gap:16px; }

        /* Hero */
        .wdx-hero-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:24px 16px 20px; text-align:center; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .wdx-hero-amount { font-family:'Sora',sans-serif; font-size:30px; font-weight:700; letter-spacing:-.5px; color:#101828; margin:0; font-variant-numeric:tabular-nums; }
        .wdx-hero-sub { font-size:12.5px; color:#667085; margin:6px 0 12px; }
        .wdx-status { display:inline-block; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.5px; }
        .wdx-status.success { background:#E1F5F5; color:#0B7A7A; }
        .wdx-status.failed { background:#FEF3F2; color:#B42318; }
        .wdx-status.pending { background:#FFFAEB; color:#B54708; }

        /* Cards + rows */
        .wdx-card { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; padding:4px 16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
        .wdx-row { display:flex; align-items:center; gap:10px; padding:11px 0; }
        .wdx-row + .wdx-row { border-top:1px solid #F1F3F7; }
        .wdx-row-main { flex:1; min-width:0; }
        .wdx-row-label { margin:0 0 2px; font-size:12px; color:#667085; }
        .wdx-row-value { margin:0; font-size:13.5px; font-weight:600; color:#101828; font-family:'Sora',sans-serif; text-align:left; word-break:break-all; }
        .wdx-copy { display:inline-flex; gap:5px; align-items:center; background:none; border:none; color:#0B7A7A; font-size:12px; font-weight:600; cursor:pointer; padding:4px 0; flex-shrink:0; }
        .wdx-copy:hover { color:#0A6B6B; }
        .wdx-copy svg { width:13px; height:13px; }

        /* Timeline — title left, time in a fixed right column */
        .wdx-timeline { padding:16px 0 4px; }
        .wdx-step { position:relative; display:flex; gap:12px; padding-bottom:18px; }
        .wdx-step::before { content:''; position:absolute; left:13px; top:30px; bottom:2px; width:2px; background:#E6EAF0; }
        .wdx-step:last-child { padding-bottom:0; }
        .wdx-step:last-child::before { display:none; }
        .wdx-step-icon { width:28px; height:28px; border-radius:999px; display:grid; place-items:center; background:#F9FAFB; border:2px solid #E6EAF0; color:#98A2B3; flex-shrink:0; z-index:1; }
        .wdx-step-icon svg { width:14px; height:14px; }
        .wdx-step.done .wdx-step-icon { color:#0B7A7A; border-color:#0B7A7A; background:#E1F5F5; }
        .wdx-step.active .wdx-step-icon { color:#B54708; border-color:#B54708; background:#FFFAEB; }
        .wdx-step.failed .wdx-step-icon { color:#B42318; border-color:#B42318; background:#FEF3F2; }
        .wdx-step-body { flex:1; min-width:0; }
        .wdx-step-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0; }
        .wdx-step-title { font-size:13.5px; font-weight:600; color:#101828; }
        .wdx-step-time { font-size:11.5px; color:#98A2B3; flex-shrink:0; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
        .wdx-step-sub { margin:2px 0 0; font-size:12px; color:#667085; }

        /* Actions + share */
        .wdx-section-title { font-family:'Sora',sans-serif; font-size:14.5px; font-weight:700; color:#101828; margin:4px 2px 10px; }
        .wdx-action-row { display:flex; align-items:center; gap:12px; width:100%; padding:12px 0; background:transparent; border:none; cursor:pointer; text-align:left; text-decoration:none; }
        .wdx-action-row + .wdx-action-row { border-top:1px solid #F1F3F7; }
        .wdx-action-icon { width:38px; height:38px; border-radius:10px; background:#F9FAFB; border:1px solid #E6EAF0; display:grid; place-items:center; color:#475467; flex-shrink:0; }
        .wdx-action-icon svg { width:16px; height:16px; }
        .wdx-action-icon.danger { color:#B42318; background:#FEF3F2; border-color:transparent; }
        .wdx-action-info { flex:1; min-width:0; }
        .wdx-action-title { display:block; font-size:13.5px; font-weight:600; color:#101828; }
        .wdx-action-title.danger { color:#B42318; }
        .wdx-action-sub { display:block; font-size:12px; color:#98A2B3; margin-top:1px; }
        .wdx-action-chevron { color:#98A2B3; flex-shrink:0; }
        .wdx-action-chevron svg { width:16px; height:16px; }
        .wdx-submit { width:100%; background:linear-gradient(135deg,#128F8F 0%,#0B6B6B 100%); color:#FFFFFF; font-weight:700; font-size:14.5px; border:none; border-radius:12px; padding:13px 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(11,107,107,.25); transition:filter .15s ease, transform .15s ease; }
        .wdx-submit:hover:not(:disabled) { filter:brightness(1.06); }
        .wdx-submit:active { transform:scale(.98); }
        .wdx-submit svg { width:15px; height:15px; }


        .sg-ref-banner {
          font-size: 12.5px;
          color: #12855C;
          background: #E7F8F0;
          border: 1px solid #C3EFD9;
          border-radius: 8px;
          padding: 8px 12px;
          margin: 0 0 14px;
        }

        /* ---------- Invite & earn ---------- */
.pr-ref-card {
  background: #FFFFFF;
  border: 1px solid #E6EAF0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pr-ref-intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #667085;
}

.pr-ref-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pr-ref-code-box {
  flex: 1;
  min-width: 0;
  background: #E1F5F5;
  border: 1.5px dashed #0B7A7A;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'Sora', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #0A4F4F;
  text-align: center;
}

.pr-ref-link-input {
  flex: 1;
  min-width: 0;
  background: #F9FAFB;
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #475467;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
}

.pr-ref-copy-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  color: #475467;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pr-ref-copy-btn:hover {
  border-color: #0B7A7A;
  color: #0B7A7A;
  background: #E1F5F5;
}
.pr-ref-copy-btn svg {
  width: 16px;
  height: 16px;
}

.pr-ref-card .pr-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #128F8F 0%, #0B6B6B 55%, #0A4F4F 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease;
  box-shadow: 0 8px 20px rgba(10, 79, 79, .24);
}
.pr-ref-card .pr-ghost:hover {
  filter: brightness(1.06);
}
.pr-ref-card .pr-ghost svg {
  width: 16px;
  height: 16px;
}

.dd-svc-sub {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  opacity: .65;
  margin-top: 2px;
  font-weight: 400;
}

/* Google sign-in (login + signup) */
.auth-google-wrap { margin: 0 0 4px; }
.google-slot { display: flex; justify-content: center; min-height: 44px; }
.auth-google-wrap .sg-terms { margin: 10px 0 0; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 18px;
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: #98A2B3;
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: #E6EAF0; }

@media (max-width: 380px) {
  .pr-ref-code-box {
    font-size: 15px;
    letter-spacing: 2px;
  }
}

.wdx-empty { background:#FFFFFF; border:1px solid #E6EAF0; border-radius:14px; text-align:center; padding:32px 12px; color:#98A2B3; font-size:13px; }

@media (max-width:380px) {
  .wdx-content { padding:16px 12px 28px; }
}