@media (max-width: 640px) {
  .site-header { padding: .75rem; }
  .credit-balance { border-radius: 14px; }
  .completion-overlay-card { max-height: calc(100vh - 1rem); overflow: hidden; }
  .history-settle-proxy { top: max(.75rem, env(safe-area-inset-top)); right: .75rem; }
}
@media (max-width: 360px) {
  .app-frame { width: min(100% - .75rem, 1200px); }
  .site-header { border-radius: 16px; }
  .brand-mark { flex-basis: 42px; width: 42px; height: 42px; }
  .header-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .header-actions .button { min-width: 0; padding-inline: .65rem; }
  .prismatic-credit-token { flex-basis: 26px; width: 26px; height: 26px; }
  .commitment-item { padding: .88rem; }
  .history-settle-proxy, .credit-return-proxy { max-width: calc(100vw - 1rem); right: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .brand-mark::after, .create-card::after { animation: none !important; }
  .button-primary::after { display: none; }
  .completion-stage-reduced.is-active .completion-overlay-card { animation: prism-completion-fade 620ms ease-out both !important; }
  .completion-stage-reduced .completion-overlay-card::after { opacity: .26; background: var(--prism-soft); transform: none; animation: none !important; }
  .completion-stage-reduced .completion-bloom, .completion-stage-reduced .credit-target-bloom { width: 180px; height: 180px; opacity: .2; transform: translate(-50%,-50%); animation: prism-static-bloom 520ms ease-out both !important; }
  .completion-stage-reduced .credit-return-flight, .completion-stage-reduced .credit-trail-dot, .completion-stage-reduced .prismatic-particle { display: none !important; }
  .credit-balance-receiving { animation: none !important; box-shadow: 0 0 0 2px rgba(111,247,184,.42), 0 0 28px rgba(89,245,255,.18); }
  .credit-balance-receiving::after { animation: none !important; }
  .history-arrival-completed, .history-arrival-canceled, .history-arrival-failed { animation-delay: 0ms !important; animation-duration: 360ms !important; }
  .quiet-resolution-stage.is-active .quiet-resolution-note { animation: prism-quiet-fade 520ms ease-out both !important; }
}
@keyframes prism-completion-fade { 0% { opacity: 0; transform: scale(.985); } 18%,74% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes prism-static-bloom { 0%,100% { opacity: 0; } 34% { opacity: .24; } }
@keyframes prism-quiet-fade { 0%,100% { opacity: 0; } 18%,72% { opacity: 1; } }

@media (forced-colors: active) {
  body::before, body::after, .brand-mark::after, .create-card::after, .prismatic-effects-layer { display: none !important; }
  .brand-name { color: CanvasText; background: none; -webkit-text-fill-color: currentColor; }
  .brand-mark, .button, .credit-balance, .duration-option, .card, .commitment-item, .outcome-item, .app-dialog, textarea, input[type="text"], progress { color: CanvasText; background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  progress::-webkit-progress-bar { background: Canvas; }
  progress::-webkit-progress-value, progress::-moz-progress-bar { background: Highlight; }
}

/* Text-zoom resilience: allow every semantic control and label to reflow instead of clipping. */
.brand,
.brand-copy,
.header-actions,
.card,
.duration-fieldset,
.duration-options,
.duration-option,
.duration-option > span,
.commitment-item,
.commitment-topline,
.countdown-row,
.progress-meta,
.item-actions {
  min-width: 0;
  max-width: 100%;
}
.brand-name { width: auto; }
.brand-name,
.brand-tagline,
.button,
.duration-option strong,
.duration-option small,
.commitment-topline > *,
.countdown-row > *,
.progress-meta > * {
  overflow-wrap: anywhere;
  white-space: normal;
}
.button { min-width: 0; max-width: 100%; text-align: center; line-height: 1.25; }

@media (max-width: 360px) {
  .brand { width: 100%; }
  .brand-copy { max-width: calc(100% - 3.25rem); }
  .duration-options { grid-template-columns: minmax(0, 1fr); }
  .duration-option { width: 100%; }
  .commitment-topline,
  .countdown-row,
  .progress-meta { align-items: flex-start; flex-wrap: wrap; }
}

/* Keep compact option labels and stake notes composed at every responsive size. */
.duration-option strong,
.duration-option small {
  display: block;
}

.cost-note {
  align-self: flex-start;
}

/* Repeat the spectrum inside the filled portion so even early progress reads as rainbow. */
progress::-webkit-progress-value {
  background: linear-gradient(90deg, #59f5ff, #6ff7b8, #ffe66d, #ff9364, #ff5ecb, #a967ff, #59f5ff);
  background-size: 90px 100%;
  background-repeat: repeat-x;
}

progress::-moz-progress-bar {
  background: linear-gradient(90deg, #59f5ff, #6ff7b8, #ffe66d, #ff9364, #ff5ecb, #a967ff, #59f5ff);
  background-size: 90px 100%;
  background-repeat: repeat-x;
}