/* NAVBAR */
body{
--nav-bg:rgba(15,18,35,.74);
--stroke:rgba(255,255,255,.07);
}


/* HEADER */

.lux-header{

position:sticky;

top:0;

z-index:3000;

/* top spacing pushes glass nav down */
padding:14px 16px 0;

margin-bottom:20px;

}



/* AUTH ONLY FULL-WIDTH UNDER NAV */

.auth-underbar{

position:absolute;

left:0;
right:0;

top:0;

height:100px;

background:
linear-gradient(
135deg,
#000816,
#02081b
);

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

box-shadow:
0 14px 34px rgba(0,0,0,.18);

z-index:0;

padding-top:30px;
}



/* MAIN GLASS NAV */

.lux-nav-wrap{

position:relative;

z-index:2;

max-width:1180px;

margin:auto;

padding:14px 22px;

display:grid;

grid-template-columns:auto 1fr auto;

align-items:center;

gap:28px;

background:var(--nav-bg);

backdrop-filter:blur(18px);

border:1px solid var(--stroke);

border-radius:24px;

box-shadow:
0 18px 45px rgba(0,0,0,.22);

}



/* BRAND */

.lux-brand{
display:flex;
align-items:center;
gap:10px;
font-weight:800;
color:white;
}

.lux-brand img{
height:30px;
}



/* CENTER NAV */

.lux-links{
display:flex;
justify-content:center;
gap:34px;
}

.lux-links a{
color:#eef;
font-weight:600;
text-decoration:none;
}



/* RIGHT ACTIONS */

.lux-actions{
display:flex;
align-items:center;
gap:14px;
margin-left:auto;
}

.ghost-btn{

display:flex;
align-items:center;

background:#ffffff08;

padding:10px 16px;

border-radius:999px;

color:white;

font-weight:600;

text-decoration:none;
}

.ghost-btn:hover{
background:#ffffff14;
}

.primary-pill{
background:
linear-gradient(
135deg,
#8c63ff,
#ff56cf
);
color:white;
padding:11px 18px;
border-radius:999px;
font-weight:800;
text-decoration:none;
}



.avatar-chip{
background:#ffffff08;
padding:10px 16px;
border-radius:999px;
color:white !important;
text-decoration:none;
}



/* DROPDOWN */

.dropdown{
position:relative;
}

.lux-dropdown{

position:absolute !important;

right:0 !important;

left:auto !important;

min-width:240px;

margin-top:12px !important;

background:#242845 !important;

border:none !important;

border-radius:16px;

padding:10px;

box-shadow:
0 18px 40px rgba(0,0,0,.28);

}

.lux-dropdown .dropdown-item{
color:white !important;
border-radius:10px;
padding:11px 14px;
}

.lux-dropdown .dropdown-item:hover{
background:#ffffff08;
}



/* MOBILE TRIGGER */

.drawer-btn{
display:none;
background:#ffffff08;
border:none;
padding:10px;
border-radius:12px;
flex-direction:column;
gap:5px;
}

.drawer-btn span{
width:18px;
height:2px;
background:white;
}



/* MOBILE DRAWER */

.mobile-drawer-panel{

position:fixed;

top:0;
right:-360px;

width:320px;
height:100vh;

background:#111425;

padding:30px 24px;

display:flex;
flex-direction:column;

gap:16px;

transition:.35s;

z-index:5000;

box-shadow:
-20px 0 60px rgba(0,0,0,.35);

}

.mobile-drawer-panel.open{
right:0;
}

.drawer-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}

#drawerClose{
background:none;
border:none;
color:white;
font-size:20px;
}

.mobile-drawer-panel a{
color:white;
padding:14px;
border-radius:12px;
background:#ffffff06;
text-decoration:none;
}

.drawer-cta{
background:#8c63ff !important;
text-align:center;
font-weight:700;
}

.mobile-only{
display:none;
}



/* PAGE OFFSET */

.site-main,
main{
padding-top:96px;
}



/* RESPONSIVE */

@media(max-width:991px){

.desktop-only{
display:none !important;
}

.mobile-only{
display:flex;
}

.auth-underbar{
height:72px;
}

.lux-nav-wrap{
grid-template-columns:auto auto;
justify-content:space-between;
}

.site-main,
main{
padding-top:82px;
}

}

/* full width rail */

.lux-actions{
display:flex;
align-items:center;
}


.action-rail{

display:flex;

align-items:center;

gap:14px;

padding:10px 14px;

border-radius:999px;

background:
linear-gradient(
135deg,
rgba(16,16,30,.96),
rgba(34,26,64,.92)
);

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

box-shadow:
0 12px 34px rgba(0,0,0,.18);
}



/* messages */

.ghost-btn{

display:flex;

align-items:center;

gap:8px;

padding:11px 18px;

border-radius:999px;

background:#ffffff08;

color:#fff;

font-weight:700;

text-decoration:none;

transition:.25s;
}

.ghost-btn:hover{

background:#ffffff14;

transform:translateY(-1px);
}



/* user chip */

.avatar-chip{

display:flex;

align-items:center;

padding:11px 18px;

border-radius:999px;

background:
linear-gradient(
135deg,
#8c63ff,
#ff56cf
);

color:#fff !important;

font-weight:800;

text-decoration:none;

box-shadow:
0 8px 24px rgba(140,99,255,.30);
}



/* dropdown */

.lux-dropdown{

margin-top:14px;

border:none;

border-radius:18px;

padding:10px;

min-width:240px;

background:#141424;

box-shadow:
0 20px 45px rgba(0,0,0,.28);
}


.lux-dropdown .dropdown-item{

padding:12px 14px;

border-radius:12px;

color:#e5e7eb;
}

.lux-dropdown .dropdown-item:hover{

background:#ffffff08;
}



/* mobile */

@media(max-width:992px){

.action-rail{
width:100%;
justify-content:space-between;
}

}









































/* =========================================================
   JAMMX PROJECT SHOW
========================================================= */

body {
    margin: 0;
    /* background: #05060b; */
    color: #ffffff;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


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

.jx-project-page {

    min-height: 100vh;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(140, 99, 255, .16),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(255, 86, 207, .12),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #070812 0%,
            #080a12 45%,
            #05060b 100%
        );
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.jx-project-page::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -180px;
    top: 20%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(140, 99, 255, .14),
            transparent 70%
        );

    pointer-events: none;
}


.jx-project-page::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -200px;
    bottom: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 86, 207, .10),
            transparent 70%
        );

    pointer-events: none;
}


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

.jx-project-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding: 70px 28px 50px;
}


/* =========================================================
   PROJECT LAYOUT
========================================================= */

.jx-project-layout {

    display: grid;

    grid-template-columns:
        minmax(340px, 500px)
        minmax(0, 1fr);

    gap: 64px;

    align-items: center;
}


/* =========================================================
   MEDIA STAGE
========================================================= */

.jx-media-wrap {

    width: 100%;

    max-width: 500px;

    margin: 0 auto;

    position: relative;
}


/*
|--------------------------------------------------------------------------
| The important fix:
| Always keep the artwork square.
|--------------------------------------------------------------------------
*/

.jx-media-stage {

    width: 100%;

    aspect-ratio: 1 / 1;

    position: relative;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #15172a,
            #0b0d17
        );

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

    box-shadow:
        0 35px 90px rgba(0,0,0,.50),
        0 0 0 1px rgba(255,255,255,.025);

}


/* =========================================================
   MEDIA IMAGE
========================================================= */

.jx-media-stage img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   IMAGE INNER GLOW
========================================================= */

.jx-media-stage::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 35%,
            rgba(0,0,0,.32) 100%
        );
}


/* =========================================================
   VIDEO
========================================================= */

.jx-video-frame {

    width: 100%;

    height: 100%;

    border: 0;

    display: block;
}


/* =========================================================
   NO PROJECT
========================================================= */

.jx-empty-media {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 10px;

    color: rgba(255,255,255,.55);

    font-size: 14px;
}


.jx-empty-media i {

    font-size: 34px;

    opacity: .6;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.jx-play-button {

    position: absolute;

    z-index: 5;

    left: 50%;

    bottom: 24px;

    transform: translateX(-50%);

    width: 54px;

    height: 54px;

    border-radius: 50%;

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

    background:
        rgba(8,9,18,.72);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    cursor: pointer;

    transition: .25s ease;

    box-shadow:
        0 12px 30px rgba(0,0,0,.35);
}


.jx-play-button::before {

    content: "";

    width: 0;

    height: 0;

    border-top: 7px solid transparent;

    border-bottom: 7px solid transparent;

    border-left: 10px solid #fff;

    margin-left: 3px;
}


.jx-play-button:hover {

    transform:
        translateX(-50%)
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #8c63ff,
            #ff56cf
        );

    border-color: transparent;

    box-shadow:
        0 15px 38px rgba(140,99,255,.35);
}


/* =========================================================
   CONTENT
========================================================= */

.jx-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 25px;
}


/* =========================================================
   SMALL BRAND LABEL
========================================================= */

.jx-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    padding: 7px 12px;

    border-radius: 999px;

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

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

    color: rgba(255,255,255,.60);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.jx-eyebrow-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #8c63ff,
            #ff56cf
        );

    box-shadow:
        0 0 12px rgba(255,86,207,.65);
}


/* =========================================================
   IDENTITY
========================================================= */

.jx-identity {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.jx-artist {

    font-size: 16px;

    font-weight: 700;

    color: rgba(255,255,255,.58);

    letter-spacing: .1px;
}


.jx-title {

    margin: 0;

    font-size:
        clamp(
            2.1rem,
            4vw,
            4rem
        );

    line-height: 1.03;

    font-weight: 900;

    letter-spacing: -1.8px;

    color: #fff;

    max-width: 680px;
}


.jx-title-accent {

    display: block;

    width: 52px;

    height: 4px;

    margin-top: 18px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            #8c63ff,
            #ff56cf
        );

    box-shadow:
        0 0 18px rgba(140,99,255,.35);
}


/* =========================================================
   SOCIALS
========================================================= */

.jx-socials {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 4px;
}


.jx-social {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(255,255,255,.82);

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

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

    text-decoration: none;

    transition: .25s ease;
}


.jx-social:hover {

    color: #fff;

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

    border-color:
        rgba(255,255,255,.16);

    transform:
        translateY(-2px);
}


/* =========================================================
   ACTIONS
========================================================= */

.jx-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    padding-top: 2px;
}


.jx-btn {

    min-height: 44px;

    padding: 0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 999px;

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

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

    color: #fff;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    transition: .25s ease;

    white-space: nowrap;
}


