/* Studio workspace: compact controls, persistent preview, clear feedback. */
body { background: #f4f5f7; }
.page-noise { display: none; }
.site-header, main, footer { width: min(1440px, calc(100% - 56px)); }
.site-header { height: 72px; }
.hero { padding: 32px 0 28px; display: block; }
.eyebrow { margin-bottom: 12px; }
.hero h1 { font: 650 clamp(30px, 3vw, 44px)/1.3 'PingFang SC', sans-serif; letter-spacing: -.04em; }
.hero h1 em { margin-left: 8px; }
.hero > p { margin: 10px 0 0; max-width: none; font-size: 14px; }
.trust-row { display: none; }
.studio-card { grid-template-columns: 430px minmax(0,1fr); overflow: visible; align-items: start; min-height: 0; border: 1px solid #e2e5e9; border-radius: 18px; background: white; box-shadow: 0 12px 44px #18213008; }
.controls-panel { padding: 28px; border-right: 1px solid #e2e5e9; }
.step-heading h2,.preview-topbar h2 { font-family: inherit; font-size: 17px; }
.step-heading p,.preview-topbar p { font-size: 12px; line-height: 1.6; }
.step-number { width: 32px; height: 32px; font-size: 11px; }
.upload-zone { height: 132px; background: #fafbfc; border-color: #ccd1d9; }
.upload-zone strong { font-size: 14px; }.upload-zone small { font-size: 11px; }
.divider { margin: 24px 0; background: #e7e9ed; }
legend,.select-field > span { font-size: 13px; color: #475466; }
.segmented button,.size-options button { background: white; padding: 12px 7px; border-color: #dfe3e8; border-radius: 9px; }
.segmented button span,.size-options button span { font-size: 13px; }
.segmented button small,.size-options button small { font-size: 10px; }
.field-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.swatches { gap: 3px; }.swatches button { width: 30px; height: 36px; border-radius: 8px; }
.swatches button i { width: 23px; height: 23px; }
.select-field select { height: 40px; font-size: 13px; background: white; }
.advanced-panel summary { font-size: 13px; padding: 18px 0; }
.range-field > span,.toggle-row strong { font-size: 12px; }.toggle-row small { font-size: 11px; }
.range-field input { height: 20px; }.switch i { width: 38px; height: 23px; }.switch i::after { width: 19px; height: 19px; }
.card-fields { grid-template-columns: 1fr; background: #f6f7f9; gap: 12px; padding: 14px; }
.card-fields span { font-size: 12px; }.card-fields input { height: 40px; font-size: 13px; }
.generate-dock { position: relative; background: white; padding: 12px 0 4px; z-index: 6; border-top: 1px solid #eef0f3; }
.service-notice { background: #f3f5f8; color: #667285; font-size: 12px; padding: 10px 12px; margin: 0 0 12px; }
.primary-button { height: 50px; border-radius: 10px; }.button-label,.button-loading { font-size: 14px; }
.consent-note { font-size: 10px; line-height: 1.7; }
.preview-panel { position: sticky; top: 18px; border-radius: 0 17px 17px 0; overflow: hidden; min-height: 680px; }
.preview-topbar { height: 82px; padding: 0 28px; }.mode-badge { font-size: 11px; letter-spacing: 0; }
.preview-stage { min-height: 490px; padding: 24px 32px; }
.compare-frame { width: min(340px,82%); max-height: none; }.compare-control { width: min(340px,82%); }
.empty-preview { width: 90%; }.empty-preview strong { font-family: inherit; font-size: 17px; }.empty-preview p { font-size: 13px; }
.photo-guides { font-size: 11px; }.info-card strong { font-size: 14px; }.info-card span { font-size: 10px; }.info-card small { font-size: 9px; }
.info-card { overflow: hidden; }.info-card strong,.info-card span,.info-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-toolbar { display: flex; justify-content: center; gap: 4px; padding: 14px 20px 0; }
.view-toolbar button { border: 0; background: transparent; color: #b2becc; font-size: 12px; padding: 9px 18px; border-radius: 7px; cursor: pointer; }
.view-toolbar button[aria-pressed=true] { color: #fff; background: #ffffff20; }
.generation-progress { position: absolute; inset: 0; background: #17283ced; backdrop-filter: blur(8px); z-index: 10; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; text-align: center; padding: 28px; }
.generation-progress strong { font-size: 17px; }.generation-progress span { font-size: 13px; }.generation-progress small { max-width: 290px; color: #b2becc; line-height: 1.7; }
.progress-spinner { width: 38px; height: 38px; border: 2px solid #ffffff30; border-top-color: #e6a57e; border-radius: 50%; animation: spin 1s linear infinite; }
.generation-error { padding: 12px; font-size: 13px; line-height: 1.7; color: #96392e; border: 1px solid #f2c8c0; background: #fff4f1; border-radius: 8px; }
.result-actions { grid-template-columns: 1fr 1fr; padding: 18px 24px; gap: 12px; }.result-note { display: block; grid-column: 1 / -1; }.result-note span { font-size: 11px; }
.secondary-button,.download-button { height: 44px; font-size: 12px; }
.how-it-works { display: none; }footer { margin-top: 28px; font-size: 11px; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible { outline: 3px solid #d79462; outline-offset: 3px; }
.switch input:focus-visible + i { outline: 3px solid #d79462; outline-offset: 3px; }
button:disabled { opacity: .55; cursor: not-allowed; }button:not(:disabled) { transition: background .15s, box-shadow .15s; }
@media(max-width:1000px) { .studio-card { grid-template-columns: 365px minmax(0,1fr); }.controls-panel { padding: 22px; }.preview-topbar { padding: 0 20px; }.field-grid { gap: 8px; }.hero h1 { font-size: 34px; }.compare-frame { width: 90%; }.preview-stage { padding: 28px; } }
@media(max-width:820px) {
  .site-header,main,footer { width: calc(100% - 28px); }.hero { padding: 26px 0 22px; }.hero h1 { font-size: 29px; }.hero > p { font-size: 13px; }
  .studio-card { display: flex; flex-direction: column; }.controls-panel { width: 100%; border-right: 0; }.preview-panel { position: relative; top: auto; width: 100%; border-radius: 0 0 17px 17px; min-height: 540px; }
  .segmented.three { grid-template-columns: repeat(3,1fr); }.size-options { grid-template-columns: repeat(4,1fr); }.field-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .generate-dock { position: relative; }.preview-stage { min-height: 410px; }.compare-frame { width: min(320px,85%); }.header-meta { gap: 0; }.api-status { font-size: 11px; }
}