#monitor-page { width:100%; max-width:1440px; margin:0 auto; padding:28px; gap:20px; overflow-y:auto; }
#monitor-page > * { flex-shrink:0; }
.monitor-head,.monitor-panel-head,.monitor-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.monitor-head h2 { font-size:28px; letter-spacing:-.8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.monitor-head p,.monitor-panel p,.monitor-subtitle { color:var(--text2); font-size:13px; line-height:1.7; }
.monitor-eyebrow { color:var(--accent)!important; font-family:var(--mono); letter-spacing:1.7px; font-size:10px!important; margin-bottom:8px; }
.monitor-pill { display:inline-block; padding:4px 8px; border:1px solid var(--accent-line); color:var(--accent); background:var(--accent-soft); border-radius:5px; font:10px var(--mono); letter-spacing:.3px; white-space:nowrap; }
#monitor-status { font:11px var(--mono); color:var(--text2); }
.monitor-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.monitor-panel,.monitor-metric { padding:22px; border:1px solid var(--border2); background:var(--surface1); border-radius:12px; min-width:0; }
.monitor-metric-label { color:var(--text2); font-size:12px; display:flex; align-items:center; justify-content:space-between; }
.monitor-metric-value { font:32px var(--mono); letter-spacing:-1.5px; margin:14px 0 10px; }
.monitor-metric-note { color:var(--text-dim); font-size:11px; line-height:1.6; }
.monitor-track { margin-top:13px; height:5px; background:var(--surface3); border-radius:4px; overflow:hidden; }
.monitor-track i { display:block; height:100%; background:var(--accent); }
.monitor-main-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:20px; }
.monitor-panel h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
.monitor-panel-head { margin-bottom:18px; align-items:flex-start; }
.monitor-range { display:flex; align-items:center; gap:8px; color:var(--text2); font-size:12px; white-space:nowrap; }
#monitor-page select,#monitor-page input { background:var(--bg); color:var(--text); border:1px solid var(--border2); border-radius:6px; padding:9px 10px; min-width:0; font-size:13px; }
#monitor-page input:focus,#monitor-page select:focus { outline:2px solid var(--accent-line); outline-offset:2px; }
.monitor-chart { min-height:200px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:13px; }
.monitor-chart svg { width:100%; height:auto; display:block; overflow:visible; }
.monitor-chart text { font:10px var(--mono); fill:var(--text-dim); }
.monitor-chart-legend { display:flex; flex-wrap:wrap; gap:16px; font:11px var(--mono); margin-top:14px; }
.monitor-chart-legend > :last-child { margin-left:auto; color:var(--text-dim); }
.monitor-cpu-dot { color:var(--accent); }.monitor-ram-dot { color:#79a8ff; }
.monitor-details { margin-top:16px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px 18px; font-size:12px; }
.monitor-details dt { color:var(--text-dim); }.monitor-details dd { text-align:right; overflow-wrap:anywhere; }
.monitor-disk { display:grid; grid-template-columns:minmax(130px,1fr) minmax(100px,2fr) auto; gap:24px; align-items:center; padding:14px 0; border-top:1px solid var(--border); font-size:13px; }
.monitor-disk small { display:block; color:var(--text-dim); font-size:11px; margin-top:5px; }
.monitor-disk .monitor-track { margin:0; }
.monitor-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0; }
.monitor-inputs label,.monitor-settings > label { display:flex; flex-direction:column; gap:7px; font-size:12px; color:var(--text2); }
.monitor-settings { margin-top:16px; }.monitor-settings button { width:100%; margin-top:2px; }
.monitor-plan { margin:12px 0; }
.monitor-table-wrap { overflow-x:auto; }
.monitor-table { width:100%; border-collapse:collapse; font-size:12px; }
.monitor-table th { color:var(--text-dim); font-weight:400; text-align:left; white-space:nowrap; }
.monitor-table td,.monitor-table th { border-bottom:1px solid var(--border); padding:12px 10px; vertical-align:top; }
.monitor-table td:first-child,.monitor-table th:first-child { padding-left:0; }
.monitor-table td { overflow-wrap:anywhere; }.monitor-table .mono { font-family:var(--mono); white-space:nowrap; }
.monitor-total { display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--accent-soft); border:1px solid var(--accent-line); padding:16px; border-radius:8px; margin-top:16px; font-size:13px; }
.monitor-total strong { font:22px var(--mono); color:var(--accent); }
.monitor-footnote { font-size:11px!important; color:var(--text-dim)!important; line-height:1.8!important; margin-top:12px; }
.monitor-storage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:16px; }
.monitor-storage-grid strong { font-family:var(--mono); font-weight:400; }
.monitor-banner { display:flex; gap:12px; align-items:center; padding:14px 18px; border-radius:8px; font-size:13px; line-height:1.7; margin-bottom:10px; border:1px solid var(--accent-line); background:var(--accent-soft); }
.monitor-banner:last-child { margin-bottom:0; }
.monitor-banner.warning { color:var(--warn); border-color:#d9a44155; background:#d9a4410c; }
.monitor-banner.critical,.monitor-error { color:var(--danger); border-color:#e0524d55; background:#e0524d0c; }
.monitor-error { padding:14px; border:1px solid; border-radius:8px; font-size:13px; }
.monitor-level { display:inline-block; padding:3px 7px; border-radius:4px; background:var(--accent-dim); color:var(--accent); font:10px var(--mono); }
.monitor-level.warning,.monitor-level.running { color:var(--warn); background:#d9a44115; }
.monitor-level.critical,.monitor-level.failed,.monitor-level.exited,.monitor-level.unhealthy { color:var(--danger); background:#e0524d15; }
.monitor-empty { padding:26px 0; color:var(--text-dim); font-size:13px; }
.monitor-guide { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:16px; }
.monitor-guide h4 { font-size:13px; margin-bottom:8px; }.monitor-guide pre { padding:14px; margin-top:10px; border:1px solid var(--border); background:var(--bg); border-radius:8px; overflow:auto; color:var(--text2); font:11px/1.8 var(--mono); white-space:pre; }
@media(max-width:1050px) { .monitor-main-grid { grid-template-columns:1fr; }.monitor-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { #monitor-page { padding:16px; gap:14px; }.monitor-head { align-items:flex-start; flex-direction:column; }.monitor-head h2 { font-size:24px; }.monitor-panel,.monitor-metric { padding:16px; }.monitor-metric-value { font-size:26px; }.monitor-storage-grid,.monitor-guide { grid-template-columns:1fr; }.monitor-panel-head { flex-wrap:wrap; }.monitor-disk { grid-template-columns:1fr auto; gap:12px; }.monitor-disk > :nth-child(2) { grid-column:1/-1; grid-row:2; }.monitor-actions { width:100%; }.monitor-inputs { gap:10px; }.monitor-total strong { font-size:18px; } }
/* Resource explorer */
.monitor-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:12px 16px; background:linear-gradient(100deg,#15221e88,var(--surface1)); border:1px solid var(--border2); border-radius:10px; }
.monitor-toolbar > .monitor-range { margin-left:auto; }
.monitor-presets { display:flex; gap:4px; flex-wrap:wrap; }
.monitor-presets button,.monitor-section-nav button { background:transparent; border:1px solid transparent; color:var(--text2); border-radius:6px; padding:8px 13px; font:11px var(--mono); cursor:pointer; }
.monitor-presets button:hover,.monitor-section-nav button:hover { background:var(--surface2); color:var(--text); }
.monitor-presets button.selected { color:var(--accent); background:var(--accent-dim); border-color:var(--accent-line); }
.monitor-section-nav { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.monitor-section-nav button { padding:6px 10px; }
#monitor-range-note { font:10px var(--mono); color:var(--text-dim); margin-left:auto; }
.monitor-custom-range { display:flex; flex-wrap:wrap; gap:12px; align-items:end; width:100%; padding-top:10px; border-top:1px solid var(--border); }
.monitor-custom-range[hidden] { display:none; }
.monitor-custom-range label { display:flex; flex-direction:column; gap:5px; color:var(--text2); font-size:12px; }
#monitor-docker-section,#monitor-cron-section,#monitor-retention-section,#monitor-overview { scroll-margin-top:18px; }
.monitor-docker-section { background:linear-gradient(155deg,#0f1b1788,var(--surface1) 50%); border-color:var(--accent-line); }
.monitor-docker-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.monitor-docker-summary .monitor-metric { padding:16px; background:var(--bg-soft); }
.monitor-docker-summary .monitor-metric-value { font-size:25px; }
.monitor-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:20px 0 24px; }
.monitor-chart-card { border:1px solid var(--border); border-radius:10px; padding:18px 12px 8px; background:linear-gradient(160deg,var(--surface1),#0b1018); min-width:0; }
.monitor-chart-title { display:flex; justify-content:space-between; gap:8px; font-size:12px; padding:0 6px; margin-bottom:8px; }
.monitor-chart-title > :last-child { color:var(--text2); font-family:var(--mono); font-size:11px; }
.monitor-chart.monitor-trend { min-height:0; position:relative; display:block; padding:8px 0; }
.monitor-chart-tooltip { position:absolute; top:12px; z-index:4; padding:12px; width:215px; border:1px solid var(--border2); background:#111923f5; border-radius:8px; box-shadow:0 8px 30px #0006; font:10px/1.6 var(--mono); pointer-events:none; }
.monitor-chart-tooltip > strong { display:block; color:var(--text2); margin-bottom:6px; }.monitor-chart-tooltip div { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0; }.monitor-chart-tooltip i { width:5px; height:5px; border-radius:50%; }.monitor-chart-tooltip b { margin-left:auto; }.monitor-chart-tooltip small { width:100%; text-align:right; color:var(--text-dim); }
.monitor-chart-empty { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; font-size:12px; color:var(--text2); }.monitor-chart-empty span { color:var(--text-dim); font-size:32px; }.monitor-chart-empty small { font-size:10px; color:var(--text-dim); text-align:center; }
.monitor-table td small { display:block; margin-top:5px; font-size:10px; color:var(--text-dim); max-width:260px; }
.monitor-container-link { font-size:12px; font-weight:600; color:var(--text); text-align:left; background:none; border:0; cursor:pointer; overflow-wrap:anywhere; }.monitor-container-link:hover,.monitor-container-link.selected { color:var(--accent); }
.monitor-command { display:block; color:var(--text2); font:11px/1.85 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; padding:7px 0; min-width:160px; }
.monitor-subhead { font-size:13px; margin:24px 0 8px; font-weight:500; }
.monitor-empty.compact { padding:12px 0; font-size:12px; }
.monitor-cron-overview { display:flex; flex-wrap:wrap; gap:12px 26px; background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; padding:15px; color:var(--text2); font-size:12px; }
.monitor-cron-overview b { font-family:var(--mono); color:var(--text); }
.monitor-copy { font:10px var(--mono); color:var(--accent); padding:2px 7px; border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:4px; cursor:pointer; }
.monitor-event-controls { display:flex; flex-wrap:wrap; gap:8px; }.monitor-event-controls input { width:220px; }
.monitor-timeline { max-height:520px; overflow:auto; padding:12px 12px 0 0; }
.monitor-timeline-event { position:relative; display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; padding:0 0 20px; }
.monitor-timeline-event:before { content:''; position:absolute; top:12px; bottom:0; left:5px; width:1px; background:var(--border2); }
.monitor-event-marker { width:11px; height:11px; margin-top:4px; border:3px solid #193d2c; border-radius:50%; background:var(--accent); }.monitor-event-marker.docker { background:#79a8ff; border-color:#1c2b45; }
.monitor-event-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11px; }.monitor-event-meta time { color:var(--text-dim); font:10px var(--mono); margin-left:auto; }
.monitor-timeline .monitor-command { min-width:0; }
.monitor-level.active,.monitor-level.running { color:var(--accent); background:var(--accent-dim); }.monitor-level.interrupted,.monitor-level.inactive { color:var(--warn); background:#d9a44115; }
.monitor-panel a { color:var(--accent); }
@media(max-width:1050px) { .monitor-docker-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } #monitor-range-note { width:100%; margin-left:10px; } }
@media(max-width:700px) { .monitor-chart-grid { grid-template-columns:1fr; }.monitor-presets button { padding:7px 10px; }.monitor-toolbar { padding:12px; gap:12px; }.monitor-toolbar > .monitor-range { margin-left:0; }.monitor-docker-summary .monitor-metric-value { font-size:21px; }.monitor-docker-section .monitor-panel-head > .monitor-range { max-width:100%; flex-wrap:wrap; }#monitor-container { max-width:100%; }.monitor-event-controls { width:100%; }.monitor-event-controls input { flex:1; min-width:100px; }.monitor-event-meta time { margin-left:0; width:100%; }.monitor-chart-tooltip { font-size:9px; }.monitor-section-nav button { font-size:10px; padding:6px 8px; } }