/**
 * Pixel Art Tag Generator - Minecraft Style Tool
 * 
 * A responsive web tool for creating pixel art tags with text, gradients,
 * shadows, icons, and customizable backgrounds. Optimized for Minecraft
 * resource pack creators.
 * 
 * Responsive breakpoints:
 * - Desktop: >768px
 * - Tablet: 768px
 * - Mobile: 480px
 * - Small Mobile: 360px
 * - Extra Small: 270px
 * - Ultra Small: 200px
 */

/* ===== LAYOUT SECTIONS ===== */

.tag-section {
  margin: 20px 0;
}

/* Top Section - Preview and Actions */
.top-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 15px;
  margin: 20px 0 0 0;
  width: 100%;
  /* Both cards share the row height (preview stretches to match the taller Actions card). The
     floating pane carries this same height on detach (set in JS) so it doesn't change size. */
  align-items: stretch;
  box-sizing: border-box;
  position: relative;   /* anchor for the pane when it floats during resize */
}

/* Controls Section */
.controls-section {
  margin: 15px 0 0 0;
}

/* Tool Container - Text and Background Panels */
.tool-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  min-width: 0;
}

/* Icon section specific layout adjustments */
.icon-section .tool-container {
  grid-template-columns: 1fr;
}

/* Left column wrapper: stacks the Text panel + Output panel in the left grid cell,
   so the text panel sizes to its content and Output fills the space beneath it. */
.tool-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

/* When icons panel becomes visible, switch to 2-column layout */
.icon-section .tool-container:has(#iconsPanel[style*="display: flex"]),
.icon-section .tool-container.has-icons {
  grid-template-columns: 1fr 1fr;
}

/* Fallback for browsers without :has() support */
.icon-section.has-icons .tool-container {
  grid-template-columns: 1fr 1fr;
}

/* Icon options box + Uploaded Icons panel stay hidden until at least one icon is added */
.icon-section .before-icons-hidden {
  display: none;
}
.icon-section .tool-container.has-icons .before-icons-hidden,
.icon-section.has-icons .before-icons-hidden {
  display: flex;
}

/* ===== PANELS AND CARDS ===== */

/* Base card style shared by all card containers */
.tool-card {
  background: rgba(0, 0, 0, 0.04);
  border: 2px solid #e9ecef;
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05); */
}

/* tool-panel: keeps flex column layout for all contexts (including invisible wrappers) */
.tool-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
}

/* Controls section: tool-panels become invisible layout wrappers
   (the options-groups inside are now the primary cards) */
.controls-section .tool-panel {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 24px;
  padding: 20px;
  overflow: visible;
  min-width: 0;
}

.controls-section .tool-panel .tool-card {
  border: none;
}

/* Unified heading style for all card headings and section labels */
.tool-card h3,
.options-group-label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

/* Subtle card background tints — visual grouping for text vs background sections */
/* .text-panel .tool-card {
  background: #fdf8f4;
}

.bg-panel .tool-card {
  background: #f4faff;
} */

/* ===== FORM ELEMENTS ===== */

.input-group {
  margin-bottom: 0;
  min-width: 0;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #666;
  font-size: 14px;
  text-align: center;
}

.input-group input[type="text"],
.input-group textarea,
.input-group select {
  width: 100%;
  padding: 0 12px;
  border: 2px solid #d1d5db;
  border-radius: 24px;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.input-group input[type="text"],
.input-group select {
  height: 40px;
}

.input-group textarea {
  height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  resize: vertical;
  line-height: 1.4;
  font-family: inherit;
  scrollbar-width: thin;
  scrollbar-color: #c0c0c0 transparent;
}

.input-group textarea::-webkit-scrollbar {
  width: 6px;
}

.input-group textarea::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}

.input-group textarea::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 3px;
}

.input-group textarea::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.input-group input[type="text"],
.input-group textarea {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

.input-group input[type="text"]:focus,
.input-group textarea:focus,
.input-group select:focus {
  outline: none;
  border-color: #3984a7;
}

.input-group.checkbox-group label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

/* Icon controls: hidden by default, revealed when the icon section has .has-icons */
#iconSpacingControls,
#standaloneIslandsControl,
#iconsPanel {
  display: none;
}

/* Stack labels vertically, size container to widest label, center the column horizontally.
   Labels stretch to container width so all checkbox squares line up at the same x. */
#standaloneIslandsControl,
.shape-toggles {
  flex-direction: column;
  width: fit-content;
  margin: 0 auto;
  gap: 10px;
}
/* #standaloneIslandsControl becomes flex via its .has-icons rule; .shape-toggles is always shown, so
   it needs display:flex here — otherwise it's a block box and the column gap (10px) is ignored, leaving
   the checkboxes flush against each other. */
.shape-toggles {
  display: flex;
}
#standaloneIslandsControl label,
.shape-toggles label {
  justify-content: flex-start;
}

