body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f0f2f5; 
}

.modal-backdrop { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.6); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 50; 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease-in-out; 
}

.modal-content { 
    transform: scale(0.95); 
    transition: transform 0.3s ease-in-out; 
}

.modal-backdrop.active { 
    opacity: 1; 
    pointer-events: auto; 
}

.modal-backdrop.active .modal-content { 
    transform: scale(1); 
}

.raffle-number { 
    transition: all 0.2s ease-in-out; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    border: 2px solid transparent; 
}

.raffle-number:hover:not([disabled]) { 
    transform: translateY(-3px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.raffle-number.selected { 
    background-color: #3b82f6; 
    color: white; 
    border-color: #1d4ed8; 
}

.hidden { 
    display: none; 
}