.jx-btn:hover {

    color: #fff;

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

    border-color:
        rgba(255,255,255,.18);

    transform:
        translateY(-2px);
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.jx-btn-primary {

    border: 0;

    background:
        linear-gradient(
            135deg,
            #8c63ff,
            #ff56cf
        );

    box-shadow:
        0 12px 30px
        rgba(140,99,255,.26);
}


.jx-btn-primary:hover {

    background:
        linear-gradient(
            135deg,
            #996fff,
            #ff65d4
        );

    box-shadow:
        0 17px 38px
        rgba(140,99,255,.36);
}


/* =========================================================
   SHARE COMPLETE
========================================================= */

.jx-btn.shared {

    color: #86efb5;

    background:
        rgba(55,214,142,.10);

    border-color:
        rgba(55,214,142,.25);
}


/* =========================================================
   PLATFORM LINKS
========================================================= */

.jx-links-section {

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-top: 3px;
}


.jx-link {

    min-height: 62px;

    padding: 10px 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-radius: 18px;

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

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

    color: #fff;

    text-decoration: none;

    transition: .25s ease;
}


.jx-link:hover {

    color: #fff;

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

    border-color:
        rgba(255,255,255,.13);

    transform:
        translateX(3px);
}


.jx-link-left {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;
}


/* =========================================================
   PLATFORM ICON
========================================================= */

.jx-link-icon {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

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

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


.jx-link-icon img {

    width: 21px;

    height: 21px;

    object-fit: contain;
}


.jx-link-icon i {

    font-size: 19px;

    color: rgba(255,255,255,.72);
}


.jx-link-name {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 750;
}


.jx-link-open {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 5px;

    color: rgba(255,255,255,.38);

    font-size: 11px;

    font-weight: 700;
}


.jx-link:hover .jx-link-open {

    color:
        rgba(255,255,255,.72);
}


/* =========================================================
   EMPTY LINKS
========================================================= */

.jx-empty-links {

    padding: 18px;

    border-radius: 16px;

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

    border: 1px dashed rgba(255,255,255,.09);

    color:
        rgba(255,255,255,.42);

    font-size: 12px;

    text-align: center;
}


/* =========================================================
   FOOTER
========================================================= */

.jx-footer {

    padding-top: 3px;
}


.jx-footer a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        rgba(255,255,255,.36);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: .2s ease;
}


.jx-footer a:hover {

    color:
        rgba(255,255,255,.72);
}


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

@media (max-width: 900px) {

    .jx-project-container {

        padding:
            48px
            18px
            42px;
    }


    .jx-project-layout {

        grid-template-columns: 1fr;

        gap: 34px;
    }


    .jx-media-wrap {

        max-width: 540px;
    }


    .jx-content {

        max-width: 620px;

        margin: 0 auto;

        width: 100%;
    }


    .jx-identity {

        text-align: center;

        align-items: center;
    }


    .jx-socials {

        justify-content: center;
    }


    .jx-actions {

        justify-content: center;
    }


    .jx-links-section {

        margin-top: 2px;
    }


    .jx-footer {

        text-align: center;
    }
}


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

@media (max-width: 520px) {

    .jx-project-container {

        padding:
            30px
            14px
            32px;
    }


    .jx-project-layout {

        gap: 28px;
    }


    .jx-media-stage {

        border-radius: 22px;
    }


    .jx-title {

        font-size: 2rem;

        letter-spacing: -1px;
    }


    .jx-artist {

        font-size: 14px;
    }


    .jx-actions {

        display: grid;

        grid-template-columns: 1fr 1fr;

        width: 100%;
    }


    .jx-btn {

        width: 100%;

        padding: 0 12px;

        font-size: 12px;
    }


    .jx-btn-primary {

        grid-column: span 2;
    }


    .jx-link {

        min-height: 58px;

        border-radius: 16px;
    }


    .jx-link-icon {

        width: 37px;

        height: 37px;

        flex-basis: 37px;
    }


    .jx-link-name {

        font-size: 12.5px;
    }
}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .jx-title {

        font-size: 1.75rem;
    }


    .jx-actions {

        grid-template-columns: 1fr;
    }


    .jx-btn-primary {

        grid-column: auto;
    }
}




































    /* =========================================================
       JAMMX — PROJECT LIBRARY
       Solid compact card design
    ========================================================= */

    .jx-manager {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 10px 0 45px;
        color: #fff;
    }

    /* =========================================================
       HEADER
    ========================================================= */

    .jx-manager-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 28px;
    }

    .jx-manager-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 8px;
        color: #9b8cff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .jx-manager-eyebrow::before {
        content: "";
        width: 18px;
        height: 2px;
        border-radius: 10px;
        background: linear-gradient(90deg, #8c63ff, #ff56cf);
    }

    .jx-manager-title {
        margin: 0;
        color: #cccccc;
        font-size: clamp(27px, 4vw, 38px);
        line-height: 1;
        font-weight: 800;
        letter-spacing: -1.2px;
    }

    .jx-manager-subtitle {
        margin: 9px 0 0;
        max-width: 500px;
        color: #858aa8;
        font-size: 13px;
        line-height: 1.6;
    }

    /* =========================================================
       HEADER NEW PROJECT BUTTON
    ========================================================= */

    .jx-new-project {
        width: 132px;
        min-width: 132px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 14px;
        border-radius: 12px;
        text-decoration: none;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        background: linear-gradient(135deg, #8c63ff, #ff56cf);
        box-shadow: 0 10px 25px rgba(140, 99, 255, .22);
        transition: .22s ease;
    }

    .jx-new-project:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(140, 99, 255, .32);
    }

    .jx-new-project i {
        font-size: 15px;
    }

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

    .jx-project-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    /* =========================================================
       SOLID PROJECT CARD
    ========================================================= */

    .jx-project-card {
        position: relative;
        min-width: 0;
        overflow: hidden;
        border-radius: 18px;

        /* SOLID CARD */
        background: #171d2d;

        border: 1px solid #252d42;

        box-shadow:
            0 14px 30px rgba(0, 0, 0, .25);

        transition:
            transform .25s ease,
            border-color .25s ease,
            box-shadow .25s ease;
    }

    .jx-project-card:hover {
        transform: translateY(-4px);
        border-color: #394363;

        box-shadow:
            0 20px 40px rgba(0, 0, 0, .32);
    }

    /* =========================================================
       NEW PROJECT CARD
    ========================================================= */

    .jx-create-card {
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        text-decoration: none;
        color: #fff;

        /* SOLID */
        background: #20265d;

        border-color: #353b7b;
    }

    .jx-create-card:hover {
        color: #fff;
        background: #252c68;
        border-color: #4b54a0;
    }

    .jx-create-inner {
        width: 100%;
        min-height: 255px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        padding: 25px 15px;
    }

    .jx-create-icon {
        width: 52px;
        height: 52px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin-bottom: 14px;

        border-radius: 15px;

        color: #fff;
        font-size: 21px;

        background: linear-gradient(
            135deg,
            #8c63ff,
            #ff56cf
        );

        box-shadow:
            0 12px 28px rgba(140, 99, 255, .30);

        transition: .25s ease;
    }

    .jx-create-card:hover .jx-create-icon {
        transform: scale(1.07) rotate(2deg);
    }

    .jx-create-title {
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 4px;
    }

    .jx-create-text {
        color: #aeb4d1;
        font-size: 10px;
        text-align: center;
    }

    /* =========================================================
       COVER
    ========================================================= */

    .jx-cover {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: #111726;
    }

    .jx-cover img {
        width: 100%;
        height: 100%;
        display: block;

        object-fit: cover;
        object-position: center;

        transition: transform .45s ease;
    }

    .jx-project-card:hover .jx-cover img {
        transform: scale(1.035);
    }

    .jx-cover iframe {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
        pointer-events: none;
    }

    .jx-cover-placeholder {
        width: 100%;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        background:
            radial-gradient(
                circle at 30% 20%,
                rgba(140, 99, 255, .30),
                transparent 35%
            ),
            linear-gradient(
                145deg,
                #242a57,
                #111522
            );
    }

    .jx-cover-placeholder i {
        color: rgba(255, 255, 255, .45);
        font-size: 30px;
    }

    /* =========================================================
       COVER OVERLAY
    ========================================================= */

    .jx-cover-overlay {
        position: absolute;
        inset: 0;

        pointer-events: none;

        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, .10),
            transparent 45%,
            rgba(0, 0, 0, .48)
        );
    }

    /* =========================================================
       DEFAULT BADGE
    ========================================================= */

    .jx-default-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 3;

        display: inline-flex;
        align-items: center;
        gap: 5px;

        padding: 5px 8px;

        border-radius: 999px;

        color: #171717;

        background: #ffc83d;

        font-size: 8px;
        font-weight: 900;
        letter-spacing: .5px;
        text-transform: uppercase;

        box-shadow:
            0 5px 15px rgba(0, 0, 0, .20);
    }

    .jx-default-badge i {
        color: #171717;
        font-size: 8px;
    }

    /* =========================================================
       EDIT BUTTON
    ========================================================= */

    .jx-edit-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 5;

        width: 30px;
        height: 30px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 9px;

        color: #fff;

        background: #151b2b;

        border: 1px solid #31394e;

        text-decoration: none;

        font-size: 11px;

        box-shadow:
            0 5px 15px rgba(0, 0, 0, .25);

        transition: .2s ease;
    }

    .jx-edit-btn:hover {
        color: #fff;
        background: #8c63ff;
        border-color: #a78cff;
        transform: scale(1.04);
    }

    /* =========================================================
       CARD BODY
    ========================================================= */

    .jx-card-body {
        padding: 13px 14px 14px;
        background: #171d2d;
    }

    .jx-project-type {
        margin-bottom: 5px;

        color: #8f96b5;

        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .jx-project-name {
        margin: 0;

        overflow: hidden;

        color: #ffffff;

        font-size: 14px;
        line-height: 1.25;
        font-weight: 800;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* =========================================================
       PLATFORM ROW
    ========================================================= */

    .jx-platforms {
        display: flex;
        align-items: center;
        gap: 5px;

        margin-top: 11px;

        min-height: 25px;
    }

    .jx-platform-pill {
        width: 25px;
        height: 25px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 8px;

        color: #c9cde1;

        background: #252c40;

        border: 1px solid #323a50;

        font-size: 11px;
    }

    .jx-platform-more {
        color: #858ca8;
        font-size: 9px;
        font-weight: 700;
    }

    /* =========================================================
       CARD FOOTER
    ========================================================= */

    .jx-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 10px;

        margin-top: 13px;
        padding-top: 11px;

        border-top: 1px solid #293147;
    }

    .jx-view-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;

        color: #a991ff;

        font-size: 10px;
        font-weight: 800;

        text-decoration: none;

        transition: .2s ease;
    }

    .jx-view-link:hover {
        color: #ffffff;
    }

    .jx-view-link i {
        font-size: 9px;
        transition: .2s ease;
    }

    .jx-view-link:hover i {
        transform: translate(2px, -2px);
    }

    .jx-audio {
        display: inline-flex;
        align-items: center;
        gap: 5px;

        color: #9ca3bd;

        font-size: 9px;
        font-weight: 700;
    }

    .jx-audio i {
        color: #a783ff;
        font-size: 10px;
    }

    /* =========================================================
       EMPTY STATE
    ========================================================= */

    .jx-empty {
        grid-column: 1 / -1;

        padding: 65px 25px;

        text-align: center;

        border: 1px solid #293147;
        border-radius: 18px;

        background: #171d2d;
    }

    .jx-empty-icon {
        width: 55px;
        height: 55px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin: 0 auto 14px;

        border-radius: 16px;

        color: #a889ff;

        background: #242b52;

        border: 1px solid #353d70;

        font-size: 20px;
    }

    .jx-empty h4 {
        margin: 0 0 6px;

        color: #fff;

        font-size: 16px;
        font-weight: 800;
    }

    .jx-empty p {
        margin: 0 auto;

        max-width: 400px;

        color: #858ca7;

        font-size: 11px;
        line-height: 1.6;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 1100px) {

        .jx-project-grid {
            grid-template-columns: repeat(
                3,
                minmax(0, 1fr)
            );
        }

    }

    @media (max-width: 820px) {

        .jx-manager {
            padding-left: 5px;
            padding-right: 5px;
        }

        .jx-project-grid {
            grid-template-columns: repeat(
                2,
                minmax(0, 1fr)
            );

            gap: 14px;
        }

        .jx-create-inner {
            min-height: 230px;
        }

    }

    @media (max-width: 575px) {

        .jx-manager {
            padding: 4px 0 35px;
        }

        .jx-manager-header {
            align-items: center;
            margin-bottom: 20px;
        }

        .jx-manager-title {
            font-size: 27px;
        }

        .jx-manager-subtitle {
            font-size: 11px;
            max-width: 280px;
        }

        /* Compact mobile header button */

        .jx-new-project {
            width: 42px;
            min-width: 42px;
            height: 42px;

            padding: 0;

            border-radius: 12px;

            font-size: 0;
        }

        .jx-new-project i {
            margin: 0;
            font-size: 16px;
        }

        /* Two compact cards per row */

        .jx-project-grid {
            grid-template-columns: repeat(
                2,
                minmax(0, 1fr)
            );

            gap: 10px;
        }

        .jx-project-card {
            border-radius: 14px;
        }

        .jx-card-body {
            padding: 10px;
        }

        .jx-project-type {
            font-size: 7px;
            margin-bottom: 4px;
        }

        .jx-project-name {
            font-size: 12px;
        }

        .jx-platforms {
            margin-top: 8px;
        }

        .jx-platform-pill {
            width: 22px;
            height: 22px;

            border-radius: 7px;

            font-size: 9px;
        }

        .jx-card-footer {
            margin-top: 9px;
            padding-top: 9px;
        }

        .jx-view-link {
            font-size: 9px;
        }

        .jx-audio {
            font-size: 8px;
        }

        /* New project card */

        .jx-create-inner {
            min-height: 100%;
            padding: 20px 8px;
        }

        .jx-create-icon {
            width: 42px;
            height: 42px;

            margin-bottom: 10px;

            border-radius: 12px;

            font-size: 17px;
        }

        .jx-create-title {
            font-size: 11px;
        }

        .jx-create-text {
            font-size: 8px;
        }

        /* Badges */

        .jx-default-badge {
            top: 7px;
            left: 7px;

            padding: 4px 6px;

            font-size: 6px;
        }

        .jx-edit-btn {
            top: 7px;
            right: 7px;

            width: 26px;
            height: 26px;

            border-radius: 8px;

            font-size: 9px;
        }

    }

    @media (max-width: 370px) {

        .jx-project-grid {
            gap: 8px;
        }

        .jx-project-name {
            font-size: 11px;
        }

        .jx-card-body {
            padding: 9px;
        }

    }
































