/* /Components/Display/EventInfoOverlay.razor.rz.scp.css */
.glass-card-event[b-b9483jb1nf] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.glass-card-event[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent);
}

/* Shadow Glow Effect */
.shadow-glow[b-b9483jb1nf] {
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.5),
                0 0 40px rgba(236, 72, 153, 0.3);
}

/* Event Illustration Container */
.event-illustration-overlay[b-b9483jb1nf] {
    pointer-events: none;
    z-index: 50;
    position: absolute;
    width: 120px;
    height: 120px;
}

/* === MINI ILLUSTRATIONS === */

/* Birthday Cake Mini */
.birthday-cake-mini[b-b9483jb1nf] {
    position: relative;
    width: 90px;
    height: 90px;
    opacity: 0.9;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
    animation: birthdayBob 3s ease-in-out infinite;
}

.cake-base-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 30px;
    background: linear-gradient(135deg, #8D6E63 0%, #A1887F 50%, #BCAAA4 100%);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.2);
}

.cake-base-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    height: 5px;
    background: linear-gradient(90deg, #D7CCC8, #F5F5F5, #D7CCC8);
    border-radius: 3px;
}

.candle-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 20px;
    background: linear-gradient(180deg, #FFD54F, #FFC107);
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.flame-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 43px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #FF6B35, #F7931E);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flickerMini-b-b9483jb1nf 1s ease-in-out infinite alternate;
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.6);
}

@keyframes flickerMini-b-b9483jb1nf {
    0% { transform: translateX(-50%) scale(1) rotate(-1deg); }
    100% { transform: translateX(-50%) scale(1.1) rotate(1deg); }
}

@keyframes birthdayBobMini-b-b9483jb1nf {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-1px); }
}

/* Wedding Rings Mini */
.wedding-rings-mini[b-b9483jb1nf] {
    position: relative;
    width: 75px;
    height: 45px;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
    animation: weddingFloatMini-b-b9483jb1nf 4s ease-in-out infinite;
}

.ring-1-mini[b-b9483jb1nf] {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border: 4px solid #FFD700;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 50%);
    animation: ringShineMini-b-b9483jb1nf 2s ease-in-out infinite;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5);
}

.ring-1-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #FFF, transparent);
    border-radius: 50%;
    animation: diamondSparkleMini-b-b9483jb1nf 3s ease-in-out infinite;
}

.ring-2-mini[b-b9483jb1nf] {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border: 4px solid #C0C0C0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 50%);
    animation: ringShineMini-b-b9483jb1nf 2s ease-in-out infinite 0.5s;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5);
}

.ring-2-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #FFF, transparent);
    border-radius: 50%;
    animation: diamondSparkleMini-b-b9483jb1nf 3s ease-in-out infinite 0.5s;
}

@keyframes ringShineMini-b-b9483jb1nf {
    0%, 100% { box-shadow: 0 0 3px rgba(255, 215, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
    50% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.8), inset 0 1px 0 rgba(255,255,255,0.8); }
}

@keyframes diamondSparkleMini-b-b9483jb1nf {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes weddingFloatMini-b-b9483jb1nf {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-1px); }
}

/* Graduation Cap Mini */
.graduation-cap-mini[b-b9483jb1nf] {
    position: relative;
    width: 75px;
    height: 60px;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
    animation: graduationPrideMini-b-b9483jb1nf 3s ease-in-out infinite;
}

.cap-base-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 10px;
    background: linear-gradient(135deg, #1a1a1a, #333);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.1);
}

.cap-top-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 5px;
    background: linear-gradient(135deg, #1a1a1a, #333);
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.1);
}

.cap-top-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    right: 5px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.tassel-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 10px;
    right: 3px;
    width: 3px;
    height: 10px;
    background: linear-gradient(180deg, #FFD700, #FFA000);
    border-radius: 1.5px;
    animation: tasselSwayMini-b-b9483jb1nf 2s ease-in-out infinite;
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
}

.tassel-mini[b-b9483jb1nf]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -1px;
    width: 5px;
    height: 3px;
    background: #FFD700;
    border-radius: 50%;
}

@keyframes tasselSwayMini-b-b9483jb1nf {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(8deg); }
}

@keyframes graduationPrideMini-b-b9483jb1nf {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-1px); }
}

/* Anniversary Heart Mini */
.anniversary-heart-mini[b-b9483jb1nf] {
    position: relative;
    width: 68px;
    height: 60px;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4));
    animation: anniversaryGlowMini-b-b9483jb1nf 2s ease-in-out infinite;
}

.heart-main-mini[b-b9483jb1nf] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #FF1744, #E91E63, #FF1744);
    animation: heartbeatMini-b-b9483jb1nf 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 23, 68, 0.6), inset 0 2px 0 rgba(255,255,255,0.3);
}

.heart-main-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(255,255,255,0.8), transparent);
    border-radius: 50%;
}

.heart-main-mini[b-b9483jb1nf]:before,
.heart-main-mini[b-b9483jb1nf]:after {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 0;
    background: linear-gradient(135deg, #FF1744, #E91E63, #FF1744);
    border-radius: 50%;
    transform: rotate(-45deg);
    transform-origin: 0 50%;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.3);
}

.heart-main-mini[b-b9483jb1nf]:after {
    left: 0;
    top: -10px;
    transform: rotate(45deg);
    transform-origin: 100% 50%;
}

@keyframes heartbeatMini-b-b9483jb1nf {
    0%, 100% { transform: translate(-50%, -50%) rotate(-45deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(-45deg) scale(1.2); }
}

@keyframes anniversaryGlowMini-b-b9483jb1nf {
    0%, 100% { filter: drop-shadow(0 1px 3px rgba(255, 23, 68, 0.4)); }
    50% { filter: drop-shadow(0 1px 6px rgba(255, 23, 68, 0.8)); }
}

/* Baby Bottle Mini */
.baby-bottle-mini[b-b9483jb1nf] {
    position: relative;
    width: 45px;
    height: 68px;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4));
    animation: babyBottleRockMini-b-b9483jb1nf 3s ease-in-out infinite;
}

.bottle-body-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 30px;
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
    border-radius: 5px;
    border: 2px solid #90CAF9;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.1);
}

.bottle-body-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 1px;
    right: 1px;
    height: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
    border-radius: 1px;
}

.bottle-body-mini[b-b9483jb1nf]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 1px;
    right: 1px;
    height: 2px;
    background: linear-gradient(90deg, #81C784, #A5D6A7, #81C784);
    border-radius: 1px;
    animation: milkSwayMini-b-b9483jb1nf 3s ease-in-out infinite;
}

.bottle-nipple-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 8px;
    background: linear-gradient(135deg, #FFB74D, #FFA726);
    border-radius: 50% 50% 30% 30%;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 2px 2px rgba(0,0,0,0.2);
}

@keyframes babyBottleRockMini-b-b9483jb1nf {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    75% { transform: rotate(-1deg); }
}

@keyframes milkSwayMini-b-b9483jb1nf {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(0.5px); }
}

/* Party Hat Mini */
.party-hat-mini[b-b9483jb1nf] {
    position: relative;
    width: 60px;
    height: 75px;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
    animation: partyHatCelebrateMini-b-b9483jb1nf 2s ease-in-out infinite;
}

.hat-cone-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid #9C27B0;
    filter: drop-shadow(0 2px 4px rgba(156, 39, 176, 0.4));
}

.hat-cone-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    bottom: -25px;
    left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid rgba(255,255,255,0.2);
}

.hat-pom-mini[b-b9483jb1nf] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 30% 30%, #FFD700, #FFA000);
    border-radius: 50%;
    animation: pomBounceMini-b-b9483jb1nf 1s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.6), inset 0 2px 0 rgba(255,255,255,0.5);
}

.hat-pom-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 3px;
    height: 3px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
}

@keyframes pomBounceMini-b-b9483jb1nf {
    0%, 100% { transform: translateX(-50%) translateY(0px) scale(1); }
    50% { transform: translateX(-50%) translateY(-2px) scale(1.1); }
}

@keyframes partyHatCelebrateMini-b-b9483jb1nf {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    75% { transform: rotate(-1deg); }
}

/* Family House Mini */
.family-house-mini[b-b9483jb1nf] {
    position: relative;
    width: 75px;
    height: 68px;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
    animation: familyWarmthMini-b-b9483jb1nf 4s ease-in-out infinite;
}

.house-base-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 20px;
    background: linear-gradient(135deg, #8D6E63 0%, #A1887F 50%, #BCAAA4 100%);
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.2);
}

.house-base-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 5px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    border-radius: 3px;
}

.house-roof-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 15px solid #D32F2F;
    filter: drop-shadow(0 2px 4px rgba(211, 47, 47, 0.4));
}

.house-roof-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: -15px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 10px solid rgba(255,255,255,0.2);
}

.house-door-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 10px;
    background: linear-gradient(135deg, #5D4037, #6D4C41);
    border-radius: 3px 3px 0 0;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.1);
}

.house-door-mini[b-b9483jb1nf]::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 1px;
    width: 2px;
    height: 2px;
    background: #FFD700;
    border-radius: 50%;
}

@keyframes familyWarmthMini-b-b9483jb1nf {
    0%, 100% { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
    50% { filter: drop-shadow(0 1px 3px rgba(255, 193, 7, 0.2)) drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
}

/* Briefcase Mini */
.briefcase-mini[b-b9483jb1nf] {
    position: relative;
    width: 60px;
    height: 45px;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
    animation: corporateBobMini-b-b9483jb1nf 2s ease-in-out infinite;
}

.case-body-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 15px;
    background: linear-gradient(135deg, #37474F 0%, #455A64 50%, #546E7A 100%);
    border-radius: 3px;
    border: 2px solid #263238;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.1);
}

.case-body-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    right: 5px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.case-body-mini[b-b9483jb1nf]::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 3px;
    background: #FFD700;
    border-radius: 1.5px;
}

.case-handle-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 5px;
    border: 2px solid #37474F;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
}

@keyframes corporateBobMini-b-b9483jb1nf {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-0.5px); }
}

/* Party Popper Mini */
.party-popper-mini[b-b9483jb1nf] {
    position: relative;
    width: 53px;
    height: 68px;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
    animation: celebrationBounceMini-b-b9483jb1nf 2s ease-in-out infinite;
}

.popper-body-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(15deg);
    width: 10px;
    height: 30px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA000 50%, #FF8F00 100%);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.3);
}

.popper-body-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 1px;
    right: 1px;
    height: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent);
    border-radius: 1px;
}

.popper-top-mini[b-b9483jb1nf] {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) rotate(15deg);
    width: 6px;
    height: 3px;
    background: linear-gradient(135deg, #FF5722, #E64A19);
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

.popper-top-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    right: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}

@keyframes celebrationBounceMini-b-b9483jb1nf {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-1px) rotate(1deg); }
    75% { transform: translateY(-0.5px) rotate(-1deg); }
}

/* Default Sparkles Mini */
.default-sparkles-mini[b-b9483jb1nf] {
    position: relative;
    width: 68px;
    height: 68px;
    opacity: 0.9;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4));
    animation: sparkleFloatMini-b-b9483jb1nf 3s ease-in-out infinite;
}

.sparkle-default-mini[b-b9483jb1nf] {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #FFD700, #FFA000);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: brilliantSparkleMini-b-b9483jb1nf 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.sparkle-default-mini[b-b9483jb1nf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.8), transparent 60%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: sparkleGlowMini-b-b9483jb1nf 3s ease-in-out infinite;
}

.sparkle-default-1-mini[b-b9483jb1nf] {
    top: 8px;
    left: 8px;
}

.sparkle-default-2-mini[b-b9483jb1nf] {
    bottom: 8px;
    right: 8px;
    animation-delay: 1s;
}

.sparkle-default-2-mini[b-b9483jb1nf]::before {
    animation-delay: 1s;
}

@keyframes brilliantSparkleMini-b-b9483jb1nf {
    0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.3) rotate(180deg); }
}

@keyframes sparkleGlowMini-b-b9483jb1nf {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.8; }
}

@keyframes sparkleFloatMini-b-b9483jb1nf {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-1px); }
}
/* /Components/Display/FarewellModal.razor.rz.scp.css */
.gradient-text-display[b-soywp1ogwe] {
    background: linear-gradient(45deg, #e91e63, #9c27b0, #2196f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift-b-soywp1ogwe 3s ease-in-out infinite;
}

@keyframes gradient-shift-b-soywp1ogwe {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Farewell Modal Styles */
.farewell-modal-container[b-soywp1ogwe] {
    position: relative;
    max-width: 600px;
    width: 90%;
}

.glass-card-farewell[b-soywp1ogwe] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-farewell:hover[b-soywp1ogwe] {
    transform: translateY(-5px);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Stat Cards */
.stat-card[b-soywp1ogwe] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.stat-card:hover[b-soywp1ogwe] {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
}

.stat-number[b-soywp1ogwe] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: number-pop-b-soywp1ogwe 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-shadow: 0 0 30px rgba(236, 72, 153, 0.5);
}

/* Counter Number Animation */
@keyframes number-pop-b-soywp1ogwe {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Countdown Styles */
.farewell-countdown[b-soywp1ogwe] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1rem 2rem;
    margin: 0 auto;
    max-width: 400px;
}

.countdown-number[b-soywp1ogwe] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
    font-size: 1.5rem;
    animation: pulse 1s infinite;
}

/* Gradient Animation */
@keyframes animate-gradient-xy-b-soywp1ogwe {
    0%, 100% {
        background-size: 400% 400%;
        background-position: left center;
    }
    50% {
        background-size: 200% 200%;
        background-position: right center;
    }
}

.animate-gradient-xy[b-soywp1ogwe] {
    animation: animate-gradient-xy-b-soywp1ogwe 3s ease infinite;
}

.floating-shapes[b-soywp1ogwe] {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.shape[b-soywp1ogwe] {
    position: absolute;
    background: linear-gradient(45deg, rgba(233, 30, 99, 0.3), rgba(156, 39, 176, 0.3));
    border-radius: 50%;
    animation: float-b-soywp1ogwe 6s ease-in-out infinite;
}

.shape-1[b-soywp1ogwe] {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2[b-soywp1ogwe] {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.shape-3[b-soywp1ogwe] {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

.shape-4[b-soywp1ogwe] {
    width: 120px;
    height: 120px;
    top: 10%;
    right: 30%;
    animation-delay: 1s;
}

@keyframes float-b-soywp1ogwe {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(120deg); }
    66% { transform: translateY(20px) rotate(240deg); }
}
/* /Components/Display/MediaCounter.razor.rz.scp.css */
/* Modern Glass Cards */
.glass-card-counter[b-6eg2mp73oi] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.glass-card-counter[b-6eg2mp73oi]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent);
}

/* Counter Number Animation */
.counter-number[b-6eg2mp73oi] {
    animation: number-pop-b-6eg2mp73oi 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-shadow: 0 0 30px rgba(236, 72, 153, 0.5);
}

@keyframes number-pop-b-6eg2mp73oi {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Hover Effects */
.glass-card-counter:hover[b-6eg2mp73oi] {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 60px rgba(31, 38, 135, 0.5),
                0 0 40px rgba(236, 72, 153, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .glass-card-counter[b-6eg2mp73oi] {
        transform: scale(0.9);
    }
}
/* /Components/Display/MediaInfo.razor.rz.scp.css */
/* Modern Glass Cards */
.glass-card-media[b-7wrji0acm6] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.glass-card-media[b-7wrji0acm6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent);
}

/* Media Icon Container */
.media-icon-container[b-7wrji0acm6] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.3);
    position: relative;
    overflow: hidden;
}

.media-icon-container[b-7wrji0acm6]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.glass-card-media:hover .media-icon-container[b-7wrji0acm6]::before {
    transform: translateX(100%);
}

/* Hover Effects */
.glass-card-media:hover[b-7wrji0acm6] {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 60px rgba(31, 38, 135, 0.5),
                0 0 40px rgba(236, 72, 153, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .glass-card-media[b-7wrji0acm6] {
        transform: scale(0.9);
    }
}
/* /Components/Display/MessageCard.razor.rz.scp.css */
/* Luxury Message Card Framework */
.luxury-card-frame[b-06qcu0bke7] {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 32px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 8px 32px rgba(31, 38, 135, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Removed shimmer animations for better readability */

.luxury-card-frame:hover[b-06qcu0bke7] {
    transform: translateY(-4px) rotateX(2deg);
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 12px 40px rgba(31, 38, 135, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.luxury-inner-frame[b-06qcu0bke7] {
    padding: 2.5rem;
    position: relative;
    z-index: 2;
}

/* Event-Specific Typography - Professional and Readable */
.font-birthday[b-06qcu0bke7] {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.font-wedding[b-06qcu0bke7] {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.font-graduation[b-06qcu0bke7] {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.font-anniversary[b-06qcu0bke7] {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.font-babyshower[b-06qcu0bke7] {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.font-bachelor[b-06qcu0bke7] {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.font-family[b-06qcu0bke7] {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.font-corporate[b-06qcu0bke7] {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.font-celebration[b-06qcu0bke7] {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.font-default[b-06qcu0bke7] {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Message Card Layout */
.message-card[b-06qcu0bke7] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    min-height: 100vh;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
}

.portrait-message[b-06qcu0bke7] {
    max-width: 90vw;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

.landscape-message[b-06qcu0bke7] {
    max-width: 95vw;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Simplified Decorative Elements - No Animation */
.floating-decoration[b-06qcu0bke7] {
    position: absolute;
    font-size: 2rem;
    z-index: 1;
    opacity: 0.4;
    pointer-events: none;
}

.top-decoration[b-06qcu0bke7] {
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
}

.bottom-decoration[b-06qcu0bke7] {
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
}

/* Luxury Header Section */
.message-card-header-luxury[b-06qcu0bke7] {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    width: 100%;
    position: relative;
}

.message-avatar-luxury[b-06qcu0bke7] {
    position: relative;
    flex-shrink: 0;
}

.avatar-ornate-frame[b-06qcu0bke7] {
    position: relative;
    padding: 8px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.avatar-circle-luxury[b-06qcu0bke7] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* Removed avatar shimmer animation */

.avatar-text-luxury[b-06qcu0bke7] {
    font-size: 2.5rem;
    font-weight: 900;
    z-index: 1;
    position: relative;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.avatar-ornate-border[b-06qcu0bke7] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
}

.avatar-ornate-border[b-06qcu0bke7]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.message-user-info-luxury[b-06qcu0bke7] {
    flex: 1;
    position: relative;
}

.message-username-luxury[b-06qcu0bke7] {
    font-size: 2rem;
    margin: 0;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    font-weight: 700;
    position: relative;
    z-index: 1;
}

/* Removed username underline animation */

.message-timestamp-luxury[b-06qcu0bke7] {
    font-size: 1.25rem;
    margin: 0.5rem 0 0 0;
    display: flex;
    align-items: center;
    opacity: 0.9;
    font-weight: 500;
}

.timestamp-icon[b-06qcu0bke7] {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* Luxury Content Section */
.message-content-luxury[b-06qcu0bke7] {
    width: 100%;
    margin-bottom: 3rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.message-ornate-frame[b-06qcu0bke7] {
    position: relative;
    padding: 3rem;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    max-width: 90vw;
    margin: 0 auto;
    box-sizing: border-box;
}

.message-ornate-frame[b-06qcu0bke7]::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 25px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

.frame-corner[b-06qcu0bke7] {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
}

.frame-corner-tl[b-06qcu0bke7] {
    top: -12px;
    left: -12px;
    border-right: none;
    border-bottom: none;
    border-radius: 0 0 0 12px;
}

.frame-corner-tr[b-06qcu0bke7] {
    top: -12px;
    right: -12px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 0 12px 0;
    animation-delay: 0.75s;
}

.frame-corner-bl[b-06qcu0bke7] {
    bottom: -12px;
    left: -12px;
    border-right: none;
    border-top: none;
    border-radius: 0 12px 0 0;
    animation-delay: 1.5s;
}

.frame-corner-br[b-06qcu0bke7] {
    bottom: -12px;
    right: -12px;
    border-left: none;
    border-top: none;
    border-radius: 12px 0 0 0;
    animation-delay: 2.25s;
}

.message-text-luxury-container[b-06qcu0bke7] {
    position: relative;
    z-index: 2;
}

.message-text-luxury[b-06qcu0bke7] {
    font-size: 4rem;
    line-height: 1.3;
    margin: 0;
    text-align: center;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 1;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    display: block;
    width: 100%;
    max-width: 100%;
    color: #ffffff;
    /* Removed gradient text for better readability */
}

.opening-quote[b-06qcu0bke7], .closing-quote[b-06qcu0bke7] {
    font-size: 1.2em;
    opacity: 0.8;
    margin: 0 0.2em;
}

.message-flourish[b-06qcu0bke7] {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.5;
    z-index: 1;
}

.message-flourish-top[b-06qcu0bke7] {
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
}

.message-flourish-bottom[b-06qcu0bke7] {
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 2s;
}

/* Dynamic text wrapping for long content */
.message-text.short-text[b-06qcu0bke7] {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.message-text.long-text[b-06qcu0bke7],
.message-text[data-long-text][b-06qcu0bke7] {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Fallback for browsers that don't support :has() */
.message-text-container:has(.message-text[data-long-text]) .message-text[b-06qcu0bke7] {
    white-space: normal;
    word-wrap: break-word;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Responsive text sizing */
@media (max-width: 768px) {
    .message-text-luxury[b-06qcu0bke7] {
        font-size: 2.5rem;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        overflow-wrap: break-word;
    }
    
    .message-text-container[b-06qcu0bke7] {
        width: 100%;
        margin: 0;
    }
    
    .message-ornate-frame[b-06qcu0bke7] {
        max-width: 95vw;
        padding: 2rem;
    }
}

@media (max-width: 480px) {
    .message-text-luxury[b-06qcu0bke7] {
        font-size: 2rem;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        overflow-wrap: break-word;
    }
    
    .message-ornate-frame[b-06qcu0bke7] {
        max-width: 98vw;
        padding: 1.5rem;
    }
}

/* Luxury Footer Section */
.message-card-footer-luxury[b-06qcu0bke7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}

.message-badge-luxury[b-06qcu0bke7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

/* Removed badge shimmer animation */

.badge-icon-container[b-06qcu0bke7] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Removed icon shimmer animation */

.badge-icon[b-06qcu0bke7] {
    font-size: 1.75rem;
    position: relative;
    z-index: 1;
}

.badge-label[b-06qcu0bke7] {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
}

.badge-decoration-left[b-06qcu0bke7], .badge-decoration-right[b-06qcu0bke7] {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent);
}

.badge-decoration-left[b-06qcu0bke7] {
    left: 8px;
    transform: translateY(-50%);
}

.badge-decoration-right[b-06qcu0bke7] {
    right: 8px;
    transform: translateY(-50%);
}

/* Luxury Animations */
@keyframes gradient-xy-b-06qcu0bke7 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
    }
    25% {
        transform: translate(-3%, 3%) scale(1.02);
    }
    50% {
        transform: translate(3%, -3%) scale(1.01);
    }
    75% {
        transform: translate(-3%, -3%) scale(1.02);
    }
}

.animate-gradient-xy[b-06qcu0bke7] {
    animation: gradient-xy-b-06qcu0bke7 6s ease infinite;
}

@keyframes shimmer-top-b-06qcu0bke7 {
    0%, 100% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes shimmer-bottom-b-06qcu0bke7 {
    0%, 100% {
        transform: translateX(100%);
        opacity: 0;
    }
    50% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes shimmer-avatar-b-06qcu0bke7 {
    0% {
        transform: translateX(-100%) rotate(0deg);
    }
    100% {
        transform: translateX(100%) rotate(360deg);
    }
}

@keyframes float-b-06qcu0bke7 {
    0%, 100% {
        transform: translateX(-50%) translateY(0px);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes avatar-glow-b-06qcu0bke7 {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes subtle-glow-b-06qcu0bke7 {
    0%, 100% {
        opacity: 0.4;
        filter: brightness(1);
    }
    50% {
        opacity: 0.8;
        filter: brightness(1.2);
    }
}

@keyframes underline-glow-b-06qcu0bke7 {
    0%, 100% {
        opacity: 0.3;
        transform: scaleX(0.8);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.2);
    }
}

@keyframes pulse-icon-b-06qcu0bke7 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes corner-glow-b-06qcu0bke7 {
    0%, 100% {
        opacity: 0.3;
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    }
}

@keyframes quote-glow-b-06qcu0bke7 {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes flourish-float-b-06qcu0bke7 {
    0%, 100% {
        transform: translateX(-50%) translateY(0px) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: translateX(-50%) translateY(-8px) rotate(5deg);
        opacity: 0.8;
    }
}

@keyframes badge-shimmer-b-06qcu0bke7 {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes icon-shimmer-b-06qcu0bke7 {
    0% {
        transform: translateX(-100%) rotate(0deg);
    }
    100% {
        transform: translateX(100%) rotate(180deg);
    }
}

@keyframes icon-bounce-b-06qcu0bke7 {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.05);
    }
}

@keyframes decoration-pulse-b-06qcu0bke7 {
    0%, 100% {
        opacity: 0.4;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.3);
    }
}

/* Theme-specific styles */
.theme-birthday-message[b-06qcu0bke7] {
    --theme-primary: #f59e0b;
    --theme-secondary: #ea580c;
}

.theme-wedding-message[b-06qcu0bke7] {
    --theme-primary: #f43f5e;
    --theme-secondary: #ec4899;
}

.theme-graduation-message[b-06qcu0bke7] {
    --theme-primary: #2563eb;
    --theme-secondary: #7c3aed;
}

.theme-anniversary-message[b-06qcu0bke7] {
    --theme-primary: #dc2626;
    --theme-secondary: #ec4899;
}

.theme-babyshower-message[b-06qcu0bke7] {
    --theme-primary: #06b6d4;
    --theme-secondary: #ec4899;
}

.theme-bachelor-message[b-06qcu0bke7] {
    --theme-primary: #7c3aed;
    --theme-secondary: #ec4899;
}

.theme-family-message[b-06qcu0bke7] {
    --theme-primary: #059669;
    --theme-secondary: #0d9488;
}

.theme-corporate-message[b-06qcu0bke7] {
    --theme-primary: #4b5563;
    --theme-secondary: #2563eb;
}

.theme-celebration-message[b-06qcu0bke7] {
    --theme-primary: #f59e0b;
    --theme-secondary: #ea580c;
}

.theme-default-message[b-06qcu0bke7] {
    --theme-primary: #ec4899;
    --theme-secondary: #7c3aed;
}

/* Luxury Responsive Design */
@media (max-width: 1024px) {
    .luxury-inner-frame[b-06qcu0bke7] {
        padding: 2rem;
    }
    
    .message-text-luxury[b-06qcu0bke7] {
        font-size: 3.5rem;
    }
    
    .message-ornate-frame[b-06qcu0bke7] {
        padding: 2.5rem;
    }
}

@media (max-width: 768px) {
    .message-card[b-06qcu0bke7] {
        padding: 1.5rem;
        min-height: 400px;
    }
    
    .luxury-inner-frame[b-06qcu0bke7] {
        padding: 1.5rem;
    }
    
    .portrait-message[b-06qcu0bke7],
    .landscape-message[b-06qcu0bke7] {
        max-width: 100%;
    }
    
    .message-card-header-luxury[b-06qcu0bke7] {
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .avatar-circle-luxury[b-06qcu0bke7] {
        width: 70px;
        height: 70px;
    }
    
    .avatar-text-luxury[b-06qcu0bke7] {
        font-size: 2rem;
    }
    
    .message-username-luxury[b-06qcu0bke7] {
        font-size: 1.5rem;
    }
    
    .message-timestamp-luxury[b-06qcu0bke7] {
        font-size: 1rem;
    }
    
    .message-text-luxury[b-06qcu0bke7] {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .message-ornate-frame[b-06qcu0bke7] {
        padding: 2rem;
    }
    
    .frame-corner[b-06qcu0bke7] {
        width: 20px;
        height: 20px;
    }
    
    .frame-corner-tl[b-06qcu0bke7], .frame-corner-tr[b-06qcu0bke7] {
        top: -10px;
    }
    
    .frame-corner-bl[b-06qcu0bke7], .frame-corner-br[b-06qcu0bke7] {
        bottom: -10px;
    }
    
    .frame-corner-tl[b-06qcu0bke7], .frame-corner-bl[b-06qcu0bke7] {
        left: -10px;
    }
    
    .frame-corner-tr[b-06qcu0bke7], .frame-corner-br[b-06qcu0bke7] {
        right: -10px;
    }
    
    .message-flourish[b-06qcu0bke7] {
        font-size: 1.25rem;
    }
    
    .floating-decoration[b-06qcu0bke7] {
        font-size: 1.5rem;
    }
    
    .badge-icon-container[b-06qcu0bke7] {
        width: 48px;
        height: 48px;
    }
    
    .badge-icon[b-06qcu0bke7] {
        font-size: 1.5rem;
    }
    
    .badge-label[b-06qcu0bke7] {
        font-size: 0.875rem;
    }
    
    .message-badge-luxury[b-06qcu0bke7] {
        padding: 0.75rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .message-card[b-06qcu0bke7] {
        padding: 1rem;
        min-height: 350px;
    }
    
    .luxury-inner-frame[b-06qcu0bke7] {
        padding: 1rem;
    }
    
    .message-card-header-luxury[b-06qcu0bke7] {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .avatar-ornate-frame[b-06qcu0bke7] {
        padding: 6px;
    }
    
    .avatar-circle-luxury[b-06qcu0bke7] {
        width: 60px;
        height: 60px;
        border-width: 2px;
    }
    
    .avatar-text-luxury[b-06qcu0bke7] {
        font-size: 1.75rem;
    }
    
    .message-username-luxury[b-06qcu0bke7] {
        font-size: 1.25rem;
    }
    
    .message-timestamp-luxury[b-06qcu0bke7] {
        font-size: 0.875rem;
    }
    
    .timestamp-icon[b-06qcu0bke7] {
        font-size: 1rem;
    }
    
    .message-text-luxury[b-06qcu0bke7] {
        font-size: 2rem;
        line-height: 1.1;
        white-space: normal;
        word-wrap: break-word;
    }
    
    .message-ornate-frame[b-06qcu0bke7] {
        padding: 1.5rem;
        border-radius: 20px;
    }
    
    .frame-corner[b-06qcu0bke7] {
        width: 16px;
        height: 16px;
    }
    
    .frame-corner-tl[b-06qcu0bke7], .frame-corner-tr[b-06qcu0bke7] {
        top: -8px;
    }
    
    .frame-corner-bl[b-06qcu0bke7], .frame-corner-br[b-06qcu0bke7] {
        bottom: -8px;
    }
    
    .frame-corner-tl[b-06qcu0bke7], .frame-corner-bl[b-06qcu0bke7] {
        left: -8px;
    }
    
    .frame-corner-tr[b-06qcu0bke7], .frame-corner-br[b-06qcu0bke7] {
        right: -8px;
    }
    
    .opening-quote[b-06qcu0bke7], .closing-quote[b-06qcu0bke7] {
        font-size: 1.1em;
    }
    
    .message-flourish[b-06qcu0bke7] {
        font-size: 1rem;
    }
    
    .message-flourish-top[b-06qcu0bke7] {
        top: -1.5rem;
    }
    
    .message-flourish-bottom[b-06qcu0bke7] {
        bottom: -1.5rem;
    }
    
    .floating-decoration[b-06qcu0bke7] {
        font-size: 1.25rem;
    }
    
    .top-decoration[b-06qcu0bke7] {
        top: -0.5rem;
    }
    
    .bottom-decoration[b-06qcu0bke7] {
        bottom: -0.5rem;
    }
    
    .badge-icon-container[b-06qcu0bke7] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    
    .badge-icon[b-06qcu0bke7] {
        font-size: 1.25rem;
    }
    
    .badge-label[b-06qcu0bke7] {
        font-size: 0.75rem;
    }
    
    .message-badge-luxury[b-06qcu0bke7] {
        padding: 0.5rem 1rem;
        gap: 0.75rem;
        border-radius: 16px;
    }
    
    .badge-decoration-left[b-06qcu0bke7] {
        left: 6px;
        width: 6px;
        height: 6px;
    }
    
    .badge-decoration-right[b-06qcu0bke7] {
        right: 6px;
        width: 6px;
        height: 6px;
    }
}

@media (max-width: 320px) {
    .message-card[b-06qcu0bke7] {
        padding: 0.75rem;
        min-height: 300px;
    }
    
    .luxury-inner-frame[b-06qcu0bke7] {
        padding: 0.75rem;
    }
    
    .message-text-luxury[b-06qcu0bke7] {
        font-size: 1.5rem;
    }
    
    .message-ornate-frame[b-06qcu0bke7] {
        padding: 1rem;
    }
    
    .avatar-circle-luxury[b-06qcu0bke7] {
        width: 50px;
        height: 50px;
    }
    
    .avatar-text-luxury[b-06qcu0bke7] {
        font-size: 1.5rem;
    }
    
    .message-username-luxury[b-06qcu0bke7] {
        font-size: 1rem;
    }
    
    .badge-icon-container[b-06qcu0bke7] {
        width: 36px;
        height: 36px;
    }
    
    .badge-icon[b-06qcu0bke7] {
        font-size: 1rem;
    }
    
    .message-badge-luxury[b-06qcu0bke7] {
        padding: 0.375rem 0.75rem;
        gap: 0.5rem;
    }
}
/* /Components/Display/NewPhotoNotification.razor.rz.scp.css */
.notification-container[b-56xf446f0w] {
    animation: slideDown-b-56xf446f0w 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.3));
}

.hanging-string[b-56xf446f0w] {
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.3));
    margin: 0 auto;
    border-radius: 1px;
    animation: stringSwing-b-56xf446f0w 3s ease-in-out infinite;
    transform-origin: top center;
}

.notification-balloon[b-56xf446f0w] {
    position: relative;
    animation: balloonSwing-b-56xf446f0w 3s ease-in-out infinite, balloonBounce-b-56xf446f0w 2s ease-in-out infinite;
    transform-origin: top center;
}

.notification-balloon > div[b-56xf446f0w] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.95), rgba(139, 92, 246, 0.95), rgba(59, 130, 246, 0.95));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.balloon-tail[b-56xf446f0w] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid rgba(168, 85, 247, 0.9);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.notification-icon[b-56xf446f0w] {
    font-size: 2rem;
    animation: iconSpin-b-56xf446f0w 2s linear infinite, iconPulse-b-56xf446f0w 1.5s ease-in-out infinite;
}

.sparkles[b-56xf446f0w] {
    position: relative;
}

.sparkle[b-56xf446f0w] {
    position: absolute;
    font-size: 1.2rem;
    animation: sparkleFloat-b-56xf446f0w 2s ease-in-out infinite;
}

.sparkle-1[b-56xf446f0w] {
    top: -10px;
    right: -5px;
    animation-delay: 0s;
}

.sparkle-2[b-56xf446f0w] {
    top: 5px;
    right: -15px;
    animation-delay: 0.7s;
}

.sparkle-3[b-56xf446f0w] {
    top: -5px;
    right: -25px;
    animation-delay: 1.4s;
}

/* Animations */
@keyframes slideDown-b-56xf446f0w {
    0% {
        transform: translateX(-50%) translateY(-100px);
        opacity: 0;
    }
    70% {
        transform: translateX(-50%) translateY(10px);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes stringSwing-b-56xf446f0w {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    75% { transform: rotate(-3deg); }
}

@keyframes balloonSwing-b-56xf446f0w {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
}

@keyframes balloonBounce-b-56xf446f0w {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@keyframes iconSpin-b-56xf446f0w {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes iconPulse-b-56xf446f0w {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes sparkleFloat-b-56xf446f0w {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    33% {
        transform: translateY(-8px) rotate(120deg);
        opacity: 1;
    }
    66% {
        transform: translateY(4px) rotate(240deg);
        opacity: 0.8;
    }
}
/* /Components/Display/NoPhotosYet.razor.rz.scp.css */
/* ================================================
   NoPhotosYet - Premium Waiting Screen Styles
   Two-Column Layout for Display Screens
   ================================================ */

/* Base Container */
.waiting-screen[b-scp0gm8pm6] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ================================================
   Background System
   ================================================ */
.waiting-bg[b-scp0gm8pm6] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.mesh-gradient[b-scp0gm8pm6] {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(120, 0, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255, 0, 128, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0, 100, 255, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #0f0f18 100%);
}

/* Particle System */
.particle-field[b-scp0gm8pm6] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle[b-scp0gm8pm6] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    left: var(--x);
    bottom: -10px;
    animation: particleFloat-b-scp0gm8pm6 var(--duration) linear infinite;
    animation-delay: var(--delay);
    opacity: 0;
}

.particle-0[b-scp0gm8pm6] { background: rgba(236, 72, 153, 0.6); width: 3px; height: 3px; }
.particle-1[b-scp0gm8pm6] { background: rgba(139, 92, 246, 0.6); width: 5px; height: 5px; }
.particle-2[b-scp0gm8pm6] { background: rgba(59, 130, 246, 0.5); width: 4px; height: 4px; }
.particle-3[b-scp0gm8pm6] { background: rgba(255, 255, 255, 0.3); width: 2px; height: 2px; }
.particle-4[b-scp0gm8pm6] { background: rgba(236, 72, 153, 0.4); width: 6px; height: 6px; filter: blur(1px); }

@keyframes particleFloat-b-scp0gm8pm6 {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(-10vh) translateX(10px) scale(1);
    }
    90% {
        opacity: 0.8;
        transform: translateY(-90vh) translateX(-10px) scale(0.8);
    }
    100% {
        transform: translateY(-100vh) translateX(0) scale(0);
        opacity: 0;
    }
}

/* Glow Orbs */
.glow-orbs[b-scp0gm8pm6] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.orb[b-scp0gm8pm6] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: orbFloat-b-scp0gm8pm6 20s ease-in-out infinite;
}

.orb-1[b-scp0gm8pm6] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.35) 0%, transparent 70%);
    top: -150px;
    left: -150px;
    animation-delay: 0s;
}

.orb-2[b-scp0gm8pm6] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
    bottom: -100px;
    right: -100px;
    animation-delay: -7s;
}

.orb-3[b-scp0gm8pm6] {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%);
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -14s;
}

@keyframes orbFloat-b-scp0gm8pm6 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(40px, -30px) scale(1.1); }
    50% { transform: translate(-30px, 40px) scale(0.9); }
    75% { transform: translate(30px, 30px) scale(1.05); }
}

/* ================================================
   Main Content - Two Column Layout
   ================================================ */
.waiting-content[b-scp0gm8pm6] {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 3rem;
    padding: 3rem 5rem;
    max-width: 1400px;
    width: 100%;
    min-height: 80vh;
}

/* Vertical Divider */
.vertical-divider[b-scp0gm8pm6] {
    width: 1px;
    height: 60%;
    min-height: 300px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(236, 72, 153, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 80%,
        transparent 100%
    );
    position: relative;
}

.vertical-divider[b-scp0gm8pm6]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
}

/* ================================================
   Left Column: Branding & Event Info
   ================================================ */
.content-left[b-scp0gm8pm6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding-right: 2rem;
}

/* Logo Section */
.logo-section[b-scp0gm8pm6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.logo-container[b-scp0gm8pm6] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-glow[b-scp0gm8pm6] {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
    filter: blur(50px);
    animation: logoGlow-b-scp0gm8pm6 3s ease-in-out infinite;
}

@keyframes logoGlow-b-scp0gm8pm6 {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.logo-wrapper[b-scp0gm8pm6] {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: logoFloat-b-scp0gm8pm6 4s ease-in-out infinite;
}

@keyframes logoFloat-b-scp0gm8pm6 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.partner-logo[b-scp0gm8pm6],
.festea-logo[b-scp0gm8pm6] {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.powered-by[b-scp0gm8pm6] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    padding-left: 0.5rem;
}

.festea-text[b-scp0gm8pm6] {
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

/* Section Divider */
.section-divider[b-scp0gm8pm6] {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ec4899, #8b5cf6, transparent);
    border-radius: 2px;
}

/* ================================================
   Event Info
   ================================================ */
.event-info[b-scp0gm8pm6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.event-type-badge[b-scp0gm8pm6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
}

.event-type-icon[b-scp0gm8pm6] {
    font-size: 1.1rem;
}

.event-title[b-scp0gm8pm6] {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin: 0;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 100%;
    word-wrap: break-word;
}

.event-date[b-scp0gm8pm6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.date-icon[b-scp0gm8pm6] {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

/* ================================================
   Social Media Section
   ================================================ */
.social-section[b-scp0gm8pm6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
}

.social-label[b-scp0gm8pm6] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
}

.social-icons[b-scp0gm8pm6] {
    display: flex;
    gap: 0.75rem;
}

.social-icon[b-scp0gm8pm6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.social-icon svg[b-scp0gm8pm6] {
    width: 24px;
    height: 24px;
}

.social-icon:hover[b-scp0gm8pm6] {
    transform: translateY(-4px) scale(1.05);
    border-color: rgba(255, 255, 255, 0.25);
}

.social-icon.instagram:hover[b-scp0gm8pm6] {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    box-shadow: 0 10px 30px rgba(225, 48, 108, 0.4);
}

.social-icon.facebook:hover[b-scp0gm8pm6] {
    background: #1877f2;
    box-shadow: 0 10px 30px rgba(24, 119, 242, 0.4);
}

.social-icon.website:hover[b-scp0gm8pm6] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

/* ================================================
   Right Column: QR & CTA
   ================================================ */
.content-right[b-scp0gm8pm6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-left: 2rem;
}

/* QR Hero Section */
.qr-hero-section[b-scp0gm8pm6] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-card[b-scp0gm8pm6] {
    position: relative;
    padding: 2rem;
}

.qr-glow-ring[b-scp0gm8pm6] {
    position: absolute;
    inset: -25px;
    background: conic-gradient(
        from 0deg,
        rgba(236, 72, 153, 0.4),
        rgba(139, 92, 246, 0.4),
        rgba(59, 130, 246, 0.4),
        rgba(236, 72, 153, 0.4)
    );
    border-radius: 36px;
    filter: blur(30px);
    opacity: 0.6;
    animation: glowRotate-b-scp0gm8pm6 8s linear infinite;
}

@keyframes glowRotate-b-scp0gm8pm6 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.qr-inner[b-scp0gm8pm6] {
    position: relative;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 28px;
    padding: 1.25rem;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.qr-frame[b-scp0gm8pm6] {
    position: relative;
    padding: 0.75rem;
}

.qr-corners[b-scp0gm8pm6] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.corner[b-scp0gm8pm6] {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: #ec4899;
    border-style: solid;
    border-width: 0;
}

.corner.tl[b-scp0gm8pm6] {
    top: 0;
    left: 0;
    border-top-width: 4px;
    border-left-width: 4px;
    border-top-left-radius: 10px;
    animation: cornerPulse-b-scp0gm8pm6 2s ease-in-out infinite;
}

.corner.tr[b-scp0gm8pm6] {
    top: 0;
    right: 0;
    border-top-width: 4px;
    border-right-width: 4px;
    border-top-right-radius: 10px;
    animation: cornerPulse-b-scp0gm8pm6 2s ease-in-out infinite 0.5s;
}

.corner.bl[b-scp0gm8pm6] {
    bottom: 0;
    left: 0;
    border-bottom-width: 4px;
    border-left-width: 4px;
    border-bottom-left-radius: 10px;
    animation: cornerPulse-b-scp0gm8pm6 2s ease-in-out infinite 1s;
}

.corner.br[b-scp0gm8pm6] {
    bottom: 0;
    right: 0;
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-bottom-right-radius: 10px;
    animation: cornerPulse-b-scp0gm8pm6 2s ease-in-out infinite 1.5s;
}

@keyframes cornerPulse-b-scp0gm8pm6 {
    0%, 100% { border-color: #ec4899; }
    50% { border-color: #8b5cf6; }
}

.qr-image[b-scp0gm8pm6] {
    display: block;
    width: 220px;
    height: 220px;
    border-radius: 16px;
}

.scanner-line[b-scp0gm8pm6] {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #ec4899 20%, #8b5cf6 50%, #ec4899 80%, transparent 100%);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.7);
    animation: scanMove-b-scp0gm8pm6 2.5s ease-in-out infinite;
    opacity: 0.9;
}

@keyframes scanMove-b-scp0gm8pm6 {
    0% { top: 0.75rem; opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { top: calc(100% - 0.75rem); opacity: 0; }
}

.qr-placeholder[b-scp0gm8pm6] {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 16px;
}

.placeholder-icon[b-scp0gm8pm6] {
    width: 64px;
    height: 64px;
    color: rgba(0, 0, 0, 0.2);
}

/* ================================================
   Call to Action
   ================================================ */
.cta-section[b-scp0gm8pm6] {
    text-align: center;
}

.cta-primary[b-scp0gm8pm6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin: 0 0 0.5rem 0;
}

.phone-icon[b-scp0gm8pm6] {
    font-size: 1.5rem;
    animation: phoneBounce-b-scp0gm8pm6 2s ease-in-out infinite;
}

@keyframes phoneBounce-b-scp0gm8pm6 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(-8deg); }
    75% { transform: translateY(-4px) rotate(8deg); }
}

.cta-secondary[b-scp0gm8pm6] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* ================================================
   Waiting Indicator
   ================================================ */
.waiting-indicator[b-scp0gm8pm6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    backdrop-filter: blur(10px);
}

.pulse-ring[b-scp0gm8pm6] {
    position: absolute;
    left: 1.75rem;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(236, 72, 153, 0.5);
    border-radius: 50%;
    animation: pulseRing-b-scp0gm8pm6 2s ease-out infinite;
}

.pulse-ring.delay-1[b-scp0gm8pm6] { animation-delay: 0.4s; }
.pulse-ring.delay-2[b-scp0gm8pm6] { animation-delay: 0.8s; }

@keyframes pulseRing-b-scp0gm8pm6 {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.waiting-dot[b-scp0gm8pm6] {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.5);
    animation: dotPulse-b-scp0gm8pm6 1.5s ease-in-out infinite;
}

@keyframes dotPulse-b-scp0gm8pm6 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.waiting-text[b-scp0gm8pm6] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}

/* ================================================
   Responsive - Tablet
   ================================================ */
@media (max-width: 1024px) {
    .waiting-content[b-scp0gm8pm6] {
        padding: 2rem 3rem;
        gap: 2rem;
    }
    
    .logo-wrapper[b-scp0gm8pm6] {
        width: 120px;
        height: 120px;
    }
    
    .qr-image[b-scp0gm8pm6] {
        width: 180px;
        height: 180px;
    }
    
    .event-title[b-scp0gm8pm6] {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }
}

/* ================================================
   Responsive - Mobile / Portrait
   ================================================ */
@media (max-width: 768px), (orientation: portrait) {
    .waiting-content[b-scp0gm8pm6] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 2rem;
        padding: 2rem;
        min-height: auto;
    }
    
    .vertical-divider[b-scp0gm8pm6] {
        display: none;
    }
    
    .content-left[b-scp0gm8pm6] {
        align-items: center;
        text-align: center;
        padding-right: 0;
        gap: 1.5rem;
    }
    
    .logo-section[b-scp0gm8pm6] {
        align-items: center;
    }
    
    .section-divider[b-scp0gm8pm6] {
        width: 80px;
        background: linear-gradient(90deg, transparent, #ec4899, #8b5cf6, transparent);
    }
    
    .event-info[b-scp0gm8pm6] {
        align-items: center;
        text-align: center;
    }
    
    .event-title[b-scp0gm8pm6] {
        text-align: center;
    }
    
    .social-section[b-scp0gm8pm6] {
        align-items: center;
    }
    
    .content-right[b-scp0gm8pm6] {
        padding-left: 0;
        gap: 1.5rem;
    }
    
    .logo-wrapper[b-scp0gm8pm6] {
        width: 100px;
        height: 100px;
        border-radius: 24px;
    }
    
    .qr-card[b-scp0gm8pm6] {
        padding: 1.25rem;
    }
    
    .qr-image[b-scp0gm8pm6] {
        width: 160px;
        height: 160px;
    }
    
    .cta-primary[b-scp0gm8pm6] {
        font-size: 1.1rem;
    }
    
    .cta-secondary[b-scp0gm8pm6] {
        font-size: 0.9rem;
    }
    
    .social-icon[b-scp0gm8pm6] {
        width: 44px;
        height: 44px;
    }
    
    .social-icon svg[b-scp0gm8pm6] {
        width: 22px;
        height: 22px;
    }
}

/* ================================================
   Large Screens / TV Displays
   ================================================ */
@media (min-width: 1400px) {
    .waiting-content[b-scp0gm8pm6] {
        max-width: 1600px;
        padding: 4rem 6rem;
        gap: 4rem;
    }
    
    .logo-wrapper[b-scp0gm8pm6] {
        width: 160px;
        height: 160px;
        border-radius: 36px;
    }
    
    .logo-glow[b-scp0gm8pm6] {
        width: 240px;
        height: 240px;
    }
    
    .event-title[b-scp0gm8pm6] {
        font-size: 4rem;
    }
    
    .event-type-badge[b-scp0gm8pm6] {
        font-size: 1rem;
        padding: 0.6rem 1.5rem;
    }
    
    .qr-image[b-scp0gm8pm6] {
        width: 280px;
        height: 280px;
    }
    
    .qr-inner[b-scp0gm8pm6] {
        padding: 1.5rem;
        border-radius: 32px;
    }
    
    .cta-primary[b-scp0gm8pm6] {
        font-size: 1.5rem;
    }
    
    .cta-secondary[b-scp0gm8pm6] {
        font-size: 1.1rem;
    }
    
    .social-icon[b-scp0gm8pm6] {
        width: 56px;
        height: 56px;
        border-radius: 16px;
    }
    
    .social-icon svg[b-scp0gm8pm6] {
        width: 28px;
        height: 28px;
    }
    
    .orb-1[b-scp0gm8pm6] {
        width: 600px;
        height: 600px;
    }
    
    .orb-2[b-scp0gm8pm6] {
        width: 500px;
        height: 500px;
    }
    
    .orb-3[b-scp0gm8pm6] {
        width: 450px;
        height: 450px;
    }
}

/* ================================================
   Ultra-wide Displays
   ================================================ */
@media (min-width: 1920px) {
    .waiting-content[b-scp0gm8pm6] {
        max-width: 1800px;
    }
    
    .event-title[b-scp0gm8pm6] {
        font-size: 4.5rem;
    }
    
    .qr-image[b-scp0gm8pm6] {
        width: 320px;
        height: 320px;
    }
}
/* /Components/Display/PodiumOverlay.razor.rz.scp.css */
/* 🏆 PROFESSIONAL PODIUM OVERLAY - CLEAN & MODERN DESIGN 🏆 */

/* === RESET & BASE === */
*[b-ka5pvcm6dv] {
    box-sizing: border-box;
}

/* === MAIN CONTAINER === */
.podium-epic-container[b-ka5pvcm6dv] {
    animation: fadeIn-b-ka5pvcm6dv 0.8s ease-out;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@keyframes fadeIn-b-ka5pvcm6dv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === SIMPLIFIED BACKGROUND === */
.epic-background-layer[b-ka5pvcm6dv] {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.epic-gradient-bg[b-ka5pvcm6dv] {
    position: absolute;
    inset: 0;
    opacity: 0.95;
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
}

/* === MINIMAL PARTICLE EFFECTS === */
.epic-particles-bg[b-ka5pvcm6dv] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.1;
}

.epic-particles[b-ka5pvcm6dv] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.epic-particle[b-ka5pvcm6dv] {
    position: absolute;
    border-radius: 50%;
    animation: subtleFloat-b-ka5pvcm6dv 8s ease-in-out infinite;
}

/* Simplified particles - only sparkles */
.epic-sparkle[b-ka5pvcm6dv] {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    width: 4px;
    height: 4px;
}

.epic-sp-1[b-ka5pvcm6dv] { top: 15%; left: 20%; animation-delay: 0s; }
.epic-sp-2[b-ka5pvcm6dv] { top: 30%; right: 25%; animation-delay: 2s; }
.epic-sp-3[b-ka5pvcm6dv] { top: 60%; left: 15%; animation-delay: 4s; }
.epic-sp-4[b-ka5pvcm6dv] { top: 75%; right: 20%; animation-delay: 6s; }
.epic-sp-5[b-ka5pvcm6dv] { top: 45%; left: 10%; animation-delay: 1s; }

@keyframes subtleFloat-b-ka5pvcm6dv {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-10px);
        opacity: 0.6;
    }
}

/* === MAIN CONTENT LAYOUT === */
.epic-main-content[b-ka5pvcm6dv] {
    position: relative;
    z-index: 10;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.epic-landscape-layout[b-ka5pvcm6dv] {
    flex-direction: row;
    gap: 2rem;
}

.epic-portrait-layout[b-ka5pvcm6dv] {
    flex-direction: column;
    gap: 1rem;
}

/* === PODIUM ZONE === */
.epic-podium-zone[b-ka5pvcm6dv] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1600px;
    padding: 0 2rem;
}

.epic-glass-podium[b-ka5pvcm6dv] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 1400px;
    padding: 3rem 4rem;
}

/* === HEADER === */
.epic-header[b-ka5pvcm6dv] {
    margin-bottom: 3rem;
    text-align: center;
}

.epic-title-shadow[b-ka5pvcm6dv] {
    color: #ffffff;
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 100%;
    padding-bottom: 0.1em;
}

.epic-subtitle-glow[b-ka5pvcm6dv] {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 700;
    margin-top: 0.5rem;
    white-space: nowrap;
    line-height: 1.4;
    padding-bottom: 0.1em;
}

/* === PODIUM DISPLAY === */
.epic-podium-display[b-ka5pvcm6dv] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.epic-podium-massive[b-ka5pvcm6dv] {
    width: 100%;
    max-width: 1100px;
}

.epic-podium-structure[b-ka5pvcm6dv] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    height: 100%;
}

/* === POSITIONS === */
.epic-position[b-ka5pvcm6dv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 320px;
}

.epic-position-first[b-ka5pvcm6dv] {
    z-index: 3;
    transform: scale(1.05);
}

.epic-position-second[b-ka5pvcm6dv],
.epic-position-third[b-ka5pvcm6dv] {
    z-index: 2;
}

/* === STEPS - SIMPLIFIED === */
.epic-step[b-ka5pvcm6dv] {
    border-radius: 16px 16px 8px 8px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border: 2px solid;
}

.epic-step-first[b-ka5pvcm6dv] {
    height: 120px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: #d97706;
}

.epic-step-second[b-ka5pvcm6dv] {
    height: 100px;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    border-color: #9ca3af;
}

.epic-step-third[b-ka5pvcm6dv] {
    height: 80px;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    border-color: #92400e;
}

.epic-step-number[b-ka5pvcm6dv] {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.epic-crown[b-ka5pvcm6dv] {
    position: absolute;
    top: -25px;
    font-size: 2.5rem;
    animation: crownFloat-b-ka5pvcm6dv 3s ease-in-out infinite;
}

@keyframes crownFloat-b-ka5pvcm6dv {
    0%, 100% { 
        transform: translateY(0px);
    }
    50% { 
        transform: translateY(-5px);
    }
}

/* === PARTICIPANT CARDS - CLEAN DESIGN === */
.epic-participant-card[b-ka5pvcm6dv] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    position: relative;
    width: 100%;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.epic-card-first[b-ka5pvcm6dv] {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.05);
}

.epic-card-second[b-ka5pvcm6dv] {
    border-color: rgba(229, 231, 235, 0.3);
    background: rgba(229, 231, 235, 0.05);
}

.epic-card-third[b-ka5pvcm6dv] {
    border-color: rgba(217, 119, 6, 0.3);
    background: rgba(217, 119, 6, 0.05);
}

/* === MEDALS - SIMPLIFIED === */
.epic-medal[b-ka5pvcm6dv] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* === PARTICIPANT INFO - IMPROVED READABILITY === */
.epic-participant-name[b-ka5pvcm6dv] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    line-height: 1.3;
}

.epic-champion-name[b-ka5pvcm6dv] {
    font-size: 1.5rem;
    color: #fbbf24;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.epic-participant-points[b-ka5pvcm6dv] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.epic-points-massive[b-ka5pvcm6dv] {
    font-size: 2rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.epic-champion-points[b-ka5pvcm6dv] {
    font-size: 2.5rem;
    color: #fbbf24;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.epic-points-label[b-ka5pvcm6dv] {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* === LEVEL BADGES === */
.epic-level-badge[b-ka5pvcm6dv] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    margin: 0 auto;
}

.epic-champion-badge[b-ka5pvcm6dv] {
    width: 48px;
    height: 48px;
    font-size: 20px;
    border: 2px solid rgba(251, 191, 36, 0.5);
}

/* === STATS OVERLAY - SIMPLIFIED === */
.epic-stats-overlay[b-ka5pvcm6dv] {
    position: absolute;
    z-index: 15;
    transition: all 0.3s ease;
}

.epic-stats-landscape[b-ka5pvcm6dv] {
    top: 2rem;
    right: 2rem;
    width: 280px;
    max-height: 60vh;
}

.epic-stats-portrait[b-ka5pvcm6dv] {
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    height: 180px;
}

.epic-stats-glass[b-ka5pvcm6dv] {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.epic-stats-content[b-ka5pvcm6dv] {
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.epic-stats-header[b-ka5pvcm6dv] {
    text-align: center;
    margin-bottom: 1rem;
}

.epic-stats-title[b-ka5pvcm6dv] {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

/* === COMPACT LEADERBOARD === */
.epic-compact-leaderboard[b-ka5pvcm6dv] {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.epic-compact-entry[b-ka5pvcm6dv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    font-size: 12px;
}

.epic-compact-entry.epic-top-three[b-ka5pvcm6dv] {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.2);
}

.epic-compact-position[b-ka5pvcm6dv] {
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.epic-compact-name[b-ka5pvcm6dv] {
    flex: 1;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.epic-compact-points[b-ka5pvcm6dv] {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    min-width: 35px;
    text-align: right;
}

.epic-more-participants[b-ka5pvcm6dv] {
    text-align: center;
    padding: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* === COMPACT STATS === */
.epic-compact-stats[b-ka5pvcm6dv] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.epic-stat-mini[b-ka5pvcm6dv] {
    text-align: center;
    padding: 8px 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex: 1;
}

.epic-stat-value[b-ka5pvcm6dv] {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.epic-stat-label[b-ka5pvcm6dv] {
    font-size: 12px;
    margin-top: 2px;
    opacity: 0.8;
}

/* === LOADING STATE === */
.epic-loading[b-ka5pvcm6dv] {
    flex-direction: column;
    gap: 2rem;
}

.epic-spinner[b-ka5pvcm6dv] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top: 4px solid #ffffff;
    animation: spin-b-ka5pvcm6dv 1s linear infinite;
}

@keyframes spin-b-ka5pvcm6dv {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.epic-no-data[b-ka5pvcm6dv] {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

/* === THEME-SPECIFIC GRADIENTS - SIMPLIFIED === */
.epic-gradient-birthday[b-ka5pvcm6dv] {
    background: linear-gradient(135deg, #dc2626 0%, #ea580c 50%, #d97706 100%);
}

.epic-gradient-wedding[b-ka5pvcm6dv] {
    background: linear-gradient(135deg, #be185d 0%, #db2777 50%, #ec4899 100%);
}

.epic-gradient-graduation[b-ka5pvcm6dv] {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
}

.epic-gradient-anniversary[b-ka5pvcm6dv] {
    background: linear-gradient(135deg, #dc2626 0%, #be185d 50%, #a21caf 100%);
}

.epic-gradient-babyshower[b-ka5pvcm6dv] {
    background: linear-gradient(135deg, #0e7490 0%, #0891b2 50%, #06b6d4 100%);
}

.epic-gradient-bachelor[b-ka5pvcm6dv] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
}

.epic-gradient-family[b-ka5pvcm6dv] {
    background: linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%);
}

.epic-gradient-corporate[b-ka5pvcm6dv] {
    background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #6b7280 100%);
}

.epic-gradient-celebration[b-ka5pvcm6dv] {
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #ea580c 100%);
}

.epic-gradient-default[b-ka5pvcm6dv] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
}

/* === ANIMATIONS === */
.animate-slideInLeft[b-ka5pvcm6dv] {
    animation: slideInLeft-b-ka5pvcm6dv 0.8s ease-out;
}

.animate-slideInUp[b-ka5pvcm6dv] {
    animation: slideInUp-b-ka5pvcm6dv 0.8s ease-out;
}

.animate-slideInRight[b-ka5pvcm6dv] {
    animation: slideInRight-b-ka5pvcm6dv 0.8s ease-out;
}

.animate-fadeInUp[b-ka5pvcm6dv] {
    animation: fadeInUp-b-ka5pvcm6dv 0.6s ease-out forwards;
}

@keyframes slideInLeft-b-ka5pvcm6dv {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp-b-ka5pvcm6dv {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1.05);
    }
}

@keyframes slideInRight-b-ka5pvcm6dv {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp-b-ka5pvcm6dv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === RESPONSIVE DESIGN - IMPROVED === */

/* Large screens */
@media (min-width: 1200px) {
    .epic-podium-zone[b-ka5pvcm6dv] {
        max-width: 1800px;
    }
    
    .epic-glass-podium[b-ka5pvcm6dv] {
        max-width: 1600px;
        padding: 3rem 5rem;
    }
    
    .epic-podium-massive[b-ka5pvcm6dv] {
        max-width: 1300px;
    }
    
    .epic-position[b-ka5pvcm6dv] {
        max-width: 380px;
    }
    
    .epic-step-number[b-ka5pvcm6dv] {
        font-size: 3.5rem;
    }
    
    .epic-points-massive[b-ka5pvcm6dv] {
        font-size: 2.25rem;
    }
    
    .epic-champion-points[b-ka5pvcm6dv] {
        font-size: 2.75rem;
    }
    
    .epic-participant-name[b-ka5pvcm6dv] {
        font-size: 1.5rem;
    }
    
    .epic-champion-name[b-ka5pvcm6dv] {
        font-size: 1.75rem;
    }
}

/* Extra large screens */
@media (min-width: 1600px) {
    .epic-podium-zone[b-ka5pvcm6dv] {
        max-width: 2000px;
    }
    
    .epic-glass-podium[b-ka5pvcm6dv] {
        max-width: 1800px;
        padding: 4rem 6rem;
    }
    
    .epic-podium-massive[b-ka5pvcm6dv] {
        max-width: 1500px;
    }
    
    .epic-position[b-ka5pvcm6dv] {
        max-width: 450px;
    }
    
    .epic-participant-card[b-ka5pvcm6dv] {
        padding: 2rem;
    }
}

/* Tablets */
@media (max-width: 1024px) {
    .epic-main-content[b-ka5pvcm6dv] {
        padding: 1rem;
    }
    
    .epic-glass-podium[b-ka5pvcm6dv] {
        padding: 1.5rem;
    }
    
    .epic-header[b-ka5pvcm6dv] {
        margin-bottom: 2rem;
    }
    
    .epic-stats-landscape[b-ka5pvcm6dv] {
        width: 240px;
        top: 1rem;
        right: 1rem;
    }
}

/* Small tablets and large phones */
@media (max-width: 768px) {
    .epic-main-content[b-ka5pvcm6dv] {
        flex-direction: column;
        padding: 0.5rem;
        min-height: 100vh;
    }
    
    .epic-glass-podium[b-ka5pvcm6dv] {
        width: 100%;
        padding: 1rem;
        border-radius: 16px;
        max-height: none;
    }
    
    .epic-header h1[b-ka5pvcm6dv] {
        font-size: 2rem !important;
        line-height: 1.1;
        padding: 0 0.5rem;
    }
    
    .epic-header p[b-ka5pvcm6dv] {
        font-size: 1.1rem !important;
    }
    
    .epic-podium-structure[b-ka5pvcm6dv] {
        gap: 0.75rem;
    }
    
    .epic-step-first[b-ka5pvcm6dv] {
        height: 80px;
    }
    
    .epic-step-second[b-ka5pvcm6dv] {
        height: 70px;
    }
    
    .epic-step-third[b-ka5pvcm6dv] {
        height: 60px;
    }
    
    .epic-step-number[b-ka5pvcm6dv] {
        font-size: 2rem;
    }
    
    .epic-crown[b-ka5pvcm6dv] {
        font-size: 1.5rem;
        top: -15px;
    }
    
    .epic-medal[b-ka5pvcm6dv] {
        font-size: 1.75rem;
    }
    
    .epic-participant-name[b-ka5pvcm6dv] {
        font-size: 1rem;
    }
    
    .epic-champion-name[b-ka5pvcm6dv] {
        font-size: 1.125rem;
    }
    
    .epic-points-massive[b-ka5pvcm6dv] {
        font-size: 1.5rem;
    }
    
    .epic-champion-points[b-ka5pvcm6dv] {
        font-size: 1.75rem;
    }
    
    .epic-participant-card[b-ka5pvcm6dv] {
        padding: 1rem;
    }
    
    .epic-stats-overlay[b-ka5pvcm6dv] {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 1rem;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }
    
    .epic-stats-glass[b-ka5pvcm6dv] {
        height: auto;
    }
    
    .epic-compact-leaderboard[b-ka5pvcm6dv] {
        max-height: 150px;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .epic-main-content[b-ka5pvcm6dv] {
        padding: 0.25rem;
    }
    
    .epic-glass-podium[b-ka5pvcm6dv] {
        padding: 0.75rem;
        border-radius: 12px;
    }
    
    .epic-header[b-ka5pvcm6dv] {
        margin-bottom: 1.5rem;
    }
    
    .epic-header h1[b-ka5pvcm6dv] {
        font-size: 1.5rem !important;
        line-height: 1.1;
        padding: 0 0.25rem;
    }
    
    .epic-header p[b-ka5pvcm6dv] {
        font-size: 0.9rem !important;
    }
    
    .epic-podium-structure[b-ka5pvcm6dv] {
        gap: 0.5rem;
    }
    
    .epic-position[b-ka5pvcm6dv] {
        max-width: 100px;
    }
    
    .epic-step-first[b-ka5pvcm6dv] {
        height: 60px;
    }
    
    .epic-step-second[b-ka5pvcm6dv],
    .epic-step-third[b-ka5pvcm6dv] {
        height: 50px;
    }
    
    .epic-step-number[b-ka5pvcm6dv] {
        font-size: 1.5rem;
    }
    
    .epic-crown[b-ka5pvcm6dv] {
        font-size: 1.25rem;
        top: -12px;
    }
    
    .epic-medal[b-ka5pvcm6dv] {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .epic-participant-name[b-ka5pvcm6dv] {
        font-size: 0.875rem;
        line-height: 1.2;
    }
    
    .epic-champion-name[b-ka5pvcm6dv] {
        font-size: 1rem;
    }
    
    .epic-points-massive[b-ka5pvcm6dv] {
        font-size: 1.25rem;
    }
    
    .epic-champion-points[b-ka5pvcm6dv] {
        font-size: 1.5rem;
    }
    
    .epic-points-label[b-ka5pvcm6dv] {
        font-size: 0.75rem;
    }
    
    .epic-participant-card[b-ka5pvcm6dv] {
        padding: 0.75rem;
        border-radius: 12px;
    }
    
    .epic-level-badge[b-ka5pvcm6dv] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .epic-champion-badge[b-ka5pvcm6dv] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .epic-stats-content[b-ka5pvcm6dv] {
        padding: 0.75rem;
    }
    
    .epic-compact-entry[b-ka5pvcm6dv] {
        padding: 4px 6px;
        font-size: 10px;
    }
    
    .epic-compact-position[b-ka5pvcm6dv] {
        min-width: 16px;
        height: 16px;
        font-size: 8px;
    }
    
    .epic-stat-mini[b-ka5pvcm6dv] {
        padding: 6px 3px;
    }
    
    .epic-stat-value[b-ka5pvcm6dv] {
        font-size: 11px;
    }
    
    .epic-stat-label[b-ka5pvcm6dv] {
        font-size: 9px;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .epic-glass-podium[b-ka5pvcm6dv] {
        padding: 0.5rem;
    }
    
    .epic-header h1[b-ka5pvcm6dv] {
        font-size: 1.25rem !important;
        padding: 0 0.25rem;
    }
    
    .epic-header p[b-ka5pvcm6dv] {
        font-size: 0.8rem !important;
    }
    
    .epic-podium-structure[b-ka5pvcm6dv] {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .epic-position[b-ka5pvcm6dv] {
        width: 100%;
        max-width: 200px;
    }
    
    .epic-position-first[b-ka5pvcm6dv],
    .epic-position-second[b-ka5pvcm6dv],
    .epic-position-third[b-ka5pvcm6dv] {
        transform: scale(1);
    }
    
    .epic-step-first[b-ka5pvcm6dv],
    .epic-step-second[b-ka5pvcm6dv],
    .epic-step-third[b-ka5pvcm6dv] {
        height: 50px;
    }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    *[b-ka5pvcm6dv] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === PERFORMANCE OPTIMIZATIONS === */
.epic-background-layer[b-ka5pvcm6dv],
.epic-particles-bg[b-ka5pvcm6dv] {
    will-change: transform, opacity;
}

.epic-participant-card[b-ka5pvcm6dv],
.epic-medal[b-ka5pvcm6dv] {
    will-change: transform;
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    .epic-glass-podium[b-ka5pvcm6dv] {
        background: rgba(0, 0, 0, 0.8);
        border: 2px solid #ffffff;
    }
    
    .epic-participant-name[b-ka5pvcm6dv],
    .epic-points-massive[b-ka5pvcm6dv],
    .epic-stats-title[b-ka5pvcm6dv] {
        color: #ffffff;
        text-shadow: 0 0 4px #000000;
    }
    
    .epic-step[b-ka5pvcm6dv] {
        border-width: 3px;
    }
}
/* /Components/Display/PodiumWidget.razor.rz.scp.css */
/* Podium Widget Modern Styles */
.podium-container[b-arkfclpe6e] {
    position: relative;
    max-width: 280px;
    overflow: visible;
}

.glass-card-podium[b-arkfclpe6e] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.glass-card-podium[b-arkfclpe6e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent);
}

/* Header Styles */
.podium-header[b-arkfclpe6e] {
    text-align: center;
    position: relative;
}

.pulse-dot[b-arkfclpe6e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse-b-arkfclpe6e 2s infinite;
}

@keyframes pulse-b-arkfclpe6e {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Podium List Styles */
.podium-list[b-arkfclpe6e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow: hidden;
}

.podium-entry[b-arkfclpe6e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: slideInFromRight-b-arkfclpe6e 0.6s ease-out;
}

@keyframes slideInFromRight-b-arkfclpe6e {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.podium-entry:hover[b-arkfclpe6e] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

/* Position-specific styles */
.position-1[b-arkfclpe6e] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 193, 7, 0.1) 100%);
    border-color: rgba(255, 215, 0, 0.3);
    animation-delay: 0s;
}

.position-2[b-arkfclpe6e] {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.2) 0%, rgba(169, 169, 169, 0.1) 100%);
    border-color: rgba(192, 192, 192, 0.3);
    animation-delay: 0.1s;
}

.position-3[b-arkfclpe6e] {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.2) 0%, rgba(184, 115, 51, 0.1) 100%);
    border-color: rgba(205, 127, 50, 0.3);
    animation-delay: 0.2s;
}

.position-other[b-arkfclpe6e] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Position Badge */
.position-badge[b-arkfclpe6e] {
    font-size: 18px;
    line-height: 1;
    min-width: 24px;
    text-align: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Participant Info */
.participant-info[b-arkfclpe6e] {
    flex: 1;
    min-width: 0;
}

.participant-name[b-arkfclpe6e] {
    font-size: 14px;
    font-weight: 600;
    color: white;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.participant-points[b-arkfclpe6e] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-top: 2px;
}

.points-value[b-arkfclpe6e] {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.points-label[b-arkfclpe6e] {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Level Badge */
.level-badge[b-arkfclpe6e] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
}

.level-badge span[b-arkfclpe6e] {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Trophy Illustrations */
.podium-illustration[b-arkfclpe6e] {
    position: absolute;
    bottom: -12px;
    left: -12px;
    pointer-events: none;
    opacity: 0.6;
}

.trophy[b-arkfclpe6e] {
    position: relative;
    width: 32px;
    height: 32px;
}

.trophy-cup[b-arkfclpe6e] {
    width: 20px;
    height: 16px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e  50%, #ffd700 100%);
    border-radius: 8px 8px 4px 4px;
    position: absolute;
    top: 2px;
    left: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.trophy-cup[b-arkfclpe6e]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -4px;
    width: 6px;
    height: 8px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 0 4px 4px 0;
    transform: translateY(-50%);
}

.trophy-cup[b-arkfclpe6e]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -4px;
    width: 6px;
    height: 8px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 4px 0 0 4px;
    transform: translateY(-50%);
}

.trophy-base[b-arkfclpe6e] {
    width: 24px;
    height: 12px;
    background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
    border-radius: 4px;
    position: absolute;
    bottom: 0;
    left: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Event-specific trophy crowns/stars */
.birthday-crown[b-arkfclpe6e], .wedding-crown[b-arkfclpe6e], .graduation-star[b-arkfclpe6e], .anniversary-heart[b-arkfclpe6e],
.baby-star[b-arkfclpe6e], .party-crown[b-arkfclpe6e], .family-star[b-arkfclpe6e], .corporate-star[b-arkfclpe6e], 
.celebration-star[b-arkfclpe6e], .default-star[b-arkfclpe6e] {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.birthday-crown[b-arkfclpe6e] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
}

.wedding-crown[b-arkfclpe6e] {
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
}

.graduation-star[b-arkfclpe6e] {
    background: linear-gradient(135deg, #4834d4 0%, #686de0 100%);
}

.anniversary-heart[b-arkfclpe6e] {
    background: linear-gradient(135deg, #ff3838 0%, #ff6b9d 100%);
}

.baby-star[b-arkfclpe6e] {
    background: linear-gradient(135deg, #74b9ff 0%, #81ecec 100%);
}

.party-crown[b-arkfclpe6e] {
    background: linear-gradient(135deg, #a55eea 0%, #ff6b9d 100%);
}

.family-star[b-arkfclpe6e] {
    background: linear-gradient(135deg, #26de81 0%, #20bf6b 100%);
}

.corporate-star[b-arkfclpe6e] {
    background: linear-gradient(135deg, #778ca3 0%, #4b6584 100%);
}

.celebration-star[b-arkfclpe6e] {
    background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
}

.default-star[b-arkfclpe6e] {
    background: linear-gradient(135deg, #ff6b9d 0%, #a55eea 100%);
}

/* Animations */
@keyframes gradient-xy-b-arkfclpe6e {
    0%, 100% {
        transform: translate(0%, 0%);
    }
    25% {
        transform: translate(10%, 10%);
    }
    50% {
        transform: translate(0%, 20%);
    }
    75% {
        transform: translate(-10%, 10%);
    }
}

.animate-gradient-xy[b-arkfclpe6e] {
    animation: gradient-xy-b-arkfclpe6e 6s ease infinite;
}

.animate-pulse-slow[b-arkfclpe6e] {
    animation: pulse-b-arkfclpe6e 3s infinite;
}

/* Trophy Animation */
.trophy[b-arkfclpe6e] {
    animation: trophyFloat-b-arkfclpe6e 4s ease-in-out infinite;
}

@keyframes trophyFloat-b-arkfclpe6e {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .podium-container[b-arkfclpe6e] {
        max-width: 240px;
    }
    
    .glass-card-podium[b-arkfclpe6e] {
        padding: 16px;
    }
    
    .podium-entry[b-arkfclpe6e] {
        padding: 6px 10px;
        gap: 10px;
    }
    
    .participant-name[b-arkfclpe6e] {
        font-size: 13px;
    }
    
    .points-value[b-arkfclpe6e] {
        font-size: 12px;
    }
}

/* Theme-specific enhancements */
.theme-birthday .podium-entry:hover[b-arkfclpe6e] {
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.2);
}

.theme-wedding .podium-entry:hover[b-arkfclpe6e] {
    box-shadow: 0 4px 20px rgba(255, 107, 157, 0.2);
}

.theme-graduation .podium-entry:hover[b-arkfclpe6e] {
    box-shadow: 0 4px 20px rgba(72, 52, 212, 0.2);
}

.theme-anniversary .podium-entry:hover[b-arkfclpe6e] {
    box-shadow: 0 4px 20px rgba(255, 56, 56, 0.2);
}

.theme-babyshower .podium-entry:hover[b-arkfclpe6e] {
    box-shadow: 0 4px 20px rgba(116, 185, 255, 0.2);
}

.theme-bachelor .podium-entry:hover[b-arkfclpe6e] {
    box-shadow: 0 4px 20px rgba(165, 94, 234, 0.2);
}

.theme-family .podium-entry:hover[b-arkfclpe6e] {
    box-shadow: 0 4px 20px rgba(38, 222, 129, 0.2);
}

.theme-corporate .podium-entry:hover[b-arkfclpe6e] {
    box-shadow: 0 4px 20px rgba(119, 140, 163, 0.2);
}

.theme-celebration .podium-entry:hover[b-arkfclpe6e] {
    box-shadow: 0 4px 20px rgba(254, 202, 87, 0.2);
}

.theme-default .podium-entry:hover[b-arkfclpe6e] {
    box-shadow: 0 4px 20px rgba(255, 107, 157, 0.2);
}
/* /Components/Display/QRCodeCard.razor.rz.scp.css */
/* QR Code Modern Styles */
.qr-container[b-pqlorz3lnz] {
    position: relative;
    max-width: 280px;
    overflow: visible;
}

.glass-card-qr[b-pqlorz3lnz] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.glass-card-qr[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent);
}

.qr-code-wrapper[b-pqlorz3lnz] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-code-container[b-pqlorz3lnz] {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    padding: 12px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 1);
}

.qr-code-image[b-pqlorz3lnz] {
    width: 140px;
    height: 140px;
    display: block;
    border-radius: 12px;
}

/* QR Scanning Animation */
.qr-scan-line[b-pqlorz3lnz] {
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ec4899, transparent);
    animation: scan-b-pqlorz3lnz 2s linear infinite;
    border-radius: 2px;
}

@keyframes scan-b-pqlorz3lnz {
    0% {
        top: 12px;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 15px);
        opacity: 0;
    }
}

/* QR Corner Decorations */
.qr-corner[b-pqlorz3lnz] {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid;
    border-image: linear-gradient(45deg, #ec4899, #8b5cf6) 1;
}

.qr-corner-tl[b-pqlorz3lnz] {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 8px;
}

.qr-corner-tr[b-pqlorz3lnz] {
    top: 8px;
    right: 8px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 8px;
}

.qr-corner-bl[b-pqlorz3lnz] {
    bottom: 8px;
    left: 8px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 8px;
}

.qr-corner-br[b-pqlorz3lnz] {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 8px;
}

/* Pulse Dot */
.pulse-dot[b-pqlorz3lnz] {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    position: relative;
    animation: pulse-dot-b-pqlorz3lnz 2s infinite;
}

.pulse-dot[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: pulse-ring-b-pqlorz3lnz 2s infinite;
}

@keyframes pulse-dot-b-pqlorz3lnz {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes pulse-ring-b-pqlorz3lnz {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Action Badges */
.action-badge[b-pqlorz3lnz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.action-badge:hover[b-pqlorz3lnz] {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

/* Hover Effects */
.glass-card-qr:hover[b-pqlorz3lnz] {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 60px rgba(31, 38, 135, 0.5),
                0 0 40px rgba(236, 72, 153, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .glass-card-qr[b-pqlorz3lnz] {
        transform: scale(0.9);
    }
    
    .qr-container[b-pqlorz3lnz] {
        max-width: 240px;
    }
    
    .qr-code-image[b-pqlorz3lnz] {
        width: 120px;
        height: 120px;
    }
}

/* === EVENT ILLUSTRATIONS - CSS PURE ART === */
.event-illustration[b-pqlorz3lnz] {
    position: absolute;
    bottom: -30px;
    left: -40px;
    pointer-events: none;
    z-index: 50;
    width: 120px;
    height: 120px;
}

/* === CUMPLEAÑOS - Professional Birthday Cake & Balloons === */
.birthday-cake[b-pqlorz3lnz] {
    position: relative;
    width: 90px;
    height: 80px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
    animation: birthdayBob 3s ease-in-out infinite;
}

.cake-base[b-pqlorz3lnz] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 45px;
    background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #CD853F 100%);
    border-radius: 12px 12px 6px 6px;
    box-shadow: 
        0 8px 16px rgba(0,0,0,0.4),
        inset 0 3px 0 rgba(255,255,255,0.3),
        inset 0 -3px 0 rgba(0,0,0,0.2);
}

.cake-base[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 4px;
    background: linear-gradient(90deg, #F4A460, #DEB887);
    border-radius: 2px;
}

.cake-layer[b-pqlorz3lnz] {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    height: 32px;
    background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 50%, #FF1493 100%);
    border-radius: 8px;
    box-shadow: 
        0 6px 12px rgba(0,0,0,0.3),
        inset 0 3px 0 rgba(255,255,255,0.4);
}

.cake-layer[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 3px;
    background: linear-gradient(90deg, #FFC0CB, #FFB6C1);
    border-radius: 2px;
}

.candle[b-pqlorz3lnz] {
    position: absolute;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 28px;
    background: linear-gradient(180deg, #FFFF99 0%, #FFF8DC 50%, #F0E68C 100%);
    border-radius: 5px;
    box-shadow: 
        0 3px 6px rgba(0,0,0,0.3),
        inset 0 3px 0 rgba(255,255,255,0.4);
}

.candle[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 3px;
    background: #8B4513;
    border-radius: 1px;
}

.flame[b-pqlorz3lnz] {
    position: absolute;
    bottom: 93px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 20px;
    background: radial-gradient(ellipse at center bottom, #FF4500 0%, #FF6347 30%, #FFD700 70%, #FFA500 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker-b-pqlorz3lnz 0.8s ease-in-out infinite alternate;
    filter: blur(0.5px);
}

.flame[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 4px;
    background: radial-gradient(ellipse at center, #FFD700 0%, #FFA500 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: innerFlicker-b-pqlorz3lnz 1.2s ease-in-out infinite alternate;
}

@keyframes flicker-b-pqlorz3lnz {
    0% { 
        transform: translateX(-50%) scale(1) rotate(-2deg);
        opacity: 0.9;
    }
    50% {
        transform: translateX(-50%) scale(1.05) rotate(0deg);
        opacity: 1;
    }
    100% { 
        transform: translateX(-50%) scale(1.1) rotate(2deg);
        opacity: 0.95;
    }
}

@keyframes innerFlicker-b-pqlorz3lnz {
    0% { 
        transform: translateX(-50%) scale(0.8) rotate(1deg);
        opacity: 0.8;
    }
    100% { 
        transform: translateX(-50%) scale(1.2) rotate(-1deg);
        opacity: 1;
    }
}

.balloon[b-pqlorz3lnz] {
    position: absolute;
    width: 20px;
    height: 26px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: float-b-pqlorz3lnz 4s ease-in-out infinite;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
}

.balloon[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    pointer-events: none;
}

.balloon[b-pqlorz3lnz]::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 12px;
    background: linear-gradient(180deg, #8B4513 0%, #A0522D 100%);
    border-radius: 1px;
}

.balloon-1[b-pqlorz3lnz] {
    top: -28px;
    left: -22px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 50%, #FFB3B3 100%);
    animation-delay: 0s;
}

.balloon-2[b-pqlorz3lnz] {
    top: -32px;
    right: -26px;
    background: linear-gradient(135deg, #4ECDC4 0%, #45B7B8 50%, #7FDBDA 100%);
    animation-delay: 1.5s;
}

.balloon-3[b-pqlorz3lnz] {
    top: -26px;
    left: 2px;
    background: linear-gradient(135deg, #FFD93D 0%, #FFE066 50%, #FFEB99 100%);
    animation-delay: 0.8s;
    width: 18px;
    height: 24px;
}

@keyframes float-b-pqlorz3lnz {
    0% { 
        transform: translateY(0px) rotate(-1deg);
        opacity: 0.9;
    }
    25% {
        transform: translateY(-3px) rotate(0.5deg);
        opacity: 1;
    }
    50% { 
        transform: translateY(-6px) rotate(0deg);
        opacity: 0.95;
    }
    75% {
        transform: translateY(-3px) rotate(-0.5deg);
        opacity: 1;
    }
    100% { 
        transform: translateY(0px) rotate(1deg);
        opacity: 0.9;
    }
}

/* Confetti particles */
.confetti[b-pqlorz3lnz] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    animation: confettiFall-b-pqlorz3lnz 3s linear infinite;
}

.confetti-1[b-pqlorz3lnz] {
    top: -15px;
    left: 5px;
    background: #FF6B6B;
    animation-delay: 0s;
}

.confetti-2[b-pqlorz3lnz] {
    top: -20px;
    right: 8px;
    background: #4ECDC4;
    animation-delay: 0.5s;
}

.confetti-3[b-pqlorz3lnz] {
    top: -18px;
    left: 15px;
    background: #FFD93D;
    animation-delay: 1s;
}

@keyframes confettiFall-b-pqlorz3lnz {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(60px) rotate(360deg);
        opacity: 0;
    }
}

/* === BODA - Professional Wedding Rings & Hearts === */
.wedding-rings[b-pqlorz3lnz] {
    position: relative;
    width: 100px;
    height: 65px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
    animation: weddingFloat 4s ease-in-out infinite;
}

.ring[b-pqlorz3lnz] {
    position: absolute;
    width: 45px;
    height: 45px;
    border: 10px solid transparent;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    background-clip: padding-box;
    box-shadow: 
        0 0 0 3px #B8860B,
        inset 0 5px 0 rgba(255,255,255,0.4),
        inset 0 -5px 0 rgba(0,0,0,0.3);
}

.ring[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #FFFFFF 0%, #E6E6FA 50%, #DDA0DD 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 12px rgba(255,255,255,0.9),
        0 0 24px rgba(221,160,221,0.7);
    animation: gemSparkle-b-pqlorz3lnz 2s ease-in-out infinite;
}

.ring-1[b-pqlorz3lnz] {
    top: 0;
    left: 0;
    animation: ringShine-b-pqlorz3lnz 3s ease-in-out infinite;
}

.ring-2[b-pqlorz3lnz] {
    top: 6px;
    right: 0;
    animation: ringShine-b-pqlorz3lnz 3s ease-in-out infinite 1s;
}

@keyframes ringShine-b-pqlorz3lnz {
    0%, 100% { 
        box-shadow: 
            0 0 0 1px #B8860B,
            inset 0 2px 0 rgba(255,255,255,0.3),
            inset 0 -2px 0 rgba(0,0,0,0.2),
            0 0 8px rgba(255, 215, 0, 0.4);
    }
    50% { 
        box-shadow: 
            0 0 0 1px #B8860B,
            inset 0 2px 0 rgba(255,255,255,0.4),
            inset 0 -2px 0 rgba(0,0,0,0.2),
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 30px rgba(255, 215, 0, 0.4);
    }
}

@keyframes gemSparkle-b-pqlorz3lnz {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

.heart[b-pqlorz3lnz] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #FF1493 0%, #FF69B4 50%, #FFB6C1 100%);
    transform: rotate(-45deg);
    animation: heartFloat-b-pqlorz3lnz 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(255,20,147,0.3));
}

.heart[b-pqlorz3lnz]:before,
.heart[b-pqlorz3lnz]:after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    left: 5px;
    top: 0;
    background: linear-gradient(135deg, #FF1493 0%, #FF69B4 50%, #FFB6C1 100%);
    border-radius: 50%;
    transform: rotate(-45deg);
    transform-origin: 0 50%;
}

.heart[b-pqlorz3lnz]:after {
    left: 0;
    top: -5px;
    transform: rotate(45deg);
    transform-origin: 100% 50%;
}

.heart[b-pqlorz3lnz]::before {
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
}

.heart[b-pqlorz3lnz]::after {
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3);
}

.heart-1[b-pqlorz3lnz] {
    top: -22px;
    left: -18px;
    animation-delay: 0s;
}

.heart-2[b-pqlorz3lnz] {
    top: -28px;
    right: -22px;
    animation-delay: 1s;
}

.heart-3[b-pqlorz3lnz] {
    top: -15px;
    left: 5px;
    animation-delay: 2s;
    width: 8px;
    height: 8px;
}

.heart-3[b-pqlorz3lnz]:before,
.heart-3[b-pqlorz3lnz]:after {
    width: 8px;
    height: 8px;
    left: 4px;
}

.heart-3[b-pqlorz3lnz]:after {
    top: -4px;
}

@keyframes heartFloat-b-pqlorz3lnz {
    0% {
        transform: rotate(-45deg) translateY(0px) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: rotate(-45deg) translateY(-3px) scale(1.05);
        opacity: 0.9;
    }
    50% {
        transform: rotate(-45deg) translateY(-6px) scale(1.1);
        opacity: 1;
    }
    75% {
        transform: rotate(-45deg) translateY(-3px) scale(1.05);
        opacity: 0.9;
    }
    100% {
        transform: rotate(-45deg) translateY(0px) scale(1);
        opacity: 0.7;
    }
}

/* Romantic sparkles */
.love-sparkle[b-pqlorz3lnz] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #FFD700;
    border-radius: 50%;
    animation: sparkleRomance-b-pqlorz3lnz 2s linear infinite;
}

.love-sparkle-1[b-pqlorz3lnz] {
    top: -12px;
    left: 8px;
    animation-delay: 0.3s;
}

.love-sparkle-2[b-pqlorz3lnz] {
    top: -18px;
    right: 5px;
    animation-delay: 0.8s;
}

@keyframes sparkleRomance-b-pqlorz3lnz {
    0%, 100% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1) rotate(180deg);
        opacity: 1;
    }
}

/* === GRADUACIÓN - Professional Graduation Cap & Diploma === */
.graduation-cap[b-pqlorz3lnz] {
    position: relative;
    width: 100px;
    height: 85px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
    animation: graduationPride 3s ease-in-out infinite;
}

.cap-base[b-pqlorz3lnz] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    height: 32px;
    background: linear-gradient(135deg, #1a1a1a 0%, #333 50%, #4a4a4a 100%);
    border-radius: 50%;
    box-shadow: 
        0 6px 12px rgba(0,0,0,0.4),
        inset 0 3px 0 rgba(255,255,255,0.2),
        inset 0 -3px 0 rgba(0,0,0,0.3);
}

.cap-base[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 3px;
    background: linear-gradient(90deg, #2a2a2a, #555);
    border-radius: 2px;
}

.cap-top[b-pqlorz3lnz] {
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: 85px;
    height: 13px;
    background: linear-gradient(135deg, #1a1a1a 0%, #333 50%, #4a4a4a 100%);
    border-radius: 7px;
    box-shadow: 
        0 6px 12px rgba(0,0,0,0.4),
        inset 0 3px 0 rgba(255,255,255,0.2);
}

.cap-top[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    right: 3px;
    height: 2px;
    background: linear-gradient(90deg, #2a2a2a, #555);
    border-radius: 1px;
}

.tassel[b-pqlorz3lnz] {
    position: absolute;
    bottom: 40px;
    right: 8px;
    width: 12px;
    height: 35px;
    background: linear-gradient(180deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    border-radius: 2px;
    animation: graduationSway-b-pqlorz3lnz 3s ease-in-out infinite;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.tassel[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 5px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 50% 50% 0 0;
}

@keyframes graduationSway-b-pqlorz3lnz {
    0%, 100% { 
        transform: rotate(0deg);
        transform-origin: top center;
    }
    25% {
        transform: rotate(8deg);
        transform-origin: top center;
    }
    75% {
        transform: rotate(-5deg);
        transform-origin: top center;
    }
}

.diploma[b-pqlorz3lnz] {
    position: absolute;
    top: -18px;
    right: -24px;
    width: 18px;
    height: 12px;
    background: linear-gradient(135deg, #F5F5DC 0%, #FFFACD 50%, #FFF8DC 100%);
    border: 1px solid #DAA520;
    border-radius: 2px;
    animation: diplomaFloat-b-pqlorz3lnz 4s ease-in-out infinite;
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.3);
}

.diploma[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(218,165,32,0.1) 20%, 
        rgba(218,165,32,0.1) 80%, 
        transparent 100%);
    border-radius: 1px;
}

.diploma[b-pqlorz3lnz]::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 3px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

@keyframes diplomaFloat-b-pqlorz3lnz {
    0%, 100% { 
        transform: rotate(-8deg) translateY(0px);
        opacity: 0.9;
    }
    50% { 
        transform: rotate(-5deg) translateY(-4px);
        opacity: 1;
    }
}

/* Achievement stars */
.achievement-star[b-pqlorz3lnz] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: starTwinkle-b-pqlorz3lnz 2s ease-in-out infinite;
}

.achievement-star-1[b-pqlorz3lnz] {
    top: -8px;
    left: 5px;
    animation-delay: 0s;
}

.achievement-star-2[b-pqlorz3lnz] {
    top: -12px;
    right: 8px;
    animation-delay: 0.7s;
}

.achievement-star-3[b-pqlorz3lnz] {
    top: -5px;
    left: -5px;
    animation-delay: 1.4s;
}

@keyframes starTwinkle-b-pqlorz3lnz {
    0%, 100% {
        transform: scale(0.8) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
}

/* === ANIVERSARIO - Professional Anniversary Heart === */
.anniversary-heart[b-pqlorz3lnz] {
    position: relative;
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 6px 12px rgba(255,20,147,0.4));
}

.heart-main[b-pqlorz3lnz] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #FF1744 0%, #FF5722 30%, #E91E63 70%, #C2185B 100%);
    animation: anniversaryPulse-b-pqlorz3lnz 2.5s ease-in-out infinite;
    box-shadow: 
        0 0 15px rgba(255,20,147,0.5),
        inset 3px 3px 0 rgba(255,255,255,0.2);
}

.heart-main[b-pqlorz3lnz]:before,
.heart-main[b-pqlorz3lnz]:after {
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    left: 12px;
    top: 0;
    background: linear-gradient(135deg, #FF1744 0%, #FF5722 30%, #E91E63 70%, #C2185B 100%);
    border-radius: 50%;
    transform: rotate(-45deg);
    transform-origin: 0 50%;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,0.2);
}

.heart-main[b-pqlorz3lnz]:after {
    left: 0;
    top: -12px;
    transform: rotate(45deg);
    transform-origin: 100% 50%;
}

.heart-main[b-pqlorz3lnz]::before {
    box-shadow: 
        inset 2px 2px 0 rgba(255,255,255,0.2),
        0 0 8px rgba(255,20,147,0.3);
}

.heart-main[b-pqlorz3lnz]::after {
    box-shadow: 
        inset 2px 2px 0 rgba(255,255,255,0.2),
        0 0 8px rgba(255,20,147,0.3);
}

.heart-sparkle[b-pqlorz3lnz] {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(45deg, #FFD700 0%, #FFA500 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: anniversarySparkle-b-pqlorz3lnz 2s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(255,215,0,0.6));
}

.sparkle-1[b-pqlorz3lnz] {
    top: -12px;
    left: -12px;
    animation-delay: 0s;
}

.sparkle-2[b-pqlorz3lnz] {
    bottom: -12px;
    right: -12px;
    animation-delay: 0.8s;
}

.sparkle-3[b-pqlorz3lnz] {
    top: -10px;
    right: -10px;
    animation-delay: 1.6s;
    width: 6px;
    height: 6px;
}

.sparkle-4[b-pqlorz3lnz] {
    bottom: -10px;
    left: -10px;
    animation-delay: 0.4s;
    width: 6px;
    height: 6px;
}

@keyframes anniversaryPulse-b-pqlorz3lnz {
    0%, 100% { 
        transform: translate(-50%, -50%) rotate(-45deg) scale(1);
        box-shadow: 
            0 0 10px rgba(255,20,147,0.5),
            inset 2px 2px 0 rgba(255,255,255,0.2);
    }
    50% { 
        transform: translate(-50%, -50%) rotate(-45deg) scale(1.2);
        box-shadow: 
            0 0 20px rgba(255,20,147,0.8),
            0 0 30px rgba(255,20,147,0.4),
            inset 2px 2px 0 rgba(255,255,255,0.3);
    }
}

@keyframes anniversarySparkle-b-pqlorz3lnz {
    0%, 100% { 
        opacity: 0.3;
        transform: scale(0.5) rotate(0deg);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

/* Romantic particles */
.love-particle[b-pqlorz3lnz] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    animation: loveFloat-b-pqlorz3lnz 4s ease-in-out infinite;
}

.love-particle-1[b-pqlorz3lnz] {
    top: -12px;
    left: 8px;
    animation-delay: 0.5s;
}

.love-particle-2[b-pqlorz3lnz] {
    top: -15px;
    right: 10px;
    animation-delay: 1.2s;
}

.love-particle-3[b-pqlorz3lnz] {
    bottom: -10px;
    left: 5px;
    animation-delay: 2s;
}

@keyframes loveFloat-b-pqlorz3lnz {
    0%, 100% {
        transform: translateY(0px) scale(0.8);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-8px) scale(1.2);
        opacity: 1;
    }
}

/* === BABY SHOWER - Professional Baby Bottle & Rattle === */
.baby-bottle[b-pqlorz3lnz] {
    position: relative;
    width: 60px;
    height: 95px;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
    animation: babyBottleRock 3s ease-in-out infinite;
}

.bottle-body[b-pqlorz3lnz] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 65px;
    background: linear-gradient(135deg, rgba(227,242,253,0.9) 0%, rgba(187,222,251,0.8) 50%, rgba(144,202,249,0.7) 100%);
    border-radius: 10px;
    border: 3px solid rgba(144,202,249,0.6);
    box-shadow: 
        inset 3px 3px 0 rgba(255,255,255,0.5),
        0 6px 12px rgba(0,0,0,0.2);
}

.bottle-body[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 2px;
    right: 2px;
    height: 60%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    border-radius: 3px;
}

.bottle-body[b-pqlorz3lnz]::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 3px;
    right: 3px;
    height: 50%;
    background: linear-gradient(135deg, rgba(255,192,203,0.3) 0%, rgba(255,182,193,0.2) 100%);
    border-radius: 2px;
}

.bottle-nipple[b-pqlorz3lnz] {
    position: absolute;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 23px;
    background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
    border-radius: 50% 50% 30% 30%;
    box-shadow: 
        inset 3px 3px 0 rgba(255,255,255,0.4),
        0 3px 6px rgba(0,0,0,0.3);
}

.bottle-cap[b-pqlorz3lnz] {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 5px;
    background: linear-gradient(135deg, #FFA726 0%, #FF9800 100%);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.baby-rattle[b-pqlorz3lnz] {
    position: absolute;
    top: -40px;
    right: -35px;
    width: 24px;
    height: 32px;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}

.rattle-handle[b-pqlorz3lnz] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 18px;
    background: linear-gradient(135deg, #8D6E63 0%, #6D4C41 100%);
    border-radius: 3px;
    box-shadow: 
        inset 2px 0 0 rgba(255,255,255,0.2),
        0 3px 5px rgba(0,0,0,0.2);
}

.rattle-handle[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #A1887F 0%, #8D6E63 100%);
    border-radius: 1px;
}

.rattle-head[b-pqlorz3lnz] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #FFB74D 0%, #FFA726 50%, #FF9800 100%);
    border-radius: 50%;
    animation: babyRattle-b-pqlorz3lnz 2s ease-in-out infinite;
    box-shadow: 
        inset 2px 2px 0 rgba(255,255,255,0.3),
        0 2px 4px rgba(0,0,0,0.2);
}

.rattle-head[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 3px;
    height: 3px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
}

.rattle-head[b-pqlorz3lnz]::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 2px;
    height: 2px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
}

/* Baby sparkles */
.baby-sparkle[b-pqlorz3lnz] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: linear-gradient(45deg, #FFD700 0%, #FFA500 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: babySparkle-b-pqlorz3lnz 3s ease-in-out infinite;
}

.baby-sparkle-1[b-pqlorz3lnz] {
    top: -8px;
    left: -5px;
    animation-delay: 0s;
}

.baby-sparkle-2[b-pqlorz3lnz] {
    top: -6px;
    right: -8px;
    animation-delay: 1s;
}

.baby-sparkle-3[b-pqlorz3lnz] {
    bottom: -5px;
    left: -6px;
    animation-delay: 2s;
}

@keyframes babyRattle-b-pqlorz3lnz {
    0%, 100% { 
        transform: translateX(-50%) rotate(-8deg);
        box-shadow: 
            inset 2px 2px 0 rgba(255,255,255,0.3),
            0 2px 4px rgba(0,0,0,0.2);
    }
    50% { 
        transform: translateX(-50%) rotate(8deg);
        box-shadow: 
            inset 2px 2px 0 rgba(255,255,255,0.4),
            0 3px 6px rgba(0,0,0,0.3);
    }
}

@keyframes babySparkle-b-pqlorz3lnz {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.6) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

/* === DESPEDIDA DE SOLTERO/A - Professional Party Hat & Confetti === */
.party-hat[b-pqlorz3lnz] {
    position: relative;
    width: 32px;
    height: 40px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.hat-cone[b-pqlorz3lnz] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 32px solid #9C27B0;
    filter: drop-shadow(0 3px 6px rgba(156,39,176,0.4));
}

.hat-cone[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    bottom: -32px;
    left: -13px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 26px solid #7B1FA2;
}

.hat-cone[b-pqlorz3lnz]::after {
    content: '';
    position: absolute;
    bottom: -26px;
    left: -11px;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 22px solid rgba(255,255,255,0.2);
}

.hat-base[b-pqlorz3lnz] {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 6px;
    background: linear-gradient(135deg, #E1BEE7 0%, #CE93D8 100%);
    border-radius: 3px;
    box-shadow: 
        0 3px 6px rgba(0,0,0,0.2),
        inset 0 2px 0 rgba(255,255,255,0.3);
}

.hat-pom[b-pqlorz3lnz] {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #FFD700 0%, #FFA000 100%);
    border-radius: 50%;
    animation: partyBounce-b-pqlorz3lnz 1.5s ease-in-out infinite;
    box-shadow: 
        0 3px 6px rgba(0,0,0,0.3),
        inset 2px 2px 0 rgba(255,255,255,0.4);
}

.hat-pom[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 3px;
    height: 3px;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
}

@keyframes partyBounce-b-pqlorz3lnz {
    0%, 100% { 
        transform: translateX(-50%) translateY(0px) scale(1);
        box-shadow: 
            0 2px 4px rgba(0,0,0,0.3),
            inset 1px 1px 0 rgba(255,255,255,0.4);
    }
    50% { 
        transform: translateX(-50%) translateY(-4px) scale(1.1);
        box-shadow: 
            0 4px 8px rgba(0,0,0,0.4),
            inset 1px 1px 0 rgba(255,255,255,0.5);
    }
}

/* Party confetti */
.confetti[b-pqlorz3lnz] {
    position: absolute;
    width: 8px;
    height: 8px;
    animation: partyConfettiFall-b-pqlorz3lnz 3s linear infinite;
}

.confetti-1[b-pqlorz3lnz] {
    top: -45px;
    left: -24px;
    background: linear-gradient(45deg, #FF6B6B 0%, #FF5252 100%);
    border-radius: 3px;
    animation-delay: 0s;
}

.confetti-2[b-pqlorz3lnz] {
    top: -50px;
    left: 3px;
    background: linear-gradient(45deg, #4ECDC4 0%, #26C6DA 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation-delay: 0.6s;
}

.confetti-3[b-pqlorz3lnz] {
    top: -40px;
    right: -16px;
    background: linear-gradient(45deg, #FFD93D 0%, #FFC107 100%);
    border-radius: 50%;
    animation-delay: 1.2s;
}

.confetti-4[b-pqlorz3lnz] {
    top: -48px;
    left: -12px;
    background: linear-gradient(45deg, #9C27B0 0%, #7B1FA2 100%);
    width: 6px;
    height: 9px;
    border-radius: 2px;
    animation-delay: 0.3s;
}

.confetti-5[b-pqlorz3lnz] {
    top: -42px;
    right: -26px;
    background: linear-gradient(45deg, #FF9800 0%, #F57C00 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    width: 4px;
    height: 4px;
    animation-delay: 1.8s;
}

.confetti-6[b-pqlorz3lnz] {
    top: -42px;
    left: 8px;
    background: linear-gradient(45deg, #E91E63 0%, #C2185B 100%);
    width: 3px;
    height: 8px;
    border-radius: 1.5px;
    animation-delay: 0.9s;
}

/* Party streamers */
.party-streamer[b-pqlorz3lnz] {
    position: absolute;
    width: 2px;
    height: 12px;
    background: linear-gradient(180deg, #FF6B6B 0%, #4ECDC4 50%, #FFD93D 100%);
    border-radius: 1px;
    animation: streamerFloat-b-pqlorz3lnz 4s ease-in-out infinite;
}

.party-streamer-1[b-pqlorz3lnz] {
    top: -25px;
    left: -22px;
    animation-delay: 0.5s;
}

.party-streamer-2[b-pqlorz3lnz] {
    top: -28px;
    right: -18px;
    animation-delay: 1.5s;
}

@keyframes partyConfettiFall-b-pqlorz3lnz {
    0% { 
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(25px) rotate(180deg) scale(1.2);
        opacity: 0.8;
    }
    100% { 
        transform: translateY(60px) rotate(360deg) scale(0.8);
        opacity: 0;
    }
}

@keyframes streamerFloat-b-pqlorz3lnz {
    0%, 100% {
        transform: translateY(0px) rotate(-5deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-8px) rotate(5deg);
        opacity: 1;
    }
}

/* === REUNIÓN FAMILIAR - Cozy Family House === */
.family-house[b-pqlorz3lnz] {
    position: relative;
    width: 40px;
    height: 34px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.house-base[b-pqlorz3lnz] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 20px;
    background: linear-gradient(135deg, #8D6E63 0%, #A1887F 50%, #BCAAA4 100%);
    border-radius: 4px;
    box-shadow: 
        inset 3px 3px 0 rgba(255,255,255,0.2),
        0 4px 8px rgba(0,0,0,0.2);
}

.house-base[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    border-radius: 2px;
}

.house-roof[b-pqlorz3lnz] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 16px solid #D32F2F;
    filter: drop-shadow(0 3px 6px rgba(211,47,47,0.4));
}

.house-roof[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    bottom: -16px;
    left: -15px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 13px solid #B71C1C;
}

.house-roof[b-pqlorz3lnz]::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: -13px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 11px solid rgba(255,255,255,0.2);
}

.house-door[b-pqlorz3lnz] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 11px;
    background: linear-gradient(135deg, #5D4037 0%, #3E2723 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: 
        inset 2px 2px 0 rgba(255,255,255,0.2),
        0 3px 5px rgba(0,0,0,0.3);
}

.house-door[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 2px;
    width: 2px;
    height: 2px;
    background: #FFD700;
    border-radius: 50%;
}

.house-window[b-pqlorz3lnz] {
    position: absolute;
    bottom: 11px;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #FFD54F 0%, #FFC107 100%);
    border-radius: 2px;
    animation: familyWindowGlow-b-pqlorz3lnz 3s ease-in-out infinite;
    box-shadow: 
        0 0 8px rgba(255,213,79,0.6),
        inset 2px 2px 0 rgba(255,255,255,0.4);
}

.house-window[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(0,0,0,0.2);
}

.house-window[b-pqlorz3lnz]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(0,0,0,0.2);
}

/* Chimney */
.house-chimney[b-pqlorz3lnz] {
    position: absolute;
    bottom: 24px;
    right: 3px;
    width: 4px;
    height: 8px;
    background: linear-gradient(135deg, #6D4C41 0%, #5D4037 100%);
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.house-chimney[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -0.5px;
    width: 4px;
    height: 2px;
    background: linear-gradient(135deg, #8D6E63 0%, #6D4C41 100%);
    border-radius: 1px;
}

/* Smoke */
.house-smoke[b-pqlorz3lnz] {
    position: absolute;
    bottom: 24px;
    right: 3px;
    width: 2px;
    height: 2px;
    background: rgba(200,200,200,0.6);
    border-radius: 50%;
    animation: smokeRise-b-pqlorz3lnz 4s ease-in-out infinite;
}

.house-smoke-2[b-pqlorz3lnz] {
    bottom: 26px;
    right: 2px;
    animation-delay: 1s;
}

.house-smoke-3[b-pqlorz3lnz] {
    bottom: 28px;
    right: 4px;
    animation-delay: 2s;
}

.window-left[b-pqlorz3lnz] {
    left: 3px;
}

.window-right[b-pqlorz3lnz] {
    right: 3px;
}

@keyframes familyWindowGlow-b-pqlorz3lnz {
    0%, 100% { 
        box-shadow: 
            0 0 6px rgba(255,213,79,0.6),
            inset 1px 1px 0 rgba(255,255,255,0.4);
        background: linear-gradient(135deg, #FFD54F 0%, #FFC107 100%);
    }
    50% { 
        box-shadow: 
            0 0 12px rgba(255,213,79,0.9),
            0 0 18px rgba(255,213,79,0.4),
            inset 1px 1px 0 rgba(255,255,255,0.6);
        background: linear-gradient(135deg, #FFEB3B 0%, #FFD54F 100%);
    }
}

@keyframes smokeRise-b-pqlorz3lnz {
    0% {
        transform: translateY(0px) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-6px) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-12px) scale(0.8);
        opacity: 0;
    }
}

/* Family warmth particles */
.family-warmth[b-pqlorz3lnz] {
    position: absolute;
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, #FFD700 0%, #FFA500 100%);
    border-radius: 50%;
    animation: warmthFloat-b-pqlorz3lnz 5s ease-in-out infinite;
}

.family-warmth-1[b-pqlorz3lnz] {
    top: -8px;
    left: 5px;
    animation-delay: 0.5s;
}

.family-warmth-2[b-pqlorz3lnz] {
    top: -12px;
    right: 8px;
    animation-delay: 1.5s;
}

.family-warmth-3[b-pqlorz3lnz] {
    top: -6px;
    left: 12px;
    animation-delay: 2.5s;
}

@keyframes warmthFloat-b-pqlorz3lnz {
    0%, 100% {
        transform: translateY(0px) scale(0.8);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-10px) scale(1.2);
        opacity: 1;
    }
}

/* === FIESTA CORPORATIVA - Briefcase & Tie === */
/* === FIESTA CORPORATIVA - Professional Briefcase === */
.briefcase[b-pqlorz3lnz] {
    position: relative;
    width: 36px;
    height: 26px;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
    animation: corporateBob-b-pqlorz3lnz 3s ease-in-out infinite;
}

.case-body[b-pqlorz3lnz] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 18px;
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 50%, #2C3E50 100%);
    border-radius: 4px;
    box-shadow: 
        0 6px 12px rgba(0,0,0,0.3),
        inset 0 2px 0 rgba(255,255,255,0.1),
        inset 0 -2px 0 rgba(0,0,0,0.2);
}

.case-body[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
}

.case-body[b-pqlorz3lnz]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 2px;
    background: linear-gradient(90deg, #BDC3C7 0%, #ECF0F1 100%);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.case-handle[b-pqlorz3lnz] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 6px;
    border: 3px solid #34495E;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(135deg, #BDC3C7 0%, #95A5A6 100%);
    box-shadow: 
        0 3px 6px rgba(0,0,0,0.2),
        inset 0 2px 0 rgba(255,255,255,0.3);
}

/* Professional lock */
.case-lock[b-pqlorz3lnz] {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* === Professional Tie === */
.tie[b-pqlorz3lnz] {
    position: absolute;
    top: -32px;
    right: -24px;
    width: 16px;
    height: 20px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    animation: tieWave-b-pqlorz3lnz 4s ease-in-out infinite;
}

.tie-knot[b-pqlorz3lnz] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 5px;
    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 50%, #1565C0 100%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.tie-knot[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 1px;
    background: rgba(255,255,255,0.3);
    border-radius: 0.5px;
}

.tie-body[b-pqlorz3lnz] {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 16px;
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 50%, #0D47A1 100%);
    clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.tie-body[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 8px;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.1) 0px,
        rgba(255,255,255,0.1) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* Corporate success particles */
.corporate-shine[b-pqlorz3lnz] {
    position: absolute;
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, #F39C12 0%, #E67E22 100%);
    border-radius: 50%;
    animation: corporateShine-b-pqlorz3lnz 3s ease-in-out infinite;
}

.corporate-shine-1[b-pqlorz3lnz] {
    top: -8px;
    left: 2px;
    animation-delay: 0.5s;
}

.corporate-shine-2[b-pqlorz3lnz] {
    top: -12px;
    right: 5px;
    animation-delay: 1.5s;
}

.corporate-shine-3[b-pqlorz3lnz] {
    top: -6px;
    left: 15px;
    animation-delay: 2.5s;
}

@keyframes corporateBob-b-pqlorz3lnz {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
}

@keyframes tieWave-b-pqlorz3lnz {
    0%, 100% { 
        transform: translateX(-50%) rotate(0deg);
    }
    25% { 
        transform: translateX(-50%) rotate(1deg);
    }
    75% { 
        transform: translateX(-50%) rotate(-1deg);
    }
}

@keyframes corporateShine-b-pqlorz3lnz {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* === CELEBRACIÓN - Explosive Party Cannon & Brilliant Stars === */
.party-popper[b-pqlorz3lnz] {
    position: relative;
    width: 36px;
    height: 42px;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
    animation: celebrationBounce-b-pqlorz3lnz 2s ease-in-out infinite;
}

.popper-body[b-pqlorz3lnz] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(15deg);
    width: 12px;
    height: 28px;
    background: linear-gradient(135deg, #FFD700 0%, #FF8F00 50%, #E65100 100%);
    border-radius: 6px;
    box-shadow: 
        0 6px 12px rgba(0,0,0,0.3),
        inset 0 2px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.2);
}

.popper-body[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 2px;
    right: 2px;
    height: 12px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.2) 0px,
        rgba(255,255,255,0.2) 2px,
        transparent 2px,
        transparent 4px
    );
    border-radius: 3px;
}

.popper-top[b-pqlorz3lnz] {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%) rotate(15deg);
    width: 14px;
    height: 8px;
    background: linear-gradient(135deg, #FF5722 0%, #D32F2F 100%);
    border-radius: 4px;
    box-shadow: 
        0 3px 6px rgba(0,0,0,0.3),
        inset 0 2px 0 rgba(255,255,255,0.2);
}

.popper-top[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    right: 3px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.4) 0%, transparent 100%);
    border-radius: 2px;
}

/* Explosion effect */
.popper-explosion[b-pqlorz3lnz] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 12px;
    background: radial-gradient(ellipse, #FFD700 0%, #FF8F00 50%, transparent 100%);
    border-radius: 50%;
    animation: explosionPulse-b-pqlorz3lnz 1.5s ease-out infinite;
}

/* === Brilliant Stars === */
.star[b-pqlorz3lnz] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #FFD700 0%, #FFC107 50%, #FF8F00 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.6));
    animation: brilliantStarBurst-b-pqlorz3lnz 2s ease-out infinite;
}

.star[b-pqlorz3lnz]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, #FFFFFF 0%, #FFD700 100%);
    border-radius: 50%;
    animation: starSparkle-b-pqlorz3lnz 1s ease-in-out infinite alternate;
}

.star-1[b-pqlorz3lnz] {
    top: -14px;
    left: -8px;
    animation-delay: 0s;
}

.star-2[b-pqlorz3lnz] {
    top: -20px;
    left: 8px;
    animation-delay: 0.3s;
}

.star-3[b-pqlorz3lnz] {
    top: -12px;
    right: -12px;
    animation-delay: 0.6s;
}

/* Celebration animations */
@keyframes celebrationBounce-b-pqlorz3lnz {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-3px) rotate(1deg);
    }
    75% {
        transform: translateY(-1px) rotate(-1deg);
    }
}

@keyframes explosionPulse-b-pqlorz3lnz {
    0% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.8;
    }
    50% {
        transform: translateX(-50%) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(0.6);
        opacity: 0.3;
    }
}

@keyframes brilliantStarBurst-b-pqlorz3lnz {
    0% { 
        transform: scale(0) rotate(0deg);
        opacity: 1;
        filter: drop-shadow(0 0 2px rgba(255,215,0,0.4));
    }
    50% {
        transform: scale(1.2) rotate(90deg);
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255,215,0,0.8));
    }
    100% { 
        transform: scale(1.8) rotate(180deg);
        opacity: 0;
        filter: drop-shadow(0 0 12px rgba(255,215,0,0.2));
    }
}

@keyframes starSparkle-b-pqlorz3lnz {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

/* Celebration particles */
.celebration-burst[b-pqlorz3lnz] {
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #FFD700 0%, #FF8F00 100%);
    border-radius: 50%;
    animation: celebrationBurstFloat-b-pqlorz3lnz 2.5s ease-out infinite;
}

.celebration-burst-1[b-pqlorz3lnz] {
    top: -16px;
    left: -12px;
    animation-delay: 0.2s;
}

.celebration-burst-2[b-pqlorz3lnz] {
    top: -22px;
    right: -10px;
    animation-delay: 0.8s;
}

.celebration-burst-3[b-pqlorz3lnz] {
    top: -14px;
    left: 16px;
    animation-delay: 1.4s;
}

@keyframes celebrationBurstFloat-b-pqlorz3lnz {
    0% {
        transform: translateY(0px) scale(0.8);
        opacity: 1;
    }
    50% {
        transform: translateY(-15px) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-25px) scale(0.6);
        opacity: 0;
    }
}

/* === DEFAULT - Sparkles === */
.default-sparkles[b-pqlorz3lnz] {
    position: relative;
    width: 32px;
    height: 32px;
}

.sparkle-default[b-pqlorz3lnz] {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #FFD700;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: defaultSparkle-b-pqlorz3lnz 2s ease-in-out infinite;
}

.sparkle-default-1[b-pqlorz3lnz] {
    top: 3px;
    left: 3px;
}

.sparkle-default-2[b-pqlorz3lnz] {
    top: 12px;
    right: 3px;
    animation-delay: 0.7s;
}

.sparkle-default-3[b-pqlorz3lnz] {
    bottom: 3px;
    left: 12px;
    animation-delay: 1.4s;
}

@keyframes defaultSparkle-b-pqlorz3lnz {
    0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
/* /Components/Events/FeedbackManager.razor.rz.scp.css */
:host[b-xzxp4bqf9s] {
  display: block;
}

.feedback-card[b-xzxp4bqf9s] {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
  overflow: hidden;
}

.feedback-header[b-xzxp4bqf9s] {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
}

.feedback-title[b-xzxp4bqf9s] {
  font-weight: 800;
  font-size: 18px;
  color: #111827;
}

.feedback-stats[b-xzxp4bqf9s] {
  display: flex;
  gap: 12px;
  align-items: center;
}

.stat-item[b-xzxp4bqf9s] {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 72px;
  text-align: center;
}

.stat-value[b-xzxp4bqf9s] {
  font-weight: 700;
  font-size: 16px;
  color: #111827;
}

.stat-label[b-xzxp4bqf9s] {
  font-size: 11px;
  color: #6b7280;
}

.feedback-actions[b-xzxp4bqf9s] {
  display: flex;
  gap: 8px;
}

.btn-primary[b-xzxp4bqf9s] {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}

.btn-secondary[b-xzxp4bqf9s] {
  background: #111827;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}

.btn-muted[b-xzxp4bqf9s] {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 600;
  cursor: pointer;
}

.btn-danger[b-xzxp4bqf9s] {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 600;
  cursor: pointer;
}

.create-form[b-xzxp4bqf9s] {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
}

.input[b-xzxp4bqf9s] {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}

.form-actions[b-xzxp4bqf9s] {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  grid-column: 1 / -1;
}

.question-list[b-xzxp4bqf9s] {
  padding: 8px 12px 16px 12px;
}

.question-item[b-xzxp4bqf9s] {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
}

.question-item.active[b-xzxp4bqf9s] {
  border-color: #93c5fd;
  box-shadow: 0 6px 12px rgba(147,197,253,0.2);
}

.question-item.inactive[b-xzxp4bqf9s] {
  opacity: 0.85;
}

.question-content[b-xzxp4bqf9s] {
  display: grid;
  gap: 4px;
}

.question-text[b-xzxp4bqf9s] {
  font-weight: 600;
  font-size: 14px;
  color: #111827;
}

.question-meta[b-xzxp4bqf9s] {
  font-size: 12px;
  color: #6b7280;
}

.question-actions[b-xzxp4bqf9s] {
  display: flex;
  gap: 8px;
}

.edit-form[b-xzxp4bqf9s] {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
}
/* /Components/Participant/CountdownTimer.razor.rz.scp.css */
/* Countdown Container */
.countdown-container[b-vd81yzqiwn] {
    text-align: center;
    animation: fadeInUp-b-vd81yzqiwn 0.6s ease-out;
}

/* Elegant Header Styles */
.countdown-header[b-vd81yzqiwn] {
    max-width: 600px;
    margin: 0 auto;
}

/* Animated divider (consistent with other sections) */
.section-header .section-divider-animated[b-vd81yzqiwn] {
    height: 1px;
    margin-top: 0.75rem;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    position: relative;
    overflow: hidden;
}

.section-header .section-divider-animated[b-vd81yzqiwn]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
    animation: dividerSweepCT-b-vd81yzqiwn 2.4s ease-in-out infinite;
}

@keyframes dividerSweepCT-b-vd81yzqiwn {
    0% { transform: translateX(-100%); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateX(350%); opacity: 0; }
}

/* Countdown Timer Card - Glassmorphism */
.countdown-timer-card[b-vd81yzqiwn] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    max-width: 600px;
    margin: 0 auto;
}

.countdown-timer-card:hover[b-vd81yzqiwn] {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.countdown-timer[b-vd81yzqiwn] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.countdown-units[b-vd81yzqiwn] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    justify-content: center;
}

.countdown-unit[b-vd81yzqiwn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Countdown Card - Glassmorphism Style */
.countdown-card[b-vd81yzqiwn] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 20px 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    min-width: 90px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.countdown-card:hover[b-vd81yzqiwn] {
    transform: translateY(-3px) scale(1.03);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.countdown-card.flip[b-vd81yzqiwn] {
    animation: smoothFlip-b-vd81yzqiwn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Countdown Number - White Theme */
.countdown-number[b-vd81yzqiwn] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Countdown Label - Elegant Style */
.countdown-label[b-vd81yzqiwn] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Countdown Separator */
.countdown-separator[b-vd81yzqiwn] {
    font-size: 2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 8px;
    animation: gentlePulse-b-vd81yzqiwn 3s ease-in-out infinite;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes smoothFlip-b-vd81yzqiwn {
    0% {
        transform: perspective(400px) rotateX(0deg) scale(1);
        opacity: 1;
    }
    30% {
        transform: perspective(400px) rotateX(-45deg) scale(0.95);
        opacity: 0.8;
    }
    70% {
        transform: perspective(400px) rotateX(-45deg) scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: perspective(400px) rotateX(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes gentlePulse-b-vd81yzqiwn {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.08);
    }
}

/* Back Button - Matching Section Style */
.countdown-back-button[b-vd81yzqiwn] {
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 0.95rem;
}

.countdown-back-button:hover[b-vd81yzqiwn] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.countdown-back-button:active[b-vd81yzqiwn] {
    transform: translateY(0);
}

/* Animations */
@keyframes fadeInUp-b-vd81yzqiwn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .countdown-timer-card[b-vd81yzqiwn] {
        padding: 1.5rem;
        border-radius: 16px;
    }
    
    .countdown-card[b-vd81yzqiwn] {
        min-width: 75px;
        padding: 16px 20px;
    }
    
    .countdown-number[b-vd81yzqiwn] {
        font-size: 2rem;
    }
    
    .countdown-label[b-vd81yzqiwn] {
        font-size: 0.7rem;
        letter-spacing: 0.8px;
    }
    
    .countdown-separator[b-vd81yzqiwn] {
        font-size: 1.75rem;
        margin: 0 6px;
    }
    
    .countdown-units[b-vd81yzqiwn] {
        gap: 12px;
    }
    
    .countdown-header h2[b-vd81yzqiwn] {
        font-size: 1.5rem;
    }
    
    .countdown-header h3[b-vd81yzqiwn] {
        font-size: 1.125rem;
    }
    
    .countdown-back-button[b-vd81yzqiwn] {
        padding: 0.875rem 1.25rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 640px) {
    .countdown-timer-card[b-vd81yzqiwn] {
        padding: 1.25rem;
    }
    
    .countdown-units[b-vd81yzqiwn] {
        gap: 10px;
    }
    
    .countdown-card[b-vd81yzqiwn] {
        padding: 12px 16px;
        min-width: 65px;
        border-radius: 12px;
    }
    
    .countdown-number[b-vd81yzqiwn] {
        font-size: 1.625rem;
    }
    
    .countdown-label[b-vd81yzqiwn] {
        font-size: 0.65rem;
        letter-spacing: 0.6px;
    }
    
    .countdown-separator[b-vd81yzqiwn] {
        font-size: 1.5rem;
        margin: 0 4px;
    }
    
    .countdown-header h2[b-vd81yzqiwn] {
        font-size: 1.25rem;
    }
    
    .countdown-header h3[b-vd81yzqiwn] {
        font-size: 1rem;
    }
    
    .countdown-header p[b-vd81yzqiwn] {
        font-size: 0.8125rem;
    }
}

@media (max-width: 400px) {
    .countdown-timer-card[b-vd81yzqiwn] {
        padding: 1rem;
    }
    
    .countdown-units[b-vd81yzqiwn] {
        gap: 8px;
    }
    
    .countdown-card[b-vd81yzqiwn] {
        padding: 10px 12px;
        min-width: 55px;
        border-radius: 10px;
    }
    
    .countdown-number[b-vd81yzqiwn] {
        font-size: 1.375rem;
    }
    
    .countdown-label[b-vd81yzqiwn] {
        font-size: 0.6rem;
        letter-spacing: 0.5px;
    }
    
    .countdown-separator[b-vd81yzqiwn] {
        font-size: 1.25rem;
        margin: 0 3px;
    }
    
    .countdown-header h2[b-vd81yzqiwn] {
        font-size: 1.125rem;
    }
    
    .countdown-header h3[b-vd81yzqiwn] {
        font-size: 0.9375rem;
    }
    
    .countdown-header p[b-vd81yzqiwn] {
        font-size: 0.75rem;
    }
    
    .countdown-back-button[b-vd81yzqiwn] {
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
    }
}
/* /Components/Participant/EventHeroCard.razor.rz.scp.css */
/* ==== ULTRA-COMPACT EXPANDABLE HERO CARD ==== */

.hero-card[b-boq92idd0t] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    margin: 0.25rem 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.15);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Collapsed state - ultra compact ~40px height */
.hero-card.collapsed[b-boq92idd0t] {
    min-height: 40px;
}

.hero-card[b-boq92idd0t]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.hero-card:hover[b-boq92idd0t]::before {
    opacity: 1;
}

.hero-card:active[b-boq92idd0t] {
    transform: scale(0.99);
}

.hero-card-content[b-boq92idd0t] {
    padding: 0.5rem 0.75rem;
    position: relative;
    z-index: 1;
}

/* Compact Row (Collapsed State) */
.hero-compact-row[b-boq92idd0t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 24px;
}

/* Compact Title */
.hero-compact-title[b-boq92idd0t] {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* When expanded, allow multi-line */
.hero-card.expanded .hero-compact-title[b-boq92idd0t] {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Compact Social Icons */
.hero-compact-social[b-boq92idd0t] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.compact-social-icon[b-boq92idd0t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 0.625rem;
    transition: all 0.2s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.compact-social-icon:hover[b-boq92idd0t] {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.compact-social-icon:active[b-boq92idd0t] {
    transform: scale(1.05);
}

/* Specific Social Media Colors */
.compact-social-icon.facebook:hover[b-boq92idd0t] {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.4), rgba(66, 165, 245, 0.4));
}

.compact-social-icon.instagram:hover[b-boq92idd0t] {
    background: linear-gradient(135deg, rgba(228, 64, 95, 0.4), rgba(247, 119, 55, 0.4));
}

.compact-social-icon.twitter:hover[b-boq92idd0t] {
    background: linear-gradient(135deg, rgba(29, 161, 242, 0.4), rgba(13, 139, 217, 0.4));
}

.compact-social-icon.youtube:hover[b-boq92idd0t] {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.4), rgba(204, 0, 0, 0.4));
}

.compact-social-icon.website:hover[b-boq92idd0t] {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.4), rgba(73, 80, 87, 0.4));
}

/* Expand/Collapse Button */
.hero-expand-btn[b-boq92idd0t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    transition: all 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}

.hero-expand-btn:hover[b-boq92idd0t] {
    background: rgba(255, 255, 255, 0.25);
}

.expand-icon[b-boq92idd0t] {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 0.2s ease;
}

.expand-icon.rotated[b-boq92idd0t] {
    transform: rotate(180deg);
}

/* Expanded Content */
.hero-expanded-content[b-boq92idd0t] {
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.hero-expanded-content.visible[b-boq92idd0t] {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.875rem;
}

.hero-expanded-description[b-boq92idd0t] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin: 0;
}

/* Expanded State Card */
.hero-card.expanded[b-boq92idd0t] {
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

/* Animation */
@keyframes fadeInUp-b-boq92idd0t {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design - Ultra Compact */
@media (max-width: 640px) {
    .hero-card[b-boq92idd0t] {
        margin: 0.25rem 0.375rem;
        margin-bottom: 0.375rem;
        border-radius: 10px;
    }
    
    .hero-card-content[b-boq92idd0t] {
        padding: 0.5rem 0.625rem;
    }
    
    .hero-compact-row[b-boq92idd0t] {
        gap: 0.375rem;
    }
    
    .hero-compact-title[b-boq92idd0t] {
        font-size: 0.875rem;
    }
    
    .hero-compact-social[b-boq92idd0t] {
        gap: 0.2rem;
    }
    
    .compact-social-icon[b-boq92idd0t] {
        width: 20px;
        height: 20px;
        font-size: 0.5625rem;
    }
    
    .hero-expand-btn[b-boq92idd0t] {
        width: 20px;
        height: 20px;
    }
    
    .expand-icon[b-boq92idd0t] {
        width: 0.625rem;
        height: 0.625rem;
    }
    
    .hero-expanded-description[b-boq92idd0t] {
        font-size: 0.8125rem;
    }
    
    .hero-expanded-content.visible[b-boq92idd0t] {
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .hero-card[b-boq92idd0t] {
        margin: 0.1875rem 0.25rem;
        margin-bottom: 0.25rem;
        border-radius: 8px;
    }
    
    .hero-card-content[b-boq92idd0t] {
        padding: 0.375rem 0.5rem;
    }
    
    .hero-compact-row[b-boq92idd0t] {
        gap: 0.25rem;
    }
    
    .hero-compact-title[b-boq92idd0t] {
        font-size: 0.8125rem;
    }
    
    .hero-compact-social[b-boq92idd0t] {
        gap: 0.125rem;
    }
    
    .compact-social-icon[b-boq92idd0t] {
        width: 18px;
        height: 18px;
        font-size: 0.5rem;
    }
    
    .hero-expand-btn[b-boq92idd0t] {
        width: 18px;
        height: 18px;
    }
    
    .expand-icon[b-boq92idd0t] {
        width: 0.5rem;
        height: 0.5rem;
    }
    
    .hero-expanded-description[b-boq92idd0t] {
        font-size: 0.75rem;
        line-height: 1.35;
    }
    
    .hero-expanded-content.visible[b-boq92idd0t] {
        margin-top: 0.375rem;
    }
}

/* Very compact for small screens */
@media (max-width: 360px) {
    .hero-card-content[b-boq92idd0t] {
        padding: 0.3125rem 0.375rem;
    }
    
    .hero-compact-title[b-boq92idd0t] {
        font-size: 0.75rem;
    }
    
    .compact-social-icon[b-boq92idd0t] {
        width: 16px;
        height: 16px;
        font-size: 0.4375rem;
    }
    
    .hero-expand-btn[b-boq92idd0t] {
        width: 16px;
        height: 16px;
    }
    
    .hero-expanded-description[b-boq92idd0t] {
        font-size: 0.6875rem;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

[data-theme="dark"] .hero-card[b-boq92idd0t] {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 2px 12px rgba(76, 29, 149, 0.3);
}

[data-theme="dark"] .hero-card.expanded[b-boq92idd0t] {
    box-shadow: 0 4px 20px rgba(76, 29, 149, 0.4);
}

/* /Components/Participant/FeedbackBanner.razor.rz.scp.css */
/* ============================================
   FEEDBACK BANNER - Estrellas Inline con Confirmación
   ============================================ */

.feedback-banner-container[b-fp9cvd58yz] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    padding: 0 0.75rem calc(env(safe-area-inset-bottom) + 0.75rem);
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.feedback-banner-card[b-fp9cvd58yz] {
    background: linear-gradient(145deg, #1e1b4b 0%, #312e81 40%, #4c1d95 100%);
    color: #fff;
    border-radius: 20px;
    box-shadow: 
        0 -4px 30px rgba(139, 92, 246, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 1rem 1.25rem 1.25rem;
    width: 100%;
    max-width: 420px;
    pointer-events: auto;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo sutil en el borde */
.feedback-banner-card[b-fp9cvd58yz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

/* Header del banner */
.feedback-banner-header[b-fp9cvd58yz] {
    margin-bottom: 0.75rem;
}

.feedback-badge-row[b-fp9cvd58yz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.feedback-badge[b-fp9cvd58yz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.12);
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-dot[b-fp9cvd58yz] {
    width: 6px;
    height: 6px;
    background: #34d399;
    border-radius: 50%;
    animation: pulseDot-b-fp9cvd58yz 2s ease-in-out infinite;
}

@keyframes pulseDot-b-fp9cvd58yz {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.feedback-dismiss-btn[b-fp9cvd58yz] {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    padding: 0.35rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.feedback-dismiss-btn:hover[b-fp9cvd58yz] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

.feedback-dismiss-btn svg[b-fp9cvd58yz] {
    width: 16px;
    height: 16px;
    color: #fff;
}

.feedback-question-text[b-fp9cvd58yz] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   INDICADORES DE ESCALA
   ============================================ */

.feedback-scale-labels[b-fp9cvd58yz] {
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem;
    margin-bottom: 0.35rem;
}

.scale-label[b-fp9cvd58yz] {
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.scale-label.scale-low[b-fp9cvd58yz] {
    color: #fca5a5;
}

.scale-label.scale-high[b-fp9cvd58yz] {
    color: #86efac;
}

/* ============================================
   ESTRELLAS INLINE
   ============================================ */

.feedback-stars-inline[b-fp9cvd58yz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
}

.star-inline-btn[b-fp9cvd58yz] {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 0.55rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.star-inline-btn:hover[b-fp9cvd58yz],
.star-inline-btn.hovered[b-fp9cvd58yz] {
    transform: scale(1.12) translateY(-3px);
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
}

.star-inline-btn:active[b-fp9cvd58yz] {
    transform: scale(0.95);
}

.star-inline-btn.selected[b-fp9cvd58yz] {
    background: rgba(251, 191, 36, 0.25);
    border-color: #fbbf24;
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
}

.star-inline-btn:disabled[b-fp9cvd58yz] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.star-inline-icon[b-fp9cvd58yz] {
    width: 26px;
    height: 26px;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.2s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.star-inline-btn:hover .star-inline-icon[b-fp9cvd58yz],
.star-inline-btn.hovered .star-inline-icon[b-fp9cvd58yz] {
    color: #fcd34d;
}

.star-inline-btn.selected .star-inline-icon[b-fp9cvd58yz] {
    color: #fbbf24;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

.star-number[b-fp9cvd58yz] {
    font-size: 0.6rem;
    font-weight: 700;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.star-inline-btn:hover .star-number[b-fp9cvd58yz],
.star-inline-btn.hovered .star-number[b-fp9cvd58yz],
.star-inline-btn.selected .star-number[b-fp9cvd58yz] {
    opacity: 1;
}

/* ============================================
   FEEDBACK DE RATING
   ============================================ */

.feedback-rating-preview[b-fp9cvd58yz] {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.4rem 0;
    animation: fadeInUp-b-fp9cvd58yz 0.2s ease;
    border-radius: 8px;
    margin: 0.25rem 0;
}

.feedback-rating-preview.rating-excellent[b-fp9cvd58yz] {
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

.feedback-rating-preview.rating-good[b-fp9cvd58yz] {
    color: #a3e635;
    text-shadow: 0 0 10px rgba(163, 230, 53, 0.4);
}

.feedback-rating-preview.rating-normal[b-fp9cvd58yz] {
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.feedback-rating-preview.rating-regular[b-fp9cvd58yz] {
    color: #fb923c;
    text-shadow: 0 0 10px rgba(251, 146, 60, 0.4);
}

.feedback-rating-preview.rating-bad[b-fp9cvd58yz] {
    color: #f87171;
    text-shadow: 0 0 10px rgba(248, 113, 113, 0.4);
}

.feedback-rating-hint[b-fp9cvd58yz] {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.4rem 0;
    margin: 0.25rem 0;
}

@keyframes fadeInUp-b-fp9cvd58yz {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   BOTONES DE ACCIÓN
   ============================================ */

.feedback-actions-row[b-fp9cvd58yz] {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.75rem;
    animation: fadeInUp-b-fp9cvd58yz 0.25s ease;
}

.btn-add-comment[b-fp9cvd58yz] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-comment:hover[b-fp9cvd58yz] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-add-comment:disabled[b-fp9cvd58yz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-add-comment svg[b-fp9cvd58yz] {
    width: 16px;
    height: 16px;
}

.btn-submit-quick[b-fp9cvd58yz] {
    flex: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
    transition: all 0.2s ease;
}

.btn-submit-quick:hover[b-fp9cvd58yz] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

.btn-submit-quick:active[b-fp9cvd58yz] {
    transform: translateY(0);
}

.btn-submit-quick:disabled[b-fp9cvd58yz] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-submit-quick svg[b-fp9cvd58yz] {
    width: 18px;
    height: 18px;
}

/* ============================================
   ANIMACIONES DEL BANNER
   ============================================ */

@keyframes slideUpBounce-b-fp9cvd58yz {
    0% {
        transform: translateY(120%);
        opacity: 0;
    }
    60% {
        transform: translateY(-6px);
        opacity: 1;
    }
    80% {
        transform: translateY(3px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes attentionShake-b-fp9cvd58yz {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-4px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(4px);
    }
}

@keyframes glowPulse-b-fp9cvd58yz {
    0%, 100% {
        box-shadow: 
            0 -4px 30px rgba(139, 92, 246, 0.35),
            0 8px 32px rgba(0, 0, 0, 0.25);
    }
    50% {
        box-shadow: 
            0 -4px 45px rgba(139, 92, 246, 0.5),
            0 8px 40px rgba(0, 0, 0, 0.3),
            0 0 60px rgba(236, 72, 153, 0.2);
    }
}

.banner-enter[b-fp9cvd58yz] {
    animation: slideUpBounce-b-fp9cvd58yz 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.banner-attention[b-fp9cvd58yz] {
    animation: attentionShake-b-fp9cvd58yz 0.6s ease-in-out, glowPulse-b-fp9cvd58yz 0.6s ease-in-out;
}

/* ============================================
   MODAL DE COMENTARIO (Sin estrellas)
   ============================================ */

.feedback-modal-overlay[b-fp9cvd58yz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 1rem;
    animation: fadeIn-b-fp9cvd58yz 0.2s ease;
}

@keyframes fadeIn-b-fp9cvd58yz {
    from { opacity: 0; }
    to { opacity: 1; }
}

.feedback-comment-modal[b-fp9cvd58yz] {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
    animation: scaleIn-b-fp9cvd58yz 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn-b-fp9cvd58yz {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.comment-modal-header[b-fp9cvd58yz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.comment-modal-title[b-fp9cvd58yz] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
}

.close-btn[b-fp9cvd58yz] {
    background: #f3f4f6;
    border: none;
    border-radius: 10px;
    padding: 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-btn:hover[b-fp9cvd58yz] {
    background: #e5e7eb;
    transform: scale(1.05);
}

.close-btn svg[b-fp9cvd58yz] {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

/* Rating display en modal */
.comment-modal-rating[b-fp9cvd58yz] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.rating-display[b-fp9cvd58yz] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    display: block;
    margin-bottom: 0.35rem;
}

.rating-stars-display[b-fp9cvd58yz] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.star-small[b-fp9cvd58yz] {
    width: 20px;
    height: 20px;
}

.star-small.filled[b-fp9cvd58yz] {
    color: #fbbf24;
}

.star-small.empty[b-fp9cvd58yz] {
    color: #d1d5db;
}

.rating-text-small[b-fp9cvd58yz] {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

/* Textarea */
.feedback-textarea[b-fp9cvd58yz] {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.85rem;
    font-size: 0.95rem;
    resize: none;
    min-height: 100px;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feedback-textarea:focus[b-fp9cvd58yz] {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.feedback-textarea[b-fp9cvd58yz]::placeholder {
    color: #9ca3af;
}

.textarea-counter[b-fp9cvd58yz] {
    text-align: right;
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

/* Botones del modal */
.comment-modal-actions[b-fp9cvd58yz] {
    display: flex;
    gap: 0.75rem;
}

.btn-secondary[b-fp9cvd58yz] {
    flex: 1;
    background: #f3f4f6;
    color: #374151;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-fp9cvd58yz] {
    background: #e5e7eb;
}

.btn-primary[b-fp9cvd58yz] {
    flex: 1.3;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    transition: all 0.2s ease;
}

.btn-primary:hover[b-fp9cvd58yz] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-primary:disabled[b-fp9cvd58yz] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.spinner-small[b-fp9cvd58yz] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-fp9cvd58yz 0.8s linear infinite;
}

@keyframes spin-b-fp9cvd58yz {
    to { transform: rotate(360deg); }
}

/* ============================================
   CELEBRACIÓN
   ============================================ */

.celebration-overlay[b-fp9cvd58yz] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    pointer-events: none;
    animation: fadeIn-b-fp9cvd58yz 0.2s ease;
}

.celebration-content[b-fp9cvd58yz] {
    text-align: center;
    animation: celebrationBounce-b-fp9cvd58yz 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes celebrationBounce-b-fp9cvd58yz {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.celebration-emoji[b-fp9cvd58yz] {
    font-size: 4.5rem;
    margin-bottom: 0.5rem;
    animation: celebrateEmoji-b-fp9cvd58yz 0.6s ease;
}

@keyframes celebrateEmoji-b-fp9cvd58yz {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-12deg) scale(1.1); }
    75% { transform: rotate(12deg) scale(1.1); }
}

.celebration-message[b-fp9cvd58yz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.celebration-rating[b-fp9cvd58yz] {
    font-size: 1rem;
    color: #fbbf24;
    font-weight: 600;
    margin-top: 0.25rem;
}

.celebration-next[b-fp9cvd58yz],
.celebration-done[b-fp9cvd58yz] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.5rem;
}

.celebration-done[b-fp9cvd58yz] {
    color: #86efac;
}

/* ============================================
   INDICADOR MINIMIZADO
   ============================================ */

.feedback-minimized[b-fp9cvd58yz] {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 1rem);
    right: 1rem;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    z-index: 40;
    transition: all 0.3s ease;
    animation: bounceIn-b-fp9cvd58yz 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bounceIn-b-fp9cvd58yz {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.feedback-minimized:hover[b-fp9cvd58yz] {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
}

.feedback-minimized:active[b-fp9cvd58yz] {
    transform: scale(0.95);
}

.minimized-pulse[b-fp9cvd58yz] {
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    animation: minimizedPulse-b-fp9cvd58yz 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes minimizedPulse-b-fp9cvd58yz {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.25);
        opacity: 0;
    }
}

.minimized-icon[b-fp9cvd58yz] {
    width: 24px;
    height: 24px;
    color: #fbbf24;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.minimized-badge[b-fp9cvd58yz] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    border: 2px solid #fff;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .feedback-banner-container[b-fp9cvd58yz] {
        padding: 0 0.5rem calc(env(safe-area-inset-bottom) + 0.5rem);
    }

    .feedback-banner-card[b-fp9cvd58yz] {
        border-radius: 18px;
        padding: 0.85rem 1rem 1rem;
        max-width: 100%;
    }

    .feedback-question-text[b-fp9cvd58yz] {
        font-size: 0.9rem;
    }

    .star-inline-icon[b-fp9cvd58yz] {
        width: 22px;
        height: 22px;
    }

    .star-inline-btn[b-fp9cvd58yz] {
        padding: 0.45rem;
        border-radius: 10px;
    }

    .feedback-stars-inline[b-fp9cvd58yz] {
        gap: 0.3rem;
    }

    .btn-submit-quick[b-fp9cvd58yz],
    .btn-add-comment[b-fp9cvd58yz] {
        padding: 0.6rem 0.65rem;
        font-size: 0.75rem;
    }

    .feedback-comment-modal[b-fp9cvd58yz] {
        max-width: 95%;
        padding: 1.25rem;
    }

    .celebration-emoji[b-fp9cvd58yz] {
        font-size: 3.5rem;
    }

    .celebration-message[b-fp9cvd58yz] {
        font-size: 1.25rem;
    }
}

@media (max-width: 380px) {
    .feedback-question-text[b-fp9cvd58yz] {
        font-size: 0.85rem;
    }

    .star-inline-icon[b-fp9cvd58yz] {
        width: 20px;
        height: 20px;
    }

    .star-inline-btn[b-fp9cvd58yz] {
        padding: 0.4rem;
    }

    .star-number[b-fp9cvd58yz] {
        font-size: 0.55rem;
    }

    .scale-label[b-fp9cvd58yz] {
        font-size: 0.6rem;
    }
}
/* /Components/Participant/GamificationWidget.razor.rz.scp.css */
/* Gamification Widget Styles */
.gamification-widget[b-pcybzxbsz3] {
    position: relative;
    z-index: 10;
}

/* Animations */
@keyframes slide-down-b-pcybzxbsz3 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-up-b-pcybzxbsz3 {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce-in-b-pcybzxbsz3 {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-glow-b-pcybzxbsz3 {
    0%, 100% {
        box-shadow: 0 0 5px rgba(168, 85, 247, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.8), 0 0 30px rgba(168, 85, 247, 0.6);
    }
}

@keyframes float-b-pcybzxbsz3 {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes sparkle-b-pcybzxbsz3 {
    0%, 100% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes count-up-b-pcybzxbsz3 {
    from {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }
}

/* Animation Classes */
.animate-slide-down[b-pcybzxbsz3] {
    animation: slide-down-b-pcybzxbsz3 0.3s ease-out;
}

.animate-scale-up[b-pcybzxbsz3] {
    animation: scale-up-b-pcybzxbsz3 0.3s ease-out;
}

.animate-bounce-in[b-pcybzxbsz3] {
    animation: bounce-in-b-pcybzxbsz3 0.6s ease-out;
}

.animate-pulse-glow[b-pcybzxbsz3] {
    animation: pulse-glow-b-pcybzxbsz3 2s infinite;
}

.animate-float[b-pcybzxbsz3] {
    animation: float-b-pcybzxbsz3 3s ease-in-out infinite;
}

.animate-sparkle[b-pcybzxbsz3] {
    animation: sparkle-b-pcybzxbsz3 1.5s ease-in-out infinite;
}

/* Progress Bar Animation */
.progress-bar[b-pcybzxbsz3] {
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Points Counter Animation */
.points-counter[b-pcybzxbsz3] {
    transition: all 0.3s ease;
}

.points-counter.updating[b-pcybzxbsz3] {
    animation: count-up-b-pcybzxbsz3 0.5s ease-out;
    color: #10b981;
}

/* Level Badge Styles */
.level-badge[b-pcybzxbsz3] {
    position: relative;
    overflow: hidden;
}

.level-badge[b-pcybzxbsz3]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    transition: all 0.5s;
    opacity: 0;
}

.level-badge:hover[b-pcybzxbsz3]::before {
    animation: shine-b-pcybzxbsz3 0.8s ease-in-out;
    opacity: 1;
}

@keyframes shine-b-pcybzxbsz3 {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Tab Transition */
.tab-content[b-pcybzxbsz3] {
    animation: slide-down-b-pcybzxbsz3 0.2s ease-out;
}

/* Leaderboard Entry Hover */
.leaderboard-entry[b-pcybzxbsz3] {
    transition: all 0.2s ease;
}

.leaderboard-entry:hover[b-pcybzxbsz3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Modal Backdrop */
.modal-backdrop[b-pcybzxbsz3] {
    backdrop-filter: blur(4px);
    animation: fade-in-b-pcybzxbsz3 0.3s ease-out;
}

@keyframes fade-in-b-pcybzxbsz3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Level Up Modal Animations */
.level-up-modal[b-pcybzxbsz3] {
    animation: bounce-in-b-pcybzxbsz3 0.6s ease-out;
}

.level-up-badge[b-pcybzxbsz3] {
    animation: float-b-pcybzxbsz3 2s ease-in-out infinite;
}

/* Sparkle Effects */
.sparkle[b-pcybzxbsz3] {
    position: absolute;
    pointer-events: none;
    animation: sparkle-b-pcybzxbsz3 1.5s ease-in-out infinite;
}

/* Pagination Styles */
.pagination-container[b-pcybzxbsz3] {
    position: relative;
    overflow: hidden;
}

.pagination-items[b-pcybzxbsz3] {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.pagination-item[b-pcybzxbsz3] {
    flex: 0 0 100%;
    transition: opacity 0.3s ease-in-out;
}

.pagination-controls[b-pcybzxbsz3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.pagination-button[b-pcybzxbsz3] {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: #8b5cf6;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.pagination-button:hover:not(:disabled)[b-pcybzxbsz3] {
    background: rgba(168, 85, 247, 0.2);
    transform: scale(1.1);
}

.pagination-button:disabled[b-pcybzxbsz3] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pagination-indicator[b-pcybzxbsz3] {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
    min-width: 3rem;
    text-align: center;
}

/* Horizontal page animation */
@keyframes slide-left-b-pcybzxbsz3 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-right-b-pcybzxbsz3 {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slide-left[b-pcybzxbsz3] {
    animation: slide-left-b-pcybzxbsz3 0.3s ease-out;
}

.animate-slide-right[b-pcybzxbsz3] {
    animation: slide-right-b-pcybzxbsz3 0.3s ease-out;
}

.sparkle:nth-child(1)[b-pcybzxbsz3] { animation-delay: 0s; }
.sparkle:nth-child(2)[b-pcybzxbsz3] { animation-delay: 0.3s; }
.sparkle:nth-child(3)[b-pcybzxbsz3] { animation-delay: 0.6s; }
.sparkle:nth-child(4)[b-pcybzxbsz3] { animation-delay: 0.9s; }

/* Responsive Design */
@media (max-width: 640px) {
    
    .level-badge[b-pcybzxbsz3] {
        transform: scale(0.9);
    }
    
    .tab-content[b-pcybzxbsz3] {
        padding: 0.5rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .gamification-widget[b-pcybzxbsz3] {
        color-scheme: dark;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .animate-slide-down[b-pcybzxbsz3],
    .animate-scale-up[b-pcybzxbsz3],
    .animate-bounce-in[b-pcybzxbsz3],
    .animate-pulse-glow[b-pcybzxbsz3],
    .animate-float[b-pcybzxbsz3],
    .animate-sparkle[b-pcybzxbsz3],
    .progress-bar[b-pcybzxbsz3],
    .points-counter[b-pcybzxbsz3],
    .level-badge[b-pcybzxbsz3]::before,
    .tab-content[b-pcybzxbsz3],
    .leaderboard-entry[b-pcybzxbsz3],
    .modal-backdrop[b-pcybzxbsz3],
    .level-up-modal[b-pcybzxbsz3],
    .level-up-badge[b-pcybzxbsz3],
    .sparkle[b-pcybzxbsz3] {
        animation: none !important;
        transition: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .gamification-widget[b-pcybzxbsz3] {
        border: 2px solid;
    }
    
    .progress-bar[b-pcybzxbsz3] {
        border: 1px solid;
    }
}

/* Focus Styles for Accessibility */
.gamification-widget button:focus[b-pcybzxbsz3] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Loading States */
.loading-shimmer[b-pcybzxbsz3] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-pcybzxbsz3 1.5s infinite;
}

@keyframes shimmer-b-pcybzxbsz3 {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Success/Error States */
.success-glow[b-pcybzxbsz3] {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
    animation: pulse-success-b-pcybzxbsz3 1s ease-in-out;
}

.error-glow[b-pcybzxbsz3] {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
    animation: pulse-error-b-pcybzxbsz3 1s ease-in-out;
}

@keyframes pulse-success-b-pcybzxbsz3 {
    0%, 100% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(34, 197, 94, 0.8);
    }
}

@keyframes pulse-error-b-pcybzxbsz3 {
    0%, 100% {
        box-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.8);
    }
}

/* Enhanced Button Styles */
.animate-pulse-glow[b-pcybzxbsz3] {
    animation: pulse-glow-enhanced-b-pcybzxbsz3 2s infinite;
}

@keyframes pulse-glow-enhanced-b-pcybzxbsz3 {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.4), 0 0 10px rgba(168, 85, 247, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(168, 85, 247, 0.6), 0 0 40px rgba(168, 85, 247, 0.4);
    }
}

.expand-button[b-pcybzxbsz3] {
    position: relative;
    overflow: hidden;
}

.expand-button[b-pcybzxbsz3]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.expand-button:hover[b-pcybzxbsz3]::before {
    left: 100%;
}

.expand-button:hover[b-pcybzxbsz3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Icon rotation animation */
.icon-rotate[b-pcybzxbsz3] {
    transition: transform 0.3s ease;
}

.icon-rotate.rotate-180[b-pcybzxbsz3] {
    transform: rotate(180deg);
}
/* /Components/Participant/MessageCard.razor.rz.scp.css */
/* Contenedor principal del mensaje */
.message-card-container[b-60nmfw9ko1] {
    margin-bottom: 1rem;
    width: 100%;
}

/* Efectos de hover y transiciones */
.message-card-container .bg-white[b-60nmfw9ko1] {
    transition: all 0.2s ease-in-out;
}

.message-card-container .bg-white:hover[b-60nmfw9ko1] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* Avatar del usuario */
.message-card-container .w-10.h-10[b-60nmfw9ko1] {
    transition: transform 0.2s ease-in-out;
}

.message-card-container .w-10.h-10:hover[b-60nmfw9ko1] {
    transform: scale(1.05);
}

/* Botones de acción */
.message-card-container button[b-60nmfw9ko1] {
    transition: all 0.2s ease-in-out;
    outline: none;
}

.message-card-container button:focus[b-60nmfw9ko1] {
    outline: 2px solid rgba(147, 51, 234, 0.5);
    outline-offset: 2px;
}

/* Botones de acción directos */
.message-card-container button[title="Editar mensaje"][b-60nmfw9ko1] {
    transition: all 0.2s ease-in-out;
    background-color: rgba(59, 130, 246, 0.8); /* bg-blue-500 bg-opacity-80 */
}

.message-card-container button[title="Editar mensaje"]:hover[b-60nmfw9ko1] {
    transform: scale(1.1);
    background-color: rgba(59, 130, 246, 1); /* hover:bg-opacity-100 */
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.message-card-container button[title="Eliminar mensaje"][b-60nmfw9ko1] {
    transition: all 0.2s ease-in-out;
    background-color: rgba(239, 68, 68, 0.8); /* bg-red-500 bg-opacity-80 */
}

.message-card-container button[title="Eliminar mensaje"]:hover[b-60nmfw9ko1] {
    transform: scale(1.1);
    background-color: rgba(239, 68, 68, 1); /* hover:bg-opacity-100 */
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Efectos de hover para los iconos de acción */
.message-card-container button[title="Editar mensaje"] svg[b-60nmfw9ko1],
.message-card-container button[title="Eliminar mensaje"] svg[b-60nmfw9ko1] {
    transition: all 0.2s ease-in-out;
    color: white;
}

.message-card-container button[title="Editar mensaje"]:hover svg[b-60nmfw9ko1] {
    transform: scale(1.1);
    color: white;
}

.message-card-container button[title="Eliminar mensaje"]:hover svg[b-60nmfw9ko1] {
    transform: scale(1.1);
    color: white;
}

/* Textarea de edición */
.message-card-container textarea[b-60nmfw9ko1] {
    transition: all 0.2s ease-in-out;
    resize: none;
}

.message-card-container textarea:focus[b-60nmfw9ko1] {
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.5);
    background-color: white;
}

.message-card-container textarea:disabled[b-60nmfw9ko1] {
    background-color: rgba(249, 250, 251, 1);
    cursor: not-allowed;
}

/* Botón principal (Guardar) */
.message-card-container button[class*="bg-gradient-to-r"][b-60nmfw9ko1] {
    background: linear-gradient(to right, #8b5cf6, #ec4899);
    transition: all 0.2s ease-in-out;
}

.message-card-container button[class*="bg-gradient-to-r"]:hover:not(:disabled)[b-60nmfw9ko1] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: scale(1.05);
}

.message-card-container button[class*="bg-gradient-to-r"]:disabled[b-60nmfw9ko1] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Botón secundario (Cancelar) */
.message-card-container button[class*="border-gray-300"][b-60nmfw9ko1] {
    transition: all 0.2s ease-in-out;
    background-color: rgba(243, 244, 246, 1); /* bg-gray-100 */
    color: rgba(75, 85, 99, 1); /* text-gray-600 */
}

.message-card-container button[class*="border-gray-300"]:hover:not(:disabled)[b-60nmfw9ko1] {
    background-color: rgba(229, 231, 235, 1); /* bg-gray-200 */
    border-color: rgba(209, 213, 219, 1);
    color: rgba(55, 65, 81, 1); /* text-gray-700 for better contrast on hover */
}

/* Spinner de carga */
.message-card-container .animate-spin[b-60nmfw9ko1] {
    animation: spin-b-60nmfw9ko1 1s linear infinite;
}

@keyframes spin-b-60nmfw9ko1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Badge de "Editado" */
.message-card-container .bg-blue-100[b-60nmfw9ko1] {
    animation: fadeIn-b-60nmfw9ko1 0.3s ease-in-out;
}

@keyframes fadeIn-b-60nmfw9ko1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mensajes de estado */
.message-card-container .text-red-500[b-60nmfw9ko1],
.message-card-container .text-green-500[b-60nmfw9ko1] {
    animation: slideInUp-b-60nmfw9ko1 0.3s ease-out;
}

@keyframes slideInUp-b-60nmfw9ko1 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contenido del mensaje */
.message-card-container .whitespace-pre-wrap[b-60nmfw9ko1] {
    word-break: break-word;
    line-height: 1.5;
}

/* Contador de caracteres */
.message-card-container .absolute.bottom-2.right-2[b-60nmfw9ko1] {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
}

/* Iconos SVG */
.message-card-container svg[b-60nmfw9ko1] {
    transition: all 0.2s ease-in-out;
}

.message-card-container button:hover svg[b-60nmfw9ko1] {
    transform: scale(1.1);
}

/* Responsive design */
@media (max-width: 640px) {
    .message-card-container[b-60nmfw9ko1] {
        margin-bottom: 0.75rem;
    }
    
    .message-card-container .p-4[b-60nmfw9ko1] {
        padding: 0.75rem;
    }
    
    .message-card-container .space-x-3 > * + *[b-60nmfw9ko1] {
        margin-left: 0.5rem;
    }
    
    .message-card-container .w-10.h-10[b-60nmfw9ko1] {
        width: 2rem;
        height: 2rem;
    }
    
    .message-card-container .text-sm[b-60nmfw9ko1] {
        font-size: 0.75rem;
    }
    
    .message-card-container .min-w-\[120px\][b-60nmfw9ko1] {
        min-width: 100px;
    }
    
    /* Botones de acción en móvil */
    .message-card-container button[title="Editar mensaje"][b-60nmfw9ko1],
    .message-card-container button[title="Eliminar mensaje"][b-60nmfw9ko1] {
        padding: 0.375rem;
    }
    
    .message-card-container button[title="Editar mensaje"] svg[b-60nmfw9ko1],
    .message-card-container button[title="Eliminar mensaje"] svg[b-60nmfw9ko1] {
        width: 0.875rem;
        height: 0.875rem;
    }
}

/* Estados de focus para accesibilidad */
.message-card-container *:focus[b-60nmfw9ko1] {
    outline: 2px solid rgba(147, 51, 234, 0.5);
    outline-offset: 2px;
}

.message-card-container button:focus[b-60nmfw9ko1] {
    outline: 2px solid rgba(147, 51, 234, 0.5);
    outline-offset: 2px;
}

/* Mejoras de contraste para accesibilidad */
.message-card-container .text-gray-500[b-60nmfw9ko1] {
    color: rgba(107, 114, 128, 1);
}

.message-card-container .text-gray-700[b-60nmfw9ko1] {
    color: rgba(55, 65, 81, 1);
}

.message-card-container .text-gray-900[b-60nmfw9ko1] {
    color: rgba(17, 24, 39, 1);
}

/* Efectos de selección */
.message-card-container[b-60nmfw9ko1]::selection {
    background-color: rgba(147, 51, 234, 0.2);
}

.message-card-container *[b-60nmfw9ko1]::selection {
    background-color: rgba(147, 51, 234, 0.2);
}

/* Mejoras para modo oscuro (preparación futura) */
@media (prefers-color-scheme: dark) {
    .message-card-container .bg-white[b-60nmfw9ko1] {
        background-color: rgba(31, 41, 55, 1);
        border-color: rgba(75, 85, 99, 1);
    }
    
    .message-card-container .text-gray-900[b-60nmfw9ko1] {
        color: rgba(243, 244, 246, 1);
    }
    
    .message-card-container .text-gray-700[b-60nmfw9ko1] {
        color: rgba(209, 213, 219, 1);
    }
    
    .message-card-container .text-gray-500[b-60nmfw9ko1] {
        color: rgba(156, 163, 175, 1);
    }
}
/* /Components/Participant/MessageInput.razor.rz.scp.css */
.message-input-container[b-oxaac0kf4c] {
    width: 100%;
    margin-bottom: 1rem;
}

.message-input-container textarea[b-oxaac0kf4c] {
    transition: all 0.3s ease;
    font-family: inherit;
    line-height: 1.5;
}

.message-input-container textarea:focus[b-oxaac0kf4c] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

.message-input-container textarea:disabled[b-oxaac0kf4c] {
    background-color: #f9fafb;
    cursor: not-allowed;
}

.message-input-container button:disabled[b-oxaac0kf4c] {
    cursor: not-allowed;
}

.message-input-container .animate-spin[b-oxaac0kf4c] {
    animation: spin-b-oxaac0kf4c 1s linear infinite;
}

@keyframes spin-b-oxaac0kf4c {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Enhanced mobile-first responsive design */
@media (max-width: 640px) {
    .message-input-container[b-oxaac0kf4c] {
        margin-bottom: 0.5rem;
    }
    
    .message-input-container textarea[b-oxaac0kf4c] {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 80px;
        padding: 1rem;
    }
    
    .message-input-container .flex.justify-between[b-oxaac0kf4c] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
        padding: 1rem;
    }
    
    .message-input-container .flex.justify-between > div:last-child[b-oxaac0kf4c] {
        justify-content: center;
        gap: 0.75rem;
    }
    
    .message-input-container button[b-oxaac0kf4c] {
        min-height: 44px; /* iOS touch target minimum */
        font-size: 0.875rem;
        font-weight: 600;
    }
    
    /* Enhanced touch targets for mobile */
    .message-input-container button:not(:disabled)[b-oxaac0kf4c] {
        transform: scale(1);
        transition: transform 0.2s ease;
    }
    
    .message-input-container button:not(:disabled):active[b-oxaac0kf4c] {
        transform: scale(0.95);
    }
}

/* Very small screens optimization */
@media (max-width: 480px) {
    .message-input-container textarea[b-oxaac0kf4c] {
        padding: 0.875rem;
        font-size: 16px;
    }
    
    .message-input-container .flex.justify-between[b-oxaac0kf4c] {
        padding: 0.875rem;
        gap: 0.5rem;
    }
    
    .message-input-container button[b-oxaac0kf4c] {
        min-height: 40px;
        padding: 0.75rem 1.5rem;
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .message-input-container textarea[b-oxaac0kf4c] {
        rows: 2;
        min-height: 60px;
    }
    
    .message-input-container .flex.justify-between[b-oxaac0kf4c] {
        padding: 0.75rem;
    }
}

/* Focus states for better accessibility */
.message-input-container textarea:focus[b-oxaac0kf4c] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
    border-color: rgba(147, 51, 234, 0.3);
}

/* Enhanced loading state */
.message-input-container button:disabled[b-oxaac0kf4c] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none !important;
}

/* Smooth transitions for all interactive elements */
.message-input-container *[b-oxaac0kf4c] {
    transition: all 0.2s ease;
}

/* Clear button - Top right corner styling */
.message-input-container .group:hover .opacity-0[b-oxaac0kf4c] {
    opacity: 1;
}

.message-input-container .absolute.top-3.right-3[b-oxaac0kf4c] {
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.message-input-container .absolute.top-3.right-3:hover[b-oxaac0kf4c] {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Character counter - Bottom right styling */
.message-input-container .absolute.bottom-3.right-3[b-oxaac0kf4c] {
    pointer-events: none; /* Allow clicking through to textarea */
}

.message-input-container .absolute.bottom-3.right-3 > *[b-oxaac0kf4c] {
    pointer-events: auto; /* Re-enable for counter elements */
}

/* Mobile responsive design */
@media (max-width: 640px) {
    .message-input-container textarea[b-oxaac0kf4c] {
        padding-right: 3rem; /* More space for clear button */
    }
    
    .message-input-container .absolute.top-3.right-3[b-oxaac0kf4c] {
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.375rem;
    }
    
    .message-input-container .absolute.top-3.right-3 svg[b-oxaac0kf4c] {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    .message-input-container .absolute.bottom-3.right-3[b-oxaac0kf4c] {
        bottom: 0.5rem;
        right: 0.5rem;
        flex-direction: row;
        align-items: center;
        gap: 0.375rem;
    }
    
    .message-input-container .absolute.bottom-3.right-3 .w-8[b-oxaac0kf4c] {
        width: 1.5rem;
    }
    
    /* Always show clear button on mobile when content exists */
    .message-input-container .opacity-0[b-oxaac0kf4c] {
        opacity: 1;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .message-input-container .absolute.bottom-3.right-3[b-oxaac0kf4c] {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }
    
    .message-input-container .absolute.top-3.right-3[b-oxaac0kf4c] {
        top: 0.375rem;
        right: 0.375rem;
        padding: 0.25rem;
    }
}

/* Focus states for better accessibility */
.message-input-container .absolute.top-3.right-3:focus[b-oxaac0kf4c] {
    opacity: 1 !important;
    outline: 2px solid rgba(147, 51, 234, 0.5);
    outline-offset: 2px;
}

/* Smooth transitions for all elements */
.message-input-container .absolute[b-oxaac0kf4c] {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==== MODERN PULSATING ANIMATIONS ==== */

/* Pulsating container animation */
@keyframes messagePulse-b-oxaac0kf4c {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(147, 51, 234, 0.15);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 8px 32px rgba(147, 51, 234, 0.3), 
                    0 0 0 4px rgba(147, 51, 234, 0.08);
    }
}

/* Icon float animation */
@keyframes iconFloat-b-oxaac0kf4c {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    25% {
        transform: translateY(-6px) scale(1.05);
    }
    50% {
        transform: translateY(0) scale(1);
    }
    75% {
        transform: translateY(-3px) scale(1.02);
    }
}

/* Gradient shine animation */
@keyframes gradientShine-b-oxaac0kf4c {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Text shimmer */
@keyframes messageShimmer-b-oxaac0kf4c {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* Button glow pulse */
@keyframes buttonGlowPulse-b-oxaac0kf4c {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3);
    }
    50% {
        box-shadow: 0 6px 25px rgba(147, 51, 234, 0.5), 
                    0 0 0 4px rgba(147, 51, 234, 0.1);
    }
}

/* Apply pulse animation to header container */
.message-header-pulse[b-oxaac0kf4c] {
    animation: messagePulse-b-oxaac0kf4c 3s ease-in-out infinite;
}

/* Apply float animation to icon */
.message-icon-float[b-oxaac0kf4c] {
    animation: iconFloat-b-oxaac0kf4c 2.5s ease-in-out infinite;
}

/* Apply shimmer to text */
.message-text-shimmer[b-oxaac0kf4c] {
    animation: messageShimmer-b-oxaac0kf4c 3s ease-in-out infinite;
}

/* Apply gradient animation */
.message-gradient-animated[b-oxaac0kf4c] {
    background-size: 200% 200%;
    animation: gradientShine-b-oxaac0kf4c 4s ease-in-out infinite;
}

/* Send button pulse */
.send-button-pulse[b-oxaac0kf4c] {
    animation: buttonGlowPulse-b-oxaac0kf4c 2.5s ease-in-out infinite;
}

.send-button-pulse:hover[b-oxaac0kf4c] {
    animation: none;
    box-shadow: 0 8px 32px rgba(147, 51, 234, 0.6);
}

/* Textarea focus glow */
.message-input-container textarea:focus[b-oxaac0kf4c] {
    animation: textareaFocusGlow-b-oxaac0kf4c 0.3s ease-out forwards;
}

@keyframes textareaFocusGlow-b-oxaac0kf4c {
    0% {
        box-shadow: 0 0 0 0 rgba(147, 51, 234, 0);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.15), 
                    0 4px 20px rgba(147, 51, 234, 0.2);
    }
}

/* Typing indicator animation */
@keyframes typing-b-oxaac0kf4c {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.typing-indicator[b-oxaac0kf4c] {
    animation: typing-b-oxaac0kf4c 1.2s ease-in-out infinite;
}

/* Enhanced hover states */
.message-input-container .bg-white:hover[b-oxaac0kf4c] {
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Counter pulse when near limit */
@keyframes counterWarningPulse-b-oxaac0kf4c {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.character-warning[b-oxaac0kf4c] {
    animation: counterWarningPulse-b-oxaac0kf4c 0.8s ease-in-out infinite;
}
/* /Components/Participant/MiniPodium.razor.rz.scp.css */
/* ============================================
   MINI PODIUM - Floating Action Button (Bottom Left)
   ============================================ */

.mini-podium-container[b-sfcdj90tjq] {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 1rem);
    left: 1rem;
    z-index: 40;
    display: flex;
    flex-direction: column-reverse; /* Expands upwards */
    align-items: flex-start;
}

/* Collapsed FAB */
.mini-podium-fab[b-sfcdj90tjq] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.mini-podium-fab:hover[b-sfcdj90tjq] {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(251, 191, 36, 0.6);
}

.mini-podium-fab:active[b-sfcdj90tjq] {
    transform: scale(0.95);
}

.podium-icon[b-sfcdj90tjq] {
    font-size: 1.75rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.position-badge[b-sfcdj90tjq] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    border: 2px solid #fff;
}

/* Expanded State */
.mini-podium-expanded[b-sfcdj90tjq] {
    background: white;
    border-radius: 16px;
    padding: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    width: 280px;
    margin-bottom: 1rem; /* Space between button and expanded card */
    animation: expandUp-b-sfcdj90tjq 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    transform-origin: bottom left;
}

@keyframes expandUp-b-sfcdj90tjq {
    from {
        opacity: 0;
        transform: scale(0.8) translate(-10px, 10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

.podium-header[b-sfcdj90tjq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.podium-title[b-sfcdj90tjq] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1f2937;
}

.collapse-btn[b-sfcdj90tjq] {
    width: 20px;
    height: 20px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
    padding: 0;
}

.collapse-btn:hover[b-sfcdj90tjq] {
    background: #e5e7eb;
}

.collapse-btn svg[b-sfcdj90tjq] {
    width: 12px;
    height: 12px;
}

/* Podium Entries */
.podium-entries[b-sfcdj90tjq] {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.podium-entry[b-sfcdj90tjq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.375rem 0.25rem;
    background: #f9fafb;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.podium-entry.position-1[b-sfcdj90tjq] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    order: 2;
    transform: scale(1.05);
    z-index: 1;
}

.podium-entry.position-2[b-sfcdj90tjq] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    order: 1;
    margin-top: 0.5rem;
}

.podium-entry.position-3[b-sfcdj90tjq] {
    background: linear-gradient(135deg, #fed7aa, #fdba74);
    order: 3;
    margin-top: 0.75rem;
}

.podium-entry.current-user[b-sfcdj90tjq] {
    border: 2px solid #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

.entry-medal[b-sfcdj90tjq] {
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
}

.entry-avatar[b-sfcdj90tjq] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.entry-info[b-sfcdj90tjq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.0625rem;
}

.entry-name[b-sfcdj90tjq] {
    font-size: 0.5625rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.entry-points[b-sfcdj90tjq] {
    font-size: 0.5rem;
    color: #6b7280;
}

/* User Position Indicator */
.user-position-indicator[b-sfcdj90tjq] {
    text-align: center;
    font-size: 0.625rem;
    color: #6b7280;
    padding: 0.25rem 0;
    border-top: 1px solid #e5e7eb;
    margin-top: 0.25rem;
}

.user-position-indicator strong[b-sfcdj90tjq] {
    color: #8b5cf6;
}

/* ============================================
   DARK MODE
   ============================================ */

[data-theme="dark"] .mini-podium-expanded[b-sfcdj90tjq] {
    background: #1f2937;
    border-color: rgba(251, 191, 36, 0.2);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .podium-title[b-sfcdj90tjq] {
    color: #f3f4f6;
}

[data-theme="dark"] .collapse-btn[b-sfcdj90tjq] {
    background: #374151;
    color: #9ca3af;
}

[data-theme="dark"] .collapse-btn:hover[b-sfcdj90tjq] {
    background: #4b5563;
}

[data-theme="dark"] .podium-entry[b-sfcdj90tjq] {
    background: #374151;
}

[data-theme="dark"] .podium-entry.position-1[b-sfcdj90tjq] {
    background: linear-gradient(135deg, #78350f, #92400e);
}

[data-theme="dark"] .podium-entry.position-2[b-sfcdj90tjq] {
    background: linear-gradient(135deg, #374151, #4b5563);
}

[data-theme="dark"] .podium-entry.position-3[b-sfcdj90tjq] {
    background: linear-gradient(135deg, #7c2d12, #9a3412);
}

[data-theme="dark"] .entry-name[b-sfcdj90tjq] {
    color: #e5e7eb;
}

[data-theme="dark"] .entry-points[b-sfcdj90tjq] {
    color: #9ca3af;
}

[data-theme="dark"] .user-position-indicator[b-sfcdj90tjq] {
    color: #9ca3af;
    border-top-color: #374151;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 360px) {
    .mini-podium-expanded[b-sfcdj90tjq] {
        width: 240px;
        padding: 0.5rem;
    }
    
    .podium-entries[b-sfcdj90tjq] {
        gap: 0.25rem;
    }
    
    .entry-avatar[b-sfcdj90tjq] {
        width: 20px;
        height: 20px;
        font-size: 0.5625rem;
    }
    
    .entry-name[b-sfcdj90tjq] {
        font-size: 0.5rem;
    }
    
    .entry-points[b-sfcdj90tjq] {
        font-size: 0.4375rem;
    }
}

/* /Components/Participant/PhotoGallery.razor.rz.scp.css */
/* ==== PHOTO GALLERY ==== */

.photo-gallery[b-q5pp293eoq] {
    width: 100%;
}

/* Gallery Grid */
.gallery-grid[b-q5pp293eoq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .gallery-grid[b-q5pp293eoq] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

@media (min-width: 768px) {
    .gallery-grid[b-q5pp293eoq] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .gallery-grid[b-q5pp293eoq] {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1280px) {
    .gallery-grid[b-q5pp293eoq] {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Photo Container */
.photo-container[b-q5pp293eoq] {
    position: relative;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: box-shadow 0.2s;
    cursor: pointer;
}

.photo-container:hover[b-q5pp293eoq] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.photo-aspect[b-q5pp293eoq] {
    aspect-ratio: 1 / 1;
}

/* ============================================
   DOUBLE-TAP HEART ANIMATION (Instagram-style)
   ============================================ */

.double-tap-heart[b-q5pp293eoq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 80px;
    height: 80px;
    color: #ef4444;
    filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.4));
    z-index: 100;
    pointer-events: none;
    animation: heartPop-b-q5pp293eoq 0.8s ease-out forwards;
}

.double-tap-heart svg[b-q5pp293eoq] {
    width: 100%;
    height: 100%;
}

@keyframes heartPop-b-q5pp293eoq {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    15% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    70% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}

/* Photo container state when heart is animating */
.photo-container.heart-animating[b-q5pp293eoq] {
    transform: scale(0.98);
}

.photo-container.heart-animating .photo-aspect[b-q5pp293eoq] {
    filter: brightness(1.05);
}

/* Reaction Badge */
.reaction-badge[b-q5pp293eoq] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 9999px;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 5;
}

.reaction-gif[b-q5pp293eoq] {
    width: 1rem;
    height: 1rem;
}

.reaction-count[b-q5pp293eoq] {
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
}

/* ==== PROCESSING PLACEHOLDER - Limpio y Simple ==== */

.processing-placeholder[b-q5pp293eoq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-radius: inherit;
    overflow: hidden;
}

/* Gradiente según tipo de archivo */
.processing-placeholder.image-type[b-q5pp293eoq] {
    background: linear-gradient(145deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
}

.processing-placeholder.video-type[b-q5pp293eoq] {
    background: linear-gradient(145deg, #1f2937 0%, #374151 50%, #4b5563 100%);
}

/* Contenedor del icono con spinner integrado */
.icon-spinner-wrapper[b-q5pp293eoq] {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spinner circular alrededor del icono */
.icon-spinner-wrapper .spinner-ring[b-q5pp293eoq] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: spinnerRotate-b-q5pp293eoq 1.5s linear infinite;
}

.icon-spinner-wrapper .spinner-track[b-q5pp293eoq] {
    stroke: rgba(255, 255, 255, 0.15);
}

.icon-spinner-wrapper .spinner-progress[b-q5pp293eoq] {
    stroke-linecap: round;
    stroke-dasharray: 80, 138;
    animation: spinnerDash-b-q5pp293eoq 1.2s ease-in-out infinite;
}

/* Colores del spinner según tipo */
.image-type .icon-spinner-wrapper .spinner-progress[b-q5pp293eoq] {
    stroke: #a78bfa;
}

.video-type .icon-spinner-wrapper .spinner-progress[b-q5pp293eoq] {
    stroke: #60a5fa;
}

/* Icono centrado dentro del spinner */
.center-icon[b-q5pp293eoq] {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.center-icon svg[b-q5pp293eoq] {
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.7);
}

/* Mensajes alternados con animación */
.rotating-messages[b-q5pp293eoq] {
    position: relative;
    height: 1rem;
    overflow: hidden;
    text-align: center;
    min-width: 100px;
}

.rotating-messages .msg[b-q5pp293eoq] {
    position: absolute;
    width: 100%;
    left: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(8px);
}

/* Ciclo de 6 segundos: cada mensaje visible 2 segundos */
.rotating-messages .msg-1[b-q5pp293eoq] {
    animation: rotateMsg-b-q5pp293eoq 6s ease-in-out infinite;
}

.rotating-messages .msg-2[b-q5pp293eoq] {
    animation: rotateMsg-b-q5pp293eoq 6s ease-in-out infinite 2s;
}

.rotating-messages .msg-3[b-q5pp293eoq] {
    animation: rotateMsg-b-q5pp293eoq 6s ease-in-out infinite 4s;
}

@keyframes rotateMsg-b-q5pp293eoq {
    0%, 100% { 
        opacity: 0; 
        transform: translateY(8px); 
    }
    10%, 28% { 
        opacity: 1; 
        transform: translateY(0); 
    }
    38% { 
        opacity: 0; 
        transform: translateY(-8px); 
    }
}

@keyframes spinnerRotate-b-q5pp293eoq {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinnerDash-b-q5pp293eoq {
    0% { stroke-dasharray: 1, 138; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 80, 138; stroke-dashoffset: -30; }
    100% { stroke-dasharray: 80, 138; stroke-dashoffset: -138; }
}

@keyframes messagePulse-b-q5pp293eoq {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ==== VALIDATING OVERLAY - Elegante ==== */

.validating-overlay[b-q5pp293eoq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 58, 138, 0.85);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

.validating-content[b-q5pp293eoq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.validating-spinner-wrapper[b-q5pp293eoq] {
    position: relative;
    width: 48px;
    height: 48px;
}

.validating-ring[b-q5pp293eoq] {
    width: 100%;
    height: 100%;
    animation: spinnerRotate-b-q5pp293eoq 1.5s linear infinite;
}

.validating-track[b-q5pp293eoq] {
    stroke: rgba(255, 255, 255, 0.2);
}

.validating-progress[b-q5pp293eoq] {
    stroke: #60a5fa;
    stroke-linecap: round;
    stroke-dasharray: 80, 125;
}

.validating-icon[b-q5pp293eoq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.25rem;
    height: 1.25rem;
    color: #93c5fd;
    animation: shieldPulse-b-q5pp293eoq 1.5s ease-in-out infinite;
}

@keyframes shieldPulse-b-q5pp293eoq {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.validating-text[b-q5pp293eoq] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #bfdbfe;
    animation: textFade-b-q5pp293eoq 1.5s ease-in-out infinite;
}

@keyframes textFade-b-q5pp293eoq {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ==== LEGACY SPINNERS (mantener compatibilidad) ==== */

@keyframes spinnerRotate-b-q5pp293eoq {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Status Overlay - Legacy (para otros usos) */
.status-overlay[b-q5pp293eoq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

/* Spinners Legacy */
.processing-spinner[b-q5pp293eoq] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #fbbf24;
    border-radius: 50%;
    animation: spinnerRotate-b-q5pp293eoq 1s linear infinite;
}

.validating-spinner[b-q5pp293eoq] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spinnerRotate-b-q5pp293eoq 1s linear infinite;
}

/* Status Indicator */
.status-indicator[b-q5pp293eoq] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.status-indicator svg[b-q5pp293eoq] {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

.status-indicator:hover[b-q5pp293eoq] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.status-indicator.valid[b-q5pp293eoq] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.status-indicator.invalid[b-q5pp293eoq] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.status-indicator.processing[b-q5pp293eoq] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    animation: statusPulse-b-q5pp293eoq 2s ease-in-out infinite;
}

.status-indicator.validating[b-q5pp293eoq] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    animation: statusPulse-b-q5pp293eoq 2s ease-in-out infinite;
}

@keyframes statusPulse-b-q5pp293eoq {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Mobile Info Bar */
.mobile-info-bar[b-q5pp293eoq] {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 0.5rem;
}

@media (min-width: 640px) {
    .mobile-info-bar[b-q5pp293eoq] {
        display: none;
    }
}

.mobile-info-bar .info-content[b-q5pp293eoq] {
    flex: 1;
    min-width: 0;
}

.mobile-info-bar .participant-name[b-q5pp293eoq] {
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-info-bar .created-date[b-q5pp293eoq] {
    font-size: 0.75rem;
    color: #d1d5db;
    margin: 0;
}

.mobile-actions[b-q5pp293eoq] {
    display: flex;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.share-btn-mobile[b-q5pp293eoq], .delete-btn-mobile[b-q5pp293eoq] {
    padding: 0.375rem;
    background: rgba(31, 41, 55, 0.6);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.share-btn-mobile:hover[b-q5pp293eoq], .delete-btn-mobile:hover[b-q5pp293eoq] {
    background: rgba(31, 41, 55, 0.8);
}

.share-btn-mobile svg[b-q5pp293eoq], .delete-btn-mobile svg[b-q5pp293eoq] {
    width: 0.75rem;
    height: 0.75rem;
    color: white;
}

/* Desktop Hover Overlay */
.desktop-hover-overlay[b-q5pp293eoq] {
    display: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

@media (min-width: 640px) {
    .desktop-hover-overlay[b-q5pp293eoq] {
        display: flex;
        align-items: flex-end;
    }
    
    .photo-container:hover .desktop-hover-overlay[b-q5pp293eoq] {
        opacity: 1;
    }
}

.hover-content[b-q5pp293eoq] {
    padding: 0.75rem;
    color: white;
    width: 100%;
}

.hover-content .participant-name[b-q5pp293eoq] {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hover-content .caption[b-q5pp293eoq] {
    font-size: 0.75rem;
    opacity: 0.9;
    margin: 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hover-content .timestamp[b-q5pp293eoq] {
    font-size: 0.75rem;
    opacity: 0.75;
    margin: 0;
}

/* Desktop Action Buttons */
.desktop-actions[b-q5pp293eoq] {
    display: none;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

@media (min-width: 640px) {
    .desktop-actions[b-q5pp293eoq] {
        display: block;
    }
    
    .photo-container:hover .desktop-actions[b-q5pp293eoq] {
        opacity: 1;
    }
}

.action-buttons[b-q5pp293eoq] {
    display: flex;
    gap: 0.25rem;
}

.action-btn[b-q5pp293eoq] {
    padding: 0.375rem;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover[b-q5pp293eoq] {
    background: white;
    transform: scale(1.1);
}

.action-btn svg[b-q5pp293eoq] {
    width: 1rem;
    height: 1rem;
    color: #374151;
}

.action-btn.delete[b-q5pp293eoq] {
    background: rgba(239, 68, 68, 0.9);
}

.action-btn.delete:hover[b-q5pp293eoq] {
    background: #ef4444;
}

.action-btn.delete svg[b-q5pp293eoq] {
    color: white;
}

/* Empty State */
.empty-state[b-q5pp293eoq] {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-icon[b-q5pp293eoq] {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(236, 72, 153, 0.1));
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.empty-icon svg[b-q5pp293eoq] {
    width: 2.5rem;
    height: 2.5rem;
    color: #8b5cf6;
}

.empty-title[b-q5pp293eoq] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.5rem;
}

.empty-subtitle[b-q5pp293eoq] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* Responsive Status Indicator */
@media (max-width: 640px) {
    .status-indicator[b-q5pp293eoq] {
        width: 20px;
        height: 20px;
        top: 4px;
        right: 4px;
    }
    
    .status-indicator svg[b-q5pp293eoq] {
        width: 10px;
        height: 10px;
        stroke-width: 3;
    }
    
    .processing-spinner[b-q5pp293eoq],
    .validating-spinner[b-q5pp293eoq] {
        width: 24px;
        height: 24px;
        border-width: 2px;
    }
    
    /* Placeholder responsive */
    .processing-placeholder[b-q5pp293eoq] {
        gap: 0.5rem;
    }
    
    .icon-spinner-wrapper[b-q5pp293eoq] {
        width: 48px;
        height: 48px;
    }
    
    .center-icon[b-q5pp293eoq] {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .rotating-messages .msg[b-q5pp293eoq] {
        font-size: 0.625rem;
    }
    
    .validating-spinner-wrapper[b-q5pp293eoq] {
        width: 40px;
        height: 40px;
    }
    
    .validating-icon[b-q5pp293eoq] {
        width: 1rem;
        height: 1rem;
    }
    
    .validating-text[b-q5pp293eoq] {
        font-size: 0.6875rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .processing-placeholder[b-q5pp293eoq] {
        gap: 0.375rem;
    }
    
    .icon-spinner-wrapper[b-q5pp293eoq] {
        width: 40px;
        height: 40px;
    }
    
    .center-icon[b-q5pp293eoq] {
        width: 1rem;
        height: 1rem;
    }
    
    .rotating-messages[b-q5pp293eoq] {
        height: 0.875rem;
    }
    
    .rotating-messages .msg[b-q5pp293eoq] {
        font-size: 0.5625rem;
    }
    
    .validating-spinner-wrapper[b-q5pp293eoq] {
        width: 36px;
        height: 36px;
    }
    
    .validating-text[b-q5pp293eoq] {
        font-size: 0.625rem;
    }
}

/* /Components/Participant/PhotoViewerModal.razor.rz.scp.css */
/* ==== PHOTO VIEWER MODAL ==== */

.photo-modal-backdrop[b-bj164xg3vi] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==== HEADERS ==== */

.photo-modal-header[b-bj164xg3vi] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    z-index: 10;
}

.photo-modal-header.mobile-header[b-bj164xg3vi] {
    display: block;
    padding: 1rem;
}

.photo-modal-header.desktop-header[b-bj164xg3vi] {
    display: none;
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .photo-modal-header.mobile-header[b-bj164xg3vi] {
        display: none;
    }
    
    .photo-modal-header.desktop-header[b-bj164xg3vi] {
        display: block;
    }
}

.header-content[b-bj164xg3vi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.header-left[b-bj164xg3vi] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-title[b-bj164xg3vi] {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
}

.header-actions[b-bj164xg3vi] {
    display: flex;
    gap: 0.5rem;
}

.header-actions.desktop[b-bj164xg3vi] {
    gap: 0.5rem;
}

.header-btn[b-bj164xg3vi] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: white;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.header-btn:hover[b-bj164xg3vi] {
    background-color: rgba(255, 255, 255, 0.2);
}

.header-btn.delete:hover[b-bj164xg3vi] {
    background-color: rgba(239, 68, 68, 0.5);
}

.action-btn[b-bj164xg3vi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.875rem;
    color: white;
}

.action-btn.share[b-bj164xg3vi] {
    background-color: #3b82f6;
}

.action-btn.share:hover[b-bj164xg3vi] {
    background-color: #2563eb;
}

.action-btn.download[b-bj164xg3vi] {
    background-color: #10b981;
}

.action-btn.download:hover[b-bj164xg3vi] {
    background-color: #059669;
}

.action-btn.delete[b-bj164xg3vi] {
    background-color: #ef4444;
}

.action-btn.delete:hover[b-bj164xg3vi] {
    background-color: #dc2626;
}

/* ==== CONTENT ==== */

.photo-modal-content[b-bj164xg3vi] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-image[b-bj164xg3vi] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.video-container[b-bj164xg3vi] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.modal-video[b-bj164xg3vi] {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    border-radius: 0.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-video:focus[b-bj164xg3vi] {
    outline: 2px solid #3b82f6;
}

/* Video Loading */
.video-loading-overlay[b-bj164xg3vi] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    border-radius: 0.5rem;
}

.loading-content[b-bj164xg3vi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.loading-spinner[b-bj164xg3vi] {
    width: 3rem;
    height: 3rem;
    border: 2px solid transparent;
    border-bottom-color: white;
    border-radius: 50%;
    animation: spin-b-bj164xg3vi 1s linear infinite;
}

.loading-content p[b-bj164xg3vi] {
    color: white;
    font-size: 0.875rem;
    margin: 0;
}

/* Video Error */
.video-error-overlay[b-bj164xg3vi] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 10;
    border-radius: 0.5rem;
}

.error-content[b-bj164xg3vi] {
    text-align: center;
    color: white;
    padding: 1.5rem;
}

.error-icon[b-bj164xg3vi] {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: #f87171;
}

.error-content h3[b-bj164xg3vi] {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0 0 0.5rem;
}

.error-content p[b-bj164xg3vi] {
    font-size: 0.875rem;
    color: #d1d5db;
    margin: 0 0 1rem;
}

.retry-btn[b-bj164xg3vi] {
    background-color: #2563eb;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.retry-btn:hover[b-bj164xg3vi] {
    background-color: #1d4ed8;
}

.video-fallback[b-bj164xg3vi] {
    color: white;
    text-align: center;
    padding: 1rem;
}

.video-fallback a[b-bj164xg3vi] {
    color: #60a5fa;
}

.video-fallback a:hover[b-bj164xg3vi] {
    color: #93c5fd;
}

/* ==== REACTION SYSTEM ==== */

.reaction-container[b-bj164xg3vi] {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 20;
}

.reaction-wrapper[b-bj164xg3vi] {
    position: relative;
}

.reaction-main-btn[b-bj164xg3vi] {
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.reaction-main-btn:hover[b-bj164xg3vi] {
    background: white;
    transform: scale(1.1);
}

.reaction-gif[b-bj164xg3vi] {
    width: 2rem;
    height: 2rem;
}

.reaction-gif.active[b-bj164xg3vi] {
    animation: bounce-b-bj164xg3vi 0.5s ease;
}

.reaction-gif.inactive[b-bj164xg3vi] {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.reaction-main-btn:hover .reaction-gif.inactive[b-bj164xg3vi] {
    opacity: 1;
}

/* Reaction Picker */
.reaction-picker[b-bj164xg3vi] {
    position: absolute;
    bottom: 4rem;
    right: 0;
    background: white;
    border-radius: 9999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    display: flex;
    gap: 0.5rem;
    animation: scaleUp-b-bj164xg3vi 0.2s ease-out;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.picker-btn[b-bj164xg3vi] {
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    animation: bounceIn-b-bj164xg3vi 0.4s ease-out backwards;
    -webkit-user-select: none;
    user-select: none;
}

.picker-btn:hover[b-bj164xg3vi] {
    transform: scale(1.25);
}

.picker-btn img[b-bj164xg3vi] {
    width: 2rem;
    height: 2rem;
}

/* ==== FOOTERS ==== */

.photo-modal-footer[b-bj164xg3vi] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 1rem;
}

.photo-modal-footer.mobile-footer[b-bj164xg3vi] {
    display: block;
}

.photo-modal-footer.desktop-footer[b-bj164xg3vi] {
    display: none;
    padding: 1.5rem;
    max-width: 42rem;
}

@media (min-width: 640px) {
    .photo-modal-footer.mobile-footer[b-bj164xg3vi] {
        display: none;
    }
    
    .photo-modal-footer.desktop-footer[b-bj164xg3vi] {
        display: block;
    }
}

.footer-content[b-bj164xg3vi] {
    color: white;
}

.reaction-stats[b-bj164xg3vi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.stat-gif[b-bj164xg3vi] {
    width: 1.25rem;
    height: 1.25rem;
}

@media (min-width: 640px) {
    .stat-gif[b-bj164xg3vi] {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.stat-count[b-bj164xg3vi] {
    font-size: 0.875rem;
    opacity: 0.9;
}

.info-row[b-bj164xg3vi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.info-row h4[b-bj164xg3vi] {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
}

.caption[b-bj164xg3vi] {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 0 0 0.5rem;
}

.timestamp[b-bj164xg3vi] {
    font-size: 0.75rem;
    opacity: 0.75;
    margin: 0;
}

/* ==== ANIMATIONS ==== */

@keyframes spin-b-bj164xg3vi {
    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce-b-bj164xg3vi {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

@keyframes scaleUp-b-bj164xg3vi {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounceIn-b-bj164xg3vi {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* /Components/Participant/PointsToast.razor.rz.scp.css */
/* ============================================
   POINTS TOAST - Celebration Notification
   ============================================ */

.points-toast[b-kdxzpbwv20] {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
}

.toast-content[b-kdxzpbwv20] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    border-radius: 24px;
    box-shadow: 
        0 4px 12px rgba(251, 191, 36, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    white-space: nowrap;
}

.toast-icon[b-kdxzpbwv20] {
    font-size: 1.125rem;
    animation: sparkle-b-kdxzpbwv20 0.6s ease-in-out;
}

@keyframes sparkle-b-kdxzpbwv20 {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.3) rotate(-10deg); }
    50% { transform: scale(1.2) rotate(10deg); }
    75% { transform: scale(1.1) rotate(-5deg); }
}

.toast-text[b-kdxzpbwv20] {
    font-size: 1rem;
    font-weight: 700;
}

.toast-action[b-kdxzpbwv20] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
    padding-left: 0.25rem;
    border-left: 1px solid rgba(120, 53, 15, 0.2);
}

/* Animations */
.points-toast.fade-in[b-kdxzpbwv20] {
    animation: toastIn-b-kdxzpbwv20 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.points-toast.fade-out[b-kdxzpbwv20] {
    animation: toastOut-b-kdxzpbwv20 0.4s ease-out forwards;
}

@keyframes toastIn-b-kdxzpbwv20 {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes toastOut-b-kdxzpbwv20 {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(0.9);
    }
}

/* Pulse effect on points */
.toast-text[b-kdxzpbwv20] {
    animation: pointsPulse-b-kdxzpbwv20 0.3s ease-out;
}

@keyframes pointsPulse-b-kdxzpbwv20 {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ============================================
   DARK MODE
   ============================================ */

[data-theme="dark"] .toast-content[b-kdxzpbwv20] {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fef3c7;
}

[data-theme="dark"] .toast-action[b-kdxzpbwv20] {
    border-left-color: rgba(254, 243, 199, 0.3);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .points-toast[b-kdxzpbwv20] {
        top: 60px;
    }
    
    .toast-content[b-kdxzpbwv20] {
        padding: 0.5rem 0.875rem;
    }
    
    .toast-icon[b-kdxzpbwv20] {
        font-size: 1rem;
    }
    
    .toast-text[b-kdxzpbwv20] {
        font-size: 0.875rem;
    }
    
    .toast-action[b-kdxzpbwv20] {
        font-size: 0.6875rem;
    }
}

/* /Components/Participant/UnifiedFeed.razor.rz.scp.css */
/* ============================================
   UNIFIED FEED - Combined Photos & Messages
   ============================================ */

.unified-feed[b-spr8051e2t] {
    width: 100%;
}

/* Feed Tabs */
.feed-tabs[b-spr8051e2t] {
    display: flex;
    background: white;
    border-radius: 12px;
    padding: 0.25rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    gap: 0.25rem;
}

.feed-tab[b-spr8051e2t] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.5rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feed-tab:hover[b-spr8051e2t] {
    background: #f3f4f6;
}

.feed-tab.active[b-spr8051e2t] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.tab-icon[b-spr8051e2t] {
    font-size: 0.875rem;
}

.tab-text[b-spr8051e2t] {
    display: none;
}

@media (min-width: 360px) {
    .tab-text[b-spr8051e2t] {
        display: inline;
    }
}

.tab-count[b-spr8051e2t] {
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    font-size: 0.625rem;
    font-weight: 600;
}

.feed-tab:not(.active) .tab-count[b-spr8051e2t] {
    background: #e5e7eb;
    color: #374151;
}

.feed-tab.active .tab-count[b-spr8051e2t] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Feed Content */
.feed-content[b-spr8051e2t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Feed Item Base */
.feed-item[b-spr8051e2t] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

/* Photo Item */
.feed-photo[b-spr8051e2t] {
    cursor: pointer;
}

.feed-photo:active[b-spr8051e2t] {
    transform: scale(0.99);
}

.photo-wrapper[b-spr8051e2t] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f3f4f6;
    overflow: hidden;
}

.feed-image[b-spr8051e2t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-processing[b-spr8051e2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.75rem;
}

.processing-spinner[b-spr8051e2t] {
    width: 24px;
    height: 24px;
    border: 2px solid #e5e7eb;
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin-b-spr8051e2t 1s linear infinite;
}

@keyframes spin-b-spr8051e2t {
    to { transform: rotate(360deg); }
}

.video-thumbnail-wrapper[b-spr8051e2t] {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-play-icon[b-spr8051e2t] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.video-play-icon svg[b-spr8051e2t] {
    width: 24px;
    height: 24px;
    margin-left: 4px;
}

/* Double-tap heart */
.double-tap-heart[b-spr8051e2t] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 64px;
    height: 64px;
    color: #ef4444;
    filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.4));
    z-index: 10;
    pointer-events: none;
    animation: heartPop-b-spr8051e2t 0.8s ease-out forwards;
}

.double-tap-heart svg[b-spr8051e2t] {
    width: 100%;
    height: 100%;
}

@keyframes heartPop-b-spr8051e2t {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    15% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -50%) scale(1);
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}

.feed-photo.heart-animating .photo-wrapper[b-spr8051e2t] {
    filter: brightness(1.05);
}

/* Feed Item Footer */
.feed-item-footer[b-spr8051e2t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.footer-left[b-spr8051e2t] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.footer-right[b-spr8051e2t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.participant-name[b-spr8051e2t] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f2937;
}

.timestamp[b-spr8051e2t] {
    font-size: 0.625rem;
    color: #9ca3af;
}

.reaction-indicator[b-spr8051e2t] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: #fef2f2;
    border-radius: 12px;
    font-size: 0.6875rem;
    color: #ef4444;
}

/* Delete Button */
.delete-btn[b-spr8051e2t] {
    width: 28px;
    height: 28px;
    border: none;
    background: #fef2f2;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    transition: all 0.2s ease;
    padding: 0;
}

.delete-btn:hover[b-spr8051e2t] {
    background: #fee2e2;
    transform: scale(1.1);
}

.delete-btn:active[b-spr8051e2t] {
    transform: scale(0.95);
}

.delete-btn svg[b-spr8051e2t] {
    width: 14px;
    height: 14px;
}

/* Delete button for messages (inline) */
.delete-btn-message[b-spr8051e2t] {
    width: 22px;
    height: 22px;
    margin-left: auto;
}

.delete-btn-message svg[b-spr8051e2t] {
    width: 12px;
    height: 12px;
}

/* Message Item */
.feed-message[b-spr8051e2t] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
}

.message-avatar[b-spr8051e2t] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.message-content[b-spr8051e2t] {
    flex: 1;
    min-width: 0;
}

.message-header[b-spr8051e2t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.message-text[b-spr8051e2t] {
    font-size: 0.8125rem;
    color: #374151;
    line-height: 1.5;
    margin: 0;
    word-wrap: break-word;
}

/* Empty State */
.empty-feed[b-spr8051e2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-spr8051e2t] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.empty-text[b-spr8051e2t] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* ============================================
   DARK MODE
   ============================================ */

[data-theme="dark"] .feed-tabs[b-spr8051e2t] {
    background: #1f2937;
}

[data-theme="dark"] .feed-tab[b-spr8051e2t] {
    color: #9ca3af;
}

[data-theme="dark"] .feed-tab:hover[b-spr8051e2t] {
    background: #374151;
}

[data-theme="dark"] .feed-tab:not(.active) .tab-count[b-spr8051e2t] {
    background: #374151;
    color: #e5e7eb;
}

[data-theme="dark"] .feed-item[b-spr8051e2t] {
    background: #1f2937;
}

[data-theme="dark"] .photo-wrapper[b-spr8051e2t] {
    background: #374151;
}

[data-theme="dark"] .photo-processing[b-spr8051e2t] {
    color: #9ca3af;
}

[data-theme="dark"] .feed-item-footer[b-spr8051e2t] {
    border-top-color: #374151;
}

[data-theme="dark"] .participant-name[b-spr8051e2t] {
    color: #f3f4f6;
}

[data-theme="dark"] .timestamp[b-spr8051e2t] {
    color: #6b7280;
}

[data-theme="dark"] .message-text[b-spr8051e2t] {
    color: #e5e7eb;
}

[data-theme="dark"] .empty-text[b-spr8051e2t] {
    color: #9ca3af;
}

[data-theme="dark"] .delete-btn[b-spr8051e2t] {
    background: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .delete-btn:hover[b-spr8051e2t] {
    background: #991b1b;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (min-width: 640px) {
    .feed-content[b-spr8051e2t] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .feed-message[b-spr8051e2t] {
        grid-column: span 2;
    }
}

@media (min-width: 768px) {
    .feed-content[b-spr8051e2t] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .feed-message[b-spr8051e2t] {
        grid-column: span 3;
    }
}

/* /Components/Participant/UploadPreviewCard.razor.rz.scp.css */
/* ==== UPLOAD PREVIEW CARD ==== */

.upload-preview-card[b-eemq3ttc8p] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

/* ==== HEADER ==== */

.preview-header[b-eemq3ttc8p] {
    background: linear-gradient(to right, #ec4899, #8b5cf6);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left[b-eemq3ttc8p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-icon[b-eemq3ttc8p] {
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-icon svg[b-eemq3ttc8p] {
    width: 0.75rem;
    height: 0.75rem;
    color: white;
}

.header-title[b-eemq3ttc8p] {
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0;
}

.close-btn[b-eemq3ttc8p] {
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: none;
    padding: 0.25rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s;
}

.close-btn:hover[b-eemq3ttc8p] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* ==== CONTENT ==== */

.preview-content[b-eemq3ttc8p] {
    padding: 0.75rem;
}

.preview-layout[b-eemq3ttc8p] {
    display: flex;
    gap: 0.75rem;
}

/* Thumbnail */
.thumbnail-container[b-eemq3ttc8p] {
    flex-shrink: 0;
    position: relative;
}

.thumbnail[b-eemq3ttc8p] {
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
    .thumbnail[b-eemq3ttc8p] {
        width: 4.5rem;
        height: 4.5rem;
    }
}

.thumbnail img[b-eemq3ttc8p],
.thumbnail video[b-eemq3ttc8p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumbnail[b-eemq3ttc8p] {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-thumbnail video[b-eemq3ttc8p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay[b-eemq3ttc8p] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.video-overlay svg[b-eemq3ttc8p] {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.remove-btn[b-eemq3ttc8p] {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s;
}

.remove-btn:hover[b-eemq3ttc8p] {
    background: #dc2626;
}

.remove-btn svg[b-eemq3ttc8p] {
    width: 0.625rem;
    height: 0.625rem;
}

/* File Info */
.file-info[b-eemq3ttc8p] {
    flex: 1;
    min-width: 0;
}

.file-meta[b-eemq3ttc8p] {
    margin-bottom: 0.5rem;
}

.file-name[b-eemq3ttc8p] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size[b-eemq3ttc8p] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* Caption Input */
.caption-input-container[b-eemq3ttc8p] {
    width: 100%;
}

.caption-label[b-eemq3ttc8p] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
    display: block;
}

.caption-wrapper[b-eemq3ttc8p] {
    position: relative;
}

.caption-textarea[b-eemq3ttc8p] {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    resize: none;
    transition: all 0.2s;
}

.caption-textarea:focus[b-eemq3ttc8p] {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 1px #ec4899;
}

.caption-textarea[b-eemq3ttc8p]::placeholder {
    color: #9ca3af;
}

.caption-counter[b-eemq3ttc8p] {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    font-size: 0.625rem;
    color: #9ca3af;
    background: white;
    padding: 0 0.25rem;
    border-radius: 0.125rem;
}

/* ==== NAVIGATION ==== */

.navigation-controls[b-eemq3ttc8p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
}

.nav-buttons[b-eemq3ttc8p] {
    display: flex;
    gap: 0.25rem;
}

.nav-btn[b-eemq3ttc8p] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: #f3f4f6;
    color: #374151;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.nav-btn:hover:not(:disabled)[b-eemq3ttc8p] {
    background: #e5e7eb;
}

.nav-btn:disabled[b-eemq3ttc8p] {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-btn svg[b-eemq3ttc8p] {
    width: 0.75rem;
    height: 0.75rem;
}

.nav-text[b-eemq3ttc8p] {
    display: none;
}

@media (min-width: 640px) {
    .nav-text[b-eemq3ttc8p] {
        display: inline;
        font-size: 0.75rem;
    }
}

/* Dots */
.dots-indicator[b-eemq3ttc8p] {
    display: flex;
    gap: 0.25rem;
}

.dot[b-eemq3ttc8p] {
    width: 0.375rem;
    height: 0.375rem;
    background: #d1d5db;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s;
}

.dot:hover[b-eemq3ttc8p] {
    background: #9ca3af;
}

.dot.active[b-eemq3ttc8p] {
    width: 1rem;
    background: linear-gradient(to right, #ec4899, #8b5cf6);
}

/* ==== ACTIONS ==== */

.preview-actions[b-eemq3ttc8p] {
    padding: 0 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.add-more-container[b-eemq3ttc8p] {
    display: flex;
    justify-content: center;
}

.add-more-btn[b-eemq3ttc8p] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: #f9fafb;
    color: #374151;
    border: 1px dashed #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.add-more-btn:hover[b-eemq3ttc8p] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.add-more-btn svg[b-eemq3ttc8p] {
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.375rem;
}

.hidden[b-eemq3ttc8p] {
    display: none;
}

/* Main Buttons */
.main-buttons[b-eemq3ttc8p] {
    display: flex;
    gap: 0.5rem;
}

.cancel-btn[b-eemq3ttc8p] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    background: #f3f4f6;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cancel-btn:hover[b-eemq3ttc8p] {
    background: #e5e7eb;
}

.upload-btn[b-eemq3ttc8p] {
    flex: 1;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(to right, #ec4899, #8b5cf6);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.upload-btn:hover:not(:disabled)[b-eemq3ttc8p] {
    background: linear-gradient(to right, #db2777, #7c3aed);
    transform: scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.upload-btn:active:not(:disabled)[b-eemq3ttc8p] {
    transform: scale(0.98);
}

.upload-btn:disabled[b-eemq3ttc8p] {
    opacity: 0.5;
    cursor: not-allowed;
}

.upload-btn.pulse:not(:disabled)[b-eemq3ttc8p] {
    animation: buttonPulse-b-eemq3ttc8p 2s ease-in-out infinite;
}

.uploading-content[b-eemq3ttc8p],
.upload-content[b-eemq3ttc8p] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.uploading-content svg[b-eemq3ttc8p],
.upload-content svg[b-eemq3ttc8p] {
    width: 1rem;
    height: 1rem;
}

/* ==== ANIMATIONS ==== */

@keyframes buttonPulse-b-eemq3ttc8p {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

.animate-spin[b-eemq3ttc8p] {
    animation: spin-b-eemq3ttc8p 1s linear infinite;
}

@keyframes spin-b-eemq3ttc8p {
    to {
        transform: rotate(360deg);
    }
}

/* /Components/Participant/UploadQueueIndicator.razor.rz.scp.css */
/* ==== UPLOAD QUEUE INDICATOR ==== */

/* Global Upload Indicator */
.global-upload-indicator[b-gutfr4smpc] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    animation: slideInFromTop-b-gutfr4smpc 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
}

.global-upload-indicator:hover[b-gutfr4smpc] {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.global-upload-indicator.minimized[b-gutfr4smpc] {
    padding: 0.5rem;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-upload-content[b-gutfr4smpc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.global-upload-text[b-gutfr4smpc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.global-upload-subtext[b-gutfr4smpc] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* Upload Queue Container */
.upload-queue-container[b-gutfr4smpc] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1000;
    max-width: 320px;
    width: 100%;
    pointer-events: none;
}

.upload-queue-item[b-gutfr4smpc] {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 
                0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    pointer-events: auto;
    animation: slideInFromRight-b-gutfr4smpc 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.3s ease;
}

.upload-queue-item:hover[b-gutfr4smpc] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 
                0 4px 12px rgba(0, 0, 0, 0.1);
}

.upload-queue-item.completed[b-gutfr4smpc] {
    animation: slideOutToRight-b-gutfr4smpc 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.upload-queue-item.error[b-gutfr4smpc] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(254, 242, 242, 0.98);
}

/* Upload Item Content */
.upload-item-content[b-gutfr4smpc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.upload-item-thumbnail[b-gutfr4smpc] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: #f3f4f6;
}

.upload-item-thumbnail img[b-gutfr4smpc],
.upload-item-thumbnail video[b-gutfr4smpc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-item-thumbnail .video-overlay[b-gutfr4smpc] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.upload-item-thumbnail .video-overlay svg[b-gutfr4smpc] {
    width: 1rem;
    height: 1rem;
    color: white;
}

.compression-badge[b-gutfr4smpc] {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #3b82f6;
    color: white;
    padding: 0.125rem;
    border-radius: 0.25rem 0 0 0;
}

.compression-badge svg[b-gutfr4smpc] {
    width: 0.5rem;
    height: 0.5rem;
}

.upload-item-info[b-gutfr4smpc] {
    flex: 1;
    min-width: 0;
}

.upload-item-name[b-gutfr4smpc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-item-status[b-gutfr4smpc] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

.error-message[b-gutfr4smpc] {
    color: #dc2626;
}

.upload-item-actions[b-gutfr4smpc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Progress Bar Styles */
.upload-progress-container[b-gutfr4smpc] {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(229, 231, 235, 0.8);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.upload-progress-bar[b-gutfr4smpc] {
    height: 100%;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    border-radius: 2px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.upload-progress-bar[b-gutfr4smpc]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: progressShimmer-b-gutfr4smpc 1.5s ease-in-out infinite;
}

/* Circular Progress */
.upload-circular-progress[b-gutfr4smpc] {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.upload-circular-progress.small[b-gutfr4smpc] {
    width: 28px;
    height: 28px;
}

.upload-circular-progress svg[b-gutfr4smpc] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.upload-circular-progress .progress-bg[b-gutfr4smpc] {
    fill: none;
    stroke: rgba(229, 231, 235, 0.8);
    stroke-width: 3;
}

.upload-circular-progress .progress-fill[b-gutfr4smpc] {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s ease;
}

.upload-circular-progress .progress-text[b-gutfr4smpc] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.625rem;
    font-weight: 600;
    color: #6b7280;
}

.upload-circular-progress.small .progress-text[b-gutfr4smpc] {
    font-size: 0.5rem;
}

/* Action Icons */
.action-icon[b-gutfr4smpc] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-icon svg[b-gutfr4smpc] {
    width: 0.75rem;
    height: 0.75rem;
}

.action-icon.uploading[b-gutfr4smpc] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    animation: pulse-b-gutfr4smpc 2s ease-in-out infinite;
}

.action-icon.completed[b-gutfr4smpc] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.action-icon.error[b-gutfr4smpc] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    cursor: pointer;
    border: none;
}

.action-icon.processing[b-gutfr4smpc] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    animation: pulse-b-gutfr4smpc 2s ease-in-out infinite;
}

.upload-status-icon[b-gutfr4smpc] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.upload-status-icon.uploading[b-gutfr4smpc] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    animation: pulse-b-gutfr4smpc 2s ease-in-out infinite;
}

.upload-status-icon svg[b-gutfr4smpc] {
    width: 0.75rem;
    height: 0.75rem;
}

.remove-btn[b-gutfr4smpc] {
    width: 1.25rem;
    height: 1.25rem;
    background: #d1d5db;
    color: #4b5563;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-btn:hover[b-gutfr4smpc] {
    background: #ef4444;
    color: white;
}

.remove-btn svg[b-gutfr4smpc] {
    width: 0.625rem;
    height: 0.625rem;
}

/* Compression Indicator */
.compression-indicator[b-gutfr4smpc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.compression-indicator .compression-icon[b-gutfr4smpc] {
    width: 12px;
    height: 12px;
    animation: spin-b-gutfr4smpc 1s linear infinite;
}

/* Animations */
@keyframes slideInFromRight-b-gutfr4smpc {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutToRight-b-gutfr4smpc {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes slideInFromTop-b-gutfr4smpc {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes progressShimmer-b-gutfr4smpc {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes pulse-b-gutfr4smpc {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes spin-b-gutfr4smpc {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .upload-queue-container[b-gutfr4smpc] {
        bottom: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
    }
    
    .upload-queue-item[b-gutfr4smpc] {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        border-radius: 12px;
    }
    
    .upload-item-thumbnail[b-gutfr4smpc] {
        width: 40px;
        height: 40px;
    }
    
    .upload-item-name[b-gutfr4smpc] {
        font-size: 0.8125rem;
    }
    
    .upload-item-status[b-gutfr4smpc] {
        font-size: 0.6875rem;
    }
    
    .global-upload-indicator[b-gutfr4smpc] {
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.5rem 0.75rem;
    }
    
    .global-upload-text[b-gutfr4smpc] {
        font-size: 0.8125rem;
    }
    
    .global-upload-subtext[b-gutfr4smpc] {
        font-size: 0.6875rem;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .upload-queue-item[b-gutfr4smpc],
    .global-upload-indicator[b-gutfr4smpc] {
        animation: none;
    }
    
    .upload-progress-bar[b-gutfr4smpc]::after,
    .action-icon.uploading[b-gutfr4smpc],
    .action-icon.processing[b-gutfr4smpc],
    .upload-status-icon.uploading[b-gutfr4smpc],
    .compression-indicator .compression-icon[b-gutfr4smpc] {
        animation: none;
    }
}

/* Utility class */
.mt-1[b-gutfr4smpc] {
    margin-top: 0.25rem;
}

/* /Components/Participant/WelcomeModal.razor.rz.scp.css */
/* ============================================
   WELCOME MODAL - Componente Aislado
   Optimizado para iOS/Mobile touch events
   ============================================ */

/* Overlay - Capa superior absoluta */
.welcome-overlay[b-oxvn3u9zhn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    
    /* Z-index extremadamente alto para estar por encima de todo */
    z-index: 999999;
    
    /* Optimizaciones iOS */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    
    /* Animación de entrada */
    animation: overlayFadeIn-b-oxvn3u9zhn 0.25s ease-out forwards;
}

@keyframes overlayFadeIn-b-oxvn3u9zhn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.welcome-modal[b-oxvn3u9zhn] {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    
    /* Asegurar que esté por encima del overlay */
    z-index: 1000000;
    
    /* Optimizaciones para renderizado */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform, opacity;
    
    /* Animación de entrada */
    animation: modalScaleIn-b-oxvn3u9zhn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalScaleIn-b-oxvn3u9zhn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header */
.welcome-header[b-oxvn3u9zhn] {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f97316 100%);
    padding: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Emojis decorativos */
.welcome-emoji[b-oxvn3u9zhn] {
    position: absolute;
    opacity: 0.8;
    animation: bounce-b-oxvn3u9zhn 2s infinite;
    pointer-events: none;
    user-select: none;
}

.emoji-1[b-oxvn3u9zhn] {
    top: 0.5rem;
    left: 1rem;
    font-size: 1.5rem;
    animation-delay: 0.1s;
}

.emoji-2[b-oxvn3u9zhn] {
    top: 1rem;
    right: 1.5rem;
    font-size: 1.25rem;
    animation-delay: 0.3s;
}

.emoji-3[b-oxvn3u9zhn] {
    bottom: 0.5rem;
    left: 2rem;
    font-size: 1.125rem;
    animation-delay: 0.5s;
}

.emoji-4[b-oxvn3u9zhn] {
    bottom: 0.75rem;
    right: 1rem;
    font-size: 1.25rem;
    animation-delay: 0.2s;
}

@keyframes bounce-b-oxvn3u9zhn {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* Icono principal */
.welcome-icon-container[b-oxvn3u9zhn] {
    position: relative;
    z-index: 1;
}

.welcome-icon[b-oxvn3u9zhn] {
    width: 5rem;
    height: 5rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.welcome-icon span[b-oxvn3u9zhn] {
    font-size: 2.5rem;
}

.welcome-title[b-oxvn3u9zhn] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Body */
.welcome-body[b-oxvn3u9zhn] {
    padding: 1.5rem;
    text-align: center;
}

.welcome-intro[b-oxvn3u9zhn] {
    color: #374151;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

/* Reminder box */
.welcome-reminder[b-oxvn3u9zhn] {
    background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%);
    border: 1px solid #fcd34d;
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
}

.reminder-icon[b-oxvn3u9zhn] {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.reminder-text[b-oxvn3u9zhn] {
    font-size: 0.875rem;
    color: #92400e;
    line-height: 1.5;
    margin: 0;
}

.reminder-text strong[b-oxvn3u9zhn] {
    font-weight: 600;
}

/* Tips */
.welcome-tips[b-oxvn3u9zhn] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.tip-item[b-oxvn3u9zhn] {
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ============================================
   BOTÓN - Optimizado para iOS touch
   ============================================ */
.welcome-btn[b-oxvn3u9zhn] {
    /* Reset completo */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: none;
    
    /* Estilos */
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 16px;
    cursor: pointer;
    
    /* Flexbox para contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    
    /* Sombra */
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
    
    /* CRÍTICO: Optimizaciones iOS touch */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(139, 92, 246, 0.3);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* Asegurar que sea clickeable */
    position: relative;
    z-index: 10;
    
    /* Tamaño mínimo de toque (Apple recomienda 44px) */
    min-height: 52px;
    
    /* Transiciones */
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.welcome-btn:hover[b-oxvn3u9zhn] {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
}

.welcome-btn:active[b-oxvn3u9zhn] {
    transform: scale(0.97);
    opacity: 0.95;
}

.welcome-btn:focus[b-oxvn3u9zhn] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.4), 0 4px 14px rgba(139, 92, 246, 0.4);
}

.welcome-btn:disabled[b-oxvn3u9zhn] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-emoji[b-oxvn3u9zhn] {
    font-size: 1.125rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 400px) {
    .welcome-modal[b-oxvn3u9zhn] {
        margin: 0 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .welcome-header[b-oxvn3u9zhn] {
        padding: 1.25rem;
    }
    
    .welcome-icon[b-oxvn3u9zhn] {
        width: 4rem;
        height: 4rem;
    }
    
    .welcome-icon span[b-oxvn3u9zhn] {
        font-size: 2rem;
    }
    
    .welcome-title[b-oxvn3u9zhn] {
        font-size: 1.25rem;
    }
    
    .welcome-body[b-oxvn3u9zhn] {
        padding: 1.25rem;
    }
    
    .welcome-tips[b-oxvn3u9zhn] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Safe area for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .welcome-overlay[b-oxvn3u9zhn] {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .welcome-overlay[b-oxvn3u9zhn],
    .welcome-modal[b-oxvn3u9zhn],
    .welcome-emoji[b-oxvn3u9zhn] {
        animation: none;
    }
    
    .welcome-btn[b-oxvn3u9zhn] {
        transition: none;
    }
}

/* /Pages/DisplayScreen.razor.rz.scp.css */

/* Estilos específicos para orientación vertical */
.slideshow-bg[b-hprwqamehs] {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.55; /* un poco más de opacidad para distinguir mejor */
    z-index: -1; /* debajo del contenido */
    filter: blur(16px) brightness(0.55) saturate(0.9); /* blur + oscurecer ligeramente */
    transition: background-image 0.4s ease, opacity 0.4s ease, transform 0.6s ease;
    will-change: background-image, opacity, transform;
}

.portrait .slideshow-bg[b-hprwqamehs],
.landscape .slideshow-bg[b-hprwqamehs] {
    transform: scale(1.02); /* evita bordes negros en algunas proporciones */
}

.portrait .slideshow-item[b-hprwqamehs] {
    flex-direction: column;
    padding: 2rem 1rem;
}

.portrait .slideshow-item img[b-hprwqamehs],
.portrait .slideshow-item video[b-hprwqamehs] {
    max-width: 90vw;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Ajustes para overlays en modo vertical */
.portrait .absolute.top-8.left-8[b-hprwqamehs] {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
}

.portrait .absolute.top-8.right-8[b-hprwqamehs] {
    top: 1rem;
    right: 1rem;
    left: auto;
}

.portrait .absolute.bottom-8.left-8[b-hprwqamehs] {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
}

.portrait .absolute.bottom-8.right-8[b-hprwqamehs] {
    bottom: 1rem;
    right: 1rem;
    left: auto;
}

/* Ajustes para el mosaico en modo vertical */
.portrait .mosaic-container[b-hprwqamehs] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem;
    padding: 1rem;
}

/* Ajustes para la barra de progreso en modo vertical */
.portrait .progress-container[b-hprwqamehs] {
    width: 280px;
    margin: 0 auto;
}

/* Ajustes para QR code en modo vertical */
.portrait .qr-container[b-hprwqamehs] {
    transform: scale(0.8);
}

/* Estilos específicos para slideshow en modo vertical */
.portrait-slideshow[b-hprwqamehs] {
    flex-direction: column;
    padding: 1rem;
}

.portrait-item[b-hprwqamehs] {
    max-width: 95vw;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.portrait-media[b-hprwqamehs] {
    max-width: 90vw !important;
    max-height: 70vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.landscape-slideshow[b-hprwqamehs] {
    flex-direction: row;
}

.landscape-item[b-hprwqamehs] {
    width: 100%;
    height: 100%;
}

.landscape-media[b-hprwqamehs] {
    max-width: 100%;
    max-height: 100%;
}

/* Estilos para overlays en modo vertical */
.portrait-overlays[b-hprwqamehs] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

.portrait-overlays > *[b-hprwqamehs] {
    position: absolute;
    pointer-events: auto;
}

/* Ajustes específicos para componentes overlay en modo vertical */
.portrait-overlays .absolute.bottom-8.left-8[b-hprwqamehs] {
    bottom: 1rem !important;
    left: 1rem !important;
}

.portrait-overlays .absolute.bottom-8.right-8[b-hprwqamehs] {
    bottom: 1rem !important;
    right: 1rem !important;
}

.portrait-overlays .absolute.top-8.left-8[b-hprwqamehs] {
    top: 1rem !important;
    left: 1rem !important;
}

.portrait-overlays .absolute.top-8.right-8[b-hprwqamehs] {
    top: 1rem !important;
    right: 1rem !important;
}

/* Ajustes específicos para la barra de progreso en vertical */
.portrait-progress .progress-container[b-hprwqamehs] {
    width: 250px;
    margin: 0 auto;
}

.portrait-progress .progress-text[b-hprwqamehs] {
    font-size: 12px;
    margin-top: 8px;
}

.landscape-progress .progress-container[b-hprwqamehs] {
    width: 320px;
}

/* Estilos para overlays en modo horizontal */
.landscape-overlays[b-hprwqamehs] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

.landscape-overlays > *[b-hprwqamehs] {
    position: absolute;
    pointer-events: auto;
}

/* Ajustes específicos para componentes overlay en modo horizontal */
.landscape-overlays .absolute.bottom-8.left-8[b-hprwqamehs] {
    bottom: 2rem !important;
    left: 2rem !important;
}

.landscape-overlays .absolute.bottom-8.right-8[b-hprwqamehs] {
    bottom: 2rem !important;
    right: 2rem !important;
}

.landscape-overlays .absolute.top-8.left-8[b-hprwqamehs] {
    top: 2rem !important;
    left: 2rem !important;
}

.landscape-overlays .absolute.top-8.right-8[b-hprwqamehs] {
    top: 2rem !important;
    right: 2rem !important;
}

/* Espaciado reducido para modo vertical */
.portrait-overlays .absolute[b-hprwqamehs] {
    padding: 0.5rem;
}

.landscape-overlays .absolute[b-hprwqamehs] {
    padding: 1rem;
}

/* Estilos específicos para mosaico en modo vertical */
.portrait-mosaic[b-hprwqamehs] {
    padding: 1rem !important;
}

.portrait-grid[b-hprwqamehs] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
}

.landscape-mosaic[b-hprwqamehs] {
    padding: 2rem;
}

.landscape-grid[b-hprwqamehs] {
    gap: 1rem;
}

/* Ajustes para items del mosaico en vertical */
.portrait-grid .mosaic-item[b-hprwqamehs] {
    aspect-ratio: 1;
    min-height: 150px;
}

.portrait-grid .mosaic-caption[b-hprwqamehs] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.portrait-grid .caption-text[b-hprwqamehs] {
    font-size: 0.7rem;
    line-height: 1.2;
}

.portrait-grid .caption-author[b-hprwqamehs] {
    font-size: 0.65rem;
}

.gradient-text-display[b-hprwqamehs] {
    background: linear-gradient(45deg, #e91e63, #9c27b0, #2196f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift-b-hprwqamehs 3s ease-in-out infinite;
}

@keyframes gradient-shift-b-hprwqamehs {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Modern Glass Cards */

/* Progress Bar Styles */
.progress-container[b-hprwqamehs] {
    width: 320px;
    position: relative;
}

.progress-bar-bg[b-hprwqamehs] {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.progress-bar-fill[b-hprwqamehs] {
    height: 100%;
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6);
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
    position: relative;
}

.progress-bar-fill[b-hprwqamehs]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer-b-hprwqamehs 2s infinite;
}

@keyframes shimmer-b-hprwqamehs {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-dots[b-hprwqamehs] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

.progress-dot[b-hprwqamehs] {
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}

.progress-dot.active[b-hprwqamehs] {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-color: white;
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.6);
    animation: pulse-dot 1.5s infinite;
}

.progress-text[b-hprwqamehs] {
    text-align: center;
    margin-top: 12px;
    font-size: 14px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}



/* Pulse Slow Animation */
@keyframes pulse-slow-b-hprwqamehs {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.animate-pulse-slow[b-hprwqamehs] {
    animation: pulse-slow-b-hprwqamehs 3s ease-in-out infinite;
}



.slideshow-item[b-hprwqamehs] {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: opacity;
}

/* Transiciones básicas */
.fade-in[b-hprwqamehs] {
    opacity: 1;
    transition: all 0.8s ease-in-out;
}

.fade-out[b-hprwqamehs] {
    opacity: 0;
    transition: all 0.8s ease-in-out;
}

/* Efectos de transición aleatorios */
.transition-fade[b-hprwqamehs] {
    transition: opacity 0.8s ease-in-out;
}

.transition-fade.entering[b-hprwqamehs] {
    opacity: 1;
}

.transition-fade.exiting[b-hprwqamehs] {
    opacity: 0;
}

/* Transiciones de slide removidas - ya no se usan */

.transition-slide-up[b-hprwqamehs] {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out;
}

.transition-slide-up.entering[b-hprwqamehs] {
    transform: translateY(0);
    opacity: 1;
}

.transition-slide-up.exiting[b-hprwqamehs] {
    transform: translateY(-100%);
    opacity: 0;
}

.transition-slide-down[b-hprwqamehs] {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out;
}

.transition-slide-down.entering[b-hprwqamehs] {
    transform: translateY(0);
    opacity: 1;
}

.transition-slide-down.exiting[b-hprwqamehs] {
    transform: translateY(100%);
    opacity: 0;
}

.transition-zoom-in[b-hprwqamehs] {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out;
}

.transition-zoom-in.entering[b-hprwqamehs] {
    transform: scale(1);
    opacity: 1;
}

.transition-zoom-in.exiting[b-hprwqamehs] {
    transform: scale(0.8);
    opacity: 0;
}

.transition-zoom-out[b-hprwqamehs] {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out;
}

.transition-zoom-out.entering[b-hprwqamehs] {
    transform: scale(1);
    opacity: 1;
}

.transition-zoom-out.exiting[b-hprwqamehs] {
    transform: scale(1.2);
    opacity: 0;
}

.transition-rotate[b-hprwqamehs] {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out;
}

.transition-rotate.entering[b-hprwqamehs] {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}

.transition-rotate.exiting[b-hprwqamehs] {
    transform: rotate(15deg) scale(0.9);
    opacity: 0;
}

.transition-flip[b-hprwqamehs] {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out;
    transform-style: preserve-3d;
}

.transition-flip.entering[b-hprwqamehs] {
    transform: rotateY(0deg);
    opacity: 1;
}

.transition-flip.exiting[b-hprwqamehs] {
    transform: rotateY(90deg);
    opacity: 0;
}

.transition-blur[b-hprwqamehs] {
    transition: filter 0.8s ease-in-out, opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.transition-blur.entering[b-hprwqamehs] {
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
}

.transition-blur.exiting[b-hprwqamehs] {
    filter: blur(10px);
    transform: scale(1.05);
    opacity: 0;
}

.transition-elastic[b-hprwqamehs] {
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s ease-in-out;
}

.transition-elastic.entering[b-hprwqamehs] {
    transform: scale(1);
    opacity: 1;
}

.transition-elastic.exiting[b-hprwqamehs] {
    transform: scale(0.3);
    opacity: 0;
}

/* Reaction Animations Styles */
.reaction-animations-container[b-hprwqamehs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}

.reaction-animation[b-hprwqamehs] {
    position: absolute;
    pointer-events: none;
    z-index: 16;
    /* No default animation - will be set by specific classes */
}

.reaction-emoji[b-hprwqamehs] {
    width: 3rem;
    height: 3rem;
    display: block;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    animation: reactionPulse-b-hprwqamehs 0.5s ease-out, reactionSpin-b-hprwqamehs 3s linear infinite;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    object-fit: contain;
}

@keyframes reactionFloat-b-hprwqamehs {
    0% {
        transform: translateY(0) scale(0.5) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-20px) scale(1.2) rotate(36deg);
        opacity: 1;
    }
    20% {
        transform: translateY(-40px) scale(1) rotate(72deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) scale(0.8) rotate(360deg);
        opacity: 0;
    }
}

@keyframes reactionPulse-b-hprwqamehs {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes reactionSpin-b-hprwqamehs {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Variaciones de animación para diferentes tipos de reacciones */
.reaction-animation:nth-child(2n) .reaction-emoji[b-hprwqamehs] {
    animation: reactionPulse-b-hprwqamehs 0.5s ease-out, reactionBounce-b-hprwqamehs 2s ease-in-out infinite;
}

.reaction-animation:nth-child(3n) .reaction-emoji[b-hprwqamehs] {
    animation: reactionPulse-b-hprwqamehs 0.5s ease-out, reactionWobble-b-hprwqamehs 2.5s ease-in-out infinite;
}

@keyframes reactionBounce-b-hprwqamehs {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    40% {
        transform: translateY(-20px) rotate(10deg);
    }
    60% {
        transform: translateY(-10px) rotate(-5deg);
    }
}

@keyframes reactionWobble-b-hprwqamehs {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(-15deg);
    }
    30% {
        transform: rotate(10deg);
    }
    45% {
        transform: rotate(-5deg);
    }
    60% {
        transform: rotate(3deg);
    }
    75% {
        transform: rotate(-1deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Efectos especiales para reacciones de corazón */
.reaction-animation[data-type="heart"] .reaction-emoji[b-hprwqamehs] {
    color: #ff69b4;
    animation: reactionPulse-b-hprwqamehs 0.5s ease-out, reactionHeartbeat-b-hprwqamehs 1.5s ease-in-out infinite;
}

@keyframes reactionHeartbeat-b-hprwqamehs {
    0%, 50%, 100% {
        transform: scale(1);
    }
    25%, 75% {
        transform: scale(1.1);
    }
}

/* Efectos especiales para reacciones de fuego */
.reaction-animation[data-type="fire"] .reaction-emoji[b-hprwqamehs] {
    animation: reactionPulse-b-hprwqamehs 0.5s ease-out, reactionFlicker-b-hprwqamehs 0.6s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.8));
}

@keyframes reactionFlicker-b-hprwqamehs {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.05) rotate(-2deg);
        filter: brightness(1.2);
    }
    50% {
        transform: scale(0.95) rotate(1deg);
        filter: brightness(0.9);
    }
    75% {
        transform: scale(1.02) rotate(-1deg);
        filter: brightness(1.1);
    }
}

/* Efectos especiales para reacciones de risa */
.reaction-animation[data-type="laugh"] .reaction-emoji[b-hprwqamehs] {
    animation: reactionPulse-b-hprwqamehs 0.5s ease-out, reactionShake-b-hprwqamehs 0.8s ease-in-out infinite;
}

@keyframes reactionShake-b-hprwqamehs {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px) rotate(-2deg);
    }
    75% {
        transform: translateX(5px) rotate(2deg);
    }
}

/* Efectos especiales para reacciones de mente explotada */
.reaction-animation[data-type="mindblown"] .reaction-emoji[b-hprwqamehs] {
    animation: reactionPulse-b-hprwqamehs 0.5s ease-out, reactionExplode-b-hprwqamehs 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.6));
}

@keyframes reactionExplode-b-hprwqamehs {
    0%, 80%, 100% {
        transform: scale(1) rotate(0deg);
    }
    10% {
        transform: scale(1.3) rotate(5deg);
    }
    20% {
        transform: scale(0.8) rotate(-3deg);
    }
    30% {
        transform: scale(1.2) rotate(2deg);
    }
    40% {
        transform: scale(0.9) rotate(-1deg);
    }
}

/* Animaciones obsoletas removidas para evitar conflictos */

/* Keyframes de lluvia removidos - ya no se usan */

/* Animaciones estilo YouTube Live - Simple y suave */
.youtube-reaction[b-hprwqamehs] {
    animation: youtubeReactionFloat-b-hprwqamehs 4s ease-out forwards;
    position: absolute;
}

.youtube-reaction-left[b-hprwqamehs] {
    animation: youtubeReactionFloatLeft-b-hprwqamehs 4s ease-out forwards;
    position: absolute;
}

.youtube-reaction-right[b-hprwqamehs] {
    animation: youtubeReactionFloatRight-b-hprwqamehs 4s ease-out forwards;
    position: absolute;
}

/* Contenedor de reacción con nombre */
.reaction-with-name[b-hprwqamehs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

/* Burbuja de nombre estilo YouTube Live */
.reaction-name-bubble[b-hprwqamehs] {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: bubbleFadeIn-b-hprwqamehs 0.3s ease-out;
}

/* Animación de aparición de la burbuja */
@keyframes bubbleFadeIn-b-hprwqamehs {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Emoji de reacción mejorado - Tamaño aumentado sin fondo */
.reaction-emoji-enhanced[b-hprwqamehs] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* background removido para eliminar fondo blanco */
    padding: 0;
    /* box-shadow removido para eliminar sombra del fondo */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    animation: emojiPop-b-hprwqamehs 0.3s ease-out;
    font-size: 48px;
    object-fit: contain;
}

@keyframes emojiPop-b-hprwqamehs {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes youtubeReactionFloat-b-hprwqamehs {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }
    10% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
    }
    90% {
        transform: translateY(-150px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) scale(0.8);
        opacity: 0;
    }
}

@keyframes youtubeReactionFloatLeft-b-hprwqamehs {
    0% {
        transform: translateY(0) translateX(0) scale(0.8);
        opacity: 0;
    }
    10% {
        transform: translateY(-20px) translateX(-10px) scale(1);
        opacity: 1;
    }
    90% {
        transform: translateY(-150px) translateX(-30px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) translateX(-40px) scale(0.8);
        opacity: 0;
    }
}

@keyframes youtubeReactionFloatRight-b-hprwqamehs {
    0% {
        transform: translateY(0) translateX(0) scale(0.8);
        opacity: 0;
    }
    10% {
        transform: translateY(-20px) translateX(10px) scale(1);
        opacity: 1;
    }
    90% {
        transform: translateY(-150px) translateX(30px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) translateX(40px) scale(0.8);
        opacity: 0;
    }
}





/* Animaciones obsoletas removidas para evitar conflictos con YouTube Live */

/* Mosaic Styles - Diseño Dinámico Mejorado */
.mosaic-container[b-hprwqamehs] {
    background: radial-gradient(ellipse at center, rgba(30, 30, 40, 0.95), rgba(10, 10, 20, 0.98));
    backdrop-filter: blur(20px);
    height: 100vh;
    overflow: hidden;
}

.mosaic-grid[b-hprwqamehs] {
    display: grid;
    gap: 1rem;
    height: 100%;
    width: 100%;
    padding: 1rem;
    place-content: center;
    margin: 0 auto;
}

/* Layout para 1 foto - Centrada y grande */
.mosaic-single[b-hprwqamehs] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mosaic-single .mosaic-item[b-hprwqamehs] {
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
}

/* Layout para 2 fotos - Lado a lado */
.mosaic-duo[b-hprwqamehs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 90vw;
    margin: auto;
    align-content: center;
}

/* Layout para 3 fotos - Una arriba, dos abajo */
.mosaic-trio[b-hprwqamehs] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    max-width: 85vw;
    max-height: 85vh;
    margin: auto;
}

.mosaic-trio .mosaic-item:first-child[b-hprwqamehs] {
    grid-column: span 2;
}

/* Layout para 4 fotos - Grilla 2x2 */
.mosaic-quad[b-hprwqamehs] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    max-width: 85vw;
    max-height: 85vh;
    margin: auto;
}

/* Layout para 5 fotos - Pattern especial */
.mosaic-five[b-hprwqamehs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    max-width: 90vw;
    max-height: 85vh;
    margin: auto;
}

.mosaic-five .mosaic-item:nth-child(1)[b-hprwqamehs],
.mosaic-five .mosaic-item:nth-child(2)[b-hprwqamehs] {
    grid-row: span 1;
}

/* Layout para 6 fotos - Grilla 3x2 */
.mosaic-six[b-hprwqamehs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    max-width: 90vw;
    max-height: 85vh;
    margin: auto;
}

/* Grilla 3x3 para 7-9 fotos */
.mosaic-grid-3[b-hprwqamehs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    max-width: 90vw;
    max-height: 90vh;
    margin: auto;
}

/* Grilla 4x3 para 10-12 fotos */
.mosaic-grid-4[b-hprwqamehs] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    max-width: 95vw;
    max-height: 90vh;
    margin: auto;
}

/* Grilla 5x4 para 13-20 fotos */
.mosaic-grid-5[b-hprwqamehs] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    max-width: 95vw;
    max-height: 90vh;
    margin: auto;
}

/* Grilla automática para muchas fotos */
.mosaic-grid-auto[b-hprwqamehs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-auto-rows: minmax(150px, 1fr);
    max-width: 98vw;
    max-height: 95vh;
    margin: auto;
}

/* Estilo individual de cada item del mosaico */
.mosaic-item[b-hprwqamehs] {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0) rotate(180deg);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.mosaic-item-visible[b-hprwqamehs] {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    animation: mosaicPop-b-hprwqamehs 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.mosaic-item-hidden[b-hprwqamehs] {
    transform: scale(0) rotate(180deg);
    opacity: 0;
}

/* Fondo blur para mantener aspect ratio */
.photo-backdrop[b-hprwqamehs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.backdrop-media[b-hprwqamehs] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(30px) brightness(0.3);
    transform: scale(1.2);
}

/* Media principal sin recorte */
.photo-main[b-hprwqamehs] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.main-media[b-hprwqamehs] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Caption elegante */
.mosaic-caption[b-hprwqamehs] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    z-index: 3;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mosaic-item:hover .mosaic-caption[b-hprwqamehs] {
    transform: translateY(0);
}

.caption-text[b-hprwqamehs] {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.caption-author[b-hprwqamehs] {
    font-size: 0.75rem;
    opacity: 0.8;
    font-style: italic;
}

/* Hover effects */
.mosaic-item[b-hprwqamehs] {
    cursor: pointer;
    transition: all 0.3s ease;
}

.mosaic-item:hover[b-hprwqamehs] {
    transform: scale(1.02);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    z-index: 10;
}

/* Masonry item variations */
.mosaic-small[b-hprwqamehs] {
    width: 100%;
}

.mosaic-medium[b-hprwqamehs] {
    width: 100%;
}

.mosaic-large[b-hprwqamehs] {
    width: 100%;
}

.mosaic-wide[b-hprwqamehs] {
    width: 100%;
}

.mosaic-tall[b-hprwqamehs] {
    width: 100%;
}

.mosaic-extra-large[b-hprwqamehs] {
    width: 100%;
}

/* Animations Mejoradas */
@keyframes mosaicPop-b-hprwqamehs {
    0% {
        transform: scale(0) rotate(180deg);
        opacity: 0;
        filter: blur(20px);
    }
    40% {
        transform: scale(1.15) rotate(5deg);
        opacity: 0.7;
        filter: blur(5px);
    }
    70% {
        transform: scale(0.95) rotate(-2deg);
        opacity: 0.9;
        filter: blur(2px);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes mosaicFloat-b-hprwqamehs {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes mosaicGlow-b-hprwqamehs {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }
    25% {
        box-shadow: 0 10px 40px rgba(233, 30, 99, 0.3), 0 0 30px rgba(233, 30, 99, 0.2);
    }
    50% {
        box-shadow: 0 10px 40px rgba(156, 39, 176, 0.3), 0 0 30px rgba(156, 39, 176, 0.2);
    }
    75% {
        box-shadow: 0 10px 40px rgba(33, 150, 243, 0.3), 0 0 30px rgba(33, 150, 243, 0.2);
    }
}

/* Animación especial para foto única */
@keyframes singlePhotoEntry-b-hprwqamehs {
    0% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
        filter: blur(30px);
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.8;
        filter: blur(10px);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

.mosaic-single .mosaic-item-visible[b-hprwqamehs] {
    animation: singlePhotoEntry-b-hprwqamehs 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
               mosaicFloat-b-hprwqamehs 4s ease-in-out infinite 1.2s,
               mosaicGlow-b-hprwqamehs 5s ease-in-out infinite 1.2s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mosaic-grid-3[b-hprwqamehs] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mosaic-grid-4[b-hprwqamehs],
    .mosaic-grid-5[b-hprwqamehs] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .mosaic-container[b-hprwqamehs] {
        padding: 0.5rem;
    }
}

.hidden[b-hprwqamehs] {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

.progress-bar-smooth[b-hprwqamehs] {
    will-change: width;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Hardware acceleration for smooth animations */
.slideshow-item img[b-hprwqamehs] {
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Anti-aliasing for better text rendering */
.text-white[b-hprwqamehs] {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Additional Modern Effects */
.glass-card-event:hover[b-hprwqamehs] {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 60px rgba(31, 38, 135, 0.5),
                0 0 40px rgba(236, 72, 153, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Responsive Adjustments for Modern Elements */
@media (max-width: 768px) {
    .glass-card-event[b-hprwqamehs],
    .progress-container[b-hprwqamehs] {
        width: 280px;
    }
}



/* Enhanced Mosaic Styles */
.mosaic-item[b-hprwqamehs] {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0) rotate(180deg);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.mosaic-item[b-hprwqamehs]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(236, 72, 153, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mosaic-item:hover[b-hprwqamehs]::before {
    opacity: 1;
}

.mosaic-item:hover[b-hprwqamehs] {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(236, 72, 153, 0.3);
    z-index: 10;
}



/* Enhanced Caption Styles */
.mosaic-caption[b-hprwqamehs] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.2rem;
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 50%,
        transparent 100%);
    color: white;
    z-index: 3;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.caption-text[b-hprwqamehs] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.caption-author[b-hprwqamehs] {
    font-size: 0.85rem;
    opacity: 0.9;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.caption-author[b-hprwqamehs]::before {
    content: '';
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    border-radius: 2px;
}

/* --------------------------------------------------
   Control Menu (UX/UI) - Menú flotante de controles
   -------------------------------------------------- */

.control-menu[b-hprwqamehs] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease, transform 250ms ease;
}

.control-menu.visible[b-hprwqamehs] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.control-menu.hidden[b-hprwqamehs] {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.control-btn[b-hprwqamehs] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
    cursor: pointer;
}

.control-btn:hover[b-hprwqamehs] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.45);
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.12));
}

.control-btn:active[b-hprwqamehs] {
    transform: translateY(0);
}

.control-btn svg[b-hprwqamehs] {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}

.control-badge[b-hprwqamehs] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(236, 72, 153, 0.45);
}

.control-divider[b-hprwqamehs] {
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.1));
    border-radius: 1px;
    margin: 0 2px;
}

/* Variantes responsive: en vertical ubicamos el menú más abajo y centrado */
.portrait .control-menu[b-hprwqamehs],
.portrait-overlays .control-menu[b-hprwqamehs] {
    top: auto;
    bottom: 1rem;
    right: 50%;
    transform: translate(50%, 10px);
}

.portrait .control-menu.visible[b-hprwqamehs],
.portrait-overlays .control-menu.visible[b-hprwqamehs] {
    transform: translate(50%, 0);
}

/* Estados de sonido */
.sound-on[b-hprwqamehs] {
    background: linear-gradient(180deg, rgba(59,130,246,0.28), rgba(59,130,246,0.18));
    border-color: rgba(59,130,246,0.35);
}

.sound-off[b-hprwqamehs] {
    background: linear-gradient(180deg, rgba(239,68,68,0.28), rgba(239,68,68,0.18));
    border-color: rgba(239,68,68,0.35);
}

/* Estados de mosaico */
.mosaic-on[b-hprwqamehs] {
    background: linear-gradient(180deg, rgba(34,197,94,0.28), rgba(34,197,94,0.18));
    border-color: rgba(34,197,94,0.35);
}

.mosaic-off[b-hprwqamehs] {
    background: linear-gradient(180deg, rgba(239,68,68,0.28), rgba(239,68,68,0.18));
    border-color: rgba(239,68,68,0.35);
}

/* Estados de podio */
.podium-on[b-hprwqamehs] {
    background: linear-gradient(180deg, rgba(251,191,36,0.28), rgba(251,191,36,0.18));
    border-color: rgba(251,191,36,0.35);
}

.podium-off[b-hprwqamehs] {
    background: linear-gradient(180deg, rgba(239,68,68,0.28), rgba(239,68,68,0.18));
    border-color: rgba(239,68,68,0.35);
}

/* Estados de overlays */
.overlays-on[b-hprwqamehs] {
    background: linear-gradient(180deg, rgba(34,197,94,0.28), rgba(34,197,94,0.18));
    border-color: rgba(34,197,94,0.35);
}

.overlays-off[b-hprwqamehs] {
    background: linear-gradient(180deg, rgba(239,68,68,0.28), rgba(239,68,68,0.18));
    border-color: rgba(239,68,68,0.35);
}

/* Tooltips simples */
.control-btn[title][b-hprwqamehs] {
    position: relative;
}
.control-btn[title]:hover[b-hprwqamehs]::after {
    content: attr(title);
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 16px rgba(0,0,0,0.35);
}
/* /Pages/Owner/EventGallery.razor.rz.scp.css */

/* Responsive video controls */
@media (max-width: 768px) {
    video[b-y3finmmja9] {
        max-height: 60vh !important;
    }
    
    video[b-y3finmmja9]::-webkit-media-controls-panel {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    video[b-y3finmmja9]::-webkit-media-controls-play-button,
    video[b-y3finmmja9]::-webkit-media-controls-volume-slider,
    video[b-y3finmmja9]::-webkit-media-controls-timeline {
        filter: brightness(1.2);
    }
}

/* Enhanced focus states */
video:focus[b-y3finmmja9] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Smooth transitions for video states */
video[b-y3finmmja9] {
    transition: all 0.3s ease;
}

video:hover[b-y3finmmja9] {
    transform: scale(1.01);
}

/* Ensure thumbnails inside child components fill their containers on mobile */
[b-y3finmmja9](.lazy-container) {
    width: 100%;
    height: 100%;
}

[b-y3finmmja9](.video-thumbnail-container img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Improve mobile square aspect visuals */
@media (max-width: 640px) {
    [b-y3finmmja9](.video-thumbnail-container) {
        border-radius: 0.5rem; /* match rounded containers */
        background-color: #111827; /* gray-900 for better contrast */
    }
}
/* /Pages/Owner/FeedbackAnalytics.razor.rz.scp.css */
/* Star distribution bar colors */
.star-bar-5[b-5agmywcwcj] { background: linear-gradient(90deg, #22c55e, #16a34a); }
.star-bar-4[b-5agmywcwcj] { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.star-bar-3[b-5agmywcwcj] { background: linear-gradient(90deg, #f59e0b, #d97706); }
.star-bar-2[b-5agmywcwcj] { background: linear-gradient(90deg, #f97316, #ea580c); }
.star-bar-1[b-5agmywcwcj] { background: linear-gradient(90deg, #ef4444, #dc2626); }

/* Trend chart container */
.trend-chart-container[b-5agmywcwcj] {
    min-height: 140px;
}

/* Smooth transitions */
.card[b-5agmywcwcj] {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover[b-5agmywcwcj] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Custom scrollbar for responses list */
.max-h-96[b-5agmywcwcj]::-webkit-scrollbar {
    width: 6px;
}

.max-h-96[b-5agmywcwcj]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.max-h-96[b-5agmywcwcj]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.max-h-96[b-5agmywcwcj]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
/* /Pages/Participant/InvitacionEvent.razor.rz.scp.css */
/* Fix for mobile viewport height issues, especially iOS Safari */
.mobile-full-height[b-2bxn7mz0ea] {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for modern browsers */
    min-height: -webkit-fill-available; /* iOS Safari fallback */
    /* Ensure content can scroll if needed */
    overflow-y: auto;
    overflow-x: hidden;
}

.mobile-background-image[b-2bxn7mz0ea] {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* Additional iOS Safari fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Ensure proper background display on all devices */
.background-container[b-2bxn7mz0ea] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    /* Force hardware acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ==========================
   Finished View - Fullscreen
   ========================== */
.finished-view[b-2bxn7mz0ea] {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: hidden; /* No vertical scroll */
    overflow-x: hidden;
}

.finished-content[b-2bxn7mz0ea] {
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Compact scaling for smaller viewport heights */
@media (max-height: 740px) {
    .finished-content .mb-6[b-2bxn7mz0ea] { margin-bottom: 0.75rem !important; }
    .finished-content .w-24[b-2bxn7mz0ea], .finished-content .h-24[b-2bxn7mz0ea] { width: 3.5rem !important; height: 3.5rem !important; }
    .finished-check[b-2bxn7mz0ea] { width: 3rem !important; height: 3rem !important; }
    .finished-content h2[b-2bxn7mz0ea] { font-size: 1.25rem !important; }
    .finished-content h3[b-2bxn7mz0ea] { font-size: 1rem !important; }
    .finished-content p[b-2bxn7mz0ea] { font-size: 0.875rem !important; }
    .stats-card[b-2bxn7mz0ea] { padding: 0.75rem 1rem !important; }
    .cta-grid button[b-2bxn7mz0ea] { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
}

/* Adaptive element sizing */
.finished-logo[b-2bxn7mz0ea] {
    width: clamp(2.5rem, 12vh, 6rem);
    height: clamp(2.5rem, 12vh, 6rem);
}

.finished-check[b-2bxn7mz0ea] {
    width: clamp(2.75rem, 10vh, 5rem);
    height: clamp(2.75rem, 10vh, 5rem);
}

.stats-card[b-2bxn7mz0ea] {
    padding: clamp(0.75rem, 2.5vh, 1rem);
}

.cta-grid[b-2bxn7mz0ea] { gap: clamp(0.5rem, 2.2vh, 0.75rem); }

/* Ensure content is above background */
.relative.z-10[b-2bxn7mz0ea] {
    z-index: 10 !important;
    position: relative !important;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .mobile-full-height[b-2bxn7mz0ea] {
        min-height: -webkit-fill-available;
    }
    
    .mobile-background-image[b-2bxn7mz0ea] {
        min-height: -webkit-fill-available;
    }
}

/* Additional mobile optimizations */
    @media screen and (max-width: 768px) {
        .mobile-full-height[b-2bxn7mz0ea] {
            min-height: 100vh;
            min-height: 100dvh;
            min-height: -webkit-fill-available;
            /* Ensure proper scrolling on mobile */
            overflow-y: auto;
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        
        /* Ensure content container has proper spacing */
        .mobile-full-height > div[b-2bxn7mz0ea] {
            min-height: calc(100vh - 2rem);
            min-height: calc(100dvh - 2rem);
            padding-top: max(1rem, env(safe-area-inset-top, 0px));
            padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        }
        
        .mobile-background-image[b-2bxn7mz0ea] {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            height: -webkit-fill-available;
            object-fit: cover;
            z-index: -1;
        }
    }
    
    /* Chrome Mobile specific fixes */
    @media screen and (max-width: 768px) {
        /* Force Chrome to respect viewport height */
        .mobile-full-height[b-2bxn7mz0ea] {
            height: 100vh !important;
            height: 100dvh !important;
        }
        
        /* Chrome Android background fix */
        .background-container[b-2bxn7mz0ea] {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            height: 100dvh !important;
            z-index: -1 !important;
        }
        
        .mobile-background-image[b-2bxn7mz0ea] {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center !important;
            /* Chrome specific optimizations */
            will-change: transform;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-perspective: 1000px;
            perspective: 1000px;
        }
    }
    
    /* Chrome Android address bar compensation */
    @supports (-webkit-appearance: none) {
        @media screen and (max-width: 768px) {
            .mobile-full-height[b-2bxn7mz0ea] {
                min-height: calc(100vh - env(keyboard-inset-height, 0px));
                min-height: calc(100dvh - env(keyboard-inset-height, 0px));
            }
        }
    }
    
    /* Force Chrome to display background images */
    @media screen and (max-width: 768px) {
        .background-container img[b-2bxn7mz0ea] {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            /* Force GPU acceleration */
            transform: translate3d(0, 0, 0) !important;
            -webkit-transform: translate3d(0, 0, 0) !important;
        }
        
        /* Chrome specific container fixes */
        .background-container[b-2bxn7mz0ea] {
            overflow: hidden !important;
            background: transparent !important;
            z-index: -10 !important;
        }
        
        /* Ensure image loads on Chrome */
        img[src][b-2bxn7mz0ea] {
            content-visibility: visible !important;
            contain: none !important;
        }
        
        /* Force background image to be behind everything */
        .mobile-background-image[b-2bxn7mz0ea] {
            z-index: -10 !important;
        }
    }
    
    /* Chrome Android specific media query */
    @media screen and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
        .mobile-background-image[b-2bxn7mz0ea] {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            object-fit: cover !important;
            z-index: -1 !important;
            transform: translateZ(0) !important;
            -webkit-transform: translateZ(0) !important;
        }
    }

@keyframes scale-up-b-2bxn7mz0ea {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce-in-b-2bxn7mz0ea {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-scale-up[b-2bxn7mz0ea] {
    animation: scale-up-b-2bxn7mz0ea 0.2s ease-out;
}

.animate-bounce-in[b-2bxn7mz0ea] {
    animation: bounce-in-b-2bxn7mz0ea 0.4s ease-out;
}

/* Hover effects for reaction buttons */
.reaction-button:hover[b-2bxn7mz0ea] {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

/* Pulse animation for active reactions */
.reaction-active[b-2bxn7mz0ea] {
    animation: pulse-b-2bxn7mz0ea 1s infinite;
}

@keyframes pulse-b-2bxn7mz0ea {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* ==========================
   CTA Pulse (UX highlight)
   ========================== */
.cta-pulse[b-2bxn7mz0ea] {
    position: relative;
    will-change: transform;
    animation: cta-pulse-scale-b-2bxn7mz0ea 1.6s ease-in-out infinite;
}

.cta-pulse[b-2bxn7mz0ea]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.45); /* pink-500 ring */
    animation: cta-pulse-ring-b-2bxn7mz0ea 1.6s ease-out infinite;
}

@keyframes cta-pulse-scale-b-2bxn7mz0ea {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes cta-pulse-ring-b-2bxn7mz0ea {
    0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.45); opacity: 1; }
    70% { box-shadow: 0 0 0 12px rgba(236, 72, 153, 0.0); opacity: 0.6; }
    100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.0); opacity: 0; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .cta-pulse[b-2bxn7mz0ea] { animation: none; }
    .cta-pulse[b-2bxn7mz0ea]::after { animation: none; }
}

/* ==== MODERN STICKY HEADER + HERO SECTION ==== */

/* Sticky Compact Header */
.sticky-header[b-2bxn7mz0ea] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    animation: slideDown-b-2bxn7mz0ea 0.3s ease-out;
}

@keyframes slideDown-b-2bxn7mz0ea {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sticky-header-content[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    max-width: 100%;
    margin: 0 auto;
}

/* Header Back Button */
.header-back-btn[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-radius: 50%;
    color: #374151;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.header-back-btn:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.header-back-btn:active[b-2bxn7mz0ea] {
    transform: scale(0.98);
}

/* Header Logo */
.header-logo[b-2bxn7mz0ea] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.75rem;
    overflow: hidden;
}

.header-logo img[b-2bxn7mz0ea] {
    height: 36px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

/* Header Badge */
.header-badge[b-2bxn7mz0ea] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.badge-private[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.badge-anonymous[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.badge:hover[b-2bxn7mz0ea] {
    transform: scale(1.05);
}

/* ==== COMPACT EXPANDABLE HERO CARD ==== */

.hero-card[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    margin: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: fadeInUp-b-2bxn7mz0ea 0.4s ease-out;
}

.hero-card[b-2bxn7mz0ea]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.hero-card:hover[b-2bxn7mz0ea]::before {
    opacity: 1.3;
}

.hero-card:active[b-2bxn7mz0ea] {
    transform: scale(0.99);
}

.hero-card-content[b-2bxn7mz0ea] {
    padding: 1rem 1rem;
    position: relative;
    z-index: 1;
}

/* Compact Row (Collapsed State) */
.hero-compact-row[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* Compact Title */
.hero-compact-title[b-2bxn7mz0ea] {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-width: 0;
}

/* Compact Social Icons */
.hero-compact-social[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.compact-social-icon[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    flex-shrink: 0;
}

.compact-social-icon:hover[b-2bxn7mz0ea] {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.compact-social-icon:active[b-2bxn7mz0ea] {
    transform: scale(1.05);
}

/* Specific Social Media Colors */
.compact-social-icon.facebook:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.4), rgba(66, 165, 245, 0.4));
}

.compact-social-icon.instagram:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, rgba(228, 64, 95, 0.4), rgba(247, 119, 55, 0.4));
}

.compact-social-icon.twitter:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, rgba(29, 161, 242, 0.4), rgba(13, 139, 217, 0.4));
}

.compact-social-icon.youtube:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.4), rgba(204, 0, 0, 0.4));
}

.compact-social-icon.website:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.4), rgba(73, 80, 87, 0.4));
}

/* Expand/Collapse Button */
.hero-expand-btn[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    cursor: pointer;
}

.hero-expand-btn:hover[b-2bxn7mz0ea] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.expand-icon[b-2bxn7mz0ea] {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expand-icon.rotated[b-2bxn7mz0ea] {
    transform: rotate(180deg);
}

/* Expanded Content */
.hero-expanded-content[b-2bxn7mz0ea] {
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.hero-expanded-content.visible[b-2bxn7mz0ea] {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.875rem;
}

.hero-expanded-description[b-2bxn7mz0ea] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin: 0;
}

/* Expanded State Card */
.hero-card.expanded[b-2bxn7mz0ea] {
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

/* Responsive Design */
@media (max-width: 640px) {
    .hero-card[b-2bxn7mz0ea] {
        margin: 0.375rem 0.5rem;
        margin-bottom: 0.875rem;
        border-radius: 14px;
    }
    
    .hero-card-content[b-2bxn7mz0ea] {
        padding: 0.875rem 0.875rem;
    }
    
    .hero-compact-row[b-2bxn7mz0ea] {
        gap: 0.5rem;
    }
    
    .hero-compact-title[b-2bxn7mz0ea] {
        font-size: 1rem;
    }
    
    .hero-compact-social[b-2bxn7mz0ea] {
        gap: 0.3rem;
    }
    
    .compact-social-icon[b-2bxn7mz0ea] {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }
    
    .hero-expand-btn[b-2bxn7mz0ea] {
        width: 26px;
        height: 26px;
    }
    
    .expand-icon[b-2bxn7mz0ea] {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    .hero-expanded-description[b-2bxn7mz0ea] {
        font-size: 0.85rem;
    }
    
    .hero-expanded-content.visible[b-2bxn7mz0ea] {
        margin-top: 0.75rem;
    }
}

@media (max-width: 480px) {
    .hero-card[b-2bxn7mz0ea] {
        margin: 0.25rem 0.375rem;
        margin-bottom: 0.75rem;
        border-radius: 12px;
    }
    
    .hero-card-content[b-2bxn7mz0ea] {
        padding: 0.75rem;
    }
    
    .hero-compact-row[b-2bxn7mz0ea] {
        gap: 0.375rem;
    }
    
    .hero-compact-title[b-2bxn7mz0ea] {
        font-size: 0.95rem;
        -webkit-line-clamp: 2;
    }
    
    .hero-compact-social[b-2bxn7mz0ea] {
        gap: 0.25rem;
    }
    
    .compact-social-icon[b-2bxn7mz0ea] {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
    
    .hero-expand-btn[b-2bxn7mz0ea] {
        width: 24px;
        height: 24px;
    }
    
    .expand-icon[b-2bxn7mz0ea] {
        width: 0.75rem;
        height: 0.75rem;
    }
    
    .hero-expanded-description[b-2bxn7mz0ea] {
        font-size: 0.8125rem;
        line-height: 1.4;
    }
    
    .hero-expanded-content.visible[b-2bxn7mz0ea] {
        margin-top: 0.625rem;
    }
}

/* Very compact for small screens */
@media (max-width: 360px) {
    .hero-card-content[b-2bxn7mz0ea] {
        padding: 0.625rem;
    }
    
    .hero-compact-title[b-2bxn7mz0ea] {
        font-size: 0.875rem;
    }
    
    .compact-social-icon[b-2bxn7mz0ea] {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
    }
    
    .hero-expand-btn[b-2bxn7mz0ea] {
        width: 22px;
        height: 22px;
    }
    
    .hero-expanded-description[b-2bxn7mz0ea] {
        font-size: 0.75rem;
    }
}

@keyframes statusPulse-b-2bxn7mz0ea {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .tab-button[b-2bxn7mz0ea] {
        min-height: 56px;
        padding: 0.625rem 0.375rem;
    }
    
    .tab-button span[b-2bxn7mz0ea] {
        font-size: 0.6875rem;
    }
    
    .upload-area[b-2bxn7mz0ea] {
        padding: 1.25rem 0.75rem;
        min-height: 180px;
    }
    
    .camera-button[b-2bxn7mz0ea] {
        padding: 0.875rem;
        min-height: 52px;
    }
}
 
 /* ==== MODERN INVITATION CARD STYLES ==== */

/* Invitation Card Container */
.invitation-card-container[b-2bxn7mz0ea] {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #000;
}

/* Initial Full Screen Invitation */
.invitation-hero[b-2bxn7mz0ea] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    pointer-events: auto; /* Permitir clicks por defecto */
}

.invitation-hero.swiped-up[b-2bxn7mz0ea] {
    transform: translateY(-100%);
    pointer-events: none; /* Deshabilitar clicks cuando está oculto */
}

/* Background Image for Invitation */
.invitation-background[b-2bxn7mz0ea] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.invitation-background img[b-2bxn7mz0ea] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.7) contrast(1.1);
}

/* Gradient Overlay */
.invitation-overlay[b-2bxn7mz0ea] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.1) 30%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 2;
}

/* Central Content */
.invitation-content[b-2bxn7mz0ea] {
    position: relative;
    z-index: 20;
    text-align: center;
    padding: 2rem;
    max-width: 500px;
    animation: fadeInUp-b-2bxn7mz0ea 1s ease-out 0.5s both;
}

/* Logo/Partner Section */
/* Partner Logo - Top Left Corner */
.partner-logo-container[b-2bxn7mz0ea] {
    animation: fadeInScale-b-2bxn7mz0ea 0.8s ease-out 0.3s both;
}

.partner-logo[b-2bxn7mz0ea] {
    height: 80px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 
                0 2px 8px rgba(0, 0, 0, 0.1),
                inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.partner-logo:hover[b-2bxn7mz0ea] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 
                0 4px 12px rgba(0, 0, 0, 0.15),
                inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Logo and Social Media Container */
.logo-social-container[b-2bxn7mz0ea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    animation: fadeInScale-b-2bxn7mz0ea 1s ease-out 0.7s both;
}

.invitation-logo[b-2bxn7mz0ea] {
    display: flex;
    justify-content: center;
}

.invitation-logo img[b-2bxn7mz0ea] {
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.3));
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    padding: 1rem;
}

/* Social Media Icons beside Logo */
.invitation-social-beside-logo[b-2bxn7mz0ea] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    animation: fadeInUp-b-2bxn7mz0ea 0.8s ease-out 0.9s both;
}

.invitation-social-beside-logo .social-icon[b-2bxn7mz0ea] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-size: 1.1rem;
}

.invitation-social-beside-logo .social-icon:hover[b-2bxn7mz0ea] {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Event Title */
.invitation-title[b-2bxn7mz0ea] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3rem;
    font-weight: 700;
    color: white;
    /* Múltiples capas de text-shadow para máximo contraste */
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 1),
        0 0 20px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.7),
        0 8px 16px rgba(0, 0, 0, 0.6);
    margin-bottom: 1rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    animation: fadeInUp-b-2bxn7mz0ea 1s ease-out 0.9s both;
    /* Respaldo con fondo semitransparente */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
    padding: 0.5rem 1rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
}

/* Event Description */
.invitation-description[b-2bxn7mz0ea] {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: white;
    /* Múltiples capas de text-shadow para máximo contraste */
    text-shadow: 
        0 0 8px rgba(0, 0, 0, 1),
        0 0 16px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 1.5rem;
    line-height: 1.5;
    animation: fadeInUp-b-2bxn7mz0ea 1s ease-out 1.1s both;
    /* Respaldo con fondo semitransparente */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-block;
    max-width: 100%;
}

/* Event Date */
.invitation-date[b-2bxn7mz0ea] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Fondo más opaco para mejor contraste */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    /* Múltiples capas de text-shadow para máximo contraste */
    text-shadow: 
        0 0 6px rgba(0, 0, 0, 1),
        0 0 12px rgba(0, 0, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.7);
    animation: fadeInUp-b-2bxn7mz0ea 1s ease-out 1.3s both;
    margin-bottom: 3rem;
    /* Sombra del contenedor para mayor profundidad */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Swipe Up Indicator */
.swipe-indicator[b-2bxn7mz0ea] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 30;
    animation: bounceIn-b-2bxn7mz0ea 1s ease-out 2s both;
}

.swipe-text[b-2bxn7mz0ea] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.swipe-arrow[b-2bxn7mz0ea] {
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    animation: pulse-b-2bxn7mz0ea 2s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swipe-arrow:hover[b-2bxn7mz0ea] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.swipe-arrow svg[b-2bxn7mz0ea] {
    color: white;
    width: 20px;
    height: 20px;
    animation: bounce-b-2bxn7mz0ea 2s ease-in-out infinite;
}

/* ==== ELEGANT SWIPE INDICATOR (Like Premium Invitation Cards) ==== */
.elegant-swipe-indicator[b-2bxn7mz0ea] {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    animation: elegantFadeIn-b-2bxn7mz0ea 1.5s ease-out 2s forwards;
    -webkit-tap-highlight-color: transparent;
}

/* Animated Chevron Container */
.chevron-container[b-2bxn7mz0ea] {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chevron SVG */
.chevron[b-2bxn7mz0ea] {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    animation: elegantBounce-b-2bxn7mz0ea 2.5s ease-in-out infinite;
}

/* Elegant Text */
.elegant-swipe-text[b-2bxn7mz0ea] {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    opacity: 0;
    animation: elegantTextFade-b-2bxn7mz0ea 2s ease-in-out 2.5s infinite;
}

/* Elegant Underline */
.elegant-underline[b-2bxn7mz0ea] {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: elegantUnderlineExpand-b-2bxn7mz0ea 2s ease-in-out 2.5s infinite;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Hover Effects */
.elegant-swipe-indicator:hover .chevron[b-2bxn7mz0ea] {
    animation: elegantBounceHover-b-2bxn7mz0ea 0.6s ease-in-out infinite;
    color: rgba(255, 255, 255, 1);
}

.elegant-swipe-indicator:hover .elegant-swipe-text[b-2bxn7mz0ea] {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
}

.elegant-swipe-indicator:hover .elegant-underline[b-2bxn7mz0ea] {
    width: 60px;
    animation: none;
}

/* Elegant Animations */
@keyframes elegantFadeIn-b-2bxn7mz0ea {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes elegantBounce-b-2bxn7mz0ea {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes elegantBounceHover-b-2bxn7mz0ea {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes elegantTextFade-b-2bxn7mz0ea {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

@keyframes elegantUnderlineExpand-b-2bxn7mz0ea {
    0%, 100% {
        width: 0;
        opacity: 0.3;
    }
    50% {
        width: 50px;
        opacity: 1;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .elegant-swipe-indicator[b-2bxn7mz0ea] {
        bottom: 2rem;
    }
    
    .chevron[b-2bxn7mz0ea] {
        width: 20px;
        height: 20px;
    }
    
    .elegant-swipe-text[b-2bxn7mz0ea] {
        font-size: 0.65rem;
        letter-spacing: 1.5px;
    }
}

/* ==== ELEGANT SWIPE DOWN INDICATOR (To go back) ==== */
.elegant-swipe-down-indicator[b-2bxn7mz0ea] {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    z-index: 30;
    opacity: 0;
    animation: elegantFadeIn-b-2bxn7mz0ea 1.5s ease-out 0.5s forwards;
    -webkit-tap-highlight-color: transparent;
}

/* Animated Chevron Down Container */
.chevron-down-container[b-2bxn7mz0ea] {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chevron Down SVG */
.chevron-down[b-2bxn7mz0ea] {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    animation: elegantBounceDown-b-2bxn7mz0ea 2.5s ease-in-out infinite;
}

/* Elegant Text Down */
.elegant-swipe-down-text[b-2bxn7mz0ea] {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    opacity: 0;
    animation: elegantTextFade-b-2bxn7mz0ea 2s ease-in-out 1s infinite;
}

/* Elegant Underline Down */
.elegant-underline-down[b-2bxn7mz0ea] {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: elegantUnderlineExpand-b-2bxn7mz0ea 2s ease-in-out 1s infinite;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Hover Effects */
.elegant-swipe-down-indicator:hover .chevron-down[b-2bxn7mz0ea] {
    animation: elegantBounceDownHover-b-2bxn7mz0ea 0.6s ease-in-out infinite;
    color: rgba(255, 255, 255, 1);
}

.elegant-swipe-down-indicator:hover .elegant-swipe-down-text[b-2bxn7mz0ea] {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
}

.elegant-swipe-down-indicator:hover .elegant-underline-down[b-2bxn7mz0ea] {
    width: 60px;
    animation: none;
}

/* Bounce Down Animation */
@keyframes elegantBounceDown-b-2bxn7mz0ea {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

@keyframes elegantBounceDownHover-b-2bxn7mz0ea {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
}

/* Responsive Adjustments for Down Indicator */
@media (max-width: 768px) {
    .elegant-swipe-down-indicator[b-2bxn7mz0ea] {
        top: 1.5rem;
    }
    
    .chevron-down[b-2bxn7mz0ea] {
        width: 20px;
        height: 20px;
    }
    
    .elegant-swipe-down-text[b-2bxn7mz0ea] {
        font-size: 0.65rem;
        letter-spacing: 1.5px;
    }
}

/* ==== MODERN SWIPE BUTTON STYLES (Legacy - Keep for other scenarios) ==== */
.swipe-button[b-2bxn7mz0ea] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    padding: 1rem 2rem;
    cursor: pointer;
    z-index: 20;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(102, 126, 234, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUpBounce-b-2bxn7mz0ea 1s ease-out 1.8s both, pulseGlow-b-2bxn7mz0ea 3s ease-in-out infinite 2.8s;
    -webkit-tap-highlight-color: transparent;
}

.swipe-button:hover[b-2bxn7mz0ea] {
    transform: translateX(-50%) translateY(-8px) scale(1.05);
    box-shadow: 
        0 16px 48px rgba(102, 126, 234, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.6);
}

.swipe-button:active[b-2bxn7mz0ea] {
    transform: translateX(-50%) translateY(-4px) scale(1.02);
    box-shadow: 
        0 8px 24px rgba(102, 126, 234, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.12);
}

.swipe-button-content[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 2;
}

.swipe-button-text[b-2bxn7mz0ea] {
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.swipe-button-icon[b-2bxn7mz0ea] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: bounceIcon-b-2bxn7mz0ea 2s ease-in-out infinite;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.swipe-button-icon svg[b-2bxn7mz0ea] {
    width: 18px;
    height: 18px;
    stroke-width: 3;
}

/* Ripple Effect */
.swipe-button-ripple[b-2bxn7mz0ea] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%);
    animation: ripple-b-2bxn7mz0ea 2s ease-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Swipe Button Animations */
@keyframes fadeInUpBounce-b-2bxn7mz0ea {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(40px);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px);
    }
    80% {
        transform: translateX(-50%) translateY(5px);
    }
    100% {
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes bounceIcon-b-2bxn7mz0ea {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes ripple-b-2bxn7mz0ea {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.5;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

@keyframes pulseGlow-b-2bxn7mz0ea {
    0%, 100% {
        box-shadow: 
            0 8px 32px rgba(102, 126, 234, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    50% {
        box-shadow: 
            0 8px 40px rgba(102, 126, 234, 0.5),
            0 2px 12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }
}

/* Content Section (Hidden Initially) - Now with Background Image */
.invitation-details[b-2bxn7mz0ea] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0s;
    z-index: 5;
    color: white; /* Ensure text is visible */
    overflow: hidden;
    pointer-events: none; /* Deshabilitar clicks cuando está oculto */
}

/* Background Image for Details Section */
.invitation-details[b-2bxn7mz0ea]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit; /* Will inherit from parent container */
    background-size: cover;
    background-position: center;
    opacity: 1; /* Full opacity - la foto completa */
    filter: blur(8px); /* Blur más pronunciado */
    z-index: -2;
}

/* Dark Overlay for Details Section - Only to darken the background image */
.invitation-details[b-2bxn7mz0ea]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Solo oscurecer, sin colores */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
}

/* Ensure all content inside invitation-details is visible */
.invitation-details *[b-2bxn7mz0ea] {
    color: inherit;
}

/* Override specific elements that might have dark text */
.invitation-details .bg-white\/95[b-2bxn7mz0ea],
.invitation-details .bg-red-50\/90[b-2bxn7mz0ea] {
    color: #1f2937 !important; /* Dark text for light backgrounds */
}

.invitation-details .text-red-700[b-2bxn7mz0ea] {
    color: #dc2626 !important; /* Keep red text for error messages */
}

.invitation-details.slide-up[b-2bxn7mz0ea],
.invitation-details.revealed[b-2bxn7mz0ea] {
    transform: translateY(-100%);
    z-index: 15; /* Mayor que invitation-hero para estar encima */
    pointer-events: auto; /* Habilitar clicks cuando está visible */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0s;
}

/* Social Media Icons in Invitation */
.invitation-social[b-2bxn7mz0ea] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    animation: fadeInUp-b-2bxn7mz0ea 1s ease-out 1.5s both;
}

.invitation-social .social-icon[b-2bxn7mz0ea] {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.invitation-social .social-icon:hover[b-2bxn7mz0ea] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Invitation Badges */
.invitation-private-badge[b-2bxn7mz0ea],
.invitation-join-badge[b-2bxn7mz0ea] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: fadeInUp-b-2bxn7mz0ea 0.8s ease-out 0.3s both;
}

.invitation-private-badge[b-2bxn7mz0ea] {
    background: rgba(239, 68, 68, 0.9);
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.invitation-join-badge[b-2bxn7mz0ea] {
    background: rgba(59, 130, 246, 0.9);
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Animations */
@keyframes fadeInUp-b-2bxn7mz0ea {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale-b-2bxn7mz0ea {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn-b-2bxn7mz0ea {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes pulse-b-2bxn7mz0ea {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes bounce-b-2bxn7mz0ea {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .partner-logo[b-2bxn7mz0ea] {
        height: 60px;
        max-width: 150px;
        padding: 10px 12px;
        border-radius: 12px;
    }
    
    .partner-logo-container[b-2bxn7mz0ea] {
        top: 1rem !important;
        left: 1rem !important;
    }
    
    .invitation-content[b-2bxn7mz0ea] {
        padding: 1.5rem;
        max-width: 90%;
    }
    
    .invitation-title[b-2bxn7mz0ea] {
        font-size: 2.2rem;
        margin-bottom: 0.8rem;
    }
    
    .invitation-description[b-2bxn7mz0ea] {
        font-size: 1rem;
        margin-bottom: 1.2rem;
    }
    
    .invitation-logo img[b-2bxn7mz0ea] {
        max-width: 100px;
        max-height: 100px;
        padding: 0.8rem;
    }
    
    .logo-social-container[b-2bxn7mz0ea] {
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .invitation-social-beside-logo .social-icon[b-2bxn7mz0ea] {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    
    .invitation-date[b-2bxn7mz0ea] {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
        margin-bottom: 2.5rem;
    }
    
    .swipe-indicator[b-2bxn7mz0ea] {
        bottom: 1.5rem;
    }
    
    .swipe-text[b-2bxn7mz0ea] {
        font-size: 0.8rem;
    }
    
    .swipe-arrow[b-2bxn7mz0ea] {
        width: 45px;
        height: 45px;
    }
    
    .swipe-arrow svg[b-2bxn7mz0ea] {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .partner-logo[b-2bxn7mz0ea] {
        height: 50px;
        max-width: 120px;
        padding: 8px 10px;
        border-radius: 10px;
    }
    
    .invitation-content[b-2bxn7mz0ea] {
        padding: 1rem;
    }
    
    .invitation-title[b-2bxn7mz0ea] {
        font-size: 1.8rem;
    }
    
    .invitation-description[b-2bxn7mz0ea] {
        font-size: 0.9rem;
    }
    
    .invitation-logo img[b-2bxn7mz0ea] {
        max-width: 80px;
        max-height: 80px;
        padding: 0.6rem;
    }
    
    .logo-social-container[b-2bxn7mz0ea] {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .invitation-social-beside-logo .social-icon[b-2bxn7mz0ea] {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .invitation-social .social-icon[b-2bxn7mz0ea] {
        width: 40px;
        height: 40px;
    }
}

/* Touch interaction enhancements */
.invitation-hero[b-2bxn7mz0ea] {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.swipe-arrow[b-2bxn7mz0ea] {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* Accessibility improvements */
.invitation-card-container:focus-within .swipe-indicator[b-2bxn7mz0ea] {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 4px;
    border-radius: 50px;
}

/* Performance optimizations */
.invitation-hero[b-2bxn7mz0ea],
.invitation-details[b-2bxn7mz0ea] {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Custom scrollbar for details section */
.invitation-details[b-2bxn7mz0ea]::-webkit-scrollbar {
    display: none;
}

.invitation-details[b-2bxn7mz0ea] {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .invitation-overlay[b-2bxn7mz0ea] {
        background: linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.8) 30%,
            rgba(0, 0, 0, 0.8) 70%,
            rgba(0, 0, 0, 0.95) 100%
        );
    }
    
    .invitation-title[b-2bxn7mz0ea],
    .invitation-description[b-2bxn7mz0ea] {
        text-shadow: 
            0 0 10px rgba(0, 0, 0, 1),
            0 0 20px rgba(0, 0, 0, 1),
            2px 2px 4px rgba(0, 0, 0, 1),
            4px 4px 8px rgba(0, 0, 0, 1);
        background: rgba(0, 0, 0, 0.8) !important;
    }
    
    .invitation-date[b-2bxn7mz0ea] {
        background: rgba(0, 0, 0, 0.9) !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
    }
}

/* Garantizar contraste en fondos claros - Aplicar siempre */
.invitation-content[b-2bxn7mz0ea] {
    position: relative;
}

/* Overlay adicional específico para el área de texto */
.invitation-content[b-2bxn7mz0ea]::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.2) 70%,
        transparent 100%
    );
    border-radius: 20px;
    pointer-events: none;
    z-index: -1;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .invitation-hero[b-2bxn7mz0ea],
    .invitation-details[b-2bxn7mz0ea] {
        transition: none;
    }
    
    .invitation-content[b-2bxn7mz0ea],
    .invitation-logo[b-2bxn7mz0ea],
    .invitation-title[b-2bxn7mz0ea],
    .invitation-description[b-2bxn7mz0ea],
    .invitation-date[b-2bxn7mz0ea],
    .invitation-social[b-2bxn7mz0ea],
    .swipe-indicator[b-2bxn7mz0ea] {
        animation: none;
    }
    
    .swipe-arrow[b-2bxn7mz0ea] {
        animation: none;
    }
    
    .swipe-arrow svg[b-2bxn7mz0ea] {
        animation: none;
    }
}

/* Animations */
@keyframes slideInFromRight-b-2bxn7mz0ea {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutToRight-b-2bxn7mz0ea {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes slideInFromTop-b-2bxn7mz0ea {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes progressShimmer-b-2bxn7mz0ea {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes scaleIn-b-2bxn7mz0ea {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn-b-2bxn7mz0ea {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes spin-b-2bxn7mz0ea {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Icon bounce animation */
@keyframes iconBounce-b-2bxn7mz0ea {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-8px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-4px);
    }
}

/* Shimmer effect for text */
@keyframes textShimmer-b-2bxn7mz0ea {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

/* Glow pulse for the icon container */
@keyframes glowPulse-b-2bxn7mz0ea {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
    }
    50% {
        box-shadow: 0 8px 24px rgba(236, 72, 153, 0.6), 
                    0 0 0 8px rgba(236, 72, 153, 0.1);
    }
}

/* Upload area with pulse animation */
.upload-area-pulse[b-2bxn7mz0ea] {
    animation: uploadPulse 2.5s ease-in-out infinite;
    transition: all 0.3s ease;
}

.upload-area-pulse:hover[b-2bxn7mz0ea] {
    animation: none;
    transform: scale(1.03);
}

/* Icon with bounce animation */
.upload-icon-bounce[b-2bxn7mz0ea] {
    animation: iconBounce-b-2bxn7mz0ea 2s ease-in-out infinite, 
               glowPulse-b-2bxn7mz0ea 2.5s ease-in-out infinite;
}

.upload-icon-bounce:hover[b-2bxn7mz0ea] {
    animation: none;
}

/* Text shimmer effect */
.upload-text-shimmer[b-2bxn7mz0ea] {
    animation: textShimmer-b-2bxn7mz0ea 2.5s ease-in-out infinite;
}

/* ==== MESSAGE SECTION ANIMATIONS ==== */

/* Message header pulse animation */
@keyframes messagePulse-b-2bxn7mz0ea {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(147, 51, 234, 0.15);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 8px 32px rgba(147, 51, 234, 0.3), 
                    0 0 0 4px rgba(147, 51, 234, 0.08);
    }
}

/* Message icon float animation */
@keyframes messageIconFloat-b-2bxn7mz0ea {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    25% {
        transform: translateY(-6px) scale(1.05);
    }
    50% {
        transform: translateY(0) scale(1);
    }
    75% {
        transform: translateY(-3px) scale(1.02);
    }
}

/* Message text shimmer */
@keyframes messageShimmer-b-2bxn7mz0ea {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* Apply message pulse animation */
.message-header-pulse[b-2bxn7mz0ea] {
    animation: messagePulse-b-2bxn7mz0ea 3s ease-in-out infinite;
}

/* Apply message icon float */
.message-icon-float[b-2bxn7mz0ea] {
    animation: messageIconFloat-b-2bxn7mz0ea 2.5s ease-in-out infinite;
}

/* Apply message text shimmer */
.message-text-shimmer[b-2bxn7mz0ea] {
    animation: messageShimmer-b-2bxn7mz0ea 3s ease-in-out infinite;
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .tab-button[b-2bxn7mz0ea] {
        min-height: 48px;
        padding: 0.5rem;
    }
    
    .upload-area[b-2bxn7mz0ea] {
        min-height: 160px;
        padding: 1rem;
    }
    
    .camera-button[b-2bxn7mz0ea] {
        min-height: 48px;
        padding: 0.75rem;
    }
}

/* Compact spacing for mobile */
@media (max-width: 640px) {
    .space-y-3 > * + *[b-2bxn7mz0ea] {
        margin-top: 0.5rem;
    }
    
    .space-y-4 > * + *[b-2bxn7mz0ea] {
        margin-top: 0.75rem;
    }
    
    .mb-8[b-2bxn7mz0ea] {
        margin-bottom: 1rem;
    }
    
    .py-12[b-2bxn7mz0ea] {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Initial views styles */
.mobile-full-height[b-2bxn7mz0ea] {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
}

.background-container[b-2bxn7mz0ea] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.mobile-background-image[b-2bxn7mz0ea] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.event-info-overlay[b-2bxn7mz0ea] {
    position: relative;
    z-index: 10;
}

/* Text shadows for better readability on background images */
.text-shadow-strong[b-2bxn7mz0ea] {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
}

.text-shadow-medium[b-2bxn7mz0ea] {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7), 0 0 6px rgba(0, 0, 0, 0.4);
}

/* Social media icons */
.social-icon[b-2bxn7mz0ea] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.social-icon:hover[b-2bxn7mz0ea] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.social-icon.facebook[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #1877f2, #42a5f5);
}

.social-icon.facebook:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #166fe5, #1976d2);
}

.social-icon.instagram[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #e4405f, #f77737, #fccc63);
}

.social-icon.instagram:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #d73447, #e91e63, #ff9800);
}

.social-icon.twitter[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #1da1f2, #0d8bd9);
}

.social-icon.twitter:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #0d8bd9, #0277bd);
}

.social-icon.youtube[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #ff0000, #cc0000);
}

.social-icon.youtube:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #cc0000, #b71c1c);
}

.social-icon.website[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.social-icon.website:hover[b-2bxn7mz0ea] {
    background: linear-gradient(135deg, #495057, #343a40);
}

/* Font display for headings */
.font-display[b-2bxn7mz0ea] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Ensure participation options container has proper spacing */
@media screen and (max-width: 768px) {
    .bg-white\/95.backdrop-blur-sm.rounded-xl[b-2bxn7mz0ea] {
        margin-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
        margin-top: 1rem !important;
    }
    
    /* Ensure main content container has proper top padding */
    .relative.z-10.flex-1.flex.flex-col.justify-start[b-2bxn7mz0ea] {
        padding-top: max(2rem, env(safe-area-inset-top, 1rem)) !important;
    }
    
    /* Ensure logo container has proper spacing */
    .flex.items-center.justify-center.mx-auto.mb-6[b-2bxn7mz0ea] {
        margin-top: max(2rem, env(safe-area-inset-top, 1rem)) !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Reduce logo size on mobile devices */
    .w-40.h-40[b-2bxn7mz0ea] {
        width: 7rem !important;
        height: 7rem !important;
    }
    
    /* Fix for very small screens */
    @media screen and (max-height: 600px) {
        .mobile-full-height[b-2bxn7mz0ea] {
            min-height: 100vh !important;
            height: auto !important;
        }
        
        .mobile-full-height > div[b-2bxn7mz0ea] {
            min-height: auto !important;
            padding-top: 1rem !important;
            padding-bottom: 0.5rem !important;
        }
        
        /* Further reduce logo size on very small screens */
        .w-40.h-40[b-2bxn7mz0ea] {
            width: 5rem !important;
            height: 5rem !important;
        }
        
        /* Reduce logo container spacing on very small screens */
        .flex.items-center.justify-center.mx-auto.mb-6[b-2bxn7mz0ea] {
            margin-top: max(1rem, env(safe-area-inset-top, 0.5rem)) !important;
            margin-bottom: 1rem !important;
        }
    }
}

/* ==== ENHANCED MAIN BUTTON WITH PULSE ANIMATION ==== */
.main-button-container[b-2bxn7mz0ea] {
    z-index: 40 !important;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.main-join-button-enhanced[b-2bxn7mz0ea] {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(147, 51, 234, 0.95));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 32px rgba(59, 130, 246, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    cursor: pointer;
    position: relative;
    z-index: 45;
    overflow: visible;
}

.main-join-button-enhanced:hover[b-2bxn7mz0ea] {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 
        0 12px 40px rgba(59, 130, 246, 0.6),
        0 6px 20px rgba(0, 0, 0, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(147, 51, 234, 1));
    border-color: rgba(255, 255, 255, 0.8);
}

.main-join-button-enhanced:active[b-2bxn7mz0ea] {
    transform: scale(1.05) translateY(-1px);
}

/* Pulse Ring Animations */
.pulse-ring[b-2bxn7mz0ea] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    animation: pulseRing-b-2bxn7mz0ea 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    z-index: -1;
}

.pulse-ring-delayed[b-2bxn7mz0ea] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid rgba(147, 51, 234, 0.5);
    border-radius: 50%;
    animation: pulseRing-b-2bxn7mz0ea 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 1s;
    z-index: -1;
}

@keyframes pulseRing-b-2bxn7mz0ea {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.main-label-enhanced[b-2bxn7mz0ea] {
    font-size: 0.9rem;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    font-weight: 700;
    text-align: center;
    position: relative;
    z-index: 40;
    letter-spacing: 0.5px;
}

/* ==== CORNER CLUSTERS ==== */
.corner-cluster-left[b-2bxn7mz0ea],
.corner-cluster-right[b-2bxn7mz0ea] {
    z-index: 35 !important;
    pointer-events: auto;
}

.cluster-container[b-2bxn7mz0ea] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.cluster-container:hover[b-2bxn7mz0ea] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 6px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cluster-button[b-2bxn7mz0ea] {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black; /* Cambiado de white a black */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
}

.cluster-button:hover[b-2bxn7mz0ea] {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cluster-button:active[b-2bxn7mz0ea] {
    transform: scale(1.05);
}

.cluster-button-confirmed[b-2bxn7mz0ea] {
    background: rgba(34, 197, 94, 0.8) !important;
    border-color: rgba(34, 197, 94, 0.9) !important;
    color: white !important; /* Mantener blanco para contraste con fondo verde */
    box-shadow: 
        0 4px 16px rgba(34, 197, 94, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.cluster-button-confirmed:hover[b-2bxn7mz0ea] {
    background: rgba(34, 197, 94, 0.9) !important;
    border-color: rgba(34, 197, 94, 1) !important;
    box-shadow: 
        0 6px 20px rgba(34, 197, 94, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* ==== RESPONSIVE DESIGN ==== */
@media (max-width: 640px) {
    .main-join-button-enhanced[b-2bxn7mz0ea] {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .main-join-button-enhanced svg[b-2bxn7mz0ea] {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .main-label-enhanced[b-2bxn7mz0ea] {
        font-size: 0.8rem;
    }
    
    .cluster-container[b-2bxn7mz0ea] {
        padding: 0.75rem;
        gap: 0.5rem;
        border-radius: 1.25rem;
    }
    
    .cluster-button[b-2bxn7mz0ea] {
        width: 2rem;
        height: 2rem;
    }
    
    .cluster-button svg[b-2bxn7mz0ea] {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    .corner-cluster-left[b-2bxn7mz0ea] {
        bottom: 1rem;
        left: 1rem;
    }
    
    .corner-cluster-right[b-2bxn7mz0ea] {
        bottom: 1rem;
        right: 1rem;
    }
}

@media (max-width: 480px) {
    .main-join-button-enhanced[b-2bxn7mz0ea] {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .main-join-button-enhanced svg[b-2bxn7mz0ea] {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .main-label-enhanced[b-2bxn7mz0ea] {
        font-size: 0.75rem;
    }
    
    .cluster-container[b-2bxn7mz0ea] {
        padding: 0.5rem;
        gap: 0.375rem;
        border-radius: 1rem;
    }
    
    .cluster-button[b-2bxn7mz0ea] {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .cluster-button svg[b-2bxn7mz0ea] {
        width: 0.75rem;
        height: 0.75rem;
    }
    
    .corner-cluster-left[b-2bxn7mz0ea] {
        bottom: 0.75rem;
        left: 0.75rem;
    }
    
    .corner-cluster-right[b-2bxn7mz0ea] {
        bottom: 0.75rem;
        right: 0.75rem;
    }
}

/* ==== MUSIC PLAYER BUTTON STYLES ==== */

.music-player-button[b-2bxn7mz0ea] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(167, 139, 250, 0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    padding: 0.875rem 1.75rem;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 24px rgba(139, 92, 246, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: musicPulseGlow-b-2bxn7mz0ea 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    z-index: 25;
    -webkit-tap-highlight-color: transparent;
}

.music-player-button[b-2bxn7mz0ea]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.music-player-button:hover[b-2bxn7mz0ea]::before {
    opacity: 1;
}

.music-player-button:hover[b-2bxn7mz0ea] {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 12px 32px rgba(139, 92, 246, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(167, 139, 250, 1));
}

.music-player-button:active[b-2bxn7mz0ea] {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 6px 20px rgba(139, 92, 246, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.18);
}

.music-player-button svg[b-2bxn7mz0ea] {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* --- Modern inner layout for music button --- */
.music-player-button .music-icon[b-2bxn7mz0ea] {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.15) 40%, rgba(255,255,255,0.08) 100%);
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 14px rgba(139,92,246,0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.music-player-button.playing .music-icon[b-2bxn7mz0ea] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 20px rgba(167,139,250,0.45), 0 0 0 3px rgba(139,92,246,0.18);
}

.music-player-button .play-icon[b-2bxn7mz0ea] {
    width: 18px;
    height: 18px;
    color: #ffffff;
    transition: transform 220ms ease;
}

.music-player-button:hover .play-icon[b-2bxn7mz0ea] {
    transform: scale(1.08);
}

.music-player-button .music-label[b-2bxn7mz0ea] {
    font-weight: 600;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Equalizer bars inside icon */
.eq-bars[b-2bxn7mz0ea] {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
}

.eq-bar[b-2bxn7mz0ea] {
    width: 3px;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255,255,255,0.6);
    animation: eqPulse-b-2bxn7mz0ea 1.1s ease-in-out infinite;
}

.eq-bar:nth-child(1)[b-2bxn7mz0ea] { height: 5px; animation-delay: 0s; }
.eq-bar:nth-child(2)[b-2bxn7mz0ea] { height: 10px; animation-delay: 0.15s; }
.eq-bar:nth-child(3)[b-2bxn7mz0ea] { height: 14px; animation-delay: 0.3s; }
.eq-bar:nth-child(4)[b-2bxn7mz0ea] { height: 8px; animation-delay: 0.45s; }

@keyframes eqPulse-b-2bxn7mz0ea {
    0%, 100% { transform: scaleY(0.6); opacity: 0.8; }
    40% { transform: scaleY(1.25); opacity: 1; }
    60% { transform: scaleY(0.85); opacity: 0.9; }
}


/* Music button glow animation */
@keyframes musicPulseGlow-b-2bxn7mz0ea {
    0%, 100% {
        box-shadow: 
            0 8px 24px rgba(139, 92, 246, 0.35),
            0 2px 8px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 
            0 8px 32px rgba(139, 92, 246, 0.5),
            0 2px 12px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            0 0 0 4px rgba(139, 92, 246, 0.15);
    }
}

/* Mobile responsive styles for music button */
@media (max-width: 768px) {
    .music-player-button[b-2bxn7mz0ea] {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
    }
    
    .music-player-button svg[b-2bxn7mz0ea] {
        width: 1.125rem;
        height: 1.125rem;
    }
}

@media (max-width: 480px) {
    .music-player-button[b-2bxn7mz0ea] {
        padding: 0.625rem 1.25rem;
        font-size: 0.8rem;
    }
    
    .music-player-button svg[b-2bxn7mz0ea] {
        width: 1rem;
        height: 1rem;
    }
    
    .music-player-button span[b-2bxn7mz0ea] {
        font-size: 0.75rem;
    }
}

/* Reduced motion support for music button */
@media (prefers-reduced-motion: reduce) {
    .music-player-button[b-2bxn7mz0ea] {
        animation: none;
    }
    
    .music-player-button:hover[b-2bxn7mz0ea] {
        transform: none;
    }
    .eq-bar[b-2bxn7mz0ea] {
        animation: none;
    }
}

/* ==== NUEVA ESTRUCTURA DE DOS SECCIONES ==== */

/* Sección superior: Imagen con título */
.invitation-hero-section[b-2bxn7mz0ea] {
    position: relative;
    width: 100%;
    height: 70vh; /* 70% de la altura para la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Contenido del título en la sección hero */
.invitation-hero-content[b-2bxn7mz0ea] {
    position: relative;
    z-index: 20;
    text-align: center;
    padding: 2rem;
}

/* Título principal en la sección de imagen */
.invitation-title-hero[b-2bxn7mz0ea] {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    text-align: center;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* Múltiples capas de sombra para mejor contraste */
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.4),
        2px 2px 0 rgba(0, 0, 0, 0.9),
        -2px -2px 0 rgba(0, 0, 0, 0.9),
        2px -2px 0 rgba(0, 0, 0, 0.9),
        -2px 2px 0 rgba(0, 0, 0, 0.9);
    /* Respaldo con fondo semi-transparente */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Sección inferior: Contenido blanco */
.invitation-content-section[b-2bxn7mz0ea] {
    position: relative;
    width: 100%;
    height: 30vh; /* 30% de la altura para el contenido */
    background: white;
    display: flex;
    align-items: flex-start; /* Cambio de center a flex-start para alinear arriba */
    justify-content: center;
    padding: 1rem 2rem 2rem 2rem; /* Reducido padding superior de 2rem a 1rem */
    box-sizing: border-box;
}

/* Contenedor del contenido blanco */
.invitation-content-white[b-2bxn7mz0ea] {
    width: 100%;
    max-width: 600px;
    text-align: center;
}

/* Descripción en la sección blanca */
.invitation-description-white[b-2bxn7mz0ea] {
    font-family: 'Playfair Display', 'Crimson Text', 'Lora', serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: #1f2937; /* Texto negro/gris oscuro */
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    text-align: center;
    font-style: italic;
    letter-spacing: 0.3px;
}

/* Fecha en la sección blanca */
.invitation-date-white[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #374151; /* Gris oscuro */
    margin-bottom: 1rem;
}

.invitation-date-white svg[b-2bxn7mz0ea] {
    color: #6b7280; /* Gris medio para el icono */
}


/* Responsive para móviles */
@media (max-width: 768px) {
    .invitation-hero-section[b-2bxn7mz0ea] {
        height: 65vh; /* Ajustar proporción en móviles */
    }
    
    .invitation-content-section[b-2bxn7mz0ea] {
        height: 35vh;
        padding: 0.75rem 1.5rem 1.5rem 1.5rem; /* Reducido padding superior */
    }
    
    .invitation-title-hero[b-2bxn7mz0ea] {
        font-size: 2.5rem;
        padding: 1rem 1.5rem;
    }
    
    .invitation-description-white[b-2bxn7mz0ea] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .invitation-hero-section[b-2bxn7mz0ea] {
        height: 60vh;
    }
    
    .invitation-content-section[b-2bxn7mz0ea] {
        height: 40vh;
        padding: 0.5rem 1rem 1rem 1rem; /* Reducido padding superior */
    }
    
    .invitation-title-hero[b-2bxn7mz0ea] {
        font-size: 2rem;
        padding: 0.75rem 1rem;
    }
    
    .invitation-description-white[b-2bxn7mz0ea] {
        font-size: 0.9rem;
    }
    
    .invitation-date-white[b-2bxn7mz0ea] {
        font-size: 0.875rem;
    }
}
/* ===== ESTILOS ACTUALIZADOS PARA ESTRUCTURA DE 3 SECCIONES ===== */

/* Título al pie de la primera sección */
.invitation-title-bottom[b-2bxn7mz0ea] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    text-align: center;
    width: 90%;
}

.invitation-title-elegant[b-2bxn7mz0ea] {
    font-family: 'Allura', 'Dancing Script', 'Great Vibes', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    color: white;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9),
                 2px 2px 4px rgba(0, 0, 0, 0.8),
                 1px 1px 2px rgba(0, 0, 0, 0.7),
                 0 0 15px rgba(0, 0, 0, 0.6);
    margin: 0;
    line-height: 1.1;
    letter-spacing: 1px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
}

/* Actualizar alturas para 3 secciones */
.invitation-hero-section[b-2bxn7mz0ea] {
    height: 70vh !important;
}

.invitation-content-section[b-2bxn7mz0ea] {
    height: 30vh !important;
    padding: 1.5rem !important;
}

/* Responsive para móviles - 3 secciones */
@media (max-width: 768px) {
    .invitation-hero-section[b-2bxn7mz0ea] {
        height: 70vh !important;
    }
    
    .invitation-content-section[b-2bxn7mz0ea] {
        height: 30vh !important;
        padding: 1rem !important;
    }
    
    .invitation-title-elegant[b-2bxn7mz0ea] {
        font-size: 2.8rem;
        bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .invitation-hero-section[b-2bxn7mz0ea] {
        height: 70vh !important;
    }
    
    .invitation-content-section[b-2bxn7mz0ea] {
        height: 30vh !important;
        padding: 0.75rem !important;
    }
    
    .invitation-title-elegant[b-2bxn7mz0ea] {
        font-size: 2.2rem;
        bottom: 1rem;
    }
}
/* Contenedor inline para el botón de música (se oculta en móviles) */
.music-inline-container[b-2bxn7mz0ea] {
    display: flex;
}

/* Contenedor FAB flotante para música (visible en móviles, oculto en pantallas grandes) */
.music-fab-container[b-2bxn7mz0ea] {
    display: none;
}

@media (max-width: 768px) {
    .music-inline-container[b-2bxn7mz0ea] {
        display: none;
    }
    .music-fab-container[b-2bxn7mz0ea] {
        display: block;
    }
}

@media (min-width: 769px) {
    .music-fab-container[b-2bxn7mz0ea] {
        display: none;
    }
}

/* Estilo del botón FAB de música */
.music-fab[b-2bxn7mz0ea] {
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(167, 139, 250, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.45), inset 0 1px 0 rgba(255,255,255,0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.music-fab:hover[b-2bxn7mz0ea] {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.55), inset 0 1px 0 rgba(255,255,255,0.45);
}

.music-fab.playing[b-2bxn7mz0ea] {
    box-shadow: 0 10px 24px rgba(167, 139, 250, 0.55), 0 0 0 3px rgba(139, 92, 246, 0.18), inset 0 1px 0 rgba(255,255,255,0.45);
}

.music-fab .play-icon[b-2bxn7mz0ea] {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}

.music-fab .eq-bars[b-2bxn7mz0ea] {
    height: 14px;
    gap: 2px;
}

.music-fab .eq-bar[b-2bxn7mz0ea] {
    width: 2px;
}

/* =====================
   Ubicación (Location) - Diseño profesional
   ===================== */

.location-header .location-title[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
}

.location-header .location-title h2[b-2bxn7mz0ea] {
    margin: 0;
}

.location-header .location-divider[b-2bxn7mz0ea] {
    height: 1px;
    margin-top: 0.75rem;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    position: relative;
    overflow: hidden;
}

.location-header .location-divider[b-2bxn7mz0ea]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
    animation: dividerSweep-b-2bxn7mz0ea 2.4s ease-in-out infinite;
}

@keyframes dividerSweep-b-2bxn7mz0ea {
    0% { transform: translateX(-100%); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateX(350%); opacity: 0; }
}

.location-grid[b-2bxn7mz0ea] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .location-grid[b-2bxn7mz0ea] { grid-template-columns: 1fr 1fr; }
}

.location-card[b-2bxn7mz0ea] {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
    animation: locationFadeUp-b-2bxn7mz0ea 600ms ease both;
}

.location-card:hover[b-2bxn7mz0ea] {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.location-grid .location-card:nth-child(1)[b-2bxn7mz0ea] { animation-delay: 120ms; }
.location-grid .location-card:nth-child(2)[b-2bxn7mz0ea] { animation-delay: 240ms; }
.location-grid .location-card:nth-child(3)[b-2bxn7mz0ea] { animation-delay: 360ms; }

.location-card-header[b-2bxn7mz0ea] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.location-icon[b-2bxn7mz0ea] {
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.95);
}

.location-label[b-2bxn7mz0ea] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.location-value[b-2bxn7mz0ea] {
    color: #fff;
    font-size: 1rem;
}

.location-cta[b-2bxn7mz0ea] { grid-column: 1 / -1; }

.maps-cta[b-2bxn7mz0ea] {
    display: block;
    width: 100%;
    border-radius: 14px;
    padding: 0.9rem 1.25rem;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease, background 250ms ease;
    animation: locationFadeUp-b-2bxn7mz0ea 600ms ease 360ms both;
}

.maps-cta:hover[b-2bxn7mz0ea] {
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.1));
}

.cta-content[b-2bxn7mz0ea] { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; }
.cta-icon[b-2bxn7mz0ea] { width: 20px; height: 20px; }
.cta-text[b-2bxn7mz0ea] { font-weight: 600; letter-spacing: 0.02em; }

@keyframes locationFadeUp-b-2bxn7mz0ea {
    0% { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .maps-cta[b-2bxn7mz0ea],
    .location-card[b-2bxn7mz0ea],
    .location-header .location-divider[b-2bxn7mz0ea]::after { animation: none; }
    .maps-cta[b-2bxn7mz0ea],
    .location-card[b-2bxn7mz0ea] { transition: none; }
}

/* =====================
   Secciones genéricas (headers, tarjetas, divisor animado)
   Aplicable a Dress Code, Cuentas, RSVP, etc.
   ===================== */

.section-header .section-divider-animated[b-2bxn7mz0ea] {
    height: 1px;
    margin-top: 0.75rem;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
    position: relative;
    overflow: hidden;
}

.section-header .section-divider-animated[b-2bxn7mz0ea]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
    animation: dividerSweep-b-2bxn7mz0ea 2.4s ease-in-out infinite;
}

.elegant-card[b-2bxn7mz0ea] {
    transition: transform 250ms ease, box-shadow 250ms ease, background 250ms ease, border-color 250ms ease;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.elegant-card:hover[b-2bxn7mz0ea] {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .section-header .section-divider-animated[b-2bxn7mz0ea]::after { animation: none; }
    .elegant-card[b-2bxn7mz0ea] { transition: none; }
}
/* /Pages/Participant/ParticipantEvent.razor.rz.scp.css */
/* Fix for mobile viewport height issues, especially iOS Safari */
.mobile-full-height[b-2qy9emxrh3] {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for modern browsers */
    min-height: -webkit-fill-available; /* iOS Safari fallback */
    /* Ensure content can scroll if needed */
    overflow-y: auto;
    overflow-x: hidden;
}

.mobile-background-image[b-2qy9emxrh3] {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* Additional iOS Safari fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Ensure proper background display on all devices */
.background-container[b-2qy9emxrh3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    /* Force hardware acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Ensure content is above background */
.relative.z-10[b-2qy9emxrh3] {
    z-index: 10 !important;
    position: relative !important;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .mobile-full-height[b-2qy9emxrh3] {
        min-height: -webkit-fill-available;
    }
    
    .mobile-background-image[b-2qy9emxrh3] {
        min-height: -webkit-fill-available;
    }
}

/* Additional mobile optimizations */
    @media screen and (max-width: 768px) {
        .mobile-full-height[b-2qy9emxrh3] {
            min-height: 100vh;
            min-height: 100dvh;
            min-height: -webkit-fill-available;
            /* Ensure proper scrolling on mobile */
            overflow-y: auto;
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        
        /* Ensure content container has proper spacing */
        .mobile-full-height > div[b-2qy9emxrh3] {
            min-height: calc(100vh - 2rem);
            min-height: calc(100dvh - 2rem);
            padding-top: max(1rem, env(safe-area-inset-top, 0px));
            padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        }
        
        .mobile-background-image[b-2qy9emxrh3] {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            height: -webkit-fill-available;
            object-fit: cover;
            z-index: -1;
        }
    }
    
    /* Chrome Mobile specific fixes */
    @media screen and (max-width: 768px) {
        /* Force Chrome to respect viewport height */
        .mobile-full-height[b-2qy9emxrh3] {
            height: 100vh !important;
            height: 100dvh !important;
        }
        
        /* Chrome Android background fix */
        .background-container[b-2qy9emxrh3] {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            height: 100dvh !important;
            z-index: -1 !important;
        }
        
        .mobile-background-image[b-2qy9emxrh3] {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center !important;
            /* Chrome specific optimizations */
            will-change: transform;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-perspective: 1000px;
            perspective: 1000px;
        }
    }
    
    /* Chrome Android address bar compensation */
    @supports (-webkit-appearance: none) {
        @media screen and (max-width: 768px) {
            .mobile-full-height[b-2qy9emxrh3] {
                min-height: calc(100vh - env(keyboard-inset-height, 0px));
                min-height: calc(100dvh - env(keyboard-inset-height, 0px));
            }
        }
    }
    
    /* Force Chrome to display background images */
    @media screen and (max-width: 768px) {
        .background-container img[b-2qy9emxrh3] {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            /* Force GPU acceleration */
            transform: translate3d(0, 0, 0) !important;
            -webkit-transform: translate3d(0, 0, 0) !important;
        }
        
        /* Chrome specific container fixes */
        .background-container[b-2qy9emxrh3] {
            overflow: hidden !important;
            background: transparent !important;
            z-index: -10 !important;
        }
        
        /* Ensure image loads on Chrome */
        img[src][b-2qy9emxrh3] {
            content-visibility: visible !important;
            contain: none !important;
        }
        
        /* Force background image to be behind everything */
        .mobile-background-image[b-2qy9emxrh3] {
            z-index: -10 !important;
        }
    }
    
    /* Chrome Android specific media query */
    @media screen and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
        .mobile-background-image[b-2qy9emxrh3] {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            object-fit: cover !important;
            z-index: -1 !important;
            transform: translateZ(0) !important;
            -webkit-transform: translateZ(0) !important;
        }
    }

@keyframes scale-up-b-2qy9emxrh3 {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce-in-b-2qy9emxrh3 {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-scale-up[b-2qy9emxrh3] {
    animation: scale-up-b-2qy9emxrh3 0.2s ease-out;
}

.animate-bounce-in[b-2qy9emxrh3] {
    animation: bounce-in-b-2qy9emxrh3 0.4s ease-out;
}

/* Hover effects for reaction buttons */
.reaction-button:hover[b-2qy9emxrh3] {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

/* Pulse animation for active reactions */
.reaction-active[b-2qy9emxrh3] {
    animation: pulse-b-2qy9emxrh3 1s infinite;
}

@keyframes pulse-b-2qy9emxrh3 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* ==== ULTRA-COMPACT STICKY HEADER ==== */

/* Sticky Compact Header */
.sticky-header[b-2qy9emxrh3] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
}

.sticky-header-content[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.75rem;
    max-width: 100%;
    margin: 0 auto;
    gap: 0.5rem;
}

/* Header Back Button - Compact */
.header-back-btn[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(243, 244, 246, 0.8);
    border-radius: 50%;
    color: #374151;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.header-back-btn svg[b-2qy9emxrh3] {
    width: 16px;
    height: 16px;
}

.header-back-btn:hover[b-2qy9emxrh3] {
    background: rgba(229, 231, 235, 0.9);
}

.header-back-btn:active[b-2qy9emxrh3] {
    transform: scale(0.95);
}

/* Header Logo - Compact */
.header-logo[b-2qy9emxrh3] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.5rem;
    overflow: hidden;
}

.header-logo img[b-2qy9emxrh3] {
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* Header Badge - Compact */
.header-badge[b-2qy9emxrh3] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-badge img[b-2qy9emxrh3] {
    width: 28px !important;
    height: 28px !important;
}

.header-badge > div[b-2qy9emxrh3] {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.625rem !important;
}

.badge[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.badge svg[b-2qy9emxrh3] {
    width: 10px;
    height: 10px;
}

.badge-private[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.badge-anonymous[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.badge:hover[b-2qy9emxrh3] {
    transform: scale(1.05);
}

/* ============================================
   DISCRETE ACCOUNT CHIP
   ============================================ */

.account-chip-container[b-2qy9emxrh3] {
    display: flex;
    justify-content: center;
    margin: 0.25rem 0 0.5rem 0;
}

/* ============================================
   MAIN ACTION BUTTONS - Direct & Clear
   ============================================ */

.action-buttons-container[b-2qy9emxrh3] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    margin: 0.5rem 0.5rem 0.75rem 0.5rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.action-btn[b-2qy9emxrh3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

.action-btn-icon[b-2qy9emxrh3] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Photo Button - Primary */
.action-btn-photo[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.action-btn-photo:hover[b-2qy9emxrh3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
}

.action-btn-photo:active[b-2qy9emxrh3] {
    transform: translateY(0);
}

/* Message Button - Secondary */
.action-btn-message[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.action-btn-message:hover[b-2qy9emxrh3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.action-btn-message:active[b-2qy9emxrh3] {
    transform: translateY(0);
}

/* Message Input Section */
.message-input-section[b-2qy9emxrh3] {
    margin: 0.5rem;
    padding: 0.75rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    animation: slideDown-b-2qy9emxrh3 0.3s ease-out;
}

.message-input-header[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.message-input-title[b-2qy9emxrh3] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.message-input-close[b-2qy9emxrh3] {
    width: 28px;
    height: 28px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
    padding: 0;
}

.message-input-close:hover[b-2qy9emxrh3] {
    background: #e5e7eb;
    color: #374151;
}

.message-input-close svg[b-2qy9emxrh3] {
    width: 16px;
    height: 16px;
}

@keyframes slideDown-b-2qy9emxrh3 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 360px) {
    .action-buttons-container[b-2qy9emxrh3] {
        gap: 0.5rem;
        padding: 0.5rem;
        margin: 0.375rem;
    }
    
    .action-btn[b-2qy9emxrh3] {
        padding: 0.75rem 0.625rem;
        font-size: 0.8125rem;
        gap: 0.375rem;
    }
    
    .action-btn-icon[b-2qy9emxrh3] {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   DARK MODE - ACTION BUTTONS
   ============================================ */

[data-theme="dark"] .message-input-section[b-2qy9emxrh3] {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .message-input-header[b-2qy9emxrh3] {
    border-bottom-color: #374151;
}

[data-theme="dark"] .message-input-title[b-2qy9emxrh3] {
    color: #f3f4f6;
}

[data-theme="dark"] .message-input-close[b-2qy9emxrh3] {
    background: #374151;
    color: #9ca3af;
}

[data-theme="dark"] .message-input-close:hover[b-2qy9emxrh3] {
    background: #4b5563;
    color: #e5e7eb;
}

.account-chip[b-2qy9emxrh3] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.account-chip:hover[b-2qy9emxrh3] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.account-chip:active[b-2qy9emxrh3] {
    transform: scale(0.98);
}

.account-chip svg[b-2qy9emxrh3] {
    flex-shrink: 0;
}

/* ============================================
   DARK MODE - HEADER
   ============================================ */

[data-theme="dark"] .sticky-header[b-2qy9emxrh3] {
    background: rgba(17, 24, 39, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .header-back-btn[b-2qy9emxrh3] {
    background: rgba(55, 65, 81, 0.8);
    color: #e5e7eb;
}

[data-theme="dark"] .header-back-btn:hover[b-2qy9emxrh3] {
    background: rgba(75, 85, 99, 0.9);
}

[data-theme="dark"] .account-chip[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #059669, #047857);
}

/* ==== COMPACT EXPANDABLE HERO CARD ==== */

.hero-card[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    margin: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.4s ease-out;
}

.hero-card[b-2qy9emxrh3]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.hero-card:hover[b-2qy9emxrh3]::before {
    opacity: 1.3;
}

.hero-card:active[b-2qy9emxrh3] {
    transform: scale(0.99);
}

.hero-card-content[b-2qy9emxrh3] {
    padding: 1rem 1rem;
    position: relative;
    z-index: 1;
}

/* Compact Row (Collapsed State) */
.hero-compact-row[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* Compact Title */
.hero-compact-title[b-2qy9emxrh3] {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-width: 0;
}

/* Compact Social Icons */
.hero-compact-social[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.compact-social-icon[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    flex-shrink: 0;
}

.compact-social-icon:hover[b-2qy9emxrh3] {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.compact-social-icon:active[b-2qy9emxrh3] {
    transform: scale(1.05);
}

/* Specific Social Media Colors */
.compact-social-icon.facebook:hover[b-2qy9emxrh3] {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.4), rgba(66, 165, 245, 0.4));
}

.compact-social-icon.instagram:hover[b-2qy9emxrh3] {
    background: linear-gradient(135deg, rgba(228, 64, 95, 0.4), rgba(247, 119, 55, 0.4));
}

.compact-social-icon.twitter:hover[b-2qy9emxrh3] {
    background: linear-gradient(135deg, rgba(29, 161, 242, 0.4), rgba(13, 139, 217, 0.4));
}

.compact-social-icon.youtube:hover[b-2qy9emxrh3] {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.4), rgba(204, 0, 0, 0.4));
}

.compact-social-icon.website:hover[b-2qy9emxrh3] {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.4), rgba(73, 80, 87, 0.4));
}

/* Expand/Collapse Button */
.hero-expand-btn[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    cursor: pointer;
}

.hero-expand-btn:hover[b-2qy9emxrh3] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.expand-icon[b-2qy9emxrh3] {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expand-icon.rotated[b-2qy9emxrh3] {
    transform: rotate(180deg);
}

/* Expanded Content */
.hero-expanded-content[b-2qy9emxrh3] {
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

.hero-expanded-content.visible[b-2qy9emxrh3] {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.875rem;
}

.hero-expanded-description[b-2qy9emxrh3] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin: 0;
}

/* Expanded State Card */
.hero-card.expanded[b-2qy9emxrh3] {
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

/* Responsive Design */
@media (max-width: 640px) {
    .hero-card[b-2qy9emxrh3] {
        margin: 0.375rem 0.5rem;
        margin-bottom: 0.875rem;
        border-radius: 14px;
    }
    
    .hero-card-content[b-2qy9emxrh3] {
        padding: 0.875rem 0.875rem;
    }
    
    .hero-compact-row[b-2qy9emxrh3] {
        gap: 0.5rem;
    }
    
    .hero-compact-title[b-2qy9emxrh3] {
        font-size: 1rem;
    }
    
    .hero-compact-social[b-2qy9emxrh3] {
        gap: 0.3rem;
    }
    
    .compact-social-icon[b-2qy9emxrh3] {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }
    
    .hero-expand-btn[b-2qy9emxrh3] {
        width: 26px;
        height: 26px;
    }
    
    .expand-icon[b-2qy9emxrh3] {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    .hero-expanded-description[b-2qy9emxrh3] {
        font-size: 0.85rem;
    }
    
    .hero-expanded-content.visible[b-2qy9emxrh3] {
        margin-top: 0.75rem;
    }
}

@media (max-width: 480px) {
    .hero-card[b-2qy9emxrh3] {
        margin: 0.25rem 0.375rem;
        margin-bottom: 0.75rem;
        border-radius: 12px;
    }
    
    .hero-card-content[b-2qy9emxrh3] {
        padding: 0.75rem;
    }
    
    .hero-compact-row[b-2qy9emxrh3] {
        gap: 0.375rem;
    }
    
    .hero-compact-title[b-2qy9emxrh3] {
        font-size: 0.95rem;
        -webkit-line-clamp: 2;
    }
    
    .hero-compact-social[b-2qy9emxrh3] {
        gap: 0.25rem;
    }
    
    .compact-social-icon[b-2qy9emxrh3] {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
    
    .hero-expand-btn[b-2qy9emxrh3] {
        width: 24px;
        height: 24px;
    }
    
    .expand-icon[b-2qy9emxrh3] {
        width: 0.75rem;
        height: 0.75rem;
    }
    
    .hero-expanded-description[b-2qy9emxrh3] {
        font-size: 0.8125rem;
        line-height: 1.4;
    }
    
    .hero-expanded-content.visible[b-2qy9emxrh3] {
        margin-top: 0.625rem;
    }
}

/* Very compact for small screens */
@media (max-width: 360px) {
    .hero-card-content[b-2qy9emxrh3] {
        padding: 0.625rem;
    }
    
    .hero-compact-title[b-2qy9emxrh3] {
        font-size: 0.875rem;
    }
    
    .compact-social-icon[b-2qy9emxrh3] {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
    }
    
    .hero-expand-btn[b-2qy9emxrh3] {
        width: 22px;
        height: 22px;
    }
    
    .hero-expanded-description[b-2qy9emxrh3] {
        font-size: 0.75rem;
    }
}

/* ==== NUEVOS ESTILOS PARA INDICADORES DE ESTADO EN GALERÍA ==== */

/* Overlay para fotos en procesamiento/validación */
.photo-status-overlay[b-2qy9emxrh3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

/* Spinner para estado de procesamiento */
.photo-processing-spinner[b-2qy9emxrh3] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #fbbf24; /* yellow-400 */
    border-radius: 50%;
    animation: photoSpinnerRotate-b-2qy9emxrh3 1s linear infinite;
}

/* Spinner para estado de validación */
.photo-validating-spinner[b-2qy9emxrh3] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #3b82f6; /* blue-500 */
    border-radius: 50%;
    animation: photoSpinnerRotate-b-2qy9emxrh3 1s linear infinite;
}

@keyframes photoSpinnerRotate-b-2qy9emxrh3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Indicadores de estado compactos (esquina superior derecha) */
.photo-status-indicator[b-2qy9emxrh3] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Estado: Válido */
.photo-status-valid[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #10b981, #059669); /* green-500 to green-600 */
    color: white;
}

/* Estado: No válido */
.photo-status-invalid[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #ef4444, #dc2626); /* red-500 to red-600 */
    color: white;
}

/* Estado: Procesando */
.photo-status-processing[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #f59e0b, #d97706); /* amber-500 to amber-600 */
    color: white;
}

/* Estado: Validando */
.photo-status-validating[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #3b82f6, #2563eb); /* blue-500 to blue-600 */
    color: white;
}

/* Iconos dentro de los indicadores */
.photo-status-indicator svg[b-2qy9emxrh3] {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

/* Hover effects para los indicadores */
.photo-status-indicator:hover[b-2qy9emxrh3] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Responsive adjustments para móviles */
@media (max-width: 640px) {
    .photo-status-indicator[b-2qy9emxrh3] {
        width: 20px;
        height: 20px;
        top: 4px;
        right: 4px;
    }
    
    .photo-status-indicator svg[b-2qy9emxrh3] {
        width: 10px;
        height: 10px;
        stroke-width: 3;
    }
    
    .photo-processing-spinner[b-2qy9emxrh3],
    .photo-validating-spinner[b-2qy9emxrh3] {
        width: 24px;
        height: 24px;
        border-width: 2px;
    }
}

/* Animación de pulso para estados en progreso */
.photo-status-processing[b-2qy9emxrh3],
.photo-status-validating[b-2qy9emxrh3] {
    animation: statusPulse-b-2qy9emxrh3 2s ease-in-out infinite;
}

@keyframes statusPulse-b-2qy9emxrh3 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Tooltip para explicar el estado (opcional) */
.photo-status-indicator[title]:hover[b-2qy9emxrh3]::after {
    content: attr(title);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
}

/* Asegurar que el contenedor de la foto tenga position relative */
.photo-container[b-2qy9emxrh3] {
    position: relative;
    overflow: hidden;
}

/* Enhanced Tab Styles */
.tab-container[b-2qy9emxrh3] {
    position: relative;
    overflow: hidden;
}

.tab-indicator[b-2qy9emxrh3] {
    position: absolute;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px 2px 0 0;
}

/* Tab button enhancements */
.tab-button[b-2qy9emxrh3] {
    position: relative;
    overflow: hidden;
}

.tab-button[b-2qy9emxrh3]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.tab-button:hover[b-2qy9emxrh3]::before {
    left: 100%;
}

/* Upload area enhancements */
.upload-area[b-2qy9emxrh3] {
    position: relative;
    overflow: hidden;
}

.upload-area[b-2qy9emxrh3]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(236, 72, 153, 0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.3s ease;
    opacity: 0;
}

.upload-area:hover[b-2qy9emxrh3]::before {
    opacity: 1;
    animation: shimmer-b-2qy9emxrh3 1.5s ease-in-out infinite;
}

@keyframes shimmer-b-2qy9emxrh3 {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Camera button pulse effect */
.camera-button[b-2qy9emxrh3] {
    position: relative;
}

.camera-button[b-2qy9emxrh3]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.camera-button:active[b-2qy9emxrh3]::after {
    width: 100%;
    height: 100%;
}

/* Enhanced mobile tab styles */
@media (max-width: 640px) {
    .tab-button[b-2qy9emxrh3] {
        min-height: 60px;
        padding: 0.75rem 0.5rem;
    }
    
    .tab-button svg[b-2qy9emxrh3] {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .tab-button span[b-2qy9emxrh3] {
        font-size: 0.75rem;
        font-weight: 600;
    }
    
    /* Upload area mobile optimizations */
    .upload-area[b-2qy9emxrh3] {
        padding: 1.5rem 1rem;
        min-height: 200px;
    }
    
    .upload-area h3[b-2qy9emxrh3] {
        font-size: 1rem;
    }
    
    .upload-area p[b-2qy9emxrh3] {
        font-size: 0.875rem;
    }
    
    /* Camera button mobile styles */
    .camera-button[b-2qy9emxrh3] {
        padding: 1rem;
        font-size: 0.875rem;
        min-height: 56px;
    }
    
    .camera-button svg[b-2qy9emxrh3] {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .tab-button[b-2qy9emxrh3] {
        min-height: 56px;
        padding: 0.625rem 0.375rem;
    }
    
    .tab-button span[b-2qy9emxrh3] {
        font-size: 0.6875rem;
    }
    
    .upload-area[b-2qy9emxrh3] {
        padding: 1.25rem 0.75rem;
        min-height: 180px;
    }
    
    .camera-button[b-2qy9emxrh3] {
        padding: 0.875rem;
        min-height: 52px;
    }
}

/* ==== FILE SELECTION SUMMARY MOBILE FIXES ==== */

/* Files Selected Summary - Mobile Responsive */
.files-selected-summary[b-2qy9emxrh3] {
    /* Ensure single line layout */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem;
    padding: 0.75rem !important;
}

.files-selected-summary .flex[b-2qy9emxrh3] {
    /* Left side content */
    flex: 1 1 auto;
    min-width: 0; /* Allow text truncation */
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem;
}

.files-selected-summary .flex > div:last-child[b-2qy9emxrh3] {
    /* Text content container */
    flex: 1 1 auto;
    min-width: 0;
}

.files-selected-summary h3[b-2qy9emxrh3] {
    /* File count title */
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.files-selected-summary p[b-2qy9emxrh3] {
    /* Subtitle */
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.files-selected-summary label[b-2qy9emxrh3] {
    /* Add more button */
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
    min-width: fit-content;
}

.files-selected-summary .w-12[b-2qy9emxrh3] {
    /* Icon container */
    width: 2.5rem !important;
    height: 2.5rem !important;
    flex: 0 0 auto;
}

.files-selected-summary .w-12 svg[b-2qy9emxrh3] {
    /* Icon */
    width: 1rem !important;
    height: 1rem !important;
}

.files-selected-summary label svg[b-2qy9emxrh3] {
    /* Button icon */
    width: 0.875rem !important;
    height: 0.875rem !important;
    margin-right: 0.25rem !important;
}

/* Mobile specific adjustments */
@media (max-width: 640px) {
    .files-selected-summary[b-2qy9emxrh3] {
        padding: 0.625rem !important;
        gap: 0.375rem;
    }
    
    .files-selected-summary .flex[b-2qy9emxrh3] {
        gap: 0.5rem;
    }
    
    .files-selected-summary h3[b-2qy9emxrh3] {
        font-size: 0.8125rem !important;
    }
    
    .files-selected-summary p[b-2qy9emxrh3] {
        font-size: 0.6875rem !important;
    }
    
    .files-selected-summary label[b-2qy9emxrh3] {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.6875rem !important;
    }
    
    .files-selected-summary .w-12[b-2qy9emxrh3] {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .files-selected-summary .w-12 svg[b-2qy9emxrh3] {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .files-selected-summary[b-2qy9emxrh3] {
        padding: 0.5rem !important;
        gap: 0.25rem;
    }
    
    .files-selected-summary .flex[b-2qy9emxrh3] {
        gap: 0.375rem;
    }
    
    .files-selected-summary h3[b-2qy9emxrh3] {
        font-size: 0.75rem !important;
    }
    
    .files-selected-summary p[b-2qy9emxrh3] {
        font-size: 0.625rem !important;
    }
    
    .files-selected-summary label[b-2qy9emxrh3] {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.625rem !important;
    }
    
    .files-selected-summary label span[b-2qy9emxrh3] {
        display: flex;
        align-items: center;
        gap: 0.125rem;
    }
    
    .files-selected-summary .w-12[b-2qy9emxrh3] {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    
    .files-selected-summary .w-12 svg[b-2qy9emxrh3] {
        width: 0.75rem !important;
        height: 0.75rem !important;
    }
    
    .files-selected-summary label svg[b-2qy9emxrh3] {
        width: 0.75rem !important;
        height: 0.75rem !important;
        margin-right: 0.125rem !important;
    }
 }
 
 /* ==== UPLOAD MESSAGE RESPONSIVE STYLES ==== */
 
 /* Upload Message Container */
 .upload-message-container[b-2qy9emxrh3] {
     padding: 0.75rem !important;
     border-radius: 1rem !important;
     margin: 0.5rem 0 !important;
     transition: all 0.3s ease-in-out;
     animation: slideInFromTop-b-2qy9emxrh3 0.4s ease-out;
     position: relative;
     overflow: hidden;
 }
 
 .upload-message-container .flex[b-2qy9emxrh3] {
     align-items: flex-start !important;
     gap: 0.75rem;
 }
 
 .upload-message-container .flex-shrink-0[b-2qy9emxrh3] {
     flex: 0 0 auto;
     margin-top: 0.125rem; /* Align icon with first line of text */
 }
 
 .upload-message-container .flex-shrink-0 svg[b-2qy9emxrh3] {
     width: 1.125rem !important;
     height: 1.125rem !important;
 }
 
 .upload-message-container .ml-3[b-2qy9emxrh3] {
     flex: 1 1 auto;
     min-width: 0;
     margin-left: 0 !important; /* Reset margin, using gap instead */
 }
 
 .upload-message-container p[b-2qy9emxrh3] {
     font-size: 0.875rem !important;
     line-height: 1.4 !important;
     margin: 0 !important;
     word-wrap: break-word;
     overflow-wrap: break-word;
     hyphens: auto;
 }
 
 /* Auto-hide animation */
 .upload-message-fade-out[b-2qy9emxrh3] {
     animation: fadeOutSlideUp-b-2qy9emxrh3 0.5s ease-in-out forwards;
 }
 
 @keyframes slideInFromTop-b-2qy9emxrh3 {
     0% {
         opacity: 0;
         transform: translateY(-20px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeOutSlideUp-b-2qy9emxrh3 {
     0% {
         opacity: 1;
         transform: translateY(0);
         max-height: 200px;
     }
     100% {
         opacity: 0;
         transform: translateY(-20px);
         max-height: 0;
         padding-top: 0;
         padding-bottom: 0;
         margin-top: 0;
         margin-bottom: 0;
     }
 }
 
 /* Mobile specific adjustments */
 @media (max-width: 640px) {
     .upload-message-container[b-2qy9emxrh3] {
         padding: 0.625rem !important;
         border-radius: 0.75rem !important;
         margin: 0.375rem 0 !important;
     }
     
     .upload-message-container .flex[b-2qy9emxrh3] {
         gap: 0.5rem;
     }
     
     .upload-message-container .flex-shrink-0 svg[b-2qy9emxrh3] {
         width: 1rem !important;
         height: 1rem !important;
     }
     
     .upload-message-container p[b-2qy9emxrh3] {
         font-size: 0.8125rem !important;
         line-height: 1.3 !important;
     }
 }
 
 /* Extra small screens */
 @media (max-width: 480px) {
     .upload-message-container[b-2qy9emxrh3] {
         padding: 0.5rem !important;
         border-radius: 0.625rem !important;
         margin: 0.25rem 0 !important;
     }
     
     .upload-message-container .flex[b-2qy9emxrh3] {
         gap: 0.375rem;
     }
     
     .upload-message-container .flex-shrink-0 svg[b-2qy9emxrh3] {
         width: 0.875rem !important;
         height: 0.875rem !important;
     }
     
     .upload-message-container p[b-2qy9emxrh3] {
         font-size: 0.75rem !important;
         line-height: 1.25 !important;
     }
 }

@keyframes bounceIcon-b-2qy9emxrh3 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes ripple-b-2qy9emxrh3 {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.5;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

@keyframes pulseGlow-b-2qy9emxrh3 {
    0%, 100% {
        box-shadow: 
            0 8px 32px rgba(102, 126, 234, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    50% {
        box-shadow: 
            0 8px 40px rgba(102, 126, 234, 0.5),
            0 2px 12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }
}

@keyframes bounceIn-b-2qy9emxrh3 {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes pulse-b-2qy9emxrh3 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes bounce-b-2qy9emxrh3 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* ==== UPLOAD AREA PULSE ANIMATION ==== */

/* Pulse animation for upload area - smooth and inviting */
@keyframes uploadPulse-b-2qy9emxrh3 {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4), 
                    0 0 0 4px rgba(236, 72, 153, 0.1);
    }
}

/* ==== PROGRESSIVE UPLOAD SYSTEM (Facebook/Instagram Style) ==== */

/* Upload Queue Container */
.upload-queue-container[b-2qy9emxrh3] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1000;
    max-width: 320px;
    width: 100%;
    pointer-events: none;
}

.upload-queue-item[b-2qy9emxrh3] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 
                0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    pointer-events: auto;
    animation: slideInFromRight-b-2qy9emxrh3 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.3s ease;
}

.upload-queue-item:hover[b-2qy9emxrh3] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 
                0 4px 12px rgba(0, 0, 0, 0.1);
}

.upload-queue-item.completed[b-2qy9emxrh3] {
    animation: slideOutToRight-b-2qy9emxrh3 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.upload-queue-item.error[b-2qy9emxrh3] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(254, 242, 242, 0.98);
}

/* Upload Item Content */
.upload-item-content[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.upload-item-thumbnail[b-2qy9emxrh3] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: #f3f4f6;
}

.upload-item-thumbnail img[b-2qy9emxrh3],
.upload-item-thumbnail video[b-2qy9emxrh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-item-info[b-2qy9emxrh3] {
    flex: 1;
    min-width: 0;
}

.upload-item-name[b-2qy9emxrh3] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-item-status[b-2qy9emxrh3] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

.upload-item-actions[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Progress Bar Styles */
.upload-progress-container[b-2qy9emxrh3] {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(229, 231, 235, 0.8);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.upload-progress-bar[b-2qy9emxrh3] {
    height: 100%;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    border-radius: 2px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.upload-progress-bar[b-2qy9emxrh3]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: progressShimmer-b-2qy9emxrh3 1.5s ease-in-out infinite;
}

/* Circular Progress for Individual Items */
.upload-circular-progress[b-2qy9emxrh3] {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.upload-circular-progress svg[b-2qy9emxrh3] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.upload-circular-progress .progress-bg[b-2qy9emxrh3] {
    fill: none;
    stroke: rgba(229, 231, 235, 0.8);
    stroke-width: 3;
}

.upload-circular-progress .progress-fill[b-2qy9emxrh3] {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s ease;
}

.upload-circular-progress .progress-text[b-2qy9emxrh3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.625rem;
    font-weight: 600;
    color: #6b7280;
}

/* Status Icons */
.upload-status-icon[b-2qy9emxrh3] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.upload-status-icon.uploading[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    animation: pulse-b-2qy9emxrh3 2s ease-in-out infinite;
}

.upload-status-icon.completed[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.upload-status-icon.error[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.upload-status-icon.processing[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    animation: pulse-b-2qy9emxrh3 2s ease-in-out infinite;
}

/* Global Upload Indicator */
.global-upload-indicator[b-2qy9emxrh3] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    animation: slideInFromTop-b-2qy9emxrh3 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
}

.global-upload-indicator:hover[b-2qy9emxrh3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.global-upload-indicator.minimized[b-2qy9emxrh3] {
    padding: 0.5rem;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-upload-content[b-2qy9emxrh3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.global-upload-text[b-2qy9emxrh3] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.global-upload-subtext[b-2qy9emxrh3] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* Instant Preview Overlay */
.instant-preview-overlay[b-2qy9emxrh3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-2qy9emxrh3 0.3s ease;
    padding: 1rem;
}

.instant-preview-content[b-2qy9emxrh3] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: scaleIn-b-2qy9emxrh3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.instant-preview-image[b-2qy9emxrh3] {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 12px;
    object-fit: contain;
}

/* Compression Indicator */
.compression-indicator[b-2qy9emxrh3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.compression-indicator .compression-icon[b-2qy9emxrh3] {
    width: 12px;
    height: 12px;
    animation: spin-b-2qy9emxrh3 1s linear infinite;
}

/* Animations */
@keyframes slideInFromRight-b-2qy9emxrh3 {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutToRight-b-2qy9emxrh3 {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes slideInFromTop-b-2qy9emxrh3 {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes progressShimmer-b-2qy9emxrh3 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes scaleIn-b-2qy9emxrh3 {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn-b-2qy9emxrh3 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Animation utility classes */
.animate-fadeIn[b-2qy9emxrh3] {
    animation: fadeIn-b-2qy9emxrh3 0.3s ease-out forwards;
}

.animate-scaleIn[b-2qy9emxrh3] {
    animation: scaleIn-b-2qy9emxrh3 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes spin-b-2qy9emxrh3 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .upload-queue-container[b-2qy9emxrh3] {
        bottom: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
    }
    
    .upload-queue-item[b-2qy9emxrh3] {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        border-radius: 12px;
    }
    
    .upload-item-thumbnail[b-2qy9emxrh3] {
        width: 40px;
        height: 40px;
    }
    
    .upload-item-name[b-2qy9emxrh3] {
        font-size: 0.8125rem;
    }
    
    .upload-item-status[b-2qy9emxrh3] {
        font-size: 0.6875rem;
    }
    
    .global-upload-indicator[b-2qy9emxrh3] {
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.5rem 0.75rem;
    }
    
    .global-upload-text[b-2qy9emxrh3] {
        font-size: 0.8125rem;
    }
    
    .global-upload-subtext[b-2qy9emxrh3] {
        font-size: 0.6875rem;
    }
    
    .instant-preview-content[b-2qy9emxrh3] {
        padding: 1rem;
        border-radius: 12px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .upload-queue-item[b-2qy9emxrh3],
    .global-upload-indicator[b-2qy9emxrh3],
    .instant-preview-overlay[b-2qy9emxrh3],
    .instant-preview-content[b-2qy9emxrh3] {
        animation: none;
    }
    
    .upload-progress-bar[b-2qy9emxrh3]::after,
    .upload-status-icon.uploading[b-2qy9emxrh3],
    .upload-status-icon.processing[b-2qy9emxrh3],
    .compression-indicator .compression-icon[b-2qy9emxrh3] {
        animation: none;
    }
}

/* Icon bounce animation */
@keyframes iconBounce-b-2qy9emxrh3 {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-8px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-4px);
    }
}

/* Shimmer effect for text */
@keyframes textShimmer-b-2qy9emxrh3 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

/* Glow pulse for the icon container */
@keyframes glowPulse-b-2qy9emxrh3 {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
    }
    50% {
        box-shadow: 0 8px 24px rgba(236, 72, 153, 0.6), 
                    0 0 0 8px rgba(236, 72, 153, 0.1);
    }
}

/* Upload area with pulse animation */
.upload-area-pulse[b-2qy9emxrh3] {
    animation: uploadPulse-b-2qy9emxrh3 2.5s ease-in-out infinite;
    transition: all 0.3s ease;
}

.upload-area-pulse:hover[b-2qy9emxrh3] {
    animation: none;
    transform: scale(1.03);
}

/* Icon with bounce animation */
.upload-icon-bounce[b-2qy9emxrh3] {
    animation: iconBounce-b-2qy9emxrh3 2s ease-in-out infinite, 
               glowPulse-b-2qy9emxrh3 2.5s ease-in-out infinite;
}

.upload-icon-bounce:hover[b-2qy9emxrh3] {
    animation: none;
}

/* Text shimmer effect */
.upload-text-shimmer[b-2qy9emxrh3] {
    animation: textShimmer-b-2qy9emxrh3 2.5s ease-in-out infinite;
}

/* ==== MESSAGE SECTION ANIMATIONS ==== */

/* Message header pulse animation */
@keyframes messagePulse-b-2qy9emxrh3 {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(147, 51, 234, 0.15);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 8px 32px rgba(147, 51, 234, 0.3), 
                    0 0 0 4px rgba(147, 51, 234, 0.08);
    }
}

/* Message icon float animation */
@keyframes messageIconFloat-b-2qy9emxrh3 {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    25% {
        transform: translateY(-6px) scale(1.05);
    }
    50% {
        transform: translateY(0) scale(1);
    }
    75% {
        transform: translateY(-3px) scale(1.02);
    }
}

/* Message text shimmer */
@keyframes messageShimmer-b-2qy9emxrh3 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* Apply message pulse animation */
.message-header-pulse[b-2qy9emxrh3] {
    animation: messagePulse-b-2qy9emxrh3 3s ease-in-out infinite;
}

/* Apply message icon float */
.message-icon-float[b-2qy9emxrh3] {
    animation: messageIconFloat-b-2qy9emxrh3 2.5s ease-in-out infinite;
}

/* Apply message text shimmer */
.message-text-shimmer[b-2qy9emxrh3] {
    animation: messageShimmer-b-2qy9emxrh3 3s ease-in-out infinite;
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .tab-button[b-2qy9emxrh3] {
        min-height: 48px;
        padding: 0.5rem;
    }
    
    .upload-area[b-2qy9emxrh3] {
        min-height: 160px;
        padding: 1rem;
    }
    
    .camera-button[b-2qy9emxrh3] {
        min-height: 48px;
        padding: 0.75rem;
    }
}

/* Compact spacing for mobile */
@media (max-width: 640px) {
    .space-y-3 > * + *[b-2qy9emxrh3] {
        margin-top: 0.5rem;
    }
    
    .space-y-4 > * + *[b-2qy9emxrh3] {
        margin-top: 0.75rem;
    }
    
    .mb-8[b-2qy9emxrh3] {
        margin-bottom: 1rem;
    }
    
    .py-12[b-2qy9emxrh3] {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Initial views styles */
.mobile-full-height[b-2qy9emxrh3] {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
}

.background-container[b-2qy9emxrh3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.mobile-background-image[b-2qy9emxrh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.event-info-overlay[b-2qy9emxrh3] {
    position: relative;
    z-index: 10;
}

/* Text shadows for better readability on background images */
.text-shadow-strong[b-2qy9emxrh3] {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
}

.text-shadow-medium[b-2qy9emxrh3] {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7), 0 0 6px rgba(0, 0, 0, 0.4);
}

/* Social media icons */
.social-icon[b-2qy9emxrh3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.social-icon:hover[b-2qy9emxrh3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.social-icon.facebook[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #1877f2, #42a5f5);
}

.social-icon.facebook:hover[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #166fe5, #1976d2);
}

.social-icon.instagram[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #e4405f, #f77737, #fccc63);
}

.social-icon.instagram:hover[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #d73447, #e91e63, #ff9800);
}

.social-icon.twitter[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #1da1f2, #0d8bd9);
}

.social-icon.twitter:hover[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #0d8bd9, #0277bd);
}

.social-icon.youtube[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #ff0000, #cc0000);
}

.social-icon.youtube:hover[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #cc0000, #b71c1c);
}

.social-icon.website[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #6c757d, #495057);
}

.social-icon.website:hover[b-2qy9emxrh3] {
    background: linear-gradient(135deg, #495057, #343a40);
}

/* Font display for headings */
.font-display[b-2qy9emxrh3] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Ensure participation options container has proper spacing */
@media screen and (max-width: 768px) {
    .bg-white\/95.backdrop-blur-sm.rounded-xl[b-2qy9emxrh3] {
        margin-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
        margin-top: 1rem !important;
    }
    
    /* Ensure main content container has proper top padding */
    .relative.z-10.flex-1.flex.flex-col.justify-start[b-2qy9emxrh3] {
        padding-top: max(2rem, env(safe-area-inset-top, 1rem)) !important;
    }
    
    /* Ensure logo container has proper spacing */
    .flex.items-center.justify-center.mx-auto.mb-6[b-2qy9emxrh3] {
        margin-top: max(2rem, env(safe-area-inset-top, 1rem)) !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Reduce logo size on mobile devices */
    .w-40.h-40[b-2qy9emxrh3] {
        width: 7rem !important;
        height: 7rem !important;
    }
    
    /* Fix for very small screens */
    @media screen and (max-height: 600px) {
        .mobile-full-height[b-2qy9emxrh3] {
            min-height: 100vh !important;
            height: auto !important;
        }
        
        .mobile-full-height > div[b-2qy9emxrh3] {
            min-height: auto !important;
            padding-top: 1rem !important;
            padding-bottom: 0.5rem !important;
        }
        
        /* Further reduce logo size on very small screens */
        .w-40.h-40[b-2qy9emxrh3] {
            width: 5rem !important;
            height: 5rem !important;
        }
        
        /* Reduce logo container spacing on very small screens */
        .flex.items-center.justify-center.mx-auto.mb-6[b-2qy9emxrh3] {
            margin-top: max(1rem, env(safe-area-inset-top, 0.5rem)) !important;
            margin-bottom: 1rem !important;
        }
    }
}