.portrait-studio{--studio-ink:#162b3f;--studio-gold:#b28b50;--studio-border:#dce3e7;color:var(--studio-ink);font-family:inherit;margin-top:20px;min-width:0}
.portrait-studio [hidden]{display:none!important}.studio-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.studio-heading small{font-size:10px;letter-spacing:.18em;color:var(--studio-gold)}.studio-heading h3{margin:6px 0 15px;font-size:19px;line-height:1.4}.studio-size{white-space:nowrap;padding:7px 10px;border:1px solid var(--studio-border);border-radius:8px;font-size:11px}.studio-mode label,.studio-upload,.studio-name{display:block;font-size:13px;font-weight:600;margin:12px 0}.studio-name>span{float:right;color:#6d7c86;font-size:11px}.portrait-studio input[type=text],.portrait-studio select{display:block;width:100%;box-sizing:border-box;border:1px solid var(--studio-border);border-radius:10px;padding:11px 12px;font:inherit;font-weight:400;color:var(--studio-ink);background:white;margin-top:7px}.studio-upload{padding:12px;border:1px dashed #a9b7c2;border-radius:10px}.studio-upload input{display:block;width:100%;font-size:12px;margin-top:8px}.studio-intro,.studio-status{font-size:12px;line-height:1.7;color:#5b6d79;margin:10px 0}.studio-status{padding:10px 12px;background:#f2f5f7;border-radius:10px;min-height:20px}.studio-status.is-error{color:#a33032;background:#fff1ef}.studio-consent,.studio-confirm{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.7;margin:12px 0}.studio-consent input,.studio-confirm input{accent-color:var(--studio-ink);flex-shrink:0;margin-top:4px}.studio-actions{display:flex;gap:8px;flex-wrap:wrap}.portrait-studio button{font:inherit;font-size:12px;cursor:pointer;border:1px solid var(--studio-border);border-radius:9px;background:#fff;padding:10px 12px;color:var(--studio-ink)}.portrait-studio button:hover:not(:disabled){border-color:var(--studio-gold)}.portrait-studio button:focus-visible,.portrait-studio input:focus-visible,.portrait-studio select:focus-visible{outline:2px solid var(--studio-gold);outline-offset:3px}.portrait-studio button:disabled{opacity:.45;cursor:not-allowed}.portrait-studio .studio-primary{background:var(--studio-ink);border-color:var(--studio-ink);color:white;font-weight:600}.studio-actions .studio-primary{flex:1 0 100%}.studio-actions button:not(.studio-primary){flex:1}.studio-layer-status{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;margin-bottom:10px}.studio-layer-status span{border:1px solid var(--studio-border);padding:5px 9px;border-radius:20px}.studio-layer-status [data-state=completed]{color:#167352;background:#f0faf4;border-color:#cbe7d7}.studio-layer-status [data-state=failed]{color:#ac3434;background:#fff2ef}.studio-views{display:flex;gap:5px;margin:10px 0;flex-wrap:wrap}.studio-views button{border:0;padding:7px 10px;background:#f3f5f7}.studio-views [aria-pressed=true]{background:#e8edf2;color:#0c2134;font-weight:700}.studio-canvas{position:relative;aspect-ratio:1;background:white;border:1px solid var(--studio-border);border-radius:12px;overflow:hidden;display:grid;place-items:center}.studio-canvas img{width:100%;height:100%;object-fit:contain}.studio-canvas [data-role=empty]{display:grid;text-align:center;gap:10px;color:#8b99a3;font-size:12px}.studio-canvas [data-role=empty] b{font-size:15px;font-weight:500}.portrait-studio .studio-enlarge{position:absolute;right:10px;bottom:10px;background:#ffffffec;padding:6px 10px}.studio-adopt{width:100%;margin-bottom:12px}.studio-lightbox{padding:8px;border:0;border-radius:14px;max-width:min(94vw,1000px);max-height:94vh;overflow:auto;background:white}.studio-lightbox::backdrop{background:#102131be}.studio-lightbox img{display:block;max-width:100%;max-height:82vh;object-fit:contain}.studio-lightbox>button{display:block;margin:0 0 6px auto}.public-app #portrait-submit{display:none}.public-app .portrait-studio{border-top:1px solid var(--studio-border);padding-top:20px}.public-app #preview-stage.is-studio .trajectory-controls{display:none}.public-app #preview-stage.is-studio #mobile-preview-settings-toggle{display:none}.public-app #preview-stage.is-studio #preview-retry{display:none}@media(min-width:900px){.public-app .portrait-studio{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(340px,1.2fr);column-gap:28px}.public-app .portrait-studio>.studio-canvas{grid-column:2;grid-row:1 / span 9}.public-app .portrait-studio>.studio-views{grid-column:2}.public-app .portrait-studio>.studio-confirm,.public-app .portrait-studio>.studio-adopt{grid-column:2}.public-app .portrait-studio>div:not(.studio-canvas):not(.studio-views),.public-app .portrait-studio>p,.public-app .portrait-studio>label:not(.studio-confirm){grid-column:1}}@media(max-width:600px){.public-app .portrait-studio{margin-left:0;margin-right:0;padding-left:8px;padding-right:8px;box-sizing:border-box}.studio-heading h3{font-size:18px}.studio-canvas{border-radius:9px}.studio-confirm{font-size:12px}.portrait-studio .studio-primary{min-height:44px}}

/* Once a draft exists, its original-photo tab replaces the duplicate photo box. */
.public-app .has-studio-draft .portrait-preview-panel { display: none; }
.public-app .has-studio-draft .portrait-workbench { grid-template-columns: 1fr; }
#stage-source:has(#source-tab-portrait.active) #source-preview-panel{display:none}
#stage-source:has(#source-tab-portrait.active)>.stage-footer{display:none}


.portrait-studio .studio-canvas > img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.studio-settings-link{display:inline-block;font-size:12px;color:#8a672c;text-decoration:none;margin-right:12px;padding:8px 0}
.studio-style-panel{margin:8px 0;min-width:0}.studio-field-title{display:block;font-size:12px;font-weight:600;margin-bottom:8px}.studio-field-title small{font-weight:400;font-size:10px;color:#8b733f;margin-left:8px}
.studio-style-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.portrait-studio .studio-style-options button{padding:10px 6px;white-space:normal;text-align:left;min-width:0}.studio-style-options strong{display:block;font-size:12px}.studio-style-options span{display:block;color:#72828c;font-size:10px;line-height:1.5;margin-top:5px}.portrait-studio .studio-style-options [aria-pressed=true]{border-color:#b99055;background:#fff8ec;box-shadow:inset 0 0 0 1px #b9905530;color:#674c23}
.studio-detail{display:flex;align-items:center;gap:10px;font-size:12px;margin-top:8px}.portrait-studio .studio-detail select{flex:1;margin-top:0;padding:8px}.studio-style-panel p{font-size:11px;line-height:1.6;color:#71818c;margin:6px 0 0}
.portrait-studio [hidden]{display:none!important}
.studio-source-card{display:flex;align-items:center;gap:12px;padding:12px;background:#f5f8fa;border:1px solid var(--studio-border);border-radius:10px;margin:8px 0;min-width:0;flex-wrap:wrap}
.studio-source-card img{width:76px;height:92px;object-fit:contain;background:white;border-radius:6px;flex-shrink:0}
.studio-source-card>div{flex:1;min-width:140px;overflow-wrap:anywhere}.studio-source-card strong{display:block;font-size:12px;margin-bottom:6px}.studio-source-card span{font-size:11px;line-height:1.6;color:#657985}.studio-source-card button{padding:7px 10px;font-size:11px}

.studio-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0 0 16px;padding:0;gap:5px}
.studio-progress li{display:flex;gap:7px;align-items:center;padding:10px 8px;background:#f2f5f7;border-radius:8px;font-size:11px;color:#758491}
.studio-progress b{font-size:10px;color:#8a9aa7}.studio-progress [data-state=active]{background:#fff5e3;color:#805619;box-shadow:inset 0 0 0 1px #ead3a9}
.studio-progress [data-state=done]{background:#edf6f0;color:#286847}.studio-progress [data-state=done] b{color:#286847}
.studio-upload small{display:block;font-size:11px;font-weight:400;color:#758491;margin-top:10px;line-height:1.5}
.studio-image-caption{font-size:11px;color:#657985;line-height:1.6;margin:8px 0}
.portrait-studio .studio-retry{border-color:#b28b50;color:#7b571d;background:#fff8eb;margin:8px 0}
.photo-workspace main{max-width:1200px}.photo-workspace .portrait-studio{margin-top:0}
#photo-export{padding:20px;margin-top:20px;border:1px solid #cde2d4;border-radius:12px;background:#f0f8f3;font-size:13px}
#photo-export a{display:inline-block;margin:10px 16px 0 0;color:#173147}

@media(min-width:900px){
  .public-app .portrait-studio>.studio-progress{grid-column:1/3!important;grid-row:1}
  .public-app .portrait-studio>.studio-canvas{grid-column:2;grid-row:3/10}
  .public-app .portrait-studio>.studio-views{grid-column:2;grid-row:2}
  .public-app .portrait-studio>.studio-image-caption{grid-column:2!important;grid-row:10}
  .public-app .portrait-studio>.studio-confirm{grid-column:2;grid-row:11}
  .public-app .portrait-studio>.studio-adopt{grid-column:2;grid-row:12}
  .public-app .portrait-studio>.studio-retry{grid-column:1}
}
@media(max-width:600px){.studio-progress li{padding:9px 4px;gap:4px;font-size:10px}.studio-progress b{font-size:9px}.studio-views button{font-size:11px;padding:8px}.studio-progress{margin-top:6px}}

/* Layout selection reuses source layers with mode-specific placement. */
.studio-mode-hint{display:block;font-weight:400;font-size:11px;line-height:1.6;color:#6d7c86;margin-top:6px}
.studio-mode{margin:7px 0;min-width:0}
.studio-mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.portrait-studio .studio-mode-options button{display:flex;align-items:center;gap:9px;text-align:left;padding:11px 9px;min-width:0;border-radius:11px;background:#fff;transition:background .15s,border-color .15s}
.studio-mode-options strong{display:block;font-size:12px;line-height:1.5}
.studio-mode-options small{display:block;font-size:10px;line-height:1.5;color:#74828b;margin-top:3px}
.portrait-studio .studio-mode-options [aria-pressed=true]{border-color:#aa8044;background:#fff9ef;box-shadow:inset 0 0 0 1px #b9905533}
.studio-layout-icon{position:relative;display:block;flex:0 0 29px;height:37px;border:1px solid #d4dce1;background:white;border-radius:3px;color:#7c8d98}
.studio-layout-icon i{position:absolute;top:7px;left:9px;width:9px;height:9px;border:1px solid currentColor;border-radius:50%}
.studio-layout-icon i:after{content:'';position:absolute;top:10px;left:-4px;width:15px;height:6px;border:1px solid currentColor;border-bottom:0;border-radius:8px 8px 0 0}
.studio-layout-icon b{position:absolute;bottom:6px;left:7px;width:15px;height:4px;border-bottom:1px solid currentColor;transform:rotate(-8deg)}
.studio-layout-icon.is-framed{outline:1px solid #b28b50;outline-offset:-4px;color:#a27d45}
.studio-signature-description{min-width:0;margin:3px 0}.studio-signature-description .studio-intro{margin:2px 0}
.studio-reference-link{font-size:11px;line-height:1.6;color:#8a672c;text-underline-offset:3px}

@media(max-width:360px){.portrait-studio .studio-mode-options button{gap:6px;padding:10px 7px}.studio-mode-options strong{font-size:11px}.studio-layout-icon{flex-basis:25px}}

.studio-layout-icon.is-framed b{left:auto;right:-3px;bottom:1px;width:13px;background:white}

/* Desktop portrait workspace. Keep the mobile studio above independent. */
#desktop-portrait-studio.studio-desktop,
.studio-desktop {
  --studio-ink: #202838;
  --studio-gold: #0f218b;
  --studio-border: #e6e9f0;
  --studio-muted: #7a8496;
  --studio-blue: #0f218b;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
  min-width: 0;
  min-height: 0;
  font-size: 13px;
}
.studio-desktop .studio-topline { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; }
.studio-desktop .studio-heading-actions { display: flex; align-items: center; flex: none; gap: 8px; }
.studio-desktop .studio-size { font-size: 11px; padding: 5px 9px; background: #f5f6fa; border-radius: 7px; }
.portrait-studio.studio-desktop .studio-history-button {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 10px;
  color: #526078; background: #fff; border-color: var(--studio-border); font-size: 12px; border-radius: 8px;
}
.studio-desktop .studio-history-button span { color: #99a1b0; }
.portrait-studio.studio-desktop .studio-guide-link { padding: 6px 2px; color: #66748c; border-color: transparent; background: transparent; font-size: 12px; }
.portrait-studio.studio-desktop .studio-guide-link:hover { color: var(--studio-blue); border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.studio-desktop .studio-topline .studio-progress { display: flex; flex-wrap: wrap; gap: 14px; }
.studio-desktop .studio-topline .studio-progress li { gap: 6px; padding: 4px 0; background: transparent; }
.studio-desktop .studio-topline .studio-progress li + li::before { content: "›"; margin-right: 6px; color: #c2c9d5; font-size: 14px; }
.studio-desktop .studio-progress { flex: none; margin: 0; gap: 5px; }
.studio-desktop .studio-progress li {
  gap: 9px; padding: 7px 11px; background: #f5f6fa; color: #8a93a3;
  font-size: 11px; line-height: 1.4; border-radius: 8px; box-shadow: none;
}
.studio-desktop .studio-progress b {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border: 1px solid #e1e5ee; border-radius: 50%; color: #98a1af; font-size: 9px; font-weight: 600;
}
.studio-desktop .studio-progress [data-state=active] { color: var(--studio-blue); background: #eef1ff; }
.studio-desktop .studio-progress [data-state=active] b { border-color: var(--studio-blue); color: #fff; background: var(--studio-blue); }
.studio-desktop .studio-progress [data-state=done] { background: #eff7f4; color: #328067; }
.studio-desktop .studio-progress [data-state=done] b { background: #328067; border-color: #328067; color: #fff; }
.studio-desktop .studio-workspace {
  display: grid; grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); gap: 18px; min-width: 0; min-height: 0;
}
.studio-desktop .studio-controls { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.studio-desktop .studio-main-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.studio-desktop .studio-main-fields > * { flex-shrink: 0; }
.studio-desktop .studio-section-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: -3px; }
.studio-desktop .studio-section-label > span { font-size: 12px; font-weight: 650; }
.studio-desktop .studio-section-label > small { color: var(--studio-muted); font-size: 11px; }
.studio-desktop .studio-preview {
  display: grid; grid-template-rows: auto minmax(220px, 1fr) auto auto; gap: 10px;
  min-width: 0; min-height: 0; padding: 14px; border: 1px solid var(--studio-border); border-radius: 12px; background: #f7f8fb;
}
.studio-desktop .studio-preview:has(.studio-image-caption[hidden]) { grid-template-rows: auto minmax(220px, 1fr) auto; }
.studio-desktop .studio-preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.studio-desktop .studio-preview-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.studio-desktop .studio-preview-title strong { font-size: 12px; font-weight: 650; }
.studio-desktop .studio-preview-title > span { font-size: 10px; color: #8a93a3; font-variant-numeric: tabular-nums; }
.studio-desktop .studio-upload {
  padding: 0; margin: 0; border: 1px dashed #cbd3ed; border-radius: 10px; background: #f6f8ff;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.studio-desktop .studio-upload:hover { border-color: #7f8bc1; background: #f0f3ff; }
.studio-desktop .studio-upload.is-dragging { border-color: var(--studio-blue); background: #e9eeff; box-shadow: 0 0 0 3px #0f218b12; }
.portrait-studio.studio-desktop .studio-upload-button {
  display: flex; width: 100%; min-height: 76px; align-items: center; gap: 11px; padding: 12px;
  border: 0; border-radius: 10px; background: transparent; text-align: left;
}
.studio-desktop .studio-upload-button > span:nth-child(2) { flex: 1; min-width: 0; }
.studio-desktop .studio-upload-button strong { display: block; font-size: 13px; font-weight: 600; color: var(--studio-blue); }
.studio-desktop .studio-upload-button small { margin: 5px 0 0; font-size: 10px; line-height: 1.5; color: #818ba0; font-weight: 400; }
.studio-desktop .studio-upload-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 9px; background: #e7ecfc; color: var(--studio-blue); }
.studio-desktop .studio-upload-icon svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.studio-desktop .studio-upload-arrow { color: #7180b5; font-size: 20px; font-weight: 400; }
.studio-desktop .studio-source-card { gap: 9px; padding: 8px; margin: -6px 0 0; border-radius: 8px; flex-wrap: nowrap; background: #fafbfe; }
.studio-desktop .studio-source-card img { width: 35px; height: 39px; border-radius: 5px; }
.studio-desktop .studio-source-card > div { min-width: 0; }
.studio-desktop .studio-source-card strong { margin: 0; font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-desktop .studio-source-card span { display: none; }
.studio-desktop .studio-source-card button { padding: 6px 8px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.studio-desktop .studio-name,
.studio-desktop .studio-style-select { display: block; margin: 0; font-size: 12px; font-weight: 600; min-width: 0; }
.studio-desktop .studio-name > span { color: #9aa2b0; font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
.studio-desktop input[type=text],
.studio-desktop select { height: 39px; padding: 8px 10px; margin-top: 7px; border-radius: 8px; font-size: 12px; line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
.studio-desktop input[type=text]::placeholder { color: #a0a8b6; }
.studio-desktop input[type=text]:hover,
.studio-desktop select:hover { border-color: #b9c2da; }
.studio-desktop .studio-field-title { font-size: 12px; margin: 0; }
.studio-desktop .studio-field-title small { color: #939bab; font-size: 10px; margin-left: 7px; }
.studio-desktop .studio-consent { flex: none; margin: 0; gap: 8px; font-size: 11px; line-height: 1.7; color: #778196; }
.studio-desktop .studio-consent input,
.studio-desktop .studio-confirm input { width: 14px; height: 14px; margin: 3px 0 0; accent-color: var(--studio-blue); }
.portrait-studio.studio-desktop .studio-more { display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 10px 11px; border: 1px solid var(--studio-border); border-radius: 9px; background: #fff; color: #526078; text-align: left; }
.studio-desktop .studio-more > span:first-child { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.studio-desktop .studio-more strong { font-size: 12px; font-weight: 500; white-space: nowrap; }
.studio-desktop .studio-more small { font-size: 10px; color: #98a1b0; }
.studio-desktop .studio-more > span:last-child { margin-left: 8px; color: #8994ab; }
.studio-desktop .studio-mode-options { margin-top: 9px; gap: 6px; }
.portrait-studio.studio-desktop .studio-mode-options button { gap: 7px; padding: 10px 7px; border-radius: 8px; }
.studio-desktop .studio-mode-options strong { font-size: 11px; }
.studio-desktop .studio-mode-options small { font-size: 9px; line-height: 1.6; }
.portrait-studio.studio-desktop .studio-mode-options [aria-pressed=true] { border-color: #9ba9df; background: #f1f4ff; color: var(--studio-blue); box-shadow: none; }
.studio-desktop .studio-layout-icon { color: #6676b1; border-color: #dce1ee; }
.studio-desktop .studio-layout-icon.is-framed { color: var(--studio-blue); outline-color: #99a6d2; }
.studio-desktop .studio-mode-hint,
.studio-desktop [data-role=style-hint],
.studio-desktop .studio-intro { margin: 8px 0; font-size: 11px; line-height: 1.7; color: #818a9a; }
.studio-desktop .studio-detail { margin-top: 0; font-size: 12px; gap: 8px; }
.studio-desktop .studio-detail select { margin: 0; height: 35px; font-size: 11px; }
.studio-desktop .studio-reference-settings { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 12px; }
.studio-desktop .studio-settings-link,
.studio-desktop .studio-reference-link { margin: 0; padding: 0; font-size: 11px; line-height: 1.6; color: #5669aa; text-decoration: underline; text-underline-offset: 3px; }
.studio-desktop .studio-secondary-actions button,
.studio-desktop .studio-retry { padding: 8px 10px; font-size: 11px; line-height: 1.5; }
.studio-desktop .studio-retry { width: 100%; margin: 8px 0 0; color: var(--studio-blue); border-color: #c8d1ed; background: #f5f7ff; }
.studio-desktop .studio-run-area { flex: none; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--studio-border); }
.portrait-studio.studio-desktop .studio-primary { min-height: 40px; padding: 9px 12px; border-radius: 9px; border-color: var(--studio-blue); background: var(--studio-blue); color: #fff; font-size: 12px; line-height: 1.5; font-weight: 600; transition: background .15s, box-shadow .15s; }
.portrait-studio.studio-desktop .studio-primary:hover:not(:disabled) { border-color: #1e339f; background: #1e339f; box-shadow: 0 3px 9px #0f218b1c; }
.portrait-studio.studio-desktop button:disabled { opacity: 1; color: #a5adbb; background: #f1f3f7; border-color: #e6e9f0; cursor: not-allowed; box-shadow: none; }
.studio-desktop .studio-status { min-height: 0; margin: 0; padding: 0 2px; color: #8992a3; background: transparent; border-radius: 5px; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.studio-desktop .studio-status.is-error { padding: 7px 9px; color: #b14d49; background: #fff2f0; }
.studio-desktop .studio-status-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.studio-desktop .studio-status-row .studio-status { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.studio-desktop .studio-status-row .studio-status.is-error { padding: 4px 7px; }
.portrait-studio.studio-desktop .studio-status-link { flex: none; padding: 3px 0; border: 0; border-radius: 0; background: transparent; color: #5669aa; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.studio-desktop.is-ready .studio-status:not(.is-error) { color: #328067; }
.studio-desktop.is-busy .studio-status:not(.is-error) { color: #5d6ba4; }
.studio-desktop .studio-layer-status { margin: 0; gap: 5px; font-size: 10px; }
.studio-desktop .studio-layer-status:empty { display: none; }
.studio-desktop .studio-layer-status span { padding: 3px 7px; }
.studio-desktop .studio-views { margin: 0; gap: 3px; flex-wrap: wrap; }
.portrait-studio.studio-desktop .studio-views button { padding: 6px 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #7f899b; font-size: 11px; line-height: 1.5; }
.portrait-studio.studio-desktop .studio-views button:disabled { background: transparent; color: #a2aaba; }
.portrait-studio.studio-desktop .studio-views [aria-pressed=true]:not(:disabled) { background: #fff; border-color: #e2e7f1; color: var(--studio-blue); font-weight: 600; box-shadow: 0 1px 3px #20283805; }
.studio-desktop .studio-canvas {
  height: auto; min-width: 0; min-height: 0; aspect-ratio: auto; border: 1px solid #e7eaf1; border-radius: 10px;
  background: #fff; box-shadow: 0 2px 5px #20283803;
}
.studio-desktop .studio-canvas [data-role=empty] { justify-items: center; gap: 9px; max-width: 100%; padding: 16px; color: #9aa3b2; font-size: 11px; line-height: 1.6; }
.studio-desktop .studio-canvas [data-role=empty] b { color: #68748b; font-size: 15px; font-weight: 500; }
.studio-desktop .studio-empty-art { position: relative; width: 106px; height: 106px; margin-bottom: 7px; border-radius: 50%; background: #f7f8fd; }
.studio-desktop .studio-empty-art svg { position: absolute; inset: 0; margin: auto; width: 75px; height: 83px; stroke: #aab5d5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.studio-desktop .studio-empty-art svg rect { fill: white; }
.studio-desktop .studio-empty-signature { stroke: #6579b4; }
.studio-desktop .studio-empty-art i { position: absolute; right: 12px; top: 9px; width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%; background: #f4cc4e; }
.studio-desktop .studio-empty-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 10px; color: #a4adbc; }
.studio-desktop .studio-empty-meta > span { color: #c1c8d4; }
.portrait-studio.studio-desktop .studio-enlarge { right: 10px; bottom: 10px; padding: 7px 10px; font-size: 11px; background: #ffffffed; border-color: #e2e7f1; border-radius: 7px; backdrop-filter: blur(8px); }
.studio-desktop .studio-enlarge > span { margin-left: 8px; color: #8390aa; }
.studio-desktop .studio-image-caption { min-height: 14px; margin: 0; color: #98a1af; font-size: 10px; line-height: 1.6; }
.studio-desktop .studio-adopt-area { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.studio-desktop .studio-confirm { gap: 8px; margin: 0; color: #79849a; font-size: 11px; line-height: 1.7; }
.studio-desktop .studio-adopt { margin: 0; }
.studio-desktop .studio-lightbox { padding: 14px; border-radius: 14px; box-shadow: 0 20px 80px #111a3c30; }
.studio-desktop .studio-lightbox::backdrop { background: #17213b90; backdrop-filter: blur(4px); }
.studio-desktop .studio-settings-dialog { width: min(720px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 22px; box-sizing: border-box; border: 1px solid #e3e7f1; border-radius: 16px; background: #fff; color: var(--studio-ink); box-shadow: 0 24px 90px #17213b30; }
.studio-desktop .studio-settings-dialog[open] { display: flex; flex-direction: column; gap: 18px; }
.studio-desktop .studio-settings-dialog::backdrop { background: #17213b65; backdrop-filter: blur(5px); }
.studio-desktop .studio-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.studio-desktop .studio-settings-header h3 { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.5; }
.studio-desktop .studio-settings-header p { margin: 4px 0 0; color: #8992a3; font-size: 11px; }
.portrait-studio.studio-desktop .studio-settings-header button { flex: none; padding: 5px 9px; border: 0; background: #f4f6fa; color: #7b879c; font-size: 15px; }
.studio-desktop .studio-settings-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #f4f6fa; border-radius: 10px; }
.portrait-studio.studio-desktop .studio-settings-tabs button { padding: 8px 12px; border-color: transparent; background: transparent; border-radius: 7px; color: #7a8599; }
.portrait-studio.studio-desktop .studio-settings-tabs [aria-selected=true] { background: #fff; color: var(--studio-blue); border-color: #e4e8f2; font-weight: 600; box-shadow: 0 1px 3px #17213b05; }
.studio-desktop .studio-settings-content { min-width: 0; }
.studio-desktop .studio-settings-content [role=tabpanel] { display: flex; flex-direction: column; gap: 14px; min-height: 248px; }
.studio-desktop .studio-settings-content .studio-mode { margin: 0; }
.studio-desktop .studio-settings-content .studio-mode-options { gap: 12px; }
.portrait-studio.studio-desktop .studio-settings-content .studio-mode-options button { gap: 12px; padding: 12px; }
.studio-desktop .studio-settings-content .studio-mode-options strong { font-size: 12px; }
.studio-desktop .studio-settings-content .studio-mode-options small { font-size: 10px; }
.studio-desktop .studio-setting-card { padding: 14px 16px; border: 1px solid var(--studio-border); border-radius: 10px; background: #fafbfe; }
.studio-desktop .studio-setting-card .studio-detail { display: grid; grid-template-columns: 90px minmax(0, 1fr); }
.studio-desktop .studio-setting-card [data-role=style-hint] { margin-bottom: 0; }
.studio-desktop .studio-settings-content .studio-reference-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.studio-desktop .studio-settings-content .studio-reference-settings a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--studio-border); border-radius: 10px; text-decoration: none; }
.studio-desktop .studio-status-detail > p { margin: 8px 0 0; font-size: 12px; line-height: 1.75; color: #69778e; white-space: pre-wrap; overflow-wrap: anywhere; }
.studio-desktop .studio-status-detail > p.is-error { color: #b14d49; }
.studio-desktop .studio-status-pages { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; color: #8a93a3; font-size: 10px; }
.portrait-studio.studio-desktop .studio-status-pages button { padding: 4px 8px; font-size: 10px; }
.studio-desktop .studio-recovery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.studio-desktop .studio-recovery-actions .studio-secondary-actions { display: contents; }
.studio-desktop .studio-recovery-actions button { margin: 0; }
.studio-desktop .studio-settings-note { margin: 0; font-size: 11px; line-height: 1.65; color: #8992a3; }
.studio-desktop .studio-settings-footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding-top: 14px; border-top: 1px solid var(--studio-border); }
.studio-desktop .studio-settings-footer > span { color: #929aaa; font-size: 11px; }
.portrait-studio.studio-desktop .studio-settings-footer .studio-primary { min-height: 36px; min-width: 102px; padding: 7px 14px; }
@media (min-width: 1001px) {
  #desktop-portrait-studio.studio-desktop { height: 100%; }
  .studio-desktop .studio-workspace { flex: 1; min-height: 0; }
  .studio-desktop .studio-main-fields { flex: 1; padding: 2px; }
  .studio-desktop .studio-preview { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .studio-desktop .studio-preview:has(.studio-image-caption[hidden]) { grid-template-rows: auto minmax(0, 1fr) auto; }
}
@media (min-width: 1600px) and (min-height: 850px) {
  .studio-desktop .studio-workspace { grid-template-columns: minmax(300px, 350px) minmax(0, 1fr); gap: 24px; }
  .studio-desktop .studio-main-fields { gap: 18px; }
  .portrait-studio.studio-desktop .studio-upload-button { min-height: 88px; }
  .studio-desktop .studio-preview { padding: 18px; gap: 12px; }
  .studio-desktop .studio-preview-title { width: auto; margin-right: auto; }
  .studio-desktop .studio-empty-art { width: 132px; height: 132px; }
  .studio-desktop .studio-empty-art svg { width: 94px; height: 104px; }
  .studio-desktop .studio-canvas [data-role=empty] { gap: 12px; font-size: 12px; }
  .studio-desktop .studio-canvas [data-role=empty] b { font-size: 18px; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  #desktop-portrait-studio.studio-desktop { gap: 8px; }
  .portrait-studio.studio-desktop .studio-history-button { padding: 4px 9px; font-size: 11px; }
  .studio-desktop .studio-progress li { padding-block: 3px; }
  .studio-desktop .studio-controls { gap: 8px; }
  .studio-desktop .studio-main-fields { gap: 10px; }
  .portrait-studio.studio-desktop .studio-upload-button { min-height: 56px; padding: 7px 10px; }
  .studio-desktop .studio-upload-button small { margin-top: 3px; }
  .studio-desktop .studio-upload-icon { flex-basis: 30px; height: 30px; }
  .studio-desktop .studio-name, .studio-desktop .studio-style-select, .studio-desktop .studio-field-title { line-height: 16px; }
  .studio-desktop input[type=text], .studio-desktop select { height: 36px; margin-top: 4px; }
  .portrait-studio.studio-desktop .studio-more { padding: 7px 10px; }
  .studio-desktop .studio-consent { line-height: 1.5; }
  .studio-desktop .studio-section-label { display: none; }
  .studio-desktop .studio-preview { padding: 11px; gap: 7px; }
  .studio-desktop .studio-preview-toolbar { gap: 4px; }
  .studio-desktop .studio-preview-title { width: auto; margin-right: auto; }
  .studio-desktop .studio-preview-title > span { display: none; }
  .studio-desktop .studio-views { gap: 1px; }
  .portrait-studio.studio-desktop .studio-views button { font-size: 10px; padding: 5px 7px; }
  .studio-desktop .studio-empty-art { width: 76px; height: 76px; margin-bottom: 1px; }
  .studio-desktop .studio-empty-art svg { width: 55px; height: 62px; }
  .studio-desktop .studio-empty-art i { top: 4px; right: 5px; }
  .studio-desktop .studio-canvas [data-role=empty] { gap: 5px; }
  .studio-desktop .studio-empty-meta { margin-top: 4px; }
  .studio-desktop .studio-run-area { padding-top: 9px; gap: 6px; }
  .studio-desktop .studio-adopt-area { gap: 6px; }
}
@media (min-width: 1001px) and (max-height: 680px) {
  #desktop-portrait-studio.studio-desktop { gap: 6px; }
  .studio-desktop .studio-progress li { padding-block: 2px; }
  .studio-desktop .studio-controls { gap: 6px; }
  .studio-desktop .studio-main-fields { gap: 5px; }
  .portrait-studio.studio-desktop .studio-upload-button { min-height: 48px; padding-block: 5px; }
  .studio-desktop .studio-upload-button small { font-size: 9px; margin-top: 1px; }
  .studio-desktop .studio-source-card { padding: 4px 6px; margin-top: 0; }
  .studio-desktop .studio-source-card img { width: 26px; height: 29px; }
  .studio-desktop input[type=text], .studio-desktop select { height: 32px; padding-block: 5px; margin-top: 3px; }
  .studio-desktop .studio-run-area { padding-top: 6px; gap: 5px; }
  .portrait-studio.studio-desktop .studio-primary { min-height: 35px; padding-block: 6px; }
  .studio-desktop .studio-canvas [data-role=empty] { padding: 8px; }
  .studio-desktop .studio-empty-art { width: 58px; height: 58px; }
  .studio-desktop .studio-empty-art svg { width: 43px; height: 47px; }
  .studio-desktop .studio-empty-meta { display: none; }
}
@media (max-height: 680px) {
  .studio-desktop .studio-settings-dialog { padding: 16px 20px; }
  .studio-desktop .studio-settings-dialog[open] { gap: 12px; }
  .studio-desktop .studio-settings-content [role=tabpanel] { min-height: 225px; gap: 10px; }
  .studio-desktop .studio-setting-card { padding: 10px 12px; }
  .studio-desktop .studio-settings-footer { padding-top: 10px; }
}
@media (max-width: 1000px) {
  .studio-desktop .studio-workspace { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .studio-desktop .studio-preview { grid-template-rows: auto auto auto auto; padding: 12px; }
  .studio-desktop .studio-canvas { aspect-ratio: 1; min-height: 260px; }
  .studio-desktop .studio-main-fields { overflow: visible; }
}
@media (max-width: 600px) {
  .studio-desktop .studio-topline { align-items: flex-start; flex-direction: column; gap: 8px; }
  .studio-desktop .studio-topline .studio-progress { gap: 10px; }
  .studio-desktop .studio-heading-actions { align-self: flex-end; }
  .studio-desktop .studio-progress li { padding: 6px; gap: 5px; font-size: 10px; }
  .studio-desktop .studio-progress b { width: 16px; height: 16px; font-size: 8px; }
}
.studio-preview-tools { display: grid; gap: 16px; margin: 16px 0; text-align: left; }
.studio-preview-tools[hidden] { display: none; }
.studio-signature-editor, .studio-time-estimate { padding: 16px; border: 1px solid #dce1ec; border-radius: 8px; background: #f8f9fc; }
.studio-signature-editor .studio-name { margin: 0 0 10px; }
.studio-signature-editor > button { width: 100%; min-height: 44px; border: 1px solid #172b85; border-radius: 5px; background: white; color: #172b85; cursor: pointer; }
.studio-signature-editor > button:disabled { opacity: .5; cursor: default; }
.studio-signature-editor > p, .studio-time-estimate small { display: block; margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: #646d7c; }
.studio-time-estimate > span { font-size: 13px; }
.studio-time-estimate > strong { display: block; margin-top: 5px; font-size: 21px; color: #182954; }
.studio-time-estimate.is-long { border-color: #dcb778; background: #fffbf2; }
.studio-time-estimate > p { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: #805816; }
.studio-time-estimate > button { margin-top: 12px; min-height: 40px; padding: 8px 14px; color: #172b85; border: 1px solid #c8ccda; border-radius: 5px; background: white; cursor: pointer; }