:root{color-scheme:dark;--bg:#191d20;--panel:#22272b;--line:#343b40;--text:#ecf0ec;--muted:#9ca8ad;--lime:#c1e99b}*{box-sizing:border-box}body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:#2c3338;border:1px solid #414a50;border-radius:7px;padding:9px 12px;transition:background .15s}button:hover{background:#3b454b}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:15px;font-size:17px;font-weight:600}.mark{font-size:35px;letter-spacing:-4px;font-weight:800;color:var(--lime);padding-right:7px}.mark span{color:#ecb896}.subtitle{display:block;color:var(--muted);font-size:12px;letter-spacing:2.2px}.badge{font-size:12px;letter-spacing:1px;border:1px solid #475144;color:var(--lime);padding:4px 7px;border-radius:4px;margin-left:12px}.header-actions{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.header-actions button{margin-left:12px;color:var(--text)}.local-dot{width:6px;height:6px;border-radius:50%;background:var(--lime)}main{display:grid;grid-template-columns:260px minmax(300px,1fr) 266px;height:calc(100dvh - 76px);min-height:590px}aside{background:var(--panel);overflow:auto;display:flex;flex-direction:column}aside.left{border-right:1px solid var(--line)}aside.right{border-left:1px solid var(--line)}section{padding:23px 22px;border-bottom:1px solid var(--line)}.eyebrow{font-size:12px;letter-spacing:1.7px;color:var(--muted);margin-bottom:15px}h1{font-size:24px;line-height:1.2;letter-spacing:-.8px;font-weight:500;margin:0 0 15px}h2{font-size:14px;font-weight:600;margin:0 0 17px}.muted{color:var(--muted)}p{margin:0 0 17px}.small{font-size:12px}.primary{background:var(--lime);color:#233019;border-color:var(--lime);width:100%;font-weight:600;margin-bottom:8px}.primary:hover{background:#d5f7b7}.wide{width:100%}.formats{color:#859198;font-size:12px;line-height:1.7;margin:11px 0 0}.section-heading{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;letter-spacing:1.5px;margin-bottom:13px}.section-heading span{color:var(--lime);font-size:12px;background:#354332;padding:2px 5px;border-radius:3px}#filename{font-size:14px;overflow-wrap:anywhere;font-weight:500}.stats{display:flex;justify-content:space-between;margin:18px 0 13px}.stats strong{display:block;font-size:20px;letter-spacing:-.5px;font-weight:400}.stats span{font-size:12px;color:var(--muted)}.hierarchy{flex:1;min-height:140px}#tree{display:flex;flex-direction:column;gap:4px}.tree-item{background:none;border:1px solid transparent;font-size:12px;text-align:left;padding:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-item.active{background:#354332;color:#d4efbf;border-color:#52664a}.tree-item::before{content:'◇';margin-right:9px;color:var(--muted)}.text-button{padding:0;background:none;border:0;font-size:12px;color:var(--lime)}.text-button:hover{background:none;color:#e0facb}.sidebar-bottom{padding:20px 22px}.sidebar-bottom p{font-size:12px;color:#7e8b91;margin:12px 0 0;line-height:1.7}.viewport{position:relative;overflow:hidden;background:#dedfdc}#canvasHost{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}.viewport-top{position:absolute;left:22px;right:22px;top:22px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:8px}.viewport-top button{pointer-events:auto}.pill{font-size:12px;padding:7px 11px;color:#3e4a44;background:#ffffffc9;border-radius:30px;display:inline-block;backdrop-filter:blur(10px);margin-right:5px}.pill.subtle{background:#ffffff70}.float-button{font-size:12px;background:#ffffffd4;border-color:#ffffff90;color:#36423c;backdrop-filter:blur(10px)}.float-button:hover{background:white}kbd{font-size:12px;border:1px solid #a9b1ac;border-radius:3px;padding:0 4px;margin-left:6px}.viewport-bottom{position:absolute;left:22px;right:22px;bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:#505e56;pointer-events:none}.viewport-bottom button{pointer-events:auto;white-space:nowrap}.view-controls{position:absolute;right:22px;top:78px;display:flex;flex-direction:column;gap:5px}.view-controls button{padding:8px 10px;font-size:12px;color:#4c5c52;background:#ffffffb0;border-color:transparent;min-width:53px}.view-controls button.active{background:#303d34;color:#ddeddd}.right label{font-size:12px;color:#b5c0c5;display:block;margin:13px 0 7px}select{background:#191f23;border:1px solid #414a50;border-radius:6px;color:#dbe1df;padding:9px;width:100%;font-size:12px}.toggle{display:flex!important;align-items:center;justify-content:space-between;margin:16px 0 0!important;gap:10px}input[type=checkbox]{accent-color:var(--lime);width:15px;height:15px;cursor:pointer}input[type=range]{width:100%;accent-color:var(--lime);margin:0}input[type=color]{width:32px;height:25px;border:0;border-radius:4px;padding:0;background:none;cursor:pointer}.range-label{display:flex;align-items:center;justify-content:space-between}.range-label output{font-size:12px;color:var(--muted)}.hint{border-left:2px solid #46533e;padding-left:10px;margin:18px 0 0;color:#909f96}#textureName{overflow-wrap:anywhere;margin-top:8px}#dropOverlay{display:none;position:absolute;inset:12px;background:#263722e8;color:var(--lime);border:2px dashed var(--lime);border-radius:12px;align-items:center;justify-content:center;font-size:22px;z-index:20;pointer-events:none}.dragging #dropOverlay{display:flex}#notice{display:none;position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background:#263029f2;border:1px solid #536a4f;border-radius:8px;color:#f1f5ee;padding:12px 18px;max-width:85%;font-size:14px;z-index:30;white-space:pre-line}#loading{position:absolute;top:45%;left:50%;transform:translateX(-50%);padding:20px;background:#202a24e8;border-radius:10px;color:var(--lime)}[hidden]{display:none!important}@media(max-width:1100px){main{grid-template-columns:220px minmax(270px,1fr) 230px}section{padding:19px 17px}.viewport-bottom>span{max-width:190px}.pill.subtle{display:none}h1{font-size:21px}}@media(max-width:800px){header{padding:0 15px}.header-actions>span,.badge{display:none}main{grid-template-columns:1fr 220px;height:auto;min-height:0}.left{grid-column:1/-1;display:block;max-height:210px}.left section{display:inline-block;vertical-align:top;width:49%;border-bottom:0}.left section.hierarchy,.sidebar-bottom{display:none}.left h1,.left .muted,.left .eyebrow{display:none}.left .asset-panel{padding-top:20px}.viewport{height:65dvh;min-height:450px}.right{max-height:65dvh}.viewport-bottom>span{display:none}.viewport-top{left:12px;right:12px}.brand{font-size:14px}.header-actions button{font-size:12px}}@media(max-width:520px){main{display:block}.right{display:grid;grid-template-columns:1fr 1fr;max-height:none}.right section{padding:17px}.right section:last-child{grid-column:1/-1}.viewport{height:55dvh}.left .asset-panel .stats strong{font-size:16px}.subtitle{font-size:12px}}

.shared-info{margin-top:10px;color:var(--lime);font-size:12px;line-height:1.7}

/* Gallery and per-asset material editor. */
.workspace{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(260px,1fr) 174px;overflow:hidden}.workspace .viewport{min-height:0}.gallery{background:#1d2326;border-top:1px solid var(--line);padding:12px 16px;min-width:0;overflow:hidden}.gallery-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:9px;font-size:12px;letter-spacing:1.5px;color:var(--muted)}.gallery-heading b{color:var(--lime);margin-left:6px}.gallery-heading .small{font-size:12px;letter-spacing:0}.gallery-track{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;height:128px;scrollbar-color:#53604e #1d2326}.asset-card{position:relative;flex:0 0 132px;border:1px solid #41494a;border-radius:8px;overflow:hidden;background:#29312d}.asset-card.active{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}.asset-card .asset-select{display:block;width:100%;height:100%;border:0;padding:0;border-radius:0;background:transparent;text-align:left}.asset-card img{display:block;width:100%;height:76px;object-fit:cover;background:#dedfdc}.asset-card .asset-name{display:block;padding:7px 9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}.asset-remove{position:absolute;right:4px;top:4px;border:0;border-radius:50%;padding:0;width:20px;height:20px;background:#17221bbb;color:#fff;line-height:20px}.gallery-add{flex:0 0 126px;border:1px dashed #687760;background:transparent;font-size:12px;color:var(--lime);white-space:normal}.gallery-add strong{display:block;font-size:24px;font-weight:300}.gallery-empty{flex:1;min-width:240px}.empty-state{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(85%,440px);padding:32px 22px;border:1px dashed #91a28b;border-radius:15px;background:#edf1e8c4;color:#3c5140;text-align:center;box-shadow:0 16px 60px #2633210b}.empty-state:hover{background:#f2f6ed}.empty-state>span,.empty-state strong,.empty-state small{display:block}.empty-state strong{font-size:23px;font-weight:500;margin:12px 0 8px}.empty-state .empty-icon{font-size:35px;line-height:1}.empty-state small{font-size:12px;color:#667763;margin-top:13px}.material-hint{font-size:12px;line-height:1.6;margin:9px 0 0}.properties h2{overflow-wrap:anywhere;margin-bottom:8px}.properties .text-button{margin-top:13px}button:disabled,select:disabled,input:disabled{opacity:.45;cursor:default}#mixName{margin-top:8px;overflow-wrap:anywhere}.viewport-bottom>span{max-width:230px}#dropOverlay{font-size:19px;text-align:center;padding:25px}main{min-height:640px}.right section{padding:20px}.properties{border-top:2px solid #72865f}.right .properties label{margin-top:12px}
@media(max-width:1100px){.gallery-heading .small{display:none}.workspace{grid-template-rows:minmax(260px,1fr) 168px}.viewport-bottom>span{display:none}}
@media(max-width:800px){.workspace{grid-column:1;grid-row:2;grid-template-rows:minmax(350px,55dvh) 168px}.workspace .viewport{height:auto;min-height:0}.right{grid-column:2;grid-row:2;max-height:calc(55dvh + 168px)}.left{grid-row:1}.empty-state strong{font-size:20px}}
@media(max-width:520px){.workspace{display:grid;grid-template-rows:55dvh 168px}.right{display:block;max-height:none}.right section{padding:18px}.gallery-heading .small{display:none}}
/* V0.8: viewer settings | workspace + editable cards | asset checks. */
main{grid-template-columns:218px minmax(350px,1fr) 298px;min-height:680px}section{padding:18px}.left h1{font-size:22px}.left section{flex:none}.left label,.properties label,.extended-stats label{font-size:12px;display:block;color:#b7c3c2;margin:10px 0 5px}.left .toggle{margin-top:12px!important}.left h2{margin-bottom:12px}.left .eyebrow{margin-bottom:9px}.viewer-intro p{margin:0}.workspace{grid-template-rows:minmax(220px,1fr) 356px}.gallery{padding:10px 12px}.gallery-heading{margin-bottom:8px}.gallery-body{display:flex;gap:12px;height:307px;min-width:0}.gallery-add-fixed{flex:0 0 155px;border:1px dashed #789468;border-radius:10px;background:#28352b;padding:13px 11px;display:flex;flex-direction:column;align-items:stretch;text-align:center;justify-content:center}.gallery-add-fixed .add-icon{font-size:30px;color:var(--lime);line-height:1.2}.gallery-add-fixed strong{font-size:14px;font-weight:500;color:#d1edbd;margin-top:6px}.gallery-add-fixed p{font-size:12px;color:#a5b59f;margin:7px 0 16px}.gallery-add-fixed button{font-size:12px;padding:8px 5px}.gallery-add-fixed .primary{margin-bottom:7px}.gallery-track{height:100%;flex:1;min-width:0;padding-bottom:7px;gap:12px;align-items:stretch}.asset-card{flex:0 0 218px;display:grid;grid-template-columns:1fr;grid-template-rows:38px 1fr;border-color:#495548;background:#242d28}.asset-card.active{flex-basis:630px;grid-template-columns:160px 1fr;grid-template-rows:38px 1fr}.asset-card .asset-heading{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-bottom:1px solid #414f41;gap:10px}.asset-title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-card .asset-remove{position:static;flex:none;width:auto;height:auto;line-height:1.3;border:1px solid #765050;border-radius:4px;padding:4px 7px;color:#f3c1bf;background:#48312f;font-size:12px}.asset-preview{min-height:0;display:flex;flex-direction:column;overflow:hidden}.asset-card .asset-select{height:auto;flex:none;display:block}.asset-card img{height:150px;object-fit:contain}.asset-card.active img{height:106px}.asset-card .asset-name{padding:7px 9px;font-size:12px}.card-edit{font-size:12px;color:var(--lime);border:0;background:transparent;padding:5px 8px}.asset-card .hierarchy{min-height:0;overflow:auto;padding:8px;flex:1}.asset-card .hierarchy .section-heading{margin-bottom:5px;font-size:12px}.asset-card #tree{gap:0}.asset-card .tree-item{font-size:12px;padding:5px}.asset-card .properties{padding:10px 13px;border:0;border-left:1px solid #414e40;overflow:auto;min-width:0;grid-column:2;grid-row:2;margin:0;background:#26302a}.property-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.property-top h2{font-size:12px;margin:0}.property-top #propertyAsset{display:none}.property-top #materialTarget{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;align-items:start}.card-fields .field{min-width:0}.properties label{margin:0 0 4px;font-size:12px}.properties select{font-size:12px;padding:6px;width:100%}.properties button{font-size:12px;padding:6px 8px}.properties .small{font-size:12px;line-height:1.4}.properties .base-color{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.base-color label{flex-basis:100%;margin-bottom:0}.base-color input{height:22px;width:28px}.slot-buttons{display:flex;gap:5px}.slot-buttons button:first-child{flex:1;text-align:left}.texture-slot>div.small{margin:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.properties .card-material-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #414f41;padding-top:5px;margin-top:3px}.properties .toggle{margin:0!important;font-size:12px;gap:7px}.properties .text-button{margin:0;padding:0}.properties .material-hint{grid-column:1/-1;margin:2px 0 0;font-size:12px}.extended-stats{padding-top:0!important}.extended-stats>div{padding:3px 0;overflow-wrap:anywhere}.extended-stats input[type=number]{width:100%;background:#191f23;border:1px solid #414a50;color:#e0e7df;border-radius:5px;padding:7px;font-size:12px}.right section{padding:17px}.right .stats strong{font-size:19px}.validation-key{display:flex;gap:9px;flex-wrap:wrap;font-size:12px;margin:10px 0 14px}.pass{color:#a8df83}.fail{color:#ff9992}.review{color:#e1c58a}#validationSummary{font-size:12px;line-height:1.6;color:#c6d5c2}.validation-row{border-top:1px solid #3a443e;padding:10px 0;font-size:12px}.validation-row summary{cursor:pointer;display:flex;align-items:flex-start;gap:9px;list-style:none}.check-icon{width:19px;height:19px;border-radius:50%;text-align:center;line-height:19px;flex:none;font-size:14px;font-weight:600}.check-icon.pass{background:#385332}.check-icon.fail{background:#633c3a}.check-icon.review{background:#514b36}.validation-title{font-size:12px;padding-top:1px}.validation-detail{color:#a9b8ad;padding:6px 0 0 28px;font-size:12px;white-space:pre-line;overflow-wrap:anywhere}.validation-row button{font-size:12px;padding:5px 8px;margin:7px 4px 0 0}.right .hint{font-size:12px}.validation-panel{flex:1}.viewport-top{top:16px;left:16px;right:16px}.viewport-bottom{bottom:14px;left:16px;right:16px}.gallery-add-fixed.drag-target{border:2px solid var(--lime)}.gallery-track:empty:after{content:'Tu galería está vacía. Añade modelos en el espacio de la izquierda.';color:#839580;font-size:14px;align-self:center;padding:20px;max-width:320px}.empty-state{padding:22px 18px}.empty-state strong{font-size:20px}.empty-state small{margin-top:8px}.empty-state .empty-icon{font-size:25px}
@media(max-width:1100px){main{grid-template-columns:190px minmax(300px,1fr) 260px}.workspace{grid-template-rows:minmax(220px,1fr) 356px}.gallery-add-fixed{flex-basis:125px;padding:10px 8px}.asset-card.active{flex-basis:580px;grid-template-columns:130px 1fr}.right section,.left section{padding:14px}.gallery-heading .small{display:none}}
@media(max-width:800px){main{display:grid;grid-template-columns:170px minmax(300px,1fr);height:auto}.left{grid-column:1;grid-row:1;max-height:none;display:flex}.left section{width:auto;display:block}.left h1,.left .muted,.left .eyebrow{display:block}.workspace{grid-column:2;grid-row:1;grid-template-rows:52dvh 356px}.workspace .viewport{height:auto}.right{grid-column:1/-1;grid-row:2;max-height:none;display:grid;grid-template-columns:1fr 1fr}.validation-panel{grid-column:2;grid-row:1/3}.right .asset-panel{grid-column:1}.right .extended-stats{grid-column:1}.left .sidebar-bottom{display:none}}
@media(max-width:520px){main{display:block}.left{max-height:200px;display:block;overflow:auto}.left section{display:inline-block;vertical-align:top;min-width:180px}.viewer-intro{display:none!important}.workspace{display:grid;grid-template-rows:45dvh 356px}.right{display:block}.gallery-add-fixed{flex-basis:100px}.gallery-add-fixed strong{font-size:12px}.asset-card.active{flex-basis:550px}.header-actions>span{display:none}}

.asset-card.active{flex-basis:clamp(420px,calc(100vw - 720px),630px)}
@media(max-width:1100px){.asset-card.active{flex-basis:clamp(420px,calc(100vw - 620px),580px)}}

/* Surface display controls live over the viewport, independent of asset materials. */
.viewport-top{align-items:flex-start}.surface-toolbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;max-width:calc(100% - 112px);pointer-events:auto;background:#f4f6f0db;border:1px solid #ffffffa6;border-radius:9px;padding:5px;backdrop-filter:blur(10px)}.surface-toolbar button{font-size:12px;padding:7px 10px;border:1px solid transparent;background:transparent;color:#465547;border-radius:5px;white-space:nowrap}.surface-toolbar button:hover{background:#e1e8db}.surface-toolbar button[aria-pressed=true]{background:#344832;color:#e4f4d8;border-color:#435c3c}.surface-toolbar #wireToggle[aria-pressed=true]{background:#d3e9bd;color:#2d4224;border-color:#9cb683}.surface-divider{height:20px;width:1px;background:#bfcbbb;margin:0 3px}.view-controls{top:88px}.viewport-top #fit{flex:none;margin-top:4px}#displayMode[hidden],#wire[hidden]{display:none!important}
@media(max-width:1100px){.surface-toolbar button{padding:6px 7px;font-size:12px}.surface-toolbar{max-width:calc(100% - 98px)}.viewport-top #fit{padding:7px 8px}}
/* V0.9: larger, visual material cards with live texture thumbnails. */
.workspace{grid-template-rows:minmax(220px,1fr) 376px}.gallery-body{height:327px}.asset-card{grid-template-rows:44px 1fr;flex-basis:232px}.asset-card.active{flex-basis:clamp(570px,calc(100vw - 700px),760px);grid-template-columns:176px 1fr;grid-template-rows:44px 1fr}.asset-card .asset-heading{padding:7px 12px}.asset-title{font-size:15px;font-weight:500}.asset-card .asset-remove{font-size:23px;width:30px;height:30px;line-height:24px;padding:0;border:0;background:transparent;color:#c3cfc1;border-radius:6px}.asset-card .asset-remove:hover{background:#623f3a;color:#ffd1cc}.asset-card.active img{height:170px}.asset-card:not(.active) .asset-select{flex:1;height:100%}.asset-card:not(.active) img{height:235px}.asset-card .hierarchy{font-size:14px;padding:10px 12px;flex:1;overflow:auto}.asset-card .hierarchy summary{cursor:pointer;color:#b8c9b1;font-size:14px}.asset-card .hierarchy .text-button{font-size:14px;margin:9px 0}.asset-card .tree-item{font-size:14px;padding:6px 3px}.asset-card .properties{padding:14px 16px;font-size:14px;overflow:auto;background:#26302a}.editor-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px;min-width:0}.editor-heading>select{min-width:0;flex:1;font-size:14px;padding:9px 10px;text-overflow:ellipsis}.material-kinds{display:flex;border:1px solid #53634c;padding:3px;border-radius:7px;flex:none;gap:2px}.properties .material-kinds button{font-size:14px;padding:6px 12px;border:0;background:transparent;white-space:nowrap}.properties .material-kinds button[aria-pressed=true]{background:#c1e99b;color:#26391d;border-radius:4px;font-weight:600}.properties .icon-button{flex:none;font-size:25px;line-height:28px;padding:0;width:32px;height:32px;border:0;background:transparent;color:#bdd1b3}.visual-material{display:flex;align-items:flex-start;gap:22px}.texture-slots{display:flex;gap:14px;flex:none}.graphic-slot{width:142px;min-width:0}.properties .graphic-slot>label{font-size:14px;font-weight:500;margin:0 0 8px;color:#d4dfd0}.tile-wrap{position:relative;width:142px;height:142px}.properties .texture-tile{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;padding:0;border:1px dashed #788f6a;border-radius:9px;background:#303c31;overflow:hidden;cursor:pointer}.properties .texture-tile:hover{background:#3e503b;border-color:#c1e99b}.texture-tile .tile-empty{display:flex;flex-direction:column;align-items:center;color:#b7d4a5;gap:8px}.texture-tile .tile-empty b{font-size:35px;font-weight:300;line-height:1}.texture-tile .tile-empty span{font-size:14px;letter-spacing:1px}.properties .texture-tile.has-texture{border:1px solid #728a64;background:repeating-conic-gradient(#33402f 0 25%,#243021 0 50%) 0 / 16px 16px}.properties .texture-tile.has-texture .tile-empty{display:none}.asset-card .texture-tile img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.properties .texture-remove{position:absolute;right:-8px;top:-8px;z-index:2;width:27px;height:27px;border:1px solid #65775c;border-radius:50%;padding:0;line-height:22px;font-size:22px;background:#253022;color:#e3eddb}.properties .texture-remove:hover{background:#743e39;color:white}.texture-dragging .texture-tile{outline:3px solid var(--lime);outline-offset:3px;background:#465c3b}.material-controls{flex:1;min-width:125px;padding-top:0}.properties .material-controls label{font-size:14px;color:#d4dfd0;margin:0 0 8px}.properties .color-control{margin-bottom:22px}.properties .color-control input[type=color]{display:block;width:64px;height:35px;border:1px solid #6a7d60;border-radius:6px;padding:3px;background:#1f291e}.properties .slider-control output{font-size:14px;color:#c8dabd}.properties .slider-control input{height:24px;cursor:pointer}.properties .range-label{gap:6px}.editor-heading .icon-button:hover{background:#3a4b33;border-radius:5px}.properties .texture-tile:disabled{cursor:default}.gallery-heading{font-size:12px}.graphic-slot label{white-space:nowrap}
@media(max-width:1100px){.workspace{grid-template-rows:minmax(220px,1fr) 376px}.asset-card.active{flex-basis:570px;grid-template-columns:140px 1fr}.asset-card .properties{padding:12px}.visual-material{gap:16px}.texture-slots{gap:10px}.graphic-slot,.tile-wrap{width:118px}.tile-wrap{height:118px}.material-controls{min-width:115px}.editor-heading{gap:6px}.properties .material-kinds button{padding:6px 9px}.asset-card.active img{height:145px}}

/* Half-size texture thumbnails; labels and controls stay readable. */
.graphic-slot,.tile-wrap{width:71px}.tile-wrap{height:71px}.texture-slots{gap:14px}.properties .texture-remove{width:23px;height:23px;font-size:19px;right:-7px;top:-7px}.texture-tile .tile-empty b{font-size:27px}.texture-tile .tile-empty span{font-size:12px}.properties .graphic-slot>label{font-size:14px}.material-controls{max-width:340px}.texture-tile .tile-empty{gap:4px}
@media(max-width:1100px){.graphic-slot,.tile-wrap{width:59px}.tile-wrap{height:59px}}

/* Keep thumbnail canvas at the same on-screen size in active/inactive cards. */
.asset-card .asset-preview .asset-select img{width:176px;max-width:100%;height:170px;margin-inline:auto;object-fit:contain}.asset-card:not(.active) .asset-select{flex:none;height:auto}
@media(max-width:1100px){.asset-card .asset-preview .asset-select img{width:140px;height:145px}}

/* Compact active card: preview, visible parts, single-material editor. */
.workspace{grid-template-rows:minmax(220px,1fr) 330px}.gallery-body{height:281px}
.asset-card.active{flex-basis:850px;grid-template-columns:176px 200px minmax(0,1fr);grid-template-rows:44px minmax(0,1fr)}
.asset-card .hierarchy{grid-column:2;grid-row:2;padding:12px 14px;border-left:1px solid #414e40;margin:0;overflow:auto;background:#242d28}
.parts-heading{font-size:14px;color:#b8c9b1;margin-bottom:12px}
#tree{display:flex;flex-direction:column;gap:6px}.part-row{display:flex;align-items:center;min-width:0;gap:8px;border-radius:5px}.part-row.active{background:#354431}.part-name{font-size:14px!important;background:transparent;border:0;padding:7px 0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:#e0e7df}.part-eye{flex:none;width:25px;height:30px;padding:3px;border:0;background:transparent;color:#c3d2bb}.part-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.part-hidden .part-name{opacity:.5}.part-hidden .part-eye{color:#83947c}.part-eye:hover{color:var(--lime);background:#354431}
.asset-card .properties{grid-column:3;grid-row:2;padding:12px 16px}.editor-heading{display:grid;grid-template-columns:1fr 32px;gap:8px;margin-bottom:12px}.editor-heading>select{grid-column:1/-1;width:100%;font-size:14px}.material-kinds{justify-self:start}.editor-heading .icon-button{justify-self:end}.visual-material{gap:22px}.material-controls{min-width:145px}.properties .color-control{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.properties .color-control label{margin:0}.properties .color-control input[type=color]{width:54px;height:30px}.properties .material-controls label,.properties .graphic-slot>label{font-size:14px}.asset-card .asset-preview{justify-content:flex-start}.asset-card .asset-preview .asset-select img{height:170px}.asset-card:not(.active) img{height:170px}
@media(max-width:1100px){.asset-card.active{flex-basis:790px;grid-template-columns:140px 190px minmax(0,1fr)}.asset-card .properties{padding:12px}.asset-card .asset-preview .asset-select img{height:145px}.visual-material{gap:18px}}

/* Keep material controls anchored when the Mix slot appears. */
.editor-heading>select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c3cfc1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
.texture-slots{display:grid;grid-template-columns:repeat(2,71px);width:156px;flex:0 0 156px;gap:14px;align-items:start}.material-controls{min-width:145px;max-width:none}.properties .slider-control{width:100%}
@media(max-width:1100px){.texture-slots{grid-template-columns:repeat(2,59px);width:132px;flex-basis:132px}}

/* More room for the source hierarchy; keep the material editor compact. */
.asset-card.active{grid-template-columns:176px 280px minmax(0,1fr)}
.visual-material{gap:14px}.part-row{padding-left:calc(var(--part-depth,0)*18px);position:relative}.part-row[aria-level]:not([aria-level="1"])::before{content:'';position:absolute;left:calc(var(--part-depth)*18px - 9px);top:0;height:50%;width:7px;border-left:1px solid #60705a;border-bottom:1px solid #60705a}.part-name{flex:1}.part-eye:disabled{opacity:.4}
@media(max-width:1100px){.asset-card.active{grid-template-columns:140px 270px minmax(0,1fr)}.visual-material{gap:14px}}

/* Camera framing actions belong beside the viewport framing button. */
.viewport-top{flex-wrap:wrap}.surface-toolbar{max-width:none;flex:0 1 auto}.camera-actions{display:flex;align-items:center;gap:6px;margin-left:auto;pointer-events:auto;flex:none}.camera-actions .float-button{white-space:nowrap;margin-top:4px}.viewport-top #fit{margin-top:4px}
@media(max-width:1300px){.view-controls{top:130px}}

/* SUBARA brand and unobtrusive version at the bottom of viewer settings. */
.brand{gap:13px}.brand-logo{display:block;width:36px;height:36px;object-fit:contain;filter:invert(1)}.brand-title{font-size:20px;font-weight:500;letter-spacing:-.3px}.viewer-version{margin-top:auto;padding:14px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;letter-spacing:.5px;flex:none}

/* Preview transforms act on the selected source node, including transform groups. */
.part-rotation{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #ffffffb0;background:#f4f6f0ed;color:#344832;border-radius:9px;box-shadow:0 3px 14px #0002;z-index:3;white-space:nowrap}.part-rotation[hidden]{display:none}.rotation-heading{font-size:12px}.rotation-axis{display:flex;align-items:center;gap:3px}.rotation-axis b{font-size:14px;padding-right:3px}.rotation-axis button{font-size:12px;padding:6px;border:1px solid #c1cbbb;color:#344832;background:#fff8;border-radius:5px}.axis-x b{color:#ab4e43}.axis-y b{color:#477a3c}.axis-z b{color:#476ca2}#resetPartRotation{font-size:23px;padding:0 5px;background:transparent;color:#344832;border:0}#rotationTarget{max-width:135px;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:600}.viewport:has(.part-rotation:not([hidden])) .viewport-bottom>span{visibility:hidden}#measurements{position:absolute;inset:0;pointer-events:none;z-index:2}.dimension{position:absolute;transform:translate(10px,-50%);font-size:14px;font-weight:600;padding:4px 7px;border-radius:5px;background:#ffffffea;box-shadow:0 1px 5px #0002;white-space:nowrap}.dimension-x{color:#9c443b;transform:translate(-50%,10px)}.dimension-y{color:#376e31}.dimension-z{color:#335d96;transform:translate(10px,10px)}#measureToggle{margin-top:7px}#measureToggle[aria-pressed=true]{background:#344832;color:#e4f4d8}.part-name.active{color:var(--lime)}
@media(max-width:1300px){#rotationTarget{display:none}.part-rotation{gap:6px}.rotation-heading{display:none}}

/* Mix is inferred from the presence of a map; editor now needs one heading row. */
.workspace{grid-template-rows:minmax(220px,1fr) 286px}.gallery-body{height:237px}.editor-heading>select{grid-column:1;grid-row:1}.editor-heading>.icon-button{grid-column:2;grid-row:1}.gallery-add-fixed{padding:8px 10px}.gallery-add-fixed p{margin:4px 0 8px}.gallery-add-fixed .add-icon{font-size:25px}.gallery-add-fixed strong{margin-top:3px}
.rotation-axis{display:grid;grid-template-columns:30px 30px;gap:2px 3px}.rotation-axis b{grid-column:1/-1;text-align:center;padding:0;line-height:16px}.rotation-axis button{font-size:23px;line-height:28px;height:30px;padding:0}.part-rotation{gap:14px}.rotation-heading{font-size:12px}

/* Axis-specific rotation orbits, with a distinct reset section. */
.part-rotation{gap:14px;padding:8px 12px}.rotation-axis{grid-template-columns:32px 32px;gap:3px 4px}.rotation-axis button{height:32px;display:flex;align-items:center;justify-content:center}.part-rotation svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.rotation-reset-group{border-left:1px solid #b6c2af;padding-left:12px;margin-left:2px;align-self:stretch;display:flex;align-items:center}.part-rotation #resetPartRotation{height:auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 4px;border-radius:5px}.part-rotation #resetPartRotation span{font-size:12px;line-height:14px}.part-rotation #resetPartRotation:hover{background:#e1e8db}

/* Viewport actions grouped by purpose; axis captions below their controls. */
.viewport-bottom #measureToggle{margin-top:0;pointer-events:auto}.rotation-axis b{grid-row:2;grid-column:1/-1}.rotation-axis button{grid-row:1}.camera-actions #rotate{margin-top:4px}


/* Quick, reversible entrance/exit; hidden panel never intercepts input. */
.part-rotation{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity 140ms ease-out,transform 140ms ease-out,visibility 0s}
.part-rotation[hidden]{display:flex!important;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,6px);transition:opacity 140ms ease-in,transform 140ms ease-in,visibility 0s linear 140ms}
@media(prefers-reduced-motion:reduce){.part-rotation,.part-rotation[hidden]{transition:none;transform:translate(-50%,0)}}

/* Readable asset totals, separate from the selected node's geometry. */
.right .asset-header{padding-bottom:16px}.right .stats-heading{font-size:12px;font-weight:600;letter-spacing:1.2px;color:#cad8c1;margin-bottom:12px}.right .selection-stats{background:#29352b;border-left:3px solid #a8cf89;padding:16px 17px}.right .selection-stats[hidden]{display:none}.selected-part-name{font-size:14px;font-weight:600;overflow-wrap:anywhere;line-height:1.4}.stats-caption{color:#a9bba2;font-size:12px;margin:6px 0 12px}.stat-lines{margin:0;padding:0}.stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-bottom:1px solid #ffffff08;line-height:1.4}.stat-row dt{color:#aebbb5;font-size:14px;font-weight:400;min-width:0}.stat-row dd{margin:0;color:#edf2e9;font-size:14px;font-weight:500;text-align:right;white-space:nowrap}.selection-geometry .stat-row:first-child dd{color:#d0efa9;font-size:19px}.stats-subheading{margin:17px 0 7px;font-size:14px;color:#d3dfce;font-weight:600}.material-name-list{font-size:14px;color:#bcccb4;overflow-wrap:anywhere}.right .asset-overview{padding-top:17px!important}.texture-stat{margin-top:9px;padding:9px 10px;border:1px solid #3d493f;border-radius:6px;background:#1e2622}.texture-stat-title{font-size:14px;font-weight:500;color:#d6e4ce}.texture-stat-material{font-size:12px;color:#91a48b;overflow-wrap:anywhere;margin:2px 0 4px}.texture-stat .stat-row{padding:3px 0;border:0}.right .extended-stats>div{overflow-wrap:normal}#textureStats{padding:0}.right .asset-overview select{width:100%}.validation-panel>.section-heading{font-size:12px;letter-spacing:.8px}

.right[hidden]{display:none}main:has(>.right[hidden]){grid-template-columns:218px minmax(350px,1fr)}
@media(max-width:1100px){main:has(>.right[hidden]){grid-template-columns:190px minmax(300px,1fr)}}

/* V0.16.1: consistent 14px UI, with 12px secondary text. */
.left label,.right label,select,.extended-stats input[type=number],.surface-toolbar button,.float-button,.view-controls button,.validation-title,#validationSummary,.gallery-add-fixed strong,.gallery-add-fixed button{font-size:14px}
.left h2,.parts-heading{font-size:16px}
.stat-row dt,.stat-row dd,.material-name-list,.texture-stat-title{font-size:14px}
.stat-row{padding:6px 0;line-height:1.5}
.validation-row{font-size:14px}.validation-detail,.validation-row button{font-size:12px;line-height:1.6}
.eyebrow,.section-heading,.right .stats-heading,.validation-panel>.section-heading,.gallery-heading{font-size:12px;letter-spacing:1px}
.header-actions,.viewer-version,.viewport-bottom,.gallery-add-fixed p,.empty-state small,.stats-caption,.texture-stat-material{font-size:12px}
.surface-toolbar{max-width:100%}.surface-toolbar button{padding:7px 9px}
.view-controls button{min-width:64px}.view-controls{top:142px}
.gallery-add-fixed p{line-height:1.4}.gallery-add-fixed button{padding:7px 5px}
.asset-title{font-size:15px}.properties .slider-control output{font-size:14px}
.part-rotation #resetPartRotation span{font-size:12px;line-height:16px}

/* Surface modes illustrated with local vector icons. */
.surface-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px}.surface-icon{width:22px;height:22px;flex:none;display:block}.surface-toolbar button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #ffffff24}

/* Compact icon-only buttons retain accessible names and hover labels. */
.surface-toolbar button>span{display:none}.surface-toolbar button{width:40px;height:40px;padding:8px;gap:0}.surface-toolbar{gap:4px}.surface-divider{margin:0 5px}

.camera-actions #rotate[aria-pressed=true]{background:#344832;border-color:#435c3c;color:#e4f4d8}
.camera-actions #rotate[aria-pressed=true]:hover{background:#40573c}

/* Editable global illumination, with one visible group per light. */
.light-control-group{border-top:1px solid var(--line);margin-top:18px;padding-top:15px}.light-control-group h3{font-size:14px;margin:0 0 12px;color:#d3dfce}.left .light-number-field{display:grid;grid-template-columns:minmax(0,1fr) 65px auto;gap:5px;align-items:center;margin:10px 0;font-size:14px;line-height:1.35}.light-number-field input{width:65px;min-width:0;background:#191f23;border:1px solid #414a50;border-radius:5px;color:var(--text);padding:6px;font-size:14px}.light-number-field small{font-size:12px}.left .light-color-field{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0;font-size:14px}.light-color-field input[type=color]{width:42px;height:28px}.light-control-group .toggle{font-size:14px!important}.lighting-save-actions{display:grid;gap:8px;margin-top:20px}.lighting-save-actions button{font-size:14px;padding:8px}.lighting-save-actions button:first-child{background:#344832;border-color:#526b46;color:#e4f4d8}

/* Viewport visualization menu opens upward from the bottom-left corner. */
.visualization-menu{position:absolute;left:16px;bottom:14px;z-index:5;width:218px;color:var(--text);font-size:14px}.visualization-menu>.visualization-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;background:#22272bf5;border:1px solid #414a50;border-radius:9px;padding:10px 13px;font-weight:600;box-shadow:0 3px 12px #0002}.visualization-menu>.visualization-trigger::-webkit-details-marker{display:none}.visualization-menu>.visualization-trigger svg{width:20px;height:20px;fill:none;stroke:#aebbb5;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.visualization-menu[open]>.visualization-trigger{border-top:1px solid #414a50;border-radius:0 0 9px 9px}.visualization-menu[open]>.visualization-trigger svg{transform:rotate(180deg)}.visualization-options{position:absolute;left:0;right:0;bottom:100%;padding:13px;background:#22272bf5;border:1px solid #414a50;border-bottom:0;border-radius:9px 9px 0 0;box-shadow:0 -4px 12px #0001}.visualization-options .toggle{margin:0 0 13px!important;font-size:14px;color:#c3ceca}.visualization-options .range-label{border-top:1px solid #414a50;padding-top:10px;gap:10px}.visualization-options label{font-size:14px}.visualization-options input[type=color]{width:36px;height:27px}.visualization-options .range-label label{margin:0}.visualization-menu:focus-within>summary{border-color:#8da379}.viewport-bottom>span{display:none}

/* Keep camera view buttons vertically centered within the viewport. */
.view-controls{top:50%;transform:translateY(-50%)}

/* Informational toasts appear above the model, below the top toolbar. */
#notice{top:88px;bottom:auto}
@media(max-width:1300px){#notice{top:140px}}

/* Keep visualization options rendered so closing can fade as well as opening. */
.visualization-menu>.visualization-trigger{width:100%;color:inherit;font-size:14px;text-align:left}
.visualization-options{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity 140ms ease-in,transform 140ms ease-in,visibility 0s linear 140ms}
.visualization-menu[open] .visualization-options{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity 140ms ease-out,transform 140ms ease-out,visibility 0s}
.visualization-menu>.visualization-trigger svg{transition:transform 140ms ease}
@media(prefers-reduced-motion:reduce){.visualization-options,.visualization-menu[open] .visualization-options,.visualization-menu>.visualization-trigger svg{transition:none;transform:none}}

#lightingSettings>summary{cursor:pointer;font-size:14px;font-weight:600;}#lightingSettings[open]>summary{margin-bottom:17px;}

/* Asset information on the left; only checks scroll on the right. */
main{grid-template-columns:280px minmax(350px,1fr) 298px}
main:has(>.right[hidden]){grid-template-columns:280px minmax(350px,1fr)}
.left #assetInfo{flex:none}.left .asset-header{padding-bottom:16px}.left #filename{overflow-wrap:anywhere}
.left .stats-heading{font-size:12px;font-weight:600;letter-spacing:1px;color:#cad8c1;margin-bottom:12px}
.left .selection-stats{background:#29352b;border-left:3px solid #a8cf89;padding:16px 17px}
.left .asset-overview{padding-top:17px!important}.left .asset-overview select{width:100%}
aside.right{overflow:hidden;min-height:0;display:flex;flex-direction:column}
.right .validation-panel{flex:1 1 0;min-height:0;overflow-y:auto;border-bottom:0}
.submission-footer{flex:none;padding:16px 17px;border-top:1px solid var(--line);background:var(--panel)}
.submission-footer .primary{margin:0}.submission-footer button:disabled{cursor:default;background:#303731;color:#7c8878;border-color:#434b40;opacity:.65}
@media(max-width:1100px){main{grid-template-columns:250px minmax(300px,1fr) 260px}main:has(>.right[hidden]){grid-template-columns:250px minmax(300px,1fr)}}
@media(max-width:800px){main{grid-template-columns:230px minmax(300px,1fr)}main:has(>.right[hidden]){grid-template-columns:230px minmax(300px,1fr)}.right .validation-panel{grid-column:auto;grid-row:auto}aside.right{max-height:65dvh;min-height:320px}}
@media(max-width:520px){main,main:has(>.right[hidden]){display:block}.left #assetInfo section{display:block;min-width:0}.left{max-height:280px}.right{height:65dvh}}

/* Empty gallery: dim the entire viewport and keep the drop prompt prominent. */
.viewport::after{content:'';position:absolute;inset:0;background:rgba(12,18,16,.76);z-index:6;pointer-events:none;opacity:0;transition:opacity 140ms ease}
.viewport:has(#emptyState:not([hidden]))::after{opacity:1}
#emptyState{z-index:7;background:#222d27;color:#edf4e8;border:1px dashed #b7da9e;box-shadow:0 12px 48px #0005}
#emptyState:hover{background:#2d3d31;border-color:#d2f4b8}
#emptyState .empty-icon{color:var(--lime)}#emptyState small{color:#aebdab}#emptyState>span:not(.empty-icon){color:#c7d7bf}
#loading{z-index:25}

.asset-card .asset-preview .asset-select,.asset-card .asset-preview .asset-select img{background:var(--preview-background,#292929)}
