#configModal.modal-overlay{position:fixed;inset:0;z-index:99999;background:#000c;backdrop-filter:blur(20px);display:none;align-items:center;justify-content:center;padding:20px}#configModal.modal-overlay.active{display:flex!important}#configModal .modal-container{width:100%;max-width:480px}#configModal .modal-content{background:#0a0a0f;border:1px solid rgba(104,186,127,.12);border-radius:1.5rem;padding:2rem;box-shadow:0 20px 60px #0009;animation:modalFadeIn .3s ease}#configModal .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}#configModal .modal-close{background:#ffffff0f;border:none;color:#8e8e93;font-size:1.5rem;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}#configModal .modal-body{color:#f2f2f7;font-family:Inter,sans-serif}.link-wrapper{display:flex;gap:.5rem;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:.5rem;padding:.25rem;margin-bottom:.75rem}.link-wrapper input{flex:1;background:transparent;border:none;padding:.6rem .8rem;color:#e5e7eb;font-size:.8rem;font-family:monospace;outline:none}.copy-btn{padding:.4rem 1rem;background:linear-gradient(135deg,#2e6f40,#68ba7f);border:none;border-radius:.4rem;color:#f2f2f7;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap;font-family:Inter,sans-serif}.copy-btn:hover{transform:scale(1.02);box-shadow:0 4px 15px #2e6f404d}.copy-btn.copied{background:#22c55e}#renewModal.modal-overlay{position:fixed;inset:0;z-index:99999;background:#000c;backdrop-filter:blur(20px);display:none;align-items:center;justify-content:center;padding:20px}#renewModal.modal-overlay.active{display:flex!important}#renewModal .modal-container{width:100%;max-width:420px}#renewModal .modal-content{background:#0a0a0f;border:1px solid rgba(104,186,127,.12);border-radius:1.5rem;padding:2rem;box-shadow:0 20px 60px #0009;animation:modalFadeIn .3s ease}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}#renewModal .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.modal-header h3{color:#f2f2f7;font-size:1.2rem;font-weight:700;margin:0;font-family:Inter,sans-serif}#renewModal .modal-close{background:#ffffff0f;border:none;color:#8e8e93;font-size:1.5rem;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.modal-close:hover{background:#ffffff1f;color:#f2f2f7}#renewModal .modal-body{color:#f2f2f7;font-family:Inter,sans-serif}.modal-subtitle{color:#8e8e93;font-size:.9rem;margin-bottom:1rem}.renew-periods{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}.renew-period-btn{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:.5rem;border:2px solid rgba(255,255,255,.06);background:#ffffff05;color:#d1d5db;cursor:pointer;transition:all .3s ease;width:100%;font-family:Inter,sans-serif;font-size:.9rem}.renew-period-btn:hover{border-color:#ffffff1f;background:#ffffff0a}.renew-period-btn.active{border-color:#68ba7f;background:#2e6f4014;color:#f2f2f7}.renew-period-btn .period-months{font-weight:600}.renew-period-btn .period-price{font-weight:600;color:#68ba7f}.renew-period-btn .period-discount{font-size:.7rem;color:#f59e0b;background:#f59e0b1a;padding:.1rem .6rem;border-radius:.75rem}.renew-total{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-top:1px solid rgba(255,255,255,.06);margin-top:.5rem}.renew-total-label{font-size:.9rem;font-weight:600;color:#f2f2f7}.renew-total-price{font-size:1.3rem;font-weight:800;color:#68ba7f;font-family:Orbitron,sans-serif}.modal-actions{display:flex;gap:.75rem;margin-top:.5rem}.modal-actions .btn{flex:1;padding:.6rem 1.5rem;border-radius:.5rem;font-size:.85rem;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;transition:all .3s ease;border:none;font-family:Inter,sans-serif}.modal-actions .btn-outline{background:#ffffff0a;color:#8e8e93;border:1px solid rgba(255,255,255,.08)}.modal-actions .btn-outline:hover{background:#ffffff14;color:#f2f2f7}.modal-actions .btn-primary{background:linear-gradient(135deg,#2e6f40,#68ba7f);color:#f2f2f7}.modal-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 20px #2e6f404d}.subscribe-page{padding-top:80px;min-height:100vh;background:#0a0a0f}.subscribe-container{max-width:1000px;margin:0 auto;padding:2rem 1.5rem}.subscribe-header{text-align:center;margin-bottom:2.5rem}.subscribe-badge{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.1em;color:#68ba7f;background:#2e6f4026;padding:.3rem 1.2rem;border-radius:2rem;border:1px solid rgba(46,111,64,.2);margin-bottom:.75rem;font-family:Inter,sans-serif}.subscribe-title{font-size:2rem;font-weight:700;color:#f2f2f7;font-family:Orbitron,sans-serif;letter-spacing:.05em;margin:0}.subscribe-title .text-gradient{background:linear-gradient(135deg,#2e6f40,#68ba7f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subscribe-subtitle{color:#8e8e93;font-size:.95rem;margin-top:.5rem;font-family:Inter,sans-serif}.loading-state{text-align:center;padding:3rem 0;color:#8e8e93;font-family:Inter,sans-serif}.loading-spinner{width:40px;height:40px;margin:0 auto 1rem;border:3px solid rgba(255,255,255,.1);border-top-color:#68ba7f;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.subscriptions-grid{display:flex;flex-direction:column;gap:1.5rem}.subscription-card{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:1.25rem;padding:1.25rem 1.5rem;transition:all .3s ease;width:100%}.subscription-card:hover{border-color:#2e6f4026;box-shadow:0 0 40px #2e6f4026}.subscription-card.active{border-left:4px solid #68BA7F}.subscription-card.inactive{opacity:.6}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem;flex-wrap:wrap;gap:.6rem}.card-title-group{display:flex;align-items:center;gap:1rem}.device-icon{font-size:2.2rem;flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#ffffff0a;border-radius:.75rem}.device-name{font-size:1.15rem;font-weight:600;color:#f2f2f7;font-family:Inter,sans-serif;margin:0}.plan-name-small{font-size:.8rem;color:#8e8e93;font-family:Inter,sans-serif;display:block;margin-top:.1rem}.status-badge{font-size:.65rem;font-weight:600;padding:.25rem .75rem;border-radius:2rem;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}.status-badge.active{color:#34d399;background:#34d39926}.status-badge.expired{color:#ef4444;background:#ef444426}.status-badge.cancelled{color:#f59e0b;background:#f59e0b26}.status-badge.unknown{color:#8e8e93;background:#8e8e9326}.card-body{display:flex;flex-direction:column;gap:.85rem}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.info-item{display:flex;flex-direction:column;gap:.2rem;background:#ffffff05;padding:.5rem .85rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.03)}.info-item .label{font-size:.6rem;font-weight:600;color:#8e8e93;text-transform:uppercase;letter-spacing:.04em;font-family:Inter,sans-serif}.info-item .value{font-size:.9rem;font-weight:500;color:#f2f2f7;font-family:Inter,sans-serif}.info-item .value.good{color:#34d399}.info-item .value.warning{color:#f59e0b}.info-item .value.danger{color:#ef4444}.info-item .value.sub-id{font-family:monospace;font-size:.7rem;color:#636366}.traffic-section{margin:.25rem 0}.traffic-bar-wrapper{width:100%;height:6px;background:#ffffff0f;border-radius:3px;overflow:hidden}.traffic-bar{height:100%;background:linear-gradient(90deg,#2e6f40,#68ba7f);border-radius:3px;transition:width .6s ease}.traffic-bar.danger{background:linear-gradient(90deg,#ef4444,#f97316)}.card-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:0}.btn{padding:.55rem 1.5rem;border-radius:.5rem;font-size:.85rem;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;transition:all .3s ease;border:none;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}.btn-primary{background:linear-gradient(135deg,#2e6f40,#68ba7f);color:#f2f2f7}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 20px #2e6f404d}.btn-outline{background:#ffffff0a;color:#8e8e93;border:1px solid rgba(255,255,255,.08)}.btn-outline:hover{background:#ffffff14;color:#f2f2f7;border-color:#ffffff26}.add-subscription-wrapper{margin-top:2.5rem;text-align:center}.add-subscription-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2.5rem;background:#ffffff0a;border:2px dashed rgba(255,255,255,.08);border-radius:.75rem;color:#8e8e93;font-size:1rem;font-weight:600;font-family:Inter,sans-serif;text-decoration:none;transition:all .3s ease}.add-subscription-btn:hover{border-color:#2e6f404d;color:#68ba7f;background:#2e6f400d;transform:translateY(-2px)}.plus-icon{font-size:1.3rem;font-weight:700}.no-subscription-wrapper{display:flex;justify-content:center;align-items:center;min-height:350px}.no-subscription-card{text-align:center;max-width:550px;padding:3rem 2.5rem;background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:1.5rem}.no-subscription-icon{font-size:4.5rem;display:block;margin-bottom:1rem}.no-subscription-title{font-size:1.6rem;font-weight:700;color:#f2f2f7;font-family:Orbitron,sans-serif;letter-spacing:.02em;margin:0 0 .5rem}.no-subscription-title span{color:#68ba7f}.no-subscription-text{color:#8e8e93;font-size:.95rem;font-family:Inter,sans-serif;line-height:1.6;margin:0 0 1.5rem}.no-subscription-features{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1.5rem 0}.no-subscription-feature{background:#ffffff05;padding:.75rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.03);text-align:center}.no-subscription-feature .emoji{font-size:1.5rem;display:block;margin-bottom:.25rem}.no-subscription-feature .title{font-size:.7rem;font-weight:600;color:#f2f2f7;display:block;font-family:Inter,sans-serif}.no-subscription-feature .desc{font-size:.6rem;color:#8e8e93;display:block;font-family:Inter,sans-serif}.no-subscription-btn{display:inline-block;padding:.75rem 3rem;background:linear-gradient(135deg,#2e6f40,#68ba7f);border:none;border-radius:.6rem;color:#f2f2f7;font-size:.95rem;font-weight:600;font-family:Inter,sans-serif;text-decoration:none;transition:all .3s ease}.no-subscription-btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px #2e6f404d}@media (max-width: 768px){.subscribe-container{padding:1rem}.subscribe-title{font-size:1.5rem}.info-grid{grid-template-columns:1fr 1fr;gap:.5rem}.subscription-card{padding:1.25rem}.card-header{flex-direction:column;align-items:flex-start}.no-subscription-features{grid-template-columns:1fr 1fr}}@media (max-width: 480px){.subscribe-container{padding:.75rem}.info-grid{grid-template-columns:1fr}.card-header{flex-direction:column;align-items:flex-start}.card-actions{flex-direction:column}.card-actions .btn{width:100%;justify-content:center}.subscription-card{padding:1rem}.no-subscription-features{grid-template-columns:1fr}.no-subscription-card{padding:2rem 1.5rem}.no-subscription-title{font-size:1.3rem}}.auto-renewal-block{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem .9rem;background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:.5rem;margin:0;flex-wrap:wrap;transition:border-color .2s}.auto-renewal-block:hover{border-color:#68ba7f26}.auto-renewal-info{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}.auto-renewal-label{font-size:.9rem;font-weight:600;color:#f2f2f7;font-family:Inter,sans-serif}.auto-renewal-hint{font-size:.75rem;color:#8e8e93;font-family:Inter,sans-serif;line-height:1.4}.auto-renewal-hint.warning{color:#f59e0b}.auto-renewal-hint.danger{color:#ef4444}.auto-renewal-hint.success{color:#34d399}.auto-renewal-switch{position:relative;width:44px;height:24px;flex-shrink:0;cursor:pointer}.auto-renewal-switch input{opacity:0;width:0;height:0}.auto-renewal-switch input:checked+.auto-renewal-slider{background:linear-gradient(135deg,#2e6f40,#68ba7f)}.auto-renewal-switch input:checked+.auto-renewal-slider:before{transform:translate(20px)}.auto-renewal-switch input:disabled+.auto-renewal-slider{opacity:.5;cursor:not-allowed}.auto-renewal-switch input:disabled+.auto-renewal-slider:before{opacity:.7}.auto-renewal-slider{position:absolute;inset:0;background:#ffffff1a;border-radius:24px;transition:all .3s ease}.auto-renewal-slider:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#f2f2f7;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 8px #0003}@media (max-width: 480px){.auto-renewal-block{padding:.8rem .9rem}.auto-renewal-label{font-size:.85rem}.auto-renewal-hint{font-size:.7rem}}.devices-block{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem .9rem;background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:.5rem;flex-wrap:wrap}.devices-info{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}.devices-label{font-size:.85rem;font-weight:600;color:#f2f2f7;font-family:Inter,sans-serif}.devices-limits{font-size:.75rem;color:#8e8e93;font-family:Inter,sans-serif;line-height:1.4}.devices-limits.warning{color:#f59e0b}.devices-limits.danger{color:#ef4444}.devices-btn{padding:.45rem .9rem;border-radius:.4rem;background:#68ba7f1a;border:1px solid rgba(104,186,127,.3);color:#68ba7f;font-size:.8rem;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;transition:all .2s;white-space:nowrap}.devices-btn:hover{background:#68ba7f33;border-color:#68ba7f}.devices-modal-overlay{display:none;position:fixed;inset:0;background:#000000bf;backdrop-filter:blur(6px);z-index:1000;justify-content:center;align-items:flex-start;padding:3rem 1rem;overflow-y:auto}.devices-modal-overlay.active{display:flex}.devices-modal{background:#14141a;border:1px solid rgba(255,255,255,.08);border-radius:1rem;width:100%;max-width:560px;box-shadow:0 20px 60px #0009;overflow:hidden}.devices-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.06)}.devices-modal-title{font-size:1.1rem;font-weight:700;color:#f2f2f7;font-family:Inter,sans-serif;margin:0}.devices-modal-close{background:none;border:none;color:#8e8e93;font-size:1.8rem;line-height:1;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:.4rem}.devices-modal-close:hover{background:#ffffff0d;color:#f2f2f7}.devices-modal-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.2rem;max-height:60vh;overflow-y:auto}.devices-section-title{font-size:.75rem;font-weight:700;color:#8e8e93;text-transform:uppercase;letter-spacing:.05em;font-family:Inter,sans-serif;margin-bottom:.5rem}.devices-list{display:flex;flex-direction:column;gap:.5rem}.device-item{display:flex;gap:.75rem;padding:.8rem 1rem;background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:.5rem;align-items:center}.device-icon-box{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#68ba7f1a;border-radius:.5rem;font-size:1.4rem;flex-shrink:0}.device-info{flex:1;min-width:0}.device-name{font-size:.9rem;font-weight:600;color:#f2f2f7;font-family:Inter,sans-serif;margin:0 0 .15rem}.device-meta{font-size:.75rem;color:#8e8e93;font-family:Inter,sans-serif}.devices-empty{text-align:center;padding:1.5rem 1rem;color:#8e8e93;font-family:Inter,sans-serif;font-size:.85rem}.devices-loading{text-align:center;padding:2rem 1rem;color:#8e8e93;font-family:Inter,sans-serif;font-size:.85rem}.devices-modal-footer{display:flex;justify-content:space-between;gap:.6rem;padding:1.2rem 1.5rem;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap}.devices-modal-footer .btn{flex:1;min-width:140px}@media (max-width: 480px){.devices-modal-overlay{padding:1rem .5rem}.devices-modal-body{padding:1rem}.devices-modal-footer{padding:1rem;flex-direction:column}}.router-configs-block{display:flex;flex-direction:column;gap:.6rem;padding:.9rem 1rem;background:#68ba7f0d;border:1px solid rgba(104,186,127,.15);border-radius:.6rem}.router-configs-title{font-size:.8rem;font-weight:700;color:#68ba7f;text-transform:uppercase;letter-spacing:.05em;font-family:Inter,sans-serif}.router-configs-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.router-config-btn{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.7rem .9rem;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif;text-align:left;color:inherit}.router-config-btn:hover{background:#68ba7f1a;border-color:#68ba7f66}.router-config-btn.loading{opacity:.7;cursor:wait;border-color:#68ba7f66;pointer-events:none}.router-config-btn.success{background:#68ba7f26;border-color:#68ba7f;color:#68ba7f;pointer-events:none}.router-config-btn:disabled{cursor:not-allowed}.router-config-flag{font-size:1.2rem}.router-config-name{flex:1;font-size:.85rem;font-weight:600;color:#f2f2f7}.router-config-action{font-size:.75rem;font-weight:600;color:#68ba7f;white-space:nowrap}.router-configs-guide{font-size:.8rem;color:#68ba7f;text-decoration:none;font-family:Inter,sans-serif;text-align:center;transition:opacity .2s}.router-configs-guide:hover{opacity:.8;text-decoration:underline}@media (max-width: 480px){.router-configs-grid{grid-template-columns:1fr}}
