:root{
  --ss-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --ss-fg: #2d3748;
  --ss-muted: #718096;
  --ss-track: #e9eef5;
  --ss-radius: 999px;
  --ss-gap: 8px;
  --ss-blue: #1e81ce;
  --ss-green: #1e9e6f;
  --ss-amber: #c48a0b;
  --ss-red: #c53030;
}

.section-status{
  font: 600 14px/1 var(--ss-font);
  display: inline-flex;
  align-items: center;
  gap: var(--ss-gap);
  color: var(--ss-fg);
  white-space: nowrap;
}
.section-status__count{ color: var(--ss-fg); }

.section-status__meter{
  width: 110px;
  height: 8px;
  background: var(--ss-track);
  border-radius: var(--ss-radius);
  overflow: hidden;
  position: relative;
}
.section-status__meter-fill{
  height: 100%;
  width: 0%;
  border-radius: var(--ss-radius);
  transition: width .25s ease;
  background: var(--ss-blue);
}

.section-status.is-complete .section-status__meter-fill{ background: var(--ss-green); }
.section-status.is-warning  .section-status__meter-fill{ background: var(--ss-amber); }
.section-status.is-error    .section-status__meter-fill{ background: var(--ss-red); }
.section-status.is-todo     .section-status__meter-fill{ background: var(--ss-track); }

.section-status__icon{
  color: currentColor;
  display: inline-flex;
  align-items: center;
}

.section-status.is-todo, .section-status.is-in-progress { color: var(--ss-muted); }

/* Keep your green border when complete (apply .is-complete on the wrapper) */
.section-card { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.section-card.is-complete { border-color: #1e9e6f; box-shadow: 0 0 0 2px rgba(30,158,111,.12); }
/* optional other states */
.section-card.is-warning { border-color: #c48a0b; }
.section-card.is-error   { border-color: #c53030; }