.module-monitor-main { width: min(1480px, calc(100% - 48px)); }
.module-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 8px 0 34px; }
.module-hero p { max-width: 780px; margin: 15px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.monitor-refresh { flex: none; padding: 11px 18px; border: 1px solid var(--line-bright); border-radius: 5px; color: var(--cyan); background: rgba(56,217,203,.05); cursor: pointer; font: 10px var(--mono); }
.monitor-refresh:hover { color: var(--bg); background: var(--cyan); }
.monitor-refresh:disabled { cursor: wait; opacity: .55; }

.module-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.module-summary article { min-width: 0; padding: 20px 23px; background: rgba(10,24,22,.94); position: relative; }
.module-summary article::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--cyan); }
.module-summary .summary-online::after { background: var(--green); }
.module-summary .summary-degraded::after { background: var(--amber); }
.module-summary .summary-offline::after { background: var(--red); }
.module-summary span { display: block; color: var(--muted); font-size: 10px; }
.module-summary strong { display: block; margin: 13px 0 5px; font: 500 30px var(--mono); }
.module-summary small { color: #58736d; font: 8px var(--mono); letter-spacing: .12em; }

.monitor-section { margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); backdrop-filter: blur(18px); }
.monitor-section-heading { min-height: 62px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.monitor-section-heading > div { display: flex; align-items: center; gap: 11px; }
.monitor-section-heading > span { color: var(--muted); font: 9px var(--mono); letter-spacing: .07em; }
.service-monitor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.service-monitor-card { min-width: 0; padding: 23px; background: rgba(10,24,22,.93); }
.service-monitor-card.offline { box-shadow: inset 3px 0 0 var(--red); }
.service-monitor-card.degraded { box-shadow: inset 3px 0 0 var(--amber); }
.service-monitor-card.online { box-shadow: inset 3px 0 0 var(--green); }
.service-monitor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.service-monitor-head h3 { margin: 0; font-size: 16px; font-weight: 580; }
.service-monitor-head code { display: block; margin-top: 7px; color: #58736d; font: 8px var(--mono); overflow-wrap: anywhere; }
.service-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid currentColor; border-radius: 999px; color: var(--green); font: 8px var(--mono); letter-spacing: .08em; }
.service-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.degraded .service-badge { color: var(--amber); }
.offline .service-badge { color: var(--red); }
.service-message { min-height: 21px; margin: 19px 0 16px; color: var(--muted); font-size: 11px; }
.monitor-error { white-space: pre-wrap; color: #ffc0c4; overflow-wrap: anywhere; }
.service-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; background: var(--line); }
.service-facts div { min-width: 0; padding: 11px 12px; background: #0c1c1a; }
.service-facts dt { color: #58736d; font: 8px var(--mono); }
.service-facts dd { margin: 7px 0 0; color: var(--text); font: 9px var(--mono); overflow-wrap: anywhere; }
.subsystem-title { margin: 18px 0 9px; color: var(--muted); font: 8px var(--mono); letter-spacing: .1em; }
.subsystem-list { display: flex; flex-wrap: wrap; gap: 7px; }
.subsystem-chip { padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--green); background: rgba(117,236,145,.04); font: 8px var(--mono); }
.subsystem-chip.error, .subsystem-chip.stopped { color: var(--red); background: rgba(255,110,118,.05); }
.subsystem-chip.syncing, .subsystem-chip.starting { color: var(--cyan); background: rgba(56,217,203,.05); }
.metric-line { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: #69847e; font: 8px/1.6 var(--mono); }
.metric-line b { color: var(--text); font-weight: 500; }

.dependency-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.dependency-grid article { padding: 20px; background: rgba(10,24,22,.93); }
.dependency-grid span { display: block; color: var(--muted); font-size: 9px; }
.dependency-grid strong { display: block; margin-top: 12px; color: var(--amber); font: 10px var(--mono); }
.dependency-grid article.ok strong { color: var(--green); }
.dependency-grid article.error strong { color: var(--red); }

.transition-list { max-height: 330px; overflow: auto; }
.transition-row { display: grid; grid-template-columns: 150px 170px 110px 1fr; gap: 16px; align-items: center; padding: 13px 20px; border-bottom: 1px solid rgba(161,209,197,.08); font-size: 10px; }
.transition-row time, .transition-row code { color: var(--muted); font: 9px var(--mono); }
.transition-row b { color: var(--cyan); font: 9px var(--mono); }
.transition-row b.error, .transition-row b.offline { color: var(--red); }
.transition-row b.degraded { color: var(--amber); }
.monitor-empty { grid-column: 1 / -1; padding: 36px 20px; color: var(--muted); text-align: center; font: 10px var(--mono); background: rgba(10,24,22,.93); }

@media (max-width: 980px) {
  .service-monitor-grid { grid-template-columns: 1fr; }
  .dependency-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .module-monitor-main { width: min(100% - 24px, 1480px); }
  .module-hero { align-items: flex-start; flex-direction: column; }
  .module-summary { grid-template-columns: repeat(2, 1fr); }
  .service-facts { grid-template-columns: 1fr; }
  .dependency-grid { grid-template-columns: 1fr; }
  .transition-row { grid-template-columns: 1fr 1fr; }
  .transition-row span { grid-column: 1 / -1; }
}