.ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ops-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}

.prefs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  max-width: 800px;
}
/* Settings cards (shares / platform): space each setting into its own block so a
   description never reads as belonging to the next key. */
.prefs-card.prefs-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cat-mgr-add {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.cat-mgr-add input[type="text"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-base);
  padding: 7px 10px;
  box-sizing: border-box;
  border: 1px solid var(--border-input);
  border-radius: var(--r-xs);
  background: var(--surface-raised);
  color: var(--text);
}
.cat-mgr-add .primary { flex: none; }
.cat-mgr-add .hint { flex-basis: 100%; }  /* status drops to its own line, keeping the row full-width */
.prefs-card + .prefs-card { margin-top: 18px; }
/* Same label-column grid as the admin .prefs-row, so the appearance fields line up like the platform
   tab: a fixed label column and the control filling the value track. */
.prefs-editor-card .prefs-field {
  display: grid;
  grid-template-columns: minmax(220px, auto) 1fr;
  align-items: center;
  gap: 5px 16px;
  margin-bottom: 12px;
}
/* A checkbox field is a single <label> (input + caption) — let it span the row, left-aligned. */
.prefs-editor-card .prefs-field > label:first-child:last-child { grid-column: 1 / -1; }
/* Admin web-group settings render as .prefs-row inside an appearance block, which (unlike the platform
   panel) has no flex gap — give them the same spacing as the .prefs-field rows so they don't stick. */
.prefs-editor-card .prefs-row { margin-bottom: 12px; }
.prefs-editor-card select,
.prefs-editor-card input[type="number"] {
  font: inherit; padding: 5px 8px;
  border: 1px solid var(--border-input); border-radius: var(--r-xs);
  background: var(--surface-raised); color: var(--text);
  width: 100%; box-sizing: border-box;
}
/* Named appearance blocks (cards with a heading), not tabs. */
.prefs-block {
  max-width: 800px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.prefs-block + .prefs-block { margin-top: 14px; }
.prefs-block-title {
  margin: 0 0 12px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.prefs-tabs {
  display: flex;
  gap: 2px;
  max-width: 800px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.prefs-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 14px;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  cursor: pointer;
}
.prefs-tab:hover { color: var(--text); }
.prefs-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: var(--fw-semibold);
}
.prefs-link-row { display: flex; gap: 16px; flex-wrap: wrap; }
.prefs-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}
.prefs-link {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--fs-md);
}
.prefs-link:hover,
.prefs-link:focus-visible { text-decoration: underline; }
.prefs-card h2 {
  font-size: var(--fs-lg);
  margin: 0 0 6px;
}
.prefs-card > .hint {
  margin: 0 0 14px;
}
.prefs-form {
  display: flex;
  flex-direction: column;
  /* big gap between settings so each key+input+description reads as one block */
  gap: 24px;
}
.prefs-row {
  /* label column hugs content, value column takes the rest; minmax floor keeps short keys aligned */
  display: grid;
  grid-template-columns: minmax(220px, auto) 1fr;
  align-items: center;
  /* tiny row-gap ties the description to its own field (vs the 24px between settings) */
  gap: 5px 16px;
  font-size: var(--fs-base);
}
.prefs-row .field-hint {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-muted-cool);
}
.prefs-row input[type="number"],
.prefs-row input[type="text"],
.prefs-row input[type="password"] {
  font: inherit;
  font-size: var(--fs-base);
  padding: 5px 8px;
  border: 1px solid var(--border-input-cool);
  border-radius: var(--r-xs);
  background: var(--surface-raised);
  color: var(--text);
  /* fill the value track; border-box keeps border+padding inside the column */
  width: 100%;
  box-sizing: border-box;
}
/* column stack so hint blocks below the toggle aren't squeezed into the narrow first column */
.prefs-row-bool {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.prefs-row-bool input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
/* display:contents so the label's inner span + input slot into the parent grid directly */
.prefs-field {
  display: contents;
}
.prefs-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-medium);
}
.prefs-key {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-mono-dark);
}
.prefs-pending {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: #2a1d00;          /* dark on solid amber — readable in both themes */
  background: #f0b429;
  border: 1px solid rgba(0, 0, 0, 0.18);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.prefs-pending-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.prefs-pending-legend .prefs-pending { flex: none; }
.prefs-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--divider);
}
.prefs-actions .primary {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent-hover);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
}
.prefs-actions .primary:hover { background: var(--accent-hover); }
/* Revert = secondary action: outlined, theme-aware (was an unstyled dark pill). */
.prefs-actions #prefs-revert {
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
}
.prefs-actions #prefs-revert:hover { background: var(--surface-hover); }
.ops-card h2 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  margin: 0 0 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* flex so a per-card controls row can right-align into the header line */
  display: flex;
  align-items: center;
  gap: 12px;
}
.ops-card.full { grid-column: 1 / -1; }
.ops-card table.data { width: 100%; }

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: var(--lh-normal);
}
.badge.ok    { background: var(--badge-ok-bg);    color: var(--badge-ok-fg); }
.badge.warn  { background: var(--badge-warn-bg);  color: var(--badge-warn-fg); }
.badge.bad   { background: var(--badge-bad-bg);   color: var(--badge-bad-fg); }
.badge.muted { background: var(--badge-muted-bg); color: var(--badge-muted-fg); }

.ops-card-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;            /* header is uppercase, controls inside are not */
  letter-spacing: normal;
}
.ops-card-controls select {
  padding: 3px 8px;
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--border-input);
  border-radius: var(--r-xs);
  font: inherit;
  font-size: var(--fs-sm);
}

