/* ============================================================
   creatorNext.css — peau NEUVE de l'éditeur (route /creator2)
   Toutes les classes sont préfixées .cn- pour ne JAMAIS entrer
   en collision avec creator.css / rightToolBar.css (ancien).
   L'ancien éditeur (/creator) n'utilise aucune de ces règles.
   ============================================================ */

:root {
    --cn-bg:        #262626;
    --cn-panel:     #2f2f2f;
    --cn-panel-2:   #383838;
    --cn-rail:      #3e3e3e;
    --cn-line:      #4a4a4a;
    --cn-text:      #e8e8e8;
    --cn-muted:     #9a9a9a;
    --cn-accent:    #00b1ca;
    --cn-accent-bg: rgba(0, 177, 202, 0.16);
    --cn-topbar-h:  48px;
    --cn-rail-w:    52px;
    --cn-panel-w:   320px;
}

/* ============================================================
   ISOLATION — root propre + reset qui coupe le CSS global
   (bootstrap reboot + creator.css) pour tout ce qui est DANS
   la nouvelle peau. `.cnx` remplace l'ancien #creator.
   ============================================================ */
.cnx {
    position: relative;
    height: 900px;
    background: var(--cn-bg);
    color: var(--cn-text);
    font-family: var(--sans, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    font-size: 13px;
    overflow: hidden;
}
:root { --sans: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

/* `:where()` = spécificité nulle -> annule bootstrap/reboot sur MES contrôles
   sans battre mes classes .cn-* (qui restylent juste après). `all: revert`
   ramène à l'UA (ignore les styles auteur globaux). */
.cnx :where(button, input, select, textarea, label, span, div, p, ul, li, img) {
    box-sizing: border-box;
}
.cnx :where(button, input, select, textarea) {
    all: revert;
    box-sizing: border-box;
    font-family: var(--sans);
    font-size: 13px;
    margin: 0;
    outline: none;
}
.cnx :where(select) { -webkit-appearance: none; appearance: none; }

/* ---------- Top bar ---------- */
.cn-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--cn-topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: var(--cn-panel);
    border-bottom: 1px solid var(--cn-line);
    color: var(--cn-text);
    z-index: 120;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
    font-size: 13px;
}
.cn-topbar .cn-ctx { display: flex; align-items: center; gap: 6px; }
.cn-topbar label { color: var(--cn-muted); font-size: 12px; }
.cn-topbar select {
    background: var(--cn-rail);
    color: var(--cn-text);
    border: 1px solid var(--cn-line);
    border-radius: 4px;
    height: 28px;
    padding: 0 6px;
    outline: none;
}
.cn-topbar .cn-spacer { flex: 1; }
.cn-topbar .cn-title { color: var(--cn-muted); font-size: 12px; }
.cn-zoom { display: inline-flex; align-items: center; }
.cn-zoom #zoomToolBar { position: static; background: transparent; display: inline-flex; }
.cn-zoom #zoomToolBar span { width: 28px; height: 28px; }

.cn-life { display: inline-flex; gap: 8px; }
.cn-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px;
    border-radius: 4px;
    border: 1px solid var(--cn-line);
    background: transparent;
    color: var(--cn-text);
    font-size: 12px; cursor: pointer;
}
.cn-btn:hover { background: var(--cn-panel-2); }
.cn-btn.cn-primary { background: var(--cn-accent-bg); border-color: var(--cn-accent); color: #bfeff7; }

/* ---------- Left rail ---------- */
.cn-leftrail {
    position: absolute;
    left: 0; top: var(--cn-topbar-h); bottom: 0;
    width: var(--cn-rail-w);
    background: var(--cn-rail);
    border-right: 1px solid var(--cn-line);
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    box-sizing: border-box;
}
.cn-leftrail .cn-tool {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 4px;
}
.cn-leftrail .cn-tool:hover { background: var(--cn-panel-2); }
/* Outil actif : cellule surlignée (en plus du sprite -active) -> l'état courant est évident */
.cn-leftrail .cn-tool.on { background: var(--cn-accent-bg); box-shadow: inset 0 0 0 1px var(--cn-accent); }

/* Curseur contextuel sur la carte selon l'outil actif (feedback "feel") */
.cnx-tool-MOVEMAP #map { cursor: grab; }
.cnx-tool-MOVEMAP #map:active { cursor: grabbing; }
.cnx-tool-CRAYON #map, .cnx-tool-ERASE #map, .cnx-tool-ERASESMART #map { cursor: crosshair; }
.cnx-tool-SELECTOR #map, .cnx-tool-SELECTORSMART #map { cursor: cell; }
.cnx-tool-MOVESMART #map { cursor: move; }
/* Pan universel : espace maintenu = grab quel que soit l'outil ; pendant le glissé = grabbing */
body.cnx-space-pan #map { cursor: grab !important; }
body.cnx-panning #map { cursor: grabbing !important; }

/* Commande de zoom (top bar) : −  100%  + */
.cn-zoomctl { display: inline-flex; align-items: center; gap: 2px; }
.cn-zoombtn, .cn-zoomlvl {
    height: 26px; border: 1px solid var(--cn-line); background: var(--cn-rail); color: var(--cn-text);
    cursor: pointer; font-size: 13px; line-height: 1; padding: 0 8px; border-radius: 5px;
}
.cn-zoomlvl { min-width: 48px; font-size: 12px; color: var(--cn-muted); }
.cn-zoombtn:hover, .cn-zoomlvl:hover { border-color: var(--cn-accent); color: var(--cn-accent); }
.cn-leftrail .cn-tool img { max-width: 24px; max-height: 24px; display: block; }
.cn-leftrail .cn-sep { width: 26px; height: 1px; background: var(--cn-line); margin: 6px 0; }
.cn-leftrail .cn-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; }
.cn-leftrail .cn-colorpop { position: absolute; left: var(--cn-rail-w); bottom: 8px; z-index: 130; }

/* ---------- Right content panel ---------- */
.cn-panel {
    position: absolute;
    right: 0; top: var(--cn-topbar-h);
    bottom: 0;                  /* pleine hauteur (la carte passe dessous) */
    width: var(--cn-panel-w);
    background: var(--cn-panel);
    border-left: 1px solid var(--cn-line);
    z-index: 120;
    display: flex;
    flex-direction: column;
    color: var(--cn-text);
    font-family: Roboto, sans-serif;
    overflow: hidden;
    box-sizing: border-box;
}
/* minimap déplacée en bas-GAUCHE (clear du rail) pour ne pas passer sous le panneau */
.cnx #minimap { right: auto !important; left: calc(var(--cn-rail-w) + 12px) !important; bottom: 12px !important; }
.cn-panel.cn-collapsed { width: 44px !important; }

