body{

    margin:0;
    font-family:Arial, sans-serif;
    
    background:linear-gradient(135deg,#0f172a,#1e293b);
    
    color:white;
    
    }
    
    /* Main container */
    
    .container{
    
    max-width:900px;
    
    margin:auto;
    
    padding:20px;
    
    }
    
    /* Header */
    
    .header{
    
    text-align:center;
    
    margin-bottom:30px;
    
    }
    
    .header h1{
    
    font-size:40px;
    
    margin:0;
    
    }
    
    .header p{
    
    color:#cbd5f5;
    
    margin-top:5px;
    
    }
    
    /* Upload section */
    
    .upload-section{
    
    text-align:center;
    
    margin-bottom:20px;
    
    }
    
    .upload-btn{
    
    background:#2563eb;
    
    padding:12px 25px;
    
    border-radius:8px;
    
    cursor:pointer;
    
    display:inline-block;
    
    transition:0.3s;
    
    }
    
    .upload-btn:hover{
    
    background:#1d4ed8;
    
    }
    
    /* Image Preview */
    
    .preview-box{
    cursor: pointer;
    height:400px;
    
    background:#0f172a;
    
    border:2px dashed #475569;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    border-radius:12px;
    
    overflow:hidden;
    
    margin-bottom:20px;
    
    }
    
    /* Fix image scaling */
    
    .preview-box img{
    
    max-height:100%;
    
    max-width:100%;
    
    object-fit:contain;
    
    }
    
    /* Shirt title */
    
    .shirts-title{
    
    margin-top:30px;
    
    margin-bottom:10px;
    
    font-weight:bold;
    
    text-align:center;
    
    }
    
    /* Shirt Grid */
    
    .shirts-grid{
    
    display:grid;
    
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    
    gap:15px;
    
    }
    
    .shirts-grid img{
    
    width:100%;
    
    border-radius:8px;
    
    cursor:pointer;
    
    border:2px solid transparent;
    
    transition:0.2s;
    
    }
    
    .shirts-grid img:hover{
    
    transform:scale(1.05);
    
    }
    
    /* Selected shirt */
    
    .shirts-grid img.selected{
    
    border:2px solid #3b82f6;
    
    }
    
    /* Generate Button */
    
    #generateBtn{
    
    position:fixed;
    
    bottom:20px;
    
    left:50%;
    
    transform:translateX(-50%);
    
    padding:15px 30px;
    
    background:#22c55e;
    
    border:none;
    
    border-radius:30px;
    
    font-size:16px;
    
    color:white;
    
    cursor:pointer;
    
    display:none;
    
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
    
    transition:0.3s;
    
    }
    
    #generateBtn:hover{
    
    background:#16a34a;
    
    }
    
    /* Mobile Optimization */
    
    @media(max-width:600px){
    
    .header h1{
    
    font-size:28px;
    
    }
    
    .preview-box{
    
    height:280px;
    
    }
    
    #generateBtn{
    
    width:80%;
    
    font-size:14px;
    
    }
    
    }

/* Loader Box */

.preview-box {

    position: relative;
    
    }
    
    .loader-box {
    
    position:absolute;
    
    top:0;
    left:0;
    
    width:100%;
    height:100%;
    
    background:linear-gradient(
    135deg,
    rgba(2,6,23,0.96),
    rgba(15,23,42,0.96)
    );
    
    display:none;
    
    flex-direction:column;
    
    align-items:center;
    
    padding-top:15px;
    
    z-index:99;
    
    }
    
    
    
    /* TOP */
    
    .loader-top {
    
    width:85%;
    
    text-align:center;
    
    }
    
    #statusText {
    
    font-size:18px;
    
    margin-bottom:10px;
    
    color:white;
    
    }
    
    
    
    /* PROGRESS */
    
    .progress-bar {
    
    width:100%;
    
    height:6px;
    
    background:#1e293b;
    
    border-radius:8px;
    
    overflow:hidden;
    
    }
    
    .progress-fill {
    
    height:100%;
    
    width:0%;
    
    background:linear-gradient(
    90deg,
    #22c55e,
    #3b82f6
    );
    
    }
    
    
    
    /* SLIDES */
    
    .slides-container {
    
    margin-top:40px;
    
    width:85%;
    
    height:60%;
    
    position:relative;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    text-align:center;
    
    }
    
    .slide {
    
    position:absolute;
    
    opacity:0;
    
    transition:opacity 0.8s ease;
    
    }
    
    .slide.active {
    
    opacity:1;
    
    }
    
    .slide h3 {
    
    font-size:20px;
    
    font-weight:bold;
    
    margin-bottom:10px;
    
    }
    
    .slide p {
    
    font-size:14px;
    
    color:#cbd5f5;
    
    line-height:1.5;
    
    }