*{
    box-sizing:border-box;
}

:root{
    --bg:#07080c;
    --panel:#101219;
    --panel2:#161922;
    --border:#292d3a;
    --text:#f7f7fb;
    --muted:#8d93a5;
    --accent:#9c6cff;
    --accent2:#ec4fff;
}

body{
    margin:0;
    background:
        radial-gradient(circle at 50% -20%,#24133d 0,transparent 38%),
        var(--bg);
    color:var(--text);
    font-family:Inter,Arial,sans-serif;
    min-height:100vh;
}

header{
    height:76px;
    border-bottom:1px solid #20232d;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5%;
    backdrop-filter:blur(15px);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo{
    width:44px;
    height:44px;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:900;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:0 0 25px #9c6cff55;
}

.brand strong{
    display:block;
    font-size:16px;
}

.brand span{
    display:block;
    font-size:9px;
    letter-spacing:3px;
    color:#858b9c;
    margin-top:3px;
}

.top-actions{
    display:flex;
    gap:10px;
}

button{
    color:white;
    cursor:pointer;
    font-weight:700;
}

.ghost,.pro{
    padding:10px 18px;
    border-radius:10px;
    border:1px solid var(--border);
    background:#11131a;
}

.pro{
    border-color:#8e61ff;
    color:#c9adff;
}

main{
    max-width:1280px;
    margin:auto;
    padding:45px 25px 70px;
}

.hero{
    text-align:center;
    margin-bottom:38px;
}

.badge{
    display:inline-block;
    padding:7px 13px;
    border:1px solid #7044aa;
    border-radius:30px;
    font-size:10px;
    letter-spacing:2px;
    color:#c9a8ff;
}

.hero h1{
    font-size:48px;
    margin:15px 0 8px;
}

.hero h1 span{
    background:linear-gradient(90deg,#8d6aff,#f055e8);
    -webkit-background-clip:text;
    color:transparent;
}

.hero p{
    color:var(--muted);
    line-height:1.6;
    margin:auto;
    max-width:600px;
}

.studio{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
    gap:22px;
}

.workspace,.controls{
    background:rgba(15,17,24,.88);
    border:1px solid var(--border);
    border-radius:22px;
}

.workspace{
    min-height:620px;
    padding:18px;
}

.upload-zone{
    height:100%;
    min-height:580px;
    border:1px dashed #424758;
    border-radius:17px;
    display:grid;
    place-items:center;
    text-align:center;
    overflow:hidden;
    position:relative;
    transition:.25s;
}

.upload-zone.drag{
    border-color:#a575ff;
    background:#9c6cff0c;
}

.upload-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    font-size:35px;
    background:#1a1d27;
    border:1px solid #343848;
}

.upload-zone h2{
    margin-bottom:8px;
}

.upload-zone p{
    color:#888fa0;
    line-height:1.6;
}

.upload-zone small{
    display:block;
    color:#646a79;
    margin-top:15px;
}

#chooseBtn{
    border:0;
    border-radius:11px;
    padding:13px 24px;
    background:white;
    color:#111;
}

#previewState{
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
}

#previewImage{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#08090d;
}

.change{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    background:#11131ddd;
    border:1px solid #454a59;
    border-radius:10px;
    padding:10px 17px;
}

.hidden{
    display:none!important;
}

.controls{
    padding:23px;
}

.control-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.control-title small{
    color:#976dff;
    font-size:9px;
    letter-spacing:2px;
}

.control-title h3{
    margin:5px 0 18px;
}

.control-title>span{
    color:#777d8d;
    font-size:11px;
}

.styles{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:9px;
}

.style{
    border:1px solid #2b2f3b;
    background:#151821;
    border-radius:13px;
    padding:13px 8px;
}

.style div{
    font-size:26px;
    margin-bottom:5px;
}

.style span{
    font-size:11px;
}

.style.active{
    border-color:#9a6cff;
    background:#9a6cff14;
    box-shadow:inset 0 0 20px #9a6cff0d;
}

.setting{
    margin-top:23px;
}

.setting label{
    color:#c6c9d2;
    font-size:12px;
}

.setting-row{
    display:flex;
    justify-content:space-between;
}

.setting-row strong{
    color:#b28cff;
    font-size:12px;
}

input[type=range]{
    width:100%;
    margin-top:13px;
    accent-color:#9c6cff;
}

.quality,.ratio{
    display:grid;
    gap:7px;
    margin-top:10px;
}

.quality{
    grid-template-columns:repeat(3,1fr);
}

.ratio{
    grid-template-columns:repeat(4,1fr);
}

.quality button,.ratio button{
    border:1px solid #2d313e;
    background:#151821;
    border-radius:9px;
    padding:10px 4px;
    font-size:10px;
}

.quality button.active,.ratio button.active{
    border-color:#9668ff;
    background:#9668ff18;
}

.generate{
    width:100%;
    margin-top:25px;
    padding:16px;
    border:0;
    border-radius:13px;
    background:linear-gradient(90deg,#754dff,#df4ee8);
    font-size:14px;
    box-shadow:0 10px 35px #984cff2c;
}

.generate:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.privacy{
    text-align:center;
    color:#656b7b;
    font-size:10px;
}

#toast{
    position:fixed;
    right:25px;
    bottom:25px;
    padding:13px 18px;
    background:#1c202a;
    border:1px solid #393e4d;
    border-radius:10px;
    opacity:0;
    pointer-events:none;
    transition:.25s;
}

#toast.show{
    opacity:1;
}

@media(max-width:850px){

    .hero h1{
        font-size:36px;
    }

    .studio{
        grid-template-columns:1fr;
    }

    .workspace{
        min-height:500px;
    }

    .upload-zone{
        min-height:460px;
    }
}

@media(max-width:500px){

    header{
        padding:0 15px;
    }

    .ghost{
        display:none;
    }

    main{
        padding:30px 12px;
    }

    .hero h1{
        font-size:32px;
    }

    .hero p{
        font-size:13px;
    }

    .workspace{
        min-height:430px;
    }

    .upload-zone{
        min-height:395px;
    }
}

.result-actions{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px;
    border-radius:13px;
    background:rgba(10,12,18,.88);
    border:1px solid #343948;
    backdrop-filter:blur(12px);
    z-index:10;
}

.result-actions button,
.result-actions a{
    border:1px solid #343948;
    background:#171a22;
    color:white;
    text-decoration:none;
    border-radius:9px;
    padding:9px 14px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

.result-actions button.active{
    border-color:#9c6cff;
    background:#9c6cff22;
}

.result-actions a{
    background:linear-gradient(90deg,#754dff,#df4ee8);
    border:0;
}

@media(max-width:600px){
    .result-actions{
        width:calc(100% - 20px);
        justify-content:center;
    }

    .result-actions button,
    .result-actions a{
        flex:1;
        text-align:center;
        padding:9px 6px;
    }
}

.strength-mode{
    margin-top:7px;
    font-size:10px;
    color:#9d79ff;
    text-align:right;
    font-weight:700;
    letter-spacing:.4px;
}