:root{--bg-color: #08040d;--bg-gradient-1: #120721;--text-primary: #f8fafc;--text-secondary: #a78bfa;--accent: #a855f7;--accent-hover: #c084fc;--card-bg: rgba(22, 12, 38, .6);--card-border: rgba(168, 85, 247, .15);--glow-shadow: 0 0 15px rgba(168, 85, 247, .4)}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-primary);background-image:radial-gradient(at 0% 0%,rgba(139,92,246,.18) 0px,transparent 55%),radial-gradient(at 100% 100%,rgba(236,72,153,.1) 0px,transparent 50%),radial-gradient(at 50% 50%,rgba(12,6,23,1) 0px,transparent 100%);background-attachment:fixed;min-height:100vh;display:flex;justify-content:center;overflow-x:hidden}#root{width:100%;max-width:480px;min-height:100vh;position:relative;box-sizing:border-box}.app-container{padding:16px;display:flex;flex-direction:column}.glass-panel{background:var(--card-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--card-border);border-radius:24px;padding:20px;box-shadow:0 10px 40px #00000080,0 0 20px #8b5cf60d}.glass-panel-inner{background:#0f061c8c;border:1px solid var(--card-border);border-radius:18px;padding:18px;margin-bottom:16px}.app-header{position:fixed;top:12px;left:16px;right:16px;max-width:448px;margin:0 auto;z-index:100;padding:14px 20px;background:#120920b3;box-shadow:0 8px 32px #0006;display:flex;justify-content:space-between;align-items:center}.currency-selector{background:#a855f71a;border:1px solid var(--card-border);color:var(--text-primary);border-radius:10px;padding:6px 10px;font-size:12px;font-weight:600;outline:none;cursor:pointer;transition:all .2s}.currency-selector:hover{border-color:var(--accent);background:#a855f733}.currency-selector option{background-color:#120721;color:#fff}.bottom-nav{position:fixed;bottom:16px;left:16px;right:16px;max-width:448px;margin:0 auto;z-index:100;background:#0d0617d9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:20px;height:70px;display:flex;justify-content:space-around;align-items:center;box-shadow:0 -10px 30px #00000080,var(--glow-shadow) * .1}.nav-item{background:transparent;border:none;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:8px 14px;border-radius:12px;transition:all .25s cubic-bezier(.4,0,.2,1);font-size:11px;font-weight:500}.nav-item:hover{color:var(--text-primary)}.nav-item.active{color:var(--text-primary);background:#a855f726;border:1px solid rgba(168,85,247,.3);text-shadow:0 0 8px rgba(168,85,247,.6);transform:translateY(-2px)}.btn-primary{width:100%;background:linear-gradient(135deg,var(--accent),#8b5cf6);color:#fff;border:none;padding:15px;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;transition:all .25s;box-shadow:0 0 15px #a855f766;display:flex;justify-content:center;align-items:center;gap:8px}.btn-primary:hover{background:linear-gradient(135deg,var(--accent-hover),#a78bfa);box-shadow:0 0 22px #a855f799;transform:translateY(-1px)}.btn-primary:active{transform:translateY(1px)}.btn-primary:disabled{background:#1c1429;color:#5b4a70;cursor:not-allowed;box-shadow:none}.btn-secondary{background:#0f061c66;color:var(--text-primary);border:1px solid var(--card-border);padding:12px;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;justify-content:center;align-items:center;gap:8px}.btn-secondary:hover{background:#a855f714;border-color:#a855f766}.btn-icon{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:8px;transition:all .2s}.btn-icon:hover{background:#a855f71a;color:var(--text-primary)}.vpn-toggle-container{display:flex;flex-direction:column;align-items:center;margin:28px 0}.vpn-toggle-btn{width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#1a0a2f,#0d0418);border:4px solid #2e1052;box-shadow:0 8px 30px #0009;cursor:pointer;display:flex;justify-content:center;align-items:center;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.vpn-toggle-btn.connected{border-color:var(--accent);box-shadow:0 0 30px #a855f799,inset 0 0 20px #a855f74d;animation:pulse-glow 2s infinite}.vpn-toggle-btn-inner{width:100px;height:100px;border-radius:50%;background:#a855f70d;display:flex;justify-content:center;align-items:center;transition:all .3s}.vpn-toggle-btn.connected .vpn-toggle-btn-inner{background:#a855f726}.vpn-toggle-status{font-size:13px;font-weight:700;margin-top:14px;color:var(--text-secondary);letter-spacing:.5px}.vpn-toggle-status.connected{color:#4ade80;text-shadow:0 0 8px rgba(74,222,128,.4)}@keyframes pulse-glow{0%{box-shadow:0 0 25px #a855f766,inset 0 0 15px #a855f733}50%{box-shadow:0 0 45px #a855f7cc,inset 0 0 25px #a855f766}to{box-shadow:0 0 25px #a855f766,inset 0 0 15px #a855f733}}.speedometer-container{display:flex;justify-content:space-around;align-items:center;margin-top:20px;padding:16px;background:#0003;border-radius:16px;border:1px solid var(--card-border)}.speedometer-gauge{position:relative;width:90px;height:60px;display:flex;justify-content:center}.speedometer-needle{transform-origin:50px 50px;transition:transform .3s cubic-bezier(.18,.89,.32,1.28)}.speed-text-container{text-align:center}.speed-metric{font-size:24px;font-weight:800;color:var(--accent);text-shadow:0 0 10px rgba(168,85,247,.4)}.speed-sub-metrics{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-secondary)}.locations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.location-card{background:#0f061c80;border:1px solid var(--card-border);border-radius:16px;padding:10px 6px;text-align:center;cursor:pointer;transition:all .25s ease;display:flex;flex-direction:column;align-items:center}.location-card:hover{border-color:#a855f766;background:#a855f70a}.location-card.active{border-color:var(--accent);background:#a855f726;box-shadow:0 0 15px #a855f740;transform:translateY(-2px)}.location-ping{font-size:10px;font-weight:600;padding:2px 6px;border-radius:6px;margin-top:8px}.location-ping.good{background:#22c55e26;color:#4ade80}.location-ping.medium{background:#eab30826;color:#facc15}.location-ping.testing{background:#a855f726;color:var(--accent)}.protocols-list{display:flex;flex-direction:column;gap:10px}.protocol-option{background:#0f061c80;border:1px solid var(--card-border);border-radius:14px;padding:14px 16px;cursor:pointer;transition:all .2s ease}.protocol-option:hover{border-color:#a855f766}.protocol-option.active{border-color:var(--accent);background:#a855f71a;box-shadow:0 0 10px #a855f71a}.tariffs-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.tariff-card{background:#0f061c80;border:1px solid var(--card-border);border-radius:16px;padding:10px 8px;text-align:center;cursor:pointer;transition:all .25s ease;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}.tariff-card.active{border-color:var(--accent);background:#a855f726;transform:translateY(-2px)}.discount-badge{background:#f43f5e;color:#fff;font-size:8px;padding:2px 5px;border-radius:6px;font-weight:700}.traffic-chart-container{margin-top:16px}.chart-svg{width:100%;height:50px;overflow:visible}.chart-bar{fill:#a855f740;rx:3px;transition:fill .3s,height .3s}.chart-bar:hover{fill:var(--accent)}.progress-bar-bg{width:100%;background:#ffffff0d;height:6px;border-radius:3px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,var(--accent),#db2777);height:100%;border-radius:3px}.status-indicator{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-top:4px}.status-indicator .dot{width:8px;height:8px;border-radius:50%;background:#64748b}.status-indicator .dot.online{background:#22c55e;box-shadow:0 0 8px #22c55e}.stats-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.server-ping-stats{display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--text-secondary)}.ping-item{display:flex;align-items:center;gap:5px}.transaction-item{background:#0f061c4d;border:1px solid var(--card-border);border-radius:12px;padding:12px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;font-size:13px}.tx-details{display:flex;flex-direction:column;gap:2px}.tx-amount{font-weight:600}.tx-amount.topup{color:#4ade80}.tx-amount.spend{color:#f43f5e}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-content{width:100%;max-width:380px}.form-group{margin-bottom:16px}.form-label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--text-secondary)}.input-box{width:100%;box-sizing:border-box;background:#0f061cb3;border:1px solid var(--card-border);color:#fff;padding:13px;border-radius:12px;font-size:15px;outline:none}.input-box:focus{border-color:var(--accent);box-shadow:0 0 10px #a855f733}.config-item{background:#0f061c73;border:1px solid var(--card-border);border-radius:18px;padding:18px;margin-bottom:14px;display:flex;flex-direction:column;gap:12px}.config-header{display:flex;justify-content:space-between;align-items:center}.config-title{font-weight:600;display:flex;align-items:center;gap:6px}.badge-active{background:#a855f726;color:#c084fc;font-size:11px;padding:4px 8px;border-radius:8px;font-weight:600;border:1px solid rgba(168,85,247,.2)}.config-details{background:#00000040;padding:12px 14px;border-radius:12px;display:flex;flex-direction:column;gap:8px}.detail-row{display:flex;justify-content:space-between;font-size:13px}.detail-label{color:var(--text-secondary)}.detail-value{font-weight:500}.checkout-summary{padding:14px}.summary-row{display:flex;justify-content:space-between;font-size:14px}.w-100{width:100%}.w-50{width:50%}.text-center{text-align:center}.flex-center{display:flex;justify-content:center;align-items:center}.spinner-loader{border:3px solid rgba(168,85,247,.15);border-top:3px solid var(--accent);border-radius:50%;width:30px;height:30px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite}.animate-fade-in{animation:fadeIn .35s cubic-bezier(.16,1,.3,1) forwards}.animate-scale-up{animation:scaleUp .3s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleUp{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}