/* ============================================================
   Survey Builder — survey-builder.css
   ============================================================ */

/* ── App shell ─────────────────────────────────────────────── */
#svb-app {
  max-width: 780px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}

/* account for fixed topnav (60px) */
body { padding-top: 60px; }

/* ── Toolbar ───────────────────────────────────────────────── */
#svb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
#svb-toolbar-left { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
#svb-toolbar-right { display: flex; align-items: center; gap: 0.5rem; }

#svb-name {
  flex: 1;
  min-width: 160px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid #e5e7eb;
  padding: 0.25rem 0.4rem;
  background: transparent;
  outline: none;
}
#svb-name:focus { border-bottom-color: #0066cc; }

#svb-code-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap;
}
.svb-code-label { font-weight: 500; }
#svb-code {
  width: 140px;
  font-size: 0.8rem;
  font-family: monospace;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  background: #f9fafb;
  outline: none;
}
#svb-code:focus { border-color: #0066cc; background: #fff; }

#svb-lang-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: #f0f4ff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #374151;
}
#svb-lang-wrap .svb-code-label { color: #4338ca; font-weight: 600; }
#svb-lang-sel {
  font-size: 0.85rem;
  border: 1px solid #a5b4fc;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  background: #fff;
  outline: none;
}
#svb-lang-sel:focus { border-color: #4338ca; }