/* Poignée de redimensionnement (bord gauche du panneau) — pur UI */
.cn-resize {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 7px;
    cursor: col-resize;
    z-index: 130;
    background: transparent;
}
.cn-resize::after {
    content: "";
    position: absolute;
    left: 2px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 46px; border-radius: 3px;
    background: var(--cn-line);
    transition: background .12s;
}
.cn-resize:hover::after { background: var(--cn-accent); }

.cn-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    font-size: 11px; color: var(--cn-muted);
    border-bottom: 1px solid var(--cn-line);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.cn-panel-head .cn-collapse {
    cursor: pointer; color: var(--cn-muted); font-size: 15px; line-height: 1;
    background: none; border: none; padding: 2px 4px;
}
.cn-panel-head .cn-collapse:hover { color: var(--cn-text); }

.cn-sections { flex: 1; overflow-y: auto; overflow-x: hidden; }

.cn-section-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px;
    cursor: pointer;
    border-top: 1px solid var(--cn-line);
    font-size: 13px;
    user-select: none;
}
.cn-section-head:hover { background: var(--cn-panel-2); }
.cn-section-head.cn-active { background: var(--cn-panel-2); color: #fff; }
.cn-section-head .cn-num {
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--cn-accent-bg); color: var(--cn-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; flex: 0 0 auto;
}
.cn-section-head .cn-lbl { flex: 1; }
.cn-section-head .cn-chev { color: var(--cn-muted); font-size: 12px; }

.cn-section-body { padding: 8px 10px 12px; background: var(--cn-bg); }

/* état plié : rail d'icônes cliquables */
.cn-railcol { display: flex; flex-direction: column; align-items: center; padding-top: 6px; gap: 4px; }
.cn-railcol .cn-railicon {
    width: 34px; height: 34px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--cn-muted); font-size: 15px;
}
.cn-railcol .cn-railicon:hover { background: var(--cn-panel-2); color: var(--cn-text); }
.cn-railcol .cn-railnum {
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--cn-accent-bg); color: var(--cn-accent);
    display: flex; align-items: center; justify-content: center; font-size: 10px;
}

/* Ajuste les composants réutilisés à la largeur du panneau */
.cn-panel .spritesheet { height: auto; max-height: 320px; }
.cn-panel #spritesheetcanvascontainer { max-width: 228px; max-height: 300px; }
.cn-panel #spritesheet-toolbar { display: flex; gap: 6px; margin: 6px 0; }
.cn-panel ._selectInput select {
    width: 100%; background: var(--cn-rail); color: var(--cn-text);
    border: 1px solid var(--cn-line); height: 30px; border-radius: 4px;
}
.cn-panel ._selectInput ._formTitle { color: var(--cn-muted); font-size: 11px; }

/* Neutralise l'habillage 2022 des sous-composants canvas réutilisés (spritesheet) */
.cnx .spritesheet { height: auto !important; max-height: 300px; }
.cnx #spritesheetcanvascontainer { max-width: 100% !important; max-height: 280px !important; border: 1px solid var(--cn-line); border-radius: 6px; background: #1e1e1e; }
.cnx #spritesheet-toolbar { display: flex; gap: 6px; margin: 8px 0; }
.cnx #spritesheet-toolbar > * { border: 1px solid var(--cn-line); border-radius: 6px; }