.has-icons #iconSpacingControls {
  display: block;
}
.has-icons #standaloneIslandsControl {
  display: flex;
}
.has-icons #iconsPanel {
  display: flex;
}

.input-group.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #3984a7;
}

/* Quantity Controls */
.quantity-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.quantity-btn {
  padding: 0;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  background: #fff;
  color: #666;
  font-size: 18px;
  font-weight: bold;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.quantity-btn:hover {
  border-color: #3984a7;
  background: #f0f8ff;
}

.quantity-icon {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
  color: #333;
  stroke: currentColor;
  stroke-width: 2;
}

.quantity-control input[type="number"] {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 4px;
  border: 2px solid #d1d5db;
  border-radius: 24px;
  text-align: center;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
}

.quantity-control input[type="number"]:focus {
  outline: none;
  border-color: #1376b3;
}

/* Drag-to-scrub: number fields and their labels act as horizontal scrubbers */
.quantity-control input[type="number"].scrubbable {
  cursor: ew-resize;
}

/* Once focused for typing, show a normal text caret instead of the scrub cursor */
.quantity-control input[type="number"].scrubbable:focus {
  cursor: text;
}

/* While actively scrubbing, lock the cursor and suppress text selection everywhere */
body.scrubbing-value,
body.scrubbing-value * {
  cursor: ew-resize !important;
  user-select: none !important;
}

/* ===== SPECIALIZED CONTROLS ===== */



/* Options Group (base card styles from .tool-card) */


.options-group .input-group {
  margin-bottom: 0;
}

.options-group .colors-container {
  gap: 12px;
}

.options-group > .colors-container > .input-group:last-child {
  margin-bottom: 2px;
}


#symmetricPadding,
#symmetricCornerRadius,
#symmetricOutline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Padding Grid for Asymmetric Mode */
.padding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* The notch grid sits BELOW its toggle, so its label row (Top/Right…) already adds vertical space;
   pull it up to cancel most of the card's 12px gap so it reads as attached to the Edge Notch checkbox. */
#edgeNotchControls {
  margin-top: -6px;
}

.padding-grid .input-group {
  margin-bottom: 0;
}

.padding-grid .quantity-control input[type="number"] {
  min-width: 30px;
}

/* Mobile: Responsive adjustments */
@media (max-width: 480px) {
  .padding-grid {
    grid-template-columns: 1fr;
  }
}

/* Colors Container */
.colors-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.color-entry {
  background: transparent;
  border: 2px solid #d1d5db;
  padding: 10px;
  border-radius: 18px;
  min-width: 0;
}

.color-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  /* padding-bottom: 4px; */
  min-height: 24px;
  min-width: 0;
}

.color-entry-header label {
  font-size: 12px;
  color: #333;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin-bottom: 0;
}

.color-reorder-buttons {
  display: flex;
  gap: 4px;
}

.color-reorder-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.color-reorder-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.2);
}

.color-reorder-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.color-reorder-btn svg {
  width: 12px;
  height: 12px;
  stroke: #333;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.color-entry-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.color-remove-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}

.color-remove-btn:hover:not(:disabled) {
  background: rgba(180, 40, 40, 0.25);
}

.color-remove-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.color-remove-btn svg {
  width: 10px;
  height: 10px;
  stroke: #333;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.color-entry label {
  margin-bottom: 4px;
  font-size: 12px;
  color: #333;
  font-weight: 600;
}

/* Single-color entries (shadows, outlines, emboss) use a bare title label instead of the gradient
   entries' .color-entry-header. Reproduce that header label's EXACT box so the title text and the
   color box below land pixel-identically with the gradient sections: the gradient label is an 18px
   line-box sitting inside a 24px header (its 4px bottom-margin biases it 2px above the header's
   centre, so its text box lands at y≈13). Match that here — an 18px block whose 1px+18px+5px = 24px
   footprint puts the text at the same y and keeps the box at the same offset. (.slider-label keeps
   its own spacing; the gradient title lives inside .color-entry-header, so it is unaffected. The
   fixed margins also out-specify the small-viewport .color-entry label overrides, staying aligned.) */
.color-entry > label:not(.slider-label) {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 24px;          /* same 24px footprint as .color-entry-header -> color box stays at y=42 */
  padding-bottom: 4px;       /* mirrors the header label's 4px bottom-margin: biases the text 2px up to y=13 */
  margin: 0;                 /* out-specifies small-viewport .color-entry label margin overrides */
  white-space: nowrap;
  overflow: hidden;
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.slider-label {
  display: block;
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 12px;
  color: #333;
  font-weight: 600;
}

.slider-wrapper {
  display: flex;
  align-items: center;
  /* gap: 10px; */
  min-width: 0;
}

.slider-wrapper input[type="range"] {
  min-width: 0;
  flex: 1;
  height: 16px;
  border-radius: 8px;
  background: #d1d5db;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  pointer-events: none;
}

.slider-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3984a7;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  transition: box-shadow 0.15s ease;
}

.slider-wrapper input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(57, 132, 167, 0.3);
}

