*{
    box-sizing:border-box;
}

html, body{
    max-width:100%;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

.app-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:64px;
    background:#111;
    color:#fff;
    z-index:2000;
}

.app-header-inner{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
}

.app-logo{
    color:#fff;
    text-decoration:none;
    font-size:20px;
    font-weight:700;
}

.desktop-nav{
    display:flex;
    gap:18px;
    align-items:center;
}

.desktop-nav a{
    color:#fff;
    text-decoration:none;
}

.mobile-menu-btn{
    display:none;
    background:none;
    border:0;
    color:#fff;
    font-size:30px;
    cursor:pointer;
}

.app-sidebar{
    position:fixed;
    top:64px;
    left:0;
    width:260px;
    height:calc(100vh - 64px);
    background:#171717;
    color:#fff;
    padding:24px 18px;
    z-index:1500;
}

.app-sidebar a{
    display:block;
    color:#fff;
    text-decoration:none;
    padding:12px 10px;
    border-radius:10px;
}

.app-sidebar a:hover{
    background:rgba(255,255,255,0.08);
}

.sidebar-title{
    font-size:14px;
    color:#aaa;
    margin-bottom:12px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.sidebar-overlay{
    display:none;
}

.main-content,
.app-main,
.dashboard-main{
    margin-left:260px;
    padding:90px 24px 40px;
}

/* Mobile */
@media (max-width:768px){

    body{
        padding-top:64px;
    }

    .desktop-nav{
        display:none;
    }

    .mobile-menu-btn{
        display:block;
    }

    .app-sidebar{
        left:-260px;
        transition:0.3s ease;
    }

    .app-sidebar.active{
        left:0;
    }

    .app-sidebar.active + .sidebar-overlay{
        display:block;
        position:fixed;
        top:64px;
        left:0;
        width:100%;
        height:calc(100vh - 64px);
        background:rgba(0,0,0,0.45);
        z-index:1400;
    }

    .main-content,
    .app-main,
    .dashboard-main{
        margin-left:0;
        width:100%;
        padding:24px 16px 40px;
    }

    .container,
    .app-container,
    .dashboard-container,
    .generator-container{
        width:100%;
        max-width:100%;
        padding-left:16px;
        padding-right:16px;
    }

    .row,
    .grid,
    .cards,
    .nd-content-grid{
        display:flex;
        flex-direction:column;
        gap:18px;
    }

    .card,
    .nd-card{
        width:100%;
    }

    input,
    textarea,
    select,
    button{
        max-width:100%;
        font-size:16px;
    }

    .btn,
    button[type="submit"]{
        width:100%;
    }

    h1{
        font-size:30px;
        line-height:1.2;
    }

    h2{
        font-size:24px;
        line-height:1.25;
    }

    p{
        font-size:16px;
        line-height:1.6;
    }
}
/* ===== AI Generator Mobile Fix ===== */

.generator-form,
.ai-form,
.upload-form{
    width:100%;
    max-width:720px;
}

.generator-form input,
.generator-form textarea,
.generator-form select,
.ai-form input,
.ai-form textarea,
.ai-form select,
.upload-form input,
.upload-form textarea,
.upload-form select{
    width:100%;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid #ddd;
}

.preview-box,
.result-box,
.generated-image{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.preview-box img,
.result-box img,
.generated-image img{
    width:100%;
    height:auto;
    border-radius:18px;
}

@media (max-width:768px){

    .generator-card,
    .ai-card,
    .upload-card{
        width:100%;
        padding:20px;
    }

    .generator-actions,
    .form-actions{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .generator-actions button,
    .form-actions button{
        width:100%;
    }

}