/* ═══════════════════════════════════════════════════
   LIGHT MODE THEME — applied via body.light-mode
   Toggle handled by dtToggleTheme() in index.html
   ═══════════════════════════════════════════════════ */

/* ── Theme toggle button (topbar) ── */
#dt-theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(28,156,96,.07);
  border: 1px solid rgba(28,156,96,.18);
  border-radius: 10px; cursor: pointer;
  color: rgba(230,190,50,.95);
  transition: all .2s ease;
  flex-shrink: 0; outline: none; padding: 0;
}
#dt-theme-toggle:hover {
  background: rgba(28,156,96,.14);
  border-color: rgba(28,156,96,.35);
  color: #ffd040;
  box-shadow: 0 0 12px rgba(255,210,0,.2);
  transform: scale(1.06);
}
body.light-mode #dt-theme-toggle {
  background: rgba(17,98,60,.08);
  border-color: rgba(17,98,60,.2);
  color: rgba(41,146,97,.85);
}
body.light-mode #dt-theme-toggle:hover {
  background: rgba(17,98,60,.16);
  border-color: rgba(17,98,60,.38);
  color: #167d4d;
  box-shadow: 0 0 12px rgba(22,122,75,.15);
  transform: scale(1.06);
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE — CSS Variable Overrides
   ═══════════════════════════════════════════════════ */
body.light-mode {
  /* Page is white and carries the grid; #ece7dd is reserved for form
     and card surfaces sitting on top of it. */
  --bg:           #ffffff;
  --surface:      #ece7dd;
  --surface2:     #e3ddd0;
  --border:       rgba(20,96,61,.16);
  --accent:       #14603d;
  --accent2:      #1f8a5b;
  --accent3:      #0f766e;
  --warn:         #c0392b;
  --amber:        #9a6b00;
  --text:         #17241e;
  --muted:        #5d6f64;
  --shadow:       0 8px 32px rgba(23,36,30,.10);
  --glow:         0 0 20px rgba(20,96,61,.12);
  --glow-s:       0 0 10px rgba(20,96,61,.08);
  --glass:        rgba(255,255,255,.85);
  --glass-border: rgba(20,96,61,.16);
  --ov-bg:        #ffffff;
  --ov-surface:   #ece7dd;
  --ov-select:    #14603d;
  /* darker rule lines so the shared grid stays legible on white */
  --dt-grid-line: rgba(20,60,42,.10);
  background: #ffffff;
  color: #17241e;
}

/* ── Grid overlay — darker rule lines, legible on the white page ── */
body.light-mode::before {
  background:
    linear-gradient(var(--dt-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dt-grid-line) 1px, transparent 1px);
  /* the `background` shorthand above resets background-size, so restate it */
  background-size: var(--dt-grid-size) var(--dt-grid-size);
}

/* ── Scrollbars ── */
body.light-mode ::-webkit-scrollbar-track { background: #ffffff; }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(20,96,61,.24); }

/* ═══════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════ */
body.light-mode #dt-topbar {
  background: rgba(249,248,244,.98);
  border-bottom: 1px solid rgba(14,80,49,.13);
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
body.light-mode #dt-topbar-title { color: #1a3228; }
body.light-mode #dt-topbar-sub   { color: rgba(16,89,55,.72); }
/* Brand lockup is theme-independent — see sidebar.css. No override here. */

body.light-mode #dt-topbar-user-btn {
  background: rgba(17,95,58,.07);
  border-color: rgba(17,95,58,.18);
}
body.light-mode #dt-topbar-user-btn:hover {
  background: rgba(17,95,58,.13);
  border-color: rgba(17,95,58,.35);
}
body.light-mode #dt-topbar-username  { color: #1a3228 !important; }
body.light-mode #dt-topbar-chevron   { color: rgba(16,89,55,.5) !important; }
body.light-mode #dt-topbar-ctx-label { color: rgba(16,89,55,.80) !important; }

body.light-mode #dt-topbar-dropdown {
  background: rgba(249,248,244,.98);
  border: 1px solid rgba(14,80,49,.16);
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
}
body.light-mode .dt-dd-name  { color: #1a3228; }
body.light-mode .dt-dd-role  { color: rgba(16,89,55,.72); }
body.light-mode .dt-dd-item  { color: rgba(26,50,40,.70); }
body.light-mode .dt-dd-item:hover { background: rgba(17,95,58,.08); color: #1a3228; }
body.light-mode .dt-dd-item.danger { color: rgba(195,25,55,.8); }
body.light-mode .dt-dd-item.danger:hover { background: rgba(195,25,55,.08); color: #d83352; }

/* Dropdown section dividers */
body.light-mode #dt-topbar-dropdown > div[style*="height:1px"],
body.light-mode #dt-topbar-dropdown [style*="background:rgba(44,221,127"] {
  background: rgba(16,89,55,.1) !important;
}

/* Dropdown label texts */
body.light-mode #dt-topbar-dropdown [style*="font-size:9px"],
body.light-mode #dt-topbar-dropdown [style*="font-size:.68rem"],
body.light-mode #dt-topbar-dropdown [style*="color:rgba(44,221,127"] {
  color: rgba(16,89,55,.65) !important;
}
body.light-mode #dt-topbar-dropdown [style*="color:#ecf3f0"],
body.light-mode #dt-topbar-dropdown [style*="color:rgba(208,227"] {
  color: #1a3228 !important;
}

/* Context selectors inside dropdown */
body.light-mode #ctx-branch, body.light-mode #ctx-floor { color-scheme: light; }
body.light-mode #ctx-branch option, body.light-mode #ctx-floor option { background: #fff; color: #1a3228; }
body.light-mode #ctx-branch option:checked, body.light-mode #ctx-floor option:checked { background: #f4f0e7; color: #167d4d; }
body.light-mode #context-selector label  { color: rgba(16,89,55,.62); }
body.light-mode #context-selector select {
  background: rgba(17,95,58,.06);
  border-color: rgba(17,95,58,.22);
  color: #1a3228;
}
body.light-mode #context-selector select:focus,
body.light-mode #context-selector select:hover {
  border-color: rgba(17,95,58,.48);
  background-color: rgba(17,95,58,.10);
}
body.light-mode .ctx-divider { background: rgba(16,89,55,.15); }
body.light-mode .ctx-add-btn {
  background: rgba(0,160,130,.12);
  border-color: rgba(0,160,130,.35);
  color: #009e72;
}

/* ═══════════════════════════════════════════════════
   SIDEBAR — intentionally NOT themed.

   The left nav stays dark in day mode as well as night, so the
   navigation reads as one constant rail against the light content
   area. All of its styling therefore comes from sidebar.css and this
   file deliberately adds no `body.light-mode #dt-sidebar` overrides.
   Do not reintroduce them — that is what turned the rail cream.
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   COMMAND CENTER / DASHBOARD
   ═══════════════════════════════════════════════════ */
