.promo-vault-card {
  --vault-steel-hi: #4c5563;
  --vault-steel: #2b323d;
  --vault-steel-lo: #171c23;
  --vault-gold: #e8a33d;
  --vault-error: #e05252;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 474px;
  padding: 22px;
  border: 1px solid rgba(232, 163, 61, 0.22);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 35%, rgba(232, 163, 61, 0.09), transparent 35%), linear-gradient(145deg, #181b21, #0c0e12 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 45px rgba(0, 0, 0, 0.28);
  color: #f8fafc;
  -webkit-font-smoothing: antialiased;
}

.promo-vault-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .24;
  background-image: repeating-linear-gradient(115deg, transparent 0 12px, rgba(255,255,255,.025) 13px 14px);
}

.promo-vault-heading { margin-bottom: 16px; text-align: center; }
.promo-vault-eyebrow { margin: 0 0 4px; color: var(--vault-gold); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.promo-vault-title { margin: 0; color: #fff; font-size: clamp(20px, 2.1vw, 26px); font-weight: 800; line-height: 1.15; }
.promo-vault-subtitle { margin: 7px auto 0; max-width: 34ch; color: #aeb4bf; font-size: 13px; line-height: 1.45; }

.promo-vault-stage { position: relative; display: grid; place-items: center; min-height: 236px; perspective: 1000px; }
.promo-vault-safe { position: relative; width: 316px; max-width: 100%; height: 216px; border-radius: 26px; background: linear-gradient(160deg, #333b47, #232a34 42%, #2b323d 68%, #14181f); box-shadow: inset 0 1px rgba(255,255,255,.09), inset 0 -2px 6px rgba(0,0,0,.5), 0 22px 44px rgba(2,4,8,.55); }
.promo-vault-shadow { position: absolute; left: 50%; bottom: -22px; width: 85%; height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(2,4,8,.5), transparent 72%); }
.promo-vault-interior { position: absolute; inset: 10px; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #191412, #0e0b09 70%); box-shadow: inset 0 0 26px rgba(0,0,0,.85); }
.promo-vault-room { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 42%), repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 22px); }
.promo-vault-bars { position: absolute; right: 22px; bottom: 16px; width: 128px; height: 62px; filter: brightness(.32); transition: filter 1s cubic-bezier(.3,.6,.3,1) .25s; }
.promo-vault-bars span { position: absolute; width: 58px; height: 18px; border-radius: 3px; background: linear-gradient(#f0c968, #cf9c3a 46%, #8f671f); box-shadow: inset 0 1.5px rgba(255,240,190,.75), inset 0 -2px 2px rgba(60,38,6,.55), 0 3px 5px rgba(0,0,0,.5); }
.promo-vault-bars span::after { content: ''; position: absolute; inset: 3px 7px; border: 1px solid rgba(90,60,12,.4); border-radius: 2px; }
.promo-vault-bars span:nth-child(1) { left: 2px; bottom: 0; } .promo-vault-bars span:nth-child(2) { left: 64px; bottom: 0; } .promo-vault-bars span:nth-child(3) { left: 20px; bottom: 20px; transform: rotate(-1.2deg); } .promo-vault-bars span:nth-child(4) { left: 66px; bottom: 20px; width: 54px; transform: rotate(1.6deg); } .promo-vault-bars span:nth-child(5) { left: 40px; bottom: 40px; transform: rotate(-2deg); }
.promo-vault-barsweep { position: absolute; right: 0; bottom: 0; width: 220px; height: 130px; background: linear-gradient(115deg, transparent 34%, rgba(255,244,214,.5) 50%, transparent 66%); mix-blend-mode: screen; opacity: 0; transform: translateX(-170px); }
.promo-vault-glow { position: absolute; inset: 0; background: radial-gradient(130% 120% at 82% 50%, rgba(238,178,82,.5), rgba(238,178,82,.14) 42%, transparent 68%); opacity: 0; transition: opacity .9s cubic-bezier(.3,.6,.3,1); }
.promo-vault-granted { position: absolute; right: 22px; top: 20px; padding: 7px 12px; border: 1px solid rgba(238,190,110,.4); border-radius: 10px; background: rgba(24,16,6,.72); color: #f2cf8d; font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s cubic-bezier(.16,.84,.3,1); }
.promo-vault-door { position: absolute; inset: 10px; z-index: 2; transform: rotateY(.001deg); transform-style: preserve-3d; transform-origin: 0 50%; transition: transform 1.15s cubic-bezier(.52,.02,.26,1); }
.promo-vault-face { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.07), transparent 46%), linear-gradient(160deg, var(--vault-steel-hi), var(--vault-steel) 40%, #242b35 72%, var(--vault-steel-lo)); box-shadow: inset 0 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(0,0,0,.35), inset -10px 0 18px rgba(0,0,0,.28); backface-visibility: hidden; }
.promo-vault-edge { position: absolute; top: 2px; right: 0; bottom: 2px; width: 17px; border-radius: 2px; background: linear-gradient(#39414c, #21262e 55%, #14181e); transform: rotateY(90deg); transform-origin: 100% 50%; }
.promo-vault-rivet { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5d6675, #2a313b 62%, #171c22); box-shadow: 0 1px 1px rgba(0,0,0,.55), inset 0 -1px 1px rgba(0,0,0,.4); }
.promo-vault-rivet-1 { left: 12px; top: 12px; } .promo-vault-rivet-2 { left: 12px; bottom: 12px; } .promo-vault-rivet-3 { right: 30px; top: 12px; } .promo-vault-rivet-4 { right: 30px; bottom: 12px; } .promo-vault-rivet-5 { left: 12px; top: 50%; } .promo-vault-rivet-6 { right: 30px; top: 50%; }
.promo-vault-wheel { position: absolute; right: 34px; top: 50%; width: 96px; height: 96px; margin-top: -48px; border: 7px solid #495360; border-radius: 50%; filter: drop-shadow(0 5px 7px rgba(0,0,0,.45)); transform: rotate(var(--vault-wheel, 0deg)); transition: transform 1.5s cubic-bezier(.16,.82,.2,1); }
.promo-vault-wheel-spoke { position: absolute; left: 50%; top: 50%; width: 8px; height: 84px; margin: -42px 0 0 -4px; border-radius: 8px; background: linear-gradient(90deg, #303742, #626c78, #303742); }
.promo-vault-wheel-spoke-2 { transform: rotate(120deg); } .promo-vault-wheel-spoke-3 { transform: rotate(240deg); }
.promo-vault-wheel-hub { position: absolute; inset: 29px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #6a7480, #3a424d 60%, #20252d); box-shadow: inset 0 0 0 3px #171b21; }
.promo-vault-bolts { position: absolute; right: 6px; top: 50%; width: 20px; height: 150px; margin-top: -75px; }
.promo-vault-bolts span { position: absolute; right: 0; width: 34px; height: 10px; border-radius: 5px; background: linear-gradient(#626c7a, #3d454f 48%, #262c34); box-shadow: inset 0 1px rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.6); transform: translateX(12px); transition: transform .24s cubic-bezier(.5,.05,.3,1.25); } .promo-vault-bolts span:nth-child(1) { top: 8px; } .promo-vault-bolts span:nth-child(2) { top: 70px; } .promo-vault-bolts span:nth-child(3) { top: 132px; }
.promo-vault-card.is-unlocking .promo-vault-wheel { --vault-wheel: 390deg; }
.promo-vault-card.is-bolt-1 .promo-vault-bolts span:nth-child(1),
.promo-vault-card.is-bolt-2 .promo-vault-bolts span:nth-child(2),
.promo-vault-card.is-bolt-3 .promo-vault-bolts span:nth-child(3) {
  transform: translateX(-21px);
  animation: promo-vault-bolt-flash .3s ease;
}
.promo-vault-card.is-shiver-1 .promo-vault-stage { animation: promo-vault-shiver-1 .26s ease; }
.promo-vault-card.is-shiver-2 .promo-vault-stage { animation: promo-vault-shiver-2 .3s ease; }
.promo-vault-card.is-shiver-3 .promo-vault-stage { animation: promo-vault-shiver-3 .44s cubic-bezier(.3,.9,.4,1.4); }
.promo-vault-card.is-open .promo-vault-door { transform: rotateY(-62deg); }
.promo-vault-card.is-open .promo-vault-glow { opacity: 1; }
.promo-vault-card.is-open .promo-vault-bars { filter: brightness(1); }
.promo-vault-card.is-revealing .promo-vault-barsweep { animation: promo-vault-sweep 1.5s cubic-bezier(.4,.1,.3,1) forwards; }
.promo-vault-card.is-revealing .promo-vault-granted { opacity: 1; transform: translateY(0); }
.promo-vault-card.is-closing .promo-vault-door { transform: rotateY(.001deg); transition-duration: .92s; transition-timing-function: cubic-bezier(.62,.02,.34,1); }
.promo-vault-card.is-closing .promo-vault-glow { opacity: 0; transition: opacity .55s ease .3s; }
.promo-vault-card.is-closing .promo-vault-bars { filter: brightness(.32); transition: filter .5s ease; }
.promo-vault-card.is-closing .promo-vault-granted { opacity: 0; transform: translateY(8px); transition: opacity .3s ease; }
.promo-vault-card.is-relocking .promo-vault-wheel { --vault-wheel: 0deg; transition-duration: .85s; }
@keyframes promo-vault-bolt-flash { 30% { filter: brightness(1.9); } }
@keyframes promo-vault-shiver-1 { 35% { transform: translateX(-1px); } 70% { transform: translateX(.6px); } }
@keyframes promo-vault-shiver-2 { 30% { transform: translateX(-2px) rotate(-.12deg); } 62% { transform: translateX(1.2px); } }
@keyframes promo-vault-shiver-3 { 24% { transform: translateX(-3px) rotate(-.2deg); } 48% { transform: translate(1.8px, 1.4px); } 74% { transform: translate(-.6px, 2px); } 88% { transform: translateY(1.2px); } }
@keyframes promo-vault-sweep { 0% { opacity: 0; transform: translateX(-150px); } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(150px); } }

.promo-vault-form { position: absolute; left: 26px; top: 27px; z-index: 4; width: 140px; }
.promo-vault-label { display: block; color: #8b96a5; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.promo-vault-input { display: block; width: 100%; margin-top: 7px; padding: 4px 2px 7px; border: 0; outline: 0; background: transparent; color: #e6ebf2; caret-color: var(--vault-gold); font: 700 17px/1.2 inherit; letter-spacing: .06em; text-transform: none; }
.promo-vault-input::placeholder { color: rgba(230,235,242,.32); font-weight: 500; letter-spacing: .18em; }
.promo-vault-input-line { display: block; position: relative; height: 2px; overflow: hidden; border-radius: 1px; background: rgba(210,226,246,.14); }
.promo-vault-input-line::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--vault-gold); box-shadow: 0 0 8px rgba(232,163,61,.55); transform: scaleX(0); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.promo-vault-card.is-focus .promo-vault-input-line::after { transform: scaleX(1); }
.promo-vault-card.is-error .promo-vault-input-line::after { background: var(--vault-error); box-shadow: 0 0 8px rgba(224,82,82,.5); transform: scaleX(1); }
.promo-vault-gears { display: flex; align-items: center; gap: 2px; width: 92px; height: 31px; margin-top: 8px; padding: 4px 9px; border-radius: 9px; background: linear-gradient(#141920,#1b212a); box-shadow: inset 0 2px 5px rgba(0,0,0,.65), inset 0 -1px rgba(255,255,255,.05); }
.promo-vault-gears i { display: block; width: 20px; height: 20px; border: 4px dashed #434c59; border-radius: 50%; background: #252c35; transform: rotate(var(--gear-a, 0deg)); transition: transform .3s cubic-bezier(.3,1.9,.45,1); }
.promo-vault-gears i:nth-child(2) { width: 16px; height: 16px; --gear-a: var(--gear-b, 22deg); } .promo-vault-gears i:nth-child(3) { width: 13px; height: 13px; --gear-a: var(--gear-c, 8deg); }
.promo-vault-submit { margin-top: 7px; padding: 6px 14px 7px; border: 1px solid rgba(210,226,246,.14); border-radius: 9px; background: linear-gradient(rgba(233,239,247,.07),rgba(233,239,247,.02)); color: #cfd7e2; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .2s, transform .16s, border-color .2s; }
.promo-vault-submit:hover:not(:disabled) { border-color: rgba(210,226,246,.28); background: linear-gradient(rgba(233,239,247,.12),rgba(233,239,247,.04)); } .promo-vault-submit:active:not(:disabled) { transform: translateY(1px) scale(.97); } .promo-vault-submit:focus-visible { outline: 2px solid var(--vault-gold); outline-offset: 3px; } .promo-vault-submit:disabled { cursor: wait; opacity: .55; }
.promo-vault-submit-spinner { display: none; width: 14px; height: 14px; margin: auto; border: 2px solid rgba(207,215,226,.25); border-top-color: #cfd7e2; border-radius: 50%; animation: promo-vault-spin .7s linear infinite; }
.promo-vault-card.is-loading .promo-vault-submit-text { display: none; } .promo-vault-card.is-loading .promo-vault-submit-spinner { display: block; }
.promo-vault-card.is-error .promo-vault-wheel { animation: promo-vault-jam .82s cubic-bezier(.36,.07,.19,.97); }
.promo-vault-card.is-error .promo-vault-form { animation: promo-vault-form-shake .24s ease; }
@keyframes promo-vault-spin { to { transform: rotate(360deg); } }
@keyframes promo-vault-jam { 22% { transform: rotate(84deg); } 34% { transform: rotate(78deg); } 58% { transform: rotate(6deg); } 70% { transform: rotate(14deg); } 82% { transform: rotate(-3deg); } }
@keyframes promo-vault-form-shake { 30% { transform: translateX(-4px); } 65% { transform: translateX(3px); } }

.promo-vault-status { min-height: 58px; margin-top: 11px; padding: 10px 12px; border: 1px solid transparent; border-radius: 11px; color: #aeb4bf; font-size: 13px; line-height: 1.4; text-align: center; opacity: 0; transition: opacity .2s, border-color .2s, background .2s; }
.promo-vault-status:not(:empty) { opacity: 1; }
.promo-vault-card.is-error .promo-vault-status { border-color: rgba(248,113,113,.42); background: rgba(127,29,29,.18); color: #fecaca; }
.promo-vault-card.is-error .promo-vault-safe { animation: promo-vault-shake .38s ease; }
@keyframes promo-vault-shake { 25% { transform: translateX(-5px) rotate(-1deg); } 55% { transform: translateX(5px) rotate(1deg); } 80% { transform: translateX(-2px); } }
.promo-vault-card.is-success .promo-vault-status { border-color: rgba(244,201,93,.38); background: rgba(113,74,13,.2); color: #ffefb7; }
.promo-vault-result-code { display: block; margin-bottom: 2px; color: #fff3c9; font-size: 16px; font-weight: 900; letter-spacing: .1em; }

.promo-vault-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 11px 12px; border: 1px solid rgba(244,201,93,.38); border-radius: 11px; background: rgba(113,74,13,.2); }
.promo-vault-applied-copy { min-width: 0; display: grid; gap: 2px; text-align: left; }
.promo-vault-applied-label { color: #c8b98b; font-size: 11px; font-weight: 700; }
.promo-vault-applied .promo-vault-result-code { overflow-wrap: anywhere; margin: 0; letter-spacing: .04em; text-transform: none; }
.promo-vault-applied-discount { color: #ffefb7; font-size: 12px; }
.promo-vault-remove { flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,239,183,.32); border-radius: 9px; background: rgba(0,0,0,.2); color: #ffefb7; cursor: pointer; }
.promo-vault-remove:hover:not(:disabled) { border-color: rgba(255,239,183,.62); background: rgba(0,0,0,.34); }
.promo-vault-remove:focus-visible { outline: 2px solid var(--vault-gold); outline-offset: 2px; }
.promo-vault-remove:disabled { cursor: wait; opacity: .55; }

@media (max-width: 560px) {
  .promo-vault-card { min-height: 438px; padding: 18px 12px; border-radius: 17px; }
  .promo-vault-heading { margin-bottom: 8px; }
  .promo-vault-subtitle { font-size: 12px; }
  .promo-vault-stage { min-height: 196px; }
  .promo-vault-safe { max-width: none; transform: scale(.82); }
  .promo-vault-status { min-height: 58px; margin-top: 3px; }
  .promo-vault-applied { margin-inline: 4px; }
}

@media (max-width: 360px) {
  .promo-vault-safe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.76); }
  .promo-vault-card.is-error .promo-vault-safe { animation: promo-vault-shake-narrow .38s ease; }
  @keyframes promo-vault-shake-narrow {
    25% { transform: translate(-50%, -50%) translateX(-5px) rotate(-1deg) scale(.76); }
    55% { transform: translate(-50%, -50%) translateX(5px) rotate(1deg) scale(.76); }
    80% { transform: translate(-50%, -50%) translateX(-2px) scale(.76); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-vault-card *, .promo-vault-card *::before, .promo-vault-card *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}