:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0f14;
  color: #f4f7fb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(70, 120, 255, .14), transparent 32rem),
    #0b0f14;
}

button { font: inherit; }

.shell {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 64px;
}

.header, .section-title, .control-card, .footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header { margin-bottom: 24px; }

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(2rem, 5vw, 3.8rem); }
h2 { margin-bottom: 8px; }
p { color: #a9b4c2; line-height: 1.55; }

.eyebrow {
  margin-bottom: 8px;
  color: #7ea2ff;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.subtitle { margin-bottom: 0; }
code { color: #d7e2ff; }

.panel {
  border: 1px solid #26313d;
  border-radius: 24px;
  background: rgba(20, 27, 35, .88);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
  padding: 28px;
}

.badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: .86rem;
  font-weight: 800;
}
.badge--checking { background: #40391e; color: #f8d56b; }
.badge--online { background: #163b2a; color: #72e2a8; }
.badge--offline { background: #4a2025; color: #ff9da7; }

.section-title strong {
  border-radius: 999px;
  background: #1a222d;
  padding: 9px 14px;
  text-transform: capitalize;
}

.traffic-light {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.lamp {
  border: 1px solid #303b47;
  border-radius: 20px;
  background: #111820;
  color: #dfe6ef;
  cursor: pointer;
  padding: 24px 12px 18px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.lamp:hover { transform: translateY(-2px); border-color: #627086; }
.lamp:focus-visible, .toggle:focus-visible, .danger-button:focus-visible {
  outline: 3px solid #7ea2ff;
  outline-offset: 3px;
}
.lamp span {
  display: block;
  width: clamp(76px, 13vw, 130px);
  aspect-ratio: 1;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #242c35;
  box-shadow: inset 0 0 30px rgba(0,0,0,.8);
  opacity: .24;
}
.lamp.is-active { background: #17202a; border-color: #738197; }
.lamp.is-active span { opacity: 1; }
.lamp--red.is-active span { background: #ff3b4f; box-shadow: 0 0 42px rgba(255,59,79,.75); }
.lamp--yellow.is-active span { background: #ffd23f; box-shadow: 0 0 42px rgba(255,210,63,.72); }
.lamp--green.is-active span { background: #31df78; box-shadow: 0 0 42px rgba(49,223,120,.72); }
.lamp:disabled, .toggle:disabled, .danger-button:disabled { cursor: wait; opacity: .62; }

.controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.control-card p { margin-bottom: 0; }

.toggle {
  min-width: 94px;
  border: 0;
  background: transparent;
  color: #dbe4ee;
  cursor: pointer;
}
.toggle__track {
  display: block;
  width: 66px;
  height: 36px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: #3a4552;
  padding: 4px;
  transition: background .18s ease;
}
.toggle__thumb {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  transition: transform .18s ease;
}
.toggle[aria-checked="true"] .toggle__track { background: #2dca70; }
.toggle[aria-checked="true"] .toggle__thumb { transform: translateX(30px); }

.footer-actions { margin-top: 20px; }
.danger-button {
  border: 1px solid #a8404c;
  border-radius: 14px;
  background: #511e25;
  color: #ffdfe2;
  cursor: pointer;
  font-weight: 800;
  padding: 13px 18px;
}
.message { margin: 0; text-align: right; }
.message.is-error { color: #ff9da7; }

@media (max-width: 700px) {
  .shell { padding-top: 24px; }
  .header, .section-title, .control-card, .footer-actions { align-items: flex-start; }
  .header, .control-card, .footer-actions { flex-direction: column; }
  .controls-grid { grid-template-columns: 1fr; }
  .traffic-light { gap: 10px; }
  .panel { padding: 20px; border-radius: 18px; }
  .lamp { padding-inline: 6px; }
  .message { text-align: left; }
}