/* Shared tool-card system, extracted verbatim from the pixel-art tag generator so every
   tool page can reuse its design language: the two-tier card layout (visible .tool-panel
   holding tinted .tool-card.options-group sub-cards), .input-group form language,
   .quantity-control steppers, sliders and swatches, the .json-button family, and the
   pinnable floating .preview-card / .actions-card pair with its dock zone.

   Load this BEFORE the page's own stylesheet, after the site-wide sheets. Rules keep
   their original relative order: several equal-specificity pairs (e.g. .tool-card then
   .tool-panel) depend on it, so append page tweaks to the page file, don't reorder here. */


/* 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;
}


/* 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;
}


/* ===== 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;
}

/* ===== 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"]: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;
}


.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;
}


/* 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;
}


/* ===== 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;
}

/* 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;
}

/* 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%;
}

@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;
  }

  .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;
  }

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

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

@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 {
    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 {
    right: 8px;
    top: 8px;
  }
}

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

  /* Card padding tightens to 10px here — pull the pin button closer to the corner and
     shrink it a touch so it clears the content below. */
  .pin-preview-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 {
    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;
  }

  .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;
  }
}

@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;
  }

  .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 {
    right: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
  }

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

  .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;
  }
}

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

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

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

  .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 {
    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;
}