:root{--primary-500: #1F90F9;--primary-100: #f0f8ff;--neutral-100: #FAFAFB;--neutral-600: #565D6D;--neutral-700: #1b1f3b;--white: #ffffff;--black: #000000;--s0: .125rem;--s1: .25rem;--s2: .375rem;--s3: .5rem;--s4: .75rem;--s5: 1rem;--s6: 1.25rem;--s7: 1.5rem;--s8: 1.75rem;--s9: 2rem;--s10: 2.25rem;--radius-xs: .125rem;--radius-s: .25rem;--radius-m: .375rem;--radius-l: .625rem;--radius-xl: 1rem;--shadow-xs: 0px 0px 1px rgba(23, 26, 31, .05), 0px 0px 2px rgba(23, 26, 31, .08);--shadow-s: 0px 1px 2.5px rgba(23, 26, 31, .07), 0px 0px 2px rgba(23, 26, 31, .08);--shadow-m: 0px 2px 4px rgba(23, 26, 31, .09), 0px 0px 2px rgba(23, 26, 31, .08);--shadow-l: 0px 4px 7px rgba(23, 26, 31, .13), 0px 0px 2px rgba(23, 26, 31, .08);--shadow-xl: 0px 8.5px 13.75px rgba(23, 26, 31, .22), 0px 0px 2px rgba(23, 26, 31, .08);--shadow-custom: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 2px rgba(23, 26, 31, .12)}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--neutral-100);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-root{min-height:100vh;display:flex;flex-direction:column;padding-top:60px;padding-bottom:70px;background:var(--neutral-100)}.screen{flex:1;padding:var(--s5);overflow-y:auto}.screen.error{color:#d00;text-align:center;padding:40px 20px}.app-header{position:fixed;top:0;left:0;right:0;height:60px;background:var(--white);border-bottom:1px solid rgba(23,26,31,.08);z-index:1001;display:flex;align-items:center;padding:0 var(--s5)}.header-content{flex:1;display:flex;align-items:center;justify-content:space-between;position:relative}.header-title{position:absolute;left:50%;transform:translate(-50%);margin:0;font-size:1.125rem;font-weight:600;color:var(--neutral-700);white-space:nowrap;font-family:Inter,sans-serif}.header-back-btn{background:transparent;border:none;cursor:pointer;padding:var(--s2);margin-right:var(--s3);display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:var(--radius-m);transition:background .2s}.header-back-btn:hover{background:var(--neutral-100)}.header-back-btn svg{display:block}.header-logo{display:flex;align-items:center;gap:var(--s2)}.header-logo-icon{width:32px;height:32px;background:var(--primary-500);border-radius:var(--radius-l);display:flex;align-items:center;justify-content:center}.header-logo-icon svg{display:block}.header-logo-text{font-size:1.125rem;font-weight:600;color:var(--neutral-700);font-family:Inter,sans-serif}.header-wallet-btn{background:transparent;border:none;cursor:pointer;padding:var(--s2);display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:var(--radius-m);transition:background .2s}.header-wallet-btn:hover{background:var(--neutral-100)}.header-wallet-btn svg{display:block}.card{background:var(--white);border-radius:var(--radius-xl);padding:var(--s5);box-shadow:var(--shadow-s);margin-bottom:var(--s4)}.card-title{font-weight:600;margin-bottom:var(--s2);font-size:1rem;color:var(--neutral-700);font-family:Inter,sans-serif}.balance-card{background:var(--neutral-100);border-radius:var(--radius-xl);padding:var(--s5);box-shadow:var(--shadow-custom);margin-bottom:var(--s4)}.balance{font-size:1.5rem;font-weight:700;color:var(--primary-500);margin-top:var(--s2);font-family:Inter,sans-serif;line-height:2.25rem}.card.vpn-status-card{background:#1f90f91a;border-radius:var(--radius-xl);padding:var(--s5);box-shadow:var(--shadow-custom);margin-bottom:var(--s4)}.card.vpn-status-card .card-title{color:var(--primary-500);font-weight:600}.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4)}.home-grid-item{background:var(--white);border-radius:var(--radius-xl);padding:var(--s5);cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow-s);display:flex;flex-direction:column;align-items:center;text-align:center}.home-grid-item:active{transform:scale(.98)}.home-grid-icon{width:32px;height:32px;margin-bottom:var(--s2);display:flex;align-items:center;justify-content:center}.home-grid-icon svg{width:32px;height:32px}.home-grid-title{font-weight:600;font-size:1rem;color:var(--neutral-700);margin-bottom:var(--s1);font-family:Inter,sans-serif}.home-grid-subtitle{font-size:.75rem;color:var(--neutral-600);line-height:1.25rem;font-family:Inter,sans-serif}.button-primary{display:inline-block;width:100%;padding:var(--s4) var(--s5);border-radius:var(--radius-xl);border:none;background:var(--primary-500);color:var(--white);font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s;font-family:Inter,sans-serif}.button-primary:hover:not(:disabled){background:#0673da;opacity:.9}.button-primary:disabled{opacity:.6;cursor:not-allowed}.button-secondary{display:inline-block;width:100%;padding:var(--s4) var(--s5);border-radius:var(--radius-xl);border:1px solid rgba(23,26,31,.1);background:var(--white);color:var(--neutral-700);font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s;font-family:Inter,sans-serif}.button-secondary:hover{background:var(--neutral-100)}.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;font-family:Inter,sans-serif;font-size:10px;line-height:16px;font-weight:400;opacity:1;background:var(--white);z-index:1000;height:64px;box-shadow:0 -2px 8px #171a1f14}.tabbar-menu-item{padding:12px 0;display:flex;flex:1 1 0px;flex-direction:column;align-items:center;justify-content:center;color:var(--neutral-600);background:transparent;border-radius:0;cursor:pointer;white-space:nowrap;border:none;transition:color .2s;font-family:Inter,sans-serif;font-size:10px;line-height:16px;font-weight:400}.tabbar-menu-item.selected{position:relative;font-weight:700;color:var(--primary-500);background:transparent}.tabbar-menu-item.selected .tabbar-icon{color:var(--primary-500)}.tabbar-menu-item:not(.selected) .tabbar-icon{color:var(--neutral-600)}.tabbar-menu-item.selected:hover:active{color:var(--primary-500);background:transparent}.tabbar-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s1);color:inherit}.tabbar-icon svg{width:24px;height:24px;fill:currentColor;display:block}.tabbar-label{font-size:10px;line-height:16px}input[type=text],input[type=number]{font-family:Inter,sans-serif;font-size:1rem}strong{font-weight:600;font-family:Inter,sans-serif}.subscription-card{background:var(--white);border-radius:var(--radius-xl);padding:var(--s5);margin-bottom:var(--s4);box-shadow:var(--shadow-s)}.subscription-header{display:flex;justify-content:flex-end;margin-bottom:var(--s4)}.subscription-status{padding:var(--s1) var(--s4);border-radius:var(--radius-l);font-size:.75rem;font-weight:600;font-family:Inter,sans-serif}.subscription-content{margin-bottom:var(--s5)}.subscription-country{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}.subscription-flag{font-size:24px}.subscription-name{font-weight:600;font-size:1rem;color:var(--neutral-700);font-family:Inter,sans-serif}.subscription-date{font-size:.875rem;color:var(--neutral-600);margin-bottom:var(--s4);font-family:Inter,sans-serif}.subscription-progress-container{width:100%;height:8px;background:#171a1f1a;border-radius:var(--radius-xs);overflow:hidden;margin-bottom:var(--s2)}.subscription-progress-bar{height:100%;background:var(--primary-500);border-radius:var(--radius-xs);transition:width .3s}.subscription-days{font-size:.875rem;color:var(--neutral-600);font-family:Inter,sans-serif}.subscription-actions{display:flex;flex-direction:column;gap:var(--s2)}.subscription-action-btn,.subscription-action-btn-full{display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s3) var(--s5);background:var(--neutral-100);border:none;border-radius:var(--radius-l);font-size:.875rem;color:var(--primary-500);cursor:pointer;transition:background .2s;font-family:Inter,sans-serif;font-weight:500}.subscription-action-btn:hover,.subscription-action-btn-full:hover{background:#171a1f1a}.subscription-action-btn-full{width:100%}.status-badge{padding:var(--s2) var(--s4);border-radius:var(--s7);font-size:.75rem;font-weight:600;font-family:Inter,sans-serif}.detail-row{display:flex;justify-content:space-between;padding:var(--s3) 0;font-size:.875rem;color:var(--neutral-600);border-bottom:1px solid rgba(23,26,31,.08);font-family:Inter,sans-serif}.detail-row:last-child{border-bottom:none}.detail-row span:first-child{color:var(--neutral-700)}.progress-bar-container{width:100%;height:8px;background:#171a1f1a;border-radius:var(--radius-xs);overflow:hidden}.progress-bar{height:100%;background:var(--primary-500);border-radius:var(--radius-xs);transition:width .3s}.instructions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}.instruction-item{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s4);background:var(--neutral-100);border-radius:var(--radius-l);cursor:pointer;transition:background .2s}.instruction-item:hover{background:#171a1f0d}.instruction-item span:first-child{font-size:24px}.instruction-item span:last-child{font-size:.75rem;color:var(--neutral-600);text-align:center;font-family:Inter,sans-serif}.vless-key-container{display:flex;gap:var(--s2);margin-top:var(--s4)}.vless-key{flex:1;padding:var(--s4);background:var(--neutral-100);border-radius:var(--radius-l);font-size:.75rem;color:var(--neutral-600);word-break:break-all;font-family:monospace}.copy-btn{padding:var(--s4);background:var(--neutral-100);border:none;border-radius:var(--radius-l);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.copy-btn:hover{background:#171a1f1a}.quick-topup-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4)}.quick-topup-btn{padding:var(--s5);background:var(--neutral-100);border:1px solid rgba(23,26,31,.1);border-radius:var(--radius-xl);font-size:1rem;font-weight:600;color:var(--neutral-700);cursor:pointer;transition:background .2s;font-family:Inter,sans-serif}.quick-topup-btn:hover:not(:disabled){background:#171a1f0d}.quick-topup-btn:disabled{opacity:.6;cursor:not-allowed}.custom-amount-container{position:relative;margin-top:var(--s4)}.custom-amount-input{width:100%;padding:var(--s4) var(--s10) var(--s4) var(--s5);border:1px solid rgba(23,26,31,.1);border-radius:var(--radius-xl);font-size:1rem;background:var(--neutral-100);font-family:Inter,sans-serif}.currency-symbol{position:absolute;right:var(--s5);top:50%;transform:translateY(-50%);color:var(--neutral-600);font-size:1rem;font-family:Inter,sans-serif}.payment-method-item{display:flex;justify-content:space-between;align-items:center;padding:var(--s5);background:var(--white);border-radius:var(--radius-xl);margin-top:var(--s4);cursor:pointer;transition:background .2s;box-shadow:var(--shadow-s);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.payment-method-item:hover{background:var(--neutral-100)}.payment-method-item:active{background:#171a1f0d}.payment-icon{font-size:24px}.info-box{display:flex;align-items:flex-start;padding:var(--s4);background:var(--neutral-100);border-radius:var(--radius-xl);margin-top:var(--s4)}.info-box span:last-child{font-size:.875rem;color:var(--neutral-600);font-family:Inter,sans-serif;line-height:1.375rem}.filter-tabs{display:flex;gap:var(--s2);margin-bottom:var(--s5);overflow-x:auto;padding-bottom:var(--s2)}.filter-tab{padding:var(--s2) var(--s5);background:var(--neutral-100);border:none;border-radius:var(--s10);font-size:.875rem;font-weight:500;color:var(--neutral-600);cursor:pointer;white-space:nowrap;transition:all .2s;font-family:Inter,sans-serif}.filter-tab.active{background:var(--primary-500);color:var(--white)}.transactions-list{display:flex;flex-direction:column;gap:0}.transaction-item{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--s5);background:var(--white);border-bottom:1px solid rgba(23,26,31,.08)}.transaction-item:last-child{border-bottom:none}.transaction-info{flex:1}.transaction-type{font-weight:600;font-size:.875rem;color:var(--neutral-700);margin-bottom:var(--s1);font-family:Inter,sans-serif}.transaction-date{font-size:.75rem;color:var(--neutral-600);font-family:Inter,sans-serif}.transaction-amount-container{text-align:right}.transaction-amount{font-weight:600;font-size:1rem;margin-bottom:var(--s1);font-family:Inter,sans-serif}.transaction-status{font-size:.75rem;font-family:Inter,sans-serif}.profile-card{padding:var(--s6)}.profile-avatar{width:60px;height:60px;border-radius:50%;background:var(--primary-500);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:600;font-family:Inter,sans-serif}.profile-name{font-size:1.125rem;font-weight:600;color:var(--neutral-700);margin-bottom:var(--s1);font-family:Inter,sans-serif}.profile-username{font-size:.875rem;color:var(--neutral-600);font-family:Inter,sans-serif}.settings-list{margin-top:var(--s4)}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:var(--s5) 0;border-bottom:1px solid rgba(23,26,31,.08);font-size:1rem;color:var(--neutral-700);font-family:Inter,sans-serif}.setting-item:last-child{border-bottom:none}.setting-item.clickable{cursor:pointer}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:var(--primary-500)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.support-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-bottom:var(--s5)}.support-option-card{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s6);background:var(--white);border-radius:var(--radius-xl);cursor:pointer;transition:background .2s;box-shadow:var(--shadow-s)}.support-option-card:hover{background:var(--neutral-100)}.support-icon{font-size:32px}.support-cta-card{background:var(--primary-500);border-radius:var(--radius-xl);padding:var(--s7);text-align:center;margin-bottom:var(--s5);color:var(--white);box-shadow:var(--shadow-m)}.support-cta-icon{width:48px;height:48px;margin-bottom:var(--s4);display:flex;align-items:center;justify-content:center}.support-cta-icon svg{width:48px;height:48px}.support-cta-title{font-size:1.5rem;font-weight:700;margin-bottom:var(--s2);font-family:Inter,sans-serif}.support-cta-subtitle{font-size:.875rem;opacity:.9;margin-bottom:var(--s5);font-family:Inter,sans-serif}.support-cta-button{width:100%;padding:var(--s4) var(--s5);background:var(--white);color:var(--primary-500);border:none;border-radius:var(--radius-l);font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s;font-family:Inter,sans-serif}.support-cta-button:hover{background:#ffffffe6}.faq-list{margin-top:var(--s4)}.faq-item{border-bottom:1px solid rgba(23,26,31,.08);padding:var(--s5) 0}.faq-item:last-child{border-bottom:none}.faq-question{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.875rem;color:var(--neutral-700);cursor:pointer;font-family:Inter,sans-serif}.faq-answer{margin-top:var(--s4);font-size:.875rem;color:var(--neutral-600);line-height:1.375rem;font-family:Inter,sans-serif}.referral-stats-card{background:var(--neutral-100)}.referral-stat-row{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:var(--neutral-600);font-family:Inter,sans-serif}.referral-link-container{margin-top:var(--s4)}.referral-link{padding:var(--s4);background:var(--neutral-100);border-radius:var(--radius-l);font-size:.75rem;color:var(--neutral-600);word-break:break-all;font-family:monospace}.reward-levels{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s4)}.reward-level{display:flex;align-items:center;gap:var(--s4);font-size:.875rem;color:var(--neutral-600);font-family:Inter,sans-serif}.how-it-works{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s4)}.how-it-works-step{display:flex;align-items:flex-start;gap:var(--s4)}.step-number{width:24px;height:24px;border-radius:50%;background:var(--primary-500);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600;flex-shrink:0;font-family:Inter,sans-serif}.plan-card{position:relative;background:var(--neutral-100);border-radius:var(--radius-xl);padding:var(--s5);margin-bottom:var(--s4);box-shadow:var(--shadow-s)}.plan-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s4);gap:var(--s3);min-height:32px}.plan-badge{padding:var(--s1) var(--s4);border-radius:var(--radius-l);font-size:.75rem;font-weight:600;color:var(--white);font-family:Inter,sans-serif;white-space:nowrap;flex-shrink:0;line-height:1.2}.plan-content{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-top:var(--s2)}.plan-name{font-size:1rem;font-weight:600;color:var(--neutral-700);font-family:Inter,sans-serif;flex:1}.plan-price{font-size:1.5rem;font-weight:700;color:var(--primary-500);font-family:Inter,sans-serif;flex:1}.plan-select-btn{padding:var(--s3) var(--s6);background:#171a1f1a;border:none;border-radius:var(--radius-l);font-size:.875rem;font-weight:500;color:var(--neutral-700);cursor:pointer;transition:background .2s;font-family:Inter,sans-serif;white-space:nowrap;flex-shrink:0;min-width:80px}.plan-select-btn:hover{background:#171a1f26}.benefits-list{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s4)}.benefit-item{display:flex;align-items:center;gap:var(--s4);font-size:.875rem;color:var(--neutral-600);font-family:Inter,sans-serif}.benefit-icon{font-size:20px;color:var(--primary-500)}.server-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s5);background:var(--white);border:2px solid rgba(23,26,31,.1);border-radius:var(--radius-xl);margin-bottom:var(--s4);cursor:pointer;transition:border-color .2s;box-shadow:var(--shadow-s)}.server-card:hover{border-color:var(--primary-500)}.server-flag{font-size:24px}.server-name{flex:1;font-size:1rem;font-weight:600;color:var(--neutral-700);font-family:Inter,sans-serif}.server-check{color:var(--primary-500);font-size:20px;font-weight:600}.order-detail-row{display:flex;justify-content:space-between;padding:var(--s4) 0;font-size:.875rem;color:var(--neutral-600);border-bottom:1px solid rgba(23,26,31,.08);font-family:Inter,sans-serif}.order-detail-row:last-child{border-bottom:none}.order-detail-row span:first-child{color:var(--neutral-700)}.payment-secured{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s7);font-size:.875rem;color:var(--neutral-600);font-family:Inter,sans-serif}.os-selector{display:flex;gap:var(--s2);margin-top:var(--s4);overflow-x:auto;padding-bottom:var(--s2)}.os-button{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s4) var(--s5);background:var(--white);border:1px solid rgba(23,26,31,.1);border-radius:var(--radius-xl);cursor:pointer;transition:all .2s;min-width:80px;box-shadow:var(--shadow-s)}.os-button.active{background:var(--primary-500);border-color:var(--primary-500);color:var(--white)}.os-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.os-icon svg{width:100%;height:100%;display:block}.os-label{font-size:.75rem;font-weight:600;font-family:Inter,sans-serif}.instructions-steps{display:flex;flex-direction:column;gap:var(--s5);margin-top:var(--s5)}.instruction-step{display:flex;gap:var(--s4);align-items:flex-start}.instruction-step .step-number{width:32px;height:32px;font-size:1rem}.step-text{flex:1;font-size:.875rem;color:var(--neutral-600);line-height:1.375rem;padding-top:var(--s1);font-family:Inter,sans-serif}