/* 3D Viewer wrap */
#viewer-wrap {
  display: none; flex-direction: column; gap: 0;
  border: none; border-radius: 0; overflow: hidden;
  background: var(--ov-bg); position: fixed;
  top: 56px; left: calc(var(--sb-w) + var(--fp-module-w));
  right: 0; bottom: 0; width: auto; max-width: none;
  height: calc(100vh - 56px); margin: 0; transform: none;
  transition: left .22s cubic-bezier(.4,0,.2,1); z-index: 10;
}
#viewer-wrap.visible { display: flex; }
#viewer-wrap .viewer-body { flex: 1; min-height: 0; overflow: hidden; width: 100%; }
#viewer-canvas { display: block; width: 100% !important; height: 100% !important; background: #0d1914 !important; }
#viewer-canvas { width: 100%; height: 75vh; min-height: 500px; max-height: 900px; display: block; cursor: grab; }
#viewer-canvas:active { cursor: grabbing; }

#viewer-wrap::before, #viewer-wrap::after {
  content: ''; position: absolute; width: 20px; height: 20px; z-index: 5; pointer-events: none;
}
#viewer-wrap::before { top: 52px; left: 0; border-top: 2px solid rgba(44,221,127,.4); border-left: 2px solid rgba(44,221,127,.4); }
#viewer-wrap::after { top: 52px; right: 0; border-top: 2px solid rgba(44,221,127,.4); border-right: 2px solid rgba(44,221,127,.4); }

.viewer-body {
  display: flex; position: relative; flex: 1; min-height: 0; overflow: hidden;
}
.viewer-body canvas { flex: 1; min-width: 0; height: 100%; display: block; }

/* Toolbar */
.viewer-toolbar {
  display: flex; align-items: center; justify-content: flex-end;
  padding: .5rem 1rem; background: #333333; border-bottom: 1px solid #444;
  background: rgba(11,20,16,.92) !important; border-bottom: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) !important; padding: 0 16px !important; height: 48px;
}
.viewer-title {
  font-size: .82rem; font-weight: 600; color: #ccc; letter-spacing: .3px;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: .75rem !important; font-weight: 600; color: var(--accent) !important;
  letter-spacing: 1px; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.viewer-title::before { content: '⬡'; font-size: 14px; text-shadow: 0 0 8px var(--accent); }
.viewer-controls { display: flex; gap: .5rem; }
.viewer-controls button {
  background: #3c3c3c; border: 1px solid #505050; color: #aaa;
  padding: .3rem .65rem; border-radius: 4px; font-size: .73rem; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  background: rgba(44,221,127,.06) !important; border: 1px solid rgba(44,221,127,.2) !important;
  color: #8ac0a3 !important; border-radius: 8px !important; font-size: .72rem !important;
  font-weight: 600; letter-spacing: .5px; padding: 5px 12px !important; transition: all .2s !important;
}
.viewer-controls button:hover {
  background: #555; color: #eee; border-color: #666;
  background: rgba(44,221,127,.15) !important; border-color: var(--accent) !important;
  color: var(--accent) !important; box-shadow: var(--glow-s) !important;
}
.viewer-controls button.tool-active { background: var(--ov-select); color: #fff; border-color: var(--ov-select); }
.viewer-controls button#btn-edit {
  background: rgba(119,233,214,.15) !important; border-color: rgba(119,233,214,.4) !important; color: #bcd6c9 !important;
}
.viewer-controls button#btn-edit:hover {
  background: rgba(119,233,214,.3) !important; color: #d1e3da !important; box-shadow: 0 0 10px rgba(119,233,214,.3) !important;
}
/* Stage toggle toolbar button */
.viewer-controls button#btn-stage-toggle {
  background: rgba(44,221,127,.10) !important;
  border-color: rgba(44,221,127,.30) !important;
  color: rgba(44,221,127,.85) !important;
}
.viewer-controls button#btn-stage-toggle:hover {
  background: rgba(44,221,127,.22) !important;
  color: #2cdd7f !important;
  box-shadow: 0 0 10px rgba(44,221,127,.25) !important;
}

/* Stage collapse tab (between canvas and room-panel) */
#rp-tab {
  align-self: center;
  width: 14px; min-width: 14px; height: 52px;
  background: rgba(44,221,127,.08);
  border: 1px solid rgba(44,221,127,.18);
  border-right: none;
  border-radius: 4px 0 0 4px;
  color: rgba(44,221,127,.7);
  font-size: .75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  padding: 0; z-index: 5; flex-shrink: 0;
}
#rp-tab:hover { background: rgba(44,221,127,.24); color: #2cdd7f; box-shadow: -3px 0 10px rgba(44,221,127,.15); }

