.monitor-trends { margin: 24px 0; min-width: 0; }
.monitor-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 16px; }
.monitor-toolbar h2 { font-size: 17px; margin: 0 0 5px; }
.monitor-toolbar p, .monitor-note { color: #a5b4ca; font-size: 12px; line-height: 1.6; margin: 0; }
.monitor-actions { display: flex; align-items: center; gap: 14px; }
.monitor-actions label { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #b9c8da; }
.monitor-actions select { background: #111d30; color: #e4edf9; border: 1px solid #34445c; border-radius: 6px; padding: 8px; }
.monitor-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.monitor-chart { padding: 20px; min-width: 0; overflow: hidden; }
.monitor-chart h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.monitor-chart svg { width: 100%; display: block; margin: 12px 0 8px; overflow: visible; }
.monitor-chart svg text { fill: #94a6bf; font-size: 11px; font-family: inherit; }
.monitor-chart svg .monitor-empty { fill: #c2cee1; font-size: 13px; }
.monitor-gridline { stroke: #2a3a50; stroke-width: 1; }
.monitor-threshold { stroke: #f59e0b; stroke-dasharray: 5 5; opacity: .65; }
.monitor-legend { display: flex; flex-wrap: wrap; gap: 8px 15px; font-size: 11px; font-variant-numeric: tabular-nums; min-height: 17px; }
.monitor-series::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.monitor-series-0::before { background: #60a5fa; }
.monitor-series-1::before { background: #34d399; }
.monitor-series-2::before { background: #fbbf24; }
.monitor-chart svg:focus-visible, .monitor-actions select:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
@media (max-width: 1150px) { .monitor-chart-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .monitor-toolbar { align-items: flex-start; flex-direction: column; } .monitor-chart { padding: 14px; } }