.system-trends{--health-bg:var(--page,#fafaf9);--health-ink:var(--ink,#20252c);--health-muted:var(--muted,#596273);--health-line:var(--line,#d5d9df);--health-accent:#2563b8;max-width:1080px;margin:24px 0;padding:16px 0;color:var(--health-ink);background:var(--health-bg)}
.system-trends header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.system-trends h2{font-size:1.3rem;margin:0 auto 0 0}
.system-trends label{display:flex;align-items:center;gap:8px;font-size:.9rem}
.system-trends select,.system-trends button{font:inherit;background:var(--health-bg);color:var(--health-ink);border:1px solid var(--health-line);border-radius:6px;padding:6px 9px}
.system-trends button{cursor:pointer}
.system-trends button:focus-visible,.system-trends select:focus-visible{outline:2px solid var(--health-accent);outline-offset:3px}
.system-trends table{width:100%;border-collapse:collapse;text-align:left;font-size:.95rem}
.system-trends th,.system-trends td{padding:12px 10px;border-bottom:1px solid var(--health-line);vertical-align:middle}
.system-trends thead th{font-size:.8rem;font-weight:500;color:var(--health-muted);background:var(--health-bg)}
.system-trends tbody th{font-weight:400;width:54%}
.system-trends tbody th button{border:0;padding:4px 0;text-align:left;text-decoration:underline;text-decoration-color:var(--health-line);text-underline-offset:4px}
.system-trends small{display:block;color:var(--health-muted);font-size:.75rem;margin-top:3px}
.system-trends svg{width:180px;height:40px;display:block;stroke:var(--health-accent);fill:var(--health-accent);stroke-width:1.5}
.system-trends .health-observations{font-size:.8rem;margin:6px 0 14px}
.system-trends .health-observations td{vertical-align:top;overflow-wrap:anywhere}
.system-trends .health-observations td:first-child{white-space:nowrap}
.system-trends [role=alert]{color:var(--health-ink);background:var(--health-bg);border-left:3px solid #c63f52;padding-left:12px}
html[data-theme="dark"] .system-trends{--health-bg:#161b22;--health-ink:#e6edf5;--health-muted:#a9b4c5;--health-line:#384353;--health-accent:#83b8ff}
@media(max-width:620px){.system-trends{padding:16px 10px}.system-trends header{gap:12px}.system-trends h2{width:100%}.system-trends th,.system-trends td{padding:10px 5px;font-size:.8rem}.system-trends svg{width:80px}.system-trends tbody th{width:48%}.system-trends .health-observations td{font-size:.75rem}}