/* Hylab Networks — server inventory.
   Tonal surfaces, one clear hierarchy and roomy touch targets, in the spirit of
   Google's design language: label / headline / value steps, pill states, and
   8px-based spacing instead of boxed-up borders. */
.server-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,378px),1fr));gap:20px;align-items:start}
.vm-card{position:relative;min-width:0;padding:23px 23px 19px;border-radius:24px;border:1px solid rgba(255,255,255,.06);background:radial-gradient(130% 110% at 0% 0%,rgba(138,180,248,.08),transparent 58%),var(--surface);box-shadow:0 1px 2px #0006,0 14px 34px -20px #000b;transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.vm-card:hover{transform:translateY(-3px);border-color:rgba(138,180,248,.22);box-shadow:0 2px 4px #0007,0 26px 52px -24px #000d}
.vm-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vm-id{font-size:11.5px;font-weight:500;letter-spacing:.07em;color:var(--muted);overflow-wrap:anywhere}
.vm-status{display:inline-flex;align-items:center;gap:7px;flex:none;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.055);font-size:12px;font-weight:600;color:var(--text)}
.vm-status i{width:7px;height:7px;flex:none;border-radius:50%;background:currentColor;opacity:.7}
.vm-status.is-running{background:rgba(129,221,177,.14);color:#8fe0b2}
.vm-name{margin:15px 0 0;font-size:clamp(22px,1.9vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.032em;color:#f7f9fc;overflow-wrap:anywhere}
.vm-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:19px 0 0;padding:0}
.vm-specs>div{min-width:0;padding:11px 13px;border-radius:16px;background:rgba(255,255,255,.038)}
.vm-specs dt{margin:0 0 5px;font-size:11px;letter-spacing:.02em;color:var(--muted)}
.vm-specs dd{margin:0;font-size:15px;font-weight:600;letter-spacing:-.012em;color:#f3f6fa;overflow-wrap:anywhere}
.vm-load{display:grid;gap:14px;margin:19px 0 0}
.load-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 10px}
.load-label{font-size:12.5px;color:var(--text)}
.load-label small{margin-left:6px;font-size:11px;color:var(--muted)}
.load-value{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:#f3f6fa}
.load-row progress{grid-column:1/-1;appearance:none;-webkit-appearance:none;display:block;width:100%;height:7px;margin-top:8px;border:0;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.09)}
.load-row progress::-webkit-progress-bar{background:rgba(255,255,255,.09);border-radius:99px}
.load-row progress::-webkit-progress-value{border-radius:99px;background:linear-gradient(90deg,#6f9ee9,var(--accent))}
.load-row progress::-moz-progress-bar{border-radius:99px;background:linear-gradient(90deg,#6f9ee9,var(--accent))}
.load-row.is-memory progress{background:rgba(255,255,255,.09)}
.load-row.is-memory progress::-webkit-progress-bar{background:rgba(255,255,255,.09)}
.load-row.is-memory progress::-webkit-progress-value{background:linear-gradient(90deg,#5fae7c,var(--mint))}
.load-row.is-memory progress::-moz-progress-bar{background:linear-gradient(90deg,#5fae7c,var(--mint))}
.vm-net{display:grid;grid-template-columns:1fr 1fr;margin:19px 0 0;border-radius:16px;background:rgba(255,255,255,.03);overflow:hidden}
.vm-net>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px}
.vm-net>div+div{border-left:1px solid rgba(255,255,255,.06)}
.vm-net span{font-size:11px;color:var(--muted)}
.vm-net b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:#f3f6fa;overflow-wrap:anywhere}
.vm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:19px}
.vm-uptime{font-size:12px;color:var(--muted)}
.vm-actions{display:flex;gap:8px}
.vm-actions button{min-height:40px;padding:0 18px;border-radius:999px;font-size:13px;font-weight:600}
.page-head-tools{display:flex;align-items:center;gap:13px;flex-shrink:0}
.live-status{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.live-status::before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:#8c9199}
.live-status[data-state=live]::before{background:#8fe0b2;box-shadow:0 0 0 4px #8fe0b214}
.live-status[data-state=reconnecting]::before,.live-status[data-state=connecting]::before{background:#d5b77e}
#workspace:not(.is-detail) .page-head h1{font-size:clamp(30px,3.3vw,44px);margin:10px 0 9px}
#workspace:not(.is-detail) .page-head{margin-bottom:26px}
#workspace:not(.is-detail) .page-head p{font-size:13px}
#workspace:not(.is-detail) .page-head p:empty{display:none}
@media(max-width:1080px){.vm-card{padding:21px 21px 17px;border-radius:22px}.vm-name{margin-top:14px}.vm-specs,.vm-load,.vm-net,.vm-foot{margin-top:17px}}
@media(max-width:680px){.server-grid{gap:16px}.vm-card{padding:20px 18px 16px;border-radius:20px}.vm-specs{grid-template-columns:repeat(2,minmax(0,1fr))}.vm-specs>div:last-child:nth-child(odd){grid-column:1/-1}.vm-name{font-size:24px}.vm-foot{gap:12px}.vm-uptime{order:2}.vm-actions{order:1;width:100%}.vm-actions button{flex:1}.page-head-tools{flex-direction:column;align-items:flex-end;gap:8px}.live-status{font-size:11px}}
@media(max-width:420px){.vm-specs>div{padding:11px 12px}.vm-specs dd{font-size:14.5px}.vm-net>div{padding:11px 12px}}