.steps-mini-app { margin-top: 1em; }
.steps-answer { border: 2px solid #8fb49a; background: #f5fbf6; padding: 1.1em; margin: 0 0 1em 0; position: relative; overflow: hidden; }
.steps-answer-kicker { margin: 0 0 0.25em 0; color: #315d40; font-weight: bold; text-transform: uppercase; letter-spacing: 0; }
.steps-answer-main { margin: 0 0 0.35em 0; font-size: 1.45em; line-height: 1.25; }
.steps-answer-main strong { color: #17351f; }
.steps-unit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6em; margin: 1em 0; }
.steps-unit-grid div { border: 1px solid #c8d7cc; background: #fff; padding: 0.75em; text-align: center; }
.steps-unit-grid strong { display: block; font-size: 1.3em; line-height: 1.2; }
.steps-unit-grid span { display: block; color: #555; }
.steps-answer-goal { border-top: 1px solid #c8d7cc; margin-top: 1em; padding-top: 0.85em; position: relative; }
.steps-answer-goal-title { color: #315d40; font-weight: bold; margin: 0 0 0.35em 0; }
.steps-answer-goal p { margin: 0.45em 0; }
#answer-goal-last { color: #555; display: inline-block; margin-left: 0.75em; }
.steps-mini-app button {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6dc 100%);
  border: 1px solid #7f8f7d;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.12);
  color: #14251b;
  cursor: pointer;
  display: inline-block;
  font: bold 1em Arial, sans-serif;
  line-height: 1.2;
  margin: 0.15em 0.25em 0.15em 0;
  min-height: 42px;
  padding: 0.65em 1em;
  text-align: center;
  text-decoration: none;
}
.steps-mini-app button:hover {
  background: linear-gradient(180deg, #ffffff 0%, #cfe1c9 100%);
  border-color: #58745d;
}
.steps-mini-app button:focus-visible {
  outline: 3px solid #8fb49a;
  outline-offset: 2px;
}
#answer-add-steps, #add-today, #save-route, #save-stride {
  background: linear-gradient(180deg, #f7fff5 0%, #bfe2b7 100%);
  border-color: #5f8a5f;
}
#reset-progress, #clear-steps-data {
  background: linear-gradient(180deg, #ffffff 0%, #e2e2e2 100%);
  border-color: #8b8b8b;
  color: #333;
}
.steps-panel { border: 1px solid #ccd5df; background: #f7f8fa; padding: 1em; margin: 0 0 1em 0; }
#goal-tracker-panel { position: relative; overflow: hidden; }
.steps-panel h3 { padding-top: 0; }
.steps-cta { background: #fff; }
.steps-custom { display: none; border-top: 1px solid #d6dde5; margin-top: 1em; padding-top: 0.75em; }
.steps-custom.needs-input { border-top-color: #c0392b; }
.steps-custom.is-saved { border-top-color: #6aa36f; }
.steps-custom-alert { border: 1px solid #d6dde5; background: #fff; padding: 0.65em 0.8em; margin: 0.75em 0; font-weight: bold; }
.steps-custom-alert.needs-input { border-color: #c0392b; background: #fff4f2; color: #8a1f11; }
.steps-custom-alert.is-saved { border-color: #6aa36f; background: #f2fbf3; color: #245b2d; }
.steps-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 0.75em; margin: 1em 0; }
.steps-card { border: 1px solid #d6dde5; background: #fff; padding: 0.85em; text-align: center; }
.steps-card strong { display: block; font-size: 1.35em; line-height: 1.2; }
.steps-card span { display: block; color: #333; font-weight: bold; }
.steps-card small { display: block; color: #666; font-size: 0.86em; margin-top: 0.4em; line-height: 1.35; }
.steps-route-card button { margin-top: 0.75em; }
.steps-route-card .steps-link-button { border: 0; background: transparent; box-shadow: none; color: #555; text-decoration: underline; min-height: 0; padding: 0.3em 0.45em; }
.steps-panel input, .steps-panel select { max-width: 20em; width: 92%; padding: 0.45em; }
.steps-goal-distance { display: flex; flex-wrap: wrap; gap: 0.75em; align-items: flex-end; }
.steps-goal-distance p { margin-top: 0; }
.steps-goal-distance input { max-width: 12em; }
.steps-goal-distance select { width: auto; min-width: 10em; }
.steps-progress { position: relative; width: 100%; height: 1em; background: #e2e6ea; border: 1px solid #c8d0d8; overflow: hidden; margin: 0.9em 0 0 0; clear: both; }
.steps-progress span { display: block; width: 0; height: 100%; }
#goal-bar, #answer-goal-bar { position: absolute; left: 0; top: 0; z-index: 1; background: #5f9d68; transition: width 0.55s ease; }
#goal-pending-bar, #answer-goal-pending-bar { position: absolute; top: 0; z-index: 2; background: #5d94c9; opacity: 0.78; transition: left 0.55s ease, width 0.55s ease; }
.goal-medal-field { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; overflow: hidden; background: transparent; }
.steps-progress.is-adding #goal-bar, .steps-progress.is-adding #goal-pending-bar, .steps-progress.is-adding #answer-goal-bar, .steps-progress.is-adding #answer-goal-pending-bar { transition-duration: 1.1s; }
.steps-progress.is-complete { box-shadow: 0 0 0 2px #d7a928 inset; }
.steps-progress-compact { margin-top: 0.65em; }
.steps-progress-labels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1em; clear: both; color: #555; font-size: 0.9em; line-height: 1.25; margin: 0.55em 0 0 0; min-height: 1.25em; position: relative; z-index: 1; }
.steps-progress-labels span { display: block; overflow-wrap: anywhere; }
#goal-start-label { text-align: left; }
#goal-end-label { text-align: right; }
#goal-prestige { display: none; color: #6b4c00; font-weight: bold; }
.steps-goal-drawer { border-top: 1px solid #d6dde5; margin-top: 0.9em; padding-top: 0.65em; }
.steps-goal-drawer summary { cursor: pointer; font-weight: bold; }
.steps-goal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6em; margin-top: 0.75em; }
.steps-goal-stats div { border: 1px solid #d6dde5; background: #fff; padding: 0.65em; }
.steps-goal-stats strong { display: block; font-size: 1.12em; line-height: 1.25; }
.steps-goal-stats span { display: block; color: #555; font-size: 0.86em; line-height: 1.25; margin-top: 0.2em; }
.goal-medal { position: absolute; bottom: var(--medal-bottom, 0); width: 1.2em !important; height: 1.2em !important; font-size: 1.45em; line-height: 1; background: transparent !important; animation: goal-medal-flight 1.65s ease-out forwards; }
@keyframes goal-medal-flight {
  0% { opacity: 0; transform: translate(0, 0) scale(0.75) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--medal-drift), calc(-1 * var(--medal-rise, 130px))) scale(1.28) rotate(22deg); }
}

@media (max-width: 751px) {
  .steps-card-grid, .steps-unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-answer-main { font-size: 1.2em; }
}