/* The 3D studio has its own palette so document and task forms retain contrast. */
body[data-scene-theme] .stage {
  --scene-glass: rgba(12, 23, 41, .91);
  --scene-line: rgba(159, 210, 240, .22);
  --scene-text: #edf8ff;
  --scene-muted: #b7cddd;
  background: radial-gradient(ellipse at 48% 35%, #173e55 0, #102339 44%, #080f21 100%);
}
body[data-scene-theme="midnight"] .stage {
  --scene-glass: rgba(12, 16, 36, .94);
  --scene-line: rgba(161, 155, 255, .25);
  --scene-muted: #c6c9e5;
  background: radial-gradient(ellipse at 55% 35%, #202748 0, #11182e 50%, #070b16 100%);
}
body[data-scene-theme="daylight"] .stage {
  --scene-glass: rgba(244, 251, 255, .94);
  --scene-line: rgba(39, 83, 121, .22);
  --scene-text: #193b55;
  --scene-muted: #4d6a80;
  background: radial-gradient(ellipse at 46% 25%, #ffffff 0, #dcecf5 55%, #c2d8e8 100%);
}
body[data-scene-theme].den-on .stage { background: radial-gradient(ellipse at 55% 55%, #352754 0, #16192c 57%, #090e1c 100%); }
body[data-scene-theme] .stage :is(.zonebar, .legend-mini, .lbl-wing, .lbl-room, .step-hud .card) {
  background: var(--scene-glass); border-color: var(--scene-line); color: var(--scene-text);
  box-shadow: 0 8px 30px -16px #0009; backdrop-filter: blur(14px);
}
body[data-scene-theme] .stage :is(.hero-sec button, .tele button) { background: var(--scene-glass); border-color: var(--scene-line); color: var(--scene-text); }
body[data-scene-theme] .stage :is(.zb, .zonebar .ib) { color: var(--scene-muted); }
body[data-scene-theme] .stage :is(.zb.active, .zb:hover, .zonebar .ib:hover, .lbl-room.sel) { background: #263e60; color: #fff; }
body[data-scene-theme] .stage .zb.den.active { background: #514782; }
body[data-scene-theme] .stage .seg { background: #779bc51c; }
body[data-scene-theme] .stage .seg button { color: var(--scene-muted); }
body[data-scene-theme] .stage .seg button.on { background: #284561; color: #f1faff; }
body[data-scene-theme] .stage .cta { background: linear-gradient(125deg, #10283c, #29455f); border-color: #69cbd5; box-shadow: 0 10px 30px -12px #0008, 0 0 0 5px #63dce510; animation: none; }
body[data-scene-theme] .stage .lbl-wing { font-size: 11px; letter-spacing: .025em; }
body[data-scene-theme] .stage .lbl-room { font-size: 10px; }
body[data-scene-theme] .labels :is(.lbl-wing, .lbl-room) { max-width: min(220px, calc(100vw - 24px)); overflow: hidden; text-overflow: ellipsis; }
.labels .lbl.hide, body.den-on .labels .lbl.hide { opacity: 0; visibility: hidden; }

.studio {
  --studio-accent: #68e8ed; --studio-text: #eff8ff; --studio-muted: #adc2d4;
  --studio-line: rgba(157, 198, 226, .17); --studio-fill: rgba(107, 152, 196, .09);
  --studio-panel: rgba(11, 22, 39, .96);
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  font-family: var(--f-ui); color: var(--studio-text);
}
body[data-scene-theme="midnight"] .studio { --studio-panel: rgba(13, 16, 35, .97); --studio-line: rgba(175, 163, 229, .19); --studio-muted: #bfc3e0; }
body[data-scene-theme="daylight"] .studio { --studio-panel: rgba(17, 36, 55, .96); --studio-muted: #c0d5e5; }
.studio button, .studio input, .studio select { font: inherit; }
.studio button { cursor: pointer; touch-action: manipulation; }
.studio :is(button, input, select):focus-visible { outline: 2px solid #b0f4fa; outline-offset: 3px; }
.studio button:disabled, .studio input:disabled { cursor: not-allowed; }
.studio-launch {
  position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 9px 13px; pointer-events: auto; border-radius: 13px;
  color: #e9f9ff; background: #112339e8; border: 1px solid #75b3cc66;
  box-shadow: 0 6px 24px -8px #0009, inset 0 1px #ffffff0a; backdrop-filter: blur(14px);
  font-size: 12px !important; font-weight: 800 !important;
}
.studio-launch > i { width: 5px; height: 5px; border-radius: 50%; background: var(--studio-accent); box-shadow: 0 0 9px var(--studio-accent); }
.studio-launch:hover, .studio-launch[aria-expanded="true"] { background: #203b52; border-color: #8cdbec; }
.studio-panel {
  position: absolute; right: 14px; top: 66px; bottom: 70px; width: 332px; max-width: calc(100% - 28px);
  display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
  border: 1px solid var(--studio-line); border-top-color: #84ccdc66; border-radius: 20px;
  background: var(--studio-panel); box-shadow: 0 26px 70px -24px #000d, inset 0 1px #ffffff08;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); text-align: left;
  animation: studio-enter .18s ease-out; color-scheme: dark;
}
.studio-panel[hidden] { display: none; }
@keyframes studio-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.studio-head { display: flex; justify-content: space-between; gap: 12px; padding: 20px 18px 17px; border-bottom: 1px solid var(--studio-line); flex-shrink: 0; background: linear-gradient(120deg, #86ebff0a, transparent); }
.studio-eyebrow { font: 700 9px var(--f-mono); letter-spacing: .2em; color: #99c8df; }
.studio-head h2 { display: flex; align-items: center; gap: 9px; font-family: var(--f-ui); font-size: 22px; font-weight: 700; letter-spacing: -.8px; margin: 3px 0 4px; color: var(--studio-text); }
.studio-head h2 span { color: #8adde9; font-size: 19px; }
.studio-head p { margin: 0; font-size: 11px; color: var(--studio-muted); }
.studio-close { flex: none; align-self: flex-start; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--studio-line); color: var(--studio-muted); background: var(--studio-fill); font-size: 24px !important; font-weight: 400; line-height: 1; }
.studio-close:hover { background: #7499bd30; color: #fff; }
.studio-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 20px 18px 5px; scrollbar-width: thin; scrollbar-color: #46617a transparent; }
.studio-section { padding: 0; margin: 0 0 23px; border: 0; min-width: 0; }
.studio-section legend { padding: 0; margin-bottom: 13px; font: 500 9px var(--f-mono); color: #6e94b1; letter-spacing: .1em; }
.studio-section legend span { margin-left: 8px; font: 800 10px var(--f-ui); color: var(--studio-muted); letter-spacing: .1em; text-transform: uppercase; }
.studio-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.studio-preset { min-width: 0; border: 1px solid var(--studio-line); padding: 5px 5px 9px; border-radius: 11px; background: #0813245c; color: var(--studio-text); text-align: left; }
.studio-preset:hover { border-color: #839fbb; }
.studio-preset[aria-pressed="true"] { border-color: #91d8e8; background: #47778d23; box-shadow: 0 0 0 1px #91d8e838; }
.studio-preset b { display: block; margin: 7px 2px 1px; font-size: 10px; font-weight: 700; }
.studio-preset small { display: block; margin: 0 2px; color: var(--studio-muted); font-size: 8px; white-space: nowrap; }
.studio-preview { position: relative; display: block; height: 48px; overflow: hidden; border-radius: 6px; background: radial-gradient(at 30% 0, #328b91, #19243e 66%); }
.studio-preview::before { content: ''; position: absolute; width: 90px; height: 70px; left: 5px; top: 10px; transform: rotate(-28deg) skew(26deg); background: repeating-linear-gradient(0deg, transparent 0 11px, #6ed3d824 11px 12px), repeating-linear-gradient(90deg, transparent 0 11px, #6ed3d824 11px 12px); }
.studio-preview i { position: absolute; width: 22px; height: 17px; top: 21px; left: 11px; background: #348084; border-top: 2px solid #91ece7; transform: skewY(-14deg); box-shadow: 2px 3px 0 #07142488; }
.studio-preview i:nth-child(2) { left: 36px; top: 17px; width: 18px; height: 16px; background: #696bac; border-top-color: #aea2ec; }
.studio-preview i:nth-child(3) { left: 57px; top: 28px; width: 17px; height: 15px; background: #357181; }
.studio-preview em { position: absolute; right: 8px; top: 2px; font-size: 13px; font-style: normal; color: #acf6f2; }
.studio-preview-midnight { background: radial-gradient(at 35% 0, #39386c, #111827 66%); }
.studio-preview-midnight i { background: #30476c; border-top-color: #8baaf1; }
.studio-preview-midnight em { color: #b5a2ff; }
.studio-preview-daylight { background: linear-gradient(150deg, #d5eef1, #c8d9ea); }
.studio-preview-daylight i { background: #91b8c8; border-top-color: #ecffff; }
.studio-preview-daylight i:nth-child(2) { background: #a9aaca; }
.studio-preview-daylight em { color: #43768d; }
.studio-color { display: flex; align-items: center; gap: 8px; padding: 15px 0 6px; cursor: pointer; }
.studio-color > span:first-child { flex: 1; }
.studio-color b, .studio-switch b { display: block; font-weight: 600; font-size: 11px; }
.studio-color small, .studio-switch small { display: block; font-size: 9px; color: var(--studio-muted); margin-top: 2px; }
.studio-color-value { font: 500 9px var(--f-mono); color: var(--studio-muted); }
.studio-color input { appearance: none; -webkit-appearance: none; border: 1px solid #a9cddd50; padding: 3px; width: 38px; height: 34px; border-radius: 9px; background: #ffffff09; cursor: pointer; }
.studio-color input::-webkit-color-swatch-wrapper { padding: 0; }
.studio-color input::-webkit-color-swatch { border: 0; border-radius: 5px; }
.studio-color input::-moz-color-swatch { border: 0; border-radius: 5px; }
.studio-range { display: block; margin-top: 14px; }
.studio-range > span { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 11px; color: var(--studio-text); }
.studio-range output { font: 500 10px var(--f-mono); color: #b8dfe9; }
.studio-range input { appearance: none; -webkit-appearance: none; width: 100%; height: 26px; margin: 3px 0 0; background: transparent; cursor: pointer; }
.studio-range input::-webkit-slider-runnable-track { height: 4px; background: #446078; border-radius: 3px; }
.studio-range input::-moz-range-track { height: 4px; background: #446078; border-radius: 3px; }
.studio-range input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #c2f3f9; border: 3px solid #172d43; box-shadow: 0 0 0 1px #78aab9; }
.studio-range input::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #c2f3f9; border: 3px solid #172d43; box-shadow: 0 0 0 1px #78aab9; }
.studio-switches { display: flex; flex-direction: column; gap: 0; }
.studio-switch { display: flex; align-items: center; gap: 12px; position: relative; min-height: 49px; border-bottom: 1px solid #a3c8e20d; cursor: pointer; }
.studio-switch > span { flex: 1; min-width: 0; }
.studio-switch input { position: absolute; width: 34px; height: 22px; right: 0; opacity: 0; margin: 0; cursor: pointer; }
.studio-switch > i { display: block; width: 32px; height: 19px; flex: none; border-radius: 20px; background: #46566e; pointer-events: none; transition: background .15s; }
.studio-switch > i::after { content: ''; display: block; width: 13px; height: 13px; margin: 3px; border-radius: 50%; background: #d5e3ed; box-shadow: 0 1px 3px #0003; transition: transform .15s; }
.studio-switch input:checked + i { background: #69c4d1; }
.studio-switch input:checked + i::after { transform: translateX(13px); background: #102f41; }
.studio-switch input:focus-visible + i { outline: 2px solid #b0f4fa; outline-offset: 4px; }
.studio-dim { opacity: .45; }
.studio-camera-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.studio-camera-presets button { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; min-height: 61px; padding: 9px 3px; border: 1px solid var(--studio-line); border-radius: 10px; background: var(--studio-fill); color: var(--studio-text); font-size: 10px; }
.studio-camera-presets button > span { font: 400 21px/1 var(--f-ui); color: #a8d5e5; }
.studio-camera button:disabled { opacity: .35; }
.studio-camera-note { margin: 0 0 10px; font-size: 10px; line-height: 1.5; color: #dec894; }
.studio-zoom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px; margin-top: 8px; border: 1px solid var(--studio-line); border-radius: 10px; }
.studio-zoom > span { font-size: 10px; color: var(--studio-muted); }
.studio-zoom button { border: 0; width: 37px; height: 33px; border-radius: 7px; color: #d8edfa; background: var(--studio-fill); font-size: 20px; }
.studio-camera-reset { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 34px; margin-top: 5px; border: 0; border-radius: 8px; background: transparent; color: var(--studio-muted); font-size: 15px !important; }
.studio-camera-reset > span { font-size: 10px; }
.studio-camera button:hover:not(:disabled) { background: #7aadc528; color: #fff; }
.studio-quality { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; }
.studio-quality select { min-width: 119px; padding: 9px 10px; border: 1px solid var(--studio-line); border-radius: 9px; background: #172b41; color: var(--studio-text); font-size: 11px; }
.studio-hint { font-size: 9px; line-height: 1.6; color: var(--studio-muted); margin: 8px 0 0; }
.studio-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px 14px; flex-shrink: 0; border-top: 1px solid var(--studio-line); background: #0a152550; }
.studio-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--studio-muted); font-size: 8px; white-space: nowrap; }
.studio-saved > i { width: 4px; height: 4px; border-radius: 50%; background: #9dd6c8; }
.studio-reset { border: 1px solid var(--studio-line); background: transparent; color: #d6e3ec; padding: 8px; border-radius: 8px; font-size: 9px !important; white-space: nowrap; }
.studio-reset:hover { background: #ffffff0c; border-color: #9bb9ce; }
.studio-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.insp-open .studio-launch { right: 364px; }
body.stepping .studio-launch { top: 132px; }
body.stepping .studio-panel { top: 12px; }
@media (max-width: 759px) {
  .studio-launch { right: 10px; top: 10px; min-height: 39px; border-radius: 12px; padding: 8px 10px; }
  .studio-panel { top: 58px; right: 8px; bottom: 8px; width: 342px; max-width: calc(100% - 16px); border-radius: 17px; }
  .studio-head { padding: 16px; }
  .studio-scroll { padding: 18px 16px 3px; }
  .studio-launch > i { display: none; }
  body.insp-open .studio-launch { right: 10px; }
  body.view-open .studio, body.insp-open .studio { visibility: hidden; }
  body.stepping .studio-launch { top: 122px; }
  body.stepping .studio-panel { top: 8px; }
  .studio-switch { min-height: 51px; }
}
@media (max-width: 379px) {
  .studio-launch { width: 39px; justify-content: center; }
  .studio-launch > span { display: none; }
}
@media (max-height: 520px) {
  .studio-panel { top: 8px; bottom: 8px; right: 8px; }
  .studio-head { padding: 12px 16px; }
  .studio-head p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-panel { animation: none; }
  .studio-switch > i, .studio-switch > i::after { transition: none; }
}