:root{--bg:#0a0e14;--panel:#111722;--card:#151c28;--line:#263246;--txt:#e8edf5;--muted:#8490a3;--acc:#7a8cff;--green:#54d38b;--danger:#ff6b7a}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:13px system-ui,-apple-system,Segoe UI,sans-serif}button,input,select{font:inherit}#app{height:100%;display:flex;flex-direction:column}.header{height:54px;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}.brand{display:flex;gap:10px;align-items:center}.brand b{font-size:16px}.brand span{color:var(--muted);font-size:11px}.actions{display:flex;gap:6px;position:relative}.btn{border:1px solid var(--line);background:#141b27;color:var(--txt);border-radius:7px;padding:7px 10px;cursor:pointer}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{border-color:var(--acc);background:rgba(122,140,255,.15)}.btn.success{border-color:var(--green);background:rgba(84,211,139,.13)}.full{width:100%;margin-top:7px}.menu{position:absolute;right:0;top:42px;width:170px;background:#121925;border:1px solid var(--line);border-radius:9px;padding:6px;z-index:50;box-shadow:0 14px 40px #0008}.menu button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--txt);padding:9px;border-radius:6px}.menu button:hover{background:#1d2736}.hidden{display:none!important}.main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 330px}.viewer{min-width:0;display:flex;flex-direction:column}.toolbar{height:42px;display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--line);background:#0e141e}.toolbar strong{font-size:11px;color:var(--muted)}.view{display:flex;gap:4px}.view-mode-btn{border:1px solid var(--line);background:#141b27;color:var(--muted);border-radius:6px;padding:5px 8px}.view-mode-btn.active{color:var(--txt);border-color:var(--acc)}.canvasWrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px;position:relative}.canvasWrap canvas{width:min(100%,min(70vh,600px));height:min(100%,min(70vh,600px));image-rendering:pixelated;border:1px solid var(--line);background:repeating-conic-gradient(#161d29 0 25%,#111722 0 50%) 0/20px 20px}.canvasWrap #overlayCanvas{position:absolute;pointer-events:none}.info{position:absolute;bottom:20px;background:#000b;padding:5px 12px;border:1px solid var(--line);border-radius:20px;color:var(--muted)}.controls{background:var(--panel);border-left:1px solid var(--line);overflow:auto;padding:12px}.controls section{padding:10px 0;border-bottom:1px solid var(--line)}h3{font-size:12px;margin:0 0 8px;color:#b8c2d2}.drop{border:1px dashed #39465d;border-radius:8px;padding:18px 8px;text-align:center;display:flex;flex-direction:column;gap:4px;cursor:pointer;background:#0e141e}.drop span{font-size:27px}.drop small{color:var(--muted);overflow:hidden;text-overflow:ellipsis}.drop+input{position:absolute;left:-9999px}.poseGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.pose-btn,.dir-btn{border:1px solid var(--line);background:#141b27;color:var(--muted);border-radius:6px;padding:7px 3px}.pose-btn.active,.dir-btn.active{border-color:var(--acc);color:var(--txt);background:rgba(122,140,255,.12)}.dirGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.row{display:flex;align-items:center;gap:7px;margin-top:8px}.row span:first-child{width:38px;color:var(--muted)}.row input{flex:1}.row output{width:28px;text-align:right;color:var(--muted)}#animStatus{color:var(--muted);margin-left:auto}.status{height:30px;background:#0d131c;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:var(--muted);font-size:10px;flex:none}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#748092;margin-right:7px}.dot.loading{background:#f1c75b}.dot.done{background:var(--green)}.dot.error{background:var(--danger)}.overlay{position:fixed;inset:0;background:#05070beF;z-index:100;display:flex;flex-direction:column}.segmentHeader{height:56px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);background:#101722}.segmentHeader b{display:block}.segmentHeader small{color:var(--muted)}.segmentBody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 310px}.segCanvasWrap{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px}.segCanvasWrap canvas{max-width:100%;max-height:100%;width:min(100%,700px);height:auto;image-rendering:pixelated;border:1px solid var(--line);touch-action:none}.segSide{background:#111722;border-left:1px solid var(--line);padding:10px;overflow:auto}.segSide h4{margin:0 0 8px}.partList{display:flex;flex-direction:column;gap:4px;max-height:42vh;overflow:auto}.part-item{text-align:left;border:1px solid var(--line);background:#141b27;color:var(--muted);border-radius:6px;padding:7px}.part-item.active{border-color:var(--acc);color:var(--txt)}.part-item.confirmed{color:var(--green)}.addRow,.segModes,.nav{display:flex;gap:5px;margin-top:8px}.addRow select{flex:1;background:#141b27;color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:7px}.segSide p{font-size:11px;color:var(--muted);line-height:1.4}.nav .btn{flex:1}@media(max-width:800px){.header{height:50px}.brand span{display:none}.header .btn{padding:6px 7px}.main{grid-template-columns:1fr;grid-template-rows:minmax(45vh,1fr) auto}.viewer{min-height:45vh}.controls{border-left:0;border-top:1px solid var(--line);max-height:47vh}.canvasWrap{padding:7px}.canvasWrap canvas{width:min(92vw,56vh);height:min(92vw,56vh)}.status{font-size:9px}.status span:last-child{display:none}.segmentBody{grid-template-columns:1fr;grid-template-rows:minmax(45vh,1fr) auto}.segSide{border-left:0;border-top:1px solid var(--line);max-height:46vh}.partList{max-height:22vh}.segCanvasWrap canvas{width:94vw;max-height:46vh}.segmentHeader{height:52px}.poseGrid{grid-template-columns:repeat(4,1fr)}}
/* V15.3 preview fix: keep the loaded sprite visible and align the transparent overlay exactly over it. */
.canvasWrap{overflow:hidden}
.canvasWrap #mainCanvas{position:relative;z-index:1}
.canvasWrap #overlayCanvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}
.stageCanvas{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:auto!important;touch-action:none}.canvasWrap{overflow:hidden}.stageCanvas.hidden{display:none!important}.dirGrid{grid-template-columns:repeat(3,1fr)}@media(max-width:800px){.dirGrid{grid-template-columns:repeat(3,1fr)}.canvasWrap .stageCanvas{width:min(92vw,56vh)!important;height:min(92vw,56vh)!important}}
.engine-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;opacity:.72;margin:.2rem .35rem;white-space:nowrap}
@media(max-width:700px){.engine-status{font-size:.65rem;max-width:145px;overflow:hidden;text-overflow:ellipsis}}

