:root {
  color-scheme: dark;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #000;
  color: #f5f5f5;
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}

.cmd-gate {
  display: grid;
  min-height: 100svh;
  padding: 24px;
  place-content: center;
}

.cmd-gate__logo {
  width: 76px;
  height: auto;
  margin: 0 auto 24px;
}

.cmd-form {
  display: grid;
  width: min(560px, calc(100vw - 48px));
  grid-template-columns: 48px 1fr 86px;
  border: 1px solid #555;
}

.cmd-form__prompt {
  display: grid;
  height: 54px;
  color: #aaa;
  place-items: center;
}

.cmd-form input,
.cmd-form button {
  min-width: 0;
  height: 54px;
  border: 0;
  background: #000;
  color: #fff;
  outline: 0;
}

.cmd-form input {
  padding: 0 8px 0 0;
}

.cmd-form button {
  border-left: 1px solid #555;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmd-form:focus-within {
  border-color: #fff;
}

.cmd-form input:disabled,
.cmd-form button:disabled {
  opacity: 0.28;
}

.cmd-status {
  margin: 12px 0 0;
  color: #777;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmd-vault__header {
  position: relative;
  display: flex;
  min-height: 56px;
  padding: 0 clamp(18px, 3vw, 44px);
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(0, 0, 0, .97);
  border-bottom: 1px solid #303030;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.cmd-vault__logo {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.cmd-vault__title {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  min-height: 30px;
  align-items: center;
  font-size: 14.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.cmd-vault__header form {
  margin: 0;
}

.cmd-vault {
  display: grid;
  min-height: 100svh;
  padding: 0 clamp(16px, 3vw, 44px);
  grid-template-rows: 56px 1fr 64px;
}

.cmd-vault__actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.cmd-vault__actions form {
  margin: 0;
}

#settingsStatus {
  position: absolute;
  top: calc(100% - 8px);
  right: 0;
  color: #a8a8a8;
}

.cmd-vault__center {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 48px;
}

.cmd-vault__mark {
  width: clamp(112px, 16vw, 168px);
  height: auto;
}

.cmd-projects {
  display: grid;
  width: min(720px, 100%);
  gap: 12px;
}

