/* WEB PANEL PROXY public CSS */
:root{
  --bg:#0b0d0f; --panel:#111417; --line:#24282c;
  --text:#e4e7e9; --muted:#7f878e; --accent:#67c46a;
  --blue:#63a9e8; --red:#e45d67; --yellow:#c9a54c;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{
  background:var(--bg); color:var(--text);
  font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
.page{height:100vh;padding:28px 34px}
.header{
  height:52px;display:flex;align-items:flex-start;justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.title{font-size:15px;font-weight:500;letter-spacing:.2px}
.title span{color:var(--muted);margin:0 7px}
.status{
  color:#9bd29b;font-size:11px;letter-spacing:.8px;
  text-transform:uppercase;display:flex;align-items:center;gap:7px
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px #67c46a66}

.content{max-width:1250px;margin:0 auto}
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line)
}
.metric{
  padding:25px 28px 24px 0;
  margin-right:28px;
  border-right:1px solid var(--line)
}
.metric:last-child{border-right:0}
.label{
  color:var(--muted);font-size:10px;text-transform:uppercase;
  letter-spacing:1.2px;margin-bottom:10px
}
.value{
  font-size:29px;font-weight:500;letter-spacing:-.8px;
  font-variant-numeric:tabular-nums
}
.delta{font-size:11px;margin-top:7px;color:var(--muted)}
.up{color:#82c984}.down{color:#dc7077}

.grid{
  display:grid;grid-template-columns:2fr 1fr;gap:22px;
  margin-top:22px
}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:5px}
.panel-head{
  height:48px;padding:0 18px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--line)
}
.panel-title{font-size:12px}
.panel-note{font-size:10px;color:var(--muted)}
.chart-wrap{height:310px;padding:20px 18px 18px}
svg{width:100%;height:100%;display:block}
.gridline{stroke:#252a2e;stroke-width:1}
.area{fill:url(#fade)}
.trace{fill:none;stroke:var(--blue);stroke-width:2}
.trace2{fill:none;stroke:#72c979;stroke-width:1.5;opacity:.7}
.axis{fill:#626a70;font-size:9px}

.services{padding:0 18px}
.service{
  height:57px;display:grid;grid-template-columns:1fr 80px 65px;
  align-items:center;border-bottom:1px solid var(--line)
}
.service:last-child{border-bottom:0}
.service-name{font-size:11px}
.service-value{
  text-align:right;font-variant-numeric:tabular-nums;color:#c9ced2
}
.service-status{text-align:right;font-size:10px}
.ok{color:#78c67b}.warn{color:#c6a24a}

.footer{
  margin-top:18px;color:#535b61;font-size:10px;
  display:flex;justify-content:space-between
}

@media(max-width:800px){
  body{overflow:auto}.page{padding:18px}
  .metrics{grid-template-columns:1fr 1fr}
  .metric{border-right:0;border-bottom:1px solid var(--line)}
  .grid{grid-template-columns:1fr}
}