/* Native Studio composer. No external images or fonts. */
.sa { --sa-line:rgba(150,164,190,.22); max-width:1120px; margin:24px auto; color:inherit; }
.sa * { box-sizing:border-box; }
.sa-hero { padding:28px; border:1px solid var(--sa-line); border-radius:22px; background:radial-gradient(ellipse at top right,rgba(123,100,245,.17),transparent 65%); }
.sa-hero h2 { font-size:clamp(26px,4vw,42px); letter-spacing:-.035em; margin:8px 0 12px; }
.sa-hero p { max-width:64ch; line-height:1.65; opacity:.8; }
.sa-eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; }
.sa-project { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:20px 0; }
.sa-project label { flex:1; min-width:200px; }
.sa-project strong { font-size:16px; }
.sa-steps { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0 24px; }
.sa-steps button { width:100%; min-height:54px; padding:12px; border-radius:12px; border:1px solid var(--sa-line); background:transparent; color:inherit; text-align:left; }
.sa-steps button[aria-current=step] { border-color:#aa98ff; background:rgba(136,110,241,.14); font-weight:700; }
.sa-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr); gap:24px; }
.sa-card { border:1px solid var(--sa-line); border-radius:18px; padding:24px; min-width:0; }
.sa-card h3 { font-size:21px; margin:0 0 16px; }
.sa label { display:block; font-weight:600; font-size:14px; margin:12px 0; }
.sa textarea,.sa select { display:block; width:100%; min-height:46px; padding:12px; margin-top:8px; border:1px solid var(--sa-line); border-radius:10px; background:var(--sw-surface,#151924); color:inherit; font:inherit; }
.sa textarea { min-height:200px; resize:vertical; line-height:1.65; }
.sa small,.sa-hint { display:block; font-size:13px; line-height:1.6; opacity:.75; }
.sa audio { width:100%; margin:18px 0; }
.sa-portrait { display:grid; place-items:center; min-height:260px; border:1px dashed var(--sa-line); border-radius:16px; margin:16px 0; overflow:hidden; }
.sa-portrait img { width:100%; max-height:390px; object-fit:contain; }
.sa-check { display:flex!important; gap:12px; align-items:flex-start; line-height:1.6; padding:10px 0; min-height:44px; }
.sa-check input { flex-shrink:0; margin-top:5px; }
.sa-notice { border-left:3px solid #aa98ff; padding:12px 16px; background:rgba(136,110,241,.09); font-size:14px; line-height:1.6; }
.sa-footer { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:14px; padding:20px 0; }
.sa button,.sa a.sw-button { min-height:44px; cursor:pointer; }
.sa button:disabled { cursor:default; opacity:.55; }
.sa :focus-visible { outline:3px solid #c0b1ff; outline-offset:3px; }
.sa-status { min-height:24px; font-size:14px; }
.sa-status[role=alert] { color:#ffb8b8; }
.sa dl { display:grid; grid-template-columns:1fr 1fr; gap:14px; font-size:14px; }
.sa dd { margin:0; text-align:right; overflow-wrap:anywhere; }
@media(max-width:700px) { .sa { margin:12px 0; } .sa-grid { grid-template-columns:1fr; } .sa-hero,.sa-card { padding:18px; } .sa-steps button { font-size:12px; padding:10px; } .sa-footer { position:static; background:var(--sw-surface,#151924); border-top:1px solid var(--sa-line); padding:12px; z-index:20; } }

.sa-upload { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--sa-line); }
.sa-upload input[type=file] { display:block; width:100%; max-width:100%; color:inherit; font:inherit; font-size:14px; }
.sa-upload input::file-selector-button { padding:10px 12px; margin-right:12px; border:1px solid var(--sa-line); border-radius:8px; color:inherit; background:var(--sw-surface,#151924); cursor:pointer; }
.sa-image-library { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; max-height:340px; overflow:auto; padding:4px; }
.sa .sa-image-choice { display:flex; flex-direction:column; gap:8px; min-width:0; padding:8px; border:1px solid var(--sa-line); border-radius:10px; background:var(--sw-surface,#151924); color:#f3f6fb; text-align:left; font:inherit; }
.sa .sa-image-choice[aria-pressed=true] { border-color:#ffb000; box-shadow:0 0 0 1px #ffb000; }
.sa-image-choice img { display:block; width:100%; height:90px; object-fit:cover; border-radius:6px; }
.sa-image-choice span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; font-size:13px; line-height:1.45; font-weight:500; }
.sa select option { color:#f3f6fb; background:#0b1824; font-size:14px; }

.sa-result { margin-top:20px; border-top:1px solid var(--sa-line); padding-top:16px; }
.sa-result video { display:block; width:100%; max-height:480px; margin:12px 0; background:#07111b; border-radius:12px; }

/* 50/50 Studio stage with four-column history; stable media nodes while polling. */
#diyai-workspace .sa{max-width:none;margin:24px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}
#diyai-workspace .sa-controls{grid-column:1/3;grid-row:1;background:var(--sw-surface);border:1px solid var(--sw-line);border-radius:12px;padding:24px;min-width:0}
#diyai-workspace .sa-project{padding:0 0 12px}#diyai-workspace .sa-project label{margin:0;width:100%;min-width:0}
#diyai-workspace .sa-grid{display:block}#diyai-workspace .sa-card{border:0;border-radius:0;padding:0;margin:24px 0}#diyai-workspace .sa-card h3{font-size:20px;line-height:1.3}
#diyai-workspace .sa-steps{margin:12px 0 24px;gap:6px}#diyai-workspace .sa-steps button{padding:10px 8px;font-size:12px;min-height:50px;border-radius:8px}
#diyai-workspace .sa-steps button[aria-current=step]{border-color:var(--sw-green);background:#ffb00012;color:var(--sw-ink)}
#diyai-workspace .sa-portrait{min-height:0;max-width:160px;margin:12px 0;background:#071321}#diyai-workspace .sa-portrait img{max-height:160px}
#diyai-workspace .sa-hint,#diyai-workspace .sa small{opacity:1;color:var(--sw-muted)}
#diyai-workspace .sa-footer{padding:20px 0 0;margin-top:24px;border-top:1px solid var(--sw-line);background:transparent}#diyai-workspace .sa-footer>div{display:flex;flex-wrap:wrap;gap:8px}
#diyai-workspace .sa-output,#diyai-workspace [data-sa-job-history]{display:contents}
#diyai-workspace .sa-empty,#diyai-workspace .sa-featured{grid-column:3/5;grid-row:1}
#diyai-workspace .sa-empty{overflow:hidden;background:linear-gradient(145deg,#10253a,#0a1521);border:1px solid var(--sw-line);border-radius:12px;min-width:0;align-self:start;display:flex;flex-direction:column}
#diyai-workspace .sa-empty[hidden],#diyai-workspace .sa-results-heading[hidden]{display:none}
#diyai-workspace .sa-empty-copy{padding:28px 28px 8px}#diyai-workspace .sa-empty h2{font-size:clamp(26px,2.8vw,42px);line-height:1.12;letter-spacing:-.035em;margin:12px 0}#diyai-workspace .sa-empty p{color:var(--sw-muted);line-height:1.6}
#diyai-workspace .sa-empty img{display:block;width:100%;height:auto;object-fit:contain;min-height:0;flex:0 0 auto}#diyai-workspace .sa-empty small{padding:16px 24px;font-size:12px}
#diyai-workspace .sa-results-heading{grid-column:1/-1;font-size:22px;margin:8px 0 0}
#diyai-workspace .sa-result{display:flex;flex-direction:column;min-width:0;margin:0;padding:16px;border:1px solid var(--sw-line);border-radius:12px;background:var(--sw-surface);gap:12px;overflow-wrap:anywhere}
#diyai-workspace .sa-result p{font-size:13px;line-height:1.55;margin:0;color:var(--sw-muted)}
#diyai-workspace .sa-result video{order:-1;aspect-ratio:16/10;object-fit:contain;background:#060e17;width:100%;margin:0;border-radius:8px;max-height:none}#diyai-workspace .sa-result a{align-self:flex-start;font-size:13px}
#diyai-workspace .sa-featured{padding:20px;align-self:stretch}#diyai-workspace .sa-featured video{flex:1;min-height:340px;max-height:660px}
#diyai-workspace .sa-about{display:block;max-width:none;margin:40px 0 0;padding:24px;border:1px solid var(--sw-line);border-radius:12px}
@media(max-width:1100px){#diyai-workspace .sa{grid-template-columns:repeat(2,minmax(0,1fr))}#diyai-workspace .sa-controls,#diyai-workspace .sa-empty,#diyai-workspace .sa-featured{grid-column:1/-1;grid-row:auto}#diyai-workspace .sa-empty img{max-height:480px}#diyai-workspace .sa-featured video{max-height:520px}}
@media(max-width:600px){#diyai-workspace .sa{grid-template-columns:minmax(0,1fr);gap:18px;margin:18px 0}#diyai-workspace .sa-controls,#diyai-workspace .sa-featured{padding:18px}#diyai-workspace .sa-empty-copy{padding:22px 20px 8px}#diyai-workspace .sa-empty img{min-height:220px}#diyai-workspace .sa-featured video{min-height:260px}#diyai-workspace .sa-check{font-size:13px}}

#diyai-workspace .sa-controls textarea{min-height:180px;margin-bottom:10px}

@media(max-width:1100px){#diyai-workspace .sa-controls{grid-row:1}#diyai-workspace .sa-empty,#diyai-workspace .sa-featured{grid-row:2}#diyai-workspace .sa-results-heading{grid-row:3}}

.sa-image-choice .sa-preview-unavailable{display:grid;place-items:center;min-height:90px;border-radius:6px;background:var(--sw-surface,#151924);color:var(--sw-muted,#9aa8ba);text-align:center;font-size:12px;line-height:1.4;padding:8px}

#diyai-workspace .sa-progress{grid-column:3/5;grid-row:1;min-width:0;align-self:start}
#diyai-workspace .sa-progress[hidden],.sa [data-sa-narration-panel][hidden]{display:none}
.sa-narration-tabs,.sa-personal-voices{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
#diyai-workspace .sa .sa-narration-tabs button[aria-pressed=true],#diyai-workspace .sa .sa-personal-voices button[aria-pressed=true]{background:#ffb000;color:#08121c;border-color:#ffb000}
.sa-selected-audio{border-top:1px solid var(--sa-line);margin-top:24px;padding-top:18px}
@media(max-width:1100px){#diyai-workspace .sa-progress{grid-column:1/-1;grid-row:2}}

#diyai-workspace .sa-about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:24px 0}#diyai-workspace .sa-about li{margin-bottom:12px;line-height:1.65}#diyai-workspace .sa-about p{line-height:1.7;max-width:90ch}#diyai-workspace .sa-faq{padding:16px 0;border-top:1px solid var(--sw-line)}#diyai-workspace .sa-faq summary{font-weight:650;cursor:pointer}#diyai-workspace .sa-faq p{margin-bottom:0}@media(max-width:700px){#diyai-workspace .sa-about-grid{grid-template-columns:1fr;gap:16px}}