.slider-wrapper input[type="range"]::-webkit-slider-thumb:active {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(57, 132, 167, 0.4);
}

.slider-wrapper input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3984a7;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  transition: box-shadow 0.15s ease;
}

.slider-wrapper input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(57, 132, 167, 0.3);
}

.slider-wrapper input[type="range"]::-moz-range-thumb:active {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(57, 132, 167, 0.4);
}

.slider-wrapper span {
  min-width: 40px;
  font-size: 12px;
  color: #333;
  font-weight: 600;
  text-align: right;
}

.color-box {
  width: 40px;
  height: 40px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease;
  overflow: hidden;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
}

.color-box:hover {
  border-color: #3984a7;
}

.color-box::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.color-box::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.color-box::-moz-color-swatch {
  border: none;
  border-radius: 50%;
  margin: 0;
  padding: 0;
}

.hex-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  padding-left: 24px;
  border: 2px solid #d1d5db;
  border-radius: 24px;
  font-family: monospace;
  font-size: 14px;
  background: #fff;
  color: #333;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.hex-input:focus {
  outline: none;
  border-color: #3984a7;
}

/* Gradient Stop Bar */
.gradient-bar-wrapper {
  padding: 0;
}

.gradient-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gradient-bar-label {
  font-size: 11px;
  color: #666;
}

.gradient-bar {
  position: relative;
  height: 20px;
  margin: 6px 0 0 0;
  border-radius: 10px;
  /* Checkerboard for transparency visualization */
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

.gradient-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Handle track: inset so handles stay within the rounded bar */
.gradient-handle-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  right: 10px;
}

.gradient-handle {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 2;
  transition: box-shadow 0.15s ease;
  touch-action: none;
}

/* Larger invisible hit area to prevent hover flicker */
.gradient-handle::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.gradient-handle:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(57, 132, 167, 0.3);
}

.gradient-handle.dragging {
  cursor: grabbing;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(57, 132, 167, 0.4);
  z-index: 100 !important;
}

.gradient-reset-btn {
  background: none;
  border: 1px solid #d1d5db;
  color: #999;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.gradient-reset-btn:hover {
  color: #555;
  border-color: #999;
}

/* ===== UTILITY STYLES ===== */

/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* ===== PREVIEW AND ACTIONS ===== */