body.light-mode #dashboard-overlay {
  background-color: #ffffff;
}
body.light-mode .dash-topbar {
  background: rgba(248,245,239,.92);
  border-bottom: 1px solid rgba(14,80,49,.12);
}
body.light-mode .dash-topbar-title { color: #1a3228; }
body.light-mode .dash-close-btn {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.10);
  color: rgba(0,0,0,.42);
}
body.light-mode .dash-close-btn:hover { background: rgba(0,0,0,.10); color: #1a3228; }
body.light-mode .dash-field label {
  color: rgba(16,89,55,.62);
}
body.light-mode .dash-field select {
  background: rgba(17,95,58,.06);
  border-color: rgba(17,95,58,.24);
  color: #1a3228;
}
body.light-mode .dash-field select:focus { border-color: #167d4d; }
body.light-mode .dash-view-btn { /* keep gradient, it works on both themes */ }

/* Layout cards */
body.light-mode .layout-card {
  background: rgba(255,255,255,.92);
  border-color: rgba(16,89,55,.13);
  box-shadow: 0 4px 18px rgba(0,0,0,.07);
}
body.light-mode .layout-card:hover {
  border-color: #167d4d;
  box-shadow: 0 6px 22px rgba(19,110,68,.14), 0 0 0 1px #167d4d;
}
body.light-mode .lc-thumb {
  background: rgba(16,89,55,.07);
  border-bottom: 1px solid rgba(16,89,55,.1);
}
body.light-mode .lc-name   { color: #1a3228; }
body.light-mode .lc-meta   { color: rgba(33,63,51,.52); }
body.light-mode .lc-floor  { color: rgba(16,89,55,.68); }
body.light-mode .lc-tag    {
  background: rgba(17,95,58,.09);
  color: #147246;
  border-color: rgba(17,95,58,.2);
}
body.light-mode .lc-tag.zone {
  background: rgba(17,95,58,.09);
  color: #126840;
}
body.light-mode .lc-action-btn {
  background: rgba(17,95,58,.07);
  border-color: rgba(17,95,58,.18);
  color: #147246;
}
body.light-mode .lc-action-btn:hover { background: rgba(17,95,58,.16); }
body.light-mode .lc-action-btn.danger { color: #d83352; background: rgba(200,25,55,.06); border-color: rgba(200,25,55,.18); }

body.light-mode .dash-empty    { color: rgba(33,63,51,.38); }
body.light-mode .dash-empty-icon { opacity: .25; }
body.light-mode .dash-section-title { color: #1a3228; }
body.light-mode .dash-section-count { color: rgba(33,63,51,.5); }

/* Stats row */
body.light-mode .dash-stat {
  background: rgba(255,255,255,.85);
  border-color: rgba(16,89,55,.12);
}
body.light-mode .dash-stat-label { color: rgba(33,63,51,.55); }
body.light-mode .dash-stat-val   { color: #167d4d; }

/* ═══════════════════════════════════════════════════
   3D VIEWER TOOLBAR & ROOM PANEL
   ═══════════════════════════════════════════════════ */
body.light-mode .viewer-toolbar {
  background: rgba(248,245,239,.92) !important;
  border-bottom: 1px solid rgba(14,80,49,.13) !important;
}
body.light-mode .viewer-title { color: #167d4d !important; }
body.light-mode .viewer-controls button {
  background: rgba(17,95,58,.06) !important;
  border-color: rgba(17,95,58,.2) !important;
  color: #416856 !important;
}
body.light-mode .viewer-controls button:hover,
body.light-mode .viewer-controls button.active {
  background: rgba(17,95,58,.15) !important;
  color: #167d4d !important;
  border-color: rgba(17,95,58,.4) !important;
}

/* Right room list panel */
body.light-mode #room-list-panel {
  background: rgba(248,247,242,.98);
  border-left: 1px solid rgba(14,80,49,.11);
}
body.light-mode .rp-header {
  background: rgba(246,244,237,.9) !important;
  border-bottom: 1px solid rgba(14,80,49,.12) !important;
  color: #1a3228 !important;
}
body.light-mode .rp-search {
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(17,95,58,.18) !important;
  color: #1a3228 !important;
}
body.light-mode .rp-search::placeholder { color: rgba(33,63,51,.36) !important; }
body.light-mode .rp-add-btn {
  background: rgba(17,95,58,.09) !important;
  border-color: rgba(17,95,58,.22) !important;
  color: #147246 !important;
}
body.light-mode .rp-item {
  border-bottom: 1px solid rgba(14,80,49,.07);
  color: rgba(33,63,51,.78);
}
body.light-mode .rp-item:hover { background: rgba(17,95,58,.07); }
body.light-mode .rp-item.selected { background: rgba(17,95,58,.13); color: #136e43; }
body.light-mode .rp-room-name  { color: #1a3228; }
body.light-mode .rp-room-dims  { color: rgba(33,63,51,.52); }
body.light-mode .rp-badge      { background: rgba(17,95,58,.1); color: #147246; border-color: rgba(17,95,58,.2); }
body.light-mode .rp-badge.zone { background: rgba(17,95,58,.08); color: #126840; }

/* Room action buttons */
body.light-mode .rp-btn,
body.light-mode .room-btn {
  background: rgba(17,95,58,.08) !important;
  border-color: rgba(17,95,58,.2) !important;
  color: #147246 !important;
}
body.light-mode .rp-btn:hover,
body.light-mode .room-btn:hover { background: rgba(17,95,58,.17) !important; }
body.light-mode .rp-btn.danger  { color: #d83352 !important; background: rgba(200,25,55,.07) !important; border-color: rgba(200,25,55,.2) !important; }

/* Edit boundary panel */
body.light-mode .edit-panel {
  background: rgba(248,247,242,.98) !important;
  border-left: 1px solid rgba(14,80,49,.12) !important;
}
body.light-mode .edit-panel-title { color: #1a3228 !important; }
body.light-mode .edit-panel-sub   { color: rgba(33,63,51,.52) !important; }

/* ═══════════════════════════════════════════════════
   ALL SIDE PANELS (upload, floor-plans, assets,
   objtrain, ctrl-settings)
   ═══════════════════════════════════════════════════ */
/* Panels are the PAGE surface: white, so the shared grid reads through them. */
body.light-mode #plan-upload-panel,
body.light-mode #fp-module,
body.light-mode #assets-panel,
body.light-mode #assets-mgmt-overlay,
body.light-mode #objtrain-panel,
body.light-mode #ctrl-settings-panel {
  background-color: #ffffff !important;
}

/* File Drop: the form itself is the beige card, inset so the white page and
   its grid stay visible around it. */
body.light-mode #plan-upload-panel .pup-body {
  background: #ece7dd;
  border: 1px solid rgba(20,96,61,.14);
  border-radius: 12px;
  margin: 14px 16px;
}

/* ── Tower Plan ── */
body.light-mode #tower-plan-overlay {
  background-color: #ffffff;
}

/* Left panel */
body.light-mode #tpo-side {
  background: #f7f4ed;
  border-right: 1px solid rgba(14,80,49,.13);
  box-shadow: 2px 0 12px rgba(0,0,0,.06);
}
body.light-mode #tpo-head {
  background: linear-gradient(180deg, #f0ede4 0%, #f4f1e8 100%);
  border-bottom-color: rgba(14,80,49,.12);
}
body.light-mode #tpo-brand-icon {
  background: rgba(17,95,58,.10);
  border-color: rgba(17,95,58,.28);
}
body.light-mode #tpo-brand-title { color: #1a3228; }
body.light-mode #tpo-brand-sub   { color: rgba(16,89,55,.62); }
body.light-mode #tpo-exit-btn {
  border-color: rgba(17,95,58,.22);
  background: rgba(17,95,58,.07);
  color: rgba(16,89,55,.65);
}
body.light-mode #tpo-hint      { color: rgba(16,89,55,.52); }
body.light-mode #tpo-topbottom { color: #167d4d; }

/* Search */
body.light-mode #tpo-search-wrap {
  background: rgba(255,255,255,.80);
  border-color: rgba(17,95,58,.18);
}
body.light-mode #tpo-search            { color: #1a3228; }
body.light-mode #tpo-search::placeholder { color: rgba(16,89,55,.42); }

/* Floor cards */
body.light-mode .tpo-card {
  background: rgba(255,255,255,.75);
  border-color: rgba(17,95,58,.13);
}
body.light-mode .tpo-card:hover  { border-color: rgba(17,95,58,.28); box-shadow: 0 2px 12px rgba(17,95,58,.10); }
body.light-mode .tpo-card.tpo-card-active {
  background: rgba(17,95,58,.07);
  border-color: rgba(17,95,58,.32);
  box-shadow: 0 0 0 2px rgba(17,95,58,.10);
}
body.light-mode .tpo-card-badge {
  background: rgba(17,95,58,.10);
  border-color: rgba(17,95,58,.25);
  color: #167d4d;
}
body.light-mode .tpo-card-empty .tpo-card-badge { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.10); color: rgba(16,89,55,.40); }
body.light-mode .tpo-card-name { color: #1a3228; }
body.light-mode .tpo-card-empty .tpo-card-name { color: rgba(16,89,55,.40); }
body.light-mode .tpo-card-meta { color: rgba(16,89,55,.55); }
body.light-mode .tpo-card-chevron { color: rgba(16,89,55,.40); }
body.light-mode .tpo-card-active .tpo-card-chevron { color: #167d4d; }
body.light-mode .tpo-card-status {
  background: rgba(0,160,100,.12);
  color: #007a50;
  border-color: rgba(0,160,100,.25);
}
body.light-mode .tpo-card-status.empty { background: rgba(0,0,0,.04); color: rgba(16,89,55,.38); border-color: rgba(0,0,0,.08); }

/* Stats cells */
body.light-mode .tpo-stat-cell {
  background: rgba(17,95,58,.05);
  border-color: rgba(17,95,58,.10);
}
body.light-mode .tpo-stat-cell-label { color: rgba(16,89,55,.55); }
body.light-mode .tpo-stat-cell-val   { color: #1a3228; }
body.light-mode .tpo-cam-stat-active { background: rgba(17,95,58,.12); border-color: rgba(17,95,58,.28); }
body.light-mode .tpo-cam-stat-active .tpo-stat-cell-val   { color: #167d4d; }
body.light-mode .tpo-cam-stat-active .tpo-stat-cell-label { color: rgba(16,89,55,.65); }

/* Room list */
body.light-mode .tpo-room-full {
  background: rgba(255,255,255,.70);
  border-color: rgba(17,95,58,.12);
}
body.light-mode .tpo-room-row:hover { background: rgba(17,95,58,.07); }
body.light-mode .tpo-room-row { border-bottom-color: rgba(17,95,58,.07); }
body.light-mode .tpo-room-name  { color: #1a3228; }
body.light-mode .tpo-room-icon  { color: #126840; }
body.light-mode .tpo-room-badge { background: rgba(0,0,0,.04); border-color: rgba(17,95,58,.14); color: rgba(16,89,55,.55); }
body.light-mode .tpo-cam-badge-active { background: rgba(17,95,58,.12); border-color: rgba(17,95,58,.28); color: #167d4d; }
body.light-mode .tpo-view-details { color: #167d4d; }

/* Footer */
body.light-mode #tpo-foot {
  background: rgba(17,95,58,.06);
  border-top-color: rgba(14,80,49,.12);
}
body.light-mode .tpo-foot-num { color: #1a3228; }
body.light-mode .tpo-foot-lbl { color: rgba(16,89,55,.55); }
body.light-mode .tpo-foot-sep { background: rgba(17,95,58,.14); }

/* Scrollbar */
body.light-mode #tpo-list::-webkit-scrollbar-thumb       { background: rgba(17,95,58,.22); }
body.light-mode .tpo-room-full::-webkit-scrollbar-thumb  { background: rgba(17,95,58,.22); }

body.light-mode .tpo-header,
body.light-mode .tpo-toolbar {
  background: rgba(246,243,235,.9) !important;
  border-bottom: 1px solid rgba(14,80,49,.12) !important;
  color: #1a3228 !important;
}
body.light-mode .tpo-floor-label { color: rgba(33,63,51,.62) !important; }
body.light-mode .tpo-floor-row { border-bottom: 1px solid rgba(14,80,49,.08) !important; }

/* ── CamLog Overlay ── */
body.light-mode #camlog-overlay {
  background-color: #ffffff;
}
body.light-mode .cl-header,
body.light-mode .camlog-header {
  background: rgba(246,243,235,.92) !important;
  border-bottom: 1px solid rgba(14,80,49,.12) !important;
  color: #1a3228 !important;
}
body.light-mode .cl-title   { color: #1a3228 !important; }
body.light-mode .cl-crumb   { color: rgba(33,63,51,.6) !important; }
body.light-mode .cl-room-card {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(14,80,49,.13) !important;
  color: #1a3228 !important;
}
body.light-mode .cl-room-card:hover { border-color: #167d4d !important; }
body.light-mode .cl-cam-thumb {
  background: rgba(17,95,58,.06) !important;
  border-color: rgba(14,80,49,.12) !important;
}
body.light-mode .cl-detection-row {
  border-bottom: 1px solid rgba(14,80,49,.07) !important;
  color: rgba(33,63,51,.75) !important;
}
body.light-mode #camlog-snapshot-modal .snap-box {
  background: #ffffff !important;
  border-color: rgba(14,80,49,.14) !important;
}

/* ── ObjTrain Panel ── */
body.light-mode .ot-header {
  background: rgba(246,243,235,.9) !important;
  border-bottom: 1px solid rgba(14,80,49,.12) !important;
  color: #1a3228 !important;
}
body.light-mode .ot-section-title { color: #1a3228 !important; }
body.light-mode .ot-terminal {
  background: #faf9f5 !important;
  border-color: rgba(14,80,49,.15) !important;
  color: #234437 !important;
}
body.light-mode .ot-job-row {
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(14,80,49,.12) !important;
  color: #1a3228 !important;
}
body.light-mode .ot-job-name { color: #1a3228 !important; }
body.light-mode .ot-job-meta { color: rgba(33,63,51,.52) !important; }

/* ── Assets Panel ── */
body.light-mode .as-tab { color: rgba(33,63,51,.62) !important; }
body.light-mode .as-tab.active { color: #167d4d !important; border-bottom-color: #167d4d !important; }
body.light-mode .as-search {
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(17,95,58,.18) !important;
  color: #1a3228 !important;
}
body.light-mode .as-card {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(14,80,49,.12) !important;
}
body.light-mode .as-card:hover { border-color: #167d4d !important; }
body.light-mode .as-card-name { color: #1a3228 !important; }

/* ── Control Settings panel ── */
body.light-mode #ctrl-settings-panel {
  background-color: #ffffff !important;
}
/* Header bar */
body.light-mode #ctrl-settings-panel > div:first-child {
  border-bottom-color: rgba(14,80,49,.12) !important;
}
/* Gear icon */
body.light-mode #ctrl-settings-panel > div:first-child > div:first-child > span:first-child {
  color: rgba(17,95,58,.75) !important;
}
/* "Control Settings" title */
body.light-mode #ctrl-settings-panel > div:first-child > div:first-child > span:last-child {
  color: #1a3228 !important;
}
/* Scene card */
body.light-mode #ctrl-settings-panel [style*="background:rgba(44,221,127,0.04)"] {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(17,95,58,.15) !important;
}
/* "SCENE" section label */
body.light-mode #ctrl-settings-panel [style*="color:rgba(44,221,127,.45)"] {
  color: rgba(16,89,55,.62) !important;
}
/* Row labels: WALL HEIGHT / OFFICE PEOPLE / WALL COLOR */
body.light-mode #ctrl-settings-panel [style*="color:#bad6c8"] {
  color: #1a3228 !important;
}
/* Number inputs */
body.light-mode #cs-wall-h-num,
body.light-mode #cs-person-count-num {
  background: rgba(17,95,58,.06) !important;
  border-color: rgba(17,95,58,.22) !important;
  color: #1a3228 !important;
}
/* Unit spans: "m", "ppl" */
body.light-mode #ctrl-settings-panel [style*="color:rgba(44,221,127,.5)"] {
  color: rgba(16,89,55,.55) !important;
}
/* Range min/max hints */
body.light-mode #ctrl-settings-panel [style*="color:rgba(44,221,127,.3)"] {
  color: rgba(16,89,55,.40) !important;
}
/* Section divider */
body.light-mode #ctrl-settings-panel [style*="border-top:1px solid rgba(44,221,127,0.08)"] {
  border-top-color: rgba(14,80,49,.10) !important;
}
/* Description text */
body.light-mode #ctrl-settings-panel [style*="color:rgba(44,221,127,.38)"] {
  color: rgba(16,89,55,.52) !important;
}
/* Sliders */
body.light-mode #cs-wall-h-slider,
body.light-mode #cs-person-count-slider {
  accent-color: #147246 !important;
}

/* ── Floor Plans panel ── */
body.light-mode .fp-header {
  background: rgba(246,243,235,.9) !important;
  border-bottom: 1px solid rgba(14,80,49,.12) !important;
}
body.light-mode .fp-header-icon {
  background: linear-gradient(135deg,rgba(17,98,60,.18),rgba(29,165,138,.18)) !important;
  border-color: rgba(17,95,58,.4) !important;
  box-shadow: 0 0 12px rgba(22,122,75,.15) !important;
}
body.light-mode .fp-header h2 { color: #1a3228 !important; }
body.light-mode .fp-header h2 span { color: rgba(17,98,60,.75) !important; }
body.light-mode .fp-card {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(14,80,49,.12) !important;
}
body.light-mode .fp-card:hover { border-color: #167d4d !important; }
body.light-mode .fp-card-name { color: #1a3228 !important; }
body.light-mode .fp-card-meta { color: rgba(33,63,51,.52) !important; }

/* Branch blocks */
body.light-mode .fp-branch-block {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(14,80,49,.14) !important;
}
body.light-mode .fp-branch-block:hover { border-color: rgba(17,95,58,.28) !important; }
body.light-mode .fp-branch-title {
  background: rgba(17,95,58,.05) !important;
  border-bottom-color: rgba(14,80,49,.10) !important;
}
body.light-mode .fp-branch-title:hover { background: rgba(17,95,58,.11) !important; }
body.light-mode .fp-branch-block.collapsed .fp-branch-title { border-bottom-color: transparent !important; }
body.light-mode .fp-branch-name  { color: #1a3228 !important; }
body.light-mode .fp-branch-code  {
  color: #167d4d !important;
  background: rgba(17,95,58,.10) !important;
  border-color: rgba(17,95,58,.22) !important;
}
body.light-mode .fp-branch-count  { color: rgba(16,89,55,.55) !important; }
body.light-mode .fp-branch-toggle { color: rgba(16,89,55,.45) !important; }

/* Stats bar */
body.light-mode .fp-stat {
  background: rgba(17,95,58,.07) !important;
  border-color: rgba(17,95,58,.16) !important;
}
body.light-mode .fp-stat-num   { color: #167d4d !important; }
body.light-mode .fp-stat-label { color: rgba(16,89,55,.62) !important; }

/* Table */
body.light-mode .fp-table thead tr {
  background: rgba(17,95,58,.05) !important;
  border-bottom-color: rgba(14,80,49,.12) !important;
}
body.light-mode .fp-table th { color: rgba(16,89,55,.60) !important; }
body.light-mode .fp-table tbody tr { border-bottom-color: rgba(14,80,49,.07) !important; }
body.light-mode .fp-table tbody tr:hover { background: rgba(17,95,58,.05) !important; }

/* Floor rows */
body.light-mode .fp-floor-num {
  background: rgba(17,95,58,.10) !important;
  border-color: rgba(17,95,58,.25) !important;
  color: #167d4d !important;
}
body.light-mode .fp-floor-name  { color: #1a3228 !important; }
body.light-mode .fp-floor-desc  { color: rgba(16,89,55,.55) !important; }
body.light-mode .fp-floor-desc--warn { color: rgba(180,20,40,.55) !important; }
body.light-mode .fp-file-name   { color: #1a3228 !important; }
body.light-mode .fp-file-label  { color: rgba(16,89,55,.52) !important; }
body.light-mode .fp-branch-body > .fp-branch-body-inner::-webkit-scrollbar-thumb { background: rgba(19,110,68,.22); }
body.light-mode .fp-branch-body > .fp-branch-body-inner::-webkit-scrollbar-thumb:hover { background: rgba(19,110,68,.40); }

/* Empty state */
body.light-mode .fp-empty-floors { color: rgba(16,89,55,.40) !important; }
body.light-mode .fp-state        { color: rgba(16,89,55,.40) !important; }

/* Scrollbar */
body.light-mode .fp-body::-webkit-scrollbar-thumb { background: rgba(17,95,58,.22); }

/* ── Plan Upload panel ── */
body.light-mode #plan-upload-panel .pup-header { border-bottom-color: rgba(14,80,49,.12) !important; }
body.light-mode #plan-upload-panel .pup-title         { color: #1a3228 !important; }
body.light-mode #plan-upload-panel .pup-section-title { color: rgba(17,98,60,.72) !important; }
body.light-mode #plan-upload-panel .pup-field-label   { color: rgba(16,89,55,.55) !important; }
body.light-mode #plan-upload-panel .pup-divider       { background: rgba(17,95,58,.12) !important; }

body.light-mode #plan-upload-panel .pup-tab {
  color: rgba(16,89,55,.55) !important;
  border-color: rgba(17,95,58,.2) !important;
  background: transparent !important;
}
body.light-mode #plan-upload-panel .pup-tab.active {
  background: rgba(17,95,58,.12) !important;
  border-color: rgba(17,95,58,.4) !important;
  color: #167d4d !important;
}
body.light-mode #plan-upload-panel #drop-zone-clone {
  background: rgba(17,95,58,.04) !important;
  border-color: rgba(17,95,58,.25) !important;
}
body.light-mode #plan-upload-panel #drop-zone-clone:hover,
body.light-mode #plan-upload-panel #drop-zone-clone.drag-over {
  background: rgba(17,95,58,.08) !important;
  border-color: #167d4d !important;
}
body.light-mode #plan-upload-panel #drop-zone-clone .drop-title { color: #1a3228 !important; }
body.light-mode #plan-upload-panel #drop-zone-clone .drop-sub   { color: rgba(33,63,51,.55) !important; }
body.light-mode #plan-upload-panel .pup-select {
  background: rgba(17,95,58,.05) !important;
  border-color: rgba(17,95,58,.2) !important;
  color: #1a3228 !important;
}
body.light-mode #plan-upload-panel .pup-select option { background: #fff !important; color: #1a3228 !important; }
body.light-mode #plan-upload-panel .pup-input {
  background: rgba(17,95,58,.05) !important;
  border-color: rgba(17,95,58,.2) !important;
  color: #1a3228 !important;
}
body.light-mode #plan-upload-panel .pup-input::placeholder { color: rgba(33,63,51,.35) !important; }
body.light-mode #plan-upload-panel #pup-file-name { color: rgba(17,98,60,.72) !important; }

/* ═══════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════ */
body.light-mode .modal-overlay { background: rgba(0,0,0,.35); }
body.light-mode .modal-box,
body.light-mode .modal-card,
body.light-mode .modal-content,
body.light-mode #floor-modal > div,
body.light-mode .bf-modal,
body.light-mode .confirm-dialog {
  background: #ffffff !important;
  border-color: rgba(14,80,49,.14) !important;
  color: #1a3228 !important;
  box-shadow: 0 16px 60px rgba(0,0,0,.11) !important;
}
body.light-mode .modal-title     { color: #1a3228 !important; }
body.light-mode .modal-sub       { color: rgba(33,63,51,.52) !important; }
body.light-mode .modal-divider   { background: rgba(14,80,49,.1) !important; }
body.light-mode .modal-close {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.09) !important;
  color: rgba(0,0,0,.38) !important;
}
body.light-mode .modal-close:hover { background: rgba(0,0,0,.10) !important; color: #1a3228 !important; }

/* ═══════════════════════════════════════════════════
   GENERIC FORM ELEMENTS
   ═══════════════════════════════════════════════════ */
body.light-mode input[type="text"],
body.light-mode input[type="number"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode input[type="search"],
body.light-mode input[type="range"],
body.light-mode textarea {
  background: #ffffff !important;
  border-color: rgba(17,95,58,.2) !important;
  color: #1a3228 !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder { color: rgba(33,63,51,.36) !important; }
body.light-mode select {
  color-scheme: light;
  background-color: #ffffff !important;
  border-color: rgba(17,95,58,.2) !important;
  color: #1a3228 !important;
}
body.light-mode label { color: rgba(33,63,51,.78); }

/* ═══════════════════════════════════════════════════
   UTILITY / SHARED COMPONENTS
   ═══════════════════════════════════════════════════ */
body.light-mode .divider,
body.light-mode hr {
  background: rgba(16,89,55,.11) !important;
  border-color: rgba(16,89,55,.11) !important;
}
body.light-mode .badge {
  background: rgba(17,95,58,.1);
  color: #147246;
  border-color: rgba(17,95,58,.2);
}
body.light-mode .badge-warn  { background: rgba(200,25,55,.1);  color: #d83352; }
body.light-mode .badge-ok    { background: rgba(0,155,100,.1); color: #009e72; }
body.light-mode .badge-amber { background: rgba(180,110,0,.1);  color: #bf7a00; }

body.light-mode .tooltip-box {
  background: #ffffff;
  border-color: rgba(14,80,49,.15);
  color: #1a3228;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}

/* Coming-soon overlay */
body.light-mode .coming-soon-overlay {
  background: rgba(241,237,229,.92) !important;
  border-color: rgba(16,89,55,.12) !important;
}
body.light-mode .coming-soon-title { color: #1a3228 !important; }
body.light-mode .coming-soon-sub   { color: rgba(33,63,51,.5) !important; }

/* ═══════════════════════════════════════════════════
   ROOM PANEL (right side of 3D viewer)
   ═══════════════════════════════════════════════════ */
body.light-mode #room-panel {
  background: rgba(248,245,239,.98) !important;
  border-left: 1px solid rgba(14,80,49,.12) !important;
}
body.light-mode #room-panel.rp-hidden { border-left: none !important; }
body.light-mode #rp-tab {
  background: rgba(17,95,58,.07) !important;
  border-color: rgba(17,95,58,.20) !important;
  color: rgba(17,95,58,.70) !important;
}
body.light-mode #rp-tab:hover { background: rgba(17,95,58,.16) !important; color: #167d4d !important; }
body.light-mode .viewer-controls button#btn-stage-toggle {
  background: rgba(17,95,58,.08) !important;
  border-color: rgba(17,95,58,.25) !important;
  color: rgba(17,95,58,.80) !important;
}
body.light-mode #room-panel-header {
  background: rgba(242,239,231,.88) !important;
  border-bottom: 1px solid rgba(14,80,49,.13) !important;
  color: #1a3228 !important;
}
body.light-mode #room-panel-header span { color: #1a3228 !important; }
body.light-mode #room-panel-header .count { color: rgba(33,63,51,.52) !important; }
body.light-mode #room-search {
  background: #ffffff !important;
  border-color: rgba(17,95,58,.2) !important;
  color: #1a3228 !important;
}
body.light-mode #room-search::placeholder { color: rgba(33,63,51,.36) !important; }
body.light-mode .room-item {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(17,95,58,.1) !important;
}
body.light-mode .room-item:hover {
  background: rgba(17,95,58,.09) !important;
  border-color: rgba(17,95,58,.28) !important;
  color: #1a3228 !important;
}
body.light-mode .room-item.active {
  background: rgba(17,95,58,.14) !important;
  border-color: rgba(17,95,58,.42) !important;
  box-shadow: inset 3px 0 0 #167d4d !important;
}
body.light-mode .room-item .room-name { color: #1a3228 !important; }
body.light-mode .room-item.active .room-name { color: #136e43 !important; }
body.light-mode .room-item .room-kind {
  background: rgba(17,95,58,.1) !important;
  color: #167d4d !important;
}
body.light-mode .room-item .room-photo-btn {
  background: rgba(0,0,0,.04) !important;
  color: rgba(33,63,51,.5) !important;
}
body.light-mode .room-item .room-photo-btn:hover { background: rgba(0,0,0,.10) !important; }
body.light-mode .room-edit-btn {
  background: rgba(17,95,58,.12) !important;
  color: #1e8a58 !important;
}
body.light-mode .room-edit-btn:hover { background: rgba(17,95,58,.28) !important; }
body.light-mode .room-del-btn {
  background: rgba(180,20,30,.1) !important;
  color: #b83040 !important;
}
body.light-mode .room-del-btn:hover { background: rgba(180,20,30,.28) !important; }

/* Properties panel (room info card) */
body.light-mode #props-panel {
  background: rgba(246,244,237,.98) !important;
  border-top: 1px solid rgba(14,80,49,.12) !important;
}
body.light-mode #props-header {
  background: rgba(240,236,227,.88) !important;
  border-bottom: 1px solid rgba(14,80,49,.12) !important;
  color: #1a3228 !important;
}
body.light-mode #props-close { color: rgba(33,63,51,.45) !important; }
body.light-mode #props-close:hover { color: #1a3228 !important; }
body.light-mode #props-title { color: #167d4d !important; }
body.light-mode .prop-section { color: #167d4d !important; }
body.light-mode #props-panel .prop-section:first-child { color: #009e72 !important; }
body.light-mode .prop-key { color: rgba(33,63,51,.52) !important; }
body.light-mode .prop-val { color: #1a3228 !important; }
body.light-mode #props-actions { border-top: 1px solid rgba(14,80,49,.1) !important; }
body.light-mode #btn-props-edit {
  background: rgba(17,95,58,.09) !important;
  border-color: rgba(17,95,58,.28) !important;
  color: #167d4d !important;
}
body.light-mode #btn-props-rename {
  background: rgba(32,176,147,.09) !important;
  border-color: rgba(32,176,147,.28) !important;
  color: #20b093 !important;
}
body.light-mode #btn-props-delete,
body.light-mode #btn-props-delete2 {
  background: rgba(200,25,55,.08) !important;
  border-color: rgba(200,25,55,.28) !important;
  color: #d83352 !important;
}
body.light-mode #props-rename-row input {
  background: #ffffff !important;
  border-color: rgba(17,95,58,.2) !important;
  color: #1a3228 !important;
}

/* Edit mode floating toolbar */
body.light-mode #edit-mode-panel {
  background: rgba(246,244,237,.97) !important;
  border-color: rgba(17,95,58,.25) !important;
}
body.light-mode .edit-panel-title { color: #167d4d !important; }
body.light-mode #edit-mode-panel button {
  background: rgba(17,95,58,.07) !important;
  border-color: rgba(17,95,58,.2) !important;
  color: #416856 !important;
}
body.light-mode #edit-mode-panel button:hover {
  background: rgba(17,95,58,.18) !important;
  border-color: #167d4d !important;
  color: #167d4d !important;
}

/* Room edit bar (vertex handles toolbar) */
body.light-mode #room-edit-bar {
  background: rgba(246,243,235,.97) !important;
  border-color: rgba(17,95,58,.3) !important;
}
body.light-mode #room-edit-bar span  { color: rgba(33,63,51,.72) !important; }
body.light-mode #room-edit-bar strong { color: #1a3228 !important; }

/* Viewer tooltip */
body.light-mode #viewer-tooltip {
  background: rgba(249,248,244,.97) !important;
  border-color: rgba(17,95,58,.2) !important;
  color: #1a3228 !important;
}

/* Walk mode header bar — light in light mode */
body.light-mode #walk-header-bar {
  background: rgba(246,243,235,.97) !important;
  border-bottom: 1px solid rgba(14,80,49,.13) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
}
body.light-mode #walk-header-bar > div > div:last-child > div:first-child {
  color: #1a3228 !important;
}
body.light-mode #walk-bar-hint { color: rgba(16,89,55,.65) !important; }
body.light-mode #walk-header-bar > div > div:first-child {
  background: linear-gradient(135deg,rgba(17,98,60,.18),rgba(29,165,138,.18)) !important;
  border-color: rgba(17,95,58,.4) !important;
}

