:root{--bg-primary: #0f1419;--bg-secondary: #1a1f26;--bg-tertiary: #252a31;--glass-bg: rgba(25, 15, 30, .35);--glass-border: rgba(255, 255, 255, .12);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .4);--primary-color: #5a5a5a;--primary-hover: #6a6a6a;--accent-color: #7a7a7a;--success-color: #4CAF50;--danger-color: #F44336;--warning-color: #FF9800;--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .5);--nav-bg: rgba(30, 30, 30, .95);--nav-active: #5a5a5a}@font-face{font-family:ChakraPetch;src:url(/fonts/ChakraPetch-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#0d0e15;color:var(--text-primary);min-height:100vh;overflow-x:hidden;position:relative}#particle-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1}.animated-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0d0e15;z-index:-1;overflow:hidden}.sphere{position:absolute;border-radius:50%;filter:blur(80px);opacity:.8;animation:float 12s infinite alternate ease-in-out}.sphere-1{width:300px;height:300px;background:#7000ff;top:-10%;left:-10%}.sphere-2{width:250px;height:250px;background:#00e5ff;bottom:-5%;right:-10%;animation-duration:18s;animation-direction:alternate-reverse}.sphere-3{width:200px;height:200px;background:#f05;top:40%;left:50%;animation-duration:25s}@keyframes float{0%{transform:translate(0) scale(1)}50%{transform:translate(15vw,10vh) scale(1.1)}to{transform:translate(-10vw,20vh) scale(.9)}}.theme-toggle-btn{font-size:18px}.app{min-height:100vh;padding-bottom:80px}.glass-card{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--glass-shadow);padding:20px;transition:all .3s ease;margin-bottom:16px}.glass-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00000026}.glass-button{background:#ffffff0f;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 18px;color:#fffffff0;font-weight:600;font-size:13.5px;letter-spacing:.01em;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease;outline:none;width:100%;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:7px}.glass-button:hover{background:#ffffff1c;border-color:#ffffff38}.glass-button:active{transform:scale(.985)}.glass-button.primary{background:#00d9ff21;border-color:#00d9ff57;color:#fff}.glass-button.primary:hover{background:#00d9ff33;border-color:#00d9ff73}.glass-button.success{background:var(--success-color)}.glass-button.success:hover{background:#45a049}.glass-button.danger{background:var(--danger-color)}.glass-button.danger:hover{background:#d32f2f}.glass-button.secondary{background:#ffffff1a}.glass-button.secondary:hover{background:#ffffff26}.glass-button.small{padding:6px 12px;font-size:12px;width:auto;margin:0}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:100;min-height:64px}.header-left{display:flex;align-items:center;gap:12px;flex:1}.header-logo{width:48px;height:48px;border-radius:12px;background:var(--primary-color);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.header-logo img{width:100%;height:100%;object-fit:cover}.header-user-info{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);flex-wrap:wrap}.header-label{font-size:11px;text-transform:uppercase;font-weight:600}.header-id{font-weight:600;color:var(--text-primary)}.header-username{color:var(--text-primary)}.header-separator{color:var(--text-secondary)}.header-right{display:flex;align-items:center;gap:8px}.header-badge{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:12px;font-size:13px;font-weight:600;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}.header-badge svg{flex-shrink:0}.badge-days{background:var(--warning-color);color:#fff}.badge-balance{background:var(--success-color);color:#fff}.header-icon-btn{width:40px;height:40px;border-radius:12px;background:#ffffff1a;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:var(--text-primary)}.header-icon-btn:hover{background:#ffffff26;transform:scale(1.05)}.header-icon-btn:active{transform:scale(.95)}.language-badge{font-size:13px;font-weight:700;color:var(--text-primary)}.bottom-nav{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);border-radius:24px;padding:8px 12px;display:flex;gap:4px;z-index:1000;box-shadow:0 8px 32px #0009;max-width:90%;width:auto}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-secondary);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;background:transparent;border:none;padding:10px 16px;border-radius:16px;min-width:70px;position:relative}.nav-item.active{background:var(--nav-active);color:var(--text-primary)}.nav-item.active .nav-icon svg{stroke:var(--text-primary);fill:none}.nav-item:hover:not(.active){background:#ffffff0d;color:var(--text-primary)}.nav-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.nav-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;transition:all .3s ease}.nav-label{font-size:11px;font-weight:500;white-space:nowrap}.main-content{padding:16px;max-width:600px;margin:0 auto}.page{animation:fadeIn .5s ease}.welcome-section{text-align:center;margin-bottom:24px}.welcome-section h1{font-size:24px;margin-bottom:8px}.welcome-subtitle{color:var(--text-secondary);font-size:14px}.subscription-card{margin-bottom:24px}.subscription-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.subscription-header-title{display:flex;align-items:center;font-size:16px;font-weight:600;color:var(--text-primary)}.subscription-badge{background:#f44336;padding:6px 12px;border-radius:8px;font-size:14px;font-weight:600;color:#fff}.subscription-status{font-size:14px;font-weight:600;display:flex;align-items:center;gap:4px}.subscription-status.active{color:var(--success-color)}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.active{background:#ffc107;box-shadow:0 0 8px #ffc10799}.status-dot.inactive{background:#f44336;box-shadow:0 0 8px #f4433699}.subscription-dates{display:flex;justify-content:space-between;margin-bottom:16px;padding:12px;background:#0003;border-radius:8px}.subscription-date{display:flex;flex-direction:column;gap:4px}.subscription-date .label{font-size:12px;color:var(--text-secondary)}.subscription-date .value{font-size:14px;font-weight:600}.subscription-progress{margin-top:16px}.progress-label{font-size:14px;margin-bottom:8px;color:var(--text-secondary)}.info-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}.info-card{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;position:relative;padding:16px}.info-card:hover{transform:scale(1.05)}.info-card-icon{font-size:32px}.info-card-value{font-size:24px;font-weight:700;color:var(--primary-color)}.info-card-label{font-size:12px;color:var(--text-secondary);text-align:center}.info-card-arrow{position:absolute;top:12px;right:12px;font-size:18px;color:var(--text-secondary)}.traffic-card{margin-bottom:24px}.traffic-header{display:flex;align-items:center;gap:8px;margin-bottom:16px}.traffic-icon{font-size:24px}.traffic-title{font-size:16px;font-weight:600}.traffic-stats{margin-bottom:12px}.traffic-label{font-size:14px;color:var(--text-secondary);margin-bottom:8px}.traffic-unlimited{text-align:center;padding:20px}.traffic-unlimited .traffic-value{font-size:32px;font-weight:700;color:var(--primary-color);display:block;margin-bottom:8px}.traffic-unlimited .traffic-label{font-size:16px;color:var(--text-secondary)}.traffic-percent{text-align:right;font-size:14px;color:var(--text-secondary);margin-top:4px}.traffic-reset{font-size:12px;color:var(--text-secondary);text-align:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--glass-border)}.progress-bar{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:var(--primary-color);border-radius:4px;transition:width .5s ease;position:relative;overflow:hidden}.progress-bar-fill.animated:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.quick-actions h3{font-size:16px;margin-bottom:16px}.action-buttons{display:flex;flex-direction:column;gap:8px}.action-buttons-row{display:flex;flex-direction:row;gap:8px}.channel-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;background:#ffffff14;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .2s ease;color:var(--text-primary);font-size:12px;font-weight:500}.channel-btn:hover{background:#ffffff1f;transform:translateY(-2px)}.channel-btn img{width:48px;height:48px;border-radius:12px;object-fit:cover}.location-card{display:flex;align-items:center;gap:16px}.location-icon{font-size:48px}.location-info{flex:1}.location-label{font-size:12px;color:var(--text-secondary);margin-bottom:4px}.location-name{font-size:18px;font-weight:600}.qrcode-card{text-align:center;margin-bottom:24px}.qrcode-header h3{font-size:18px;margin-bottom:16px}.qrcode-container{display:flex;justify-content:center;align-items:center;padding:20px;background:#fff;border-radius:12px;margin:0 auto 16px;width:fit-content;aspect-ratio:1 / 1}.qrcode-label{font-size:14px;color:var(--text-secondary);margin-bottom:16px}.qrcode-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.vpn-key-preview{padding:12px;background:#0000004d;border-radius:8px;overflow-x:auto}.vpn-key-preview code{font-family:Courier New,monospace;font-size:12px;color:var(--text-secondary);word-break:break-all}.device-limit-card{margin-bottom:24px}.device-limit-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.device-limit-icon{font-size:24px}.device-limit-title{font-size:16px;font-weight:600}.device-limit-stats{text-align:center}.device-limit-value{font-size:24px;font-weight:700;color:var(--primary-color);margin-bottom:8px}.device-limit-available{font-size:14px;color:var(--text-secondary)}.devices-section h3{font-size:18px;margin-bottom:16px}.devices-list{display:flex;flex-direction:column;gap:12px}.device-card{display:flex;align-items:center;gap:12px;padding:16px}.device-icon{font-size:32px}.device-name{font-size:16px;font-weight:600;margin-bottom:4px}.device-last-seen{font-size:12px;color:var(--text-secondary);margin-bottom:4px}.device-location{font-size:12px;color:var(--text-secondary)}.device-remove-btn{background:#f4433633;border:none;border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:all .3s ease}.device-remove-btn:hover{background:#f4433666;transform:scale(1.1)}.stats-header{text-align:center;margin-bottom:24px}.stats-header h1{font-size:24px}.stats-summary{display:flex;flex-direction:row;justify-content:space-between;gap:12px;margin-bottom:24px}.stat-item{display:flex;flex-direction:row;align-items:center;gap:12px;padding:16px;flex:1}.stat-icon{font-size:32px;flex-shrink:0}.stat-item:nth-child(1) .stat-icon{color:#ff6b6b}.stat-item:nth-child(2) .stat-icon{color:#4ecdc4}.stat-item:nth-child(3) .stat-icon{color:#95e1d3}.stat-content{text-align:left;flex:1}.stat-label{font-size:12px;color:var(--text-secondary);margin-bottom:4px}.stat-value{font-size:18px;font-weight:700;color:var(--primary-color)}.chart-card{margin-bottom:24px}.chart-card h3{font-size:18px;margin-bottom:16px}.chart-container{height:250px;margin-bottom:12px}.chart-legend{text-align:center;font-size:12px;color:var(--text-secondary)}.stats-details{margin-bottom:24px}.stats-details h3{font-size:18px;margin-bottom:16px}.detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--glass-border)}.detail-row:last-child{border-bottom:none}.detail-label{font-size:14px;color:var(--text-secondary)}.detail-value{font-size:14px;font-weight:600}.profile-card-wrapper{position:relative;margin-top:80px;margin-bottom:16px}.profile-info-card{padding:80px 20px 20px!important}.profile-center-block{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.profile-avatar-large{width:140px;height:140px;min-width:140px;min-height:140px;border-radius:50%;background:linear-gradient(135deg,#7000ff,#00e5ff);display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:700;color:#fff;overflow:hidden;flex-shrink:0;position:absolute;top:-70px;left:50%;transform:translate(-50%);border:4px solid #0d0e15;box-shadow:0 4px 20px #0009;z-index:2}.profile-avatar-large img{width:100%;height:100%;object-fit:cover;border-radius:50%}.profile-center-name{font-size:20px;font-weight:700;color:var(--text-primary)}.profile-center-username{font-size:14px;font-weight:400;color:var(--text-secondary)}.profile-status-row{display:flex;align-items:center;gap:8px;justify-content:center}.profile-id-row{display:flex;align-items:center;gap:6px;justify-content:center}.profile-id-label{font-size:13px;color:var(--text-secondary)}.profile-copy-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:2px;display:flex;align-items:center}.profile-top-section{display:flex;align-items:center;gap:16px;margin-bottom:16px;position:relative}.profile-avatar-square{width:80px;height:80px;border-radius:16px;background:var(--primary-color);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;flex-shrink:0;overflow:hidden}.profile-avatar-square img{width:100%;height:100%;object-fit:cover}.profile-name-section{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;max-width:calc(100% - 150px);overflow:hidden}.profile-mini-cards{display:flex;gap:8px;position:absolute;top:0;right:0}.mini-info-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 12px;background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.08);min-width:60px}.mini-info-card svg{color:var(--text-secondary)}.mini-card-value{font-size:16px;font-weight:700;color:var(--text-primary);line-height:1}.mini-card-label{font-size:10px;color:var(--text-secondary);line-height:1}.profile-name-large{font-size:22px;font-weight:700;color:#ff8c00;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:clamp(13px,4vw,22px)}.profile-username-gray{font-size:16px;color:var(--text-secondary);line-height:1.2}.profile-full-divider{width:100%;height:1px;background:#ffffff1a;margin:16px 0}.profile-bottom-section{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.profile-plan-info{display:flex;flex-direction:column;gap:8px}.profile-plan-label{font-size:13px;color:var(--text-secondary)}.profile-plan-name{font-size:18px;font-weight:700;color:var(--text-primary)}.profile-balance{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.balance-label{font-size:13px;color:var(--text-secondary)}.balance-value{font-family:ChakraPetch,monospace;font-size:32px;font-weight:700;color:var(--success-color);line-height:1}.profile-days-badge{background:#4a5568;padding:8px 16px;border-radius:16px;font-size:14px;font-weight:600;color:#6ba3ff;white-space:nowrap}.profile-copy-btn{background:#ffffff1a;border:none;border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-secondary)}.profile-copy-btn:hover{background:#ffffff26;color:var(--text-primary)}.profile-refresh-btn{background:#ffffff1a;border:none;border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:var(--text-secondary);flex-shrink:0}.profile-refresh-btn:hover{background:#ffffff26;transform:rotate(180deg)}.vpn-setup-btn{width:100%;background:var(--success-color);border:none;border-radius:12px;padding:16px;font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .3s ease;margin-bottom:16px}.vpn-setup-btn:hover{background:#45a049;transform:translateY(-2px);box-shadow:0 8px 20px #4caf5066}.vpn-setup-btn:active{transform:translateY(0)}.profile-section{margin-bottom:16px;cursor:pointer;transition:all .3s ease}.profile-section:hover{transform:translateY(-2px)}.section-header{display:flex;align-items:center;gap:12px}.section-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.section-title{flex:1}.section-title h3{font-size:16px;font-weight:600;margin-bottom:2px}.section-title p{font-size:12px;color:var(--text-secondary)}.section-arrow{background:none;border:none;font-size:24px;color:var(--text-secondary);cursor:pointer}.profile-combined-card{margin-bottom:16px;padding:16px!important}.combined-row{display:flex;align-items:center;justify-content:space-around}.combined-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.combined-value{font-size:18px;font-weight:700;color:var(--text-primary)}.combined-label{font-size:11px;color:var(--text-secondary)}.combined-divider{width:1px;height:40px;background:#ffffff1a}.profile-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}.stat-card{padding:16px;cursor:pointer;transition:all .3s ease;position:relative}.stat-card:hover{transform:translateY(-2px)}.stat-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.stat-card-content{display:flex;flex-direction:column;gap:4px}.stat-card-value{font-size:24px;font-weight:700;color:var(--text-primary)}.stat-card-label{font-size:13px;color:var(--text-secondary);margin-bottom:8px}.stat-card-action{font-size:13px;color:var(--primary-color);font-weight:600;margin-bottom:4px}.stat-card-link{font-size:12px;color:var(--text-secondary)}.profile-traffic-card{display:flex;align-items:center;justify-content:space-between;padding:16px;margin-bottom:12px}.traffic-info-row{display:flex;align-items:baseline;gap:6px;font-size:18px;font-weight:700}.traffic-used{color:var(--text-primary)}.traffic-separator,.traffic-total{color:var(--text-secondary)}.traffic-buy-btn{background:var(--success-color);border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;color:#fff;cursor:pointer;transition:all .3s ease}.traffic-buy-btn:hover{background:#45a049;transform:scale(1.05)}.profile-info-text{font-size:12px;color:var(--text-secondary);text-align:center;margin-bottom:16px;display:flex;align-items:center;justify-content:center}.referral-card{background:linear-gradient(135deg,#9c27b033,#9c27b01a);border:1px solid rgba(156,39,176,.3);margin-bottom:16px}.referral-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.referral-icon{width:48px;height:48px;border-radius:12px;background:#9c27b04d;display:flex;align-items:center;justify-content:center;color:#9c27b0;flex-shrink:0}.referral-content{flex:1}.referral-content h3{font-size:16px;font-weight:600;margin-bottom:4px}.referral-content p{font-size:13px;color:var(--text-secondary)}.referral-arrow{background:none;border:none;font-size:24px;color:var(--text-secondary);cursor:pointer}.referral-actions{display:flex;gap:8px}.referral-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:10px;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .3s ease}.referral-btn.secondary{background:#ffffff1a;color:var(--text-primary)}.referral-btn.secondary:hover{background:#ffffff26}.referral-btn.primary{background:#9c27b0;color:#fff}.referral-btn.primary:hover{background:#7b1fa2;transform:translateY(-2px);box-shadow:0 8px 20px #9c27b066}.empty-state{text-align:center;padding:40px 20px}.empty-icon{font-size:64px;margin-bottom:16px}.empty-state h2,.empty-state h4{font-size:20px;margin-bottom:8px}.empty-state p{font-size:14px;color:var(--text-secondary);margin-bottom:8px}.empty-state .glass-button{margin-top:16px;max-width:300px;margin-left:auto;margin-right:auto}.loading-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;gap:16px}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:9999;animation:toastSlide .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.toast-hide{animation:toastSlideOut .3s ease}@keyframes toastSlide{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,20px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease}@media (max-width: 480px){.header{padding:10px 12px;min-height:56px}.header-logo{width:40px;height:40px;border-radius:10px}.header-user-info{font-size:11px;gap:4px}.header-label{font-size:10px}.header-badge{padding:4px 8px;font-size:11px;gap:3px}.header-badge svg{width:14px;height:14px}.header-icon-btn{width:36px;height:36px}.header-icon-btn svg{width:18px;height:18px}.language-badge{font-size:11px}.main-content{padding:12px}.glass-card{padding:16px}.stats-summary{gap:8px}.stat-item{padding:12px 8px;gap:8px}.stat-icon{font-size:24px}.stat-label{font-size:10px}.stat-value{font-size:14px}.qrcode-container svg{max-width:250px;height:auto}.profile-avatar-large{width:56px;height:56px;font-size:24px}.profile-name{font-size:16px}.profile-stats-grid{grid-template-columns:1fr}.stat-card-value{font-size:20px}.vpn-setup-btn{font-size:15px;padding:14px}.referral-actions{flex-direction:column}.referral-btn{width:100%}}.tariffs-page{padding-bottom:100px}.tariffs-header{text-align:center;margin-bottom:20px}.tariffs-header h1{font-size:22px;font-weight:700;margin-bottom:4px}.tariffs-header p{font-size:13px;color:var(--text-secondary)}.plan-tabs{display:flex;gap:8px;margin-bottom:16px}.plan-tab{flex:1;padding:10px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;position:relative;transition:all .2s}.plan-tab.active{background:#ffffff1a}.plan-badge{position:absolute;top:-8px;right:4px;background:#ff6b6b;color:#fff;font-size:9px;padding:2px 5px;border-radius:6px;font-weight:700}.plan-card{margin-bottom:16px;padding:16px!important}.plan-card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.plan-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.plan-title{font-size:15px;color:var(--text-secondary)}.plan-title strong{color:var(--text-primary);font-size:16px}.period-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.period-btn{position:relative;padding:10px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;cursor:pointer;text-align:center;transition:all .2s}.period-btn.active{border-color:transparent}.period-discount{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#ff6b6b;color:#fff;font-size:9px;padding:1px 4px;border-radius:4px;font-weight:700;white-space:nowrap}.period-label{font-size:11px;color:#ffffffb3;margin-bottom:4px}.period-price{font-size:14px;font-weight:700;color:#fff}.period-old-price{font-size:10px;color:#fff6;text-decoration:line-through}.pay-btn{width:100%;padding:16px;font-size:16px;font-weight:700;border-radius:14px;border:none;cursor:pointer;color:#fff;margin-bottom:8px;transition:all .2s}.pay-btn:hover{opacity:.9;transform:translateY(-1px)}.payment-note{text-align:center;font-size:12px;color:var(--text-secondary)}.payment-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;z-index:1000;display:flex;align-items:flex-end}.payment-modal{background:#1a1a2e;border-radius:20px 20px 0 0;width:100%;max-height:70vh;overflow-y:auto}.payment-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-weight:600;font-size:16px;border-bottom:1px solid rgba(255,255,255,.1)}.payment-modal-close{background:none;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer;padding:4px 8px}.tariffs-section{margin-bottom:16px;padding:16px!important}.tariffs-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.tariffs-header-row h3{font-size:16px;font-weight:700}.balance-badge{font-size:13px;color:var(--text-secondary)}.balance-badge strong{color:#4caf50}.plan-card-inner{background:#ffffff0d;border-radius:12px;padding:12px;margin-bottom:12px}.topup-section{margin-bottom:16px}.topup-title{font-size:16px;font-weight:700;margin-bottom:12px}.topup-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.topup-amount-btn{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.topup-amount-btn.active{background:var(--success-color);border-color:var(--success-color)}.topup-custom-input{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:var(--text-primary);font-size:14px;margin-bottom:12px;box-sizing:border-box}.topup-pay-btn{width:100%;padding:14px;border-radius:12px;border:none;background:var(--success-color);color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:8px;transition:opacity .2s}.topup-pay-btn:disabled{opacity:.5;cursor:not-allowed}.payment-methods-title{font-size:13px;font-weight:600;color:var(--text-secondary, rgba(255,255,255,.6));margin-bottom:8px}.payment-methods-loading{font-size:13px;color:var(--text-secondary, rgba(255,255,255,.5));margin-bottom:12px}.payment-methods-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:8px}.payment-method-tile{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--text-primary);font-size:13px;text-align:left;cursor:pointer;transition:all .15s;white-space:nowrap;overflow:hidden}.payment-method-tile.active{background:#00d9ff1f;border-color:var(--success-color, #00D9FF);color:var(--success-color, #00D9FF)}.payment-method-icon{font-size:16px;flex-shrink:0}.payment-method-name{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis}.payment-show-crypto{width:100%;padding:7px;border-radius:8px;border:1px dashed rgba(255,255,255,.15);background:transparent;color:#fff6;font-size:12px;cursor:pointer;margin-bottom:8px;transition:all .15s}.payment-show-crypto:hover{color:#ffffffb3;border-color:#ffffff4d}.topup-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}.topup-tab{padding:9px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#ffffff80;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}.topup-tab.active{background:#00d9ff1f;border-color:var(--success-color, #00D9FF);color:var(--success-color, #00D9FF)}.stars-info{font-size:13px;color:#ffffffb3;margin-bottom:12px;padding:10px 12px;border-radius:10px;background:#ffd70012;border:1px solid rgba(255,215,0,.15);line-height:1.6}.stars-packages{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.stars-package-btn{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,215,0,.2);background:#ffd7000d;color:var(--text-primary);font-size:14px;cursor:pointer;transition:all .15s}.stars-package-btn:hover:not(:disabled){background:#ffd7001f;border-color:#ffd70066}.stars-package-btn:disabled{opacity:.5}.stars-pkg-left{font-weight:600}.stars-pkg-right{color:#fff9;font-size:13px}body.modal-open .bottom-nav{display:none!important}.combined-stats-card{display:flex;flex-direction:row;align-items:center;justify-content:space-around;padding:12px 16px!important;gap:12px}.combined-stat-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.combined-stat-icon{font-size:24px;flex-shrink:0}.combined-stat-value{font-size:16px;font-weight:700;color:var(--text-primary);text-align:center;line-height:1.2}.combined-stat-label{font-size:11px;color:var(--text-secondary);text-align:center;line-height:1}.combined-divider{width:1px;height:50px;background:#ffffff26;flex-shrink:0}@media (max-width: 480px){.combined-stats-card{padding:10px 12px!important;gap:8px}.combined-stat-icon{font-size:22px}.combined-stat-value{font-size:14px}.combined-stat-label{font-size:10px}.combined-divider{height:45px}}.payment-methods-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px}.payment-method-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#fff;font-size:11px;font-weight:600;padding:12px 4px;height:44px;cursor:pointer;transition:all .2s ease;text-align:center;width:100%}.payment-method-btn:hover{background:#ffffff26}.payment-method-btn.loading{opacity:.6}.payment-footer{text-align:center;font-size:12px;color:var(--text-secondary);padding:8px 16px 16px}.payment-footer a{color:#ff6b35}.confirm-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:flex-end;justify-content:center;z-index:1000;padding:0 0 20px}.confirm-modal{background:#1a1a2e;border:1px solid rgba(255,255,255,.1);border-radius:20px 20px 16px 16px;padding:24px 20px 20px;width:100%;max-width:420px;text-align:center}.confirm-modal-icon{display:flex;justify-content:center;margin-bottom:8px}.confirm-modal-title{font-size:18px;font-weight:700;margin-bottom:16px}.confirm-modal-compare{display:flex;align-items:center;gap:8px;margin-bottom:16px}.confirm-compare-item{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a}.confirm-compare-item.new{border-width:2px}.compare-label{font-size:11px;color:#fff6;margin-bottom:4px}.compare-name{font-size:14px;font-weight:700;margin-bottom:2px}.compare-details{font-size:11px;color:#ffffff80}.confirm-compare-arrow{font-size:18px;color:#fff6;flex-shrink:0}.confirm-modal-info{background:#ffffff0a;border-radius:10px;padding:12px;margin-bottom:12px}.confirm-info-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:#ffffffb3}.confirm-info-row.price{border-top:1px solid rgba(255,255,255,.1);margin-top:6px;padding-top:8px;font-weight:700;color:#fff;font-size:14px}.confirm-modal-note{font-size:12px;color:#fff6;margin-bottom:16px;line-height:1.5}.confirm-modal-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.confirm-btn-cancel{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:transparent;color:#fff9;font-size:14px;font-weight:600;cursor:pointer}.confirm-btn-ok{padding:12px;border-radius:10px;border:none;color:#fff;font-size:14px;font-weight:700;cursor:pointer}.confirm-btn-ok:disabled{opacity:.5}.devices-section{margin-bottom:16px}.devices-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.devices-header h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin:0}.device-refresh-btn{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#ffffff80;font-size:16px;cursor:pointer}.device-meta{font-size:11px;color:#fff6;margin-top:2px}.device-add-btn{padding:6px 12px;border-radius:8px;border:1px solid rgba(0,217,255,.4);background:#00d9ff14;color:var(--success-color, #00D9FF);font-size:12px;font-weight:600;cursor:pointer}.device-add-form{display:flex;gap:8px;margin-bottom:12px}.device-name-input{flex:1;padding:9px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:var(--text-primary);font-size:13px}.device-save-btn{padding:9px 14px;border-radius:8px;border:none;background:var(--success-color, #00D9FF);color:#000;font-size:13px;font-weight:700;cursor:pointer}.device-save-btn:disabled{opacity:.4}.devices-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;color:#ffffff4d;font-size:13px}.devices-list{display:flex;flex-direction:column;gap:6px}.device-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.07)}.device-icon-wrap{color:#fff6;flex-shrink:0}.device-info{flex:1}.device-name{font-size:14px;font-weight:500}.device-remove-btn{width:28px;height:28px;border-radius:6px;border:none;background:#ff3c3c26;color:#ff5050cc;font-size:12px;cursor:pointer;flex-shrink:0}.theme-aurora{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(60% 45% at 20% 20%,rgba(112,0,255,.45),transparent 70%),radial-gradient(55% 45% at 80% 25%,rgba(0,217,255,.3),transparent 70%),radial-gradient(65% 50% at 50% 85%,rgba(255,0,128,.22),transparent 70%),#08080f;animation:auroraShift 18s ease-in-out infinite alternate}@keyframes auroraShift{0%{filter:hue-rotate(0deg) saturate(1);transform:scale(1)}50%{filter:hue-rotate(25deg) saturate(1.15);transform:scale(1.04)}to{filter:hue-rotate(-20deg) saturate(1.05);transform:scale(1.02)}}.theme-grid{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:#07080d;background-image:linear-gradient(rgba(0,217,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,217,255,.07) 1px,transparent 1px),radial-gradient(70% 55% at 50% 0%,rgba(112,0,255,.28),transparent 70%);background-size:44px 44px,44px 44px,100% 100%;animation:gridDrift 24s linear infinite}@keyframes gridDrift{0%{background-position:0 0,0 0,center}to{background-position:44px 44px,44px 44px,center}}.key-tabs{display:flex;width:100%;gap:0;margin-bottom:0;position:relative;z-index:2}.key-tab{flex:1 1 50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);background:#ffffff08;color:#fff9;font-size:13px;font-weight:500;padding:11px 10px;border-radius:14px 14px 0 0;cursor:pointer;transition:background .18s ease,color .18s ease}.key-tab:first-child{border-right:none}.key-tab.active{background:#1a1c2a6b;color:#fff;border-bottom:none;position:relative;z-index:3}.key-tab-body{border:1px solid rgba(255,255,255,.12);border-top:none;border-radius:0 0 16px 16px;background:#1a1c2a6b;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:16px;position:relative;z-index:1}.key-sub-link{display:block;width:100%;margin-top:12px;padding:12px;text-align:center;font-size:13px;color:var(--accent, #00D9FF);background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer}.key-sub-link:hover{background:#ffffff14}.key-url{font-size:11px;word-break:break-all;background:#00000047;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px;margin-bottom:10px;color:#ffffffd9}.key-divider{height:1px;margin:14px 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);border:none}.key-stores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.key-store{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#ffffffd9;font-size:11px;line-height:1.2;text-align:center;cursor:pointer;transition:background .15s ease}.key-store:hover{background:#ffffff17}.key-store-icon{width:30px;height:30px;border-radius:8px;object-fit:cover;display:block;box-shadow:0 2px 8px #00000059}.router-card{margin-top:14px;margin-bottom:18px}.router-body{border:1px solid rgba(255,255,255,.12);border-bottom:none;border-radius:16px 16px 0 0;background:#1a1c2a6b;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:16px}.router-tabs{display:flex;width:100%;gap:0;margin-top:0;position:relative;z-index:2}.router-tab{flex:1 1 50%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.12);border-top:none;background:#ffffff08;color:#fff9;font-size:13px;font-weight:500;padding:11px 10px;border-radius:0 0 14px 14px;cursor:pointer;transition:background .18s ease,color .18s ease}.router-tab:first-child{border-right:none}.router-tab.active{background:#1a1c2a6b;color:#fff;border-top:none}.router-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.router-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:var(--accent, #00D9FF)}.router-proto{display:flex;gap:10px;margin-bottom:10px;align-items:stretch}.router-proto-logo{flex:0 0 84px;width:84px;height:84px;align-self:flex-start;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;display:flex;align-items:center;justify-content:center;padding:4px;overflow:hidden}.router-proto-actions{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;height:84px}.router-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 10px;font-size:12px;line-height:1.2;flex:1 1 auto;white-space:normal}.router-proto-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;flex:1 1 0;min-height:0;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#ffffffeb;font-size:12px;line-height:1.15;text-align:center;cursor:pointer;transition:background .15s ease,border-color .15s ease}.router-proto-btn:hover{background:#ffffff17}.router-proto-btn.primary{background:#00d9ff24;border-color:#00d9ff59;color:#fff}.router-proto-qr{flex:0 0 52px;width:52px;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#ffffffe6;cursor:pointer;transition:background .15s ease}.router-proto-qr:hover{background:#ffffff1a}.router-proto-row{display:flex;gap:6px;flex:1 1 0;min-height:0;align-items:stretch}.router-qr-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:#06070cd1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.router-qr-card{background:#fff;border-radius:20px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:300px}.router-qr-card p{margin:0;color:#10121a;font-size:12px;font-weight:600;text-align:center}.router-qr-close{border:1px solid rgba(0,0,0,.15);background:#f1f2f6;color:#10121a;border-radius:12px;padding:9px 22px;font-size:12px;font-weight:600;cursor:pointer}.router-proto{display:flex;gap:8px;margin-bottom:10px;align-items:flex-start}.router-proto-logo{flex:0 0 84px;width:84px;height:84px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;display:flex;align-items:center;justify-content:center;padding:4px;overflow:hidden}.router-proto-logo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;display:block}.router-proto-logo svg{width:58px;height:58px}.router-tile{flex:0 0 84px;width:84px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#ffffffe6;font-size:10.5px;font-weight:500;line-height:1.1;text-align:center;cursor:pointer;transition:background .15s ease,border-color .15s ease}.router-tile:hover{background:#ffffff17}.router-tile.primary{background:#00d9ff21;border-color:#00d9ff52;color:#fff}.router-tile.primary:hover{background:#00d9ff33}.router-legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin:12px 0 10px}.router-legend span{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:#ffffff8f}.router-legend svg{opacity:.75}.router-divider{margin:14px 0}.router-note{margin:0 0 2px;font-size:11px;line-height:1.5;color:#ff5f6d;opacity:.92}