:root{--bg:#171520;--card:#171422;--card-border:#312f3a;--inner:#12101b;--divider:#312f3a;--muted:#a9b0c2;--white:#fff;--blue:#257af0;--blue-btn:#1873f8;--blue-soft:#6daaff;--blue-glow:#257af01a}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{background:var(--bg);min-height:100vh;color:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,Tajawal,system-ui,sans-serif}img{display:block}button{font-family:inherit}.mexem-screen,.status-screen{justify-content:center;align-items:flex-start;min-height:100vh;display:flex}.phone{width:100%;max-width:460px;padding:26px 16px calc(28px + env(safe-area-inset-bottom));flex-direction:column;display:flex}.topbar{direction:ltr;justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.menu-btn{cursor:pointer;background:0 0;border:0;align-items:center;padding:4px;display:flex}.menu-icon{width:24px;height:auto}.logo{width:150px;height:auto}.topbar-spacer{width:32px}.intro{text-align:center;margin-bottom:24px}.title{color:var(--white);font-family:Tajawal,Roboto,sans-serif;font-size:34px;font-weight:700;line-height:1.15}.subtitle{color:var(--muted);margin-top:14px;font-family:Tajawal,Roboto,sans-serif;font-size:16px;font-weight:400}.card{background:var(--card);border:1.5px solid var(--card-border);border-radius:17px;padding:18px}.card+.card{margin-top:15px}.card-title{color:var(--muted);text-align:right;font-family:Tajawal,Roboto,sans-serif;font-size:16px;font-weight:600}.summary{padding:6px 18px 18px}.sum-row{border-bottom:1px solid var(--divider);justify-content:space-between;align-items:center;gap:10px;padding:16px 4px;display:flex}.sum-row--last{border-bottom:0}.sum-label{color:var(--muted);font-family:Tajawal,Roboto,sans-serif;font-size:16px;font-weight:400}.amount{color:var(--white);letter-spacing:.2px;text-align:left;direction:ltr;font-family:Roboto,sans-serif;font-size:23px;font-weight:500}.total{background:var(--blue-glow);border:2px solid var(--blue);border-radius:14px;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding:16px 18px;display:flex}.total-label{color:var(--blue-soft);font-family:Tajawal,Roboto,sans-serif;font-size:16px;font-weight:400}.total-amount{color:var(--blue);letter-spacing:.5px;text-align:left;direction:ltr;font-family:Roboto,sans-serif;font-size:34px;font-weight:500;line-height:1}.method{background:var(--inner);border:2px solid var(--card-border);cursor:pointer;border-radius:14px;justify-content:space-between;align-items:center;gap:10px;width:100%;margin-top:16px;padding:16px 18px;transition:border-color .15s,transform 80ms;display:flex}.method:active{transform:scale(.99)}.method-label{color:var(--muted);font-family:Tajawal,Roboto,sans-serif;font-size:17px;font-weight:400}.method-main{direction:ltr;align-items:center;gap:16px;display:inline-flex}.method-chevron{opacity:.9;width:9px;height:auto;transform:scaleX(-1)}.method-bank{width:30px;height:auto}.method-acct{color:var(--white);font-family:Roboto,sans-serif;font-size:18px;font-weight:400}.note-list{flex-direction:column;gap:18px;margin-top:16px;list-style:none;display:flex}.note-item{align-items:flex-start;gap:12px;display:flex}.note-check{flex-shrink:0;width:20px;height:20px;margin-top:1px}.note-text{color:var(--muted);text-align:right;font-family:Tajawal,Roboto,sans-serif;font-size:15px;font-weight:400;line-height:1.5}.note-link{color:var(--blue);text-decoration:none}.note-link:hover{text-decoration:underline}.pay-btn{background:var(--blue-btn);width:100%;height:62px;color:var(--white);cursor:pointer;border:0;border-radius:16px;justify-content:center;align-items:center;gap:12px;margin-top:22px;font-family:Tajawal,Roboto,sans-serif;font-size:22px;font-weight:700;transition:background .15s,transform 80ms;display:flex}.pay-btn:hover{background:#2a80ff}.pay-btn:active{transform:scale(.99)}.secure{text-align:center;color:var(--muted);margin-top:18px;font-family:Tajawal,Roboto,sans-serif;font-size:12px;font-weight:400}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#17152099;justify-content:center;align-items:center;padding:20px;animation:.2s both overlay-in;display:flex;position:fixed;inset:0}.modal{background:var(--inner);border:2px solid var(--blue);text-align:center;border-radius:20px;flex-direction:column;align-items:center;width:100%;max-width:360px;padding:30px 26px 22px;animation:.25s cubic-bezier(.2,.9,.3,1.2) both modal-in;display:flex}.modal:focus{outline:none}.modal-icon{width:66px;height:66px;margin-bottom:18px}.modal-title{color:var(--white);margin-bottom:14px;font-family:Tajawal,Roboto,sans-serif;font-size:27px;font-weight:700}.modal-text{color:var(--muted);margin-bottom:26px;font-family:Tajawal,Roboto,sans-serif;font-size:16px;font-weight:500;line-height:1.6}.modal-pay{background:var(--blue-btn);width:100%;height:54px;color:var(--white);cursor:pointer;border:0;border-radius:14px;justify-content:center;align-items:center;gap:10px;font-family:Tajawal,Roboto,sans-serif;font-size:18px;font-weight:700;transition:background .15s,transform 80ms;display:flex}.modal-pay:hover{background:#2a80ff}.modal-pay:active{transform:scale(.99)}.modal-close{cursor:pointer;color:var(--blue-btn);background:0 0;border:0;margin-top:18px;font-family:Tajawal,Roboto,sans-serif;font-size:16px;font-weight:400}.modal-close:hover{text-decoration:underline}.req-sheet{background:var(--inner);border:2px solid var(--blue);border-radius:20px;flex-direction:column;align-items:center;width:100%;max-width:400px;padding:30px 24px 24px;animation:.25s cubic-bezier(.2,.9,.3,1.2) both modal-in;display:flex;position:relative}.req-sheet:focus{outline:none}.req-close{cursor:pointer;background:#ffffff0d;border:0;border-radius:10px;width:34px;height:34px;position:absolute;top:14px;left:14px}.req-close:before,.req-close:after{content:"";background:var(--muted);border-radius:2px;width:15px;height:2px;position:absolute;top:50%;left:50%}.req-close:before{transform:translate(-50%,-50%)rotate(45deg)}.req-close:after{transform:translate(-50%,-50%)rotate(-45deg)}.req-close:hover:before,.req-close:hover:after{background:var(--white)}.req-logo{width:132px;height:auto;margin-bottom:16px}.req-title{color:var(--white);text-align:center;font-family:Tajawal,Roboto,sans-serif;font-size:24px;font-weight:700}.req-subtitle{color:var(--muted);text-align:center;margin-top:8px;font-family:Tajawal,Roboto,sans-serif;font-size:15px;font-weight:400;line-height:1.5}.req-timer{background:var(--blue-glow);border:1px solid var(--blue);color:var(--blue-soft);direction:ltr;border-radius:999px;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;font-family:Tajawal,Roboto,sans-serif;font-size:14px;font-weight:500;display:inline-flex}.req-timer-dot{background:var(--blue);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite pulse}.req-list{flex-direction:column;gap:12px;width:100%;margin-top:22px;display:flex}.req-row{background:var(--card);border:1.5px solid var(--card-border);border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.req-field{flex:1;min-width:0}.req-field dt{color:var(--muted);margin-bottom:4px;font-family:Tajawal,Roboto,sans-serif;font-size:13px;font-weight:400}.req-field dd{color:var(--white);word-break:break-word;font-family:Roboto,sans-serif;font-size:17px;font-weight:500}.req-copy{background:var(--inner);border:0;border:1.5px solid var(--card-border);cursor:pointer;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;transition:border-color .15s,background .15s;display:flex}.req-copy:hover{border-color:var(--blue)}.req-copy.is-copied{border-color:var(--blue);background:var(--blue-glow)}.req-copy-icon{width:22px;height:22px}.req-done{background:var(--blue-btn);width:100%;height:54px;color:var(--white);cursor:pointer;border:0;border-radius:14px;margin-top:22px;font-family:Tajawal,Roboto,sans-serif;font-size:18px;font-weight:700;transition:background .15s,transform 80ms}.req-done:hover{background:#2a80ff}.req-done:active{transform:scale(.99)}.status-screen{align-items:stretch}.status-phone{min-height:100vh}.status-topbar{justify-content:center}.status-body{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:22px;padding-bottom:60px;display:flex}.status-icon{width:72px;height:72px}.status-spinner{border:4px solid #257af040;border-top-color:var(--blue);border-radius:50%;width:54px;height:54px;animation:.8s linear infinite spin}.status-text h1{color:var(--white);font-family:Tajawal,Roboto,sans-serif;font-size:26px;font-weight:700;line-height:1.25}.status-text p{color:var(--muted);margin-top:12px;font-family:Tajawal,Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.5}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@media (width<=360px){.title,.total-amount{font-size:30px}.modal-title{font-size:24px}}@media (width>=768px){body{background:radial-gradient(1100px 560px at 50% -12%, #257af01a, transparent 62%), var(--inner)}.mexem-screen,.status-screen{align-items:center;padding:44px 24px}.phone{background:var(--bg);border:1px solid #262330;border-radius:28px;max-width:500px;padding:36px 34px 30px;box-shadow:0 30px 90px #00000080}.topbar{margin-bottom:34px}.title{font-size:32px}.card{padding:20px 22px}.summary{padding:8px 22px 20px}.method:hover{border-color:var(--blue)}.status-phone{background:var(--bg);min-height:auto}.status-body{min-height:340px;padding:34px 0 14px}}