:root,html.theme-light{--bg-main-start: #f7f9fc;--bg-main-end: #eff3f8;--bg-card: #ffffff;--bg-dropdown: #ffffff;--primary-accent: #0d6efd;--primary-accent-hover: #0b5ed7;--bg-secondary-button: #f0f2f5;--bg-secondary-button-hover: #e4e6e9;--text-primary: #181c20;--text-secondary: #6c757d;--text-tertiary: #adb5bd;--text-on-primary: #ffffff;--border-color: #dee2e6;--border-color-light: #f1f3f5;--shadow-color: rgba(0, 0, 0, .05);--text-error: #dc3545;--text-success: #198754;--referral-bg-start: #e6f0ff;--referral-bg-end: #dbeafe;--status-online: #28a745;--status-offline: #6c757d}html.theme-dark{--bg-main-start: #0c0d10;--bg-main-end: #000000;--bg-card: #16181d;--bg-dropdown: #1f2128;--primary-accent: #0d6efd;--primary-accent-hover: #2180ff;--bg-secondary-button: #2c2f37;--bg-secondary-button-hover: #3a3e47;--text-primary: #f8f9fa;--text-secondary: #adb5bd;--text-tertiary: #6c757d;--text-on-primary: #ffffff;--border-color: #2c2f37;--border-color-light: #212429;--shadow-color: rgba(0, 0, 0, .2);--text-error: #f17a86;--text-success: #52b788;--referral-bg-start: #111a2e;--referral-bg-end: #101624;--status-online: #20c997;--status-offline: #495057}html.theme-black-gold{--bg-main-start: #0a0a0a;--bg-main-end: #000000;--bg-card: #141414;--bg-dropdown: #1a1a1a;--primary-accent: #FFD700;--primary-accent-hover: #e6c200;--bg-secondary-button: #2b2b2b;--bg-secondary-button-hover: #383838;--text-primary: #f0e6d2;--text-secondary: #a8a29e;--text-tertiary: #7a7572;--text-on-primary: #000000;--border-color: rgba(255, 215, 0, .2);--border-color-light: rgba(255, 215, 0, .1);--shadow-color: rgba(0, 0, 0, .2);--text-error: #ef4444;--text-success: #34D399;--referral-bg-start: #1c1917;--referral-bg-end: #110f0e;--status-online: #34D399;--status-offline: #7a7572}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:linear-gradient(180deg,var(--bg-main-start) 0%,var(--bg-main-end) 100%);color:var(--text-primary);font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;justify-content:center;padding:24px;overflow-y:auto}#root{width:100%;max-width:900px;height:auto;display:flex;flex-direction:column}a{color:var(--primary-accent);text-decoration:none;font-weight:500}a:hover{text-decoration:underline}.btn{width:100%;padding:14px;border-radius:16px;font-size:16px;font-weight:600;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 15px var(--shadow-color)}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn-primary{background-color:var(--primary-accent);color:var(--text-on-primary)}.btn-primary:hover{background-color:var(--primary-accent-hover)}.btn-secondary{background-color:var(--bg-secondary-button);color:var(--text-primary)}.btn-secondary:hover{background-color:var(--bg-secondary-button-hover)}.card{background-color:var(--bg-card);border-radius:20px;width:100%;box-shadow:0 4px 15px var(--shadow-color)}.status-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;color:var(--text-secondary)}.loader{width:48px;height:48px;border:5px solid var(--border-color);border-bottom-color:var(--primary-accent);border-radius:50%;animation:rotation 1s linear infinite;margin-bottom:20px}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.landing-container{display:flex;flex-direction:column;width:100%;justify-content:center;padding:5vh 0}.hero-section{text-align:center;padding:48px 24px}.hero-section h1{font-size:36px;font-weight:700;margin-bottom:16px;line-height:1.2}.landing-subtitle{font-size:18px;color:var(--text-secondary);max-width:500px;margin:0 auto 24px;line-height:1.6}.hero-section p{color:var(--text-secondary);margin-bottom:32px;max-width:450px;margin-left:auto;margin-right:auto;line-height:1.5}.btn-telegram-login{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 28px;font-size:16px;font-weight:600;border-radius:99px;cursor:pointer;border:none;background:var(--primary-accent);color:var(--text-on-primary);transition:all .2s ease;box-shadow:0 4px 20px #0d6efd33}html.theme-dark .btn-telegram-login{box-shadow:0 4px 20px #0d6efd4d}html.theme-black-gold .btn-telegram-login{box-shadow:0 4px 20px #ffd70033}.btn-telegram-login:hover{background:var(--primary-accent-hover);transform:translateY(-2px);text-decoration:none}.features-section{margin-top:80px;padding:0 16px}.features-section h2{font-size:28px;font-weight:600;text-align:center;margin-bottom:48px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}.feature-card{background:transparent;border:1px solid var(--border-color);border-radius:20px;padding:24px;text-align:center;transition:all .3s ease;opacity:0;transform:translateY(20px);animation:fadeInUp .5s ease-out forwards}.feature-card:nth-child(1){animation-delay:.1s}.feature-card:nth-child(2){animation-delay:.2s}.feature-card:nth-child(3){animation-delay:.3s}.feature-card:nth-child(4){animation-delay:.4s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.feature-card:hover{transform:translateY(-5px);border-color:var(--primary-accent);box-shadow:0 8px 30px -10px var(--primary-accent-hover)}.feature-icon{display:inline-flex;justify-content:center;align-items:center;width:56px;height:56px;border-radius:16px;background-color:var(--bg-secondary-button);color:var(--primary-accent);margin-bottom:20px;transition:all .3s ease}.feature-card:hover .feature-icon{background-color:var(--primary-accent);color:var(--text-on-primary);transform:scale(1.1) rotate(-10deg)}.feature-icon svg{width:28px;height:28px}.feature-card h3{font-size:18px;font-weight:600;margin-bottom:8px}.feature-card p{font-size:15px;color:var(--text-secondary);line-height:1.6}.dashboard-container{width:100%;height:100%;display:flex;flex-direction:column}.main-content{display:flex;flex-direction:column;gap:24px;overflow-y:auto;flex-grow:1;padding:8px;margin:-8px}.main-content::-webkit-scrollbar{width:4px}.main-content::-webkit-scrollbar-track{background:transparent}.main-content::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:10px}.vpn-header{display:flex;justify-content:space-between;align-items:center;padding:12px 0;margin-bottom:16px;flex-shrink:0}.logo-text{font-size:24px;font-weight:700}.menu-container{position:relative}.menu-button{width:40px;height:40px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.menu-button:hover{background-color:var(--bg-secondary-button)}.menu-button svg{color:var(--text-primary)}.dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background-color:var(--bg-dropdown);border:1px solid var(--border-color);border-radius:16px;width:240px;padding:8px;z-index:10;box-shadow:0 8px 24px var(--shadow-color);animation:fadeInScaleUp .2s ease-out}@keyframes fadeInScaleUp{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:12px;padding:10px 12px;font-size:15px;font-weight:500;border-radius:12px;cursor:pointer;transition:background-color .2s ease}.dropdown-item:hover{background-color:var(--bg-secondary-button)}.dropdown-item svg{width:20px;height:20px;color:var(--text-secondary)}.dropdown-item span{color:var(--text-primary)}.dropdown-item.logout span{color:var(--text-error)}.dropdown-item.logout:hover{background-color:#dc35451a}.dropdown-divider{height:1px;background-color:var(--border-color);margin:8px 0}.balance-card{padding:24px;text-align:center}.balance-card h3{color:var(--text-secondary);font-size:16px;font-weight:500;margin-bottom:8px}.balance-amount{font-size:56px;font-weight:700;line-height:1.1;color:var(--text-primary)}.balance-amount-currency{font-weight:500;color:var(--text-tertiary);margin-left:4px}.balance-duration{color:var(--text-secondary);font-size:14px;margin-top:8px}.action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 16px}.action-buttons .btn-secondary{flex-direction:column;height:auto;padding:12px;gap:4px;font-size:13px;font-weight:500}.action-buttons .btn-secondary svg{width:22px;height:22px;margin-bottom:4px}.btn-refill{height:64px;padding:0 24px;gap:16px;box-shadow:0 8px 25px -5px #0d6efd4d;animation:pulse-glow 2s infinite alternate}html.theme-black-gold .btn-refill{box-shadow:0 8px 25px -5px #ffd70033}@keyframes pulse-glow{0%{box-shadow:0 8px 25px -5px #0d6efd33}to{box-shadow:0 8px 30px -3px #0d6efd80}}html.theme-black-gold @keyframes pulse-glow{from{box-shadow:0 8px 25px -5px #ffd70026}to{box-shadow:0 8px 30px -3px #ffd7004d}}.btn-refill svg{width:24px;height:24px;stroke-width:2.5}.devices-card{padding:24px}.devices-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.devices-header h3{font-size:20px;font-weight:600}.devices-header .btn{width:auto;padding:8px 16px;font-size:14px;font-weight:500}.device-item{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:16px;transition:background-color .2s;cursor:pointer}.device-item:hover{background-color:var(--bg-secondary-button)}.device-icon{width:40px;height:40px;background:var(--bg-secondary-button);border-radius:12px;display:flex;align-items:center;justify-content:center}.device-icon svg{width:24px;height:24px}.device-info{flex-grow:1}.device-name{font-weight:600;font-size:16px;display:flex;align-items:center;gap:8px}.device-date{font-size:12px;color:var(--text-secondary)}.device-item .chevron-icon{color:var(--text-tertiary)}.no-devices-message{color:var(--text-secondary);text-align:center;padding:24px 0}.tariff-info{text-align:center;color:var(--text-tertiary);font-size:12px;margin-top:16px}.status-indicator{width:8px;height:8px;border-radius:50%;transition:background-color .3s}.status-indicator.online{background-color:var(--status-online);animation:pulse-online 2s infinite}.status-indicator.offline{background-color:var(--status-offline)}@keyframes pulse-online{0%{box-shadow:0 0 #28a74566}70%{box-shadow:0 0 0 10px #28a74500}to{box-shadow:0 0 #28a74500}}html.theme-dark @keyframes pulse-online{0%{box-shadow:0 0 #20c99766}70%{box-shadow:0 0 0 10px #20c99700}100%{box-shadow:0 0 #20c99700}}.referral-card{padding:24px;text-align:center;background:linear-gradient(135deg,var(--referral-bg-start),var(--referral-bg-end))}.referral-icon svg{width:40px;height:40px;margin-bottom:12px;color:var(--primary-accent)}html.theme-black-gold .referral-icon svg{color:gold}.referral-card h3{font-size:20px;font-weight:600;margin-bottom:8px}.referral-card p{color:var(--text-secondary);line-height:1.6;margin-bottom:24px;max-width:320px;margin-left:auto;margin-right:auto}.referral-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.referral-actions .btn{height:56px;padding:0 12px;gap:8px;font-size:15px}.referral-actions .btn svg{width:22px;height:22px}.instructions-card{padding:8px 24px 16px}.instructions-card>h3{font-size:20px;font-weight:600;margin:16px 0}.screen-overlay{width:100%;height:100%;display:flex;flex-direction:column}.screen-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;flex-shrink:0}.back-button{background:none;border:none;color:var(--text-primary);cursor:pointer;padding:8px;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}.back-button svg{width:24px;height:24px}.screen-header-balance{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;padding:6px 12px;background-color:var(--bg-secondary-button);border-radius:99px}.screen-content{flex-grow:1;overflow-y:auto;padding:8px;margin:-8px}.screen-content::-webkit-scrollbar{display:none}.accordion-item{border-bottom:1px solid var(--border-color-light)}.accordion-item:last-child{border-bottom:none}.accordion-header{display:flex;justify-content:space-between;align-items:center;padding:16px 0;cursor:pointer;font-size:16px;font-weight:500}.accordion-header-title{display:flex;align-items:center;gap:16px}.accordion-header-title .device-icon{background:none}.accordion-icon{transition:transform .3s ease}.accordion-icon.open{transform:rotate(90deg)}.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out,padding-bottom .3s ease-out}.accordion-content .content-inner{font-size:14px;color:var(--text-secondary);line-height:1.6;padding:0}.content-inner p,.content-inner ul,.content-inner ol{margin-bottom:1em}.content-inner ul,.content-inner ol{padding-left:20px}.accordion-content.open{max-height:1000px}.accordion-content.open .content-inner{padding:0 0 20px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:500;padding:16px;animation:fadeIn .3s ease forwards;opacity:0}@keyframes fadeIn{to{opacity:1}}.modal-content{background-color:var(--bg-card);border-radius:20px;width:100%;max-width:440px;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 30px var(--shadow-color);transform:scale(.95);opacity:0;animation:zoomIn .3s .1s ease forwards}@keyframes zoomIn{to{transform:scale(1);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:18px;font-weight:600}.close-button{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:50%;transition:background-color .2s}.close-button:hover{background-color:var(--bg-secondary-button);color:var(--text-primary)}.close-button svg{width:24px;height:24px;display:block}.modal-input{width:100%;background-color:var(--bg-main-start);border:1px solid var(--border-color);color:var(--text-primary);padding:12px;border-radius:12px;font-size:16px;font-weight:500;-moz-appearance:textfield}.modal-input:focus{outline:none;border-color:var(--primary-accent);box-shadow:0 0 0 2px var(--primary-accent-hover)}.qr-code{background-color:#fff;padding:16px;border-radius:12px;display:flex;margin:0 auto}.key-url-input{width:100%;background-color:var(--bg-main-start);border:1px solid var(--border-color);color:var(--text-secondary);font-family:Inter,sans-serif;font-size:13px;padding:12px;border-radius:12px;resize:none;cursor:pointer}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.key-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.5px}.key-status.active{background-color:#d1fae5;color:#065f46}html.theme-dark .key-status.active{background-color:#052e16;color:#34d399}.key-status.inactive{background-color:#fee2e2;color:#991b1b}html.theme-dark .key-status.inactive{background-color:#450a0a;color:#f87171}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#bb2d3b}.mobile-key-modal-content{text-align:center}.mobile-key-modal-content p{font-size:14px;color:var(--text-secondary);margin-bottom:24px}.btn-copy-key{padding-top:20px;padding-bottom:20px;font-size:18px;margin-bottom:8px}.history-content{flex-grow:1;overflow-y:auto;max-height:60vh}.history-day-group{margin-bottom:16px}.history-day-header{padding-bottom:8px;font-size:14px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border-color-light);margin-bottom:8px}.transaction-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:15px}.transaction-details{display:flex;flex-direction:column}.transaction-description{font-weight:500}.transaction-time{font-size:12px;color:var(--text-secondary)}.transaction-amount{font-weight:600}.transaction-amount.refill{color:var(--text-success)}.transaction-amount.deduction{color:var(--text-error)}.no-history-message{text-align:center;padding:16px;color:var(--text-secondary);font-size:14px}.payment-tabs{display:flex;background-color:var(--bg-secondary-button);border-radius:12px;padding:4px;margin-bottom:16px}.payment-tab{flex:1;padding:8px 12px;border:none;background:none;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;border-radius:10px;transition:all .2s ease}.payment-tab.active{background-color:var(--bg-card);color:var(--text-primary);box-shadow:0 2px 4px var(--shadow-color)}.refill-section{display:flex;flex-direction:column;gap:16px;text-align:center}.refill-section p{color:var(--text-secondary);font-size:14px;line-height:1.6}.refill-section a.btn-primary{width:auto;align-self:center;padding:12px 24px}.refill-section label{font-size:14px;color:var(--text-secondary);text-align:left;margin-bottom:-8px}.amount-input{width:100%;background-color:var(--bg-main-start);border:1px solid var(--border-color);color:var(--text-primary);padding:12px;border-radius:12px;font-size:18px;font-weight:500;text-align:center;-moz-appearance:textfield}.amount-input::-webkit-outer-spin-button,.amount-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.amount-presets{display:flex;gap:12px;justify-content:center}.amount-preset-btn{flex-grow:1;padding:10px;background:none;border:1px solid var(--border-color);color:var(--text-primary);border-radius:12px;cursor:pointer;font-weight:500;transition:all .2s ease}.amount-preset-btn:hover{background-color:var(--bg-secondary-button);border-color:var(--primary-accent)}.notification{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-100px);background-color:var(--bg-dropdown);color:var(--text-primary);padding:12px 24px;border-radius:12px;box-shadow:0 4px 12px var(--shadow-color);z-index:1000;font-size:15px;font-weight:500;opacity:0;transition:transform .3s ease,opacity .3s ease;border:1px solid var(--border-color)}.notification.show{transform:translate(-50%) translateY(0);opacity:1}@media (max-width: 768px){body{padding:16px}#root{max-width:100%}.features-grid{grid-template-columns:1fr}}@media (max-width: 400px){.balance-amount{font-size:48px}}