:root {
  --bg:#0b1015;
  --panel:#11191f;
  --panel2:#151f27;
  --border:#25323b;
  --text:#e8efef;
  --muted:#91a4af;
  --teal:#5bd7bb;
  --amber:#e9b75d;
  --red:#ee7e86}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select {
  font:inherit}
button,select {
  background:var(--panel2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:7px;
  padding:9px 13px}
button {
  cursor:pointer}
button:hover {
  border-color:#587482;
  background:#1d2b35}
button:disabled {
  opacity:.5;
  cursor:wait}
a {
  color:inherit;
  text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--teal);
  outline-offset:4px}
input {
  background:#0c1319;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:7px;
  padding:11px 13px;
  width:100%}
[hidden] {
  display:none!important}
.sidebar {
  width:222px;
  position:fixed;
  inset:0 auto 0 0;
  padding:32px 23px;
  background:#0e161c;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:1px;
  font-size:14px}
.brand-mark {
  display:grid;
  place-items:center;
  border:1px solid #346757;
  color:var(--teal);
  background:#142b28;
  border-radius:10px;
  font-size:25px;
  width:38px;
  height:38px}
.brand-muted {
  color:#849aa5;
  font-size:10px;
  font-weight:600;
  letter-spacing:1px}
.eyebrow {
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:700;
  margin:0 0 9px}
.sidebar>.eyebrow {
  margin-top:48px}
.nav-item {
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:7px;
  color:var(--muted);
  margin-bottom:5px}
.nav-item:hover,.nav-item[aria-current="page"] {
  background:#1a2b30;
  color:var(--teal)}
.sidebar-footer {
  margin-top:auto;
  border-top:1px solid var(--border);
  padding-top:22px;
  color:var(--muted);
  font-size:12px}
.sidebar-footer p {
  font-family:monospace;
  padding-left:15px}
.quiet {
  background:none;
  border:0;
  padding:6px 0;
  color:var(--muted)}
main {
  max-width:1650px;
  margin-left:222px;
  padding:38px 42px 20px}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px}
h1,h2,p {
  margin-top:0}
h1 {
  font-size:31px;
  letter-spacing:-1px;
  margin-bottom:7px;
  font-weight:650}
h2 {
  font-size:20px;
  letter-spacing:-.5px;
  margin-bottom:0;
  font-weight:600}
.title-dot {
  color:var(--teal)}
.muted,.subtle {
  color:var(--muted)}
.subtle {
  font-size:11px}
.host-tag {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--border);
  padding:10px 16px;
  border-radius:8px;
  font-size:10px;
  letter-spacing:1px;
  white-space:nowrap}
.host-tag small {
  display:block;
  color:var(--muted);
  letter-spacing:.5px;
  font-family:monospace;
  margin-top:4px}
.dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--muted);
  flex-shrink:0}
.dot.up {
  background:var(--teal);
  box-shadow:0 0 0 3px #5bd7bb12}
.dot.down {
  background:var(--red)}
.dot.degraded {
  background:var(--amber)}
.toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid var(--border);
  margin:25px 0 22px;
  padding-top:18px}
.live-label {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:12px}
.refresh-tools {
  display:flex;
  align-items:center;
  gap:10px}
.refresh-tools label {
  font-size:11px;
  color:var(--muted)}
.refresh-tools button,.refresh-tools select {
  font-size:12px}
.summary-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px}
.summary {
  border:1px solid var(--border);
  background:linear-gradient(120deg,#152127,var(--panel));
  border-radius:10px;
  padding:21px}
.summary strong {
  display:block;
  font-size:32px;
  font-weight:550;
  letter-spacing:-1px;
  margin:4px 0 8px}
.summary .muted {
  font-size:11px}
.section {
  margin-top:34px;
  scroll-margin-top:24px}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:17px}
.count {
  font-size:12px;
  letter-spacing:0;
  margin-left:8px;
  border:1px solid var(--border);
  border-radius:5px;
  padding:2px 7px;
  color:var(--muted);
  vertical-align:middle}
.telemetry-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px}
.metric {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:16px}
.metric-label {
  color:var(--muted);
  font-size:11px;
  display:flex;
  justify-content:space-between}
.metric strong {
  display:block;
  font-size:19px;
  font-weight:550;
  margin:9px 0 6px}
.metric p {
  color:var(--muted);
  font-size:11px;
  margin-bottom:0}
.meter {
  height:4px;
  background:#26333b;
  border-radius:3px;
  margin:12px 0;
  overflow:hidden}
.meter>span {
  display:block;
  height:100%;
  background:var(--teal)}
.meter.warn>span {
  background:var(--amber)}
.computer-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px}
.computer {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:9px;
  padding:18px;
  min-width:0}
