.studio-ui{--panel:#193747;--edge:#477286;--accent:#f0c56f;--muted:#adccd9;background:#102531}
.studio-ui header,.studio-ui main,.studio-ui footer{max-width:1600px}
.studio-ui header{padding:16px 24px}.studio-ui header h1{font-size:26px}.studio-ui header p{font-size:13px;color:var(--muted);margin:5px 0}
.studio-ui main{grid-template-columns:minmax(340px,430px) minmax(0,1fr);align-items:start;padding-top:0;gap:18px}
.studio-ui .preview,.studio-ui .browser{padding:14px;border:1px solid #466b7d;border-radius:14px}
.studio-ui .preview{position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto;scrollbar-width:thin}
.studio-stage-title{font-size:12px;letter-spacing:2px;color:#f0c56f;font-weight:700}.studio-stage>label{display:flex;align-items:center;justify-content:space-between;margin:8px 0}.studio-stage select{width:180px}
.studio-ui #canvas{display:block;width:100%;height:auto;max-height:48vh;object-fit:contain;background:radial-gradient(ellipse at center,#376178,#102936);border:1px solid #51758a}
.studio-ui #message{font-size:12px;color:#c7e4ef;min-height:18px;margin:6px 0;overflow-wrap:anywhere}.studio-ui #equipped{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}.studio-ui #equipped button{display:flex;align-items:center;justify-content:center;margin:0;padding:1px;min-height:48px;background:#0d2633;border:1px solid #658394;color:#f0c56f;position:relative}.studio-ui #equipped canvas{width:48px;height:48px;background:none}.studio-stage h2{font-size:13px;margin:10px 0 4px}
.studio-ui details{border-top:1px solid #426579;padding:10px 0}.studio-ui summary{cursor:pointer;font-weight:600;font-size:14px;padding:3px 0;color:#e1edf4}.studio-ui details>section{padding-top:8px}.studio-ui details label{font-size:13px}.studio-ui details p{font-size:12px;color:var(--muted)}.studio-ui details select{max-width:100%}.studio-ui details input:not([type=range]):not([type=checkbox]){max-width:100%}
.studio-ui .studio-toolbar h2{font-size:20px;margin:0 0 10px}.studio-modes{display:flex;gap:6px;flex-wrap:wrap}.studio-modes button{flex:1;margin:0;background:#102d3c;color:#d2e8f0;border-color:#577e91;font-size:14px}.studio-ui button[aria-pressed=true]{background:#ebc372;color:#1b3543;border-color:#ffe2a1;box-shadow:0 0 0 1px #ffe2a1}
.studio-jump{display:flex;gap:8px;margin-top:10px}.studio-jump a{display:inline-block;padding:7px 12px;border:1px solid #527487;border-radius:8px;text-decoration:none;font-size:13px}#studio-preview,#studio-wardrobe{scroll-margin-top:12px}
.studio-toolbar>label{display:block}.studio-toolbar #query{width:100%;background:#f5fafc;color:#183747}.studio-toolbar details>div{display:flex;flex-wrap:wrap;gap:10px}.studio-toolbar details label{margin:4px 0}.studio-toolbar details select{font-size:12px}
.studio-catalog{display:grid;grid-template-columns:145px minmax(0,1fr);gap:12px}.studio-categories{display:flex;flex-direction:column;gap:5px;padding-top:40px}.studio-categories button{margin:0;text-align:left;background:#143140;color:#d3e8f1;border-color:#3f6172;font-size:12px;padding:10px 8px;min-height:40px}
.studio-catalog-grid{min-width:0}.studio-ui #count{font-size:12px;color:var(--muted);margin:10px 0}.studio-ui #items{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;max-height:64vh;overflow:auto;padding:3px;align-content:start;scrollbar-width:thin}.studio-ui #items article{margin:0;padding:3px;position:relative;background:#12303e;border:1px solid #3e6174;border-radius:9px;min-width:0}
.studio-ui #items article>button:first-child{width:100%;margin:0;padding:4px;min-height:104px;background:transparent;color:#e6f0f5;border:0;border-radius:6px}.studio-ui #items button canvas{width:64px;height:64px;max-width:100%;margin:auto;background:linear-gradient(145deg,#40657b,#203e50);border:1px solid #7694a5;border-radius:8px;image-rendering:pixelated}.studio-ui #items button span{font-size:10px;line-height:1.4;max-height:28px;overflow:hidden;margin-top:5px}.studio-ui #items .chosen{outline:2px solid var(--accent);background:#6c5b2b33}
.studio-ui #items article>button:not(:first-child){min-height:26px;margin:2px 0 0;padding:3px;font-size:10px;background:#244858;color:#deedf5;border-color:#527487}.studio-ui #items article>button:last-child{float:right}.studio-ui #items article>input{position:absolute;top:4px;left:4px;z-index:1}.studio-ui #more{width:100%;margin:12px 0}
.studio-ui #layer-controls fieldset{display:flex;flex-wrap:wrap;border:1px solid #466b7d;border-radius:8px}.studio-ui #layer-controls label{margin:2px 6px;font-size:11px}.studio-ui #layer-controls legend{font-size:12px}.studio-ui #set-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:300px;overflow:auto}.studio-ui #set-list button{font-size:12px;min-height:44px}
.studio-ui.light-theme{--panel:#fff;--edge:#a5bac8;--muted:#426170;background:#e8f1f7}.studio-ui.light-theme summary,.studio-ui.light-theme #message{color:#24495b}.studio-ui.light-theme #items article{background:#edf4f7}.studio-ui.light-theme #items article>button:first-child{color:#153947}.studio-ui.light-theme .studio-categories button,.studio-ui.light-theme .studio-modes button{background:#e6f0f5;color:#24495b}.studio-ui.light-theme button[aria-pressed=true]{background:#ebc372;color:#183747}
@media(max-width:1000px){.studio-ui main{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}.studio-catalog{grid-template-columns:100px minmax(0,1fr)}}
@media(max-width:750px){.studio-ui main{grid-template-columns:minmax(0,1fr)}.studio-ui .preview{position:static;max-height:none;overflow:visible}.studio-ui #canvas{max-height:52vh}.studio-catalog{display:block}.studio-categories{flex-direction:row;overflow:auto;padding:4px 0 10px;gap:5px}.studio-categories button{flex:0 0 auto;max-width:145px;white-space:nowrap;min-height:44px}.studio-ui #items{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));max-height:64vh}.studio-ui #items article>button:not(:first-child){min-height:36px}.studio-ui header{padding:12px}.studio-ui .studio-modes button{min-height:44px}.studio-ui #set-list{grid-template-columns:1fr}}