/* Not Found Container */
    .not-found-container {
        text-align: center;
        padding: 40px 20px;
        background: rgba(10, 14, 41, 0.7);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(166, 126, 247, 0.2);
    }

    /* Cosmic Animation */
    .cosmic-animation {
        height: 200px;
        position: relative;
        margin: 0 auto 30px;
        width: 100%;
        max-width: 400px;
    }

    .planet {
        position: absolute;
        width: 120px;
        height: 120px;
        background: linear-gradient(135deg, #6c43d6 0%, #a67ef7 100%);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 30px rgba(166, 126, 247, 0.6);
        animation: float 6s ease-in-out infinite;
    }

    .planet:after {
        content: '';
        position: absolute;
        width: 100px;
        height: 30px;
        background: rgba(79, 46, 171, 0.5);
        border-radius: 50%;
        top: 30px;
        left: 10px;
        transform: rotate(-20deg);
    }

    .stars-small, .stars-medium, .stars-large {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .stars-small:before, .stars-medium:before, .stars-large:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            radial-gradient(2px 2px at 20px 30px, #fff, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 40px 70px, #a67ef7, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 60px 100px, #fff, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 80px 130px, #a67ef7, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 100px 160px, #fff, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 120px 190px, #a67ef7, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 140px 220px, #fff, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 160px 250px, #a67ef7, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 180px 280px, #fff, rgba(0,0,0,0)),
            radial-gradient(2px 2px at 200px 310px, #a67ef7, rgba(0,0,0,0));
        background-repeat: repeat;
        background-size: 200px 200px;
        opacity: 0.7;
        animation: twinkle 4s ease-in-out infinite alternate;
    }

    .stars-medium:before {
        background-image: 
            radial-gradient(3px 3px at 50px 80px, #fff, rgba(0,0,0,0)),
            radial-gradient(3px 3px at 90px 20px, #a67ef7, rgba(0,0,0,0)),
            radial-gradient(3px 3px at 130px 150px, #fff, rgba(0,0,0,0)),
            radial-gradient(3px 3px at 170px 60px, #a67ef7, rgba(0,0,0,0)),
            radial-gradient(3px 3px at 210px 180px, #fff, rgba(0,0,0,0));
        animation-delay: 0.5s;
    }

    .stars-large:before {
        background-image: 
            radial-gradient(4px 4px at 30px 120px, #fff, rgba(0,0,0,0)),
            radial-gradient(4px 4px at 70px 40px, #a67ef7, rgba(0,0,0,0)),
            radial-gradient(4px 4px at 110px 200px, #fff, rgba(0,0,0,0)),
            radial-gradient(4px 4px at 150px 90px, #a67ef7, rgba(0,0,0,0)),
            radial-gradient(4px 4px at 190px 160px, #fff, rgba(0,0,0,0));
        animation-delay: 1s;
    }

    .astronaut {
        position: absolute;
        font-size: 40px;
        top: 60%;
        right: 30%;
        animation: float 4s ease-in-out infinite;
        animation-delay: 0.5s;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
    }

    /* Not Found Content */
    .not-found-content h1 {
        font-size: 100px;
        margin: 0;
        background: linear-gradient(45deg, #c4b5fd, #a67ef7, #6c43d6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 20px rgba(166, 126, 247, 0.4);
    }

    .not-found-content h2 {
        font-size: 32px;
        margin: 0 0 20px;
        color: #d4bafd;
    }

    .not-found-content p {
        color: #c5c8d9;
        font-size: 18px;
        max-width: 600px;
        margin: 0 auto 20px;
        line-height: 1.6;
    }

    /* Cosmic Guide */
    .cosmic-guide {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
        margin: 40px 0;
    }

    .guide-item {
        background: rgba(166, 126, 247, 0.1);
        border-radius: 15px;
        padding: 20px;
        width: 180px;
        transition: all 0.3s ease;
        border: 1px solid rgba(166, 126, 247, 0.2);
    }

    .guide-item:hover {
        transform: translateY(-5px);
        background: rgba(166, 126, 247, 0.2);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .guide-icon {
        font-size: 40px;
        margin-bottom: 15px;
    }

    .guide-item h3 {
        font-size: 18px;
        margin: 0 0 10px;
        color: #d4bafd;
    }

    .guide-item p {
        font-size: 14px;
        margin: 0;
        color: #c5c8d9;
    }

    /* Cosmic Button */
    .cosmic-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: linear-gradient(90deg, #a67ef7, #6c43d6);
        padding: 15px 30px;
        border-radius: 30px;
        color: white;
        font-weight: 600;
        text-decoration: none;
        overflow: hidden;
        transition: all 0.3s ease;
        margin-top: 20px;
        box-shadow: 0 5px 15px rgba(108, 67, 214, 0.4);
    }

    .cosmic-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(108, 67, 214, 0.6);
    }

    .button-orb {
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        margin-left: 10px;
        position: relative;
        overflow: hidden;
    }

    .button-orb:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, transparent, rgba(255,255,255,0.8), transparent);
        animation: shine 1.5s infinite;
    }

    /* Animations */
    @keyframes float {
        0%, 100% { transform: translateY(0) translateX(-50%); }
        50% { transform: translateY(-10px) translateX(-50%); }
    }
    
    @keyframes twinkle {
        0% { opacity: 0.2; }
        100% { opacity: 1; }
    }
    
    @keyframes shine {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .cosmic-guide {
            flex-direction: column;
            align-items: center;
        }
        
        .guide-item {
            width: 100%;
            max-width: 250px;
        }
        
        .not-found-content h1 {
            font-size: 80px;
        }
        
        .not-found-content h2 {
            font-size: 28px;
        }
    }