:root{--navy:#1a2f5a;--teal:#2d4b9b;--brand:#2d4b9b;--brand-dark:#1a2f5a;--accent:#de002e;--green:#1f9d57;--red:#c0392b;--amber:#e08e0b}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,sans-serif;background:#f4f6fa;color:#1c2733;min-height:100vh}.center{display:flex;align-items:center;justify-content:center;min-height:60vh}.muted{color:#7c8a99}.sm{font-size:12px}.mt{margin-top:16px}code{background:#eef2f6;padding:2px 7px;border-radius:6px;font-size:13px}.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.auth-card{background:#fff;border-radius:16px;box-shadow:0 12px 40px #14284629;padding:34px 32px;width:380px;display:flex;flex-direction:column;gap:12px;text-align:center}.auth-card.wide{width:430px}.auth-card h1{font-size:22px;color:var(--navy);margin-top:6px}.auth-card label{text-align:left;font-size:13px;color:#67788a;font-weight:600;display:flex;flex-direction:column;gap:5px;margin-top:6px}.auth-card input,.form input,.form select{padding:11px 12px;border:1px solid #d4dce4;border-radius:9px;font-size:15px}.auth-card input:focus,.form input:focus{outline:none;border-color:var(--teal)}.qr{width:190px;height:190px;align-self:center;border:1px solid #e7edf2;border-radius:10px}.secret{font-size:12px;color:#7c8a99}.emblem{width:42px;height:42px;border-radius:10px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}.emblem.big{width:54px;height:54px;font-size:17px;align-self:center}.primary{background:var(--navy);color:#fff;border:0;padding:12px;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;margin-top:8px}.primary:disabled{opacity:.6;cursor:default}.err{background:#fdecea;color:var(--red);padding:9px 12px;border-radius:8px;font-size:13px;text-align:left}.bar{background:linear-gradient(90deg,var(--navy),#274b73);color:#fff;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 3px 14px #0f1e3738;border-bottom:3px solid var(--teal)}.bar .lhs{display:flex;align-items:center;gap:13px}.bar .brand{font-size:18px;font-weight:600}.nav{display:flex;align-items:center;gap:8px}.nav button{background:transparent;color:#fff;border:0;padding:8px 14px;border-radius:8px;font-size:14px;cursor:pointer;opacity:.85}.nav button.on{background:#ffffff29;opacity:1;font-weight:600}.nav .who{margin-left:8px;opacity:.8;font-size:13px}.nav .ghost{border:1px solid rgba(255,255,255,.35);opacity:.95}.wrap{max-width:1120px;margin:24px auto;padding:0 20px}.stampline{text-align:right;color:#8a97a5;font-size:12px;margin-bottom:10px}.live{display:inline-flex;align-items:center;gap:6px;letter-spacing:1px}.live .dot{width:8px;height:8px;border-radius:50%;background:#5ad19a;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #5ad19a99}70%{box-shadow:0 0 0 7px #5ad19a00}to{box-shadow:0 0 #5ad19a00}}h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--navy);margin:26px 4px 13px;display:flex;align-items:center;gap:10px}h2.sec:before{content:"";width:4px;height:15px;background:var(--teal);border-radius:2px}.hero{color:#fff;border-radius:16px;padding:26px 30px;display:flex;align-items:center;gap:20px;box-shadow:0 8px 24px #0000001f}.hero .ic{width:58px;height:58px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700}.hero h1{font-size:24px}.hero p{opacity:.9;margin-top:3px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px 0}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.card{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 6px 18px #14284614;border:1px solid #eaeef3;border-top:4px solid var(--teal);transition:transform .15s,box-shadow .15s}.card:hover{transform:translateY(-2px);box-shadow:0 12px 26px #14284621}.card .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#67788a;font-weight:600}.card .big{font-size:34px;font-weight:700;margin-top:6px;color:var(--navy)}.card .big .frac{font-size:17px;color:#9aa7b4}.card .sub{font-size:12px;color:#7c8a99;margin-top:2px}.pill{display:inline-block;padding:6px 16px;border-radius:20px;color:#fff;font-weight:600;font-size:18px;margin-top:8px}.pill2{display:inline-block;padding:5px 14px;border-radius:18px;color:#fff;font-weight:600;font-size:13px}.spark{width:100%;height:56px;display:block;margin-top:8px}.nodata{color:#9aa7b4;font-size:13px;margin-top:10px}.nodata.pad{padding:18px 22px}.gb{flex:1;height:11px;background:#e7edf2;border-radius:6px;overflow:hidden}.gf{height:100%;border-radius:6px}.duo{display:flex;align-items:center;gap:10px;margin-top:10px}.duo .t{width:42px;font-size:12px;color:#67788a}.duo .vv{width:42px;text-align:right;font-weight:600;color:var(--navy);font-size:13px}.panel{background:#fff;border-radius:14px;box-shadow:0 6px 18px #14284614;border:1px solid #eaeef3;overflow:hidden}.panel h3{font-size:15px;color:var(--navy);padding:15px 22px 8px}.panel .pad{padding:0 22px 16px}.form{display:flex;flex-direction:column;gap:10px}.crow,.brow,.prow,.urow{display:flex;align-items:center;gap:12px;padding:11px 22px;border-top:1px solid #f2f5f8}.cico{font-size:17px}.cname{flex:1;font-size:14px}.cnum{font-weight:700;color:var(--navy);font-size:17px}.blab{width:150px;font-size:13px}.bval{width:44px;text-align:right;font-weight:600;color:var(--navy);font-size:13px}.loc{display:flex;gap:16px;padding:14px 22px}.locbox{flex:1;background:#f6f9fb;border-radius:10px;padding:14px;text-align:center}.locbox .n{font-size:26px;font-weight:700;color:var(--navy)}.locbox .t{font-size:12px;color:#7c8a99;margin-top:2px}.badge{color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:6px;min-width:62px;text-align:center}.pname{flex:1;font-size:14px}.page{font-size:12px;color:#8a97a5}.empty{padding:22px;color:var(--green);font-weight:500;text-align:center}.wan{background:#fff;border-radius:14px;box-shadow:0 6px 18px #14284614;border:1px solid #eaeef3;border-left:4px solid var(--teal);padding:18px 20px}.wanhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.wanp{font-size:18px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:9px}.wanp .role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--teal);background:#e7f1f2;padding:2px 8px;border-radius:10px}.wanl{font-size:12px;color:#8a97a5;margin-top:3px;font-family:ui-monospace,monospace}.kv{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid #f2f5f8;font-size:13px}.kv:first-of-type{margin-top:10px}.kv .k{color:#67788a}.kv .v{font-weight:600}.uname{flex:1;font-size:14px}.ustat{font-size:12px;color:#7c8a99;width:80px}.rolechip{font-size:10px;background:var(--teal);color:#fff;padding:2px 7px;border-radius:8px;margin-left:6px}.ghost{background:transparent;border:1px solid #d4dce4;border-radius:8px;padding:7px 12px;cursor:pointer;font-size:13px;color:#1c2733}.ghost.sm{padding:5px 10px}.ghost.danger{color:var(--red);border-color:#e9c4c0}.created{margin:0 22px 16px;background:#f0f7f2;border:1px solid #cfe6d8;border-radius:10px;padding:12px 14px;font-size:13px}.foot{text-align:center;color:#90a0b0;font-size:12px;margin:26px 0}.panel h3 .cnt{background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:1px 9px;border-radius:11px;margin-left:9px}.lock-ic{font-size:15px}.uname .usam{color:#8a97a5;font-size:12px;margin-left:8px;font-family:ui-monospace,monospace}.primary.sm{padding:7px 14px;font-size:13px;margin-top:0}.modal-ov{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f1c308c;display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{background:#fff;border-radius:16px;box-shadow:0 24px 60px #0a19324d;padding:28px 30px;width:440px;max-width:100%;text-align:center;animation:pop .14s ease-out}@keyframes pop{0%{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}.modal-ic{font-size:40px}.modal h3{color:var(--navy);font-size:20px;margin:6px 0 10px}.modal-body{font-size:14px;color:#34465a;line-height:1.5}.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:22px}.modal-actions button{min-width:120px}.grid-printers{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.card.printer .psub{font-size:12px;color:#8a97a5;margin:2px 0 14px;font-family:ui-monospace,monospace}.toners{display:flex;flex-direction:column;gap:11px}.toner .tlab{display:flex;justify-content:space-between;font-size:12px;color:#67788a;margin-bottom:4px}.toner .tpct{font-weight:700;color:var(--navy)}.toner .tpct.low{color:var(--red)}.tbar{height:13px;background:#eef2f6;border-radius:7px;overflow:hidden;box-shadow:inset 0 1px 2px #0000000f}.tfill{height:100%;border-radius:7px;transition:width .4s}.arow{display:grid;grid-template-columns:170px 130px 1fr 120px;gap:10px;padding:9px 22px;border-top:1px solid #f2f5f8;font-size:13px;align-items:center}.arow .ats{color:#8a97a5}.arow .aact{font-weight:600;color:var(--navy)}.arow .auser{text-align:right;color:#67788a}@media(max-width:880px){.grid-printers{grid-template-columns:1fr}.arow{grid-template-columns:1fr 1fr}}@media(max-width:880px){.grid4,.grid3,.two{grid-template-columns:1fr 1fr}.hero{flex-direction:column;text-align:center}}@media(max-width:560px){.grid4,.grid3,.two{grid-template-columns:1fr}}.rolesel{padding:5px 8px;border:1px solid #d4dce4;border-radius:7px;font-size:13px;background:#fff}.urow.isoff{opacity:.55}.urow.isoff .uname:after{content:" (gesperrt)";color:var(--red);font-size:12px}.shell{display:flex;min-height:100vh}.sidebar{width:280px;position:fixed;top:0;left:0;bottom:0;z-index:40;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--brand-dark),var(--brand));color:#fff;box-shadow:2px 0 18px #0f1e3c2e}.side-brand{display:flex;align-items:center;gap:12px;padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.12)}.side-brand .emblem{background:#fff;color:var(--brand);width:44px;height:44px;font-size:15px;flex:none}.side-title{display:flex;flex-direction:column;line-height:1.25}.side-title b{font-size:14px}.side-title span{font-size:11px;opacity:.75;letter-spacing:.5px;text-transform:uppercase}.side-nav{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}.snav{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;cursor:pointer;color:#ffffffd1;font-size:14.5px;padding:11px 14px;border-radius:10px;transition:background .12s,color .12s}.snav .ico{font-size:16px;width:20px;text-align:center}.snav:hover{background:#ffffff1a;color:#fff}.snav.on{background:#ffffff29;color:#fff;font-weight:600;box-shadow:inset 3px 0 #fff}.side-user{display:flex;align-items:center;gap:11px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.12)}.avatar{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none}.su-meta{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}.su-meta b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.su-meta span{font-size:11px;opacity:.72}.su-logout{background:#ffffff1f;border:0;color:#fff;width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:16px;flex:none;transition:background .12s}.su-logout:hover{background:var(--accent)}.main{flex:1;margin-left:280px;min-width:0;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #e6eaf0;box-shadow:0 1px 8px #1428460a;display:flex;align-items:center;gap:14px;padding:14px 28px}.page-title{font-size:19px;color:var(--brand-dark);display:flex;align-items:center;gap:10px;font-weight:650}.page-title .pt-ico{font-size:20px}.topbar .live{margin-left:auto;color:#8a97a5;font-size:12px;font-weight:600}.burger{display:none;background:transparent;border:0;font-size:22px;color:var(--brand-dark);cursor:pointer}.content{padding:16px 28px 18px;max-width:1200px;width:100%}.page{display:block}.backdrop{display:none}h2.sec .seemore{margin-left:auto;background:transparent;border:0;color:var(--brand);font-size:12px;font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0}.grid-wan{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.vpn-card{border-left-color:var(--accent)}.vpn-card .vpn-big{font-size:40px;font-weight:800;color:var(--brand-dark);margin:6px 0 2px}.page-age{font-size:12px;color:#8a97a5;white-space:nowrap}.bk-item{border-top:1px solid #f2f5f8}.bk-row{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:0;cursor:pointer;padding:12px 22px;text-align:left}.bk-row:hover{background:#f8fafc}.bk-row .bk-type{font-size:12px;color:#8a97a5}.bk-row .chev{color:#9aa7b4}.bk-detail{padding:4px 22px 18px;background:#fafbfd}.bk-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:#4b5563;margin:8px 0 12px}.bk-vms-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8a97a5;font-weight:700;margin-bottom:8px}.bk-vms{display:flex;flex-wrap:wrap;gap:8px}.vm-chip{background:#eef3fb;color:var(--brand-dark);border:1px solid #d8e2f2;border-radius:8px;padding:5px 11px;font-size:13px}.panel-head{width:100%;background:transparent;border:0;display:flex;align-items:center;justify-content:space-between;cursor:default;padding:0}.panel-head.clickable{cursor:pointer}.panel-head .chev{color:#9aa7b4;padding:15px 22px 8px 0}.panel h3 .cnt.warn{background:var(--red)}.panel h3 .cnt{background:#9aa7b4}.docs-page{padding:0;height:calc(100vh - 124px);display:flex;flex-direction:column}.docbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px 12px;font-size:12px;color:#67788a}.ghost-btn{background:#fff;border:1px solid #d4dce4;border-radius:8px;padding:6px 12px;font-size:13px;color:var(--brand);text-decoration:none}.docframe{flex:1;width:100%;border:1px solid #e6eaf0;border-radius:12px;background:#fff;box-shadow:0 6px 18px #14284614}@media(max-width:980px){.sidebar{transform:translate(-100%);transition:transform .22s ease}.shell.nav-open .sidebar{transform:translate(0)}.main{margin-left:0}.burger{display:block}.shell.nav-open .backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0f1c3066;z-index:35}.grid-wan{grid-template-columns:1fr 1fr}}@media(max-width:560px){.grid-wan{grid-template-columns:1fr}.content{padding:16px}.bk-row{flex-wrap:wrap}}.seccard{text-align:left;cursor:pointer;font:inherit;display:block}.seccard .sub{color:var(--brand);font-weight:600}.toner-alarm{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fdecea;border:1px solid #f3c9c4;border-left:4px solid var(--red);border-radius:12px;padding:12px 18px;cursor:pointer;margin-top:6px}.toner-alarm .ta-ic{font-size:22px}.toner-alarm .ta-txt{flex:1;display:flex;flex-direction:column}.toner-alarm .ta-txt b{color:var(--red)}.toner-alarm .ta-txt span{font-size:12px;color:#8a5a55}.overview .hero{padding:10px 24px}.overview .hero h1{font-size:19px}.overview .hero p{font-size:13px;margin-top:1px}.overview .hero .ic{width:42px;height:42px;font-size:22px}.overview h2.sec{margin:7px 4px 4px}.overview .grid4{margin:7px 0}.overview .card{padding:9px 15px}.overview .card .lbl{font-size:11px}.overview .card .big{font-size:24px;margin-top:2px}.overview .card .sub{font-size:11px}.overview .card .pill{font-size:14px;padding:3px 12px;margin-top:4px}.overview .wan{padding:9px 15px}.overview .wan .kv{padding:5px 0}.overview .vpn-card .vpn-big{font-size:28px;margin:2px 0}.overview .prow{padding:7px 18px}.overview .seccard .big{font-size:24px}.side-title b{white-space:nowrap;font-size:11.5px}.side-brand{padding:18px 16px}.subtabs{display:flex;gap:8px;margin-bottom:14px}.subtabs button{background:#fff;border:1px solid #e0e6ee;border-radius:10px;padding:9px 16px;font-size:14px;cursor:pointer;color:#4b5563}.subtabs button.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}.uinfo{flex:1;display:flex;flex-direction:column;min-width:0}.uinfo .uname{flex:none;font-size:14px}.uinfo .umeta{font-size:12px;color:#8a97a5;font-family:ui-monospace,monospace}.toner-alarm{display:block;cursor:pointer}.toner-alarm .ta-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}.toner-alarm .ta-head b{color:var(--red);flex:1}.toner-alarm .ta-ic{font-size:20px}.toner-alarm .ta-go{color:var(--red);font-weight:600;font-size:13px}.toner-alarm .ta-bars{display:flex;flex-direction:column;gap:9px}.toner-alarm .ta-lab{display:flex;justify-content:space-between;font-size:12px;color:#8a5a55;margin-bottom:3px}.toner-alarm .ta-pct{font-weight:700;color:var(--red)}.toner-alarm .ta-bar{height:12px;background:#f3d6d2;border-radius:6px;overflow:hidden}.toner-alarm .ta-fill{height:100%;background:var(--red);border-radius:6px;transition:width .4s}button.wan.vpn-card{cursor:pointer;text-align:left;font:inherit;width:100%;border-left-color:var(--accent)}.vpn-list{display:flex;flex-direction:column;gap:8px;text-align:left}.vpn-row{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#f6f9fb;border-radius:8px;font-size:13px}.vpn-row .vpn-n{font-weight:700;color:var(--brand);width:30px}.vpn-row .vpn-ip{flex:1;font-family:ui-monospace,monospace}.vpn-row .vpn-d{color:#67788a}.vpn-row .vpn-kb{width:100px;text-align:right;color:#67788a}.urow.uadmin{flex-wrap:wrap}.urow.uadmin .uinfo{flex:1;min-width:210px}.urow.uadmin .rolesel{width:150px}.urow.uadmin .ustat{width:84px}.uacts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}.watch-add{display:flex;gap:8px;padding:14px 22px 8px}.watch-add input{flex:1;padding:9px 12px;border:1px solid #d4dce4;border-radius:9px;font-size:14px}.watch-row.alarm{background:#fdecea}.alarmtag{background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:8px;margin-left:8px}.pname .usam{margin-left:8px;color:#8a97a5;font-size:12px;font-family:ui-monospace,monospace}