:root {
  font-family:Roboto,"Segoe UI","Microsoft YaHei",Arial,sans-serif;
  color:#333;
  background:#fff;
  font-synthesis:none;
  font-size:14px;
  --bg:#fff;
  --surface:#fff;
  --muted:#858585;
  --line:#eee;
  --blue:#475bca;
  --pink:#ff4081;
  --blue-track:#e5e8fc;
  --pink-track:#ffe1ec;
  --hover:#f5f6fa;
  --shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

button,input {
  font:inherit;
}

button,a,input {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button,a {
  touch-action:manipulation;
}

button {
  color:inherit;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  border:0;
  background:none;
}

svg {
  width:22px;
  height:22px;
  display:block;
  flex-shrink:0;
}

button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:4px;
}

button:disabled {
  cursor:default;
}

button:hover,a:hover {
  color:var(--blue);
}

[hidden] {
  display:none!important;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.skip-link {
  position:fixed;
  top:-70px;
  left:20px;
  z-index:10;
  padding:14px;
  background:var(--surface);
}

.skip-link:focus {
  top:10px;
}

.appbar {
  background:var(--surface);
  box-shadow:0 -1px 10px rgb(32 33 36 / 28%);
}

.nav {
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 34px;
  gap:20px;
}

.home-link,.admin-link,.nav-actions {
  display:flex;
  align-items:center;
  gap:12px;
}

.home-link {
  font-size:17px;
  min-width:0;
}

.home-link span:last-child {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.home-link svg {
  color:#555;
}

.nav-actions {
  gap:20px;
  flex-shrink:0;
}

.admin-link {
  font-size:14px;
  gap:8px;
}

.icon-button {
  width:40px;
  height:40px;
  padding:9px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--muted);
  flex-shrink:0;
}

.icon-button:hover {
  background:var(--hover);
}

.container {
  width:min(1280px,calc(100% - 64px));
  margin:32px auto 48px;
  flex:1;
}

.toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
  min-height:38px;
}

.summary {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px;
  flex-wrap:wrap;
}

.connection-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#b3b3b3;
  flex-shrink:0;
}

.connection-dot.live {
  background:#51ad79;
}

.update-time {
  font-size:12px;
  margin-left:8px;
  color:var(--muted);
}

.search {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:5px;
  width:240px;
  color:var(--muted);
  background:var(--surface);
}

.search svg {
  width:18px;
  height:18px;
}

.search input {
  border:0;
  background:none;
  color:inherit;
  min-width:0;
  width:100%;
  outline:none;
  font-size:13px;
}

.search:focus-within {
  border-color:var(--blue);
}

.search kbd {
  font:12px inherit;
  padding:0 4px;
  border:1px solid var(--line);
  border-radius:3px;
}

.groups {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 24px;
}

.group-button {
  display:flex;
  align-items:center;
  gap:9px;
  border-radius:4px;
  padding:8px 13px;
  min-height:36px;
  color:var(--muted);
  border:1px solid var(--line);
  max-width:100%;
  overflow-wrap:anywhere;
}

.group-count {
  font-size:11px;
  opacity:.7;
}

.group-button[aria-pressed=true] {
  color:var(--blue);
  border-color:var(--blue-track);
  background:var(--blue-track);
}

.group-button:hover {
  background:var(--hover);
}

.server-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.server-card {
  min-width:0;
  border-radius:6px;
  box-shadow:var(--shadow);
  background:var(--surface);
  overflow:hidden;
}

.card-header {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:23px 15px 20px 22px;
  align-items:flex-start;
}

.card-title {
  min-width:0;
}

