*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 0 0,#e7edf9,transparent 45%),radial-gradient(ellipse at 100% 100%,#eeebf8,transparent 45%),#f5f5f7;color:#1d1d1f;font:14px -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}[hidden]{display:none!important}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:9px;background:#edf0f6;padding:10px 16px;color:#5b6c86;transition:background .15s}button:hover{background:#e0e9f9;color:#007aff}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #7cb4f8;outline-offset:3px}.primary{background:#007aff;color:#fff;border-radius:22px;padding:11px 21px}.primary:hover{background:#0071e3;color:#fff}.logo{font-size:25px;font-weight:750;letter-spacing:-1px}.logo span{color:#007aff}aside{position:fixed;width:220px;inset:0 auto 0 0;background:#f5f6fab3;backdrop-filter:blur(28px);border-right:1px solid #fff;padding:35px 22px}.caption{display:block;color:#a0a0a8;font-size:10px;margin:45px 12px 15px}nav button{width:100%;text-align:left;background:transparent;color:#777781;margin-bottom:7px;font-size:13px;padding:13px}nav .selected{background:#007aff;color:white}.sidefoot{position:absolute;bottom:30px;color:#7b7b86;border:1px solid #fff;border-radius:14px;padding:17px;line-height:2;font-size:12px;background:#ffffff55}.sidefoot small{color:#a0a0a8;font-size:10px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#49af7a}main{margin-left:220px}header{height:80px;background:#ffffff77;backdrop-filter:blur(20px);border-bottom:1px solid #fff;display:flex;align-items:center;justify-content:space-between;padding:0 38px;color:#95959e;font-size:12px}header b{font-weight:400;color:#777781}header button{margin-left:15px;font-size:11px}article{padding:35px 38px;max-width:1500px;margin:auto}.heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.eyebrow{font-size:10px;color:#9999a2;letter-spacing:1.5px}h1{font-size:31px;letter-spacing:-1px;margin:11px 0}p{color:#888892;font-size:12px;line-height:1.9}h2{font-size:15px;font-weight:600;margin:0 0 20px}.actions{display:flex;gap:10px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:25px 0}.card,.table-card{background:#ffffffcc;backdrop-filter:blur(20px);border:1px solid #fff;border-radius:20px;box-shadow:0 8px 30px #30305005;padding:25px}.stats small{font-size:12px;color:#888892}.stats strong{display:block;font-size:34px;font-weight:650;letter-spacing:-1px;margin:15px 0;font-variant-numeric:tabular-nums}.stats span{font-size:10px;color:#a0a0a8}.table-card{padding:0;margin-top:22px;overflow:hidden}.table-head{display:flex;justify-content:space-between;align-items:center;padding:24px}.table-head h2{margin:0}.table-head input{width:210px}.scroll{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-size:10px;color:#9999a2;background:#f8f9fc;padding:14px 22px;font-weight:500}td{padding:20px 22px;border-bottom:1px solid #f0f0f5;font-size:12px;color:#777782}td strong{color:#41414c;font-weight:600}.muted{display:block;font-size:10px;color:#a0a0aa;margin-top:7px}.badge{font-size:10px;padding:5px 9px;background:#eef0f5;color:#9999a2;border-radius:20px}.badge.online{background:#eaf7ee;color:#449c69}.metrics{line-height:1.9;font-variant-numeric:tabular-nums}.metrics b{display:inline-block;color:#537fb6;font-weight:600;min-width:38px}.table-note{padding:0 24px 10px;font-size:10px;color:#a0a0a8}td button{font-size:11px;padding:7px 11px;background:#edf4ff;color:#007aff}footer{display:flex;justify-content:space-between;color:#aaaab3;font-size:10px;margin-top:27px}.empty{text-align:center;padding:60px 20px;color:#999}label{display:block;font-size:12px;color:#777782;margin:17px 0}input,select{display:block;border:1px solid #e6e7ee;background:#fafbfe;border-radius:9px;padding:11px 13px;width:100%;margin-top:7px;color:#41414a}.inline-form{display:flex;gap:18px;align-items:end;flex-wrap:wrap}.inline-form button{margin-bottom:17px}.narrow{max-width:500px}dialog{width:550px;max-width:94vw;border:1px solid #fff;background:#fdfdff;border-radius:24px;padding:30px;box-shadow:0 30px 100px #22224430}dialog::backdrop{background:#30305025;backdrop-filter:blur(8px)}.close{float:right;font-size:21px;background:transparent;padding:0 7px}.network-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:25px 0}.network-grid>div{padding:20px;background:#f0f5fd;border-radius:16px}.network-grid span{font-size:12px;color:#86868b}.network-grid strong{display:block;font-size:34px;margin-top:13px;font-variant-numeric:tabular-nums}pre{white-space:pre-wrap;word-break:break-all;background:#eef1f8;border-radius:10px;padding:15px;font-size:11px;line-height:1.8}.token{user-select:all;color:#2769b1}#message{color:#a76535;font-size:12px;line-height:1.8;min-height:10px;margin-top:10px}.login{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:400px;max-width:100%;padding:40px;background:#ffffffb9;border:1px solid white;border-radius:26px;box-shadow:0 30px 100px #30305008}.login h1{margin-top:35px}.login button{width:100%;margin:10px 0 24px}.login small{color:#aaaab2;font-size:10px}.login #loginError{color:#c85d5d;font-size:12px;margin-bottom:15px}.audit-row{padding:16px 0;border-bottom:1px solid #f0f0f5;font-size:12px;color:#71717c}.audit-row small{color:#aaa;display:block;margin-top:8px}.danger{color:#c66262!important;background:#fff0f0!important}.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}@media(max-width:1000px){aside{width:180px;padding:30px 15px}main{margin-left:180px}article{padding:28px 22px}header{padding:0 22px}.stats{grid-template-columns:1fr 1fr}.logo{font-size:22px}}@media(max-width:600px){aside{position:static;width:auto;padding:20px}.caption,.sidefoot{display:none}nav{display:flex;margin-top:16px;overflow:auto}nav button{white-space:nowrap;margin:0 6px 0 0;width:auto;padding:10px;font-size:12px}main{margin:0}header{height:60px;font-size:10px}.heading{align-items:start;flex-wrap:wrap}h1{font-size:27px}.stats{gap:12px}.card{padding:20px;border-radius:16px}.stats strong{font-size:29px}.table-head input{width:150px}.inline-form{display:block}.inline-form label{width:100%}footer{display:block;line-height:2}footer span{display:block}}

