html {
  --page: #171719;
  --sidebar: #242427;
  --surface: #29292d;
  --inner: #303035;
  --border: #444449;
  --divider: #3d3d42;
  --text: #f5f5f7;
  --muted: #b4b4bb;
  --primary: #a9b8ff;
  --primary-hover: #c4ccff;
  --hover: #35353a;
  --chart-grid: #444449;
  --chart-cpu: #76cfbe;
  --chart-memory: #a7b3ff;
  color-scheme: dark;
}
html[data-theme="light"] {
  --page: #f5f5f7;
  --sidebar: #fff;
  --surface: #fff;
  --inner: #f0f0f2;
  --border: #e4e4e7;
  --divider: #dedee2;
  --text: #1d1d1f;
  --muted: #57575e;
  --primary: #3156d8;
  --primary-hover: #2446bc;
  --hover: #ededf0;
  --chart-grid: #dedee2;
  --chart-cpu: #168476;
  --chart-memory: #4e62d6;
  color-scheme: light;
}
body,
.main {
  background: var(--page);
  color: var(--text);
}
.sidebar {
  background: var(--sidebar);
  border-color: var(--border);
}
.topbar {
  border-color: var(--border);
}
.metric-card,
.panel,
.login-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.metric-card,
.panel {
  box-shadow: 0 3px 16px #0000000b;
}
.service-row,
.mini-process,
.status-list > div,
.network-rule {
  border-color: var(--divider);
}
.sidebar-brand strong,
.breadcrumbs strong,
.status-list strong,
.service-name strong {
  color: var(--text);
}
.page-head p,
.panel-heading p,
.metric-card p,
.sidebar-host small,
.status-list > div span,
.network-total,
.login-byline {
  color: var(--muted);
}
.nav-item:hover {
  background: var(--hover);
}
.primary-button {
  background: var(--primary);
  color: #fff;
}
.primary-button:hover {
  background: var(--primary-hover);
}
.login-form input,
.log-box {
  background: var(--inner);
  border-color: var(--border);
  color: var(--text);
}
.chart-wrap svg {
  background: transparent;
}
.segmented,
.mini-bar,
.meter {
  background: var(--inner);
  border-color: var(--border);
}
.segmented button.selected {
  background: var(--hover);
  color: var(--text);
}
.secondary-button,
.logout-button {
  background: var(--inner);
  border-color: var(--border);
  color: var(--text);
}
.secondary-button:hover,
.logout-button:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.sidebar-brand .brand-mark,
.login-card .brand-mark {
  background: #2b57f5;
  border-color: #6e7dfc;
  box-shadow: none;
}
.brand-mark span {
  background: #fff;
}
.login-screen {
  background: var(--page);
}
.link-button,
.text-button,
.eyebrow {
  color: var(--primary);
}
.nav-item.active {
  background: var(--hover);
  color: var(--primary);
}
.chart-legend .legend-cpu {
  background: var(--chart-cpu);
}
.chart-legend .legend-memory {
  background: var(--chart-memory);
}
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  background: currentColor;
  mask: var(--icon) center/contain no-repeat;
  -webkit-mask: var(--icon) center/contain no-repeat;
}
.icon-dashboard {
  --icon: url("/icons/dashboard-square-01.svg");
}
.icon-processes {
  --icon: url("/icons/list-view.svg");
}
.icon-services {
  --icon: url("/icons/settings-01.svg");
}
.icon-audit {
  --icon: url("/icons/activity-01.svg");
}
.icon-cpu {
  --icon: url("/icons/cpu.svg");
}
.icon-memory {
  --icon: url("/icons/chip.svg");
}
.icon-disk {
  --icon: url("/icons/hard-drive.svg");
}
.icon-network {
  --icon: url("/icons/exchange-01.svg");
}
.icon-logout {
  --icon: url("/icons/logout-01.svg");
}
.metric-icon {
  width: 23px;
  height: 23px;
  color: #65d9b5;
}
.nav-icon {
  width: 20px;
  height: 20px;
}
.logout-button .icon {
  width: 16px;
  height: 16px;
}
.theme-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.theme-picker {
  position: relative;
}
.theme-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 116px;
  min-height: 44px;
  border: 1px solid var(--border);
  background: var(--inner);
  color: var(--text);
  border-radius: 12px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}
