:root {
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #eaf0f8;
  background: #0b1220;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
[hidden] {
  display: none !important;
}
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
}
.sidebar {
  background: #0e1726;
  border-right: 1px solid #263449;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 27px 15px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px 50px;
}
.sidebar-brand strong {
  display: block;
  letter-spacing: 0.115em;
  font-size: 14px;
  color: #f3f7fd;
}
.sidebar-brand small {
  display: block;
  color: #70829a;
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-top: 3px;
}
.brand-mark {
  width: 47px;
  height: 47px;
  border: 1px solid #367b73;
  background: #103e3b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transform: rotate(-6deg);
  border-radius: 13px;
  box-shadow: 0 0 30px #39d4aa23;
}
.brand-mark span {
  width: 4px;
  background: #64e7bf;
  border-radius: 5px;
  display: block;
}
.brand-mark span:nth-child(1) {
  height: 9px;
}
.brand-mark span:nth-child(2) {
  height: 22px;
}
.brand-mark span:nth-child(3) {
  height: 14px;
}
.brand-mark.small {
  height: 36px;
  width: 36px;
  border-radius: 10px;
}
.sidebar-group-label {
  color: #65778f;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 0 15px 12px;
}
.nav {
  display: grid;
  gap: 5px;
}
.nav-item {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 0;
  border-radius: 9px;
  color: #91a1b7;
  background: transparent;
  text-align: left;
  padding: 0 14px;
  font-weight: 600;
  font-size: 14px;
}
.nav-item:hover {
  color: #edf7ff;
  background: #1b2a3d;
}
.nav-item.active {
  color: #65e3bb;
  background: #173e3b;
}
.nav-icon {
  font-size: 19px;
  width: 20px;
  text-align: center;
  font-weight: 400;
  line-height: 1;
}
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid #263449;
  padding: 19px 11px 0;
}
.sidebar-host {
  display: flex;
  align-items: center;
  gap: 11px;
}
.sidebar-host strong {
  font-size: 13px;
  display: block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-host small {
  font-size: 12px;
  color: #7f90a7;
  display: block;
  margin-top: 2px;
}
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #54dcaa;
  box-shadow: 0 0 0 5px #3ad9a921;
}
.logout-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 1px solid #314259;
  background: #172337;
  color: #b3c0d1;
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 21px;
}
.logout-button:hover {
  color: white;
  border-color: #7090aa;
}
.main {
  min-width: 0;
  background: #0b1220;
}
.topbar {
  height: 70px;
  border-bottom: 1px solid #243246;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 38px;
  color: #8395ad;
  font-size: 13px;
}
.breadcrumbs span {
  color: #4d5d73;
  padding: 0 10px;
}
.breadcrumbs strong {
  color: #e5edf7;
  font-weight: 600;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 21px;
}
.avatar {
  height: 30px;
  width: 30px;
  background: #294e51;
  border: 1px solid #41827b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #85f0cb;
  font-size: 12px;
  font-weight: 700;
}
.content {
  max-width: 1550px;
  margin: auto;
  padding: 32px 38px 60px;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #58d9af;
  margin: 0 0 8px;
}
.page-head h1 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin: 0 0 7px;
}
.page-head p {
  color: #8598ae;
  font-size: 14px;
  margin: 0;
}
.health-badge {
  border: 1px solid #245d53;
  background: #10332f;
  color: #6ce7bd;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.health-badge.warning {
  border-color: #6b5730;
  background: #312616;
  color: #f4c877;
}
.health-badge.critical {
  border-color: #773d45;
  background: #381c25;
  color: #ff9caa;
}
.global-error {
  background: #3d202b;
  border: 1px solid #88505d;
  color: #ffd0d7;
  padding: 13px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 16px;
}
.metric-card {
  min-width: 0;
  background: #121d2d;
  border: 1px solid #2a394e;
  border-radius: 12px;
  padding: 20px 21px;
  min-height: 174px;
}
.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8295ab;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
}
.metric-icon {
  font-size: 23px;
  line-height: 1;
  color: #5edeb5;
  font-weight: 400;
}
.metric-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 15px;
}
.metric-value strong {
  font-size: 37px;
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 700;
}
.metric-value small {
  color: #90a3b9;
  font-size: 17px;
}
.meter {
  height: 5px;
  border-radius: 10px;
  background: #26364b;
  margin-top: 18px;
  overflow: hidden;
}
.meter span {
  display: block;
  background: #5cdeb5;
  width: 0;
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s;
}
.metric-card p {
  font-size: 12px;
  color: #8092a9;
  margin: 10px 0 0;
}
.network-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 18px;
}
.network-value strong {
  font-size: 28px;
  letter-spacing: -0.04em;
}
.network-value small {
  font-size: 12px;
  color: #8093aa;
}
.network-rule {
  height: 1px;
  background: #29394d;
  margin: 15px 0 11px;
}
.network-total {
  color: #8193aa;
  font-size: 12px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(310px, 0.9fr);
  gap: 16px;
  margin-bottom: 16px;
}
.panel {
  background: #121d2d;
  border: 1px solid #2a394e;
  border-radius: 12px;
  min-width: 0;
}
.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start;
  padding: 21px 23px;
}
.panel-heading h2 {
  font-size: 16px;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.panel-heading p {
  font-size: 12px;
  color: #8294ab;
  margin: 0;
}
.chart-panel {
  min-height: 374px;
}
.segmented {
  display: flex;
  background: #0c1523;
  border: 1px solid #2b3b4d;
  border-radius: 7px;
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: 0;
  background: transparent;
  color: #8395a9;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 5px;
}
.segmented button.selected {
  background: #25463f;
  color: #77edc6;
}
.chart-legend {
  display: flex;
  gap: 18px;
  padding: 0 23px 8px;
  color: #a5b4c8;
  font-size: 12px;
}
.chart-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.chart-legend i {
  height: 8px;
  width: 8px;
  display: block;
  border-radius: 2px;
}
.legend-cpu {
  background: #62dfb7;
}
.legend-memory {
  background: #629cf3;
}
.chart-wrap {
  display: flex;
  height: 217px;
  margin: 3px 24px 0 19px;
  position: relative;
}
.chart-grid {
  width: 43px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #6d8199;
  font-size: 11px;
}
.chart-wrap svg {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  overflow: visible;
}
.chart-foot {
  display: flex;
  justify-content: space-between;
  color: #71849b;
  font-size: 11px;
  margin: 8px 25px 0 62px;
}
.status-list {
  padding: 0 23px;
}
.status-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #28374a;
  padding: 13px 0;
  gap: 10px;
  font-size: 13px;
}
.status-list > div span {
  color: #8598ae;
}
.status-list strong {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-box {
  margin: 19px 23px 22px;
  border: 1px solid #245b4f;
  background: #12352e;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
}
.alert-box.has-alert {
  border-color: #785636;
  background: #392a1b;
}
.alert-symbol {
  height: 29px;
  width: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #246f57;
  color: #9bf7d0;
  font-weight: 800;
  flex: none;
}
.has-alert .alert-symbol {
  background: #80552b;
  color: #ffe0a1;
}
.alert-box strong {
  font-size: 12px;
}
.alert-box p {
  font-size: 11px;
  color: #86a89e;
  margin: 3px 0 0;
}
.has-alert p {
  color: #d2b58b;
}
.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.link-button,
.text-button {
  border: 0;
  background: transparent;
  color: #6de0ba;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}
.link-button:hover,
.text-button:hover {
  text-decoration: underline;
}
.service-list {
  padding: 0 23px 13px;
}
.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #28374a;
  padding: 12px 0;
  gap: 12px;
}
.service-row:first-child {
  border-top: 0;
}
.service-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.service-name strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-name small {
  display: block;
  color: #778ca4;
  font-size: 11px;
  margin-top: 2px;
}
.state-dot {
  height: 8px;
  width: 8px;
  background: #5de0b0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #5de0b014;
  flex: none;
}
.state-dot.down {
  background: #f3ba75;
  box-shadow: 0 0 0 4px #f3ba7514;
}
.state-pill {
  font-size: 11px;
  color: #6ce9bb;
  background: #174034;
  border: 1px solid #2e6853;
  padding: 5px 8px;
  border-radius: 6px;
  text-transform: capitalize;
}
.state-pill.down {
  background: #3a2e1f;
  border-color: #725638;
  color: #f3c785;
}
.mini-processes {
  padding: 0 23px 14px;
}
.mini-process {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 44px;
  align-items: center;
  gap: 9px;
  border-top: 1px solid #28374a;
  padding: 11px 0;
  font-size: 12px;
}
.mini-process:first-child {
  border-top: 0;
}
.mini-process strong {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-process .mini-bar {
  height: 5px;
  background: #24364a;
  border-radius: 6px;
}
.mini-bar span {
  height: 100%;
  display: block;
  background: #68a6eb;
  border-radius: 6px;
}
.mini-process em {
  font-style: normal;
  color: #8aa1ba;
  text-align: right;
}
.full-panel {
  min-height: 340px;
}
.subtle-pill {
  background: #1c2d40;
  border: 1px solid #30475e;
  color: #8aa9c6;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.table-wrap {
  overflow: auto;
  padding: 0 23px 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
}
th {
  color: #71859e;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 15px 12px;
  border-bottom: 1px solid #304057;
}
td {
  font-size: 13px;
  color: #aebdd0;
  padding: 15px 12px;
  border-bottom: 1px solid #243449;
}
td:first-child {
  color: #f0f5fb;
  font-weight: 600;
}
tr:last-child td {
  border-bottom: 0;
}
.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.service-list.large {
  padding-bottom: 18px;
}
.large .service-row {
  cursor: pointer;
  padding: 16px 0;
}
.large .service-row:hover strong {
  color: #79e8c0;
}
.large .service-row.selected {
  background: #192b3a;
  margin: 0 -10px;
  padding: 16px 10px;
  border-radius: 6px;
}
.log-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.65;
  color: #a6bbce;
  white-space: pre-wrap;
  overflow: auto;
  word-break: break-word;
  margin: 0 23px 23px;
  padding: 14px;
  background: #0b1522;
  border: 1px solid #2a3b50;
  border-radius: 7px;
  min-height: 300px;
  max-height: 520px;
}
.monitor-notice {
  padding: 13px 16px;
  border: 1px solid #785a38;
  background: #352819;
  color: #f4d298;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
}
.secondary-button,
.login-screen {
  min-height: 100vh;
  background: #0b1220;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(100%, 430px);
  background: #121d2c;
  border: 1px solid #33475a;
  border-radius: 16px;
  padding: 34px;
  box-shadow: 0 28px 100px #0007;
}
.login-card .brand-mark {
  margin-bottom: 29px;
}
.login-card h1 {
  font-size: 29px;
  letter-spacing: -0.035em;
  margin: 0 0 8px;
}
.login-byline {
  color: #91a4b8;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 30px;
}
.login-form {
  display: grid;
  gap: 11px;
}
.login-form label {
  font-size: 12px;
  font-weight: 700;
  color: #c5d5e5;
}
.login-form input {
  width: 100%;
  height: 45px;
  border: 1px solid #3b5065;
  background: #0c1725;
  color: #f2f8ff;
  border-radius: 7px;
  padding: 0 12px;
  outline: none;
}
.login-form input:focus {
  border-color: #71e4bb;
  box-shadow: 0 0 0 3px #49d5a621;
}
.primary-button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  background: #60dcb2;
  color: #0c2722;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.primary-button:hover {
  background: #80f1cb;
}
.form-error {
  font-size: 12px;
  color: #ff9eab;
  margin: 13px 0 0;
}
.login-form .text-button {
  margin-top: 8px;
  text-align: center;
}
.toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  max-width: 360px;
  padding: 14px 18px;
  background: #1f4d42;
  border: 1px solid #50a487;
  color: #d7ffed;
  box-shadow: 0 15px 50px #0008;
  border-radius: 9px;
  font-size: 13px;
  z-index: 20;
}
.toast.error {
  background: #4d2530;
  border-color: #af5a67;
  color: #ffe0e3;
}
@media (max-width: 1100px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .health-panel {
    min-height: 0;
  }
  .bottom-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 800px) {
  .app-shell {
    display: block;
  }
  .sidebar {
    height: auto;
    min-height: 0;
    position: static;
    padding: 12px 16px;
    display: block;
  }
  .sidebar-brand {
    padding: 0 0 10px;
  }
  .sidebar-group-label,
  .sidebar-bottom {
    display: none;
  }
  .nav {
    display: flex;
    overflow: auto;
    gap: 5px;
  }
  .nav-item {
    width: auto;
    white-space: nowrap;
    padding: 0 11px;
    flex: none;
  }
  .topbar {
    height: 54px;
    padding: 0 18px;
  }
  .content {
    padding: 25px 18px 40px;
  }
  .two-column {
    grid-template-columns: 1fr;
  }
  .page-head h1 {
    font-size: 26px;
  }
}
@media (max-width: 520px) {
  .metric-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .metric-card {
    padding: 15px;
    min-height: 150px;
  }
  .metric-value strong {
    font-size: 30px;
  }
  .network-value strong {
    font-size: 21px;
  }
  .metric-top {
    font-size: 10px;
  }
  .metric-icon {
    font-size: 17px;
  }
  .page-head {
    align-items: flex-start;
  }
  .health-badge {
    font-size: 10px;
  }
  .topbar-right #last-updated {
    display: none;
  }
  .panel-heading {
    padding: 18px;
  }
  .service-list,
  .mini-processes,
  .status-list {
    padding-left: 18px;
    padding-right: 18px;
  }
  .chart-wrap {
    margin-right: 14px;
  }
  .chart-foot {
    margin-right: 14px;
  }
}