:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #edf4ff;
  background: #08111f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 10%, #173d63 0, transparent 38%),
    radial-gradient(circle at 85% 90%, #38265d 0, transparent 34%),
    #08111f;
}

main {
  width: min(760px, 100%);
  padding: clamp(30px, 7vw, 64px);
  border: 1px solid #ffffff1f;
  border-radius: 28px;
  background: #0d192ae8;
  box-shadow: 0 28px 90px #0008;
}

header { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; }
.eyebrow { margin: 0 0 12px; color: #78bfff; font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.1rem, 7vw, 4.3rem); line-height: 1; letter-spacing: -.05em; }
.lead { max-width: 58ch; margin: 22px 0; color: #bac9da; font-size: 1.08rem; line-height: 1.65; }
.notice { margin: 20px 0; padding: 12px 16px; border: 1px solid #64d5a566; border-radius: 12px; background: #1b624833; color: #9ff0cc; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 13px 21px; font: inherit; font-weight: 780; text-decoration: none; cursor: pointer; }
.primary { color: #071323; background: #7ac0ff; }
.secondary { color: #e4efff; background: #ffffff14; border: 1px solid #ffffff24; }
.danger { color: #fff; background: #a53c4c; }
.footnote { margin: 26px 0 0; color: #8198ad; font-size: .88rem; }
.card { margin-top: 32px; padding: 24px; border: 1px solid #ffffff1a; border-radius: 20px; background: #ffffff0a; }
.status { flex: none; padding: 8px 12px; border-radius: 999px; font-size: .82rem; font-weight: 800; }
.online { color: #9ff0cc; background: #1b624855; }
.offline { color: #ffb7c1; background: #7b263455; }
dl { margin: 0; display: grid; gap: 10px; }
dl div { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 10px; border-bottom: 1px solid #ffffff12; }
dt { color: #91a6b4; }
dd { margin: 0; font-weight: 750; text-align: right; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.actions form { margin: 0; }
.start-form { width: 100%; display: grid; gap: 12px; }
.start-form label { color: #b9c8d8; font-weight: 700; }
.start-form select { width: 100%; padding: 13px 15px; border: 1px solid #ffffff2b; border-radius: 12px; color: #edf4ff; background: #101f33; font: inherit; }
.logout { margin-top: 24px; }
.logout button { padding: 0; border: 0; color: #91a6b4; background: transparent; text-decoration: underline; cursor: pointer; }

@media (max-width: 520px) {
  header { display: block; }
  .status { display: inline-flex; margin-top: 18px; }
  .actions, .actions form, .actions .button { width: 100%; }
}