*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0d0b12;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #ffffff;
}

#blazor-error-ui {
    display: none !important;
}


/* App Preloader */
.app-preloader {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, #1b1328 0%, #0d0b12 80%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    pointer-events: none;
    animation: fadeOutLoader 0.6s ease forwards;
    animation-delay: 10s; /* Safety fallback */
}

.loader-pulse-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-glow-ring {
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 105, 163, 0.4) 0%, rgba(255, 182, 193, 0.1) 60%, transparent 75%);
    animation: glowBreath 2.2s ease-in-out infinite alternate;
    filter: blur(8px);
}

.loader-spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ff65a3;
    border-right-color: #ffb6c1;
    animation: spinRing 1.4s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

.loader-spinner::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: #ffd166;
    border-left-color: #ff758c;
    animation: spinRingReverse 1s linear infinite;
}

.loader-gift,
.loader-heart {
    width: 32px;
    height: 32px;
    color: #ff65a3;
    animation: giftPulse 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    filter: drop-shadow(0 0 10px rgba(255, 105, 163, 0.8));
}

@keyframes spinRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinRingReverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes glowBreath {
    0% { transform: scale(0.85); opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 0.9; }
}

@keyframes giftPulse {
    0% { transform: scale(0.85); }
    50% { transform: scale(1.15) rotate(4deg); }
    75% { transform: scale(1.15) rotate(-4deg); }
    100% { transform: scale(0.85); }
}