:root{
  --bg1: #0b1220;
  --bg2: #071026;
  --card: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.04);
  --accent: linear-gradient(90deg,#7dd3fc,#60a5fa);
  --muted: #9aa6b2;
  --ok: #34d399;
  --danger: #fb7185;
  --glass-border: rgba(255,255,255,0.05);
  --shadow: 0 10px 30px rgba(2,6,23,0.6);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:#e6eef6}
.topbar{padding:28px 22px 6px 22px;text-align:center}
.topbar h1{margin:0;font-size:22px;letter-spacing:0.2px}
.topbar .subtitle{margin:6px 0 0;color:var(--muted);font-size:13px}

/* layout */
.container{max-width:1100px;margin:18px auto;display:grid;grid-template-columns:320px 1fr;gap:18px;padding:0 18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.01));border-radius:12px;padding:14px;border:1px solid var(--glass-border);box-shadow:var(--shadow)}

/* controls */
.control-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
input[type=range]{width:100%}
.buttons{display:flex;gap:8px;align-items:center;margin-top:6px}
button{padding:8px 12px;border-radius:8px;border:none;cursor:pointer;font-weight:700}
button.primary{background:var(--accent);color:#022;box-shadow:0 8px 20px rgba(96,165,250,0.08)}
button.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
button.danger{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--danger)}
button.small{padding:6px 8px;font-weight:600;font-size:13px}

/* servers area */
.servers{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-content:start;min-height:220px}
.server-card{padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.server-header{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.server-id{font-weight:800}
.server-load{font-size:12px;color:var(--muted)}

/* load bar */
.load-bar{height:10px;background:rgba(255,255,255,0.02);border-radius:8px;overflow:hidden}
.load-fill{height:100%;width:0%;background:linear-gradient(90deg,#60a5fa,#7dd3fc);transition:width 450ms ease}

/* request bubble animation */
.request-bubble{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:rgba(125,211,252,0.12);padding:8px 10px;border-radius:999px;font-size:12px;color:#bdefff;border:1px solid rgba(125,211,252,0.12);animation:pop 900ms ease forwards}
@keyframes pop{0%{opacity:0;transform:translateX(20px) scale(0.9)}50%{opacity:1;transform:translateX(0) scale(1.02)}100%{opacity:0;transform:translateX(-20px) scale(0.95)}}

/* log */
.log{grid-column:span 2;max-height:240px;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.log-header{display:flex;justify-content:space-between;align-items:center}
.log-area{background:rgba(0,0,0,0.12);border-radius:8px;padding:10px;overflow:auto;max-height:180px;border:1px solid rgba(255,255,255,0.02);font-family:var(--mono);font-size:13px;color:#dbeafe}

/* footer */
.footer{text-align:center;padding:14px;color:var(--muted);font-size:13px}

/* responsive */
@media (max-width:880px){
  .container{grid-template-columns:1fr; padding:0 14px}
  .log{grid-column:auto}
}