/* Isolated monitoring surface; uses the existing motherboard theme tokens. */
.monitor-page { display:flex; flex-direction:column; gap:var(--page-gap); min-width:0; }
.monitor-page .panel { margin:0; }
.monitor-circuit { background:var(--surface); overflow:hidden; }
.monitor-signal { color:var(--success); display:flex; align-items:center; gap:8px; font-size:var(--fs-14); white-space:nowrap; flex-shrink:0; }
.monitor-signal svg { width:18px; height:18px; flex-shrink:0; }
.monitor-topology { display:grid; grid-template-columns:minmax(0,1fr) 48px minmax(0,1.2fr) 48px minmax(0,1fr); align-items:center; padding:28px; background-image:radial-gradient(var(--line) 1px,transparent 1px); background-size:18px 18px; }
.monitor-node { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px 12px; text-align:center; border:1px solid var(--line); background:var(--surface-3); border-radius:var(--radius); min-width:0; }
.monitor-node > span { font-size:var(--fs-17); line-height:1.5; }
.monitor-node strong { font:700 44px/1.1 var(--font-display); color:var(--accent); }
.monitor-node small { color:var(--ink-2); font-size:var(--fs-14); }
.monitor-origin,.monitor-total { min-height:185px; }
.monitor-total { border-color:var(--accent); background:var(--accent-soft); }
.monitor-total strong { font-size:56px; }
.monitor-branches { display:grid; gap:16px; position:relative; }
.monitor-connector { color:var(--accent); font-size:30px; text-align:center; border-top:1px solid var(--accent); height:0; position:relative; }
.monitor-connector span { position:absolute; inset-inline:0; top:-25px; }
.monitor-mix { display:flex; flex-wrap:wrap; justify-content:space-around; gap:16px; padding:18px; border-top:1px solid var(--line); color:var(--ink-2); }
.monitor-mix b { color:var(--accent); font-size:var(--fs-20); margin-inline-start:12px; }
.monitor-secondary { display:grid; grid-template-columns:1fr 1fr; gap:var(--page-gap); }
.monitor-current { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.monitor-current > * { display:flex; flex-direction:column; align-items:center; gap:4px; padding:20px 10px; text-align:center; position:relative; }
.monitor-current > * + * { border-inline-start:1px solid var(--line); }
.monitor-current strong { font-size:var(--fs-30); font-variant-numeric:tabular-nums; color:var(--accent); }
.monitor-current span { color:var(--ink-2); }
.monitor-current svg { width:16px; height:16px; position:absolute; inset-inline-end:5px; top:16px; }
.monitor-flow { grid-template-columns:repeat(4,minmax(0,1fr)); }
.monitor-trend { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:10px; padding:24px 20px; }
.monitor-trend-item { display:flex; align-items:center; flex-direction:column; gap:10px; text-align:center; min-width:0; }
.monitor-trend-item > span:last-child { color:var(--ink-2); font-size:var(--fs-13); }
.monitor-trend-track { height:110px; width:20px; background:var(--line-2); display:flex; align-items:flex-end; border-radius:2px; overflow:hidden; }
.monitor-trend-track i { display:block; width:100%; background:var(--accent); }
.monitor-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; color:var(--ink-2); font-size:var(--fs-14); }
.monitor-foot > span { display:flex; gap:8px; align-items:center; }
.monitor-foot svg { width:18px; height:18px; flex-shrink:0; }
@media(max-width:1000px) { .monitor-secondary { grid-template-columns:1fr; } .monitor-topology { padding:20px; grid-template-columns:minmax(0,1fr) 24px minmax(0,1.3fr) 24px minmax(0,1fr); } }
@media(max-width:640px) {
 .monitor-topology { grid-template-columns:1fr; gap:12px; padding:16px; }
 .monitor-origin,.monitor-total { min-height:0; }
 .monitor-connector { width:0; height:20px; border:0; border-inline-start:1px solid var(--accent); margin:auto; }
 .monitor-connector span { display:none; }
 .monitor-branches { grid-template-columns:1fr 1fr; gap:12px; }
 .monitor-node { padding:16px 10px; }
 .monitor-node > span { font-size:18px; }
 .monitor-node strong { font-size:38px; }
 .monitor-node small { font-size:16px; }
 .monitor-origin,.monitor-total { display:grid; grid-template-columns:1fr auto; text-align:start; }
 .monitor-origin strong,.monitor-total strong { grid-column:2; grid-row:1/3; }
 .monitor-mix { flex-direction:column; gap:8px; }
 .monitor-mix span { display:flex; justify-content:space-between; }
 .monitor-current > * { padding:16px 6px; }
 .monitor-current span { font-size:16px; }
 .monitor-flow { grid-template-columns:1fr 1fr; }
 .monitor-flow > :nth-child(3) { border-inline-start:0; }
 .monitor-flow > :nth-child(n+3) { border-top:1px solid var(--line); }
 .monitor-trend { grid-template-columns:repeat(6,minmax(0,1fr)); row-gap:24px; padding:16px 12px; }
}
@media print { .monitor-page .toolbar { display:none; } .monitor-topology { background-image:none; } }