/* Walk mode immersive overlay — keep dark for immersion */
body.light-mode #walk-overlay,
body.light-mode .walk-hud { /* intentionally left dark */ }

/* ═══════════════════════════════════════════════════
   OBJTRAIN PANEL — full override (all hardcoded darks)
   ═══════════════════════════════════════════════════ */
body.light-mode #objtrain-panel {
  background-color: #ffffff !important;
}
body.light-mode #objtrain-panel .ot-header {
  background: rgba(246,243,235,.95) !important;
  border-bottom: 1px solid rgba(14,80,49,.13) !important;
}
body.light-mode #objtrain-panel .ot-title {
  color: #1a3228 !important;
}
body.light-mode #objtrain-panel .ot-body {
  background: #fbfaf8;
}

/* Cards */
body.light-mode .ot-card {
  background: #ffffff !important;
  border: 1px solid rgba(14,80,49,.16) !important;
}
body.light-mode .ot-card-title {
  color: rgba(33,63,51,.55) !important;
}

/* Form fields */
body.light-mode .ot-field label {
  color: rgba(33,63,51,.68) !important;
}
body.light-mode .ot-field input[type=text],
body.light-mode .ot-field input[type=file] {
  background: #ffffff !important;
  border: 1px solid rgba(17,95,58,.22) !important;
  color: #1a3228 !important;
}
body.light-mode .ot-field input[type=text]:focus {
  border-color: #167d4d !important;
}

