/* ═══════════════════════════════════════════════════════════════════
   15 REFERENCE
   Reference parity components (.sec/.f-row/.tgl/...)
   Sourced from monolithic main.css lines 7044-7694.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM POLISH — reference-parity components
   ───────────────────────────────────────────────────────────────────
   Final layer that brings the editor visually in line with
   `game_editor_liquid.html`. Pure CSS, no DOM changes required.
   Adds: collapsible section chevron + icon, vec2 layout, tool button
   active glow, add/del CTAs, empty-state, sliders, and a tighter
   inspector look. Also adds the reference component class aliases
   (.sec/.f-row/.tgl/.sl-track/.tool/.coords-chip/...) so new code
   can opt in with the canonical names.
   ═══════════════════════════════════════════════════════════════════ */

/* ── INSPECTOR SECTION — chevron + caret, hover accent ─────────── */
.inspector-section {
  position: relative;
  transition: background 0.18s ease;
}
.inspector-section + .inspector-section { border-top: 1px solid var(--glass-border); }
.inspector-section h3 {
  height: 22px;
  display: flex; align-items: center;
  gap: 7px;
  cursor: default;
  user-select: none;
}
.inspector-section.collapsible h3 { cursor: pointer; transition: color 0.15s; }
.inspector-section.collapsible h3::before {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  margin-right: 2px;
  transform: rotate(90deg);
  transition: transform 0.2s var(--ease-soft, ease);
  opacity: 0.55;
  flex-shrink: 0;
}
.inspector-section.collapsible.is-collapsed h3::before { transform: rotate(0deg); }
.inspector-section.collapsible h3:hover { color: var(--t-hi); }

/* Range value chip — keep mono, tighter padding */
.range-row .range-value {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  color: var(--t-low);
  padding: 0 6px;
  min-width: 32px;
  text-align: right;
}

/* Slider track — reference-parity gradient fill + glowing thumb */
.num-range input[type="range"],
.range-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(0,0,0,0.40);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  cursor: pointer;
}
.num-range input[type="range"]::-webkit-slider-thumb,
.range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--acc);
  box-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 10px var(--acc-glow);
  cursor: grab;
  transition: transform 0.12s;
}
.num-range input[type="range"]:hover::-webkit-slider-thumb,
.range-row input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.15);
}
.num-range input[type="range"]::-moz-range-thumb,
.range-row input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--acc);
  box-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 10px var(--acc-glow);
  cursor: grab;
}

/* ── TOGGLE — reference parity, gradient pill when on ──────────── */
.toggle {
  width: 34px; height: 18px;
  border-radius: 99px;
  background: rgba(0,0,0,0.40);
  border: 1px solid var(--glass-border);
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s var(--ease-soft, ease);
  cursor: pointer;
}
.toggle::before {
  content: ''; position: absolute; inset: 0; border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
  pointer-events: none;
}
.toggle-slider {
  position: absolute; top: 1px; left: 1px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--t-dim);
  transition: all 0.2s var(--ease-soft, ease);
  pointer-events: none;
}
.toggle-slider::before { display: none; }
.toggle input:checked + .toggle-slider {
  left: 17px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transform: none;
}
.toggle input:checked ~ .toggle-slider,
.toggle:has(input:checked) {
  /* fallback for browsers without :has — handled by sibling above */
}
.toggle:has(input:checked) {
  background: linear-gradient(90deg, var(--acc), #5f6fff);
  border-color: rgba(124,143,255,0.50);
  box-shadow: 0 0 14px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,0.20);
}
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--t-low);
}

/* ── EMPTY BLOCK / ADD / DEL CTAs ─────────────────────────────── */
.empty-block {
  padding: 14px;
  text-align: center;
  border-radius: 10px;
  background: rgba(0,0,0,0.20);
  border: 1px dashed var(--glass-border);
  margin-bottom: 10px;
}
.empty-block .empty-icon { font-size: 22px; margin-bottom: 6px; opacity: 0.5; }
.empty-block .empty-txt  { font-size: 10px; color: var(--t-dim); line-height: 1.65; }

