/* app/create-room.css — CSS de COMPOSANT de la surface de création (Ga, option B).
   SOURCE UNIQUE de présentation, destinée à être liée par vendeur.html ET
   installer.html (Gb/Gc) et copiée dans public-installer/ par build-installer.mjs (Gd).
   À ce stade (Ga) elle n'est liée NULLE PART.

   PRINCIPES :
   - TOUT est scopé sous la racine .vr-create (posée par mountCreateRoom sur son root).
   - Le contrôleur pose le THÈME CLAIR sur .vr-create -> var(--vr-*) y valent les
     valeurs CLAIRES (cartes blanches) quelle que soit la page hôte (vendeur a un
     :root sombre). Le thème tenant continue de cascader (accents).
   - COULEURS via tokens --vr-* UNIQUEMENT (zéro hex). Layout (px) = valeurs de la
     RÉFÉRENCE vendeur (rendu prouvé). Seule tolérance littérale : box-shadow
     rgba(0,0,0,.30) (ombre neutre, convention des pages existantes).
   - Titres et cartes via classes dédiées (.vr-create-title, .vr-create-card) pour
     battre les sélecteurs génériques des hôtes (main.zone h2 = (0,1,2)…) par
     SPÉCIFICITÉ, sans !important : .vr-create .vr-create-title = (0,2,0) > (0,1,2).
   - Cible vendeur : ombre OUI, bordure NON, colonne 380px.
   - Micro-écart assumé : la teinte « ok » des hints passe de l'ancien vert local
     vendeur (hors charte) au token de charte --vr-positive. */

/* Grille : 380px (référence vendeur) | reste ; 1 colonne en étroit. */
.vr-create{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start;}
@media(max-width:900px){.vr-create{grid-template-columns:1fr;}}

/* Cartes : blanches (token clair), ombre OUI, bordure NON (référence vendeur). */
.vr-create .vr-create-card{
  background:var(--vr-surface);color:var(--vr-on-surface);
  border-radius:14px;padding:26px 28px;box-shadow:0 16px 50px rgba(0,0,0,.30);
}

/* Titres de section : (0,2,0) -> battent main.zone h2 (0,1,2) sans !important. */
.vr-create .vr-create-title{
  font-size:14px;margin:0 0 12px;color:var(--vr-on-surface);
  text-transform:uppercase;letter-spacing:.6px;font-weight:800;
}
.vr-create .vr-create-title--gap{margin-top:22px;}

/* Champs (prospect + kit) */
.vr-create label{display:block;font-size:12.5px;font-weight:600;margin:12px 0 5px;color:var(--vr-on-surface);}
.vr-create input[type=text],.vr-create input[type=email],.vr-create input[type=number]{
  width:100%;padding:10px 12px;font-size:14px;font-family:var(--vr-font-body);
  border:1px solid var(--vr-border);border-radius:9px;outline:none;
  background:var(--vr-surface);color:var(--vr-on-surface);
}
.vr-create input:focus{border-color:var(--vr-structure);}
.vr-create input.invalid{border-color:var(--vr-accent-action);}
.vr-create .hint{font-size:11.5px;color:var(--vr-text-muted);margin-top:4px;min-height:14px;}
.vr-create .hint.ok{color:var(--vr-positive);}
.vr-create .hint.err{color:var(--vr-accent-action);}
.vr-create .field-unit{display:flex;align-items:center;gap:8px;}
.vr-create .field-unit input{flex:1;}
.vr-create .unit{font-size:12px;color:var(--vr-text-muted);white-space:nowrap;}
.vr-create .toggle-row{display:flex;align-items:center;gap:10px;margin-top:4px;}
.vr-create .toggle-row input{width:18px;height:18px;accent-color:var(--vr-accent-action);}
.vr-create .toggle-row span{font-size:13.5px;}

/* CTA + note */
.vr-create .cta{
  margin-top:22px;width:100%;padding:13px 16px;font-size:15px;font-weight:700;
  font-family:var(--vr-font-body);color:var(--vr-on-accent);background:var(--vr-accent-action);
  border:none;border-radius:10px;cursor:pointer;
}
.vr-create .cta:disabled{opacity:.45;cursor:not-allowed;}
.vr-create .cta-note{margin-top:8px;font-size:11.5px;color:var(--vr-text-muted);text-align:center;}

/* Résultat / lien partagé */
.vr-create .result{margin-top:16px;display:none;}
.vr-create .result.show{display:block;}
.vr-create .result .box{
  padding:14px 16px;border-radius:10px;border:1px solid var(--vr-border);
  font-size:13px;line-height:1.6;word-break:break-word;
}
.vr-create .result .box.ok{border-color:var(--vr-positive);}
.vr-create .result .box.err{border-color:var(--vr-accent-action);}
.vr-create .share-row{display:flex;gap:8px;margin:10px 0 4px;}
.vr-create .vr-create-url{
  flex:1;padding:10px 12px;font-size:12.5px;font-family:ui-monospace,Menlo,monospace;
  border:1px solid var(--vr-border);border-radius:9px;background:var(--vr-surface);
  color:var(--vr-on-surface);outline:none;
}
.vr-create .result .send{width:100%;margin-top:14px;}

/* Boutons « send » (envoi / nouvelle) et « mini » (vues, copier) — sur cartes blanches */
.vr-create .send{
  margin-top:12px;padding:12px 16px;font-size:14px;font-weight:700;font-family:var(--vr-font-body);
  color:var(--vr-on-accent);background:var(--vr-accent-action);border:none;border-radius:10px;cursor:pointer;
}
.vr-create .mini{
  padding:8px 12px;font-size:12.5px;font-weight:700;font-family:var(--vr-font-body);
  border-radius:8px;border:1px solid var(--vr-border);background:var(--vr-surface);
  color:var(--vr-on-surface);cursor:pointer;
}
.vr-create .mini.active{background:var(--vr-structure);color:var(--vr-on-structure);border-color:var(--vr-structure);}

/* Barre de l'aperçu + zone de montage du simulateur */
.vr-create .preview-bar{display:flex;gap:8px;align-items:center;margin-bottom:12px;}
.vr-create .preview-bar .lbl{font-size:12px;color:var(--vr-text-muted);margin-right:auto;}
.vr-create .vr-create-preview{min-height:300px;}