.system-status-button {
  position: relative;
  width: clamp(35px, 3.2vw, 56px);
  height: clamp(35px, 3.2vw, 56px);
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(180,185,180,.26);
  border-radius: 50%;
  background: rgba(180,185,180,.12);
  box-shadow: 0 9px 24px rgba(36,45,38,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.system-status-button:hover { background: rgba(255,255,255,.2); }
.system-status-symbol { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.system-status-dot { position: absolute; left: 0; bottom: 1px; width: 8px; height: 8px; border-radius: 50%; background: #8f9790; box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
.system-status-icon { margin-left: 6px; font: 700 17px/1 'SFMono-Regular', Consolas, monospace; color: #6f776f; }
.system-status-button[data-state="healthy"] .system-status-dot,
.status-row[data-state="healthy"] .status-row-dot { background: #4aa762; }
.system-status-button[data-state="healthy"] .system-status-icon,
.status-row[data-state="healthy"] .status-row-icon { color: #2d8144; }
.system-status-button[data-state="down"] .system-status-dot,
.status-row[data-state="down"] .status-row-dot { background: #d95f59; }
.system-status-button[data-state="down"] .system-status-icon,
.status-row[data-state="down"] .status-row-icon { color: #b9433e; }
.system-status-button[data-state="checking"] .system-status-icon,
.status-row[data-state="checking"] .status-row-icon,
.status-refresh.is-checking .status-refresh-icon { animation: workbench-spin .8s linear infinite; }
@keyframes workbench-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .system-status-button[data-state="checking"] .system-status-icon,
  .status-row[data-state="checking"] .status-row-icon,
  .status-refresh.is-checking .status-refresh-icon { animation-duration: 1.8s; }
}
.system-status-popover {
  position: fixed;
  z-index: 42;
  right: clamp(1rem, 3vw, 3rem);
  top: 66px;
  width: min(390px, calc(100vw - 2rem));
  max-height: calc(100dvh - 78px - env(safe-area-inset-bottom));
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 18px;
  background: rgba(241,246,239,.94);
  box-shadow: 0 26px 55px rgba(26,35,29,.22);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  color: var(--ink);
}
.system-status-popover[hidden] { display: none !important; }
.system-status-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem .2rem .8rem; border-bottom: 1px solid var(--line); }
.system-status-head h2 { margin: 0; font-size: .95rem; }
.system-status-refresh-wrap { display: flex; align-items: center; gap: .45rem; }
.status-refresh { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; }
.status-refresh:disabled { cursor: default; opacity: .65; }
.status-refresh-icon { display: block; font-size: 16px; line-height: 1; }
.status-time { min-width: 4.2rem; color: var(--muted); font: .72rem 'SFMono-Regular', Consolas, monospace; text-align: right; }
.status-list { display: grid; }
.status-item { border-bottom: 1px solid var(--line); }
.status-item:last-child { border-bottom: 0; }
.status-row {
  width: 100%; min-height: 54px; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: .6rem;
  padding: .72rem .2rem; border: 0; background: transparent; color: var(--ink); text-align: left;
}
button.status-row { cursor: pointer; }
button.status-row:hover { background: rgba(255,255,255,.18); }
.status-row-mark { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.status-row-dot { position: absolute; left: 0; bottom: 2px; width: 8px; height: 8px; border-radius: 50%; background: #8f9790; box-shadow: 0 0 0 2px rgba(255,255,255,.38); }
.status-row-icon { margin-left: 6px; font: 700 15px/1 'SFMono-Regular', Consolas, monospace; color: #6f776f; }
.status-row-copy { min-width: 0; }
.status-row-name { display: block; font-size: .8rem; font-weight: 700; }
.status-row-state { display: block; margin-top: .18rem; color: var(--muted); font-size: .7rem; }
.status-chevron { color: var(--muted); font-size: .78rem; }
.status-detail { margin: 0 .2rem .78rem 2rem; padding: .72rem .82rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.16); }
.status-detail strong { display: block; font-size: .74rem; }
.status-detail p { margin: .3rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
html[data-theme="dark"] .system-status-popover { background: rgba(29,38,32,.95); border-color: rgba(230,237,228,.24); }
html[data-theme="dark"] .system-status-button { background: rgba(78,88,79,.27); border-color: rgba(230,237,228,.23); }
html[data-theme="dark"] .system-status-dot,
html[data-theme="dark"] .status-row-dot { box-shadow: 0 0 0 2px rgba(20,24,21,.75); }
html[data-theme="dark"] .status-detail { background: rgba(255,255,255,.035); }
@media (max-width: 500px) {
  .system-status-popover { right: .6rem; top: 58px; width: calc(100vw - 1.2rem); }
}