.add-btn {
  width: 100%;
  height: 30px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--glass-border);
  border-radius: 9px;
  color: var(--t-dim);
  font-family: var(--font);
  font-size: 11px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s var(--ease-soft, ease);
}
.add-btn:hover {
  background: var(--acc-soft);
  border-color: rgba(124,143,255,0.40);
  color: var(--acc);
  border-style: solid;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.add-btn svg { width: 11px; height: 11px; }

.del-btn {
  margin: 14px 16px;
  height: 34px;
  background: var(--c-rose-soft);
  border: 1px solid rgba(255,96,112,0.25);
  border-radius: 10px;
  color: var(--c-rose);
  font-family: var(--font);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.15s var(--ease-soft, ease);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.del-btn:hover {
  background: rgba(255,96,112,0.20);
  border-color: rgba(255,96,112,0.50);
  box-shadow: 0 0 20px rgba(255,96,112,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}
.del-btn svg { width: 13px; height: 13px; }

/* ── VEC2 (paired X/Y fields, used in transform / size) ────────── */
.vec2 { flex: 1; display: flex; gap: 5px; }
.vf {
  flex: 1; height: 28px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 0 8px 0 20px;
  display: flex; align-items: center;
  position: relative;
  cursor: default;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t-hi);
  transition: border-color 0.15s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vf:hover { border-color: var(--glass-border-strong); }
.vf-xp::before, .vf-yp::before {
  position: absolute;
  left: 7px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font);
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.3px;
  pointer-events: none;
}
.vf-xp::before { content: 'X'; color: #ff7070; }
.vf-yp::before { content: 'Y'; color: var(--c-teal); }

/* ── OBJ HEADER (inspector top card) ──────────────────────────── */
.obj-hd {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}
.obj-hd::after {
  content: '';
  position: absolute; bottom: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-shine), transparent);
  pointer-events: none;
}
.obj-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.obj-ico {
  width: 40px; height: 40px;
  border-radius: 13px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c4820, #4e2a0c);
  border: 1px solid rgba(160,100,60,0.40);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.obj-ico::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 100%);
  border-radius: 13px 13px 0 0;
  pointer-events: none;
}
.obj-meta { flex: 1; min-width: 0; }
.obj-name {
  font-size: 15px; font-weight: 700;
  color: var(--t-hi);
  letter-spacing: -0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.obj-id {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--t-dim);
  margin-top: 2px;
}
.obj-tags { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── REFERENCE COMPONENT ALIASES (.sec/.f-row/.tgl/.sl/.tool…) ── */
.sec { border-bottom: 1px solid var(--glass-border); }
.sec-hd {
  height: 36px;
  display: flex; align-items: center;
  padding: 0 16px;
  gap: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.sec-hd:hover { background: rgba(255,255,255,0.025); }
.sec-ico { color: var(--t-dim); display: inline-flex; }
.sec-ico svg { width: 12px; height: 12px; display: block; }
.sec-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--t-low);
  flex: 1;
}
.sec-chev {
  color: var(--t-dim);
  transition: transform 0.18s var(--ease-soft, ease);
  display: inline-flex;
}
.sec-chev.open { transform: rotate(90deg); }
.sec-chev svg { width: 8px; height: 8px; display: block; }
.sec-body { padding: 10px 16px 14px; }

.f-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.f-row:last-child { margin-bottom: 0; }
.f-label {
  font-size: 10px; font-weight: 500;
  color: var(--t-low);
  min-width: 58px;
}
.f-inp {
  flex: 1;
  height: 28px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--t-hi);
  font-family: var(--mono);
  font-size: 11px;
  padding: 0 9px;
  outline: none;
  transition: all 0.15s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.f-inp:focus {
  border-color: rgba(124,143,255,0.45);
  background: rgba(0,0,0,0.40);
  box-shadow: 0 0 0 3px var(--acc-soft), inset 0 1px 0 rgba(255,255,255,0.05);
}
.f-inp.sm { max-width: 60px; }

