.sys{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:min(9vh,70px) 28px 90px}
.sys-back{display:inline-block;margin-bottom:28px;color:var(--muted);font-size:12px;text-decoration:none}
.sys-back:hover{color:var(--ink)}

.sys-gate h1,.sys-head h1{margin:0;font-size:clamp(32px,6vw,46px);font-weight:800;letter-spacing:-1.5px;line-height:1}
.sys-gate h1 span,.sys-head h1 span{color:var(--accent)}
.sys-gate .sub{margin:12px 0 30px;color:var(--muted);font-size:14px}
.sys-gate-form{display:flex;flex-direction:column;gap:14px;max-width:320px}
.sys-gate-form label{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.sys-gate-form input{padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:#0000002e;color:var(--ink);font-size:14px}
.sys-gate-form input:focus{outline:none;border-color:var(--accent)}
.sys-gate-form button{padding:13px;border:0;border-radius:10px;background:linear-gradient(115deg,#7c3aed,#22d3ee);color:#08060f;font-size:13px;font-weight:800;cursor:pointer}
.sys-gate-error{margin:0;min-height:16px;color:var(--red);font-size:12px}

.sys-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:30px}
.sys-head-actions{display:flex;align-items:center;gap:14px;padding-top:6px}
.sys-live{color:var(--green);font-size:11px;font-weight:700;letter-spacing:.4px}
.sys-head-actions button{padding:9px 14px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer}
.sys-head-actions button:hover{color:var(--ink);border-color:#8b5cf680}

.sys-meters{padding:24px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,#14101fcc,#0c0916cc);margin-bottom:20px;font-family:"Cascadia Code","SFMono-Regular",Consolas,monospace}
.meter{display:grid;grid-template-columns:56px 1fr 160px;align-items:center;gap:14px;padding:8px 0}
.meter-label{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.meter-track{height:14px;border-radius:4px;background:#ffffff0d;overflow:hidden;border:1px solid var(--line)}
.meter-fill{height:100%;transition:width .5s ease}
.meter-fill.ok{background:linear-gradient(90deg,#34d39980,var(--green))}
.meter-fill.warn{background:linear-gradient(90deg,#facc15a0,#facc15)}
.meter-fill.crit{background:linear-gradient(90deg,#f8717180,var(--red))}
.meter-value{text-align:right;color:var(--ink);font-size:11.5px}
.meter-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.meter-extra div{display:flex;flex-direction:column;gap:4px}
.meter-extra span{color:var(--muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.5px}
.meter-extra b{color:var(--ink);font-size:13px;font-weight:700}

.sys-services-card{padding:24px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,#12101fb3,#0a0814b3)}
.sys-card-title h2{margin:6px 0 18px;font-size:17px;font-weight:750}
.sys-service{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.sys-service:first-child{border-top:0}
.sys-dot{width:9px;height:9px;border-radius:50%}
.sys-dot.up{background:var(--green);box-shadow:0 0 0 4px #34d39926}
.sys-dot.down{background:var(--red);box-shadow:0 0 0 4px #f8717126}
.sys-service-name b{display:block;font-size:13px;font-weight:700}
.sys-service-name small{display:block;margin-top:3px;color:var(--muted);font-size:10.5px;font-family:"Cascadia Code","SFMono-Regular",Consolas,monospace}
.sys-service-stats{display:flex;gap:14px;font-family:"Cascadia Code","SFMono-Regular",Consolas,monospace;font-size:11px;color:var(--muted)}
.sys-service-inactive{font-style:italic}

.sys-note{margin:16px 4px 0;color:#6b6588;font-size:10.5px}

@media(max-width:560px){
  .meter{grid-template-columns:44px 1fr 110px;gap:8px}
  .meter-extra{grid-template-columns:1fr}
  .sys-service{grid-template-columns:10px 1fr}
  .sys-service-stats{grid-column:1/-1;padding-left:24px;flex-wrap:wrap;gap:10px}
}