/* 系统监控 —— 由 index.html 拆分而来，加载顺序见 index.html */
/* ─── MONITOR PAGE ─── */
.monitor-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:14px;
  padding:16px 18px; margin-bottom:16px;
}
.monitor-toolbar-main { min-width:0; }
.monitor-toolbar-title { font-size:16px; font-weight:800; }
.monitor-toolbar-sub { color:var(--text2); font-size:12px; margin-top:5px; }
.monitor-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.monitor-switch {
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); border-radius:999px; padding:6px 10px; cursor:pointer;
  color:var(--text2); font-size:12px; font-weight:700;
}
.monitor-switch input { display:none; }
.monitor-switch-knob {
  width:36px; height:20px; border-radius:999px; background:rgba(255,255,255,.14);
  position:relative; transition:.18s ease;
}
.monitor-switch-knob::after {
  content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%;
  background:#fff; transition:.18s ease;
}
.monitor-switch input:checked + .monitor-switch-knob { background:rgba(45,216,122,.55); }
.monitor-switch input:checked + .monitor-switch-knob::after { left:19px; }
.monitor-disabled {
  background:var(--card-bg); border:1px dashed rgba(255,255,255,.16); border-radius:14px;
  padding:42px; text-align:center; color:var(--text2); font-weight:700;
}
.monitor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.monitor-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}
.monitor-title { font-size: 12px; color: var(--text2); margin-bottom: 10px; font-weight: 600; }
.monitor-value { font-size: 32px; font-weight: 700; line-height: 1; }
.monitor-unit { font-size: 14px; color: var(--text2); }
.progress-bar {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  margin-top: 10px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 1s ease;
}
.progress-fill.green { background: var(--green); }
.progress-fill.rose { background: var(--rose); }
.progress-fill.gold { background: var(--gold); }
.progress-fill.blue { background: var(--blue); }
.monitor-meta { font-size: 11px; color: var(--text2); margin-top: 6px; }
.monitor-table {
  width:100%; border-collapse:collapse; font-size:12px;
}
.monitor-table th, .monitor-table td {
  padding:9px 8px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left;
}
.monitor-table th { color:var(--text2); font-weight:700; }
.monitor-table td { color:var(--text); }
.monitor-log-muted { color:var(--text2); }

.server-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.server-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}
.server-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.server-name { font-size: 13px; font-weight: 600; }
.server-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.status-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.warn { background: var(--orange); box-shadow: 0 0 6px var(--orange); }

.server-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
}
.server-metric .key { color: var(--text2); }
.server-metric .val { font-weight: 600; }

.live-log-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}
.live-log-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 1.5s ease infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; }
  50% { opacity: .3; }
}
.live-title { font-size: 13px; font-weight: 600; }
.log-terminal {
  background: #0A0B10;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  height: 200px;
  overflow-y: auto;
  line-height: 1.7;
}
.log-line .ts { color: #4B5563; }
.log-line .lvl-info { color: var(--blue); }
.log-line .lvl-warn { color: var(--orange); }
.log-line .lvl-error { color: var(--red); }
.log-line .msg { color: #9CA3AF; }