:root { color-scheme: dark; --black:#050505; --panel:#090909; --panel-hover:#0d0d0d; --white:#f2f2f2; --gray-1:#b7b7b7; --gray-2:#747474; --gray-3:#3a3a3a; --line:#242424; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace; --sans:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; overflow:hidden; background:var(--black); color:var(--white); font-family:var(--mono); }
.monitor-shell { width:min(100%,1600px); height:100dvh; min-height:560px; margin:0 auto; padding:0 clamp(16px,3vw,48px); display:grid; grid-template-rows:minmax(180px,40dvh) minmax(0,1fr) 30px; }
.topbar { position:relative; display:grid; place-items:center; border-bottom:1px solid var(--line); }
.wordmark { font:600 clamp(54px,10.5vw,154px)/.82 var(--sans); letter-spacing:-.055em; }
.live-state { position:absolute; top:clamp(18px,3vh,28px); right:0; display:flex; align-items:center; gap:10px; color:var(--gray-2); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.live-state i { width:6px; height:6px; border-radius:50%; background:var(--gray-2); }
.live-state.online { color:var(--white); }
.live-state.online i { background:var(--white); box-shadow:0 0 0 4px #1d1d1d; animation:breathe 2.8s ease-in-out infinite; }
.live-state.error i { border:1px solid var(--gray-1); background:transparent; }
.monitor { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; }
.incoming { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); padding:clamp(10px,1.6vh,17px) 0 clamp(9px,1.4vh,15px); border-bottom:1px solid var(--line); }
.section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:clamp(8px,1.2vh,13px); }
.section-index { display:block; margin-bottom:8px; color:var(--gray-2); font-size:8px; letter-spacing:.15em; }
h1,h2 { margin:0; font-family:var(--sans); font-weight:500; letter-spacing:-.045em; }
h1 { font-size:clamp(20px,2vw,30px); }
h2 { font-size:clamp(18px,1.75vw,27px); }
.updated { display:grid; justify-items:end; gap:6px; color:var(--gray-2); font-size:8px; letter-spacing:.12em; }
.updated time { color:var(--gray-1); font-size:9px; }
.server-grid { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,1vw,14px); }
.server-card { min-height:0; padding:clamp(11px,1.2vw,18px); display:grid; grid-template-rows:auto 1fr auto; border:1px solid var(--line); background:var(--panel); transition:border-color .25s ease,background-color .25s ease; }
.server-card:hover { border-color:#444; background:var(--panel-hover); }
.server-top { display:flex; align-items:start; justify-content:space-between; gap:14px; }
.server-name { min-width:0; }
.server-name h3 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 clamp(13px,1.05vw,17px)/1.2 var(--sans); letter-spacing:-.025em; }
.server-name p { margin:7px 0 0; color:var(--gray-2); font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.server-status { display:flex; align-items:center; gap:7px; color:var(--gray-1); font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.server-status::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--white); }
.server-status.offline::before { background:transparent; border:1px solid var(--gray-2); }
.server-clients { align-self:center; padding:clamp(8px,1.3vh,14px) 0; }
.server-clients strong { display:block; font:500 clamp(24px,2.8vw,42px)/.9 var(--sans); letter-spacing:-.06em; }
.server-clients span { display:block; margin-top:8px; color:var(--gray-2); font-size:8px; letter-spacing:.14em; text-transform:uppercase; }
.server-traffic { display:grid; grid-template-columns:1fr 1fr 1.2fr; padding-top:clamp(11px,1.6vh,18px); border-top:1px solid var(--line); }
.traffic-item { min-width:0; padding-right:9px; }
.traffic-item+.traffic-item { padding-left:11px; border-left:1px solid var(--line); }
.traffic-item span { display:block; color:var(--gray-2); font-size:7px; letter-spacing:.12em; text-transform:uppercase; }
.traffic-item strong { display:block; margin-top:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 clamp(11px,1vw,15px)/1 var(--sans); }
.system { display:grid; grid-template-columns:clamp(140px,15vw,220px) 1fr; min-height:clamp(120px,17vh,155px); padding:clamp(10px,1.5vh,16px) 0; }
.system-heading { align-self:start; }
.metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid var(--line); }
.metric { min-width:0; padding:clamp(12px,1.4vw,20px); display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); background:var(--panel); }
.metric:last-child { border-right:0; }
.metric>span,.metric small { color:var(--gray-2); font-size:7px; letter-spacing:.13em; }
.metric strong { margin:clamp(12px,2vh,22px) 0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 clamp(16px,1.65vw,25px)/1 var(--sans); letter-spacing:-.04em; }
.metric.updated-value strong { animation:valueIn .45s ease; }
.footerline { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:var(--gray-3); font-size:7px; letter-spacing:.13em; }
#api-state { color:var(--gray-2); }
.skeleton { position:relative; overflow:hidden; }
.skeleton::after { content:""; position:absolute; inset:0; background:#0c0c0c; opacity:.25; animation:placeholder 1.7s ease-in-out infinite; }
.skeleton span { width:42%; height:1px; background:var(--line); }
.empty-state { grid-column:1/-1; display:grid; place-items:center; border:1px solid var(--line); color:var(--gray-2); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
@keyframes breathe { 50% { opacity:.48; } }
@keyframes placeholder { 50% { opacity:.65; } }
@keyframes valueIn { from { opacity:.25; transform:translateY(3px); } }
@media (max-width:760px) {
  .monitor-shell { min-height:540px; grid-template-rows:minmax(150px,40dvh) minmax(0,1fr) 26px; }
  .wordmark { font-size:clamp(42px,14.5vw,72px); letter-spacing:-.06em; }
  .live-state { top:15px; font-size:8px; }
  .incoming { padding-top:9px; padding-bottom:8px; }
  .section-index { margin-bottom:5px; }
  h1 { font-size:18px; }
  .updated span { display:none; }
  .server-grid { grid-template-columns:1fr; gap:6px; }
  .server-card { min-height:0; padding:11px 12px; grid-template-columns:1.35fr .55fr 1.25fr; grid-template-rows:1fr; align-items:center; }
  .server-top { min-width:0; display:block; }
  .server-status { margin-top:6px; }
  .server-clients { padding:0 8px; text-align:center; }
  .server-clients strong { font-size:clamp(25px,8vw,37px); }
  .server-clients span { margin-top:3px; font-size:6px; }
  .server-traffic { padding:0 0 0 9px; border-top:0; border-left:1px solid var(--line); }
  .traffic-item { padding-right:5px; }
  .traffic-item+.traffic-item { padding-left:6px; }
  .traffic-item span { font-size:6px; }
  .traffic-item strong { margin-top:5px; font-size:10px; }
  .system { min-height:166px; grid-template-columns:1fr; padding:8px 0; }
  .system-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:8px; }
  .system-heading .section-index { margin:0; order:2; }
  h2 { font-size:16px; }
  .metrics { grid-template-columns:repeat(3,1fr); }
  .metric { min-height:62px; padding:9px 10px; border-bottom:1px solid var(--line); }
  .metric:nth-child(3) { border-right:0; }
  .metric:nth-child(n+4) { border-bottom:0; }
  .metric strong { margin:8px 0 3px; font-size:clamp(13px,3.8vw,17px); }
  .metric small { display:none; }
  .footerline span:nth-child(2) { display:none; }
}
@media (max-height:650px) and (min-width:761px) {
  .monitor-shell { grid-template-rows:minmax(160px,40dvh) minmax(0,1fr) 26px; }
  .wordmark { font-size:clamp(50px,9vw,100px); }
  .incoming { padding-block:8px; }
  .section-head { margin-bottom:7px; }
  .system { min-height:112px; padding-block:8px; }
  .server-clients { padding-block:6px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }