/* The preview and controls share a workspace; only the options list scrolls. */
.yoi-studio{grid-template-columns:minmax(270px,.8fr) minmax(0,1.3fr);align-items:start}
.yoi-stage{position:sticky;top:104px}
.yoi-studio-panel{display:flex;flex-direction:column;max-height:calc(100dvh - 120px);min-height:430px;overflow:hidden}
.yoi-tabs{flex:none;overflow-x:auto;scrollbar-width:none}
.yoi-tabs::-webkit-scrollbar{display:none}
#yoi-editor-content{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:4px 6px 20px;scrollbar-width:thin;scrollbar-color:#82718f transparent}
.yoi-item-preview{min-height:148px}.yoi-item-preview .yoi-avi{width:126px;height:139px}
.yoi-item-info strong{font-size:14px}.yoi-item-info small{font-size:12px}.yoi-item-info button{font-size:13px;min-height:40px;padding:8px 13px;border-radius:12px}.yoi-item-info .yoi-pill{font-size:10px;line-height:1.4}
.yoi-avi-card strong{font-size:13px}.yoi-avi-card small{font-size:11px}.yoi-tabs button{font-size:14px;min-height:44px}.yoi-stage-tools button{min-height:36px;font-size:12px}
.yoi-collection .yoi-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:761px) and (max-width:1050px){.yoi-studio{grid-template-columns:250px minmax(0,1fr)}.yoi-stage{display:block;top:100px}.yoi-stage-art{min-height:235px}.yoi-stage-art .yoi-avi{width:210px;height:231px}.yoi-item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 body.xp-studio-page{overflow:hidden}
 body.xp-studio-page .main{height:calc(100dvh - 144px - env(safe-area-inset-bottom));min-height:0;padding:0 12px 0;display:flex;flex-direction:column;overflow:hidden}
 body.xp-studio-page #ya-sync-note{display:none}
 body.xp-studio-page #app{flex:1;min-height:0;display:flex;flex-direction:column}
 body.xp-studio-page .yoi-hero{flex:none;margin:9px 0 10px;align-items:center;gap:8px;min-height:35px}
 body.xp-studio-page .yoi-hero .yoi-kicker,body.xp-studio-page .yoi-hero p{display:none}
 body.xp-studio-page .yoi-hero h1{font-size:21px;letter-spacing:-.5px;line-height:1.3}
 body.xp-studio-page .yoi-hero>.secondary{font-size:11px;padding:7px 10px;min-height:34px}
 body.xp-studio-page .yoi-collection{display:none}
 .yoi-studio{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:hidden;margin:0}
 .yoi-stage{position:relative;top:auto;flex:none;display:grid;grid-template-columns:154px minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:4px 10px;padding:10px 12px 8px;border-radius:19px;min-height:194px;max-height:226px;align-items:center;text-align:left}
 .yoi-stage-art{grid-column:1;grid-row:1/5;width:154px;min-height:0;height:169px;margin:0;display:flex;align-items:center;justify-content:center}
 .yoi-stage-art .yoi-avi{width:150px;height:165px;max-width:100%}
 .yoi-stage-top{grid-column:2;grid-row:1;display:flex;gap:5px;flex-wrap:wrap;align-items:center;justify-content:flex-start;font-size:11px}
 .yoi-stage-top .yoi-pill{display:none}
 .yoi-stage h2{grid-column:2;grid-row:2;font-size:21px;line-height:1.1;margin:0;align-self:auto}
 .yoi-family-line,.yoi-stage-mood{display:none}
 .yoi-stage-tools{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;gap:4px;margin:0}
 .yoi-stage-tools button{min-height:31px;font-size:10px;padding:6px 8px}
 .yoi-stage-actions{grid-column:2;grid-row:4;display:flex;align-items:center;gap:5px;width:100%;margin:0;align-self:auto}
 .yoi-stage-actions .primary{width:auto;flex:1;min-height:42px;font-size:12px;padding:8px 9px;white-space:normal;gap:5px}
 .yoi-stage-actions .secondary{min-width:34px;min-height:40px;padding:8px}
 .yoi-stage-actions svg{width:15px;height:15px}
 .yoi-stage-status{grid-column:1/-1;grid-row:5;margin:0;font-size:11px;line-height:1.4;max-height:31px;overflow:auto}
 .yoi-studio-panel{flex:1;min-height:0;max-height:none;display:flex;flex-direction:column;overflow:hidden;padding:8px 8px 0;border-radius:17px}
 .yoi-tabs{margin:0;padding:0 0 8px;gap:4px;min-height:47px;white-space:nowrap}
 .yoi-tabs button{font-size:13px;padding:9px 11px;flex:none}
 #yoi-editor-content{padding:10px 3px 24px;overflow-y:auto;touch-action:pan-y}
 .yoi-item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .yoi-item-preview{min-height:136px;padding:4px}.yoi-item-preview .yoi-avi{width:118px;height:130px}
 .yoi-item-info{padding:0 10px 12px}.yoi-item-info strong{font-size:14px;line-height:1.4}.yoi-item-info small{font-size:12px}.yoi-item-info button{font-size:13px;padding:8px 13px;min-height:40px}
 .yoi-help,.yoi-feedback{font-size:14px;line-height:1.7}.yoi-section-title h3{font-size:18px}.yoi-section-title small{font-size:11px}.yoi-compat{font-size:12px;line-height:1.6}
 .yoi-catalog{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.yoi-avi-card .yoi-avi{width:85px;height:94px}.yoi-avi-card{padding:7px 3px}.yoi-avi-card strong{font-size:12px}
 .yoi-color-title label,.yoi-mood-settings label{font-size:14px}.yoi-mood-settings select{font-size:13px}.yoi-mood{font-size:12px}
 .xp-starter-workspace{display:block;overflow:visible}
 .xp-starter-preview{position:sticky;top:0;z-index:15;min-height:165px;display:grid;grid-template-columns:140px 1fr;gap:4px 12px;padding:12px 18px;border:1px solid var(--line);border-radius:18px;margin-bottom:14px}
 .xp-starter-preview>span{display:none}.xp-starter-preview #xp-live-avi{grid-column:1;grid-row:1/3}.xp-starter-preview #xp-live-avi .yoi-avi{width:132px;height:145px}.xp-starter-preview h2{grid-column:2;align-self:end;font-size:24px;margin:0}.xp-starter-preview p{grid-column:2;align-self:start;font-size:14px;margin:0}
 .xp-starter-panel{padding:15px}
}
@media(max-width:760px) and (max-height:700px){.yoi-stage{grid-template-columns:126px 1fr;min-height:163px;padding:7px 10px;max-height:182px}.yoi-stage-art{height:137px;width:126px}.yoi-stage-art .yoi-avi{width:122px;height:134px}.yoi-stage h2{font-size:18px}.yoi-stage-tools button{font-size:9px;padding:5px}.yoi-stage-actions .primary{font-size:11px;min-height:36px}.yoi-stage-top{font-size:10px}.yoi-stage-status{font-size:10px;max-height:15px}}

.yoi-style-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;gap:7px;white-space:nowrap}

.yoi-clay-invite{background:#eee5f6;border:1px solid #c5b2d8;border-radius:15px;padding:15px;margin:15px 0;display:flex;align-items:center;gap:14px}.yoi-clay-invite p{font-size:13px;line-height:1.6;margin:5px 0 0}.yoi-clay-invite button{flex:none;white-space:nowrap;font-size:13px}.yoi-clay-detail{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 15px}html[data-theme=dark] .yoi-clay-invite{background:#332c43;border-color:#705583;color:#f0e7f8}@media(max-width:760px){.yoi-clay-invite{display:block;padding:13px}.yoi-clay-invite button{margin-top:10px;min-height:42px}}

.yoi-outfit.is-current{border:2px solid #b99ad2}.yoi-outfit-art{padding:0!important;border:0!important;background:transparent!important;width:100%;display:grid;place-items:center}.yoi-outfit-art:disabled{opacity:1}.yoi-outfit .yoi-pill{margin:3px 0;font-size:12px}

.yoi-outfit{display:flex;flex-direction:column;align-items:stretch;gap:6px}.yoi-outfit>strong{text-align:center;font-size:14px;line-height:1.4}.yoi-outfit>button:not(.yoi-outfit-art){min-height:40px;width:100%;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--white);color:var(--ink)}.yoi-outfit>button[data-y-action="load-outfit"]{background:#77568f;color:#fff;border-color:#9f7cba}.yoi-outfit>button[data-y-action="load-outfit"]:disabled{background:#362c44;color:#e5d3f3;opacity:1}.yoi-outfit>button.yoi-danger{background:transparent;color:#b35b69}.yoi-outfit>.yoi-pill{text-align:center;align-self:center;padding:5px 12px}