/* Toggle alias */
.tgl {
  width: 34px; height: 18px;
  border-radius: 99px;
  background: rgba(0,0,0,0.40);
  border: 1px solid var(--glass-border);
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s var(--ease-soft, ease);
  cursor: pointer;
}
.tgl::before {
  content: ''; position: absolute; inset: 0; border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
  pointer-events: none;
}
.tgl::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--t-dim);
  transition: all 0.2s var(--ease-soft, ease);
}
.tgl.on {
  background: linear-gradient(90deg, var(--acc), #5f6fff);
  border-color: rgba(124,143,255,0.50);
  box-shadow: 0 0 14px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,0.20);
}
.tgl.on::after {
  left: 18px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.tgl-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
  margin-bottom: 4px;
}
.tgl-label {
  font-size: 11px; font-weight: 400;
  color: var(--t-low);
  display: flex; align-items: center; gap: 6px;
}
.tgl-label svg { width: 11px; height: 11px; color: var(--t-dim); }

/* Slider alias */
.sl { margin-bottom: 10px; }
.sl:last-child { margin-bottom: 0; }
.sl-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 7px;
}
.sl-label { font-size: 10px; font-weight: 500; color: var(--t-low); }
.sl-val   { font-family: var(--mono); font-size: 10px; color: var(--t-dim); }
.sl-track {
  height: 4px;
  background: rgba(0,0,0,0.40);
  border-radius: 99px;
  position: relative;
  border: 1px solid var(--glass-border);
  cursor: pointer;
}
.sl-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--acc), var(--c-pink));
  box-shadow: 0 0 8px var(--acc-glow2);
}
.sl-thumb {
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--acc);
  box-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 10px var(--acc-glow);
  cursor: grab;
  transition: transform 0.12s;
}
.sl-track:hover .sl-thumb { transform: translate(-50%, -50%) scale(1.15); }