.computer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:19px}
.computer-icon {
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  font-size:22px;
  background:#1b2932;
  border-radius:8px;
  color:#bbd0da}
.badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:var(--muted);
  background:#1c2730;
  border:1px solid #2a3b44;
  border-radius:5px;
  padding:4px 7px;
  white-space:nowrap}
.badge.up {
  color:var(--teal);
  background:#143029;
  border-color:#20483c}
.badge.down {
  color:var(--red);
  background:#311f27;
  border-color:#58313b}
.badge.degraded {
  color:var(--amber);
  background:#322b1c;
  border-color:#594c2b}
.computer h3 {
  font-size:15px;
  margin:0 0 3px}
.address {
  font-family:monospace;
  color:var(--muted);
  font-size:11px;
  margin-bottom:14px}
.inventory {
  font-size:11px;
  color:var(--muted);
  min-height:46px}
.observed {
  border-top:1px solid var(--border);
  padding-top:12px;
  font-size:11px;
  margin:12px 0 0;
  color:var(--muted)}
.last-check {
  font-size:10px;
  color:#8296a3;
  margin-top:6px}
.filters {
  display:flex;
  gap:9px}
.search-label {
  display:flex;
  align-items:center;
  background:#0c1319;
  border:1px solid var(--border);
  border-radius:7px;
  padding-left:10px;
  color:var(--muted)}
.search-label input {
  border:0;
  background:none;
  font-size:12px;
  width:190px;
  padding:9px}
.filters select {
  font-size:12px}
.tabs {
  display:flex;
  gap:5px;
  margin-bottom:15px}
.tabs button {
  background:none;
  border:1px solid transparent;
  font-size:12px;
  color:var(--muted);
  padding:7px 13px}
.tabs button.selected {
  color:var(--teal);
  border-color:#2a4844;
  background:#152a28}
.service-group {
  margin-bottom:24px}
.group-title {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:10px;
  margin:20px 0 10px}
.group-title:after {
  content:"";
  height:1px;
  background:var(--border);
  flex:1}
.service-row {
  display:grid;
  grid-template-columns:minmax(190px,1.25fr) minmax(160px,1fr) minmax(120px,.8fr) auto;
  align-items:center;
  gap:16px;
  background:var(--panel);
  border:1px solid var(--border);
  padding:16px 18px;
  margin-bottom:8px;
  border-radius:8px}
.service-name {
  display:flex;
  align-items:center;
  gap:12px}
.service-icon {
  width:33px;
  height:33px;
  border-radius:8px;
  background:#1c2b33;
  color:#a8bfc9;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700}
.service-name h3 {
  font-size:13px;
  margin:0 0 3px}
.service-name small {
  color:var(--muted);
  font-family:monospace;
  font-size:10px}
.service-probe .detail {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:6px}
.unit-detail {
  color:var(--muted);
  font-size:10px;
  overflow-wrap:anywhere}
.unit-detail strong {
  font-weight:500;
  color:#bbcbd2;
  display:block;
  margin-bottom:4px}
.service-actions {
  display:flex;
  align-items:center;
  gap:8px}
.open-ui {
  border:1px solid var(--border);
  border-radius:6px;
  padding:7px 10px;
  font-size:11px;
  white-space:nowrap}
.open-ui:hover {
  border-color:var(--teal);
  color:var(--teal)}
.service-actions select {
  width:94px;
  font-size:11px;
  padding:7px 6px}
.notice {
  padding:12px 15px;
  color:var(--amber);
  border:1px solid #594c2b;
  background:#231f18;
  border-radius:7px;
  font-size:12px}
.placeholder {
  color:var(--muted);
  padding:24px;
  border:1px dashed var(--border);
  border-radius:8px}
.repo-table-wrap {
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel)}
.repo-table {
  width:100%;
  min-width:820px;
  border-collapse:collapse}
.repo-table th,.repo-table td {
  padding:14px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top}
.repo-table thead th {
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  background:var(--panel2)}
.repo-table tbody tr:last-child th,.repo-table tbody tr:last-child td {
  border-bottom:0}
.repo-table tbody th small {
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-weight:400}
.repo-name {
  font-weight:600}
.repo-loc {
  display:grid;
  gap:4px;
  margin-bottom:12px}
.repo-loc:last-child {
  margin-bottom:0}
.repo-loc small {
  color:var(--muted);
  font-size:12px}
.repo-note {
  margin-top:14px;
  font-size:12px}
footer {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--border);
  padding-top:18px;
  margin-top:36px;
  font-size:9px;
  letter-spacing:1px;
  color:#6e8592}
footer span {
  letter-spacing:0}
dialog {
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:26px;
  max-width:460px;
  width:calc(100% - 36px)}
dialog::backdrop {
  background:#000a}
dialog h2 {
  margin-bottom:16px}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:25px}
.danger {
  color:var(--red);
  border-color:#74424a;
  background:#332127}
.login-wrap {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:radial-gradient(ellipse at 60% 30%,#132a2b 0,transparent 55%)}
.login-panel {
  width:430px;
  max-width:100%;
  padding:36px;
  border:1px solid var(--border);
  background:#10191fee;
  border-radius:14px}
.login-panel .brand {
  margin-bottom:40px}
.login-panel h1 {
  font-size:36px;
  line-height:1.15;
  margin:13px 0 20px}
.login-panel label {
  font-size:12px;
  display:block;
  margin:26px 0 7px}
.primary {
  background:var(--teal);
  color:#092c26;
  border-color:var(--teal);
  font-weight:650;
  width:100%;
  margin-top:14px;
  display:flex;
  justify-content:space-between}
.primary:hover {
  background:#7be7ce}
.login-note {
  color:var(--muted);
  font-size:10px;
  margin:25px 0 0}
#login-error {
  color:var(--red);
  font-size:12px;
  margin:12px 0 0}
@media(min-width:1500px) {
  .service-row {
  grid-template-columns:1.3fr 1fr 1fr auto}
}
@media(max-width:1200px) {
  main {
  padding:30px 25px}
.sidebar {
  width:185px;
  padding:28px 17px}
main {
  margin-left:185px}
.computer-grid {
  grid-template-columns:repeat(2,1fr)}
.service-row {
  grid-template-columns:1fr 1fr auto}
.unit-detail {
  grid-column:1/3;
  grid-row:2}
.service-actions {
  grid-column:3;
  grid-row:1/3}
}
@media(max-width:850px) {
  .sidebar {
  width:70px;
  padding:24px 15px}
.sidebar .brand>span:last-child,.sidebar>.eyebrow,.nav-item span,.sidebar-footer {
  display:none}
.sidebar .brand-mark {
  width:38px}
.sidebar nav {
  margin-top:35px}
.nav-item {
  padding:12px 9px;
  font-size:18px}
main {
  margin-left:70px;
  padding:25px 20px}
.summary-grid,.telemetry-grid {
  grid-template-columns:repeat(2,1fr)}
.section-heading {
  align-items:flex-start}
.section-heading>.subtle {
  max-width:160px;
  text-align:right}
.filters {
  flex-wrap:wrap;
  justify-content:flex-end}
.search-label input {
  width:150px}
.topbar h1 {
  font-size:26px}
.host-tag {
  display:none}
.toolbar {
  flex-wrap:wrap}
.summary strong {
  font-size:28px}
}
@media(max-width:560px) {
  .sidebar {
  position:static;
  width:auto;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-right:0;
  border-bottom:1px solid var(--border)}
.sidebar .brand>span:last-child {
  display:block}
.sidebar nav {
  display:flex;
  margin:0}
.nav-item {
  margin:0;
  padding:8px}
.sidebar .brand-mark {
  width:30px;
  height:30px;
  font-size:20px}
.sidebar-footer {
  display:block;
  margin:0;
  padding:0;
  border:0}
.sidebar-footer>.dot,.sidebar-footer p,.sidebar-footer {
  font-size:0}
.sidebar-footer .quiet {
  font-size:11px}
main {
  margin:0;
  padding:25px 16px}
.topbar h1 {
  font-size:26px}
.topbar .muted {
  font-size:12px}
.refresh-tools {
  width:100%;
  justify-content:space-between}
.refresh-tools label {
  font-size:10px}
.summary-grid,.telemetry-grid {
  gap:10px}
.summary {
  padding:16px 13px}
.summary .eyebrow {
  font-size:9px;
  letter-spacing:1px}
.summary .muted {
  font-size:10px}
.summary strong {
  font-size:26px}
.metric {
  padding:13px}
.computer-grid {
  grid-template-columns:1fr}
.inventory {
  min-height:0}
.computer {
  padding:16px}
.computer-top {
  margin-bottom:12px}
.section-heading {
  flex-wrap:wrap}
.section-heading>.subtle {
  max-width:none;
  text-align:left}
.filters {
  width:100%;
  justify-content:space-between}
.search-label {
  flex:1}
.search-label input {
  width:100%}
.service-row {
  grid-template-columns:1fr auto;
  gap:10px;
  padding:14px}
.service-probe {
  grid-column:1/3;
  grid-row:2}
.unit-detail {
  grid-column:1/3;
  grid-row:3}
.service-actions {
  grid-column:2;
  grid-row:1;
  flex-direction:column;
  align-items:stretch}
.service-name {
  gap:9px}
.tabs {
  gap:0;
  justify-content:space-between}
.tabs button {
  padding:7px 9px;
  font-size:11px}
footer {
  gap:15px;
  font-size:8px}
footer span {
  text-align:right}
.login-panel {
  padding:27px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}