/* ============================================================
   GenBox — outil Roblox : refonte VISUELLE uniquement.
   Toutes les classes attendues par public/js/roblox.js sont
   conservées à l'identique — la logique n'est pas touchée.
   ============================================================ */

#page-roblox { flex-direction: column; overflow-y: auto; }

.rbx-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.rbx-header { display: flex; align-items: center; justify-content: space-between; }

/* ---------- cartes d'étape ---------- */
.rbx-card {
  background: var(--base);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rbx-card-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.rbx-card-head h3 { flex: none; font-size: 14.5px; display: flex; align-items: center; gap: var(--s2); }
.rbx-card-actions { display: flex; align-items: center; gap: var(--s2); margin-left: auto; flex-wrap: wrap; }
.rbx-card-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.rbx-card.collapsed .rbx-card-body { display: none; }
.rbx-card.collapsed .rbx-collapse-icon { transform: rotate(-90deg); }

.rbx-step {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  background: var(--violet-tint);
  color: var(--violet-txt);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.rbx-collapse-icon { color: var(--tx3); font-size: 11px; transition: transform var(--speed); flex: none; }
.rbx-palette-head, .rbx-events-card .rbx-card-head { cursor: pointer; user-select: none; }
.rbx-hint { font-size: var(--fs-xs); color: var(--tx3); line-height: 1.55; }
.rbx-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--tx2);
  cursor: pointer;
}
.rbx-inline input[type="checkbox"] { accent-color: var(--violet); cursor: pointer; }
.rbx-tool-current { font-size: var(--fs-sm); color: var(--tx3); margin-left: auto; }
.rbx-tool-current strong { color: var(--tx2); font-family: var(--mono); font-size: var(--fs-xs); }
.rbx-save-status { font-size: var(--fs-xs); color: var(--ok-txt); }

/* ---------- champs ---------- */
.rbx-select, .rbx-num, .rbx-text { width: auto; font-size: var(--fs-sm); padding: 7px 11px; }
.rbx-select { padding-right: 28px; }
.rbx-num { width: 78px; }
.rbx-text { min-width: 180px; }
.rbx-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rbx-row textarea { resize: vertical; }
.rbx-gen-status { font-size: var(--fs-sm); color: var(--tx3); min-height: 18px; }

/* ---------- bandeau de palette ---------- */
.rbx-palette-strip { display: flex; gap: 2px; flex: 1; max-width: 320px; overflow: hidden; }
.rbx-strip-swatch { width: 11px; height: 20px; border-radius: 2px; flex: none; }

.rbx-palette-categories { display: flex; flex-direction: column; gap: var(--s4); }
.rbx-pal-section { display: flex; flex-direction: column; gap: var(--s2); }
.rbx-pal-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx3);
}
.rbx-pal-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 7px 10px;
  background: var(--void);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.rbx-pal-center { width: 26px; height: 26px; border-radius: var(--r-xs); flex: none; }
.rbx-pal-meta { flex: none; width: 168px; min-width: 0; }
.rbx-pal-name { font-size: var(--fs-sm); font-weight: 600; }
.rbx-pal-range { font-family: var(--mono); font-size: 10px; color: var(--tx3); }
.rbx-pal-nuances { display: flex; gap: 3px; flex-wrap: wrap; flex: 1; }
.rbx-pal-nuance {
  width: 17px; height: 17px;
  border-radius: 3px;
  cursor: pointer;
  transition: transform var(--speed);
}
.rbx-pal-nuance:hover { transform: scale(1.28); }

/* ---------- events ---------- */
.rbx-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: var(--s2);
}
.rbx-event-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--void);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed);
}
.rbx-event-toggle:hover { border-color: var(--line); }
.rbx-event-toggle.active { border-color: var(--violet-dim); background: var(--violet-tint); }
.rbx-event-emoji { font-size: 17px; flex: none; }
.rbx-event-info { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 500; }
.rbx-event-swatches { display: flex; gap: 2px; flex: none; }
.rbx-event-swatches span { width: 11px; height: 11px; border-radius: 2px; }

/* ---------- source ---------- */
.rbx-source-tabs { display: flex; gap: 2px; background: var(--void); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 3px; align-self: flex-start; }
.rbx-tab {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx3);
  padding: 7px 14px;
  border-radius: var(--r-xs);
  transition: background var(--speed), color var(--speed);
}
.rbx-tab:hover { color: var(--tx2); }
.rbx-tab.active { background: var(--violet); color: var(--void); }
.rbx-source-panel { display: flex; flex-direction: column; gap: var(--s3); }

.rbx-dropzone {
  display: block;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: var(--s6) var(--s4);
  text-align: center;
  cursor: pointer;
  background: var(--void);
  transition: border-color var(--speed), background var(--speed);
}
.rbx-dropzone:hover, .rbx-dropzone.rbx-drop-over { border-color: var(--violet); background: var(--violet-tint); }
.rbx-dropzone-inner { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--tx2); }

/* ---------- toiles ---------- */
.rbx-canvas-area { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.rbx-canvas-wrap { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.rbx-canvas-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx3);
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.rbx-pixel-info { font-family: var(--mono); font-size: 10px; text-transform: none; letter-spacing: 0; }
.rbx-canvas-box {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}
.rbx-canvas-box canvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
  /* pixel art : aucun lissage à l'affichage */
  image-rendering: pixelated;
}
.rbx-canvas-empty { font-size: var(--fs-sm); color: var(--tx3); text-align: center; padding: var(--s4); }
.rbx-actions-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.rbx-lua-preview {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--tx2);
  background: var(--void);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: var(--s3);
  max-height: 300px;
  overflow: auto;
  white-space: pre;
}

@media (max-width: 900px) {
  .rbx-canvas-area { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .rbx-container { padding: var(--s3) var(--s3) 70px; }
  .rbx-palette-strip { display: none; }
  .rbx-card-head { flex-wrap: wrap; }
}