.server-name {
  padding:0;
  font-size:22px;
  line-height:1.4;
  letter-spacing:.1px;
  text-align:left;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

.server-subtitle {
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.info-button {
  width:30px;
  height:30px;
  padding:5px;
  margin-top:1px;
  color:#666;
}

.info-button svg {
  width:20px;
  height:20px;
}

.card-body {
  padding:0 22px 8px;
}

.metric-row {
  display:flex;
  align-items:center;
  gap:17px;
  margin-bottom:21px;
  min-width:0;
}

.metric-icon {
  color:#808080;
  flex-shrink:0;
}

.metric-icon svg {
  width:21px;
  height:21px;
}

.meter {
  flex:1;
  min-width:0;
}

.meter-label {
  display:flex;
  justify-content:space-between;
  gap:6px;
  color:var(--blue);
  font-size:12px;
  margin-bottom:8px;
}

.meter-label strong {
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.meter-track {
  height:4px;
  background:var(--blue-track);
  overflow:hidden;
}

.meter-fill {
  height:100%;
  background:var(--blue);
  width:0;
  transition:width .35s ease;
}

.meter.ram .meter-label {
  color:var(--pink);
}

.meter.ram .meter-track {
  background:var(--pink-track);
}

.meter.ram .meter-fill {
  background:var(--pink);
}

.meter.disk .meter-label {
  color:#36988c;
}

.meter.disk .meter-track {
  background:#dbefec;
}

.meter.disk .meter-fill {
  background:#36988c;
}

.metric-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
  min-width:0;
}

.metric-pair span,.uptime span {
  font-size:11px;
  display:block;
  color:var(--muted);
  margin-bottom:5px;
}

.metric-pair strong {
  font-size:13px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.upload strong {
  color:var(--pink);
}

.download strong {
  color:var(--blue);
}

.uptime {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex:1;
  min-width:0;
}

.uptime span {
  margin:0;
}

.uptime strong {
  font-size:12px;
  font-weight:400;
  color:#777;
  white-space:nowrap;
}

.card-status {
  padding:0 22px 15px;
  text-align:right;
  font-size:10px;
  color:var(--muted);
}

.card-status:before,.table-status:before {
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  margin-right:6px;
  background:#aaa;
}

[data-status=online] {
  color:#4a9b6d;
}

[data-status=online]:before {
  background:#51ad79;
}

.offline .meter-label,.offline .metric-pair strong,.offline .uptime strong,.stale .meter-label,.stale .metric-pair strong,.stale .uptime strong {
  color:#aaa;
}

.offline .meter-track,.stale .meter-track {
  background:var(--line);
}

.offline .metric-icon,.stale .metric-icon {
  color:#b3b3b3;
}

.table-scroll {
  overflow-x:auto;
  background:var(--surface);
  border-radius:6px;
  box-shadow:var(--shadow);
}

.server-table {
  border-collapse:collapse;
  width:100%;
  white-space:nowrap;
  text-align:left;
  font-size:13px;
}

.server-table th {
  font-weight:500;
  color:var(--muted);
  font-size:12px;
  padding:19px 16px;
  border-bottom:1px solid var(--line);
}

.server-table td {
  padding:17px 16px;
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}

.server-table tbody tr:last-child td {
  border-bottom:0;
}

.server-table tbody tr:hover {
  background:var(--hover);
}

.table-name {
  font-size:14px;
  text-align:left;
  padding:0;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
}

.table-group {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:5px;
}

.table-status {
  font-size:11px;
}

.server-table td:nth-child(3),.server-table td:nth-child(5) {
  color:var(--pink);
}

.server-table td:nth-child(4),.server-table td:nth-child(6) {
  color:var(--blue);
}

.server-table .offline td {
  color:var(--muted);
}

.server-table .meter {
  min-width:75px;
}

.server-table .meter-label span {
  display:none;
}

.server-table .meter-label {
  justify-content:flex-end;
  font-size:12px;
}

.empty-state {
  text-align:center;
  padding:90px 20px;
  color:var(--muted);
}

.empty-state>span {
  display:flex;
  justify-content:center;
  margin-bottom:20px;
}

.empty-state svg {
  width:42px;
  height:42px;
  stroke-width:1.3;
}

.empty-state h1 {
  font-size:20px;
  font-weight:400;
  color:inherit;
}

.empty-state p {
  font-size:13px;
  line-height:1.8;
}

.notice {
  padding:14px 18px;
  background:var(--hover);
  border-radius:5px;
  margin-bottom:24px;
  display:flex;
  gap:16px;
  align-items:center;
  font-size:13px;
  line-height:1.6;
}

.notice span {
  flex:1;
}

.notice a,.text-button {
  color:var(--blue);
  white-space:nowrap;
}

.text-button {
  padding:8px;
}

.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:24px 34px;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  box-shadow:0 0 4px rgb(0 0 0 / 9%);
  background:var(--surface);
}

#footer-text {
  overflow-wrap:anywhere;
}

.footer-credit {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  margin-right:68px;
}

.view-toggle {
  position:fixed;
  right:28px;
  bottom:24px;
  background:var(--pink);
  color:#fff;
  border-radius:28px;
  display:flex;
  overflow:hidden;
  box-shadow:0 3px 7px rgb(0 0 0 / 25%);
  z-index:3;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}

.view-toggle button {
  position:relative;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  transition:background-color .25s ease;
}

.view-toggle button + button:before {
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:1px;
  background:rgb(255 255 255 / 35%);
}

.view-toggle button:hover {
  color:#fff;
  background:rgb(255 255 255 / 14%);
}

.view-toggle button:focus-visible {
  outline-color:#fff;
  outline-offset:-5px;
  border-radius:26px;
}

.view-toggle:hover {
  color:#fff;
  transform:translateY(-2px);
  filter:brightness(1.05);
}

.details {
  border:0;
  border-radius:8px;
  background:var(--surface);
  color:inherit;
  width:min(620px,calc(100% - 32px));
  max-height:85vh;
  padding:28px;
  box-shadow:0 12px 50px #0004;
}

.details::backdrop {
  background:#0006;
  backdrop-filter:blur(2px);
}

.detail-header {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.detail-header>div {
  min-width:0;
}

.detail-header h2 {
  font-size:24px;
  font-weight:400;
  margin:0;
  overflow-wrap:anywhere;
}

.detail-header p {
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  margin:8px 0 18px;
}

.detail-status {
  font-size:12px;
  margin-bottom:25px;
}

.detail-meters {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}

.detail-facts {
  display:grid;
  grid-template-columns:125px 1fr;
  gap:16px 20px;
  font-size:12px;
  line-height:1.7;
  margin:24px 0 0;
}

.detail-facts dt {
  color:var(--muted);
}

.detail-facts dd {
  margin:0;
  overflow-wrap:anywhere;
}

.detail-remark {
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-bottom:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--muted);
  line-height:1.8;
  font-size:13px;
}

.noscript {
  position:fixed;
  inset:auto 10% 30%;
  padding:24px;
  background:var(--surface);
  box-shadow:var(--shadow);
  text-align:center;
}

:root[data-color=dark] {
  color-scheme:dark;
  color:#e2e2e5;
  background:#18191d;
  --bg:#18191d;
  --surface:#24252a;
  --muted:#9c9ca7;
  --line:#36373f;
  --blue:#9aa9ff;
  --pink:#f7a4b9;
  --blue-track:#363d60;
  --pink-track:#533845;
  --hover:#2c2e35;
  --shadow:0 1px 3px #0005,0 1px 5px #0003;
}

[data-color=dark] .home-link svg,[data-color=dark] .info-button {
  color:#bcbcc5;
}

[data-color=dark] .uptime strong {
  color:#aaa;
}

[data-color=dark] .view-toggle {
  background:#ff4081;
}

[data-color=dark] .meter.disk .meter-track {
  background:#2a4741;
}

[data-color=dark] .meter.disk .meter-label {
  color:#73baaf;
}

@media(min-width:1500px) {
  .container {
    margin-top:40px;
  }
  .server-grid {
    gap:20px;
  }
  .card-header {
    padding-top:25px;
  }
  .metric-row {
    margin-bottom:24px;
  }
}

@media(max-width:1199px) {
  .server-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .update-time {
    display:none;
  }
}

@media(max-width:899px) {
  .server-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .container {
    width:calc(100% - 40px);
    margin-top:24px;
  }
  .nav {
    padding:0 22px;
  }
  .footer {
    padding:22px;
  }
  .server-table td,.server-table th {
    padding-left:14px;
    padding-right:14px;
  }
}

@media(max-width:560px) {
  .nav {
    height:58px;
    padding:0 16px;
    gap:12px;
  }
  .home-link {
    font-size:15px;
    gap:9px;
  }
  .nav-actions {
    gap:8px;
  }
  .admin-link {
    gap:6px;
    font-size:12px;
  }
  .admin-link svg {
    width:18px;
  }
  .container {
    width:calc(100% - 28px);
    margin:22px auto 32px;
  }
  .toolbar {
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:18px;
  }
  .summary {
    width:100%;
    font-size:12px;
  }
  .search {
    width:100%;
    padding:10px 12px;
  }
  .search kbd {
    display:none;
  }
  .search input {
    font-size:16px;
  }
  .groups {
    gap:7px;
    margin-bottom:20px;
  }
  .group-button {
    font-size:12px;
    padding:7px 10px;
  }
  .server-grid {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  .card-header {
    padding:22px 20px 22px 24px;
  }
  .card-body {
    padding:0 24px 5px;
  }
  .server-name {
    font-size:23px;
  }
  .metric-row {
    margin-bottom:24px;
    gap:20px;
  }
  .metric-pair strong {
    font-size:14px;
  }
  .meter-label {
    font-size:13px;
  }
  .metric-pair span,.uptime span {
    font-size:12px;
  }
  .server-subtitle {
    font-size:12px;
  }
  .card-status {
    padding-right:24px;
  }
  .view-toggle {
    right:20px;
    bottom:20px;
  }
  .footer {
    padding:20px 90px 20px 20px;
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .footer-credit {
    margin:0;
  }
  .details {
    padding:22px;
  }
  .detail-facts {
    grid-template-columns:94px 1fr;
    gap:14px;
  }
  .detail-meters {
    gap:14px;
  }
  .notice {
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .notice span {
    flex-basis:100%;
  }
}

.server-card.offline .meter .meter-label,.server-card.stale .meter .meter-label {
  color:var(--muted);
}

.server-card.offline .meter .meter-track,.server-card.stale .meter .meter-track {
  background:var(--line);
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}