.server-usage { margin:0 0 24px; padding:16px 20px; border:1px solid var(--line); border-radius:13px; background:var(--panel); }
.server-usage-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.server-usage-label { font-size:14px; font-weight:600; }
.server-usage-remaining { font-size:23px; font-weight:750; letter-spacing:-.025em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.server-usage-remaining small { font-size:13px; font-weight:400; letter-spacing:0; color:var(--muted); }
.server-usage-meter { height:6px; margin-top:11px; overflow:hidden; border-radius:5px; background:color-mix(in srgb,var(--muted) 20%,transparent); }
.server-usage-meter > span { display:block; height:100%; width:0; border-radius:inherit; background:var(--teal); }
.server-usage[data-state="near"] .server-usage-meter > span { background:#d5a147; }
.server-usage-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-top:8px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.server-usage[data-state="loading"] .server-usage-remaining,
.server-usage[data-state="unavailable"] .server-usage-remaining { color:var(--muted); font-size:14px; font-weight:400; letter-spacing:0; }
.server-usage [hidden] { display:none; }
@media(max-width:680px) {
  .server-usage { padding:13px 15px; margin-bottom:20px; }
  .server-usage-label { font-size:13px; }
  .server-usage-remaining { font-size:22px; }
  .server-usage-footer { font-size:11px; }
}