:root{--ink:#172535;--muted:#718091;--line:#e5ebf0;--canvas:#f5f8fa;--white:#fff;--blue:#2776d2;--deep:#142f50;--mint:#dff5ed;--green:#13875f;--rose:#fce8e8;--red:#b44444;--amber:#fff3d9;--gold:#a57211;--violet:#efe8ff;--shadow:0 8px 28px rgba(27,53,78,.055)}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin-top:0}h1{font-size:27px;letter-spacing:-.5px;margin:2px 0 0}h2{font-size:21px;letter-spacing:-.25px;margin:0 0 5px}h3{font-size:16px;margin:0 0 3px}small{font-size:12px;color:var(--muted)}.hidden{display:none!important}.muted{color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:1.25px;font-weight:750;color:#8796a5;margin:0 0 7px}.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:238px;background:#fff;border-right:1px solid var(--line);padding:25px 16px 17px;display:flex;flex-direction:column;z-index:2}.brand{display:flex;align-items:center;gap:11px;padding:0 9px 35px;color:var(--ink);text-decoration:none}.brand b{display:block;font-size:15px;letter-spacing:.3px}.brand small{display:block;font-size:11px;margin-top:2px}.brand-mark{width:47px;height:47px;border-radius:15px;background:linear-gradient(145deg,#398bdc,#2158a4);color:#fff;display:grid;place-items:center;font-size:25px;font-weight:750;box-shadow:0 7px 15px #2e6db333}.brand-mark.small{width:38px;height:38px;border-radius:12px;font-size:20px}.sidebar nav{display:grid;gap:6px}.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border:0;border-radius:10px;background:transparent;color:#607184;text-align:left;font-size:13px;font-weight:600}.nav-item span{width:17px;text-align:center;font-size:17px;color:#8797a8}.nav-item:hover{background:#f5f8fb;color:var(--ink)}.nav-item.active{background:#eaf3fd;color:#1f68b5}.nav-item.active span{color:#1f68b5}.sidebar-bottom{margin-top:auto}.server-pill{display:grid;grid-template-columns:10px 1fr;align-items:center;column-gap:8px;padding:12px 10px;border:1px solid var(--line);border-radius:11px;font-size:12px;font-weight:650}.server-pill small{grid-column:2}.pulse{width:8px;height:8px;border-radius:99px;background:#9aa8b5}.logout{margin-top:10px;width:100%}.main{margin-left:238px;max-width:1500px;padding:25px 36px 60px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.top-actions{display:flex;align-items:center;gap:13px;font-size:12px}.icon-button,.close{width:37px;height:37px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#617287;font-size:20px}.icon-button:hover,.close:hover{border-color:#b6c9db;color:var(--blue)}.welcome{position:relative;overflow:hidden;min-height:150px;border-radius:18px;background:linear-gradient(108deg,#17365b,#20568b 68%,#2871a4);padding:25px 29px;color:#fff;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}.welcome .eyebrow{color:#b5d5f3}.welcome h2{font-size:23px;margin-bottom:7px}.welcome p:last-child{margin:0;color:#d0e2f2;font-size:13px}.welcome-orbit{position:relative;width:110px;height:110px;border:1px solid #ffffff29;border-radius:50%;display:grid;place-items:center;margin-right:23px;color:#daefff;font-weight:750;letter-spacing:2px}.welcome-orbit:before,.welcome-orbit:after{content:"";position:absolute;border:1px solid #ffffff22;border-radius:50%;inset:13px}.welcome-orbit:after{inset:-13px}.welcome-orbit i,.welcome-orbit b{position:absolute;width:6px;height:6px;border-radius:50%;background:#8be0ca;top:7px;left:24px}.welcome-orbit b{background:#e1c2ff;top:auto;left:auto;bottom:2px;right:20px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:17px 0 30px}.metric-card,.panel,.vpn-card,.notice-row,.user-card,.diag-row,.event-row{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.metric-card{padding:16px 17px}.metric-top{display:flex;justify-content:space-between;align-items:center;color:#657589;font-size:12px;font-weight:600}.metric-card strong{display:block;font-size:25px;letter-spacing:-.5px;margin:12px 0 3px}.metric-card small{font-size:11px}.metric-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:15px}.violet{background:var(--violet);color:#7957ba}.blue{background:#e6f1ff;color:#2e77c6}.green{background:var(--mint);color:var(--green)}.amber{background:var(--amber);color:var(--gold)}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:0 0 13px}.section-heading h2{margin-bottom:0}.section-heading .eyebrow{margin-bottom:4px}.button{border:1px solid transparent;border-radius:9px;padding:10px 14px;font-size:12px;font-weight:700;transition:.15s}.button.primary{background:#2879cc;color:#fff;box-shadow:0 4px 10px #2879cc24}.button.primary:hover{background:#1b67b4;transform:translateY(-1px)}.button.subtle{background:#fff;border-color:var(--line);color:#53677b}.button.subtle:hover{border-color:#b7c9da;color:#246db7}.button.danger{background:#fff4f4;border-color:#f4dcdc;color:#b04444}.button.small{padding:7px 10px;font-size:11px}.button.wide{width:100%;margin-top:5px}.vpn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:29px}.vpn-card{padding:16px;display:grid;grid-template-columns:39px 1fr auto;align-items:center;gap:0 11px}.vpn-symbol{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;font-weight:800}.vpn-symbol.reality{background:#e7f1ff;color:#3677bd}.vpn-symbol.xhttp{background:#eee9ff;color:#765bc1}.vpn-symbol.wg{background:#e3f5ed;color:#238660}.vpn-copy h3{font-size:13px}.vpn-copy p{color:var(--muted);font-size:11px;margin:0}.status{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 8px;font-size:10px;font-weight:700;white-space:nowrap}.status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.status.green{background:#e6f6ef;color:#16815b}.status.red{background:var(--rose);color:var(--red)}.status.yellow{background:var(--amber);color:var(--gold)}.status.gray{background:#eef1f4;color:#7e8a98}.vpn-meta{grid-column:2/4;display:flex;gap:12px;padding-top:11px;margin-top:12px;border-top:1px solid #eef1f4;color:#8290a0;font-size:10px}.resource-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:13px}.panel{padding:17px}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-heading h3{margin:0}.meter{height:7px;border-radius:6px;background:#edf1f4;overflow:hidden;margin:17px 0 8px}.meter i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#63b1e7,#5fc4a1);transition:width .4s}.traffic-row{display:flex;justify-content:space-between;color:#718092;font-size:12px;padding:7px 0;border-bottom:1px solid #f0f2f4}.traffic-row:last-child{border:0}.traffic-row b{color:#2c4055}.notice-row{display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 16px}.notice-icon{width:26px;height:26px;border-radius:50%;background:#edf3fa;color:#507ba2;display:grid;place-items:center;font-size:12px;font-weight:bold}.notice-row div:nth-child(2){flex:1}.notice-row b{font-size:12px}.notice-row p{font-size:11px;color:var(--muted);margin:2px 0 0}.page-section{margin-top:7px;margin-bottom:18px}.page-section p{margin:5px 0 0;font-size:12px}.users-list{display:grid;gap:11px}.user-card{padding:16px;display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:14px}.user-head{display:flex;gap:11px;align-items:center}.avatar{width:39px;height:39px;border-radius:13px;background:#edf3fa;color:#3a6c9e;display:grid;place-items:center;font-weight:750}.user-head h3{margin:0;font-size:14px}.user-head small{display:block;margin-top:3px}.user-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:end}.user-meta{grid-column:1/-1;display:flex;gap:16px;flex-wrap:wrap;color:#778696;font-size:11px;border-top:1px solid #edf0f2;padding-top:11px}.user-meta b{color:#495b6e;font-weight:650}.user-configs{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}.config-chip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 10px;font-size:11px;color:#496176;font-weight:650}.config-chip:hover{border-color:#b7c9da;color:#236db5}.diag-intro{display:flex;align-items:center;justify-content:space-between;background:white;border:1px solid var(--line);border-radius:15px;padding:20px 22px;margin-bottom:14px;box-shadow:var(--shadow)}.diag-intro h2{font-size:22px}.diag-intro p:last-child{font-size:12px;margin:0}.diagnostics-list,.events-list{display:grid;gap:9px}.diag-row{padding:13px 15px;display:grid;grid-template-columns:1fr auto;gap:6px 12px}.diag-row h3{font-size:13px}.diag-row p{font-size:11px;color:var(--muted);margin:4px 0 0}.diag-row small{grid-column:1/-1}.diag-row .status{grid-column:2;grid-row:1}.event-row{display:grid;grid-template-columns:140px 130px 1fr auto;align-items:center;gap:13px;padding:12px 15px;font-size:11px}.event-row time{color:#8190a0}.event-row b{color:#516579}.empty-state{text-align:center;padding:55px 20px;background:white;border:1px dashed #d4dee6;border-radius:15px;color:#778797}.empty-state div{font-size:28px;color:#a8b8c6;margin-bottom:8px}.empty-state h3{color:#354b60}.empty-state p{font-size:12px;margin:0}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 15%,#e1edfa,#f4f7fa 55%)}.login-card{width:min(100%,390px);padding:31px;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:0 20px 55px #1e3c5a17}.login-card .brand-mark{margin-bottom:23px}.login-card h1{font-size:23px}.login-card>.muted{font-size:12px;margin:5px 0 24px}.login-card label,.dialog label{display:grid;gap:6px;font-size:11px;color:#5d7184;font-weight:650;margin:0 0 13px}.login-card input,.dialog input{width:100%;border:1px solid #dce4eb;border-radius:9px;padding:11px 12px;outline:none;background:#fff;color:var(--ink)}.login-card input:focus,.dialog input:focus{border-color:#7aa9d8;box-shadow:0 0 0 3px #438bd51b}.error-text{color:var(--red);font-size:12px;min-height:18px;margin:12px 0 0}.dialog{width:min(94vw,500px);border:1px solid var(--line);border-radius:17px;padding:22px;background:#fff;color:var(--ink);box-shadow:0 24px 80px #132b4440}.dialog::backdrop{background:#11253b70;backdrop-filter:blur(3px)}.dialog form{margin:0}.dialog-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:20px}.dialog-head h2{margin:0}.close{width:32px;height:32px;font-size:22px}.dialog-actions{display:flex;justify-content:end;gap:8px;margin-top:20px}.small-text{font-size:11px}.config-dialog{width:min(94vw,650px)}.config-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}.config-toolbar .button{font-size:11px}.config-value{display:block;white-space:pre-wrap;word-break:break-all;background:#f4f7f9;border:1px solid var(--line);border-radius:10px;padding:13px;font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;max-height:280px;overflow:auto}.qr-wrap{display:grid;place-items:center;padding:10px 0 16px}.qr-wrap img{width:min(240px,65vw);height:auto;border:10px solid white;border-radius:12px;box-shadow:0 4px 18px #162f4a18}.toast{position:fixed;bottom:22px;right:23px;z-index:8;background:#193c5c;color:#fff;padding:11px 15px;border-radius:10px;box-shadow:0 8px 25px #193c5c30;font-size:12px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
.meter i.level-0{width:2%}.meter i.level-1{width:25%}.meter i.level-2{width:50%}.meter i.level-3{width:75%}.meter i.level-4{width:100%}
@media(max-width:1100px){.sidebar{width:205px}.main{margin-left:205px;padding:24px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vpn-grid{grid-template-columns:1fr}.vpn-card{max-width:none}.resource-grid{grid-template-columns:1fr}}
@media(max-width:700px){.sidebar{inset:auto 0 0;width:auto;height:62px;padding:5px 8px;background:#fff;border-right:0;border-top:1px solid var(--line);box-shadow:0 -5px 20px #243c5210}.brand,.sidebar-bottom{display:none}.sidebar nav{display:grid;grid-template-columns:repeat(4,1fr);height:100%;gap:2px}.nav-item{justify-content:center;display:flex;flex-direction:column;gap:1px;padding:4px 2px;font-size:9px;border-radius:8px}.nav-item span{font-size:16px}.main{margin-left:0;padding:19px 14px 84px}.topbar{margin-bottom:16px}.topbar h1{font-size:23px}.top-actions #updated-at{display:none}.welcome{min-height:130px;padding:20px}.welcome h2{font-size:19px}.welcome-orbit{transform:scale(.7);margin-right:-9px}.metric-grid{gap:9px;margin:12px 0 23px}.metric-card{padding:12px}.metric-card strong{font-size:21px;margin:8px 0 2px}.metric-top{font-size:10px}.metric-icon{width:25px;height:25px}.section-heading{align-items:center}.section-heading .button{font-size:10px;padding:8px}.vpn-grid{gap:9px;margin-bottom:22px}.vpn-card{padding:13px;grid-template-columns:35px 1fr auto;gap:0 9px}.vpn-symbol{width:33px;height:33px}.vpn-copy h3{font-size:12px}.vpn-copy p{font-size:10px}.vpn-meta{font-size:9px}.notice-row{align-items:start;padding:12px}.notice-row>.status{display:none}.notice-row p{line-height:1.4}.diag-intro{align-items:start;gap:10px;padding:16px}.diag-intro .button{max-width:130px;line-height:1.2}.user-card{grid-template-columns:1fr;padding:13px}.user-actions{justify-content:start}.user-meta,.user-configs{grid-column:1}.event-row{grid-template-columns:1fr auto;gap:5px 8px}.event-row time{grid-column:1}.event-row .status{grid-column:2;grid-row:1}.event-row b{grid-column:1}.event-row span:last-child{grid-column:1/-1}.dialog{padding:18px}.diag-row{grid-template-columns:1fr auto}}