.password-field{flex:1;min-width:260px;margin:17px 0}.password-field>label{margin:0 0 7px}.password-controls{display:flex;align-items:center;gap:8px}.password-controls input{margin:0;min-width:130px;font-family:ui-monospace,monospace}.password-controls button{margin:0;white-space:nowrap;font-size:12px}.password-field>small{display:block;margin-top:8px;font-size:10px;color:#92929c}.inline-form:has(.password-field){align-items:center}@media(max-width:600px){.password-field{min-width:0}.password-controls{flex-wrap:wrap}.password-controls input{flex:1 1 100%}.password-controls button{padding:9px 13px}}

.customer-actions{display:flex;gap:8px;flex-wrap:wrap}.customer-actions button:disabled{opacity:.4;cursor:not-allowed}.assignment-list{max-height:330px;overflow:auto;margin:20px 0}.assignment-item{display:flex;align-items:center;gap:12px;padding:14px 12px;border:1px solid #e7eaf2;border-radius:12px;margin:9px 0}.assignment-item input{width:17px;height:17px;margin:0;accent-color:#007aff}.assignment-item span{display:block}.assignment-item small{display:block;font-size:11px;color:#9999a2;margin-top:6px}.assignment-item:has(input:disabled){opacity:.55}


.network-stats strong{font-size:25px;letter-spacing:-.6px}.bandwidth-panel{margin:24px 0;padding-top:20px;border-top:1px solid #eceef5}.bandwidth-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.bandwidth-heading h2{margin:0}.bandwidth-heading select{width:140px;margin:0;font-size:11px;padding:8px}.bandwidth-now{display:flex;justify-content:space-between;gap:10px;margin:20px 0;font-size:12px;color:#85858f}.bandwidth-now strong{display:block;font-size:23px;margin-top:6px;color:#3488ed;font-variant-numeric:tabular-nums}.bandwidth-now span:last-child strong{color:#9a7acc}.bandwidth-chart{height:145px}.bandwidth-chart svg{width:100%;height:100%;overflow:visible}.bandwidth-chart path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}.bandwidth-chart .bandwidth-grid{stroke:#eceef5;stroke-width:1;stroke-dasharray:4 4}.rx-line{stroke:#3488ed}.tx-line{stroke:#9a7acc}.chart-scale,.chart-times{color:#a0a0aa;font-size:10px}.chart-scale{margin-bottom:8px}.chart-times{display:flex;justify-content:space-between;margin:10px 0 20px}.traffic-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.traffic-grid>div{background:#f1f5fc;border-radius:12px;padding:15px}.traffic-grid small{color:#9696a0;font-size:10px}.traffic-grid strong{display:block;font-size:12px;margin-top:8px;font-variant-numeric:tabular-nums}.network-footnote{font-size:10px;line-height:1.9}.no-points{padding:50px 10px;text-align:center}dialog:has(.bandwidth-panel){width:680px;max-height:88vh;overflow:auto}@media(max-width:600px){.network-stats strong{font-size:21px}.bandwidth-now strong{font-size:20px}.traffic-grid{grid-template-columns:1fr}}

.server-ip{max-width:270px;white-space:normal;word-break:break-all;line-height:1.6}.ip-history-panel{margin-top:24px;padding-top:20px;border-top:1px solid #eceef5}.ip-current{padding:15px;background:#f1f5fc;border-radius:12px}.ip-current small{font-size:10px;color:#9696a0}.ip-current strong{display:block;margin-top:8px;font-size:12px;font-family:ui-monospace,monospace;word-break:break-all}.ip-history-list{max-height:180px;overflow:auto;margin-top:14px}.ip-history-item{display:grid;grid-template-columns:145px 1fr;gap:7px;padding:12px 0;border-bottom:1px solid #edeff5;font-size:11px;color:#777783}.ip-history-item span{font-family:ui-monospace,monospace;word-break:break-all}.ip-history-item small{color:#aaaab2;grid-column:2}@media(max-width:600px){.ip-history-item{grid-template-columns:1fr}.ip-history-item small{grid-column:auto}}

.server-actions{display:flex;gap:8px}.reboot-button{background:#fff2e9;color:#b87845}.reboot-button:hover{background:#ffe6d4;color:#a9632b}.reboot-button:disabled{opacity:.4;cursor:not-allowed}.uptime-reboot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0;color:#9696a0;font-size:12px}.uptime-reboot strong{display:block;color:#555565;margin-top:6px;font-size:14px}


.full-ip-rows{max-height:46vh;overflow:auto;margin:16px 0}.full-ip-event{border:1px solid #e7eaf3;border-radius:13px;padding:16px;margin-bottom:12px}.full-ip-event-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#626274;margin-bottom:12px}.full-ip-event-head time{font-size:10px;color:#9a9aa5}.ip-transition{display:grid;grid-template-columns:65px 1fr;gap:12px;margin:10px 0}.ip-transition small{font-size:10px;color:#a0a0aa}.ip-transition span{font:12px ui-monospace,monospace;line-height:1.8;word-break:break-all;color:#5384b8}@media(max-width:600px){.server-actions{flex-wrap:wrap}.full-ip-event-head{flex-direction:column;gap:6px}}

.metric-link,td .metric-link{background:transparent;color:#548bc7;border:0;padding:3px 4px;margin-left:-4px;font-size:11px;text-align:left;border-radius:5px;line-height:1.8}.metric-link:hover,td .metric-link:hover{background:#eaf2ff;color:#007aff;text-decoration:underline}.metric-link:focus-visible{outline:2px solid #7cb4f8}.disk-label{font-size:10px;color:#a0a0a8}.metric-tabs{display:flex;gap:5px;flex-wrap:wrap;background:#eef0f7;padding:5px;border-radius:12px;margin:22px 0 16px}.metric-tabs button{flex:1;white-space:nowrap;padding:9px 10px;font-size:11px;background:transparent;color:#7e8290}.metric-tabs button[aria-selected="true"]{background:#fff;color:#007aff;box-shadow:0 2px 6px #27305008}.metric-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#9a9eaa;font-size:10px}.metric-toolbar select{width:140px;font-size:11px;margin:0;padding:8px}.metric-window>h2{font-size:23px;margin:12px 0 0}.metric-current{padding:24px 0}.metric-current>span{color:#969aa5;font-size:12px}.metric-current strong{display:block;font-size:38px;letter-spacing:-1px;color:#3488ed;margin:10px 0}.metric-current small{color:#a0a0aa;font-size:10px}.metric-chart{height:160px}.metric-chart .metric-line{stroke:#3488ed;stroke-width:2;fill:none}.metric-dots{fill:#3488ed}dialog:has(.metric-window){width:700px;max-height:88vh;overflow:auto}@media(max-width:600px){.metric-tabs button{flex:1 1 28%}.metric-window>h2{font-size:20px}}

/* Focused monitoring window: spacious cards and direct chart inspection. */
dialog:has(.metric-window){width:960px;border-radius:24px;background:#fafbfd}.metric-window>h2{font-size:28px;letter-spacing:-.7px}.metric-window>p{margin:7px 0}.metric-controls{display:flex;gap:6px;align-items:center}.metric-controls button{font-size:11px;padding:9px 12px}.monitor-stats{display:flex;gap:14px;margin:24px 0}.monitor-stat{flex:1;padding:22px;border:1px solid #e8edf5;background:#fff;border-radius:18px;box-shadow:0 6px 20px #283d6010}.monitor-stat>small{color:#8a91a0;font-size:12px}.monitor-stat>strong{display:block;color:var(--metric-color);font-size:34px;letter-spacing:-1px;margin:12px 0 18px;font-variant-numeric:tabular-nums}.monitor-stat>div{display:flex;gap:24px;color:#9198a5;font-size:11px}.monitor-stat b{display:block;color:#586579;margin-top:6px;font-size:13px;font-weight:500}.monitor-plot{display:flex;gap:12px;padding-top:16px}.monitor-axis{width:78px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;color:#98a0ad;font-size:10px;text-align:right;font-variant-numeric:tabular-nums}.monitor-canvas{position:relative;flex:1;min-width:0;height:240px}.monitor-canvas svg{width:100%;height:100%;touch-action:pan-y}.monitor-tooltip{position:absolute;top:10px;min-width:180px;background:#ffffffed;backdrop-filter:blur(12px);border:1px solid #e1e8f2;padding:12px;border-radius:12px;box-shadow:0 6px 25px #273c6020;font-size:11px;pointer-events:none;z-index:1}.monitor-tooltip time{display:block;color:#8b94a3;margin-bottom:10px}.monitor-tooltip div{margin-top:7px}.monitor-tooltip b{float:right;margin-left:16px}.monitor-times{display:flex;justify-content:space-between;margin:12px 0 22px 90px;color:#98a0ad;font-size:10px}.monitor-empty{height:100%;display:grid;place-content:center;background:#f0f3f8;border-radius:14px;color:#98a0ad}.metric-tabs button{font-size:12px}.metric-link{transition:background .15s}.metric-link::after{content:' ↗';font-size:9px;opacity:.55}@media(max-width:600px){.metric-toolbar{align-items:flex-start;flex-direction:column}.metric-controls{width:100%;flex-wrap:wrap}.monitor-stats{flex-direction:column}.monitor-stat{padding:16px}.monitor-stat>strong{font-size:29px}.monitor-canvas{height:190px}.monitor-axis{width:58px}.monitor-times{margin-left:70px}.monitor-times span:nth-child(even){display:none}}

/* Compact overview cards: approximately half the original vertical footprint. */
#serversPage .stats{gap:12px;margin:12px 0}
#serversPage .stats>.card{padding:8px 16px;border-radius:14px}
#serversPage .stats small{font-size:11px;line-height:1.25}
#serversPage .stats strong{font-size:22px;line-height:1.15;letter-spacing:-.5px;margin:4px 0}
#serversPage .stats span{font-size:9px;line-height:1.25}
#serversPage .network-stats strong{font-size:20px}
@media(max-width:600px){#serversPage .stats{gap:8px}#serversPage .stats>.card{padding:8px 10px}#serversPage .stats strong{font-size:21px}#serversPage .network-stats strong{font-size:18px}}

/* Public addresses stay prominent in both administrator and customer lists. */
#serverRows .server-ip{display:table;width:fit-content;max-width:300px;margin-top:9px;padding:7px 10px;background:#e8f2ff;color:#075bb5;border:1px solid #bfd9fa;border-radius:9px;font-size:15px;font-weight:650;line-height:1.55;letter-spacing:.1px;user-select:text;font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere}
@media(max-width:600px){#serverRows .server-ip{font-size:14px;max-width:240px}}