:root{--bg: #111318;--bg-soft: #1a202a;--surface: #171c24;--surface-soft: #212b38;--surface-elev: #283445;--line: #343f4d;--line-strong: #4a5669;--ink: #eaedf2;--muted: #a5afbf;--accent: #10b981;--accent-deep: #0f766e;--accent-soft: rgba(16, 185, 129, .16);--danger: #f05275;--success: #34d399;--warn-bg: rgba(245, 158, 11, .14);--warn-ink: #f7c777;--shadow: 0 10px 28px rgba(4, 8, 16, .42);font-family:Manrope,IBM Plex Sans,Segoe UI,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--ink);background:radial-gradient(900px 500px at 100% -20%,rgba(16,185,129,.2),transparent 68%),radial-gradient(640px 380px at -18% 0%,rgba(15,118,110,.14),transparent 72%),linear-gradient(180deg,var(--bg) 0%,#0f1115 100%)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.08;background-image:linear-gradient(rgba(153,163,177,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(153,163,177,.3) 1px,transparent 1px);background-size:36px 36px}button,input,select{font:inherit}.app{max-width:760px;margin:0 auto;padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(14px + env(safe-area-inset-bottom,0px));display:grid;gap:10px}.app-main{gap:8px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:linear-gradient(165deg,#1c212af2,#14181ff7);box-shadow:var(--shadow)}.app-title{margin:0;font-size:clamp(21px,4.8vw,30px);line-height:1;font-weight:800;letter-spacing:.3px;color:#f3f4f6}.app-subtitle{margin:4px 0 0;color:var(--muted);font-size:12px}.top-badges{display:flex;justify-content:flex-end;gap:6px}.top-badge{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-soft);color:#ced5df;padding:5px 9px;font-size:11px;font-weight:700}.top-badge-accent{border-color:#3e8f75;background:#10b98133;color:#d3d9e3}.top-badge-button{cursor:pointer}.top-badge-button:hover{border-color:#67c4a9}.alert,.notice{border-radius:10px;border:1px solid transparent;padding:8px 10px;font-size:12px;font-weight:600}.alert{border-color:#f0527573;background:#f0527524;color:#ffb4c6}.key-alert{margin-bottom:8px}.notice{border-color:#10b98180;background:#10b98126;color:#d4dae4}.sheet-overlay,.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;cursor:pointer}.modal-overlay{background:#03060a9e;display:grid;place-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px))}.modal{width:min(440px,100%);border-radius:14px;border:1px solid var(--line-strong);background:linear-gradient(180deg,#212b38,#1b222d);box-shadow:0 22px 54px #010408b3;padding:12px;animation:modalIn .14s ease-out}@keyframes modalIn{0%{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.modal h3{margin:0;font-size:17px;line-height:1.2;color:#f3f4f6}.modal-close{min-height:32px;width:36px;padding:0;border-radius:10px;border:1px solid var(--line-strong);background:#242f3fb3;color:#e7ebf0;font-size:18px;line-height:1}.modal-close:hover{border-color:#6d7a90;background:#242f3feb}.sheet{position:fixed;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom,0px));z-index:1110;border-radius:14px;border:1px solid var(--line-strong);background:linear-gradient(180deg,#212b38,#1b222d);box-shadow:0 16px 38px #01040899;padding:10px 10px calc(22px + env(safe-area-inset-bottom,0px));max-height:min(52vh,calc(100vh - 170px - env(safe-area-inset-top,0px)));overflow-y:auto}.sheet-handle{width:38px;height:4px;border-radius:99px;margin:0 auto 8px;background:#5d6a7e}.sheet-head{display:flex}.sheet h3{margin:0;font-size:17px;line-height:1.2;color:#f3f4f6}.sheet .sub{margin-top:6px}.sheet .buttons{margin-top:14px}.layout-grid{display:grid;grid-template-columns:1fr;gap:10px}.panel{border:1px solid var(--line);border-radius:12px;padding:10px;background:linear-gradient(180deg,#1a212bfa,#141a22fa);box-shadow:var(--shadow)}.action-dock{padding:10px}.dock-main .buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.dock-utils{margin-top:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.dock-utils .ghost-btn{font-size:12px;padding:6px 8px}.panel-loading{min-height:120px;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--muted)}.panel h2{margin:0;font-size:18px;line-height:1.2;color:#f3f4f6}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.panel-head-top{margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid rgba(93,104,118,.45)}.page-back-row{display:flex;justify-content:flex-start;margin-bottom:8px}.panel-head-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.sub{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.35}.state-badge,.pill,.plan-chip{border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}.state-badge{border:1px solid var(--line-strong);background:var(--surface-soft);color:#ced5df;padding:5px 9px}.state-active,.pill-active{border-color:#34d39980;background:#34d39924;color:#7ee7bf}.state-overlimit,.pill-overlimit{border-color:#f59e0b80;background:var(--warn-bg);color:var(--warn-ink)}.state-disabled,.state-expired,.pill-disabled,.pill-expired{border-color:#f0527580;background:#f0527524;color:#ffb4c6}.state-empty{border-color:var(--line);background:var(--surface-soft);color:#bec8d6}.guide-grid{display:grid;grid-template-columns:1fr;gap:8px}.guide-card{border:1px solid var(--line);border-radius:10px;padding:9px;background:var(--surface-soft);display:grid;gap:6px}.guide-card h3{margin:0;font-size:15px;color:#f3f4f6}.guide-list{margin:0;padding-left:18px;color:#dce2e9;display:grid;gap:4px}.plan-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:8px}button.plan-card{text-align:left;min-height:88px;border:1px solid var(--line-strong);border-radius:10px;background:linear-gradient(160deg,#222d3b,#1d2532);color:var(--ink);display:grid;gap:4px;cursor:pointer}button.plan-card:hover{border-color:#4a9b82;background:linear-gradient(160deg,#293648,#202938)}button.plan-card-active{border-color:var(--accent);background:linear-gradient(160deg,#2c3b4f,#253142);box-shadow:inset 3px 0 0 var(--accent)}.plan-kind{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:#a7b1c0;font-weight:700}.plan-title{font-size:14px;font-weight:800;color:#f3f4f6}.plan-price{font-size:18px;font-weight:800;color:#dce2ea}.plan-days{font-size:11px;color:var(--muted)}.plan-meta-row{display:flex;align-items:center;justify-content:space-between;gap:6px}.plan-chip{border:1px solid var(--line);padding:2px 7px;background:#273344;color:#b2bccb}.plan-chip-active{border-color:#64c6ab;background:#10b98133;color:#dae0e8}.payment-box{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface-soft);margin-bottom:8px}.key-card{border:1px solid #4e5c73;border-radius:12px;margin-bottom:8px;padding:9px 10px;color:#edf0f3;background:radial-gradient(circle at 90% -20%,rgba(16,185,129,.44),transparent 58%),linear-gradient(150deg,#2a3749,#1c2431)}.key-title-row{display:flex;justify-content:space-between;align-items:center;gap:6px}.key-title{font-size:clamp(17px,4vw,22px);line-height:1.1;font-weight:800}.key-note{margin-top:6px;color:#c6cfdb;font-size:11px}.pill{border:1px solid var(--line-strong);padding:4px 8px;background:var(--surface-soft);color:#cdd4df}.meta,.ref-grid,.metrics{display:grid;gap:7px;margin-bottom:8px}.meta{grid-template-columns:repeat(3,minmax(0,1fr))}.ref-grid{grid-template-columns:1fr}.stat-card{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface-soft)}.meta-label{color:#9da8b9;font-size:10px;text-transform:uppercase;letter-spacing:.33px;margin-bottom:3px;font-weight:700}.section-label{margin-bottom:6px}.ref-value{font-size:clamp(22px,4vw,28px);font-weight:800;line-height:1;color:#eff2f5}.uri,.uri-box{width:100%;margin:0 0 8px;border:1px solid var(--line-strong);border-radius:10px;background:#1a1f27;color:#dfe4eb;padding:8px 9px;font-size:10px;line-height:1.35;font-family:JetBrains Mono,Courier New,monospace}.buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.buttons-main{grid-template-columns:repeat(3,minmax(0,1fr))}button{min-height:36px;border:1px solid var(--line-strong);border-radius:10px;padding:7px 10px;background:linear-gradient(180deg,#2a3749,#232e3d);color:#e7ebf0;font-weight:700;cursor:pointer;transition:border-color .12s ease,background .12s ease,transform .12s ease}button:hover{transform:translateY(-1px);border-color:#5fb89f;background:linear-gradient(180deg,#324256,#283546)}button:active{transform:translateY(0)}button.primary{border-color:#2cb388;background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:#f7f8fa}button.primary:hover{border-color:#72d6b7;background:linear-gradient(180deg,#34d399,#0d695f)}button.ghost-btn{min-height:34px;border-radius:10px;border:1px solid var(--line-strong);background:#242f3f;color:#d6dce5;padding:6px 10px;font-weight:700}button.page-back-btn{width:auto;min-height:32px;padding:5px 10px}button.danger{border-color:#f05275b3;background:linear-gradient(180deg,#ef5d7f,#cc3f61);color:#fff}button:disabled{opacity:.56;cursor:not-allowed;transform:none}button:focus-visible{outline:2px solid rgba(52,211,153,.65);outline-offset:2px}.empty-box{border:1px dashed #5a677b;border-radius:10px;padding:10px;background:#232b38a3}.qr-box,.qr{margin-top:8px;text-align:center}.qr-box img,.qr img{width:min(260px,100%);border-radius:9px;border:1px solid var(--line-strong);background:#fff}.subsection{margin-top:8px}.subsection h3{margin:0 0 6px;font-size:13px;color:var(--muted)}.list{display:grid;gap:5px}.list-row{border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);padding:7px;display:flex;justify-content:space-between;align-items:center;gap:6px}.admin{margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}.admin-header{display:flex;justify-content:space-between;align-items:center;gap:6px}.admin-search{display:flex;gap:6px}.admin-search input{border:1px solid var(--line-strong);border-radius:8px;background:#1a1f27;color:var(--ink);padding:8px}.admin-results{margin-top:6px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px}.admin-user,.admin-key{border:1px solid var(--line);border-radius:9px;padding:7px;background:#1f2835;cursor:pointer}.admin-keys{display:grid;gap:6px;margin-top:8px}.proxy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.proxy-card{display:grid;gap:10px}.proxy-status{border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.proxy-status-online{background:#55d08d29;color:#8cf0b4}.proxy-status-offline{background:#ff757529;color:#ff9f9f}.proxy-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.proxy-ip-list{display:flex;flex-wrap:wrap;gap:6px}.proxy-ip-chip{border:1px solid var(--line);border-radius:999px;background:#18202a;padding:5px 10px;font-size:12px}.proxy-top-list{display:grid;gap:6px}.card{border:1px solid var(--line);border-radius:10px;background:#1f2835;padding:10px}.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.label{font-size:15px;font-weight:700}.card-body{margin-top:8px;display:grid;gap:8px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric{font-size:16px;font-weight:800}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.actions.secondary{grid-template-columns:1fr}.muted{color:var(--muted);font-size:12px}@media (max-width: 760px){.topbar,.panel-head,.admin-header,.admin-search{flex-direction:column;align-items:stretch}.top-badges,.panel-head-actions{justify-content:flex-start}.meta,.metrics,.proxy-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.buttons,.buttons-main,.actions,.proxy-grid{grid-template-columns:1fr}.admin-search input,.admin-search button{width:100%}}