#serverMonitor {margin:0 0 32px;color:#172d48;font-size:14px}
#serverMonitor .sm-head {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
#serverMonitor .sm-kicker {font-size:12px;color:#6582a6;letter-spacing:2px;margin:0 0 8px}
#serverMonitor h2 {font-size:24px;margin:0 0 8px;letter-spacing:-.5px}
#serverMonitor h3 {font-size:15px;margin:0 0 6px}
#serverMonitor p {margin:5px 0;color:#6d8099;line-height:1.7}
#serverMonitor .sm-refresh {width:auto;margin:0;padding:9px 15px;font-size:13px;font-weight:500;background:white;color:#285b9e;border:1px solid #dce7f5}
#serverMonitor .sm-state {display:flex;gap:12px;align-items:center;border-radius:12px;padding:15px 18px;background:#eff8f4;border:1px solid #d5eddf;margin-bottom:16px}
#serverMonitor .sm-dot {width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#24946d;box-shadow:0 0 0 5px #24946d12}
#serverMonitor .sm-state[data-level=warning] {background:#fffaed;border-color:#efdfb5}
#serverMonitor .sm-state[data-level=high] {background:#fff2f2;border-color:#f2d0d0}
#serverMonitor .sm-state[data-level=unknown] {background:#f2f5f9;border-color:#dfe6ef}
#serverMonitor .sm-state[data-level=warning] .sm-dot {background:#c08a23}
#serverMonitor .sm-state[data-level=high] .sm-dot {background:#cc5454}
#serverMonitor .sm-state[data-level=unknown] .sm-dot {background:#8798ac}
#serverMonitor .sm-state strong {font-weight:600;display:block}
#serverMonitor .sm-state p {font-size:12px;margin:3px 0 0}
#serverMonitor .sm-stamp {font-size:12px;color:#7a8ba1;margin-top:8px;text-align:right}
#serverMonitor .sm-cards {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#serverMonitor .sm-card {padding:18px;border:1px solid #e1e9f4;border-radius:14px;background:linear-gradient(140deg,#fff,#f8fbff);min-width:0}
#serverMonitor .sm-label {color:#617793;font-size:12px;display:block}
#serverMonitor .sm-value {font:600 32px/1.3 'Segoe UI','Microsoft YaHei UI',sans-serif;margin:10px 0;letter-spacing:-1px;display:block;color:#1d416d}
#serverMonitor .sm-card p {font-size:12px;min-height:20px}
#serverMonitor progress {width:100%;height:7px;display:block;border:0;border-radius:9px;overflow:hidden;margin:8px 0;background:#e8eff8;appearance:none}
#serverMonitor progress::-webkit-progress-bar {background:#e8eff8;border-radius:9px}
#serverMonitor progress::-webkit-progress-value {background:#4f82d7;border-radius:9px;transition:width .3s}
#serverMonitor .sm-memory progress::-webkit-progress-value {background:#36a6a0}
#serverMonitor progress[data-level=warning]::-webkit-progress-value {background:#d3a343}
#serverMonitor progress[data-level=high]::-webkit-progress-value {background:#d76a6a}
#serverMonitor .sm-activity {display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px 2px;color:#68809c;font-size:12px}
#serverMonitor .sm-activity b {font-weight:600;color:#2a4b75}
#serverMonitor .sm-trends {border:1px solid #e1e9f4;border-radius:14px;padding:20px;margin-top:2px;background:#fff}
#serverMonitor .sm-chart-head {display:flex;align-items:start;justify-content:space-between;gap:16px}
#serverMonitor select {width:auto;max-width:180px;padding:8px 12px;font-size:12px;background:#f7faff}
#serverMonitor .sm-chart-title {display:flex;justify-content:space-between;margin-top:18px;color:#6580a2;font-size:12px}
#serverMonitor .sm-legend {display:flex;gap:14px;align-items:center}
#serverMonitor .sm-legend span::before {content:'';display:inline-block;width:8px;height:8px;border-radius:3px;background:#5284d9;margin-right:6px}
#serverMonitor .sm-legend .sm-mem::before {background:#31a69b}
#serverMonitor .sm-legend .sm-people::before {background:#8970d2}
#serverMonitor svg {display:block;width:100%;height:auto;min-height:100px}
#serverMonitor .sm-chart-note {font-size:12px;line-height:1.7;padding-top:10px;border-top:1px solid #edf1f8}
#serverMonitor .sm-bottom {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
#serverMonitor .sm-box {border:1px solid #e1e9f4;border-radius:14px;padding:18px}
#serverMonitor .sm-service-row {display:flex;justify-content:space-between;gap:15px;margin:12px 0;font-size:13px}
#serverMonitor .sm-service-row b {font-weight:500;color:#2d7e66}
#serverMonitor .sm-box p {font-size:12px}
#serverMonitor .sm-scope {margin-top:15px;font-size:12px;color:#7a8ca4;line-height:1.8}
#serverMonitor details {margin-top:12px;border-top:1px solid #e8eef6;padding-top:12px}
#serverMonitor summary {cursor:pointer;color:#426890;font-size:12px}
#serverMonitor .sm-table-wrap {overflow:auto}
#serverMonitor table {width:100%;font-size:12px;border-collapse:collapse;margin-top:12px}
#serverMonitor td,#serverMonitor th {padding:8px;border-bottom:1px solid #edf1f8;text-align:left;white-space:nowrap}
@media(max-width:1100px) {#serverMonitor .sm-cards {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px) {#serverMonitor .sm-bottom {grid-template-columns:1fr}#serverMonitor .sm-head {flex-direction:column}#serverMonitor .sm-stamp {text-align:left}#serverMonitor .sm-card {padding:12px}#serverMonitor .sm-value {font-size:27px}#serverMonitor .sm-trends {padding:12px}#serverMonitor .sm-chart-head {flex-direction:column}}
@media(prefers-reduced-motion:reduce) {#serverMonitor * {transition:none!important}}