* { margin:0; padding:0; box-sizing:border-box; }
body { background:#222; color:#eee; font-family:system-ui,sans-serif; overflow:hidden; height:100vh; display:flex; flex-direction:column; }

.zoom-select { background:#222; border:1px solid #555; color:#eee; padding:4px 8px; border-radius:4px; font-size:12px; cursor:pointer; margin-left:auto; }

.viewport {
  flex:1; overflow:auto; padding:24px 16px;
  display:flex; justify-content:center; align-items:flex-start; gap:4px;
  min-width:0;
  position:relative;
}


.viewer-toast {
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  background:#1a4030;
  color:#3dd68c;
  border:1px solid #3dd68c;
  padding:8px 16px;
  border-radius:4px;
  font-family:monospace;
  font-size:12px;
  opacity:0;
  transition:opacity 0.2s;
  pointer-events:none;
}
.viewer-toast.show {
  opacity:1;
}
.viewer-toast.error {
  color:#ff9090;
  border-color:#ff9090;
  background:#401a1a;
}

#screen {
  position:relative; flex-shrink:0;
  background:#000; border:1px solid #333;
  transform-origin:top center;
}

/* Sidebar */
#annotations {
  width:300px; flex-shrink:0;
  background:#16162a; border-left:1px solid #333;
  padding:0;
  font-size:11px; overflow-y:auto;
  display:flex; flex-direction:column;
}
#sidebar-header {
  flex-shrink:0; padding:10px 14px 0;
}
#anno-content {
  flex:1; overflow-y:auto; padding:0 14px 12px;
}
.anno-title { font-weight:bold; color:#4af; margin-bottom:4px; font-size:13px; }
.anno-geo { color:#888; font-family:monospace; font-size:10px; }

/* Render mode toggle */
.render-toggle { display:flex; gap:2px; margin:6px 0 4px; }
.rt-btn { padding:2px 12px; font-size:10px; font-weight:bold; border:1px solid #444; border-radius:3px; background:#222; color:#888; cursor:pointer; }
.rt-btn.active { background:#2d4a6a; border-color:#4af; color:#7fbfdf; }
.rt-btn[data-mode="js"].active { background:#6a4a2d; border-color:#fa4; color:#dfbf7f; }
.rt-btn[data-mode="blend"].active { background:#4a2d6a; border-color:#a040f0; color:#d0a0ff; }

/* Annotation textarea */
.anno-input {
  width:100%; min-height:50px; margin-top:6px; padding:6px;
  background:#111; border:1px solid #444; border-radius:4px;
  color:#eee; font-family:system-ui,sans-serif; font-size:11px;
  resize:vertical;
}
.anno-input:focus { border-color:#4af; outline:none; }

/* Contracts */
.contract-section { margin-top:8px; }
.contract-label { font-size:9px; color:#888; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.contract-item { display:flex; gap:4px; margin-bottom:3px; }
.contract-input { flex:1; background:#111; border:1px solid #444; border-radius:3px; color:#eee; font-size:11px; padding:3px 6px; }
.contract-input:focus { border-color:#4af; outline:none; }
.contract-del { background:none; border:none; color:#555; cursor:pointer; font-size:14px; padding:0 4px; }
.contract-del:hover { color:#e74c3c; }
.contract-add { background:#222; border:1px solid #444; border-radius:3px; color:#888; font-size:10px; padding:2px 10px; cursor:pointer; margin-top:2px; }
.contract-add:hover { border-color:#4af; color:#eee; }
.anno-img { color:#666; font-family:monospace; font-size:9px; margin-top:4px; }

/* Layers */
.layer { position:absolute; overflow:hidden; }
.layer img { display:block; pointer-events:none; }
.layer.hovered { outline:2px solid #4af; }

/* Annotation box overlays */
.anno-box {
  position:absolute; pointer-events:none;
  border:1px solid rgba(255,200,0,0.0);
  transition:border-color 0.15s;
}
.anno-box:hover { border-color:rgba(255,200,0,0.6); }
.anno-label {
  position:absolute; top:-16px; left:0;
  font-size:9px; color:#ff0; background:rgba(0,0,0,0.6);
  padding:1px 4px; white-space:nowrap; opacity:0;
  transition:opacity 0.15s;
}
.layer.hovered ~ .anno-box .anno-label,
.anno-box:hover .anno-label { opacity:1; }

.placeholder-label {
  font-size:10px; color:rgba(100,150,255,0.6);
  padding:4px; display:block;
}

/* Toolbar buttons */
.compare-btn {
  padding:4px 12px; border:1px solid #555; border-radius:4px;
  font-size:11px; font-weight:bold; cursor:pointer;
  background:#222; color:#888;
}
.compare-btn.active { background:#2d6a4a; border-color:#4af0a0; color:#a0ffd0; }

/* IP Studio link in top toolbar */
.ip-studio-link {
  text-decoration: none;
  display: inline-block;
  background: #3a1a5a;
  color: #d0a0ff;
  border-color: #5a2d8a;
}
.ip-studio-link:hover { background: #4a2a6a; color: #fff; }

/* Manual Save button — highlights when there are unsaved changes */
.manual-save-btn { background:#1a3550; color:#7fbfdf; border-color:#2a5170; }
.manual-save-btn.dirty {
  background:#5a3d10; color:#ffd068; border-color:#ffa500;
  animation: ms-pulse 1.6s ease-in-out infinite;
}
@keyframes ms-pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(255,165,0,0.4); }
  50%      { box-shadow:0 0 0 4px rgba(255,165,0,0); }
}

/* Per-layer View dropdown (legacy sidebar) */
.view-controls {
  display:flex; flex-direction:column; gap:4px; margin:6px 0 8px;
  padding:6px; background:#1a1a1a; border:1px solid #333; border-radius:4px;
}
.view-row {
  display:flex; align-items:center; gap:6px;
  font-size:10px; color:#888;
}
.view-row label {
  flex:0 0 54px; text-transform:uppercase; letter-spacing:0.5px;
}
.view-select {
  flex:1; padding:3px 4px; font-size:11px;
  background:#222; color:#7fbfdf; border:1px solid #2d4a6a; border-radius:3px;
  cursor:pointer;
}
.view-select:focus { outline:none; border-color:#4af0a0; }



/* Screen-level bbox overlay (Parts toggle) */
.parts-overlay {
  pointer-events: none;
}
.part-box {
  pointer-events: auto;
  cursor: pointer;
  outline: 2px solid rgba(255, 200, 0, 0.9);
  background: rgba(255, 200, 0, 0.08);
  transition: background 0.1s, outline-color 0.1s;
}
.part-box:hover {
  background: rgba(255, 200, 0, 0.18);
  outline-color: rgba(255, 220, 80, 1);
}
.part-box.selected {
  outline: 2px solid #4af0a0;
  background: rgba(74, 240, 160, 0.15);
}
.part-box-label {
  position: absolute;
  top: -14px;
  left: 0;
  font-size: 9px;
  font-weight: bold;
  color: #000;
  background: rgba(255, 200, 0, 0.95);
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
}
.part-box.selected .part-box-label {
  background: rgba(74, 240, 160, 0.95);
  color: #000;
}

/* Corner resize handles for the selected bbox */
.part-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #4af0a0;
  border: 1px solid #0a0a0a;
  border-radius: 2px;
  z-index: 2;
}
.part-resize-nw { top: -6px;    left: -6px;   cursor: nwse-resize; }
.part-resize-ne { top: -6px;    right: -6px;  cursor: nesw-resize; }
.part-resize-sw { bottom: -6px; left: -6px;   cursor: nesw-resize; }
.part-resize-se { bottom: -6px; right: -6px;  cursor: nwse-resize; }

/* "+ Add part" button */
.pbb-add {
  display: inline-block;
  margin-top: 6px;
  background: #1a2a20;
  border: 1px solid #2d6a4a;
  border-radius: 3px;
  color: #a0ffd0;
  font-size: 10px;
  padding: 4px 10px;
  cursor: pointer;
}
.pbb-add:hover {
  border-color: #4af0a0;
  background: #2a4a3a;
}
.pbb-back {
  display: inline-block;
  margin-top: 6px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 3px;
  color: #888;
  font-size: 10px;
  padding: 4px 8px;
  cursor: pointer;
}
.pbb-back:hover { border-color: #666; color: #ccc; }

/* Part bbox editor (sidebar) */
.part-bbox-editor {
  margin-top: 8px;
  padding: 8px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.part-bbox-editor label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #aaa;
}
.pbb-text, .pbb-num, .pbb-type {
  flex: 1;
  background: #111;
  border: 1px solid #444;
  border-radius: 3px;
  color: #eee;
  font-size: 10px;
  padding: 3px 5px;
}
.pbb-num { max-width: 64px; }
.pbb-text:focus, .pbb-num:focus, .pbb-type:focus {
  outline: none;
  border-color: #4af0a0;
}
.pbb-row {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.pbb-delete {
  background: #322;
  border: 1px solid #644;
  border-radius: 3px;
  color: #a66;
  font-size: 10px;
  padding: 4px 10px;
  cursor: pointer;
}
.pbb-delete:hover {
  border-color: #e74c3c;
  color: #e74c3c;
}

/* Themes-mode parts overlay — outline parts on hover, highlight when selected */
.parts-root .blend-part {
  cursor:pointer;
  outline:1px dashed rgba(255,200,0,0);
  transition:outline-color 0.1s;
}
.parts-root .blend-part:hover {
  outline-color:rgba(255,200,0,0.7);
}
.parts-root .blend-part.selected {
  outline:2px solid #4af0a0;
  outline-offset:1px;
}

/* Themes-mode parts list (sidebar) */
.parts-section-label {
  font-size:9px; color:#7fbfdf; text-transform:uppercase;
  letter-spacing:0.5px; margin:8px 0 4px;
}
.parts-list {
  display:flex; flex-direction:column; gap:2px;
  max-height:280px; overflow-y:auto;
  border:1px solid #333; border-radius:3px; padding:3px;
  background:#0e0e1a;
}
.parts-row {
  display:flex; gap:2px; align-items:center;
}
.parts-row.selected .parts-row-btn {
  border-color:#4af0a0; color:#a0ffd0; background:#1a2a20;
}
.parts-row-btn {
  flex:1; text-align:left;
  background:#1a1a1a; border:1px solid #333; border-radius:3px;
  color:#aaa; font-size:10px; padding:3px 6px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.parts-row-btn:hover { border-color:#666; color:#eee; }
.parts-row-type {
  display:inline-block; min-width:36px;
  font-size:8px; color:#666; text-transform:uppercase;
  font-weight:bold; margin-right:4px;
}
.parts-row-up, .parts-row-down {
  background:#1a1a1a; border:1px solid #333; border-radius:3px;
  color:#666; font-size:9px; cursor:pointer;
  padding:2px 5px; line-height:1;
}
.parts-row-up:hover:not(:disabled),
.parts-row-down:hover:not(:disabled) { border-color:#888; color:#ccc; }
.parts-row-up:disabled, .parts-row-down:disabled { opacity:0.3; cursor:default; }

/* Screen-level annotation in themes sidebar */
.screen-anno-text {
  margin-top:8px; padding:8px;
  background:#111; border:1px solid #333; border-radius:4px;
  font-size:10px; color:#aaa; line-height:1.4;
  max-height:240px; overflow-y:auto;
}
.hint-text {
  margin-top:10px; font-size:9px; color:#555;
}

/* Themes-mode part inspector */
.part-inspector {
  margin-top:8px; padding:8px;
  background:#1a1a1a; border:1px solid #333; border-radius:4px;
  display:flex; flex-direction:column; gap:6px;
}
.part-inspector label {
  display:flex; align-items:center; gap:6px;
  font-size:10px; color:#aaa;
}
.part-inspector .pi-row {
  display:flex; gap:6px;
}
.pi-section-label {
  font-size:9px; color:#7fbfdf; text-transform:uppercase;
  letter-spacing:0.5px; margin-top:6px;
}
.pi-text, .pi-num, .pi-type {
  flex:1; min-width:0;
  background:#111; border:1px solid #444; border-radius:3px;
  color:#eee; font-size:10px; padding:3px 5px;
}
.pi-num { max-width:64px; }
.pi-xy { width:54px; }
.pi-text:focus, .pi-num:focus, .pi-type:focus { outline:none; border-color:#a040f0; }
.pi-color {
  width:30px; height:22px;
  background:none; border:1px solid #444; border-radius:3px;
  cursor:pointer; padding:0;
}
.pi-range {
  flex:1; accent-color:#a040f0;
}
.pi-back {
  margin-top:6px; padding:4px 8px;
  background:#222; border:1px solid #444; border-radius:3px;
  color:#888; font-size:10px; cursor:pointer;
}
.pi-back:hover { border-color:#4af; color:#eee; }

/* Blend rendered elements */
.blend-root { position:relative; width:100%; height:100%; }
.blend-fill { position:absolute; inset:0; }
.blend-part { position:absolute; overflow:hidden; }
.blend-corner { position:absolute; pointer-events:none; z-index:1; }
.blend-shine { position:absolute; inset:0; pointer-events:none; z-index:2; }

/* Blend controls in sidebar */
.blend-controls { margin-top:10px; border-top:1px solid #333; padding-top:8px; }
.blend-section-header { font-size:10px; font-weight:bold; color:#d0a0ff; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.blend-variant-row { display:flex; gap:4px; margin-bottom:6px; }
.blend-variant-select { flex:1; background:#111; border:1px solid #444; border-radius:3px; color:#eee; font-size:10px; padding:2px 4px; }
.blend-variant-new, .blend-variant-del {
  background:#222; border:1px solid #444; border-radius:3px;
  color:#888; font-size:12px; cursor:pointer; padding:0 6px; line-height:1;
}
.blend-variant-new:hover { border-color:#4af; color:#eee; }
.blend-variant-del:hover { border-color:#e74c3c; color:#e74c3c; }
.blend-preset-row { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:8px; }
.blend-preset-btn {
  background:#2a2a3e; border:1px solid #444; border-radius:3px;
  color:#aaa; font-size:9px; padding:2px 6px; cursor:pointer;
}
.blend-preset-btn:hover { border-color:#a040f0; color:#d0a0ff; }
.blend-parts-list { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.blend-part-row { display:flex; gap:2px; align-items:center; }
.blend-part-btn {
  background:#222; border:1px solid #444; border-radius:3px;
  color:#aaa; font-size:9px; padding:2px 6px; cursor:pointer; text-align:left;
}
.blend-part-btn { flex:1; }
.blend-part-btn.active { border-color:#a040f0; color:#d0a0ff; background:#2a2040; }
.blend-part-btn:hover { border-color:#888; }
.blend-part-move {
  background:#222; border:1px solid #444; border-radius:3px;
  color:#666; font-size:8px; cursor:pointer; padding:1px 4px; line-height:1;
}
.blend-part-move:hover { border-color:#888; color:#ccc; }
.blend-part-move:disabled { opacity:0.3; cursor:default; }
.blend-part-type { color:#666; font-size:8px; text-transform:uppercase; }
.blend-part-add {
  background:#222; border:1px dashed #444; border-radius:3px;
  color:#888; font-size:9px; padding:2px 6px; cursor:pointer;
}
.blend-part-add:hover { border-color:#a040f0; color:#d0a0ff; }
.blend-part-del {
  background:#322; border:1px solid #644; border-radius:3px;
  color:#a66; font-size:9px; padding:2px 8px; cursor:pointer; margin-top:4px;
}
.blend-part-del:hover { border-color:#e74c3c; color:#e74c3c; }
.blend-part-controls { margin-top:4px; }
.bp-num {
  background:#111; border:1px solid #444; border-radius:3px;
  color:#eee; font-size:10px; padding:2px 4px; width:50px;
}
.bp-num:focus { border-color:#a040f0; outline:none; }
.bp-select {
  background:#111; border:1px solid #444; border-radius:3px;
  color:#eee; font-size:10px; padding:2px 4px;
}
.bp-select:focus { border-color:#a040f0; outline:none; }
.blend-section { margin-bottom:2px; }
.blend-section-toggle {
  font-size:10px; font-weight:bold; color:#888; cursor:pointer;
  padding:3px 0; user-select:none;
}
.blend-section-toggle::before { content:'▾ '; font-size:8px; }
.blend-section.collapsed .blend-section-toggle::before { content:'▸ '; }
.blend-section.collapsed .blend-section-body { display:none; }
.blend-section-body { padding:2px 0 4px 8px; }
.blend-section-body label {
  display:flex; align-items:center; gap:6px; font-size:10px; color:#aaa; margin-bottom:3px;
}
.blend-slider { flex:1; max-width:100px; accent-color:#a040f0; }
.blend-val { font-family:monospace; font-size:9px; color:#888; min-width:28px; }
.blend-color { width:28px; height:20px; border:1px solid #444; border-radius:2px; padding:0; cursor:pointer; background:none; }
.blend-input {
  flex:1; background:#111; border:1px solid #444; border-radius:3px;
  color:#eee; font-size:10px; padding:2px 4px;
}
.blend-input:focus { border-color:#a040f0; outline:none; }

/* Video render mode button */
.rt-btn[data-mode="video"].active { background:#2d6a4a; border-color:#4af0a0; color:#a0ffd0; }

/* Button layers */
.layer-button { transition:transform 0.08s, filter 0.08s; }

/* Moments section (inside sidebar) */
.moments-section {
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #333;
}
.moment-item { margin-bottom:4px; }
.moment-btn {
  display:block; width:100%; text-align:left;
  background:#222; border:1px solid #444; border-radius:4px;
  color:#aaa; font-size:10px; padding:4px 8px; cursor:pointer;
  font-weight:bold;
}
.moment-btn:hover { border-color:#4af0a0; color:#a0ffd0; }
.moment-param {
  background:#111; border:1px solid #444; border-radius:3px;
  color:#eee; font-size:10px; padding:2px 6px; width:80px;
  margin-top:3px;
}
.moment-param:focus { border-color:#4af0a0; outline:none; }
.moment-desc { font-size:9px; color:#666; margin-top:2px; }

/* State section (inside sidebar) */
.state-section {
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #333;
}
.state-row {
  display:flex; align-items:center; gap:6px; margin-bottom:4px;
}
.state-label { font-size:10px; color:#aaa; min-width:60px; }
.state-value {
  background:#111; border:1px solid #444; border-radius:3px;
  color:#eee; font-size:10px; padding:2px 6px; width:70px;
}
.state-value:focus { border-color:#fa4; outline:none; }
.state-max { font-size:9px; color:#666; }