:root { --bg:#f4f5f7; --fg:#1b1f24; --card:#fff; --line:#d9dde3; --ok:#2e8b57; --warn:#d4a017; --bad:#c0392b; --muted:#6b7280; }
@media (prefers-color-scheme: dark) { :root { --bg:#111418; --fg:#e6e8eb; --card:#1b2026; --line:#2c333c; --muted:#9aa3ad; } }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { padding:14px 20px; background:var(--card); border-bottom:1px solid var(--line); display:flex; gap:20px; align-items:baseline; }
header h1 { margin:0; font-size:20px; }
/* Animated fan logo — CSS-only, GPU-composited (transform only), ~0 CPU. */
.logo { align-self:center; display:inline-flex; color:var(--ok); }
.logo svg { transform-origin:50% 50%; animation:oa-fan 6s linear infinite; }
@keyframes oa-fan { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .logo svg { animation:none; } }
/* "Other enclosures": clickable cards, one per peer OA, that reload to that enclosure's web UI */
.peercard { text-decoration:none; color:var(--fg); display:block; }
.peercard:hover { border-color:var(--ok); }
.peercard b { color:var(--ok); }
.muted { color:var(--muted); }
#meta { color:var(--muted); }
main { padding:16px 20px; display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
section { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 16px; }
h2 { margin:0 0 8px; font-size:16px; } h3 { margin:12px 0 6px; font-size:14px; color:var(--muted); }
dl.kv { display:grid; grid-template-columns:max-content 1fr; gap:2px 14px; margin:0; }
dl.kv dt { color:var(--muted); } dl.kv dd { margin:0; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:4px 6px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:500; }
.st { display:inline-block; padding:0 7px; border-radius:10px; color:#fff; font-size:12px; }
.st.ok { background:var(--ok); } .st.warn { background:var(--warn); } .st.bad { background:var(--bad); } .st.na { background:var(--muted); }
.cards { display:flex; gap:12px; flex-wrap:wrap; } .card { border:1px solid var(--line); border-radius:6px; padding:8px 12px; min-width:200px; }
.card b { display:block; margin-bottom:4px; }
footer { padding:10px 20px; color:var(--muted); font-size:12px; }
.actions { margin:8px 0 0; color:var(--muted); } button { font:inherit; padding:2px 10px; border:1px solid var(--line); border-radius:4px; background:var(--card); color:var(--fg); cursor:pointer; }

#demo { margin:12px 20px 0; padding:8px 12px; border:1px dashed var(--warn); border-radius:6px; color:var(--muted); font-size:13px; }
#demo a { color:var(--ok); }
:root.light { --bg:#f4f5f7; --fg:#1b1f24; --card:#fff; --line:#d9dde3; --muted:#6b7280; }
:root.dark  { --bg:#111418; --fg:#e6e8eb; --card:#1b2026; --line:#2c333c; --muted:#9aa3ad; }