:root{
  --bg:#060811;--panel:#0d1120;--panel2:#111729;--line:rgba(145,120,255,.22);
  --violet:#8b6cff;--violet2:#5e46ff;--cyan:#36d9ff;--text:#f5f7ff;--muted:#8992aa;
  --success:#57e69b;--danger:#ff6688;--radius:22px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}
body{overflow-x:hidden}button,input{font:inherit}button{color:inherit;cursor:pointer}
.ambient{position:fixed;width:360px;height:360px;border-radius:50%;filter:blur(110px);opacity:.12;pointer-events:none}.ambient-a{background:#775cff;top:-160px;right:-140px}.ambient-b{background:#00b7ff;bottom:60px;left:-230px}
.app-shell{width:min(100%,520px);min-height:100vh;margin:auto;padding:14px 16px 104px;position:relative}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:42px;height:42px;border:1px solid #765cff;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#151b39,#080b14);font-weight:800;font-size:20px;box-shadow:0 0 28px rgba(110,81,255,.3)}
.brand-name{font-size:15px;font-weight:800;letter-spacing:.8px}.brand-name span{color:#9b85ff}.brand-status{font-size:9px;color:#6f7890;margin-top:3px}.brand-status i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);margin-right:4px}
.icon-btn,.back{border:1px solid var(--line);background:rgba(15,18,32,.7);width:42px;height:42px;border-radius:14px}.icon-btn{font-size:21px}.back{font-size:29px;line-height:1}
.screen{display:none;animation:appear .22s ease}.screen.active{display:block}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.hero-card{position:relative;min-height:190px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:radial-gradient(circle at 78% 48%,rgba(103,78,255,.22),transparent 35%),linear-gradient(135deg,#11162a,#090c17);padding:25px 21px;margin-bottom:12px}
.hero-glow{position:absolute;width:170px;height:170px;border-radius:50%;right:0;top:8px;background:#755bff;filter:blur(70px);opacity:.18}.hero-copy{position:relative;z-index:2;max-width:65%}
.eyebrow{font-size:9px;letter-spacing:2px;color:#8170d6;font-weight:800}.hero-copy h1{font-size:31px;line-height:1.03;margin:10px 0 10px;letter-spacing:-1.5px}.hero-copy h1 em{font-style:normal;color:#a491ff}.hero-copy p{font-size:11px;line-height:1.5;color:#8992aa;margin:0}
.orb{position:absolute;width:130px;height:130px;right:-13px;top:29px;border-radius:50%;display:grid;place-items:center}.orb-ring{position:absolute;border:1px solid rgba(125,102,255,.35);border-radius:50%}.r1{inset:0;animation:spin 8s linear infinite}.r2{inset:16px;border-color:rgba(54,217,255,.28);animation:spin 5s linear reverse infinite}@keyframes spin{to{transform:rotate(360deg)}}.orb-core{width:65px;height:65px;border-radius:50%;display:grid;place-items:center;font-size:25px;font-weight:800;background:radial-gradient(circle,#302879,#0b0e1b 70%);border:1px solid #7864ff;box-shadow:0 0 35px rgba(115,92,255,.4)}
.connection-card,.stat-card,.quick-card,.promo-banner,.plan-card,.device-limit,.device-row,.profile-card,.balance-card,.menu-card,.support-card,.ref-card,.how,.topup-card,.empty-bonus{background:linear-gradient(145deg,rgba(18,23,40,.95),rgba(9,12,22,.95));border:1px solid var(--line);border-radius:var(--radius)}
.connection-card{padding:17px}.connection-head{display:flex;justify-content:space-between;align-items:center}.connection-head>div{display:flex;flex-direction:column;gap:5px}.muted,.stat-card span{font-size:8px;letter-spacing:1.4px;color:#6e7892;font-weight:800}.connection-head strong{font-size:15px}.status-dot{width:9px;height:9px;border-radius:50%;background:#596174;box-shadow:0 0 0 transparent}.status-dot.on{background:var(--success);box-shadow:0 0 13px var(--success)}
.server-line{display:flex;align-items:center;gap:11px;margin:17px 0}.server-icon{width:38px;height:38px;border-radius:12px;background:#171c31;display:grid;place-items:center;color:#9c8bff;font-size:20px}.server-line>div:nth-child(2){flex:1;display:flex;flex-direction:column;gap:4px}.server-line small{color:#6f7890;font-size:9px}.server-line strong{font-size:11px}.change-server{border:0;background:none;color:#9581ff;font-size:10px}
.connect-btn,.primary-btn{width:100%;border:0;border-radius:16px;padding:15px;font-weight:800;background:linear-gradient(100deg,#7459ff,#9c78ff);box-shadow:0 10px 30px rgba(110,80,255,.23);transition:.2s}.connect-btn:active,.primary-btn:active{transform:scale(.985)}.connect-btn.connected{background:linear-gradient(100deg,#1c9b72,#54dfaa)}.connect-icon{margin-right:7px}.secure-note{text-align:center;color:#657089;font-size:8px;margin-top:10px}.secure-note span{color:#8e78ff}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.stat-card{padding:13px}.stat-card strong{display:block;font-size:20px;margin:6px 0 1px}.stat-card small{font-size:8px;color:#66718a}
.section-title h2{font-size:14px;margin:21px 0 9px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-card{text-align:left;padding:14px;border-radius:17px}.quick-card b{display:block;color:#9a84ff;font-size:19px;margin-bottom:8px}.quick-card span{display:block;font-size:11px;font-weight:700}.quick-card small{display:block;color:#68728b;font-size:8px;margin-top:4px}
.page-head{display:flex;align-items:center;gap:11px;margin:10px 0 12px}.page-head h2{font-size:24px;margin:3px 0 0}.page-sub{font-size:11px;color:#7f899f;line-height:1.5;margin:0 0 14px}
.server-list,.plan-list,.device-list{display:grid;gap:8px}.server-row{display:flex;align-items:center;gap:11px;padding:15px;background:var(--panel);border:1px solid var(--line);border-radius:18px}.server-row.selected{border-color:#826dff;box-shadow:0 0 22px rgba(114,88,255,.12)}.server-flag{width:38px;height:38px;border-radius:12px;background:#161d31;display:grid;place-items:center}.server-info{flex:1}.server-info strong{display:block;font-size:12px}.server-info small{font-size:8px;color:#717c95}.ping{font-size:10px;color:var(--success)}.selected-mark{color:#8e78ff}
.promo-banner{display:flex;gap:12px;padding:15px;margin-bottom:9px;align-items:center}.promo-banner>div:first-child{width:38px;height:38px;border-radius:12px;background:#211b4a;color:#9e8bff;display:grid;place-items:center}.promo-banner strong,.promo-banner span{display:block}.promo-banner strong{font-size:11px}.promo-banner span{font-size:8px;color:#707a91;margin-top:4px}
.plan-card{padding:17px;position:relative}.plan-card.best{border-color:#806aff;box-shadow:0 0 26px rgba(112,83,255,.12)}.best-tag{position:absolute;right:12px;top:12px;font-size:7px;background:#7d64ff;color:white;padding:5px 7px;border-radius:8px}.plan-card h3{font-size:13px;margin:0 0 7px}.price{font-size:25px;font-weight:800}.price small{font-size:9px;color:#737d95;font-weight:500}.plan-card p{font-size:8px;color:#707a91;margin:8px 0 13px}.plan-card button{width:100%;padding:11px;border-radius:12px;border:1px solid #5945c2;background:#15122a;color:#ad9cff;font-weight:700;font-size:10px}
.device-limit{padding:16px;margin-bottom:9px}.device-limit>div:first-child{display:flex;justify-content:space-between;font-size:10px}.device-limit strong{color:#a08dff}.progress{height:5px;background:#1c2131;border-radius:99px;margin-top:10px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6950ff,#4fd9ff);border-radius:99px;transition:.3s}.device-row{display:flex;align-items:center;padding:14px;gap:11px}.device-icon{width:38px;height:38px;border-radius:12px;background:#171c31;display:grid;place-items:center}.device-info{flex:1}.device-info strong{display:block;font-size:11px}.device-info small{display:block;color:#68728a;font-size:8px;margin-top:4px}.remove{border:0;background:none;color:#ff718f;font-size:17px}
.profile-card{display:flex;align-items:center;gap:12px;padding:15px}.avatar{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#8069ff,#25204e);font-weight:800}.profile-card>div:nth-child(2){flex:1}.profile-card strong,.profile-card span{display:block}.profile-card strong{font-size:12px}.profile-card span{font-size:8px;color:#737d95;margin-top:4px}.verified{color:var(--success)!important;font-size:17px!important}.balance-card{display:flex;align-items:center;margin-top:8px;padding:15px}.balance-card span{font-size:9px;color:#737d95;flex:1}.balance-card strong{font-size:18px;margin-right:12px}.balance-card button,.ref-card button{border:1px solid #4e3eaa;background:#15122b;color:#a793ff;border-radius:10px;padding:8px 10px;font-size:9px}.menu-card{overflow:hidden;margin-top:8px}.menu-card button{display:flex;width:100%;align-items:center;gap:12px;border:0;border-bottom:1px solid rgba(145,120,255,.12);background:none;padding:16px;text-align:left;font-size:10px}.menu-card button:last-child{border:0}.menu-card button span{width:23px;color:#9b86ff;font-size:15px}.menu-card button b{margin-left:auto;color:#626c83;font-size:17px}
.support-card{text-align:center;padding:25px 18px}.support-icon{margin:auto;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:#2a1422;color:#ff718f;font-weight:800;font-size:11px}.support-card h3{margin:12px 0 5px;font-size:15px}.support-card p{font-size:10px;color:#7a849b;line-height:1.5}.faq{margin-top:9px}.faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;margin-bottom:7px;padding:13px}.faq summary{font-size:10px;font-weight:700;cursor:pointer}.faq p{font-size:9px;line-height:1.5;color:#79839a;margin-bottom:0}
.topup-card{text-align:center;padding:22px}.topup-card span{display:block;color:#747e95;font-size:9px}.topup-card strong{display:block;font-size:30px;margin-top:7px}.amount-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0}.amount-grid button{border:1px solid var(--line);background:var(--panel);border-radius:15px;padding:15px;font-size:11px;font-weight:700}.legal{text-align:center;color:#5e687e;font-size:8px;line-height:1.5}
.promo-input{display:flex;gap:7px}.promo-input input{flex:1;min-width:0;border:1px solid var(--line);background:var(--panel);color:white;border-radius:14px;padding:14px;outline:none;font-size:10px}.promo-input input:focus{border-color:#806cff}.promo-input button{border:0;background:#735aff;border-radius:14px;padding:0 14px;font-size:9px;font-weight:800}.empty-bonus{text-align:center;padding:30px 18px;margin-top:9px}.empty-bonus strong,.empty-bonus span{display:block}.empty-bonus strong{font-size:12px;margin:10px}.empty-bonus span{font-size:9px;color:#747e95;line-height:1.5}
.ref-card{padding:20px;text-align:center}.ref-card span,.ref-card small{display:block;color:#747e95;font-size:9px}.ref-card strong{display:block;font-size:42px;margin:8px}.ref-card small{margin-bottom:15px}.ref-card button{font-weight:700}.how{padding:17px;margin-top:9px}.how h3{font-size:12px;margin:0 0 12px}.how p{font-size:9px;color:#7a849a;line-height:1.5}
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-20px);background:#171b2a;border:1px solid #4c3e92;padding:10px 14px;border-radius:12px;font-size:9px;z-index:50;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 12px 35px rgba(0,0,0,.4)}.toast.show{opacity:1;transform:translate(-50%,0)}
.bottom-nav{position:fixed;z-index:20;bottom:10px;left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),488px);height:66px;border:1px solid rgba(145,120,255,.2);background:rgba(8,11,20,.92);backdrop-filter:blur(18px);border-radius:22px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;padding:5px;box-shadow:0 18px 50px rgba(0,0,0,.45)}.nav-item{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#5e687e;font-size:8px}.nav-item span{font-size:17px}.nav-item.active{color:#a38fff}.nav-connect{width:51px;height:51px;margin:auto;border-radius:17px;background:linear-gradient(145deg,#765cff,#4932cc);color:white;box-shadow:0 0 25px rgba(106,79,255,.35)}.nav-connect span{font-size:22px}
@media(min-width:600px){body{background:#03050b}.app-shell{margin-top:12px}.bottom-nav{position:sticky;transform:none;left:auto;width:100%;margin:20px auto 0}.hero-card{min-height:210px}}