/* Integration layer over the frontend copied from ../3d-viewer/public/style.css. */
#viewport{position:fixed;inset:0;overflow:hidden;background:var(--bg)}
#viewport canvas{width:100%;height:100%;display:block}
.preview-hud{position:fixed;top:20px;left:20px;display:flex;gap:6px;z-index:5;pointer-events:none}
.preview-hud .badge{font-size:10px;background:var(--glass-strong);color:var(--text-2)}
#render-status{display:none}
.island-search>span{flex:1;text-align:left;font-size:14px;color:var(--text-2)}
.island-lead>svg{width:22px;height:22px;color:var(--blue);transition:opacity .2s}
.island[data-state=loading] .island-lead>svg{opacity:0}
#loading{display:none!important}
.dropzone{margin-top:16px;color:var(--text-3);padding:16px 24px;border:1px dashed var(--hairline);border-radius:18px;pointer-events:auto;cursor:pointer;transition:background .2s,transform .3s var(--bounce)}
.dropzone:hover,.dropzone.dragover{background:var(--fill);color:var(--text);transform:scale(1.02)}
.model-icon{width:46px;height:46px;border-radius:12px;background:rgba(10,132,255,.12);display:grid;place-items:center;flex:none;color:var(--blue)}
.model-icon svg{width:28px;height:28px}
.model-icon{overflow:hidden}.model-icon img{width:100%;height:100%;object-fit:contain;border-radius:10px}.model-icon.has-image{background:transparent}.model-icon.has-image svg{display:none}#filename{display:none}
.card-title{margin:0;overflow-wrap:anywhere}
.card-sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:245px}
.model-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:16px;padding:12px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.model-metrics>div{text-align:center;display:flex;flex-direction:column;gap:3px}
.model-metrics strong{font-size:18px;font-weight:600}.model-metrics span{font-size:10px;color:var(--text-2)}
.card-live{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:var(--text-3)}
#notice{font-size:11px;color:var(--orange);border-top:1px solid var(--hairline);padding-top:10px;margin-top:12px;line-height:1.6;max-height:140px;overflow:auto}
#notice.error{color:#ff8a80}
#play,#restart{font-size:19px;font-weight:500}
.sheet{max-height:calc(100vh - 40px);overflow:auto}.sheet select{border:0;background:var(--fill);color:var(--text);border-radius:8px;padding:6px 8px;font:inherit;font-size:13px}.sheet option{background:#2c2c2e}
.sheet input[type=color]{width:40px;height:25px;padding:2px;border:1px solid var(--hairline);border-radius:6px;background:var(--fill)}
.sheet input[type=range]{max-width:140px;accent-color:var(--blue)}
.workspace{width:min(880px,100%)}.workspace-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.workspace-columns>div{min-width:0}.inspector-column{border-left:1px solid var(--hairline);padding-left:20px}
.tree,#asset-list{max-height:55vh;overflow:auto;margin-top:14px}.tree-row{display:flex;align-items:center;gap:7px;width:100%;padding:8px;border-radius:7px;text-align:left;font-size:12px;white-space:nowrap}.tree-row .name{overflow:hidden;text-overflow:ellipsis}.tree-row:hover{background:var(--fill)}.tree-row.selected{background:rgba(10,132,255,.18);color:#64b0ff}.tree-row .collapse{width:10px;color:var(--text-3)}.tree-row .icon{color:var(--text-2)}.tree-row.emitter .icon{color:#64b0ff}
.property{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--hairline);font-size:11px}.property span{overflow-wrap:anywhere}.property span:first-child{color:var(--text-3)}.property-details{max-height:55vh;overflow:auto;margin-top:12px}.inspector-name{font-size:17px;color:var(--text);margin:8px 0 4px}.inspector-class{color:#64b0ff;font-size:12px}#inspector>button{font-size:12px;color:var(--blue);padding:8px;margin-top:12px}
.asset-card{padding:12px;margin:8px 0;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--hairline);font-size:11px;overflow-wrap:anywhere}.asset-card strong{font-family:monospace}.asset-status{color:var(--green);margin:5px 0}.asset-status.failed{color:var(--orange)}.asset-card p{color:var(--text-2);font-size:11px}.asset-card button{color:var(--blue);font-size:11px;padding:5px 0}.resource-actions{display:flex;gap:15px;align-items:center;margin:15px 0}.resource-actions .pill-btn{padding:9px 12px;font-size:12px}
#animation-clips button{width:100%}#animation-status{max-width:200px;padding:8px;font-size:11px}#disconnect{align-self:flex-start;padding-top:5px}
dialog{border:1px solid var(--hairline);color:var(--text);font:inherit}dialog::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(8px)}
button:focus-visible,a:focus-visible,label[role=button]:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button:disabled{opacity:.4;cursor:wait}
#canvas.model-enter{animation:model-enter .45s var(--spring)}@keyframes model-enter{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@media(max-width:800px){.preview-hud{top:76px;left:12px}.card{max-width:310px}.controls{gap:0}.ctl{width:34px;height:38px}.workspace-columns{grid-template-columns:1fr}.inspector-column{border-left:0;border-top:1px solid var(--hairline);padding:15px 0 0}.tree,#asset-list,.property-details{max-height:35vh}}
@media(max-width:640px){.card{max-width:none;max-height:210px}.card .model-metrics{margin-top:9px;padding:8px 0}.card .tryon-btn{margin-top:8px;padding:8px}.card .badges{margin-top:8px}#notice{max-height:65px}.empty p{font-size:14px}.dropzone{font-size:12px;padding:13px}.preview-hud{top:70px}.card-head .model-icon{width:38px;height:38px}.card-title{font-size:15px}.card-sub{font-size:10px}.model-metrics strong{font-size:14px}.controls{right:50%;width:max-content}.ctl{width:33px}.workspace .sheet-head{position:sticky;top:-18px;background:#242426;padding-top:12px;z-index:2}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

#animMenu{width:260px;max-height:min(580px,75vh);overflow:auto}.pet-motion-modes{display:grid;grid-template-columns:1fr 1fr;gap:3px}.pet-motion-modes button{text-align:center}.pet-moving-row{display:flex;justify-content:space-between;align-items:center;padding:10px 8px;font-size:12px}#pet-motion-status{display:block;padding:0 8px 12px;font-size:11px;color:var(--text-3)}

.tree-class-icon{flex:0 0 16px;width:16px;height:16px;object-fit:contain;pointer-events:none}.tree-row{min-height:30px}.tree{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
/* Pet identity and available variants share the same glass island. */
.island.has-variants[data-state]{width:min(430px,calc(100vw - 28px));height:102px;border-radius:25px}
.island.has-variants .island-activity{bottom:auto;height:55px;padding:0 14px}
.island.has-pet-image .island-lead>svg{display:none}
.island-lead #islandPetImage{position:absolute;inset:-4px;width:44px;height:44px;border-radius:0;background:transparent;object-fit:contain}
.island-lead #islandPetImage[hidden]{display:none}
#pet-variants{position:absolute;bottom:8px;left:10px;right:10px;display:flex;gap:3px;padding:4px;border-radius:15px;background:linear-gradient(to bottom,rgba(255,255,255,.045),rgba(255,255,255,.02));border-top:1px solid rgba(255,255,255,.035)}
#pet-variants[hidden]{display:none}#pet-variants button{flex:1;min-width:0;padding:8px 5px;border-radius:10px;font-size:11px;font-weight:500;color:var(--text-2);cursor:pointer;transition:background .2s,color .2s}#pet-variants button:hover{background:rgba(255,255,255,.07);color:var(--text)}#pet-variants button.active{background:rgba(255,255,255,.13);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.1)}#pet-variants button:focus-visible{outline:2px solid var(--blue)}#pet-variants button:disabled{opacity:.5;cursor:wait}
.island[data-state=loading] #islandPetImage{opacity:.35}
@media(max-width:700px){body:has(.island.has-variants) .preview-hud,body:has(.island.has-variants) #openLibrary{top:130px}}