/* ─── Reusable input classes (applied via HTML class names) ─── */
.inp {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid #1e2432;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.inp:focus { border-color: #FF5A1F; }

.sel {
  width: 100%;
  background: #161b27;
  border: 1px solid #1e2432;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #fff;
  outline: none;
  transition: border-color 0.15s;
  cursor: pointer;
}
.sel:focus { border-color: #FF5A1F; }

.lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.slider-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slider-label { font-size: 10px; font-weight: 500; color: #94a3b8; }
.slider-val   { font-size: 10px; color: #FF5A1F; }

/* ─── Tab bar ─── */
.tab-btn { color: #8892a0; transition: color .15s, background .15s; }
.tab-btn.active { background: #FF5A1F; color: #fff; box-shadow: 0 2px 12px rgba(255,90,31,.35); }
.tab-btn:hover:not(.active) { color: #fff; background: rgba(255,255,255,.08); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── Range sliders ─── */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #1e2432; border-radius: 4px; }
input[type=range]::-webkit-slider-thumb {
  height: 14px; width: 14px; border-radius: 50%; background: #FF5A1F; cursor: pointer;
  -webkit-appearance: none; margin-top: -5px; box-shadow: 0 0 10px rgba(255,90,31,0.4);
}

/* ─── Back pill ─── */
.back-pill {
  position: fixed; top: 14px; left: 14px; z-index: 99999;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px;
  background: rgba(11,14,20,0.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff; font: 500 12.5px 'Poppins', sans-serif;
  text-decoration: none; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: border-color .15s, color .15s;
}
.back-pill:hover { border-color: #FF5A1F; color: #FF7E47; }

/* ─── Gallery strip thumbnails ─── */
.bg-thumb {
  width: 64px; height: 64px; border-radius: 8px;
  object-fit: cover; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.bg-thumb:hover { transform: scale(1.05); }
.bg-thumb.active { border-color: #FF5A1F; box-shadow: 0 0 12px rgba(255,90,31,0.4); }

/* ─── Scrollbars ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e2432; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2a3441; }

/* ─── Contenteditable text overlay ─── */
#text-overlay [contenteditable] {
  transition: background 0.15s, box-shadow 0.15s;
}
#text-overlay [contenteditable]:hover {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}
#text-overlay [contenteditable]:focus {
  background: rgba(255,90,31,0.1);
  box-shadow: 0 0 0 2px rgba(255,90,31,0.5);
}