.system-monitor-view {
  min-width: 0;
  min-height: calc(100vh - 28px);
  min-height: calc(100dvh - 28px);
  padding: 0 clamp(20px, 3vw, 42px) 40px;
  background: #f4f7f8;
}

.system-monitor-view.hidden { display: none; }

.system-monitor-server-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.system-monitor-server-hero h3,
.system-monitor-panel h3 { margin: 0; color: #17233c; }
.system-monitor-panel-heading p,
.system-monitor-test-panel p,
.system-monitor-server-hero p { margin: 6px 0 0; color: #68758c; font-size: 13px; }

.system-monitor-status { position: fixed; top: 12px; right: 18px; z-index: 2500; max-width: min(420px, calc(100vw - 36px)); color: #52627c; font-size: 13px; pointer-events: none; }
.system-monitor-status:not(:empty) { padding: 10px 14px; border-radius: 8px; background: #eaf6f5; box-shadow: 0 8px 22px rgba(23,53,74,.14); }
.system-monitor-status.error { color: #9d2f2f; background: #fff0f0; }
.system-monitor-status.success { color: #176541; background: #e9f8f0; }

.system-monitor-nav-group { margin-bottom: 6px; }
.system-monitor-nav-group > .module-item { width: 100%; }
.system-monitor-subnav { display: grid; gap: 2px; margin: 2px 0 8px 8px; padding: 0 0 0 8px; border-left: 1px solid rgba(169,216,223,.25); }
.system-monitor-subnav-item {
  width: 100%;
  min-height: 34px;
  padding: 6px 7px;
  color: #cdd9e8;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}
.system-monitor-subnav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.system-monitor-subnav-item.active { color: #fff; border-color: rgba(77,205,196,.36); background: rgba(15,143,140,.28); }

.system-monitor-content { display: grid; gap: 14px; }
.system-monitor-metric-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.system-monitor-metric {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid #dce6eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(23,53,74,.04);
}
.system-monitor-metric.primary { border-color: #c8e6e3; background: linear-gradient(135deg, #fbfefd 0%, #eaf6f5 100%); }
.system-monitor-metric span { color: #66748a; font-size: 13px; font-weight: 650; }
.system-monitor-metric strong { color: #17354a; font-size: 34px; line-height: 1; }
.system-monitor-metric small { color: #7e899b; font-size: 12px; }

.system-monitor-panel { min-width: 0; margin: 0; padding: 16px; }
.system-monitor-panel-heading { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; }
.system-monitor-panel-heading > span { flex: 0 0 auto; padding: 5px 9px; color: #59677d; border-radius: 999px; background: #eef2f7; font-size: 12px; }
.system-monitor-config-state.ready { color: #176541 !important; background: #e5f7ed !important; }

.system-monitor-callout { padding: 12px 14px; color: #456a6d; border: 1px solid #c8e6e3; border-radius: 8px; background: #f2faf9; font-size: 13px; }
.system-monitor-callout.warning { color: #805c16; border-color: #f0d49b; background: #fff8e8; }
.system-monitor-callout.muted { color: #738097; border-color: #dfe5ed; background: #f8fafc; }
.system-monitor-loading,
.system-monitor-empty { padding: 48px 20px; color: #7f8b9e; text-align: center; }

.system-monitor-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px; margin-bottom: 12px; padding: 11px 12px; border-radius: 8px; background: #f8fbfc; }
.system-monitor-filters input,
.system-monitor-filters select,
.system-monitor-form-grid input,
.system-monitor-form-grid select,
.system-monitor-test-panel input { min-height: 36px; padding: 7px 10px; color: #263550; border: 1px solid #cbd8e0; border-radius: 6px; background: #fff; }
.system-monitor-filter-field { display: grid; flex: 0 1 150px; gap: 4px; width: 150px; margin: 0; color: #647087; font-size: 11px; }
.system-monitor-filter-field > span { font-weight: 650; }
.system-monitor-filter-field input,
.system-monitor-filter-field select { width: 100%; min-width: 0; }
.system-monitor-filter-keyword { flex-basis: 300px; width: min(100%, 300px); }
.system-monitor-filter-select { flex-basis: 145px; width: 145px; }
.system-monitor-filter-date { flex-basis: 150px; width: 150px; }
.system-monitor-filter-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; margin: 0; }
.system-monitor-filters button,
.system-monitor-form-actions button,
.system-monitor-test-panel button,
.system-monitor-pagination button {
  width: auto;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  white-space: nowrap;
}

.system-monitor-table-wrap { width: 100%; overflow: auto; border: 1px solid #d8e3eb; border-radius: 8px; }
.system-monitor-login-panel .system-monitor-table-wrap {
  max-height: clamp(220px, calc(100vh - 410px), 640px);
  max-height: clamp(220px, calc(100dvh - 410px), 640px);
}
.system-monitor-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.system-monitor-table th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; color: #365267; text-align: left; white-space: nowrap; background: #edf3f6; }
.system-monitor-table td { padding: 11px 12px; color: #344158; vertical-align: middle; border-top: 1px solid #e7ebf1; }
.system-monitor-table td > span:not(.system-monitor-event):not(.system-monitor-health) { display: block; margin-top: 3px; color: #8792a3; }
.system-monitor-table code { color: #53627a; font-size: 11px; }
.system-monitor-user-agent { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-monitor-event,
.system-monitor-health { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.system-monitor-event.success,
.system-monitor-health.healthy { color: #176541; background: #e5f7ed; }
.system-monitor-event.failure,
.system-monitor-health.unhealthy { color: #9d3535; background: #feecec; }
.system-monitor-pagination { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 14px; color: #657188; font-size: 12px; }
.system-monitor-pagination > div { display: flex; gap: 8px; }

.system-monitor-form-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 420px)); justify-content: start; gap: 13px 16px; }
.system-monitor-form-grid label { display: grid; gap: 6px; color: #526078; font-size: 12px; font-weight: 650; }
.system-monitor-form-grid .system-monitor-switch { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; }
.system-monitor-switch input { width: 18px; min-height: auto; accent-color: #168f8b; }
.system-monitor-form-meta { grid-column: 1 / -1; color: #7d8899; font-size: 12px; }
.system-monitor-form-actions { grid-column: 1 / -1; }
.system-monitor-test-panel { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px 18px; }
.system-monitor-test-panel form { display: flex; align-items: center; gap: 9px; }
.system-monitor-test-panel input { min-width: 260px; }

.system-monitor-server-hero { padding: 22px 24px; color: #fff; border-radius: 10px; background: linear-gradient(115deg, #17354a 0%, #145f68 60%, #168f8b 100%); box-shadow: 0 10px 28px rgba(22,55,74,.14); }
.system-monitor-server-titleline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.system-monitor-server-hero h3 { margin: 0; color: #fff; font-size: 24px; }
.system-monitor-server-hero p { color: #d3e7e8; }
.system-monitor-server-titleline span { padding: 4px 9px; color: #bdeeea; border: 1px solid rgba(189,238,234,.42); border-radius: 999px; background: rgba(8,43,58,.22); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.system-monitor-server-summary { display: grid; justify-items: end; gap: 2px; }
.system-monitor-server-summary strong { font-size: 30px; }
.system-monitor-server-summary span { color: #d9efed; font-size: 12px; }
.system-monitor-server-summary small { color: #a9d8d5; font-size: 11px; }
.system-monitor-resource-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.system-monitor-resource-card { padding: 18px; border: 1px solid #dce6eb; border-radius: 8px; background: #fff; }
.system-monitor-resource-card > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }
.system-monitor-resource-card span { color: #5e6c83; font-size: 12px; font-weight: 700; }
.system-monitor-resource-card strong { color: #20304d; font-size: 22px; }
.system-monitor-resource-card small { color: #8290a4; font-size: 11px; }
.system-monitor-progress { height: 7px; overflow: hidden; margin: 12px 0 9px; border-radius: 999px; background: #edf1f6; }
.system-monitor-progress i { display: block; height: 100%; border-radius: inherit; background: #168f8b; }
.system-monitor-resource-card.warning .system-monitor-progress i { background: #d9992d; }
.system-monitor-resource-card.critical .system-monitor-progress i { background: #d65050; }
.system-monitor-resource-card.critical small { color: #a13b32; }
.system-monitor-resource-card.unknown strong { color: #718096; }
.system-monitor-health.paused { color: #876019; background: #fff2d9; }

.system-monitor-background .system-monitor-panel-heading { justify-content: space-between; align-items: center; }
.system-monitor-background .system-monitor-panel-heading > div { flex: 1 1 520px; }
.system-monitor-background .system-monitor-panel-heading button { flex: 0 0 auto; width: auto; min-height: 34px; padding: 6px 14px; }
.system-monitor-background-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.system-monitor-background .system-monitor-panel-heading > .system-monitor-background-actions { flex: 0 1 auto; }
.system-monitor-background-actions [hidden] { display: none; }
.system-monitor-production-table { min-width: 980px; }
.system-monitor-production-table td small { display: block; margin-top: 4px; color: #6c7c90; font-size: 11px; }
.system-monitor-background-summary { margin: 0 0 10px; color: #246a70; font-size: 12px; font-variant-numeric: tabular-nums; }
.system-monitor-background-summary.stale { color: #876019; }
.system-monitor-background-host { display: flex; flex-wrap: wrap; gap: 7px 20px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #d5e9e8; background: #f2faf9; color: #476b77; font-size: 12px; font-variant-numeric: tabular-nums; }
.system-monitor-background-host b { margin-right: 6px; color: #17354a; }
.system-monitor-background-table-wrap { max-height: 520px; overflow-anchor: none; }
.system-monitor-background-table { min-width: 1220px; table-layout: fixed; }
.system-monitor-background-table th:first-child { width: 23%; }
.system-monitor-background-table th:nth-child(2) { width: 16%; }
.system-monitor-background-table th:nth-child(3) { width: 6%; }
.system-monitor-background-table th:nth-child(4),
.system-monitor-background-table th:nth-child(5) { width: 7%; }
.system-monitor-background-table th:nth-child(6),
.system-monitor-background-table th:nth-child(7) { width: 10%; }
.system-monitor-background-table th:nth-child(8) { width: 9%; }
.system-monitor-background-table th:nth-child(9) { width: 12%; }
.system-monitor-background-table th,
.system-monitor-background-table td { padding: 10px; }
.system-monitor-background-table td { vertical-align: top; line-height: 1.45; overflow-wrap: anywhere; }
.system-monitor-background-table td > strong { display: block; color: #17354a; font-size: 12px; }
.system-monitor-background-table td small { display: block; margin-top: 4px; color: #6c7c90; font-size: 11px; line-height: 1.45; }
.system-monitor-background-table td .system-monitor-resource-reason { color: #7c858c; }
.system-monitor-background-table .system-monitor-numeric,
.system-monitor-background-table .system-monitor-rates { white-space: nowrap; font-variant-numeric: tabular-nums; }
.system-monitor-background-table .system-monitor-rates small { color: #344158; margin-top: 0; }
.system-monitor-background-table .system-monitor-activity-progress { font-variant-numeric: tabular-nums; }
.system-monitor-background-table .system-monitor-progress { margin: 6px 0; }
.system-monitor-background-note { margin: 10px 0 0; color: #728298; font-size: 11px; }
@media (max-width: 1280px) {
  .system-monitor-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .system-monitor-view {
    min-height: calc(100vh - 65px);
    min-height: calc(100dvh - 65px);
    padding: 0 14px 30px;
  }
  .system-monitor-server-hero,
  .system-monitor-test-panel { align-items: stretch; flex-direction: column; }
  .system-monitor-metric-row,
  .system-monitor-resource-grid,
  .system-monitor-form-grid { grid-template-columns: 1fr; }
  .system-monitor-test-panel form { align-items: stretch; flex-direction: column; }
  .system-monitor-test-panel input { width: 100%; min-width: 0; }
  .system-monitor-server-summary { justify-items: start; }
  .system-monitor-filter-field { flex: 1 1 150px; width: auto; }
  .system-monitor-filter-keyword { flex-basis: 100%; width: 100%; }
  .system-monitor-filter-actions { flex: 1 1 100%; }
}