/* app/config.css — CSS de COMPOSANT de « Écran 1 · Configuration » (branding + curseurs
   clients), scopée .vr-config (jumelle de create-room.css / valuerooms.css). ZÉRO hex
   littéral : couleurs via tokens --vr-* (cascade), prouvé par app/config.css.test.mjs.
   Copiée dans public-installer/ par build-installer.mjs. Tolérance documentée :
   box-shadow rgba(0,0,0,.30) (ombre neutre, pas une couleur de marque). */

.vr-config { font-family: var(--vr-font-body); color: var(--vr-on-surface); }
.vr-config-title { font-size: 16px; margin: 0 0 4px; }
.vr-config-hint { font-size: 13px; color: var(--vr-text-muted); line-height: 1.5; margin: 0 0 16px; max-width: 620px; }

.vr-config-form { display: grid; gap: 10px; max-width: 520px; }
.vr-config-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 12px; }
.vr-config-label { font-size: 13px; font-weight: 600; }
.vr-config-input {
  padding: 9px 11px; font-size: 13.5px; font-family: var(--vr-font-body);
  border: var(--vr-border-thin) solid var(--vr-border); border-radius: var(--vr-radius-control);
  background: var(--vr-surface); color: var(--vr-on-surface); outline: none;
}
.vr-config-input:focus { border-color: var(--vr-structure); }
.vr-config-input[type="color"] { padding: 2px; height: 36px; width: 64px; cursor: pointer; }

.vr-config-inputs { display: grid; gap: 6px; margin-bottom: 14px; }
.vr-config-input-head, .vr-config-input-row {
  display: grid; grid-template-columns: 1.4fr 1.6fr .8fr .8fr .8fr .8fr; gap: 8px; align-items: center;
}
.vr-config-input-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vr-text-muted); padding: 0 2px; }
.vr-config-input-row { padding: 6px 0; border-bottom: var(--vr-border-thin) solid var(--vr-border); }
.vr-config-cell { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vr-config-cell-id { font-variant-numeric: tabular-nums; font-weight: 600; }
.vr-config-cellinput {
  width: 100%; padding: 6px 8px; font-size: 13px; font-family: var(--vr-font-body);
  border: var(--vr-border-thin) solid var(--vr-border); border-radius: var(--vr-radius-control);
  background: var(--vr-surface); color: var(--vr-on-surface); outline: none;
}
.vr-config-cellinput:focus { border-color: var(--vr-structure); }

.vr-config-save {
  margin-top: 14px; padding: 10px 16px; font-size: 13.5px; font-weight: 700; font-family: var(--vr-font-body);
  color: var(--vr-on-accent); background: var(--vr-accent-action); border: none;
  border-radius: var(--vr-radius-control); cursor: pointer;
}
.vr-config-save:disabled { color: var(--vr-text-muted); background: transparent; border: var(--vr-border-thin) solid var(--vr-border); cursor: not-allowed; }
.vr-config-status { margin-top: 10px; font-size: 13px; color: var(--vr-text-muted); line-height: 1.5; }
.vr-config-status.err { color: var(--vr-accent-action); }

.vr-config-preview {
  margin-top: 20px; padding: 14px; border: var(--vr-border-thin) solid var(--vr-border);
  border-radius: var(--vr-radius-card); box-shadow: 0 16px 50px rgba(0,0,0,.30);
}