@import url('../product-series.css?v=sport-series1');
@import url('./camera-controls.css?v=camera4');
@import url('../settings-panels.css?v=scene-panel1');
@import url('../ui-controls.css?v=studio2');
@import url('../catalog/showcase.css?v=cube1');
:root{--panel:#111;--field:#202020;--muted:#aaa;--radius:12px}body{background:var(--page)}button,input,select{font:inherit}button,a,select,input[type=range]{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button{border:0;background:var(--field);color:var(--ink);border-radius:var(--radius);padding:12px 14px;font-size:12px;font-weight:600;transition:background .15s,color .15s}button:hover{background:#303030}button:active{background:#3c3c3c}button:disabled{opacity:.4;cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:var(--scroll-track)}*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px}*::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}*::-webkit-scrollbar-thumb:active{background:var(--scroll-thumb-active)}.topbar{height:82px;display:flex;align-items:center;gap:28px;padding:0 32px}.back{font-size:12px;text-decoration:none;color:var(--muted)}.back:hover{color:var(--accent)}h1{font:700 18px/1.35 Normalidad,Montserrat,sans-serif;margin:0}.topbar>img{margin-left:auto;object-fit:contain;filter:invert(1)}.workspace{display:grid;grid-template-columns:326px minmax(0,1fr);gap:24px;padding:0 24px 24px;align-items:start}.settings{max-height:calc(100dvh - 106px);overflow:auto;scrollbar-gutter:stable;background:var(--panel);padding:24px;border-radius:20px}.settings fieldset{border:0;padding:0;margin:0;min-width:0}.settings section+section{margin-top:29px}h2{font:700 12px/1.5 Montserrat,sans-serif;margin:0 0 14px;color:#eee}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.section-heading h2{margin-bottom:12px}.caption,.hint{font-size:10px;line-height:1.65;color:var(--muted);margin:8px 0}.product-trigger{display:flex;align-items:center;gap:10px;width:100%;text-align:left}.product-trigger>span:nth-child(2){flex:1;min-width:0}.swatch{display:block;flex:0 0 14px;height:14px;border-radius:50%;background:#76cfa8}.label-preview{width:100%;padding:0;overflow:hidden;border-radius:10px;background:#232323;display:block}.label-preview img{display:block;width:100%;height:84px;object-fit:contain}.label-preview span{display:block;text-align:left;font-size:10px;color:#ccc;padding:10px 12px}.filename{font-size:11px;overflow-wrap:anywhere;margin:12px 0 4px}.button-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.button-row button{font-size:10px;padding:11px}.quiet{background:transparent;color:var(--muted)}.segments{display:flex;gap:5px;background:var(--field);padding:4px;border-radius:12px}.segments button{flex:1;padding:10px 4px;background:transparent;color:var(--muted)}.segments button:hover{color:white}.segments button[aria-pressed=true]{background:#414141;color:white}.text-button{padding:0;background:none;color:var(--muted);font-size:10px}.range-label{display:flex;justify-content:space-between;margin:18px 0 10px;font-size:11px;color:#ccc}.range-label output{font-variant-numeric:tabular-nums;color:var(--muted)}input[type=range]{width:100%;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}input[type=number],select{display:block;width:100%;border:0;background:var(--field);color:white;border-radius:10px;padding:11px 9px;margin-top:8px;min-width:0;font-size:11px}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.two-columns label{font-size:10px;color:var(--muted)}.scene-name{font-size:11px;margin:0;display:flex;align-items:center;gap:8px}.live-dot{display:inline-block;flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--accent)}.dimensions{font-size:12px;font-variant-numeric:tabular-nums;margin:14px 0 8px}.primary{width:100%;background:#eee;color:#050505;text-align:left;display:flex;justify-content:space-between;margin-top:18px}.primary:hover{background:white}.primary span{color:#157b3f}.editor{position:sticky;top:20px;min-width:0}.editor-heading{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:6px 4px 18px}.editor-heading>span:first-child{display:flex;gap:8px;align-items:center}.viewport{position:relative;height:calc(100dvh - 192px);min-height:360px;max-height:1100px;overflow:hidden;border-radius:18px;background:#151515;isolation:isolate}.viewport>canvas{width:100%;height:100%;display:block}.crop-frame{position:absolute;border:1px solid #fff9;box-shadow:0 0 0 2000px #0005;cursor:move;touch-action:none;z-index:2}.crop-caption{position:absolute;top:-25px;left:0;background:#1119;color:white;padding:4px 8px;border-radius:5px;font-size:10px}.third{position:absolute;background:#fff2;pointer-events:none;opacity:0}.crop-frame:hover .third,.crop-frame:active .third{opacity:1}.third.v1,.third.v2{height:100%;width:1px;top:0}.v1{left:33.333%}.v2{left:66.666%}.third.h1,.third.h2{width:100%;height:1px;left:0}.h1{top:33.333%}.h2{top:66.666%}.crop-handle{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;background:white;border-radius:3px;cursor:nwse-resize}.transport{display:flex;align-items:center;gap:16px;padding:18px 4px 4px}.transport button{flex:0 0 40px;height:40px;padding:0;border-radius:50%}.transport input{flex:1;min-width:60px}.transport span{font-size:11px;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}.transport .fps{font-size:10px;color:#858585}.editor-hint{font-size:10px;color:var(--muted);text-align:center;margin-top:16px}.loading,.render-overlay{position:absolute;inset:0;background:#101010;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:5;font-size:12px}.render-overlay h2{font:700 20px/1.35 Normalidad;margin:0}.render-overlay progress{width:60%;height:5px;accent-color:var(--accent)}#status{font-size:11px;line-height:1.7;color:var(--muted);min-height:38px;margin:18px 0 0}#status[data-error=true]{color:#ff9b9b}dialog{border:0;border-radius:20px;background:#191919eF;color:white;padding:24px;width:min(900px,92vw);max-height:85dvh;overflow:auto;backdrop-filter:blur(24px)}dialog::backdrop{background:#000a;backdrop-filter:blur(8px)}dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}dialog header h2{font:700 18px Normalidad;margin:0}dialog>img{width:100%;max-height:60dvh;object-fit:contain;background:#292929}dialog>p,dialog>a{font-size:12px;line-height:1.6}dialog>a{display:inline-block;padding:12px 0}dialog>a:hover{color:var(--accent)}.product-picker{width:min(820px,94vw)}.product-picker-list{max-height:60dvh;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.product-choice{display:flex;align-items:center;text-align:left;gap:12px;min-height:88px}.product-choice img{width:42px;height:56px;object-fit:contain}.product-choice-name{font-size:11px}.product-choice[aria-pressed=true]{background:var(--product-color);color:var(--product-ink)}.product-picker-close svg{width:18px;height:18px}.product-picker-status{font-size:11px}.product-choice-copy{min-width:0;overflow-wrap:anywhere}
@media(max-width:1000px){.workspace{grid-template-columns:290px minmax(0,1fr);gap:16px;padding:0 16px 16px}.settings{padding:20px}.topbar{padding:0 24px}h1{font-size:14px}.fps{display:none}.transport{gap:10px}}
@media(max-width:720px){.topbar{height:72px;padding:0 18px;gap:16px}.topbar>img{width:58px}h1{font-size:11px}.back{font-size:10px}.workspace{display:flex;flex-direction:column;gap:20px}.editor{position:relative;top:auto;width:100%;order:-1}.viewport{height:calc(54dvh + 32px);min-height:352px;max-height:652px}.settings{width:100%;padding:24px;max-height:none;overflow:visible}.settings section+section{margin-top:26px}.product-picker-list{grid-template-columns:1fr 1fr}.product-choice{padding:10px;gap:6px}.editor-hint{line-height:1.6}.render-overlay h2{font-size:15px}}
@media(forced-colors:active){*{scrollbar-color:auto}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:Highlight}}

