@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap";:root{--bg-page: #0b1220;--bg-page-deep: #0a101c;--bg-surface: #121a2a;--bg-surface-2: #172133;--bg-soft: #1b263b;--line: #26334b;--line-strong: #324566;--text-main: #eff4ff;--text-soft: #9eb0cb;--text-muted: #73829b;--accent: #6fa5ff;--accent-strong: #4b89f4;--accent-soft: rgba(111, 165, 255, .14);--success: #31c48d;--danger: #f87171;--warning: #f6c454;--shadow: 0 18px 42px rgba(2, 8, 23, .35);--radius-lg: 24px;--radius-md: 18px;--radius-sm: 12px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Manrope,sans-serif;background:radial-gradient(circle at top,rgba(79,140,255,.14),transparent 32%),linear-gradient(180deg,var(--bg-page-deep) 0%,var(--bg-page) 100%);color:var(--text-main);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.ui-icon,.nav-icon{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;flex-shrink:0}#app{min-height:100vh;padding-bottom:88px}.bottom-nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:8px 0;background:#0b1220e6;border-top:1px solid rgba(50,69,102,.8);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:100}.nav-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;background:none;border:none;color:var(--text-muted);font-size:11px;font-family:inherit;cursor:pointer;transition:all .3s ease;border-radius:var(--radius-sm)}.nav-btn.active{color:var(--accent)}.nav-btn.active svg{filter:drop-shadow(0 0 6px rgba(79,140,255,.35))}.page{display:none;animation:fadeIn .3s ease}.page.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.page-content{padding:18px 16px 20px}.section-head{margin-bottom:14px}.section-head h2,.section-head h3{font-size:22px;font-weight:800;letter-spacing:-.02em}.section-head h3{font-size:18px}.section-head p{margin-top:6px;font-size:13px;line-height:1.5;color:var(--text-soft)}.hero-card,.card,.stat-card,.balance-hero{background:linear-gradient(180deg,#172133fa,#121a2afa);border:1px solid rgba(50,69,102,.78);box-shadow:var(--shadow)}.hero-card{border-radius:var(--radius-lg);padding:28px 22px;margin-bottom:14px}.hero-meta{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700}.hero-title{margin-top:18px;font-size:34px;line-height:1.05;letter-spacing:-.04em}.hero-subtitle{margin-top:12px;color:var(--text-soft);font-size:15px;line-height:1.55}.hero-actions{display:flex;gap:10px;margin-top:18px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.stat-card{border-radius:var(--radius-md);padding:16px}.stat-value{font-size:24px;font-weight:800;margin-bottom:4px}.stat-label{font-size:12px;color:var(--text-soft)}.card{border-radius:var(--radius-md);padding:20px;margin-bottom:12px}.overview-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(38,51,75,.75)}.overview-row:last-child{border-bottom:0}.overview-row span{color:var(--text-soft);font-size:13px}.overview-row strong{font-size:14px}.muted-row strong{color:var(--text-soft)}.plans-grid,.connections-grid{display:grid;gap:12px}.plan-card,.connection-card{padding:18px;border-radius:var(--radius-md);background:linear-gradient(180deg,#121a2a,#0e1623);border:1px solid rgba(50,69,102,.78);box-shadow:var(--shadow)}.plan-card.current{border-color:#6fa5ffb3}.plan-card-header,.connection-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.connection-head{margin-bottom:12px}.plan-name{font-size:20px;font-weight:800}.plan-price{font-size:14px;color:var(--accent);font-weight:700}.plan-copy{margin-top:10px;color:var(--text-soft);font-size:13px;line-height:1.55}.plan-badge{padding:6px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700}.feature-list{list-style:none;display:grid;gap:8px;margin-top:12px}.feature-list li{color:var(--text-main);font-size:13px;line-height:1.45}.connection-head h3{font-size:16px;font-weight:700}.connection-meta{color:var(--text-soft);font-size:12px}.qr-canvas{width:168px;height:168px;margin:0 auto 12px;display:block;border-radius:24px;background:#fff;box-shadow:0 18px 36px #0206172e,0 0 0 1px #94a3b829;padding:10px}.meter-block{margin-top:10px}.meter-line{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.chip-row,.method-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.text-input,.admin-input,.admin-search-input{width:100%;border:1px solid rgba(50,69,102,.8);background:#090f1be6;color:var(--text-main);border-radius:var(--radius-sm);padding:14px 16px;font:inherit;outline:none;transition:border-color .2s ease,box-shadow .2s ease}input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.text-input:focus,.admin-input:focus,.admin-search-input:focus{border-color:#6fa5ffb3;box-shadow:0 0 0 4px #6fa5ff1f}.field-label{display:block;margin-top:14px;margin-bottom:8px;font-size:12px;color:var(--text-soft)}.primary-btn,.soft-btn,.ghost-btn,.chip-btn,.copy-btn,.payment-method-btn,.plan-action-btn,.traffic-pack-btn,.action-btn,.secondary-btn,.admin-page-btn,.admin-toggle-btn,.admin-pct-btn,.admin-del-btn,.admin-edit-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid rgba(50,69,102,.8);color:var(--text-main);font-size:14px;font-family:inherit;cursor:pointer;transition:all .2s ease}.primary-btn,.plan-action-btn{width:100%;border-color:transparent;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-strong) 100%);color:#081121;font-weight:800}.soft-btn,.ghost-btn,.chip-btn,.copy-btn,.payment-method-btn,.traffic-pack-btn,.secondary-btn,.admin-page-btn,.admin-toggle-btn,.admin-pct-btn,.admin-del-btn,.admin-edit-btn{background:#1b263be6}.soft-btn:hover,.ghost-btn:hover,.chip-btn:hover,.copy-btn:hover,.payment-method-btn:hover,.traffic-pack-btn:hover,.secondary-btn:hover,.admin-page-btn:hover,.admin-toggle-btn:hover,.admin-pct-btn:hover,.admin-del-btn:hover,.admin-edit-btn:hover{border-color:#6fa5ff80;color:var(--accent)}.payment-method-btn.active,.chip-btn.active,.admin-page-btn.active{border-color:#6fa5ffb3;background:var(--accent-soft);color:var(--accent)}.copy-btn{white-space:nowrap}.admin-edit-btn{padding:6px 12px;font-size:12px}.admin-icon-btn{width:36px;height:36px;padding:0}.admin-toggle-btn.active{color:var(--success);border-color:#31c48d59;background:#31c48d1f}.admin-pct-btn{min-width:58px;color:var(--accent)}.admin-del-btn{color:#fca5a5;border-color:#f8717140;background:#f871711a}.primary-btn:disabled,.plan-action-btn:disabled,.ghost-btn:disabled,.soft-btn:disabled,.traffic-pack-btn:disabled{opacity:.45;cursor:default}.balance-hero{border-radius:var(--radius-lg);padding:32px;text-align:center;margin-bottom:16px}.balance-amount{font-size:36px;font-weight:800}.balance-label{color:var(--text-soft);font-size:13px;margin-top:4px}.progress-bar{width:100%;height:12px;border-radius:999px;background:#26334bcc;overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%,#97c0ff 100%);transition:width .5s ease}.transactions-list{max-height:400px;overflow-y:auto}.tx-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(38,51,75,.75)}.tx-item:last-child{border-bottom:none}.tx-desc{font-size:13px;color:var(--text-main)}.tx-date{font-size:11px;color:var(--text-muted)}.tx-amount{font-size:14px;font-weight:600;min-width:84px;text-align:right}.tx-amount.positive{color:var(--success)}.tx-amount.negative{color:var(--danger)}.hint{font-size:12px;color:var(--text-muted);margin-top:8px}.empty-text{text-align:center;color:var(--text-muted);padding:20px;font-size:14px}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-100px);background:#121a2af5;color:var(--text-main);padding:12px 16px;border-radius:var(--radius-sm);font-size:13px;z-index:1000;transition:transform .3s ease;box-shadow:var(--shadow);border:1px solid rgba(50,69,102,.8)}.toast.show{transform:translate(-50%) translateY(0)}.toast.success{border-color:#31c48d8c}.toast.error{border-color:#f871718c}.admin-2fa-card{text-align:center;padding:36px 20px 28px;position:relative;overflow:hidden}.admin-2fa-card:before{content:"";position:absolute;inset:auto -30% 62% -30%;height:180px;background:radial-gradient(circle,rgba(111,165,255,.18),transparent 62%);pointer-events:none}.admin-2fa-icon{width:72px;height:72px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(111,165,255,.22);border-radius:50%}.admin-status{margin-bottom:12px;padding:12px 14px;border-radius:var(--radius-sm);font-size:13px;line-height:1.45;border:1px solid rgba(248,113,113,.28);background:#f871711f;color:#fecaca}.admin-status.success{border-color:#31c48d47;background:#31c48d1f;color:#bbf7d0}.admin-2fa-card h3{font-size:18px;margin-bottom:8px}.otp-input-wrap{position:relative;margin:22px 0 18px}.otp-native-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none}.otp-grid{width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;background:none;border:none;padding:0;cursor:text}.otp-cell{position:relative;min-height:64px;border-radius:18px;border:1px solid rgba(50,69,102,.85);background:linear-gradient(180deg,#0b1220f5,#101828fa);box-shadow:inset 0 1px #ffffff08;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:var(--text-main);transform:translateY(0) scale(1);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.otp-cell:after{content:"";position:absolute;width:2px;height:26px;border-radius:999px;background:var(--accent);opacity:0;transform:scaleY(.4)}.otp-grid.is-focused .otp-cell.active{border-color:#6fa5ffe6;background:linear-gradient(180deg,#12213afa,#101d32fa);box-shadow:0 0 0 4px #6fa5ff1f;transform:translateY(-1px)}.otp-grid.is-focused .otp-cell.active:after{opacity:1;transform:scaleY(1);animation:otpBlink 1s steps(1) infinite}.otp-cell.filled{border-color:#6fa5ff6b;background:linear-gradient(180deg,#121f36fa,#0e192bfa)}.otp-cell.pop{animation:otpPop .2s ease}.otp-grid.error{animation:otpShake .34s ease}.otp-grid.error .otp-cell{border-color:#f8717199;box-shadow:0 0 0 4px #f871711a}@keyframes otpBlink{0%,50%{opacity:1}50.01%,to{opacity:0}}@keyframes otpPop{0%{transform:scale(.92)}60%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes otpShake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.admin-error{color:var(--danger);font-size:13px;margin-top:12px;min-height:18px}.admin-stats-grid{grid-template-columns:1fr 1fr 1fr;margin-bottom:16px}.admin-users-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.admin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.admin-table{width:100%;border-collapse:collapse;font-size:13px}.admin-table th{padding:10px 8px;text-align:left;color:var(--text-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(38,51,75,.8);white-space:nowrap}.admin-table td{padding:10px 8px;border-bottom:1px solid rgba(38,51,75,.56);white-space:nowrap}.admin-table tbody tr:hover{background:#1b263b99}.admin-table .user-name{color:var(--text-main);font-weight:500}.admin-table .user-username{color:var(--text-muted);font-size:11px}.admin-table .balance-cell{font-weight:600;color:var(--accent)}.admin-table .sub-active{color:var(--success)}.admin-table .sub-none{color:var(--text-muted)}.compact-head{margin-bottom:14px}.mirror-link-row{display:grid;grid-template-columns:1fr auto;gap:10px}.mirror-list{display:grid;gap:10px}.mirror-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:#0a122038}.mirror-title{font-weight:700}.mirror-meta{color:var(--text-muted);font-size:13px;margin-top:4px}.mirror-actions,.mirror-actions-row{display:flex;gap:10px;flex-wrap:wrap}.admin-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}.admin-page-btn{padding:8px 12px}.admin-page-btn:disabled{opacity:.4;cursor:default}.admin-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#040913b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.admin-modal{width:100%;max-width:360px;padding:24px;border-radius:var(--radius-md);background:linear-gradient(180deg,#172133,#0e1623);border:1px solid rgba(50,69,102,.82);box-shadow:var(--shadow)}.admin-modal h3{font-size:18px;margin-bottom:8px}.admin-label{display:block;margin:12px 0 6px;font-size:12px;color:var(--text-soft)}.admin-modal-btns{display:flex;gap:10px;margin-top:18px}.admin-modal-btns .primary-btn,.secondary-btn{flex:1}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#324566e6;border-radius:999px}@media(min-width:680px){.page-content{max-width:880px;margin:0 auto}.plans-grid,.connections-grid,.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:768px){.admin-stats-grid{grid-template-columns:1fr 1fr}.otp-grid{gap:8px}.otp-cell{min-height:58px;font-size:24px;border-radius:16px}}@media(max-width:420px){.hero-title{font-size:28px}.hero-actions,.admin-modal-btns{flex-direction:column}.mirror-link-row{grid-template-columns:1fr}.mirror-row,.meter-line{flex-direction:column;align-items:stretch}.stats-grid,.admin-stats-grid{grid-template-columns:1fr}.otp-cell{min-height:54px;font-size:22px}}