.cmd-projects nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.cmd-projects a {
  flex: 0 0 calc((100% - 36px) / 4);
  padding: 14px 16px;
  border: 1px solid #555;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.cmd-projects a:hover,
.cmd-projects a:focus-visible {
  background: #fff;
  color: #000;
  outline: none;
}

.cmd-projects a.is-setup {
  border-style: dashed;
  color: #777;
}

.cmd-vault__header button,
.cmd-vault__actions button,
.cmd-import {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.cmd-import:focus-within {
  outline: 1px solid #ddd;
  outline-offset: 4px;
}

.cmd-health {
  display: grid;
  min-width: 0;
  min-height: 0;
  margin: 0 clamp(18px, 3vw, 44px) 16px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  border: 1px solid #333;
  overflow: hidden;
}

.cmd-health__header,
.cmd-health__identity,
.cmd-health__refresh,
.cmd-health__details > section > header,
.cmd-health__list li {
  display: flex;
  align-items: center;
}

.cmd-collection { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; padding: 9px 13px; border-bottom: 1px solid #292929; border-left: 3px solid #777; min-width: 0; }
.cmd-collection strong { font-size: 13px; font-weight: 500; color: #ddd; }
.cmd-collection span { font-size: 12px; color: #aaa; line-height: 1.5; overflow-wrap: anywhere; }
.cmd-collection[data-state=critical] { border-left-color: #e15f5f; background: #251111; }
.cmd-collection[data-state=critical] strong { color: #f18b8b; }
.cmd-collection[data-state=degraded] { border-left-color: #cfaa53; background: #1b170d; }
.cmd-collection[data-state=degraded] strong { color: #dfbc6b; }
.cmd-collection[data-state=online] { border-left-color: #62bfa3; }

.cmd-health__header {
  min-width: 0;
  min-height: 42px;
  padding: 0 16px;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #333;
}

.cmd-health__identity {
  min-width: 0;
  gap: 11px;
}

.cmd-health__identity > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 12px;
}

.cmd-health__identity span,
.cmd-health__details h2,
.cmd-health__metrics span {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cmd-health__identity span {
  color: #999;
}

.cmd-health__identity strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-health__beacon,
.cmd-health__list li > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #555;
}

.cmd-health__beacon.is-online,
.cmd-health__list li.is-online > i {
  background: #75e694;
  box-shadow: 0 0 12px rgba(117, 230, 148, 0.38);
}

.cmd-health__beacon.is-degraded,
.cmd-health__list li.is-degraded > i {
  background: #e8b95d;
  box-shadow: 0 0 12px rgba(232, 185, 93, 0.28);
}

.cmd-health__beacon.is-critical,
.cmd-health__beacon.is-offline,
.cmd-health__list li.is-critical > i,
.cmd-health__list li.is-offline > i {
  background: #e15f5f;
  box-shadow: 0 0 12px rgba(225, 95, 95, 0.32);
}

.cmd-health__refresh {
  flex: 0 0 auto;
  gap: 12px;
  color: #999;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmd-health__refresh button {
  padding: 5px 8px;
  border: 1px solid #444;
  background: #000;
  color: #aaa;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmd-health__refresh button:hover,
.cmd-health__refresh button:focus-visible {
  border-color: #aaa;
  color: #fff;
}

.cmd-health__refresh button:disabled {
  opacity: 0.4;
  cursor: wait;
}

.cmd-health__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #333;
}

.cmd-health__metrics article {
  position: relative;
  min-width: 0;
  padding: 8px 15px 9px;
  border-right: 1px solid #292929;
}

.cmd-health__metrics article:last-child {
  border-right: 0;
}

.cmd-health__metrics article::before {
  position: absolute;
  top: 9px;
  right: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #555;
  content: "";
}

.cmd-health__metrics article.is-online::before { background: #75e694; }
.cmd-health__metrics article.is-degraded::before { background: #e8b95d; }
.cmd-health__metrics article.is-critical::before,
.cmd-health__metrics article.is-offline::before { background: #e15f5f; }

.cmd-health__metrics span,
.cmd-health__metrics small {
  display: block;
  overflow: hidden;
  color: #999;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-health__metrics strong {
  display: block;
  margin: 3px 0 2px;
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.cmd-health__metrics small {
  font-size: 14px;
  letter-spacing: 0.02em;
}

.cmd-health__details {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

.cmd-health__details > section {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #292929;
  overflow: auto;
  scrollbar-color: #3b3b3b #000;
  scrollbar-width: thin;
}

.cmd-health__details > section:last-child {
  border-right: 0;
}

.cmd-health__details > section > header {
  position: sticky;
  z-index: 2;
  top: 0;
  min-height: 32px;
  padding: 0 12px;
  justify-content: space-between;
  background: #000;
  border-bottom: 1px solid #242424;
  color: #666;
}

.cmd-health__details h2 {
  margin: 0;
  color: #b0b0b0;
}

.cmd-health__details header span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmd-health__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmd-health__list--connections {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cmd-health__list li {
  min-width: 0;
  min-height: 48px;
  padding: 4px 12px;
  gap: 10px;
  border-bottom: 1px solid #202020;
}

.cmd-health__list--connections li:not(:nth-child(3n)) {
  border-right: 1px solid #202020;
}

.cmd-health__list li > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.cmd-health__list strong,
.cmd-health__list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-health__list strong {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.cmd-health__list small {
  color: #aaa;
  font-size: 15px;
  line-height: 1.25;
}

.cmd-health__list b {
  flex: 0 0 auto;
  color: #8b8b8b;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cmd-health__list--connections li > i {
  width: 8px;
  height: 8px;
}

.cmd-health__list li.is-online b { color: #75e694; }
.cmd-health__list li.is-degraded b { color: #e8b95d; }
.cmd-health__list li.is-offline b,
.cmd-health__list li.is-critical b { color: #e15f5f; }

.cmd-health__history {
  min-height: 0;
  max-height: 40svh;
  overflow: auto;
  border-top: 1px solid #333;
  color: #aaa;
  font-size: 12px;
  line-height: 1.5;
}

.cmd-health__history[hidden] { display: none; }

.cmd-health__history summary {
  padding: 6px 15px;
  cursor: pointer;
}

.cmd-health__history summary:hover,
.cmd-health__history summary:focus-visible { color: #fff; }

.cmd-health__history article {
  padding: 10px 15px;
  border-top: 1px solid #242424;
}

.cmd-health__history strong { color: #ddd; font-weight: 500; }
.cmd-health__history p { margin: 4px 0 0; }

@media (max-width: 1199px) and (min-width: 761px) {
  .cmd-health__details { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .cmd-health__list--connections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmd-health__list--connections li { border-right: 0; }
  .cmd-health__list--connections li:nth-child(odd) { border-right: 1px solid #202020; }
}

.cmd-module {
  display: flex;
  min-height: 100svh;
  max-width: 920px;
  padding: clamp(34px, 8vw, 120px);
  flex-direction: column;
  justify-content: center;
}

.cmd-module > p:first-child {
  color: #777;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.cmd-module h1 {
  margin: 20px 0;
  font-size: clamp(56px, 12vw, 160px);
  letter-spacing: -0.08em;
  line-height: 0.82;
}

.cmd-module > p:not(:first-child) {
  max-width: 660px;
  color: #999;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5;
}

.cmd-module a {
  margin-top: 24px;
}

.cmd-module p + a {
  margin-top: 50px;
}

@media (max-width: 760px) {
  .cmd-projects a {
    flex-basis: calc((100% - 12px) / 2);
  }

  .cmd-health {
    margin: 0 18px 18px;
    overflow: visible;
  }

  .cmd-health__header {
    padding: 10px 12px;
    align-items: flex-start;
  }

  .cmd-health__identity > div {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .cmd-health__identity strong {
    display: block;
    max-width: 100%;
    white-space: normal;
  }

  .cmd-health__refresh {
    align-self: flex-start;
  }

  .cmd-health__refresh > span {
    display: none;
  }

  .cmd-health__metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .cmd-health__metrics article:nth-child(2) {
    border-right: 0;
  }

  .cmd-health__metrics article:nth-child(-n + 2) {
    border-bottom: 1px solid #292929;
  }

  .cmd-health__details {
    height: auto;
    grid-template-columns: 1fr;
  }

  .cmd-health__details > section {
    border-right: 0;
    border-bottom: 1px solid #292929;
    overflow: visible;
  }

  .cmd-health__details > section:last-child {
    border-bottom: 0;
  }

  .cmd-health__list--connections {
    grid-template-columns: 1fr;
  }

  .cmd-health__list--connections li {
    border-right: 0;
  }

  .cmd-health__history { max-height: none; }
}

/* Command index and device dashboard */
.cmd-status-link { justify-self:center; align-self:center; font-size:12px; letter-spacing:.16em; text-underline-offset:6px; }
.cmd-status-link:hover { color:#fff; }
.cmd-status-page { min-height:100svh; }
.status-content { width:100%; max-width:1800px; margin:0 auto; padding:36px clamp(20px,4vw,64px) 60px; }
.status-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:46px; }
.status-heading a { font-size:11px; color:#999; text-decoration:none; }
.status-heading h1 { margin:24px 0 12px; font-size:42px; font-weight:400; letter-spacing:-.05em; }
.status-heading p { margin:0; font-size:12px; color:#a8a8a8; }
.status-heading p[data-state="degraded"] { color:#e6b96a; }
.status-refresh { display:flex; align-items:center; gap:18px; font-size:11px; color:#999; }
.status-refresh button { background:none; border:1px solid #555; padding:8px 12px; color:#ddd; cursor:pointer; }
.status-refresh button:disabled { opacity:.4; }
.status-devices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:48px; }
.status-device { min-width:0; }
.status-device>header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-bottom:18px; border-bottom:1px solid #555; }
.status-device h2 { font-size:24px; font-weight:400; margin:0; }
.status-device>header>span { font-size:11px; color:#aaa; }
.status-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:24px 0; border-bottom:1px solid #282828; }
.status-metric { display:grid; gap:8px; }
.status-metric>span,.status-metric>small { font-size:11px; color:#999; }
.status-metric>strong { font-size:28px; font-weight:400; }
.status-metric[data-state="critical"]>strong,.status-metric[data-state="offline"]>strong { color:#ee8888; }
.status-metric[data-state="degraded"]>strong { color:#e6b96a; }
.status-services { list-style:none; padding:0; margin:12px 0; }
.status-services li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px 16px; padding:16px 0; border-bottom:1px solid #242424; font-size:12px; }
.status-services li>div { display:grid; gap:7px; }
.status-services strong { font-weight:400; }
.status-services small { font-size:10px; color:#999; }
.status-services b { font-weight:400; color:#ee8888; }
.status-services [data-state="online"] b { color:#84d9a0; }
.status-services [data-state="degraded"] b { color:#e6b96a; }
.status-services [data-state="checking"] b,.status-services [data-state="unknown"] b { color:#999; }
.status-services p { grid-column:1/-1; margin:0; font-size:11px; color:#c9aaaa; line-height:1.6; }
.status-data-notes,.status-history { font-size:11px; color:#aaa; margin-top:24px; line-height:1.7; }
.status-data-notes summary { color:#e6b96a; }
.status-data-notes p,.status-history p { display:grid; gap:4px; }
.status-data-notes strong,.status-history strong { font-weight:400; color:#ddd; }
.status-storage-note { color:#e6b96a; font-size:11px; }
.status-device summary { cursor:pointer; }
.status-device summary:focus-visible,.cmd-status-link:focus-visible { outline:1px solid #ddd; outline-offset:6px; }
@media(max-width:650px) {
 .status-heading { align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:32px; }
 .status-heading h1 { font-size:36px; }
 .status-refresh { width:100%; justify-content:space-between; }
 .status-devices { gap:40px; }
}
