*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--primary:#00f2fe;--accent:#00ff9d;--danger:#ff3c5e;--bg:#030810;--card:rgba(8,18,35,0.95);--text:#c8e8f8;--muted:rgba(200,230,255,0.32)}
body{font-family:'Rajdhani',sans-serif;background:radial-gradient(ellipse at top right,#0a1628,#030810);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;overflow-x:hidden;position:relative}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.12) 2px,rgba(0,0,0,0.12) 4px);pointer-events:none;z-index:999}
body::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,0.82) 100%);pointer-events:none;z-index:998}
#particles{position:fixed;inset:0;pointer-events:none;z-index:0}
.hex-bg{position:fixed;inset:0;opacity:0.04;background-image:radial-gradient(circle,rgba(0,200,255,.5) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:1}
.dstream{position:fixed;top:0;width:1px;height:100vh;overflow:hidden;pointer-events:none;z-index:1}
.dstream::before{content:'';position:absolute;top:-100%;width:1px;height:80px;background:linear-gradient(180deg,transparent,rgba(0,200,255,.3),transparent);animation:stream-fall 3.5s infinite}
.dstream:nth-child(1){right:12%}.dstream:nth-child(2){right:27%}.dstream:nth-child(2)::before{animation-delay:1.3s}.dstream:nth-child(3){right:78%}.dstream:nth-child(3)::before{animation-delay:2.3s}
@keyframes stream-fall{0%{top:-20%}100%{top:120%}}

/* WRAPPER */
.wrapper{max-width:490px;width:100%;position:relative;z-index:10}

/* HEADER */
.header{text-align:center;margin-bottom:2.5rem}
.header-line{width:60px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,255,.4),transparent);margin:0 auto 1.5rem}
.logo-wrap{position:relative;display:inline-block}
.logo-glow{position:absolute;inset:-20px;background:radial-gradient(circle,rgba(0,200,255,.07) 0%,transparent 70%);pointer-events:none}
.logo{font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(2.2rem,9vw,3.2rem);letter-spacing:.12em;color:#fff;line-height:1;position:relative}
.logo .logo-colored{background:linear-gradient(90deg,#00f2fe,#00ff9d,#00f2fe);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.logo-glitch{position:relative;display:inline-block}
.logo-glitch::before,.logo-glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;font-family:'Orbitron',monospace;font-weight:900;font-size:inherit;letter-spacing:.12em}
.logo-glitch::before{-webkit-text-fill-color:rgba(255,0,60,.35);clip-path:polygon(0 20%,100% 20%,100% 42%,0 42%);animation:glitch1 5s infinite}
.logo-glitch::after{-webkit-text-fill-color:rgba(0,200,255,.35);clip-path:polygon(0 58%,100% 58%,100% 80%,0 80%);animation:glitch2 5s infinite}
@keyframes glitch1{0%,90%,100%{transform:translate(0);opacity:0}91%{transform:translate(-3px,1px);opacity:1}93%{transform:translate(3px,-1px);opacity:1}95%{transform:translate(-2px,0);opacity:1}97%{transform:translate(0);opacity:0}}
@keyframes glitch2{0%,88%,100%{transform:translate(0);opacity:0}89%{transform:translate(3px,-1px);opacity:1}91%{transform:translate(-3px,1px);opacity:1}93%{transform:translate(2px,0);opacity:1}95%{transform:translate(0);opacity:0}}
.logo-sub{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(0,200,255,.38);letter-spacing:.5em;text-transform:uppercase;margin-top:.6rem;animation:pulse-track 3s infinite}
@keyframes pulse-track{0%,100%{letter-spacing:.4em;opacity:.3}50%{letter-spacing:.55em;opacity:.6}}
.node-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:1rem}
.node-dot{width:6px;height:6px;background:#00f2fe;border-radius:50%;animation:ping 1.6s infinite}
@keyframes ping{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.55)}}
.node-txt{font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(0,200,255,.38);letter-spacing:.2em}

/* CARD */
.card{background:var(--card);border:1px solid rgba(0,200,255,.12);border-radius:20px;overflow:hidden;position:relative}
.card>.corner-tl{position:absolute;top:0;left:0;width:44px;height:44px;border-top:2px solid rgba(0,200,255,.45);border-left:2px solid rgba(0,200,255,.45);border-radius:20px 0 0 0;pointer-events:none;z-index:2}
.card>.corner-br{position:absolute;bottom:0;right:0;width:44px;height:44px;border-bottom:2px solid rgba(0,255,157,.35);border-right:2px solid rgba(0,255,157,.35);border-radius:0 0 20px 0;pointer-events:none;z-index:2}