/* =========================
TAB WRAPPER (DEEP BASE)
========================= */

.dashboard-tabs{

display:inline-flex;
justify-content:center;
gap:6px;

padding:6px;

border-radius:999px;

background:linear-gradient(
135deg,
#0f1224,
#1a1f3f
);

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

box-shadow:
0 10px 30px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.04);
}


/* =========================
BASE TAB
========================= */

.dashboard-tabs .nav-link{

padding:10px 18px;

border-radius:999px;

font-weight:700;
font-size:13px;

color:#aab0d6; /* 👈 visible but muted */

background:transparent;

border:none;

transition:.25s ease;

white-space:nowrap;
}


/* HOVER */

.dashboard-tabs .nav-link:hover{
color:#fff;
background:rgba(255,255,255,.06);
}


/* =========================
ACTIVE TAB (REAL LUX CHIP)
========================= */

.dashboard-tabs .nav-link.active{

color:#fff;

background:linear-gradient(
135deg,
#8c63ff,
#ff56cf
);

box-shadow:
0 8px 25px rgba(140,99,255,.35),
inset 0 1px 0 rgba(255,255,255,.2);
}


/* subtle glow */

.dashboard-tabs .nav-link.active::after{
content:"";
position:absolute;
inset:0;
border-radius:999px;

background:linear-gradient(
135deg,
#8c63ff,
#ff56cf
);

filter:blur(16px);

opacity:.25;
z-index:-1;
}


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

@media(max-width:500px){

.dashboard-tabs{
width:100%;
justify-content:space-between;
}

.dashboard-tabs .nav-link{
flex:1;
text-align:center;
}

}































/* =========================
EARNINGS / WALLET
========================= */

.vault-card{

background:
linear-gradient(
180deg,
#ffffff,
#faf9ff
);

border-radius:32px;

padding:34px;

border:1px solid #eceaf7;

box-shadow:
0 20px 55px rgba(24,24,40,.06);

}



/* top */

.vault-top{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

flex-wrap:wrap;
}



.vault-label{

font-size:14px;

font-weight:600;

color:#6b7280;

margin-bottom:10px;
}



.vault-balance{

font-size:
clamp(2.5rem,6vw,5rem);

font-weight:900;

line-height:1;

letter-spacing:-1px;

margin:0;

color:#111827;
}



/* sponsor tag */

.vault-tag{

border:none;

padding:11px 18px;

border-radius:999px;

background:#eef1ff;

color:#4f46e5;

font-weight:700;

margin-top:18px;
}

.vault-tag.live{

background:#dcfce7;

color:#166534;
}



/* =========================
ACTIONS
========================= */

.vault-actions{

display:flex;

gap:14px;

flex-wrap:wrap;
}



.lux-action{

border:none;

padding:14px 22px;

border-radius:18px;

font-weight:800;

display:flex;
align-items:center;
gap:10px;

transition:.25s;
}



/* primary */

.lux-action.primary{

background:
linear-gradient(
135deg,
#0f172a,
#4338ca
);

color:#fff;

box-shadow:
0 12px 28px rgba(67,56,202,.18);
}

.lux-action.primary:hover{

transform:
translateY(-2px);

}



/* ghost */

.lux-action.ghost{

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

border:1px solid #e5e7eb;

color:#111827;

box-shadow:
0 5px 16px rgba(0,0,0,.04);
}



/* bottom stats */

.vault-foot{

margin-top:28px;

padding-top:22px;

border-top:1px solid #edeef5;

display:flex;

gap:50px;

flex-wrap:wrap;
}

.vault-foot small{

display:block;

font-size:12px;

color:#6b7280;
}

.vault-foot strong{
font-size:15px;
}



/* =========================
MODALS
========================= */

.sheet-wrap{
margin-top:75px;
}



.sheet{

border:none !important;

border-radius:34px;

padding:28px;

background:
linear-gradient(
180deg,
#ffffff,
#faf9ff
);

box-shadow:
0 30px 80px rgba(18,18,40,.14);

overflow:hidden;
}



/* modal head */

.sheet-head{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:18px;

border-bottom:
1px solid #f0eff8;
}



.sheet-close{

border:none;

width:40px;
height:40px;

border-radius:50%;

background:
linear-gradient(
135deg,
#f5f3ff,
#eef2ff
);

box-shadow:
0 6px 15px rgba(0,0,0,.05);

font-weight:700;
}



/* titles */

.sheet-title{
font-weight:800;
margin-bottom:18px;
}



/* transactions */

.activity-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 20px;

background:#f8f8ff;

border-radius:18px;

margin-bottom:12px;
}

.plus{
color:#16a34a;
}



/* bank box */

.bank-pill{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 22px;

background:
linear-gradient(
135deg,
#f3f0ff,
#eef4ff
);

border-radius:22px;

box-shadow:
inset 0 1px 0 #fff;
}



/* balance */

.mini-balance{

margin:22px 0;

padding:16px 18px;

background:#f6f7ff;

border-radius:18px;

display:flex;

justify-content:space-between;
}



/* input */

.sheet-input{

width:100%;

padding:18px 20px;

border-radius:18px;

border:1px solid #ddd;

background:#fbfbff;

font-size:17px;

outline:none;
}

.sheet-input:focus{

border-color:#8b5cf6;

box-shadow:
0 0 0 4px rgba(139,92,246,.08);

}



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

