@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #0a0a0a;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(255, 51, 102, 0.08), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(159, 29, 224, 0.08), transparent 40%);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.cf-wrapper {
    max-width: 600px;
    width: 100%;
    padding: 20px;
    text-align: center;
}

.cf-content {
    margin-bottom: 50px;
}

.cf-title {
    font-size: 28px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.cf-subtext {
    font-size: 16px;
    color: #aaaaaa;
    margin-bottom: 20px;
    line-height: 1.5;
}

.cf-subtext-small {
    font-size: 14px;
    color: #777777;
}

.cf-footer {
    font-size: 13px;
    color: #888888;
}

/* Spinner CSS */
.cf-spinner {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.love-spinner {
    width: 64px;
    height: 64px;
    animation: heartSpin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    filter: drop-shadow(0 4px 15px rgba(255, 51, 102, 0.5));
}

@keyframes heartSpin {
    0% {
        transform: rotateY(0deg) scale(1);
    }
    50% {
        transform: rotateY(180deg) scale(1.15);
    }
    100% {
        transform: rotateY(360deg) scale(1);
    }
}