/* Room panel */
#room-panel {
  width: 220px; min-width: 220px; background: #2b2b2b;
  border-left: 1px solid #3c3c3c;
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  transition: width .25s ease, min-width .25s ease;
  background: rgba(11,20,16,.92) !important; border-left: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) !important;
}
#room-panel.rp-hidden {
  width: 0 !important; min-width: 0 !important;
  border-left: none !important;
}
#room-panel-header {
  padding: .5rem .7rem; font-size: .75rem; font-weight: 600; color: #ccc;
  border-bottom: 1px solid #3c3c3c;
  display: flex; justify-content: space-between; align-items: center; background: #333;
  background: rgba(44,221,127,.05) !important; border-bottom: 1px solid var(--glass-border) !important;
}
#room-panel-header .count { font-size: .65rem; color: #888; font-weight: 400; }
#btn-save-rooms {
  display: none; padding: 3px 9px; border-radius: 5px; border: none;
  background: #2ea043; color: #fff; font-size: .68rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
  background: linear-gradient(135deg, #2cdd7f, #00ff9d) !important; color: #0a130f !important;
  font-weight: 700 !important; border: none !important; border-radius: 8px !important;
  box-shadow: 0 0 20px rgba(44,221,127,.4) !important;
}
#btn-save-rooms:hover { background: #3ab54a; }
#btn-save-rooms.dirty { display: inline-block; animation: dt-pulse 2s infinite !important; }
#save-toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #2ea043; color: #fff; font-size: .82rem; font-weight: 600;
  padding: 8px 20px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 9999;
}
#save-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#room-search {
  margin: .4rem .5rem; padding: .3rem .5rem; font-size: .73rem;
  border: 1px solid #505050; border-radius: 4px;
  background: #1f1f1f; color: #ccc; outline: none;
}
#room-search:focus { border-color: var(--ov-select); }
#room-list { flex: 1; overflow-y: auto; }
.room-item {
  padding: .45rem .7rem; font-size: .75rem; color: var(--muted);
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s, color .12s;
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid transparent !important; border-radius: 10px !important;
  margin: 4px 6px !important; background: rgba(18,32,26,.6) !important; transition: all .2s !important;
}
.room-item:hover { background: rgba(255,110,0,.1); color: #eee; background: rgba(44,221,127,.08) !important; border-color: rgba(44,221,127,.25) !important; transform: translateX(2px); }
.room-item.active { background: rgba(255,110,0,.2); color: #fff; background: rgba(44,221,127,.12) !important; border-color: rgba(44,221,127,.4) !important; box-shadow: inset 3px 0 0 var(--accent) !important; }
.room-item .room-name { font-size: .8rem; font-weight: 600; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.room-item.active .room-name { color: #fff; }
.room-item .room-kind { font-size: .62rem; color: var(--muted); margin-left: .3rem; opacity: .6; font-weight: 400; background: rgba(44,221,127,.12) !important; color: var(--accent) !important; border-radius: 4px !important; padding: 1px 5px !important; font-size: .58rem !important; }
.room-item-actions { display: flex; align-items: center; gap: .25rem; flex-wrap: nowrap; }
.room-item .room-photo-btn {
  flex-shrink: 0; width: 22px; height: 22px; border: none;
  background: rgba(255,255,255,.05); color: var(--muted); font-size: .7rem;
  cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  opacity: .6; transition: opacity .15s, background .15s;
}
.room-item .room-photo-btn:hover { opacity: 1; background: rgba(255,255,255,.13); }
.room-item .room-photo-btn.has-photo { color: #4ade80; opacity: .85; }
.room-item .room-photo-btn.has-scan { color: #6fe8a7; opacity: .9; }

/* Properties panel */
#props-panel {
  border-top: 1px solid #3c3c3c; background: #2b2b2b;
  max-height: 0; overflow: hidden; transition: max-height .25s ease;
  background: rgba(11,20,16,.95) !important; border-left: 1px solid var(--glass-border) !important; backdrop-filter: blur(20px) !important;
}
#props-panel.open { max-height: 460px; overflow-y: auto; }
#props-actions { display: flex; gap: 6px; padding: .4rem .7rem .5rem; border-top: 1px solid #3c3c3c; margin-top: 4px; }
#props-actions button { flex: 1; padding: 5px 0; border-radius: 5px; border: none; cursor: pointer; font-size: .72rem; font-weight: 600; }
#btn-props-edit   { background: #2cdd7f; color: #fff; background: rgba(44,221,127,.1) !important; border: 1px solid rgba(44,221,127,.3) !important; color: var(--accent) !important; border-radius: 8px !important; }
#btn-props-rename { background: #60aa9d; color: #fff; }
#btn-props-delete, #btn-props-delete2 { background: #8a2020; color: #fff; background: rgba(255,77,109,.1) !important; border: 1px solid rgba(255,77,109,.3) !important; color: #ff4d6d !important; border-radius: 8px !important; }
#btn-props-edit:hover   { background: #2fda7f; }
#btn-props-rename:hover { background: #60aa9e; }
#btn-props-delete:hover { background: #b02828; }
#props-rename-row { display: none; padding: .3rem .7rem; gap: 6px; align-items: center; }
#props-rename-row.visible { display: flex; }
#props-rename-input { flex: 1; background: #1e1e1e; border: 1px solid #555; color: #fff; border-radius: 4px; padding: 3px 7px; font-size: .75rem; }
#btn-rename-ok { background: #2ea043; color: #fff; border: none; border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: .72rem; font-weight: 600; }
#props-header { display: flex; justify-content: space-between; align-items: center; padding: .4rem .7rem; background: #333; border-bottom: 1px solid #3c3c3c; font-size: .73rem; font-weight: 600; color: #ccc; }
#props-close { background: none; border: none; color: #888; cursor: pointer; font-size: .8rem; }
#props-close:hover { color: #fff; }
#props-body { padding: .3rem 0; }
.prop-row { display: flex; padding: .2rem .7rem; font-size: .7rem; gap: .4rem; }
.prop-key { color: #888; min-width: 75px; flex-shrink: 0; color: var(--muted) !important; }
.prop-val { color: #ccc; word-break: break-word; color: var(--text) !important; }
.prop-section { font-size: .65rem; color: var(--ov-select); padding: .3rem .7rem .1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--accent) !important; font-weight: 700 !important; letter-spacing: 1px !important; font-size: .65rem !important; text-transform: uppercase !important; }
#props-panel .prop-section:first-child { color: #00ff9d !important; }
#props-title { color: var(--accent) !important; font-family: 'Space Grotesk', sans-serif !important; font-size: .95rem !important; }

/* Room boundary edit toolbar */
#room-edit-bar {
  display: none; position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  background: #1e1e1e; border: 1px solid #444; border-radius: 8px;
  padding: 8px 14px; gap: 10px; align-items: center;
  z-index: 20; box-shadow: 0 4px 16px rgba(0,0,0,.5); flex-direction: row;
  background: rgba(11,20,16,.95) !important; border: 1px solid rgba(44,221,127,.3) !important; border-radius: 12px !important; backdrop-filter: blur(20px) !important; box-shadow: var(--glow) !important;
}
#room-edit-bar.active { display: flex; }
#room-edit-bar span { color: #ccc; font-size: .82rem; }
#room-edit-bar strong { color: #fff; font-size: .88rem; }
#room-edit-bar button { padding: 4px 12px; border-radius: 5px; border: none; cursor: pointer; font-size: .8rem; font-weight: 600; }
#btn-room-save   { background: #2ea043; color: #fff; }
#btn-room-cancel { background: #555; color: #fff; }
#btn-room-snap-walls { background: #2cdd7f; color: #fff; }
#btn-room-grid-snap  { background: #444; color: #aaa; transition: background .15s, color .15s; }
#btn-room-grid-snap.on { background: #43e0c6; color: #fff; }
#room-edit-bar .edit-hint { font-size:.72rem; color:#777; white-space:nowrap; }

/* Room list edit/delete buttons */
.room-edit-btn {
  flex-shrink: 0; width: 22px; height: 22px; border: none;
  background: rgba(44,221,127,.25); color: #5bd493; font-size: .65rem;
  cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  opacity: .8; transition: opacity .15s, background .15s;
}
.room-edit-btn:hover { opacity: 1; background: rgba(44,221,127,.55); }
.room-edit-btn.active-edit { color: #ff9900; background: rgba(255,153,0,.25); opacity: 1; }
.room-del-btn {
  flex-shrink: 0; width: 22px; height: 22px; border: none;
  background: rgba(138,21,21,.25); color: #d46060; font-size: .65rem;
  cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  opacity: .8; transition: opacity .15s, background .15s;
}
.room-del-btn:hover { opacity: 1; background: rgba(138,21,21,.55); }

/* Annotate mode */
#annotate-picker {
  display: none; position: absolute; background: #1f1f1f; border: 1px solid #ff6e00;
  border-radius: 6px; padding: 8px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.7); width: 200px;
}
#annotate-picker.visible { display: block; }
#annotate-picker .ap-title { color: #ff6e00; font-size: .7rem; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; }
#annotate-picker .ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#annotate-picker button { background: #333; border: 1px solid #555; color: #ddd; padding: 5px 8px; border-radius: 4px; font-size: .72rem; cursor: pointer; }
#annotate-picker button:hover { background: #ff6e00; color: #fff; border-color: #ff6e00; }
#annotate-picker .ap-cancel { grid-column: 1 / -1; background: transparent; color: #888; margin-top: 4px; }
#annotate-hint { display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); color: #ff6e00; padding: 5px 12px; border-radius: 4px; font-size: .75rem; z-index: 26; pointer-events: none; }
#annotate-hint.visible { display: block; }
#annotate-actions { display: none; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); gap: 6px; z-index: 26; }
#annotate-actions.visible { display: flex; }
#annotate-actions button { background: #2b2b2b; border: 1px solid #555; color: #ddd; padding: 6px 14px; border-radius: 5px; font-size: .75rem; cursor: pointer; }
#annotate-actions button.primary { background: #ff6e00; border-color: #ff6e00; color: #fff; }

/* 360 Panorama */
#pano-overlay { display: none; position: absolute; inset: 0; background: #000; z-index: 20; }
#pano-overlay.visible { display: block; }
#pano-canvas { width: 100% !important; height: 100% !important; display: block; }
#pano-close { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: .85rem; padding: .3rem .7rem; border-radius: 6px; cursor: pointer; z-index: 21; }
#pano-close:hover { background: rgba(255,255,255,.15); }
#pano-room-label { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.6); color: #fff; padding: .3rem .8rem; border-radius: 6px; font-size: .8rem; z-index: 21; }

/* Edit mode panel */
#edit-mode-panel {
  display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 30; background: rgba(26,42,35,.97); border: 1px solid #4fe294;
  border-radius: 10px; padding: .45rem .8rem; align-items: center; gap: .4rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(79,226,148,.2);
  backdrop-filter: blur(6px);
  background: rgba(11,20,16,.95) !important; border: 1px solid rgba(44,221,127,.25) !important; border-radius: 12px !important; backdrop-filter: blur(20px) !important; box-shadow: var(--glow), var(--shadow) !important;
}
#edit-mode-panel.active { display: flex; }
.edit-panel-title { font-size: .72rem; font-weight: 700; color: #4fe294; letter-spacing: .5px; margin-right: .3rem; white-space: nowrap; color: var(--accent) !important; font-weight: 700 !important; letter-spacing: 1px !important; }
#edit-mode-panel button {
  background: #263e34; border: 1px solid #719883; color: #c0d8cc; padding: .28rem .65rem;
  border-radius: 5px; font-size: .72rem; cursor: pointer; transition: background .12s, color .12s, border-color .12s; white-space: nowrap;
  background: rgba(44,221,127,.07) !important; border: 1px solid rgba(44,221,127,.2) !important; color: #8ac0a3 !important; border-radius: 8px !important; transition: all .2s !important;
}
#edit-mode-panel button:hover { background: #709a83; color: #fff; border-color: #759584; background: rgba(44,221,127,.18) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
#edit-mode-panel button.tool-active { background: rgba(79,226,148,.3); color: #bad6c8; border-color: #4fe294; }
#edit-mode-panel button:disabled { opacity: .4; cursor: default; }
.edit-save-btn { color: #4ade80 !important; border-color: #166534 !important; background: rgba(22,101,52,.25) !important; }
.edit-save-btn:not(:disabled):hover { background: rgba(22,101,52,.5) !important; }
#btn-edit-close { color: #f87171 !important; border-color: #7f1d1d !important; background: rgba(127,29,29,.2) !important; }
#btn-edit-close:hover { background: rgba(127,29,29,.45) !important; }
#btn-delete-wall { color: #f87171 !important; border-color: #7f1d1d !important; background: rgba(127,29,29,.2) !important; }
#btn-delete-wall:hover { background: rgba(127,29,29,.45) !important; }
.edit-panel-sep { width: 1px; height: 18px; background: #719883; margin: 0 .1rem; }

/* Add room dialog */
#add-room-dialog { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; align-items: center; justify-content: center; background: rgba(0,0,0,.7) !important; }
#add-room-dialog.visible { display: flex; }
#add-room-box { background: #252526; border: 1px solid #555; border-radius: 10px; padding: 20px 24px; width: 330px; box-shadow: 0 8px 32px rgba(0,0,0,.7); background: rgba(11,20,16,.98) !important; border: 1px solid var(--glass-border) !important; border-radius: 16px !important; backdrop-filter: blur(30px) !important; box-shadow: 0 0 60px rgba(44,221,127,.2), var(--shadow) !important; }
#add-room-box label { font-size: .75rem; color: #aaa; display: block; margin-bottom: 3px; }
.ar-tabs { display: flex; gap: 5px; margin-bottom: 16px; }
.ar-tab { flex: 1; padding: 7px 0; border-radius: 6px; border: none; background: #333; color: #aaa; cursor: pointer; font-size: .78rem; font-weight: 600; transition: background .15s; }
.ar-tab.active { background: #2cdd7f; color: #fff; background: linear-gradient(135deg, rgba(44,221,127,.2), rgba(119,233,214,.2)) !important; color: var(--accent) !important; border-color: rgba(44,221,127,.4) !important; }
.ar-tab:hover:not(.active) { background: #3a3a3a; }
.ar-input { width: 100%; box-sizing: border-box; background: #1e1e1e; border: 1px solid #555; color: #fff; border-radius: 5px; padding: 6px 10px; font-size: .85rem; margin-bottom: 12px; background: rgba(44,221,127,.05) !important; border: 1px solid rgba(44,221,127,.2) !important; color: var(--text) !important; border-radius: 8px !important; }
.ar-input:focus { border-color: var(--accent) !important; box-shadow: var(--glow-s) !important; }
#add-room-name { width: 100%; box-sizing: border-box; background: #1e1e1e; border: 1px solid #555; color: #fff; border-radius: 5px; padding: 6px 10px; font-size: .85rem; margin-bottom: 4px; }
#add-room-hint { font-size: .72rem; color: #888; margin-bottom: 14px; line-height: 1.4; }
.room-name-dup-hint { font-size: .72rem; min-height: 1.1rem; margin-bottom: 8px; color: #e74c3c; line-height: 1.4; display: flex; align-items: center; gap: 6px; }
.room-name-dup-hint .dup-suggest-btn { background: rgba(231,76,60,.18); border: 1px solid #e74c3c; color: #ff8a80; border-radius: 4px; padding: 1px 7px; font-size: .7rem; cursor: pointer; white-space: nowrap; }
.room-name-dup-hint .dup-suggest-btn:hover { background: rgba(231,76,60,.35); }
.room-name-duplicate { border-color: #e74c3c !important; box-shadow: 0 0 0 2px rgba(231,76,60,.25) !important; }
.ar-input.room-name-duplicate, .ar-input.room-name-duplicate:focus { border-color: #e74c3c !important; box-shadow: 0 0 0 2px rgba(231,76,60,.25) !important; }
#props-rename-input.room-name-duplicate { border-color: #e74c3c !important; }
#rename-dup-hint { font-size: .7rem; min-height: 1rem; color: #e74c3c; margin: 2px 0 4px; display: flex; align-items: center; gap: 6px; }
#ar-dim-row { display: flex; gap: 10px; margin-bottom: 12px; }
#ar-dim-row > div { flex: 1; }
#ar-dim-row input { width: 100%; box-sizing: border-box; background: #1e1e1e; border: 1px solid #555; color: #fff; border-radius: 5px; padding: 6px 10px; font-size: .85rem; }
#ar-current-size { font-size: .72rem; color: #888; margin: 4px 0 12px; }
.add-room-btns { display: flex; gap: 8px; }
.add-room-btns button { flex: 1; padding: 7px 0; border-radius: 5px; border: none; cursor: pointer; font-weight: 600; font-size: .8rem; }
#btn-add-room-ok  { background: #2ea043; color: #fff; background: linear-gradient(135deg, #2cdd7f, #77e9d6) !important; border: none !important; color: #0a130f !important; font-weight: 700 !important; border-radius: 8px !important; }
#btn-ar-apply     { background: #2ea043; color: #fff; }
#btn-add-room-cancel, #btn-ar-cancel { background: #444; color: #ccc; }
#btn-add-room {
  margin-left: auto; padding: 3px 9px; border-radius: 5px; border: none;
  background: #2cdd7f; color: #fff; cursor: pointer; font-size: .7rem; font-weight: 600;
  background: linear-gradient(135deg, rgba(44,221,127,.2), rgba(119,233,214,.2)) !important;
  border: 1px solid rgba(44,221,127,.4) !important; color: var(--accent) !important; border-radius: 8px !important;
  font-weight: 600 !important; letter-spacing: .5px !important; box-shadow: var(--glow-s) !important;
}
#btn-add-room:hover { background: #2edb7f; background: linear-gradient(135deg, rgba(44,221,127,.35), rgba(119,233,214,.35)) !important; box-shadow: var(--glow) !important; }
body.placing-room #viewer-canvas { cursor: crosshair; }

/* Tooltip */
#viewer-tooltip {
  position: absolute; background: rgba(20,36,29,.95); border: 1px solid var(--border);
  border-radius: 6px; padding: .4rem .7rem; font-size: .75rem; color: var(--text);
  pointer-events: none; display: none; z-index: 100; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
  background: rgba(11,20,16,.95) !important; border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important; backdrop-filter: blur(10px) !important; color: var(--text) !important; box-shadow: var(--glow-s) !important;
}

/* Nature panel */
#nature-panel { background: rgba(11,20,16,.95) !important; border: 1px solid var(--glass-border) !important; border-radius: 12px !important; backdrop-filter: blur(20px) !important; }

/* Branch/floor selector widget */
.dt-branch-floor { background: rgba(11,20,16,.95) !important; border: 1px solid var(--glass-border) !important; border-radius: 12px !important; backdrop-filter: blur(20px) !important; }
.dt-branch-floor select { background: rgba(44,221,127,.08) !important; border: 1px solid rgba(44,221,127,.2) !important; color: var(--text) !important; border-radius: 8px !important; }

/* FP overlay */
#fp-overlay { background: rgba(11,20,16,.85) !important; backdrop-filter: blur(10px) !important; }

/* Confirm dialog */
#confirm-dialog { background: rgba(11,20,16,.98) !important; border: 1px solid rgba(255,77,109,.3) !important; border-radius: 14px !important; backdrop-filter: blur(30px) !important; }

/* Confirm overlay (full) */
#confirm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999; align-items: center; justify-content: center; }
#confirm-overlay.visible { display: flex; }
#confirm-box { background: #ffffff; border: 1px solid #dde7e2; border-radius: 14px; padding: 30px 28px 24px; width: 360px; box-shadow: 0 16px 48px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 14px; animation: confirmPop .15s ease; }
@keyframes confirmPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#confirm-icon { width: 52px; height: 52px; border-radius: 50%; background: #fff0f0; border: 2px solid #f8a4a0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto; }
#confirm-title { font-size: 1.05rem; font-weight: 700; color: #1b2d25; text-align: center; margin: 0; }
#confirm-body { font-size: .84rem; color: #769384; text-align: center; line-height: 1.6; margin: 0; }
#confirm-name { display: block; color: #c0392b; font-weight: 700; margin: 2px 0 2px; font-size: .92rem; }
.confirm-btns { display: flex; gap: 10px; margin-top: 6px; }
#confirm-cancel { flex: 1; padding: 10px 0; border-radius: 8px; border: 1.5px solid #d0ddd6; background: #f6f9f8; color: #6d9c83; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s; }
#confirm-cancel:hover { background: #e9f0ec; }
#confirm-ok { flex: 1; padding: 10px 0; border-radius: 8px; border: none; background: #e53935; color: #fff; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .15s; box-shadow: 0 2px 8px rgba(229,57,53,.35); }
#confirm-ok:hover { background: #c62828; }

/* Toast */
#toast { background: rgba(11,20,16,.95) !important; border: 1px solid var(--glass-border) !important; border-radius: 10px !important; backdrop-filter: blur(20px) !important; box-shadow: var(--glow), var(--shadow) !important; color: var(--text) !important; font-family: 'Inter', sans-serif !important; }