/* Tabs */
body.light-mode .ot-tabs {
  border-bottom: 1px solid rgba(14,80,49,.14) !important;
}
body.light-mode .ot-tab {
  background: rgba(17,95,58,.06) !important;
  border: 1px solid rgba(17,95,58,.18) !important;
  color: rgba(33,63,51,.58) !important;
}
body.light-mode .ot-tab:hover {
  border-color: rgba(17,95,58,.4) !important;
  color: #1a3228 !important;
}
body.light-mode .ot-tab-active {
  background: rgba(17,95,58,.14) !important;
  border-color: rgba(24,135,83,.5) !important;
  color: #126840 !important;
}

/* Annotation dots */
body.light-mode .ot-dot {
  background: rgba(17,95,58,.1) !important;
  border: 1px solid rgba(17,95,58,.25) !important;
}
body.light-mode .ot-dot-active { background: #20b670 !important; border-color: #9cbda7 !important; }
body.light-mode .ot-dot-done   { background: #16a34a !important; border-color: #2a8a50 !important; }
body.light-mode .ot-dot-skip   { background: #d97706 !important; border-color: #a06010 !important; }

/* Annotation text */
body.light-mode .ot-ann-progress-text { color: #1a3228 !important; }
body.light-mode .ot-ann-filename      { color: rgba(33,63,51,.5) !important; }
body.light-mode .ot-ann-hint {
  background: rgba(17,95,58,.06) !important;
  border: 1px solid rgba(17,95,58,.18) !important;
  color: #126840 !important;
}

/* Review grid thumbnails */
body.light-mode .ot-thumb-card {
  background: #ffffff !important;
  border: 1px solid rgba(14,80,49,.15) !important;
}
body.light-mode .ot-thumb-unannotated { border-color: rgba(200,80,20,.35) !important; }
body.light-mode .ot-thumb-canvas-wrap { background: rgba(0,0,0,.04) !important; }
body.light-mode .ot-thumb-name        { color: rgba(33,63,51,.5) !important; }
body.light-mode .ot-thumb-badge-done  { background: rgba(16,100,40,.1) !important; color: #16a34a !important; }
body.light-mode .ot-thumb-badge-skip  { background: rgba(180,100,0,.1) !important; color: #d97706 !important; }
body.light-mode .ot-thumb-btn-edit {
  background: rgba(17,95,58,.1) !important;
  color: #147246 !important;
}
body.light-mode .ot-thumb-btn-edit:hover { background: rgba(17,95,58,.22) !important; }
body.light-mode .ot-thumb-btn-del {
  background: rgba(200,20,20,.08) !important;
  color: #cc2020 !important;
}
body.light-mode .ot-thumb-btn-del:hover { background: rgba(200,20,20,.2) !important; }

/* Secondary buttons */
body.light-mode .ot-ann-btn-sec {
  background: rgba(17,95,58,.08) !important;
  border: 1px solid rgba(17,95,58,.22) !important;
  color: #147246 !important;
}
body.light-mode .ot-ann-btn-sec:hover:not(:disabled) {
  background: rgba(17,95,58,.18) !important;
  color: #1a3228 !important;
}

/* Progress bar track */
body.light-mode .ot-progress-wrap {
  background: rgba(17,95,58,.12) !important;
}
body.light-mode .ot-progress-label { color: #147246 !important; }

/* Terminal */
body.light-mode .ot-terminal-wrap {
  background: #f9f8f4 !important;
  border: 1px solid rgba(14,80,49,.16) !important;
}
body.light-mode .ot-terminal-bar {
  background: rgba(14,80,49,.08) !important;
  border-bottom: 1px solid rgba(14,80,49,.14) !important;
}
body.light-mode .ot-terminal-title  { color: rgba(33,63,51,.5) !important; }
body.light-mode .ot-terminal-clear  { color: rgba(33,63,51,.4) !important; }
body.light-mode .ot-terminal-clear:hover { color: rgba(33,63,51,.7) !important; }
body.light-mode #ot-terminal {
  background: #f9f8f4 !important;
  color: #1e4533 !important;
}
body.light-mode #ot-terminal .tl-info    { color: #147246 !important; }
body.light-mode #ot-terminal .tl-warning { color: #c07000 !important; }
body.light-mode #ot-terminal .tl-error   { color: #cc2020 !important; }
body.light-mode #ot-terminal .tl-debug   { color: rgba(33,63,51,.38) !important; }
body.light-mode #ot-terminal .tl-time    { color: rgba(33,63,51,.32) !important; }
body.light-mode #ot-terminal .tl-stage   { color: #20b093 !important; }
body.light-mode #ot-log {
  background: #f9f8f4 !important;
  border: 1px solid rgba(14,80,49,.16) !important;
  color: rgba(33,63,51,.65) !important;
}

/* Job rows */
body.light-mode .ot-job-row {
  background: #ffffff !important;
  border: 1px solid rgba(14,80,49,.15) !important;
}
body.light-mode .ot-job-complete { border-color: rgba(16,100,40,.3) !important; }
body.light-mode .ot-job-failed   { border-color: rgba(180,20,20,.3) !important; }
body.light-mode .ot-job-name { color: #1a3228 !important; }
body.light-mode .ot-job-date { color: rgba(33,63,51,.5) !important; }
body.light-mode .ot-job-meta { color: rgba(33,63,51,.5) !important; }
body.light-mode .ot-job-del  {
  border-color: rgba(180,20,20,.3) !important;
  color: #cc2020 !important;
}
body.light-mode .ot-job-del:hover   { background: rgba(180,20,20,.08) !important; }
body.light-mode .ot-job-retry {
  border-color: rgba(17,95,58,.3) !important;
  color: #147246 !important;
}
body.light-mode .ot-job-retry:hover { background: rgba(17,95,58,.08) !important; }

/* Badges */
body.light-mode .ot-ready-badge  {
  background: rgba(16,100,40,.1) !important;
  color: #16a34a !important;
  border-color: rgba(16,100,40,.3) !important;
}
body.light-mode .ot-failed-badge {
  background: rgba(180,20,20,.08) !important;
  color: #cc2020 !important;
  border-color: rgba(180,20,20,.25) !important;
}
body.light-mode .ot-active-badge {
  background: rgba(17,95,58,.1) !important;
  color: #126840 !important;
  border-color: rgba(17,95,58,.28) !important;
}

/* Accuracy card */
body.light-mode .ot-job-accuracy {
  background: rgba(16,100,40,.07) !important;
  border: 1px solid rgba(16,100,40,.22) !important;
}
body.light-mode .ot-accuracy-label { color: #16a34a !important; }
body.light-mode .ot-accuracy-val   { color: #16a34a !important; }

/* Review header */
body.light-mode .ot-review-header .ot-ann-progress-text { color: #1a3228 !important; }

/* ── Fullscreen annotation modal ── */
body.light-mode #ot-fullscreen-modal {
  background: #faf9f5 !important;
}
body.light-mode .otfs-header {
  background: rgba(244,240,231,.95) !important;
  border-bottom: 1px solid rgba(14,80,49,.14) !important;
}
body.light-mode .otfs-obj-label { color: rgba(33,63,51,.55) !important; }
body.light-mode .otfs-obj-name-display {
  background: #ffffff !important;
  border: 1px solid rgba(17,95,58,.2) !important;
  color: #1a3228 !important;
}
body.light-mode .otfs-counter   { color: rgba(33,63,51,.55) !important; }
body.light-mode .otfs-shortcuts { color: rgba(33,63,51,.38) !important; }
body.light-mode .otfs-close-btn {
  border-color: rgba(180,20,20,.35) !important;
  color: #cc2020 !important;
}
body.light-mode .otfs-close-btn:hover { background: rgba(180,20,20,.08) !important; }
body.light-mode .otfs-sidebar-left,
body.light-mode .otfs-sidebar-right {
  background: rgba(244,240,231,.92) !important;
  border-color: rgba(14,80,49,.14) !important;
}
body.light-mode .otfs-sidebar-title { color: rgba(33,63,51,.45) !important; }
body.light-mode .otfs-thumb-item    { color: rgba(33,63,51,.55) !important; }
body.light-mode .otfs-thumb-item:hover  { background: rgba(17,95,58,.08) !important; }
body.light-mode .otfs-thumb-item.active {
  background: rgba(17,95,58,.14) !important;
  border-color: rgba(24,135,83,.45) !important;
  color: #126840 !important;
}
body.light-mode .otfs-thumb-item.done { color: #16a34a !important; }
body.light-mode .otfs-thumb-dot { background: rgba(17,95,58,.15) !important; }
body.light-mode .otfs-thumb-item.done   .otfs-thumb-dot { background: #16a34a !important; }
body.light-mode .otfs-thumb-item.active .otfs-thumb-dot { background: #20b670 !important; }
body.light-mode .otfs-center { background: #f8f5ef !important; }
body.light-mode .otfs-canvas-wrap { border: 2px solid rgba(17,95,58,.3) !important; }
body.light-mode .otfs-hint {
  background: rgba(244,240,231,.92) !important;
  border: 1px solid rgba(17,95,58,.2) !important;
  color: #126840 !important;
}
body.light-mode .otfs-section-label { color: rgba(33,63,51,.45) !important; }
body.light-mode .otfs-class-input {
  background: #ffffff !important;
  border: 1px solid rgba(17,95,58,.22) !important;
  color: #1a3228 !important;
}
body.light-mode .otfs-class-input:focus { border-color: #167d4d !important; }
body.light-mode .otfs-class-hint { color: rgba(33,63,51,.4) !important; }
body.light-mode .otfs-coords {
  background: rgba(16,100,40,.06) !important;
  border: 1px solid rgba(16,100,40,.2) !important;
  color: rgba(16,100,40,.85) !important;
}
body.light-mode .otfs-clear-btn {
  background: rgba(180,20,20,.06) !important;
  border: 1px solid rgba(180,20,20,.28) !important;
  color: #cc2020 !important;
}
body.light-mode .otfs-clear-btn:hover { background: rgba(180,20,20,.14) !important; }
body.light-mode .otfs-save-status { color: #16a34a !important; }
body.light-mode .otfs-footer {
  background: rgba(244,240,231,.92) !important;
  border-top: 1px solid rgba(14,80,49,.14) !important;
}
body.light-mode .otfs-btn-sec {
  background: rgba(17,95,58,.08) !important;
  border-color: rgba(17,95,58,.22) !important;
  color: #147246 !important;
}
body.light-mode .otfs-btn-sec:hover { background: rgba(17,95,58,.16) !important; }
body.light-mode .otfs-btn-pri {
  background: rgba(17,95,58,.14) !important;
  border-color: rgba(24,135,83,.45) !important;
  color: #126840 !important;
}
body.light-mode .otfs-btn-pri:hover { background: rgba(17,95,58,.22) !important; }
body.light-mode .otfs-btn-green {
  background: rgba(16,100,40,.1) !important;
  border-color: rgba(16,100,40,.35) !important;
  color: #16a34a !important;
}
body.light-mode .otfs-btn-green:hover { background: rgba(16,100,40,.2) !important; }

/* ═══════════════════════════════════════════════════
   COMING SOON OVERLAY (Room Manager / Build Mode)
   ═══════════════════════════════════════════════════ */
body.light-mode #coming-soon-overlay {
  background: #faf9f5 !important;
}
/* Icon circle */
body.light-mode #coming-soon-overlay > div:first-child {
  background: linear-gradient(135deg, rgba(22,122,75,.1), rgba(32,176,147,.1)) !important;
  border: 1px solid rgba(17,95,58,.25) !important;
}
/* Feature name heading */
body.light-mode #cs-name { color: #1a3228 !important; }
/* "Not yet available" description */
body.light-mode #cs-desc { color: rgba(16,89,55,.65) !important; }

/* ═══════════════════════════════════════════════════
   CONTROL SETTINGS PANEL
   ═══════════════════════════════════════════════════ */
body.light-mode #ctrl-settings-panel {
  background-color: #ffffff !important;
}
/* Header bar */
body.light-mode #ctrl-settings-panel > div:first-child {
  background: rgba(244,241,233,.92) !important;
  border-bottom: 1px solid rgba(16,89,55,.13) !important;
}
body.light-mode #ctrl-settings-panel > div:first-child span {
  color: #1a3228 !important;
}
body.light-mode #ctrl-settings-panel > div:first-child > div > span:first-child {
  color: #167d4d !important; /* gear icon */
}

/* Scene card */
body.light-mode #ctrl-settings-panel [style*="rgba(44,221,127,0.04)"] {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(16,89,55,.13) !important;
}
/* "SCENE" section label */
body.light-mode #ctrl-settings-panel [style*="rgba(44,221,127,.45)"] {
  color: rgba(16,89,55,.52) !important;
}
/* Row labels (WALL HEIGHT, OFFICE PEOPLE, WALL COLOR) */
body.light-mode #ctrl-settings-panel label {
  color: #1a3228 !important;
}
/* Number inputs */
body.light-mode #cs-wall-h-num,
body.light-mode #cs-person-count-num {
  background: #ffffff !important;
  border: 1px solid rgba(17,95,58,.25) !important;
  color: #1a3228 !important;
}
/* Unit spans: "m", "ppl" */
body.light-mode #ctrl-settings-panel [style*="color:rgba(44,221,127,.5)"] {
  color: rgba(33,63,51,.55) !important;
}
/* Range hint spans: "1.0 m", "20.0 m", "0", "50 people" */
body.light-mode #ctrl-settings-panel [style*="color:rgba(44,221,127,.3)"] {
  color: rgba(33,63,51,.4) !important;
}
/* Wall color section border-top divider */
body.light-mode #ctrl-settings-panel [style*="border-top:1px solid rgba(44,221,127"] {
  border-top-color: rgba(16,89,55,.1) !important;
}
/* Wall color description line */
body.light-mode #ctrl-settings-panel [style*="rgba(44,221,127,.38)"] {
  color: rgba(33,63,51,.42) !important;
}
/* "Light Mode" highlight in description */
body.light-mode #ctrl-settings-panel [style*="rgba(255,220,80,.7)"] {
  color: #9a6000 !important;
}
/* Color picker swatch border */
body.light-mode #ctrl-settings-panel [style*="rgba(255,255,255,.25)"] {
  border-color: rgba(17,95,58,.25) !important;
}

/* Boot loader and login overlay: always use their own CSS — no theme overrides */