:root{--green:#00ff72}
.viewport>canvas{position:absolute;inset:0}
.viewport #studio-backdrop{position:absolute;z-index:-1;pointer-events:none}
.viewport[data-transparent-preview=true]{background-color:#282828;background-image:conic-gradient(#303030 25%,#282828 0 50%,#303030 0 75%,#282828 0);background-size:24px 24px}
.export-custom{display:block;font-size:10px;color:var(--muted);margin-top:14px}
input[type=text]{display:block;width:100%;border:0;background:var(--field);color:white;border-radius:10px;padding:12px;margin-top:8px;font:inherit;font-size:12px}
.field-error{font-size:10px;line-height:1.6;color:#ff9b9b}
.settings input.ipsum-range,.transport input.ipsum-range{height:28px;outline:none}
.controls button{display:flex;align-items:center;gap:8px}
.controls button[aria-expanded=true]{color:var(--accent)}
.lighting-menu{left:374px;right:auto;bottom:24px;max-height:calc(100dvh - 120px)}
.lighting-menu h2{font:500 14px Montserrat,sans-serif}
.lighting-menu .lighting-preset{height:auto}
.material-menu .lighting-range-heading{font-size:10px}
.back{display:flex;align-items:center;gap:6px}
.label-preview span .ui-icon{width:14px;height:14px}
.lighting-menu .lighting-animation[hidden]{display:none}
@media(max-width:1000px){.lighting-menu{left:326px}}
@media(max-width:720px){.lighting-menu{left:12px;right:12px;bottom:16px;width:auto;max-height:80dvh}}

.animation-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-top:10px;font-size:11px;color:var(--ink);cursor:pointer}
.animation-toggle input{appearance:none;-webkit-appearance:none;flex:0 0 36px;width:36px;height:22px;border:0;border-radius:20px;background:var(--field);position:relative;cursor:pointer;transition:background .15s}
.animation-toggle input::after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.animation-toggle input:checked{background:var(--accent)}
.animation-toggle input:checked::after{transform:translateX(14px);background:var(--page)}
.animation-toggle input:disabled{opacity:.4;cursor:default}
@media(prefers-reduced-motion:reduce){.animation-toggle input,.animation-toggle input::after{transition:none}}
@media(forced-colors:active){.animation-toggle input{appearance:auto;-webkit-appearance:auto}.animation-toggle input::after{display:none}}

.animation-preset-label{display:block;font-size:10px;color:var(--muted)}

.spin-products{list-style:none;padding:0;margin:16px 0;display:grid;gap:12px}.spin-products li{display:flex;align-items:center;gap:8px;min-width:0}.spin-products .spin-number{font-size:10px;color:var(--muted);flex:0 0 18px}.spin-products label{flex:1;min-width:0;font-size:10px;color:var(--muted)}.spin-products select{margin-top:4px}.spin-products .spin-order{display:flex;flex-direction:column;gap:3px}.spin-products .spin-order button{padding:4px 8px;min-height:24px;font-size:12px}.spin-products .spin-first{font-size:11px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}.spin-products .spin-first small{display:block;font-size:9px;color:var(--muted)}

.spin-product{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:left;padding:10px 9px;min-height:70px}.spin-product img{flex:0 0 28px;object-fit:contain}.spin-product>span{min-width:0;font-size:10px;line-height:1.5;overflow-wrap:anywhere}.spin-product small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.spin-add{width:100%;text-align:left;margin:0 0 4px;color:var(--accent)}.spin-order .ui-icon{width:12px;height:12px}.spin-products .spin-order button{min-width:25px;min-height:22px;padding:3px 7px}.spin-products .spin-order button:last-child{color:var(--muted)}

/* Studio settings groups: one shared card treatment and a clear type hierarchy. */
:root {
  --settings-card: #161616;
  --settings-subgroup: #ffffff06;
  --settings-card-radius: 16px;
  --settings-card-padding: 16px;
  --settings-group-gap: 12px;
}
.settings {
  background: var(--page);
  padding: 0 8px 8px 0;
  border-radius: 0;
}
.settings-block {
  background: var(--settings-card);
  border: 0;
  border-radius: var(--settings-card-radius);
  padding: var(--settings-card-padding);
}
.settings .settings-block + .settings-block { margin-top: var(--settings-group-gap); }
.settings-block h2 {
  font: 800 14px/1.4 Montserrat, sans-serif;
  color: var(--ink);
  margin: 0 0 16px;
}
.settings-block .section-heading { align-items: center; margin-bottom: 16px; }
.settings-block .section-heading h2 { margin: 0; }
.settings-block .section-heading .caption { margin: 0; }
.settings-block h3 {
  font: 700 12px/1.5 Montserrat, sans-serif;
  color: var(--ink);
  margin: 0;
}
#product-spin-settings {
  background: var(--settings-subgroup);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 16px;
}
#product-spin-settings .section-heading { align-items: baseline; gap: 8px; margin-bottom: 8px; }
#product-spin-settings .caption { flex: 0 0 auto; }
.lighting-menu .lighting-menu-header h2 { font: 700 16px/1.4 Montserrat, sans-serif; }
.lighting-menu > .lighting-ranges, .material-menu .material-group {
  background: var(--settings-subgroup);
  padding: 14px;
  border-radius: var(--settings-card-radius);
}
.material-menu .material-group { margin-top: var(--settings-group-gap); }
.material-menu .material-group h3 { font: 700 13px/1.4 Montserrat, sans-serif; }
.material-menu .material-group-heading { align-items: center; gap: 8px; }
.material-menu .material-note { margin: 12px 0 0; }
.settings #status { padding: 0 16px; }
@media (max-width: 720px) {
  .settings { padding: 0; }
  .settings-block { padding: 18px; }
  .settings-block h2 { font-size: 15px; }
}
@media (forced-colors: active) {
  .settings-block, .material-menu .material-group, #product-spin-settings {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
}

/* Explicit static faces: the original Montserrat asset is Regular only. */
@font-face {
  font-family: Montserrat;
  src: url('../assets/montserrat-bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Montserrat;
  src: url('../assets/montserrat-extrabold.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

/* Light presets share a row with their settings; material and camera fill the card. */
.settings-block .controls { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:16px; }
.settings-block .controls button { justify-content:center; gap:8px; padding:12px; min-width:0; min-height:44px; width:100%; font-size:11px; }
.settings-block .controls .ui-icon { flex:0 0 18px; width:18px; height:18px; }
.scene-lighting-row { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; align-items:stretch; min-width:0; }
.scene-lighting-row .ipsum-select-wrap { min-width:0; margin-top:0; }
.scene-lighting-row select.ipsum-select { min-height:44px; padding-left:38px; }
.scene-lighting-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; pointer-events:none; color:var(--muted); }
.scene-lighting-icon .ui-icon { display:block; width:18px; height:18px; }
.balance-color[hidden], #balance-background-label[hidden] { display:none; }
.settings-block .scene-lighting-row #lighting-menu-trigger { height:44px; padding:0; }
.ipsum-select-wrap:has(> #studio-scene) { margin-top:0; }
.camera-menu .lighting-ranges { grid-template-columns:1fr; gap:18px; margin:14px 0 10px; }
.camera-lens { background:var(--settings-subgroup); padding:14px; border-radius:var(--settings-card-radius); }
.camera-menu .hint { margin:8px 0; }
.camera-menu .lighting-reset { margin-top:10px; }
.camera-menu :is(button,select,input):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* Independent custom-frame edges keep a comfortable touch target around the mark. */
.crop-edge{position:absolute;display:block;width:32px;height:32px;z-index:1;touch-action:none}
.crop-edge::after{content:"";position:absolute;background:white;border-radius:3px}
.crop-edge-left,.crop-edge-right{top:50%;transform:translateY(-50%);cursor:ew-resize}
.crop-edge-left{left:-16px}.crop-edge-right{right:-16px}
.crop-edge-left::after,.crop-edge-right::after{left:13px;top:8px;width:6px;height:16px}
.crop-edge-top,.crop-edge-bottom{left:50%;transform:translateX(-50%);cursor:ns-resize}
.crop-edge-top{top:-16px}.crop-edge-bottom{bottom:-16px}
.crop-edge-top::after,.crop-edge-bottom::after{left:8px;top:13px;width:16px;height:6px}

/* Object editing uses the studio fields and shared selects. Axis colours are
   functional 3D coordinates; active UI actions retain the IPSUM accent. */
.scene-field-label{display:block;margin-top:16px}
.composition-object{margin-top:20px;background:var(--settings-subgroup);padding:12px;border-radius:var(--radius)}
.composition-object .section-heading{margin-bottom:10px}
.object-select{display:flex;align-items:center;gap:8px;width:100%;text-align:left;min-height:44px;padding:10px}
.object-select .ui-icon{width:18px;height:18px;flex:0 0 18px}
.object-select>span:first-of-type{flex:1}
#object-selection{font-size:9px;font-weight:400;color:var(--muted)}
.object-select[aria-pressed=true] .ui-icon{color:var(--accent)}
.transform-title{font-size:10px;line-height:1.5;color:var(--muted);margin:16px 0 8px}
.transform-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.transform-axis{position:relative;min-width:0}
.transform-axis>span{position:absolute;left:8px;top:13px;font-size:10px;font-weight:700;pointer-events:none}
.transform-axis input{margin:0;padding:12px 5px 12px 21px;font-size:10px;font-variant-numeric:tabular-nums}
.axis-x>span{color:#ef6666}.axis-y>span{color:#78ce82}.axis-z>span{color:#6f9fff}
.scale-label{display:flex;align-items:center;justify-content:space-between;gap:12px}
.scale-label input{width:100px;margin:0}
.transform-fields input[aria-invalid=true],.scale-label input[aria-invalid=true]{outline:2px solid #ff9b9b;outline-offset:1px}
/* A compact left dock keeps the image clear; one tool exposes all transforms. */
.composition-tools{position:absolute;left:16px;top:16px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;background:color-mix(in srgb,var(--settings-card) 90%,transparent);backdrop-filter:blur(20px);border-radius:14px;box-shadow:0 8px 28px #0003}
.object-tools,.object-history{display:flex;flex-direction:column;gap:4px}
.object-history{padding-top:8px}
.composition-tools button{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;flex:0 0 44px;color:var(--ink);border-radius:10px}
.composition-tools button:hover{background:#ffffff0d}
.composition-tools button[aria-pressed=true]{background:#ffffff14;color:var(--accent)}
.composition-tools button:disabled{cursor:default}
.composition-tools .ui-icon{width:22px;height:22px}
.tool-key{position:absolute;bottom:3px;right:5px;font-size:8px;line-height:1;color:var(--muted)}
.viewport[data-free-placement=true] .crop-frame{pointer-events:none;cursor:default}
.viewport[data-free-placement=true] :is(.crop-caption,.crop-handle,.crop-edge){pointer-events:auto;touch-action:none}
.viewport[data-free-placement=true] .crop-caption{cursor:move;min-height:24px;display:flex;align-items:center;top:auto;bottom:-30px}
.viewport[data-free-placement=true]>canvas{touch-action:none}
.viewport[data-free-placement=true][data-editor-tool=crop] .crop-frame{pointer-events:auto;cursor:move}
@media(max-width:720px){.composition-tools{top:10px;left:10px;padding:4px;gap:2px}.object-tools,.object-history{gap:2px}.object-history{padding-top:6px}.tool-key{display:none}}
@media(forced-colors:active){.transform-axis>span{color:CanvasText}.composition-tools{background:Canvas}.composition-tools button[aria-pressed=true]{outline:2px solid Highlight}}

/* Saved compositions reuse the shared studio controls and app dialog. */
.composition-presets{margin:0}
.composition-presets:empty{display:none}
.composition-presets>label{display:block;font-size:14px;font-weight:800;margin-bottom:12px}
.preset-note:empty{display:none}
.preset-row{display:flex;gap:8px;align-items:center;min-width:0}
.preset-row .ipsum-select-wrap{flex:1;min-width:0;margin-top:0}
.preset-row select{margin:0;min-width:0}
.preset-row>button{flex-shrink:0;padding:12px 10px}
.preset-actions{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.preset-actions>button:first-child{flex:1;text-align:left}
.preset-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;font-size:10px}
.preset-actions .preset-icon{width:40px;flex:0 0 40px;padding:0}
.preset-icon .ui-icon,.preset-actions .ui-icon{width:18px;height:18px;flex-shrink:0}
.preset-note{font-size:10px;line-height:1.6;color:var(--muted);margin:10px 0 0;overflow-wrap:anywhere}
.preset-note[data-error=true]{color:#ff9b9b}
.preset-dialog{width:min(440px,calc(100vw - 32px));padding:24px}
.preset-dialog h2{font:700 18px/1.4 Montserrat,sans-serif;margin:0 0 16px}
.preset-dialog label{font-size:12px;color:var(--muted)}
.preset-dialog input{font-size:13px}
.preset-dialog input[aria-invalid=true]{outline:2px solid #ff9b9b}
.preset-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.preset-dialog-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:auto;margin:0;text-align:center}
.preset-dialog-actions button[type=submit]{background:var(--accent);color:var(--page)}

/* The object panel is populated only by actions supported by the model. */
.object-actions{margin-top:18px}
.object-actions-title{font-size:12px;margin:0 0 8px}
.object-action-field{margin:10px 0 14px}
.object-action-field .animation-toggle{font-size:11px}
.object-action-trigger{width:100%;min-height:44px;margin-top:8px}
.object-actions>.text-button{min-height:36px}

/* Studio size captions are separate from the original product names. */
.product-choice-copy small{display:block;margin-top:4px;font-size:10px;line-height:1.4;opacity:.7}
.product-choice-copy{flex:1}.product-choice-name{display:block;width:100%;overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance}
@media(max-width:720px){.product-picker-list{grid-template-columns:minmax(0,1fr)}.product-choice{gap:12px;min-width:0}.product-choice-name{font-size:12px}}

/* Separate still path result; reuse Studio controls and dialog surfaces. */
#path-preview{display:block;width:100%;height:auto;max-height:55dvh;object-fit:contain;background:#151515}
#path-preview[data-transparent=true]{background-color:#282828;background-image:conic-gradient(#303030 25%,#282828 0 50%,#303030 0 75%,#282828 0);background-size:24px 24px}
#path-dialog progress{display:block;width:100%;height:5px;accent-color:var(--accent)}
#path-dialog [hidden]{display:none}
#path-dialog .button-row{justify-content:flex-end;flex-wrap:wrap}
#path-dialog #path-save{background:#eee;color:#050505}
.path-options{margin:14px 0}
.path-options summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-size:11px;font-weight:600}
.path-options summary::-webkit-details-marker{display:none}
.path-options[open] summary [data-icon]{transform:rotate(180deg)}
.path-options-fields{display:grid;gap:8px;margin-top:14px}
.path-options-fields label{display:grid;gap:6px;font-size:11px}
.path-options-fields .hint{margin:0 0 6px}
.path-options-fields button{justify-self:start;text-align:left}

/* Collapsible Studio settings blocks */
.settings-block[data-settings-collapsible] {
  padding-block: 8px;
}
.settings-block[data-settings-collapsible] > .settings-block-heading {
  position: relative;
  padding-right: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.settings-block[data-settings-collapsible] > .settings-block-heading > .settings-block-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: 800 14px/1.4 Montserrat, sans-serif;
}
.settings-block[data-settings-collapsible] .settings-block-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.settings-block[data-settings-collapsible] .settings-block-toggle:hover {
  background: #ffffff06;
}
.settings-block[data-settings-collapsible] .settings-block-toggle:active {
  background: #ffffff0d;
}
.settings-block-toggle-title {
  min-width: 0;
  overflow-wrap: anywhere;
}
.settings-block-toggle > .ui-icon {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--muted);
}
.settings-block-toggle[aria-expanded=true] > .ui-icon {
  transform: rotate(180deg);
}
.settings-block-heading > .caption {
  flex: 0 0 auto;
  margin: 0;
}
.settings-block-heading > .text-button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 4px;
}
.settings-block[data-settings-collapsible] > .settings-block-content {
  min-width: 0;
  padding: 12px 0 8px;
}
.composition-object.settings-block {
  margin-top: var(--settings-group-gap);
  background: var(--settings-card);
  padding-inline: var(--settings-card-padding);
  border-radius: var(--settings-card-radius);
}
@media (max-width: 720px) {
  .settings-block[data-settings-collapsible] > .settings-block-heading > .settings-block-title {
    font-size: 15px;
  }
  .composition-object.settings-block { padding-inline: 18px; }
}

/* Keep the entire heading clickable around its independent reset action. */
.settings-block-toggle::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.settings-block-heading > .text-button { position: relative; z-index: 1; }
.settings-block-heading > .caption { pointer-events: none; }
.object-transform-reset { display: flex; justify-content: flex-end; }
.object-transform-reset:has([hidden]) { display: none; }


/* Compact viewport labels with menus over the preview, outside its crop clip. */
.editor-heading { position: relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items: start; gap: 16px; }
.viewport-context-controls{display:flex;align-items:center;flex-wrap:wrap;gap:0 16px;min-width:0}
.editor-heading > .viewport-menu-trigger,
.viewport-context-controls > .viewport-menu-trigger {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  min-height:36px;padding: 0; border: 0; border-radius: 3px; background: transparent;
  color: inherit; font: inherit; line-height: 1.4; text-align: left;
}
.editor-heading .viewport-menu-trigger:hover,
.editor-heading .viewport-menu-trigger[aria-expanded=true] { background: transparent; color: var(--ink); }
.editor-heading .viewport-menu-trigger:active { background: transparent; }
.viewport-menu-trigger>[data-icon]{display:flex;flex:0 0 16px}
.viewport-menu-trigger>[data-icon] .ui-icon{width:16px;height:16px}
#viewport-frame-trigger { text-align: right;justify-content:flex-end; }
#viewport-product-trigger{flex:0 1 280px;max-width:100%}
#viewport-product-swatch{flex:0 0 12px;height:12px}
.viewport-menu-trigger > :is(#scene-title, #frame-info,#viewport-light-title,#viewport-product-title) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewport-menu {
  position: absolute; top: calc(100% - 10px); left: 0; z-index: 20;
  width: min(220px, 100%); max-height: min(420px, calc(100dvh - 160px));
  overflow: auto; padding: 6px; border: 0; border-radius: 12px;
  background: #202020; box-shadow: 0 12px 36px #0006;
}
.viewport-frame-menu { left: auto; right: 0; width: min(140px, 100%); }
.viewport-menu > .viewport-menu-item {
  display: block; width: 100%; min-height: 36px; padding: 9px 10px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); font: 400 11px/1.5 Montserrat, sans-serif; text-align: left;
}
.viewport-menu > .viewport-menu-item:hover,
.viewport-menu > .viewport-menu-item:focus-visible { background: #ffffff0a; color: var(--ink); }
.viewport-menu > .viewport-menu-item[aria-checked=true] { color: var(--accent); }
.viewport-menu > .viewport-menu-item:focus-visible { outline-offset: -2px; }
@media(max-width:700px){.editor-heading{gap:10px;padding-bottom:12px}.viewport-context-controls{gap:0 12px}.editor-heading .viewport-menu-trigger{min-height:44px}.viewport-menu>.viewport-menu-item{min-height:44px}.viewport-menu{top:calc(100% - 6px)}}

.balance-settings{margin:18px 0 20px}.balance-settings>label{display:block;font-size:11px;color:var(--muted);margin-top:16px}.balance-note{font-size:10px;line-height:1.6;color:var(--muted);margin:10px 0}.balance-note[data-error=true]{color:#ff9b9b}.balance-products{list-style:none;margin:10px 0 18px;padding:0;display:grid;gap:8px}.balance-products li{display:flex;align-items:center;gap:8px;min-width:0}.balance-number{flex:0 0 18px;font-size:10px;color:var(--muted)}.balance-product{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px;min-height:64px;min-width:0}.balance-product>img{flex:0 0 28px;object-fit:contain}.balance-product-copy{min-width:0;flex:1;font-size:10px;line-height:1.4;overflow-wrap:anywhere}.balance-product-copy small{display:block;margin-top:4px;font-size:9px;color:var(--muted)}.balance-product-chevron{flex:0 0 16px}.balance-color{display:flex;align-items:center;gap:8px;margin-top:8px}.balance-color input[type=color]{width:42px;height:40px;flex:0 0 42px;border:0;border-radius:10px;background:var(--field);padding:5px;cursor:pointer}.balance-color input[type=text]{margin:0;min-width:0;flex:1;text-transform:uppercase}

.animation-toggle[hidden]+.hint{display:none}

/* Free placement starts the Object controls independently of the scenario. */
.composition-object .free-placement-toggle{margin-top:0;margin-bottom:12px}
#balance-animation-settings{margin:16px 0}
#balance-animation-settings .range-label{margin-top:0}

.spin-move-up .ui-icon{transform:rotate(180deg)}
.spin-add{display:flex;align-items:center;gap:8px}
.spin-add .ui-icon{width:16px;height:16px;flex:0 0 16px}