#studio .studio-bundle { margin: 16px 0; padding: 16px; border: 1px solid transparent; border-radius: 16px; background: linear-gradient(145deg,#111e30,#101827) padding-box,linear-gradient(120deg,#4974b977,#8269bd66,#43b6c977) border-box; color: #eaf2ff; }
#studio .studio-bundle-heading { display: flex; align-items: center; gap: 12px; }
#studio .studio-bundle-heading > div { flex: 1; min-width: 0; }
#studio .studio-bundle h3 { margin: 0; font: inherit; font-size: 16px; font-weight: 650; line-height: 1.35; }
#studio .studio-bundle p { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: #bacbdd; }
#studio .studio-bundle-gift { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid #839feb44; border-radius: 11px; color: #b8ccff; background: #5980ed14; position: relative; }
#studio .studio-bundle-gift::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; border-radius: 50%; background: #7ee4ce; border: 2px solid #111e30; }
#studio .studio-bundle .studio-bundle-math { margin-top: 12px; }
#studio .studio-bundle-math strong { color: #dce8f7; font-weight: 500; }
#studio .studio-bundle-saving { margin-top: 14px; padding: 12px; border: 1px solid #6de0bf25; border-radius: 10px; background: #53cdb50b; }
#studio .studio-bundle-saving > strong { color: #8be6cd; font-size: 17px; line-height: 1.4; font-weight: 650; }
#studio .studio-bundle-saving p { color: #bed9d3; }
#studio .studio-bundle-next { border-top: 1px solid #a2bade22; margin-top: 16px; padding-top: 14px; }
#studio .studio-bundle h4 { margin: 0 0 9px; font: inherit; font-size: 13px; font-weight: 600; color: #d7e7ff; }
#studio .studio-bundle-status { display: grid; gap: 8px; font-size: 13px; line-height: 1.5; }
#studio .studio-bundle-status strong { font-weight: 500; }
#studio .studio-bundle-status span { color: #a7d0f8; font-size: 12px; }
#studio .studio-bundle-meter { margin: 9px 0; height: 6px; background: #adc9f218; border-radius: 8px; overflow: hidden; }
#studio .studio-bundle-meter > span { display: block; width: var(--bundle-fill); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7895ef,#60c9eb); }
#studio .studio-bundle-meter.is-updating > span { animation: studio-bundle-fill .4s ease-out both; }
#studio .studio-bundle .studio-bundle-completed { color: #8be6cd; }
#studio .studio-bundle .studio-bundle-invitation { color: #a7c6e8; }
#studio .studio-bundle-excluded { border-top: 1px solid #a2bade22; padding-top: 12px; }
#studio .studio-bundle-details { margin-top: 12px; }
#studio .studio-bundle-details summary { cursor: pointer; color: #c4d9f2; font-size: 12px; line-height: 1.5; padding: 4px 0; }
#studio .studio-bundle-details summary:focus-visible { outline: 2px solid #a7d0f8; outline-offset: 3px; border-radius: 4px; }
#studio .studio-bundle.is-unlocked { animation: studio-bundle-unlock .7s ease-out; }
@keyframes studio-bundle-fill { from { width: var(--bundle-before); } to { width: var(--bundle-fill); } }
@keyframes studio-bundle-unlock { 40% { border-color: #81dfc9; box-shadow: 0 0 12px #50ddc822; } }
@media (max-width: 360px) { #studio .studio-bundle { padding: 13px; } #studio .studio-bundle-heading { gap: 9px; } }
@media (prefers-reduced-motion: reduce) { #studio .studio-bundle.is-unlocked,#studio .studio-bundle-meter.is-updating > span { animation: none; } }

#studio .studio-bundle { position: relative; overflow: hidden; }
#studio .studio-reward-confetti { position: absolute; inset: 0; pointer-events: none; }
#studio .studio-reward-confetti i { position: absolute; top: 5%; left: 15%; width: 4px; height: 7px; background: #8be6cd; opacity: 0; animation: studio-reward-confetti 1s ease-out both; }
#studio .studio-reward-confetti i:nth-child(2) { left: 30%; background: #7895ef; animation-delay: .08s; }
#studio .studio-reward-confetti i:nth-child(3) { left: 45%; animation-delay: .13s; }
#studio .studio-reward-confetti i:nth-child(4) { left: 60%; background: #60c9eb; animation-delay: .05s; }
#studio .studio-reward-confetti i:nth-child(5) { left: 75%; animation-delay: .1s; }
#studio .studio-reward-confetti i:nth-child(6) { left: 85%; background: #7895ef; animation-delay: .15s; }
@keyframes studio-reward-confetti { 15% { opacity: .8; } 100% { opacity: 0; transform: translateY(95px) rotate(130deg); } }
@media (prefers-reduced-motion: reduce) { #studio .studio-reward-confetti { display: none; } }