.camera-inspector{position:absolute;right:24px;top:365px;z-index:6;width:268px;padding:14px 15px;border:1px solid #7fe3ff36;border-radius:17px;background:linear-gradient(145deg,#141c2be8,#0b1422ee);box-shadow:0 18px 50px #0008;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);pointer-events:auto}.camera-inspector-top{display:flex;justify-content:space-between;align-items:center;color:#8fa2b9;font:9px var(--mono);letter-spacing:1px}.camera-inspector-top button{background:transparent;color:#a9def0;font-size:10px;padding:4px;border-radius:6px}.camera-inspector-top button:hover{color:white}.camera-inspector #camera-parts{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;margin:12px 0 11px;padding-bottom:5px}.camera-inspector #camera-parts button{flex:none;background:#ffffff10;border:1px solid #ffffff13;color:#b8c7d7;font-size:10px;padding:6px 9px;border-radius:8px;white-space:nowrap}.camera-inspector #camera-parts button.on{background:#7fe3ff24;border-color:#7fe3ff88;color:#e1faff}.camera-detail{border-top:1px solid #ffffff1b;padding-top:11px}.camera-detail #camera-detail-kicker{color:#7fe3ff;font:9px var(--mono);letter-spacing:.7px}.camera-detail h2{font-size:18px;line-height:1.1;margin:6px 0;font-weight:700}.camera-detail p{color:#ccd5df;font-size:11.5px;line-height:1.5;min-height:50px;margin:0}.camera-inspector-actions{display:flex;gap:6px;margin-top:12px}.camera-inspector-actions button{flex:1;background:#ffffff12;border:1px solid #ffffff20;border-radius:9px;padding:8px 6px;font-size:10px}.camera-inspector-actions button:first-child{background:#7fe3ff;color:#122132;font-weight:700}.camera-inspector-actions button:hover{filter:brightness(1.12)}#camera-detail-mechanism{height:78px;margin-top:7px;border-radius:10px;background:radial-gradient(circle at 50% 40%,#20384a,#111e2b);border:1px solid #ffffff16;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}#camera-detail-mechanism .mechanism-icon{font-size:39px;color:#a8e6f6;filter:drop-shadow(0 0 9px #7fe3ff88)}#camera-detail-mechanism .mechanism-note{position:absolute;bottom:5px;left:0;right:0;text-align:center;color:#a9bed0;font:9px var(--mono)}#camera-detail-mechanism .mechanism-iris{width:66px;height:66px;border:7px solid #728ba3;border-radius:50%;display:grid;place-items:center;background:#152733}#camera-detail-mechanism .mechanism-iris i{width:var(--hole);height:var(--hole);border-radius:50%;background:#bdf4ff;box-shadow:0 0 15px #7fe3ffcc;transition:width .35s,height .35s}#camera-detail-mechanism .mechanism-shutter{width:70px;height:48px;border:5px solid #728ba3;overflow:hidden;position:relative;background:#adf3ff}#camera-detail-mechanism .mechanism-shutter i{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#1a2632 0 6px,#364551 7px 9px);transform:translateY(var(--curtain,0));transition:transform .3s}#camera-detail-mechanism .mechanism-path{width:80%;height:2px;background:linear-gradient(90deg,#e5b576,#7fe3ff);box-shadow:0 0 10px #7fe3ff;transform:rotate(-12deg)}#camera-detail-mechanism .mechanism-sensor{width:67px;height:42px;border:5px solid #596a73;background:#528c98;box-shadow:0 0 16px #7fe3ff88}.camera-hotspot{position:absolute;z-index:5;transform:translate(-50%,-50%);border:1px solid #7fe3ff99;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;background:#0b1020db;color:#aef1ff;font:9px var(--mono);pointer-events:auto;box-shadow:0 0 9px #7fe3ff75;cursor:pointer}.camera-hotspot:hover,.camera-hotspot.selected{background:#7fe3ff;color:#0c1826;box-shadow:0 0 18px #7fe3ffaa}.camera-hotspot[hidden]{display:none!important}@media(max-width:900px){.camera-inspector{right:11px;top:126px;width:220px;padding:9px}.camera-detail h2{font-size:14px}.camera-detail p{font-size:10px;min-height:42px}#camera-detail-mechanism{height:52px}.camera-inspector-actions button{font-size:9px}.camera-inspector #camera-parts{margin:7px 0 5px}.camera-inspector-top{font-size:8px}}@media(max-width:560px){.camera-inspector{right:8px;top:124px;width:160px}.camera-inspector-top button{font-size:0}.camera-inspector-top button::after{content:'↺';font-size:14px}.camera-detail p{font-size:9.5px;line-height:1.3}.camera-detail h2{font-size:13px;margin:4px 0}#camera-detail-mechanism{height:40px}.camera-inspector-actions{flex-direction:column;gap:3px;margin-top:5px}.camera-inspector-actions button{padding:5px}.camera-hotspot{width:19px;height:19px}}

.camera-inspector.collapsed{width:194px;padding:9px 11px}.camera-inspector.collapsed #camera-parts,.camera-inspector.collapsed .camera-detail,.camera-inspector.collapsed .camera-inspector-actions,.camera-inspector.collapsed #camera-reset{display:none}.camera-inspector-top #camera-toggle{background:none;color:#b8ebf4;font:10px var(--mono);letter-spacing:.5px;padding:3px}.camera-inspector:not(.collapsed) #camera-toggle{color:#e4f8ff}.camera-inspector.collapsed .camera-inspector-top{justify-content:center}

.assembly-control { width: 100%; }
.assembly-control .lab { margin-bottom: 2px; }
.assembly-control #assembly-value { display: inline; color: #9beaff; }
#assembly-range { width: 100%; height: 20px; margin: 0; accent-color: #7fe3ff; cursor: ew-resize; }
#blur-feedback { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; }
#blur-feedback span { color: #d1dde7; background: #7fe3ff13; border: 1px solid #7fe3ff27; border-radius: 6px; padding: 3px 7px; font: 10px var(--mono); }
.camera-inspector { top: 430px; }
#camera-detail-mechanism .mechanism-optic { color: #8ed9e9; font-size: 48px; text-shadow: 0 0 20px #7fe3ff; }
@media (max-width: 900px) {
  .ctl { max-height: min(40dvh, 330px); overflow-y: auto; gap: 7px; }
  .assembly-control { position: static; padding: 6px 0 8px; }
  .ctl .row { flex-shrink: 0; }
}

/* Keep the original status cards and presets readable on narrow screens. */
@media (min-width: 561px) and (max-width: 900px) {
  .presets { top: 126px; }
  .camera-inspector { top: 170px; max-height: calc(100dvh - 480px); overflow-y: auto; }
}
@media (max-width: 560px) {
  .presets { top: 196px; max-width: calc(100vw - 24px); }
  .camera-inspector { top: 268px; max-height: calc(100dvh - 640px); overflow-y: auto; }
  .camera-inspector.panel-left { left: 8px; right: auto; }
  .camera-inspector.collapsed { width: 194px; }
  .camera-inspector-top #camera-toggle { font-size: 9px; }
  .camera-inspector-top #camera-toggle::after { content: none; }
  #camera-detail-mechanism { height: 52px; }
  #camera-detail-mechanism .mechanism-iris { width: 44px; height: 44px; border-width: 5px; }
  #camera-detail-mechanism .mechanism-sensor { width: 50px; height: 30px; }
  #camera-detail-mechanism .mechanism-note { bottom: 1px; font-size: 8px; }
}
@media (max-width: 560px) and (max-height: 760px) {
  .camera-inspector { top: 248px; max-height: 145px; }
  .presets { top: 178px; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .camera-inspector { max-height: calc(100dvh - 430px); overflow-y: auto; }
}

/* A compact workspace: the two floating panels may be moved independently. */
.side { width: 285px; }
.side .stats { max-width: 278px; }
.ctl { max-height: calc(100dvh - 36px); overflow-y: auto; }
.ctl.dragged { z-index: 9; }
#controls-drag { display: flex; align-items: center; justify-content: space-between;
  padding: 3px 3px 8px; border-bottom: 1px solid #ffffff1b;
  color: #a7d9e8; font: 10px var(--mono); letter-spacing: 1px;
  cursor: grab; touch-action: none; user-select: none; }
#controls-drag.dragging,#inspector-drag.dragging { cursor: grabbing; }
#controls-drag:focus-visible,#inspector-drag:focus-visible { outline: 2px solid #7fe3ff; outline-offset: 3px; }
.drag-hint { color: #7995a5; font-size: 9px; }
.capture-actions { display: flex; gap: 6px; align-items: center; }
.capture-actions button { background: #ffffff12; border: 1px solid #ffffff24;
  border-radius: 8px; color: #d6e9f2; padding: 7px 10px; font: 10px var(--mono); }
#capture-shot { background: #7fe3ff; border-color: #7fe3ff; color: #102233; font-weight: 700; }
#capture-preview-status { margin-left: auto; white-space: nowrap; color: #8fb5a5;
  font: 9px var(--mono); letter-spacing: .5px; }
#inspector-drag { color: #9bd1df; cursor: grab; touch-action: none;
  user-select: none; font-size: 16px; line-height: 1; padding: 2px 6px; }
.camera-inspector.dragged { z-index: 8; }
.camera-inspector:not(.dragged) { left: 24px; right: auto; top: auto; bottom: 24px; }
.camera-inspector.collapsed .camera-inspector-top { justify-content: space-between; }
.aperture-control { display: flex; align-items: center; gap: 9px; }
#iris-live { flex: 0 0 103px; width: 103px; height: 103px;
  background: #0b1622; border: 1px solid #ffffff22; border-radius: 50%;
  filter: drop-shadow(0 0 10px #7fe3ff42); }
.aperture-control .seg { flex: 1; }
#camera-detail-mechanism.iris-detail { height: 160px; }
#camera-iris-detail { width: 145px; height: 145px; }

@media (max-width: 900px) {
  .ctl { max-height: min(43dvh, 350px); }
  .side .stats { max-width: 100%; }
  .camera-inspector:not(.dragged) { left: auto; right: 11px; top: 120px; bottom: auto; }
}
@media (max-width: 560px) {
  .camera-inspector:not(.dragged) { left: auto; right: 8px; top: 150px; bottom: auto; }
  .camera-inspector:not(.dragged).panel-left { left: 8px; right: auto; }
  .camera-inspector { max-height: min(36dvh, 300px); }
  .camera-inspector.collapsed { width: 194px; }
  .camera-inspector:not(.collapsed) #camera-toggle { max-width: 100px; overflow: hidden; white-space: nowrap; }
  .capture-actions { flex-wrap: wrap; }
  #capture-preview-status { font-size: 8px; }
  #iris-live { flex-basis: 83px; width: 83px; height: 83px; }
  .aperture-control { gap: 5px; }
  #seg-ap { flex-wrap: wrap; min-width: 0; }
  #seg-ap button { font-size: 10px; padding: 0 4px; height: 28px; }
  #camera-detail-mechanism.iris-detail { height: 119px; }
  #camera-iris-detail { width: 112px; height: 112px; }
}

.sun-controls { display: flex; align-items: center; gap: 8px; width: max-content;
  max-width: 100%; margin-top: 11px; padding: 5px 8px; border: 1px solid #ffc87a55;
  border-radius: 10px; background: #101725de; box-shadow: 0 8px 25px #0007; }
.sun-controls button { border: 0; border-radius: 7px; background: #ffc87a22;
  color: #ffe0a5; padding: 6px 8px; font: 10px var(--mono); white-space: nowrap; }
.sun-controls button:hover { background: #ffc87a3a; }
#sun-status { color: #d5c5a8; font: 9px var(--mono); white-space: nowrap; }

.ctl { overflow-x: hidden; }
#controls-drag { padding-right: 37px; }
#controls-content { display: flex; flex-direction: column; gap: 10px; }
#controls-toggle { position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 25px; height: 25px; padding: 0; border: 1px solid #7fe3ff5a;
  border-radius: 7px; background: #7fe3ff16; color: #b8efff;
  font: 18px/1 var(--mono); }
.ctl.collapsed { max-height: none; overflow: visible; }
.ctl.collapsed #controls-content { display: none; }
.ctl.collapsed #controls-drag { border-bottom: 0; padding-bottom: 3px; }

.camera-part-callout { position: absolute; z-index: 6; width: 244px; padding: 11px 33px 11px 13px;
  border: 1px solid #a7e9f0ab; border-radius: 11px;
  background: linear-gradient(145deg,#1e3240f5,#111d2cf7);
  box-shadow: 0 14px 35px #000b, 0 0 20px #7fe3ff24;
  color: #f2fbff; pointer-events: auto; backdrop-filter: blur(10px); }
.camera-part-callout[hidden] { display: none; }
.part-callout-index { display: block; color: #8de4f7; font: 9px var(--mono); letter-spacing: 1px; }
.camera-part-callout strong { display: block; margin-top: 3px; font-size: 15px; line-height: 1.2; }
.camera-part-callout p { margin: 5px 0 0; font-size: 11px; line-height: 1.42; color: #d4e1e8; }
.part-callout-close { position: absolute; top: 5px; right: 7px; width: 23px; height: 23px;
  border: 0; background: transparent; color: #bdd4dc; font-size: 17px; line-height: 1; padding: 0; }
.part-callout-close:hover { color: #fff; }
body.space-pan #world canvas { cursor: move; }
@media (max-width: 560px) {
  .sun-controls { margin-top: 6px; }
  .sun-controls button { font-size: 9px; }
  #sun-status { font-size: 8px; }
  .camera-part-callout { width: min(244px, calc(100vw - 20px)); }
}

/* Keep the drag handle and collapse control visible while settings scroll. */
.ctl{overflow:hidden;min-height:0}
#controls-drag{flex:0 0 auto;min-height:36px;align-items:center;padding-top:3px;padding-bottom:8px;padding-right:44px}
#controls-content{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:2px 3px 6px 0}
#controls-content>*{flex-shrink:0}
.ctl.collapsed #controls-content{display:none}

@media(max-width:560px){.camera-inspector:not(.dragged){top:190px}}