*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:
        Inter,
        Segoe UI,
        sans-serif;

    background:
        #050816;

    color:white;

    overflow-x:hidden;

    min-height:100vh;
}

/* =========================================
   NEBULA BACKGROUND
========================================= */

.nebula-bg{

    position:fixed;

    inset:0;

    z-index:-3;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(139,92,246,.25),
            transparent 40%
        ),

        radial-gradient(
            circle at 80% 30%,
            rgba(59,130,246,.25),
            transparent 40%
        ),

        radial-gradient(
            circle at 50% 90%,
            rgba(236,72,153,.15),
            transparent 40%
        ),

        #050816;
}

/* =========================================
   FLOATING PARTICLES
========================================= */

.particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;
}

.particles span{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:
        rgba(255,255,255,.5);

    animation:
        float 12s infinite linear;
}

.particles span:nth-child(1){

    left:10%;
    top:20%;
}

.particles span:nth-child(2){

    left:25%;
    top:75%;
}

.particles span:nth-child(3){

    left:55%;
    top:15%;
}

.particles span:nth-child(4){

    left:75%;
    top:60%;
}

.particles span:nth-child(5){

    left:90%;
    top:30%;
}

@keyframes float{

    0%{
        transform:
            translateY(0px);
        opacity:.3;
    }

    50%{
        transform:
            translateY(-40px);
        opacity:1;
    }

    100%{
        transform:
            translateY(0px);
        opacity:.3;
    }
}

/* =========================================
   CONTAINER
========================================= */

.studio-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:50px 25px;
}

/* =========================================
   HERO
========================================= */

.hero-section{

    text-align:center;

    margin-bottom:60px;
}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.1);

    color:#A78BFA;

    margin-bottom:25px;
}

.hero-title{

    font-size:72px;

    font-weight:900;

    letter-spacing:3px;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #3B82F6,
            #06B6D4
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-subtitle{

    margin-top:15px;

    color:#94A3B8;

    font-size:20px;
}

/* =========================================
   NEW EVENT BUTTON
========================================= */

.new-event-btn{

    margin-top:35px;

    border:none;

    padding:18px 36px;

    border-radius:999px;

    color:white;

    cursor:pointer;

    font-size:18px;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #3B82F6
        );

    transition:.35s;
}

.new-event-btn:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 0 50px
        rgba(139,92,246,.45);
}

/* =========================================
   STATS
========================================= */

.stats-row{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:50px;
}

.stat-pill{

    backdrop-filter:
        blur(30px);

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:999px;

    padding:16px 24px;

    color:#CBD5E1;

    min-width:180px;

    text-align:center;
}

.stat-pill span{

    display:block;

    font-size:28px;

    font-weight:800;

    color:white;
}

/* =========================================
   SEARCH
========================================= */

.search-section{

    margin-bottom:40px;

    text-align:center;
}

#searchBox{

    width:100%;

    max-width:700px;

    padding:18px 25px;

    border-radius:20px;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.05);

    backdrop-filter:
        blur(25px);

    color:white;

    font-size:18px;

    outline:none;
}

#searchBox:focus{

    border:
        1px solid #8B5CF6;

    box-shadow:
        0 0 40px
        rgba(139,92,246,.3);
}

/* =========================================
   EVENT GRID
========================================= */

.event-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px,1fr)
        );

    gap:30px;
}

/* =========================================
   EVENT CARD
========================================= */

.event-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    padding:30px;

    min-height:280px;

    backdrop-filter:
        blur(30px);

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    transition:.4s;
}

.event-card:hover{

    transform:
        translateY(-10px)
        scale(1.03);

    box-shadow:
        0 0 70px
        rgba(139,92,246,.25);
}

.event-type{

    color:#A78BFA;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:2px;
}

.event-card h3{

    margin-top:18px;

    font-size:28px;

    line-height:1.3;
}

.event-meta{

    margin-top:12px;

    color:#94A3B8;
}

.open-btn{

    margin-top:35px;

    width:100%;

    padding:14px;

    border:none;

    cursor:pointer;

    border-radius:14px;

    color:white;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #3B82F6
        );
}

/* =========================================
   MODAL
========================================= */

.modal-overlay{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:
        rgba(0,0,0,.75);

    backdrop-filter:
        blur(10px);

    z-index:1000;
}

.modal-overlay.show{

    display:flex;
}

.modal-card{

    width:90%;

    max-width:600px;

    padding:35px;

    border-radius:30px;

    background:
        rgba(15,23,42,.95);

    border:
        1px solid rgba(255,255,255,.08);
}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;
}

.close-btn{

    background:none;

    border:none;

    color:white;

    font-size:28px;

    cursor:pointer;
}

.form-group{

    margin-bottom:20px;
}

.form-group label{

    display:block;

    margin-bottom:8px;

    color:#CBD5E1;
}

.form-group input,
.form-group textarea,
.form-group select{

    width:100%;

    padding:15px;

    border-radius:12px;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.05);

    color:white;
}

.form-group textarea{

    height:120px;
}

.create-btn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    color:white;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #3B82F6
        );
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .hero-title{

        font-size:42px;
    }

    .hero-subtitle{

        font-size:16px;
    }

    .event-card{

        min-height:auto;
    }
}
/* =========================================
   EVENT PAGE SUPPORT
========================================= */

.container{

    max-width:1200px;

    margin:auto;

    padding:40px 20px;
}

.hero{

    text-align:center;

    margin-bottom:40px;
}

.logo{

    font-size:72px;

    font-weight:900;

    letter-spacing:2px;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #3B82F6,
            #06B6D4
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-tag{

    margin-top:15px;

    color:#94A3B8;

    font-size:18px;
}

.glass{

    backdrop-filter:blur(30px);

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:28px;
}

.btn{

    border:none;

    cursor:pointer;

    color:white;

    padding:16px 28px;

    border-radius:16px;

    font-size:16px;

    transition:.3s;
}

.btn-primary{

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #3B82F6
        );
}

.btn-secondary{

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.12);
}

.btn:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 0 35px
        rgba(139,92,246,.3);
}

.footer{

    text-align:center;

    margin-top:50px;

    color:#94A3B8;
}

/* =========================================
   GALLERY PAGE
========================================= */

.gallery-header{

    text-align:center;

    margin-bottom:40px;
}

.gallery-title{

    font-size:60px;

    font-weight:900;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #3B82F6,
            #06B6D4
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.gallery-subtitle{

    color:#94A3B8;

    margin-top:10px;

    font-size:18px;
}

.gallery-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px,1fr)
        );

    gap:25px;
}

.photo-card{

    overflow:hidden;

    border-radius:24px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(25px);

    transition:.35s;
}

.photo-card:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 0 40px
        rgba(139,92,246,.25);
}

.photo-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    display:block;
}

.photo-info{

    padding:18px;
}

.photo-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:15px;
}

.like-btn{

    border:none;

    cursor:pointer;

    color:white;

    padding:10px 18px;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #EC4899,
            #8B5CF6
        );
}

.download-btn{

    border:none;

    cursor:pointer;

    color:white;

    padding:10px 18px;

    border-radius:12px;

    background:
        rgba(255,255,255,.08);
}

.lightbox{

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.95);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;
}

.lightbox.show{

    display:flex;
}

.lightbox img{

    max-width:90vw;

    max-height:90vh;

    border-radius:20px;
}