#screen-studio .studio-grid{align-items:start}
#screen-studio .editor-card,#screen-studio .preview-card{height:auto!important;min-height:0!important}
#screen-studio .preview-stage{display:block!important;position:relative;flex:none!important;min-height:0!important;overflow:visible}
.qol3d-active #previewStage>:not(#avatar3dPanel){display:none!important}
#avatar3dPanel{position:relative!important;inset:auto!important;width:100%;height:auto!important;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:8px 0 12px}
#avatar3dPanel[hidden]{display:none!important}
#avatar3dCanvas{display:block;width:100%;height:clamp(320px,47vh,500px);max-height:500px;background:var(--surface,#192B38);border-radius:14px;touch-action:none}
#avatar3dStatus{margin:0;color:var(--muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.avatar-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.avatar-tools button,.avatar-tools select,.avatar-mode select{font:inherit;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;min-height:38px;padding:8px 12px}
.avatar-tools button:disabled{opacity:.45;cursor:default}.avatar-tools label{display:flex;gap:8px;align-items:center;font-size:12px}
.qol3d-active .sign-dictionary-status{display:none}
#screen-studio .preview-footer{position:relative;margin-top:12px!important;flex:none}
#screen-studio .composer-actions{flex-wrap:wrap}
@media(max-width:700px){#avatar3dCanvas{height:360px;max-height:55vh}.avatar-tools{gap:var(--q-space-2,8px)}.avatar-tools button{flex:1}.avatar-mode>label{display:grid;width:100%}.avatar-mode select{width:100%}.avatar-mode button{width:100%;justify-self:stretch}}

/* Studio layout */
.qol3d-active #signDictionaryPanel,.qol3d-active #draftStatus,.qol3d-active .composer-settings,.qol3d-active .studio-bottom-note,.qol3d-active .preview-footer{display:none!important}
#screen-studio .studio-grid{align-items:stretch;gap:24px}
#screen-studio .editor-card,#screen-studio .preview-card{display:flex;flex-direction:column;padding:var(--q-space-6,24px);border-radius:var(--q-radius-card,24px)}
#screen-studio #textInput{flex:1;min-height:300px;resize:none}
#screen-studio .editor-meta{justify-content:flex-end;margin:16px 0 24px}
#screen-studio .composer-actions{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
#screen-studio .preview-stage{flex:1!important}
#avatar3dPanel{padding:0;gap:16px}
.avatar-tools{padding-top:16px;border-top:1px solid var(--line)}
.avatar-tools label{margin-left:auto}
#screen-studio .preview-header{margin-bottom:var(--q-space-6,24px)}
@media(max-width:700px){#screen-studio .editor-card,#screen-studio .preview-card{padding:var(--q-space-4,16px);border-radius:var(--q-radius-card,24px)}#screen-studio #textInput{min-height:220px}.avatar-tools label{margin-left:0}}

.word-hints{display:flex;flex-wrap:wrap;gap:var(--q-space-2,8px);margin:0 0 20px;max-height:140px;overflow:auto}.word-hints:empty{display:none}.word-hint{font-size:12px;line-height:1.5;padding:5px 9px;border:1px solid var(--line);border-radius:8px;color:var(--muted)}.word-hint.available{color:#91d4b1;border-color:#41745c}.word-hint.missing{color:#e0b192}

.ai-word-tools{display:flex;gap:8px;align-items:center;margin:0 0 16px;font-size:12px;color:var(--muted)}.ai-word-tools button,.ai-word-tools input{font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:7px 10px}.ai-word-tools input{min-width:0;max-width:180px}.ai-word-tools input[hidden]{display:none}

.motion-words-button{font:inherit;font-size:12px;padding:7px 10px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px}.motion-words-dialog{width:min(520px,calc(100vw - 32px));max-height:80vh;box-sizing:border-box;border:1px solid var(--line,#b9c2c8);border-radius:18px;padding:20px;background:var(--surface,#fff);color:var(--ink,#25323c)}.motion-words-dialog::backdrop{background:#07121c99}.motion-words-dialog form{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.motion-words-dialog form button{background:none;color:inherit;font-size:24px;cursor:pointer}.motion-words-dialog input{box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:inherit;font:inherit}.motion-words-list{display:grid;gap:var(--q-space-2,8px);max-height:52vh;overflow:auto;margin-top:12px}.motion-words-list button{display:flex;justify-content:space-between;gap:16px;text-align:left;padding:10px;border:1px solid var(--line);border-radius:9px;background:transparent;color:inherit;font:inherit;cursor:pointer}.motion-words-list small{font-size:11px;color:var(--muted,#6b7a85)}.motion-words-list button:disabled{opacity:.5;cursor:default}

.avatar-background-dialog{box-sizing:border-box;width:min(460px,calc(100vw - 32px));padding:22px;border:1px solid var(--line,#aab8ba);border-radius:20px;background:var(--surface,#fff);color:var(--ink,#22323a)}.avatar-background-dialog::backdrop{background:#07121c99}.avatar-background-dialog form{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.avatar-background-dialog form button{font-size:24px;color:inherit;background:none}.avatar-background-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.background-choice{position:relative;padding:8px;border:1px solid var(--line,#bbc8c8);border-radius:13px;background:transparent;color:inherit;font:inherit;text-align:left}.background-choice[aria-pressed=true]{border-color:var(--accent,#b88c60);box-shadow:0 0 0 1px var(--accent,#b88c60)}.background-swatch{display:block;height:72px;margin-bottom:8px;border-radius:8px}.background-choice small{float:right;font-size:11px;opacity:.7}.avatar-background-dialog p{font-size:13px;line-height:1.5;margin:16px 0 0;color:var(--muted,#627783)}.avatar-background-dialog p:empty{display:none}

.custom-background{margin-top:18px;padding-top:16px;border-top:1px solid var(--line,#bbc8c8)}.custom-background h3{font-size:14px;margin:0 0 12px}.custom-background button{width:100%;padding:11px 14px;background:var(--surface,#edf2f1);color:inherit;border:1px solid var(--line,#bbc8c8);border-radius:10px;font:inherit}.custom-color,.background-image-options label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px}.custom-color input{width:54px;height:34px;border:0;padding:0;background:none}.background-image-options input{width:52%}.background-image-options[hidden]{display:none}
.phrase-timeline{display:grid;gap:8px;border-top:1px solid var(--q-border,var(--line));padding-top:8px}.phrase-timeline[hidden]{display:none}.phrase-time{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--q-muted,var(--muted))}.phrase-timeline input[type=range]{width:100%;min-width:0;margin:0;accent-color:var(--q-primary,#c69f7a);height:24px;cursor:pointer}.phrase-word-marks{display:flex;gap:6px;flex-wrap:wrap;max-height:64px;overflow:auto}.phrase-word-marks button{font:inherit;font-size:12px;line-height:1.4;border:1px solid var(--q-border,var(--line));border-radius:8px;padding:6px 9px;min-height:32px;color:var(--q-muted,var(--muted));background:transparent;cursor:pointer}.phrase-word-marks button[aria-current=true]{color:var(--q-ink,var(--ink));border-color:var(--q-primary);background:var(--q-soft)}.phrase-transition-warnings{display:grid;gap:4px;max-height:72px;overflow:auto}.phrase-transition-warnings:empty{display:none}.phrase-transition-warnings button{font:inherit;font-size:12px;line-height:1.5;text-align:left;color:var(--q-warning);padding:3px 0;border:0;background:none;cursor:pointer}html body #screen-studio #avatar3dPanel:has(.phrase-timeline:not([hidden])) #avatar3dCanvas{height:clamp(220px,calc(100dvh - 540px),280px)}
