[data-window-type="monitor"] .retro-window { box-sizing: border-box; }
[data-window-type="monitor"] .title-bar { flex-shrink: 0; }
.retro-window.show-content .monitor-content { flex: 1; min-height: 0; height: auto; padding: 12px; overflow: auto; }
.system-monitor { color: #222; color-scheme: light; letter-spacing: .3px; }
.monitor-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.monitor-heading span { color: #444; }
.monitor-graphs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.monitor-graphs .monitor-graph { margin: 0; }
.system-monitor fieldset { min-width: 0; margin: 0 0 10px; padding: 8px; }
.system-monitor fieldset:last-child { margin-bottom: 0; }
.monitor-graph-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.monitor-graph output { font: bold 16px monospace; }
.monitor-graph-heading span, .monitor-graph-scale { color: #444; font-size: 10px; }
.monitor-graph svg { display: block; width: 100%; height: 72px; background-color: #001600; background-image: linear-gradient(#113b18 1px, transparent 1px), linear-gradient(90deg, #113b18 1px, transparent 1px); background-size: 10% 25%; box-shadow: inset 1px 1px #000, 1px 1px white; }
.monitor-graph path { stroke: #00ff54; stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; }
.monitor-graph-scale { display: flex; justify-content: space-between; margin-top: 4px; }
.monitor-status { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; margin-top: 10px; font-size: 10px; }
.monitor-connection::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; background: #808080; box-shadow: inset 1px 1px #444; }
[data-connection="online"] .monitor-connection::before { background: #00ff54; box-shadow: inset 1px 1px #168c38, 1px 1px white, 0 0 3px #00d943; }
[data-connection="offline"] .monitor-connection::before { background: #a86c18; }
[data-connection="offline"] .monitor-graph path { stroke: #729278; }
.system-monitor dl { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin: 8px 0; }
.system-monitor dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.system-monitor .disk-meter {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    height: 18px;
    padding: 3px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: inset 1px 1px grey, inset -1px -1px white, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf;
}
.system-monitor .disk-meter[hidden] { display: none; }
.system-monitor .disk-meter-fill {
    display: block;
    width: 0;
    height: 100%;
    background: #0000aa;
    box-shadow: inset 0 1px #6666dd, inset 0 -1px #000066;
}
@media (max-width: 600px) {
    .retro-window.show-content .monitor-content { padding: 8px; }
    .monitor-heading { margin-bottom: 10px; }
    .system-monitor dl { gap: 12px 8px; }
}

.monitor-average { display: flex; justify-content: space-between; gap: 4px; min-height: 18px; margin-bottom: 4px; color: #444; font-size: 10px; }
.monitor-average output { font: inherit; font-variant-numeric: tabular-nums; }

.disk-legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 10px; }
.disk-legend[hidden] { display: none; }
.disk-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 1px solid #808080; vertical-align: -1px; }
.disk-used::before { background: #0000aa; }
.disk-free::before { background: white; }