:root {
  /* Surfaces */
  --ncds-bg:             #fafafa;
  --ncds-panel:          #ffffff;
  --ncds-line:           #c8c8c8;
  --ncds-line2:          #d9d9d9;

  /* Typography */
  --ncds-ink:            #1f1f1f;
  --ncds-muted:          #5a5a5a;
  --ncds-faint:          #8a8a8a;
  --ncds-font:           'Segoe UI', system-ui, sans-serif;

  /* Brand accent — CONFIRM canonical value per Design Document §16.1 */
  --ncds-accent:         #223a83;
  --ncds-accent-dark:    #1a2d66;
  --ncds-accent-soft:    #e7f1fb;

  /* Buttons */
  --ncds-btn-bg:         #fdfdfd;
  --ncds-btn-border:     #adadad;
  --ncds-btn-hover-bg:   #e9f2fb;
  --ncds-btn-hover-border: #5a9fe0;

  /* Status */
  --ncds-green:          #3fa34d;
  --ncds-orange:         #e0a93b;
  --ncds-red:            #d05a4e;

  /* Tables */
  --ncds-table-header:   #eceef0;
}

body {
  font-family: var(--ncds-font);
  background: var(--ncds-bg);
  color: var(--ncds-ink);
}

/* Message boxes */
.ncds-info-box {
  border: 1px solid var(--ncds-line);
  border-left: 3px solid var(--ncds-accent);
  background: var(--ncds-panel);
  padding: 10px 14px;
  border-radius: 3px;
}

.ncds-warn-box {
  border: 1px solid var(--ncds-line);
  border-left: 3px solid var(--ncds-orange);
  background: #fffaf0;
  padding: 10px 14px;
  border-radius: 3px;
}

/* Tier badge */
.ncds-tier-badge {
  background: var(--ncds-accent-soft);
  color: #1c5b97;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 2px;
  padding: 2px 6px;
  display: inline-block;
}

/* ── List pager (shared) ── */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12px; color: #555;
}
.pager-size { display: flex; align-items: center; gap: 8px; }
.pager-nav { display: flex; align-items: center; gap: 10px; }
.pager-status { min-width: 90px; text-align: center; }
.pager-btn {
  border: 1px solid #ccc; background: #fff; color: #1a5fa8; cursor: pointer;
  border-radius: 4px; padding: 3px 10px; font-size: 14px; line-height: 1;
}
.pager-btn:hover:not(:disabled) { background: #f0f3f7; }
.pager-btn:disabled { color: #bbb; cursor: default; }