/* Brighter progress surfaces: four brand accents, still readable on the graphite base. */
.progress-screen {
  --progress-lime: #b7ff00;
  --progress-orange: #ff9b2f;
  --progress-violet: #ad8cff;
  --progress-cyan: #55d8ff;
}

.progress-screen .progress-metric {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg, rgba(27,34,40,.98), rgba(14,20,25,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 28px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.progress-screen .progress-metric::after {
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  right: -62px;
  bottom: -80px;
  content: '';
  border-radius: 50%;
  filter: blur(3px);
  opacity: .23;
}

.progress-screen .progress-metric:nth-child(1) {
  border-color: rgba(255,155,47,.55);
  background: linear-gradient(145deg, rgba(80,43,20,.96), rgba(24,25,27,.98) 72%);
  box-shadow: inset 0 1px 0 rgba(255,210,145,.15), 0 14px 30px rgba(255,138,0,.13);
}
.progress-screen .progress-metric:nth-child(1)::after { background: var(--progress-orange); }
.progress-screen .progress-metric:nth-child(2) {
  border-color: rgba(173,140,255,.55);
  background: linear-gradient(145deg, rgba(54,38,84,.96), rgba(22,23,31,.98) 72%);
  box-shadow: inset 0 1px 0 rgba(220,205,255,.15), 0 14px 30px rgba(125,88,255,.13);
}
.progress-screen .progress-metric:nth-child(2)::after { background: var(--progress-violet); }
.progress-screen .progress-metric:nth-child(3) {
  border-color: rgba(85,216,255,.55);
  background: linear-gradient(145deg, rgba(18,67,84,.96), rgba(18,25,31,.98) 72%);
  box-shadow: inset 0 1px 0 rgba(190,243,255,.15), 0 14px 30px rgba(45,190,238,.13);
}
.progress-screen .progress-metric:nth-child(3)::after { background: var(--progress-cyan); }
.progress-screen .progress-metric:nth-child(4) {
  border-color: rgba(183,255,0,.55);
  background: linear-gradient(145deg, rgba(46,66,18,.96), rgba(20,25,23,.98) 72%);
  box-shadow: inset 0 1px 0 rgba(225,255,170,.15), 0 14px 30px rgba(154,220,0,.13);
}
.progress-screen .progress-metric:nth-child(4)::after { background: var(--progress-lime); }

.progress-screen .progress-metric:hover,
.progress-screen .progress-metric:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 18px 34px rgba(0,0,0,.3);
  outline: none;
}

.progress-screen .progress-metric-icon {
  border: 1px solid color-mix(in srgb, var(--metric-color) 62%, white 8%);
  background: color-mix(in srgb, var(--metric-color) 24%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--metric-color) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.16);
}
.progress-screen .progress-metric-copy strong { color: #f7fbff; }
.progress-screen .progress-metric-copy b { color: #fff; }
.progress-screen .progress-metric-copy small { color: rgba(231,240,244,.72); }
.progress-screen .progress-mini-bar { background: rgba(0,0,0,.34); }
.progress-screen .progress-mini-bar em { box-shadow: 0 0 10px var(--metric-color); }
.progress-screen .progress-chevron { color: rgba(255,255,255,.7); }

.progress-screen .progress-chart-card {
  border: 1px solid rgba(183,255,0,.28);
  background: linear-gradient(145deg, rgba(24,39,29,.97), rgba(13,20,24,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 32px rgba(0,0,0,.23);
}
.progress-screen .progress-chart-card:nth-of-type(2) {
  border-color: rgba(255,155,47,.3);
  background: linear-gradient(145deg, rgba(54,35,22,.97), rgba(19,22,25,.98));
}
.progress-screen .progress-chart-card:nth-of-type(3) {
  border-color: rgba(173,140,255,.3);
  background: linear-gradient(145deg, rgba(42,32,65,.97), rgba(18,21,27,.98));
}
.progress-screen .progress-bar-track { background: rgba(255,255,255,.11); }
.progress-screen .progress-bar-track em { box-shadow: 0 0 12px currentColor; }

@media (max-width: 520px) {
  .progress-screen .progress-metric {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 22px rgba(0,0,0,.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-screen .progress-metric { transition: none; }
}