:root{
  /* Unified status palette */
  --good-bg:#ecfdf5;
  --good-border:#a7f3d0;

  --warn-bg:#fffbeb;
  --warn-border:#fde68a;

  --bad-bg:#fff1f2;
  --bad-border:#fecdd3;

  --status-text:#111111;
}

/* Generic helpers */
.status-good{ background:var(--good-bg)!important; border-color:var(--good-border)!important; color:var(--status-text)!important; }
.status-warn{ background:var(--warn-bg)!important; border-color:var(--warn-border)!important; color:var(--status-text)!important; }
.status-bad{  background:var(--bad-bg)!important;  border-color:var(--bad-border)!important;  color:var(--status-text)!important; }

/* Arithmetic result input grid cells
   NOTE: gridlines are controlled by the table's own border rules.
   We only set the fill here; the *inner* status border is drawn inside
   the cell in result_input.html so it never overwrites the grey gridlines. */
table.ri td.cell-ok{  background:var(--good-bg)!important; }
table.ri td.cell-mid{ background:var(--warn-bg)!important; }
table.ri td.cell-bad{ background:var(--bad-bg)!important; }

/* Ensure inputs inherit cell background */
table.ri td.cell-ok .ri-input,
table.ri td.cell-mid .ri-input,
table.ri td.cell-bad .ri-input{
  background:transparent!important;
}

/* Faster Fluency badges/pills (common names) */
.pill.ok, .badge.ok, .tag.ok, .chip.ok{ background:var(--good-bg)!important; border-color:var(--good-border)!important; color:var(--status-text)!important; }
.pill.warn, .badge.warn, .tag.warn, .chip.warn{ background:var(--warn-bg)!important; border-color:var(--warn-border)!important; color:var(--status-text)!important; }
.pill.bad, .badge.bad, .tag.bad, .chip.bad{ background:var(--bad-bg)!important; border-color:var(--bad-border)!important; color:var(--status-text)!important; }