/* Uploader neuf (remplace UploadSpritesheet à bordure rose) */
.cn-up { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cn-line); }
.cn-up-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cn-muted); margin-bottom: 8px; }
.cn-up .cn-textf { width: 100%; height: 30px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-text); padding: 0 8px; margin-bottom: 8px; }
.cn-up-file {
    display: block; text-align: center; padding: 9px; border: 1px dashed var(--cn-line);
    border-radius: 6px; color: var(--cn-muted); font-size: 11.5px; cursor: pointer; margin-bottom: 8px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cn-up-file:hover { border-color: var(--cn-accent); color: var(--cn-text); }
.cn-up-send { width: 100%; height: 32px; border-radius: 6px; border: 1px solid var(--cn-accent); background: var(--cn-accent-bg); color: #bfeff7; cursor: pointer; font-size: 12.5px; }
.cn-up-send:hover { background: rgba(0,177,202,.24); }

/* ---------- Composants — bibliothèque partagée (visuel neuf) ---------- */
.cn-clib { color: var(--cn-text); }
.cn-clib-empty, .cn-clib-note { color: var(--cn-muted); font-size: 11px; line-height: 1.5; }
.cn-clib-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cn-line); }
.cn-cgroup { margin-bottom: 12px; }
.cn-cgroup-h {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--cn-muted); margin-bottom: 4px;
}
.cn-cgroup-n { color: var(--cn-dim, #6f6f6f); }
.cn-cnew {
    font-size: 11px; text-transform: none; letter-spacing: 0;
    padding: 3px 9px; border-radius: 5px; cursor: pointer;
    border: 1px solid var(--cn-accent); background: var(--cn-accent-bg); color: var(--cn-accent);
}
.cn-cnew:hover { background: rgba(0,177,202,.24); }
.cn-crow.cn-editable { cursor: pointer; border-radius: 5px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; }
.cn-crow.cn-editable:hover { background: var(--cn-panel-2); }
.cn-edit-hint { color: var(--cn-dim, #6f6f6f); font-size: 12px; flex: 0 0 auto; }
.cn-lock { color: var(--cn-dim, #6f6f6f); font-size: 10px; }

/* Formulaire de composant (create/edit) */
.cn-cedit-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 10px; border-bottom: 1px solid var(--cn-line); margin-bottom: 10px; }
.cn-cedit-head b { font-size: 13px; }
.cn-cform { display: flex; flex-direction: column; }
.cn-flab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cn-muted); margin: 8px 0 4px; }
.cn-textf.full, .cn-selfull { width: 100%; height: 30px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-text); padding: 0 8px; }
.cn-textf.full:focus, .cn-selfull:focus { outline: none; border-color: var(--cn-accent); }
.cn-textf.full:disabled { color: var(--cn-muted); }
.cn-hint { font-size: 10px; color: var(--cn-dim, #6f6f6f); margin-top: 5px; line-height: 1.4; }
.cn-refblock { margin-top: 10px; }
.cn-reflist { max-height: 140px; overflow-y: auto; border: 1px solid var(--cn-line); border-radius: 6px; padding: 4px; margin-top: 4px; }
.cn-refitem { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; font-size: 12px; color: var(--cn-text); cursor: pointer; }
.cn-refitem:hover { background: var(--cn-panel-2); }
.cn-refitem.on { color: var(--cn-accent); }
.cn-refitem input { width: 14px; height: 14px; flex: 0 0 auto; }
.cn-cedit-foot { display: flex; gap: 8px; margin-top: 14px; }
.cn-btn2 { flex: 1; height: 34px; border-radius: 7px; border: 1px solid var(--cn-line); background: transparent; color: var(--cn-text); cursor: pointer; font-size: 12.5px; }
.cn-btn2:hover { background: var(--cn-panel-2); }
.cn-btn2.primary { background: var(--cn-accent-bg); border-color: var(--cn-accent); color: #bfeff7; }

/* ---------- Variables (nodes) editor ---------- */
.cn-vars-hint { font-size: 10.5px; color: var(--cn-muted); line-height: 1.5; margin-bottom: 10px; }
.cn-vars-hint code { color: var(--cn-accent); background: var(--cn-rail); padding: 0 3px; border-radius: 3px; }
.cn-vars-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.cn-vars-row .cn-textf { height: 30px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-text); padding: 0 8px; }
.cn-vars-row .cn-textf:first-child { flex: 1.4; }
.cn-vars-row .cn-textf:nth-child(2) { flex: 1; }
.cn-vars-row .cn-textf:focus { outline: none; border-color: var(--cn-accent); }
.cn-iconbtn { height: 30px; width: 30px; flex: 0 0 auto; border: 1px solid var(--cn-line); background: transparent; color: var(--cn-muted); border-radius: 6px; cursor: pointer; }
.cn-iconbtn:hover { background: var(--cn-panel-2); color: var(--cn-text); }
.cn-vars-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* Brouillard (FogEditor) : une case a cocher et une ligne curseur+valeur. Rien de specifique a
   l ecran — d autres panneaux en auront besoin, d ou des noms generiques. */
.cn-check { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--cn-text); margin: 8px 0; cursor: pointer; }
.cn-check input { accent-color: var(--cn-accent); cursor: pointer; }
.cn-check input:disabled { cursor: not-allowed; opacity: .5; }
.cn-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.cn-row input[type=range] { flex: 1; accent-color: var(--cn-accent); }
.cn-row input[type=color] { width: 44px; height: 28px; padding: 0; background: none; border: 1px solid var(--cn-line); border-radius: 6px; cursor: pointer; }
.cn-row code { color: var(--cn-accent); font-size: 11px; }

/* Selection ordonnee d un sujet/cible (TriggerEditor.renderSelection). */
.cn-sel-ord { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--cn-line); }
.cn-sel-ord .cn-row { margin-bottom: 4px; }
.cn-sel-ord select { background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-text); height: 26px; font-size: 11px; }
.cn-vars-ok { color: var(--cn-accent); font-size: 11px; }

/* ---------- Toggle « calque runtime » ---------- */
.cn-rtlayer.on {
    background: #5a2b2b;
    border-color: #d64545;
    color: #ffd9d9;
}
.cn-rtlayer.on:hover { background: #6a3333; }
.cn-btn2:disabled { opacity: .5; cursor: default; }

/* chips de références (traits/forces/states d'un behaviour) — remplace les cases à cocher */
.cn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cn-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; padding: 3px 6px 3px 9px; border-radius: 12px;
    background: var(--cn-panel-2); border: 1px solid var(--cn-line); color: var(--cn-text);
}
.cn-chip.admin { border-color: #b06a6a; background: rgba(199,125,125,.14); }
.cn-chip-tag {
    font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
    color: #e0b0b0; border: 1px solid #b06a6a; border-radius: 4px; padding: 0 4px;
}
.cn-chip button { background: none; border: none; color: var(--cn-muted); cursor: pointer; font-size: 11px; padding: 0; line-height: 1; }
.cn-chip button:hover { color: #e24b4a; }
/* tag "moteur" dans la liste des composants */
.cn-lock {
    font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
    color: #e0b0b0; border: 1px solid #b06a6a; border-radius: 4px; padding: 1px 4px; margin-left: 6px;
}
.cn-lock.cn-warn { color: #e6c07a; border-color: #a9822f; }
.cn-crow {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 0; border-top: 1px solid var(--cn-line);
}
.cn-cgroup .cn-crow:first-of-type { border-top: none; }
.cn-ci {
    width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: #fff;
}
.cn-ci.beh { background: #8b83e6; }
.cn-ci.trg { background: #c77dbb; }
.cn-ci.frc { background: #6a9bd8; }
.cn-ci.anm { background: #5cb0a0; }
.cn-ci-anim { width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto; image-rendering: pixelated; }
.cn-ci.lsn { background: #b7955a; }
.cn-ci.trt { background: #c77d7d; }
.cn-ci.stt { background: #7a9e6b; }
.cn-cname {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.cn-cn-name { font-size: 12.5px; color: var(--cn-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-cn-desc { font-size: 10px; color: var(--cn-dim, #6f6f6f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-textarea { width: 100%; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-text); padding: 6px 8px; font-family: inherit; font-size: 12.5px; resize: vertical; box-sizing: border-box; }
.cn-textarea:focus { outline: none; border-color: var(--cn-accent); }

/* ---------- Éditeur de trigger ---------- */
.cn-trg-line { font-size: 12px; color: var(--cn-text); padding: 4px 8px; background: var(--cn-bg); border: 1px solid var(--cn-line); border-radius: 6px; margin-bottom: 4px; }
.cn-trg-listen { border: 1px solid var(--cn-line); border-radius: 8px; padding: 8px; margin-bottom: 6px; background: var(--cn-bg); }
.cn-trg-listen-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cn-trg-listen-h select { flex: 1; height: 28px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 5px; color: var(--cn-text); padding: 0 6px; }
.cn-trg-listen-h .cn-blink-x { flex: 0 0 auto; }
.cn-trg-action { border: 1px solid var(--cn-line); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.cn-trg-action-h { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--cn-panel-2); }
.cn-trg-aname { flex: 1; font-size: 12.5px; color: var(--cn-accent); font-weight: 500; }
.cn-trg-params { padding: 8px 9px; }
.cn-trg-param { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cn-trg-param:last-child { margin-bottom: 0; }
.cn-trg-pname { flex: 0 0 92px; font-size: 11px; color: var(--cn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-trg-param .cn-textf.full { flex: 1; min-width: 0; }
.cn-trg-param .cn-blink-x { flex: 0 0 auto; }

/* un acteur d'un déclencheur (self / candidate…) : ids + conditions */
.cn-trg-actor { border: 1px solid var(--cn-line); border-radius: 6px; padding: 7px 8px; margin-top: 8px; }
.cn-trg-actor-h { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cn-trg-actor-h .cn-trg-pname { flex: 1; color: var(--cn-accent); text-transform: uppercase; letter-spacing: .04em; }

/* conditions (getters) sur un sujet/cible */
.cn-trg-getters { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--cn-line); }
.cn-trg-getter { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cn-trg-getter .cn-textf { flex: 1; min-width: 0; }
.cn-trg-getter select { flex: 0 0 52px; }
.cn-btn-sm { height: 26px; padding: 0 8px; font-size: 11px; }

/* ---------- Éditeur d'animation ---------- */
.cn-anim-preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 10px 0; }
.cn-anim-preview {
    width: 104px; height: 104px; display: flex; align-items: center; justify-content: center;
    background: #1e1e1e; border: 1px solid var(--cn-line); border-radius: 10px; overflow: hidden;
    background-image: linear-gradient(45deg,#232323 25%,transparent 25%,transparent 75%,#232323 75%),linear-gradient(45deg,#232323 25%,transparent 25%,transparent 75%,#232323 75%);
    background-size: 16px 16px; background-position: 0 0, 8px 8px;
}
.cn-anim-preview img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.cn-anim-flip { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.cn-mini-toggle { height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--cn-line); background: var(--cn-rail); color: var(--cn-muted); cursor: pointer; font-size: 12px; }
.cn-mini-toggle.on { background: var(--cn-accent-bg); border-color: var(--cn-accent); color: var(--cn-accent); }
.cn-anim-frames { display: flex; flex-direction: column; gap: 5px; max-height: 200px; overflow-y: auto; margin: 4px 0; }
.cn-anim-frame { display: flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid var(--cn-line); border-radius: 7px; background: var(--cn-bg); }
.cn-anim-idx { width: 18px; text-align: center; color: var(--cn-dim, #6f6f6f); font-size: 11px; flex: none; }
.cn-anim-thumb { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; background: #1e1e1e; border: 1px solid var(--cn-line); border-radius: 5px; overflow: hidden; }
.cn-anim-thumb img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.cn-anim-tid { font-size: 9px; color: var(--cn-muted); padding: 2px; text-align: center; word-break: break-all; }
.cn-anim-frame .cn-numf { width: 62px; }
.cn-anim-btns { display: flex; gap: 2px; margin-left: auto; }
.cn-anim-btns button { width: 22px; height: 22px; border: 1px solid var(--cn-line); border-radius: 4px; background: transparent; color: var(--cn-muted); cursor: pointer; font-size: 10px; line-height: 1; padding: 0; }
.cn-anim-btns button:hover { color: var(--cn-text); border-color: var(--cn-muted); }
.cn-anim-tiles { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 6px; max-height: 220px; overflow-y: auto; margin-top: 6px; padding: 4px; border: 1px solid var(--cn-line); border-radius: 7px; background: #1e1e1e; }
.cn-anim-tile { width: 44px; height: 44px; padding: 2px; border: 1px solid var(--cn-line); border-radius: 5px; background: #262626; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cn-anim-tile:hover { border-color: var(--cn-accent); }
.cn-anim-tile img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }

/* Directional animation toggle + grid */
.cn-anim-dir-toggle { margin: 10px 0 6px; }
.cn-anim-dir-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
    margin: 8px 0; padding: 6px; border: 1px solid var(--cn-line); border-radius: 8px; background: #1e1e1e;
}
.cn-anim-dir-slot {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px; border: 1px solid var(--cn-line); border-radius: 6px;
    background: var(--cn-bg); cursor: pointer; color: var(--cn-muted); font-size: 10px;
    transition: border-color .15s, background .15s;
}
.cn-anim-dir-slot:hover { border-color: var(--cn-muted); }
.cn-anim-dir-slot.active { border-color: var(--cn-accent); background: var(--cn-accent-bg); color: var(--cn-text); }
.cn-anim-dir-slot.filled .cn-anim-dir-icon { color: var(--cn-accent); }
.cn-anim-dir-icon { font-size: 16px; line-height: 1; }
.cn-anim-dir-label { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cn-anim-dir-count { font-size: 9px; color: var(--cn-accent); font-weight: 600; }

.cn-ub {
    font-size: 11px; color: var(--cn-accent); background: var(--cn-accent-bg);
    padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex: 0 0 auto;
}
.cn-ub.zero { color: var(--cn-muted); background: transparent; }
.cn-ub.loading { color: var(--cn-muted); background: transparent; }
.cn-ub.err { color: #d98a8a; background: transparent; }
.cn-ub.trg { color: #d69ac8; background: rgba(199,125,187,.14); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.cn-trg-events { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; flex: 0 1 auto; min-width: 0; }

/* ---------- Smart Objects : liste + Inspector (visuel neuf) ---------- */
.cn-empty { color: var(--cn-muted); font-size: 11px; line-height: 1.5; padding: 6px 0; }

/* cartes SO à TAILLE FIXE : élargir le panneau montre PLUS de cartes (+ de colonnes),
   il ne grossit pas les cartes. */
.cn-sogrid { display: grid; grid-template-columns: repeat(auto-fill, 92px); gap: 8px; justify-content: start; }
.cn-socard {
    position: relative; width: 92px; height: 92px; border: 1px solid var(--cn-line); border-radius: 8px;
    background: #242424; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 6px; cursor: pointer;
}
.cn-socard:hover { border-color: var(--cn-accent); }
.cn-socard-new { border-style: dashed; opacity: 0.7; }
.cn-socard-new:hover { opacity: 1; }
.cn-socard-plus { font-size: 28px; color: var(--cn-muted); font-weight: 300; line-height: 1; }
.cn-trait-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cn-soav { width: 30px; height: 30px; border-radius: 7px; background: #8b83e6; color: #241f4d;
    display: flex; align-items: center; justify-content: center; font-weight: 600; }
.cn-soav-tile { width: 40px; height: 40px; image-rendering: pixelated; border-radius: 4px; }
.cn-soname { font-size: 11px; color: var(--cn-text); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-soplace {
    position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 5px;
    border: 1px solid var(--cn-line); background: var(--cn-panel); color: var(--cn-muted); cursor: pointer; line-height: 1;
}
.cn-soplace:hover { color: var(--cn-accent); border-color: var(--cn-accent); }

/* Placement d'instances : barre d'outils de la liste + bandeau "mode armé" */
.cn-solist-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.cn-solist-hint { flex: 1; font-size: 10px; color: var(--cn-muted); }
.cn-soerase {
    height: 24px; padding: 0 10px; border-radius: 6px; font-size: 11px; cursor: pointer;
    border: 1px solid var(--cn-line); background: var(--cn-panel); color: var(--cn-muted);
}
.cn-soerase:hover { color: #e6837f; border-color: #e6837f; }
.cn-armed {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 8px;
    border-radius: 7px; border: 1px solid var(--cn-accent); background: var(--cn-accent-bg);
}
.cn-armed.erase { border-color: #e6837f; background: rgba(230, 131, 127, 0.12); }
.cn-armed-l { flex: 1; font-size: 11px; color: var(--cn-text); }
.cn-armed-x {
    height: 22px; padding: 0 9px; border-radius: 5px; font-size: 10px; cursor: pointer;
    border: 1px solid var(--cn-line); background: var(--cn-panel); color: var(--cn-text);
}

/* Boutons de suppression (creator2) */
.cn-del-hint {
    background: none; border: none; color: var(--cn-muted); cursor: pointer; font-size: 12px;
    padding: 0 2px; opacity: 0.55; line-height: 1;
}
.cn-del-hint:hover { opacity: 1; color: #e6837f; }
.cn-mini-del {
    height: 26px; padding: 0 9px; border-radius: 6px; cursor: pointer; font-size: 12px;
    border: 1px solid var(--cn-line); background: var(--cn-panel); color: var(--cn-muted);
}
.cn-mini-del:hover { color: #e6837f; border-color: #e6837f; }

/* Bindings sprite -> etat (Inspector) */
.cn-addbinding { display: flex; gap: 6px; margin-top: 6px; }
.cn-addbinding .cn-attach { flex: 1; margin-top: 0; }

/* Proximites + slots (Inspector) */
.cn-ci.prx { background: #3b6ea5; }
.cn-ci.slt { background: #7a5ea5; }
.cn-proxcard { border: 1px solid var(--cn-line); border-radius: 7px; padding: 7px; margin-bottom: 7px; background: #242424; }
.cn-proxrow { display: flex; align-items: center; gap: 6px; }
.cn-proxrow .cn-textf { flex: 1; }
.cn-proxgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 6px 0; }
.cn-proxfield { display: flex; flex-direction: column; font-size: 10px; color: var(--cn-muted); gap: 2px; }

/* Editeur HUD / uiElement */
.cn-ci.hud { background: #a5713b; }
.cn-uigroup { margin: 12px 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--cn-muted); border-top: 1px solid var(--cn-line); padding-top: 8px; }
.cn-uifield { display: flex; flex-direction: column; }

/* Mode débutant — recettes / assistants */
.cn-recipe-intro { font-size: 11px; color: var(--cn-muted); margin-bottom: 8px; line-height: 1.35; }
.cn-recipe-ok { font-size: 12px; color: #6cc070; background: rgba(108,192,112,.12); border: 1px solid #3f7a43; border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; }

/* Recettes — session 0 (2026-09-03) : filtre par categorie, creation d un objet dans le
   formulaire, et le rappel de POSE (un aspect sans instance n apparait nulle part). */
.cn-rec-filtres { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.cn-rec-f { background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 999px; color: var(--cn-muted); font-size: 10.5px; padding: 3px 9px; cursor: pointer; }
.cn-rec-f:hover { color: var(--cn-text); }
.cn-rec-f.on { background: var(--cn-accent); border-color: var(--cn-accent); color: #0c0d10; }
.cn-rec-neuf { margin: 6px 0 2px; padding: 8px; background: var(--cn-rail); border: 1px dashed var(--cn-line); border-radius: 6px; }
.cn-rec-liste { margin: 6px 0 0; padding-left: 18px; }
.cn-rec-liste li { font-size: 10.5px; color: var(--cn-muted); line-height: 1.6; }
.cn-rec-liste code { color: var(--cn-accent); }
.cn-rec-poser { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(108,192,112,.3); color: var(--cn-text); font-size: 11px; line-height: 1.45; }
.cn-rec-poser button { margin-top: 6px; }
.cn-recipe-err { font-size: 12px; color: #e6837f; background: rgba(230,131,127,.12); border: 1px solid #a5433f; border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; }
.cn-recipe { border: 1px solid var(--cn-line); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.cn-recipe.open { border-color: var(--cn-accent); }
.cn-recipe-h { display: flex; align-items: center; gap: 9px; padding: 9px; cursor: pointer; background: #242424; }
.cn-recipe-h:hover { background: var(--cn-panel-2); }
.cn-recipe-ic { font-size: 20px; flex: none; }
.cn-recipe-t { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cn-recipe-t b { font-size: 12px; }
.cn-recipe-t small { font-size: 10px; color: var(--cn-muted); line-height: 1.3; }
.cn-recipe-chev { color: var(--cn-muted); flex: none; }
.cn-recipe-b { padding: 9px; border-top: 1px solid var(--cn-line); display: flex; flex-direction: column; gap: 8px; }
.cn-recipe-b .cn-btn2.primary { align-self: flex-start; }

.cn-insp { display: flex; flex-direction: column; }
.cn-insp-head { display: flex; align-items: center; gap: 9px; padding: 4px 0 10px; border-bottom: 1px solid var(--cn-line); }
.cn-back { background: none; border: none; color: var(--cn-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.cn-back:hover { color: var(--cn-text); }
.cn-av { width: 28px; height: 28px; border-radius: 7px; background: #8b83e6; color: #241f4d; display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.cn-who { flex: 1; overflow: hidden; }
.cn-who b { display: block; font-size: 13px; }
.cn-who small { color: var(--cn-dim, #6f6f6f); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cn-mini-place { height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--cn-line); background: var(--cn-accent-bg); color: var(--cn-accent); cursor: pointer; font-size: 11px; }

.cn-comps { padding-top: 10px; }
.cn-comp { border: 1px solid var(--cn-line); border-radius: 9px; margin-bottom: 8px; overflow: hidden; }
.cn-comp.open { border-color: rgba(24,182,207,.5); }
.cn-comp-h { display: flex; align-items: center; gap: 9px; padding: 9px 10px; color: var(--cn-muted); }
.cn-comp-h .cn-cn { flex: 1; color: var(--cn-text); font-size: 12.5px; }
.cn-comp-h .cn-meta { font-size: 11px; color: var(--cn-dim, #6f6f6f); }
.cn-comp-b { padding: 4px 10px 10px; }

.cn-kv { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--cn-line); }
.cn-comp-b .cn-kv:first-child { border-top: none; }
.cn-kname { flex: 1; font-size: 12px; color: var(--cn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-numf { width: 74px; height: 28px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 5px; color: var(--cn-text); padding: 0 7px; font-family: inherit; text-align: right; }
.cn-numf.sm { width: 100%; text-align: center; }
.cn-textf { flex: 1; min-width: 0; height: 28px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 5px; color: var(--cn-text); padding: 0 7px; font-family: inherit; }
.cn-numf:focus, .cn-textf:focus { outline: none; border-color: var(--cn-accent); }

/* Sélecteur de collisions en CARRÉ (remplace les 4 toggles) — rouge = actif, comme la viz canvas */
.cn-collwrap { padding: 8px 0 12px; border-top: 1px solid var(--cn-line); }
.cn-comp-b .cn-collwrap:first-child { border-top: none; }
.cn-cb-title { font-size: 11px; color: var(--cn-muted); margin-bottom: 10px; }
.cn-cb-square { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.cn-cb-center { position: absolute; inset: 20px; border: 1px dashed var(--cn-line); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--cn-dim, #6f6f6f); font-size: 10px; }
.cn-cb-edge { position: absolute; background: var(--cn-line); border: none; border-radius: 3px; cursor: pointer; padding: 0; transition: background .12s; }
.cn-cb-edge:hover:not(.absent):not(.on) { background: var(--cn-muted); }
.cn-cb-edge.on { background: #e24b4a; }
.cn-cb-edge.absent { opacity: .28; cursor: default; }
.cn-cb-edge.top { top: 0; left: 18px; right: 18px; height: 14px; }
.cn-cb-edge.bottom { bottom: 0; left: 18px; right: 18px; height: 14px; }
.cn-cb-edge.left { left: 0; top: 18px; bottom: 18px; width: 14px; }
.cn-cb-edge.right { right: 0; top: 18px; bottom: 18px; width: 14px; }

.cn-toggle { width: 40px; height: 22px; border-radius: 12px; border: 1px solid var(--cn-line); background: var(--cn-rail); position: relative; cursor: pointer; padding: 0; flex: none; }
.cn-toggle .cn-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--cn-muted); transition: left .12s, background .12s; }
.cn-toggle.on { background: var(--cn-accent-bg); border-color: var(--cn-accent); }
.cn-toggle.on .cn-knob { left: 20px; background: var(--cn-accent); }

/* Pavé directionnel (sens de la force) */
.cn-dirblock { margin: 6px 0 10px; }
.cn-dirwrap { display: flex; align-items: center; gap: 10px; }
.cn-dir-legend { font-size: 10px; color: var(--cn-dim, #6f6f6f); margin-top: 6px; line-height: 1.4; }
.cn-dirpad { display: grid; grid-template-columns: repeat(3, 22px); grid-template-rows: repeat(3, 22px); gap: 3px; }
.cn-dircell {
    width: 22px; height: 22px; border: 1px solid var(--cn-line); border-radius: 4px;
    background: var(--cn-rail); color: var(--cn-muted); cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.cn-dircell:hover { border-color: var(--cn-muted); color: var(--cn-text); }
.cn-dircell.on { background: var(--cn-accent-bg); border-color: var(--cn-accent); color: var(--cn-accent); }
.cn-dircell.center { color: var(--cn-dim, #6f6f6f); font-size: 10px; }

.cn-forcecard { border: 1px solid var(--cn-line); border-radius: 7px; padding: 8px; margin-bottom: 8px; }
.cn-fhead { font-size: 12px; color: var(--cn-text); margin-bottom: 6px; }
.cn-fhead span { color: var(--cn-dim, #6f6f6f); font-size: 10px; margin-left: 4px; }
.cn-fgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-items: center; margin-bottom: 5px; }
.cn-fgrid.head span { color: var(--cn-dim, #6f6f6f); font-size: 10px; text-align: center; }
.cn-flbl { font-size: 11px; color: var(--cn-muted); }

.cn-blink { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cn-text); padding: 6px 0; border-top: 1px solid var(--cn-line); }
.cn-comp-b .cn-blink:first-child { border-top: none; }
.cn-blink-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-blink-x { flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid var(--cn-line); border-radius: 5px; background: transparent; color: var(--cn-muted); cursor: pointer; font-size: 11px; line-height: 1; }
.cn-blink-x:hover { color: #e24b4a; border-color: #e24b4a; }
.cn-attach { width: 100%; height: 30px; margin-top: 8px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-accent); padding: 0 8px; cursor: pointer; }
.cn-attach-note { font-size: 10px; color: var(--cn-dim, #6f6f6f); margin-top: 8px; line-height: 1.4; }

.cn-insp-foot { padding-top: 10px; }
.cn-save { width: 100%; height: 34px; border-radius: 7px; border: 1px solid var(--cn-line); background: var(--cn-panel2); color: var(--cn-muted); cursor: default; font-size: 12.5px; }
.cn-save.dirty { background: var(--cn-accent-bg); border-color: var(--cn-accent); color: #bfeff7; cursor: pointer; }

/* ---------- Worldgen Editor ---------- */
.cn-wg { padding: 0 4px; }
.cn-wg-hint { font-size: 10.5px; color: var(--cn-muted); line-height: 1.5; margin-bottom: 10px; }
.cn-wg-hint code { color: var(--cn-accent); background: var(--cn-rail); padding: 0 3px; border-radius: 3px; }

.cn-wg-section { margin-bottom: 14px; }
.cn-wg-subtitle { font-size: 11px; color: var(--cn-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.cn-wg-add { height: 22px !important; padding: 0 8px !important; font-size: 10px !important; }

.cn-wg-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.cn-wg-row label { font-size: 11px; color: var(--cn-muted); min-width: 70px; flex: 0 0 auto; }
.cn-wg-row .cn-textf { flex: 1; height: 28px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-text); padding: 0 8px; font-size: 12px; }
.cn-wg-row .cn-textf:focus { outline: none; border-color: var(--cn-accent); }
.cn-wg-row select { flex: 1; height: 28px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-text); padding: 0 6px; font-size: 12px; }
.cn-wg-row select:focus { outline: none; border-color: var(--cn-accent); }
.cn-wg-row input[type="color"] { width: 28px; height: 28px; border: 1px solid var(--cn-line); border-radius: 4px; padding: 2px; background: var(--cn-rail); cursor: pointer; }

.cn-wg-param { margin-bottom: 6px; }
.cn-wg-param label { font-size: 11px; color: var(--cn-muted); display: block; margin-bottom: 2px; }
.cn-wg-val { color: var(--cn-accent); font-weight: 600; }
.cn-wg-param input[type="range"] { width: 100%; height: 18px; accent-color: var(--cn-accent); }

.cn-wg-chk { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cn-text); margin-bottom: 6px; cursor: pointer; }
.cn-wg-chk input[type="checkbox"] { accent-color: var(--cn-accent); }
.cn-wg-indent { padding-left: 18px; margin-bottom: 6px; }

/* Feature card */
.cn-wg-feat { background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.cn-wg-feat-head { display: flex; gap: 4px; align-items: center; margin-bottom: 6px; }
.cn-wg-feat-head input[type="color"] { width: 26px; height: 26px; border: 1px solid var(--cn-line); border-radius: 4px; padding: 2px; background: transparent; cursor: pointer; flex: 0 0 auto; }
.cn-wg-feat-head .cn-textf { flex: 1; height: 26px; background: var(--cn-panel); border: 1px solid var(--cn-line); border-radius: 4px; color: var(--cn-text); padding: 0 6px; font-size: 11px; min-width: 0; }
.cn-wg-feat-head select { height: 26px; background: var(--cn-panel); border: 1px solid var(--cn-line); border-radius: 4px; color: var(--cn-text); padding: 0 4px; font-size: 11px; flex: 0 0 auto; }
.cn-wg-feat-head .cn-iconbtn { width: 26px; height: 26px; flex: 0 0 auto; }
.cn-wg-feat-mask { margin-bottom: 6px; }
.cn-wg-feat-mask select { width: 100%; height: 26px; background: var(--cn-panel); border: 1px solid var(--cn-line); border-radius: 4px; color: var(--cn-text); padding: 0 6px; font-size: 11px; }
.cn-wg-fsliders { padding-top: 2px; }

/* Actions */
.cn-wg-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cn-line); }

/* Confirm modal */
.cn-wg-confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.cn-wg-confirm { background: var(--cn-panel); border: 1px solid var(--cn-line); border-radius: 10px; padding: 24px; max-width: 420px; width: 90vw; color: var(--cn-text); }
.cn-wg-confirm-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.cn-wg-confirm-desc { font-size: 12px; color: var(--cn-muted); line-height: 1.5; margin-bottom: 16px; }
.cn-wg-confirm-desc code { color: var(--cn-accent); background: var(--cn-rail); padding: 0 3px; border-radius: 3px; }
.cn-wg-confirm-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cn-wg-opt { display: flex; align-items: flex-start; gap: 12px; text-align: left; height: auto !important; padding: 12px !important; border-radius: 8px !important; }
.cn-wg-opt-icon { font-size: 20px; flex: 0 0 auto; margin-top: 2px; }
.cn-wg-opt-text { display: flex; flex-direction: column; gap: 2px; }
.cn-wg-opt-text strong { font-size: 13px; color: var(--cn-text); }
.cn-wg-opt-text small { font-size: 10.5px; color: var(--cn-muted); line-height: 1.4; }
.cn-wg-danger { border-color: #c04040 !important; }
.cn-wg-danger:hover { background: rgba(192, 64, 64, 0.15) !important; }

.cn-wg-bindings { display: flex; flex-direction: column; gap: 5px; }
.cn-wg-bind-row { display: flex; align-items: center; gap: 8px; }
.cn-wg-bind-label { font-size: 11px; color: var(--cn-muted); min-width: 90px; flex: 0 0 auto; }
.cn-wg-bind-select { flex: 1; height: 28px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-text); padding: 0 6px; font-size: 12px; }
.cn-wg-bind-select:focus { outline: none; border-color: var(--cn-accent); }
.cn-wg-bind-val { font-size: 11px; color: var(--cn-muted); font-style: italic; }
.cn-wg-bind-multi { flex-direction: column; align-items: stretch; gap: 4px; background: var(--cn-rail); border-radius: 6px; padding: 6px; }
.cn-wg-bind-head { display: flex; align-items: center; gap: 8px; }
.cn-wg-bind-entry { display: flex; align-items: center; gap: 6px; padding-left: 8px; }
.cn-wg-weight { width: 52px !important; min-width: 52px; flex: 0 0 auto; text-align: center; }
.cn-wg-pct { font-size: 10px; color: var(--cn-muted); min-width: 30px; text-align: right; }

/* --- Premiers pas (CreatorWelcome) ---------------------------------------
 * Affiche UNE fois, au premier passage dans l'editeur. Cf CreatorWelcome.js.
 * ------------------------------------------------------------------------ */

.cn-welcome-fond {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
    box-sizing: border-box;
}

.cn-welcome {
    background: #1B1B1B;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 30px;
    color: #E8E8E8;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.cn-welcome h2 {
    font-size: 21px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 8px 0;
}

.cn-welcome-intro {
    font-size: 14px;
    line-height: 1.6;
    color: #9A9A9A;
    margin: 0 0 22px 0;
}

.cn-welcome-liste {
    list-style: none;
    counter-reset: geste;
    padding: 0;
    margin: 0 0 24px 0;
}

.cn-welcome-liste li {
    counter-increment: geste;
    position: relative;
    padding: 0 0 16px 34px;
    line-height: 1.55;
}

.cn-welcome-liste li::before {
    content: counter(geste);
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2F2F2F;
    color: #55FFA4;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-welcome-liste b {
    display: block;
    color: #FFFFFF;
    font-size: 14px;
    margin-bottom: 2px;
}

.cn-welcome-liste span {
    display: block;
    font-size: 13px;
    color: #9A9A9A;
}

.cn-welcome-ok {
    padding: 11px 24px;
    background: #55FFA4;
    color: #0F0F0F;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

.cn-welcome-ok:hover { background: #7BFFBC; }

/* ============================================================
   Champ d'expression assisté (ExpressionField / ConditionRow)
   — un champ de texte qui SAIT ce que le jeu contient : il
   insère la tuyauterie, vérifie les clés, et montre le résultat.
   ============================================================ */
.cn-xf { flex: 1; min-width: 0; }
.cn-xf.plein { width: 100%; }
.cn-xf-row { display: flex; align-items: center; gap: 4px; }
.cn-xf-row .cn-textf.full { flex: 1; min-width: 0; }

/* pastille d'état : reconnu / à vérifier / cassé */
.cn-xf-etat { flex: 0 0 auto; width: 16px; text-align: center; font-size: 12px; line-height: 1; }
.cn-xf-etat.ok   { color: var(--cn-accent); }
.cn-xf-etat.warn { color: #e0a33e; }
.cn-xf-etat.err  { color: #e06c6c; }

.cn-xf-fx {
    flex: 0 0 auto; height: 30px; min-width: 30px; padding: 0 7px;
    border: 1px solid var(--cn-line); background: var(--cn-rail); color: var(--cn-muted);
    border-radius: 6px; cursor: pointer; font-style: italic; font-size: 12.5px;
}
.cn-xf-fx:hover { color: var(--cn-text); background: var(--cn-panel-2); }
.cn-xf-fx.on { background: var(--cn-accent-bg); border-color: var(--cn-accent); color: var(--cn-accent); }

/* panneau de l'assistant */
.cn-xf-pop {
    margin-top: 5px; padding: 7px; border: 1px solid var(--cn-line); border-radius: 8px;
    background: var(--cn-panel-2);
}
.cn-xf-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.cn-xf-tab {
    flex: 1; height: 24px; border-radius: 5px; border: 1px solid var(--cn-line);
    background: transparent; color: var(--cn-muted); cursor: pointer; font-size: 11px;
}
.cn-xf-tab.on { background: var(--cn-accent-bg); border-color: var(--cn-accent); color: var(--cn-accent); }
.cn-xf-acteur { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.cn-xf-pill {
    height: 22px; padding: 0 8px; border-radius: 11px; border: 1px solid var(--cn-line);
    background: transparent; color: var(--cn-muted); cursor: pointer; font-size: 11px;
}
.cn-xf-pill.on { background: var(--cn-accent-bg); border-color: var(--cn-accent); color: var(--cn-accent); }

.cn-xf-liste .cn-textf.full { margin-bottom: 5px; }
.cn-xf-items { max-height: 208px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cn-xf-item {
    display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left;
    padding: 4px 6px; border: 1px solid transparent; border-radius: 5px;
    background: var(--cn-bg); color: var(--cn-text); cursor: pointer; width: 100%;
}
.cn-xf-item:hover { border-color: var(--cn-accent); background: var(--cn-rail); }
.cn-xf-item-v { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cn-xf-item-m { font-size: 10px; color: var(--cn-muted); }
.cn-xf-badge { color: var(--cn-accent); margin-right: 4px; }

/* messages de diagnostic */
.cn-xf-msg {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 4px; padding: 4px 6px; border-radius: 5px;
    font-size: 10.5px; line-height: 1.45;
}
.cn-xf-msg.err  { background: rgba(224, 108, 108, .12); color: #f0b3b3; }
.cn-xf-msg.warn { background: rgba(224, 163, 62, .12);  color: #e8c48a; }
.cn-xf-msg.info { background: var(--cn-panel-2); color: var(--cn-muted); }
.cn-xf-msg code { background: rgba(0,0,0,.25); padding: 0 3px; border-radius: 3px; }
.cn-xf-fix {
    flex: 0 0 auto; height: 18px; padding: 0 6px; border-radius: 4px; cursor: pointer;
    border: 1px solid currentColor; background: transparent; color: inherit; font-size: 10px;
}
.cn-xf-fix:hover { background: rgba(255,255,255,.08); }

.cn-xf-apercu { margin-top: 4px; font-size: 11px; color: var(--cn-accent); }
.cn-xf-apercu .cn-hint { text-transform: none; }

/* une condition (getter) : trait/opérateur sur une ligne, valeur comparée en dessous */
.cn-cond {
    border: 1px solid var(--cn-line); border-radius: 7px; padding: 6px 7px;
    margin-bottom: 6px; background: var(--cn-bg);
}
.cn-cond-l1 { display: flex; align-items: flex-start; gap: 6px; }
.cn-cond-l2 { display: flex; align-items: flex-start; gap: 6px; margin-top: 5px; }
.cn-cond-op { flex: 0 0 56px; height: 30px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-text); }
.cn-cond-mode { flex: 0 0 148px; height: 30px; background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-text); font-size: 11.5px; }
.cn-cond-l2 .cn-textf.full { flex: 1; min-width: 0; }
.cn-cond .cn-blink-x { flex: 0 0 auto; }

/* chaîne de termes d'une condition (« max − 10 ») */
.cn-cond-terme + .cn-cond-terme { margin-top: 4px; }
.cn-cond-calc {
    flex: 0 0 44px; height: 30px; text-align: center;
    background: var(--cn-rail); border: 1px solid var(--cn-line); border-radius: 6px; color: var(--cn-accent);
}
.cn-cond-add { margin-top: 5px; }

/* proposition douteuse : elle référence un trait que le jeu ne porte pas */
.cn-xf-item.douteux { border-color: rgba(224, 163, 62, .45); }
.cn-xf-item-a { font-size: 10px; color: #e8c48a; }