.upload-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem; width: 100%; padding: 0.6rem 0.9rem;
  background-color: var(--sun);
  background-image:
    linear-gradient(to right, rgba(43, 30, 15, 0.18) 0.6px, transparent 0.6px),
    linear-gradient(to bottom, rgba(43, 30, 15, 0.18) 0.6px, transparent 0.6px);
  background-size: 8px 8px;
  color: var(--ink);
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.9rem;
  border: 2px solid var(--ink); border-radius: 12px;
  cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.22s var(--ease-back), box-shadow 0.22s var(--ease-back), background-color 0.15s ease;
}
.upload-btn:hover { transform: translate(-2px, -2px) rotate(-0.8deg); box-shadow: 4px 4px 0 var(--ink); background-color: var(--sun-deep); }
.upload-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

.upload-filename {
  font-size: 0.72rem; color: var(--ink-muted);
  font-family: 'Fredoka', sans-serif; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.slider-group { display: flex; flex-direction: column; gap: 0.3rem; }
.slider-label {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Fredoka', sans-serif; font-size: 0.78rem; color: var(--ink-soft);
}
.slider-label-name { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500; }
.slider-val {
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.8rem;
  color: var(--ink); background: var(--sun); border: 1.5px solid var(--ink);
  padding: 1px 6px; border-radius: 6px; min-width: 32px; text-align: center;
}
input[type="range"] {
  width: 100%; -webkit-appearance: none; appearance: none;
  background: transparent; height: 24px; cursor: pointer; padding: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; background: var(--cream); border: 1.5px solid var(--ink); border-radius: 100px;
}
input[type="range"]::-moz-range-track {
  height: 6px; background: var(--cream); border: 1.5px solid var(--ink); border-radius: 100px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  background: var(--coral); border: 2px solid var(--ink); border-radius: 50%;
  margin-top: -7px; cursor: grab; box-shadow: 1.5px 1.5px 0 var(--ink);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; background: var(--coral);
  border: 2px solid var(--ink); border-radius: 50%;
  cursor: grab; box-shadow: 1.5px 1.5px 0 var(--ink);
}

/* On touch devices the 18px thumb is too small to grab reliably with a
   fingertip (Reddit: Brightness/Saturation sliders "fiddly on my phone").
   Grow to 28px only on coarse pointers so the desktop layout is untouched.
   margin-top re-centers the thumb on the 6px track: -(thumb-track)/2. */
@media (pointer: coarse) {
  input[type="range"] { height: 32px; }
  input[type="range"]::-webkit-slider-thumb {
    width: 28px; height: 28px; margin-top: -11px;
  }
  input[type="range"]::-moz-range-thumb {
    width: 28px; height: 28px;
  }
}

.toggles { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.55rem; background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-size: 0.73rem; font-weight: 500;
  cursor: pointer; user-select: none; transition: all 0.12s ease;
}
.toggle input { display: none; }
.toggle .tgl-dot {
  width: 10px; height: 10px; border: 1.5px solid var(--ink);
  border-radius: 3px; background: var(--paper);
  transition: background 0.12s ease; flex-shrink: 0;
}
.toggle.on { background: var(--lime); }
.toggle.on .tgl-dot { background: var(--ink); }

/* Combined Grid toggle — on/off + inline dark/light colour picker. Clicking
   the body of the chip toggles the grid; clicking a swatch picks the line
   colour (stopPropagation keeps the outer toggle from flipping). */
.toggle-grid { gap: 0.35rem; padding-right: 0.35rem; }
.grid-col-picker {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 0.15rem; padding: 2px;
  background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 100px;
}
.grid-col {
  width: 14px; height: 14px; padding: 0;
  border: 1.5px solid var(--ink); border-radius: 50%;
  cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: none;
}
.grid-col-dark { background: var(--ink); }
.grid-col-light { background: #FFFFFF; }
.grid-col:hover { transform: scale(1.1); }
.grid-col.active {
  box-shadow: 0 0 0 2px var(--sun), 0 0 0 3.5px var(--ink);
}
.toggle:not(.on) .grid-col-picker {
  opacity: 0.45;
  pointer-events: none;
}

/* minmax(0, 1fr) prevents intrinsic content (the "27px" label) from
   forcing the track wider than its fair share and spilling out of the
   sidebar when the viewport resizes. */
.brush-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.3rem; min-width: 0; }
.brush-btn {
  position: relative; aspect-ratio: 1; min-width: 0;
  background: var(--paper); border: 2px solid var(--ink);
  border-radius: 10px; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  box-shadow: 1.5px 1.5px 0 var(--ink); transition: transform 0.22s var(--ease-back), box-shadow 0.22s var(--ease-back), background 0.12s ease;
}
.brush-btn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.brush-btn.active { background: var(--coral); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); transform: none; }
.brush-dot { background: var(--ink); border-radius: 2px; flex-shrink: 0; }
.brush-px { font-size: 0.6rem; color: var(--ink-soft); margin-top: 0.15rem; line-height: 1; }
.brush-btn.active .brush-px { color: var(--ink); font-weight: 700; }
.brush-meta {
  font-family: 'Fredoka', sans-serif; font-size: 0.72rem; color: var(--ink-soft);
  padding: 0.3rem 0.5rem; background: var(--cream); border-radius: 8px;
  border: 1.5px dashed var(--ink); text-align: center;
}
.brush-hint {
  font-family: 'Fredoka', sans-serif; font-size: 0.66rem; font-weight: 500;
  color: var(--ink-muted); text-align: center; letter-spacing: 0.02em;
  margin-top: -0.1rem;
}

.preset-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.card-actions { display: flex; gap: 0.35rem; }
.action-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-size: 0.74rem; font-weight: 600;
  cursor: pointer; transition: transform 0.22s var(--ease-back), box-shadow 0.22s var(--ease-back), background 0.12s ease;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.action-btn:hover { background: var(--sun); transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink); }
.action-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.action-btn .action-ico { font-size: 0.9rem; line-height: 1; }
.preset-btn {
  padding: 0.3rem 0.65rem; background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 100px;
  font-family: 'Fredoka', sans-serif; font-size: 0.73rem; font-weight: 500;
  cursor: pointer; color: var(--ink); transition: all 0.12s ease;
}
.preset-btn:hover { background: var(--cream); }
.preset-btn.active { background: var(--violet); }
#brush-mode-row .preset-btn.active { background: var(--sky); }