:root{--bg-primary: #0f1419;--bg-secondary: #1a1f26;--bg-tertiary: #252a31;--glass-bg: rgba(25, 15, 30, .7);--glass-border: rgba(255, 255, 255, .08);--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:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;position:relative}.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)}}.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:var(--primary-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 24px;color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;outline:none;width:100%;margin-bottom:8px;display:flex;align-items:center;justify-content:center}.glass-button:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 8px 20px #0000004d}.glass-button:active{transform:translateY(0)}.glass-button.primary{background:var(--primary-color)}.glass-button.primary:hover{background:var(--primary-hover)}.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{fill:var(--text-primary)}.nav-item:hover:not(.active){background:#ffffff0d;color:var(--text-primary)}.nav-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.nav-icon svg{width:24px;height:24px;fill: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}.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-info{flex:1}.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:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px}.stat-icon{font-size:32px}.stat-content{text-align:center}.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{margin-bottom:16px;padding:20px!important}.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}.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:var(--text-primary);line-height:1.2}.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-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{grid-template-columns:1fr}.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%}}