.systems-s1 { --s1-bg:#fff; --s1-text:#182b35; --s1-muted:#425b68; --s1-border:#879ba5; --s1-accent:#005f58; color:var(--s1-text); max-width:1120px; margin:auto; overflow-wrap:anywhere; }
.systems-s1 p,.systems-s1 dd { color:var(--s1-muted); line-height:1.6; }
.systems-s1 h1 { font-size:clamp(1.7rem,4vw,2.4rem); }
.systems-s1 h2 { font-size:1.3rem; margin:0 0 14px; }
.systems-s1 h3,.systems-s1 dt { font-size:.95rem; font-weight:700; margin:18px 0 6px; }
.systems-s1 button { font:inherit; font-weight:600; min-height:44px; min-width:44px; padding:10px 14px; border:1px solid var(--s1-border); border-radius:9px; color:var(--s1-accent); background:var(--s1-bg); cursor:pointer; white-space:normal; }
.systems-s1 button:hover { text-decoration:underline; }
.systems-s1 button:focus-visible { outline:3px solid var(--s1-accent); outline-offset:3px; }
.systems-s1 button:disabled { color:var(--s1-muted); cursor:wait; border-style:dashed; }
.systems-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.systems-tabs [aria-current=page] { color:var(--s1-bg); background:var(--s1-accent); }
.systems-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.systems-card,.systems-feed { background:var(--s1-bg); border:1px solid var(--s1-border); border-radius:14px; padding:22px; min-width:0; }
.systems-feed { margin-top:18px; }
.systems-feed h2:not(:first-child) { margin-top:24px; }
.systems-status { display:inline-block; color:var(--s1-text); font-size:.8rem; font-weight:750; border:1px solid var(--s1-border); border-radius:5px; padding:5px 8px; letter-spacing:.04em; }
.systems-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.systems-scope { border-left:3px solid var(--s1-accent); padding:8px 12px; }
dialog.systems-explain { background:var(--s1-bg); color:var(--s1-text); border:1px solid var(--s1-border); border-radius:14px; width:min(620px,calc(100vw - 32px)); max-height:85dvh; overflow:auto; padding:24px; }
.systems-explain::backdrop { background:rgb(8 22 30 / 40%); }
.systems-dialog-head { display:flex; align-items:start; justify-content:space-between; gap:14px; }
.systems-s1 dd { margin:0; }
html[data-dios-theme=dark] .systems-s1 { --s1-bg:#152832; --s1-text:#edf7fa; --s1-muted:#c1d5df; --s1-border:#8099a6; --s1-accent:#8aeadc; }
@media(max-width:650px) { .systems-grid { grid-template-columns:1fr; } .systems-card,.systems-feed { padding:16px; } dialog.systems-explain { padding:16px; } }