:root{--bg:#070912;--panel:#111624;--panel2:#171d2d;--text:#f7f8ff;--muted:#929aae;--line:rgba(255,255,255,.09);--mint:#65ddb5;--blue:#76a9ff;--violet:#8b73ff;--danger:#ff7083;--safe:env(safe-area-inset-bottom,0px);color-scheme:dark}html[data-theme=light]{--bg:#f3f6fc;--panel:#fff;--panel2:#f5f7fb;--text:#101727;--muted:#687084;--line:rgba(17,27,48,.11);--mint:#20b887;--blue:#4e7df0;--violet:#735ce0;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text)}body{overflow-x:hidden;background:radial-gradient(circle at 90% 0,rgba(101,221,181,.13),transparent 34%),radial-gradient(circle at 0 35%,rgba(139,115,255,.12),transparent 30%),var(--bg);transition:.4s}.stars{position:fixed;inset:0;overflow:hidden;pointer-events:none}.stars i{position:absolute;top:-10%;width:2px;height:2px;border-radius:50%;background:var(--text);opacity:.22;box-shadow:80px 140px var(--text),190px 320px var(--text),310px 80px var(--text),450px 240px var(--text),560px 410px var(--text),40px 620px var(--text),270px 730px var(--text);animation:fall 18s linear infinite}.stars i:nth-child(2){left:35%;animation-duration:24s;animation-delay:-8s}.stars i:nth-child(3){left:74%;animation-duration:29s;animation-delay:-17s}@keyframes fall{to{transform:translate3d(-80px,115vh,0)}}button,input,select{font:inherit;color:inherit}.gate{position:fixed;inset:0;display:grid;place-items:center;padding:22px;z-index:50;background:var(--bg)}.gate-card{width:min(390px,100%);padding:30px;border:1px solid var(--line);border-radius:28px;background:var(--panel);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.22)}.gate-card img{width:78px;height:78px;border-radius:50%;object-fit:cover}.gate-card>span,.page-title>span,.hero>span,.ref-card>span,.modal section>span{display:block;margin-top:16px;color:var(--mint);font-size:10px;font-weight:800;letter-spacing:2px}.gate-card h1{font-size:26px;margin:8px 0}.gate-card p{color:var(--muted);font-size:13px}.gate-card a{display:block;margin-top:15px;color:var(--muted);font-size:12px;text-decoration:none}.loader{display:block;width:25px;height:25px;margin:18px auto;border:2px solid var(--line);border-top-color:var(--mint);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app{position:relative;z-index:1;max-width:640px;min-height:100vh;margin:auto;padding-bottom:calc(88px + var(--safe))}header{height:72px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;background:linear-gradient(180deg,var(--bg) 35%,transparent);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;border:0;background:none;padding:0;text-align:left}.brand img{width:43px;height:43px;border-radius:50%;object-fit:cover}.brand span{display:grid;margin-left:10px}.brand b{font-size:16px}.brand small{font-size:9px;color:var(--muted)}.header-actions{display:flex;gap:8px}.round,.topup{height:38px;border:1px solid var(--line);background:var(--panel);border-radius:12px}.round{width:38px;border-radius:50%}.topup{padding:0 13px;color:var(--mint);font-size:11px;font-weight:800}main{padding:4px 16px}.view{display:none;animation:page .25s ease}.view.active{display:block}@keyframes page{from{opacity:0;transform:translateY(8px)}}.balance-card{position:relative;overflow:hidden;padding:20px;border:1px solid rgba(101,221,181,.22);border-radius:24px;background:linear-gradient(135deg,rgba(24,54,61,.96),rgba(27,27,55,.96));display:flex;align-items:flex-end;justify-content:space-between;box-shadow:0 22px 65px rgba(0,0,0,.2)}html[data-theme=light] .balance-card{background:linear-gradient(135deg,#e0f9f0,#eeebff)}.balance-card small{font-size:11px;color:var(--muted)}.balance-card h1{font-size:36px;margin:5px 0;letter-spacing:-1.5px}.balance-card h1 em{font-size:12px;font-style:normal;color:var(--mint)}.balance-card p{margin:0;color:var(--muted);font-size:11px}.balance-card button,.ref-card button{border:0;border-radius:11px;background:rgba(101,221,181,.12);color:var(--mint);font-size:10px;font-weight:800;padding:10px}.hero{padding:28px 4px 18px}.hero h2,.page-title h1{font-size:29px;letter-spacing:-1px;margin:7px 0}.hero p,.page-title p{font-size:12px;line-height:1.55;color:var(--muted);margin:0}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-grid button{min-height:115px;padding:15px;border:1px solid var(--line);border-radius:20px;background:rgba(17,22,36,.86);display:grid;text-align:left}.quick-grid span{font-size:22px;color:var(--mint)}.quick-grid b{align-self:end;font-size:13px}.quick-grid small{color:var(--muted);font-size:9px}.section-title{font-size:14px;margin:24px 3px 11px}.list{display:grid;gap:8px}.list article{padding:13px 14px;border:1px solid var(--line);background:var(--panel);border-radius:16px;display:flex;gap:11px;align-items:center}.list article>span{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(101,221,181,.1);color:var(--mint)}.list article div{display:grid;flex:1;min-width:0}.list b{font-size:11px}.list small{font-size:9px;color:var(--muted);margin-top:3px}.list em{font-size:10px;font-style:normal;color:var(--mint)}.page-title{padding:18px 3px 20px}.services{display:grid;gap:9px}.service{padding:14px;border:1px solid var(--line);background:var(--panel);border-radius:19px;display:flex;align-items:center;gap:12px}.service-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--mint),var(--violet));color:#07121a;font-weight:900}.service div{display:grid;flex:1}.service b{font-size:13px}.service small{font-size:9px;color:var(--muted);margin-top:3px}.service em{font-size:9px;font-style:normal;padding:6px 8px;border-radius:8px}.status-online{color:var(--mint);background:rgba(101,221,181,.1)}.status-development,.status-maintenance{color:#ffc861;background:rgba(255,200,97,.1)}.status-offline{color:var(--danger);background:rgba(255,112,131,.1)}.wallet-total,.profile-card,.ref-card,.settings,.payment-note{border:1px solid var(--line);border-radius:21px;background:var(--panel);overflow:hidden}.wallet-total{padding:18px}.wallet-total small{color:var(--muted);font-size:10px}.wallet-total h2{font-size:28px;margin:5px 0 15px}.wallet-total>div{display:flex;gap:8px}.wallet-total>div span{flex:1;padding:10px;border-radius:12px;background:var(--panel2);display:grid;font-size:9px;color:var(--muted)}.wallet-total>div b{margin-top:3px;color:var(--text);font-size:12px}.packages{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.package{padding:15px;border:1px solid var(--line);border-radius:18px;background:var(--panel);text-align:left}.package b,.package strong{display:block}.package b{font-size:13px}.package small{display:block;color:var(--muted);font-size:9px;margin:4px 0 12px}.package strong{font-size:19px;color:var(--mint)}.package em{font-size:9px;font-style:normal;color:var(--violet)}.custom-amount{min-height:65px;padding:12px 14px;border:1px solid var(--line);border-radius:17px;background:var(--panel);display:flex;align-items:center;justify-content:space-between}.custom-amount span{display:grid}.custom-amount b{font-size:12px}.custom-amount small{font-size:9px;color:var(--muted)}.custom-amount input{width:120px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);text-align:right;outline:0}.primary,.secondary{width:100%;height:50px;border:0;border-radius:15px;font-weight:800}.primary{margin-top:10px;background:linear-gradient(135deg,var(--mint),var(--blue));color:#07131a}.secondary{margin-top:12px;background:var(--panel);border:1px solid var(--line);color:var(--text)}.payment-note{padding:15px;margin-top:12px}.payment-note b{font-size:12px}.payment-note p{font-size:10px;color:var(--muted);line-height:1.5}.payment-note a{font-size:10px;color:var(--mint);text-decoration:none}.profile-hero{text-align:center;padding:18px 0}.profile-hero>div{width:78px;height:78px;border-radius:50%;margin:auto;display:grid;place-items:center;background:linear-gradient(135deg,var(--mint),var(--violet));color:#07121a;font-size:27px;font-weight:900}.profile-hero h1{font-size:23px;margin:11px 0 2px}.profile-hero p{font-size:11px;color:var(--muted);margin:0}.profile-hero span{font-size:9px;color:var(--mint)}.profile-card div{min-height:57px;padding:12px 14px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px}.profile-card div:last-child{border:0}.profile-card small{font-size:9px;color:var(--muted)}.profile-card b{font-size:11px}.profile-card button{border:0;background:none;color:var(--mint);font-size:9px}.ref-card{padding:17px;margin-top:12px}.ref-card h2{font-size:22px;margin:7px 0}.ref-card p{font-size:10px;color:var(--muted)}.ref-card div{display:flex;gap:8px}.ref-card button{flex:1}.settings{margin-top:12px}.settings label{min-height:66px;padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.settings label:last-child{border:0}.settings label span{display:grid}.settings b{font-size:12px}.settings small{font-size:9px;color:var(--muted)}.settings select{padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}nav{position:fixed;z-index:15;bottom:0;left:50%;transform:translateX(-50%);width:min(640px,100%);height:calc(70px + var(--safe));padding:7px 9px var(--safe);display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--bg) 92%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(18px)}nav button{border:0;background:none;color:var(--muted);display:grid;place-items:center;align-content:center;gap:3px}nav button span{font-size:17px}nav button small{font-size:9px}nav button.active{color:var(--mint)}.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(5px)}.modal section{position:relative;width:min(640px,100%);padding:24px 20px calc(22px + var(--safe));border-radius:26px 26px 0 0;background:var(--panel);border:1px solid var(--line)}.modal h2{font-size:22px;margin:6px 0}.modal p{font-size:11px;color:var(--muted)}.modal input{width:100%;height:50px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);outline:0;text-transform:uppercase}.close{position:absolute;right:18px;top:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel2)}.toast{position:fixed;z-index:60;left:50%;bottom:calc(83px + var(--safe));transform:translate(-50%,18px);padding:12px 16px;min-width:220px;max-width:calc(100% - 32px);border-radius:13px;background:#e8faf4;color:#092019;text-align:center;font-size:11px;font-weight:800;opacity:0;pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#ffe8ec;color:#4c101b}@media(min-width:560px){main{padding:4px 22px}.quick-grid{grid-template-columns:repeat(4,1fr)}.packages{grid-template-columns:repeat(3,1fr)}}