:root{--bg:#f6f8fb;--card:#fff;--accent:#2563eb;--muted:#6b7280}
#previewContainer {
    margin-top: 10px;
    margin-bottom: 15px; /* padding below the preview */
    display: flex;
    justify-content: center;
    align-items: center;
}

#previewContainer img {
    max-width: 100%; /* fits modal */
    max-height: 300px; /* prevent breaking layout */
    object-fit: contain; /* keep aspect ratio */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.generated-image {
    width: 100%;
    max-width: 480px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 16px;
}

.ai-output {
    text-align: center;
    margin-top: 24px;
}

.ai-rendering{padding:10px}
.ai-rendering h1{font-size:20px;margin:0 0 6px}
.ai-rendering p.lead{margin:0 0 18px;color:var(--muted);font-size:14px}

.ai-rendering .steps{display:flex;gap:8px;margin-bottom:18px}
.ai-rendering .step{flex:1;padding:8px 10px;border-radius:8px;background:#eef2ff;color:#1e3a8a;font-weight:600;text-align:center;font-size:13px}
.ai-rendering .step.inactive{background:transparent;color:var(--muted);font-weight:500;border:1px solid #e6eaf6}


.ai-rendering form .step-panel{display:none}
.ai-rendering form .step-panel.active{display:block}

/* Upload box */
.upload-box{border:2px dashed #e5e7eb;border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:0.3s background;}
.upload-box:hover{background:#fff5f5}
.upload-box input{display:none}
.upload-box-icon{font-size:30px;color:#e11d48;margin-bottom:8px;}
.upload-text{color:#e11d48;font-weight:600;cursor:pointer;}
.upload-desc{font-size:13px;color:var(--muted);margin-top:6px}

.ai-rendering .field{margin-bottom:14px}
.ai-rendering label{display:block;font-weight:600;font-size:13px;margin-bottom:6px;color:var(--muted);}
.ai-rendering select {width: 100% !important;}
.ai-rendering input[type="text"],.ai-rendering input[type="email"],.ai-rendering input[type="number"],.ai-rendering select,.ai-rendering textarea{width:95%;padding:10px;border-radius:8px;border:1px solid #e6e8f0;background:#fff}
.ai-rendering .note{font-size:13px;color:var(--muted);margin-top:6px}


.ai-rendering .thumbs{display:flex;gap:8px;flex-ai-rendering:ai-rendering;margin-top:8px}
.ai-rendering .thumb{width:88px;height:68px;border-radius:8px;overflow:hidden;border:1px solid #e8ecf8;display:flex;align-items:center;justify-content:center;background:#fafbfd}
.ai-rendering .thumb img{width:100%;height:100%;object-fit:cover}


.ai-rendering .actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.ai-rendering .actions .left{font-size:13px;color:var(--muted)}
.ai-rendering .btn{padding:10px 14px;border-radius:8px;border:0;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
.ai-rendering .btn.ghost{background:transparent;color:var(--accent);border:1px solid #cfe0ff}