:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --ink: #f7fbff;
  --muted: #a8b8d8;
  --panel: rgba(8, 16, 45, 0.72);
  --line: rgba(167, 201, 255, 0.18);
  --gold: #ffd56a;
  --cyan: #5ce7ff;
  --rose: #ff769f;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 5%, rgba(62, 98, 221, .28), transparent 36%),
    linear-gradient(180deg, #070b25 0%, #090f31 48%, #111949 100%);
}

button, input, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

.glass {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.eyebrow {
  margin: 0 0 .55rem;
  color: #8fdfff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.status-dot {
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  display: inline-block;
  background: #8391ad;
  box-shadow: 0 0 0 .2rem rgba(131, 145, 173, .12);
}
.status-dot.online {
  background: #55edb2;
  box-shadow: 0 0 0 .2rem rgba(85, 237, 178, .14), 0 0 1rem rgba(85, 237, 178, .55);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 50;
  max-width: calc(100vw - 2rem);
  transform: translate(-50%, 130%);
  opacity: 0;
  padding: .85rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1rem;
  background: rgba(3, 8, 28, .94);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
  transition: .25s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.error { border-color: rgba(255, 99, 132, .35); color: #ffd5de; }