.theme-trigger:hover,
.theme-trigger[aria-expanded="true"] {
  background: var(--hover);
}
.theme-chevron {
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.theme-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--menu-surface, var(--surface));
  color: var(--text);
  box-shadow: var(--glass-shadow, 0 16px 32px rgba(0, 0, 0, 0.18));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.theme-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 13px;
}
.theme-menu button::after {
  content: "";
  width: 9px;
  height: 5px;
  margin: 0 2px 3px 8px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
  opacity: 0;
}
.theme-menu button[aria-checked="true"]::after {
  opacity: 1;
}
.theme-menu button:hover,
.theme-menu button:focus-visible {
  background: var(--hover);
}
.app-footer {
  font-size: 12px;
  color: var(--muted);
  padding: 28px 0 0;
  text-align: right;
}
.empty-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 0;
}
.nav-item {
  min-height: 44px;
}
.segmented button {
  min-width: 40px;
  min-height: 34px;
}
.secondary-button,
.link-button {
  min-height: 44px;
}
.login-form label {
  font-size: 13px;
}
.metric-card p,
.panel-heading p {
  font-size: 13px;
}
.metric-top,
.sidebar-group-label {
  font-size: 12px;
}
.chart-grid,
.chart-foot {
  font-size: 12px;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
html[data-theme="light"] .sidebar-brand small,
html[data-theme="light"] .sidebar-group-label,
html[data-theme="light"] .metric-top,
html[data-theme="light"] .topbar,
html[data-theme="light"] .chart-grid,
html[data-theme="light"] .chart-foot {
  color: var(--muted);
}
html[data-theme="light"] .health-badge {
  background: #e1f4eb;
  border-color: #9bcdb6;
  color: #146f4e;
}
html[data-theme="light"] .health-badge.warning {
  background: #fff1dc;
  border-color: #e2bd78;
  color: #79500d;
}
html[data-theme="light"] .health-badge.critical {
  background: #ffe6e8;
  border-color: #e3a2aa;
  color: #982c3a;
}
html[data-theme="light"] .alert-box {
  background: #eaf8f0;
  border-color: #b5ddca;
}
html[data-theme="light"] .alert-box.has-alert {
  background: #fff3e1;
  border-color: #e9c994;
}
html[data-theme="light"] .alert-box p {
  color: #4b5e53;
}
html[data-theme="light"] .alert-box.has-alert p {
  color: #775719;
}
html[data-theme="light"] .monitor-notice {
  background: #fff3e1;
  border-color: #e9c994;
  color: #765416;
}
html[data-theme="light"] .service-row.selected {
  background: var(--hover);
}
html[data-theme="light"] .state-pill {
  background: #e3f4e9;
  color: #167653;
  border-color: #b4ddc1;
}
html[data-theme="light"] .state-pill.down {
  background: #fff1dd;
  color: #805814;
  border-color: #e5bf7d;
}
html[data-theme="light"] .segmented button {
  color: var(--muted);
}
html[data-theme="light"] .segmented button.selected {
  color: #fff;
}
html[data-theme="light"] .login-screen {
  background: var(--page);
}
html[data-theme="light"] .login-card {
  box-shadow: 0 25px 80px #00000018;
}
html[data-theme="light"] td {
  color: var(--text);
  border-color: var(--divider);
}
html[data-theme="light"] td:first-child {
  color: var(--text);
}
html[data-theme="light"] th {
  color: var(--muted);
  border-color: var(--divider);
}
@media (max-width: 390px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }
  .page-head {
    display: block;
  }
  .health-badge {
    display: inline-block;
    margin-top: 14px;
  }
  .topbar-right {
    gap: 8px;
  }
  .breadcrumbs {
    font-size: 12px;
  }
  .theme-control {
    font-size: 0;
  }
  .theme-trigger {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.notfound-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--page);
}
.notfound-card {
  width: min(100%, 520px);
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 70px #0713232b;
}
.notfound-brand {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--primary);
  font-weight: 800;
  margin: 0 0 22px;
}
.notfound-number {
  font-size: 84px;
  line-height: 1;
  letter-spacing: -0.07em;
  color: var(--primary);
}
.notfound-card h1 {
  font-size: 30px;
  margin: 16px 0 8px;
}
.notfound-card > p:not(.notfound-brand) {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.notfound-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 18px 0;
  padding: 0 17px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.notfound-link:hover {
  background: var(--primary-hover);
}
.notfound-contact {
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.notfound-card small {
  display: block;
  color: var(--muted);
  margin-top: 22px;
}
.brand-logo {
  display: block;
  object-fit: contain;
  flex: none;
}
.login-logo {
  margin: 0 0 24px -5px;
}
.sidebar-logo {
  margin-left: -5px;
}
.notfound-logo {
  margin: 0 0 8px -8px;
}
.site-summary-panel {
  margin-bottom: 16px;
}
.site-summary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  padding: 0 23px 14px;
}
.site-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 66px;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--divider);
  min-height: 48px;
  font-size: 13px;
}
.site-summary-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-latency-value {
  text-align: right;
  color: var(--muted);
}
.site-health {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 6px;
  padding: 5px 8px;
}
.site-health.healthy {
  color: #74e1b5;
  background: #184234;
}
.site-health.warning {
  color: #f1c983;
  background: #3b2d1e;
}
.site-health.down {
  color: #ffacb8;
  background: #462733;
}
.site-health.checking {
  color: var(--muted);
  background: var(--inner);
}
html[data-theme="light"] .site-health.healthy {
  color: #126f4c;
  background: #e2f4e9;
}
html[data-theme="light"] .site-health.warning {
  color: #7c5414;
  background: #fff1dc;
}
html[data-theme="light"] .site-health.down {
  color: #9d3140;
  background: #ffe7e9;
}
.sites-layout {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.site-list {
  padding: 0 23px 20px;
}
.site-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--divider);
  padding: 16px 4px;
  min-height: 65px;
}
.site-item:first-child {
  border-top: 0;
}
.site-item:hover,
.site-item.selected {
  background: var(--hover);
  border-radius: 7px;
  padding-left: 10px;
  padding-right: 10px;
}
.site-item strong {
  font-size: 14px;
}
.site-item small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.site-detail {
  padding: 0 23px 18px;
}
.site-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  border-top: 1px solid var(--divider);
  padding: 12px 0;
  font-size: 13px;
}
.site-detail-row span {
  color: var(--muted);
  flex: none;
}
.site-detail-row strong {
  text-align: right;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.shared-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  background: var(--inner);
  border-radius: 7px;
  padding: 11px;
}
.site-latency {
  border-top: 1px solid var(--divider);
  padding: 18px 23px 23px;
}
.site-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.site-chart-head span,
.site-latency p {
  color: var(--muted);
  font-size: 12px;
}
.site-latency svg {
  display: block;
  width: 100%;
  height: 150px;
  margin-top: 14px;
  background: transparent;
}
.site-latency p {
  margin: 9px 0 0;
}
.monitor-notice {
  margin-left: 23px;
  margin-right: 23px;
}
.table-wrap td {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1100px) {
  .site-summary-list {
    grid-template-columns: 1fr;
  }
  .sites-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .site-summary-list,
  .site-list,
  .site-detail {
    padding-left: 18px;
    padding-right: 18px;
  }
  .site-summary-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }
  .site-latency-value {
    display: none;
  }
  .site-item {
    align-items: flex-start;
  }
  .site-item small {
    max-width: 230px;
    overflow-wrap: anywhere;
  }
}