@media(max-width:768px){

.vault-card{
padding:22px;
}

.vault-top{
flex-direction:column;
align-items:stretch;
}

.vault-actions{
flex-direction:column;
}

.lux-action{
width:100%;
justify-content:center;
}

.vault-foot{
gap:24px;
}

.sheet-wrap{
margin-top:65px;
}

.bank-pill{
flex-direction:column;
gap:14px;
align-items:flex-start;
}

.activity-row{
padding:16px;
}

}


































  /* =====================================================
               BASE
            ====================================================== */

            .project-overview {
                width: 100%;
                min-height: 100vh;
                color: #fff;
            }

            .project-overview-container {
                width: 100%;
                max-width: 1320px;
                margin: 0 auto;
                padding: 28px 22px 75px;
            }


            /* =====================================================
               HEADER
            ====================================================== */

            .overview-header {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                gap: 30px;
                margin-bottom: 26px;
            }

            .overview-header-copy {
                min-width: 0;
            }

            .back-link {
                display: inline-flex;
                align-items: center;
                gap: 7px;

                margin-bottom: 17px;

                color: #7e849d;

                font-size: 11px;
                font-weight: 700;

                text-decoration: none;

                transition: .2s ease;
            }

            .back-link:hover {
                color: #fff;
            }

            .back-link i {
                font-size: 12px;
            }

            .overview-eyebrow,
            .section-eyebrow,
            .panel-eyebrow {
                color: #9f8cff;

                font-size: 9px;
                font-weight: 800;

                letter-spacing: 1.8px;
                text-transform: uppercase;
            }

            .overview-eyebrow {
                margin-bottom: 6px;
            }

            .overview-title {
                margin: 0;

                color: #fff;

                font-size: clamp(27px, 4vw, 39px);
                line-height: 1.08;

                font-weight: 850;
                letter-spacing: -.9px;

                max-width: 700px;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .overview-subtitle {
                margin: 8px 0 0;

                color: #7f869f;

                font-size: 12px;
                line-height: 1.5;
            }


            /* =====================================================
               HEADER ACTIONS
            ====================================================== */

            .overview-actions {
                display: flex;
                align-items: center;
                gap: 8px;

                flex-shrink: 0;
            }

            .overview-btn {
                min-height: 41px;

                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;

                padding: 0 14px;

                border-radius: 10px;

                text-decoration: none;

                font-size: 11px;
                font-weight: 800;

                transition: .22s ease;
            }

            .overview-btn.secondary {
                color: #c3c7d7;

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

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

            .overview-btn.secondary:hover {
                color: #fff;

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

            .overview-btn.primary {
                color: #fff;

                background:
                    linear-gradient(
                        135deg,
                        #8c63ff,
                        #ff56cf
                    );

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

                box-shadow:
                    0 8px 25px rgba(140,99,255,.18);
            }

            .overview-btn.primary:hover {
                color: #fff;

                transform:
                    translateY(-2px);

                box-shadow:
                    0 13px 32px rgba(140,99,255,.28);
            }


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

            .project-hero-card {
                position: relative;

                display: flex;

                width: 100%;

                height: 230px;

                overflow: hidden;

                margin-bottom: 36px;

                border-radius: 19px;

                background:
                    radial-gradient(
                        circle at 75% 20%,
                        rgba(140,99,255,.14),
                        transparent 34%
                    ),
                    linear-gradient(
                        135deg,
                        #111427,
                        #17152b
                    );

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

                box-shadow:
                    0 20px 55px rgba(0,0,0,.22);
            }


            /* =====================================================
               HERO MEDIA
               
               FIXED SIZE.
               Tall artwork cannot affect card dimensions.
            ====================================================== */

            .project-hero-media {
                position: relative;

                width: 230px;
                min-width: 230px;

                height: 230px;

                overflow: hidden;

                background: #0b0d18;
            }

            .project-hero-media img {
                width: 100%;
                height: 100%;

                display: block;

                object-fit: cover;
                object-position: center;

                transition:
                    transform .45s ease;
            }

            .project-hero-card:hover
            .project-hero-media img {
                transform: scale(1.025);
            }

            .project-hero-media::after {
                content: "";

                position: absolute;

                inset: 0;

                background:
                    linear-gradient(
                        90deg,
                        transparent 50%,
                        rgba(17,20,39,.96) 100%
                    );

                pointer-events: none;
            }


            /* =====================================================
               PLACEHOLDER
            ====================================================== */

            .project-placeholder {
                width: 100%;
                height: 100%;

                display: flex;
                align-items: center;
                justify-content: center;

                color: #967bff;

                font-size: 50px;

                background:
                    radial-gradient(
                        circle at 50% 35%,
                        rgba(140,99,255,.20),
                        transparent 58%
                    ),
                    #0d1020;
            }


            /* =====================================================
               VIDEO
            ====================================================== */

            .video-overlay {
                position: absolute;

                inset: 0;

                z-index: 3;

                display: flex;
                align-items: center;
                justify-content: center;
            }

            .video-play {
                width: 50px;
                height: 50px;

                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 50%;

                background:
                    rgba(8,9,18,.72);

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

                backdrop-filter:
                    blur(12px);

                color: #fff;

                font-size: 23px;

                padding-left: 2px;

                box-shadow:
                    0 12px 30px rgba(0,0,0,.3);
            }


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

            .project-hero-content {
                position: relative;

                z-index: 4;

                flex: 1;

                min-width: 0;

                display: flex;
                flex-direction: column;
                justify-content: center;

                padding:
                    25px 38px;
            }

            .project-status-row {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                gap: 7px;

                margin-bottom: 11px;
            }

            .project-type,
            .default-badge {
                display: inline-flex;
                align-items: center;
                gap: 5px;

                padding: 5px 8px;

                border-radius: 6px;

                font-size: 8px;
                font-weight: 850;

                letter-spacing: .8px;
            }

            .project-type {
                color: #c3b8ff;

                background:
                    rgba(140,99,255,.10);

                border:
                    1px solid rgba(140,99,255,.16);
            }

            .default-badge {
                color: #ffd2ee;

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

                border:
                    1px solid rgba(255,86,207,.14);
            }

            .default-badge i {
                color: #ffd76a;

                font-size: 7px;
            }

            .project-hero-content h2 {
                margin: 0;

                color: #fff;

                font-size: 25px;
                line-height: 1.15;

                font-weight: 850;
                letter-spacing: -.45px;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .project-hero-content p {
                margin: 7px 0 16px;

                color: #8188a2;

                font-size: 11px;
            }

            .hero-meta {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                gap: 15px;

                color: #747b95;

                font-size: 10px;
            }

            .hero-meta span {
                display: inline-flex;
                align-items: center;
                gap: 5px;
            }

            .hero-meta i {
                color: #a58dff;
            }


            /* =====================================================
               SECTION
            ====================================================== */

            .section-heading {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;

                margin-bottom: 14px;
            }

            .section-eyebrow {
                margin-bottom: 5px;
            }

            .section-heading h3 {
                margin: 0;

                color: #f5f5f9;

                font-size: 17px;
                font-weight: 800;

                letter-spacing: -.25px;
            }


            /* =====================================================
               ANALYTICS
            ====================================================== */

            .analytics-grid {
                display: grid;

                grid-template-columns:
                    repeat(4, minmax(0, 1fr));

                gap: 11px;

                margin-bottom: 36px;
            }

            .analytics-card {
                min-width: 0;

                display: flex;
                align-items: center;

                gap: 13px;

                min-height: 108px;

                padding: 16px;

                border-radius: 15px;

                background:
                    rgba(16,18,34,.82);

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

                box-shadow:
                    0 12px 32px rgba(0,0,0,.13);

                transition:
                    transform .2s ease,
                    border-color .2s ease;
            }

            .analytics-card:hover {
                transform:
                    translateY(-2px);

                border-color:
                    rgba(140,99,255,.17);
            }

            .earnings-card {
                background:
                    linear-gradient(
                        135deg,
                        rgba(140,99,255,.10),
                        rgba(255,86,207,.055)
                    ),
                    rgba(16,18,34,.82);

                border-color:
                    rgba(140,99,255,.15);
            }

            .analytics-icon {
                width: 42px;
                height: 42px;

                min-width: 42px;

                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 11px;

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

                font-size: 16px;
            }

            .analytics-icon.views {
                color: #a98aff;
            }

            .analytics-icon.shares {
                color: #ff7bd8;
            }

            .analytics-icon.sponsors {
                color: #ff83c4;
            }

            .analytics-icon.earnings {
                color: #c3a5ff;
            }

            .analytics-info {
                min-width: 0;
            }

            .analytics-label {
                display: block;

                color: #747b94;

                font-size: 9px;
                font-weight: 700;

                margin-bottom: 3px;
            }

            .analytics-info strong {
                display: block;

                color: #fff;

                font-size: 18px;
                line-height: 1.2;

                font-weight: 850;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .analytics-info small {
                display: block;

                margin-top: 4px;

                color: #565d75;

                font-size: 8px;
            }


            /* =====================================================
               LOWER PANELS
            ====================================================== */

            .overview-grid {
                display: grid;

                grid-template-columns:
                    repeat(2, minmax(0, 1fr));

                gap: 12px;

                margin-bottom: 36px;
            }

            .overview-panel {
                min-width: 0;

                min-height: 285px;

                padding: 19px;

                border-radius: 16px;

                background:
                    rgba(13,15,29,.82);

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

                box-shadow:
                    0 12px 35px rgba(0,0,0,.12);
            }

            .panel-header {
                display: flex;
                align-items: center;
                justify-content: space-between;

                gap: 15px;

                margin-bottom: 15px;
            }

            .panel-eyebrow {
                margin-bottom: 4px;
            }

            .panel-header h3 {
                margin: 0;

                color: #e9eaf1;

                font-size: 14px;
                font-weight: 800;

                letter-spacing: -.15px;
            }

            .panel-count {
                min-width: 26px;
                height: 26px;

                display: inline-flex;
                align-items: center;
                justify-content: center;

                padding: 0 7px;

                border-radius: 8px;

                color: #bba9ff;

                background:
                    rgba(140,99,255,.09);

                font-size: 9px;
                font-weight: 800;
            }


            /* =====================================================
               PLATFORM LIST
            ====================================================== */

            .platform-list,
            .donation-list {
                display: flex;
                flex-direction: column;

                gap: 6px;
            }

            .platform-item,
            .donation-item {
                min-height: 55px;

                display: flex;
                align-items: center;

                gap: 10px;

                padding: 8px 9px;

                border-radius: 10px;

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

                border:
                    1px solid transparent;

                text-decoration: none;

                transition: .2s ease;
            }

            .platform-item:hover {
                background:
                    rgba(255,255,255,.045);

                border-color:
                    rgba(255,255,255,.055);
            }

            .platform-icon {
                width: 34px;
                height: 34px;

                min-width: 34px;

                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 9px;

                color: var(--brand, #a887ff);

                background:
                    color-mix(
                        in srgb,
                        var(--brand, #a887ff) 11%,
                        transparent
                    );

                font-size: 14px;
            }

            .platform-info {
                min-width: 0;
                flex: 1;
            }

            .platform-info strong,
            .donation-info strong {
                display: block;

                color: #e4e6ef;

                font-size: 11px;
                font-weight: 750;

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .platform-info span,
            .donation-info span {
                display: block;

                margin-top: 2px;

                color: #5e657c;

                font-size: 9px;

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .platform-arrow {
                color: #5f657b;

                font-size: 10px;
            }


            /* =====================================================
               DONATIONS
            ====================================================== */

            .donation-avatar {
                width: 34px;
                height: 34px;

                min-width: 34px;

                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 50%;

                color: #ff83c4;

                background:
                    rgba(255,86,207,.075);

                font-size: 11px;
            }

            .donation-info {
                min-width: 0;
                flex: 1;
            }

            .donation-amount {
                color: #c4b3ff;

                font-size: 10px;
                font-weight: 850;

                white-space: nowrap;
            }


            /* =====================================================
               EMPTY
            ====================================================== */

            .empty-panel {
                min-height: 205px;

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                text-align: center;

                padding: 20px;

                color: #686f86;
            }

            .empty-icon {
                width: 43px;
                height: 43px;

                display: flex;
                align-items: center;
                justify-content: center;

                margin-bottom: 11px;

                border-radius: 12px;

                color: #9c7cff;

                background:
                    rgba(140,99,255,.075);

                font-size: 17px;
            }

            .empty-panel strong {
                color: #c5c8d5;

                font-size: 11px;

                margin-bottom: 4px;
            }

            .empty-panel span {
                max-width: 230px;

                color: #5d647a;

                font-size: 9px;
                line-height: 1.55;
            }

            .empty-panel a {
                margin-top: 12px;

                color: #aa94ff;

                text-decoration: none;

                font-size: 9px;
                font-weight: 800;
            }


            /* =====================================================
               QUICK ACTIONS
            ====================================================== */

            .quick-actions-section {
                margin-bottom: 15px;
            }

            .quick-actions-grid {
                display: grid;

                grid-template-columns:
                    repeat(2, minmax(0, 1fr));

                gap: 10px;
            }

            .quick-action {
                min-width: 0;

                display: flex;
                align-items: center;

                gap: 11px;

                padding: 14px;

                border-radius: 13px;

                color: #fff;

                background:
                    rgba(14,16,30,.76);

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

                text-decoration: none;

                transition:
                    transform .2s ease,
                    background .2s ease,
                    border-color .2s ease;
            }

            .quick-action:hover {
                color: #fff;

                transform:
                    translateY(-2px);

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

                border-color:
                    rgba(140,99,255,.18);
            }

            .quick-action-icon {
                width: 39px;
                height: 39px;

                min-width: 39px;

                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 10px;

                color: #b69cff;

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

                font-size: 14px;
            }

            .quick-action-content {
                min-width: 0;
                flex: 1;
            }

            .quick-action-content strong {
                display: block;

                color: #e7e8f0;

                font-size: 11px;
                font-weight: 800;
            }

            .quick-action-content span {
                display: block;

                margin-top: 3px;

                color: #60677d;

                font-size: 9px;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .quick-action-arrow {
                color: #5e647a;

                font-size: 11px;
            }


            /* =====================================================
               TABLET
            ====================================================== */

            @media (max-width: 1050px) {

                .project-overview-container {
                    padding-left: 18px;
                    padding-right: 18px;
                }

                .analytics-grid {
                    grid-template-columns:
                        repeat(2, minmax(0, 1fr));
                }

            }


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

            @media (max-width: 767px) {

                .project-overview-container {
                    padding:
                        17px 12px 50px;
                }

                .overview-header {
                    flex-direction: column;

                    align-items: stretch;

                    gap: 16px;

                    margin-bottom: 20px;
                }

                .overview-title {
                    font-size: 27px;
                }

                .overview-subtitle {
                    font-size: 11px;
                }

                .overview-actions {
                    width: 100%;
                }

                .overview-btn {
                    flex: 1;

                    min-height: 42px;
                }


                /* HERO */

                .project-hero-card {
                    height: auto;

                    flex-direction: column;

                    border-radius: 17px;

                    margin-bottom: 28px;
                }

                .project-hero-media {
                    width: 100%;
                    min-width: 0;

                    height: 210px;
                }

                .project-hero-media::after {
                    background:
                        linear-gradient(
                            0deg,
                            rgba(17,20,39,.94),
                            transparent 65%
                        );
                }

                .project-hero-content {
                    padding:
                        17px 18px 19px;
                }

                .project-hero-content h2 {
                    font-size: 21px;
                }

                .project-hero-content p {
                    font-size: 10px;
                    margin-bottom: 13px;
                }

                .hero-meta {
                    gap: 11px;
                    font-size: 9px;
                }


                /* ANALYTICS */

                .analytics-grid {
                    grid-template-columns:
                        repeat(2, minmax(0, 1fr));

                    gap: 8px;

                    margin-bottom: 28px;
                }

                .analytics-card {
                    min-height: 105px;

                    padding: 13px;

                    gap: 9px;

                    border-radius: 13px;
                }

                .analytics-icon {
                    width: 36px;
                    height: 36px;

                    min-width: 36px;

                    border-radius: 9px;

                    font-size: 14px;
                }

                .analytics-info strong {
                    font-size: 15px;
                }

                .analytics-label {
                    font-size: 8px;
                }

                .analytics-info small {
                    font-size: 7px;
                }


                /* PANELS */

                .overview-grid {
                    grid-template-columns: 1fr;

                    gap: 9px;

                    margin-bottom: 28px;
                }

                .overview-panel {
                    min-height: 0;

                    padding: 15px;

                    border-radius: 14px;
                }


                /* QUICK ACTIONS */

                .quick-actions-grid {
                    grid-template-columns: 1fr;

                    gap: 7px;
                }

                .quick-action {
                    padding: 13px;
                }

            }


            /* =====================================================
               SMALL PHONES
            ====================================================== */

            @media (max-width: 420px) {

                .project-overview-container {
                    padding-left: 8px;
                    padding-right: 8px;
                }

                .overview-title {
                    font-size: 24px;
                }

                .overview-actions {
                    gap: 6px;
                }

                .overview-btn {
                    padding: 0 10px;

                    font-size: 10px;
                }

                .project-hero-media {
                    height: 185px;
                }

                .analytics-card {
                    flex-direction: column;

                    align-items: flex-start;

                    min-height: 118px;
                }

                .analytics-info strong {
                    font-size: 14px;
                }

            }

































   /* =========================================================
               LIBRARY
            ========================================================= */

            .projects-library {
                width: 100%;
                max-width: 1320px;
                margin: 0 auto;
                padding: 28px 22px 70px;
                color: #fff;
            }


            /* =========================================================
               HEADER
            ========================================================= */

            .projects-header {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                gap: 30px;
                margin-bottom: 27px;
            }

            .projects-header-copy {
                min-width: 0;
            }

            .projects-eyebrow {
                color: #9f8cff;
                font-size: 9px;
                font-weight: 800;
                letter-spacing: 2px;
                text-transform: uppercase;
                margin-bottom: 6px;
            }

            .projects-title {
                margin: 0;
                color: #fff;
                font-size: 29px;
                line-height: 1.1;
                font-weight: 800;
                letter-spacing: -.8px;
            }

            .projects-subtitle {
                margin: 7px 0 0;
                color: #858ca4;
                font-size: 13px;
                line-height: 1.5;
            }


            /* =========================================================
               CREATE BUTTON
            ========================================================= */

            .projects-create-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                min-height: 42px;
                padding: 0 15px;
                border-radius: 11px;

                background:
                    linear-gradient(
                        135deg,
                        #8c63ff,
                        #ff56cf
                    );

                color: #fff !important;
                text-decoration: none;

                font-size: 12px;
                font-weight: 800;

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

                box-shadow:
                    0 9px 25px rgba(140,99,255,.18),
                    inset 0 1px 0 rgba(255,255,255,.18);

                transition:
                    transform .22s ease,
                    box-shadow .22s ease;
            }

            .projects-create-btn:hover {
                transform: translateY(-2px);

                box-shadow:
                    0 13px 32px rgba(140,99,255,.28),
                    inset 0 1px 0 rgba(255,255,255,.18);
            }

            .projects-create-icon {
                width: 18px;
                height: 18px;

                display: inline-flex;
                align-items: center;
                justify-content: center;

                font-size: 18px;
                line-height: 1;
            }


            /* =========================================================
               ALERT
            ========================================================= */

            .projects-alert {
                display: flex;
                align-items: center;
                gap: 9px;

                padding: 11px 14px;
                margin-bottom: 20px;

                border-radius: 11px;

                color: #c8f7dc;

                background:
                    rgba(54,211,127,.07);

                border:
                    1px solid rgba(54,211,127,.14);

                font-size: 12px;
            }


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

            .projects-grid {
                display: grid;

                grid-template-columns:
                    repeat(3, minmax(0, 1fr));

                gap: 16px;
            }


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

            .project-card {
                min-width: 0;

                overflow: hidden;

                border-radius: 15px;

                background:
                    linear-gradient(
                        145deg,
                        rgba(25,28,48,.96),
                        rgba(12,14,27,.99)
                    );

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

                box-shadow:
                    0 14px 35px rgba(0,0,0,.18),
                    inset 0 1px 0 rgba(255,255,255,.025);

                transition:
                    transform .25s ease,
                    border-color .25s ease,
                    box-shadow .25s ease;
            }

            .project-card:hover {
                transform: translateY(-3px);

                border-color:
                    rgba(140,99,255,.22);

                box-shadow:
                    0 20px 45px rgba(0,0,0,.26),
                    0 0 0 1px rgba(140,99,255,.035);
            }


            /* =========================================================
               FIXED COVER
               
               IMPORTANT:
               The uploaded image can be ANY ratio.
               The card itself will NEVER resize because of it.
            ========================================================= */

            .project-cover {
                position: relative;

                display: block;

                width: 100%;

                height: 205px;

                overflow: hidden;

                background: #101322;

                text-decoration: none;
            }

            .project-cover > img {
                width: 100%;
                height: 100%;

                display: block;

                object-fit: cover;
                object-position: center;

                transition:
                    transform .45s ease;
            }

            .project-card:hover
            .project-cover > img {
                transform: scale(1.035);
            }


            /* =========================================================
               VIDEO
            ========================================================= */

            .project-video-cover {
                position: relative;

                width: 100%;
                height: 100%;

                overflow: hidden;
            }

            .project-video-cover img {
                width: 100%;
                height: 100%;

                display: block;

                object-fit: cover;
                object-position: center;
            }

            .project-video-cover::after {
                content: "";

                position: absolute;
                inset: 0;

                background:
                    linear-gradient(
                        to top,
                        rgba(5,7,15,.55),
                        rgba(5,7,15,.05)
                    );
            }


            /* =========================================================
               PLAY BUTTON
            ========================================================= */

            .project-play {
                position: absolute;

                z-index: 2;

                top: 50%;
                left: 50%;

                width: 46px;
                height: 46px;

                transform:
                    translate(-50%, -50%);

                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 50%;

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

                color: #151522;

                font-size: 21px;

                padding-left: 2px;

                box-shadow:
                    0 9px 25px rgba(0,0,0,.28);
            }


            /* =========================================================
               NO COVER
            ========================================================= */

            .project-no-cover,
            .project-video-placeholder {
                width: 100%;
                height: 100%;

                display: flex;
                align-items: center;
                justify-content: center;

                background:
                    radial-gradient(
                        circle at 50% 35%,
                        rgba(140,99,255,.22),
                        transparent 45%
                    ),
                    #0d1020;

                color: #8c63ff;

                font-size: 38px;
            }

            .project-video-placeholder {
                color: #ff56cf;
            }


            /* =========================================================
               DEFAULT BADGE
            ========================================================= */

            .project-default-badge {
                position: absolute;

                top: 10px;
                left: 10px;

                display: inline-flex;
                align-items: center;
                gap: 5px;

                padding: 6px 9px;

                border-radius: 999px;

                background:
                    rgba(10,12,23,.76);

                backdrop-filter: blur(12px);

                color: #fff;

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

                font-size: 9px;
                font-weight: 800;
            }

            .project-default-badge i {
                color: #ffd76a;
                font-size: 8px;
            }


            /* =========================================================
               CONTENT
            ========================================================= */

            .project-card-content {
                padding: 14px;
            }

            .project-card-top {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;

                gap: 10px;
            }

            .project-info {
                min-width: 0;
                flex: 1;
            }

            .project-info h3 {
                margin: 0;

                color: #fff;

                font-size: 14px;
                line-height: 1.3;
                font-weight: 800;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .project-type {
                display: inline-flex;
                align-items: center;
                gap: 5px;

                margin-top: 5px;

                color: #81889f;

                font-size: 10px;
                font-weight: 600;
            }


            /* =========================================================
               EDIT
            ========================================================= */

            .project-edit-btn {
                flex: 0 0 auto;

                width: 31px;
                height: 31px;

                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 9px;

                color: #969db5;

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

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

                text-decoration: none;

                transition: .2s ease;
            }

            .project-edit-btn:hover {
                color: #fff;

                background:
                    rgba(140,99,255,.13);

                border-color:
                    rgba(140,99,255,.22);
            }


            /* =========================================================
               PLATFORMS
            ========================================================= */

            .project-platforms {
                display: flex;
                align-items: center;

                gap: 5px;

                margin-top: 13px;

                min-height: 25px;
            }

            .project-platform {
                width: 25px;
                height: 25px;

                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 7px;

                color: #bfc4d6;

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

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

                font-size: 11px;
            }

            .project-platform.more {
                color: #9b91ff;

                font-size: 9px;
                font-weight: 800;
            }

            .project-no-links {
                min-height: 25px;

                margin-top: 13px;

                display: flex;
                align-items: center;

                color: #5f667c;

                font-size: 9px;
            }


            /* =========================================================
               VIEW
            ========================================================= */

            .project-view-btn {
                width: 100%;

                min-height: 37px;

                display: flex;
                align-items: center;
                justify-content: space-between;

                margin-top: 13px;

                padding: 0 11px;

                border-radius: 9px;

                color: #d9dcff !important;

                background:
                    rgba(140,99,255,.065);

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

                text-decoration: none;

                font-size: 10px;
                font-weight: 800;

                transition: .2s ease;
            }

            .project-view-btn i {
                transition:
                    transform .2s ease;
            }

            .project-view-btn:hover {
                color: #fff !important;

                background:
                    rgba(140,99,255,.13);

                border-color:
                    rgba(140,99,255,.21);
            }

            .project-view-btn:hover i {
                transform:
                    translateX(3px);
            }


            /* =========================================================
               EMPTY
            ========================================================= */

            .projects-empty {
                padding: 65px 25px;

                text-align: center;

                border-radius: 18px;

                background:
                    radial-gradient(
                        circle at 50% 0%,
                        rgba(140,99,255,.10),
                        transparent 45%
                    ),
                    rgba(255,255,255,.018);

                border:
                    1px dashed rgba(255,255,255,.09);
            }


            .back-link {
                display: inline-flex;
                align-items: center;
                gap: 7px;

                margin-bottom: 17px;

                color: #7e849d;

                font-size: 11px;
                font-weight: 700;

                text-decoration: none;

                transition: .2s ease;
            }

            .back-link:hover {
                color: #fff;
            }

            .back-link i {
                font-size: 12px;
            }

            .projects-empty-icon {
                width: 64px;
                height: 64px;

                margin: 0 auto 17px;

                display: flex;
                align-items: center;
                justify-content: center;

                border-radius: 18px;

                color: #a48aff;

                background:
                    rgba(140,99,255,.09);

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

                font-size: 25px;
            }

            .projects-empty h3 {
                margin: 0;

                color: #fff;

                font-size: 18px;
                font-weight: 800;
            }

            .projects-empty p {
                max-width: 420px;

                margin: 9px auto 22px;

                color: #737a91;

                font-size: 12px;
                line-height: 1.65;
            }

            .projects-empty-btn {
                display: inline-flex;
            }


            /* =========================================================
               TABLET
            ========================================================= */

            @media (max-width: 1100px) {

                .projects-library {
                    padding-left: 18px;
                    padding-right: 18px;
                }

                .projects-grid {
                    grid-template-columns:
                        repeat(2, minmax(0, 1fr));
                }

            }


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

            @media (max-width: 575px) {

                .projects-library {
                    padding:
                        18px 12px 45px;
                }

                .projects-header {
                    align-items: stretch;

                    flex-direction: column;

                    gap: 15px;

                    margin-bottom: 20px;
                }

                .projects-header-action {
                    width: 100%;
                }

                .projects-create-btn {
                    width: 100%;
                }

                .projects-title {
                    font-size: 25px;
                }

                .projects-subtitle {
                    max-width: 310px;

                    font-size: 11px;
                }

                .projects-grid {
                    grid-template-columns: 1fr;

                    gap: 13px;
                }

                /*
                 * Smaller mobile cover.
                 * Still fixed so portrait artwork
                 * cannot make the card taller.
                 */

                .project-cover {
                    height: 190px;
                }

                .project-card-content {
                    padding: 13px;
                }

            }


            /* =========================================================
               SMALL PHONES
            ========================================================= */

            @media (max-width: 380px) {

                .projects-library {
                    padding-left: 8px;
                    padding-right: 8px;
                }

                .project-cover {
                    height: 175px;
                }

                .project-info h3 {
                    font-size: 13px;
                }

            }
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
         /* Edit Page */   
            
            
            
              .project-wizard-page {
            min-height: 100vh;
            padding: 35px 0 70px;
        }

        .project-wizard-container {
            width: min(1180px, calc(100% - 32px));
            margin: 0 auto;
        }

        .project-wizard-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 30px;
            margin-bottom: 30px;
        }

        .project-eyebrow,
        .wizard-section-kicker,
        .preview-label,
        .current-media-label {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .18em;
            color: #9276ff;
            text-transform: uppercase;
        }

        .project-wizard-header h1 {
            margin: 7px 0 5px;
            font-size: 34px;
            font-weight: 800;
            letter-spacing: -.04em;
            color: #fff;
        }

        .project-wizard-header p {
            margin: 0;
            color: #8589a7;
            font-size: 14px;
        }

        .back-projects {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #a8acc8;
            text-decoration: none;
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
        }

        .back-projects:hover {
            color: #fff;
        }

        .project-success {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 13px 16px;
            margin-bottom: 20px;
            border-radius: 12px;
            background: rgba(72, 211, 145, .08);
            border: 1px solid rgba(72, 211, 145, .18);
            color: #7de0b1;
            font-size: 13px;
        }

        .project-wizard-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 280px;
            gap: 28px;
            align-items: start;
        }

        .wizard-progress {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .wizard-progress-step {
            border: 0;
            background: none;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 9px;
            color: #656a88;
            cursor: pointer;
        }

        .wizard-progress-step.active {
            color: #fff;
        }

        .wizard-progress-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            border: 1px solid rgba(255,255,255,.09);
            background: rgba(255,255,255,.025);
            font-size: 10px;
            font-weight: 800;
        }

        .wizard-progress-step.active .wizard-progress-number {
            border-color: transparent;
            background: linear-gradient(135deg,#8c63ff,#ff56cf);
            box-shadow: 0 6px 20px rgba(140,99,255,.3);
        }

        .wizard-progress-step.completed .wizard-progress-number {
            background: rgba(140,99,255,.16);
            border-color: rgba(140,99,255,.25);
            color: #a58bff;
        }

        .wizard-progress-label {
            font-size: 11px;
            font-weight: 700;
        }

        .wizard-progress-line {
            height: 1px;
            flex: 1;
            min-width: 25px;
            margin: 0 12px;
            background: rgba(255,255,255,.07);
        }

        .wizard-progress-line.active {
            background: linear-gradient(
                90deg,
                #8c63ff,
                #ff56cf
            );
        }

        .project-wizard-card {
            padding: 30px;
            border-radius: 22px;
            background:
                linear-gradient(
                    145deg,
                    rgba(28,31,55,.97),
                    rgba(14,16,31,.98)
                );
            border: 1px solid rgba(255,255,255,.07);
            box-shadow:
                0 25px 70px rgba(0,0,0,.28),
                inset 0 1px 0 rgba(255,255,255,.035);
        }

        .wizard-section-kicker {
            margin-bottom: 8px;
        }

        .wizard-section-title {
            color: #fff;
            font-size: 23px;
            font-weight: 800;
            letter-spacing: -.03em;
            margin: 0 0 7px;
        }

        .wizard-section-subtitle {
            color: #777c9a;
            font-size: 13px;
            margin: 0 0 27px;
            line-height: 1.6;
        }

        .form-group {
            margin-bottom: 0;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            color: #bfc3da;
            font-size: 11px;
            font-weight: 750;
        }

        .form-control,
        .form-select {
            width: 100%;
            min-height: 49px;
            border-radius: 11px;
            border: 1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.035);
            color: #fff;
            padding: 0 14px;
            font-size: 13px;
            box-shadow: none;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: rgba(140,99,255,.65);
            background: rgba(255,255,255,.045);
            color: #fff;
            box-shadow: 0 0 0 3px rgba(140,99,255,.08);
        }

        .form-control::placeholder {
            color: #555a75;
        }

        .form-select option {
            background: #17192c;
            color: #fff;
        }

        .project-type-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .project-type-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 17px;
            border-radius: 14px;
            text-align: left;
            background: rgba(255,255,255,.025);
            border: 1px solid rgba(255,255,255,.07);
            color: #fff;
            transition: .22s ease;
            cursor: pointer;
        }

        .project-type-card:hover {
            border-color: rgba(140,99,255,.35);
            background: rgba(140,99,255,.045);
        }

        .project-type-card.selected {
            border-color: rgba(140,99,255,.65);
            background: linear-gradient(
                135deg,
                rgba(140,99,255,.11),
                rgba(255,86,207,.055)
            );
        }

        .project-type-icon {
            width: 42px;
            height: 42px;
            min-width: 42px;
            display: grid;
            place-items: center;
            border-radius: 11px;
            background: rgba(140,99,255,.12);
            color: #a68dff;
            font-size: 18px;
        }

        .project-type-content {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .project-type-content strong {
            font-size: 13px;
        }

        .project-type-content span {
            color: #717692;
            font-size: 10px;
        }

        .project-type-check {
            margin-left: auto;
            color: #a58aff;
            font-size: 17px;
        }

        .wizard-error {
            color: #ff718d;
            font-size: 11px;
            margin-top: 7px;
        }

        .wizard-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,.055);
        }

        .wizard-btn {
            min-height: 45px;
            border: 0;
            border-radius: 11px;
            padding: 0 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 800;
            transition: .2s ease;
        }

        .wizard-btn.secondary {
            background: rgba(255,255,255,.045);
            border: 1px solid rgba(255,255,255,.07);
            color: #aeb2cb;
        }

        .wizard-btn.secondary:hover {
            color: #fff;
            background: rgba(255,255,255,.07);
        }

        .wizard-btn.primary {
            color: #fff;
            background: linear-gradient(135deg,#8c63ff,#ff56cf);
            box-shadow: 0 10px 25px rgba(140,99,255,.22);
        }

        .wizard-btn.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 30px rgba(140,99,255,.3);
        }

        /* =====================================================
           CURRENT MEDIA
        ====================================================== */

        .current-media-card {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 13px;
            border-radius: 15px;
            background: rgba(255,255,255,.025);
            border: 1px solid rgba(255,255,255,.07);
        }

        .current-artwork {
            width: 105px;
            height: 105px;
            flex-shrink: 0;
            border-radius: 11px;
            overflow: hidden;
            background: #101222;
        }

        .current-artwork img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .current-media-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .current-media-info strong {
            color: #fff;
            font-size: 14px;
        }

        .current-media-info > span:not(.current-media-label) {
            color: #6e738f;
            font-size: 11px;
        }

        .media-action-btn {
            width: fit-content;
            margin-top: 7px;
            border: 0;
            background: none;
            color: #a48bff;
            font-size: 11px;
            font-weight: 750;
            padding: 0;
        }

        .upload-box {
            border: 1px dashed rgba(140,99,255,.35);
            border-radius: 15px;
            background: rgba(140,99,255,.035);
            overflow: hidden;
        }

        .upload-content {
            min-height: 190px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 8px;
            cursor: pointer;
        }

        .upload-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: rgba(140,99,255,.11);
            color: #a48bff;
            font-size: 21px;
            margin-bottom: 3px;
        }

        .upload-content strong {
            color: #fff;
            font-size: 13px;
        }

        .upload-content > span {
            color: #666b86;
            font-size: 10px;
        }

        .upload-preview {
            width: 100px;
            height: 100px;
            overflow: hidden;
            border-radius: 12px;
            margin-bottom: 3px;
        }

        .upload-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .media-subsection {
            margin-top: 25px;
        }

        .media-subsection-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .media-subsection-heading > div {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .media-subsection-heading strong {
            color: #fff;
            font-size: 13px;
        }

        .optional-badge {
            padding: 4px 7px;
            border-radius: 5px;
            background: rgba(255,255,255,.05);
            color: #707590;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: .08em;
        }

        .existing-audio {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-radius: 12px;
            background: rgba(255,255,255,.025);
            border: 1px solid rgba(255,255,255,.06);
        }

        .audio-icon {
            width: 38px;
            height: 38px;
            min-width: 38px;
            display: grid;
            place-items: center;
            border-radius: 10px;
            background: rgba(255,86,207,.09);
            color: #ff70d6;
        }

        .audio-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .audio-info strong {
            color: #fff;
            font-size: 12px;
        }

        .audio-info span {
            color: #656a84;
            font-size: 10px;
        }

        .audio-action,
        .audio-delete {
            border: 0;
            background: none;
            color: #9b83ff;
            font-size: 10px;
            font-weight: 750;
        }

        .audio-delete {
            color: #e76c82;
            font-size: 13px;
        }

        .audio-upload-box {
            border: 1px dashed rgba(255,255,255,.09);
            border-radius: 12px;
            background: rgba(255,255,255,.02);
        }

        .audio-upload-label {
            min-height: 58px;
            padding: 0 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            color: #858aa5;
            font-size: 11px;
            font-weight: 700;
        }

        .audio-upload-label i {
            color: #9b82ff;
            font-size: 18px;
        }

        .restore-media-btn {
            border: 0;
            background: none;
            color: #9b83ff;
            padding: 8px 0 0;
            font-size: 10px;
            font-weight: 750;
        }

        .default-project-box {
            margin-top: 25px;
            padding: 15px;
            border-radius: 13px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            background: rgba(255,255,255,.025);
            border: 1px solid rgba(255,255,255,.06);
        }

        .default-project-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .default-project-copy strong {
            color: #fff;
            font-size: 12px;
        }

        .default-project-copy span {
            color: #656a84;
            font-size: 10px;
        }

        .toggle-switch {
            position: relative;
            width: 42px;
            height: 23px;
            flex-shrink: 0;
        }

        .toggle-switch input {
            display: none;
        }

        .toggle-slider {
            position: absolute;
            inset: 0;
            border-radius: 30px;
            background: #303349;
            cursor: pointer;
            transition: .2s;
        }

        .toggle-slider:before {
            content: "";
            position: absolute;
            width: 17px;
            height: 17px;
            top: 3px;
            left: 3px;
            border-radius: 50%;
            background: #969ab2;
            transition: .2s;
        }

        .toggle-switch input:checked + .toggle-slider {
            background: linear-gradient(135deg,#8c63ff,#ff56cf);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(19px);
            background: #fff;
        }

        /* =====================================================
           VIDEO
        ====================================================== */

        .video-preview {
            position: relative;
            margin-top: 15px;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 14px;
            background: #0c0e19;
            border: 1px solid rgba(255,255,255,.07);
        }

        .video-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-preview-overlay {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            background: rgba(0,0,0,.22);
        }

        .video-play {
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: rgba(255,255,255,.92);
            color: #17192b;
            font-size: 23px;
        }

        .video-preview-label {
            position: absolute;
            left: 12px;
            bottom: 12px;
            padding: 6px 9px;
            border-radius: 7px;
            background: rgba(0,0,0,.65);
            backdrop-filter: blur(8px);
            color: #fff;
            font-size: 9px;
            font-weight: 750;
        }

        /* =====================================================
           PLATFORMS
        ====================================================== */

        .platform-links-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .platform-link-row {
            padding: 14px;
            border-radius: 14px;
            background: rgba(255,255,255,.025);
            border: 1px solid rgba(255,255,255,.06);
        }

        .platform-row-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 11px;
        }

        .platform-row-number {
            color: #777c98;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .1em;
        }

        .remove-platform {
            width: 26px;
            height: 26px;
            display: grid;
            place-items: center;
            border: 0;
            border-radius: 7px;
            background: rgba(255,70,100,.07);
            color: #db7186;
            font-size: 9px;
        }

        .platform-row-fields {
            display: grid;
            grid-template-columns: .8fr 1.4fr .8fr;
            gap: 10px;
        }

        .add-platform-btn {
            margin-top: 12px;
            width: 100%;
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            border-radius: 12px;
            border: 1px dashed rgba(140,99,255,.25);
            background: rgba(140,99,255,.025);
            color: #9b83ff;
            font-size: 11px;
            font-weight: 750;
        }

        .add-platform-btn:hover {
            background: rgba(140,99,255,.06);
            border-color: rgba(140,99,255,.4);
        }

        .add-platform-icon {
            width: 25px;
            height: 25px;
            display: grid;
            place-items: center;
            border-radius: 7px;
            background: rgba(140,99,255,.12);
        }

        .platform-note {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            margin-top: 15px;
            padding: 12px;
            border-radius: 10px;
            background: rgba(255,255,255,.018);
            color: #656a84;
            font-size: 10px;
            line-height: 1.55;
        }

        .platform-note i {
            color: #9b83ff;
            margin-top: 1px;
        }

        /* =====================================================
           PREVIEW
        ====================================================== */

        .project-preview-sidebar {
            position: sticky;
            top: 25px;
        }

        .preview-label {
            margin-bottom: 10px;
        }

        .preview-card {
            overflow: hidden;
            border-radius: 19px;
            background: #111324;
            border: 1px solid rgba(255,255,255,.07);
            box-shadow: 0 20px 50px rgba(0,0,0,.25);
        }

        .preview-cover {
            aspect-ratio: 1;
            overflow: hidden;
            background: #0c0e19;
        }

        .preview-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .preview-placeholder {
            width: 100%;
            height: 100%;
            display: grid;
            place-items: center;
            color: #4e536f;
            font-size: 45px;
            background:
                radial-gradient(
                    circle at 30% 20%,
                    rgba(140,99,255,.15),
                    transparent 50%
                ),
                #101222;
        }

        .preview-content {
            padding: 17px;
        }

        .preview-type {
            color: #9a81ff;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: .16em;
        }

        .preview-content h3 {
            margin: 5px 0 12px;
            color: #fff;
            font-size: 16px;
            font-weight: 800;
        }

        .preview-platforms {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .preview-platforms span {
            padding: 5px 7px;
            border-radius: 5px;
            background: rgba(255,255,255,.05);
            color: #777c96;
            font-size: 8px;
        }

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

        @media (max-width: 991px) {

            .project-wizard-layout {
                grid-template-columns: 1fr;
            }

            .project-preview-sidebar {
                display: none;
            }

        }

        @media (max-width: 767px) {

            .project-wizard-page {
                padding: 20px 0 35px;
            }

            .project-wizard-container {
                width: calc(100% - 12px);
            }

            .project-wizard-header {
                align-items: flex-start;
                flex-direction: column;
                gap: 12px;
                margin-bottom: 20px;
            }

            .project-wizard-header h1 {
                font-size: 27px;
            }

            .project-wizard-header p {
                font-size: 12px;
            }

            .project-wizard-card {
                padding: 18px 15px;
                border-radius: 18px;
            }

            .wizard-progress {
                margin-bottom: 13px;
            }

            .wizard-progress-number {
                width: 29px;
                height: 29px;
                min-width: 29px;
            }

            .wizard-progress-label {
                font-size: 9px;
            }

            .wizard-progress-line {
                min-width: 15px;
                margin: 0 6px;
            }

            .wizard-section-title {
                font-size: 19px;
            }

            .wizard-section-subtitle {
                font-size: 11px;
                margin-bottom: 20px;
            }

            .project-type-grid {
                grid-template-columns: 1fr;
            }

            .current-media-card {
                align-items: flex-start;
            }

            .current-artwork {
                width: 80px;
                height: 80px;
            }

            .platform-row-fields {
                grid-template-columns: 1fr;
                gap: 9px;
            }

            .wizard-actions {
                margin-top: 20px;
                padding-top: 15px;
            }

            .wizard-btn {
                min-height: 45px;
            }

        }

        @media (max-width: 420px) {

            .project-wizard-container {
                width: calc(100% - 8px);
            }

            .project-wizard-card {
                padding: 16px 13px;
                border-radius: 16px;
            }

            .wizard-progress-label {
                font-size: 8px;
            }

            .wizard-progress-line {
                min-width: 10px;
                margin: 0 4px;
            }

            .wizard-actions {
                flex-direction: column-reverse;
            }

            .wizard-btn {
                width: 100%;
            }

        }






































/* Create Page */


  /* ============================================================
           BASE
        ============================================================ */

        .project-wizard-page {
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
            padding: 5px 0 70px;
            color: #fff;
        }


        /* ============================================================
           HEADER
        ============================================================ */

        .wizard-header {
            margin-bottom: 27px;
        }

        .wizard-back {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 18px;
            color: #777f97;
            text-decoration: none;
            font-size: 16px;
            font-weight: 700;
            transition: .2s ease;
        }

        .wizard-back:hover {
            color: #fff;
        }

        .wizard-eyebrow {
            margin-bottom: 7px;
            color: #9d89ff;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 2px;
        }

        .wizard-header h1 {
            margin: 0;
            color: #fff;
            font-size: 31px;
            line-height: 1.15;
            font-weight: 850;
            letter-spacing: -1px;
        }

        .wizard-header p {
            margin: 8px 0 0;
            color: #777f96;
            font-size: 12px;
            line-height: 1.7;
        }


        /* ============================================================
           PROGRESS
        ============================================================ */

        .wizard-progress {
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 22px;
            padding: 13px 15px;
            border-radius: 15px;
            background: rgba(255,255,255,.025);
            border: 1px solid rgba(255,255,255,.06);
        }

        .wizard-step {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 0;
            border: 0;
            background: transparent;
            color: #60687d;
            text-align: left;
            cursor: pointer;
        }

        .wizard-step-number {
            width: 32px;
            height: 32px;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: rgba(255,255,255,.035);
            border: 1px solid rgba(255,255,255,.07);
            font-size: 12px;
            font-weight: 900;
            transition: .2s ease;
        }

        .wizard-step-copy strong {
            display: block;
            color: #666e84;
            font-size: 10px;
            font-weight: 800;
        }

        .wizard-step-copy small {
            display: block;
            margin-top: 2px;
            color: #454d62;
            font-size: 12px;
        }

        .wizard-step.active {
            color: #fff;
        }

        .wizard-step.active .wizard-step-number {
            color: #fff;
            background: linear-gradient(135deg,#8c63ff,#ff56cf);
            border-color: transparent;
            box-shadow: 0 6px 20px rgba(140,99,255,.22);
        }

        .wizard-step.active .wizard-step-copy strong {
            color: #fff;
        }

        .wizard-step.completed .wizard-step-number {
            color: #fff;
            background: rgba(140,99,255,.14);
            border-color: rgba(140,99,255,.25);
        }

        .wizard-step.completed .wizard-step-copy strong {
            color: #a99aff;
        }

        .wizard-line {
            flex: 1;
            height: 1px;
            margin: 0 14px;
            background: rgba(255,255,255,.06);
        }

        .wizard-line.completed {
            background: linear-gradient(
                90deg,
                rgba(140,99,255,.55),
                rgba(255,86,207,.4)
            );
        }


        /* ============================================================
           ERROR
        ============================================================ */

        .wizard-errors {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
            padding: 14px 16px;
            border-radius: 13px;
            background: rgba(255,70,100,.06);
            border: 1px solid rgba(255,70,100,.13);
        }

        .wizard-error-icon {
            color: #ff718b;
            font-size: 16px;
        }

        .wizard-errors strong {
            color: #fff;
            font-size: 11px;
        }

        .wizard-errors ul {
            margin: 5px 0 0;
            padding-left: 16px;
            color: #ffabb9;
            font-size: 12px;
            line-height: 1.7;
        }


        /* ============================================================
           LAYOUT
        ============================================================ */

        .wizard-layout {
            display: grid;
            grid-template-columns: minmax(0,1fr) 290px;
            gap: 22px;
            align-items: start;
        }

        .wizard-main {
            min-width: 0;
        }


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

        .wizard-card {
            overflow: hidden;
            border-radius: 19px;
            background:
                linear-gradient(
                    145deg,
                    rgba(25,28,48,.97),
                    rgba(11,14,27,.99)
                );
            border: 1px solid rgba(255,255,255,.065);
            box-shadow:
                0 20px 50px rgba(0,0,0,.18),
                inset 0 1px 0 rgba(255,255,255,.025);
        }

        .wizard-card-header {
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 22px 23px;
            border-bottom: 1px solid rgba(255,255,255,.055);
        }

        .wizard-card-icon {
            width: 40px;
            height: 40px;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            color: #ab9bff;
            background: rgba(140,99,255,.10);
            border: 1px solid rgba(140,99,255,.12);
            font-size: 16px;
        }

        .wizard-card-header span {
            color: #8074a6;
            font-size: 8px;
            font-weight: 900;
            letter-spacing: 1.5px;
        }

        .wizard-card-header h2 {
            margin: 4px 0 0;
            color: #fff;
            font-size: 15px;
            font-weight: 800;
        }

        .wizard-card-header p {
            margin: 4px 0 0;
            color: #687087;
            font-size: 9px;
        }

        .wizard-card-body {
            padding: 24px;
        }


        /* ============================================================
           FIELDS
        ============================================================ */

        .wizard-field {
            margin-bottom: 27px;
        }

        .wizard-field:last-child {
            margin-bottom: 0;
        }

        .wizard-field > label {
            display: block;
            margin-bottom: 9px;
            color: #d8dbe6;
            font-size: 10px;
            font-weight: 800;
        }

        .wizard-input {
            width: 100%;
            height: 50px;
            padding: 0 15px;
            outline: none;
            border-radius: 11px;
            color: #fff;
            background: rgba(255,255,255,.035);
            border: 1px solid rgba(255,255,255,.08);
            font-size: 12px;
            transition: .2s ease;
        }

        .wizard-input::placeholder {
            color: #4e566b;
        }

        .wizard-input:focus {
            border-color: rgba(140,99,255,.45);
            background: rgba(140,99,255,.035);
            box-shadow: 0 0 0 3px rgba(140,99,255,.06);
        }

        .wizard-input.invalid {
            border-color: rgba(255,80,110,.45);
        }

        .wizard-field > small {
            display: block;
            margin-top: 7px;
            color: #555d72;
            font-size: 9px;
        }

        .wizard-field-error {
            margin-top: 7px;
            color: #ff8299;
            font-size: 9px;
        }


        /* ============================================================
           PROJECT TYPES
        ============================================================ */

        .project-type-options {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 10px;
        }

        .project-type-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 11px;
            min-height: 105px;
            padding: 15px;
            text-align: left;
            border-radius: 13px;
            color: #fff;
            background: rgba(255,255,255,.025);
            border: 1px solid rgba(255,255,255,.07);
            cursor: pointer;
            transition: .22s ease;
        }

        .project-type-card:hover {
            border-color: rgba(255,255,255,.14);
            background: rgba(255,255,255,.04);
        }

        .project-type-card.selected {
            background: rgba(140,99,255,.075);
            border-color: rgba(140,99,255,.40);
            box-shadow: inset 0 0 30px rgba(140,99,255,.025);
        }

        .project-type-icon {
            width: 43px;
            height: 43px;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            color: #a998ff;
            background: rgba(140,99,255,.10);
            font-size: 18px;
        }

        .project-type-icon.video {
            color: #ff7894;
            background: rgba(255,70,100,.08);
        }

        .project-type-text {
            min-width: 0;
        }

        .project-type-text strong {
            display: block;
            color: #e5e7ef;
            font-size: 11px;
            font-weight: 800;
        }

        .project-type-text span {
            display: block;
            max-width: 180px;
            margin-top: 5px;
            color: #656d83;
            font-size: 9px;
            line-height: 1.5;
        }

        .project-type-radio {
            position: absolute;
            top: 11px;
            right: 11px;
            width: 19px;
            height: 19px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.10);
            color: #fff;
            font-size: 9px;
        }

        .project-type-card.selected .project-type-radio {
            background: #8c63ff;
            border-color: #8c63ff;
        }


        /* ============================================================
           MEDIA
        ============================================================ */

        .wizard-media-block {
            padding: 20px 0;
            border-bottom: 1px solid rgba(255,255,255,.055);
        }

        .wizard-media-block:first-child {
            padding-top: 0;
        }

        .wizard-media-block:last-of-type {
            border-bottom: 0;
        }

        .wizard-media-heading {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .wizard-media-icon {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            color: #a797ff;
            background: rgba(140,99,255,.09);
            font-size: 14px;
        }

        .wizard-media-icon.youtube {
            color: #ff718c;
            background: rgba(255,70,100,.07);
        }

        .wizard-media-heading strong {
            display: block;
            color: #dfe2ec;
            font-size: 11px;
        }

        .wizard-media-heading span {
            display: block;
            margin-top: 3px;
            color: #60687d;
            font-size: 9px;
        }


        /* ART UPLOAD */

        .wizard-art-upload {
            position: relative;
            min-height: 300px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            background:
                radial-gradient(
                    circle at center,
                    rgba(140,99,255,.08),
                    transparent 55%
                ),
                rgba(255,255,255,.018);
            border: 1px dashed rgba(255,255,255,.12);
            cursor: pointer;
            transition: .25s ease;
        }

        .wizard-art-upload:hover {
            border-color: rgba(140,99,255,.38);
        }

        .wizard-art-upload > img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .wizard-art-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 6px;
            color: #fff;
            background: rgba(4,5,12,.65);
            opacity: 0;
            transition: .2s ease;
            font-size: 10px;
            font-weight: 800;
        }

        .wizard-art-upload:hover .wizard-art-overlay {
            opacity: 1;
        }

        .wizard-upload-empty {
            display: flex;
            align-items: center;
            flex-direction: column;
            text-align: center;
        }

        .wizard-upload-icon {
            width: 56px;
            height: 56px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            color: #a998ff;
            background: rgba(140,99,255,.10);
            font-size: 25px;
        }

        .wizard-upload-empty strong {
            color: #e1e3ec;
            font-size: 12px;
        }

        .wizard-upload-empty span {
            margin-top: 5px;
            color: #70788f;
            font-size: 10px;
        }

        .wizard-upload-empty small {
            margin-top: 9px;
            color: #50586e;
            font-size: 9px;
        }

        .wizard-upload-loading {
            margin-top: 7px;
            color: #9d8cff;
            font-size: 9px;
        }


        /* AUDIO UPLOAD */

        .wizard-audio-upload {
            display: flex;
            align-items: center;
            gap: 11px;
            min-height: 72px;
            padding: 12px;
            border-radius: 12px;
            background: rgba(255,255,255,.018);
            border: 1px dashed rgba(255,255,255,.10);
            cursor: pointer;
            transition: .2s ease;
        }

        .wizard-audio-upload:hover {
            border-color: rgba(140,99,255,.30);
            background: rgba(140,99,255,.035);
        }

        .wizard-audio-upload > span {
            width: 38px;
            height: 38px;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: #a797ff;
            background: rgba(140,99,255,.09);
        }

        .wizard-audio-upload strong {
            display: block;
            color: #d8dbe5;
            font-size: 10px;
        }

        .wizard-audio-upload small {
            display: block;
            margin-top: 4px;
            color: #60687e;
            font-size: 8px;
        }


        /* SELECTED FILE */

        .wizard-selected-file {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px;
            border-radius: 11px;
            background: rgba(140,99,255,.06);
            border: 1px solid rgba(140,99,255,.13);
        }

        .wizard-file-icon {
            width: 37px;
            height: 37px;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            color: #a898ff;
            background: rgba(140,99,255,.09);
        }

        .wizard-file-info {
            min-width: 0;
            flex: 1;
        }

        .wizard-file-info strong {
            display: block;
            overflow: hidden;
            color: #dfe2eb;
            font-size: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .wizard-file-info span {
            display: block;
            margin-top: 3px;
            color: #626a80;
            font-size: 8px;
        }

        .wizard-selected-file button {
            width: 29px;
            height: 29px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0;
            border-radius: 8px;
            color: #ff7b94;
            background: rgba(255,70,100,.07);
            cursor: pointer;
        }


        /* YOUTUBE */

        .wizard-youtube-input {
            display: flex;
            align-items: center;
            height: 48px;
            overflow: hidden;
            border-radius: 11px;
            background: rgba(255,255,255,.03);
            border: 1px solid rgba(255,255,255,.08);
        }

        .wizard-youtube-input > div {
            width: 45px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff718b;
            border-right: 1px solid rgba(255,255,255,.06);
        }

        .wizard-youtube-input input {
            width: 100%;
            height: 100%;
            padding: 0 13px;
            outline: none;
            border: 0;
            color: #fff;
            background: transparent;
            font-size: 11px;
        }

        .wizard-youtube-input input::placeholder {
            color: #50586c;
        }

        .wizard-video-preview {
            position: relative;
            aspect-ratio: 16 / 8;
            margin-top: 14px;
            overflow: hidden;
            border-radius: 13px;
        }

        .wizard-video-preview img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .wizard-video-preview::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,.20);
        }

        .wizard-video-play {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 2px;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            color: #171720;
            background: rgba(255,255,255,.92);
            font-size: 22px;
        }


        /* DEFAULT */

        .wizard-default {
            margin-top: 22px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,.055);
        }

        .wizard-default label {
            display: flex;
            align-items: center;
            gap: 11px;
            cursor: pointer;
        }

        .wizard-default input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .wizard-switch {
            position: relative;
            width: 38px;
            height: 21px;
            flex: 0 0 auto;
            border-radius: 999px;
            background: #24293b;
            border: 1px solid rgba(255,255,255,.08);
            transition: .2s ease;
        }

        .wizard-switch::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: #70778a;
            transition: .2s ease;
        }

        .wizard-default input:checked + .wizard-switch {
            background: #7655df;
            border-color: #8c63ff;
        }

        .wizard-default input:checked + .wizard-switch::after {
            transform: translateX(16px);
            background: #fff;
        }

        .wizard-default-copy strong {
            display: block;
            color: #dfe2ea;
            font-size: 10px;
        }

        .wizard-default-copy small {
            display: block;
            margin-top: 4px;
            color: #60687e;
            font-size: 8px;
        }


        /* ============================================================
           PLATFORM LINKS
        ============================================================ */

        .platform-intro {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
            padding: 13px;
            border-radius: 12px;
            background: rgba(140,99,255,.045);
            border: 1px solid rgba(140,99,255,.08);
        }

        .platform-intro-icon {
            width: 35px;
            height: 35px;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            color: #aa99ff;
            background: rgba(140,99,255,.09);
        }

        .platform-intro strong {
            display: block;
            color: #dfe2ea;
            font-size: 10px;
        }

        .platform-intro p {
            margin: 4px 0 0;
            color: #626a81;
            font-size: 8px;
        }

        .wizard-platform-list {
            display: flex;
            flex-direction: column;
            gap: 9px;
        }

        .wizard-platform-row {
            display: grid;
            grid-template-columns: 30px 145px minmax(150px,1fr) 130px 34px;
            gap: 8px;
            align-items: end;
            padding: 9px 0;
        }

        .platform-index {
            padding-bottom: 11px;
            color: #50586d;
            font-size: 9px;
            font-weight: 900;
            text-align: center;
        }

        .platform-control label {
            display: block;
            margin-bottom: 5px;
            color: #626a80;
            font-size: 8px;
            font-weight: 700;
        }

        .platform-control input,
        .platform-control select {
            width: 100%;
            height: 40px;
            padding: 0 10px;
            outline: none;
            border-radius: 9px;
            color: #dfe2eb;
            background: rgba(255,255,255,.03);
            border: 1px solid rgba(255,255,255,.065);
            font-size: 9px;
        }

        .platform-control input::placeholder {
            color: #4d556a;
        }

        .platform-control input:focus,
        .platform-control select:focus {
            border-color: rgba(140,99,255,.40);
            box-shadow: 0 0 0 3px rgba(140,99,255,.05);
        }

        .platform-control select option {
            color: #111;
            background: #fff;
        }

        .wizard-remove-platform {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 3px;
            border-radius: 9px;
            color: #737b91;
            background: rgba(255,255,255,.025);
            border: 1px solid rgba(255,255,255,.06);
            cursor: pointer;
        }

        .wizard-remove-platform:hover {
            color: #ff7892;
            background: rgba(255,70,100,.07);
        }

        .wizard-add-platform {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 10px;
            padding: 9px 12px;
            border-radius: 9px;
            color: #a897ff;
            background: rgba(140,99,255,.06);
            border: 1px solid rgba(140,99,255,.12);
            font-size: 9px;
            font-weight: 800;
            cursor: pointer;
        }

        .wizard-final-note {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 22px;
            padding-top: 17px;
            border-top: 1px solid rgba(255,255,255,.055);
            color: #616a81;
            font-size: 8px;
        }

        .wizard-final-note i {
            color: #7e6ce1;
            font-size: 12px;
        }


        /* ============================================================
           ACTIONS
        ============================================================ */

        .wizard-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 14px;
        }

        .wizard-back-btn {
            min-height: 44px;
            padding: 0 15px;
            border-radius: 10px;
            color: #858ca1;
            background: transparent;
            border: 1px solid rgba(255,255,255,.07);
            font-size: 10px;
            font-weight: 800;
            cursor: pointer;
        }

        .wizard-back-btn:hover {
            color: #fff;
            background: rgba(255,255,255,.03);
        }

        .wizard-next,
        .wizard-create {
            min-height: 44px;
            padding: 0 18px;
            border: 0;
            border-radius: 10px;
            color: #fff;
            background: linear-gradient(135deg,#8c63ff,#ff56cf);
            box-shadow: 0 10px 28px rgba(140,99,255,.20);
            font-size: 10px;
            font-weight: 800;
            cursor: pointer;
            transition: .2s ease;
        }

        .wizard-next:hover,
        .wizard-create:hover {
            transform: translateY(-1px);
            box-shadow: 0 13px 32px rgba(140,99,255,.28);
        }

        .wizard-create:disabled {
            opacity: .6;
            cursor: wait;
            transform: none;
        }


        /* ============================================================
           SIDEBAR
        ============================================================ */

        .wizard-sidebar {
            position: sticky;
            top: 20px;
        }

        .wizard-preview {
            overflow: hidden;
            border-radius: 18px;
            background:
                linear-gradient(
                    145deg,
                    rgba(25,28,48,.98),
                    rgba(10,13,25,.99)
                );
            border: 1px solid rgba(255,255,255,.07);
            box-shadow: 0 20px 50px rgba(0,0,0,.20);
        }

        .wizard-preview-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 16px 11px;
        }

        .wizard-preview-top span:first-child {
            color: #81769f;
            font-size: 8px;
            font-weight: 900;
            letter-spacing: 1.5px;
        }

        .wizard-preview-top span:last-child {
            color: #555d72;
            font-size: 8px;
            font-weight: 800;
        }

        .wizard-preview-art {
            position: relative;
            margin: 0 13px;
            overflow: hidden;
            aspect-ratio: 1 / 1;
            border-radius: 14px;
            background: #0b0e1b;
        }

        .wizard-preview-art img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        .wizard-preview-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #765bc8;
            background:
                radial-gradient(
                    circle at center,
                    rgba(140,99,255,.17),
                    transparent 52%
                ),
                #0b0e1b;
            font-size: 40px;
        }

        .wizard-preview-info {
            padding: 16px;
        }

        .wizard-preview-type {
            color: #9584e9;
            font-size: 7px;
            font-weight: 900;
            letter-spacing: 1.4px;
        }

        .wizard-preview-info h3 {
            margin: 6px 0 0;
            color: #fff;
            font-size: 16px;
            font-weight: 800;
            line-height: 1.3;
            word-break: break-word;
        }

        .wizard-preview-info p {
            margin: 7px 0 0;
            color: #626a80;
            font-size: 8px;
            line-height: 1.6;
        }

        .wizard-preview-default {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 12px;
            padding: 6px 8px;
            border-radius: 999px;
            color: #d7ceff;
            background: rgba(140,99,255,.07);
            border: 1px solid rgba(140,99,255,.10);
            font-size: 7px;
            font-weight: 800;
        }

        .wizard-preview-default i {
            color: #ffd76a;
            font-size: 7px;
        }


        /* ============================================================
           TIP
        ============================================================ */

        .wizard-tip {
            display: flex;
            gap: 9px;
            margin-top: 12px;
            padding: 13px;
            border-radius: 13px;
            background: rgba(255,255,255,.018);
            border: 1px solid rgba(255,255,255,.05);
        }

        .wizard-tip-icon {
            width: 31px;
            height: 31px;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            color: #a595ff;
            background: rgba(140,99,255,.08);
            font-size: 12px;
        }

        .wizard-tip strong {
            display: block;
            color: #cfd2de;
            font-size: 9px;
        }

        .wizard-tip p {
            margin: 4px 0 0;
            color: #60687e;
            font-size: 8px;
            line-height: 1.6;
        }


        /* ============================================================
           RESPONSIVE
        ============================================================ */

        @media (max-width: 991px) {

            .wizard-layout {
                grid-template-columns: 1fr;
            }

            .wizard-sidebar {
                display: none;
            }

            .wizard-platform-row {
                grid-template-columns: 30px 1fr 1fr 34px;
            }

            .platform-control:nth-child(4) {
                grid-column: 2 / 4;
            }

        }


        @media (max-width: 575px) {

            .project-wizard-page {
                padding-bottom: 40px;
            }

            .wizard-header {
                margin-bottom: 20px;
            }

            .wizard-header h1 {
                font-size: 25px;
            }

            .wizard-header p {
                font-size: 10px;
            }


            /* MOBILE PROGRESS */

            .wizard-progress {
                padding: 10px;
            }

            .wizard-step {
                flex: 1;
                justify-content: center;
            }

            .wizard-step-copy {
                display: none;
            }

            .wizard-line {
                margin: 0 7px;
            }

            .wizard-step-number {
                width: 31px;
                height: 31px;
            }


            /* CARD */

            .wizard-card {
                border-radius: 16px;
            }

            .wizard-card-header {
                padding: 17px;
            }

            .wizard-card-body {
                padding: 17px;
            }


            /* TYPE */

            .project-type-options {
                grid-template-columns: 1fr;
            }

            .project-type-card {
                min-height: 84px;
            }


            /* ART */

            .wizard-art-upload {
                min-height: 270px;
            }


            /* PLATFORM */

            .wizard-platform-row {
                grid-template-columns: 28px minmax(0,1fr) 34px;
                gap: 7px;
                padding: 11px 0;
            }

            .platform-index {
                grid-column: 1;
                grid-row: 1;
                padding: 11px 0 0;
            }

            .platform-control:nth-child(2),
            .platform-control:nth-child(3),
            .platform-control:nth-child(4) {
                grid-column: 2;
            }

            .wizard-remove-platform {
                grid-column: 3;
                grid-row: 1;
                margin-top: 7px;
            }

            .platform-control input,
            .platform-control select {
                height: 42px;
            }


            /* ACTIONS */

            .wizard-actions {
                margin-top: 12px;
            }

            .wizard-back-btn,
            .wizard-next,
            .wizard-create {
                min-height: 46px;
            }

        }


        @keyframes spin {

            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }

        }

        .spin {
            display: inline-block;
            animation: spin 1s linear infinite;
        }






        /* =========================================================
   MOBILE WIZARD SPACING
========================================================= */

