.modal:has(.monitor-inspector) { padding: 16px; }
.modal:has(.monitor-inspector) .modal-card { width: calc(100vw - 32px); height: calc(100vh - 32px); max-height: none; }
.modal:has(.monitor-inspector) .modal-body { min-height: 0; padding: 0; }
.monitor-inspector { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 320px; background: #fff; }
.monitor-inspector > main { min-width: 0; padding: 18px 22px; }
.monitor-inspector .monitor-current-results { display: none; }
.monitor-inspector .monitor-results-chart { border: 0; padding: 8px 0 0; }
.monitor-inspector .monitor-results-chart h3 { font-size: 20px; }
.monitor-inspector .monitor-chart .sparkline { min-height: 420px; }
.monitor-inspector .monitor-chart-stats { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.monitor-inspector .monitor-chart-stats b { font-size: 11px; }
.monitor-inspector .monitor-chart-stats em { font-size: 15px; }
.monitor-inspector-side { min-width: 0; padding: 20px 18px; border-left: 1px solid #dfe5e8; background: #f7f9fa; }
.monitor-live-value { display: grid; gap: 5px; padding: 18px; border-radius: 9px; background: var(--monitor-accent); color: #fff; }
.monitor-live-value small { font-size: 12px; text-align: center; }
.monitor-live-value strong { font-size: 34px; line-height: 1.15; }
.monitor-live-value .badge { justify-self: start; border-color: rgba(255,255,255,.45); background: rgba(0,0,0,.16); color: #fff; }
.monitor-inspector-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 14px 0; }
.monitor-inspector-actions .button { min-height: 40px; justify-content: center; }
.monitor-inspector-side dl { display: grid; gap: 0; margin: 0; border: 1px solid #dfe5e8; border-radius: 8px; background: #fff; }
.monitor-inspector-side dl > div { display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 8px; padding: 10px 12px; border-top: 1px solid #edf0f2; }
.monitor-inspector-side dl > div:first-child { border-top: 0; }
.monitor-inspector-side dt { display: flex; align-items: center; gap: 6px; color: #687787; font-size: 10px; }
.monitor-inspector-side dt svg { width: 15px; }
.monitor-inspector-side dd { margin: 0; color: #293849; font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.monitor-limit-card { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 13px; border-radius: 8px; background: #e7ebee; }
.monitor-limit-card span { color: #647381; font-size: 10px; }
.monitor-limit-card strong { margin-left: auto; color: #263547; font-size: 15px; }
button svg, a.button svg, .icon-button svg { flex: 0 0 auto; shape-rendering: geometricPrecision; }

@media(max-width: 900px) {
  .modal:has(.monitor-inspector) { padding: 0; }
  .modal:has(.monitor-inspector) .modal-card { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .monitor-inspector { display: flex; flex-direction: column; }
  .monitor-inspector > main { padding: 14px; }
  .monitor-inspector .monitor-chart .sparkline { min-height: 280px; }
  .monitor-inspector-side { border-left: 0; border-top: 1px solid #dfe5e8; }
  .monitor-inspector .monitor-chart-stats { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
}