/* Preview Card (base card styles from .tool-card) */
.preview-card {
  background: #f8f9fa;
  position: relative;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.preview-card.pinned {
  position: fixed;
  top: 80px;
  z-index: 900;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

/* Home slot a pinned panel reserves — always shown as a subtle "drop here to dock" zone so
   the user can see where to return the panel; it lights up when dragged over. */
.preview-dock-zone {
  border: 2px dashed #cbd5e1;
  background: rgba(0, 0, 0, 0.015);
  border-radius: 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aab2bf;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.preview-dock-zone.dock-active {
  border-color: #3984a7;
  background: rgba(57, 132, 167, 0.1);
  color: #3984a7;
}
/* Fade the panel while it hovers the dock zone so the highlight shows through */
.preview-card.pinned.docking {
  opacity: 0.55;
  transition: opacity 0.12s ease;
}

.preview-header {
  width: 100%;
}

.pin-preview-btn {
  padding: 6px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #666;
  flex-shrink: 0;
  position: absolute;
  right: 12px;
  top: 12px;
}

.pin-preview-btn:hover {
  background: #f0f8ff;
  border-color: #3984a7;
  color: #3984a7;
}

.pin-preview-btn.active {
  background: #3984a7;
  border-color: #3984a7;
  color: #fff;
  transform: rotate(45deg);
}

.pin-icon {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  stroke: currentColor;
  transition: transform 0.2s ease;
}

.canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  width: 100%;
  flex: 1 1 0;                /* fill the card's height WITHOUT growing it to the tag — the tag scales to fit a fixed-size viewport instead of stretching the island */
  min-height: 90px;          /* floor (kept below the Actions-driven fill height so desktop docked is unchanged) — only bites if the card isn't stretched by a taller sibling, and keeps the resize handle's height floor sane */
  box-sizing: border-box;
  overflow: hidden;
}

/* While the user is manually resizing the pinned pane, drop the fixed-viewport floor so the
   container shrinks WITH the pane (tag scales down to fit) instead of overflowing the shortened
   card and letting the tag protrude outside it. */
.preview-card.user-resized .canvas-container {
  min-height: 0;
}

#canvas {
  border: none;
  background: transparent;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* Reserve the default preview size up front (default "NOGARD" tag = 39×7 px × 8 display-scale
     = 312×56). Without this the canvas sits at its 7px intrinsic height until JS first renders,
     then jumps to 56px — that late growth pushed the whole controls section down and was the main
     mobile CLS source. JS overrides these inline on every render for the actual tag size. */
  width: 312px;
  height: 56px;
  /* The tag keeps its true pixel size (set inline by JS); only shrink if a huge tag would
     overflow the pane. When DOCKED it never stretches to fill (enlarging isn't possible there).
     When PINNED it becomes a zoom window — see the .pinned override below. */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Resizing a pinned pane scales the tag: JS multiplies the canvas display size by a previewZoom
   that grows smoothly with the drag (1 = true pixel size), so it doesn't snap to fill. The
   max-width/height + object-fit above still cap it so a big zoom can't overflow the pane. */

/* Custom corner handle: drag to enlarge the preview (both axes); can't shrink below the
   fitted size, double-click to reset. Absolutely positioned so it never affects layout. */
/* Drag grip (top-left): the single place to grab and reposition the pane. Only shown
   while the pane is pinned, since dragging is available in that (floating) state. */
.preview-drag-handle {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: move;
  color: #6b7280;
  opacity: 0.85;
  touch-action: none;
  z-index: 7;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.preview-card.pinned .preview-drag-handle {
  display: flex;
}
.preview-drag-handle:hover {
  opacity: 1;
  color: #3984a7;
}
.preview-drag-handle svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

.preview-resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 22px;
  height: 22px;
  display: none;              /* resizing is only available while pinned (a floating panel) */
  align-items: flex-end;
  justify-content: flex-end;
  padding: 2px;
  box-sizing: border-box;
  cursor: nwse-resize;
  color: #b0b6be;
  opacity: 0.7;
  touch-action: none;         /* let pointer drags work on touch devices */
  z-index: 6;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.preview-card.pinned .preview-resize-handle {
  display: flex;
}
.preview-resize-handle:hover {
  opacity: 1;
  color: #3984a7;
}
.preview-resize-handle svg {
  width: 12px;
  height: 12px;
  display: block;
  pointer-events: none;
}
body.preview-resizing,
body.preview-resizing * {
  cursor: nwse-resize !important;
  user-select: none !important;
}
body.preview-dragging,
body.preview-dragging * {
  cursor: move !important;
  user-select: none !important;
}

.preview-resolution {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #9ca3af;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* Actions Card (base card styles from .tool-card) */
.actions-card {
  background: #f8f9fa;
  align-items: center;
  justify-content: flex-start;
}

.actions-card .json-buttons-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* JSON button styling from json-formatter.css */
.json-button, .json-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 2px solid;
  border-radius: 24px;
  font-weight: bold;
  font-size: 15px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  height: 44px;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.json-button {
  background-color: #3984a7;
  color: #ffffff;
  border: 2px solid #d1d5db;
}

.json-button:hover {
  background-color: #2d6a89;
  border-color: #7fa8c0;
}

.json-button:active {
  transform: scale(0.98);
}

.json-button-secondary {
  background-color: #ffffff;
  color: #333333;
  border: 2px solid #d1d5db;
}

.json-button-secondary:hover {
  background-color: #f0f8ff;
  border-color: #3984a7;
}

.json-button-secondary:active {
  transform: scale(0.98);
}

.copy-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.json-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* ===== LINKS SECTION ===== */

.links-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 50px auto;
  max-width: 800px;
}

.link-item {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 24px;
  border: 2px solid #e9ecef;
  text-align: center;
}

.link-item h3 {
  margin-bottom: 10px;
  font-size: 20px;
  color: #333;
}

.link-item p {
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}

.link-button {
  display: inline-block;
  padding: 10px 20px;
  background: #3984a7;
  color: #fff;
  text-decoration: none;
  border-radius: 24px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.link-button:hover {
  background: #2d6a89;
}

.link-button:active {
  transform: scale(0.98);
}

/* ===== ICON DROP ZONE ===== */

.icon-section .tool-panel > .input-group:last-child {
  flex: 1;
}

.icon-drop-zone {
  border: 2px dashed #d1d5db;
  border-radius: 18px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  min-height: 120px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.icon-drop-zone:hover {
  border-color: #3984a7;
  background: #f0f8ff;
}

.icon-drop-zone.drag-over {
  border-color: #3984a7;
  background: #e6f3ff;
  border-style: solid;
}

.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.drop-icon {
  width: 24px;
  height: 24px;
  color: #666;
}

.icon-drop-zone p {
  margin: 0;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  word-break: break-word;
  text-align: center;
}

/* ===== CONFIG IMPORT/EXPORT ===== */

/* Corner button on the Actions card (mirrors the preview pin button; absolute so it adds no height) */
.actions-card { position: relative; }
.config-btn {
  padding: 6px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #666;
  position: absolute;
  right: 12px;
  top: 12px;
}
.config-btn:hover { background: #f0f8ff; border-color: #3984a7; color: #3984a7; }
.config-btn svg { width: 18px; height: 18px; display: block; }

.config-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.config-modal-overlay[hidden] { display: none; }
.config-modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 700px;              /* wide enough for Import | Export side by side */
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.config-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}
.config-modal-header h3 { margin: 0; font-size: 17px; color: #333; }
.config-modal-close {
  border: none;
  background: #f3f4f6;
  cursor: pointer;
  color: #6b7280;
  width: 32px;
  height: 32px;
  border-radius: 50%;               /* rounded circle, matching the palette-extractor export modal */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.config-modal-close:hover { background: #e5e7eb; color: #2c3e50; }
.config-modal-close svg { width: 20px; height: 20px; }
.config-modal-body {
  padding: 14px 20px 20px;          /* trimmed top so Import sits closer under the header */
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* Import | Export side by side (desktop) */
  align-items: start;               /* columns size to their content; the two boxes are matched via a fixed height instead (the Import section has an extra status line, so stretch made them unequal) */
  column-gap: 12px;                 /* match the 12px gap between the Copy/Download buttons, so each column (and the button beneath it) is exactly the same width and aligned */
  row-gap: 16px;                    /* tighter space from the columns down to the buttons row */
}
/* Let the grid tracks shrink below their children's intrinsic min-content width, so the modal stays responsive down to very narrow screens instead of overflowing. */
.config-modal-body > * { min-width: 0; }
.config-section { display: flex; flex-direction: column; gap: 10px; }
.config-section-label {
  font-weight: bold;
  font-size: 13px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.config-drop-zone { min-height: 200px; padding: 20px; height: auto; }   /* fixed height so it matches the Export box exactly */
/* The config drop-zone reuses .icon-drop-zone, whose box (radius 18→14→12→10→8→6, plus min-height / padding /
   border-width) changes across the shared mobile breakpoints. Pin the parts that must stay matched to the Export
   box at higher specificity so those shared media rules can't leak in — notably the @710 rule that would otherwise
   shrink it to 100px while the Export box stays 200px in the 601–710px two-column band. */
.config-modal .config-drop-zone { border-radius: 12px; min-height: 200px; border-width: 2px; }
.config-status { font-size: 13px; min-height: 18px; color: #666; }
.config-status:empty { display: none; }   /* no message → take no space (keeps the buttons close to the panes) */
.config-status.error { color: #d9534f; }
.config-status.success { color: #4CAF50; }
.config-export-text {
  min-height: 200px;       /* fixed height, matching the Import drop-zone exactly */
  width: 100%;
  min-width: 0;            /* allow shrinking below the textarea's default cols width */
  box-sizing: border-box;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
  border: 2px solid #d1d5db;
  border-radius: 12px;
  padding: 10px;
  resize: vertical;
  background: #fafafa;
  color: #333;
  scrollbar-width: thin;                  /* thin scrollbar, matching the input textareas (Firefox) */
  scrollbar-color: #c0c0c0 transparent;
}
.config-export-text::-webkit-scrollbar { width: 6px; }
/* Inset the thumb past the 12px corner radius (top & bottom) so the scrollbar can't square off the rounded corners; transparent track lets the rounded corner show through. */
.config-export-text::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.config-export-text::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 3px; }
.config-export-text::-webkit-scrollbar-thumb:hover { background: #999; }
.config-modal-actions {
  grid-column: 1 / -1;       /* span BOTH columns: full-width row under Import|Export, so the buttons centre across the whole modal */
  display: flex;
  gap: 12px;
  justify-content: center;   /* centre the Copy / Download buttons */
  flex-wrap: wrap;           /* stack Copy above Download when the modal gets too narrow for both side by side */
}
/* Fill the row like the site's full-width controls: side by side they split the line (flex:1 each → 100% together);
   when the row is too narrow for both, they wrap and each grows to the full line width. */
.config-modal-actions .json-button-secondary { height: 40px; font-size: 14px; width: auto; flex: 1 1 140px; white-space: nowrap; }

/* Stack Import above Export again on narrow screens */
@media (max-width: 600px) {
  .config-modal-body { grid-template-columns: 1fr; }
  /* stacked → shrink both boxes so the modal isn't over-tall, and keep them EQUAL.
     .config-modal prefix on the drop-zone beats the shared .icon-drop-zone mobile rules. */
  .config-modal .config-drop-zone { min-height: 100px; }
  .config-export-text { min-height: 100px; }
  /* stacked → give the buttons a bit more breathing room below the export box (adds to the 16px row-gap) */
  .config-modal-actions { margin-top: 10px; }
}

/* ===== ICON ENTRIES ===== */

.icons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.icon-entry .color-entry-header {
  margin-bottom: 0;
  min-width: 0;
}

.icon-entry .slider-label {
  margin-top: 0;
}

.icon-entry .color-entry-header label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.icon-entry {
  background: #fff;
  border: 2px solid #e9ecef;
  border-radius: 18px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.icon-preview-box {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.icon-entry .icon-preview {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin-top: 0;
  border-radius: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.icon-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.icon-nudge-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.icon-toggles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.icon-toggles-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.icon-select {
  padding: 4px 8px;
  border: 2px solid #d1d5db;
  border-radius: 24px;
  font-size: 12px;
  background: #fff;
  width: 100%;
  min-width: 0;
}

.icon-select:focus {
  outline: none;
  border-color: #3984a7;
}

.icon-toggles label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  color: #666;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.icon-toggles input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #3984a7;
}

.nudge-grid {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  grid-template-rows: repeat(3, 26px);
  gap: 1px;
}

.nudge-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: background 0.15s ease, color 0.15s ease;
}

.nudge-btn:hover {
  background: rgba(57, 132, 167, 0.15);
  color: #3984a7;
}

.nudge-btn:active {
  transform: scale(0.9);
}

.nudge-btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.nudge-reset:hover {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet and below (710px) */
@media (max-width: 710px) {
  .top-section {
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 15px 0 0 0;
    padding: 0;
  }

  .controls-section {
    margin: 15px auto 0;
    padding: 0;
  }

  .tool-container {
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 0;
    padding: 0;
  }

  .tool-card {
    padding: 14px;
    gap: 10px;
    border-radius: 14px;
  }

  /* keep the icon drop-zone's corner in step with the cards at this breakpoint */
  .icon-drop-zone { border-radius: 14px; }

  .controls-section .tool-panel {
    padding: 14px;
    border-radius: 20px;
  }

  .tool-card h3 {
    font-size: 15px;
    margin: 0;
  }

  .input-group input[type="text"],
  .input-group select {
    height: 36px;
    font-size: 14px;
  }

  .input-group textarea {
    height: 36px;
    font-size: 14px;
  }

  .quantity-control {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .quantity-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .quantity-icon {
    width: 16px;
    height: 16px;
  }

  .quantity-control input[type="number"] {
    height: 36px;
  }

  .color-box {
    width: 36px;
    height: 36px;
  }

  .hex-input {
    height: 36px;
  }

  .colors-container {
    gap: 12px;
  }

  .color-picker-wrapper {
    gap: 6px;
  }

  .links-section {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 30px 0;
    padding: 0;
  }
  
  .json-button,
  .json-button-secondary {
    height: 40px;
  }

  .actions-card {
    min-width: auto;
  }

  .canvas-container {
    padding: 8px;
    /* Stacked/mobile: the preview is full-width and no longer sits beside the Actions card, so the
       fixed-viewport reason (don't stretch a sibling) doesn't apply — hug the tag so the pane stays
       compact like it used to. flex-basis auto = size to the tag; overflow:hidden still clips. */
    flex: 1 1 auto;
    min-height: 0;
  }
  
  /* Icons section responsive */
  .icon-section {
    margin: 15px 0 0 0;
    padding: 0;
  }
  
  .icon-section .tool-container {
    grid-template-columns: 1fr !important;
  }
  

  .icon-drop-zone {
    padding: 25px 15px;
    min-height: 100px;
  }

  .drop-icon {
    width: 24px;
    height: 24px;
  }

  .icon-drop-zone p {
    font-size: 14px;
  }
}

/* Mobile (480px) - keep close to desktop for touch comfort */
@media (max-width: 480px) {
  .top-section {
    padding: 0;
    margin: 15px 0 0 0;
  }

  .controls-section {
    margin: 15px auto 0;
    padding: 0;
  }

  .tool-container {
    gap: 15px;
    margin: 0;
  }

  .tool-card {
    padding: 12px;
    gap: 10px;
    border-radius: 12px;
  }

  .controls-section .tool-panel {
    padding: 12px;
    border-radius: 18px;
  }

  .color-entry,
  .icon-entry,
  .icon-drop-zone {
    border-radius: 12px;
  }

  .input-group {
    margin-bottom: 0;
  }

  .tool-panel > .input-group:last-child,
  .tool-panel > *:last-child .input-group:last-child {
    margin-bottom: 0;
  }

  .colors-container + .input-group {
    margin-top: 0;
  }

  .quantity-control {
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
  }

  .colors-container {
    gap: 10px;
  }

  .color-entry label {
    font-size: 12px;
    margin-bottom: 4px;
  }

  .color-picker-wrapper {
    gap: 6px;
  }

  .hex-input {
    height: 36px;
    padding: 0 8px;
    padding-left: 20px;
    font-size: 13px;
  }

  .json-button,
  .json-button-secondary {
    height: 40px;
    font-size: 14px;
  }

  .json-buttons-container {
    gap: 10px;
  }

  .actions-card {
    min-width: auto;
  }


  .pin-preview-btn,
  .config-btn {
    right: 8px;
    top: 8px;
  }

  .canvas-container {
    padding: 5px;
  }

  /* Icons section responsive */
  .icon-section {
    margin: 12px 0 0 0;
    padding: 0;
  }


  .icon-drop-zone p {
    font-size: 13px;
  }
  
  .icon-entry {
    padding: 10px;
    gap: 8px;
  }

  .link-item {
    padding: 15px;
  }
  
  .link-item h3 {
    font-size: 15px;
  }
}

/* Small Mobile (360px) */
@media (max-width: 360px) {
  .top-section {
    padding: 0;
    margin: 12px 0 0 0;
  }

  /* Card padding tightens to 10px here, pulling the tag / action buttons up toward the corner
     buttons — so pull the pin & config buttons closer to the corner and shrink them a touch so they
     clear the content below (otherwise they sit ~1px above it). */
  .pin-preview-btn,
  .config-btn {
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
  }

  .controls-section {
    margin: 12px auto 0;
    padding: 0;
  }

  .tool-container {
    gap: 12px;
  }

  .tool-card {
    padding: 10px;
    gap: 8px;
    border-radius: 10px;
  }

  .controls-section .tool-panel {
    padding: 10px;
    border-radius: 16px;
  }

  .color-entry,
  .icon-entry {
    border-radius: 12px;
  }
  /* drop-zone tracks the .tool-card radius (10px here), not the 12px list entries */
  .icon-drop-zone { border-radius: 10px; }

  .input-group {
    margin-bottom: 0;
  }

  .tool-panel > .input-group:last-child,
  .tool-panel > *:last-child .input-group:last-child {
    margin-bottom: 0;
  }

  .colors-container + .input-group {
    margin-top: 0;
  }

  .input-group input[type="text"],
  .input-group select {
    height: 36px;
    font-size: 14px;
  }

  .input-group textarea {
    height: 36px;
    font-size: 14px;
  }

  .quantity-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .quantity-control input[type="number"] {
    height: 36px;
    font-size: 14px;
  }

  .quantity-control {
    gap: 4px;
    width: 100%;
  }

  .color-box {
    width: 36px;
    height: 36px;
  }

  .hex-input {
    height: 36px;
    padding: 0 8px;
    padding-left: 18px;
    font-size: 13px;
  }

  .json-button,
  .json-button-secondary {
    height: 40px;
    font-size: 14px;
  }

  .json-buttons-container {
    gap: 10px;
  }

  .actions-card {
    min-width: auto;
  }
  
  
  .canvas-container {
    padding: 3px;
  }
  
  /* Icons section responsive */
  .icon-section {
    margin: 10px 0 0 0;
    padding: 0;
  }
  
  
  .icon-entry {
    padding: 8px;
    gap: 6px;
  }

  .icon-drop-zone {
    padding: 12px 10px;
    min-height: auto;
  }

  .drop-icon {
    width: 22px;
    height: 22px;
  }

  .drop-zone-content {
    gap: 4px;
  }

  .icon-drop-zone p {
    font-size: 13px;
  }
}

/* Extra Small Mobile (270px) */
@media (max-width: 270px) {
  .top-section {
    padding: 0;
    margin: 8px 0 0 0;
  }

  .controls-section {
    margin: 8px auto 0;
    padding: 0;
  }

  .tool-container {
    gap: 8px;
  }

  .controls-section .tool-panel {
    padding: 6px;
    border-radius: 12px;
    border-width: 1px;
  }

  .tool-card {
    padding: 6px;
    border-width: 1px;
    gap: 6px;
    border-radius: 8px;
  }

  /* keep the icon drop-zone's corner in step with the cards at this breakpoint */
  .icon-drop-zone { border-radius: 8px; }

  .tool-card h3,
  .options-group-label {
    font-size: 13px;
    margin: 0;
  }


  .input-group {
    margin-bottom: 0;
  }

  .tool-panel > .input-group:last-child,
  .tool-panel > *:last-child .input-group:last-child {
    margin-bottom: 0;
  }

  .colors-container + .input-group {
    margin-top: 0;
  }

  .input-group label {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .input-group input[type="text"],
  .input-group select {
    height: 30px;
    font-size: 12px;
  }

  .input-group textarea {
    height: 30px;
    font-size: 12px;
  }

  .quantity-control {
    gap: 3px;
    flex-wrap: nowrap;
    width: 100%;
  }

  .quantity-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-width: 1px;
  }

  .quantity-icon {
    width: 14px;
    height: 14px;
  }

  .quantity-control input[type="number"] {
    height: 30px;
    font-size: 12px;
    border-width: 1px;
  }

  .colors-container {
    gap: 10px;
  }

  .color-entry label {
    font-size: 11px;
    margin-bottom: 3px;
    margin-top: 4px;
  }

  .color-picker-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }

  .color-box {
    width: 100%;
    height: 30px;
    border-width: 1px;
    max-width: none;
    border-radius: 24px;
  }

  .color-box::-webkit-color-swatch-wrapper {
    border-radius: 24px;
  }

  .color-box::-webkit-color-swatch {
    border-radius: 24px;
  }

  .color-box::-moz-color-swatch {
    border-radius: 24px;
  }

  .color-entry .hex-input,
  .hex-input {
    flex: none;
    height: 30px;
    padding: 0 4px;
    padding-left: 16px;
    font-size: 12px;
    border-width: 1px;
    width: 100%;
    min-width: 0;
  }

  .slider-wrapper span {
    min-width: 28px;
    font-size: 11px;
  }

  .color-entry .hex-input::before {
    left: 5px;
    font-size: 11px;
  }
  
  .actions-card {
    min-width: auto;
  }
  
  
  .pin-preview-btn,
  .config-btn {
    right: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
  }

  .pin-icon {
    width: 18px;
    height: 18px;
  }

  .canvas-container {
    padding: 2px;
  }

  /* Icons section responsive */
  .icon-section {
    margin: 8px 0 0 0;
    padding: 0;
  }
  
  
  .icon-entry {
    padding: 6px;
    gap: 4px;
  }

  .icon-drop-zone {
    padding: 10px 8px;
    min-height: auto;
    border-width: 1px;
  }

  .drop-icon {
    width: 20px;
    height: 20px;
  }

  .drop-zone-content {
    gap: 3px;
  }

  .icon-drop-zone p {
    font-size: 12px;
  }

  .icon-entry {
    overflow: hidden;
  }

  .icon-preview-box {
    width: 60px;
    height: 60px;
  }

  .nudge-grid {
    grid-template-columns: repeat(3, 18px);
    grid-template-rows: repeat(3, 18px);
  }

  .nudge-btn {
    width: 18px;
    height: 18px;
  }

  .nudge-btn svg {
    width: 10px;
    height: 10px;
  }

  .icon-select {
    font-size: 11px;
    padding: 3px 6px;
  }

  .icon-toggles label {
    font-size: 11px;
  }

  .icon-toggles input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  .color-reorder-btn,
  .color-remove-btn {
    width: 20px;
    height: 20px;
  }

  .color-reorder-btn svg,
  .color-remove-btn svg {
    width: 10px;
    height: 10px;
  }

  .json-button,
  .json-button-secondary {
    height: 34px;
    font-size: 12px;
    border-width: 1px;
  }
  
  .json-buttons-container {
    gap: 8px;
  }
  
  .copy-icon {
    width: 10px;
    height: 10px;
  }
  
  .links-section {
    margin: 20px 0;
    padding: 0;
    gap: 15px;
  }
  
  .link-item {
    padding: 10px;
    border-width: 1px;
  }
  
  .link-item h3 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .link-item p {
    font-size: 12px;
    margin-bottom: 15px;
  }
  
  .link-button {
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (max-width: 240px) {
  .tool-card {
    border-radius: 6px;
  }

  .controls-section .tool-panel {
    border-radius: 10px;
  }

  .color-entry {
    border-radius: 8px;
  }

  .icon-entry {
    border-radius: 10px;
  }

  .icon-drop-zone {
    border-radius: 6px;   /* in step with the .tool-card radius at this breakpoint */
  }

  .input-group input[type="text"],
  .input-group textarea,
  .input-group select,
  .quantity-control input[type="number"],
  .quantity-btn,
  .json-button,
  .json-button-secondary,
  .hex-input,
  .icon-select {
    border-radius: 10px;
  }

}

/* ===== COLOR PICKER ENHANCEMENTS ===== */

.color-entry .color-picker-wrapper {
  margin-top: 6px;
}

.color-entry .hex-input {
  position: relative;
  min-height: 30px;
}

.color-entry .hex-input::before {
  content: '#';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  pointer-events: none;
}

/* ===== ICON UPLOAD SECTION ===== */

/* Icon Section Styling */
.icon-section {
  margin: 15px 0 0 0;
}

.icon-section .tool-panel {
  background: #f8f9fa;
}

/* Inner settings box in the Icons panel — borderless like the controls-panel groups */
.icon-section .options-group {
  border: none;
}



/* Mobile: icon + arrows stay side by side, toggles wrap below */
@media (max-width: 400px) {
  .icon-controls-row {
    justify-content: center;
  }


  .icon-toggles {
    justify-content: center;
    width: 100%;
  }

  .icon-toggles-inner {
    flex-direction: row;
    /* gap: 14px; */
  }
}

@media (max-width: 360px) {
  .icon-toggles-inner {
    flex-direction: column;
  }
}