/* ══════════════════════════════════════════════════════════════════════
   Control Settings Panel — theme-aware
   Dark by default; light via body.light-mode
   ══════════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties (dark defaults) ───────────────────────────── */
#ctrl-settings-panel {
  --cs-bg:           #0d1914;
  --cs-header-bg:    linear-gradient(90deg, #12201a 0%, #0d1914 100%);
  --cs-header-border:#2cdd7f1a;   /* rgba(44,221,127,.10) */
  --cs-surface:      #1a2b24;
  --cs-card-border:  rgba(44,221,127,.10);
  --cs-card-shadow:  0 2px 16px rgba(0,0,0,.30);
  --cs-divider:      rgba(44,221,127,.07);
  --cs-section-lbl:  rgba(44,221,127,.45);
  --cs-text:         #cee2d8;
  --cs-text2:        #58b282;
  --cs-muted:        #94b8a5;
  --cs-accent:       #2cdd7f;
  --cs-input-bg:     rgba(0,0,0,.28);
  --cs-input-border: rgba(44,221,127,.22);
  --cs-icon-bg:      linear-gradient(135deg, rgba(44,221,127,.10), rgba(79,226,148,.10));
  --cs-icon-border:  rgba(44,221,127,.28);
  --cs-close-bg:     rgba(220,50,50,.10);
  --cs-close-border: rgba(220,50,50,.28);
  --cs-close-color:  #f87171;
}

/* ── Light mode overrides ────────────────────────────────────────────── */
body.light-mode #ctrl-settings-panel {
  --cs-bg:           #f9f7f2;
  --cs-header-bg:    linear-gradient(90deg, #ffffff 0%, #faf9f5 100%);
  --cs-header-border:#eae5d9;
  --cs-surface:      #ffffff;
  --cs-card-border:  #ece7dc;
  --cs-card-shadow:  0 2px 10px rgba(17,98,60,.07);
  --cs-divider:      #f6f4ed;
  --cs-section-lbl:  #3c8a66;
  --cs-text:         #1a3228;
  --cs-text2:        #3c8a66;
  --cs-muted:        #94b8a0;
  --cs-accent:       #167b4c;
  --cs-input-bg:     #faf9f5;
  --cs-input-border: #cbddd1;
  --cs-icon-bg:      linear-gradient(135deg, rgba(27,151,93,.14), rgba(33,187,115,.14));
  --cs-icon-border:  rgba(27,151,93,.30);
  --cs-close-bg:     rgba(220,50,50,.08);
  --cs-close-border: rgba(220,50,50,.28);
  --cs-close-color:  #dc2626;
}

/* ── Panel container ─────────────────────────────────────────────────── */
#ctrl-settings-panel {
  position: fixed;
  top: 56px; left: calc(var(--sb-w, 220px)); right: 0; bottom: 0;
  z-index: 1100;
  background: var(--cs-bg);
  flex-direction: column;
  overflow-y: auto;
  font-family: inherit;
  transition: background .2s;
}
body.sb-icon-only #ctrl-settings-panel { left: 68px; }

/* ── Header bar ──────────────────────────────────────────────────────── */
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1.5px solid var(--cs-header-border);
  flex-shrink: 0;
  background: var(--cs-header-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition: background .2s, border-color .2s;
}
.cs-header-left { display: flex; align-items: center; gap: 10px; }
.cs-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--cs-icon-bg);
  border: 1px solid var(--cs-icon-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.cs-title { font-size: .94rem; font-weight: 700; color: var(--cs-text); letter-spacing: .3px; }
.cs-sub   { font-size: .71rem; color: var(--cs-text2); margin-top: 1px; }
.cs-close-btn {
  background: var(--cs-close-bg);
  border: 1px solid var(--cs-close-border);
  border-radius: 8px;
  color: var(--cs-close-color);
  padding: 7px 20px;
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  font-family: inherit;
}
.cs-close-btn:hover {
  background: rgba(220,50,50,.22);
  border-color: rgba(220,50,50,.55);
}

/* ── Body scroll area ────────────────────────────────────────────────── */
.cs-body { flex: 1; overflow-y: auto; padding: 24px; }
.cs-inner { max-width: 680px; display: flex; flex-direction: column; gap: 16px; }

/* ── Scene card ──────────────────────────────────────────────────────── */
.cs-card {
  background: var(--cs-surface);
  border: 1px solid var(--cs-card-border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--cs-card-shadow);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.cs-card-section-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--cs-section-lbl);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cs-divider);
  transition: color .2s, border-color .2s;
}

/* ── Control rows ────────────────────────────────────────────────────── */
.cs-row { /* default first row — no top divider */ }
.cs-row-divider {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cs-divider);
  transition: border-color .2s;
}
.cs-row-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.cs-label {
  font-size: .88rem;
  color: var(--cs-text);
  font-weight: 600;
  letter-spacing: .3px;
  transition: color .2s;
}
.cs-input-wrap { display: flex; align-items: center; gap: 7px; }
.cs-num-input {
  width: 64px;
  background: var(--cs-input-bg);
  border: 1px solid var(--cs-input-border);
  border-radius: 7px;
  color: var(--cs-text);
  font-size: .88rem;
  padding: 5px 9px;
  text-align: right;
  outline: none;
  font-family: inherit;
  transition: background .2s, border-color .2s, color .2s;
}
.cs-num-input:focus { border-color: var(--cs-accent); box-shadow: 0 0 0 3px rgba(44,221,127,.10); }
.cs-unit { font-size: .8rem; color: var(--cs-text2); font-weight: 500; transition: color .2s; }
.cs-slider {
  width: 100%;
  accent-color: var(--cs-accent);
  cursor: pointer;
  height: 5px;
  display: block;
}
.cs-range-labels { display: flex; justify-content: space-between; margin-top: 6px; }
.cs-range-lbl { font-size: .7rem; color: var(--cs-muted); }