/* 监控页专用样式：复用 design.css 的设计 token，保持同一套暗色财务工具视觉 */

.mon-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-6); flex-wrap: wrap; margin: var(--space-8) 0 var(--space-6);
}
.mon-head h1 { font-size: clamp(24px, 3vw, 34px); margin: var(--space-3) 0 var(--space-2); }
.mon-copy { color: var(--muted); font-size: 14px; margin: 0; max-width: 62ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--blue); font-size: 13px; font-weight: 600; letter-spacing: .3px;
}
.mon-meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.mon-stamp { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: 13px; }
.mon-stamp b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--high);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .14); flex-shrink: 0;
  animation: mon-pulse 2.4s ease-in-out infinite;
}
.dot.stale { background: var(--low); box-shadow: 0 0 0 4px rgba(251, 191, 36, .16); animation: none; }
@keyframes mon-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.mon-status { color: var(--muted); font-size: 13px; margin: 0 0 var(--space-4); }
.mon-status.error { color: var(--warning); }
.mon-banner {
  margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-6);
  background: var(--warning-bg); border: 1px solid var(--warning-border);
  border-left: 4px solid var(--warning); border-radius: var(--radius-control);
  color: var(--warning-ink); font-size: 14px;
}

.mon-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); }
.mon-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-section);
  padding: var(--space-6); position: relative; overflow: hidden; min-width: 0;
}
.mon-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); opacity: .75; }
.mon-card .k { color: var(--muted); font-size: 13px; margin-bottom: var(--space-3); }
.mon-card .v { font-size: 26px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.mon-card .v.red { color: var(--warning); }
.mon-card .s { color: var(--muted); font-size: 12px; margin-top: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mon-panel { margin-bottom: var(--space-6); }
.panel-title { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-6) var(--space-6) var(--space-3); }
.panel-title h2 { font-size: 17px; margin: 0; }
.mon-tag {
  font-size: 12px; padding: 3px 10px; border-radius: 20px; color: var(--blue);
  background: var(--blue-soft); border: 1px solid var(--line);
}
.mon-sum { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.mon-note { color: var(--muted); font-size: 12.5px; margin: 0; padding: 0 var(--space-6) var(--space-4); }

.mon-sub { padding: 0 var(--space-6); }
.mon-sub:last-of-type { padding-bottom: var(--space-6); }
.mon-sub h3 { font-size: 14px; color: var(--blue); margin: var(--space-6) 0 var(--space-3); font-weight: 600; }

.table-scroll { overflow-x: auto; padding: 0 var(--space-6) var(--space-6); }
.mon-sub .table-scroll { padding: 0; }
.mon-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.mon-table th, .mon-table td {
  padding: 10px 12px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: 13.5px;
  border-top: 1px solid var(--line);
}
.mon-table th {
  color: var(--muted); font-weight: 600; font-size: 12.5px;
  background: rgba(255, 255, 255, .02); border-top: none;
}
.mon-table th:first-child, .mon-table td:first-child,
.mon-table th:nth-child(2), .mon-table td:nth-child(2) { text-align: left; }
.mon-table tbody tr:hover { background: var(--blue-soft); }
.mon-table .code { color: var(--muted); font-size: 12.5px; }
.mon-table td.name { white-space: normal; min-width: 220px; }

.pill { display: inline-block; min-width: 62px; padding: 2px 9px; border-radius: 7px; font-size: 12px; font-weight: 700; text-align: center; }
.pill.danger { color: var(--warning); background: var(--warning-bg); border: 1px solid var(--warning-border); }
.pill.warning { color: var(--low); background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .4); }
.pill.normal { color: var(--high); background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .4); }

.star { color: var(--low); margin-left: 6px; font-size: 12px; }

.mon-list { margin: 0; padding: var(--space-3) var(--space-6) var(--space-6) calc(var(--space-6) + 18px); color: var(--muted); font-size: 13px; line-height: 1.9; }
.mon-list b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .mon-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mon-cards { grid-template-columns: 1fr; }
  .mon-head { align-items: flex-start; }
  .mon-sum { margin-left: 0; }
}