/* =========================================
PROFESSIONAL WHITE UI
Clean • Modern • Business-grade
========================================= */

:root{
–bg-main:#f4f6f9;
–card-bg:#ffffff;
–border-soft:#e5e7eb;

–text-main:#1f2937;
–text-muted:#6b7280;

–accent:#2563eb; /* professional blue */
–accent-soft:#dbeafe;
}

/* ===== GLOBAL ===== */
body{
margin:0;
background:
linear-gradient(180deg,#f8fafc,#eef2f7);
color:var(–text-main);
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ===== MAIN APP CARD ===== */
#app{
max-width:1200px;
margin:32px auto;
background:var(–card-bg);
padding:46px;
border-radius:28px;
border:1px solid var(–border-soft);
box-shadow:
0 20px 40px rgba(0,0,0,.08);
}

/* ===== TYPOGRAPHY ===== */
h1{
text-align:center;
font-size:36px;
font-weight:900;
letter-spacing:-.02em;
}

p{
text-align:center;
color:var(–text-muted);
margin-bottom:34px;
font-size:15px;
}

/* ===== FORM ELEMENTS ===== */
select,button{
width:100%;
padding:16px 18px;
margin-bottom:14px;
border-radius:14px;
font-size:14px;
}

/* Select */
select{
background:#ffffff;
border:1px solid var(–border-soft);
color:var(–text-main);
transition:.25s ease;
}

select:focus{
outline:none;
border-color:var(–accent);
box-shadow:0 0 0 3px var(–accent-soft);
}

/* Button */
button{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:#ffffff;
font-weight:800;
border:none;
cursor:pointer;
transition:.3s ease;
}

button:hover{
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(37,99,235,.35);
}

/* ===== OUTPUT PANEL ===== */
#output{
background:#ffffff;
padding:40px;
border-radius:24px;
min-height:600px;
white-space:pre-wrap;
line-height:1.9;
border:1px solid var(–border-soft);
}

/* ===== COPY BUTTON ===== */
#copy{
margin-top:16px;
background:#111827;
color:#ffffff;
}

#copy:hover{
background:#000000;
}

/* ===== TOAST ===== */
#toast{
display:none;
text-align:center;
font-size:12px;
color:#059669;
margin-top:10px;
}

/* ===== FOOTER ===== */
footer{
text-align:center;
font-size:11px;
color:#9ca3af;
margin-top:26px;
}

const lighting=[
“strong warm backlighting creating a golden halo around her hair”,
“intense golden rim light illuminating the silhouette”,
“warm cinematic backlight producing a glowing aura”,
“sunset-toned backlighting with radiant halo effect”
];

const hair=[
“long brunette-black hair flowing naturally”,
“dark hair softly rim-lit by warm light”,
“long dark hair catching golden highlights”
];

const dress=[
“delicate sheer white lace off-the-shoulder dress with intricate details”,
“ethereal white lace dress with translucent fabric”,
“flowing white lace gown with romantic embroidery”
];

const focus=[
“soft-focus background with creamy bokeh”,
“cinematic shallow depth of field”,
“atmospheric background blur”
];

function pick(a){return a[Math.floor(Math.random()*a.length)];}

function generatePrompt(){
const prompt=`
Create a stunning ethereal cinematic portrait using the character in the uploaded reference image.

IMPORTANT:
Use the uploaded image as the ONLY identity source.
Do NOT alter the face in any way.
Preserve facial structure, skin texture, expression, proportions, and identity 100%.

Aspect Ratio:
${aspect.value}.

Composition:
${cameraStyle.value}, cinematic artistic framing.

Subject & Pose:
An ethereal young woman ${pose.value}, standing gracefully in a ${season.value}.
${pick(hair)}.
She wears a ${pick(dress)}.

Expression:
Looking down softly with calm introspection.

Lighting:
${pick(lighting)}.

Atmosphere:
${fog.value} surrounding the scene.

Environment:
Dim forest environment matching the season.
Surrounded by ${butterflyColor.value} with ${butterflyMotion.value}.
Additional magical elements: ${particles.value} floating through the scene.

Depth & Focus:
${pick(focus)}.

Mood:
${mood.value}, dreamy, magical, cinematic.

Visual Quality:
ultra-realistic skin texture,
natural facial detail,
cinematic color grading,
high dynamic range realism,
professional film-quality output.

Negative prompts:
no face alteration,
no face swap,
no morphing,
no exaggeration,
no watermark,
no text,
no AI artifacts.
`;
output.innerText=prompt.trim();
}

function copyPrompt(){
navigator.clipboard.writeText(output.innerText);
toast.style.display=”block”;
setTimeout(()=>toast.style.display=”none”,1500);
}