:root {
  --surface: rgba(255, 255, 255, .88);
  --glass-light: rgba(255, 255, 255, .6);
  --page-image: none;
}

:root[data-color=dark] { --surface: rgba(36, 37, 42, .85); --glass-light: rgba(255, 255, 255, .08); }
:root[data-background=true] { --surface: rgba(255, 255, 255, .72); }
:root[data-background=true][data-color=dark] { --surface: rgba(30, 32, 38, .74); }
body { isolation: isolate; position: relative; }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: -2; background: var(--page-image) center / cover no-repeat; }
body::after { z-index: -1; background: transparent; transition: background-color .25s ease; }
[data-background=true] body::after { background: rgba(255, 255, 255, .03); }
[data-background=true][data-color=dark] body::after { background: rgba(0, 0, 0, .1); }
.server-card, .site-overview, .appbar, .footer, .table-scroll, .details, .chart-card, .plot-tooltip {
  background-image: linear-gradient(135deg, var(--glass-light), transparent 45%, rgba(255, 255, 255, .03));
  backdrop-filter: blur(2px) saturate(1.15);
  -webkit-backdrop-filter: blur(2px) saturate(1.15);
}
.server-card, .table-scroll, .details, .chart-card, .plot-tooltip {
  box-shadow: inset 0 1px 0 var(--glass-light), inset 0 0 0 1px var(--glass-light), 0 2px 5px rgba(30, 40, 60, .15);
}
.details::backdrop { backdrop-filter: none; background: rgba(20, 25, 35, .25); }

.site-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  min-height: 110px;
  margin-bottom: 26px;
  padding: 22px 18px;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--glass-light), inset 0 0 0 1px var(--glass-light), 0 2px 5px rgba(30, 40, 60, .15);
  background-color: var(--surface);
}

.overview-item { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; text-align: center; }
.overview-item + .overview-item { border-left: 1px solid var(--line); }
.overview-title { font-size: 13px; font-weight: 500; }
.overview-count { font-size: 19px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.overview-values { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.overview-values strong { font-weight: 600; }
.overview-upload { color: var(--pink); }
.overview-download { color: var(--blue); }
.site-overview.is-stale .overview-count,
.site-overview.is-stale .overview-values { color: var(--muted); }

.node-heading .server-name { font-weight: 500; }
.meter-label { font-weight: 600; }
.meter-label strong, .metric-pair strong { font-weight: 650; }
.metric-pair span { font-size: 12px; color: #626269; font-weight: 500; }
[data-color=dark] .metric-pair span { color: #b8b8c2; }
.hardware-value, .price-tag, .recent-load-value, .table-name { font-weight: 500; }
.server-table td { font-weight: 500; }
.server-table td:nth-child(n+3):nth-child(-n+6) { font-weight: 650; }
.server-table th { font-weight: 600; }
.card-header { padding-top: 18px; padding-bottom: 14px; }
.hardware-summary { padding-bottom: 14px; }
.card-body { padding-bottom: 0; }
.card-body .metric-row { margin-bottom: 15px; }
.card-body .metric-row:last-child { margin-bottom: 12px; }
.card-footer { padding-top: 10px; padding-bottom: 11px; }
.recent-load-row { gap: 8px; padding-bottom: 10px; }
.recent-load { display: flex; align-items: center; gap: 5px; }
.recent-connections { text-align: right; font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.recent-load-value { font-size: 10px; }

.server-card {
  animation: card-enter .38s cubic-bezier(.22, 1, .36, 1) both;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, background-color .35s ease;
}
.table-scroll, .site-overview, [role=tabpanel]:not([hidden]) { animation: card-enter .35s cubic-bezier(.22, 1, .36, 1) both; }
.group-button, .range-button, .ping-task, .icon-button, .server-table tbody tr { transition: background-color .28s ease, color .28s ease, box-shadow .28s ease; }
.meter-fill { transition: width .8s cubic-bezier(.22, 1, .36, 1); }
.details { opacity: 0; transform: translateY(8px) scale(.99); transition: opacity .28s ease, transform .35s cubic-bezier(.22, 1, .36, 1), display .35s allow-discrete, overlay .35s allow-discrete; }
.details[open] { opacity: 1; transform: translateY(0) scale(1); }
@starting-style { .details[open] { opacity: 0; transform: translateY(8px) scale(.99); } }
.details[open]::backdrop { animation: backdrop-enter .28s ease-out; }

@media (hover: hover) and (pointer: fine) {
  .server-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glass-light), inset 0 0 0 1px var(--glass-light), 0 5px 12px rgba(30, 40, 60, .17); }
}

@keyframes card-enter { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 560px) {
  .site-overview { min-height: 104px; padding: 18px 6px; margin-bottom: 22px; }
  .overview-item { padding: 0 4px; gap: 8px; }
  .overview-title { font-size: 11px; }
  .overview-count { font-size: 17px; }
  .overview-values { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .server-card:hover { transform: none; }
}