/* Toolbar tool button (alternative to .map-toolbar .btn-icon) */
.tool {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--t-low);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s var(--ease-soft, ease);
  position: relative;
}
.tool svg { width: 14px; height: 14px; }
.tool:hover {
  background: var(--glass-bg);
  color: var(--t-med);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.tool.on, .tool.active {
  background: var(--acc-soft);
  color: var(--acc);
  border-color: rgba(124,143,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 16px var(--acc-glow2);
}

/* Make existing map-toolbar btn-icons inherit the reference active glow
   so the user gets the premium feel without HTML changes. */
.map-toolbar .btn-icon.active {
  background: var(--acc-soft);
  color: var(--acc);
  border-color: rgba(124,143,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 16px var(--acc-glow2);
}

/* Coords chip alias */
.coords-chip {
  height: 28px;
  padding: 0 12px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  display: inline-flex; align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--t-low);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.coords-chip .caxis { font-size: 8px; font-weight: 700; letter-spacing: 0.3px; }
.coords-chip .cx { color: #ff8080; }
.coords-chip .cy { color: var(--c-teal); }

/* Zoom-glass / view-pill aliases */
.zoom-glass {
  display: inline-flex; align-items: center;
  height: 28px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  overflow: hidden;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.zoom-glass .zoom-btn {
  width: 28px; height: 100%;
  background: transparent;
  border: none;
  color: var(--t-low);
  font-size: 16px; font-weight: 300;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.12s;
}
.zoom-glass .zoom-btn:hover { background: var(--glass-bg); color: var(--t-hi); }
.zoom-glass .zoom-val {
  min-width: 42px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  color: var(--t-med);
  border-left: 1px solid var(--glass-border);
  border-right: 1px solid var(--glass-border);
  height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
}

.view-pill {
  display: inline-flex;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  overflow: hidden;
  height: 28px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.vp-btn {
  width: 28px; height: 100%;
  background: transparent;
  border: none;
  color: var(--t-low);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-right: 1px solid var(--glass-border);
  transition: all 0.12s;
}
.vp-btn:last-child { border-right: none; }
.vp-btn:hover { background: var(--glass-bg); color: var(--t-med); }
.vp-btn.on { background: var(--acc-soft); color: var(--acc); }
.vp-btn svg { width: 13px; height: 13px; }

/* ── HUD pills inside the canvas viewport (Salvato, Entità, FPS…) */
.hud-pill {
  height: 26px;
  padding: 0 11px;
  border-radius: 99px;
  background: rgba(6,8,20,0.70);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  display: inline-flex; align-items: center;
  gap: 6px;
  font-size: 9px; font-weight: 600;
  color: var(--t-low);
  font-family: var(--mono);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.hud-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hd-g { background: var(--c-mint); box-shadow: 0 0 8px var(--c-mint); }
.hd-a { background: var(--acc);    box-shadow: 0 0 8px var(--acc-glow); }

/* ── TAG / BADGE colour map (reference palette) ────────────────── */
.tag {
  font-size: 8px; font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  flex-shrink: 0;
}
.t-pc   { background: var(--acc-soft);    color: var(--acc); }
.t-npc  { background: var(--c-rose-soft); color: var(--c-rose); }
.t-boss { background: var(--c-amber-soft);color: var(--c-amber); }
.t-prop { background: var(--c-teal-soft); color: var(--c-teal); }
.t-map  { background: var(--c-mint-soft); color: var(--c-mint); }
.t-deco { background: var(--c-pink-soft); color: var(--c-pink); }

/* ── PANEL HEADER alias (.ph / .ph-label / .ph-ico) ────────────── */
.ph {
  height: 40px;
  display: flex; align-items: center;
  padding: 0 14px;
  gap: 8px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  position: relative;
}
.ph::after {
  content: '';
  position: absolute; left: 0; right: 0;
  bottom: -1px; height: 1px;
  background: var(--glass-shine);
  pointer-events: none;
}
.ph-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-low);
  flex: 1;
}
.ph-ico {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--t-dim);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.12s;
}
.ph-ico:hover {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--t-med);
}
.ph-ico svg { width: 12px; height: 12px; }

/* Promote existing .panel-header / .layer-panel-header to the same look */
.panel-header,
.layer-panel-header {
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--glass-border);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-low);
  background: transparent;
}
.panel-header > span:first-child,
.layer-panel-header > span:first-child {
  flex: 1;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* ── PANEL aliases (.panel-l / .panel-r) ───────────────────────── */
.panel-l, .panel.panel-left,
.panel-r, .panel.panel-right {
  background: rgba(8, 9, 26, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  position: relative;
}
.panel.panel-left  { border-right: 1px solid var(--glass-border); }
.panel.panel-right { border-left:  1px solid var(--glass-border); }
.panel.panel-left::after,
.panel.panel-right::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.08) 70%,
    transparent);
  pointer-events: none;
}
.panel.panel-left::after  { right: 0; }
.panel.panel-right::after { left: 0; }

/* ── B-trigger / B-event / B-actions (binding cards) ───────────── */
.b-trigger { font-weight: 700; color: var(--c-amber); font-size: 11px; }
.b-event   { font-size: 11px; color: var(--t-med); margin-top: 2px; }
.b-actions { margin-top: 8px; display: flex; gap: 6px; }
.btn-del {
  background: var(--c-rose-soft) !important;
  color: var(--c-rose) !important;
  border-color: rgba(255,96,112,0.25) !important;
}
.btn-del:hover {
  background: rgba(255,96,112,0.20) !important;
  border-color: rgba(255,96,112,0.45) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INSPECTOR REDESIGN — clean two-column layout
   ───────────────────────────────────────────────────────────────────
   Consistent label width, vec2 paired rows, single-chip slider values,
   full-width toggle rows. Everything aligns to a shared 88px label gutter.
   ═══════════════════════════════════════════════════════════════════ */

.inspector-section .form-row,
.inspector-section .toggle-row,
.inspector-section .vec2-row,
.inspector-section .range-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  min-height: 28px;
}
.inspector-section .form-row:last-child,
.inspector-section .toggle-row:last-child,
.inspector-section .vec2-row:last-child,
.inspector-section .range-row:last-child { margin-bottom: 0; }

