:root {
  color-scheme: dark;
  --bg: #090b10;
  --card: #111621;
  --panel: #161d2a;
  --line: #263144;
  --text: #eef3ff;
  --muted: #99a6bd;
  --primary: #4da3ff;
  --primary-2: #2f7dd3;
  --danger: #ff647c;
  --ok: #37d67a;
  --warn: #ffc857;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(circle at 20% 0%, #162033 0, transparent 34rem), var(--bg);
  color: var(--text);
}
a { color: var(--text); text-decoration: none; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 11, 16, .8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
}
.brand { font-weight: 800; letter-spacing: .12em; }
nav { display: flex; gap: .75rem; align-items: center; }
nav a, .inline button { color: var(--muted); }
.container { width: min(1180px, 94vw); margin: 2rem auto; }
.center-card { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero h1 { font-size: clamp(2.5rem, 8vw, 5rem); margin: 0 0 1rem; letter-spacing: .08em; }
.card, .panel {
  background: rgba(17, 22, 33, .94);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.4rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.panel { background: var(--panel); margin-top: 1rem; border-radius: 16px; overflow-x: auto; }
.narrow { max-width: 460px; margin: 0 auto; }
.muted { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.button, button {
  display: inline-block;
  border: 1px solid var(--line);
  background: #1b2535;
  color: var(--text);
  border-radius: 12px;
  padding: .72rem 1rem;
  cursor: pointer;
  font: inherit;
}
.button.primary, button.primary { background: linear-gradient(180deg, var(--primary), var(--primary-2)); border-color: transparent; color: white; font-weight: 700; }
form { display: grid; gap: .85rem; }
.inline { display: inline; }
.inline button { background: transparent; border: 0; padding: 0; }
label { display: grid; gap: .35rem; color: var(--muted); }
input {
  width: 100%;
  padding: .75rem .85rem;
  background: #090d15;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.row-form { display: grid; grid-template-columns: 1fr 140px auto; gap: .75rem; align-items: end; }
.alert { background: #2e2230; border: 1px solid #674058; color: #ffd5e4; padding: .8rem 1rem; border-radius: 14px; margin-bottom: 1rem; }
.status { display: flex; gap: 1rem; align-items: center; border: 1px solid var(--line); background: #0c111b; border-radius: 16px; padding: 1rem; margin: 1rem 0; }
.status p { margin: .2rem 0 0; color: var(--muted); }
.status-dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--muted); box-shadow: 0 0 20px var(--muted); }
.status.ok .status-dot { background: var(--ok); box-shadow: 0 0 20px var(--ok); }
.status.warn .status-dot { background: var(--warn); box-shadow: 0 0 20px var(--warn); }
.status.bad .status-dot { background: var(--danger); box-shadow: 0 0 20px var(--danger); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
pre { white-space: pre-wrap; background: #090d15; border: 1px solid var(--line); border-radius: 12px; padding: .8rem; color: #d9e6ff; }
.big-code { font-size: 1.25rem; text-align: center; letter-spacing: .08em; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
small { color: var(--muted); }
@media (max-width: 760px) {
  .grid2, .row-form { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; gap: .75rem; }
  nav { flex-wrap: wrap; justify-content: center; }
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.stack-form { display: grid; grid-template-columns: minmax(220px, 1fr); gap: .45rem; }
.good-text { color: var(--ok); font-weight: 700; }
.warn-text { color: var(--warn); font-weight: 700; }
.bad-text { color: var(--danger); font-weight: 700; }
code { background: #090d15; border: 1px solid var(--line); border-radius: 8px; padding: .12rem .35rem; }
td form + form { margin-top: .35rem; }
.inline-device-form { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: .65rem; align-items: end; min-width: min(560px, 100%); }
.button.full { display: block; width: 100%; margin: .45rem 0; text-align: center; }
.install-card { display: flex; flex-direction: column; gap: .4rem; }
.install-card pre { margin-top: auto; }
@media (max-width: 760px) {
  .inline-device-form { grid-template-columns: 1fr; }
}