/* ----------------------------------------------------
   Components — Buttons, Inputs, Sliders, Layers, Figure
---------------------------------------------------- */

/* Labels */
.control label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.2;
}

/* Inputs / selects */
.control input[type="number"],
.control select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--grid);
  border-radius: 8px;
  font: inherit;
  height: 40px;
}

/* Range inputs (container spacing) */
.control input[type="range"] {
  width: 100%;
  margin-top: 4px;
}

/* ----------------------------------------------------
   Base range slider reset
---------------------------------------------------- */
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
  height: 32px; /* space for thumb */
  cursor: pointer;
}

/* ----------------------------------------------------
   Custom slider styling (CI App)
---------------------------------------------------- */

/* Track */
input[type="range"] {
  height: 6px;
  background: #dbeafe;       /* light blue track */
  border-radius: 4px;
}

/* Chrome / Safari / Edge thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #2563eb;         /* brand blue */
  border: 3px solid white;     /* white ring */
  box-shadow: 0 0 0 2px #2563eb; /* outer blue ring */
  cursor: pointer;
}

/* Firefox thumb */
input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #2563eb;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #2563eb;
  cursor: pointer;
}

/* Firefox track */
input[type="range"]::-moz-range-track {
  background: #dbeafe;
  height: 6px;
  border-radius: 4px;
}

/* Active (dragging) */
input[type="range"]:active::-webkit-slider-thumb {
  background: #1d4ed8;
}

input[type="range"]:active::-moz-range-thumb {
  background: #1d4ed8;
}

/* ----------------------------------------------------
   Buttons
---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
}

/* Primary button */
.btn-primary {
  background: var(--blue);
  color: #fff;
}

.btn-primary:hover {
  background: var(--blue-hover);
}

/* Large button variant */
.btn-lg {
  height: 40px;
  padding: 0 48px;
  font-size: 0.95rem;
  border-radius: 8px;
}

/* ----------------------------------------------------
   Layers list
---------------------------------------------------- */
.layers {
  margin: 8px 0 4px;
  font-size: 0.9rem;
}

.layers h2 {
  font-size: 0.95rem;
  margin: 0 0 4px;
}

.layers ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 4px;
}

.layers li {
  padding: 4px 6px;
  border: 1px solid var(--grid);
  border-radius: 6px;