/* Unified label gutter — applies to every row inside an inspector section. */
.inspector-section .form-row > label,
.inspector-section .toggle-row > .toggle-row-label,
.inspector-section .vec2-row > label,
.inspector-section .range-row > label {
  flex: 0 0 88px;
  min-width: 88px;
  width: 88px;
  font-size: 11px;
  font-weight: 500;
  color: var(--t-med);
  letter-spacing: 0.1px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}
.toggle-row-hint {
  display: block;
  font-size: 9px;
  color: var(--t-dim);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 1px;
}

/* ── VEC2 row: paired X/Y (or S/R) fields ────────────────────────── */
.vec2-row .vec2 {
  flex: 1;
  display: flex;
  gap: 6px;
  min-width: 0;
}
.vec2-row .vf {
  flex: 1;
  height: 28px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  position: relative;
  padding: 0 0 0 18px;
  display: flex;
  align-items: center;
  min-width: 0;
  transition: border-color 0.15s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vec2-row .vf:hover, .vec2-row .vf:focus-within {
  border-color: rgba(124,143,255,0.40);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.vec2-row .vf-xp::before, .vec2-row .vf-yp::before {
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.3px;
  pointer-events: none;
}
.vec2-row .vf-xp::before { content: 'X'; color: #ff7878; }
.vec2-row .vf-yp::before { content: 'Y'; color: var(--c-teal); }
.vec2-row .vf-inp {
  flex: 1; min-width: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 7px 0 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t-hi);
  text-align: right;
  -moz-appearance: textfield;
}
.vec2-row .vf-inp::-webkit-outer-spin-button,
.vec2-row .vf-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── RANGE row: slider + single value chip + optional reset ─────── */
.range-row .num-range {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.range-row .num-range input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 4px;
  margin: 0;
}
.range-row .range-chip {
  flex: 0 0 auto;
  min-width: 44px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  color: var(--t-hi);
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.range-row .range-chip:hover {
  border-color: rgba(124,143,255,0.40);
  color: var(--t-hi);
}
.range-row .range-chip.is-default {
  color: var(--t-dim);
  font-style: italic;
  font-weight: 500;
}
.range-row .range-chip-edit {
  flex: 0 0 auto;
  width: 60px;
  height: 22px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  color: var(--t-hi);
  background: rgba(0,0,0,0.50);
  border: 1px solid rgba(124,143,255,0.50);
  border-radius: 6px;
  outline: none;
  text-align: right;
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.range-row .range-reset {
  width: 22px; height: 22px;
  padding: 0;
  font-size: 12px;
  border-radius: 6px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  color: var(--t-med);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.range-row .range-reset:hover { color: var(--t-hi); border-color: var(--glass-border-strong); }
.range-row .range-reset.is-hidden { display: none; }
/* Hide the old <input type="number"> that the legacy implementation appended. */
.range-row .num-range > input[type="number"] { display: none; }

/* ── TOGGLE row: label gutter + flush-right toggle ───────────────── */
.inspector-section .toggle-row {
  justify-content: space-between;
}
.inspector-section .toggle-row > .toggle-row-label,
.inspector-section .toggle-row > span {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--t-med);
  display: flex;
  flex-direction: column;
}
.inspector-section .toggle-row .toggle {
  flex-shrink: 0;
  margin-left: auto;
}

/* Force inspector-section-level overrides to win against the legacy form-row
   rule that capped labels at 58px. */
.inspector-section .form-row > label { width: 88px; min-width: 88px; max-width: 88px; }
.inspector-section .form-row > input,
.inspector-section .form-row > select,
.inspector-section .form-row > .num-range,
.inspector-section .form-row > .vec2 { flex: 1; min-width: 0; }
.inspector-section .form-row > input[type="number"],
.inspector-section .form-row > input[type="text"] {
  text-align: left;
  font-family: var(--mono);
}

/* ═══════════════════════════════════════════════════════════════════
   EXTENSION GROUP — Comportamenti / Moduli / Bindings
   ───────────────────────────────────────────────────────────────────
   Three uniform sections that add capability to the instance. Header
   shows icon + name + count chip; empty-state is consistent across all
   three; CTA uses the .add-btn pill.
   ═══════════════════════════════════════════════════════════════════ */

.inspector-ext-group .inspector-section { padding: 12px 16px; }
.inspector-ext-group .inspector-section h3 {
  margin: 0 0 10px;
  font-size: 9.5px;
  letter-spacing: 1.3px;
}

/* Count chip next to section title. Empty when count == 0 (server-side). */
.sec-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--acc);
  background: var(--acc-soft);
  border: 1px solid rgba(124,143,255,0.30);
  border-radius: 99px;
  text-transform: none;
}

/* Behaviors / Modules / Bindings inner list spacing — tighten the gap so
   cards + CTA feel like a single unit. */
.inspector-ext-group .recipe-card-list,
.inspector-ext-group .inspector-modules,
.inspector-ext-group .binding-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

/* Empty-state polish inside the extension group */
.inspector-ext-group .empty-block {
  padding: 18px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.22);
  border: 1px dashed var(--glass-border-strong);
  text-align: center;
  margin-bottom: 10px;
}
.inspector-ext-group .empty-block .empty-icon {
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.55;
}
.inspector-ext-group .empty-block .empty-txt {
  font-size: 10.5px;
  color: var(--t-low);
  line-height: 1.6;
}

/* Unify all three "+ Aggiungi …" buttons on the .add-btn look. The older
   `.recipe-add-btn` and `.btn-add` classes are kept for backward-compat,
   but now they inherit the same visual. */
.inspector-ext-group .add-btn,
.add-btn.recipe-add-btn,
.inspector-add-module.add-btn {
  width: 100%;
  height: 32px;
  background: rgba(124,143,255,0.06);
  border: 1px dashed rgba(124,143,255,0.35);
  border-radius: 9px;
  color: var(--acc);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.15s var(--ease-soft, ease);
  letter-spacing: 0.1px;
}
.inspector-ext-group .add-btn:hover,
.add-btn.recipe-add-btn:hover,
.inspector-add-module.add-btn:hover {
  background: var(--acc-soft);
  border-color: rgba(124,143,255,0.55);
  border-style: solid;
  color: #d0d8ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 18px var(--acc-glow2);
}
.add-btn.is-all-active {
  background: rgba(80,232,152,0.06);
  border-color: rgba(80,232,152,0.30);
  color: var(--c-mint);
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}

/* Legacy .btn-add (used by old code) → also picks up .add-btn look. */
.btn-add {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 32px;
  background: rgba(124,143,255,0.06);
  border: 1px dashed rgba(124,143,255,0.35);
  border-radius: 9px;
  color: var(--acc);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition: all 0.15s var(--ease-soft, ease);
}
.btn-add:hover {
  background: var(--acc-soft);
  border-color: rgba(124,143,255,0.55);
  border-style: solid;
  color: #d0d8ff;
}

/* Binding card — flatten + sharpen */
.inspector-ext-group .binding-card {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--c-amber);
  border-radius: 9px;
  position: relative;
}
.inspector-ext-group .binding-card .b-trigger {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-amber);
  letter-spacing: 0.1px;
}
.inspector-ext-group .binding-card .b-event {
  font-size: 11px;
  color: var(--t-med);
  margin-top: 3px;
}
.inspector-ext-group .binding-card .b-actions {
  margin-top: 8px;
}
.inspector-ext-group .binding-card .btn-del {
  height: 22px;
  padding: 0 10px;
  font-size: 10.5px;
}

/* Final delete-instance CTA — a clear visual full stop at the bottom. */
.inspector-content > .del-btn {
  margin: 18px 16px 16px;
  height: 36px;
}