*{box-sizing:border-box}

html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ds-studio-bg-base);color:var(--ds-studio-text-base);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select{font:inherit;color:inherit}button{cursor:pointer}button,input,select{outline:none}
button{border:0;background:none}
.studio{height:100vh;display:grid;grid-template-rows:52px 1fr;background:var(--ds-studio-bg-base)}
.topbar{position:relative;z-index:20;display:flex;align-items:center;height:52px;padding:0 14px;border-bottom:1px solid var(--ds-studio-divider-soft);background:#141516}
.brand{display:flex;align-items:center;gap:7px;min-width:210px}.logo{width:38px;height:26px;background:var(--ds-studio-accent-soft);-webkit-mask:url("/static/preview/candidate/assets/brand/daailok_logo_mask.png") center/contain no-repeat;mask:url("/static/preview/candidate/assets/brand/daailok_logo_mask.png") center/contain no-repeat}.brand strong{font-size:13px;letter-spacing:.12em;font-weight:700;color:#e8c982}.brand em{font-style:normal;font-size:10px;letter-spacing:.12em;color:#777b79}
.history{display:flex;gap:2px}.history button{width:32px;height:32px;border-radius:7px;color:#8d918e}.history button:hover{background:#1d1f20;color:#ddd}.history svg,.rail-item svg,.timeline-actions svg,.layer-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.top-status{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;color:#8b8f8c;font-size:11px}.top-status span{width:6px;height:6px;border-radius:50%;background:var(--ds-studio-status-green)}
.top-actions{margin-left:auto;display:flex;gap:7px;align-items:center}.top-quiet,.top-primary{height:32px;padding:0 13px;border:1px solid #343638;border-radius:16px;background:#191a1b;font-size:11px;font-weight:550}.top-quiet:hover{border-color:#4b4e50;background:#1d1e20}.top-primary{background:#efece4;color:#171819;border-color:#efece4;font-weight:680}.top-primary:hover{background:#fff}.close{width:32px;height:32px;color:#979a97;font-size:22px}

.body-grid{min-height:0;display:grid;grid-template-columns:64px minmax(0,1fr) 340px}
.rail{min-height:0;display:flex;flex-direction:column;align-items:center;padding:12px 8px 10px;border-right:1px solid var(--ds-studio-divider-soft);background:#121314}
.rail-item{position:relative;width:44px;height:44px;margin:3px 0;border-radius:50%;display:grid;place-items:center;color:#727674;transition:background .12s,color .12s,transform .12s}
.rail-item:hover{background:#1e2021;color:#d2d4d1}.rail-item:active{transform:scale(.96)}.rail-item.active{background:#eeece6;color:#1d1e1f}.rail-item.active:after{content:"";position:absolute;left:-10px;width:2px;height:18px;border-radius:2px;background:var(--ds-studio-accent)}
.rail-spacer{flex:1}

.main-workspace{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 188px;background:#08090a}
.viewport{position:relative;min-height:0;overflow:hidden;background:#050607;border-bottom:1px solid var(--ds-studio-divider-soft)}
.viewport-top-left,.viewport-top-right{position:absolute;z-index:8;top:14px;display:flex;gap:6px}.viewport-top-left{left:50%;transform:translateX(-50%)}.viewport-top-right{right:16px}
.chip,.soft-control,.small-chip{height:34px;padding:0 16px;border:1px solid #3a3c3e;border-radius:17px;background:#1d1e20;color:#868a87;font-size:12px;font-weight:560}.chip.active{background:#ece9e2;color:#1b1c1d;border-color:#ece9e2}.soft-control{background:#1b1c1e;color:#a4a7a4}.small-chip{height:28px;padding:0 11px;font-size:11px;background:#17191a}
.orientation{position:absolute;z-index:8;left:18px;top:18px;width:86px;height:84px}.axis{position:absolute;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:750;color:#111;box-shadow:0 2px 10px #0006}.axis.x{left:48px;top:28px;background:#bf5560}.axis.y{left:24px;top:0;background:#7ea640}.axis.z{left:22px;top:29px;background:#407bb6}.orientation i,.orientation b{position:absolute;display:block;background:#5a5e5c}.orientation i{width:44px;height:1px;left:21px;top:42px}.orientation b{width:1px;height:44px;left:35px;top:14px}
.viewport-scene{position:absolute;inset:0;background:radial-gradient(circle at 50% 43%,#0c0d0e 0,#070809 55%,#040505 100%)}
.grid{position:absolute;pointer-events:none}.floor-grid{left:-10%;right:-10%;bottom:-12%;height:69%;transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;background-image:linear-gradient(rgba(166,138,84,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(166,138,84,.16) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to top,#000 30%,transparent 96%);opacity:.55}.horizon-grid{left:-5%;right:-5%;top:45%;height:1px;background:#3c3529;box-shadow:0 36px 0 #1f1f1f,0 72px 0 #161718}
.figure-wrap{position:absolute;left:50%;top:49%;width:130px;height:300px;transform:translate(-50%,-46%)}.figure-name{position:absolute;top:-7px;width:100%;text-align:center;font-size:16px;font-weight:600;color:#e9e6de;text-shadow:0 2px 12px #000}.figure{position:absolute;left:25px;top:30px;width:80px;height:220px;filter:drop-shadow(0 16px 28px rgba(0,0,0,.45))}.select-box{position:absolute;left:15px;top:28px;width:100px;height:230px;border:1px solid rgba(200,156,77,.9);box-shadow:0 0 0 1px rgba(200,156,77,.12),inset 0 0 30px rgba(200,156,77,.04)}.select-box:before,.select-box:after{content:"";position:absolute;border:1px solid rgba(200,156,77,.75)}.select-box:before{left:10px;right:-11px;top:-10px;height:100%;border-bottom:0}.select-box:after{top:10px;bottom:-11px;left:-10px;width:100%;border-right:0}
.view-controls{position:absolute;left:16px;bottom:14px;z-index:8;display:flex;gap:6px}.small-chip.active{border-color:#5a4828;color:#d9b46e;background:#211b13}
.floating-palette{position:absolute;z-index:20;left:76px;top:78px;width:280px;max-height:calc(100% - 110px);overflow:auto;border:1px solid #303235;border-radius:12px;background:rgba(22,23,24,.98);box-shadow:0 24px 70px #000b}.palette-head{height:56px;padding:0 16px;border-bottom:1px solid #292b2d;display:flex;align-items:center;justify-content:space-between}.palette-head small{display:block;font-size:9px;letter-spacing:.14em;color:#6d706d}.palette-head b{display:block;margin-top:2px;font-size:15px}.palette-head button{width:30px;height:30px;color:#898c89;font-size:18px}.palette-body{padding:12px}.palette-card{padding:11px 12px;margin-bottom:8px;border:1px solid #2d2f31;border-radius:8px;background:#191a1b}.palette-card b{font-size:12px}.palette-card small{display:block;margin-top:3px;color:#727572;font-size:10px}.palette-card:hover{border-color:#594625;background:#1e1a14}

.timeline{min-height:0;background:#151617}.timeline-toolbar{height:44px;border-bottom:1px solid var(--ds-studio-divider-soft);display:flex;align-items:center;justify-content:space-between;padding:0 13px}.play-controls,.timeline-actions{display:flex;align-items:center;gap:6px}.icon-btn,.timeline-actions button{width:30px;height:30px;border-radius:6px;color:#929592}.icon-btn:hover,.timeline-actions button:hover{background:#1e2021}.play-controls b{margin-left:8px;font-size:11px;font-weight:560}.play-controls select{height:28px;border:1px solid #2e3032;border-radius:6px;background:#1b1c1e;font-size:11px;padding:0 8px}.timeline-actions svg{width:16px}
.timeline-grid{height:calc(100% - 44px);display:grid;grid-template-columns:250px 1fr}.track-meta{border-right:1px solid var(--ds-studio-divider-soft);display:grid;place-items:center}.track-empty{text-align:center;color:#5f6361}.track-empty svg{width:74px;height:47px;fill:none;stroke:#525658;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.track-empty span{display:block;margin:2px 0 9px;font-size:11px}.track-empty button{height:32px;padding:0 18px;border-radius:16px;background:#242628;color:#b7bab7;font-size:11px}.time-ruler{position:relative;overflow:hidden}.ticks{position:absolute;inset:0;background-image:linear-gradient(90deg,#343638 1px,transparent 1px);background-size:32px 12px;background-position:0 0;opacity:.55}.time-ruler>span{position:absolute;top:8px;color:#777b78;font-size:10px}.playhead{position:absolute;top:0;bottom:0;left:9%;width:1px;background:var(--ds-studio-accent)}.playhead:before{content:"";position:absolute;top:0;left:-4px;width:9px;height:8px;background:var(--ds-studio-accent);clip-path:polygon(0 0,100% 0,50% 100%)}

.right-panel{min-height:0;display:grid;grid-template-rows:260px minmax(0,1fr);border-left:1px solid var(--ds-studio-divider-soft);background:#171819}
.layers-panel{min-height:0;border-bottom:1px solid var(--ds-studio-divider);padding:0 12px}.right-head{height:58px;display:flex;align-items:center;justify-content:space-between}.right-head small{display:block;font-size:9px;letter-spacing:.12em;color:#6d706d}.right-head h2{margin:1px 0 0;font-size:16px;font-weight:650}.head-actions{display:flex;gap:4px}.head-actions button{width:30px;height:30px;border-radius:7px;background:#202224;color:#9ca09d}.layer-meta{height:36px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #222426;color:#777a78;font-size:10px}.layer-meta em{font-style:normal;color:#5d605e}.layer-row{height:40px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;padding:0 8px;border-radius:7px;color:#aeb1ae}.layer-row.active{background:#2a2115;color:#e0bb72}.layer-icon{display:grid;place-items:center}.layer-icon svg{width:15px;height:15px}.layer-row b{font-size:12px;font-weight:560}.layer-row>div{display:flex}.layer-row>div button{width:25px;height:28px;color:#747875;font-size:11px}.layer-row>div button:hover{color:#ddd}

.properties-panel{min-height:0;overflow:auto;padding:0 14px 16px}.handle{width:42px;height:4px;margin:9px auto 4px;border-radius:3px;background:#595c59}.prop-head{height:48px;display:flex;align-items:center;justify-content:space-between}.prop-head h2{font-size:16px;font-weight:650}.prop-head button{width:30px;height:30px;color:#8b8f8c;font-size:18px}
.prop-list{display:grid;gap:10px}.prop-row{min-height:38px;display:grid;grid-template-columns:92px 1fr;align-items:center;gap:8px}.prop-row>span,.prop-slider>span{font-size:11px;color:#8d918e}.prop-row input,.prop-row select{width:100%;height:34px;border:1px solid #2c2e30;border-radius:8px;background:#202123;padding:0 12px;color:#e1dfd7;font-size:12px}.prop-row.disabled{opacity:.45}.color-row{align-items:center}.swatches{display:flex;align-items:center;gap:8px}.swatch{width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}.swatch.active{outline:2px solid #d6b167;outline-offset:2px}.prop-slider{min-height:38px;display:grid;grid-template-columns:92px minmax(0,1fr) 54px;align-items:center;gap:8px}.prop-slider input{width:100%;accent-color:var(--ds-studio-accent)}.prop-slider output{height:32px;display:grid;place-items:center;border-radius:8px;background:#202123;color:#ddd;font-size:12px}.subsection{padding-top:8px;border-top:1px solid #232527}.sub-title{margin-bottom:7px;color:#777b78;font-size:11px}.check-row{height:28px;display:flex;align-items:center;gap:9px;color:#858986;font-size:11px}.check-row input{accent-color:var(--ds-studio-accent)}

.toast{position:fixed;z-index:100;left:50%;bottom:18px;transform:translate(-50%,15px);opacity:0;padding:8px 13px;border:1px solid #4c3b21;border-radius:18px;background:#171819;color:#c7c4bb;box-shadow:0 16px 50px #000b;font-size:11px;transition:.16s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2b2d2f;border-radius:8px}
@media(max-width:1280px){.body-grid{grid-template-columns:58px minmax(0,1fr) 310px}.right-panel{grid-template-rows:230px minmax(0,1fr)}.timeline-grid{grid-template-columns:200px 1fr}.prop-row{grid-template-columns:78px 1fr}.prop-slider{grid-template-columns:78px minmax(0,1fr) 48px}.top-quiet{display:none}}


/* Preview V3 · DAAILOK collapsible tool drawer */
.body-grid{
  grid-template-columns:64px 0 minmax(0,1fr) 340px;
  transition:grid-template-columns .18s cubic-bezier(.2,.8,.2,1);
}
.body-grid.drawer-open{grid-template-columns:64px 286px minmax(0,1fr) 340px}

.left-drawer{
  min-width:0;min-height:0;overflow:hidden;
  border-right:1px solid transparent;background:#121314;
  opacity:0;transform:translateX(-8px);
  transition:opacity .14s ease,transform .18s ease,border-color .18s ease;
  pointer-events:none;
}
.body-grid.drawer-open .left-drawer{
  opacity:1;transform:none;border-right-color:var(--ds-studio-divider-soft);pointer-events:auto;
}
.drawer-inner{width:286px;height:100%;padding:15px 13px 18px;overflow:auto}
.drawer-head{height:52px;display:flex;align-items:flex-start;justify-content:space-between}
.drawer-head small{display:block;font-size:9px;letter-spacing:.14em;color:#665943}
.drawer-head h2{margin:3px 0 0;font-size:17px;line-height:1;font-weight:650;letter-spacing:.01em}
.drawer-head button{width:30px;height:30px;border-radius:7px;color:#7f8380;font-size:18px}
.drawer-head button:hover{background:#1d1f20;color:#d7d8d4}
.drawer-search{
  height:36px;margin:2px 0 14px;display:grid;grid-template-columns:20px 1fr;align-items:center;
  padding:0 10px;border:1px solid #2b2d2f;border-radius:8px;background:#18191a
}
.drawer-search svg{width:14px;height:14px;fill:none;stroke:#777b78;stroke-width:1.7}
.drawer-search input{min-width:0;border:0;background:transparent;color:#d7d7d2;font-size:11px}
.drawer-search input::placeholder{color:#5f625f}
.drawer-content{display:grid;gap:8px}
.drawer-section{padding-top:8px}
.drawer-kicker{height:25px;display:flex;align-items:center;justify-content:space-between;color:#6f726f;font-size:10px}
.drawer-kicker b{font-weight:560;letter-spacing:.02em}
.drawer-kicker button{height:24px;padding:0 7px;border-radius:5px;color:#8c8f8b;font-size:10px}
.drawer-kicker button:hover{background:#1d1f20;color:#d0d1cd}
.drawer-item{
  width:100%;min-height:44px;padding:8px 9px;border:1px solid transparent;border-radius:8px;
  display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;
  text-align:left;color:#aaa;background:transparent
}
.drawer-item:hover{background:#181a1b;border-color:#292b2d}
.drawer-item.active{background:#221c13;border-color:#4e3d21;color:#e1bc73}
.drawer-icon{
  width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  background:#1f2021;color:#929692;font-size:13px
}
.drawer-item.active .drawer-icon{background:#342916;color:#e3bb70}
.drawer-item b{display:block;font-size:11px;font-weight:580;color:inherit}
.drawer-item small{display:block;margin-top:2px;font-size:9px;color:#666a67}
.drawer-item em{font-style:normal;font-size:10px;color:#666a67}
.drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.drawer-card{
  min-height:64px;padding:10px;border:1px solid #2a2c2e;border-radius:8px;background:#171819;
  text-align:left
}
.drawer-card:hover{border-color:#4f3f24;background:#1e1a14}
.drawer-card strong{display:block;font-size:11px;font-weight:600}
.drawer-card span{display:block;margin-top:4px;font-size:9px;color:#696d69}
.drawer-note{
  padding:10px 11px;border:1px solid #282a2c;border-radius:8px;background:#151617;
  color:#777b78;font-size:10px;line-height:1.55
}
.drawer-pill-row{display:flex;flex-wrap:wrap;gap:6px}
.drawer-pill{
  height:28px;padding:0 10px;border:1px solid #2d2f31;border-radius:14px;background:#18191a;color:#959995;font-size:10px
}
.drawer-pill.active,.drawer-pill:hover{border-color:#5b4727;background:#211b13;color:#ddb66c}

@media(max-width:1280px){
  .body-grid{grid-template-columns:58px 0 minmax(0,1fr) 310px}
  .body-grid.drawer-open{grid-template-columns:58px 252px minmax(0,1fr) 310px}
  .drawer-inner{width:252px}
}


/* Preview V4 · contextual AI / layers / properties + viewport interaction */
.right-panel{
  grid-template-rows:230px 205px minmax(0,1fr);
}
.ai-panel{
  min-height:0;padding:12px 12px 10px;border-bottom:1px solid var(--ds-studio-divider);
  background:linear-gradient(180deg,#171819 0,#151617 100%);
}
.ai-head,.section-head{height:42px;display:flex;align-items:center;justify-content:space-between}
.ai-head small,.section-head small,.prop-head small{display:block;font-size:9px;letter-spacing:.13em;color:#6f6250}
.ai-head h2,.section-head h2{margin:1px 0 0;font-size:16px;line-height:1.05;font-weight:650}
.ai-mode{
  height:27px;padding:0 10px;border:1px solid #4b3b22;border-radius:14px;
  background:#211b13;color:#d2a95f;font-size:10px
}
.ai-input-wrap{position:relative}
.ai-input-wrap textarea{
  width:100%;height:79px;resize:none;padding:10px 42px 10px 11px;
  border:1px solid #3e3424;border-radius:9px;background:#101112;
  color:#d5d4ce;font-size:11px;line-height:1.55
}
.ai-input-wrap textarea::placeholder{color:#626561}
.ai-input-wrap textarea:focus{border-color:#745a2e;box-shadow:0 0 0 2px rgba(200,156,77,.08)}
.ai-input-wrap button{
  position:absolute;right:7px;bottom:7px;width:29px;height:29px;border-radius:7px;
  background:#c89c4d;color:#15120d;font-size:16px;font-weight:750
}
.ai-chips{display:flex;gap:5px;margin-top:7px;overflow:hidden}
.ai-chips button{
  flex:0 0 auto;height:25px;padding:0 9px;border:1px solid #292b2d;border-radius:13px;
  background:#1a1b1c;color:#838783;font-size:9px
}
.ai-chips button:hover{border-color:#4d3d22;color:#d6af66;background:#211b13}
.ai-feedback{margin-top:6px;color:#646865;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.layers-panel{padding:0 12px;overflow:hidden}
.section-head{height:48px}
.layer-list{display:grid;gap:4px}
.layer-row{
  width:100%;height:39px;grid-template-columns:24px 1fr auto;
  border:1px solid transparent;background:transparent;text-align:left
}
.layer-row:hover{background:#1b1c1d;border-color:#292b2d}
.layer-row.active{background:#2a2115;border-color:#4b3b21}
.layer-row>div{display:flex;align-items:center;gap:5px}
.layer-state{font-size:9px;color:#676b67;font-weight:500}
.layer-row.active .layer-state{color:#9b7842}
.layer-icon{font-size:12px}

.properties-panel{padding-top:0}
.prop-head{height:50px}
.prop-head>div h2{margin:2px 0 0;font-size:16px;line-height:1;font-weight:650}
.selection-summary{
  display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px;
  margin-bottom:10px;padding:8px;border:1px solid #292b2d;border-radius:9px;background:#191a1b
}
.selection-symbol{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(145deg,#3b3020,#1b1c1d);color:#d5ad61;font-weight:750
}
.selection-summary small,.selection-summary b,.selection-summary em{display:block}
.selection-summary small{font-size:8px;color:#626663}
.selection-summary b{margin-top:2px;font-size:11px}
.selection-summary em{margin-top:2px;font-size:8px;font-style:normal;color:#686c68}
.selection-status{height:22px;padding:0 8px;border-radius:11px;display:grid;place-items:center;background:#211b13;color:#c99e4f;font-size:8px}
.quick-actions{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:5px}
.quick-actions button{
  min-height:31px;padding:0 7px;border:1px solid #2c2e30;border-radius:7px;background:#1a1b1c;
  color:#8e928e;font-size:9px
}
.quick-actions button:first-child{border-color:#4e3f24;background:#211b13;color:#d5ae64}
.quick-actions button:hover{border-color:#544425;color:#d3ae66}
.rig-note{
  margin-top:3px;padding:10px 11px;border:1px solid #30291f;border-radius:8px;
  background:linear-gradient(180deg,#1b1813,#171819)
}
.rig-note b{display:block;color:#d1aa60;font-size:10px}
.rig-note span{display:block;margin-top:4px;color:#737773;font-size:9px;line-height:1.5}

.viewport{cursor:default;outline:none}
#previewCanvas.orbit-dragging{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M6 18c2.5-5 7-7.8 12-7.8S27.5 13 30 18' stroke='%23f4f4f2'/%3E%3Cpath d='M18 6c-4.7 2.7-7.3 7-7.3 12s2.6 9.3 7.3 12' stroke='%23f4f4f2'/%3E%3Cpath d='M30 18c-2.5 5-7 7.8-12 7.8S8.5 23 6 18' stroke='%23f4d36a'/%3E%3Cpath d='M18 30c4.7-2.7 7.3-7 7.3-12S22.7 8.7 18 6' stroke='%23f4d36a'/%3E%3Cpath d='M4.8 18h7.4M23.8 18h7.4M18 4.8v7.4M18 23.8v7.4' stroke='%23f4d36a'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='2.2' fill='%23f4d36a' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E") 18 18, crosshair;
}
.viewport:focus{box-shadow:inset 0 0 0 1px rgba(200,156,77,.13)}
.viewport.pan-mode{cursor:grab}
.viewport.pan-mode.dragging{cursor:grabbing}
.viewport.rotate-mode{cursor:move}
.viewport-scene{
  transform:perspective(1100px) translate(var(--view-x,0px),var(--view-y,0px)) scale(var(--view-scale,1)) rotateX(var(--view-pitch,0deg)) rotateY(var(--view-yaw,0deg));
  transform-origin:center center;
  transition:transform .04s linear;
}
.figure-wrap{transition:filter .12s ease}
.figure-wrap.selected{filter:drop-shadow(0 0 13px rgba(200,156,77,.18))}
.figure-wrap.hidden-object{opacity:.12}

.context-menu{
  position:fixed;z-index:200;width:158px;padding:6px;
  border:1px solid #303235;border-radius:9px;background:#18191a;
  box-shadow:0 18px 55px #000b
}
.context-menu button{
  width:100%;height:30px;padding:0 9px;border-radius:6px;text-align:left;
  color:#b2b5b1;font-size:10px
}
.context-menu button:hover{background:#232526;color:#eee}
.context-menu button.danger{color:#d88e8e}
.context-menu>span{display:block;height:1px;margin:4px 3px;background:#2a2c2e}

.interaction-hint{
  position:absolute;left:50%;bottom:13px;transform:translateX(-50%);z-index:9;
  padding:6px 10px;border:1px solid #282a2c;border-radius:15px;
  background:rgba(18,19,20,.82);color:#686c68;font-size:9px;pointer-events:none
}

@media(max-width:1280px){
  .right-panel{grid-template-rows:215px 185px minmax(0,1fr)}
  .ai-input-wrap textarea{height:69px}
}

.rig-overlay{position:absolute;left:25px;top:30px;width:80px;height:220px;z-index:8;pointer-events:none}
.joint-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border:1px solid #f0c778;border-radius:50%;background:#1c1710;box-shadow:0 0 0 3px rgba(200,156,77,.14);pointer-events:auto}
.joint-dot:hover,.joint-dot.active{background:#e1b864;box-shadow:0 0 0 4px rgba(200,156,77,.18)}
.rig-badge{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);z-index:9;height:22px;padding:0 8px;border:1px solid #5a4728;border-radius:11px;background:#211b13;color:#d8b36c;font-size:8px;display:flex;align-items:center;gap:5px;white-space:nowrap}


/* Preview V5 · views, render modes, shot timeline, export */
.main-workspace{grid-template-rows:minmax(0,1fr) 258px}
.viewport-top-right.display-modes{
  right:14px;top:14px;display:flex;gap:3px;padding:3px;border:1px solid #333638;
  border-radius:9px;background:rgba(22,23,24,.88);backdrop-filter:blur(10px)
}
.mode-btn{
  height:29px;padding:0 10px;border-radius:6px;color:#787c79;font-size:10px;font-weight:560;
  background:transparent
}
.mode-btn:hover{background:#202224;color:#d0d2cf}
.mode-btn.active{background:#ece9e2;color:#1b1c1d}
.view-controls{
  left:14px;bottom:14px;padding:3px;border:1px solid #303235;border-radius:9px;
  background:rgba(20,21,22,.86);backdrop-filter:blur(9px);gap:2px
}
.view-controls .small-chip{
  height:29px;padding:0 9px;border:0;border-radius:6px;background:transparent;color:#7e827f;font-size:9px
}
.view-controls .small-chip:hover{background:#202224;color:#d0d2cf}
.view-controls .small-chip.active{background:#211b13;color:#d9b46e}
.demo-object{
  position:absolute;left:62%;top:58%;width:145px;height:24px;border:1px solid #726044;border-radius:5px;
  background:linear-gradient(180deg,#5f5140,#2b2925);box-shadow:0 13px 28px #0007;z-index:4;cursor:pointer
}
.demo-object:before,.demo-object:after{content:"";position:absolute;top:22px;width:11px;height:60px;background:#393631}
.demo-object:before{left:13px}.demo-object:after{right:13px}
.demo-object .object-label{position:absolute;left:50%;top:-22px;transform:translateX(-50%);font-size:10px;color:#b9b5aa;white-space:nowrap}
.demo-object.selected{outline:1px solid #d2a656;outline-offset:4px;box-shadow:0 0 0 1px rgba(200,156,77,.25),0 13px 28px #0007}
.viewport.mode-clay .figure,.viewport.mode-clay .demo-object{filter:grayscale(1) brightness(1.42);opacity:.95}
.viewport.mode-transparent .figure,.viewport.mode-transparent .demo-object{opacity:.24}
.viewport.mode-halfgray .viewport-scene{filter:grayscale(.8) contrast(.92)}
.viewport.mode-objectid .figure{filter:hue-rotate(155deg) saturate(1.8) brightness(1.15)}
.viewport.mode-objectid .demo-object{background:#8b4eaf;border-color:#b378d3}
.viewport.mode-mask .viewport-scene{background:#050505}.viewport.mode-mask .figure{filter:brightness(4) grayscale(1)}.viewport.mode-mask .demo-object{background:#fff;border-color:#fff}
.viewport.mode-depth .viewport-scene{filter:grayscale(1) contrast(1.4)}
.viewport.mode-normal .viewport-scene{filter:hue-rotate(115deg) saturate(1.65)}

.shot-timeline{display:grid;grid-template-rows:42px 104px minmax(0,1fr)}
.timeline-toolbar{height:42px}
.timeline-title{display:flex;align-items:center;gap:8px}.timeline-title b{font-size:11px}.timeline-title span{font-size:9px;color:#656966}
.timeline-actions button{
  width:auto;height:28px;padding:0 10px;border:1px solid #2b2d2f;border-radius:6px;
  background:#191a1b;color:#888c88;font-size:9px
}
.timeline-actions .place-shot{border-color:#594624;background:#211b13;color:#d7ae62}
.shot-strip{display:flex;gap:7px;padding:7px 9px;overflow-x:auto;border-bottom:1px solid #222426}
.shot-card,.shot-add{
  flex:0 0 142px;height:88px;padding:5px;border:1px solid #2a2c2e;border-radius:8px;background:#171819;text-align:left
}
.shot-card.active{border-color:#785c2d;background:#1c1812}
.shot-thumb{display:block;height:51px;border-radius:5px;background:
  linear-gradient(160deg,rgba(214,185,126,.13),rgba(0,0,0,.3)),
  linear-gradient(145deg,#2b2c2c,#0f1011)}
.shot-b{background:linear-gradient(160deg,#4e4536,#151515)}.shot-c{background:linear-gradient(160deg,#222,#38342d)}
.shot-info{display:block;padding:5px 2px 0}.shot-info b,.shot-info small{display:block}.shot-info b{font-size:9px}.shot-info small{margin-top:1px;color:#656966;font-size:8px}
.shot-add{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#777b78}.shot-add span{font-size:20px}.shot-add b{margin-top:2px;font-size:9px}.shot-add small{margin-top:2px;font-size:7px;color:#565a57}
.camera-shot-add{border-color:#443924;background:#191713;color:#a98b56}
.camera-shot-add span{color:#c49b50}
.shot-card:hover,.shot-add:hover{border-color:#4f4025}
.track-area{min-height:0;display:grid;grid-template-columns:110px 1fr}
.track-labels{border-right:1px solid #222426}.track-labels div{height:29px;padding:0 9px;display:flex;align-items:center;gap:7px;border-bottom:1px solid #1f2021}.track-labels span{color:#9f814c}.track-labels b{font-size:8px;font-weight:520;color:#848884}
.track-canvas{position:relative;overflow:hidden}.track-ruler{height:18px;display:flex;justify-content:space-between;padding:0 9px;align-items:center;border-bottom:1px solid #222426}.track-ruler span{font-size:7px;color:#5f635f}.track-row{position:relative;height:29px;border-bottom:1px solid #1f2021}
.track-clip{position:absolute;top:5px;height:19px;padding:4px 6px;border-radius:4px;background:#242628;color:#8a8e8a;font-style:normal;font-size:7px}.track-clip.gold{background:#4b391e;color:#dbb46a;border:1px solid #72562c}.scene-clip{background:#1b1c1d}
.keyframe{position:absolute;top:9px;width:9px;height:9px;transform:rotate(45deg);background:#d5a957;border:1px solid #76592c}
.track-playhead{position:absolute;top:0;bottom:0;width:1px;background:#d5a957}.track-playhead:before{content:"";position:absolute;top:0;left:-4px;width:9px;height:7px;background:#d5a957;clip-path:polygon(0 0,100% 0,50% 100%)}

.export-tools{
  margin-top:12px;padding-top:11px;border-top:1px solid #242628;display:grid;grid-template-columns:1fr 1fr;gap:6px
}
.export-head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between}
.export-head b{font-size:10px}.export-head span{font-size:7px;letter-spacing:.12em;color:#625a4f}
.export-tools button{height:31px;border:1px solid #2c2e30;border-radius:7px;background:#191a1b;color:#959995;font-size:9px}
.export-tools button:first-of-type{border-color:#4e3f24;background:#211b13;color:#d6ae64}
.export-tools small{grid-column:1/-1;color:#5f635f;font-size:8px;line-height:1.45}

.right-panel{grid-template-rows:220px 190px minmax(0,1fr)}
.properties-panel{display:flex;flex-direction:column;overflow:auto}
#propertyContent{flex:0 0 auto}

@media(max-width:1280px){
  .main-workspace{grid-template-rows:minmax(0,1fr) 238px}
  .right-panel{grid-template-rows:205px 172px minmax(0,1fr)}
  .mode-btn{padding:0 7px;font-size:9px}
  .shot-card,.shot-add{flex-basis:126px}
}


/* Preview V6 · resizable Object Properties + Photoshop-inspired layer operations */
.right-panel{
  display:flex;
  flex-direction:column;
  grid-template-rows:none!important;
  min-height:0;
  --prop-height:38%;
}
.ai-panel{flex:0 0 220px}
.layers-panel{
  flex:1 1 auto;
  min-height:135px;
  padding:0 10px 8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.right-resizer{
  flex:0 0 8px;
  position:relative;
  cursor:ns-resize;
  background:#131415;
  border-top:1px solid #242628;
  border-bottom:1px solid #242628;
  z-index:6;
}
.right-resizer:hover,.right-resizer.dragging{background:#1b1915}
.right-resizer span{
  position:absolute;left:50%;top:2px;transform:translateX(-50%);
  width:42px;height:3px;border-radius:3px;background:#555956
}
.right-resizer:hover span,.right-resizer.dragging span{background:#c39a51}
.properties-panel{
  flex:0 0 var(--prop-height);
  min-height:180px;
  max-height:68%;
  overflow:auto;
  padding:0 13px 16px;
  border-top:0;
  position:relative;
  isolation:isolate;
  background:#171819;
}
.properties-panel .prop-head{
  position:sticky;
  top:0;
  z-index:12;
  min-height:54px;
  padding-top:4px;
  background:#171819;
  border-bottom:1px solid #232527;
}
.properties-panel .handle{
  position:relative;
  z-index:13;
  background:#595c59;
}
.layer-toolbar{
  height:32px;flex:0 0 32px;display:flex;align-items:center;gap:5px;
  border-top:1px solid #232527;border-bottom:1px solid #232527;
}
.layer-toolbar button{
  height:23px;padding:0 7px;border-radius:5px;color:#777b78;font-size:8px
}
.layer-toolbar button:hover{background:#202223;color:#c8cbc7}
.layer-toolbar span{margin-left:auto;color:#5f635f;font-size:8px}
.head-actions svg,.folder-icon svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round
}
.ps-layers{
  flex:1 1 auto;min-height:0;overflow:auto;padding:6px 0 2px;display:block
}
.layer-folder{margin-bottom:4px}
.layer-folder-row{
  height:31px;display:grid;
  grid-template-columns:20px 24px 24px minmax(0,1fr) 24px 24px;
  align-items:center;gap:2px;padding:0 4px;border-radius:6px;color:#a5a9a5;
  user-select:none
}
.layer-folder-row:hover{background:#1c1e1f}
.layer-folder-row.dragging,.layer-row.dragging{opacity:.42}
.layer-folder-row.drop-target,.layer-row.drop-target{outline:1px solid #6a522c;outline-offset:-1px}
.folder-toggle,.layer-eye,.layer-delete,.layer-lock{
  width:24px;height:24px;border-radius:5px;color:#666a67;font-size:10px;display:grid;place-items:center
}
.folder-toggle:hover,.layer-eye:hover,.layer-delete:hover,.layer-lock:hover{background:#27292a;color:#dedfda}
.folder-icon{width:23px;height:23px;display:grid;place-items:center;color:#b18d4d}
.layer-folder-row>b{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:10px;font-weight:570;outline:none
}
.folder-count{font-size:8px;color:#5f635f;text-align:center}
.layer-children{padding-left:16px}
.layer-folder.collapsed .layer-children{display:none}
.layer-folder.collapsed .folder-toggle{transform:rotate(-90deg)}
.layer-folder.hidden-folder>.layer-folder-row{opacity:.48}
.layer-row{
  height:32px!important;
  display:grid!important;
  grid-template-columns:18px 24px 24px minmax(0,1fr) auto 24px 24px!important;
  align-items:center;gap:2px;padding:0 4px!important;
  margin:1px 0;border:1px solid transparent;border-radius:6px;
  color:#9da09d;background:transparent!important;cursor:default;user-select:none
}
.layer-row:hover{background:#1c1e1f!important;border-color:#282a2c}
.layer-row.active{background:#2a2115!important;border-color:#4d3c20!important;color:#dfb96e}
.layer-row.hidden-layer{opacity:.42}
.layer-row.locked-layer .layer-lock{color:#d0a758;background:#241d13}
.layer-row.locked-layer{opacity:.66}
.drag-grip{font-size:9px;letter-spacing:-3px;color:#4e5250;cursor:grab}
.layer-row>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:530}
.layer-state{font-size:8px;color:#5f635f;white-space:nowrap}
.layer-row.active .layer-state{color:#94743f}
.root-layer{margin-top:4px;border-top:1px solid #252729!important}
.empty-folder-note{
  height:34px;display:grid;place-items:center;color:#555957;font-size:8px
}
.layer-new{
  animation:layerFlash .65s ease
}
@keyframes layerFlash{0%{background:#3d2f19}100%{background:transparent}}

@media(max-width:1280px){
  .ai-panel{flex-basis:205px}
  .properties-panel{min-height:165px}
}


/* Preview V7 · original DAAILOK black-gold axis compass + grid toggle */
.orientation{display:none!important}

.axis-compass{
  position:absolute;z-index:10;left:16px;top:15px;
  width:86px;height:88px;padding:8px 9px 7px;
  border:1px solid rgba(200,156,77,.28);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(17,18,19,.93),rgba(9,10,11,.84));
  box-shadow:0 12px 34px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.015);
  backdrop-filter:blur(10px);
  pointer-events:none;
}
.compass-label{
  display:block;
  color:#7f6840;
  font-size:7px;
  line-height:1;
  letter-spacing:.18em;
  font-weight:700;
}
.compass-graphic{
  position:absolute;left:14px;right:10px;top:24px;bottom:7px;
}
.axis-diamond{
  position:absolute;left:31px;top:28px;
  width:12px;height:12px;
  border:1px solid #b98f49;
  transform:rotate(45deg);
  background:#17130d;
  box-shadow:0 0 0 3px rgba(200,156,77,.055);
}
.axis-origin{
  position:absolute;left:35px;top:32px;
  width:4px;height:4px;border-radius:50%;
  background:#e4bf75;
  box-shadow:0 0 9px rgba(228,191,117,.55);
  z-index:4;
}
.axis-arm{position:absolute;left:37px;top:34px;transform-origin:0 0}
.axis-arm i{
  display:block;position:absolute;left:0;top:0;height:1px;
  background:linear-gradient(90deg,#e0b96c,#6f5934);
  box-shadow:0 0 7px rgba(200,156,77,.16)
}
.axis-arm b{
  position:absolute;font-size:9px;line-height:1;font-weight:750;color:#e3bd72;
  text-shadow:0 0 10px rgba(200,156,77,.2)
}
.axis-x{transform:rotate(-17deg)}
.axis-x i{width:32px}
.axis-x b{left:34px;top:-4px}
.axis-y{transform:rotate(-90deg)}
.axis-y i{width:29px}
.axis-y b{left:30px;top:-4px;transform:rotate(90deg)}
.axis-z{transform:rotate(137deg)}
.axis-z i{width:25px}
.axis-z b{left:26px;top:-4px;transform:rotate(-137deg)}
.axis-x:after,.axis-y:after,.axis-z:after{
  content:"";position:absolute;top:-2px;
  width:5px;height:5px;border-top:1px solid #c89c4d;border-right:1px solid #c89c4d;
  transform:rotate(45deg)
}
.axis-x:after{left:27px}
.axis-y:after{left:24px}
.axis-z:after{left:20px}

.viewport-bottom-right{
  position:absolute;right:14px;bottom:14px;z-index:10
}
.grid-toggle{
  height:30px;padding:0 8px 0 7px;
  display:flex;align-items:center;gap:6px;
  border:1px solid #303235;border-radius:8px;
  background:rgba(20,21,22,.88);
  color:#777b78;font-size:9px;
  backdrop-filter:blur(9px);
  transition:.12s ease;
}
.grid-toggle:hover{border-color:#514124;color:#d3af68;background:#1d1a14}
.grid-toggle.active{border-color:#5a4728;background:#211b13;color:#d9b36a}
.grid-toggle svg{
  width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round
}
.grid-toggle em{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:grid;place-items:center;
  background:#2b2d2e;color:#767a77;
  font-style:normal;font-size:7px
}
.grid-toggle.active em{background:#4b391d;color:#e1bb72}

.viewport .grid{
  transition:opacity .16s ease;
}
.viewport.grid-off .floor-grid,
.viewport.grid-off .horizon-grid{
  opacity:0!important;
}
.floor-grid{
  background-image:
    linear-gradient(rgba(189,151,82,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(189,151,82,.15) 1px,transparent 1px)!important;
}
.horizon-grid{background:#4a3b25!important}

@media(max-width:1280px){
  .axis-compass{left:11px;top:11px;transform:scale(.92);transform-origin:top left}
  .viewport-bottom-right{right:10px;bottom:10px}
}


/* Preview V8 · typography refinement + icon-only grid toggle */
html,body{
  font-family:
    "SF Pro Rounded",
    "Avenir Next",
    "Segoe UI Variable",
    "PingFang SC",
    "Microsoft YaHei UI",
    "Noto Sans SC",
    system-ui,
    sans-serif;
  font-size:14px;
  font-weight:450;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  font-feature-settings:"kern" 1,"liga" 1;
}

button,input,select,textarea{
  font-family:inherit;
  letter-spacing:-.004em;
}

.brand strong{font-size:14px;font-weight:720;letter-spacing:.11em}
.brand em{font-size:10px;font-weight:560}
.top-status{font-size:12px}
.top-quiet,.top-primary{font-size:12px}

.drawer-head small,.ai-head small,.section-head small,.prop-head small{
  font-size:10px;
  font-weight:620;
  letter-spacing:.12em;
}
.drawer-head h2,.ai-head h2,.section-head h2,.prop-head>div h2,.right-head h2{
  font-size:17px;
  font-weight:650;
  letter-spacing:-.015em;
}

.drawer-search input{font-size:12px}
.drawer-kicker{font-size:11px}
.drawer-item b{font-size:12px;font-weight:600}
.drawer-item small{font-size:10px;line-height:1.35}
.drawer-card strong{font-size:12px}
.drawer-card span,.drawer-note{font-size:10.5px}
.drawer-pill{font-size:10.5px}

.mode-btn{font-size:10.5px;font-weight:590}
.view-controls .small-chip{font-size:10px;font-weight:580}

.ai-mode{font-size:10.5px;font-weight:600}
.ai-input-wrap textarea{font-size:12px;line-height:1.55}
.ai-chips button{font-size:9.5px}
.ai-feedback{font-size:9.5px}

.layer-toolbar button{font-size:9px;font-weight:560}
.layer-toolbar span{font-size:9px}
.layer-folder-row>b{font-size:11px;font-weight:610}
.folder-count,.layer-state{font-size:9px}
.layer-row>b{font-size:11px;font-weight:560}

.selection-summary small{font-size:9px}
.selection-summary b{font-size:12px;font-weight:630}
.selection-summary em{font-size:9px}
.selection-status{font-size:9px;font-weight:600}
.prop-row>span,.prop-slider>span{font-size:11px}
.prop-row input,.prop-row select{font-size:12px}
.quick-actions button{font-size:10px}
.rig-note b{font-size:11px}
.rig-note span{font-size:10px;line-height:1.55}

.timeline-title b{font-size:12px}
.timeline-title span{font-size:10px}
.timeline-actions button{font-size:10px}
.shot-info b{font-size:10px;font-weight:600}
.shot-info small{font-size:9px}
.track-labels b{font-size:9px}
.track-ruler span,.track-clip{font-size:8px}

.export-head b{font-size:11px}
.export-head span{font-size:8px}
.export-tools button{font-size:10px}
.export-tools small{font-size:9px}

.grid-toggle{
  width:32px;
  height:32px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid #303235;
  border-radius:8px;
  background:rgba(20,21,22,.88);
  color:#858985;
}
.grid-toggle svg{
  width:16px;
  height:16px;
  stroke-width:1.45;
}
.grid-toggle:hover{
  border-color:#494c4d;
  background:#1b1d1e;
  color:#b9bcb8;
}
.grid-toggle.active{
  border-color:#5a4728;
  background:#211b13;
  color:#d9b36a;
}
.grid-toggle span,.grid-toggle em{display:none!important}


/* Preview V9 · typography scale + refined DAAILOK axis gizmo */


html,body{
  font-family:var(--ds-studio-font-family)!important;
  font-size:15px!important;
  font-weight:450;
  line-height:1.45;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{
  font-family:var(--ds-studio-font-family)!important;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:0;
}
button{font-weight:540}

.body-grid{grid-template-columns:64px 0 minmax(0,1fr) 356px}
.body-grid.drawer-open{grid-template-columns:64px 292px minmax(0,1fr) 356px}
.drawer-inner{width:292px}

/* stronger, visibly larger type hierarchy */
.brand strong{font-size:15px!important;font-weight:720;letter-spacing:.09em}
.brand em{font-size:11px!important}
.top-status{font-size:12.5px!important}
.top-quiet,.top-primary{font-size:12.5px!important;font-weight:600}

.drawer-head small,.ai-head small,.section-head small,.prop-head small{
  font-size:10.5px!important;
  font-weight:650;
  letter-spacing:.1em;
}
.drawer-head h2,.ai-head h2,.section-head h2,.prop-head>div h2,.right-head h2{
  font-size:18px!important;
  font-weight:650!important;
  line-height:1.18;
  letter-spacing:-.01em;
}
.drawer-search input{font-size:12.5px!important}
.drawer-kicker{font-size:11.5px!important}
.drawer-item b{font-size:12.5px!important;font-weight:610}
.drawer-item small{font-size:10.5px!important;line-height:1.45}
.drawer-card strong{font-size:12.5px!important}
.drawer-card span,.drawer-note{font-size:11px!important;line-height:1.55}
.drawer-pill{font-size:11px!important}

.mode-btn{font-size:11px!important;font-weight:600}
.view-controls .small-chip{font-size:10.5px!important;font-weight:600}
.ai-mode{font-size:11px!important;font-weight:620}
.ai-input-wrap textarea{font-size:12.5px!important;line-height:1.6}
.ai-chips button{font-size:10px!important}
.ai-feedback{font-size:10px!important;line-height:1.45}

.layer-toolbar button{font-size:9.8px!important;font-weight:580}
.layer-toolbar span{font-size:9.5px!important}
.layer-folder-row>b{font-size:11.5px!important;font-weight:620}
.folder-count,.layer-state{font-size:9.5px!important}
.layer-row>b{font-size:11.5px!important;font-weight:580}

.selection-summary small{font-size:9.5px!important}
.selection-summary b{font-size:12.5px!important;font-weight:650}
.selection-summary em{font-size:9.5px!important}
.selection-status{font-size:9.5px!important;font-weight:620}
.prop-row>span,.prop-slider>span{font-size:11.5px!important}
.prop-row input,.prop-row select{font-size:12.5px!important;font-weight:500}
.quick-actions button{font-size:10.5px!important;font-weight:580}
.rig-note b{font-size:11.5px!important}
.rig-note span{font-size:10.5px!important;line-height:1.6}

.timeline-title b{font-size:12.5px!important}
.timeline-title span{font-size:10.5px!important}
.timeline-actions button{font-size:10.5px!important;font-weight:580}
.shot-info b{font-size:10.5px!important;font-weight:620}
.shot-info small{font-size:9.5px!important}
.track-labels b{font-size:9.5px!important}
.track-ruler span,.track-clip{font-size:8.8px!important}

.export-head b{font-size:11.5px!important}
.export-head span{font-size:8.5px!important}
.export-tools button{font-size:10.5px!important;font-weight:580}
.export-tools small{font-size:9.5px!important;line-height:1.5}

/* rounder, more premium control geometry */
.top-quiet,.top-primary,.ai-mode,.drawer-search,.prop-row input,.prop-row select,
.quick-actions button,.export-tools button,.mode-btn,.small-chip,.layer-row,.selection-summary{
  border-radius:10px;
}
.ai-input-wrap textarea{border-radius:11px}
.drawer-item,.drawer-card,.rig-note{border-radius:10px}

/* remove previous boxy axis treatment */
.axis-compass{display:none!important}
.axis-gizmo{
  position:absolute;
  z-index:10;
  left:16px;
  top:15px;
  width:72px;
  height:72px;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.36));
  pointer-events:none;
}
.axis-gizmo svg{display:block;width:100%;height:100%;overflow:visible}
.north-compass{
  --north-rotation:0deg;
  position:absolute;z-index:11;left:89px;top:26px;
  width:46px;height:46px;border:1px solid rgba(200,156,77,.28);border-radius:50%;
  background:radial-gradient(circle at 50% 46%,rgba(32,28,21,.94),rgba(10,11,12,.88));
  box-shadow:0 8px 22px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.018);
  pointer-events:none;
}
.north-letter{position:absolute;left:0;right:0;top:3px;text-align:center;color:#d1a85b;font-size:8px;font-weight:760;letter-spacing:.05em}
.north-needle{
  position:absolute;left:21px;top:10px;width:4px;height:25px;
  transform-origin:2px 13px;transform:rotate(var(--north-rotation));
}
.north-needle:before{
  content:"";position:absolute;left:-3px;top:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:12px solid #c89c4d;
}
.north-needle:after{content:none;}
.north-center{position:absolute;left:19px;top:19px;width:6px;height:6px;border-radius:50%;background:#d6ad62;border:1px solid #17120c}
.layer-row>b.layer-name-editing{
  overflow:visible;white-space:normal;background:#111213;border:1px solid #5d4826;border-radius:4px;padding:2px 5px;color:#e4bf76;cursor:text;
}
.light-control-grid{display:grid;gap:8px;margin-top:8px}
.light-control-grid label{display:grid;grid-template-columns:82px 1fr 48px;gap:7px;align-items:center;color:#7e827e;font-size:10px}
.light-control-grid input[type="range"]{width:100%;accent-color:#c89c4d}
.light-control-grid output{font-size:10px;color:#cdb072;text-align:right}
.light-color-row{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:7px}
.light-color-row input[type="color"]{width:100%;height:30px;padding:2px;border:1px solid #33363a;border-radius:7px;background:#171819}

.gizmo-orbit{
  fill:rgba(12,13,14,.72);
  stroke:rgba(200,156,77,.26);
  stroke-width:1;
}
.gizmo-cross{
  fill:none;
  stroke:rgba(190,157,94,.12);
  stroke-width:.8;
  stroke-dasharray:2.4 3.2;
}
.gizmo-core-ring{
  fill:rgba(22,18,12,.84);
  stroke:#9b7538;
  stroke-width:1;
}
.gizmo-core{fill:#e4bf75}
.gizmo-axis path{
  fill:none;
  stroke:url(#gAxisBright);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.gizmo-axis circle{
  fill:#15120d;
  stroke:#b88b43;
  stroke-width:1;
}
.gizmo-axis text{
  font-family:var(--ds-studio-font-family);
  font-size:8px;
  font-weight:700;
  fill:#e6c27c;
  text-anchor:middle;
}
.gizmo-axis.gz{opacity:.72}
.gizmo-axis.gy{opacity:1}
.gizmo-axis.gx{opacity:.9}

/* orientation feedback without copying another product's look */
.axis-gizmo[data-view="top"] .gy circle,
.axis-gizmo[data-view="front"] .gz circle,
.axis-gizmo[data-view="left"] .gx circle,
.axis-gizmo[data-view="right"] .gx circle,
.axis-gizmo[data-view="back"] .gz circle{
  fill:#c89c4d;
  stroke:#efce8d;
}
.axis-gizmo[data-view="top"] .gy text,
.axis-gizmo[data-view="front"] .gz text,
.axis-gizmo[data-view="left"] .gx text,
.axis-gizmo[data-view="right"] .gx text,
.axis-gizmo[data-view="back"] .gz text{
  fill:#14110c;
}

@media(max-width:1280px){
  .body-grid{grid-template-columns:58px 0 minmax(0,1fr) 326px}
  .body-grid.drawer-open{grid-template-columns:58px 260px minmax(0,1fr) 326px}
  .drawer-inner{width:260px}
  .axis-gizmo{left:12px;top:12px;width:66px;height:66px}
}


/* Preview V10 · real Three.js viewport */
.viewport-scene{
  transform:none!important;
  transition:none!important;
  background:#070809!important;
}
#previewCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  outline:none;
  cursor:default;
}
.viewport-loading{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:6;
  min-width:190px;
  padding:14px 16px;
  border:1px solid rgba(200,156,77,.22);
  border-radius:12px;
  background:rgba(14,15,16,.86);
  backdrop-filter:blur(10px);
  text-align:center;
  pointer-events:none;
}
.viewport-loading[hidden]{display:none!important}
.viewport-loading span{
  display:block;
  width:22px;
  height:22px;
  margin:0 auto 9px;
  border:2px solid #3e3527;
  border-top-color:#d4aa5b;
  border-radius:50%;
  animation:spin3d .9s linear infinite;
}
.viewport-loading b{font-size:11px;font-weight:560;color:#9b9e99}
@keyframes spin3d{to{transform:rotate(360deg)}}
.selection-label{
  position:absolute;
  z-index:8;
  transform:translate(-50%,-100%);
  margin-top:-7px;
  padding:4px 8px;
  border:1px solid #5b4727;
  border-radius:7px;
  background:rgba(25,21,15,.9);
  color:#dfb86f;
  font-size:10px;
  font-weight:620;
  line-height:1;
  pointer-events:none;
  box-shadow:0 7px 20px rgba(0,0,0,.28);
}
.selection-label[hidden]{display:none!important}

.prop-block{
  padding:8px 0 2px;
  border-top:1px solid #222426;
}
.prop-block-title{
  margin-bottom:7px;
  color:#777b78;
  font-size:10px;
  font-weight:560;
}
.axis-inputs{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5px;
}
.axis-input{
  height:34px;
  display:grid;
  grid-template-columns:18px 1fr;
  align-items:center;
  border:1px solid #2c2e30;
  border-radius:8px;
  background:#1d1f20;
  overflow:hidden;
}
.axis-input span{
  height:100%;
  display:grid;
  place-items:center;
  color:#b38c49;
  font-size:9px;
  font-weight:700;
  background:#191a1b;
  border-right:1px solid #292b2d;
}
.axis-input input{
  min-width:0;
  width:100%;
  height:100%;
  padding:0 6px;
  border:0;
  background:transparent;
  color:#d8d6cf;
  font-size:10.5px;
  text-align:right;
}
.axis-input input:focus{background:#24211b;color:#efc97f}

.demo-object,.figure-wrap{display:none!important}


/* Preview V11 · DAAILOK asset library + transform workflows */
.top-actions #generateWorldBtn{min-width:96px}
.top-actions #createCameraBtn{min-width:78px}

.asset-cloud-head{padding-bottom:2px}
.cloud-status{
  color:#7f6842;
  font-size:9px;
  font-weight:580;
  letter-spacing:.02em;
}
.asset-tabs{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5px;
  margin-top:9px;
}
.asset-tab{
  height:32px;
  border:1px solid #2b2d2f;
  border-radius:8px;
  background:#18191a;
  color:#747875;
  font-size:10px;
  font-weight:580;
}
.asset-tab:hover{border-color:#4d3d23;color:#c8aa72}
.asset-tab.active{
  border-color:#5a4728;
  background:#211b13;
  color:#ddb66b;
}
.asset-library{padding-top:7px}
.asset-pane{display:none;gap:7px}
.asset-pane.active{display:grid}
.asset-library-card{
  min-height:84px;
  padding:7px;
  display:grid;
  grid-template-columns:70px 1fr;
  grid-template-rows:auto auto;
  column-gap:9px;
  align-items:center;
  border:1px solid #2a2c2e;
  border-radius:10px;
  background:#171819;
  text-align:left;
}
.asset-library-card:hover{border-color:#4e3e24;background:#1c1914}
.asset-library-card b{font-size:11.5px;font-weight:620}
.asset-library-card small{font-size:9.5px;color:#646864}
.asset-thumb{
  grid-row:1/3;
  width:70px;height:58px;border-radius:7px;
  border:1px solid #302b21;
}
.world-thumb{
  background:
    linear-gradient(140deg,rgba(200,156,77,.18),transparent 45%),
    linear-gradient(160deg,#302b22,#121314 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.asset-doc{
  grid-row:1/3;
  width:52px;height:58px;
  display:grid;place-items:center;
  border:1px solid #3a3226;
  border-radius:8px;
  background:#211b13;
  color:#d6ad62;
  font-size:17px;
  font-weight:700;
}
.asset-library-add{
  height:36px;
  border:1px dashed #35383a;
  border-radius:9px;
  color:#7c807c;
  font-size:10.5px;
}
.asset-library-add:hover{border-color:#5b4728;color:#d5ad64;background:#1c1914}

.transform-actions{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.transform-actions button.active{
  border-color:#71562c!important;
  background:#2b2113!important;
  color:#e0b86b!important;
}

.shot-thumb{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}


/* Preview V12 · SketchUp-style group/component edit state */
.edit-mode-banner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid #5b4728;
  border-radius:9px;
  background:linear-gradient(180deg,#211b13,#191715);
}
.edit-mode-banner span{
  height:22px;
  padding:0 7px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#4a381d;
  color:#e1b96d;
  font-size:9px;
  font-weight:650;
}
.edit-mode-banner b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d8d6cf;
  font-size:10.5px;
  font-weight:600;
}
.edit-mode-banner button{
  height:25px;
  padding:0 8px;
  border:1px solid #3a3c3e;
  border-radius:7px;
  color:#8c908c;
  font-size:9.5px;
}
.edit-mode-banner button:hover{
  border-color:#6a512b;
  color:#ddb66b;
  background:#211b13;
}
.viewport.component-editing:after{
  content:"组内编辑 · Esc 返回整体";
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  z-index:11;
  height:27px;
  padding:0 10px;
  display:flex;
  align-items:center;
  border:1px solid rgba(200,156,77,.32);
  border-radius:14px;
  background:rgba(24,20,14,.88);
  color:#d7ad62;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.01em;
  pointer-events:none;
  backdrop-filter:blur(7px);
}
.viewport.component-editing{
  box-shadow:inset 0 0 0 1px rgba(200,156,77,.18);
}


/* Preview V13 · conventional XYZ colors + clearer rig editing */
.axis-input:nth-child(1) span{color:#ef6b6b;background:rgba(224,91,91,.08)}
.axis-input:nth-child(2) span{color:#68c77d;background:rgba(88,191,115,.08)}
.axis-input:nth-child(3) span{color:#6e9cf1;background:rgba(93,143,240,.08)}
.axis-input:nth-child(1){border-color:rgba(224,91,91,.22)}
.axis-input:nth-child(2){border-color:rgba(88,191,115,.22)}
.axis-input:nth-child(3){border-color:rgba(93,143,240,.22)}

.rig-note strong.axis-x{color:#ef6b6b}
.rig-note strong.axis-y{color:#68c77d}
.rig-note strong.axis-z{color:#6e9cf1}

.viewport.component-editing .selection-label{
  border-color:#5a4728;
  box-shadow:0 0 0 2px rgba(200,156,77,.08),0 7px 20px rgba(0,0,0,.28);
}


/* SaaS integration preview · roles, cloud assets and account state */
.account-badge{
  height:31px;
  max-width:150px;
  padding:0 10px;
  border:1px solid #343638;
  border-radius:9px;
  background:#171819;
  color:#8b8f8b;
  font-size:10.5px;
  font-weight:590;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.account-badge:hover{border-color:#554328;color:#d0ad6e;background:#1c1914}
.account-badge.developer{
  border-color:#5c4829;
  background:#211b13;
  color:#ddb66b;
}
.rail-item.feature-locked{
  opacity:.34;
  filter:saturate(.35);
}
.rail-item.feature-locked:after{
  content:"";
  position:absolute;
  right:8px;
  bottom:7px;
  width:5px;height:5px;
  border-radius:50%;
  background:#6e5a36;
}
.ai-input-wrap textarea:disabled,
.ai-input-wrap button:disabled,
.ai-chips button:disabled{
  opacity:.42;
  cursor:not-allowed;
}
.asset-actions-stack{
  display:grid;
  gap:6px;
  margin-bottom:8px;
}
.cloud-asset-list{
  display:grid;
  gap:6px;
}
.cloud-asset-card{
  min-height:62px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:9px;
  align-items:center;
  padding:7px 8px;
  border:1px solid #2b2d2f;
  border-radius:9px;
  background:#171819;
  text-align:left;
}
.cloud-asset-card:hover{
  border-color:#5a4728;
  background:#1c1914;
}
.cloud-asset-card .asset-doc{
  grid-row:1/3;
  width:42px;height:46px;
  font-size:11px;
}
.cloud-asset-card b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:610;
  color:#c8cac5;
}
.cloud-asset-card small{
  font-size:9px;
  color:#656965;
}
.asset-loading,.asset-empty{
  min-height:72px;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  border:1px dashed #303234;
  border-radius:9px;
  color:#666a67;
  font-size:10px;
  line-height:1.5;
}
.asset-empty b{color:#9a9d99;font-size:11px}
.asset-empty span{font-size:9.5px}


/* Character refinement · mannequin presets + pose workflow */
.character-preset-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.character-preset{
  min-width:0;
  min-height:58px;
  padding:9px 8px;
  border:1px solid #2e3032;
  border-radius:9px;
  background:#171819;
  color:#b9bbb8;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}
.character-preset b{
  font-size:12px;
  font-weight:650;
  color:#d4d5d1;
}
.character-preset span{
  font-size:10.5px;
  line-height:1.3;
  color:#777b78;
}
.character-preset:hover{
  border-color:#45484a;
  background:#1c1e1f;
}
.character-preset.active{
  border-color:#6a522c;
  background:#211b13;
  box-shadow:inset 0 0 0 1px rgba(210,169,92,.08);
}
.character-preset.active b{color:#e0ba70}
.character-preset.active span{color:#a79067}
.drawer-note.compact{
  margin-top:8px;
  font-size:10.5px;
  line-height:1.55;
}
.layer-row.active{
  border-color:#5d4928;
  background:linear-gradient(90deg,rgba(202,158,78,.11),rgba(202,158,78,.025));
  box-shadow:inset 2px 0 0 #c99b4d;
}
.layer-row.active b{color:#e1d5bd}


/* Unified create/import dialogs */
body.modal-open{overflow:hidden}
.creation-modal[hidden]{display:none!important}
.creation-modal{
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
}
.creation-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
}
.creation-dialog{
  position:relative;
  width:min(560px,calc(100vw - 32px));
  max-height:min(760px,calc(100vh - 36px));
  overflow:auto;
  border:1px solid #323438;
  border-radius:16px;
  background:#151718;
  box-shadow:0 28px 90px rgba(0,0,0,.58);
}
.creation-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  padding:22px 22px 18px;
  border-bottom:1px solid #242628;
}
.creation-head small{
  color:#8b6a38;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:700;
}
.creation-head h2{
  margin:5px 0 6px;
  color:#e1e1dc;
  font-size:19px;
  font-weight:650;
}
.creation-head p{
  margin:0;
  color:#858985;
  font-size:11.5px;
  line-height:1.6;
}
.creation-close{
  width:30px;height:30px;
  border:1px solid #2d2f31;
  border-radius:9px;
  color:#858985;
  font-size:18px;
}
.creation-close:hover{border-color:#5a4728;color:#d8b269;background:#211b13}
.creation-upload{padding:18px 22px 8px}
.creation-dropzone{
  width:100%;
  min-height:184px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px dashed #3b3e41;
  border-radius:13px;
  background:
    radial-gradient(circle at 50% 35%,rgba(202,158,78,.06),transparent 34%),
    #181a1b;
}
.creation-dropzone:hover{border-color:#765a31;background:#1d1a15}
.creation-upload-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid #4d3d25;
  border-radius:12px;
  background:#211b13;
  color:#d2a75d;
  font-size:22px;
  font-weight:300;
}
.creation-dropzone b{color:#d4d5d1;font-size:13px;font-weight:620}
.creation-dropzone small{color:#717570;font-size:10.5px}
.creation-file-preview{
  min-height:86px;
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid #303235;
  border-radius:12px;
  background:#191b1c;
}
.creation-file-preview img{
  width:72px;height:62px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #292b2d;
  background:#101112;
}
.creation-file-preview b{
  display:block;
  max-width:270px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d4d5d1;
  font-size:11.5px;
}
.creation-file-preview small{display:block;margin-top:4px;color:#727671;font-size:10px}
.creation-file-preview button{
  height:30px;
  padding:0 9px;
  border:1px solid #34373a;
  border-radius:8px;
  color:#8e928e;
  font-size:10px;
}
.creation-options{padding:10px 22px 18px}
.creation-options label{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:10px;
  align-items:center;
}
.creation-options label span{color:#8b8f8a;font-size:11px}
.creation-options input{
  height:34px;
  padding:0 10px;
  border:1px solid #303235;
  border-radius:9px;
  background:#1a1c1d;
  color:#d6d7d2;
  font-size:11.5px;
}
.creation-note{
  margin-top:10px;
  padding:9px 10px;
  border-radius:8px;
  background:#191a1b;
  color:#6f736f;
  font-size:10.5px;
  line-height:1.5;
}
.creation-quality{
  margin-top:10px;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:10px;
  align-items:start;
}
.creation-quality[hidden]{display:none!important}
.creation-quality-label{
  padding-top:10px;
  color:#8b8f8a;
  font-size:11px;
}
.creation-quality-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.creation-quality-btn{
  min-height:54px;
  padding:8px 9px;
  display:grid;
  align-content:center;
  gap:4px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  color:#c6cbc7;
  text-align:left;
}
.creation-quality-btn b{font-size:10.5px;font-weight:650}
.creation-quality-btn small{font-size:8.5px;line-height:1.35;color:#78817b}
.creation-quality-btn:hover:not(:disabled){
  border-color:rgba(238,201,127,.28);
  background:linear-gradient(145deg,rgba(238,201,127,.08),rgba(255,255,255,.022));
}
.creation-quality-btn.active{
  border-color:rgba(238,201,127,.48);
  background:linear-gradient(145deg,rgba(238,201,127,.16),rgba(238,201,127,.045));
  box-shadow:inset 0 1px 0 rgba(255,241,205,.08);
}
.creation-quality-btn.active b{color:#f0cf86}
.creation-quality-btn:disabled{opacity:.40;cursor:not-allowed}

.creation-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:15px 22px 20px;
  border-top:1px solid #242628;
}
.creation-actions button{
  height:40px;
  border-radius:10px;
  font-size:11.5px;
  font-weight:620;
}
.creation-secondary{
  border:1px solid #3a3d40;
  background:#1a1c1d;
  color:#b0b3af;
}
.creation-secondary:hover{border-color:#6b542f;color:#dbb56e}
.creation-primary{
  border:1px solid #7a5d31;
  background:linear-gradient(180deg,#c39850,#9e7338);
  color:#15130f;
}
.creation-primary:hover{filter:brightness(1.06)}
.top-actions .feature-locked{opacity:.46}

.viewport-loading.error{
  min-width:min(520px,calc(100% - 48px));
  border-color:rgba(214,91,82,.45);
  background:rgba(28,15,15,.94);
}
.viewport-loading.error b{
  color:#e2aaa5;
  line-height:1.55;
  overflow-wrap:anywhere;
}


/* Preview V14 · quiet cinematic system UI
   Visual-only layer: preserve editor behavior, make active state unmistakably gold. */

html,body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif}
.studio{background:radial-gradient(circle at 50% -20%,#24282b 0,#111315 30%,#090a0b 64%)}
.topbar{
  height:58px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(15,17,19,.88);backdrop-filter:blur(24px) saturate(135%);
}
.studio{grid-template-rows:58px 1fr}
.brand{min-width:220px;gap:8px}.brand .logo{width:40px;height:28px}.brand strong{color:#f3f2ee;font-size:13px;letter-spacing:.15em}.brand em{color:#737875}
.history button,.close{border-radius:10px}
.top-quiet,.top-primary,.account-badge{
  height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);color:#b9bdb9;box-shadow:none;
}
.top-quiet:hover,.account-badge:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.14);color:#fff}
.top-primary{
  background:linear-gradient(180deg,#e3bd75,#c99b4d);border-color:#d7aa5a;color:#17130d;
  box-shadow:0 5px 18px rgba(200,156,77,.14)
}
.body-grid{grid-template-columns:70px 0 minmax(0,1fr) 354px;background:#0b0c0d}
.body-grid.drawer-open{grid-template-columns:70px 292px minmax(0,1fr) 354px}
.rail{
  padding:13px 10px;background:rgba(15,17,19,.96);border-right:1px solid rgba(255,255,255,.065)
}
.rail-item{
  width:46px;height:46px;border-radius:12px;color:#8a8e8b;transition:background .15s ease,color .15s ease,transform .15s ease
}
.rail-item:hover{background:rgba(255,255,255,.055);color:#e8e9e6}
.rail-item.active{
  background:linear-gradient(180deg,rgba(229,190,116,.98),rgba(197,148,67,.98));
  color:#17130d;box-shadow:0 8px 24px rgba(198,150,69,.16)
}
.rail-item.active:after{display:none}
.left-drawer,.right-panel,.timeline{background:rgba(18,20,22,.96)}
.body-grid.drawer-open .left-drawer{border-right-color:rgba(255,255,255,.07)}
.drawer-inner{width:292px;padding:17px 14px 20px}
.drawer-search,.ai-input-wrap textarea,.prop-row input,.prop-row select,.axis-input,.light-color-row input[type="color"]{
  border-color:rgba(255,255,255,.085);background:rgba(255,255,255,.035)
}
.drawer-item,.drawer-card,.asset-library-card,.cloud-asset-card,.character-preset{
  border-color:transparent;background:rgba(255,255,255,.018)
}
.drawer-item:hover,.drawer-card:hover,.asset-library-card:hover,.cloud-asset-card:hover,.character-preset:hover{
  border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.05)
}
.drawer-item.active,.drawer-pill.active,.asset-tab.active,.character-preset.active{
  border-color:rgba(224,179,96,.42)!important;background:var(--ds-studio-accent-muted)!important;color:var(--ds-studio-accent-soft)!important;
  box-shadow:inset 0 0 0 1px rgba(239,201,127,.035)
}
.drawer-item.active .drawer-icon{background:rgba(210,168,93,.17);color:var(--ds-studio-accent-soft)}
.viewport{border-bottom-color:rgba(255,255,255,.065);background:#050607}
.display-modes{
  padding:5px;border:1px solid rgba(255,255,255,.09);border-radius:13px;
  background:rgba(19,21,23,.72);backdrop-filter:blur(18px) saturate(130%);box-shadow:0 10px 30px rgba(0,0,0,.18)
}
.mode-btn{
  height:30px;padding:0 11px;border:0!important;border-radius:9px!important;background:transparent!important;color:#8d918e!important
}
.mode-btn:hover{background:rgba(255,255,255,.06)!important;color:#e7e8e5!important}
.mode-btn.active{
  background:linear-gradient(180deg,#e2ba70,#c79645)!important;color:#18140e!important;
  box-shadow:0 5px 14px rgba(201,151,69,.15)!important
}
.view-controls{
  padding:4px;border:1px solid rgba(255,255,255,.08);border-radius:12px;
  background:rgba(17,19,21,.72);backdrop-filter:blur(16px)
}
.view-controls .small-chip{height:29px;border:0!important;border-radius:8px!important;background:transparent!important;color:#8b8f8c!important}
.view-controls .small-chip:hover{background:rgba(255,255,255,.055)!important;color:#eee!important}
.view-controls .small-chip.active{background:var(--ds-studio-accent-muted)!important;color:var(--ds-studio-accent-soft)!important}
.grid-toggle{
  border-color:rgba(255,255,255,.09)!important;background:rgba(17,19,21,.76)!important;color:#898d8a!important;backdrop-filter:blur(14px)
}
.grid-toggle.active{
  border-color:rgba(225,179,95,.46)!important;background:linear-gradient(180deg,#dfb66b,#c49343)!important;color:#17130d!important;
  box-shadow:0 7px 20px rgba(200,156,77,.15)
}
.right-panel{border-left:1px solid rgba(255,255,255,.065)}
.ai-panel{background:transparent;border-bottom-color:rgba(255,255,255,.065)}
.ai-mode{
  border-color:rgba(222,177,94,.36);background:var(--ds-studio-accent-muted);color:var(--ds-studio-accent-soft)
}
.ai-input-wrap button{
  background:linear-gradient(180deg,#dfb66d,#c49343);color:#17130d;box-shadow:0 5px 16px rgba(200,156,77,.14)
}
.layers-panel{border-bottom-color:rgba(255,255,255,.065)}
.layer-row{border-radius:9px!important}
.layer-row:hover{background:rgba(255,255,255,.04);border-color:transparent}
.layer-row.active{
  border-color:rgba(225,180,97,.34)!important;
  background:linear-gradient(90deg,rgba(213,168,86,.17),rgba(213,168,86,.055))!important;
  box-shadow:inset 2px 0 0 var(--ds-studio-accent-soft)!important;color:var(--ds-studio-accent-soft)!important
}
.layer-row.active b,.layer-row.active .layer-state,.layer-row.active .layer-icon{color:var(--ds-studio-accent-soft)!important}
.selection-summary,.rig-note,.creation-note{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
.selection-symbol{background:var(--ds-studio-accent-muted);color:var(--ds-studio-accent-soft)}
.selection-status{background:var(--ds-studio-accent-muted);color:var(--ds-studio-accent-soft)}
.quick-actions button,.timeline-actions button,.export-tools button{
  border-color:rgba(255,255,255,.075);background:rgba(255,255,255,.035);color:#9ca09c
}
.quick-actions button:hover,.timeline-actions button:hover,.export-tools button:hover{background:rgba(255,255,255,.065);color:#f1f2ef}
.quick-actions button.active,.quick-actions button:first-child,.timeline-actions button.active,.export-tools button.active,
.transform-actions button.active{
  border-color:rgba(226,181,98,.4)!important;background:var(--ds-studio-accent-muted)!important;color:var(--ds-studio-accent-soft)!important
}
.shot-timeline{border-top:1px solid rgba(255,255,255,.055);background:rgba(17,19,21,.96)}
.timeline-toolbar{border-bottom-color:rgba(255,255,255,.055)}
.shot-card,.shot-add{
  border-color:rgba(255,255,255,.075)!important;background:rgba(255,255,255,.025)!important;border-radius:11px!important
}
.shot-card:hover,.shot-add:hover{border-color:rgba(255,255,255,.14)!important;background:rgba(255,255,255,.045)!important}
.shot-card.active,.camera-shot-add{
  border-color:rgba(229,183,99,.5)!important;background:var(--ds-studio-accent-muted)!important;
  box-shadow:inset 0 0 0 1px rgba(239,201,127,.04)
}
.shot-card.active .shot-info b,.camera-shot-add b{color:var(--ds-studio-accent-soft)!important}
input[type="range"]{accent-color:var(--ds-studio-accent)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--ds-studio-accent)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(232,190,111,.62);outline-offset:2px
}
.creation-backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(18px)}
.creation-dialog{
  border-color:rgba(255,255,255,.1);border-radius:18px;background:rgba(22,24,26,.94);
  backdrop-filter:blur(28px) saturate(130%);box-shadow:0 34px 110px rgba(0,0,0,.58)
}
.creation-primary{border-color:#d5a657;background:linear-gradient(180deg,#e3bd75,#c99b4d);color:#17130d}
.toast{border-color:rgba(220,174,91,.3);background:rgba(20,22,24,.9);backdrop-filter:blur(16px)}


/* Preview V15 · structural visual reset */
.studio{grid-template-rows:64px 1fr!important}
.topbar{height:64px!important;padding:0 22px!important;background:rgba(8,9,10,.94)!important;border-bottom:1px solid rgba(255,255,255,.055)!important}
.brand{min-width:238px!important}.brand strong{font-size:14px!important;font-weight:650!important;letter-spacing:.18em!important}.brand em{font-size:9px!important;color:#666b68!important}
.top-status{font-size:10px!important;color:#686d69!important}.top-actions{gap:8px!important}
.top-actions button{box-shadow:none!important}
.top-actions .top-primary{background:rgba(255,255,255,.055)!important;color:#d9dcd8!important;border-color:rgba(255,255,255,.08)!important}
.top-actions .top-primary:hover,.top-actions .top-quiet:hover{background:rgba(255,255,255,.085)!important;color:#fff!important}

.body-grid{grid-template-columns:58px 0 minmax(0,1fr) 320px!important}
.body-grid.drawer-open{grid-template-columns:58px 270px minmax(0,1fr) 320px!important}
.rail{padding:10px 7px!important;background:#0c0e0f!important}
.rail-item{width:42px!important;height:42px!important;border-radius:10px!important;margin:2px 0!important}
.rail-item svg{width:17px!important;height:17px!important;stroke-width:1.55!important}
.rail-item.active{background:rgba(213,169,88,.16)!important;color:#e8bd6c!important;box-shadow:inset 0 0 0 1px rgba(225,182,100,.22)!important}
.rail-item.active svg{stroke:#e8bd6c!important}

.left-drawer{background:#0f1112!important}.drawer-inner{width:270px!important;padding:18px 14px!important}
.drawer-head small,.ai-head small,.section-head small,.prop-head small{font-size:8px!important;letter-spacing:.16em!important;color:#626763!important}
.drawer-head h2,.ai-head h2,.section-head h2,.prop-head h2{font-size:14px!important;font-weight:580!important;letter-spacing:0!important}
.drawer-search{height:34px!important;border:0!important;border-radius:10px!important;background:#17191b!important}
.drawer-content{gap:5px!important}.drawer-section{padding-top:5px!important}
.drawer-item{min-height:42px!important;border:0!important;border-radius:9px!important;padding:7px 8px!important}
.drawer-icon{background:transparent!important;width:26px!important;height:26px!important}
.drawer-item.active{background:rgba(213,169,88,.11)!important;color:#e8bd6c!important;box-shadow:none!important}
.drawer-item.active .drawer-icon{background:transparent!important;color:#e8bd6c!important}

.main-workspace{grid-template-rows:minmax(0,1fr) 154px!important;background:#060708!important}
.viewport-top-right{top:12px!important;right:14px!important}
.display-modes{gap:1px!important;padding:3px!important;border:0!important;border-radius:10px!important;background:rgba(12,14,15,.72)!important;box-shadow:0 8px 24px rgba(0,0,0,.16)!important}
.mode-btn{height:28px!important;padding:0 10px!important;font-size:10px!important;font-weight:520!important}
.mode-btn.active{background:rgba(214,170,89,.16)!important;color:#efc878!important;box-shadow:inset 0 0 0 1px rgba(229,184,100,.22)!important}
.view-controls{left:12px!important;bottom:10px!important;gap:1px!important;padding:3px!important;border:0!important;background:rgba(12,14,15,.72)!important}
.view-controls .small-chip{height:27px!important;padding:0 9px!important;font-size:9.5px!important}
.view-controls .small-chip.active{background:rgba(214,170,89,.14)!important;color:#efc878!important}
.grid-toggle{width:34px!important;height:34px!important;border:0!important;border-radius:10px!important}
.grid-toggle.active{background:rgba(214,170,89,.15)!important;color:#efc878!important;box-shadow:inset 0 0 0 1px rgba(229,184,100,.2)!important}

.right-panel{grid-template-rows:190px 190px minmax(0,1fr)!important;background:#0f1112!important}
.ai-panel{padding:10px 12px!important;background:#0f1112!important}
.ai-head,.section-head{height:38px!important}
.ai-input-wrap textarea{height:64px!important;border:0!important;border-radius:10px!important;background:#17191b!important;padding:10px 38px 10px 11px!important}
.ai-mode{height:24px!important;border:0!important;background:rgba(213,169,88,.11)!important;color:#dcb366!important}
.ai-chips{margin-top:5px!important}.ai-chips button{height:22px!important;border:0!important;background:#17191b!important}
.ai-feedback{margin-top:4px!important}
.layers-panel{padding:0 10px!important}.section-head{height:42px!important}
.layer-toolbar{min-height:28px!important}
.layer-row{height:34px!important;border:0!important;border-radius:7px!important;padding-top:0!important;padding-bottom:0!important}
.layer-row.active{background:rgba(213,169,88,.105)!important;box-shadow:none!important;color:#e8bd6c!important}
.layer-row.active:before{content:"";width:2px;height:18px;border-radius:2px;background:#d5a958;position:absolute;left:0}
.layer-row{position:relative!important}
.properties-panel{padding:0 12px 12px!important}
.prop-head{height:42px!important}.selection-summary{margin-bottom:7px!important;padding:6px!important;border:0!important;background:#151719!important}
.prop-list{gap:6px!important}.prop-row{min-height:32px!important}.prop-row input,.prop-row select{height:30px!important;border:0!important;background:#17191b!important}
.axis-input{height:30px!important;border:0!important;background:#17191b!important}
.prop-block{padding-top:6px!important;border-top-color:rgba(255,255,255,.055)!important}

.timeline{background:#0d0f10!important}.timeline-toolbar{height:38px!important;padding:0 10px!important}
.timeline-title b{font-size:11px!important;font-weight:580!important}.timeline-title span{font-size:9px!important}
.timeline-actions{gap:3px!important}.timeline-actions button{height:27px!important;border:0!important;background:transparent!important;border-radius:7px!important;padding:0 8px!important}
.timeline-actions button:hover{background:rgba(255,255,255,.05)!important}
.shot-strip{min-height:56px!important;padding:7px 10px!important;gap:7px!important}
.shot-card,.shot-add{min-width:126px!important;height:50px!important;border:0!important;background:#151719!important;border-radius:9px!important}
.shot-card.active{background:rgba(213,169,88,.105)!important;box-shadow:inset 0 0 0 1px rgba(225,182,100,.2)!important}
.shot-card.active .shot-info b{color:#e8bd6c!important}

.creation-dialog{background:#121416!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:20px!important}
.creation-head,.creation-actions{border-color:rgba(255,255,255,.055)!important}
.creation-dropzone{border-color:rgba(255,255,255,.1)!important;background:#17191b!important}
.creation-primary{background:#d4a758!important;border:0!important}
::-webkit-scrollbar{width:6px!important;height:6px!important}::-webkit-scrollbar-thumb{background:#292c2e!important}

@media(max-width:1280px){
 .body-grid{grid-template-columns:54px 0 minmax(0,1fr) 300px!important}
 .body-grid.drawer-open{grid-template-columns:54px 248px minmax(0,1fr) 300px!important}
 .drawer-inner{width:248px!important}
}


/* Preview V16 · cinematic workspace redesign
   Structural visual layer only. Existing DOM IDs and editor behavior are preserved. */

.studio{grid-template-rows:52px 1fr!important;background:var(--ds-studio-canvas-deep)!important}
.topbar{
  height:52px!important;padding:0 14px 0 16px!important;
  background:linear-gradient(180deg,#101214,#0c0e0f)!important;
  border-bottom:1px solid var(--ds-studio-edge-faint)!important;
  box-shadow:0 1px 0 rgba(0,0,0,.7)!important
}
.brand{min-width:184px!important;gap:8px!important}.brand .logo{width:34px!important;height:23px!important}
.brand strong{font-size:12px!important;letter-spacing:.19em!important;color:#f0d59f!important}
.brand em{font-size:8px!important;letter-spacing:.18em!important;color:#555b57!important}
.history{padding-left:4px!important;border-left:1px solid var(--ds-studio-edge-faint)!important}
.history button{width:29px!important;height:29px!important;border-radius:7px!important}
.top-status{font-size:9px!important;color:#626863!important}
.top-actions{gap:5px!important}.top-actions button{height:30px!important;border-radius:7px!important;padding:0 11px!important;font-size:10px!important}
.top-actions .top-primary,.top-actions .top-quiet{
  background:#151719!important;border:1px solid var(--ds-studio-edge-medium)!important;color:#aeb2ae!important
}
.top-actions .top-primary:hover,.top-actions .top-quiet:hover{background:#1b1e20!important;color:#fff!important}
.close{width:28px!important;height:28px!important;font-size:19px!important}

.body-grid{grid-template-columns:50px 0 minmax(0,1fr) 286px!important;background:#08090a!important}
.body-grid.drawer-open{grid-template-columns:50px 238px minmax(0,1fr) 286px!important}
.rail{
  padding:7px 5px!important;background:#0b0d0e!important;border-right:1px solid var(--ds-studio-edge-faint)!important;
  box-shadow:1px 0 0 rgba(0,0,0,.42)!important
}
.rail-item{
  width:38px!important;height:38px!important;margin:1px 0!important;border-radius:8px!important;
  color:#666c68!important
}
.rail-item svg{width:16px!important;height:16px!important;stroke-width:1.55!important}
.rail-item:hover{background:#15181a!important;color:#d7dad6!important}
.rail-item.active{
  background:rgba(215,170,89,.13)!important;color:var(--ds-studio-accent-soft)!important;
  box-shadow:inset 2px 0 0 var(--ds-studio-accent),inset 0 0 0 1px rgba(215,170,89,.08)!important
}
.rail-item.active:after{display:none!important}

.left-drawer{
  background:#0e1011!important;border-right:1px solid transparent!important;
  box-shadow:8px 0 28px rgba(0,0,0,.18)!important
}
.body-grid.drawer-open .left-drawer{border-right-color:var(--ds-studio-edge-faint)!important}
.drawer-inner{width:238px!important;padding:12px 10px 16px!important}
.drawer-head{height:44px!important}.drawer-head small{font-size:7px!important;color:#5d625e!important}
.drawer-head h2{font-size:14px!important;font-weight:620!important;margin-top:3px!important}
.drawer-search{height:31px!important;margin:0 0 10px!important;border:1px solid var(--ds-studio-edge-faint)!important;border-radius:7px!important;background:#151719!important}
.drawer-content{gap:3px!important}.drawer-section{padding-top:4px!important}
.drawer-kicker{height:22px!important;font-size:8px!important}
.drawer-item{min-height:38px!important;padding:5px 6px!important;border-radius:7px!important}
.drawer-icon{width:24px!important;height:24px!important;border-radius:6px!important}
.drawer-item b{font-size:10px!important}.drawer-item small{font-size:8px!important}
.drawer-item.active{background:rgba(215,170,89,.105)!important;border-color:rgba(215,170,89,.16)!important;color:var(--ds-studio-accent-soft)!important}
.drawer-card,.asset-library-card,.cloud-asset-card,.character-preset{border-radius:8px!important;background:#141617!important}

.main-workspace{grid-template-rows:minmax(0,1fr) 118px!important;background:#050607!important}
.viewport{background:#030405!important;border-bottom:1px solid var(--ds-studio-edge-faint)!important}
.viewport-scene{background:radial-gradient(ellipse at 50% 42%,#111416 0,#080a0b 42%,#030405 100%)!important}
.viewport-top-right{top:9px!important;right:10px!important}
.display-modes{
  padding:3px!important;gap:1px!important;border:1px solid var(--ds-studio-edge-faint)!important;border-radius:8px!important;
  background:rgba(10,12,13,.84)!important;backdrop-filter:blur(18px)!important;box-shadow:0 8px 30px rgba(0,0,0,.34)!important
}
.mode-btn{height:25px!important;padding:0 8px!important;border-radius:5px!important;font-size:9px!important;color:#737975!important}
.mode-btn:hover{background:#171a1c!important;color:#daddd9!important}
.mode-btn.active{
  background:rgba(215,170,89,.14)!important;color:var(--ds-studio-accent-soft)!important;
  box-shadow:inset 0 0 0 1px rgba(215,170,89,.18)!important
}
.view-controls{
  left:10px!important;bottom:9px!important;padding:3px!important;gap:1px!important;border:1px solid var(--ds-studio-edge-faint)!important;
  border-radius:8px!important;background:rgba(10,12,13,.84)!important;backdrop-filter:blur(16px)!important
}
.view-controls .small-chip{height:25px!important;padding:0 8px!important;border-radius:5px!important;font-size:9px!important}
.view-controls .small-chip.active{background:rgba(215,170,89,.13)!important;color:var(--ds-studio-accent-soft)!important}
.grid-toggle{width:31px!important;height:31px!important;right:10px!important;bottom:9px!important;border-radius:8px!important}
.grid-toggle.active{
  background:rgba(215,170,89,.13)!important;color:var(--ds-studio-accent-soft)!important;
  box-shadow:inset 0 0 0 1px rgba(215,170,89,.17)!important
}
.axis-gizmo{transform:scale(.86)!important;transform-origin:top left!important}
.north-compass{transform:scale(.88)!important;transform-origin:top left!important}

.right-panel{
  grid-template-rows:158px 178px minmax(0,1fr)!important;background:#0e1011!important;
  border-left:1px solid var(--ds-studio-edge-faint)!important;box-shadow:-8px 0 28px rgba(0,0,0,.16)!important
}
.ai-panel{padding:7px 9px!important;background:#0e1011!important;border-bottom:1px solid var(--ds-studio-edge-faint)!important}
.ai-head,.section-head{height:32px!important}.ai-head small,.section-head small,.prop-head small{font-size:7px!important;color:#5c625e!important}
.ai-head h2,.section-head h2,.prop-head h2{font-size:12px!important;font-weight:620!important}
.ai-mode{height:21px!important;padding:0 7px!important;border-radius:6px!important;font-size:8px!important}
.ai-input-wrap textarea{height:52px!important;padding:8px 34px 8px 9px!important;border-radius:7px!important;background:#151719!important;font-size:9.5px!important}
.ai-input-wrap button{width:25px!important;height:25px!important;right:5px!important;bottom:5px!important;border-radius:6px!important}
.ai-chips{margin-top:4px!important;gap:3px!important}.ai-chips button{height:19px!important;padding:0 6px!important;border-radius:5px!important;font-size:7.5px!important}
.ai-feedback{font-size:7.5px!important;margin-top:3px!important}
.layers-panel{padding:0 8px!important;border-bottom:1px solid var(--ds-studio-edge-faint)!important}
.section-head{height:34px!important}.head-actions button{width:25px!important;height:25px!important;border-radius:6px!important;background:#151719!important}
.layer-toolbar{min-height:24px!important;font-size:8px!important}
.layer-toolbar button{font-size:8px!important}
.layer-list{gap:1px!important}.layer-folder-row,.layer-row{font-size:9px!important}
.layer-row{height:28px!important;border-radius:5px!important;padding-left:4px!important;padding-right:4px!important}
.layer-row b{font-size:9px!important}.layer-state{font-size:7px!important}
.layer-row.active{
  background:rgba(215,170,89,.105)!important;color:var(--ds-studio-accent-soft)!important;
  box-shadow:inset 2px 0 0 var(--ds-studio-accent)!important
}
.layer-row.active:before{display:none!important}
.properties-panel{padding:0 9px 10px!important;background:#0e1011!important}
.prop-head{height:34px!important}.selection-summary{margin-bottom:5px!important;padding:5px!important;border-radius:6px!important;background:#141617!important}
.selection-symbol{width:28px!important;height:28px!important;border-radius:6px!important}
.selection-summary small,.selection-summary em{font-size:7px!important}.selection-summary b{font-size:9px!important}
.selection-status{height:18px!important;font-size:7px!important}
.prop-list{gap:4px!important}.prop-row{min-height:27px!important;grid-template-columns:66px 1fr!important;gap:5px!important}
.prop-row>span,.prop-slider>span{font-size:8.5px!important}
.prop-row input,.prop-row select,.axis-input{height:27px!important;border-radius:6px!important;background:#151719!important;font-size:9px!important;padding:0 7px!important}
.quick-actions{gap:3px!important}.quick-actions button{min-height:26px!important;border-radius:6px!important;font-size:7.5px!important}
.prop-slider{min-height:27px!important;grid-template-columns:66px minmax(0,1fr) 42px!important;gap:5px!important}
.prop-slider output{height:25px!important;border-radius:6px!important;font-size:8px!important}
.rig-note{padding:7px!important;border-radius:6px!important}.rig-note b{font-size:8px!important}.rig-note span{font-size:7px!important}

.timeline{background:#0b0d0e!important;border-top:0!important}
.timeline-toolbar{height:31px!important;padding:0 8px!important;border-bottom:1px solid var(--ds-studio-edge-faint)!important}
.timeline-title b{font-size:9.5px!important}.timeline-title span{font-size:7.5px!important;margin-left:6px!important}
.timeline-actions{gap:2px!important}.timeline-actions button{height:23px!important;padding:0 6px!important;border-radius:5px!important;font-size:8px!important}
.shot-strip{min-height:0!important;height:87px!important;padding:7px 8px!important;gap:5px!important;align-items:center!important}
.shot-card,.shot-add{
  min-width:112px!important;width:112px!important;height:64px!important;border-radius:7px!important;
  background:#141617!important;border:1px solid var(--ds-studio-edge-faint)!important
}
.shot-card.active,.camera-shot-add{
  background:rgba(215,170,89,.095)!important;border-color:rgba(215,170,89,.24)!important;
  box-shadow:inset 0 -2px 0 var(--ds-studio-accent)!important
}

.creation-dialog{background:#101214!important;border-color:var(--ds-studio-edge-medium)!important;border-radius:14px!important}
.creation-head{padding:17px 18px 14px!important}.creation-upload{padding:14px 18px 7px!important}
.creation-actions{padding:12px 18px 16px!important}.creation-dropzone{background:#151719!important;border-radius:9px!important}
.creation-primary{background:var(--ds-studio-accent)!important;color:#17130d!important}
button.active,[aria-pressed="true"]{}
input[type="range"],input[type="checkbox"],input[type="radio"]{accent-color:var(--ds-studio-accent)!important}
::-webkit-scrollbar{width:5px!important;height:5px!important}::-webkit-scrollbar-thumb{background:#25292b!important;border-radius:8px!important}

@media(max-width:1280px){
  .body-grid{grid-template-columns:48px 0 minmax(0,1fr) 276px!important}
  .body-grid.drawer-open{grid-template-columns:48px 224px minmax(0,1fr) 276px!important}
  .drawer-inner{width:224px!important}
  .rail-item{width:36px!important;height:36px!important}
  .right-panel{grid-template-rows:154px 170px minmax(0,1fr)!important}
}


/* Preview V17 · reference-layout rebuild
   Matches the approved mockup structurally: top tool navigation, left scene tree,
   center viewport, right inspector, bottom shot strip. */
.studio{grid-template-rows:58px 1fr!important}
.topbar{height:58px!important;padding-left:18px!important;background:#0b0e10!important}
.brand{min-width:215px!important}.brand strong{font-size:15px!important}.brand em{font-size:9px!important}
.history{order:8;margin-left:auto!important;border:0!important}.top-status{display:none!important}
.top-actions{order:9;margin-left:10px!important}
.top-actions .top-primary,.top-actions .top-quiet{height:32px!important}
.body-grid{
  position:relative!important;display:grid!important;
  grid-template-columns:220px minmax(0,1fr) 300px!important;
  grid-template-rows:minmax(0,1fr)!important;background:#080b0d!important
}
.rail{
  position:fixed!important;z-index:80!important;left:225px!important;top:0!important;height:58px!important;
  width:auto!important;min-height:0!important;display:flex!important;flex-direction:row!important;align-items:center!important;
  gap:3px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important
}
.rail-spacer,.rail [data-tool="help"],.rail [data-tool="settings"]{display:none!important}
.rail-item{
  width:auto!important;height:38px!important;margin:0!important;padding:0 12px!important;border-radius:8px!important;
  display:flex!important;gap:7px!important;color:#b7bbb8!important
}
.rail-item:after{content:attr(title)!important;position:static!important;width:auto!important;height:auto!important;background:none!important;font-size:11px!important}
.rail-item.active{background:#252c31!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important}
.rail-item.active svg{color:var(--ds-studio-accent-soft)!important}
.rail-item svg{width:17px!important;height:17px!important}

.right-panel{display:contents!important}
.layers-panel{
  grid-column:1!important;grid-row:1!important;display:block!important;min-height:0!important;overflow:auto!important;
  padding:12px 10px!important;background:linear-gradient(180deg,#101417,#0b0e10)!important;
  border:0!important;border-right:1px solid rgba(255,255,255,.075)!important
}
.layers-panel:before{
  content:"场景图层";display:block;height:35px;padding:4px 7px 0;color:#f1f1ed;font-size:14px;font-weight:650;
  letter-spacing:.02em
}
.layers-panel .section-head{height:34px!important}.layers-panel .section-head small{display:none!important}
.layers-panel .section-head h2{font-size:10px!important;color:#777d79!important;font-weight:500!important}
.layer-toolbar{height:28px!important;border-top:1px solid rgba(255,255,255,.05)!important}
.layer-folder-row{height:31px!important;border-radius:6px!important}.layer-row{height:31px!important}
.layer-row.active{background:#303943!important;color:#fff!important;box-shadow:none!important}
.layer-row.active .layer-icon{color:var(--ds-studio-accent-soft)!important}
.ps-layers{padding-bottom:80px!important}

.main-workspace{
  grid-column:2!important;grid-row:1!important;min-width:0!important;
  grid-template-rows:minmax(0,1fr) 142px!important;background:#050708!important
}
.viewport{margin:10px 10px 0!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:11px 11px 0 0!important;overflow:hidden!important}
.viewport-scene{background:radial-gradient(ellipse at 50% 40%,#151a1d 0,#090c0e 52%,#040506 100%)!important}
.display-modes{top:12px!important;right:12px!important;background:rgba(13,17,19,.88)!important}
.view-controls{left:12px!important;bottom:12px!important;background:rgba(13,17,19,.9)!important}
.timeline{margin:0 10px 10px!important;border:1px solid rgba(255,255,255,.075)!important;border-top:0!important;border-radius:0 0 11px 11px!important;background:#0d1113!important}
.timeline-toolbar{height:38px!important}.shot-strip{height:102px!important;padding:8px!important}
.shot-card,.shot-add{height:78px!important;width:132px!important;min-width:132px!important}
.shot-card.active{border-color:var(--ds-studio-accent)!important;box-shadow:inset 0 0 0 1px rgba(215,170,89,.24)!important}
.shot-add{border-color:rgba(215,170,89,.5)!important;color:#d8b56f!important}

.ai-panel{
  grid-column:3!important;grid-row:1!important;align-self:start!important;z-index:4!important;
  height:116px!important;margin:10px 10px 0 0!important;padding:8px 10px!important;
  border:1px solid rgba(255,255,255,.075)!important;border-radius:10px!important;background:#111518!important
}
.ai-head{height:27px!important}.ai-head small{display:none!important}.ai-head h2{font-size:11px!important}
.ai-input-wrap textarea{height:43px!important}.ai-chips,.ai-feedback{display:none!important}
.properties-panel{
  grid-column:3!important;grid-row:1!important;align-self:stretch!important;min-height:0!important;
  margin:136px 10px 10px 0!important;padding:0 11px 12px!important;
  border:1px solid rgba(255,255,255,.075)!important;border-radius:10px!important;background:#111518!important
}
.properties-panel .handle{display:none!important}.prop-head{height:45px!important;border-bottom:1px solid rgba(255,255,255,.055)!important}
.properties-panel .selection-summary{margin-top:8px!important}
.right-resizer{display:none!important}

.left-drawer{
  position:fixed!important;z-index:100!important;left:0!important;top:58px!important;bottom:0!important;width:260px!important;
  background:#101417!important;box-shadow:18px 0 45px rgba(0,0,0,.55)!important
}
.body-grid.drawer-open{grid-template-columns:220px minmax(0,1fr) 300px!important}
.body-grid.drawer-open .left-drawer{opacity:1!important;transform:none!important;pointer-events:auto!important}
.drawer-inner{width:260px!important}

.top-actions #createWorldBtn{background:var(--ds-studio-accent)!important;color:#17130d!important;border-color:var(--ds-studio-accent)!important}
.top-actions #createCharacterBtn,.top-actions #createCameraBtn{background:#171b1e!important;color:#d4d7d3!important}
.mode-btn.active,.small-chip.active,.grid-toggle.active,.drawer-item.active,.camera-shot-add{
  color:var(--ds-studio-accent-soft)!important;border-color:rgba(215,170,89,.35)!important
}

@media(max-width:1280px){
 .body-grid,.body-grid.drawer-open{grid-template-columns:200px minmax(0,1fr) 270px!important}
 .rail{left:205px!important}
 .rail-item{padding:0 8px!important}.rail-item:after{font-size:10px!important}
 .ai-panel{grid-column:3!important}.properties-panel{grid-column:3!important}
}


/* Preview V18 · approved visual language
   Deep blue-black gradient, glass panels, soft separators and restrained gold accents. */

html,body{background:#070b0e!important}
.studio{
 background:
 radial-gradient(1000px 620px at 76% 8%,rgba(87,111,128,.32),transparent 62%),
 radial-gradient(700px 500px at 18% 100%,rgba(104,79,45,.12),transparent 64%),
 linear-gradient(135deg,var(--ds-studio-cinematic-bg-0) 0%,var(--ds-studio-cinematic-bg-1) 44%,var(--ds-studio-cinematic-bg-2) 100%)!important
}
.topbar{
 background:linear-gradient(90deg,rgba(5,8,10,.96),rgba(21,31,39,.88) 58%,rgba(45,59,69,.76))!important;
 border-bottom:1px solid rgba(255,255,255,.06)!important;box-shadow:0 14px 38px rgba(0,0,0,.20)!important
}
.brand .logo{background:linear-gradient(145deg,#f1ca7f,#c78f42)!important}
.brand strong{color:#f4f2eb!important;text-shadow:0 1px 18px rgba(255,255,255,.05)!important}
.brand em{color:#9a9e9b!important}
.rail-item{color:#d0d3d1!important}.rail-item.active{
 background:linear-gradient(180deg,rgba(84,99,111,.52),rgba(49,60,68,.52))!important;
 border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 8px 24px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.06)!important
}
.body-grid{background:transparent!important;gap:8px!important;padding:8px 10px 10px 10px!important}
.layers-panel,.ai-panel,.properties-panel,.timeline{
 background:linear-gradient(145deg,rgba(21,27,31,.88),rgba(13,18,21,.80))!important;
 border:1px solid var(--ds-studio-edge-ref)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.025),0 18px 44px rgba(0,0,0,.20)!important;
 backdrop-filter:blur(22px) saturate(118%)!important;-webkit-backdrop-filter:blur(22px) saturate(118%)!important
}
.layers-panel{border-radius:12px!important;padding-top:10px!important}
.layers-panel:before{font-size:13px!important;color:#f0f1ee!important}
.layer-folder-row,.layer-row{color:#c8ccca!important}
.layer-folder-row:hover,.layer-row:hover{background:rgba(255,255,255,.035)!important}
.layer-row.active{
 background:linear-gradient(90deg,rgba(79,96,110,.65),rgba(56,70,81,.50))!important;
 color:#fff!important;border:1px solid rgba(255,255,255,.07)!important
}
.layer-row.active .layer-icon{color:var(--ds-studio-accent-ref-hi)!important}
.layer-eye,.folder-toggle,.folder-icon{color:#d7d9d7!important}
.main-workspace{background:transparent!important;gap:0!important}
.viewport{
 margin:0!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;
 box-shadow:0 20px 55px rgba(0,0,0,.28)!important;background:#080d10!important
}
.viewport-scene{background:radial-gradient(ellipse at 52% 35%,#24313a 0,#10181e 34%,#080c0f 72%,#050708 100%)!important}
.display-modes,.view-controls{
 background:linear-gradient(180deg,rgba(44,57,67,.82),rgba(27,35,41,.80))!important;
 border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 8px 26px rgba(0,0,0,.25)!important
}
.mode-btn,.small-chip{color:#e1e3e1!important}
.mode-btn.active,.small-chip.active{
 background:rgba(255,255,255,.095)!important;color:#fff!important;
 border-color:rgba(228,185,104,.48)!important;box-shadow:inset 0 -2px var(--ds-studio-accent-ref)!important
}
.grid-toggle{background:rgba(27,35,41,.84)!important;border:1px solid rgba(255,255,255,.12)!important}
.grid-toggle.active{color:var(--ds-studio-accent-ref-hi)!important}
.ai-panel{margin:0!important;border-radius:12px!important}
.properties-panel{margin:126px 0 0!important;border-radius:12px!important}
.ai-input-wrap textarea,.prop-row input,.prop-row select,.axis-input,.prop-slider output{
 background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.09)!important;color:#f0f1ef!important
}
.selection-summary,.rig-note,.subsection{background:rgba(255,255,255,.025)!important;border-color:rgba(255,255,255,.06)!important}
.timeline{margin:8px 0 0!important;border-radius:12px!important}
.timeline-toolbar{background:rgba(255,255,255,.012)!important}
.shot-card,.shot-add{background:linear-gradient(145deg,rgba(37,45,50,.86),rgba(22,28,32,.86))!important;border-color:rgba(255,255,255,.10)!important}
.shot-card.active,.shot-add:first-of-type{
 border-color:var(--ds-studio-accent-ref)!important;box-shadow:0 0 0 1px rgba(228,185,104,.16),0 12px 28px rgba(0,0,0,.18)!important
}
.top-actions #createWorldBtn{
 background:linear-gradient(180deg,#efc97f,#d7a756)!important;border-color:#edc476!important;
 box-shadow:0 6px 20px rgba(210,157,73,.18)!important;color:#17130d!important
}
.top-actions #createCharacterBtn,.top-actions #createCameraBtn{
 background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.10)!important;color:#e5e7e4!important
}
.drawer-inner,.left-drawer{background:linear-gradient(160deg,rgba(22,29,34,.98),rgba(11,15,18,.98))!important}
.creation-dialog{background:linear-gradient(145deg,#182026,#0e1317)!important;box-shadow:0 35px 100px rgba(0,0,0,.55)!important}
.creation-dropzone{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.11)!important}
.creation-primary{background:linear-gradient(180deg,#efc97f,#d7a756)!important}
@media(max-width:1280px){.body-grid{gap:6px!important;padding:6px 8px 8px!important}.properties-panel{margin-top:126px!important}}


/* Preview V19 · airy blurred gradient + strict white/gold state language */
html,body{background:#101820!important}
.studio{position:relative;isolation:isolate;background:
 linear-gradient(118deg,#080d11 0%,#101a21 34%,#283944 68%,#465762 100%)!important}
.studio:before,.studio:after{
 content:"";position:absolute;z-index:-2;pointer-events:none;border-radius:50%;filter:blur(95px);opacity:.72
}
.studio:before{width:68vw;height:52vw;right:-12vw;top:-24vw;background:radial-gradient(circle,#8395a0 0%,#566c79 30%,rgba(57,76,88,.25) 60%,transparent 74%)}
.studio:after{width:58vw;height:45vw;left:13vw;bottom:-31vw;background:radial-gradient(circle,rgba(199,169,119,.30) 0%,rgba(103,113,113,.18) 36%,transparent 72%)}
.topbar,.body-grid{position:relative;z-index:1}
.topbar{background:linear-gradient(90deg,rgba(7,11,14,.90),rgba(24,36,45,.73) 58%,rgba(78,94,105,.56))!important;backdrop-filter:blur(30px) saturate(120%)!important}
.body-grid{background:transparent!important}
.layers-panel,.ai-panel,.properties-panel,.timeline{
 background:linear-gradient(145deg,rgba(17,23,27,.74),rgba(13,18,22,.61))!important;
 backdrop-filter:blur(30px) saturate(125%)!important;-webkit-backdrop-filter:blur(30px) saturate(125%)!important;
 border-color:rgba(255,255,255,.11)!important
}
.viewport{background:rgba(7,11,14,.64)!important}
.viewport-scene{background:radial-gradient(ellipse at 52% 32%,rgba(61,78,89,.76) 0%,rgba(24,34,41,.86) 38%,rgba(8,13,17,.95) 78%)!important}

/* Default UI text is white/light; gold means active/selected/enabled only. */
.topbar button,.rail-item,.drawer-item,.mode-btn,.small-chip,.grid-toggle,
.timeline button,.layer-folder-row,.layer-row,.head-actions button,.layer-toolbar button,
.ai-mode,.ai-chips button,.quick-actions button,.prop-row,.prop-row input,.prop-row select,
.prop-slider,.creation-dialog button{color:#eef1ef!important}
.drawer-item small,.layer-state,.folder-count,.timeline-title span,.shot-info small,
.ai-feedback,.prop-row>span,.prop-slider>span,.selection-summary small,.selection-summary em,
.rig-note span,.creation-dialog small{color:#9fa7a4!important}
.brand strong,.drawer-head h2,.section-head h2,.prop-head h2,.ai-head h2,.timeline-title b,
.layer-folder-row b,.layer-row b,.shot-info b,.selection-summary b{color:#f5f6f3!important}

.rail-item.active,.drawer-item.active,.mode-btn.active,.small-chip.active,.grid-toggle.active,
.layer-row.active,.shot-card.active,.camera-shot-add,
button[aria-pressed="true"],.creation-primary{
 color:var(--ds-studio-accent-ref-hi)!important
}
.rail-item.active svg,.drawer-item.active svg,.mode-btn.active svg,.small-chip.active svg,
.grid-toggle.active svg,.layer-row.active .layer-icon,.layer-row.active b,.shot-card.active b{
 color:var(--ds-studio-accent-ref-hi)!important;stroke:currentColor!important
}
.rail-item.active:after{color:var(--ds-studio-accent-ref-hi)!important}
.mode-btn.active,.small-chip.active{background:rgba(228,185,104,.08)!important;border-color:rgba(228,185,104,.30)!important}
.layer-row.active{background:rgba(228,185,104,.075)!important;border-color:rgba(228,185,104,.18)!important;box-shadow:inset 2px 0 0 var(--ds-studio-accent-ref)!important}
.rail-item.active{background:rgba(228,185,104,.08)!important;border-color:rgba(228,185,104,.20)!important}
.top-actions #createWorldBtn{color:#17130d!important}
.top-actions #createCharacterBtn,.top-actions #createCameraBtn{color:#f1f3f1!important}


/* Preview V20 · cool airy reference background */
html,body{background:#17212b!important}
.studio{
 background:
 radial-gradient(ellipse at 83% 4%,rgba(190,207,220,.88) 0%,rgba(139,163,181,.62) 22%,rgba(83,111,132,.34) 43%,transparent 66%),
 radial-gradient(ellipse at 48% 102%,rgba(191,177,155,.30) 0%,rgba(116,128,137,.18) 35%,transparent 64%),
 linear-gradient(118deg,#101820 0%,#1d2a35 38%,#405665 72%,#6f8492 100%)!important
}
.studio:before{width:72vw!important;height:58vw!important;right:-14vw!important;top:-28vw!important;opacity:.88!important;filter:blur(115px)!important;background:radial-gradient(circle,rgba(221,231,237,.96) 0%,rgba(160,184,201,.72) 27%,rgba(94,128,151,.30) 55%,transparent 75%)!important}
.studio:after{width:66vw!important;height:48vw!important;left:8vw!important;bottom:-34vw!important;opacity:.58!important;filter:blur(125px)!important;background:radial-gradient(circle,rgba(210,192,164,.48) 0%,rgba(147,148,142,.18) 38%,transparent 72%)!important}
.topbar{background:linear-gradient(90deg,rgba(10,15,20,.86),rgba(34,49,60,.67) 55%,rgba(91,111,124,.48))!important}
.layers-panel,.ai-panel,.properties-panel,.timeline{
 background:linear-gradient(145deg,rgba(24,31,37,.68),rgba(13,19,24,.57))!important;
 border-color:rgba(225,235,241,.13)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.035),0 16px 42px rgba(0,0,0,.16)!important
}
.viewport-scene{background:radial-gradient(ellipse at 52% 31%,#526977 0%,#2a3b46 31%,#142029 62%,#0b1116 100%)!important}


/* Preview V21 · liquid-glass visual pass; layout and interaction unchanged */

html,body{background:#172331!important}
.studio{
 background:
 radial-gradient(ellipse 72% 68% at 82% 4%,rgba(207,224,238,.92),rgba(139,174,201,.54) 31%,transparent 68%),
 radial-gradient(ellipse 62% 70% at 13% 90%,rgba(139,156,177,.42),rgba(67,88,110,.20) 42%,transparent 72%),
 radial-gradient(ellipse 54% 44% at 55% 112%,rgba(230,204,166,.30),transparent 68%),
 linear-gradient(126deg,#111c28 0%,#26394b 43%,#718a9c 100%)!important
}
.studio:before{background:radial-gradient(circle,rgba(237,246,252,.95),rgba(172,204,227,.54) 35%,transparent 72%)!important;filter:blur(145px)!important;opacity:.82!important}
.studio:after{background:radial-gradient(circle,rgba(230,211,182,.36),rgba(138,157,173,.16) 40%,transparent 72%)!important;filter:blur(150px)!important}
.topbar{
 background:linear-gradient(90deg,rgba(10,17,24,.67),rgba(45,65,81,.42),rgba(117,139,154,.34))!important;
 border-color:rgba(255,255,255,.13)!important;backdrop-filter:blur(38px) saturate(145%)!important;
 -webkit-backdrop-filter:blur(38px) saturate(145%)!important
}
.layers-panel,.ai-panel,.properties-panel,.timeline,.display-modes,.view-controls,.grid-toggle,.left-drawer,.creation-dialog{
 background:linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.045) 48%,rgba(8,16,23,.20))!important;
 border:1px solid var(--ds-studio-liquid-edge)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.035),0 18px 48px rgba(3,10,16,.18)!important;
 backdrop-filter:blur(34px) saturate(155%) brightness(1.06)!important;
 -webkit-backdrop-filter:blur(34px) saturate(155%) brightness(1.06)!important
}
.layers-panel,.ai-panel,.properties-panel,.timeline{border-radius:14px!important}
.viewport{
 border-color:rgba(255,255,255,.18)!important;box-shadow:inset 0 1px rgba(255,255,255,.10),0 20px 60px rgba(3,9,14,.20)!important
}
.viewport-scene{background:radial-gradient(ellipse at 50% 28%,#668295 0%,#344b5d 32%,#192a38 63%,#0d1720 100%)!important}
.drawer-search,.ai-input-wrap textarea,.prop-row input,.prop-row select,.axis-input,.prop-slider output,
.selection-summary,.rig-note,.drawer-card,.asset-library-card,.cloud-asset-card,.character-preset,.shot-card,.shot-add{
 background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035))!important;
 border-color:rgba(255,255,255,.13)!important;box-shadow:inset 0 1px rgba(255,255,255,.055)!important
}
.topbar button,.rail-item,.drawer-item,.mode-btn,.small-chip,.grid-toggle,.timeline button,
.layer-folder-row,.layer-row,.head-actions button,.layer-toolbar button,.ai-mode,.ai-chips button,
.quick-actions button,.prop-row,.prop-row input,.prop-row select,.prop-slider,.creation-dialog button{
 color:var(--ds-studio-liquid-white)!important
}
.drawer-item small,.layer-state,.folder-count,.timeline-title span,.shot-info small,.ai-feedback,
.prop-row>span,.prop-slider>span,.selection-summary small,.selection-summary em,.rig-note span{color:var(--ds-studio-liquid-muted)!important}
.rail-item.active,.drawer-item.active,.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,
.shot-card.active,.camera-shot-add,button[aria-pressed="true"]{color:var(--ds-studio-liquid-accent)!important}
.rail-item.active svg,.drawer-item.active svg,.mode-btn.active svg,.small-chip.active svg,.grid-toggle.active svg,
.layer-row.active .layer-icon,.layer-row.active b,.shot-card.active b{color:var(--ds-studio-liquid-accent)!important;stroke:currentColor!important}
.rail-item.active,.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,.shot-card.active{
 background:linear-gradient(145deg,rgba(239,201,120,.16),rgba(255,255,255,.055))!important;
 border-color:rgba(239,201,120,.42)!important;box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 22px rgba(239,201,120,.07)!important
}
.top-actions #createWorldBtn{background:linear-gradient(180deg,#f4d38d,#dfb15d)!important;color:#18130c!important;border-color:rgba(255,226,164,.85)!important}
.top-actions #createCharacterBtn,.top-actions #createCameraBtn{background:rgba(255,255,255,.075)!important;color:#fff!important;border-color:rgba(255,255,255,.15)!important}


/* Preview V22 · sky-blue luminous glass; visual only */

html,body{background:#79bdf2!important}
.studio{
 background:
 radial-gradient(ellipse 52% 46% at 79% 12%,rgba(230,247,255,.98) 0%,rgba(183,225,255,.78) 28%,rgba(133,198,244,.30) 57%,transparent 76%),
 radial-gradient(ellipse 48% 52% at 24% 72%,rgba(191,226,255,.76) 0%,rgba(111,181,236,.32) 48%,transparent 76%),
 radial-gradient(ellipse 45% 38% at 60% 100%,rgba(255,239,212,.30) 0%,rgba(174,215,245,.20) 48%,transparent 74%),
 linear-gradient(128deg,#4f92c9 0%,#78b8e9 38%,#a9d5f5 72%,#d2eaff 100%)!important
}
.studio:before{
 width:62vw!important;height:50vw!important;right:-5vw!important;top:-22vw!important;
 background:radial-gradient(circle,rgba(248,253,255,.98) 0%,rgba(207,237,255,.90) 22%,rgba(142,205,249,.48) 48%,transparent 73%)!important;
 filter:blur(92px)!important;opacity:.98!important
}
.studio:after{
 width:58vw!important;height:48vw!important;left:-12vw!important;bottom:-26vw!important;
 background:radial-gradient(circle,rgba(214,239,255,.86) 0%,rgba(128,191,239,.42) 38%,transparent 72%)!important;
 filter:blur(105px)!important;opacity:.88!important
}
.topbar{
 background:linear-gradient(90deg,rgba(21,53,79,.58),rgba(78,133,174,.38),rgba(180,218,243,.28))!important;
 border-bottom-color:rgba(232,247,255,.24)!important
}
.layers-panel,.ai-panel,.properties-panel,.timeline,.display-modes,.view-controls,.grid-toggle,.left-drawer,.creation-dialog{
 background:linear-gradient(145deg,rgba(18,43,63,.52),rgba(31,70,99,.34) 52%,rgba(105,161,201,.22))!important;
 border:1px solid var(--ds-studio-glass-edge)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(194,228,250,.08),0 18px 44px rgba(24,73,108,.18)!important;
 backdrop-filter:blur(28px) saturate(135%)!important;-webkit-backdrop-filter:blur(28px) saturate(135%)!important
}
.layers-panel{background:linear-gradient(150deg,rgba(15,39,58,.58),rgba(53,98,130,.32))!important}
.ai-panel{background:linear-gradient(150deg,rgba(29,62,86,.48),rgba(84,133,168,.27))!important}
.properties-panel{background:linear-gradient(150deg,rgba(19,48,70,.55),rgba(64,112,147,.29))!important}
.timeline{background:linear-gradient(110deg,rgba(18,44,64,.56),rgba(66,116,151,.29),rgba(123,171,204,.20))!important}
.layers-panel,.ai-panel,.properties-panel,.timeline{outline:1px solid rgba(255,255,255,.035)!important;outline-offset:-3px!important}
.viewport{border-color:rgba(226,244,255,.30)!important;box-shadow:0 18px 48px rgba(24,73,108,.20),inset 0 1px rgba(255,255,255,.16)!important}
.viewport-scene{background:radial-gradient(ellipse at 52% 25%,#8ec9f1 0%,#5793bf 31%,#2f5e80 63%,#17384f 100%)!important}
.drawer-search,.ai-input-wrap textarea,.prop-row input,.prop-row select,.axis-input,.prop-slider output,
.selection-summary,.rig-note,.drawer-card,.asset-library-card,.cloud-asset-card,.character-preset,.shot-card,.shot-add{
 background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(174,220,250,.055))!important;
 border-color:rgba(226,244,255,.20)!important
}


/* Preview V23 · exact reference glass treatment; no layout changes */

html,body{background:#314757!important}
.studio{
 background:
 radial-gradient(ellipse 44% 54% at 88% 5%,rgba(195,219,235,.68) 0%,rgba(132,166,190,.34) 38%,transparent 72%),
 radial-gradient(ellipse 34% 46% at 72% 96%,rgba(190,176,154,.22) 0%,transparent 72%),
 linear-gradient(118deg,#090e12 0%,#121b22 28%,#263845 57%,#627f92 82%,#91adbd 100%)!important
}
.studio:before{
 width:48vw!important;height:44vw!important;right:-9vw!important;top:-21vw!important;
 background:radial-gradient(circle,rgba(224,237,245,.68) 0%,rgba(159,190,210,.36) 34%,transparent 72%)!important;
 filter:blur(125px)!important;opacity:.82!important
}
.studio:after{
 width:45vw!important;height:38vw!important;left:33vw!important;bottom:-28vw!important;
 background:radial-gradient(circle,rgba(207,190,165,.24) 0%,rgba(129,149,160,.10) 43%,transparent 72%)!important;
 filter:blur(135px)!important;opacity:.72!important
}
.topbar{
 background:linear-gradient(90deg,rgba(5,8,10,.93),rgba(21,31,38,.79) 56%,rgba(78,96,108,.58))!important;
 border-bottom:1px solid rgba(255,255,255,.07)!important;
 backdrop-filter:blur(24px) saturate(110%)!important;-webkit-backdrop-filter:blur(24px) saturate(110%)!important
}
.layers-panel,.ai-panel,.properties-panel,.timeline{
 background:linear-gradient(145deg,rgba(20,26,30,.78),rgba(20,27,31,.62))!important;
 border:1px solid var(--ds-studio-edge-ref)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.045),0 16px 40px rgba(0,0,0,.18)!important;
 backdrop-filter:blur(24px) saturate(115%)!important;-webkit-backdrop-filter:blur(24px) saturate(115%)!important
}
.layers-panel{background:linear-gradient(145deg,rgba(10,15,18,.82),rgba(22,29,33,.68))!important}
.properties-panel{background:linear-gradient(145deg,rgba(37,43,46,.66),rgba(23,29,32,.60))!important}
.timeline{background:linear-gradient(100deg,rgba(15,20,23,.76),rgba(37,43,46,.56))!important}
.ai-panel{background:linear-gradient(145deg,rgba(33,41,46,.66),rgba(21,28,32,.58))!important}
.display-modes,.view-controls,.grid-toggle{
 background:rgba(28,38,45,.76)!important;border:1px solid rgba(255,255,255,.10)!important;
 backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important
}
.viewport{border-color:rgba(255,255,255,.12)!important;box-shadow:0 16px 42px rgba(0,0,0,.20)!important}
.viewport-scene{background:radial-gradient(ellipse at 50% 30%,#536b7a 0%,#2d414e 34%,#17252e 65%,#0c1419 100%)!important}
.drawer-search,.ai-input-wrap textarea,.prop-row input,.prop-row select,.axis-input,.prop-slider output,
.selection-summary,.rig-note,.drawer-card,.asset-library-card,.cloud-asset-card,.character-preset,.shot-card,.shot-add{
 background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.085)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.025)!important
}
.topbar button,.rail-item,.drawer-item,.mode-btn,.small-chip,.grid-toggle,.timeline button,
.layer-folder-row,.layer-row,.head-actions button,.layer-toolbar button,.ai-mode,.ai-chips button,
.quick-actions button,.prop-row,.prop-row input,.prop-row select,.prop-slider,.creation-dialog button{
 color:var(--ds-studio-cinematic-text)!important
}
.drawer-item small,.layer-state,.folder-count,.timeline-title span,.shot-info small,.ai-feedback,
.prop-row>span,.prop-slider>span,.selection-summary small,.selection-summary em,.rig-note span{color:var(--ds-studio-cinematic-muted)!important}
.rail-item.active,.drawer-item.active,.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,
.shot-card.active,.camera-shot-add,button[aria-pressed="true"]{color:var(--ds-studio-accent)!important}
.rail-item.active svg,.drawer-item.active svg,.mode-btn.active svg,.small-chip.active svg,.grid-toggle.active svg,
.layer-row.active .layer-icon,.layer-row.active b,.shot-card.active b{color:var(--ds-studio-accent)!important;stroke:currentColor!important}
.rail-item.active,.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,.shot-card.active{
 background:rgba(229,187,112,.075)!important;border-color:rgba(229,187,112,.30)!important;
 box-shadow:inset 0 0 0 1px rgba(229,187,112,.035)!important
}


/* Preview V24 · reference background/glass correction only; layout untouched */
html,body{background:#101820!important}
.studio{
 background:
 radial-gradient(ellipse 58% 78% at 103% 12%,rgba(151,177,195,.72) 0%,rgba(98,126,145,.40) 32%,rgba(55,77,91,.16) 57%,transparent 76%),
 radial-gradient(ellipse 40% 42% at 89% 91%,rgba(194,177,151,.25) 0%,rgba(129,127,119,.10) 40%,transparent 72%),
 linear-gradient(112deg,#080c0f 0%,#0e151a 24%,#18232b 47%,#2e414d 69%,#617785 100%)!important
}
.studio:before{
 width:48vw!important;height:58vw!important;right:-19vw!important;top:-25vw!important;
 background:radial-gradient(circle,rgba(198,217,229,.72) 0%,rgba(140,169,187,.37) 34%,rgba(89,116,133,.10) 57%,transparent 73%)!important;
 filter:blur(118px)!important;opacity:.84!important
}
.studio:after{
 width:39vw!important;height:34vw!important;right:-8vw!important;left:auto!important;bottom:-18vw!important;
 background:radial-gradient(circle,rgba(211,192,164,.28) 0%,rgba(152,145,132,.11) 38%,transparent 72%)!important;
 filter:blur(112px)!important;opacity:.72!important
}
.topbar{
 background:linear-gradient(90deg,rgba(5,8,10,.94) 0%,rgba(15,23,29,.86) 42%,rgba(58,73,83,.66) 78%,rgba(100,116,126,.52) 100%)!important
}
.layers-panel{
 background:linear-gradient(145deg,rgba(8,12,15,.86),rgba(18,24,28,.70))!important
}
.ai-panel,.properties-panel{
 background:linear-gradient(145deg,rgba(49,54,56,.62),rgba(25,31,34,.61))!important
}
.timeline{
 background:linear-gradient(100deg,rgba(12,17,20,.80),rgba(29,35,38,.64),rgba(62,65,63,.48))!important
}
.layers-panel,.ai-panel,.properties-panel,.timeline{
 border:1px solid rgba(255,255,255,.105)!important;
 backdrop-filter:blur(26px) saturate(108%)!important;-webkit-backdrop-filter:blur(26px) saturate(108%)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 42px rgba(0,0,0,.17)!important
}


/* Preview V25 · restrained black + warm-gold halo glass; layout untouched */

html,body{background:#090b0d!important}
.studio{
 background:
 radial-gradient(ellipse 42% 58% at 92% 8%,rgba(216,167,93,.24) 0%,rgba(170,121,60,.115) 32%,rgba(99,73,43,.035) 56%,transparent 74%),
 radial-gradient(ellipse 34% 38% at 82% 92%,rgba(224,177,105,.19) 0%,rgba(153,108,55,.075) 42%,transparent 73%),
 radial-gradient(ellipse 28% 42% at 8% 55%,rgba(184,132,65,.08) 0%,transparent 72%),
 linear-gradient(112deg,#050708 0%,#090c0e 32%,#111619 61%,#1b1e1f 100%)!important
}
.studio:before{
 width:38vw!important;height:46vw!important;right:-13vw!important;top:-21vw!important;
 background:radial-gradient(circle,rgba(239,196,125,.28) 0%,rgba(196,143,73,.13) 34%,transparent 72%)!important;
 filter:blur(125px)!important;opacity:.86!important
}
.studio:after{
 width:34vw!important;height:31vw!important;right:-8vw!important;left:auto!important;bottom:-17vw!important;
 background:radial-gradient(circle,rgba(232,185,111,.24) 0%,rgba(168,118,58,.09) 40%,transparent 73%)!important;
 filter:blur(115px)!important;opacity:.82!important
}
.topbar{
 background:linear-gradient(90deg,rgba(4,6,7,.91),rgba(13,17,19,.80) 55%,rgba(49,45,38,.58) 100%)!important;
 border-bottom-color:rgba(255,255,255,.065)!important;
 backdrop-filter:blur(30px) saturate(108%)!important;-webkit-backdrop-filter:blur(30px) saturate(108%)!important
}
.layers-panel,.ai-panel,.properties-panel,.timeline,.display-modes,.view-controls,.grid-toggle{
 background:linear-gradient(145deg,rgba(28,31,32,.64),rgba(11,14,16,.55))!important;
 border:1px solid var(--ds-studio-glass-line)!important;
 box-shadow:inset 0 1px 0 var(--ds-studio-glass-highlight),0 18px 48px rgba(0,0,0,.22)!important;
 backdrop-filter:blur(30px) saturate(112%)!important;-webkit-backdrop-filter:blur(30px) saturate(112%)!important
}
.layers-panel{background:linear-gradient(145deg,rgba(13,16,18,.72),rgba(8,11,12,.58))!important}
.ai-panel{background:linear-gradient(145deg,rgba(38,39,38,.57),rgba(15,18,19,.50))!important}
.properties-panel{background:linear-gradient(145deg,rgba(40,41,39,.59),rgba(17,20,21,.52))!important}
.timeline{background:linear-gradient(105deg,rgba(12,15,17,.68),rgba(31,31,29,.51),rgba(54,47,38,.34))!important}
.viewport{border-color:rgba(255,255,255,.10)!important;box-shadow:0 18px 50px rgba(0,0,0,.24)!important}
.drawer-search,.ai-input-wrap textarea,.prop-row input,.prop-row select,.axis-input,.prop-slider output,
.selection-summary,.rig-note,.drawer-card,.asset-library-card,.cloud-asset-card,.character-preset,.shot-card,.shot-add{
 background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;
 border-color:rgba(255,255,255,.085)!important
}
.rail-item.active,.drawer-item.active,.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,
.shot-card.active,.camera-shot-add,button[aria-pressed="true"]{color:var(--ds-studio-accent)!important}
.rail-item.active,.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,.shot-card.active{
 background:linear-gradient(145deg,rgba(216,167,93,.12),rgba(255,255,255,.025))!important;
 border-color:rgba(239,201,125,.30)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.055),0 0 24px rgba(216,167,93,.055)!important
}


/* Preview V26 · even warm atmosphere, lifted blacks; layout untouched */
html,body{background:#171819!important}
.studio{
 background:
 radial-gradient(ellipse 44% 56% at 18% 18%,rgba(226,190,132,.105) 0%,rgba(183,143,85,.052) 43%,transparent 73%),
 radial-gradient(ellipse 42% 58% at 52% 48%,rgba(223,185,123,.095) 0%,rgba(174,133,78,.045) 44%,transparent 74%),
 radial-gradient(ellipse 45% 56% at 86% 20%,rgba(231,198,143,.115) 0%,rgba(187,147,91,.055) 42%,transparent 73%),
 radial-gradient(ellipse 44% 50% at 22% 88%,rgba(216,178,116,.085) 0%,transparent 72%),
 radial-gradient(ellipse 46% 50% at 78% 88%,rgba(232,199,145,.105) 0%,transparent 72%),
 linear-gradient(180deg,#17191a 0%,#1d1f20 46%,#232425 100%)!important
}
.studio:before{
 width:96vw!important;height:72vh!important;left:2vw!important;right:auto!important;top:-30vh!important;
 background:radial-gradient(ellipse,rgba(239,210,162,.105) 0%,rgba(201,163,104,.052) 43%,transparent 74%)!important;
 filter:blur(125px)!important;opacity:.92!important
}
.studio:after{
 width:96vw!important;height:64vh!important;left:2vw!important;right:auto!important;bottom:-31vh!important;
 background:radial-gradient(ellipse,rgba(231,199,145,.095) 0%,rgba(188,149,92,.043) 45%,transparent 74%)!important;
 filter:blur(130px)!important;opacity:.90!important
}
.topbar{
 background:linear-gradient(180deg,rgba(24,25,25,.78),rgba(18,20,21,.66))!important;
 border-bottom-color:rgba(255,255,255,.075)!important
}
.layers-panel,.ai-panel,.properties-panel,.timeline,.display-modes,.view-controls,.grid-toggle{
 background:linear-gradient(145deg,rgba(49,50,49,.48),rgba(28,30,30,.40))!important;
 border-color:rgba(255,255,255,.105)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.055),0 14px 36px rgba(0,0,0,.13)!important;
 backdrop-filter:blur(32px) saturate(102%) brightness(1.05)!important;
 -webkit-backdrop-filter:blur(32px) saturate(102%) brightness(1.05)!important
}
.layers-panel{background:linear-gradient(145deg,rgba(39,40,40,.52),rgba(23,25,25,.43))!important}
.ai-panel{background:linear-gradient(145deg,rgba(54,54,52,.46),rgba(31,32,31,.39))!important}
.properties-panel{background:linear-gradient(145deg,rgba(56,55,52,.47),rgba(32,33,32,.40))!important}
.timeline{background:linear-gradient(145deg,rgba(45,45,43,.47),rgba(27,29,29,.40))!important}


/* Preview V27 · fresh translucent dark palette; layout untouched */
html,body{background:#242526!important}
.studio{
 background:
 radial-gradient(ellipse 46% 52% at 16% 16%,rgba(246,224,185,.105) 0%,rgba(218,190,145,.050) 45%,transparent 74%),
 radial-gradient(ellipse 50% 58% at 50% 46%,rgba(236,215,180,.095) 0%,rgba(202,174,130,.043) 48%,transparent 75%),
 radial-gradient(ellipse 46% 52% at 84% 18%,rgba(248,228,194,.11) 0%,rgba(218,189,144,.05) 44%,transparent 74%),
 radial-gradient(ellipse 56% 48% at 50% 100%,rgba(244,219,178,.095) 0%,transparent 73%),
 linear-gradient(180deg,#222426 0%,#292b2c 48%,#303132 100%)!important
}
.studio:before{
 width:92vw!important;height:58vh!important;left:4vw!important;top:-29vh!important;
 background:radial-gradient(ellipse,rgba(255,237,204,.12) 0%,rgba(226,197,151,.045) 47%,transparent 75%)!important;
 filter:blur(145px)!important;opacity:.88!important
}
.studio:after{
 width:90vw!important;height:54vh!important;left:5vw!important;bottom:-28vh!important;
 background:radial-gradient(ellipse,rgba(249,225,187,.105) 0%,rgba(215,185,140,.04) 48%,transparent 75%)!important;
 filter:blur(150px)!important;opacity:.84!important
}
.topbar{
 background:linear-gradient(180deg,rgba(39,40,40,.58),rgba(27,29,30,.48))!important;
 backdrop-filter:blur(36px) saturate(96%) brightness(1.08)!important;-webkit-backdrop-filter:blur(36px) saturate(96%) brightness(1.08)!important
}
.layers-panel,.ai-panel,.properties-panel,.timeline,.display-modes,.view-controls,.grid-toggle{
 background:linear-gradient(145deg,rgba(72,72,70,.30),rgba(39,41,41,.24))!important;
 border-color:rgba(255,255,255,.12)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 32px rgba(0,0,0,.10)!important;
 backdrop-filter:blur(38px) saturate(94%) brightness(1.10)!important;
 -webkit-backdrop-filter:blur(38px) saturate(94%) brightness(1.10)!important
}
.layers-panel{background:linear-gradient(145deg,rgba(61,62,61,.33),rgba(34,36,37,.26))!important}
.ai-panel{background:linear-gradient(145deg,rgba(76,75,71,.29),rgba(41,42,41,.23))!important}
.properties-panel{background:linear-gradient(145deg,rgba(78,76,71,.30),rgba(42,43,42,.24))!important}
.timeline{background:linear-gradient(145deg,rgba(69,68,65,.30),rgba(38,40,40,.23))!important}
.drawer-search,.ai-input-wrap textarea,.prop-row input,.prop-row select,.axis-input,.prop-slider output,
.selection-summary,.rig-note,.drawer-card,.asset-library-card,.cloud-asset-card,.character-preset,.shot-card,.shot-add{
 background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.105)!important
}


/* Preview V28 · luminous water-glass material system; layout untouched */
html,body{background:#242526!important}
.studio{
 position:relative!important;isolation:isolate!important;overflow:hidden!important;
 background:
 radial-gradient(ellipse 55% 62% at 18% 20%,rgba(244,220,180,.10),transparent 68%),
 radial-gradient(ellipse 56% 66% at 80% 18%,rgba(239,214,174,.11),transparent 70%),
 radial-gradient(ellipse 62% 48% at 50% 100%,rgba(238,216,181,.09),transparent 72%),
 linear-gradient(160deg,#202224 0%,#2a2b2c 45%,#353534 100%)!important
}
/* broad luminous field */
.studio:before{
 content:""!important;position:absolute!important;z-index:-2!important;pointer-events:none!important;
 inset:-22%!important;width:auto!important;height:auto!important;border-radius:0!important;
 background:
 radial-gradient(ellipse 31% 27% at 12% 24%,rgba(255,235,199,.18),transparent 70%),
 radial-gradient(ellipse 34% 31% at 47% 16%,rgba(255,244,220,.12),transparent 72%),
 radial-gradient(ellipse 32% 30% at 84% 28%,rgba(245,213,163,.16),transparent 71%),
 radial-gradient(ellipse 36% 28% at 25% 78%,rgba(232,208,173,.12),transparent 72%),
 radial-gradient(ellipse 38% 30% at 76% 82%,rgba(251,224,180,.15),transparent 72%)!important;
 filter:blur(72px)!important;opacity:.88!important;mix-blend-mode:screen!important;
 transform:rotate(-4deg) scale(1.08)!important
}
/* soft water-caustic / refracted sheen */
.studio:after{
 content:""!important;position:absolute!important;z-index:-1!important;pointer-events:none!important;
 inset:-18%!important;width:auto!important;height:auto!important;border-radius:0!important;
 background:
 repeating-radial-gradient(ellipse at 18% 34%,rgba(255,240,214,.075) 0 1.5%,transparent 3.5% 9%),
 repeating-radial-gradient(ellipse at 76% 58%,rgba(255,229,188,.055) 0 1.2%,transparent 3% 10%),
 linear-gradient(118deg,transparent 18%,rgba(255,245,225,.045) 39%,transparent 57%,rgba(230,201,157,.045) 73%,transparent 88%)!important;
 background-size:72% 86%,78% 92%,100% 100%!important;
 filter:blur(18px)!important;opacity:.58!important;mix-blend-mode:screen!important;
 transform:rotate(2deg) scale(1.12)!important
}
.topbar{
 background:linear-gradient(180deg,rgba(52,53,52,.46),rgba(25,27,28,.35))!important;
 border-color:rgba(255,255,255,.11)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.08)!important;
 backdrop-filter:blur(42px) saturate(105%) brightness(1.10)!important;
 -webkit-backdrop-filter:blur(42px) saturate(105%) brightness(1.10)!important
}
.layers-panel,.ai-panel,.properties-panel,.timeline,.display-modes,.view-controls,.grid-toggle{
 background:
 linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 48%,rgba(24,25,25,.14))!important;
 border:1px solid rgba(255,255,255,.135)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.10),inset 0 -1px rgba(255,255,255,.025),0 14px 38px rgba(0,0,0,.10)!important;
 backdrop-filter:blur(42px) saturate(108%) brightness(1.09)!important;
 -webkit-backdrop-filter:blur(42px) saturate(108%) brightness(1.09)!important
}
.layers-panel{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(29,31,31,.18))!important}
.ai-panel{background:linear-gradient(145deg,rgba(255,248,235,.075),rgba(35,36,35,.15))!important}
.properties-panel{background:linear-gradient(145deg,rgba(255,248,235,.08),rgba(34,35,34,.16))!important}
.timeline{background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(32,33,32,.15))!important}
.drawer-search,.ai-input-wrap textarea,.prop-row input,.prop-row select,.axis-input,.prop-slider output,
.selection-summary,.rig-note,.drawer-card,.asset-library-card,.cloud-asset-card,.character-preset,.shot-card,.shot-add{
 background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;
 border-color:rgba(255,255,255,.115)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.055)!important
}


/* Preview V29 · sampled directly from supplied reference; layout untouched */
html,body{background:#0e1012!important}
.studio{
 background:
 radial-gradient(ellipse 62% 46% at 72% -2%,rgba(92,106,121,.72) 0%,rgba(55,69,81,.42) 38%,transparent 72%),
 radial-gradient(ellipse 46% 38% at 84% 106%,rgba(108,99,88,.62) 0%,rgba(72,69,65,.30) 42%,transparent 74%),
 radial-gradient(ellipse 50% 52% at 54% 62%,rgba(48,59,67,.24) 0%,transparent 72%),
 linear-gradient(112deg,#0b0c0f 0%,#101214 27%,#202a31 58%,#4b5867 83%,#52504c 100%)!important
}
.studio:before{
 inset:-16%!important;width:auto!important;height:auto!important;
 background:
 radial-gradient(ellipse 38% 26% at 69% 7%,rgba(129,145,160,.30) 0%,rgba(79,94,108,.13) 48%,transparent 74%),
 radial-gradient(ellipse 32% 25% at 89% 92%,rgba(141,124,101,.18) 0%,transparent 72%)!important;
 filter:blur(105px)!important;opacity:.72!important;mix-blend-mode:screen!important;transform:none!important
}
.studio:after{
 inset:-14%!important;width:auto!important;height:auto!important;
 background:
 linear-gradient(118deg,transparent 18%,rgba(255,255,255,.018) 39%,transparent 57%,rgba(217,189,145,.018) 73%,transparent 88%)!important;
 filter:blur(30px)!important;opacity:.38!important;mix-blend-mode:screen!important;transform:none!important
}
.topbar{
 background:linear-gradient(90deg,rgba(11,12,15,.82),rgba(39,49,59,.55) 52%,rgba(82,80,76,.45))!important;
 border-color:rgba(255,255,255,.075)!important
}
.layers-panel,.ai-panel,.properties-panel,.timeline,.display-modes,.view-controls,.grid-toggle{
 background:linear-gradient(145deg,rgba(28,31,33,.58),rgba(15,18,20,.47))!important;
 border:1px solid rgba(255,255,255,.095)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.045),0 12px 34px rgba(0,0,0,.13)!important;
 backdrop-filter:blur(30px) saturate(96%)!important;-webkit-backdrop-filter:blur(30px) saturate(96%)!important
}
.layers-panel{background:linear-gradient(145deg,rgba(18,21,23,.66),rgba(11,14,16,.54))!important}
.ai-panel,.properties-panel{background:linear-gradient(145deg,rgba(50,52,52,.48),rgba(26,30,32,.43))!important}
.timeline{background:linear-gradient(110deg,rgba(19,22,24,.58),rgba(47,48,47,.40))!important}


/* Preview V30 · sampled reference + restrained champagne halos; layout untouched */
.studio{
 background:
 radial-gradient(ellipse 34% 28% at 20% 16%,rgba(225,184,116,.115) 0%,rgba(187,143,77,.050) 43%,transparent 72%),
 radial-gradient(ellipse 30% 24% at 52% 10%,rgba(239,207,153,.105) 0%,rgba(196,154,88,.040) 45%,transparent 72%),
 radial-gradient(ellipse 34% 30% at 83% 18%,rgba(229,188,120,.125) 0%,rgba(181,136,72,.050) 44%,transparent 73%),
 radial-gradient(ellipse 36% 28% at 25% 84%,rgba(216,172,103,.085) 0%,transparent 72%),
 radial-gradient(ellipse 38% 30% at 76% 86%,rgba(236,199,137,.105) 0%,rgba(182,139,78,.038) 45%,transparent 73%),
 radial-gradient(ellipse 62% 46% at 72% -2%,rgba(92,106,121,.68) 0%,rgba(55,69,81,.39) 38%,transparent 72%),
 radial-gradient(ellipse 46% 38% at 84% 106%,rgba(108,99,88,.58) 0%,rgba(72,69,65,.28) 42%,transparent 74%),
 linear-gradient(112deg,#0b0c0f 0%,#101214 27%,#202a31 58%,#4b5867 83%,#52504c 100%)!important
}
.studio:before{
 inset:-18%!important;
 background:
 radial-gradient(ellipse 25% 21% at 15% 26%,rgba(248,211,150,.16) 0%,rgba(205,159,91,.055) 47%,transparent 73%),
 radial-gradient(ellipse 27% 22% at 48% 18%,rgba(255,225,175,.14) 0%,rgba(207,163,98,.048) 48%,transparent 74%),
 radial-gradient(ellipse 27% 23% at 82% 30%,rgba(248,209,145,.17) 0%,rgba(200,151,82,.060) 47%,transparent 73%),
 radial-gradient(ellipse 28% 21% at 31% 78%,rgba(235,194,128,.11) 0%,transparent 73%),
 radial-gradient(ellipse 29% 22% at 73% 80%,rgba(250,214,157,.14) 0%,transparent 73%)!important;
 filter:blur(92px)!important;opacity:.78!important;mix-blend-mode:screen!important
}


/* Preview V31 · visible gold bloom fields; layout untouched */
.studio{
 background:
 radial-gradient(ellipse 25% 34% at 8% 22%,rgba(218,164,86,.28) 0%,rgba(184,126,58,.16) 30%,rgba(133,91,45,.055) 55%,transparent 73%),
 radial-gradient(ellipse 31% 29% at 43% 8%,rgba(236,192,119,.25) 0%,rgba(197,145,74,.13) 34%,rgba(141,98,48,.045) 58%,transparent 74%),
 radial-gradient(ellipse 28% 38% at 78% 18%,rgba(229,178,101,.30) 0%,rgba(190,132,61,.15) 34%,rgba(139,93,42,.05) 58%,transparent 74%),
 radial-gradient(ellipse 30% 31% at 24% 82%,rgba(211,155,76,.22) 0%,rgba(170,113,50,.10) 38%,transparent 72%),
 radial-gradient(ellipse 33% 34% at 76% 84%,rgba(235,186,108,.27) 0%,rgba(190,132,63,.13) 36%,rgba(139,95,45,.04) 59%,transparent 74%),
 radial-gradient(ellipse 62% 46% at 72% -2%,rgba(92,106,121,.64) 0%,rgba(55,69,81,.36) 38%,transparent 72%),
 radial-gradient(ellipse 46% 38% at 84% 106%,rgba(108,99,88,.54) 0%,rgba(72,69,65,.25) 42%,transparent 74%),
 linear-gradient(112deg,#0b0c0f 0%,#101214 27%,#202a31 58%,#4b5867 83%,#52504c 100%)!important
}
.studio:before{
 inset:-8%!important;
 background:
 radial-gradient(ellipse 20% 25% at 12% 24%,rgba(255,211,135,.34) 0%,rgba(221,162,78,.18) 35%,transparent 70%),
 radial-gradient(ellipse 22% 22% at 47% 18%,rgba(255,222,159,.30) 0%,rgba(222,167,88,.15) 37%,transparent 71%),
 radial-gradient(ellipse 22% 27% at 84% 27%,rgba(255,209,128,.35) 0%,rgba(219,157,70,.18) 36%,transparent 70%),
 radial-gradient(ellipse 23% 22% at 30% 80%,rgba(244,191,108,.25) 0%,rgba(200,137,59,.11) 40%,transparent 71%),
 radial-gradient(ellipse 24% 23% at 75% 80%,rgba(255,215,143,.30) 0%,rgba(213,151,70,.14) 38%,transparent 71%)!important;
 filter:blur(58px)!important;opacity:.88!important;mix-blend-mode:screen!important
}


/* Preview V32 · immersive glass depth refinement; layout logic untouched */


/* 1. Fix the sticky property header: no pure-black patch. */
.properties-panel .prop-head{
  background:linear-gradient(180deg,rgba(55,59,60,.58),rgba(33,37,39,.46))!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  backdrop-filter:blur(28px) saturate(105%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(105%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.properties-panel .prop-head h2{color:#f5f6f3!important}

/* 2. Give the AI assistant more vertical breathing room and push inspector down. */
.ai-panel{
  height:176px!important;
  padding:10px 11px!important;
}
.ai-head{height:31px!important}
.ai-input-wrap textarea{
  height:88px!important;
  padding:11px 38px 11px 11px!important;
  resize:none!important;
}
.ai-input-wrap button{bottom:7px!important;right:7px!important}
.properties-panel{margin-top:196px!important}

/* 3. Main modules: stronger, deeper frosted glass while staying restrained. */
.layers-panel,.ai-panel,.properties-panel,.timeline{
  background:var(--ds-studio-glass-surface)!important;
  border:1px solid var(--ds-studio-glass-stroke)!important;
  box-shadow:var(--ds-studio-glass-shadow-soft)!important;
  backdrop-filter:blur(34px) saturate(112%) brightness(1.04)!important;
  -webkit-backdrop-filter:blur(34px) saturate(112%) brightness(1.04)!important;
}
.layers-panel{
  background:linear-gradient(145deg,rgba(38,44,48,.58),rgba(14,18,21,.43))!important;
}
.ai-panel{
  background:linear-gradient(145deg,rgba(69,70,67,.47),rgba(26,31,34,.37))!important;
}
.properties-panel{
  background:linear-gradient(145deg,rgba(65,66,64,.46),rgba(25,30,32,.38))!important;
}
.timeline{
  background:linear-gradient(115deg,rgba(44,47,48,.48),rgba(21,25,27,.36))!important;
}

/* 4. Individual controls: iOS-like floating glass with a fine highlight rim. */
.rail-item,
.drawer-item,.drawer-card,.drawer-pill,.asset-tab,.asset-library-card,.cloud-asset-card,.character-preset,
.mode-btn,.small-chip,.grid-toggle,.ai-mode,.ai-chips button,
.quick-actions button,.timeline-actions button,.head-actions button,.layer-toolbar button,
.shot-card,.shot-add,.top-actions .top-quiet,.top-actions .top-primary,.account-badge{
  border:1px solid var(--ds-studio-glass-stroke-soft)!important;
  background:var(--ds-studio-glass-surface-soft)!important;
  box-shadow:var(--ds-studio-glass-shadow-float)!important;
  backdrop-filter:blur(18px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(112%)!important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease!important;
}
.rail-item:hover,
.drawer-item:hover,.drawer-card:hover,.drawer-pill:hover,.asset-tab:hover,.asset-library-card:hover,.cloud-asset-card:hover,.character-preset:hover,
.mode-btn:hover,.small-chip:hover,.grid-toggle:hover,.ai-mode:hover,.ai-chips button:hover,
.quick-actions button:hover,.timeline-actions button:hover,.head-actions button:hover,.layer-toolbar button:hover,
.shot-card:hover,.shot-add:hover,.top-actions .top-quiet:hover,.top-actions .top-primary:hover,.account-badge:hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.038))!important;
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.rail-item:active,
.drawer-item:active,.drawer-card:active,.drawer-pill:active,.asset-tab:active,
.mode-btn:active,.small-chip:active,.grid-toggle:active,.quick-actions button:active,.timeline-actions button:active{
  transform:translateY(0) scale(.985)!important;
}

/* Preserve gold only for selected/enabled states. */
.rail-item.active,.drawer-item.active,.drawer-pill.active,.asset-tab.active,.character-preset.active,
.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,.shot-card.active,.camera-shot-add,
button[aria-pressed="true"]{
  color:var(--ds-studio-accent)!important;
  border-color:rgba(235,194,121,.36)!important;
  background:linear-gradient(145deg,rgba(229,187,112,.145),rgba(255,255,255,.035))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,242,215,.12),0 0 22px rgba(229,187,112,.055)!important;
}

/* Inputs inherit the same glass material instead of looking like flat dark boxes. */
.drawer-search,.ai-input-wrap textarea,.prop-row input,.prop-row select,.axis-input,.prop-slider output,
.selection-summary,.rig-note,.subsection,.light-color-row input[type="color"]{
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}

/* 5. Tool drawer opened by 场景 / 人物 / 镜头 / 灯光 / 轨迹 / 资产 uses identical glass. */
.left-drawer{
  background:linear-gradient(145deg,rgba(46,51,54,.64),rgba(13,17,20,.52))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-left:0!important;
  box-shadow:18px 0 46px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.085)!important;
  backdrop-filter:blur(36px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(36px) saturate(112%)!important;
}
.drawer-inner{
  background:transparent!important;
}
.drawer-head{
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  margin-bottom:8px!important;
}
.drawer-search{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.022))!important;
}
.drawer-section{
  border-radius:12px!important;
}
.drawer-icon{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.055)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.045)!important;
}
.drawer-item.active .drawer-icon{
  background:rgba(229,187,112,.10)!important;
  border-color:rgba(229,187,112,.20)!important;
}

/* Keep smaller screens aligned with the taller AI module. */
@media(max-width:1280px){
  .ai-panel{height:168px!important}
  .properties-panel{margin-top:188px!important}
}


/* Preview V33 · transparent property heading + left panel parity; no interaction changes */
/* Property title must visually belong to the glass panel, not sit on a tinted patch. */
.properties-panel .prop-head{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}

/* Tool drawer exactly mirrors the default left panel footprint and material. */
.left-drawer{
  position:absolute!important;
  z-index:120!important;
  left:10px!important;
  top:8px!important;
  bottom:10px!important;
  width:220px!important;
  height:auto!important;
  border:1px solid var(--ds-studio-glass-stroke)!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,rgba(38,44,48,.58),rgba(14,18,21,.43))!important;
  box-shadow:var(--ds-studio-glass-shadow-soft)!important;
  backdrop-filter:blur(34px) saturate(112%) brightness(1.04)!important;
  -webkit-backdrop-filter:blur(34px) saturate(112%) brightness(1.04)!important;
}
.body-grid.drawer-open .left-drawer{
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  border-color:var(--ds-studio-glass-stroke)!important;
}
.drawer-inner{
  width:100%!important;
  height:100%!important;
  padding:12px 10px!important;
  overflow:auto!important;
  background:transparent!important;
}
.drawer-head{
  height:35px!important;
  margin:0 0 8px!important;
  padding:0 7px!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
.drawer-head small{display:none!important}
.drawer-head h2{
  margin:4px 0 0!important;
  font-size:14px!important;
  font-weight:650!important;
  color:#f1f1ed!important;
}
.drawer-search{margin:0 0 10px!important}
.drawer-content{padding-bottom:70px!important}

@media(max-width:1280px){
  .left-drawer{
    left:8px!important;
    top:6px!important;
    bottom:8px!important;
    width:200px!important;
  }
}


/* Preview V34 · viewport glass + reference gizmos + compass; layout untouched */
.body-grid.drawer-open .layers-panel{visibility:hidden!important}
.left-drawer{
  background:linear-gradient(145deg,rgba(38,44,48,.58),rgba(14,18,21,.43))!important;
}
.viewport{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.022) 44%,rgba(16,20,22,.30))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.09)!important;
  backdrop-filter:blur(32px) saturate(108%) brightness(1.04)!important;
  -webkit-backdrop-filter:blur(32px) saturate(108%) brightness(1.04)!important;
}
.viewport-scene{
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 42%,rgba(20,24,26,.20))!important;
}

.north-compass{
  width:64px!important;height:64px!important;
  border:1.5px solid rgba(255,255,255,.72)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.025)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.18)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.north-compass:before{
  content:"";position:absolute;left:-6px;right:-6px;top:31px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.52) 0 7px,transparent 7px calc(100% - 7px),rgba(255,255,255,.52) calc(100% - 7px));
}
.north-letter{
  top:3px!important;color:rgba(245,246,244,.92)!important;
  font-size:11px!important;font-weight:700!important;
  text-shadow:0 1px 4px rgba(0,0,0,.35)!important
}
.north-needle{
  left:20px!important;top:15px!important;width:24px!important;height:34px!important;
  transform-origin:12px 17px!important;
}
.north-needle:before{
  content:""!important;position:absolute!important;inset:0!important;border:0!important;
  background:linear-gradient(90deg,#25282a 0 49%,#5b6063 50% 100%)!important;
  clip-path:polygon(50% 0,100% 100%,50% 77%,0 100%)!important;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.18))!important;
}
.north-center{
  left:31px!important;top:54px!important;width:2px!important;height:10px!important;
  border:0!important;border-radius:1px!important;background:rgba(255,255,255,.72)!important
}


/* Preview V35 · quieter viewport glass; preserve black-gold grid */
.viewport{
  background:linear-gradient(145deg,rgba(48,51,52,.78),rgba(22,26,28,.72))!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.085)!important;
  backdrop-filter:blur(28px) saturate(82%) brightness(.98)!important;
  -webkit-backdrop-filter:blur(28px) saturate(82%) brightness(.98)!important;
}
.viewport-scene{
  background:linear-gradient(145deg,rgba(50,54,55,.66),rgba(19,23,25,.72))!important;
}
#previewCanvas{background:transparent!important}


/* Preview V36 · soften left-side gold ambience only */
.studio{
 background:
 radial-gradient(ellipse 23% 31% at 8% 22%,rgba(218,164,86,.16) 0%,rgba(184,126,58,.075) 31%,rgba(133,91,45,.025) 55%,transparent 72%),
 radial-gradient(ellipse 31% 29% at 43% 8%,rgba(236,192,119,.25) 0%,rgba(197,145,74,.13) 34%,rgba(141,98,48,.045) 58%,transparent 74%),
 radial-gradient(ellipse 28% 38% at 78% 18%,rgba(229,178,101,.30) 0%,rgba(190,132,61,.15) 34%,rgba(139,93,42,.05) 58%,transparent 74%),
 radial-gradient(ellipse 27% 28% at 24% 82%,rgba(211,155,76,.12) 0%,rgba(170,113,50,.05) 38%,transparent 70%),
 radial-gradient(ellipse 33% 34% at 76% 84%,rgba(235,186,108,.27) 0%,rgba(190,132,63,.13) 36%,rgba(139,95,45,.04) 59%,transparent 74%),
 radial-gradient(ellipse 62% 46% at 72% -2%,rgba(92,106,121,.64) 0%,rgba(55,69,81,.36) 38%,transparent 72%),
 radial-gradient(ellipse 46% 38% at 84% 106%,rgba(108,99,88,.54) 0%,rgba(72,69,65,.25) 42%,transparent 74%),
 linear-gradient(112deg,#0b0c0f 0%,#101214 27%,#202a31 58%,#4b5867 83%,#52504c 100%)!important
}


/* Preview V37 · compass/account/shot interaction polish; layout unchanged */
.axis-gizmo{display:none!important}
.north-compass{
  left:16px!important;top:14px!important;
  width:68px!important;height:68px!important;
}
.north-compass:before{
  left:-5px!important;right:-5px!important;top:33px!important;
  background:linear-gradient(90deg,rgba(255,255,255,.52) 0 7px,transparent 7px calc(100% - 7px),rgba(255,255,255,.52) calc(100% - 7px))!important;
}
.north-compass:after{
  content:"";position:absolute;top:-5px;bottom:-5px;left:33px;width:1px;
  background:linear-gradient(180deg,transparent 0 13px,rgba(255,255,255,.52) 13px 20px,transparent 20px calc(100% - 20px),rgba(255,255,255,.52) calc(100% - 20px) calc(100% - 13px),transparent calc(100% - 13px));
}
.north-letter{top:4px!important}
.north-needle{
  left:22px!important;top:16px!important;width:24px!important;height:36px!important;
  transform-origin:12px 18px!important;
}
.north-needle:before{
  content:""!important;position:absolute!important;left:5px!important;top:0!important;
  width:14px!important;height:19px!important;border:0!important;
  background:linear-gradient(90deg,#c58d3f,#edc16f)!important;
  clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%)!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.26))!important;
}
.north-needle:after{
  content:""!important;position:absolute!important;left:5px!important;top:17px!important;
  width:14px!important;height:19px!important;border:0!important;
  background:linear-gradient(90deg,#b94343,#e76d62)!important;
  clip-path:polygon(50% 100%,0 0,50% 22%,100% 0)!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.24))!important;
}
.north-center{
  left:31px!important;top:31px!important;width:6px!important;height:6px!important;
  border-radius:50%!important;background:#f0f2f2!important;border:1px solid rgba(28,30,31,.72)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.25)!important
}

.account-badge{
  order:98!important;
  width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;
  padding:0!important;border-radius:50%!important;overflow:hidden!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.13)!important
}
.top-actions .close{order:99!important}
.account-avatar{
  width:26px;height:26px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:linear-gradient(145deg,#c9c9c5,#74797b);
}
.account-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.account-avatar svg{width:100%;height:100%;display:block}

.shot-strip{
  display:flex!important;align-items:center!important;
}
.shot-card,.shot-add{
  align-self:center!important;margin-top:auto!important;margin-bottom:auto!important;
}
.shot-card{
  position:relative!important;overflow:hidden!important;
}
.shot-hover-actions{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(180deg,rgba(8,10,11,.16),rgba(8,10,11,.58));
  opacity:0;pointer-events:none;
  transition:opacity .16s ease!important;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.shot-card:hover .shot-hover-actions,.shot-card:focus-within .shot-hover-actions{opacity:1}
.shot-action{
  pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:24px;padding:0 8px;border-radius:7px;
  border:1px solid rgba(255,255,255,.17);
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  color:#f4f5f2;font-size:8px;font-weight:650;letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.10)
}
.shot-action:hover{
  border-color:rgba(235,194,121,.42);
  color:#efc97d;
  background:linear-gradient(145deg,rgba(229,187,112,.14),rgba(255,255,255,.04))
}


/* Preview V38 · single split-color compass + shot/card functional fixes */
.north-needle{
  left:24px!important;top:16px!important;width:20px!important;height:38px!important;
  transform-origin:10px 19px!important;
  background:linear-gradient(90deg,#e0ad58 0 50%,#d84f4f 50% 100%)!important;
  clip-path:polygon(50% 0,100% 100%,50% 76%,0 100%)!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))!important;
}

.shot-strip{
  box-sizing:border-box!important;
  height:104px!important;
  padding:0 8px!important;
  align-items:center!important;
}
.shot-card,.shot-add{
  height:78px!important;
  margin:0!important;
  align-self:center!important;
}
.shot-hover-actions{
  display:flex!important;
  z-index:50!important;
  opacity:0!important;
  pointer-events:none!important;
}
.shot-hover-actions.visible{
  opacity:1!important;
  pointer-events:auto!important;
}


/* Preview V39 · runtime recovery + shot strip centering + single split compass */
.north-needle{
  left:24px!important;top:16px!important;width:20px!important;height:38px!important;
  transform-origin:10px 19px!important;
  background:linear-gradient(90deg,#e0ad58 0 50%,#d84f4f 50% 100%)!important;
  clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%)!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))!important;
}
.north-needle:before,.north-needle:after{content:none!important;display:none!important}
.north-center{display:none!important}

.shot-timeline{
  grid-template-rows:38px minmax(0,1fr)!important;
}
.shot-strip{
  height:100%!important;
  min-height:0!important;
  box-sizing:border-box!important;
  padding:13px 8px!important;
  align-items:center!important;
}
.shot-card,.shot-add{
  height:78px!important;
  min-height:78px!important;
  margin:0!important;
  align-self:center!important;
}
.shot-card:hover .shot-hover-actions,
.shot-card:focus-within .shot-hover-actions,
.shot-hover-actions.visible{
  opacity:1!important;
  pointer-events:auto!important;
}
.track-area{display:none!important}


/* Preview V40 · bright champagne accent + gizmo/menu polish */

.top-actions .top-primary{
  background:linear-gradient(180deg,#fce0a0 0%,#eec97f 56%,#e5bb6b 100%)!important;
  color:#18130c!important;
  border-color:#f6d48d!important;
  box-shadow:0 0 0 1px rgba(255,236,190,.18),0 7px 20px rgba(238,201,127,.24),inset 0 1px 0 rgba(255,248,225,.72)!important;
}
.top-actions .top-primary:hover{
  background:linear-gradient(180deg,#ffe8b2 0%,#f4d58f 58%,#ebc477 100%)!important;
  border-color:#ffe2a1!important;
}
.rail-item.active,.drawer-item.active,.drawer-pill.active,.asset-tab.active,.character-preset.active,
.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,.shot-card.active,.camera-shot-add,
button[aria-pressed="true"]{
  color:#f6d78f!important;
  border-color:rgba(238,201,127,.48)!important;
  background:linear-gradient(145deg,rgba(238,201,127,.18),rgba(255,255,255,.04))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,245,216,.16),0 0 24px rgba(238,201,127,.08)!important;
}
.rail-item.active svg,.drawer-item.active svg,.mode-btn.active svg,.small-chip.active svg,.grid-toggle.active svg,
.layer-row.active .layer-icon,.layer-row.active b,.shot-card.active b{
  color:#f6d78f!important;stroke:currentColor!important
}
input[type="range"],input[type="checkbox"],input[type="radio"]{accent-color:#eec97f!important}
.shot-action:hover{
  border-color:rgba(238,201,127,.52)!important;
  color:#f6d78f!important;
  background:linear-gradient(145deg,rgba(238,201,127,.17),rgba(255,255,255,.045))!important
}

/* single circular glass avatar only: no rectangular glass backing */
.account-badge{
  width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important;
  padding:0!important;margin:0!important;border-radius:50%!important;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.16),rgba(255,255,255,.055) 48%,rgba(17,20,22,.18) 100%)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.16)!important;
  overflow:hidden!important;
}
.account-badge:hover{
  transform:translateY(-1px)!important;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.20),rgba(255,255,255,.07) 48%,rgba(17,20,22,.20) 100%)!important;
  border-color:rgba(238,201,127,.40)!important;
}
.account-avatar{
  width:100%!important;height:100%!important;border-radius:50%!important;
  background:transparent!important;box-shadow:none!important;
}
.account-avatar img,.account-avatar svg{width:100%!important;height:100%!important;border-radius:50%!important}

/* Compass uses the same bright champagne yellow and a true saturated red. */
.north-needle{
  background:linear-gradient(90deg,#eec97f 0 50%,#f03b3b 50% 100%)!important;
}

/* Keep the viewport grid colors untouched. */


/* Preview V41 · luminous glass depth + unified bright selected state */


/* top-right creation actions: stronger typography and consistent glass */
.top-actions .top-quiet{
  color:#f4f5f2!important;
  font-weight:650!important;
  letter-spacing:.01em!important;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(18px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(110%)!important;
}
.top-actions .top-quiet:hover{
  color:#fff!important;
  background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.05))!important;
  border-color:rgba(255,255,255,.22)!important;
}
.top-actions .top-primary{
  background:linear-gradient(180deg,var(--ds-studio-accent-hi) 0%,var(--ds-studio-accent) 56%,var(--ds-studio-accent-deep) 100%)!important;
  color:#17120b!important;
  font-weight:760!important;
  border-color:#f7d68f!important;
  box-shadow:0 0 0 1px rgba(255,240,201,.24),0 8px 24px rgba(238,201,127,.34),0 0 28px rgba(238,201,127,.16),inset 0 1px 0 rgba(255,250,231,.82)!important;
}
.top-actions .top-primary:hover{
  background:linear-gradient(180deg,#ffe8b4 0%,#f4d58f 56%,#e9bb69 100%)!important;
  border-color:#ffe3a3!important;
}

/* all selected/enabled controls use the same luminous yellow instead of brown-gold glass */
.rail-item.active,.drawer-item.active,.drawer-pill.active,.asset-tab.active,.character-preset.active,
.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,.shot-card.active,.camera-shot-add,
button[aria-pressed="true"],.swatch.active{
  color:#18130c!important;
  background:linear-gradient(180deg,var(--ds-studio-accent-hi) 0%,var(--ds-studio-accent) 58%,var(--ds-studio-accent-deep) 100%)!important;
  border-color:#f7d68f!important;
  box-shadow:0 0 0 1px rgba(255,239,194,.20),0 8px 24px rgba(238,201,127,.28),0 0 24px rgba(238,201,127,.14),inset 0 1px 0 rgba(255,250,231,.76)!important;
  text-shadow:none!important;
}
.rail-item.active svg,.drawer-item.active svg,.mode-btn.active svg,.small-chip.active svg,.grid-toggle.active svg,
.layer-row.active .layer-icon,.layer-row.active b,.shot-card.active b{
  color:#18130c!important;stroke:currentColor!important
}
.layer-row.active .layer-state,.shot-card.active small{color:rgba(24,19,12,.68)!important}

/* Object Properties: remove all old earthy focus colors */
.properties-panel .axis-input{
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;
  border-color:rgba(255,255,255,.10)!important;
}
.properties-panel .axis-input span{
  color:#f2f3ef!important;
  background:rgba(255,255,255,.035)!important;
  border-right-color:rgba(255,255,255,.07)!important;
}
.properties-panel .axis-input:focus-within,
.properties-panel .prop-row input:focus,
.properties-panel .prop-row select:focus{
  border-color:rgba(238,201,127,.78)!important;
  box-shadow:0 0 0 1px rgba(238,201,127,.20),0 0 18px rgba(238,201,127,.16),inset 0 1px rgba(255,255,255,.08)!important;
  background:linear-gradient(145deg,rgba(238,201,127,.10),rgba(255,255,255,.025))!important;
}
.properties-panel .axis-input:focus-within span{
  color:#18130c!important;
  background:linear-gradient(180deg,var(--ds-studio-accent-hi),var(--ds-studio-accent))!important;
}
.properties-panel .axis-input input:focus{
  background:transparent!important;
  color:#fff!important;
}
.properties-panel input[type="range"],
.properties-panel input[type="checkbox"],
.properties-panel input[type="radio"]{
  accent-color:var(--ds-studio-accent)!important;
}

/* left-top compass becomes a floating glass object rather than a line-only HUD */
.north-compass{
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.16),rgba(255,255,255,.045) 42%,rgba(18,22,24,.34) 100%)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.22),0 5px 12px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(20px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(112%)!important;
}
.north-compass:before,.north-compass:after{opacity:.48!important}
.north-letter{color:#f6f7f3!important;text-shadow:0 1px 5px rgba(0,0,0,.38)!important}
.north-needle{
  background:linear-gradient(90deg,var(--ds-studio-accent) 0 50%,#f03b3b 50% 100%)!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.30)) drop-shadow(0 0 6px rgba(238,201,127,.12))!important;
}

/* lower-left view controls share the same floating glass language */
.view-controls{
  padding:5px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025) 48%,rgba(16,20,22,.22))!important;
  box-shadow:0 16px 36px rgba(0,0,0,.20),0 5px 12px rgba(0,0,0,.11),inset 0 1px 0 rgba(255,255,255,.14)!important;
  backdrop-filter:blur(24px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(110%)!important;
}
.view-controls .small-chip:not(.active){
  color:#f0f2ef!important;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;
  border-color:rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
}

/* global glass thickness / light depth */
.layers-panel,.ai-panel,.properties-panel,.timeline,.left-drawer,
.display-modes,.view-controls,.north-compass,
.drawer-search,.drawer-item,.drawer-card,.drawer-pill,.asset-tab,.asset-library-card,.cloud-asset-card,.character-preset,
.mode-btn,.small-chip,.grid-toggle,.ai-mode,.ai-chips button,.quick-actions button,.timeline-actions button,
.head-actions button,.layer-toolbar button,.shot-card,.shot-add,.top-actions .top-quiet,.account-badge,
.prop-row input,.prop-row select,.axis-input,.selection-summary,.rig-note{
  border-width:1px!important;
  border-style:solid!important;
  border-color:var(--ds-studio-glass-edge)!important;
  box-shadow:var(--ds-studio-glass-shadow)!important;
}
.layers-panel,.ai-panel,.properties-panel,.timeline,.left-drawer,.display-modes,.view-controls{
  backdrop-filter:blur(34px) saturate(112%) brightness(1.04)!important;
  -webkit-backdrop-filter:blur(34px) saturate(112%) brightness(1.04)!important;
}
.drawer-item:hover,.drawer-card:hover,.drawer-pill:hover,.asset-tab:hover,.mode-btn:hover,.small-chip:hover,
.grid-toggle:hover,.quick-actions button:hover,.timeline-actions button:hover,.head-actions button:hover,.layer-toolbar button:hover,
.shot-card:hover,.shot-add:hover,.top-actions .top-quiet:hover{
  border-color:var(--ds-studio-glass-edge-hi)!important;
  box-shadow:0 18px 36px rgba(0,0,0,.22),0 6px 14px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(255,255,255,.025)!important;
}

/* Re-assert luminous selected styling after the global glass rule above. */
.rail-item.active,.drawer-item.active,.drawer-pill.active,.asset-tab.active,.character-preset.active,
.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,.shot-card.active,.camera-shot-add,
button[aria-pressed="true"],.swatch.active{
  border-color:#f7d68f!important;
  box-shadow:0 0 0 1px rgba(255,239,194,.20),0 8px 24px rgba(238,201,127,.28),0 0 24px rgba(238,201,127,.14),inset 0 1px 0 rgba(255,250,231,.76)!important;
}


/* Preview V42 · restrained luminous accent + restored left selection + larger drawer type */
/* Top-right actions: one language, less glow, stronger text. */
.top-actions .top-primary,
.top-actions .top-quiet{
  height:32px!important;
  border-radius:9px!important;
  font-size:11px!important;
  font-weight:680!important;
  letter-spacing:.01em!important;
}
.top-actions .top-quiet{
  color:#f4f5f2!important;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.028))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.top-actions .top-primary{
  background:linear-gradient(180deg,#f9dda0 0%,#eec97f 62%,#e3b868 100%)!important;
  color:#18130c!important;
  border:1px solid #f3d28a!important;
  box-shadow:0 7px 18px rgba(238,201,127,.20),inset 0 1px 0 rgba(255,248,226,.66)!important;
}
.top-actions .top-primary:hover{
  background:linear-gradient(180deg,#ffe5ae 0%,#f2d18a 62%,#e9bf6f 100%)!important;
  box-shadow:0 8px 20px rgba(238,201,127,.24),inset 0 1px 0 rgba(255,250,232,.74)!important;
}

/* Restore the left rail and left drawer selected state from the earlier accepted look. */
.rail-item.active{
  background:rgba(238,201,127,.12)!important;
  color:#f4d58f!important;
  border:1px solid rgba(238,201,127,.18)!important;
  box-shadow:inset 2px 0 0 #eec97f,inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.rail-item.active svg{color:#f4d58f!important;stroke:currentColor!important}
.drawer-item.active{
  background:rgba(238,201,127,.095)!important;
  color:#f4d58f!important;
  border:1px solid rgba(238,201,127,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.drawer-item.active .drawer-icon{
  color:#f4d58f!important;
  background:rgba(238,201,127,.055)!important;
  border-color:rgba(238,201,127,.12)!important;
}

/* Other selected controls: bright yellow accent, but retain transparent glass instead of solid yellow fill. */
.mode-btn.active,.small-chip.active,.grid-toggle.active,.layer-row.active,.shot-card.active,.camera-shot-add,
.drawer-pill.active,.asset-tab.active,.character-preset.active,button[aria-pressed="true"],.swatch.active{
  color:#f4d58f!important;
  background:linear-gradient(145deg,rgba(238,201,127,.12),rgba(255,255,255,.028))!important;
  border-color:rgba(238,201,127,.28)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.06),0 0 12px rgba(238,201,127,.045)!important;
}
.mode-btn.active svg,.small-chip.active svg,.grid-toggle.active svg,
.layer-row.active .layer-icon,.layer-row.active b,.shot-card.active b{
  color:#f4d58f!important;stroke:currentColor!important;
}
.layer-row.active .layer-state,.shot-card.active small{color:rgba(244,213,143,.70)!important}

/* Object Properties: eliminate earthy yellow; use the same bright yellow accent with restrained glow. */
.properties-panel .axis-input:focus-within,
.properties-panel .prop-row input:focus,
.properties-panel .prop-row select:focus{
  border-color:rgba(238,201,127,.48)!important;
  box-shadow:0 0 0 1px rgba(238,201,127,.10),0 0 10px rgba(238,201,127,.06),inset 0 1px rgba(255,255,255,.06)!important;
  background:linear-gradient(145deg,rgba(238,201,127,.055),rgba(255,255,255,.018))!important;
}
.properties-panel .axis-input:focus-within span{
  color:#f4d58f!important;
  background:rgba(238,201,127,.08)!important;
}

/* Left option dialog typography: raise all key labels one step. */
.drawer-head h2{font-size:15px!important;font-weight:650!important}
.drawer-head small{font-size:9px!important}
.drawer-search{font-size:11px!important}
.drawer-kicker{font-size:10px!important;font-weight:650!important;letter-spacing:.08em!important}
.drawer-item b{font-size:12px!important;font-weight:620!important;line-height:1.25!important}
.drawer-item small{font-size:10px!important;line-height:1.35!important;color:#a7aaa6!important}
.drawer-card b,.asset-library-card b,.cloud-asset-card b,.character-preset b{font-size:12px!important}
.drawer-card small,.asset-library-card small,.cloud-asset-card small,.character-preset small{font-size:10px!important;line-height:1.35!important}
.drawer-section label,.drawer-section button{font-size:11px!important}

/* Reduce overall glass bloom slightly while keeping depth. */
.layers-panel,.ai-panel,.properties-panel,.timeline,.left-drawer,
.display-modes,.view-controls,.north-compass,
.drawer-search,.drawer-item,.drawer-card,.drawer-pill,.asset-tab,.asset-library-card,.cloud-asset-card,.character-preset,
.mode-btn,.small-chip,.grid-toggle,.ai-mode,.ai-chips button,.quick-actions button,.timeline-actions button,
.head-actions button,.layer-toolbar button,.shot-card,.shot-add,.top-actions .top-quiet,.account-badge,
.prop-row input,.prop-row select,.axis-input,.selection-summary,.rig-note{
  box-shadow:0 14px 34px rgba(0,0,0,.17),0 4px 10px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(255,255,255,.025)!important;
}


/* Render quality controls · main viewport */
.viewport-top-right.display-stack{
  top:12px!important;right:12px!important;
  display:flex!important;flex-direction:column!important;align-items:flex-end!important;
  gap:6px!important;z-index:12!important
}
.display-stack .display-modes{
  position:static!important;display:flex!important;gap:1px!important;
  padding:3px!important;border-radius:9px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(9,16,22,.28))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  backdrop-filter:blur(28px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(145%)!important
}
.render-quality{
  display:flex;align-items:center;gap:2px;padding:3px 4px 3px 7px;
  border-radius:9px;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(9,16,22,.28));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(28px) saturate(145%);
  -webkit-backdrop-filter:blur(28px) saturate(145%)
}
.quality-label{
  margin-right:3px;color:#9ea5a1;font-size:9px;font-weight:600;letter-spacing:.08em
}
.quality-btn{
  height:26px;padding:0 9px;border:1px solid transparent;border-radius:6px;
  background:transparent;color:#d7dad7;font-size:10px;font-weight:560
}
.quality-btn:hover{background:rgba(255,255,255,.055);color:#fff}
.quality-btn.active{
  color:#f4d58f;
  background:linear-gradient(145deg,rgba(238,201,127,.12),rgba(255,255,255,.028));
  border-color:rgba(238,201,127,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 12px rgba(238,201,127,.045)
}
.quality-btn[data-quality="showcase"].active{
  color:#fff0b8;
  background:linear-gradient(145deg,rgba(238,201,127,.17),rgba(255,255,255,.035));
  border-color:rgba(244,213,143,.42)
}
@media(max-width:1180px){
  .quality-label{display:none}
  .quality-btn{padding:0 7px;font-size:9px}
}

#renderQuality .quality-btn.member-locked,
#renderQuality .quality-btn:disabled.member-locked{
  color:rgba(205,209,207,.34)!important;
  background:rgba(255,255,255,.025)!important;
  border-color:rgba(255,255,255,.055)!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
  opacity:.58!important;
}
.preview-simple-modal{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.62);display:grid;place-items:center;padding:24px}
.preview-simple-card{width:min(430px,92vw);background:rgba(20,22,23,.97);border:1px solid rgba(238,201,127,.25);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.42);padding:20px;position:relative;color:#eef0ec}
.preview-simple-card h3{margin:0 0 16px;font-size:17px}
.preview-simple-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#aeb2af;font-size:22px;cursor:pointer}
.feedback-label{display:grid;gap:7px;margin:11px 0;color:#b9bdb9;font-size:12px}
.feedback-label input,.feedback-label textarea,.feedback-label select{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.09);background:#121415;color:#eef0ec;border-radius:8px;padding:10px;outline:none}
.feedback-label textarea{resize:vertical}
.preview-primary{width:100%;margin-top:10px;border:1px solid rgba(238,201,127,.48);background:linear-gradient(180deg,#f9dda0,#eec97f);color:#211d15;border-radius:8px;padding:10px 12px;font-weight:700;cursor:pointer}
.preview-form-message{min-height:18px;margin-top:9px;color:#d9bd80;font-size:12px}
.support-qr{display:grid;justify-items:center;gap:9px;text-align:center;color:#b9bdb9}
.support-qr img{width:220px;height:220px;object-fit:contain;background:white;border-radius:10px;padding:8px}
.support-qr b{color:#f0d596}
.support-empty,.support-loading{padding:26px 8px;text-align:center;color:#979c98;display:grid;gap:8px}

/* Preview account control · persistent and independent of auth initialization */
.account-control{position:relative;display:flex;align-items:center;flex:0 0 auto;order:98}
.account-control .account-badge{display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.account-menu[hidden]{display:none!important}
.account-menu{
  position:absolute;right:0;top:calc(100% + 9px);z-index:2600;width:236px;
  padding:8px;border-radius:12px;
  background:rgba(18,20,21,.98);border:1px solid rgba(255,255,255,.11);
  box-shadow:0 22px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)
}
.account-menu-title{padding:8px 9px 3px;color:#eef1ed;font-size:12px;font-weight:700}
.account-menu-note{padding:0 9px 8px;color:#747b76;font-size:10px;line-height:1.5}
.account-menu button{
  width:100%;min-height:34px;padding:0 10px;margin:2px 0;border:1px solid transparent;border-radius:8px;
  background:transparent;color:#c9ceca;text-align:left;font-size:11px;cursor:pointer
}
.account-menu button:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.07);color:#fff}
.account-menu .account-menu-primary{color:#edcf8a;background:rgba(238,201,127,.08);border-color:rgba(238,201,127,.12)}
.account-menu-profile{padding:9px 10px 10px;border-bottom:1px solid rgba(255,255,255,.065);margin-bottom:5px;display:grid;gap:3px}
.account-menu-profile b{font-size:13px;color:#f0f2ef;overflow:hidden;text-overflow:ellipsis}
.account-menu-profile small{font-size:10px;color:#959b96}
.account-menu-profile em{font-style:normal;font-size:9px;color:#e0bf77}
.account-menu-separator{height:1px;background:rgba(255,255,255,.06);margin:5px 4px}
.preview-auth-form{display:grid;gap:10px}
.preview-auth-form label{display:grid;gap:6px;color:#aeb4af;font-size:11px}
.preview-auth-form input{width:100%;box-sizing:border-box;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,.09);background:#101213;color:#eef1ed;outline:none}
.preview-auth-switch{border:0;background:transparent;color:#d8ba75;font-size:11px;cursor:pointer;padding:7px}
.top-actions>#createWorldBtn,.top-actions>#createCharacterBtn,.top-actions>#createCameraBtn{pointer-events:auto!important}

/* Preview topbar interaction recovery · prevent transparent floating layers from stealing clicks */
.topbar{
  z-index:200!important;
  pointer-events:auto!important;
  isolation:isolate!important;
}
.top-actions{
  position:relative!important;
  z-index:240!important;
  pointer-events:auto!important;
  isolation:isolate!important;
}
.top-actions>*{
  pointer-events:auto!important;
}
.account-control,.account-badge{
  pointer-events:auto!important;
}
.rail{
  z-index:220!important;
  pointer-events:none!important;
}
.rail .rail-item{
  pointer-events:auto!important;
}
.rail-spacer{
  pointer-events:none!important;
}
.body-grid{
  z-index:1!important;
}

/* Account menu · same glass language as the editor */
.account-menu{
  width:258px!important;
  padding:10px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(20,24,26,.48) 46%,rgba(10,13,15,.40))!important;
  border:1px solid rgba(255,255,255,.17)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(32px) saturate(118%) brightness(1.06)!important;
  -webkit-backdrop-filter:blur(32px) saturate(118%) brightness(1.06)!important;
}
.account-menu-profile{
  margin-bottom:8px!important;
  padding:10px 11px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.account-info-row,.account-menu button{
  min-height:38px!important;
  margin:5px 0!important;
  padding:0 11px!important;
  border-radius:9px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.022))!important;
  box-shadow:0 8px 20px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.09)!important;
  backdrop-filter:blur(18px) saturate(110%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(110%)!important;
}
.account-info-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.account-info-row span{font-size:10px;color:#8d948f}
.account-info-row strong{font-size:10px;color:#d9ddd9;font-weight:560;max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu button:hover,.account-menu button:focus-visible,.account-menu button:active{
  color:#17120b!important;
  border-color:#f7d68f!important;
  background:linear-gradient(180deg,#ffe2a4 0%,#eec97f 58%,#e5b967 100%)!important;
  box-shadow:0 0 0 1px rgba(255,240,198,.18),0 8px 22px rgba(238,201,127,.24),0 0 20px rgba(238,201,127,.12),inset 0 1px 0 rgba(255,250,230,.78)!important;
}
.account-menu-primary{
  color:#f6d78f!important;
  border-color:rgba(238,201,127,.30)!important;
}
.account-menu-separator{background:rgba(255,255,255,.08)!important;margin:7px 3px!important}
.profile-glass-modal .preview-simple-card{
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(18,22,24,.58) 45%,rgba(9,12,14,.48))!important;
  border:1px solid rgba(255,255,255,.17)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.15)!important;
  backdrop-filter:blur(34px) saturate(118%) brightness(1.05)!important;
  -webkit-backdrop-filter:blur(34px) saturate(118%) brightness(1.05)!important;
}
.profile-form input{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.02))!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* Preview V50 · isolated viewport HUD inspired by compact 3D editors */
.viewport{isolation:isolate!important}
.viewport-scene{z-index:1!important;pointer-events:auto!important}
#previewCanvas{z-index:1!important}
.axis-gizmo,.north-compass{z-index:20!important;pointer-events:none!important}
.axis-gizmo{top:auto!important;bottom:16px!important;left:18px!important}
.north-compass{top:auto!important;bottom:24px!important;left:92px!important}

.viewport-hud-top{
  position:absolute;z-index:140;top:14px;left:18px;
  display:flex;align-items:flex-start;gap:10px;
  pointer-events:auto!important
}
.hud-dropdown{position:relative;pointer-events:auto!important}
.hud-trigger{
  min-width:136px;height:42px;padding:0 14px 0 17px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid rgba(255,255,255,.16);border-radius:13px;
  background:linear-gradient(145deg,rgba(42,52,61,.92),rgba(24,31,37,.90));
  color:#f2f4f2;font-size:12px;font-weight:620;letter-spacing:.01em;
  box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter:blur(14px) saturate(112%);-webkit-backdrop-filter:blur(14px) saturate(112%);
  cursor:pointer;pointer-events:auto!important
}
#displayDropdown .hud-trigger{min-width:132px}
#qualityDropdown .hud-trigger{min-width:118px}
.hud-trigger svg{width:15px;height:15px;fill:none;stroke:#c8ceca;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .14s ease}
.hud-dropdown.open .hud-trigger svg,.hud-dropdown:hover .hud-trigger svg{transform:rotate(180deg)}
.hud-dropdown.open .hud-trigger,.hud-dropdown:hover .hud-trigger{
  border-color:rgba(238,201,127,.30);
  box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16),0 0 14px rgba(238,201,127,.05)
}
.hud-menu{
  position:absolute!important;z-index:160!important;left:0!important;top:calc(100% + 7px)!important;
  min-width:100%!important;width:max-content!important;max-width:220px!important;
  display:grid!important;gap:4px!important;padding:7px!important;
  border:1px solid rgba(255,255,255,.15)!important;border-radius:12px!important;
  background:linear-gradient(145deg,rgba(24,31,36,.97),rgba(12,16,19,.96))!important;
  box-shadow:0 22px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(16px) saturate(110%)!important;-webkit-backdrop-filter:blur(16px) saturate(110%)!important;
  opacity:0;visibility:hidden;transform:translateY(-4px) scale(.985);transform-origin:top left;
  pointer-events:none!important;transition:opacity .11s ease,transform .11s ease,visibility .11s linear
}
.hud-dropdown:hover .hud-menu,.hud-dropdown.open .hud-menu,.hud-dropdown:focus-within .hud-menu{
  opacity:1;visibility:visible;transform:none;pointer-events:auto!important
}
.hud-menu .small-chip,.hud-menu .mode-btn,.hud-menu .quality-btn{
  width:100%!important;min-width:132px!important;height:32px!important;padding:0 11px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:8px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015))!important;
  color:#e8ebe8!important;font-size:10px!important;text-align:left!important;
  pointer-events:auto!important;cursor:pointer!important
}
.hud-menu .small-chip:hover,.hud-menu .mode-btn:hover,.hud-menu .quality-btn:hover,
.hud-menu .small-chip.active,.hud-menu .mode-btn.active,.hud-menu .quality-btn.active{
  color:#f6d790!important;
  background:linear-gradient(145deg,rgba(238,201,127,.13),rgba(255,255,255,.025))!important;
  border-color:rgba(238,201,127,.30)!important;
  box-shadow:inset 2px 0 0 var(--ds-optical-accent),0 6px 16px rgba(0,0,0,.12)!important
}
#renderQuality .quality-btn.member-locked,#renderQuality .quality-btn:disabled.member-locked{
  color:rgba(215,219,216,.32)!important;cursor:not-allowed!important;opacity:.52!important;
  background:rgba(255,255,255,.018)!important;border-color:rgba(255,255,255,.045)!important;box-shadow:none!important
}

.viewport-toolbox{
  position:absolute;z-index:135;left:18px;top:82px;
  display:flex;flex-direction:column;gap:5px;padding:5px;
  border:1px solid rgba(255,255,255,.15);border-radius:14px;
  background:linear-gradient(160deg,rgba(29,37,43,.92),rgba(17,23,27,.90));
  box-shadow:0 18px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(110%);-webkit-backdrop-filter:blur(14px) saturate(110%);
  pointer-events:auto!important
}
.viewport-tool{
  width:42px!important;height:42px!important;display:grid!important;place-items:center!important;
  padding:0!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:9px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015))!important;
  color:#f0f2ef!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
  cursor:pointer!important;pointer-events:auto!important
}
.viewport-tool svg{width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.viewport-tool:hover,.viewport-tool.active{
  color:#f6d790!important;border-color:rgba(238,201,127,.34)!important;
  background:linear-gradient(145deg,rgba(238,201,127,.14),rgba(255,255,255,.025))!important;
  box-shadow:0 7px 18px rgba(0,0,0,.13),inset 2px 0 0 var(--ds-optical-accent),0 0 13px rgba(238,201,127,.05)!important
}
.viewport-tool.grid-toggle{width:42px!important;height:42px!important}
.viewport-tool.grid-toggle.active{color:#f6d790!important}

.viewport-top-right,.display-stack,.viewport-bottom-right{pointer-events:none!important}
.view-controls:not(.hud-menu){display:none!important}

/* Account menu: visually separate from the right inspector and cheaper to composite */
.account-menu{
  width:270px!important;
  background:linear-gradient(155deg,rgba(24,30,34,.975),rgba(11,15,18,.965))!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 26px 64px rgba(0,0,0,.46),0 0 0 1px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.11)!important;
  backdrop-filter:blur(10px) saturate(105%)!important;-webkit-backdrop-filter:blur(10px) saturate(105%)!important;
  contain:layout paint style;will-change:opacity,transform
}
.account-menu-profile,.account-info-row,.account-menu button{
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important
}

@media(max-width:1120px){
  .viewport-hud-top{gap:6px;left:12px;top:10px}
  .hud-trigger{min-width:112px;height:38px;padding:0 11px;font-size:10px}
  #displayDropdown .hud-trigger{min-width:105px}
  #qualityDropdown .hud-trigger{min-width:96px}
  .viewport-toolbox{left:12px;top:64px}
  .viewport-tool{width:38px!important;height:38px!important}
}

/* Preview V51 · requested HUD positions, click-only menus and membership avatar marks */
.axis-gizmo{
  top:18px!important;bottom:auto!important;left:18px!important;
}
.north-compass{
  top:30px!important;bottom:auto!important;left:88px!important;
}

.viewport-hud-top{
  top:14px!important;right:18px!important;left:auto!important;
  gap:8px!important;
}
.viewport-toolbox{
  left:18px!important;top:50%!important;
  transform:translateY(-50%)!important;
}

/* Click-only expansion: hovering no longer creates/destroys blur layers. */
.hud-dropdown:hover .hud-menu{
  opacity:0!important;visibility:hidden!important;
  transform:translateY(-3px)!important;pointer-events:none!important;
}
.hud-dropdown.open .hud-menu,
.hud-dropdown.open:hover .hud-menu,
.hud-dropdown:focus-within.open .hud-menu{
  opacity:1!important;visibility:visible!important;
  transform:none!important;pointer-events:auto!important;
}
.hud-dropdown:hover .hud-trigger svg{transform:none!important}
.hud-dropdown.open .hud-trigger svg,
.hud-dropdown.open:hover .hud-trigger svg{transform:rotate(180deg)!important}
.hud-trigger,.hud-menu,.viewport-toolbox{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:none!important;
}
.hud-trigger{
  background:linear-gradient(145deg,rgba(45,55,63,.96),rgba(24,30,35,.96))!important;
}
.hud-menu{
  background:linear-gradient(145deg,rgba(28,35,40,.985),rgba(13,17,20,.985))!important;
  contain:layout paint style;
  will-change:auto!important;
}
.viewport-toolbox{
  background:linear-gradient(160deg,rgba(31,39,45,.965),rgba(17,22,26,.965))!important;
}

/* Account entry: rectangular glass frame with a true circular avatar. */
.account-control{margin-left:2px!important}
.account-badge{
  position:relative!important;
  width:48px!important;min-width:48px!important;max-width:48px!important;
  height:36px!important;padding:3px!important;
  display:grid!important;place-items:center!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(21,27,31,.78))!important;
  border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;
  overflow:visible!important;
}
.account-avatar{
  width:28px!important;height:28px!important;
  display:block!important;border-radius:50%!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)!important;
}
.account-avatar img,.account-avatar svg{
  width:100%!important;height:100%!important;display:block!important;
  object-fit:cover!important;border-radius:50%!important;
}
.membership-avatar-mark{
  position:absolute;right:-1px;bottom:0px;z-index:3;
  font-family:"Arial Narrow","Avenir Next Condensed","Segoe UI",sans-serif;
  font-size:8px;font-weight:900;font-style:italic;line-height:1;
  letter-spacing:-.06em;transform:skewX(-10deg);
  pointer-events:none;user-select:none;
  -webkit-font-smoothing:antialiased;
}
.membership-avatar-mark.vip{
  color:#ff4a4a;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 5px rgba(255,45,45,.42);
}
.membership-avatar-mark.svip{
  color:#f6d66e;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(246,214,110,.45);
}

/* Keep the account popup visually solid enough over the right inspector. */
.account-menu{
  background:linear-gradient(155deg,rgba(25,31,35,.988),rgba(11,15,18,.982))!important;
  backdrop-filter:blur(5px) saturate(102%)!important;
  -webkit-backdrop-filter:blur(5px) saturate(102%)!important;
}

@media(max-width:1120px){
  .viewport-hud-top{right:12px!important;left:auto!important;top:10px!important}
  .viewport-toolbox{left:12px!important;top:50%!important;transform:translateY(-50%)!important}
  .axis-gizmo{left:12px!important;top:12px!important;bottom:auto!important}
  .north-compass{left:78px!important;top:24px!important;bottom:auto!important}
}

/* Preview V52 · non-dimming creation dialogs, restored top operations and autosave status */
.creation-backdrop{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.creation-dialog{
  background:linear-gradient(145deg,rgba(31,40,46,.95),rgba(17,23,27,.94) 54%,rgba(12,17,20,.94))!important;
  border:1px solid rgba(255,255,255,.17)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.14)!important;
  backdrop-filter:blur(18px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(112%)!important;
}
.creation-modal{
  background:transparent!important;
}
body.modal-open .studio{
  filter:none!important;
  opacity:1!important;
}

/* Restore the original top operation cluster instead of pushing it off-screen. */
.history{
  display:flex!important;
  order:0!important;
  margin-left:10px!important;
  padding-left:9px!important;
  border-left:1px solid rgba(255,255,255,.09)!important;
  flex:0 0 auto!important;
}
.history button{
  width:31px!important;height:31px!important;
  display:grid!important;place-items:center!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.035)!important;
  color:#d9ded9!important;
}
.history button:hover:not(:disabled){
  color:#f4d58f!important;
  border-color:rgba(238,201,127,.28)!important;
  background:rgba(238,201,127,.08)!important;
}
.history button:disabled{
  opacity:.32!important;
  cursor:default!important;
}
.top-status{
  display:flex!important;
  position:static!important;
  left:auto!important;
  transform:none!important;
  margin-left:10px!important;
  min-width:76px!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  color:#c2c8c3!important;
}
.top-status b{
  font-size:10px!important;
  font-weight:560!important;
  white-space:nowrap!important;
}
.top-status span{
  width:7px!important;height:7px!important;
  background:#7fc08b!important;
  box-shadow:0 0 8px rgba(127,192,139,.28)!important;
}
.top-status[data-state="pending"] span{background:#d7b666!important;box-shadow:0 0 8px rgba(215,182,102,.26)!important}
.top-status[data-state="saving"] span{
  background:#f1cc77!important;
  animation:daailokSavingPulse .8s ease-in-out infinite alternate
}
.top-status[data-state="error"] span{background:#df6767!important;box-shadow:0 0 8px rgba(223,103,103,.28)!important}
.top-status[data-state="offline"] span{background:#777d78!important;box-shadow:none!important}
@keyframes daailokSavingPulse{from{opacity:.45;transform:scale(.82)}to{opacity:1;transform:scale(1.08)}}
.top-actions{margin-left:auto!important;min-width:0!important}
.brand{flex:0 0 auto!important}

/* Profile save gets immediate visual response without expensive glow animation. */
.profile-form .preview-primary:disabled{
  opacity:.68!important;
  cursor:wait!important;
  box-shadow:none!important;
}

/* Preview V53 · restore original scene/character/light top function navigation */
.topbar{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  overflow:visible!important;
}
.top-function-nav.rail{
  position:relative!important;
  inset:auto!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  height:58px!important;width:auto!important;min-height:0!important;
  flex:0 1 auto!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;
  gap:3px!important;margin:0 8px 0 6px!important;padding:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  z-index:auto!important;pointer-events:auto!important;
  overflow:visible!important
}
.top-function-nav .rail-item{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;height:36px!important;min-width:0!important;
  margin:0!important;padding:0 9px!important;gap:6px!important;
  border:1px solid transparent!important;border-radius:8px!important;
  color:#cbd0cc!important;background:transparent!important;
  pointer-events:auto!important;white-space:nowrap!important
}
.top-function-nav .rail-item svg{
  width:16px!important;height:16px!important;flex:0 0 auto!important
}
.top-function-nav .rail-item:after{
  content:attr(title)!important;position:static!important;display:inline!important;
  width:auto!important;height:auto!important;background:none!important;
  font-size:10px!important;line-height:1!important;color:inherit!important
}
.top-function-nav .rail-item:hover{
  color:#f5f6f2!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.075)!important
}
.top-function-nav .rail-item.active{
  color:#f6d790!important;
  background:linear-gradient(145deg,rgba(238,201,127,.14),rgba(255,255,255,.025))!important;
  border-color:rgba(238,201,127,.25)!important;
  box-shadow:inset 2px 0 0 var(--ds-optical-accent)!important
}
.top-function-nav .rail-item.active svg{color:#f6d790!important}
.top-function-nav .rail-spacer,
.top-function-nav [data-tool="help"],
.top-function-nav [data-tool="settings"]{display:none!important}

.history{flex:0 0 auto!important;margin-left:4px!important}
.top-status{flex:0 0 auto!important;margin-left:7px!important}
.top-actions{flex:0 0 auto!important;margin-left:auto!important}

@media(max-width:1380px){
  .brand{min-width:184px!important}
  .top-function-nav.rail{margin-left:2px!important;margin-right:4px!important}
  .top-function-nav .rail-item{padding:0 6px!important;gap:4px!important}
  .top-function-nav .rail-item:after{font-size:9px!important}
  .history{margin-left:1px!important;padding-left:5px!important}
  .top-status{margin-left:4px!important;min-width:62px!important}
  .top-actions{gap:5px!important}
  .top-actions .top-primary,.top-actions .top-quiet{padding-left:9px!important;padding-right:9px!important}
}
@media(max-width:1120px){
  .top-function-nav .rail-item:after{display:none!important}
  .top-function-nav .rail-item{width:32px!important;padding:0!important}
  .top-function-nav.rail{margin-right:5px!important}
}

/* Project library · blank-start workflow */
.project-pane-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0 12px
}
.project-pane-head>div{display:grid;gap:3px}
.project-pane-head b{font-size:11px;color:#f1f3ef}
.project-pane-head span{font-size:9px;color:#7f8882;line-height:1.45}
.asset-library-add.compact{width:auto!important;min-width:92px!important;padding:0 10px!important;white-space:nowrap}
.project-list{display:grid;gap:7px}
.project-card{
  width:100%;min-height:58px;padding:9px 10px;
  display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;
  text-align:left;border:1px solid rgba(255,255,255,.095);border-radius:10px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  color:#dfe3df;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  cursor:pointer
}
.project-card:hover{
  border-color:rgba(238,201,127,.27);
  background:linear-gradient(145deg,rgba(238,201,127,.09),rgba(255,255,255,.022))
}
.project-card.active{
  color:#f6d891;border-color:rgba(238,201,127,.36);
  background:linear-gradient(145deg,rgba(238,201,127,.13),rgba(255,255,255,.025));
  box-shadow:inset 2px 0 0 #efc977,0 8px 20px rgba(0,0,0,.10)
}
.project-card-icon{
  width:28px;height:28px;display:grid;place-items:center;border-radius:8px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);
  font-size:15px;color:#d8bc7a
}
.project-card>span:nth-child(2){display:grid;gap:3px;min-width:0}
.project-card b{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-card small{font-size:8.5px;color:#7d867f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-card em{font-style:normal;font-size:9px;color:#999f9a}
.project-generation-label{
  color:var(--ds-studio-accent-soft,#f0cf86)!important;
  font-weight:620;
}
.project-generation-track{
  width:100%;height:4px;margin-top:2px;overflow:hidden;
  border-radius:999px;background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18)
}
.project-generation-bar{
  display:block;height:100%;min-width:3px;border-radius:inherit;
  background:linear-gradient(90deg,rgba(239,201,127,.70),rgba(255,224,151,.98));
  box-shadow:0 0 8px rgba(239,201,127,.28);
  transition:width .28s ease
}
.project-card[data-generation-status="failed"] .project-generation-label{
  color:#d89b91!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.project-card[data-generation-status="success"] .project-generation-label{color:var(--ds-studio-accent-soft,#f0cf86)!important}

.prop-empty{
  min-height:150px;display:grid;place-items:center;align-content:center;gap:7px;
  padding:20px;text-align:center;color:#7f8782
}
.prop-empty b{font-size:12px;color:#dfe3df}
.prop-empty span{max-width:245px;font-size:9px;line-height:1.65}

/* Testing Store entry */
.store-hero{
  padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:11px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)
}
.store-hero b{display:block;color:#f0f2ee;font-size:12px}
.store-hero span{display:block;margin-top:6px;color:#8c958f;font-size:9px;line-height:1.65}
.store-tabs{grid-template-columns:repeat(3,1fr)!important}
.store-nav-item svg{stroke-linejoin:round}

/* Navigation/home + Create World model import */
.creation-model-option{
  width:100%;min-height:50px;margin-top:9px;padding:9px 11px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid rgba(255,255,255,.10);border-radius:9px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  color:#dfe3df;text-align:left
}
.creation-model-option[hidden]{display:none!important}
.creation-model-option:hover{
  border-color:rgba(238,201,127,.30);
  background:linear-gradient(145deg,rgba(238,201,127,.09),rgba(255,255,255,.025))
}
.creation-model-option span{display:grid;gap:3px;min-width:0}
.creation-model-option b{font-size:10px;color:#f0f2ee}
.creation-model-option small,.creation-model-option em{font-size:8px;color:#7e8781;font-style:normal}
.creation-model-option em{max-width:116px;text-align:right;line-height:1.35}


/* Preview V54 · interaction polish: role cards, aligned HUD, unified accent and larger editor text */


/* Top creation actions are neutral until they are actually active. */
.top-actions .top-primary,
.top-actions .top-quiet{
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(21,27,31,.74))!important;
  border-color:rgba(255,255,255,.13)!important;
  color:#cbd0cc!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.top-actions .top-primary:hover,
.top-actions .top-quiet:hover{
  color:#f5f6f2!important;
  border-color:rgba(255,255,255,.22)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(26,32,36,.82))!important;
}
.top-actions .top-primary.creation-active,
.top-actions .top-quiet.creation-active,
.top-actions .top-primary:active,
.top-actions .top-quiet:active{
  background:var(--ds-optical-accent)!important;
  border-color:var(--ds-optical-accent)!important;
  color:#17120b!important;
  box-shadow:0 0 0 1px rgba(255,239,192,.20),0 7px 18px rgba(var(--ds-optical-accent-rgb),.18)!important;
}

/* Role presets: icon + one aligned label only. */
.character-preset-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
}
.character-preset{
  min-width:0!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:0 9px!important;
  text-align:left!important;
}
.character-preset-icon{
  width:25px!important;height:25px!important;flex:0 0 25px!important;
  display:grid!important;place-items:center!important;
  color:#cdd1cd!important;
}
.character-preset-icon svg{
  width:22px!important;height:22px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.65!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
.character-preset b{
  margin:0!important;
  font-size:12px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.character-preset.active .character-preset-icon,
.character-preset.active b{color:var(--ds-optical-accent)!important}

/* The three viewport mode selectors become compact icon controls. */
.viewport-hud-top{
  top:14px!important;right:18px!important;left:auto!important;
  align-items:flex-start!important;gap:7px!important;
}
.hud-trigger,
#displayDropdown .hud-trigger,
#qualityDropdown .hud-trigger{
  width:44px!important;min-width:44px!important;max-width:44px!important;
  height:44px!important;padding:0 5px!important;
  display:grid!important;grid-template-columns:1fr 9px!important;
  align-items:center!important;justify-items:center!important;gap:1px!important;
  border-radius:12px!important;
}
.hud-trigger-label{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.hud-trigger .hud-main-icon{
  width:21px!important;height:21px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.65!important;
  transform:none!important;
}
.hud-trigger .hud-chevron{width:9px!important;height:9px!important}
.hud-dropdown.open .hud-trigger .hud-main-icon,
.hud-dropdown:hover .hud-trigger .hud-main-icon{transform:none!important}
.hud-dropdown.open .hud-trigger .hud-chevron,
.hud-dropdown.open:hover .hud-trigger .hud-chevron{transform:rotate(180deg)!important}

/* Compass shares the top row with the right controls and the left x-axis with the tool box. */
.north-compass{
  left:18px!important;top:14px!important;right:auto!important;bottom:auto!important;
  width:44px!important;height:44px!important;
  transform:none!important;transform-origin:center!important;
  border-radius:12px!important;
}
.north-compass:before{
  left:5px!important;right:5px!important;top:21px!important;height:1px!important;
  background:linear-gradient(90deg,rgba(255,255,255,.42) 0 5px,transparent 5px calc(100% - 5px),rgba(255,255,255,.42) calc(100% - 5px))!important;
}
.north-compass:after{
  content:""!important;position:absolute!important;top:5px!important;bottom:5px!important;left:21px!important;width:1px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.36) 0 5px,transparent 5px calc(100% - 5px),rgba(255,255,255,.36) calc(100% - 5px))!important;
}
.north-letter{top:2px!important;font-size:8px!important}
.north-needle{
  left:14px!important;top:10px!important;width:16px!important;height:25px!important;
  transform-origin:8px 12.5px!important;
  background:linear-gradient(90deg,var(--ds-optical-accent) 0 50%,#f03b3b 50% 100%)!important;
  clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%)!important;
}
.north-needle:before,.north-needle:after{content:none!important}
.north-center{
  left:20px!important;top:20px!important;width:4px!important;height:4px!important;
  background:#f4f0e7!important;border:0!important;
}
.viewport-toolbox{
  left:18px!important;top:50%!important;transform:translateY(-50%)!important;
}

/* The account avatar is mathematically centered in its rectangular button. */
.account-badge{position:relative!important;display:block!important;padding:0!important}
.account-avatar{
  position:absolute!important;left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;margin:0!important;
}

/* One yellow across the inspector instead of several gold variants. */
.properties-panel .selection-symbol,
.properties-panel .selection-status,
.properties-panel .selection-summary em,
.properties-panel .quick-actions button,
.properties-panel .sub-title,
.properties-panel .edit-mode-banner span,
.properties-panel .edit-mode-banner button{
  color:var(--ds-optical-accent)!important;
}
.properties-panel .selection-status,
.properties-panel .quick-actions button,
.properties-panel .edit-mode-banner,
.properties-panel input[type="range"]{
  border-color:rgba(var(--ds-optical-accent-rgb),.30)!important;
  accent-color:var(--ds-optical-accent)!important;
}
.properties-panel .quick-actions button:hover{
  color:#17120b!important;background:var(--ds-optical-accent)!important;border-color:var(--ds-optical-accent)!important;
}
.properties-panel .prop-row input[readonly]{color:var(--ds-optical-accent)!important}
.swatch.active{outline-color:var(--ds-optical-accent)!important}

/* Larger navigation, layer and inspector typography. */
.top-function-nav .rail-item:after{font-size:11.5px!important;font-weight:600!important}
.top-function-nav .rail-item svg{width:17px!important;height:17px!important}
.layer-folder-row>b,
.layer-row>b{font-size:12px!important;font-weight:600!important}
.layer-toolbar button,.layer-toolbar span,.folder-count,.layer-state{font-size:10px!important}
.properties-panel .selection-summary small{font-size:11px!important}
.properties-panel .selection-summary b{font-size:13.5px!important}
.properties-panel .selection-summary em,
.properties-panel .selection-status{font-size:11px!important}
.properties-panel .prop-row>span,
.properties-panel .prop-slider>span,
.properties-panel .prop-block-title,
.properties-panel .sub-title,
.properties-panel .check-row,
.properties-panel .light-control-grid label>span,
.properties-panel .light-color-row>span{font-size:12px!important}
.properties-panel .prop-row input,
.properties-panel .prop-row select,
.properties-panel .axis-input input,
.properties-panel .prop-slider output{font-size:12.5px!important}
.properties-panel .quick-actions button{font-size:11.5px!important}
.properties-panel .rig-note b{font-size:12px!important}
.properties-panel .rig-note span{font-size:11.5px!important;line-height:1.62!important}
@media(max-width:1380px){
  .top-function-nav .rail-item:after{font-size:10.5px!important}
  .viewport-hud-top{right:12px!important}
  .north-compass,.viewport-toolbox{left:12px!important}
}


/* Preview V56 · one global selected-state language, based on the left navigation active state */


/* Keep ordinary text and ordinary controls neutral. Selected color is never a default text color. */
#propertiesPanel .selection-symbol{color:#cbd0cc!important}
#propertiesPanel .selection-status{color:#aeb2ae!important;border-color:rgba(255,255,255,.10)!important}
#propertiesPanel .selection-summary em{color:#8d918e!important}
#propertiesPanel .sub-title{color:#8d918e!important}
#propertiesPanel .edit-mode-banner span{color:#cbd0cc!important}
#propertiesPanel .edit-mode-banner button{color:#cbd0cc!important}
#propertiesPanel .prop-row input[readonly]{color:#e1dfd7!important}
#propertiesPanel .quick-actions button{
  color:#cbd0cc!important;
  border-color:rgba(255,255,255,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(21,27,31,.74))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#propertiesPanel .quick-actions button:hover{
  color:#f5f6f2!important;
  border-color:rgba(255,255,255,.22)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(26,32,36,.82))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}
/* Historical CSS highlighted the first property action even when it was not selected. Cancel that behavior. */
#propertiesPanel .quick-actions button:first-child:not(.active){
  color:#cbd0cc!important;
  border-color:rgba(255,255,255,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(21,27,31,.74))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#propertiesPanel input[type="range"]{accent-color:var(--ds-studio-selected-line)!important}

/* Neutral creation buttons. No button is permanently highlighted. */
#createWorldBtn:not(.creation-active),
#createCharacterBtn:not(.creation-active),
#createCameraBtn:not(.creation-active){
  color:#cbd0cc!important;
  border-color:rgba(255,255,255,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(21,27,31,.74))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* Every persistent selected / active / open option uses EXACTLY the left navigation state. */
.top-function-nav .rail-item.active,
.viewport-tool.active,
.viewport-tool.grid-toggle.active,
.chip.active,
.drawer-item.active,
.drawer-pill.active,
.asset-tab.active,
.character-preset.active,
.mode-btn.active,
.small-chip.active,
.quality-btn.active,
.project-card.active,
.quick-actions button.active,
.transform-actions button.active,
.timeline-actions button.active,
.export-tools button.active,
.joint-dot.active,
.layer-row.active,
.shot-card.active,
.swatch.active,
.camera-shot-add,
button[aria-pressed="true"],
[aria-selected="true"],
.hud-dropdown.open > .hud-trigger,
#createWorldBtn.creation-active,
#createCharacterBtn.creation-active,
#createCameraBtn.creation-active{
  color:var(--ds-studio-selected-fg)!important;
  border-color:var(--ds-studio-selected-border)!important;
  background:var(--ds-studio-selected-bg)!important;
  box-shadow:var(--ds-studio-selected-shadow)!important;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease!important;
}

/* Active content inherits the same foreground; no separate right-side / left-side golds. */
.top-function-nav .rail-item.active svg,
.viewport-tool.active svg,
.viewport-tool.grid-toggle.active svg,
.drawer-item.active svg,
.drawer-item.active .drawer-icon,
.drawer-pill.active svg,
.asset-tab.active svg,
.character-preset.active svg,
.character-preset.active b,
.character-preset.active .character-preset-icon,
.mode-btn.active svg,
.small-chip.active svg,
.quality-btn.active svg,
.project-card.active svg,
.quick-actions button.active svg,
.transform-actions button.active svg,
.timeline-actions button.active svg,
.export-tools button.active svg,
.joint-dot.active svg,
.layer-row.active .layer-icon,
.layer-row.active b,
.layer-row.active .layer-state,
.shot-card.active b,
button[aria-pressed="true"] svg,
[aria-selected="true"] svg,
.hud-dropdown.open > .hud-trigger .hud-main-icon,
#createWorldBtn.creation-active,
#createCharacterBtn.creation-active,
#createCameraBtn.creation-active{
  color:var(--ds-studio-selected-fg)!important;
  stroke:currentColor!important;
}

/* Open top-right view/display/quality controls and selected menu rows match left-side selected controls. */
.hud-dropdown.open > .hud-trigger{
  transform:none!important;
}
.hud-dropdown.open > .hud-trigger .hud-chevron{
  color:var(--ds-studio-selected-fg)!important;
  stroke:currentColor!important;
}

/* Remove old filled-yellow press treatment; mouse-down only compresses slightly. */
#createWorldBtn:active,
#createCharacterBtn:active,
#createCameraBtn:active,
.viewport-tool:active,
.drawer-item:active,
.drawer-pill:active,
.asset-tab:active,
.character-preset:active,
.mode-btn:active,
.small-chip:active,
.quality-btn:active{
  transform:scale(.985)!important;
}

/* Selected swatches use the same navigation accent line, without recoloring unrelated text. */
.swatch.active{outline-color:var(--ds-studio-selected-line)!important}


/* Preview V57 · Object Properties now obeys the global interaction language */
#propertiesPanel .selection-summary,
#propertiesPanel .rig-note,
#propertiesPanel .subsection{
  border-color:rgba(255,255,255,.085)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.014))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#propertiesPanel .selection-symbol{
  color:#d7dcd8!important;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.022))!important;
  border:1px solid rgba(255,255,255,.095)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
#propertiesPanel .selection-status{
  color:#aeb4b0!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:none!important;
}
#propertiesPanel .selection-summary small,
#propertiesPanel .selection-summary em,
#propertiesPanel .rig-note span,
#propertiesPanel .sub-title,
#propertiesPanel .prop-row>span,
#propertiesPanel .prop-slider>span,
#propertiesPanel .light-control-grid label,
#propertiesPanel .light-control-grid output,
#propertiesPanel .light-color-row>span,
#propertiesPanel .check-row{
  color:#969d98!important;
}
#propertiesPanel .selection-summary b,
#propertiesPanel .rig-note b,
#propertiesPanel .prop-block-title{
  color:#e8ebe8!important;
}

/* Fields are neutral. Yellow/gold is reserved for a real active state only. */
#propertiesPanel .prop-row input,
#propertiesPanel .prop-row select,
#propertiesPanel .axis-input,
#propertiesPanel .prop-slider output,
#propertiesPanel .light-color-row input[type="color"]{
  color:#e3e7e3!important;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#propertiesPanel .prop-row input[readonly]{
  color:#c8ceca!important;
}
#propertiesPanel input[type="range"],
#propertiesPanel input[type="checkbox"],
#propertiesPanel input[type="radio"]{
  accent-color:#aeb5b0!important;
}
#propertiesPanel input:focus-visible,
#propertiesPanel select:focus-visible,
#propertiesPanel button:focus-visible{
  outline:1px solid rgba(246,215,144,.56)!important;
  outline-offset:2px!important;
}

/* Ordinary property buttons use the same neutral idle/hover states as the rest of the editor. */
#propertiesPanel .quick-actions button,
#propertiesPanel .transform-actions button,
#propertiesPanel .edit-mode-banner button{
  color:#cbd0cc!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(21,27,31,.74))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#propertiesPanel .quick-actions button:hover,
#propertiesPanel .transform-actions button:hover,
#propertiesPanel .edit-mode-banner button:hover{
  color:#f5f6f2!important;
  border-color:rgba(255,255,255,.22)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(26,32,36,.82))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* Persistent property actions use exactly the same active recipe as the left navigation. */
#propertiesPanel .quick-actions button.active,
#propertiesPanel .transform-actions button.active,
#propertiesPanel button[aria-pressed="true"],
#propertiesPanel .check-row:has(input:checked){
  color:var(--ds-studio-selected-fg)!important;
  border-color:var(--ds-studio-selected-border)!important;
  background:var(--ds-studio-selected-bg)!important;
  box-shadow:var(--ds-studio-selected-shadow)!important;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease!important;
}

/* Group-edit is a real persistent mode, so the banner uses the same global active treatment. */
#propertiesPanel .edit-mode-banner{
  color:var(--ds-studio-selected-fg)!important;
  border:1px solid var(--ds-studio-selected-border)!important;
  background:var(--ds-studio-selected-bg)!important;
  box-shadow:var(--ds-studio-selected-shadow)!important;
}
#propertiesPanel .edit-mode-banner span{
  color:var(--ds-studio-selected-fg)!important;
  background:transparent!important;
}
#propertiesPanel .edit-mode-banner b{color:#edf0ed!important}
#propertiesPanel .edit-mode-banner button{
  color:#d8dcd8!important;
  background:rgba(20,25,29,.62)!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* Swatch selection keeps its material color but uses the one global selection line. */
#propertiesPanel .swatch.active{
  outline:2px solid var(--ds-studio-selected-line)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 1px rgba(238,201,127,.12)!important;
}


/* Preview V58 · property action feedback + session/account sync UI */
#propertiesPanel button.property-action-feedback{
  color:var(--ds-studio-selected-fg)!important;
  border-color:var(--ds-studio-selected-border)!important;
  background:var(--ds-studio-selected-bg)!important;
  box-shadow:var(--ds-studio-selected-shadow)!important;
  transform:scale(.985)!important;
}
#propertiesPanel button.property-action-feedback svg{
  color:var(--ds-studio-selected-fg)!important;
  stroke:currentColor!important;
}


/* Preview V59 · complete HUD menus without viewport clipping */
.viewport{
  overflow:visible!important;
}
.viewport-scene{
  overflow:hidden!important;
  border-radius:inherit!important;
}
.viewport-hud-top{
  z-index:520!important;
  overflow:visible!important;
}
.hud-dropdown{
  z-index:521!important;
  overflow:visible!important;
}
.hud-dropdown.open{z-index:540!important}
.hud-menu{
  z-index:560!important;
  contain:none!important;
  max-height:calc(100vh - 112px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
#displayDropdown .hud-menu,
#qualityDropdown .hud-menu{
  left:auto!important;
  right:0!important;
  transform-origin:top right!important;
}
.test-access-note{
  margin-top:8px;
  color:#aeb4b0!important;
  line-height:1.55;
}


/* Preview V60 · crisp typography, balanced control rhythm, portal HUD and reliable popovers */

html,body{
  font-family:var(--ds-studio-font-family)!important;
  font-size:var(--ds-studio-font-size)!important;
  font-weight:400!important;
  line-height:var(--ds-studio-line-height)!important;
  letter-spacing:0!important;
  text-rendering:auto!important;
  -webkit-font-smoothing:auto!important;
  font-synthesis:none!important;
}
button,input,select,textarea{
  font-family:var(--ds-studio-font-family)!important;
  letter-spacing:0!important;
  text-rendering:auto!important;
  -webkit-font-smoothing:auto!important;
}
strong,b{font-weight:600}
small{line-height:1.4}

/* Remove fractional/synthetic-looking weights from the main editor chrome. */
.brand strong,
.drawer-head h2,.ai-head h2,.section-head h2,.prop-head h2,.timeline-title b,
.account-menu-profile b,.preview-simple-card h3{
  font-weight:600!important;
}
.top-function-nav .rail-item,
.top-actions button,
.hud-menu button,
.viewport-tool,
.drawer-pill,.asset-tab,.character-preset,
.layer-toolbar button,.quick-actions button,.timeline-actions button,.export-tools button{
  font-weight:500!important;
}

/* Consistent spacing for high-frequency controls. */
.top-function-nav .rail-item{
  height:36px!important;
  padding:0 10px!important;
  gap:6px!important;
}
.top-actions button{
  min-height:32px!important;
  padding-left:12px!important;
  padding-right:12px!important;
}
.drawer-item{
  min-height:44px!important;
  padding:8px 10px!important;
  gap:9px!important;
}
.drawer-item b{line-height:1.35!important}
.drawer-item small{margin-top:2px;line-height:1.45!important}
.hud-menu .small-chip,
.hud-menu .mode-btn,
.hud-menu .quality-btn{
  min-width:148px!important;
  height:34px!important;
  padding:0 12px!important;
  font-size:11px!important;
  line-height:1!important;
}
.layer-toolbar button,
.quick-actions button,
.timeline-actions button,
.export-tools button{
  min-height:32px!important;
  padding-left:10px!important;
  padding-right:10px!important;
}
.prop-row input,.prop-row select{
  min-height:34px!important;
  padding-left:9px!important;
  padding-right:9px!important;
  line-height:1.2!important;
}
.account-info-row,.account-menu button{
  min-height:38px!important;
  padding-left:12px!important;
  padding-right:12px!important;
}

/* Account popover must always obey the hidden state. */
.account-menu[hidden]{
  display:none!important;
}

/* HUD menus are promoted to body while open, so no editor panel can crop them. */
.hud-menu.hud-portal-open{
  position:fixed!important;
  z-index:100000!important;
  display:grid!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  pointer-events:auto!important;
  contain:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:linear-gradient(145deg,rgba(28,35,40,.995),rgba(13,17,20,.992))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
body>.hud-menu.hud-portal-open{
  margin:0!important;
}

/* Unified readable tooltip for icon-only controls. */
.ui-icon-tooltip[hidden]{display:none!important}
.ui-icon-tooltip{
  position:fixed;
  z-index:120000;
  max-width:220px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:7px;
  background:rgba(13,17,20,.97);
  color:#f1f3f1;
  box-shadow:0 10px 26px rgba(0,0,0,.34);
  font-family:var(--ds-studio-font-family);
  font-size:11px;
  font-weight:500;
  line-height:1.25;
  white-space:nowrap;
  pointer-events:none;
}

/* Text hierarchy: fewer competing sizes, calmer alignment. */
.drawer-head small,.ai-head small,.section-head small,.prop-head small{
  font-size:9px!important;
  font-weight:500!important;
  letter-spacing:.10em!important;
}
.drawer-head h2,.ai-head h2,.section-head h2,.prop-head h2{
  font-size:15px!important;
  line-height:1.3!important;
}
.drawer-item b,.layer-folder-row>b,.layer-row>b,.selection-summary b{
  font-size:11.5px!important;
}
.drawer-item small,.drawer-note,.ai-feedback,.rig-note span,.shot-info small{
  font-size:10px!important;
}
.layer-toolbar span,.selection-status,.selection-summary small,.selection-summary em{
  font-size:9.5px!important;
}


/* Preview V61 · repair regressions from V60 without changing editor structure */

html,body,
button,input,select,textarea{
  font-family:var(--ds-studio-font-family)!important;
  font-synthesis:none!important;
  text-rendering:auto!important;
  letter-spacing:0!important;
}
html,body{
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.4!important;
}
button,input,select,textarea{font-weight:400!important}
button{font-weight:500!important}
b,strong{font-weight:600!important}

/* Integer pixel typography avoids fractional rasterization on Windows Chromium. */
.brand strong{font-size:14px!important;font-weight:600!important}
.brand em,.top-status b{font-size:10px!important;font-weight:500!important}
.top-function-nav .rail-item{font-size:12px!important;font-weight:500!important}
.top-actions button{font-size:12px!important;font-weight:500!important}
.drawer-head h2,.section-head h2,.prop-head h2,.ai-head h2{font-size:15px!important;font-weight:600!important;line-height:20px!important}
.drawer-head small,.section-head small,.prop-head small,.ai-head small{font-size:9px!important;font-weight:500!important}
.drawer-kicker{font-size:10px!important;font-weight:600!important}
.drawer-item b,.drawer-card b,.asset-library-card b,.cloud-asset-card b,.character-preset b{font-size:12px!important;font-weight:500!important}
.drawer-item small,.drawer-card small,.asset-library-card small,.cloud-asset-card small,.character-preset small,.drawer-note{font-size:10px!important;font-weight:400!important}
.layer-folder-row>b,.layer-row>b{font-size:12px!important;font-weight:500!important}
.folder-count,.layer-state,.layer-toolbar span{font-size:10px!important;font-weight:400!important}
.layer-toolbar button{font-size:11px!important;font-weight:500!important}
.selection-summary b{font-size:12px!important;font-weight:600!important}
.selection-summary small,.selection-summary em,.selection-status{font-size:10px!important}
.prop-row>span,.prop-slider>span{font-size:11px!important;font-weight:400!important}
.prop-row input,.prop-row select{font-size:12px!important;font-weight:400!important}
.quick-actions button,.timeline-actions button,.export-tools button{font-size:11px!important;font-weight:500!important}
.rig-note b,.timeline-title b{font-size:12px!important;font-weight:600!important}
.rig-note span,.timeline-title span,.shot-info small{font-size:10px!important}
.shot-info b{font-size:11px!important;font-weight:500!important}
.track-labels b,.track-ruler span,.track-clip{font-size:9px!important}

/* Scene Layers uses the same title and body scale as the other editor panels. */
#layerSectionTitle{
  font-size:15px!important;
  font-weight:600!important;
  line-height:20px!important;
}
.layers-panel .layer-folder-row>b,
.layers-panel .layer-row>b{
  font-size:12px!important;
  font-weight:500!important;
  line-height:16px!important;
}

/* Restore deliberate motion for the three viewport HUD controls. */
.hud-trigger{
  transition:
    transform .14s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease!important;
}
.hud-trigger .hud-main-icon,
.hud-trigger .hud-chevron{
  transition:transform .16s ease,color .16s ease,stroke .16s ease!important;
}
.hud-trigger:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(238,201,127,.30)!important;
  background:linear-gradient(145deg,rgba(53,64,72,.98),rgba(27,34,39,.98))!important;
  box-shadow:0 12px 26px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.14),0 0 14px rgba(238,201,127,.05)!important;
}
.hud-trigger:hover .hud-main-icon{
  transform:translateY(-1px) scale(1.05)!important;
}
.hud-trigger:active{
  transform:translateY(0) scale(.96)!important;
}
.hud-dropdown.open > .hud-trigger{
  transform:translateY(-1px)!important;
}
.hud-dropdown.open > .hud-trigger .hud-main-icon{
  transform:scale(1.05)!important;
}
.hud-dropdown.open > .hud-trigger .hud-chevron{
  transform:rotate(180deg)!important;
}

/* Portal menus must remain visible regardless of all historical HUD rules. */
body>.hud-menu.hud-portal-open{
  position:fixed!important;
  z-index:100000!important;
  display:grid!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  margin:0!important;
}
body>.hud-menu.hud-portal-open .small-chip,
body>.hud-menu.hud-portal-open .mode-btn,
body>.hud-menu.hud-portal-open .quality-btn{
  width:100%!important;
  min-width:0!important;
  height:34px!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  font-size:11px!important;
  font-weight:500!important;
}

/* Account control: predictable glass hover/press; never flash a filled yellow button. */
.account-badge{
  transition:transform .14s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.account-badge:hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(21,27,31,.80))!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.account-badge:active{
  transform:translateY(0) scale(.96)!important;
  border-color:rgba(238,201,127,.34)!important;
}
.account-menu button,
.account-menu button:hover,
.account-menu button:focus-visible,
.account-menu button:active{
  color:#dce1dd!important;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.account-menu button{
  transition:transform .12s ease,background .14s ease,border-color .14s ease,color .14s ease!important;
}
.account-menu button:hover,
.account-menu button:focus-visible{
  color:#f5f7f4!important;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.028))!important;
  border-color:rgba(255,255,255,.20)!important;
}
.account-menu button:active{
  transform:scale(.985)!important;
  color:var(--ds-studio-selected-fg)!important;
  border-color:var(--ds-studio-selected-border)!important;
}

/* Keep custom tooltips crisp and do not alter labels generated from title attributes. */
.ui-icon-tooltip{
  font-family:var(--ds-studio-font-family)!important;
  font-size:11px!important;
  font-weight:500!important;
  line-height:15px!important;
  padding:5px 8px!important;
}

/* Reduce fractional spacing in high-frequency controls. */
.drawer-item{padding:8px 10px!important}
.layer-folder-row,.layer-row{min-height:32px!important}
.layer-toolbar{gap:6px!important}
.prop-row{gap:10px!important}
.quick-actions,.timeline-actions,.head-actions{gap:6px!important}


/* Preview V62 · precise character cards, panel title parity and asset cleanup */
.character-preset-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
}
.character-preset{
  min-height:76px!important;
  height:76px!important;
  padding:10px 8px 9px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  text-align:center!important;
  overflow:hidden!important;
}
.character-preset-icon{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
}
.character-preset-icon svg{
  width:26px!important;
  height:26px!important;
  display:block!important;
}
.character-preset b{
  margin:0!important;
  padding:0!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:16px!important;
  min-height:16px!important;
  display:block!important;
}

/* Scene Layers title must be visually identical to the other main panel titles. */
#layersPanel .section-head,
#propertiesPanel .prop-head,
.ai-panel .ai-head{
  min-height:45px!important;
  height:45px!important;
  align-items:center!important;
}
#layersPanel #layerSectionTitle,
#propertiesPanel #propertyTitle,
.ai-panel .ai-head h2{
  margin:0!important;
  padding:0!important;
  font-family:var(--ds-studio-font-family)!important;
  font-size:15px!important;
  font-weight:600!important;
  line-height:20px!important;
  letter-spacing:0!important;
}
#layersPanel .section-head small,
#propertiesPanel .prop-head small,
.ai-panel .ai-head small{
  font-size:9px!important;
  font-weight:500!important;
  line-height:13px!important;
  margin:0!important;
}

/* Asset tabs now contain only 3D World and Projects. */
.asset-tabs{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.asset-tab{
  min-height:34px!important;
  padding:0 10px!important;
  text-align:center!important;
}

/* Render-quality glyph remains distinct from view/display controls. */
.render-quality-icon{
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* AI building scene analysis · preview only */
.scene-analysis-folder>.layer-folder-row{
  border-color:rgba(239,201,127,.16);
}
.scene-analysis-folder>.layer-folder-row .folder-icon,
.scene-analysis-layer .layer-icon{
  color:var(--ds-studio-accent-soft,#f0cf86);
}
.scene-analysis-layer .layer-state{
  color:#949b96;
}

/* Scene reconstruction diagnostics · preview only */
body.scene-diagnostic-open{overflow:hidden}
.scene-diagnostic-modal[hidden]{display:none!important}
.scene-diagnostic-modal{
  position:fixed;
  inset:0;
  z-index:3400;
  display:grid;
  place-items:center;
}
.scene-diagnostic-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(10px);
}
.scene-diagnostic-dialog{
  position:relative;
  width:min(1120px,calc(100vw - 36px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(18,20,21,.97);
  box-shadow:0 34px 120px rgba(0,0,0,.68);
}
.scene-diagnostic-head{
  position:sticky;
  top:0;
  z-index:3;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  padding:20px 22px 17px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(18,20,21,.94);
  backdrop-filter:blur(18px);
}
.scene-diagnostic-head small{
  color:#b58a49;
  font-size:9.5px;
  letter-spacing:.14em;
  font-weight:700;
}
.scene-diagnostic-head h2{
  margin:5px 0 5px;
  color:#e6e5e0;
  font-size:18px;
  font-weight:650;
}
.scene-diagnostic-head p{
  margin:0;
  color:#7f8580;
  font-size:11px;
}
.scene-diagnostic-head>button{
  width:32px;
  height:32px;
  border:1px solid #323538;
  border-radius:9px;
  color:#8f9490;
  font-size:18px;
}
.scene-diagnostic-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:14px 22px 0;
}
.scene-diagnostic-summary span{
  min-height:26px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#a9ada8;
  font-size:10px;
}
.scene-diagnostic-summary span b{
  margin-left:5px;
  color:#e0b96f;
  font-weight:700;
}
.scene-diagnostic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:14px 22px;
}
.scene-diagnostic-card{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-radius:12px;
  background:#141617;
}
.scene-diagnostic-card>header,
.scene-diagnostic-vggt>header,
.scene-diagnostic-table-wrap>header{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 11px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.scene-diagnostic-card header b,
.scene-diagnostic-vggt header b,
.scene-diagnostic-table-wrap header b{
  color:#cfd1cc;
  font-size:11px;
  font-weight:630;
}
.scene-diagnostic-card header span,
.scene-diagnostic-vggt header span,
.scene-diagnostic-table-wrap header span{
  color:#707571;
  font-size:9.5px;
}
.scene-diagnostic-image{
  min-height:245px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(45deg,#111314 25%,transparent 25%) 0 0/18px 18px,
    linear-gradient(-45deg,#111314 25%,transparent 25%) 0 9px/18px 18px,
    linear-gradient(45deg,transparent 75%,#111314 75%) 9px -9px/18px 18px,
    linear-gradient(-45deg,transparent 75%,#111314 75%) -9px 0/18px 18px,
    #17191a;
}
.scene-diagnostic-image img{
  display:block;
  width:100%;
  height:280px;
  object-fit:contain;
}
.scene-diagnostic-image img:not([src]),
.scene-diagnostic-image img[src=""]{visibility:hidden}
.scene-diagnostic-vggt,
.scene-diagnostic-table-wrap{
  margin:0 22px 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-radius:12px;
  background:#141617;
}
.scene-diagnostic-vggt header a{
  height:26px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border:1px solid #3b3f40;
  border-radius:7px;
  color:#bdc0bc;
  font-size:9.5px;
  text-decoration:none;
}
.scene-diagnostic-vggt-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:11px;
}
.scene-diagnostic-vggt-item{
  min-width:0;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:9px;
  background:#181a1b;
}
.scene-diagnostic-vggt-item b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#c9cbc6;
  font-size:10.5px;
}
.scene-diagnostic-vggt-item span{
  display:block;
  margin-top:4px;
  color:#707570;
  font-size:9px;
  line-height:1.5;
}
.scene-diagnostic-table-scroll{
  max-height:310px;
  overflow:auto;
}
.scene-diagnostic-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:10px;
}
.scene-diagnostic-table th,
.scene-diagnostic-table td{
  padding:9px 10px;
  border-bottom:1px solid rgba(255,255,255,.055);
  text-align:left;
  vertical-align:middle;
}
.scene-diagnostic-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#17191a;
  color:#777c78;
  font-weight:600;
}
.scene-diagnostic-table td{color:#aeb1ad}
.scene-diagnostic-table td b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d0d2cd;
  font-weight:620;
}
.scene-diagnostic-table td small{
  display:block;
  margin-top:2px;
  color:#646965;
}
.scene-diagnostic-pass{color:#c5a66b!important}
.scene-diagnostic-warn{color:#d58d7f!important}
.scene-diagnostic-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 22px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(18,20,21,.95);
  backdrop-filter:blur(18px);
}
.scene-diagnostic-actions button{
  min-width:126px;
  height:38px;
  border-radius:9px;
  font-size:10.5px;
  font-weight:620;
}
.scene-diagnostic-secondary{
  border:1px solid #34383a;
  background:#191b1c;
  color:#a7aaa6;
}
.scene-diagnostic-primary{
  border:1px solid #7a5d31;
  background:linear-gradient(180deg,#d7ae66,#a77a3d);
  color:#17130d;
}
@media(max-width:760px){
  .scene-diagnostic-grid{grid-template-columns:1fr}
  .scene-diagnostic-vggt-list{grid-template-columns:1fr}
  .scene-diagnostic-image img{height:220px}
}


/* Preview-only outlined 3D house, nav-matched character and camera action glyphs (2026-10-23). */
.top-actions :is(#createWorldBtn,#createCharacterBtn,#createCameraBtn) svg{
  display:block;
  width:28px;
  height:21px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}