/* V22.2 spatial controls */
.stageCanvas{touch-action:none!important;user-select:none;-webkit-user-select:none;}
#btnConfirmPart{flex:1;}
@media(max-width:700px){.segModes{flex-wrap:wrap}.segModes .btn{flex:1;min-width:88px}.addRow{flex-wrap:wrap}.addRow select{min-width:100%;}.stageCanvas{min-width:0;min-height:0;}}
/* V43 mini-sculpt controls */
.sculpt select{width:100%;}
#sculptPart{width:100%;margin-top:5px;background:#141b27;color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:7px}
.studioModeHead{position:sticky;top:-12px;z-index:10;margin:-12px -12px 8px;padding:10px 10px 8px;background:linear-gradient(180deg,#121a27,#101722);border-bottom:1px solid var(--line);box-shadow:0 8px 20px #0005}.studioModeHead>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.studioModeHead b{font-size:12px;letter-spacing:.12em}.studioModeHead span{font-size:9px;color:var(--acc);letter-spacing:.14em}.studioModes{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.studioModes button{border:1px solid var(--line);background:#0f1622;color:var(--muted);border-radius:7px;padding:7px 3px;font-size:10px}.studioModes button.active{border-color:var(--acc);background:rgba(122,140,255,.16);color:var(--txt)}.controls section.mode-hidden{display:none}.presetRow{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}.lookSection .hint{margin-top:8px}.stageCanvas{background:radial-gradient(circle at 50% 45%,#1a2433,#080c12 72%)}
@media(max-width:800px){.studioModeHead{top:-12px}.studioModes button{padding:8px 2px;font-size:9px}.controls{padding:10px}.presetRow .btn{padding:8px 3px}.studioModeHead{margin:-10px -10px 8px}}

:root{--bg:#080b11;--panel:#0f141d;--card:#151c27;--line:#273243;--txt:#f3f6fb;--muted:#8f9bad;--acc:#7c8cff;--acc2:#52d6b2;--green:#55d98c}
.header{backdrop-filter:blur(12px);background:rgba(15,20,29,.92)}
.studioModes button{font-weight:600;letter-spacing:.02em}
.studioModes button.active{box-shadow:0 0 0 1px rgba(124,140,255,.12) inset}
.controls section{background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);border-radius:10px;margin-bottom:7px;padding:11px}
.row input[type=range]{accent-color:var(--acc)}
.hint{color:var(--muted);font-size:11px;line-height:1.45}
@media(max-width:800px){.controls{max-height:43vh}.studioModes{grid-template-columns:repeat(3,1fr)}.studioModes button{min-height:34px}.controls section{padding:10px;margin-bottom:6px}.canvasWrap{padding:4px}.canvasWrap canvas{border-radius:10px}}

.anatomyPresets{grid-template-columns:repeat(4,1fr)}
.anatomyPresets .btn{font-size:10px;padding:7px 3px}
@media(max-width:700px){.anatomyPresets{grid-template-columns:repeat(2,1fr)}}

.sculptTools select{flex:1;background:#141b27;color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:6px}.sculptTools .row span:first-child{width:58px}.stageCanvas.sculpt-active{cursor:crosshair!important;touch-action:none!important;box-shadow:0 0 0 2px rgba(124,140,255,.45),0 0 30px rgba(124,140,255,.12)}#btnSculptMode.active{border-color:var(--acc2);background:rgba(82,214,178,.15)}
#sculptCursor{box-shadow:0 0 0 1px rgba(120,190,255,.25),0 0 12px rgba(120,190,255,.25)}

#sculptCursor{position:fixed;display:none;width:36px;height:36px;border:2px solid rgba(120,190,255,.9);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(120,190,255,.25),0 0 12px rgba(120,190,255,.25);}
.stageCanvas.render-soft{image-rendering:auto!important;}

.header{position:relative;z-index:1000}.menu{z-index:2000}.menu button{min-height:40px}.canvasWrap{isolation:isolate}.studioModeHead{z-index:20}.poseJointEmpty{opacity:.6}

.menu{top:calc(100% + 7px);z-index:5000;max-height:min(72vh,520px);overflow:auto;}
#projectMenu{pointer-events:auto;}
.stageCanvas.sculpt-active{cursor:none!important;}
#sculptCursor{background:rgba(120,190,255,.05);mix-blend-mode:screen;}
@media(max-width:800px){.menu{position:fixed;right:8px;top:58px;width:min(240px,calc(100vw - 16px));max-height:70vh;}}
.project-picker-overlay{position:fixed;inset:0;background:#05070bd9;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.project-picker{width:min(420px,94vw);max-height:82vh;overflow:auto;background:#111722;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 80px #000a;padding:10px}
.project-picker-head{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 12px;font-size:14px}.project-picker-head button{border:0;background:transparent;color:var(--muted);font-size:25px;line-height:1}
.project-picker-list{display:flex;flex-direction:column;gap:6px}.project-picker-list button{border:1px solid var(--line);background:#141b27;color:var(--txt);border-radius:8px;padding:10px;text-align:left;cursor:pointer}.project-picker-list button:hover{background:#1a2331;border-color:var(--acc)}.project-picker-list small{display:block;color:var(--muted);margin-top:3px;font-size:10px}
.facePresets{grid-template-columns:repeat(4,1fr)}
.stageCanvas{cursor:grab}
.stageCanvas:active{cursor:grabbing}
.stageCanvas.sculpt-active{cursor:none!important}

/* V115 interaction polish */
#sculptCursor{pointer-events:none;position:fixed;border:2px solid rgba(120,190,255,.95);border-radius:50%;z-index:99999;transform:translate(-50%,-50%);display:none;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 12px rgba(120,190,255,.25)}
.stageCanvas{touch-action:none}
.mode-hidden{display:none!important}



.mode-hidden{display:none!important}.active-part-bar{display:flex;gap:7px;align-items:center;margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}.active-part-bar select{flex:1;background:#141b27;color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:6px}.sculpt-history .btn,.paintUndo,.paintRedo{flex:1}.rig-summary{padding:8px;border:1px solid var(--line);border-radius:8px;background:#0e141e;color:var(--muted);margin-top:8px}.sculpt-active{touch-action:none!important}
/* V126 Animation Studio timeline */
.animTimeline{height:34px;margin-top:8px;border:1px solid var(--line);border-radius:7px;background:#0c121b;overflow:hidden;padding:5px;touch-action:pan-x}
.animTimelineTrack{height:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(10px,1fr);gap:2px;align-items:center}
.animKeyCell{height:20px;border:0;background:#182131;border-radius:3px;padding:0;position:relative;cursor:pointer}
.animKeyCell.current{outline:2px solid var(--acc);outline-offset:-1px}
.animKeyCell.key::after{content:'';position:absolute;width:7px;height:7px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);background:var(--acc);border-radius:1px}
.animKeyCell.rangeOff{opacity:.35}
.animKeyControls .btn{flex:1;font-size:10px;padding:6px 3px}
.frameRange{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:10px;flex:1}.frameRange input{width:54px;background:#141b27;color:var(--txt);border:1px solid var(--line);border-radius:5px;padding:4px}
#frameNumber{width:52px;background:#141b27;color:var(--txt);border:1px solid var(--line);border-radius:5px;padding:4px;text-align:center}
/* V146 Animation Studio polish */
.poseGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pose-btn{min-height:34px;white-space:nowrap}
.pose-btn[data-pose="custom"]{grid-column:1/-1}
.animation-record-row{position:sticky;bottom:0;z-index:5;padding-top:6px;background:linear-gradient(transparent,#0d121c 35%)}
.studioModes button[data-mode="paint"]{font-size:9px;}
@media(max-width:800px){.studioModes button[data-mode="paint"]{font-size:8px;}}
/* V157 mobile layout hardening: no phantom horizontal rail and always reachable actions. */
html,body,#app{width:100%;max-width:100%;overflow:hidden}
.main{min-width:0;min-height:0;overflow:hidden}
.controls{min-width:0;min-height:0;overflow-x:hidden;overscroll-behavior:contain;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.controls *{max-width:100%}
.segmentBody{min-height:0;overflow:hidden}
.segSide{min-height:0;overflow-x:hidden;padding-bottom:18px;scroll-padding-bottom:18px}
#btnFinishSeg{position:relative;z-index:1;margin-bottom:10px}
@media(max-width:800px){.main{grid-template-rows:minmax(42vh,1fr) minmax(0,43vh)}.controls{max-height:none}.segSide{max-height:46vh}.studioModes{width:100%}}

/* V158 UX refinements */
.header .export-compact-btn{display:none}
.export-compact-menu{min-width:190px}
.setupProgress{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px}.setupProgress span{font-size:10px;padding:5px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:#0e141e}.setupProgress span.active{color:var(--txt);border-color:var(--acc);background:rgba(122,140,255,.12)}
.p1-next{background:rgba(12,17,26,.97);border:1px solid #34445f;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.42);backdrop-filter:blur(12px);padding:10px;color:var(--txt)}
.p1-guide-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9eafff}.p1-guide-actions{display:flex;gap:4px}.p1-guide-actions button{width:24px;height:24px;border:1px solid #31405b;border-radius:6px;background:#121a27;color:#dbe3f0;font-size:14px;line-height:1;padding:0}.p1-guide-body{margin-top:6px}.p1-guide-title{font-size:10px;color:#8490a3;margin-bottom:3px}.p1-next.compact{width:44px;min-width:44px;padding:4px;border-radius:10px}.p1-next.compact .p1-guide-head b,.p1-next.compact .p1-guide-body{display:none}.p1-next.compact .p1-guide-head{justify-content:flex-end}
@media(max-width:900px){.header{height:52px;padding:7px 9px}.header .brand b{font-size:14px}.header .brand span{display:none}.header .actions{margin-left:auto;gap:4px}.header .actions>button:not(.export-compact-btn):not(#btnProjectMenu){display:none}.header .export-compact-btn{display:block}.main{grid-template-columns:1fr;grid-template-rows:minmax(40vh,44vh) minmax(0,56vh);min-height:0}.controls{height:56vh;max-height:none;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(112px + env(safe-area-inset-bottom));overscroll-behavior:contain}.p1-next{left:8px;bottom:calc(56vh + 38px + env(safe-area-inset-bottom));width:min(280px,calc(100vw - 16px));max-width:min(280px,calc(100vw - 16px));z-index:120}.setupCard{width:min(94vw,720px);max-height:calc(100vh - 20px);padding:16px}.setupParts{max-height:180px}.setupActions{position:sticky;bottom:0;background:#101620;padding-top:10px;margin:12px -4px -4px}.setupOptions{grid-template-columns:1fr}}
@media(max-width:430px){.poseGrid{grid-template-columns:repeat(3,1fr)}.dirGrid{grid-template-columns:repeat(3,1fr)}.header .btn{padding:6px;font-size:11px}}


/* V158.1 mobile UX hardening */
@media(max-width:900px){
  .header{display:flex;align-items:center;gap:8px;min-width:0;box-sizing:border-box}
  .header .brand{min-width:0;flex:1;overflow:hidden}
  .header .brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .header .actions{display:flex;align-items:center;flex:0 0 auto}
  .header .export-compact-btn{min-width:92px;justify-content:center}
  .controls{scrollbar-width:none;overscroll-behavior-y:contain}
  .controls::-webkit-scrollbar{display:none}
  .p1-next{pointer-events:auto;bottom:calc(56vh + 48px + env(safe-area-inset-bottom));max-height:100px;overflow:hidden}
  .p1-next.compact{bottom:calc(56vh + 52px + env(safe-area-inset-bottom));}
  .setupCard{display:flex;flex-direction:column}
  .setupCard h3{font-size:13px}
  .setupActions{margin-top:auto}
}
@media(max-width:430px){
  .header .export-compact-btn{min-width:84px;padding-inline:9px}
  .setupProgress{gap:4px}.setupProgress span{padding:4px 6px;font-size:9px}
  .setupCard{padding:12px;border-radius:16px}
}
/* V165 Animation / Character / Texture Studio */
.jj-v165-panel{border:1px solid #2d3a50!important;background:linear-gradient(180deg,rgba(124,140,255,.055),rgba(255,255,255,.012))!important;padding:11px!important;margin:8px 0!important;box-shadow:0 10px 28px rgba(0,0,0,.16);}
.jj-v165-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.jj-v165-panel-head h3{margin:0}.jj-v165-panel-head span{font-size:8px;letter-spacing:.1em;color:var(--acc);opacity:.9;text-align:right}.jj-v165-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:7px}.jj-v165-panel .row{min-width:0}.jj-v165-panel .row>span:first-child{width:72px}.jj-v165-panel select,.jj-v165-panel input[type=range]{min-width:0;flex:1;background:#141b27;color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:6px}.jj-v165-panel .hint{margin:8px 0 0}.jj-character-profile{font-size:11px;color:var(--txt);padding:7px 8px;border-radius:7px;background:#0e141e;border:1px solid var(--line);margin-top:7px}.jj-character-metrics{font-size:10px;color:var(--muted);margin-top:5px}.jj-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:7px}.jj-swatch{width:100%;aspect-ratio:1;border-radius:6px;border:1px solid rgba(255,255,255,.14);cursor:pointer;min-width:0}.jj-swatch:focus-visible{outline:2px solid var(--acc)}
@media(max-width:900px){.jj-v165-panel{padding:9px!important}.jj-v165-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.jj-v165-panel-head span{max-width:100px}.jj-palette{grid-template-columns:repeat(6,1fr)}}
@media(max-width:430px){.jj-v165-grid{grid-template-columns:1fr 1fr}.jj-v165-panel .row>span:first-child{width:64px;font-size:10px}.jj-v165-panel .btn{padding:7px 5px;font-size:10px}.jj-palette{grid-template-columns:repeat(6,1fr)}}

/* V169 — questionnaire part picker: predictable, searchable and touch-friendly. */
.setupPartTools{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;align-items:center;margin:7px 0}
.setupPartTools input{width:100%;min-width:0;background:#141b27;color:#e8edf5;border:1px solid #2a3550;border-radius:8px;padding:8px 10px;font:inherit}
.setupPartTools .btn{white-space:nowrap}
.setup-part-count{float:right;font-size:11px;font-weight:600;color:#91a0b9}
.setup-group-title{grid-column:1/-1;padding:7px 8px 3px;color:#91a0b9;font-size:10px;text-transform:uppercase;letter-spacing:.08em;border-top:1px solid #273249}
.setup-group-title:first-child{border-top:0}
.setup-part{cursor:pointer;min-height:34px;border-radius:8px;position:relative}
.setup-part:hover{background:#131b28}
.setup-part input{flex:0 0 auto}
.setup-part small{color:#7686a3;font-size:9px;margin-left:auto}
.setup-part.recommended{background:rgba(122,140,255,.035)}
@media(max-width:600px){.setupPartTools{grid-template-columns:1fr 1fr}.setupPartTools input{grid-column:1/-1}.setupParts{max-height:280px}.setup-part{min-height:38px;padding:8px}.setupPartTools .btn{min-height:32px}}

/* V169 — questionnaire image preview / onboarding flow */
.setup-image-card{margin:12px 0;padding:10px;border:1px solid #2a3550;border-radius:14px;background:#0d121b}
.setup-image-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.setup-image-head div{display:flex;flex-direction:column;gap:2px}.setup-image-head small{color:var(--muted);font-size:10px}
.setup-image-preview{min-height:120px;max-height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;border:1px dashed #33415e;background:repeating-conic-gradient(#161d29 0 25%,#111722 0 50%) 0/16px 16px;color:var(--muted);padding:8px}
.setup-image-preview img{max-width:100%;max-height:170px;object-fit:contain;image-rendering:pixelated;border-radius:6px}
.setup-image-card:not(.has-image) .setup-image-preview img{display:none!important}
.setup-part-tools{display:flex;gap:7px;align-items:center;margin:8px 0}.setup-part-tools input[type=search]{flex:1;min-width:0;background:#141b27;color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:8px}.setup-part-tools .btn{white-space:nowrap}
.setup-empty{grid-column:1/-1;padding:18px;text-align:center;color:var(--muted)}
.setup-group-title{grid-column:1/-1;padding:5px 2px;color:#9eabd0;font-size:10px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid #202a3c;margin-top:2px}
.setup-part{position:relative}.setup-part input{flex:none}.setup-part.recommended{box-shadow:inset 0 0 0 1px rgba(122,140,255,.08)}.setup-part small{color:#7f8db2;font-size:9px;margin-left:auto}
@media(max-width:700px){.setup-image-preview{min-height:95px;max-height:160px}.setup-image-preview img{max-height:145px}.setup-part-tools{flex-wrap:wrap}.setup-part-tools input[type=search]{flex-basis:100%}.setup-part-tools .btn{flex:1}.setupCard{padding:15px}.setupParts{max-height:280px}}

/* V170.5 — questionnaire mobile part picker: readable viewport and easy selection. */
.setupParts{
  min-height:220px;
  max-height:min(360px,42vh);
  grid-template-columns:1fr;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.setup-part{
  min-height:42px;
  padding:9px 10px;
  font-size:13px;
  line-height:1.25;
}
.setup-part input{width:18px;height:18px;margin:0;flex:0 0 18px}
.setup-part small{font-size:10px;white-space:nowrap}
@media(max-width:700px){
  .setupParts{min-height:220px;max-height:min(42vh,340px);grid-template-columns:1fr;padding:6px}
  .setup-part{min-height:44px;padding:10px;font-size:13px}
}
@media(max-width:430px){
  .setupParts{min-height:210px;max-height:38vh}
  .setup-part{min-height:46px;font-size:13px}
  .setup-part small{font-size:9px}
}

/* V170.5 2D Sprite Studio */
#twoDStudioPanel{border:1px solid #2d3a50;background:linear-gradient(180deg,rgba(124,140,255,.055),rgba(255,255,255,.012));padding:11px;margin:8px 0;box-shadow:0 10px 28px rgba(0,0,0,.16)}
#twoDStudioPanel .row{min-width:0}#twoDStudioPanel select,#twoDStudioPanel input[type=range]{min-width:0;flex:1;background:#141b27;color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:6px}
@media(max-width:600px){#twoDStudioPanel{padding:9px}}

/* V171.3.0 mobile release hardening: dynamic viewport + comfortable touch targets. */
@supports (height: 100dvh){
  @media (max-width: 900px){
    body,#app{min-height:100dvh;height:100dvh;}
    .main{min-height:0;height:calc(100dvh - 52px - 30px);grid-template-rows:minmax(40dvh,44dvh) minmax(0,56dvh);}
    .controls{height:56dvh;max-height:none;overflow-y:auto;padding-bottom:calc(112px + env(safe-area-inset-bottom));}
    .characterSetup{min-height:100dvh;}
    .overlay{min-height:100dvh;}
  }
}
@media (max-width: 900px){
  .btn,.pose-btn,.dir-btn,.setup-part,.part-item,.studioModes button{min-height:36px;}
  .segModes .btn,.nav .btn{min-height:40px;}
}

.cameraQuick{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.cameraQuick .btn{width:100%;padding:6px 4px}@media(max-width:800px){.cameraQuick .btn{padding:7px 3px;font-size:11px}}

.canvasWrap{touch-action:none!important;overscroll-behavior:none}

/* V171.6 — the overlay canvas must be transparent: it inherited the checkerboard background of
   ".canvasWrap canvas" and fully covered the sprite canvas in 2D mode. */
.canvasWrap #overlayCanvas{background:none!important;border:0!important;box-shadow:none!important}

/* V171.6 — tools per engine: 2D and 3D no longer share tabs / viewer controls */
.studioModes button[hidden]{display:none!important}
body[data-motor="2d"] .toolbar .view,body[data-motor="2d"] .active-part-bar{display:none!important}
.jj-2d-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:6px 0}
.jj-2d-parts{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 10px;margin:6px 0;max-height:220px;overflow:auto;font-size:12px}
.jj-2d-parts label{display:flex;gap:6px;align-items:center;color:var(--muted)}

.jj-2d-slots{display:grid;grid-template-columns:1fr;gap:6px;margin:6px 0}
.jj-2d-slot{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;align-items:center}
.jj-2d-slot.active{border-color:var(--acc)}
.jj-2d-slot canvas{background:repeating-conic-gradient(#1b2331 0 25%,#141a25 0 50%) 0 0/10px 10px;border-radius:6px}
.jj-2d-slot .info{display:flex;flex-direction:column;gap:2px;font-size:12px}.jj-2d-slot small{color:var(--muted);font-size:11px}
.jj-2d-slot .tag{align-self:flex-start;padding:1px 6px;border-radius:99px;background:#243047;color:#9fb4d6;font-size:10px}
.jj-2d-slot .tag.uploaded,.jj-2d-slot .tag.original{background:#1f4d36;color:#8be0b0}.jj-2d-slot .tag.derived{background:#4d3a1f;color:#e0c08b}
.jj-2d-slot .bar{grid-column:1/-1;display:flex;gap:6px}.jj-2d-slot .bar .btn{padding:3px 8px;font-size:12px}
#twoDQuality[data-level="quick"]{color:#e0c08b}#twoDQuality[data-level="full"]{color:#8be0b0}
.jj-2d-parts{grid-template-columns:1fr!important}.partRow{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px;align-items:center}.partRow input[type=range]{width:100%}

.jj-2d-seg{display:flex;gap:4px;margin:6px 0}.jj-2d-seg button{flex:1;padding:5px 6px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--txt);cursor:pointer;font-size:12px}
.jj-2d-seg button.active,.jj-2d-keys .btn.active{border-color:var(--acc);background:#1c2a44}
.jj-2d-kf{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}.jj-2d-kf h4{margin:4px 0;font-size:12px;color:var(--muted)}
.jj-2d-keys{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.jj-2d-keys .btn{padding:3px 8px;font-size:11px}
.partRow.sel{background:rgba(122,140,255,.12);border-radius:6px}.partRow label{display:flex;gap:4px;align-items:center}

/* V171.6.3 · visible, non-blocking 2D generation feedback */
.twoD-generation{margin:9px 0 11px;padding:9px 10px;border:1px solid #34445f;border-radius:8px;background:rgba(22,32,49,.78)}
.twoD-generation[hidden]{display:none}
.twoD-generation-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px;color:#cbd6e8;font-size:11px}
.twoD-generation-head b{font-variant-numeric:tabular-nums;color:#ffe08a}
.twoD-generation progress{display:block;width:100%;height:8px;border:0;border-radius:99px;overflow:hidden;background:#101722;accent-color:#82a8ff}
.twoD-generation progress::-webkit-progress-bar{background:#101722;border-radius:99px}
.twoD-generation progress::-webkit-progress-value{background:linear-gradient(90deg,#6488e8,#8fc8ff);border-radius:99px}
.twoD-generation progress::-moz-progress-bar{background:#7da8f5;border-radius:99px}
.twoD-preview{margin:10px 0 12px;padding:10px;border:1px solid #3a4c69;border-radius:9px;background:linear-gradient(135deg,rgba(28,42,68,.88),rgba(18,27,41,.92))}
.twoD-preview-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;color:#e5edf9;font-size:12px}
.twoD-preview-head span{color:#9fb4d6;font-size:10px;text-align:right;max-width:52%}
.twoD-preview .row{gap:8px;margin:7px 0;align-items:center}
.twoD-preview .row>span{min-width:65px;color:#b8c8df;font-size:11px}
.twoD-preview output{min-width:52px;text-align:right;color:#dce8ff;font-size:11px;font-variant-numeric:tabular-nums}
.twoD-preview .hint{margin:7px 0 0;font-size:10px;line-height:1.4}
#twoDMaskTools #twoDPointTools{display:flex;gap:7px;flex-wrap:wrap}
#twoDMaskTools #twoDPointTools button{flex:1;min-width:110px}
#twoDMaskTools #twoDMaskTool button[data-mt="polygon"]{border-color:#d7b86e}


/* V171.6.6 — native-feeling 2D viewport navigation, matching the 3D stage. */
.canvasWrap.twoD-camera-active #mainCanvas{
  transform:translate(var(--twoD-pan-x,0px),var(--twoD-pan-y,0px)) scale(var(--twoD-zoom,1));
  transform-origin:50% 50%;will-change:transform;touch-action:none;cursor:grab;
}
.canvasWrap.twoD-camera-active #mainCanvas:active{cursor:grabbing}
.canvasWrap.twoD-camera-active #overlayCanvas{
  transform:translate(calc(-50% + var(--twoD-pan-x,0px)),calc(-50% + var(--twoD-pan-y,0px))) scale(var(--twoD-zoom,1));
  transform-origin:50% 50%;will-change:transform;
}
.twoD-viewport-controls{display:flex!important;align-items:center;justify-content:flex-start;gap:7px}
.twoD-viewport-controls .btn{min-width:36px;padding:7px 9px}
.twoD-viewport-controls output{width:54px!important;min-width:54px;text-align:center;font-variant-numeric:tabular-nums;color:#d8e0f0}
.twoD-nav-hint{line-height:1.4;margin:3px 0 8px}

/* V171.6.7 — separate polygon refiners and recoverable empty mask rows. */
.jj-2d-mask-refiners{display:flex;gap:6px;flex-wrap:wrap;margin:7px 0 9px}
.jj-2d-mask-refiners .btn{flex:1 1 92px;min-width:0}
.jj-2d-parts .partRow.empty{opacity:.88;border:1px dashed rgba(217,168,93,.5);border-radius:6px;padding:4px;background:rgba(217,168,93,.035)}
.jj-2d-parts .part-name{min-width:0}.jj-2d-parts .part-empty{display:block;margin:2px 0 0;color:#d9a85d;font-size:10px;line-height:1.25}