/* Slots (right panel) */
.slot-list { display:flex; flex-direction:column; gap: var(--gap); }
.slot-card { display:flex; gap: 12px; }
.thumb { width: 72px; height: 72px; border-radius: 10px; background:#0f131a; border:1px dashed #2b3242; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.plus-tile { width: 100%; border:2px dashed #31508e; background: #0f1420; color:#a9c8ff; border-radius: 16px; padding: 22px; text-align:center; cursor:pointer; transition: .2s; }
.plus-tile:hover{ background:#121a2a; }
.drop-here{ border:2px dashed #3a9b6e; color:#8ee9be; }
.canvas-drop-zone{ 
  background: rgba(58, 155, 110, 0.1) !important; 
  border: 2px dashed #3a9b6e !important; 
  box-shadow: 0 0 20px rgba(58, 155, 110, 0.3) !important;
}
.card-drop-zone{ 
  background: rgba(58, 155, 110, 0.1) !important; 
  border: 2px dashed #3a9b6e !important; 
  box-shadow: 0 0 15px rgba(58, 155, 110, 0.2) !important;
}


.shape-badges { display:flex; gap:6px; flex-wrap:wrap; }
.badge { padding:6px 10px; border-radius:12px; border:1px solid #2a3344; cursor:pointer; font-size:12px; user-select:none; color:#e6e9ef; }
.badge.active { background:#203455; border-color:#335e9d; }
.shape-icon { width: 18px; height: 18px; display:inline-block; vertical-align:middle; margin-right:6px; }

.small { font-size:12px; }
.slider { width: 100%; }
.lang-switch { display:flex; gap:8px; margin-bottom:12px; }
.lang-switch button{ padding:6px 10px; }
.hint { font-size:12px; color: var(--muted); }
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid #2a3344; border-radius:999px; font-size:12px; }
.locked{ color:#8ee9be; border-color:#2e7d5b; }
.sep{ height:1px; background: #263045; margin: 10px 0; }

.selection-overlay { position:absolute; pointer-events:none; border:2px dashed #5b9dff; border-radius: 6px; box-shadow: 0 0 0 3px rgba(91,157,255,.2); transform-origin:center center; }

/* Poignées de redimensionnement (Maj = proportions · Alt = depuis le centre) */
.selection-overlay .res-handle{ position:absolute; width:12px; height:12px; background:#fff; border:2px solid #5b9dff; border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.3); pointer-events:auto; z-index:5; }
.selection-overlay .res-nw{ top:-7px;    left:-7px;  cursor:nwse-resize; }
.selection-overlay .res-ne{ top:-7px;    right:-7px; cursor:nesw-resize; }
.selection-overlay .res-sw{ bottom:-7px; left:-7px;  cursor:nesw-resize; }
.selection-overlay .res-se{ bottom:-7px; right:-7px; cursor:nwse-resize; }
.selection-overlay .res-n{ top:-7px;    left:50%; transform:translateX(-50%); cursor:ns-resize; }
.selection-overlay .res-s{ bottom:-7px; left:50%; transform:translateX(-50%); cursor:ns-resize; }
.selection-overlay .res-w{ left:-7px;   top:50%;  transform:translateY(-50%); cursor:ew-resize; }
.selection-overlay .res-e{ right:-7px;  top:50%;  transform:translateY(-50%); cursor:ew-resize; }
/* Dessins : bbox déplaçable mais pas de poignées de redimensionnement */
.selection-overlay.no-resize .res-handle{ display:none; }

/* Outils de dessin (barre du bas) */
.tool-btn.active{ background:rgba(91,157,255,.2); border-color:var(--brand,#5b9dff); }
.canvas-host.drawing, .canvas-host.drawing canvas{ cursor:crosshair; }

/* Barre du haut sur deux lignes : coordonnées puis ajouts/outils */
.toolbar-col{ display:flex; flex-direction:column; gap:6px; }

/* Mini + reorder */
.slot-card .drag-handle{ margin-left:auto; cursor:grab; color:#9aa3b2; user-select:none; padding:2px 6px; border-radius:6px; }
.slot-card .drag-handle:active{ cursor:grabbing; }
.slot-card .collapse-btn{ margin-left:6px; }
.slot-card.drop-before{ outline: 2px dashed #5b9dff; outline-offset: -4px; }
.slot-card.drop-after{ outline: 2px dashed #5b9dff; outline-offset: -4px; }

.anchor-grid { display:grid; grid-template-columns: repeat(3, 16px); grid-template-rows: repeat(3, 16px); gap:6px; margin-left:6px; }
.anchor-grid button { width:16px; height:16px; border-radius:4px; border:1px solid #3b4a66; background:#0f131a; cursor:pointer; padding:0; }
.anchor-grid button.active { background:#3a5f9c; border-color:#5b9dff; box-shadow:0 0 0 2px rgba(91,157,255,.25) inset; }