.ui-button {
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
  text-decoration: none;
}
.ui-button-primary { border-color: var(--accent); background: var(--accent); color: #05231a; }
.app-shell .ui-button-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, #000000); }
.ui-button-danger { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.app-shell .ui-button-danger:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); }
.ui-button:hover:not(:disabled) { border-color: var(--border-strong); background-color: var(--surface-hover); }
.ui-empty-state { min-height: 96px; display: grid; place-items: center; padding: 20px; color: var(--muted); font-size: 13px; text-align: center; }
.ui-icon-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 0;
}
.ui-icon-button > svg { margin: auto; }
/* A count whose digits change keeps its box (principles.md, state changes): equal-width digits, room for 4. */
.ui-count { display: inline-block; min-width: 4ch; font-variant-numeric: tabular-nums; text-align: right; }

.ui-toast { display: flex; align-items: center; gap: 8px; justify-self: start; width: fit-content; max-width: calc(100% - 28px); margin: 8px 14px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--popover); color: var(--text); font-size: 13px; }
/* tip_controller.js: the instant hover tip of a title (a manual popover; inset and margin undo the popover defaults). */
.ui-tip { position: fixed; inset: auto; margin: 0; max-width: min(360px, calc(100vw - 16px)); padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--popover); box-shadow: var(--shadow); color: var(--text); font-size: 12px; font-weight: 400; line-height: 1.4; white-space: pre-line; pointer-events: none; }
.ui-toast .ui-button { flex-shrink: 0; }
/* A message of several lines (a refusal per campaign id) breaks at its newlines. */
.ui-toast [role="status"] { white-space: pre-line; }

/* One Expand all / Collapse all icon button: the icon shows what a click does; both icons share one box, so the button keeps its size. */
.ui-expand-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-expand-toggle .ui-icon-collapse, .ui-expand-toggle[data-open="true"] .ui-icon-expand { display: none; }
.ui-expand-toggle[data-open="true"] .ui-icon-collapse { display: block; }