/* HUD */
.hud-bar{display:flex;justify-content:space-between;align-items:center;padding:.55rem 1.25rem;background:rgba(0,200,255,.025);border-bottom:1px solid rgba(0,200,255,.07)}
.hud-id{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(0,200,255,.32);letter-spacing:.1em}
.hud-status{display:flex;align-items:center;gap:5px;font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(0,255,157,.55);letter-spacing:.15em}
.status-dot{width:4px;height:4px;background:#00ff9d;border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* PROGRESS */
.prog-track{height:3px;background:rgba(255,255,255,.04);position:relative;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,#00f2fe,#00ff9d);transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}
.prog-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:30px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6));animation:prog-scan 1.5s infinite}
@keyframes prog-scan{0%,100%{opacity:.3}50%{opacity:1}}

/* STEPS */
.steps-row{display:flex;justify-content:center;gap:2rem;padding:.75rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.04)}
.step-item{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.18);transition:color .3s}
.step-item.active{color:#00f2fe}.step-item.done{color:rgba(0,255,157,.55)}
.step-num{width:18px;height:18px;border:1px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Share Tech Mono',monospace;font-size:9px}

/* CONTENT */
.content{padding:1.8rem 1.8rem 2rem}
.field-label{font-size:10px;font-weight:700;color:rgba(200,230,255,.38);text-transform:uppercase;letter-spacing:.2em;margin-bottom:.7rem}
.field-group{margin-bottom:1.4rem}

/* INPUT */
.cyber-input{width:100%;background:rgba(0,0,0,.4);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:.85rem 1rem;color:#00f2fe;font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:.08em;outline:none;transition:all .3s;caret-color:#00f2fe}
.cyber-input::placeholder{color:rgba(0,200,255,.2);font-size:11px}
.cyber-input:focus{border-color:rgba(0,200,255,.5);background:rgba(0,200,255,.03);box-shadow:0 0 20px rgba(0,200,255,.07),inset 0 0 20px rgba(0,200,255,.02)}
.cyber-input.error{border-color:rgba(255,60,60,.5);box-shadow:0 0 16px rgba(255,40,40,.1)}
.hint-text{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(200,230,255,.28);margin-top:.5rem}
.hint-text code{color:rgba(0,200,255,.5);background:rgba(0,200,255,.06);padding:1px 5px;border-radius:3px}

/* PLANS */
.plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.plan-card{border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:1rem;text-align:center;cursor:pointer;transition:all .3s;background:rgba(255,255,255,.02);position:relative;overflow:hidden}
.plan-card:hover{border-color:rgba(0,200,255,.25);background:rgba(0,200,255,.03)}
.plan-card.selected{border-color:rgba(0,200,255,.5);background:rgba(0,200,255,.05);box-shadow:0 0 22px rgba(0,200,255,.08)}
.plan-days{font-family:'Orbitron',monospace;font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
.plan-price{font-family:'Share Tech Mono',monospace;font-size:13px;color:#00f2fe}
.plan-badge{position:absolute;top:-1px;right:-1px;background:linear-gradient(135deg,#00f2fe,#00ff9d);color:#000;font-family:'Share Tech Mono',monospace;font-size:7px;font-weight:700;padding:2px 7px;border-radius:0 12px 0 8px;letter-spacing:.1em}

/* DIVIDER */
.cyber-divider{margin:1.5rem 0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,255,.14),transparent);position:relative}
.cyber-divider::before{content:'◆';position:absolute;left:50%;transform:translateX(-50%);top:-8px;font-size:8px;color:rgba(0,200,255,.28)}

/* BUTTONS */
.btn-cyber{width:100%;padding:1rem;background:linear-gradient(135deg,rgba(0,200,255,.14),rgba(0,255,157,.08));border:1px solid rgba(0,200,255,.3);border-radius:12px;color:#fff;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.btn-cyber::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:btn-scan 3s infinite}
@keyframes btn-scan{0%{left:-100%}100%{left:200%}}
.btn-cyber:hover{border-color:rgba(0,200,255,.6);box-shadow:0 0 28px rgba(0,200,255,.14);transform:translateY(-1px)}
.btn-cyber:active{transform:translateY(0)}
.btn-cyber span{position:relative;z-index:1}

/* AMOUNT */
.amount-display{text-align:center;margin-bottom:1.5rem}
.amount-label{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:.25em;text-transform:uppercase;margin-bottom:.3rem}
.amount-num{font-family:'Orbitron',monospace;font-size:3.5rem;font-weight:900;color:#fff;line-height:1;display:inline-block;position:relative;animation:amount-flicker 6s infinite}
@keyframes amount-flicker{0%,90%,94%,98%,100%{opacity:1;transform:translateX(0)}91%{opacity:.85;transform:translateX(-2px)}92%{opacity:1;transform:translateX(0)}95%{opacity:.9;transform:translateX(2px)}96%{opacity:1;transform:translateX(0)}}
.amount-unit{font-family:'Orbitron',monospace;font-size:1.2rem;color:#00f2fe;margin-left:3px;vertical-align:super}

/* PAY TABS */
.pay-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem}
.pay-tab{border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:.75rem 1rem;text-align:center;cursor:pointer;transition:all .3s;background:rgba(255,255,255,.02)}
.pay-tab.active{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.05);box-shadow:0 0 14px rgba(0,200,255,.07)}
.pay-tab-icon{font-size:18px;margin-bottom:4px;display:block}
.pay-tab-label{font-size:11px;font-weight:600;letter-spacing:.05em}
.pay-content{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:1.2rem}
.bank-row{display:flex;justify-content:space-between;align-items:center}
.bank-num{font-family:'Share Tech Mono',monospace;font-size:18px;color:#00f2fe;letter-spacing:.12em;margin-bottom:3px}
.bank-name{font-size:11px;color:rgba(200,230,255,.45)}
.copy-btn{background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.15);border-radius:8px;padding:.5rem .75rem;cursor:pointer;color:rgba(0,200,255,.65);font-size:14px;transition:all .3s}
.copy-btn:hover{background:rgba(0,200,255,.14);border-color:rgba(0,200,255,.4);color:#00f2fe}
.upload-label{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-top:.9rem;margin-bottom:.5rem;display:block}
.upload-area{border:1px dashed rgba(0,200,255,.2);border-radius:8px;padding:.8rem;text-align:center;cursor:pointer;transition:all .3s}
.upload-area:hover{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.03)}
.upload-txt{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(200,230,255,.28)}
.upload-preview{max-width:100%;max-height:120px;border-radius:6px;margin-top:.5rem;display:none}

/* BTN ROW */
.btn-row{display:flex;gap:.7rem;margin-top:1.2rem}
.btn-back{flex:1;padding:.85rem;background:transparent;border:1px solid rgba(255,255,255,.07);border-radius:10px;color:rgba(200,230,255,.38);font-family:'Rajdhani',sans-serif;font-weight:600;font-size:11px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:all .3s}
.btn-back:hover{border-color:rgba(255,255,255,.2);color:rgba(200,230,255,.7)}
.btn-confirm{flex:2.5;padding:.85rem;background:linear-gradient(135deg,rgba(0,200,255,.18),rgba(0,255,157,.1));border:1px solid rgba(0,200,255,.35);border-radius:10px;color:#fff;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.btn-confirm::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:btn-scan 2.5s infinite 1s}
.btn-confirm:hover{border-color:rgba(0,200,255,.6);box-shadow:0 0 25px rgba(0,200,255,.14);transform:translateY(-1px)}

/* SUCCESS */
.success-view{text-align:center}
.success-icon{width:72px;height:72px;border:2px solid rgba(0,255,157,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;background:rgba(0,255,157,.05);position:relative}
.success-icon::before{content:'';position:absolute;inset:-9px;border:1px solid rgba(0,255,157,.12);border-radius:50%;animation:pulse-ring 2s infinite}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.45);opacity:0}}
.success-check{font-size:30px;color:#00ff9d}
.success-title{font-family:'Orbitron',monospace;font-size:20px;font-weight:700;color:#fff;margin-bottom:.3rem;letter-spacing:.05em}
.success-sub{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.1em;margin-bottom:1.5rem}
.key-box{background:rgba(0,0,0,.5);border:2px dashed rgba(0,255,157,.22);border-radius:12px;padding:1.2rem;margin-bottom:1rem}
.key-text{font-family:'Share Tech Mono',monospace;font-size:18px;color:#00ff9d;letter-spacing:.15em;word-break:break-all;animation:key-glow 2.2s infinite}
@keyframes key-glow{0%,100%{text-shadow:0 0 10px rgba(0,255,157,.18)}50%{text-shadow:0 0 22px rgba(0,255,157,.55),0 0 45px rgba(0,255,157,.18)}}
.btn-copy-key{width:100%;padding:1rem;background:rgba(0,255,157,.09);border:1px solid rgba(0,255,157,.3);border-radius:10px;color:#00ff9d;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .3s}
.btn-copy-key:hover{background:rgba(0,255,157,.16);border-color:rgba(0,255,157,.55);box-shadow:0 0 25px rgba(0,255,157,.1)}
.reset-link{display:block;margin-top:.8rem;font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(200,230,255,.22);letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;cursor:pointer}
.reset-link:hover{color:rgba(200,230,255,.5)}

/* TOAST */
.toast{position:fixed;bottom:2rem;right:2rem;background:rgba(0,20,40,.95);border:1px solid rgba(0,200,255,.25);border-radius:10px;padding:.75rem 1.25rem;font-family:'Share Tech Mono',monospace;font-size:11px;color:#00f2fe;letter-spacing:.1em;z-index:9999;transform:translateY(100px);opacity:0;transition:all .35s cubic-bezier(.4,0,.2,1)}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{border-color:rgba(0,255,157,.3);color:#00ff9d}
.toast.error{border-color:rgba(255,60,94,.3);color:#ff3c5e}

/* ADMIN LINK */
.admin-link-wrap{text-align:center;margin-top:1.2rem}
.admin-link{font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(200,230,255,.12);letter-spacing:.3em;text-decoration:none;text-transform:uppercase;transition:color .3s}
.admin-link:hover{color:rgba(0,200,255,.4)}