.success {
  overflow: hidden;
  border: 1.5px solid #17623b;
  box-shadow: 5px 5px 0 #171715;
}
.upload-field { gap: 9px; }
.file-drop {
  display: flex; align-items: center; gap: 13px; min-height: 82px; padding: 14px;
  border: 1.5px dashed #b7a998; border-radius: 15px; background: linear-gradient(120deg,#fffdf8,#fff5e7);
  color: #171715; cursor: pointer; font: inherit; letter-spacing: normal; text-transform: none;
  transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.file-drop:hover { transform: translateY(-2px); border-color: #a9271d; box-shadow: 0 8px 22px rgba(71,44,20,.09); }
.upload-field:focus-within .file-drop { outline: 3px solid #174ea6; outline-offset: 3px; }
.file-symbol { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #171715; border-radius: 13px; background: #ffd45a; box-shadow: 2px 2px 0 #171715; font-size: 23px; font-weight: 800; }
.file-copy { display: grid; gap: 5px; min-width: 0; }
.file-copy strong { font-size: 12px; font-weight: 900; }
.file-copy small { color: #70685f; font-size: 10px; line-height: 1.45; font-weight: 600; }
.file-browse { margin-left: auto; padding: 9px 11px; border: 1px solid #171715; border-radius: 999px; background: #fff; font-size: 10px; font-weight: 900; white-space: nowrap; }
.file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); border: 0; }
.file-status { display: flex; align-items: center; gap: 7px; min-height: 18px; color: #716960; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.file-status.is-ready, .file-status.is-uploaded { color: #17623b; font-weight: 800; }
.file-status.is-uploading { color: #8b5b00; font-weight: 800; }
.file-status.is-error { color: #a9231c; font-weight: 800; }
.file-status.is-ready::before, .file-status.is-uploaded::before { content: "✓"; display: grid; place-items: center; flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%; background: #d9f1df; font-weight: 900; animation: successBounce .42s cubic-bezier(.18,.8,.25,1) both; }
.file-status.is-uploading::before { content: ""; flex: 0 0 13px; width: 13px; height: 13px; border: 2px solid #d9c49a; border-top-color: #a56600; border-radius: 50%; animation: spin .8s linear infinite; }
.file-status.is-error::before { content: "!"; display: grid; place-items: center; flex: 0 0 17px; height: 17px; border-radius: 50%; background: #ffe1dc; }
.file-status.is-uploaded { animation: successBounce .45s cubic-bezier(.18,.8,.25,1) both; }
.file-drop:has(+ .file-input:focus-visible) { outline: 3px solid #174ea6; outline-offset: 3px; }
.success.celebrate { animation: success-card-in .5s cubic-bezier(.18,.8,.25,1) both; }
.success > :not(.celebration-burst) { position: relative; z-index: 1; }
.success h3 { font-size: clamp(24px, 4vw, 32px); letter-spacing: -.04em; }
.success-lead { max-width: 560px; color: #355c43; font-size: 13px; line-height: 1.65; }
.celebration-burst {
  position: absolute; z-index: 0; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.celebration-balloon {
  position: absolute; bottom: 13%; left: var(--x); width: 21px; height: 28px;
  border: 1px solid #17171555; border-radius: 52% 48% 48% 52%;
  background: var(--balloon-color); opacity: 0;
  box-shadow: inset -4px -3px 0 #00000010;
  animation: balloon-launch 1.55s cubic-bezier(.2,.7,.3,1) var(--delay) both;
}
.celebration-balloon::before {
  content: ""; position: absolute; left: 8px; bottom: -4px; width: 5px; height: 6px;
  background: inherit; clip-path: polygon(50% 100%,0 0,100% 0);
}
.celebration-balloon::after {
  content: ""; position: absolute; top: calc(100% + 3px); left: 10px; width: 1px;
  height: 32px; background: #554f4755; transform: rotate(5deg); transform-origin: top;
}
.celebration-confetti {
  position: absolute; top: 48%; left: 50%; width: 8px; height: 12px;
  border-radius: 2px; background: var(--confetti-color); opacity: 0;
  animation: confetti-burst 950ms cubic-bezier(.15,.65,.25,1) var(--delay) both;
}
.celebration-confetti:nth-child(3n) { width: 6px; height: 6px; border-radius: 50%; }
@keyframes success-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes balloon-launch {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(.25); }
  16% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), -235px) rotate(var(--tilt)) scale(.82); }
}
@keyframes confetti-burst {
  0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.3); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.75); }
}
@media (prefers-reduced-motion: reduce) {
  .success.celebrate { animation: none; }
  .celebration-burst { display: none; }
  .file-status.is-ready::before, .file-status.is-uploaded::before, .file-status.is-uploaded { animation: none; }
  .file-status.is-uploading::before { animation: none; }
}