.monitor-page{padding-bottom:64px}.monitor-chart-card,.monitor-table-card{border-bottom:1px solid var(--line);padding:30px clamp(20px,4vw,56px)}.monitor-chart-card{background:var(--canvas)}.monitor-chart-card header,.monitor-table-card header{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.monitor-page small{color:var(--muted);font:9px var(--font-mono);letter-spacing:.08em}.monitor-page h2{margin:8px 0 0;font-size:19px;font-weight:500}.monitor-period-group{align-items:center;gap:10px;display:flex}.monitor-period-group>span,.monitor-range-note{color:var(--muted);font:10px var(--font-mono)}.monitor-periods{border:1px solid var(--line);display:flex}.monitor-periods button{border:0;border-left:1px solid var(--line);min-width:44px;height:34px;color:var(--muted);cursor:pointer;background:0 0}.monitor-periods button:first-child{border-left:0}.monitor-periods button:hover{color:var(--ink);background:#75574314}.monitor-periods button.is-active{background:var(--accent);color:var(--surface)}.monitor-range-note{text-align:right;margin-top:8px}.monitor-metrics{align-items:end;gap:38px;margin:20px 0;display:flex}.monitor-metrics div{gap:6px;display:grid}.monitor-metrics strong{font:500 26px var(--font-mono)}.monitor-metrics label{color:var(--muted);margin-left:auto;font-size:11px}.monitor-metrics input{accent-color:var(--accent)}.monitor-chart{border:1px solid var(--line);background:var(--surface);min-height:280px;position:relative}.monitor-chart svg{width:100%;height:280px;display:block;overflow:visible}.monitor-grid line{stroke:#75574329;stroke-width:1px}.monitor-grid text,.monitor-x-ticks text{fill:var(--muted);font:9px var(--font-mono)}.monitor-axis,.monitor-x-ticks line{stroke:var(--accent);stroke-width:1px}.monitor-chart polyline{fill:none;stroke:var(--accent);stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round}.monitor-points circle{fill:var(--surface);stroke:var(--accent);stroke-width:2.5px;cursor:pointer;transition:r .12s,fill .12s}.monitor-points circle:hover,.monitor-points circle:focus{fill:var(--canvas);outline:none}.monitor-guide{stroke:var(--accent);stroke-width:1px;stroke-dasharray:4 4;opacity:.55}.monitor-tooltip{z-index:2;border:1px solid var(--accent);background:var(--ink);min-width:128px;color:var(--surface);pointer-events:none;gap:3px;padding:9px 11px;display:grid;position:absolute;transform:translate(-50%,calc(-100% - 12px));box-shadow:0 8px 24px #11100f24}.monitor-tooltip time{font:9px var(--font-mono);opacity:.7}.monitor-tooltip strong{font:500 12px var(--font-mono)}.monitor-chart>p{text-align:center;color:var(--muted);font-size:12px;position:absolute;inset:126px 0}.monitor-table-card>header{margin-bottom:22px}.monitor-table-tools{align-items:center;gap:18px;display:flex}.monitor-table-tools>span{color:var(--muted);font:10px var(--font-mono);white-space:nowrap}.monitor-form{align-items:end;gap:12px;margin-bottom:20px;display:flex}.monitor-form label{color:var(--muted);gap:7px;font-size:11px;display:grid}.monitor-form input{border:1px solid var(--line);background:var(--canvas);height:42px;color:var(--ink);font:13px var(--font-sans);padding:0 10px}.monitor-cancel{height:44px;color:var(--muted);cursor:pointer;background:0 0;border:0}.monitor-table{border-top:1px solid var(--line)}.monitor-table-head,.monitor-row{border-bottom:1px solid var(--line);grid-template-columns:1fr 1fr 100px;align-items:center;gap:16px;min-height:52px;display:grid}.monitor-table-head{color:var(--muted);font:9px var(--font-mono)}.monitor-row time{font:11px var(--font-mono)}.monitor-row strong{font:13px var(--font-mono)}.monitor-row>span{gap:8px;display:flex}.monitor-row button{border:1px solid var(--line);width:32px;height:32px;color:var(--muted);cursor:pointer;background:0 0;place-items:center;display:grid}.monitor-row button:hover{color:var(--accent);border-color:var(--accent)}.monitor-empty{color:var(--muted);text-align:center;border-bottom:1px solid var(--line);margin:0;padding:28px 0;font-size:12px}@media (max-width:760px){.monitor-chart-card header,.monitor-table-card header{display:grid}.monitor-period-group{justify-content:space-between}.monitor-range-note{text-align:left}.monitor-table-tools{gap:10px;display:grid}.monitor-metrics{flex-wrap:wrap;gap:18px}.monitor-metrics label{width:100%;margin-left:0}.monitor-chart{margin-inline:-8px}.monitor-chart svg{height:250px}.monitor-form{flex-wrap:wrap;align-items:stretch}.monitor-form label{flex:1}.monitor-form .app-link{width:100%}.monitor-table-head,.monitor-row{grid-template-columns:1fr 1fr 80px}}@media (max-width:420px){.monitor-period-group{display:grid}.monitor-periods button{min-width:40px}.monitor-metrics strong{font-size:22px}.monitor-tooltip{transform:translate(-50%,calc(-100% - 8px))}}.monitor-chart{background:0 0;border:0;width:100%;min-width:0;margin-inline:0}.monitor-chart svg{width:100%;height:280px}.monitor-grid line{stroke:var(--line);opacity:.55}.monitor-grid text,.monitor-x-ticks text{font-size:10px}.monitor-points circle{fill:var(--canvas)}.monitor-metrics strong,.monitor-row strong{font-variant-numeric:tabular-nums}