/* ── Buttons ───────────────────────────────────────────────── */
.svb-btn {
  padding: 0.4rem 0.9rem;
  border-radius: 5px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, opacity 0.15s;
}
.svb-btn-primary {
  background: #0066cc;
  color: #fff;
  border-color: #0066cc;
}
.svb-btn-primary:hover { background: #004d99; border-color: #004d99; }
.svb-btn-secondary {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}
.svb-btn-secondary:hover { background: #f3f4f6; }

/* export dropdown */
.svb-dropdown { position: relative; }
.svb-dropdown-menu {
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  min-width: 160px;
  z-index: 100;
}
.svb-dropdown-menu.open { display: block; }
.svb-dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #374151;
}
.svb-dropdown-menu button:hover { background: #f3f4f6; }

/* ── Errors banner ─────────────────────────────────────────── */
#svb-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 0.6rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: #991b1b;
}
#svb-errors ul { margin: 0.3rem 0 0 1.2rem; padding: 0; }

/* ── Toast ─────────────────────────────────────────────────── */
#svb-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #1f2937;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
#svb-toast.visible { opacity: 1; }

/* ── Cards ─────────────────────────────────────────────────── */
.svb-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border-left: 4px solid #e5e7eb;
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.svb-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.svb-card.svb-card--section {
  border-left-color: #7c3aed;
  background: #faf5ff;
}
.svb-card.svb-card--inst {
  border-left-color: #16a34a;
  background: #f0fdf4;
}
.svb-card.drag-over { border-color: #0066cc; box-shadow: 0 0 0 2px #bfdbfe; }
.svb-card.dragging { opacity: 0.4; }

/* card has error */
.svb-card.has-error { border-left-color: #dc2626; }

/* ── Card header ───────────────────────────────────────────── */
.svb-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.svb-drag-handle {
  cursor: grab;
  color: #9ca3af;
  font-size: 1.1rem;
  padding: 0 0.2rem;
  user-select: none;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.svb-drag-handle:active { cursor: grabbing; }
.svb-card-text {
  flex: 1;
  width: 100%;
  min-height: 1.8rem;
  font-size: 0.95rem;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.1rem 0.2rem;
  background: transparent;
  outline: none;
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  font-family: inherit;
}
.svb-card-text:focus { border-bottom-color: #0066cc; }
.svb-card-text.svb-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #5b21b6;
}
.svb-card-controls {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.svb-card-controls button {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 1rem;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
}
.svb-card-controls button:hover { background: #f3f4f6; color: #374151; }

/* ── Card footer ───────────────────────────────────────────── */
.svb-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f3f4f6;
  font-size: 0.82rem;
  color: #6b7280;
}
.svb-card-footer select {
  font-size: 0.82rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  background: #f9fafb;
  color: #374151;
  cursor: pointer;
}
.svb-required-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  user-select: none;
}
.svb-required-toggle input[type="checkbox"] { cursor: pointer; accent-color: #0066cc; }
.svb-coding-toggle { color: #6b7280; }
.svb-coding-toggle input[type="checkbox"] { accent-color: #7c3aed; }

/* ── Preview area (multi/likert/etc) ───────────────────────── */
.svb-preview {
  margin: 0.4rem 0 0 1.4rem;
  color: #6b7280;
  font-size: 0.88rem;
}
.svb-preview-options { display: flex; flex-direction: column; gap: 0.25rem; }
.svb-preview-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.svb-preview-option input { accent-color: #0066cc; }
.svb-preview-option-text { color: #374151; }
.svb-preview-option-text.placeholder { color: #9ca3af; font-style: italic; }

.svb-preview-likert {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.svb-preview-likert-btn {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  color: #6b7280;
}

.svb-inst-head {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 0.95rem;
  color: #16a34a;
  margin-bottom: 0.3rem;
  border-bottom-style: solid;
}

.svb-preview-short { color: #9ca3af; font-style: italic; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.2rem; }
.svb-preview-long {
  color: #9ca3af;
  font-style: italic;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  min-height: 3rem;
}

/* ── Option editor ─────────────────────────────────────────── */
.svb-options { margin: 0.4rem 0 0 1.4rem; }
.svb-option-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.svb-option-row input[type="text"] {
  flex: 1;
  font-size: 0.88rem;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.15rem 0.2rem;
  background: transparent;
  outline: none;
}
.svb-option-row input[type="text"]:focus { border-bottom-color: #0066cc; }
.svb-option-value {
  width: 48px;
  font-size: 0.8rem;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  padding: 0.1rem 0.25rem;
  background: #f9fafb;
  color: #6b7280;
  text-align: center;
  flex-shrink: 0;
}
.svb-option-value:focus { border-color: #0066cc; background: #fff; outline: none; }
.svb-option-del {
  background: none;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 4px;
  line-height: 1;
}
.svb-option-del:hover { color: #dc2626; }
.svb-add-option {
  background: none;
  border: none;
  color: #0066cc;
  font-size: 0.83rem;
  cursor: pointer;
  padding: 0.1rem 0;
  margin-left: 1.4rem;
}
.svb-add-option:hover { text-decoration: underline; }

/* ── Likert editor ─────────────────────────────────────────── */
.svb-likert-editor { margin: 0.5rem 0 0 1.4rem; font-size: 0.85rem; }
.svb-likert-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.svb-likert-row label { color: #6b7280; white-space: nowrap; min-width: 60px; }
.svb-likert-row input[type="number"] {
  width: 60px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
}
.svb-likert-labels { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.svb-likert-label-row { display: flex; align-items: center; gap: 0.4rem; }
.svb-likert-label-row .point-num {
  min-width: 1.4rem;
  text-align: right;
  color: #9ca3af;
  font-size: 0.8rem;
}
.svb-likert-label-row input[type="text"] {
  flex: 1;
  font-size: 0.83rem;
  border: none;
  border-bottom: 1px dashed #e5e7eb;
  padding: 0.1rem 0.2rem;
  background: transparent;
  outline: none;
}
.svb-likert-label-row input[type="text"]:focus { border-bottom-color: #0066cc; }

/* ── Add question row ──────────────────────────────────────── */
#svb-add-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.svb-btn-add {
  background: #fff;
  color: #0066cc;
  border: 2px dashed #93c5fd;
  font-size: 0.9rem;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
}
.svb-btn-add:hover { background: #eff6ff; border-color: #0066cc; }
#svb-add-type {
  font-size: 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  background: #fff;
  color: #374151;
  cursor: pointer;
}

/* ── Response Scale Presets panel ─────────────────────────── */
#svb-presets { margin-bottom: 1rem; }

.svb-presets-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.svb-presets-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
}
.svb-presets-hint {
  flex: 1;
  font-size: 0.8rem;
  color: #9ca3af;
}
.svb-preset-add-btn {
  background: #fff;
  color: #0066cc;
  border: 1px solid #93c5fd;
  font-size: 0.82rem;
  padding: 0.25rem 0.7rem;
  border-radius: 5px;
  cursor: pointer;
}
.svb-preset-add-btn:hover { background: #eff6ff; }

.svb-preset-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #7c3aed;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.svb-preset-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #faf5ff;
  cursor: pointer;
}
.svb-preset-name {
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  outline: none;
  color: #5b21b6;
  min-width: 0;
  flex-shrink: 0;
}
.svb-preset-name:focus { border-bottom-color: #7c3aed; }
.svb-preset-summary {
  flex: 1;
  font-size: 0.78rem;
  color: #6b7280;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svb-preset-del {
  background: none;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 1px 4px;
  line-height: 1;
  flex-shrink: 0;
}
.svb-preset-del:hover { color: #dc2626; }

.svb-preset-body {
  padding: 0.5rem 0.75rem 0.6rem;
  border-top: 1px solid #f3f4f6;
}
.svb-preset-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.83rem;
}
.svb-preset-row label { color: #6b7280; white-space: nowrap; }
.svb-preset-row input[type="number"] {
  width: 56px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  font-size: 0.83rem;
}
.svb-preset-qhead {
  flex: 1;
  font-size: 0.83rem;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.1rem 0.2rem;
  background: transparent;
  outline: none;
}
.svb-preset-qhead:focus { border-bottom-color: #7c3aed; }

.svb-preset-labels {
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* ── Likert item preset summary (inside card) ──────────────── */
.svb-likert-preset-summary {
  margin: 0.3rem 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.svb-likert-preset-head {
  width: 100%;
  font-style: italic;
  color: #6b7280;
  font-size: 0.82rem;
  margin-bottom: 0.1rem;
}
.svb-likert-preset-badge {
  background: #f3e8ff;
  color: #7c3aed;
  border-radius: 10px;
  padding: 0.1rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.svb-likert-preset-detail {
  color: #6b7280;
  font-size: 0.82rem;
}

/* ── Preset picker in card footer ──────────────────────────── */
.svb-preset-picker {
  font-size: 0.82rem;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  background: #faf5ff;
  color: #5b21b6;
  cursor: pointer;
}

/* ── VAS editor ────────────────────────────────────────────── */
.svb-vas-editor { margin: 0.4rem 0 0 1.4rem; font-size: 0.85rem; }
.svb-vas-label-input {
  flex: 1;
  font-size: 0.83rem;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.1rem 0.2rem;
  background: transparent;
  outline: none;
}
.svb-vas-label-input:focus { border-bottom-color: #0066cc; }
.svb-vas-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.svb-vas-endlabel { font-size: 0.78rem; color: #6b7280; white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
.svb-vas-track {
  flex: 1;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  position: relative;
}
.svb-vas-thumb {
  position: absolute;
  left: 40%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0066cc;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ── Grid editor ────────────────────────────────────────────── */
.svb-grid-editor {
  margin: 0.4rem 0 0 1.4rem;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.svb-grid-panel { }
.svb-grid-panel-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.svb-grid-hint { font-weight: 400; color: #9ca3af; font-size: 0.75rem; }
.svb-grid-edit-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}
.svb-grid-edit-row input[type="text"] {
  flex: 1;
  font-size: 0.83rem;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.1rem 0.2rem;
  background: transparent;
  outline: none;
}
.svb-grid-edit-row input[type="text"]:focus { border-bottom-color: #0066cc; }
.svb-grid-opt-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.svb-grid-opt-label input { accent-color: #7c3aed; }

/* Grid preview table */
.svb-grid-preview-wrap {
  overflow-x: auto;
  margin-top: 0.25rem;
}
.svb-grid-preview {
  border-collapse: collapse;
  font-size: 0.78rem;
  color: #6b7280;
  min-width: 100%;
}
.svb-grid-preview th, .svb-grid-preview td {
  border: 1px solid #f3f4f6;
  padding: 0.2rem 0.5rem;
  text-align: center;
  white-space: nowrap;
}
.svb-grid-preview th { background: #f9fafb; font-weight: 600; color: #374151; }
.svb-grid-row-label { text-align: left !important; color: #374151; min-width: 120px; }
.svb-grid-preview input[type="radio"] { margin: 0; accent-color: #0066cc; }

/* ── Scoring Dimensions panel ──────────────────────────────── */
#svb-dimensions { margin-top: 1.25rem; margin-bottom: 0.5rem; }

.svb-dims-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.svb-dims-title { font-weight: 600; font-size: 0.9rem; color: #374151; }
.svb-dims-hint  { flex: 1; font-size: 0.8rem; color: #9ca3af; }
.svb-dim-add-btn {
  background: #fff;
  color: #0369a1;
  border: 1px solid #7dd3fc;
  font-size: 0.82rem;
  padding: 0.25rem 0.7rem;
  border-radius: 5px;
  cursor: pointer;
}
.svb-dim-add-btn:hover { background: #f0f9ff; }

.svb-dim-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #0369a1;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.svb-dim-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f0f9ff;
}
.svb-dim-name {
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  outline: none;
  color: #0c4a6e;
  flex: 1;
  min-width: 0;
}
.svb-dim-name:focus { border-bottom-color: #0369a1; }
.svb-dim-abbr {
  width: 60px;
  font-size: 0.82rem;
  border: 1px solid #e0f2fe;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  background: #fff;
  color: #374151;
  outline: none;
  text-align: center;
  flex-shrink: 0;
}
.svb-dim-abbr:focus { border-color: #0369a1; }
.svb-dim-desc {
  flex: 1;
  min-width: 120px;
  font-size: 0.82rem;
  border: 1px solid #e0f2fe;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  background: #fff;
  color: #374151;
  outline: none;
}
.svb-dim-desc:focus { border-color: #0369a1; }
.svb-dim-id-label { font-size: 0.75rem; color: #9ca3af; white-space: nowrap; flex-shrink: 0; }
.svb-dim-id-label code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; }

/* ── Collapsible sub-sections inside a dim card ── */
.svb-dim-section { margin-bottom: 0.5rem; }

/* ── Transform steps ── */
.svb-transform-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0;
  font-size: 0.82rem;
}
.svb-transform-row select {
  font-size: 0.82rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  background: #fff;
}
.svb-transform-val {
  width: 90px;
  font-size: 0.82rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
}
.svb-btn-hint {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
  font-size: 0.75rem;
}

/* ── Value map ── */
.svb-vm-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0;
  font-size: 0.82rem;
}
.svb-vm-key {
  background: #f3f4f6;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.78rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.svb-vm-values {
  flex: 1;
  font-size: 0.82rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
}
.svb-vm-add-select {
  font-size: 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
}

.svb-dim-body { padding: 0.5rem 0.75rem 0.6rem; border-top: 1px solid #f0f9ff; }
.svb-dim-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.83rem;
  flex-wrap: wrap;
}
.svb-dim-row label { color: #6b7280; white-space: nowrap; }
.svb-dim-row select {
  font-size: 0.83rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  background: #f9fafb;
}
.svb-dim-rescale-label { margin-left: 0.75rem; }
.svb-dim-transform-row input[type="number"] {
  width: 70px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  font-size: 0.83rem;
}
.svb-dim-items-row {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.svb-dim-items-label { color: #6b7280; white-space: nowrap; font-weight: 500; }
.svb-dim-items-list code {
  background: #e0f2fe;
  color: #0369a1;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.75rem;
}
.svb-dim-no-items { color: #9ca3af; font-style: italic; font-size: 0.82rem; padding: 0.3rem 0; }

/* ── Dimension item-assignment editor ──────────────────────── */
.svb-dim-items-editor {
  margin-top: 0.75rem;
  border-top: 1px solid #bae6fd;
  padding-top: 0.5rem;
}
.svb-dim-items-head {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0369a1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.svb-dim-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.35rem;
  border-radius: 4px;
  background: #f0f9ff;
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
}
.svb-dim-item-row:hover { background: #e0f2fe; }
.svb-dim-item-id {
  background: #bae6fd;
  color: #0369a1;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.svb-dim-item-unknown { color: #9ca3af; }
.svb-dim-item-preview {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #374151;
  font-size: 0.8rem;
}
.svb-dim-reversed-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.svb-dim-add-item-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.svb-dim-add-select {
  flex: 1;
  font-size: 0.82rem;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: 0.2rem 0.35rem;
  background: #f0f9ff;
  color: #0369a1;
}
.svb-dim-add-select:focus { outline: 2px solid #38bdf8; }

/* ── Dimension picker in card footer ───────────────────────── */
.svb-dim-picker {
  font-size: 0.82rem;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  background: #f0f9ff;
  color: #0369a1;
  cursor: pointer;
}

/* ── Add count input ───────────────────────────────────────── */


/* ── Tab bar ───────────────────────────────────────────────── */
#svb-tabbar {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0;
}
.svb-tab-btn {
  padding: 0.45rem 1.1rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  font-size: 0.88rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: color 0.15s, border-color 0.15s;
}
.svb-tab-btn:hover { color: #374151; background: #f3f4f6; }
.svb-tab-btn.active {
  color: #0066cc;
  border-bottom-color: #0066cc;
  background: none;
}

/* ── Scale info tab ────────────────────────────────────────── */
.svb-si-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 680px) { .svb-si-panel { grid-template-columns: 1fr; } }

.svb-si-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem 1.1rem;
}
.svb-si-section-head {
  font-weight: 600;
  font-size: 0.88rem;
  color: #374151;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e5e7eb;
}
.svb-si-hint {
  font-size: 0.78rem;
  color: #9ca3af;
  margin: -0.25rem 0 0.6rem;
}
.svb-si-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.65rem;
}
.svb-si-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: #6b7280;
}
.svb-si-input {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.svb-si-input:focus { outline: 2px solid #0066cc; border-color: transparent; }
.svb-si-refs { display: flex; flex-direction: column; gap: 0.3rem; }
.svb-si-ref-entry { display: flex; gap: 0.3rem; align-items: center; }
.svb-si-ref-entry .svb-si-input { flex: 1; width: auto; }
.svb-si-textarea {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.svb-si-textarea:focus { outline: 2px solid #0066cc; border-color: transparent; }

/* ── Empty state ───────────────────────────────────────────── */
#svb-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #9ca3af;
}
#svb-empty p { font-size: 1rem; margin-bottom: 0.4rem; }
#svb-empty small { font-size: 0.85rem; }

/* ── Feature 1: Import panel ────────────────────────────────── */
#svb-import-panel {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
}
#svb-import-text {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.88rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 0.5rem;
}
#svb-import-text:focus { border-color: #0066cc; outline: none; }
.svb-import-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.svb-import-controls select {
  font-size: 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  background: #fff;
  color: #374151;
  cursor: pointer;
}
.svb-import-controls button {
  padding: 0.35rem 0.8rem;
  border-radius: 5px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
}
.svb-import-controls button:first-of-type {
  background: #0066cc;
  color: #fff;
  border-color: #0066cc;
}
.svb-import-controls button:first-of-type:hover { background: #004d99; }

/* ── Feature 2: More options (gate + random_group + new fields) */

/* More-opts divider */
.svb-more-divider {
  border: none;
  border-top: 1px solid var(--border, #e5e7eb);
  margin: 6px 0;
}

/* Number input in more-opts */
.svb-more-num {
  width: 64px;
}

/* Description/text input in more-opts */
.svb-more-desc {
  flex: 1;
  min-width: 0;
}

/* VW section inside more-opts — no extra padding */
.svb-more-section.svb-vw-section {
  padding: 0;
}

.svb-more-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 1rem;
  padding: 0 4px;
  line-height: 1;
}
.svb-more-toggle:hover { color: #374151; }

.svb-more-opts {
  display: none;
  border-top: 1px solid #e5e7eb;
  padding: 0.6rem 1rem;
  background: #f9fafb;
}
.svb-card--expanded .svb-more-opts { display: block; }

.svb-more-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.svb-more-row label { color: #6b7280; white-space: nowrap; }
.svb-more-row input[type="text"], .svb-more-row select { font-size: 0.82rem; }
.svb-gate-value, .svb-gate-msg {
  flex: 1;
  min-width: 120px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
}
.svb-more-hidden { opacity: 0.4; pointer-events: none; }

/* ── Feature 3: Norms on scoring dimensions ─────────────────── */
.svb-dim-norms { margin-top: 0.75rem; border-top: 1px solid #bae6fd; padding-top: 0.5rem; }
.svb-norm-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
.svb-norm-num {
  width: 60px;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  font-size: 0.82rem;
}
.svb-norm-label {
  flex: 1;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  font-size: 0.82rem;
}
.svb-norm-source {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.82rem;
}

/* ── Feature 4: Branches panel ──────────────────────────────── */
#svb-branches { margin-top: 1.25rem; }
.svb-branch-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #16a34a;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.svb-branch-arms { margin-top: 0.5rem; }
.svb-branch-arm {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.svb-branch-arm-id {
  width: 100px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  font-size: 0.82rem;
}
.svb-branch-arm-secs {
  flex: 1;
  min-width: 160px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  font-size: 0.82rem;
}
.svb-branch-arm-label { color: #6b7280; white-space: nowrap; }
.svb-branch-hint { font-size: 0.78rem; color: #9ca3af; margin-top: 0.35rem; }
.svb-branch-hint code { background: #f3f4f6; color: #374151; padding: 1px 4px; border-radius: 3px; }

/* ── Translation support ────────────────────────────────────── */

/* Translation reference text below inputs */
.svb-trans-ref {
  font-style: italic;
  color: #6b7280;
  font-size: 0.8rem;
  margin-top: 2px;
  padding: 0 2px;
  line-height: 1.3;
}

/* Input highlight when in translation mode */
.svb-trans-input {
  border-color: #a5b4fc !important;
  background: #f5f3ff !important;
}

/* Translation banner */
#svb-trans-banner {
  background: #ede9fe;
  border-bottom: 1px solid #c4b5fd;
  padding: 6px 16px;
  font-size: 0.85rem;
  color: #4c1d95;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.svb-trans-remove-btn {
  background: none;
  border: 1px solid #a78bfa;
  border-radius: 4px;
  color: #7c3aed;
  padding: 1px 8px;
  font-size: 0.8rem;
  cursor: pointer;
}
.svb-trans-remove-btn:hover {
  background: #ddd6fe;
}

/* ── Visibility rules (visible_when) ───────────────────────── */
.svb-vw-bar {
  padding: 0.2rem 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.svb-vw-add-btn {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
}
.svb-vw-add-btn:hover { color: #0066cc; }

.svb-vw-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
  color: #1d4ed8;
}
.svb-vw-icon { font-size: 0.75rem; }
.svb-vw-edit-btn {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0 4px;
  text-decoration: underline;
}
.svb-vw-edit-btn:hover { color: #0066cc; }
.svb-vw-clear-btn {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.svb-vw-clear-btn:hover { color: #ef4444; }

.svb-vw-editor {
  display: none;
  padding: 0.6rem 1rem;
  background: #eff6ff;
  border-top: 1px solid #bfdbfe;
}
.svb-card--vw-open .svb-vw-editor { display: block; }

.svb-vw-logic-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.4rem;
}
.svb-vw-logic-sel {
  font-size: 0.8rem;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  background: #fff;
}
.svb-vw-cond-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}
.svb-vw-source-sel {
  width: 70px;
  font-size: 0.8rem;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 0.15rem 0.25rem;
  background: #fff;
}
.svb-vw-id {
  width: 110px;
  font-size: 0.8rem;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  background: #fff;
}
.svb-vw-op {
  font-size: 0.8rem;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 0.15rem 0.25rem;
  background: #fff;
}
.svb-vw-val {
  flex: 1;
  min-width: 80px;
  font-size: 0.8rem;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  background: #fff;
}
.svb-vw-done-btn {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  background: #fff;
  color: #1d4ed8;
  cursor: pointer;
}
.svb-vw-done-btn:hover { background: #dbeafe; }

/* ── More-opts text input ──────────────────────────────────── */
.svb-more-input {
  flex: 1;
  font-size: 0.82rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  background: #fff;
}

/* ── Shared panel styles ────────────────────────────────────── */
.svb-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.svb-panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.svb-panel-title { font-weight: 600; font-size: 0.9rem; }
.svb-panel-hint { font-size: 0.78rem; color: #6b7280; flex: 1; }
.svb-panel-add-btn { margin-left: auto; }

/* ── Parameter cards ───────────────────────────────────────── */
.svb-param-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
}
.svb-param-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}
.svb-param-row label { font-size: 0.8rem; color: #6b7280; white-space: nowrap; }
.svb-param-input {
  flex: 1;
  min-width: 80px;
  font-size: 0.82rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  background: #fff;
}
.svb-param-id { font-family: monospace; }

/* ── Chip tags (section randomize fixed) ───────────────────── */
.svb-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
}
.svb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.8rem;
  font-family: monospace;
}
.svb-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #6366f1;
  font-size: 0.95rem;
  padding: 0;
  line-height: 1;
}
.svb-chip-remove:hover { color: #dc2626; }
.svb-rf-sel {
  font-size: 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  background: #fff;
}
.svb-chips-empty { font-size: 0.8rem; color: #9ca3af; font-style: italic; }

/* ── Computed variable cards ───────────────────────────────── */
.svb-computed-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
}
.svb-computed-header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.svb-computed-expr-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.svb-computed-expr-row label { font-size: 0.8rem; color: #6b7280; padding-top: 0.2rem; white-space: nowrap; }
.svb-computed-expr {
  flex: 1;
  font-family: monospace;
  font-size: 0.82rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.25rem 0.4rem;
  resize: vertical;
}

/* ── Computed norms block ──────────────────────────────────── */
.svb-norms-block {
  margin-top: 0.4rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 0.4rem;
}
.svb-norms-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.3rem;
}
.svb-norm-input {
  width: 80px;
  font-size: 0.82rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
}
.svb-norm-source-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: #6b7280;
}
.svb-norm-source-row .svb-norm-input { flex: 1; width: auto; }

/* ── Feature A: Weight input and correct answers input ───────── */
.svb-weight-input {
  width: 60px;
  font-size: 0.8rem;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  background: #f0f9ff;
  text-align: center;
  flex-shrink: 0;
}
.svb-weight-input:focus { border-color: #0369a1; outline: none; }

.svb-correct-input {
  flex: 1;
  min-width: 120px;
  font-size: 0.8rem;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  background: #f0f9ff;
}
.svb-correct-input:focus { border-color: #0369a1; outline: none; }

/* ── Feature B: Coding select ────────────────────────────────── */
.svb-coding-select {
  font-size: 0.78rem;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
  background: #f0f9ff;
  color: #0369a1;
  flex-shrink: 0;
  cursor: pointer;
}
.svb-coding-select:focus { border-color: #0369a1; outline: none; }

/* ── Add-language modal ─────────────────────────────────────── */
#svb-lang-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#svb-lang-modal {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  width: 320px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}

/* ── Open-saved modal ───────────────────────────────────────── */
#svb-open-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#svb-open-modal {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  width: 420px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.svb-open-row:hover { background: #f0f9ff; }