[data-il-status] {
  --il-status-ink: var(--il-info, var(--il-primary, #3C8AF1));
  --il-status-bg: var(--il-info-bg, rgba(60, 138, 241, .10));
  --il-status-fg: var(--il-info-fg, var(--il-text, inherit));
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 12px 11px 13px;
  border: 1px solid color-mix(in srgb, var(--il-status-ink) 34%, transparent);
  border-left: 3px solid var(--il-status-ink);
  border-radius: var(--il-radius-sm, 10px);
  background: var(--il-status-bg);
  color: var(--il-status-fg);
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  box-shadow: var(--il-shadow-sm, 0 1px 2px rgba(0, 0, 0, .10));
  overflow: hidden}
[data-il-status="danger"] {
  --il-status-ink: var(--il-error, var(--il-danger, #DE3730));
  --il-status-bg: var(--il-error-bg, rgba(222, 55, 48, .10));
  --il-status-fg: var(--il-error-fg, var(--il-text, inherit))}
[data-il-status="success"] {
  --il-status-ink: var(--il-success, #22892F);
  --il-status-bg: var(--il-success-bg, rgba(34, 137, 47, .10));
  --il-status-fg: var(--il-success-fg, var(--il-text, inherit))}
[data-il-status="warning"] {
  --il-status-ink: var(--il-warning, var(--il-amber, #B26B00));
  --il-status-bg: var(--il-warning-bg, rgba(178, 107, 0, .10));
  --il-status-fg: var(--il-warning-fg, var(--il-text, inherit))}
[data-il-status-icon] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--il-status-ink)}
[data-il-status-icon] svg { display: block; width: 100%; height: 100%}
[data-il-status-text] { flex: 1 1 auto; min-width: 0}
[data-il-status-title] { display: block; font-weight: 600; margin-bottom: 2px}
[data-il-status-text] > form { margin: 8px 0 0}
[data-il-status-text] > form:last-child { margin-bottom: 0}
[data-il-status-close] {
  flex: 0 0 auto;
  margin: -2px -3px 0 6px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  opacity: .62;
  float: none;
  transition: opacity .15s ease, background-color .15s ease}
[data-il-status-close]:hover { opacity: 1; background: color-mix(in srgb, var(--il-status-ink) 14%, transparent)}
[data-il-status-close]:focus-visible { outline: 2px solid var(--il-status-ink); outline-offset: 1px; opacity: 1}
[data-il-status-bar] {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--il-status-ink);
  opacity: .45;
  transform-origin: left center;
  transform: scaleX(var(--il-status-progress, 1))}
[data-il-flash-layer] {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none}
[data-il-flash-layer] > [data-il-status] {
  margin: 0;
  pointer-events: auto;
  background: var(--il-status-bg, var(--il-surface, #1b1f27));
  box-shadow: var(--il-shadow, 0 8px 24px rgba(0, 0, 0, .28));
  animation: il-status-in .22s ease both}
@keyframes il-status-in { from { opacity: 0; transform: translateY(-8px)} to { opacity: 1; transform: none} }

@media (prefers-reduced-motion: reduce) {
  [data-il-status-bar] { display: none}
  [data-il-status-close] { transition: none}
  [data-il-flash-layer] > [data-il-status] { animation: none}
}
[data-il-pager] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  /* Breathing room, both sides: the pager was `2px` from whatever followed it, so the row and the next section's caption/heading collided under the table (26-09-09). A hairline above separates it from the table body; generous space below opens the rhythm before the next block. Shared paginator, so every long table on every frontend gains the same breathing room. */
  margin: 10px 2px 22px;
  padding-top: 12px;
  border-top: 1px solid var(--il-border, rgba(128,128,128,.18));
  font-size: 12.5px;
  color: var(--il-muted-fg, var(--il-muted, inherit))}
[data-il-pager-nav] { display: inline-flex; align-items: center; gap: 6px}
[data-il-pager-pages] {
  min-width: 62px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--il-text, inherit)}
[data-il-pager-prev], [data-il-pager-next] {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--il-border, rgba(128,128,128,.28));
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 15px; line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease}
[data-il-pager-prev]:hover:not(:disabled),
[data-il-pager-next]:hover:not(:disabled) {
  background: var(--il-card, transparent);
  border-color: var(--il-primary, currentColor)}
[data-il-pager-prev]:disabled, [data-il-pager-next]:disabled { opacity: .38; cursor: default}
[data-il-pager-prev]:focus-visible, [data-il-pager-next]:focus-visible {
  outline: 2px solid var(--il-primary, currentColor); outline-offset: 1px}
[data-il-graph], [data-il-chart], .il-graph, .il-chart {
  padding: 18px 16px 22px;
  margin: 16px 0 20px;
  overflow: visible}
[data-il-graph] svg, [data-il-chart] svg, .il-graph svg, .il-chart svg { overflow: visible}
@media (prefers-reduced-motion: reduce) {
  [data-il-pager-prev], [data-il-pager-next] { transition: none}
}
/* Canonical credit row. The handle [data-il-credits] is written in by
   error-pages::credits::rewrite() on every surface that consumes this SoT (site-v1, site-v2, the
   console chrome), so the row must READ the same everywhere: one link treatment, one separator
   treatment, no trailing separator. Theme-aware via the shared --il-* tokens; no hard-coded colour
   and no invented accent — the muted footer tone the row already inherits, standardized.
   The rewrite emits separators only BETWEEN links (never a trailing one), so a stray "." can only
   come from copy that leaked into the row — which the tight container now prevents. */
[data-il-credits] { line-height: 1.6; max-width: 100%; min-width: 0}
/* The row of legal links wraps inside its column: on a 360 px phone it ran 373 px wide in a 288 px
   footer column and the last links were cut. */
[data-il-credits] [data-il-credits] { flex-wrap: wrap; justify-content: center; row-gap: 4px}
[data-il-credits] a { color: var(--il-muted-fg, var(--il-muted, inherit)); text-decoration: none}
[data-il-credits] a:hover { text-decoration: underline}
[data-il-credits] [aria-hidden="true"] {
  margin: 0 .45em;
  opacity: .5;
  color: var(--il-muted-fg, var(--il-muted, currentColor))}