.monitor-content{color:var(--ink);font-size:12px;line-height:1.55;min-width:0;container:monitor / inline-size}
.monitor-layout{max-width:1280px;margin:0 auto;padding:0 0 8px}
.monitor-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.monitor-heading h2{margin:0;font-size:22px;font-weight:650;letter-spacing:-.035em}.monitor-heading p{margin:3px 0 0;color:var(--muted);font-size:10px}
.monitor-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}
.monitor-status{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;white-space:nowrap}
.monitor-status:before{content:"";width:6px;height:6px;border-radius:50%;background:#8190ad;flex-shrink:0}
.monitor-status.is-ready:before{background:#42ae92}.monitor-status.is-loading:before{background:#7c8ee7}.monitor-status.is-error:before,.monitor-status.is-unauthorized:before{background:#d98a67}
.monitor-refresh{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.monitor-refresh .icon{width:18px;height:18px}.monitor-refresh:hover:not(:disabled){color:var(--accent);background:var(--accent-soft)}.monitor-refresh:disabled{opacity:.45;cursor:default}
.monitor-refresh[aria-busy=true] .icon{animation:monitor-refresh-spin 1s linear infinite}
@keyframes monitor-refresh-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.monitor-refresh[aria-busy=true] .icon{animation:none}}
@media (pointer:coarse){.monitor-refresh{width:44px;height:44px}}
.monitor-error{margin:0 0 14px;padding:10px 12px;border:1px solid color-mix(in srgb,#d98a67 30%,var(--line));border-radius:10px;background:color-mix(in srgb,#d98a67 7%,var(--surface));color:var(--ink);overflow-wrap:anywhere}
.monitor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.monitor-card{padding:15px 16px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--surface) 86%,transparent);min-width:0}
.monitor-main{background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%),color-mix(in srgb,var(--surface) 90%,transparent)}
.monitor-card-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}.monitor-card-title h3{margin:0;font-size:12px;font-weight:600}.monitor-card-title>span{font-size:9px;color:var(--muted)}
.monitor-value{display:block;font-size:29px;font-weight:550;line-height:1.3;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.monitor-chart{display:block;width:100%;height:42px;overflow:visible;margin:9px 0;color:#7d83e8}.monitor-chart.is-memory,.monitor-chart.is-receive{color:#39a99b}.monitor-chart.is-send{color:#8c77da}
.monitor-grid-line{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 5}.monitor-trend{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.monitor-chart-dot{fill:currentColor}
.monitor-meter{height:6px;border-radius:5px;overflow:hidden;background:var(--accent-soft);margin:26px 0 27px}.monitor-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6a91e7,#8d7fe0)}.monitor-meter.is-memory i{background:linear-gradient(90deg,#4a9da9,#58b5a6)}.monitor-meter.is-unavailable{background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 8px)}
.monitor-note{margin:0;color:var(--muted);font-size:10px;overflow-wrap:anywhere}.monitor-subnote{display:block;color:var(--muted);font-size:9px;margin-top:3px;overflow-wrap:anywhere}
.monitor-details{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;margin-top:12px}
.monitor-network-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:13px}.monitor-network-label{color:var(--muted);font-size:10px}.monitor-network-grid strong{display:block;font-size:23px;font-weight:550;font-variant-numeric:tabular-nums;line-height:1.5;overflow-wrap:anywhere}.monitor-network-grid strong small{font-size:10px;font-weight:400;margin-left:4px;color:var(--muted)}.monitor-network .monitor-chart{height:48px;margin:8px 0 12px}
.monitor-runtime{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:17px 0 0;padding-top:13px;border-top:1px solid var(--line)}.monitor-runtime>div,.monitor-system-grid>div{min-width:0}.monitor-runtime dt,.monitor-system-grid dt{font-size:9px;color:var(--muted);margin-bottom:4px}.monitor-runtime dd,.monitor-system-grid dd{margin:0;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.monitor-system-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:12px 0 0}.monitor-system-wide{grid-column:1/-1}.monitor-system-grid dd{line-height:1.45}
.monitor-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:9px;padding:12px 2px 0}
:root[data-theme=dark] .monitor-chart{color:#9a9df6}:root[data-theme=dark] .monitor-chart.is-memory,:root[data-theme=dark] .monitor-chart.is-receive{color:#65cbb9}:root[data-theme=dark] .monitor-chart.is-send{color:#baa1f5}
@container monitor (max-width:760px){.monitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-card{padding:14px}.monitor-details{grid-template-columns:minmax(0,1fr)}.monitor-system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-system-wide{grid-column:auto}.monitor-heading h2{font-size:21px}.monitor-network .monitor-chart{height:42px}.monitor-runtime{margin-top:13px}}
@container monitor (max-width:420px){.monitor-heading{align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:13px}.monitor-controls{width:100%;justify-content:space-between}.monitor-grid,.monitor-details{gap:9px}.monitor-card{padding:12px}.monitor-value{font-size:27px}.monitor-card-title{gap:5px}.monitor-card-title>span{font-size:9px}.monitor-network-grid{gap:16px}.monitor-network-grid strong{font-size:21px}.monitor-runtime{gap:8px}.monitor-runtime dd{font-size:10px}.monitor-system-grid{gap:11px 14px}}
@container monitor (max-width:280px){.monitor-grid{grid-template-columns:minmax(0,1fr)}.monitor-system-grid,.monitor-runtime{grid-template-columns:minmax(0,1fr)}.monitor-system-wide{grid-column:auto}}

.monitor-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px;padding-bottom:6px}
.monitor-tabs button,.monitor-analytics-metrics button,.monitor-analytics-period button{border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;cursor:pointer;min-height:36px;padding:7px 12px}
.monitor-tabs button[aria-selected=true],.monitor-analytics-metrics button[aria-pressed=true],.monitor-analytics-period button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.monitor-tabs button:hover,.monitor-analytics-metrics button:hover,.monitor-analytics-period button:hover{color:var(--ink)}
.monitor-content button:focus-visible,.monitor-analytics-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.monitor-refresh[aria-disabled=true]{opacity:.45;cursor:default}
.monitor-analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.monitor-analytics-card .monitor-value{font-size:30px;overflow-wrap:anywhere}
.monitor-analytics-card .monitor-note{margin-top:6px}
.monitor-analytics-history{margin-top:12px}
.monitor-analytics-history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.monitor-analytics-metrics,.monitor-analytics-period{display:flex;gap:2px;min-width:0}
.monitor-analytics-metrics button,.monitor-analytics-period button{font-size:11px;padding:7px 10px;white-space:nowrap}
.monitor-analytics-period{border:1px solid var(--line);border-radius:9px;padding:2px}
.monitor-analytics-period button{min-height:28px;padding:4px 10px;border-radius:6px}
.monitor-analytics-plot{display:flex;gap:10px;min-width:0;height:140px;color:var(--accent)}
.monitor-analytics-axis{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:var(--muted);font-size:10px;min-width:24px;padding:5px 0;font-variant-numeric:tabular-nums}
.monitor-analytics-plot svg{display:block;flex:1 1 0;width:0;height:100%;min-width:0;overflow:visible}
.monitor-analytics-plot circle{fill:currentColor}
.monitor-analytics-dates{display:flex;justify-content:space-between;margin:5px 0 0 34px;font-size:10px;color:var(--muted)}
.monitor-analytics-empty{margin:0;padding:45px 8px;text-align:center;color:var(--muted)}
.monitor-analytics-details{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}
.monitor-analytics-details summary{cursor:pointer;min-height:28px;line-height:28px;color:var(--muted);font-size:11px}
.monitor-analytics-details table{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums;table-layout:fixed;margin-top:5px}
.monitor-analytics-details th,.monitor-analytics-details td{text-align:right;padding:7px 4px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.monitor-analytics-details th:first-child{text-align:left}.monitor-analytics-details th{font-weight:500}.monitor-analytics-details thead th{color:var(--muted)}
.monitor-analytics-warning{margin:0 0 10px;color:var(--muted);font-size:11px}
@container monitor (max-width:760px){.monitor-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container monitor (max-width:420px){.monitor-tabs{margin-bottom:12px}.monitor-tabs button{padding:7px 10px}.monitor-analytics-grid{gap:9px}.monitor-analytics-card .monitor-value{font-size:27px}.monitor-analytics-history-heading{gap:8px}.monitor-analytics-metrics button{font-size:10px;padding:6px 8px}.monitor-analytics-plot{height:120px}.monitor-analytics-history{margin-top:9px}}
@container monitor (max-width:280px){.monitor-analytics-grid{grid-template-columns:minmax(0,1fr)}}
@media (pointer:coarse){.monitor-tabs button,.monitor-analytics-metrics button,.monitor-analytics-period button,.monitor-analytics-details summary{min-height:44px}.monitor-analytics-details summary{line-height:44px}}