:root{
  --cs-card: 0 0% 100%;
  --cs-text: 222 15% 20%;
  --cs-muted: 222 10% 48%;
  --cs-ring: 222 15% 88%;
  --cs-shadow: 0 2px 10px hsl(222 20% 10% / .06);
  --cs-radius: 10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --cs-card: 222 14% 14%;
    --cs-text: 0 0% 100%;
    --cs-muted: 222 12% 72%;
    --cs-ring: 222 12% 22%;
    --cs-shadow: 0 2px 10px hsl(222 80% 2% / .4);
  }
}

/* ----- Strip ----- */
.credits-strip{
  --cs-pct: calc((var(--cs-credits-left) / var(--cs-credits-total)) * 100%);
  width: min(280px, 100%);
  margin-inline: auto;   /* centered */
  margin-top: 1em;       /* requested spacing */
  background: hsl(var(--cs-card));
  border: 1px solid hsl(var(--cs-ring));
  border-radius: var(--cs-radius);
  padding: 8px 10px 6px; /* compact */
  box-shadow: var(--cs-shadow);
  color: hsl(var(--cs-text));
  position: relative;
  overflow: hidden;
}
.credits-strip::after{
  content:"";
  position:absolute; inset:-40% -10% auto auto;
  width:140px; height:140px; border-radius:50%;
  background: radial-gradient(closest-side, hsl(var(--cs-accent) / .18), transparent 70%);
  pointer-events:none; z-index:-1;
}

.cs-row{ display:flex; align-items:center; gap:8px; min-height:26px; }
.cs-icon{
  display:grid; place-items:center;
  width:24px; height:24px; border-radius:6px;
  background:hsl(var(--cs-accent) / .12); outline:1px solid hsl(var(--cs-accent) / .35);
}
.cs-title{ display:flex; align-items:baseline; gap:6px; flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-title .eyebrow{ font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:hsl(var(--cs-muted)); }
.cs-title .label{ font-size:13px; font-weight:600; line-height:1; }
.cs-badge{
  display:inline-flex; align-items:center; white-space:nowrap;
  background:hsl(var(--cs-accent) / .12); border:1px solid hsl(var(--cs-accent) / .35);
  padding:1px 8px; border-radius:999px; font-size:12px; font-feature-settings:"tnum" on, "lnum" on;
}

/* slim progress line */
.cs-progress{ margin-top:6px; height:3px; border-radius:999px; background:hsl(var(--cs-ring)); position:relative; overflow:hidden; }
.cs-bar{
  position:absolute; inset:0; width:clamp(0%, var(--cs-pct), 100%);
  background: linear-gradient(90deg, hsl(var(--cs-accent)), hsl(var(--cs-accent) / .75));
  border-radius:999px; transition:width .35s cubic-bezier(.22,1,.36,1);
}

/* --- Error theme (left < 0) --- */
.credits-strip.is-error{ --cs-accent: 3 80% 67%;; border-color: hsl(0 70% 85%); }
.credits-strip.is-error .cs-badge{ background: hsl(0 85% 60% / .12); border-color: hsl(0 85% 60% / .45); }
.credits-strip.is-error::after{ background: radial-gradient(closest-side, hsl(0 85% 60% / .18), transparent 70%); }
.credits-strip.is-error .cs-progress{ display:none; }

/* Spinner inside the badge */
.cs-badge { position: relative; }
.cs-badge .cs-spinner {
  display: none;
  width: 12px; height: 12px;
  margin: 0 2px;
  border: 2px solid hsl(var(--cs-accent) / .35);
  border-top-color: hsl(var(--cs-accent));
  border-radius: 50%;
  animation: cs-spin .8s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg);} }

/* When loading: show spinner, hide value */
.cs-badge.is-loading .cs-spinner { display: inline-block; }
.cs-badge.is-loading .cs-value   { display: none; }

/* reduce-motion */
@media (prefers-reduced-motion: reduce){ .cs-bar{ transition:none; } }