/* The generator UI, lifted from web/style.css and scoped under #studio.
   The landing page's en.css is loaded on the same page, so unscoped rules
   like h2 or button would fight it. */

#studio * { box-sizing: border-box; }
#studio {
  padding: 0 0 40px;
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f3f1ec; color: #23211d;
}
#studio header { max-width: 780px; margin: 28px auto 8px; }
#studio h1 { margin: 0; font-size: 28px; }
#studio .tag { margin: 4px 0 0; color: #6b675e; }
#studio main { max-width: 780px; margin: 0 auto; display: grid; gap: 16px; }
#studio footer { max-width: 780px; margin: 24px auto 0; color: #8a8578; font-size: 13px; }
#studio .card { background: #fff; border: 1px solid #e2ded4; border-radius: 12px; padding: 18px 20px; }
#studio .card h2 { margin: 0 0 4px; font-size: 17px; }
#studio .hint { margin: 0 0 12px; color: #6b675e; font-size: 13px; }
#studio .mini { display: block; color: #8a8578; font-size: 12px; font-weight: normal; }
#studio label { display: block; margin: 12px 0; font-weight: 600; font-size: 14px; }
#studio textarea, #studio input {
  width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid #d5d0c4; border-radius: 8px; font: inherit; background: #fbfaf7;
}
#studio textarea:focus, #studio input:focus { outline: 2px solid #c9a227; border-color: transparent; }
#studio .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .two { grid-template-columns: 1fr; }
}
#studio details { margin-top: 8px; }
#studio summary { cursor: pointer; color: #6b675e; font-size: 14px; }
#studio .ai-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; flex-wrap: wrap; }
#studio #ai-fill {
  padding: 9px 14px; border: 1px solid #c9a227; border-radius: 8px; cursor: pointer;
  background: #fbf6e6; color: #7a621a; font: inherit; font-size: 14px; font-weight: 600;
}
#studio #ai-fill:disabled { border-color: #d9d4c6; background: #f3f1ec; color: #a8a294; cursor: not-allowed; }
#studio .ai-row .mini { flex: 1; min-width: 220px; }
#studio .roman { margin-top: 5px; font-weight: normal; user-select: all; cursor: text; }
#studio .photo-row { display: flex; gap: 16px; align-items: stretch; }
#studio .drop {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 170px;
  border: 2px dashed #cfc9ba; border-radius: 10px; color: #8a8578; cursor: pointer;
  text-align: center; padding: 12px; transition: border-color .15s;
}
#studio .drop.armed, #studio .drop:hover { border-color: #c9a227; color: #6b675e; }
#studio .prepared { display: none; flex-direction: column; align-items: center; gap: 6px; }
#studio .prepared.show { display: flex; }
#studio #frame { width: 108px; height: 192px; border-radius: 8px; border: 1px solid #e2ded4; background: #dcdad6; }
#studio #clear-photo { border: none; background: none; color: #a15b4c; cursor: pointer; font-size: 12px; text-decoration: underline; }
#studio pre#prompt {
  white-space: pre-wrap; background: #faf7ef; border: 1px solid #eee7d4;
  border-radius: 8px; padding: 14px; font-size: 13px; color: #4a463d; max-height: 320px; overflow: auto;
}
#studio #go {
  width: 100%; padding: 14px; border: none; border-radius: 10px; cursor: pointer;
  background: #c9a227; color: #fff; font: inherit; font-weight: 700; font-size: 16px;
}
#studio #go:disabled { background: #d9d4c6; cursor: not-allowed; }
#studio #status { min-height: 20px; color: #6b675e; font-size: 14px; }
#studio #status.bad { color: #a13d2d; }
#studio #video { width: 100%; max-width: 320px; display: block; margin: 8px auto; border-radius: 10px; background: #000; }
#studio .history { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
#studio .job { border: 1px solid #e2ded4; border-radius: 10px; padding: 10px; font-size: 13px; }
#studio .job video, #studio .job img { width: 100%; border-radius: 6px; background: #dcdad6; display: block; }
#studio .job .st { color: #8a8578; font-size: 12px; margin-top: 6px; }
#studio .job .st.done { color: #4a7a3a; }
#studio .job .st.blocked, #studio .job .st.error { color: #a13d2d; }

/* dropdowns in the studio (model + resolution choice) */
#studio select {
  width: 100%; padding: 10px 12px; margin-top: 6px;
  border: 1px solid #cfcac0; border-radius: 8px; background: #fff;
  font: inherit; font-size: 15px; color: inherit;
}
#studio select:focus { outline: 2px solid #ff2d78; outline-offset: 1px; }