.ops-meta { color: var(--text-muted-cool); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.ops-log {
  background: var(--bg-terminal-alt);
  color: var(--text-terminal-alt);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: 10px;
  border-radius: var(--r-xs);
  overflow: auto;
  max-height: 520px;
  white-space: pre;
  margin: 0;
}

/* gives sticky <thead> a real scroll ancestor; capped height so big result sets don't stretch the page */
.data-scroll {
  max-height: clamp(240px, 60vh, 720px);
  overflow-y: auto;
  background: var(--list-bg);
  border: 1px solid var(--list-border);
  border-radius: var(--list-radius);
}
/* flex column pinning filter bar + paginator while only .data-list scrolls and fills the height */
.table-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.table-shell > .paginator { flex: none; }
.data-scroll.data-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  /* overflow on both axes so wide tables scroll inside; overscroll-behavior stops bounce chaining to the page */
  overflow: auto;
  overscroll-behavior: contain;
}
/* tighter floor for the recent-runs card so it doesn't dominate the dashboard */
.runs-card .data-scroll {
  max-height: clamp(240px, 30vh, 480px);
}
/* the trailing action column has no header label — keep it narrow */
.runs-card .runs-table th:last-child,
.runs-card .runs-table td:last-child {
  width: 36px;
  text-align: center;
}

.log-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.log-picker .log-pick {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.log-picker .log-pick.is-active {
  background: var(--log-active-bg);
  color: var(--log-active-fg);
  border-color: var(--log-active-border);
}

.sysinfo-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;          /* float to the right side of #toolbar */
  align-items: center;
}
.sys-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  border: 1px solid transparent;
}
.sys-pill-label {
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-micro);
  opacity: 0.85;
}
.sys-pill-val { font-variant-numeric: tabular-nums; }
.sys-pill-sub { color: inherit; opacity: 0.7; font-size: var(--fs-micro); }
.sys-pill.ok    { background: var(--sys-ok-bg);    color: var(--sys-ok-fg);    border-color: var(--sys-ok-border); }
.sys-pill.warn  { background: var(--sys-warn-bg);  color: var(--sys-warn-fg);  border-color: var(--sys-warn-border); }
.sys-pill.bad   { background: var(--sys-bad-bg);   color: var(--sys-bad-fg);   border-color: var(--sys-bad-border); }
.sys-pill.muted { background: var(--sys-muted-bg); color: var(--sys-muted-fg); border-color: var(--sys-muted-border); }

.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.icon-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 6px;
  border-radius: var(--r-xs);
  cursor: pointer;
  color: var(--text-secondary);
  margin-right: 4px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.icon-btn:hover  { background: var(--icon-btn-hover); color: var(--text-strong); }
.icon-btn:focus-visible { outline: none; border-color: var(--accent); }
.icon-btn .lucide { width: 16px; height: 16px; }
.icon-btn-primary {
  color: var(--accent);
  border-color: var(--border-input-plain);
  padding: 6px 8px;
}
.icon-btn-primary:hover { background: var(--icon-btn-hover); color: var(--accent); border-color: var(--accent); }
/* Variant hovers share the neutral plate; only the icon colour stays semantic. */
.icon-btn-danger        { color: var(--danger-icon); }
.icon-btn-danger:hover  { background: var(--icon-btn-hover); color: var(--danger-icon-hover-fg); }
.icon-btn-on        { color: var(--success-icon); }
.icon-btn-on:hover  { background: var(--icon-btn-hover); color: var(--success); }

.prefs-url-hint {
  display: block;
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--urlhint-bg);
  border-left: 3px solid var(--urlhint-rule);
  border-radius: var(--r-xs);
  color: var(--urlhint-fg);
}
.prefs-url-hint code {
  background: var(--urlhint-code-bg);
  padding: 1px 4px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  word-break: break-all;
}

/* <label> wraps only the checkbox + caption so clicking the description doesn't flip the box */
.prefs-bool-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.prefs-pick,
.prefs-pick-shared {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.prefs-pick:hover,
.prefs-pick:focus-visible,
.prefs-pick-shared:hover,
.prefs-pick-shared:focus-visible {
  background: var(--accent-soft-bg);
  color: var(--accent-hover);
  outline: none;
}
.prefs-pick .lucide,
.prefs-pick-shared .lucide { width: 16px; height: 16px; }

.prefs-chips-field {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 4px;
  /* Push the "Change" picker button to the right edge of the value column. */
  justify-content: flex-end;
}
.prefs-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1 1 auto; min-width: 0;
}
.prefs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 9px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  max-width: 100%;
}
.prefs-chip-text { word-break: break-all; }
.prefs-chip-remove {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--text-secondary); cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.prefs-chip-remove:hover,
.prefs-chip-remove:focus-visible {
  background: var(--danger-row-hover-bg); color: var(--danger);
  outline: none;
}
.prefs-chip-remove .lucide { width: 13px; height: 13px; }
.prefs-chip-empty { color: var(--text-muted); font-size: var(--fs-sm); }
.prefs-chips-hint { display: block; margin-top: 4px; }
.prefs-chips-add {
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm);
  white-space: nowrap;
}
.prefs-chips-add .lucide { width: 14px; height: 14px; }

.pick-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
}
.pick-list li        { border-bottom: 1px solid var(--surface-sunken); }
.pick-list li:last-child { border-bottom: none; }
.pick-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.pick-list label:hover { background: var(--surface-hover-cool); }
.pick-list code        { font-size: var(--fs-sm); color: var(--text-strong); }
.pick-list .hint       { font-size: var(--fs-xs); color: var(--text-muted-cool); }
/* pin checkboxes to native size so the generic `.modal input { width: 100% }` doesn't stretch them */
.pick-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}