/* システム運用の画面だけで使う見た目 */
.ops-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ops-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-4) var(--space-5); }
.ops-card .k { font-size: var(--text-xs); color: var(--muted); }
.ops-card .v { font-size: 1.9rem; font-weight: 700; line-height: 1.2; margin: var(--space-1) 0; }
.ops-card .v small { font-size: var(--text-sm); font-weight: 600; }
.ops-card .d { font-size: var(--text-xs); color: var(--muted); line-height: 1.6; }
.ops-head { display: flex; align-items: flex-end; gap: var(--space-3); }
.ops-head h1 { margin: 0; }
.ops-head .spacer { flex: 1; }
.ops-sec > header h2::before { content: ''; display: inline-block; width: 4px; height: 1em; background: var(--primary); border-radius: 2px; margin-right: var(--space-2); vertical-align: -2px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); min-width: 140px; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.bar > b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
.charts { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.chart { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.chart h3 { font-size: var(--text-sm); margin: 0 0 var(--space-1); }
.chart .lg { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-1); }
.chart .lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart svg text { font-size: 9px; fill: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.seg button { border: 0; background: none; padding: 4px 12px; border-radius: 999px; font: inherit; font-size: var(--text-xs); cursor: pointer; color: var(--muted); }
.seg button[aria-pressed=true] { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.code { font-family: ui-monospace, monospace; font-size: var(--text-xs); background: var(--surface-2); padding: 0 6px; border-radius: 4px; }