.topbar { gap: 16px; }
.topbar > .topbar-actions { flex: 0 1 auto; gap: 10px 12px; }
.system-monitor { display: flex; align-items: center; flex-shrink: 0; gap: 10px; min-width: 0; min-height: 32px; margin-left: auto; color: #686d83; font-size: 11px; }
.monitor-heading { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.monitor-heading > span:nth-child(2), .monitor-update > #monitor-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.monitor-dot { width: 6px; height: 6px; border-radius: 50%; background: #b0b4c2; flex-shrink: 0; }
.system-monitor[data-state="live"] .monitor-dot { background: #56a58c; }
.system-monitor[data-state="partial"] .monitor-dot, .system-monitor[data-state="stale"] .monitor-dot, .system-monitor[data-state="error"] .monitor-dot { background: #c79b57; }
.monitor-source { color: #85899c; font-size: 9px; }
.monitor-readings { display: flex; align-items: center; min-width: 0; gap: 12px; }
.monitor-reading { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; border-radius: 4px; cursor: help; }
.monitor-reading:focus-visible { outline: 2px solid #a696ee; outline-offset: 4px; }
.monitor-reading strong { display: inline-block; min-width: 40px; text-align: right; color: #85899c; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.monitor-capacity, .monitor-track { display: none; }
.monitor-reading[data-level="normal"] strong { color: #24836a; }
.monitor-reading[data-level="high"] strong { color: #9a6a12; }
.monitor-reading[data-level="critical"] strong { color: #c44958; }
.monitor-update { display: flex; align-items: center; }
.monitor-update .icon-button { width: 22px; height: 26px; padding: 4px; }
.monitor-update .icon-button svg { width: 13px; height: 13px; }
.system-monitor[data-state="stale"] .monitor-reading strong, .system-monitor[data-state="error"] .monitor-reading strong { color: #85899c; }
.monitor-reading[data-detail] { position: relative; }
.monitor-reading[data-detail]::after { content: attr(data-detail); display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 20; width: max-content; max-width: min(250px, calc(100vw - 32px)); padding: 10px 12px; border: 1px solid #e5e2ed; border-radius: 8px; background: #fff; box-shadow: 0 6px 22px #28223b14; color: #686d83; white-space: pre-line; line-height: 1.7; font-size: 11px; font-weight: 400; pointer-events: none; }
.monitor-reading[data-detail]:hover::after, .monitor-reading[data-detail]:focus-visible::after { display: block; }
@media (max-width: 1180px) and (min-width: 701px) { .system-monitor { gap: 7px; } .monitor-source { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .monitor-readings { gap: 8px; } .topbar { gap: 12px; } .topbar > .topbar-actions { gap: 8px; } .topbar .compose-actions { gap: 7px; padding-left: 10px; } }
@media (max-width: 1000px) and (min-width: 701px) { .topbar { flex-wrap: wrap; } .topbar > .topbar-actions { flex: 1 0 100%; } }
@media (max-width: 700px) { .system-monitor { margin-left: 0; gap: 9px; } .monitor-source { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .monitor-readings { gap: 10px; } .topbar > .topbar-actions { flex: 1 0 100%; } .monitor-reading:first-child[data-detail]::after { left: 0; transform: none; } .monitor-reading:last-child[data-detail]::after { left: auto; right: 0; transform: none; } }