*{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(ellipse at 20% 30%,#0a0a1a 0%,#050510 100%);font-family:'Segoe UI',system-ui,sans-serif;color:#fff;min-height:100vh;padding-bottom:80px}
.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle 3s infinite alternate}
@keyframes twinkle{0%{opacity:0.2;transform:scale(1)}100%{opacity:1;transform:scale(1.3)}}
.meteor{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.meteor:before{content:'';position:absolute;width:2px;height:2px;background:linear-gradient(90deg,#fff,transparent);animation:meteor 4s linear infinite}
@keyframes meteor{0%{transform:translateX(0) translateY(0);opacity:1}70%{opacity:0.5}100%{transform:translateX(300px) translateY(300px);opacity:0}}
.container{position:relative;z-index:1;max-width:550px;margin:0 auto;padding:20px 15px}
.bottom-nav{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);width:calc(100% - 30px);max-width:550px;background:rgba(10,10,30,0.95);backdrop-filter:blur(20px);border-radius:50px;display:flex;justify-content:space-around;padding:8px 12px;z-index:100;border:1px solid rgba(107,47,160,0.3)}
.nav-btn{flex:1;background:transparent;border:none;padding:6px 4px;border-radius:40px;color:#aaa;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:0.6rem;position:relative}
.nav-btn .nav-icon{font-size:1.2rem}
.nav-btn.active{color:#f1c40f;background:rgba(241,196,15,0.15)}
.cart-badge{position:absolute;top:-5px;right:5px;background:#e74c3c;border-radius:50%;width:16px;height:16px;font-size:0.55rem;display:flex;align-items:center;justify-content:center}
.page{display:none;animation:fadeIn 0.3s}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.glass-card{background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:20px;margin-bottom:15px}
.welcome{text-align:center;margin-bottom:20px}
.welcome h1{font-size:2rem;background:linear-gradient(135deg,#fff,#9b59b6);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.stat-card{background:rgba(107,47,160,0.15);border-radius:20px;padding:12px;text-align:center;border:1px solid rgba(107,47,160,0.3)}
.stat-icon{font-size:1.3rem;margin-bottom:5px}
.stat-value{font-size:1.2rem;font-weight:bold;background:linear-gradient(135deg,#fff,#9b59b6);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{font-size:0.6rem;color:#aaa}
.balance-card{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.balance-amount{font-size:1.3rem;font-weight:bold;color:#f1c40f}
.features{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.feature{background:rgba(107,47,160,0.2);padding:6px 12px;border-radius:30px;font-size:0.7rem}
.tariffs-grid{display:flex;flex-direction:column;gap:12px}
.tariff-card{background:rgba(0,0,0,0.4);border-radius:20px;padding:15px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border:1px solid rgba(107,47,160,0.3);cursor:pointer;transition:all 0.2s}
.tariff-card:hover{transform:translateX(5px);border-color:#f1c40f}
.tariff-price{font-size:1.3rem;font-weight:bold;color:#f1c40f}
.tariff-price small{font-size:0.7rem;color:#666;text-decoration:line-through}
.btn{background:linear-gradient(135deg,#6b2fa0,#4a1d6e);border:none;padding:10px 18px;border-radius:30px;color:#fff;font-weight:bold;cursor:pointer;transition:all 0.3s;width:100%;margin:5px 0}
.btn-primary{background:linear-gradient(135deg,#f1c40f,#e67e22);color:#1a1a2e}
.btn-danger{background:linear-gradient(135deg,#c0392b,#8e1e1e)}
.btn-small{padding:6px 12px;width:auto}
.profile-header{display:flex;align-items:center;gap:15px;margin-bottom:20px}
.avatar{width:55px;height:55px;background:linear-gradient(135deg,#6b2fa0,#4a1d6e);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.auth-buttons{display:flex;gap:10px;margin-bottom:20px}
.auth-buttons button{flex:1}
.key-input{width:100%;padding:12px;background:rgba(0,0,0,0.4);border:1px solid rgba(107,47,160,0.5);border-radius:30px;color:#fff;font-family:monospace;text-align:center}
.key-list-item{background:rgba(0,0,0,0.3);border-radius:15px;padding:10px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.key-code{font-family:monospace;font-size:0.65rem;background:#1a1a2e;padding:4px 8px;border-radius:20px;word-break:break-all}
.stat-row{display:flex;justify-content:space-between;margin:8px 0}
.speed-gauge{width:160px;height:160px;margin:15px auto;background:linear-gradient(135deg,rgba(107,47,160,0.3),rgba(74,29,110,0.3));border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid #f1c40f;cursor:pointer;transition:all 0.3s}
.speed-gauge:hover{transform:scale(1.02)}
.gauge-value{font-size:2rem;font-weight:bold;color:#f1c40f}
.gauge-unit{font-size:0.7rem;color:#aaa}
.speed-details{background:rgba(0,0,0,0.3);border-radius:20px;padding:12px;margin:15px 0}
.speed-row{display:flex;justify-content:space-between;margin:6px 0}
.footer{background:rgba(0,0,0,0.5);padding:30px 20px 20px;margin-top:40px;border-top:1px solid rgba(107,47,160,0.3)}
.footer-content{max-width:550px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.footer-section h4{font-size:0.9rem;margin-bottom:10px;color:#f1c40f}
.footer-section p,.footer-section a{font-size:0.7rem;color:#aaa;display:block;margin:5px 0;text-decoration:none}
.footer-bottom{text-align:center;margin-top:20px;padding-top:15px;border-top:1px solid rgba(255,255,255,0.05);font-size:0.65rem;color:#555}
#notifications{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:1000}
.notification{background:#1a1a2e;border-left:4px solid #f1c40f;padding:10px 20px;border-radius:50px;margin-top:8px;animation:slideUp 0.3s}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.subtitle{font-size:0.75rem;color:#aaa;margin-bottom:15px;text-align:center}
hr{margin:20px 0;border:none;border-top:1px solid rgba(255,255,255,0.1)}
.activate-section{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,0.1)}
.activate-section h4{margin-bottom:10px;color:#f1c40f}
@media (max-width:500px){.stats-grid{gap:6px}.stat-value{font-size:1rem}}