@media (max-width: 767px) {

    .project-wizard {
        padding: 0 10px 30px;
    }

    .project-wizard-header {
        margin-bottom: 18px;
    }

    .project-wizard-header h1 {
        font-size: 27px;
        line-height: 1.15;
    }

    .project-wizard-header p {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .project-wizard-card {
        border-radius: 18px;
        padding: 18px 15px;
    }

    .wizard-progress {
        margin-bottom: 20px;
        padding: 0 2px;
    }

    .wizard-step {
        gap: 7px;
    }

    .wizard-step-number {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 11px;
    }

    .wizard-step-label {
        font-size: 10px;
    }

    .wizard-step-line {
        margin: 0 5px;
    }

    .wizard-section {
        padding: 0;
    }

    .wizard-section-title {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .wizard-section-subtitle {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 18px;
    }

    .form-label {
        font-size: 12px;
        margin-bottom: 7px;
    }

    .form-control,
    .form-select {
        min-height: 48px;
        font-size: 14px;
        border-radius: 11px;
    }

    .project-type-grid {
        gap: 10px;
    }

    .project-type-card {
        padding: 14px 12px;
        border-radius: 13px;
    }

    .wizard-actions {
        margin-top: 22px;
        padding-top: 16px;
        gap: 9px;
    }

    .wizard-actions .btn {
        min-height: 46px;
        border-radius: 11px;
        font-size: 13px;
    }

    /* Platform rows */

    .platform-link-row {
        padding: 12px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .platform-link-row .row {
        --bs-gutter-x: 8px;
        --bs-gutter-y: 10px;
    }

    /* Upload areas */

    .upload-box {
        min-height: 150px;
        padding: 18px 12px;
        border-radius: 14px;
    }

    /* Live preview is already hidden,
       but remove any leftover spacing */

    .project-preview,
    .wizard-preview,
    .preview-sidebar {
        display: none !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .project-wizard {
        padding-left: 6px;
        padding-right: 6px;
    }

    .project-wizard-card {
        padding: 16px 13px;
        border-radius: 16px;
    }

    .project-wizard-header h1 {
        font-size: 24px;
    }

    .wizard-progress {
        padding: 0;
    }

    .wizard-step-label {
        font-size: 9px;
    }

    .wizard-step-number {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .wizard-actions {
        flex-direction: column-reverse;
    }

    .wizard-actions .btn {
        width: 100%;
    }
}